*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}

:root{
  /* TYPE, 5 sizes. Strict. */
  --d: clamp(4rem,10vw,10rem);       /* display */
  --h: clamp(1.9rem,3vw,3rem);       /* heading */
  --b: clamp(1.2rem, 2vw, 1.85rem);          /* large body: 19px→29px→30px */
  --p: clamp(1rem, 1.15vw, 1.25rem);          /* paragraph: 16px→18px→20px */
  --l: clamp(0.75rem, 0.8vw, 0.88rem);        /* label */
  --t: clamp(1.3rem, 1.5vw, 1.75rem);         /* section titles */

  /* Palette */
  --cream:#ffece3; --cream2:#f0d8cc;
  --dark:#161616;  --blue:#0010e8;
  --coral:#f8725e; --mauve:#c458a8;
  --purple:#7232c8;--white:#ffffff;

  /* Gradient */
  --gm:linear-gradient(138deg,#f8826e 0%,#e0629a 18%,#c45fa8 36%,#8845c8 56%,#3525e8 78%,#0010e8 100%);

  --w:1160px; --pad:clamp(1.4rem,4.5vw,3rem);
  --sp:clamp(5rem,9vw,9.5rem); --cut:3.5rem;
}

body{font-family:'Lato',sans-serif;font-weight:300;font-size:var(--p);
  color:var(--dark);background:var(--cream);overflow-x:hidden;line-height:1.82}

.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.lbl{font-family:'Cormorant Garamond',serif;
  font-size:var(--t);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--dark);display:block;margin-bottom:2rem}

/* ── Nav ──────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:500;height:62px;
  transition:background .5s,backdrop-filter .5s,box-shadow .5s}
#nav.scrolled{background:rgba(255,236,227,.72);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(248,154,142,.18)}
.nav-inner{max-width:var(--w);margin:0 auto;height:100%;
  padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between}
.nav-logo{text-decoration:none;line-height:0}
.nav-logo img{height:24px;width:auto}
#nav ul{display:flex;gap:2.4rem;list-style:none}
#nav ul a{font-size:var(--l);letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;
  color:var(--dark);text-decoration:none;opacity:.7;
  transition:opacity .2s,color .2s,transform .2s;display:block}
#nav ul a:hover{opacity:1;color:var(--blue);transform:translateX(4px)}
#nav ul a:hover{opacity:1;color:var(--blue)}
#nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
#nav-toggle span{display:block;width:22px;height:1.5px;background:var(--dark)}

/* ── Atmosphere (fixed bg) ────────────────────── */
#atm{position:fixed;inset:0;z-index:-9;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 80% 10%,
    rgba(248,154,142,.13) 0%,rgba(224,127,160,.05) 55%,transparent 100%)}

/* ══════════════════════════════════════════════
   HERO
   Three-layer parallax:
   h-bg  : full gradient panel (slides right on scroll)
   h-mid : cream diagonal panel (slides left on scroll)  
   h-fg  : content (rises slowest, clearly in front)
══════════════════════════════════════════════ */
#hero{min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;background:var(--cream);isolation:isolate}

/* Full gradient, fills the entire hero */
.h-bg{position:absolute;inset:-12%;background:var(--gm);
  will-change:transform;z-index:1}

/* Cream diagonal panel, sits over left portion */
.h-mid{position:absolute;inset:-12%;background:var(--cream);
  clip-path:polygon(0 0,61% 0,36% 100%,0 100%);
  will-change:transform;z-index:2}

/* Seam chromatic bloom at the diagonal edge */
.h-seam{display:none}

/* Content: left-aligned, editorial asymmetry */
#hero .wrap{position:relative;z-index:5;
  padding-top:9rem;padding-bottom:6rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:var(--w)}

.hero-logo{width:clamp(200px,36vw,480px);height:auto;margin-bottom:.8rem;
  will-change:transform;
  filter:drop-shadow(0 2px 24px rgba(255,236,227,.7)) drop-shadow(0 1px 10px rgba(0,0,0,.08));
  opacity:0;animation:riseIn 1s .06s ease forwards}

/* City line, lockup with logo */
.hero-cities{font-size:var(--l);letter-spacing:.55em;text-transform:uppercase;font-weight:700;color:var(--dark);margin-bottom:6rem;transition:color .3s ease;opacity:0;animation:riseIn .9s .2s ease forwards}

/* Brand statement, sits between h-rule and hero-sub, large serif */
.hero-tagline{font-family:'Cormorant Garamond',serif;font-size:var(--h);font-weight:600;color:var(--dark);letter-spacing:-.01em;line-height:1.25;white-space:nowrap;margin-bottom:.8rem;transition:color .3s ease;opacity:0;animation:riseIn 1s .62s ease forwards}
.ht-2{display:inline}

/* Blue accent divider, the breath */
.h-rule{display:none}

/* Main statement, left aligned, large serif */
.hero-sub{font-family:'Cormorant Garamond',serif;font-size:var(--p);font-weight:400;color:var(--dark);line-height:1.9;max-width:480px;margin-top:.4rem;margin-bottom:3.5rem;transition:color .3s ease;opacity:0;animation:riseIn 1s .68s ease forwards}
.hero-sub:hover{text-shadow:0 0 20px rgba(255,236,227,1),0 0 40px rgba(255,236,227,1),0 0 70px rgba(248,130,110,.4)}

.btn{font-size:var(--l);letter-spacing:.38em;text-transform:uppercase;
  color:var(--white) !important;background:var(--dark);padding:1.1rem 2.8rem;
  text-decoration:none;display:inline-block;border-radius:6px;
  transition:background .35s,transform .25s,box-shadow .35s;
  opacity:0;animation:riseIn 1s .88s ease forwards}
.btn:hover{background:var(--blue);transform:translateY(-3px);
  box-shadow:0 14px 44px rgba(0,19,218,.28)}

.h-scroll{position:absolute;bottom:2.2rem;right:var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:5;
  opacity:0;animation:fadeIn 1s 2.2s ease forwards}
.h-scroll span{font-size:var(--l);letter-spacing:.5em;text-transform:uppercase;
  color:rgba(22,22,22,.35);writing-mode:vertical-rl;transform:rotate(180deg)}
.h-scroll i{display:block;width:1px;height:44px;
  background:linear-gradient(180deg,rgba(0,19,218,.32),transparent);
  animation:scrollLine 2.5s ease-in-out infinite}

/* ══════════════════════════════════════════════
   WHO, centred editorial layout
══════════════════════════════════════════════ */
#who{background:var(--cream);position:relative;z-index:2;
  padding:calc(var(--sp)*.9) 0;overflow:hidden;text-align:center}

#who::before{content:'';position:absolute;top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,rgba(248,130,110,.08) 0%,transparent 100%);
  pointer-events:none}

.who-center{max-width:900px;margin:0 auto;position:relative;z-index:1}

/* Section title, more visible, bolder */
.who-title{
  font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:var(--t);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark);display:block;margin-bottom:2rem;
  position:relative}
.who-title::after{content:'';display:block;width:36px;height:1px;
  background:var(--coral);margin:.9rem auto 0}
/* Underlines on section labels matching .who-title */
#storytelling .lbl::after{
  content:'';display:block;width:36px;height:1px;
  background:var(--coral);margin:.9rem auto 0}
.svc-h2::after{
  content:'';display:block;width:36px;height:1px;
  background:var(--coral);margin:.9rem auto 0}
.cl-title::after{
  content:'';display:block;width:36px;height:1px;
  background:var(--coral);margin:.9rem auto 0}


.who-lead{font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:var(--b);line-height:1.7;color:var(--dark);margin-bottom:1.6rem}
.who-body{font-size:var(--p);line-height:1.9;color:rgba(22,22,22,.52);
  max-width:740px;margin:0 auto 1rem}
/* Quote, bold, no border, close to tags */
.who-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;
  font-size:var(--b);line-height:1.72;color:var(--blue);
  margin:0 auto 0;display:block;opacity:.9}

/* Tags bar, full width, right under quote */
.who-tags{display:flex;gap:0;flex-wrap:nowrap;margin-top:1.6rem;
  border-top:1px solid rgba(22,22,22,.08);border-bottom:1px solid rgba(22,22,22,.08);
  overflow-x:auto;justify-content:center}
.who-tag{font-size:var(--l);letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  padding:1.1rem 2rem;color:rgba(22,22,22,.4);white-space:nowrap;
  border-right:1px solid rgba(22,22,22,.08);transition:color .2s,background .2s;flex-shrink:0}
.who-tag:last-child{border-right:none}
.who-tag:hover{color:var(--blue);background:rgba(0,16,232,.03)}

/* ══════════════════════════════════════════════
   BELIEF, immersive gradient chapter
   The philosophical core. Full gradient bg.
   Large opening declaration. Three pillars.
   This should feel like a magazine centrefold.
══════════════════════════════════════════════ */
#belief{position:relative;z-index:3;
  clip-path:polygon(0 0,100% var(--cut),100% calc(100% - var(--cut)),0 100%);
  padding:calc(var(--sp) + var(--cut)*1.2) 0;
  margin:calc(var(--cut)*-1) 0;
  overflow:hidden;isolation:isolate}

.bl-bg{position:absolute;inset:-8%;background:var(--gm);
  will-change:transform;transform-origin:50% 50%}
.bl-light{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 85% at 50% 50%,
    rgba(255,255,255,.24) 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.01) 100%)}

#belief .wrap{position:relative;z-index:2;transform:translateY(-1.5rem)}
#belief .lbl{color:rgba(255,255,255,.75)}
#storytelling .lbl{color:var(--dark)}

/* Two-column belief layout */
.belief-grid{display:flex;flex-direction:column;gap:2.5rem;text-align:center}

.belief-left .lbl{color:rgba(255,255,255,.65)}

/* Large display statement from the manifesto, the visual peak */
.belief-decl{font-family:'Cormorant Garamond',serif;font-weight:700;text-align:center;
  font-size:var(--h);line-height:1.1;color:var(--white);
  letter-spacing:-.015em}
.belief-decl em{display:block;font-style:italic;font-weight:300;
  color:rgba(255,255,255,.78);margin-top:.3rem}

.belief-body{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:var(--b);text-align:center;max-width:860px;margin:0 auto;
  line-height:1.72;color:rgba(255,255,255,.88)}
.belief-body .kw{font-weight:600;color:var(--white)}
.belief-body .kw-i{font-style:italic;color:rgba(255,255,255,.88)}

/* Pillar row */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2);margin-top:3rem}
.pillar{padding:2rem 2rem 2rem 0;
  border-right:1px solid rgba(255,255,255,.12);text-align:left}
.pillar:last-child{border-right:none}
.pillar:nth-child(2),.pillar:nth-child(3){padding-left:2.2rem}
.pillar-n{display:none}
.pillar-t{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:var(--b);color:var(--white);line-height:1.12;margin-bottom:.65rem}
.pillar-t em{font-style:italic;font-weight:300;color:rgba(255,255,255,.8)}
.pillar-d{font-size:var(--p);line-height:1.88;color:rgba(255,255,255,.62)}

/* ══════════════════════════════════════════════
   STORYTELLING, quiet cream chapter
══════════════════════════════════════════════ */
#storytelling{background:var(--cream);position:relative;z-index:2;
  padding:calc(var(--sp)*.85) 0;
  text-align:center;overflow:hidden;isolation:isolate}

.st-glow{position:absolute;top:-5%;left:-8%;bottom:-5%;width:44%;
  background:linear-gradient(135deg,rgba(248,154,142,.17) 0%,
    rgba(188,121,160,.1) 42%,rgba(123,86,180,.05) 72%,transparent 100%);
  clip-path:polygon(0 0,80% 0,100% 50%,80% 100%,0 100%);
  pointer-events:none;will-change:transform,opacity;filter:blur(10px)}

.st-quote{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
  font-size:var(--h);line-height:1.42;color:var(--dark);max-width:860px;
  margin:0 auto 1.8rem;position:relative;z-index:1}
.st-body{font-size:var(--p);line-height:1.9;color:rgba(22,22,22,.52);max-width:660px;
  margin:0 auto 3.5rem;position:relative;z-index:1}
.st-three{display:flex;justify-content:center;gap:5rem;flex-wrap:wrap;
  position:relative;z-index:1}
.st3{text-align:center}
.st3-n{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:var(--h);color:var(--coral);display:block;line-height:1}
.st3-l{font-size:var(--l);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(22,22,22,.42);display:block;margin-top:.5rem}

/* ══════════════════════════════════════════════
   SERVICES, cream-tonal, architectural grid
══════════════════════════════════════════════ */
#services{background:var(--cream2);position:relative;z-index:2;
  clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);
  padding:calc(var(--sp) + var(--cut)) 0 var(--sp);
  margin-top:calc(var(--cut)*-1);overflow:hidden;isolation:isolate}
.sv-glow{position:absolute;bottom:-10%;right:-10%;width:54%;height:68%;
  background:radial-gradient(ellipse 78% 68% at 88% 85%,
    rgba(0,19,218,.09) 0%,rgba(123,86,180,.12) 30%,rgba(188,121,160,.07) 60%,transparent 100%);
  pointer-events:none;will-change:transform,opacity;filter:blur(4px)}
#services .wrap{position:relative;z-index:1}
.svc-top{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:3.5rem;text-align:center}
.svc-h2{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:var(--t);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark);line-height:1.2}
.svc-h2 em{font-style:normal;font-weight:700;color:var(--dark)}
.svc-eye{font-size:var(--l);letter-spacing:.32em;text-transform:uppercase;
  color:rgba(22,22,22,.3);padding-bottom:.7rem;border-bottom:1px solid rgba(0,19,218,.14)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(22,22,22,.1);width:100%;overflow:hidden;border-radius:2px}
.sc{background:rgba(255,236,227,.72);padding:2.2rem 2rem;min-width:0;
  transition:background .3s,transform .3s,box-shadow .3s}
.sc:hover{background:var(--cream);transform:translateY(-4px);
  box-shadow:0 16px 52px rgba(0,19,218,.09)}
.sc-n{display:none}
.sc-t{display:block;font-family:'Cormorant Garamond',serif;font-weight:700;font-size:var(--t);letter-spacing:.06em;text-transform:uppercase;color:var(--dark);margin-bottom:.8rem}
.sc-d{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:var(--p);
  line-height:1.55;color:rgba(22,22,22,.55)}
.sc-list{margin-top:1.2rem;list-style:none}
.sc-list li{font-size:var(--p);color:rgba(22,22,22,.42);
  padding:.35rem 0;border-bottom:1px solid rgba(22,22,22,.07)}

/* ══════════════════════════════════════════════
   CLIENTS, editorial masthead moment
   Brand names as large, spaced text. Not tiny labels.
   A proper proof-point moment.
══════════════════════════════════════════════ */
#clients{background:var(--cream);position:relative;z-index:3;
  padding:calc(var(--sp)*.6) 0;overflow:hidden;
  border-top:1px solid rgba(22,22,22,.08);text-align:center}

/* Centred title matching other section titles */
.cl-title{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:var(--t);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark);display:block;margin-bottom:2rem;position:relative}
.cl-names{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;border-top:1px solid rgba(22,22,22,.08);border-bottom:1px solid rgba(22,22,22,.08);padding:0;margin-top:.9rem;overflow-x:visible}
.cl-name{font-size:var(--l);letter-spacing:.2em;text-transform:uppercase;font-weight:300;padding:1.1rem 2rem;color:rgba(22,22,22,.4);white-space:nowrap;border-right:none;transition:color .2s,background .2s;flex-shrink:0}
.cl-name:last-child{}
.cl-name:hover{color:var(--blue);background:rgba(0,16,232,.03)}

/* ══════════════════════════════════════════════
   TEAM
══════════════════════════════════════════════ */
#team{background:var(--cream);position:relative;z-index:2;
  padding:calc(var(--sp)*.6) 0 var(--sp);overflow:hidden;text-align:center;isolation:isolate}
.tm-glow{position:absolute;top:-8%;right:-8%;width:52%;height:54%;
  background:radial-gradient(ellipse 80% 75% at 82% 16%,
    rgba(248,154,142,.13) 0%,rgba(188,121,160,.06) 55%,transparent 100%);
  pointer-events:none;will-change:transform}
.team-intro{max-width:none;width:100%;margin:0 auto 1.8rem;position:relative;z-index:1}
.team-tagline{font-size:var(--p);color:rgba(22,22,22,.5);line-height:1.8;
  margin-top:.8rem;display:block}
/* Team heading: subtitle line + logo */
/* Team: subtitle large + prominent */
.team-subtitle{font-family:'Cormorant Garamond',serif !important;font-weight:700 !important;font-size:var(--t) !important;letter-spacing:.14em !important;text-transform:uppercase !important;color:#161616 !important;display:block !important;margin:0 auto .1rem !important;text-align:center !important}
/* Team logo: clip to show only SHIFT part (top 62% of PNG) */
.team-logo-wrap{
  /* Container clips to show only SHIFT wordmark */
  width:clamp(170px,26vw,310px);
  /* Height: slightly past SHIFT stroke, crop COLLECTIVE */
  height:clamp(47px,7.2vw,85px);
  overflow:hidden;
  margin:0 auto 1.2rem;
  position:relative}
.team-logo-img{
  /* Scale to container width; SHIFT fills top portion, COLLECTIVE clips off */
  width:100%;
  height:auto;
  display:block;
  position:absolute;top:0;left:0;
  filter:brightness(0) saturate(100%) invert(8%) sepia(100%)
    saturate(7000%) hue-rotate(227deg) brightness(95%) contrast(110%)}
.team-intro p{font-size:var(--p);line-height:1.9;color:rgba(22,22,22,.46)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;text-align:left;
  position:relative;z-index:1}
.t-img{height:320px;overflow:hidden;padding:0;position:relative;transition:transform .55s cubic-bezier(.16,1,.3,1);background:var(--cream2)}
.t-card:hover .t-img{transform:none}
.t-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.t-card:nth-child(1) .t-img img{object-position:center 15%}
.t-card:nth-child(2) .t-img img{object-fit:cover;object-position:center top}
.t-note{font-size:var(--l);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.38);position:relative;z-index:1}
.t-name{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:var(--b);color:var(--dark);margin-bottom:.2rem;margin-top:.8rem}
.t-role{font-size:var(--l);letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.7rem;opacity:.85}
.t-bio{font-size:var(--p);line-height:1.9;color:rgba(22,22,22,.48)}
.team-close{text-align:center;margin-top:2.5rem;
  padding-top:2rem;border-top:1px solid rgba(22,22,22,.07);
  position:relative;z-index:1}
.team-close q{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:var(--b);color:var(--blue);display:block;
  margin:0 auto;line-height:1.55;quotes:none}
.team-close q::before{content:'\201C'}
.team-close q::after{content:'\201D'}
.team-close-attr{font-size:var(--l);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(22,22,22,.36)}

/* ══════════════════════════════════════════════
   CONTACT, radiant arrival
══════════════════════════════════════════════ */
#contact{position:relative;z-index:5;
  clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);
  padding:calc(var(--sp) + var(--cut)) 0 calc(var(--sp)*1.4);
  margin-top:calc(var(--cut)*-1);overflow:hidden;text-align:center;isolation:isolate}
.ct-bg{position:absolute;inset:-12%;background:var(--gm);
  will-change:transform;transform-origin:50% 50%}
.ct-light{position:absolute;inset:0;pointer-events:none}
.ct-light::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 65% at 28% 42%,
    rgba(255,236,227,.22) 0%,rgba(255,236,227,.08) 55%,transparent 100%)}
.ct-light::after{content:'';position:absolute;top:0;left:0;right:0;height:30%;
  background:linear-gradient(180deg,
    rgba(188,121,160,.4) 0%,transparent 100%)}
#contact .wrap{position:relative;z-index:2}
.c-h2{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:var(--d);
  line-height:.88;letter-spacing:-.025em;color:var(--white);margin-bottom:1.4rem}
.c-h2 em{font-style:italic;font-weight:300;color:rgba(255,255,255,.78)}
.c-sub{font-size:var(--p);line-height:1.9;color:rgba(255,255,255,.65);
  max-width:560px;margin:0 auto 4rem}
.c-row{display:flex !important;justify-content:center !important;gap:4rem !important;flex-wrap:nowrap !important;flex-direction:row !important;
  margin-bottom:4rem;text-align:center;align-items:flex-start}
.c-name{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:var(--b);color:var(--white);margin-bottom:.2rem}
.c-title{font-size:var(--l);letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.68);margin-bottom:.8rem}
.c-detail{font-size:var(--p);line-height:2;color:rgba(255,255,255,.55)}
.c-email{margin-bottom:4.5rem}
.c-email a{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
  font-size:var(--b);color:var(--white);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:.3rem;
  transition:color .3s,border-color .3s}
.c-email a:hover{color:var(--cream);border-color:var(--cream)}
footer{border-top:1px solid rgba(255,255,255,.18);padding-top:1.5rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;z-index:2}
.f-logo{height:18px;width:auto;filter:invert(1) brightness(2);opacity:.45}
.f-links{display:none}
.f-links a{font-size:var(--l);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--white)}
.f-copy{font-size:var(--l);color:rgba(255,255,255,.25)}


/* Pillars on cream background (moved from belief to storytelling) */
.pillars-light{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(22,22,22,.1);margin-bottom:0;width:100%}
.pillar-l{padding:2rem 2rem 2rem 0;
  border-right:1px solid rgba(22,22,22,.08);text-align:left;min-width:0}
.pillar-l:last-child{border-right:none}
.pillar-l:nth-child(2),.pillar-l:nth-child(3){padding-left:2rem}
.pillar-lt{font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:var(--b);color:var(--dark);line-height:1.12;margin-bottom:.6rem}
.pillar-lt em{font-style:italic;font-weight:300;color:var(--coral)}
.pillar-ld{font-size:var(--p);line-height:1.85;color:rgba(22,22,22,.52)}
.st-rule{width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,22,22,.1),transparent);
  margin:3rem 0}

/* ── Reveals ───────────────────────────────── */
.rv  {opacity:0;transform:translateY(32px)}
.rv-l{opacity:0;transform:translateX(-24px)}
.rv-r{opacity:0;transform:translateX(24px)}
.rv-s{opacity:0;transform:scale(.96) translateY(14px)}
.rv,.rv-l,.rv-r,.rv-s{
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.rv.on,.rv-l.on,.rv-r.on,.rv-s.on{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.17s}.d3{transition-delay:.29s}
.d4{transition-delay:.43s}.d5{transition-delay:.59s}.d6{transition-delay:.78s}

@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scrollLine{0%,100%{transform:scaleY(1);opacity:.4}50%{transform:scaleY(1.4);opacity:.85}}

/* ── Responsive ───────────────────────────── */

  /* Dropdown closed state — used as base for animation */
#nav ul{
  position:fixed;top:62px;right:var(--pad);left:auto;
  flex-direction:column;gap:.8rem;min-width:190px;
  background:rgba(255,236,227,.18);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  padding:1.6rem 2rem 1.8rem;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  box-shadow:0 12px 48px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5);
  z-index:499;
  /* Closed: invisible + shifted up */
  opacity:0;transform:translateY(-12px) scale(.97);
  pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),
             transform .3s cubic-bezier(.16,1,.3,1);
  list-style:none;
}
#nav ul.open{
  display:flex;
  opacity:1;transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* Staggered item reveal */
#nav ul li{opacity:0;transform:translateX(8px);
  transition:opacity .25s ease,transform .25s ease}
#nav ul.open li{opacity:1;transform:none}
#nav ul.open li:nth-child(1){transition-delay:.06s}
#nav ul.open li:nth-child(2){transition-delay:.12s}
#nav ul.open li:nth-child(3){transition-delay:.18s}
#nav ul.open li:nth-child(4){transition-delay:.24s}

  #nav-toggle{display:flex}
  :root{--cut:2rem}
  #hero .wrap{align-items:center;text-align:center}
  .h-rule{margin:3rem auto}
  .who-grid2{grid-template-columns:1fr}
  .who-anchor{display:flex;align-items:center;gap:1.5rem;padding-top:0}
  .who-num{font-size:clamp(3rem,8vw,6rem);margin-bottom:0}
  .who-tags{flex-wrap:wrap}
  .who-tag{flex:1 0 auto;text-align:center}
  #belief{clip-path:polygon(0 0,100% var(--cut),100% calc(100% - var(--cut)),0 100%)}
  .belief-grid{display:flex;flex-direction:column;gap:2.5rem;text-align:center}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2);margin-top:3rem}
  .pillar{border-right:none;border-bottom:1px solid rgba(255,255,255,.15);
    padding-left:0!important;padding-right:0}
  #services{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}

  .svc-top{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:3.5rem;text-align:center}
  #clients{border-top:none}
  .cl-inner{flex-direction:column;padding:1.5rem 0}
  .cl-lbl-side{writing-mode:horizontal-tb;transform:none;padding-right:0;
    border-right:none;margin-right:0;margin-bottom:1.5rem;padding-bottom:1rem;
    border-bottom:1px solid rgba(22,22,22,.08)}
  .cl-names{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;border-top:1px solid rgba(22,22,22,.08);border-bottom:1px solid rgba(22,22,22,.08);padding:0;margin-top:.9rem;overflow-x:visible}
  .cl-name{font-size:var(--l);letter-spacing:.2em;text-transform:uppercase;font-weight:300;padding:1.1rem 2rem;color:rgba(22,22,22,.4);white-space:nowrap;border-right:none;transition:color .2s,background .2s;flex-shrink:0}
  .st-three{gap:2rem}
  .team-grid{grid-template-columns:1fr}
  .t-img{height:260px}
  #contact{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
  .c-row-mobile{flex-direction:column;align-items:center;gap:2rem}
  footer{border-top:1px solid rgba(255,255,255,.18);padding-top:1.5rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;z-index:2}
}

/* ═══════════════════════════════════════════════
   TABLET — 768px to 1024px
═══════════════════════════════════════════════ */
@media(max-width:1024px){
  .who-grid2{grid-template-columns:1fr 1.4fr;gap:2rem}
  .belief-grid{display:flex;flex-direction:column;gap:2.5rem;text-align:center}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2);margin-top:3rem}
  .pillars-light{grid-template-columns:repeat(3,1fr)}
  .team-grid{grid-template-columns:1fr 1fr}
  .cl-names{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;border-top:1px solid rgba(22,22,22,.08);border-bottom:1px solid rgba(22,22,22,.08);padding:0;margin-top:.9rem;overflow-x:visible}
  .c-row{gap:3rem}
}

/* ═══════════════════════════════════════════════
   MOBILE — below 768px
═══════════════════════════════════════════════ */
@media(max-width:768px){
  :root{
    --d:clamp(2.8rem,9vw,4.5rem);
    --h:clamp(1.4rem,4.5vw,2rem);
    --b:clamp(1rem,3.5vw,1.2rem);
    --p:0.875rem;
    --l:0.68rem;
    --t:1.1rem;
    --cut:2rem;
    --sp:3.5rem;
    --pad:1.2rem;
  }

  /* Nav */
  #nav ul{display:none}
  #nav ul.open{
    display:flex;flex-direction:column;
    position:fixed;top:62px;left:0;right:0;
    background:rgba(255,236,227,.97);
    padding:1.5rem 1.5rem 2rem;gap:1.2rem;
    border-bottom:1px solid rgba(22,22,22,.06);z-index:499}
  #nav ul.open a{font-size:.9rem;opacity:.7}
  #nav-toggle{display:flex}

  /* Hero */
  #hero .wrap{align-items:center;text-align:center}
  .hero-loc,.hero-cities{font-size:var(--l);letter-spacing:.55em;text-transform:uppercase;font-weight:700;color:var(--dark);margin-bottom:2rem;transition:color .3s ease;opacity:0;animation:riseIn .9s .2s ease forwards}
  .hero-tagline{font-family:'Cormorant Garamond',serif;font-size:var(--h);font-weight:600;color:var(--dark);letter-spacing:-.01em;line-height:1.25;white-space:nowrap;margin-bottom:.8rem;transition:color .3s ease;opacity:0;animation:riseIn 1s .62s ease forwards}
  .hero-sub{font-family:'Cormorant Garamond',serif;font-size:var(--p);font-weight:400;color:var(--dark);line-height:1.9;max-width:480px;margin-top:.4rem;margin-bottom:3.5rem;transition:color .3s ease;opacity:0;animation:riseIn 1s .68s ease forwards}
.hero-sub:hover{text-shadow:0 0 20px rgba(255,236,227,1),0 0 40px rgba(255,236,227,1),0 0 70px rgba(248,130,110,.4)}
  .h-rule{margin:2rem auto}
  .h-scroll{display:none}

  /* Who */
  .who-grid2{grid-template-columns:1fr}
  .who-anchor{margin-bottom:1.5rem}
  .who-num{display:none}
  .who-tags{flex-wrap:wrap;overflow-x:visible}
  .who-tag{flex:1 0 45%;text-align:center;border-bottom:1px solid rgba(22,22,22,.08)}

  /* Belief */
  #belief{clip-path:polygon(0 0,100% var(--cut),100% calc(100% - var(--cut)),0 100%);
    padding:calc(var(--sp) + var(--cut)*1.2) 0}
  .belief-grid{display:flex;flex-direction:column;gap:2.5rem;text-align:center}
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.2);margin-top:3rem}
  .pillar{border-right:none;border-bottom:1px solid rgba(255,255,255,.15);
    padding:1.5rem 0 !important}

  /* Storytelling */
  .pillars-light{grid-template-columns:1fr}
  .pillar-l{border-right:none;border-bottom:1px solid rgba(22,22,22,.08);
    padding:1.5rem 0 !important}
  .st-three{gap:2rem}

  /* Services */
  #services{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
  .svc-grid{grid-template-columns:1fr}
  .sc{padding:1.6rem 1.4rem}
  .svc-top{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-bottom:3.5rem;text-align:center}
  .svc-h2{font-size:var(--t);border:none}
  .cl-name{font-size:var(--l);letter-spacing:.2em;text-transform:uppercase;font-weight:300;padding:1.1rem 2rem;color:rgba(22,22,22,.4);white-space:nowrap;border-right:none;transition:color .2s,background .2s;flex-shrink:0}

  /* Team */
  .team-grid{grid-template-columns:1fr}
  .t-img{height:240px}
  .team-tagline{white-space:normal;text-align:center}
  .team-close q{white-space:normal}
  .team-logo-wrap{width:clamp(140px,55vw,220px);height:clamp(48px,16vw,72px)}
  .team-subtitle{font-size:var(--t) !important}

  /* Contact */
  #contact{clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%)}
  .c-row-mobile{flex-direction:column;align-items:center;gap:2rem}
  .c-h2{white-space:normal}
  .c-row{flex-direction:column !important;align-items:center !important;gap:2rem !important}
  .c-row > div{width:100%}

  /* Footer */
  footer{border-top:1px solid rgba(255,255,255,.18);padding-top:1.5rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;z-index:2}
  .f-links{gap:2rem}

  .hero-tagline{font-family:'Cormorant Garamond',serif;font-size:var(--h);font-weight:600;color:var(--dark);letter-spacing:-.01em;line-height:1.25;white-space:nowrap;margin-bottom:.8rem;transition:color .3s ease;opacity:0;animation:riseIn 1s .62s ease forwards}
  .ht-2{display:block}
  .svc-grid{background:transparent !important;gap:0 !important}
  .sc{border-bottom:1px solid rgba(22,22,22,.06)}
  .sc:last-child{border-bottom:none}}

.c-social{display:flex;justify-content:center;gap:2.5rem;margin-bottom:3rem}
.c-social a{font-size:var(--l);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.c-social a:hover{color:var(--white)}

/* ════════════════════════════════════════════════════════════
   FROSTED GLASS SYSTEM
   
   Fixed canvas: 5 large gradient orbs drift slowly.
   Cream sections: frosted glass panels (backdrop-filter).
   Result: content floats in premium frosted glass over 
   a living, chromatic background field.
════════════════════════════════════════════════════════════ */

/* Fixed canvas — stays behind everything */
#canvas {
  position: fixed;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  pointer-events: none;
}

/* Each orb: large, very blurred gradient sphere */
.c-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

/* Orb sizes and colours */
.co-1 {
  width: 700px; height: 700px;
  top: -10%; left: -15%;
  background: radial-gradient(circle, rgba(248,130,110,.7) 0%, transparent 65%);
  animation: orb-float-1 32s ease-in-out infinite;
}
.co-2 {
  width: 600px; height: 600px;
  top: 20%; right: -10%;
  background: radial-gradient(circle, rgba(196,88,168,.65) 0%, transparent 65%);
  animation: orb-float-2 38s ease-in-out infinite;
}
.co-3 {
  width: 550px; height: 550px;
  bottom: 15%; left: 20%;
  background: radial-gradient(circle, rgba(114,50,200,.6) 0%, transparent 65%);
  animation: orb-float-3 28s ease-in-out infinite;
}
.co-4 {
  width: 500px; height: 500px;
  bottom: -5%; right: 10%;
  background: radial-gradient(circle, rgba(0,16,232,.55) 0%, transparent 65%);
  animation: orb-float-4 42s ease-in-out infinite;
}
.co-5 {
  width: 450px; height: 450px;
  top: 50%; left: 45%;
  background: radial-gradient(circle, rgba(188,121,160,.5) 0%, transparent 65%);
  animation: orb-float-5 35s ease-in-out infinite;
}

/* Orb drift paths — each unique, slow, cinematic */
@keyframes orb-float-1 {
  0%   { transform: translate(0,0)         scale(1);    }
  25%  { transform: translate(120px,-80px) scale(1.08); }
  50%  { transform: translate(60px, 140px) scale(0.93); }
  75%  { transform: translate(-80px,60px)  scale(1.05); }
  100% { transform: translate(0,0)         scale(1);    }
}
@keyframes orb-float-2 {
  0%   { transform: translate(0,0)          scale(1);    }
  30%  { transform: translate(-100px,80px)  scale(1.1);  }
  60%  { transform: translate(60px,-120px)  scale(0.9);  }
  100% { transform: translate(0,0)          scale(1);    }
}
@keyframes orb-float-3 {
  0%   { transform: translate(0,0)           scale(1);    }
  35%  { transform: translate(80px,-100px)   scale(0.95); }
  70%  { transform: translate(-60px,80px)    scale(1.07); }
  100% { transform: translate(0,0)           scale(1);    }
}
@keyframes orb-float-4 {
  0%   { transform: translate(0,0)           scale(1);    }
  40%  { transform: translate(-120px,-60px)  scale(1.06); }
  80%  { transform: translate(90px,100px)    scale(0.94); }
  100% { transform: translate(0,0)           scale(1);    }
}
@keyframes orb-float-5 {
  0%   { transform: translate(0,0)          scale(1);    }
  50%  { transform: translate(-80px,-80px)  scale(1.12); }
  100% { transform: translate(0,0)          scale(1);    }
}

/* ── FROSTED GLASS sections ───────────────────────────────
   Cream sections become frosted glass panels over the canvas.
   backdrop-filter blurs the canvas orbs showing through.
   The semi-transparent background tints it cream.
   Result: beautiful frosted glass effect directly behind text.
────────────────────────────────────────────────────────── */
#who,
#storytelling,
#clients,
#team {
  background: rgba(255,236,227, 0.68) !important;
  backdrop-filter: blur(48px) !important;
  -webkit-backdrop-filter: blur(48px) !important;
}

#services {
  background: rgba(243,219,208, 0.72) !important;
  backdrop-filter: blur(48px) !important;
  -webkit-backdrop-filter: blur(48px) !important;
}

/* Reduce opacity on mobile for performance */
@media(max-width:768px) {
  .c-orb { filter: blur(60px); }
  #who, #storytelling, #clients, #team, #services {
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
  }
}

/* Hero text over gradient = white */

.hero-light .ht-1, .hero-light .ht-2 { color: #ffffff !important; }

/* ════════════════════════════════════════════════
   UPGRADE — Premium motion system
   cubic-bezier(0.16,1,0.3,1) = spring easing
════════════════════════════════════════════════ */

/* ── Grain texture on hero gradient panel ─────── */
.h-bg::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px}

/* ── Breathing scroll indicator ───────────────── */
@keyframes breathe{0%,100%{transform:scaleY(1);opacity:.4}50%{transform:scaleY(1.15);opacity:.85}}
.h-scroll i{animation:breathe 3s ease-in-out infinite}

/* ── Hero word spans (exit parallax) ──────────── */
.hero-tagline .hw{display:inline-block;will-change:transform,opacity;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s cubic-bezier(.16,1,.3,1)}

/* ── Mask-wipe reveal (section titles) ────────── */
.mask-reveal{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s cubic-bezier(.16,1,.3,1)}
.mask-reveal.revealed{clip-path:inset(0 0% 0 0)}

/* ── Word-by-word reveal ──────────────────────── */
.sr-word{
  display:inline-block;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .7s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.word-reveal.revealed .sr-word{opacity:1;transform:none}

/* ── Character-level blur reveal (belief-decl) ── */
.sr-char{
  display:inline-block;
  opacity:0;transform:translateY(20px);filter:blur(8px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .6s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             filter .6s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.char-reveal.revealed .sr-char{opacity:1;transform:none;filter:blur(0)}
.char-reveal em{display:block}

/* ── Line-by-line reveal ──────────────────────── */
.sr-line{
  display:block;overflow:hidden}
.sr-line-inner{
  display:block;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .7s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.line-reveal.revealed .sr-line-inner{opacity:1;transform:none}

/* ── Card stagger (services, team) ──────────────*/
.card-stagger{
  opacity:0;transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .8s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.grid-reveal.revealed .card-stagger{opacity:1;transform:none}

/* ── Name stagger (clients) ─────────────────────*/
.name-stagger{
  opacity:0;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.names-reveal.revealed .name-stagger{opacity:1}

/* ── Pillar stagger (belief) ─────────────────── */
.pillar-stagger{
  opacity:0;transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .8s cubic-bezier(.16,1,.3,1) var(--delay,0ms);
  position:relative}
.pillar-stagger.revealed{opacity:1;transform:none}
.pillar-stagger::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,.08);opacity:0;
  transition:opacity .2s ease}
.pillar-stagger.flash-on::before{opacity:1}

/* ── Who-quote: materialise color ──────────────── */
.who-quote{color:rgba(0,16,232,0) !important;
  transition:color .8s cubic-bezier(.16,1,.3,1)}
.who-quote.revealed{color:rgba(0,16,232,.9) !important}

/* ── Who-tags: slide in from left ─────────────── */
.who-tag{
  opacity:0;transform:translateX(-20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .6s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             color .2s,background .2s}
.who-tags.revealed .who-tag{opacity:1;transform:none}

/* ── Sc-t letter-spacing expand on hover ──────── */
.sc-t{transition:letter-spacing .3s cubic-bezier(.16,1,.3,1)}
.sc:hover .sc-t{letter-spacing:.1em}

/* ── Sc inner coral glow on hover ─────────────── */
.sc:hover{box-shadow:0 16px 52px rgba(0,19,218,.09),
  inset 0 0 0 1px rgba(248,114,94,.08),
  inset 0 0 24px rgba(248,114,94,.04)}

/* ── Cl-name: underline draws left→right on hover */
.cl-name{position:relative}
.cl-name::after{
  content:'';position:absolute;bottom:.4rem;left:2rem;
  height:1px;background:var(--blue);
  width:0;transition:width .25s cubic-bezier(.16,1,.3,1)}
.cl-name:hover::after{width:calc(100% - 4rem)}

/* ── T-img: scale image on card hover ─────────── */
.t-card .t-img{overflow:hidden}
.t-card .t-img img{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.t-card:hover .t-img img{transform:scale(1.03)}

/* ── Services shimmer on cut edge ─────────────── */
#services{position:relative}
#services::before{
  content:'';position:absolute;
  top:calc(var(--cut) - 1px);left:0;right:0;height:2px;z-index:4;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);
  transform:translateX(-100%);pointer-events:none}
#services.shimmer-run::before{
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  transform:translateX(100%)}

/* ── Contact ct-bg single heartbeat on arrival ── */
@keyframes ctHeartbeat{
  0%{transform:scale(1)}
  40%{transform:scale(1.02)}
  70%{transform:scale(.99)}
  100%{transform:scale(1)}}
.ct-bg.pulse-once{
  animation:ctHeartbeat 3s cubic-bezier(.16,1,.3,1) 1 forwards}

/* ── St-glow pulse once settled ────────────────── */
@keyframes glowBreath{
  0%,100%{opacity:var(--glow-op,.7)}
  50%{opacity:calc(var(--glow-op,.7) + .06)}}
.st-glow.glow-pulse{
  animation:glowBreath 4s ease-in-out infinite}

/* ── Contact info: slide in from right ────────── */
.slide-r{
  opacity:0;transform:translateX(30px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--delay,0ms),
             transform .7s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.slide-r.revealed{opacity:1;transform:none}

/* ── Magnetic btn: no extra transform base needed */
.btn{will-change:transform}

/* ── Belief-body line spacing in line-reveal ───── */
.belief-body .sr-line{margin-bottom:.1em}

/* ── Remove rv opacity conflict with new reveals ─ */
.who-quote.rv{opacity:1}

/* ── Client two-line break ───────────────────────── */
.cl-break{flex-basis:100%;width:100%;height:0}

/* ── Team grid: 2 columns on desktop ────────────── */
@media(min-width:769px){
  .team-grid{grid-template-columns:1fr 1fr}
  .t-card:nth-child(2) .t-img img{object-position:right center}
}

/* ── Storytelling body — single line on desktop ─── */
@media(min-width:1160px){.st-body-nowrap{white-space:nowrap;max-width:none}}
@media(max-width:1159px){.st-body-nowrap{white-space:normal;max-width:660px}}

/* ── Desktop-only line break ───────────────────── */
.desktop-br{display:inline}
@media(max-width:768px){.desktop-br{display:none}}