@font-face { font-family: 'Teko'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/teko-600.woff2) format('woff2'); }
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/jakarta-400.woff2) format('woff2'); }
@font-face { font-family: 'Jakarta'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/jakarta-800.woff2) format('woff2'); }
/* Donnybrook Cricket Club concept: "the kit". Navy from the crest, royal blue and sky from the playing shirt's diagonal sash,
   gold from the crest ribbon. Teko headings (like the club's own posters) over Plus Jakarta Sans. */
:root {
  --navy: #0e1d4d; --navy-2: #091437; --royal: #1840b8; --royal-2: #12318f; --sky: #6ec1ff; --gold: #e9b343; --gold-2: #d39d2a;
  --paper: #ffffff; --mist: #eef3fb; --line: #dbe3f1; --ink: #0c1530; --muted: #4d5875; --win: #12804a;
  --d: 'Teko', 'Arial Narrow', sans-serif; --b: 'Jakarta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px; --r: 8px; --cut: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; overflow-x: clip; }
body { margin: 0; font: 400 17px/1.6 var(--b); color: var(--ink); background: var(--paper); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
b, strong { font-weight: 800; }
h1, h2, h3 { margin: 0 0 .35em; text-wrap: balance; }
h1, h2 { font-family: var(--d); font-weight: 600; text-transform: uppercase; line-height: .88; letter-spacing: .005em; }
h2 { font-size: clamp(46px, 6vw, 78px); }
h3 { font: 800 20px/1.2 var(--b); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--gold); padding: 10px 14px; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Kicker: three little sash stripes, then the label */
.kicker { display: inline-flex; align-items: center; gap: 12px; font: 800 12.5px/1 var(--b); letter-spacing: .16em; text-transform: uppercase; color: var(--royal); margin-bottom: 14px; }
.kicker::before { content: ""; width: 26px; height: 14px; transform: skewX(-24deg); background: linear-gradient(90deg, var(--royal) 0 40%, transparent 40% 55%, var(--sky) 55% 80%, transparent 80% 88%, var(--royal) 88%); }
.navy .kicker, .hero .kicker { color: var(--sky); }
.royal .kicker { color: #c4e6ff; }
.navy .kicker::before, .royal .kicker::before, .hero .kicker::before { background: linear-gradient(90deg, #fff 0 40%, transparent 40% 55%, var(--sky) 55% 80%, transparent 80% 88%, #fff 88%); }
.lead { font-size: 19px; color: var(--muted); max-width: 640px; }
.navy .lead, .royal .lead { color: #c9d4f2; }

/* Buttons: cut corners like a shirt panel */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 800 15.5px/1 var(--b); text-decoration: none; padding: 16px 26px; border: 0; cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); transition: background .15s, color .15s; }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 6px var(--navy); }
.btn-gold { background: var(--gold); color: var(--navy-2); }
.btn-gold:hover { background: #f4c45c; }
.btn-royal { background: var(--royal); color: #fff; }
.btn-royal:hover { background: var(--royal-2); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.go::after { content: "→"; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header */
.concept { background: var(--navy-2); color: #b8c3e3; text-align: center; font-size: 13px; padding: 8px 16px; }
.concept b { color: #fff; }
.site-head { background: #fff; position: sticky; top: 0; z-index: 30; border-bottom: 4px solid var(--royal); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 50px; height: auto; }
.brand span { font: 600 32px/.8 var(--d); text-transform: uppercase; color: var(--navy); padding-top: 6px; }
.brand small { display: block; font: 800 11px/1.2 var(--b); color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 0; }
.nav a { text-decoration: none; font: 800 14px/1 var(--b); padding: 11px 11px; color: var(--navy); }
.nav a:not(.btn):hover { color: var(--royal); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--sky); }
.nav .btn { margin-left: 10px; padding: 14px 22px; }
.menu-btn { display: none; background: var(--navy); color: #fff; border: 0; font: 800 15px/1 var(--b); padding: 13px 18px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }

/* Hero: navy, with the premiership photo cut on the diagonal of the shirt sash */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.hero-photo { position: absolute; top: 0; bottom: 0; left: 50%; right: -12%; transform: skewX(-12deg); transform-origin: 0 100%; overflow: hidden; z-index: -1;
  box-shadow: -10px 0 0 #fff, -28px 0 0 var(--sky), -36px 0 0 #fff, -64px 0 0 var(--royal); }
.hero-photo img { position: absolute; top: 0; left: -18%; width: 125%; height: 100%; max-width: none; object-fit: cover; object-position: 40% 50%; transform: skewX(12deg); transform-origin: 0 100%; }
.sash-m { display: none; }
.fifty { position: absolute; left: -2%; bottom: -14%; z-index: -2; font: 600 clamp(320px, 42vw, 600px)/.8 var(--d); color: transparent; -webkit-text-stroke: 2px rgba(110,193,255,.13); pointer-events: none; user-select: none; }
.hero-in { min-height: min(720px, calc(100vh - 116px)); display: flex; align-items: center; padding-top: 64px; padding-bottom: 96px; }
.hero-text { max-width: 540px; }
.hero h1 { font-size: clamp(60px, 7.6vw, 116px); margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--gold); display: block; }
.hero .lead { color: #d3dbf3; margin-bottom: 28px; }
.photo-tag { position: absolute; right: max(20px, calc((100vw - var(--wrap)) / 2 + 20px)); bottom: 74px; margin: 0; background: var(--gold); color: var(--navy-2); font: 800 13px/1 var(--b); letter-spacing: .02em; padding: 12px 18px 12px 16px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.photo-tag b { font: 600 22px/0 var(--d); text-transform: uppercase; margin-right: 8px; vertical-align: -3px; }

/* Next game, straight from PlayHQ */
.hero-next { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; margin-top: 26px; padding: 14px 20px 14px 14px; background: rgba(9,20,55,.72); border-left: 5px solid var(--sky); text-decoration: none; max-width: 100%; }
.hero-next[hidden] { display: none; }
.hero-next:hover { background: var(--navy-2); }
.hero-next .lbl { grid-row: span 2; display: inline-flex; align-items: center; gap: 7px; background: var(--sky); color: var(--navy-2); font: 800 11px/1 var(--b); letter-spacing: .12em; text-transform: uppercase; padding: 9px 11px; }
.hero-next .lbl i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-2); animation: blink 1.6s infinite; will-change: opacity; }
.hero-next b { font: 600 27px/1 var(--d); text-transform: uppercase; padding-top: 4px; }
.hero-next .when { font-size: 14px; color: #c3cdea; }
@keyframes blink { 50% { opacity: .25; } }

/* Stats bar */
.stats { background: var(--royal); color: #fff; position: relative; }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 22px 22px 20px; border-left: 1px solid rgba(255,255,255,.22); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { display: block; font: 600 54px/.85 var(--d); padding-top: 6px; }
.stat span { font-size: 14px; font-weight: 800; color: #dfe7ff; }

/* Sections */
.section { padding: 96px 0; }
.mist { background: var(--mist); }
.navy { background: var(--navy); color: #fff; }
.royal { background: var(--royal); color: #fff; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.head > div { max-width: 780px; }
.sub { font: 600 34px/.9 var(--d); text-transform: uppercase; margin-bottom: 16px; padding-top: 4px; }

/* Live games */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 0; }
/* The live dot pulses with transform and opacity only, so it never repaints the page */
.dot { width: 9px; height: 9px; border-radius: 50%; background: #2fbf6b; position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fbf6b; animation: ring 2s infinite; will-change: transform, opacity; }
@keyframes ring { from { transform: scale(1); opacity: .6; } 70%, to { transform: scale(2.8); opacity: 0; } }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 12px; }
.game { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--line); border-radius: var(--r); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.game.home { border-top-color: var(--royal); }
.game .tag2 { position: absolute; top: 16px; right: 16px; font: 800 10.5px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; background: var(--mist); color: var(--muted); padding: 7px 10px; }
.game.home .tag2 { background: var(--royal); color: #fff; }
.game .tag2.win { background: var(--win); color: #fff; }
.game .g { font: 800 11.5px/1.25 var(--b); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-right: 70px; }
.game .t { font: 600 30px/.9 var(--d); text-transform: uppercase; margin: 10px 0 4px; color: var(--navy); }
.game .t small { display: block; font: 800 13px/1.2 var(--b); color: var(--royal); margin-bottom: 4px; text-transform: none; }
.game .w { font-weight: 800; font-size: 15px; }
.game .v { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.xi-btn { margin-top: auto; align-self: flex-start; background: var(--navy); color: #fff; border: 0; font: 800 13px/1 var(--b); padding: 11px 16px; cursor: pointer; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.xi-btn.fresh { background: var(--royal); }
.xi-wait { margin-top: auto; font-size: 13px; color: var(--muted); }
.watch { display: inline-block; margin: 2px 0 6px; font-weight: 800; font-size: 13px; color: var(--royal); }
.empty { color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 36px 0 16px; }
.tabs button { font: 600 21px/1 var(--d); text-transform: uppercase; padding: 10px 14px 7px; border: 0; background: var(--mist); color: var(--navy); cursor: pointer; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.tabs button:hover { background: var(--line); }
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.fx { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; }
.panel h3 { font: 600 30px/.9 var(--d); text-transform: uppercase; margin: 0; padding-top: 4px; color: var(--navy); }
.ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ph span { font-size: 14px; color: var(--muted); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.rows li[hidden] { display: none; }
.rows li.next { background: #e8f1ff; margin: 0 -12px; padding: 11px 12px; border-top-color: transparent; box-shadow: inset 4px 0 0 var(--royal); }
.rows .d { font: 600 22px/.9 var(--d); text-transform: uppercase; color: var(--navy); }
.rows .d small, .rows .o small { display: block; font: 400 13px/1.3 var(--b); color: var(--muted); text-transform: none; }
.rows .o b { display: block; }
.rows .r { font-size: 14px; font-weight: 800; text-align: right; }
.rows .r em { display: block; font-style: normal; font: 800 10.5px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--royal); margin-bottom: 4px; }
.rows .r.win { color: var(--win); }
.rows .r.loss { color: #6a6f80; }
.more { margin-top: 14px; background: var(--navy); color: #fff; border: 0; font: 800 13px/1 var(--b); padding: 12px 18px; cursor: pointer; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.ladder { width: 100%; border-collapse: collapse; font-size: 14px; }
.ladder th { text-align: left; font: 800 10.5px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 3px solid var(--navy); }
.ladder td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ladder tr.ours td { background: #e8f1ff; font-weight: 800; }
.xi { margin: 0; padding: 0 0 0 26px; columns: 2; column-gap: 22px; font-size: 15px; }
.xi li { padding: 4px 0; break-inside: avoid; }
.xi li.tbc { color: var(--muted); font-style: italic; }
.xi i { font-style: normal; font: 800 10px/1 var(--b); text-transform: uppercase; background: var(--royal); color: #fff; padding: 3px 6px; vertical-align: 2px; }

/* Flags */
.flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flag { background: var(--navy-2); border-top: 6px solid var(--gold); border-radius: 0 0 var(--r) var(--r); overflow: hidden; display: flex; flex-direction: column; }
.flag figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1a45; }
.flag figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pennant { aspect-ratio: 16 / 10; display: grid; place-items: center; background: linear-gradient(115deg, var(--navy-2) 0 30%, #fff 30% 33%, var(--sky) 33% 42%, #fff 42% 44%, var(--royal) 44%); }
.pennant span { font: 600 64px/.8 var(--d); text-transform: uppercase; color: var(--navy-2); background: var(--gold); padding: 18px 46px 10px 30px; clip-path: polygon(0 0, 100% 50%, 0 100%); padding-right: 70px; }
.fb { padding: 22px 24px 26px; }
.flag .yr { font: 600 52px/.8 var(--d); color: var(--gold); padding-top: 6px; }
.flag h3 { font: 600 32px/.95 var(--d); text-transform: uppercase; margin: 10px 0 4px; color: #fff; }
.flag .comp { font: 800 12px/1 var(--b); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: 12px; }
.flag p { color: #c9d4f2; font-size: 15.5px; margin: 0; }

/* Honour roll: trading cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--navy); color: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.card figure { margin: 0; position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--royal); }
.card figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.card figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: var(--navy); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.card .big { position: absolute; left: 16px; bottom: 6px; z-index: 1; font: 600 76px/.8 var(--d); color: var(--gold); text-shadow: 0 2px 0 var(--navy-2), 0 0 24px rgba(9,20,55,.7); }
.card .big small { display: block; font: 800 11px/1 var(--b); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-top: 4px; }
.cb { padding: 14px 20px 22px; }
.card h3 { font: 600 28px/.92 var(--d); text-transform: uppercase; margin: 0 0 6px; padding-top: 4px; }
.card .what { font-size: 13px; font-weight: 800; color: var(--sky); margin-bottom: 10px; }
.card ul { padding: 0; list-style: none; font-size: 14.5px; color: #d3dbf3; }
.card li { padding: 3px 0 3px 16px; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 3px; background: var(--gold); transform: skewX(-24deg); }

/* Captains */
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap figure { margin: 0 0 14px; position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: var(--r); background: var(--royal); }
.cap figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cap .c { position: absolute; right: 14px; top: 14px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--gold); color: var(--navy-2); font: 600 36px/1 var(--d); padding-top: 6px; border-radius: 50%; }
.cap h3 { font: 600 36px/.9 var(--d); text-transform: uppercase; color: var(--navy); margin: 0 0 4px; padding-top: 4px; }
.cap p { margin: 0; color: var(--muted); font-weight: 800; font-size: 15px; }

/* Girls */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.gpic { margin: 0; position: relative; }
.gpic img { width: 100%; border-radius: var(--r); box-shadow: 18px 18px 0 var(--sky); }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; }
.ticks li { padding: 9px 0 9px 34px; position: relative; font-weight: 800; border-top: 1px solid rgba(255,255,255,.18); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 18px; height: 8px; border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(-45deg); }
.who { display: grid; gap: 2px; background: var(--navy); padding: 18px 22px; border-left: 5px solid var(--gold); }
.who small { font: 800 11px/1.2 var(--b); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.who b { font: 600 32px/.95 var(--d); text-transform: uppercase; padding-top: 4px; }
.who a { font-size: 15px; color: #fff; overflow-wrap: anywhere; }

/* Play */
.play { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prog { border: 1px solid var(--line); border-top: 6px solid var(--royal); border-radius: 0 0 var(--r) var(--r); padding: 24px; display: flex; flex-direction: column; }
.prog h3 { font: 600 40px/.9 var(--d); text-transform: uppercase; color: var(--navy); padding-top: 4px; }
.prog > p { color: var(--muted); }
.prog ul { padding: 0 0 0 18px; margin: 0 0 18px; font-size: 15px; }
.prog li { padding: 3px 0; }
.closes { font-size: 13.5px; font-weight: 800; color: var(--royal); margin: auto 0 14px; }
.prog .btn { align-self: flex-start; }

/* Story */
.story { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.story li { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); }
.story .k { font: 600 40px/.85 var(--d); color: var(--gold); padding-top: 4px; }
.story h3 { color: #fff; margin-bottom: 4px; }
.story p { margin: 0; color: #c9d4f2; font-size: 15.5px; }

/* Sponsors */
.gold { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--navy); color: #fff; padding: 28px 32px; border-radius: var(--r); border: 3px solid var(--gold); margin-bottom: 16px; }
.gold small { font: 800 11.5px/1 var(--b); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.gold h3 { font: 600 52px/.9 var(--d); text-transform: uppercase; margin: 8px 0 6px; padding-top: 4px; }
.gold p { margin: 0; color: #c9d4f2; max-width: 620px; }
.gold .btn-navy { background: var(--gold); color: var(--navy-2); }
.sps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sp { background: #fff; border-radius: var(--r); padding: 20px; text-decoration: none; display: flex; flex-direction: column; border-bottom: 4px solid var(--sky); transition: transform .15s; }
.sp:hover { transform: translateY(-3px); }
.sp h3 { font: 600 28px/.9 var(--d); text-transform: uppercase; color: var(--navy); padding-top: 4px; }
.sp p { font-size: 14px; color: var(--muted); }
.sp span { margin-top: auto; font-size: 13px; font-weight: 800; color: var(--royal); }
.sp span::after { content: " →"; }
.also { margin: 28px 0; }
.also h3 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.also ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.also li { background: #fff; border: 1px solid var(--line); padding: 9px 14px; font-weight: 800; font-size: 14px; color: var(--navy); }
.partner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 28px; }
.partner h3 { font: 600 34px/.9 var(--d); text-transform: uppercase; color: var(--navy); padding-top: 4px; margin-bottom: 6px; }
.partner p { margin: 0; color: var(--muted); }

/* Club */
.grounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; }
.ground { border-left: 5px solid var(--royal); padding: 4px 0 4px 20px; }
.ground h3 { font: 600 32px/.9 var(--d); text-transform: uppercase; color: var(--navy); padding-top: 4px; margin-bottom: 4px; }
.ground .ad { font-weight: 800; font-size: 14px; color: var(--royal); margin-bottom: 8px; }
.ground p { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.ground a { font-weight: 800; font-size: 14px; color: var(--royal); }
.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.sub { color: var(--navy); }
.people { display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 18px; row-gap: 1px; align-items: center; background: var(--mist); padding: 13px 16px; border-radius: var(--r); min-width: 0; }
.person small, .person b { grid-column: 1; }
.person a { grid-column: 2; text-align: right; min-height: 26px; display: flex; align-items: center; justify-content: flex-end; }
.person small { font: 800 10.5px/1.2 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.person b { font-size: 16px; }
.person a { font-size: 14px; color: var(--royal); overflow-wrap: anywhere; }
.safe { background: var(--navy); color: #fff; padding: 28px; border-radius: var(--r); }
.safe .sub { color: #fff; }
.safe p { color: #c9d4f2; font-size: 15.5px; }
.safe a { color: #fff; }
.safe .inc { margin: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }

/* Footer */
.foot { background: var(--navy-2); color: #c3cdea; padding: 64px 0 34px; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot img { width: 120px; margin-bottom: 14px; }
.foot h2 { font: 600 26px/1 var(--d); color: #fff; margin-bottom: 10px; }
.foot ul { list-style: none; padding: 0; }
.foot li { padding: 3px 0; }
.foot a { color: #fff; }
.ack { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) { .dot::after, .hero-next .lbl i { animation: none; } .sp:hover { transform: none; } }

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .sps { grid-template-columns: repeat(3, 1fr); }
  .nav a { padding: 11px 8px; }
}
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: stretch; padding: 10px 20px 20px; box-shadow: 0 20px 30px rgba(9,20,55,.16); }
  .nav.open { display: flex; }
  .nav a { padding: 15px 10px; font-size: 17px; }
  .nav .btn { margin: 10px 0 0; justify-content: center; }
  .site-head .wrap { position: relative; }
}
@media (max-width: 900px) {
  .hero-photo { position: relative; left: 0; right: 0; transform: none; box-shadow: none; aspect-ratio: 820 / 574; z-index: 0; }
  .hero-photo img { position: static; width: 100%; height: 100%; left: 0; transform: none; }
  .sash-m { display: block; position: absolute; left: 0; right: 0; width: 100%; top: calc(100vw * 574 / 820 - 15vw); height: 16vw; z-index: 1; }
  .hero-in { min-height: 0; padding-top: 10px; padding-bottom: 46px; position: relative; z-index: 2; }
  .fifty { bottom: auto; top: 50%; }
  .photo-tag { top: 14px; right: 14px; bottom: auto; font-size: 12px; padding: 10px 14px 10px 12px; }
  .photo-tag b { font-size: 19px; }
  .stats .wrap { grid-template-columns: 1fr 1fr; }
  .stat { padding: 18px 16px; border-top: 1px solid rgba(255,255,255,.22); }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .flags, .caps, .play, .fx, .split, .two, .grounds { grid-template-columns: minmax(0, 1fr); }
  .story { grid-template-columns: 1fr; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .caps { gap: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .cards { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person a { grid-column: 1; text-align: left; justify-content: flex-start; }
  .sps { grid-template-columns: 1fr 1fr; }
  .rows li { grid-template-columns: 70px 1fr; }
  .rows .r { grid-column: 2; text-align: left; }
  .xi { columns: 1; }
  .story li { grid-template-columns: 86px 1fr; }
  .stat b { font-size: 44px; }
  .gold { padding: 22px; }
  .gold h3 { font-size: 42px; }
  .brand span { font-size: 28px; }
  .gpic img { box-shadow: 10px 10px 0 var(--sky); }
  .card figure { aspect-ratio: 4 / 3.3; }
  .caps { gap: 12px; }
  .cap { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .cap figure { margin: 0; aspect-ratio: 1; grid-row: span 2; align-self: start; }
  .cap h3 { align-self: end; font-size: 32px; }
  .cap p { align-self: start; }
  .cap .c { width: 30px; height: 30px; font-size: 22px; padding-top: 4px; right: 6px; top: 6px; }
}