/* ============================================================
     VILSA — Homepage (hi-fi)
     Built on the Vilsa Design System tokens.
     Balanced+ intensity from the wireframe spectrum.
     ============================================================ */

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Belt-and-suspenders guard: nothing should cause horizontal scroll
     on mobile. `overflow-x: clip` (not `hidden`) is critical here,
     because `hidden` creates a new formatting context that breaks
     `position: sticky` on descendants (the utility bar + nav-wrap).
     Fallback to `hidden` for older browsers. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  img, video, iframe { max-width: 100%; }
  /* Sticky header chrome heights — referenced by .utility / .nav-wrap.
     Utility bumps on narrow viewports because the 10-language switcher wraps. */
  :root{ --utility-h: 40px; }
  @media (max-width: 900px){ :root{ --utility-h: 38px; } }
  body { overflow-x: hidden; overflow-x: clip; background: var(--vilsa-cream); color: var(--vilsa-ink); }
  /* Defensive: stop long Latvian compounds + unbreakable spans from pushing
     any block past its container on narrow viewports. Applies the modern
     "break anywhere within a word if no soft-break point exists" rule to
     every paragraph + heading without breaking normal wrapping. */
  p, h1, h2, h3, h4, h5, h6, li{ overflow-wrap: break-word; }

  img, svg { display: block; max-width: 100%; }
  ul { list-style: none; padding: 0; margin: 0; }

  /* ---------------- Buttons ---------------- */
  .btn{
    --bg: transparent; --fg: var(--vilsa-ink); --bd: var(--vilsa-ink);
    display:inline-flex; align-items:center; gap:10px;
    padding: 13px 22px;
    background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
    letter-spacing: 0.02em; cursor: pointer; text-decoration: none;
    transition: gap var(--dur-base) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    line-height: 1; white-space: nowrap;
  }
  .btn:hover{ opacity: 1; }
  .btn .arr{ display:inline-block; transition: transform var(--dur-base) var(--ease-out); }
  .btn:hover .arr{ transform: translateX(6px); }
  .btn--forest{ --bg: var(--vilsa-forest); --fg: var(--vilsa-paper); --bd: var(--vilsa-forest); }
  .btn--forest:hover{ --bg: var(--vilsa-forest-2); --bd: var(--vilsa-forest-2); }
  .btn--paper{ --bg: var(--vilsa-paper); --fg: var(--vilsa-ink); --bd: var(--vilsa-paper); }
  .btn--paper:hover{ --bg: var(--vilsa-cream); --bd: var(--vilsa-cream); }
  .btn--ghost-paper{ --bg: transparent; --fg: var(--vilsa-paper); --bd: var(--vilsa-paper); }
  .btn--ghost-paper:hover{ --bg: rgba(245, 239, 228, 0.08); }
  .btn--ghost{ --bg: transparent; --fg: var(--vilsa-ink); --bd: var(--vilsa-ink); }

  .arrow-link{
    display:inline-flex; align-items:center; gap: 10px;
    font-size: 13.5px; font-weight: 500; color: var(--vilsa-ink);
    text-decoration: none; transition: gap var(--dur-base) var(--ease-out);
    border-bottom: 1px solid var(--vilsa-ink); padding-bottom: 4px;
    line-height: 1;
  }
  .arrow-link:hover{ gap: 16px; opacity: 1; }

  /* ---------------- Top utility ---------------- */
  .utility{
    background: var(--vilsa-ink); color: var(--vilsa-paper);
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 10px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    /* Sticky: clips to top — phone/lang/brand follow scroll */
    position: sticky; top: 0; z-index: 60;
    min-height: var(--utility-h);
  }
  .utility .left{ display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }
  .utility .left b{ color: var(--vilsa-paper); font-weight: 500; letter-spacing: 0.14em;}
  .utility .right{ display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }
  .utility a{ color: var(--vilsa-stone-100); border-bottom: 1px solid transparent; padding-bottom: 1px; }
  .utility a:hover{ color: var(--vilsa-paper); border-color: var(--vilsa-paper); opacity: 1; }

  /* Mobile: drop the brandstrap + certstrap and the big lang list,
     keep only phone + email visible so the bar fits without overflow.
     The lang switcher moves into the mobile menu. */
  @media (max-width: 900px){
    .utility{ padding: 8px var(--gutter); font-size: 10px; letter-spacing: 0.10em; gap: 12px; }
    .utility .left{ gap: 10px; }
    .utility .left .ship{ display: none; }
    .utility .right{ gap: 10px; flex-wrap: nowrap; overflow: hidden; }
    .utility .lang{ display: none; }
  }
  @media (max-width: 520px){
    .utility .left b + span{ display: none; }
  }
  .utility .lang{ display:flex; gap: 6px; }
  .utility .lang a.on{ color: var(--vilsa-paper); }

  /* ---------------- Nav ---------------- */
  .nav-wrap{
    position: sticky; top: var(--utility-h); z-index: 50;
    background: rgba(26, 58, 42, 0); border-bottom: 1px solid transparent;
    transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base);
    isolation: isolate;
  }
  /* Subtle backdrop gradient so cream nav text reads cleanly over hero photo
     before scrolled state kicks in. Fades to 0 once body.scrolled. */
  .nav-wrap::before{
    content: ''; position: absolute; inset: -8px 0 -24px 0;
    background: linear-gradient(180deg, rgba(15, 27, 22, 0.55) 0%, rgba(15, 27, 22, 0.20) 60%, rgba(15, 27, 22, 0) 100%);
    pointer-events: none; z-index: -1;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  body.scrolled .nav-wrap::before{ opacity: 0; }
  body.scrolled .nav-wrap{
    background: rgba(245, 239, 228, 0.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--vilsa-stone-50);
  }
  .nav{
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 16px var(--gutter);
  }
  .nav .brand{ display:flex; align-items:center; gap: 12px; }
  .nav .brand img{ height: 28px; width: auto; filter: brightness(0) invert(1); transition: filter var(--dur-base); }
  /* On cream-blur nav (scrolled state), force the wordmark to solid ink so
     it doesn't disappear into the background — the SVG is paper-toned so
     `filter: none` left it cream-on-cream. */
  body.scrolled .nav .brand img{ filter: brightness(0); }
  .nav .brand span{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--vilsa-paper); opacity: 0.75; }
  body.scrolled .nav .brand span{ color: var(--vilsa-stone-500); }

  .nav ul.menu{
    display:flex; align-items:center; gap: 26px;
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--vilsa-paper);
  }
  body.scrolled .nav ul.menu{ color: var(--vilsa-ink); }
  .nav ul.menu a{
    color: inherit; text-decoration: none; padding: 6px 0;
    border-bottom: 1.5px solid transparent;
  }
  .nav ul.menu a:hover{ opacity: 1; border-bottom-color: currentColor; }

  /* Hover dropdown for Produkti / Pakalpojumi. The submenu picks up
     the page's dark/light context so it fits the editorial design
     instead of looking like a generic OS dropdown. */
  .nav .menu-item--has-sub{ position: relative; }
  .nav .menu-item--has-sub > a > .menu-caret{
    font-size: 9px; margin-left: 6px; opacity: 0.55; display: inline-block;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }
  .nav .menu-item--has-sub:hover > a > .menu-caret,
  .nav .menu-item--has-sub:focus-within > a > .menu-caret{
    transform: translateY(2px); opacity: 1; color: var(--vilsa-sap);
  }

  /* Default (hero / dark) state: forest panel with paper text + sap
     accent rule on top, mirrors the dark forest configurator bands. */
  .nav .menu-sub{
    position: absolute; top: calc(100% + 14px); left: -28px;
    min-width: 320px; padding: 18px 0; margin: 0; list-style: none;
    background: var(--vilsa-forest); color: var(--vilsa-paper);
    border: 1px solid rgba(245,239,228,.18); border-top: 2px solid var(--vilsa-sap);
    box-shadow: 0 24px 56px -16px rgba(15,32,24,.55);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur-base), transform var(--dur-base), visibility 0s linear var(--dur-base);
    z-index: 50;
  }
  /* Hover bridge so the cursor can travel from the caret down to the
     panel without the panel collapsing. */
  .nav .menu-sub::before{
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  }
  .nav .menu-item--has-sub:hover > .menu-sub,
  .nav .menu-item--has-sub:focus-within > .menu-sub{
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
  }
  .nav .menu-sub li{ margin: 0; }
  .nav .menu-sub a{
    display: flex !important; align-items: center; gap: 10px;
    padding: 14px 32px 14px 44px !important; color: var(--vilsa-paper) !important;
    font-family: var(--font-display); font-size: 15px; font-weight: 400;
    letter-spacing: -0.005em; line-height: 1.25;
    border-bottom: none !important; opacity: 0.85 !important;
    position: relative;
    transition: color var(--dur-base), background var(--dur-base), padding-left var(--dur-base), opacity var(--dur-base);
  }
  .nav .menu-sub a::before{
    content: ""; position: absolute; left: 44px; bottom: 10px; width: 0; height: 1px;
    background: var(--vilsa-sap); transition: width var(--dur-base);
  }
  .nav .menu-sub a:hover,
  .nav .menu-sub a:focus-visible{
    background: rgba(245,239,228,.05); padding-left: 52px !important;
    color: var(--vilsa-sap) !important; opacity: 1 !important; outline: none;
  }
  .nav .menu-sub a:hover::before,
  .nav .menu-sub a:focus-visible::before{ width: 22px; left: 44px; }
  .nav .menu-sub a::after{ display: none !important; }

  /* Scrolled state: nav turns paper, so the dropdown flips to a
     paper panel with ink text + forest rule + cream hover. */
  body.scrolled .nav .menu-sub{
    background: var(--vilsa-paper); color: var(--vilsa-ink);
    border-color: var(--vilsa-stone-50);
    border-top-color: var(--vilsa-forest);
    box-shadow: 0 24px 56px -16px rgba(15,32,24,.18);
  }
  body.scrolled .nav .menu-sub a{ color: var(--vilsa-ink) !important; opacity: 0.85 !important; }
  body.scrolled .nav .menu-sub a:hover,
  body.scrolled .nav .menu-sub a:focus-visible{
    background: var(--vilsa-cream); color: var(--vilsa-forest) !important; opacity: 1 !important;
  }
  body.scrolled .nav .menu-sub a::before{ background: var(--vilsa-forest); }

  .nav .nav-cta{
    --bd: var(--vilsa-paper); --fg: var(--vilsa-paper);
    padding: 10px 18px; font-size: 13px;
  }
  body.scrolled .nav .nav-cta{ --bd: var(--vilsa-ink); --fg: var(--vilsa-ink); }

  /* ---------------- Mobile hamburger + menu ----------------
     Hidden on desktop (>= 900px). Below that, the desktop menu +
     nav-cta collapse and the hamburger toggles a slide-out panel. */
  .nav-toggle{
    display: none;
    background: transparent; border: 0; padding: 8px 6px;
    cursor: pointer; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-left: auto;
    flex-direction: column; gap: 5px;
  }
  .nav-toggle-bar{
    display: block; width: 24px; height: 2px;
    background: var(--vilsa-paper); border-radius: 2px;
    transition: transform var(--dur-base), opacity var(--dur-base), background var(--dur-base);
  }
  body.scrolled .nav-toggle-bar{ background: var(--vilsa-ink); }
  .nav-wrap--mobile-open .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-wrap--mobile-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
  .nav-wrap--mobile-open .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .nav-mobile{
    background: var(--vilsa-forest); color: var(--vilsa-paper);
    padding: 20px var(--gutter) 32px;
    border-top: 1px solid rgba(245,239,228,.14);
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--utility-h) - var(--nav-h, 68px));
    overflow-y: auto;
  }
  body.scrolled .nav-mobile{ background: var(--vilsa-paper); color: var(--vilsa-ink); border-top-color: var(--vilsa-stone-50); }
  .nav-mobile-link{
    display: block; padding: 14px 4px;
    color: inherit !important; text-decoration: none;
    font-family: var(--font-display); font-size: 18px; letter-spacing: -0.005em;
    border-bottom: 1px solid rgba(245,239,228,.10);
  }
  body.scrolled .nav-mobile-link{ border-bottom-color: var(--vilsa-stone-50); }
  .nav-mobile-group{
    padding-top: 14px; padding-bottom: 4px;
    border-bottom: 1px solid rgba(245,239,228,.10);
  }
  body.scrolled .nav-mobile-group{ border-bottom-color: var(--vilsa-stone-50); }
  .nav-mobile-heading{
    display: block; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vilsa-sap); opacity: 0.9; margin-bottom: 4px;
  }
  body.scrolled .nav-mobile-heading{ color: var(--vilsa-forest); opacity: 0.85; }
  .nav-mobile-link--sub{
    font-size: 15px; padding: 10px 4px 10px 18px;
    border-bottom: 0; opacity: 0.85;
  }
  .nav-mobile-cta{
    align-self: flex-start; margin-top: 20px;
    --bd: var(--vilsa-paper); --fg: var(--vilsa-paper);
    padding: 12px 20px; font-size: 14px;
  }
  body.scrolled .nav-mobile-cta{ --bd: var(--vilsa-ink); --fg: var(--vilsa-ink); }
  .nav-mobile-langs{
    display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px;
    padding-top: 20px; border-top: 1px solid rgba(245,239,228,.10);
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  }
  body.scrolled .nav-mobile-langs{ border-top-color: var(--vilsa-stone-50); }
  .nav-mobile-langs a{
    color: var(--vilsa-stone-100); text-decoration: none;
    border-bottom: 1px solid transparent; padding-bottom: 2px;
  }
  body.scrolled .nav-mobile-langs a{ color: var(--vilsa-stone-500); }
  .nav-mobile-langs a.on{ color: var(--vilsa-paper); border-bottom-color: var(--vilsa-sap); }
  body.scrolled .nav-mobile-langs a.on{ color: var(--vilsa-ink); border-bottom-color: var(--vilsa-forest); }

  @media (max-width: 900px){
    .nav-toggle{ display: flex; margin-left: 0; }
    .nav ul.menu{ display: none; }
    /* CTA stays visible on mobile, compact form so it fits next to
       the hamburger. Client wanted persistent "get in touch" access
       while scrolling. */
    .nav .nav-cta{ padding: 8px 12px; font-size: 12px; margin-left: auto; }
    .nav .nav-cta .arr{ display: none; }
    .nav .brand span{ display: none; }
    .nav .brand img{ height: 24px; }
    .nav{ gap: 8px; padding: 12px var(--gutter); }
    /* When the mobile panel is open, ensure the nav-wrap gets an
       opaque background so it doesn't blend into the page below. */
    .nav-wrap--mobile-open{ background: var(--vilsa-forest); }
    body.scrolled .nav-wrap--mobile-open{ background: var(--vilsa-paper); }
  }
  @media (max-width: 420px){
    .nav .nav-cta{ padding: 7px 10px; font-size: 11px; }
  }
  @media (min-width: 901px){
    .nav-mobile{ display: none; }
  }

  /* ---------------- Hero ---------------- */
  .hero{
    position: relative;
    /* min-height instead of fixed height so the box grows with content on
       short viewports — combined with overflow:hidden on the photo wrapper,
       this stops CTAs from getting clipped behind the marquee. */
    min-height: max(720px, calc(100vh - 96px));
    overflow: hidden; isolation: isolate;
    color: var(--vilsa-paper);
    margin-top: -60px; /* slip nav under so photo bleeds full */
  }
  .hero .photo{
    position: absolute; inset: 0;
    animation: kenburns 28s ease-out infinite alternate;
  }
  .hero .photo img{
    width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
    filter: saturate(96%) contrast(104%);
  }
  @keyframes kenburns{
    from{ transform: scale(1.0); }
    to  { transform: scale(1.08) translate(-1%, -1%); }
  }
  .hero .scrim{
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(26, 24, 22, 0.55) 0%, rgba(26, 24, 22, 0.05) 28%, rgba(26, 24, 22, 0.05) 50%, rgba(26, 24, 22, 0.70) 100%),
      linear-gradient(90deg,  rgba(26, 24, 22, 0.40) 0%, rgba(26, 24, 22, 0.00) 50%);
  }
  /* Stronger scrim on mobile — the cropped aerial shows more sky,
     and the title was washing out against the bright background.
     Also nudge object-position lower to favour the darker ground band. */
  @media (max-width: 720px){
    .hero .photo img{ object-position: center 75%; }
    .hero .scrim{
      background:
        linear-gradient(180deg, rgba(20, 28, 22, 0.70) 0%, rgba(20, 28, 22, 0.35) 40%, rgba(20, 28, 22, 0.55) 70%, rgba(20, 28, 22, 0.85) 100%);
    }
    .hero .headline{ text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
    .hero .lead{ text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
  }
  .hero .content{
    /* relative + min-height: 100% lets content push the hero taller when
       needed (rather than being clipped by overflow:hidden). The photo
       below remains absolute and continues to fill the (now-taller) hero. */
    position: relative; z-index: 2;
    padding: 120px var(--gutter) 96px;
    display: grid; grid-template-rows: 1fr auto;
    min-height: 100%;
  }
  .hero .stamp{
    align-self: start; justify-self: end;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--vilsa-paper);
    line-height: 1.7; text-align: right; opacity: 0.85;
    background: rgba(0,0,0,0.2); padding: 12px 16px; border: 1px solid rgba(245,239,228,0.18); backdrop-filter: blur(6px);
  }
  .hero .stamp b{ color: var(--vilsa-paper); font-weight: 500; letter-spacing: 0.12em; }
  .hero .stamp .small{ font-size: 9.5px; color: var(--vilsa-stone-100); margin-top: 4px; display: block; }

  .hero .bottom{
    align-self: end; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
  }
  .hero .headline{
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(52px, 6.5vw, 104px); line-height: 0.95; letter-spacing: -0.012em;
    color: var(--vilsa-paper); margin: 0; max-width: 14ch;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
  }
  /* Italic word-stagger spans need explicit word gap — italic glyphs lean
     into each other when letter-spacing is negative, making "tavu projektu"
     read as one mashed word. */
  .hero .headline em{ letter-spacing: 0; word-spacing: 0.06em; }
  .hero .headline em > span + span{ margin-left: 0.1em; }
  .hero .headline .light{ font-style: normal; font-family: var(--font-display); }
  .hero .eyebrow-light{
    color: var(--vilsa-stone-100); margin-bottom: 22px; display: inline-flex;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  }
  .hero .eyebrow-light::before{ background: var(--vilsa-stone-100); opacity: 0.9; }
  .hero .lead{
    font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.55; color: var(--vilsa-paper); max-width: 40ch; margin: 22px 0 28px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.35);
  }
  .hero .ctas{ display: flex; gap: 12px; flex-wrap: wrap; }

  .hero .side{
    display: flex; flex-direction: column; align-items: flex-end; gap: 32px;
    text-align: right;
  }
  .hero .side-stat{
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--vilsa-stone-100);
    line-height: 1.7;
  }
  .hero .side-stat b{ color: var(--vilsa-paper); font-weight: 500; letter-spacing: 0.12em; }
  .hero .scroll-cue{
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.3em; color: var(--vilsa-stone-100);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .hero .scroll-cue::after{
    content: ''; display: inline-block; width: 1px; height: 28px;
    background: var(--vilsa-stone-100); animation: scrolldot 2.6s ease-in-out infinite;
    transform-origin: top;
  }
  @keyframes scrolldot{
    0%{ transform: scaleY(0); transform-origin: top; }
    50%{ transform: scaleY(1); transform-origin: top; }
    50.01%{ transform-origin: bottom; }
    100%{ transform: scaleY(0); transform-origin: bottom; }
  }

  /* ---------------- Marquee ---------------- */
  .marquee{
    background: var(--vilsa-ink); color: var(--vilsa-paper);
    overflow: hidden; padding: 22px 0;
    border-top: 1px solid var(--vilsa-ink);
  }
  .marquee-track{
    display: flex; gap: 56px; width: max-content;
    animation: scroll-x 64s linear infinite;
    font-family: var(--font-display); font-style: italic; font-size: 44px; line-height: 1;
    white-space: nowrap;
  }
  .marquee-track .sep{
    font-family: var(--font-sans); font-style: normal; font-size: 14px;
    color: var(--vilsa-stone-300); align-self: center; letter-spacing: 0.3em;
  }
  @keyframes scroll-x{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

  /* ---------------- Heritage ---------------- */
  .heritage{
    padding: clamp(80px, 9vw, 140px) var(--gutter);
    display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px);
    align-items: start; max-width: var(--container-wide); margin: 0 auto;
  }
  .heritage .copy h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(40px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.02em;
    margin: 16px 0 22px; max-width: 16ch;
  }
  .heritage .copy h1.headline em{ font-style: italic; }
  .heritage .copy p{
    color: var(--vilsa-stone-500); font-size: 16px; line-height: 1.6;
    max-width: 48ch; margin: 0 0 14px;
  }
  .heritage .copy p b{ color: var(--vilsa-ink); font-weight: 500; }
  .heritage .copy .actions{ margin-top: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

  .heritage .visual{
    position: relative; aspect-ratio: 4 / 5;
  }
  .heritage .visual .photo{
    position: absolute; inset: 0;
  }
  .heritage .visual .photo img{ width: 100%; height: 100%; object-fit: cover; }
  .heritage .visual .stamp{
    position: absolute; top: 18px; left: 18px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--vilsa-paper);
    background: rgba(0,0,0,0.4); padding: 6px 10px; backdrop-filter: blur(6px);
  }
  .heritage .visual .num{
    position: absolute; left: -56px; bottom: -32px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(120px, 18vw, 240px); line-height: 0.78; letter-spacing: -0.04em;
    pointer-events: none; user-select: none;
  }
  .heritage .visual .num .outline {
    color: transparent; -webkit-text-stroke: 1.5px var(--vilsa-ink);
    display: inline-block;
  }
  .heritage .visual .num .fill {
    display: none;
    color: var(--vilsa-ink);
    position: absolute; left: 0; top: 0;
    width: 0; overflow: hidden; white-space: nowrap;
  }
  .heritage .visual .badge{
    position: absolute; right: -24px; top: 32px;
    width: 140px; height: 140px; border-radius: 50%;
    background: var(--vilsa-forest); color: var(--vilsa-paper);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    text-align: center; line-height: 1.5;
    box-shadow: var(--shadow-3);
  }
  .heritage .visual .badge b{ display:block; font-family: var(--font-display); font-style: italic; font-size: 32px; letter-spacing: -0.01em; font-weight: 400; margin: 4px 0; }

  /* ---------------- Trust strip ----------------
     Default is 4 cols. .trust--3 renders 3 evenly — used on the homepage
     after the turnover stat was dropped per client brief.
  ---------------------------------------------- */
  .trust{
    background: var(--vilsa-ink); color: var(--vilsa-paper);
    display: grid; grid-template-columns: repeat(4, 1fr);
  }
  .trust.trust--3{ grid-template-columns: repeat(3, 1fr); }
  .trust .stat{
    padding: 40px clamp(24px, 3vw, 40px) 56px;
    border-right: 1px solid rgba(245,239,228,0.08);
    display: flex; flex-direction: column;
  }
  .trust .stat:last-child{ border-right: 0; }
  .trust .stat .label{
    order: 2;
    font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--vilsa-paper); margin: 6px 0 0;
    display: flex; justify-content: flex-start; align-items: baseline; gap: 14px;
  }
  .trust .stat .label .n{
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
    color: var(--vilsa-stone-500); font-weight: 400;
  }
  .trust .stat .val{
    order: 1;
    font-family: var(--font-display); font-weight: 400; font-style: italic;
    font-size: clamp(56px, 6vw, 100px); line-height: 0.9; letter-spacing: -0.025em;
    color: var(--vilsa-paper);
  }
  .trust .stat .val .suffix{ font-style: italic; opacity: 0.7; margin-left: 4px; }
  .trust .stat .blurb{
    order: 3;
    margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--vilsa-stone-100);
    max-width: 28ch;
  }

  /* ---------------- Certifications strip ----------------
     Bordered cert chips render as quasi-logos until real cert SVGs land. */
  .certs-strip{
    padding: clamp(40px, 5vw, 72px) var(--gutter);
    background: var(--vilsa-paper);
    border-bottom: 1px solid var(--vilsa-stone-50);
    position: relative; z-index: 2;
  }
  .certs-inner{
    max-width: var(--container-wide); margin: 0 auto;
    display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  }
  .certs-inner .eyebrow{ margin: 0; }
  .certs-grid{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  }
  .cert-chip{
    border: 1.5px solid var(--vilsa-ink); padding: 14px 18px 16px;
    display: flex; flex-direction: column; gap: 4px;
    background: transparent;
    transition: background var(--dur-base) var(--ease-out);
  }
  .cert-chip:hover{ background: var(--vilsa-ink); color: var(--vilsa-paper); }
  .cert-chip:hover b, .cert-chip:hover span{ color: var(--vilsa-paper); }
  .cert-chip b{
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 22px; letter-spacing: -0.012em; line-height: 1;
    color: var(--vilsa-ink);
  }
  .cert-chip span{
    font-size: 11.5px; line-height: 1.4; color: var(--vilsa-stone-500);
  }
  @media (max-width: 900px){
    .certs-inner{ grid-template-columns: 1fr; gap: 20px; }
    .certs-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------------- Team (Komanda) ----------------
     Brief-supplied portrait photos of the 6 named members (Vilnis,
     Lauris, Aigars, Mārcis, Valters, Baiba). Sits between Services
     and the Aiz kulisēm process gallery. */
  .team{
    padding: clamp(80px, 9vw, 140px) var(--gutter);
    background: var(--vilsa-cream);
    position: relative; z-index: 2;
  }
  .team-inner{ max-width: var(--container-wide); margin: 0 auto; }
  .team-head{
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 80px);
    align-items: end; margin-bottom: clamp(48px, 5vw, 72px);
  }
  .team-head h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(40px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.02em;
    margin: 16px 0 0; max-width: 14ch;
  }
  .team-head h1.headline em{ font-style: italic; }
  .team-head p{
    color: var(--vilsa-stone-500); font-size: 16px; line-height: 1.6;
    max-width: 42ch; margin: 0;
  }
  .team-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px);
  }
  .team-member{ margin: 0; }
  .team-photo{
    aspect-ratio: 4 / 5; overflow: hidden;
    background: var(--vilsa-bone); margin-bottom: 16px;
  }
  .team-photo img{
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--ease-out);
  }
  .team-member:hover .team-photo img{ transform: scale(1.04); }
  .team-member figcaption{ display: flex; flex-direction: column; gap: 4px; }
  .team-member figcaption b{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(20px, 2vw, 26px); line-height: 1.1; letter-spacing: -0.01em;
    color: var(--vilsa-ink);
  }
  .team-member figcaption span{
    font-size: 13px; color: var(--vilsa-stone-500); line-height: 1.4;
  }
  .team-contact{ display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .team-contact-link{
    font-family: var(--font-mono); font-size: 12px; color: var(--vilsa-forest);
    text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px;
    align-self: flex-start; transition: border-color .15s;
  }
  .team-contact-link:hover{ border-bottom-color: currentColor; }
  @media (max-width: 1100px){
    .team-head{ grid-template-columns: 1fr; align-items: start; }
    .team-grid{ grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------------- Process gallery (Aiz kulisēm) ----------------
     Horizontal photo scroller — pure visual, no card text overlay. */
  .process{
    background: var(--vilsa-cream);
    padding: clamp(80px, 9vw, 140px) 0 clamp(60px, 7vw, 100px);
    position: relative;
  }
  .process-head{
    max-width: var(--container-wide); margin: 0 auto;
    padding: 0 var(--gutter) clamp(32px, 3vw, 56px);
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  }
  .process-head h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(32px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.02em;
    margin: 12px 0 0; max-width: 22ch;
  }
  .process-head h1.headline em{ font-style: italic; }
  .process-head p{
    color: var(--vilsa-stone-500); font-size: 16px; line-height: 1.6;
    max-width: 44ch; margin: 0;
    overflow-wrap: break-word;
    min-width: 0;
  }
  .process-track{
    display: flex; gap: 16px; padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--vilsa-stone-300) transparent;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .process-card{
    flex: 0 0 min(460px, 70vw); height: 320px; position: relative; overflow: hidden;
    background: var(--vilsa-bone); margin: 0;
    scroll-snap-align: start;
  }
  .process-card img{
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--ease-out);
  }
  .process-card:hover img{ transform: scale(1.04); }
  .process-card figcaption{
    position: absolute; left: 18px; bottom: 16px; z-index: 2;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em;
    color: var(--vilsa-paper); background: rgba(0,0,0,0.5);
    padding: 6px 10px; backdrop-filter: blur(6px); text-transform: uppercase;
  }
  @media (max-width: 720px){
    .process-head{ grid-template-columns: 1fr; align-items: start; gap: 16px; }
    .process-card{ flex-basis: 80vw; height: 260px; }
  }

  /* ---------------- Why VILSA ----------------
     Forest bg makes this the visual anchor between products and services.
     Big italic serif numerals sit behind each card as decorative typography. */
  .why{
    padding: clamp(80px, 9vw, 140px) var(--gutter);
    background: var(--vilsa-forest); color: var(--vilsa-paper);
    position: relative; z-index: 2;
    overflow: hidden;
  }
  .why-inner{ max-width: var(--container-wide); margin: 0 auto; position: relative; }
  .why-head{
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 80px);
    align-items: end; margin-bottom: clamp(48px, 5vw, 72px);
  }
  .why-head .eyebrow{ color: var(--vilsa-stone-100); }
  .why-head .eyebrow::before{ background: var(--vilsa-stone-100); }
  .why-head h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.02em;
    margin: 16px 0 0; max-width: 14ch;
    color: var(--vilsa-paper);
  }
  .why-head h1.headline em{ font-style: italic; }
  .why-head p{
    color: var(--vilsa-stone-100); font-size: 16px; line-height: 1.6;
    max-width: 42ch; margin: 0;
  }
  .why-grid{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px);
    counter-reset: why-num;
  }
  .why-card{
    position: relative;
    padding-top: 28px;
    display: flex; flex-direction: column;
    border-top: 1.5px solid rgba(245,239,228,0.3);
    counter-increment: why-num;
  }
  /* Big decorative italic numeral as a watermark behind the card content */
  .why-card::before{
    content: counter(why-num, decimal-leading-zero);
    position: absolute;
    top: -14px; right: -6px;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(56px, 7vw, 110px);
    line-height: 0.82; letter-spacing: -0.04em;
    color: rgba(245,239,228,0.10);
    pointer-events: none;
    z-index: 0;
  }
  .why-card > *{ position: relative; z-index: 1; }
  .why-card .num{
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--vilsa-stone-100); margin-bottom: 18px;
  }
  .why-card h3{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px); line-height: 1.14; letter-spacing: -0.01em;
    color: var(--vilsa-paper);
    margin: 0 0 16px; max-width: 16ch;
  }
  .why-card h3 em{ font-style: italic; }
  .why-card p{
    font-size: 14.5px; line-height: 1.6; color: var(--vilsa-stone-100); margin: 0;
  }
  @media (max-width: 1100px){
    .why-head{ grid-template-columns: 1fr; align-items: start; }
    .why-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px){
    .why-grid{ grid-template-columns: 1fr; }
  }

  /* ---------------- Production cycle ---------------- */
  .cycle-head{
    padding: clamp(96px, 10vw, 160px) var(--gutter) clamp(64px, 7vw, 112px);
    max-width: var(--container-wide); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 5vw, 88px); align-items: center;
    position: relative; z-index: 2;
  }
  .cycle-head h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(40px, 5vw, 80px); line-height: 1.2; letter-spacing: -0.02em;
    margin: 16px 0 0; max-width: 18ch;
  }
  .cycle-head h1.headline em{ font-style: italic; }
  .cycle-head .legend{
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--vilsa-stone-500);
    text-align: right; line-height: 1.7;
  }
  .cycle-head .legend b{ color: var(--vilsa-ink); font-weight: 500; }

  .cycle{
    position: relative;
    overflow: hidden;
    background: var(--vilsa-cream);
    z-index: 1;
  }
  .cycle .track{
    display: flex; gap: 1px; padding-bottom: 6px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--vilsa-stone-300) transparent;
    /* Background matches the page cream so the 1px gaps + bottom padding
       don't render as a "white bar" against the panels. Was stone-50. */
    background: var(--vilsa-cream);
    /* Only fade the right edge — the left edge is where the user wants the
       first panel to land flush, not behind a fade. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  }

  /* Floating navigation arrows for horizontal scrollers (cycle + projects).
     Generic, used wherever .position:relative parent contains a scrollable track. */
  .scroller-arrow{
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(20, 18, 16, 0.72);
    color: var(--vilsa-paper);
    border: 1px solid rgba(245, 239, 228, 0.18);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-sans); font-size: 22px; line-height: 1;
    cursor: pointer; z-index: 4;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.2s, opacity 0.25s, border-color 0.2s, visibility 0s linear 0.25s;
    visibility: visible;
  }
  .scroller-arrow:hover{ background: var(--vilsa-ink); border-color: var(--vilsa-paper); }
  .scroller-arrow:active{ transform: translateY(-50%) scale(0.96); }
  .scroller-arrow--prev{ left: 16px; }
  .scroller-arrow--next{ right: 16px; }
  /* At the boundary, the arrow fully disappears (visibility hidden after fade) so users
     don't think there's more content to scroll into. */
  .scroller-arrow.is-disabled{ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0s linear 0.2s; }
  @media (max-width: 720px){
    .scroller-arrow{ width: 44px; height: 44px; font-size: 18px; }
    .scroller-arrow--prev{ left: 8px; }
    .scroller-arrow--next{ right: 8px; }
  }
  .cycle .panel{
    flex: 0 0 min(640px, 80vw); height: 560px;
    scroll-snap-align: start;
    display: grid; grid-template-rows: 1.4fr 1fr;
    /* Cream (page bg) instead of paper so any subpixel gap above the photo
       doesn't render as a lighter strip against the surrounding cream. */
    background: var(--vilsa-cream);
    position: relative;
  }
  .cycle .panel .photo{ position: relative; overflow: hidden; min-height: 0; }
  /* display:block + 100%/100% ensures the img fills the photo grid row
     edge-to-edge — prevents the inline-image baseline gap that was
     leaving a thin paper-colored strip above the photo. */
  .cycle .panel .photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
  .cycle .panel .photo .step-no{
    position: absolute; top: 18px; left: 22px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--vilsa-paper);
    background: rgba(0,0,0,0.45); padding: 6px 10px; backdrop-filter: blur(6px);
  }
  .cycle .panel .txt{
    padding: 28px 30px; display: flex; flex-direction: column; justify-content: space-between;
  }
  .cycle .panel .txt h4{
    font-family: var(--font-display); font-weight: 400;
    font-size: 30px; line-height: 1; letter-spacing: -0.015em; margin: 8px 0 12px;
  }
  .cycle .panel .txt h4 em{ font-style: italic; }
  .cycle .panel .txt p{ color: var(--vilsa-stone-500); font-size: 13.5px; line-height: 1.5; margin: 0; max-width: 36ch; }
  .cycle .panel .txt .spec{
    margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
    color: var(--vilsa-stone-500); text-transform: uppercase;
  }

  .cycle .nav-bar{
    display: flex; align-items: center; gap: 24px; justify-content: space-between;
    padding: 24px var(--gutter); max-width: var(--container-wide); margin: 0 auto;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--vilsa-stone-500); text-transform: uppercase;
  }
  .cycle .nav-bar .steps{ display: flex; gap: 24px; flex-wrap: wrap; }
  .cycle .nav-bar .steps button{
    background: transparent; border: 0; cursor: pointer;
    font-family: inherit; font-size: inherit; letter-spacing: inherit; color: var(--vilsa-stone-300); padding: 4px 0;
    border-bottom: 1.5px solid transparent;
  }
  .cycle .nav-bar .steps button.on{ color: var(--vilsa-ink); border-bottom-color: var(--vilsa-forest); }
  .cycle .nav-bar .arrows{ display: flex; gap: 6px; }
  .cycle .nav-bar .arrows button{
    width: 36px; height: 36px; border: 1px solid var(--vilsa-stone-100); background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--vilsa-ink);
  }
  .cycle .nav-bar .arrows button:hover{ background: var(--vilsa-bone); }

  /* ---------------- Products (broken grid) ---------------- */
  .prod-head{
    padding: clamp(80px, 9vw, 140px) var(--gutter) clamp(32px, 3vw, 56px);
    max-width: var(--container-wide); margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
    position: relative; z-index: 2;
  }
  .prod-head h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(40px, 5vw, 80px); line-height: 1.2; letter-spacing: -0.02em;
    margin: 16px 0 0; max-width: 16ch;
  }
  .prod-head h1.headline em{ font-style: italic; }

  .prod{
    padding: 0 var(--gutter) clamp(80px, 9vw, 140px);
    max-width: var(--container-wide); margin: 0 auto;
    position: relative; z-index: 1;
  }
  .prod-grid{
    display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 64px;
    gap: 16px;
  }
  .pcard{
    /* Base bg cream (was bone) — see note on .cycle .panel above. p4 + p5
       override this with their own paper/forest bg since they're text-only
       content cards, not photo cards. */
    position: relative; background: var(--vilsa-cream); overflow: hidden;
    transition: transform var(--dur-slow) var(--ease-out);
    cursor: pointer; text-decoration: none; color: inherit;
  }
  .pcard:hover{ transform: translateY(-6px); }
  .pcard .photo{ position: absolute; inset: 0; }
  .pcard .photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
  /* Postsaver product-card crop: shift the visible band down in the
     source so the sleeve label lands in the visible photo area (which
     only shows the top ~68% of the card before the copy overlay).
     CSS-only, immune to Preact hydration replacing inline styles. */
  /* body.lvl-3 .mask-reveal img keeps a permanent scale(1.12) translateY(36px)
     transform (the specificity beats .mask-reveal.in img so it never resets).
     That transform was hiding my object-position changes on the postsaver
     card - shift down, image is scaled up + moved down, visible band ends
     up showing more sky/grass instead of the sleeve label.
     Kill the transform on this specific img so object-position actually
     controls what's shown. */
  /* object-position is provably ignored on this img (65%/75%/100% all
     rendered identically after the mask-reveal transform was removed).
     Cause: probably the parent <picture> or Preact hydration quirk.
     Swap to transform: translateY() which we KNOW moves the img
     visually - mask-reveal was using it and that's what was shifting
     the crop before. Negative Y shifts the img UP inside the container,
     revealing MORE of the bottom of the source (deeper into the sleeve
     label + underground). */
  .pcard .photo img[src*="product-postsaver"]{
    transform: translateY(-40px) !important;
  }
  .pcard:hover .photo img{ transform: scale(1.05); }
  .pcard .photo::after{
    /* Softer scrim — only enough to lift the top-left .meta chip. The
       copy block below now has its own solid cream caption strip, so
       we no longer need the photo gradient to do contrast work. */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,24,22,0.0) 0%, rgba(26,24,22,0.18) 30%, rgba(26,24,22,0.0) 60%);
  }
  .pcard .meta{
    position: absolute; top: 22px; left: 24px; z-index: 2;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--vilsa-paper);
  }
  /* ---------- COPY BLOCK = solid cream caption strip ----------
     Was: white text on photo with bottom-up scrim. Failed on snow/light
     photos (Tornado winter, Postsaver section, project cards) even with
     strong gradient + drop-shadow. Switched to a full-width opaque cream
     strip at the bottom of the card — guaranteed contrast regardless of
     photo content. */
  .pcard .copy{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    background: var(--vilsa-paper);
    color: var(--vilsa-ink);
    padding: 18px 24px 22px;
  }
  .pcard .copy .spec{
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--vilsa-stone-500);
    text-transform: uppercase; margin-bottom: 8px;
  }
  .pcard .copy h3{
    font-family: var(--font-display); font-weight: 400; color: var(--vilsa-ink);
    font-size: clamp(26px, 2.8vw, 40px); line-height: 0.95; letter-spacing: -0.018em; margin: 0;
  }
  .pcard .copy h3 em{ font-style: italic; }
  .pcard .copy .sub{
    color: var(--vilsa-stone-500); font-size: 14px; line-height: 1.5; margin: 12px 0 0;
    max-width: 36ch; opacity: 0; max-height: 0; overflow: hidden;
    transition: opacity var(--dur-slow) var(--ease-out), max-height var(--dur-slow) var(--ease-out), margin var(--dur-slow);
  }
  .pcard:hover .copy .sub{ opacity: 1; max-height: 120px; }
  .pcard .arrow{
    position: absolute; right: 24px; bottom: 22px; z-index: 3; color: var(--vilsa-ink);
    font-size: 22px; transition: transform var(--dur-slow) var(--ease-out);
  }
  .pcard:hover .arrow{ transform: translateX(8px); }

  .p1{ grid-column: 1 / span 7; grid-row: 1 / span 9; }
  .p2{ grid-column: 8 / span 5; grid-row: 1 / span 5; }
  .p3{ grid-column: 8 / span 5; grid-row: 6 / span 4; }
  .p4{ grid-column: 1 / span 5; grid-row: 10 / span 4; background: var(--vilsa-paper); }
  .p5{ grid-column: 6 / span 7; grid-row: 10 / span 4; background: var(--vilsa-forest); color: var(--vilsa-paper); display: flex; align-items: center; padding: clamp(24px, 3vw, 40px); }
  .p5:hover{ transform: translateY(-6px); }
  .p5 .inner{ max-width: 36ch; }
  .p5 .spec{ color: var(--vilsa-stone-100); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
  .p5 h3{
    font-family: var(--font-display); font-weight: 400; font-style: italic; color: var(--vilsa-paper);
    font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -0.015em; margin: 0 0 14px;
  }
  .p5 p{ color: var(--vilsa-stone-100); font-size: 14px; line-height: 1.55; margin: 0 0 22px; }
  .p5 .actions{ display: flex; gap: 14px; flex-wrap: wrap; }
  .p4 .inner{ padding: clamp(24px, 3vw, 36px); max-width: 100%; }
  .p4 .spec{ color: var(--vilsa-stone-500); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; }
  .p4 h3{ font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.015em; margin: 0 0 12px; }
  .p4 h3 em{ font-style: italic; }
  .p4 p{ color: var(--vilsa-stone-500); font-size: 14px; line-height: 1.55; margin: 0 0 20px; max-width: 32ch;}

  /* ---------------- Services ---------------- */
  .services{
    background: var(--vilsa-bone);
    padding: clamp(80px, 9vw, 140px) var(--gutter);
  }
  .services-inner{ max-width: var(--container-wide); margin: 0 auto; }
  .services-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: clamp(32px, 3vw, 56px); }
  .services-head h1.headline{ font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.2; letter-spacing: -0.02em; margin: 12px 0 0; max-width: 22ch; }
  .services-head h1.headline em{ font-style: italic; }
  .services-head .lead{ color: var(--vilsa-stone-500); font-size: 17px; line-height: 1.55; max-width: 48ch; }

  .services-grid{
    /* Bg matches the section bg (bone) so it never shows as a contrast band
       when the .stagger children are opacity:0 waiting for IntersectionObserver.
       Card separation now comes from per-card right border, not from a gap-bg trick. */
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--vilsa-bone);
  }
  .services-grid .scard{ border-right: 1px solid var(--vilsa-stone-50); }
  .services-grid .scard:last-child{ border-right: 0; }
  .scard{
    background: var(--vilsa-bone); padding: 0; display: flex; flex-direction: column;
    text-decoration: none; color: inherit; transition: background var(--dur-base);
  }
  .scard:hover{ background: var(--vilsa-paper); opacity: 1; }
  .scard .photo{ aspect-ratio: 4 / 3; overflow: hidden; }
  .scard .photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
  .scard:hover .photo img{ transform: scale(1.04); }
  .scard .body{ padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
  .scard .body .since{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--vilsa-rust); text-transform: uppercase; margin-bottom: 10px; }
  .scard .body h4{ font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.015em; margin: 0 0 12px; }
  .scard .body h4 em{ font-style: italic; }
  .scard .body p{ color: var(--vilsa-stone-500); font-size: 14px; line-height: 1.55; margin: 0 0 20px; flex: 1; }
  .scard .body .arrow-link{ align-self: flex-start; }

  /* ---------------- Quote ---------------- */
  .quote{
    background: var(--vilsa-cream);
    padding: clamp(80px, 9vw, 140px) var(--gutter);
  }
  .quote-inner{ max-width: var(--container); margin: 0 auto; position: relative; }
  /* Quote mark rendered inline in normal flow, right above the .text element.
     Sized so it visually leads into the text without leaving a giant gap.
     Negative bottom margin pulls .text up tight against it. */
  .quote-mark{
    /* Bigger size + line-height 0.9 so the glyph stays inside its line-box
       and doesn't overflow above the eyebrow. Negative margin-bottom pulls
       the quote text up to overlap with the mark's tail. */
    display: block;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(120px, 13vw, 220px); line-height: 0.9;
    color: var(--vilsa-forest); opacity: 0.5;
    margin: 24px 0 -36px 0;
    user-select: none;
  }
  .quote .text{
    /* Slight size bump from the previous pass (was clamp 22-38) and we removed
       the leading/trailing " characters in favor of the giant decorative mark. */
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(28px, 3.2vw, 48px); line-height: 1.22; letter-spacing: -0.01em;
    color: var(--vilsa-ink); margin: 20px 0 0; max-width: 32ch;
  }
  .quote .support{
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.6;
    color: var(--vilsa-stone-500);
    max-width: 46ch;
    margin: 20px 0 0;
  }
  .quote .text em{ font-style: italic; }
  .quote .cite{
    margin-top: 40px; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--vilsa-stone-500); text-transform: uppercase;
  }
  .quote .cite b{ color: var(--vilsa-ink); font-weight: 500; }

  /* ---------------- Export map ---------------- */
  .map{
    position: relative; padding: clamp(80px, 9vw, 140px) var(--gutter);
    background: #0c1a13;
    color: var(--vilsa-paper); overflow: hidden;
  }
  .map::before{
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(26,58,42,0.35) 0%, transparent 60%);
  }
  .map-inner{ max-width: var(--container-wide); margin: 0 auto; position: relative; }
  .map .head{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
  .map .head h1.headline{ font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 80px); line-height: 1.08; letter-spacing: -0.02em; color: var(--vilsa-paper); margin: 16px 0 0; max-width: 14ch; }
  .map .head h1.headline em{ font-style: italic; }
  .map .head p{ color: var(--vilsa-stone-100); font-size: 16px; line-height: 1.55; max-width: 48ch; }
  .map .head .eyebrow{ color: var(--vilsa-stone-100); }
  .map .head .eyebrow::before{ background: var(--vilsa-stone-100); }

  .map .viz{
    /* 4/3 frames an EU-centric map without the Australia pull-out — see SVG viewBox 0 0 800 600. */
    position: relative; aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, #122a1d 0%, #0a1410 100%);
    border: 1px solid #1f3a2a; max-width: 1080px; margin: 0 auto;
  }
  /* ===== Real Europe map (Wikimedia Commons CC-BY-SA blank Europe SVG,
     brand-colored inside the SVG file) + dotted hub-spoke overlay ===== */
  .map .viz{ isolation: isolate; position: relative; }
  .vilsa-map-img{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    pointer-events: none;
    opacity: 0.95;
  }
  .vilsa-spokes{
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
  }
  .vilsa-spokes line{
    stroke: rgba(245, 239, 228, 0.35); stroke-width: 0.2;
    stroke-dasharray: 0.6 1.2; vector-effect: non-scaling-stroke;
  }

  /* Pin overlays — HTML on top of the SVG for typography control. */
  .map-hub, .map-pin{
    position: absolute;
    display: flex; align-items: center; gap: 10px;
    transform: translate(-50%, -50%);
    color: var(--vilsa-paper);
    pointer-events: auto;
  }
  .map-pin--left{ flex-direction: row-reverse; }
  .map-pin__dot{
    position: relative;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--vilsa-paper);
    box-shadow: 0 0 0 2px rgba(155, 232, 168, 0.45);
    flex-shrink: 0;
  }
  .map-pin__dot::before{
    content: ''; position: absolute; inset: -9px;
    border-radius: 50%;
    background: rgba(155, 232, 168, 0.32);
    animation: pulse-ring 2.4s ease-out infinite;
  }
  .map-pin__dot--hub{ width: 12px; height: 12px; }
  .map-hub__ring{
    position: absolute;
    left: 0; top: 50%;
    width: 44px; height: 44px;
    margin-left: -22px; margin-top: -22px;
    border: 1px solid rgba(245, 239, 228, 0.5);
    border-radius: 50%;
    pointer-events: none;
  }
  .map-pin__label{
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 13px; letter-spacing: 0; line-height: 1;
    color: var(--vilsa-paper);
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  }
  .map-hub .map-pin__label{ font-size: 14px; }
  @keyframes pulse-ring{ 0%,100%{ transform: scale(0.6); opacity: 0.6; } 50%{ transform: scale(1.7); opacity: 0; } }
  body.lvl-1 .map-pin__dot::before{ animation: none; opacity: 0.25; }

  .map .legend{
    /* 5 buckets after Oceania dropped (EU + Middle East focus). */
    margin-top: 48px; display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1px; background: rgba(122,158,137,0.18); border: 1px solid rgba(122,158,137,0.18);
  }
  .map .legend > div{
    background: #0c1a13; padding: 18px 16px; font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.16em; color: var(--vilsa-stone-100); text-transform: uppercase;
  }
  .map .legend > div b{ display: block; color: var(--vilsa-paper); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: 0; margin-top: 6px; }

  /* ---------------- Projects: manual horizontal scroll ----------------
     Was auto-marquee; user feedback was that you couldn't pause to read.
     Now scroll-snap with arrows (same .scroller-arrow pattern as cycle). */
  .projects{
    background: var(--vilsa-cream);
    position: relative; overflow: hidden;
    padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 140px);
  }
  .projects-head{
    padding: 0 var(--gutter) clamp(32px, 3vw, 56px);
    max-width: var(--container-wide); margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
    position: relative; z-index: 2;
  }
  .projects-head h1.headline{ font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 80px); line-height: 1.2; letter-spacing: -0.02em; margin: 16px 0 0; max-width: 14ch; }
  .projects-head h1.headline em{ font-style: italic; }
  .proj-track{
    display: flex; gap: 20px; padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: thin;
    scrollbar-color: var(--vilsa-stone-300) transparent;
    /* Right-edge fade only — left edge is where the first card needs to land
       flush so the user can scroll all the way to the leftmost border. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
  }
  .proj-card{
    flex: 0 0 380px; height: 460px; position: relative; overflow: hidden;
    /* Cream base bg (was bone) so any subpixel gap shows cream, not a darker stripe. */
    background: var(--vilsa-cream); text-decoration: none; color: inherit;
    scroll-snap-align: start;
  }
  .proj-card .photo{ position: absolute; inset: 0; }
  .proj-card .photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
  /* Removed hover scale on the photo to prevent jank on heavy JPGs. */
  .proj-card .photo::after{
    /* Light scrim only — copy strip below carries the contrast. */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,24,22,0.0) 0%, rgba(26,24,22,0.12) 100%);
  }
  .proj-card .meta{
    position: absolute; top: 18px; left: 18px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--vilsa-paper); background: rgba(0,0,0,0.45); padding: 5px 8px; backdrop-filter: blur(6px); z-index: 2;
  }
  /* ---------- COPY BLOCK = solid cream caption strip (matches .pcard) ---------- */
  .proj-card .copy{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    background: var(--vilsa-paper);
    color: var(--vilsa-ink);
    padding: 14px 18px 16px;
  }
  .proj-card .copy h3{ font-family: var(--font-display); font-size: 22px; line-height: 1.05; font-weight: 400; letter-spacing: -0.012em; margin: 0; color: var(--vilsa-ink); }
  .proj-card .copy h3 em{ font-style: italic; }
  .proj-card .copy .dim{
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
    color: var(--vilsa-stone-500); text-transform: uppercase;
    margin: 6px 0 10px;
  }
  .proj-card .copy .mat{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 3px;
  }
  .proj-card .copy .mat li{
    font-size: 12px; line-height: 1.4; color: var(--vilsa-stone-500);
    padding-left: 12px; position: relative;
  }
  .proj-card .copy .mat li::before{
    content: '·'; position: absolute; left: 2px; top: -1px; color: var(--vilsa-rust); font-weight: 700;
  }

  /* Multi-action prod-head column (Visi produkti + LV cenrādis) */
  .prod-head .prod-actions{ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

  /* ---------------- Contact form ----------------
     Sits inside .cta-cine .content over the dark photo scrim. No backend
     yet — script.js wires submit to a mailto: bridge. Replace with a real
     POST handler (Formspree, Resend, Vercel function) when ready. */
  .cta-form{
    display: flex; flex-direction: column; gap: 16px;
    max-width: 620px; margin: 32px auto 0;
    text-align: left;
  }
  .cta-form .form-row{
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .cta-form .form-row-full{ display: block; }
  .cta-form label{
    display: flex; flex-direction: column; gap: 6px;
  }
  .cta-form .lbl{
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
    color: var(--vilsa-stone-100); text-transform: uppercase;
  }
  .cta-form .lbl em{ color: var(--vilsa-paper); font-style: normal; margin-left: 2px; }
  .cta-form input,
  .cta-form textarea{
    background: rgba(245, 239, 228, 0.08);
    border: 1px solid rgba(245, 239, 228, 0.28);
    color: var(--vilsa-paper);
    padding: 12px 14px;
    font-family: var(--font-sans); font-size: 14.5px; line-height: 1.4;
    border-radius: 0;
    outline: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
    width: 100%; box-sizing: border-box;
  }
  .cta-form input::placeholder,
  .cta-form textarea::placeholder{
    color: rgba(245, 239, 228, 0.5);
  }
  .cta-form input:focus,
  .cta-form textarea:focus{
    border-color: var(--vilsa-paper);
    background: rgba(245, 239, 228, 0.14);
  }
  .cta-form textarea{ resize: vertical; min-height: 110px; font-family: var(--font-sans); }
  .cta-form .form-actions{
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    margin-top: 8px;
  }
  .cta-form .form-note{
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    color: var(--vilsa-stone-100);
  }
  .cta-form .form-note a{
    color: var(--vilsa-paper);
    border-bottom: 1px solid rgba(245,239,228,0.45);
    padding-bottom: 1px;
  }
  .cta-form .form-note a:hover{ border-bottom-color: var(--vilsa-paper); }
  @media (max-width: 600px){
    .cta-form .form-row{ grid-template-columns: 1fr; }
  }

  /* ---------------- Projects placeholder ----------------
     Six invented project case-studies replaced with a single honest
     placeholder. Client to supply real cases via the email link. */
  .projects-empty{
    max-width: var(--container-wide); margin: 24px auto 0;
    padding: clamp(48px, 6vw, 96px) var(--gutter);
    text-align: center;
    border-top: 1.5px solid var(--vilsa-stone-50);
    border-bottom: 1.5px solid var(--vilsa-stone-50);
    background: var(--vilsa-paper);
  }
  .projects-empty p{
    margin: 0;
  }
  .projects-empty p:first-of-type{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(22px, 3vw, 44px); line-height: 1.15; letter-spacing: -0.012em;
    color: var(--vilsa-ink); margin-bottom: 8px;
    overflow-wrap: break-word;
  }
  .projects-empty p:first-of-type em{ font-style: italic; }
  .projects-empty .dim{
    font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.01em;
    color: var(--vilsa-stone-500);
    margin-bottom: 22px;
  }
  /* Home-page featured projects (top 2 useCaseGroups mirrored from
     page-zogu-buvnieciba). One card per project, 2-4 photo mosaic on top,
     name + description below, entire card links to the gallery anchor. */
  .projects-see-all{
    align-self: end;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .projects-groups{
    max-width: var(--container-wide);
    margin: 32px auto 0;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .projects-group{ display: flex; flex-direction: column; gap: 14px; }
  .projects-group-title{
    margin: 0;
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.375rem; letter-spacing: -.005em;
    color: var(--vilsa-ink);
    text-align: center;
  }
  .projects-group-desc{
    margin: 0 auto;
    color: var(--vilsa-stone-500);
    font-size: .9375rem; line-height: 1.55;
    text-align: center; max-width: 60ch;
  }
  @media (max-width: 720px){ .projects-groups{ gap: 36px; } }

  /* UcStrip (mirror of SubpagesStyles so the strip also works on the home page). */
  .sp-uc-strip-wrap{ position: relative; }
  .sp-uc-strip{
    display: flex; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: var(--vilsa-stone-300) transparent;
    padding-bottom: 8px; scroll-behavior: smooth;
  }
  .sp-uc-strip-wrap.has-prev .sp-uc-strip{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 100%); }
  .sp-uc-strip-wrap.has-next .sp-uc-strip{ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%); }
  .sp-uc-strip-wrap.has-prev.has-next .sp-uc-strip{ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
  .sp-uc-arrow{
    position: absolute; top: calc(50% - 24px);
    width: 44px; height: 44px;
    background: var(--vilsa-paper); color: var(--vilsa-forest);
    border: 1px solid var(--vilsa-stone-100);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 1.125rem; line-height: 1;
    cursor: pointer; z-index: 2;
    transition: background .15s, border-color .15s, transform .2s;
    box-shadow: 0 6px 18px -8px rgba(26,58,42,.25);
  }
  .sp-uc-arrow:hover:not(:disabled){ background: var(--vilsa-forest); color: var(--vilsa-paper); border-color: var(--vilsa-forest); }
  .sp-uc-arrow:disabled{ opacity: 0; pointer-events: none; }
  .sp-uc-arrow--prev{ left: -8px; }
  .sp-uc-arrow--next{ right: -8px; }
  .sp-uc-strip figure{
    flex: 0 0 clamp(240px, 30vw, 340px);
    aspect-ratio: 4/3;
    margin: 0; overflow: hidden;
    background: var(--vilsa-stone-50);
    scroll-snap-align: start; cursor: zoom-in;
  }
  .sp-uc-strip img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease-out; }
  .sp-uc-strip figure:hover img{ transform: scale(1.03); }
  @media (max-width: 720px){
    .sp-uc-strip figure{ flex-basis: clamp(220px, 72vw, 300px); }
  }
  @media (max-width: 640px){
    .sp-uc-arrow{ width: 40px; height: 40px; top: calc(50% - 20px); }
    .sp-uc-arrow--prev{ left: -4px; }
    .sp-uc-arrow--next{ right: -4px; }
  }

  /* Lightbox (mirror of SubpagesStyles so it overlays properly on the home page). */
  .mieti-lightbox{ position: fixed; inset: 0; background: rgba(15,32,24,.92); z-index: 10000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
  .mieti-lightbox img{ max-width: 92vw; max-height: 88vh; object-fit: contain; cursor: default; box-shadow: 0 24px 64px -16px rgba(0,0,0,.6); }
  .mieti-lightbox-close, .mieti-lightbox-prev, .mieti-lightbox-next{ position: absolute; background: transparent; border: 1px solid rgba(245,239,228,.5); color: var(--vilsa-paper); width: 48px; height: 48px; font-family: inherit; font-size: 1.2rem; cursor: pointer; transition: background .15s, border-color .15s; }
  .mieti-lightbox-close:hover, .mieti-lightbox-prev:hover, .mieti-lightbox-next:hover{ background: rgba(245,239,228,.1); border-color: var(--vilsa-paper); }
  .mieti-lightbox-close{ top: 24px; right: 24px; }
  .mieti-lightbox-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
  .mieti-lightbox-next{ right: 24px; top: 50%; transform: translateY(-50%); }
  .mieti-lightbox-counter{ position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .08em; color: rgba(245,239,228,.7); }

  /* ---------------- CTA cinema ---------------- */
  .cta-cine{
    position: relative; min-height: 80vh; overflow: hidden; isolation: isolate; color: var(--vilsa-paper);
    display: flex; align-items: center; justify-content: center; padding: 96px var(--gutter);
  }
  .cta-cine .photo{ position: absolute; inset: 0; animation: kenburns 30s ease-out infinite alternate; }
  .cta-cine .photo img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(0.65) saturate(85%) hue-rotate(-10deg); }
  .cta-cine .scrim{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 30, 22, 0.4) 0%, rgba(15, 30, 22, 0.78) 100%); }
  .cta-cine .content{ position: relative; z-index: 2; text-align: center; max-width: 760px; }
  .cta-cine .eyebrow{ color: var(--vilsa-stone-100); justify-content: center; margin-bottom: 24px; }
  .cta-cine .eyebrow::before{ background: var(--vilsa-stone-100); }
  .cta-cine h1.headline{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(56px, 8vw, 144px); line-height: 0.88; letter-spacing: -0.022em; color: var(--vilsa-paper);
    margin: 0;
  }
  .cta-cine h1.headline em{ font-style: italic; }
  .cta-cine p{ color: var(--vilsa-stone-100); font-size: 16.5px; line-height: 1.55; max-width: 48ch; margin: 28px auto 0; }
  .cta-cine .ctas{ margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

  /* ---------------- Footer ---------------- */
  footer{ background: var(--vilsa-ink); color: var(--vilsa-stone-100); padding: 80px var(--gutter) 32px; font-family: var(--font-sans); font-size: 13.5px; }
  footer .grid{ max-width: var(--container-wide); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid #2a2825; align-items: start; }
  footer .brand img{ height: 32px; filter: brightness(0) invert(1); margin-bottom: 18px; }
  footer .brand p{ color: var(--vilsa-stone-100); max-width: 32ch; line-height: 1.55; font-size: 14px; margin: 0 0 22px; }
  footer .brand p em{ font-style: italic; }
  footer .brand .certs{ display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--vilsa-stone-300); }
  footer .brand .certs span{ padding: 5px 9px; border: 1px solid #2f2c28; color: var(--vilsa-stone-100); }
  footer h5{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vilsa-paper); margin: 0 0 14px; font-weight: 500; }
  footer ul li{ margin-bottom: 8px; }
  footer a{ color: var(--vilsa-stone-100); }
  footer a:hover{ color: var(--vilsa-paper); opacity: 1; }
  footer .contact-line{ font-size: 13.5px; }
  footer .contact-line b{ display: block; color: var(--vilsa-paper); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 2px; }
  footer .legal{ max-width: var(--container-wide); margin: 24px auto 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--vilsa-stone-500); flex-wrap: wrap; gap: 18px; padding-top: 24px; }
  footer .footer-credit{ display: inline-flex; align-items: center; gap: 8px; }
  footer .footer-credit-link{ display: inline-flex; align-items: center; opacity: 0.85; transition: opacity 0.2s ease; }
  footer .footer-credit-link:hover{ opacity: 1; }
  footer .footer-credit-logo{ height: 20px; width: auto; display: block; }

  /* ================ LEVEL OVERRIDES ================ */

  /* ----- L1 · CALM — strip motion and decorative chrome ----- */
  body.lvl-1 .hero .photo { animation: none; }
  body.lvl-1 .hero .scroll-cue::after { animation: none; opacity: 0.4; }
  body.lvl-1 .marquee { display: none; }
  body.lvl-1 .heritage .visual .num { display: none; }
  body.lvl-1 .heritage .visual .badge { display: none; }
  /* Leaflet map pin pulse disabled on Calm; pin stays visible (positioning is Leaflet's, never touch its transform) */
  body.lvl-1 .vilsa-pin-core::before { animation: none; opacity: 0.25; }
  /* (proj-track animation-duration override is now a no-op — projects scroll manually) */
  body.lvl-1 .cta-cine .photo { animation: none; }
  body.lvl-1 .pcard { transition: none; }
  body.lvl-1 .pcard:hover { transform: none; }
  body.lvl-1 .pcard:hover .photo img { transform: none; }
  body.lvl-1 .pcard .copy .sub { opacity: 1; max-height: 200px; margin-top: 12px; }
  body.lvl-1 .cycle .panel:hover .photo img { transform: none; }
  body.lvl-1 .scard:hover .photo img { transform: none; }
  body.lvl-1 .proj-card:hover .photo img { transform: none; }

  /* ----- L3 · MAXIMUM — the big creative moves from A+ ----- */
  body.lvl-3 .hero .photo { animation-duration: 18s; }
  body.lvl-3 .marquee-track { animation-duration: 38s; font-size: 56px; }
  /* (proj-track animation-duration override is now a no-op — projects scroll manually) */
  body.lvl-3 .cta-cine .photo { animation-duration: 22s; }

  /* L3 · hero split-word entrance */
  body.lvl-3 .hero .headline em span {
    display: inline-block; opacity: 0; transform: translateY(40px);
    animation: rise 1s var(--ease-out) forwards;
  }
  body.lvl-3 .hero .headline em span.w1 { animation-delay: 0.45s; }
  body.lvl-3 .hero .headline em span.w2 { animation-delay: 0.65s; }
  body.lvl-3 .hero .headline em span.w3 { animation-delay: 0.85s; }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* L3 · mega "2003" outline with ink-fill on enter */
  body.lvl-3 .heritage .visual .num {
    font-size: clamp(180px, 26vw, 380px);
    left: -90px; bottom: -64px;
  }
  body.lvl-3 .heritage .visual .num .fill { display: inline-block; }
  body.lvl-3 .heritage.in-view .num .fill { animation: fill-num 1.6s 0.3s var(--ease-out) forwards; }
  @keyframes fill-num { to { width: 100%; } }

  /* L3 · text-mask quote — image-pattern revealed inside the letters.
     Size + image-source updated for the shorter quote + renamed asset. */
  body.lvl-3 .quote { background: var(--vilsa-paper); }
  body.lvl-3 .quote .text {
    font-size: clamp(36px, 5.2vw, 84px);
    line-height: 1.05;
    background-image:
      linear-gradient(180deg, rgba(26, 58, 42, 0.86), rgba(35, 74, 54, 0.86)),
      url("assets/photos/heritage-mieti-yard.jpg");
    background-size: cover; background-position: center;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* L3 · bigger heritage outline number */
  body.lvl-3 .heritage .copy h1.headline { font-size: clamp(48px, 6vw, 88px); }

  /* ================================================================
     ENTRANCE CHOREOGRAPHY — Huet-style slide/reveal motion
     - Page-load curtain
     - Section scroll-reveals (slide up, mask reveal, stagger)
     - Button slide-fill on hover
     - Arrow-link sliding underline
     ================================================================ */

  /* --- Page-load curtain (a forest sheet that lifts away) --- */
  .curtain{
    position: fixed; inset: 0; z-index: 200;
    background: var(--vilsa-forest);
    transform-origin: top;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .curtain .wm{
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    color: var(--vilsa-paper); font-size: clamp(48px, 7vw, 120px);
    letter-spacing: -0.02em; line-height: 1;
    opacity: 0; transform: translateY(20px);
    animation: curtainWm 700ms 80ms var(--ease-out) forwards;
  }
  .curtain .wm .dot{
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--vilsa-paper); margin: 0 14px 18px; vertical-align: middle;
    animation: curtainDot 600ms 220ms var(--ease-out) both;
    transform: scale(0);
  }
  @keyframes curtainWm{ to { opacity: 1; transform: none; } }
  @keyframes curtainDot{ to { transform: scale(1); } }
  body.curtain-up .curtain{
    animation: curtainLift 900ms 300ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
  }
  body.curtain-up .curtain .wm{
    animation: curtainWmOut 400ms 200ms var(--ease-out) forwards;
  }
  @keyframes curtainLift{
    0%   { transform: translateY(0); }
    100% { transform: translateY(-101%); }
  }
  @keyframes curtainWmOut{
    to { opacity: 0; transform: translateY(-12px); }
  }

  /* --- Generic slide-up reveal (default for sections) --- */
  .reveal{
    opacity: 0; transform: translateY(32px);
    transition:
      opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.in{ opacity: 1; transform: none; }

  /* Staggered children — set --i on each child or use auto via JS */
  .stagger > *{
    opacity: 0; transform: translateY(28px);
    transition:
      opacity 800ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .stagger.in > *{ opacity: 1; transform: none; }

  /* --- Photo mask-reveal: image slides up behind a clip --- */
  .mask-reveal{ position: relative; overflow: hidden; isolation: isolate; }
  .mask-reveal::after{
    content: ''; position: absolute; inset: 0; z-index: 4;
    background: var(--vilsa-cream);
    transform-origin: top;
    transition: transform 1100ms cubic-bezier(0.7, 0, 0.2, 1);
  }
  .mask-reveal.in::after{ transform: scaleY(0); transform-origin: bottom; }
  /* Bone/dark variants so the mask matches the surface */
  .mask-reveal.on-bone::after{ background: var(--vilsa-bone); }
  .mask-reveal.on-ink::after{ background: var(--vilsa-ink); }
  .mask-reveal.on-forest::after{ background: var(--vilsa-forest); }
  .mask-reveal.on-paper::after{ background: var(--vilsa-paper); }
  /* Photo inside also pushes up a touch for parallax */
  .mask-reveal img{
    transform: scale(1.06) translateY(20px);
    transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mask-reveal.in img{ transform: scale(1) translateY(0); }

  /* --- Headline clip-reveal — text slides up from inside a clip box --- */
  /* overflow: hidden was clipping H2 text horizontally when the headline
     wrapped (last word's tail letters got cut off). The slide-up reveal
     still works via the translateY transform — just not clipped to a box. */
  .clip-rise{ display: inline-block; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .clip-rise > .inner{
    display: inline-block;
    transform: translateY(110%);
    transition: transform 950ms cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .clip-rise.in > .inner, .stagger.in .clip-rise > .inner{ transform: translateY(0); }

  /* --- Eyebrow hairline rule grow-in --- */
  .eyebrow{ position: relative; }
  .reveal .eyebrow::before,
  .stagger .eyebrow::before{
    transform: scaleX(0); transform-origin: left;
    transition: transform 600ms 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .reveal.in .eyebrow::before,
  .stagger.in .eyebrow::before{ transform: scaleX(1); }

  /* ================================================================
     BUTTON SLIDE-FILL — a forest/paper block slides in from below
     ================================================================ */
  .btn{ position: relative; overflow: hidden; isolation: isolate; }
  .btn::before{
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--bg);
    transition: background var(--dur-fast);
  }
  .btn::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 100%; z-index: -1;
    background: var(--hover-bg, var(--vilsa-forest-2));
    transition: top var(--dur-base) cubic-bezier(0.7, 0, 0.2, 1);
  }
  .btn:hover::after{ top: 0; }
  /* Hover label/border colours move at the same speed as the slide-fill
     so the text always reads against whatever background is covering it. */
  .btn{ transition: background var(--dur-fast), color var(--dur-base) cubic-bezier(0.7, 0, 0.2, 1), border-color var(--dur-base) cubic-bezier(0.7, 0, 0.2, 1); }
  .btn--forest{ --hover-bg: var(--vilsa-forest-2); }
  .btn--forest:hover{ --bg: var(--vilsa-forest); }
  .btn--paper{ --hover-bg: var(--vilsa-ink); }
  .btn--paper:hover{ --fg: var(--vilsa-paper); --bd: var(--vilsa-ink); }
  .btn--ghost-paper{ --hover-bg: var(--vilsa-paper); }
  .btn--ghost-paper:hover{ --fg: var(--vilsa-ink); --bd: var(--vilsa-paper); }
  .btn--ghost{ --hover-bg: var(--vilsa-ink); }
  .btn--ghost:hover{ --fg: var(--vilsa-paper); --bd: var(--vilsa-ink); }

  /* Arrow links: sliding underline that resets right-to-left on leave */
  .arrow-link{
    position: relative;
    border-bottom: 0;
    padding-bottom: 6px;
  }
  .arrow-link::before{
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor;
    transform: scaleX(1); transform-origin: right;
    transition: transform 320ms var(--ease-out);
  }
  .arrow-link::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform 320ms var(--ease-out);
    transition-delay: 0ms;
  }
  .arrow-link:hover::before{ transform: scaleX(0); transition-duration: 200ms; }
  .arrow-link:hover::after{ transform: scaleX(1); transition-delay: 180ms; }

  /* Nav link underline slide */
  .nav ul.menu a{ position: relative; border-bottom: 0 !important; }
  .nav ul.menu a::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform 320ms var(--ease-out);
  }
  .nav ul.menu a:hover::after{ transform: scaleX(1); }

  /* Product card text-rise on hover */
  .pcard .copy h3{ transition: transform var(--dur-slow) var(--ease-out); }
  .pcard:hover .copy h3{ transform: translateY(-4px); }

  /* Service card body lift */
  .scard .body{ transition: transform var(--dur-slow) var(--ease-out); }
  .scard:hover .body{ transform: translateY(-4px); }

  /* --- L1 · CALM — strip the new motion --- */
  body.lvl-1 .curtain{ display: none; }
  body.lvl-1 .reveal{ opacity: 1 !important; transform: none !important; }
  body.lvl-1 .stagger > *{ opacity: 1 !important; transform: none !important; transition: none !important; }
  body.lvl-1 .mask-reveal::after{ display: none; }
  body.lvl-1 .mask-reveal img{ transform: none !important; }
  body.lvl-1 .clip-rise > .inner{ transform: none !important; }
  body.lvl-1 .reveal .eyebrow::before,
  body.lvl-1 .stagger .eyebrow::before{ transform: scaleX(1) !important; }
  body.lvl-1 .btn::after{ display: none; }
  body.lvl-1 .arrow-link::before,
  body.lvl-1 .arrow-link::after{ transition: none; }

  /* --- L3 · MAXIMUM — bigger, longer, more theatrical --- */
  body.lvl-3 .reveal{ transform: translateY(56px); transition-duration: 1100ms; }
  body.lvl-3 .stagger > *{ transform: translateY(48px); transition-duration: 1000ms; transition-delay: calc(var(--i, 0) * 110ms); }
  body.lvl-3 .mask-reveal::after{ transition-duration: 1300ms; }
  body.lvl-3 .mask-reveal img{ transform: scale(1.12) translateY(36px); transition-duration: 1700ms; }
  body.lvl-3 .clip-rise > .inner{ transition-duration: 1100ms; transition-delay: calc(var(--i, 0) * 120ms); }
  body.lvl-3 .curtain{ background: var(--vilsa-ink); }
  body.lvl-3 .curtain .wm{ font-size: clamp(72px, 11vw, 180px); }

  @media (prefers-reduced-motion: reduce){
    .curtain{ display: none; }
    .reveal, .stagger > *, .mask-reveal img, .clip-rise > .inner{
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .mask-reveal::after{ display: none; }
  }

  /* ================================================================
     HERITAGE & WARM PASS
     - Retires JetBrains Mono everywhere
     - Eyebrows become Instrument Serif italic w/ hairline underneath
     - Drops uppercase + heavy tracking on chrome labels
     - Replaces the giant "2003" with a pull-quote treatment
     ================================================================ */

  /* --- Eyebrow: serif italic with hairline below --- */
  .eyebrow{
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.2vw, 19px) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--vilsa-forest);
    display: inline-flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px !important;
    line-height: 1;
    padding-bottom: 8px;
    position: relative;
  }
  .eyebrow::before{
    content: '' !important;
    position: absolute;
    left: 0; bottom: 0;
    width: 44px !important; height: 0.5px !important;
    background: currentColor !important;
    opacity: 1 !important;
    display: block !important;
    transform-origin: left;
  }
  .hero .eyebrow-light,
  .map .head .eyebrow,
  .cta-cine .eyebrow{
    color: var(--vilsa-paper);
  }
  .cta-cine .eyebrow{ align-items: center !important; }
  .cta-cine .eyebrow::before{ left: 50%; transform: translateX(-50%); transform-origin: center; }

  /* Numbered eyebrow numerals (the "01 —" prefix) stay in serif italic */
  /* Drop the mono everywhere it appears as decorative chrome ---------- */
  .utility,
  .nav .brand span,
  .hero .stamp,
  .hero .side-stat,
  .hero .scroll-cue,
  .heritage .visual .stamp,
  .heritage .visual .badge,
  .trust .stat .label,
  .cycle-head .legend,
  .cycle .panel .photo .step-no,
  .cycle .panel .txt .spec,
  .cycle .nav-bar,
  .pcard .meta,
  .pcard .copy .spec,
  .p5 .spec,
  .p4 .spec,
  .scard .body .since,
  .quote .cite,
  .pin .lbl,
  .map .legend > div,
  .proj-card .meta,
  .proj-card .copy p,
  footer .brand .certs,
  footer h5,
  footer .legal{
    font-family: var(--font-sans) !important;
  }

  /* Softer letter-spacing + sentence case on most chrome labels */
  .utility,
  .nav .brand span,
  .hero .stamp,
  .hero .side-stat,
  .hero .scroll-cue,
  .heritage .visual .stamp,
  .trust .stat .label,
  .cycle-head .legend,
  .cycle .panel .photo .step-no,
  .cycle .panel .txt .spec,
  .cycle .nav-bar,
  .pcard .meta,
  .pcard .copy .spec,
  .p5 .spec,
  .p4 .spec,
  .scard .body .since,
  .quote .cite,
  .pin .lbl,
  .map .legend > div,
  .proj-card .meta,
  .proj-card .copy p,
  footer .brand .certs,
  footer h5,
  footer .legal{
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-weight: 500 !important;
  }

  /* Acronym chrome — keep tight uppercase, but no mono */
  footer .brand .certs span,
  .scard .body .since{
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
  }

  /* Quote / cite: serif italic feels right */
  .quote .cite{
    font-style: normal !important;
    font-size: 12px !important;
    color: var(--vilsa-stone-500);
  }
  .quote .cite b{ font-weight: 600 !important; letter-spacing: 0.04em !important; }

  /* Hero stamp — drop the corporate uppercase, lean editorial */
  .hero .stamp{ font-size: 13px !important; line-height: 1.5; opacity: 0.95; }
  .hero .stamp b{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; letter-spacing: -0.01em; }
  .hero .stamp .small{ display:block; margin-top: 6px; font-size: 11px; color: var(--vilsa-stone-100); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
  .hero .side-stat b{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -0.01em; color: var(--vilsa-paper); display: block; margin-bottom: 6px; }
  .hero .side-stat{ font-size: 12.5px; letter-spacing: 0.04em !important; }
  .hero .scroll-cue{ font-size: 10.5px; letter-spacing: 0.25em !important; text-transform: uppercase !important; opacity: 0.7; }

  /* Utility bar: small italic chip instead of mono caps */
  .utility{ font-size: 13px !important; letter-spacing: 0.02em !important; color: var(--vilsa-paper) !important; }
  .utility a{ color: var(--vilsa-paper) !important; opacity: 0.85; }
  .utility a:hover{ opacity: 1; }
  .utility .lang a{ opacity: 0.75; }
  .utility .lang a.on{ opacity: 1; }
  .utility b{ font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0 !important; font-size: 15px; color: var(--vilsa-paper); }

  /* Trust strip — number stays in serif (already), label warmer */
  .trust .stat .label{ font-size: 12px !important; letter-spacing: 0.06em !important; }
  .trust .stat .label .n{ font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--vilsa-stone-300); letter-spacing: 0; }

  /* Step numbers on cycle photos: serif italic numerals */
  .cycle .panel .photo .step-no{
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: rgba(0,0,0,0.35) !important;
    padding: 8px 14px !important;
  }
  .cycle .nav-bar{ font-size: 12.5px !important; letter-spacing: 0.04em !important; }

  /* Product card meta / spec lines: warmer */
  .pcard .meta,
  .proj-card .meta{
    font-size: 12px !important; letter-spacing: 0.04em !important;
    background: rgba(0,0,0,0.35);
    padding: 6px 10px;
  }
  .pcard .copy .spec,
  .p5 .spec,
  .p4 .spec,
  .proj-card .copy p{
    font-size: 12px !important; letter-spacing: 0.04em !important;
  }

  /* Footer */
  footer h5{ font-size: 12.5px !important; letter-spacing: 0.04em !important; font-weight: 600 !important; text-transform: none !important; color: var(--vilsa-paper); }
  footer .legal{ font-size: 11.5px !important; letter-spacing: 0.02em !important; text-transform: none !important; }

  /* Map legend chips — Heritage&Warm typography override */
  .map .legend > div{ font-size: 12px !important; letter-spacing: 0.04em !important; }

  /* ---------- HERITAGE — pull-quote replaces the giant 2003 ---------- */
  .heritage .visual{ aspect-ratio: 4 / 5.2; }
  .heritage .visual .num{ display: none !important; }
  body.lvl-3 .heritage .visual .num{ display: none !important; }
  .heritage .visual .badge{ display: none !important; }

  .heritage .visual .pull{
    position: absolute;
    left: -64px; right: 32px; bottom: -40px;
    background: var(--vilsa-cream);
    border-top: 1px solid var(--vilsa-forest);
    padding: 32px 36px 30px;
    z-index: 3;
    box-shadow: var(--shadow-3);
  }
  .heritage .visual .pull .mark{
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 36px; line-height: 1; color: var(--vilsa-forest);
    margin-bottom: 10px;
  }
  .heritage .visual .pull blockquote{
    font-family: var(--font-display); font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35;
    color: var(--vilsa-ink); margin: 0 0 18px; max-width: 32ch;
    letter-spacing: -0.005em;
  }
  .heritage .visual .pull blockquote em{ font-style: normal; color: var(--vilsa-forest); }
  .heritage .visual .pull .by{
    display: flex; align-items: center; gap: 14px;
    padding-top: 16px; border-top: 0.5px solid var(--vilsa-stone-100);
  }
  .heritage .visual .pull .by .mono{
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--vilsa-forest); color: var(--vilsa-paper);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-style: italic; font-size: 16px;
  }
  .heritage .visual .pull .by .who{
    font-family: var(--font-sans); font-size: 13px; line-height: 1.35; color: var(--vilsa-stone-500);
  }
  .heritage .visual .pull .by .who b{
    display: block; font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 17px; color: var(--vilsa-ink); letter-spacing: -0.005em;
  }
  @media (max-width: 960px){
    .heritage .visual .pull{ left: 0; right: 0; bottom: -24px; padding: 24px; }
  }

  /* Hero stamp's small label inside .stamp .small was added above */

  /* Eyebrow context overrides — re-tint for dark surfaces */
  .hero .eyebrow-light,
  .map .head .eyebrow,
  .cta-cine .eyebrow{
    color: var(--vilsa-paper) !important;
  }

  /* Calm level — eyebrow hairline always shown */
  body.lvl-1 .eyebrow::before{ transform: none !important; }

  /* ---------------- Responsive ---------------- */
  @media (max-width: 1100px){
    .heritage{ grid-template-columns: 1fr; }
    .heritage .visual{ aspect-ratio: 4 / 3; max-width: 540px; }
    .trust,
    .trust.trust--3{ grid-template-columns: 1fr 1fr; }
    .trust .stat{ border-right: 0; border-bottom: 1px solid rgba(245,239,228,0.08); }
    .services-grid{ grid-template-columns: 1fr; }
    .services-head{ grid-template-columns: 1fr; }
    .map .head{ grid-template-columns: 1fr; }
    .map .legend{ grid-template-columns: 1fr 1fr 1fr; }
    footer .grid{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px){
    /* Bump gutter on mobile — default clamp bottoms out at 20px which leaves
       almost no breathing room between text and the viewport edge. */
    :root{ --gutter: 28px; --utility-h: 36px; }
    .utility{ padding: 6px var(--gutter); min-height: 36px; font-size: 11.5px !important; gap: 12px; }
    .utility .left{ display: none; } /* drop brand description on mobile */
    .utility .right{ width: 100%; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
    .utility .right > span:first-child{ font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .utility .lang{ gap: 4px; flex-shrink: 0; }
    .utility .lang a{ font-size: 11.5px; }

    .nav{ padding: 10px var(--gutter); }
    .nav .brand span{ display: none; } /* drop "Kopš 2003" caption next to logo */
    .nav .brand img{ height: 22px; }
    .nav .nav-cta{ padding: 7px 12px; font-size: 11.5px; gap: 6px; }
    .nav .nav-cta .arr{ display: none; }
    .nav ul.menu{ display: none; }

    /* ---------- Hero mobile reflow ---------- */
    .hero .content{ padding: 96px 20px 56px; }
    .hero .headline{ font-size: clamp(36px, 9vw, 64px); max-width: none; }
    .hero .lead{ font-size: 14.5px; }
    .hero .stamp{ display: none; }
    .hero .bottom{ grid-template-columns: 1fr; }
    .hero .side{ display: none; }

    /* ---------- Section + grid reflows ---------- */
    .heritage .visual .num{ left: -20px; bottom: -10px; }
    .heritage .visual .badge{ right: 10px; top: 10px; width: 96px; height: 96px; }
    .prod-grid{ display: flex; flex-direction: column; gap: 16px; }
    .prod-grid > *{ grid-column: 1 / -1 !important; grid-row: auto !important; height: 320px; }
    .p4, .p5{ height: auto; min-height: 280px; }
    .cycle-head, .prod-head, .projects-head{ grid-template-columns: 1fr; }
    .prod-head .prod-actions{ align-items: flex-start; }
    footer .grid{ grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
    .marquee-track{ font-size: 32px; }

    /* ---------- Why VILSA mobile fit ---------- */
    .why-head h1.headline{ font-size: clamp(36px, 9vw, 56px); }

    /* ---------- Cert chips: single column on tiny screens ---------- */
    .certs-grid{ grid-template-columns: 1fr 1fr; }

    /* ---------- Process gallery mobile fit ----------
       Paragraph shortened in HTML; still add real breathing room
       between the head and the photo track. */
    .process-head p{ max-width: none; font-size: 14.5px; }
    .process-head{ padding-bottom: clamp(64px, 9vw, 110px); }
    .process-track{ margin-top: 8px; }

    /* ---------- Team grid mobile fit ---------- */
    .team-grid{ grid-template-columns: 1fr 1fr; gap: 16px; }
    .team-member figcaption b{ font-size: 17px; }
    .team-member figcaption span{ font-size: 12px; }

    /* ---------- Projects placeholder mobile fit ---------- */
    .projects-empty{ padding: 48px 20px; margin-top: 20px; }
    .projects-empty p:first-of-type{ font-size: clamp(24px, 6.5vw, 32px); }

    /* ---------- Prod-head bottom space on mobile ----------
       The .pcard p1 lifts 6px on hover; without a buffer the action
       links ("Visi produkti", "Cenrādis PDF") overlap the photo. */
    .prod-head{ padding-bottom: clamp(48px, 6vw, 80px); }

    /* ---------- Certs strip bottom space on mobile ----------
       Bottom row of chips was bleeding into the next section. */
    .certs-strip{ padding-bottom: clamp(56px, 7vw, 96px); }

    /* ---------- Cycle head: tighter gap to first panel on mobile ----------
       The clamp(32,3vw,56) bottom + align-end whitespace combined into
       an awkwardly large gap between the H2 and the cycle photos. */
    .cycle-head{ padding-bottom: 12px; align-items: start; }
  }
  @media (max-width: 420px){
    .certs-grid{ grid-template-columns: 1fr; }
    .utility .right > span:first-child{ font-size: 10.5px; }
  }

  /* ================================================================
     CLIENT-ALIGN PASS (2026-05-28)
     - LV-only visibility utility
     - Buyback banner section (LV-only "Iepērkam sīkbaļķus")
     - Footer contacts column stacking for 5 team contacts
  ================================================================ */

  /* --- LV-only visibility: extends naturally when locale switches --- */
  html:not([lang="lv"]) [data-lv-only]{ display: none !important; }

  /* --- Buyback banner ---
     Tightened padding (was clamp 72-112px, now 40-72px) so the
     section reads as a compact strip, not an empty section. Added
     a decorative giant LV chip on the right edge for visual weight. */
  .buyback{
    background: var(--vilsa-bone);
    padding: clamp(40px, 5vw, 72px) var(--gutter);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
  }
  .buyback::before{
    /* Decorative oversized "LV" stamp on the right — fills empty space without
       being a content element. Same trick as the .quote-mark on the quote section. */
    content: 'LV';
    position: absolute; right: clamp(0px, 3vw, 60px); top: 50%; transform: translateY(-50%);
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(160px, 22vw, 320px); line-height: 0.85;
    color: var(--vilsa-forest); opacity: 0.06;
    pointer-events: none; user-select: none;
  }
  .buyback-inner{
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .buyback-copy .eyebrow{ margin-bottom: 4px; }
  .buyback-copy h3{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.018em;
    color: var(--vilsa-ink);
    margin: 10px 0 12px;
    max-width: 16ch;
  }
  .buyback-copy h3 em{ font-style: italic; color: var(--vilsa-forest); }
  .buyback-copy p{
    color: var(--vilsa-stone-500);
    font-size: 15px;
    line-height: 1.55;
    max-width: 52ch;
    margin: 0;
  }
  .buyback-cta{ display: flex; justify-content: flex-end; }
  @media (max-width: 760px){
    .buyback-inner{ grid-template-columns: 1fr; }
    .buyback-cta{ justify-content: flex-start; }
    .buyback::before{ font-size: clamp(120px, 36vw, 200px); opacity: 0.05; }
  }

  /* --- Footer contacts column: 5 contacts stacked tight --- */
  footer .footer-contacts .contact-line + .contact-line{
    margin-top: 16px;
  }

  /* ============================================================
     TWEAKS PANEL (dev-only floating variant switcher)
     Pinned bottom-right, sits above everything. Lets the team A/B
     compare design variants (fonts now, map next) without rebuilds.
     ============================================================ */
  .vilsa-tweaks-fab{
    position: fixed; bottom: 18px; right: 18px; z-index: 100000;
    background: var(--vilsa-ink); color: var(--vilsa-paper);
    padding: 10px 16px; font: 700 12px/1 var(--font-mono);
    letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid var(--vilsa-stone-700); border-radius: 100px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    transition: transform 160ms ease, background 160ms ease;
  }
  .vilsa-tweaks-fab:hover{ transform: translateY(-1px); background: var(--vilsa-stone-700); }
  .vilsa-tweaks-fab__dot{
    width: 8px; height: 8px; border-radius: 100px;
    background: var(--vilsa-timber);
  }

  .vilsa-tweaks-panel{
    position: fixed; bottom: 72px; right: 18px; z-index: 99999;
    width: 320px; max-width: calc(100vw - 36px);
    /* Cap to viewport minus FAB strip + margins, then scroll the
       panel internally when its content overflows. Without this,
       adding the italic section pushed the Map section + hint past
       the viewport bottom with no way to scroll to them. */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    background: var(--vilsa-paper); color: var(--vilsa-ink);
    border: 1px solid var(--vilsa-stone-100); border-radius: 14px;
    padding: 0; font-family: var(--font-sans);
    box-shadow: 0 24px 48px rgba(0,0,0,0.22);
  }
  .vilsa-tweaks-panel__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--vilsa-stone-50);
    font-size: 13px; letter-spacing: 0.02em;
  }
  .vilsa-tweaks-panel__close{
    background: transparent; border: none; padding: 2px 6px;
    cursor: pointer; color: var(--vilsa-stone-500); font-size: 14px;
    font-family: var(--font-mono);
  }
  .vilsa-tweaks-panel__close:hover{ color: var(--vilsa-ink); }

  .vilsa-tweaks-section{
    padding: 12px 16px; border-bottom: 1px solid var(--vilsa-stone-50);
  }
  .vilsa-tweaks-section:last-of-type{ border-bottom: none; }
  .vilsa-tweaks-section h4{
    margin: 0 0 8px; font: 700 10.5px/1 var(--font-mono);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--vilsa-stone-500);
  }
  .vilsa-tweaks-opt{
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin: 2px -10px;
    border-radius: 8px; cursor: pointer; font-size: 13px;
    transition: background 120ms ease;
  }
  .vilsa-tweaks-opt:hover{ background: var(--vilsa-stone-50); }
  .vilsa-tweaks-opt.is-active{ background: var(--vilsa-bone); font-weight: 600; }
  .vilsa-tweaks-opt input[type="radio"]{ margin: 0; accent-color: var(--vilsa-ink); }

  .vilsa-tweaks-panel__hint{
    margin: 0; padding: 10px 16px 14px;
    font-size: 11px; color: var(--vilsa-stone-500); line-height: 1.4;
  }

  @media (max-width: 540px){
    .vilsa-tweaks-fab{ bottom: 14px; right: 14px; padding: 8px 12px; }
    .vilsa-tweaks-panel{ bottom: 62px; right: 14px; }
  }

  /* ============================================================
     MAP VARIANT V2 - Light parchment treatment of the same SVG.
     ============================================================ */
  .viz--v2{
    background: var(--vilsa-paper);
    border: 1px solid var(--vilsa-stone-50);
  }
  .viz--v2 .vilsa-map-img{
    filter: invert(1) hue-rotate(180deg) sepia(0.15) saturate(1.2) brightness(0.95);
    opacity: 0.85;
  }
  .viz--v2 .vilsa-spokes line{
    stroke: var(--vilsa-rust);
    stroke-width: 0.18;
    stroke-opacity: 0.55;
    stroke-dasharray: 0.4 0.6;
  }
  .viz--v2 .map-pin__dot{
    background: var(--vilsa-bark);
    box-shadow: 0 0 0 2px var(--vilsa-paper), 0 0 0 3px var(--vilsa-bark);
  }
  .viz--v2 .map-pin__dot--hub{
    background: var(--vilsa-rust);
    box-shadow: 0 0 0 3px var(--vilsa-paper), 0 0 0 5px var(--vilsa-rust);
  }
  .viz--v2 .map-hub__ring{
    border-color: rgba(168, 107, 60, 0.35);
  }
  .viz--v2 .map-pin__label{
    color: var(--vilsa-ink);
    background: rgba(245, 239, 228, 0.92);
    border: 1px solid var(--vilsa-stone-50);
  }

  /* ============================================================
     MAP VARIANT V3 - Typographic country list, no map at all.
     ============================================================ */
  .viz--v3{
    padding: 56px clamp(20px, 4vw, 64px);
    background: var(--vilsa-forest);
    color: var(--vilsa-paper);
    border-radius: 12px;
  }
  .viz-v3-hub{
    display: flex; align-items: baseline; gap: 18px;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(245, 246, 238, 0.18);
  }
  .viz-v3-hub__label{
    font: 500 clamp(40px, 6vw, 80px)/1.0 var(--font-display);
    color: var(--vilsa-paper);
    letter-spacing: -0.02em;
  }
  .viz-v3-hub__sub{
    font: 700 11px/1 var(--font-mono);
    letter-spacing: 0.22em;
    color: var(--vilsa-timber);
  }
  .viz-v3-list{
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px 28px;
  }
  .viz-v3-list__item{
    display: flex; align-items: baseline; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(245, 246, 238, 0.12);
  }
  .viz-v3-list__num{
    font: 700 11px/1 var(--font-mono);
    color: var(--vilsa-timber);
    letter-spacing: 0.12em;
    min-width: 22px;
  }
  .viz-v3-list__label{
    font: 400 clamp(20px, 2vw, 28px)/1.1 var(--font-display);
    color: var(--vilsa-paper);
    letter-spacing: -0.01em;
  }
  @media (max-width: 540px){
    .viz--v3{ padding: 32px 20px; }
    .viz-v3-list{ grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  }

  /* ============================================================
     MAP VARIANT V4 - Latvia-centric radial (no geographic map).
     ============================================================ */
  .viz--v4{
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 720px;
    margin: 0 auto;
    background: var(--vilsa-forest);
    color: var(--vilsa-paper);
    border-radius: 50%;
    overflow: hidden;
  }
  .viz-v4-svg{
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .viz-v4-ring{
    fill: none;
    stroke: rgba(245, 246, 238, 0.18);
    stroke-width: 0.2;
    stroke-dasharray: 0.6 0.8;
  }
  .viz-v4-spoke{
    stroke: rgba(176, 134, 84, 0.4);
    stroke-width: 0.15;
  }
  .viz-v4-hub{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    z-index: 3;
  }
  .viz-v4-hub__label{
    font: 500 clamp(28px, 4vw, 56px)/1 var(--font-display);
    color: var(--vilsa-paper);
    letter-spacing: -0.02em;
  }
  .viz-v4-pin{
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .viz-v4-pin__label{
    display: inline-block;
    padding: 6px 10px;
    background: rgba(26, 58, 42, 0.85);
    border: 1px solid rgba(176, 134, 84, 0.4);
    border-radius: 4px;
    font: 500 13px/1 var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--vilsa-paper);
    white-space: nowrap;
  }
  .viz-v4-pin--out .viz-v4-pin__label{
    font-size: 11px;
    background: rgba(26, 58, 42, 0.6);
    color: var(--vilsa-stone-100);
  }
  @media (max-width: 720px){
    .viz--v4{ border-radius: 24px; }
    .viz-v4-pin__label{ font-size: 10px; padding: 4px 7px; }
  }

  /* ============================================================
     MAP VARIANT V5 - Big stat focus, no map.
     ============================================================ */
  .viz--v5{
    padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 64px);
    background: var(--vilsa-forest);
    color: var(--vilsa-paper);
    border-radius: 12px;
    text-align: center;
  }
  .viz-v5-stat{
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-bottom: 40px;
  }
  .viz-v5-stat__num{
    font: 500 clamp(140px, 22vw, 280px)/0.85 var(--font-display);
    color: var(--vilsa-paper);
    letter-spacing: -0.04em;
    display: inline-flex; align-items: flex-start;
  }
  .viz-v5-stat__plus{
    font-size: 0.55em;
    color: var(--vilsa-timber);
    letter-spacing: 0;
    margin-left: 0.05em;
    margin-top: 0.05em;
  }
  .viz-v5-stat__unit{
    font: 700 12px/1 var(--font-mono);
    letter-spacing: 0.24em;
    color: var(--vilsa-timber);
  }
  .viz-v5-countries{
    margin: 0; padding: 0;
    font: 400 clamp(16px, 1.8vw, 22px)/1.6 var(--font-display);
    color: var(--vilsa-paper);
    max-width: 720px; margin-left: auto; margin-right: auto;
    letter-spacing: 0.01em;
  }
  .viz-v5-sep{
    color: var(--vilsa-timber);
    margin: 0 0.4em;
  }

  /* ============================================================
     MAP SECTION V2 - Hub-and-spokes table (nordbus style)
     Headline strip on top, then 2-col destinations table + small
     map side-by-side, then 4 stat blocks across the bottom.
     ============================================================ */
  .map--v2{
    background: var(--vilsa-paper);
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 64px);
    color: var(--vilsa-ink);
    position: relative; z-index: 1; isolation: isolate;
  }
  .map--v2::after{
    content: ''; position: absolute; inset: 0;
    background: var(--vilsa-paper); z-index: -1;
  }
  .map-v2-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .map-v2-left{
    display: flex; flex-direction: column;
  }
  .map-v2-left .headline{
    font: 500 clamp(36px, 4.4vw, 64px)/1.05 var(--font-display);
    letter-spacing: -0.02em;
    margin: 8px 0 16px;
  }
  .map-v2-left .headline em{ font-style: italic; }
  .map-v2-lead{
    color: var(--vilsa-stone-500); max-width: 48ch;
    font-size: 15px; line-height: 1.55;
    margin: 0 0 32px;
  }
  .map-v2-table{
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  }
  .map-v2-col__head{
    font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--vilsa-rust);
    margin: 0 0 12px; padding-bottom: 10px;
    border-bottom: 1px solid var(--vilsa-stone-100);
  }
  .map-v2-row{
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 0; border-bottom: 1px solid var(--vilsa-stone-50);
  }
  .map-v2-row__label{
    font: 500 16px/1.2 var(--font-display); color: var(--vilsa-ink);
  }
  .map-v2-row__meta{
    font: 700 10px/1 var(--font-mono); letter-spacing: 0.12em;
    color: var(--vilsa-stone-300);
  }
  .map-v2-viz{
    position: relative; aspect-ratio: 4 / 3;
    width: 100%; max-width: 520px; margin-left: auto;
    background: var(--vilsa-bone); border: 1px solid var(--vilsa-stone-50);
    border-radius: 12px; overflow: hidden;
  }
  .map-v2-viz__img{
    /* match V1: contain so the SVG renders at its natural proportions
       and the pin's percentage coordinates land on the right country.
       cover crops and shifts coordinates, which is why Latvia ended
       up over Sweden. */
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: contain;
    object-position: center;
    filter: invert(1) hue-rotate(180deg) sepia(0.2) brightness(0.96);
    opacity: 0.55;
  }
  .map-v2-hub{
    position: absolute; transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 8px;
  }
  .map-v2-hub__dot{
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--vilsa-rust);
    box-shadow: 0 0 0 4px rgba(168, 107, 60, 0.25);
  }
  .map-v2-hub__label{
    font: 700 12px/1 var(--font-mono); letter-spacing: 0.04em;
    background: var(--vilsa-ink); color: var(--vilsa-paper);
    padding: 5px 9px; border-radius: 4px;
  }
  .map-v2-stats{
    margin-top: 56px; padding-top: 32px;
    border-top: 1px solid var(--vilsa-stone-100);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  }
  .map-v2-stat b{
    display: block; font: 500 clamp(28px, 3vw, 44px)/1 var(--font-display);
    letter-spacing: -0.02em; margin-bottom: 6px;
  }
  .map-v2-stat span{
    font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--vilsa-stone-500);
  }
  @media (max-width: 920px){
    .map-v2-grid{ grid-template-columns: 1fr; }
    .map-v2-stats{ grid-template-columns: 1fr 1fr; }
    .map-v2-viz{ min-height: 360px; aspect-ratio: 16 / 10; }
  }

  /* ============================================================
     MAP SECTION V3 - Stats dominate (huge 30+ + flowing countries)
     ============================================================ */
  .map--v3{
    background: var(--vilsa-forest);
    color: var(--vilsa-paper);
    padding: clamp(64px, 8vw, 128px) clamp(20px, 4vw, 64px);
    text-align: center;
  }
  .map-v3-inner{ max-width: 1100px; margin: 0 auto; }
  .map-v3-head{ margin-bottom: 48px; }
  .map-v3-head .eyebrow{
    color: var(--vilsa-timber);
  }
  .map-v3-head .eyebrow::before{ background: var(--vilsa-timber); }
  .map-v3-head .headline{
    color: var(--vilsa-paper);
    font: 500 clamp(40px, 5vw, 72px)/1.08 var(--font-display);
    letter-spacing: -0.02em;
    margin: 8px 0 0;
  }
  .map-v3-head .headline em{ font-style: italic; }
  .map-v3-photo{
    margin: 0 auto 40px; padding: 0; max-width: 980px;
    border-radius: 12px; overflow: hidden;
    aspect-ratio: 16 / 9;
    position: relative; background: var(--vilsa-stone-700);
  }
  .map-v3-photo img{
    width: 100%; height: 100%; object-fit: cover;
    display: block;
  }
  .map-v3-photo__caption{
    position: absolute; left: 20px; bottom: 16px;
    font: 700 11px/1 var(--font-mono); letter-spacing: 0.22em;
    color: var(--vilsa-paper);
    background: rgba(26, 24, 22, 0.55); backdrop-filter: blur(4px);
    padding: 7px 11px; border-radius: 4px;
  }
  .map-v3-countries{
    max-width: 800px; margin: 0 auto 40px;
    font: 400 clamp(20px, 2.1vw, 32px)/1.5 var(--font-display);
    color: var(--vilsa-paper);
    letter-spacing: -0.005em;
  }
  .map-v3-sep{ color: var(--vilsa-timber); margin: 0 0.3em; }
  .map-v3-lead{
    color: rgba(245, 246, 238, 0.7);
    max-width: 56ch; margin: 0 auto;
    font-size: 15px; line-height: 1.6;
  }

  /* ============================================================
     MAP SECTION V4 - Typographic country wall
     Aside on the left holds the headline, lead, and origin badge;
     right column is a 3-col tile grid of country names. No map.
     ============================================================ */
  .map--v4{
    background: var(--vilsa-cream) !important;
    padding: clamp(56px, 7vw, 112px) clamp(20px, 4vw, 64px);
    color: var(--vilsa-ink);
    position: relative; z-index: 1; isolation: isolate;
    text-align: center;
  }
  .map--v4::before,
  .map--v4::after{
    content: ''; position: absolute; inset: 0;
    background: var(--vilsa-cream); z-index: -1;
    pointer-events: none;
  }
  .map-v4-inner{
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    gap: 48px;
  }
  .map-v4-head{
    max-width: 820px;
  }
  .map-v4-head .eyebrow::before{ left: 50%; transform: translateX(-50%); }
  .map-v4-head .headline{
    font: 500 clamp(40px, 4.8vw, 72px)/1.05 var(--font-display);
    letter-spacing: -0.02em;
    margin: 12px 0 16px;
  }
  .map-v4-head .headline em{ font-style: italic; }
  .map-v4-lead{
    color: var(--vilsa-stone-500); max-width: 56ch;
    margin: 0 auto;
    font-size: 15px; line-height: 1.6;
  }
  .map-v4-stats{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--vilsa-stone-100);
    border-bottom: 1px solid var(--vilsa-stone-100);
  }
  .map-v4-stat{
    padding: clamp(24px, 3vw, 36px) 16px;
    border-right: 1px solid var(--vilsa-stone-50);
    text-align: center;
  }
  .map-v4-stat:last-child{ border-right: none; }
  .map-v4-stat b{
    display: block;
    font: 500 clamp(40px, 4.6vw, 64px)/1 var(--font-display);
    letter-spacing: -0.02em; margin-bottom: 10px;
  }
  .map-v4-stat span{
    font: 700 10.5px/1.3 var(--font-mono); letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--vilsa-stone-500);
  }
  .map-v4-list{
    max-width: 920px; margin: 0;
    font: 700 11px/2.1 var(--font-mono);
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--vilsa-ink);
  }
  .map-v4-list__sep{ color: var(--vilsa-rust); margin: 0 0.2em; }
  .map-v4-origin{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px; background: var(--vilsa-ink); color: var(--vilsa-paper);
    border-radius: 100px;
  }
  .map-v4-origin__dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--vilsa-rust);
    box-shadow: 0 0 0 3px rgba(168, 107, 60, 0.3);
  }
  .map-v4-origin__label{
    font: 500 18px/1 var(--font-display);
    letter-spacing: -0.01em;
  }
  .map-v4-origin__sub{
    font: 700 10px/1 var(--font-mono); letter-spacing: 0.2em;
    color: var(--vilsa-timber);
  }
  @media (max-width: 820px){
    .map-v4-stats{ grid-template-columns: 1fr 1fr; }
    .map-v4-stat:nth-child(2n){ border-right: none; }
    .map-v4-stat:nth-child(1), .map-v4-stat:nth-child(2){
      border-bottom: 1px solid var(--vilsa-stone-50);
    }
  }

  /* ============================================================
     TRUST STATS: tighter mobile so the "00 GADI" label row does
     not crash into the big serif number or its neighbour cell.
     ============================================================ */
  @media (max-width: 720px){
    .trust,
    .trust.trust--3{ grid-template-columns: 1fr; }
    .trust .stat{
      padding: 28px var(--gutter) 32px;
      border-right: 0;
      border-bottom: 1px solid rgba(245,239,228,0.08);
    }
    .trust .stat:last-child{ border-bottom: 0; padding-bottom: 56px; }
    .trust .stat:first-child{ padding-top: 40px; }
    .trust .stat .label{
      display: flex; justify-content: flex-start;
      align-items: baseline; gap: 14px;
      margin-bottom: 12px;
    }
    .trust .stat .label .n{
      font-family: var(--font-display); font-style: italic;
      font-size: 18px; letter-spacing: 0;
      color: var(--vilsa-stone-300);
      min-width: 28px;
    }
    .trust .stat .val{ font-size: clamp(48px, 14vw, 80px); }
    .trust .stat .blurb{ margin-top: 10px; max-width: none; font-size: 14px; }
  }

  /* ============================================================
     ROUND 2: italic toggle, V3 statement line, cycle video frame
     ============================================================ */

  /* When italic toggle is OFF (default), every <em> on the page
     renders upright, AND the hero <h1 class="headline"> which is the
     only headline with font-style: italic on the H1 itself (other
     sections only italicise the em children, which the em selector
     above already covers). !important is here because per-section
     rules like .heritage .copy h1.headline em or .hero .headline
     have specificity (0,3,1) and were beating (0,2,1). */
  body[data-italic="off"] em,
  body[data-italic="off"] .hero .headline{ font-style: normal !important; }

  /* V3 statement line — replaces the long flowing country list with
     a single editorial statement. Big serif, calm letter-spacing. */
  .map-v3-statement{
    max-width: 800px; margin: 0 auto 40px;
    font: 400 clamp(22px, 2.4vw, 36px)/1.4 var(--font-display);
    color: var(--vilsa-paper);
    letter-spacing: -0.005em;
    text-align: center;
  }

  /* Cycle production video — full-width 16:9 frame between the
     section head and the scrollable steps. Rounded, bone-tinted
     border so it sits in the cream / bone surface naturally. */
  .cycle-video{
    max-width: var(--container-wide); margin: 0 auto;
    padding: 0 var(--gutter) clamp(24px, 3vw, 40px);
  }
  .cycle-video__frame{
    position: relative; aspect-ratio: 16 / 9;
    background: var(--vilsa-ink);
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--vilsa-stone-50);
  }
  .cycle-video__frame iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }

  /* ============================================================
     CYCLE HEAD: 2-col layout with the production video as the right
     column. Replaces the standalone .cycle-video frame that sat
     under the head and read as a foreign loud element.
     ============================================================ */
  .cycle-head__copy{
    display: flex; flex-direction: column; gap: 22px;
  }
  /* Legend + video-tag rendered in the display family (same as the
     headline) at a quiet body size, no caps, no letter-spacing, no
     mono. Result: the cycle head uses one font family throughout
     (display serif, with italic reserved for the eyebrow). */
  .cycle-head__legend,
  .cycle-head__video-tag{
    margin: 0;
    font: 400 15px/1.55 var(--font-display);
    letter-spacing: 0;
    text-transform: none;
    color: var(--vilsa-stone-500);
  }
  .cycle-head__legend{ max-width: 44ch; white-space: pre-line; }
  .cycle-head__video-tag{ display: inline-block; font-style: italic; }
  .cycle-head__video{
    position: relative; aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--vilsa-ink);
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--vilsa-stone-50);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  }
  .cycle-head__video iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
  }
  @media (max-width: 920px){
    .cycle-head{ grid-template-columns: 1fr; gap: 32px; }
    .cycle-head__video{ order: 2; }
  }
  @media (max-width: 720px){
    /* Give the video card breathing room before the first cycle panel
       starts, so the two visual elements don't crowd each other. */
    .cycle-head{ padding-bottom: 48px; padding-top: 72px; gap: 24px; }
    .cycle-head h1.headline{ font-size: clamp(30px, 8vw, 42px); }
    /* Panels should not lock to 560px on a small phone. Let each panel
       shrink to natural content height so photo + text sit tight,
       no giant blank gap between them. */
    .cycle .panel{
      flex-basis: 82vw; height: auto; min-height: 0;
      grid-template-rows: auto auto;
    }
    .cycle .panel .photo{ aspect-ratio: 4/3; min-height: 220px; }
    .cycle .panel .txt{
      padding: 20px 22px 28px;
      justify-content: flex-start;
      gap: 10px;
    }
    .cycle-head .legend{ text-align: left; }
  }

  /* ============================================================
     Cycle video: custom poster + click-to-play overlay
     ============================================================ */
  .cycle-head__video-play{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; padding: 0;
    background: var(--vilsa-ink);
    cursor: pointer; display: block;
    color: var(--vilsa-ink);
  }
  .cycle-head__video-poster{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cycle-head__video-scrim{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.55) 100%);
    transition: opacity 300ms ease;
  }
  .cycle-head__video-play-icon{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 76px; height: 76px;
    display: flex; align-items: center; justify-content: center;
    background: var(--vilsa-paper);
    color: var(--vilsa-ink);
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), background 220ms ease;
  }
  .cycle-head__video-play-icon svg{ margin-left: 4px; }
  .cycle-head__video-caption{
    position: absolute; left: 20px; bottom: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 2px;
    color: var(--vilsa-paper);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
  .cycle-head__video-caption b{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: -0.01em;
  }
  .cycle-head__video-caption span{
    font: 700 10.5px/1 var(--font-mono);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--vilsa-timber);
  }
  .cycle-head__video-play:hover .cycle-head__video-poster{
    transform: scale(1.03);
  }
  .cycle-head__video-play:hover .cycle-head__video-play-icon{
    transform: translate(-50%, -50%) scale(1.06);
  }
  .cycle-head__video-play:focus-visible{
    outline: 2px solid var(--vilsa-rust);
    outline-offset: 4px;
  }

  /* Team member placeholder when no photo is uploaded yet. Renders
     the initials inside the same square the img would have filled,
     so the row geometry stays consistent across members. */
  .team-photo-placeholder{
    position: absolute; inset: 0;
    background: linear-gradient(160deg, var(--vilsa-bone) 0%, var(--vilsa-stone-50) 100%);
    color: var(--vilsa-stone-500);
    display: flex; align-items: center; justify-content: center;
  }
  .team-photo-placeholder span{
    font: 400 clamp(48px, 7vw, 88px)/1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--vilsa-stone-300);
    user-select: none;
  }

  /* ============================================================
     Cookie consent banner + preferences bubble
     Mounted from src/components/CookieBanner.jsx on every route.
     ============================================================ */
  .cookie-banner{
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9500;
    max-width: 760px; margin: 0 auto;
    background: var(--vilsa-forest, #1a3a2a); color: var(--vilsa-paper, #f5f1e8);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(10, 24, 16, 0.42), 0 2px 6px rgba(10, 24, 16, 0.18);
    animation: cookie-slide-up 260ms ease-out;
  }
  @keyframes cookie-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .cookie-banner-inner{
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 20px;
    padding: 18px 22px;
    align-items: center;
  }
  @media (max-width: 720px){
    .cookie-banner-inner{ grid-template-columns: 1fr; padding: 16px 18px; }
  }
  .cookie-banner-content{ min-width: 0; }
  .cookie-banner-title{
    font: 500 15px/1.3 var(--font-body, system-ui);
    letter-spacing: 0.01em; margin: 0 0 6px;
    color: var(--vilsa-paper, #f5f1e8);
  }
  .cookie-banner-body{
    margin: 0; font: 400 13.5px/1.55 var(--font-body, system-ui);
    color: rgba(245, 241, 232, 0.86);
  }
  .cookie-banner-link{
    color: var(--vilsa-paper, #f5f1e8);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .cookie-banner-link:hover{ color: #fff; }
  .cookie-banner-current{
    margin: 10px 0 0; font-size: 12.5px;
    color: rgba(245, 241, 232, 0.72);
  }
  .cookie-banner-current strong{ color: var(--vilsa-paper, #f5f1e8); font-weight: 600; }
  .cookie-banner-actions{
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  @media (max-width: 720px){
    .cookie-banner-actions{ justify-content: flex-end; }
  }
  .cookie-btn{
    appearance: none; border: 1px solid transparent; border-radius: 999px;
    padding: 9px 18px; font: 500 13px/1 var(--font-body, system-ui);
    letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
    transition: background 160ms, color 160ms, border-color 160ms, transform 120ms;
  }
  .cookie-btn:active{ transform: translateY(1px); }
  .cookie-btn--primary{
    background: var(--vilsa-paper, #f5f1e8); color: var(--vilsa-forest, #1a3a2a);
    border-color: var(--vilsa-paper, #f5f1e8);
  }
  .cookie-btn--primary:hover{ background: #fff; border-color: #fff; }
  .cookie-btn--ghost{
    background: transparent; color: var(--vilsa-paper, #f5f1e8);
    border-color: rgba(245, 241, 232, 0.4);
  }
  .cookie-btn--ghost:hover{ border-color: rgba(245, 241, 232, 0.8); background: rgba(245, 241, 232, 0.08); }
  .cookie-btn--link{
    background: transparent; color: rgba(245, 241, 232, 0.85);
    border-color: transparent; padding-inline: 8px;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .cookie-btn--link:hover{ color: var(--vilsa-paper, #f5f1e8); }

  .cookie-banner-close{
    position: absolute; top: 10px; right: 10px;
    background: transparent; border: 0; padding: 6px;
    color: rgba(245, 241, 232, 0.6); cursor: pointer;
    border-radius: 6px;
  }
  .cookie-banner-close:hover{ color: var(--vilsa-paper, #f5f1e8); background: rgba(245, 241, 232, 0.08); }
  .cookie-banner-close:focus-visible{ outline: 2px solid var(--vilsa-paper, #f5f1e8); outline-offset: 2px; }

  .cookie-prefs{
    display: grid; gap: 10px; margin-top: 14px;
    padding-top: 14px; border-top: 1px solid rgba(245, 241, 232, 0.15);
  }
  .cookie-pref{
    display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: start;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(245, 241, 232, 0.05);
    font-size: 13px;
    cursor: pointer;
  }
  .cookie-pref input[type="checkbox"]{
    width: 16px; height: 16px; margin-top: 2px;
    accent-color: var(--vilsa-paper, #f5f1e8);
    cursor: pointer;
  }
  .cookie-pref--locked{ cursor: default; opacity: 0.85; }
  .cookie-pref--locked input{ cursor: not-allowed; }
  .cookie-pref strong{
    display: block; font-weight: 600; margin-bottom: 2px;
    color: var(--vilsa-paper, #f5f1e8);
  }
  .cookie-pref-desc{
    display: block; color: rgba(245, 241, 232, 0.72);
    font-size: 12.5px; line-height: 1.45;
  }

  .cookie-bubble{
    position: fixed; left: 16px; bottom: 16px; z-index: 9400;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--vilsa-forest, #1a3a2a); color: var(--vilsa-paper, #f5f1e8);
    border: 1px solid rgba(245, 241, 232, 0.2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 6px 18px rgba(10, 24, 16, 0.3);
    transition: transform 160ms, box-shadow 160ms, background 160ms;
  }
  .cookie-bubble:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 24, 16, 0.36); background: var(--vilsa-forest-2, #234c5a); }
  .cookie-bubble:focus-visible{ outline: 2px solid var(--vilsa-forest, #1a3a2a); outline-offset: 3px; }
  @media (max-width: 720px){
    .cookie-bubble{ left: 12px; bottom: 12px; width: 42px; height: 42px; }
  }

  /* Partner logo(s) shown inside IntroBlock, below the description
     paragraphs. Single logo (Tornado on /produkti/zogi/) or a
     horizontal strip (Celcure + CTB on /pakalpojumi/impregnesana/).
     No background/border - logos sit directly on the section bg. */
  .sp-partner-logo{
    display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin: 22px 0 6px;
  }
  .sp-partner-logo a, .sp-partner-logo img{
    display: block;
  }
  .sp-partner-logo img{
    height: 48px; width: auto; object-fit: contain;
    max-width: 220px;
    mix-blend-mode: multiply;
  }

  /* SubpageConfigurator kind: "text" / "textarea" free-input step.
     Matches the dark forest .med-cfg shell. */
  .med-cfg-textinput{ margin-top: 6px; }
  .med-cfg-textinput input,
  .med-cfg-textinput textarea{
    width: 100%; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(245, 241, 232, 0.25);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--vilsa-paper, #f5f1e8);
    font: 400 15px/1.4 var(--font-body, system-ui);
    transition: border-color 160ms, background 160ms;
  }
  .med-cfg-textinput textarea{ resize: vertical; min-height: 92px; }
  .med-cfg-textinput input::placeholder,
  .med-cfg-textinput textarea::placeholder{
    color: rgba(245, 241, 232, 0.45);
  }
  .med-cfg-textinput input:focus,
  .med-cfg-textinput textarea:focus{
    outline: none;
    border-color: rgba(245, 241, 232, 0.65);
    background: rgba(255, 255, 255, 0.10);
  }

  /* Horizontal fence-type photo collage on /pakalpojumi/zogu-buvnieciba/.
     5 photos side-by-side, one for each pielietojuma. Wraps to 2 rows on
     tablet, single column on mobile. */
  .sp-collage-strip{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }
  .sp-collage-tile{
    margin: 0;
    display: flex; flex-direction: column;
  }
  .sp-collage-photo{
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 8px;
    background: var(--vilsa-stone-100, #efece5);
  }
  .sp-collage-photo img,
  .sp-collage-photo picture{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .sp-collage-caption{
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 4px 0;
  }
  .sp-collage-label{
    font: 500 14px/1.3 var(--font-body, system-ui);
    color: var(--vilsa-ink, #14211d);
  }
  .sp-collage-usage{
    font: 400 12.5px/1.4 var(--font-body, system-ui);
    color: var(--vilsa-stone-500, #6a6a6a);
  }
  @media (max-width: 960px){
    .sp-collage-strip{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sp-collage-tile:nth-child(4),
    .sp-collage-tile:nth-child(5){ grid-column: span 1; }
  }
  @media (max-width: 600px){
    .sp-collage-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-collage-tile:last-child{ grid-column: span 2; }
    .sp-collage-tile:last-child .sp-collage-photo{ aspect-ratio: 16 / 9; }
  }

  /* Chemistry section refinements: cards get a bit more breathing room,
     logos moved BELOW the card row + centered + no muted card padding. */
  .sp-cards-3--chemistry{ margin-top: 32px; }
  .sp-partner-logo--chemistry{
    margin: 40px 0 0;
    justify-content: center;
    width: 100%;
  }

  /* Quote-form file upload row (žogu būvniecība step 03). Styled to
     match the surrounding .med-cfg dark forest shell. */
  .med-cfg-field--file{ display: block; }
  .med-cfg-field--file .med-cfg-field-hint{
    color: rgba(245, 241, 232, 0.55);
    font-weight: 400; font-size: 12.5px; margin-left: 4px;
  }
  .med-cfg-input--file{
    display: block; width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--vilsa-paper, #f5f1e8);
    border: 1px dashed rgba(245, 241, 232, 0.35);
    border-radius: 10px;
    cursor: pointer;
    font: 400 13px/1.4 var(--font-body, system-ui);
  }
  .med-cfg-input--file::file-selector-button{
    margin-right: 12px;
    background: var(--vilsa-paper, #f5f1e8);
    color: var(--vilsa-forest, #1a3a2a);
    border: 0; border-radius: 999px;
    padding: 8px 14px;
    font: 500 12.5px/1 var(--font-body, system-ui);
    cursor: pointer;
  }
  .med-cfg-input--file:hover{ border-color: rgba(245, 241, 232, 0.6); }
  .med-cfg-file-picked{
    display: block; margin-top: 6px;
    font-size: 12.5px;
    color: rgba(245, 241, 232, 0.72);
  }

  /* Prominent contact card on /produkti/ieperkam-sikbalkus/. Phone number
     rendered display-scale (client's "jābut labi redzamam telefona nr"). */
  .sp-contact-card{
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 24px 28px;
    background: var(--vilsa-forest, #1a3a2a);
    color: var(--vilsa-paper, #f5f1e8);
    border-radius: 14px;
    max-width: 640px; margin: 0 auto;
  }
  .sp-contact-card .sp-eyebrow{
    color: rgba(245, 241, 232, 0.7);
    font-size: 12px; letter-spacing: 0.14em;
  }
  .sp-contact-card-phone{
    font: 500 clamp(28px, 4vw, 40px)/1.1 var(--font-display, serif);
    color: var(--vilsa-paper, #f5f1e8);
    text-decoration: none;
    letter-spacing: -0.01em;
  }
  .sp-contact-card-phone:hover{ text-decoration: underline; text-underline-offset: 4px; }
  .sp-contact-card-meta{
    font: 400 14px/1.55 var(--font-body, system-ui);
    color: rgba(245, 241, 232, 0.85);
  }
  .sp-contact-card-meta a{ color: var(--vilsa-paper, #f5f1e8); text-decoration: underline; text-underline-offset: 3px; }

  /* Sīkbaļķu iepirkums pricing table (mirrors the old vilsa.lv layout). */
  .sp-price-table-wrap{ overflow-x: auto; margin-top: 22px; }
  .sp-price-table{
    width: 100%; border-collapse: collapse;
    font: 400 15px/1.5 var(--font-body, system-ui);
    color: var(--vilsa-ink, #14211d);
  }
  .sp-price-table thead th{
    text-align: left;
    padding: 12px 16px;
    background: var(--vilsa-cream, #f5f1e8);
    color: var(--vilsa-ink, #14211d);
    font-weight: 600; font-size: 13px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--vilsa-stone-100, rgba(0,0,0,0.08));
  }
  .sp-price-table tbody td{
    padding: 14px 16px;
    border-bottom: 1px solid var(--vilsa-stone-50, rgba(0,0,0,0.05));
  }
  .sp-price-table tbody tr:last-child td{ border-bottom: 0; }
  .sp-price-table tbody tr:hover{ background: rgba(0, 0, 0, 0.02); }

  /* Chemistry section on /pakalpojumi/impregnesana/ - FAQ + PDF links. */
  .sp-chemistry-links{
    display: flex; flex-wrap: wrap; gap: 12px;
    margin: 20px 0 0; padding: 0; list-style: none;
  }
  .sp-chemistry-links li{ margin: 0; }
  .sp-chemistry-links a{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 8px;
    background: var(--vilsa-paper, #f5f1e8);
    border: 1px solid var(--vilsa-stone-100, rgba(0,0,0,0.08));
    color: var(--vilsa-ink, #14211d);
    text-decoration: none;
    font: 500 14px/1.4 var(--font-body, system-ui);
    transition: border-color 160ms, background 160ms;
  }
  .sp-chemistry-links a:hover{ border-color: var(--vilsa-forest, #1a3a2a); }
  .sp-chemistry-badge{
    display: inline-block; padding: 2px 6px; border-radius: 4px;
    background: var(--vilsa-forest, #1a3a2a); color: var(--vilsa-paper, #f5f1e8);
    font-size: 10px; letter-spacing: 0.08em; font-weight: 600;
  }

  /* Chemistry-section link row spacing (FAQ + PDF). Card grid re-uses
     the existing .sp-cards-3 + .sp-card--diagram from woodSection. */
  .sp-chemistry-links{ margin-top: 32px; }

  /* Contact card variant embedded inside an IntroBlock right column.
     Smaller, less horizontal padding than the standalone version. */
  .sp-contact-card--inline{
    margin: 22px 0 0;
    padding: 20px 22px;
    max-width: 100%;
    align-self: flex-start;
  }
  .sp-contact-card--inline .sp-contact-card-phone{
    font-size: clamp(24px, 3.2vw, 32px);
  }