/* ============================================================
   Causally — design tokens lifted from the Framer project
   ============================================================ */
:root{
  --bg:              rgb(245,244,239);
  --surface:         rgb(255,253,250);
  --surface-50:      rgba(255,253,250,.5);
  --surface-80:      rgba(255,253,250,.8);
  --text:            rgb(43,43,43);
  --text-2:          rgb(61,61,61);
  --gray:            rgb(94,94,94);
  --cta:             rgb(55,55,55);
  --btn-text:        rgb(255,253,250);
  --border:          rgba(0,0,0,.15);
  --surface-border:  rgba(244,243,240,.4);
  --card-beige:      rgb(250,248,245);
  --pastel-blue:     rgb(211,227,240);
  --pastel-purple:   rgb(240,231,243);
  --card-peachy:     rgb(253,217,203);
  --bg-yellow:       rgb(243,225,166);
  --language-toggle-face:   rgb(232,230,224);
  --language-toggle-border: rgba(43,43,43,.14);

  --font-display: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
  --font-head:    "Host Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, sans-serif;

  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-hero: 40px;
  --gutter: 40px;
  --maxw: 1180px;
  --maxw-wide: 1512px;
}

html[lang="zh-CN"]{
  --font-display: "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --font-head:    "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:22px;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
summary::-webkit-details-marker{display:none}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto}
.wrap--wide{max-width:var(--maxw-wide)}
.section{padding:120px var(--gutter) 0}
.panel{background:var(--surface);border:1px solid var(--surface-border)}
.card{border-radius:var(--radius-card);overflow:hidden}

/* ---------- Type scale ---------- */
.display{
  font-family:var(--font-display);font-weight:400;
  font-size:66px;line-height:70px;letter-spacing:-.04em;
  text-align:center;
}
.h2{
  font-family:var(--font-head);font-weight:400;
  font-size:54px;line-height:1.1;letter-spacing:-.04em;
}
.h3{
  font-family:var(--font-display);font-weight:400;
  font-size:32px;line-height:1.2;letter-spacing:-.03em;
}
.h4{
  font-family:var(--font-body);font-weight:500;
  font-size:20px;line-height:1.2;letter-spacing:-.02em;
}
.lede{
  font-size:16px;line-height:22px;color:var(--text-2);
  text-align:center;max-width:620px;margin:24px auto 0;text-wrap:balance;
}
.body{font-size:16px;line-height:22px;color:var(--text-2)}
.body--sm{font-size:14px;line-height:20px}
.body--wide{max-width:760px;margin-top:12px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:9;
  padding:30px 20px;
  -webkit-backdrop-filter:blur(7px);
          backdrop-filter:blur(7px);
  /* blur is solid at the top and fades out at the lower edge */
  -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20.42%);
          mask-image:linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20.42%);
}
.nav__inner{
  display:flex;align-items:center;gap:24px;
  width:100%;max-width:1400px;margin-inline:auto;padding-inline:28px;
}
.nav__logo img{width:138px;height:40px;object-fit:contain;object-position:left center}
.language-toggle{
  position:relative;isolation:isolate;overflow:hidden;
  min-width:56px;height:35px;margin-left:auto;padding:0 14px;
  border:1px solid var(--language-toggle-border);border-radius:999px;
  background:linear-gradient(180deg,
    var(--surface) 0%,var(--card-beige) 48%,var(--language-toggle-face) 100%);
  color:var(--text-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(43,43,43,.11),
    0 5px 12px -7px rgba(43,43,43,.48);
  font:500 12px/1 var(--font-body);letter-spacing:0;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
  cursor:pointer;
  transition:
    transform .2s cubic-bezier(.16,1,.3,1),
    box-shadow .2s cubic-bezier(.16,1,.3,1),
    color .18s ease;
}
.language-toggle::before{
  content:"";position:absolute;z-index:0;
  top:3px;left:9px;right:9px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  pointer-events:none;
}
.language-toggle > span{position:relative;z-index:1}
.language-toggle:hover{
  color:var(--text);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(43,43,43,.1),
    0 7px 14px -8px rgba(43,43,43,.58);
}
.language-toggle:active{
  transform:translateY(1px) scale(.98);
  box-shadow:
    inset 0 1px 2px rgba(43,43,43,.14),
    inset 0 -1px 0 rgba(255,255,255,.7),
    0 2px 6px -5px rgba(43,43,43,.4);
}
.language-toggle:focus-visible{outline:2px solid var(--text);outline-offset:3px}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:60px;padding:100px 40px 40px;
}
.hero__max{
  position:relative;width:100%;max-width:var(--maxw-wide);
  display:flex;flex-direction:column;align-items:center;gap:70px;
}
.hero__panel{
  width:100%;border-radius:var(--radius-hero);
  padding:120px 16px 0;
  background:linear-gradient(180deg,rgb(255,253,250) 0%,rgba(255,253,250,0) 100%);
  display:flex;flex-direction:column;align-items:center;
}
.hero__content{width:840px;max-width:100%;display:flex;flex-direction:column;gap:24px}

/* ---------- Bento ---------- */
.bento{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.bento__glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:100%;height:563px;pointer-events:none;
  background:
    radial-gradient(38% 56% at 16% 52%, rgba(211,227,240,.55), transparent 70%),
    radial-gradient(34% 54% at 84% 46%, rgba(229,219,235,.6),  transparent 70%),
    radial-gradient(28% 46% at 50% 58%, rgba(253,217,203,.35), transparent 72%);
  filter:blur(38px);
}
.bento__cards{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.bento__preview{
  flex:1;max-width:340px;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.bento__aside{
  flex:1;max-width:300px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.tile{border-radius:24px;display:block}
.tile--peach{width:160px;height:150px}
.tile--purple{width:300px;height:270px}
.tile--cream{width:200px;height:180px}

/* Every bento card is a translucent rim around an inner panel */
.tile--list{
  width:100%;background:var(--card-beige);
  padding:6px;display:flex;flex-direction:column;gap:5px;
}
.tile--featured{
  flex:1;max-width:415px;align-self:stretch;
  background:var(--surface-50);padding:8px;
}
.tile__card{
  height:100%;border-radius:20px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* opaque, sampled from the source card so the artwork slice composites identically */
  background:linear-gradient(180deg,
    rgb(220,230,238) 0%, rgb(218,230,239) 25%, rgb(222,232,237) 50%,
    rgb(229,234,236) 75%, rgb(238,240,237) 100%);
}
.tile__art{
  width:315px;height:354px;max-width:100%;object-fit:contain;
  /* 8px edge feather only: hides the artwork's box edge without
     softening the shapes the way a wide radial mask did */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  mask-composite:intersect;
}

.srow{
  display:flex;align-items:center;gap:20px;
  padding:12px;border-radius:20px;
  background:rgba(234,231,226,.5);
  transition:background .18s ease;
}
.srow:hover{background:rgba(234,231,226,.85)}
.srow__thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;flex:none}
.srow__thumb img{width:100%;height:100%;object-fit:cover}
.srow__label{font-size:16px;line-height:22px;letter-spacing:-.01em;color:var(--text)}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--surface-border);
  border-radius:999px;padding:7px 14px 7px 11px;
  font-size:11px;line-height:16px;font-weight:500;color:var(--text-2);
  box-shadow:0 8px 20px -16px rgba(43,43,43,.5);
}
.badge__icon{width:14px;height:14px;flex:none;color:var(--text)}

/* ---------- Buttons ---------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;padding:9px 18px;
  font-size:14px;line-height:20px;font-weight:500;
  white-space:nowrap;
  transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease;
}
.pill--lg{padding:11px 22px}
.pill--dark{background:var(--cta);color:var(--btn-text)}
.pill--dark:hover{opacity:.86}
.pill--muted{background:var(--gray);color:var(--btn-text)}

/* Framer's Work Card hover inverts the badge: dark fill -> Surface,
   light text -> Text Primary. Hovering anywhere on the card triggers it,
   matching the component's onMouseEnter on the card root.
   The card here is already Surface, so the inverted chip needs a hairline
   to stay visible — in Framer the card wrapper carries a different fill. */
.work:hover .pill--dark,
.work:focus-within .pill--dark{
  background:var(--surface);
  color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border);
  opacity:1;
}

.iconbtn{
  width:34px;height:34px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--surface-border);
  color:var(--text-2);
  box-shadow:0 10px 24px -18px rgba(43,43,43,.6);
}
.iconbtn svg{width:16px;height:16px}

/* ---------- Case studies ---------- */
.works{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.work{
  border-radius:var(--radius-panel);padding:14px;
  display:flex;flex-direction:column;gap:16px;
}
.work__media{border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--card-beige)}
.work__media img{width:100%;height:100%;object-fit:cover}
.work__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 6px 6px}
.work__title{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.work__type{font-size:13px;line-height:18px;color:#C2703A;margin-top:4px}

/* ---------- Statement ---------- */
.statement{padding:220px var(--gutter)}
.statement__text{
  font-family:var(--font-display);font-weight:400;
  font-size:46px;line-height:58px;letter-spacing:-.04em;
  text-align:center;max-width:815px;margin-inline:auto;
}

/* ---------- Approach (Process Slider) ---------- */
.approach{padding:120px 40px}
.approach__inner{
  max-width:var(--maxw);margin-inline:auto;padding:0 32px;
  display:flex;align-items:flex-start;gap:80px;
}
.approach__copy{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.approach__copy .body{max-width:90%}

/* Track scroll-snaps, so swipe and trackpad work with no script.
   The arrows are anchors to the neighbouring slide, which the browser
   resolves by scrolling this container. */
.slider{flex:none;width:640px;max-width:100%}
.slider__track{
  display:flex;gap:80px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.slider__track::-webkit-scrollbar{display:none}
.slide{
  flex:none;scroll-snap-align:start;
  display:flex;align-items:flex-start;gap:16px;
  /* fragment navigation aligns the target to the top of the viewport;
     this keeps the vertical adjustment small and framed */
  scroll-margin-top:28vh;
}
.slide__visual{width:259.5px;height:380px;flex:none;
  background:var(--surface-border);border-radius:16px;padding:8px}
.slide__card{
  height:100%;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Each card fill is sampled from its artwork's own backdrop, so the two
   composite seamlessly and the artwork can stay crisp (no edge feather). */
.slide__card--1{background:linear-gradient(180deg,rgb(228,215,240) 0%,rgb(226,212,238) 100%)}
.slide__card--2{
  border-radius:20px;
  background:linear-gradient(180deg,
    rgb(220,230,238) 0%, rgb(218,230,239) 25%, rgb(222,232,237) 50%,
    rgb(229,234,236) 75%, rgb(238,240,237) 100%);
}
.slide__card--3{
  border-radius:20px;
  background:linear-gradient(180deg,rgb(235,231,230) 0%,rgb(239,232,214) 100%);
}
.slide__card img{
  width:88%;max-width:300px;height:auto;object-fit:contain;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  mask-composite:intersect;
}
.slide__detail{
  width:364.5px;flex:none;height:380px;padding-left:20px;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.slide__num{font-family:var(--font-display);font-size:26px;line-height:1.2;letter-spacing:-.03em}
.slide__title{font-family:var(--font-body);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.slide__body{font-size:14px;line-height:20px;color:var(--text-2)}
.slide__control{display:flex;gap:4px;margin-top:auto}
/* Slider buttons are a translucent rim around an inner disc, like the
   other cards. The end of the track shows the disabled state. */
.sbtn{
  width:56px;height:56px;flex:none;border-radius:100px;padding:8px;
  background:var(--surface-border);
  display:inline-flex;
}
.sbtn__face{
  flex:1;border-radius:100px;
  display:flex;align-items:center;justify-content:center;
  background:rgb(255,253,250);color:var(--text);
  transition:background .18s ease;
}
.sbtn:hover .sbtn__face{background:var(--card-beige)}
.sbtn svg{width:24px;height:24px}
.sbtn--off{
  background:rgba(255,253,250,.2);opacity:.4;
  pointer-events:none;cursor:default;
}
.sbtn--off .sbtn__face{background:rgba(0,0,0,.06)}

/* ---------- Impact ---------- */
.impact__title{margin-top:24px;max-width:600px}
.impact__lede{margin-top:24px;max-width:331px;font-size:16px;line-height:22px;color:var(--text-2)}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.stat{display:flex;gap:24px;min-height:200px}
.stat__rule{
  position:relative;flex:none;align-self:stretch;
  width:2px;border-radius:999px;background:rgba(0,0,0,.06);
}
.stat__tick{
  position:absolute;left:-3px;
  width:8px;height:20px;border-radius:8px;
  background:rgb(51,69,87);
}
.stat:nth-child(1) .stat__tick{top:24px}
.stat:nth-child(2) .stat__tick{top:48px}
.stat:nth-child(3) .stat__tick{top:80px}
.stat__body{flex:1;display:flex;flex-direction:column;gap:12px;padding:24px 24px 0 0}
.stat__num{
  font-family:var(--font-display);font-weight:400;
  font-size:46px;line-height:1.1;letter-spacing:-.03em;color:var(--text);
}
.stat__cap{font-size:14px;line-height:22px;color:var(--text-2)}

/* ---------- Showreel + testimonial ---------- */
.reel__bg{padding:40px 32px 120px}
.reel__inner{position:relative;max-width:var(--maxw);margin-inline:auto}
.reel__video{
  width:100%;aspect-ratio:2;object-fit:cover;
  border-radius:20px;background:var(--card-beige);
}
.quote{
  position:absolute;left:20px;bottom:-271px;margin:0;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(64px);
          backdrop-filter:blur(64px);
  border-radius:24px;padding:8px;
}
.quote__inner{
  width:344px;background:var(--surface-80);
  border-radius:20px;padding:32px;
  display:flex;flex-direction:column;gap:40px;
}
.quote__body{display:flex;flex-direction:column;gap:20px}
.quote__head{display:flex;align-items:flex-start;gap:12px}
.quote__mark{width:30px;height:29px;flex:none}
.quote__name{font-size:14px;line-height:20px;font-weight:500;color:var(--text)}
.quote__role{font-size:12px;line-height:17px;color:var(--gray)}
.quote__text{
  width:280px;font-family:var(--font-body);font-weight:400;
  font-size:24px;line-height:1.2;letter-spacing:-.02em;color:var(--text);
}
/* the card is absolutely positioned, so the section reserves its overhang */
.reel{padding-bottom:184px}

/* ---------- Services ---------- */
.services{
  border-radius:20px;padding:80px;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
}
.services__copy{max-width:572px}
.services__copy .h3{max-width:420px}
.services__copy .body{margin-top:16px;max-width:420px}
.services__copy .pill{margin-top:24px}

/* image sits in a gradient rim, like the other cards */
.services__visual{
  background:linear-gradient(180deg,rgba(232,228,222,.5) 0%,rgba(210,220,227,.5) 100%);
  border-radius:28px;padding:8px;
}
.services__frame{
  position:relative;aspect-ratio:488/574;
  border-radius:20px;overflow:hidden;
}
.services__art{width:100%;height:100%;object-fit:cover}
/* the lockup is centred in the frame at every width */
.services__wordmark{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:47%;height:auto;
}

/* ---------- FAQ ---------- */
/* Section sits directly on the page background; no panel behind it. */
.faq{padding:120px var(--gutter)}
.faq__inner{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.faq__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.faq__badgewrap{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.faq__title{
  font-family:var(--font-display);font-weight:400;
  font-size:56px;line-height:1.1;letter-spacing:-.04em;color:var(--text);
}
.faq__lede{font-size:16px;line-height:23px;color:var(--text-2);max-width:345px}

/* ---------- Accordions ---------- */
.acc{display:flex;flex-direction:column;gap:14px}
.acc__card{
  background:var(--surface);
  border:1px solid rgba(247,247,247,.08);
  border-radius:12px;
}
.acc__card summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px;cursor:pointer;list-style:none;
}
.acc__q{font-size:16px;line-height:24px;letter-spacing:-.01em;color:var(--text)}
.acc__card .chev{
  width:24px;height:24px;flex:none;color:var(--text);
  transition:rotate .25s ease;
}
.acc__card[open] .chev{rotate:180deg}
.acc__a{padding:0 24px 23px}
.acc__a p{font-size:15px;line-height:23px;color:var(--text-2);max-width:95%}

/* Services list keeps its own plain-row treatment */
.acc--plain{margin-top:48px;gap:0}
.acc__item{border-top:1px solid rgba(0,0,0,.08)}
.acc__item:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.acc__item summary{
  display:flex;align-items:center;gap:12px;
  padding:16px 2px;cursor:pointer;list-style:none;
}
.acc__icon{width:18px;height:18px;color:var(--text);flex:none}
.acc__icon svg{width:100%;height:100%}
.acc__title{font-size:15px;line-height:20px;font-weight:500;flex:1}
.acc__num{font-size:13px;line-height:18px;color:var(--gray)}
.acc__item .acc__body{
  font-size:13px;line-height:19px;color:var(--text-2);
  padding:0 2px 18px 30px;max-width:520px;
}

/* ---------- Footer ---------- */
.footer{padding:0 var(--gutter) var(--gutter)}
.footer__wrapper{
  position:relative;
  border-radius:var(--radius-hero);
  padding:120px 40px;
  overflow:hidden;
}
.footer__aurora{
  position:absolute;inset:0;
  background:url("assets/footer-aurora.png") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(0deg,#000 37%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(0deg,#000 37%,rgba(0,0,0,0) 100%);
}
.footer__card{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-inline:auto;
  background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(64px);
          backdrop-filter:blur(64px);
  border-radius:24px;padding:8px;
}
.footer__inner{
  background:var(--surface-50);
  border-radius:20px;
  padding:40px 60px;
}
.footer__top{display:flex;align-items:flex-start;padding:24px 0}
.footer__logo{flex:1}
.footer__logo img{height:37.5px;width:auto}
.footer__links{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;
  gap:16px;padding-top:4px;
}
.footer__links a{
  font-size:15px;line-height:24px;letter-spacing:-.01em;color:var(--text);
  transition:opacity .18s ease;
}
.footer__links a:hover{opacity:.65}
.footer__bottom{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding-top:40px;
}
.footer__copy{font-size:15px;line-height:24px;letter-spacing:-.01em;color:var(--text)}
.footer__social{display:flex;align-items:center;gap:20px}
.footer__social a{
  width:20px;height:20px;display:block;color:var(--text);
  transition:opacity .18s ease;
}
.footer__social a:hover{opacity:.6}
.footer__social svg{width:20px;height:20px;display:block}

/* ============================================================
   Responsive — mirrors the Framer breakpoints
   ============================================================ */
@media (max-width:1511.98px){
  .display{font-size:64px}
  .hero__content{width:765px}
  .h2{font-size:48px}
  .statement__text{font-size:46px}
  .faq__title{font-size:36px}
}

@media (max-width:1199.98px){
  :root{--gutter:32px}
  .display{font-size:48px;line-height:1.06}
  .h2{font-size:32px;line-height:40px}
  .statement__text{font-size:36px}
  .statement{padding:140px var(--gutter)}
  .section{padding-top:96px}

  .hero__content{width:100%}
  .bento__cards{flex-direction:column;align-items:stretch;gap:10px}
  .bento__preview{max-width:none;align-items:stretch}
  /* lens card leads the stack below 1200, per the Tablet variant */
  .tile--featured{order:-1;flex:none;max-width:none;align-self:auto;height:483px}
  /* Framer hides the peach, purple and cream tiles below 1200 */
  .tile--peach,.bento__aside{display:none}
  .tile--list{flex-direction:row}
  .srow{flex:1;min-width:0}

  /* copy stacks above the slider below 1200 */
  .approach{padding:100px var(--gutter)}
  .approach__inner{flex-direction:column;gap:32px;padding:0}
  .approach__copy{width:100%}
  .approach__copy .body{max-width:none}
  .slider{width:100%}
  .slide{flex-direction:column;gap:16px;width:100%}
  .slide__visual{width:100%;height:380px}
  .slide__detail{width:100%;height:auto;padding-left:0;gap:16px}
  .slide__control{margin-top:8px}

  .services{grid-template-columns:1fr;gap:32px}
  .services__copy{max-width:none}
  .services__visual{width:100%}




  .reel__bg{padding:40px 24px 100px}

  .faq{padding:100px var(--gutter)}
  .faq__inner{grid-template-columns:1fr;gap:48px}
  .faq__title{font-size:36px}
  .faq__lede{max-width:none}

  .footer__wrapper{padding:100px 24px}
  .footer__inner{padding:32px 40px}
  .footer__copy span{display:block}
}

@media (max-width:809.98px){
  :root{--gutter:20px;--radius-hero:28px}
  .display{font-size:40px;line-height:1.1}
  .h2{font-size:30px;line-height:36px}
  .h3{font-size:26px}
  .statement__text{font-size:28px;line-height:1.2}
  .statement{padding:100px var(--gutter)}
  .section{padding-top:80px}
  .hero{padding:100px 20px 40px}

  .works{grid-template-columns:1fr}

  .stats{grid-template-columns:1fr;gap:24px}
  .stat{min-height:120px}
  .stat:nth-child(1) .stat__tick{top:26px}
  .stat:nth-child(2) .stat__tick{top:28px}
  .stat:nth-child(3) .stat__tick{top:29px}
  .stat__num{font-size:30px}

  /* Testimonial drops into the flow under the video */
  .reel{padding-bottom:0}
  .reel__bg{padding:40px 20px 80px}
  .reel__inner{display:flex;flex-direction:column;gap:20px}
  .reel__video{aspect-ratio:1.46}
  .quote{position:static;padding:8px;align-self:stretch}
  .quote__inner{width:auto;padding:28px}
  .quote__text{width:auto}

  .tile--featured{height:420px}
  .tile--list{flex-direction:column}
  .srow{flex:none}

  .services{padding:40px 20px 20px}

  .approach{padding:80px 0}
  .approach__inner{padding:0 20px}
  .slide__visual{height:340px}

  .faq{padding:80px 20px}
  .faq__title{font-size:28px}
  .acc__card summary{padding:20px}
  .acc__q{font-size:15px;line-height:22px}
  .acc__a{padding:0 20px 20px}

  .footer__wrapper{padding:72px 12px;border-radius:28px}
  .footer__card{border-radius:20px;padding:6px}
  .footer__inner{border-radius:16px;padding:24px 22px}
  .footer__top{flex-direction:column;align-items:flex-start;gap:34px;padding:8px 0 0}
  .footer__logo,.footer__links{flex:none;width:100%}
  .footer__logo img{height:32px}
  .footer__links{gap:14px;padding-top:0}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:20px;padding-top:34px}
  .footer__copy{font-size:12px;line-height:17px}
  .footer__copy span{display:inline}

}

/* ============================================================
   Scroll reveals — ported from the Framer appear effects
   Distances and delays are the source values; the springs there
   are all overdamped, so they land as ease-outs with no bounce.
   ============================================================ */
.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--ry,24px));
  transition:opacity .7s cubic-bezier(.16,1,.3,1) var(--rd,0s),
             transform .7s cubic-bezier(.16,1,.3,1) var(--rd,0s);
  will-change:opacity,transform;
}
.js [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

/* Framer distances (px) and delays (s), section by section */
.hero__panel        {--ry:20px; --rd:.66s}
.lede               {--ry:40px; --rd:.8s}
.bento              {--ry:50px; --rd:.8s}
#works .h2          {--ry:16px; --rd:.3s}
#works .body--wide  {--ry:16px; --rd:.3s}
.work               {--ry:30px; --rd:.1s}
.impact__title      {--ry:16px; --rd:.3s}
.impact__lede       {--ry:16px; --rd:.3s}
.stat:nth-child(1)  {--ry:12px; --rd:.2s}
.stat:nth-child(2)  {--ry:12px; --rd:.4s}
.stat:nth-child(3)  {--ry:12px; --rd:.6s}
.reel__bg           {--ry:0px;  --rd:.3s}
.services           {--ry:24px; --rd:.2s}

/* Motion the stylesheet already had, plus the reveals, all off on request. */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reel__video{display:none}
  .reel__inner{background-image:url(assets/video-poster.jpg);background-size:cover;background-position:center}
}