/* Nutrition by Han — site styles. Tokens from design.md v0.2.
   Layout concept: warm editorial page (Food Medic) with alternating cream / lilac / navy bands (Rhitrition),
   product-page rhythm on offer pages (SheMed / Daye), lime rationed to one spotlight per screen. */

:root{
  --navy:#171D3A; --lilac:#FCE5FD; --lime:#E2FC87; --white:#FFFFFF; --black:#000;
  --cream:#FDF9F6; --lilac-deep:#C9A5D9; --plum:#5B3B73; --lime-deep:#B9D64A;
  --navy-70:rgba(23,29,58,.72); --navy-30:rgba(23,29,58,.32); --navy-10:rgba(23,29,58,.08);
  --bg:var(--cream); --fg:var(--navy);
  --display:"Fraunces","FrauncesLocal",Georgia,"Times New Roman",serif;
  --body:"Figtree","FigtreeLocal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --soft:"opsz" 144,"SOFT" 100,"WONK" 1;
  --r-card:24px; --r-img:20px; --r-pill:999px; --r-tag:8px;
  --gutter:max(16px,env(safe-area-inset-left,0px)); --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --max:1200px; --narrow:720px; --wide:1320px;
  --sec:clamp(72px,9vw,120px);
  color-scheme:light;
}
@font-face{font-family:"FrauncesLocal";src:url("../assets/fonts/fraunces-latin-full-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"FrauncesLocal";src:url("../assets/fonts/fraunces-latin-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"FigtreeLocal";src:url("../assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"FigtreeLocal";src:url("../assets/fonts/figtree-latin-wght-italic.woff2") format("woff2");font-weight:300 900;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);overflow-x:hidden}
main,.page-hero,.hero{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum)}
h1,h2,h3,.display{font-family:var(--display);font-variation-settings:var(--soft);font-weight:400;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1,.h1{font-size:clamp(38px,5vw,56px)}
h2,.h2{font-size:clamp(30px,3.6vw,40px);line-height:1.1}
h3,.h3{font-size:clamp(20px,2vw,24px);line-height:1.2;letter-spacing:0}
.display{font-size:clamp(44px,6.4vw,72px);line-height:1}
p{margin:0}
.lead{font-size:clamp(18px,1.5vw,20px);line-height:1.5;color:var(--navy-70)}
.body{color:var(--navy-70)}
.small{font-size:14px;line-height:1.5}
.eyebrow{font:500 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--plum);margin:0 0 16px}
em.hl,.hl{font-family:var(--display);font-style:italic;font-weight:300;color:var(--plum)}
.on-navy .hl,.band-navy .hl{color:var(--lilac)}
mark{background:linear-gradient(transparent 55%,var(--lime) 55%);color:inherit;padding:0 .08em}
.stack>*+*{margin-top:16px}
.flow>*+*{margin-top:24px}
:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* layout */
.wrap{max-width:var(--max);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.wrap.narrow{max-width:var(--narrow)}
.wrap.wide{max-width:var(--wide)}
.band{padding-block:var(--sec)}
.band-lilac{background:var(--lilac)}
.band-navy{background:var(--navy);color:var(--white)}
.band-navy .lead,.band-navy .body{color:rgba(255,255,255,.78)}
.band-navy .eyebrow{color:var(--lilac)}
.band-white{background:var(--white)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split>*{min-width:0}
@media (max-width:1024px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.g2,.g3,.g4,.split{grid-template-columns:1fr}.split.rev>:first-child{order:2}}
.center{text-align:center}
.center h2,.center h1,.center .lead{margin-inline:auto}
.center .lead{max-width:640px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.measure{max-width:64ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-pill);font:500 15px/1.25 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;text-align:center;max-width:100%}
.btn:hover{transform:translateY(-1px)}
.btn-lime{background:var(--lime);color:var(--navy);border-color:var(--lime)}
.btn-lime:hover{background:var(--lime-deep);border-color:var(--lime-deep)}
.btn-navy{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-navy:hover{background:var(--plum);border-color:var(--plum)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--lilac)}
.band-navy .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.7)}
.band-navy .btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:12px 20px;font-size:13px;white-space:nowrap}
.link{font:500 16px/1 var(--body);color:var(--plum);text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1.5px solid transparent;padding-bottom:3px}
.link:hover{border-color:var(--plum)}
.link::after{content:"→";transition:transform .2s}
.link:hover::after{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-row.center{justify-content:center}

/* tags & stickers */
.tag{display:inline-block;font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:var(--r-tag);background:var(--lilac);color:var(--navy)}
.tag-lime{background:var(--lime)}
.tag-navy{background:var(--navy);color:var(--white)}
.sticker{position:absolute;background:var(--lime);color:var(--navy);font:600 14px/1.1 var(--body);letter-spacing:.02em;padding:12px 16px;border-radius:var(--r-tag);box-shadow:0 1px 0 rgba(23,29,58,.15);transform:rotate(var(--rot,-4deg));transition:transform .25s;max-width:200px;text-transform:none}
.sticker.lil{background:var(--lilac)}
.sticker.white{background:var(--white)}
.card:hover .sticker,.ph:hover .sticker{transform:rotate(0deg)}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--cream)}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--lilac-deep)}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:24px;row-gap:12px;padding-top:16px;padding-bottom:14px}
.nav .logo{flex:0 0 100%}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:40px;width:auto;max-width:none}
.menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.menu a{font:500 15px/1 var(--body);color:var(--navy);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--lime-deep)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:1.5px solid var(--navy);border-radius:var(--r-pill);padding:10px 14px;font:500 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--navy);cursor:pointer}
@media (max-width:1100px){.menu{gap:18px}.menu a{font-size:14px}.nav-cta .btn-ghost{display:none}}
@media (max-width:900px){.menu,.nav-cta{display:none}.burger{display:inline-flex}.nav{flex-wrap:nowrap;height:68px;padding-block:0}.nav .logo{flex:0 0 auto}.logo img{height:32px}}
.drawer{position:fixed;inset:0;background:var(--lilac);z-index:70;display:none;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gutter-r) calc(24px + env(safe-area-inset-bottom,0px)) var(--gutter);overflow:auto}
.drawer.open{display:flex}
.drawer .top{display:flex;justify-content:space-between;align-items:center}
.drawer ul{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:8px}
.drawer ul a{font-family:var(--display);font-variation-settings:var(--soft);font-size:clamp(32px,8vw,40px);color:var(--navy);text-decoration:none;line-height:1.15}
.drawer .foot{margin-top:auto;display:grid;gap:12px;padding-top:40px}
.drawer .foot .btn{width:100%}

/* hero (home) */
.hero{padding-block:clamp(48px,7vw,96px) 0;text-align:center}
.hero .display{max-width:16ch;margin-inline:auto}
.hero .lead{max-width:600px;margin-inline:auto}
.triad{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font:500 13px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--navy-70)}
.triad span+span::before{content:"·";margin-right:20px;color:var(--lilac-deep)}
@media (max-width:600px){.triad span+span::before{content:none}.triad{gap:6px;flex-direction:column}}
.collage{display:grid;grid-template-columns:1fr 1.1fr 1.5fr 1.1fr 1fr;gap:16px;align-items:end;margin-top:clamp(40px,5vw,64px);max-width:var(--wide);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.collage .ph{position:relative;border-radius:var(--r-img);overflow:hidden;background:var(--lilac)}
.collage .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.collage .ph:nth-child(1){aspect-ratio:3/4;transform:translateY(-16px)}
.collage .ph:nth-child(2){aspect-ratio:4/5}
.collage .ph:nth-child(3){aspect-ratio:4/5}
.collage .ph:nth-child(4){aspect-ratio:4/5}
.collage .ph:nth-child(5){aspect-ratio:3/4;transform:translateY(-16px)}
.collage .quote{display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:var(--lilac)}
.collage .quote p{font-family:var(--display);font-variation-settings:var(--soft);font-size:clamp(18px,1.6vw,22px);line-height:1.25}
.collage .quote small{margin-top:12px;font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--plum)}
@media (max-width:900px){.collage{grid-template-columns:1fr 1fr 1fr}.collage .ph:nth-child(4),.collage .ph:nth-child(5){display:none}.collage .ph:nth-child(1),.collage .ph:nth-child(5){transform:none}}
@media (max-width:520px){.collage{grid-template-columns:1fr 1fr;gap:12px}.collage .ph:nth-child(3){display:none}.collage .ph:nth-child(1),.collage .ph:nth-child(2){aspect-ratio:3/4}}

/* page hero */
.page-hero{background:var(--lilac);padding-block:clamp(48px,6vw,88px)}
.page-hero .split{align-items:center}
.page-hero .ph{position:relative}
.page-hero .ph img{border-radius:var(--r-img);aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;width:100%;max-width:520px;margin-left:auto}
.page-hero .blob{position:absolute;inset:auto -6% -6% auto;width:60%;aspect-ratio:1;border-radius:46% 54% 50% 50%/55% 45% 55% 45%;background:var(--white);z-index:-1;opacity:.7}
.page-hero .ph{isolation:isolate}
@media (max-width:768px){.page-hero .ph img{margin-left:0;max-width:100%;aspect-ratio:4/3}}

/* cards */
.card{background:var(--white);border-radius:var(--r-card);overflow:hidden;position:relative;border:1px solid transparent;transition:transform .25s,border-color .25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);border-color:var(--lilac-deep)}
.card .img{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--lilac)}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .pad{padding:28px;display:flex;flex-direction:column;gap:12px;flex:1}
.card .pad .link{margin-top:auto;padding-top:8px}
.card.lil{background:var(--lilac)}
.card.navy{background:var(--navy);color:var(--white)}
.card.navy .body{color:rgba(255,255,255,.78)}
.card.flat:hover{transform:none}
.step{background:var(--white);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--navy-10)}
.band-lilac .step{border-color:transparent}
.step .num{font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.band-navy .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.band-navy .step .num{color:var(--lime)}
.band-navy .step .body{color:rgba(255,255,255,.75)}
.scroll-x{display:grid;gap:24px}
@media (max-width:768px){.scroll-x{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding-inline:var(--gutter) var(--gutter-r);scrollbar-width:none}.scroll-x>*{flex:0 0 82%;scroll-snap-align:start}}

/* credential strip */
.cred{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cred span{background:var(--white);border:1px solid var(--lilac-deep);border-radius:var(--r-pill);padding:10px 18px;font:500 14px/1 var(--body);color:var(--navy)}
.press{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;align-items:center;margin-top:24px}
.press a{font-family:var(--display);font-variation-settings:var(--soft);font-size:18px;color:var(--navy-70);text-decoration:none;opacity:.85}
.press a:hover{color:var(--plum);opacity:1}

/* checks */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:34px;color:var(--navy-70)}
.checks li::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171D3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;margin-top:2px}
.band-navy .checks li{color:rgba(255,255,255,.82)}
.card.navy .checks li{color:rgba(255,255,255,.82)}
.checks.plain li::before{background-color:var(--lilac)}

/* testimonial band */
.quote-band{text-align:center}
.quote-band .glyph{font-family:var(--display);font-variation-settings:var(--soft);font-size:120px;line-height:.6;color:var(--lilac-deep);height:60px}
.quote-band blockquote{margin:0 auto;max-width:820px;font-family:var(--display);font-variation-settings:var(--soft);font-size:clamp(22px,2.6vw,30px);line-height:1.3}
.quote-band cite{display:block;margin-top:24px;font:500 13px/1.5 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--plum);font-style:normal}
.quote-band .slide{display:none}
.quote-band .slide.active{display:block}
.dots{display:flex;gap:8px;justify-content:center;margin-top:32px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:var(--lilac-deep);cursor:pointer;padding:0}
.dots button[aria-selected="true"]{background:var(--navy);width:28px;border-radius:var(--r-pill)}
.review{background:var(--white);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--navy-10)}
.review .stars{color:var(--lime-deep);letter-spacing:2px;font-size:16px}
.review p{color:var(--navy-70)}
.review cite{font:500 13px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--plum);font-style:normal;margin-top:auto}

/* price card */
.price{background:var(--navy);color:var(--white);border-radius:var(--r-card);padding:36px;display:flex;flex-direction:column;gap:20px;position:relative}
.price.alt{background:var(--white);color:var(--navy);border:1px solid var(--lilac-deep)}
.price .amount{font-family:var(--display);font-variation-settings:var(--soft);font-size:56px;line-height:1}
.price .amount small{font:400 16px/1 var(--body);opacity:.75;margin-left:6px}
.price .checks li{color:rgba(255,255,255,.82)}
.price.alt .checks li{color:var(--navy-70)}
.price .foot{display:grid;gap:12px;margin-top:8px}
.price .foot .btn{width:100%}
.price .foot .link{justify-self:center;color:var(--lilac)}
.price.alt .foot .link{color:var(--plum)}
.price .note{font-size:13px;opacity:.7}
.sticky{position:sticky;top:112px}

/* about block */
.about-ph{position:relative}
.about-ph img{border-radius:var(--r-img);aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;width:100%}
.caption{position:absolute;left:-16px;bottom:24px;background:var(--white);border-radius:16px;padding:16px 20px;max-width:280px;box-shadow:0 8px 24px rgba(23,29,58,.08)}
.caption b{display:block;font:600 15px/1.3 var(--body)}
.caption span{font:400 14px/1.4 var(--body);color:var(--navy-70)}
@media (max-width:768px){.caption{left:12px}}

/* FAQ */
.faq{border-top:1px solid var(--lilac-deep)}
.faq details{border-bottom:1px solid var(--lilac-deep)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font:500 18px/1.3 var(--body);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:28px;color:var(--plum);flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--navy-70);max-width:70ch}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{border:1.5px solid var(--navy);background:transparent;color:var(--navy);border-radius:var(--r-pill);padding:12px 20px;font:500 14px/1 var(--body);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--navy);color:var(--white)}
.panel{display:none}
.panel.active{display:block}

/* pillars marquee */
.pillars{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pillars span{font-family:var(--display);font-variation-settings:var(--soft);font-size:clamp(22px,2.6vw,32px);padding:12px 24px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--lilac-deep)}

/* two specialisms */
.spec{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:420px;display:flex;align-items:flex-end;text-decoration:none;color:var(--white);isolation:isolate}
.spec img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s}
.spec:hover img{transform:scale(1.04)}
.spec::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,29,58,0) 35%,rgba(23,29,58,.88));z-index:-1}
.spec .pad{padding:32px;display:grid;gap:10px}
.spec .pad p{color:rgba(255,255,255,.82)}
.spec .pad .link{color:var(--lime)}

/* blog */
.post-card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.post-card .img{aspect-ratio:3/2;border-radius:var(--r-img);overflow:hidden;background:var(--lilac);position:relative}
.post-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.post-card:hover .img img{transform:scale(1.03)}
.post-card .img .tile{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-family:var(--display);font-variation-settings:var(--soft);font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--navy)}
.post-card .img .tile.lime{background:var(--lime)}
.post-card .meta{display:flex;gap:10px;align-items:center;font:500 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--navy-70)}
.post-card h3{text-wrap:pretty}
.post-card p{color:var(--navy-70)}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.filters button{border:1.5px solid var(--lilac-deep);background:var(--white);color:var(--navy);border-radius:var(--r-pill);padding:10px 16px;font:500 13px/1 var(--body);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.post-body{font-size:17px;line-height:1.75}
.post-body>*+*{margin-top:1.2em}
.post-body h2{margin-top:2em;font-size:clamp(26px,3vw,32px)}
.post-body h3{margin-top:1.6em}
.post-body ul,.post-body ol{padding-left:1.3em;color:var(--navy-70)}
.post-body li+li{margin-top:.4em}
.post-body p{color:var(--navy-70)}
.post-body strong{color:var(--navy)}
.callout{background:var(--lilac);border-radius:var(--r-card);padding:28px;color:var(--navy)}
.callout .eyebrow{margin-bottom:10px}
.callout p{color:var(--navy)}
.author{display:flex;gap:16px;align-items:center}
.author img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.author b{display:block;font:600 15px/1.3 var(--body)}
.author span{font-size:14px;color:var(--navy-70)}
.post-hero{padding-block:clamp(48px,6vw,80px) 0}
.post-hero img.cover{border-radius:var(--r-img);aspect-ratio:2/1;object-fit:cover;width:100%;margin-top:40px}
.rule{border:0;border-top:1px solid var(--lilac-deep);margin:0}

/* closing CTA + footer */
.cta-band .display{font-size:clamp(36px,5vw,56px)}
.footer{padding-block:64px 32px;background:var(--cream);border-top:1px solid var(--lilac-deep)}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.footer h4{font:500 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--plum);margin:0 0 16px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a{color:var(--navy);text-decoration:none}
.footer a:hover{color:var(--plum)}
.footer .mission{color:var(--navy-70);max-width:34ch;margin-top:16px}
.footer .bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--navy-10);font-size:13px;color:var(--navy-70)}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer .cols{grid-template-columns:1fr}}

/* misc */
.proto-note{background:var(--navy);color:var(--lilac);font:500 12px/1.4 var(--body);letter-spacing:.06em;text-align:center;padding:8px var(--gutter)}
.proto-note a{color:var(--lime)}
.icon{width:44px;height:44px;border-radius:50%;background:var(--lilac);display:grid;place-items:center;color:var(--navy)}
.band-navy .icon{background:rgba(255,255,255,.1);color:var(--lime)}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.copy-row{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}
.copy-row code{font:500 15px/1 var(--body);background:var(--white);border:1px solid var(--lilac-deep);border-radius:var(--r-tag);padding:10px 14px;color:var(--navy)}
.band-navy .copy-row code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--white)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* stacked steps */
.steps-v{display:grid;gap:16px;max-width:860px;margin-inline:auto}
.step.row{flex-direction:row;align-items:flex-start;gap:24px;padding:28px 32px}
.step.row .num{flex:0 0 80px;padding-top:6px}
.step.row h3{margin-bottom:8px}
@media (max-width:600px){.step.row{flex-direction:column;gap:8px}}
.card .img.mock{background:var(--lilac);display:flex;align-items:center;justify-content:center;padding:20px}
.card .img.mock img{object-fit:contain;width:100%;height:100%}

.mockup{background:var(--lilac);border-radius:var(--r-card);padding:40px;display:flex;align-items:center;justify-content:center}
.mockup img{width:100%;max-width:480px;height:auto}

/* four-tile collage */
.collage.four{grid-template-columns:1fr 1.5fr 1fr 1fr;max-width:1100px}
.collage.four .ph:nth-child(1){aspect-ratio:3/4;transform:translateY(-16px)}
.collage.four .ph:nth-child(2){aspect-ratio:4/5;transform:none}
.collage.four .ph:nth-child(3){aspect-ratio:3/4;transform:translateY(-16px)}
.collage.four .ph:nth-child(4){aspect-ratio:3/4;transform:none}
@media (max-width:900px){.collage.four{grid-template-columns:1fr 1fr 1fr}.collage.four .ph:nth-child(4){display:none}.collage.four .ph:nth-child(1),.collage.four .ph:nth-child(3){transform:none}}
@media (max-width:520px){.collage.four{grid-template-columns:1fr 1fr}.collage.four .ph:nth-child(2){display:block}.collage.four .ph:nth-child(3){display:none}}

/* three-tile collage: two photos + quote */
.collage.three{grid-template-columns:1fr 1.2fr 1fr;max-width:960px;align-items:center}
.collage.three .ph:nth-child(1){aspect-ratio:3/4;transform:translateY(-12px)}
.collage.three .ph:nth-child(2){aspect-ratio:4/5;transform:none}
.collage.three .ph:nth-child(3){aspect-ratio:3/4;transform:translateY(12px)}
@media (max-width:520px){.collage.three{grid-template-columns:1fr 1fr}.collage.three .ph:nth-child(3){grid-column:1/-1;aspect-ratio:2/1;transform:none}.collage.three .ph:nth-child(1){transform:none}}
/* mobile: lift the first sticker off the top-left corner so it doesn't cover Hannah's face */
@media (max-width:520px){.collage.three .ph:nth-child(1){overflow:visible;background:none}.collage.three .ph:nth-child(1) img{border-radius:var(--r-img)}.collage.three .ph:nth-child(1) .sticker{left:-6px!important;top:-20px!important;max-width:120px;padding:8px 10px;font-size:12px}}