/* VersaCourt Europe. Type and colour follow versacourt.com's own guide: Open Sans throughout (self-hosted, SIL Open Font
   Licence), condensed bold uppercase for titles, primary blue #0091e2, deep blue #005a8c, orange #e56524 pill buttons for the
   calls to action, #333 text. The chrome stays quiet: the colour on every page comes from the courts. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url(/assets/fonts/OpenSans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url(/assets/fonts/OpenSans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #f4f8fc;
  --paper-2: #e9f1f8;
  --white: #ffffff;
  --ink: #333333;
  --ink-2: #4d5560;
  --ink-3: #737b86;
  --rule: #d3dee9;
  --blue: #0091e2;
  --blue-deep: #005a8c;
  --orange: #e56524;
  --orange-deep: #c9531a;
  --navy: #073579;
  --navy-deep: #052555;
  --sky: #e2f1fa;
  --display: "Open Sans", "Arial Narrow", Arial, sans-serif;
  --text: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pill: 30px;
  --head-h: 64px;
  --gutter: clamp(16px, 4vw, 56px);
  --shadow: 0 22px 44px -28px rgba(7, 53, 121, .5);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--text); color-scheme: light; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }

/* a faint tile grid, the only pattern on the site */
.dots { background-color: var(--white); background-image: linear-gradient(rgba(7, 53, 121, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 53, 121, .06) 1px, transparent 1px); background-size: 26px 26px; }
.dots-fade { position: relative; isolation: isolate; }
.dots-fade::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(7, 53, 121, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 53, 121, .07) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 60%); mask-image: linear-gradient(115deg, #000 0%, transparent 60%); }

/* type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; line-height: .98; letter-spacing: -.012em; margin: 0; color: var(--navy); }
h1 { font-size: clamp(44px, 8.2vw, 124px); }
h2 { font-size: clamp(32px, 4.9vw, 68px); }
h3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.05; letter-spacing: 0; }
.kicker { font: 700 condensed 13px/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--blue); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 28px; height: 3px; background: var(--blue); }
p.lead { font-size: clamp(17px, 1.5vw, 21px); max-width: 56ch; color: var(--ink-2); }
.burst { color: var(--blue); }

/* header */
.site-head { position: sticky; top: 0; z-index: 50; height: var(--head-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.site-head .logo img { height: 40px; width: auto; }
/* One lockup, set on a true baseline. The wordmark's letters run to the very bottom of the logo file, so the image's bottom edge IS its baseline
   (measured: letters from y 40.45 to 53.66 of 53.66, capitals 9.9 px tall at this size). The three items align on their baselines: the image by its
   bottom edge, the hairline by its bottom edge (it is as tall as the wordmark's capitals), and EUROPE by its text baseline, with its capitals sized
   to the wordmark's (Open Sans cap height 0.714 em, so 13.8 px type gives 9.9 px capitals). */
.site-head .logo.lockup { display: flex; align-items: baseline; gap: 13px; text-decoration: none; }
.site-head .rule { flex: none; width: 1px; height: 10px; background: #a9bfd4; }
.site-head .region { font: 400 13.8px/1 var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--blue-deep); margin-right: -.32em; }
.site-head nav { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); }
.site-head nav a { white-space: nowrap; font: 700 condensed 17px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--navy); padding: 6px 0 3px; border-bottom: 3px solid transparent; transition: border-color .2s var(--ease); }
.site-head nav a:hover, .site-head nav a[aria-current] { border-color: var(--blue); }
.site-head nav a.btn { color: var(--white); border: 2px solid var(--orange); padding: 9px 18px; }
.site-head nav a.btn:hover { border-color: var(--orange-deep); }
@media (max-width: 940px) { .site-head nav a.opt { display: none; } }
.site-head .logo { flex: none; }
@media (max-width: 480px) { .site-head .region, .site-head .rule { display: none; } }
@media (max-width: 720px) { :root { --head-h: 56px; } .site-head .region { font-size: 11px; letter-spacing: .26em; margin-right: -.26em; } .site-head .rule { height: 8px; } .site-head .logo.lockup { gap: 10px; } .site-head { gap: 12px; padding: 0 12px; } .site-head .logo img { height: 32px; } .site-head nav { gap: 14px; } .site-head nav a { font-size: 13px; letter-spacing: .06em; } .site-head nav a.btn { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 condensed 19px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; cursor: pointer;
  color: var(--white); background: var(--orange); border: 2px solid var(--orange); border-radius: var(--pill); padding: 13px 28px 13px; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--orange-deep); border-color: var(--orange-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.alt { background: var(--white); color: var(--blue-deep); border-color: var(--blue); }
.btn.alt:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn.blue { background: var(--blue); border-color: var(--blue); }
.btn.blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn.sm { font-size: 14px; padding: 9px 18px 9px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.ink .btn.alt { background: transparent; color: var(--white); border-color: var(--white); }
.ink .btn.alt:hover { background: var(--white); color: var(--navy); }
.ink .btn.blue:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

/* sections */
section { padding: clamp(56px, 9vw, 128px) var(--gutter); position: relative; }
.wrap { max-width: 1320px; margin: 0 auto; }
.panel { background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.slash { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%); }
.ink { background: var(--navy-deep); color: var(--white); }
.ink h1, .ink h2, .ink h3 { color: var(--white); }
.ink .kicker { color: #7cc4ea; } .ink .kicker::before { background: #7cc4ea; }
.ink p.lead { color: #c5d3e6; }
.ink .burst { color: #7cc4ea; }
.ink .panel h3 { color: var(--navy); }

/* hero */
.hero { min-height: calc(92dvh - var(--head-h)); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 3vw; padding-top: 5vw; padding-bottom: 7vw; }
.hero h1 em { font-style: normal; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.hero-art { position: relative; aspect-ratio: 1 / 0.92; }
.hero-art .frame { position: absolute; }
.hero-art .f1 { left: 0; top: 4%; width: 78%; aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.hero-art .f2 { right: 0; top: 0; width: 36%; aspect-ratio: 1; border: 6px solid var(--paper); }
.hero-art img.render { position: absolute; right: -4%; bottom: -6%; width: 80%; height: auto; filter: drop-shadow(0 26px 28px rgba(7, 53, 121, .38)); animation: rise .9s var(--ease) both; }
.hero-art .tag { position: absolute; right: 0; bottom: 0; z-index: 2; font: 700 condensed clamp(15px, 1.5vw, 20px)/1 var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--navy); color: var(--white); padding: 9px 14px 9px; }
@keyframes rise { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hero-art img.render { animation: none; } html { scroll-behavior: auto; } }

/* ticker */
.ticker { background: var(--navy); color: var(--white); overflow: hidden; white-space: nowrap; padding: 0; }
.ticker div { display: inline-block; padding: 12px 0 12px; font: 700 condensed 19px/1 var(--display); text-transform: uppercase; letter-spacing: .14em; animation: tick 34s linear infinite; }
.ticker span { margin: 0 22px; } .ticker span::after { content: "■"; font-size: .55em; vertical-align: .25em; margin-left: 44px; color: var(--blue); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker div { animation: none; } }

/* grids */
.grid { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head > div { max-width: 820px; } .sec-head h2 { margin-top: 14px; }

/* feature cards */
.feat { padding: 26px 24px 28px; position: relative; border-top: 4px solid var(--blue); }
.feat b { font: 700 condensed 54px/0.8 var(--display); color: var(--sky); -webkit-text-stroke: 1.5px var(--blue); display: block; margin-bottom: 18px; }
.feat h3 { margin-bottom: 10px; } .feat p { margin: 0; color: var(--ink-2); }

/* kit cards: the render is the colour */
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 700 condensed 16px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--navy); background: var(--white); padding: 8px 16px 8px; border-radius: var(--pill); cursor: pointer; color: var(--navy); transition: background .2s var(--ease), color .2s var(--ease); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.kit { display: flex; flex-direction: column; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.kit:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(7, 53, 121, .6); }
.kit .art { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; display: block; }
.kit .art img { position: absolute; inset: 3%; width: 94%; height: 94%; object-fit: contain; transition: transform .4s var(--ease); filter: drop-shadow(0 14px 14px rgba(7, 53, 121, .22)); }
.kit:hover .art img { transform: scale(1.05); }
.kit .ref { align-self: flex-start; margin-top: -4px; font: 700 condensed 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; background: var(--navy); color: var(--white); padding: 5px 9px; }
.kit .type { position: absolute; left: 12px; top: 12px; font: 700 condensed 12px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; background: var(--sky); color: var(--navy); padding: 5px 8px 5px; }
.kit .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.kit h3 { font-size: clamp(24px, 2.2vw, 30px); }
.kit dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px 14px; margin: 0; }
.kit dt { font: 700 condensed 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.kit dd { margin: 3px 0 0; font: 700 condensed 20px/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.kit .sw { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.kit .sw i { width: 22px; height: 22px; border: 1px solid rgba(11, 27, 51, .25); display: inline-block; }
.kit .sw span { margin-left: 4px; }
.kit .from { margin: 0; font-size: 14px; color: var(--ink-2); } .kit .from b { font: 800 condensed 22px/1 var(--display); color: var(--navy); margin: 0 2px; } .kit .from small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.kit .row { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }

/* steps */
.steps { counter-reset: s; }
.step { padding: 24px; border-left: 1px solid rgba(255, 255, 255, .25); }
.step::before { counter-increment: s; content: "0" counter(s); font: 700 condensed 20px/1 var(--display); color: #7cc4ea; letter-spacing: .1em; }
.step h3 { margin: 12px 0 10px; } .step p { margin: 0; color: #c5d3e6; }

/* swatches */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 14px; }
.swatch { border: 1px solid var(--rule); background: var(--white); }
.swatch i { display: block; aspect-ratio: 1; background-image: linear-gradient(rgba(0, 0, 0, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .14) 1px, transparent 1px); background-size: 25% 25%; }
.swatch span { display: block; padding: 9px 9px 7px; font: 700 condensed 14px/1.1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.swatch small { display: block; font: 300 11px/1 var(--text); color: var(--ink-3); margin-top: 3px; letter-spacing: 0; }

/* big CTA */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(48px, 9vw, 132px); margin: 18px 0 30px; }

/* footer */
.site-foot { background: var(--navy-deep); color: #c5d3e6; padding: clamp(40px, 6vw, 80px) var(--gutter) 28px; border-top: 4px solid var(--blue); font-size: 14px; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; max-width: 1320px; margin: 0 auto; }
.site-foot h4 { font: 700 condensed 15px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--white); margin: 0 0 14px; }
.site-foot a { text-decoration: none; display: block; padding: 3px 0; } .site-foot a:hover { color: var(--white); }
.site-foot .logo { height: 44px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.site-foot .legal { max-width: 1320px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 12.5px; color: #93a6c2; }
.site-foot .legal a { display: inline; color: var(--white); }
@media (max-width: 820px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } }

/* page head (shop) */
.page-head { padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(24px, 3vw, 40px); }
.page-head h1 { font-size: clamp(54px, 9vw, 132px); margin: 14px 0 18px; }

/* photography from the VersaCourt library, shown straight */
.frame { position: relative; margin: 0; background: var(--navy-deep); overflow: hidden; box-shadow: var(--shadow); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.frame:hover img { transform: scale(1.04); }
.frame figcaption { position: absolute; left: 0; bottom: 0; z-index: 1; font: 700 condensed 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; background: var(--navy); color: var(--white); padding: 7px 12px 7px; }
.panels { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(120px, 15vw, 220px); gap: clamp(12px, 1.6vw, 22px); }
.panels .p-a { grid-column: span 5; grid-row: span 2; }
.panels .p-b { grid-column: span 4; } .panels .p-c { grid-column: span 3; grid-row: span 2; }
.panels .p-d { grid-column: span 4; } .panels .p-e { grid-column: span 6; } .panels .p-f { grid-column: span 6; }
@media (max-width: 760px) { .panels { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; } .panels .frame { grid-column: span 1 !important; grid-row: span 1 !important; } }

.banner { aspect-ratio: 1163 / 380; margin-bottom: clamp(28px, 4vw, 52px); }
.banner > div { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(14px, 2.4vw, 32px); z-index: 2; }
.banner h2 { color: var(--white); margin-top: 10px; }
.banner .kicker { color: var(--white); } .banner .kicker::before { background: var(--white); }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 37, 85, .82), rgba(5, 37, 85, 0) 62%); pointer-events: none; }
@media (max-width: 700px) { .banner { aspect-ratio: 16 / 10; } }

.tilecard .art { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--rule); display: grid; place-items: center; padding: 18px; }
.tilecard .art img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(7, 53, 121, .25)); }
.tilecard .body { padding: 22px 24px 26px; } .tilecard h3 { margin-bottom: 10px; } .tilecard p { margin: 0; color: var(--ink-2); }
.tilecard.ink { border-color: var(--navy-deep); background: var(--navy-deep); } .tilecard.ink h3 { color: var(--white); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 720px) {
  section { padding: 44px 16px; }
  .hero { min-height: 0; padding-top: 28px; padding-bottom: 44px; gap: 28px; } .hero .cta { gap: 10px; margin-top: 24px; } .hero .cta .btn { flex: 1 1 auto; justify-content: center; }
  .btn { font-size: 16px; padding: 12px 22px; }
  .sec-head { margin-bottom: 24px; } .kits { grid-template-columns: 1fr; gap: 18px; } .kit dd { font-size: 17px; } .kit .row .btn { flex: 1 1 auto; justify-content: center; }
  .feat { padding: 20px 18px 22px; } .feat b { font-size: 42px; margin-bottom: 12px; } .step { padding: 16px 16px; }
  .swatches { grid-template-columns: repeat(3, 1fr); gap: 10px; } .swatch span { font-size: 12px; padding: 7px 7px 6px; }
  .ticker div { font-size: 15px; padding: 10px 0; } .cta-band h2 { margin: 14px 0 22px; }
  .site-foot .cols { gap: 22px; } .site-foot .legal { margin-top: 24px; }
  .order-card .body, .order-form { padding: 18px 16px 22px; }
}