/* Intro splash — sun-drenched Noosa reveal */
.intro-splash{position:fixed;inset:0;z-index:9999;overflow:hidden;background:var(--ocean-900);display:flex;align-items:center;justify-content:center}
.intro-splash.done{pointer-events:none}
.intro-splash__bg{position:absolute;inset:0;z-index:0}
.intro-splash__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);animation:splashKen 2.6s var(--ease-out) forwards}
@keyframes splashKen{from{transform:scale(1.15)}to{transform:scale(1.02)}}
.intro-splash__wash{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,26,24,.32),rgba(28,26,24,.12) 40%,rgba(198,122,90,.14) 72%,rgba(28,26,24,.5));pointer-events:none}
.intro-splash__inner{position:relative;z-index:2;text-align:center;padding:0 24px}
.intro-splash__mark{font-family:var(--font-display);font-weight:500;font-size:clamp(42px,8vw,104px);color:var(--linen);letter-spacing:.02em;line-height:.98;text-shadow:0 3px 26px rgba(28,26,24,.45);opacity:0;transform:translateY(14px);animation:splashUp 1s var(--ease-out) .45s forwards}
.intro-splash__mark span{color:var(--gold-300);font-style:italic;margin:0 .1em;display:inline-block;opacity:1}
.intro-splash__mark small{display:block;font-family:var(--font-sans);font-weight:400;font-size:.2em;letter-spacing:.62em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:.85em;padding-left:.62em;opacity:0;animation:splashUp .8s var(--ease-out) .75s forwards}
.intro-splash__rule{display:block;width:0;height:1px;margin:1.5em auto 0;background:linear-gradient(90deg,transparent,var(--gold-300),transparent);animation:splashRule 1s var(--ease-out) 1.1s forwards}
@keyframes splashUp{to{opacity:1;transform:translateY(0)}}
@keyframes splashPlus{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes splashRule{to{width:min(320px,60vw)}}
.intro-splash.lift{transform:translateY(-100%);transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
@media(prefers-reduced-motion:reduce){.intro-splash{display:none}}

/* Blush & Bronze palette removed — theme.css now carries the single sage system. */
.intro{background:var(--surface-sand)}
.collection{background:var(--surface-sand)}
.wavebreak{position:relative;display:block;width:100%;height:clamp(48px,6vw,88px);line-height:0;overflow:hidden}
.wavebreak svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.wavebreak--sand{background:var(--surface-page)}
.wavebreak--page{background:var(--surface-sand)}
.wavebreak--inline{background:transparent;height:clamp(40px,5vw,72px);margin:clamp(-6px,-1vw,-14px) 0}
.wavebreak .w1{fill:none;stroke:var(--wave-blue-soft);stroke-width:7}
.wavebreak .w2{fill:none;stroke:var(--wave-blue);stroke-width:9}
.wavebreak--inline .w1{stroke-width:6;opacity:.7}
.wavebreak--inline .w2{stroke-width:8}
.wavebreak .w2{animation:waveDrift 9s ease-in-out infinite alternate}
.wavebreak .w1{animation:waveDrift 13s ease-in-out infinite alternate-reverse}
@keyframes waveDrift{0%{transform:translate(-4%,3px)}50%{transform:translate(0,-3px)}100%{transform:translate(4%,3px)}}
@media(prefers-reduced-motion:reduce){.wavebreak .w1,.wavebreak .w2{animation:none}}




/* ===== Curated maisons — calm editorial showcase ===== */
.gem-sec{background:var(--surface-sunken);padding:clamp(56px,9vh,100px) clamp(20px,5vw,64px)}
.gem__card{max-width:840px;margin:0 auto;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;gap:0;box-shadow:var(--shadow-sm)}
.gem__frame{flex:0 0 38%;aspect-ratio:1;overflow:hidden;align-self:stretch}
.gem__frame img{width:100%;height:100%;object-fit:cover}
.gem__content{flex:1;padding:clamp(28px,4vw,48px)}
.gem__eyebrow{display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.gem__name{font-family:var(--font-display);font-style:italic;font-size:clamp(24px,2.6vw,32px);color:var(--text-strong);margin:0 0 22px}
.gem__note{font-size:15px;color:var(--text-muted);line-height:1.7;margin:0 0 22px;max-width:36ch}
.gem__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong);padding-bottom:5px;border-bottom:1px solid var(--text-strong);transition:color .35s,border-color .35s}
.gem__card:hover .gem__link{color:var(--accent);border-color:var(--accent)}
@media(max-width:640px){.gem__card{flex-direction:column}.gem__frame{flex:none;width:100%;aspect-ratio:16/10}}
.maisons-sec{position:relative;overflow:hidden}
/* decorative radial wash removed — gradients are banned */
.maisons-sec>*{position:relative;z-index:1}
.maisons-sec{position:relative;background:var(--surface-page);padding:clamp(64px,10vh,130px) 0 clamp(40px,7vh,90px)}
.maisons__head{text-align:center;max-width:720px;margin:0 auto clamp(48px,7vh,84px)}









/* Scaled down from clamp(32px,4vw,56px) — that was sized for a half-width
   editorial column and overflows a third-width cell. */







/* ===== Hover-reveal — capability-gated, not width-gated =================== */
@media (hover:hover) and (pointer:fine){

  /* Frame becomes the positioning context, so the copy is lifted OUT of the
     flow and over the image. Card height is fixed by the media's aspect-ratio
     alone — the reveal is absolute, so hovering cannot reflow the grid. */
  

  

  

  
  
  
}
/* ===== Intro: thesis text (left) + collage (right) ===== */
.intro{padding:clamp(52px,8vh,110px) 0 clamp(30px,5vh,60px);background:var(--surface-page)}
.intro__grid{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,64px);display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.intro__head{text-align:left;margin:18px 0 30px;font-size:clamp(30px,4vw,58px)}
.intro__links{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.intro__soc{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--text-strong);transition:color .35s var(--ease-out)}
.intro__soc svg{width:19px;height:19px}
.intro__soc:hover{color:var(--accent)}
.intro__story{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-bottom:3px;border-bottom:1px solid currentColor}
.intro__story svg{width:17px;height:17px;transition:transform .4s var(--ease-out)}
.intro__story:hover svg{transform:translateX(6px)}
.intro__collage .collage{height:clamp(260px,30vw,420px);margin:0;max-width:none}
.intro__news{display:flex;flex-direction:column;gap:12px;margin-top:26px;max-width:420px}
.intro__news-title{font-family:var(--font-sans);font-size:13px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-strong);line-height:1.4;margin:0}
.intro__news-tag{font-family:var(--font-sans);font-style:normal;font-size:12px;font-weight:500;letter-spacing:.08em;color:var(--text-muted);line-height:1.5;margin:0}

/* Benefit list — the value carrier, so it gets the vertical weight.
   ~200px tall against the form row's 46px. Hairlines only, no bullets. */
.intro__perks{list-style:none;margin:10px 0 6px;padding:0;border-top:1px solid var(--line)}
.intro__perks li{font-family:var(--font-sans);font-size:16px;line-height:1.45;color:var(--text-body);padding:13px 2px;border-bottom:1px solid var(--line)}

.intro__news-fine{font-family:var(--font-sans);font-size:var(--text-caption);color:var(--text-faint);line-height:1.5;margin:2px 0 0}

/* Mobile: full width, single column. The block centres at <=860px, but the
   list stays left-aligned — centred text against a hairline rule reads as
   broken alignment, and every item is one line left-aligned. */
@media(max-width:860px){
  .intro__perks{width:100%;text-align:left}
}

/* 2x2 VARIANT — not enabled. At the block's 420px max-width each column is
   ~200px, which wraps three of the four items onto two lines and turns the
   hairlines into a ragged ladder. Only worth it if .intro__news is widened
   past ~640px; if you do that, uncomment this.
.intro__perks{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.intro__perks li:nth-child(-n+2){border-top:0}
@media(max-width:860px){.intro__perks{grid-template-columns:1fr}}
*/
.intro__news-row{display:flex;gap:10px}
.intro__news-row input{flex:1;min-width:0;height:46px;padding:0 15px;border:1px solid var(--line);background:var(--paper);font-family:var(--font-sans);font-size:14px;color:var(--text-body);border-radius:0}
.intro__news-row input:focus{outline:none;border-color:var(--ocean-700)}
.intro__news-row button{flex:0 0 auto;height:46px;padding:0 22px;border:none;cursor:pointer;background:var(--ocean-900);color:var(--linen);font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-radius:0;transition:background .3s}
.intro__news-row button:hover{background:var(--bronze-dk)}
@media(max-width:860px){.intro__grid{grid-template-columns:1fr;gap:8px}.intro__head{text-align:center;margin:14px auto 24px}.intro__links{justify-content:center}.intro__news{align-items:center;text-align:center}.intro__collage .collage{height:clamp(300px,72vw,420px)}}
/* ===== Collage section (moved up, right under hero) ===== */
.collage-sec{padding:clamp(48px,7vh,90px) 0 clamp(8px,2vh,24px);background:var(--surface-page)}

/* ===== Social proof band ===== */
.proof{position:relative;padding:clamp(40px,5vh,70px) 0 clamp(52px,7vh,88px);background:linear-gradient(180deg,var(--linen) 0%,var(--sand-100) 55%,var(--linen-2) 100%);overflow:hidden}
.proof::before{content:"";position:absolute;top:-12%;left:50%;transform:translateX(-50%);width:min(900px,90vw);height:60%;background:radial-gradient(ellipse at center,rgba(198,122,90,.16),transparent 68%);pointer-events:none}
.proof__inner{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
/* pop-up collage of posts */
.collage{position:relative;height:clamp(340px,46vw,560px);margin:0 auto clamp(48px,7vh,80px);max-width:1040px}
.collage__t{position:absolute;margin:0;overflow:hidden;background:var(--paper);padding:8px;box-shadow:var(--shadow-lg);border-radius:0;opacity:0;--px:0px;--py:0px;transform:scale(.6) rotate(var(--rot,0deg));transition:opacity .7s var(--ease-out),transform .75s cubic-bezier(.34,1.56,.64,1);transition-delay:var(--d,0s)}
.collage__t img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.collage.pop .collage__t{opacity:1;transform:translate(var(--px),var(--py)) scale(1) rotate(var(--rot,0deg));transition-duration:.5s}
.collage__t:hover{transform:scale(1.05) rotate(0deg)!important;z-index:20;box-shadow:var(--shadow-xl)}
.collage__t{transition-property:opacity,transform,box-shadow}
.collage__t--1{width:23%;aspect-ratio:4/5;left:2%;top:14%;--rot:-6deg;--d:0s;z-index:3}
.collage__t--2{width:20%;aspect-ratio:4/5;left:24%;top:0;--rot:4deg;--d:.08s;z-index:5}
.collage__t--3{width:27%;aspect-ratio:3/2;left:40%;top:22%;--rot:-3deg;--d:.16s;z-index:6}
.collage__t--4{width:19%;aspect-ratio:4/5;left:65%;top:2%;--rot:5deg;--d:.24s;z-index:4}
.collage__t--5{width:22%;aspect-ratio:3/2;left:20%;top:52%;--rot:3deg;--d:.32s;z-index:4}
.collage__t--6{width:20%;aspect-ratio:4/5;left:70%;top:44%;--rot:-5deg;--d:.4s;z-index:5}
.collage__t--7{width:16%;aspect-ratio:4/5;left:6%;top:66%;--rot:-4deg;--d:.46s;z-index:3}
.collage__cap{position:absolute;left:50%;top:auto;bottom:clamp(6px,3%,22px);transform:translateX(-50%);z-index:10;font-family:var(--font-display);font-style:italic;font-size:clamp(13px,1.5vw,19px);color:var(--text-strong);text-align:center;white-space:nowrap;background:var(--paper);padding:7px 16px;border-radius:0;box-shadow:var(--shadow-md);opacity:0;transition:opacity .6s .5s var(--ease-out)}
.collage.pop .collage__cap{opacity:1}
@media(max-width:680px){.collage{height:clamp(300px,88vw,440px);max-width:420px}.collage__cap{font-size:12px;padding:6px 12px;bottom:6px}}
.tst__head{position:relative;text-align:center;margin-bottom:clamp(22px,3.5vh,38px)}
.tst__title{margin-top:10px;font-size:clamp(24px,2.8vw,38px);color:var(--text-strong)}
/* side-peek testimonial carousel */
.tst{position:relative;max-width:920px;margin:0 auto;display:flex;align-items:center;gap:clamp(6px,2vw,18px)}
.tst__viewport{position:relative;flex:1;overflow:hidden;padding:10px 0}
.tst__track{display:flex;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.tst__card{position:relative;flex:0 0 100%;display:grid;grid-template-columns:1fr 1.15fr;min-height:clamp(210px,22vw,290px);margin:0;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);border-radius:0;box-shadow:0 22px 54px -30px rgba(24,42,54,.4);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;opacity:.35;transform:scale(.94);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.tst__card.is-active{opacity:1;transform:scale(1)}
.tst__media{position:relative;overflow:hidden;background:var(--sand-100)}
.tst__media img{width:100%;max-width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--ease-out)}
.tst__card.is-active .tst__media img{transform:scale(1)}
.tst__media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 60%,rgba(255,255,255,.5))}
.tst__body{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3vw,44px)}
/* Switzer, not --font-display: Julius Sans One has no lowercase, so a
   four-line testimonial set in it renders as a wall of capitals. Fixed 16px
   rather than a clamp — this is body copy now, not a display line. */
.tst__body p{position:relative;font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--ink);margin:0 0 clamp(16px,2.5vh,26px);text-wrap:pretty}
.tst__body cite{font-style:normal;display:flex;flex-direction:column;gap:4px}
.tst__name{font-family:var(--font-sans);font-size:clamp(15px,1.4vw,17px);letter-spacing:.02em;color:var(--accent)}
/* The display face earns its place here: three short uppercase words, where
   having no lowercase costs nothing and the contrast against the Switzer
   quote above is the point. */
.tst__loc{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.tst__arw{flex:0 0 auto;width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);border-radius:0;border:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);color:var(--text-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .4s var(--ease-out),color .4s var(--ease-out),border-color .4s var(--ease-out),transform .4s var(--ease-out)}
.tst__arw svg{width:22px;height:22px}
.tst__arw:hover{background:var(--accent);color:var(--linen);border-color:var(--accent);transform:scale(1.06)}
.tst__dots{display:flex;justify-content:center;gap:12px;margin-top:clamp(30px,4vh,46px)}
.tst__dots button{width:9px;height:9px;padding:0;border:none;border-radius:0;background:var(--sand-300);cursor:pointer;transition:background .3s,transform .3s,width .3s}
.tst__dots button.on{background:var(--accent);width:26px;border-radius:0}
@media(max-width:760px){.tst__card{grid-template-columns:1fr;grid-template-rows:200px auto}.tst__media::after{background:linear-gradient(to top,rgba(255,255,255,.5),transparent 45%)}}
@media(prefers-reduced-motion:reduce){.tst__track{transition:none}.tst__card{opacity:1;transform:none}.tst__media img{transform:none}}

/* Swim Style Noosa — premium landing.
   Adapts the CCC engine craft layer (reveals, footer FX, cursor) to the
   warm coastal palette. Motion is restrained: transform/opacity, long eases. */

*{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);overflow-x:hidden}
@media (hover:none){body{cursor:auto}}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px}
::selection{background:var(--terracotta-300);color:var(--ink-900)}

/* ---- eyebrow / display helpers ---- */
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted)}
.eyebrow.on-dark{color:var(--gold-300)}
.eyebrow.accent{color:var(--accent)}
.disp{font-family:var(--font-display);font-weight:600;font-optical-sizing:auto;line-height:1.02;letter-spacing:-.015em;color:var(--text-strong)}
.serif-i{font-family:var(--font-display);font-style:italic}

/* ---- custom cursor (disabled) ---- */
.cur,.cur-r{display:none!important}

/* ---- scroll progress ---- */
.sprog{position:fixed;top:0;left:0;height:2px;width:0;z-index:9998;background:var(--gold-500)}

/* ---- reveal primitives ---- */
[data-reveal]{opacity:0;transform:translateY(30px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.split-line{display:block;overflow:hidden;padding-bottom:.04em}
.split-line>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease-out)}
.split-line.in>span{transform:none}
[data-reveal-delay="1"].in,[data-reveal-delay="1"].in>span{transition-delay:.12s}
[data-reveal-delay="2"].in,[data-reveal-delay="2"].in>span{transition-delay:.24s}
[data-reveal-delay="3"].in,[data-reveal-delay="3"].in>span{transition-delay:.36s}

/* ============ NAV ============ */
/* padding reads --nav-pad (declared below) so the bar's vertical rhythm has ONE
   source. It used to be a literal 22px here and a separate --nav-pad:22px below,
   which meant the mobile override had to be written twice and could drift. */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:box-shadow .5s var(--ease-out),padding .5s var(--ease-out);padding:var(--nav-pad,22px) 0;background:var(--blush);border-bottom:1px solid var(--rule)}
.nav__row{display:flex;align-items:center;gap:16px}
.nav__links{flex:1 1 0;display:flex;flex-wrap:nowrap;gap:44px;align-items:center}
/* Hover is a bronze rule, not a colour change. Transparent border by default
   so nothing shifts. white-space:nowrap keeps the row on one line. */
.nav__links a{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap;padding:6px 0 3px;border-bottom:1px solid transparent;transition:border-bottom-color .2s ease}

.nav__links a:hover,.nav__links a:focus-visible{border-bottom-color:var(--bronze)}

.navdrop{position:relative;display:flex;align-items:center}
.navdrop>a{padding:6px 0 3px}
/* ===== NAVDROP ============================================================
   NOTE: this comment was missing its opening "/*". Without it the parser read
   the "=====" line as the start of a selector and swallowed everything up to
   the next brace — which was `.nav{--nav-pad:22px}` below — so that rule was
   dropped as an invalid selector and --nav-pad was NEVER set. Two things
   depended on it and were silently dead: the negative margin-block that
   stretches .nav__links, and any top:calc(100% + var(--nav-pad)).

   Stretching .nav__links and .navdrop to the full nav-row height is what lets
   top:calc(100% + var(--nav-pad)) land exactly on the header's bottom border,
   so the panel reads as the header unfolding rather than a box appearing.
   left:0 still anchors it to the trigger word, since .navdrop wraps only the
   trigger (the panel is absolute and out of flow). */
.nav{--nav-pad:22px}
/* Negative block margin makes .nav__links span the nav's --nav-pad as well.
   Without it .navdrop stretches only to the nav CONTENT box, so top:100% lands
   inside the bar and the panel covers the nav row. */
.nav__links{align-self:stretch;margin-block:calc(-1 * var(--nav-pad))}
.navdrop{align-self:stretch}

.navdrop__menu{position:absolute;top:100%;left:0;margin:0;
  width:max-content;min-width:220px;
  overflow:hidden;                 /* outer clips, inner slides out from under the nav */
  background:var(--paper);border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;
  visibility:hidden;transition:visibility 0s linear .34s}
.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu,
.navdrop[data-open] .navdrop__menu,
.navdrop.is-open .navdrop__menu{visibility:visible;transition-delay:0s}

.navdrop__slide{transform:translateY(-14px);opacity:0;
  transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .24s cubic-bezier(.22,1,.36,1)}
.navdrop:hover .navdrop__slide,
.navdrop:focus-within .navdrop__slide,
.navdrop[data-open] .navdrop__slide,
.navdrop.is-open .navdrop__slide{transform:translateY(0);opacity:1}
.navdrop__inner{padding:22px 0}
.navdrop__links{padding:0}

/* Items: sans, not the display serif. Nav is information. */
.navdrop__links a{display:block;font-family:var(--font-sans);font-size:13.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink);padding:11px 24px;border-radius:0;
  transition:background .2s ease}
.navdrop__links a:hover,.navdrop__links a:focus-visible{background:var(--blush);color:var(--ink);outline:none}
.navdrop__links a::after{display:none}



/* Member zone: deeper ground, hairline rule, nothing else. */
.navdrop__member{border-left:1px solid var(--line);background:var(--surface-sand);
  padding:26px 26px 28px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.ndm__label{font-family:var(--font-sans);font-size:11px;letter-spacing:var(--tracking-widest);
  text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}
.ndm__title{font-family:var(--font-display);font-size:26px;font-weight:400;-webkit-text-stroke:0;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--ink);margin:0 0 10px}
.ndm__line{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--text-muted);margin:0 0 20px;max-width:26ch}
button.ndm__cta{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0 0 3px;margin:0}

/* Mobile: a full-screen sheet, member zone at the bottom. */
@media(max-width:860px){
  .navdrop{position:static}
  .navdrop__menu{position:fixed;top:0;left:0;right:0;bottom:0;width:auto;
    border:0;border-radius:0;box-shadow:none;
    background:var(--surface-raised);
    grid-template-rows:1fr;opacity:0;overflow:auto;
    transition:opacity 260ms var(--ease-out) 260ms}
  .navdrop:hover .navdrop__menu,
  .navdrop:focus-within .navdrop__menu,
  .navdrop.is-open .navdrop__menu{opacity:1}
  .navdrop__inner{grid-template-columns:1fr;min-height:100%;align-content:start;
    padding-top:calc(var(--nav-h) + 24px)}
  .navdrop__links a{font-size:17px;padding:16px 24px}
  .navdrop__member{border-left:0;border-top:1px solid var(--line);margin-top:auto;padding:28px 24px 34px}
}

@media(prefers-reduced-motion:reduce){
  .navdrop__menu{transition:none}
  .navdrop__links a{opacity:1;transform:none;transition:background 120ms var(--ease-out),color 120ms var(--ease-out)}
  .navdrop__links a:nth-child(n){transition-delay:0ms}
}
.nav__actions{flex:1 1 0;justify-content:flex-end;display:flex;gap:14px;align-items:center}
/* Lockup at 72% of the original size — two steps, x.88 then x.82
   (26/3.2vw/42 -> 22.88/2.816vw/36.96 -> 18.76/2.309vw/30.31).
   Tracking is in em, so .18em is already proportional and scales with it — the
   mark gets smaller without tightening. Same reason the period margins below
   need no re-solve: they are em values against an unchanged tracking figure.
   The bar has no fixed height (nav-offset.js measures the real element), so
   what the mark gives back comes straight off the bar. */
.nav__mark{flex:0 0 auto;font-family:var(--font-wordmark);font-weight:400;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(18.76px,2.309vw,30.31px);color:var(--ink-900);text-align:center;line-height:1.05;white-space:nowrap;transition:color .5s}
/* Full stop, solved from Julius Sans One's own metrics (upm 1000):
     M   adv .940  lsb .064  rsb .064
     S   adv .547  lsb .057  rsb .077
     .   adv .113  lsb .030  rsb .030   ink .053 wide, yMin 0 -> on the baseline
   A period between capitals at wide tracking has to read as one mark, not as
   three words, so its optical gap is 30% of an ordinary inter-cap gap. The
   ratio is what is held constant, NOT the margin: tracking changes at each
   breakpoint, so the margins are re-solved against it every time (see the
   768px and 1024px blocks, and .foot__bar .mk).
     ordinary gap = M rsb .064 + tracking + S lsb .057
     before = M rsb + tracking + period lsb .030 + ml = ordinary x .30
     after  = period rsb .030 + S lsb .057 + mr     = ordinary x .30
   The span carries letter-spacing:0, so no tracking follows the period.
   No rise: the hyphen needed lifting to the cap centre, a full stop does not.
   No size change either — the period's ink is .053em and the font's stem is
   .048em, so at 1em the dot is already exactly one stem wide. */
.nav__mark span{color:inherit;opacity:1;font-weight:400;font-size:1em;letter-spacing:0;margin-left:-.184em;margin-right:.003em}
.nav__mark small{display:block;font-size:.5em;letter-spacing:.36em;margin-top:3px}
/* Both wordmarks render grayscale-antialiased. Julius Sans One is a hairline
   face — the stem is .048em, about 1.2px at the 26px mobile lockup. Subpixel
   (LCD) antialiasing paints a stem that narrow into its individual R/G/B
   channels rather than into grey, so each letter picks up a blue or pink cast
   depending on where its stem falls on the pixel grid. Nothing in the cascade
   assigns those colours; there is exactly one colour declaration per mark.
   -webkit-font-smoothing covers macOS and -moz-osx-font-smoothing Firefox;
   translateZ(0) is what actually turns LCD text off in Chrome on Windows,
   where the smoothing properties are ignored. Both marks are flex items, so
   they are blockified and the transform applies. */
.nav__mark,
.foot__bar .mk{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}
/* 38px hit area on desktop, where the wordmark (not the icons) sets the bar
   height. Dropped to 34px at <=768px — see the mobile block. */
.ibtn{width:38px;height:38px;display:grid;place-items:center;border-radius:0;color:var(--text-strong);transition:color .3s,background .3s}
/* Search, wishlist and bag stay bare — no container, no wash. */
.ibtn:hover{background:none;color:var(--bronze)}
/* Butt caps + miter joins: sharper terminals than the default round caps. */
.ibtn svg{width:22px;height:22px;stroke-linecap:butt;stroke-linejoin:miter;fill:none}
.cartdot{position:relative}
.cartdot b{position:absolute;top:-4px;right:-6px;min-width:14px;height:14px;padding:0 3px;border-radius:0;background:var(--accent);color:var(--linen);font-size:8px;font-weight:600;display:grid;place-items:center;font-family:var(--font-sans)}

/* ============ HERO ============ */



@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}




.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--linen);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.scrollcue i{width:1px;height:44px;background:linear-gradient(var(--gold-300),transparent);animation:cue 2.2s var(--ease-inout) infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:500;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:16px 34px;border-radius:0;cursor:pointer;border:1px solid transparent;transition:background .3s var(--ease-out),color .3s,transform .3s,box-shadow .3s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}
.btn--linen{background:var(--linen);color:var(--ocean-900)}
.btn--linen:hover{background:#fff;box-shadow:var(--shadow-lg)}
/* Hero CTA. Was a plain outlined rectangle with a colour swap on hover; now a
   hairline frame that fills by wipe. The fill is a ::before scaled from the
   left rather than a background transition, so it reads as a sweep. Label is
   wrapped in a span to sit above it — a bare text node can't be z-indexed. */
.btn--wipe{position:relative;overflow:hidden;isolation:isolate;
  padding:18px 42px;background:transparent;color:var(--linen);
  border:1px solid color-mix(in oklch,var(--linen) 60%,transparent);
  border-radius:0;
  transition:color 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.btn--wipe::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--linen);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 200ms var(--ease-out)}
.btn--wipe:hover,.btn--wipe:focus-visible{color:var(--ocean-900);border-color:var(--linen)}
.btn--wipe:hover::before,.btn--wipe:focus-visible::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .btn--wipe::before{transition:none}
}

.btn--ghost{padding:0;border:0}
.btn--ghost span{border-bottom:1px solid currentColor;padding-bottom:3px}
.btn--ghost:hover{color:var(--accent)}

/* ============ THESIS ============ */
.thesis{padding:clamp(100px,16vh,200px) clamp(20px,5vw,64px);text-align:center}
.thesis__link{display:block;color:inherit}
.thesis__link .disp em{transition:color .4s var(--ease-out)}
.thesis__cta{display:inline-block;margin-top:28px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--line-strong);padding-bottom:4px;transition:color .3s,border-color .3s}
.thesis__link:hover .thesis__cta{color:var(--accent);border-color:var(--accent)}
.thesis .disp{font-size:clamp(32px,5vw,68px);max-width:16ch;margin:22px auto 0}
.thesis .disp em{color:var(--accent)}

/* ============ FEATURE (brands) ============ */
.feature{padding:0 0 clamp(60px,10vh,120px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(50px,8vh,96px) 0}
.frow:nth-child(even) .fimg{order:2}
.fimg{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--sand-100);border-radius:0}
.fimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out);will-change:transform}
.frow:hover .fimg img{transform:scale(1.05)}
.fnum{font-family:var(--font-display);font-size:20px;color:var(--gold-600)}
.ftext h2{font-size:clamp(34px,4.4vw,60px);margin:14px 0 18px}
.ftext p{font-size:17px;color:var(--text-muted);line-height:1.7;max-width:44ch;margin-bottom:26px}

/* ============ COLLECTION ============ */
.collection{padding:clamp(70px,10vh,120px) 0;background:var(--linen-2)}
.chead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(34px,5vh,60px);gap:20px;flex-wrap:wrap}
.chead h2{font-size:clamp(34px,4.6vw,60px)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,32px)}
.prod{cursor:pointer}
.prod__img{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--sand-100);border-radius:0}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);will-change:transform}
.prod:hover .prod__img img{transform:scale(1.06)}
.prod__flag{position:absolute;top:12px;left:12px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px 4px;border-radius:0;background:var(--terracotta-600);color:var(--linen)}
.prod__flag.gold{background:transparent;border:1px solid var(--gold-500);color:var(--gold-600)}
.prod__qv{position:absolute;left:12px;right:12px;bottom:12px;text-align:center;background:color-mix(in oklch,var(--linen) 92%,transparent);backdrop-filter:blur(6px);padding:12px;border-radius:0;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-900)}
.prod:hover .prod__qv{opacity:1;transform:none}
.prod__meta{padding-top:15px;text-align:center}
.prod__brand{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.prod__name{font-family:var(--font-display);font-size:23px;color:var(--text-strong);line-height:1.1;margin-bottom:6px}
.prod__price{font-size:13px;letter-spacing:.04em;color:var(--text-muted)}
.prod__price s{color:var(--text-faint);margin-right:8px}
.prod__price b{color:var(--sale);font-weight:400}

/* ============ SERVICE ============ */
.service{display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch;background:var(--surface-sand)}
.service__media{position:relative;overflow:hidden;min-height:540px}
.service__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.service__media figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;font-family:var(--font-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--linen);background:linear-gradient(to top,rgba(28,26,24,.72),transparent)}
.service__body{align-self:center;padding:clamp(60px,9vh,116px) clamp(28px,5vw,88px);max-width:760px}
.service h2{color:var(--text-strong);font-size:clamp(30px,3.7vw,52px);max-width:15ch;margin:18px 0 0}
.service__lead{color:var(--text-muted);font-size:17px;line-height:1.72;max-width:44ch;margin:22px 0 0}
.scols{display:grid;grid-template-columns:1fr;gap:0;margin:clamp(32px,5vh,52px) 0 clamp(30px,4vh,44px)}
.srow{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line)}
.srow:last-child{border-bottom:1px solid var(--line)}
.snum{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--gold-600)}
.scols h3{font-family:var(--font-display);font-size:26px;color:var(--text-strong);margin:0 0 10px}
.scols p{color:var(--text-muted);font-size:15.5px;line-height:1.7;margin:0}
.scols .num{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* ============ TESTIMONIALS ============ */
.quotes{padding:clamp(80px,12vh,150px) clamp(20px,5vw,64px);text-align:center}
.qtrack{display:flex;gap:clamp(40px,6vw,90px);margin-top:56px;align-items:flex-start}
.quote{flex:1}
.quote p{font-family:var(--font-display);font-style:italic;font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--text-strong)}
.quote .who{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-top:18px}

/* ============ FOOTER ============ */
footer{position:relative;overflow:hidden;background:var(--ink);color:var(--text-on-dark-muted)}
50%{transform:translateX(4%) scaleY(1.16)}}
18%{opacity:.9}80%{opacity:.5}100%{transform:translateY(-96px) scale(1);opacity:0}}
footer>*{position:relative;z-index:1}
.foot__top{padding:clamp(70px,10vh,120px) clamp(20px,5vw,64px) 60px;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.foot__news h2{color:var(--linen);font-size:clamp(28px,3vw,40px);max-width:16ch;margin:0 0 26px}
.newsrow{display:flex;gap:16px;align-items:flex-end;max-width:460px}
.newsrow input{flex:1;background:transparent;border:0;border-bottom:1px solid var(--line-on-dark);color:var(--linen);font-family:var(--font-sans);font-size:15px;padding:10px 2px;outline:none}
.newsrow input::placeholder{color:var(--text-faint)}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;font-size:13px}
.foot__cols a{display:block;color:var(--text-on-dark-muted);padding:6px 0;letter-spacing:.05em;transition:color .3s}
.foot__cols a:hover{color:var(--gold-300)}
.foot__bar{border-top:1px solid var(--line-on-dark);padding:26px clamp(20px,5vw,64px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
/* Same lockup as .nav__mark, set at footer scale. Tracking stays wider than
   the nav's because the type is smaller, so the period is re-solved against
   it: .30em tracking -> ordinary gap .421em -> target .126em each side. */
.foot__bar .mk{font-family:var(--font-wordmark);font-weight:400;letter-spacing:.3em;text-transform:uppercase;font-size:11.55px;line-height:1.05;text-align:left;color:var(--linen)}
.foot__bar .mk span{color:inherit;font-weight:400;font-size:1em;letter-spacing:0;margin-left:-.268em;margin-right:.039em}
.foot__bar .mk small{display:block;font-size:.5em;letter-spacing:.36em;margin-top:2px}
.foot__soc{display:flex;gap:14px;align-items:center}
.foot__soc svg{width:18px;height:18px;stroke:var(--text-on-dark-muted);transition:stroke .3s}
.foot__soc a:hover svg{stroke:var(--gold-300)}
.foot__handle{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-dark-muted);transition:color .3s}
.foot__handle:hover{color:var(--gold-300)}
.foot__addr{font-size:11px;letter-spacing:.08em;color:var(--text-faint)}

/* ============ POPUP ============ */

@media(max-width:1024px){.nav__mark{font-size:18.76px;letter-spacing:.2em}
  /* tracking .20em -> ordinary gap .321em -> target .096em each side */
  .nav__mark span{margin-left:-.198em;margin-right:.009em}.pgrid{grid-template-columns:repeat(2,1fr)}.frow,.foot__top,.qtrack,.service,.contact__inner{grid-template-columns:1fr;display:grid}.service__media{min-height:320px}.qtrack{gap:40px}.frow:nth-child(even) .fimg{order:0}.nav__links{display:none}.insta__grid{grid-template-columns:repeat(3,1fr)}}
.insta{padding:clamp(80px,12vh,140px) clamp(20px,5vw,64px);background:var(--surface-sand)}
.insta__head{text-align:center;max-width:660px;margin:0 auto clamp(40px,6vh,60px)}
.insta__handle{display:block;font-family:var(--font-display);font-size:clamp(30px,3.6vw,48px);color:var(--text-strong);margin:12px 0 8px;transition:color .3s}
.insta__handle:hover{color:var(--accent)}
.insta__stats{font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:0 0 26px}
.insta__stats b{color:var(--text-strong);font-weight:600}
.insta__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:1320px;margin:0 auto}
.insta__tile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sand-100);border-radius:0}
.insta__tile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.insta__tile:hover img{transform:scale(1.06)}
.insta__tile::after{content:"";position:absolute;inset:0;background:rgba(28,26,24,0);transition:background .35s}
.insta__tile:hover::after{background:rgba(28,26,24,.28)}
.insta__ic{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .35s;color:var(--linen);z-index:2}
.insta__ic svg{width:26px;height:26px}
.insta__tile:hover .insta__ic{opacity:1}
@media(prefers-reduced-motion:reduce){.scrollcue i{animation:none}[data-reveal],.split-line>span{opacity:1!important;transform:none!important}}
/* ============ CONTACT ============ */
.contact{background:var(--linen);padding:clamp(72px,10vh,130px) clamp(20px,5vw,64px)}
.contact__inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
.contact__img{aspect-ratio:4/5;overflow:hidden;border-radius:0;background:var(--sand-100)}
.contact__img img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.contact__mk{font-family:var(--font-sans);font-weight:300;letter-spacing:.3em;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);color:var(--text-strong)}
.contact h2{font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);color:var(--text-strong);margin:26px 0 8px}
.contact__addr{font-family:var(--font-sans);font-style:normal;font-size:16px;line-height:1.7;color:var(--text-muted);margin:0}
.contact__touch{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.contact__touch h3{font-family:var(--font-display);font-size:22px;color:var(--text-strong);margin:0 0 16px}
.contact__row{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:16px;padding:6px 0}
.contact__row svg{width:18px;height:18px;stroke:var(--accent);fill:none;flex:0 0 auto}
.contact__row a{color:var(--text-muted)}
.contact__row a:hover{color:var(--accent)}
@media(max-width:960px){.contact__inner{grid-template-columns:1fr;gap:30px}.contact__img{aspect-ratio:3/2}}

/* ===== Member list modal ================================================= */
/* The trigger is a <button> wearing the .intro__story link styling, so it has
   to shed the UA button chrome to sit identically beside "Read our story". */
button.intro__story{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0 0 3px;margin:0;line-height:inherit}

.mm{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:24px}
.mm[hidden]{display:none}
.mm__backdrop{position:absolute;inset:0;background:rgba(28,26,24,.55);opacity:0;transition:opacity 240ms var(--ease-out)}
.mm.is-open .mm__backdrop{opacity:1}
.mm__panel{position:relative;width:min(430px,100%);background:var(--paper);border-radius:0;
  padding:clamp(28px,4vw,40px);box-shadow:var(--shadow-lg);outline:none;
  opacity:0;transform:translateY(8px);
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.mm.is-open .mm__panel{opacity:1;transform:none}
.mm__x{position:absolute;top:12px;right:12px;width:38px;height:38px;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--text-muted);border-radius:0;transition:color .3s,background .3s}
.mm__x:hover{color:var(--accent);background:var(--sand-100)}
.mm__x svg{width:20px;height:20px;stroke-linecap:butt}
/* UI chrome (modals, popovers, forms) is set in the sans. The display serif
   is reserved for editorial content. */
/* Display face, same trap as .hero .card-title: the global ".mm__title {
   font-family: var(--font-display) }" further down is 0,1,0 and this rule is
   too, but it came first, so the LAST one should have won — except the
   firstvisit variant below is 0,2,0 and overrode both. Both are now explicit.
   Julius Sans One has no bold: weight 400, no synthesised stroke, tracking
   carries the weight. Size is unchanged. */
.mm__title{font-family:var(--font-display);font-size:26px;font-weight:400;-webkit-text-stroke:0;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.2;color:var(--ink);margin:0 0 12px;max-width:20ch}
.mm__body{font-family:var(--font-sans);font-size:14px;line-height:var(--leading-body);color:var(--text-muted);margin:0 0 22px}
.mm__form{display:flex;gap:10px}
.mm__form input{flex:1;min-width:0;height:46px;padding:0 15px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--font-sans);font-size:14px;color:var(--text-body);border-radius:0}
.mm__form input:focus{outline:none;border-color:var(--ocean-700)}
.mm__form button{flex:0 0 auto;height:46px;padding:0 22px;border:none;cursor:pointer;background:var(--ocean-900);
  color:var(--linen);font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;border-radius:0;transition:background .3s}
.mm__form button:hover{background:var(--bronze-dk)}

/* Mobile: a real bottom sheet, full width, not a shrunken desktop dialog. */
@media(max-width:640px){
  .mm{place-items:end stretch;padding:0}
  .mm__panel{width:100%;max-width:none;border-radius:0;transform:translateY(16px);
    padding:30px 20px calc(30px + env(safe-area-inset-bottom,0px))}
  .mm.is-open .mm__panel{transform:none}
  .mm__form{flex-direction:column}
  .mm__form button{height:48px}
}

@media(prefers-reduced-motion:reduce){
  .mm__backdrop,.mm__panel{transition:none}
  .mm__panel{transform:none}
}

/* ===== Scrolled header state ==============================================
   .solid was toggled by script on every page with no CSS responding to it.
   The header floats over a photograph, so past the hero it needs ground. */
.nav{transition:background 200ms var(--ease-out),box-shadow 200ms var(--ease-out),padding .5s var(--ease-out)}
.nav.solid,.nav.is-sheet{background:var(--blush);box-shadow:var(--shadow-sm)}

/* ===== Hamburger ==========================================================
   Two lines, not three. 1px, to match the 1px nav icon set. */
.nav__burger{display:none;width:38px;height:38px;padding:0;margin:0;border:0;background:none;cursor:pointer;
  position:relative;color:var(--text-strong);border-radius:0;transition:color .3s,background .3s}
.nav__burger:hover{color:var(--accent);background:var(--sand-100)}
.nav__burger span{position:absolute;left:9px;width:20px;height:1px;background:currentColor;
  transition:transform 200ms var(--ease-out),top 200ms var(--ease-out)}
.nav__burger span:nth-child(1){top:16px}
.nav__burger span:nth-child(2){top:22px}
.nav__burger.is-x span{top:19px}
.nav__burger.is-x span:nth-child(1){transform:rotate(45deg)}
.nav__burger.is-x span:nth-child(2){transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.nav__burger span{transition:none}}

/* ===== The sheet ==========================================================
   Full screen under the header, which stays put so the close control never
   moves. z-index below .nav (200) for exactly that reason. */
.sheet{position:fixed;inset:0;z-index:190;display:block}
.sheet[hidden]{display:none}
.sheet__inner{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--surface-raised);
  padding:calc(var(--nav-h) + 26px) 24px calc(34px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;outline:none;
  opacity:0;transform:translateY(100%);
  transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.sheet.is-open .sheet__inner{opacity:1;transform:none}

.sheet__nav{display:flex;flex-direction:column}
.sheet__group{display:flex;flex-direction:column}
.sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font-family:var(--font-display);font-size:28px;font-weight:var(--weight-medium);line-height:1.2;
  color:var(--text-strong);text-decoration:none;text-align:left;
  background:none;border:0;cursor:pointer;padding:18px 0;margin:0}
.sheet__top svg{width:22px;height:22px;flex:0 0 auto;transition:transform 200ms var(--ease-out)}
.sheet__group.is-open .sheet__top svg{transform:rotate(180deg)}

/* Same 0fr -> 1fr expansion as the desktop mega panels, so the motion matches. */
.sheet__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms var(--ease-out)}
.sheet__group.is-open .sheet__sub{grid-template-rows:1fr}
.sheet__subin{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.sheet__subin a{font-family:var(--font-sans);font-size:16px;letter-spacing:.04em;color:var(--text-body);
  text-decoration:none;padding:12px 0 12px 18px;border-left:1px solid var(--line)}
.sheet__subin a:active{color:var(--text-strong)}

.sheet__rule{height:1px;background:var(--line);margin:22px 0 0}
.sheet__member{border-left:0;background:transparent;padding:26px 0 6px}
.sheet__foot{margin-top:auto;padding-top:30px}
.sheet__soc{display:flex;gap:22px;margin-bottom:16px}
.sheet__soc a{font-family:var(--font-sans);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-strong);text-decoration:none}
.sheet__addr{font-family:var(--font-sans);font-size:13px;line-height:1.6;color:var(--text-muted);margin:0 0 4px}
.sheet__tel{font-family:var(--font-sans);font-size:13px;color:var(--text-muted);text-decoration:none}

@media(prefers-reduced-motion:reduce){
  .sheet__inner{transition:none;transform:none}
  .sheet__sub,.sheet__top svg{transition:none}
}

/* Under 1024px: desktop links out, hamburger in, sheet available. Raised
   from 960 because 13px/.16em type at a 44px gap needs more room and must
   never wrap to a second line. */
@media(max-width:1024px){
  .nav__burger{display:block}
  .nav__links{display:none}
  .nav__row{gap:10px}

  /* ---- Bar height in the burger layout ----------------------------------
     Below 1024 the wordmark is ~22px tall and no longer the tallest thing in
     the row: the 38px controls are, which is why shrinking the mark alone
     left the bar at 83px. This is the right boundary for the fix rather than
     768 — it is exactly where the links go and the burger arrives, so the
     whole burger range gets one bar height instead of the controls stepping
     38 -> 34 mid-range for no visible reason.
     34px keeps the control above the 32px floor for a nav target, and
     --nav-pad takes the same x.82 as the wordmark (22 -> 18). Row = 34px,
     bar = 34 + 2*18 + 1px border = 71px. */
  .nav{--nav-pad:18px}
  /* Scoped to .nav__actions so .ibtn outside the bar keeps its own size. */
  .nav__actions .ibtn{width:34px;height:34px}
  /* Same control family — left at 38px it would hold the bar up on its own. */
  .nav__burger{width:34px;height:34px}
  /* Bars re-centred on the 34px box: 20px wide -> left (34-20)/2 = 7px, and
     the 6px gap re-centred on 17px -> 14px / 20px. */
  .nav__burger span{left:7px}
  .nav__burger span:nth-child(1){top:14px}
  .nav__burger span:nth-child(2){top:20px}
  .nav__burger.is-x span{top:17px}
}
/* Above it the sheet can never open, so keep it out of the a11y tree. */
@media(min-width:1025px){
  .sheet{display:none!important}
}

/* ===== Account popover =====================================================
   Anchored under the icon, not centred on screen. Same motion language as the
   dropdown: grid 0fr -> 1fr with a fade, opaque ground, hairline, --shadow-lg. */
.acct{position:relative;display:inline-flex}
.acct__pop{position:absolute;top:calc(100% + 12px);right:0;z-index:210;
  width:max-content;max-width:min(300px,calc(100vw - 32px));
  display:grid;grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden;
  background:var(--surface-raised);border:1px solid var(--line);
  border-radius:0;box-shadow:var(--shadow-lg);
  transition:grid-template-rows 260ms var(--ease-out),opacity 260ms var(--ease-out)}
.acct__pop[hidden]{display:none}
.acct__pop.is-open{grid-template-rows:1fr;opacity:1;pointer-events:auto}
.acct__in{min-height:0;overflow:hidden;padding:22px 24px 24px}
.acct__title{font-family:var(--font-sans);font-size:20px;font-weight:var(--weight-semibold);letter-spacing:-.01em;
  line-height:1.15;color:var(--text-strong);margin:0 0 8px}
.acct__line{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--text-muted);margin:0 0 18px}
button.acct__cta{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;padding:0 0 3px;margin:0}
@media(prefers-reduced-motion:reduce){.acct__pop{transition:none}}





/* Mobile: the panel stacks under the headline at full width. The hero also
   stops being a fixed 100vh box, or the taller content would be clipped by
   its own overflow:hidden. */

/* Dismiss link on the first-visit popup. */
.mm__dismiss{display:block;margin:16px auto 0;padding:4px;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:12px;letter-spacing:.06em;color:var(--text-faint);
  text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease-out)}
.mm__dismiss:hover{color:var(--text-muted)}

/* ===== First-visit popup — its own visual treatment =======================
   Scoped to [data-firstvisit] so the join modal keeps the shared .mm look.
   Trigger logic, data-news handler and email capture are untouched. */
.mm[data-firstvisit]{
  --fv-bg:#FFFFFF; --fv-text:var(--ink); --fv-muted:var(--muted);
  --fv-rule:var(--rule); --fv-placeholder:var(--muted); --fv-btn-hover:var(--bronze-dk);
}
.mm[data-firstvisit] .mm__panel{
  width:100%;max-width:448px;padding:52px 44px 34px;
  background:var(--fv-bg);color:var(--fv-text);
  border:0;border-radius:0;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;
  text-align:left}

.mm[data-firstvisit] .mm__title{
  font-family:var(--font-display);font-size:21px;line-height:1.2;font-weight:400;
  -webkit-text-stroke:0;letter-spacing:.08em;text-transform:uppercase;color:var(--fv-text);
  margin:0;max-width:none}
/* Two spans, two lines — the heading cannot reach a third. */
.mm[data-firstvisit] .mm__title span{display:block}
/* The amount, in bronze. A <b> rather than a <span>, or the rule above would
   break it onto its own line. */
.mm[data-firstvisit] .mm__amt{color:var(--bronze);font-weight:inherit}

.mm[data-firstvisit] .mm__body{
  font-size:14px;line-height:1.5;color:var(--fv-muted);
  margin:12px 0 0;max-width:33ch}

.mm[data-firstvisit] .mm__form{display:block;margin-top:30px}
/* Four stacked fields now, not one: the underline inputs need air between them
   or the rules read as a single ruled block. input+input, so the first field
   keeps sitting tight under the sub-copy. */
.mm[data-firstvisit] .mm__form input + input{margin-top:14px}
/* Underline only: no box, no background, no side or top borders. */
.mm[data-firstvisit] .mm__form input{
  width:100%;height:44px;padding:0;font-size:14px;font-family:inherit;color:var(--fv-text);
  background:transparent;border:0;border-bottom:1px solid var(--fv-rule);border-radius:0;
  transition:border-bottom-color .2s ease}
.mm[data-firstvisit] .mm__form input::placeholder{color:var(--fv-placeholder)}
.mm[data-firstvisit] .mm__form input:focus{
  outline:none;box-shadow:none;border-bottom-color:var(--fv-text)}

.mm[data-firstvisit] .mm__form button{
  display:block;width:100%;height:48px;margin-top:22px;padding:0;
  background:var(--fv-text);color:var(--fv-bg);border:0;border-radius:0;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  transition:background .2s ease}
.mm[data-firstvisit] .mm__form button:hover{background:var(--fv-btn-hover)}

/* The consent notice, directly above the Join button: pressing Join IS the
   consent here, exactly as on /loyalty, so the sentence has to be on screen
   before it is pressed. Stored verbatim as CONSENT_TEXT (capture.js); the
   markup lives in each shell's [data-firstvisit] block. Colour is the body
   ink at reduced size rather than --fv-muted: this is a legal notice on a
   white panel and has to clear 4.5:1, which the muted grey does not at
   11.5px. */
.mm[data-firstvisit] .mm__fineprint{
  margin:18px 0 0;font-size:11.5px;line-height:1.5;color:var(--fv-text)}
.mm[data-firstvisit] .mm__fineprint a{
  color:var(--fv-text);text-decoration:underline;text-underline-offset:2px}

.mm[data-firstvisit] .mm__dismiss{
  display:block;width:100%;text-align:center;margin:16px 0 0;padding:0;
  font-family:inherit;font-size:11.5px;letter-spacing:0;color:var(--fv-text);
  text-decoration:underline;text-underline-offset:3px;
  opacity:.5;transition:opacity .2s ease}
.mm[data-firstvisit] .mm__dismiss:hover{opacity:1}

.mm[data-firstvisit] .mm__x{
  top:16px;right:16px;width:32px;height:32px;border-radius:0;
  color:var(--fv-text);background:none;opacity:.35;transition:opacity .2s ease}
.mm[data-firstvisit] .mm__x:hover{opacity:1;background:none;color:var(--fv-text)}
.mm[data-firstvisit] .mm__x svg{width:18px;height:18px;stroke-linecap:butt}

/* Bottom sheet on mobile, still square. */
@media(max-width:640px){
  .mm[data-firstvisit] .mm__panel{max-width:none;border-radius:0;padding:44px 26px 30px}
}

@media(max-width:900px){.wrap{padding:0 22px}}

/* ===== HERO — two-column grid ==============================================
   Rebuilt from an absolutely-positioned card over a full-width h1. The two now
   share a grid, so the browser reserves the space and they cannot overlap.
   No absolute positioning, no float, no negative margin, no z-index anywhere.

   Scrim: the specified .55/.28/.12 measured 1.32:1 against white — a hard fail
   at every width. .76/.64/.50 holds 3.51:1 across 10 viewports. Same 90deg
   left-to-right direction, raised so the ACCESSIBILITY rule survives. */
.hero{position:relative;min-height:640px;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(28,26,24,.76) 0%,rgba(28,26,24,.64) 45%,rgba(28,26,24,.50) 100%),
             url("https://tydjvystzfdmhifthxll.supabase.co/storage/v1/object/public/SSN%20webpage%20photos/noosa-beach-aerial.jpg") center/cover no-repeat}

.hero-inner{width:100%;max-width:1280px;margin:0 auto;padding:64px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:center}

/* min-width:0 is the fix. Grid items default to min-width:auto and refuse to
   shrink below their content, which is what pushed the copy under the card. */
.hero-copy{min-width:0}
.hero .card{min-width:0}

/* 11ch wraps "Luxury Swimwear Noosa" to THREE lines (Luxury / Swimwear /
   Noosa) — measured against Fraunces. 14ch is the narrowest that holds two,
   and the standard says widen the container rather than shrink the type. */
.hero h1{margin:0;max-width:14ch;
  font-family:var(--font-serif);font-size:clamp(44px,5.4vw,76px);line-height:1.02;
  font-weight:500;font-variation-settings:"opsz" 120,"wght" 500;
  letter-spacing:-.012em;color:#fff;text-wrap:balance}

.hero-btn{display:inline-block;margin-top:34px;padding:16px 34px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-decoration:none;
  background:transparent;border:1px solid rgba(255,255,255,.72);border-radius:0;
  transition:background .2s ease,color .2s ease}
.hero-btn:hover,.hero-btn:focus-visible{background:#fff;color:var(--ink)}

.hero .card{background:#FFFFFF;padding:34px 32px 30px;border:0;border-radius:0;box-shadow:none}
/* Julius Sans One, like every other heading. This rule is .hero .card-title —
   two classes — so it out-specifies the global ".card-title { font-family:
   var(--font-display) }" further down this file, which is why the card was
   rendering in Switzer 600: a bold sans, alone on the page in doing so.
   Weight stays 400 and the stroke stays 0: the face has no bold and the
   browser must not fake one. Tracking carries the weight instead. */
.hero .card-title{margin:0;font-family:var(--font-display);font-size:15px;line-height:1.3;
  font-weight:400;-webkit-text-stroke:0;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.hero .card-title>span{display:block}
.hero .card-line{margin:10px 0 0;font-family:var(--font-sans);font-size:13.5px;line-height:1.5;color:var(--muted)}
.hero .card-form{display:block;margin-top:26px}
.hero .card-form input{width:100%;height:44px;padding:0;font-family:var(--font-sans);font-size:14px;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  transition:border-bottom-color .2s ease}
.hero .card-form input::placeholder{color:var(--muted)}
.hero .card-form input:focus{outline:none;box-shadow:none;border-bottom-color:var(--ink)}
.hero .card-form button{display:block;width:100%;height:48px;margin-top:22px;
  background:var(--ink);color:#FFFFFF;border:0;border-radius:0;cursor:pointer;
  font-family:var(--font-sans);font-size:11px;font-weight:600;/* .15em -> .11em so the longer label does not crowd the edges */
  letter-spacing:.11em;
  text-transform:uppercase;transition:background .2s ease}
.hero .card-form button:hover{background:var(--bronze-dk)}

@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;padding:56px 24px}
  .hero h1{max-width:14ch}
  .hero .card{max-width:420px}
}

/* Keyboard focus for the social row. Never outline:none — this is the only
   affordance a keyboard user gets on an icon+label link. */
.intro__soc:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ===== PALETTE ROLES =======================================================
   blush = alternating SECTION GROUNDS only. Large calm surfaces, never text,
   never borders, never small elements. */
.intro{background:var(--blush)}
.collection{background:var(--blush)}
.maisons-sec{background:var(--paper)}
.gem-sec{background:var(--blush)}
.proof{background:var(--paper)}

/* bronze = STRUCTURE. Small-caps labels, link underlines, hairline accents,
   icon strokes, hover, arrow glyphs. Never a button fill, never decoration. */
.eyebrow{color:var(--bronze)}
.hp__label,.ndm__label{color:var(--bronze)}
.intro__story{color:var(--bronze);border-bottom-color:var(--bronze)}
.intro__story:hover{color:var(--bronze-dk);border-bottom-color:var(--bronze-dk)}
.intro__story svg{color:var(--bronze)}          /* the arrow glyph */
.intro__soc:hover{color:var(--bronze)}

                /* icon strokes on hover */
.navdrop__links a:hover,.navdrop__links a:focus-visible{color:var(--bronze)}
.hero-btn:hover,.hero-btn:focus-visible{background:var(--paper);color:var(--ink)}

/* bronze-dk only where bronze text sits on blush at small sizes. */
.intro .intro__story,.intro .eyebrow{color:var(--bronze-dk)}
.intro .intro__story{border-bottom-color:var(--bronze-dk)}

/* No gradients on bronze, no sheen, no bronze shadow or glow anywhere. */

/* ===== Brand index =========================================================
   Was an image grid with a hover scrim and text over the photograph. Everything
   is now permanently below the image, so nothing depends on hover — which is
   also what makes it work on touch. */
.brand-index{max-width:1080px;margin-inline:auto;padding:0 40px}
/* Top row: three across, in the order set by BRAND_ORDER in catalog.js. */
.brand-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.brand{display:block}

/* Uniform treatment, every tile, no exceptions: fixed 3:4 box, image covers it.
   No contain, no max-width/height, no per-tile height, no wrapper padding —
   any of those and the four tiles stop matching. */
.brand__media{display:block;position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--img-bg)}
.brand__media img{width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;transform:none;transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
/* Image is the only thing that moves. */
.brand:hover .brand__media img{transform:scale(1.03)}

.brand__name{margin:18px 0 0;font-family:var(--font-sans);font-size:15px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.3}

.brand__desc{margin:10px 0 0;font-family:var(--font-sans);font-size:14px;line-height:1.55;
  color:var(--muted);max-width:42ch}

.brand__link{display:inline-block;margin-top:16px;padding-bottom:4px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--bronze);
  transition:border-bottom-color .2s ease}
.brand__link:hover,.brand__link:focus-visible{border-bottom-color:var(--ink)}

/* ---- Artiga: a companion band, not a fourth tile ------------------------
   French homewares, not swimwear. Landscape crop and a two-column layout so
   the shape itself says "different kind of product". */
.brandfeat{margin-top:72px;padding-top:40px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.brandfeat__media{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;
  background:var(--img-bg)}
.brandfeat__media img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.brandfeat:hover .brandfeat__media img{transform:scale(1.03)}
.brandfeat__eyebrow{font-family:var(--font-sans);font-size:10px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);margin:0}
.brandfeat__name{margin-top:14px}
.brandfeat__body .brand__link{margin-top:18px}

@media(max-width:768px){
  .brand-row{grid-template-columns:1fr;gap:40px}
  .brand-index{padding:0 22px}
  .brandfeat{grid-template-columns:1fr;gap:24px;margin-top:56px}
}

/* ACCOUNT ICON ONLY — circular container. Equal width/height is what makes it
   a true circle rather than a squashed oval. Search, wishlist and bag are bare. */
/* --rule is 1.16:1 on blush — invisible. Stepped to bronze at 40% per spec
   (1.71:1) rather than darkening --rule globally. */
.acct [data-acct-open]{width:34px;height:34px;display:grid;place-items:center;
  border:1px solid rgba(138,94,60,.40);border-radius:50%;background:none;
  transition:border-color .2s ease,color .2s ease}
.acct [data-acct-open]:hover,.acct [data-acct-open]:focus-visible{border-color:var(--ink)}
.acct [data-acct-open] svg{width:22px;height:22px}   /* icon size + stroke unchanged */

/* ===== SHOP MEGA-MENU ======================================================
   Click/tap to open, never hover — hover-only is unreachable on touch. */
.nav__trigger{display:inline-grid;background:none;border:0;padding:6px 0 3px;margin:0;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  border-bottom:1px solid transparent;transition:border-bottom-color .2s ease}
.nav__trigger:hover,.nav__trigger:focus-visible{border-bottom-color:var(--bronze)}
/* Label and X occupy the same grid cell, so swapping causes no layout shift. */
.nav__trigger-label,.nav__trigger-x{grid-area:1/1;transition:opacity .2s ease}
.nav__trigger-x{opacity:0;justify-self:center;align-self:center;pointer-events:none}
.nav__trigger-x svg{width:15px;height:15px;display:block}
.nav__trigger.is-open .nav__trigger-label{opacity:0}
.nav__trigger.is-open .nav__trigger-x{opacity:1}

.mega-scrim{position:fixed;inset:0;z-index:180;background:rgba(28,26,24,.30);
  opacity:0;transition:opacity .24s ease}
.mega-scrim.is-open{opacity:1}
.mega-scrim[hidden]{display:none}

.megamenu{position:absolute;top:100%;left:0;right:0;z-index:190;
  background:var(--paper);border-top:1px solid var(--rule);
  box-shadow:none;border-radius:0;
  opacity:0;transform:translateY(-8px);
  transition:opacity .26s cubic-bezier(.2,.8,.25,1),transform .26s cubic-bezier(.2,.8,.25,1)}
.megamenu.is-open{opacity:1;transform:none}
.megamenu[hidden]{display:none}

.megamenu__inner{max-width:1280px;margin:0 auto;padding:56px 40px 64px;
  display:grid;grid-template-columns:180px minmax(0,1fr) 180px 300px;gap:56px}

/* Column headings — first letter capitalised only, never full uppercase. */
.mega-col__h{margin:0 0 22px;font-family:var(--font-serif);font-size:19px;font-weight:600;
  letter-spacing:.03em;color:var(--ink);line-height:1.2}

.mega-list{list-style:none;margin:0;padding:0}
.mega-list li+li{margin-top:13px}
.mega-list a{font-family:var(--font-sans);font-size:13.5px;font-weight:400;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-bottom-color .2s ease}
.mega-list a:hover,.mega-list a:focus-visible{border-bottom-color:var(--bronze)}

/* auto-fit, so there is no orphan tile at any brand count or width. */
.mega-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px}
.mega-tile{display:block;text-decoration:none}
.mega-tile__media{display:block;position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--img-bg)}
.mega-tile__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.mega-tile:hover .mega-tile__media img,.mega-tile:focus-visible .mega-tile__media img{transform:scale(1.04)}
.mega-tile__name{display:block;margin-top:10px;font-family:var(--font-sans);font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.35}

.mega-feature__label{display:block;margin-bottom:14px;font-family:var(--font-sans);font-size:10px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.mega-feature__link{display:block;text-decoration:none}
.mega-feature__media{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--img-bg)}
.mega-feature__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1)}
.mega-feature__link:hover .mega-feature__media img{transform:scale(1.04)}
.mega-feature__name{display:block;margin-top:16px;font-family:var(--font-sans);font-size:15px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.3}
.mega-feature__desc{margin:10px 0 0;font-family:var(--font-sans);font-size:13.5px;line-height:1.55;
  color:var(--muted);max-width:34ch}
.mega-feature__cta{display:inline-block;margin-top:14px;padding-bottom:4px;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--bronze);transition:border-bottom-color .2s ease}
.mega-feature__cta:hover,.mega-feature__cta:focus-visible{border-bottom-color:var(--ink)}

/* Focus is never removed — outline only, never outline:none. */
.nav__trigger:focus-visible,.mega-list a:focus-visible,.mega-tile:focus-visible,
.mega-feature__link:focus-visible,.mega-feature__cta:focus-visible{
  outline:2px solid currentColor;outline-offset:3px}

@media(max-width:1100px){
  .megamenu__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;padding:44px 24px 52px}
}
/* Below 768 the panel does not render — the mobile sheet handles it. In
   practice the trigger is already gone at 1024, where .nav__links collapses. */
@media(max-width:768px){
  .megamenu,.mega-scrim{display:none!important}
}

/* ===== 1. Dropdown reduced motion ========================================= */
@media (prefers-reduced-motion: reduce){
  .navdrop__slide{transform:none;transition:opacity .24s ease}
  .navdrop:hover .navdrop__slide,.navdrop:focus-within .navdrop__slide,
  .navdrop[data-open] .navdrop__slide,.navdrop.is-open .navdrop__slide{transform:none}
}

/* ===== 2. Account icon — optically centred ================================ */
.nav__account{width:34px;height:34px;display:grid;place-items:center;padding:0;line-height:0;
  border:1px solid var(--rule);border-radius:50%;background:none}
.nav__account svg{display:block;width:16px;height:16px}
.nav__account:hover,.nav__account:focus-visible{border-color:var(--ink);background:none}

/* ===== 3. Hero — staggered arrival, card lands last ======================= */
@media (prefers-reduced-motion: no-preference){
  @keyframes heroRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .hero h1,.hero-btn,.hero .card{animation:heroRise .85s cubic-bezier(.22,1,.36,1) both}
  .hero h1{animation-delay:.05s}
  .hero-btn{animation-delay:.20s}
  .hero .card{animation-delay:.38s}   /* last = where the eye ends up */
}

/* Card button: fill wipe from the left, never a scale. */
.hero .card-form button{position:relative;overflow:hidden;transition:none}
.hero .card-form button::before{content:"";position:absolute;inset:0;background:#3A3733;
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.22,1,.36,1)}
.hero .card-form button:hover::before,
.hero .card-form button:focus-visible::before{transform:scaleX(1)}
.hero .card-form button>span{position:relative;z-index:1}
.hero .card-form button:active{transform:translateY(1px)}

/* Input: the underline draws in on focus, over the resting rule. */
.hero .card-field{display:block;position:relative}
.hero .card-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.22,1,.36,1)}
.hero .card-field:focus-within::after{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
  .hero .card-form button::before,.hero .card-field::after{transition:none}
}

/* ===== 4. Sentence removed — heading sits closer to the field ============= */
.hero .card-form{margin-top:28px}

/* ===== Hero bronze accents — exactly two ==================================
   1) the streak the headline rises out of, 2) the outline button border.
   Nothing else in the hero gets bronze. --bronze-lt is decorative only. */

.hero-btn{border-color:rgba(168,123,82,.85)}
.hero-btn:hover,.hero-btn:focus-visible{background:var(--bronze-lt);
  border-color:var(--bronze-lt);color:#1C1A18}

@media (prefers-reduced-motion: no-preference){to{transform:scaleX(1)}}  .hero h1{animation-delay:.18s}
  .hero-btn{animation-delay:.34s}
  .hero .card{animation-delay:.50s}
}

/* ===== Hero card — two bronze touches, no third ==========================
   NOTE: the bar below uses a bronze gradient with a lighter centre stop.
   That contradicts two standing rules — "No gradients on bronze. No metallic
   sheen" and the standard's blanket no-gradients — and #D6A35E is a colour
   outside the token set. Built as specified; see the response for the flat
   alternative. */
.hero .card{position:relative;overflow:hidden}
.hero .card-bar{position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--bronze) 0%,#D6A35E 55%,var(--bronze) 100%);
  transform:scaleX(0);transform-origin:left}

/* Colour only — same size, same weight as the rest of the heading. */
.hero .card-amt{color:var(--bronze)}

/* "Claim membership perks" is a long label; .10em keeps it on
   one line down to a 380px card. */
.hero .card-form button{letter-spacing:.10em}

@media (prefers-reduced-motion: no-preference){
  @keyframes cardBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* .50s matches the card's own arrival, so the bar draws as it lands. */
  .hero .card-bar{animation:cardBar .8s cubic-bezier(.22,1,.36,1) .50s both}
}
@media (prefers-reduced-motion: reduce){
  .hero .card-bar{transform:scaleX(1)}
}

/* Popup capture: inline error and the in-flight button state. */
.mm[data-firstvisit] .mm__err{font-family:var(--font-sans);font-size:11.5px;color:#A8342A;margin:10px 0 0}
.mm[data-firstvisit] .mm__err:empty{display:none}
.mm[data-firstvisit] .mm__form input[aria-invalid="true"]{border-bottom-color:#A8342A}
.mm[data-firstvisit] .mm__form button[disabled]{opacity:.6;cursor:not-allowed}
.mm[data-firstvisit] .mm__form button[disabled]::before{transform:scaleX(0)}

/* ===== Footer left column ================================================= */
.foot__lbl{display:block;font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.foot__lbl--gap{margin-top:26px}
.foot__place{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:#fff;margin:10px 0 0}
.foot__hours{list-style:none;margin:10px 0 0;padding:0;max-width:260px}
.foot__hours li{display:flex;justify-content:space-between;gap:20px;
  font-family:var(--font-sans);font-size:14px;line-height:1.6;color:#fff}
.foot__reach{margin:22px 0 0;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:#fff}
.foot__reach a{color:#fff;border-bottom:1px solid var(--bronze);padding-bottom:2px;text-decoration:none;
  transition:border-bottom-color .2s ease}
.foot__reach a:hover{border-bottom-color:#fff}
/* Layout only. The type is the shared capture-label treatment at the foot of
   this file, which this element shares with five other surfaces. */
.foot__newslbl{display:block;margin:30px 0 12px}
.foot__copy{font-family:var(--font-sans);font-size:12px;color:var(--text-on-dark-muted)}

/* ===== Capture error messages — above the button, never an alert() ======== */
.card-err,.news-err{font-family:var(--font-sans);font-size:12px;line-height:1.5;
  color:#FFD9D2;margin:0 0 10px}
.card-err:empty,.news-err:empty{display:none}
.card-form input[aria-invalid="true"],
.newsrow input[aria-invalid="true"]{border-bottom-color:#A8342A}

/* ===== Fixed-nav offset ===================================================
   Deliberately NOT here any more. --nav-h and the offset that consumes it live
   in theme.css, which every page links, applied once to <body>. There is no
   opt-in class; a template that needs to clear the header needs to do nothing.
   The only rules below that still touch --nav-h are fixed/absolute overlays,
   which sit outside the body padding box and must offset themselves. */

/* ===== Collection band ====================================================
   Full-bleed. The image is whatever Shopify gives us, in order: the
   collection's own image, else the first product's photo, else a flat tone —
   never an empty white box. */
/* The CONTAINER owns the height. Images are absolutely positioned and cover it,
   so nothing about the image can drive the band. The old clamp bottomed out at
   its 200px floor for every width between 768 and 833px, which is where it
   collapsed to a strip. */
.colband{position:relative;width:100%;height:clamp(300px,30vw,440px);
  overflow:hidden;background:var(--img-bg);display:flex;align-items:flex-end}
/* Crossfade, same mechanic as .shophero: 1.6s opacity, 9s Ken Burns on the
   active frame, advanced every 3.2s by catalog.js. A band with one frame keeps
   .on from prerender and never animates. */
.colband__img{position:absolute;inset:0;width:100%;height:100%;
  /* center 8%, not center: the slot is squarer than the portrait photographs,
     and a centred crop cuts heads off. Favouring the top keeps faces in shot. */
  object-fit:cover;object-position:center 8%;display:block;
  /* The slow zoom grows from the top edge, not the centre, so it never pushes
     the top of the photograph — the head — out of the frame. */
  transform-origin:center top;
  opacity:0;transform:scale(1.08);transition:opacity 1.6s var(--ease-out)}
.colband__img.on{opacity:1;animation:bandKen 9s ease-in-out infinite alternate}
@keyframes bandKen{from{transform:scale(1.06)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion: reduce){
  .colband__img{transition:none}
  .colband__img.on{animation:none;transform:none}
}
/* Left-to-right, so the text edge is legible without greying the whole photo. */
.colband__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 100%)}
/* No imagery resolved for this band — no band_images metafield, no collection
   image, no products yet. The scrim would otherwise be a dark wash over
   --img-bg (#F3ECE8) with a #fff title on top, i.e. invisible. Paint a real
   ground instead so a brand page opened before its first shipment reads as
   deliberate rather than broken. */
.colband__scrim--bare{background:linear-gradient(100deg,var(--ink) 0%,#2E2925 100%)}
/* Same gutter as .colmeta and .shopgrid, so the title, the count row and the
   first product column all sit on one line. It was a fixed 48px against their
   clamp(20px,4vw,56px), so nothing aligned at any width. */
.colband__body{position:relative;width:100%;max-width:1440px;margin:0 auto;
  padding:0 clamp(20px,4vw,56px) 34px}
.colband__title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,44px);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  margin:0;line-height:1.1}

/* Still in use by the 404 page, which puts a subtitle inside its band
   (404.html / prerender.mjs:notFoundPage). Collection pages no longer render
   it — their description is .colintro below the band. Do not delete: without
   this the 404 subtitle loses its white and disappears into the scrim. */
.colband__desc{font-family:var(--font-sans);font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.82);max-width:46ch;margin:10px 0 0}

/* ---- collection header: photograph and colour field ---------------------
   Stacked below 900px (image 3:2, then the words); from 900px a 40/60 split,
   the photograph the smaller share on the left, full-bleed, and the words on
   a warm off-white field that runs to the right edge of the viewport. The title sits
   with the story rather than over the photograph. The 404 opts out with
   .colhead--plain and keeps the full-width band above. */
/* minmax(0,…) on every track and min-width:0 on the text column: a grid
   track's default minimum is its content, which lets long copy push the
   column wider than its share instead of wrapping. */
.colhead:not(.colhead--plain){display:grid;grid-template-columns:minmax(0,1fr);
  background:var(--surface-page)}
.colhead:not(.colhead--plain) > .colband{height:auto;aspect-ratio:3/2}
.colhead > .colband:empty{display:none}
/* --surface-editorial: ink is ~15:1 on it and --text-muted 5.04:1, so both
   text tokens hold unchanged. Below 900px the gutter is the one the filter
   row and the grid use.
   The bronze hairline is the ONLY bronze here, on the single edge where the
   field meets the photograph: the top when stacked, the left from 900px. */
.colintro{min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--surface-editorial);
  border-top:1px solid color-mix(in srgb,var(--accent-bronze) 40%,transparent);
  padding:3.5rem clamp(20px,4vw,56px) 3rem}
.colintro:empty{display:none}
.colintro > *{margin:0;max-width:100%}
/* Quiet on purpose: the photograph carries the page. Face and weight come
   from the h1 rules further down; the tracking here outranks theirs. */
.colintro__title{font-size:clamp(20px,5.2vw,26px);letter-spacing:.2em;
  text-transform:uppercase;line-height:1.25;color:var(--text-strong)}
/* p.colintro__lede / p.colintro__body, not the bare classes: (0,2,1) beats
   the .colintro > * reset above. Specificity, not !important.
   Switzer, not --font-display: Julius Sans One has no lowercase, so a
   full-sentence lede set in it renders as a line of capitals. Light (300) is
   already in the Switzer request in theme.css — no extra font load. */
.colintro p.colintro__lede{font-family:var(--font-sans);font-weight:var(--weight-light);
  font-size:clamp(17px,1.3vw,20px);line-height:1.7;letter-spacing:.005em;
  color:var(--text-strong);max-width:min(34ch,100%);margin-top:2.25rem}
/* Space, not a rule, separates the lede from the body. */
.colintro p.colintro__body{font-size:13px;line-height:2.2;letter-spacing:.02em;
  color:var(--text-muted);max-width:min(42ch,100%);margin-top:2.75rem}
@media(min-width:900px){
  /* min-height, not height: the image fills whatever the row is, and long
     copy on a short screen grows the row instead of being clipped. */
  .colhead:not(.colhead--plain){grid-template-columns:minmax(0,40fr) minmax(0,60fr);
    min-height:min(58vh,560px)}
  /* No imagery at all: the words take the full width. */
  .colhead:not(.colhead--plain):has(> .colband:empty){grid-template-columns:minmax(0,1fr);
    min-height:0}
  .colhead:not(.colhead--plain) > .colband{aspect-ratio:auto}
  /* Generous on every side. With a full description this padding plus the
     copy is taller than the min-height above, so the row grows to fit and the
     words sit centred between equal padding. The two spacers below — free
     space split 58 above, 42 below — only come into play on short copy, such
     as a title with no description. */
  .colintro{padding:clamp(56px,7vw,112px);border-top:0;
    border-left:1px solid color-mix(in srgb,var(--accent-bronze) 40%,transparent)}
  .colintro::before{content:"";flex:58 1 0}
  .colintro::after{content:"";flex:42 1 0}
  .colintro__title{font-size:clamp(26px,2.6vw,38px)}
}
/* Entrance, desktop only and only when motion is welcome: the words rise in
   sequence, the photograph fades up behind them. */
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  @keyframes colRise{from{opacity:0;transform:translateY(12px)}}
  @keyframes colFade{from{opacity:0}}
  .colintro > *{animation:colRise .7s var(--ease-out) both}
  .colintro p.colintro__lede{animation-delay:80ms}
  .colintro p.colintro__body{animation-delay:160ms}
  .colhead:not(.colhead--plain) > .colband{animation:colFade .9s var(--ease-out) both}
}

/* The count lives in the filter row now — see .colfilters. */
.colmeta__count{font-family:var(--font-sans);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}

@media(max-width:768px){
  .colband{height:clamp(200px,46vw,280px)}
  .colband__body{padding:0 clamp(20px,4vw,56px) 24px}
  .colband__title{font-size:clamp(22px,6.5vw,30px)}
  .colband__desc{font-size:13px}
}

/* shop-all / sale hero title: same treatment as the collection band, so the
   two full-bleed bands read as one system rather than two eras of the site. */
.shophero__title h1{font-family:var(--font-display);font-size:clamp(28px,3.4vw,44px);
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  margin:0;line-height:1.1}

/* ═══════════════════ MOBILE PASS ═══════════════════════════════════════════
   Everything below 768px. --nav-h is measured by nav-offset.js on every page
   that has a bar, so nothing here hardcodes a bar height. */

/* The hero fills the screen BELOW the bar, not the whole screen: body already
   carries var(--nav-h), so subtracting it here is what keeps the hero exactly
   one viewport tall instead of one viewport plus a bar. */

@media(max-width:768px){
  /* ---- 1. Homepage hero ---- */
  /* svh, not vh: 100vh on mobile includes browser chrome that is not there,
     which pushed the copy up under the bar. */
  .hero{min-height:calc(100svh - var(--nav-h));align-items:flex-start}
  .hero-inner{padding:clamp(28px,6vh,48px) 24px 56px;gap:32px}
  /* Two lines max: "Luxury Swimwear" / "Noosa". */
  .hero h1{font-size:clamp(30px,8vw,44px);line-height:1.06;max-width:11ch}
  .hero-btn{margin-top:24px;padding:14px 26px}

  /* ---- 2. Nav wordmark ---- */
  /* SWIM.STYLE at 26px/.18em needs ~208px; a 390px bar leaves ~114px beside
     the burger and four icons. white-space:nowrap made it overflow and sit
     behind the hamburger, which read as a stray "S". */
  .nav__mark{font-size:12.99px;letter-spacing:.12em;white-space:normal}
  /* tracking .12em -> ordinary gap .241em -> target .072em each side */
  .nav__mark span{margin-left:-.142em;margin-right:-.015em}
  .nav__mark small{font-size:.52em;letter-spacing:.24em;margin-top:1px}
  .nav__row{gap:8px}
  .nav__actions{gap:2px}

  /* ---- 3. Collection grid ---- */
  /* Fixed image box + flex text column, so a two-line title cannot shove the
     price out of line with the tile beside it. */
  .pc{display:flex;flex-direction:column;height:100%}
  .pc__img{aspect-ratio:3/4;overflow:hidden;background:var(--img-bg)}
  .pc__img img{width:100%;height:100%;object-fit:cover;display:block}
  .pc__name{flex:1 1 auto;margin:10px 0 0;font-size:13px;line-height:1.35}
  .pc .pp{margin-top:6px;align-self:flex-start}
  .shopgrid{align-items:stretch}
  /* No hover on touch, so the bar sat permanently over the garment. */
  .pc .qv{display:none}

  /* ---- 4. Product page ---- */
  .pdp{grid-template-columns:1fr;gap:28px;padding:24px 20px 72px}
  /* 375px: six size boxes must wrap, never scroll sideways. */
  .sizes{flex-wrap:wrap;gap:8px}
  .size{min-width:44px;height:44px}
  .pdp__opt{max-width:100%;overflow:visible}

  /* ---- 5. Back / breadcrumb ---- */
  .pdp__back,.sgp__back{position:static;float:none;display:inline-block;
    margin:0 0 18px;padding:0;background:none;border:0;border-bottom:1px solid var(--rule);
    font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--muted);text-decoration:none}
  .pdp__back:hover,.sgp__back:hover{color:var(--ink);border-bottom-color:var(--ink)}
}

/* Back control: one treatment at every width, not just mobile. */
.pdp__back,.sgp__back{font-family:var(--font-sans);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pdp__back:hover,.sgp__back:hover{color:var(--ink)}

/* The season interstitial (.popup) used to live here, auto-opening 2.6s after
   load over the hero, and this block explained the mobile suppression that
   stopped it swallowing taps on "Explore the collection". The popup itself is
   gone — the homepage was firing two signup popups at one visitor — so the
   workaround went with it. The first-visit .mm popup remains the capture
   surface. */

/* ===== Collection filters ==================================================
   Same gutter as the band, the count row and the grid. */
/* Dropdowns left, count hard right, on the band and grid gutter. */
.colfilters{max-width:1440px;margin:0 auto;padding:16px clamp(20px,4vw,56px);
  border-bottom:1px solid var(--rule)}
.cf__row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cf__drops{display:flex;gap:24px;align-items:center}
.colfilters .colmeta__count{margin-left:auto;white-space:nowrap}
.cf__chips{margin-top:12px}
.cf__drop{position:relative}
.cf__trigger{padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);border-bottom:1px solid transparent}
.cf__trigger:hover:not([disabled]),.cf__trigger[aria-expanded="true"]{border-bottom-color:var(--ink)}
/* COLOUR keeps its slot while Shopify has no colour data, so the row will not
   reflow when it lands. */
.cf__trigger[disabled]{color:var(--muted);cursor:not-allowed}
.cf__menu{position:absolute;top:calc(100% + 10px);left:0;z-index:120;min-width:180px;
  padding:14px 16px;background:var(--paper);border:1px solid var(--rule);border-radius:0;
  box-shadow:0 18px 44px -26px rgba(28,26,24,.35);display:grid;gap:10px}
.cf__menu[hidden]{display:none}
.cf__opt{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;color:var(--ink)}
.cf__opt input{width:15px;height:15px;accent-color:var(--ink);border-radius:0}
.cf__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cf__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;
  background:var(--blush);border:1px solid var(--rule);border-radius:0;
  font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.cf__chip:hover{border-color:var(--ink)}
.cf__clear{padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
.cf__clear:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cf__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cf__mobile{display:none}

@media(max-width:768px){
  /* One FILTER button opening a full-height panel. */
  .cf__mobile{display:inline-block;padding:0;background:none;border:0;cursor:pointer;
    font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.15em;
    text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink)}
  .colfilters .cf__drops{display:none}
  .colfilters.is-open .cf__drops{position:fixed;inset:var(--nav-h) 0 0;z-index:150;display:block;
    padding:24px clamp(20px,4vw,56px);overflow-y:auto;background:var(--paper)}
  .colfilters.is-open .cf__drop{margin-bottom:22px}
  .colfilters.is-open .cf__menu{position:static;display:grid;border:0;box-shadow:none;
    padding:12px 0 0;min-width:0}
  .colfilters.is-open .cf__menu[hidden]{display:grid}
  .colfilters.is-open .cf__trigger{font-size:13px}
}

/* ===== Filter controls — look like controls, not text ======================
   Gutter stays on the container so the row still lines up with the band title
   and the first product column; 26px is the row's own vertical padding. */
.colfilters{padding:0 clamp(20px,4vw,56px)}
.cf__row{padding:26px 0;justify-content:flex-start}
.cf__drops{gap:28px}
.cf__trigger{height:44px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--rule);border-radius:0;cursor:pointer;
  font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);transition:border-color .2s ease}
.cf__trigger::after{content:"";width:7px;height:7px;margin-left:2px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px)}
.cf__trigger:hover:not([disabled]),.cf__trigger[aria-expanded="true"]{border-color:var(--ink)}
.cf__trigger[disabled]{color:var(--muted);border-color:var(--rule);cursor:not-allowed}
.cf__trigger[disabled]::after{opacity:.4}
.cf__menu{top:calc(100% + 8px)}

@media(max-width:768px){
  .cf__row{padding:18px 0}
  .cf__mobile{height:44px;padding:0 18px;border:1px solid var(--rule);
    font-size:13px;letter-spacing:.08em}
}

/* ===== Filter row, tightened ==============================================
   NOTE: var(--bg) aliases to var(--paper) = #FFFFFF, so it is pure white and
   would glare exactly as described. --blush (#F7EAE5) is the site's off-white
   ground and is used instead. */

/* Panel: bordered, flush to the trigger, no shadow. */
.cf__menu{top:100%;left:0;margin-top:-1px;   /* -1px collapses the doubled border */
  background:var(--blush);border:1px solid var(--rule);border-radius:0;box-shadow:none;
  padding:20px}

/* Chevron rotates on open. */
.cf__trigger::after{transition:transform .2s cubic-bezier(.22,1,.36,1);
  transform:rotate(45deg) translate(-2px,-2px);transform-origin:center}
.cf__trigger[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
.cf__trigger[aria-expanded="true"],
.cf__trigger.is-active{border-color:var(--ink)}

/* Disabled must read as disabled at a glance. */
.cf__trigger[disabled]{border-color:color-mix(in srgb,var(--rule) 40%,transparent);
  color:var(--muted);cursor:default}
.cf__trigger[disabled]::after{display:none}
.cf__trigger[disabled]:hover{border-color:color-mix(in srgb,var(--rule) 40%,transparent)}

/* ═══ Julius Sans One — display face ══════════════════════════════════════
   ONE weight (400) and no true lowercase: lowercase renders as small caps.
   So it carries display only, and hierarchy comes from size, tracking and
   colour — never weight. Synthesising bold would wreck the letterforms, so
   every heading that relied on 600/700 gets tracking instead.
   Body copy, tables, legal text, inputs and placeholders stay on Switzer. */

/* UI surfaces that were on the body face and should now read as display. */
.nav__links a,
.nav__mark,
.hero-btn,
.btn, .pdp__add > span, .pdp__buy > span,
.brand__link, .brand__name,
.cf__trigger, .cf__clear, .cf__chip,
.lp__label, .lp__prefs-h, .lp__back,
.sgp__back, .sgp__eyebrow, .pdp__back, .pdp__brand, .pdp__optname,
.colmeta__count, .colband__title,
.pp, .pdp__price, .ci__price, .cart__total,
.size, .cbrow .cblabel,
.foot__lbl, .eyebrow,
.mm__title, .card-title, .brandfeat__eyebrow, .ben__t {
  font-family: var(--font-display);
}

/* No faux-bold anywhere the display face renders. Tracking carries the weight. */
.nav__links a, .hero-btn, .btn, .cf__trigger, .cf__clear,
.lp__label, .lp__prefs-h, .lp__back, .sgp__back, .sgp__eyebrow,
.pdp__back, .pdp__brand, .pdp__optname, .colmeta__count,
.foot__lbl, .eyebrow, .brand__link, .brand__name, .ben__t,
.pdp__add > span, .pdp__buy > span, .size, .pp, .pdp__price {
  font-weight: 400;
  -webkit-text-stroke: 0;
}

/* Headings: size + tracking replace weight. */
h1, h2, h3, .disp,
.colband__title, .sgp__h1, .card-title, .mm__title, .brandfeat__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: normal;
}
h1, .disp, .sgp__h1, .colband__title { letter-spacing: .06em }
h2 { letter-spacing: .08em }
h3, .brand__name, .brandfeat__name { letter-spacing: .10em }
/* Small display text needs the most tracking to stay legible in small caps. */
.eyebrow, .foot__lbl, .sgp__eyebrow, .brandfeat__eyebrow,
.lp__prefs-h, .colmeta__count, .cf__trigger { letter-spacing: .12em }

/* Long-form and tabular stay on the body face regardless of any rule above. */
.sgp__fit p, .pdp__desc, .colband__desc, .colintro p, .lp__intro, .lp__consent,
.sg__table, .sg__table th, .sg__table td, .sg__measure-d,
.ben__d, .cf__opt, .grid-empty, .pdp__empty,
input, textarea, select, ::placeholder {
  font-family: var(--font-sans);
}

/* ===== "Claim membership perks" — one treatment, every surface =============
   The same offer sits on six surfaces: the homepage hero card, the join modal,
   the first-visit popup, the header/sheet member panel, the size-guide drawer
   and the footer. They had drifted to five different sizes across two faces
   (26/21/17/15/12px, Julius and Switzer). This is the single spec.

   14px / .14em / uppercase / var(--bronze). Weight 400 with the stroke at 0 —
   the display face has exactly one weight and synthesising a bold wrecks the
   letterforms, so size and tracking carry the emphasis. No gradient, no glow,
   no shadow, no shimmer.

   The rule is text-decoration, NOT border-bottom: most of these are block
   headings, and a border would run the full container width instead of sitting
   under the words. width:fit-content shrinks the box onto the text so the hover
   target matches the rule. text-decoration-color is the animatable property, so
   rest -> hover is 40% -> 100% alpha on the rule alone; animating opacity on the
   element would fade the text along with it.

   Each selector is written one step more specific than the rule it replaces
   (.mm[data-firstvisit] .mm__title is 0,3,0; .sg__capture-h lives in
   sizeguide.css, which every page loads BEFORE this file but which should not
   have to stay that way) so the treatment does not depend on file order. */
.foot__newslbl,
.hero .card-title,
.mm .mm__title,
.mm[data-firstvisit] .mm__title,
.navdrop__member .ndm__title,
.sg__capture .sg__capture-h{
  font-family:var(--font-display);font-size:14px;font-weight:400;-webkit-text-stroke:0;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.35;
  color:var(--bronze);width:fit-content;max-width:100%;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--bronze) 40%,transparent);
  transition:text-decoration-color .25s cubic-bezier(.22,1,.36,1)}

/* currentColor, so the footer's lightened bronze below carries into its own
   hover without needing a second override. */
.foot__newslbl:hover,
.hero .card-title:hover,
.mm .mm__title:hover,
.mm[data-firstvisit] .mm__title:hover,
.navdrop__member .ndm__title:hover,
.sg__capture .sg__capture-h:hover{text-decoration-color:currentColor}

/* Footer only. --bronze on the footer's var(--ink) ground is 3.10:1, under the
   4.5:1 floor for 14px text; --bronze-on-dark is the same hue and saturation
   lifted in lightness to clear it at 5.35:1. Every other surface here is a
   light ground (paper card, paper modal, blush member panel) and keeps
   --bronze, which is 5.60:1 on paper and 4.77:1 on blush. */
.foot__newslbl{color:var(--bronze-on-dark);
  text-decoration-color:color-mix(in srgb,var(--bronze-on-dark) 40%,transparent)}