/* ============================================================================
   GOLF CONCEPTS — rebuild by Cave Nexus
   Direction: the site as an instrument readout. Graphite ground, monospaced
   launch data as furniture, one signal-amber accent taken from the TrackMan
   unit that sits in their own studio photography. Turf green appears only
   inside the client's photographs — never as UI.
   ========================================================================== */

:root {
  /* --- surface ramp: graphite, tinted cool (instrument housing) ----------- */
  --ink:      #0a0b0d;
  --coal:     #0f1114;
  --card:     #15181c;
  --card-2:   #1c2026;

  /* --- foreground: cool off-white, muted derived by alpha ----------------- */
  --bone:     #eef1f5;
  --muted:    rgba(238, 241, 245, .60);
  --faint:    rgba(238, 241, 245, .52);   /* .36 measured 3.07:1 on --ink; .52 = 4.9:1 (WCAG AA) */

  /* --- accent: signal amber, 3 steps -------------------------------------- */
  --amber:        #ff7a18;
  --amber-bright: #ffa254;
  --amber-deep:   #9c4407;
  --amber-soft:   rgba(255, 122, 24, .12);

  /* --- hairlines ---------------------------------------------------------- */
  --line:   rgba(238, 241, 245, .09);
  --line-2: rgba(255, 122, 24, .30);

  --radius:    14px;
  --radius-sm: 8px;

  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease: cubic-bezier(.23, 1, .32, 1);
  --wa:   #25d366;

  --head-h: 74px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, video, svg { max-width: 100%; display: block; }
/* the `hidden` attribute must beat component display rules (.notice is flex) */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* --- type ------------------------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;   /* tight lane — technical/geometric */
}
h1 { font-size: clamp(2.15rem, 5.6vw, 4.75rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.02em; }
h4 { font-size: 1.05rem; letter-spacing: -0.015em; }
p  { color: var(--muted); }
strong { color: var(--bone); font-weight: 600; }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 56ch; color: var(--muted); }
.tight { max-width: 62ch; }

/* the micro-label — the constant opposition to tight display tracking */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.15rem;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--amber); opacity: .8; flex: none; }
.eyebrow.no-rule::before { display: none; }

.wrap { width: min(1240px, 92vw); margin-inline: auto; }
.wrap-narrow { width: min(880px, 92vw); margin-inline: auto; }
section { padding: clamp(3.75rem, 8vw, 7rem) 0; position: relative; }
.section-alt { background: var(--coal); }
.divider { height: 1px; background: var(--line); border: 0; }

/* --- focus: visible on everything interactive ------------------------------ */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--amber); color: #140801;
  padding: .8rem 1.3rem; font-weight: 600; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ============================================================================
   LOADER — "the launch monitor acquires the ball, the numbers resolve,
             and the shot is away."
   ========================================================================== */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: grid; place-items: center;
  transition: opacity .8s var(--ease);
}
#loader.hidden { opacity: 0; pointer-events: none; }
.ld-inner { text-align: center; width: min(420px, 82vw); }
.ld-svg { width: 100%; height: auto; margin-bottom: 1.5rem; }

.ld-ring  { fill: none; stroke: var(--line); stroke-width: 1; }
.ld-cross { stroke: var(--line-2); stroke-width: 1; opacity: .55; }
.ld-sweep {
  stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round;
  transform-box: view-box; transform-origin: 70px 130px;
  animation: ldSweep 1.6s linear infinite;
}
/* Positioning lives on the wrapper <g>; the animated <g> only scales/fades, so a
   CSS transform can never clobber the SVG placement. */
.ld-lock-at { transform: translate(70px, 130px); }
.ld-lock {
  fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round;
  opacity: 0; animation: ldLock .55s var(--ease) .8s forwards;
}
.ld-ball-at { transform: translate(70px, 130px); animation: ldAway .8s cubic-bezier(.3,0,.7,.55) 2.05s forwards; }
.ld-ball { fill: var(--bone); opacity: 0; animation: ldBall .45s var(--ease) .5s forwards; }
.ld-tracer {
  fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0;
  animation: ldTracer .8s cubic-bezier(.3,0,.7,.55) 2.05s forwards;
}

@keyframes ldSweep { to { transform: rotate(360deg); } }
@keyframes ldLock  { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
@keyframes ldBall  { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes ldAway  {
  0%   { transform: translate(70px, 130px) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(306px, 30px) scale(.55); opacity: 0; }
}
@keyframes ldTracer { to { opacity: 1; stroke-dashoffset: 0; } }

.ld-read {
  display: flex; justify-content: center; gap: clamp(.9rem, 3vw, 1.9rem);
  font-family: var(--font-mono); margin-bottom: 1.5rem;
}
.ld-read div { text-align: center; }
.ld-read .k { display: block; font-size: .54rem; letter-spacing: .18em; color: var(--faint); text-transform: uppercase; }
.ld-read .v { display: block; font-size: 1rem; color: var(--bone); font-variant-numeric: tabular-nums; }
.ld-word { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; }
.ld-word span { color: var(--amber); }
.ld-status {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--faint); margin-top: .5rem;
}
.ld-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 1.3rem; }
.ld-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber), var(--amber-bright));
  animation: ldFill 2.5s var(--ease) forwards;
}
@keyframes ldFill { to { width: 100%; } }

/* ============================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--head-h);
  display: flex; align-items: center;
  background: rgba(10, 11, 13, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.hdr.scrolled { background: rgba(10, 11, 13, .94); border-bottom-color: var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 1.4rem; }

.brand { display: flex; align-items: center; gap: .85rem; flex: none; }
.brand img { height: 34px; width: auto; }
.brand-tag {
  font-family: var(--font-mono); font-size: .52rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
  line-height: 1.5; padding-left: .85rem; border-left: 1px solid var(--line);
}
@media (max-width: 1180px) { .brand-tag { display: none; } }

/* One primary CTA in the bar: the nav copy exists for the mobile drawer only.
   Must out-specify `.nav > a` (0,2,1) above, hence the tag in the selector. */
.nav > a.nav-only-cta { display: none; }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
/* :not(.btn) throughout — the nav link styling must never capture the CTA,
   whose own .btn rules have lower specificity. */
.nav > a:not(.btn), .nav .has-menu > button {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .8rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.nav > a:not(.btn):hover, .nav .has-menu > button:hover,
.nav > a:not(.btn)[aria-current="page"] { color: var(--bone); background: rgba(238,241,245,.05); }
.nav > a:not(.btn)[aria-current="page"] { color: var(--amber); }
.nav .caret { width: 9px; height: 9px; transition: transform .25s var(--ease); }
.has-menu[data-open="true"] .caret { transform: rotate(180deg); }
.has-menu { position: relative; }

/* Explicit columns, not one flow-grid. The old 3-column flow wrapped a 4-item
   group onto a second row, orphaned the 4th item, and let a long name push its
   price out of line with the price above it. Each group now owns a column and
   each row owns its own name/figure baseline. */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  background: var(--coal); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.4rem 1.1rem;
  display: grid; gap: .2rem 1.6rem; align-items: start;
  box-shadow: 0 26px 60px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.mega-2 { width: min(680px, 92vw); grid-template-columns: 1fr 1fr; }
.mega-3 { width: min(820px, 94vw); grid-template-columns: 1.15fr 1fr 1fr; }
.has-menu[data-open="true"] .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-col { display: flex; flex-direction: column; min-width: 0; }
.mega h5, .mega .mega-label {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--faint);
  margin: 0 .6rem .55rem; min-height: 1em;
}
.mega-col > a {
  display: block; padding: .5rem .6rem .55rem; border-radius: var(--radius-sm);
  color: var(--muted); transition: background .18s var(--ease), color .18s var(--ease);
}
.mega-col > a:hover, .mega-col > a:focus-visible { background: var(--amber-soft); color: var(--bone); }
.mi-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .9rem;
  font-size: .87rem; line-height: 1.3;
}
.mi-top b {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 400;
  color: var(--faint); flex: none; white-space: nowrap;
}
.mega-col > a:hover .mi-top b { color: var(--amber-bright); }
.mi-sub {
  display: block; margin-top: .18rem; font-size: .72rem; line-height: 1.4;
  color: var(--faint); letter-spacing: .005em;
}
.mega-rail {
  grid-column: 1 / -1; margin-top: .9rem; padding: .8rem .6rem .1rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  transition: color .18s var(--ease);
}
.mega-rail:hover { color: var(--amber); }
.mega-rail b { font-weight: 400; color: var(--muted); margin-left: auto; }
.mega-rail svg { width: 13px; height: 13px; flex: none; }
.mega-rail b + svg { margin-left: .4rem; }

.hdr-cta { display: flex; align-items: center; gap: .5rem; flex: none; }
.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: var(--radius-sm); color: var(--muted);
            transition: color .2s var(--ease), background .2s var(--ease); }
.cart-btn:hover { color: var(--bone); background: rgba(238,241,245,.05); }
.cart-count {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--amber); color: #140801; border-radius: 999px;
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.cart-count[hidden] { display: none; }

/* flex + fixed gap, so bar spacing is exactly 6.5px (1.5px bar + 5px gap) and the
   close-state translateY below converges them into a true X */
.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--radius-sm); color: var(--bone);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px;
               transform-origin: center; transition: transform .3s var(--ease), opacity .2s var(--ease); }
body.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  letter-spacing: -0.01em;
  padding: .92rem 1.7rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--amber); color: #140801; }
.btn-primary:hover { background: var(--amber-bright); box-shadow: 0 12px 34px rgba(255,122,24,.28); }
.btn-solid { background: var(--bone); color: var(--ink); }
.btn-solid:hover { box-shadow: 0 12px 34px rgba(238,241,245,.16); }
.btn-ghost { border-color: var(--line); color: var(--bone); background: rgba(238,241,245,.03); }
.btn-ghost:hover { border-color: var(--line-2); color: var(--amber); }
.btn-wa { background: var(--wa); color: #04180c; }
.btn-wa:hover { filter: brightness(1.1); box-shadow: 0 12px 34px rgba(37,211,102,.26); }
.btn-sm { padding: .62rem 1.15rem; font-size: .82rem; }
.btn-lg { padding: 1.05rem 2.1rem; font-size: .98rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================================
   HERO — their real studio, with the real launch numbers over it
   ========================================================================== */
.hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end;
        padding-top: calc(var(--head-h) + 3rem); padding-bottom: clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
/* The hero art is already dark on the left, so the scrim only needs to guarantee
   text contrast — pushing it harder just buries the subject. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(10,11,13,.74) 30%, rgba(10,11,13,.22) 66%, rgba(10,11,13,.45) 100%),
    linear-gradient(to right, rgba(10,11,13,.80) 0%, rgba(10,11,13,.44) 44%, rgba(10,11,13,.08) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: min(1240px, 92vw); }
/* shorter hero for interior pages that still want a photographic lead */
.hero-compact { min-height: min(58vh, 540px); padding-bottom: clamp(2rem, 4vw, 3rem); }
/* this photo is brighter than the homepage hero, so it needs a lighter scrim —
   enough for 4.5:1 text on the left, without flattening the bay on the right */
.hero-compact .hero-bg img { object-position: 58% 42%; }
.hero-compact .hero-bg::after {
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(10,11,13,.72) 30%, rgba(10,11,13,.20) 72%, rgba(10,11,13,.42) 100%),
    linear-gradient(to right, rgba(10,11,13,.94) 0%, rgba(10,11,13,.74) 34%, rgba(10,11,13,.18) 78%, rgba(10,11,13,.05) 100%);
}
.hero-compact h1 { max-width: 18ch; margin-bottom: .9rem; }
.hero-compact .crumb { margin-bottom: 1rem; }
.reply-promise {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  padding: .6rem 1rem .6rem .8rem; border: 1px solid var(--line-2);
  background: rgba(15,17,20,.66); backdrop-filter: blur(8px);
  border-radius: 999px; font-size: .85rem; color: var(--bone);
}
.reply-promise svg { width: 16px; height: 16px; color: var(--amber); flex: none; }
.hero h1 { max-width: 15ch; margin-bottom: 1.25rem; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .lead { margin-bottom: 2rem; }
.hero-actions { margin-bottom: clamp(2rem, 5vw, 3.2rem); }

/* the readout strip — signature element, real TrackMan labels + real numbers */
.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(15,17,20,.72); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.readout > div { padding: .85rem .75rem; border-right: 1px solid var(--line); text-align: center; }
.readout > div:last-child { border-right: 0; }
.readout .k {
  display: block; font-family: var(--font-mono); font-size: .55rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .3rem;
  white-space: nowrap;
}
.readout .v {
  display: block; font-family: var(--font-mono); font-size: 1.12rem; font-weight: 600;
  color: var(--bone); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.readout .u { font-size: .58rem; color: var(--faint); margin-left: 2px; }
.readout-note {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em;
  color: var(--faint); margin-top: .7rem; text-transform: uppercase;
}

/* ============================================================================
   GENERIC CARD + GRID
   ========================================================================== */
.grid { display: grid; gap: 1.15rem; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--card-2); }

.head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.head.center { text-align: center; }
.head.center .eyebrow { justify-content: center; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.head h2 { margin-bottom: .8rem; }

/* ============================================================================
   SERVICE / PILLAR CARDS
   ========================================================================== */
.pillar { display: flex; flex-direction: column; text-decoration: none; }
.pillar-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--coal); }
.pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
/* portrait source in a landscape card — hold the face, not the chest */
.pillar-img.focus-face img { object-position: center 12%; }
.pillar:hover .pillar-img img { transform: scale(1.05); }
.pillar-img::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,24,28,.95), rgba(21,24,28,.05) 62%); }
.pillar-n {
  position: absolute; top: .9rem; left: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; color: var(--amber);
}
.pillar-body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pillar-body h3 { margin-bottom: .55rem; }
.pillar-body p { font-size: .9rem; margin-bottom: 1.1rem; flex: 1; }
.arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}
.arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.pillar:hover .arrow svg, .arrow:hover svg { transform: translateX(4px); }

/* ============================================================================
   PRODUCT CARD
   ========================================================================== */
.pcard { display: flex; flex-direction: column; position: relative; }
.pcard-img {
  position: relative; aspect-ratio: 1; background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%;
                 transition: transform .55s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.06); }
.pcard-body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; gap: .38rem; }
.pcard-brand { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em;
               text-transform: uppercase; color: var(--faint); }
.pcard-name { font-family: var(--font-display); font-weight: 600; font-size: .9rem;
              line-height: 1.28; letter-spacing: -0.01em; color: var(--bone); flex: 1; }
.pcard-name a::after { content: ''; position: absolute; inset: 0; }
.pcard-price { font-family: var(--font-mono); font-size: .92rem; font-weight: 600; color: var(--amber);
               font-variant-numeric: tabular-nums; }
.pcard-price small { color: var(--faint); font-weight: 400; font-size: .68rem; }
.badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 3;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 999px; background: rgba(10,11,13,.82); color: var(--bone);
  border: 1px solid var(--line);
}
.badge.out { color: #ff9c9c; border-color: rgba(255,120,120,.34); }
.badge.acc { color: var(--amber); border-color: var(--line-2); }

/* ============================================================================
   FITTING PACKAGES
   ========================================================================== */
.pkg { display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.7rem; position: relative; }
.pkg.featured { border-color: var(--line-2); background: linear-gradient(180deg, var(--amber-soft), transparent 42%), var(--card); }
.pkg-tag {
  position: absolute; top: -1px; right: 1.3rem;
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  background: var(--amber); color: #140801; padding: .25rem .6rem; border-radius: 0 0 6px 6px;
}
.pkg h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.pkg-dur { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
           color: var(--faint); text-transform: uppercase; margin-bottom: 1.1rem; }
.pkg-price { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem;
             letter-spacing: -0.03em; color: var(--bone); margin-bottom: 1.2rem; line-height: 1; }
.pkg-price small { font-family: var(--font-mono); font-size: .62rem; font-weight: 400;
                   color: var(--faint); letter-spacing: .1em; display: block; margin-top: .4rem; }
.pkg ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.5rem; flex: 1; }
.pkg li { display: flex; gap: .6rem; font-size: .87rem; color: var(--muted); line-height: 1.45; }
.pkg li svg { width: 15px; height: 15px; flex: none; color: var(--amber); margin-top: 3px; }

/* ============================================================================
   REASONS / NUMBERED LIST
   ========================================================================== */
.reason { padding: 1.35rem 1.4rem 1.5rem; }
.reason-n {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  color: var(--amber); margin-bottom: .75rem; display: block;
}
.reason h3 { font-size: .96rem; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .01em; }
.reason p { font-size: .87rem; }

/* ============================================================================
   LOGO WALL — the brands we fit, as real marks rather than text pills
   ========================================================================== */
.logo-wall {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .8rem;
}
.logo-tile {
  position: relative; display: grid; place-items: center; min-height: 118px;
  padding: 1.5rem 1.3rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.logo-tile::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120px 60px at 50% 118%, rgba(255,122,24,.20), transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.logo-tile:hover { border-color: var(--line-2); background: var(--card-2); transform: translateY(-3px); }
.logo-tile:hover::after { opacity: 1; }
/* build/logos.mjs already exports these as white-on-transparent (alpha derived
   from luminance), so do NOT re-filter them here */
.logo-tile img {
  max-height: 34px; max-width: 84%; width: auto; object-fit: contain;
  opacity: .66;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.logo-tile:hover img { opacity: 1; transform: scale(1.04); }
.logo-tile .wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.01em; color: var(--muted); text-align: center;
  transition: color .3s var(--ease);
}
.logo-tile:hover .wordmark { color: var(--bone); }

/* ============================================================================
   BRAND CARD — the brands we stock, led by a real product shot
   ========================================================================== */
.bcard { display: flex; flex-direction: column; position: relative; }
.bcard-img {
  position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--coal);
}
/* full-bleed cover: the source photos carry their own backdrops, so containing
   them would frame a visible box inside the tile */
.bcard-img > img:not(.bcard-logo) {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  transition: transform .7s var(--ease);
}
.bcard:hover .bcard-img > img:not(.bcard-logo) { transform: scale(1.06); }
.bcard-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(21,24,28,.92), rgba(21,24,28,.10) 58%, rgba(255,122,24,.06));
}
.bcard-logo {
  position: absolute; left: 1.05rem; bottom: .95rem; z-index: 2;
  max-height: 20px; width: auto; opacity: .9;
}
.bcard-count {
  position: absolute; top: .85rem; right: .95rem; z-index: 2;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
  background: rgba(10,11,13,.7); border: 1px solid var(--line-2);
  padding: .26rem .6rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.bcard-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.bcard-body h3 { font-size: 1.08rem; letter-spacing: -0.02em; margin-bottom: .5rem; }
.bcard-body h3 a::after { content: ''; position: absolute; inset: 0; }
.bcard-body p { font-size: .87rem; flex: 1; margin-bottom: 1rem; }

/* ============================================================================
   STEPS — what happens after you get in touch
   ========================================================================== */
/* auto-fit gave five columns at desktop width, which left a sixth step alone on
   its own row. Each length gets a layout that fills its last row instead. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; counter-reset: s; }
@media (min-width: 901px) {
  .steps-6 { grid-template-columns: repeat(3, 1fr); }
  .steps-5 { grid-template-columns: repeat(6, 1fr); }
  .steps-5 > * { grid-column: span 2; }
  .steps-5 > *:nth-child(4), .steps-5 > *:nth-child(5) { grid-column: span 3; }
  .steps-4 { grid-template-columns: repeat(2, 1fr); }
}
.step { position: relative; padding: 1.4rem 1.35rem 1.5rem; }
.step::before {
  counter-increment: s; content: '0' counter(s);
  display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em;
  color: var(--amber); margin-bottom: .7rem;
}
.step h3 { font-size: .98rem; margin-bottom: .45rem; }
.step p { font-size: .87rem; }

/* ============================================================================
   MARQUEE — brands we fit
   ========================================================================== */
.marquee { overflow: hidden; position: relative; padding: 1.2rem 0;
           border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 3.2rem; width: max-content; animation: mq 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: -0.01em; color: rgba(238,241,245,.55); white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee span:hover { color: var(--bone); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ============================================================================
   SPLIT / FEATURE
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.rev > *:first-child { order: 2; }
.split-media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split-media.portrait img { aspect-ratio: 3/4; }

.stat-row { display: flex; flex-wrap: wrap; gap: 1.9rem; margin-top: 1.9rem; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem;
          letter-spacing: -0.03em; color: var(--amber); line-height: 1; }
.stat span { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
             text-transform: uppercase; color: var(--faint); }

.creds { list-style: none; display: flex; flex-direction: column; gap: .05rem; margin: 1.6rem 0; }
.creds li { display: flex; gap: .85rem; align-items: baseline; padding: .68rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.creds li:last-child { border-bottom: 0; }
.creds b { font-family: var(--font-mono); font-size: .62rem; color: var(--amber); letter-spacing: .12em; flex: none; width: 46px; white-space: nowrap; }

blockquote.pull {
  border-left: 2px solid var(--amber); padding: .3rem 0 .3rem 1.5rem; margin: 1.8rem 0;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.4; letter-spacing: -0.02em; color: var(--bone); font-style: normal;
}
blockquote.pull cite { display: block; margin-top: .8rem; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); font-style: normal; }

/* ============================================================================
   REVIEWS
   ========================================================================== */
.review {
  position: relative; padding: 2.6rem 1.6rem 1.7rem; display: flex; flex-direction: column;
  overflow: hidden;
}
/* oversized quote glyph, bled off the top-left corner */
/* Archivo has no U+201C at weight 900 — it renders as tofu. Use a serif stack,
   which is also the better-looking mark for an oversized quote. */
.review::before {
  content: '\201C'; position: absolute; top: .1rem; left: .85rem;
  font-family: Georgia, 'Times New Roman', 'Segoe UI', serif; font-weight: 700;
  font-size: 5.4rem; line-height: 1;
  color: var(--amber); opacity: .22; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.review:hover::before { opacity: .3; transform: translateY(-3px); }
.review::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px 150px at 12% -10%, rgba(255,122,24,.10), transparent 70%);
}
.review p {
  position: relative; z-index: 1;
  font-size: .95rem; color: var(--bone); line-height: 1.62; flex: 1; margin-bottom: 1.4rem;
}
.review footer {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .75rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.review .who {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber);
}
.review .who small { display: block; letter-spacing: .12em; color: var(--faint); margin-top: .22rem; }
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--amber), var(--amber-deep));
  color: #140801; font-family: var(--font-display); font-weight: 800; font-size: .92rem;
  letter-spacing: -0.01em;
}
.stars { display: flex; gap: 2px; margin-bottom: .9rem; color: var(--amber); }
.stars svg { width: 14px; height: 14px; }

/* ============================================================================
   SHOP — filters + toolbar
   ========================================================================== */
.shop-layout { display: grid; grid-template-columns: 232px 1fr; gap: 2.4rem; align-items: start; }
.filters { position: sticky; top: calc(var(--head-h) + 1.4rem); }
.fgroup { border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.fgroup:last-child { border-bottom: 0; }
.fgroup h4, .fgroup .fgroup-h {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .8rem;
}
.fopt {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  padding: .42rem .6rem; border-radius: var(--radius-sm); font-size: .85rem; color: var(--muted);
  text-align: left; transition: background .18s var(--ease), color .18s var(--ease);
}
.fopt:hover { background: rgba(238,241,245,.05); color: var(--bone); }
.fopt[aria-pressed="true"] { background: var(--amber-soft); color: var(--amber); }
.fopt b { font-family: var(--font-mono); font-size: .6rem; font-weight: 400; color: var(--faint); }
.fopt[aria-pressed="true"] b { color: var(--amber); }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
           flex-wrap: wrap; margin-bottom: 1.5rem; }
.result-count { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
                text-transform: uppercase; color: var(--faint); }
.result-count b { color: var(--amber); font-weight: 500; }
.sel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .55rem 2rem .55rem .8rem; font-size: .82rem; color: var(--bone); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef1f5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 13px;
}
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .34rem .7rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--amber-soft);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--amber);
}
.chip svg { width: 11px; height: 11px; }
.mobile-filter-btn { display: none; }
.empty { padding: 4rem 1rem; text-align: center; grid-column: 1/-1; }
.empty p { margin-bottom: 1.2rem; }

/* ============================================================================
   PRODUCT DETAIL
   ========================================================================== */
.pd { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pd-gallery { position: sticky; top: calc(var(--head-h) + 1.5rem); }
.pd-main { background: #fff; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1;
           display: grid; place-items: center; border: 1px solid var(--line); }
.pd-main img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pd-thumbs { display: flex; gap: .55rem; margin-top: .7rem; }
.pd-thumb { width: 66px; height: 66px; border-radius: var(--radius-sm); overflow: hidden;
            background: #fff; border: 1px solid var(--line); cursor: pointer; padding: 0;
            transition: border-color .22s var(--ease); }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pd-thumb[aria-pressed="true"] { border-color: var(--amber); }

.pd-brand { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .24em;
            text-transform: uppercase; color: var(--amber); margin-bottom: .8rem; display: block; }
.pd h1 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); margin-bottom: 1rem; }
.pd-price { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 600; color: var(--bone);
            margin-bottom: .4rem; font-variant-numeric: tabular-nums; }
.pd-stock { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em;
            text-transform: uppercase; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .45rem; }
.pd-stock.in { color: var(--wa); }
.pd-stock.out { color: #ff9c9c; }
.pd-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pd-desc { margin-bottom: 1.6rem; }
.pd-desc p { font-size: .93rem; margin-bottom: .8rem; }

.opt-group { margin-bottom: 1.4rem; }
.opt-group h4, .opt-group .opt-h {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .65rem;
}
.opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.opt {
  padding: .52rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); font-size: .82rem; color: var(--muted); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.opt:hover { border-color: var(--line-2); color: var(--bone); }
.opt[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line);
       border-radius: var(--radius-sm); overflow: hidden; }
.qty button { width: 38px; height: 42px; display: grid; place-items: center; color: var(--muted);
              transition: background .18s var(--ease), color .18s var(--ease); }
.qty button:hover { background: rgba(238,241,245,.06); color: var(--bone); }
.qty input { width: 42px; height: 42px; text-align: center; background: none; border: 0;
             font-family: var(--font-mono); font-size: .9rem; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.trust { display: flex; flex-direction: column; gap: .1rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.trust li { display: flex; gap: .7rem; align-items: center; padding: .5rem 0; font-size: .85rem; color: var(--muted); list-style: none; }
.trust svg { width: 15px; height: 15px; color: var(--amber); flex: none; }

.spec { width: 100%; border-collapse: collapse; margin-top: 1.4rem; }
.spec th, .spec td { text-align: left; padding: .68rem .2rem; border-bottom: 1px solid var(--line); font-size: .86rem; }
.spec th { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
           color: var(--faint); font-weight: 500; width: 40%; }
.spec td { color: var(--muted); }

/* ============================================================================
   CART DRAWER
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: 950; background: rgba(5,6,7,.72);
         backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 960; width: min(420px, 100vw);
  background: var(--coal); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s var(--ease);
}
.drawer.open { transform: translateX(0); }
.drawer-hd { display: flex; align-items: center; justify-content: space-between;
             padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--line); flex: none; }
.drawer-hd h2 { font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm);
            color: var(--muted); transition: color .2s var(--ease), background .2s var(--ease); }
.icon-btn:hover { color: var(--bone); background: rgba(238,241,245,.06); }
.icon-btn svg { width: 17px; height: 17px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.35rem; }
.drawer-ft { flex: none; padding: 1.25rem 1.35rem; border-top: 1px solid var(--line); background: var(--card); }

.citem { display: grid; grid-template-columns: 62px 1fr auto; gap: .9rem; align-items: start;
         padding: .95rem 0; border-bottom: 1px solid var(--line); }
.citem:last-child { border-bottom: 0; }
.citem-img { width: 62px; height: 62px; border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.citem-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.citem h4 { font-size: .84rem; line-height: 1.3; margin-bottom: .2rem; }
.citem .var { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: var(--faint); }
.citem .ln { font-family: var(--font-mono); font-size: .82rem; color: var(--amber); font-variant-numeric: tabular-nums; }
.citem-ctl { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; }
.citem-ctl button { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line);
                    border-radius: 5px; font-size: .8rem; color: var(--muted); line-height: 1; }
.citem-ctl button:hover { border-color: var(--line-2); color: var(--amber); }
.citem-ctl span { font-family: var(--font-mono); font-size: .78rem; min-width: 18px; text-align: center; }
.citem .rm { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--faint);
             text-transform: uppercase; margin-left: .4rem; }
.citem .rm:hover { color: #ff9c9c; }

.totals { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; }
.totals div { display: flex; justify-content: space-between; font-size: .86rem; color: var(--muted); }
.totals .grand { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
                 color: var(--bone); letter-spacing: -0.02em; padding-top: .6rem; border-top: 1px solid var(--line); }
.totals .grand span:last-child { color: var(--amber); font-family: var(--font-mono); font-size: 1.15rem; }

/* ============================================================================
   FORMS
   ========================================================================== */
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
               letter-spacing: .22em; text-transform: uppercase; color: var(--faint); margin-bottom: .45rem; }
.field .req { color: var(--amber); }
.field input, .field textarea, .field select {
  width: 100%; padding: .82rem .95rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .92rem; color: var(--bone);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(238,241,245,.18); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--amber); background: var(--card-2);
  box-shadow: 0 0 0 3px var(--amber-soft);
}
.field textarea { resize: vertical; min-height: 128px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(238,241,245,.52); } /* 4.5:1 on --card */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .78rem; color: var(--faint); margin-top: .9rem; }

/* ============================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.cinfo { display: flex; flex-direction: column; gap: .1rem; }
.cline {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 0; border-bottom: 1px solid var(--line);
}
.cline:last-of-type { border-bottom: 0; }
.cline-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center;
            background: var(--amber-soft); border: 1px solid var(--line-2); color: var(--amber); }
.cline-ic svg { width: 17px; height: 17px; }
.cline h3, .cline h4 { font-family: var(--font-mono); font-size: .58rem; font-weight: 500; letter-spacing: .24em;
            text-transform: uppercase; color: var(--faint); margin-bottom: .28rem; }
.cline a, .cline p { font-size: 1rem; color: var(--bone); font-weight: 500; }
.cline a:hover { color: var(--amber); }
.cline small { display: block; font-size: .78rem; color: var(--faint); margin-top: .18rem; font-weight: 400; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-top: 1.6rem; }
.map iframe { width: 100%; height: 300px; border: 0; display: block; filter: grayscale(1) invert(.92) contrast(.86); }

/* ============================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem .2rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.015em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--amber); }
.faq summary .ic { width: 16px; height: 16px; flex: none; color: var(--amber); transition: transform .3s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .ans { padding: 0 .2rem 1.35rem; }
.faq .ans p { font-size: .92rem; max-width: 72ch; }

/* ============================================================================
   EDITORIAL ARTICLE LIST — no per-article photography exists on the client's
   site, so the interest has to come from type, numbering and rhythm rather
   than from a picture that would have to be invented.
   ========================================================================== */
.afeat {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--card); margin-bottom: 2.4rem; position: relative;
  transition: border-color .35s var(--ease);
}
.afeat:hover { border-color: var(--line-2); }
.afeat-body { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
.afeat-body h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.14; margin-bottom: .9rem; }
.afeat-body h3 a::after { content: ''; position: absolute; inset: 0; }
.afeat-body p { font-size: .95rem; margin-bottom: 1.4rem; max-width: 48ch; }
.afeat-media { position: relative; overflow: hidden; min-height: 280px; }
.afeat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.afeat:hover .afeat-media img { transform: scale(1.05); }
.afeat-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, var(--card) 0%, rgba(21,24,28,.35) 34%, transparent 70%);
}
.tag {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--line-2); background: var(--amber-soft);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem;
}

.alist { border-top: 1px solid var(--line); }
.arow {
  position: relative; display: grid; grid-template-columns: 46px 1fr auto;
  gap: clamp(1rem, 2.5vw, 2.2rem); align-items: start;
  padding: clamp(1.25rem, 2.4vw, 1.85rem) .9rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.arow::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--amber); transform: scaleY(0); transform-origin: center;
  transition: transform .35s var(--ease);
}
.arow:hover { background: linear-gradient(90deg, rgba(255,122,24,.07), transparent 62%); }
.arow:hover::before { transform: scaleY(1); }
.arow-n {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
  color: var(--amber); padding-top: .35rem;
}
.arow h3 { font-size: clamp(1.02rem, 1.7vw, 1.32rem); line-height: 1.24; margin-bottom: .4rem; }
.arow h3 a::after { content: ''; position: absolute; inset: 0; }
.arow p { font-size: .88rem; max-width: 64ch; }
.arow-meta { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; padding-top: .3rem; }
.arow time, .afeat time {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
}
.arow-meta .arrow svg { transition: transform .35s var(--ease); }
.arow:hover .arrow svg { transform: translateX(5px); }

/* ============================================================================
   ARTICLE / NEWS
   ========================================================================== */
.acard { display: flex; flex-direction: column; }
.acard-body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.acard time { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
              text-transform: uppercase; color: var(--faint); margin-bottom: .7rem; display: block; }
.acard h3 { font-size: 1rem; line-height: 1.3; margin-bottom: .6rem; }
.acard p { font-size: .87rem; flex: 1; margin-bottom: 1.1rem; }
.acard h3 a::after { content: ''; position: absolute; inset: 0; }
.prose p { font-size: 1rem; line-height: 1.75; margin-bottom: 1.2rem; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 2.4rem 0 1rem; }
.prose h3 { margin: 2rem 0 .8rem; }
.prose ul, .prose ol { margin: 0 0 1.3rem 1.2rem; }
.prose li { color: var(--muted); margin-bottom: .5rem; line-height: 1.7; }
.prose strong { color: var(--bone); }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   CTA BAND
   ========================================================================== */
.band { position: relative; overflow: hidden; background: var(--coal); }
.band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(1000px 380px at 50% 118%, rgba(255,122,24,.16), transparent 68%);
}
.band .wrap { position: relative; z-index: 2; text-align: center; }
.band h2 { margin-bottom: 1rem; }
.band p { margin-inline: auto; margin-bottom: 2rem; }
.band .btn-row { justify-content: center; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.ftr { background: var(--coal); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) 0 1.8rem; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.4rem; margin-bottom: 3rem; }
.ftr h5, .ftr .ftr-h {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .26em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 1.1rem;
}
.ftr ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.ftr a { font-size: .88rem; color: var(--muted); transition: color .2s var(--ease);
         display: inline-flex; align-items: center; min-height: 24px; }
.ftr a:hover { color: var(--amber); }
.ftr-brand img { height: 34px; margin-bottom: 1rem; }
.ftr-brand p { font-size: .87rem; max-width: 34ch; margin-bottom: 1.3rem; }
.socials { display: flex; gap: .55rem; }
.socials a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px;
             border: 1px solid var(--line); color: var(--muted);
             transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); }
.socials a:hover { border-color: var(--line-2); color: var(--amber); background: var(--amber-soft); }
.socials svg { width: 16px; height: 16px; }
.ftr-btm { display: flex; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
           padding-top: 1.6rem; border-top: 1px solid var(--line); }
.ftr-btm p, .ftr-btm a { font-size: .76rem; color: var(--faint); }
.ftr-legal { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.ftr-cn a { color: var(--muted); }
.ftr-cn a:hover { color: var(--amber); }

/* ============================================================================
   WHATSAPP FLOAT + STICKY MOBILE CTA
   ========================================================================== */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 880;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #04180c; box-shadow: 0 10px 30px rgba(37,211,102,.34);
  transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 26px; height: 26px; }
.sticky-cta { display: none; }

/* ============================================================================
   MOTION — reveal on scroll
   ========================================================================== */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s; } .rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; } .rv-d4 { transition-delay: .28s; }

/* ============================================================================
   BREADCRUMB / MISC
   ========================================================================== */
.crumb { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
         font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
         text-transform: uppercase; color: var(--faint); margin-bottom: 1.4rem; }
.crumb a:hover { color: var(--amber); }
.crumb svg { width: 10px; height: 10px; opacity: .5; }
.page-head { padding-top: calc(var(--head-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { margin-bottom: 1rem; }
.notice {
  display: flex; gap: .85rem; align-items: flex-start;
  border: 1px solid var(--line-2); background: var(--amber-soft);
  border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
}
.notice svg { width: 17px; height: 17px; color: var(--amber); flex: none; margin-top: 2px; }
.notice p { font-size: .85rem; color: var(--bone); margin: 0; }
.notice b { color: var(--amber); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.open { display: block; margin-bottom: 1.6rem; padding: 1.3rem;
                  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
  .mobile-filter-btn { display: inline-flex; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 900px) {
  .nav, .hdr-cta .btn { display: none; }
  .burger { display: flex; }
  .hdr .wrap { justify-content: space-between; }
  .hdr-cta { margin-left: auto; }
  /* A non-none backdrop-filter makes .hdr the containing block for its
     position:fixed children, which would trap the nav panel inside the 74px
     header. Solid background on mobile instead — no filter, no containing block. */
  .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 11, 13, .97); }
  .hdr.scrolled { background: rgba(10, 11, 13, .99); }
  .nav {
    position: fixed; inset: var(--head-h) 0 0 0; z-index: 890;
    background: var(--ink); flex-direction: column; align-items: stretch;
    padding: 1.4rem 6vw 3rem; gap: 0; overflow-y: auto;
    transform: translateX(100%); transition: transform .4s var(--ease);
  }
  body.nav-open .nav { display: flex; transform: translateX(0); }
  /* :not(.btn) so the CTA keeps its pill shape and centred label */
  .nav > a:not(.btn), .nav .has-menu > button {
    padding: 1rem .2rem; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; width: 100%;
    justify-content: space-between; border-radius: 0;
  }
  .nav > a:not(.btn):hover, .nav .has-menu > button:hover,
  .nav > a:not(.btn)[aria-current="page"] { background: none; }
  .nav > a.nav-only-cta { display: inline-flex; }
  .mega, .mega-2, .mega-3 {
    position: static; width: 100%; translate: none; transform: none; opacity: 1; visibility: visible;
    display: none; grid-template-columns: 1fr; gap: 0; box-shadow: none; border: 0;
    background: none; padding: .4rem 0 1rem; border-bottom: 1px solid var(--line);
  }
  .has-menu[data-open="true"] .mega { display: grid; }
  /* the second brand column has a blank label to keep the desktop grid level;
     stacked, that blank would read as a gap */
  .mega-3 .mega-col:last-of-type .mega-label { display: none; }
  .mega .mega-label { margin-left: .2rem; margin-top: .9rem; }
  .mega-col > a { padding-left: .2rem; padding-right: .2rem; }
  .mega-rail { margin-top: 1rem; padding-left: .2rem; padding-right: .2rem; }
  .nav .btn { display: inline-flex; margin-top: 1.5rem; }
  .pd { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .split, .contact-grid { grid-template-columns: 1fr; }
  .split.rev > *:first-child { order: 0; }
  .sticky-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 870;
    background: rgba(10,11,13,.95); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding: .7rem 4vw; gap: .6rem;
  }
  .sticky-cta .btn { flex: 1; }
  .wa-float { bottom: 76px; }
  body { padding-bottom: 66px; }
}
@media (max-width: 860px) {
  /* editorial article layout stacks: image on top, meta under the copy */
  .afeat { grid-template-columns: 1fr; }
  .afeat-media { order: -1; min-height: 0; aspect-ratio: 16/9; }
  .afeat-media::after { background: linear-gradient(to top, var(--card) 2%, rgba(21,24,28,.25) 55%, transparent); }
  .afeat-body { padding: 1.4rem 1.3rem 1.6rem; }
  .arow { grid-template-columns: 34px 1fr; gap: .9rem; }
  .arow-meta {
    grid-column: 2; flex-direction: row; align-items: center;
    justify-content: space-between; width: 100%; text-align: left; padding-top: .9rem;
  }
}

@media (max-width: 640px) {
  .hero { min-height: auto; padding-top: calc(var(--head-h) + 2.5rem); }
  .readout { grid-template-columns: repeat(3, 1fr); }
  .readout > div:nth-child(3n) { border-right: 0; }
  .readout > div { border-bottom: 1px solid var(--line); }
  .field-row { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .pcard-body { padding: .7rem .75rem .9rem; }
  .ld-read { gap: .8rem; }
}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  .ld-fill { width: 100%; }
}

@media print {
  .hdr, .wa-float, .sticky-cta, #loader, .drawer, .scrim { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================================
   MOTION — the client's own workshop and studio footage
   Poster-first, click-to-play. Nothing is fetched until somebody presses play,
   which is why the bench films can run to a minute and a half without costing
   the page anything.
   ========================================================================== */
.vfig { margin: 0; }
.vwrap {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  aspect-ratio: 16 / 9;
}
.vwrap video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.vplay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(10,11,13,.12), rgba(10,11,13,.52));
  color: var(--bone); cursor: pointer; transition: background .3s var(--ease);
}
.vplay::before {
  content: ''; position: absolute; width: 62px; height: 62px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 10px 34px rgba(255,122,24,.34);
  transition: transform .3s var(--ease);
}
.vplay svg { position: relative; width: 24px; height: 24px; color: #140801; margin-left: 3px; }
.vplay:hover { background: linear-gradient(180deg, rgba(10,11,13,.04), rgba(10,11,13,.4)); }
.vplay:hover::before { transform: scale(1.08); }
.vplay[hidden] { display: none; }
.vfig figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .75rem;
}
.vcap-t { font-family: var(--font-display); font-weight: 700; font-size: .95rem; letter-spacing: -.015em; }
.vcap-m {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); flex: none;
}

/* the bench sequence: numbered, two up */
.bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem 1.6rem; }
.bench-item { position: relative; padding-top: .3rem; }
.bench-n {
  display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .3em;
  color: var(--amber); margin-bottom: .7rem;
}
.bench-item > p { font-size: .89rem; color: var(--muted); margin-top: .55rem; max-width: 46ch; }

/* ============================================================================
   SESSION CARD — now carries the photograph of what the session involves
   ========================================================================== */
.pkg-photo { padding: 0; overflow: hidden; }
.pkg-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--card-2); }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pkg-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,13,.05) 40%, rgba(21,24,28,.92));
}
.pkg:hover .pkg-img img { transform: scale(1.05); }
.pkg-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.7rem; }
.pkg h3 a { color: inherit; }
.pkg h3 a:hover { color: var(--amber); }
.pkg-blurb { font-size: .87rem; color: var(--muted); margin-bottom: 1.1rem; }
/* on a text-only card the tag hangs off the top edge; over a photograph it sits
   inside the image, clear of the card's own top border */
.pkg-img .pkg-tag { top: auto; bottom: .8rem; right: 1.3rem; border-radius: 6px; z-index: 2; }

.price-list td:first-child { color: var(--muted); }
.price-list tbody tr:hover td { color: var(--bone); }

/* ============================================================================
   THE PREMISES — asymmetric mosaic of the client's own shop photography
   ========================================================================== */
.gal {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(128px, 14vw, 196px); gap: .7rem;
}
.gal-i {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--card);
}
.gal-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal-i:hover img { transform: scale(1.045); }
.gal-i::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10,11,13,.86), rgba(10,11,13,0) 46%);
}
.gal-i figcaption {
  position: absolute; left: .95rem; right: .95rem; bottom: .8rem; z-index: 2;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(238,241,245,.82);
}
.gal-a { grid-column: span 2; grid-row: span 2; }
.gal-b { grid-column: span 2; }
.gal-c, .gal-d { grid-column: span 1; }
.gal-e, .gal-f { grid-column: span 2; }

@media (max-width: 760px) {
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 30vw, 170px); }
  .gal-a { grid-column: span 2; grid-row: span 2; }
  .gal-b, .gal-e, .gal-f { grid-column: span 2; }
}

/* The arrival strip on the contact page reuses the mosaic tile in a plain equal
   grid. All three photographs are of signage with their lettering along the
   bottom edge, so the caption and its scrim sit at the top here — at the bottom
   they landed on top of "Golf Concepts" and "Danie's World". */
.gal-i.arrive { aspect-ratio: 4 / 3; }
.arrive figcaption { top: .8rem; bottom: auto; }
.arrive::after { background: linear-gradient(to bottom, rgba(10,11,13,.86), rgba(10,11,13,0) 44%); }
/* a qualifier under the row label, for spec tables in a half-width column where
   an extra column would wrap to three lines */
.spec td small { display: block; margin-top: .15rem; font-size: .74rem; color: var(--faint); }

/* The mat tile is the one photograph whose own lettering sits along the bottom,
   so at the narrower mobile aspect the caption landed straight on top of
   "Danie's World". Caption and scrim flip to the top for that tile only. */
.gal-d figcaption { top: .8rem; bottom: auto; }
.gal-d::after { background: linear-gradient(to bottom, rgba(10,11,13,.86), rgba(10,11,13,0) 46%); }
/* the in-store-only brand tiles have no product shot of their own, so the shop
   photograph sits behind the wordmark rather than competing with it */
.bcard-img > img.bcard-fade { opacity: .42; }

/* The play button's border box IS the wrapper's padding box, and .vwrap clips
   with overflow:hidden — so the global 3px-offset focus ring was drawn entirely
   outside the clip and never painted. Draw it inside instead. Outline, not
   box-shadow, so it survives forced-colors mode. */
.vplay:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -6px;
  border-radius: var(--radius);
}