:root {
      --bg: #fafaf8;
      --bg-alt: #f2f1ee;
      --line: rgba(0,0,0,0.09);
      --line-soft: rgba(0,0,0,0.055);
      --text: #111111;
      --muted: #5c5c5c;
      --accent: #9a7010;
      --accent-soft: #8a6210;
      --gold-light: #7a5610;
      --gold-pale: #5e4210;
      --radius-pill: 999px;
      --radius-card: 1rem;
      --header-h: 4rem;
      --page-x: clamp(1rem, 2.2vw, 2rem);
      --section-y: clamp(4.5rem, 7vw, 7.75rem);
      --body-size: clamp(0.98rem, 1.05vw, 1.1rem);
      --body-color: rgba(17,17,17,0.62);
      --h2-size: clamp(1.9rem, 1.45rem + 1.8vw, 3.6rem);
      --h3-size: clamp(1.25rem, 1.1rem + 0.8vw, 2rem);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
    html { scroll-behavior: smooth; color-scheme: light; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f0eeea; }
    ::-webkit-scrollbar-thumb { background: #c8b98a; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #a89060; }
    body { font-family: neue-haas-grotesk-display-pr, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-weight: 500; font-size: var(--body-size); line-height: 1.45; -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    img, video { display: block; max-width: 100%; }
    button, input { font: inherit; color: inherit; }
    h1 { margin: 0; font-size: var(--h2-size); line-height: 1.03; letter-spacing: -0.02em; }
    h2 { margin: 0; font-size: var(--h2-size); line-height: 1.03; letter-spacing: -0.02em; }
    h3 { margin: 0; font-size: var(--h3-size); line-height: 1.13; }
    p { margin: 0; color: var(--body-color); font-size: var(--body-size); line-height: 1.82; }
    ::selection { background: rgba(184,145,42,0.4); color: #f0ead8; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    body.is-scroll-locked { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* HEADER */
    .site-header {
      position: fixed; inset-inline: 0; top: 0; z-index: 120;
      height: var(--header-h);
      background: rgba(12,11,9,0.93);
      border-bottom: 1px solid var(--line-soft);
      backdrop-filter: blur(10px);
    }
    .nav-shell {
      height: 100%; padding-inline: clamp(0.75rem,1.5vw,1.5rem);
      display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
      align-items: center; gap: clamp(0.4rem,1vw,1.2rem); width: 100%;
    }
    .brand { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; flex-shrink: 0; justify-self: start; }
    .brand-logo { width: 1.8rem; height: 1.8rem; flex-shrink: 0; }
    .brand-text { font-weight: 600; letter-spacing: 0.01em; font-size: 0.95rem; }
    .desktop-nav {
      display: flex; flex-direction: row; flex-wrap: nowrap;
      align-items: center; justify-content: center;
      gap: clamp(0.5rem,1.2vw,1.6rem); min-width: 0;
      grid-column: 2; justify-self: center;
    }
    .nav-actions { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: clamp(0.4rem,1vw,1rem); }
    .nav-link, .nav-trigger {
      background: none; border: 0; padding: 0; color: inherit;
      font-size: clamp(0.62rem,0.55rem + 0.22vw,0.74rem);
      text-transform: uppercase; letter-spacing: 0.04em;
      cursor: pointer; position: relative; opacity: 0.85; white-space: nowrap;
      transition: color 0.2s, opacity 0.2s; flex-shrink: 0;
      display: inline-flex; align-items: center; line-height: 1;
    }
    .nav-trigger { transform: translateY(-2px); gap: 0.3rem; }
    .nav-trigger::before {
      content: "";
      width: 0.3rem; height: 0.3rem;
      border-right: 1.3px solid currentColor;
      border-bottom: 1.3px solid currentColor;
      transform: translateY(-0.1rem) rotate(45deg);
      order: 1;
      opacity: 0.7;
      transition: transform 0.2s ease, opacity 0.2s;
    }
    .nav-trigger:hover::before { opacity: 1; }
    .nav-trigger[aria-expanded="true"]::before {
      transform: translateY(0.1rem) rotate(225deg);
    }
    .nav-link::after, .nav-trigger::after {
      content: ""; position: absolute; left: 0; bottom: -0.28rem;
      width: 100%; height: 1px; transform: scaleX(0);
      transform-origin: left; background: var(--gold-light);
      transition: transform 0.25s ease;
    }
    .nav-link:hover, .nav-trigger:hover { opacity: 1; color: var(--gold-light); }
    .nav-link:hover::after, .nav-trigger:hover::after { transform: scaleX(1); }
    .nav-item { position: relative; }
    .mega-panel {
      position: absolute; left: 0; top: 100%;
      width: min(52rem,90vw);
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.85rem;
      border: 1px solid var(--line-soft); border-radius: 1rem;
      background: rgba(14,12,8,0.98);
      box-shadow: 0 28px 56px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,145,42,0.09);
      opacity: 0; visibility: hidden; transform: translateY(8px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
      margin-top: 0.8rem;
    }
    .mega-panel::before {
      content: "";
      position: absolute;
      top: -0.8rem;
      left: 0;
      width: 100%;
      height: 0.8rem;
    }
    .nav-item:hover .mega-panel,
    .mega-panel:hover { opacity: 1; visibility: visible; transform: translateY(0); }
    .mega-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .panel-link {
      display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
      border: 1px solid transparent; border-radius: 0.6rem; padding: 0.5rem 0.65rem;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
    }
    .panel-link:hover { border-color: var(--line); background: rgba(184,145,42,0.07); transform: translateX(4px); }
    .panel-link .pl-title { font-size: 0.82rem; font-weight: 500; color: var(--text); }
    .panel-link small { color: var(--muted); font-size: 0.71rem; display: block; margin-top: 0.1rem; }
    .panel-link .pl-arrow { color: var(--gold-light); flex-shrink: 0; }
    .nav-cta { flex-shrink: 0; }

    /* BUTTON */
    .button-pill {
      border: 1px solid var(--accent);
      background-image: linear-gradient(135deg,#c9a94a 0%,#b8912a 40%,#8a6a18 100%);
      color: #0c0b09; font-weight: 600; border-radius: var(--radius-pill);
      text-transform: uppercase; letter-spacing: 0.06em;
      font-size: 0.68rem; line-height: 1; padding: 0.55rem 0.9rem; min-height: 2.25rem;
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      cursor: pointer; box-shadow: 0 2px 18px rgba(184,145,42,0.2);
      transition: box-shadow 0.3s, transform 0.3s, filter 0.3s;
    }
    .button-pill:hover { filter: brightness(1.12); box-shadow: 0 4px 28px rgba(184,145,42,0.38); }
    .button-pill:active { transform: scale(0.97); }
    .button-pill.is-outline {
      background-image: none; background: transparent;
      color: var(--text); border-color: rgba(196,160,80,0.42); box-shadow: none;
    }
    .button-pill.is-outline:hover {
      background-image: linear-gradient(135deg,#c9a94a 0%,#b8912a 40%,#8a6a18 100%);
      color: #0c0b09; border-color: var(--accent); box-shadow: 0 4px 28px rgba(184,145,42,0.28);
    }

    /* HAMBURGER */
    .menu-toggle {
      width: 2.6rem; height: 2.6rem; border: 1px solid rgba(196,160,80,0.4);
      border-radius: 50%; background: transparent;
      display: none; align-items: center; justify-content: center;
      padding: 0; cursor: pointer; position: relative; flex-shrink: 0;
    }
    .menu-toggle-line { width: 1rem; height: 1px; background: currentColor; display: block; position: absolute; transition: transform 0.3s, opacity 0.3s; }
    .menu-toggle-line.is-a { transform: translateY(-4px); }
    .menu-toggle-line.is-b { transform: translateY(4px); }
    .menu-toggle[aria-expanded="true"] .menu-toggle-line.is-a { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-toggle-line.is-b { transform: rotate(-45deg); }

    @media (min-width: 861px) { .desktop-nav { display: flex !important; } .nav-cta { display: block !important; } .menu-toggle { display: none !important; } }
    @media (max-width: 860px) { .nav-shell { grid-template-columns: auto 1fr auto; } .desktop-nav, .nav-cta { display: none !important; } .nav-actions { gap: 0.55rem; } .menu-toggle { display: flex !important; } }

    /* MOBILE DRAWER */
    .mobile-drawer {
      position: fixed; inset: var(--header-h) 0 0 0; z-index: 110;
      background: rgba(10,9,2,0.99); border-top: 1px solid var(--line-soft);
      opacity: 0; visibility: hidden; transform: translateY(10px);
      transition: opacity 0.3s, transform 0.3s, visibility 0.3s; overflow-y: auto;
    }
    .mobile-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .drawer-inner { padding: 1rem var(--page-x) 2rem; display: grid; gap: 0.35rem; }
    .drawer-link, .drawer-parent {
      border: 1px solid var(--line-soft); border-radius: 0.65rem;
      background: transparent; color: var(--text);
      text-align: center; padding: 0.8rem 0.9rem;
      text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem;
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .drawer-parent { cursor: pointer; }
    .drawer-link:hover, .drawer-parent:hover { border-color: rgba(196,160,80,0.45); color: var(--gold-light); }
    .drawer-subpanel { display: none; gap: 0.28rem; padding-left: 0.8rem; }
    .drawer-subpanel.is-open { display: grid; }
    .drawer-subpanel .drawer-link { font-size: 0.72rem; opacity: 0.85; border-style: dashed; }
    .drawer-cta { margin-top: 0.8rem; }

    /* LANG SWITCHER */
    .lang-switcher { position: relative; flex-shrink: 0; }
    .lang-btn {
      display: inline-flex; align-items: center; gap: 0.45rem;
      background: transparent; border: 1px solid var(--line);
      border-radius: var(--radius-pill); padding: 0.38rem 0.7rem 0.38rem 0.5rem;
      cursor: pointer; color: var(--text); font-size: 0.72rem;
      font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
      transition: border-color 0.2s, background 0.2s; white-space: nowrap;
    }
    .lang-btn:hover { border-color: var(--accent); background: rgba(184,145,42,0.07); }
    .lang-btn .lang-flag { display: inline-flex; align-items: center; line-height: 1; }
    .lang-btn .lang-flag svg { display: block; border-radius: 2px; }
    .lang-dropdown {
      position: absolute; right: 0; top: 100%;
      background: rgba(14,12,8,0.98); border: 1px solid var(--line-soft);
      border-radius: 0.75rem; overflow: hidden; min-width: 9rem;
      box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,145,42,0.08);
      opacity: 0; visibility: hidden; transform: translateY(6px);
      transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
      margin-top: 0.6rem;
    }
    .lang-switcher:hover .lang-dropdown,
    .lang-dropdown:hover { opacity: 1; visibility: visible; transform: translateY(0); }
    .lang-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .lang-option {
      display: flex; align-items: center; gap: 0.65rem;
      padding: 0.65rem 0.9rem; cursor: pointer;
      font-size: 0.78rem; font-weight: 500; letter-spacing: 0.03em;
      color: var(--text); transition: background 0.15s, color 0.15s;
      border-bottom: 1px solid var(--line-soft);
    }
    .lang-option:last-child { border-bottom: 0; }
    .lang-option:hover { background: rgba(184,145,42,0.08); color: var(--gold-light); }
    .lang-option.is-active { color: var(--gold-light); }
    .lang-option svg { border-radius: 2px; flex-shrink: 0; }

    /* LAYOUT */
    main { padding-top: var(--header-h); }
    .section { position: relative; padding: var(--section-y) var(--page-x); }
    .section-label {
      font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--accent-soft); margin-bottom: 0.9rem;
      display: flex; align-items: center; gap: 0.7rem;
    }
    .section-label::before { content: ""; display: block; width: 1.8rem; height: 1px; background: var(--accent); }
    .center-wrap { margin-top: clamp(1.1rem,2.2vw,2rem); text-align: center; }

    /* HERO */
    .hero { min-height: calc(100svh - var(--header-h)); display: grid; align-items: stretch; padding-top: clamp(1.2rem,2.8vw,2rem); padding-bottom: 0; overflow: clip; }
    .hero-shell { position: relative; min-height: calc(100svh - var(--header-h) - clamp(1.2rem,2.8vw,2rem)); display: grid; align-content: space-between; gap: 1.4rem; }
    .breadcrumb { position: relative; z-index: 2; font-size: 0.9rem; color: rgba(240,234,216,0.7); }
    .breadcrumb span { color: rgba(240,234,216,0.45); }
    .hero-title { position: relative; z-index: 2; margin: 0; max-width: 15ch; font-size: clamp(2.9rem,8.5vw,8.2rem); line-height: 0.93; letter-spacing: -0.03em; font-weight: 600; }
    .hero-gradient { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(78% 90% at 76% 22%, rgba(140,100,20,0.55), transparent 62%), radial-gradient(56% 74% at 12% 88%, rgba(100,72,10,0.4), transparent 68%), radial-gradient(120% 140% at 50% 50%, rgba(40,28,8,0.5), transparent 80%); }
    .orb-field {
      position: absolute;
      inset: -16vw;
      pointer-events: none;
      overflow: hidden;
      filter: blur(92px) saturate(92%) brightness(72%);
      opacity: 0.72;
      z-index: 1;
      transform: translateZ(0);
    }
    [bg-animation-gradient] .circle {
      position: absolute;
      border-radius: 50%;
      animation: moveAround ease-in-out infinite;
      opacity: 0.74;
      mix-blend-mode: normal;
      will-change: transform;
    }
    @keyframes moveAround {
      0% { transform: translate(0, 0); }
      20% { transform: translate(12vw, -8vw); }
      45% { transform: translate(-9vw, 14vw); }
      70% { transform: translate(10vw, 7vw); }
      100% { transform: translate(0, 0); }
    }
    .hero-meta { position: relative; z-index: 2; display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; padding-bottom: clamp(1.5rem,2.9vw,2.9rem); }
    .hero-desc { max-width: 48ch; color: var(--muted); }
    .hero-stats { display: flex; gap: 3rem; flex-wrap: wrap; align-items: center; }
    .stat-item { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; }
    .stat-num { display: block; font-size: clamp(1.8rem,3vw,2.6rem); font-weight: 600; line-height: 1; }
    .stat-num.is-stars { font-size: clamp(1.8rem,3vw,2.6rem); color: var(--gold-light); letter-spacing: 0.04em; line-height: 1; }
    .stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); text-align: center; }

    /* INFO CARDS */
    .card-grid-2 { margin-top: clamp(1.6rem,2.3vw,2.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem,1.4vw,1.6rem); }
    .info-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1rem,1.35vw,1.4rem); min-height: clamp(14rem,24vw,19rem); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; background: linear-gradient(160deg,rgba(196,160,80,0.04),rgba(196,160,80,0.01)); }
    .info-card a { margin-top: auto; padding-top: 1rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-light); }
    .card-index { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-soft); }

    /* VIDEO */
    .media-teaser { margin-top: clamp(1rem,2vw,1.8rem); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
    .media-preview { aspect-ratio: 16/9; position: relative; overflow: hidden; background: radial-gradient(circle at 72% 20%,rgba(184,145,42,0.7),transparent 42%), radial-gradient(circle at 14% 92%,rgba(120,90,18,0.7),transparent 50%), linear-gradient(160deg,#100d04,#1a1508); }
    .media-preview::before { content: "Sissejuhatav video"; position: absolute; left: 1rem; bottom: 1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(226,192,106,0.78); }
    .play-trigger { position: absolute; right: 1rem; bottom: 1rem; border: 1px solid rgba(196,160,80,0.6); border-radius: var(--radius-pill); padding: 0.66rem 1rem; background: rgba(12,10,2,0.55); color: var(--gold-light); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
    .play-trigger:hover { background: var(--accent); border-color: var(--accent); color: #0c0b09; }

    /* WORK */
    .work-list { margin-top: clamp(1.5rem,2.3vw,2.4rem); display: grid; gap: clamp(1.2rem,2.4vw,2.6rem); }
    .tag-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
    .tag { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.33rem 0.7rem; font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
    .work-link { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gold-light); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
    .work-link svg { width: 1rem; height: 1rem; transition: transform 0.24s; }

    /* PORTFOLIO TABS */
    .portfolio-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(1.4rem,2vw,2rem); }
    .ptab { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
    .ptab:hover { border-color: var(--accent); color: var(--gold-light); }
    .ptab.is-active { border-color: var(--accent); color: #0c0b09; background: linear-gradient(135deg,#c9a94a,#b8912a); }
    .portfolio-panel { display: none; margin-top: clamp(1.2rem,2vw,1.8rem); }
    .portfolio-panel.is-active { display: block; }
    .portfolio-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(0.8rem,1.4vw,1.2rem); }
    .portfolio-card { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: linear-gradient(160deg,rgba(196,160,80,0.04),rgba(196,160,80,0.01)); transition: border-color 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; }
    .portfolio-card:hover { border-color: rgba(196,160,80,0.38); box-shadow: 0 8px 28px rgba(0,0,0,0.3); }
    .portfolio-img { height: 14rem; position: relative; overflow: hidden; background: radial-gradient(circle at 60% 30%,rgba(184,145,42,0.35),transparent 55%),#0f0d04; }
    .portfolio-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; border: 2px dashed rgba(196,160,80,0.2); margin: 0.8rem; border-radius: 0.5rem; }
    .portfolio-placeholder span { font-size: 0.78rem; color: rgba(196,160,80,0.5); text-align: center; }
    .portfolio-placeholder small { font-size: 0.66rem; color: rgba(196,160,80,0.3); }
    .pimg-before-after { display: flex; }
    .ba-half { flex: 1; position: relative; overflow: hidden; }
    .ba-half .portfolio-placeholder { margin: 0.5rem; }
    .ba-before { background: rgba(0,0,0,0.3); }
    .ba-after { background: rgba(184,145,42,0.08); }
    .ba-divider { width: 2px; background: var(--accent); flex-shrink: 0; position: relative; z-index: 2; }
    .ba-divider::after { content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--accent); color: #0c0b09; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; }
    .ba-label { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 3; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); background: rgba(12,11,9,0.8); border: 1px solid var(--line-soft); border-radius: 0.3rem; padding: 0.2rem 0.5rem; }
    .ba-label-after { left: auto; right: 0.5rem; color: var(--gold-light); }
    .portfolio-info { padding: 1rem; display: grid; gap: 0.6rem; align-content: start; flex: 1; }
    .portfolio-add { border-style: dashed; min-height: 18rem; cursor: pointer; background: rgba(196,160,80,0.02) !important; }
    .portfolio-add:hover { background: rgba(196,160,80,0.05) !important; }
    .portfolio-add-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: rgba(196,160,80,0.35); padding: 2rem; }
    .portfolio-add-icon { font-size: 2rem; line-height: 1; color: rgba(196,160,80,0.3); }
    .portfolio-add span:last-child { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }

    /* ACCORDION */
    .accordion { margin-top: clamp(1.4rem,2vw,2rem); display: grid; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
    .acc-item { border-bottom: 1px solid var(--line-soft); }
    .acc-item:last-child { border-bottom: 0; }
    .acc-trigger { width: 100%; background: transparent; border: 0; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; text-align: left; transition: background 0.2s; }
    .acc-trigger:hover { background: rgba(184,145,42,0.05); }
    .acc-item.is-open .acc-trigger { background: rgba(184,145,42,0.07); }
    .acc-num { font-size: 1.4rem; color: rgba(196,160,80,0.35); line-height: 1; flex-shrink: 0; width: 2.2rem; }
    .acc-title { flex: 1; font-size: clamp(0.9rem,1vw,1.05rem); font-weight: 600; color: var(--text); }
    .acc-arrow { font-size: 0.85rem; color: var(--accent); transition: transform 0.3s ease; flex-shrink: 0; }
    .acc-item.is-open .acc-arrow { transform: rotate(180deg); }
    .acc-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
    .acc-item.is-open .acc-body { max-height: 500px; }
    .acc-body-inner { padding: 0 1.2rem 1.4rem 4.2rem; display: grid; gap: 1rem; }
    .acc-desc { font-size: var(--body-size); color: var(--body-color); line-height: 1.78; margin: 0; }
    .acc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .acc-sub { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-soft); margin-bottom: 0.5rem; }
    .svc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; counter-reset: step; }
    .svc-steps li { counter-increment: step; font-size: 0.83rem; color: var(--muted); padding-left: 1.4rem; position: relative; line-height: 1.45; }
    .svc-steps li::before { content: counter(step) "."; position: absolute; left: 0; color: var(--accent); font-weight: 600; font-size: 0.78rem; }
    .svc-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
    .svc-needs li { font-size: 0.83rem; color: var(--muted); padding-left: 1.2rem; position: relative; line-height: 1.45; }
    .svc-needs li::before { content: "\2726"; position: absolute; left: 0; color: var(--accent); font-size: 0.55rem; top: 0.3em; }

    /* MEIST */
    .about-intro { margin-top: clamp(1.5rem,2.5vw,2.2rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,4rem); align-items: center; }
    .about-lead { font-size: clamp(1rem,1.1vw,1.2rem); color: var(--text); line-height: 1.6; margin: 0; }
    .about-intro-text p { font-size: var(--body-size); color: var(--body-color); }
    .about-intro-image { display: flex; align-items: center; justify-content: center; width: 100%; border-left: 1px solid var(--line); padding-left: clamp(1.5rem,2.5vw,3rem); align-self: stretch; min-height: 0; }
    .about-intro-image img { max-width: 100%; max-height: 440px; height: auto; width: auto; object-fit: contain; border-radius: 8px; }
    .about-intro-stats { display: flex; flex-direction: column; gap: 1.4rem; border-left: 1px solid var(--line); padding-left: clamp(1.5rem,2.5vw,3rem); flex-shrink: 0; }
    .about-stat { display: flex; flex-direction: column; gap: 0.25rem; }
    .about-stat-num { font-size: clamp(1.8rem,2.5vw,2.6rem); font-weight: 600; line-height: 1; color: var(--gold-light); }
    .about-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
    .about-values { margin-top: clamp(1.8rem,2.8vw,3rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem,1.4vw,1.2rem); }
    .about-value-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1rem,1.5vw,1.4rem); display: flex; gap: 1rem; align-items: flex-start; background: linear-gradient(160deg,rgba(196,160,80,0.04),rgba(196,160,80,0.01)); transition: border-color 0.25s; }
    .about-value-card:hover { border-color: rgba(196,160,80,0.35); }
    .about-value-card h3 { font-size: 1rem; margin-bottom: 0; }
    .value-icon-wrap { flex-shrink: 0; width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid rgba(184,145,42,0.25); border-radius: 0.75rem; background: rgba(184,145,42,0.05); }
    .about-cta-strip { margin-top: clamp(1.8rem,2.8vw,3rem); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.2rem,2vw,2rem); background: linear-gradient(135deg,rgba(184,145,42,0.07),rgba(184,145,42,0.02)); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
    .about-cta-text h3 { font-size: clamp(1rem,1.3vw,1.4rem); margin-bottom: 0.3rem; }
    .about-cta-text p { font-size: var(--body-size); color: var(--body-color); }

    /* BLOGI - category badge shared */
    .nb-cat {
      font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: #0c0b09; font-weight: 600;
      background: linear-gradient(135deg,#c9a94a,#b8912a);
      border-radius: var(--radius-pill); padding: 0.25rem 0.65rem;
      width: fit-content;
    }

    /* ── BLOG NOTEBOOK HERO ── */
    .blog-book-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2.5rem,6vw,6rem);
      align-items: center;
      width: 100%;
    }

    /* Scene provides perspective for 3D tilt */
    .blog-book-scene {
      perspective: 1200px;
      display: flex; justify-content: center; align-items: center;
    }

    /* Outer wrapper - receives the 3D transform */
    .blog-book-wrap {
      position: relative;
      width: min(360px,90%);
      display: flex;
      transform-style: preserve-3d;
      /* Floating idle animation */
      animation: bookFloat 6s ease-in-out infinite;
      will-change: transform;
      filter: drop-shadow(0 40px 50px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(184,145,42,0.12));
    }
    @keyframes bookFloat {
      0%,100% { transform: translateY(0)    rotate3d(0.4,-0.6,0, 4deg); }
      33%      { transform: translateY(-11px) rotate3d(-0.3,0.5,0, 3deg); }
      66%      { transform: translateY(-6px)  rotate3d(0.2,-0.4,0, 5deg); }
    }

    /* Gold spine on the left edge */
    .blog-book-spine {
      width: 2.6rem; flex-shrink: 0;
      background: linear-gradient(180deg,#1e1608,#120e03,#1e1608);
      border-right: 2px solid rgba(196,160,80,0.5);
      border-radius: 0.5rem 0 0 0.5rem;
      display: flex; flex-direction: column; align-items: center;
      padding: 1.4rem 0; justify-content: space-around;
      box-shadow: inset -2px 0 8px rgba(0,0,0,0.5), 2px 0 0 rgba(196,160,80,0.08);
    }
    .blog-spine-ring {
      width: 1.15rem; height: 1.15rem; border-radius: 50%;
      border: 2px solid rgba(196,160,80,0.6);
      background: radial-gradient(circle at 35% 35%, rgba(196,160,80,0.25), #090700);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.7), 0 0 5px rgba(196,160,80,0.08);
      flex-shrink: 0;
    }

    /* Main cover panel */
    .blog-book-cover {
      flex: 1;
      position: relative; overflow: hidden;
      border-radius: 0 0.7rem 0.7rem 0;
      /* Top border catches light */
      border-top: 1px solid rgba(196,160,80,0.6);
      border-right: 1px solid rgba(196,160,80,0.25);
      border-bottom: 1px solid rgba(196,160,80,0.1);
      background: #0d0b03;
    }

    /* The actual header image fills the top portion */
    .blog-cover-img {
      width: 100%; display: block;
      position: relative; z-index: 2;
      /* slight vignette at bottom edge */
    }
    .blog-cover-img::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2.5rem;
      background: linear-gradient(to bottom, transparent, #0d0b03);
      z-index: 3;
    }

    /* Ruled notebook lines below the image */
    .blog-cover-lines {
      padding: 0.9rem 1.1rem 1.4rem;
      display: flex; flex-direction: column; gap: 0;
      position: relative; z-index: 2;
      background: #0d0b03;
    }
    .blog-cover-line {
      height: 1.85rem;
      border-bottom: 1px solid rgba(196,160,80,0.07);
    }
    .blog-cover-line:first-child { border-top: none; }

    /* Page-curl bottom-right corner */
    .blog-cover-curl {
      position: absolute; bottom: 0; right: 0; z-index: 5;
      width: 0; height: 0;
      border-style: solid; border-width: 0 0 2.8rem 2.8rem;
      border-color: transparent transparent #0a0800 transparent;
      filter: drop-shadow(-3px -3px 4px rgba(196,160,80,0.18));
    }

    /* Light sheen follows cursor - updated by JS */
    .blog-cover-sheen {
      position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
      background:
        radial-gradient(circle at var(--sheen-x,50%) var(--sheen-y,30%), rgba(255,255,255,0.22), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 40%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .blog-book-wrap.is-hover .blog-cover-sheen { opacity: 1; }

    /* Stacked page shadows peeking out from right edge */
    .blog-book-pages {
      position: absolute; right: -6px; top: 4px; bottom: 4px;
      display: flex; gap: 2px; pointer-events: none; z-index: -1;
    }
    .blog-page-shadow {
      width: 4px; border-radius: 0 2px 2px 0;
      background: linear-gradient(180deg,#1a1506,#0f0d04,#1a1506);
      opacity: 0.6;
    }
    .blog-page-shadow:nth-child(2) { opacity: 0.38; margin-top: 3px; margin-bottom: 3px; }
    .blog-page-shadow:nth-child(3) { opacity: 0.2; margin-top: 6px; margin-bottom: 6px; }

    /* Right: text column */
    .blog-book-text { display: flex; flex-direction: column; }
    .blog-book-stats {
      display: flex; gap: clamp(1.2rem,2.5vw,2.5rem);
      margin-top: clamp(1.4rem,2.5vw,2.2rem);
      padding-top: clamp(1.2rem,2vw,1.8rem);
      border-top: 1px solid var(--line-soft);
    }
    .blog-stat { display: flex; flex-direction: column; gap: 0.2rem; }
    .blog-stat-num {
      font-size: clamp(1.4rem,2.2vw,2rem); font-weight: 600;
      color: var(--gold-light); line-height: 1;
    }
    .blog-stat-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }

    @media (max-width: 760px) {
      .blog-book-layout { grid-template-columns: 1fr; }
      .blog-book-wrap { width: min(300px,85vw); }
      .blog-book-scene { order: -1; }
    }

    /* CTA */
    .cta-band { background: radial-gradient(80% 110% at 90% 15%,rgba(184,145,42,0.55),transparent 52%), radial-gradient(72% 90% at 8% 90%,rgba(140,105,20,0.5),transparent 48%), #080700; }
    .cta-shell { border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1rem,2.1vw,2rem); display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
    .avatar { width: clamp(3rem,4.5vw,4.5rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 20%,#f5e4a8,#c9a94a 40%,#8a6a18 70%,#4a380a 100%); border: 1px solid rgba(196,160,80,0.5); box-shadow: 0 0 20px rgba(184,145,42,0.2); }
    .cta-title { margin: 0; font-size: clamp(1.2rem,1rem + 1.3vw,2.2rem); line-height: 1.1; max-width: 22ch; }
    .cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem; }
    .cta-mail { border-bottom: 1px solid rgba(196,160,80,0.5); padding-bottom: 0.15rem; color: var(--gold-light); display: inline-block; margin-top: 0.6rem; }

    /* FOOTER */
    .footer { background: #060500; border-top: 1px solid var(--line-soft); padding: clamp(2.5rem,4.5vw,4.5rem) var(--page-x) 0; }
    .footer-inner { display: grid; grid-template-columns: minmax(200px,240px) 1fr; gap: clamp(2.5rem,5vw,6rem); align-items: start; max-width: 88rem; margin-inline: auto; }
    .footer-brand-col { display: flex; flex-direction: column; gap: 1rem; }
    .footer-logo { width: clamp(100px,10vw,145px); height: auto; filter: brightness(0.65) drop-shadow(0 0 8px rgba(196,160,80,0.2)) drop-shadow(0 3px 6px rgba(0,0,0,0.7)); transition: filter 0.3s; }
    .footer-logo:hover { filter: brightness(0.8) drop-shadow(0 0 12px rgba(196,160,80,0.35)) drop-shadow(0 3px 8px rgba(0,0,0,0.8)); }
    .footer-tagline { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); font-weight: 400; line-height: 1; }
    .footer-email-link { width: fit-content; font-size: 0.81rem; font-weight: 300; color: rgba(240,234,216,0.62); border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
    .footer-email-link:hover { color: var(--gold-light); border-bottom-color: rgba(196,160,80,0.45); }
    .footer-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.5rem 2rem; }
    .footer-group h4 { margin: 0 0 0.8rem; color: var(--accent-soft); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; }
    .footer-links { display: grid; gap: 0.38rem; }
    .footer-links a { width: fit-content; color: rgba(240,234,216,0.62); font-size: 0.79rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid transparent; transition: border-color 0.25s, color 0.25s; }
    .footer-links a:hover { border-bottom-color: var(--gold-light); color: var(--gold-light); }
    .footer-meta { margin-top: 2.5rem; margin-left: calc(-1 * var(--page-x)); margin-right: calc(-1 * var(--page-x)); border-top: 1px solid rgba(196,160,80,0.22); padding: 1.5rem var(--page-x) 2.2rem; color: rgba(168,156,126,0.55); font-size: 0.76rem; font-weight: 300; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; }
    .footer-social { display: flex; gap: 0.75rem; justify-content: center; }
    .footer-social-link { width: 2.15rem; height: 2.15rem; border: 1px solid rgba(240,234,216,0.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(240,234,216,0.5); transition: border-color 0.25s, color 0.25s; }
    .footer-social-link:hover { border-color: var(--gold-light); color: var(--gold-light); }
    .footer-social-link svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
    .footer-meta-bottom { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

    /* REVEAL */
    [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
    [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

    /* MODAL */
    .media-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: rgba(0,0,0,0.85); padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
    .media-modal.is-open { opacity: 1; visibility: visible; }
    .media-modal-dialog { width: min(62rem,95vw); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #000; }
    .media-modal-bar { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line-soft); background: #0c0a02; }
    .media-modal-title { color: rgba(240,234,216,0.8); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .media-modal-close { border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--text); padding: 0.35rem 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; cursor: pointer; }

    /* RESPONSIVE */
    @media (max-width: 991px) {
      :root { --header-h: 3.6rem; }
      .hero-title { max-width: 12ch; font-size: clamp(2.6rem,12vw,4.9rem); }
      .card-grid-2, .about-values, .about-intro, .cta-shell { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr; }
      .footer-brand-col { align-items: center; text-align: center; }
      .footer-brand-col .footer-logo { transform: translateX(5px); }
      .footer-email-link { margin: 0 auto; }
      .footer-nav { grid-template-columns: repeat(3,1fr); width: 100%; }
      .about-intro-stats { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.4rem; flex-direction: row; flex-wrap: wrap; gap: 1.5rem; }
      .about-intro-image { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.5rem; }
      .cta-actions { justify-content: flex-start; }
      .footer-meta { gap: 0.75rem; }
      .portfolio-grid { grid-template-columns: 1fr 1fr; }
      .acc-body-inner { padding-left: 1.2rem; }
      .acc-cols { grid-template-columns: 1fr; }
    }
    @media (max-width: 767px) {
      .section { padding-block: clamp(3.2rem,12vw,4.5rem); }
      .portfolio-grid { grid-template-columns: 1fr; }
      .about-value-card { flex-direction: column; }
      /* Hero: stack desc+buttons above stats */
      .hero-meta { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
      /* Stats: always 3 equal columns so they never wrap to a second line */
      .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        width: 100%;
      }
      .stat-item { padding: 0.5rem 0; border-right: 1px solid var(--line-soft); padding-right: 1rem; }
      .stat-item:last-child { border-right: none; padding-right: 0; }
      .stat-item:not(:first-child) { padding-left: 1rem; }
      /* Scatter scene: convert absolute cards to a clean 2-column grid */
      .scatter-scene {
        height: auto; min-height: 0; overflow: visible; perspective: none;
        padding: clamp(3.5rem,10vw,5rem) var(--page-x);
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 0.75rem; align-items: start; align-content: start;
      }
      .scatter-bg { display: none !important; }
      .scatter-scene > img[aria-hidden] { display: none !important; }
      .scatter-center { position: static; grid-column: 1 / -1; padding: 0; margin-bottom: 0.5rem; }
      .scatter-hint { margin-top: 1rem; }
      .scatter-card {
        position: relative !important; opacity: 1 !important; transform: none !important;
        width: 100% !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
        margin-top: 0 !important;
        /* Reset top/left/right/bottom - they become relative offsets when position:relative */
        top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important;
      }
      .sc-5 { display: block !important; grid-column: 1 / -1; max-width: 280px; margin-inline: auto; }
      .sc-img { height: 120px; }
      .sc-iframe-container { height: 120px; }
      .sc-iframe-container iframe { width: 900px; height: 600px; transform: scale(calc(170 / 900)) translate3d(0,0,0) !important; transform-origin: 0 0; }
      /* Service card: prevent frame overflow on narrow screens */
      .svc-card-frame { padding: 6px; }
      .svc-card-stage { width: min(620px, calc(100vw - 2 * var(--page-x) - 16px)); height: clamp(220px,38vh,300px); }
      .svc-deck-content p { -webkit-line-clamp: 4; }
      /* Footer nav single column on small mobile */
      .footer-nav { grid-template-columns: 1fr; }
      /* CTA strip: stack vertically */
      .about-cta-strip { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 480px) {
      .button-pill { width: 100%; }
      .hero-title { max-width: 11ch; }
      .hero-btns { flex-direction: column; }
      .hero-btns .button-pill { text-align: center; }
      .stat-num { font-size: clamp(1.4rem,6vw,2rem); }
    }
    @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }

    .hero-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }

    /* SERVICES WALLET STACK */
    .svc-stack-section { }
    .svc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; direction: rtl; }
    .svc-layout > * { direction: ltr; }
    .svc-left { display: flex; flex-direction: column; gap: 0; padding-right: clamp(1rem,4vw,4rem); }
    .svc-left h2 { margin-bottom: clamp(1.5rem,2.5vw,2.2rem); }
    .svc-desc { font-size: clamp(0.98rem,1.05vw,1.1rem); line-height: 1.88; color: rgba(240,234,216,0.72); }
    .svc-right { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem,2vw,1.8rem); }
    @media (max-width: 860px) { .svc-layout { grid-template-columns: 1fr; } .svc-left { margin-bottom: 0.5rem; } }
    .svc-card-frame { position: relative; padding: 10px; border-radius: 1.6rem; border: 1px solid rgba(196,160,80,0.45); box-shadow: 0 0 0 1px rgba(196,160,80,0.12), 0 0 40px rgba(184,145,42,0.08), inset 0 0 0 1px rgba(196,160,80,0.06); background: rgba(184,145,42,0.03); }
    .svc-card-frame::before { content: ''; position: absolute; inset: -1px; border-radius: 1.7rem; background: linear-gradient(135deg, rgba(196,160,80,0.35) 0%, transparent 40%, transparent 60%, rgba(196,160,80,0.2) 100%); pointer-events: none; }
    .svc-card-stage { position: relative; width: min(620px,88vw); height: clamp(260px,38vh,340px); perspective: 900px; perspective-origin: 50% 50%; }
    .svc-deck-card {
      position: absolute; inset: 0;
      border-radius: 1.4rem;
      overflow: hidden;
      text-decoration: none; color: inherit;
      will-change: transform, opacity;
      transform-style: preserve-3d;
      background: rgba(0,0,0,0.35);
      transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, box-shadow 0.25s;
      /* Physical card borders - top edge catches light */
      border-top: 1px solid rgba(196,160,80,0.55);
      border-left: 1px solid rgba(196,160,80,0.3);
      border-right: 1px solid rgba(196,160,80,0.15);
      border-bottom: 1px solid rgba(196,160,80,0.08);
    }
    /* Grain noise texture */
    .svc-deck-card::before {
      content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.045; mix-blend-mode: overlay;
    }
    /* Light sheen - simulates card surface catching light */
    .svc-deck-card::after {
      content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 25%, transparent 50%),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 40%, rgba(0,0,0,0.18) 100%);
    }
    .svc-deck-card[data-state="hidden-below"] { transform: translateY(40%) scale(0.88); opacity: 0; pointer-events: none; z-index: 1; }
    .svc-deck-card[data-state="hidden-above"] { transform: translateY(-20%) scale(0.82); opacity: 0; pointer-events: none; z-index: 1; }
    .svc-deck-card[data-state="behind-2"]     { transform: translateY(-9%) scale(0.91); opacity: 0.28; pointer-events: none; z-index: 3; }
    .svc-deck-card[data-state="behind-1"]     { transform: translateY(-4.5%) scale(0.955); opacity: 0.55; pointer-events: none; z-index: 5; }
    .svc-deck-card[data-state="active"] {
      opacity: 1; z-index: 10;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.45) inset,
        0 35px 70px -10px rgba(0,0,0,0.75),
        0 15px 35px rgba(0,0,0,0.4),
        0 0 0 0.5px rgba(196,160,80,0.2),
        0 8px 30px rgba(184,145,42,0.12);
    }
    .svc-deck-bg { position: absolute; inset: 0; z-index: 0; }
    /* Subtle diagonal pattern on bg for depth */
    .svc-deck-bg::after {
      content: ''; position: absolute; inset: 0;
      background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 18px,
        rgba(196,160,80,0.018) 18px, rgba(196,160,80,0.018) 19px
      );
    }
    .svc-deck-content { position: relative; z-index: 2; padding: clamp(1.4rem,3vw,2.2rem); height: 100%; display: flex; flex-direction: column; gap: 0.7rem; box-sizing: border-box; }
    .svc-deck-content h3 { font-size: clamp(1.1rem,1.6vw,1.45rem); color: var(--text); margin: 0; }
    .svc-deck-content p {
      font-size: var(--body-size); line-height: 1.75; flex: 1; margin: 0; color: var(--body-color);
      overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
    }
    .svc-deck-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.7rem; border-top: 1px solid rgba(196,160,80,0.15); }
    .svc-deck-link { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-light); }
    .svc-deck-logo { height: 1.5rem; width: auto; opacity: 0.78; filter: brightness(1.9) saturate(0.85); flex-shrink: 0; }
    .svc-deck-nav { display: flex; align-items: center; gap: 1.4rem; position: relative; z-index: 10; }
    .svc-deck-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s, background 0.2s, color 0.2s; flex-shrink: 0; }
    .svc-deck-btn:hover { border-color: var(--accent); color: var(--gold-light); background: rgba(184,145,42,0.07); }
    .svc-deck-btn:disabled { opacity: 0.25; cursor: default; }
    .svc-deck-counter { font-size: 1.4rem; font-weight: 600; color: var(--gold-light); display: flex; align-items: baseline; min-width: 4rem; justify-content: center; }
    .svc-counter-sep { color: var(--muted); margin: 0 0.15rem; font-size: 0.85em; }
    #svcTotal { color: var(--muted); font-size: 0.7em; }
    .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2vw,2rem); }
    .team-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.4rem,2.5vw,2.5rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; background: linear-gradient(160deg,rgba(196,160,80,0.04),rgba(196,160,80,0.01)); transition: border-color 0.25s; }
    .team-card:hover { border-color: rgba(196,160,80,0.35); }
    .team-avatar { width: clamp(7rem,12vw,10rem); height: clamp(7rem,12vw,10rem); border-radius: 50%; border: 2px solid var(--line); overflow: hidden; background: rgba(184,145,42,0.06); transition: border-color 0.25s; display: grid; place-items: center; }
    .team-card:hover .team-avatar { border-color: var(--accent); }
    .team-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .team-avatar-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; }
    .team-avatar-placeholder span { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .team-info { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
    .team-name { font-size: clamp(1rem,1.3vw,1.25rem); font-weight: 600; color: var(--text); margin: 0; }
    .team-role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-soft); }
    .team-bio { font-size: var(--body-size); color: var(--body-color); line-height: 1.75; max-width: 32ch; margin: 0; }
    .team-links { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
    .team-social { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; transition: border-color 0.2s, color 0.2s, background 0.2s; }
    .team-social:hover { border-color: var(--accent); color: var(--gold-light); background: rgba(184,145,42,0.08); }
    @media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

    /* ── SCATTER SCENE ── */
    .scatter-scene {
      position: relative;
      height: 100svh;
      background: #080700;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      perspective: 1200px;
    }
    .scatter-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(184,145,42,0.07), transparent 70%);
    }
    .scatter-center {
      position: relative; z-index: 10;
      text-align: center; padding: 2rem;
    }
    .scatter-label {
      font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--accent-soft); margin-bottom: 0.9rem;
      display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    }
    .scatter-label::before { content: ""; display: block; width: 1.8rem; height: 1px; background: var(--accent); }
    .scatter-label::after { content: ""; display: block; width: 1.8rem; height: 1px; background: var(--accent); }
    .scatter-title {
      font-size: clamp(2.2rem,5vw,5rem);
      font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0;
      color: var(--text);
    }
    .scatter-hint {
      margin-top: 1.5rem; font-size: 0.78rem;
      color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      animation: bounce 2s ease-in-out infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes svcFloat { from { translate: 0 0; } to { translate: 0 -8px; } }
    @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

    /* SCATTER CARDS */
    .scatter-card {
      position: absolute;
      width: 240px;
      border: 1px solid var(--line);
      border-radius: 0.75rem;
      overflow: hidden;
      background: #0f0d04;
      box-shadow: 0 16px 40px rgba(0,0,0,0.5);
      opacity: 0;
      transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
      cursor: pointer;
      z-index: 5;
      will-change: transform;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .scatter-card.is-visible { opacity: 1; }
    .scatter-card:hover { border-color: var(--accent); z-index: 20; }

    .sc-iframe-container {
      position: relative;
      height: 140px;
      width: 100%;
      overflow: hidden;
      background: #000;
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .sc-iframe-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 1200px; /* Virtual desktop width */
      height: 700px;
      border: 0;
      transform: scale(calc(240 / 1200)) translate3d(0,0,0);
      transform-origin: 0 0;
      pointer-events: none;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .sc-iframe-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
    }

    .sc-img { height: 140px; width: 100%; }
    .sc-info {
      padding: 0.6rem 0.8rem;
      transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
    }
    .sc-tag { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-soft); }
    .sc-name { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-top: 0.15rem; }

    /* Card positions - scattered around center */
    .sc-1 { top: 6%;    left: 7%;  transform: translateY(var(--py, 0px)) rotate(-6deg) translate3d(-80px, -40px, 0); }
    .sc-2 { top: 6%;    right: 7%; transform: translateY(var(--py, 0px)) rotate(5deg)  translate3d(80px, -40px, 0); }
    .sc-3 { bottom: 5%; left: 7%;  transform: translateY(var(--py, 0px)) rotate(4deg)  translate3d(-80px, 40px, 0); }
    .sc-4 { bottom: 5%; right: 7%; transform: translateY(var(--py, 0px)) rotate(-5deg) translate3d(80px, 40px, 0); }
    .sc-5 { top: 40%;   left: 4%;  transform: translateY(var(--py, 0px)) rotate(2deg)  translate3d(-100px, 0, 0); }

    .scatter-card.is-visible.sc-1 { transform: translateY(var(--py, 0px)) rotate(-6deg) translate3d(0,0,0); }
    .scatter-card.is-visible.sc-2 { transform: translateY(var(--py, 0px)) rotate(5deg)  translate3d(0,0,0); }
    .scatter-card.is-visible.sc-3 { transform: translateY(var(--py, 0px)) rotate(4deg)  translate3d(0,0,0); }
    .scatter-card.is-visible.sc-4 { transform: translateY(var(--py, 0px)) rotate(-5deg) translate3d(0,0,0); }
    .scatter-card.is-visible.sc-5 { transform: translateY(var(--py, 0px)) rotate(2deg)  translate3d(0,0,0); }

    .scatter-card:hover.sc-1 { transform: translateY(var(--py, 0px)) rotate(0deg) scale(1.05) translate3d(0,0,0); }
    .scatter-card:hover.sc-2 { transform: translateY(var(--py, 0px)) rotate(0deg) scale(1.05) translate3d(0,0,0); }
    .scatter-card:hover.sc-3 { transform: translateY(var(--py, 0px)) rotate(0deg) scale(1.05) translate3d(0,0,0); }
    .scatter-card:hover.sc-4 { transform: translateY(var(--py, 0px)) rotate(0deg) scale(1.05) translate3d(0,0,0); }
    .scatter-card:hover.sc-5 { transform: translateY(var(--py, 0px)) rotate(0deg) scale(1.05) translate3d(0,0,0); }

    /* scatter-card mobile rules consolidated above in the main 767px block */

    /* ── TEENUSTE SCATTER ── */
    .svc-scatter-scene {
      position: relative; height: 100svh; min-height: 600px;
      background: linear-gradient(180deg,#0e0c07,#0a0901);
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .svc-scatter-bg {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(184,145,42,0.06), transparent 70%);
    }
    .svc-scatter-center {
      position: relative; z-index: 10;
      pointer-events: none;
    }

    /* SERVICE CARDS */
    .svc-sc-card {
      position: absolute; z-index: 5;
      width: clamp(140px,16vw,210px);
      padding: clamp(0.9rem,1.2vw,1.3rem);
      border: 1px solid var(--line); border-radius: var(--radius-card);
      background: linear-gradient(145deg,rgba(20,16,4,0.95),rgba(12,11,9,0.98));
      backdrop-filter: blur(6px);
      display: flex; flex-direction: column; gap: 0.55rem;
      opacity: 0;
      transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1), border-color 0.2s;
      cursor: pointer;
      text-decoration: none;
    }
    .svc-sc-card.is-in { opacity: 1; }
    .svc-sc-card:hover { border-color: var(--accent); z-index: 20; }
    .svc-sc-card:hover .svc-sc-title { color: var(--gold-light); }
    .svc-sc-icon { opacity: 0.85; }
    .svc-sc-title { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.2; }
    .svc-sc-sub { font-size: 0.7rem; color: var(--muted); }

    /* Positions - 4 corners + sides, avoiding center */
    .svc-sc-1 { top: 7%;  left: 4%;   transform: rotate(-4deg) translateY(30px); }
    .svc-sc-2 { top: 5%;  right: 4%;  transform: rotate(3deg)  translateY(30px); }
    .svc-sc-3 { top: 40%; left: 2%;   transform: rotate(2deg)  translateX(-30px); }
    .svc-sc-4 { top: 38%; right: 2%;  transform: rotate(-3deg) translateX(30px); }
    .svc-sc-5 { bottom: 22%; left: 4%;  transform: rotate(3deg)  translateY(-30px); }
    .svc-sc-6 { bottom: 18%; right: 4%; transform: rotate(-4deg) translateY(-30px); }
    .svc-sc-7 { bottom: 5%; left: 28%; transform: rotate(-2deg) translateY(30px); }
    .svc-sc-8 { bottom: 5%; right: 28%;transform: rotate(2deg)  translateY(30px); }

    .svc-sc-card.is-in.svc-sc-1 { transform: rotate(-4deg) translateY(0); }
    .svc-sc-card.is-in.svc-sc-2 { transform: rotate(3deg)  translateY(0); }
    .svc-sc-card.is-in.svc-sc-3 { transform: rotate(2deg)  translateX(0); }
    .svc-sc-card.is-in.svc-sc-4 { transform: rotate(-3deg) translateX(0); }
    .svc-sc-card.is-in.svc-sc-5 { transform: rotate(3deg)  translateY(0); }
    .svc-sc-card.is-in.svc-sc-6 { transform: rotate(-4deg) translateY(0); }
    .svc-sc-card.is-in.svc-sc-7 { transform: rotate(-2deg) translateY(0); }
    .svc-sc-card.is-in.svc-sc-8 { transform: rotate(2deg)  translateY(0); }

    .svc-sc-card:hover { transform: rotate(0deg) scale(1.06) !important; }

    @media (max-width: 767px) {
      .svc-scatter-scene { height: auto; min-height: 0; padding: var(--section-y) var(--page-x); display: block; }
      .svc-scatter-bg { display: none; }
      .svc-scatter-center { position: static; margin-bottom: 1.5rem; }
      .svc-sc-card { position: static; opacity: 1; transform: none !important; width: 100%; }
      .svc-scatter-scene { display: flex; flex-direction: column; gap: 0; }
      .svc-scatter-scene > a { margin-bottom: 0.6rem; }
    }

    /* ── KONTAKT ── */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 92vh; }
    .contact-left {
      padding: clamp(3rem,6vw,6rem) clamp(2rem,3vw,3.5rem) clamp(2rem,4vw,4rem) var(--page-x);
      border-right: 1px solid var(--line-soft);
      display: flex; flex-direction: column;
      background: #080700;
    }
    .ci-list { display: flex; flex-direction: column; margin-top: 2rem; }
    .ci-item {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
      color: inherit; text-decoration: none; transition: color 0.2s;
    }
    .ci-item:first-child { border-top: 1px solid var(--line-soft); }
    a.ci-item:hover .ci-val { color: var(--gold-light); }
    .ci-icon {
      width: 2rem; height: 2rem; border-radius: 0.4rem;
      border: 1px solid var(--line); background: rgba(184,145,42,0.05);
      display: grid; place-items: center; flex-shrink: 0; color: var(--accent);
    }
    .ci-label { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .ci-val { font-size: var(--body-size); color: var(--text); margin-top: 0.1rem; }
    .ci-social { display: flex; gap: 0.45rem; margin-top: 1.4rem; flex-wrap: wrap; }
    .ci-soc-btn {
      display: inline-flex; align-items: center; gap: 0.35rem;
      font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.05em;
      border: 1px solid var(--line); border-radius: var(--radius-pill);
      padding: 0.35rem 0.75rem; color: var(--muted);
      transition: border-color 0.2s, color 0.2s;
    }
    .ci-soc-btn:hover { border-color: var(--accent); color: var(--gold-light); }
    .ci-map {
      margin-top: 1.8rem; border-radius: var(--radius-card);
      overflow: hidden; border: 1px solid var(--line-soft);
      height: 170px; position: relative; flex-shrink: 0;
    }
    .ci-map iframe { display: block; width: 100%; height: 100%; filter: grayscale(25%) brightness(0.82); }
    .ci-map-badge {
      position: absolute; bottom: 0.65rem; left: 0.65rem;
      background: rgba(8,7,0,0.92); border: 1px solid var(--line);
      border-radius: var(--radius-pill); padding: 0.3rem 0.7rem;
      display: flex; align-items: center; gap: 0.4rem;
      font-size: 0.7rem; color: var(--text); pointer-events: none;
    }
    .contact-right {
      padding: clamp(3rem,6vw,6rem) var(--page-x) clamp(2rem,4vw,4rem) clamp(2rem,3vw,3.5rem);
      display: flex; align-items: center; justify-content: center;
      background: #080700;
    }
    .cf-card { width: 100%; max-width: 520px; }
    .cf-card-title { font-size: clamp(1.2rem,1.5vw,1.5rem); font-weight: 600; color: var(--text); margin: 0; }
    .cf-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; }
    .cf-label {
      font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--muted); font-weight: 500;
    }
    .cf-input {
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(196,160,80,0.15);
      border-radius: 0.5rem; padding: 0.78rem 1rem;
      color: var(--text); font-size: var(--body-size);
      transition: border-color 0.2s, background 0.2s;
      outline: none; width: 100%; font-family: inherit;
    }
    .cf-input::placeholder { color: rgba(168,156,126,0.35); }
    .cf-input:focus { border-color: rgba(184,145,42,0.5); background: rgba(184,145,42,0.04); }
    .cf-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a89c7e' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; color-scheme: dark; }
    .cf-select option { background: #1a1600; color: var(--text); }
    .cf-textarea { resize: vertical; min-height: 105px; line-height: 1.55; }
    .cf-submit-btn { width: 100%; justify-content: center; padding: 0.85rem; gap: 0.55rem; font-size: 0.75rem; }
    .cf-success {
      display: none; align-items: center; gap: 0.6rem;
      font-size: 0.85rem; color: #5BC8A0;
      background: rgba(29,158,117,0.06);
      border: 1px solid rgba(29,158,117,0.2);
      border-radius: 0.5rem; padding: 0.8rem 1rem; margin-top: 0.8rem;
    }
    .cf-success.is-shown { display: flex; }
    @media (max-width: 860px) {
      .contact-grid { grid-template-columns: 1fr; min-height: auto; }
      .contact-left { border-right: 0; border-bottom: 1px solid var(--line-soft); }
    }

/* SUBPAGE NAV */
    .nav-link.is-current { color: var(--gold-light); opacity: 1; }
    .nav-link.is-current::after { transform: scaleX(1); }

    /* BLOG SUBPAGES */
    .subpage-hero {
      min-height: clamp(24rem,60vh,36rem);
      display: grid;
      align-items: end;
      overflow: hidden;
      position: relative;
      background: linear-gradient(180deg,#0a0800,#0c0a04 65%,#0b0902 100%);
    }
    .blog-page-hero {
      min-height: clamp(17rem,46vw,27rem);
      padding: 0;
      background: #090806;
      isolation: isolate;
    }
    .blog-page-hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-position: center;
      /* background-size: cover; */
      background-repeat: no-repeat;
      transform: scale(1.01);
    }
    .subpage-shell { position: relative; z-index: 2; max-width: 72rem; display: grid; gap: 1rem; }
    .subpage-title { margin: 0; max-width: 20ch; font-size: clamp(2rem,4vw,4.6rem); line-height: 0.98; letter-spacing: -0.025em; }
    .subpage-lead { max-width: 62ch; font-size: clamp(0.9rem,0.82rem + 0.2vw,1.05rem); line-height: 1.65; }
    .subpage-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
    .subpage-meta span {
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      padding: 0.35rem 0.75rem;
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      background: rgba(184,145,42,0.06);
    }

    .archive-controls { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .archive-chip {
      background: transparent;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      padding: 0.46rem 0.9rem;
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .archive-chip:hover { border-color: var(--accent); color: var(--gold-light); }
    .archive-chip.is-active { background: linear-gradient(135deg,#c9a94a,#b8912a); border-color: var(--accent); color: #0c0b09; }
    .blog-archive-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1rem,1.6vw,1.5rem); }
    .archive-pager { margin-top: clamp(1.4rem,2.4vw,2rem); display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
    .pager-btn.is-disabled { opacity: 0.42; pointer-events: none; }

    /* BLOG ARCHIVE CARDS */
    .blog-post-card {
      display: flex; flex-direction: column; text-decoration: none; color: inherit;
      border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
      background: linear-gradient(160deg,rgba(196,160,80,0.04) 0%,rgba(196,160,80,0.01) 100%);
      transition: border-color 0.28s, transform 0.28s, box-shadow 0.28s;
      position: relative;
      /* Grain texture */
      --card-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .blog-post-card::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
      background-image: var(--card-noise); opacity: 0.03; mix-blend-mode: overlay; z-index: 5;
    }
    .blog-post-card:hover {
      border-color: rgba(196,160,80,0.42);
      transform: translateY(-5px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(196,160,80,0.18), 0 6px 24px rgba(184,145,42,0.12);
    }
    .blog-post-img {
      aspect-ratio: 10/3; background-size: contain; background-color: #0d0b05;
      position: relative; overflow: hidden; flex-shrink: 0;
    }
    .blog-post-img::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 45%, rgba(6,5,0,0.6) 100%);
    }
    .blog-post-cat {
      position: absolute; bottom: 0.75rem; left: 0.75rem; z-index: 2;
      font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: #0c0b09; font-weight: 600;
      background: linear-gradient(135deg,#c9a94a,#b8912a);
      border-radius: var(--radius-pill); padding: 0.25rem 0.65rem;
    }
    .blog-post-body {
      padding: clamp(1rem,1.8vw,1.35rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1;
    }
    .blog-post-date { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); }
    .blog-post-title {
      font-size: clamp(1rem,1.3vw,1.25rem); font-weight: 600;
      color: var(--text); line-height: 1.3; margin: 0;
      transition: color 0.2s;
    }
    .blog-post-card:hover .blog-post-title { color: var(--gold-pale); }
    .blog-post-excerpt {
      font-size: 0.88rem; line-height: 1.72; color: var(--body-color); margin: 0; flex: 1;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .blog-post-read {
      font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
      color: var(--gold-light); margin-top: auto; padding-top: 0.75rem;
      border-top: 1px solid rgba(196,160,80,0.12); transition: color 0.2s;
    }
    .blog-post-card:hover .blog-post-read { color: var(--gold-pale); }

    .section.article-hero { min-height: auto; padding-top: clamp(5.5rem, 8vh, 6.5rem); padding-bottom: clamp(1rem, 2vh, 1.5rem); }
    .article-hero .blog-post-cat { position: static; width: fit-content; padding-inline: 0.75rem; }
    .article-hero-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .article-hero-meta span {
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      padding: 0.32rem 0.72rem;
      font-size: 0.66rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      background: rgba(184,145,42,0.04);
    }

    .article-layout {
      max-width: 72rem;
      margin: 0 auto;
    }
    .article-aside {
      display: grid;
      gap: 0.9rem;
      position: sticky;
      top: calc(var(--header-h) + 1.1rem);
    }
    .article-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: linear-gradient(160deg,rgba(196,160,80,0.05),rgba(196,160,80,0.01));
      padding: 1rem;
      display: grid;
      gap: 0.6rem;
    }
    .article-card-title {
      font-size: 0.64rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-soft);
      margin-bottom: 0.2rem;
    }
    .article-author-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.8rem;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .article-author-row strong { color: var(--text); font-weight: 500; text-align: right; }
    .article-toc a {
      font-size: 0.82rem;
      color: var(--muted);
      border-bottom: 1px solid transparent;
      padding-bottom: 0.2rem;
      transition: color 0.2s, border-color 0.2s;
    }
    .article-toc a:hover { color: var(--gold-light); border-bottom-color: rgba(196,160,80,0.45); }

    .article-content {
      border: none;
      background: none;
      padding: 0;
      max-width: none;
      columns: 2;
      column-gap: clamp(3rem,5vw,5.5rem);
      column-fill: balance;
      column-rule: 1px solid rgba(196,160,80,0.12);
      counter-reset: section-counter;
    }
    .article-lead {
      column-span: all;
      font-size: clamp(1.3rem,1.6vw,1.8rem);
      color: var(--text);
      line-height: 1.6;
      margin-bottom: clamp(3rem,5vw,4.5rem);
      padding-left: 1.75rem;
      border-left: 2px solid var(--accent);
    }
    .article-content h2 {
      column-span: all;
      counter-increment: section-counter;
      margin: clamp(2.5rem,4vw,4.5rem) 0 1.5rem;
      font-size: clamp(1.6rem,2.8vw,2.6rem);
      line-height: 1.1;
      letter-spacing: -0.025em;
      padding-top: 2rem;
      border-top: 1px solid rgba(196,160,80,0.18);
      display: flex;
      align-items: baseline;
      gap: 1rem;
    }
    .article-content h2::before {
      content: counter(section-counter, decimal-leading-zero);
      font-size: 0.6em;
      color: var(--accent-soft);
      font-weight: 400;
      letter-spacing: 0.06em;
      flex-shrink: 0;
      opacity: 0.8;
    }
    .article-content p {
      margin-bottom: 1.3rem;
      font-size: clamp(0.98rem,1.05vw,1.1rem);
      line-height: 1.88;
      color: rgba(240,234,216,0.72);
      break-inside: avoid-column;
    }
    .article-content ul,
    .article-content ol {
      margin: 0 0 1.8rem;
      padding-left: 0;
      list-style: none;
      display: grid;
      gap: 0.75rem;
      break-inside: avoid-column;
    }
    .article-content li {
      color: rgba(240,234,216,0.7);
      font-size: clamp(0.96rem,1vw,1.06rem);
      line-height: 1.72;
      padding-left: 1.4rem;
      position: relative;
    }
    .article-content ul li::before {
      content: '';
      position: absolute;
      left: 0; top: 0.65em;
      width: 0.5rem; height: 1px;
      background: var(--accent);
    }
    .article-content ol { counter-reset: list-counter; }
    .article-content ol li { counter-increment: list-counter; }
    .article-content ol li::before {
      content: counter(list-counter, decimal-leading-zero);
      position: absolute;
      left: 0; top: 0;
      font-size: 0.72em;
      color: var(--accent-soft);
      font-weight: 600;
      letter-spacing: 0.03em;
      line-height: 1.9;
    }
    .article-quote {
      column-span: all;
      margin: 2.5rem 0;
      padding: 1.5rem 2rem;
      border-left: 2px solid var(--accent);
      background: rgba(184,145,42,0.07);
      color: rgba(240,234,216,0.92);
      font-size: clamp(1.2rem,1.9vw,1.55rem);
      font-style: italic;
      line-height: 1.55;
      border-radius: 0 0.5rem 0.5rem 0;
    }
    .article-note {
      column-span: all;
      margin: 2.5rem 0;
      border: 1px solid rgba(196,160,80,0.3);
      border-left: 3px solid var(--accent);
      border-radius: 0 0.6rem 0.6rem 0;
      background: rgba(184,145,42,0.05);
      padding: 1.1rem 1.4rem;
      font-size: 0.95rem;
      color: rgba(240,234,216,0.68);
      line-height: 1.7;
    }
    .article-note strong { color: var(--gold-light); }

    @media (max-width: 991px) {
      .blog-archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      /* removed .article-layout media query */
      .article-aside { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 767px) {
      .blog-archive-grid { grid-template-columns: 1fr; }
      .subpage-hero { min-height: 20rem; }
      .section.article-hero { min-height: auto; }
      .blog-page-hero { min-height: clamp(11rem,60vw,18rem); }
      .subpage-title { max-width: 12ch; }
      .article-aside { grid-template-columns: 1fr; }
      .article-content { columns: 1; }
      .article-lead { font-size: clamp(1.1rem,4vw,1.3rem); margin-bottom: 2rem; }
    }

    /* PROJEKT ALAMLEHED */
    .scatter-card { cursor: pointer; text-decoration: none; color: inherit; display: block; }

    /* PROJEKT SHARED */
    .projekt-lead { font-size: clamp(0.95rem,1.1vw,1.1rem); color: var(--muted); line-height: 1.65; max-width: 56ch; margin-top: 0.5rem; }
    .projekt-page { max-width: 72rem; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(1.2rem,2vw,2rem); }
    .projekt-topbar { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft); text-align: center; position: relative; }
    .projekt-topbar .sp-back-btn { align-self: flex-start; }
    .projekt-topbar-meta { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
    .projekt-topbar-meta .projekt-tag { display: none; }
    .projekt-topbar-title { font-size: clamp(2rem,4.5vw,3.2rem); font-weight: 600; color: var(--text); line-height: 1.1; }
    .projekt-bottom-nav { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; padding-top: 2rem; border-top: 1px solid var(--line-soft); margin-top: 1rem; }
    .projekt-layout { max-width: 72rem; margin-inline: auto; }
    .projekt-img { width: 100%; height: clamp(240px,35vw,480px); border-radius: var(--radius-card); margin-bottom: clamp(2rem,4vw,4rem); border: 1px solid var(--line-soft); }
    .projekt-body { max-width: 60ch; margin-inline: auto; text-align: center; }
    .projekt-body h2 { font-size: clamp(1.5rem,2.2vw,2rem); font-weight: 600; margin-top: 3rem; margin-bottom: 0.8rem; color: var(--text); }
    .projekt-body p { font-size: var(--body-size); line-height: 1.82; color: var(--body-color); }
    .projekt-body ul { margin: 1rem 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
    .projekt-body li { font-size: var(--body-size); color: var(--body-color); line-height: 1.7; text-align: center; }
    .projekt-body li::before { content: none; }
    .projekt-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: rgba(184,145,42,0.04); margin-bottom: 1rem; }
    .projekt-meta-item { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; text-align: center; padding: 0.4rem 0.8rem; }
    .projekt-meta-label { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    .projekt-meta-val { font-size: 0.9rem; color: var(--text); font-weight: 500; }
    .projekt-tags { display: none; }
    .projekt-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; color: var(--muted); }

    /* SERVICE PAGE - magazine layout */
    .sp-page { max-width: 62rem; margin-inline: auto; display: flex; flex-direction: column; gap: clamp(1.5rem,2.5vw,2.5rem); }
    .sp-topbar { display: flex; justify-content: space-between; align-items: center; }
    .sp-back-btn { width: auto !important; font-size: 0.75rem; padding: 0.45rem 1rem; display: inline-flex; align-items: center; gap: 0.4rem; }
    .sp-title-wrap { text-align: center; padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft); }
    .sp-title { font-size: clamp(1.9rem,4vw,3rem); font-weight: 600; color: var(--text); margin: 0; line-height: 1.1; }
    .sp-hero-banner { width: 100%; border-radius: var(--radius-card); border: 1px solid var(--line-soft); overflow: hidden; }
    .sp-hero-banner-img { width: 100%; height: auto; display: block; }
.sp-meta-box { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-card); background: rgba(184,145,42,0.04); overflow: hidden; }
    .sp-meta-item { padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.3rem; border-right: 1px solid var(--line); }
    .sp-meta-item.is-last { border-right: none; }
    .sp-meta-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
    .sp-meta-val { font-size: 0.92rem; color: var(--text); font-weight: 600; }
    .sp-body { max-width: 68ch; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
    .sp-section-heading { font-size: clamp(1.5rem,2.5vw,2.1rem); font-weight: 600; color: var(--text); margin: 3rem 0 1rem; }
    .sp-body-text { font-size: var(--body-size); line-height: 1.85; color: var(--body-color); }
    .sp-features-grid { margin: 1.6rem 0 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; width: 100%; }
    .sp-feature-card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.15rem; border: 1px solid rgba(184,145,42,0.45); border-radius: 0.6rem; background: linear-gradient(135deg, rgba(184,145,42,0.07) 0%, rgba(184,145,42,0.02) 100%); box-shadow: 0 0 0 1px rgba(184,145,42,0.08) inset; text-align: left; }
    .sp-feature-icon { flex-shrink: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(184,145,42,0.15); border: 1px solid rgba(184,145,42,0.5); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; color: var(--accent); margin-top: 0.1em; font-weight: 700; }
    .sp-feature-text { font-size: var(--body-size); color: var(--body-color); line-height: 1.6; }
    .sp-list { margin: 1.1rem auto 0; list-style: none; padding: 0; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
    .sp-list li { font-size: var(--body-size); color: var(--body-color); line-height: 1.72; display: flex; align-items: flex-start; gap: 0.6rem; text-align: left; }
    .sp-list li::before { content: '✓'; color: var(--accent); font-size: 0.72rem; flex-shrink: 0; margin-top: 0.22em; font-weight: 700; }
    .sp-divider { width: 100%; height: 1px; background: var(--line-soft); margin-top: 3rem; }
    @media (max-width: 640px) {
      .sp-meta-box { grid-template-columns: 1fr; }
      .sp-meta-item { border-right: none; border-bottom: 1px solid var(--line); }
      .sp-meta-item.is-last { border-bottom: none; }
    }

    /* BEFORE/AFTER SLIDER */
    .comparison-slider {
      position: relative;
      width: 100%;
      height: clamp(240px, 35vw, 480px);
      overflow: hidden;
      border-radius: var(--radius-card);
      border: 1px solid var(--line-soft);
      margin-bottom: clamp(2rem, 4vw, 4rem);
      user-select: none;
    }
    .comparison-slider img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-position: top;
      object-fit: cover;
    }
    .comparison-slider .img-before {
      z-index: 1;
    }
    .comparison-slider .img-after {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 2;
      clip-path: inset(0 0 0 50%);
    }
    .comparison-slider .img-after img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-position: top;
      object-fit: cover;
    }
    .comparison-slider input[type="range"] {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: transparent;
      appearance: none;
      z-index: 3;
      cursor: col-resize;
      margin: 0;
    }
    .comparison-slider input[type="range"]::-webkit-slider-thumb {
      appearance: none; width: 4px; height: 100vh; background: var(--accent);
      box-shadow: 0 0 20px rgba(0,0,0,0.5);
    }
    .comparison-slider .slider-handle {
      position: absolute;
      top: 0; bottom: 0; left: 50%;
      width: 2px;
      background: var(--accent);
      z-index: 2;
      pointer-events: none;
      transform: translateX(-50%);
    }
    .comparison-slider .slider-handle::after {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      width: 40px; height: 40px;
      background: var(--accent);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      display: flex; align-items: center; justify-content: center;
      color: white;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M18 8l4 4-4 4M6 8l-4 4 4 4'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 20px;
    }
    .comparison-label {
      position: absolute;
      bottom: 1rem;
      padding: 0.3rem 0.7rem;
      background: rgba(0,0,0,0.5);
      color: white;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-radius: 4px;
      z-index: 2;
      pointer-events: none;
    }
    .label-before { left: 1rem; }
    .label-after { right: 1rem; }
    .comparison-image-note { font-size: 0.72rem; color: rgba(255,255,255,0.35); text-align: center; margin-top: -1rem; margin-bottom: clamp(2rem, 4vw, 4rem); letter-spacing: 0.04em; }

    /* LEGAL PAGE */
    .legal-page {
      background: #080700;
    }
    .legal-shell {
      max-width: 64rem;
      margin-inline: auto;
      display: grid;
      gap: clamp(1rem, 2vw, 2rem);
      font-family: inherit;
    }
    .legal-breadcrumb {
      font-size: 0.72rem;
      color: rgba(240,234,216,0.55);
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }
    .legal-breadcrumb a {
      color: inherit;
      border-bottom: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .legal-breadcrumb a:hover {
      color: var(--gold-light);
      border-bottom-color: rgba(196,160,80,0.45);
    }
    .legal-breadcrumb span {
      color: rgba(240,234,216,0.35);
    }
    .legal-header {
      display: grid;
      gap: 1rem;
      padding-bottom: 0.4rem;
    }
    .legal-title {
      margin: 0;
      font-family: inherit;
      font-size: clamp(2rem, 6.2vw, 4rem);
      line-height: 1.04;
      letter-spacing: -0.02em;
      font-weight: 500;
      color: var(--text);
      text-transform: uppercase;
    }
    .legal-lead {
      max-width: 78ch;
      font-size: var(--body-size);
      line-height: 1.85;
      color: var(--body-color);
    }

    .legal-company-block {
      display: grid;
      gap: 0.2rem;
      padding-left: 0.9rem;
      border-left: 2px solid rgba(196,160,80,0.3);
    }
    .legal-company-block p {
      margin: 0;
      font-size: var(--body-size);
      line-height: 1.65;
      color: var(--body-color);
    }
    .legal-company-block strong {
      color: var(--text);
      font-weight: 500;
    }

    .legal-article {
      padding-top: clamp(0.8rem, 1.8vw, 1.2rem);
      display: grid;
      gap: clamp(2rem, 3vw, 2.8rem);
    }
    .legal-section {
      display: grid;
      gap: 0.65rem;
    }
    .legal-section h2 {
      margin: 0;
      font-family: inherit;
      font-size: clamp(1.3rem, 2.1vw, 2rem);
      color: var(--text);
      line-height: 1.3;
      letter-spacing: -0.01em;
      font-weight: 600;
    }
    .legal-section p {
      margin: 0;
      font-size: var(--body-size);
      line-height: 1.82;
      color: var(--body-color);
    }
    .legal-list {
      list-style: disc;
      margin: 0.35rem 0 0;
      padding-left: 1.2rem;
      display: grid;
      gap: 0.4rem;
    }
    .legal-list li {
      font-size: var(--body-size);
      line-height: 1.72;
      color: var(--body-color);
    }
    .legal-list strong {
      color: var(--text);
      font-weight: 500;
    }

    .legal-callout {
      padding-left: 0.9rem;
      border-left: 2px solid rgba(196,160,80,0.3);
    }
    .legal-callout p {
      font-size: var(--body-size);
      line-height: 1.82;
      color: var(--body-color);
    }
    .legal-callout a {
      color: var(--gold-light);
      border-bottom: 1px solid rgba(196,160,80,0.32);
      transition: color 0.2s, border-color 0.2s;
    }
    .legal-callout a:hover {
      color: var(--text);
      border-bottom-color: var(--gold-light);
    }

    .footer-meta a {
      color: inherit;
      border-bottom: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s;
    }
    .footer-meta a:hover {
      color: var(--gold-light);
      border-bottom-color: rgba(196,160,80,0.45);
    }

    @media (max-width: 640px) {
      .legal-title {
        /* PRIVAATSUSPOLIITIKA = 19 uppercase chars × ~0.58em = ~11em wide.
           5.5vw ensures it fits on one line at 320 px (11 × 17.6px = 194px
           vs 256px available) through 640px (11 × 35.2px = 387px vs 576px).
           Using px-equivalent vw avoids rem scaling by iOS accessibility text. */
        font-size: clamp(14px, 5.5vw, 28px);
      }
    }

    /* ═══════════════════════════════════════════════════════
       COMPREHENSIVE MOBILE IMPROVEMENTS
       ═══════════════════════════════════════════════════════ */

    /* Prevent horizontal scroll on all pages */
    html { overflow-x: hidden; }
    body { overflow-x: hidden; }

    /* Remove tap flash, speed up tap response */
    * { -webkit-tap-highlight-color: transparent; }
    a, button, input, select, textarea, label { touch-action: manipulation; }

    /* Disable CSS auto-hyphenation on headings & nav — prevents broken words
       in Estonian (lang="et" enables browser hyphenation dictionaries globally) */
    h1, h2, h3, h4, h5, h6 { hyphens: none; }
    .nav-link, .nav-trigger, .drawer-link, .drawer-parent { hyphens: none; }

    /* ── 767px: large mobile ── */
    @media (max-width: 767px) {

      /* Hero: let height follow content — no forced full-screen blank space */
      .hero { min-height: auto; padding-bottom: clamp(2rem, 7vw, 3.5rem); }
      .hero-shell { min-height: auto; }

      /* Hero: stack description + stats vertically */
      .hero-meta {
        flex-direction: column;
        gap: 2rem;
        align-items: flex-start;
        padding-bottom: clamp(1.2rem, 5vw, 2rem);
      }
      .hero-desc { max-width: 100%; }
      .hero-stats { gap: 1.8rem; justify-content: flex-start; width: 100%; }
      .stat-num { font-size: clamp(1.6rem, 5vw, 2.2rem); }
      .stat-num.is-stars { font-size: clamp(1.5rem, 4.8vw, 2rem); }

      /* Work scatter: hide decorative logo that overlaps cards */
      .scatter-scene > img[aria-hidden] { display: none; }

      /* About: limit sketch image height so it doesn't dominate */
      .about-intro-image img { max-height: 220px; }

      /* About values: keep 2-col grid at large mobile */
      .about-values { grid-template-columns: 1fr 1fr; }
      .about-value-card { flex-direction: row; align-items: flex-start; }

      /* About CTA strip: stack vertically */
      .about-cta-strip { flex-direction: column; align-items: stretch; gap: 1.2rem; }

      /* Blog post images: taller and fill properly */
      .blog-post-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }

      /* Blog book: reduce gap */
      .blog-book-layout { gap: 2rem; }

      /* Footer: stacked on tablet */
      .footer-inner { grid-template-columns: 1fr; gap: 1.8rem; }
      .footer-brand-col { align-items: center; text-align: center; }
      .footer-brand-col .footer-logo { transform: translateX(5px); }
      .footer-email-link { margin: 0 auto; }
      .footer-nav { grid-template-columns: repeat(3,1fr); width: 100%; gap: 0.5rem 1.5rem; }
      .footer-meta { gap: 0.65rem; }

      /* Accordion: bigger tap targets */
      .acc-trigger { min-height: 52px; padding: 1rem; }
      .acc-num { font-size: 1.1rem; width: 1.8rem; }
      .acc-body-inner { padding-left: 1rem; }

      /* Navigation drawer: bigger tap area */
      .drawer-link, .drawer-parent { min-height: 48px; }
      .drawer-inner { gap: 0.45rem; }

      /* Contact items: bigger touch target */
      .ci-item { padding: 1.1rem 0; min-height: 52px; }

      /* Archive filter chips: easier to tap */
      .archive-chip { padding: 0.55rem 1rem; min-height: 40px; }

      /* Project bottom nav: stack buttons */
      .projekt-bottom-nav { flex-direction: column; }
      .projekt-bottom-nav .button-pill { justify-content: center; }

      /* Info cards grid: ensure no overflow */
      .card-grid-2 { gap: 0.8rem; }
      .info-card { min-height: auto; }

      /* Service card stage: max width on mobile */
      .svc-card-stage { width: min(520px, 90vw); }
    }

    /* ── 480px: small mobile ── */
    @media (max-width: 480px) {

      /* Custom spacing for small screens */
      :root {
        --section-y: clamp(2.8rem, 10vw, 4rem);
        --page-x: clamp(1rem, 5vw, 1.4rem);
      }

      /* Hero title: more compact on small screens */
      .hero-title { font-size: clamp(2.1rem, 9vw, 3rem); max-width: 14ch; }

      /* Hero stats: tighter column gaps on small screens */
      .hero-stats { gap: 0; }
      .stat-num { font-size: clamp(1.3rem, 5vw, 1.8rem); }
      .stat-num.is-stars { font-size: clamp(1rem, 3.8vw, 1.4rem); letter-spacing: 0; }
      .stat-label { font-size: 0.58rem; }

      /* Hero buttons: full-width column */
      .hero-btns { flex-direction: column; width: 100%; gap: 0.65rem; }
      .hero-btns .button-pill { justify-content: center; padding: 0.92rem 1.4rem; font-size: 0.73rem; }

      /* Undo blanket 100% button width, be explicit where full-width applies */
      .button-pill { width: auto; }
      .hero-btns .button-pill,
      .cf-submit-btn,
      .drawer-cta .button-pill,
      .projekt-bottom-nav .button-pill { width: 100%; }

      /* CTA actions: stack */
      .cta-actions { flex-direction: column; gap: 0.65rem; width: 100%; }
      .cta-actions .button-pill { justify-content: center; width: 100%; }
      .cta-shell { text-align: center; }
      .avatar { margin-inline: auto; }
      .cta-title { text-align: center; }

      /* About/Blog CTA strip buttons: full-width on small screens */
      .about-cta-strip > div .button-pill { width: 100%; justify-content: center; }

      /* Footer: keep 2-col layout (like Investland Bali style) */
      .footer-nav { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.5rem; }
      .footer-meta { font-size: 0.72rem; }
      .footer-logo { width: clamp(100px, 28vw, 140px); }
      /* Footer links: smaller font so 2-col fits comfortably on phone */
      .footer-links a { font-size: 0.75rem; min-height: 36px; }
      .footer-group h4 { font-size: 0.63rem; }

      /* About section */
      .about-values { grid-template-columns: 1fr; }
      .about-value-card { flex-direction: column; }
      .about-intro-stats { gap: 1rem; }
      .about-stat-num { font-size: clamp(1.5rem, 5.5vw, 2rem); }
      .about-intro-image img { max-height: 160px; }

      /* Service card deck */
      .svc-card-stage { height: clamp(240px, 60vw, 300px); width: min(480px, 90vw); }
      .svc-deck-content p { -webkit-line-clamp: 4; }
      .svc-deck-btn { width: 2.6rem; height: 2.6rem; }
      .svc-left { padding-right: 0; }
      .svc-desc { font-size: clamp(0.94rem,2.8vw,1rem); }

      /* Work scatter cards - keep 100% width in 2-col grid, just reduce image height */
      .sc-img, .sc-iframe-container { height: 90px; }
      .sc-iframe-container iframe { transform: scale(calc(140 / 900)) translate3d(0,0,0) !important; }
      .sc-info { padding: 0.4rem 0.6rem; }
      .sc-name { font-size: 0.72rem; }

      /* Scatter center text */
      .scatter-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
      .scatter-hint { font-size: 0.7rem; }

      /* Blog post images: squarer on small screens */
      .blog-post-img { aspect-ratio: 5/3; }

      /* Blog archive chips: wrap nicely */
      .archive-controls { gap: 0.4rem; }
      .archive-chip { padding: 0.45rem 0.8rem; font-size: 0.66rem; }

      /* Comparison slider */
      .comparison-slider { height: clamp(180px, 52vw, 300px); }
      .comparison-slider .slider-handle { background: transparent; }
      .comparison-slider .slider-handle::after {
        width: 26px; height: 26px;
        background-size: 14px;
        background-color: var(--accent);
        box-shadow: 0 1px 6px rgba(0,0,0,0.35);
      }
      .comparison-slider input[type="range"]::-webkit-slider-thumb { width: 44px; opacity: 0; }
      .comparison-slider input[type="range"]::-moz-range-thumb { width: 44px; opacity: 0; }

      /* Accordion */
      .acc-body-inner { padding-left: 0.7rem; }
      .acc-title { font-size: 0.88rem; }

      /* Contact: reduced top padding */
      .contact-left { padding-top: clamp(2rem, 6vw, 3rem); }
      .contact-right { padding-top: clamp(2rem, 6vw, 3rem); }
      .cf-card-title { font-size: 1.1rem; }

      /* Section labels */
      .section-label { font-size: 0.67rem; }

      /* Projekt & service pages */
      .projekt-topbar-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
      .sp-title { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }

      /* Blog post title in cards */
      .blog-post-title { font-size: 1rem; }
    }

    /* ── 380px: very small phones (iPhone SE etc) ── */
    @media (max-width: 380px) {
      :root { --page-x: 1rem; }
      .hero-title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
      /* Keep scatter cards at 100% grid-cell width, reduce image height only */
      .sc-img, .sc-iframe-container { height: 75px; }
      .sc-iframe-container iframe { transform: scale(calc(120 / 900)) translate3d(0,0,0) !important; }
      .svc-card-stage { height: clamp(210px, 55vw, 255px); }
      .footer-nav { gap: 1.1rem; }
      .scatter-title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
      /* Stars even tighter on very small screens */
      .stat-num.is-stars { font-size: clamp(0.9rem, 3.5vw, 1.2rem); }
    }

    /* ── TOUCH TARGETS & LAYOUT POLISH ── */

    /* When services layout collapses to 1 col, remove the RTL side-padding */
    @media (max-width: 860px) {
      .svc-left { padding-right: 0; }

      /* Hamburger: ensure minimum 44×44px tap area */
      .menu-toggle { width: 2.75rem; height: 2.75rem; }

      /* Lang button: bump to 44px minimum height */
      .lang-btn { min-height: 44px; padding-inline: 0.75rem; }
    }

    @media (max-width: 767px) {
      /* Hero buttons: stack at 767px, not just 480px */
      .hero-btns { flex-direction: column; gap: 0.65rem; margin-top: 0; }
      .hero-btns .button-pill { width: 100%; justify-content: center; }

      /* Portfolio tabs: 44px touch target */
      .ptab { min-height: 44px; padding-inline: 1.1rem; }

      /* Archive filter chips: 44px touch target */
      .archive-chip { min-height: 44px; }

      /* Contact social buttons: 44px touch target */
      .ci-soc-btn { min-height: 44px; padding: 0.5rem 1rem; }

      /* Team social icon links: 44px touch target */
      .team-social { width: 2.75rem; height: 2.75rem; }

      /* Service deck nav buttons: 44px */
      .svc-deck-btn { width: 2.75rem; height: 2.75rem; }

      /* Service page back button: easier to tap */
      .sp-back-btn { min-height: 44px; }
    }

    @media (max-width: 480px) {
      /* Keep deck nav buttons at 44px (prevent 480px block from shrinking them) */
      .svc-deck-btn { width: 2.75rem; height: 2.75rem; }
    }

    /* Mobile layout stability hotfixes (2026-04) */
    @media (max-width: 860px) {
      .svc-layout {
        direction: ltr;
        grid-template-columns: 1fr;
        gap: clamp(1.1rem, 4.5vw, 1.8rem);
      }
      .svc-right {
        width: 100%;
        align-items: stretch;
      }
      .svc-card-frame {
        width: 100%;
        max-width: 100%;
        padding: 6px;
      }
      .svc-card-stage {
        width: 100%;
        max-width: 100%;
        height: clamp(270px, 66vw, 360px);
      }
      .svc-deck-content {
        padding: clamp(1rem, 3.8vw, 1.35rem);
      }
      .svc-deck-content p {
        -webkit-line-clamp: 3;
        line-height: 1.65;
      }
      .svc-deck-logo { height: 1.25rem; }
    }

    @media (max-width: 767px) {
      .hero {
        height: auto;
        min-height: calc(100svh - var(--header-h));
        overflow: clip;
        padding-top: clamp(1rem, 2.8vw, 1.8rem);
        padding-bottom: clamp(2rem, 6vw, 3rem);
      }
      .hero-shell {
        height: auto;
        min-height: calc(100svh - var(--header-h) - clamp(1rem, 2.8vw, 1.8rem) - clamp(2rem, 6vw, 3rem));
        align-content: space-between;
        gap: clamp(0.85rem, 3.8vw, 1.3rem);
      }
      .hero-meta {
        padding-bottom: clamp(0.6rem, 2.8vw, 1.2rem);
        gap: 1rem;
      }

      /* Force projects section into a compact mobile flow after later desktop rules */
      .scatter-scene {
        height: auto;
        min-height: 0;
        overflow: visible;
        perspective: none;
        padding: clamp(3.2rem, 10vw, 4.5rem) var(--page-x);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        align-items: start;
        align-content: start;
      }
      .scatter-bg { display: none; }
      .scatter-scene > img[aria-hidden] { display: none !important; }
      .scatter-center {
        position: static;
        grid-column: 1 / -1;
        padding: 0;
        margin-bottom: 0.4rem;
      }
      .scatter-card,
      .scatter-card.is-visible,
      .scatter-card:hover {
        position: relative;
        inset: auto;
        width: 100%;
        opacity: 1;
        margin-top: 0 !important;
        transform: none !important;
      }
      .sc-5 {
        grid-column: 1 / -1;
        max-width: 280px;
        margin-inline: auto;
      }
    }

    @media (max-width: 640px) {
      .legal-title {
        /* Prevent browser from hyphenating long Estonian compound words.
           lang="et" on <html> triggers auto-hyphenation without this. */
        hyphens: none;
        word-break: normal;
        overflow-wrap: normal;
      }
      .legal-company-block p,
      .legal-lead,
      .legal-section p,
      .legal-list li {
        overflow-wrap: anywhere;
      }
    }

    /* ════════════════════════════════════════════════════════════
       MOBILE UX REDESIGN — premium spacing, hierarchy & clarity
       ════════════════════════════════════════════════════════════ */

    @media (max-width: 767px) {

      /* ── 1. HERO LAYOUT: reorder desc → stats (trust) → buttons ──
         display:contents unwraps the plain inner div so .hero-desc and
         .hero-btns become direct flex children of .hero-meta,
         enabling CSS order without touching the HTML. */
      .hero-meta > div:not(.hero-stats) {
        display: contents;
      }
      .hero-desc  { order: 1; }
      .hero-stats { order: 2; }
      .hero-btns  { order: 3; }

      /* ── 2. HERO SPACING — more breathing room ── */
      .hero-meta {
        gap: 2rem;
        /* padding-bottom already set via existing rule; keep it */
      }
      .hero-shell { gap: 2rem; }

      /* ── 3. HERO DESCRIPTION — better readability ── */
      .hero-desc {
        font-size: 0.93rem;
        line-height: 1.7;
        max-width: 36ch;
        color: rgba(168,156,126,0.82); /* slightly lighter than muted for easier scan */
      }

      /* ── 4. TRUST STATS — framed section so they stand out ── */
      .hero-stats {
        padding-block: 1.25rem;
        border-top: 1px solid rgba(196,160,80,0.18);
        border-bottom: 1px solid rgba(196,160,80,0.18);
        background: rgba(184,145,42,0.025);
        border-radius: 0.5rem;
        padding-inline: 0.25rem;
      }

      /* ── 5. PRIMARY vs SECONDARY CTA — clear visual hierarchy ── */
      /* Primary: larger, stronger glow, dominant */
      .hero-btns .button-pill:not(.is-outline) {
        padding: 1rem 1.5rem;
        min-height: 3.25rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        box-shadow:
          0 6px 28px rgba(184,145,42,0.38),
          0 2px 10px rgba(184,145,42,0.22),
          0 0 0 1px rgba(196,160,80,0.15);
      }
      /* Secondary: clearly subordinate — smaller, muted border and text */
      .hero-btns .button-pill.is-outline {
        padding: 0.85rem 1.3rem;
        min-height: 3rem;
        border-color: rgba(196,160,80,0.3);
        color: rgba(240,234,216,0.6);
        font-size: 0.67rem;
      }

      /* ── 6. SERVICES SECTION — hide extra paragraphs to reduce scanning load ── */
      .svc-desc-more { display: none; }

      /* Better line-height on the one visible paragraph */
      .svc-left .svc-desc {
        line-height: 1.78;
        font-size: 0.95rem;
      }

      /* ── 7. GENERAL SECTION BREATHING ROOM ── */
      .section { padding-block: clamp(4rem,14vw,5.5rem); }

      /* ── 8. PROJECT CARDS: single centered column ── */
      /* Override all 2-column grid rules set earlier */
      .scatter-scene {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
      }
      /* Remove the special narrow/centered treatment on sc-5 in 1-col layout */
      .sc-5 {
        grid-column: auto !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        display: block !important;
      }

    } /* end @media 767px */

    /* ══════════════════════════════════════════════════════════════
       MOBILE APP-LIKE POLISH — clean service pages + full UX lift
       ══════════════════════════════════════════════════════════════ */

    /* ── Dash removal at ALL mobile/tablet sizes (≤860px) ── */
    @media (max-width: 860px) {

      /* Features grid: single column on mobile */
      .sp-features-grid { grid-template-columns: 1fr; gap: 0.65rem; }

      /* Tertiary list on mobile — keep left-aligned block */
      .sp-list { align-items: flex-start; }
      .sp-list li { font-size: 0.95rem; }

      /* Center-align the whole body column */
      .sp-body {
        text-align: center;
        align-items: center;
        max-width: 100%;
      }

      /* Better service page meta strip on mobile */
      .sp-meta-box { border-radius: 0.75rem; }
      .sp-meta-item { padding: 1rem 1.2rem; }
      .sp-meta-val { font-size: 0.88rem; }
      .sp-meta-label { font-size: 0.6rem; }

      /* Service page heading: more impact */
      .sp-section-heading {
        font-size: clamp(1.35rem, 5.5vw, 1.85rem);
        line-height: 1.1;
        margin: 2rem 0 0.85rem;
      }

      /* Body text: better mobile reading size */
      .sp-body-text { font-size: 0.94rem; line-height: 1.8; }

    } /* end @media 860px */

    /* ── Full app-like UX lift at ≤767px ── */
    @media (max-width: 767px) {

      /* Hero: tighter tracking for native-app-style impact */
      .hero-title { letter-spacing: -0.038em; }

      /* Breadcrumb: subtle brand tag, not a nav element */
      .breadcrumb { font-size: 0.72rem; opacity: 0.5; }

      /* Stats: balanced sizing */
      .stat-num { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
      .stat-label { font-size: 0.6rem; letter-spacing: 0.08em; }

      /* Scatter / project cards: taller image in single-column layout */
      .sc-img { height: 150px; }
      .sc-iframe-container { height: 150px; }
      .sc-iframe-container iframe {
        transform: scale(calc(190 / 900)) translate3d(0,0,0) !important;
      }
      .sc-info { padding: 0.7rem 0.9rem 0.85rem; }
      .sc-name { font-size: 0.88rem; margin-top: 0.2rem; }
      .sc-tag { font-size: 0.62rem; }

      /* Service deck: refined card proportions */
      .svc-deck-content { gap: 0.5rem; }
      .svc-deck-content h3 { font-size: clamp(1rem, 4.5vw, 1.2rem); }
      .svc-deck-content p { font-size: 0.88rem; line-height: 1.65; }

      /* Contact form: app-like rounded inputs */
      .cf-input {
        border-radius: 0.75rem;
        padding: 0.88rem 1rem;
        font-size: 0.95rem;
      }
      .cf-field { margin-bottom: 1.2rem; }
      .cf-submit-btn { padding: 0.9rem; min-height: 3.25rem; }

      /* Mobile drawer: native app feel */
      .drawer-inner { gap: 0.38rem; padding-top: 1.1rem; }
      .drawer-link, .drawer-parent {
        padding: 0.9rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.8rem;
      }

      /* Scatter title: tighter tracking */
      .scatter-title { letter-spacing: -0.025em; }

      /* Section label: slightly more refined spacing */
      .section-label { letter-spacing: 0.12em; margin-bottom: 0.8rem; }

      /* Team bio: easier reading */
      .team-bio { font-size: 0.88rem; line-height: 1.72; }

      /* About CTA strip text: better mobile scale */
      .about-cta-text h3 { font-size: clamp(1rem, 4.5vw, 1.2rem); }
      .about-cta-text p { font-size: 0.88rem; }

    } /* end app-like 767px */

    /* ══════════════════════════════════════════════════════════════
       MOBILE APP-LIKE UX — Phase 3: smart nav, touch feedback, targets
       ══════════════════════════════════════════════════════════════ */

    /* 1. Header smooth hide/reveal transition (all viewports; JS drives the class) */
    .site-header {
      transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Hide class — only applied on mobile via JS guard */
    .site-header.is-nav-hidden {
      transform: translateY(-100%);
    }
    /* Desktop: never hide regardless of scroll */
    @media (min-width: 861px) {
      .site-header.is-nav-hidden {
        transform: none !important;
      }
    }

    /* 2. Anchor targets visible below sticky header */
    :target {
      scroll-margin-top: calc(var(--header-h) + 0.75rem);
    }

    /* 3. Touch target improvements — elements not yet at 48 × 48 px */
    @media (max-width: 860px) {

      /* Footer nav links: tall enough to tap comfortably */
      .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 0.83rem;
      }

      /* Footer group headings: give visual breathing room */
      .footer-group h4 {
        margin-bottom: 0.3rem;
      }

      /* Lang dropdown options: bigger tap zone */
      .lang-option {
        min-height: 48px;
        padding-block: 0.9rem;
      }

      /* CTA buttons in nav / drawer */
      .nav-cta .button-pill,
      .drawer-cta .button-pill {
        min-height: 48px;
      }

      /* Blog post cards: bigger read-more tap zone */
      .blog-post-read {
        min-height: 40px;
        display: flex;
        align-items: center;
      }

      /* Projekt / service back button */
      .sp-back-btn {
        min-height: 48px;
      }
    }

    /* 4. Active / press visual feedback for touch (mobile only) */
    @media (max-width: 860px) {

      /* Cards: subtle scale-down on press */
      .scatter-card:active,
      .portfolio-card:active,
      .about-value-card:active,
      .info-card:active,
      .blog-post-card:active {
        transform: scale(0.982);
        transition: transform 0.1s ease;
      }

      /* Drawer links: gold tint on press */
      .drawer-link:active,
      .drawer-parent:active {
        background: rgba(184, 145, 42, 0.14);
        border-color: rgba(196, 160, 80, 0.55);
        color: var(--gold-light);
      }

      /* Accordion rows */
      .acc-trigger:active {
        background: rgba(184, 145, 42, 0.10);
      }

      /* Buttons: stronger press */
      .button-pill:active {
        transform: scale(0.94);
        transition: transform 0.1s ease;
      }

      /* Footer links: subtle highlight */
      .footer-links a:active {
        color: var(--gold-light);
      }

      /* Panel links in mega-dropdown */
      .panel-link:active {
        background: rgba(184, 145, 42, 0.10);
      }
    }

    /* ═══════════════════════════════════════════════════════════════════
       MOBILE-FIRST STRUCTURAL REFACTOR — Phase 5
       ALL rules are strictly wrapped in @media (max-width: 768px).
       No viewport ≥1024px is altered by anything below this comment.
       ═══════════════════════════════════════════════════════════════════ */

    @media (max-width: 768px) {

      /* ── 1. STANDARDISED 20px GUTTER ─────────────────────────────────
         Override the fluid clamp() gutter with a consistent native-app
         20px gutter across the full ≤768px range.
         (Existing code only reduces --page-x at ≤480px.)              */
      :root { --page-x: 20px; }

      /* ── 2. GLOBAL HYPHENATION & WORD-BREAK SURGERY ──────────────────
         lang="et" on <html> activates the browser's Estonian hyphenation
         dictionary globally. Block all hyphens for every element inside
         the mobile viewport; the !important wins over any inherited value
         from the user-agent stylesheet or parent rules.                 */
      * {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
      }
      /* word-break: keep-all prevents mid-word breaks in block text.
         For Latin/Estonian this is functionally the same as 'normal' but
         makes the intent explicit and guards against future overrides.  */
      h1, h2, h3, h4, h5, h6,
      p, li,
      .nav-link, .drawer-link, .drawer-parent,
      .footer-links a, .section-label { word-break: keep-all; }

      /* ── 3. PRIVAATSUSPOLIITIKA — single-line guarantee ──────────────
         The 640px block already scales the font; white-space: nowrap
         here ensures the word NEVER wraps across lines at any ≤768px
         viewport width. The parent must not clip it.                   */
      .legal-title {
        white-space: nowrap;
        font-size: clamp(13px, 5.1vw, 26px);
        overflow: visible;
      }
      /* Guard: prevent the layout container from hiding the title      */
      .legal-header,
      .legal-shell { overflow-x: visible; }

      /* ── 4. HERO TITLE — graceful clamp across 320–768px ────────────
         The 991px rule leaves .hero-title at ~78px at exactly 768px.
         This clamp scales from ~60px at 768px down to ~30px at 320px
         and is naturally overridden for ≤380px by the later cascade.  */
      .hero-title {
        font-size: clamp(1.9rem, 9vw, 3.8rem);
        line-height: 0.96;
        letter-spacing: -0.04em;
        max-width: 13ch;
      }

      /* ── 5. STRUCTURAL FLEX-COLUMN STACKS ───────────────────────────
         These layouts already collapse via grid rules at ≥860px/991px;
         the flex-direction: column + order properties here satisfy the
         spec requirement that all structural mobile rules live inside a
         @media (max-width: 768px) block, and make the reading order
         explicit rather than relying on DOM source order alone.        */

      /* SERVICES — LTR single-column (desktop uses direction:rtl flip) */
      .svc-layout {
        display: flex !important;
        flex-direction: column !important;
        direction: ltr !important;
        gap: clamp(1.2rem, 5vw, 2rem);
      }

      /* ABOUT INTRO — text headline first (order:1), image below (order:2) */
      .about-intro {
        display: flex !important;
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
      }
      .about-intro-text  { order: 1; }
      .about-intro-image {
        order: 2;
        border-left: none !important;
        border-top: 1px solid var(--line);
        padding-left: 0 !important;
        padding-top: 1.5rem;
        justify-content: center;
      }
      .about-intro-stats {
        order: 3;
        border-left: none !important;
        border-top: 1px solid var(--line);
        padding-left: 0 !important;
        padding-top: 1.4rem;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 1.2rem;
      }

      /* HERO — ensure CTA buttons clear the browser's bottom toolbar */
      .hero { padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)); }
      .hero-meta { padding-bottom: 0; }

      /* FOOTER — brand centered on top, two columns below */
      .footer-inner {
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.5rem;
      }
      .footer-brand-col { align-items: center; text-align: center; }
      .footer-brand-col .footer-logo { transform: translateX(5px); }
      .footer-email-link { margin: 0 auto; }
      .footer-nav { display: none; }

      /* CTA BAND — avatar → headline → buttons (vertical) */
      .cta-shell {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
      }
      .cta-actions { justify-content: flex-start; width: 100%; }

      /* CONTACT — info panel (left) stacks above the form (right) */
      .contact-grid {
        display: flex !important;
        flex-direction: column;
      }
      .contact-left  { order: 1; border-right: none !important; border-bottom: 1px solid var(--line-soft); }
      .contact-right { order: 2; }

      /* ── 6. GALLERY — single-column vertical stack ───────────────────
         Earlier 767px blocks set grid-template-columns: 1fr !important;
         this 768px rule ensures the rule fires one pixel earlier and
         provides the canonical specification-compliant override.        */
      .scatter-scene {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
      }
      .sc-5 {
        grid-column: auto !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
      }

      /* ── 7. BLOG ARCHIVE — single-column at ≤768px ──────────────────*/
      .blog-archive-grid { grid-template-columns: 1fr; }

      /* ── 8. SECTION GUTTER STANDARDISATION ──────────────────────────
         Force all .section containers to use the --page-x (20px) gutter
         so padding is consistent across every page section.            */
      .section {
        padding-left: var(--page-x) !important;
        padding-right: var(--page-x) !important;
      }

    } /* end @media (max-width: 768px) */


  .card-wrap {
    position: absolute; /* Replaces absolute from old svc-deck-card */
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, box-shadow 0.25s;
    will-change: transform, opacity;
    cursor: pointer;
    text-decoration: none;
  }

  /* ── outer glow ring ── */
  .card-outer-glow {
    position: absolute;
    inset: -20px;
    border-radius: 28px;
    background: transparent;
    box-shadow: 0 0 60px 10px rgba(180,130,20,0);
    transition: box-shadow 0.3s ease;
    pointer-events: none;
    z-index: 0;
  }
  .card-wrap:hover .card-outer-glow {
    box-shadow: 0 0 80px 20px rgba(180,130,20,0.18);
  }

  .card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(200,160,40,0.35);
    transform-style: preserve-3d;
    background: rgba(0,0,0,0.35); /* Fallback */
  }

  /* ── base dark gradient background ── */
  .card-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 55% at 62% 28%, #5c4010 0%, #2e1e04 45%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 15% 75%, #3a2800 0%, transparent 60%),
      radial-gradient(ellipse 40% 30% at 85% 80%, #1a1000 0%, transparent 50%),
      #080602;
    border-radius: 18px;
  }

  /* ── noise texture ── */
  .card-noise {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  /* ── iridescent shimmer layer ── */
  .card-iridescent {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    mix-blend-mode: color-dodge;
    transition: opacity 0.3s ease;
    pointer-events: none;
    filter: blur(12px);
  }
  .card-wrap:hover .card-iridescent {
    opacity: 0.22;
  }

  /* ── specular mouse-follow highlight ── */
  .card-specular {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.25s ease;
    mix-blend-mode: screen;
    filter: blur(4px);
  }
  .card-wrap:hover .card-specular {
    opacity: 1;
  }

  /* ── animated shimmer sweep ── */
  .card-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,210,80,0.04) 35%,
      rgba(255,230,120,0.12) 50%,
      rgba(255,210,80,0.04) 65%,
      transparent 80%
    );
    background-size: 300% 100%;
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  @keyframes shimmer {
    0%   { background-position: 200% 0; opacity: 0.5; }
    50%  { background-position: -100% 0; opacity: 1; }
    100% { background-position: -400% 0; opacity: 0.5; }
  }

  /* ── border glow on hover ── */
  .card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 1px solid rgba(200,160,40,0);
    box-shadow: inset 0 0 30px rgba(200,150,20,0);
    transition: border-color 0.3s, box-shadow 0.3s;
    pointer-events: none;
  }
  .card-wrap:hover .card::after {
    border-color: rgba(220,175,50,0.5);
    box-shadow: inset 0 0 40px rgba(200,150,20,0.12);
  }

  /* ── content ── */
  .card-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(1.4rem,3vw,2.2rem);
    box-sizing: border-box;
  }

  .card-tag {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(196,160,80,0.85);
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .card-title {
    font-size: clamp(1.1rem,1.6vw,1.45rem);
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .card-body {
    font-size: var(--body-size);
    font-weight: 400;
    color: var(--body-color);
    line-height: 1.75;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
  }

  .card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(196,160,80,0.15);
  }

  .card-link {
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gold-light);
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
  }
  .card-link:hover { color: #f5d060; }

  .card-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(200,160,40,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200,160,40,0.7);
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    font-family: Georgia, serif;
    background: rgba(0,0,0,0.3);
  }

  /* ── floating particles ── */
  .particles {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
  }
  .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255,215,80,0.6);
    animation: float-up linear infinite;
    opacity: 0;
  }
  @keyframes float-up {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-300px) translateX(var(--dx, 20px)); opacity: 0; }
  }

  /* overrides for !important */
  .card-wrap:hover .card-iridescent { opacity: 0.21 !important; }
  .card-wrap:hover .card-outer-glow { box-shadow: 0 0 40px 10px rgba(180,130,20,0.10) !important; }

  /* Mobile-only hotfixes (no desktop impact) */
  @media (max-width: 768px) {

    /* Blog header image: keep full banner visible with source aspect ratio */
    .blog-page-hero {
      height: calc(100vw / 7.65532);
      min-height: 0;
    }
    .blog-page-hero-bg {
      background-size: contain;
      background-position: center top;
    }

    /* Homepage first section: lock hero to exactly one viewport below header */
    .hero {
      height: calc(100svh - var(--header-h));
      min-height: calc(100svh - var(--header-h));
    }
    @supports (height: 100dvh) {
      .hero {
        height: calc(100dvh - var(--header-h));
        min-height: calc(100dvh - var(--header-h));
      }
    }
    .hero-shell {
      height: 100%;
      min-height: 100%;
    }

    /* Scatter iframe cards: fit full desktop preview without black side gaps */
    .sc-iframe-container iframe {
      width: 300% !important;
      height: 300% !important;
      transform: scale(0.3333333333) translate3d(0,0,0) !important;
      transform-origin: 0 0;
    }
  }

    /* ======================================================================
       NEWGENRE-STYLE REDESIGN -- homepage components
       ====================================================================== */

    /* -- Shared section wrapper -- */
    .ng-section { position: relative; }
    .ng-section-inner { max-width: 96rem; margin-inline: auto; padding: var(--section-y) var(--page-x); }
    .ng-section-header { margin-bottom: clamp(2rem,4vw,4rem); }
    .ng-section-header h2 { margin-top: 0.5rem; }

    /* -- MARQUEE BAND -- */
    .marquee-band { width: 100%; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.85rem 0; }
    .marquee-track { display: flex; width: max-content; animation: marquee-scroll 40s linear infinite; }
    .marquee-track--rev { animation-direction: reverse; animation-duration: 35s; }
    .marquee-inner { display: flex; align-items: center; white-space: nowrap; }
    .marquee-item { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding: 0 2.2rem; transition: color 0.2s; }
    .marquee-item:hover { color: var(--gold-light); }
    .marquee-sep { color: var(--accent); font-size: 0.42rem; flex-shrink: 0; }
    @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

    /* -- NG HERO -- */
    .ng-hero { min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + clamp(1.5rem,3vw,3rem)) var(--page-x) 0; position: relative; overflow: clip; background: var(--bg); border-bottom: 1px solid var(--line); }
    .ng-hero-meta-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: clamp(1.5rem,3vw,3rem); }
    .ng-hero-location { display: flex; align-items: center; gap: 0.7rem; }
    .ng-hero-loc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.4s ease-in-out infinite; flex-shrink: 0; }
    @keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }
    .ng-hero-title-area { position: relative; flex: 1; display: flex; align-items: center; padding-block: clamp(1rem,2vw,2rem); }
    .ng-hero-title { font-size: clamp(3.4rem,10.5vw,11.5rem); line-height: 0.92; letter-spacing: -0.03em; font-weight: 500; margin: 0; max-width: 13ch; position: relative; z-index: 2; color: var(--text); }
    .ng-hero-echo { position: absolute; top: calc(clamp(1rem,2vw,2rem) + 0.08em); left: 0.05em; font-size: clamp(3.4rem,10.5vw,11.5rem); line-height: 0.92; letter-spacing: -0.03em; font-weight: 500; max-width: 13ch; color: transparent; -webkit-text-stroke: 1px rgba(196,160,80,0.13); pointer-events: none; user-select: none; z-index: 1; }
    .ng-hero-bottom { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding-bottom: clamp(1.8rem,3vw,3.5rem); border-top: 1px solid var(--line-soft); padding-top: clamp(1.2rem,2vw,2rem); }
    .ng-hero-desc { max-width: 46ch; color: var(--muted); font-size: clamp(0.9rem,1vw,1rem); line-height: 1.78; margin: 0; }
    .ng-hero-btns { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1rem; }
    .ng-hero-stats-col { display: flex; flex-direction: column; gap: clamp(1.2rem,2vw,2rem); border-left: 1px solid var(--line); padding-left: clamp(1.5rem,2.5vw,2.5rem); }
    .ng-hero-stat { display: flex; flex-direction: column; gap: 0.2rem; text-align: right; }
    .ng-hero-stat-num { font-size: clamp(1.4rem,2.2vw,2rem); font-weight: 500; line-height: 1; color: var(--gold-light); }
    .ng-hero-stat-label { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
    @media (max-width: 767px) {
      .ng-hero-bottom { grid-template-columns: 1fr; }
      .ng-hero-stats-col { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1rem; flex-direction: row; gap: 1.5rem; }
      .ng-hero-stat { text-align: left; }
      .ng-hero-title { font-size: clamp(2.8rem,12vw,5rem); }
      .ng-hero-echo { font-size: clamp(2.8rem,12vw,5rem); }
    }

    /* -- NG SERVICES LIST -- */
    .ng-svc-section { background: linear-gradient(180deg,#0e0c07,#0a0901 35%,#0c0a04 100%); }
    .ng-svc-intro { max-width: 58ch; margin-bottom: clamp(1.8rem,3vw,3.5rem); }
    .ng-svc-intro p { font-size: clamp(0.95rem,1.1vw,1.15rem); color: var(--body-color); line-height: 1.88; }
    .ng-svc-list { border-top: 1px solid var(--line); }
    .ng-svc-row { display: grid; grid-template-columns: 2.8rem minmax(0,1.2fr) minmax(0,2fr) 1.6rem; gap: 0 clamp(1rem,2vw,2.5rem); align-items: center; padding: clamp(1rem,1.8vw,1.6rem) clamp(0.3rem,0.8vw,0.8rem); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background 0.3s, padding 0.3s; margin-inline: calc(-1 * clamp(0.3rem,0.8vw,0.8rem)); }
    .ng-svc-row:hover { background: rgba(184,145,42,0.04); }
    .ng-svc-num { font-size: 0.62rem; color: var(--accent-soft); letter-spacing: 0.08em; font-weight: 400; }
    .ng-svc-name { font-size: clamp(0.95rem,1.4vw,1.55rem); font-weight: 500; color: var(--text); transition: color 0.2s; line-height: 1.2; }
    .ng-svc-row:hover .ng-svc-name { color: var(--gold-light); }
    .ng-svc-tag-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
    .ng-svc-arrow { color: var(--accent); font-size: 1.1rem; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); justify-self: end; }
    .ng-svc-row:hover .ng-svc-arrow { transform: translateX(5px); }
    @media (max-width: 860px) {
      .ng-svc-row { grid-template-columns: 2rem 1fr 1.4rem; grid-template-rows: auto auto; gap: 0.3rem clamp(0.8rem,1.5vw,1.5rem); }
      .ng-svc-tag-desc { grid-column: 2; grid-row: 2; font-size: 0.74rem; }
      .ng-svc-arrow { grid-row: 1 / span 2; align-self: center; }
    }
    @media (max-width: 480px) { .ng-svc-tag-desc { display: none; } .ng-svc-row { grid-template-columns: 2rem 1fr 1.4rem; grid-template-rows: auto; } }

    /* -- NG WORK GRID -- */
    .ng-work-section { background: #080700; }
    .ng-work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.5rem,1.2vw,1rem); margin-top: clamp(1.5rem,3vw,3rem); }
    .ng-work-card { display: block; border-radius: 0.65rem; overflow: hidden; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; background: #0f0d04; position: relative; }
    .ng-work-card:hover { border-color: rgba(196,160,80,0.45); transform: translateY(-5px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,145,42,0.12); }
    .ng-work-img { height: clamp(160px,22vw,280px); width: 100%; overflow: hidden; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
    .ng-work-card:hover .ng-work-img { transform: scale(1.04); }
    .ng-work-info { padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--line); }
    .ng-work-tag { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-soft); flex-shrink: 0; }
    .ng-work-title { font-size: clamp(0.82rem,1vw,0.98rem); font-weight: 500; color: var(--text); flex: 1; }
    .ng-work-arrow { color: var(--accent); font-size: 0.85rem; flex-shrink: 0; transition: transform 0.25s; }
    .ng-work-card:hover .ng-work-arrow { transform: translateX(4px); }
    .ng-work-card:first-child { grid-column: 1 / -1; }
    .ng-work-card:first-child .ng-work-img { height: clamp(220px,35vw,480px); }
    @media (max-width: 600px) { .ng-work-grid { grid-template-columns: 1fr; } .ng-work-card:first-child { grid-column: auto; } }

    /* -- NG ABOUT -- */
    .ng-about-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,6vw,8rem); align-items: start; margin-top: clamp(1.5rem,3vw,3rem); }
    .ng-about-text .about-lead { font-size: clamp(1rem,1.15vw,1.2rem); color: var(--text); line-height: 1.72; margin: 0; }
    .ng-about-text p { color: var(--body-color); font-size: var(--body-size); line-height: 1.85; }
    .ng-about-sidebar { position: sticky; top: calc(var(--header-h) + 2rem); display: flex; flex-direction: column; gap: clamp(1.8rem,3vw,3rem); border-left: 1px solid var(--line); padding-left: clamp(1.8rem,3vw,3rem); }
    .ng-about-stat-item { display: flex; flex-direction: column; gap: 0.25rem; }
    .ng-about-stat-num { font-size: clamp(2rem,4vw,4rem); font-weight: 500; line-height: 1; color: var(--gold-light); }
    .ng-about-stat-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
    @media (max-width: 860px) {
      .ng-about-wrap { grid-template-columns: 1fr; }
      .ng-about-sidebar { position: static; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: clamp(1.5rem,3vw,2.5rem); flex-direction: row; flex-wrap: wrap; gap: 2rem; }
    }

    /* -- NG TEAM -- */
    .ng-team-section { margin-top: clamp(3rem,5vw,6rem); padding-top: clamp(2rem,4vw,4rem); border-top: 1px solid var(--line); }
    .ng-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,2vw,2rem); margin-top: clamp(1.5rem,2vw,2.5rem); }
    .ng-team-card { display: flex; gap: clamp(1rem,2vw,1.8rem); align-items: flex-start; padding: clamp(1.2rem,2vw,2rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(160deg,rgba(196,160,80,0.04),rgba(196,160,80,0.01)); transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .ng-team-card:hover { border-color: rgba(196,160,80,0.35); transform: translateY(-3px); }
    .ng-team-avatar { width: clamp(3.5rem,6vw,5.5rem); height: clamp(3.5rem,6vw,5.5rem); border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: rgba(184,145,42,0.06); flex-shrink: 0; display: grid; place-items: center; transition: border-color 0.3s; }
    .ng-team-card:hover .ng-team-avatar { border-color: var(--accent); }
    .ng-team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
    .ng-team-info { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
    .ng-team-name { font-size: clamp(1rem,1.3vw,1.3rem); font-weight: 500; color: var(--text); }
    .ng-team-role { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent-soft); }
    .ng-team-info p { font-size: 0.82rem; color: var(--body-color); line-height: 1.72; max-width: 32ch; margin: 0; }
    @media (max-width: 640px) { .ng-team-grid { grid-template-columns: 1fr; } }

    /* -- NG CTA STRIP -- */
    .ng-cta-strip { margin-top: clamp(3rem,5vw,5rem); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.8rem,3vw,3.5rem); background: linear-gradient(135deg,rgba(184,145,42,0.07),rgba(184,145,42,0.02)); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
    .ng-cta-strip h3 { font-size: clamp(1.3rem,2.2vw,2.6rem); font-weight: 500; margin: 0 0 0.4rem; }
    .ng-cta-strip p { font-size: var(--body-size); color: var(--body-color); margin: 0; }
    .ng-cta-btns { display: flex; gap: 0.8rem; flex-wrap: wrap; flex-shrink: 0; }
    @media (max-width: 640px) { .ng-cta-strip { flex-direction: column; align-items: flex-start; } }

    /* -- NG CONTACT -- */
    .ng-contact-section { background: #080700; }
    .ng-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,8rem); padding: clamp(4rem,7vw,8rem) var(--page-x); max-width: 96rem; margin-inline: auto; }
    .ng-contact-left { display: flex; flex-direction: column; gap: 1rem; }
    .ng-contact-left h2 { margin-top: 0.4rem; }
    .ng-contact-desc { max-width: 36ch; color: var(--body-color); line-height: 1.75; margin: 0; }
    .ng-locations { margin-top: 0.6rem; border-top: 1px solid var(--line); }
    .ng-location { display: flex; justify-content: space-between; align-items: baseline; padding: clamp(0.8rem,1.2vw,1.2rem) 0; border-bottom: 1px solid var(--line-soft); transition: padding-left 0.25s; }
    .ng-location:last-child { border-bottom: 1px solid var(--line); }
    .ng-location:hover { padding-left: 0.5rem; }
    .ng-location-name { font-size: clamp(1.1rem,1.8vw,1.7rem); font-weight: 500; color: var(--text); transition: color 0.2s; }
    .ng-location:hover .ng-location-name { color: var(--gold-light); }
    .ng-location-detail { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
    .ng-location-addr { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
    .ng-location-tag { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); border: 1px solid rgba(196,160,80,0.2); border-radius: var(--radius-pill); padding: 0.15rem 0.5rem; }
    .ng-email-link { font-size: clamp(0.88rem,1.1vw,1.1rem); color: var(--gold-light); border-bottom: 1px solid rgba(196,160,80,0.45); padding-bottom: 0.12rem; width: fit-content; transition: color 0.25s, border-color 0.25s; margin-top: 0.4rem; }
    .ng-email-link:hover { color: var(--gold-pale); border-color: var(--gold-pale); }
    .ng-contact-right { display: flex; align-items: stretch; }
    .ng-contact-right .cf-card { width: 100%; }
    @media (max-width: 860px) { .ng-contact-grid { grid-template-columns: 1fr; padding-block: clamp(3rem,6vw,5rem); } }

    /* -- NG FOOTER -- */
    .ng-footer { background: #060500; border-top: 1px solid var(--line-soft); }
    .ng-footer-marquee { border-bottom: 1px solid var(--line-soft); overflow: hidden; }
    .ng-footer-marquee .marquee-band { border: none; padding: 0.7rem 0; background: transparent; }
    .ng-footer-inner { display: grid; grid-template-columns: minmax(200px,260px) 1fr; gap: clamp(2.5rem,5vw,7rem); align-items: start; max-width: 96rem; margin-inline: auto; padding: clamp(2.5rem,4.5vw,4.5rem) var(--page-x) 0; }
    .ng-footer-locs { margin-top: 1rem; border-top: 1px solid var(--line-soft); padding-top: 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; }
    .ng-footer-loc { font-size: 0.68rem; color: rgba(240,234,216,0.42); letter-spacing: 0.05em; padding: 0.18rem 0; transition: color 0.2s; display: block; }
    .ng-footer-loc:hover { color: var(--gold-light); }
    @media (max-width: 860px) { .ng-footer-inner { grid-template-columns: 1fr; } }

    /* -- CF FORM polish -- */
    .cf-card { background: rgba(14,12,8,0.6); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(1.4rem,2.5vw,2.5rem); flex: 1; }
    .cf-success { display: none; margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.82rem; border: 1px solid transparent; }
    .cf-success.is-shown { display: block; }

    /* -- Site header polish -- */
    .site-header { background: rgba(10,9,2,0.92); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(196,160,80,0.1); }
    .brand-text { font-weight: 500; letter-spacing: 0.04em; font-size: 0.9rem; }
    .nav-link, .nav-trigger { font-size: clamp(0.6rem,0.55rem + 0.18vw,0.7rem); letter-spacing: 0.06em; font-weight: 400; }

    /* -- Reveal animation -- */
    [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
    [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

    /* ng-work-card and ng-svc-row reveal */
    .ng-work-card, .ng-svc-row {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.4s;
    }
    .ng-work-card.is-visible, .ng-svc-row.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* But also allow the hover transform when visible */
    .ng-work-card.is-visible:hover {
      transform: translateY(-5px);
    }

    /* Fix: ensure ng-svc-row hover transitions still work after reveal */
    .ng-svc-row {
      transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1), background 0.3s, border-color 0.3s;
    }

    /* ======================================================================
       LIGHT THEME OVERRIDES — Wise-style clean white
       ====================================================================== */

    /* Selection */
    ::selection { background: rgba(154,112,16,0.18); color: #111111; }

    /* Header */
    .site-header {
      background: rgba(250,250,248,0.96);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .brand-text { color: #111111; }
    .nav-link, .nav-trigger { color: #333333; opacity: 1; }
    .nav-link:hover, .nav-trigger:hover { color: var(--accent); }
    .nav-link::after, .nav-trigger::after { background: var(--accent); }
    .mega-panel {
      background: rgba(255,255,255,0.99);
      box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.07);
    }
    .panel-link .pl-title { color: #111111; }
    .panel-link small { color: #666; }
    .panel-link:hover { background: rgba(154,112,16,0.05); border-color: rgba(154,112,16,0.18); }
    .menu-toggle { border-color: rgba(0,0,0,0.2); }
    .menu-toggle-line { background: #111111; }
    .lang-btn { border-color: rgba(0,0,0,0.14); color: #111111; }
    .lang-btn:hover { border-color: var(--accent); background: rgba(154,112,16,0.05); }
    .lang-dropdown { background: rgba(255,255,255,0.99); border-color: rgba(0,0,0,0.08); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
    .lang-option { color: #111111; border-bottom-color: rgba(0,0,0,0.06); }
    .lang-option:hover { background: rgba(154,112,16,0.05); color: var(--accent); }
    .mobile-drawer { background: rgba(250,250,248,0.99); border-top-color: rgba(0,0,0,0.08); }
    .drawer-link, .drawer-parent { border-color: rgba(0,0,0,0.1); color: #111111; }
    .drawer-link:hover, .drawer-parent:hover { border-color: var(--accent); color: var(--accent); }

    /* Buttons */
    .button-pill {
      background-image: linear-gradient(135deg,#c9a94a 0%,#b8912a 40%,#9a7010 100%);
      border-color: #9a7010;
      color: #ffffff;
      box-shadow: 0 2px 12px rgba(154,112,16,0.2);
    }
    .button-pill:hover { box-shadow: 0 4px 22px rgba(154,112,16,0.32); }
    .button-pill.is-outline {
      background-image: none; background: transparent;
      color: #111111; border-color: rgba(0,0,0,0.2);
    }
    .button-pill.is-outline:hover {
      background-image: linear-gradient(135deg,#c9a94a 0%,#b8912a 40%,#9a7010 100%);
      color: #ffffff; border-color: #9a7010;
    }

    /* Hero */
    .ng-hero { background: #ffffff; }
    .ng-hero-echo { display: none; }
    .ng-hero-title { color: #111111; }
    .ng-hero-bottom { border-top-color: rgba(0,0,0,0.08); }
    .ng-hero-stats-col { border-left-color: rgba(0,0,0,0.1); }
    .ng-hero-stat-num { color: var(--accent); }

    /* Marquee */
    .marquee-band { background: #f2f1ee; border-top-color: rgba(0,0,0,0.08); border-bottom-color: rgba(0,0,0,0.08); }
    .marquee-item { color: #888888; }
    .marquee-sep { color: var(--accent); }

    /* Services section */
    .ng-svc-section { background: #f5f4f1; }
    .ng-svc-list { border-top-color: rgba(0,0,0,0.1); }
    .ng-svc-row { border-bottom-color: rgba(0,0,0,0.08); }
    .ng-svc-row:hover { background: rgba(154,112,16,0.04); }
    .ng-svc-num { color: var(--accent); opacity: 0.7; }
    .ng-svc-name { color: #111111; }
    .ng-svc-tag-desc { color: #666666; }
    .ng-svc-arrow { color: var(--accent); }

    /* Work section */
    .ng-work-section { background: #ffffff; }
    .ng-work-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.09);
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .ng-work-card:hover {
      border-color: rgba(154,112,16,0.3);
      box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(154,112,16,0.15);
      transform: translateY(-4px);
    }
    .ng-work-card.is-visible:hover { transform: translateY(-4px); }
    .ng-work-info { border-top-color: rgba(0,0,0,0.08); background: #fafaf8; }
    .ng-work-title { color: #111111; }
    .ng-work-tag { color: var(--accent); }
    .ng-work-arrow { color: var(--accent); }

    /* About section */
    .ng-about-sidebar { border-left-color: rgba(0,0,0,0.1); }
    .ng-about-stat-num { color: var(--accent); }
    .ng-team-section { border-top-color: rgba(0,0,0,0.1); }
    .ng-team-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.09);
      box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    }
    .ng-team-card:hover { border-color: rgba(154,112,16,0.28); transform: translateY(-2px); }
    .ng-team-avatar { border-color: rgba(0,0,0,0.1); background: #f5f4f1; }
    .ng-team-card:hover .ng-team-avatar { border-color: var(--accent); }
    .ng-team-name { color: #111111; }
    .ng-team-role { color: var(--accent); }
    .team-social { border-color: rgba(0,0,0,0.14); color: #666; }
    .team-social:hover { border-color: var(--accent); color: var(--accent); background: rgba(154,112,16,0.06); }

    /* CTA strip */
    .ng-cta-strip {
      background: #111111;
      border-color: transparent;
    }
    .ng-cta-strip h3 { color: #f5f4f1; }
    .ng-cta-strip p { color: rgba(245,244,241,0.65); }
    .ng-cta-strip .button-pill.is-outline { color: rgba(245,244,241,0.8); border-color: rgba(245,244,241,0.25); }
    .ng-cta-strip .button-pill.is-outline:hover { color: #ffffff; border-color: rgba(255,255,255,0.6); }

    /* Contact section */
    .ng-contact-section { background: #f5f4f1; }
    .ng-locations { border-top-color: rgba(0,0,0,0.1); }
    .ng-location { border-bottom-color: rgba(0,0,0,0.08); }
    .ng-location:last-child { border-bottom-color: rgba(0,0,0,0.1); }
    .ng-location-name { color: #111111; }
    .ng-location:hover .ng-location-name { color: var(--accent); }
    .ng-location-addr { color: #777777; }
    .ng-location-tag { color: var(--accent); border-color: rgba(154,112,16,0.22); }
    .ng-email-link { color: var(--accent); border-bottom-color: rgba(154,112,16,0.4); }
    .ng-email-link:hover { color: #7a5610; border-bottom-color: #7a5610; }
    .cf-card { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
    .cf-card-title { color: #111111; }
    .cf-label { color: #333333; }
    .cf-input { background: #fafaf8; border-color: rgba(0,0,0,0.12); color: #111111; }
    .cf-input:focus { border-color: var(--accent); background: #ffffff; outline: none; }
    .ci-label { color: #777777; }
    .ci-val { color: #111111; }
    .ci-soc-btn { border-color: rgba(0,0,0,0.14); color: #444444; }
    .ci-soc-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* Section label */
    .section-label { color: var(--accent); }
    .section-label::before { background: var(--accent); }

    /* Info card */
    .info-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }

    /* Scatter / old work section fallback */
    .scatter-scene { background: #f5f4f1; }
    .scatter-card { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
    .scatter-card:hover { border-color: var(--accent); }
    .scatter-title { color: #111111; }
    .sc-name { color: #111111; }

    /* Accordion */
    .accordion { border-color: rgba(0,0,0,0.1); }
    .acc-item { border-bottom-color: rgba(0,0,0,0.07); }
    .acc-trigger:hover { background: rgba(154,112,16,0.04); }
    .acc-item.is-open .acc-trigger { background: rgba(154,112,16,0.06); }
    .acc-title { color: #111111; }

    /* Portfolio cards */
    .portfolio-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
    .portfolio-card:hover { border-color: rgba(154,112,16,0.3); }

    /* Modal */
    .media-modal-dialog { background: #ffffff; border-color: rgba(0,0,0,0.1); }
    .media-modal-bar { background: #f5f4f1; border-top-color: rgba(0,0,0,0.08); }
    .media-modal-title { color: #333333; }
    .media-modal-close { border-color: rgba(0,0,0,0.14); color: #333333; }

    /* Footer — keep dark, restore dark-theme variables */
    .ng-footer {
      background: #111111;
      border-top-color: rgba(255,255,255,0.08);
      --text: #f0ead8;
      --muted: #a89c7e;
      --accent: #c9a94a;
      --accent-soft: #c9a94a;
      --gold-light: #e2c06a;
      --gold-pale: #f5e4a8;
      --line: rgba(255,255,255,0.12);
      --line-soft: rgba(255,255,255,0.07);
      --body-color: rgba(240,234,216,0.65);
    }
    .ng-footer .marquee-band { background: #0e0e0c; border-color: rgba(255,255,255,0.07); }
    .ng-footer .marquee-item { color: rgba(255,255,255,0.35); }
    .ng-footer .marquee-sep { color: rgba(200,160,70,0.6); }
    .ng-footer .brand-text { color: #f0ead8; }
    .ng-footer-locs { border-top-color: rgba(255,255,255,0.08); }
    .ng-footer-loc { color: rgba(255,255,255,0.35); }
    .ng-footer-loc:hover { color: #e2c06a; }
    .ng-footer .footer-meta { border-top-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); }
    .ng-footer .footer-meta a { color: rgba(255,255,255,0.4); }
    .ng-footer .footer-meta a:hover { color: #e2c06a; }
    .ng-footer .footer-social-link { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); }
    .ng-footer .footer-social-link:hover { border-color: #e2c06a; color: #e2c06a; }

    /* Hero light background — override any dark gradients */
    .ng-hero { background: #ffffff; }
    .ng-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(154,112,16,0.04) 0%, transparent 55%),
                  linear-gradient(to bottom, #ffffff 0%, #fafaf8 100%);
      pointer-events: none;
      z-index: 0;
    }
    .ng-hero-meta-top,
    .ng-hero-title-area,
    .ng-hero-bottom { position: relative; z-index: 1; }

    /* Sub-page hero areas — fix any dark sections on service/project pages */
    .section { background: var(--bg); }
    .svc-stack-section { background: var(--bg-alt) !important; }
    .scatter-scene { background: var(--bg-alt) !important; }
    .cta-band { background: var(--bg-alt) !important; }

    /* About section label lines */
    .ng-about-sidebar { border-left-color: rgba(0,0,0,0.1); }

    /* Fix orb field — hide it on light theme */
    .orb-field { display: none; }
    .hero-gradient { display: none; }