/* ============================================================================
   Aurora Jewellery Norge — Landing page
   Static HTML/CSS build, structured for a WordPress port.

   Contents
   01  Tokens
   02  Reset & base
   03  Typography & shared blocks
   04  Buttons, tags, icons
   05  Announcement bar + header + nav
   06  Hero
   07  USP strip
   08  Products
   09  Categories
   10  Material (dark)
   11  Care tips
   12  Price philosophy
   13  Brand story
   14  Testimonials (dark)
   15  FAQ
   16  Contact + form
   17  Newsletter
   18  Footer
   18b Inner pages (breadcrumb, article text, buy form)
   19  Motion & responsive
   ========================================================================== */


/* 01 — TOKENS =============================================================== */

:root{
  /* Brand surfaces — taken from the live store's theme palette */
  --paper:        #FFFDFB;
  --cream:        #F3ECE3;
  --cream-soft:   #F9F5F0;
  --sage:         #F1E3DF;
  --blush:        #F3E4E0;
  --blush-soft:   #FAF2F0;
  /* Neutral warm tile for product shots — blush multiplied onto a white
     studio background read as a pink cast, so media tiles use this. */
  --tile:         #F8F5F2;
  --blush-line:   #EBD7D2;
  --blush-deep:   #E2C4BD;

  /* Ink */
  --ink:          #2E2729;
  --ink-soft:     #5A5153;
  --ink-mute:     #8B8183;
  --ink-faint:    #BEB5B5;

  /* Night — the dark sections */
  --night:        #3B3236;
  --night-2:      #463C40;
  --night-3:      #52474B;
  --night-line:   rgba(255,255,255,.13);
  --night-ink:    #F7EFEC;
  --night-mute:   rgba(247,239,236,.62);

  /* Accent — 18K gold, the material the whole range is built on */
  --gold:         #A0766C;
  --gold-soft:    #D6B8AF;
  --gold-pale:    #EEDDD8;
  --gold-line:    rgba(160,118,108,.32);

  --line:         #E7DEDA;
  --line-soft:    #F1EBE8;

  /* Type */
  --display: "Playfair Display", "Times New Roman", serif;
  /* Product names: a clear, friendly sans that stays legible at small sizes. */
  --ui:      "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* One size per heading level, site-wide. The ranges are set so h1 > h2 > h3
     at EVERY viewport, not just at the clamp ends — the floors and the vw
     slopes are both ordered, so the curves never cross. Never hard-code a
     font-size on a heading; point it at the token for its level. */
  --h1: clamp(1.95rem, 3.70vw, 3.30rem);     /* 31.2 → 52.8 px */
  --h2: clamp(1.70rem, 3.40vw, 2.95rem);     /* 27.2 → 47.2 px */
  --h3: clamp(1.18rem, 1.42vw, 1.42rem);     /* 18.9 → 22.7 px */

  /* Leading and tracking travel with the size — a level is one set of
     metrics, not just one font-size. */
  --h1-lh: 1.06;  --h1-ls: .005em;
  --h2-lh: 1.10;  --h2-ls: -.012em;   /* sentence case wants tighter tracking */
  --h3-lh: 1.26;  --h3-ls: -.015em;

  /* Page canvas the panels sit on */
  --page:    #E5DFDD;

  /* Metrics */
  --content-max: 1200px;                     /* inner content cap, all panels */
  --pad:     clamp(20px, 4.5vw, 84px);       /* panel side padding            */
  --gutter:  var(--pad);
  --panel-r: 5px;                                   /* panel corner radius           */
  --panel-gap: 10px;                         /* canvas showing between panels */

  /* Hero language, shared site-wide */
  --card-r:  5px;                                   /* cards, tiles, media           */
  --pill-r:  5px;                            /* buttons, inputs, tags         */
  --shadow-soft: 0 24px 50px -38px rgba(47,40,43,.45);
  --shadow-lift: 0 38px 70px -40px rgba(47,40,43,.5);
  --r:       2px;
  --r-md:    4px;
  /* Two band heights, not seven ad-hoc ones. Panels are separated by
     --panel-gap, so the space the eye reads between two sections is
     (bottom of A) + gap + (top of B) — keeping the vertical padding to two
     values keeps that sum in a narrow, deliberate range. */
  --sec-y:       clamp(66px, 7.6vw, 112px);   /* standard band            */
  --sec-y-tight: clamp(52px, 5.8vw, 86px);    /* copy-light / closing bands */

  --ease:    cubic-bezier(.22,.61,.36,1);
}


/* 02 — RESET & BASE ========================================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:400; letter-spacing:-.015em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

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

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  z-index:200; background:var(--ink); color:var(--paper);
  padding:12px 22px; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translate(-50%,0); }

/* Inner content wrapper. Capped at --content-max so every panel — including
   the hero stage — starts its content on the same vertical line. */
.shell{
  width:100%;
  max-width:calc(var(--content-max) + var(--pad) * 2);
  margin-inline:auto;
  padding-inline:var(--pad);
}


/* 03 — TYPOGRAPHY & SHARED BLOCKS =========================================== */

/* --- PANEL SYSTEM --------------------------------------------------------
   Every band on the page is a full-bleed rounded panel stacked on the canvas,
   following the hero stage. `overflow:clip` rather than `hidden` so the FAQ's
   sticky column keeps working (hidden would turn each panel into a scroll box).
   ------------------------------------------------------------------------ */
.section,
.usp,
.newsletter{
  position:relative;
  border-radius:var(--panel-r);
  overflow:clip;
  margin-bottom:var(--panel-gap);
  background:var(--paper);
}

.section{ padding-block:var(--sec-y); }

/* Keep anchor targets clear of the fixed header when it is on screen. */
section[id]{ scroll-margin-top:96px; }
.section--cream{ background:var(--cream); }
.section--sage { background:var(--sage); }
.section--dark {
  background:var(--night);
  color:var(--night-ink);
}

/* Reaches screen readers and the document outline, paints nothing. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.eyebrow{
  font-size:11px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:20px;
}
.eyebrow--light{ color:var(--gold-soft); }

/* Every h2 on the page, wherever it lives: one size, one leading, one
   tracking. Uppercase is a per-section choice; the metrics are not. */
.sec-title,
.about__title,
.newsletter__title{
  font-size:var(--h2);
  line-height:var(--h2-lh);
  letter-spacing:var(--h2-ls);
}

/* Same for every h3, in every section. Declared here rather than in each
   block so the levels can't drift apart again — set colour, weight and
   transform locally, never the metrics. */
.product__name,
.tl h3,
.care__item h3,
.reasons h3,
.about__value h3,
.contact__card h3{
  font-size:var(--h3);
  line-height:var(--h3-lh);
  letter-spacing:var(--h3-ls);
}

/* Sentence case, as written in the markup — no text-transform, so the copy
   in the HTML is exactly what renders and the developer can trust it. */
.sec-title--light{ color:var(--night-ink); }

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,4vw,64px);
  align-items:end;
  margin-bottom:clamp(44px,5vw,72px);
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.section--sage .sec-head{ border-color:#DFE3DA; }
.section--dark .sec-head{ border-color:var(--night-line); }
.sec-note--light{ color:var(--night-mute); }
.sec-head--center{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  border:0;
  padding-bottom:0;
}
/* Mirrors .stage__blurb — small italic counterweight, set to the right. */
.sec-note{
  justify-self:end;
  text-align:right;
  color:var(--ink-mute);
  font-size:clamp(13px,1vw,14.5px);
  font-style:italic;
  font-weight:300;
  line-height:1.72;
  max-width:44ch;
  padding-bottom:6px;
}
.sec-head--center .sec-note{ justify-self:center; text-align:center; }

.sec-more{ margin-top:clamp(40px,5vw,60px); }

/* Closing call to action for a section. */
.sec-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px;
  margin-top:clamp(46px,5.5vw,76px);
}

.grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.2vw,34px); }
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,48px); }


/* 03b — LOADER ==============================================================
   The fill is two copies of the wordmark stacked: a dim one, and a bright
   one revealed left to right with clip-path. Deliberately plain <img> tags
   rather than a CSS mask of the same PNG — the mask rendered nothing, and
   an <img> uses the identical path the header logo already loads from, so
   there is no second way for it to fail.
   ========================================================================== */

.loader{ display:none; }
.js .loader{
  display:flex; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:300;
  background:transparent;          /* the two panes carry the fill */
}
/* Clicks pass through the moment it starts leaving. */
.js .loader.is-done{ pointer-events:none; }

/* The halves overlap by a fraction in the middle so no hairline of the page
   shows through the seam at fractional device pixel ratios. */
.loader__pane{
  position:absolute; top:0; bottom:0;
  width:50.3%;
  background:var(--cream);
  will-change:transform;
  /* Leaves fast and eases to a stop; the delay lets the wordmark clear
     first, so nothing is left hanging over the page as the halves part. */
  transition:transform 2.1s cubic-bezier(.16,1,.3,1) .39s;
}
.loader__pane--left { left:0; }
.loader__pane--right{ right:0; }
.loader.is-done .loader__pane--left { transform:translateX(-100%); }
.loader.is-done .loader__pane--right{ transform:translateX(100%); }
/* [hidden] alone loses to the .js .loader rule above, so it needs its own. */
.js .loader[hidden]{ display:none; }

/* Holds the page still while the overlay is up. Tied to the loader's own
   state rather than a class on <html>, so it releases itself and cannot be
   left behind if the script never finishes. Scoped to .js as well — without
   it the loader is display:none, and an unscrollable page behind an
   invisible overlay is the one failure worth ruling out. */
html.js:has(.loader:not(.is-done)){ overflow:hidden; }

.loader__mark{
  position:relative; z-index:1;     /* above both panes */
  width:clamp(190px,26vw,330px);
  transition:transform .53s var(--ease), opacity .53s var(--ease);
}
.loader.is-done .loader__mark{ transform:translateY(-14px); opacity:0; }

.loader__logo{ display:block; width:100%; height:auto; }
.loader__logo--ghost{ opacity:.17; }
.loader__logo--fill{
  position:absolute; left:0; top:0;
  width:100%; height:auto;
  clip-path:inset(0 100% 0 0);
  animation:loader-fill 2.66s cubic-bezier(.62,.02,.28,1) forwards;
}

@keyframes loader-fill{
  from { clip-path:inset(0 100% 0 0); }
  to   { clip-path:inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce){
  .loader__logo--fill{ animation:none; clip-path:none; }
  .loader__mark{ transition-duration:.2s; }
  .loader.is-done .loader__mark{ transform:none; }
  .loader__pane{ transition-duration:.25s; transition-delay:0s; }
}


/* 04 — BUTTONS, TAGS, ICONS ================================================= */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:12px;
  padding:17px 34px;
  font-size:12.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--pill-r);
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease);
}

/* Loading state: the label hides and a spinner turns in its place
   (main.js adds .is-loading on click/submit; --spin = colour of the label). */
.is-loading{
  position:relative; pointer-events:none; cursor:progress;
  color:transparent !important; -webkit-text-fill-color:transparent;
  transform:none !important;
}
.is-loading > *{ visibility:hidden; }
.is-loading::after{
  content:""; position:absolute; top:50%; left:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px;
  border:2px solid var(--spin, currentColor); border-right-color:transparent;
  border-radius:50%; visibility:visible;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn.is-loading{ --spin:var(--ink); }
.btn--dark.is-loading, .is-loading.button.alt, #place_order.is-loading{ --spin:var(--paper); }
.btn--line.is-loading{ background:transparent !important; --spin:var(--ink); }
.btn--light.is-loading{ --spin:var(--night); }
.btn--line-light.is-loading{ background:transparent !important; --spin:var(--night-ink); }
@media (prefers-reduced-motion:reduce){ .is-loading::after{ animation-duration:1.6s; } }

/* Icon inside a CTA — .btn__ico--move nudges forward on hover. */
.btn__ico{
  flex:0 0 auto;
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.btn:hover .btn__ico--move,
.btn:focus-visible .btn__ico--move{ transform:translateX(4px); }
.btn--dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--dark:hover{ background:#000; border-color:#000; transform:translateY(-2px); }

.btn--line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* Inverted pair, for CTAs sitting on a dark surface. */
.btn--light{ background:var(--night-ink); color:var(--night); border-color:var(--night-ink); }
.btn--light:hover{ background:#fff; border-color:#fff; transform:translateY(-2px); }

.btn--line-light{ background:transparent; color:var(--night-ink); border-color:rgba(247,239,236,.32); }
.btn--line-light:hover{
  background:var(--night-ink); color:var(--night);
  border-color:var(--night-ink); transform:translateY(-2px);
}

.link-arrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:7px;
  border-bottom:1px solid var(--ink);
  transition:gap .28s var(--ease), border-color .28s var(--ease);
}
.link-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; }
.link-arrow:hover{ gap:18px; border-color:var(--gold); }

.tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--paper); color:var(--ink);
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 15px;
  border:1px solid var(--line);
  border-radius:var(--pill-r);
}
.tag--gold{ background:var(--ink); color:var(--gold-pale); border-color:var(--ink); }

.ico{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.2;
      stroke-linecap:round; stroke-linejoin:round; }
.ico--lg{ width:40px; height:40px; stroke-width:1; }

/* Icons ringed like the hero's .circ buttons. box-sizing is global, so the
   declared size includes the padding. */
.ico--ring{
  width:62px; height:62px; padding:18px;
  border:1px solid var(--gold-line);
  border-radius:50%;
  stroke-width:1;
}


/* 05 — HEADER & NAV ========================================================= */

/* Primary nav lives inside the hero stage, so this bar stays hidden until the
   stage has scrolled away, then slides in. It reuses the stage bar's own
   classes (.stage__logo / .stage__nav / .circ / .pill) so the scrolled state
   is the same composition, just condensed onto a dark floating bar. Below
   980px it is the only nav and pins normally (see the responsive block). */
/* Light panel pinned to the top, curving at the bottom exactly like the hero
   stage does — same --panel-r, same full-bleed edges. */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.5) blur(14px);
  color:var(--ink);
  border-radius:0 0 var(--panel-r) var(--panel-r);
  box-shadow:0 18px 44px -32px rgba(47,40,43,.5);
  transform:translateY(-101%);
  transition:transform .45s var(--ease);
}
.header.is-shown{ transform:none; }
/* Square off while the mobile drop-down is open; the panel carries the curve. */
.header:has(.stage__nav.is-open){ border-radius:0; }

.header__inner{ min-height:78px; }
.header .stage__logo img{ width:clamp(126px,11vw,156px); }
.header .circ,
.header .pill{ height:clamp(38px,3.2vw,44px); }
.header .circ{ width:clamp(38px,3.2vw,44px); }

/* The bar's parts are shared with the dark stage, so re-tone them here. */
.header .stage__nav a,
.header .stage__nav .mega-trigger{ color:var(--ink-soft); }
.header .stage__nav a:hover,
.header .stage__nav .mega-trigger:hover,
.header .stage__nav .mega-trigger[aria-expanded="true"]{ color:var(--ink); }

/* --line is far too pale against the header's near-white plate, so the
   outlines use an ink tint to stay legible. */
.header .circ,
.header .pill{ border-color:rgba(46,39,41,.26); color:var(--ink); }
.header .circ:hover,
.header .pill:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.burger{ display:none; width:40px; height:40px; padding:9px 7px; }
.burger span{
  display:block; height:1px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span{ margin-top:6px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


/* 06 — HERO STAGE =========================================================== */
/* A single rounded card: dark upper half, white floor, and a fan of five
   portrait tiles fanned across it.                                          */

/* First panel: flush to the top and both edges, so it rounds only at the
   bottom. Every panel after it rounds on all four corners. */
.hero{ padding-block:0 var(--panel-gap); }

.stage{
  --pad-top:clamp(16px,1.9vw,30px);   /* top padding — kept tight             */
  position:relative;
  border-radius:0 0 var(--panel-r) var(--panel-r);
  overflow:hidden;
  background:var(--night);
}

/* Entrance: the top bar drops into place as the loader clears. Held off the
   screen only while JS is running, so with scripting off it is simply there. */
.js .stage__bar{ transform:translateY(-135%); opacity:0; }
.js.is-ready .stage__bar{
  transform:none; opacity:1;
  transition:transform 1.26s cubic-bezier(.16,1,.3,1) .7s,
             opacity .77s var(--ease) .7s;
}

/* Hero copy reveal: a wipe from the left, headline and blurb together.
   Starting at inset(… 100% …) means there is genuinely nothing on screen
   before it runs. The negative insets hold the clip slightly outside the
   text box — the headline's line-height is 1.06, so glyphs sit proud of it
   and a flush clip would shave ascenders and descenders. */
.js .stage__title,
.js .stage__blurb{
  clip-path:inset(-.35em 100% -.35em -.35em);
}
.js.is-ready .stage__title,
.js.is-ready .stage__blurb{
  clip-path:inset(-.35em -.35em -.35em -.35em);
  transition:clip-path 1.61s cubic-bezier(.16,1,.3,1) 1.4s;
}

@media (prefers-reduced-motion: reduce){
  .js .stage__bar{ transform:none; opacity:1; }
  .js .stage__title,
  .js .stage__blurb{ clip-path:none; }
}

/* Hold every stage block to the same content cap the .shell uses. */
.stage__bar,
.stage__intro,
.stage__foot{ max-width:var(--content-max); margin-inline:auto; }

/* No background or z-index on either half: .stage already paints the dark,
   so nothing here is an opaque layer that can cover the other half. The
   previous z-index:2 + opaque background on this block was painting over
   the top of the CTA row below it. */
.stage__top{
  position:relative;
  color:var(--night-ink);
  padding:var(--pad-top) var(--pad) 0;
}
.stage__bottom{
  position:relative;
  color:var(--night-ink);
  padding-top:clamp(28px,3vw,50px);
  padding-inline:var(--pad);
  padding-bottom:clamp(36px,4vw,60px);
}

/* --- Bar: logo left, links centred, actions right.
       Shared by the in-stage bar and the scrolled header. --- */
.stage__bar,
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.stage__logo{ display:inline-flex; align-items:center; gap:14px; }
.stage__logo img{ width:clamp(130px,13vw,178px); height:auto; }
.sparkle{ width:clamp(20px,2vw,27px); height:auto; fill:currentColor; flex:0 0 auto; }

.stage__nav ul{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }

/* The mega-menu trigger is a <button> so it can carry aria-expanded, but it
   has to read as one of the links — hence the shared selectors. */
.stage__nav a,
.stage__nav .mega-trigger{
  position:relative;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(247,239,236,.72);
  padding-block:6px;
  transition:color .25s var(--ease);
}
.stage__nav .mega-trigger{
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; background:none; border:0; padding-inline:0;
  cursor:pointer;
}
.mega-caret{
  width:13px; height:13px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.mega-trigger[aria-expanded="true"] .mega-caret{ transform:rotate(180deg); }

.stage__nav a::after,
.stage__nav .mega-trigger::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--gold-soft);
  transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--ease);
}
.stage__nav a:hover,
.stage__nav .mega-trigger:hover,
.stage__nav .mega-trigger[aria-expanded="true"]{ color:var(--night-ink); }
.stage__nav a:hover::after,
.stage__nav .mega-trigger:hover::after,
.stage__nav .mega-trigger[aria-expanded="true"]::after{ transform:scaleX(1); transform-origin:left; }

.stage__actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }


/* --- Products mega-menu -------------------------------------------------
   Fixed rather than absolute: the in-stage trigger sits inside .stage,
   which clips its children, and a fixed panel is positioned against the
   viewport instead. JS sets `top` from whichever trigger opened it.
   ---------------------------------------------------------------------- */
.mega{
  position:fixed; left:0; right:0; top:96px;
  z-index:99;
  padding-inline:var(--pad);
  visibility:hidden; opacity:0; transform:translateY(-10px);
  transition:opacity .26s var(--ease), transform .26s var(--ease),
             visibility 0s linear .26s;
}
.mega.is-open{
  visibility:visible; opacity:1; transform:none;
  transition-delay:0s;
}

.mega__inner{
  max-width:var(--content-max); margin-inline:auto;
  padding:clamp(20px,2.1vw,32px);
  background:var(--night);
  border:1px solid var(--night-line);
  border-radius:var(--panel-r);
  color:var(--night-ink);
  box-shadow:0 48px 96px -46px rgba(47,40,43,.78);
}

.mega__grid{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.3vw,22px);
}
.mega__card{ display:block; }
/* No multiply here, unlike the product tiles: these six shots have mixed
   backgrounds — white studio, linen, cloth — and the blend would dirty the
   non-white ones. The photo covers the tile edge to edge anyway, so the
   tile colour only shows while the image loads. */
.mega__media{
  display:block; aspect-ratio:1/1;
  background:var(--night-3);
  border-radius:var(--card-r);
  overflow:hidden;
}
.mega__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.mega__card:hover .mega__media img{ transform:scale(1.06); }
.mega__name{
  display:block; margin-top:13px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--night-ink);
  transition:color .25s var(--ease);
}
.mega__card:hover .mega__name{ color:var(--gold-soft); }

.mega__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px;
  margin-top:clamp(20px,2vw,30px);
  padding-top:clamp(16px,1.6vw,22px);
  border-top:1px solid var(--night-line);
}
.mega__links{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.2vw,34px); }
.mega__links a{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,239,236,.72);
  transition:color .25s var(--ease);
}
.mega__links a:hover{ color:var(--gold-soft); }
.mega__note{ font-size:12.5px; color:var(--night-mute); font-weight:300; }

.circ{
  display:grid; place-items:center;
  width:clamp(40px,3.6vw,48px); aspect-ratio:1;
  border:1px solid var(--night-line);
  border-radius:50%;
  color:var(--night-ink);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.circ svg{ width:19px; height:19px; fill:none; stroke:currentColor;
           stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.circ:hover{ background:var(--night-ink); border-color:var(--night-ink); color:var(--night); }

.pill{
  display:inline-flex; align-items:center; gap:11px;
  height:clamp(40px,3.6vw,48px);
  padding:0 clamp(18px,1.8vw,26px);
  border:1px solid var(--night-line);
  border-radius:5px;
  color:var(--night-ink);
  font-size:13px; letter-spacing:.02em;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pill svg{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor;
           stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.pill:hover{ background:var(--night-ink); border-color:var(--night-ink); color:var(--night); }

/* --- Intro: display headline left, small blurb right --- */
.stage__intro{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
  margin-top:clamp(22px,2.6vw,38px);
}
.stage__title{
  grid-column:1;
  justify-self:start;
  text-align:left;
  text-transform:none;
  font-size:var(--h1);
  line-height:var(--h1-lh);
  letter-spacing:var(--h1-ls);
  font-weight:400;
  color:var(--night-ink);
}
.stage__blurb{
  grid-column:2;
  justify-self:end;
  text-align:right;
  font-size:clamp(12.5px,1vw,14px);
  font-style:italic;
  font-weight:300;
  line-height:1.72;
  color:rgba(247,239,236,.66);
  max-width:46ch;
}

/* --- The fan --- */
.fan{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(4px,.75vw,12px);
  max-width:min(97%, var(--content-max));
  /* Negative bottom margin only reclaims the empty strip the centre tile's
     -10% lift leaves behind; the flex row still reserves its full height. */
  margin:clamp(52px,7vw,104px) auto calc(min(2.4vw, 50px) * -1);
}
.fan__item{
  position:relative;
  flex:0 0 auto;
  border-radius:5px;
  overflow:hidden;
  transform-origin:center;
  box-shadow:0 34px 60px -34px rgba(0,0,0,.6);
  /* `translate` is a separate property from `transform`, and is applied
     before it. That lets the entrance slide the card around without ever
     touching the fan pose below — so the hover lift keeps working on
     `transform` while the intro owns `translate`. */
  transition:transform .6s var(--ease),
             translate 1.5s cubic-bezier(.16,1,.3,1),
             opacity 1.1s var(--ease);
}

/* Symmetric fan, traced off the reference composition.

   The turn is a mirrored rotateY under a shallow perspective, NOT a 2D
   rotate — so every tile's left and right edges stay perfectly upright and
   only the near edge grows taller. perspective() must sit to the LEFT of
   rotateY in the list (it projects what follows it), and translateY sits
   left of both so the lift happens in screen space after projection.

   Centre tile: upright, widest, sits lowest.
   Tiles 2/4:   ride highest.
   Outer tiles: smaller, sit between the two.
   Layout widths total ~96% with gaps, and rotateY only ever narrows a tile,
   so no tile can overlap its neighbour.                                    */
.fan__item:nth-child(1){ width:17%;   aspect-ratio:170/250; transform:translateY(-41%) perspective(520px) rotateY(12deg);  z-index:1; }
.fan__item:nth-child(2){ width:19.1%; aspect-ratio:191/291; transform:translateY(-28%) perspective(520px) rotateY(8deg);   z-index:2; }
.fan__item:nth-child(3){ width:24%;   aspect-ratio:240/317; transform:translateY(-10%) perspective(520px);                 z-index:3; }
.fan__item:nth-child(4){ width:19.1%; aspect-ratio:191/291; transform:translateY(-28%) perspective(520px) rotateY(-8deg);  z-index:2; }
.fan__item:nth-child(5){ width:17%;   aspect-ratio:170/250; transform:translateY(-41%) perspective(520px) rotateY(-12deg); z-index:1; }

.fan__item:nth-child(1):hover{ transform:translateY(-45%) perspective(520px) rotateY(12deg);  }
.fan__item:nth-child(2):hover{ transform:translateY(-32%) perspective(520px) rotateY(8deg);   }
.fan__item:nth-child(3):hover{ transform:translateY(-14%) perspective(520px);                 }
.fan__item:nth-child(4):hover{ transform:translateY(-32%) perspective(520px) rotateY(-8deg);  }
.fan__item:nth-child(5):hover{ transform:translateY(-45%) perspective(520px) rotateY(-12deg); }

/* --- Fan entrance ------------------------------------------------------
   Each card starts hidden behind its inward neighbour, so the row unfolds
   outwards one step at a time: the inner pair emerges from behind the
   middle tile, the outer pair from behind the inner pair — not from the
   centre. Offsets are a share of each card's OWN width, worked out from the
   gap between its centre and its neighbour's.

   The middle tile starts while the headline is still revealing, so the two
   overlap rather than running back to back. Delays are written per property
   (transform, translate, opacity) so the hover lift is never delayed along
   with the intro.
   --------------------------------------------------------------------- */
.js .fan__item{ opacity:0; }
.js .fan__item:nth-child(1){ translate:115% 0; }    /* behind card 2 */
.js .fan__item:nth-child(2){ translate:120% 0; }    /* behind card 3 */
.js .fan__item:nth-child(3){ translate:0 150%; }    /* below the row   */
.js .fan__item:nth-child(4){ translate:-120% 0; }   /* behind card 3 */
.js .fan__item:nth-child(5){ translate:-115% 0; }   /* behind card 4 */

.js.is-ready .fan__item{ translate:0 0; opacity:1; }

/* 1 — the middle tile, slower than the rest */
.js.is-ready .fan__item:nth-child(3){
  transition-duration:.6s, 1.9s, 1.3s;
  transition-delay:0s, 2s, 2s;
}
/* 2 — the inner pair, outwards together */
.js.is-ready .fan__item:nth-child(2),
.js.is-ready .fan__item:nth-child(4){
  transition-delay:0s, 3s, 3s;
}
/* 3 — the outer pair, out from behind the inner pair */
.js.is-ready .fan__item:nth-child(1),
.js.is-ready .fan__item:nth-child(5){
  transition-delay:0s, 4s, 4s;
}

@media (prefers-reduced-motion: reduce){
  .js .fan__item{ opacity:1; translate:none; }
}

/* Photography fills each tile. Sources are portrait ~0.765; the tiles are a
   little narrower, so cover trims the sides evenly around the centred subject. */
.fan__item img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

/* --- White floor --- */
.stage__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px;
}


/* 07 — USP STRIP ============================================================ */

.usp{ padding-block:clamp(8px,1.4vw,20px); }
.usp__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.usp__item{
  padding:clamp(30px,3.4vw,46px) clamp(16px,2.4vw,36px);
  border-left:1px solid var(--line-soft);
}
.usp__item:first-child{ border-left:0; padding-left:0; }
.usp__item:last-child{ padding-right:0; }
.usp__item .ico{
  color:var(--gold); margin-bottom:20px;
  width:58px; height:58px; padding:16px;
  border:1px solid var(--gold-line); border-radius:50%; stroke-width:1;
}
/* A 13px tracked label, not a heading — it stays a <p> so the outline runs
   h1 → h2 without a skipped level through this strip. */
.usp__title{
  font-family:var(--body);
  font-size:13px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink);
}
.usp__item p:not(.usp__title){ margin-top:9px; font-size:14px; color:var(--ink-mute); font-weight:300; }


/* 08 — PRODUCTS ============================================================= */

/* --- CAROUSEL -------------------------------------------------------------
   Native scroll-snap: drag, swipe, trackpad and keyboard all work without
   JS; the buttons and the progress rail are enhancements on top. The track
   needs vertical padding because overflow-x:auto also clips the Y axis, and
   the cards lift 6px on hover and cast a soft shadow.
   ------------------------------------------------------------------------ */
.carousel{ --cgap:clamp(18px,2.2vw,34px); --cshow:4; position:relative; }

.carousel__track{
  display:flex;
  gap:var(--cgap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:12px 0 28px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* Every direct child is a slide, whatever it is — products or quotes. */
.carousel__track > *{
  flex:0 0 auto;
  width:calc((100% - (var(--cshow) - 1) * var(--cgap)) / var(--cshow));
  scroll-snap-align:start;
}

.carousel__rail{
  height:2px;
  background:var(--line);
  border-radius:var(--pill-r);
  overflow:hidden;
}
.carousel__bar{
  display:block; height:100%; width:25%;
  background:var(--ink);
  border-radius:var(--pill-r);
  transition:transform .25s var(--ease);
  transform-origin:left;
}

.carousel__foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
  /* Tighter than .sec-more: the track already carries 28px bottom padding
     plus the progress rail above this row. */
  margin-top:clamp(18px,2.2vw,30px);
}
.carousel__nav{ display:flex; gap:10px; }

/* Dot pagination, as an alternative to the progress rail. The current dot
   stretches into a pill rather than just changing colour. */
.carousel__dots{ display:flex; align-items:center; gap:8px; }
.carousel__dot{
  width:9px; height:9px; padding:0;
  border:0; border-radius:var(--pill-r);
  background:rgba(247,239,236,.26);
  cursor:pointer;
  transition:width .35s var(--ease), background .35s var(--ease);
}
.carousel__dot:hover{ background:rgba(247,239,236,.5); }
.carousel__dot.is-on{ width:32px; background:var(--gold-soft); }
.carousel__dot:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Filled by default — the arrows read as buttons rather than outlines. */
.circ--solid{
  background:var(--night-ink);
  border-color:var(--night-ink);
  color:var(--night);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.7);
}
.circ--solid:hover{ background:#fff; border-color:#fff; color:var(--night); }
/* The generic disabled rule only fades; at either end these become a faint
   plate instead, so the pair still reads as two buttons. */
.circ--solid[aria-disabled="true"]{
  opacity:1;
  background:rgba(247,239,236,.09);
  border-color:transparent;
  color:rgba(247,239,236,.32);
  box-shadow:none;
}

/* Re-tone the rail for the dark panels. */
.section--dark .carousel__rail{ background:var(--night-line); }
.section--dark .carousel__bar{ background:var(--night-ink); }

/* Circle buttons on a light surface. --line is a warm near-white and all but
   disappears against the panel, so the outline uses the same ink tint as the
   header's buttons. */
.circ--ink{ border-color:rgba(46,39,41,.26); color:var(--ink); }
.circ--ink:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.circ[aria-disabled="true"]{ opacity:.3; pointer-events:none; }
/* A flat 30% fade leaves almost nothing on a light panel. At either end this
   becomes a faint plate instead, so the pair still reads as two buttons —
   the same treatment .circ--solid gets on the dark panels. */
.circ--ink[aria-disabled="true"]{
  opacity:1;
  background:rgba(46,39,41,.05);
  border-color:transparent;
  color:rgba(46,39,41,.3);
}

@media (prefers-reduced-motion: reduce){
  .carousel__track{ scroll-behavior:auto; }
}

.product{ transition:transform .5s var(--ease); }
.product:hover{ transform:translateY(-6px); }

.product__media{
  position:relative; display:block;
  aspect-ratio:1/1;
  background:var(--tile);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  isolation:isolate;                  /* keep the multiply blend inside the tile */
}
.product__media img{
  width:100%; height:100%; object-fit:cover;
  mix-blend-mode:multiply;            /* studio shots sit on pure white */
  transition:transform .8s var(--ease);
}
.product:hover .product__media img{ transform:scale(1.05); }

.product__hint{
  position:absolute; left:16px; right:16px; bottom:16px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--paper); color:var(--ink);
  border-radius:var(--pill-r);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:12px 10px;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             background .3s var(--ease), color .3s var(--ease);
}
.product__hint::after{
  content:"";
  width:15px; height:9px;
  background:currentColor;
  /* thin arrow, drawn as a mask so it inherits the text colour */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21'/%3E%3Cpath d='M16 1.5 22 7l-6 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h21'/%3E%3Cpath d='M16 1.5 22 7l-6 5.5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.product:hover .product__hint::after{ transform:translateX(3px); }
.product:hover .product__hint,
.product__media:focus-visible .product__hint{ opacity:1; transform:translateY(0); }

/* Inverts under the pointer, the same way .cat__cta and .btn--line do. The
   card-hover rule above is more specific, so the arrow nudge has to match
   its weight to win. */
.product__hint:hover,
.product__media:focus-visible .product__hint{ background:var(--ink); color:var(--paper); }
.product:hover .product__hint:hover::after{ transform:translateX(6px); }

.product__body{ padding-top:18px; }
.product__cat{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.product__name{
  margin-top:8px; font-family:var(--ui); font-weight:500;
  font-size:clamp(15.5px,1.15vw,17px); line-height:1.35; letter-spacing:0;
}
.product__name a{ transition:color .25s var(--ease); }
.product__name a:hover{ color:var(--gold); }
.product__meta{ margin-top:6px; font-size:13px; color:var(--ink-mute); font-weight:300; }
.product__price{
  margin-top:12px;
  font-size:14px; font-weight:500; letter-spacing:.04em;
}


/* 09 — CATEGORIES =========================================================== */

/* Source shots are square, so the tile is square too — the photo is shown
   whole, never cropped. The label sits below the image rather than on top of
   it, so nothing covers the jewellery and no scrim dulls the picture. */
.cat{ display:block; transition:transform .5s var(--ease); }
.cat:hover{ transform:translateY(-6px); }

.cat__media{
  position:relative; display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--paper);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-soft);
}
.cat__media img{
  width:100%; height:100%;
  object-fit:contain;                 /* guarantees nothing is clipped */
  transition:transform .9s var(--ease);
}
.cat:hover .cat__media img{ transform:scale(1.04); }

.cat__label{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:18px 4px 0;
}
.cat__name{
  font-family:var(--display);
  font-size:clamp(1.12rem,1.4vw,1.3rem);
  color:var(--ink);
  transition:color .25s var(--ease);
}
.cat:hover .cat__name{ color:var(--gold); }
.cat__count{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* CTA under each card. A <span>, not a nested <a> — the whole card is already
   one link, so this stays valid markup while reading as a button. It inverts
   on card hover, matching .btn--line. */
.cat__cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  margin-top:16px;
  padding:13px 20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--pill-r);
  color:var(--ink);
  font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cat__cta svg{
  width:16px; height:16px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.cat:hover .cat__cta,
.cat:focus-visible .cat__cta{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.cat:hover .cat__cta svg,
.cat:focus-visible .cat__cta svg{ transform:translateX(4px); }


/* 10 — MATERIAL (DARK) ====================================================== */

/* This panel opts out of the shared overflow:clip. Clipping is the one thing
   that can silently kill position:sticky, and the only child that needed
   clipping was the gradient below — giving it the panel's own radius does
   the job, so the sticky column has a clean ancestor chain. */
.material{ overflow:visible; }
.material::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(64% 56% at 76% 22%, rgba(160,118,108,.14) 0%, rgba(160,118,108,0) 64%);
  pointer-events:none;
}
.material__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(40px,5.5vw,92px);
  align-items:stretch;
}

/* --- Sticky cross-section --------------------------------------------------
   .material__side is the grid item and stretches to the full row height (set
   by the taller timeline column), which gives the figure inside it a tall
   containing block to travel through — so it stays pinned until the last
   timeline step has passed. The panel uses overflow:clip, not hidden, so it
   does not become a scroll container and break sticky.
   ------------------------------------------------------------------------ */
.material__side{ position:relative; align-self:stretch; height:100%; }
.material__art{
  /* Capped so the diagram is meaningfully shorter than the timeline beside
     it — sticky only reads as sticky when there is travel to spare. */
  margin:0 auto;
  max-width:min(100%, 560px);
  position:sticky;
  top:clamp(78px,9vh,106px);
}
.section-cut{ width:100%; height:auto; }
.section-cut .cut-lead{ stroke:var(--gold-line); stroke-width:1; fill:none; }
.section-cut .cut-dot{ fill:var(--gold); }
.section-cut text{
  font-family:var(--body); font-size:13.5px; font-weight:500;
  fill:var(--night-ink); letter-spacing:.02em;
}
.section-cut text.cut-label__sub{
  font-size:12px; font-weight:300; fill:var(--night-mute); letter-spacing:.04em;
}

/* Labels dim, and one focus ring lights, as the timeline advances. */
.cut-item{ transition:opacity .45s var(--ease); }
.cut-ring{
  fill:none; stroke:var(--gold); stroke-width:2;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.section-cut[data-layer="core"] .cut-ring--core,
.section-cut[data-layer="bond"] .cut-ring--bond,
.section-cut[data-layer="gold"] .cut-ring--gold{ opacity:.9; }

.section-cut[data-layer="core"] .cut-item:not(.cut-item--core),
.section-cut[data-layer="bond"] .cut-item:not(.cut-item--bond),
.section-cut[data-layer="gold"] .cut-item:not(.cut-item--gold){ opacity:.3; }

.material__art figcaption{
  margin-top:20px;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,239,236,.42);
  text-align:center;
}

/* --- Vertical timeline ---------------------------------------------------
   A rail runs the full height; .timeline__fill is driven by scroll position
   in main.js and paints the travelled part gold. Markers light as they pass.
   ------------------------------------------------------------------------ */
.timeline{
  position:relative;
  padding-left:clamp(62px,6vw,92px);
}
.timeline::before,
.timeline__fill{
  content:"";
  position:absolute;
  left:clamp(23px,2.35vw,35px);
  top:12px;
  width:1px;
}
.timeline::before{ bottom:12px; background:var(--night-line); }
.timeline__fill{
  height:0;
  background:linear-gradient(to bottom, var(--gold-soft), var(--gold));
  transition:height .45s var(--ease);
}

.tl{ position:relative; padding-bottom:clamp(54px,6.4vw,104px); }
.tl:last-child{ padding-bottom:0; }

.tl__marker{
  position:absolute;
  left:calc(clamp(62px,6vw,92px) * -1);
  top:0;
  display:grid; place-items:center;
  width:clamp(46px,4.7vw,70px); aspect-ratio:1;
  border:1px solid var(--night-line);
  border-radius:50%;
  background:var(--night);
  font-family:var(--display);
  font-size:clamp(.82rem,1vw,1rem);
  color:var(--night-mute);
  transition:color .4s var(--ease), border-color .4s var(--ease),
             background .4s var(--ease), box-shadow .4s var(--ease);
}
.tl.is-done .tl__marker{ border-color:var(--gold-line); color:var(--gold-soft); }
.tl.is-active .tl__marker{
  border-color:var(--gold);
  color:var(--gold-soft);
  background:var(--night-2);
  box-shadow:0 0 0 6px rgba(160,118,108,.1);
}

.tl__body{ padding-top:clamp(4px,.9vw,12px); transition:opacity .45s var(--ease); }
.tl__kicker{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.tl h3{ color:var(--night-ink); }
.tl p{ margin-top:12px; font-size:15px; color:var(--night-mute); font-weight:300; }
.tl em{ color:var(--gold-soft); font-style:italic; }

.tl__badge{
  display:flex; align-items:center; gap:16px;
  margin-top:22px !important;
  padding-top:22px;
  border-top:1px solid var(--night-line);
}
.tl__badge span{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:60px; height:60px;
  border:1px solid var(--gold-line);
  border-radius:50%;
  font-family:var(--display); font-size:.95rem;
  color:var(--gold-soft);
}

/* Steps that have not been reached yet sit back a little. */
.js .timeline .tl__body{ opacity:.45; }
.js .timeline .tl.is-active .tl__body,
.js .timeline .tl.is-done .tl__body{ opacity:1; }


/* 11 — CARE TIPS ============================================================ */

.care__grid{
  margin-top:clamp(40px,4.6vw,60px);
  display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.care__grid--1{ grid-template-columns:minmax(0,420px); }
.care__grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.care__grid--4,
.care__grid--8{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1100px){
  .care__grid--4, .care__grid--8{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .care__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){
  .care__grid, .care__grid--1{ grid-template-columns:minmax(0,1fr); }
}
/* Editorial link card: icon and arrow on top, title, three lines of text,
   "Les mer" at the foot. Hover only warms the card — no photo, no lift. */
.care__item{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  padding:clamp(22px,2.2vw,30px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card-r);
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.care__top{ display:flex; align-items:flex-start; justify-content:space-between; width:100%; margin-bottom:clamp(22px,2.4vw,34px); }
.care__ico{
  width:46px; height:46px; padding:12px; border-radius:50%;
  background:var(--blush); color:var(--gold);
  fill:none; stroke:currentColor; stroke-width:1.2;
  transition:background-color .35s var(--ease);
}
.care__go{
  width:18px; height:18px; color:var(--ink-faint);
  fill:none; stroke:currentColor; stroke-width:1.4;
  transition:transform .35s var(--ease), color .35s var(--ease);
}
.care__item h3{ line-height:1.25; }
.care__item p{
  margin-top:10px; font-size:14px; line-height:1.65; color:var(--ink-soft); font-weight:300;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.care__item em{ font-style:italic; color:inherit; }
.care__more{
  margin-top:auto; padding-top:20px;
  font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--gold-line); padding-bottom:2px;
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
@media (hover:hover){
  a.care__item:hover{ background:var(--blush-soft); border-color:var(--gold-line); }
  a.care__item:hover .care__ico{ background:#fff; }
  a.care__item:hover .care__go{ color:var(--gold); transform:translate(3px,-3px); }
  a.care__item:hover .care__more{ border-color:var(--gold); color:var(--gold); }
}
a.care__item:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
}


/* 12 — PRICE PHILOSOPHY ===================================================== */

/* Warm off-white panel. The corner still is baked onto this exact colour,
   so keep the two in step. --line all but vanishes here, so the column rule
   and the hairlines between the reasons use an ink tint instead. */
.philosophy{
  background:var(--cream-soft);
  --rule:rgba(46,39,41,.16);
  /* Trimmed from --sec-y: the reasons column is the taller of the two, and a
     full section's worth of padding under it left a dead band. Named, because
     the corner still hangs off this edge and has to track it. */
  --pad-bottom:var(--sec-y-tight);
  padding-bottom:var(--pad-bottom);
}

.philosophy__inner{
  position:relative; z-index:1;   /* copy rides above the corner still */
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;            /* lets the column rule run the full height */
}

/* Bleeds off the panel's left and bottom edges, behind the stat card. */
.philosophy__still{
  position:absolute;
  left:0;
  bottom:clamp(-20px,-1.2vw,-8px);   /* stone runs off the edge, rings sit higher */
  width:clamp(240px,34%,560px);
  height:auto;
  pointer-events:none;
  user-select:none;
}

.philosophy__copy{ padding-right:clamp(30px,3.8vw,68px); }

.philosophy__lead{
  margin-top:clamp(22px,2.4vw,34px);
  color:var(--ink-soft); font-weight:300;
  font-size:clamp(15.5px,1.1vw,17.5px);
  line-height:1.7;
  max-width:58ch;   /* fills most of the column, as in the reference */
}
.stat{
  /* Tight under the lead, but never closing on it — the floor keeps a clear
     gap once the clamp bottoms out on small screens. */
  margin-top:clamp(22px,2.2vw,32px);
  padding:clamp(28px,3vw,42px);
  background:var(--blush);
  border:1px solid var(--blush-line);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-soft);
}
.stat__num{
  font-family:var(--display);
  font-size:clamp(2.6rem,4.4vw,3.9rem);
  line-height:1;
  color:var(--ink);
}
.stat__txt{
  margin-top:14px;
  font-size:clamp(14.5px,1vw,16.5px); line-height:1.6;
  color:var(--ink-soft); max-width:36ch; font-weight:300;
}

/* Numbered reasons, split off by a full-height column rule. Each row is its
   own grid so the gold numeral sits on the heading's baseline. */
.reasons{
  counter-reset:reason;
  border-left:1px solid var(--rule);
  padding-left:clamp(30px,3.8vw,68px);
}
.reasons li{
  counter-increment:reason;
  display:grid;
  grid-template-columns:clamp(52px,4.4vw,80px) minmax(0,1fr);
  align-items:baseline;
  padding-block:clamp(26px,2.7vw,40px);
  border-top:1px solid var(--rule);
}
.reasons li:first-child{ border-top:0; padding-top:0; }
.reasons li:last-child { padding-bottom:0; }
.reasons li::before{
  content:counter(reason,decimal-leading-zero);
  grid-column:1; grid-row:1;
  font-family:var(--display);
  font-size:clamp(1rem,1.15vw,1.3rem);
  color:var(--gold);
}
.reasons h3{
  grid-column:2; grid-row:1;
  font-weight:400;
}
.reasons p{
  grid-column:2; grid-row:2;
  margin-top:10px;
  font-size:clamp(14.5px,1vw,16.5px); line-height:1.65;
  color:var(--ink-soft); font-weight:300;
  max-width:42ch;
}


/* 13 — BRAND STORY ========================================================== */

/* Editorial three-column band, traced from the reference: 27.5 / 38.5 / 28
   of the content width. Runs wider than the other panels — ~50px outer
   margins rather than the shared content cap — so the photography reads at
   the scale the reference uses. */
.about{
  padding-block:var(--sec-y-tight);
  /* --line is near-invisible on the cream panel, so the rules in this
     section use an ink tint instead. */
  --rule:rgba(46,39,41,.20);
  --rule-soft:rgba(46,39,41,.15);
}
.about > .shell{
  max-width:none;
  padding-inline:clamp(20px,2.8vw,50px);
}

/* Bottom-aligned, so the right figure, the left figure and the CTA rule all
   finish on the same line. The right figure's higher start then falls out of
   its shorter height rather than needing a hand-set offset. */
.about__grid{
  display:grid;
  grid-template-columns:27.5fr 38.5fr 28fr;
  gap:clamp(26px,3.2vw,58px);
  align-items:end;
}

/* Square corners, no card, no shadow. Explicit heights rather than
   aspect-ratio so the left figure lands near 600px on a large desktop and
   the pair bottom-align: 600 − 495 = the right figure's top offset. */
.about__shot{ margin:0; overflow:hidden; border-radius:var(--card-r); background:none; }
.about__shot img,
.about__shot .ph{ width:100%; height:100%; object-fit:cover; }

/* The copy is the tallest item, so it sets the row. Stretching the left
   figure instead of giving it a fixed height puts its top edge on the row's
   top line — level with the "06 · Om oss" label — while its bottom stays on
   the image line. max-height keeps the crop sane if the copy runs long; when
   it bites, stretch falls back to start, so the top stays aligned either way. */
.about__shot--left{
  align-self:stretch;
  min-height:clamp(380px,33vw,600px);
  max-height:clamp(460px,44vw,780px);
}
.about__shot--right{ height:clamp(310px,27vw,495px); }

/* --- Centre column --- */
.about__copy{ padding-bottom:2px; }   /* sits the CTA rule on the image line */

.about__eyebrow{
  display:flex; align-items:center; gap:20px;
  font-size:12px;
  margin-bottom:clamp(16px,1.6vw,26px);
}
.about__eyebrow::after{
  content:""; flex:1 1 auto; max-width:168px;
  height:1px; background:var(--line);
}

/* Size, leading and tracking come from the shared h2 rule. */
.about__title{ color:var(--ink); }
.about__lead{
  margin-top:clamp(18px,2vw,30px);
  font-family:var(--display);
  font-size:clamp(1.3rem,1.85vw,2rem);       /* up to 32px */
  font-weight:400;
  line-height:1.34;
  color:var(--ink);
}
.about__body{
  margin-top:clamp(16px,1.6vw,24px);
  font-size:clamp(15.5px,1.05vw,19px);
  line-height:1.72;
  color:var(--ink-soft); font-weight:300;
}
.link-arrow--wide{ margin-top:clamp(24px,2.8vw,40px); padding-right:44px; }

/* --- Compact benefits row --- */
.about__values{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(30px,3.4vw,52px);
  padding-top:clamp(22px,2.4vw,34px);
  border-top:1px solid var(--rule);
}
.about__value{
  display:flex; align-items:flex-start; gap:16px;
  padding-inline:clamp(18px,2.6vw,46px);
  border-left:1px solid var(--rule-soft);
}
.about__value:first-child{ border-left:0; padding-left:0; }
.about__value:last-child{ padding-right:0; }
.about__value .sparkle{ width:17px; margin-top:5px; color:var(--gold); }
.about__value h3{ font-family:var(--display); font-weight:400; }
.about__value p{ margin-top:5px; font-size:14.5px; color:var(--ink-mute); font-weight:300; }

.about__legal{
  margin-top:clamp(18px,2vw,32px);
  text-align:right;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* --- Reusable placeholder tile --- */
.ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  width:100%; height:100%;
  background:linear-gradient(155deg, var(--cream-soft) 0%, var(--sage) 52%, var(--tile) 100%);
  color:var(--ink-mute); text-align:center;
}
.ph svg{
  width:clamp(22px,2.2vw,30px); height:auto;
  fill:none; stroke:currentColor; stroke-width:1;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.55;
}
.ph span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.65; }

/* The cream gradient glares on the night panels. */
.ph--dark{
  background:linear-gradient(155deg, var(--night-3) 0%, var(--night-2) 60%, var(--night) 100%);
  color:var(--night-mute);
}


/* 14 — TESTIMONIALS (DARK) ================================================== */

.testi__head{ text-align:center; max-width:920px; margin-inline:auto; }
.testi__pull{ margin:0; }
.testi__pull p{
  font-family:var(--display);
  font-size:clamp(1.7rem,3.6vw,3rem);
  line-height:1.22;
  letter-spacing:-.018em;
  color:var(--night-ink);
}
.testi__sub{
  margin-top:22px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mute);
}

/* Three quotes at a time; --cshow is the only number to change. */
.testi__carousel{ --cshow:3; margin-top:clamp(52px,6vw,80px); }

/* Portrait down the left, everything else stacked on the right. The image
   column is a ratio of the card so it holds its proportion as --cshow
   changes, with a floor and a ceiling so the face never gets too narrow to
   read or wide enough to crowd the quote. */
.quote{
  margin:0;
  display:flex;
  background:var(--night-2);
  border:1px solid var(--night-line);
  border-radius:var(--card-r);
  overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.quote:hover{ transform:translateY(-6px); border-color:var(--gold-line); }

/* Absolute fill, so the portrait takes its height from the card's row
   rather than adding to it. */
.quote__shot{ position:relative; background:var(--night-3); }
.quote__shot img,
.quote__shot .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.quote__body{
  flex:1 1 auto; display:flex; flex-direction:column;
  padding:clamp(22px,2.2vw,34px);
}

.stars{ display:flex; gap:4px; color:var(--gold-soft); font-size:14px; letter-spacing:.1em; }

.quote blockquote{ margin:clamp(16px,1.6vw,22px) 0 0; }
.quote blockquote p{
  font-size:clamp(15px,1.12vw,17px); line-height:1.66; font-weight:300;
  color:rgba(247,239,236,.86);
}
.quote blockquote p::before{ content:"\201C"; }
.quote blockquote p::after{ content:"\201D"; }

.quote figcaption{ margin-top:auto; padding-top:clamp(20px,2vw,30px); }
.quote__name{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.02rem,1.1vw,1.18rem);
  color:var(--night-ink);
}
.quote__role{
  display:block; margin-top:6px;
  font-size:13px; font-weight:300;
  color:var(--night-mute);
}


/* 15 — FAQ ================================================================== */

.faq__inner{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(40px,5vw,96px);
  align-items:start;
}
.faq__aside{ position:sticky; top:120px; }
.faq__note{ margin:24px 0 26px; color:var(--ink-soft); font-weight:300; font-size:15px; max-width:34ch; }

/* Each answer is its own rounded card, matching the hero's surface language. */
.acc{
  background:var(--cream-soft);
  border:1px solid transparent;
  border-radius:var(--card-r);
  padding-inline:clamp(20px,2.2vw,32px);
  margin-bottom:10px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease);
}
.acc:last-of-type{ margin-bottom:0; }
.acc[open]{
  background:var(--paper);
  border-color:var(--gold-line);
  box-shadow:var(--shadow-soft);
}
.acc summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:24px 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-size:clamp(1.08rem,1.5vw,1.28rem);
  line-height:1.4;
  transition:color .25s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--gold); }

.acc summary i{
  position:relative; flex:0 0 auto;
  width:18px; height:18px; margin-top:6px;
}
.acc summary i::before,
.acc summary i::after{
  content:""; position:absolute; left:0; top:50%;
  width:18px; height:1px; background:var(--ink);
  transition:transform .3s var(--ease);
}
.acc summary i::after{ transform:rotate(90deg); }
.acc[open] summary i::after{ transform:rotate(0); }
.acc[open] summary{ color:var(--gold); }

/* Set by main.js for the length of the close animation, so the marker and
   heading revert immediately instead of waiting for [open] to drop. */
.acc.is-closing[open] summary i::after{ transform:rotate(90deg); }
.acc.is-closing[open] summary{ color:var(--ink); }
.acc.is-closing[open]{
  background:var(--cream-soft);
  border-color:transparent;
  box-shadow:none;
}

.acc__body{ padding:0 8% 26px 0; }
.acc__body p{ font-size:15px; color:var(--ink-soft); font-weight:300; }
.acc__body ul{ margin-top:12px; }
.acc__body li{
  position:relative; padding-left:20px; margin-top:8px;
  font-size:15px; color:var(--ink-soft); font-weight:300;
}
.acc__body li::before{
  content:""; position:absolute; left:0; top:12px;
  width:7px; height:1px; background:var(--gold);
}


/* 16 — CONTACT + FORM ======================================================= */

.contact__inner{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(24px,3vw,44px);
  align-items:start;
}

.form{
  background:var(--paper);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-soft);
  padding:clamp(30px,3.6vw,52px);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ margin-bottom:22px; }
.field label{
  display:block; margin-bottom:9px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.field label span[aria-hidden]{ color:var(--gold); }
.field__opt{ color:var(--ink-faint); letter-spacing:.08em; text-transform:none; font-weight:400; }

.field input,
.field textarea,
.select select,
.select__btn{
  width:100%;
  padding:16px 22px;
  background:var(--cream-soft);
  border:1px solid transparent;
  border-radius:var(--pill-r);
  font-size:15px;
  color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{
  resize:vertical; min-height:140px; line-height:1.68;
  border-radius:var(--card-r); padding-block:18px;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-faint); font-weight:300; }

.field input:focus,
.field textarea:focus,
.select select:focus,
.select__btn:focus,
.select.is-open .select__btn{ outline:none; border-color:var(--gold); background:#fff; }
.field input:focus-visible,
.field textarea:focus-visible,
.select select:focus-visible,
.select__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#B4452F; background:#FFF8F6; }

.select{ position:relative; }
.select select{ appearance:none; -webkit-appearance:none; padding-right:50px; cursor:pointer; }
.select svg{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:none; stroke:var(--ink-mute);
  stroke-width:1.3; stroke-linecap:round; pointer-events:none;
  transition:transform .3s var(--ease), stroke .25s var(--ease);
}
.select.is-open svg{ transform:translateY(-50%) rotate(180deg); stroke:var(--gold); }

/* --- Themed drop-down --------------------------------------------------
   A native <select>'s popup is drawn by the browser/OS and cannot be
   styled, so JS swaps in this listbox and hides the native control — which
   stays in the form and still carries the value on submit. The wrapper only
   gets .select--enhanced once the replacement is actually built, so with JS
   off the native select is untouched.
   --------------------------------------------------------------------- */
.select--enhanced .select__native{ display:none; }

.select__btn{
  display:block; width:100%;
  text-align:left; padding-right:50px;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.select__list{
  position:absolute; left:0; right:0; top:calc(100% + 9px);
  z-index:20;
  margin:0; padding:7px;
  max-height:min(280px, 46vh); overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card-r);
  box-shadow:var(--shadow-lift);
  /* visibility (not display) so it can fade, and so it leaves the
     accessibility tree while closed */
  visibility:hidden; opacity:0; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease),
             visibility 0s linear .22s;
}
.select.is-open .select__list{
  visibility:visible; opacity:1; transform:none;
  transition-delay:0s;
}
.select__list:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.select__opt{
  padding:12px 18px;
  border-radius:var(--pill-r);
  font-size:15px; color:var(--ink-soft);
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.select__opt.is-active{ background:var(--cream-soft); color:var(--ink); }
.select__opt[aria-selected="true"]{
  background:var(--cream); color:var(--ink);
}

.check{ position:relative; display:flex; gap:14px; align-items:flex-start; cursor:pointer; margin-bottom:26px; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:0 0 auto; width:19px; height:19px; margin-top:3px;
  border:1px solid var(--ink-faint); background:var(--paper);
  border-radius:5px;
  position:relative;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.check__box::after{
  content:""; position:absolute; left:5px; top:1px;
  width:6px; height:11px;
  border:solid var(--paper); border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(.4); opacity:0;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.check input:checked + .check__box{ background:var(--ink); border-color:var(--ink); }
.check input:checked + .check__box::after{ transform:rotate(45deg) scale(1); opacity:1; }
.check input:focus-visible + .check__box{ outline:2px solid var(--gold); outline-offset:2px; }
.check__txt{ font-size:13.5px; color:var(--ink-soft); font-weight:300; line-height:1.6; }
.check__txt a{ border-bottom:1px solid var(--gold); }

.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.form__hint{ font-size:12.5px; color:var(--ink-mute); }
.form__status{ margin-top:16px; font-size:14px; }
.form__status.is-ok{ color:#2F6B4A; }
.form__status.is-err{ color:#B4452F; }

.contact__card{
  background:var(--night);
  color:var(--night-ink);
  border-radius:var(--card-r);
  padding:clamp(30px,3.6vw,48px);
  align-self:stretch;
}
.contact__list{ margin-top:32px; }
.contact__list li{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:20px 0;
  border-top:1px solid var(--night-line);
}
.contact__list li:last-child{ border-bottom:1px solid var(--night-line); }
.contact__list .ico{ color:var(--gold); margin-top:2px; }
.contact__list span{
  display:block; margin-bottom:5px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mute);
}
.contact__list a,
.contact__list p{ font-size:14.5px; color:var(--night-ink); font-weight:300; word-break:break-word; }
.contact__list a{ border-bottom:1px solid var(--gold-line); transition:border-color .25s var(--ease); }
.contact__list a:hover{ border-color:var(--gold-soft); }

.contact__social{ display:flex; gap:12px; margin-top:30px; }
.contact__social a{
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid var(--night-line);
  border-radius:50%;
  color:var(--night-ink);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.contact__social svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.3; }
.contact__social a:hover{ background:var(--gold); border-color:var(--gold); color:var(--night); }


/* 17 — NEWSLETTER =========================================================== */

.newsletter{
  background:var(--cream);
  padding-block:var(--sec-y-tight);
}
.newsletter__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.newsletter__note{ margin-top:12px; font-size:13.5px; color:var(--ink-mute); }

.newsletter__form{ display:grid; grid-template-columns:1fr auto; gap:12px; }
.newsletter__form input{
  width:100%; padding:17px 24px;
  background:var(--paper);
  border:1px solid transparent; border-radius:var(--pill-r);
  font-size:15px;
}
.newsletter__form input::placeholder{ color:var(--ink-faint); font-weight:300; }
.newsletter__form input:focus{ outline:none; border-color:var(--gold); }
.newsletter__form input:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
/* Consent sits on its own row under the input and button. */
.newsletter__form .check{ grid-column:1/-1; margin-bottom:0; margin-top:4px; }
.newsletter__form .form__status{ grid-column:1/-1; margin-top:4px; }

/* Tighter than the contact form's: this one is a single line under a pill
   input rather than a paragraph of its own. */
.check--inline{ gap:11px; }
.check--inline .check__box{ width:17px; height:17px; margin-top:1px; }
.check--inline .check__box::after{ left:4.5px; top:0; width:5px; height:10px; }
.check--inline .check__txt{ font-size:12.5px; }


/* 18 — FOOTER =============================================================== */

/* Last panel: mirrors the hero — rounds on top, flush to the page bottom. */
.footer{
  background:var(--night);
  color:var(--night-ink);
  border-radius:var(--panel-r) var(--panel-r) 0 0;
  overflow:clip;
  padding-block:var(--sec-y-tight) 32px;
}
.footer__mark{
  padding-bottom:clamp(20px,2.4vw,32px);
  margin-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid var(--night-line);
}
.footer__mark svg{ display:block; width:100%; height:auto; }
.footer__mark text{
  font-family:var(--display);
  font-size:96px;
  font-weight:400;
  fill:var(--night-ink);
}

.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(44px,5vw,64px);
  border-bottom:1px solid var(--night-line);
}
/* Same sparkle + wordmark lockup as the header, so the column opens on the
   brand mark. It sits level with the nav headings, so the earlier offset
   that pushed the blurb down is no longer needed. */
.footer__logo{
  display:inline-flex; align-items:center; gap:12px;
  margin-bottom:24px;
  color:var(--night-ink);
}
.footer__logo img{ width:clamp(132px,11vw,158px); height:auto; }

.footer__brand p{
  max-width:38ch;
  font-size:14.5px; color:var(--night-mute); font-weight:300;
}
/* Same reasoning as .usp__title: an 11px tracked label. Each column is a
   <nav> with its own aria-label, so nothing is lost by dropping the h3. */
.footer__col-title{
  font-family:var(--body);
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:20px;
}
.footer__col li + li{ margin-top:11px; }
.footer__col a{
  font-size:14.5px; color:var(--night-mute); font-weight:300;
  transition:color .25s var(--ease);
}
.footer__col a:hover{ color:var(--night-ink); }

/* Two stacks that meet in the middle: legal on the left, payment marks and
   the build credit on the right. Laid out as columns rather than one long
   wrapping row, which pushed the payment marks onto their own line and
   left them stranded under the copyright. */
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:22px clamp(24px,3vw,56px);
  padding-top:28px;
}
.footer__legal{
  display:flex; flex-direction:column; gap:11px;
  font-size:12.5px; color:rgba(247,239,236,.45);
}
.footer__meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.footer__legal p,
.footer__credit{ margin:0; }
.footer__credit{ font-size:12.5px; color:rgba(247,239,236,.45); }

/* Privacy and cookies, required on every page. */
.footer__policy{ display:flex; flex-wrap:wrap; gap:10px clamp(14px,1.5vw,22px); }
.footer__policy a{
  color:rgba(247,239,236,.62);
  border-bottom:1px solid rgba(247,239,236,.22);
  padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.footer__policy a:hover{ color:var(--night-ink); border-color:var(--gold-soft); }

.footer__credit a{
  color:rgba(247,239,236,.62);
  transition:color .25s var(--ease);
}
.footer__credit a:hover{ color:var(--gold-soft); }
/* Official payment marks. Several (Apple Pay, Google Pay, Shop Pay,
   Mastercard) ship with black artboards, so every mark sits on a white
   plate — otherwise those four would disappear into the dark footer. */
.pay{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pay li{
  display:grid; place-items:center;
  height:34px;
  padding:0 7px;
  background:#fff;
  border-radius:6px;
}
.pay img{ display:block; width:auto; height:22px; }
.pay--wide img{ height:15px; }        /* Vipps is a wide wordmark */


/* 18b — INNER PAGES =========================================================
   Category, product, guide and service pages are put together from the
   sections above — same stage, USP strip, cards, philosophy band, FAQ and
   footer. These rules only cover what those pages carry and the homepage
   does not: the breadcrumb in the stage, a stage without the fan, running
   article text, and the buy form in the about grid.
   ========================================================================== */

/* --- Breadcrumb, set like an eyebrow above the stage title --- */
.crumbs{ grid-column:1/-1; }
.crumbs ol{
  display:flex; flex-wrap:wrap; gap:6px 10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mute);
}
.crumbs li + li::before{ content:"/"; margin-right:10px; color:rgba(247,239,236,.3); }
.crumbs a{ color:var(--gold-soft); transition:color .25s var(--ease); }
.crumbs a:hover{ color:var(--night-ink); }

/* --- Stage without the image fan (product, guide and service pages).
       The intro closes straight onto the CTA row. --- */
.stage--compact .stage__bottom{ padding-top:clamp(34px,4vw,60px); }
.stage--compact .stage__blurb{ max-width:52ch; }

/* --- Running text: guides, service pages, product descriptions ---------- */
.prose > * + *{ margin-top:1em; }
.prose p,
.prose li{ color:var(--ink-soft); font-weight:300; font-size:clamp(15px,1.05vw,17px); line-height:1.75; }
.prose strong{ font-weight:500; color:var(--ink); }
.prose a{ border-bottom:1px solid var(--gold); transition:color .25s var(--ease); }
.prose a:hover{ color:var(--gold); }
.prose ul,
.prose ol{ margin-top:1em; }
.prose li{ position:relative; padding-left:22px; }
.prose li + li{ margin-top:8px; }
.prose ul > li::before{
  content:""; position:absolute; left:0; top:.85em;
  width:9px; height:1px; background:var(--gold);
}
.prose ol{ counter-reset:prose; }
.prose ol > li{ counter-increment:prose; padding-left:30px; }
.prose ol > li::before{
  content:counter(prose) "."; position:absolute; left:0; top:0;
  font-family:var(--display); color:var(--gold);
}
.prose h3{
  margin-top:1.7em;
  font-size:var(--h3); line-height:var(--h3-lh); letter-spacing:var(--h3-ls);
}
.prose table{
  display:block; overflow-x:auto;
  width:100%; margin-top:1.4em;
  border-collapse:collapse;
}
.prose th,
.prose td{
  padding:13px 14px 13px 0;
  border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top;
  font-size:14.5px; font-weight:300; color:var(--ink-soft);
  min-width:120px;
}
.prose th{
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}

/* One article section per h2, separated by the same hairline as .sec-head. */
.article__section + .article__section{
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(36px,4.4vw,56px);
  border-top:1px solid var(--line);
}
.article__section h2{
  font-size:clamp(1.45rem,2.3vw,2.05rem);
  line-height:var(--h2-lh); letter-spacing:var(--h2-ls);
  margin-bottom:.2em;
}

/* Contents list in the sticky aside of a guide (reuses .faq__aside). */
.toc{ margin:6px 0 28px; }
.toc li{
  display:grid; grid-template-columns:36px 1fr;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.5; color:var(--ink-soft);
}
.toc li:last-child{ border-bottom:1px solid var(--line); }
.toc li span{ font-family:var(--display); color:var(--gold); }
.toc a{ transition:color .25s var(--ease); }
.toc a:hover{ color:var(--gold); }

/* Multi-paragraph answers inside the numbered reasons list. */
.reasons .prose{ grid-column:2; grid-row:2; margin-top:10px; }
.reasons .prose p,
.reasons .prose li{ font-size:clamp(14.5px,1vw,16.5px); line-height:1.65; max-width:52ch; }
.philosophy__lead.prose p{ font-size:inherit; line-height:inherit; }

/* --- Buy form in the centre column of the about grid --- */
.buy{ margin-top:clamp(20px,2.2vw,30px); }
.buy .field{ margin-bottom:16px; }
.buy .check{ margin-bottom:20px; }
.buy .btn{ width:100%; }
.buy .btn[disabled]{ opacity:.45; pointer-events:none; }
.buy .form__hint{ margin-top:14px; }

/* Links in the USP strip point at the page that proves the claim. */
.usp__item p a{ color:var(--ink); border-bottom:1px solid var(--gold-line); }

/* Related reading reuses the care cards, as links. */
a.care__item{ color:inherit; }

/* Set by main.js when every card fits and the carousel cannot scroll. The
   classes give these display:flex, which would otherwise beat [hidden]. */
.carousel__nav[hidden],
.carousel__dots[hidden],
.carousel__rail[hidden]{ display:none; }

/* --- Photo stage (index-2.html) ------------------------------------------
   The same stage — bar, intro, CTA row — with one photograph filling it in
   place of the fan, under a 50 % night overlay. Only .stage--photo is
   touched, so the fan stage on index.html renders exactly as before.
   ------------------------------------------------------------------------ */
.stage--photo{
  display:flex; flex-direction:column;
  min-height:min(94vh, 900px);
}
.stage__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 58%;          /* keeps the pendant in view on any crop */
}
.stage__shade{
  position:absolute; inset:0; z-index:0;
  background:var(--night);
  opacity:.5;
  pointer-events:none;
}
.stage--photo .stage__top,
.stage--photo .stage__bottom{ position:relative; z-index:1; }
/* Intro rides low in the frame, just above the buttons, so the photo
   reads first and the copy sits on the darker lower half of the image. */
.stage--photo .stage__top{ flex:1 1 auto; display:flex; flex-direction:column; }
.stage--photo .stage__intro{ margin-top:auto; width:100%; }
/* As a flex item with auto side margins the bar would shrink to its
   content and the nav would drift off centre; hold it at full width so it
   matches the bar on index.html exactly. */
.stage--photo .stage__bar{ width:100%; }
.stage--photo .stage__title,
.stage--photo .stage__blurb{ text-shadow:0 2px 28px rgba(47,40,43,.45); }

/* A conventional hero stack, all on the left edge: headline, then the
   description under it, then the buttons. */
.stage--photo .stage__intro{
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,1.6vw,24px);
}
.stage--photo .stage__title{ max-width:16em; }
/* Lift the whole stack to just above the middle of the photo: the space
   under the buttons grows a little more than the space above the intro,
   which sits it on the optical centre rather than the floor. */
.stage--photo .stage__bottom{ flex:1.3 1 auto; }
.stage--photo .stage__blurb{
  grid-column:1;
  justify-self:start;
  text-align:left;
  max-width:56ch;
  font-size:clamp(15px,1.15vw,17.5px);
  font-style:normal;
  font-weight:300;
  color:rgba(247,239,236,.9);
}
.stage--photo .stage__bottom{ padding-top:clamp(26px,2.8vw,40px); }
.stage--photo .stage__foot{ justify-content:flex-start; }

@media (max-width:980px){
  .stage--photo{ min-height:min(86vh, 760px); }
}

/* The how-to steps reuse the material timeline beside a photograph. */
.material__art img{ border-radius:var(--card-r); }


/* 19 — MOTION & RESPONSIVE ================================================== */

/* Gated on .js (set inline in <head>) — without scripting nothing is hidden. */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal--slow{ transition-duration:1.05s; }
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ---- ≤ 1120px ---- */
@media (max-width:1120px){
  .carousel{ --cshow:3; }
  /* The quote cards carry a portrait column, so they need more width per
     card than the product tiles and step down one breakpoint earlier. */
  .testi__carousel{ --cshow:2; }

  .mega__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stage__nav ul{ gap:18px; }
  .stage__nav a{ font-size:11.5px; letter-spacing:.1em; }
  .footer__top{ grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
}

/* ---- ≤ 980px : tablet ---- */
@media (max-width:980px){
  /* The in-card bar is desktop-only; below this the standard header takes over. */
  .stage__bar{ display:none; }
  .stage__top{ padding-top:clamp(26px,4.5vw,40px); }

  .header{
    position:sticky;
    transform:none;
  }
  /* The in-stage bar is gone here, so this is the bar that drops in. */
  .js .header{ transform:translateY(-101%); }
  .js.is-ready .header{
    transform:none;
    transition:transform 1.26s cubic-bezier(.16,1,.3,1) .7s;
  }
  .header__inner{
    grid-template-columns:auto 1fr;
    min-height:66px;
  }
  .burger{ display:block; }
  .header .circ{ display:none; }          /* pill + burger are enough here */

  /* No room for a mega-menu beside a burger nav: the trigger falls back to
     jumping to the products section, and the footer carries the full
     category list. */
  .mega{ display:none; }
  .stage__nav .mega-trigger{ width:100%; justify-content:space-between; }

  /* Centred links become a drop-down panel under the bar. */
  .header .stage__nav{
    position:absolute; left:0; right:0; top:100%;
    display:none;
    background:var(--paper);
    border-radius:0 0 var(--panel-r) var(--panel-r);
    box-shadow:0 22px 44px -30px rgba(47,40,43,.45);
  }
  .header .stage__nav.is-open{ display:block; }
  .header .stage__nav ul{
    flex-direction:column; align-items:stretch;
    gap:0;
    padding:8px var(--pad) 22px;
  }
  .header .stage__nav li{ border-top:1px solid var(--line-soft); }
  .header .stage__nav a,
  .header .stage__nav .mega-trigger{ display:block; padding:16px 0; font-size:13px; }
  .header .stage__nav .mega-trigger{ display:flex; text-align:left; }
  .header .stage__nav a::after,
  .header .stage__nav .mega-trigger::after{ display:none; }

  .material__inner,
  .philosophy__inner,
  .faq__inner,
  .contact__inner,
  .newsletter__inner{ grid-template-columns:1fr; }

  /* Stacked: the column rule turns into the divider above the reasons, and
     the corner still drops to the foot of the panel instead of behind copy. */
  .philosophy__copy{ padding-right:0; }
  .reasons{
    border-left:0; padding-left:0;
    margin-top:clamp(36px,6vw,52px);
    padding-top:clamp(28px,4.5vw,40px);
    border-top:1px solid var(--rule);
  }
  .philosophy__still{
    position:static;
    width:min(100%,520px);
    margin:clamp(32px,6vw,48px) auto calc(var(--pad-bottom) * -1) 0;
    display:block;
  }

  /* Copy leads, then the two figures side by side beneath it. */
  .about__grid{ grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,30px); }
  .about__copy{ grid-column:1/-1; order:-1; padding-bottom:0; }
  /* Stacked, so the left figure goes back to a plain height beside the right. */
  .about__shot--left { height:clamp(300px,42vw,430px);
                       min-height:0; max-height:none; align-self:auto; }
  .about__shot--right{ height:clamp(300px,42vw,430px); }
  .about__values{ grid-template-columns:1fr; gap:22px; }
  .about__value{ border-left:0; padding-inline:0; }
  .about__legal{ text-align:left; }

  .stage__intro{ grid-template-columns:1fr; gap:22px; }
  .stage__title{ grid-column:1; }
  .stage__blurb{ grid-column:1; justify-self:start; text-align:left; }

  .faq__aside{ position:static; }

  /* Diagram stops being sticky and leads the timeline instead. */
  .material__art{ position:static; max-width:520px; margin-inline:auto; }
  .sec-cta .btn{ width:100%; justify-content:center; }
  .timeline{ margin-top:clamp(30px,5vw,48px); }

  .sec-head{ grid-template-columns:1fr; align-items:start; }
  .sec-note{ padding-bottom:0; justify-self:start; text-align:left; }

  .carousel{ --cshow:2; }
  .testi__carousel{ --cshow:1; }

  .grid-3{ grid-template-columns:1fr 1fr; }

  .usp__grid{ grid-template-columns:1fr 1fr; }
  .usp__item{ padding-inline:clamp(14px,3vw,26px); }
  .usp__item:nth-child(odd){ border-left:0; padding-left:0; }
  .usp__item:nth-child(even){ padding-right:0; }
  .usp__item:nth-child(n+3){ border-top:1px solid var(--line-soft); }

  .contact__card{ order:-1; }
}

/* ---- ≤ 680px : phone ---- */
@media (max-width:680px){
  :root{
    --sec-y:clamp(54px,11vw,78px);
    --sec-y-tight:clamp(44px,8.6vw,62px);
  }

  .header .stage__logo img{ width:126px; }
  .header .pill{ height:38px; padding-inline:16px; font-size:12px; }

  /* Three tiles read better than five at phone width. */
  .fan{ max-width:100%; gap:6px; }
  .fan__item:nth-child(1),
  .fan__item:nth-child(5){ display:none; }
  .fan__item:nth-child(2){ width:28%; }
  .fan__item:nth-child(3){ width:36%; }
  .fan__item:nth-child(4){ width:28%; }

  .stage__foot{ flex-direction:column; align-items:stretch; }
  .stage__foot .btn{ width:100%; }

  .carousel{ --cshow:1.35; }          /* next card peeks, cueing the swipe */
  .testi__carousel{ --cshow:1; }      /* a split card has no room to peek */

  .grid-4{ grid-template-columns:1fr 1fr; gap:16px 14px; }
  .grid-3{ grid-template-columns:1fr; }

  .usp__grid{ grid-template-columns:1fr; }
  .usp__item{ padding:26px 0; border-left:0; border-top:1px solid var(--line-soft); }
  .usp__item:first-child{ border-top:0; padding-top:0; }
  .usp__item:last-child{ padding-bottom:0; }

  .form__row{ grid-template-columns:1fr; gap:0; }
  .form__foot .btn{ width:100%; }
  .newsletter__form{ grid-template-columns:1fr; }

  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1/-1; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
  .footer__meta{ align-items:flex-start; }

  .acc__body{ padding-right:0; }
  .tl__badge{ align-items:flex-start; }
}

/* ---- ≤ 420px ---- */
@media (max-width:420px){
  .grid-4{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
}

/* ---- Print ---- */
@media print{
  .header,.newsletter,.stage__foot,.product__hint{ display:none !important; }
  .js .reveal{ opacity:1; transform:none; }
  .section--dark,.footer,.contact__card,
  .stage,.stage__top,.stage__bottom{ background:#fff !important; color:#000 !important; }
  .stage{ box-shadow:none; border:1px solid #ccc; }
}

/* Footer in white (overrides the dark panel above). */
.footer{ background:#fff; color:var(--ink); }
.footer__mark,
.footer__top{ border-color:var(--line); }
.footer__mark text{ fill:var(--ink); }
.footer__logo{ color:var(--ink); }
.footer__brand p,
.footer__col a{ color:var(--ink-soft); }
.footer__brand p a{ color:var(--ink); }
.footer__col a:hover,
.footer__policy a:hover,
.footer__credit a:hover{ color:var(--gold); }
.footer__col-title{ color:var(--gold); }
.footer__legal,
.footer__credit{ color:var(--ink-mute); }
.footer__policy a,
.footer__credit a{ color:var(--ink-soft); border-color:var(--line); }
.footer__policy a:hover{ border-color:var(--gold); }
.footer .pay li{ border:1px solid var(--line); }
.footer .contact__social a{ color:var(--ink); border-color:var(--line); }
.footer .contact__social a:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Plain page head (hero variant "plain"): white, no photo or intro — just
   the bar, breadcrumb and a modest H1. Used on terms, privacy and the like.
   The bar is re-toned for a light surface the same way .header is. */
.stage--plain{ background:var(--paper); }
.stage--plain .stage__top{ color:var(--ink); padding-bottom:clamp(30px,3.4vw,52px); }
.stage--plain .stage__intro{ margin-top:clamp(34px,4vw,60px); }
.stage--plain .stage__title{ color:var(--ink); font-size:var(--h2); text-shadow:none; }
.stage--plain .crumbs,
.stage--plain .crumbs a{ color:var(--ink-mute); }
.stage--plain .crumbs a:hover{ color:var(--ink); }
.stage--plain .stage__nav a,
.stage--plain .stage__nav .mega-trigger{ color:var(--ink-soft); }
.stage--plain .stage__nav a:hover,
.stage--plain .stage__nav .mega-trigger:hover,
.stage--plain .stage__nav .mega-trigger[aria-expanded="true"]{ color:var(--ink); }
.stage--plain .stage__logo{ color:var(--ink); }
.stage--plain .circ,
.stage--plain .pill{ border-color:rgba(46,39,41,.26); color:var(--ink); }
.stage--plain .circ:hover,
.stage--plain .pill:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.stage--plain .crumbs li + li::before{ color:var(--ink-faint); }
.stage--plain .crumbs a{ color:var(--gold); }
/* Paragraph rhythm inside each article section (h2 → p → ul …). */
.article__section > * + *{ margin-top:1em; }
.article__section > h2 + *{ margin-top:.6em; }
.stage--plain .crumbs span{ color:var(--ink-soft); }
/* Plain head without its own H1 (the article below carries it): just bar + crumbs. */
.stage--plain .stage__top{ padding-bottom:clamp(18px,2vw,28px); }
.stage--plain .stage__intro{ margin-top:clamp(22px,2.6vw,36px); }
/* Hero video: centred close-ups. */
.stage__video{ object-position:50% 50%; }
@media (prefers-reduced-motion:reduce){ .stage__video{ display:none; } }

/* ---- Front-page hero: brand line, trust bar and a customer quote ---------- */
.stage__eyebrow{
  display:inline-flex; align-items:center; gap:10px; justify-self:start; width:max-content; max-width:100%;
  margin:0 0 4px; padding:8px 16px 8px 12px;
  border:1px solid rgba(247,239,236,.28); border-radius:var(--pill-r);
  background:rgba(47,40,43,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--night-ink);
}
.stage__eyebrow-ico{ width:14px; height:14px; fill:var(--gold-soft); flex:0 0 auto; }

.stage--photo .stage__bottom:has(.stage__trustbar){ display:flex; flex-direction:column; }
.stage__trustbar{
  list-style:none; padding:0;
  width:100%; max-width:var(--content-max); margin:auto auto 0; position:relative; top:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid rgba(247,239,236,.22);
  padding-top:clamp(18px,1.8vw,24px);
}
.stage__trustbar li{ min-width:0; }
.stage__trustbar li + li{ border-left:1px solid rgba(247,239,236,.16); padding-left:clamp(14px,1.6vw,24px); }
.stage__trustbar a,
.stage__trustbar li > svg + span{ color:inherit; }
.stage__trustbar a,
.stage__trustbar li{ display:flex; align-items:center; gap:12px; color:rgba(247,239,236,.9); text-decoration:none; font-size:13.5px; line-height:1.35; }
.stage__trustbar a:hover span{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--gold-soft); }
.stage__trust-ico{ flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--gold-soft); stroke-width:1.3; }

.stage__quote{
  position:absolute; z-index:2; right:max(var(--pad), calc((100% - var(--content-max)) / 2));
  bottom:clamp(96px,8vw,112px); width:min(320px, 28vw); margin:0;
  padding:18px 20px; border-radius:var(--card-r);
  background:rgba(255,253,251,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 50px -30px rgba(47,40,43,.6);
}
.stage__quote .stars{ color:var(--gold); font-size:12px; margin-bottom:8px; }
.stage__quote blockquote{ margin:0; }
.stage__quote blockquote p{ font-family:var(--display); font-size:15px; line-height:1.45; color:var(--ink); }
.stage__quote figcaption{ margin-top:10px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }

@media (max-width:1180px){ .stage__quote{ display:none; } }
@media (max-width:980px){
  .stage__trustbar{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 0; }
  .stage__trustbar li:nth-child(3){ border-left:0; padding-left:0; }
}
@media (max-width:520px){
  .stage__eyebrow{ font-size:10px; letter-spacing:.1em; padding:7px 12px 7px 10px; }
  .stage__trustbar a, .stage__trustbar li{ font-size:12.5px; gap:9px; }
  .stage__trust-ico{ width:19px; height:19px; }
}
.stage--photo .stage__bottom:has(.stage__trustbar) .stage__foot{ width:100%; }
.stage--photo .stage__bottom:has(.stage__trustbar){ padding-bottom:clamp(22px,2.2vw,32px); }
.stage__trustbar{ margin-top:auto; }
.stage--photo .stage__bottom:has(.stage__trustbar) .stage__foot{ margin-bottom:clamp(36px,5vh,64px); }


/* Category banner with a light product photo (.stage--light): dark text and
   bar over the cream left side of the image; a soft cream wash on narrow
   screens where the jewellery sits behind the copy. */
.stage--light{ background:#F3ECE3; }
.stage--light .stage__bg{ left:auto; right:0; width:66%; object-position:60% 55%; }
.stage__shade--light{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, #F3ECE3 0%, #F3ECE3 34%, rgba(243,236,227,.6) 42%, rgba(243,236,227,0) 54%); }
.stage--light .stage__title{ max-width:13em; }
.stage--light .stage__shade--light{ opacity:1; }
.stage--light .stage__blurb{ max-width:44ch; }
.stage--light .stage__top,
.stage--light .stage__bottom{ color:var(--ink); }
.stage--light .stage__title{ color:var(--ink); text-shadow:none; }
.stage--light .stage__blurb{ color:var(--ink-soft) !important; text-shadow:none; }
.stage--light .crumbs, .stage--light .crumbs a{ color:var(--ink-mute); }
.stage--light .crumbs a:hover{ color:var(--ink); }
.stage--light .crumbs span{ color:var(--ink-soft); }
.stage--light .crumbs li + li::before{ color:var(--ink-faint); }
.stage--light .stage__nav a,
.stage--light .stage__nav .mega-trigger{ color:var(--ink-soft); }
.stage--light .stage__nav a:hover,
.stage--light .stage__nav .mega-trigger:hover,
.stage--light .stage__nav .mega-trigger[aria-expanded="true"]{ color:var(--ink); }
.stage--light .stage__logo{ color:var(--ink); }
.stage--light .circ{ border-color:rgba(46,39,41,.26); color:var(--ink); }
.stage--light .circ:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
@media (max-width:760px){
  .stage--light .stage__bg{ width:100%; object-position:78% 50%; }
  .stage__shade--light{ background:linear-gradient(90deg, rgba(246,240,233,.92) 0%, rgba(246,240,233,.75) 55%, rgba(246,240,233,.35) 100%); }
}

/* Footer contact list */
.footer__contact{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.footer__contact li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:var(--ink-soft); font-weight:300; }
.footer__contact a{ color:var(--ink); font-weight:400; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s, color .2s; }
.footer__contact a:hover{ color:var(--gold); border-color:var(--gold-line); }
.footer__ci{ flex:0 0 auto; width:34px; height:34px; padding:8px; border-radius:50%; background:var(--blush-soft); fill:none; stroke:var(--gold); stroke-width:1.4; }

/* Frosted glass behind the in-hero menu bar, so the photo shows through. */
.stage--photo .stage__bar{
  padding:10px 12px 10px 20px; margin-inline:-20px -12px; width:auto;
  border-radius:calc(var(--card-r) + 6px);
  background:rgba(47,40,43,.22);
  border:1px solid rgba(247,239,236,.18);
  backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
}
.stage--light .stage__bar{
  background:rgba(255,253,251,.55);
  border-color:rgba(255,255,255,.65);
  box-shadow:0 10px 30px -22px rgba(46,39,41,.45);
}
@media (min-width:1260px){
  .stage--photo .stage__bar{ margin-inline:auto; width:calc(100% + 32px); max-width:calc(var(--content-max) + 32px); }
}
/* Buttons on a light photo hero */
.stage--light .btn--light{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stage--light .btn--light:hover{ background:#000; border-color:#000; }
.stage--light .btn--line-light{ color:var(--ink); border-color:rgba(46,39,41,.35); background:rgba(255,253,251,.4); }
.stage--light .btn--line-light:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stage--light.stage--inner .stage__blurb{ max-width:46ch; }
.stage--light.stage--inner .stage__intro{ padding-top:clamp(24px,3vw,44px); }
@media (min-width:761px){
  .stage--light.stage--banner .stage__bg{ width:60%; }
  .stage--light.stage--banner .stage__shade--light{ background:linear-gradient(90deg, #F3ECE3 0%, #F3ECE3 40%, rgba(243,236,227,.6) 47%, rgba(243,236,227,0) 58%); }
  .stage--light.stage--banner .stage__title{ max-width:12em; }
}

/* ---- Article hero (guides): title, short answer, cover image below ------ */
.stage--article{ background:var(--cream-soft); }
.stage--article .stage__top{ padding-bottom:0; }
.stage--article .stage__intro{ margin-top:clamp(30px,3.6vw,54px); max-width:min(var(--content-max), 880px); margin-inline:auto; width:100%; display:block; }
.stage--article .crumbs{ margin-bottom:18px; }
.stage__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 16px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.stage__meta > span + span::before{ content:"·"; margin-right:14px; color:var(--ink-faint); }
.stage__cat{ padding:5px 10px; border-radius:var(--pill-r); background:var(--blush); color:var(--ink); letter-spacing:.12em; font-weight:500; }
.stage__meta > .stage__cat + span::before{ content:none; margin:0; }
.stage--article .stage__title{ font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.12; max-width:18em; color:var(--ink); }
.stage__answer{
  margin-top:clamp(20px,2.2vw,30px); padding:22px 28px; max-width:none;
  background:var(--paper); border-left:3px solid var(--gold); border-radius:0 var(--card-r) var(--card-r) 0;
  box-shadow:0 14px 34px -28px rgba(46,39,41,.35);
}
.stage__answer-label{ margin:0 0 6px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.stage__answer p:last-child{ margin:0; font-size:clamp(15.5px,1.1vw,17px); line-height:1.7; color:var(--ink-soft); }
.stage--article .stage__bottom{ padding-top:clamp(28px,3vw,44px); padding-bottom:clamp(28px,3vw,44px); }
.stage__cover{ margin:0 auto; max-width:min(var(--content-max), 880px); aspect-ratio:21/9; border-radius:var(--card-r); overflow:hidden; background:var(--tile); }
.stage__cover img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:760px){
  .stage__cover{ aspect-ratio:4/3; }
  .stage__answer{ padding:16px 18px; }
}

/* ==========================================================================
   Full-screen mobile menu (template-parts/mobile-menu.php, main.js "Mobile
   navigation"). Only below the burger breakpoint.
   ========================================================================== */
html.mm-locked, html.mm-locked body{ overflow:hidden; }
.mm{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column;
  background:var(--paper);
  opacity:0; transform:translateY(14px);
  transition:opacity .32s var(--ease), transform .42s var(--ease);
}
.mm[hidden]{ display:none; }
.mm.is-open{ opacity:1; transform:none; }
@media (min-width:981px){ .mm{ display:none !important; } }

.mm__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:66px; padding:10px 18px 10px 20px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.mm__logo img{ display:block; width:134px; height:auto; }
.mm__close{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--ink);
  transition:background .2s, border-color .2s;
}
.mm__close:hover, .mm__close:focus-visible{ background:var(--blush-soft); border-color:var(--blush-deep); }
.mm__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }

.mm__body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:18px 20px calc(30px + env(safe-area-inset-bottom));
}

.mm__search{
  display:flex; align-items:center; gap:12px;
  height:52px; padding:0 16px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:var(--pill-r);
  background:var(--cream-soft); color:var(--ink-mute);
  font:400 15px/1 var(--ui);
}
.mm__search svg{ width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:1.5; }

.mm__nav ul{ list-style:none; margin:0; padding:0; }
.mm__item{ border-bottom:1px solid var(--line-soft); }
.mm__link{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:16px 2px; background:none; border:0; text-align:left;
  font:400 clamp(28px,8.4vw,34px)/1.1 var(--display); color:var(--ink); letter-spacing:-.005em;
}
.mm__link[aria-current="page"] span{ color:var(--gold); }
.mm__caret{ width:18px; height:18px; fill:none; stroke:var(--ink-soft); stroke-width:1.5; transition:transform .3s var(--ease); }
.mm__item.is-open .mm__caret{ transform:rotate(180deg); }
.mm.is-open .mm__item{ animation:mmIn .55s var(--ease) both; animation-delay:calc(var(--i) * 45ms + 60ms); }
@keyframes mmIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.mm__sub{ padding:4px 0 20px; }
.mm__sub:not([hidden]){ animation:mmIn .4s var(--ease) both; }
.mm__cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mm__card{ display:block; color:var(--ink); }
.mm__card-img{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:var(--card-r); background:var(--tile); }
.mm__card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mm__card-name{ display:block; margin-top:8px; font:600 12px/1.2 var(--ui); letter-spacing:.09em; text-transform:uppercase; }
.mm__sublinks{ display:flex; flex-direction:column; margin-top:14px; border-top:1px solid var(--line-soft); }
.mm__sublinks a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 2px; border-bottom:1px solid var(--line-soft);
  font:500 15px/1.2 var(--ui); color:var(--ink);
}
.mm__sublinks a:first-child{ font-weight:600; color:var(--gold); }
.mm__sublinks svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }

.mm__quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:22px; }
.mm__quick a{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 6px 14px; border-radius:var(--card-r);
  background:var(--cream-soft); border:1px solid var(--line-soft);
  font:500 12.5px/1.2 var(--ui); color:var(--ink); text-align:center;
}
.mm__quick svg{ width:21px; height:21px; fill:none; stroke:var(--ink); stroke-width:1.4; }
.mm__quick .cart-count{
  position:absolute; top:9px; right:calc(50% - 24px);
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--gold); color:#fff; font:600 10.5px/18px var(--ui); text-align:center;
}
.mm__quick .cart-count[hidden]{ display:none; }

.mm__trust{ list-style:none; margin:22px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; }
.mm__trust li{ display:flex; align-items:center; gap:10px; font:400 13.5px/1.3 var(--ui); color:var(--ink-soft); }
.mm__trust svg{ width:18px; height:18px; flex:none; fill:none; stroke:var(--gold); stroke-width:1.4; }

.mm__foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.mm__contact{ margin:0; display:flex; flex-direction:column; gap:4px; font:400 13.5px/1.35 var(--ui); }
.mm__contact a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:3px; }
.mm__foot .contact__social{ display:flex; gap:8px; margin:0; }
.mm__foot .contact__social a{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); color:var(--ink); }
.mm__foot .contact__social svg{ width:17px; height:17px; }

@media (prefers-reduced-motion: reduce){
  .mm, .mm.is-open .mm__item, .mm__sub:not([hidden]){ transition:none; animation:none; transform:none; }
}