/* ═══════════════════════════════════════════════════════════════════
   brand.css — Sacred Services Co. shared design system
   ═══════════════════════════════════════════════════════════════════

   ONE source of truth for tokens, navigation, footer, buttons and
   motion primitives across every customer-facing page.

   Replaces (2026-07 rehaul):
     - 10 divergent :root blocks across public/*.html
     - 6 copy-pasted nav markup blocks in 2 incompatible variants
     - 111 byte-identical CSS rules shared by hotel-delivery +
       ship-worldwide

   NAMING: every shared class is prefixed `ss-` so it can never
   collide with the page-local CSS that still lives inside each
   page's own <style> block. Page CSS keeps its own class names.

   Loaded from each page as:
     <link rel="stylesheet" href="/assets/brand.css">
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. Design tokens ────────────────────────────────────────────
   The 2026-07 palette. Ground lifted off pure black (#0a0806 →
   #151009) so gold reads warm rather than harsh, and every text
   colour clears WCAG AA on that ground.

   Retired: --muted3 as a TEXT colour. It measured ~2.5:1 against
   the old ground and was being used on form labels at 11px. It
   survives only as --hair for rules and dividers.                */
:root{
  /* surfaces — each step is visibly distinct from the last */
  --bg:        #151009;
  --card:      #1e1710;
  --elev:      #282017;
  --soft:      #241b11;

  /* light surfaces — used for alternating sections + checkout,
     so a long page is not an unbroken wall of dark */
  --ivory:     #f6f0e4;
  --ivory2:    #fffdf7;
  --ivory-line:#e4d9c2;
  --ink:       #241b0d;
  --ink2:      #5c4f3a;
  --ink3:      #8a7a5f;

  /* borders */
  --border:    #332818;
  --border2:   #453723;
  --border3:   #5a4a30;
  --hair:      #5d4e38;   /* decorative rules ONLY — never text */

  /* brand gold — unchanged, this is the identity */
  --gold:      #c88720;
  --gold2:     #dda030;
  --gold3:     #e8b84b;

  /* text on dark */
  --cream:     #f7f0e2;   /* primary        ~15:1 */
  --muted:     #cfba98;   /* secondary      ~8.5:1 */
  --muted2:    #a89678;   /* tertiary       ~5.6:1 — AA at all sizes */

  /* semantic */
  --red:       #d4574a;
  --green:     #5cbb73;

  /* type */
  /* Two display faces, with different jobs — do not collapse them.

     --display is the BRAND's voice: headings, titles, section names,
     stat numbers, prices. Josefin Sans.

     --serif is the QUOTED voice: hadith, testimonials, the italic
     closing lines — and the Umrah Badal certificate, which is a
     document rather than a page. Cormorant Garamond, unchanged.

     Josefin has a notably small x-height, so it reads smaller than
     Cormorant at the same pixel size. Heading sizes were raised to
     compensate; if you set a new one, judge it by eye, not by number. */
  --display:"Josefin Sans",Futura,"Century Gothic",Avenir,sans-serif;
  --serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* type scale — 13px is the ABSOLUTE floor for any text.
     The old 10–11px labels move here and use letter-spacing to
     retain the "small caps" feel without being unreadable. */
  --t-micro:  13px;
  --t-small:  14.5px;
  --t-body:   17px;
  --t-lead:   18.5px;

  /* spacing — 8px scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* radii */
  --r:     18px;
  --r-sm:  12px;
  --r-pill:999px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.3,1);
  --nav-h:64px;
}


/* ─── 2. Reset + base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  background:var(--bg);
  scroll-behavior:smooth;
  /* offset in-page anchors so the fixed nav never covers a heading */
  scroll-padding-top:calc(var(--nav-h) + 16px);
}

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

@media(min-width:1400px){ body{font-size:var(--t-lead)} }

img,svg,video{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--bg)}

/* Focus ring — visible on every interactive element, both themes */
:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;border-radius:4px}

/* Skip link — first tab stop on every page */
.ss-skip{
  position:absolute;left:50%;top:-60px;transform:translateX(-50%);
  z-index:200;background:var(--gold);color:var(--bg);
  padding:12px 24px;border-radius:0 0 var(--r-sm) var(--r-sm);
  font-size:var(--t-small);font-weight:700;text-decoration:none;
  letter-spacing:.06em;transition:top .2s var(--ease);
}
.ss-skip:focus{top:0}


/* ─── 3. Typography helpers ───────────────────────────────────── */
.ss-serif{font-family:var(--serif)}
.ss-kicker{
  font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold2);font-weight:600;
}
/* Sizes are ~8% larger than the Cormorant originals: Josefin's
   x-height is much smaller, so matching pixel sizes would have read as
   a shrink. Tracking is pulled in slightly — a geometric face set large
   looks loose at default spacing. */
.ss-h1{font-family:var(--display);font-weight:500;font-size:clamp(45px,6.4vw,78px);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.ss-h2{font-family:var(--display);font-weight:500;font-size:clamp(35px,4.6vw,55px);line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.ss-h3{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.6vw,31px);line-height:1.18;letter-spacing:-.01em}
.ss-lead{color:var(--muted);font-size:var(--t-lead);max-width:56ch}
.ss-muted{color:var(--muted)}


/* ─── 4. Navigation ───────────────────────────────────────────────
   Shared across all pages. Brand on the left, links on the right,
   burger below 900px. Transparent over a hero, solid once scrolled
   (the `scrolled` class is added by brand.js).                   */
.ss-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--s5);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
.ss-nav.scrolled{
  background:rgba(21,16,9,.90);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);
}
/* Pages with no hero image start solid immediately */
.ss-nav.solid{
  background:rgba(21,16,9,.90);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);
}

.ss-nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.ss-nav-brand img{height:30px;width:auto;border-radius:6px}
.ss-nav-brand .ss-nav-name{
  font-family:var(--display);font-size:20px;color:var(--cream);
  letter-spacing:.01em;white-space:nowrap;
}
@media(max-width:420px){ .ss-nav-brand .ss-nav-name{display:none} }

.ss-nav-links{display:flex;gap:26px;align-items:center}
.ss-nav-links a{
  color:var(--muted);text-decoration:none;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;transition:color .25s var(--ease);
}
.ss-nav-links a:hover{color:var(--gold3)}
.ss-nav-links a.active{color:var(--gold3)}
.ss-nav-links a.ss-nav-cta{
  border:1px solid var(--border3);border-radius:var(--r-pill);
  padding:9px 20px;color:var(--cream);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.ss-nav-links a.ss-nav-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)}

/* Home — the filled gold pill. The pre-rehaul nav always carried an
   explicit gold Home button; the shared nav initially relied on the
   brand logo alone, which users didn't read as "home". Contact stays
   the outlined pill so the two never compete. */
.ss-nav-links a.ss-nav-home{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--gold2),var(--gold3));
  border-radius:var(--r-pill);padding:9px 20px;
  color:#1a1207;font-weight:700;
  transition:box-shadow .3s var(--ease),transform .25s var(--ease);
}
.ss-nav-links a.ss-nav-home:hover{
  color:#1a1207;box-shadow:0 6px 18px rgba(221,160,48,.35);
  transform:translateY(-1px);
}
/* The active-link marker turns links gold — on a gold-filled pill that
   would vanish. Ink-on-gold stays the active treatment. */
.ss-nav-links a.ss-nav-home.active{color:#1a1207}

/* Burger — properly labelled, 44px touch target */
.ss-burger{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--border2);border-radius:12px;
  color:var(--cream);cursor:pointer;
}
.ss-burger:hover{border-color:var(--gold);color:var(--gold3)}

/* 1300, not 900. Seven links plus the wordmark need about 1330px, so
   between 901 and 1330 the row was overflowing the viewport and taking
   Umrah Badal, Home and Contact off the right edge with it — silently,
   because the nav does not scroll. That covers 1280x800 and 1024
   landscape, which are ordinary laptop and tablet sizes. Measured on
   hotel-delivery: 37px over at 1280, 293px over at 1024. */
@media(max-width:1300px){
  .ss-nav{padding:0 var(--s3)}
  .ss-nav-links{display:none}
  .ss-burger{display:flex}
}

/* Mobile drawer — real dialog semantics, focus-trapped by brand.js.
   Uses visibility (not just opacity) so links behind it leave the
   tab order entirely when closed. */
.ss-drawer{
  position:fixed;inset:0;z-index:150;
  background:rgba(18,13,7,.985);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s1);padding:var(--s6) var(--s3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),visibility .3s;
}
.ss-drawer.open{opacity:1;visibility:visible;pointer-events:auto}
.ss-drawer a{
  font-family:var(--display);font-size:clamp(25px,5.7vw,38px);font-weight:400;
  color:var(--muted);text-decoration:none;padding:10px 20px;
  transition:color .2s var(--ease);text-align:center;
}
.ss-drawer a:hover,.ss-drawer a:focus-visible{color:var(--gold3)}
.ss-drawer a.ss-drawer-home{color:var(--gold2)}
.ss-drawer-rule{width:44px;height:1px;background:var(--border2)}
.ss-drawer-close{
  position:absolute;top:18px;right:18px;
  width:48px;height:48px;border-radius:50%;
  background:var(--card);border:1px solid var(--border3);
  color:var(--muted);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ss-drawer-close:hover{color:var(--gold3);border-color:var(--gold)}


/* ─── 5. Buttons ──────────────────────────────────────────────── */
.ss-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:none;border-radius:var(--r-pill);padding:16px 32px;
  min-height:52px;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease);
  will-change:transform;
}
.ss-btn-gold{
  background:linear-gradient(135deg,var(--gold2),var(--gold3));
  color:#1a1207;box-shadow:0 10px 30px rgba(221,160,48,.26);
}
.ss-btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(221,160,48,.38)}
.ss-btn-ghost{border:1px solid var(--border3);color:var(--cream);background:none}
.ss-btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold3)}
.ss-btn:active{transform:translateY(0)}


/* ─── 6. Layout helpers ───────────────────────────────────────── */
.ss-wrap{max-width:1240px;margin:0 auto;padding-left:var(--s4);padding-right:var(--s4)}
@media(max-width:640px){ .ss-wrap{padding-left:var(--s3);padding-right:var(--s3)} }

.ss-section{padding-top:var(--s7);padding-bottom:var(--s7)}
@media(max-width:640px){ .ss-section{padding-top:var(--s6);padding-bottom:var(--s6)} }

/* Light band — breaks up long dark pages */
.ss-light{background:var(--ivory);color:var(--ink)}
.ss-light .ss-kicker{color:#9c6b12}
.ss-light .ss-lead,.ss-light .ss-muted{color:var(--ink2)}

/* ─── Light band: FORM variant ─────────────────────────────────────
   Every page's form controls (.fi/.fl/.summary/.sec/...) are styled
   for the dark ground with no light-context rules anywhere. These
   context overrides let a page wrap its "filling out" section in
   <section class="ss-light ss-light-form"> and have the whole form
   re-colour itself — ivory fields, ink text, gold focus — without a
   single page-local rule. Field IDs and page JS are untouched; this
   is colour only.

   The calm-ivory checkout is deliberate UX, not decoration: the dark
   ground is theatre for browsing, the light band is a desk for
   reading, deciding and typing (the approved draft's pattern). */
.ss-light-form{
  --lf-line:#d3c4a4;

  /* ── Token re-point (the load-bearing part) ──────────────────────
     The first version of this block listed classes: .fi, .fl,
     .summary, .section-card … Every page-local card class it did NOT
     happen to name stayed dark-styled and sat on the ivory as a black
     brick — which is exactly what went wrong on umrah-badal
     (.form-section, .svc-opt) and would have gone wrong on the next
     page too.

     Page CSS is written against TOKENS (var(--bg-elev), var(--cream),
     var(--border2)…), and every page declares its own :root copy of
     them. So re-declaring those same token names on the band flips
     EVERY page-local rule inside it, including ones that don't exist
     yet. Colour only — no layout token is touched.

     Note the gold inverts its ramp: on the dark ground --gold3 is the
     BRIGHTEST step; on ivory the brightest step is the DARKEST, so
     gold3 maps to the deepest brown-gold. #9c6b12 on #f6f0e4 is
     4.9:1 — AA at every size, unlike #c88720 which is 2.9:1. */

  /* surfaces */
  --bg:#f6f0e4;
  --bg2:#fffdf7;  --bg3:#efe7d6;
  --card:#fffdf7; --bg-card:#fffdf7;
  --bg-elev:#fffdf7;
  --bg-soft:#efe7d6;
  --elev:#fffdf7; --soft:#efe7d6;

  /* borders */
  --border:#e4d9c2;
  --border2:#e0d4ba;
  --border3:#d3c4a4;
  --hair:#d3c4a4;

  /* text */
  --cream:#241b0d;
  --muted:#5c4f3a;
  --muted2:#6f6047;
  --muted3:#6f6047;

  /* brand gold, darkened for the light ground */
  --gold:#9c6b12;
  --gold2:#8b5e0e;
  --gold3:#7d540c;

  /* semantic */
  --red:#a8291c;
  --green:#2f7d45;
}
/* Cards inside the band lose their dark-ground border contrast, so a
   soft shadow does the lifting instead. Named classes, because this is
   a depth cue rather than a colour fix — a token can't express it. */
.ss-light-form .form-section,
.ss-light-form .section-card,
.ss-light-form .shipping-calc,
.ss-light-form .summary,
.ss-light-form .order-total-box{box-shadow:0 6px 24px rgba(36,27,13,.06)}
/* Error text is a literal hex on most pages (#e74c3c), which is only
   3.3:1 on ivory — token re-point can't reach it. */
.ss-light-form .pay-error,
.ss-light-form .field-err{color:#a8291c}

.ss-light-form .sec,
.ss-light-form .stitle,
.ss-light-form .section-card-title,
.ss-light-form .form-section-title{color:#9c6b12}
.ss-light-form .sec::after{background:var(--lf-line)}
.ss-light-form .fl{color:var(--ink2)}
.ss-light-form .fi{
  background:var(--ivory2);border-color:var(--lf-line);color:var(--ink);
}
.ss-light-form .fi::placeholder{color:#a89678}
.ss-light-form .fi:focus{
  border-color:#9c6b12;box-shadow:0 0 0 3px rgba(156,107,18,.15);
}
.ss-light-form .field-err{color:#b23a2e}
.ss-light-form .fi.error{border-color:#b23a2e;box-shadow:0 0 0 3px rgba(178,58,46,.12)}
.ss-light-form .summary,
.ss-light-form .order-total-box,
.ss-light-form .section-card{
  background:var(--ivory2);border-color:var(--ivory-line);
  box-shadow:0 6px 24px rgba(36,27,13,.06);
}
.ss-light-form .srow,
.ss-light-form .sempty{color:var(--ink2);border-color:var(--ivory-line)}
.ss-light-form .srow strong{color:var(--ink)}
.ss-light-form .stotal{border-color:var(--lf-line)}
.ss-light-form .stl{color:var(--ink2)}
.ss-light-form .sta{color:#9c6b12}
.ss-light-form hr{border-color:var(--ivory-line)}
/* Trust row + fine print under the pay buttons */
.ss-light-form .trust,
.ss-light-form .trust-item{border-color:var(--ivory-line);color:var(--ink2)}
.ss-light-form .bnote,
.ss-light-form .contact-link{color:var(--ink3)}
.ss-light-form .contact-link:hover{color:#9c6b12}
/* The wallet button is cream-on-dark; on ivory it needs to invert. */
.ss-light-form .bapple{background:var(--ink);color:var(--ivory)}
.ss-light-form .bapple:hover{background:#000}
/* Gift/dedication inputs inherit .fi; anything page-specific that
   reads wrong on ivory gets fixed at the page, not here. */

/* Card-style pay button reads better in its darker gold on ivory. */
.ss-light-form .bpay{color:#9c6b12;border-color:#9c6b12}
.ss-light-form .bpay:hover{background:rgba(156,107,18,.08)}

/* ─── The band itself ──────────────────────────────────────────────
   Form sections live INSIDE each page's centred 1120px container, but
   the ivory must span the full viewport — so the band breaks out with
   the 50vw trick and re-centres its content. Every page already
   carries overflow-x:hidden on body, which absorbs the scrollbar-width
   quirk this technique has. */
.ss-light-band{
  /* The fade strips below occupy the band's own margin, so the two
     MUST stay equal — one variable drives both. */
  --band-fade:140px;
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:var(--s6) 0 var(--s7);
  margin-top:var(--band-fade);
  margin-bottom:var(--band-fade);
}

/* ── Seam fades ────────────────────────────────────────────────────
   Without these the band lands as a hard horizontal line: dark, then
   ivory, in one pixel. These two strips sit in the band's own top and
   bottom margin — pure whitespace, never over content — and dissolve
   the ivory into the dark page at each end, so the eye reads a
   transition instead of a cut.

   The stops are very close to a LINEAR alpha ramp, which is the
   counter-intuitive part. Ivory composited over this particular dark
   ground happens to be near perceptually uniform in alpha — measured
   in L*, a straight ramp lands at 30 / 52 / 74 across the quarters,
   almost exactly even. An ease-in-out curve (the first attempt here)
   spends most of the strip almost fully dark and then rushes the last
   third, so 140px of fade read as ~60px with a visible edge. The only
   deviation from straight is a slight shoulder in the first and last
   8%, which kills the Mach band where the ramp meets flat colour.

   Colour is the literal ivory rather than var(--ivory) because
   .ss-light-form re-points tokens on this very element, and
   rgba(...,0) rather than `transparent` because `transparent`
   interpolates through grey.

   .ss-light-fade is the same effect for a light section that is NOT a
   breakout band — the homepage trust section, which is already
   full-bleed and has no margins. It fades into the neighbouring
   sections' padding instead, so its strips are shorter (96px is the
   slack that exists there). */
/* s7 is not arbitrary: it is exactly the .ss-section padding the strip
   has to fit inside, so the two move together if the scale changes. */
.ss-light-fade{--band-fade:var(--s7);position:relative}

.ss-light-band::before,
.ss-light-band::after,
.ss-light-fade::before,
.ss-light-fade::after{
  content:"";
  position:absolute;left:0;right:0;height:var(--band-fade);
  pointer-events:none;
}
.ss-light-band::before,
.ss-light-fade::before{
  bottom:100%;
  background:linear-gradient(to bottom,
    rgba(246,240,228,0)    0%,
    rgba(246,240,228,.045) 8%,
    rgba(246,240,228,.21) 25%,
    rgba(246,240,228,.47) 50%,
    rgba(246,240,228,.73) 75%,
    rgba(246,240,228,.94) 92%,
    rgba(246,240,228,1)  100%);
}
.ss-light-band::after,
.ss-light-fade::after{
  top:100%;
  background:linear-gradient(to top,
    rgba(246,240,228,0)    0%,
    rgba(246,240,228,.045) 8%,
    rgba(246,240,228,.21) 25%,
    rgba(246,240,228,.47) 50%,
    rgba(246,240,228,.73) 75%,
    rgba(246,240,228,.94) 92%,
    rgba(246,240,228,1)  100%);
}
/* Mobile shortens the slack the strips live in: .ss-section and
   .ss-foot-inner both drop their padding from s7 to s6, so the fade
   must come down with them or it would wash over content. */
@media(max-width:640px){
  .ss-light-band{--band-fade:88px}
  .ss-light-fade{--band-fade:var(--s6)}
}
.ss-light-band > .ss-band-inner{max-width:1120px;margin:0 auto;padding:0 var(--s3)}
.ss-light-band .checkout-col{max-width:680px;margin-left:auto;margin-right:auto}
/* First heading inside the band shouldn't carry the dark-ground 56px gap */
.ss-light-band .sec:first-child,
.ss-light-band .ss-band-inner > .sec:first-child,
.ss-light-band .checkout-col > .sec:first-child{margin-top:0}


/* ─── 7. Footer ───────────────────────────────────────────────────
   NEW in the 2026-07 rehaul — before this, no page on the site had
   a footer, so there was no persistent route to contact, policies
   or company details from anywhere.                              */
.ss-foot{border-top:1px solid var(--border);background:#120d07;margin-top:0}
.ss-foot-inner{
  max-width:1240px;margin:0 auto;padding:var(--s7) var(--s4) var(--s5);
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s5);
}
@media(max-width:800px){
  .ss-foot-inner{grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) var(--s3) var(--s4)}
}
.ss-foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;text-decoration:none}
.ss-foot-brand img{height:34px;width:auto;border-radius:6px}
.ss-foot-brand span{font-family:var(--display);font-size:23px;color:var(--cream)}
.ss-foot-about{color:var(--muted2);font-size:var(--t-small);max-width:40ch}
.ss-foot h2{
  font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold2);margin-bottom:var(--s2);font-weight:600;font-family:var(--sans);
}
.ss-foot-links a{
  display:block;color:var(--muted);text-decoration:none;
  font-size:15px;margin-bottom:11px;transition:color .25s var(--ease);
}
.ss-foot-links a:hover{color:var(--gold3)}
.ss-foot-base{border-top:1px solid var(--border)}
.ss-foot-base-inner{
  max-width:1240px;margin:0 auto;padding:var(--s3) var(--s4);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  color:var(--muted2);font-size:var(--t-micro);
}
@media(max-width:800px){ .ss-foot-base-inner{padding:var(--s3)} }


/* ─── 8. Motion primitives ────────────────────────────────────────
   THE RULE: content NEVER starts invisible. The old .reveal pattern
   used opacity:0, so scrolling fast left the viewport blank until
   the observer caught up — measured on the live site in July 2026.
   Everything here starts at 0.35 opacity and settles to 1.       */
.ss-rv{
  opacity:.35;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.ss-rv.in{opacity:1;transform:none}
.ss-rv-d1{transition-delay:.08s}
.ss-rv-d2{transition-delay:.16s}
.ss-rv-d3{transition-delay:.24s}

/* Hero entrance — runs once on load, no observer needed */
@keyframes ss-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.ss-rise{opacity:0;animation:ss-rise .95s var(--ease) forwards}
.ss-rise-1{animation-delay:.15s}
.ss-rise-2{animation-delay:.32s}
.ss-rise-3{animation-delay:.48s}
.ss-rise-4{animation-delay:.64s}

/* Gold sheen sweep — for hero display text only */
@keyframes ss-sheen{from{background-position:180% 0}to{background-position:-40% 0}}
.ss-sheen{
  background:linear-gradient(100deg,var(--gold) 15%,var(--gold3) 40%,#f3d98a 50%,var(--gold3) 60%,var(--gold) 85%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ss-sheen 7s linear 1.4s infinite;
}

/* 3D tilt — brand.js sets the transform. Desktop pointers only. */
.ss-tilt{transform-style:preserve-3d;transition:transform .35s var(--ease)}

/* Loading skeleton — replaces the blank sections that appeared while
   the product catalogue cold-started (measured at 4–5s live) */
@keyframes ss-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.ss-skel{position:relative;overflow:hidden;background:var(--elev);border-radius:var(--r-sm)}
.ss-skel::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(232,184,75,.09) 50%,transparent 70%);
  animation:ss-shimmer 1.6s infinite;
}
.ss-skel-line{height:14px;border-radius:7px;margin:8px 0}

/* ─── Ambient float ───────────────────────────────────────────────
   Slow drift for hero badges and ornaments. Deliberately 7s — fast
   enough to feel alive, slow enough to stay dignified. Stagger with
   .ss-float-2 so neighbouring elements never move in lockstep. */
@keyframes ss-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ss-float{animation:ss-float 7s ease-in-out infinite}
.ss-float-2{animation:ss-float 8.5s ease-in-out 1.2s infinite}

/* ─── Gold glass ──────────────────────────────────────────────────
   Blur-glass panel with a gold-tinted edge. The "liquid glass" nod
   from the design system without the perf cost of full morphing.
   For sticky bars, hero badges and stat tiles. */
.ss-glass{
  background:rgba(30,23,16,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(221,160,48,.22);
  border-radius:var(--r-sm);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}

/* ─── Shimmer divider ─────────────────────────────────────────────
   Section breaks become a slow gold light sweep instead of a flat
   line. Use as <div class="ss-divider" aria-hidden="true"></div>.  */
@keyframes ss-divider-sweep{from{background-position:200% 0}to{background-position:-200% 0}}
.ss-divider{
  height:1px;margin:var(--s6) auto;max-width:1120px;
  background:linear-gradient(90deg,transparent 0%,var(--border3) 20%,var(--gold2) 48%,#f3d98a 50%,var(--gold2) 52%,var(--border3) 80%,transparent 100%);
  background-size:200% 100%;
  animation:ss-divider-sweep 6s linear infinite;
}

/* ─── Count-up stats ──────────────────────────────────────────────
   Mark a number with class="ss-count" data-count="56" (optional
   data-suffix="kg"). brand.js animates it from 0 when it scrolls
   into view. Tabular numerals stop the layout breathing. */
.ss-count{font-variant-numeric:tabular-nums}

/* ─── Magnetic CTA ────────────────────────────────────────────────
   Primary buttons lean a few pixels toward the cursor. brand.js
   drives [data-magnetic]; desktop pointers only. */
[data-magnetic]{will-change:transform;transition:transform .3s var(--ease)}

/* Scroll cue */
@keyframes ss-drip{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}
.ss-scroll-cue{
  font-size:var(--t-micro);letter-spacing:.3em;text-transform:uppercase;color:var(--muted2);
  text-align:center;
}
.ss-scroll-cue::after{
  content:"";display:block;width:1px;height:34px;
  background:linear-gradient(var(--gold2),transparent);
  margin:10px auto 0;transform-origin:top;
  animation:ss-drip 2.2s ease-in-out infinite;
}


/* ─── 9. Reduced motion ───────────────────────────────────────────
   Honoured globally. The old site animated an infinite hero zoom
   with no reduced-motion guard at all.                           */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .ss-rv{opacity:1;transform:none}
  .ss-rise{opacity:1;animation:none}
  .ss-sheen{background:none;-webkit-text-fill-color:var(--gold3);color:var(--gold3)}
  .ss-tilt{transform:none !important}
  .ss-float,.ss-float-2{animation:none}
  .ss-divider{animation:none;background:var(--border3)}
  [data-magnetic]{transform:none !important}
}


/* ─── The page recipe, as utilities ────────────────────────────────
   The numbers the 2026-07 passes proved out, named so the NEXT page
   composes from here instead of needing a patch script. Existing
   pages keep their local classes; these are for new work.          */
.ss-page{max-width:1120px;margin:0 auto;padding:0 var(--s3) var(--s6)}
.ss-checkout-col{max-width:680px;margin:0 auto}
.ss-hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(42px,6.4vw,68px);line-height:1.06;text-wrap:balance}
.ss-hero-sub{font-size:18.5px;color:var(--muted);line-height:1.62;max-width:52ch}
.ss-sec{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);
  margin:var(--s6) 0 22px;display:flex;align-items:center;gap:10px;
}
.ss-sec::after{content:"";flex:1;height:1px;background:var(--border)}
.ss-field-label{
  display:block;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:9px;
}
.ss-field{
  width:100%;background:var(--elev);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:16px 17px;color:var(--cream);
  font-family:var(--sans);font-size:16px;outline:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-appearance:none;
}
.ss-field:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,135,32,.1)}

/* ─── 10. Utility ─────────────────────────────────────────────── */
.ss-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.ss-nowrap{white-space:nowrap}
.ss-tnum{font-variant-numeric:tabular-nums}

@media print{
  .ss-nav,.ss-drawer,.ss-foot,.ss-skip,.ss-scroll-cue{display:none !important}
  body{background:#fff;color:#000}
}