/* Find us page (about.html), October 13, 2026 (Fable, overnight round). The System and Academy language on the
   page that finds a club, says who we are and gives the ways to reach us: navy and court blue surfaces, lime
   actions, heavy Outfit headings with the curvy lime underline on the key words, one icon system (lime line icons
   on navy tiles), cards with the 16 px radius and the inset hairline, generous spacing and the calm reveal on
   scroll (script.js adds is-reveal-ready and is-visible to every [data-reveal] block, styles.css draws the fade).
   The club finder keeps every hook club-finder.js reads (.finder, [data-region], .finder-map, [data-map-feedback],
   #region-title, #map-caption, [data-reset], [data-rotate], [data-finder-announcement] and the four globe paths)
   and sits on the court blue band in the System page's frame. Who we are sits on the warm white band with the
   three things we do in one dark card beside it, as the Pricing page keeps its calculator. Every section sits on
   the site's 1280 px shell, so headings and cards share one left edge with the header and footer. The company
   details and the long text live on legal.html, Company information, and the page links to it. Width caps are in em,
   never ch: ch follows the zero of whichever face is drawing, so a ch cap gave the fallback face a different box and a
   different line count until Outfit arrived. Each em value is the old ch value at that text's weight (Outfit's zero is
   0.656 em at weight 400, 0.655 at 500, 0.666 at 700 and 0.671 at 800), so the Outfit rendering is unchanged.
   Loaded after styles.css. */
.about-1013 { --warm: #f4f2eb; --warm-ink: #0b1226; --warm-muted: #4b5570; --warm-body: #2a3350; --warm-line: rgba(11, 18, 38, 0.14); --court: #111d36; --court-lit: #172746; --card: #0f192f; --stage: #070b14; --quiet: #a8b5ca; --soft: #d5deee; background: var(--navy); }
html, body { scroll-snap-type: none; }
.about-1013 main { overflow: clip; }
.about-1013 button { font-family: inherit; }
.about-1013 img { max-width: 100%; }
.about-1013 .icon { flex-shrink: 0; }
.about-1013 .section-title { font-weight: 800; letter-spacing: -0.03em; }
.about-1013 .band { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.about-1013 .band-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; max-width: 12.08em; text-wrap: balance; }
.about-1013 .band-deck { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 36.74em; text-wrap: pretty; }
.about-1013 .band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.about-1013 .band-head .band-deck { margin-top: 0; }
.about-1013 .text-link { gap: 10px; }
/* The short qualifier the law wants next to the finder: 13 px, the page's quiet ink, the link in ink with a lime line. */
.about-1013 .fine { color: var(--quiet); font-size: 13px; line-height: 1.6; max-width: 65.6em; text-wrap: pretty; }
.about-1013 .fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.about-1013 .fine a:hover { color: var(--lime); }
/* Anchors other pages land on (#find-clubs, #founder) use the site's scroll padding (100 px in styles.css), which already
   clears the 80 px sticky header by 20 px. A scroll margin here would add to it and leave dead air above the band. */

/* The curved stroke sits in its own space below the words. Long phrases may wrap on narrow screens. */
.hl-mark { position: relative; display: inline-block; max-width: 100%; padding-bottom: 14px; background: transparent; color: inherit; vertical-align: baseline; }
.title-swoosh { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 14px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }

/* The Academy count keeps the lime variant inside the dark Who we are card. */
.hl-mark.hl-lime { color: var(--lime); }
.who-card .hl-mark { padding-bottom: 6px; margin-bottom: -2px; font-weight: 600; }
.who-card .title-swoosh { height: 6px; stroke-width: 3.5; }

/* The icon system: a 24 grid, 1.75 lime strokes, round caps, on a 48 px navy tile with a soft lime halo. */
.pillar-icon { flex: 0 0 auto; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; border-radius: 13px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .pillar-dot { fill: var(--lime); stroke: none; }
.pillar-text { min-width: 0; }

/* 1. Hero: the headline with the curvy underline, one line, two doors and the three ways to find us. The heading and
   the line cap their width in em, not ch: ch follows the zero of whichever face is drawing (Outfit's zero is 0.671 em
   at weight 800 and 0.656 em at 400, Arial's is 0.556 em), so a ch cap gave the fallback face a narrower box and a
   second line until Outfit arrived, and the page jumped. 12.08 em is 18ch of Outfit 800, 38.05 em is 58ch of Outfit
   400, so the Outfit rendering is unchanged. */
.about-1013 .hero { position: relative; padding-block: clamp(24px, 3vw, 36px) clamp(44px, 5.5vw, 72px); background: linear-gradient(180deg, #121d38 0%, #0c1220 42%, var(--navy) 100%); }
.hero-intro { max-width: 1250px; margin-top: 72px; margin-inline: auto; text-align: center; }
.hero h1 { max-width: 12.08em; margin-inline: auto; font-size: clamp(44.8px, 5.76vw, 83.2px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
/* The curvy underline scales with the headline: a heavier stroke and more room than under a band title. */
.hero h1 .hl-mark { padding-bottom: clamp(14px, 1.4vw, 20px); }
.hero h1 .title-swoosh { height: clamp(14px, 1.4vw, 20px); stroke-width: 9; }
.hero-line { margin: 14px auto 0; max-width: 38.05em; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-wrap: balance; }
.hero .actions { justify-content: center; gap: 10px 14px; margin-top: 24px; }
/* Three ways to find PadelCue: a row of three points on hairlines, each opened by its tile, no boxes. */
.hero-points { list-style: none; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 40px); }
.hero-points li { display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--line-strong); color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.hero-points strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: clamp(17px, 1.4vw, 20px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.hero-points .pillar-icon { margin-top: -2px; }

/* 2. Find a club, on court blue: the region tabs, the globe in the System page's frame beside the results, the
   invitation to clubs as one card, and the short qualifier under it. */
.finder { background: var(--court); }
.finder [hidden] { display: none !important; }
.finder-regions { display: flex; gap: 26px; overflow-x: auto; border-block: 1px solid var(--line); scrollbar-color: var(--blue) var(--court); scrollbar-width: thin; }
/* Six pixels of side padding, given back by the margins, so the focus ring sits clear of the letters without moving the tabs. */
.finder-regions button { position: relative; flex: 0 0 auto; min-height: 56px; margin-inline: -6px; padding: 14px 6px; border: 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.2s; }
.finder-regions button:hover { color: var(--ink); }
.finder-regions button[aria-pressed="true"] { color: var(--lime); }
.finder-regions button[aria-pressed="true"]::after { content: ""; position: absolute; inset: auto 6px 0; height: 2px; background: var(--lime); }
.finder-regions button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; border-radius: 6px; }
/* Forced colours (Windows High Contrast) repaint the lime underline in the Canvas colour, so the pressed region tab
   carries a Highlight outline there and its underline takes the Highlight colour. */
@media (forced-colors: active) {
  .finder-regions button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .finder-regions button[aria-pressed="true"]::after { background: Highlight; }
}
/* The prompts sit centred beside the globe card, as the Academy hero points sit beside the montage. */
.finder-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: clamp(24px, 3vw, 36px); }
/* Without JavaScript the globe stays hidden and the prompts take one readable column. */
.finder-layout:has(.finder-map[hidden]) { grid-template-columns: minmax(0, 640px); }
.finder-map { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: clamp(18px, 2vw, 28px); border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0004; }
.globe-stage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 640 / 560; }
.finder-globe { display: block; width: 100%; height: 100%; }
.globe-feedback { position: absolute; top: 50%; left: 50%; width: min(80%, 310px); margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--stage); color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 1px #ffffff14; }
.globe-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.globe-bottom figcaption { color: var(--soft); font-size: 13px; line-height: 1.5; }
.globe-controls { display: flex; align-items: center; gap: 6px; }
.about-1013 .globe-controls[hidden] { display: flex !important; visibility: hidden; }
.globe-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #ffffff3d; border-radius: 999px; background: #091326e6; color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; line-height: 1.2; cursor: pointer; transition: border-color 0.2s; }
.globe-controls button:hover { border-color: var(--lime); }
.globe-controls button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.globe-controls button[data-rotate="west"] svg { transform: rotate(180deg); }
.globe-controls svg { width: 18px; height: 18px; }
.finder-results { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
.finder-results-heading { margin-bottom: 18px; }
.finder-results-heading h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.finder-results-heading p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.finder-empty { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.finder-empty p { margin: 0; max-width: 23.58em; color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.finder-empty .text-link { margin-top: 10px; color: var(--lime); font-size: 13px; }
.finder-empty .text-link:hover { color: var(--ink); }
/* The second divider spans the column like the first. The paragraph is capped at 23.58em (36ch), so its own border would stop
   short: a pseudo element takes the paragraph's place in flow (its static position, top auto) and stretches between
   the column's edges (left and right 0 against the positioned .finder-empty), then moves up by the padding to sit
   where the border was. */
.finder-empty .text-link + p { position: static; margin-top: 24px; padding-top: 22px; }
.finder-empty .text-link + p::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; margin-top: -22px; background: var(--line); }
.finder-static-note { margin: 16px 0 0; max-width: 30.18em; color: var(--muted); font-size: 14px; line-height: 1.6; }
.finder-invitation { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.4vw, 30px); border-radius: 16px; background: var(--court-lit); box-shadow: inset 0 0 0 1px #ffffff14; }
.finder-invitation h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.finder-invitation p { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 34.11em; text-wrap: pretty; }
.finder-invitation .button-dark { flex-shrink: 0; gap: 12px; min-height: 52px; padding-inline: 22px; font-size: 15px; }
.finder-fine { margin-top: 20px; }

/* 3. Who we are, on warm white: the story on the paper and the three things we do in one dark card beside it.
   Lime strokes on the warm paper would wash out, so the card carries the navy and the lime stays crisp. */
.who-band { background: var(--warm); color: var(--warm-ink); border-top: 0; color-scheme: light; }
.who-band .section-title { color: var(--warm-ink); }
.who-band .band-deck { color: var(--warm-muted); }
.who-band :focus-visible { outline-color: var(--warm-ink); }
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.who-story { min-width: 0; }
.who-lead { max-width: 15.98em; color: var(--warm-ink); font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; text-wrap: balance; }
/* The positioning line carries the founder statement's hand drawn lime stroke, line by line (box-decoration-break:
   clone gives every wrapped line its own stroke), fully under the words as on the System page. */
.who-underline { padding-bottom: 0.54em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C48 3 82 13 126 9 S196 4 236 8' fill='none' stroke='%23c8e84a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 0.46em; background-position: 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.who-story > p + p { margin-top: 16px; }
/* The motto is its own paragraph so it balances on its own lines (a longer first sentence left one word of it dangling
   with a one word stroke), and it follows the lead with no gap, as one thought. */
.who-lead + .who-motto { margin-top: 0; }
.who-story p:not(.who-lead) { max-width: 32.8em; color: var(--warm-body); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; text-wrap: pretty; }
.who-story p:not(.who-lead) a { color: var(--warm-ink); text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.who-story p:not(.who-lead) a:hover { text-decoration-color: var(--warm-ink); }
.who-founder { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--warm-line); }
.who-founder strong { color: var(--warm-ink); font-weight: 800; }
.who-story .text-link { margin-top: 10px; color: var(--warm-ink); }
.who-story .text-link:hover { color: var(--warm-muted); }
.who-card { list-style: none; margin: 0; padding: clamp(22px, 2.4vw, 30px); border-radius: 16px; background: var(--card); color: var(--ink); color-scheme: dark; box-shadow: 0 24px 60px #0b122638, inset 0 0 0 1px #ffffff14; }
.who-card li { display: flex; align-items: flex-start; gap: 16px; min-width: 0; color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; text-wrap: pretty; }
.who-card li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.who-card strong { color: var(--ink); font-weight: 800; }
.who-card .pillar-icon { margin-top: -2px; }
.who-card .who-link { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 32px; margin-top: 4px; color: var(--lime); font-size: 13px; font-weight: 600; }
.who-card .who-link:hover { color: var(--ink); }
.who-card .who-link .icon { width: 16px; height: 16px; flex-basis: 16px; }
.who-card :focus-visible { outline-color: var(--lime); }

/* 4. Reach us, on navy: the contact card across the band with the lime edge, then the three places we post. */
.reach { background: linear-gradient(180deg, var(--navy) 0%, #0c1529 100%); }
.reach-contact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(20px, 2.4vw, 32px); padding: clamp(22px, 2.4vw, 30px); border-radius: 16px; background: var(--court-lit); box-shadow: inset 0 0 0 1.5px var(--lime), 0 24px 60px #0006; }
.reach-contact h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.reach-contact p { margin: 6px 0 0; max-width: 34.11em; color: var(--soft); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.reach-contact .reach-meta { margin-top: 8px; color: var(--muted); font-size: 14px; }
.reach-contact .reach-meta a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.reach-contact .reach-meta a:hover { color: var(--lime); }
.reach-contact .button-dark { gap: 12px; min-height: 52px; padding-inline: 22px; font-size: 15px; }
.reach-grid { list-style: none; margin: clamp(16px, 2vw, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.reach-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(22px, 2.2vw, 30px); border-radius: 16px; background: var(--court); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0004; transition: box-shadow 0.2s; }
.reach-card h3 { margin-top: 8px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.reach-card p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
/* The whole card is the link's target. */
.reach-card .reach-link { margin-top: auto; padding-top: 6px; color: var(--lime); font-size: 13px; }
.reach-card .reach-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.reach-card .reach-link:hover { color: var(--ink); }
.reach-card:focus-within { outline: 2px solid var(--lime); outline-offset: 4px; }
.reach-card .reach-link:focus-visible { outline: none; }
@media (hover: hover) {
  .reach-card:hover { box-shadow: inset 0 0 0 1px #c8e84a66, 0 24px 60px #0006; }
}

/* Calm under reduced motion: nothing slides and nothing fades. The globe already stops animating (club-finder.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .about-1013 *, .about-1013 *::before, .about-1013 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Band heads: the deck's baseline meets the title's last line. The 14 px matches the room the curvy
   underline takes below the title. */
@media (min-width: 761px) {
  .band-head .band-deck { margin-bottom: 14px; }
}
@media (min-width: 1000px) {
  /* The deck takes whatever width is left beside the title (up to its 36.74em, the old 56ch), so it never drops under it. */
  .band-head .band-deck { flex: 1 1 0; min-width: 0; text-align: right; text-wrap: balance; }
}
@media (min-width: 861px) and (max-height: 900px) {
  .about-1013 .hero { padding-top: 22px; }
  .hero .actions { margin-top: 20px; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .about-1013 .nav-shell { padding-inline: 24px; }
  .about-1013 .nav-cta { gap: 8px; }
}
@media (max-width: 999px) {
  .finder-layout { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); }
  .who-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .who-lead { max-width: 19.98em; }
  .reach-contact { grid-template-columns: auto minmax(0, 1fr); }
  .reach-contact .button-dark { grid-column: 2; justify-self: start; }
}
@media (max-width: 860px) {
  .hero-intro { margin-top: 32px; }
  /* The three ways stack on the step column, one under the other. */
  .hero-points { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; }
  .hero-points li { padding-block: 16px; }
  .hero-points li:last-child { padding-bottom: 0; }
}
@media (max-width: 760px) {
  /* The globe, the prompts, the invitation and the cards stack, one under the other. */
  .finder-layout, .finder-layout:has(.finder-map[hidden]) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .finder-invitation { flex-direction: column; align-items: flex-start; }
  .finder-invitation .button-dark { width: 100%; justify-content: center; }
  .reach-grid { grid-template-columns: minmax(0, 1fr); }
  .reach-contact .button-dark { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}
@media (max-width: 700px) {
  .about-1013 .band { padding-block: 48px; }
  .about-1013 .hero { padding-top: 28px; padding-bottom: 44px; }
  .hero h1 { max-width: none; font-size: clamp(33.6px, 9.44vw, 57.6px); }
  .hero h1 .hl-mark { padding-bottom: 12px; }
  .hero h1 .title-swoosh { height: 12px; stroke-width: 7; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .actions a { justify-content: center; width: 100%; }
  .finder-map, .finder-invitation, .who-card, .reach-card, .reach-contact { border-radius: 12px; }
  .finder-map { padding: 14px; }
  .finder-regions button { min-height: 52px; font-size: 13px; }
  .globe-bottom { flex-direction: column; align-items: flex-start; }
  .pillar-icon { width: 40px; height: 40px; padding: 8px; }
  .hero-points li, .who-card li { gap: 14px; }
  .who-lead { font-size: clamp(20px, 5.6vw, 24px); }
}
@media (max-width: 560px) {
  /* The four region tabs form two balanced rows of two (North America and United States, then United Kingdom and GCC)
     instead of running off the edge of a phone screen. Each tab keeps its own width, so the lime underline fits its word. */
  .finder-regions { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 22px; row-gap: 0; overflow: visible; }
  .finder-regions button { justify-self: start; min-height: 48px; padding-block: 12px; }
}
@media (max-width: 360px) {
  .about-1013 .finder .band-deck { min-height: 3lh; }
  .about-1013 #finder-title { display: grid; grid-template-columns: 3em 2.25em; width: 5.25em; }
  .about-1013 #finder-title .hl-mark { width: 100%; }
  .hero h1 { font-size: 33.6px; }
  .finder-map { padding: 12px; }
}