:root {
  --navy: #16294f;
  --blue: #2563c4;
  --celeste: #75AADB;
  --bg: #f7f5f2;
  --card: #ffffff;
  --ink: #1d1d1f;
  --muted: #6b6b70;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 680px; }
.centre { text-align: center; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247,245,242,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 26px; width: auto; display: block; }
.site-footer .brand img { height: 30px; }
.site-header nav { display: flex; gap: 28px; align-items: center; }
.site-header nav a {
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
}
.site-header nav a:hover { color: var(--blue); }
.nav-cta {
  padding: 8px 16px; border: 1px solid var(--navy); border-radius: 999px; color: var(--navy) !important;
}
.nav-cta:hover { background: var(--navy); color: #fff !important; }

/* Hero */
/* padding:0 is load-bearing: the global `section` rule below adds 72px top and
   bottom, and because .hero-overlay is inset:0 the dark gradient was rendering
   over that empty padding as grey bands above and below the image. */
.hero { position: relative; overflow: hidden; padding: 0; }
/* Taller than it was: the shot is the brand's only piece of atmosphere, so it
   earns the room. Capped at 900px so it never swallows a laptop screen whole,
   and object-position holds the player off-centre-left as the crop widens. */
.hero-img {
  width: 100%; height: min(88vh, 900px); min-height: 480px;
  object-fit: cover; object-position: 42% 28%; display: block;
}
.hero-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  padding-bottom: 72px;
  background: linear-gradient(to top, rgba(10,18,38,0.55), rgba(10,18,38,0.05) 55%);
}
.hero h1 {
  font-family: 'Archivo', 'Inter', sans-serif;
  color: #fff; font-size: clamp(36px, 5.6vw, 64px); font-weight: 700;
  font-stretch: 90%;
  letter-spacing: -0.028em; line-height: 1.04; margin-bottom: 14px;
}
.hero-sub { color: rgba(255,255,255,0.9); font-size: clamp(16px, 2vw, 20px); margin-bottom: 18px; }
.hero-scarcity {
  display: inline-block; margin-bottom: 26px;
  color: #fff; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px;
  backdrop-filter: blur(4px); background: rgba(255,255,255,0.08);
}
.hero-scarcity strong { font-weight: 700; }

.btn {
  display: inline-block; background: var(--celeste); color: var(--navy);
  font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 13px 28px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(22,41,79,0.25); }

/* Intro */
.intro { padding: 84px 0 16px; }
/* The lede used to be a narrow column of text floating in a wide empty band.
   Giving it a surface, an accent edge and a label anchors it to the page and
   makes it read as a statement rather than a stray paragraph. */
.statement {
  background: var(--card);
  border-left: 4px solid var(--celeste);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 1px 3px rgba(22,41,79,0.06), 0 10px 30px rgba(22,41,79,0.05);
  padding: 38px 44px 34px;
  /* Full wrap width, so its edges line up with the product grid below rather
     than sitting inset. The label moves into its own column so the extra width
     is used rather than leaving the text stranded across a very long measure. */
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}
.statement > * { grid-column: 2; }
.statement .eyebrow { grid-column: 1; grid-row: 1 / span 2; margin-top: 7px; }
.statement .eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 14px;
}
.lede { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }
.statement-sig {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule, #eceae6);
  font-size: 14px; color: var(--muted); font-style: italic;
}

/* Sections */
section { padding: 72px 0; }
h2 {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 700;
  font-stretch: 92%;                 /* slight condense — reads as sportswear */
  letter-spacing: -0.022em; color: var(--navy); margin-bottom: 12px;
}
.section-sub { color: var(--muted); font-size: 16px; margin-bottom: 40px; max-width: 560px; }
.centre .section-sub { margin-left: auto; margin-right: auto; }

/* Cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 3px rgba(22,41,79,0.06), 0 8px 24px rgba(22,41,79,0.05);
}
/* height:auto is required, not cosmetic: the width/height attributes on the
   <img> (there for layout stability) otherwise pin the used height to 1200px,
   which makes aspect-ratio inert and stretches the cards to full image height. */
.card img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; display: block; }
.card figcaption { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.card-title { font-weight: 600; font-size: 16px; color: var(--navy); }
.card-note { font-size: 14px; color: var(--muted); }

/* Nicknames */
.nicknames { background: #fff; }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.split-text p { margin-bottom: 18px; color: #3a3a3e; }
.split-text h2 { margin-bottom: 20px; }
.fine { font-size: 13px; color: var(--muted); }

/* Launch */
.launch { background: var(--navy); color: #fff; }
.launch h2 { color: #fff; }
.launch .section-sub { color: rgba(255,255,255,0.75); }
.signup { display: flex; gap: 12px; justify-content: center; margin: 32px 0 16px; flex-wrap: wrap; }
.signup input {
  flex: 1 1 260px; max-width: 340px; padding: 13px 20px; font-size: 15px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08); color: #fff; outline: none;
  font-family: inherit;
}
.signup input::placeholder { color: rgba(255,255,255,0.5); }
.signup input:focus { border-color: var(--celeste); background: rgba(255,255,255,0.12); }
.launch .fine { color: rgba(255,255,255,0.55); }
.signup-msg { min-height: 22px; font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 4px; }
.signup-msg.ok { color: var(--celeste); font-weight: 600; }
.signup-msg.err { color: #ffb4b4; }
.signup button[disabled] { opacity: .6; cursor: default; }

/* Footer */
.site-footer { padding: 40px 0; background: var(--bg); }
.footer-inner { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }

/* Mobile */
@media (max-width: 820px) {
  .grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .hero-img { height: 68vh; min-height: 420px; object-position: 36% 25%; }
  .hero-overlay { padding-bottom: 48px; }
  .intro { padding: 56px 0 8px; }
  .statement { padding: 28px 24px 26px; border-left-width: 3px; grid-template-columns: 1fr; gap: 0; }
  .statement > *, .statement .eyebrow { grid-column: 1; }
  .statement .eyebrow { grid-row: auto; margin-top: 0; }
  section { padding: 56px 0; }
  .site-header nav { gap: 16px; }
  .site-header nav a { font-size: 13px; }
}
@media (max-width: 480px) {
  .site-header nav a:not(.nav-cta) { display: none; }
}


/* ── 404 ──────────────────────────────────────────────────────────────── */
.notfound { padding: 120px 0 140px; }
.nf-code {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; font-stretch: 88%;
  font-size: clamp(64px, 14vw, 132px); line-height: 1; color: var(--celeste);
  letter-spacing: -0.04em; margin-bottom: 4px;
}
.notfound h1 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; font-stretch: 92%;
  font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.022em; color: var(--navy);
  margin-bottom: 12px;
}
.notfound .section-sub { margin-left: auto; margin-right: auto; margin-bottom: 28px; }

/* ── legal pages ──────────────────────────────────────────────────────── */
.legal { padding: 72px 0 96px; }
.legal h1 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; font-stretch: 92%;
  font-size: clamp(32px, 4.4vw, 46px); letter-spacing: -0.024em;
  color: var(--navy); margin-bottom: 18px;
}
.legal .lede { margin-bottom: 36px; }
.legal h2 { font-size: clamp(19px, 2.2vw, 23px); margin: 34px 0 8px; }
.legal p { margin-bottom: 14px; color: #3a3a3e; }
.legal .fine { margin-top: 36px; }

/* Links in body copy and the footer */
.legal a, .site-footer a { color: var(--blue); text-decoration: none; }
.legal a:hover, .site-footer a:hover { text-decoration: underline; }
.nickname-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 42px;
}
.nickname-card img { background: #f7f6f2; }
.nickname-card.lead { grid-column: span 2; }
.nickname-card.lead img { aspect-ratio: 3 / 2; object-fit: contain; }
.nicknames > .wrap > .fine { margin-top: 28px; }
@media (max-width: 760px) {
  .nickname-grid { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
  .nickname-card.lead { grid-column: span 2; }
}
@media (max-width: 480px) {
  .nickname-grid { grid-template-columns: 1fr; }
  .nickname-card.lead { grid-column: span 1; }
  .nickname-card.lead img { aspect-ratio: 3 / 4; }
}


/* ── Fabric ───────────────────────────────────────────────────────────── */
/* The reference for this was a supplier spec sheet: stock close-ups, heavy
   icons, shouty caps. The substance is right, the register isn't — that look
   reads cheap, which is the opposite of the positioning. So: the same three
   claims, drawn as line icons in the brand blue and set in the site's own
   voice. No stock photography, nothing that needs licensing. */
/* A woven navy ground behind this section. Generated rather than stock: the
   product renders are flat CGI with no usable texture (stddev of 3-6 on a
   crop), and stock fabric photography is both a licensing question and the
   look we were trying to get away from. The weave is fine enough to read as
   cloth without competing with the text over it. */
.fabric {
  background-color: #0f1e36;
  background-image: url('assets/fabric-texture.webp');
  background-size: cover;
  background-position: center;
}
.fabric h2 { color: #fff; }
.fabric .section-sub { color: rgba(255,255,255,0.72); }
.spec-grid { margin-top: 8px; }
.spec {
  /* Translucent so the weave stays visible through the cards rather than
     being boxed out by them. */
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  backdrop-filter: blur(6px);
}
.spec-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 18px;
  color: var(--celeste);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
}
.spec-icon svg { width: 32px; height: 32px; display: block; }
.spec h3 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; font-stretch: 94%;
  font-size: 18px; letter-spacing: -0.012em; color: #fff; margin-bottom: 8px;
}
.spec p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.78); }

@media (max-width: 820px) {
  .spec { padding: 24px 22px 22px; }
  .spec-icon { width: 48px; height: 48px; margin-bottom: 14px; }
  .spec-icon svg { width: 26px; height: 26px; }
}