/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* ---- Brand palette ---- */
  --primary-100:#F2F9FF;  --primary-200:#E6F1FF;
  --primary-300:#C5DBFC;  --primary-400:#A2C4FC;
  --primary-500:#72A1FC;  --primary-600:#0759FB;
  --primary-700:#0650E1;  --primary-800:#0545C2;
  --primary-900:#04389F;  --primary-1000:#032870;

  --gray-100:#F8F9F9;  --gray-200:#E9EAEB;
  --gray-300:#D8DCDE;  --gray-400:#C1C7CC;
  --gray-500:#87929D;  --gray-600:#68737D;
  --gray-700:#49545C;  --gray-800:#2F3941;
  --gray-900:#1C2227;  --gray-1000:#050C15;

  --success-100:#E7F0EA;  --success-200:#D3E3DA;
  --success-600:#0B6631;  --success-700:#0A5A2B;
  --success-800:#095026;

  /* ---- Semantic ---- */
  --ink:var(--gray-900);
  --ink-soft:var(--gray-800);
  --ink-mute:var(--gray-700);      /* AAA on white */
  --blue:var(--primary-600);       /* brand blue, large text / fills only */
  --blue-text:var(--primary-800);  /* AAA for small text and links */
  --paper:#FFFFFF;
  --paper-alt:var(--primary-100);   /* cooler, branded alternating rhythm */
  --rule:var(--gray-300);
  --rule-strong:var(--gray-400);

  /* service accents — primary ramp, deepening */
  /* per-service accents — a cohesive set anchored by the brand blue and the rose (#F00658) Chris uses */
  --svc-ux:#0759FB;    /* brand blue */
  --svc-sys:#5B3FD6;   /* indigo */
  --svc-brand:#F00658; /* rose */
  --svc-team:#0B7285;  /* teal */

  --display:"Red Hat Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Red Hat Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Red Hat Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(1.25rem,4.5vw,4.5rem);
  --sec-y:clamp(5rem,11vw,10rem);
  --ease:cubic-bezier(.33,1,.68,1);
  --navh:88px;
  --maxw:1648px;   /* desktop content cap — full-width section backgrounds, content centred within */
}

/* ============================================================
   BASE  — full width, larger type
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{position:fixed;width:100%;overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--blue-text)}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.03em;line-height:1.02}
p{margin:0}
p,li,blockquote{text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
/* full-width bands that are themselves .wrap keep their edge-to-edge background, but their CONTENT
   still centres on the --maxw column: the inline padding grows past the gutter on wide screens so the
   content box lines up with the capped .wrap sections above/below (no hard max-width = bg still bleeds) */
.manifesto,.cs-hero{max-width:none;
  padding-inline:max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut)))}
.section{padding-block:var(--sec-y)}
.section--alt{background:var(--paper-alt)}

/* section "rise" — a new background curtains up over the previous one with a rounded top
   (myweblab.it / gusta.studio-style transition). Pure layout: no ancestor transform, so
   the fixed nav, fixed menu, and sticky case cards are unaffected. */
.rise{
  position:relative;z-index:2;
  margin-top:clamp(-84px,-6vw,-48px);
  border-top-left-radius:clamp(28px,4vw,64px);
  border-top-right-radius:clamp(28px,4vw,64px);
}

.eyebrow{
  font-family:var(--mono);font-size:clamp(.72rem,.7rem + .1vw,.82rem);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-text);
}
.sec-head{
  width:100%;margin-bottom:clamp(2.75rem,5vw,4.5rem);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:1.5rem clamp(2rem,6vw,6rem);align-items:end;
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
}
@media(max-width:900px){.sec-head{grid-template-columns:1fr;align-items:start}}
.sec-head h2{font-size:clamp(2.4rem,1.2rem + 4.6vw,5.5rem);font-weight:800;margin-top:1rem}
.sec-lede{color:var(--ink-mute);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:42ch}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1.15rem;z-index:400;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:.5rem;top:.5rem}

/* ============================================================
   NAV  — glossy, collapses on scroll
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:1.15rem var(--gut);
  transition:padding .45s var(--ease);
}
.nav.is-collapsed{padding-top:.6rem;padding-bottom:.6rem}

.nav-in{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.85rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,0);
  border:1px solid transparent;
  box-shadow:0 0 0 0 rgba(28,34,39,0);
  transition:background .45s var(--ease),border-color .45s var(--ease),
             box-shadow .45s var(--ease),padding .45s var(--ease),
             max-width .55s var(--ease), backdrop-filter .45s var(--ease);
  max-width:100%;margin-inline:auto;
}
.nav.is-collapsed .nav-in{
  max-width:1080px;
  padding:.55rem .65rem .55rem 1.15rem;
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 10px 34px -12px rgba(28,34,39,.28),
             0 2px 8px -4px rgba(28,34,39,.14);
}

.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);flex:none}
.brand svg{height:44px;width:auto;display:block;transition:height .45s var(--ease)}
.nav.is-collapsed .brand svg{height:36px}
.brand .wordmark{fill:currentColor}

/* nav links + sliding pill (Studio Modular style): one pill re-anchors between the
   hovered link and the active link, driven by JS in footer.php */
.nav-links{position:relative;display:flex;align-items:center;gap:.15rem}
.nav-pill{
  position:absolute;left:0;top:0;width:0;height:0;z-index:0;pointer-events:none;
  background:var(--primary-200);border-radius:999px;opacity:0;
  transition:left .32s var(--ease),top .32s var(--ease),width .32s var(--ease),
             height .32s var(--ease),opacity .25s var(--ease);
}
.nav-pill.is-visible{opacity:1}
.nav-links a{
  font-family:var(--mono);font-size:.95rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
  position:relative;z-index:1;padding:.5rem .95rem;border-radius:999px;
  transition:color .25s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.is-active{color:var(--blue-text)}
@media(prefers-reduced-motion:reduce){.nav-pill{transition:opacity .2s linear}}

.nav-right{display:flex;align-items:center;gap:.75rem}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
  padding:.9rem 1.65rem;border-radius:999px;text-decoration:none;
  border:1.5px solid transparent;white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--blue);transform:translateY(-1px)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--ink);transform:translateY(-1px)}
.btn--ghost{border-color:var(--rule-strong);color:var(--ink);background:rgba(255,255,255,.5);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
/* size scale: small · medium (base) · large · extra-large */
.btn--sm{padding:.58rem 1.15rem;font-size:.92rem;gap:.4rem}
.btn--md{padding:.9rem 1.65rem;font-size:1.05rem}
.btn--lg{padding:1.05rem 2.05rem;font-size:1.2rem}
.btn--xl{padding:1.3rem 2.6rem;font-size:1.4rem;gap:.7rem}

/* burger */
.burger{
  display:none;width:46px;height:46px;border-radius:999px;
  align-items:center;justify-content:center;flex:none;
  border:1.5px solid var(--rule-strong);background:rgba(255,255,255,.6);
  transition:background .25s ease,border-color .25s ease;
}
.burger:hover{background:#fff;border-color:var(--ink)}
.burger span{display:block;width:19px;height:1.8px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s ease}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.8px;background:var(--ink);border-radius:2px;
  transition:transform .45s var(--ease);
}
.burger span::before{transform:translateY(-6px)}
.burger span::after{transform:translateY(6px)}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .burger{display:flex}
  .nav.is-collapsed .nav-in{max-width:100%}
}
/* narrow phones: shrink the wordmark so brand + burger fit without pushing the burger off-screen */
@media(max-width:480px){
  .brand svg,.nav.is-collapsed .brand svg{height:30px}
}

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
.menu{
  position:fixed;inset:0;z-index:300;background:var(--blue);color:#fff;
  display:flex;flex-direction:column;
  clip-path:circle(0% at calc(100% - 3.5rem) 3rem);
  transition:clip-path .8s var(--ease);
  visibility:hidden;
}
.menu.is-open{clip-path:circle(150% at calc(100% - 3.5rem) 3rem);visibility:visible}

.menu-top{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.85rem var(--gut);flex:none;
}
.menu-top .brand{color:#fff}
.menu-top .brand .mark-bg{fill:#fff}
.menu-top .brand .mark-glyph{fill:var(--blue)}

.menu-close{
  width:46px;height:46px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);
  display:grid;place-items:center;position:relative;transition:background .25s ease,border-color .25s ease;
}
.menu-close:hover{background:rgba(255,255,255,.16);border-color:#fff}
.menu-close::before,.menu-close::after{
  content:"";position:absolute;width:19px;height:1.8px;background:#fff;border-radius:2px;
}
.menu-close::before{transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}

.menu-body{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:1rem var(--gut) 2rem;overflow-y:auto;
}
.menu-nav li{overflow:hidden}
.menu-nav a{
  display:block;text-decoration:none;color:#fff;
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(2.5rem,1rem + 9vw,6rem);line-height:1.08;
  padding-block:.12em;
  transform:translateY(105%);opacity:0;
  transition:transform .7s var(--ease),opacity .7s var(--ease),color .25s ease;
}
.menu.is-open .menu-nav a{transform:none;opacity:1}
.menu.is-open .menu-nav li:nth-child(1) a{transition-delay:.22s}
.menu.is-open .menu-nav li:nth-child(2) a{transition-delay:.29s}
.menu.is-open .menu-nav li:nth-child(3) a{transition-delay:.36s}
.menu.is-open .menu-nav li:nth-child(4) a{transition-delay:.43s}
.menu.is-open .menu-nav li:nth-child(5) a{transition-delay:.50s}
.menu-nav a:hover{color:rgba(255,255,255,.62)}

.menu-foot{
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;
  padding:1.75rem var(--gut) 2.25rem;border-top:1px solid rgba(255,255,255,.24);flex:none;
  opacity:0;transition:opacity .6s var(--ease) .55s;
}
.menu.is-open .menu-foot{opacity:1}
.menu-foot a,.menu-foot p{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-decoration:none;
}
.menu-foot a:hover{color:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;min-height:100svh;background:linear-gradient(165deg,var(--primary-100) 0%,#fff 60%);padding-top:calc(var(--navh) + clamp(1.5rem,4vh,3.5rem));padding-bottom:clamp(2.5rem,6vw,5rem)}
/* big solid-blue logo mark — anchored to the bottom of the full-height hero */
.hero-mark{
  position:absolute;bottom:6rem;top:auto;right:-80px;
  width:clamp(300px,46vw,900px);z-index:0;pointer-events:none;
  color:var(--primary-600);transform:translateY(var(--py,0px));will-change:transform;
}
.hero-mark svg{width:100%;height:auto;display:block;fill:currentColor}

/* composed grid: giant name (centered, chris shifted left), intro top-right, actions bottom-center.
   capped max-width keeps the composition intact on ultra-wide screens (content + floating images stay together) */
.hero-in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  column-gap:clamp(1.5rem,4vw,4rem);row-gap:clamp(.75rem,2.5vh,2rem);
  align-items:start;align-content:center;
  min-height:calc(100svh - var(--navh) - 9rem);
}
@media(max-width:1379px){
  .hero{min-height:auto}
  .hero-in{grid-template-columns:1fr;min-height:0;row-gap:2rem}
  .hero-mark{display:none}
}

.hero-name{
  grid-column:1 / -1;grid-row:1;align-self:center;position:relative;z-index:5;pointer-events:none;
  font-family:var(--display);font-weight:900;text-transform:lowercase;
  font-size:clamp(3.2rem, min(14vw, 30dvh), 248px);
  letter-spacing:2px;line-height:.84;
  display:flex;flex-direction:column;will-change:transform,opacity;
}
.hero-name .ln1{align-self:center;position:relative;left:max(-540px,-28vw);white-space:nowrap;will-change:transform}
.hero-name .ln2{align-self:center;position:relative;left:0;white-space:nowrap;will-change:transform}
.hero:not(.is-ready) .hero-name .ln1,
.hero:not(.is-ready) .hero-name .ln2{opacity:0}
.hero.is-ready .hero-name .ln1{animation:hero-in-left 1.1s var(--ease) backwards}
.hero.is-ready .hero-name .ln2{animation:hero-in-right 1.1s var(--ease) .08s backwards}
@keyframes hero-in-left{from{transform:translateX(-115%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes hero-in-right{from{transform:translateX(115%);opacity:0}to{transform:translateX(0);opacity:1}}
.hero-name em{font-style:normal;color:var(--blue)}

.hero-intro{grid-column:2;grid-row:1;align-self:start;position:relative;z-index:3;max-width:31rem}
.hero-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.htag{display:inline-flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:500;color:var(--ink-soft);
  border:1.5px solid var(--rule);border-radius:999px;padding:.5rem 1.05rem;background:rgba(255,255,255,.72)}
.htag svg{width:1rem;height:1rem;stroke:var(--primary-500);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-sub{font-size:clamp(1.15rem,1rem + .65vw,1.55rem);line-height:1.4;color:var(--ink-soft);letter-spacing:-.015em;max-width:31rem}

.hero-actions{grid-column:2;grid-row:3;justify-content:flex-start;position:relative;z-index:4;
  display:flex;flex-wrap:wrap;gap:.85rem 1rem;align-items:center}
/* desktop: the intro (tags + paragraph) takes the clear top band in the upper-right, beside
   the full-size photo; the name (chris/alexander), the left photo, and the buttons are pushed
   DOWN so the paragraph has whitespace from the name and the image, with no overlap */
@media(min-width:1380px){
  .hero-name{align-self:start;margin-top:2.25rem}
  .hero-intro{align-self:start;margin-top:0}
  /* keep the three tags on one row within the narrowed lane */
  .hero-tags{gap:.5rem;margin-bottom:1.15rem}
  .htag{font-size:.9rem;padding:.45rem .85rem;gap:.4rem}
  .htag svg{width:.9rem;height:.9rem}
}
@media(max-width:1379px){
  /* stack name -> tags/paragraph -> buttons, each in its own row (Motto / Studio Modular mobile) */
  .hero-name{grid-column:1;grid-row:auto;align-self:start}
  .hero-name .ln1,.hero-name .ln2{align-self:flex-start;left:0}
  .hero-intro{grid-column:1;grid-row:auto;align-self:start;max-width:none}
  .hero-actions{grid-column:1;grid-row:auto;align-self:start;justify-content:flex-start;padding-bottom:0}
}
/* phone portrait: primary CTAs go full-width and stacked (L size, slightly smaller label) */
@media(max-width:600px){
  .hero-actions{flex-direction:column;align-items:stretch;gap:.75rem;width:100%}
  .hero-actions .btn{width:100%;justify-content:center;padding:1.05rem 1.5rem;font-size:1.1rem}
  .about-more .btn{width:100%;justify-content:center}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%;justify-content:center}
  /* smaller tag pills so at least two fit per row instead of each stacking */
  .hero-tags{gap:.5rem}
  .htag{font-size:.875rem;padding:.45rem .85rem;gap:.4rem}
  .htag svg{width:.85rem;height:.85rem}
}
.btn-ico{width:1.05em;height:1.05em;flex:none}

/* floating photo blocks — soft shadow + animated gradient border + gentle drift */
.hero-photo{position:absolute;z-index:2;border-radius:20px;padding:3px;overflow:hidden;
  box-shadow:0 26px 55px -26px rgba(3,40,112,.42);will-change:transform}
.hero-photo::before{content:"";position:absolute;inset:-60%;z-index:0;
  background:conic-gradient(from 0deg,var(--primary-300),var(--primary-600),var(--primary-1000),var(--primary-400),var(--primary-300));
  animation:spin-border 6s linear infinite}
.hero-photo-in{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;border-radius:17px;overflow:hidden;
  background:var(--gray-200);color:var(--ink-mute);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:.75rem}
.hero-photo-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* exact Figma sizes: left block 520x330, right block 290x400 */
.hp1{top:clamp(.5rem,2vh,2rem);right:clamp(1.25rem,2.5vw,3.5rem);width:min(290px,26vw);aspect-ratio:290/400;animation:float-a 8s ease-in-out infinite}
.hp2{left:clamp(1.25rem,4.5vw,4.5rem);top:clamp(20rem,44vh,32rem);width:min(520px,44vw);aspect-ratio:520/330;animation:float-b 10s ease-in-out infinite}
@keyframes spin-border{to{transform:rotate(360deg)}}
@keyframes float-a{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-14px)}}
@keyframes float-b{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-12px)}}
/* tablet/mobile: hide the second float, but keep ONE photo as a grounded block after the
   buttons and before Selected Clients (gusta.studio-style imagery below the heading) */
@media(max-width:1379px){
  .hero-photo.hp1{display:none}
  .hero-photo.hp2{position:static;grid-column:1;width:100%;max-width:100%;
    margin-top:clamp(2rem,6vw,3.25rem);animation:none;transform:none}
}

.fade-up{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.hero.is-ready .fade-up{opacity:1;transform:none}
.hero.is-ready .fade-up.d1{transition-delay:.38s}
.hero.is-ready .fade-up.d2{transition-delay:.48s}
.hero.is-ready .fade-up.d3{transition-delay:.58s}

/* ============================================================
   CLIENT STRIP
   ============================================================ */
/* bottom padding absorbs the next .rise section's overlap (clamp(48px,6vw,84px)) so the
   manifesto's rounded top doesn't climb over the logo row */
.clients{background:var(--paper);padding-top:clamp(2.5rem,5vw,3.75rem);padding-bottom:calc(clamp(2.5rem,5vw,3.75rem) + clamp(48px,6vw,84px));overflow:hidden}
.clients-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:1.9rem}

/* horizontal auto-scrolling logo marquee — seamless via two identical lists + translateX(-50%) */
.marquee{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.marquee-list li{flex:0 0 auto;margin-right:clamp(1.25rem,2.5vw,2.75rem)}
/* logos sit directly on white (their JPGs carry a white field) — no tile, box, or border */
.marquee-list img{width:clamp(180px,20.5vw,284px);height:auto;display:block}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask:none;mask:none}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .marquee-list{flex-wrap:wrap;justify-content:center}
  .marquee-list li{margin:.5rem}
  .marquee-list[data-clone]{display:none}
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{background:var(--primary-1000);color:#fff;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(5rem,10vw,9rem);padding-bottom:clamp(6rem,12vw,11rem)}
@media(max-width:900px){.manifesto{min-height:auto}}
.manifesto .eyebrow{display:block;color:var(--primary-400);margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.manifesto-copy{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,1rem + 4.4vw,5.75rem);
  line-height:1.14;letter-spacing:-.04em;max-width:20ch;
}
.manifesto-copy .w{color:rgba(255,255,255,.24);transition:color .3s ease}
.manifesto-copy .w.on{color:#fff}
.manifesto-copy .w.accent.on{color:var(--primary-400)}

/* ============================================================
   SERVICES
   ============================================================ */
/* section field is blue (darkened to 700 so the white header copy is legible and no service accent clashes with it); white cards, no hairline borders */
#services{background:var(--primary-700)}
#services .sec-head{border-bottom:none;padding-bottom:0}
#services .eyebrow{color:var(--primary-100)}
#services .sec-head h2{color:#fff}
#services .sec-lede{color:rgba(255,255,255,.88)}

.svc-list{display:grid;gap:clamp(.7rem,1.4vw,1rem)}
.svc{position:relative;background:var(--paper);border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px -28px rgba(3,40,112,.65)}

.svc-head{
  position:relative;width:100%;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:1rem clamp(1rem,3vw,2.5rem);align-items:center;
  padding:clamp(1.25rem,2.6vw,2rem) clamp(1.1rem,2.2vw,2rem);
  overflow:hidden;isolation:isolate;
}
.svc-head::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .6s var(--ease);
}
.svc-head:hover::before,
.svc-head:focus-visible::before,
.svc.is-open .svc-head::before{transform:scaleX(1)}

/* per-service icon chip — carries the service's unique accent (depth within the primary ramp) */
.svc-icon{
  width:clamp(2.6rem,4.5vw,3.4rem);aspect-ratio:1;border-radius:14px;flex:none;
  display:grid;place-items:center;background:var(--accent);color:#fff;
  transition:background .38s var(--ease),color .38s var(--ease);
}
.svc-icon svg{width:54%;height:54%;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-head:hover .svc-icon,.svc.is-open .svc-icon{background:#fff;color:var(--accent)}

.svc-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,1rem + 2.8vw,3.5rem);letter-spacing:-.035em;line-height:1.05;
  color:var(--gray-1000);transition:color .38s var(--ease);
}
.svc-head:hover .svc-title,.svc.is-open .svc-title{color:#fff}

.svc-price{
  font-family:var(--mono);font-size:clamp(.74rem,.7rem + .12vw,.85rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-700);white-space:nowrap;transition:color .38s var(--ease);
}
.svc-head:hover .svc-price,.svc.is-open .svc-price{color:rgba(255,255,255,.92)}

/* circle-plus (redondo-style): plus inside a ring that fills on hover/open */
.svc-plus{position:relative;width:clamp(2.4rem,3.6vw,3rem);aspect-ratio:1;border-radius:50%;flex:none;
  border:1.6px solid var(--gray-400);
  transition:background .38s var(--ease),border-color .38s var(--ease)}
.svc-plus::before,.svc-plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--gray-1000);border-radius:2px;
  transition:background .38s var(--ease),transform .5s var(--ease);
}
.svc-plus::before{width:42%;height:2px;transform:translate(-50%,-50%)}
.svc-plus::after{width:2px;height:42%;transform:translate(-50%,-50%)}
.svc-head:hover .svc-plus,.svc.is-open .svc-plus{background:#fff;border-color:#fff}
.svc-head:hover .svc-plus::before,.svc-head:hover .svc-plus::after,
.svc.is-open .svc-plus::before,.svc.is-open .svc-plus::after{background:var(--accent)}
.svc.is-open .svc-plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}

@media(max-width:700px){
  .svc-head{grid-template-columns:auto 1fr auto;padding-inline:1rem}
  .svc-price{grid-column:2;font-size:.7rem}
}

.svc-panel{overflow:hidden;height:0;transition:height .55s var(--ease)}
.svc-panel-in{
  padding:clamp(1.75rem,3vw,2.75rem) clamp(.85rem,2vw,1.75rem) clamp(2.25rem,4vw,3.25rem);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:1.75rem clamp(2rem,5vw,5rem);
}
@media(max-width:900px){.svc-panel-in{grid-template-columns:1fr}}
.svc-lede{color:var(--ink-soft);font-size:clamp(1.1rem,1rem + .45vw,1.35rem);max-width:38ch;line-height:1.5}
.svc-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem 2.5rem;align-content:start}
.svc-items li{padding-left:1.25rem;position:relative;color:var(--ink);font-size:clamp(1.02rem,1rem + .2vw,1.15rem);line-height:1.45}
.svc-items li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.svc-cta{
  margin-top:1.75rem;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--accent);text-decoration:none;
}
.svc-cta:hover{text-decoration:underline;text-underline-offset:5px}
.svc-cta .arw{transition:transform .3s var(--ease)}
.svc-cta:hover .arw{transform:translateX(6px)}

/* ============================================================
   WORK
   ============================================================ */
/* Selected Work header: centered, stacked (eyebrow / heading / subhead) */
#work .sec-head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1rem}
#work .sec-head h2{margin-top:.5rem}
#work .sec-lede{max-width:48ch;margin-inline:auto}
.work{position:relative}
.case-slot{position:sticky;top:calc(var(--navh) + 1.5rem);padding-bottom:clamp(2rem,4vw,3.5rem)}
.case-slot:nth-child(2){top:calc(var(--navh) + 1.5rem + 30px)}
.case-slot:nth-child(3){top:calc(var(--navh) + 1.5rem + 60px)}
/* spacer AFTER the slots (not inside a sticky slot) extends the container so all three keep
   long, equal sticky ranges and lock as a visible stack before releasing together */
.work-lock{height:min(80vh,760px)}
@media(max-width:900px){.work-lock{display:none}}
.case{
  position:relative;width:100%;overflow:hidden;isolation:isolate;
  background:var(--case-bg,var(--blue));color:#fff;
  border:1px solid rgba(255,255,255,.14);border-radius:24px;
  padding:clamp(1.75rem,4vw,3.25rem);
  box-shadow:0 40px 90px -45px rgba(3,40,112,.75);
  transform-origin:top center;will-change:transform;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:2rem clamp(2rem,5vw,4rem);align-items:center;
}
/* depth cue for stacked cards — dims instead of scaling, so widths stay identical */
.case::after{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;z-index:2;
  background:var(--gray-1000);opacity:var(--dim,0);
}
/* keep the copy above the dim overlay so text stays crisp white as the card recedes
   (only the brand panel + image behind it carry the depth dim) */
.case-body{position:relative;z-index:3}
@media(max-width:900px){
  .case{grid-template-columns:1fr}
  .case-slot{position:static;padding-bottom:1.5rem}
}
.case-role{font-family:var(--mono);font-size:clamp(14px,0.75rem + 0.5vw,16px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.case h3{font-size:clamp(1.9rem,1.2rem + 2.2vw,3.25rem);font-weight:800;margin-top:.9rem;color:#fff}
.case-lede{margin-top:1.1rem;color:#fff;font-size:1.125rem;line-height:1.5}
.case-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 1.5rem;margin-top:2rem}
.case-stat dt{font-family:var(--mono);font-size:clamp(14px,0.75rem + 0.5vw,16px);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:#fff;margin-bottom:.45rem;line-height:1.3}
.case-stat dd{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,1rem + 1.9vw,2.4rem);letter-spacing:-.03em;line-height:1}
/* CTA is now the secondary (glassy outline) button; on the dark case cards use the
   white-outline glassy variant, inverting to a solid white fill on hover */
.case-cta{margin-top:2.1rem;align-self:start}
/* secondary-inverse: white outline + white text/icon, no background fill; fills white on hover */
.case .btn--ghost{border-color:rgba(255,255,255,.7);color:#fff;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.case .btn--ghost:hover{background:#fff;color:var(--case-bg,var(--blue));border-color:#fff}
.case-cta .arw{transition:transform .3s var(--ease)}
.case-cta:hover .arw{transform:translateX(4px)}
.case-media{
  position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:var(--media-bg,rgba(255,255,255,.09));
  display:grid;place-items:center;text-align:center;padding:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
/* the case thumbnails are floating UI mockups on transparency — anchor the mockup FLUSH to the
   bottom of the brand panel and scale it up, leaving the brand colour above and to the sides */
.case-media img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:94%;width:auto;max-width:100%}
/* variant: a 4:3 mockup composed as a centered float — fill the panel edge-to-edge
   (contain = exact fit for a 4:3 source); its own transparent margins reveal the brand colour */
.case-media--full img{left:0;right:0;top:0;bottom:0;transform:none;width:100%;height:100%;max-width:none;object-fit:contain}
@media(max-width:600px){.case-stats{grid-template-columns:1fr 1fr}}

/* ============================================================
   ABOUT
   ============================================================ */
/* full-width 2-row "about me" marquee (Motto *METHOD-style), scrolling opposite directions */
.about-marquee{overflow:hidden;padding-block:clamp(1rem,2.2vw,1.75rem);display:grid;gap:clamp(.25rem,.8vw,.75rem)}
.am-track{display:flex;width:max-content;align-items:center;animation:am-scroll 34s linear infinite;
  font-family:var(--display);font-weight:300;text-transform:uppercase;
  font-size:clamp(2.2rem,6.5vw,5.5rem);line-height:.98;letter-spacing:.01em;color:var(--ink)}
.am-track--rev{animation-direction:reverse}
.am-track>*{flex:none;padding-inline:.32em}
.am-track .am-star{display:inline-flex;align-items:center;color:var(--blue);animation:seal-spin 7s linear infinite}
.am-track .am-star svg{width:.62em;height:.62em;display:block}
@keyframes am-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.am-track,.am-track .am-star{animation:none}}

/* about body on a centered responsive grid: full width capped at 133rem, centered on the page;
   6 columns below 650px (1.3rem gap), 12 columns from 650px (2.4rem gap).
   wearemotto "Method" placement (>=901px): text = 4 cols (1-col offset each side),
   tall portrait = 6 cols running to the grid's right edge; below that the two stack full width. */
.about{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:1.3rem;row-gap:clamp(2rem,5vw,3rem);
  align-items:start;margin-top:clamp(2.5rem,5vw,4rem);
}
/* doubled bottom padding — restores the visible space eaten by the next .rise section overlap */
#about{padding-bottom:calc(var(--sec-y) * 2)}
.about-text{display:flex;flex-direction:column;grid-column:1 / -1}
.about-portrait{grid-column:1 / -1}
@media(min-width:650px){
  .about{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2.4rem}
}
@media(min-width:901px){
  .about-text{grid-column:2 / span 4}
  .about-portrait{grid-column:7 / span 6}
}
.about-text h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,1rem + 4.4vw,4.75rem);line-height:1.02;letter-spacing:-.03em;margin:0;max-width:18ch;
}
.about-text > p{margin-top:clamp(1.25rem,2.5vw,1.75rem);color:var(--ink-soft);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.55}

.about-portrait{position:sticky;top:calc(var(--navh) + 2rem)}
@media(max-width:900px){.about-portrait{position:relative;top:0}}
/* rotating seal badge back over the image (top-right corner) */
.about-portrait .seal-wrap{position:absolute;top:clamp(-1.75rem,-2vw,-1rem);right:clamp(-1.5rem,-1.5vw,-.75rem);width:clamp(165px,19.5vw,228px);z-index:2}
@media(max-width:900px){.about-portrait .seal-wrap{width:150px}}
.portrait-photo{
  aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--gray-200);
}
.portrait-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* blue-1000 pull-quote card with quote glyph */
.about-quote{margin:clamp(2rem,4vw,3rem) 0 0;background:var(--primary-1000);color:#fff;border-radius:20px;padding:clamp(2rem,4vw,3rem)}
.about-quote .qmark{display:block;font-family:var(--display);font-weight:900;font-size:4.5rem;line-height:.7;color:var(--primary-400);margin-bottom:.75rem}
.about-quote p{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.2;font-size:clamp(1.4rem,1rem + 1.8vw,2.15rem);color:#fff;margin:0}

.about-more{margin-top:clamp(1.5rem,3vw,2rem)}
.about-more p{color:var(--ink-soft);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.55}
.about-more p+p{margin-top:1.35rem}
.about-more .btn{margin-top:clamp(1.75rem,3vw,2.5rem)}

/* rotating seal badge (evekayser.com.br-style) — logo icon centered, text circling */
.seal-wrap{display:grid;place-items:center}
.seal{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:seal-spin 22s linear infinite}
.seal-ring text{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;fill:var(--blue-text);text-transform:uppercase}
.seal-mark{position:relative;width:32%;display:block}
.seal-mark svg{width:100%;height:auto;display:block}
@keyframes seal-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.seal-ring{animation:none}}
/* key-word highlight (marino.co.uk-style marker swatch) */
.hl{
  background:var(--primary-200);color:var(--ink);font-weight:600;
  border-radius:.32em;padding:.06em .32em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ============================================================
   TESTIMONIALS  — Motto-style slider
   ============================================================ */
/* bottom padding adds the next .rise section's overlap (clamp(48px,6vw,84px)) so the visible
   space below the cards matches the space above the header */
.tst{background:var(--gray-1000);color:#fff;padding-top:var(--sec-y);padding-bottom:calc(var(--sec-y) + clamp(48px,6vw,84px));overflow:hidden}
.tst .eyebrow{color:var(--primary-400)}
.tst-top{
  display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.tst-top{width:100%;padding-bottom:clamp(1.5rem,3vw,2.25rem)}
.tst-top h2{font-size:clamp(2.4rem,1.2rem + 4.6vw,5.5rem);font-weight:800;margin-top:1rem}
.tst-top .tst-sub{margin-top:1.1rem;color:#A9B4BE;font-size:clamp(1.1rem,1rem + .45vw,1.35rem)}

.tst-ctrl{display:flex;align-items:center;gap:1.25rem}
.tst-count{font-family:var(--mono);font-size:.85rem;letter-spacing:.14em;color:#A9B4BE;white-space:nowrap}
.tst-btn{
  width:56px;height:56px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);
  display:grid;place-items:center;color:#fff;font-size:1.2rem;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,opacity .25s ease;
}
.tst-btn:hover{background:#fff;color:var(--gray-1000);border-color:#fff;transform:translateY(-2px)}
.tst-btn[disabled]{opacity:.3;pointer-events:none}

.tst-track{
  display:flex;gap:clamp(1.25rem,2.5vw,2.25rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.5rem;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
  scroll-padding-inline:var(--gut);
  cursor:grab;
}
.tst-track::-webkit-scrollbar{display:none}
.tst-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}

/* Motto-scale cards: large, generous padding, no border, just a solid panel, tighter radius */
.tst-card{
  margin:0;
  flex:0 0 clamp(320px,56vw,760px);scroll-snap-align:start;
  border:none;border-radius:14px;
  padding:clamp(2rem,4vw,3.5rem);
  background:var(--gray-900);
  display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem);
  transition:background .3s ease;
}
.tst-card:hover{background:var(--gray-800)}
.tst-card blockquote{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,1rem + 2vw,2.75rem);line-height:1.24;letter-spacing:-.03em;flex:1;
}
.tst-who{display:flex;align-items:center;gap:1.25rem}
.tst-photo{
  position:relative;width:76px;height:76px;border-radius:999px;flex:none;overflow:hidden;
  background:var(--gray-800);
  display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;font-weight:600;color:#A9B4BE;
}
.tst-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tst-name{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.tst-org{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#A9B4BE;margin-top:.35rem}

/* ============================================================
   CONTACT
   ============================================================ */
/* ============================================================
   CONTACT + FOOTER — bright-blue ring band over a navy panel (mdntevents.com)
   ============================================================ */
.cta{position:relative;overflow:hidden;background:var(--primary-1000);color:#fff}

/* bright-blue band holds the rotating ring; its bottom edge is the blue/navy boundary and
   overflow:hidden clips the ring's lower arc, so the ring lives ONLY in the blue and the
   navy section hides the rest (mdntevents.com) */
.cta-band{
  position:relative;background:var(--primary-600);overflow:hidden;
  display:flex;justify-content:center;align-items:flex-start;
  padding-top:clamp(1.75rem,3.5vw,3.5rem);
  border-top-left-radius:inherit;border-top-right-radius:inherit;
}
/* full circle of rotating text around the static mark; ~32% is pulled below the band and clipped */
.cta-ring{
  --ring:clamp(300px,60vw,1080px);
  position:relative;width:var(--ring);aspect-ratio:1;display:grid;place-items:center;
  margin-bottom:calc(var(--ring) * -0.32);
}
.cta-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:seal-spin 26s linear infinite}
.cta-ring-svg text{font-family:var(--display);font-weight:900;font-size:35px;letter-spacing:1.5px;fill:#fff;text-transform:uppercase}
.cta-ring-mark{position:relative;width:40%;aspect-ratio:120/87;display:grid;place-items:center}
.cta-ring-mark svg{width:100%;height:auto;fill:#fff}
@media(prefers-reduced-motion:reduce){.cta-ring-svg{animation:none}}

/* navy call-to-action panel — content centered (Figma) */
.cta-body{position:relative;padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.cta-body-in{position:relative;z-index:2;text-align:center}
.cta .eyebrow{color:rgba(255,255,255,.75)}
.cta h2{font-size:clamp(2.2rem,1.2rem + 4vw,4.75rem);font-weight:900;letter-spacing:-.04em;line-height:1.04;margin:1rem auto 0;max-width:18ch}
.cta-sub{margin:clamp(1.25rem,2.5vw,1.75rem) auto 0;color:rgba(255,255,255,.82);font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:60ch;line-height:1.55}
.cta-actions{display:flex;flex-wrap:wrap;gap:.85rem 1rem;margin-top:clamp(2.25rem,4vw,3rem);justify-content:center}
.cta-actions .btn-arr{font-size:.9em;line-height:1}
.cta .btn--solid{background:#fff;color:var(--blue)}
.cta .btn--solid:hover{background:var(--ink);color:#fff}
.cta .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.cta .btn--ghost:hover{background:#fff;color:var(--blue);border-color:#fff}

/* standalone site footer — one navy bar shared across every page (home + legal).
   On the home page it sits right below the navy contact section (seamless); on legal
   pages it caps the white article. Its own bg + overflow so the watermark clips here. */
.site-foot{position:relative;overflow:hidden;background:var(--primary-1000);color:#fff;padding:clamp(2.5rem,5vw,4rem) var(--gut) 0}
.foot-in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:center;text-align:center;
  border-top:1px solid rgba(255,255,255,.18);padding-top:clamp(1.75rem,3vw,2.5rem)}
.foot-in p,.foot-in a{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none}
.foot-in a:hover{color:#fff}
.foot-legal{display:flex;align-items:center;gap:1rem}
.foot-legal li+li{padding-left:1rem;border-left:1px solid rgba(255,255,255,.28)}

/* oversized wordmark at the very bottom, scaling with device width, clipped by the footer edge */
.cta-watermark{
  margin-top:clamp(1.25rem,2.5vw,2.25rem);margin-bottom:-0.12em;
  font-family:var(--display);font-weight:900;text-transform:lowercase;letter-spacing:-.04em;
  font-size:12.8vw;line-height:.9;white-space:nowrap;text-align:center;
  color:var(--primary-900);user-select:none;pointer-events:none;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal,.fade-up{opacity:1!important;transform:none!important}
  .hero-name .ln1,.hero-name .ln2,.menu-nav a{transform:none!important;opacity:1!important;animation:none!important}
  .hero-name{transform:none!important;opacity:1!important}
  .hero-photo,.hero-photo::before{animation:none!important}
  .case-slot{position:static}
  .case{transform:none!important}
  .case::after{opacity:0!important}
  .work-lock{display:none}
  .manifesto-copy .w{color:#fff}
  .manifesto-copy .w.accent{color:var(--primary-400)}
  .menu{transition:none}
}

/* ============================================================
   LEGAL / LONG-FORM PAGES  (privacy, terms)
   ============================================================ */
.legal-wrap{padding-top:calc(var(--navh) + clamp(2rem,5vw,4rem));padding-bottom:clamp(3.5rem,7vw,6rem);
  background-color:#fff;background-image:linear-gradient(165deg,var(--primary-100) 0%,#fff 60%);
  background-repeat:no-repeat;background-size:100% 100svh}
.legal{max-width:50rem;margin-inline:auto}
.legal .eyebrow{color:var(--blue-text)}
.legal h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2.4rem,1.2rem + 3.6vw,4rem);margin-top:.75rem}
.legal-meta{margin-top:1.1rem;color:var(--ink-mute);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.legal h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.legal h3{font-weight:700;font-size:1.15rem;margin-top:1.75rem;color:var(--ink)}
.legal p{margin-top:1rem;color:var(--ink-soft);font-size:1.05rem;line-height:1.65}
.legal ul{margin-top:1rem;padding-left:1.3rem;list-style:disc}
.legal li{margin-top:.5rem;color:var(--ink-soft);font-size:1.05rem;line-height:1.6}
.legal a{color:var(--blue-text);text-decoration:underline;word-break:break-word}
.legal strong{color:var(--ink);font-weight:700}

/* ============================================================
   CASE STUDY — detail-page template (datacenterHawk first; Avetta/Scenta reuse)
   Reusable chrome, all prefixed .cs-*: hero + meta bar, stat block,
   decision block, figure / figure-pair, pull quote, final CTA.
   Content stays 100% width (site rule) — only .wrap provides the gutter.
   ============================================================ */
.cs-hero{background:linear-gradient(165deg,var(--primary-100) 0%,#fff 60%);
  padding-top:calc(var(--navh) + clamp(1.25rem,3.5vw,2.75rem));padding-bottom:clamp(2.75rem,5vw,4.25rem)}
.cs-back{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);text-decoration:none}
.cs-back:hover{color:var(--blue-text)}
/* external link (e.g. Behance case study) */
.cs-exlink{display:inline-flex;align-items:center;gap:.35rem;color:var(--blue-text);font-weight:600;
  text-decoration:underline;text-underline-offset:3px}
.cs-exlink:hover{color:var(--ink)}
.cs-hero .eyebrow{display:block;margin-top:clamp(1.75rem,4vw,3rem)}
.cs-hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.5rem,1.3rem + 4.4vw,6rem);margin-top:1.1rem;max-width:20ch}
.cs-standfirst{margin-top:clamp(1.5rem,3vw,2.25rem);color:var(--ink-soft);
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.5;max-width:62ch;text-wrap:pretty}
.cs-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
/* bordered, rounded container; a divider between each column (multicol column-rule sits in
   the gap and spans the content height only, so it stays clear of the top/bottom border) */
.cs-meta{margin-top:clamp(2.25rem,4.5vw,3.25rem);text-align:left;
  border:1px solid var(--rule);border-radius:16px;
  padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.7rem,2.8vw,2.5rem);
  column-count:4;column-gap:clamp(1.75rem,3.5vw,3rem);column-rule:1px solid var(--rule)}
.cs-meta>div{break-inside:avoid;text-align:left}
.cs-meta dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.cs-meta dd{margin:.45rem 0 0;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.3}
/* tablet: two columns (Role/Timeline · Industry/Scope), vertical rule between them */
@media(max-width:820px){
  .cs-meta{column-count:2}
  .cs-meta>div{margin-bottom:1.35rem}
  .cs-meta>div:nth-child(2n){margin-bottom:0}
}
/* phone: single column stacked, inset horizontal dividers between rows */
@media(max-width:520px){
  .cs-meta{column-count:1;column-rule:0}
  .cs-meta>div{margin:0;padding-block:1rem}
  .cs-meta>div:first-child{padding-top:0}
  .cs-meta>div:last-child{padding-bottom:0}
  .cs-meta>div+div{border-top:1px solid var(--rule)}
}

.cs-section{padding-block:clamp(3.25rem,7vw,6.5rem)}
.cs-section--alt{background:var(--gray-100)}
.cs-section--dark{background:var(--gray-1000);color:#fff}
.cs-cover{padding-bottom:clamp(2rem,4vw,3.5rem)}
/* full-bleed figure: show the image at natural size — no crop frame, no placeholder
   background, no border. Used for the cover and any figure that should read as the raw image. */
.cs-fig-full{margin:0}
.cs-fig-full img{display:block;width:100%;height:auto;border-radius:16px}
/* dark backing panel for a specimen/screenshot — shade via --panel-bg (default blue-800) */
.cs-fig-onblue{background:var(--panel-bg,var(--primary-800));border-radius:16px;padding:clamp(1.25rem,3vw,2.5rem)}
.cs-fig-onblue img{border-radius:0}

/* figures */
.cs-fig{margin:0}
.cs-fig-in{position:relative;border-radius:16px;overflow:hidden;background:var(--paper-alt);
  display:grid;place-items:center;color:var(--ink-mute);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:1rem}
.cs-fig--16x9 .cs-fig-in{aspect-ratio:16/9}
.cs-fig--4x3 .cs-fig-in{aspect-ratio:4/3}
.cs-fig--tall .cs-fig-in{aspect-ratio:4/5}   /* portrait teaser frame for tall page screenshots */
.cs-fig-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-figcap{margin-top:.85rem;font-family:var(--mono);font-size:.78rem;color:var(--ink-mute);line-height:1.45}
.cs-fig-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem)}
.cs-fig-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
.cs-fig-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem)}
@media(max-width:760px){.cs-fig-pair,.cs-fig-trio,.cs-fig-quad{grid-template-columns:1fr}}
/* studiomodular "building blocks" — large natural-size images, second image staggered down, 48px gap */
.cs-fig-pair.cs-stagger{gap:48px;align-items:start}
@media(min-width:761px){.cs-fig-pair.cs-stagger>figure:nth-child(2){margin-top:clamp(3rem,9vw,7rem)}}
@media(max-width:760px){.cs-fig-pair.cs-stagger{gap:1.75rem}}
.cs-media{margin-top:clamp(2rem,4vw,3rem)}
/* scrollable full-page figure — user-driven; overscroll:auto (NOT contain) so the wheel chains
   back to the page once the inner container bottoms out. Focusable for keyboard scrolling. */
.cs-fig-scroll{position:relative;max-width:860px;margin-inline:auto;border:1px solid var(--rule);
  border-radius:18px;background:var(--gray-200);overflow:hidden}
.cs-fig-scroll-in{height:clamp(420px,64vh,720px);overflow-y:auto;overflow-x:hidden;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cs-fig-scroll-in img{width:100%;height:auto;display:block}
.cs-fig-scroll-in:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.cs-fig-scroll::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5.5rem;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.96));pointer-events:none}
.cs-fig-scroll-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);pointer-events:none}

/* principles grid — short rule cards, 3-up desktop / 2 tablet / 1 mobile (Avetta Connect) */
.cs-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.75rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem)}
@media(max-width:900px){.cs-principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cs-principles{grid-template-columns:1fr}}
.cs-principle h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:1.2rem;color:var(--ink)}
.cs-principle p{margin-top:.55rem;color:var(--ink-soft);font-size:1rem;line-height:1.55;text-wrap:pretty}

/* foundations sub-block — heading + body + full-width figure */
.cs-foundation{margin-top:clamp(2.5rem,5vw,4rem)}
.cs-foundation:first-of-type{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.cs-foundation h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);color:var(--ink)}

/* gallery — calm grid: two 4:3 pairs, last figure spans full width (Avetta "in production") */
.cs-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.cs-gallery>:last-child{grid-column:1 / -1}
@media(max-width:760px){.cs-gallery{grid-template-columns:1fr}.cs-gallery>:last-child{grid-column:auto}}

/* stats — 2×2 grid of solid primary-600 cards with white text (marino office-insight style).
   The blue cards carry the colour; the section keeps a soft --paper-alt backdrop. White on
   --blue is AA-large — same accepted treatment as the CTA band and service-card fills. */
.cs-stats{background:var(--paper-alt)}
.cs-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem);
  padding-block:clamp(3.5rem,6vw,5.5rem)}
.cs-stat{background:var(--blue);color:#fff;border-radius:22px;padding:clamp(1.75rem,3.2vw,2.85rem);text-align:left}
.cs-stat dd{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(3rem,2rem + 4vw,5rem);color:#fff}
.cs-stat dt{margin-top:.7rem;font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;color:#fff}
.cs-stat p{margin-top:.55rem;color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.5;max-width:40ch}
@media(max-width:640px){.cs-stats-grid{grid-template-columns:1fr}}

/* section heads + body (case-study scale) */
.cs-h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(2rem,1.2rem + 3vw,3.75rem);margin-top:1rem;max-width:20ch}
.cs-section--dark .cs-h2{color:#fff}
.cs-body{margin-top:clamp(1.25rem,2.5vw,1.75rem);color:var(--ink-soft);
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.6;max-width:66ch;text-wrap:pretty}
.cs-body + .cs-body{margin-top:1.1rem}
.cs-section--dark .cs-body{color:rgba(255,255,255,.85)}

/* decision block: eyebrow + headline span full width; body splits into two columns beneath.
   (Keeps the reader's eye flowing headline → columns instead of headline beside body.) */
.cs-decision{margin-top:clamp(3.5rem,7vw,6rem);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  column-gap:clamp(1.75rem,5vw,5rem);row-gap:0;align-items:start}
.cs-decision:first-of-type{margin-top:clamp(2.5rem,5vw,4rem)}
.cs-decision-num{grid-column:1 / -1;font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-text)}
.cs-decision h3{grid-column:1 / -1;font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.12;
  font-size:clamp(1.55rem,1.1rem + 1.7vw,2.5rem);margin-top:.6rem;max-width:26ch}
.cs-decision-col{margin-top:clamp(1.5rem,3vw,2rem)}
.cs-decision .cs-body{margin-top:clamp(1rem,2vw,1.4rem)}
.cs-decision-col > :first-child{margin-top:0}
@media(max-width:900px){
  .cs-decision{grid-template-columns:1fr}
  .cs-decision-col{margin-top:clamp(1.25rem,3vw,1.75rem)}
}

/* bullet list */
.cs-list{list-style:none}
.cs-list li{position:relative;padding-left:1.5rem;margin-top:1rem;color:var(--ink-soft);font-size:1.05rem;line-height:1.55}
.cs-list li:first-child{margin-top:0}
.cs-list li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:50%;background:var(--blue)}
.cs-list strong{color:var(--ink);font-weight:700}
.cs-section--alt .cs-list li{color:var(--ink-soft)}

/* pull quote */
.cs-pull{border-left:4px solid var(--blue);padding-left:clamp(1.1rem,2vw,1.6rem);margin:0 0 1.5rem;
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.2;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.95rem);color:var(--ink)}

/* ---- scenta case study additions ---- */
/* 3-up stat row */
.cs-stats-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.cs-stats-grid--3{grid-template-columns:1fr}}
/* scenta — body copy fills the content container (no reading measure), per Chris */
.cs-wide :is(.cs-body,.cs-standfirst,.cs-h2){max-width:none}
/* rebrand comparison as cards (had vs missing), 2-up */
.cs-cmp{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(max-width:760px){.cs-cmp{grid-template-columns:1fr}}
.cs-cmp-card{background:var(--paper-alt);border-radius:16px;padding:clamp(1.25rem,2.5vw,1.75rem)}
.cs-cmp-label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45rem}
.cs-cmp-had .cs-cmp-label{color:var(--ink-mute)}
.cs-cmp-miss{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--rule)}
.cs-cmp-miss .cs-cmp-label{color:var(--blue-text)}
.cs-cmp-card p{margin:0;line-height:1.5;font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.cs-cmp-had p{color:var(--ink);font-weight:600}
.cs-cmp-miss p{color:var(--ink-soft)}
/* the ONLY code block on the page — sanitized skeleton, reproduced verbatim */
.cs-code{background:var(--gray-1000);color:#E9EAEB;border-radius:14px;
  padding:clamp(1.25rem,2.5vw,1.75rem) clamp(1.25rem,3vw,2rem);margin-top:clamp(1.5rem,3vw,2.25rem);
  width:100%;max-width:768px;margin-inline:auto;
  font-family:var(--mono);font-size:clamp(.82rem,.78rem + .2vw,.95rem);line-height:1.9;
  overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch}
/* ai-structure — three-block diagram built in the page's own language (no confidential content) */
.cs-blocks{display:grid;gap:.85rem;margin-top:clamp(1.5rem,3vw,2.25rem);width:100%;max-width:768px;margin-inline:auto}
.cs-block{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1rem;justify-content:space-between;
  border:1px solid var(--rule);border-radius:12px;padding:clamp(.9rem,2vw,1.15rem) clamp(1.1rem,2.5vw,1.5rem)}
.cs-block--fixed{border-color:var(--blue);background:var(--paper-alt)}
.cs-block b{font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cs-block span{font-size:.9rem;color:var(--ink-mute)}
/* tall display fixture — cap width so a vertical piece doesn't dominate */
.cs-fig-portrait{max-width:420px;margin-inline:auto}
/* zoomable feature image (wordmark comparison) */
.cs-fig-full a{display:block;cursor:zoom-in}
/* build-phase image slot — labelled placeholder (filename + description) the real image covers when
   dropped into images/work/scenta/. img uses object-fit:contain so a spread/dieline is never cropped. */
.cs-slot{position:relative;border-radius:16px;overflow:hidden;background:var(--paper-alt);
  border:1.5px dashed var(--gray-400);display:grid;place-items:center;
  padding:clamp(1.25rem,3vw,2rem);text-align:center}
.cs-slot-txt{max-width:44ch;line-height:1.5}
.cs-slot-txt b{display:block;font-family:var(--mono);font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue-text);margin-bottom:.5rem;word-break:break-word}
.cs-slot-txt > span{font-size:.9rem;color:var(--ink-soft)}
.cs-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:var(--paper-alt);display:block}
.cs-fig-full a .cs-slot{cursor:zoom-in}
/* once the real image has rendered: drop the dashed placeholder border, go white, hide the label */
.cs-slot.is-loaded{border:0;background:#fff}
.cs-slot.is-loaded > .cs-slot-txt{display:none}
.cs-slot.is-loaded img{background:#fff}
/* natural-height slot (no fixed aspect) — image flows at its own height, label overlays when empty */
.cs-slot--nat{aspect-ratio:auto !important;min-height:12rem;padding:0}
.cs-slot--nat > .cs-slot-txt{position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(1.25rem,3vw,2rem)}
.cs-slot--nat > img{position:relative;inset:auto;height:auto}
/* lockup panels (sku-lockup on Turquoise, naming-set on Mist) — reversed SVG, responsive pad (64px desktop),
   equal height via grid stretch + height:100%, transparent img so the panel color shows through */
.cs-slot--turq,.cs-slot--mist{border:0;padding:clamp(36px,5vw,64px);height:100%}
.cs-slot--turq,.cs-slot--turq.is-loaded{background:#1AAC80}
.cs-slot--mist,.cs-slot--mist.is-loaded{background:#CDE9DF}
.cs-slot--turq img,.cs-slot--turq.is-loaded img,.cs-slot--mist img,.cs-slot--mist.is-loaded img{background:transparent}
/* "the same question" — heading + copy left, floor-display image right */
.cs-display-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;margin-top:clamp(2.5rem,5vw,3.75rem)}
.cs-display-split > .cs-display-text > :first-child{margin-top:0}
@media(max-width:900px){.cs-display-split{grid-template-columns:1fr}}

/* ============================================================================
   scenta guideline components — built from the brand deck, animate in (Motto /
   Gusta treatment). Reuse the .reveal observer; stagger via inline transition-delay. */
/* scenta BRAND fonts — override the site defaults for the type specimens (Chris's call, overrides
   the "no webfont wink" note). Only the scenta type components reference these, so the files load
   ONLY on this page. Drop the woff2 files into /fonts/; until then the specimens fall back cleanly. */
@font-face{font-family:"Codec Pro";font-weight:800;font-style:normal;font-display:swap;src:url("/fonts/CodecPro-Bold.woff2") format("woff2")}
@font-face{font-family:"Codec Pro";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/CodecPro-Regular.woff2") format("woff2")}
@font-face{font-family:"Codec Pro";font-weight:300;font-style:normal;font-display:swap;src:url("/fonts/CodecPro-Light.woff2") format("woff2")}
@font-face{font-family:"Superior Title";font-weight:400;font-style:italic;font-display:swap;src:url("/fonts/SuperiorTitle-Italic.woff2") format("woff2")}
/* AI renders — 3-up grid on desktop, collapsing at smaller breakpoints; no captions */
.cs-render-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
@media(max-width:900px){.cs-render-grid{grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2rem)}}
@media(max-width:560px){.cs-render-grid{grid-template-columns:1fr;gap:1.5rem}}
/* colour palette */
.scn-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(max-width:820px){.scn-palette{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.scn-palette{grid-template-columns:1fr}}
.scn-sw-chip{height:clamp(6.5rem,13vw,10.5rem);border-radius:14px;box-shadow:inset 0 0 0 1px rgba(10,99,72,.10)}
.scn-sw-name{margin-top:.85rem;font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:#0A6348;font-size:1.1rem}
.scn-sw-hex{margin-top:.35rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--ink-mute)}
.scn-sw-role{margin-top:.25rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-text)}
/* scent spheres */
.scn-scents{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.75rem,3.5vw,2.75rem) clamp(1rem,2vw,1.5rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(max-width:820px){.scn-scents{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.scn-scents{grid-template-columns:1fr}}
.scn-scent{text-align:center}
.scn-orb{width:clamp(6rem,13vw,9.5rem);aspect-ratio:1;border-radius:50%;margin:0 auto;
  box-shadow:0 18px 32px -14px rgba(30,40,35,.5)}
.scn-scent-name{margin-top:1rem;font-family:"Superior Title",Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:#0A6348}
.scn-scent-notes{margin-top:.45rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--ink-mute)}
/* typefaces + type scale */
.scn-type{margin-top:clamp(1.5rem,3vw,2.25rem)}
.scn-faces{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
@media(max-width:640px){.scn-faces{grid-template-columns:1fr}}
.scn-face{background:#fff;border-radius:16px;box-shadow:0 20px 45px -28px rgba(10,99,72,.35),inset 0 0 0 1px rgba(10,99,72,.06);
  padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;min-height:14rem}
.scn-face-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#1AAC80}
.scn-face-spec{margin-top:.7rem;font-family:"Codec Pro",var(--display);font-weight:800;letter-spacing:-.03em;color:#0A6348;
  font-size:clamp(2.4rem,1.4rem + 3.2vw,3.75rem);line-height:1}
.scn-face-spec.scn-serif{font-family:"Superior Title",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.scn-face-use{margin-top:auto;padding-top:1.5rem;color:var(--ink-soft);font-size:1rem}
.scn-scale{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.scn-scale-row{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;padding-block:clamp(1.15rem,2.4vw,1.75rem);border-top:1px solid var(--rule)}
@media(max-width:640px){.scn-scale-row{grid-template-columns:1fr;gap:.5rem;align-items:start}}
.scn-scale-role b{display:block;font-family:var(--display);font-weight:800;color:#0A6348;font-size:1rem}
.scn-scale-role span{display:block;margin-top:.28rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-mute)}
.scn-scale-spec{color:#0A6348;line-height:1.08;font-family:"Codec Pro",var(--display);font-weight:800;letter-spacing:-.02em}
.scn-scale-spec.s-body{color:var(--ink);font-weight:400;font-family:"Codec Pro",var(--body);letter-spacing:0}
.scn-scale-spec.s-cap{font-family:"Codec Pro",var(--display);font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-size:.95rem}
.scn-scale-spec.s-serif{font-family:"Superior Title",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:0}
/* type-specimen SVGs (Chris supplies these) — sized off the fallback's font-size; the text under each is the fallback until its SVG drops in */
.scn-svg{display:block;width:auto;height:auto;max-width:100%;max-height:1.2em}
.scn-face-spec .scn-svg{max-height:1.1em;margin-top:.1em}
.scn-scale-spec.s-body .scn-svg,.scn-scale-spec.s-cap .scn-svg{max-height:2.6em}

/* scenta pull quotes: card treatment (light bg, rounded, left-aligned) + word-by-word light on scroll
   (the homepage-manifesto effect). Scoped to .cs-wide so the other case studies keep the plain rule. */
.cs-wide .cs-pull{border-left:0;background:var(--paper-alt);border-radius:20px;
  padding:clamp(1.6rem,3.5vw,2.75rem);margin-block:clamp(2.5rem,5vw,3.75rem);text-align:left;line-height:1.28}
.cs-wide .cs-pull .w{color:rgba(28,34,39,.18);transition:color .4s var(--ease)}
.cs-wide .cs-pull .w.on{color:var(--ink)}
.cs-wide .cs-pull .w.accent.on{color:var(--blue-text)}
/* single-lead cards (converted from a bullet list) — same family as the rebrand comparison cards */
.cs-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(max-width:760px){.cs-cards{grid-template-columns:1fr}}
.cs-card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:clamp(1.35rem,2.6vw,1.9rem)}
.cs-card b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:var(--ink);
  font-size:1.15rem;margin-bottom:.6rem}
.cs-card p{margin:0;color:var(--ink-soft);line-height:1.55;font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.cs-card code{font-family:var(--mono);font-size:.9em}

/* client quote (dark) — restored from comment once approved */
.cs-quote-block{max-width:62ch;margin-inline:auto;text-align:center}
.cs-quote-block blockquote{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;font-size:clamp(1.6rem,1.2rem + 2vw,3rem);color:#fff}
.cs-quote-portrait{width:72px;height:72px;border-radius:50%;object-fit:cover;margin:2rem auto 0;display:block}
.cs-quote-name{margin-top:1rem;font-family:var(--display);font-weight:700;color:#fff}
.cs-quote-title{margin-top:.35rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-300)}

/* final CTA on brand blue, split buttons */
.cs-cta{background:var(--blue);color:#fff;text-align:center}
.cs-cta-in{padding-block:clamp(3.5rem,7vw,6rem);max-width:72ch;margin-inline:auto}
.cs-cta .eyebrow{color:rgba(255,255,255,.82)}
.cs-cta h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(2rem,1.3rem + 3vw,3.5rem);margin-top:1rem;color:#fff;max-width:22ch;margin-inline:auto}
.cs-cta p{margin-top:1.1rem;color:rgba(255,255,255,.9);font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.5}
.cs-cta-actions{margin-top:clamp(1.75rem,3.5vw,2.5rem);display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.cs-cta .btn--white{background:#fff;color:var(--blue-text)}
.cs-cta .btn--white:hover{background:var(--ink);color:#fff}
.cs-cta .btn--ghost-inv{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.cs-cta .btn--ghost-inv:hover{background:#fff;color:var(--blue-text);border-color:#fff}
@media(max-width:600px){.cs-cta-actions{flex-direction:column;align-items:stretch}.cs-cta-actions .btn{width:100%;justify-content:center}}
/* CTA with the rotating "let's create something together" ring after the buttons — the ring's
   lower ~32% is clipped by the band, and the navy site-footer below hides the rest (homepage effect) */
.cs-cta--ring{overflow:hidden}
.cs-cta .cta-ring{margin-top:clamp(2.25rem,4.5vw,4rem);margin-inline:auto}

/* ============================================================
   ABOUT — editorial magazine layout. The one long-form reading page, so it
   DELIBERATELY BREAKS the site's 100%-width rule: PROSE ONLY (.read) is capped
   to a reading measure (~64ch) and offset left of centre. Imagery, section
   headers, and pull quotes still break full-bleed / wide. (Recorded in CLAUDE.md.)
   ============================================================ */
/* 12-column grid with named full-bleed lines */
.ed{display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [main-start] repeat(12,minmax(0,6.25rem))
    [main-end] minmax(var(--gut),1fr)
    [full-end];
  column-gap:clamp(1rem,1.6vw,1.75rem)}
.ed > *{grid-column:main-start / main-end}
.ed .bleed{grid-column:full-start / full-end}
.ed .read{grid-column:3 / 10;max-width:64ch;color:var(--ink-soft);
  font-size:clamp(1.15rem,1.02rem + .55vw,1.42rem);line-height:1.68;text-wrap:pretty}
.ed .read + .read{margin-top:1.4rem}
.ed .read strong{color:var(--ink);font-weight:700}
.ed .note{grid-column:11 / 14;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-mute);line-height:1.5}
.ed .wide{grid-column:2 / 12}
@media(max-width:900px){
  .ed{column-gap:0}
  .ed .read,.ed .note,.ed .wide{grid-column:main-start / main-end;max-width:none}
  .ed .note{margin-top:.6rem}
}
.ed-sec{padding-block:clamp(3.25rem,7vw,6.5rem)}
.ed-sec--alt{background:var(--gray-100)}
/* section eyebrows: plain labels (page-level numbering removed rev2 — values carry the only numbers) */
.ed .eyebrow{grid-column:2 / 12}
.ed-h2{grid-column:2 / 12;font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.03;
  font-size:clamp(2.2rem,1rem + 4.4vw,4.75rem);margin-top:1rem;max-width:18ch;text-wrap:balance}
.ed-h3{grid-column:3 / 10;font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.6rem,1.15rem + 1.7vw,2.6rem);max-width:22ch}
.ed-lead{color:var(--ink) !important;font-size:clamp(1.2rem,1rem + .55vw,1.5rem) !important;line-height:1.55 !important}
/* drop cap on the first paragraph of a section */
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:900;
  font-size:4.6em;line-height:.82;padding:.06em .12em 0 0;color:var(--blue)}
/* pull quote that breaks the measure — rules above/below, no quotation marks */
.ed-pull{grid-column:2 / 12;font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,1.1rem + 2.4vw,3.25rem);letter-spacing:-.035em;line-height:1.14;max-width:22ch;
  border-block:2px solid var(--ink);padding-block:clamp(1.5rem,3vw,2.5rem);margin-block:clamp(2.5rem,5vw,4rem)}
/* hairline between sections */
.ed-rule{grid-column:full-start / full-end;height:1px;background:var(--rule)}
/* figures — deliberately varied widths */
.ed-fig{margin:clamp(1.75rem,3.5vw,3rem) 0 0}
.ed-fig img{display:block;width:100%;height:auto;border-radius:14px}
.ed-fig figcaption{margin-top:.7rem;font-family:var(--mono);font-size:.78rem;color:var(--ink-mute);line-height:1.45}
.ed-fig--bleed{grid-column:full-start / full-end}
.ed-fig--bleed img,.ed-fig--bleed .ph{border-radius:0}
.ed-fig--wide{grid-column:2 / 12}
.ed-fig--offset{grid-column:3 / 10}
.ed-pair{grid-column:2 / 12;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.75rem);margin-top:clamp(1.75rem,3.5vw,3rem)}
.ed-pair .ed-fig{margin:0}
@media(max-width:760px){.ed-pair{grid-template-columns:1fr}}

/* alternating image / text split (metajive / pinkponycreative) — the media column can sit either
   side; it's sticky so a tall column of prose scrolls past a held image (weichie "latest work"). */
.ed-split{grid-column:2 / 12;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.75rem,4vw,4.75rem);margin-top:clamp(1.75rem,3.5vw,3rem);align-items:start}
.ed-split :is(.read,.ed-h3){grid-column:auto;max-width:none;width:auto}
.ed-split-text > :first-child{margin-top:0}
.ed-split .ed-h3{margin-top:clamp(2rem,4vw,3rem)}
.ed-split-media{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem);
  position:sticky;top:calc(var(--navh) + 1.5rem)}
.ed-split-media .ed-fig{margin:0}
.ed-split--rev .ed-split-text{order:2}
@media(max-width:900px){
  .ed-split{grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.5rem)}
  .ed-split--rev .ed-split-text{order:0}
  .ed-split-media{position:static;flex-direction:row}
}
@media(max-width:560px){.ed-split-media{flex-direction:column}}

/* centered statement — thesis sections read better centered than at the reading measure */
.ed-center{grid-column:2 / 12;display:flex;flex-direction:column;align-items:center;text-align:center}
.ed-center > *{grid-column:auto;max-width:none}
.ed-center .ed-h2{max-width:20ch;margin-inline:auto}
.ed-center .read{max-width:60ch;margin-inline:auto}
.ed-pull--center{text-align:center;margin-inline:auto;max-width:26ch}
/* "the short version" — full-bleed (viewport minus gutter): readable text left, big image right
   reaching the edge, vertically centred; image is NOT sticky (scrolls with the page, weichie-style,
   the parallax gives the movement). Headline carries the bottom margin. */
#short-version .eyebrow,#short-version .ed-h2,#short-version .ed-split{
  grid-column:full-start / full-end;padding-inline:var(--gut);width:min(100%,var(--maxw));margin-inline:auto}
#short-version .ed-h2{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
#short-version .ed-split{margin-top:0;grid-template-columns:minmax(0,34rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
#short-version .ed-split-media{position:static}
@media(max-width:900px){#short-version .ed-split{grid-template-columns:1fr;align-items:start}}

/* Origin — full-bleed masonry: white text cards interleave with image cards down 2 columns
   (3 above 1900px). Images keep the in-frame parallax + block float; no captions. */
#origin .eyebrow,#origin .ed-h2,#origin .ed-mason{grid-column:full-start / full-end;padding-inline:var(--gut);width:min(100%,var(--maxw));margin-inline:auto}
#origin .ed-h2{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.ed-mason{columns:2;column-gap:clamp(1.25rem,2.5vw,2.5rem);margin-top:0}
.ed-mason > *{break-inside:avoid;margin:0 0 clamp(2rem,3vw,3rem)}
.mason-text{background:var(--paper);border-radius:16px;padding:clamp(1.5rem,2.5vw,2.25rem)}
.mason-text .read,.mason-text .ed-h3{grid-column:auto;max-width:none;margin-inline:0}
.mason-text .read:first-child,.mason-text .ed-h3:first-child{margin-top:0}
.mason-text .ed-h3{margin:0 0 .7rem}
.mason-fig{margin-top:0}
@media(min-width:1900px){.ed-mason{columns:3}}
@media(max-width:640px){.ed-mason{columns:1}}

/* image parallax (weichie.com) — flagged frames clip an oversized image the scroll handler drifts */
@media(prefers-reduced-motion:no-preference){
  [data-parallax]{overflow:hidden}
  [data-parallax] img{will-change:transform}
  .ph[data-parallax] img{top:-13%;bottom:auto;height:126%}
  .ed-hero-fig .frame[data-parallax] img{position:relative;top:-13%;height:126%}
}
.ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--paper-alt);border-radius:14px;
  display:grid;place-items:center;color:var(--ink-mute);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:1rem}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ed-fig--bleed .ph{aspect-ratio:16/6}
/* hero */
.ed-hero{background:linear-gradient(165deg,var(--primary-100) 0%,#fff 62%);
  padding-top:calc(var(--navh) + clamp(1.5rem,4vw,3rem));padding-bottom:clamp(2.5rem,5vw,4rem)}
.ed-hero .eyebrow{grid-column:2 / 12}
.ed-hero h1{grid-column:2 / 12;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.6rem,1rem + 6.4vw,7rem);margin-top:1.1rem;max-width:16ch;text-wrap:balance}
.ed-standfirst{grid-column:2 / 9;margin-top:clamp(1.5rem,3vw,2.25rem);color:var(--ink-soft);
  font-size:clamp(1.3rem,1.05rem + 1vw,1.95rem);line-height:1.45;text-wrap:pretty}
.ed-portrait{grid-column:2 / 12;margin-top:clamp(2rem,4vw,3rem)}
.ed-portrait img{display:block;width:100%;height:auto;border-radius:18px}
/* about stat block — ONE glass panel on the brand-blue pattern (affinity.pt glass), the three
   figures split by vertical dividers. Inner wrap caps to the main content measure. */
.ed-statband{background:var(--primary-600) url('/images/backgrounds/pattern.png') repeat;
  background-size:340px;padding-block:clamp(3.5rem,6.5vw,6rem);margin-block:clamp(2.5rem,5vw,4rem)}
.ed-statband .wrap{max-width:94.25rem;margin-inline:auto}
.ed-stats{display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:22px;
  box-shadow:0 18px 50px -20px rgba(3,40,112,.5);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1)}
.ed-stat{--stat-pad:clamp(1.6rem,2.6vw,2.5rem);padding:var(--stat-pad);position:relative}
/* divider is inset by the cell padding — spans the content height, never touches the panel edges */
.ed-stat + .ed-stat::before{content:"";position:absolute;left:0;top:var(--stat-pad);bottom:var(--stat-pad);
  width:1px;background:rgba(255,255,255,.4)}
.ed-stat dd{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(2.6rem,1.6rem + 3.4vw,4.5rem);color:#fff}
.ed-stat dt{margin-top:.7rem;font-family:var(--display);font-weight:700;font-size:1.15rem;color:#fff}
.ed-stat p{margin-top:.55rem;color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.5;max-width:32ch}
@media(max-width:760px){
  .ed-stats{grid-template-columns:1fr}
  .ed-stat + .ed-stat::before{left:var(--stat-pad);right:var(--stat-pad);top:0;bottom:auto;width:auto;height:1px}
}
/* the record — index / credits list, dry proof not a résumé */
.ed-index{grid-column:3 / 12}
.idx-group{margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.idx-group:first-of-type{margin-top:clamp(1rem,2vw,1.5rem)}
.idx-row{display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;align-items:baseline;padding-block:1.05rem;border-bottom:1px solid var(--rule)}
.idx-role{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.15rem;color:var(--ink)}
.idx-date{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--ink-mute);white-space:nowrap;text-align:right}
.idx-points{grid-column:1 / -1;margin-top:.4rem;list-style:none}
.idx-points li{position:relative;padding-left:1.2rem;margin-top:.5rem;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.idx-points li::before{content:"";position:absolute;left:0;top:.5em;width:.38rem;height:.38rem;border-radius:50%;background:var(--blue)}
.idx-flat{padding-block:.85rem;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr auto;gap:.4rem 2rem;align-items:baseline}
.idx-edu{margin-top:clamp(1.5rem,3vw,2.25rem);color:var(--ink-soft);font-size:1rem;line-height:1.7}
/* personal — photo essay, asymmetric, varied sizes */
.ed-essay{grid-column:2 / 12;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.75rem,3.5vw,3rem);margin-top:clamp(1.75rem,3.5vw,2.75rem);align-items:start}
@media(max-width:640px){.ed-essay{grid-template-columns:1fr}}
.ed-essay-item img{display:block;width:100%;height:auto;border-radius:14px}
.ed-essay-item .ph{aspect-ratio:3/2}
.ed-essay-item--tall .ph{aspect-ratio:3/4}
.ed-essay-item h3{font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:1.3rem;color:var(--ink);margin-top:1rem}
.ed-essay-item p{margin-top:.55rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.ed-essay-item--nofig h3{margin-top:0}

/* about — hero 16:9 figure (replaces the tall portrait) */
.ed-hero-fig{grid-column:full-start / full-end;margin-top:clamp(1.75rem,4vw,3rem);padding-inline:var(--gut);width:min(100%,var(--maxw));margin-inline:auto}
.ed-hero-fig .frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--paper-alt)}
.ed-hero-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
/* name marquee reuses .about-marquee / .am-track (below the hero image, doubles as a section break) */
.about-pg .about-marquee{border-block:0}
/* solid-colour section band (gusta) — navy, white text */
.ed-sec--navy{background:var(--primary-1000);color:#fff}
.ed-sec--navy .ed-h2,.ed-sec--navy .ed-h3{color:#fff}
.ed-sec--navy .read{color:rgba(255,255,255,.86)}
.ed-sec--navy .read strong{color:#fff}
/* "how I operate" — dark gray-1000 band, the six values as a white card grid (gatzara
   "Expertise" treatment). Counter still drives the numbers; no hardcoded 01–06. */
#how-i-operate{background:var(--gray-1000)}
#how-i-operate .eyebrow{color:var(--primary-300)}
#how-i-operate .ed-h2{color:#fff}
#how-i-operate .read{color:rgba(255,255,255,.74)}
.values{grid-column:main-start / main-end;counter-reset:val;list-style:none;
  margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.5vw,1.4rem)}
.value{counter-increment:val;background:var(--paper);border-radius:22px;
  padding:clamp(1.7rem,2.4vw,2.4rem);display:flex;flex-direction:column}
.value::before{content:counter(val,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;
  letter-spacing:.14em;color:var(--blue-text);margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.value-h{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);
  letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.value-sub{display:block;margin-top:.55rem;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.value-body{color:var(--ink-soft);margin-top:1rem;line-height:1.6}
@media(max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.values{grid-template-columns:1fr}}
/* "in the numbers" grid (redondo) — big figures on the navy band */
.ed-numbers{grid-column:2 / 12;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(2.25rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:760px){.ed-numbers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.ed-numbers{grid-template-columns:1fr}}
.ed-number dd{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.88;
  font-size:clamp(2.4rem,1.5rem + 3.2vw,4.5rem);color:#fff}
.ed-number dt{margin-top:.55rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--primary-300);line-height:1.5}