/* Obrazec 2.0 — the brand's title face (brand guidelines). Served as OTF:
   at 37KB it isn't worth adding a conversion step to shave a few KB. */
@font-face{font-family:'Obrazec';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/obrazec-2.otf) format('opentype');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-condensed-400.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-500.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-500.woff2) format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-mono-400.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-500.woff2) format('woff2');}

/* ============================================================
   OZTREK4X4 — DESIGN SYSTEM
   Inspired by the LE CAMP system (lecampquebec.com):
   near-monochrome canvas, ONE chromatic accent, badge-style
   illustration, topo-line restraint, photography does the talking.
   Accent swapped from signal red -> OZtrek signal yellow.
   ============================================================ */

:root{
  /* --- Colour tokens --- */
  --signal-yellow:#FF8600;   /* Sole chromatic accent. Primary CTA fill, active nav, brand mark, moments of decision. */
  --yellow-deep:#E35300;     /* Hover / pressed state for yellow surfaces */
  --carbon-ink:#102C4E;      /* Primary text, hairlines, structural anchor */
  --summit-white:#FFFFFF;    /* Page canvas, card surface, text on dark */
  --bone:#EEF2F7;            /* Warm off-white expanse — the "base camp" quiet sections */
  --sand:#FBE7A2;            /* Brand secondary. Used once, for the owners panel. */
  --brand-blue:#4C73F1;      /* Brand support colour. Used once, in the footer line. */
  --ridge-grey:#51637A;      /* Secondary body text, muted labels */
  --hairline:#DCE3EC;        /* Thin dividers, input borders */
  --dusk-1:#0B2340;          /* Outback dusk sky — deep */
  --dusk-2:#16304E;          /* Outback dusk sky — mid */
  --dusk-3:#B85E1F;          /* Outback dusk sky — horizon warm */
  --dusk-4:#FF8600;          /* Outback dusk sky — sun band */

  /* --- Type ---
     Brand spec: Obrazec 2.0 Bold for titles. Not licensable in this build;
     approved substitute per guidelines: Barlow Condensed ExtraBold. */
  --font-display:'Obrazec', 'Barlow Condensed', 'Archivo', system-ui, sans-serif;
  --font-body:'Barlow', system-ui, sans-serif;
  --font-mono:'DM Mono', ui-monospace, monospace;

  /* --- Geometry --- */
  --frame:10px;              /* Inset frame around full-bleed hero */
  --r-lg:28px;
  --r-md:20px;
  --r-sm:12px;
  --r-pill:999px;
  --gap-section:clamp(80px,10vw,140px);
  --pad-x:clamp(20px,5vw,64px);
  --maxw:1440px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  color:var(--carbon-ink);
  background:var(--summit-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;}

/* ---------- Type primitives ---------- */
.display{
  font-family:var(--font-display);
  font-weight:800; /* Obrazec Bold analogue — must read unmistakably condensed */
  text-transform:uppercase;
  letter-spacing:-0.008em;
  line-height:1.0;
  margin:0;
}
.display--heavy{font-weight:800;letter-spacing:-0.012em;}
.label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ridge-grey);
}
.label--ink{color:var(--carbon-ink);}
.label--light{color:rgba(255,255,255,.72);}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ridge-grey);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-pill);
  font-family:var(--font-body);font-size:15px;font-weight:500;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,color .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn--ink{background:var(--carbon-ink);color:var(--summit-white);}
.btn--ink:hover{background:#1A3D68;}
.btn--yellow{background:var(--signal-yellow);color:var(--carbon-ink);font-weight:700;}
.btn--yellow:hover{background:var(--yellow-deep);}
.btn--ghost{border:1px solid rgba(255,255,255,.35);color:#fff;}
.btn--ghost:hover{background:rgba(255,255,255,.1);}
.btn--outline{border:1px solid var(--carbon-ink);color:var(--carbon-ink);}
.btn--outline:hover{background:var(--carbon-ink);color:#fff;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);}
.section{padding-block:var(--gap-section);}

/* ============================================================
   UTILITY BAR
   ============================================================ */
.utility{
  background:var(--carbon-ink);color:rgba(255,255,255,.8);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;
}
.utility__inner{
  max-width:var(--maxw);margin:0 auto;padding:9px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.utility__socials{display:flex;gap:16px;}
.utility__socials a{opacity:.7;transition:opacity .2s,color .2s;}
.utility__socials a:hover{opacity:1;color:var(--signal-yellow);}
.utility__msg{text-align:center;}
.utility__msg b{color:#fff;font-weight:700;}
.utility__right{opacity:.7;}
@media(max-width:820px){.utility__socials,.utility__right{display:none;}.utility__msg{width:100%;}}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:var(--summit-white);
  border-bottom:1px solid var(--hairline);
}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);
  height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;}
/* Real OZtrek4x4 logo. Brand rules: never recolour/stretch/rebuild; min width 70px;
   clear space all sides >= height of the "4" in the 4x4 element. */
.brand__logo{height:60px;width:auto;display:block;}
.brand__logo--footer{height:88px;}
.brand__logo--drawer{height:56px;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 0;position:relative;
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--carbon-ink);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);}
.nav__utils{display:flex;align-items:center;gap:20px;}
.nav__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;transition:background .2s;}
.nav__icon:hover{background:var(--bone);}
.nav__cart{position:relative;}
.nav__cart span{
  position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--r-pill);background:var(--carbon-ink);color:#fff;
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  display:grid;place-items:center;
}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;}
.nav__burger i{display:block;width:22px;height:2px;background:var(--carbon-ink);transition:transform .3s,opacity .3s;}
@media(max-width:1080px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:200;background:var(--carbon-ink);color:#fff;
  padding:28px var(--pad-x);display:flex;flex-direction:column;gap:8px;
  /* overflow-y keeps a tall menu scrollable AND clips content that would
     otherwise spill past the translated box on short viewports */
  overflow-y:auto;
  visibility:hidden;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.76,0,.24,1),visibility .5s;
}
.drawer.is-open{transform:translateY(0);visibility:visible;}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;}
.drawer a.drawer__link{
  font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.03em;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.drawer a.drawer__link:hover{color:var(--signal-yellow);}
.drawer__close{font-size:30px;line-height:1;}

/* ============================================================
   HERO — inset rounded frame, full-bleed dusk scene, badge patches
   ============================================================ */
.hero{padding:var(--frame);}
.hero__frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  min-height:min(84vh,760px);display:grid;place-items:center;
  isolation:isolate;
}
.hero__scene{position:absolute;inset:0;z-index:-2;}
.hero__scene svg{width:100%;height:100%;object-fit:cover;}
.hero__scene picture{display:block;width:100%;height:100%;}
.hero__photo{width:100%;height:100%;object-fit:cover;object-position:42% 50%;display:block;}
/* The phone crop is already framed on the rig, so it sits centred. */
@media(max-width:700px){.hero__photo{object-position:50% 50%;}}
.hero__content{text-align:center;padding:clamp(76px,10vw,118px) 22px;max-width:1060px;}
.hero h1{
  color:#fff;font-size:clamp(38px,6.6vw,84px);font-weight:800;
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:-0.008em;line-height:0.98;margin:0 0 26px;
  text-shadow:0 2px 20px rgba(8,20,38,.55),0 1px 3px rgba(8,20,38,.45);
}
.hero h1 em{font-style:normal;font-weight:800;}
.hero h1 .hl{color:#fff;}
.hero__sub{
  color:#fff;font-size:clamp(15px,1.5vw,19px);
  max-width:600px;margin:0 auto 34px;line-height:1.55;
  text-shadow:0 1px 14px rgba(8,20,38,.75),0 1px 3px rgba(8,20,38,.6);
}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero__corner{
  position:absolute;bottom:22px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);
  text-shadow:0 1px 10px rgba(8,20,38,.7);
}
.hero__corner--l{left:clamp(18px,3vw,34px);}
.hero__corner--r{right:clamp(18px,3vw,34px);}
.hero__scroll{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;
  display:grid;place-items:center;animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,7px);}}
@media(max-width:760px){.hero__corner{display:none;}}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--carbon-ink);overflow:hidden;padding:15px 0;}
.marquee__track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite;}
.marquee__track span{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.92);padding-inline:26px;
  display:inline-flex;align-items:center;gap:26px;
}
.marquee__track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--signal-yellow);}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============================================================
   INTRO — asymmetric, LE CAMP "10 Years" block
   ============================================================ */
.intro{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,7vw,110px);align-items:start;}
.intro__copy p{margin:0 0 22px;color:var(--ridge-grey);}
.intro__copy p:first-of-type{color:var(--carbon-ink);font-size:19px;}
.intro h2{font-size:clamp(38px,6.2vw,86px);}
.intro__stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.stat{border:1px solid var(--hairline);border-radius:var(--r-md);padding:20px 24px;min-width:150px;flex:1;}
.stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:1;}
.stat span{display:block;margin-top:7px;}
@media(max-width:900px){.intro{grid-template-columns:1fr;}.intro__head{order:-1;}}

/* ============================================================
   RANGE — product cards
   ============================================================ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:46px;flex-wrap:wrap;}
.sec-head h2{font-size:clamp(32px,5vw,64px);}
.sec-head .label{margin-bottom:14px;display:block;}

.range{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:1080px){.range{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.range{grid-template-columns:1fr;}}

.card{
  border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;
  background:var(--summit-white);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,44,78,.09);border-color:var(--carbon-ink);}
.card__media{
  position:relative;aspect-ratio:4/3.4;background:var(--bone);
  display:grid;place-items:center;overflow:hidden;
}
.card__media svg{width:82%;height:auto;}
.card__tag{
  position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--carbon-ink);color:#fff;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
}
.card__tag--yellow{background:var(--carbon-ink);color:#fff;}
.card__body{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1;}
.card__name{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.01em;line-height:1.1;margin:0;text-transform:uppercase;}
.card__desc{font-size:14.5px;color:var(--ridge-grey);margin:0;line-height:1.5;flex:1;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 10px;color:var(--ridge-grey);
}
.card__foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--hairline);}
.card__price{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em;}
.card__price small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--ridge-grey);display:block;text-transform:uppercase;font-weight:400;}
.card__arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--carbon-ink);
  display:grid;place-items:center;transition:background .25s,color .25s,transform .25s;
}
.card:hover .card__arrow{background:var(--signal-yellow);border-color:var(--signal-yellow);transform:translateX(3px);}

/* ============================================================
   CATEGORY SPLIT — LE CAMP trail cards
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:20px;align-items:stretch;}
.split__stack{display:flex;flex-direction:column;gap:20px;}
.trail{
  border-radius:var(--r-md);padding:clamp(26px,3.2vw,42px);
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;flex:1;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.trail:hover{transform:translateY(-5px);}
.trail--ink{background:var(--carbon-ink);color:#fff;}
.trail--ink .trail__name{color:#fff;}
.trail--yellow{background:var(--signal-yellow);color:var(--carbon-ink);}
.trail__name{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.012em;line-height:.98;margin:0;text-transform:uppercase;}
.trail__row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;}
.trail__row p{margin:0;font-size:15px;line-height:1.5;max-width:400px;opacity:.82;}
.trail__go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid currentColor;transition:transform .3s;}
.trail:hover .trail__go{transform:translateX(4px);}
.split__photo{border-radius:var(--r-md);overflow:hidden;position:relative;min-height:420px;background:var(--bone);}
.split__photo svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 60%;}
.photo-note{
  position:absolute;left:16px;bottom:16px;z-index:2;
  padding:6px 12px;border-radius:var(--r-pill);background:rgba(16,44,78,.62);
  backdrop-filter:blur(8px);color:rgba(255,255,255,.85);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
}
@media(max-width:900px){.split{grid-template-columns:1fr;}.split__photo{min-height:300px;}}

/* ============================================================
   HONEST — "what we will and won't tell you"
   ============================================================ */
.honest{background:var(--bone);border-radius:var(--r-lg);padding:clamp(38px,5.5vw,80px);}

/* Two-column header: the headline was set to 15ch and left the right half of
   the panel empty, so the photo slot now occupies it. */
.honest__head{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(26px,4.5vw,60px);align-items:center;
}
@media(max-width:880px){.honest__head{grid-template-columns:1fr;gap:30px;}}
.honest__headline h2{font-size:clamp(28px,4.2vw,54px);margin:14px 0 0;max-width:16ch;}
.honest__standfirst{
  margin:18px 0 0;max-width:34ch;font-size:15.5px;line-height:1.6;color:var(--ridge-grey);
}
.honest__photo{
  margin:0;border-radius:var(--r-md);overflow:hidden;position:relative;
  aspect-ratio:4/3;background:var(--carbon-ink);
}
.honest__photo svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.honest__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 55%;}

.honest__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:48px;}
@media(max-width:980px){.honest__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.honest__grid{grid-template-columns:1fr;}}
.honest__item h3{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.03em;margin:14px 0 9px;}
.honest__item p{margin:0;font-size:14.5px;color:var(--ridge-grey);line-height:1.55;}
.honest__num{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--carbon-ink);padding-bottom:12px;border-bottom:2px solid var(--signal-yellow);display:inline-block;
}

/* ============================================================
   BADGE WALL
   ============================================================ */
.badges{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:center;justify-items:center;}
@media(max-width:1180px){.badges{grid-template-columns:repeat(3,1fr);gap:22px;}}
.badges svg{width:100%;max-width:150px;height:auto;transition:transform .4s cubic-bezier(.22,1,.36,1);}
.badges a:hover svg,.badges div:hover svg{transform:translateY(-6px) rotate(-3deg);}
@media(max-width:900px){.badges{grid-template-columns:repeat(3,1fr);gap:18px;}}
@media(max-width:520px){.badges{grid-template-columns:repeat(2,1fr);}}

/* ============================================================
   OWNERS — the one warm panel on the page
   Sand is the only brand colour not used anywhere else, which is
   what makes this section read as a different kind of beat: the
   product sections are cool navy/white, this one is human.
   Text stays navy on sand (11.4:1). Orange is decorative only —
   it fails AA as text at this size on this ground.
   ============================================================ */
.owners{
  background:var(--sand);border-radius:var(--r-lg);
  padding:clamp(38px,5.5vw,80px);position:relative;overflow:hidden;
}
.owners__head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4.5vw,60px);align-items:end;margin-bottom:clamp(34px,4.5vw,58px);
}
@media(max-width:880px){.owners__head{grid-template-columns:1fr;gap:22px;align-items:start;}}
.owners__head h2{font-size:clamp(30px,4.6vw,58px);margin:14px 0 0;color:var(--carbon-ink);}
.owners__lede{margin:0;font-size:16px;line-height:1.65;color:var(--carbon-ink);opacity:.78;max-width:42ch;}

/* One shared portrait of both owners, then their names beneath it. */
.owners__portrait{
  aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;position:relative;
  background:var(--carbon-ink);
}
.owners__portrait svg{position:absolute;inset:0;width:100%;height:100%;}
.owners__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:600px){.owners__portrait{aspect-ratio:4/3;}}
/* Always visible, not hover-only: this is awaiting the October shoot and
   should never be mistaken for finished art. Hidden once a real photo lands. */
.owners__portrait::after{
  content:'PHOTO / OCTOBER SHOOT';position:absolute;left:16px;bottom:16px;
  padding:7px 11px;border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.15em;
  color:rgba(255,255,255,.82);background:rgba(11,35,64,.72);
  border:1px solid rgba(255,255,255,.16);
}
.owners__portrait--filled::after{content:none;}

.owners__names{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3.5vw,56px);margin-top:clamp(26px,3.4vw,40px);
}
@media(max-width:600px){.owners__names{grid-template-columns:1fr;gap:30px;}}

.owner{margin:0;}
.owner__rule{display:block;width:44px;height:3px;border-radius:2px;background:var(--signal-yellow);margin-bottom:14px;}
.owner__name{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,2.5vw,30px);line-height:1;letter-spacing:.01em;
  margin:0;color:var(--carbon-ink);
}
.owner__role{
  display:block;margin-top:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--carbon-ink);opacity:.62;
}
.photo-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;cursor:pointer;}
.photo-pick input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;}
.photo-pick__btn{
  display:inline-block;padding:10px 18px;border-radius:var(--r-pill);
  border:2px solid var(--carbon-ink);background:#fff;color:var(--carbon-ink);
  font-weight:700;font-size:14px;transition:background .18s;
}
.photo-pick:hover .photo-pick__btn{background:var(--bone);}
.photo-pick input[type="file"]:focus-visible+.photo-pick__btn{outline:2px solid var(--carbon-ink);outline-offset:2px;}
.photo-pick__hint{font-size:13.5px;color:var(--ridge-grey);}

.owner__phone{
  display:inline-block;margin-top:7px;font-family:var(--font-mono);font-size:13.5px;
  letter-spacing:.06em;color:var(--carbon-ink);text-decoration:none;
  border-bottom:1px solid rgba(16,44,78,.28);
}
.owner__phone:hover{border-bottom-color:currentColor;}
.owner__phone--todo{opacity:.45;border-bottom-style:dashed;}
.owner__bio{margin:14px 0 0;font-size:15px;line-height:1.62;color:var(--carbon-ink);opacity:.78;}

.owners__sign{
  margin:clamp(34px,4.5vw,56px) 0 0;padding-top:clamp(22px,3vw,32px);
  border-top:1px solid rgba(16,44,78,.18);
  font-size:15.5px;line-height:1.6;color:var(--carbon-ink);opacity:.8;max-width:56ch;
}
.owners__sign a{color:var(--carbon-ink);text-decoration:underline;text-underline-offset:3px;}
.owners__sign a:hover{color:var(--yellow-deep);}

/* ============================================================
   FIELD NOTES
   ============================================================ */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.notes{grid-template-columns:1fr;}}
.note{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--hairline);transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s;}
.note:hover{transform:translateY(-5px);border-color:var(--carbon-ink);}
.note__media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--bone);}
.note__media svg{position:absolute;inset:0;width:100%;height:100%;}
.note__body{padding:22px;}
.note__body h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.008em;line-height:1.2;margin:12px 0 8px;text-transform:uppercase;}
.note__body p{margin:0;font-size:14.5px;color:var(--ridge-grey);line-height:1.5;}

/* ============================================================
   COMMUNITY STRIP
   ============================================================ */
.community{background:var(--carbon-ink);color:#fff;padding-block:clamp(56px,7vw,90px);}
.community h2{font-size:clamp(28px,4.4vw,56px);text-align:center;margin:0 0 10px;}
.community .label{text-align:center;display:block;margin-bottom:38px;color:rgba(255,255,255,.55);}
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
@media(max-width:900px){.ig{grid-template-columns:repeat(3,1fr);}}
.ig__tile{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;position:relative;background:#0B2038;}
.ig__tile svg{position:absolute;inset:0;width:100%;height:100%;}
.ig__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ig__tile::after{
  content:'IMAGE SLOT';position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.5);
  background:rgba(16,44,78,.35);opacity:0;transition:opacity .3s;
}
.ig__tile:hover::after{opacity:1;}

/* ============================================================
   LAUNCH LIST
   ============================================================ */
.launch{
  border-radius:var(--r-lg);background:var(--signal-yellow);
  padding:clamp(40px,6vw,88px);display:grid;
  grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;
}
@media(max-width:900px){.launch{grid-template-columns:1fr;}}
.launch h2{font-size:clamp(32px,5vw,62px);margin:0 0 14px;}
.launch p{margin:0;font-size:16px;line-height:1.55;max-width:460px;}
.launch__form{display:flex;gap:10px;flex-wrap:wrap;}
.launch__form input{
  flex:1;min-width:220px;padding:16px 22px;border-radius:var(--r-pill);
  border:1px solid var(--carbon-ink);background:#fff;font-family:var(--font-body);font-size:15px;
}
.launch__form input:focus{outline:2px solid var(--carbon-ink);outline-offset:2px;}
.launch__fine{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:14px;opacity:.7;}
.launch__form button[disabled]{opacity:.6;cursor:progress;}
.launch__status{
  display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
  font-size:14.5px;line-height:1.5;font-weight:600;color:var(--carbon-ink);
}
/* display:flex above would otherwise beat the [hidden] attribute */
.launch__status[hidden]{display:none;}
.launch__status::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;margin-top:7px;background:var(--carbon-ink);}
.launch__status--ok::before{background:#1F7A44;}
.launch__status--err::before{background:#B3291C;}
.launch__status a{text-decoration:underline;}

/* Screen-reader-only (spam honeypot, skip targets) */
.vis-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--carbon-ink);color:rgba(255,255,255,.72);padding-top:clamp(56px,7vw,90px);}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding-bottom:56px;}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr;}}
.footer h4{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 18px;font-weight:500;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer ul a{font-size:14.5px;transition:color .2s;}
.footer ul a:hover{color:var(--signal-yellow);}
.footer__blurb{font-size:14.5px;line-height:1.6;max-width:340px;margin:18px 0 22px;}
.footer .brand__word{color:#fff;}
/* The brand line across the bottom: three words, three brand colours, one row. */
.footer__word-1{color:var(--summit-white);}
.footer__word-2{color:var(--signal-yellow);}
.footer__word-3{color:var(--brand-blue);}
.footer__word{
  font-family:var(--font-display);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(28px,12.2vw,180px);line-height:.92;
  text-align:center;user-select:none;text-transform:uppercase;
  display:flex;justify-content:center;align-items:baseline;gap:.22em;flex-wrap:wrap;
  /* Knocked back so it sits behind the footer rather than shouting over it. */
  opacity:.78;
  /* line-height .78 makes the text box SHORTER than the glyphs, so they spill
     past it and collide with the legal line. Padding in em scales with the
     font, which a fixed px value cannot. */
  padding-bottom:.3em;
}
.footer__legal{
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);
}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .marquee__track,.hero__scroll{animation:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   SUBPAGES — policies & field notes
   ============================================================ */
.page-hero{background:var(--carbon-ink);color:#fff;padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,70px);}
.page-hero .label{color:rgba(255,255,255,.55);display:block;margin-bottom:14px;}
.page-hero h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.008em;font-size:clamp(34px,5.6vw,72px);line-height:1;margin:0;}
.page-hero p.page-hero__sub{color:rgba(255,255,255,.72);max-width:640px;font-size:17px;margin:20px 0 0;}
.prose{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) 0;}
.prose h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.008em;font-size:clamp(22px,2.6vw,30px);margin:44px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:19px;margin:30px 0 10px;}
.prose p{margin:0 0 16px;color:#2A3B50;line-height:1.7;}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px;color:#2A3B50;line-height:1.7;}
.prose li{margin-bottom:8px;}
.prose strong{color:var(--carbon-ink);}
.prose .todo{background:#FFF3DC;border:1px solid #F0C36D;border-radius:var(--r-sm);padding:12px 16px;font-size:14.5px;color:#7A5A18;margin:0 0 16px;}
.ship-table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px;}
.ship-table th{text-align:left;font-weight:600;color:var(--carbon-ink);padding:10px 12px 10px 0;border-bottom:1px solid var(--hairline);vertical-align:top;}
.ship-table td{text-align:right;white-space:nowrap;color:var(--ridge-grey);padding:10px 0;border-bottom:1px solid var(--hairline);vertical-align:top;}
.prose figure{margin:28px 0;}
.prose figure img{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--bone);}
.prose figcaption{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--ridge-grey);}
.prose .callout{background:var(--bone,#EEF2F7);border-left:4px solid var(--signal-yellow);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 20px;margin:0 0 16px;}
.prose .callout p{margin:0;}
.crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.crumb a{color:rgba(255,255,255,.6);}
.crumb a:hover{color:var(--signal-yellow);}
.article-meta{display:flex;gap:18px;margin-top:22px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.article-hero-art{border-radius:var(--r-md);overflow:hidden;margin:clamp(28px,4vw,48px) auto 0;max-width:960px;}
.article-hero-art svg{display:block;width:100%;height:auto;}
.prose .backlink{display:inline-flex;align-items:center;gap:8px;margin-top:34px;font-weight:700;color:var(--carbon-ink);}
.prose .backlink:hover{color:#E35300;}
.notes-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:clamp(40px,6vw,70px) 0;}
@media(max-width:900px){.notes-list{grid-template-columns:1fr;}}

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.crumb--ink{color:var(--ridge-grey);padding:22px 0 0;display:block;}
.crumb--ink a{color:var(--ridge-grey);}
.crumb--ink a:hover{color:var(--carbon-ink);}

.product{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(24px,4vw,44px) 0 clamp(60px,7vw,100px);}
@media(max-width:900px){.product{grid-template-columns:1fr;}}

.product-gal__main{position:relative;aspect-ratio:4/3.4;background:var(--bone);border-radius:var(--r-md);display:grid;place-items:center;overflow:hidden;}
.product-gal__main svg{width:64%;height:auto;}
.product-gal__badge{position:absolute;top:16px;left:16px;padding:6px 13px;border-radius:var(--r-pill);background:var(--carbon-ink);color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;}
.product-gal__note{position:absolute;bottom:14px;right:16px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ridge-grey);background:rgba(255,255,255,.85);padding:5px 10px;border-radius:var(--r-pill);}
.product-gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.product-gal__thumb{aspect-ratio:1;border-radius:var(--r-sm);background:var(--bone);border:1px solid var(--hairline);display:grid;place-items:center;cursor:pointer;transition:border-color .2s;padding:0;}
.product-gal__thumb svg{width:52%;height:auto;opacity:.85;}
.product-gal__thumb.is-active{border-color:var(--carbon-ink);}
/* Real photography: the photo fills the frame; thumbnails are photos too. */
.product-gal__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.product-gal__badge{z-index:1;}
.product-gal__thumbs--photos{grid-template-columns:repeat(6,1fr);gap:8px;}
.product-gal__thumbs--photos .product-gal__thumb{overflow:hidden;border-width:2px;border-color:transparent;}
.product-gal__thumbs--photos .product-gal__thumb.is-active{border-color:var(--carbon-ink);}
.product-gal__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:520px){.product-gal__thumbs--photos{grid-template-columns:repeat(3,1fr);}}
.product-gal__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.88);color:var(--carbon-ink);
  border:1px solid var(--hairline);
  transition:background .18s,box-shadow .18s;
}
.product-gal__arrow:hover{background:#fff;box-shadow:0 2px 10px rgba(16,44,78,.18);}
.product-gal__arrow:focus-visible{outline:2px solid var(--carbon-ink);outline-offset:2px;}
.product-gal__arrow--prev{left:12px;}
.product-gal__arrow--next{right:12px;}
@media(max-width:520px){.product-gal__arrow{width:34px;height:34px;}}
.card__media--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.card__media--photo .card__tag{z-index:1;}

.product-info__tag{display:inline-flex;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ridge-grey);margin-bottom:10px;}
.product-info h1{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.012em;font-size:clamp(32px,4.4vw,50px);line-height:1;margin:0 0 14px;}
.product-info__desc{color:var(--ridge-grey);font-size:16.5px;line-height:1.6;margin:0 0 20px;}
.product-info .chips{margin-bottom:24px;}
.product-info__price{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.product-info__price b{font-family:var(--font-display);font-weight:800;font-size:36px;letter-spacing:-.02em;}
.product-info__price small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ridge-grey);}
.product-info__stock{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ridge-grey);margin-bottom:24px;}
.product-info__stock i{width:7px;height:7px;border-radius:50%;background:#3E9B5C;display:block;flex:none;}

.product-cta{display:flex;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap;}
.qty{display:flex;align-items:center;border:1px solid var(--hairline);border-radius:var(--r-pill);overflow:hidden;flex:none;}
.qty button{width:38px;height:48px;font-size:18px;transition:background .2s;}
.qty button:hover{background:var(--bone);}
.qty input{width:38px;height:48px;border:0;text-align:center;font:inherit;font-weight:700;-moz-appearance:textfield;}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.btn--cart{background:var(--signal-yellow);color:var(--carbon-ink);font-weight:700;padding:0 30px;height:50px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:10px;transition:background .2s,transform .2s;flex:1;justify-content:center;min-width:180px;}
.btn--cart:hover{background:var(--yellow-deep);transform:translateY(-2px);}
.btn--cart.is-added{background:var(--carbon-ink);color:#fff;}

.product-trust{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ridge-grey);padding:16px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-bottom:6px;}

.acc{border-top:1px solid var(--hairline);}
.acc:last-of-type{border-bottom:1px solid var(--hairline);}
.acc summary{list-style:none;cursor:pointer;padding:17px 2px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;font-size:15.5px;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:'+';font-family:var(--font-body);font-weight:400;font-size:22px;color:var(--ridge-grey);}
.acc[open] summary::after{content:'\2013';}
.acc__body{padding:0 2px 22px;color:var(--ridge-grey);font-size:14.5px;line-height:1.65;}
.acc__body ul{margin:0;padding-left:20px;}
.acc__body li{margin-bottom:7px;}
.acc__body p{margin:0 0 12px;}
.acc__body p:last-child{margin-bottom:0;}

.spec-table{width:100%;border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--hairline);}
.spec-table tr:last-child{border-bottom:0;}
.spec-table th,.spec-table td{text-align:left;padding:13px 4px;font-size:14.5px;}
.spec-table th{color:var(--ridge-grey);font-weight:500;width:40%;}
.spec-table td{font-weight:600;color:var(--carbon-ink);}

.callout-todo{background:#FFF3DC;border:1px solid #F0C36D;border-radius:var(--r-sm);padding:14px 18px;font-size:14.5px;color:#7A5A18;margin:0 0 8px;}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--carbon-ink);color:#fff;padding:14px 22px;border-radius:var(--r-pill);font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:999;box-shadow:0 12px 30px rgba(16,44,78,.25);}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-.012em;font-size:clamp(32px,4.4vw,50px);margin:0 0 30px;}
.cart-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:start;}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr;}}

.cart-empty{border:1px solid var(--hairline);border-radius:var(--r-md);padding:clamp(40px,6vw,70px) 30px;text-align:center;}
.cart-empty h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:22px;margin:0 0 8px;}
.cart-empty p{color:var(--ridge-grey);margin:0 0 26px;}

.cart-items{border-top:1px solid var(--hairline);}
.cart-row{display:grid;grid-template-columns:1fr auto auto auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--hairline);}
.cart-row__name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:-.005em;}
.cart-row__price{font-family:var(--font-mono);font-size:12px;color:var(--ridge-grey);margin-top:4px;}
.cart-row__qty{display:flex;align-items:center;border:1px solid var(--hairline);border-radius:var(--r-pill);overflow:hidden;flex:none;}
.cart-row__qty button{width:32px;height:36px;font-size:16px;transition:background .2s;}
.cart-row__qty button:hover{background:var(--bone);}
.cart-row__qty input{width:32px;height:36px;border:0;text-align:center;font:inherit;font-weight:700;-moz-appearance:textfield;}
.cart-row__qty input::-webkit-outer-spin-button,.cart-row__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-row__total{font-family:var(--font-display);font-weight:800;font-size:17px;min-width:76px;text-align:right;}
.cart-row__remove{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ridge-grey);transition:background .2s,color .2s;flex:none;}
.cart-row__remove:hover{background:#FDECEA;color:#C6362A;}

.cart-summary{border:1px solid var(--hairline);border-radius:var(--r-md);padding:26px;position:sticky;top:100px;}
.cart-summary h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:16px;margin:0 0 18px;}
.cart-summary__row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--ridge-grey);padding:8px 0;}
.cart-summary__row.total{border-top:1px solid var(--hairline);margin-top:10px;padding-top:16px;color:var(--carbon-ink);font-weight:700;font-size:17px;}
.cart-summary .btn--cart{width:100%;margin-top:20px;}
.cart-summary__note{font-size:12.5px;color:var(--ridge-grey);line-height:1.6;margin-top:14px;}
/* The hidden attribute must always win. Without this, any component that sets
   its own display (e.g. .cart-summary__row{display:flex}) ignores it. */
[hidden]{display:none!important;}
.cart-summary__error{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:#FDECEA;color:#A42A20;font-size:13.5px;line-height:1.5;}
/* Referral code box in the cart, and the code handed out on the order-confirmed page. */
.cart-referral{margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline);}
.cart-referral__label{display:block;font-size:12.5px;font-weight:600;color:var(--carbon-ink);margin-bottom:8px;}
.cart-referral__row{display:flex;gap:8px;}
.cart-referral__input{flex:1;min-width:0;border:1px solid var(--hairline);border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:14px;text-transform:uppercase;}
.cart-referral__input:focus-visible{outline:2px solid var(--signal-yellow);outline-offset:1px;}
.cart-referral__applied{margin:0;font-size:13.5px;color:var(--carbon-ink);}
.cart-referral__msg{margin:10px 0 0;font-size:12.5px;line-height:1.5;}
.cart-referral__msg.is-bad{color:#A42A20;}
.cart-referral__msg.is-good{color:#1F6F4A;}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--ridge-grey);text-decoration:underline;cursor:pointer;}
.referral-card{margin-top:28px;padding:24px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--bone);}
.referral-card__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(18px,2.4vw,22px);margin:12px 0 10px;}
.referral-card__text{margin:0 0 12px;color:var(--ridge-grey);font-size:14.5px;line-height:1.65;}
.referral-card__code{font-family:var(--font-mono,monospace);letter-spacing:.06em;color:var(--carbon-ink);}
.enquiry{display:grid;gap:16px;margin:0 0 30px;}
.enquiry__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.enquiry__field{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--carbon-ink);}
.enquiry__field em{font-style:normal;font-weight:400;color:var(--ridge-grey);}
.enquiry__field input,.enquiry__field textarea,.enquiry__field select{border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 13px;font:inherit;font-size:15px;font-weight:400;color:var(--carbon-ink);background:var(--summit-white);}
.enquiry__field textarea{resize:vertical;min-height:120px;line-height:1.6;}
.enquiry__field input:focus-visible,.enquiry__field textarea:focus-visible,.enquiry__field select:focus-visible{outline:2px solid var(--signal-yellow);outline-offset:1px;}
.enquiry__status{margin:0;font-size:13.5px;line-height:1.6;}
.enquiry__status.is-bad{color:#A42A20;}
.enquiry__status.is-good{color:#1F6F4A;}
.enquiry__fine{margin:0;font-size:12.5px;color:var(--ridge-grey);}
@media (max-width:640px){.enquiry__row{grid-template-columns:minmax(0,1fr);}}
.enquiry__check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--carbon-ink);}
.enquiry__check input{width:18px;height:18px;margin-top:2px;flex:none;}
/* Product pages: "Tell me when it's back" and the Book a look line */
.stock-alert{margin:14px 0 4px;padding:14px 16px;border:1px solid var(--hairline);border-radius:var(--r-sm);display:grid;gap:10px;}
.stock-alert__title{margin:0;font-size:14.5px;font-weight:700;color:var(--carbon-ink);}
.stock-alert__row{display:flex;gap:8px;flex-wrap:wrap;}
.stock-alert__row input{flex:1 1 200px;min-width:0;border:1px solid var(--hairline);border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:15px;}
.stock-alert__fine{margin:0;font-size:12.5px;color:var(--ridge-grey);}
.fit-help{margin:16px 0 4px;display:grid;gap:10px;}
.look-link{font-size:13.5px;color:var(--carbon-ink);}
.look-link a{font-weight:700;color:var(--carbon-ink);}

/* Coming-soon signup (site/coming-soon.html). */
.signup{display:grid;gap:10px;}
.signup__input{border:1px solid var(--carbon-ink);border-radius:999px;padding:14px 20px;font:inherit;font-size:16px;background:var(--summit-white);color:var(--carbon-ink);width:100%;}
.signup__input:focus{outline:2px solid var(--carbon-ink);outline-offset:2px;}
.signup .btn{justify-self:start;}
.signup .btn[disabled]{opacity:.6;cursor:progress;}
.signup__fine{margin:4px 0 0;font-size:13px;line-height:1.5;opacity:.85;max-width:none !important;}
.signup__hint{margin:0;font-size:14px;max-width:none !important;}
.signup__hint button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;font-weight:700;cursor:pointer;}
.referral-card__terms{margin:14px 0 0;font-size:12.5px;}
.cart-referral__hint{margin:10px 0 0;font-size:12.5px;color:var(--ridge-grey);}
.referral-card__link{margin:0 0 16px;font-size:13px;color:var(--ridge-grey);word-break:break-all;}
.cart-row__warn{margin-top:6px;font-size:12.5px;font-weight:600;color:#A42A20;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.product-info__stock.is-out i{background:#C6362A;}
.product-info__stock.is-low i{background:var(--signal-yellow);}

/* ============================================================
   ORDER CONFIRMED
   ============================================================ */
.order-done{max-width:760px;}
.order-done .label{display:inline-flex;margin-bottom:16px;}
.order-done .cart-title{margin-bottom:18px;}
.order-done__lede{margin:0 0 34px;max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--ridge-grey);}
.order-done__lede b{color:var(--carbon-ink);}
.order-done__number{display:inline-block;margin:0 0 26px;padding:9px 14px;border-radius:var(--r-pill);background:var(--bone);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.order-done .cart-row{grid-template-columns:1fr auto;}
.order-done__totals{max-width:360px;margin:14px 0 0 auto;}
.order-done__next{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px;}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form{display:flex;flex-direction:column;gap:6px;margin:22px 0 0;}
.contact-form label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ridge-grey);margin-top:14px;
}
.contact-form label span{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:12px;opacity:.8;}
.contact-form input,.contact-form textarea{
  font-family:var(--font-body);font-size:15px;color:var(--carbon-ink);
  border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:13px 16px;background:#fff;width:100%;
}
.contact-form textarea{resize:vertical;min-height:130px;}
.contact-form input:focus,.contact-form textarea:focus{
  outline:2px solid var(--carbon-ink);outline-offset:1px;border-color:transparent;
}
.contact-form button{align-self:flex-start;margin-top:22px;}

/* ============================================================
   BRAND SUB-ELEMENTS
   The mountain icon, stepped lines and 4x4 badge, used as supporting
   graphic devices (permitted standalone use per the brand guidelines).
   Applied as background-images so a missing file renders as nothing
   rather than a broken-image icon. Drop files in assets/img/brand/.
   ============================================================ */

/* True aspect ratios of the supplied artwork — used so nothing distorts */
:root{
  --ar-mountain:2.277;
  --ar-steps:2.719;
  --ar-badge:3.590;
}

/* --- Mountain glyph on section eyebrows ---------------------
   Turns the existing "BASE CAMP / 001" labels into branded marks.
   Opt-in via .label--mark so unmarked labels stay exactly as they were. */
/* .label.label--mark, not .label--mark — `.sec-head .label` sets display:block
   at (0,2,0) and would otherwise win, collapsing ::before to an inline box
   where width/height are ignored and the glyph vanishes. */
.label.label--mark{display:inline-flex;align-items:center;gap:.6em;}
.label--mark::before{
  content:'';flex:none;
  height:1.75em;width:calc(1.75em * var(--ar-mountain));
  background:url(../img/brand/mountain-orange.png) left center/contain no-repeat;
}
.label--light.label--mark::before,
.page-hero .label--mark::before{background-image:url(../img/brand/mountain-white.png);}
.label--ink.label--mark::before{background-image:url(../img/brand/mountain-navy.png);}

/* --- Mountain section mark -----------------------------------
   The peak, centred as a section break. It replaced the stepped device
   (Trent, 24 Oct): the steps read as a stray double line at this size,
   while the peak is the mark people actually recognise us by. */
.brand-rule{
  height:clamp(34px,4vw,52px);
  background:url(../img/brand/mountain-navy.png) center/contain no-repeat;
  opacity:.5;
  /* The section above ends with a full --gap-section of padding while the one
     below starts at zero, so even margins land the mark nowhere near the
     middle. Pulling it up into that padding evens the air on both sides. */
  margin-top:calc(var(--gap-section) * -.28);
  margin-bottom:clamp(32px,4vw,56px);
}
/* The section gap stops shrinking at 80px on small screens while the content
   above keeps closing in, so the same pull that balances a desktop leaves
   almost nothing on a phone. Wider viewports can take the full pull. */
@media(min-width:900px){.brand-rule{margin-top:calc(var(--gap-section) * -.6);}}
.brand-rule--orange{background-image:url(../img/brand/mountain-orange.png);opacity:.9;}
.brand-rule--light{background-image:url(../img/brand/mountain-white.png);opacity:.4;}
.brand-rule--left{background-position:left center;}

/* --- Footer wordmark ----------------------------------------
   Deliberately NO mountain watermark behind it. Two faded elements at similar
   opacity read as mush, not depth: the peak collided with the letter spacing
   and the slopes cut diagonally across the glyphs. The word carries it alone. */

/* --- 4x4 badge in the product trust row ---------------------- */
.product-trust{display:flex;align-items:center;gap:13px;flex-wrap:wrap;}
.product-trust::before{
  content:'';flex:none;
  height:21px;width:calc(21px * var(--ar-badge));
  background:url(../img/brand/badge-4x4-orange.png) left center/contain no-repeat;
}

/* ── Sign-up pop-up (main.js signupPopup) ── */
.sp{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .25s ease;}
.sp.is-in{opacity:1;}
.sp__backdrop{position:absolute;inset:0;background:rgba(5,17,31,.62);backdrop-filter:blur(3px);}
.sp__card{position:relative;width:min(820px,100%);display:grid;grid-template-columns:1.1fr .9fr;background:#102C4E;color:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);transition:transform .25s ease;}
.sp.is-in .sp__card{transform:none;}
.sp__close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(5,17,31,.55);color:#fff;display:grid;place-items:center;cursor:pointer;}
.sp__close:hover{background:rgba(5,17,31,.8);}
.sp__close:focus-visible,.sp__form input:focus-visible,.sp__form button:focus-visible,.sp__social a:focus-visible{outline:3px solid #FF8600;outline-offset:2px;}
.sp__body{padding:44px 40px 34px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.sp__logo{width:96px;height:auto;margin-bottom:18px;}
.sp__title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,56px);line-height:.95;margin:0 0 10px;color:#fff;}
.sp__lede{margin:0 0 22px;font-size:16px;line-height:1.5;color:#D9E2EE;max-width:30ch;}
.sp__form{display:grid;gap:10px;width:100%;max-width:340px;}
.sp__form input{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:15px 16px;font:inherit;font-size:16px;}
.sp__form input::placeholder{color:#AFBDCE;}
.sp__form button{border:0;border-radius:10px;padding:15px;background:#FF8600;color:#102C4E;font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.sp__form button:hover{background:#FF9A2E;}
.sp__form button:disabled{opacity:.7;cursor:wait;}
.sp__fine{margin:12px 0 0;font-size:12px;line-height:1.5;color:#AFBDCE;max-width:340px;}
.sp__status{margin:14px 0 0;padding:12px 14px;border-radius:10px;font-size:15px;line-height:1.5;max-width:340px;}
.sp__status[hidden]{display:none;}
.sp__status.is-good{background:#FF8600;color:#102C4E;font-weight:600;}
.sp__status.is-bad{background:rgba(179,41,28,.25);border:1px solid rgba(255,140,120,.5);color:#FFECE8;}
.sp__social{display:flex;gap:16px;margin-top:22px;}
.sp__social a{color:#FBE7A2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;}
.sp__social a:hover{color:#fff;}
.sp__art{position:relative;min-height:100%;}
.sp__art svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
html.sp-open{overflow:hidden;}
@media (max-width:720px){
  .sp{align-items:end;padding:0;}
  .sp__card{grid-template-columns:1fr;border-radius:18px 18px 0 0;max-height:92vh;overflow:auto;}
  .sp__art{order:-1;height:150px;min-height:0;}
  .sp__body{padding:26px 20px 28px;}
  .sp__logo{display:none;}
}
@media (prefers-reduced-motion:reduce){.sp,.sp__card{transition:none;}}
.utility__rotate{display:inline-block;transition:opacity .3s ease;}
.utility__rotate.is-fading{opacity:0;}
@media (prefers-reduced-motion:reduce){.utility__rotate{transition:none;}}

/* ── Reviews ── */
.rv-stars{color:#FF8600;letter-spacing:.06em;}
.rv-summary{display:inline-flex;gap:6px;align-items:center;margin:6px 0 2px;font-size:14px;color:var(--carbon-ink);text-decoration:none;}
.rv-summary:hover{text-decoration:underline;}
.rv-section{padding-top:24px;}
.rv-heading{font-family:var(--font-display);text-transform:uppercase;margin:0 0 18px;}
.rv-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.rv-card{border:1px solid var(--hairline);border-radius:var(--r-sm);padding:18px;display:grid;gap:8px;align-content:start;}
.rv-title{margin:0;font-size:17px;}
.rv-body{margin:0;line-height:1.6;}
.rv-who{margin:0;font-size:13px;color:var(--ridge-grey);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.rv-verified{background:#E8F5EC;color:#1F6F4A;font-weight:700;border-radius:999px;padding:2px 8px;font-size:12px;}
.rv-reply{background:#F3F6FA;border-radius:8px;padding:10px 12px;font-size:14px;line-height:1.5;}
.rv-form-card{border:1px solid var(--hairline);border-radius:var(--r-sm);padding:20px;margin:0 0 18px;}
.rv-form-card h2{margin-top:0;}
.rv-pick{display:flex;gap:6px;}
.rv-pick__star{border:0;background:none;font-size:34px;line-height:1;color:#D5DCE6;cursor:pointer;padding:0 2px;}
.rv-pick__star.is-on{color:#FF8600;}
.rv-pick__star:focus-visible{outline:3px solid #FF8600;outline-offset:2px;border-radius:4px;}
.rv-google{background:#FFF4E6;border-radius:var(--r-sm);padding:18px;margin-top:10px;}
.rv-google p{margin-top:0;}
.owners__portrait--filled img{object-position:50% 50%;}

/* Homepage: the "where it's made" link under the four promises. */
.honest__made{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;margin-top:28px;padding:18px 22px;border-radius:var(--r-md);background:var(--carbon-ink);color:#fff;text-decoration:none;transition:transform .2s;}
.honest__made:hover{transform:translateY(-2px);}
.honest__made-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#FF8600;}
.honest__made-text{font-size:15px;line-height:1.5;color:rgba(255,255,255,.88);}
.honest__made-text strong{color:#fff;}
.honest__made-go{font-weight:700;color:#FF8600;white-space:nowrap;}
@media(max-width:760px){.honest__made{grid-template-columns:1fr;gap:8px;}}
.note__media--photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* Tent pages: the one-line "which one?" between the Xplorer and the Summit. */
.product-info__compare{margin:14px 0 0;padding:12px 14px;border-left:3px solid #FF8600;background:var(--bone);border-radius:6px;font-size:14.5px;line-height:1.55;}
.product-info__compare a{color:inherit;font-weight:600;}

/* Long galleries: one row of thumbnails that swipes sideways, instead of rows and rows. */
.product-gal__thumbs--strip{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:8px;padding-bottom:6px;scrollbar-width:thin;}
.product-gal__thumbs--strip .product-gal__thumb{flex:0 0 calc((100% - 40px) / 6);scroll-snap-align:start;}
@media(max-width:520px){.product-gal__thumbs--strip .product-gal__thumb{flex-basis:calc((100% - 24px) / 4);}}

/* 360° inside view on the Xplorer gallery. pan-y keeps page scrolling on phones while sideways drags turn the view. */
.product-gal__thumb--360{position:relative;}
.product-gal__360{position:absolute;inset:auto 4px 4px auto;background:#FF8600;color:#102C4E;font-weight:800;font-size:11px;padding:2px 6px;border-radius:6px;}
.product-gal__main.is-spinning{cursor:grab;touch-action:pan-y;user-select:none;}
.product-gal__main.is-spinning:active{cursor:grabbing;}
.product-gal__spinhint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(16,44,78,.85);color:#fff;font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;pointer-events:none;z-index:1;}