/* =====================================================================
   StefMag — site shell styles
   Theme: a dark cinematic hero, then a WARM, WELCOMING light body.
   One deliberate color-block transition (dark hero -> warm light).
   Brand: gold accent + chrome product moments, on warm ivory.
   ===================================================================== */

/* ---- Tokens --------------------------------------------------------- */
:root {
  /* brand constants (theme-independent) */
  --gold:       #c6a15b;          /* brand gold — fills (CTA), accents on dark */
  --gold-ink:   #7f5d10;          /* deep gold — readable text/icons on light (WCAG-AA on every light surface) */
  --gold-bright:#d8b876;
  --gold-soft:  rgba(198, 161, 91, 0.16);
  --gold-line:  rgba(143, 106, 28, 0.45);

  /* warm light body */
  --bg:        #f7f3ea;           /* warm ivory base */
  --bg-alt:    #efe7d7;           /* deeper warm sand (alternating) */
  --bg-elev:   #fdfbf5;           /* near-white warm (raised cards) */
  --ink:       #2a241a;           /* warm near-black headings */
  --ink-body:  #524a3b;           /* warm body text */
  --ink-dim:   #6e6555;           /* warm secondary / captions */
  --ink-faint: #6b6051;           /* warm faint labels — kept WCAG-AA on warm bg */
  --line:      rgba(42, 36, 26, 0.13);
  --line-soft: rgba(42, 36, 26, 0.07);
  --error:      #9c2b16;          /* form validation */
  --error-soft: rgba(156, 43, 22, 0.14);

  /* over-dark-hero colours (explicit; do not use body tokens here) */
  --on-dark:        #ffffff;
  --on-dark-soft:   rgba(255, 255, 255, 0.78);
  --on-dark-dim:    rgba(255, 255, 255, 0.58);

  /* warm, soft shadows for depth on light */
  --shadow-sm: 0 1px 2px rgba(74, 55, 25, 0.06), 0 4px 14px rgba(74, 55, 25, 0.05);
  --shadow:    0 2px 6px rgba(74, 55, 25, 0.06), 0 16px 40px rgba(74, 55, 25, 0.08);

  --radius:    16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  --maxw:      1180px;
  --topbar-h:  40px;              /* always-visible announcement ribbon height */
  --gutter:    clamp(20px, 5vw, 64px);
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;
}

/* ---- Reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: #1a1408; }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; border-radius: var(--radius-pill); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
h1, h2 { word-spacing: normal; }

/* ---- Layout helpers ------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(88px, 14vh, 176px); }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  font-weight: 600;
  margin: 0 0 1.4rem;
}
.lede { color: var(--ink-body); max-width: 56ch; font-size: clamp(1.05rem, 1.4vw, 1.32rem); }

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.6em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background-color .3s var(--ease),
              box-shadow .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn--primary {
  background: var(--gold);
  color: #1c1608;
  box-shadow: 0 6px 18px rgba(176, 138, 60, 0.35);
}
.btn--primary:hover { background: var(--gold-bright); box-shadow: 0 8px 24px rgba(176, 138, 60, 0.45); }
.btn--primary:active { transform: translateY(1px) scale(0.985); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--gold-line); }
.btn--ghost:hover { background: var(--gold-soft); border-color: var(--gold-ink); }
.btn--ghost:active { transform: translateY(1px) scale(0.985); }

/* =====================================================================
   NAVIGATION — white over the dark hero, warm + solid once scrolled
   ===================================================================== */
.nav {
  position: fixed;
  top: var(--topbar-h);           /* sits directly under the announcement ribbon */
  left: 0;
  right: 0;
  z-index: 50;
  height: 70px;
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.03em;
  color: var(--on-dark);              /* white over the dark hero */
  transition: color .4s var(--ease);
}
.nav__brand b { color: var(--gold); font-weight: 800; }
.nav.is-solid {
  background: rgba(247, 243, 234, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(74, 55, 25, 0.06);
}
.nav.is-solid .nav__brand { color: var(--ink); }       /* warm-dark on light */
.nav.is-solid .nav__brand b { color: var(--gold-ink); }
/* readability scrim under the transparent nav over bright hero frames */
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  opacity: 1; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.nav.is-solid::before { opacity: 0; }

/* language toggle + right-side nav group */
.nav__right { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 20px); }
.lang { display: inline-flex; align-items: center; gap: 3px; }
.lang__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 40px;                /* comfortable tap target on touch */
  background: none; border: 0; cursor: pointer; padding: 4px 5px; line-height: 1;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.05em;
  color: var(--on-dark-dim); border-radius: 6px;
  transition: color .3s var(--ease);
}
.lang__btn[aria-pressed="true"] { color: var(--on-dark); }
.lang__btn:hover { color: var(--on-dark); }
.lang__sep { color: var(--on-dark-dim); font-size: 0.7rem; opacity: 0.7; }
.nav.is-solid .lang__btn { color: var(--ink-dim); }
.nav.is-solid .lang__btn[aria-pressed="true"] { color: var(--gold-ink); }
.nav.is-solid .lang__btn:hover { color: var(--ink); }
.nav.is-solid .lang__sep { color: var(--ink-faint); }

/* =====================================================================
   HERO — dark, pinned scroll-scrub disassembly canvas + overlay
   (stays dark: the frames are dark product shots)
   ===================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,0.5), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.32), transparent 30%, transparent 68%, rgba(0,0,0,0.42));
}
.hero__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  /* 15vh reads well on a laptop, but the fixed chrome is a FIXED pixel height
     (--topbar-h 40 + .nav 70 = 110), so on anything shorter than ~733px tall the
     copy slides under the nav — verified: at 667px (iPhone SE portrait) the kicker
     overlapped the nav by 10px, and in phone landscape the h1 went behind it too.
     The floor keeps 24px of clearance no matter how short the viewport is. */
  padding: max(15vh, calc(var(--topbar-h) + 70px + 24px)) var(--gutter) 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Copy scrim. The frames are contain-fit on black, so a feathered BLACK wash is
   invisible over the letterbox columns and the dark field, and only bites where
   the polished chrome blows out to near-white (luma 253-255 around 33-67% of the
   hero) — which is exactly where .hero__sub was becoming unreadable. It sits on
   .hero__overlay, so it inherits the copy's scroll-fade and the product returns
   to full contrast as you scrub past. Nothing is repositioned. */
.hero__overlay::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  /* Centred on the SUB (~48% of hero height), not the title: the 900-weight
     display type carries itself, so concentrating the wash on the one line that
     actually crosses the chrome keeps the top of the V and the pouch bright. */
  background: radial-gradient(56% 30% at 50% 47%,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.54) 42%,
    rgba(0, 0, 0, 0.26) 70%,
    rgba(0, 0, 0, 0) 88%);
}
/* lift the copy above the scrim */
.hero__kicker, .hero__title, .hero__sub { position: relative; }

.hero__kicker {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--gold-bright);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  margin: 0 0 0.9rem;
}
.hero__title {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  word-spacing: normal;
  color: var(--on-dark);
  max-width: 16ch;
}
.hero__sub {
  margin: 1.4rem auto 0;
  max-width: 44ch;
  /* solid white + a touch more weight: this line crosses the product, unlike the
     body copy elsewhere on dark. The soft shadow is a safety net for any specular
     highlight that survives the scrim — wide blur, so it pools rather than haloes,
     and it is invisible against the black field. */
  color: var(--on-dark);
  font-weight: 500;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}
.hero__cue {
  position: absolute;
  left: 50%; bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--on-dark-dim);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: opacity .3s var(--ease);
}
.hero__cue-line {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, var(--gold-bright), transparent);
  animation: cue-bob 2s var(--ease) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  50%      { transform: scaleY(0.55); transform-origin: top; opacity: 0.4; }
}

/* Spec-sheet corner meta (aizrn-themes CINEMATIC signature): tiny technical
   labels anchored in the hero's lower corners — real figures only (the
   patent number + the maker's published hold spec). They live inside
   .hero__overlay so they inherit its scroll-fade with the headline. */
.hero__meta {
  position: absolute; bottom: clamp(20px, 4vh, 40px);
  color: var(--on-dark-dim);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}
.hero__meta--l { left: var(--gutter); }
.hero__meta--r { right: var(--gutter); }
@media (max-width: 640px) { .hero__meta--r { display: none; } } /* keep the cue clear */

/* =====================================================================
   LOADING SCREEN — full-viewport branded preloader.
   The product schematic draws itself in (stroke draw-in), then the V
   detaches and SNAPS back into the housing on loop until the hero frames
   are ready. hero.js hides it (plus a 10s failsafe); shown only when JS
   is on (html.js), so with scripts off it can never trap the page.
   z-index 300 = above the ribbon (60), nav (50) and consent banner (200):
   the page + banner reveal together, cleanly, when it fades.
   ===================================================================== */
.hero__loader { display: none; }
.js .hero__loader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.35rem;
  background: #0b0b0d;
  /* exit = curtain lift (aizrn-finish): the screen slides up off the page.
     NOTE the visibility delay: anything probing with elementFromPoint right
     after removing .is-hidden must wait out .85s or it reads a false miss. */
  transition: transform .85s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s .85s;
}
.hero__loader.is-hidden { transform: translateY(-100%); visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__loader { transition: opacity .25s ease, visibility 0s .25s; }
  .hero__loader.is-hidden { transform: none; opacity: 0; }
}

.hero__loader-brand {
  margin: 0 0 0.2rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.1rem; letter-spacing: -0.02em;
  color: var(--on-dark);
}
.hero__loader-brand b { color: var(--gold); font-weight: 800; }

.ldr { width: clamp(116px, 18vw, 156px); height: auto; }

/* 1) draw the product to detail (stroke draw-in, staggered) */
.ldr__draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ldr__housing { animation: ldr-draw 0.95s var(--ease) 0.10s forwards; }
.ldr__chamber { animation: ldr-draw 0.7s var(--ease) 0.55s forwards; }
/* the V traces its outline, then its polished fill floods in (both in one
   declaration — two `animation` rules on the same element would clobber). */
.ldr__vpath   { fill-opacity: 0; animation: ldr-draw 0.85s var(--ease) 0.45s forwards, ldr-vfill 0.55s var(--ease) 1.0s forwards; }
.ldr__vridge  { animation: ldr-draw 0.5s var(--ease) 0.95s forwards; }
.ldr__mags    { opacity: 0; animation: ldr-fade 0.5s var(--ease) 1.15s forwards; }

/* 2) ...then the V detaches, hovers against the pull, and snaps back in */
.ldr__v { animation: ldr-detach 2.8s cubic-bezier(0.45, 0.05, 0.35, 1) 1.8s infinite; will-change: transform; }
.ldr__field { opacity: 0; animation: ldr-field 2.8s linear 1.8s infinite; }
.ldr__mags > * { animation: ldr-mag-pulse 2.8s linear 1.8s infinite; }

@keyframes ldr-draw { to { stroke-dashoffset: 0; } }
@keyframes ldr-fade { to { opacity: 1; } }
@keyframes ldr-vfill { to { fill-opacity: 1; } }
@keyframes ldr-detach {
  0%   { transform: translateY(0); }                                                        /* seated */
  20%  { transform: translateY(-18px); animation-timing-function: ease-in-out; }            /* pulls free */
  30%  { transform: translateY(-20px); animation-timing-function: ease-in-out; }            /* hover float */
  42%  { transform: translateY(-18px); animation-timing-function: cubic-bezier(0.65, 0, 0.95, 0.45); }
  52%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }  /* SNAP */
  57%  { transform: translateY(1.6px); animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); } /* press-in settle */
  63%  { transform: translateY(0); }
  100% { transform: translateY(0); }                                                        /* rest, then repeat */
}
@keyframes ldr-field {
  0%, 16%   { opacity: 0; }
  26%, 44%  { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes ldr-mag-pulse {
  0%, 46%   { opacity: 0.8; }
  53%       { opacity: 1; }      /* the magnets "answer" at the moment of contact */
  62%, 100% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr__draw { animation: none; stroke-dashoffset: 0; }
  .ldr__vpath { animation: none; fill-opacity: 1; }
  .ldr__mags { animation: none; opacity: 1; }
  .ldr__mags > * { animation: none; }
  .ldr__v { animation: none; }
  .ldr__field { animation: none; opacity: 0; }
}
.hero__loader-track {
  width: min(240px, 56vw); height: 2px;
  background: rgba(255,255,255,0.14); overflow: hidden; border-radius: 2px;
}
.hero__loader-bar {
  height: 100%; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s linear;
}
.hero__loader-label {
  font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--on-dark-dim);
}

/* =====================================================================
   TRUST STRIP — warm welcome band, first thing after the dark hero
   ===================================================================== */
.trustbar {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative; z-index: 1;
}
/* Explicit column counts, never a free wrap — same reasoning as
   .credential__badges. Two bugs lived here:
   1. The gap was clamp(20px, 4vw, 60px) while .wrap caps at 1180px, so past
      1180 the viewport kept widening the gap but not the container. At 1440 the
      three gaps ate 173px and the Greek labels needed 1179px of the 1180 left.
   2. Free wrapping then dropped the 4th item onto its own line. In GREEK that
      happened at 1280 and 1440 — the two most common desktop widths — so the
      trust strip read as 3 + 1 orphan for every Greek visitor on a laptop.
   Greek labels run ~40% longer than English, so the breakpoints are set by
   GREEK, not English. Re-measure in Greek if these labels ever change. */
.trustbar__row {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center; justify-items: center; align-items: center;
  gap: clamp(16px, 2.6vw, 36px);
  padding-block: clamp(24px, 3vw, 36px);
}
@media (max-width: 1000px) {           /* 4-across no longer fits Greek */
  .trustbar__row { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 560px) {            /* two Greek labels no longer fit side by side */
  .trustbar__row { grid-template-columns: auto; }
}
.trust {
  display: inline-flex; align-items: center; gap: 0.65rem;
  color: var(--ink); font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 500; white-space: nowrap;
}
.trust .ico { color: var(--gold-ink); font-size: 1.4rem; line-height: 1; min-width: 1.4rem; }
@media (max-width: 560px) {
  /* the flex-basis that used to be here is gone — .trustbar__row is a grid now
     and the column count does the work (see its breakpoints above) */
  .trustbar__row { gap: 14px; }
  .trust { font-size: 0.82rem; justify-content: center; }
}

/* =====================================================================
   WHAT IT IS — centered editorial statement
   ===================================================================== */
.statement { text-align: center; }
.statement__title { font-size: clamp(2rem, 5.2vw, 3.8rem); max-width: 18ch; margin-inline: auto; }
.statement__body { margin: 1.6rem auto 0; max-width: 52ch; color: var(--ink-body); font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.statement__rule { width: 56px; height: 2px; background: var(--gold); margin: 2.6rem auto 0; border-radius: 2px; }

/* =====================================================================
   HOW IT WORKS — split: mechanism points + exploded-product slot
   ===================================================================== */
.mechanism { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 900px) { .mechanism { grid-template-columns: 1fr 1.05fr; } }
.mechanism__title { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 14ch; }
.mechanism__head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); }
.mechanism__lede {
  margin: 1.5rem 0 0; color: var(--ink-body); max-width: 64ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
}
.mechanism__list { margin: 2.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 1.6rem; }
.mechanism__item { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.mechanism__item h3 {
  font-family: var(--font-body); font-weight: 600; color: var(--ink);
  font-size: 1.1rem; letter-spacing: 0; margin: 0 0 0.4rem;
}
.mechanism__item p { margin: 0; color: var(--ink-dim); max-width: 44ch; }

/* exploded-view product photo (dark panel — the product is shot on black) */
.part-slot {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  overflow: hidden; background: #0b0b0d; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.part-slot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* (The standalone GLASSES section was removed: a solo band around a
   PORTRAIT photo is always too tall. The founder shot is now the lead tile
   of the Uses bento — see .use--lead — where object-fit crops it to the
   useful middle band and the caption overlays on the shared scrim.) */

/* =====================================================================
   FINISHES — colorway showcase (chrome / gold), dark product cards
   ===================================================================== */
.finishes__head { max-width: 60ch; margin-bottom: clamp(40px, 6vw, 64px); }
.finishes__head h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.finishes__head p { margin: 1.2rem 0 0; color: var(--ink-body); max-width: 50ch; }
.finishes__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .finishes__grid { grid-template-columns: repeat(3, 1fr); } }
.finish {
  margin: 0; position: relative; border-radius: var(--radius-lg);
  overflow: hidden; background: #0a0a0c; border: 1px solid var(--line);
  box-shadow: var(--shadow);
  will-change: transform;                 /* layer-ready so the clip holds during the img zoom */
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.finish img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transform: translateZ(0);               /* own compositor layer -> GPU-smooth scale */
  backface-visibility: hidden;
  transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .finish:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(74, 55, 25, 0.18); }
  .finish:hover img { transform: scale(1.04) translateZ(0); }
}
@media (prefers-reduced-motion: reduce) {
  .finish, .finish img { transition: none; }
  .finish:hover { transform: none; }
  .finish:hover img { transform: none; }
}
.finish figcaption {
  position: absolute; left: 1.6rem; bottom: 1.4rem; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em;
}

/* =====================================================================
   USES — asymmetric bento of real lifestyle photography
   ===================================================================== */
.uses__head { max-width: 60ch; margin-bottom: clamp(40px, 6vw, 72px); }
.uses__title { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.uses__head p { margin: 1.2rem 0 0; color: var(--ink-body); max-width: 50ch; }

/* The Uses act runs DARK: it is the page's photo gallery, so the lifestyle
   shots sit on a near-black stage (and it keeps the cinematic break the old
   standalone founder-photo band used to provide). */
.uses { background: #0b0b0d; }
.uses .uses__title { color: var(--on-dark); }
.uses .uses__head p { color: var(--on-dark-soft); }

.uses-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .uses-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(240px, 1fr); }
  .use--wide { grid-column: span 2; }
  .use--full { grid-column: 1 / -1; }
  /* The founder shot is a PORTRAIT asset, so it gets a PORTRAIT tile:
     1 col x 2 rows is ~0.72:1 against the photo's 0.78:1, so cover trims only
     a sliver of the sides and keeps her face AND the product. The grid caps its
     height, which is what stops it running long. Do not make this tile wide. */
  .use--lead { grid-row: span 2; }
}
.use--lead .use__media { object-position: 50% 38%; }
.use--lead { min-height: 420px; }
.use__caption--lead {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; max-width: 18ch;
}
.use {
  position: relative; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden; min-height: 240px;
  display: flex; align-items: flex-end; isolation: isolate;
}
.use__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.use::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0.04) 55%, transparent 78%);
}
.use__caption {
  position: relative; z-index: 1; color: #fff; font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.12rem); padding: 1.5rem;
  text-shadow: 0 1px 14px rgba(0,0,0,0.45);
}

/* =====================================================================
   CREDIBILITY — patent / origin trust beat (warm band)
   ===================================================================== */
.credential { background: var(--bg-elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
/* Section background tones. These were inline style="" attributes; they are
   classes now so style-src can drop 'unsafe-inline' (CSP hashes cover inline
   <script> but NOT style attributes, which need 'unsafe-hashes' — cleaner to
   just not have any). They are load-bearing for the alternating background
   rhythm: no two adjacent sections may share a tone. Re-verify that if you
   add or move a section. */
.section--alt  { background: var(--bg-alt); }
.section--elev { background: var(--bg-elev); }
/* the icon sprite is a definitions-only SVG: out of flow, renders nothing */
.sprite { position: absolute; }

/* Inline SVG icons (the sprite at the top of <body>). Sized in em and given the
   font's optical baseline offset, so they sit exactly where the Phosphor icon
   font used to and every existing font-size-based rule keeps working unchanged. */
.ico {
  width: 1em; height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: none;
}
.credential__seal { display: block; color: var(--gold-ink); font-size: 2.6rem; line-height: 1; margin-bottom: 1.1rem; margin-inline: auto; }
.credential__patent {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: -0.03em; color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.credential__org { margin: 1rem auto 0; color: var(--ink-dim); max-width: 42ch; }
.credential__origin { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.7rem; color: var(--gold-ink); font-weight: 600; }
.credential__origin .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-ink); }

/* =====================================================================
   FOOTER — warm contact destination
   ===================================================================== */
.footer { background: var(--bg-alt); border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 820px) { .footer__top { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.footer__title { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.footer__lede { margin: 1.2rem 0 0; color: var(--ink-body); max-width: 40ch; }
.footer__contact { display: grid; gap: 1.4rem; }
.footer__email { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--ink); display: inline-block; width: fit-content; }
.footer__email:hover { color: var(--gold-ink); }
.footer__socials { display: flex; gap: 1.4rem; align-items: center; }
.footer__social { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; color: var(--ink-dim); font-size: 0.95rem; }
.footer__social:hover { color: var(--ink); }
.footer__social svg { width: 20px; height: 20px; fill: currentColor; }
.footer__meta {
  margin-top: clamp(48px, 7vw, 88px); padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between;
  color: var(--ink-faint); font-size: 0.82rem;
}
/* legal links: keep the visual size but give each a real 44px tap target */
.footer__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.2rem; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* studio credit — discreet, centred, one notch quieter than the meta row */
.footer__craft {
  margin: 1.5rem 0 0; text-align: center;
  color: var(--ink-faint); font-size: 0.76rem; letter-spacing: 0.03em;
}
.footer__craft a {
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__craft a:hover { color: var(--gold-ink); border-color: var(--gold-line); }

/* ---- Hero entrance (load-in) ----------------------------------------
   Gated on html.hero-ready (set by js/hero.js when the loading screen's
   curtain lifts) so the blur-in plays AS the page is revealed, not
   invisibly behind the loader. The hidden pre-state is scoped to .js:
   with scripts off there is no loader and the hero shows statically. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__kicker, .js .hero__title, .js .hero__sub {
    opacity: 0; transform: translateY(34px); filter: blur(12px);
  }
  .hero-ready .hero__kicker, .hero-ready .hero__title, .hero-ready .hero__sub {
    animation: hero-in 1.05s var(--ease) forwards;
  }
  .hero-ready .hero__kicker { animation-delay: 0.10s; }
  .hero-ready .hero__title  { animation-delay: 0.24s; }
  .hero-ready .hero__sub    { animation-delay: 0.44s; }
  /* The cue is revealed when the loader fades; its opacity is driven by the
     scroll handler (JS), so it must NOT carry a filling keyframe animation. */
}
@keyframes hero-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* =====================================================================
   Motion-claimed safeguards
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__cue-line { animation: none; }
  .hero { height: 100svh; }
}

/* ---- a11y utility --------------------------------------------------- */
.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;
}

/* =====================================================================
   SURFACE (aizrn-surface) — ONE faint film grain as the page's material.
   Fixed + static (no repaint jank, no motion concern); opacity kept low
   enough that body-text contrast is unchanged. Inline SVG noise (~300B).
   ===================================================================== */
.grain { position: relative; }
.grain::after {
  content: "";
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 9999;
  opacity: var(--grain-opacity, 0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   ANNOUNCEMENT RIBBON — always-visible dark strip above the nav.
   Stays dark so it reads over both the dark hero and the warm body.
   ===================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: center;
  background: #0b0b0d;
  border-bottom: 1px solid rgba(198, 161, 91, 0.22);
  color: var(--on-dark-soft);
  padding-inline: var(--gutter);
}
.topbar__row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 3vw, 28px);
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  letter-spacing: 0.02em;
}
.topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.topbar__item .ico { color: var(--gold-bright); font-size: 1.05em; line-height: 1; }
.topbar__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-line); flex: 0 0 auto; }
.topbar__link { padding-block: 12px; margin-block: -12px; transition: color .2s var(--ease); }
.topbar__link:hover { color: var(--gold-bright); }
@media (max-width: 560px) {
  .topbar__item--optional, .topbar__sep--optional { display: none; }
}

/* =====================================================================
   CREDIBILITY BADGES — real credentials, elevated to seal-like chips
   ===================================================================== */
/* A deliberate 2x2, not a wrap.
   Four badges need ~729px in English and ~923px in Greek, but the column is
   40rem (640px), so they can NEVER sit on one row — flex-wrap left the fourth
   orphaned and centred under the other three, which read as a mistake. Worse,
   the 3+1 split fit by only 2px, so a one-word copy edit could flip it to 2+2
   on its own.
   Two content-sized columns make it stable and intentional in both languages.
   Add a fifth badge and this becomes 2+2+1 — at that point go to 3 columns or
   cut one, don't just let it wrap. */
.credential__badges {
  margin: 2.4rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;   /* centre the pair of columns in the section */
  justify-items: center;     /* each pill keeps its natural width, centred */
  gap: 10px 12px;
  max-width: 40rem;
}
/* one per row once two pills no longer fit side by side */
@media (max-width: 560px) {
  .credential__badges { grid-template-columns: auto; }
}
.cred-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem; border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line); background: var(--gold-soft);
  color: var(--ink); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.cred-badge .ico { color: var(--gold-ink); font-size: 1.05rem; line-height: 1; }

/* =====================================================================
   SPEC / STRENGTH — big-number proof band (the maker's real figures)
   ===================================================================== */
.spec { background: var(--bg-elev); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec__eyebrow { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.spec__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
@media (min-width: 640px) { .spec__grid { grid-template-columns: repeat(3, 1fr); } }
.spec__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.spec__num {
  font-family: var(--font-display); font-weight: 800; color: var(--ink);
  font-size: clamp(2.8rem, 6.5vw, 4.6rem); letter-spacing: -0.03em; line-height: 1;
  font-feature-settings: "tnum" 1;   /* tabular figures — spec-sheet feel */
}
.spec__label { color: var(--ink-dim); font-size: 0.95rem; max-width: 18ch; }

/* =====================================================================
   MAKER — the real handmade / founder story
   ===================================================================== */
.maker__wrap { max-width: 40rem; margin-inline: auto; text-align: center; }
.maker__title { font-size: clamp(1.9rem, 4.6vw, 3.2rem); margin-top: 0.5rem; }
.maker__body {
  margin: 1.6rem auto 0; max-width: 46ch; color: var(--ink-body);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}
.maker__sign {
  margin-top: 1.8rem; font-family: var(--font-display); font-weight: 700;
  color: var(--gold-ink); font-size: 1rem; letter-spacing: -0.01em;
}

/* =====================================================================
   GIFTS + ENGRAVING — the steel V takes an engraving (fact confirmed by
   the maker; all specifics live with her, so the copy routes there).
   Raised band between the two bg-alt sections keeps the rhythm alternating.
   ===================================================================== */
.gift { background: var(--bg-alt); }
.gift__wrap { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 860px) { .gift__wrap { grid-template-columns: 1.1fr 0.9fr; } }
.gift__title { font-size: clamp(1.9rem, 4vw, 3rem); max-width: 16ch; }
.gift__body {
  margin: 1.4rem 0 0; max-width: 48ch; color: var(--ink-body);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
}
.gift__slot {
  margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-lg);
  overflow: hidden; background: #0b0b0d; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.gift__slot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* =====================================================================
   GET ONE — primary conversion CTA (direct-from-maker, real channels)
   ===================================================================== */
.get-one { border-top: 1px solid var(--line); }   /* seam between the maker story and the CTA (both warm sand) */
.get-one__panel { max-width: 660px; margin-inline: auto; text-align: center; }
.get-one__panel .eyebrow { margin-bottom: 1.1rem; }
.get-one__title { font-size: clamp(2rem, 5vw, 3.4rem); }
.get-one__lede {
  margin: 1.3rem auto 0; max-width: 48ch; color: var(--ink-body);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
}
.get-one__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.get-one__actions .btn .ico { font-size: 1.2em; line-height: 1; }
@media (max-width: 460px) { .get-one__actions .btn { width: 100%; justify-content: center; } }

/* (Newsletter / "stay in touch" section removed 2026-07-17 at client request.) */