:root{
    --ink:#0b0a0d;
    --ink-soft:#0f2236;
    --paper:#f5f2ed;
    --paper-line:#e5e1da;
    --navy:#0d1e30;
    --navy-panel:#0f2236;
    --beige:#d9c2af;
    --beige-soft:#ebe5dc;
    --sand-mist:#dce6ef;
    --accent:#fa3477;
    --accent-hover:rgba(250,52,119,.6);
    --white:#ffffff;
    --mute-1:#9e9aa3;
    --mute-2:#c5c2cc;
    --mute-3:#848491;
    --mute-4:#6b7280;
    --ink-900:#050c21;
    --ph-a:#c9b8a6;
    --ph-b:#3d5a74;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--white);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;}

  h1,h2,h3{
    font-family:'Archivo',Inter,sans-serif;
    font-weight:800;
    margin:0;
    text-wrap:balance;
  }

  .eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
  }

  /* ---------- Placeholder photography ---------- */
  .ph{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,var(--ph-a) 0%,var(--ph-b) 100%);
    display:flex;align-items:flex-end;justify-content:flex-start;
  }
  .ph::before{
    content:"";position:absolute;inset:0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.14) 0, transparent 45%),
      radial-gradient(circle at 80% 75%, rgba(0,0,0,.18) 0, transparent 50%);
  }
  .ph.photo-bg{background-size:cover;background-position:center;background-repeat:no-repeat;}
  .bg-video{width:100%;height:100%;object-fit:cover;display:block;}
  .video-card{cursor:pointer;}
  .ph-tag{
    position:relative;z-index:1;
    margin:14px;
    padding:6px 10px;
    background:rgba(11,10,13,.55);
    color:rgba(255,255,255,.85);
    font-size:11px;
    letter-spacing:.5px;
    border-radius:4px;
    font-family:'Inter',sans-serif;
  }
  .ph-avatar{background:linear-gradient(160deg,#e7ddd0,#9aa9b5);}

  /* ---------- Nav ---------- */
  /* Overlays the top of the page (out of flow, so it never pushes the hero
     down) but is NOT pinned/fixed — position:absolute means it scrolls away
     with the rest of the content instead of following the viewport. Always
     transparent; the *color* of its contents adapts to whatever section is
     currently behind it (see the updateNavTheme() logic at the bottom of
     the page). */
  .site-nav{
    position:absolute;top:0;left:0;right:0;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:24px clamp(20px,5vw,80px);
    background:transparent;
    color:var(--white);
    transition:color .25s ease;
    /* The nav bar's own box spans the full page width so its two ends can
       sit flush left/right, but that means the empty middle of the bar was
       silently capturing clicks meant for whatever sits underneath it (e.g.
       the expertise pages' "What we do" back-link, which starts just below
       this bar). Make the bar itself click-through and only re-enable
       pointer events on the actual controls inside it. */
    pointer-events:none;
  }
  .site-nav .logo,.site-nav .nav-toggle,.site-nav .nav-links{pointer-events:auto;}
  .site-nav.nav-on-light{color:var(--ink-900);}
  .logo{display:flex;align-items:center;color:inherit;transition:color .15s ease;}
  header .logo:hover{color:var(--accent-hover);}
  .logo svg{display:block;height:32px;width:auto;}
  .nav-links{display:flex;align-items:center;gap:32px;}
  .nav-links a{
    font-size:14px;font-weight:600;color:inherit;
    padding-bottom:6px;border-bottom:2px solid transparent;
    white-space:nowrap;
    transition:color .15s ease,border-color .15s ease;
  }
  .nav-links a.active{color:var(--accent);border-color:var(--accent);}
  .nav-links a:not(.active):hover{color:var(--accent-hover);border-color:var(--accent-hover);}
  /* z-index:2 keeps the toggle clickable above the sliding nav-links panel
     below — without it, the panel (later in source, same stacking context)
     paints over the button once open, leaving no way to close the menu. */
  .nav-toggle{display:none;position:relative;z-index:2;background:none;border:0;color:inherit;cursor:pointer;padding:4px;}
  .nav-toggle svg{width:24px;height:24px;overflow:visible;}
  /* The three bars morph into an X on open — same button opens and closes
     the menu, so there's always one clear, discoverable way to dismiss it,
     right where the person just tapped to open it. */
  .nav-toggle .bar{transition:transform .3s cubic-bezier(.65,0,.35,1),opacity .2s ease;}
  .nav-toggle .bar-top{transform-origin:12px 6px;}
  .nav-toggle .bar-mid{transform-origin:12px 12px;}
  .nav-toggle .bar-bot{transform-origin:12px 18px;}
  .nav-toggle.is-open .bar-top{transform:translateY(6px) rotate(45deg);}
  .nav-toggle.is-open .bar-mid{opacity:0;}
  .nav-toggle.is-open .bar-bot{transform:translateY(-6px) rotate(-45deg);}

  @media (max-width:820px){
    .nav-links{
      position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
      background:var(--ink);color:var(--white);flex-direction:column;align-items:flex-start;
      justify-content:flex-start;gap:8px;padding:88px 32px 32px;
      transform:translateX(100%);transition:transform .3s ease;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);}
    .nav-toggle{display:block;}
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:16px 0;border-bottom:1px solid currentColor;
    font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;
    letter-spacing:.5px;text-transform:uppercase;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;
    transition:color .15s ease,border-color .15s ease;
  }
  #home .hero-inner .btn:hover{color:var(--accent-hover);border-color:var(--accent-hover);}

  /* Underlined CTA with sliding-arrow hover, referenced from 8kilo.dk's "Ydelser" button.
     Sized to match Figma's "btn-arrow" design-system component (node 445:5997):
     24px label, 22px vertical padding, 12px icon gap, 10px-wide chevron.
     The underline lives on .btn-arrow-label (not the outer .btn-arrow), so it
     always hugs the label's own text width. .btn-arrow itself gets right
     padding equal to the hover slide distance (38px) purely as clipping
     headroom for overflow:hidden — since that padding is on the container,
     not the underlined label, it stays invisible and doesn't stretch the
     underline past the visible text. */
  .btn-arrow{
    position:relative;display:inline-flex;align-items:center;overflow:hidden;
    border:none;border-radius:0;
    padding:22px 38px 22px 0;
    font-family:'Outfit',sans-serif;font-weight:400;font-size:24px;letter-spacing:.48px;text-transform:none;
    color:#fff;cursor:pointer;background:none;
  }
  .btn-arrow .btn-arrow-long{
    position:absolute;left:0;top:50%;width:28px;flex-shrink:0;
    transform:translate(-36px,-50%);opacity:0;
    transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .3s ease;
    pointer-events:none;
  }
  .btn-arrow .btn-arrow-label{
    display:inline-flex;align-items:center;gap:12px;
    border-bottom:1px solid rgba(255,255,255,.85);padding-bottom:1px;
    transition:transform .35s cubic-bezier(.65,0,.35,1);
  }
  .btn-arrow .btn-arrow-chevron{
    width:10px;flex-shrink:0;
    transition:opacity .25s ease;
  }
  .btn-arrow:hover .btn-arrow-label{transform:translateX(38px);}
  .btn-arrow:hover .btn-arrow-chevron{opacity:0;}
  .btn-arrow:hover .btn-arrow-long{transform:translate(0,-50%);opacity:1;}
  /* Same button, recolored for a light background (the expertise pages'
     beige "Get in touch" band) — .btn-arrow's own white text/underline is
     tuned for the dark hero it was built for and would be invisible here.
     align-self:flex-start is also needed here (unlike the home hero, whose
     own flex parent already sets align-items:flex-start): .contact-copy is
     a column flexbox with no such override, so without this the button —
     including its underlined label — stretches to the full width of the
     column instead of hugging its own text. */
  .contact-band .btn-arrow{color:var(--navy);align-self:flex-start;}
  .contact-band .btn-arrow .btn-arrow-label{border-bottom-color:rgba(13,30,48,.5);}

  .btn-circle{
    width:48px;height:48px;border-radius:24px;border:1px solid currentColor;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;cursor:pointer;
    color:inherit;
    transition:color .15s ease,border-color .15s ease;
  }
  .carousel-card .btn-circle:hover{color:var(--accent-hover);border-color:var(--accent-hover);}

  /* ---------- Sections ---------- */
  .page{display:none;}
  .page.active{display:block;}

  /* Page sections themselves are edge-to-edge — each band inside carries
     its own padding (matching the "container" padding set in Figma),
     rather than the page wrapper padding every band by accident. */
  section{padding:0;}
  .hero{position:relative;padding:0;overflow:hidden;}

  /* Homepage hero */
  /* hero.mp4 is 1920x1080 (16:9) — lock the container to that ratio so
     object-fit:cover never has to crop, at any viewport width. The old
     height:min(96vh,780px) sized purely off viewport HEIGHT with no
     width term at all, so on wide/short desktop screens the box stayed
     pinned near 780px while width kept growing — the video got scaled
     up and cropped harder the wider the page got. min-height keeps the
     existing mobile/short-viewport floor. width:100% keeps the box's
     width pinned to its container even once min-height overrides the
     aspect-ratio's own preferred height below ~925px viewports — without
     it, Chromium re-derives width from the floored height via the ratio
     instead, which overflows the box past the viewport. */
  #home .hero{width:100%;aspect-ratio:1920/1080;min-height:520px;}
  #home .hero .ph{position:absolute;inset:0;}
  /* position:absolute;inset:0 instead of height:100% -- .hero's own height
     comes from aspect-ratio:1920/1080 combined with a min-height:520px
     floor (the floor is what actually applies at mobile widths), and
     several WebKit/iOS versions resolve a child's height:100% against
     the aspect-ratio-only figure instead of the min-height-corrected
     one, silently shrinking this box to ~219px at phone widths while
     Chromium resolves it correctly. inset:0 against .hero's already-
     established position:relative box sidesteps that percentage-height
     resolution entirely instead of depending on it. */
  #home .hero-inner{
    position:absolute;inset:0;z-index:2;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px;
    padding:180px clamp(20px,5vw,80px) 100px;
  }
  #home .hero-inner .btn{align-self:flex-start;}
  #home .hero-inner::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(20deg,rgba(11,10,13,.35),rgba(11,10,13,.1) 55%,rgba(11,10,13,.35));
    z-index:-1;
  }
  #home .hero h1{font-size:72px;line-height:1.05;letter-spacing:-1px;max-width:800px;}
  #home .hero .hero-sub{font-weight:300;font-size:18px;line-height:1.5;max-width:364px;color:rgba(255,255,255,.85);margin:0;}

  /* Cards row (why-join style, used on light+dark) */
  .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .info-card{padding:32px;border-radius:8px;background:transparent;}
  .info-card h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;margin-bottom:8px;}
  .info-card h4 a,.info-card p a{transition:color .15s ease;}
  .info-card h4 a:hover,.info-card p a:hover{color:var(--accent-hover);}
  .info-card p{margin:0;font-size:14px;line-height:1.7;color:var(--mute-2);}

  /* Footer */
  footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.1);padding:80px clamp(20px,5vw,80px) 32px;}
  .footer-cards{border-bottom:.5px solid var(--mute-3);padding-bottom:60px;margin-bottom:64px;}
  .footer-top{display:flex;justify-content:flex-start;gap:48px;flex-wrap:wrap;margin-bottom:56px;}
  .brand-block{max-width:340px;display:flex;flex-direction:column;gap:16px;}
  .brand-block p{color:var(--mute-1);font-size:14px;line-height:1.6;margin:0;}
  .brand-block .address a{text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .15s,color .15s ease;}
  .brand-block .address a:hover{text-decoration-color:currentColor;color:var(--accent-hover);}
  .brand-block .logo svg{height:58px;}
  .brand-block .logo{margin-bottom:4px;}
  .footer-nav{display:flex;gap:80px;flex-wrap:wrap;margin-left:auto;}
  .footer-col{display:flex;flex-direction:column;gap:16px;font-size:14px;}
  .footer-col .head{font-family:'Archivo',sans-serif;font-weight:700;color:var(--white);letter-spacing:1px;text-transform:uppercase;font-size:13px;}
  .footer-col a{color:var(--mute-2);transition:color .15s ease;}
  .footer-col a:hover{color:var(--accent-hover);}
  .footer-bottom{display:flex;justify-content:space-between;color:var(--mute-1);font-size:13px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);}

  /* Award/certification badges — sit right next to the brand block (logo +
     address), close to the left edge, bottom-aligned to match the Figma
     "award-block" placement; the nav columns are pushed to the far right
     via .footer-nav's margin-left:auto instead of space-between, so this
     block stays tight against the brand column regardless of nav width. */
  .award-block{display:flex;gap:16px;flex-wrap:wrap;align-self:flex-end;}
  .award-badge{width:120px;height:120px;flex-shrink:0;border-radius:8px;border:1px dashed rgba(255,255,255,.25);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;}
  .award-badge img{width:100%;height:100%;object-fit:contain;border-radius:8px;}
  .award-badge span{font-size:10px;line-height:1.4;color:var(--mute-1);font-family:'Inter',sans-serif;}
  .award-badge.filled{border:none;background:transparent;padding:0;}
  .award-badge.filled span{display:none;}
  @media (max-width:760px){.award-block{align-self:flex-start;}}

  /* Insights (blog) — landing page + individual post template. */
  .insights-hero{background:var(--beige);color:var(--ink);padding:60px clamp(20px,5vw,80px);}
  .insights-hero h1{font-size:72px;line-height:1.1;letter-spacing:-1.5px;margin:0;}

  .insights-featured{background:var(--paper);padding:100px clamp(20px,5vw,80px) 60px;}
  .featured-block{display:block;background:var(--white);border-radius:1px;overflow:hidden;}
  .featured-photo{position:relative;height:480px;padding:40px;align-items:flex-end;border-radius:5px;}
  /* Same crop-escalation bug as the hero sections: a flat height:480px
     with no width term at all means the box gets wider (full page width)
     while staying exactly 480px tall, so background-size:cover crops the
     image harder the wider the page gets. Scoped to the landing page's
     block specifically (this class is shared with the post-detail page's
     own sticky hero photo, which keeps a different image and its own
     aspect ratio, left untouched here) — locked to
     insights-featured-contract-automation.jpg's real dimensions
     (1007x270, measured via PIL) so background-size:cover shows exactly
     that image with no extra cropping at any width. width:100% keeps it
     pinned to the column; height:auto is required alongside
     aspect-ratio because the base rule above already sets height:480px,
     and a more specific selector only wins per-property, not per-rule,
     so without this override that explicit height would keep beating
     the aspect-ratio for the height property specifically. */
  .insights-featured .featured-photo{width:100%;height:auto;aspect-ratio:1007/270;}
  .featured-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,10,13,.8) 0%,rgba(11,10,13,.25) 55%,rgba(11,10,13,0) 100%);}
  .featured-details{position:relative;z-index:1;display:flex;flex-direction:column;gap:24px;color:var(--white);max-width:748px;}
  .featured-meta{display:flex;align-items:center;gap:8px;}
  .category-tag{display:inline-flex;padding:4px 8px;border-radius:4px;background:var(--ink);color:var(--white);font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;}
  .featured-label{font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;color:var(--accent);}
  .featured-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:44px;line-height:1.2;margin:0 0 16px;}
  .featured-excerpt{font-weight:300;font-size:18px;line-height:1.6;margin:0;color:rgba(255,255,255,.92);}
  .post-author{display:flex;align-items:center;gap:16px;}
  .post-author .avatar{width:48px;height:48px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;background-color:var(--mute-3);}
  .post-author-lines{display:flex;flex-direction:column;gap:2px;}
  .author-name{font-weight:500;font-size:14px;color:var(--white);}
  .author-date{font-weight:300;font-size:12px;color:var(--mute-1);}

  .insights-grid-section{background:var(--paper);padding:40px clamp(20px,5vw,80px) 120px;}
  .articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
  .article-card{background:var(--white);border:1px solid var(--paper-line);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease;}
  a.article-card:hover{border-color:var(--mute-3);}
  /* Same fix as the featured photo above: a flat height:280px crops the
     thumbnail harder as its grid column gets wider. Each card's photo
     (images/insights-card-*.jpg) is 543x280 — lock the box to that ratio
     instead so cover never has to crop beyond what's already in the
     image. */
  .article-card .ph{width:100%;aspect-ratio:543/280;}
  .article-card-body{padding:32px;display:flex;flex-direction:column;gap:20px;}
  .article-card-meta{display:flex;align-items:center;justify-content:space-between;}
  .article-card-date{font-weight:300;font-size:12px;color:var(--mute-1);}
  .article-card-text{display:flex;flex-direction:column;gap:12px;}
  .article-card-text h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;line-height:1.3;color:var(--ink);margin:0;}
  .article-card-text p{font-weight:300;font-size:14px;line-height:1.6;color:var(--mute-3);margin:0;}

  .insights-back-link{display:inline-flex;align-items:center;gap:6px;font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;letter-spacing:.3px;color:var(--mute-4);transition:color .15s ease;}
  .insights-back-link:hover{color:var(--accent-hover);}
  .insights-back-link svg{flex-shrink:0;}

  /* Individual post template — matches the Figma frame's own top-to-bottom
     order: a plain text hero + lead-in copy, a contact/lead-gen form, then
     the article itself with its featured photo aligned to the LEFT of the
     body text (not stacked full-width like the landing page's featured
     block). The hero/form copy is intentionally the literal Figma text. */
  /* Same fluid full-width gutter as the footer and every other section, so
     this page's edges line up with them at any screen size. Only the pure-
     text/form pieces below get a width cap; the photo scales with its column. */
  .post-hero-section{background:var(--beige);color:var(--ink);padding:80px clamp(20px,5vw,80px);}
  .post-hero-back{color:rgba(11,10,13,.6);margin-bottom:24px;}
  .post-hero-back:hover{color:var(--ink);}
  .post-hero-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:56px;line-height:1.1;letter-spacing:-1px;margin:0 0 12px;}
  .post-hero-sub{font-weight:300;font-size:17px;line-height:1.5;color:rgba(11,10,13,.7);margin:0;max-width:640px;}

  .post-contact-section{background:var(--paper);padding:56px clamp(20px,5vw,80px);border-bottom:1px solid var(--paper-line);}
  .post-contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:stretch;}
  .post-contact-form{width:100%;max-width:720px;}
  /* padding-bottom:0 drops the base button's 22px invisible headroom below
     the underline, so the reply-time note sits right under it like in Figma. */
  .post-contact-form .btn-arrow{color:var(--navy);margin-bottom:-22px;margin-left:1.58em;padding-right:1.58em;}
  /* Hover-arrow sizes in em (not px) so the arrow, label shift and chevron
     stay in line with the text when the button scales up on wide screens. */
  .post-contact-form .btn-arrow .btn-arrow-label{gap:.5em;}
  .post-contact-form .btn-arrow .btn-arrow-chevron{width:.42em;}
  .post-contact-form .btn-arrow .btn-arrow-long{width:1.17em;transform:translate(-1.5em,-50%);}
  .post-contact-form .btn-arrow:hover .btn-arrow-long{transform:translate(0,-50%);}
  .post-contact-form .btn-arrow:hover .btn-arrow-label{transform:translateX(1.58em);}
  .post-contact-form .btn-arrow .btn-arrow-label{border-bottom-color:var(--navy);}
  /* A real <img> (not a cropped background) so the photo scales as one
     piece with its column: width follows the column, height follows the
     photo's own 829:414 ratio, nothing gets cut off or zoomed at any
     screen size. align-self:start keeps it top-aligned with the form
     (the Figma "Post Text" column is self-start). */
  .post-contact-photo{display:block;width:100%;height:auto;border-radius:4px;align-self:start;}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:stretch;}
  .form-col:last-child{display:flex;flex-direction:column;justify-content:flex-end;}
  .form-field{margin-bottom:32px;}
  .form-field label{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--mute-4);margin-bottom:10px;}
  .form-field input{width:100%;border:none;border-bottom:1px solid var(--paper-line);background:transparent;padding:8px 0;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);}
  .form-field input::placeholder{color:var(--mute-2);}
  .form-field input:focus{outline:none;border-bottom-color:var(--ink);}
  .form-field-spacer{visibility:hidden;pointer-events:none;}
  /* Button and note share one centered axis: the button's own right padding
     (hover headroom) is mirrored by a left margin, so the underlined label
     sits dead-center and the note centers under it. */
  .form-submit-group{align-self:flex-end;display:flex;flex-direction:column;align-items:center;}
  .form-submit-group .form-submit-row{justify-content:center;}
  .form-submit-group .form-reply-note{text-align:center;}
  .form-error{margin:8px 0 0;font-size:12px;line-height:1.4;color:#b3261e;}
  .form-field.has-error input{border-bottom-color:#b3261e;}
  .form-submit-row{display:flex;justify-content:flex-end;margin-top:0;}
  .form-reply-note{text-align:right;font-size:14px;line-height:1.6;font-weight:300;color:#6b6a6f;margin:10px 0 0;}

  .post-body-section{background:var(--paper);padding:40px clamp(20px,5vw,80px) 120px;}
  .post-article{max-width:880px;margin:0;font-family:'Inter',sans-serif;color:var(--ink);}
  .post-article h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;margin:28px 0 8px;}
  .post-article h4:first-child{font-size:24px;margin-top:0;}
  .post-article p{font-weight:300;font-size:15px;line-height:1.7;color:#3a3a3d;margin:0 0 16px;}
  .post-article figure{margin:28px 0;}
  .post-article figure img{width:100%;border-radius:4px;display:block;}

  /* Wide screens: the form keeps a sensible width and the photo takes the rest
     of the row, scaling with it, so nothing floats apart. */
  /* Wide screens: keep the 50/50 split and let the form scale with the screen
     (fields, type, gap) so it fills its half instead of leaving a gap. */
  @media (min-width:1700px){
    .post-contact-form{max-width:none;}
    .form-grid{gap:0 clamp(64px,3.4vw,160px);}
    .form-field{margin-bottom:clamp(32px,1.9vw,72px);}
    .form-field label{font-size:clamp(11px,.65vw,24px);margin-bottom:clamp(10px,.6vw,22px);}
    .form-field input{font-size:clamp(15px,.9vw,34px);padding:clamp(8px,.5vw,18px) 0;}
    .post-contact-form .btn-arrow{font-size:clamp(24px,1.4vw,52px);}
    .form-reply-note{font-size:clamp(14px,.8vw,30px);}
  }
  @media (max-width:1050px){.articles-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:900px){
    .post-contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .insights-hero h1{font-size:40px;}
    .insights-hero{padding:40px clamp(20px,5vw,80px);}
    .insights-featured{padding:48px clamp(20px,5vw,80px) 40px;}
    .featured-title{font-size:26px;}
    .featured-photo{height:auto;min-height:420px;padding:24px;}
    .articles-grid{grid-template-columns:1fr;}
    .post-hero-title{font-size:34px;}
    .form-grid{grid-template-columns:1fr;gap:0;}
    .form-submit-group{align-self:flex-start;align-items:flex-start;}
    .form-submit-group .form-submit-row{justify-content:flex-start;}
    .form-submit-group .form-reply-note{text-align:left;}
    .post-contact-form .btn-arrow{margin-left:0;}
  }

  /* Light section base */
  .light{background:var(--paper);color:var(--ink-900);padding:80px clamp(20px,5vw,80px);}
  .light .eyebrow{color:var(--ink-900);}

  /* What we do — one-slide-in-focus carousel, matching the Figma frame:
     a single full-bleed photo behind the whole strip (only the active
     area's image, swapped — not scrolled — on change), with fixed-width
     info panels sliding on top of it. The current panel sits flush at the
     left edge; the next one peeks in from the right edge as a narrow,
     cropped sliver — click it (or a label below) to bring it into focus. */
  .wwd-hero{position:relative;background:transparent;padding:76px 0 48px;overflow:hidden;}
  /* height:min(30vw,440px) scales as a constant 10:3 letterbox up to
     ~1467px width, then the max-height:440px cap kicks in and pins the
     box while width keeps growing past that — same runaway-crop bug as
     the home hero, just starting further out. Drop the cap and express
     the same 30% ratio as aspect-ratio so it scales forever like
     lesdeux.dk's hero, instead of hitting a ceiling. width:100% keeps
     the tablet/mobile height:400px overrides below (which make height
     the definite axis again) from having the browser re-derive width
     from height via the ratio instead of filling the container. */
  .carousel-viewport{position:relative;overflow:hidden;width:100%;aspect-ratio:10/3;}
  .carousel-bg{position:absolute;inset:0;z-index:0;transition:opacity .2s ease;}
  .carousel-bg .ph{position:absolute;inset:0;border-radius:0;}
  .carousel-bg .ph.photo-bg{background-size:cover;background-position:center;background-repeat:no-repeat;}
  .bg-video{width:100%;height:100%;object-fit:cover;display:block;}
  .video-card{cursor:pointer;}
  .carousel-track{
    position:relative;z-index:1;display:flex;height:100%;
    transition:transform .55s cubic-bezier(.65,0,.35,1);will-change:transform;
    touch-action:pan-y;cursor:grab;
  }
  .carousel-track.dragging{transition:none;cursor:grabbing;}
  .carousel-card{position:relative;flex:0 0 90%;height:100%;user-select:none;}
  .carousel-card .panel{
    height:100%;width:min(320px,74%);cursor:pointer;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:40px clamp(20px,4vw,48px);
  }
  /* Background now comes per-card from each area's own Figma color (set
     inline in buildWwdCarousel()) instead of alternating two fixed tones —
     these classes just pick readable text/pill/icon color (via currentColor)
     for a light-bg vs dark-bg card. */
  .carousel-card.tone-dark .panel{color:#fff;}
  .carousel-card.tone-light .panel{color:var(--ink-900);}
  .pill{display:inline-flex;padding:6px 12px;border:1px solid currentColor;border-radius:100px;font-size:11px;font-weight:500;letter-spacing:.6px;}
  .carousel-card h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:40px;line-height:1.1;margin:24px 0 16px;font-weight:400;}
  .carousel-card p{
    font-size:14px;line-height:1.5;opacity:.85;margin:0;max-width:280px;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
  }
  .carousel-card .btn-circle{margin-top:24px;}

  .nav-index{position:relative;z-index:1;padding:24px clamp(20px,5vw,80px) 0;border-top:1px solid rgba(255,255,255,.15);margin-top:24px;}
  .nav-index ul{list-style:none;display:flex;width:100%;justify-content:space-between;gap:clamp(16px,3vw,40px);margin:16px 0 0;padding:0;flex-wrap:wrap;}
  .nav-index li{display:flex;flex-direction:column;gap:12px;cursor:pointer;width:auto;}
  /* Index number sits inline with the label (no bullet in front of it) —
     one row, baseline-aligned, instead of the number stacked above the
     label with its own leading dot. */
  .nav-index .idx-row{display:flex;align-items:baseline;gap:8px;}
  .nav-index .idx{font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);transition:color .15s ease;}
  .nav-index li.active .idx{color:var(--accent);font-weight:700;}
  .nav-index li:not(.active):hover .idx{color:var(--accent-hover);}
  .nav-index .label{font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);transition:color .15s ease;}
  .nav-index li.active .label{color:var(--accent);font-weight:700;}
  .nav-index li:not(.active):hover .label{color:var(--accent-hover);}
  .nav-index .bar{height:2px;width:100%;background:var(--accent);opacity:0;}
  .nav-index li.active .bar{opacity:1;}

  .services-header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
  .services-header .eyebrow{max-width:520px;}
  .services-header .sub{color:var(--mute-3);font-size:14px;max-width:340px;}

  .services-split{display:flex;gap:48px;flex-wrap:wrap;align-items:flex-start;}
  .services-list{flex:1 1 360px;}
  .service-row{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--paper-line);cursor:pointer;text-decoration:none;color:inherit;}
  .service-row h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;margin:0;}
  .service-row .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink-900);background:transparent;box-sizing:border-box;transition:background .2s ease;}
  .service-row:hover .dot{background:var(--accent);}
  .services-media{flex:1 1 360px;display:flex;justify-content:center;}
  .services-media .ph{border-radius:2px;width:100%;max-width:420px;aspect-ratio:623/938;}

  .big-statement h2{font-size:48px;letter-spacing:.5px;text-transform:uppercase;line-height:1.15;margin-bottom:40px;}
  .big-statement .copy{display:flex;justify-content:flex-end;}
  .big-statement .copy p{font-family:'Inter',sans-serif;font-weight:300;font-size:26px;line-height:1.5;max-width:760px;margin:0 0 20px;}

  /* Text pages (Terms of Service, Legal Notice): big-statement layout with a
     body size fit for long legal copy. */
  .legal-page{padding-top:160px;padding-bottom:120px;}
  .legal-page h1{font-size:48px;letter-spacing:.5px;text-transform:uppercase;line-height:1.15;margin:0 0 40px;}
  .big-statement.legal-page .copy p{font-weight:400;font-size:18px;line-height:1.65;max-width:760px;margin:0 0 22px;}
  .legal-page .copy a{text-decoration:underline;text-decoration-color:var(--mute-2);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease;}
  .legal-page .copy a:hover{color:var(--accent);text-decoration-color:var(--accent);}

  .footer-legal{display:flex;gap:24px;}
  .footer-legal a{color:var(--mute-1);transition:color .15s ease;}
  .footer-legal a:hover{color:var(--white);}

  .video-block{display:flex;justify-content:flex-start;padding-left:0;}
  .video-block .ph{width:100%;max-width:1264px;aspect-ratio:1264/608;align-items:center;justify-content:center;}
  .video-block .play{
    width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);
    display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  }

  .partners{text-align:left;}
  .partners .eyebrow{color:var(--mute-4);margin-bottom:48px;display:block;}
  /* A true 5-column grid, not two independently-flexed rows: with the old
     flex layout, each row stretched its own items to fill the full width
     via justify-content:space-between, so a row of 6 and a row of 5 (which
     is what this list actually was — an odd split left over from adding an
     11th logo to a 5/5 layout) produced two different column rhythms that
     never lined up. Grid keeps every column the same width regardless of
     how many logos land in the last row.
     Every logo also sits inside an identically-sized cell (equal width from
     the grid column, equal height from the fixed .logo-chip height) and is
     centered within it on both axes — matching the Figma grid, where each
     250x100 logo slot centers its mark rather than left-anchoring it. Left
     alignment was what made the row read as messy: a narrow mark (e.g. a
     wordmark) sat flush against a wide neighbour with no even rhythm, even
     though the underlying columns were already equal width. Gaps are wider
     than before for the same reason — Figma's cells breathe with roughly
     half their own width/height in gap, not a tight 40/24px. */
  .logo-row{display:grid;grid-template-columns:repeat(5,1fr);column-gap:64px;row-gap:40px;margin-bottom:48px;}
  .logo-chip{height:100px;display:flex;align-items:center;justify-content:center;color:#6b6b6b;font-weight:700;letter-spacing:2px;font-size:15px;}
  /* Logos were sized only by max-height:56px on each <img> (see the inline
     styles below), which caps large source files but never scales up a
     small one — so a 40px-tall source PNG and a 167px-tall one rendered at
     very different sizes next to each other. A fixed height normalizes
     every logo to the same visual weight; width is left free so wordmarks
     stay wide and icon-style marks stay narrow. */
  .logo-chip img{height:40px;width:auto;max-width:100%;object-fit:contain;}
  /* !important is required here: every logo <img> also carries an inline
     height:40px style (from the original asset-embedding step), which
     would otherwise always win over this rule regardless of specificity.
     Travelheart and Masai no longer need an override: their old assets
     were heavily-padded rasters that read small at the shared 40px cap,
     but both have since been swapped for the brand's actual logo SVG,
     which (like Moebe/FM Mattsson/H2O) has ~zero built-in padding, so the
     shared baseline already gives them the right visual weight. */
  /* Mustad's source asset still carries a lot of built-in padding, so at
     the shared 40px cap its actual ink reads roughly half the height it
     does in the Figma reference — measured directly against the reference
     screenshot rather than eyeballed. */
  .logo-chip img[alt="Mustad"]{height:76px !important;}
  /* Minimum, Fablewood and Spillehallen read small next to the rest of the
     row at the shared 40px cap — sized up to double (80px) on request. */
  .logo-chip img[alt="Minimum"],
  .logo-chip img[alt="Fablewood"],
  .logo-chip img[alt="Spillehallen"]{height:80px !important;}

  /* Below ~900px the two five-logo rows above start wrapping onto extra
     lines (measured crossover: 886px). Below that width, swap to a single
     continuously-scrolling row instead of letting it stack into more rows —
     the track is duplicated once in JS (buildLogoMarquee()) so a -50%
     translate loops seamlessly. Desktop layout above 900px is untouched. */
  .logo-marquee{display:none;overflow:hidden;margin-bottom:48px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);}
  .logo-marquee-track{display:flex;width:max-content;animation:logo-marquee-scroll 26s linear infinite;}
  .logo-marquee-track .logo-chip{flex:0 0 140px;margin-right:48px;}
  @keyframes logo-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){
    .logo-marquee-track{animation:none;}
  }
  @media (max-width:900px){
    .logo-row{display:none;}
    .logo-marquee{display:block;}
  }

  /* Who we are */
  .split-hero{display:grid;grid-template-columns:1fr 1fr;}
  .split-hero .copy-side{background:var(--beige);color:var(--white);display:flex;align-items:center;padding:0 clamp(20px,5vw,80px);}
  .split-hero h1{font-size:72px;line-height:1.05;}
  /* wwa-hero.jpg is 1024x683, the same ratio already used for the
     contact page's .contact-media-row .ph — lock this photo to it too
     so background-size:cover stops zooming in harder as the column
     gets wider. min-height keeps a sane floor on short/narrow rows.
     width:100% pins the box to its grid column — without it, once
     min-height floors the height below ~757px columns, Chromium
     re-derives width from that height via the ratio instead, which
     overflows the box past its column (and the page horizontally). */
  .split-hero .ph{width:100%;aspect-ratio:1024/683;min-height:340px;}
  @media (max-width:760px){
    /* On desktop this row is comfortably tall (its height tracks the
       photo's own aspect-ratio, easily clearing 400px+), so
       align-items:center comfortably clears the fixed nav above it. Once
       the grid collapses to a single stacked column here, the copy-side's
       height shrinks to fit just its own text — with no top padding, that
       puts the heading flush against the page top, right under the fixed
       nav, which then paints over its top few lines. Explicit top padding
       (clearing the nav's measured 80px height) fixes that without
       touching the desktop look. */
    .split-hero{grid-template-columns:1fr;}
    .split-hero .copy-side{padding:128px clamp(20px,5vw,80px) 40px;}
  }

  .statement-block{display:flex;flex-direction:column;gap:40px;}
  .statement-block h2{font-size:48px;letter-spacing:.5px;text-transform:uppercase;max-width:900px;}
  .statement-block .copy{display:flex;justify-content:flex-end;}
  .statement-block .copy p{font-family:'Inter',sans-serif;font-weight:300;font-size:20px;color:var(--mute-4);line-height:1.5;max-width:520px;margin:0 0 14px;}

  .team-section{display:flex;flex-direction:column;gap:48px;}
  .team-head h2{font-size:32px;}
  .team-head p{color:var(--mute-4);font-size:17px;max-width:600px;margin:12px 0 0;}
  .team-content{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start;}
  /* Figma's content column is 1707px wide, split 760/915 between the video
     and the carousel — flex-grow set to those same pixel values keeps the
     two panes growing in that same ratio instead of the video card hitting
     a low max-width and the carousel stretching to soak up everything
     else (which is what was producing the huge empty gap after the cards
     on wide screens). */
  .video-card{
    position:relative;border:1px solid var(--paper-line);width:100%;max-width:760px;
    aspect-ratio:16/9;overflow:hidden;flex:760 1 360px;
  }
  .video-card .ph{position:absolute;inset:0;}
  .video-card .play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.9);
    display:flex;align-items:center;justify-content:center;
  }
  .video-meta{position:absolute;left:20px;bottom:20px;right:20px;color:var(--white);}
  .video-meta h4{font-family:'Archivo',sans-serif;font-size:19px;margin:0 0 6px;}
  .video-meta p{font-size:13px;margin:0;color:rgba(255,255,255,.85);}
  .team-carousel{flex:915 1 360px;min-width:0;max-width:915px;}
  .carousel-head{margin-bottom:16px;}
  .carousel-head h4{font-family:'Archivo',sans-serif;font-size:17px;}
  .team-cards{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px;}
  /* Avatar is portrait (204x269 in Figma), not the near-square 190x170 this
     used to be — that squat ratio was cropping too much off the top and
     bottom of each headshot. */
  .team-card{background:var(--white);border:1px solid var(--paper-line);width:204px;flex-shrink:0;box-shadow:0 6px 18px -8px rgba(0,0,0,.06);}
  .team-card .ph{height:269px;}
  .team-card .info{padding:14px;}
  .team-card .info h5{font-family:'Archivo',sans-serif;font-size:15px;margin:0 0 4px;}
  .team-card .info p{font-size:12.5px;color:var(--mute-4);margin:0;}

  /* Expertise / Strategy detail */
  /* min-height used to be min(90vh,780px) — a near-fullscreen floor at
     every width, regardless of how narrow the 1.1fr photo column was.
     Since .ph below has no fixed height of its own, grid's default
     align-items:stretch just filled whatever height that vh floor
     produced, so the per-area photo (background-size:cover) got zoomed
     in harder as the page got wider and the 90vh box stayed put. That
     was replaced with a flat 520px min-height on this container, on the
     assumption the photo's own aspect-ratio would normally clear 520px
     anyway -- it doesn't across the whole width range (a 1024x683-ratio
     photo in a roughly half-width column sits well under 520px tall
     between ~800px and ~1550px viewports), and .ph doesn't stretch to
     fill a taller row once it has its own aspect-ratio, so the row got
     forced tall by this container while the photo stayed short, exposing
     the near-black body background in the gap underneath it. No
     container-level floor at all now; the row tracks whichever child is
     naturally taller, and .ph's own min-height below is the real floor
     for the photo specifically. */
  .strategy-hero{display:grid;grid-template-columns:1fr 1.1fr;}
  /* Per-area photo (data-figma-asset="expertise_hero", set in
     renderExpertise()) — locked to the same 1024:683 "big photography
     hero" ratio already used for wwa-hero.jpg and contact-hero-photo.jpg
     so it stops cropping/zooming further as the column widens.
     width:100% pins it to its grid column, same reasoning as
     .split-hero .ph above. min-height:340px matches that same floor
     (previously missing here, which made this one collapse shorter than
     .split-hero's photo at narrow widths before the 760px breakpoint
     stacks the columns). */
  .strategy-hero .ph{width:100%;aspect-ratio:1024/683;min-height:340px;}
  /* Background is set inline per-area in renderExpertise() (each area's own
     Figma color) — var(--navy-panel) here is just the fallback before JS
     runs. Text stays light/white by default; the one area whose color is
     light (Protection) gets the .copy-on-light modifier for dark text. */
  .strategy-hero .copy-side{background:var(--navy-panel);color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;gap:24px;padding:56px clamp(20px,5vw,80px);transition:background .2s ease;}
  .strategy-hero h1{font-size:72px;letter-spacing:-1px;line-height:1;}
  .strategy-hero .lede{font-weight:300;font-size:24px;line-height:1.4;color:#f8fcff;max-width:560px;}
  .strategy-hero .lede-group{display:flex;flex-direction:column;gap:20px;max-width:560px;}
  .strategy-hero .lede-group .lede{margin:0;max-width:none;}
  .strategy-hero.copy-on-light .copy-side{color:var(--ink-900);}
  .strategy-hero.copy-on-light .lede{color:var(--ink-900);}
  .strategy-hero.copy-on-light .expertise-back-link{color:rgba(5,12,33,.65);}
  .strategy-hero.copy-on-light .expertise-back-link:hover{color:var(--accent);}
  /* Translucent white rather than a fixed muted gray: the hero's background
     now varies per area (navy, beige, maroon, black...) and a flat gray like
     --mute-1 reads fine against the darkest of those but nearly disappears
     against the lighter beige tones. A white with opacity keeps a consistent,
     legible step down from the heading against any of them. */
  /* Fluid, not a fixed tier: this is two short words that will never wrap,
     so the clamp() wrapping problem that ruled out fluid sizing for the
     headings (see the tier comments below) doesn't apply here. Without it
     the link stays pinned at 13px while the hero text and photo around it
     keep growing with the viewport, so on a large screen it reads as an
     almost-illegible afterthought next to a 72px headline. Scales from the
     same 13px used at 1440px up to 17px by ~1900px, then holds. */
  .expertise-back-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:'Outfit',sans-serif;font-size:clamp(13px,0.9vw,17px);font-weight:600;letter-spacing:.3px;color:rgba(255,255,255,.65);transition:color .15s ease;}
  .expertise-back-link:hover{color:var(--accent);}
  .expertise-back-link svg{flex-shrink:0;width:1.1em;height:1.1em;}
  @media (max-width:760px){.strategy-hero{grid-template-columns:1fr;}}

  .contact-band{background:var(--beige-soft);display:flex;gap:56px;flex-wrap:wrap;align-items:center;padding:64px clamp(20px,5vw,80px);}
  .expertise-contact-band{min-height:525px;padding-top:0;padding-bottom:0;}
  @media (max-width:760px){.expertise-contact-band{min-height:0;padding-top:48px;padding-bottom:48px;}}
  .contact-band h2{color:var(--navy);font-size:60px;flex:1 1 260px;}
  .contact-band .lede{font-weight:300;font-size:22px;color:var(--navy);line-height:1.4;}
  .contact-band .contact-copy{flex:1.4 1 320px;display:flex;flex-direction:column;gap:20px;}
  .dot-link{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;color:var(--navy);transition:color .15s ease;}
  .dot-link .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;}
  .dot-link:hover{color:var(--accent);}
  .contact-info{flex:1 1 320px;display:flex;flex-direction:column;gap:16px;}
  .contact-info .head{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--navy);}
  .contact-row{display:flex;gap:12px;align-items:flex-start;color:var(--navy);font-weight:500;font-size:15px;line-height:1.4;}
  .contact-row svg{flex-shrink:0;margin-top:2px;}

  .area-chip{
    padding:10px 18px;border:1px solid var(--paper-line);border-radius:100px;
    font-size:13px;font-weight:600;color:var(--ink-900);cursor:pointer;background:var(--white);
  }
  .area-chip.current{background:var(--ink-900);color:var(--white);border-color:var(--ink-900);}

  /* ---- Team member detail page (sub-page of "Who we are") ---- */
  /* Figma's photo panel is a tall 912x1216 (3:4) portrait, matching the
     portraits themselves — the old fixed min-height:560px squashed that
     into a wide landscape strip, so background-size:cover zoomed in hard
     and cropped straight through the middle of each face. Driving the
     row's height off the photo's own aspect-ratio (instead of a fixed
     min-height) fits the whole portrait the way Figma does. */
  .team-hero{display:grid;grid-template-columns:43fr 57fr;background:var(--white);}
  .team-hero .ph{aspect-ratio:3/4;}
  .team-hero .copy-side{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:56px clamp(20px,5vw,80px);}
  .team-back-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--mute-4);transition:color .15s ease;}
  .team-back-link:hover{color:var(--accent-hover);}
  .team-back-link svg{flex-shrink:0;}
  .team-hero h1{font-family:'Archivo',sans-serif;font-weight:700;font-size:48px;letter-spacing:0.5px;color:var(--navy);line-height:1.1;margin:0;}
  .team-hero .role-line{font-weight:300;font-size:22px;line-height:1.4;color:#6b7280;margin:0;}
  .team-hero-contact{display:flex;gap:56px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--paper-line);}
  .contact-item{display:flex;align-items:baseline;gap:10px;}
  .contact-label{font-size:12px;color:var(--mute-4);}
  .team-hero-contact a{color:var(--navy);font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--paper-line);padding-bottom:2px;transition:color .15s ease,border-color .15s ease;}
  .team-hero-contact a:hover{color:var(--accent-hover);border-color:var(--accent-hover);}
  @media (max-width:760px){
    .team-hero{grid-template-columns:1fr;}
    .cv-row{grid-template-columns:1fr;}
    .cv-row-left{display:none;}
  }

  .cv-section{padding:64px clamp(20px,5vw,80px) 24px;}
  .cv-block{margin-bottom:64px;}
  .cv-head{border-top:1px solid var(--paper-line);padding-top:13px;margin-bottom:24px;}
  .cv-label{display:block;text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:700;font-family:'Archivo',sans-serif;color:var(--mute-4);}
  .cv-row{display:grid;grid-template-columns:520fr 1163fr;column-gap:24px;}
  .cv-about{border-bottom:1px solid var(--paper-line);padding-bottom:24px;}
  .cv-about p{font-size:16px;line-height:1.65;color:var(--ink-900);margin:0 0 20px;}
  .cv-about p:last-child{margin-bottom:0;}
  .cv-entry-row + .cv-entry-row{margin-top:0;}
  .cv-entry{padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--paper-line);}
  .cv-entry-row:last-child .cv-entry{margin-bottom:0;}
  .cv-entry h5{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;color:var(--ink-900);margin-bottom:4px;}
  .cv-entry p{font-size:13.5px;color:var(--mute-4);}


  /* ---- Contact Us page ---- */
  .contact-media-row{display:flex;flex-wrap:wrap;}
  /* Source photo is 1024x683 (ratio ~1.5). Matching the box's aspect-ratio
     to the photo's own ratio means "cover" needs virtually no cropping,
     instead of forcing it into a much wider/shorter strip. */
  .contact-media-row .ph{flex:1.6 1 500px;aspect-ratio:1024/683;}
  .contact-card{
    flex:1 1 340px;background:#4c473e;color:#fff;
    padding:56px clamp(24px,4vw,60px);display:flex;flex-direction:column;justify-content:center;gap:22px;
  }
  .contact-card h3{font-weight:400;font-size:26px;letter-spacing:1.5px;}
  .contact-card .addr,.contact-card .lines{font-size:13.5px;letter-spacing:1px;line-height:1.9;margin:0;font-style:normal;}
  .contact-card a{color:#fff;text-decoration:underline;}
  .contact-card .row-label{opacity:.65;margin-right:6px;}

  .container{max-width:1400px;margin:0 auto;}

  @media (max-width:600px){
    /* Footer's 4-card row (What we do / Who we are / Family and Friends /
       Legal Tech): "Family and Friends" is the longest heading and needs
       ~246px of column width at the default 20px/32px-padding size to stay
       on one line. A 2-up grid can't supply that below ~600px, so drop to
       a single column here — each card gets the full row width, which
       comfortably clears the threshold down through phone widths. */
    .card-grid{grid-template-columns:1fr;}
    .services-header,.big-statement .copy,.statement-block .copy{display:block;}
    .carousel-viewport{height:400px;max-height:none;}
    .carousel-card{flex-basis:90%;}
    .carousel-card .panel{width:74%;padding:24px;}
    .carousel-card h3{margin:16px 0 10px;}
    .carousel-card p{font-size:13.5px;-webkit-line-clamp:5;}
  }

  /* The "01 Strategy ... 08 Commercial Contracts" index wraps to an awkward
     second line once there isn't room for all 8 items in a row — which
     starts as early as ~1280px, well above the 600px phone breakpoint, on
     ordinary laptop widths too. Desktop's space-between row above this
     width is left untouched. Below it, scroll the index as a single line —
     same swipeable feel as the carousel itself — with a right-edge fade
     (a mask, not an opaque overlay, so it fades whatever's showing through
     the section — a swapped photo, not a fixed color) hinting more areas
     sit off-screen. Kept as its own media query (rather than folded into
     the 1050px tablet/heading-scale block below) so it doesn't drag every
     other tablet-sized heading rule up to this wider threshold too. */
  @media (max-width:1300px){
    .nav-index ul{
      flex-wrap:nowrap;justify-content:flex-start;
      overflow-x:auto;-webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      padding-right:48px;
      scrollbar-width:none;-ms-overflow-style:none;
      mask-image:linear-gradient(to right,#000 84%,transparent 100%);
      -webkit-mask-image:linear-gradient(to right,#000 84%,transparent 100%);
    }
    .nav-index ul::-webkit-scrollbar{display:none;}
    .nav-index li{flex:0 0 auto;scroll-snap-align:start;}
    .nav-index .label{white-space:nowrap;}
  }
  /* Small-tablet/laptop carousel fix: the desktop height:min(30vw,440px)
     formula shrinks the card viewport far below what the pill+heading+
     paragraph+button content needs at these widths, so content overflows
     and gets clipped by overflow:hidden. Give the card a safe fixed
     height here, same idea as the mobile override above, extended up to
     where the desktop formula naturally recovers enough height (~1300px). */
  @media (min-width:601px) and (max-width:1300px){
    .carousel-viewport{height:400px;max-height:none;}

    /* Same "Family and Friends" wrap problem as the mobile override above,
       but in reverse: from ~601px up to ~1174px the 4-up .card-grid column
       is narrower than the 2-up column was at 600px, so it wraps again.
       Drop to 2 columns through this whole squeeze zone (matching the
       carousel fix's range, which already clears the point where 4 columns
       get enough room on their own) rather than shrinking type. */
    .card-grid{grid-template-columns:1fr 1fr;}
  }

  @media (max-width:1050px){
    /* Tablet/laptop step of the 3-tier heading scale (desktop above this
       width, mobile below 760px). Replaces the old fluid clamp() sizing —
       which is exactly what let some titles run large enough at in-between
       widths to wrap onto a second line — with one fixed size per tier. */
    #home .hero h1{font-size:50px;}
    #home .hero .hero-sub{font-size:15px;}
    .carousel-card h3{font-size:31px;}
    .big-statement h2{font-size:38px;}
    .legal-page h1{font-size:38px;}
    .big-statement .copy p{font-size:18px;}
    .split-hero h1{font-size:45px;}
    .statement-block h2{font-size:32px;}
    .statement-block .copy p{font-size:16px;}
    .team-head h2{font-size:29px;}
    .strategy-hero h1{font-size:45px;}
    .strategy-hero .lede{font-size:16px;}
    .contact-band h2{font-size:41px;}
    .contact-band .lede{font-size:16px;}
    .team-hero h1{font-size:32px;}
    .team-hero .role-line{font-size:15px;}
  }

  /* Mobile step of the same 3-tier heading scale. */
  @media (max-width:760px){
    /* h1 shrinks from 72px to 34px at this breakpoint, but hero-inner's
       padding (180px top / 100px bottom, sized to give the 72px desktop
       heading room under the fixed nav) never shrank with it. Against the
       520px min-height floor that leaves a razor-thin ~240px for the
       actual flex content (h1 + gap + hero-sub + gap + CTA) -- borderline
       enough that small text-wrapping/font-metric differences between
       Safari and Chrome could tip it over, pushing the "What do they
       say" link down into the gradient's darkest band at the very bottom
       edge (and risking clipping from .hero's overflow:hidden). Smaller
       padding matched to the smaller heading removes that fragility.  */
    #home .hero h1{font-size:34px;}
    #home .hero .hero-sub{font-size:15px;}
    #home .hero-inner{padding:140px clamp(20px,5vw,80px) 56px;}
    .carousel-card h3{font-size:28px;}
    .big-statement h2{font-size:28px;}
    .legal-page h1{font-size:28px;}
    .legal-page{padding-top:120px;padding-bottom:72px;}
    .big-statement.legal-page .copy p{font-size:16px;}
    .footer-bottom{flex-direction:column;gap:12px;}
    .big-statement .copy p{font-size:17px;}
    .split-hero h1{font-size:32px;}
    .statement-block h2{font-size:26px;}
    .statement-block .copy p{font-size:16px;}
    .team-head h2{font-size:26px;}
    .strategy-hero h1{font-size:32px;}
    .strategy-hero .lede{font-size:16px;}
    .contact-band h2{font-size:32px;}
    .contact-band .lede{font-size:16px;}
    .team-hero h1{font-size:28px;}
    .team-hero .role-line{font-size:15px;}
  }