/* ===========================================================
   AK Sports Infra — upgrade layer
   Load AFTER main.css and sticky-cards.css. Nothing in main.css is edited.
   1 Fonts   2 Scroll animations   3 Marquee bands   4 Draggable ball
   5 Testimonials   6 Enquiry (quote) form look
   =========================================================== */

/* ---------- 1. FONTS: Inter (Fabrica), headings + body ---------- */
:root, body {
  --at-ff-body: "Inter", "Inter Placeholder", sans-serif;
  --at-ff-heading: "Inter", "Inter Placeholder", sans-serif;
  --display: var(--at-ff-heading);
  --ak-navy: #0a0a0a;
  --ak-navy-2: #1a1a1a;
  --ak-gold: #0a0a0a;
}
body { font-family: var(--at-ff-body); }
/* condensed type wants a little air and a bigger size than DM Sans did */
.ak-hero .sec-1-home-15__headline { font-size: 104px; line-height: .98; letter-spacing: .005em; }
.club h2 { font-size: clamp(46px, 7.6vw, 116px); letter-spacing: .005em; line-height: .92; }
.footer-courts__heading { letter-spacing: .005em; }
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ak-hero .sec-1-home-15__headline { font-size: 68px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .ak-hero .sec-1-home-15__headline { font-size: 46px; }
}

/* ---------- 2. SCROLL ANIMATIONS: headings + images fade in from left / right / up ---------- */
/* uses the individual `translate` property, so it never fights GSAP / existing transforms */
html.ak2 [data-ak]:not(.ak-in) { opacity: 0; will-change: opacity, translate; }
html.ak2 [data-ak="left"]:not(.ak-in)  { translate: -72px 0; }
html.ak2 [data-ak="right"]:not(.ak-in) { translate: 72px 0; }
html.ak2 [data-ak="up"]:not(.ak-in)    { translate: 0 44px; }
html.ak2 [data-ak="fade"]:not(.ak-in)  { translate: 0 0; }
html.ak2 [data-ak] {
  transition: opacity .9s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--akd, 0ms);
}

/* ---------- 3. MARQUEE BANDS ---------- */
.ak-marquee { position: relative; overflow: hidden; z-index: 3; padding: clamp(16px, 2vw, 28px) 0; user-select: none; }
.ak-marquee--gold { background: var(--ak-gold); color: var(--ak-navy); }
.ak-marquee--navy { background: var(--ak-navy); color: #fff; }
.ak-marquee__track { display: flex; width: max-content; animation: akMarquee var(--ak-speed, 46s) linear infinite; }
.ak-marquee--rev .ak-marquee__track { animation-direction: reverse; }
.ak-marquee:hover .ak-marquee__track { animation-play-state: paused; }
.ak-marquee__group { display: flex; align-items: center; flex-shrink: 0; margin: 0; padding: 0 clamp(20px, 3vw, 44px) 0 0; list-style: none; gap: clamp(20px, 3vw, 44px); }
.ak-marquee__group li {
display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    white-space: nowrap;
    font-family: var(--at-ff-heading);
    /* font-weight: normal;
    font-style: italic; */
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1;
    letter-spacing: .01em;
}
.ak-marquee__group li::after {                /* ball separator */
  content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0 18%, transparent 19%), currentColor;
  opacity: .9;
}
.ak-marquee--navy .ak-marquee__group li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
.ak-marquee--navy .ak-marquee__group li::after { color: var(--ak-gold); }
@keyframes akMarquee { to { transform: translateX(-50%); } }

/* ---------- 4. DRAGGABLE BIG BALL ---------- */
.ak-ball-js .ball-stage { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: 0; }
.ak-ball-js .ball-stage.is-dragging { cursor: grabbing; }
.ak-ball-js .ball-stage:focus-visible { outline: 2px solid var(--ak-gold); outline-offset: 12px; border-radius: 50%; }
.ak-ball-js .big-ball {
  animation: none; opacity: 0; pointer-events: none; -webkit-user-drag: none;
  transition: transform .75s cubic-bezier(.2, .9, .2, 1), opacity .5s ease;
  will-change: transform, opacity;
}
.ak-ball-js .ball-stage.is-dragging .big-ball { transition: none; }

/* ---------- 5. TESTIMONIALS — "sideline scoreboard" ---------- */
.ak-testi.akt { background: var(--ak-navy); color: #fff; padding-block: clamp(72px, 9vw, 140px); }
.akt::before {                                   /* faint court-line grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.akt__frame { position: relative; z-index: 2; display: grid; gap: clamp(36px, 5vw, 72px); }
.akt__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.akt__eyebrow { margin: 0 0 18px; font: 600 13px/1 var(--at-ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--butter, #ffffff); }
.akt__title.ak-heading { margin: 0; color: #fff; font-family: var(--at-ff-heading); font-weight: normal; font-size: clamp(46px, 6.6vw, 108px); line-height: .9; text-transform: uppercase; letter-spacing: .005em; }
.akt__title.ak-heading .dim { color: rgba(255,255,255,.45); }
.akt__ctrl { display: flex; align-items: center; gap: 16px; }
.akt__count { font: 600 14px/1 var(--at-ff-body); letter-spacing: .12em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.akt__arrow {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.akt__arrow:hover, .akt__arrow:focus-visible { background: var(--ak-gold); border-color: var(--ak-gold); color: var(--ak-navy); outline: 0; }
.akt__board { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; border-top: 1px solid rgba(255,255,255,.2); }
.akt__list { list-style: none; margin: 0; padding: 0; border-right: 1px solid rgba(255,255,255,.2); }
.akt__tab {
  position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 6px; align-items: baseline;
  padding: 30px 28px 30px 0; margin: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.2);
  background: none; color: #fff; text-align: left; cursor: pointer; opacity: .5; transition: opacity .4s ease, padding .5s cubic-bezier(.16,1,.3,1);
}
.akt__tab:hover, .akt__tab:focus-visible { opacity: .85; outline: 0; }
.akt__tab[aria-selected="true"] { opacity: 1; padding-left: 14px; }
.akt__num { font: 600 13px/1 var(--at-ff-body); letter-spacing: .1em; color: var(--ak-gold); }
.akt__name { font: 700 clamp(26px, 2.6vw, 40px)/1 var(--at-ff-heading); text-transform: uppercase; letter-spacing: .01em; }
.akt__sport { grid-column: 2; font: 500 12px/1 var(--at-ff-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.akt__bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--ak-gold); transform: scaleX(0); transform-origin: 0 50%; }
.akt__tab[aria-selected="true"] .akt__bar { animation: aktBar var(--akt-delay, 6500ms) linear forwards; }
.akt.is-paused .akt__bar { animation-play-state: paused; }
@keyframes aktBar { to { transform: scaleX(1); } }

.akt__stage { position: relative; display: grid; overflow: hidden; min-height: clamp(440px, 42vw, 560px); padding: clamp(28px, 4vw, 60px) 0 0 clamp(24px, 4.5vw, 84px); touch-action: pan-y; }
.akt__slide {
  grid-area: 1 / 1; margin: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  opacity: 0; visibility: hidden; translate: calc(var(--akdir, 1) * 56px) 0;
  transition: opacity .55s ease, translate .9s cubic-bezier(.16,1,.3,1), visibility 0s linear .9s;
}
.akt__slide.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .7s ease .1s, translate 1s cubic-bezier(.16,1,.3,1) .1s, visibility 0s; }
.akt__slide.is-out { translate: calc(var(--akdir, 1) * -56px) 0; }
.akt__court { position: absolute; right: -4%; bottom: -8%; width: min(560px, 78%); opacity: .11; pointer-events: none; fill: none; stroke: #fff; stroke-width: 2; }
.akt__quote { position: relative; margin: 0; z-index: 1; }
.akt__quote::before { content: "\201C"; display: block; height: .5em; font: 800 italic clamp(90px, 10vw, 150px)/1 var(--at-ff-heading); color: var(--ak-gold); }
.akt__quote p { margin: 0; max-width: 14ch; font: 600 italic clamp(44px, 5.6vw, 88px)/.96 var(--at-ff-heading); text-transform: uppercase; letter-spacing: .005em; color: #fff; }
.akt__body { position: relative; z-index: 1; margin: 22px 0 0; max-width: 52ch; font: 400 18px/1.6 var(--at-ff-body); color: rgba(255,255,255,.78); }
.akt__foot { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding-bottom: 8px; }
.akt__avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ak-gold); font: 700 20px/1 var(--at-ff-heading); letter-spacing: .04em; color: var(--butter, #ffffff); }
.akt__who { display: grid; gap: 4px; }
.akt__who strong { font: 600 20px/1 var(--at-ff-heading); letter-spacing: .06em; text-transform: uppercase; }
.akt__who span { font: 400 14px/1.2 var(--at-ff-body); color: rgba(255,255,255,.65); }
.akt__tags { display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; }
.akt__tags span { padding: 7px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font: 500 12px/1 var(--at-ff-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
@media (max-width: 991px) {
  .akt__board { grid-template-columns: 1fr; }
  .akt__list { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .akt__list::-webkit-scrollbar { display: none; }
  .akt__list li { flex: none; scroll-snap-align: start; }
  .akt__tab { width: auto; padding: 18px 26px 18px 0; border-bottom: 0; }
  .akt__tab[aria-selected="true"] { padding-left: 0; }
  .akt__sport { display: none; }
  .akt__stage { padding-left: 0; }
  .akt__tags { margin-left: 0; }
}
@media (max-width: 575px) {
  .akt__arrow { width: 44px; height: 44px; }
  .akt__quote p { max-width: none; }
}

/* ---------- 6. ENQUIRY FORM — scoreboard look (markup and IDs untouched) ---------- */
.ak-quote .booker { border: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(15,42,64,.45), 0 0 0 1px rgba(15,42,64,.08); }
.ak-quote .booker-fig { padding: 30px 30px 56px; }
.ak-quote .booker-fig::before {                  /* court-line texture over the colour panel */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ak-quote .booker-fig > * { position: relative; z-index: 1; }
.ak-quote .booker-fig .corner { position: absolute; font-family: var(--at-ff-heading); font-weight: normal; font-size: 15px; letter-spacing: .08em; }
.ak-quote .field legend { font-family: var(--at-ff-heading); font-weight: normal; font-size: 18px; letter-spacing: .1em; }
.ak-quote .opt span { padding: 10px 18px; font-family: var(--at-ff-heading); font-weight: normal; font-size: 17px; letter-spacing: .06em; }
.ak-quote .opt input:checked + span { background: var(--ak-gold); border-color: var(--ak-gold); color: var(--ak-navy); }
.ak-quote .opt input:checked + span small { opacity: .8; }
.ak-quote .booker-body { padding: clamp(24px, 3.4vw, 40px); gap: 26px; background: #fff; }
.ak-quote .inp { font-family: var(--at-ff-heading); font-weight: normal; font-size: 14px; letter-spacing: .1em; color: var(--ak-navy-2); }
.ak-quote .inp input, .ak-quote .inp select { background: #f1f4f7; border: 1.5px solid transparent; border-radius: 12px; padding: 15px 18px; }
.ak-quote .inp input:hover, .ak-quote .inp select:hover { border-color: rgba(15,42,64,.25); }
.ak-quote .inp input:focus, .ak-quote .inp select:focus { background: #fff; border-color: var(--ak-gold); box-shadow: 0 0 0 4px rgba(10,10,10,.14); }
.ak-quote .estimate { background: var(--ak-navy); border: 0; border-radius: 16px; overflow: hidden; }
.ak-quote .estimate div { padding: 22px 22px 20px; }
.ak-quote .estimate div + div { border-left: 1px solid rgba(255,255,255,.12); }
.ak-quote .estimate span { color: rgb(0 0 0 / 60%);
    font-family: var(--at-ff-heading);
    font-weight: normal;
    font-size: 16px;
    letter-spacing: .12em;}
.ak-quote .estimate b { color: var(--butter, #ffffff); font-family: var(--at-ff-heading);  font-size:32px; letter-spacing: 0; }
.ak-quote .note { font-size: 16px; line-height: 1.5; color: rgba(15,42,64,.7); }
.ak-quote .summary { border-top: 1px dashed rgba(15,42,64,.25); }
.ak-quote .summary output { font-family: var(--at-ff-heading); font-weight: normal; font-size: 14px; letter-spacing: .1em; color: var(--ak-navy); }
.ak-quote .booker .at-btn { border-radius: 999px; }
/* intro column: spec sheet rows */
.ak-quote .specs { gap: 0; }
.ak-quote .specs dt, .ak-quote .specs dd { padding: 14px 0; border-top: 1px solid rgba(15,42,64,.16); }
.ak-quote .specs dt { display: flex; align-items: center; gap: 10px; font-family: var(--at-ff-heading); font-weight: normal; font-size: 14px; letter-spacing: .12em; color: var(--ak-navy-2); }
.ak-quote .specs dt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-gold); }
.ak-quote .specs dd { font-size: 15px; padding-left: 20px; }
@media (max-width: 575px) { .ak-quote .estimate { grid-template-columns: 1fr; } .ak-quote .estimate div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ak2 [data-ak] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .ak-marquee__track { animation: none; }
  .akt__bar { animation: none !important; }
}

/* ===========================================================
   AK Sports Infra — three new sections
   1 Selected Works (Grid / List / Feed / Full)   2 Now booking (list rows)   3 Philosophy (split)
   Load AFTER main.css and ak-upgrade.css. Nothing in those files is edited.
   All rules are scoped to .sx-* (plus one small grid-sync rule for .courts).
   =========================================================== */
:root{
  --u:48px;                                   /* the site's grid pitch */
  --sx-ink:#161616;
  --sx-mute:#b7b7b7;
  --sx-rule:rgb(12 12 12 / 14%);
  --sx-navy:#1a1a1a;
  --sx-gold:#0a0a0a;
  --sx-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- THE SHARED GRID ----------
   Same 5% lines, same 48px pitch as .courts / .book / body. JS sets --gy so each section's
   lines start on the page-wide lattice, which makes them join up across section edges. */
.courts,
.sx-lined{
  background-image:
    linear-gradient(rgb(12 12 12 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(12 12 12 / 5%) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:0 var(--gy,0px);
}
.sx-lined{ position:relative; background-color:#fff; color:var(--sx-ink); font-family:var(--sx-sans); }
/* .sx-first{ padding-top:calc(var(--u) * 3 + var(--gy,0px)); }       */
/* .sx-works{ padding-bottom:calc(var(--u) * 3 + var(--gb,0px)); } */
.sx-book { padding-top:calc(var(--u) * 3); padding-bottom:calc(var(--u) * 3 + var(--gb,0px)); }
.sx-wrap{ width:min(1376px, calc(100% - 48px)); margin-inline:auto; }
.sx-wrap--mid{ width:min(1180px, calc(100% - 48px)); }

/* scroll-in (only active when JS adds html.sx-on) */
html.sx-on .sx-rv{ opacity:0; translate:0 34px; transition:opacity .9s ease, translate 1.1s var(--sx-ease); transition-delay:calc(var(--d,0) * 90ms); }
html.sx-on .sx-rv.is-in{ opacity:1; translate:0 0; }

/* =========================================================== 1. SELECTED WORKS */
.sx-meta{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; height:var(--u); font:16px;  }
.sx-meta a{ color:inherit; text-decoration:none; }
.sx-meta nav{ display:flex; gap:12px; }
.sx-meta nav a{ padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .3s ease; }
.sx-meta nav a.is-on, .sx-meta nav a:hover{ border-bottom-color:currentColor; }
.sx-meta__cta{ justify-self:end; border-bottom:1px solid transparent; transition:border-color .3s ease; }
.sx-meta__cta:hover{ border-bottom-color:currentColor; }

.sx-head{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; margin-top:var(--u); min-height:calc(var(--u) * 4);padding-bottom: 70px; }
.sx-title{ grid-column:1 / 3; margin:0;  letter-spacing:-.05em; color:var(--sx-ink); }
.sx-title sup{ position:relative; top:.08em; margin-left:.05em; font-size:.34em; font-weight:500; letter-spacing:0; vertical-align:top; }
.sx-lede{ grid-column:3; margin:.9em 0 0; max-width:30ch; font-size:16px; color:#575757; }
.sx-social{ grid-column:4; justify-self:end; display:flex; gap:20px; margin:.9em 0 0; padding:0; list-style:none; font:400 11px/1 var(--sx-sans); }
.sx-social a{ color:#575757; text-decoration:none; transition:color .3s ease;font-size: 16px; }
.sx-social a:hover{ color:var(--sx-ink); }

.sx-bar{ display:grid; grid-template-columns:repeat(4,1fr); align-items:end; height:calc(var(--u) * 2); padding-bottom:calc(var(--u) / 3); }
.sx-sub{ grid-column:1 / 3; margin:0; font:500 clamp(22px,2.2vw,32px)/1 var(--sx-sans); letter-spacing:-.025em; }
.sx-sub sup{ position:relative; top:-.2em; margin-left:.14em; font-size:.42em; letter-spacing:0; color:#6f6f6f; vertical-align:top; }
.sx-views{ grid-column:3 / 5; display:flex; justify-content:space-between; }
.sx-views button{
  padding:0; border:0; background:none; cursor:pointer; color:var(--sx-mute);
  font:500 clamp(18px,2vw,30px)/1 var(--sx-sans); letter-spacing:-.025em; transition:color .3s ease;
}
.sx-views button:hover{ color:#777; }
.sx-views button[aria-pressed="true"]{ color:var(--sx-ink); }
.sx-views button:focus-visible{ outline:2px solid var(--sx-ink); outline-offset:6px; }

/* ---- the grid of works ---- */
.sx-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; transition:opacity .22s ease, translate .22s ease; }
.sx-grid.is-swap{ opacity:0; translate:0 10px; }
.sx-grid li{ min-width:0; }
.sx-item{ position:relative; margin:0; display:block; }
.sx-fig{ position:relative; aspect-ratio:1 / .97; overflow:hidden; background:#dcdcdc; }
.sx-img, .sx-art{ position:absolute; inset:0; display:block; background-size:cover; background-position:center; transition:transform 1.2s var(--sx-ease); }
.sx-art{ background-color:var(--c,#2f5a8a); background-image:linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.14)); }
.sx-art svg{ display:block; width:100%; height:100%; }
.sx-item:hover .sx-img, .sx-item:hover .sx-art{ transform:scale(1.05); }
.sx-cap{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:12px; padding:34px 14px 12px; color:#fff; font-size:20px;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); opacity:0; translate:0 8px; transition:opacity .4s ease, translate .6s var(--sx-ease); pointer-events:none; }
.sx-item:hover .sx-cap, .sx-item:focus-within .sx-cap{ opacity:1; translate:0 0; }
.sx-no, .sx-cat{ display:none; }

/* LIST */
.sx-grid[data-view="list"]{ grid-template-columns:1fr; gap:0; }
.sx-grid[data-view="list"] li{ border-top:1px solid var(--sx-rule); }
.sx-grid[data-view="list"] li:last-child{ border-bottom:1px solid var(--sx-rule); }
.sx-grid[data-view="list"] .sx-item{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; min-height:calc(var(--u) * 2); transition:background-color .3s ease; }
.sx-grid[data-view="list"] .sx-item:hover{ background:rgb(12 12 12 / 3%); }
.sx-grid[data-view="list"] .sx-cap{ display:contents; }
.sx-grid[data-view="list"] .sx-no{ display:block; grid-column:1; grid-row:1; font:500 11px/1 var(--sx-sans); color:#777; }
.sx-grid[data-view="list"] .sx-name{ grid-column:1; grid-row:1; padding-left:56px; font:500 clamp(20px,2.2vw,32px)/1 var(--sx-sans); letter-spacing:-.025em; color:var(--sx-ink); }
.sx-grid[data-view="list"] .sx-cat{ display:block; grid-column:3; grid-row:1; font:400 12px/1 var(--sx-sans); color:#555; }
.sx-grid[data-view="list"] .sx-yr{ grid-column:4; grid-row:1; justify-self:end; padding-right:calc(clamp(88px,10vw,150px) + 24px); font:400 12px/1 var(--sx-sans); color:#555; }
.sx-grid[data-view="list"] .sx-fig{ position:absolute; right:0; top:50%; translate:0 -50%; width:clamp(88px,10vw,150px); aspect-ratio:4 / 3; }

/* FEED */
.sx-grid[data-view="feed"]{ grid-template-columns:minmax(0,560px); justify-content:center; gap:calc(var(--u) * 1); }
.sx-grid[data-view="feed"] .sx-fig{ aspect-ratio:4 / 5; }
.sx-grid[data-view="feed"] .sx-cap{ position:static; display:grid; grid-template-columns:1fr auto auto; gap:18px; padding:14px 0 0; color:var(--sx-ink); background:none; opacity:1; translate:0 0; font-size:19px; }
.sx-grid[data-view="feed"] .sx-cat{ display:block; color:#6a6a6a; }

/* FULL */
.sx-grid[data-view="full"]{ grid-template-columns:1fr; gap:2px; }
.sx-grid[data-view="full"] .sx-fig{ aspect-ratio:21 / 9; }
.sx-grid[data-view="full"] .sx-cap{ opacity:1; translate:0 0; padding:70px clamp(16px,2vw,32px) 20px; font-size:clamp(14px,1.3vw,18px); letter-spacing:-.01em; }
.sx-grid[data-view="full"] .sx-cat{ display:block; opacity:.85; margin-left:auto; margin-right:26px; }

/* =========================================================== 2. NOW BOOKING */
.sx-eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; height:var(--u); margin:0; font:500 9px/1 var(--sx-sans); letter-spacing:.22em; text-transform:uppercase; color:var(--sx-navy); }
.sx-eyebrow i{ position:relative; width:11px; height:11px; border:1px solid var(--sx-gold); border-radius:50%; }
.sx-eyebrow i::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sx-gold); }
.sx-h2{ margin:var(--u) auto 0; max-width:17em; text-align:center; font:400 clamp(36px,4.8vw,70px)/1.06 var(--sx-serif); letter-spacing:-.012em; color:var(--sx-navy); }
.sx-p{ margin:var(--u) auto calc(var(--u) * 2); max-width:48ch; text-align:center; font:400 12px/1.65 var(--sx-sans); color:#4d4d4d; }
.sx-rows{ margin:0; padding:0; list-style:none; border-bottom:1px solid var(--sx-rule); }
.sx-row{ display:grid; grid-template-columns:1.1fr .8fr 1.1fr; column-gap:clamp(24px,5vw,80px); align-items:center; min-height:calc(var(--u) * 4); border-top:1px solid var(--sx-rule); transition:background-color .4s ease; }
.sx-row:hover{ background:rgb(24 62 93 / 3%); }
.sx-city{ margin:0 0 14px; font:400 clamp(26px,2.5vw,38px)/1 var(--sx-serif); text-transform:uppercase; letter-spacing:.01em; color:var(--sx-navy); }
.sx-when{ margin:0 0 4px; font:500 11px/1.5 var(--sx-sans); color:#3f3f3f; }
.sx-when--mute{ font-weight:400; color:#8a8a8a; }
.sx-thumb{ position:relative; width:100%; max-width:230px; aspect-ratio:1.25; margin-inline:auto; overflow:hidden; background:#ddd; }
.sx-art--thumb{ transition:transform 1.2s var(--sx-ease); }
.sx-row:hover .sx-art--thumb{ transform:scale(1.07); }
.sx-row__r p{ margin:0; max-width:34ch; font:400 11px/1.6 var(--sx-sans); color:#4a4a4a; }
.sx-reserve{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font:600 9px/1 var(--sx-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--sx-navy); text-decoration:none; }
.sx-reserve svg{ transition:translate .5s var(--sx-ease); }
.sx-reserve:hover svg{ translate:5px 0; }

/* =========================================================== 3. PHILOSOPHY */
.sx-phil{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; padding:0; background-position:0 var(--gy,0px); }
.sx-phil__l{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--u) * 2) clamp(24px,4.4vw,72px);background: #d9d9d9; }
.sx-phil__mark{ position:absolute; left:clamp(24px,4.4vw,72px); top:var(--u); font:400 10px/1 var(--sx-sans); color:#555; letter-spacing:.04em; }
.sx-phil__h{ margin:0; max-width:9.4em; line-height:1; text-transform:uppercase; letter-spacing:-.005em; color:#161616; }
.sx-phil__thumb{ position:absolute; left:0; bottom:calc(var(--u) * 2); width:clamp(64px,7.4vw,118px); aspect-ratio:1 / 1.1; background-size:cover; background-position:center; }
.sx-phil__r{ position:relative; overflow:hidden; display:flex; align-items:center; background:#070707; color:#fff; padding:calc(var(--u) * 2) clamp(24px,6vw,96px); }
.sx-phil__bg{ position:absolute; inset:-4%; background-size:cover; background-position:center; filter:grayscale(1) contrast(1.25) brightness(.5); transform:scale(1.06); transition:transform 2.4s var(--sx-ease); }
.sx-phil__r:hover .sx-phil__bg{ transform:scale(1); }
.sx-phil__r::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 90% at 20% 30%, rgba(0,0,0,.15), rgba(0,0,0,.78) 100%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)); }
.sx-phil__txt{ position:relative; z-index:1; max-width:36ch; }
.sx-phil__lbl{ margin:0 0 20px; font:500 9px/1 var(--sx-sans); letter-spacing:.22em; text-transform:uppercase; }
.sx-phil__r .sx-phil__txt p{  font:16px; color:var(--bw-p-dark) !important; }
.sx-phil__txt .sx-phil__lbl{ color: #fff !important;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 20px; }
.sx-phil__more{ position:absolute; z-index:2; left:clamp(24px,6vw,96px); bottom:calc(var(--u) * 1.5); padding-top:11px; border-top:1px solid rgba(255,255,255,.7); font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:#fff; text-decoration:none; transition:letter-spacing .5s var(--sx-ease), border-color .3s ease; }
.sx-phil__more:hover{ letter-spacing:.32em; border-color:var(--sx-gold); }

/* =========================================================== RESPONSIVE */
@media (max-width:991px){
  .sx-row{ grid-template-columns:1fr 1fr; row-gap:20px; padding-block:28px; }
  .sx-row__r{ grid-column:1 / -1; }
  .sx-thumb{ margin:0; max-width:none; }
}
@media (max-width:767px){
  .sx-meta{ grid-template-columns:1fr 1fr; }
  .sx-meta > :nth-child(2), .sx-meta nav{ display:none; }
  .sx-lede{
      margin-bottom:15px;
  }
  .sx-head{ grid-template-columns:1fr; min-height:0; row-gap:0px;margin-top:10px !important; }
  .sx-title, .sx-lede, .sx-social{ grid-column:1; }
  .sx-social{ justify-self:start; margin-top:0; }
  .sx-bar{ grid-template-columns:1fr; height:auto; row-gap:18px; padding-block:calc(var(--u) / 2); }
  .sx-sub, .sx-views{ grid-column:1; }
  .sx-views{ justify-content:flex-start; gap:26px; }
  .sx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sx-grid[data-view="list"], .sx-grid[data-view="feed"], .sx-grid[data-view="full"]{ grid-template-columns:1fr; }
  .sx-grid[data-view="list"] .sx-item{ grid-template-columns:1fr auto; padding-block:14px; min-height:calc(var(--u) * 2); }
  .sx-grid[data-view="list"] .sx-name{ grid-column:1; padding-left:34px; font-size:20px; }
  .sx-grid[data-view="list"] .sx-cat{ display:none; }
  .sx-grid[data-view="list"] .sx-yr{ display:none; }
  .sx-grid[data-view="list"] .sx-fig{ width:84px; }
  .sx-grid[data-view="full"] .sx-fig{ aspect-ratio:4 / 3; }
  .sx-cap{ opacity:1; translate:0 0; font-size:10px; padding:26px 10px 8px; }       /* no hover on touch */
  .sx-grid[data-view="list"] .sx-cap, .sx-grid[data-view="feed"] .sx-cap{ opacity:1; }
  .sx-row{ grid-template-columns:1fr; }
  .sx-thumb{ max-width:260px; }
  .sx-phil{ grid-template-columns:1fr; min-height:0; }
  .sx-phil__l{ min-height:330px; padding-top:calc(var(--u) * 2.5); padding-bottom:calc(var(--u) * 4); }
  .sx-phil__r{ 
    /* min-height:calc(var(--u) * 11);  */
    padding-bottom:calc(var(--u) * 4);
   }
}
@media (prefers-reduced-motion:reduce){
  html.sx-on .sx-rv{ opacity:1; translate:none; transition:none; }
  .sx-grid{ transition:none; }
  .sx-img,.sx-art,.sx-phil__bg{ transition:none; }
}


/* ---------- 9. HERO — balanced composition (label, supporting text, CTAs, line pattern) ----------
   Only adds to the hero: the headline, header, systems card and all existing behaviour are untouched. */

/* subtle line pattern: the site's grid, drawn in white and faded toward the edges */
.ak-hero .ak-hero__lines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
  background-size: 48px 48px, 48px 48px, auto;
  -webkit-mask-image: radial-gradient(120% 95% at 22% 55%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 88%);
          mask-image: radial-gradient(120% 95% at 22% 55%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 88%);
}

/* bracket label above the headline: [ Sports infrastructure ]   [ Design & build ] */
.ak-hero .ak-hero__label {
  position: absolute; left: 0; bottom: 100%; margin: 0 0 24px; display: flex; gap: 28px; white-space: nowrap;
  font: 500 12px/1 var(--at-ff-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.ak-hero .ak-hero__label span::before { content: "[\00a0"; color: var(--ak-gold, #0a0a0a); }
.ak-hero .ak-hero__label span::after  { content: "\00a0]"; color: var(--ak-gold, #0a0a0a); }

/* supporting text under the headline (uses the existing .ak-hero__sub look) */
.ak-hero .ak-hero__sub { margin-top: 28px; font-size: 16px;margin-bottom: 20px; }

/* CTA row: the shared .at-btn.ak-btn-orange + .ak-link (same buttons as the services / footer CTAs) */
.ak-hero .ak-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 15px; }
.ak-hero .ak-hero__cta-row .at-btn, .ak-hero .ak-hero__cta-row .ak-link { cursor: pointer; }
.ak-hero .ak-hero__cta-row .ak-link { color: #fff; }

/* right-middle supporting text */
.ak-hero .ak-hero__aside {
  position: absolute; z-index: 4; right: 100px; top: calc(40% - 32px); width: 250px; margin: 0; text-align: right;
  font: 400 15px/1.55 var(--at-ff-body); color: rgba(255, 255, 255, .84); 
}
.ak-hero .ak-hero__aside::before { content: ""; display: block; width: 34px; height: 2px; margin: 0 0 16px auto; background: var(--ak-gold, #0a0a0a); }

/* round explore button, left of the systems card */
.ak-hero .ak-hero__explore {
  position: absolute; z-index: 4; right: 428px; bottom: 48px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(10, 10, 10, .5); border: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.ak-hero .ak-hero__explore svg { animation: akHeroNudge 2.2s ease-in-out infinite; }
.ak-hero .ak-hero__explore:hover, .ak-hero .ak-hero__explore:focus-visible { background: var(--ak-gold, #0a0a0a); border-color: var(--ak-gold, #0a0a0a); color: #0c0c0c; outline: 0; }
@keyframes akHeroNudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* headline scales with the screen height so the new content always fits (104px cap = unchanged on tall screens) */
@media (min-width: 1200px) { .ak-hero .sec-1-home-15__headline { font-size: clamp(64px, 11.2vh, 104px); } }

/* laptop + tablet: give the hero a full-screen height so the new content has room */
@media (min-width: 768px) and (max-width: 1399.98px) { .ak-hero .sec-1-home-15__card { height: max(100svh, 640px); } }

/* short screens: keep the headline, label and CTAs; drop the long paragraph */
@media (min-width: 768px) and (max-height: 819px) { .ak-hero .ak-hero__sub { display: none; } }

/* narrower desktops: hide the extra right-hand pieces before they can touch the systems card */
@media (max-width: 1199.98px) { .ak-hero .ak-hero__aside, .ak-hero .ak-hero__explore { display: none; } }
@media (max-width: 991.98px)  { .ak-hero .ak-hero__label { gap: 16px; font-size: 11px; } .ak-hero .ak-hero__lines { background-size: 40px 40px, 40px 40px, auto; } }
@media (max-width: 767.98px) {
  .ak-hero .ak-hero__sub { font-size: 14px; }
  .ak-hero .ak-hero__cta-row { gap: 14px 22px; margin-top: 20px; }
}
@media (max-width: 575.98px) { .ak-hero .ak-hero__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .ak-hero .ak-hero__explore svg { animation: none; } } 


/* ---------- GOLD ACCENT: every sub-title + highlighted area uses var(--bw-accent) ---------- */
:root { --ak-gold: var(--bw-accent); --at-theme-primary: var(--bw-accent); --olive: var(--bw-accent); --ak-lime-ink: var(--bw-accent); --clay-deep: var(--bw-accent); }

/* sub-titles / eyebrows / small section labels */
.ak-eyebrow.ak-eyebrow, .ak-services__bar .ak-eyebrow, .book-intro .ak-eyebrow,
.club .tag, .club-intro .tag, .courts .tag,
.akt__eyebrow,
.footer-courts__eyebrow, .footer-courts .footer-courts__label,
.ak-muse__sub,
.sec-2-ak-overview__gallery-label,
.ak-hero .ak-hero__systems-title, .ak-hero .ak-hero__label,
.sx-phil__lbl, .sx-phil__txt .sx-phil__lbl, .sx-sub { color: var(--bw-accent); }

/* highlighted areas: arrow icons, underline hover on links, bracket marks */
.ak-link svg, .footer-courts .ak-link svg { color: var(--bw-accent); }
.ak-link:hover, .ak-link:focus-visible { border-bottom-color: var(--bw-accent); }


/* ---------- ABOUT: tighter stage, heading on exactly three lines, CTA in the empty top-right ---------- */
.club .club-grid { align-items: end; }
.club .club-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 28px; padding-bottom: 6px; }
.club .club-cta .ak-link { color: rgb(var(--about-fg-rgb)); }             /* follows the white -> dark scroll transition */
.club .club-stage { margin-top: clamp(16px, 2.4vw, 32px); container-type: inline-size; grid-template-columns: auto minmax(0, 1fr); }
/* heading: 3 lines (More than a surface — / a court built / to last). Size = width left beside the ball, so the longest line always fits */
.club .club-stage h2 {
  font-size: clamp(28px, 5.4vw, 80px);                                    /* fallback for browsers without container units */
  font-size: clamp(22px, calc((100cqw - clamp(140px, 22vw, 300px) - clamp(16px, 3vw, 40px)) / 13.8), 96px);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .club .club-cta { justify-content: flex-start; margin-top: 8px; }
  .club .club-stage { grid-template-columns: minmax(0, 1fr); }
  .club .club-stage h2 { font-size: clamp(22px, calc(100cqw / 13.8), 96px); }
}

/* ===========================================================
   ENQUIRY / QUOTE — architectural "planning sheet" redesign
   Sharp, chamfered geometry; markup IDs and JS untouched.
   Scoped to .book.ak-quote so nothing else is affected.
   =========================================================== */
.book.ak-quote{
  --cut:34px;
  --q-ink:#0c0c0c; --q-navy:var(--ak-navy,#0a0a0a); --q-navy2:var(--ak-navy-2,#1a1a1a); --q-gold:var(--ak-gold,#0a0a0a);
  --q-chamfer:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.book.ak-quote .book-grid{ position:relative; }

/* hatched offset plate behind the card = architectural drop shadow */
.book.ak-quote .book-grid::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:calc((100% + 1px) / 3 + 18px); right:-18px; top:18px; bottom:-18px;
  /* background:repeating-linear-gradient(135deg, rgba(10,10,10,.6) 0 2px, transparent 2px 9px);
  clip-path:var(--q-chamfer); */
}

/* the card */
.book.ak-quote .booker{
  grid-template-rows:auto auto 1fr;
  border:0; border-radius:0; box-shadow:none; background:#fff; overflow:visible;
  clip-path:var(--q-chamfer);
}

/* header strip with a ruler along its bottom edge */
.book.ak-quote .booker-bar{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 calc(var(--cut) + 8px) 0 26px; height:46px;
  background:var(--q-ink); color:rgba(255,255,255,.78);
  font-family:var(--at-ff-heading); font-size:12px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.book.ak-quote .booker-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:8px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 50px) bottom/100% 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1px, transparent 1px 10px) bottom/100% 4px no-repeat;
}
.book.ak-quote .booker-bar__l{ display:flex; align-items:center; gap:12px; }
.book.ak-quote .booker-bar__l i{ width:9px; height:9px; background:var(--q-gold); transform:rotate(45deg); }
.book.ak-quote .booker-bar__r{ display:flex; align-items:center; gap:18px; color:rgba(255,255,255,.55); }
.book.ak-quote .booker-bar__r em{ font-style:normal; color:var(--q-gold); }

/* colour panel */
.book.ak-quote .booker-fig{ padding:34px 34px 62px; gap:28px 40px; }
.book.ak-quote .booker-fig::before{
  opacity:1;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(0,0,0,.28) 0%, transparent 55%);
  background-size:40px 40px, 40px 40px, 100% 100%;
}
.book.ak-quote .field legend{ font-size:20px; letter-spacing:.14em; color:#fff; margin-bottom:18px; }
.book.ak-quote .opts{ gap:10px; }
.book.ak-quote .opt span{
  padding:11px 26px 11px 16px; border:0; border-radius:0;
  background:rgba(255,255,255,.10); color:#fff;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  font-size:13px; letter-spacing:.08em;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.book.ak-quote .opt:hover span{ background:rgba(255,255,255,.22); transform:translateY(-2px); }
.book.ak-quote .opt input:checked + span{ background:var(--q-gold); color:var(--q-ink); transform:none; }
.book.ak-quote .opt input:focus-visible + span{ outline:0; box-shadow:inset 0 0 0 2px #fff; }

/* blueprint frame around the live diagram, with crop marks */
.book.ak-quote .q-art{
  position:relative; box-sizing:border-box; padding:16px;
  border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.14);
}
.book.ak-quote .q-art::before, .book.ak-quote .q-art::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border:2px solid var(--q-gold);
}
.book.ak-quote .q-art::before{ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.book.ak-quote .q-art::after{ bottom:-2px; right:-2px; border-left:0; border-top:0; }

/* dimension tag */
.book.ak-quote .booker-fig .corner{
  right:auto; left:34px; bottom:22px;
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; letter-spacing:.12em; color:#fff;
}
.book.ak-quote .booker-fig .corner::before{ content:""; width:34px; height:1px; background:var(--q-gold); }

/* body */
.book.ak-quote .booker-body{ padding:clamp(26px,3.4vw,42px); gap:28px; background:#d9d9d9; }
.book.ak-quote .inp{ gap:10px; font-size:13px; letter-spacing:.14em; color:var(--q-navy2); }
.book.ak-quote .inp input,
.book.ak-quote .inp select{
     border: 0;
    border-radius: 0;
    border-bottom: 1px solid #dddd;
    background: #f3f5f7;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--q-ink);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.book.ak-quote .inp input:hover,
.book.ak-quote .inp select:hover{ background:#eaeef2; border-color:var(--q-navy); }
.book.ak-quote .inp input:focus,
.book.ak-quote .inp select:focus{ background:#fff; border-color:var(--q-gold); box-shadow:0 6px 0 -3px var(--q-gold), 0 0 0 1px rgba(15,42,64,.12); }
.book.ak-quote .sel::after{ border-color:var(--q-navy); }

/* estimate readout */
.book.ak-quote .estimate{
position: relative;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: #f3f5f7;
    /* border-top: 4px solid var(--q-gold); */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.book.ak-quote .estimate div{ padding:24px 24px 26px; }
.book.ak-quote .estimate div + div{ border-left:1px solid rgba(255,255,255,.14); }
.book.ak-quote .estimate span{ font-size:12px; letter-spacing:.16em; }
.book.ak-quote .estimate div:first-child span::before{ border-radius:0; transform:rotate(45deg); }
.book.ak-quote .estimate b{ color:var(--q-gold); }
.book.ak-quote .note{ padding-left:14px; border-left:2px solid var(--q-gold); color:rgba(15,42,64,.7); }
.book.ak-quote .summary{ border-top:1px solid var(--q-navy); padding-top:24px; position:relative; }
.book.ak-quote .summary::before{ content:""; position:absolute; top:-1px; left:0; width:64px; height:3px; background:var(--q-gold); }
.book.ak-quote .summary output{ font-size:14px; letter-spacing:.14em; }
/* .book.ak-quote .booker .at-btn{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
} */

/* intro column: steps + spec sheet */
.book.ak-quote .book-intro{ position:relative; z-index:1; }
.book.ak-quote .book-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); background:#fff; max-width:420px; }
.book.ak-quote .book-steps li{ display:grid; gap:6px; padding:12px 14px 14px; }
.book.ak-quote .book-steps li + li{ border-left:1px solid rgba(15,42,64,.2); }
.book.ak-quote .book-steps b{ font-family:var(--at-ff-heading); font-weight:normal; font-size:22px; line-height:1; color:var(--q-gold); letter-spacing:.04em; }
.book.ak-quote .book-steps span{ font-size:12px; line-height:1.25; letter-spacing:.06em; text-transform:uppercase; color:var(--q-navy2); }
.book.ak-quote .specs dt::before{ border-radius:0; transform:rotate(45deg); }
.book.ak-quote .specs dt, .book.ak-quote .specs dd{ border-top-color:rgba(15,42,64,.22); }

@media (max-width:991px){
  .book.ak-quote{ --cut:22px; }
  .book.ak-quote .book-grid::before{ display:none; }
  .book.ak-quote .book-steps{ max-width:none; }
}
@media (max-width:767px){
  .book.ak-quote .booker-bar__r em{ display:none; }
  .book.ak-quote .booker-fig{ padding:26px 20px 64px; }
  .book.ak-quote .booker-fig .corner{ left:20px; }
}
@media (max-width:575px){
  .book.ak-quote .estimate{ clip-path:none; }
  .book.ak-quote .estimate div + div{ border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .book.ak-quote .booker-bar{ font-size:11px; letter-spacing:.1em; padding-left:18px; }
}



/* ===== CLIENTS / TRUSTED BY — matches .book / .courts / .sx-lined (same grid, ink, rule, gold, type) ===== */
.ak-clients{
    position: relative;
    background-color: #fff;
    background-image: linear-gradient(rgb(12 12 12 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(12 12 12 / 5%) 1px, transparent 1px);
    background-size: 48px 49px;
    background-position: 0 var(--gy, 0px);
    color: #161616;
}
.ak-clients__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px);
}
.ak-clients__head .ak-desc{ margin:0; max-width:40ch; }

/* logo wall: hairline cells on the 48px lattice */
.ak-clients__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgb(12 12 12 / 14%);
  border-left:1px solid rgb(12 12 12 / 14%);
  background:#fff;
}
.ak-clients__cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:clamp(96px,11vw,144px); padding:24px 28px;
  border-right:1px solid rgb(12 12 12 / 14%);
  border-bottom:1px solid rgb(12 12 12 / 14%);
  overflow:hidden; transition:background-color .35s ease;
}
.ak-clients__cell::after{          /* gold underline sweep, same accent as the quote form */
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--bw-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ak-clients__cell:hover{ background-color:#f7f7f5; }
.ak-clients__cell:hover::after{ transform:scaleX(1); }
.ak-clients__cell img{
  max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1);
   /* opacity:.6; */
  transition:filter .35s ease, opacity .35s ease;
}
.ak-clients__cell:hover img{ filter:none; opacity:1; }
.ak-clients__name{               /* text fallback if a logo file is missing */
  display:none; font-weight:500; font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.04em; text-transform:uppercase; color:#1a1a1a; text-align:center;
}
.ak-clients__cell.no-logo img{ display:none; }
.ak-clients__cell.no-logo .ak-clients__name{ display:block; }

.ak-clients__foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#1a1a1a;
}
.ak-clients__foot b{ color:var(--bw-accent); font-weight:600; }

@media (max-width:991px){ .ak-clients__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px){ .ak-clients__grid{ grid-template-columns:repeat(2,1fr); } .ak-clients__cell{ padding:18px; } }

/* ===========================================================
   MOBILE OVERFLOW FIX FOR .booker QUOTE FORM
   =========================================================== */

/* Ensure wrapper and form bounds stay within screen width */
@media (max-width: 767.98px) {
  .book.ak-quote {
    overflow-x: hidden;
  }

  .book.ak-quote .booker {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Reduce aggressive chamfer cut on tablets and mobiles */
    --cut: 16px;
  }

  /* Adjust top bar header padding & wrapping */
  .book.ak-quote .booker-bar {
    padding: 0 16px;
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Ensure sport option buttons wrap neatly */
  .book.ak-quote .opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .book.ak-quote .opt {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
  }

  .book.ak-quote .opt span {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 12px;
  }

  /* Form inputs fit container width */
  .book.ak-quote .booker-body {
    padding: 20px 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .book.ak-quote .inp input,
  .book.ak-quote .inp select {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 575.98px) {
  /* Flatten clip-path on extra small screens to prevent clipping content */
  .book.ak-quote .booker {
    clip-path: none;
    border-radius: 12px;
  }

  /* Full width option buttons on small devices */
  .book.ak-quote .opt {
    flex: 1 1 100%;
  }

  /* Estimate grid stacked neatly without overflow */
  .book.ak-quote .estimate {
    display: flex;
    flex-direction: column;
    clip-path: none;
    border-radius: 8px;
  }

  .book.ak-quote .estimate div {
    padding: 16px;
  }

  .book.ak-quote .estimate div + div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Ensure action submit button fits within parent */
  .book.ak-quote .summary button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}


/* ===========================================================
   AK Sports Infra — BLACK & WHITE layer (Fabrica-inspired)
   Load LAST (after ak-clients.css). Nothing else needs to change.
   1 Tokens  2 Dark scopes  3 Typography  4 Buttons  5 Sharp edges  6 Accent clean-up
   =========================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --bw-black: #0a0a0a;          /* Fabrica text token */
  --bw-white: #ffffff;
  --bw-g1: #f4f4f4;  --bw-g2: #e6e6e6;  --bw-g3: #8c8c8c;  --bw-g4: #4a4a4a;

  --bw-font: "Inter", "Inter Placeholder", sans-serif;
  /* Fabrica paragraph preset (read from DevTools): Inter, 16px, weight 500, line-height 140%, letter-spacing -.04em */
  --bw-fs-body: 16px;  --bw-lh-body: 1.4;  --bw-ls-body: -.04em;  --bw-fw-body: 500;
  --bw-ls-head: -.045em;  --bw-lh-head: 1.04;  --bw-fw-head: 500;
  --bw-h1: 60px;  --bw-h2: 60px;

  /* light-section button */
  --bw-btn-bg: var(--bw-black);  --bw-btn-fg: var(--bw-white);  --bw-btn-bd: var(--bw-black);
  --bw-btn-hbg: var(--bw-white); --bw-btn-hfg: var(--bw-black); --bw-btn-hbd: var(--bw-black);
  --ak-gold:#0a0a0a; --sx-gold:#0a0a0a; --at-theme-primary:#0a0a0a; --olive:#0a0a0a; --ak-lime-ink:#0a0a0a; --clay-deep:#0a0a0a; --ak-lime:#0a0a0a; --ak-amber:#0a0a0a; --butter:#0a0a0a; --ball:#0a0a0a; --clay:#0a0a0a; --q-gold:#0a0a0a; --akg-amber:#0a0a0a; --bw-accent:#0a0a0a; --bw-on-accent:#ffffff;
  --ak-navy: #0a0a0a;  --ak-navy-2: #1a1a1a;  --sx-navy: #0a0a0a;  --q-navy: #0a0a0a;  --q-navy2: #1a1a1a;
  --at-ff-body: var(--bw-font);  --at-ff-heading: var(--bw-font);  --display: var(--bw-font);
  --sx-sans: var(--bw-font);  --sx-serif: var(--bw-font);  --at-heading-font: var(--bw-font);
}

/* ---------- 2. DARK SCOPES: accents + buttons flip to white on black / photo backgrounds ---------- */
.ak-hero,
.sec-1-home-15,
.aks,
.akg,
.cta,
.footer-courts,
.akm-panel,
.akm-scrim,
.ak-quote .booker-bar {
  --ak-gold:#ffffff; --sx-gold:#ffffff; --at-theme-primary:#ffffff; --olive:#ffffff; --ak-lime-ink:#ffffff; --clay-deep:#ffffff; --ak-lime:#ffffff; --ak-amber:#ffffff; --butter:#ffffff; --ball:#ffffff; --clay:#ffffff; --q-gold:#ffffff; --akg-amber:#ffffff; --bw-accent:#ffffff; --bw-on-accent:#0a0a0a;
  /* buttons stay BLACK on dark sections too; a thin white outline keeps them visible, hover inverts to white */
  --bw-btn-bg: var(--bw-black);  --bw-btn-fg: var(--bw-white);  --bw-btn-bd: rgba(255,255,255,.55);
  --bw-btn-hbg: var(--bw-white); --bw-btn-hfg: var(--bw-black); --bw-btn-hbd: var(--bw-white);
}

/* ---------- 3. TYPOGRAPHY ---------- */
/* AK UPGRADE TYPOGRAPHY is scoped to unique hooks, so it can never leak into (or fight with) other site styles:
     .akup-root  -> <body>      : site font + base body text
     .akup-h     -> h1/h2/h3    : heading weight / tracking / leading
     .akup-h2    -> section h2s : 60px desktop size (NOT the About heading, which sizes itself)
     .akup-p     -> paragraphs  : body-copy leading / tracking
   :where(.akup-root) adds no specificity, so the font rule keeps exactly the weight it always had. */
html body:where(.akup-root), html body:where(.akup-root) :where(p, li, a, span, div, label, input, select, textarea, button, small, b, strong, em, dt, dd, td, th, figcaption, blockquote, h1, h2, h3, h4, h5, h6) {
  font-family: var(--bw-font) !important;
}

html body:where(.akup-root) { font-size: var(--bw-fs-body); line-height: var(--bw-lh-body); letter-spacing: var(--bw-ls-body); color: var(--bw-black); font-weight: var(--bw-fw-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* paragraphs: base rule has no !important (the site's own mobile rules win); the desktop rule keeps the original !important look */
.akup-p:not(.footer-courts__word) {
  line-height: var(--bw-lh-body); letter-spacing: var(--bw-ls-body); font-weight: var(--bw-fw-body);
}
@media (min-width: 768px) {
  html body .akup-p:not(.footer-courts__word) {
    line-height: var(--bw-lh-body) !important;
    letter-spacing: var(--bw-ls-body) !important;
    font-weight: var(--bw-fw-body);
  }
}

/* headings: weight + tracking everywhere; line-height and size are !important on desktop only,
   so the phone rules in index.html (28px / 1.12) are no longer overridden */
.akup-h { text-transform: none; line-height: 1; }
html body .akup-h { font-weight: 600 !important; letter-spacing: -.06em !important; }
html body h3.akup-h, html body h4.akup-h, html body h5.akup-h, html body h6.akup-h { letter-spacing: -.03em !important; }
h3.akup-h, h4.akup-h, h5.akup-h, h6.akup-h { line-height: 1.15; }
html body h1.akup-h, html body h2.akup-h { overflow-wrap: break-word; }
@media (min-width: 768px) {
  html body .akup-h { line-height: 1 !important; }
  html body h3.akup-h, html body h4.akup-h, html body h5.akup-h, html body h6.akup-h { line-height: 1.15 !important; }
  /* the 60px desktop heading size (every section h2 carrying .akup-h2) */
  html body .akup-h2 { font-size: 60px !important; }
}
html body .ak-hero .sec-1-home-15__headline { font-size: 100px; line-height: 1.02 !important; letter-spacing: var(--bw-ls-head) !important; }
html body .club h2#about-title { font-size: var(--bw-h2) !important; line-height: 1.02 !important; text-transform: none; }
@media (min-width: 768px) { html body :is(.footer-courts__heading, .sx-title, .sx-phil__h, .aks__title, .ak-muse__title, .akt__title, .cta__title) { line-height: var(--bw-lh-head) !important; } }

/* responsive scale: nothing overflows on smaller screens */
@media (max-width: 1399.98px) { :root { --bw-h1: 56px; --bw-h2: 56px; } }
@media (max-width: 1199.98px) { :root { --bw-h1: 48px; --bw-h2: 48px; } }
@media (max-width: 991.98px)  { :root { --bw-h1: 42px; --bw-h2: 42px; } }
@media (max-width: 767.98px)  { :root { --bw-h1: 36px; --bw-h2: 36px; } }
@media (max-width: 575.98px)  { :root { --bw-h1: 32px; --bw-h2: 32px; } }
@media (max-width: 380px)     { :root { --bw-h1: 29px; --bw-h2: 29px; } }
/* About h2 sits next to the big ball: below 992px keep its own container-query sizing so the line still fits */
@media (max-width: 991.98px) { html body .club h2#about-title { font-size: clamp(22px, calc(100cqw / 13.8), 96px) !important; } }

/* ---------- 4. BUTTONS: black (white on dark sections), square, readable ---------- */
html body .at-btn, html body .at-btn.ak-btn-orange, html body button.at-btn, html body .at-btn-group .at-btn, html body .at-btn-group.btn-brand-1 .at-btn,
html body .at-btn.btn-sm, html body .at-btn.active {
  background: var(--bw-btn-bg) !important; background-color: var(--bw-btn-bg) !important;
  border: none !important;
   color: var(--bw-btn-fg) !important;
  border-radius: 0 !important; font-weight: 500; letter-spacing: -.02em; text-transform: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
html body .at-btn :is(span, i, svg, path) { color: inherit; }
html body .at-btn svg path { fill: currentColor; }
html body .at-btn:is(:hover, :focus-visible), html body .at-btn.ak-btn-orange:is(:hover, :focus-visible) {
  background: var(--bw-btn-hbg) !important; background-color: var(--bw-btn-hbg) !important; color: var(--bw-btn-hfg) !important; border-color: var(--bw-btn-hbd) !important;
}
html body .at-btn.filter-btn { background: transparent !important; color: var(--bw-black) !important; border-color: var(--bw-g2) !important; }
html body .at-btn-circle { background: var(--bw-btn-bg) !important; color: var(--bw-btn-fg) !important; border: 1px solid var(--bw-btn-bd) !important; }

/* other button-like controls */
html body :is(.faq__tab, .opt span, .akt__arrow, .ak-hero__explore, .footer-courts__pills a, .ak-testi__arrow, .ak-testi__nav button, .sx-reserve, .back-to-top-btn, .akm-burger, input[type="submit"], button[type="submit"]) {
  border-radius: 0 !important;
}
html body .faq__tab[aria-pressed="true"], html body .faq__item.is-open .faq__i, html body .ak-quote .opt input:checked + span, html body .book.ak-quote .opt input:checked + span {
  background: var(--bw-black) !important; border-color: var(--bw-black) !important; color: var(--bw-white) !important;
}
html body :is(.ak-hero__explore, .footer-courts__pills a, .akt__arrow, .ak-testi__arrow, .ak-testi__nav button):is(:hover, :focus-visible) {
  background: var(--bw-white) !important; border-color: var(--bw-white) !important; color: var(--bw-black) !important;
}
html body .akt__arrow:is(:hover, :focus-visible) { background: var(--bw-white) !important; color: var(--bw-black) !important; }
html body .ak-marquee--gold { background: var(--bw-black) !important; color: var(--bw-white) !important; }
html.akm-open body .akm-burger { background: var(--bw-white) !important; color: var(--bw-black) !important; }
html body .aks__card.is-on .aks__lab span { background: var(--bw-white); color: var(--bw-black); }
html body .at-btn-border-white { background: transparent !important; border-color: var(--bw-white) !important; }

/* underline links: keep as they are, only the accent turns neutral */
html body .ak-link svg { color: currentColor !important; }
html body .ak-link:hover { border-bottom-color: currentColor !important; }

/* ---------- 5. SHARP EDGES ---------- */
/* everything square — except the ball artwork, its shadow, the cursor and the 3D court scene (round shapes that must stay round) */
html body *:not([class*="ball"]):not([class*="cursor"]):not([class*="trail"]):not(.akc-bs):not(.akc-b):not(.akc-b *):not(.akc-world):not(.akc-world *),
html body *:not([class*="ball"]):not([class*="cursor"]):not([class*="trail"]):not(.akc-bs):not(.akc-b):not(.akc-b *):not(.akc-world):not(.akc-world *)::before,
html body *:not([class*="ball"]):not([class*="cursor"]):not([class*="trail"]):not(.akc-bs):not(.akc-b):not(.akc-b *):not(.akc-world):not(.akc-world *)::after {
  /* border-radius: 0 !important; */
  border-radius: 0;
}
html body :is(input, select, textarea, .nice-select, .nice-select .list) { border-radius: 0 !important; }
html body img { border-radius: 0 !important; }

/* ---------- 6. ACCENT CLEAN-UP: former gold details -> black / white ---------- */
html body :is(.tag, .sx-sub, .sx-phil__lbl, .cta__eyebrow, .ak-clients__foot b, .akc-hud b, .faq__item.is-open .faq__n) { color: var(--bw-accent); }
html body .club :is(.tag, .club-intro .tag, .courts .tag) { color: var(--about-eb, rgb(var(--about-fg-rgb, 10 10 10))) !important; }
html body .ak-testi__dot.is-active, html body .akm-dots button[aria-current="true"] { background: var(--bw-accent) !important; }
html body :is(.akt__bar, .akc-hud__bar i, .aks__bar i, .cta__ch::before, .ak-clients__cell::after, .faq__item::before) { background: var(--bw-accent) !important; }
html body .ts__item:hover::before, html body .ts__item:hover::after { border-color: var(--bw-accent) !important; }
html body :is(.inp input:focus, .inp select:focus) { box-shadow: inset 0 -2px 0 var(--bw-black) !important; }
html body .estimate div:first-child span::before { background: var(--bw-black) !important; }
html body .footer-courts :is(.at-btn, .footer-courts__pills a) { border-radius: 0 !important; }

/* mobile off-canvas menu stays black / white */
html body .akm-panel { background: var(--bw-black) !important; color: var(--bw-white); }

/* section background only: the dark "Six ways" section is pure black (its court figures keep their blue / teal colours) */
html body .aks { background: var(--bw-black) !important; }
/* labels that used the old olive / gold accent */
/* html body :is(.ak-eyebrow, .inp, .toast, .courts .tag) { color: var(--bw-accent) !important; } */
/* placeholders + custom selects also use Inter */
html body :is(input, textarea, select)::placeholder { font-family: var(--bw-font) !important; }
html body :is(.nice-select, .nice-select .option, .nice-select .current) { font-family: var(--bw-font) !important; }
/* surface-palette swatches describe the real court surfaces, so they keep their original colours */
html body .swatches { --olive: #8c8c8c; }
.ak-services__intro .ak-btn{
  border: 1px solid #000 !important;
}

/* ===========================================================
   FINAL VISUAL PASS — paragraph greys, black & white only, About gap
   (appended last; nothing above this line was changed except hard-coded gold values)
   =========================================================== */

/* ---------- 1. PARAGRAPH COLOUR ---------- */
:root { --bw-p: #939393e6; --bw-p-dark: #ffffff57; }   /* paragraph text, a touch more subtle: light 100% -> 90%, dark 55% -> 49% */

/* dark sections: a mild grey instead of pure white */
.ak-hero, .sec-1-home-15, .aks, .akg, .cta, .footer-courts, .akm-panel, .akm-scrim, .ak-quote .booker-bar { --bw-p: var(--bw-p-dark); }

/* About + the Overview section before it change background on scroll, so their paragraph grey is driven by the same script
   (#939393 on white -> #b4b4b4 on the dark ball colour) */
.club { --bw-p: var(--about-p, rgb(var(--about-p-rgb, 91, 91, 91))); }
.sec-2-ak-overview { --bw-p: #939393e6; }

html body :is(p, .ak-desc, .ak-hero__sub, .ak-hero__aside, .akg__body, .sec-story__media-desc, .cta__copy, .cta__body, .aks__sub, .footer-courts__copy, .akm-panel__tag, .sec-2-ak-overview__body, .faq__a):not(.tag):not(.k):not(.yr):not(.ak-eyebrow):not(.akg__sport):not(.ak-muse__sub):not(.swatch-cap) { color: var(--bw-p) !important; }
html body .sec-2-ak-overview__info p { color: var(--bw-p) !important; }

/* ---------- 2. NO GOLD / OLIVE: the last hard-coded bits ---------- */
html body .ak-hero .ak-hero__systems-title { color: #ffffff !important; }
html body .ak-hero .ak-hero__eyebrow i { background: #ffffff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
html body .footer-courts__glow { background: radial-gradient(90% 90% at 78% 100%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,0) 72%) !important; }
html body .footer-courts__status i { background: #ffffff; }
html body .ak-testi__corner, html body .footer-courts__cap, html body .footer-courts__copy--tag { color: rgba(255,255,255,.7); }
html body .swatches { --olive: #8c8c8c; }
html body .ak-quote .inp input:focus, html body .ak-quote .inp select:focus { box-shadow: inset 0 -2px 0 #0a0a0a !important; }

/* ---------- PHILOSOPHY (sx-phil): large bold stacked heading (left) + bracket eyebrow (right) ---------- */
html body .sx-phil .sx-phil__h.akup-h2{
  font-size:clamp(36px,4.6vw,80px) !important; line-height:.92 !important;
  letter-spacing:-.045em !important; font-weight:600 !important;
  text-transform:uppercase !important; max-width:100% !important;
}
.sx-phil__h .ln{ display:block; }
.sx-phil__txt .ak-eyebrow{ margin:0 0 18px; }
@media (max-width:767.98px){
  html body .sx-phil .sx-phil__h.akup-h2{ font-size:clamp(38px,11vw,56px) !important; line-height:.95 !important; }
}

/* ---------- MUSE centre: eyebrow above the title ---------- */
.ak-muse__center .ak-eyebrow{ margin:0 auto 18px; }

/* ---------- SELECTED PROJECTS: eyebrow, category tabs, empty state ---------- */
.sx-head .ak-eyebrow{
   grid-column:1 / 3; 
  /* margin:0 0 14px; */
 }
/* category tabs: [<] [ scrolling row of square tabs ] [>] — same two columns as before; the active tab is a solid black tab */
.sx-cats{ grid-column:3 / 5; min-width:0; position:relative; display:flex; align-items:center; gap:10px; }
.sx-cats__track{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; padding:3px 2px 6px; scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; cursor:grab; }
.sx-cats__track::-webkit-scrollbar{ display:none; }
.sx-cats__track.is-dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
.sx-cats__set{ display:flex; width:max-content; gap:8px; }
.sx-cats__set button{ flex:0 0 auto; padding:11px 18px; border:1px solid var(--sx-rule); border-radius:0; background:transparent; cursor:pointer; white-space:nowrap;
  color:#6a6a6a; font:500 clamp(14px,1.15vw,17px)/1 var(--sx-sans); letter-spacing:-.01em;
  transition:color .3s ease, background-color .3s ease, border-color .3s ease; }
.sx-cats__set button:hover{ color:var(--sx-ink); border-color:var(--sx-ink); }
.sx-cats__set button[aria-pressed="true"]{ color:#fff; background:var(--sx-ink); border-color:var(--sx-ink); }
.sx-cats__set button:focus-visible{ outline:2px solid var(--sx-ink); outline-offset:-4px; }
.sx-cats__set button[aria-pressed="true"]:focus-visible{ outline-color:#fff; }
.sx-cats__nav{ flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--sx-rule); border-radius:0; background:transparent;
  color:var(--sx-ink); cursor:pointer; transition:color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease; }
.sx-cats__nav:hover:not(:disabled){ color:#fff; background:var(--sx-ink); border-color:var(--sx-ink); }
.sx-cats__nav:focus-visible{ outline:2px solid var(--sx-ink); outline-offset:2px; }
.sx-cats__nav:disabled{ opacity:.28; cursor:default; }
.sx-cats.is-static .sx-cats__nav{ display:none; }
/* filtering: the grid fades while the projects swap; its height is held constant (see the tabs script) so the page never shifts */
.sx-grid > li.is-filtered{ display:none !important; }
.sx-empty{ margin:calc(var(--u) / 2) 0; font:500 clamp(16px,1.4vw,20px)/1.3 var(--sx-sans); color:#6a6a6a; }
.sx-empty__all{ margin-left:.5em; padding:0 0 2px; border:0; border-bottom:1px solid currentColor; background:none; color:var(--sx-ink); font:inherit; cursor:pointer; }
.sx-empty__all:hover{ opacity:.65; }
@media (max-width:767.98px){
  .sx-head .ak-eyebrow{ grid-column:1; }
  .sx-cats{ grid-column:1; }
  .sx-cats__nav{ display:none; }                                  /* phones: swipe the row instead */
  .sx-grid + .akm-dots{ min-height:7px; }                         /* keep the dot row's height when no project matches, so the page height never changes */
  .sx-cats__set button{ padding:10px 16px; font-size:15px; }
}

/* ---------- BOOK / QUOTE: single-row scrollable sport options (mobile only) ---------- */
@media (max-width: 767.98px) {
  /* let the grid/fieldset parents shrink so the row can scroll instead of stretching the card */
  .book.ak-quote .booker-fig .field {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .book.ak-quote .booker-fig .field .opts {
    display: flex;
    flex-wrap: nowrap;                 /* never wrap */
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;             /* Firefox */
    padding: 4px 2px 6px;              /* room so focus outlines aren't clipped */
  }
  .book.ak-quote .booker-fig .field .opts::-webkit-scrollbar {
    display: none;                     /* Chrome / Safari */
  }

  /* each option keeps its natural width and stays on one line */
  .book.ak-quote .booker-fig .field .opts .opt {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
  }
  .book.ak-quote .booker-fig .field .opts .opt span {
    white-space: nowrap;
    width: auto;
  }
}

/* ---------- ABOUT: the empty space above the CTA is used by three short proof points ---------- */
.club .club-points { list-style: none; margin: 0 0 clamp(22px, 2.6vw, 36px) auto; padding: 0; flex: 0 0 100%; max-width: 680px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); text-align: left; }
.club .club-points li { padding-top: 16px; border-top: 1px solid rgb(var(--about-line-rgb, 12 12 12) / 24%); }
.club .club-points .n { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: rgb(var(--about-fg-rgb, 30, 30, 30)); }
html body .club .club-points h3 { margin: 0 0 8px; font-size: 20px !important; color: rgb(var(--about-fg-rgb, 30, 30, 30)); text-transform: none; }
html body .club .club-points p { margin: 0; font-size: 16px !important; line-height: 1.4 !important; }
@media (max-width: 1199.98px) {
  .club .club-points { grid-template-columns: minmax(0, 1fr); max-width: none; margin-left: 0; }
  .club .club-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; }
  .club .club-points li + li { border-top-color: rgb(var(--about-line-rgb, 12 12 12) / 24%); }
  .club .club-points .n { margin: 3px 0 0; }
}

/* ---------- DARK SECTIONS: reference text colours (paragraph var(--bw-p-dark), eyebrow #ffffff) ---------- */
/* Philosophy (sx-phil): the eyebrow was being dimmed by the paragraph rule, keep it white */
html body .sx-phil .sx-phil__r .sx-phil__txt p.ak-eyebrow { color: #ffffff !important; }
html body .sx-phil .sx-phil__r .sx-phil__txt p:not(.ak-eyebrow) { color: var(--bw-p-dark) !important; }
/* AKS stack: head paragraphs + caption description */
html body .aks .aks__head p.aks__sub, html body .aks .aks__cap span { color: var(--bw-p-dark) !important; }
/* Story media description */
html body .sec-story__media-desc { color: var(--bw-p-dark) !important; }
/* CTA body + footer-courts descriptions */
html body .cta .cta__body p.cta__copy, html body .footer-courts p.footer-courts__copy, html body .footer-courts__copy--tag { color: var(--bw-p-dark) !important; }

/* ---------- ARCS: moved from the Services corner to the FAQ section (sits in the empty space under the left column) ---------- */
.faq#faq{ isolation:isolate; }
@media (max-width:991.98px){
  .faq .ak-arcs{ width:44vw !important; min-width:160px; opacity:.1 !important; }
}
.faq .ak-arcs{
  filter: grayscale(1);
}

/* ---------- FOOTER WORDMARK: sits on the bottom edge, its lower edge slightly cropped by the screen ---------- */
/* the footer forces "translate:none !important" on its reveal elements, so the word is lowered with a relative offset instead.
   The zone around it already clips (overflow:hidden); the offset is a fraction of the word's own font-size (fitted by script),
   so the crop stays the same at every width. Bigger number = more hidden. */
html body .footer-courts__wordzone .footer-courts__word{ position:relative; top:.27em; }

/* ===========================================================
   FINAL ADJUSTMENTS
   1) arrow cursor on the social links  2) client logos inside About  3) Selected Projects: View more / View less
   =========================================================== */

/* ---------- 1. ARROW CURSOR over .sx-social a ----------
   The eased dot hides, the ring grows into a solid disc and an arrow slides in. Same blend mode as the rest of the cursor, so it
   inverts whatever is underneath (works on light and dark sections). Only exists where the custom cursor runs (mouse devices). */
.plm-cursor-ring{ transition: width .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), background-color .3s ease, border-color .3s ease; }
.plm-cursor-arrow{
  position:fixed; top:0; left:0; z-index:10002; pointer-events:none;
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  color:#fff; mix-blend-mode:difference; transform:translate(-50%,-50%);
}
.plm-cursor-arrow i{
  display:block; width:26px; height:26px; opacity:0;
  transform:translate(-10px,10px) scale(.4); transition:opacity .25s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.plm-cursor-arrow svg{ display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:square; stroke-linejoin:miter; }
html.plm-cursor-arrow-on .plm-cursor-dot{ width:0 !important; height:0 !important; }
html.plm-cursor-arrow-on .plm-cursor-ring{ width:64px; height:64px; background:#fff; border-color:#fff; }
html.plm-cursor-arrow-on .plm-cursor-arrow i{ opacity:1; transform:none; }
html:not(.plm-cursor-on) .plm-cursor-arrow{ display:none; }
/* if the custom cursor is not running, the browser cursor becomes an arrow instead */
html:not(.plm-cursor-on) .sx-social a{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3Cpath d='M10 22 22 10M12.5 10H22v9.5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer; }

/* ---------- 2. ABOUT: transparent, single-line, logo-only marquee (takes the place of the three proof points) ----------
   No plate, border, title or text: just the logos sliding on one line. Client Partnership (#clients) is a separate section. */
.club .club-logos{ flex:0 0 100%; min-width:0; max-width:680px; margin:0 0 clamp(22px,2.6vw,36px) auto; padding:0; overflow:hidden; background:none; border:0; box-shadow:none; }
.club .club-logos__track{ display:flex; flex-wrap:nowrap; width:max-content; animation:clubLogosRun var(--cl-speed,40s) linear infinite; will-change:transform; }
.club .club-logos__group{ display:flex; flex:none; flex-wrap:nowrap; align-items:center; gap:clamp(36px,4vw,56px); margin:0; padding:0 clamp(36px,4vw,56px) 0 0; list-style:none; }
.club .club-logos__group li{ flex:none; display:flex; align-items:center; margin:0; padding:0; background:none; border:0; }
.club .club-logos__group img{ display:block; width:auto; height:44px; max-width:none; object-fit:contain; background:none; border:0; box-shadow:none; filter:none; opacity:1; }
.club .club-logos__group img[src*="ak-client-l-03"]{ height:auto; width:132px; }
.club .club-logos.is-off .club-logos__track{ animation-play-state:paused; }
@keyframes clubLogosRun{ to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){
  .club .club-logos__track{ animation:none; }
  .club .club-logos{ overflow-x:auto; scrollbar-width:none; }
  .club .club-logos::-webkit-scrollbar{ display:none; }
}
/* Client Partnership: the rows are driven by script (random order); without script the original CSS loop still runs */
.ts.is-rand .ts__track{ animation:none !important; }
.ts.is-rand .ts__group{ padding-right:0; }
/* buttons row */
.club .club-cta__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:inherit; gap:16px 28px; }
@media (max-width:1199.98px){
  .club .club-logos{ max-width:none; margin-left:0; }
}
@media (max-width:767.98px){
  /* the logos get a full-width row of their own; only the two buttons keep the one-line sideways scroller */
  html body .club .club-cta{ flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; overflow:visible !important; gap:24px !important; padding-bottom:0; }
  html body .club .club-cta > *{ flex:0 0 auto !important; white-space:normal; max-width:100%; }
  html body .club .club-logos{ width:100%; margin:0; max-width:100%; }
  html body .club .club-cta__actions{
    flex-wrap:nowrap; justify-content:flex-start; gap:12px 20px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
  }
  html body .club .club-cta__actions::-webkit-scrollbar{ display:none; }
  html body .club .club-cta__actions > *{ flex:0 0 auto; white-space:nowrap; }
}

/* ---------- 3. SELECTED PROJECTS: View more / View less ---------- */
.sx-grid > li.is-capped{ display:none !important; }
.sx-more{ display:flex; justify-content:center; margin:clamp(28px,4vw,48px) 0 0; }
.sx-more[hidden], .sx-more__btn[hidden]{ display:none !important; }
html body .sx-more__btn{ cursor:pointer; }
.sx-grid > li.is-revealed{ animation:sxMoreIn .75s var(--sx-ease, cubic-bezier(.16,1,.3,1)) both; animation-delay:calc(var(--rv,0) * 70ms); }
@keyframes sxMoreIn{ from{ opacity:0; translate:0 26px; } to{ opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:reduce){ .sx-grid > li.is-revealed{ animation:none; } }
@media (max-width:767.98px){ .sx-more{ margin-top:22px; } }/* ===========================================================
   AK Sports Infra — upgrade layer
   Load AFTER main.css and sticky-cards.css. Nothing in main.css is edited.
   1 Fonts   2 Scroll animations   3 Marquee bands   4 Draggable ball
   5 Testimonials   6 Enquiry (quote) form look
   =========================================================== */

/* ---------- 1. FONTS: Inter (Fabrica), headings + body ---------- */
:root, body {
  --at-ff-body: "Inter", "Inter Placeholder", sans-serif;
  --at-ff-heading: "Inter", "Inter Placeholder", sans-serif;
  --display: var(--at-ff-heading);
  --ak-navy: #0a0a0a;
  --ak-navy-2: #1a1a1a;
  --ak-gold: #0a0a0a;
}
body { font-family: var(--at-ff-body); }
/* condensed type wants a little air and a bigger size than DM Sans did */
.ak-hero .sec-1-home-15__headline { font-size: 104px; line-height: .98; letter-spacing: .005em; }
.club h2 { font-size: clamp(46px, 7.6vw, 116px); letter-spacing: .005em; line-height: .92; }
.footer-courts__heading { letter-spacing: .005em; }
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .ak-hero .sec-1-home-15__headline { font-size: 68px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 574.98px) {
  .ak-hero .sec-1-home-15__headline { font-size: 46px; }
}

/* ---------- 2. SCROLL ANIMATIONS: headings + images fade in from left / right / up ---------- */
/* uses the individual `translate` property, so it never fights GSAP / existing transforms */
html.ak2 [data-ak]:not(.ak-in) { opacity: 0; will-change: opacity, translate; }
html.ak2 [data-ak="left"]:not(.ak-in)  { translate: -72px 0; }
html.ak2 [data-ak="right"]:not(.ak-in) { translate: 72px 0; }
html.ak2 [data-ak="up"]:not(.ak-in)    { translate: 0 44px; }
html.ak2 [data-ak="fade"]:not(.ak-in)  { translate: 0 0; }
html.ak2 [data-ak] {
  transition: opacity .9s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--akd, 0ms);
}

/* ---------- 3. MARQUEE BANDS ---------- */
.ak-marquee { position: relative; overflow: hidden; z-index: 3; padding: clamp(16px, 2vw, 28px) 0; user-select: none; }
.ak-marquee--gold { background: var(--ak-gold); color: var(--ak-navy); }
.ak-marquee--navy { background: var(--ak-navy); color: #fff; }
.ak-marquee__track { display: flex; width: max-content; animation: akMarquee var(--ak-speed, 46s) linear infinite; }
.ak-marquee--rev .ak-marquee__track { animation-direction: reverse; }
.ak-marquee:hover .ak-marquee__track { animation-play-state: paused; }
.ak-marquee__group { display: flex; align-items: center; flex-shrink: 0; margin: 0; padding: 0 clamp(20px, 3vw, 44px) 0 0; list-style: none; gap: clamp(20px, 3vw, 44px); }
.ak-marquee__group li {
display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    white-space: nowrap;
    font-family: var(--at-ff-heading);
    /* font-weight: normal;
    font-style: italic; */
    text-transform: uppercase;
    font-size: 28px;
    line-height: 1;
    letter-spacing: .01em;
}
.ak-marquee__group li::after {                /* ball separator */
  content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0 18%, transparent 19%), currentColor;
  opacity: .9;
}
.ak-marquee--navy .ak-marquee__group li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }
.ak-marquee--navy .ak-marquee__group li::after { color: var(--ak-gold); }
@keyframes akMarquee { to { transform: translateX(-50%); } }

/* ---------- 4. DRAGGABLE BIG BALL ---------- */
.ak-ball-js .ball-stage { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: 0; }
.ak-ball-js .ball-stage.is-dragging { cursor: grabbing; }
.ak-ball-js .ball-stage:focus-visible { outline: 2px solid var(--ak-gold); outline-offset: 12px; border-radius: 50%; }
.ak-ball-js .big-ball {
  animation: none; opacity: 0; pointer-events: none; -webkit-user-drag: none;
  transition: transform .75s cubic-bezier(.2, .9, .2, 1), opacity .5s ease;
  will-change: transform, opacity;
}
.ak-ball-js .ball-stage.is-dragging .big-ball { transition: none; }

/* ---------- 5. TESTIMONIALS — "sideline scoreboard" ---------- */
.ak-testi.akt { background: var(--ak-navy); color: #fff; padding-block: clamp(72px, 9vw, 140px); }
.akt::before {                                   /* faint court-line grid */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
}
.akt__frame { position: relative; z-index: 2; display: grid; gap: clamp(36px, 5vw, 72px); }
.akt__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.akt__eyebrow { margin: 0 0 18px; font: 600 13px/1 var(--at-ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--butter, #ffffff); }
.akt__title.ak-heading { margin: 0; color: #fff; font-family: var(--at-ff-heading); font-weight: normal; font-size: clamp(46px, 6.6vw, 108px); line-height: .9; text-transform: uppercase; letter-spacing: .005em; }
.akt__title.ak-heading .dim { color: rgba(255,255,255,.45); }
.akt__ctrl { display: flex; align-items: center; gap: 16px; }
.akt__count { font: 600 14px/1 var(--at-ff-body); letter-spacing: .12em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.akt__arrow {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.akt__arrow:hover, .akt__arrow:focus-visible { background: var(--ak-gold); border-color: var(--ak-gold); color: var(--ak-navy); outline: 0; }
.akt__board { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; border-top: 1px solid rgba(255,255,255,.2); }
.akt__list { list-style: none; margin: 0; padding: 0; border-right: 1px solid rgba(255,255,255,.2); }
.akt__tab {
  position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 6px; align-items: baseline;
  padding: 30px 28px 30px 0; margin: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.2);
  background: none; color: #fff; text-align: left; cursor: pointer; opacity: .5; transition: opacity .4s ease, padding .5s cubic-bezier(.16,1,.3,1);
}
.akt__tab:hover, .akt__tab:focus-visible { opacity: .85; outline: 0; }
.akt__tab[aria-selected="true"] { opacity: 1; padding-left: 14px; }
.akt__num { font: 600 13px/1 var(--at-ff-body); letter-spacing: .1em; color: var(--ak-gold); }
.akt__name { font: 700 clamp(26px, 2.6vw, 40px)/1 var(--at-ff-heading); text-transform: uppercase; letter-spacing: .01em; }
.akt__sport { grid-column: 2; font: 500 12px/1 var(--at-ff-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.akt__bar { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--ak-gold); transform: scaleX(0); transform-origin: 0 50%; }
.akt__tab[aria-selected="true"] .akt__bar { animation: aktBar var(--akt-delay, 6500ms) linear forwards; }
.akt.is-paused .akt__bar { animation-play-state: paused; }
@keyframes aktBar { to { transform: scaleX(1); } }

.akt__stage { position: relative; display: grid; overflow: hidden; min-height: clamp(440px, 42vw, 560px); padding: clamp(28px, 4vw, 60px) 0 0 clamp(24px, 4.5vw, 84px); touch-action: pan-y; }
.akt__slide {
  grid-area: 1 / 1; margin: 0; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  opacity: 0; visibility: hidden; translate: calc(var(--akdir, 1) * 56px) 0;
  transition: opacity .55s ease, translate .9s cubic-bezier(.16,1,.3,1), visibility 0s linear .9s;
}
.akt__slide.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .7s ease .1s, translate 1s cubic-bezier(.16,1,.3,1) .1s, visibility 0s; }
.akt__slide.is-out { translate: calc(var(--akdir, 1) * -56px) 0; }
.akt__court { position: absolute; right: -4%; bottom: -8%; width: min(560px, 78%); opacity: .11; pointer-events: none; fill: none; stroke: #fff; stroke-width: 2; }
.akt__quote { position: relative; margin: 0; z-index: 1; }
.akt__quote::before { content: "\201C"; display: block; height: .5em; font: 800 italic clamp(90px, 10vw, 150px)/1 var(--at-ff-heading); color: var(--ak-gold); }
.akt__quote p { margin: 0; max-width: 14ch; font: 600 italic clamp(44px, 5.6vw, 88px)/.96 var(--at-ff-heading); text-transform: uppercase; letter-spacing: .005em; color: #fff; }
.akt__body { position: relative; z-index: 1; margin: 22px 0 0; max-width: 52ch; font: 400 18px/1.6 var(--at-ff-body); color: rgba(255,255,255,.78); }
.akt__foot { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; padding-bottom: 8px; }
.akt__avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ak-gold); font: 700 20px/1 var(--at-ff-heading); letter-spacing: .04em; color: var(--butter, #ffffff); }
.akt__who { display: grid; gap: 4px; }
.akt__who strong { font: 600 20px/1 var(--at-ff-heading); letter-spacing: .06em; text-transform: uppercase; }
.akt__who span { font: 400 14px/1.2 var(--at-ff-body); color: rgba(255,255,255,.65); }
.akt__tags { display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; }
.akt__tags span { padding: 7px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font: 500 12px/1 var(--at-ff-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
@media (max-width: 991px) {
  .akt__board { grid-template-columns: 1fr; }
  .akt__list { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .akt__list::-webkit-scrollbar { display: none; }
  .akt__list li { flex: none; scroll-snap-align: start; }
  .akt__tab { width: auto; padding: 18px 26px 18px 0; border-bottom: 0; }
  .akt__tab[aria-selected="true"] { padding-left: 0; }
  .akt__sport { display: none; }
  .akt__stage { padding-left: 0; }
  .akt__tags { margin-left: 0; }
}
@media (max-width: 575px) {
  .akt__arrow { width: 44px; height: 44px; }
  .akt__quote p { max-width: none; }
}

/* ---------- 6. ENQUIRY FORM — scoreboard look (markup and IDs untouched) ---------- */
.ak-quote .booker { border: 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(15,42,64,.45), 0 0 0 1px rgba(15,42,64,.08); }
.ak-quote .booker-fig { padding: 30px 30px 56px; }
.ak-quote .booker-fig::before {                  /* court-line texture over the colour panel */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ak-quote .booker-fig > * { position: relative; z-index: 1; }
.ak-quote .booker-fig .corner { position: absolute; font-family: var(--at-ff-heading); font-weight: normal; font-size: 15px; letter-spacing: .08em; }
.ak-quote .field legend { font-family: var(--at-ff-heading); font-weight: normal; font-size: 18px; letter-spacing: .1em; }
.ak-quote .opt span { padding: 10px 18px; font-family: var(--at-ff-heading); font-weight: normal; font-size: 17px; letter-spacing: .06em; }
.ak-quote .opt input:checked + span { background: var(--ak-gold); border-color: var(--ak-gold); color: var(--ak-navy); }
.ak-quote .opt input:checked + span small { opacity: .8; }
.ak-quote .booker-body { padding: clamp(24px, 3.4vw, 40px); gap: 26px; background: #fff; }
.ak-quote .inp { font-family: var(--at-ff-heading); font-weight: normal; font-size: 14px; letter-spacing: .1em; color: var(--ak-navy-2); }
.ak-quote .inp input, .ak-quote .inp select { background: #f1f4f7; border: 1.5px solid transparent; border-radius: 12px; padding: 15px 18px; }
.ak-quote .inp input:hover, .ak-quote .inp select:hover { border-color: rgba(15,42,64,.25); }
.ak-quote .inp input:focus, .ak-quote .inp select:focus { background: #fff; border-color: var(--ak-gold); box-shadow: 0 0 0 4px rgba(10,10,10,.14); }
.ak-quote .estimate { background: var(--ak-navy); border: 0; border-radius: 16px; overflow: hidden; }
.ak-quote .estimate div { padding: 22px 22px 20px; }
.ak-quote .estimate div + div { border-left: 1px solid rgba(255,255,255,.12); }
.ak-quote .estimate span { color: rgb(0 0 0 / 60%);
    font-family: var(--at-ff-heading);
    font-weight: normal;
    font-size: 16px;
    letter-spacing: .12em;}
.ak-quote .estimate b { color: var(--butter, #ffffff); font-family: var(--at-ff-heading);  font-size:32px; letter-spacing: 0; }
.ak-quote .note { font-size: 16px; line-height: 1.5; color: rgba(15,42,64,.7); }
.ak-quote .summary { border-top: 1px dashed rgba(15,42,64,.25); }
.ak-quote .summary output { font-family: var(--at-ff-heading); font-weight: normal; font-size: 14px; letter-spacing: .1em; color: var(--ak-navy); }
.ak-quote .booker .at-btn { border-radius: 999px; }
/* intro column: spec sheet rows */
.ak-quote .specs { gap: 0; }
.ak-quote .specs dt, .ak-quote .specs dd { padding: 14px 0; border-top: 1px solid rgba(15,42,64,.16); }
.ak-quote .specs dt { display: flex; align-items: center; gap: 10px; font-family: var(--at-ff-heading); font-weight: normal; font-size: 14px; letter-spacing: .12em; color: var(--ak-navy-2); }
.ak-quote .specs dt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-gold); }
.ak-quote .specs dd { font-size: 15px; padding-left: 20px; }
@media (max-width: 575px) { .ak-quote .estimate { grid-template-columns: 1fr; } .ak-quote .estimate div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ak2 [data-ak] { opacity: 1 !important; translate: none !important; transition: none !important; }
  .ak-marquee__track { animation: none; }
  .akt__bar { animation: none !important; }
}

/* ===========================================================
   AK Sports Infra — three new sections
   1 Selected Works (Grid / List / Feed / Full)   2 Now booking (list rows)   3 Philosophy (split)
   Load AFTER main.css and ak-upgrade.css. Nothing in those files is edited.
   All rules are scoped to .sx-* (plus one small grid-sync rule for .courts).
   =========================================================== */
:root{
  --u:48px;                                   /* the site's grid pitch */
  --sx-ink:#161616;
  --sx-mute:#b7b7b7;
  --sx-rule:rgb(12 12 12 / 14%);
  --sx-navy:#1a1a1a;
  --sx-gold:#0a0a0a;
  --sx-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- THE SHARED GRID ----------
   Same 5% lines, same 48px pitch as .courts / .book / body. JS sets --gy so each section's
   lines start on the page-wide lattice, which makes them join up across section edges. */
.courts,
.sx-lined{
  background-image:
    linear-gradient(rgb(12 12 12 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(12 12 12 / 5%) 1px, transparent 1px);
  background-size:48px 48px;
  background-position:0 var(--gy,0px);
}
.sx-lined{ position:relative; background-color:#fff; color:var(--sx-ink); font-family:var(--sx-sans); }
/* .sx-first{ padding-top:calc(var(--u) * 3 + var(--gy,0px)); }       */
/* .sx-works{ padding-bottom:calc(var(--u) * 3 + var(--gb,0px)); } */
.sx-book { padding-top:calc(var(--u) * 3); padding-bottom:calc(var(--u) * 3 + var(--gb,0px)); }
.sx-wrap{ width:min(1376px, calc(100% - 48px)); margin-inline:auto; }
.sx-wrap--mid{ width:min(1180px, calc(100% - 48px)); }

/* scroll-in (only active when JS adds html.sx-on) */
html.sx-on .sx-rv{ opacity:0; translate:0 34px; transition:opacity .9s ease, translate 1.1s var(--sx-ease); transition-delay:calc(var(--d,0) * 90ms); }
html.sx-on .sx-rv.is-in{ opacity:1; translate:0 0; }

/* =========================================================== 1. SELECTED WORKS */
.sx-meta{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; height:var(--u); font:16px;color: #939393;  }
.sx-meta a{ color:inherit; text-decoration:none; }
.sx-meta nav{ display:flex; gap:12px; }
.sx-meta nav a{ padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .3s ease; }
.sx-meta nav a.is-on, .sx-meta nav a:hover{ border-bottom-color:currentColor; }
.sx-meta__cta{ justify-self:end; border-bottom:1px solid transparent; transition:border-color .3s ease; }
.sx-meta__cta:hover{ border-bottom-color:currentColor; }

.sx-head{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; margin-top:var(--u); min-height:calc(var(--u) * 4);padding-bottom: 70px; }
.sx-title{ grid-column:1 / 3; margin:0;  letter-spacing:-.05em; color:var(--sx-ink); }
.sx-title sup{ position:relative; top:.08em; margin-left:.05em; font-size:.34em; font-weight:500; letter-spacing:0; vertical-align:top; }
.sx-lede{ grid-column:3; margin:.9em 0 0; max-width:30ch; font-size:16px; color:#575757; }
.sx-social{ grid-column:4; justify-self:end; display:flex; gap:20px; margin:.9em 0 0; padding:0; list-style:none; font:400 11px/1 var(--sx-sans); }
.sx-social a{ color:#575757; text-decoration:none; transition:color .3s ease;font-size: 16px; }
.sx-social a:hover{ color:var(--sx-ink); }

.sx-bar{ display:grid; grid-template-columns:repeat(4,1fr); align-items:end; height:calc(var(--u) * 2); padding-bottom:calc(var(--u) / 3); }
.sx-sub{ grid-column:1 / 3; margin:0; font:500 clamp(22px,2.2vw,32px)/1 var(--sx-sans); letter-spacing:-.025em; }
.sx-sub sup{ position:relative; top:-.2em; margin-left:.14em; font-size:.42em; letter-spacing:0; color:#6f6f6f; vertical-align:top; }
.sx-views{ grid-column:3 / 5; display:flex; justify-content:space-between; }
.sx-views button{
  padding:0; border:0; background:none; cursor:pointer; color:var(--sx-mute);
  font:500 clamp(18px,2vw,30px)/1 var(--sx-sans); letter-spacing:-.025em; transition:color .3s ease;
}
.sx-views button:hover{ color:#777; }
.sx-views button[aria-pressed="true"]{ color:var(--sx-ink); }
.sx-views button:focus-visible{ outline:2px solid var(--sx-ink); outline-offset:6px; }

/* ---- the grid of works ---- */
.sx-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; transition:opacity .22s ease, translate .22s ease; }
.sx-grid.is-swap{ opacity:0; translate:0 10px; }
.sx-grid li{ min-width:0; }
.sx-item{ position:relative; margin:0; display:block; }
.sx-fig{ position:relative; aspect-ratio:1 / .97; overflow:hidden; background:#dcdcdc; }
.sx-img, .sx-art{ position:absolute; inset:0; display:block; background-size:cover; background-position:center; transition:transform 1.2s var(--sx-ease); }
.sx-art{ background-color:var(--c,#2f5a8a); background-image:linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.14)); }
.sx-art svg{ display:block; width:100%; height:100%; }
.sx-item:hover .sx-img, .sx-item:hover .sx-art{ transform:scale(1.05); }
.sx-cap{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:12px; padding:34px 14px 12px; color:#fff; font-size:20px;
  background:linear-gradient(transparent, rgba(0,0,0,.55)); opacity:0; translate:0 8px; transition:opacity .4s ease, translate .6s var(--sx-ease); pointer-events:none; }
.sx-item:hover .sx-cap, .sx-item:focus-within .sx-cap{ opacity:1; translate:0 0; }
.sx-no, .sx-cat{ display:none; }

/* LIST */
.sx-grid[data-view="list"]{ grid-template-columns:1fr; gap:0; }
.sx-grid[data-view="list"] li{ border-top:1px solid var(--sx-rule); }
.sx-grid[data-view="list"] li:last-child{ border-bottom:1px solid var(--sx-rule); }
.sx-grid[data-view="list"] .sx-item{ display:grid; grid-template-columns:repeat(4,1fr); align-items:center; min-height:calc(var(--u) * 2); transition:background-color .3s ease; }
.sx-grid[data-view="list"] .sx-item:hover{ background:rgb(12 12 12 / 3%); }
.sx-grid[data-view="list"] .sx-cap{ display:contents; }
.sx-grid[data-view="list"] .sx-no{ display:block; grid-column:1; grid-row:1; font:500 11px/1 var(--sx-sans); color:#777; }
.sx-grid[data-view="list"] .sx-name{ grid-column:1; grid-row:1; padding-left:56px; font:500 clamp(20px,2.2vw,32px)/1 var(--sx-sans); letter-spacing:-.025em; color:var(--sx-ink); }
.sx-grid[data-view="list"] .sx-cat{ display:block; grid-column:3; grid-row:1; font:400 12px/1 var(--sx-sans); color:#555; }
.sx-grid[data-view="list"] .sx-yr{ grid-column:4; grid-row:1; justify-self:end; padding-right:calc(clamp(88px,10vw,150px) + 24px); font:400 12px/1 var(--sx-sans); color:#555; }
.sx-grid[data-view="list"] .sx-fig{ position:absolute; right:0; top:50%; translate:0 -50%; width:clamp(88px,10vw,150px); aspect-ratio:4 / 3; }

/* FEED */
.sx-grid[data-view="feed"]{ grid-template-columns:minmax(0,560px); justify-content:center; gap:calc(var(--u) * 1); }
.sx-grid[data-view="feed"] .sx-fig{ aspect-ratio:4 / 5; }
.sx-grid[data-view="feed"] .sx-cap{ position:static; display:grid; grid-template-columns:1fr auto auto; gap:18px; padding:14px 0 0; color:var(--sx-ink); background:none; opacity:1; translate:0 0; font-size:19px; }
.sx-grid[data-view="feed"] .sx-cat{ display:block; color:#6a6a6a; }

/* FULL */
.sx-grid[data-view="full"]{ grid-template-columns:1fr; gap:2px; }
.sx-grid[data-view="full"] .sx-fig{ aspect-ratio:21 / 9; }
.sx-grid[data-view="full"] .sx-cap{ opacity:1; translate:0 0; padding:70px clamp(16px,2vw,32px) 20px; font-size:clamp(14px,1.3vw,18px); letter-spacing:-.01em; }
.sx-grid[data-view="full"] .sx-cat{ display:block; opacity:.85; margin-left:auto; margin-right:26px; }

/* =========================================================== 2. NOW BOOKING */
.sx-eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; height:var(--u); margin:0; font:500 9px/1 var(--sx-sans); letter-spacing:.22em; text-transform:uppercase; color:var(--sx-navy); }
.sx-eyebrow i{ position:relative; width:11px; height:11px; border:1px solid var(--sx-gold); border-radius:50%; }
.sx-eyebrow i::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sx-gold); }
.sx-h2{ margin:var(--u) auto 0; max-width:17em; text-align:center; font:400 clamp(36px,4.8vw,70px)/1.06 var(--sx-serif); letter-spacing:-.012em; color:var(--sx-navy); }
.sx-p{ margin:var(--u) auto calc(var(--u) * 2); max-width:48ch; text-align:center; font:400 12px/1.65 var(--sx-sans); color:#4d4d4d; }
.sx-rows{ margin:0; padding:0; list-style:none; border-bottom:1px solid var(--sx-rule); }
.sx-row{ display:grid; grid-template-columns:1.1fr .8fr 1.1fr; column-gap:clamp(24px,5vw,80px); align-items:center; min-height:calc(var(--u) * 4); border-top:1px solid var(--sx-rule); transition:background-color .4s ease; }
.sx-row:hover{ background:rgb(24 62 93 / 3%); }
.sx-city{ margin:0 0 14px; font:400 clamp(26px,2.5vw,38px)/1 var(--sx-serif); text-transform:uppercase; letter-spacing:.01em; color:var(--sx-navy); }
.sx-when{ margin:0 0 4px; font:500 11px/1.5 var(--sx-sans); color:#3f3f3f; }
.sx-when--mute{ font-weight:400; color:#8a8a8a; }
.sx-thumb{ position:relative; width:100%; max-width:230px; aspect-ratio:1.25; margin-inline:auto; overflow:hidden; background:#ddd; }
.sx-art--thumb{ transition:transform 1.2s var(--sx-ease); }
.sx-row:hover .sx-art--thumb{ transform:scale(1.07); }
.sx-row__r p{ margin:0; max-width:34ch; font:400 11px/1.6 var(--sx-sans); color:#4a4a4a; }
.sx-reserve{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; font:600 9px/1 var(--sx-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--sx-navy); text-decoration:none; }
.sx-reserve svg{ transition:translate .5s var(--sx-ease); }
.sx-reserve:hover svg{ translate:5px 0; }

/* =========================================================== 3. PHILOSOPHY */
.sx-phil{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; padding:0; background-position:0 var(--gy,0px); }
.sx-phil__l{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--u) * 2) clamp(24px,4.4vw,72px);background: #d9d9d9; }
.sx-phil__mark{ position:absolute; left:clamp(24px,4.4vw,72px); top:var(--u); font:400 10px/1 var(--sx-sans); color:#555; letter-spacing:.04em; }
.sx-phil__h{ margin:0; max-width:9.4em; line-height:1; text-transform:uppercase; letter-spacing:-.005em; color:#161616; }
.sx-phil__thumb{ position:absolute; left:0; bottom:calc(var(--u) * 2); width:clamp(64px,7.4vw,118px); aspect-ratio:1 / 1.1; background-size:cover; background-position:center; }
.sx-phil__r{ position:relative; overflow:hidden; display:flex; align-items:center; background:#070707; color:#fff; padding:calc(var(--u) * 2) clamp(24px,6vw,96px); }
.sx-phil__bg{ position:absolute; inset:-4%; background-size:cover; background-position:center; filter:grayscale(1) contrast(1.25) brightness(.5); transform:scale(1.06); transition:transform 2.4s var(--sx-ease); }
.sx-phil__r:hover .sx-phil__bg{ transform:scale(1); }
.sx-phil__r::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(110% 90% at 20% 30%, rgba(0,0,0,.15), rgba(0,0,0,.78) 100%), linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)); }
.sx-phil__txt{ position:relative; z-index:1; max-width:36ch; }
.sx-phil__lbl{ margin:0 0 20px; font:500 9px/1 var(--sx-sans); letter-spacing:.22em; text-transform:uppercase; }
.sx-phil__r .sx-phil__txt p{  font:16px; color:var(--bw-p-dark) !important; }
.sx-phil__txt .sx-phil__lbl{ color: #fff !important;
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 20px; }
.sx-phil__more{ position:absolute; z-index:2; left:clamp(24px,6vw,96px); bottom:calc(var(--u) * 1.5); padding-top:11px; border-top:1px solid rgba(255,255,255,.7); font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:#fff; text-decoration:none; transition:letter-spacing .5s var(--sx-ease), border-color .3s ease; }
.sx-phil__more:hover{ letter-spacing:.32em; border-color:var(--sx-gold); }

/* =========================================================== RESPONSIVE */
@media (max-width:991px){
  .sx-row{ grid-template-columns:1fr 1fr; row-gap:20px; padding-block:28px; }
  .sx-row__r{ grid-column:1 / -1; }
  .sx-thumb{ margin:0; max-width:none; }
}
@media (max-width:767px){
  .sx-meta{ grid-template-columns:1fr 1fr; }
  .sx-meta > :nth-child(2), .sx-meta nav{ display:none; }
  .sx-lede{
      margin-bottom:15px;
  }
  .sx-head{ grid-template-columns:1fr; min-height:0; row-gap:0px;margin-top:10px !important; }
  .sx-title, .sx-lede, .sx-social{ grid-column:1; }
  .sx-social{ justify-self:start; margin-top:0; }
  .sx-bar{ grid-template-columns:1fr; height:auto; row-gap:18px; padding-block:calc(var(--u) / 2); }
  .sx-sub, .sx-views{ grid-column:1; }
  .sx-views{ justify-content:flex-start; gap:26px; }
  .sx-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sx-grid[data-view="list"], .sx-grid[data-view="feed"], .sx-grid[data-view="full"]{ grid-template-columns:1fr; }
  .sx-grid[data-view="list"] .sx-item{ grid-template-columns:1fr auto; padding-block:14px; min-height:calc(var(--u) * 2); }
  .sx-grid[data-view="list"] .sx-name{ grid-column:1; padding-left:34px; font-size:20px; }
  .sx-grid[data-view="list"] .sx-cat{ display:none; }
  .sx-grid[data-view="list"] .sx-yr{ display:none; }
  .sx-grid[data-view="list"] .sx-fig{ width:84px; }
  .sx-grid[data-view="full"] .sx-fig{ aspect-ratio:4 / 3; }
  .sx-cap{ opacity:1; translate:0 0; font-size:10px; padding:26px 10px 8px; }       /* no hover on touch */
  .sx-grid[data-view="list"] .sx-cap, .sx-grid[data-view="feed"] .sx-cap{ opacity:1; }
  .sx-row{ grid-template-columns:1fr; }
  .sx-thumb{ max-width:260px; }
  .sx-phil{ grid-template-columns:1fr; min-height:0; }
  .sx-phil__l{ min-height:330px; padding-top:calc(var(--u) * 2.5); padding-bottom:calc(var(--u) * 4); }
  .sx-phil__r{ 
    /* min-height:calc(var(--u) * 11);  */
    padding-bottom:calc(var(--u) * 4);
   }
}
@media (prefers-reduced-motion:reduce){
  html.sx-on .sx-rv{ opacity:1; translate:none; transition:none; }
  .sx-grid{ transition:none; }
  .sx-img,.sx-art,.sx-phil__bg{ transition:none; }
}


/* ---------- 9. HERO — balanced composition (label, supporting text, CTAs, line pattern) ----------
   Only adds to the hero: the headline, header, systems card and all existing behaviour are untouched. */

/* subtle line pattern: the site's grid, drawn in white and faded toward the edges */
.ak-hero .ak-hero__lines {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .075) 1px, transparent 1px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px);
  background-size: 48px 48px, 48px 48px, auto;
  -webkit-mask-image: radial-gradient(120% 95% at 22% 55%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 88%);
          mask-image: radial-gradient(120% 95% at 22% 55%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 88%);
}

/* bracket label above the headline: [ Sports infrastructure ]   [ Design & build ] */
.ak-hero .ak-hero__label {
  position: absolute; left: 0; bottom: 100%; margin: 0 0 24px; display: flex; gap: 28px; white-space: nowrap;
  font: 500 12px/1 var(--at-ff-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
}
.ak-hero .ak-hero__label span::before { content: "[\00a0"; color: var(--ak-gold, #0a0a0a); }
.ak-hero .ak-hero__label span::after  { content: "\00a0]"; color: var(--ak-gold, #0a0a0a); }

/* supporting text under the headline (uses the existing .ak-hero__sub look) */
.ak-hero .ak-hero__sub { margin-top: 28px; font-size: 16px;margin-bottom: 20px; }

/* CTA row: the shared .at-btn.ak-btn-orange + .ak-link (same buttons as the services / footer CTAs) */
.ak-hero .ak-hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 15px; }
.ak-hero .ak-hero__cta-row .at-btn, .ak-hero .ak-hero__cta-row .ak-link { cursor: pointer; }
.ak-hero .ak-hero__cta-row .ak-link { color: #fff; }

/* right-middle supporting text */
.ak-hero .ak-hero__aside {
  position: absolute; z-index: 4; right: 100px; top: calc(40% - 32px); width: 250px; margin: 0; text-align: right;
  font: 400 15px/1.55 var(--at-ff-body); color: rgba(255, 255, 255, .84); 
}
.ak-hero .ak-hero__aside::before { content: ""; display: block; width: 34px; height: 2px; margin: 0 0 16px auto; background: var(--ak-gold, #0a0a0a); }

/* round explore button, left of the systems card */
.ak-hero .ak-hero__explore {
  position: absolute; z-index: 4; right: 428px; bottom: 48px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(10, 10, 10, .5); border: 1px solid rgba(255, 255, 255, .3); color: #fff; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.ak-hero .ak-hero__explore svg { animation: akHeroNudge 2.2s ease-in-out infinite; }
.ak-hero .ak-hero__explore:hover, .ak-hero .ak-hero__explore:focus-visible { background: var(--ak-gold, #0a0a0a); border-color: var(--ak-gold, #0a0a0a); color: #0c0c0c; outline: 0; }
@keyframes akHeroNudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* headline scales with the screen height so the new content always fits (104px cap = unchanged on tall screens) */
@media (min-width: 1200px) { .ak-hero .sec-1-home-15__headline { font-size: clamp(64px, 11.2vh, 104px); } }

/* laptop + tablet: give the hero a full-screen height so the new content has room */
@media (min-width: 768px) and (max-width: 1399.98px) { .ak-hero .sec-1-home-15__card { height: max(100svh, 640px); } }

/* short screens: keep the headline, label and CTAs; drop the long paragraph */
@media (min-width: 768px) and (max-height: 819px) { .ak-hero .ak-hero__sub { display: none; } }

/* narrower desktops: hide the extra right-hand pieces before they can touch the systems card */
@media (max-width: 1199.98px) { .ak-hero .ak-hero__aside, .ak-hero .ak-hero__explore { display: none; } }
@media (max-width: 991.98px)  { .ak-hero .ak-hero__label { gap: 16px; font-size: 11px; } .ak-hero .ak-hero__lines { background-size: 40px 40px, 40px 40px, auto; } }
@media (max-width: 767.98px) {
  .ak-hero .ak-hero__sub { font-size: 14px; }
  .ak-hero .ak-hero__cta-row { gap: 14px 22px; margin-top: 20px; }
}
@media (max-width: 575.98px) { .ak-hero .ak-hero__label { display: none; } }
@media (prefers-reduced-motion: reduce) { .ak-hero .ak-hero__explore svg { animation: none; } } 


/* ---------- GOLD ACCENT: every sub-title + highlighted area uses var(--bw-accent) ---------- */
:root { --ak-gold: var(--bw-accent); --at-theme-primary: var(--bw-accent); --olive: var(--bw-accent); --ak-lime-ink: var(--bw-accent); --clay-deep: var(--bw-accent); }

/* sub-titles / eyebrows / small section labels */
.ak-eyebrow.ak-eyebrow, .ak-services__bar .ak-eyebrow, .book-intro .ak-eyebrow,
.club .tag, .club-intro .tag, .courts .tag,
.akt__eyebrow,
.footer-courts__eyebrow, .footer-courts .footer-courts__label,
.ak-muse__sub,
.sec-2-ak-overview__gallery-label,
.ak-hero .ak-hero__systems-title, .ak-hero .ak-hero__label,
.sx-phil__lbl, .sx-phil__txt .sx-phil__lbl, .sx-sub { color: var(--bw-accent); }

/* highlighted areas: arrow icons, underline hover on links, bracket marks */
.ak-link svg, .footer-courts .ak-link svg { color: var(--bw-accent); }
.ak-link:hover, .ak-link:focus-visible { border-bottom-color: var(--bw-accent); }


/* ---------- ABOUT: tighter stage, heading on exactly three lines, CTA in the empty top-right ---------- */
.club .club-grid { align-items: end; }
.club .club-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 28px; padding-bottom: 6px; }
.club .club-cta .ak-link { color: rgb(var(--about-fg-rgb)); }             /* follows the white -> dark scroll transition */
.club .club-stage { margin-top: clamp(16px, 2.4vw, 32px); container-type: inline-size; grid-template-columns: auto minmax(0, 1fr); }
/* heading: 3 lines (More than a surface — / a court built / to last). Size = width left beside the ball, so the longest line always fits */
.club .club-stage h2 {
  font-size: clamp(28px, 5.4vw, 80px);                                    /* fallback for browsers without container units */
  font-size: clamp(22px, calc((100cqw - clamp(140px, 22vw, 300px) - clamp(16px, 3vw, 40px)) / 13.8), 96px);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .club .club-cta { justify-content: flex-start; margin-top: 8px; }
  .club .club-stage { grid-template-columns: minmax(0, 1fr); }
  .club .club-stage h2 { font-size: clamp(22px, calc(100cqw / 13.8), 96px); }
}

/* ===========================================================
   ENQUIRY / QUOTE — architectural "planning sheet" redesign
   Sharp, chamfered geometry; markup IDs and JS untouched.
   Scoped to .book.ak-quote so nothing else is affected.
   =========================================================== */
.book.ak-quote{
  --cut:34px;
  --q-ink:#0c0c0c; --q-navy:var(--ak-navy,#0a0a0a); --q-navy2:var(--ak-navy-2,#1a1a1a); --q-gold:var(--ak-gold,#0a0a0a);
  --q-chamfer:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.book.ak-quote .book-grid{ position:relative; }

/* hatched offset plate behind the card = architectural drop shadow */
.book.ak-quote .book-grid::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:calc((100% + 1px) / 3 + 18px); right:-18px; top:18px; bottom:-18px;
  /* background:repeating-linear-gradient(135deg, rgba(10,10,10,.6) 0 2px, transparent 2px 9px);
  clip-path:var(--q-chamfer); */
}

/* the card */
.book.ak-quote .booker{
  grid-template-rows:auto auto 1fr;
  border:0; border-radius:0; box-shadow:none; background:#fff; overflow:visible;
  clip-path:var(--q-chamfer);
}

/* header strip with a ruler along its bottom edge */
.book.ak-quote .booker-bar{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 calc(var(--cut) + 8px) 0 26px; height:46px;
  background:var(--q-ink); color:rgba(255,255,255,.78);
  font-family:var(--at-ff-heading); font-size:12px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.book.ak-quote .booker-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:8px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 50px) bottom/100% 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1px, transparent 1px 10px) bottom/100% 4px no-repeat;
}
.book.ak-quote .booker-bar__l{ display:flex; align-items:center; gap:12px; }
.book.ak-quote .booker-bar__l i{ width:9px; height:9px; background:var(--q-gold); transform:rotate(45deg); }
.book.ak-quote .booker-bar__r{ display:flex; align-items:center; gap:18px; color:rgba(255,255,255,.55); }
.book.ak-quote .booker-bar__r em{ font-style:normal; color:var(--q-gold); }

/* colour panel */
.book.ak-quote .booker-fig{ padding:34px 34px 62px; gap:28px 40px; }
.book.ak-quote .booker-fig::before{
  opacity:1;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(135deg, rgba(0,0,0,.28) 0%, transparent 55%);
  background-size:40px 40px, 40px 40px, 100% 100%;
}
.book.ak-quote .field legend{ font-size:20px; letter-spacing:.14em; color:#fff; margin-bottom:18px; }
.book.ak-quote .opts{ gap:10px; }
.book.ak-quote .opt span{
  padding:11px 26px 11px 16px; border:0; border-radius:0;
  background:rgba(255,255,255,.10); color:#fff;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  font-size:13px; letter-spacing:.08em;
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.book.ak-quote .opt:hover span{ background:rgba(255,255,255,.22); transform:translateY(-2px); }
.book.ak-quote .opt input:checked + span{ background:var(--q-gold); color:var(--q-ink); transform:none; }
.book.ak-quote .opt input:focus-visible + span{ outline:0; box-shadow:inset 0 0 0 2px #fff; }

/* blueprint frame around the live diagram, with crop marks */
.book.ak-quote .q-art{
  position:relative; box-sizing:border-box; padding:16px;
  border:1px solid rgba(255,255,255,.28); background:rgba(0,0,0,.14);
}
.book.ak-quote .q-art::before, .book.ak-quote .q-art::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border:2px solid var(--q-gold);
}
.book.ak-quote .q-art::before{ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.book.ak-quote .q-art::after{ bottom:-2px; right:-2px; border-left:0; border-top:0; }

/* dimension tag */
.book.ak-quote .booker-fig .corner{
  right:auto; left:34px; bottom:22px;
  display:inline-flex; align-items:center; gap:10px;
  font-size:15px; letter-spacing:.12em; color:#fff;
}
.book.ak-quote .booker-fig .corner::before{ content:""; width:34px; height:1px; background:var(--q-gold); }

/* body */
.book.ak-quote .booker-body{ padding:clamp(26px,3.4vw,42px); gap:28px; background:#d9d9d9; }
.book.ak-quote .inp{ gap:10px; font-size:13px; letter-spacing:.14em; color:var(--q-navy2); }
.book.ak-quote .inp input,
.book.ak-quote .inp select{
     border: 0;
    border-radius: 0;
    border-bottom: 1px solid #dddd;
    background: #f3f5f7;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--q-ink);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.book.ak-quote .inp input:hover,
.book.ak-quote .inp select:hover{ background:#eaeef2; border-color:var(--q-navy); }
.book.ak-quote .inp input:focus,
.book.ak-quote .inp select:focus{ background:#fff; border-color:var(--q-gold); box-shadow:0 6px 0 -3px var(--q-gold), 0 0 0 1px rgba(15,42,64,.12); }
.book.ak-quote .sel::after{ border-color:var(--q-navy); }

/* estimate readout */
.book.ak-quote .estimate{
position: relative;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: #f3f5f7;
    /* border-top: 4px solid var(--q-gold); */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.book.ak-quote .estimate div{ padding:24px 24px 26px; }
.book.ak-quote .estimate div + div{ border-left:1px solid rgba(255,255,255,.14); }
.book.ak-quote .estimate span{ font-size:12px; letter-spacing:.16em; }
.book.ak-quote .estimate div:first-child span::before{ border-radius:0; transform:rotate(45deg); }
.book.ak-quote .estimate b{ color:var(--q-gold); }
.book.ak-quote .note{ padding-left:14px; border-left:2px solid var(--q-gold); color:rgba(15,42,64,.7); }
.book.ak-quote .summary{ border-top:1px solid var(--q-navy); padding-top:24px; position:relative; }
.book.ak-quote .summary::before{ content:""; position:absolute; top:-1px; left:0; width:64px; height:3px; background:var(--q-gold); }
.book.ak-quote .summary output{ font-size:14px; letter-spacing:.14em; }
/* .book.ak-quote .booker .at-btn{
  border-radius:0;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
} */

/* intro column: steps + spec sheet */
.book.ak-quote .book-intro{ position:relative; z-index:1; }
.book.ak-quote .book-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); background:#fff; max-width:420px; }
.book.ak-quote .book-steps li{ display:grid; gap:6px; padding:12px 14px 14px; }
.book.ak-quote .book-steps li + li{ border-left:1px solid rgba(15,42,64,.2); }
.book.ak-quote .book-steps b{ font-family:var(--at-ff-heading); font-weight:normal; font-size:22px; line-height:1; color:var(--q-gold); letter-spacing:.04em; }
.book.ak-quote .book-steps span{ font-size:12px; line-height:1.25; letter-spacing:.06em; text-transform:uppercase; color:var(--q-navy2); }
.book.ak-quote .specs dt::before{ border-radius:0; transform:rotate(45deg); }
.book.ak-quote .specs dt, .book.ak-quote .specs dd{ border-top-color:rgba(15,42,64,.22); }

@media (max-width:991px){
  .book.ak-quote{ --cut:22px; }
  .book.ak-quote .book-grid::before{ display:none; }
  .book.ak-quote .book-steps{ max-width:none; }
}
@media (max-width:767px){
  .book.ak-quote .booker-bar__r em{ display:none; }
  .book.ak-quote .booker-fig{ padding:26px 20px 64px; }
  .book.ak-quote .booker-fig .corner{ left:20px; }
}
@media (max-width:575px){
  .book.ak-quote .estimate{ clip-path:none; }
  .book.ak-quote .estimate div + div{ border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .book.ak-quote .booker-bar{ font-size:11px; letter-spacing:.1em; padding-left:18px; }
}



/* ===== CLIENTS / TRUSTED BY — matches .book / .courts / .sx-lined (same grid, ink, rule, gold, type) ===== */
.ak-clients{
    position: relative;
    background-color: #fff;
    background-image: linear-gradient(rgb(12 12 12 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(12 12 12 / 5%) 1px, transparent 1px);
    background-size: 48px 49px;
    background-position: 0 var(--gy, 0px);
    color: #161616;
}
.ak-clients__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,56px);
}
.ak-clients__head .ak-desc{ margin:0; max-width:40ch; }

/* logo wall: hairline cells on the 48px lattice */
.ak-clients__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgb(12 12 12 / 14%);
  border-left:1px solid rgb(12 12 12 / 14%);
  background:#fff;
}
.ak-clients__cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  height:clamp(96px,11vw,144px); padding:24px 28px;
  border-right:1px solid rgb(12 12 12 / 14%);
  border-bottom:1px solid rgb(12 12 12 / 14%);
  overflow:hidden; transition:background-color .35s ease;
}
.ak-clients__cell::after{          /* gold underline sweep, same accent as the quote form */
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--bw-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.ak-clients__cell:hover{ background-color:#f7f7f5; }
.ak-clients__cell:hover::after{ transform:scaleX(1); }
.ak-clients__cell img{
  max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1);
   /* opacity:.6; */
  transition:filter .35s ease, opacity .35s ease;
}
.ak-clients__cell:hover img{ filter:none; opacity:1; }
.ak-clients__name{               /* text fallback if a logo file is missing */
  display:none; font-weight:500; font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.04em; text-transform:uppercase; color:#1a1a1a; text-align:center;
}
.ak-clients__cell.no-logo img{ display:none; }
.ak-clients__cell.no-logo .ak-clients__name{ display:block; }

.ak-clients__foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:50px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#1a1a1a;
}
.ak-clients__foot b{ color:var(--bw-accent); font-weight:600; }

@media (max-width:991px){ .ak-clients__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:575px){ .ak-clients__grid{ grid-template-columns:repeat(2,1fr); } .ak-clients__cell{ padding:18px; } }

/* ===========================================================
   MOBILE OVERFLOW FIX FOR .booker QUOTE FORM
   =========================================================== */

/* Ensure wrapper and form bounds stay within screen width */
@media (max-width: 767.98px) {
  .book.ak-quote {
    overflow-x: hidden;
  }

  .book.ak-quote .booker {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Reduce aggressive chamfer cut on tablets and mobiles */
    --cut: 16px;
  }

  /* Adjust top bar header padding & wrapping */
  .book.ak-quote .booker-bar {
    padding: 0 16px;
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Ensure sport option buttons wrap neatly */
  .book.ak-quote .opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .book.ak-quote .opt {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
  }

  .book.ak-quote .opt span {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 12px;
  }

  /* Form inputs fit container width */
  .book.ak-quote .booker-body {
    padding: 20px 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .book.ak-quote .inp input,
  .book.ak-quote .inp select {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 575.98px) {
  /* Flatten clip-path on extra small screens to prevent clipping content */
  .book.ak-quote .booker {
    clip-path: none;
    border-radius: 12px;
  }

  /* Full width option buttons on small devices */
  .book.ak-quote .opt {
    flex: 1 1 100%;
  }

  /* Estimate grid stacked neatly without overflow */
  .book.ak-quote .estimate {
    display: flex;
    flex-direction: column;
    clip-path: none;
    border-radius: 8px;
  }

  .book.ak-quote .estimate div {
    padding: 16px;
  }

  .book.ak-quote .estimate div + div {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Ensure action submit button fits within parent */
  .book.ak-quote .summary button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}


/* ===========================================================
   AK Sports Infra — BLACK & WHITE layer (Fabrica-inspired)
   Load LAST (after ak-clients.css). Nothing else needs to change.
   1 Tokens  2 Dark scopes  3 Typography  4 Buttons  5 Sharp edges  6 Accent clean-up
   =========================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --bw-black: #0a0a0a;          /* Fabrica text token */
  --bw-white: #ffffff;
  --bw-g1: #f4f4f4;  --bw-g2: #e6e6e6;  --bw-g3: #8c8c8c;  --bw-g4: #4a4a4a;

  --bw-font: "Inter", "Inter Placeholder", sans-serif;
  /* Fabrica paragraph preset (read from DevTools): Inter, 16px, weight 500, line-height 140%, letter-spacing -.04em */
  --bw-fs-body: 16px;  --bw-lh-body: 1.4;  --bw-ls-body: -.04em;  --bw-fw-body: 500;
  --bw-ls-head: -.045em;  --bw-lh-head: 1.04;  --bw-fw-head: 500;
  --bw-h1: 60px;  --bw-h2: 60px;

  /* light-section button */
  --bw-btn-bg: var(--bw-black);  --bw-btn-fg: var(--bw-white);  --bw-btn-bd: var(--bw-black);
  --bw-btn-hbg: var(--bw-white); --bw-btn-hfg: var(--bw-black); --bw-btn-hbd: var(--bw-black);
  --ak-gold:#0a0a0a; --sx-gold:#0a0a0a; --at-theme-primary:#0a0a0a; --olive:#0a0a0a; --ak-lime-ink:#0a0a0a; --clay-deep:#0a0a0a; --ak-lime:#0a0a0a; --ak-amber:#0a0a0a; --butter:#0a0a0a; --ball:#0a0a0a; --clay:#0a0a0a; --q-gold:#0a0a0a; --akg-amber:#0a0a0a; --bw-accent:#0a0a0a; --bw-on-accent:#ffffff;
  --ak-navy: #0a0a0a;  --ak-navy-2: #1a1a1a;  --sx-navy: #0a0a0a;  --q-navy: #0a0a0a;  --q-navy2: #1a1a1a;
  --at-ff-body: var(--bw-font);  --at-ff-heading: var(--bw-font);  --display: var(--bw-font);
  --sx-sans: var(--bw-font);  --sx-serif: var(--bw-font);  --at-heading-font: var(--bw-font);
}

/* ---------- 2. DARK SCOPES: accents + buttons flip to white on black / photo backgrounds ---------- */
.ak-hero,
.sec-1-home-15,
.aks,
.akg,
.cta,
.footer-courts,
.akm-panel,
.akm-scrim,
.ak-quote .booker-bar {
  --ak-gold:#ffffff; --sx-gold:#ffffff; --at-theme-primary:#ffffff; --olive:#ffffff; --ak-lime-ink:#ffffff; --clay-deep:#ffffff; --ak-lime:#ffffff; --ak-amber:#ffffff; --butter:#ffffff; --ball:#ffffff; --clay:#ffffff; --q-gold:#ffffff; --akg-amber:#ffffff; --bw-accent:#ffffff; --bw-on-accent:#0a0a0a;
  /* buttons stay BLACK on dark sections too; a thin white outline keeps them visible, hover inverts to white */
  --bw-btn-bg: var(--bw-black);  --bw-btn-fg: var(--bw-white);  --bw-btn-bd: rgba(255,255,255,.55);
  --bw-btn-hbg: var(--bw-white); --bw-btn-hfg: var(--bw-black); --bw-btn-hbd: var(--bw-white);
}

/* ---------- 3. TYPOGRAPHY ---------- */
/* AK UPGRADE TYPOGRAPHY is scoped to unique hooks, so it can never leak into (or fight with) other site styles:
     .akup-root  -> <body>      : site font + base body text
     .akup-h     -> h1/h2/h3    : heading weight / tracking / leading
     .akup-h2    -> section h2s : 60px desktop size (NOT the About heading, which sizes itself)
     .akup-p     -> paragraphs  : body-copy leading / tracking
   :where(.akup-root) adds no specificity, so the font rule keeps exactly the weight it always had. */
html body:where(.akup-root), html body:where(.akup-root) :where(p, li, a, span, div, label, input, select, textarea, button, small, b, strong, em, dt, dd, td, th, figcaption, blockquote, h1, h2, h3, h4, h5, h6) {
  font-family: var(--bw-font) !important;
}

html body:where(.akup-root) { font-size: var(--bw-fs-body); line-height: var(--bw-lh-body); letter-spacing: var(--bw-ls-body); color: var(--bw-black); font-weight: var(--bw-fw-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* paragraphs: base rule has no !important (the site's own mobile rules win); the desktop rule keeps the original !important look */
.akup-p:not(.footer-courts__word) {
  line-height: var(--bw-lh-body); letter-spacing: var(--bw-ls-body); font-weight: var(--bw-fw-body);
}
@media (min-width: 768px) {
  html body .akup-p:not(.footer-courts__word) {
    line-height: var(--bw-lh-body) !important;
    letter-spacing: var(--bw-ls-body) !important;
    font-weight: var(--bw-fw-body);
  }
}

/* headings: weight + tracking everywhere; line-height and size are !important on desktop only,
   so the phone rules in index.html (28px / 1.12) are no longer overridden */
.akup-h { text-transform: none; line-height: 1; }
html body .akup-h { font-weight: 600 !important; letter-spacing: -.06em !important; }
html body h3.akup-h, html body h4.akup-h, html body h5.akup-h, html body h6.akup-h { letter-spacing: -.03em !important; }
h3.akup-h, h4.akup-h, h5.akup-h, h6.akup-h { line-height: 1.15; }
html body h1.akup-h, html body h2.akup-h { overflow-wrap: break-word; }
@media (min-width: 768px) {
  html body .akup-h { line-height: 1 !important; }
  html body h3.akup-h, html body h4.akup-h, html body h5.akup-h, html body h6.akup-h { line-height: 1.15 !important; }
  /* the 60px desktop heading size (every section h2 carrying .akup-h2) */
  html body .akup-h2 { font-size: 60px !important; }
}
html body .ak-hero .sec-1-home-15__headline { font-size: 100px; line-height: 1.02 !important; letter-spacing: var(--bw-ls-head) !important; }
html body .club h2#about-title { font-size: var(--bw-h2) !important; line-height: 1.02 !important; text-transform: none; }
@media (min-width: 768px) { html body :is(.footer-courts__heading, .sx-title, .sx-phil__h, .aks__title, .ak-muse__title, .akt__title, .cta__title) { line-height: var(--bw-lh-head) !important; } }

/* responsive scale: nothing overflows on smaller screens */
@media (max-width: 1399.98px) { :root { --bw-h1: 56px; --bw-h2: 56px; } }
@media (max-width: 1199.98px) { :root { --bw-h1: 48px; --bw-h2: 48px; } }
@media (max-width: 991.98px)  { :root { --bw-h1: 42px; --bw-h2: 42px; } }
@media (max-width: 767.98px)  { :root { --bw-h1: 36px; --bw-h2: 36px; } }
@media (max-width: 575.98px)  { :root { --bw-h1: 32px; --bw-h2: 32px; } }
@media (max-width: 380px)     { :root { --bw-h1: 29px; --bw-h2: 29px; } }
/* About h2 sits next to the big ball: below 992px keep its own container-query sizing so the line still fits */
@media (max-width: 991.98px) { html body .club h2#about-title { font-size: clamp(22px, calc(100cqw / 13.8), 96px) !important; } }

/* ---------- 4. BUTTONS: black (white on dark sections), square, readable ---------- */
html body .at-btn, html body .at-btn.ak-btn-orange, html body button.at-btn, html body .at-btn-group .at-btn, html body .at-btn-group.btn-brand-1 .at-btn,
html body .at-btn.btn-sm, html body .at-btn.active {
  background: var(--bw-btn-bg) !important; background-color: var(--bw-btn-bg) !important;
  border: none !important;
   color: var(--bw-btn-fg) !important;
  border-radius: 0 !important; font-weight: 500; letter-spacing: -.02em; text-transform: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
html body .at-btn :is(span, i, svg, path) { color: inherit; }
html body .at-btn svg path { fill: currentColor; }
html body .at-btn:is(:hover, :focus-visible), html body .at-btn.ak-btn-orange:is(:hover, :focus-visible) {
  background: var(--bw-btn-hbg) !important; background-color: var(--bw-btn-hbg) !important; color: var(--bw-btn-hfg) !important; border-color: var(--bw-btn-hbd) !important;
}
html body .at-btn.filter-btn { background: transparent !important; color: var(--bw-black) !important; border-color: var(--bw-g2) !important; }
html body .at-btn-circle { background: var(--bw-btn-bg) !important; color: var(--bw-btn-fg) !important; border: 1px solid var(--bw-btn-bd) !important; }

/* other button-like controls */
html body :is(.faq__tab, .opt span, .akt__arrow, .ak-hero__explore, .footer-courts__pills a, .ak-testi__arrow, .ak-testi__nav button, .sx-reserve, .back-to-top-btn, .akm-burger, input[type="submit"], button[type="submit"]) {
  border-radius: 0 !important;
}
html body .faq__tab[aria-pressed="true"], html body .faq__item.is-open .faq__i, html body .ak-quote .opt input:checked + span, html body .book.ak-quote .opt input:checked + span {
  background: var(--bw-black) !important; border-color: var(--bw-black) !important; color: var(--bw-white) !important;
}
html body :is(.ak-hero__explore, .footer-courts__pills a, .akt__arrow, .ak-testi__arrow, .ak-testi__nav button):is(:hover, :focus-visible) {
  background: var(--bw-white) !important; border-color: var(--bw-white) !important; color: var(--bw-black) !important;
}
html body .akt__arrow:is(:hover, :focus-visible) { background: var(--bw-white) !important; color: var(--bw-black) !important; }
html body .ak-marquee--gold { background: var(--bw-black) !important; color: var(--bw-white) !important; }
html.akm-open body .akm-burger { background: var(--bw-white) !important; color: var(--bw-black) !important; }
html body .aks__card.is-on .aks__lab span { background: var(--bw-white); color: var(--bw-black); }
html body .at-btn-border-white { background: transparent !important; border-color: var(--bw-white) !important; }

/* underline links: keep as they are, only the accent turns neutral */
html body .ak-link svg { color: currentColor !important; }
html body .ak-link:hover { border-bottom-color: currentColor !important; }

/* ---------- 5. SHARP EDGES ---------- */
/* everything square — except the ball artwork, its shadow, the cursor and the 3D court scene (round shapes that must stay round) */
html body *:not([class*="ball"]):not([class*="cursor"]):not([class*="trail"]):not(.akc-bs):not(.akc-b):not(.akc-b *):not(.akc-world):not(.akc-world *),
html body *:not([class*="ball"]):not([class*="cursor"]):not([class*="trail"]):not(.akc-bs):not(.akc-b):not(.akc-b *):not(.akc-world):not(.akc-world *)::before,
html body *:not([class*="ball"]):not([class*="cursor"]):not([class*="trail"]):not(.akc-bs):not(.akc-b):not(.akc-b *):not(.akc-world):not(.akc-world *)::after {
  /* border-radius: 0 !important; */
  border-radius: 0;
}
html body :is(input, select, textarea, .nice-select, .nice-select .list) { border-radius: 0 !important; }
html body img { border-radius: 0 !important; }

/* ---------- 6. ACCENT CLEAN-UP: former gold details -> black / white ---------- */
html body :is(.tag, .sx-sub, .sx-phil__lbl, .cta__eyebrow, .ak-clients__foot b, .akc-hud b, .faq__item.is-open .faq__n) { color: var(--bw-accent); }
html body .club :is(.tag, .club-intro .tag, .courts .tag) { color: var(--about-eb, rgb(var(--about-fg-rgb, 10 10 10))) !important; }
html body .ak-testi__dot.is-active, html body .akm-dots button[aria-current="true"] { background: var(--bw-accent) !important; }
html body :is(.akt__bar, .akc-hud__bar i, .aks__bar i, .cta__ch::before, .ak-clients__cell::after, .faq__item::before) { background: var(--bw-accent) !important; }
html body .ts__item:hover::before, html body .ts__item:hover::after { border-color: var(--bw-accent) !important; }
html body :is(.inp input:focus, .inp select:focus) { box-shadow: inset 0 -2px 0 var(--bw-black) !important; }
html body .estimate div:first-child span::before { background: var(--bw-black) !important; }
html body .footer-courts :is(.at-btn, .footer-courts__pills a) { border-radius: 0 !important; }

/* mobile off-canvas menu stays black / white */
html body .akm-panel { background: var(--bw-black) !important; color: var(--bw-white); }

/* section background only: the dark "Six ways" section is pure black (its court figures keep their blue / teal colours) */
html body .aks { background: var(--bw-black) !important; }
/* labels that used the old olive / gold accent */
/* html body :is(.ak-eyebrow, .inp, .toast, .courts .tag) { color: var(--bw-accent) !important; } */
/* placeholders + custom selects also use Inter */
html body :is(input, textarea, select)::placeholder { font-family: var(--bw-font) !important; }
html body :is(.nice-select, .nice-select .option, .nice-select .current) { font-family: var(--bw-font) !important; }
/* surface-palette swatches describe the real court surfaces, so they keep their original colours */
html body .swatches { --olive: #8c8c8c; }
.ak-services__intro .ak-btn{
  border: 1px solid #000 !important;
}

/* ===========================================================
   FINAL VISUAL PASS — paragraph greys, black & white only, About gap
   (appended last; nothing above this line was changed except hard-coded gold values)
   =========================================================== */

/* ---------- 1. PARAGRAPH COLOUR ---------- */
:root { --bw-p: #939393e6; --bw-p-dark: #ffffff57; }   /* paragraph text, a touch more subtle: light 100% -> 90%, dark 55% -> 49% */

/* dark sections: a mild grey instead of pure white */
.ak-hero, .sec-1-home-15, .aks, .akg, .cta, .footer-courts, .akm-panel, .akm-scrim, .ak-quote .booker-bar { --bw-p: var(--bw-p-dark); }

/* About + the Overview section before it change background on scroll, so their paragraph grey is driven by the same script
   (#939393 on white -> #b4b4b4 on the dark ball colour) */
.club { --bw-p: var(--about-p, rgb(var(--about-p-rgb, 91, 91, 91))); }
.sec-2-ak-overview { --bw-p: #939393e6; }

html body :is(p, .ak-desc, .ak-hero__sub, .ak-hero__aside, .akg__body, .sec-story__media-desc, .cta__copy, .cta__body, .aks__sub, .footer-courts__copy, .akm-panel__tag, .sec-2-ak-overview__body, .faq__a):not(.tag):not(.k):not(.yr):not(.ak-eyebrow):not(.akg__sport):not(.ak-muse__sub):not(.swatch-cap) { color: var(--bw-p) !important; }
html body .sec-2-ak-overview__info p { color: var(--bw-p) !important; }

/* ---------- 2. NO GOLD / OLIVE: the last hard-coded bits ---------- */
html body .ak-hero .ak-hero__systems-title { color: #ffffff !important; }
html body .ak-hero .ak-hero__eyebrow i { background: #ffffff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
html body .footer-courts__glow { background: radial-gradient(90% 90% at 78% 100%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 36%, rgba(255,255,255,0) 72%) !important; }
html body .footer-courts__status i { background: #ffffff; }
html body .ak-testi__corner, html body .footer-courts__cap, html body .footer-courts__copy--tag { color: rgba(255,255,255,.7); }
html body .swatches { --olive: #8c8c8c; }
html body .ak-quote .inp input:focus, html body .ak-quote .inp select:focus { box-shadow: inset 0 -2px 0 #0a0a0a !important; }

/* ---------- PHILOSOPHY (sx-phil): large bold stacked heading (left) + bracket eyebrow (right) ---------- */
html body .sx-phil .sx-phil__h.akup-h2{
  font-size:clamp(36px,4.6vw,80px) !important; line-height:.92 !important;
  letter-spacing:-.045em !important; font-weight:600 !important;
  text-transform:uppercase !important; max-width:100% !important;
}
.sx-phil__h .ln{ display:block; }
.sx-phil__txt .ak-eyebrow{ margin:0 0 18px; }
@media (max-width:767.98px){
  html body .sx-phil .sx-phil__h.akup-h2{ font-size:clamp(38px,11vw,56px) !important; line-height:.95 !important; }
}

/* ---------- MUSE centre: eyebrow above the title ---------- */
.ak-muse__center .ak-eyebrow{ margin:0 auto 18px; }

/* ---------- SELECTED PROJECTS: eyebrow, category tabs, empty state ---------- */
.sx-head .ak-eyebrow{
   grid-column:1 / 3; 
  /* margin:0 0 14px; */
 }
/* category tabs: [<] [ scrolling row of square tabs ] [>] — same two columns as before; the active tab is a solid black tab */
.sx-cats{ grid-column:3 / 5; min-width:0; position:relative; display:flex; align-items:center; gap:10px; }
.sx-cats__track{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; padding:3px 2px 6px; scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; cursor:grab; }
.sx-cats__track::-webkit-scrollbar{ display:none; }
.sx-cats__track.is-dragging{ cursor:grabbing; user-select:none; -webkit-user-select:none; }
.sx-cats__set{ display:flex; width:max-content; gap:8px; }
.sx-cats__set button{ flex:0 0 auto; padding:11px 18px; border:1px solid var(--sx-rule); border-radius:0; background:transparent; cursor:pointer; white-space:nowrap;
  color:#6a6a6a; font:500 clamp(14px,1.15vw,17px)/1 var(--sx-sans); letter-spacing:-.01em;
  transition:color .3s ease, background-color .3s ease, border-color .3s ease; }
.sx-cats__set button:hover{ color:var(--sx-ink); border-color:var(--sx-ink); }
.sx-cats__set button[aria-pressed="true"]{ color:#fff; background:var(--sx-ink); border-color:var(--sx-ink); }
.sx-cats__set button:focus-visible{ outline:2px solid var(--sx-ink); outline-offset:-4px; }
.sx-cats__set button[aria-pressed="true"]:focus-visible{ outline-color:#fff; }
.sx-cats__nav{ flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid var(--sx-rule); border-radius:0; background:transparent;
  color:var(--sx-ink); cursor:pointer; transition:color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease; }
.sx-cats__nav:hover:not(:disabled){ color:#fff; background:var(--sx-ink); border-color:var(--sx-ink); }
.sx-cats__nav:focus-visible{ outline:2px solid var(--sx-ink); outline-offset:2px; }
.sx-cats__nav:disabled{ opacity:.28; cursor:default; }
.sx-cats.is-static .sx-cats__nav{ display:none; }
/* filtering: the grid fades while the projects swap; its height is held constant (see the tabs script) so the page never shifts */
.sx-grid > li.is-filtered{ display:none !important; }
.sx-empty{ margin:calc(var(--u) / 2) 0; font:500 clamp(16px,1.4vw,20px)/1.3 var(--sx-sans); color:#6a6a6a; }
.sx-empty__all{ margin-left:.5em; padding:0 0 2px; border:0; border-bottom:1px solid currentColor; background:none; color:var(--sx-ink); font:inherit; cursor:pointer; }
.sx-empty__all:hover{ opacity:.65; }
@media (max-width:767.98px){
  .sx-head .ak-eyebrow{ grid-column:1; }
  .sx-cats{ grid-column:1; }
  .sx-cats__nav{ display:none; }                                  /* phones: swipe the row instead */
  .sx-grid + .akm-dots{ min-height:7px; }                         /* keep the dot row's height when no project matches, so the page height never changes */
  .sx-cats__set button{ padding:10px 16px; font-size:15px; }
}

/* ---------- BOOK / QUOTE: single-row scrollable sport options (mobile only) ---------- */
@media (max-width: 767.98px) {
  /* let the grid/fieldset parents shrink so the row can scroll instead of stretching the card */
  .book.ak-quote .booker-fig .field {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .book.ak-quote .booker-fig .field .opts {
    display: flex;
    flex-wrap: nowrap;                 /* never wrap */
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;             /* Firefox */
    padding: 4px 2px 6px;              /* room so focus outlines aren't clipped */
  }
  .book.ak-quote .booker-fig .field .opts::-webkit-scrollbar {
    display: none;                     /* Chrome / Safari */
  }

  /* each option keeps its natural width and stays on one line */
  .book.ak-quote .booker-fig .field .opts .opt {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
  }
  .book.ak-quote .booker-fig .field .opts .opt span {
    white-space: nowrap;
    width: auto;
  }
}

/* ---------- ABOUT: the empty space above the CTA is used by three short proof points ---------- */
.club .club-points { list-style: none; margin: 0 0 clamp(22px, 2.6vw, 36px) auto; padding: 0; flex: 0 0 100%; max-width: 680px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 36px); text-align: left; }
.club .club-points li { padding-top: 16px; border-top: 1px solid rgb(var(--about-line-rgb, 12 12 12) / 24%); }
.club .club-points .n { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: rgb(var(--about-fg-rgb, 30, 30, 30)); }
html body .club .club-points h3 { margin: 0 0 8px; font-size: 20px !important; color: rgb(var(--about-fg-rgb, 30, 30, 30)); text-transform: none; }
html body .club .club-points p { margin: 0; font-size: 16px !important; line-height: 1.4 !important; }
@media (max-width: 1199.98px) {
  .club .club-points { grid-template-columns: minmax(0, 1fr); max-width: none; margin-left: 0; }
  .club .club-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; }
  .club .club-points li + li { border-top-color: rgb(var(--about-line-rgb, 12 12 12) / 24%); }
  .club .club-points .n { margin: 3px 0 0; }
}

/* ---------- DARK SECTIONS: reference text colours (paragraph var(--bw-p-dark), eyebrow #ffffff) ---------- */
/* Philosophy (sx-phil): the eyebrow was being dimmed by the paragraph rule, keep it white */
html body .sx-phil .sx-phil__r .sx-phil__txt p.ak-eyebrow { color: #ffffff !important; }
html body .sx-phil .sx-phil__r .sx-phil__txt p:not(.ak-eyebrow) { color: var(--bw-p-dark) !important; }
/* AKS stack: head paragraphs + caption description */
html body .aks .aks__head p.aks__sub, html body .aks .aks__cap span { color: var(--bw-p-dark) !important; }
/* Story media description */
html body .sec-story__media-desc { color: var(--bw-p-dark) !important; }
/* CTA body + footer-courts descriptions */
html body .cta .cta__body p.cta__copy, html body .footer-courts p.footer-courts__copy, html body .footer-courts__copy--tag { color: var(--bw-p-dark) !important; }

/* ---------- ARCS: moved from the Services corner to the FAQ section (sits in the empty space under the left column) ---------- */
.faq#faq{ isolation:isolate; }
@media (max-width:991.98px){
  .faq .ak-arcs{ width:44vw !important; min-width:160px; opacity:.1 !important; }
}
.faq .ak-arcs{
  filter: grayscale(1);
}

/* ---------- FOOTER WORDMARK: sits on the bottom edge, its lower edge slightly cropped by the screen ---------- */
/* the footer forces "translate:none !important" on its reveal elements, so the word is lowered with a relative offset instead.
   The zone around it already clips (overflow:hidden); the offset is a fraction of the word's own font-size (fitted by script),
   so the crop stays the same at every width. Bigger number = more hidden. */
html body .footer-courts__wordzone .footer-courts__word{ position:relative; top:.27em; }

/* ===========================================================
   FINAL ADJUSTMENTS
   1) arrow cursor on the social links  2) client logos inside About  3) Selected Projects: View more / View less
   =========================================================== */

/* ---------- 1. ARROW CURSOR over .sx-social a ----------
   The eased dot hides, the ring grows into a solid disc and an arrow slides in. Same blend mode as the rest of the cursor, so it
   inverts whatever is underneath (works on light and dark sections). Only exists where the custom cursor runs (mouse devices). */
.plm-cursor-ring{ transition: width .45s cubic-bezier(.16,1,.3,1), height .45s cubic-bezier(.16,1,.3,1), background-color .3s ease, border-color .3s ease; }
.plm-cursor-arrow{
  position:fixed; top:0; left:0; z-index:10002; pointer-events:none;
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  color:#fff; mix-blend-mode:difference; transform:translate(-50%,-50%);
}
.plm-cursor-arrow i{
  display:block; width:26px; height:26px; opacity:0;
  transform:translate(-10px,10px) scale(.4); transition:opacity .25s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.plm-cursor-arrow svg{ display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:square; stroke-linejoin:miter; }
html.plm-cursor-arrow-on .plm-cursor-dot{ width:0 !important; height:0 !important; }
html.plm-cursor-arrow-on .plm-cursor-ring{ width:64px; height:64px; background:#fff; border-color:#fff; }
html.plm-cursor-arrow-on .plm-cursor-arrow i{ opacity:1; transform:none; }
html:not(.plm-cursor-on) .plm-cursor-arrow{ display:none; }
/* if the custom cursor is not running, the browser cursor becomes an arrow instead */
html:not(.plm-cursor-on) .sx-social a{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23fff' stroke='%23111' stroke-width='1.5'/%3E%3Cpath d='M10 22 22 10M12.5 10H22v9.5' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer; }

/* ---------- 2. ABOUT: transparent, single-line, logo-only marquee (takes the place of the three proof points) ----------
   No plate, border, title or text: just the logos sliding on one line. Client Partnership (#clients) is a separate section. */
.club .club-logos{ flex:0 0 100%; min-width:0; max-width:680px; margin:0 0 clamp(22px,2.6vw,36px) auto; padding:0; overflow:hidden; background:none; border:0; box-shadow:none; }
.club .club-logos__track{ display:flex; flex-wrap:nowrap; width:max-content; animation:clubLogosRun var(--cl-speed,40s) linear infinite; will-change:transform; }
.club .club-logos__group{ display:flex; flex:none; flex-wrap:nowrap; align-items:center; gap:clamp(36px,4vw,56px); margin:0; padding:0 clamp(36px,4vw,56px) 0 0; list-style:none; }
.club .club-logos__group li{ flex:none; display:flex; align-items:center; margin:0; padding:0; background:none; border:0; }
.club .club-logos__group img{ display: block;
    width: 120px;
    height: 90px;
    max-width: none;
    object-fit: contain;
    background: none;
    border: 0;
    box-shadow: none;
    filter: none;
    opacity: 1; }
.club .club-logos__group img[src*="ak-client-l-03"]{ height:auto; width:132px; }
.club .club-logos.is-off .club-logos__track{ animation-play-state:paused; }
@keyframes clubLogosRun{ to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){
  .club .club-logos__track{ animation:none; }
  .club .club-logos{ overflow-x:auto; scrollbar-width:none; }
  .club .club-logos::-webkit-scrollbar{ display:none; }
}
/* Client Partnership: the rows are driven by script (random order); without script the original CSS loop still runs */
.ts.is-rand .ts__track{ animation:none !important; }
.ts.is-rand .ts__group{ padding-right:0; }
/* buttons row */
.club .club-cta__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:inherit; gap:16px 28px; }
@media (max-width:1199.98px){
  .club .club-logos{ max-width:none; margin-left:0; }
}
@media (max-width:767.98px){
  /* the logos get a full-width row of their own; only the two buttons keep the one-line sideways scroller */
  html body .club .club-cta{ flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; overflow:visible !important; gap:24px !important; padding-bottom:0; }
  html body .club .club-cta > *{ flex:0 0 auto !important; white-space:normal; max-width:100%; }
  html body .club .club-logos{ width:100%; margin:0; max-width:100%;        padding-top: 20px;
        padding-bottom: 20px; }
  html body .club .club-cta__actions{
    flex-wrap:nowrap; justify-content:flex-start; gap:12px 20px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none;
  }
  html body .club .club-cta__actions::-webkit-scrollbar{ display:none; }
  html body .club .club-cta__actions > *{ flex:0 0 auto; white-space:nowrap; }
}

/* ---------- 3. SELECTED PROJECTS: View more / View less ---------- */
.sx-grid > li.is-capped{ display:none !important; }
.sx-more{ display:flex; justify-content:center; margin:clamp(28px,4vw,48px) 0 0; }
.sx-more[hidden], .sx-more__btn[hidden]{ display:none !important; }
html body .sx-more__btn{ cursor:pointer; }
.sx-grid > li.is-revealed{ animation:sxMoreIn .75s var(--sx-ease, cubic-bezier(.16,1,.3,1)) both; animation-delay:calc(var(--rv,0) * 70ms); }
@keyframes sxMoreIn{ from{ opacity:0; translate:0 26px; } to{ opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:reduce){ .sx-grid > li.is-revealed{ animation:none; } }
@media (max-width:767.98px){ .sx-more{ margin-top:22px;display: none; } }

/* ===========================================================
   MOBILE FINAL ADJUSTMENTS (phones only - desktop untouched)
   1 Hero HUD never overlaps the hero text   2 Buttons wrap instead of scrolling sideways
   =========================================================== */

/* ---------- 1. HERO: "01 / 03  OUTDOOR COURTS" gets its own reserved row under the text/buttons ---------- */
/* phones (portrait + landscape): the content block keeps 84px free at the bottom and the HUD sits inside it */
@media (max-width:767.98px){
  html body .ak-hero .ak-hero__content{ padding-bottom:84px; }
  html body .akc-hud{ left:20px; right:20px; bottom:5px !important  ; flex-wrap:wrap; row-gap:8px; }
  @supports (height:100lvh){
    html body .ak-hero .ak-hero__content{ padding-bottom:calc(84px + (100lvh - 100svh)); }
    html body .akc-hud{ bottom:calc(34px + (100lvh - 100svh)); }
  }
}
/* large phones in landscape / small tablets: same idea - lift the text block, drop the HUD underneath it */
@media (min-width:768px) and (max-width:1199.98px){
  html body .ak-hero .ak-hero__content{ bottom:84px; }
  html body .akc-hud{ bottom:34px; }
}

/* ---------- 2. BUTTON ROWS: wrap onto as many rows as needed, no sideways scrolling ---------- */
@media (max-width:767.98px){
  html body .club .club-cta__actions,
  html body .cta .cta__actions,
  html body .ak-services__cta-actions,
  html body .sx-phil .ak-services__cta-actions,
  html body .footer-courts .footer-courts__actions,
  html body .footer-courts .footer-courts__pills{
    flex-wrap:wrap !important; overflow:visible !important; max-width:100%; padding-bottom:0;
    -webkit-overflow-scrolling:auto; overscroll-behavior-x:auto; scrollbar-width:auto; -ms-overflow-style:auto;
  }
  html body .club .club-cta__actions > *,
  html body .cta .cta__actions > *,
  html body .ak-services__cta-actions > *,
  html body .footer-courts .footer-courts__actions > *,
  html body .footer-courts .footer-courts__pills > *{ flex:0 0 auto; max-width:100%; }

  /* quote form: sport options */
  html body .book.ak-quote .booker-fig .field .opts{
    flex-wrap:wrap; overflow:visible; scroll-snap-type:none; scroll-behavior:auto; padding:4px 2px;
    -webkit-overflow-scrolling:auto; overscroll-behavior-x:auto; scrollbar-width:auto;
  }

  /* Selected Projects: category buttons */
  html body .sx-cats__track{ overflow:visible; padding:0; cursor:default; touch-action:auto; -webkit-overflow-scrolling:auto; overscroll-behavior-x:auto; scrollbar-width:auto; }
  html body .sx-cats__set{ width:100%; flex-wrap:wrap; gap:8px; }
  html body .sx-cats__nav{ display:none !important; }
}
@media (max-width:575.98px){
  /* FAQ tabs */
  html body .faq__tabs{ flex-wrap:wrap; overflow:visible; margin-inline:0; padding:0; scrollbar-width:auto; }
}


/* ===========================================================
   FINAL ADJUSTMENTS 2: hero HUD in flow on phones, minimal menu button, dark preloader
   =========================================================== */

/* ---------- HERO HUD (phones): sits in the page flow under the text and buttons, so it can never overlap them in any orientation ---------- */
@media (max-width:767.98px){
  html body .ak-hero .ak-hero__content{ padding-bottom:24px; }
  html body section.ak-court-hero .akc-hud{
    position:relative; left:auto; right:auto; bottom:auto; order:5; flex:0 0 auto;
    margin:0 20px 30px; padding-top:6px; flex-wrap:wrap; row-gap:8px;
  }
  @supports (height:100lvh){
    html body .ak-hero .ak-hero__content{ padding-bottom:24px; }
    html body section.ak-court-hero .akc-hud{ margin-bottom:calc(30px + (100lvh - 100svh)); }
  }
}

/* ---------- MENU BUTTON (phones): no border, a clean dark chip with two short lines; opens into a white chip with a cross ---------- */
@media (max-width:767.98px){
  html body .akm-burger{
    width:44px; height:44px; border:0 !important; border-radius:0 !important;
    background:rgba(10,10,10,.72); color:#fff;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 8px 22px rgba(0,0,0,.18);
  }
  html body .akm-burger__box{ width:22px; height:12px; }
  html body .akm-burger__box i{ height:2px; border-radius:0; transition:top .45s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
  html body .akm-burger__box i:nth-child(1){ top:1px; left:0; width:100%; }
  html body .akm-burger__box i:nth-child(2){ opacity:0; top:5px; }
  html body .akm-burger__box i:nth-child(3){ top:9px; left:auto; right:0; width:62%; }
  html body .akm-burger:active .akm-burger__box i:nth-child(3){ width:100%; }
  html.akm-open body .akm-burger{ box-shadow:none; }
  html.akm-open body .akm-burger .akm-burger__box i:nth-child(1){ top:5px; transform:rotate(45deg); }
  html.akm-open body .akm-burger .akm-burger__box i:nth-child(2){ opacity:0; transform:scaleX(.2); }
  html.akm-open body .akm-burger .akm-burger__box i:nth-child(3){ top:5px; width:100%; transform:rotate(-45deg); }
}

/* ---------- PRELOADER: dark background (animation untouched); the logo, text and dot flip to white so they stay visible ---------- */
html body #plm-preloader{ background:#0a0a0a; }
html body #plm-preloader .plm-pre-logo{ color:#fff; }
html body #plm-preloader .plm-pre-logo svg{ fill:#fff; }
html body #plm-preloader .plm-pre-dot{ background:#fff; }

/* ===========================================================
   MOBILE OVERFLOW FIX (About / .club)
   Root cause: main.css sets .club-grid to "1fr" (= minmax(auto,1fr)) at <=860px, and the rule above makes .club-cta
   overflow:visible, so the grid item lost its automatic min-width:0. The logo marquee track (width:max-content, ~566px)
   then stretched the whole column -> page wider than the phone -> horizontal scrollbar.
   Fix: let the column and its items shrink to the screen; the marquee is clipped by .club-logos (overflow:hidden).
   =========================================================== */
.club .club-grid > *{ min-width:0; }
.club .club-cta, .club .club-logos{ min-width:0; }
@media (max-width:860px){
  html body .club .club-grid{ grid-template-columns:minmax(0,1fr); }
  html body .club .club-cta{ max-width:100%; }
}