/* ==========================================================================
   Hassan Mart — Agent, Distributor, OEM & Workshop programme
   Palette is pulled from the brand's own logo (#FFD35E gold, keyed PNG) and the
   black-and-gold identity described in the company portfolio.
   Type: Bodoni Moda (didone display) + Jost (geometric body).
   ========================================================================== */

/* Self-hosted, latin subset, variable axes. font-display:swap so text paints on
   the first frame rather than waiting on the file. */
@font-face{
  font-family:"EB Garamond"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/eb-garamond-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"EB Garamond"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url("../fonts/eb-garamond-latin-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Jost"; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --oud:      #0B0705;   /* warm near-black — the page ground */
  --oud-2:    #120C07;
  --oud-3:    #1B1309;
  --gold:     #FFD35E;   /* sampled from the Hassan Mart logo */
  --gold-2:   #C99B3E;
  --gold-3:   #6E5320;
  --ink:      #17110C;
  --text:     #E9E0D2;
  --muted:    #B0A18B;
  --dim:      #8C8071;   /* faintest text allowed — 5.2:1 on --oud, still AA */

  --wrap: 1280px;
  --header-h: 76px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  --display: "EB Garamond", "Garamond", "Times New Roman", serif;
  --body: "Jost", "Avenir Next", "Century Gothic", system-ui, sans-serif;

  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23FFD35E' stroke-opacity='0.07'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3Cpath d='M32 16 48 32 32 48 16 32Z'/%3E%3Cpath d='M0 0h64v64H0z'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--oud);
  color:var(--text);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
/* Garamond carries a smaller x-height and longer extenders than a didone, so the
   didone's near-solid 1.02 leaves descenders clipping the line below. */
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; line-height:1.06; letter-spacing:-.005em; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold); color:var(--ink); }

/* Grain over everything. Not only texture: this page is mostly wide, very dark
   gradients, and those band visibly on 8-bit panels. Noise breaks the steps up. */
body::after{
  content:""; position:fixed; inset:0; z-index:85; pointer-events:none;
  background-image:var(--grain); background-size:200px 200px;
  opacity:.028;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.75rem 1.25rem; font-weight:500;
}
.skip:focus{ left:0; }

:where(a,button,summary,input,select):focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

/* ---------- shared type ---------------------------------------------------- */
.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.25rem;
}
/* Sizes run ~8% larger than the didone they replaced: same optical presence at a
   smaller x-height and a narrower set width. */
.h2{ font-size:clamp(2.6rem,1.5rem + 3.9vw,4.9rem); }
.lead{
  font-size:clamp(1.1rem,1.02rem + .35vw,1.35rem);
  color:var(--text); max-width:34ch; margin-top:1.25rem;
}

/* ---------- buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.75rem; border:1px solid transparent; border-radius:999px;
  font-family:var(--body); font-size:.82rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; white-space:nowrap;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:#FFE6A3; transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(255,211,94,.42); color:var(--gold); background:transparent; }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(255,211,94,.08); transform:translateY(-2px); }
.btn--wide{ width:100%; }
.btn__wa{ width:18px; height:18px; fill:currentColor; }

/* ---------- header --------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:rgba(11,7,5,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,211,94,.14);
}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto; height:100%;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.hdr__brand img{ height:clamp(34px,4vw,44px); width:auto; }
.nav{ display:flex; align-items:center; gap:clamp(1.25rem,2.5vw,2.5rem); }
.nav__list{ display:flex; gap:clamp(1.1rem,2vw,2rem); }
.nav__list a{
  text-decoration:none; font-size:.78rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-block:.5rem; position:relative; transition:color .3s;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s;
}
.nav__list a:hover{ color:var(--text); }
.nav__list a[aria-current="true"]{ color:var(--gold); }
.nav__list a[aria-current="true"]::after,
.nav__list a:hover::after{ transform:scaleX(1); }
.nav__cta{ padding:.7rem 1.35rem; font-size:.74rem; }

.burger{
  display:none; background:none; border:0; color:var(--gold); cursor:pointer; padding:.5rem;
}
.burger svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }

/* ==========================================================================
   1 · HERO — full-bleed photograph, type overlaid asymmetrically
   header (76px) + hero = exactly 100svh at scroll 0
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column;
  padding-inline:var(--pad);
  padding-block:clamp(1.5rem,4vh,3rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
/* Deliberately light. The plate is already near-black, so the heavy scrim a
   bright photo would need erases it into a flat colour block — which is exactly
   the hero this brief rules out. The copy sits over the darkest 40% anyway. */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,7,5,.82) 0%, rgba(11,7,5,.62) 40%, rgba(11,7,5,.12) 68%, rgba(11,7,5,.45) 100%),
    linear-gradient(to top, rgba(11,7,5,.88) 0%, transparent 40%);
}
/* margin-block:auto centres the block in the leftover space while leaving
   .hero__foot in normal flow at the bottom — an absolutely positioned foot
   sits on top of the copy the moment the hero gets tight. */
.hero__in{ max-width:var(--wrap); margin:auto; width:100%; }
/* The plate is cropped so its bottle sits at ~50–78% across. Holding the copy
   to a column keeps it clear of that, and lets the headline break on its own
   instead of on hand-placed <br>s that only suit one window size. */
.hero__col{ width:min(100%, 34rem); }
.hero__h{
  /* Bound by height as well as width: 1366x768 is wide but short, and a
     width-only clamp pushes the CTAs off the fold there. */
  font-size:clamp(2.8rem, min(1.1rem + 5vw, 13vh), 6.1rem);
  letter-spacing:-.015em; margin-bottom:clamp(1rem,2.2vh,1.75rem);
}
/* The gold phrase is the emphasis — let the roman half wrap around it rather
   than letting the column split it across two lines. */
.hero__h em{ font-style:italic; color:var(--gold); white-space:nowrap; }
.hero__sub{
  font-size:clamp(1.05rem,.98rem + .4vw,1.3rem);
  color:#DCD2C2; margin-bottom:clamp(1.5rem,3.2vh,2.5rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero__foot{
  flex:none; width:100%; max-width:var(--wrap); margin-inline:auto;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  padding-top:clamp(.6rem,1.4vh,1rem); border-top:1px solid rgba(255,211,94,.16);
}

/* ==========================================================================
   2 · PROOF — tight horizontal data band, gold hairlines, no imagery
   ========================================================================== */
.proof{ background:var(--oud-3); border-block:1px solid rgba(255,211,94,.16); }
.proof__list{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.proof__list li{
  padding:clamp(1.75rem,3.5vw,2.75rem) 1rem;
  text-align:center; border-inline-start:1px solid rgba(255,211,94,.14);
}
.proof__list li:first-child{ border-inline-start:0; }
.proof__n{
  display:block; font-family:var(--display); font-size:clamp(2.2rem,1.3rem + 2.85vw,3.7rem);
  color:var(--gold); line-height:1;
}
.proof__n i{ font-style:normal; font-size:.44em; color:var(--gold-2); }
.proof__k{
  display:block; margin-top:.6rem;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

/* ==========================================================================
   3 · BRAND — photograph bleeds off the left viewport edge, text staggered right
   ========================================================================== */
.brand{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center; gap:clamp(2rem,5vw,5.5rem);
  padding-block:clamp(4.5rem,9vw,8.5rem);
  padding-inline:0 max(var(--pad), calc((100% - var(--wrap))/2 + var(--pad)));
}
.brand__media{ position:relative; }
.brand__media > picture img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:0 4px 4px 0;
  filter:saturate(.92) contrast(1.04);
}
.brand__float{
  position:absolute; right:clamp(-3rem,-2vw,-1rem); bottom:clamp(-2.5rem,-3vw,-1.5rem);
  width:clamp(140px,17vw,230px); height:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.75));
}
.brand__body{ position:relative; }
.brand__body::before{
  content:""; position:absolute; left:-2.5rem; top:.35rem; width:1px; height:6.5rem;
  background:linear-gradient(var(--gold), transparent);
}
.facts{ margin-top:2.75rem; display:grid; gap:0; }
.facts__row{
  display:grid; grid-template-columns:minmax(9.5rem,auto) 1fr; gap:1.5rem;
  padding-block:1.15rem; border-top:1px solid rgba(255,211,94,.15);
}
.facts__row:last-child{ border-bottom:1px solid rgba(255,211,94,.15); }
.facts dt{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  padding-top:.3rem;
}
.facts dd{ color:#CFC5B4; font-size:.98rem; }

/* ==========================================================================
   4 · CATALOGUE — chip row + irregular gallery grid (lightbox)
   ========================================================================== */
.cat{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(4rem,8vw,7rem);
}
.cat__head{
  display:grid; grid-template-columns:auto 1fr; align-items:end;
  gap:clamp(1.5rem,4vw,4rem); margin-bottom:clamp(2.5rem,5vw,4rem);
}
.cat__head .eyebrow{ grid-column:1/-1; margin-bottom:0; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }
.chips li{
  border:1px solid rgba(255,211,94,.28); border-radius:999px;
  padding:.42rem 1rem; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
/* 8 tiles over a 4x3 grid = 12 cells, so exactly four of them must span two
   rows for the block to come out flush. Placement is explicit rather than
   auto-flowed: letting the tall ones fall where they may strands two empty
   cells in the last row. */
.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,200px); gap:18px;
}
.tile{ position:relative; }
.tile:nth-child(1){ grid-column:1; grid-row:1/3; }
.tile:nth-child(2){ grid-column:2; grid-row:1; }
.tile:nth-child(3){ grid-column:3; grid-row:1; }
.tile:nth-child(4){ grid-column:4; grid-row:1/3; }
.tile:nth-child(5){ grid-column:2; grid-row:2/4; }
.tile:nth-child(6){ grid-column:3; grid-row:2/4; }
.tile:nth-child(7){ grid-column:1; grid-row:3; }
.tile:nth-child(8){ grid-column:4; grid-row:3; }
.tile button{
  width:100%; height:100%; padding:1.25rem; cursor:pointer;
  background:linear-gradient(160deg,var(--oud-3),var(--oud-2));
  border:1px solid rgba(255,211,94,.16); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  transition:border-color .4s, transform .4s;
}
.tile button::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(58% 58% at 50% 46%, rgba(255,211,94,.14), transparent 70%);
  opacity:0; transition:opacity .45s;
}
.tile button:hover{ border-color:rgba(255,211,94,.5); transform:translateY(-4px); }
.tile button:hover::after{ opacity:1; }
.tile img{
  max-height:100%; width:auto; object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.6));
  transition:transform .5s;
}
.tile button:hover img{ transform:scale(1.05); }
.tile__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.7rem .9rem;
  background:linear-gradient(to top, rgba(11,7,5,.94), transparent);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s;
}
.tile button:hover .tile__cap, .tile button:focus-visible .tile__cap{ opacity:1; transform:none; }
.cat__houses{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,211,94,.15);
  font-size:.82rem; letter-spacing:.1em; color:var(--muted); text-align:center;
}

/* ==========================================================================
   5 · TIERS — mirrored 50/50 split panels
   ========================================================================== */
.tiers{
  background:
    var(--lattice),
    linear-gradient(180deg,var(--oud-2),var(--oud));
  border-top:1px solid rgba(255,211,94,.16);
  padding-block:clamp(4rem,8vw,7rem);
  padding-inline:var(--pad);
}
.tiers__head{ max-width:var(--wrap); margin-inline:auto; text-align:center; margin-bottom:clamp(2.5rem,5vw,4rem); }
.tiers__head .lead{ margin-inline:auto; max-width:44ch; }
/* Six rows, and each card hands them straight through with subgrid: kicker,
   name, price, blurb, spec, CTA. Three cards with blurbs of different lengths
   otherwise stagger every spec row against its neighbour, which is precisely
   the comparison the reader is trying to make. */
.tiers__split{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(6,auto); gap:1px;
  background:rgba(255,211,94,.2); border:1px solid rgba(255,211,94,.2); border-radius:4px;
  overflow:hidden;
}
.tier{
  background:var(--oud); padding:clamp(1.75rem,3.5vw,3rem);
  display:grid; grid-row:span 6; grid-template-rows:subgrid;
}
.tier header{ display:grid; grid-row:span 4; grid-template-rows:subgrid; }
.tier--hi{ background:linear-gradient(180deg,#1A1207,var(--oud)); }
.tier__k{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2);
}
.tier__n{ font-size:clamp(2.05rem,1.4rem + 1.85vw,3.15rem); margin-block:.75rem 1.25rem; }
.tier--hi .tier__n{ color:var(--gold); }
.tier__p{
  font-family:var(--display); font-size:clamp(1.6rem,1.28rem + .97vw,2.15rem); color:var(--text);
}
.tier__p span{ font-family:var(--body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tier__d{ margin-top:1rem; color:#C4BAA9; font-size:.95rem; max-width:36ch; }
.spec{ margin-block:2rem; }
.spec > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding-block:.8rem; border-bottom:1px solid rgba(255,211,94,.12);
}
.spec dt{ font-size:.8rem; color:var(--muted); letter-spacing:.04em; }
.spec dd{ font-size:.9rem; font-weight:400; color:var(--text); text-align:right; }
.spec dd[data-yes]{ color:var(--gold); }
.spec dd[data-no]{ color:var(--dim); }
/* Three columns leave ~260px of card at the tablet end of the range, which is
   narrower than these labels set on one line — let them wrap instead of
   pushing the pill past the card edge. */
.tier__cta{ margin-top:auto; white-space:normal; text-align:center; padding-inline:1.25rem; }
.tiers__note{
  max-width:var(--wrap); margin:1.5rem auto 0; text-align:center;
  font-size:.76rem; color:var(--dim); letter-spacing:.06em;
}

/* ==========================================================================
   6 · OEM — the offer on the left, the production sequence gridded on the right
   Deliberately not the gold spine of section 8: that one is a route the reader
   walks once, this one is a capability list they scan.
   ========================================================================== */
.oem{
  border-top:1px solid rgba(255,211,94,.16);
  background:linear-gradient(180deg,var(--oud-2),var(--oud));
  padding-block:clamp(4rem,8vw,7rem);
  padding-inline:var(--pad);
}
.oem__in{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.oem__head .btn{ margin-top:2.25rem; }
.rail{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.5rem,3vw,2.75rem); }
.rail li{ padding-block:1.35rem; border-top:1px solid rgba(255,211,94,.15); }
/* Six cells over two columns, so the last two are the bottom edge. */
.rail li:nth-last-child(-n+2){ border-bottom:1px solid rgba(255,211,94,.15); }
.rail__n{
  display:block; font-family:var(--display); font-size:.95rem;
  letter-spacing:.14em; color:var(--gold-2); margin-bottom:.35rem;
}
.rail h3{ font-size:clamp(1.25rem,1.08rem + .55vw,1.55rem); margin-bottom:.4rem; }
.rail p{ color:#C4BAA9; font-size:.93rem; max-width:34ch; }
/* Held to a readable measure and hung on the wrap's left edge — same trick as
   .apply__card — rather than stretched across the full 1280. */
.oem__note{
  width:min(100%,68ch);
  margin-block:clamp(2rem,4vw,3rem) 0;
  margin-inline:max(0px, calc((100% - var(--wrap))/2)) auto;
  padding-top:1.25rem; border-top:1px solid rgba(255,211,94,.15);
  font-size:.82rem; color:var(--dim); letter-spacing:.04em;
}

/* ==========================================================================
   7 · WORKSHOP — the pitch beside an invitation card
   ========================================================================== */
.wshop{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(4rem,8vw,7rem);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,4.5rem); align-items:center;
}
.ticks{ margin-top:2.25rem; display:grid; gap:1rem; }
.ticks li{ position:relative; padding-left:1.7rem; color:#C4BAA9; font-size:.97rem; }
/* Lozenge, not a tick: it is the same diamond the lattice motif is built from. */
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; background:var(--gold); transform:rotate(45deg);
}
.wshop__body > .btn{ margin-top:2.5rem; }
.invite{
  position:relative;
  background:var(--lattice), linear-gradient(160deg,var(--oud-3),var(--oud-2));
  border:1px solid rgba(255,211,94,.3); border-radius:5px;
  padding:clamp(1.75rem,3.5vw,2.75rem);
}
/* Inner hairline frame — the printed-invitation cue, and it keeps the card from
   reading as one more product tile. */
.invite::before{
  content:""; position:absolute; inset:9px; pointer-events:none;
  border:1px solid rgba(255,211,94,.14); border-radius:3px;
}
.card__k{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2); }
.card__t{
  font-family:var(--display); font-size:clamp(1.6rem,1.28rem + .97vw,2.15rem);
  color:var(--gold); margin:.5rem 0 1.5rem;
}
.card__list > div{
  display:grid; grid-template-columns:minmax(7rem,auto) 1fr; gap:1.25rem;
  align-items:baseline; padding-block:.9rem;
  border-top:1px dashed rgba(255,211,94,.22);
}
.card__list dt{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.card__list dd{ font-size:.93rem; color:#CFC5B4; }
.invite__note{
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px dashed rgba(255,211,94,.22);
  font-size:.78rem; color:var(--dim);
}

/* ==========================================================================
   8 · HOW — numbered steps hung off a vertical gold spine
   ========================================================================== */
.how{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(4rem,8vw,7rem);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);
}
.how__head{ position:sticky; top:calc(var(--header-h) + 3rem); align-self:start; }
.steps{ position:relative; padding-left:clamp(3.5rem,6vw,5rem); }
.steps::before{
  content:""; position:absolute; left:clamp(1.1rem,2vw,1.6rem); top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(180deg,var(--gold),var(--gold-3),transparent);
}
.steps li{ position:relative; padding-block:clamp(1.25rem,2.5vw,1.9rem); }
.steps__n{
  position:absolute; left:calc(clamp(3.5rem,6vw,5rem) * -1); top:clamp(1.25rem,2.5vw,1.9rem);
  width:clamp(2.2rem,4vw,3.2rem); height:clamp(2.2rem,4vw,3.2rem);
  display:grid; place-items:center; border-radius:50%;
  background:var(--oud); border:1px solid var(--gold-3);
  font-family:var(--display); font-size:1.1rem; color:var(--gold);
}
.steps h3{ font-size:clamp(1.45rem,1.18rem + .86vw,2rem); margin-bottom:.5rem; }
.steps p{ color:#C4BAA9; font-size:.97rem; max-width:44ch; }

/* ==========================================================================
   9 · QUOTE — full-bleed pull quote on lattice
   ========================================================================== */
.quote{
  background:var(--lattice), var(--oud-3);
  border-block:1px solid rgba(255,211,94,.16);
  padding:clamp(4rem,8vw,7rem) var(--pad);
  text-align:center;
}
.quote figure{ max-width:56rem; margin-inline:auto; }
.quote blockquote{ margin:0; }
.quote p{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.75rem,1.1rem + 2.85vw,3.5rem); line-height:1.26; color:var(--text);
}
.quote p::before{ content:"“"; color:var(--gold); }
.quote p::after{ content:"”"; color:var(--gold); }
.quote figcaption{
  margin-top:2rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.quote figcaption span{ color:var(--gold); }

/* ==========================================================================
   10 · FAQ — narrow single accordion column
   ========================================================================== */
.faq{
  max-width:52rem; margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(4rem,8vw,7rem);
}
.faq .h2{ margin-bottom:clamp(2rem,4vw,3rem); }
.acc details{ border-top:1px solid rgba(255,211,94,.16); }
.acc details:last-child{ border-bottom:1px solid rgba(255,211,94,.16); }
.acc summary{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding-block:1.4rem; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:clamp(1.2rem,1.08rem + .54vw,1.52rem); color:var(--text);
  transition:color .3s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--gold); }
.acc__i{ flex:none; color:var(--gold); transition:transform .35s; }
.acc__i svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; display:block; }
.acc details[open] .acc__i{ transform:rotate(180deg); }
.acc details p{ padding-bottom:1.5rem; color:#C4BAA9; max-width:60ch; font-size:.97rem; }

/* ==========================================================================
   11 · APPLY — form card overlapping a dark plate
   ========================================================================== */
.apply{
  position:relative; isolation:isolate;
  padding-block:clamp(4rem,8vw,7rem);
  padding-inline:var(--pad);
  background:var(--oud-2);
  border-top:1px solid rgba(255,211,94,.16);
}
.apply__plate{
  position:absolute; inset-block:0; right:0; z-index:-1; width:min(52%,720px);
  display:block;
}
.apply__plate img{ width:100%; height:100%; object-fit:cover; object-position:52% 45%; }
.apply::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,var(--oud-2) 32%, rgba(18,12,7,.72) 58%, rgba(18,12,7,.25) 100%);
}
/* Card hugs the container's left edge so it overlaps the plate rather than
   floating in the middle with dead black either side. */
.apply__card{
  width:min(100%,620px);
  margin-inline:max(0px, calc((100% - var(--wrap))/2)) auto;
  background:rgba(11,7,5,.88); backdrop-filter:blur(10px);
  border:1px solid rgba(255,211,94,.24); border-radius:5px;
  padding:clamp(1.75rem,4vw,3rem);
}
form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:2rem; }
.f{ display:flex; flex-direction:column; gap:.45rem; }
.f--wide{ grid-column:1/-1; }
.f label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.f label i{ font-style:normal; text-transform:none; letter-spacing:.02em; color:var(--dim); }
.f input,.f select{
  font-family:var(--body); font-size:.95rem; font-weight:300; color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,211,94,.2); border-radius:3px;
  padding:.8rem .9rem; width:100%;
  transition:border-color .3s, background .3s;
}
.f select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD35E' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:16px;
  padding-right:2.4rem;
}
.f input::placeholder{ color:var(--dim); }
.f input:focus,.f select:focus{ border-color:var(--gold); background:rgba(255,255,255,.06); outline:none; }
.f input:focus-visible,.f select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.f option{ background:var(--oud-3); color:var(--text); }
.f optgroup{ background:var(--oud-3); color:var(--gold); font-style:normal; font-weight:500; }
.f__err{
  grid-column:1/-1; margin:0; color:#FF9E8A; font-size:.85rem;
}
form .btn{ grid-column:1/-1; margin-top:.5rem; }
.f__note{
  grid-column:1/-1; text-align:center; font-size:.8rem; color:var(--dim);
}
.f__note a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(255,211,94,.35); }
.f__note a:hover{ border-bottom-color:var(--gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft{ background:var(--oud); border-top:1px solid rgba(255,211,94,.16); }
.ft__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  padding-block:clamp(3rem,6vw,4.5rem);
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(2rem,4vw,3rem);
}
.ft__brand img{ height:52px; width:auto; }
.ft__motto{
  margin-top:1.25rem; font-family:var(--display); font-style:italic;
  font-size:1.15rem; color:var(--gold-2); max-width:22ch;
}
.ft__col h2{
  font-family:var(--body); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem;
}
.ft__col address{ font-style:normal; color:var(--muted); font-size:.9rem; line-height:1.8; }
.ft__col li{ margin-bottom:.55rem; }
.ft__col a{ color:var(--muted); text-decoration:none; font-size:.9rem; transition:color .3s; }
.ft__col a:hover{ color:var(--gold); }
.ft__base{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  padding-block:1.5rem; border-top:1px solid rgba(255,211,94,.14);
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--dim);
}
.ft__sig a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(255,211,94,.4); }
.ft__sig a:hover{ border-bottom-color:var(--gold); }

/* ==========================================================================
   FLOATING WHATSAPP
   ========================================================================== */
.wa-float{
  position:fixed; right:clamp(1rem,2.5vw,1.75rem); bottom:clamp(1rem,2.5vw,1.75rem);
  z-index:80; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .3s;
}
.wa-float svg{ width:29px; height:29px; fill:currentColor; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; z-index:-1;
  animation:pulse 2.6s ease-out infinite;
}
.wa-float:hover{ transform:scale(1.08); }
@keyframes pulse{
  0%{ transform:scale(1); opacity:.65; }
  70%{ transform:scale(1.75); opacity:0; }
  100%{ transform:scale(1.75); opacity:0; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,4,3,.94); backdrop-filter:blur(6px);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.5rem,2vw,2rem); padding:clamp(1rem,4vw,3rem);
}
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; text-align:center; min-width:0; }
.lb__fig img{
  max-width:100%; max-height:76svh; width:auto; margin-inline:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.8));
}
.lb__fig figcaption{
  margin-top:1.5rem; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.lb button{
  background:none; border:1px solid rgba(255,211,94,.3); border-radius:50%;
  width:46px; height:46px; color:var(--gold); cursor:pointer;
  display:grid; place-items:center; flex:none;
  transition:background .3s, border-color .3s;
}
.lb button:hover{ background:rgba(255,211,94,.12); border-color:var(--gold); }
.lb button svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lb__x{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }

/* ==========================================================================
   MOTION — reveals degrade to visible without JS, and off under reduced-motion
   ========================================================================== */
.js .reveal{ opacity:0; transform:translateY(20px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; }
  .wa-float::before{ animation:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ==========================================================================
   TABLET  ≤1024px
   ========================================================================== */
@media (max-width:1024px){
  /* Six nav items plus the CTA stop fitting on one line well before the phone
     breakpoint, so the drawer starts here rather than at 767. */
  .nav{
    position:fixed; inset:var(--header-h) 0 auto; z-index:59;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,7,5,.98); backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,211,94,.18);
    padding:1rem var(--pad) 1.75rem;
    transform:translateY(-115%); transition:transform .4s cubic-bezier(.22,.61,.36,1);
    max-height:calc(100svh - var(--header-h)); overflow-y:auto;
  }
  .nav[data-open="true"]{ transform:none; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list a{ display:block; padding-block:.95rem; font-size:.9rem; border-bottom:1px solid rgba(255,211,94,.1); }
  .nav__list a::after{ display:none; }
  .nav__cta{ margin-top:1.25rem; width:100%; }
  .burger{ display:block; }

  .brand{ grid-template-columns:1fr; padding-inline:0; }
  .brand__media > picture img{ aspect-ratio:16/9; }
  .brand__body{ padding-inline:var(--pad); margin-top:3.5rem; }
  .brand__body::before{ display:none; }
  .brand__float{ right:var(--pad); bottom:-1.5rem; width:clamp(120px,20vw,180px); }

  .how{ grid-template-columns:1fr; }
  .how__head{ position:static; }

  /* Drop the desktop's hand-placed 4x3 mosaic: 8 tiles across 4 columns is
     two flush rows on its own. */
  .grid{ grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,190px); }
  .grid > .tile{ grid-column:auto; grid-row:auto; }

  .tiers__split{ grid-template-columns:1fr; }
  .oem__in{ grid-template-columns:1fr; }
  .wshop{ grid-template-columns:1fr; }

  .ft__in{ grid-template-columns:1fr 1fr; }
  .ft__brand{ grid-column:1/-1; }

  .apply__plate{ width:100%; }
  .apply::after{ background:linear-gradient(90deg,rgba(18,12,7,.97) 45%, rgba(18,12,7,.7)); }
}

/* ==========================================================================
   MOBILE  ≤767px
   ========================================================================== */
@media (max-width:767px){
  :root{ --header-h:62px; }

  .hero{ padding-block:clamp(1.5rem,4vh,2.5rem) clamp(3rem,8vh,4rem); }
  .hero__h{ font-size:clamp(2.8rem,11.2vw,3.9rem); }
  /* Portrait viewport crops the landscape plate to its middle — the bottle —
     so here the copy does sit over it. Pan slightly off the cap's specular
     highlight, and hold the scrim dark through the copy band, opening up lower
     down where only the bottle's body and the roses are. */
  .hero__bg img{ object-position:42% 50%; }
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(11,7,5,.9) 0%, rgba(11,7,5,.86) 44%,
                              rgba(11,7,5,.46) 74%, rgba(11,7,5,.9) 100%);
  }
  .hero__cta .btn{ width:100%; }
  .hero__foot{ font-size:.6rem; letter-spacing:.16em; }

  .proof__list{ grid-template-columns:1fr 1fr; }
  .proof__list li{ border-top:1px solid rgba(255,211,94,.14); }
  .proof__list li:nth-child(-n+2){ border-top:0; }
  .proof__list li:nth-child(odd){ border-inline-start:0; }

  .facts__row{ grid-template-columns:1fr; gap:.4rem; }

  .cat__head{ grid-template-columns:1fr; align-items:start; }
  .chips{ justify-content:flex-start; }
  .grid{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,158px); gap:12px; }
  .tile button{ padding:.9rem; }
  .tile__cap{ opacity:1; transform:none; font-size:.58rem; padding:.5rem .6rem; }

  /* One column, so "the last two cells" is no longer the bottom edge. */
  .rail{ grid-template-columns:1fr; }
  .rail li:nth-last-child(-n+2){ border-bottom:0; }
  .rail li:last-child{ border-bottom:1px solid rgba(255,211,94,.15); }
  .rail p{ max-width:none; }

  .card__list > div{ grid-template-columns:1fr; gap:.35rem; }

  .steps{ padding-left:3.25rem; }
  .steps::before{ left:1.1rem; }
  .steps__n{ left:-3.25rem; width:2.2rem; height:2.2rem; font-size:.9rem; }

  form{ grid-template-columns:1fr; }

  .ft__in{ grid-template-columns:1fr; }
  .ft__base{ flex-direction:column; align-items:flex-start; }

  .lb{ grid-template-columns:1fr; grid-template-areas:"fig"; }
  .lb__fig{ grid-area:fig; }
  .lb__p,.lb__n{ position:absolute; bottom:clamp(1rem,4vw,2rem); }
  .lb__p{ left:25%; }
  .lb__n{ right:25%; }
  .lb__fig img{ max-height:62svh; }

  .wa-float{ width:52px; height:52px; }
  .wa-float svg{ width:26px; height:26px; }
}