/* Eliture Apparel — brand-house design system
   Serif (Instrument Serif): hero, section and statement headlines. Sans (Hanken Grotesk): everything functional.
   Rhythm: off-white → navy → sand → navy → white → sand → yellow → off-white → navy. */
:root{
  --navy:#072C67;--warm:#F8F6F0;--white:#fff;--grey:#6B7280;--yellow:#F4C430;--coral:#F26B5B;
  --sand:#F0ECE2;--field:#E7E1D3;--ink-soft:#2b416b;--line:rgba(7,44,103,.18);
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1200px;--gutter:clamp(1.25rem,4vw,2.5rem);--hh:76px;--r:28px;
  --sp:clamp(4rem,8vw,7rem);--gap:clamp(1.5rem,3vw,2.5rem);
  --t-body:1.125rem;--t-small:1rem;
  --t-hero:clamp(4rem,7.6vw,7rem);           /* hero — reference editorial scale */
  --t-h2:clamp(2.8rem,5.4vw,5rem);           /* section / statement */
  --t-h3:clamp(1.65rem,2.35vw,2.25rem);       /* supporting */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--warm);color:var(--navy);font:400 var(--t-body)/1.7 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:2px}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:100;transition:top .2s}
.skip:focus{top:1rem}
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- type ---------- */
.display,.hero h1,.story h3,.cap-grid h3,.pcard h3,.cb-name,.explore-h,.foot-tag,.eco li,.principles li,.strip li{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}
.display{font-size:var(--t-h2);line-height:.96;letter-spacing:-.025em;max-width:15ch}
.hero h1{font-size:var(--t-hero);line-height:.9;letter-spacing:-.03em;margin-bottom:1.75rem}
.pcard h3,.cap-grid h3,.explore-h,.cb-name{font-size:var(--t-h3);line-height:1.15}
.accent{font-style:italic;color:var(--coral)}
.sec-navy .accent{color:var(--yellow)}
.sec-yellow .accent{color:var(--navy)}
.eyebrow{font:600 .8125rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:1.5rem}
.eyebrow-light{color:var(--yellow)}
.eyebrow-bar{display:flex;align-items:center;gap:.75rem}
.eyebrow-bar::before{content:"";width:28px;height:3px;background:var(--yellow);flex:none}
.sec-yellow .eyebrow{color:var(--navy)}
.sec-yellow .eyebrow-bar::before{background:var(--navy)}
.lead{font-size:clamp(1.1875rem,1.6vw,1.3125rem);line-height:1.65;max-width:32rem;color:var(--ink-soft)}
.prose{max-width:34rem}.prose p+p{margin-top:1.25rem}.prose p:last-child{margin-top:2rem}
.prose-p{max-width:32rem;margin:1.75rem 0 2.5rem;color:var(--ink-soft)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(248,246,240,.94);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(7,44,103,.5)}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--hh)}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--yellow);display:block}
.logo-word{font:400 2rem/1 var(--serif);letter-spacing:-.01em;color:var(--navy);display:inline-flex;align-items:flex-end}
.logo-dot{width:6px;height:6px;border-radius:50%;background:var(--coral);margin:0 0 .28rem .12rem}
.nav{display:flex;align-items:center;gap:1.75rem}
.nav ul{display:flex;gap:1.4rem}
.nav a:not(.btn){text-decoration:none;font-size:.9375rem;font-weight:500;padding:.4rem 0;white-space:nowrap;background:linear-gradient(var(--navy),var(--navy)) 0 100%/0 1px no-repeat;transition:background-size .25s}
.nav a:not(.btn):hover{background-size:100% 1px}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:10px;right:10px;height:2px;background:var(--navy);transition:transform .25s,top .25s}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.75rem;border:1.5px solid var(--navy);font:600 .9375rem/1 var(--sans);letter-spacing:.04em;text-decoration:none;text-align:center;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-solid{background:var(--navy);color:#fff}.btn-solid:hover{background:#0a3a85;border-color:#0a3a85}
.btn-ghost{background:transparent;color:var(--navy)}.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-nav{min-height:44px;padding:0 1.35rem;background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-nav:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-yellow:hover{background:#fff;border-color:#fff}
.btn:disabled{opacity:.6;cursor:progress}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:6px}
.link:hover{text-decoration-color:var(--navy)}

/* ---------- section colour fields ---------- */
.sec{padding:var(--sp) 0}
.sec-white{background:var(--white)}
.sec-sand{background:var(--sand)}
.sec-navy{background:var(--navy);color:#fff}
.sec-yellow{background:var(--yellow);color:var(--navy)}
.split{display:grid;gap:2.5rem var(--gap);grid-template-columns:1fr}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.display+.brand-pair,.display+.cap-grid,.display+.principles{margin-top:clamp(2.5rem,5vw,4rem)}

/* ---------- hero ---------- */
.hero{padding:clamp(2rem,5vw,4.5rem) 0 var(--sp);background:radial-gradient(120% 90% at 85% 10%,#FBF0CF 0,var(--warm) 55%)}
.hero-grid{display:grid;gap:3.5rem var(--gap);align-items:center}
.hero .ln{display:block}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.hero-art{position:relative;padding:4% 0 14%;max-width:560px;width:100%;justify-self:center}
.sun{position:absolute;right:0;top:0;width:84%;aspect-ratio:1;border-radius:50%;background:var(--yellow)}
.h-main{position:relative;width:64%;margin-left:auto;margin-right:6%;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(7,44,103,.55)}
.h-main img{aspect-ratio:1100/1508;width:100%;object-fit:cover}
.h-side{position:absolute;left:0;bottom:2%;width:46%;background:#fff;border-radius:var(--r);overflow:hidden;transform:rotate(-4deg);box-shadow:0 24px 50px -24px rgba(7,44,103,.55)}
@media (prefers-reduced-motion:no-preference){
  .hero .ln{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .ln:nth-child(2){animation-delay:.14s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- about ---------- */
.strip{display:grid;margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);counter-reset:s}
.strip li{counter-increment:s;padding:1.75rem 0;border-bottom:1px solid var(--line);font-size:var(--t-h3);line-height:1.15}
.strip li::before{content:none}.strip-no{display:block;font:600 .8125rem/1 var(--sans);letter-spacing:.14em;color:var(--coral);margin-bottom:.9rem}.strip-title{display:block}

/* ---------- brands (navy) ---------- */
.brand-pair{display:grid;gap:var(--gap)}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r);color:var(--navy)}
.brand-a{background:var(--yellow)}
.brand-b{background:var(--warm)}
.brand-img{width:100%;aspect-ratio:1;background:#fff;border-radius:calc(var(--r) - 8px);overflow:hidden}
.brand-img img{width:100%;height:100%;object-fit:contain}
.brand-b .brand-img{aspect-ratio:4/5}
.brand-b .brand-img img{object-fit:cover}
.brand-logo{object-fit:contain;object-position:left center}
.logo-bb{width:176px;height:auto;padding:.5rem .9rem;background:#fff;border-radius:999px}
.logo-bk{width:230px;height:auto}
.brand p{max-width:30rem;font-size:1.1875rem;line-height:1.6}
.brand .btn{margin-top:auto}
.brand-b .btn{background:var(--coral);border-color:var(--coral);color:var(--navy)}
.brand-b .btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- showcase ---------- */
.pgrid{display:grid;gap:3.5rem clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr;margin-top:clamp(2.5rem,5vw,4rem)}
.pcard{display:flex;flex-direction:column;min-width:0}
.pimg{background:#fff;border-radius:var(--r);aspect-ratio:4/5;overflow:hidden;margin-bottom:1.5rem}
.pimg img{width:100%;height:100%;object-fit:contain;transition:transform .6s}
.pcard:hover .pimg img{transform:scale(1.03)}
.pcard.photo .pimg img{object-fit:cover}
.pmeta{font:600 .8125rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:.6rem}
.pcard h3{margin-bottom:.75rem}
.pcard p:not(.pmeta){color:var(--ink-soft);margin-bottom:1.5rem;max-width:30rem}
.pcard .link{margin-top:auto;align-self:flex-start}
.amz{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.75rem;border-top:1px solid var(--line)}

/* ---------- what we do (navy) ---------- */
.cap-grid{display:grid;grid-template-columns:1fr;counter-reset:c;margin-top:clamp(3rem,6vw,5rem)}
.cap-grid article{counter-increment:c;padding:2rem 0 2.25rem;border-top:1px solid rgba(255,255,255,.28)}
.cap-grid article::before{content:counter(c,decimal-leading-zero);display:block;font:600 .8125rem/1 var(--sans);letter-spacing:.14em;color:var(--yellow);margin-bottom:2.5rem}
.cap-grid h3{margin-bottom:1rem}
.cap-grid p{color:#d3dcf0;max-width:24rem}

/* ---------- brand stories ---------- */
#story-h{margin-bottom:clamp(2.5rem,5vw,4rem)}
.story{display:grid;gap:2.5rem var(--gap);align-items:center}
.story+.story{margin-top:clamp(3.5rem,7vw,6rem)}
.story-img{position:relative;aspect-ratio:4/5;width:100%;max-width:520px}
.story-img::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--yellow);top:-4%;right:-4%}
.story-rev .story-img::before{background:var(--coral);right:auto;left:-4%}
.story-img img{position:relative;width:100%;height:100%;object-fit:contain;background:#fff;border-radius:var(--r)}
.story-rev .story-img img{object-fit:cover}
.story h3{font-size:var(--t-h2);line-height:1;margin-bottom:1.25rem}
.story p{max-width:28rem;margin-bottom:2rem;color:var(--ink-soft)}

/* ---------- approach (sand) ---------- */
.principles{counter-reset:p;display:grid;border-top:1px solid var(--line)}
.principles li{counter-increment:p;padding:2rem 0;border-bottom:1px solid var(--line);font-size:var(--t-h3);line-height:1.2}
.principles li::before{content:none}.principle-no{display:block;font:400 clamp(3.5rem,6vw,5rem)/1 var(--serif);color:var(--coral);margin-bottom:1rem;letter-spacing:-.02em}.principles strong{display:block;font:400 var(--t-h3)/1.15 var(--serif);margin-bottom:.8rem}.principles li>span:last-child{display:block;font:400 1.05rem/1.6 var(--sans);color:var(--ink-soft);max-width:28rem}

/* ---------- ecosystem + explore (yellow) ---------- */
.eco-grid{display:grid;gap:3rem var(--gap)}
.eco{display:grid;grid-template-columns:1fr;align-content:start}
.eco li{display:flex;justify-content:space-between;align-items:baseline;padding:1.1rem 0;border-top:1px solid var(--navy);font-size:var(--t-h3);line-height:1.15}
.eco li:last-child{border-bottom:1px solid var(--navy)}
.arr{font:400 1.25rem/1 var(--sans)}
.explore{display:grid;gap:2rem var(--gap);margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--navy)}
.explore-h{max-width:16ch}
.cta-blocks{display:grid}
.cta-block{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.25rem 0;border-top:1px solid var(--navy);text-decoration:none;color:var(--navy);transition:padding .25s}
.cta-block:last-child{border-bottom:1px solid var(--navy)}
.cta-block:hover{padding-left:.75rem;padding-right:.75rem;background:var(--navy);color:#fff}
.cb-go{font-weight:600;font-size:1rem;letter-spacing:.03em}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:3.5rem var(--gap);align-items:start}
.contact-a{background:var(--sand);border-radius:var(--r);padding:clamp(1.5rem,3.5vw,3rem)}
.contact-a .form,.warranty-wrap .form{max-width:none}
.warranty-card{background:var(--navy);color:#fff;padding:clamp(1.75rem,3vw,2.5rem);border-radius:var(--r)}
.warranty-card .display{font-size:var(--t-h3);line-height:1.1;margin-bottom:1rem;max-width:none}
.warranty-card p:not(.eyebrow){margin-bottom:1.75rem;max-width:26rem;color:#d3dcf0}
.warranty-card .btn{align-self:flex-start}

/* ---------- forms ---------- */
.form{display:grid;gap:1.35rem;max-width:40rem}
.field{display:flex;flex-direction:column;gap:.5rem;border:0;padding:0;margin:0;min-width:0}
.field label,.radios legend{font-weight:600;font-size:1rem;line-height:1.4;padding:0}
.opt{font-weight:400;color:var(--grey)}
input,select,textarea{font:inherit;font-size:1.0625rem;line-height:1.4;color:var(--navy);width:100%;min-height:54px;padding:.8rem 1rem;background:var(--field);border:1.5px solid transparent;border-radius:12px;transition:border-color .2s,box-shadow .2s,background .2s}
textarea{resize:vertical;min-height:150px}
input:hover,select:hover,textarea:hover{border-color:rgba(7,44,103,.35)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;background:#fff;border-color:var(--navy);box-shadow:0 0 0 3px rgba(244,196,48,.8)}
[aria-invalid="true"]{border-color:#b3261e}
.err{color:#b3261e;font-size:.9375rem;line-height:1.4}
.err:empty{display:none}
.radios{flex-direction:row;flex-wrap:wrap;align-items:center}
.radios legend{width:100%;margin-bottom:.5rem}.radios .err{width:100%}
.radios label{display:inline-flex;align-items:center;gap:.6rem;font-weight:400;margin-right:2rem;min-height:44px}
.radios input,.check input{width:20px;height:20px;min-height:0;accent-color:var(--navy)}
.check label{display:flex;gap:.75rem;align-items:flex-start;font-weight:400;line-height:1.55}
.check input{margin-top:.2rem;flex:none}
.child{display:grid;gap:1.35rem;padding:1.5rem;background:#fff;border-radius:16px;border-left:4px solid var(--yellow)}
.child[hidden]{display:none}
.note{font-size:1rem;line-height:1.6;color:var(--ink-soft)}
.status{min-height:1.5rem;font-weight:500;line-height:1.5}
.status.is-success{color:#14693a;padding:1rem 1.1rem;background:#e7f5ec;border-radius:12px}
.status.is-error{color:#8f1d16;padding:1rem 1.1rem;background:#fcebea;border-radius:12px}
.form .btn{justify-self:start}
.form>.btn-solid{background:var(--navy)}
.page-main{min-height:70vh}
.warranty-wrap{display:grid;gap:3rem var(--gap)}
.warranty-wrap .form{background:var(--sand);border-radius:var(--r);padding:clamp(1.5rem,3.5vw,3rem)}
.w-intro .display{max-width:12ch}
.w-intro .prose-p{margin-bottom:0}

/* ---------- footer (navy) ---------- */
.site-footer{background:var(--navy);color:#fff;padding:clamp(4rem,7vw,6rem) 0 1.75rem}
.logo-light .logo-word{color:#fff}
.logo-lg .logo-mark{width:44px;height:44px;border-radius:13px}
.logo-lg .logo-word{font-size:3.25rem}
.logo-lg .logo-dot{width:9px;height:9px;margin-bottom:.45rem}
.foot-top{display:grid;gap:2rem var(--gap);align-items:end;padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid rgba(255,255,255,.25)}
.foot-tag{font-size:clamp(2.5rem,4.2vw,4.25rem);line-height:.98;letter-spacing:-.025em;max-width:14ch;justify-self:end;text-align:left;align-self:center}
.sec-navy .accent,.site-footer .accent{color:var(--yellow)}
.foot-grid{display:grid;gap:2.5rem var(--gap);grid-template-columns:1fr 1fr;padding-top:clamp(2.5rem,5vw,4rem)}
.foot-h{font:600 .8125rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:1.25rem}
.site-footer li{margin-bottom:.7rem;line-height:1.5;font-size:1.0625rem;overflow-wrap:anywhere}
.site-footer a{text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.site-footer a:hover{color:var(--yellow)}
.foot-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);font-size:.9375rem;color:#b9c6e0}

/* ---------- responsive ---------- */
@media (max-width:1119px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:var(--hh) 0 0 0;background:var(--warm);flex-direction:column;align-items:flex-start;gap:1.5rem;padding:2rem var(--gutter);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;overflow-y:auto}
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav ul{flex-direction:column;gap:.35rem;width:100%}
  .nav a:not(.btn){font:400 2rem/1.3 var(--serif);display:block}
}
@media (min-width:640px){
  .strip{grid-template-columns:repeat(3,1fr)}
  .strip li{padding:1.75rem 1.5rem 2rem;border-bottom:0;border-left:1px solid var(--line)}
  .strip li:first-child{border-left:0;padding-left:0}
  .strip{border-bottom:1px solid var(--line)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .cap-grid{grid-template-columns:1fr 1fr}
  .cap-grid article{padding-right:1.5rem}
  .cap-grid article:nth-child(even){border-left:1px solid rgba(255,255,255,.28);padding-left:1.5rem}
  .principles{grid-template-columns:1fr 1fr}
  .principles li{padding-right:1.5rem}
  .principles li:nth-child(even){border-left:1px solid var(--line);padding-left:1.5rem}
  .eco{grid-template-columns:1fr 1fr;column-gap:var(--gap)}
  .eco li:nth-last-child(2){border-bottom:1px solid var(--navy)}
  .foot-grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:start}
  .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .brand-pair{grid-template-columns:5fr 7fr;align-items:stretch}
  .brand-b{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,3vw,2.5rem);align-content:start;align-items:start}
  .brand-b .brand-img{grid-column:2;grid-row:1/span 4}
  .brand-b>:not(.brand-img){grid-column:1}
  .brand-b .btn{margin-top:1rem}
  .pgrid{grid-template-columns:repeat(6,1fr)}
  .pcard{grid-column:span 2}
  .pcard:nth-child(4){grid-column:2/span 2}.pcard:nth-child(5){grid-column:span 2}
  .story{grid-template-columns:1fr 1fr}
  .story-rev .story-img{order:2;justify-self:end}
  .eco-grid{grid-template-columns:1fr 1fr;align-items:end}
  .eco{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,3rem)}
  .eco li:nth-last-child(2){border-bottom:1px solid var(--navy)}
  .explore{grid-template-columns:1fr 1fr;align-items:start}
  .contact-grid{grid-template-columns:.9fr 1.1fr;column-gap:clamp(3rem,6vw,5rem)}
  .warranty-wrap{grid-template-columns:5fr 7fr;column-gap:clamp(3rem,6vw,5rem)}
  .w-intro{position:sticky;top:calc(var(--hh) + 2rem);align-self:start}
  .foot-top{grid-template-columns:auto 1fr;column-gap:clamp(3rem,8vw,7rem)}
  .foot-tag{justify-self:end;text-align:right;max-width:12ch}
}
@media (min-width:1120px){
  .cap-grid{grid-template-columns:repeat(4,1fr)}
  .cap-grid article,.cap-grid article:nth-child(even){padding:2rem 1.5rem 2.25rem;border-left:1px solid rgba(255,255,255,.28)}
  .cap-grid article:first-child{padding-left:0;border-left:0}
  .principles{grid-template-columns:repeat(4,1fr)}
  .principles li,.principles li:nth-child(even){padding:2rem 1.5rem 2rem;border-left:1px solid var(--line)}
  .principles li:first-child{padding-left:0;border-left:0}
  .nav{gap:2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- art-direction refinement (reference pass) ---------- */
:root{
  --t-hero:clamp(3rem,6vw,5rem);
  --t-h2:clamp(2.5rem,5vw,4.25rem);
}
.hero h1{margin-bottom:2rem}
.hero .lead{max-width:30rem}
/* hero: products as objects on a yellow disc, no card frames */
.hero-art{max-width:600px;aspect-ratio:1/1.02;padding:0}
.sun{right:2%;top:4%;width:88%}
.h-bag{position:absolute;left:50%;top:0;width:58%;height:auto;transform:translateX(-46%);filter:drop-shadow(0 30px 28px rgba(7,44,103,.28))}
.h-side{left:auto;right:0;bottom:3%;width:38%;transform:rotate(5deg)}
/* brands: two different worlds */
.brand-img{position:relative}
.brand-a .brand-img{background:none;aspect-ratio:1/1.02;border-radius:0;overflow:visible}
.brand-a .brand-img::before{content:"";position:absolute;inset:4% 6% 6%;border-radius:50%;background:rgba(255,255,255,.55)}
.brand-a .brand-img img{position:relative;object-fit:contain;filter:drop-shadow(0 24px 22px rgba(7,44,103,.28))}
.brand-pair{align-items:stretch}
@media (min-width:900px){
  .brand-b{grid-template-columns:.85fr 1.15fr;align-content:center;align-items:center}
  .brand-b .brand-img{align-self:center}
}
/* stories: product on its colour disc, no white box */
.story-bag img{background:none;border-radius:0;object-fit:contain;padding:4% 12%;filter:drop-shadow(0 26px 24px rgba(7,44,103,.25))}
.story-bag::before{width:78%;top:4%;right:2%}
@media (max-width:639px){
  .hero-art{max-width:420px}
  .h-side{width:40%}
}

.h-side{bottom:-3%;right:-2%;width:34%}
.brand-a .brand-img{aspect-ratio:1/1}
.brand-a .brand-img img{width:84%;height:100%;margin:0 auto}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .brand-pair{grid-template-columns:5fr 7fr}
  .brand-b{grid-template-columns:minmax(15rem,.9fr) 1.1fr}
  .brand-b .btn{white-space:nowrap}
}
.h-bag{left:42%}
.h-side{right:0;bottom:2%;width:28%}
@media (max-width:639px){.h-side{width:30%}}
@media (min-width:900px){
  .brand-pair{align-items:start}
  .brand-b{grid-template-columns:minmax(15rem,.8fr) 1.2fr;align-content:start;align-items:start}
  .brand-b .brand-img{align-self:start}
}
@media (min-width:900px){.brand-b{align-self:end}}


/* ---------- final visual polish: reference-led composition ---------- */
.hero{padding-top:clamp(3rem,5vw,5rem);padding-bottom:clamp(5rem,8vw,7.5rem)}
.hero-copy{max-width:43rem}
.hero h1{max-width:11ch}
.hero-art{max-width:660px;min-height:520px}
.sun{right:1%;top:3%;width:91%}
.h-bag{width:66%;left:45%;top:1%;filter:drop-shadow(0 34px 30px rgba(7,44,103,.3))}
.h-side{width:31%;right:1%;bottom:4%;box-shadow:0 24px 50px -26px rgba(7,44,103,.5)}

/* Let the showcase read as a visual collection before the copy. */
.pimg{aspect-ratio:4/3;margin-bottom:1.25rem}
.pcard h3{margin-bottom:.65rem}
.pcard p:not(.pmeta){font-size:1rem;line-height:1.55;margin-bottom:1.25rem}

/* Brand stories should feel like one editorial spread, not two cards. */
.story{gap:clamp(3rem,7vw,6rem)}
.story+.story{margin-top:clamp(2.5rem,5vw,4.5rem)}
.story-img{max-width:600px;aspect-ratio:4/3}
.story-img::before{width:54%;top:7%;right:4%}
.story-rev .story-img::before{left:4%;right:auto}
.story-bag img{padding:0 8%;filter:drop-shadow(0 30px 26px rgba(7,44,103,.24))}
.story-rev .story-img img{border-radius:var(--r)}
.story h3{font-size:clamp(2.8rem,5vw,4.8rem);margin-bottom:1rem}
.story p{font-size:1.125rem;line-height:1.65;max-width:30rem}

/* Give the approach and ecosystem the same editorial breathing room as the reference. */
.principles li{font-size:clamp(1.45rem,2.2vw,2rem)}
.eco li{font-size:clamp(1.35rem,2vw,1.85rem)}

@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,5rem)}
  .hero-art{justify-self:end}
  .story{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .story-rev .story-img{justify-self:end}
  .story-rev>div:last-child{padding-left:clamp(1rem,3vw,3rem)}
}
@media (max-width:899px){
  .hero-art{min-height:430px}
}
@media (max-width:639px){
  .hero-art{min-height:340px}
  .pimg{aspect-ratio:4/5}
  .story-img{aspect-ratio:4/3}
  .story h3{font-size:clamp(2.5rem,12vw,3.5rem)}
}
/* ---------- final type proportion fix ---------- */
.foot-tag .foot-line{display:block;white-space:nowrap}
@media (max-width:899px){
  .foot-top{grid-template-columns:1fr;align-items:start}
  .foot-tag{justify-self:start;max-width:14ch;font-size:clamp(2.4rem,8vw,3.6rem);align-self:start}
}
@media (max-width:639px){
  .hero h1{max-width:10ch}
  .display{max-width:12ch}
}



/* ---------- brand panel visual correction ---------- */
/* Both brand worlds use the same landscape image proportion; the product treatment remains different. */
.brand-img{aspect-ratio:4/3;background:var(--warm);border-radius:calc(var(--r) - 8px);overflow:hidden}
.brand-a .brand-img{aspect-ratio:4/3;background:var(--yellow);border-radius:calc(var(--r) - 8px);overflow:hidden}
.brand-a .brand-img::before{inset:8% 10%;width:auto;height:auto;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.58)}
.brand-a .brand-img img{width:76%;height:100%;margin:0 auto;object-fit:contain;position:relative}
.brand-b .brand-img{aspect-ratio:4/3;background:var(--warm);border-radius:calc(var(--r) - 8px);overflow:hidden}
.brand-b .brand-img img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.logo-bk{width:230px;height:auto;padding:0;background:transparent;border-radius:0}
@media (min-width:900px){
  .brand-b .brand-img{grid-column:2;grid-row:1/span 4}
}
@media (max-width:639px){
  .brand-img,.brand-a .brand-img,.brand-b .brand-img{aspect-ratio:4/3}
  .brand-a .brand-img img{width:72%}
}

/* Final Brand Stories typography match */
#stories #story-h{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
#stories .story h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;line-height:.96}
#stories .story p,#stories .story .link{font-family:var(--sans)}
#stories .story .link{font-weight:600;letter-spacing:0}