/* Racket Lab LDN — brand: Ink / Chalk / Court cerulean, Fraunces + IBM Plex */
:root {
  --ink: #16181d;
  --ink-soft: #3a3e47;
  --chalk: #f7f4ee;
  --chalk-deep: #eeeae1;
  --court: #1878b8;
  --court-deep: #0f5c90;
  --line: #d8d3c8;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --body: "IBM Plex Sans", -apple-system, sans-serif;
  --display: "Fraunces", Georgia, serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { font-family: var(--body); color: var(--ink); background: var(--chalk); line-height: 1.6; font-size: 17px; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* String-bed grid motif (16x19) */
.stringbed {
  background-image:
    repeating-linear-gradient(90deg, rgba(22,24,29,.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(22,24,29,.10) 0 1px, transparent 1px 34px);
}

/* Header */
header.site { position: sticky; top: 0; z-index: 50; background: var(--chalk); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.logo span { color: var(--court); }
nav.main a { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); text-decoration: none; margin-left: 22px; }
nav.main a:hover, nav.main a:focus-visible { color: var(--court); }
nav.main a.book { color: var(--chalk); background: var(--ink); padding: 9px 16px; border-radius: 3px; }
nav.main a.book:hover { background: var(--court); color: var(--chalk); }
@media (max-width: 640px) { nav.main a:not(.book) { display: none; } }

/* Hero */
.hero { padding: 84px 0 72px; border-bottom: 1px solid var(--line); position: relative; }
.eyebrow { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--court); margin-bottom: 18px; }
h1 { font-family: var(--display); font-weight: 550; font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.06; letter-spacing: -.02em; max-width: 15ch; }
h1 em { font-style: italic; color: var(--court); }
.hero p.lede { max-width: 52ch; margin: 22px 0 30px; font-size: 1.1rem; color: var(--ink-soft); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-block; font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; padding: 14px 24px; border-radius: 3px; }
.btn-primary { background: var(--court); color: var(--chalk); }
.btn-primary:hover { background: var(--court-deep); }
.btn-ghost { color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { border-color: var(--court); color: var(--court); }
.hero .spec { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); margin-top: 26px; }

/* Sections */
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--line); }
h2 { font-family: var(--display); font-weight: 550; font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.015em; margin-bottom: 10px; }
.sub { color: var(--ink-soft); max-width: 58ch; margin-bottom: 34px; }

/* Service cards as spec sheets */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service { background: var(--chalk); padding: 26px 22px; display: flex; flex-direction: column; }
.service h3 { font-family: var(--display); font-weight: 550; font-size: 1.15rem; margin-bottom: 8px; }
.service .price { font-family: var(--mono); color: var(--court); font-size: 1.05rem; margin-bottom: 12px; }
.service p { font-size: .93rem; color: var(--ink-soft); flex: 1; }
.service .turn { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* Details / dropdowns */
details { border: 1px solid var(--line); background: #fbf9f4; margin-bottom: 10px; }
details summary { cursor: pointer; padding: 16px 20px; font-family: var(--display); font-weight: 550; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-family: var(--mono); color: var(--court); font-size: 1.2rem; }
details[open] summary::after { content: "–"; }
details .body { padding: 0 20px 18px; color: var(--ink-soft); font-size: .95rem; }
details .body ul { margin: 8px 0 0 18px; }

/* Strings table */
table.strings { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.strings th { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; text-align: left; color: var(--ink-soft); padding: 10px 12px; border-bottom: 2px solid var(--ink); }
table.strings td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.strings td.mono { font-family: var(--mono); font-size: .84rem; }
@media (max-width: 640px) { table.strings .hide-m { display: none; } }

/* Locations */
.locations { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.loc { border: 1px solid var(--line); background: #fbf9f4; padding: 28px 24px; }
.loc .tag { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--chalk); background: var(--court); display: inline-block; padding: 4px 10px; border-radius: 2px; margin-bottom: 14px; }
.loc h3 { font-family: var(--display); font-weight: 550; font-size: 1.3rem; margin-bottom: 8px; }
.loc p { font-size: .94rem; color: var(--ink-soft); margin-bottom: 14px; }
.loc a.more { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--court); text-decoration: none; }
.loc a.more:hover { text-decoration: underline; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step h3 { font-family: var(--display); font-weight: 550; font-size: 1.05rem; margin: 10px 0 6px; }
.step p { font-size: .92rem; color: var(--ink-soft); }
.step .n { font-family: var(--mono); color: var(--court); font-size: .8rem; }

/* Dark band CTA */
.band { background: var(--ink); color: var(--chalk); padding: 64px 0; }
.band h2 { color: var(--chalk); }
.band .sub { color: #b9bdc6; }
.band.stringbed {
  background-image:
    repeating-linear-gradient(90deg, rgba(247,244,238,.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(247,244,238,.07) 0 1px, transparent 1px 34px);
  background-color: var(--ink);
}

/* FAQ + footer */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: .88rem; color: var(--ink-soft); }
footer .cols { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--court); }
footer .mono { font-family: var(--mono); font-size: .78rem; }

/* Location page specifics */
.breadcrumb { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); padding-top: 28px; }
.breadcrumb a { color: var(--court); text-decoration: none; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 44px; }
.prose p { margin-bottom: 16px; color: var(--ink-soft); }
.prose strong { color: var(--ink); }

a:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 2px solid var(--court); outline-offset: 3px; }