/* =====================================================
   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.99);
    --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.98);
    --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.98);
        --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.02em;
}
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);
    backdrop-filter: none; /* prevent fixed-child containing-block side-effect */
}

.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.02em;
}
.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 { filter: var(--logo-filter); }

/* Navigation */
.site-nav .nav-list {
    display:     flex;
    align-items: center;
    gap:         36px;
}
.site-nav .nav-list a {
    font-size:      13px;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    position:       relative;
    transition:     color var(--dur) var(--ease);
}
.site-nav .nav-list a::after {
    content:    '';
    position:   absolute;
    bottom:     -3px;
    left:       0;
    width:      0;
    height:     1px;
    background: var(--accent);
    transition: width var(--dur) var(--ease);
}
.site-nav .nav-list a:hover,
.site-nav .nav-list a.current-menu-item { color: var(--text); }
.site-nav .nav-list a:hover::after,
.site-nav .nav-list a.current-menu-item::after { width: 100%; }

/* Dropdown submenu */
.site-nav .nav-list > li {
    position: relative;
}
/* Disable the underline ::after on parent dropdown links */
.site-nav .nav-list > li.menu-item-has-children > a::after {
    display: none !important;
}
/* Arrow indicator — added as .nav-arrow span via JS */
.nav-arrow {
    display:       inline-block;
    width:         5px;
    height:        5px;
    border-right:  1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform:     rotate(45deg) translateY(-2px);
    flex-shrink:   0;
    margin-left:   4px;
    transition:    transform var(--dur) var(--ease);
    vertical-align: middle;
}
.menu-item-has-children:hover .nav-arrow,
.menu-item-has-children.is-open .nav-arrow {
    transform: rotate(225deg) translateY(0);
}

.site-nav .sub-menu {
    position:        absolute;
    top:             100%;
    left:            -20px;
    min-width:       220px;
    background:      var(--sub-menu-bg);
    border:          1px solid var(--border);
    backdrop-filter: blur(12px);
    padding:         18px 0 8px; /* padding-top замінює gap, усуваючи розрив між пунктом і підменю */
    opacity:         0;
    pointer-events:  none;
    transform:       translateY(-8px);
    transition:      opacity var(--dur) var(--ease),
                     transform var(--dur) var(--ease);
    z-index:         300;
    list-style:      none;
}
.site-nav .nav-list > li.menu-item-has-children:hover .sub-menu,
.site-nav .nav-list > li.menu-item-has-children.is-open .sub-menu {
    opacity:        1;
    pointer-events: all;
    transform:      translateY(0);
}
.site-nav .sub-menu li { display: block; }
.site-nav .sub-menu a {
    display:        block;
    padding:        10px 20px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-muted);
    white-space:    nowrap;
    transition:     color       var(--dur) var(--ease),
                    background  var(--dur) var(--ease);
}
.site-nav .sub-menu a::after { display: none !important; }
.site-nav .sub-menu a:hover {
    color:      var(--text);
    background: rgba(155, 42, 42, 0.12);
}

/* Burger */
.menu-toggle {
    display:        none;
    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 */
.lang-switcher {
    display:        flex;
    align-items:    center;
}

.lang-btn {
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  0.08em;
    color:           var(--text-muted);
    text-decoration: none;
    padding:         4px 7px;
    border-radius:   4px;
    transition:      color var(--transition), background var(--transition);
    line-height:     1;
}

.lang-btn:hover {
    color:      var(--text);
    background: var(--surface-2);
}

.lang-btn.is-active {
    color:          var(--accent);
    cursor:         default;
    pointer-events: none;
}

.lang-switcher .lang-btn:not(:last-child) {
    padding-right: 7px;
    margin-right:  7px;
    border-right:  1px solid var(--border);
}

/* ===== 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-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;
}

/* ===== 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; }
}

/* ===== 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 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) {
    .site-header { top: 32px; }
}
@media screen and (max-width: 600px) {
    .admin-bar .site-header { top: 46px; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .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; }

    .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; }

    .menu-toggle  { display: flex; }
    .site-nav {
        position:   fixed;
        inset:      0;
        background: var(--bg-nav-mob);
        backdrop-filter: blur(16px);
        display:    flex;
        align-items: center;
        justify-content: center;
        opacity:    0;
        pointer-events: none;
        transition: opacity var(--dur) var(--ease);
        z-index:    150;
    }
    body.menu-open .site-nav {
        opacity:        1;
        pointer-events: all;
    }
    .site-nav .nav-list {
        flex-direction: column;
        gap:            40px;
        text-align:     center;
    }
    .site-nav .nav-list a {
        font-size: 20px;
        color:     var(--text);
    }
    /* Mobile dropdown: inline expand */
    .site-nav .sub-menu {
        position:        static;
        opacity:         1;
        transform:       none;
        pointer-events:  all;
        background:      none;
        border:          none;
        backdrop-filter: none;
        padding:         8px 0 0;
        max-height:      0;
        overflow:        hidden;
        transition:      max-height 0.35s var(--ease);
    }
    .site-nav .nav-list > li.menu-item-has-children.is-open .sub-menu {
        max-height: 600px;
    }
    .site-nav .sub-menu a {
        padding:    8px 16px;
        font-size:  14px;
        color:      var(--text-muted);
        text-align: center;
        background: none;
    }
    .site-nav .nav-list > li.menu-item-has-children > a::after {
        display: none;
    }
    .service-cta-banner-inner { flex-direction: column; text-align: center; }

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

    .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; }
}

/* ===== 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;
}