/* =====================================================================
   SOCIALLY LO — Creative Studio
   One-page site. Editorial serif + handwritten script + modern sans.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Ivy Ora Text";
  src:url("../assets/fonts/IvyOraText-Light.otf") format("opentype");
  font-weight:300 400;
  font-display:swap;
}
@font-face{
  font-family:"Professor";
  src:url("../assets/fonts/Professor-Regular.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Proxima Nova";
  src:url("../assets/fonts/ProximaNova-Regular.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}

/* ---------- Design tokens ---------- */
:root{
  /* palette — drawn from the brand swatches + reference doc */
  --cream:#F4EFE4;
  --paper:#F9F7F3;
  --ink:#20180F;
  --ink-soft:#5B5044;
  --fern:#B4B740; /* was fern green — now chartreuse everywhere */
  --olive-deep:#59642F;
  --chartreuse:#B4B740;
  --sky:#C5D1D4;
  --periwinkle:#5C74A0;
  --coral:#D75F30;
  --pink:#E7A9C4;
  --butter:#EFE7A6;

  --bg:var(--paper);   /* light page sections all use #F9F7F3 */
  --fg:var(--ink);

  /* type */
  --serif:"Ivy Ora Text",Georgia,"Times New Roman",serif;
  --script:"Professor","Snell Roundhand","Segoe Script",cursive;
  --sans:"Proxima Nova","Helvetica Neue",Arial,sans-serif;

  /* rhythm */
  --wrap:1280px;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --section-y:clamp(4.5rem,11vw,9.5rem);
  --radius:2px;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  font-family:var(--sans);
  font-size:clamp(1rem,.55vw + .9rem,1.075rem);
  line-height:1.72;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;}
::selection{background:var(--coral);color:var(--cream);}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:var(--cream);padding:.75rem 1.25rem;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{left:0;}

/* ---------- Shared type helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
  margin-bottom:clamp(1.5rem,3vw,2.75rem);
}
.eyebrow--fern{color:var(--fern);}
.eyebrow--coral{color:var(--coral);}
.eyebrow--periwinkle{color:var(--periwinkle);}
.eyebrow--chartreuse{color:var(--chartreuse);}
.eyebrow--pink{color:#C06C93;}
.eyebrow--cream{color:rgba(255,255,255,.72);}

.h-display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.9rem,4.2vw,3.4rem);
  line-height:1.12;
  letter-spacing:-.018em;
  max-width:20ch;
}
.h-display em{font-style:italic;}

.script{font-family:var(--script);font-weight:400;word-spacing:-.06em;}
/* the Professor capital "L" carries a wide side-bearing; close the Socially|Lo gap manually */
.wm-lo{margin-left:.2em;}

.lede{
  font-size:clamp(1.05rem,1.4vw,1.28rem);
  line-height:1.65;
  color:var(--ink-soft);
  max-width:46ch;
  margin-top:1.75rem;
}

.section{padding-block:var(--section-y);scroll-margin-top:4.5rem;}
.section__head{margin-bottom:clamp(2.5rem,6vw,5rem);}
.section__head--split{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
}
.section__note{
  font-family:var(--script);
  font-size:clamp(1.35rem,2vw,1.9rem);
  line-height:1.2;
  color:var(--fern);
  max-width:22ch;
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Scroll motion: whole-section "pop up" ---------- */
.js [data-pop]{
  opacity:0;
  transform:translateY(64px) scale(.965);
  transition:opacity .55s var(--ease),
             transform .8s cubic-bezier(.2,1.3,.35,1);  /* slight overshoot */
}
.js [data-pop].is-in{opacity:1;transform:none;}
/* let the section handle the motion — silence per-element reveals inside it */
.js [data-pop] .reveal{opacity:1!important;transform:none!important;transition:none!important;}
.js [data-pop] .about__portrait{clip-path:none!important;}
@media (prefers-reduced-motion:reduce){
  .js [data-pop]{opacity:1;transform:none;transition:none;}
}

/* ---------- Scroll motion: line-by-line headings ---------- */
/* the block is always visible; the individual lines do the moving */
.reveal[data-lines]{opacity:1!important;transform:none!important;}
.r-line{
  display:block;
  overflow:hidden;              /* fallback for browsers without overflow:clip */
  overflow:clip;
  overflow-clip-margin:.35em;   /* let descenders (g, y, j) spill past the clip */
}
.r-line__i{
  display:block;
  transform:translateY(130%);
  opacity:0;
  transition:transform .8s var(--ease),opacity .8s var(--ease);
  will-change:transform;
}
.reveal[data-lines].is-in .r-line__i{transform:none;opacity:1;}

/* ---------- Scroll motion: image clip reveal ---------- */
.js .about__media .about__portrait,
.js .process__media .process__photo,
.js .project__media img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ease);
}
.js .about__media.is-in .about__portrait,
.js .process__media.is-in .process__photo,
.js .project.is-in .project__media img{
  clip-path:inset(0 0 0 0);
}

/* ---------- Scroll motion: colour-block wipe-in (contact only) ---------- */
.contact{position:relative;}
.js .contact[data-reveal]{background:var(--sky);isolation:isolate;}
.js .contact[data-reveal]::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sky);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .9s var(--ease);
}
.js .contact[data-reveal].is-in::after{transform:scaleY(1);}

/* ---------- Scroll motion: process roadmap draws in ---------- */
/* the rail travels along as each step appears (driven by roadmapSequence() in main.js) */
.js .roadmap[data-reveal]::before{
  transform:scaleX(var(--rail,0));transform-origin:left;
  transition:transform var(--rail-dur,3s) linear;
}
/* each step fades up with its marker, and stays */
.js .roadmap .stage{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.js .roadmap .stage.is-in{opacity:1;transform:none;}
.js .roadmap[data-reveal] .stage::before{transform:scale(0);transition:transform .5s var(--ease) .15s;}
.js .roadmap[data-reveal] .stage.is-in::before{transform:scale(1);}

@media (prefers-reduced-motion:reduce){
  .r-line__i{transform:none;opacity:1;transition:none;}
  .js .about__media .about__portrait,
  .js .process__media .process__photo,
  .js .project__media img{clip-path:none;}
  .js .contact[data-reveal]{background:var(--sky);}
  .js .contact[data-reveal]::after{display:none;}
  .js .roadmap[data-reveal]::before,
  .js .roadmap[data-reveal] .stage::before{transform:none;}
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  display:block;
  background:var(--paper);
  isolation:isolate;
}
.hero__img{
  display:block;
  width:100%;
  height:auto;
  max-height:92vh;
  object-fit:cover;
  object-position:center;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* wordmark drawn on like a signature — a soft feathered wipe with a travelling pen nib */
.hero__wordmark{
  position:relative;
  display:inline-block;
  /* padding gives the script's ascenders, descenders & swashes room so the
     reveal mask never crops the glyphs */
  padding:.34em .18em .44em;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(3.4rem,11.5vw,8.5rem);
  line-height:1;
  letter-spacing:.01em;
  word-spacing:-.06em;
  overflow:visible;
  -webkit-mask-image:linear-gradient(90deg,#000 0 68%,rgba(0,0,0,.25) 86%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 68%,rgba(0,0,0,.25) 86%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:0% 100%;mask-size:0% 100%;
  animation:heroWrite 2.4s cubic-bezier(.62,.04,.32,1) .45s forwards;
}
.hero__wordmark::after{ /* the pen nib */
  content:"";
  position:absolute;top:48%;left:.18em;
  width:.1em;height:.1em;border-radius:50%;
  background:var(--cream);
  box-shadow:0 0 .18em .04em rgba(244,239,228,.55);
  opacity:0;
  animation:heroNib 2.4s cubic-bezier(.62,.04,.32,1) .45s forwards;
}
@keyframes heroFade{from{opacity:0;transform:translateY(9px);}to{opacity:.9;transform:none;}}
@keyframes heroWrite{to{-webkit-mask-size:172% 100%;mask-size:172% 100%;}}
@keyframes heroNib{
  0%  {opacity:0;left:.18em;transform:translate(-50%,-50%);}
  6%  {opacity:.95;}
  22% {transform:translate(-50%,-50%) translateY(-3px);}
  46% {transform:translate(-50%,-50%) translateY(2px);}
  68% {transform:translate(-50%,-50%) translateY(-2px);}
  84% {left:calc(100% - .18em);opacity:.95;transform:translate(-50%,-50%);}
  100%{left:calc(100% - .18em);opacity:0;transform:translate(-50%,-50%);}
}
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:opacity .4s linear;transform:none;}
  .hero__slide.is-active{transform:none;}
  .hero__eyebrow{animation:none;opacity:.9;}
  .hero__wordmark{
    animation:none;
    -webkit-mask-image:none;mask-image:none;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }
  .hero__wordmark::after{display:none;}
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.35rem var(--gutter) 1.15rem;
  background:var(--sky);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.25);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
}
.nav.is-visible{transform:translateY(0);}
.nav.is-hidden{transform:translateY(-100%);}
.nav__mark{
  display:inline-block;
  position:absolute;left:50%;top:calc(50% + 3px);
  /* the script's ink sits high in its box, so nudge it down to look centred */
  transform:translate(-50%,-50%);
  font-family:var(--script);
  font-size:1.5rem;
  line-height:1.7;                 /* tall enough that the box hugs the whole
                                      script glyph, so centring the box centres
                                      the ink and nothing clips at the bar edge */
  padding:.1em .15em;
  word-spacing:-.06em;
  /* same "writes itself on a loop" effect as the founder signature.
     the wipe is a straight 90deg horizontal gradient; the mask's vertical
     size is a fixed 200px (far taller than the glyph) so nothing is ever
     clipped top or bottom, and it settles wide enough that the solid part
     of the gradient covers the whole wordmark */
  -webkit-mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.4) 60%,transparent 78%);
          mask-image:linear-gradient(90deg,#000 0 44%,rgba(0,0,0,.4) 60%,transparent 78%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:0% 200px;mask-size:0% 200px;
  animation:navMarkDraw 5.6s ease-in-out .5s infinite;
}
@keyframes navMarkDraw{
  0%   {-webkit-mask-size:0% 200px;mask-size:0% 200px;opacity:0;}
  5%   {opacity:1;}
  38%  {-webkit-mask-size:150% 200px;mask-size:150% 200px;opacity:1;}
  58%  {-webkit-mask-size:340% 200px;mask-size:340% 200px;opacity:1;}
  85%  {-webkit-mask-size:340% 200px;mask-size:340% 200px;opacity:1;}
  95%  {-webkit-mask-size:340% 200px;mask-size:340% 200px;opacity:0;}
  100% {-webkit-mask-size:0% 200px;mask-size:0% 200px;opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .nav__mark{
    animation:none;opacity:1;
    -webkit-mask-image:none;mask-image:none;
    -webkit-mask-size:100% 200px;mask-size:100% 200px;
  }
}
/* the wrapper just distributes its two groups into the nav's flex row;
   space-between pushes one group left, one right, mark floats centred */
.nav__menu{display:contents;}
.nav__group{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.5rem);
}
.nav__menu a{
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  padding-block:.4rem;position:relative;
}
.nav__menu a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:.15rem;height:1px;
  background:currentColor;transition:right .4s var(--ease);
}
.nav__menu a:not(.nav__cta):hover::after,
.nav__menu a:not(.nav__cta):focus-visible::after{right:0;}
.nav__cta{
  border:1px solid #fff;border-radius:100px;
  padding:.6rem 1.15rem !important;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nav__cta:hover,.nav__cta:focus-visible{background:#fff;color:var(--sky);}
.nav__toggle{display:none;width:2rem;height:2rem;flex-direction:column;justify-content:center;gap:.35rem;}
.nav__toggle span{display:block;height:1px;width:100%;background:#fff;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(4.5px) rotate(45deg);}
.nav.is-open .nav__toggle span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg);}

@media (max-width:760px){
  .nav__toggle{display:flex;}
  .nav__mark{position:static;transform:none;}
  .nav__menu{
    display:block;
    position:absolute;top:100%;left:0;right:0;
    background:var(--sky);
    border-bottom:1px solid rgba(255,255,255,.3);
    max-height:0;overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .nav.is-open .nav__menu{max-height:80vh;}
  .nav__group{display:block;}
  .nav__menu li{width:100%;}
  .nav__group li + li,
  .nav__group--right{border-top:1px solid rgba(255,255,255,.25);}
  .nav__menu a{display:block;padding:1.1rem var(--gutter) !important;font-size:.8rem;}
  .nav__cta{border:none;border-radius:0;}
  .nav__cta:hover{background:none;color:inherit;}
}

/* =====================================================================
   PACKING-TAPE SEAM  (straddles the about / services boundary, no motion)
   ===================================================================== */
.tape-seam{
  position:relative;
  z-index:5;
  height:0;                 /* takes up no layout space */
  pointer-events:none;
}
.tape-seam img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  transform:translateY(-50%);   /* centered on the seam line */
}

/* =====================================================================
   MANIFESTO
   ===================================================================== */
.manifesto{background:var(--paper);}
.manifesto__lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,4.1vw,3.35rem);
  line-height:1.14;letter-spacing:-.05em;
  text-transform:uppercase;
  text-align:center;
  text-wrap:balance;
}
.manifesto__lead em{
  font-style:italic;
  /* a marker-pen stroke: sits behind the lower part of the letters, slightly
     see-through, a little crooked, and soft at both ends */
  position:relative;display:inline-block;
  padding:0 .2em;margin:0 -.06em;
  background:
    linear-gradient(98deg,
      rgba(197,209,212,0) 0%, rgba(197,209,212,.95) 3.5%,
      rgba(197,209,212,.82) 50%, rgba(197,209,212,.92) 96%, rgba(197,209,212,0) 100%)
    0 84% / 100% 76% no-repeat;
  border-radius:.12em .5em .16em .6em / .3em .15em .35em .12em;
  transform:rotate(-1.1deg);
}
.manifesto__lead em + br + *,
.manifesto__lead em:last-of-type{transform:rotate(.9deg);}
/* one line at a time; JS advances .is-active every 2.5s and the outgoing
   line gets .is-leaving so it slides up and out as the next slides up in */
.manifesto__cycle{
  list-style:none;
  position:relative;
  margin:clamp(1rem,2.5vw,1.75rem) auto 0;
  max-width:46rem;
  min-height:3.4em;
  text-align:center;
}
.manifesto__cycle li{
  position:absolute;left:0;right:0;top:0;bottom:0;
  margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif-display,var(--serif));font-style:normal;
  font-size:clamp(1.2rem,2.5vw,2rem);
  line-height:1.3;
  color:var(--ink-soft);
  opacity:0;
  transform:translateY(1.1em);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none;
}
.manifesto__cycle li.is-active{opacity:1;transform:none;}
.manifesto__cycle li.is-leaving{opacity:0;transform:translateY(-1.1em);}
.manifesto__cycle .ln{display:block;}
.manifesto__cycle .pop{
  color:var(--ink);
  -webkit-text-stroke:.4px currentColor;
  paint-order:stroke fill;
}
@media (prefers-reduced-motion:reduce){
  .manifesto__cycle li{transition:opacity .3s var(--ease);transform:none;}
  .manifesto__cycle li.is-leaving{transform:none;}
}
.manifesto__close{
  margin:clamp(1.5rem,3.5vw,2.5rem) auto 0;
  max-width:44rem;font-size:1.05rem;
  text-align:center;
  text-transform:uppercase;letter-spacing:.01em;
}
.manifesto__close .script{
  display:block;margin-top:1.6rem;
  text-transform:none;letter-spacing:normal;
  font-size:clamp(2.15rem,4.3vw,3.25rem);color:var(--chartreuse);line-height:1.1;
}
@media (max-width:680px){
  .manifesto__cycle{min-height:4.8em;}
}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{
  display:block;cursor:pointer;
  background:var(--fern) url("../assets/img/pattern-01.jpg") center/cover;
  color:var(--ink);
  padding-block:1.1rem;overflow:hidden;white-space:nowrap;
  transition:filter .3s var(--ease);
}
.marquee:hover,.marquee:focus-visible{filter:brightness(.95);}
.marquee__track{
  display:inline-flex;
  animation:marquee 26s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-visible .marquee__track{animation-play-state:paused;}
/* each group is at least the full viewport wide, so two of them always
   overflow the screen — the -50% loop can never expose blank space */
.marquee__group{
  flex:0 0 auto;
  min-width:100vw;
  display:flex;align-items:center;justify-content:space-around;
  gap:clamp(1.3rem,3.5vw,3rem);
  padding-inline:clamp(.65rem,1.75vw,1.5rem);
}
.marquee__track span{
  font-family:var(--serif);font-style:normal;
  font-size:1.2rem;letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;
}
.marquee__track .dot{letter-spacing:0;opacity:.55;}
@keyframes marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;}
}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{padding-bottom:clamp(8rem,18vw,11.5rem);}   /* room for the tape-seam strip */
.about .lede{color:var(--ink);}
.about__lead{letter-spacing:-.05em;text-transform:uppercase;}   /* tight tracking, all caps like the other headlines */
.about__grid{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,7vw,6rem);align-items:start;
}
.about__media{position:relative;}
.about__media > img:first-child{
  width:100%;border-radius:var(--radius);
  filter:saturate(.92);
}
.about__portrait{
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  background:var(--sky);
}
.about__sign{
  position:absolute;right:-1.5rem;bottom:-2.6rem;
  width:min(58%,15rem);
  text-align:center;
}
.about__signature{
  display:block;width:100%;
  mix-blend-mode:multiply;
  /* the ink "writes on" behind a soft nib edge, holds, dissolves, repeats */
  -webkit-mask-image:linear-gradient(100deg,#000 0 44%,rgba(0,0,0,.4) 60%,transparent 76%);
          mask-image:linear-gradient(100deg,#000 0 44%,rgba(0,0,0,.4) 60%,transparent 76%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:0% 100%;mask-size:0% 100%;
  animation:signatureDraw 5.6s ease-in-out .5s infinite;
}
@keyframes signatureDraw{
  0%   {-webkit-mask-size:0% 100%;mask-size:0% 100%;opacity:0;}
  5%   {opacity:1;}
  34%  {-webkit-mask-size:152% 100%;mask-size:152% 100%;opacity:1;}
  82%  {-webkit-mask-size:152% 100%;mask-size:152% 100%;opacity:1;}
  95%  {-webkit-mask-size:152% 100%;mask-size:152% 100%;opacity:0;}
  100% {-webkit-mask-size:0% 100%;mask-size:0% 100%;opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .about__signature{
    animation:none;opacity:1;
    -webkit-mask-image:none;mask-image:none;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
  }
}
.about__sign-role{
  display:block;margin-top:-.5rem;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
}
.about__facts{margin-top:clamp(2rem,5vw,3.25rem);display:grid;gap:1.6rem;}
.about__facts div{
  display:grid;grid-template-columns:8rem 1fr;gap:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
}
.about__facts dt{
  position:relative;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--chartreuse);
  padding-top:.2rem;
}
.about__facts dt::after{         /* little brand-green mark, centered between the label and the copy */
  content:"";
  position:absolute;
  left:5.9rem;top:.15rem;
  width:.62rem;height:.62rem;
  background:var(--chartreuse);
  -webkit-mask:url("../assets/img/icon-mark.png") center/contain no-repeat;
          mask:url("../assets/img/icon-mark.png") center/contain no-repeat;
}
.about__facts dd{
  color:var(--ink);text-transform:uppercase;
  font-size:.72rem;letter-spacing:.05em;line-height:1.85;
}
@media (max-width:860px){
  .about__grid{grid-template-columns:1fr;}
  .about__media{max-width:24rem;}
  .about__sign{right:0;}
  /* the signature overhangs below the portrait — give the headline room to clear it */
  .about__body{margin-top:2.75rem;}
  .about__facts div{grid-template-columns:1fr;gap:.4rem;}
  .about__facts dt::after{display:none;}
}

/* =====================================================================
   SERVICES  —  three expandable offers
   ===================================================================== */
.offers{
  border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
}
.offer{
  border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
}
.services{padding-top:clamp(6rem,13vw,9rem);}   /* room for the tape-seam strip */
.services__head{text-align:center;margin-bottom:clamp(1.5rem,4vw,3rem);}
.services__head h2{
  /* the services headline runs larger than the other section heads;
     narrow enough that it breaks as "HOW WE BRING" / "BRANDS TO LIFE" */
  font-size:clamp(2.2rem,5vw,4rem);
  text-transform:uppercase;letter-spacing:-.05em;
  max-width:15ch;margin-inline:auto;
}
.services__sub{
  margin-top:1.1rem;
  font-family:var(--sans);
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.services__head .eyebrow{
  color:var(--ink);
  font-size:clamp(.85rem,1.1vw,1rem);
  letter-spacing:.2em;
  margin-bottom:clamp(.4rem,1vw,.7rem);
}
.offer__head{margin:0;font-weight:400;}
.offer__toggle{
  width:100%;
  display:grid;
  grid-template-columns:5rem minmax(11rem,18rem) minmax(0,1fr) auto;
  align-items:baseline;
  gap:clamp(1rem,3.5vw,3rem);
  text-align:left;
  padding:clamp(2rem,4.4vw,3.5rem) .25rem;
  transition:padding-left .45s var(--ease);
}
.offer.is-open .offer__toggle,
.offer__toggle:hover{padding-left:1.1rem;}
.offer__num{
  font-family:var(--serif);font-size:1.15rem;color:var(--ink-soft);
}
.offer__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.7vw,2.35rem);line-height:1.14;
  text-transform:uppercase;letter-spacing:-.008em;
}
.offer__teaser{
  color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.55;
  align-self:center;
}
.offer__cta{
  align-self:center;justify-self:end;
  display:inline-flex;align-items:center;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.offer__toggle:hover .offer__cta{color:var(--chartreuse);}
.offer__arrow{width:30px;height:16px;}
.offer__arrow{overflow:visible;transition:transform .45s var(--ease);}
.offer__toggle:hover .offer__arrow{transform:translateX(5px);}
.offer.is-open .offer__arrow{transform:rotate(90deg);}

/* expanding panel — JS animates height for reliability; CSS holds resting states */
.offer__panel{
  height:0;
  overflow:hidden;
  transition:height .5s var(--ease);
}
.offer.is-open .offer__panel{height:auto;}
.offer__panel-inner{
  padding:0 .25rem clamp(2rem,4.5vw,3.5rem) 4.5rem;
}
@media (prefers-reduced-motion:reduce){
  .offer__panel{transition:none;}
}
.offer__tagline{
  font-family:var(--serif);font-style:normal;
  font-size:clamp(1.15rem,2vw,1.6rem);color:var(--ink);
  text-transform:uppercase;letter-spacing:.005em;
  max-width:34ch;
}
.offer__pull{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);margin-top:0;max-width:44ch;
}
.offer__desc{
  margin-top:1.1rem;color:var(--ink-soft);max-width:52ch;
}
.offer__label{
  margin-top:2rem;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}
.offer__list{
  margin-top:1rem;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.1rem 2.5rem;max-width:44rem;
}
.offer__list li{
  font-family:var(--serif);font-size:1.05rem;
  padding:.6rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
}
.offer__note{
  margin-top:1.5rem;font-size:.9rem;font-style:italic;
  color:var(--ink-soft);max-width:46ch;
}
@media (max-width:900px){
  .offer__toggle{
    grid-template-columns:2.75rem 1fr;
    grid-template-areas:
      "num title"
      "num teaser"
      "num cta";
    gap:.4rem 1.25rem;
  }
  .offer__num{grid-area:num;}
  .offer__title{grid-area:title;white-space:normal;}
  .offer__teaser{grid-area:teaser;align-self:start;margin-top:.35rem;}
  .offer__cta{grid-area:cta;align-self:start;justify-self:start;margin-top:.9rem;}
  .offer.is-open .offer__panel-inner{padding-left:2.75rem;}
  .offer__list{grid-template-columns:1fr;}
}

/* =====================================================================
   PROCESS  —  intro (headline + switching photo) then horizontal roadmap
   ===================================================================== */
.process{background:var(--paper);}
.process__intro{
  margin-bottom:clamp(2.5rem,6vw,4.25rem);
}
.process .section__head{margin-bottom:0;}
.process .section__head h2{text-transform:uppercase;letter-spacing:-.05em;}
.process__media{
  position:relative;
  width:100%;
  aspect-ratio:5/6;
  overflow:hidden;
  background:var(--sky);
}
.process__photo{
  width:100%;height:100%;
  object-fit:cover;object-position:55% center;
}
.process__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.process__slide.is-active{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .process__slide{transition:opacity .01s;}
}
.roadmap{
  list-style:none;
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.5rem,3.5vw,3.25rem);
  margin-top:clamp(1rem,3vw,2.5rem);
}
.roadmap::before{ /* the rail */
  content:"";position:absolute;left:0;right:0;top:5px;
  height:1px;background:color-mix(in srgb,var(--ink) 20%,transparent);
}
.stage{position:relative;padding-top:2.1rem;}
.stage::before{ /* quatrefoil marker (brand icon, tinted green) */
  content:"";position:absolute;top:-2px;left:0;
  width:14px;height:14px;
  background:var(--fern);
  -webkit-mask:url("../assets/img/icon-mark.png") center/contain no-repeat;
          mask:url("../assets/img/icon-mark.png") center/contain no-repeat;
}
.stage__label{
  display:block;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.9rem;
}
.stage__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.1;
  text-transform:uppercase;letter-spacing:-.005em;
  margin-bottom:.7rem;
}
.stage__desc{
  font-size:.92rem;line-height:1.6;color:var(--ink-soft);
}
@media (max-width:860px){
  .roadmap{grid-template-columns:repeat(2,1fr);gap:2.75rem 2.5rem;}
  .roadmap::before{display:none;}
  .stage::before{top:.3rem;}
}
@media (max-width:520px){
  .roadmap{grid-template-columns:1fr;gap:2.25rem;}
  .stage{padding-top:0;padding-left:1.6rem;}
  .stage::before{top:.4rem;}
}

/* =====================================================================
   WORK  —  2×2 editorial project grid
   ===================================================================== */
.work__head{text-align:center;}
.work__lead{
  text-transform:uppercase;
  letter-spacing:-.05em;
  font-size:clamp(1.6rem,3.4vw,2.75rem);
  line-height:1.14;
  max-width:28ch;
  margin-inline:auto;
}
.work__grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(2.5rem,5.5vw,5rem) clamp(2rem,4.5vw,4rem);
}
.project__link{display:block;}
.project__top,
.project__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.25rem;
}
.project__top{margin-bottom:clamp(.9rem,2vw,1.4rem);}
.project__foot{padding-top:clamp(.85rem,1.8vw,1.25rem);}
.project__name{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.35rem,2.6vw,2.05rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;
}
.project__action{
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;
}
.project__action::after{
  content:"";width:1.1rem;height:1px;background:currentColor;
  transition:width .35s var(--ease);
}
.project__link:hover .project__action::after{width:1.7rem;}
.project__media{
  position:relative;
  overflow:hidden;aspect-ratio:5/4;
  /* placeholder: brand green until real project photos are added */
  background:var(--chartreuse) center/cover no-repeat;
}
.project__video{
  position:absolute;inset:-2px;           /* 2px bleed so no sliver of the cover image peeks out at the edges */
  width:calc(100% + 4px);height:calc(100% + 4px);object-fit:cover;
  opacity:0;transition:opacity .4s var(--ease);
  pointer-events:none;
}
.project__link:hover .project__video,
.project__link:focus-visible .project__video,
.project__link.is-playing .project__video{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .project__video{display:none;}
}
.project__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.project__link:hover .project__media img{transform:scale(1.04);}
.project__place{
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
}
.project__detail{
  font-family:var(--serif);font-style:italic;
  font-size:.95rem;color:var(--ink-soft);white-space:nowrap;
}
@media (max-width:640px){
  .work__grid{grid-template-columns:1fr;}
}

/* =====================================================================
   REVIEWS  —  auto-advancing single testimonial (chartreuse band)
   compact + editorial: script quote-mark, sentence-case serif quote,
   micro attribution, segmented progress bar that fills as it plays
   ===================================================================== */
.reviews{
  background:var(--chartreuse) url("../assets/img/pattern-01.jpg") center/cover;
  color:var(--cream);
  padding-block:clamp(1.75rem,4vw,3rem);
  overflow:hidden;
  outline:none;
}
.reviews__inner{
  position:relative;
  max-width:50rem;
  margin-inline:auto;
  padding-inline:clamp(1.5rem,6vw,3rem);
  text-align:center;
}
.reviews__eyebrow{
  position:relative;z-index:1;
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 66%,transparent);
  margin-bottom:clamp(1rem,3vw,1.9rem);
  -webkit-text-stroke:.5px currentColor;
  paint-order:stroke fill;
}
/* decorative watermark quote-mark — absolute so it never adds vertical space */
.reviews__mark{
  position:absolute;top:1.9em;left:50%;
  transform:translateX(-50%);
  font-family:var(--script);
  font-size:clamp(3rem,7vw,4.4rem);
  line-height:1;
  color:color-mix(in srgb,var(--cream) 22%,transparent);
  pointer-events:none;user-select:none;
  z-index:0;
}
.reviews__viewport{
  position:relative;z-index:1;
  min-height:5.5rem;
  transition:height .4s var(--ease);
}
.reviews__slide{
  position:absolute;left:0;right:0;top:0;
  margin:0;
  opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s;
}
.reviews__slide.is-active{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s;
}
.reviews__quote{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.02rem,1.9vw,1.45rem);
  line-height:1.5;letter-spacing:.005em;
  max-width:42ch;
  margin:0 auto clamp(.85rem,2vw,1.3rem);
  text-wrap:balance;
  -webkit-text-stroke:.3px currentColor;
  paint-order:stroke fill;
}
.reviews__who{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.4rem .6rem;
}
.reviews__industry{
  font-family:var(--serif);
  text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(.8rem,1.3vw,.98rem);
  -webkit-text-stroke:.5px currentColor;   /* a touch heavier than the light serif */
  paint-order:stroke fill;
}
.reviews__sep{color:color-mix(in srgb,var(--cream) 45%,transparent);}
.reviews__service{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.8rem,1.3vw,.98rem);   /* matches .reviews__industry */
  letter-spacing:.11em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 82%,transparent);
}
.reviews__bar{
  display:flex;justify-content:center;gap:0;
  margin-top:clamp(.5rem,1.5vw,1rem);
}
/* each button is a roomy tap target; the quatrefoil inside is the visible mark */
.reviews__seg{
  position:relative;
  display:grid;place-items:center;
  width:2.75rem;height:2.75rem;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.reviews__seg i{
  display:block;
  width:.95rem;height:.95rem;
  background:var(--cream);
  -webkit-mask:url("../assets/img/icon-mark.png") center/contain no-repeat;
          mask:url("../assets/img/icon-mark.png") center/contain no-repeat;
  opacity:.4;
  transform:scale(1);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.reviews__seg:hover i,
.reviews__seg:focus-visible i{opacity:.85;transform:scale(1.15);}
.reviews__seg:focus-visible{outline:2px solid var(--cream);outline-offset:-4px;border-radius:50%;}
.reviews__seg.is-active i{opacity:1;transform:scale(1.4);}
/* while the slide is playing, the active mark eases from soft to full */
.reviews__seg.is-active.is-playing i{
  animation:reviewsFill var(--reviews-dur,6s) linear forwards;
}
@keyframes reviewsFill{from{opacity:.45;}to{opacity:1;}}

@media (max-width:600px){
  .reviews__inner{padding-inline:clamp(1.25rem,7vw,2rem);}
  .reviews__seg{width:2.6rem;height:2.6rem;}
}
@media (prefers-reduced-motion:reduce){
  .reviews__slide{transition:opacity .01s,visibility 0s;transform:none;}
  .reviews__seg.is-active.is-playing i{animation:none;}
  .reviews__seg i{transition:none;}
}

/* =====================================================================
   CLIENTS  —  compact band with a right-to-left handwritten marquee
   ===================================================================== */
.work{background:var(--paper);padding-bottom:clamp(2.25rem,5vw,3.5rem);}
.clients{background:var(--paper);padding-block:clamp(1.5rem,3.5vw,2.75rem);text-align:center;}
/* the eyebrow now sits UNDER the headline, a touch larger */
.clients .eyebrow{
  margin:clamp(.55rem,1.5vw,.95rem) 0 0;
  font-size:clamp(.8rem,1.1vw,.95rem);
  letter-spacing:.16em;
}
.clients__lead{
  text-transform:uppercase;
  letter-spacing:-.05em;
  font-size:clamp(1.55rem,3.7vw,3rem);
  max-width:24ch;
  margin-inline:auto;
  text-wrap:balance;
}
.clients__marquee{
  margin-top:clamp(1rem,2.5vw,1.75rem);
  padding-block:.4rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.clients__track{
  display:flex;width:max-content;
  animation:clientsMarquee 34s linear infinite;
}
/* pause the scroll while a visitor is reading / hovering a type */
.clients__marquee:hover .clients__track{animation-play-state:paused;}
.clients__group{display:flex;flex:none;}
.clients__group span{
  flex:none;white-space:nowrap;
  display:inline-flex;align-items:center;
  margin-right:clamp(1.5rem,3.5vw,2.75rem);
  font-family:var(--script);
  font-size:clamp(1rem,1.8vw,1.45rem);
  line-height:1.7;
  color:var(--chartreuse);
}
.clients__group span::after{
  content:"";
  width:.42rem;height:.42rem;border-radius:50%;
  background:var(--chartreuse);
  margin-left:clamp(1.5rem,3.5vw,2.75rem);
}
@keyframes clientsMarquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .clients__track{animation:none;flex-wrap:wrap;}
  .clients__group:nth-child(2){display:none;}
  .clients__group{flex-wrap:wrap;}
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact{background:var(--sky);color:#fff;}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2.5rem,7vw,6rem);align-items:start;
}
.contact__headline{
  margin:.2rem 0 1.6rem;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.7rem,7.5vw,5.5rem);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:-.05em;
}
.contact__blurb{max-width:44ch;color:rgba(255,255,255,.9);text-transform:uppercase;font-size:.82rem;letter-spacing:.05em;line-height:1.9;}
.contact__links{list-style:none;margin-top:2.25rem;display:grid;gap:.75rem;}
.contact__links a{
  font-family:var(--serif);font-size:1.2rem;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:.15rem;
  transition:border-color .3s var(--ease);
}
.contact__links a:hover{border-color:#fff;}

.inquiry{display:grid;gap:1.4rem;}
.field{display:grid;gap:.5rem;}
.field label,.field legend{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.inquiry input,.inquiry textarea,.inquiry select{
  font:inherit;font-size:.95rem;
  width:100%;
  background:transparent;
  color:#fff;
  border:none;border-bottom:1px solid rgba(255,255,255,.5);
  padding:.6rem 0;
  border-radius:0;
}
.inquiry select{padding-block:.55rem;}
.inquiry select option{color:var(--ink);}
.inquiry textarea{resize:vertical;min-height:3.5rem;}
.inquiry input::placeholder,.inquiry textarea::placeholder{color:rgba(255,255,255,.55);}
.inquiry input:focus,.inquiry textarea:focus,.inquiry select:focus{
  outline:none;border-bottom-color:#fff;
}
.field--choices{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;border:none;
}
.field--choices legend{width:100%;margin-bottom:.6rem;}
.field--choices label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.9rem;letter-spacing:0;text-transform:none;
  color:#fff;cursor:pointer;
}
.field--choices input{
  appearance:none;-webkit-appearance:none;
  flex:none;width:1.1rem;height:1.1rem;margin:0;
  background:#fff;border:none;border-radius:2px;
  display:grid;place-content:center;overflow:visible;cursor:pointer;
}
.field--choices input::before{
  content:"x";
  font-family:var(--script);font-weight:400;
  font-size:1.9rem;line-height:0;
  color:var(--chartreuse);
  transform:rotate(-7deg);
  opacity:0;transition:opacity .15s var(--ease);
  pointer-events:none;
}
.field--choices input:checked::before{opacity:1;}
.field--choices input:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.field--choices label{column-gap:.8rem;}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.inquiry__submit{
  justify-self:start;margin-top:.5rem;
  background:transparent;color:#fff;
  border:1px solid #fff;
  padding:.95rem 2.25rem;border-radius:100px;
  font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.inquiry__submit:hover{transform:translateY(-2px);background:#fff;color:var(--sky);}
.inquiry__status{font-size:.85rem;color:#fff;min-height:1.2em;}
.inquiry__status.is-error{color:#5c1a0a;font-weight:bold;}

@media (max-width:860px){
  .contact__grid{grid-template-columns:1fr;}
}

/* =====================================================================
   FOOTER  —  chartreuse block, white text
   ===================================================================== */
.footer{
  background:var(--chartreuse) url("../assets/img/pattern-01.jpg") center/cover no-repeat;
  color:var(--cream);
  padding-block:clamp(3rem,7vw,5rem) 1.5rem;
}
.footer__grid{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;
  padding-bottom:clamp(1.5rem,3.5vw,2.5rem);
}
.footer__wordmark{font-size:2.4rem;line-height:1;display:block;}
.footer__sub{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--cream) 72%,transparent);
}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;}
.footer__nav a{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;opacity:.85;transition:opacity .3s;}
.footer__nav a:hover{opacity:1;}
.footer__contact{display:grid;gap:.5rem;font-family:var(--serif);font-size:1.05rem;}
.footer__contact a{border-bottom:1px solid color-mix(in srgb,var(--cream) 45%,transparent);padding-bottom:.1rem;width:max-content;}
.footer__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-top:1rem;
}
.footer__signature{
  width:11rem;filter:invert(1) brightness(1.8);opacity:.9;
}
.footer__base p{font-size:.72rem;letter-spacing:.08em;color:color-mix(in srgb,var(--cream) 72%,transparent);}

/* focus visibility */
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}
.contact :focus-visible{outline-color:#fff;}