/* =====================================================
   NISHA THEME — main.css
   Dark theme. Accent: dark-red. Font: Astrud + Inter.
===================================================== */

/* Custom font */
@font-face {
    font-family: 'Astrud';
    src: url('../fonts/Astrud.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== CSS VARIABLES ===== */

/* ── Light theme (default) ── */
:root {
    --bg:         #f4f1ec;
    --bg-2:       #ebe7e0;
    --bg-3:       #dedad2;
    --text:       #1c1814;
    --text-muted: #6e6560;
    --accent:     #9b2a2a;
    --accent-h:   #b33232;
    --border:     rgba(28, 24, 20, 0.1);
    --border-h:   rgba(28, 24, 20, 0.22);

    /* Overlay / glass colours */
    --bg-glass:        rgba(244, 241, 236, 0.95);
    --bg-nav-mob:      rgba(244, 241, 236, 0.80);
    --sub-menu-bg:     rgba(244, 241, 236, 0.98);
    --hero-fog-1:      rgba(244, 241, 236, 0.1);
    --hero-fog-2:      rgba(244, 241, 236, 0.55);
    --hero-fog-3:      rgba(244, 241, 236, 1);
    --on-dark-overlay: #f0ede8;   /* text always on dark card/hero overlays */
    --ghost-num:       rgba(28, 24, 20, 0.05);

    /* Logo: original file has dark ink — show as-is on light bg */
    --logo-filter: none;

    --font-head: 'Astrud', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --max-w:     1320px;
    --gutter:    clamp(20px, 4vw, 60px);
    --section-v: clamp(80px, 10vw, 140px);
    --radius:    4px;
    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
    --dur:       0.3s;
}

/* ── Dark theme ── */
[data-theme="dark"] {
    --bg:         #0c0c0c;
    --bg-2:       #141414;
    --bg-3:       #1a1a1a;
    --text:       #f0ede8;
    --text-muted: #888;
    --border:     rgba(240, 237, 232, 0.08);
    --border-h:   rgba(240, 237, 232, 0.18);

    --bg-glass:        rgba(12, 12, 12, 0.96);
    --bg-nav-mob:      rgba(12, 12, 12, 0.80);
    --sub-menu-bg:     rgba(18, 18, 18, 0.98);
    --hero-fog-1:      rgba(12, 12, 12, 0.3);
    --hero-fog-2:      rgba(12, 12, 12, 0.6);
    --hero-fog-3:      rgba(12, 12, 12, 1);
    --on-dark-overlay: #f0ede8;
    --ghost-num:       rgba(240, 237, 232, 0.05);

    /* Logo: file has dark ink — invert to white on dark bg */
    --logo-filter: brightness(0) invert(1);
}

/* ── Auto-detect: follow system preference when user hasn't toggled manually ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:         #0c0c0c;
        --bg-2:       #141414;
        --bg-3:       #1a1a1a;
        --text:       #f0ede8;
        --text-muted: #888;
        --border:     rgba(240, 237, 232, 0.08);
        --border-h:   rgba(240, 237, 232, 0.18);

        --bg-glass:        rgba(12, 12, 12, 0.96);
        --bg-nav-mob:      rgba(12, 12, 12, 0.80);
        --sub-menu-bg:     rgba(18, 18, 18, 0.98);
        --hero-fog-1:      rgba(12, 12, 12, 0.3);
        --hero-fog-2:      rgba(12, 12, 12, 0.6);
        --hero-fog-3:      rgba(12, 12, 12, 1);
        --on-dark-overlay: #f0ede8;
        --ghost-num:       rgba(240, 237, 232, 0.05);
        --logo-filter:     brightness(0) invert(1);
    }
}

/* ── Smooth theme transition ── */
html {
    transition: background-color 0.35s ease, color 0.35s ease;
}
body,
.site-header,
.services-section,
.service-hero,
.contact-section,
.service-cta-box,
.site-footer,
.sub-menu,
.service-card,
.project-card {
    transition: background-color 0.35s ease,
                color            0.35s ease,
                border-color     0.35s ease;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  {
    background-color: var(--bg);
    color:            var(--text);
    font-family:      var(--font-body);
    line-height:      1.65;
    overflow-x:       hidden;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4 {
    font-family:   var(--font-head);
    line-height:   1.05;
    font-weight:   700;
    letter-spacing: 0;
}
h1 { font-size: clamp(56px, 9vw, 130px); }
h2 { font-size: clamp(38px, 6vw, 80px); }
h3 { font-size: clamp(22px, 3vw, 32px); }
h4 { font-size: clamp(18px, 2.5vw, 24px); }
p  { max-width: 68ch; }

/* ===== LAYOUT ===== */
.container {
    width:      100%;
    max-width:  var(--max-w);
    margin:     0 auto;
    padding:    0 var(--gutter);
}

.section {
    padding-top:    var(--section-v);
    padding-bottom: var(--section-v);
}

.section-label {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  16px;
    display:        block;
}

.section-heading {
    margin-bottom: clamp(40px, 6vw, 80px);
}

/* ===== BUTTONS ===== */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 32px;
    font-size:       14px;
    font-weight:     600;
    letter-spacing:  0.08em;
    text-transform:  uppercase;
    border:          1px solid transparent;
    transition:      background var(--dur) var(--ease),
                     color      var(--dur) var(--ease),
                     border-color var(--dur) var(--ease);
}

.btn-primary {
    background:   var(--accent);
    color:        #f0ede8;   /* always light text on dark-red button */
    border-color: var(--accent);
}
.btn-primary:hover {
    background:    var(--accent-h);
    border-color:  var(--accent-h);
}

.btn-outline {
    background:   transparent;
    color:        var(--text);
    border-color: var(--border-h);
}
.btn-outline:hover {
    border-color: var(--text);
}

/* ===== HEADER ===== */
.site-header {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    200;
    height:     72px;
    transition: background var(--dur) var(--ease),
                box-shadow  var(--dur) var(--ease);
}
.site-header.is-scrolled {
    background: var(--bg-glass);
    box-shadow: 0 1px 0 var(--border);
    backdrop-filter: blur(8px);
}
body.menu-open {
    overflow: hidden;
}
body.menu-open .site-header {
    background: var(--bg);
    box-shadow: 0 1px 0 var(--border);
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          100%;
    padding:         0 var(--gutter);
    max-width:       var(--max-w);
    margin:          0 auto;
}

/* Logo */
.site-logo {
    display:        flex;
    flex-direction: column;
    line-height:    1;
    gap:            2px;
}
.site-logo .logo-mark {
    font-family:    var(--font-head);
    font-size:      28px;
    font-weight:    700;
    color:          var(--text);
    letter-spacing: 0;
}
.site-logo .logo-sub {
    font-size:      9px;
    font-weight:    400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--text-muted);
}
.site-logo img,
.site-logo .custom-logo {
    max-height: 44px;
    width:      auto;
}
/* Logo filter adapts to current theme */
.site-logo img.custom-logo,
.site-logo-img,
.nav-logo-img {
    filter: var(--logo-filter);
}

.site-logo-img,
.nav-logo-img {
    max-height: 48px;
    width:      auto;
}

/* Desktop header menu */
.header-menu {
    position: absolute;
    left:     50%;
    top:      50%;
    transform: translate(-50%, -50%);
    z-index:  1;
}

.header-menu-list {
    display:     flex;
    align-items: center;
    gap:         clamp(24px, 3.4vw, 54px);
}

.header-menu-item {
    position: relative;
}

.header-menu-link {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    padding:        26px 0;
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--text);
    opacity:        0.84;
    white-space:    nowrap;
    transition:     color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.header-menu-link svg {
    width:  13px;
    height: 13px;
}

.header-menu-item:hover .header-menu-link {
    color:   var(--text);
    opacity: 1;
}

.header-submenu {
    position:        absolute;
    top:             calc(100% - 8px);
    left:            50%;
    transform:       translate(-50%, 8px);
    min-width:       280px;
    padding:         12px 0;
    background:      var(--sub-menu-bg);
    border:          1px solid var(--border);
    box-shadow:      0 18px 42px rgba(28, 24, 20, 0.10);
    backdrop-filter: blur(18px);
    opacity:         0;
    visibility:      hidden;
    pointer-events:  none;
    transition:      opacity var(--dur) var(--ease),
                     transform var(--dur) var(--ease),
                     visibility var(--dur) var(--ease);
}

.header-menu-item:hover .header-submenu,
.header-menu-item:focus-within .header-submenu {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translate(-50%, 0);
}

.header-submenu a {
    display:        block;
    padding:        10px 18px;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    transition:     color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.header-submenu a:hover {
    color:      var(--text);
    background: rgba(155, 42, 42, 0.06);
}

/* ===== FULLSCREEN NAV OVERLAY ===== */
.site-nav {
    position:        fixed;
    inset:           0;
    z-index:         500;
    background:      var(--bg-nav-mob);
    backdrop-filter: blur(20px);
    overflow-y:      auto;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity 0.4s var(--ease), visibility 0.4s;
}
body.menu-open .site-nav {
    opacity:    1;
    visibility: visible;
}

/* Inner wrapper */
.nav-inner {
    display:        flex;
    flex-direction: column;
    min-height:     100%;
    padding:        0 var(--gutter);
    max-width:      var(--max-w);
    margin:         0 auto;
}

/* Top row: logo left, lang + close right */
.nav-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    height:          72px;
    flex-shrink:     0;
    border-bottom:   1px solid var(--border);
}

.nav-logo {
    display:     inline-flex;
    align-items: center;
}

.nav-actions {
    display:     flex;
    align-items: center;
    gap:         22px;
}

/* Lang switcher inside nav */
.nav-lang {
    display:     flex;
    align-items: center;
}
.nav-lang .lang-btn {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    padding:        4px 7px;
    transition:     color var(--dur) var(--ease);
    line-height:    1;
}
.nav-lang .lang-btn:hover                       { color: var(--text); }
.nav-lang .lang-btn.is-active                   { color: var(--accent); pointer-events: none; }
.nav-lang .lang-btn:not(:last-child) {
    margin-right:  7px;
    padding-right: 7px;
    border-right:  1px solid var(--border-h);
}

/* Close button */
.menu-close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    color:           var(--text-muted);
    transition:      color var(--dur) var(--ease);
}
.menu-close:hover { color: var(--text); }

/* Body */
.nav-body {
    display:     flex;
    align-items: flex-start;
    gap:         clamp(40px, 8vw, 120px);
    padding:     clamp(32px, 5vw, 60px) 0 clamp(24px, 4vw, 48px);
    flex:        1;
}
.nav-menu-col {
    flex:           1;
    display:        flex;
    flex-direction: column;
}

/* Nav list: main items */
.nav-list {
    counter-reset: nav-section;
    list-style:    none;
    flex:          1;
}
.nav-list > li {
    counter-increment: nav-section;
    border-top:        1px solid var(--border);
}
.nav-list > li:last-child { border-bottom: 1px solid var(--border); }

.nav-list > li > a {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 0;
    font-size:       clamp(22px, 3.2vw, 44px);
    font-family:     var(--font-head);
    font-weight:     400;
    color:           var(--text);
    letter-spacing:  0;
    transition:      opacity 0.25s var(--ease);
}

/* +/− toggle icon */
.nav-arrow {
    font-size:   0.5em;
    font-weight: 300;
    letter-spacing: 0;
    opacity:     0.45;
    flex-shrink: 0;
    font-family: var(--font-body);
}
.nav-arrow::before { content: '+'; }
.menu-item-has-children.is-open > a .nav-arrow::before { content: '−'; }

/* Hover dimming — pure CSS */
.nav-menu-col:hover .nav-list > li > a       { opacity: 0.18; }
.nav-menu-col:hover .nav-list > li:hover > a { opacity: 1; }

/* Sub-menu: inline expand */
.sub-menu {
    counter-reset:   nav-sub;
    list-style:      none;
    max-height:      0;
    overflow:        hidden;
    transition:      max-height 0.4s var(--ease);
    position:        static;
    opacity:         1;
    transform:       none;
    background:      none;
    border:          none;
    backdrop-filter: none;
    pointer-events:  all;
}
.menu-item-has-children.is-open > .sub-menu { max-height: 800px; }

.sub-menu > li { counter-increment: nav-sub; }
.sub-menu > li > a {
    display:       flex;
    align-items:   center;
    gap:           16px;
    padding:       13px 0;
    font-size:     clamp(13px, 1.3vw, 16px);
    font-weight:   400;
    color:         var(--text-muted);
    border-bottom: 1px solid var(--border);
    transition:    color 0.2s var(--ease);
}
.sub-menu > li > a::before {
    content:     counter(nav-section) '.' counter(nav-sub);
    min-width:   40px;
    opacity:     0.45;
    font-size:   0.9em;
    flex-shrink: 0;
}
.sub-menu > li > a::after  { display: none !important; }
.sub-menu > li > a:hover   { color: var(--text); }

/* Bottom CTA */
.nav-cta {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        20px 0;
    font-size:      clamp(12px, 1.1vw, 14px);
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-muted);
    border-top:     1px solid var(--border);
    margin-top:     4px;
    transition:     color 0.2s var(--ease);
}
.nav-cta:hover { color: var(--text); }

/* Desktop contact column */
.nav-contact-col {
    display:        flex;
    flex-direction: column;
    width:          240px;
    flex-shrink:    0;
    padding-top:    4px;
}
.nav-contact-label {
    font-size:      11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity:        0.45;
    margin-bottom:  4px;
    margin-top:     24px;
}
.nav-contact-label:first-child { margin-top: 0; }
.nav-contact-link {
    display:    block;
    color:      var(--text-muted);
    font-size:  13px;
    transition: color 0.2s var(--ease);
}
.nav-contact-link:hover { color: var(--text); }
.nav-contact-social {
    display:    flex;
    gap:        14px;
    margin-top: 8px;
}
.nav-social-link {
    display:    flex;
    color:      var(--text-muted);
    transition: color 0.2s var(--ease);
}
.nav-social-link:hover { color: var(--text); }

/* Burger — visible on all screen sizes */
.menu-toggle {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            6px;
    width:          40px;
    height:         40px;
    padding:        4px;
}
.menu-toggle span {
    display:    block;
    height:     1px;
    background: var(--text);
    transition: transform var(--dur) var(--ease),
                opacity   var(--dur) var(--ease);
    transform-origin: center;
}
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header controls group (theme toggle + burger) */
.header-controls {
    display:     flex;
    align-items: center;
    gap:         4px;
    position:    relative;
    z-index:     200;
}

/* Theme toggle button */
.theme-toggle {
    width:           40px;
    height:          40px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-muted);
    border-radius:   50%;
    transition:      color       var(--dur) var(--ease),
                     background  var(--dur) var(--ease);
    flex-shrink:     0;
}
.theme-toggle:hover {
    color:       var(--text);
    background:  var(--border);
}
.theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }

/* Light mode → show moon (clicking switches to dark) */
.icon-moon { display: block; }
.icon-sun  { display: none;  }

/* Dark mode → show sun (clicking switches to light) */
[data-theme="dark"] .icon-moon { display: none;  }
[data-theme="dark"] .icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon-moon { display: none;  }
    :root:not([data-theme="light"]) .icon-sun  { display: block; }
}

/* Language Switcher — lives inside .nav-lang (styles defined in nav overlay section above) */

/* ===== HERO ===== */
.hero {
    position:       relative;
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    text-align:     center;
    overflow:       hidden;
    padding:        100px var(--gutter) 60px;
}

.hero-bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
}
.hero-bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.25;
}
.hero-bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom,
        var(--hero-fog-1)  0%,
        var(--hero-fog-2)  60%,
        var(--hero-fog-3)  100%
    );
}

.hero-content {
    position:  relative;
    z-index:   1;
    max-width: 900px;
}

.hero-pre {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  24px;
}

.hero-title {
    font-size:      clamp(80px, 16vw, 200px);
    line-height:    0.9;
    margin-bottom:  32px;
    color:          var(--text);
}
.hero-title--img {
    margin-bottom:  clamp(24px, 3vw, 40px);
    padding:        0;
    display:        flex;
    justify-content: center;
}
.hero-title-img {
    display:    block;
    width:      auto;
    max-width:  min(720px, 88vw);
    height:     auto;
    max-height: clamp(160px, 28vw, 360px);
    object-fit: contain;
}

.hero-desc {
    font-size:       clamp(16px, 2vw, 20px);
    color:           var(--text-muted);
    margin:          0 auto 48px;
    line-height:     1.55;
    max-width:       540px;
}

.hero-scroll {
    position:   absolute;
    bottom:     40px;
    left:       50%;
    transform:  translateX(-50%);
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        8px;
    color:      var(--text-muted);
    font-size:  11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index:    1;
}
.hero-scroll svg {
    animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* Horizontal rule accent */
.hr-accent {
    border:        none;
    height:        1px;
    background:    var(--border);
    margin:        0;
}

/* ===== ABOUT ===== */
.about-grid {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       clamp(40px, 6vw, 100px);
    align-items: start;
}
.about-text-col { }

.about-text {
    font-size:     clamp(15px, 1.4vw, 18px);
    color:         var(--text-muted);
    line-height:   1.75;
    margin-bottom: 40px;
}
.about-text p + p { margin-top: 16px; }

.about-stats {
    display:   grid;
    grid-template-columns: repeat(3, 1fr);
    gap:       1px;
    background: var(--border);
    border:    1px solid var(--border);
}
.stat-item {
    padding:    32px 24px;
    background: var(--bg);
    text-align: center;
}
.stat-num {
    font-family:    var(--font-head);
    font-size:      clamp(36px, 5vw, 56px);
    color:          var(--text);
    line-height:    1;
    margin-bottom:  8px;
}
.stat-label {
    font-size:      12px;
    color:          var(--text-muted);
    letter-spacing: 0.05em;
}

.about-img-col { }
.about-img {
    width:      100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}
.about-img-placeholder {
    width:       100%;
    aspect-ratio: 3/4;
    background:  var(--bg-2);
    border:      1px solid var(--border);
    display:     flex;
    align-items: center;
    justify-content: center;
    color:       var(--text-muted);
    font-size:   13px;
}

/* ===== SERVICES ===== */
.services-section { background: var(--bg-2); }

.services-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1px;
    background:            var(--border);
    border:                1px solid var(--border);
}

.service-card {
    background:  var(--bg-2);
    padding:     clamp(28px, 3vw, 48px);
    position:    relative;
    overflow:    hidden;
    transition:  background var(--dur) var(--ease);
}
.service-card:hover { background: var(--bg-3); }

.service-icon {
    width:        48px;
    height:       48px;
    margin-bottom: 24px;
    color:         var(--accent);
}
.service-icon svg {
    width:  100%;
    height: 100%;
}

.service-num {
    position:       absolute;
    top:            24px;
    right:          24px;
    font-family:    var(--font-head);
    font-size:      48px;
    color:          var(--border);
    line-height:    1;
    transition:     color var(--dur) var(--ease);
}
.service-card:hover .service-num { color: rgba(155, 42, 42, 0.15); }

.service-title {
    font-family:   var(--font-head);
    font-size:     clamp(20px, 2vw, 26px);
    margin-bottom: 12px;
    color:         var(--text);
}

.service-desc {
    font-size:  14px;
    color:      var(--text-muted);
    line-height: 1.65;
    max-width:  none;
}

.services-empty {
    text-align: center;
    padding:    60px 20px;
    color:      var(--text-muted);
    font-size:  14px;
    background: var(--bg-2);
}

/* ===== WORKS / PORTFOLIO ===== */
.works-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             24px;
    margin-bottom:   clamp(32px, 4vw, 60px);
    flex-wrap:       wrap;
}

.works-filter {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
}

.filter-btn {
    padding:        8px 18px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    border:         1px solid var(--border);
    transition:     all var(--dur) var(--ease);
}
.filter-btn:hover,
.filter-btn.is-active {
    color:        var(--text);
    border-color: var(--accent);
    background:   rgba(155, 42, 42, 0.1);
}

.works-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            var(--border);
}
.works-grid.has-sidebar { grid-template-columns: repeat(2, 1fr); }

/* Project card */
.project-card {
    position:   relative;
    overflow:   hidden;
    aspect-ratio: 4/3;
    background: var(--bg-2);
    cursor:     pointer;
    display:    block;
}
.project-card[data-cat].is-hidden { display: none; }

.project-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.project-card:hover img { transform: scale(1.06); }

.project-card-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to top,
        rgba(12,12,12,0.92) 0%,
        rgba(12,12,12,0.4)  60%,
        transparent         100%
    );
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:        clamp(16px, 2vw, 28px);
    opacity:        0;
    transition:     opacity var(--dur) var(--ease);
}
.project-card:hover .project-card-overlay { opacity: 1; }

.project-card-cat {
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          rgba(240, 237, 232, 0.65);  /* always on dark overlay — light tint */
    transform:      translateY(8px);
    transition:     transform var(--dur) var(--ease) 0.04s;
    margin-bottom:  6px;
}
.project-card:hover .project-card-cat { transform: translateY(0); }

.project-card-title {
    font-family:    var(--font-head);
    font-size:      clamp(18px, 2vw, 24px);
    color:          var(--on-dark-overlay);  /* always light — sits on dark gradient */
    transform:      translateY(8px);
    transition:     transform var(--dur) var(--ease);
    line-height:    1.2;
}
.project-card:hover .project-card-title { transform: translateY(0); }

.project-card-arrow {
    position:   absolute;
    top:        20px;
    right:      20px;
    width:      36px;
    height:     36px;
    border:     1px solid rgba(240,237,232,0.3);
    border-radius: 50%;
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    transform:  scale(0.8);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease);
}
.project-card:hover .project-card-arrow {
    opacity:   1;
    transform: scale(1);
}

/* No image placeholder in card */
.project-card-noimg {
    width:      100%;
    height:     100%;
    background: var(--bg-3);
    display:    flex;
    align-items: center;
    justify-content: center;
    color:      var(--text-muted);
    font-size:  13px;
}

.works-all-link {
    margin-top: clamp(40px, 4vw, 60px);
    text-align: center;
}

/* ===== PORTFOLIO ARCHIVE ===== */
.portfolio-page {
    padding-top: 72px;
}

.portfolio-hero {
    padding-top:    clamp(70px, 9vw, 140px);
    padding-bottom: clamp(36px, 5vw, 72px);
    display:        grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
    gap:            clamp(28px, 6vw, 100px);
    align-items:    end;
}

.portfolio-hero h1 {
    font-size:   clamp(52px, 9vw, 132px);
    line-height: 0.9;
    max-width:   880px;
}

.portfolio-hero h1 span {
    color: var(--accent);
}

.portfolio-hero p {
    color:       var(--text-muted);
    font-size:   clamp(16px, 1.6vw, 21px);
    line-height: 1.6;
    max-width:   520px;
}

.portfolio-section {
    padding-bottom: var(--section-v);
}

.portfolio-filter {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    padding-bottom: clamp(28px, 4vw, 52px);
    border-bottom: 1px solid var(--border);
}

.portfolio-list {
    border-bottom: 1px solid var(--border);
}

.portfolio-row {
    display:               grid;
    grid-template-columns: 56px minmax(220px, 34vw) minmax(0, 1fr) 42px;
    gap:                   clamp(18px, 3vw, 52px);
    align-items:           center;
    padding:               clamp(24px, 3.6vw, 54px) 0;
    border-top:            1px solid var(--border);
}

.portfolio-index {
    color:          var(--text-muted);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.12em;
}

.portfolio-row-media {
    aspect-ratio:  16 / 10;
    overflow:      hidden;
    background:    var(--bg-2);
}

.portfolio-row-media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

.portfolio-row:hover .portfolio-row-media img {
    transform: scale(1.035);
}

.portfolio-row-body {
    min-width: 0;
}

.portfolio-row-cat {
    display:        block;
    margin-bottom:  10px;
    color:          var(--accent);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.portfolio-row h2 {
    font-size: clamp(30px, 4.5vw, 72px);
    line-height: 0.95;
}

.portfolio-row p {
    margin-top:  14px;
    color:       var(--text-muted);
    font-size:   clamp(14px, 1.2vw, 17px);
    line-height: 1.65;
    max-width:   58ch;
}

.portfolio-row-arrow {
    width:           42px;
    height:          42px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-muted);
    border:          1px solid var(--border);
    transition:      color var(--dur) var(--ease),
                     border-color var(--dur) var(--ease),
                     transform var(--dur) var(--ease);
}

.portfolio-row:hover .portfolio-row-arrow {
    color:        var(--text);
    border-color: var(--accent);
    transform:    translateX(4px);
}

/* ===== CONTACT ===== */
.contact-section { background: var(--bg-2); }

.contact-grid {
    display:               grid;
    grid-template-columns: 1fr 1.2fr;
    gap:                   clamp(40px, 6vw, 100px);
    align-items:           start;
}

.contact-info { }
.contact-info h2 { margin-bottom: 32px; }

.contact-list { display: flex; flex-direction: column; gap: 24px; }

.contact-item {
    display:    flex;
    gap:        16px;
    align-items: flex-start;
}
.contact-item-icon {
    width:          36px;
    height:         36px;
    flex-shrink:    0;
    color:          var(--accent);
    margin-top:     2px;
}
.contact-item-icon svg { width: 100%; height: 100%; }

.contact-item-label {
    font-size:      11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  4px;
}
.contact-item-value {
    font-size:  16px;
    color:      var(--text);
    line-height: 1.4;
}
.contact-item-value a:hover { color: var(--accent); }

.contact-social {
    display:    flex;
    gap:        12px;
    margin-top: 40px;
}
.social-link {
    width:          42px;
    height:         42px;
    border:         1px solid var(--border);
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--text-muted);
    transition:     border-color var(--dur) var(--ease),
                    color        var(--dur) var(--ease);
}
.social-link svg { width: 20px; height: 20px; }
.social-link:hover {
    border-color: var(--accent);
    color:        var(--text);
}

/* Contact form */
.contact-form { }
.contact-form h3 {
    font-size:     clamp(20px, 2.5vw, 28px);
    margin-bottom: 32px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     16px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.form-group label {
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

.form-group input,
.form-group textarea {
    background:   var(--bg);
    border:       1px solid var(--border);
    color:        var(--text);
    padding:      14px 16px;
    font-size:    15px;
    width:        100%;
    outline:      none;
    transition:   border-color var(--dur) var(--ease);
    border-radius: 0;
    -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--accent); }
.form-group textarea {
    height:     160px;
    resize:     vertical;
    min-height: 120px;
}

.form-submit { margin-top: 8px; }
.form-submit .btn { min-width: 180px; justify-content: center; }

.form-message {
    margin-top:  16px;
    padding:     12px 16px;
    font-size:   14px;
    display:     none;
}
.form-message.success {
    background:  rgba(46, 125, 50, 0.12);
    border:      1px solid rgba(46, 125, 50, 0.3);
    color:       #2a7a2e;   /* dark green — good contrast on light bg */
    display:     block;
}
.form-message.error {
    background:  rgba(155, 42, 42, 0.1);
    border:      1px solid rgba(155, 42, 42, 0.3);
    color:       #9b2a2a;   /* dark red — good contrast on light bg */
    display:     block;
}
/* Dark theme: restore light tones for readability on dark bg */
[data-theme="dark"] .form-message.success { color: #81c784; }
[data-theme="dark"] .form-message.error   { color: #e57373; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-message.success { color: #81c784; }
    :root:not([data-theme="light"]) .form-message.error   { color: #e57373; }
}

/* ===== CONTACT PAGE ===== */
.contact-page {
    padding-top: 72px;
}

.contact-hero {
    min-height:     calc(100vh - 72px);
    display:        flex;
    align-items:    center;
    padding:        clamp(38px, 5vw, 70px) 0;
}

.contact-hero-inner {
    display:               grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    gap:                   clamp(32px, 6vw, 100px);
    align-items:           center;
}

.contact-title {
    font-size:   clamp(48px, 8vw, 118px);
    line-height: 0.9;
    max-width:   820px;
}

.contact-title span {
    color: var(--accent);
}

.contact-lead {
    color:       var(--text-muted);
    font-size:   clamp(16px, 1.5vw, 20px);
    line-height: 1.65;
    max-width:   560px;
}

.contact-actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px;
    margin-top:  28px;
}

.contact-info-section {
    padding-top:    clamp(34px, 5vw, 70px);
    padding-bottom: clamp(64px, 8vw, 110px);
}

.contact-info-grid {
    display:               grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
    gap:                   clamp(32px, 6vw, 96px);
    align-items:           start;
}

.contact-info-title h2 {
    font-size: clamp(30px, 4.4vw, 66px);
}

.contact-rows {
    border-top: 1px solid var(--border);
}

.contact-row {
    display:               grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap:                   clamp(18px, 3vw, 48px);
    padding:               22px 0;
    border-bottom:         1px solid var(--border);
}

.contact-row-label {
    color:          var(--accent);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-row-content {
    color:       var(--text);
    font-size:   clamp(18px, 2vw, 30px);
    line-height: 1.2;
}

.contact-row-content a:hover {
    color: var(--accent);
}

.contact-note {
    margin-top:  8px;
    color:       var(--text-muted);
    font-size:   14px;
    line-height: 1.55;
    max-width:   58ch;
}

.contact-panel {
    position:        fixed;
    inset:           0;
    z-index:         900;
    display:         flex;
    justify-content: flex-end;
    background:      rgba(28, 24, 20, 0.36);
    opacity:         0;
    visibility:      hidden;
    pointer-events:  none;
    transition:      opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}

.contact-panel.is-open {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}

body.contact-panel-open {
    overflow: hidden;
}

.contact-panel-card {
    width:      min(760px, 100%);
    min-height: 100%;
    padding:    clamp(22px, 3vw, 44px);
    background: var(--bg);
    box-shadow: -28px 0 70px rgba(28, 24, 20, 0.14);
    overflow-y: auto;
    transform:  translateX(100%);
    transition: transform 0.45s var(--ease);
}

.contact-panel.is-open .contact-panel-card {
    transform: translateX(0);
}

.contact-panel-top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             18px;
    padding-bottom:  20px;
    border-bottom:   1px solid var(--border);
}

.contact-panel-close {
    width:           42px;
    height:          42px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-muted);
}

.contact-panel-close:hover {
    color: var(--text);
}

.contact-form-grid {
    display: grid;
    gap:     28px;
    padding-top: clamp(28px, 4vw, 52px);
}

.contact-form-title h2 {
    font-size: clamp(32px, 5vw, 70px);
}

.contact-choice {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    margin-bottom: 18px;
}

.contact-choice button {
    padding:        8px 12px;
    color:          var(--text-muted);
    border:         1px solid var(--border);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-choice button.is-active,
.contact-choice button:hover {
    color:        var(--text);
    border-color: var(--accent);
}

.contact-panel .contact-form label {
    display:        block;
    color:          var(--text-muted);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom:  14px;
}

.contact-panel .contact-form input,
.contact-panel .contact-form textarea {
    display:        block;
    width:          100%;
    margin-top:     7px;
    padding:        13px 0;
    color:          var(--text);
    background:     transparent;
    border:         0;
    border-bottom:  1px solid var(--border);
    border-radius:  0;
    outline:        none;
}

.contact-panel .contact-form textarea {
    min-height: 110px;
    resize:     vertical;
}

.contact-panel .contact-form input:focus,
.contact-panel .contact-form textarea:focus {
    border-bottom-color: var(--accent);
}

/* ===== FOOTER ===== */
.site-footer {
    background:  var(--bg);
    border-top:  1px solid var(--border);
    padding:     20px 0;
}

/* Single horizontal bar */
.footer-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    min-height:      40px;
}

/* Email */
.footer-email {
    font-size:  13px;
    color:      var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.footer-email:hover { color: var(--text); }

/* Messengers + phone */
.footer-messengers {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.footer-messenger-link {
    display:    flex;
    color:      var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.footer-messenger-link:hover { color: var(--text); }

.footer-phone {
    font-size:   13px;
    color:       var(--text-muted);
    margin-left: 4px;
    transition:  color var(--dur) var(--ease);
}
.footer-phone:hover { color: var(--text); }

/* Social icons */
.footer-social { display: flex; gap: 10px; }
.social-link {
    display:    flex;
    color:      var(--text-muted);
    transition: color var(--dur) var(--ease);
}
.social-link:hover { color: var(--text); }

/* CTA link */
.footer-cta {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--text-muted);
    white-space: nowrap;
    transition:  color var(--dur) var(--ease);
}
.footer-cta:hover { color: var(--text); }

/* Copyright */
.footer-copy {
    font-size:  11px;
    color:      var(--text-muted);
    margin-top: 12px;
    opacity:    0.6;
}

/* ===== SINGLE PROJECT ===== */
.project-hero {
    padding-top: 100px;
    margin-bottom: clamp(40px, 5vw, 80px);
}
.project-hero-img {
    width:      100%;
    max-height: 600px;
    object-fit: cover;
}
.project-hero-placeholder {
    width:       100%;
    height:      400px;
    background:  var(--bg-2);
}

.project-meta-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   clamp(40px, 5vw, 80px);
    margin-bottom:         clamp(40px, 5vw, 80px);
    align-items:           start;
}

.project-title-area h1 {
    margin-bottom: 16px;
}
.project-cats a {
    font-size:      11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--accent);
}

.project-sidebar-details { }
.project-detail-item {
    padding:       16px 0;
    border-bottom: 1px solid var(--border);
}
.project-detail-item:first-child { border-top: 1px solid var(--border); }
.project-detail-label {
    font-size:      11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  4px;
}
.project-detail-value { font-size: 15px; }

.project-content {
    margin-bottom: clamp(40px, 5vw, 80px);
}
.project-content p, .project-content li {
    font-size:   clamp(15px, 1.5vw, 18px);
    color:       var(--text-muted);
    line-height: 1.75;
    max-width:   70ch;
}
.project-content p + p { margin-top: 16px; }
.project-content h2, .project-content h3 { color: var(--text); margin: 40px 0 16px; }
.project-content h2 { font-size: clamp(22px, 2.5vw, 34px); }
.project-content h3 { font-size: clamp(17px, 1.8vw, 22px); }
.project-content img { width: 100%; margin: 32px 0; }

.project-nav {
    display:         flex;
    justify-content: space-between;
    gap:             24px;
    padding:         clamp(30px, 4vw, 60px) 0;
    border-top:      1px solid var(--border);
    border-bottom:   1px solid var(--border);
    margin-bottom:   clamp(40px, 5vw, 80px);
}
.project-nav-link {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}
.project-nav-link span:first-child {
    font-size:      11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
}
.project-nav-link span:last-child {
    font-size:  15px;
    color:      var(--text);
}
.project-nav-link:hover span:last-child { color: var(--accent); }

/* ===== ARCHIVE / PORTFOLIO PAGE ===== */
.archive-hero {
    padding:    calc(72px + clamp(40px, 6vw, 80px)) var(--gutter) clamp(40px, 6vw, 80px);
    text-align: center;
}
.archive-hero h1 { margin-bottom: 16px; }
.archive-hero p {
    font-size:   clamp(15px, 1.5vw, 18px);
    color:       var(--text-muted);
    margin:      0 auto;
}

/* ===== GENERIC PAGE ===== */
.page-hero {
    padding:    calc(72px + clamp(40px, 6vw, 80px)) var(--gutter) clamp(40px, 5vw, 70px);
}
.page-hero h1 { margin-bottom: 16px; }

.page-content {
    padding-bottom: var(--section-v);
}
.page-content .entry-content p,
.page-content .entry-content li {
    font-size:   clamp(15px, 1.5vw, 18px);
    color:       var(--text-muted);
    line-height: 1.75;
    max-width:   72ch;
}
.page-content .entry-content p + p { margin-top: 16px; }
.page-content .entry-content h2,
.page-content .entry-content h3 { margin: 48px 0 16px; }
.page-content .entry-content h2 { font-size: clamp(22px, 2.5vw, 34px); }
.page-content .entry-content h3 { font-size: clamp(17px, 1.8vw, 22px); }
.page-content .entry-content ul { list-style: disc; padding-left: 24px; }
.page-content .entry-content li { margin-bottom: 8px; }
.page-content .entry-content img { max-width: 100%; margin: 32px 0; }

/* ===== 404 ===== */
.not-found {
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         var(--section-v) var(--gutter);
}
.not-found-num {
    font-family: var(--font-head);
    font-size:   clamp(100px, 20vw, 240px);
    line-height: 0.85;
    color:       var(--ghost-num);
    margin-bottom: 24px;
}
.not-found h1 {
    font-size:     clamp(28px, 4vw, 48px);
    margin-bottom: 16px;
}
.not-found p {
    color:         var(--text-muted);
    margin:        0 auto 40px;
    max-width:     48ch;
}

/* ===== SERVICE HERO ===== */
.service-hero {
    position:    relative;
    padding-top: 72px;
    overflow:    hidden;
    min-height:  420px;
    background:  var(--bg-2);
    display:     flex;
    flex-direction: column;
    justify-content: flex-end;
}
.service-hero-img-wrap {
    position: absolute;
    inset:    0;
}
.service-hero-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.22;
}
.service-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom,
        rgba(12,12,12,0.4) 0%,
        rgba(12,12,12,0.88) 100%
    );
}
.service-hero-content {
    position:       relative;
    z-index:        1;
    padding-top:    clamp(40px, 6vw, 80px);
    padding-bottom: clamp(50px, 7vw, 100px);
    color:          var(--text);   /* default: theme colour */
}
.service-hero-content .service-hero-lead { color: var(--text-muted); }

/* Featured image present → content sits on dark overlay, force light text */
.service-hero--has-img .service-hero-content {
    color: var(--on-dark-overlay);
}
.service-hero--has-img .service-hero-content .service-hero-lead {
    color: rgba(240, 237, 232, 0.7);
}
.service-breadcrumb {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  32px;
    transition:     color var(--dur) var(--ease);
}
.service-breadcrumb:hover { color: var(--text); }
/* On dark overlay: breadcrumb must be light */
.service-hero--has-img .service-breadcrumb       { color: rgba(240, 237, 232, 0.55); }
.service-hero--has-img .service-breadcrumb:hover  { color: var(--on-dark-overlay); }

.service-hero-icon {
    width:         52px;
    height:        52px;
    color:         var(--accent);
    margin-bottom: 20px;
}
.service-hero-icon svg { width: 100%; height: 100%; }
/* On dark overlay: icon should be light, not dark-red */
.service-hero--has-img .service-hero-icon { color: rgba(240, 237, 232, 0.85); }
.service-hero-content h1 { margin-bottom: 20px; }
.service-hero-lead {
    font-size:   clamp(16px, 1.8vw, 20px);
    color:       var(--text-muted);
    line-height: 1.6;
    max-width:   60ch;
}

/* ===== SERVICE CONTENT ===== */
.service-content-grid {
    display:               grid;
    grid-template-columns: 1fr 300px;
    gap:                   clamp(40px, 5vw, 80px);
    align-items:           start;
}
.service-entry p,
.service-entry li {
    font-size:   clamp(15px, 1.4vw, 18px);
    color:       var(--text-muted);
    line-height: 1.8;
    max-width:   70ch;
}
.service-entry p + p { margin-top: 16px; }
.service-entry h2, .service-entry h3 { margin: 40px 0 16px; }
.service-entry h2 { font-size: clamp(22px, 2.5vw, 34px); }
.service-entry h3 { font-size: clamp(17px, 1.8vw, 22px); }
.service-entry ul  { list-style: disc; padding-left: 22px; }
.service-entry li  { margin-bottom: 6px; }

.service-cta-box {
    background: var(--bg-2);
    border:     1px solid var(--border);
    padding:    32px;
    position:   sticky;
    top:        calc(72px + 24px);
}
.service-cta-box p {
    font-size:     15px;
    color:         var(--text-muted);
    margin-bottom: 24px;
    max-width:     none;
}
.service-cta-box .btn { width: 100%; justify-content: center; }
.service-cta-phone {
    display:    block;
    text-align: center;
    font-size:  15px;
    color:      var(--text-muted);
    margin-top: 16px;
    transition: color var(--dur) var(--ease);
}
.service-cta-phone:hover { color: var(--text); }

.service-sidenav {
    margin-top:  32px;
    border-top:  1px solid var(--border);
    padding-top: 24px;
}
.service-sidenav h4 {
    font-family:    var(--font-body);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  16px;
}
.service-sidenav ul { display: flex; flex-direction: column; gap: 8px; }
.service-sidenav a {
    font-size:   14px;
    color:       var(--text-muted);
    transition:  color var(--dur) var(--ease);
    display:     flex;
    align-items: center;
    gap:         8px;
}
.service-sidenav a::before {
    content:       '';
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--border-h);
    flex-shrink:   0;
}
.service-sidenav a:hover,
.service-sidenav a.is-current { color: var(--text); }
.service-sidenav a.is-current::before { background: var(--accent); }

/* ===== SERVICE RELATED PROJECTS ===== */
.service-projects {
    background: var(--bg);
}

.service-projects-head {
    display:               grid;
    grid-template-columns: minmax(260px, 0.55fr) minmax(0, 0.45fr);
    gap:                   clamp(28px, 5vw, 88px);
    align-items:           end;
    margin-bottom:         clamp(32px, 5vw, 72px);
}

.service-projects-head h2 {
    font-size: clamp(36px, 6vw, 86px);
    max-width: 780px;
}

.service-projects-head p {
    color:       var(--text-muted);
    font-size:   clamp(15px, 1.35vw, 18px);
    line-height: 1.7;
}

.service-projects-grid {
    display:               grid;
    grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
    gap:                   clamp(28px, 5vw, 80px);
    align-items:           start;
}

.chapter-list {
    border-top: 1px solid var(--border);
}

.chapter-item {
    display:               grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap:                   16px;
    align-items:           start;
    padding:               15px 0;
    border-bottom:         1px solid var(--border);
}

.chapter-item span {
    color:          var(--accent);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.12em;
}

.chapter-item strong {
    color:       var(--text);
    font-size:   clamp(14px, 1.2vw, 17px);
    line-height: 1.35;
}

.related-projects {
    display: grid;
    gap:     1px;
    background: var(--border);
    border:     1px solid var(--border);
}

.related-project {
    display:               grid;
    grid-template-columns: minmax(180px, 0.36fr) minmax(0, 1fr);
    gap:                   clamp(18px, 3vw, 44px);
    align-items:           center;
    padding:               clamp(16px, 2.2vw, 28px);
    background:            var(--bg);
}

.related-project-media {
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    background:    var(--bg-2);
}

.related-project-media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.55s var(--ease);
}

.related-project:hover .related-project-media img {
    transform: scale(1.045);
}

.related-project-cat {
    display:        block;
    margin-bottom:  8px;
    color:          var(--accent);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.related-project h3 {
    font-size: clamp(24px, 3vw, 44px);
}

.related-project p {
    margin-top:  10px;
    color:       var(--text-muted);
    font-size:   14px;
    line-height: 1.6;
}

.related-project-more {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    margin-top:      24px;
}

.related-project-more p {
    color:       var(--text-muted);
    font-size:   14px;
    line-height: 1.55;
}

/* ===== SERVICE CTA BANNER ===== */
.service-cta-banner {
    background: var(--accent);
    color:      #f0ede8;        /* always light text on dark-red banner */
    padding:    clamp(50px, 6vw, 80px) 0;
}
.service-cta-banner-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
    flex-wrap:       wrap;
}
.service-cta-banner h2 {
    font-size:     clamp(28px, 4vw, 52px);
    margin-bottom: 12px;
}
.service-cta-banner p {
    font-size:  clamp(15px, 1.4vw, 18px);
    opacity:    0.8;
    max-width:  50ch;
}
.service-cta-banner .btn-primary {
    background:   rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
    white-space:  nowrap;
    flex-shrink:  0;
}
.service-cta-banner .btn-primary:hover {
    background:   rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.65);
}

/* Service card as link (archive) */
.service-card--link { display: block; color: inherit; }
.service-more {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-top:     20px;
    transition:     gap var(--dur) var(--ease);
}
.service-card--link:hover .service-more { gap: 12px; }

/* ===== WP ADMIN BAR ===== */
@media screen and (min-width: 600px) {
    .admin-bar .site-header { top: 32px; }
}
@media screen and (max-width: 600px) {
    .admin-bar .site-header { top: 46px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .header-menu   { display: none; }
    .about-grid    { grid-template-columns: 1fr; }
    .about-img-col { order: -1; }
    .about-img, .about-img-placeholder { aspect-ratio: 16/9; }

    .contact-grid  { grid-template-columns: 1fr; }
    .contact-hero-inner,
    .contact-info-grid,
    .portfolio-hero,
    .service-projects-head,
    .service-projects-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-row {
        grid-template-columns: 44px minmax(180px, 40vw) minmax(0, 1fr);
    }

    .portfolio-row-arrow { display: none; }

    .footer-bar    { gap: 16px; }

    .works-grid    { grid-template-columns: repeat(2, 1fr); }

    .project-meta-grid { grid-template-columns: 1fr; }

    .service-content-grid { grid-template-columns: 1fr; }
    .service-cta-box      { position: static; }
}

@media (max-width: 768px) {
    :root { --section-v: 70px; }

    /* Nav: stack columns vertically, contact col full width */
    .nav-body        { flex-direction: column; gap: 24px; align-items: stretch; }
    .nav-contact-col { width: auto; display: flex; flex-direction: column; }
    .nav-list > li > a { padding: 16px 0; }
    /* Nav-top: lang ліворуч, × праворуч (на мобільному) */
    .nav-top         { justify-content: space-between; gap: 0; }
    .service-cta-banner-inner { flex-direction: column; text-align: center; }

    .hero-title { font-size: clamp(60px, 18vw, 100px); }

    .portfolio-hero,
    .contact-hero {
        min-height: auto;
    }

    .portfolio-row,
    .related-project {
        grid-template-columns: 1fr;
    }

    .portfolio-index {
        order: -2;
    }

    .portfolio-row-media {
        order: -1;
    }

    .portfolio-row h2 {
        font-size: clamp(30px, 10vw, 52px);
    }

    .chapter-list {
        display:     flex;
        gap:         8px;
        overflow-x:  auto;
        padding-bottom: 4px;
        border-top:  0;
    }

    .chapter-item {
        min-width: 230px;
        padding:   12px;
        border:    1px solid var(--border);
    }

    .related-project-more {
        align-items: flex-start;
        flex-direction: column;
    }

    .works-header { flex-direction: column; align-items: flex-start; }
    .works-grid   { grid-template-columns: 1fr; background: none; gap: 1px; }

    .form-row { grid-template-columns: 1fr; }

    .footer-email,
    .footer-phone,
    .footer-cta    { font-size: 12px; }

    .about-stats { grid-template-columns: 1fr; }

    .services-grid { grid-template-columns: 1fr; }

    .project-nav { flex-direction: column; }
}

@media (max-width: 480px) {
    .hero-title  { font-size: 15vw; }
    .works-grid  { grid-template-columns: 1fr; }
    .footer-bar  { flex-direction: column; align-items: flex-start; gap: 12px; }
    .contact-actions .btn,
    .contact-panel .btn {
        width: 100%;
        justify-content: center;
    }
    .contact-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .contact-title {
        font-size: clamp(44px, 16vw, 72px);
    }
}

/* ===== WORDPRESS ALIGNMENTS ===== */
.alignleft  { float: left; margin-right: 2em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 2em; margin-bottom: 1em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.alignwide  { width: 100%; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

/* ===== ACCESSIBILITY ===== */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}
:focus-visible {
    outline:        2px solid var(--accent);
    outline-offset: 3px;
}

/* ===================================================== */
/*   READ-MORE MODAL (Makhno-style truncation)            */
/* ===================================================== */
.js-readmore                          { position: relative; }
.js-readmore[data-readmore-state="truncated"] .readmore-content {
    display: -webkit-box;
    -webkit-line-clamp: var(--readmore-lines, 6);
    line-clamp: var(--readmore-lines, 6);
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent 100%);
}
.js-readmore[data-readmore-state="full"] .readmore-content { display: block; }
.js-readmore[data-readmore-state="initial"] .readmore-content { display: block; }

.readmore-trigger {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
    line-height: 1;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    transition: color 0.25s ease, gap 0.25s ease;
}
.readmore-trigger:hover { color: var(--accent-h, #b33232); gap: 14px; }
.readmore-trigger svg  { width: 12px; height: 12px; transition: transform 0.25s ease; }
.readmore-trigger:hover svg { transform: translateX(3px); }
.readmore-trigger[hidden] { display: none !important; }

/* Modal overlay */
.readmore-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: rgba(12, 10, 8, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
    overflow: hidden;
}
.readmore-modal.is-open { opacity: 1; visibility: visible; }
.readmore-modal__scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}
.readmore-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 80px) clamp(48px, 6vw, 88px);
    transform: translateY(28px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text, #f4f1ec);
}
.readmore-modal.is-open .readmore-modal__dialog { transform: translateY(0); }
.readmore-modal__close {
    position: fixed;
    top: clamp(20px, 3vw, 36px);
    right: clamp(20px, 3vw, 36px);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(244, 241, 236, 0.28);
    color: #f4f1ec;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    z-index: 2;
}
.readmore-modal__close:hover { background: rgba(244, 241, 236, 0.12); border-color: #f4f1ec; transform: rotate(90deg); }
.readmore-modal__close svg { width: 18px; height: 18px; }
.readmore-modal__label {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.readmore-modal__label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    display: inline-block;
}
.readmore-modal__title {
    font-family: var(--font-head, 'Astrud', serif);
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: clamp(28px, 4vw, 48px);
    color: #f4f1ec;
}
.readmore-modal__body {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.75;
    color: rgba(244, 241, 236, 0.92);
}
.readmore-modal__body p,
.readmore-modal__body ul,
.readmore-modal__body ol,
.readmore-modal__body blockquote { margin: 0 0 1em 0; }
.readmore-modal__body p:last-child { margin-bottom: 0; }
.readmore-modal__body ul,
.readmore-modal__body ol { padding-left: 1.4em; }
.readmore-modal__body li + li { margin-top: 0.4em; }
.readmore-modal__body h2,
.readmore-modal__body h3 {
    font-family: var(--font-head, 'Astrud', serif);
    color: #f4f1ec;
    margin: clamp(28px, 3vw, 40px) 0 0.6em;
    line-height: 1.1;
}
.readmore-modal__body h2 { font-size: clamp(22px, 2vw, 28px); }
.readmore-modal__body h3 { font-size: clamp(18px, 1.5vw, 22px); }
.readmore-modal__body a {
    color: #f4f1ec;
    border-bottom: 1px solid rgba(244, 241, 236, 0.4);
    transition: border-color 0.25s ease;
}
.readmore-modal__body a:hover { border-bottom-color: #f4f1ec; }
.readmore-modal__body img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    border-radius: 4px;
}
body.readmore-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .readmore-modal,
    .readmore-modal__dialog { transition: none; }
}

/* ===== PREVIEW PARITY OVERRIDES ===== */
.manifesto {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 100px var(--gutter) 80px;
}
.manifesto-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 60% 50%, rgba(155, 42, 42, 0.14) 0%, transparent 70%);
    pointer-events: none;
}
.manifesto-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
}
.manifesto-pre {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
}
.manifesto-title {
    font-family: var(--font-head);
    font-size: clamp(80px, 16vw, 200px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.9;
    color: var(--text);
    margin-bottom: 32px;
}
.manifesto-title--img {
    font-size: 0;
    line-height: 1;
    margin-left: auto;
    margin-right: auto;
    max-width: min(860px, 76vw);
}
.manifesto-title-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 34vh;
    object-fit: contain;
    margin: 0 auto;
}
.manifesto-desc {
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 auto 48px;
    max-width: 520px;
}
.manifesto-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    z-index: 1;
}
.manifesto-scroll svg { animation: scrollBounce 2.2s ease-in-out infinite; }

.eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}
.about-grid {
    grid-template-columns: 5fr 7fr;
    gap: clamp(40px, 6vw, 120px);
}
.about-side {
    display: grid;
    gap: clamp(44px, 6vw, 92px);
    align-content: start;
}
.about-content {
    display: grid;
    gap: clamp(32px, 4vw, 56px);
}
.about-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.about-image {
    margin: 0;
    align-self: start;
    max-width: min(430px, 100%);
}
.about-image-img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--border);
    filter: saturate(0.88) contrast(1.03);
}
.about-headline {
    font-family: var(--font-head);
    font-size: clamp(28px, 3.5vw, 56px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin-bottom: 0;
    color: var(--text);
    max-width: 16ch;
}
.about-body p {
    font-size: clamp(15px, 1.15vw, 17px);
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 56ch;
}
.about-body p + p { margin-top: 18px; }
.about-stats {
    grid-column: 1 / -1;
    margin-top: clamp(56px, 7vw, 96px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border);
}
.stat {
    padding: 32px 24px 0;
    border-right: 1px solid var(--border);
}
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat-num {
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--text);
    margin-bottom: 12px;
}
.stat-num em { font-style: normal; color: var(--accent); }
.stat-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: clamp(32px, 4vw, 56px) 0 0;
}
.footer-bar {
    min-height: 0;
    gap: clamp(20px, 3vw, 56px);
    flex-wrap: wrap;
}
.footer-email {
    font-family: var(--font-head);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
}
.footer-email:hover,
.footer-messenger-link:hover,
.footer-phone:hover,
.social-link:hover { color: var(--accent); }
.footer-messenger-link,
.social-link {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.footer-messenger-link:hover,
.social-link:hover { border-color: var(--accent); }
.footer-cta {
    gap: 10px;
    padding: 14px 26px;
    background: var(--accent);
    color: #f0ede8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.footer-cta:hover {
    color: #f0ede8;
    background: var(--accent-h);
}
.footer-cta svg { transition: transform 0.3s ease; }
.footer-cta:hover svg { transform: translateX(3px); }
.footer-bottom {
    margin-top: clamp(32px, 4vw, 56px);
    border-top: 1px solid var(--border);
    padding: clamp(24px, 2.5vw, 32px) var(--gutter);
    width: 100%;
}
.footer-copy {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0 auto;
    opacity: 1;
    width: 100%;
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    opacity: 0;
}
.cursor-dot {
    width: 8px;
    height: 8px;
    background: #f0ede8;
    border-radius: 50%;
    transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}
.cursor-ring { display: none; }
body.cursor-ready .cursor-dot { opacity: 0.9; }
body.cursor-hover .cursor-dot { width: 12px; height: 12px; }

@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-image-img { aspect-ratio: 16 / 9; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-right: 0; }
}
@media (max-width: 640px) {
    .manifesto-title { font-size: clamp(72px, 25vw, 112px); }
    .about-stats { grid-template-columns: 1fr; }
    .stat {
        padding: 24px 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .stat:last-child { border-bottom: 0; }
    .footer-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}
@media (max-width: 1024px), (hover: none) {
    .cursor-dot,
    .cursor-ring { display: none; }
}

/* ===== PREVIEW PAGE TEMPLATE PARITY ===== */
:root {
    --max-w: 1640px;
    --line: var(--border);
    --muted: var(--text-muted);
}

.service-hero-preview {
    position: relative;
    min-height: 94vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #f0ede8;
    padding: 120px 0 clamp(56px, 7vw, 96px);
    background: #16120f;
}
.service-hero-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12,10,8,0.44) 0%, rgba(12,10,8,0.28) 42%, rgba(12,10,8,0.86) 100%),
        var(--service-hero-bg) center / cover no-repeat;
    z-index: 0;
}
.service-hero-preview::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 28vh;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
    z-index: 1;
    pointer-events: none;
}
.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(40px, 7vw, 120px);
    align-items: end;
}
.hero-kicker {
    color: rgba(240,237,232,0.78);
    margin-bottom: 24px;
}
.hero-kicker::before { background: currentColor; }
.service-hero-preview h1 {
    color: #f0ede8;
    max-width: 8.5ch;
    margin-bottom: clamp(28px, 4vw, 48px);
    font-size: clamp(58px, 10vw, 148px);
}
.hero-lead {
    font-size: clamp(16px, 1.45vw, 22px);
    line-height: 1.52;
    color: rgba(240,237,232,0.88);
    max-width: 48ch;
    margin-bottom: 34px;
}
.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.service-hero-preview .btn--ghost {
    color: #f0ede8;
    border-color: rgba(240,237,232,0.32);
}
.service-hero-preview .btn--ghost:hover {
    background: #f0ede8;
    color: #1c1814;
    border-color: #f0ede8;
}
.hero-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(240,237,232,0.22);
}
.hero-fact {
    padding: 24px 22px 0 0;
    border-right: 1px solid rgba(240,237,232,0.18);
}
.hero-fact:nth-child(2n) {
    border-right: none;
    padding-left: 22px;
}
.hero-fact-num {
    font-family: var(--font-head);
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1;
    color: #f0ede8;
}
.hero-fact-text {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(240,237,232,0.70);
}
.intro-grid {
    display: grid;
    grid-template-columns: minmax(420px, 5fr) minmax(0, 7fr);
    gap: clamp(56px, 7vw, 120px);
    align-items: start;
}
.intro-title {
    font-family: var(--font-head);
    font-size: clamp(40px, 5vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    max-width: 15ch;
}
.intro-copy p {
    font-size: clamp(16px, 1.2vw, 18px);
    color: var(--text-muted);
    line-height: 1.75;
}
.intro-copy p + p { margin-top: 18px; }
.service-list {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}
.service-list li {
    padding: 18px 18px 18px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-weight: 500;
}
.service-list li::before {
    content: '•';
    color: var(--accent);
    margin-right: 10px;
}
.capabilities { background: var(--bg-2); }
.section-head {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(40px, 7vw, 120px);
    align-items: end;
    margin-bottom: clamp(48px, 6vw, 76px);
}
.section-head p {
    color: var(--text-muted);
    font-size: clamp(15px, 1.1vw, 17px);
}
.cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}
.cap-card {
    min-height: 270px;
    padding: clamp(24px, 2.5vw, 34px);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.3s;
}
.cap-card:hover { background: rgba(28,24,20,0.04); }
.cap-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent);
}
.cap-card h3 {
    margin-top: 34px;
    margin-bottom: 14px;
}
.cap-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.62;
}
.proof-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(40px, 7vw, 120px);
}
.proof-sticky {
    position: sticky;
    top: 110px;
    align-self: start;
}
.proof-sticky h2 {
    margin-top: 20px;
    font-size: clamp(34px, 4.4vw, 64px);
    max-width: 9ch;
}
.proof-rows {
    display: grid;
    border-top: 1px solid var(--border);
}
.proof-row {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: clamp(24px, 4vw, 70px);
    padding: clamp(28px, 4vw, 46px) 0;
    border-bottom: 1px solid var(--border);
}
.proof-row h3 { font-size: clamp(24px, 3vw, 42px); }
.proof-row p {
    color: var(--text-muted);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.72;
}
.process {
    background: #16120f;
    color: #f0ede8;
}
.process h2,
.process h3 { color: #f0ede8; }
.process .eyebrow { color: #c44343; }
.process .section-head p { color: rgba(240,237,232,0.72); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid rgba(240,237,232,0.16);
    border-left: 1px solid rgba(240,237,232,0.16);
}
.process-step {
    min-height: 250px;
    padding: clamp(22px, 2.4vw, 32px);
    border-right: 1px solid rgba(240,237,232,0.16);
    border-bottom: 1px solid rgba(240,237,232,0.16);
}
.process-step span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #c44343;
    margin-bottom: 46px;
}
.process-step p {
    margin-top: 14px;
    color: rgba(240,237,232,0.70);
    font-size: 14px;
    line-height: 1.6;
}
.service-projects {
    background: var(--bg);
    padding: clamp(56px, 7vw, 88px) 0;
}
.service-projects-head {
    display: grid;
    grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: end;
    margin-bottom: clamp(32px, 4vw, 52px);
}
.service-projects-head h2 {
    max-width: 13ch;
    font-size: clamp(34px, 4.5vw, 64px);
}
.service-projects-head p {
    color: var(--text-muted);
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.58;
}
.service-projects-grid {
    display: grid;
    grid-template-columns: minmax(260px, 3fr) minmax(0, 9fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.chapter-list {
    position: sticky;
    top: 110px;
    border-top: 1px solid var(--border);
}
.chapter-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.chapter-item span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--accent);
}
.chapter-item strong {
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.38;
}
.related-projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
    background: transparent;
    border: 0;
}
.related-project {
    display: block;
    color: var(--text);
    padding: 0;
    background: transparent;
}
.related-project-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--bg-2);
    margin-bottom: 14px;
}
.related-project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.2,0.6,0.2,1);
}
.related-project:hover .related-project-media img { transform: scale(1.05); }
.related-project-meta {
    display: grid;
    gap: 6px;
}
.related-project-cat {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}
.related-project h3 {
    font-size: clamp(22px, 2vw, 32px);
    line-height: 1.1;
    transition: color 0.3s;
}
.related-project:hover h3 { color: var(--accent); }
.related-project p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.48;
}
.related-project-more {
    margin-top: clamp(28px, 3.5vw, 44px);
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}
.related-project-more p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 56ch;
}
.service-cta {
    position: relative;
    overflow: hidden;
    background: var(--bg);
}
.cta-box {
    display: grid;
    grid-template-columns: minmax(420px, 7fr) minmax(360px, 5fr);
    gap: clamp(56px, 7vw, 120px);
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: clamp(56px, 7vw, 96px);
}
.cta-box h2 {
    max-width: 14ch;
    font-size: clamp(40px, 5vw, 76px);
}
.cta-copy {
    display: grid;
    gap: 28px;
    justify-items: start;
    align-self: center;
}
.cta-copy p {
    color: var(--text-muted);
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.7;
}

.archive-hero {
    padding: clamp(150px, 18vh, 220px) 0 clamp(44px, 6vw, 76px);
    position: relative;
    text-align: left;
}
.archive-hero-inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(40px, 7vw, 120px);
    align-items: end;
}
.archive-hero h1 {
    font-size: clamp(72px, 12vw, 180px);
    line-height: 0.88;
    letter-spacing: -0.03em;
    margin: 0;
}
.archive-hero h1 span { color: var(--accent); }
.archive-hero p {
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--text-muted);
    max-width: 56ch;
    line-height: 1.55;
    margin: 0;
}
.works-section { padding-top: 0; }
.works-filter-bar {
    display: flex;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
    margin-bottom: clamp(48px, 6vw, 88px);
    padding: 24px 0 28px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.works-filter-main {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2vw, 34px);
}
.works-filter-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(52px, 6vw, 96px) clamp(24px, 3vw, 48px);
    background: transparent;
}
.project {
    color: var(--text);
    display: block;
}
.project-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--bg-2);
    margin-bottom: 22px;
}
.project-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2,0.6,0.2,1);
}
.project:hover .project-img { transform: scale(1.05); }
.project-meta {
    display: grid;
    gap: 8px;
}
.project-num { display: none; }
.project-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}
.project-title {
    font-family: var(--font-head);
    font-size: clamp(26px, 3vw, 46px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--text);
    transition: color 0.3s;
}
.project:hover .project-title { color: var(--accent); }
.project-kind {
    color: var(--text-muted);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.45;
}
.project-detail {
    margin-top: 16px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s;
}
.project:hover .project-detail { color: var(--accent); }
.works-pagination,
.archive-pagination {
    margin-top: clamp(56px, 6vw, 84px);
    padding-top: 26px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.works-pagination a,
.archive-pagination a { transition: color 0.3s; }
.works-pagination a:hover,
.archive-pagination a:hover { color: var(--accent); }
.archive-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 60px 0;
}

.project-hero {
    padding: clamp(140px, 16vh, 200px) 0 clamp(48px, 6vw, 80px);
    margin-bottom: 0;
}
.project-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    margin-bottom: 32px;
}
.project-hero-back {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s;
}
.project-hero-back:hover { color: var(--accent); }
.project-hero h1 {
    font-size: clamp(48px, 8vw, 120px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 16px 0 28px;
    max-width: 18ch;
}
.project-hero-lead {
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 56ch;
    margin-bottom: 40px;
}
.project-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    padding-top: 28px;
}
.project-fact {
    padding-right: 24px;
    border-right: 1px solid var(--border);
}
.project-fact:last-child {
    border-right: none;
    padding-right: 0;
}
.project-fact-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.project-fact-value {
    font-family: var(--font-head);
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
}
.project-cover {
    width: 100%;
    aspect-ratio: 21/9;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-2);
}
.project-body-section-wrap {
    padding-top: 0;
    padding-bottom: 0;
}
.project-body {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(40px, 6vw, 120px);
}
.project-body-section {
    padding: clamp(40px, 5vw, 72px) 0;
    border-bottom: 1px solid var(--border);
}
.project-body:first-child .project-body-section { border-top: 1px solid var(--border); }
.project-body-section h2 {
    font-size: clamp(28px, 3.5vw, 48px);
    line-height: 1.04;
    max-width: 9ch;
}
.project-body-section.body-copy,
.project-body-section .body-copy {
    font-size: clamp(15px, 1.15vw, 17px);
    color: var(--text-muted);
    line-height: 1.7;
}
.project-body-section.body-copy p + p { margin-top: 16px; }
.project-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 40px);
    margin-top: clamp(48px, 6vw, 80px);
}
.project-gallery-item {
    background-size: cover;
    background-position: center;
    aspect-ratio: 4/3;
    background-color: var(--bg-2);
}
.project-gallery-item--wide {
    grid-column: span 6;
    aspect-ratio: 21/9;
}
.project-gallery-item--half { grid-column: span 3; }
.project-gallery-item--third { grid-column: span 2; }
.project-next { background: var(--bg-2); }
.project-next-inner { padding: clamp(56px, 7vw, 96px) var(--gutter); }
.project-next-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(40px, 6vw, 120px);
    align-items: center;
}
.project-next-grid h2 {
    font-size: clamp(36px, 4.5vw, 64px);
    margin-bottom: 24px;
}
.project-next-card {
    position: relative;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    overflow: hidden;
    transition: transform 0.4s;
    display: block;
}
.project-next-card:hover { transform: translateY(-4px); }
.project-next-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(12,10,8,0.88) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 2vw, 32px);
    color: #f0ede8;
}
.project-next-card-cat {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,237,232,0.75);
    margin-bottom: 6px;
}
.project-next-card-title {
    font-family: var(--font-head);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.1;
    color: #f0ede8;
}

@media (max-width: 1100px) {
    .hero-inner,
    .intro-grid,
    .section-head,
    .proof-grid,
    .service-projects-head,
    .service-projects-grid,
    .archive-hero-inner,
    .project-body,
    .project-next-grid {
        grid-template-columns: 1fr;
    }
    .cap-grid,
    .process-grid,
    .works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .related-projects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .project-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 0;
    }
    .project-fact:nth-child(2) {
        border-right: none;
        padding-right: 0;
    }
    .project-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .project-gallery-item--wide { grid-column: span 2; }
    .project-gallery-item--half,
    .project-gallery-item--third { grid-column: span 1; }
}

@media (max-width: 760px) {
    .service-hero-preview {
        min-height: auto;
        padding: 130px 0 80px;
    }
    .service-hero-preview h1 {
        font-size: clamp(50px, 16vw, 88px);
    }
    .hero-side {
        grid-template-columns: 1fr;
        gap: 12px;
        border-top: 0;
    }
    .hero-fact,
    .hero-fact:nth-child(2n) {
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(240,237,232,0.18);
    }
    .service-list,
    .cap-grid,
    .process-grid,
    .related-projects,
    .works-grid,
    .project-facts,
    .project-gallery {
        grid-template-columns: 1fr;
    }
    .chapter-list {
        position: static;
        display: grid;
        gap: 0;
        overflow-x: visible;
        padding-bottom: 0;
        border-top: 1px solid var(--border);
    }
    .related-project-more,
    .works-filter-bar {
        align-items: flex-start;
        flex-direction: column;
    }
    .cta-box {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .archive-hero h1 {
        font-size: clamp(58px, 17vw, 92px);
    }
    .works-pagination,
    .archive-pagination {
        flex-direction: column;
    }
    .project-fact,
    .project-fact:nth-child(2) {
        border-right: none;
        padding-right: 0;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
    }
    .project-fact:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .project-gallery-item--wide,
    .project-gallery-item--half,
    .project-gallery-item--third {
        grid-column: span 1;
    }
    .project-cover,
    .project-gallery-item--wide {
        aspect-ratio: 4/3;
    }
}

/* ===== PREVIEW SERVICES CARDS ===== */
.services-section--preview {
    background: var(--bg);
}
.services-head {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(40px, 6vw, 120px);
    align-items: flex-end;
    margin-bottom: clamp(48px, 6vw, 80px);
}
.services-head h2 {
    font-size: clamp(46px, 7vw, 110px);
}
.services-head-desc {
    font-size: clamp(15px, 1.15vw, 17px);
    color: var(--text-muted);
    line-height: 1.65;
    padding-bottom: 8px;
    max-width: 48ch;
}
.services-section--preview .services-grid,
.section.services-section--preview .services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 2.5vw, 40px);
    background: transparent;
    border: 0;
}
.services-section--preview .service-card,
.section.services-section--preview .service-card {
    display: block;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    padding: 0;
    transition: border-color 0.3s, transform 0.4s;
    overflow: hidden;
}
.services-section--preview .service-card:hover,
.section.services-section--preview .service-card:hover {
    background: var(--bg-2);
    border-color: var(--accent);
    transform: translateY(-4px);
}
.service-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1a1a1a;
}
.service-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    transition: transform 1.2s cubic-bezier(0.2,0.6,0.2,1);
}
.service-card:hover .service-card-img {
    transform: scale(1.06);
}
.service-card-num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(240,237,232,0.9);
    background: rgba(12,10,8,0.55);
    padding: 6px 12px;
    backdrop-filter: blur(4px);
}
.service-card-body {
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(24px, 2.5vw, 32px);
}
.service-card-title {
    font-family: var(--font-head);
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 10px;
    transition: color 0.3s;
}
.service-card:hover .service-card-title {
    color: var(--accent);
}
.service-card-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 20px;
    max-width: none;
}
.service-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    transition: gap 0.3s;
}
.service-card:hover .service-card-more {
    gap: 14px;
}

@media (max-width: 1280px) {
    .services-section--preview .services-grid,
    .section.services-section--preview .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .services-head {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .services-section--preview .services-grid,
    .section.services-section--preview .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .services-section--preview .services-grid,
    .section.services-section--preview .services-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== COMPACT LONG HEADINGS ===== */
.about-section {
    padding-top: clamp(58px, 7vw, 96px);
    padding-bottom: clamp(60px, 7vw, 104px);
}
.about-grid {
    grid-template-columns: minmax(280px, 4.8fr) minmax(0, 7.2fr);
    gap: clamp(36px, 5vw, 78px);
}
.about-side {
    gap: clamp(28px, 4vw, 58px);
}
.about-image {
    max-width: min(430px, 100%);
}
.about-content {
    gap: clamp(22px, 3vw, 40px);
}
.about-main {
    max-width: 74ch;
}
.about-body p {
    max-width: 70ch;
}
.about-stats {
    margin-top: clamp(28px, 4vw, 54px);
}
.stat {
    padding-top: clamp(22px, 2.5vw, 30px);
}
.manifesto-title:not(.manifesto-title--img) {
    font-size: clamp(72px, 13vw, 164px);
    letter-spacing: 0;
}
.about-headline {
    font-size: clamp(32px, 2.65vw, 46px);
    max-width: 980px;
    letter-spacing: 0;
}
.section-head h2,
.intro-title,
.cta-box h2 {
    font-size: clamp(30px, 3vw, 50px);
    line-height: 1.08;
    letter-spacing: 0;
}
.service-hero-preview h1 {
    font-size: clamp(44px, 6vw, 96px);
    max-width: 12ch;
    letter-spacing: 0;
}
.proof-sticky h2,
.service-projects-head h2,
.project-next-grid h2 {
    font-size: clamp(28px, 2.8vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}
.archive-hero h1 {
    font-size: clamp(54px, 8vw, 132px);
    line-height: 0.94;
    letter-spacing: 0;
}
.project-hero h1 {
    font-size: clamp(42px, 5.8vw, 86px);
    line-height: 1.02;
    max-width: 20ch;
    letter-spacing: 0;
}
.project-title {
    font-size: clamp(24px, 2.3vw, 36px);
    letter-spacing: 0;
}
.contact-title {
    font-size: clamp(44px, 6vw, 86px);
    line-height: 0.96;
    letter-spacing: 0;
}
.contact-info-title h2,
.contact-form-title h2 {
    font-size: clamp(28px, 3.4vw, 52px);
    line-height: 1.08;
}
.services-head h2 {
    font-size: clamp(38px, 4.8vw, 78px);
    line-height: 1.04;
    letter-spacing: 0;
}
.service-card-title,
.related-project h3,
.project-next-card-title {
    letter-spacing: 0;
}

@media (max-width: 760px) {
    .manifesto-title:not(.manifesto-title--img) {
        font-size: clamp(64px, 18vw, 96px);
    }
    .service-hero-preview h1,
    .archive-hero h1,
    .project-hero h1,
    .contact-title {
        font-size: clamp(38px, 11vw, 66px);
        line-height: 1;
    }
    .about-headline,
    .section-head h2,
    .intro-title,
    .cta-box h2,
    .services-head h2 {
        font-size: clamp(28px, 8vw, 42px);
    }
    .proof-sticky h2,
    .service-projects-head h2,
    .project-next-grid h2,
    .contact-info-title h2,
    .contact-form-title h2 {
        font-size: clamp(28px, 8vw, 42px);
    }
}

@media (min-width: 1025px) {
    .about-side {
        position: sticky;
        top: 112px;
    }
}

@media (max-width: 1024px) {
    .about-section {
        padding-top: 64px;
        padding-bottom: 70px;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .about-side {
        position: static;
        gap: 24px;
    }
    .about-image {
        max-width: 100%;
    }
    .about-headline {
        max-width: 100%;
    }
    .about-stats {
        margin-top: 26px;
    }
}

/* ===== COMPACT SECTION SPACING ===== */
.services-head {
    gap: clamp(30px, 4.8vw, 82px);
    margin-bottom: clamp(36px, 4.8vw, 62px);
}
.service-hero-preview {
    min-height: 86vh;
    padding: 108px 0 clamp(44px, 5.4vw, 72px);
}
.service-hero-preview::after {
    height: 22vh;
}
.hero-inner,
.intro-grid,
.proof-grid,
.archive-hero-inner,
.project-body,
.project-next-grid {
    gap: clamp(30px, 5vw, 84px);
}
.service-hero-preview h1 {
    margin-bottom: clamp(22px, 3vw, 36px);
}
.hero-lead {
    margin-bottom: 26px;
}
.hero-fact {
    padding-top: 18px;
}
.service-list {
    margin-top: 30px;
}
.section-head {
    gap: clamp(30px, 5vw, 84px);
    margin-bottom: clamp(34px, 4.8vw, 58px);
}
.cap-card {
    min-height: 230px;
}
.cap-card h3 {
    margin-top: 24px;
    margin-bottom: 10px;
}
.proof-sticky h2 {
    margin-top: 12px;
}
.proof-row {
    gap: clamp(20px, 3vw, 52px);
    padding: clamp(22px, 3vw, 34px) 0;
}
.process.section,
.service-cta.section {
    padding-top: clamp(60px, 7vw, 96px);
    padding-bottom: clamp(60px, 7vw, 96px);
}
.process-step {
    min-height: 210px;
}
.process-step span {
    margin-bottom: 34px;
}
.section.service-projects,
.service-projects {
    padding-top: clamp(44px, 5.4vw, 70px);
    padding-bottom: clamp(44px, 5.4vw, 70px);
}
.service-projects-head,
.service-projects-grid {
    gap: clamp(24px, 4vw, 58px);
}
.service-projects-head {
    margin-bottom: clamp(26px, 3.6vw, 42px);
}
.related-project-more {
    margin-top: clamp(22px, 3vw, 34px);
}
.cta-box {
    gap: clamp(32px, 5vw, 82px);
    padding-top: clamp(40px, 5vw, 72px);
}
.cta-copy {
    gap: 20px;
}
.archive-hero {
    padding: clamp(116px, 13vh, 168px) 0 clamp(32px, 4.5vw, 56px);
}
.works-filter-bar {
    gap: clamp(18px, 3vw, 48px);
    margin-bottom: clamp(34px, 4.5vw, 64px);
    padding: 18px 0 22px;
}
.works-filter-main {
    gap: clamp(12px, 1.6vw, 24px);
}
.works-grid {
    gap: clamp(34px, 4.2vw, 68px) clamp(20px, 2.5vw, 40px);
}
.works-pagination,
.archive-pagination {
    margin-top: clamp(42px, 5vw, 64px);
    padding-top: 20px;
}
.project-hero {
    padding: clamp(110px, 12vh, 160px) 0 clamp(36px, 5vw, 60px);
}
.project-hero-meta {
    margin-bottom: 22px;
}
.project-hero h1 {
    margin: 12px 0 22px;
}
.project-hero-lead {
    margin-bottom: 28px;
}
.project-facts {
    padding-top: 22px;
}
.project-body-section {
    padding: clamp(30px, 4vw, 56px) 0;
}
.project-gallery {
    gap: clamp(16px, 2vw, 32px);
    margin-top: clamp(34px, 5vw, 58px);
}
.project-next-inner {
    padding: clamp(44px, 6vw, 76px) var(--gutter);
}
.project-next-grid h2 {
    margin-bottom: 18px;
}
.intro-grid {
    grid-template-columns: minmax(500px, 5.6fr) minmax(0, 6.4fr);
}
.intro-title {
    max-width: 22ch;
    line-height: 1.12;
}
.section-head h2 {
    max-width: 18ch;
}
.proof-sticky h2 {
    max-width: 13ch;
}
.service-projects-head h2 {
    max-width: 18ch;
}
.cta-box h2 {
    max-width: 18ch;
}
.contact-hero {
    min-height: min(720px, calc(100vh - 72px));
    padding: clamp(28px, 4vw, 54px) 0;
}
.contact-hero-inner,
.contact-info-grid {
    gap: clamp(26px, 4.6vw, 72px);
}
.contact-info-section {
    padding-top: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(48px, 6vw, 82px);
}
.contact-row {
    padding: 18px 0;
}

@media (max-width: 1100px) {
    .intro-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    :root {
        --section-v: 64px;
    }
    .service-hero-preview {
        min-height: auto;
        padding: 112px 0 62px;
    }
    .hero-inner,
    .intro-grid,
    .proof-grid,
    .archive-hero-inner,
    .project-body,
    .project-next-grid {
        gap: 28px;
    }
    .archive-hero,
    .project-hero {
        padding-top: 112px;
        padding-bottom: 38px;
    }
    .section-head {
        gap: 24px;
        margin-bottom: 32px;
    }
    .cap-card,
    .process-step {
        min-height: auto;
    }
    .proof-row,
    .project-body-section {
        padding: 28px 0;
    }
    .process.section,
    .service-cta.section,
    .section.service-projects,
    .service-projects {
        padding-top: 54px;
        padding-bottom: 54px;
    }
    .works-filter-bar {
        margin-bottom: 30px;
        padding: 16px 0;
    }
    .works-grid {
        gap: 34px;
    }
    .project-gallery {
        margin-top: 34px;
    }
    .contact-hero {
        min-height: auto;
        padding: 104px 0 40px;
    }
    .intro-grid {
        grid-template-columns: 1fr;
    }
    .intro-title,
    .section-head h2,
    .proof-sticky h2,
    .service-projects-head h2,
    .cta-box h2 {
        max-width: 100%;
    }
    .contact-info-section {
        padding-top: 36px;
        padding-bottom: 58px;
    }
}