/* =========================================================
   PM GOLF — Ennis, Co. Clare
   Premium golf apparel & custom club fitting
   ========================================================= */

@font-face{
  font-family:'InterVar';
  src:url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --paper:#ffffff;
  --stone:#f2f1ed;
  --stone-2:#e9e7e1;
  --ink:#0c0d0c;
  --ink-2:#5c5f5c;
  --ink-3:#8d908c;
  --charcoal:#16181b;
  --charcoal-2:#22262a;
  --line:rgba(12,13,12,.12);
  --line-soft:rgba(12,13,12,.07);
  --line-light:rgba(255,255,255,.18);
  --green:#2c4b3a;

  --wrap:1400px;
  --gut:clamp(20px,4vw,56px);
  --sec:clamp(72px,9vw,140px);

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'InterVar',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
/* author `display` rules (.pill, .steps, .form-nav) outrank the UA sheet's
   [hidden]{display:none}, so state it explicitly */
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.02em; line-height:1.02}
p{margin:0}
ul,ol,dl{margin:0; padding:0; list-style:none}
::selection{background:var(--ink); color:var(--paper)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;transition:top .2s}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.hero :focus-visible,.section-journal :focus-visible,.site-footer :focus-visible{outline-color:#fff}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.section{padding:var(--sec) 0}

/* ---------- type primitives ---------- */
.display{
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:-.028em;
  font-size:clamp(2rem,5.2vw,4.6rem);
  line-height:.98;
}
.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:11px;
  font-weight:500; color:var(--ink-2); margin-bottom:18px;
}
.eyebrow.light{color:rgba(255,255,255,.72)}
.section-lede{
  max-width:46ch; color:var(--ink-2); font-size:clamp(15px,1.15vw,17px);
  margin-top:22px; line-height:1.6;
}
.section-head{margin-bottom:clamp(40px,5vw,72px)}

.text-link{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); position:relative; display:inline-block; padding-bottom:2px;
}
.text-link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
a:hover .text-link::after,.text-link:hover::after{transform:scaleX(1); transform-origin:left}
.text-link.light{color:rgba(255,255,255,.8)}

/* ---------- pills ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 30px; border-radius:100px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
  white-space:nowrap;
}
.pill:active{transform:scale(.975)}
.pill-light{background:#fff; color:var(--ink)}
.pill-light:hover{background:var(--ink); color:#fff}
.pill-dark{background:var(--ink); color:#fff}
.pill-dark:hover{background:var(--green)}
.pill-outline{border:1px solid var(--line); color:var(--ink)}
.pill-outline:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.pill-ghost{color:var(--ink-2)}
.pill-ghost:hover{color:var(--ink)}
.pill-light-sm{height:40px; padding:0 20px; font-size:11px; background:#fff; color:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.12)}
.pill-light-sm:hover{background:var(--ink); color:#fff}

/* =========================================================
   1. HEADER
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  color:#fff; transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);
}
.header-inner{
  max-width:1720px; margin:0 auto; padding:0 clamp(16px,2.4vw,32px);
  height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.site-header.is-solid{background:var(--paper); color:var(--ink); box-shadow:0 1px 0 var(--line-soft)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header{transform:translateY(0); transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}

.header-left,.header-right{display:flex; align-items:center; gap:clamp(14px,1.8vw,28px)}
.header-right{justify-content:flex-end}
.nav-primary{display:flex; gap:clamp(14px,1.8vw,28px)}
.nav-primary a,.header-right a{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  opacity:.9; transition:opacity .3s
}
.nav-primary a:hover,.header-right a:hover{opacity:.55}

.burger{width:22px; height:14px; position:relative; display:flex; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:1.5px; width:100%; background:currentColor; transition:transform .35s var(--ease),opacity .3s}

.brand{display:flex; align-items:center}
.logo{height:26px; width:auto}
.logo text{font-family:Arial,Helvetica,sans-serif; text-anchor:start}
/* Avenir LT Pro isn't a web font — Macs get Avenir Next, everyone else the
   self-hosted Inter, which is the closest face already on the page */
.logo .pm{font-family:'Avenir LT Pro','Avenir Next',Avenir,'InterVar',Arial,sans-serif}
/* monochrome: inheriting currentColor means the header's own white-over-hero to
   ink-on-solid colour transition animates the logo too, with no second rule */
.logo .pm,.logo .golf,.logo .accent{fill:currentColor}

.icon-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round}

/* off-canvas */
.nav-panel{
  position:fixed; top:0; right:0; z-index:110; height:100dvh; width:min(420px,88vw);
  background:var(--paper); color:var(--ink); padding:clamp(28px,5vw,56px);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  transform:translateX(100%); visibility:hidden;
  transition:transform .55s var(--ease), visibility 0s linear .55s;
}
.nav-panel.is-open{transform:translateX(0); visibility:visible; transition:transform .55s var(--ease), visibility 0s linear 0s}
.nav-panel nav{display:flex; flex-direction:column; gap:6px}
.nav-panel nav a{
  font-size:clamp(22px,3.4vw,32px); text-transform:uppercase; letter-spacing:-.02em;
  font-weight:500; padding:6px 0; transition:color .3s, padding-left .4s var(--ease);
}
.nav-panel nav a:hover{color:var(--green); padding-left:10px}
.nav-close{position:absolute; top:26px; right:26px; width:34px; height:34px}
.nav-close svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; margin:0 auto}
.nav-panel-foot{display:flex; gap:36px; font-size:13px; color:var(--ink-2); line-height:1.7}
.nav-panel-foot a:hover{color:var(--ink)}
.nav-scrim{
  position:fixed; inset:0; z-index:105; background:rgba(12,13,12,.4);
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.nav-scrim.is-open{opacity:1; pointer-events:auto}

/* =========================================================
   2. HERO
   ========================================================= */
.hero{
  position:relative; height:100svh; min-height:600px; color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:#0d1210;
}
.hero-media{position:absolute; inset:0}
.hero-video{width:100%; height:100%; object-fit:cover}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right,rgba(6,10,9,.5) 0%,rgba(6,10,9,.12) 42%,rgba(6,10,9,0) 70%),
    linear-gradient(to top,rgba(6,10,9,.78) 0%,rgba(6,10,9,.34) 34%,rgba(6,10,9,.05) 62%,rgba(6,10,9,.36) 100%);
}
.hero-content{
  position:relative; z-index:2; width:100%; max-width:var(--wrap); margin:0 auto;
  padding:0 var(--gut) clamp(26px,3.4vw,44px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.hero-copy{max-width:min(760px,72%)}
.hero h1{font-size:clamp(2.6rem,7.6vw,7.2rem); text-transform:uppercase; letter-spacing:-.035em; line-height:.94; font-weight:500}
.hero-sub{margin-top:22px; max-width:44ch; font-size:clamp(14px,1.1vw,16px); color:rgba(255,255,255,.82)}
.hero-cta{display:flex; align-items:center; gap:22px; padding-bottom:6px}

.hero-ticker{
  position:relative; z-index:2; border-top:1px solid var(--line-light);
  margin:0 auto; width:100%; max-width:var(--wrap);
  padding:14px var(--gut); display:flex; align-items:center; gap:16px; overflow:hidden;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero-ticker .dot{width:6px;height:6px;border-radius:50%;background:#8fd3a5;flex:none;animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.ticker-static{flex:none; color:#fff}
.marquee{flex:1; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.marquee-track{display:flex; gap:26px; white-space:nowrap; will-change:transform}

/* =========================================================
   3. COLLECTION
   ========================================================= */
.section-collection{background:var(--paper)}
.rail-head{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.rail-head.simple{border-bottom:0; padding-bottom:0; margin-bottom:22px}
.rail-title{font-size:clamp(13px,1vw,14px); text-transform:uppercase; letter-spacing:.14em; font-weight:500}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  height:34px; padding:0 16px; border-radius:100px; border:1px solid var(--line);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff}

.rail-arrows{display:flex; gap:8px}
.arrow{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; transition:all .3s var(--ease);
}
.arrow svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.arrow:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.arrow[disabled]{opacity:.28; pointer-events:none}
.rail-arrows.dark .arrow{border-color:var(--line-light); color:#fff}
.rail-arrows.dark .arrow:hover{background:#fff; color:var(--ink); border-color:#fff}

.rail{
  display:flex; gap:clamp(10px,1.2vw,18px); overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; padding-bottom:8px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
/* scroll-snap aligns to the snapport, which ignores padding unless
   scroll-padding matches — without this the rail rests scrolled past its gutter */
.rail-wide{padding-left:var(--gut); padding-right:var(--gut); scroll-padding-left:var(--gut)}
@media(min-width:1500px){
  .rail-wide{
    padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
    scroll-padding-left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));
  }
}

.product-card{flex:0 0 clamp(220px,23vw,300px); scroll-snap-align:start}
.product-media{
  display:block; position:relative; background:var(--stone); overflow:hidden;
  aspect-ratio:4/5; margin-bottom:14px;
}
.product-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.product-card:hover .product-media img{transform:scale(1.045)}
.quick{
  position:absolute; left:12px; right:12px; bottom:12px; height:40px; border-radius:100px;
  background:rgba(255,255,255,.94); color:var(--ink);
  display:grid; place-items:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:all .4s var(--ease);
}
.product-card:hover .quick{opacity:1; transform:none}
.product-card h3{font-size:13px; font-weight:400; letter-spacing:0; line-height:1.3}
.price{font-size:13px; color:var(--ink-2); margin-top:4px}
.swatches{display:flex; gap:6px; margin-top:10px}
.swatches i{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1px var(--line) inset}
.product-card.is-dim{opacity:.26; filter:grayscale(1); transition:opacity .45s var(--ease),filter .45s var(--ease)}

/* =========================================================
   4. FITTING / BEFORE-AFTER
   ========================================================= */
.section-fitting{background:var(--stone)}
.fitting-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,64px); align-items:start}

.ba-frame{
  position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--stone-2);
  cursor:ew-resize; user-select:none; touch-action:pan-y;
}
.ba-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* clip-path (not width) so the "after" frame keeps identical geometry to the "before" */
.ba-after-clip{position:absolute; inset:0; clip-path:inset(0 50% 0 0); will-change:clip-path}
.ba-tag{
  position:absolute; top:16px; z-index:3; background:rgba(255,255,255,.92); color:var(--ink);
  padding:7px 13px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; border-radius:100px;
}
.ba-tag-l{left:16px}
.ba-tag-r{right:16px}
.ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:4; transform:translateX(-1px)}
.ba-line{position:absolute; inset:0; background:rgba(255,255,255,.92); box-shadow:0 0 18px rgba(0,0,0,.28)}
.ba-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:#fff; display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.24);
}
.ba-grip svg{width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.ba-caption{margin-top:14px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* the supplied driver clip is 9:16 — give it a portrait frame and sit the
   metrics alongside so the column keeps a sane height */
.fit-top{display:grid; grid-template-columns:minmax(150px,.72fr) 1fr; gap:clamp(12px,1.4vw,20px); align-items:stretch}
.fit-video{position:relative; aspect-ratio:9/16; overflow:hidden; background:#0f1112}
.fit-video video{width:100%; height:100%; object-fit:cover; object-position:50% 50%}
.fit-badge{
  position:absolute; left:10px; bottom:10px; display:flex; align-items:center; gap:7px;
  background:rgba(12,13,12,.6); backdrop-filter:blur(6px); color:#fff;
  padding:7px 12px; border-radius:100px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
}
.fit-badge i{width:6px; height:6px; border-radius:50%; background:#8fd3a5; animation:pulse 2.2s infinite}

.metrics{
  display:grid; grid-template-columns:1fr; grid-template-rows:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.metric{background:var(--stone); padding:14px 18px; display:flex; flex-direction:column; justify-content:center}
.metric dt{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.metric dd{margin:0; display:flex; align-items:baseline; gap:8px; font-size:clamp(13px,1.1vw,15px)}
.metric .was{color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:1px}
.metric .arw{color:var(--ink-3); font-size:11px}
.metric .now{font-weight:600; color:var(--green)}
.metrics-note{font-size:11.5px; color:var(--ink-3); margin-top:12px; line-height:1.5}

.fit-benefits{margin:26px 0 30px; display:grid; gap:14px}
.fit-benefits li{
  font-size:14px; color:var(--ink-2); padding-left:20px; position:relative; line-height:1.55;
}
.fit-benefits li::before{
  content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--ink);
}
.fit-benefits strong{color:var(--ink); font-weight:500}

/* =========================================================
   5. CATEGORIES
   ========================================================= */
.section-categories{background:var(--paper); padding-bottom:calc(var(--sec) * .8)}
.cat-card{flex:0 0 clamp(240px,27vw,360px); scroll-snap-align:start}
.cat-media{aspect-ratio:4/5; overflow:hidden; background:var(--stone); margin-bottom:14px}
.cat-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.cat-card:hover .cat-media img{transform:scale(1.05)}
.cat-card h3{font-size:14px; font-weight:400; margin-bottom:4px}

/* =========================================================
   6. REVIEWS
   ========================================================= */
.section-reviews{background:var(--stone)}
.review-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,22px)}
.review{
  margin:0; background:var(--paper); padding:clamp(20px,2vw,30px);
  display:flex; flex-direction:column; gap:16px; min-height:100%;
}
.stars{color:var(--green); font-size:13px; letter-spacing:.22em}
.review blockquote{margin:0; font-size:clamp(14px,1.05vw,16px); line-height:1.55; flex:1}
.review figcaption{display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line-soft)}
.review figcaption img{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none}
.review figcaption span{display:flex; flex-direction:column; font-size:12px; color:var(--ink-3); line-height:1.5}
.review figcaption strong{font-weight:500; color:var(--ink); font-size:13px}

/* =========================================================
   7. TEAM
   ========================================================= */
.section-team{background:var(--paper)}
.founder{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4.5vw,80px); align-items:start}
.founder-portrait{aspect-ratio:4/5; overflow:hidden; background:var(--stone)}
.founder-portrait img{width:100%; height:100%; object-fit:cover; filter:saturate(.92)}
.role{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:20px}
.founder-lead{font-size:clamp(17px,1.5vw,22px); line-height:1.45; letter-spacing:-.015em; margin-bottom:18px}
.bio{font-size:14.5px; color:var(--ink-2); line-height:1.7}

.creds{margin:30px 0; display:grid; gap:12px; border-top:1px solid var(--line-soft); padding-top:26px}
.creds li{font-size:14px; color:var(--ink-2); padding-left:20px; position:relative; line-height:1.55}
.creds li::before{content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; border:1px solid var(--ink)}
.creds strong{color:var(--ink); font-weight:500}

.founder-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-bottom:30px;
}
.founder-stats div{background:var(--paper); padding:16px 18px}
.founder-stats dt{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.founder-stats dd{margin:0; font-size:clamp(22px,2.4vw,32px); font-weight:500; letter-spacing:-.03em; line-height:1}

.founder-atwork{
  margin:clamp(44px,5.5vw,84px) 0 0; display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,64px); align-items:center;
}
.founder-atwork blockquote{margin:0}
.founder-atwork blockquote p{
  font-size:clamp(19px,2.1vw,30px); line-height:1.3; letter-spacing:-.02em; text-wrap:balance;
}
.founder-atwork cite{
  display:block; margin-top:20px; font-style:normal;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.atwork-media{aspect-ratio:3/2; overflow:hidden; background:var(--stone)}
.atwork-media img{width:100%; height:100%; object-fit:cover}

/* =========================================================
   8. JOURNAL
   ========================================================= */
.section-journal{background:var(--charcoal); color:#fff; padding-bottom:calc(var(--sec) * .85)}
.section-journal .rail-title{color:#fff}
.post{flex:0 0 clamp(250px,28vw,380px); scroll-snap-align:start}
.post-media{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--charcoal-2); margin-bottom:14px}
.post-media img,.post-media video{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.post:hover .post-media img{transform:scale(1.05)}
.post h3{font-size:clamp(14px,1.15vw,17px); font-weight:400; line-height:1.3; margin-bottom:8px}
.section-journal .text-link{color:rgba(255,255,255,.62)}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85);
  display:grid; place-items:center; backdrop-filter:blur(2px); background:rgba(255,255,255,.08);
  transition:background .4s var(--ease),transform .4s var(--ease); z-index:2;
}
.play-btn svg{width:22px; height:22px; fill:#fff; margin-left:3px}
.play-btn:hover{background:rgba(255,255,255,.95); transform:translate(-50%,-50%) scale(1.06)}
.play-btn:hover svg{fill:var(--ink)}
.post-video.is-playing .play-btn{opacity:0; pointer-events:none}
.post-flag{
  position:absolute; left:12px; top:12px; z-index:2; background:rgba(12,13,12,.55);
  backdrop-filter:blur(6px); padding:7px 12px; border-radius:100px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}

/* =========================================================
   9. BOOKING
   ========================================================= */
.section-booking{background:var(--stone)}
.booking-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,90px); align-items:start}
.booking-facts{margin-top:36px; display:grid; gap:16px}
.booking-facts li{display:flex; gap:14px; font-size:14px; color:var(--ink-2); align-items:baseline}
.booking-facts span{font-size:10px; letter-spacing:.14em; color:var(--ink-3); flex:none; padding-top:2px}

.booking-form{background:var(--paper); padding:clamp(24px,3vw,44px); position:relative}
.steps{display:flex; gap:6px; margin-bottom:16px}
.step{height:2px; flex:1; background:var(--line); transition:background .45s var(--ease)}
.step.is-active{background:var(--ink)}
.step-count{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:26px}

.pane{border:0; margin:0; padding:0; display:none}
.pane.is-active{display:block; animation:paneIn .45s var(--ease)}
@keyframes paneIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.option-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.time-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px}
.option{position:relative; display:block; cursor:pointer}
.option input{position:absolute; opacity:0; inset:0; cursor:pointer}
.option span{
  display:flex; flex-direction:column; gap:4px; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r); padding:18px;
  font-size:14px; transition:all .3s var(--ease); min-height:76px;
}
.option small{font-size:11px; color:var(--ink-3); letter-spacing:.06em}
.option.small span{min-height:0; padding:14px 10px; align-items:center; font-size:13px}
.option:hover span{border-color:var(--ink-3)}
.option input:checked + span{border-color:var(--ink); background:var(--ink); color:#fff}
.option input:checked + span small{color:rgba(255,255,255,.65)}
.option input:focus-visible + span{outline:2px solid var(--ink); outline-offset:3px}

.field{display:block; margin-bottom:16px}
.field span{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.field em{font-style:normal; text-transform:none; letter-spacing:0}
.field input{
  width:100%; height:52px; padding:0 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper); font-size:15px; font-family:inherit; color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field input:focus{outline:none; border-color:var(--ink)}
.field input:invalid:not(:placeholder-shown){border-color:#b4453a}

.form-error{margin-top:16px; font-size:13px; color:#b4453a}
.form-nav{display:flex; gap:10px; align-items:center; margin-top:28px}
#nextBtn,#submitBtn{flex:1}
.form-done{text-align:center; padding:20px 0}
.form-done h3{font-size:clamp(20px,2vw,26px); margin-bottom:12px}
.form-done p{color:var(--ink-2); font-size:14px}
.form-done .small{font-size:12px; color:var(--ink-3); margin-top:14px}

/* =========================================================
   10. VISIT
   ========================================================= */
.section-visit{background:var(--paper)}
.visit-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,3vw,48px); align-items:start}
/* 4:3 matches the map viewBox exactly, so nothing is letterboxed or cropped */
.map-card{position:relative; background:var(--stone); overflow:hidden; aspect-ratio:4/3}
.map{width:100%; height:100%; display:block}
.map-sea{fill:#dfe3e2}
.map-land{fill:#f5f4f0}
.map-coast{fill:none; stroke:rgba(12,13,12,.22); stroke-width:1.2}
.map-road{fill:none; stroke:rgba(12,13,12,.18); stroke-width:2; stroke-linecap:round}
.map-road.thin{stroke-width:1.2; stroke-dasharray:5 6}
.map-label{font-size:10px; letter-spacing:.18em; fill:#7d8a88; font-family:inherit}
.map-place{font-size:11px; letter-spacing:.14em; fill:var(--ink); font-family:inherit; font-weight:500}
.map-place.dim{fill:var(--ink-3); font-weight:400}
.map-place.here{font-size:12px; letter-spacing:.16em; font-weight:600}
.pin-body{fill:var(--ink)}
.pin-dot{fill:#fff}
.pin-pulse{fill:rgba(44,75,58,.28); animation:ping 2.8s infinite}
@keyframes ping{0%{r:8; opacity:.7}70%{r:34; opacity:0}100%{r:34; opacity:0}}
.map-open{position:absolute; right:18px; bottom:18px}

.visit-info{display:flex; flex-direction:column; gap:26px}
.showroom-shot{aspect-ratio:3/2; overflow:hidden; background:var(--stone)}
.showroom-shot img{width:100%; height:100%; object-fit:cover}
.info-block h3{font-size:18px; margin-bottom:10px}
.info-block h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px}
.addr,.contact{font-size:14px; color:var(--ink-2); line-height:1.75}
.contact{margin-top:12px}
.contact a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.hours{display:grid; gap:8px}
.hours li{display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--ink-2); padding-bottom:8px; border-bottom:1px solid var(--line-soft)}
.hours li span:last-child{color:var(--ink)}

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer{background:var(--charcoal); color:#fff; padding:clamp(56px,7vw,96px) 0 32px}
.press{padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line-light); text-align:center}
.press .eyebrow{margin-bottom:30px}
.press-row{display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,4vw,60px); flex-wrap:wrap}
.press-logo{
  color:rgba(255,255,255,.72); opacity:.9; transition:opacity .4s, color .4s;
  font-size:clamp(18px,2.6vw,34px); line-height:1; white-space:nowrap;
}
.press-logo:hover{color:#fff; opacity:1}
.press-logo.serif{font-family:Georgia,'Times New Roman',serif; font-weight:700}
.press-logo.serif.thin{font-weight:400; letter-spacing:.01em}
.press-logo.serif.wide{letter-spacing:.02em; font-weight:400}
.press-logo.grot{font-weight:800; letter-spacing:-.03em}

.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:clamp(20px,3vw,48px);
  padding:clamp(44px,5vw,70px) 0;
}
.logo-stacked{width:clamp(104px,11vw,136px); height:auto}
.logo-stacked text{font-family:Arial,Helvetica,sans-serif; text-anchor:start}
/* all-white knockout on the charcoal band */
.logo-stacked .pm{
  font-family:'Avenir LT Pro','Avenir Next',Avenir,'InterVar',Arial,sans-serif;
  font-size:303.1px; font-weight:500;
}
.logo-stacked .golf{font-size:232.2px; font-weight:700}
.logo-stacked .pm,.logo-stacked .golf,.logo-stacked .accent{fill:#fff}
.footer-brand p{margin-top:16px; font-size:13px; color:rgba(255,255,255,.6); line-height:1.7}
.footer-col{display:flex; flex-direction:column; gap:10px}
.footer-col h4{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:6px; font-weight:500}
.footer-col a{font-size:13px; color:rgba(255,255,255,.78); transition:color .3s}
.footer-col a:hover{color:#fff}
.socials{display:flex; gap:12px}
.socials a{width:36px; height:36px; border:1px solid var(--line-light); border-radius:50%; display:grid; place-items:center; transition:all .3s var(--ease)}
.socials svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.3}
.socials svg .fill{fill:currentColor; stroke:none}
.socials a:hover{background:#fff; color:var(--ink); border-color:#fff}
.footer-base{
  padding-top:26px; border-top:1px solid var(--line-light);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11.5px; color:rgba(255,255,255,.48);
}
.footer-base a:hover{color:#fff}
.credit a{color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.35)}
.credit a:hover{color:#fff; text-decoration-color:#fff}

/* =========================================================
   REVEALS
   ========================================================= */
.reveal{opacity:0; transform:translateY(26px)}
.no-motion .reveal,.is-revealed{opacity:1; transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1180px){
  .review-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1080px){
  .nav-primary{display:none}
  .header-inner{grid-template-columns:auto 1fr auto}
  .brand{justify-self:center}
  .header-right a{display:none}
  .header-right a:last-of-type{display:inline}
}
@media(max-width:900px){
  .fitting-grid{grid-template-columns:1fr}
  .booking-grid{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr; gap:30px}
  .founder-portrait{aspect-ratio:3/2}
  .founder-atwork{grid-template-columns:1fr; gap:26px}
  .founder-atwork blockquote{order:2}
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px}
  .footer-brand{grid-column:1 / -1}
  .hero-copy{max-width:100%}
  .hero-content{flex-direction:column; align-items:flex-start; gap:26px}
}
@media(max-width:680px){
  .hero{height:92svh}
  .logo{height:21px}
  .hero-ticker .ticker-static{display:none}
  .review-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .option-grid{grid-template-columns:1fr}
  .time-grid{grid-template-columns:1fr 1fr}
  .fit-top{grid-template-columns:1fr; gap:22px}
  .fit-video{max-width:250px; margin-inline:auto}
  .metrics{grid-template-rows:none}
  .hero-scrim{background:linear-gradient(to top,rgba(6,10,9,.86) 0%,rgba(6,10,9,.5) 40%,rgba(6,10,9,.14) 70%,rgba(6,10,9,.42) 100%)}
  .product-card{flex-basis:64vw}
  .cat-card{flex-basis:74vw}
  .post{flex-basis:78vw}
  .founder-stats{grid-template-columns:1fr; }
  .founder-stats div{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
  .founder-stats dt{margin-bottom:0}
  .map-open{right:12px; bottom:12px; height:34px; padding:0 14px; font-size:10px}
  .press-row{justify-content:center; gap:26px}
  .footer-base{flex-direction:column; gap:8px}
}
@media(max-width:460px){
  .hero-cta{flex-direction:column; align-items:flex-start; gap:14px; width:100%}
  .hero-cta .pill{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  /* the track no longer scrolls, so the edge fade would just clip the first word */
  .marquee{mask-image:none}
  .marquee-track{transform:none !important}
}