/* ============================================================
   SUBLIME SOCCER — "Heritage Maison" design system
   Ivory paper · tobacco brown · antique gold · oxblood accent
   ============================================================ */

:root{
  --ivory:#F6F2E9;
  --ivory-2:#EFE9DC;
  --paper:#FFFDF7;
  --espresso:#241A12;
  --ink:#2E231A;
  --ink-soft:#5B4B3D;
  --ash:#8B7A69;
  --tobacco:#6E4B2A;
  --brass:#A8813C;
  --gilt:#C9A253;
  --gilt-pale:#E4D2A4;
  --oxblood:#6E2233;

  --line:rgba(36,26,18,.13);
  --line-soft:rgba(36,26,18,.07);
  --gold-line:rgba(168,129,60,.42);

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-h:74px;
  --wrap:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

body::before{
  content:'';
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--gilt-pale); color:var(--espresso); }

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

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--espresso);
  margin:0;
  line-height:1.06;
  letter-spacing:-.012em;
}
.display{ font-size:clamp(2.9rem,7.6vw,6.6rem); line-height:.98; }
.h2{ font-size:clamp(2.1rem,4.9vw,3.9rem); line-height:1.04; }
.it{ font-style:italic; }
.gold{ color:var(--brass); }
.ox{ color:var(--oxblood); }

p{ margin:0 0 1.05em; }

.lead{
  font-size:clamp(1.02rem,1.32vw,1.16rem);
  color:var(--ink-soft);
  max-width:60ch;
  font-weight:300;
}
.muted{ color:var(--ash); }

.kicker,.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-size:.63rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; color:var(--tobacco);
}
.kicker::before{ content:''; width:30px; height:1px; background:var(--brass); flex:none; }

.wrap{ width:min(100% - 44px, var(--wrap)); margin-inline:auto; position:relative; z-index:2; }
.wrap-narrow{ width:min(100% - 44px, 900px); margin-inline:auto; position:relative; z-index:2; }

section{ position:relative; }
.blk{ padding:clamp(72px,10.5vw,150px) 0; }

hr.rule{ border:0; height:1px; background:var(--line); margin:0; }

.seam{ display:block; width:100%; height:2px; overflow:visible; }
.seam line{
  stroke:var(--gold-line); stroke-width:1.4;
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.5s var(--ease);
}
.seam.in line{ stroke-dashoffset:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-size:.71rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  padding:15px 28px; border-radius:2px; cursor:pointer;
  border:1px solid transparent; transition:.45s var(--ease);
  position:relative; overflow:hidden;
}
.btn .arw{ transition:transform .45s var(--ease); display:inline-block; }
.btn:hover .arw{ transform:translateX(5px); }
.btn-fill{ background:var(--espresso); color:var(--ivory); border-color:var(--espresso); }
.btn-fill:hover{ background:var(--tobacco); border-color:var(--tobacco); }
.btn-gold{
  background:linear-gradient(100deg,var(--brass),var(--gilt) 52%,var(--brass));
  color:#fff;
}
.btn-gold:hover{ filter:brightness(1.07); }
.btn-ghost{ background:transparent; color:var(--espresso); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--tobacco); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-inline:clamp(18px,3.4vw,44px);
  padding-top:env(safe-area-inset-top);
  background:rgba(246,242,233,.82);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:height .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled{ height:60px; background:rgba(246,242,233,.95); border-bottom-color:var(--line); }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand .mark{ width:20px; height:auto; fill:var(--espresso); }
.brand .wm{ display:flex; flex-direction:column; line-height:1; }
.brand .wm b{ font-family:var(--serif); font-size:1.24rem; font-weight:500; letter-spacing:.03em; color:var(--espresso); }
.brand .wm span{ font-size:.5rem; letter-spacing:.42em; text-transform:uppercase; color:var(--brass); margin-top:3px; }

.nav-links{ display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); }
.nav-links a{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding-block:6px;
  transition:color .3s; white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .4s var(--ease);
}
.nav-links a:hover{ color:var(--espresso); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--espresso); }
.nav-links a.active::after{ width:100%; }
.nav-links a.cta{
  background:var(--espresso); color:var(--ivory);
  padding:11px 20px; border-radius:2px; letter-spacing:.16em;
}
.nav-links a.cta::after{ display:none; }
.nav-links a.cta:hover{ background:var(--tobacco); color:var(--ivory); }

.burger{
  display:none; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:0;
  position:relative; flex:none; z-index:9600;
}
.burger span{
  position:absolute; left:11px; right:11px; height:1.4px;
  background:var(--espresso); transition:.4s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:21.5px; }
.burger span:nth-child(3){ top:27px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* mobile drawer — iOS-safe */
.drawer{
  position:fixed; top:0; left:0; right:0;
  height:100vh; height:100dvh;
  z-index:9400; background:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:calc(var(--nav-h) + env(safe-area-inset-top) + 16px) 32px calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); visibility:hidden;
  transition:transform .6s var(--ease), visibility .6s;
}
body.menu-open .drawer{ transform:translateY(0); visibility:visible; }
.drawer a{
  font-family:var(--serif); font-size:clamp(1.7rem,6.4vw,2.5rem);
  color:var(--espresso); padding-block:8px;
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
body.menu-open .drawer a{ opacity:1; transform:none; }
body.menu-open .drawer a:nth-child(1){ transition-delay:.12s; }
body.menu-open .drawer a:nth-child(2){ transition-delay:.17s; }
body.menu-open .drawer a:nth-child(3){ transition-delay:.22s; }
body.menu-open .drawer a:nth-child(4){ transition-delay:.27s; }
body.menu-open .drawer a:nth-child(5){ transition-delay:.32s; }
body.menu-open .drawer a:nth-child(6){ transition-delay:.37s; }
body.menu-open .drawer a:nth-child(7){ transition-delay:.42s; }
.drawer a .n{
  font-family:var(--sans); font-size:.56rem; letter-spacing:.3em;
  color:var(--brass); margin-right:14px; vertical-align:middle;
}
.drawer .d-cta{ color:var(--brass); border-bottom:0; }

body.menu-open{ overflow:hidden; }

@media (max-width:1080px){
  .nav-links{ display:none; }
  .burger{ display:block; }
}
@media (min-width:1081px){
  .drawer{ display:none; }
}

/* ---------- reveal ---------- */
.r{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease); }
.r.in{ opacity:1; transform:none; }
.r-d1{ transition-delay:.09s; } .r-d2{ transition-delay:.18s; }
.r-d3{ transition-delay:.27s; } .r-d4{ transition-delay:.36s; }
.r-d5{ transition-delay:.45s; }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + 34px); padding-bottom:64px;
  overflow:hidden;
}
@supports (min-height:100svh){ .hero{ min-height:100svh; } }

.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 78% 32%, rgba(201,162,83,.20), transparent 62%),
    radial-gradient(46% 46% at 12% 78%, rgba(110,75,42,.12), transparent 64%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ margin:22px 0 26px; }
.hero .sub{ max-width:47ch; }

.hero-stats{
  display:flex; flex-wrap:wrap; gap:clamp(22px,3.4vw,54px);
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
}
.hero-stats .s b{
  display:block; font-family:var(--serif); font-size:clamp(1.9rem,3vw,2.7rem);
  color:var(--espresso); font-weight:500; line-height:1;
}
.hero-stats .s span{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ash); margin-top:8px; display:block;
}

.hero-shot{ position:relative; }
.hero-shot .frame{ position:relative; border-radius:3px; overflow:hidden; box-shadow:0 40px 90px -40px rgba(36,26,18,.42); }
.hero-shot .frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.hero-shot .tagplate{
  position:absolute; left:-16px; bottom:26px;
  background:var(--paper); border:1px solid var(--line); border-left:2px solid var(--brass);
  padding:13px 20px; border-radius:2px;
  box-shadow:0 18px 40px -22px rgba(36,26,18,.5);
}
.hero-shot .tagplate b{ font-family:var(--serif); font-size:1.05rem; display:block; color:var(--espresso); }
.hero-shot .tagplate span{ font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); }
@media (max-width:560px){ .hero-shot .tagplate{ left:10px; } }

/* ---------- section heads ---------- */
.sec-head{ max-width:760px; margin-bottom:clamp(38px,5vw,66px); }
.sec-head h2{ margin:20px 0 20px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .kicker{ justify-content:center; }
.sec-head.center .lead{ margin-inline:auto; }

/* ---------- page hero (inner pages) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(64px,9vw,120px)) 0 clamp(38px,5vw,64px);
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(58% 60% at 82% 22%, rgba(201,162,83,.20), transparent 64%);
}
.page-hero h1{ margin:20px 0 24px; }

/* ---------- THE LEDGER ---------- */
.ledger{ background:var(--espresso); color:var(--ivory); overflow:hidden; }
.ledger h2,.ledger h3{ color:var(--ivory); }
.ledger .kicker{ color:var(--gilt); }
.ledger .kicker::before{ background:var(--gilt); }
.ledger .lead{ color:rgba(246,242,233,.72); }

.rail{ position:relative; margin-top:clamp(34px,4.6vw,58px); padding-bottom:8px; }
.rail-line{
  position:absolute; left:0; right:0; top:15px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,83,.5) 8%,rgba(201,162,83,.5) 92%,transparent);
}
.years{
  display:flex; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; padding-bottom:14px;
  scroll-snap-type:x proximity;
}
.years::-webkit-scrollbar{ display:none; }
.yr{
  flex:1 0 auto; min-width:104px;
  background:none; border:0; cursor:pointer; padding:0 6px; text-align:center;
  position:relative; scroll-snap-align:center;
  color:rgba(246,242,233,.5); transition:color .4s var(--ease);
}
.yr .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--espresso); border:1px solid rgba(201,162,83,.55);
  margin:11px auto 16px; transition:.45s var(--ease);
}
.yr .y{ font-family:var(--serif); font-size:1.16rem; display:block; transition:.4s var(--ease); }
.yr .who{
  font-size:.53rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,242,233,.35); margin-top:5px; display:block; transition:.4s var(--ease);
}
.yr:hover{ color:var(--ivory); }
.yr:hover .dot{ border-color:var(--gilt); }
.yr.on{ color:var(--ivory); }
.yr.on .dot{ background:var(--gilt); border-color:var(--gilt); box-shadow:0 0 0 5px rgba(201,162,83,.16); }
.yr.on .y{ font-size:1.4rem; color:var(--gilt); }
.yr.on .who{ color:var(--gilt); }

.ledger-panel{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,4vw,60px); margin-top:clamp(34px,4.4vw,54px);
  align-items:center;
  border-top:1px solid rgba(201,162,83,.22);
  padding-top:clamp(30px,4vw,50px);
}
@media (max-width:900px){ .ledger-panel{ grid-template-columns:1fr; } }

.lp{ display:none; }
.lp.on{ display:block; animation:lpIn .75s var(--ease) both; }
@keyframes lpIn{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none; } }

.lp .badge{
  display:inline-block; font-family:var(--serif);
  font-size:clamp(1.7rem,3.1vw,2.5rem); color:var(--gilt); line-height:1;
  padding-bottom:9px; border-bottom:1px solid rgba(201,162,83,.35); margin-bottom:22px;
}
.lp h3{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:14px; }
.lp p{ color:rgba(246,242,233,.74); max-width:56ch; font-size:.96rem; }
.lp .facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.lp .facts span{
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(201,162,83,.32); color:var(--gilt-pale);
  padding:7px 13px; border-radius:999px;
}

.lp-media .doc{
  border:1px solid rgba(201,162,83,.28); border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.04);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.8);
}
.lp-media .doc img{ width:100%; height:auto; }
.lp-media .cap{
  font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,242,233,.42); margin-top:12px; text-align:right;
}
.lp-media .mark-only{
  display:grid; place-items:center; aspect-ratio:4/3;
  font-family:var(--serif); font-size:clamp(2rem,4vw,3.2rem);
  color:rgba(201,162,83,.5); letter-spacing:.04em;
  border:1px solid rgba(201,162,83,.28); border-radius:2px;
}

/* ---------- partners marquee ---------- */
.partners{ border-block:1px solid var(--line); background:var(--ivory-2); padding:26px 0; overflow:hidden; }
.marquee{ display:flex; width:max-content; animation:slide 44s linear infinite; }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee .p{
  font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.7rem);
  color:var(--ink-soft); letter-spacing:.05em;
  white-space:nowrap; display:flex; align-items:center;
}
.marquee .pb{
  display:inline-flex; align-items:baseline;
  padding-inline:clamp(20px,2.8vw,44px);
  position:relative;
}
.marquee .pb::after{
  content:'·'; color:var(--brass);
  position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  font-size:1.2rem;
}
.marquee .pb i{
  font-family:var(--sans); font-style:normal;
  font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin-left:10px;
}

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--ivory); padding:clamp(26px,3vw,42px); transition:background .5s var(--ease); }
.card:hover{ background:var(--paper); }
.card .n{ font-family:var(--serif); font-size:.95rem; color:var(--brass); }
.card h3{ font-size:1.42rem; margin:14px 0 12px; }
.card p{ font-size:.92rem; color:var(--ink-soft); margin:0; }

/* ---------- product plates ---------- */
.plate{ padding:clamp(60px,8vw,120px) 0; border-bottom:1px solid var(--line); }
.plate-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,86px); align-items:center; }
.plate.flip .plate-media{ order:2; }
@media (max-width:900px){
  .plate-grid{ grid-template-columns:1fr; }
  .plate.flip .plate-media{ order:0; }
}

.plate-media{ position:relative; }
.plate-media .shot{
  position:relative; border-radius:3px; overflow:hidden;
  background:linear-gradient(150deg,var(--ivory-2),var(--paper));
  border:1px solid var(--line); aspect-ratio:1/1;
}
.plate-media .shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.plate-media:hover .shot img{ transform:scale(1.045); }
.plate-media .corner{ position:absolute; width:16px; height:16px; border:1px solid var(--gold-line); z-index:2; }
.plate-media .corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.plate-media .corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.plate-media .glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:clamp(4rem,10vw,7rem); color:rgba(36,26,18,.09);
}
.plate-info .eyebrow{ margin-bottom:16px; }
.plate-info h2{ margin-bottom:18px; }
.plate-info .desc{ color:var(--ink-soft); max-width:52ch; }

/* hairline spec list */
.spec{ margin:30px 0 0; border-top:1px solid var(--line); }
.spec .row{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.spec .row dt{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); margin:0; }
.spec .row dd{ margin:0; font-size:.92rem; color:var(--ink); }
@media (max-width:520px){ .spec .row{ grid-template-columns:1fr; gap:4px; } }

.qsel{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.qsel button{
  background:transparent; border:1px solid var(--line);
  padding:11px 18px; border-radius:999px; cursor:pointer;
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); transition:.4s var(--ease);
}
.qsel button:hover{ border-color:var(--brass); color:var(--tobacco); }
.qsel button.on{ background:var(--espresso); border-color:var(--espresso); color:var(--ivory); }
.qnote{ margin-top:16px; font-size:.9rem; color:var(--ink-soft); border-left:2px solid var(--brass); padding-left:16px; }
.vlabel{ font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ash); margin-bottom:12px; }
.footnote{ font-size:.74rem; color:var(--ash); margin-top:20px; max-width:64ch; }

.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:1px solid var(--line); padding:0; transition:.35s var(--ease); }
.swatch:hover{ transform:scale(1.13); }
.swatch.on{ box-shadow:0 0 0 2px var(--ivory),0 0 0 3.5px var(--brass); }

/* ---------- kit grid ---------- */
.kit-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.kg{ background:var(--ivory); padding:24px; transition:background .45s var(--ease); }
.kg:hover{ background:var(--paper); }
.kg b{ font-family:var(--serif); font-size:1.16rem; font-weight:500; color:var(--espresso); display:block; }
.kg span{ font-size:.83rem; color:var(--ink-soft); display:block; margin-top:7px; line-height:1.55; }

/* ---------- process ---------- */
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.step{
  background:var(--ivory); padding:clamp(22px,2.6vw,34px);
  display:grid; grid-template-columns:76px 1fr; gap:clamp(16px,2.4vw,34px);
  align-items:start; transition:background .45s var(--ease);
}
.step:hover{ background:var(--paper); }
.step .no{ font-family:var(--serif); font-size:1.9rem; color:var(--gilt); line-height:1; }
.step h3{ font-size:1.3rem; margin-bottom:9px; }
.step p{ font-size:.92rem; color:var(--ink-soft); margin:0; }
@media (max-width:560px){ .step{ grid-template-columns:1fr; gap:10px; } }

/* ---------- table ---------- */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:3px; }
table.grades{ width:100%; border-collapse:collapse; min-width:660px; background:var(--paper); }
table.grades th,table.grades td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--line-soft); font-size:.87rem; }
table.grades thead th{ background:var(--ivory-2); font-family:var(--serif); font-size:1.12rem; font-weight:500; color:var(--espresso); }
table.grades thead th .gtag{ display:block; font-family:var(--sans); font-size:.53rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-top:5px; }
table.grades tbody th{ font-family:var(--sans); font-weight:400; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash); width:170px; }
table.grades td{ color:var(--ink); }
table.grades tbody tr:hover{ background:var(--ivory); }
table.grades td.win, table.grades th.win{ background:rgba(168,129,60,.09); position:relative; }
table.grades th.win{ color:var(--tobacco); }
table.grades td.win{ font-weight:500; color:var(--espresso); }
table.grades th.win .gtag{ color:var(--tobacco); }

/* ---------- directors ---------- */
.dir-lead{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(28px,4.6vw,72px); align-items:center; }
@media (max-width:900px){ .dir-lead{ grid-template-columns:1fr; } }

.portrait{
  position:relative; border-radius:3px; overflow:hidden;
  border:1px solid var(--line); background:var(--ivory-2);
  box-shadow:0 40px 80px -46px rgba(36,26,18,.55);
}
.portrait img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; transition:transform 1.4s var(--ease); }
.portrait:hover img{ transform:scale(1.04); }
.portrait::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(36,26,18,.5));
}
.portrait .plate-name{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 24px; color:var(--ivory); }
.portrait .plate-name b{ font-family:var(--serif); font-size:1.5rem; font-weight:500; display:block; color:var(--ivory); }
.portrait .plate-name span{ font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gilt-pale); }

.role{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); display:block; margin-bottom:14px; }
.dir-bio p{ color:var(--ink-soft); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.chip{
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--ink-soft);
  padding:8px 14px; border-radius:999px; transition:.4s var(--ease);
}
.chip:hover{ border-color:var(--brass); color:var(--tobacco); }

.dir-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.6vw,56px); margin-top:clamp(50px,7vw,100px); }
@media (max-width:820px){ .dir-pair{ grid-template-columns:1fr; } }
.dir-card .dir-bio{ margin-top:26px; }
.dir-card h3{ font-size:clamp(1.6rem,2.5vw,2.05rem); margin-bottom:6px; }

.dir-card .portrait.sm{ width:min(240px,62%); margin:0 auto; box-shadow:0 26px 54px -32px rgba(36,26,18,.5); }
.dir-card .portrait.sm .plate-name{ padding:16px 18px; }
.dir-card .portrait.sm .plate-name b{ font-size:1.06rem; }
.dir-card .portrait.sm .plate-name span{ font-size:.5rem; letter-spacing:.2em; }
@media (max-width:820px){ .dir-card .portrait.sm{ width:min(200px,52%); } }

/* ---------- gallery ---------- */
.filters{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:36px; }
.filters button{
  background:transparent; border:1px solid var(--line);
  padding:10px 19px; border-radius:999px; cursor:pointer;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); transition:.4s var(--ease);
}
.filters button:hover{ border-color:var(--brass); color:var(--tobacco); }
.filters button.on{ background:var(--espresso); border-color:var(--espresso); color:var(--ivory); }

.masonry{ column-count:3; column-gap:18px; }
@media (max-width:900px){ .masonry{ column-count:2; } }
@media (max-width:560px){ .masonry{ column-count:1; } }
.tile{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 18px; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--paper);
  transition:border-color .5s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.tile:hover{ border-color:var(--gold-line); transform:translateY(-4px); box-shadow:0 26px 50px -32px rgba(36,26,18,.5); }
.tile img{ width:100%; height:auto; }
.tile .cap{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--line-soft); }
.tile .cap span{ font-size:.79rem; color:var(--ink-soft); }
.tile .cap .tag{ font-size:.53rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); flex:none; }
.tile.hide{ display:none; }

/* ---------- form ---------- */
.form{ display:grid; gap:18px; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form .row{ grid-template-columns:1fr; } }
.form label{ display:block; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); margin-bottom:9px; }
.form input,.form select,.form textarea{
  width:100%; background:var(--paper);
  border:1px solid var(--line); border-radius:2px;
  padding:14px 15px;
  font-family:var(--sans); font-size:16px; font-weight:300; color:var(--ink);
  transition:border-color .35s var(--ease), background .35s;
  -webkit-appearance:none; appearance:none;
}
.form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236E4B2A'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
}
.form textarea{ min-height:130px; resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--brass); background:#fff; }
.form .msg{ font-size:.86rem; min-height:1.4em; margin:0; }

/* ---------- close cta ---------- */
.close-cta{ background:var(--espresso); color:var(--ivory); text-align:center; padding:clamp(72px,10vw,132px) 0; position:relative; overflow:hidden; }
.close-cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 60% at 50% 40%, rgba(201,162,83,.16), transparent 66%); }
.close-cta h2{ color:var(--ivory); }
.close-cta .lead{ color:rgba(246,242,233,.7); margin-inline:auto; }
.close-cta .kicker{ color:var(--gilt); justify-content:center; }
.close-cta .kicker::before{ background:var(--gilt); }

/* ---------- footer ---------- */
footer{ background:var(--ivory-2); border-top:1px solid var(--line); padding:clamp(52px,6vw,84px) 0 34px; position:relative; z-index:2; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,60px); }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-col h4{ font-size:1.5rem; margin-bottom:14px; }
.foot-col h5{ font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--brass); margin:0 0 18px; font-family:var(--sans); font-weight:400; }
.foot-col a,.foot-col p{ display:block; font-size:.87rem; color:var(--ink-soft); margin:0 0 11px; transition:color .3s; }
.foot-col a:hover{ color:var(--espresso); }
.foot-tag{ font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--tobacco); margin-top:18px; }
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:clamp(38px,5vw,64px); padding-top:24px; border-top:1px solid var(--line);
  font-size:.73rem; color:var(--ash);
}

/* ---------- intro overlay ---------- */
#intro{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:var(--ivory); overflow:hidden;
}
#intro::before{
  content:''; position:absolute;
  width:52vw; height:52vw; min-width:320px; min-height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,83,.34), transparent 62%);
  -webkit-filter:blur(34px); filter:blur(34px);
  opacity:0; animation:introGlow 1.9s ease .1s forwards;
}
#intro .imark{
  position:relative; display:grid; place-items:center;
  width:min(88vw,620px); height:min(70vw,380px);
}
#intro .itrophy,#intro .ifull{ grid-area:1/1; place-self:center; }
#intro .itrophy{
  fill:var(--espresso); width:auto; height:clamp(140px,25vh,220px);
  opacity:0; transform:scale(.28); transform-origin:center;
  animation:trophyIn 1.85s var(--ease) .12s forwards;
}
#intro .ifull{
  width:min(80vw,520px); height:auto; opacity:0; transform:scale(.9); transform-origin:center;
  animation:fullIn 1.15s var(--ease) 1.45s forwards;
}
#intro .ifull path{ fill:var(--espresso); }
#intro.lift{ animation:introOut .75s ease forwards; pointer-events:none; }
@keyframes introGlow{ to{ opacity:.85; } }
@keyframes trophyIn{
  0%{ opacity:0; transform:scale(.28); }
  38%{ opacity:1; transform:scale(1.04); }
  66%{ opacity:1; transform:scale(1.12); }
  100%{ opacity:0; transform:scale(1.55); }
}
@keyframes fullIn{ from{ opacity:0; transform:scale(.9);} to{ opacity:1; transform:scale(1);} }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }
body.intro-lock{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  #intro .itrophy{ animation:none; opacity:0; }
  #intro .ifull{ animation:fullIn .4s ease forwards; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .r{ opacity:1; transform:none; }
  .seam line{ stroke-dashoffset:0; }
  .marquee{ animation:none; }
}

/* ============ THE FLOOR — production filmstrip ============ */
.floorstrip{margin-top:clamp(40px,6vw,64px); position:relative;}
.floorstrip .strip{display:flex; gap:clamp(14px,2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 22px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gilt-pale) transparent;}
.floorstrip .strip::-webkit-scrollbar{height:6px;}
.floorstrip .strip::-webkit-scrollbar-thumb{background:var(--gilt-pale); border-radius:3px;}
.floorstrip .frame{flex:0 0 auto; width:min(74vw,460px); scroll-snap-align:center; position:relative;}
.floorstrip .frame .ph{aspect-ratio:4/3; overflow:hidden; border-radius:6px; border:1px solid var(--line);
  background:var(--paper); box-shadow:0 18px 40px -30px rgba(36,26,18,.45);}
.floorstrip .frame img{width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(.14) saturate(.92); transform:scale(1.04); transition:transform .9s var(--ease), filter .9s var(--ease);}
.floorstrip .frame:hover img{transform:scale(1.0); filter:sepia(0) saturate(1);}
.floorstrip .fcap{display:flex; align-items:baseline; gap:10px; margin-top:12px;}
.floorstrip .fno{font:600 11px/1 var(--sans); letter-spacing:.22em; color:var(--brass);}
.floorstrip .ftx{font:italic 500 clamp(17px,2vw,20px)/1.3 var(--serif); color:var(--ink);}
.floorstrip .hint{position:absolute; top:-34px; right:6px; font:600 10px/1 var(--sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--ash); display:flex; gap:8px; align-items:center;}
.floorstrip .hint::after{content:"⟶"; color:var(--brass);}
@media (max-width:640px){ .floorstrip .frame{width:82vw;} .floorstrip .hint{display:none;} }

/* ============ header brand image ============ */
.brand .brandimg{height:46px; width:auto; display:block; transition:height .3s var(--ease);}
.nav.scrolled .brandimg{height:38px;}
@media (max-width:640px){ .brand .brandimg{height:38px;} .nav.scrolled .brandimg{height:34px;} }

/* ============ ledger duo & stack media ============ */
.lp-duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px); align-items:center;}
.lp-duo .doc:first-child{transform:rotate(-1.6deg);}
.lp-duo .doc:last-child{transform:rotate(1.4deg) translateY(10px);}
.lp-stack{position:relative; padding:26px 26px 0 0;}
.lp-stack .doc.back{position:absolute; top:0; right:0; width:78%; transform:rotate(2.4deg); opacity:.96;}
.lp-stack .doc.front{position:relative; width:86%; transform:rotate(-1.2deg); z-index:2;
  box-shadow:0 26px 60px -34px rgba(36,26,18,.55);}
@media (max-width:900px){ .lp-stack{padding:20px 18px 0 0;} }

/* ============ SAFARI-SAFE PRODUCT PHOTOGRAPHS ============ */

.ph-slot{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:75%; /* Safari-safe 4:3 ratio */
  margin-bottom:18px;
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
}

/* Centre images without relying solely on object-fit */
.ph-slot > img{
  position:absolute;
  top:50%;
  left:50%;

  width:auto;
  height:auto;
  max-width:calc(100% - 16px);
  max-height:calc(100% - 16px);

  display:block;
  object-fit:contain;
  object-position:center;

  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);

  -webkit-transform-origin:center;
  transform-origin:center;

  -webkit-transition:-webkit-transform .7s var(--ease);
  transition:transform .7s var(--ease);
}

/* Round balls */
.ph-slot.product-handball > img,
.ph-slot.product-volleyball > img{
  max-width:calc(100% - 12px);
  max-height:calc(100% - 12px);
}

/* Wide oval balls */
.ph-slot.product-american-football > img,
.ph-slot.product-rugby > img{
  max-width:calc(100% - 8px);
  max-height:calc(100% - 30px);
}

/* Correct the visual centre of the rugby photograph */
.ph-slot.product-rugby > img{
  left:52%;
}

/* Correct the visual centre of the American football */
.ph-slot.product-american-football > img{
  top:51%;
}

/* Safari-safe hover zoom while retaining centring */
.ph-slot:hover > img{
  -webkit-transform:translate(-50%, -50%) scale(1.015);
  transform:translate(-50%, -50%) scale(1.015);
}

/* Placeholder text */
.ph-slot .ph-note{
  position:absolute;
  top:50%;
  left:50%;
  width:90%;

  font:600 10px/1.7 var(--sans);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ash);
  text-align:center;

  -webkit-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
}

.ph-slot .ph-note i{
  font:italic 500 12px/1.6 var(--serif);
  letter-spacing:.04em;
  text-transform:none;
  color:var(--brass);
}

/*
  Avoid :has(), because support differs across older Safari versions.
  Your current HTML contains no placeholder text inside image slots,
  so no :has() rule is required.
*/

.ph-slot[data-zoom],
.shot[data-zoom],
.doc[data-zoom],
.tile[data-zoom]{
  cursor:zoom-in;
}

/* Modern browsers can use native aspect-ratio */
@supports (aspect-ratio:4 / 3){
  .ph-slot{
    height:auto;
    padding-bottom:0;
    aspect-ratio:4 / 3;
  }
}

/* Mobile */
@media (max-width:640px){
  .ph-slot.product-handball > img,
  .ph-slot.product-volleyball > img{
    max-width:calc(100% - 8px);
    max-height:calc(100% - 8px);
  }

  .ph-slot.product-american-football > img,
  .ph-slot.product-rugby > img{
    max-width:calc(100% - 6px);
    max-height:calc(100% - 22px);
  }
}
/* ============ product photo placeholders ============ */
.ph-slot{aspect-ratio:4/3; border:1.5px dashed rgba(168,129,60,.5); border-radius:6px;
  background:transparent; display:grid; place-items:center; margin-bottom:18px; overflow:hidden; position:relative;}
.ph-slot .ph-note{font:600 10px/1.7 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash); text-align:center;}
.ph-slot .ph-note i{font:italic 500 12px/1.6 var(--serif); letter-spacing:.04em; text-transform:none; color:var(--brass);}
.ph-slot img{width:100%; height:100%; object-fit:contain; display:block;}
.ph-slot:has(img) .ph-note{display:none;}
.ph-slot:has(img), .shot[data-zoom], .doc[data-zoom], .tile[data-zoom]{cursor:zoom-in;}

/* ============ lightbox ============ */
.lbx{position:fixed; inset:0; z-index:300; background:rgba(36,26,18,.92); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease); padding:4vmin;}
.lbx.open{opacity:1; pointer-events:auto;}
.lbx img{max-width:92vw; max-height:86vh; border-radius:6px; box-shadow:0 40px 120px -40px rgba(0,0,0,.8);
  transform:scale(.95); transition:transform .4s var(--ease); cursor:zoom-in; background:var(--paper);}
.lbx.open img{transform:scale(1);}
.lbx.zoomed img{transform:scale(1.7); cursor:zoom-out;}
.lbx .lbx-close{position:absolute; top:18px; right:22px; background:none; border:0; color:var(--ivory);
  font:300 34px/1 var(--serif); cursor:pointer; opacity:.8;}
.lbx .lbx-close:hover{opacity:1;}
.lbx .lbx-cap{position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font:italic 500 15px/1.4 var(--serif); color:var(--gilt-pale); padding:0 6vw;}
@media (prefers-reduced-motion:reduce){ .lbx, .lbx img{transition:none;} }

/* ============ WhatsApp floating button ============ */
.wa-fab{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:280;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 14px 34px -10px rgba(18,80,45,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.wa-fab:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 20px 44px -12px rgba(18,80,45,.6);}
.wa-fab svg{width:28px; height:28px; fill:currentColor; display:block;}
.wa-fab .wa-tip{position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--espresso); color:var(--ivory); font:600 10px/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; padding:9px 12px; border-radius:4px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);}
.wa-fab:hover .wa-tip{opacity:1;}
@media (max-width:640px){ .wa-fab{width:52px; height:52px; right:16px;} .wa-fab .wa-tip{display:none;} }
@media (prefers-reduced-motion:reduce){ .wa-fab, .wa-fab:hover{transition:none; transform:none;} }

/* :has() fallback — JS adds .has-img for browsers without :has support */
.ph-slot.has-img .ph-note{display:none;}
.ph-slot.has-img{cursor:zoom-in;}

/* ============ Direct contact strip (enquiry section) ============ */
.direct{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:3px;
  margin:0 0 34px; overflow:hidden;}
.direct-item{background:var(--paper); padding:20px 22px; display:flex; flex-direction:column; gap:6px;}
.direct-item .dl{font:500 9px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ash);}
.direct-item .dv{font:400 16px/1.3 var(--serif); color:var(--espresso); letter-spacing:.01em;
  text-decoration:none; border-bottom:1px solid transparent; align-self:flex-start;
  transition:color .2s var(--ease), border-color .2s var(--ease);}
a.dv:hover{color:var(--tobacco); border-bottom-color:var(--brass);}
.direct-item .dv.plain{border-bottom:none;}
.direct-item .dsub{font:300 11px/1.3 var(--sans); color:var(--ash); letter-spacing:.04em;}
@media (max-width:900px){ .direct{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .direct{grid-template-columns:1fr;} .direct-item{padding:16px 18px;} }