/* AIRVOY OS — project page
   Terracotta + deep black + soft clay, Inter throughout. Motion hooks are data-attributes
   driven by airvoy-os.js (built on Motion). Everything is visible without JS. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --terra:#b95441;
  --terra-deep:#9f4432;
  --ico:#d03b22;
  --black:#030303;
  --clay:#e6d2cd;
  --grey:#827876;
  --ink:#27201f;
  --text:#6a5f5e;
  --mute:#8d8281;
  --peach:#fbe3dd;
  --bg1:#f6f1ee;
  --bg2:#fdfdfd;
  --bg3:#f2e8e6;
  --bg5:#f3e9e7;
  --line:rgba(130,80,70,.13);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* one proportional unit shared by the hero and the section rhythm: ≈ 1vw, capped on ultra-wide screens */
  --hu:min(1vw,17.35px);
  --pad:calc(var(--hu)*4.3);
  --gap:calc(var(--hu)*1.15);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg1);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:10px}
::selection{background:#f2c4b9;color:var(--ink)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-64px;z-index:100;background:var(--black);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ffa592,#e45a40 55%,#b95441);box-shadow:0 0 10px rgba(228,90,64,.55)}

.toast{position:fixed;left:50%;bottom:26px;z-index:95;display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;background:#1a1210;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.86rem;font-weight:500;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);opacity:0;pointer-events:none;translate:-50% 18px;transition:opacity .3s,translate .45s var(--ease)}
.toast.is-on{opacity:1;translate:-50% 0}
.toast i{width:22px;height:22px;border-radius:50%;background:var(--swatch,#b95441);box-shadow:0 0 0 2px rgba(255,255,255,.85)}

/* ------------------------------------------------------------------ shared */
.wrap{width:min(100% - var(--pad)*2,1500px);margin-inline:auto}
.sec{position:relative;padding-block:clamp(40px,4.2vw,76px)}

.eb{display:flex;align-items:center;gap:.8em;margin-bottom:.9em;font-size:max(.72rem,calc(var(--hu)*.78));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}
.eb [data-line]{display:block;width:1.6em;height:2px;border-radius:2px;background:var(--terra);transform-origin:left;flex:none}
.h2{font-size:clamp(1.4rem,calc(var(--hu)*2.05),2.5rem);line-height:1.14;font-weight:600;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .06em .2em;margin:-.04em -.06em -.2em}
.wi{display:inline-block;will-change:transform}

.btn{--mx:0px;--my:0px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.85em;padding:.95em 1.75em;border-radius:999px;font-size:max(.84rem,calc(var(--hu)*.98));font-weight:600;letter-spacing:.005em;white-space:nowrap;translate:var(--mx) var(--my);transition:translate .4s var(--ease),box-shadow .4s var(--ease),background .3s,color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn__ico{flex:none;width:1.15em;height:1.15em;transition:transform .45s var(--ease)}
.btn:hover .btn__ico{transform:translateX(5px)}
.btn:active{scale:.98}
.btn--light{background:#fff;color:var(--terra);box-shadow:0 14px 28px -14px rgba(70,12,0,.65)}
.btn--light:hover{box-shadow:0 20px 34px -14px rgba(70,12,0,.75)}
.btn--terra{background:var(--terra);color:#fff;box-shadow:0 16px 32px -14px rgba(185,84,65,.9),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--terra:hover{background:#c55b47;box-shadow:0 22px 38px -14px rgba(206,90,68,.95),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--terra::before{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%)}

.card{background:#fff;border-radius:max(14px,calc(var(--hu)*1.35));box-shadow:0 0 0 1px rgba(150,90,80,.07),0 14px 34px -22px rgba(110,45,35,.38);transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{translate:0 -5px;box-shadow:0 0 0 1px rgba(185,84,65,.18),0 26px 44px -24px rgba(150,50,35,.5)}

.ic{flex:none;display:grid;place-items:center;width:clamp(40px,calc(var(--hu)*3.7),58px);aspect-ratio:1;border-radius:50%;background:var(--peach);color:var(--ico);transition:background .35s,color .35s,scale .5s var(--ease)}
.ic svg{width:48%;height:48%}

/* ------------------------------------------------------------------ hero
   The art keeps the proportions of the design: its top-right sits in the hero, the phone
   spills ~11% of the art's width into the first section. */
.hero{--aw:calc(var(--hu)*68);position:relative;z-index:2;height:calc(var(--aw)*.4537);color:#fff;
  background:linear-gradient(180deg,#b1503f 0%,#a74a3a 45%,#9d4a36 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#9b4232 0,#ce9f97 28%,#fcf0f2 56%,rgba(247,242,236,0))}

.hero__art{position:absolute;z-index:1;right:0;bottom:calc(var(--aw)*-.1111);width:var(--aw);aspect-ratio:712/402;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7.5%),linear-gradient(0deg,transparent 0,#000 5.5%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 7.5%),linear-gradient(0deg,transparent 0,#000 5.5%);mask-composite:intersect;pointer-events:none}
.hero__stage{position:absolute;inset:0;transform-origin:50% 80.3%;scale:1.035}
.hero__stage img{width:100%;height:100%;object-fit:cover}

/* little product moments laid over the photo */
.glare{position:absolute;left:9.2%;top:4.6%;width:52.6%;height:59.5%;overflow:hidden;border-radius:1.2%;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%) no-repeat;background-size:60% 100%;background-position:-120% 0;mix-blend-mode:soft-light;opacity:.9}
.ping{position:absolute;left:47.7%;top:5.5%;width:3.2%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,76,52,.7);opacity:0}

.hero__in{position:relative;z-index:2;width:100%;height:100%;padding:calc(var(--hu)*2.1) 0 0 var(--pad);display:flex;flex-direction:column;align-items:flex-start}
.hero__eyebrow{font-size:max(.64rem,calc(var(--hu)*.78));font-weight:500;letter-spacing:.085em;text-transform:uppercase;color:rgba(255,255,255,.78);line-height:1.2;white-space:nowrap}
.hero__title{margin-top:calc(var(--hu)*.65);font-size:calc(var(--hu)*5.3);line-height:.98;font-weight:800;letter-spacing:-.028em;white-space:nowrap}
.hero__lead{margin-top:calc(var(--hu)*.55);max-width:calc(var(--hu)*31);font-size:calc(var(--hu)*1.86);line-height:1.22;font-weight:600;letter-spacing:-.012em;color:#fff}
.hero__txt{margin-top:calc(var(--hu)*.95);max-width:calc(var(--hu)*31.6);font-size:max(.78rem,calc(var(--hu)*1));line-height:1.58;color:rgba(255,255,255,.84)}
.hero__btn{margin-top:calc(var(--hu)*1.5);font-size:max(.78rem,calc(var(--hu)*.98));padding:.95em 2em}
.hero__in>*{flex:none}
.hero__stats{margin-top:calc(var(--hu)*2.4);display:flex;gap:calc(var(--hu)*2.7)}
.hero__stats li{display:flex;flex-direction:column;gap:.15em;font-size:max(.7rem,calc(var(--hu)*.9));line-height:1.3}
.hero__stats b{font-weight:600;color:#fff}
.hero__stats span{color:rgba(255,255,255,.72)}

/* ------------------------------------------------------------------ 01 */
.s1{padding-top:calc(var(--hu)*2.2);padding-bottom:clamp(36px,3.8vw,68px);background:var(--bg1)}
.s1__top{position:relative;z-index:3;display:grid;grid-template-columns:39.5% minmax(0,1fr);align-items:start;margin-bottom:calc(var(--hu)*1.6)}
.s1__head .eb{margin-bottom:.7em}
.s1__txt{max-width:calc(var(--hu)*27.2);margin-top:calc(var(--hu)*1.1);font-size:max(.84rem,calc(var(--hu)*1));line-height:1.62;color:var(--text)}
.needs{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.need{display:flex;align-items:center;gap:calc(var(--hu)*1.35);padding:calc(var(--hu)*1.45) calc(var(--hu)*1.5)}
.need h3{font-size:max(.92rem,calc(var(--hu)*1.08));font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.need p{margin-top:.45em;font-size:max(.8rem,calc(var(--hu)*.92));line-height:1.5;color:var(--text)}
.need:hover .ic{background:var(--ico);color:#fff;scale:1.08}

/* ------------------------------------------------------------------ 02 */
.s2{background:var(--bg2);padding-block:0;overflow:hidden}
.s2__in{display:grid;grid-template-columns:calc(var(--hu)*28) calc(var(--hu)*34) minmax(0,1fr);column-gap:calc(var(--hu)*1.8);align-items:center;padding-left:var(--pad)}
.s2__intro{padding-block:clamp(36px,3.6vw,64px)}
.s2__intro .eb{margin-bottom:.8em}
.s2__txt{margin-top:calc(var(--hu)*1.15);font-size:max(.82rem,calc(var(--hu)*1));line-height:1.62;color:var(--text)}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--hu)*.7);padding-block:clamp(28px,2.6vw,48px)}
.fc{position:relative;background:#fff;border-radius:max(12px,calc(var(--hu)*1.1));padding:calc(var(--hu)*1.05) calc(var(--hu)*1.05) calc(var(--hu)*1.1);box-shadow:0 0 0 1px rgba(150,90,80,.08),0 12px 26px -20px rgba(110,45,35,.4);transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.fc:hover{translate:0 -5px;box-shadow:0 0 0 1px rgba(185,84,65,.22),0 24px 40px -22px rgba(150,50,35,.5)}
.fc__ic{display:grid;place-items:center;width:max(34px,calc(var(--hu)*2.9));aspect-ratio:1;border-radius:max(9px,calc(var(--hu)*.85));background:#fdece8;color:var(--ico);margin-bottom:calc(var(--hu)*.8);transition:background .35s,color .35s,rotate .5s var(--ease)}
.fc__ic svg{width:56%;height:56%}
.fc:hover .fc__ic{background:var(--ico);color:#fff;rotate:-6deg}
.fc h3{font-size:max(.8rem,calc(var(--hu)*.92));font-weight:700;line-height:1.28;letter-spacing:-.008em;color:var(--ink)}
.fc p{margin-top:.4em;font-size:max(.74rem,calc(var(--hu)*.84));line-height:1.5;color:var(--text)}
.s2__tab{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;min-width:0}
.s2__tab img{width:calc(100% + var(--hu)*3);max-width:none;height:auto;margin-right:calc(var(--hu)*-3);flex:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%),linear-gradient(0deg,transparent 0,#000 9%),linear-gradient(180deg,transparent 0,#000 5%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 11%),linear-gradient(0deg,transparent 0,#000 9%),linear-gradient(180deg,transparent 0,#000 5%);mask-composite:intersect}

/* ------------------------------------------------------------------ 03 */
.s3{background:var(--bg3)}
.s3__head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--hu)*3);margin-bottom:calc(var(--hu)*2)}
.s3__txt{padding-bottom:.35em;font-size:max(.84rem,calc(var(--hu)*1.04));color:var(--text);text-align:right}
.flow{--fg:calc(var(--hu)*1.7);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--fg)}
.step{position:relative;display:flex;align-items:center;gap:calc(var(--hu)*.75);min-width:0}
.step__dot{flex:none;display:grid;place-items:center;width:clamp(38px,calc(var(--hu)*3.55),54px);aspect-ratio:1;border-radius:50%;background:#fff;color:var(--ico);box-shadow:0 8px 20px -12px rgba(120,40,25,.45);position:relative;transition:background .4s,color .4s,scale .5s var(--ease),box-shadow .4s}
.step__dot svg{width:46%;height:46%}
.step__t{min-width:0}
.step__t b{display:block;font-size:max(.8rem,calc(var(--hu)*.92));font-weight:700;line-height:1.2;color:var(--ink)}
.step__t span{display:block;margin-top:.25em;font-size:max(.7rem,calc(var(--hu)*.8));line-height:1.42;color:var(--text)}
.arr{position:absolute;left:calc(100% + var(--fg)/2 - .6em);top:calc(clamp(38px,calc(var(--hu)*3.55),54px)/2 - .6em);width:1.2em;height:1.2em;color:var(--terra);font-size:max(11px,calc(var(--hu)*1.05));transform-origin:left}
.arr svg{width:100%;height:100%}
.step.is-lit .step__dot{background:var(--ico);color:#fff;scale:1.1;box-shadow:0 12px 26px -10px rgba(208,59,34,.75)}
.step:hover .step__dot{scale:1.1}

/* ------------------------------------------------------------------ 04 */
.s4{background:var(--bg2)}
.s4__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);margin-bottom:calc(var(--hu)*1.7)}
.arrows{display:flex;gap:10px;flex:none;padding-bottom:.2em}
.arrowbtn{display:grid;place-items:center;width:max(38px,calc(var(--hu)*2.9));aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 8px 18px -12px rgba(110,45,35,.45);transition:background .3s,color .3s,border-color .3s,opacity .3s,scale .3s var(--ease)}
.arrowbtn svg{width:46%;height:46%}
.arrowbtn:hover:not(:disabled){background:var(--terra);border-color:var(--terra);color:#fff;scale:1.08}
.arrowbtn:active:not(:disabled){scale:.94}
.arrowbtn:disabled{opacity:.42;cursor:default;box-shadow:none}

.track{--cols:5;display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:3px;scrollbar-width:none;padding:8px 3px 16px;margin:-8px -3px -16px;border-radius:14px;cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.track:focus-visible{outline-offset:6px}
.shot{flex:0 0 calc((100% - var(--gap)*(var(--cols) - 1))/var(--cols));scroll-snap-align:start;display:flex;flex-direction:column;padding:calc(var(--hu)*.5) calc(var(--hu)*.5) calc(var(--hu)*1.2);background:#fff;border-radius:max(14px,calc(var(--hu)*1.2));box-shadow:0 0 0 1px rgba(150,90,80,.1),0 14px 30px -22px rgba(110,45,35,.45);transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.shot:hover{translate:0 -5px;box-shadow:0 0 0 1px rgba(185,84,65,.22),0 26px 42px -24px rgba(150,50,35,.5)}
.shot__img{overflow:hidden;border-radius:max(9px,calc(var(--hu)*.85));background:var(--bg1);aspect-ratio:186/91;margin-bottom:calc(var(--hu)*.95)}
.shot__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);-webkit-user-drag:none;user-select:none}
.shot:hover .shot__img img{transform:scale(1.06)}
.shot h3{padding-inline:calc(var(--hu)*.55);font-size:max(.86rem,calc(var(--hu)*1.02));font-weight:700;line-height:1.25;color:var(--ink)}
.shot p{padding-inline:calc(var(--hu)*.55);margin-top:.35em;font-size:max(.76rem,calc(var(--hu)*.9));line-height:1.5;color:var(--text)}

/* ------------------------------------------------------------------ 05 */
.s5{background:var(--bg5)}
.s5__grid{display:grid;grid-template-columns:minmax(0,calc(var(--hu)*33)) minmax(0,1fr) auto;column-gap:calc(var(--hu)*2.6);align-items:center}
.s5__txt{margin-top:calc(var(--hu)*1);max-width:calc(var(--hu)*28);font-size:max(.82rem,calc(var(--hu)*1));line-height:1.62;color:var(--text)}
.swatches{display:flex;justify-content:space-between;gap:calc(var(--hu)*1.2);padding-inline:calc(var(--hu)*1.4)}
.sw{display:flex;flex-direction:column;align-items:center;gap:.5em;background:none;border:0;padding:.35em .5em;border-radius:14px;text-align:center;-webkit-tap-highlight-color:transparent}
.sw__dot{display:block;width:clamp(40px,calc(var(--hu)*4.1),66px);aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:0 10px 22px -10px rgba(40,10,5,.55),inset 0 0 0 1px rgba(0,0,0,.06);margin-bottom:.35em;transition:scale .5s var(--ease),box-shadow .4s}
.sw__dot--white{box-shadow:0 10px 22px -12px rgba(40,10,5,.4),inset 0 0 0 1px rgba(0,0,0,.08)}
.sw b{font-size:max(.62rem,calc(var(--hu)*.74));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.25}
.sw span{font-size:max(.68rem,calc(var(--hu)*.8));color:var(--mute);font-variant-numeric:tabular-nums;transition:color .3s}
.sw:hover .sw__dot{scale:1.14;box-shadow:0 16px 28px -10px rgba(40,10,5,.6),inset 0 0 0 1px rgba(0,0,0,.06)}
.sw:hover span{color:var(--terra)}
.sw:active .sw__dot{scale:.94}
.type{padding-left:calc(var(--hu)*2.6);border-left:1px solid rgba(130,80,70,.22);min-width:calc(var(--hu)*14.5)}
.type__lbl{display:block;font-size:max(.74rem,calc(var(--hu)*.9));font-weight:600;color:var(--ink)}
.type__name{margin-top:.1em;font-size:calc(var(--hu)*2.9);line-height:1.15;font-weight:600;letter-spacing:-.025em;color:var(--ink);font-variation-settings:'wght' 600;cursor:default}
.type__txt{margin-top:.35em;max-width:calc(var(--hu)*15);font-size:max(.78rem,calc(var(--hu)*.92));line-height:1.5;color:var(--text)}

/* ------------------------------------------------------------------ closing band */
.cta{position:relative;isolation:isolate;overflow:hidden;background:var(--black);color:#fff;padding-block:clamp(40px,4.4vw,78px)}
.cta__bg{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:70%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;transform-origin:70% 60%;scale:1.04}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#040404 0,rgba(4,4,4,.5) 40%,rgba(4,4,4,.05) 100%),linear-gradient(0deg,rgba(4,4,4,.42),transparent 55%)}
.cta__grid{display:grid;grid-template-columns:minmax(0,29%) auto minmax(0,1fr);column-gap:calc(var(--hu)*3);align-items:center}
.cta__title{font-size:clamp(1.3rem,1.75vw + .2rem,2.2rem);line-height:1.18;font-weight:700;letter-spacing:-.022em;text-wrap:balance}
.cta__copy p{margin-top:calc(var(--hu)*.8);max-width:calc(var(--hu)*26);font-size:max(.84rem,calc(var(--hu)*1.04));line-height:1.6;color:rgba(255,255,255,.72)}
.cta__act{display:flex;justify-content:center}
.cta__pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.cta__pts li{display:flex;flex-direction:column;align-items:center;gap:calc(var(--hu)*.7);padding:.2em calc(var(--hu)*1.3);text-align:center;border-left:1px solid rgba(255,255,255,.22)}
.cta__pts li:first-child{border-left:0}
.cta__pts svg{width:max(26px,calc(var(--hu)*2.4));height:max(26px,calc(var(--hu)*2.4));color:rgba(255,255,255,.88);transition:transform .6s var(--ease),color .3s}
.cta__pts li:hover svg{transform:translateY(-4px) scale(1.1);color:#ffb3a1}
.cta__pts p{font-size:max(.74rem,calc(var(--hu)*.9));line-height:1.45;color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------------ live details (only while on screen, never with reduced motion) */
@keyframes glare{0%{background-position:-120% 0}24%{background-position:220% 0}100%{background-position:220% 0}}
@keyframes ping{0%{opacity:.95;box-shadow:0 0 0 0 rgba(255,76,52,.7)}65%{opacity:0;box-shadow:0 0 0 calc(var(--hu)*1.15) rgba(255,76,52,0)}100%{opacity:0}}
@keyframes sweep{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:no-preference){
  .hero.is-live .glare{animation:glare 9s 2.4s infinite var(--ease)}
  .hero.is-live .ping{animation:ping 3.4s 2.8s infinite}
  .cta.is-live .btn--terra::before{animation:sweep 5.5s 1.2s infinite var(--ease)}
}

/* ------------------------------------------------------------------ light-on-dark focus */
.hero :focus-visible,.cta :focus-visible{outline-color:#fff}

/* ------------------------------------------------------------------ motion starting states */
.js [data-split] .wi{transform:translateY(112%)}
.js [data-r],.js [data-rs]>*{opacity:0}
.js [data-line]{transform:scaleX(0)}
.js .arr{transform:scaleX(0)}
.js .hero__stage,.js .s2__tab img{opacity:0}
.reduced [data-r],.reduced [data-rs]>*{opacity:1!important}
.reduced [data-split] .wi{transform:none!important}
.reduced [data-line],.reduced .arr{transform:none!important}
.reduced .hero__stage,.reduced .s2__tab img{opacity:1!important}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1279px){
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:calc(var(--hu)*2.2);column-gap:calc(var(--hu)*2.4);--fg:calc(var(--hu)*2.4)}
  .step:nth-child(4n) .arr{display:none}
  .step__t b{font-size:max(.86rem,calc(var(--hu)*1.1))}
  .step__t span{font-size:max(.76rem,calc(var(--hu)*.92))}
  .track{--cols:4}
  .swatches{padding-inline:0}
}

@media (max-width:1079px){
  :root{--pad:clamp(20px,4.6vw,48px);--gap:16px}
  .wrap{width:min(100% - var(--pad)*2,1500px)}

  /* hero: copy first, art underneath bleeding into the next section */
  .hero{height:auto;padding-top:clamp(30px,6vw,52px);--aw:100vw;display:flex;flex-direction:column}
  .hero__in{order:1}
  .hero__art{order:2}
  .hero__in{height:auto;padding:0 var(--pad) clamp(26px,4vw,40px);display:block}
  .hero__eyebrow{font-size:clamp(.66rem,1.6vw,.78rem);white-space:normal}
  .hero__title{margin-top:12px;font-size:clamp(3rem,10.6vw,5.6rem)}
  .hero__lead{margin-top:12px;max-width:30ch;font-size:clamp(1.15rem,3.4vw,1.7rem)}
  .hero__txt{margin-top:14px;max-width:44ch;font-size:clamp(.9rem,2.1vw,1.05rem)}
  .hero__btn{margin-top:22px;font-size:.95rem;padding:.95em 1.8em}
  .hero__stats{margin-top:26px;gap:clamp(18px,4vw,40px);flex-wrap:wrap}
  .hero__stats li{font-size:clamp(.74rem,1.9vw,.86rem)}
  .hero__art{position:relative;right:auto;bottom:auto;width:100%;margin-bottom:-11.11%;
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 5.5%);mask-image:linear-gradient(0deg,transparent 0,#000 5.5%)}
  /* keep the laptop lid crisp on the left, melt only the photographic sky on the right into the hero colour */
  .hero__stage{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 74%),linear-gradient(180deg,transparent 0,#000 11%);
    mask-image:linear-gradient(90deg,#000 0,#000 50%,transparent 74%),linear-gradient(180deg,transparent 0,#000 11%)}
  .hero::after{display:none}

  .s1{padding-top:0}
  .s1__top{grid-template-columns:1fr;gap:0;margin-bottom:24px;padding-top:calc(11.11vw + 22px)}
  .s1__txt{max-width:62ch;font-size:.96rem;margin-top:14px}
  .needs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .need{padding:20px}
  .need h3{font-size:1rem}.need p{font-size:.88rem}
  .ic{width:48px}

  .s2{padding-block:clamp(36px,6vw,56px) 0}
  .s2__in{grid-template-columns:1fr;padding-left:0;row-gap:24px}
  .s2__intro{padding:0 var(--pad)}
  .s2__txt{font-size:.96rem;max-width:62ch;margin-top:14px}
  .feats{margin-inline:var(--pad);gap:12px;padding-block:0}
  .fc{padding:18px}
  .fc__ic{width:42px}
  .fc h3{font-size:.95rem}.fc p{font-size:.84rem}
  .s2__tab{justify-content:flex-end;margin-top:8px}
  .s2__tab img{width:min(100%,640px);margin:0}

  .s3__head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px}
  .s3__txt{text-align:left;font-size:.96rem}
  .track{--cols:3}
  .arr{display:none!important}
  .s5__grid{grid-template-columns:1fr;row-gap:32px}
  .s5__txt{font-size:.96rem;max-width:62ch;margin-top:14px}
  .swatches{flex-wrap:wrap;justify-content:flex-start;gap:14px 18px}
  .sw{min-width:92px}
  .sw__dot{width:56px}
  .sw b{font-size:.68rem}.sw span{font-size:.78rem}
  .type{border-left:0;border-top:1px solid rgba(130,80,70,.22);padding:22px 0 0}
  .type__name{font-size:2.6rem}
  .type__lbl,.type__txt{font-size:.92rem}
  .type__txt{max-width:36ch}

  .cta__bg{width:100%;-webkit-mask-image:none;mask-image:none}
  .cta__bg::after{background:linear-gradient(90deg,rgba(4,4,4,.88) 0,rgba(4,4,4,.5) 60%,rgba(4,4,4,.35) 100%),linear-gradient(0deg,rgba(4,4,4,.6),transparent 60%)}
  .cta__grid{grid-template-columns:1fr;row-gap:24px}
  .cta__act{justify-content:flex-start}
  .cta__copy p{font-size:.98rem;max-width:52ch;margin-top:12px}
  .cta__title{font-size:clamp(1.6rem,4.6vw,2.2rem)}
  .btn{font-size:.95rem}
  .cta__pts{margin-top:8px}
  .cta__pts li{padding-inline:16px}
  .cta__pts svg{width:30px;height:30px}
  .cta__pts p{font-size:.84rem}
}

@media (max-width:819px){
  .track{--cols:2.25}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px;column-gap:20px}
  .step:nth-child(2n) .arr{display:none}
  .step__dot{width:48px}
  .progress{height:2px}
}

@media (max-width:559px){
  .hero__title{font-size:clamp(2.8rem,15vw,4rem)}
  .hero__eyebrow{letter-spacing:.05em;line-height:1.4}
  .hero__stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
  .hero__stats li{font-size:.72rem}
  .hero__art{width:120%;margin-left:-10%;margin-bottom:-13.33%}
  .hero__art .hero__stage{scale:1.02}
  .s1__top{padding-top:calc(13.33vw + 22px)}
  .needs{grid-template-columns:1fr}
  .need{padding:18px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fc{padding:16px 14px}
  .fc h3{font-size:.9rem}.fc p{font-size:.8rem}
  .track{--cols:1.12}
  .s4__head{align-items:flex-start;flex-direction:column;gap:18px}
  .arrows{align-self:flex-start}
  /* workflow becomes a vertical timeline */
  .flow{grid-template-columns:1fr;row-gap:0;position:relative}
  .step{padding-bottom:22px;gap:14px;align-items:flex-start}
  .step:last-child{padding-bottom:0}
  .step::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:linear-gradient(180deg,rgba(185,84,65,.5),rgba(185,84,65,.15));transform-origin:top;border-radius:2px}
  .step:last-child::before{display:none}
  .step__t{padding-top:4px}
  .step__t b{font-size:1rem}.step__t span{font-size:.86rem}
  .swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .sw{min-width:0}
  .cta__pts{grid-template-columns:1fr;row-gap:18px}
  .cta__pts li{flex-direction:row;text-align:left;border-left:0;padding:0;gap:16px;align-items:center}
  .cta__pts li+li{border-top:1px solid rgba(255,255,255,.16);padding-top:18px}
  .cta__pts svg{flex:none}
  .btn{width:100%}
  .cta__act .btn,.hero__btn{width:auto}
  .toast{bottom:18px;max-width:calc(100% - 32px)}
}

@media (hover:none){
  .card:hover,.fc:hover,.shot:hover{translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}