/* ---------- self-hosted fonts ----------
   Served from the same origin as the page, so no third-party round trip and
   no serial wait for a stylesheet on fonts.googleapis.com before the font
   files are even discovered. Each page head preloads these so the request
   starts with the HTML parse rather than after the CSS is parsed, and
   netlify.toml caches them for a year.

   font-display: swap means every page converges on the same rendering. A
   brief fallback is possible on a genuinely cold cache; after that the files
   are cached and the real fonts paint immediately. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}

/* CUPS PLEASE — design tokens
   paper  #FBF8F3  warm off-white page
   ink    #16120F  near-black text
   flame  #E8452C  primary accent (press vermillion)
   kraft  #F2E7D8  photo/card backing
*/
:root {
  --paper: #FBF8F3;
  --white: #FFFFFF;
  --ink: #16120F;
  --sub: #635C55;
  --flame: #E8452C;
  --flame-dark: #C4351E;
  --kraft: #F2E7D8;
  --line: #E7DED1;
  --highlight: #FFE68A;
  --radius: 14px;
  --wrap: 1140px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: var(--flame); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame);
  display: block;
  margin-bottom: 14px;
}

.lead { font-size: 1.15rem; color: var(--sub); max-width: 56ch; }

/* ---------- header ---------- */
.site-header {
  background: rgba(251,248,243,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 24px; max-width: var(--wrap); margin: 0 auto;
}
.logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.4rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.logo span { color: var(--flame); }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 0.96rem; font-weight: 500; }
.nav-links a:hover:not(.btn) { color: var(--flame); }
.nav-links a.active:not(.btn) { color: var(--flame); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font-size: 0.95rem; cursor: pointer;
  color: var(--ink); font-family: var(--font-body); font-weight: 500;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: 13px 26px; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--flame); color: #fff; }
.btn-primary:hover { background: var(--flame-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-kraft { background: var(--kraft); color: var(--ink); }
.btn-kraft:hover { background: var(--ink); color: var(--paper); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 64px; }
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 52px; align-items: center;
}
.hero h1 { margin: 0 0 20px; }
.hero h1 em { font-style: italic; color: var(--flame); }
.hero .lead { margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-shot {
  border-radius: var(--radius); overflow: hidden;
  background: var(--kraft); aspect-ratio: 4 / 3;
  box-shadow: 0 18px 40px -22px rgba(22,18,15,0.45);
}
.hero-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- fact bar ---------- */
.facts { background: var(--ink); color: var(--paper); }
.facts .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact { padding: 30px 26px; border-left: 1px solid rgba(255,255,255,0.14); }
.fact:first-child { border-left: none; padding-left: 24px; }
.fact strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 4px;
}
.fact span { color: #B8AFA5; font-size: 0.92rem; line-height: 1.5; display: block; }

/* ---------- sections ---------- */
section.block { padding: 82px 0; }
.section-head { margin-bottom: 42px; }
.section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- product cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.spec-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.spec-card:hover {
  border-color: var(--flame); transform: translateY(-3px);
  box-shadow: 0 16px 32px -22px rgba(22,18,15,0.4);
}
.spec-card .img { aspect-ratio: 4 / 5; background: var(--kraft); display: block; overflow: hidden; }
.spec-card .img img { width: 100%; height: 100%; object-fit: cover; }
.spec-card .body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.spec-card .code {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--flame); text-transform: uppercase; margin-bottom: 8px;
}
.spec-card h3 { margin-bottom: 8px; }
.spec-card p { color: var(--sub); font-size: 0.95rem; flex: 1; }
.spec-card .sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; }
.size-chip {
  font-size: 0.76rem; font-weight: 500;
  background: var(--paper); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px; color: var(--sub);
}
.spec-card .btn { align-self: flex-start; padding: 10px 20px; font-size: 0.92rem; }

/* ---------- process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; position: relative;
}
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--flame); display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--kraft); margin-bottom: 14px;
}
.step.no-num::before { content: none; counter-increment: none; }
.step h3 { font-size: 1.05rem; margin-bottom: 7px; }
.step p { font-size: 0.93rem; color: var(--sub); }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 16px; }
.gallery-item {
  aspect-ratio: 1; background: var(--kraft); border-radius: var(--radius);
  overflow: hidden;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* clickable grid tiles */
button.gallery-item {
  padding: 0; border: none; cursor: zoom-in; position: relative;
  font: inherit; color: inherit; display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}
button.gallery-item:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(22,18,15,0.5); }
button.gallery-item::after {
  content: "\2197"; position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(22,18,15,0.62); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; opacity: 0; transition: opacity 0.15s;
}
button.gallery-item:hover::after,
button.gallery-item:focus-visible::after { opacity: 1; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,9,7,0.93);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 20px 76px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox img {
  max-width: min(94vw, 900px); max-height: calc(100vh - 110px);
  width: auto; height: auto; border-radius: 10px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9);
}
.lightbox .lb-btn {
  position: absolute; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.28); color: #fff;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.lightbox .lb-btn:hover { background: rgba(255,255,255,0.24); }
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: #9A9088; font-size: 0.85rem; letter-spacing: 0.08em;
}
.lightbox .lb-spinner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #9A9088; font-size: 0.9rem;
}
@media (max-width: 640px) {
  .lightbox { padding: 16px 12px 70px; }
  .lightbox .lb-prev { left: 8px; }
  .lightbox .lb-next { right: 8px; }
  .lightbox .lb-btn { width: 40px; height: 40px; }
}

/* ---------- diagram ---------- */
.diagram-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 30px; text-align: center;
}
.diagram-card svg { max-width: 600px; margin: 0 auto 20px; width: 100%; height: auto; display: block; }
.diagram-card figcaption { color: var(--sub); font-size: 0.94rem; max-width: 60ch; margin: 0 auto; }
.legend {
  list-style: none; counter-reset: leg;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px;
  margin: 26px auto 0; max-width: 760px; text-align: left;
}
.legend li {
  counter-increment: leg; position: relative;
  padding-left: 34px; font-size: 0.92rem; color: var(--sub); line-height: 1.55;
}
.legend li::before {
  content: counter(leg); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--kraft); color: var(--ink);
  font-size: 0.75rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.legend li:nth-child(3)::before { background: var(--flame); color: #fff; }
.legend strong { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .legend { grid-template-columns: 1fr; } }

.legend-note {
  max-width: 760px; margin: 18px auto 0; text-align: left;
  font-size: 0.88rem; color: var(--sub); font-style: italic;
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; padding: 22px 0; font-weight: 600; font-size: 1.05rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--flame); font-weight: 500; font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item .answer { padding: 0 0 24px; color: var(--sub); max-width: 68ch; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--paper); padding: 72px 0; }
.cta-band h2 { color: var(--paper); margin-bottom: 12px; }
.cta-band p { color: #B8AFA5; margin-bottom: 28px; max-width: 55ch; }
.cta-band .btn-ghost { border-color: var(--paper); color: var(--paper); }
.cta-band .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* ---------- forms ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px; max-width: 720px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 7px; }
.field .hint { font-size: 0.84rem; color: var(--sub); margin-top: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
fieldset.field { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
fieldset.field legend { font-weight: 600; font-size: 0.92rem; padding: 0 6px; }
fieldset.field label { display: flex; align-items: center; gap: 9px; font-weight: 400; margin: 7px 0; }
fieldset.field input { width: auto; }

/* placeholder marker for facts the supplier must confirm */
.tbd {
  background: var(--highlight); border-bottom: 2px dashed #C79A18;
  padding: 0 4px; border-radius: 3px; color: var(--ink);
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #B8AFA5; padding: 60px 0 32px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.site-footer h4 {
  color: var(--paper); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px;
}
.site-footer a { color: #B8AFA5; text-decoration: none; }
.site-footer a:hover { color: var(--flame); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 9px; }
.site-footer .fine {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px;
  font-size: 0.85rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
  text-align: center;
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: 68px 0 48px; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { margin-top: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-shot { aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .facts .wrap { grid-template-columns: 1fr; }
  .fact { border-left: none; border-top: 1px solid rgba(255,255,255,0.14); padding-left: 24px; }
  .fact:first-child { border-top: none; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-3, .grid-2, .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  section.block { padding: 58px 0; }
  .form-card { padding: 24px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; padding: 18px 24px; gap: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
}