/* kusio.net — layout
   Everything that changes with the viewport lives here, as real media queries.
   Loaded after base.css (and components.css on the home page).

   Breakpoints — keep in step with MQ in assets/js/kusio-page.js:
     max 819   nav becomes a hamburger; case-study rail goes away; two-up About; stacked contact
     max 639   phone: trimmed hero, no case-list thumbs, single-file About, centred footer
     max 420   footer wordmark shrinks again
     min 1700  section numbers move out into the left gutter (home)
   Anything between 820 and 900 only tightens the nav tracking. */

:root{ --ease-out:cubic-bezier(.215,.61,.355,1); --ease-in:cubic-bezier(.55,.055,.675,.19) }

/* =========================================================
   Site nav — one menu, every page. Only .is-current differs.
   ========================================================= */
.nav-slot--sticky{ position:sticky; top:0; z-index:200 }
/* home: the slot sits inside the padded hero, so it breaks out to the full page width (--pw is set by JS) */
.nav-slot--hero{ width:var(--pw,100vw); margin-left:calc(50% - var(--pw,100vw) / 2); margin-top:auto }

.site-nav{
  position:relative; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgb(var(--lime-rgb) / .96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:var(--ink);
  padding:20px max(clamp(20px,3vw,40px), calc((100% - 1300px) / 2));
}
/* home only: scrolled past the hero, the bar pins to the top */
.site-nav.is-pinned{ position:fixed; top:0; left:0; right:0; box-shadow:0 2px 20px rgba(0,0,0,.18) }

.nav-brand{ font:900 20px/1 Heuvel,Archivo,sans-serif; color:var(--purple); transition:color .2s ease, scale .2s var(--ease-out) }
.nav-brand:hover{ color:var(--panel) }

.nav-burger{
  display:none; width:44px; height:44px; background:none; border:0; padding:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-burger-bar{
  display:block; width:24px; height:2px; background:var(--purple);
  transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.site-nav.is-open .nav-burger-bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.site-nav.is-open .nav-burger-bar:nth-child(2){ opacity:0 }
.site-nav.is-open .nav-burger-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.nav-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2vw,28px);
  font:800 14px/1 Archivo,sans-serif; letter-spacing:.12em;
}
.nav-link{ color:var(--purple) }
.nav-link:hover{ color:var(--panel) }
.nav-link{
  border-bottom:3px solid transparent; padding-bottom:4px; white-space:nowrap;
  transition:color .3s ease, border-color .3s ease, scale .2s var(--ease-out);
}
.nav-link.is-current, .nav-link.is-current:hover{ color:var(--border); border-bottom-color:var(--border) }

/* case-studies dropdown */
.nav-dd{ position:relative; display:flex; align-items:center }
.nav-dd-btn{
  display:flex; gap:7px; align-items:center; background:none; border:0;
  border-bottom:3px solid transparent; padding:0 0 4px;
  font:inherit; letter-spacing:inherit; color:var(--purple); cursor:pointer;
}
.nav-dd-btn:hover{ color:var(--panel) }
.nav-dd-btn.is-current{ color:var(--border); border-bottom-color:var(--border) }
.nav-dd-caret{ display:inline-block; font-size:10px; transition:transform .3s var(--ease-out) }
.nav-dd-pad{
  position:absolute; left:50%; top:100%; width:300px; margin-left:-150px; padding-top:18px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.nav-dd-menu{ background:var(--purple); border:1px solid var(--border); text-align:center }
.nav-dd-link{ color:var(--paper) }
.nav-dd-link:hover{ color:var(--lime) }
.nav-dd-link{ display:block; padding:14px 18px; font:700 13px/1.2 Archivo,sans-serif; letter-spacing:.06em; transition:color .2s ease, scale .2s var(--ease-out) }
.nav-dd-link:not(:last-child){ border-bottom:1px solid var(--border) }
.nav-dd-link.is-current, .nav-dd-link.is-current:hover{ color:var(--lime) }
.nav-dd-link.is-current{ border-bottom:0 }
/* the current case study lists its own sections inside the menu */
.nav-dd-sub{
  display:flex; flex-direction:column; background:var(--well);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:6px 0;
}
.nav-sub-link{ color:var(--muted-on-dark) }
.nav-sub-link:hover{ color:var(--lime) }
.nav-sub-link{ transition:color .2s ease, scale .2s var(--ease-out);
  display:flex; align-items:center; gap:10px; justify-content:center; min-height:40px; padding:0 18px;
  font:700 11px/1 Archivo,sans-serif; letter-spacing:.14em;
}
.nav-sub-num{ font:700 10px/1 ui-monospace,Menlo,monospace; color:var(--border) }

/* click-away scrim behind the open hamburger (case studies) */
.nav-scrim{
  position:fixed; inset:0; z-index:150; background:rgb(var(--purple-rgb) / .5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.nav-scrim.is-on{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s }

@media (min-width:820px){
  /* dropdown: opens under the bar; on the home hero (bar at the bottom) it opens upward until the bar pins */
  .nav-dd.is-open .nav-dd-caret{ transform:rotate(180deg) }
  .site-nav--up:not(.is-pinned) .nav-dd-pad{ top:auto; bottom:100%; padding:0 0 18px; transform:translateY(8px) }
  .nav-dd.is-open .nav-dd-pad{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
}
@media (min-width:820px) and (max-width:900px){
  .nav-links{ letter-spacing:.06em; gap:14px }
}

@media (max-width:819px){
  .site-nav{ flex-wrap:nowrap; padding:7px clamp(20px,4vw,28px) }
  /* home: the bar rides at the top of the hero, always pinned; the slot holds its 58px */
  .site-nav--up{ position:fixed; top:0; left:0; right:0; box-shadow:0 2px 20px rgba(0,0,0,.18) }
  .nav-slot--hero{ order:-1; height:58px; margin-top:calc(var(--hero-pt) * -1); margin-bottom:35px }

  .nav-burger{ display:flex }
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:0;
    background:var(--lime);
    border-top:1px solid rgb(var(--purple-rgb) / .25); border-bottom:1px solid var(--border);
    padding:0 clamp(20px,4vw,28px) 14px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
    max-height:calc(100vh - 58px); max-height:calc(100dvh - 58px); overflow-y:auto;
  }
  .site-nav.is-open .nav-links{ display:flex; animation:nav-in .42s var(--ease-out) }
  .site-nav.is-closing .nav-links{ display:flex; animation:nav-out .3s var(--ease-in) forwards }

  .nav-link{
    display:flex; align-items:center; justify-content:center; min-height:48px; padding-bottom:0;
    border-bottom:1px solid rgb(var(--purple-rgb) / .18);
  }
  .nav-links > .nav-link:last-child{ border-bottom:0 }
  .nav-link.is-current, .nav-link.is-current:hover{ border-bottom-color:rgb(var(--purple-rgb) / .18) }

  /* the dropdown is part of the list: expanded by default, the caret folds it */
  .nav-dd{ display:block; width:100% }
  .nav-dd-btn, .nav-dd-btn.is-current{
    width:100%; min-height:48px; justify-content:center; padding:0; border-bottom:0;
  }
  .nav-dd-btn:hover{ color:var(--purple) }
  .nav-dd-caret{ transform:rotate(180deg) }
  .nav-dd.is-collapsed .nav-dd-caret{ transform:none }
  .nav-dd-pad{
    position:static; width:auto; margin:0; padding:0;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .nav-dd.is-collapsed .nav-dd-pad{ display:none }
  .nav-dd.is-collapsed{ border-bottom:1px solid rgb(var(--purple-rgb) / .18) }
  .nav-dd-menu{ background:none; border:1px solid rgb(var(--purple-rgb) / .32); margin:8px 0 10px }
  .nav-dd-link, .nav-dd-link:hover, .nav-dd-link.is-current, .nav-dd-link.is-current:hover{ color:var(--purple) }
  .nav-link:hover{ color:var(--purple) }
  .nav-dd-link{
    display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 10px;
    font:700 12px/1 Archivo,sans-serif; letter-spacing:.14em; opacity:.72;
  }
  .nav-dd-link:not(:last-child){ border-bottom:1px solid rgb(var(--purple-rgb) / .18) }
  .nav-dd-link.is-current{ border-bottom:0 }
  .nav-dd-sub{
    background:rgb(255 255 255 / .34);
    border-top:1px solid rgb(var(--purple-rgb) / .18); border-bottom:1px solid rgb(var(--purple-rgb) / .18);
  }
  .nav-sub-link, .nav-sub-link:hover{ color:var(--purple) }
  .nav-sub-link{ min-height:44px; padding:0 10px; opacity:.66 }
  .nav-sub-num{ color:rgb(var(--purple-rgb) / .5) }
}
@keyframes nav-in { from{ transform:translateY(-14px); clip-path:inset(0 0 100% 0) } to{ transform:none; clip-path:inset(0 0 0 0) } }
@keyframes nav-out{ from{ transform:none; clip-path:inset(0 0 0 0) } to{ transform:translateY(-14px); clip-path:inset(0 0 100% 0) } }

/* =========================================================
   Footer — fixed underneath the page; the page scrolls off it
   ========================================================= */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:0;
  background:var(--white); color:var(--ink);
  padding:clamp(28px,5vh,48px) clamp(20px,3vw,40px) clamp(40px,7vh,64px);
  font-family:Archivo,system-ui,sans-serif;
}
.foot-stack{ display:flex; flex-direction:column; gap:clamp(18px,3vh,28px); max-width:1400px; width:100%; margin:0 auto }
.foot-word{
  margin:0 0 -.06em; text-align:center;
  font:900 clamp(44px,9vw,150px)/.9 Heuvel,Archivo,sans-serif; letter-spacing:-.012em;
  text-transform:uppercase; color:var(--purple);
}
.foot-word-accent{ color:var(--pink) }
.foot-rule{ border-top:2px solid var(--rule-light) }
.foot-line{ text-align:center; font:700 clamp(15px,2.4vw,24px)/1.4 Heuvel,Archivo,sans-serif; color:var(--text-on-light) }
.foot-row{ display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between }
.foot-btns{ display:flex; flex-wrap:wrap; gap:10px }
.foot-btn, .foot-btn:hover{ color:var(--ink) }
.foot-btn{
  display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  background:var(--pink); font:800 12px/1 Archivo,sans-serif; letter-spacing:.14em;
}
.foot-nav{
  flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:flex-end;
  font:700 12px/1 Archivo,sans-serif; letter-spacing:.14em; line-height:44px;
}
.foot-link{ color:var(--purple); transition:color .2s ease, scale .2s var(--ease-out) }
.foot-link:hover{ color:var(--pink) }
.foot-dd{ position:relative; display:flex; align-items:center }
.foot-dd-btn{
  display:flex; align-items:center; gap:7px; background:none; border:0; padding:0;
  font:inherit; letter-spacing:inherit; color:var(--purple); cursor:pointer; min-height:44px;
}
.foot-dd-caret{ display:block; font:400 9px/1 Archivo,sans-serif; transition:transform .3s var(--ease-out) }
.foot-dd.is-open .foot-dd-caret{ transform:rotate(180deg) }
.foot-dd-menu{
  position:absolute; left:50%; bottom:100%; width:min(260px,calc(100vw - 40px)); margin-left:-130px; padding-bottom:12px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.foot-dd.is-open .foot-dd-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
.foot-dd-list{ background:var(--lime); border:1px solid rgb(var(--purple-rgb) / .32); text-align:center }
.foot-dd-link{ color:var(--purple) }
.foot-dd-link:hover{ color:var(--panel) }
.foot-dd-link{ display:block; padding:14px 16px; font:700 12px/1.3 Archivo,sans-serif; letter-spacing:.06em; transition:color .2s ease, scale .2s var(--ease-out) }
.foot-dd-link:not(:last-child){ border-bottom:1px solid rgb(var(--purple-rgb) / .22) }
.foot-menu-btn{
  display:none; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px;
  background:var(--lime); color:var(--ink); border:0; font:800 12px/1 Archivo,sans-serif; letter-spacing:.14em; cursor:pointer;
}
.foot-copy{ text-align:center; font:400 12px/1.5 Archivo,sans-serif; color:var(--muted-on-light) }

@media (max-width:639px){
  .site-footer{ padding:24px 20px 30px }
  .foot-stack{ gap:10px }
  .foot-row{ justify-content:center; gap:14px 20px }
  .foot-btns{ justify-content:center }
  .foot-nav{ justify-content:center; gap:8px 16px }
  .foot-nav > :not(.foot-menu-btn){ display:none }
  .foot-menu-btn{ display:flex }
}
@media (max-width:420px){
  .foot-word{ font-size:clamp(34px,11vw,52px) }
}

/* =========================================================
   Home — hero
   ========================================================= */
.hero{
  --hero-pt:clamp(28px,5vh,72px);
  background:var(--ground); position:relative; z-index:100; isolation:isolate; overflow:hidden;
  min-height:100vh; display:flex; flex-direction:column; box-sizing:border-box;
  padding:var(--hero-pt) max(clamp(20px,3vw,40px), calc((100% - 1300px) / 2)) 0;
}
.hero-body{ flex:none; margin-top:auto; display:flex; flex-direction:column; justify-content:center; min-height:0 }
.hero-h1{
  margin:clamp(18px,3vh,30px) 0 0;
  font:900 clamp(56px,10.4vw,164px)/.85 Heuvel,Archivo,sans-serif; letter-spacing:-.008em;
  text-transform:uppercase; color:var(--paper);
}
.hero-pills{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(20px,3vw,48px); margin-top:clamp(24px,4vh,44px) }
.hero-pill{
  background:var(--lime); color:var(--ink);
  font:900 clamp(15px,1.6vw,20px)/1 Heuvel,Archivo,sans-serif; padding:13px 18px;
}
.hero-copy{ margin:0; max-width:520px; font:400 16px/1.5 Archivo,sans-serif; color:var(--text-on-dark) }
.cs-label{
  margin-top:clamp(28px,6vh,64px);
  font:900 25px/1.1 Heuvel,Archivo,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--lime);
}
.cs-rule{ margin-top:clamp(12px,2.2vh,20px); height:2px; background:var(--border) }
.cs-row, .cs-row:hover{ color:var(--paper) }
.cs-title{ transition:color .2s ease, scale .2s var(--ease-out); transform-origin:left center }
.cs-row:hover .cs-title{ color:var(--lime) }
.cs-row{
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding:18px 0; border-bottom:1px solid var(--border);
}
.cs-row:last-child{ padding:18px 0 20px; border-bottom:0 }
.cs-thumb{
  width:104px; height:56px; flex:none; box-sizing:border-box;
  background:var(--well); border:1px solid var(--border); overflow:hidden;
}
.cs-title{ flex:1; font:900 clamp(20px,2.6vw,34px)/1 Heuvel,Archivo,sans-serif; text-transform:uppercase }

/* =========================================================
   Home — About
   ========================================================= */
.about-col{ flex:1 1 0%; min-width:0; display:flex; flex-direction:column }
.about-art{
  margin-top:22px; width:100%; height:170px; box-sizing:border-box; overflow:hidden;
  border:1px solid var(--border); background:var(--ground);
  display:flex; align-items:center; justify-content:center;
  font:600 12px/1.4 Archivo,sans-serif; letter-spacing:.1em; color:var(--muted-on-dark); text-align:center;
}

/* section numbers: inline above the heading, or out in the left gutter on very wide screens */
.eyebrow-gutter{ margin-bottom:12px }

/* =========================================================
   Home — Endorsements
   ========================================================= */
.q-wrap{ flex:1 1 calc(60% - 24px); min-width:0 }
.q-rail{
  flex:0 1 calc(40% - 24px); min-width:0; box-sizing:border-box;
  border-left:2px solid var(--purple); padding-left:24px;
  display:flex; flex-direction:column; gap:2px;
}
.q-item{
  position:relative; isolation:isolate; text-align:left; background:none; border:0;
  border-bottom:1px solid rgba(0,0,0,.12); margin:0 -14px 0 -24px; padding:9px 14px 9px 24px;
  cursor:pointer; font:600 13px/1.35 Archivo,sans-serif; letter-spacing:.03em;
}
.q-ctrls{ display:flex; align-items:center; gap:12px }

/* =========================================================
   Home — Contact
   ========================================================= */
.contact-intro{ flex:1 1 380px; min-width:0 }
.contact-sub{ margin:26px 0 0; max-width:420px; font:400 16px/1.55 Archivo,sans-serif; color:var(--text-on-dark) }
.contact-form{ position:relative; flex:0 1 440px; display:flex; flex-direction:column; gap:16px }

/* =========================================================
   Home — breakpoints
   ========================================================= */
@media (min-width:1700px){
  .eyebrow-host{ position:relative; padding-top:24px }
  .eyebrow-gutter{ position:absolute; left:-206px; top:24px; width:170px; text-align:right; margin-bottom:0 }
}
@media (max-width:819px){
  .hero{ min-height:auto; padding-bottom:30px }
  .hero-body{ margin-top:0 }
  .hero-h1{ margin-top:35px }

  /* About: two up, with a centred 65% third */
  .about-col{ flex:1 1 calc(50% - 7px); margin:0 }
  .about-col:nth-child(3){ flex:0 0 65vw; max-width:100%; margin:0 auto }

  .contact-intro{ flex:1 1 100% }
  .contact-sub{ max-width:none }
  .contact-form{ flex:1 1 100%; max-width:700px; margin:0 auto; width:100% }
}
@media (max-width:639px){
  .hero-h1{ font-size:52px }
  .hero-pills{ margin-top:20px; gap:16px }
  .hero-pill{ font:900 13px/1 Heuvel,Archivo,sans-serif; padding:10px 14px }
  .hero-copy{ font:400 14px/1.45 Archivo,sans-serif }
  .cs-label{ margin-top:26px; font-size:20px }
  .cs-rule{ margin-top:10px }
  .cs-row{ gap:16px; padding:16px 0 }
  .cs-row:last-child{ padding:16px 0 18px }
  .cs-thumb{ display:none }
  .cs-title{ font-size:18px }

  .about-col, .about-col:nth-child(3){ flex:1 1 100%; max-width:none; margin:0 }
  .about-art{ height:64px; margin-top:18px }

  .tile{ width:min(224px,100%) }
  .gal-grid{ gap:28px }

  /* endorsements: the name list goes away, the quote takes the row */
  .q-wrap{ flex:1 1 100% }
  .q-rail{ display:none }
  .q-ctrls{ justify-content:center; width:100% }
}

/* =========================================================
   Case studies
   ========================================================= */
.cs-rail{
  position:relative; z-index:1; align-self:stretch; flex:none; width:178px; box-sizing:border-box;
  border-right:2px solid var(--accent);
}
/* --nav-h is the measured height of the nav bar (set in kusio-page.js) */
.cs-rail-inner{ position:sticky; top:calc(var(--nav-h,61px) + 20px); padding:clamp(40px,7vh,60px) 20px 40px 0 }
.cs-body{
  position:relative; z-index:1; flex:1; min-width:0; box-sizing:border-box;
  padding:clamp(40px,7vh,60px) 0 clamp(48px,8vh,72px);
  container:cs-body / inline-size;
}

/* "Evolution" row (below 384px the other rows wrap number above title, so this one does too): number | title + sketch | copy. Three columns when there's room, stacked when not. */
.evo-row{
  display:grid; align-items:start; padding:28px 0; border-top:1px solid rgb(var(--ink-rgb) / .22);
  grid-template-columns:74px minmax(0,1fr);
  grid-template-areas:"num title" "copy copy" "sketch sketch";
  gap:24px 30px;
}
.evo-head{ display:contents }
.evo-num{ grid-area:num; font:900 40px/1 Heuvel,Archivo,sans-serif; color:var(--purple) }
.evo-title{ grid-area:title; margin:0 }
.evo-copy{ grid-area:copy; min-width:0 }
.evo-sketch{ grid-area:sketch; margin-top:24px; max-width:360px; background:var(--white); border:1px solid var(--ink); padding:12px }
@container cs-body (max-width:383px){
  .evo-row{ grid-template-columns:minmax(0,1fr); grid-template-areas:"num" "title" "copy" "sketch" }
}
@container cs-body (min-width:740px){
  .evo-row{
    grid-template-columns:74px minmax(0,1fr) minmax(0,1.2fr);
    grid-template-areas:"num title copy" "num sketch copy" "num . copy";
    grid-template-rows:auto auto 1fr;
    row-gap:0;
  }
  .evo-sketch{ margin-top:20px; max-width:300px }
}

@media (max-width:819px){
  /* with no rail beside it, each section headline carries its own rule */
  .cs-rail{ display:none }
  .cs-body > h2{ border-bottom:3px solid var(--accent,currentColor); padding-bottom:18px }
}

/* reduced motion: menus still open and close, just without the slide */
@media (prefers-reduced-motion:reduce){
  .site-nav.is-open .nav-links, .site-nav.is-closing .nav-links{ animation:none }
  .nav-dd-pad, .foot-dd-menu, .nav-dd-caret, .foot-dd-caret, .nav-burger-bar, .nav-scrim{ transition:none }
}

/* =========================================================
   Hover: text links lift slightly and change colour.
   Uses the individual `scale` property so it never fights GSAP's inline transforms.
   Scale only where a real pointer exists (and not inside the hamburger panel).
   ========================================================= */
.hl-line{ transition:color .2s ease, scale .2s var(--ease-out); transform-origin:left center }
a.hl-line:hover{ color:var(--lime) }

.tlink{ display:inline-block; color:var(--tl); text-decoration:underline; transition:color .2s ease, scale .2s var(--ease-out) }
.tlink:hover{ color:var(--tl-hover) }
.tlink--ink{ --tl:var(--ink); --tl-hover:var(--orange) }
.tlink--dark{ --tl:var(--lime); --tl-hover:var(--pink) }
.tlink--onlime{ --tl:var(--purple); --tl-hover:var(--panel) }
.demo-link{ --tl:var(--purple); --tl-hover:var(--orange); align-self:flex-start; transform-origin:left center; font:800 12px/1 Archivo,sans-serif; letter-spacing:.14em }

.rail-link{ color:var(--rail-muted); transition:color .2s ease, scale .2s var(--ease-out); transform-origin:right center }
.rail-link:hover{ color:var(--rail-hover) }

@media (hover:hover){
  .hl-line:is(a):hover{ scale:1.02 }
  .tlink:hover{ scale:1.04 }
  .rail-link:hover{ scale:1.04 }
  .cs-row:hover .cs-title{ scale:1.02 }
}
@media (hover:hover) and (min-width:820px){
  .nav-brand:hover{ scale:1.05; transform-origin:left center }
  .nav-link:hover{ scale:1.06 }
  .nav-dd-link:hover, .nav-sub-link:hover{ scale:1.03 }
  .foot-link:hover{ scale:1.06 }
  .foot-dd-link:hover{ scale:1.03 }
}

/* CS2: the four CodePen demos — 2 x 2, one column on phones, roomier gap as the page widens */
.demo-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,3.4vw,48px) }
@media (max-width:639px){ .demo-grid{ grid-template-columns:minmax(0,1fr) } }

/* =========================================================
   First paint: anything that animates in stays hidden until its starting pose is set.
   (visibility, not opacity — GSAP's .from() reads the real opacity as its end value.)
   <head> adds .js at once and .ready after 4s at the latest; markReady() adds it sooner.
   ========================================================= */
.js:not(.ready) :is(
  [data-reveal], [data-hero] [data-line], [data-hero] [data-word], [data-hero] [data-nav], [data-cs], [data-q-stage],
  [data-screen-label="Title band"] > *, .cs-body > *, #contact > div > div > *, [data-blade] > *
){ visibility:hidden }