/* Self-hosted so the production CSP can omit 'unsafe-inline' and every
   third-party font origin entirely. Latin subset only. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/css/anton-latin.woff2') format('woff2');
}

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

:root {
  --paper: #EDEAE6;
  --paper-2: #E4E0DB;
  --line: #D6D1CB;
  --ink: #242424;
  --dim: #7A756F;
  --accent: #6F183A;
}

html { scroll-behavior: smooth; }
body {
  /* Helvetica Neue where installed (macOS/iOS); Arial is the metric-safe
     fallback on Windows/Android — near-identical proportions. */
  font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.micro {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
a.micro { transition: color 0.25s; }
a.micro:hover { color: var(--ink); }
a.micro:focus-visible, .cta:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

/* ── Stage — small, centred, quiet ── */
.stage {
  padding: 92px 28px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mark-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  user-select: none;
}
.mark-row .sigil {
  width: 30px;
  height: auto;
  flex: none;
}
.wordmark {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-transform: lowercase;
  font-size: 46px;
  line-height: 0.82;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.wordmark span { color: var(--accent); }
.tagline {
  margin-top: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
}

/* CTA under the two mains */
.mains-cta { text-align: center; padding: 44px 28px 0; }

/* ── Gallery ── */
.plates { padding: 0 20px; }
.mains {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.main-plate {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-2);
}
.main-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Product cards ── */
.range-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.range-label {
  margin: 76px 0 30px;
  text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--dim);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 22px;
}
.card { display: flex; flex-direction: column; }
.card-shot { aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card h3 {
  margin-top: 16px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
}
.card .sub {
  margin-top: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.card .meta { margin-top: 9px; font-size: 12.5px; color: #5C5751; }
.card .card-cta { margin-top: 16px; }
.card .btn { width: 100%; padding: 14px 16px; font-size: 10px; letter-spacing: 0.16em; }

.card details { margin-top: 14px; border-top: 1px solid var(--line); }
.card details summary {
  list-style: none; cursor: pointer;
  padding: 13px 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dim);
  transition: color 0.2s;
}
.card details summary::-webkit-details-marker { display: none; }
.card details summary:hover { color: var(--ink); }
.card details summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.card details summary::after { content: '  +'; }
.card details[open] summary::after { content: '  \2212'; }
.spec {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  padding-bottom: 16px;
  font-size: 12.5px; line-height: 1.6;
}
.spec dt {
  padding-top: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
}
.spec dd { color: #5C5751; }

/* Icon sprite host. Kept in flow at zero size rather than display:none,
   which stops <use> resolving in some browsers. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── #inmysolo UGC strip — small, dense, worn-by-real-people ── */
.ugc-wrap { max-width: 1180px; margin: 0 auto; padding: 84px 20px 0; }
.ugc-head { text-align: center; margin-bottom: 24px; }
.ugc-head .tag {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(22px, 3.4vw, 34px);
  text-transform: lowercase;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.ugc-head .tag b { font-weight: 400; color: var(--accent); }
.ugc-head p {
  margin-top: 10px;
  font-size: 13px; color: var(--dim); letter-spacing: 0.02em;
}
.ig-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color 0.2s;
}
.ig-more:hover { border-bottom-color: var(--accent); }
.ig-more:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.ig-ico { width: 14px; height: 14px; flex-shrink: 0; }
.ugc {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ugc .cell { aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-2); }
.ugc .cell img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(.22,.61,.36,1); }
.ugc .cell:hover img { transform: scale(1.05); }

/* view-more accordion for the rest of the community photos */
.ugc-more { max-width: 980px; margin: 0 auto; }
.ugc-more summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  padding: 22px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.2s;
}
.ugc-more summary::-webkit-details-marker { display: none; }
.ugc-more summary:hover { color: var(--ink); }
.ugc-more summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.ugc-more summary::after { content: '  +'; }
.ugc-more[open] summary::after { content: '  \2212'; }
.ugc-more[open] summary { margin-bottom: 8px; }
.ugc-more .ugc { margin-top: 8px; }

/* ── Hero routes ── */
.hero-routes {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Enquiry routes ── */
.routes-wrap { max-width: 900px; margin: 0 auto; padding: 84px 28px 104px; }
.routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.route {
  background: var(--paper);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.route h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.route .lede {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.route p { font-size: 13.5px; line-height: 1.7; color: #5C5751; }
/* ── Buttons — flat, sharp, brand burgundy ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--accent);
  transition: background 0.2s, border-color 0.2s;
}
.btn:hover { background: #591230; border-color: #591230; }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
/* WhatsApp variant: WhatsApp's own green, so the destination is obvious
   before the tap. #25D366 is the brand green; #1DA851 is its pressed state. */
.btn-wa {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
}
.btn-wa:hover { background: #1DA851; border-color: #1DA851; }
.wa-ico { width: 15px; height: 15px; flex-shrink: 0; }
.btn-outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.hero-cta { margin-top: 40px; }

.cta { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.route-email { letter-spacing: 0.14em; }

/* ── FAQ ── */
.faq-wrap { max-width: 760px; margin: 0 auto; padding: 0 28px 104px; }
.faq-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--dim);
  text-align: center; margin-bottom: 34px;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 34px 22px 0;
  position: relative;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* + / − indicator */
.faq summary::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 11px; height: 1px; background: var(--ink);
}
.faq summary::before {
  content: ''; position: absolute; right: 9px; top: 50%;
  width: 1px; height: 11px; background: var(--ink);
  transform: translateY(-5px);
  transition: opacity 0.2s;
}
.faq details[open] summary::before { opacity: 0; }
.faq .answer {
  padding: 0 34px 24px 0;
  font-size: 14px; line-height: 1.75; color: #5C5751;
}

/* ── Footer ── */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 44px 28px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.socials {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.socials a:hover { color: var(--ink); }
.socials a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.socials svg { flex-shrink: 0; }
/* Icons carry their own fill/stroke on the <symbol>, so these classes only size.
   Nothing here can accidentally flood an outline glyph solid. */
.soc-ico { width: 14px; height: 14px; }
.footer .wa-number {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-decoration: none;
}
.footer .wa-number:hover { color: var(--ink); }
.footer .legal {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #A39C94;
}

@media (max-width: 860px) {
  /* two-up cards: nine in one column is an unreasonable scroll */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}
@media (max-width: 560px) {
  /* smaller mark on mobile; sigil height matches the wordmark */
  .stage { padding: 64px 20px 44px; }
  .mark-row { gap: 10px; }
  .mark-row .sigil { width: auto; height: 30px; }
  .wordmark { font-size: 34px; }
  /* mains stay side by side on mobile */
  .mains { gap: 8px; }
  /* 3 per row on mobile, portrait cells so faces are never cropped */
  .ugc { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ugc .cell { aspect-ratio: 3 / 4; }
  .cards { gap: 28px 10px; }
  .range-wrap { padding: 0 12px; }
  .range-label { margin: 56px 0 22px; }
  .card h3 { font-size: 15px; }
  .card .meta { font-size: 11.5px; }
  .card .btn { padding: 13px 10px; letter-spacing: 0.12em; }
  .hero-routes { gap: 8px; }
  .hero-routes .btn { padding: 15px 18px; letter-spacing: 0.12em; }
}
@media (max-width: 720px) {
  .routes-wrap { padding: 64px 20px 80px; }
  .route { padding: 34px 24px; }
}
@media (max-width: 520px) {
  .stage { padding: 20px; }
  .corner { bottom: 20px; }
  .corner.br { right: 20px; }
  .plates { padding: 0 12px; }
}