/* ===================================================================
 * DPC Website — Stylesheet
 *
 * Built for WordPress integration. CSS is theme-style and works
 * unchanged when ported. Use --color-* variables for any theming.
 * =================================================================== */

/* === DESIGN TOKENS === */
:root {
  --color-bg: #FFFFFF;
  --color-bg-soft: #FAF8F4;
  --color-bg-card: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-text-soft: #9A9A9A;
  --color-accent: #2D5F3F;        /* deep forest green - stewardship */
  --color-accent-soft: #E8EFE9;
  --color-accent-warm: #C9A961;   /* warm gold - premium accent */
  --color-border: #E8E4DC;
  --color-border-strong: #1A1A1A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --container: 1280px;
  --container-narrow: 880px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Leave room for the 80px sticky header when the browser scrolls an element
 * into view — anchor jumps, focus, and native form-validation scroll all
 * respect scroll-padding, so an invalid field lands below the header, not behind it. */
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
p { color: var(--color-text-muted); }
a { color: inherit; text-decoration: none; }

.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* === LAYOUT === */
.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 2rem; }

section { padding: 5rem 0; }
/* 1.25rem left the content visually pinned to the screen edges on a phone;
   1.5rem gives the text room to breathe without costing a meaningful amount
   of line length. */
@media (max-width: 768px) { section { padding: 3rem 0; } .container, .container-narrow { padding: 0 1.5rem; } }

/* === HEADER === */
.header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.logo {
  font-family: var(--font-serif);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.logo span {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.logo-icon {
  height: 36px;
  width: auto;
  display: block;
}
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1;
}
.logo-name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.logo-tagline {
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.nav { display: flex; gap: 2.25rem; align-items: center; }
.nav a {
  font-size: 0.9rem;
  font-weight: 450;
  color: var(--color-text);
  position: relative;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color 0.2s;
}
.nav a:hover { color: var(--color-accent); }
.nav a.active { color: var(--color-accent); }
.nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-accent);
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-accent);
  color: white;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  white-space: nowrap;
}
.cart-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cart-pill.empty { background: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.25rem;
  align-items: center;
}

@media (max-width: 768px) {
  .nav { gap: 0.75rem; }
  .nav a { display: none; }              /* hide inline links; use the drawer instead */
  .nav-toggle { display: inline-flex; }
}

/* === MOBILE MENU (drawer) === */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu-close {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0.25rem;
  display: inline-flex;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.mobile-menu-links a {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-text);
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: color 0.2s;
}
.mobile-menu-links a:hover,
.mobile-menu-links a.active { color: var(--color-accent); }
.mobile-menu-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
body.menu-open { overflow: hidden; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  /* Drops the ~300ms double-tap wait mobile browsers otherwise keep, which is
   * a large part of why a tap felt unanswered. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #234A31; transform: translateY(-1px); }
/* Pressed state: the compositor can paint this even while the main thread is
 * still busy, so the tap is acknowledged before any script runs. */
.btn:active { transform: translateY(0) scale(0.985); }
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn-outline:hover { background: var(--color-text); color: white; transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  padding: 0.5rem 0;
}
.btn-ghost:hover { color: var(--color-accent); transform: none; }

.btn-arrow::after {
  content: '→';
  transition: transform 0.2s;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* === HOMEPAGE - HERO === */
.hero {
  position: relative;
  padding: 7rem 0 6rem;
  background: linear-gradient(180deg, #FAF8F4 0%, #FFFFFF 100%);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 2rem; } }

.hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}
.hero h1 .accent {
  font-style: italic;
  color: var(--color-accent);
}
.hero p.lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 540px;
  margin-bottom: 2rem;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* === HERO "WATCH THESE FIRST" MODULE === */
.watch-first-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.watch-first-badge svg { color: var(--color-accent-warm); }
.watch-first-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 0.6rem;
}
.watch-first-sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 460px;
  margin-bottom: 1.75rem;
}

.watch-first-cards {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.wf-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.wf-card {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: transform 0.3s;
}
.wf-card:hover { transform: translateY(-3px); }
.wf-card:focus-visible { outline: 2px solid var(--color-accent-warm); outline-offset: 3px; border-radius: var(--radius-lg); }

.wf-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-image: var(--card-image, none), linear-gradient(135deg, var(--bg-1, #2D5F3F), var(--bg-2, #1A3A26));
  background-size: cover;
  background-position: center;
}
.wf-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0.55) 100%);
}
.wf-card-top {
  position: absolute;
  z-index: 1;
  top: 1.1rem;
  left: 1.25rem;
  text-align: left;
}
.wf-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
.wf-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.wf-card:hover .wf-play { transform: translate(-50%, -50%) scale(1.07); }
.wf-play svg { margin-left: 3px; }
.wf-duration {
  position: absolute;
  z-index: 1;
  bottom: 1rem;
  left: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
}

.wf-caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--color-text);
}
.wf-check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-then {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 2.5rem;   /* nudge up to sit at the cards' vertical centre, above captions */
  color: var(--color-accent);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.watch-first-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.75rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.watch-first-note-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-accent);
}
/* Single inline text run so the sentence flows naturally (not split into flex items) */
.watch-first-note-text { text-align: center; }
@media (max-width: 768px) {
  /* Tighter on a phone: the note is a footnote to the videos above it, and the
     default spacing left a conspicuous empty band before the next section. */
  .watch-first-note { margin-top: 1.1rem; padding: 0.75rem 1rem; }
  .hero { padding-bottom: 1.5rem; }
}
.watch-first-note-text strong { color: var(--color-accent); font-weight: 600; white-space: nowrap; }

@media (max-width: 640px) {
  .watch-first-cards { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .wf-then { flex-direction: row; margin: 0; align-self: center; }
  .wf-then svg { transform: rotate(90deg); }
}

/* === HOMEPAGE - VALUE BAR === */
.value-bar {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 2.5rem 0;
  background: var(--color-bg);
}
.value-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 768px) { .value-bar-inner { grid-template-columns: repeat(2, 1fr); } }
.value-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.value-item .marker {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-accent-warm);
  line-height: 1;
}
.value-item .label {
  font-size: 0.9rem;
  font-weight: 450;
  color: var(--color-text);
  margin-bottom: 0.2rem;
}
.value-item .sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* === HOMEPAGE - SOLUTIONS === */
.solutions-section { background: var(--color-bg); }
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.section-header .eyebrow { margin-bottom: 1rem; display: inline-block; }
.section-header h2 { margin-bottom: 1rem; }
.section-header p { max-width: 600px; margin: 0 auto; font-size: 1.05rem; }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .solutions-grid { grid-template-columns: 1fr; } }

.solution-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}
.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.solution-card.feature {
  grid-row: span 1;
  grid-column: span 2;
}
@media (max-width: 900px) { .solution-card.feature { grid-column: span 2; } }
@media (max-width: 600px) { .solution-card.feature { grid-column: span 1; } }

.solution-image {
  aspect-ratio: 16/10;
  background-image: var(--card-image, none), linear-gradient(135deg, var(--card-bg-1, #2D5F3F) 0%, var(--card-bg-2, #1A3A26) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.solution-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(201, 169, 97, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}
.solution-image-label {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}

.solution-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.solution-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.solution-content p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  flex: 1;
}
.solution-content .link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 500;
}
.solution-content .link::after {
  content: '→';
  transition: transform 0.2s;
}
.solution-card:hover .link::after { transform: translateX(4px); }

/* === WHY CHOOSE DPC === */
.why-section {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 2rem; } }

.why-item { position: relative; }
.why-item .num {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 300;
  color: var(--color-accent-warm);
  line-height: 1;
  margin-bottom: 1rem;
  display: block;
}
.why-item h4 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}
.why-item p {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* === EVERY GREAT PROJECT STARTS WITH A CONVERSATION === */
.conversation-section {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Question contrast with a "vs" badge between the two cards */
.conversation-contrast {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto 3rem;
}
.ask-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
}
.ask-card--accent {
  background: var(--color-accent-soft);
  border-color: rgba(45, 95, 63, 0.35);
}
.ask-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.ask-card--accent .ask-icon {
  background: #fff;
  border-color: rgba(45, 95, 63, 0.25);
  color: var(--color-accent);
}
.ask-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.ask-card--accent .ask-label { color: var(--color-accent); }
.ask-question {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-text);
}
.ask-card--accent .ask-question { color: var(--color-accent); }
.conversation-vs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  z-index: 2;
}

/* Icon-led points list */
.conversation-points {
  max-width: 800px;
  margin: 0 auto;
}
.conv-point {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.conv-point:last-child { border-bottom: none; }
.conv-point-icon,
.conv-highlight-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.conv-point p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text);
  padding-top: 0.5rem;
}
.conv-point .conv-emphasis {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-accent);
  line-height: 1.4;
  padding-top: 0.35rem;
}

/* Highlighted closing statement */
.conversation-highlight {
  max-width: 800px;
  margin: 1.5rem auto 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
}
.conversation-highlight .conv-highlight-icon {
  background: transparent;
  width: auto;
  height: auto;
}
.conversation-highlight p {
  border-left: 2px solid rgba(45, 95, 63, 0.3);
  padding-left: 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-accent);
  line-height: 1.45;
}

.conversation-cta {
  text-align: center;
  margin-top: 2.75rem;
}

@media (max-width: 700px) {
  .conversation-contrast { grid-template-columns: 1fr; gap: 2.5rem; }
  .conversation-vs { position: static; transform: none; margin: -1.5rem auto; }
  .conv-point { gap: 1rem; }
  .conv-point-icon, .conv-highlight-icon { width: 44px; height: 44px; }
  .conv-point-icon svg, .conversation-highlight .conv-highlight-icon svg { width: 20px; height: 20px; }
  .conversation-highlight { padding: 1.5rem 1.25rem; gap: 1rem; }
}

/* === TRUSTED PARTNERS === */
.partners-section {
  background: var(--color-bg);
  padding: 4rem 0;
}
.partners-section .eyebrow {
  text-align: center;
  display: block;
  margin-bottom: 2.5rem;
}
/* The logo roster is one paged track at every width, never a wrapped grid:
 * the list keeps growing, and a wrap that leaves one card stranded under a
 * full row reads as a layout bug rather than as a sixth partner. */
.partners-grid {
  /* Cards are sized from how many should share a view, never from a fixed
   * width. That makes one page exactly one track width, so every page starts
   * on a card and the last page is reachable -- with fixed-width cards the
   * leftover was narrower than a card, and mandatory snapping threw the final
   * page straight back to the first. */
  --per-view: 5;
  --partners-gap: 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--partners-gap);
  overflow-x: auto;
  /* Proximity, not mandatory: mandatory snapping cancels a programmatic scroll
   * and yanks the track back to the card it is already aligned to, which left
   * the pagination dots doing nothing. Proximity still snaps a finger swipe. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
@media (prefers-reduced-motion: reduce) { .partners-grid { scroll-behavior: auto; } }
@media (max-width: 1100px) { .partners-grid { --per-view: 4; } }
@media (max-width: 860px)  { .partners-grid { --per-view: 3; } }
@media (max-width: 640px)  { .partners-grid { --per-view: 2; } }
.partners-grid::-webkit-scrollbar { display: none; }
/* Only centred while everything fits. Centring a scroll container puts its
 * left-hand overflow out of reach, so JS grants this once it has measured
 * that there is nothing to page through. */
.partners-grid.is-centered { justify-content: center; }
.partner-card {
  /* Never shrink: a shrinking card would squeeze the whole roster into one
   * view and there would be nothing left to paginate. */
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--partners-gap)) / var(--per-view));
  scroll-snap-align: start;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 130px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.partner-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.partner-logo {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.partner-fallback {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-text-soft);
  letter-spacing: -0.02em;
}

.partners-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
/* JS leaves this empty when the whole roster fits, and an empty dot strip
 * must not leave its margin behind as a gap. */
.partners-dots:empty { display: none; }
.partners-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.partners-dot:hover { background: var(--color-text-muted); }
.partners-dot.active {
  background: var(--color-accent);
  transform: scale(1.2);
}
/* Comfortable tap target without inflating the visible dot. */
.partners-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.partners-dot { position: relative; }

@media (max-width: 640px) {
  /* No side padding on the track: a page has to measure exactly one track
   * width for the snap points and the dots to agree. */
  .partners-grid { --partners-gap: 1rem; }
  .partner-card { padding: 1.25rem; min-height: 110px; }
}

/* === TESTIMONIALS === */
.testimonials-section { background: var(--color-bg-soft); }
.testimonials-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testimonials-grid::-webkit-scrollbar { display: none; }

.testimonials-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .testimonials-page { grid-template-columns: 1fr; } }

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.testimonials-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.testimonials-dot.active {
  background: var(--color-accent);
  transform: scale(1.2);
}

.testimonial {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: relative;
}
.testimonial .quote-mark {
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--color-accent-warm);
  line-height: 0.5;
  margin-bottom: 1rem;
  display: block;
  height: 1.5rem;
}
.testimonial blockquote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.testimonial .attribution {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.testimonial .attribution strong {
  color: var(--color-text);
  font-weight: 500;
  display: block;
}

/* === FEATURED INSPIRATION === */
.featured-section { background: var(--color-bg); }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .featured-grid { grid-template-columns: 1fr; } }

.featured-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.featured-card-image {
  aspect-ratio: 16/9;
  background-image: var(--card-image, none), linear-gradient(135deg, var(--bg-1, #2D5F3F), var(--bg-2, #1A3A26));
  background-size: cover;
  background-position: center;
}
.featured-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.featured-card-icon {
  width: 40px;
  height: 40px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.featured-card-icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.featured-card-body .eyebrow { margin-bottom: 0.5rem; }
.featured-card-body h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.featured-card-body p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* === CTA STRIP === */
.cta-strip {
  background: var(--color-text);
  color: white;
  padding: 4rem 0;
  text-align: center;
}
.cta-strip h2 { color: white; margin-bottom: 1rem; }
.cta-strip p { color: rgba(255,255,255,0.7); max-width: 540px; margin: 0 auto 2rem; }
.cta-strip .btn {
  background: var(--color-accent-warm);
  color: var(--color-text);
}
.cta-strip .btn:hover { background: #B89651; }

/* === SOLUTION PAGE === */
.solution-page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: white;
  padding: 6rem 0 4rem;
  overflow: hidden;
  /* Solution tile photo behind a brand-green mask for legibility.
     Falls back to the brand gradient when no image is set. */
  background-color: var(--cat-bg-2, #1A3A26);
  background-image:
    linear-gradient(135deg, rgba(26, 58, 38, 0.82) 0%, rgba(26, 58, 38, 0.58) 60%, rgba(26, 58, 38, 0.45) 100%),
    var(--hero-image, linear-gradient(135deg, var(--cat-bg-1, #2D5F3F), var(--cat-bg-2, #1A3A26)));
  background-size: cover, cover;
  background-position: center, center;
}
.solution-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(201, 169, 97, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}
.solution-page-hero .container { position: relative; }
.solution-page-hero .eyebrow { color: var(--color-accent-warm); }
.solution-page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 1rem 0 1.5rem;
  max-width: 800px;
}
.solution-page-hero p.lead {
  font-size: 1.2rem;
  line-height: 1.5;
  max-width: 620px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2.5rem;
}

.solution-page-detail { padding: 5rem 0; }
.solution-page-detail .columns {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 900px) { .solution-page-detail .columns { grid-template-columns: 1fr; gap: 2rem; } }
.solution-detail-text h2 { margin-bottom: 1.5rem; font-size: 2rem; }
.solution-detail-text p { margin-bottom: 1rem; line-height: 1.65; }

.subsection-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.subsection-pills .pill {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 450;
}

/* === CATALOG === */
.catalog-page { padding: 5rem 0 3rem; background: var(--color-bg); }
.catalog-header { text-align: center; margin-bottom: 3rem; }
.catalog-header h1 { margin-bottom: 0.75rem; }
.catalog-header p { max-width: 500px; margin: 0 auto; font-size: 1.05rem; }

.catalog-filters {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1rem;
  align-items: end;
}
/* A grid track is at least as wide as its content unless told otherwise, and a
   <select> refuses to shrink below its widest option - which pushed the whole
   panel past the edge of the page. */
.catalog-filters > * { min-width: 0; }
.catalog-filters select { width: 100%; max-width: 100%; }
@media (max-width: 768px) { .catalog-filters { grid-template-columns: 1fr; } }

.filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.filter-group label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.filter-group select {
  padding: 0.7rem 1rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}
.filter-group select:focus { outline: none; border-color: var(--color-accent); }
.clear-filters {
  padding: 0.7rem 1.25rem;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}
.clear-filters:hover { background: white; border-color: var(--color-text); color: var(--color-text); }

.catalog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 700px) {
  /* Side by side there is not enough room for either line, so both wrap into
     narrow ragged columns. Stack them instead. */
  .catalog-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}
.catalog-meta .count { font-size: 0.9rem; color: var(--color-text-muted); }
.catalog-meta .count strong { color: var(--color-text); font-weight: 500; }

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } }

.item-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.item-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.item-image {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #FAF8F4 0%, #F0EBE0 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-soft);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.item-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 50%);
}
.item-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.5rem;
  font-family: var(--font-serif);
}
.item-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  box-sizing: border-box;
  background: #fff;
}
.item-content {
  padding: 1rem 1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item-content .item-name {
  font-size: 0.95rem;
  font-weight: 450;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.item-content .item-cats {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 0.85rem;
  line-height: 1.4;
  flex: 1;
}
.save-btn {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 450;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
}
.save-btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}
.save-btn.saved {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* No trailing space in the content: the flex `gap` above already separates
   the tick from the label, and having both made the gap look doubled. */
.save-btn.saved::before { content: '✓'; }

/* === QUOTE FORM === */
.quote-page { padding: 4rem 0 5rem; background: var(--color-bg-soft); }
.quote-page-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1rem;
}
.quote-page-header .eyebrow { display: inline-block; margin-bottom: 1rem; }
.quote-page-header h1 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3rem); }
.quote-page-header p { font-size: 1.05rem; line-height: 1.6; }

.quote-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) { .quote-layout { grid-template-columns: 1fr; } }

.quote-form {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.5rem;
}
@media (max-width: 600px) { .quote-form { padding: 1.5rem; } }


.form-section {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}
.form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.form-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.form-section-header .num {
  width: 32px;
  height: 32px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 500;
  flex-shrink: 0;
}
.form-section-header h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
}

.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.field label .required { color: #B91C1C; margin-left: 0.15rem; }
.field label .optional { color: var(--color-text-muted); font-weight: 400; font-size: 0.85em; margin-left: 0.2rem; }
.field .helper {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  font-style: italic;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
/* Inline validation error state (red border stays even on focus) */
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid,
.field input.is-invalid:focus, .field select.is-invalid:focus, .field textarea.is-invalid:focus {
  border-color: #B91C1C;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.field-error {
  color: #B91C1C;
  font-size: 0.8rem;
  margin-top: 0.4rem;
  line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field textarea.large { min-height: 120px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .field-row-3 { grid-template-columns: 1fr; } }

.budget-input-wrap { position: relative; }
.budget-input-wrap::before {
  content: '$';
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-weight: 500;
}
.budget-input-wrap input { padding-left: 1.8rem; }

/* Quote Cart */
.quote-cart-block {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.quote-cart-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--color-text-muted);
}
.quote-cart-empty p { margin-bottom: 0.5rem; }
.quote-cart-empty .small { font-size: 0.85rem; font-style: italic; }
.cart-item {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.cart-item:last-child { margin-bottom: 0; }
.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}
.cart-item-name { font-weight: 500; color: var(--color-text); font-size: 0.95rem; }
.cart-item-name.custom::after {
  content: 'custom';
  background: var(--color-accent-warm);
  color: var(--color-text);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.5rem;
}
.cart-item-cats { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.cart-remove {
  background: none;
  border: none;
  color: var(--color-text-soft);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 0.25rem;
  line-height: 1;
}
.cart-remove:hover { color: #B91C1C; }
.cart-item-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  /* Each cell flows on its own, so a label that wraps to two lines pushed its
     input lower than the one beside it. Anchoring to the bottom keeps the two
     inputs on the same line whatever the labels do. */
  align-items: end;
}
.cart-item-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cart-item-field input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
}
.cart-item-field input:focus { outline: none; border-color: var(--color-accent); }
.cart-item-notes textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
}
.cart-item-notes label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.25rem;
}

.add-custom-btn {
  width: 100%;
  padding: 0.85rem;
  background: white;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: all 0.2s;
}
.add-custom-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.cart-info-box {
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--color-text);
}
.cart-info-box strong { display: block; margin-bottom: 0.3rem; font-weight: 500; }

.timeline-info {
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.timeline-info strong { display: block; margin-bottom: 0.5rem; font-weight: 500; }

.submit-section { text-align: center; padding-top: 2rem; }
.submit-btn {
  padding: 1.1rem 2.5rem;
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.submit-btn:hover { background: #234A31; transform: translateY(-1px); }
.submit-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.submit-features span::before { content: '✓ '; color: var(--color-accent); margin-right: 0.25rem; }

/* Honeypot. Moved off-screen rather than display:none - a hidden-but-present
   field is what naive form bots fill in, and screen readers skip it because the
   wrapper carries aria-hidden. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.privacy-notice {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 1.5rem;
  line-height: 1.55;
  font-style: italic;
}
.privacy-notice-links {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.5rem;
}
.privacy-notice-links a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.privacy-notice-links a:hover { color: var(--color-accent-warm); }

/* === LEGAL PAGES (Privacy / Terms / Cookies / Accessibility) === */
.legal-hero {
  padding: 6rem 0 2.5rem;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}
.legal-hero .eyebrow { display: inline-block; margin-bottom: 1rem; }
.legal-hero h1 { margin-bottom: 0.75rem; }
.legal-dates { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; }
.legal-body { padding: 3rem 0 5rem; }

.legal-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.legal-switch-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.legal-switch-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.legal-switch-link.active {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.legal-doc { color: var(--color-text); overflow-wrap: break-word; }
.legal-doc h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 2.75rem 0 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
}
.legal-doc > h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-doc h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.75rem 0 0.75rem;
}
.legal-doc h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1.5rem 0 0.35rem;
}
.legal-doc p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.legal-doc strong { color: var(--color-text); font-weight: 600; }
.legal-doc a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  overflow-wrap: anywhere;   /* let long URLs/emails break instead of overflowing */
}
.legal-doc a:hover { color: var(--color-accent-warm); }
.legal-doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.legal-list { margin: 0 0 1.25rem; padding-left: 1.35rem; list-style: none; }
.legal-list li {
  position: relative;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal-updated-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-soft);
  font-style: italic;
}
@media (max-width: 768px) {
  .legal-hero { padding: 4.5rem 0 2rem; }
  .legal-doc h2 { font-size: 1.3rem; }
}

.quote-side-panel {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: sticky;
  top: 90px;
}
.quote-side-panel h4 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 1.25rem; }
.process-step {
  display: flex;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.process-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.process-step .step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 500;
}
.process-step .step-content { flex: 1; }
.process-step .step-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.15rem;
}
.process-step .step-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* === ABOUT PAGE === */
.about-hero {
  padding: 6rem 0 3rem;
  background: var(--color-bg-soft);
}
.about-hero .eyebrow { display: inline-block; margin-bottom: 1rem; }
.about-hero h1 { margin-bottom: 1rem; max-width: 700px; }
.about-hero p.lead { font-size: 1.2rem; line-height: 1.55; max-width: 620px; }

.about-content { padding: 5rem 0; }
.about-content .container-narrow { max-width: 720px; }
.about-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}
.about-content p.intro {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--color-accent);
  line-height: 1.5;
  margin-bottom: 2.5rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent-warm);
}
.about-content.about-purpose p.intro { margin-bottom: 0; }

.about-purpose {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

.mission-vision {
  background: var(--color-bg-soft);
  padding: 3rem 0 4rem;
  border-bottom: 1px solid var(--color-border);
}
.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 768px) { .mission-vision-grid { grid-template-columns: 1fr; } }
.mv-item .eyebrow { margin-bottom: 1rem; display: inline-block; }
.mv-item p {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--color-text);
  font-style: italic;
}

/* === CONTACT PAGE === */
.contact-page { padding: 5rem 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info h1 { margin-bottom: 1rem; }
.contact-info p.lead { font-size: 1.1rem; margin-bottom: 2.5rem; line-height: 1.6; }
.contact-detail {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}
.contact-detail:last-child { border-bottom: none; }
.contact-detail .label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}
.contact-detail .value {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--color-text);
}

/* === FOOTER === */
.footer { background: var(--color-text); color: white; padding: 4rem 0 2rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
/* The header logo is an icon next to a label, so `.logo`'s flex gap is right
 * there. The footer has no icon - just the two words - and that gap sat
 * between them on top of the letter-spacing, making the space before
 * "Commerce" nearly three times the one inside "Double Portion". Laid out as
 * plain text instead, so a single word space does the job in both places. */
.footer-brand .logo {
  color: white;
  display: block;
  gap: 0;
}
.footer-brand .logo span { color: rgba(255,255,255,0.5); }
.footer-brand p {
  color: rgba(255,255,255,0.6);
  max-width: 320px;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.footer-col h5 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.8);
  font-size: 0.92rem;
  padding: 0.35rem 0;
  cursor: pointer;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--color-accent-warm); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 600px) { .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } }

/* === MODAL === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal {
  background: white;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 500px;
  width: 100%;
  position: relative;
}
.modal h3 { font-family: var(--font-serif); margin-bottom: 0.75rem; }
.modal p { margin-bottom: 1.5rem; }
.modal .field { margin-bottom: 1rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}

body.modal-open { overflow: hidden; }

/* === VIDEO MODAL (hero video cards lightbox) === */
/* === SUBMISSION RESULT MODAL === */
.result-overlay { background: rgba(26, 26, 26, 0.45); backdrop-filter: blur(2px); }

.result-modal {
  position: relative;
  background: #FBF9F4;
  border-radius: 20px;
  padding: 2.75rem 2.25rem 2rem;
  width: 100%;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  animation: resultPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.result-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--color-text-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.result-close:hover { color: var(--color-text); background: rgba(0, 0, 0, 0.04); }
@keyframes resultPop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .result-modal { animation: none; } }

.result-icon { position: relative; display: inline-flex; margin-bottom: 1.5rem; }
.result-icon-disc {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Scattered dots around the disc, as in the design. Drawn with gradients so
   there is no extra markup and nothing to load. */
.result-icon-burst {
  position: absolute;
  inset: -21px;
  border-radius: 50%;
  background:
    radial-gradient(circle 2.5px at 50% 4%,  var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2px   at 79% 12%, var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 96% 47%, var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2px   at 82% 84%, var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 97%, var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2px   at 17% 85%, var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2.5px at 3%  48%, var(--color-accent) 99%, transparent 100%),
    radial-gradient(circle 2px   at 20% 13%, var(--color-accent) 99%, transparent 100%);
  opacity: 0.28;
}

.result-modal h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}
.result-message {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 1.6rem;
}

.result-note {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  text-align: left;
  background: #EDF3EE;
  border: 1px solid #DCE8DF;
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
}
.result-note-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.result-note-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  /* Even out the two lines this wraps to on a phone. `pretty` was here before
     and did the opposite - it shortens the first line to protect the last one,
     which is what left the visible gap on the right. */
  text-wrap: balance;
}
.result-ref {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.result-ref:empty { display: none; }

.result-done {
  width: 100%;
  justify-content: center;
  padding: 0.95rem 1rem;
  font-size: 1rem;
}

/* Optional second action, e.g. "Send another message". Hidden unless the
   caller supplies a label. A quiet text button on desktop; on narrow screens
   it becomes a bordered button so it stays an obvious tap target. */
.result-secondary {
  display: none;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.result-secondary.visible { display: block; }
.result-secondary:hover { background: rgba(45, 95, 63, 0.06); }

/* Failure variant: same layout, different signal. */
.result-modal.is-error .result-icon-disc { background: #FBEAE6; color: #B4462F; }
.result-modal.is-error .result-icon-burst { display: none; }

@media (max-width: 560px) {
  .result-overlay { padding: 1.25rem; }
  .result-modal { padding: 2.25rem 1.5rem 1.5rem; border-radius: 18px; }
  .result-modal h3 { font-size: 1.4rem; }
  .result-icon-disc { width: 70px; height: 70px; }
  .result-secondary {
    border: 1px solid var(--color-accent);
    padding: 0.85rem 1rem;
  }
  /* Buy back horizontal room for the note so its sentence stays on one line:
     a smaller icon, a tighter gap and less padding give ~25px, which is the
     difference between one line and two at this width. */
  .result-note { padding: 0.8rem 0.85rem; gap: 0.6rem; }
  .result-note-icon { width: 26px; height: 26px; }
  .result-note-text { font-size: 0.84rem; }
}

.video-modal-overlay { background: rgba(0, 0, 0, 0.85); }
.video-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
}
.video-modal video {
  display: block;
  width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  background: black;
}
.video-modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  color: white;
  font-size: 2rem;
}
@media (max-width: 640px) {
  .video-modal-close { top: -2.25rem; font-size: 1.75rem; }
}

/* === TOAST === */
/* Confirmation card, centred at the bottom over whatever the visitor is
 * browsing. Light rather than the old dark slab, so it reads as part of the
 * site instead of a system message. */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem 0.85rem 0.9rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(26, 24, 20, 0.14);
  font-size: 0.9rem;
  color: var(--color-text);
  /* Both transforms on one property, so the centring is not lost mid-slide. */
  transform: translate(-50%, calc(100% + 3rem));
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.2s;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}
.toast-action {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0.25rem 0 0.25rem 0.75rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
  cursor: pointer;
  touch-action: manipulation;
}
.toast-action::after { content: ' ›'; }
.toast-action:hover { color: #234A31; }
.toast-action[hidden] { display: none; }

@media (max-width: 640px) {
  /* Edge to edge, so a long item name has the full width before it wraps. */
  .toast {
    left: 1rem;
    right: 1rem;
    bottom: 1.25rem;
    width: auto;
    max-width: none;
    transform: translate(0, calc(100% + 3rem));
    font-size: 0.875rem;
  }
  .toast.show { transform: translate(0, 0); }
}

/* === FLOATING BUTTON (back-to-top) === */
.floating-btn {
  position: fixed;
  bottom: 1.5rem;
  height: 48px;
  border: none;
  background: var(--color-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 250;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s, background 0.2s;
}
.floating-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.floating-btn:hover { background: #1F4A2E; transform: translateY(-2px); }
.floating-btn:focus-visible { outline: 2px solid var(--color-accent-warm); outline-offset: 3px; }

/* Back-to-top: circular, bottom-right */
.back-to-top {
  right: 1.5rem;
  width: 48px;
  border-radius: 50%;
}


@media (max-width: 600px) {
  .floating-btn { bottom: 1rem; height: 44px; }
  .back-to-top { right: 1rem; width: 44px; }
}

/* === PAGE TRANSITIONS === */
.page { display: none; }
.page.active { display: block; }

/* ============================================================
   LEGAL PAGES (Privacy, Terms, Cookies, Accessibility)
   Static long-form content — readable prose layout.
   ============================================================ */
.legal-page { padding: 4rem 0 5rem; background: var(--color-bg); }
.legal-container { max-width: 820px; }
.legal-page h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 1.5rem;
  color: var(--color-text);
}
.legal-page h2 {
  font-size: 1.4rem;
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}
.legal-page h3 {
  font-size: 1.1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  margin: 1.4rem 0 0.5rem;
  color: var(--color-text);
}
.legal-page p { margin: 0 0 1rem; line-height: 1.7; color: var(--color-text-muted); }
.legal-page ul { margin: 0 0 1.2rem 1.2rem; padding: 0; }
.legal-page li { margin: 0 0 0.5rem; line-height: 1.65; color: var(--color-text-muted); }
.legal-page strong { color: var(--color-text); font-weight: 600; }
.legal-page a { color: var(--color-accent); text-decoration: underline; cursor: pointer; }
.legal-page a:hover { color: var(--color-accent-warm); }
.legal-page code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}
.legal-page blockquote {
  margin: 0 0 1.2rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  color: var(--color-text);
  line-height: 1.7;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.5rem;
  font-size: 0.92rem;
}
.legal-table th, .legal-table td {
  border: 1px solid var(--color-border);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.legal-table th { background: var(--color-bg-soft); color: var(--color-text); font-weight: 600; }
.legal-table td { color: var(--color-text-muted); }

/* iOS Safari zooms the whole page in when a focused field has a font smaller
   than 16px, and it stays zoomed afterwards - which is what made the layout
   look cut off and pannable sideways after tapping a field. 16px stops it.
   Desktop keeps the smaller size. */
@media (max-width: 768px) {
  .field input,
  .field select,
  .field textarea,
  .cart-item input,
  .cart-item textarea,
  .catalog-filters select,
  .quote-side-panel input,
  .quote-side-panel textarea {
    font-size: 16px;
  }
}

/* === SELECT ARROW ===
   The browser draws the native dropdown arrow hard against the border, and the
   element's padding only moves the text, not that arrow - which is why it read
   as glued to the edge. Replacing it with our own chevron puts the spacing back
   under our control and makes every select look the same across browsers. */
.field select,
.filter-group select,
.catalog-filters select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B6B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  /* Leaves room for the chevron so a long option never runs under it. */
  padding-right: 2.75rem;
}
/* Edge/IE draw their own arrow on top of ours. */
.field select::-ms-expand,
.filter-group select::-ms-expand { display: none; }

/* === DATE FIELD ===
 * iOS renders date inputs as a native control that ignores our width rules:
 * it keeps its own intrinsic width, so a locale-formatted value ("29 лип.
 * 2026 р.") pushed the field past the card and the whole form scrolled
 * sideways. It also centres the value, which made it the odd one out among
 * the fields. Both live in the shadow parts below. */
.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;          /* allow it to shrink to the card, not the other way round */
  max-width: 100%;
  text-align: left;
}
/* The wrapper around the day/month/year fields carries its own vertical
 * padding, which made this field 2px taller than every other one. */
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
/* The value sits in a shadow element that centres itself on iOS - that is what
 * made "29 лип. 2026 р." float in the middle of the field. */
.field input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
/* The browser's own picker button sits hard against the border and its
 * position is not ours to set - the same problem the selects had. Hide it and
 * draw our own chevron, so date fields and selects share one look and one gap.
 * The native button is kept (transparent) and stretched across the field, so
 * tapping anywhere in it still opens the picker. */
.field input[type="date"] {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B6B6B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* === BUTTON WORKING STATE ===
 * Only appears when the next view has not painted promptly - on a fast device
 * the class is cleared before it is ever shown, so there is no flicker. The
 * spinner takes the arrow's place so the button never changes width. */
@keyframes btnSpin { to { transform: rotate(360deg); } }
/* Purely visual - the button stays clickable, so a stuck state could never
 * leave someone unable to press it. */
.btn.is-working::after {
  content: '';
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
  transform: none;
}

/* === SUBMIT BUTTON: SUBMITTING STATE ===
 * The spinner sits before the label, and the arrow steps aside - an arrow
 * means "this will take you onward", which is not what is happening yet. */
.submit-btn.is-submitting { cursor: progress; opacity: 0.92; }
.submit-btn.is-submitting:hover { background: var(--color-accent); transform: none; }
.submit-btn.is-submitting::after { display: none; }
.submit-btn.is-submitting::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
  flex: 0 0 auto;
}

/* === FORM ERROR BAR ===
 * Sits under the submit button and states the one thing worth doing next.
 * Deliberately quiet in tone: the request failing is our problem, not the
 * visitor's mistake, so it is not styled like a validation error. */
.form-error {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.25rem auto 0;
  max-width: 34rem;
  padding: 0.8rem 1rem;
  background: #FDF4F2;
  border: 1px solid #F0D5CE;
  border-radius: var(--radius-sm);
  color: #B4462F;
  font-size: 0.9rem;
  text-align: left;
}
.form-error[hidden] { display: none; }
.form-error-icon { flex: 0 0 auto; display: flex; }
.form-error-text { flex: 1 1 12rem; font-weight: 500; line-height: 1.4; }
.form-error-retry {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.25rem 0 0.25rem 0.9rem;
  border: none;
  border-left: 1px solid #F0D5CE;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: #B4462F;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  touch-action: manipulation;
}
.form-error-retry:hover { color: #8F3624; }
@media (max-width: 640px) {
  /* Stacked, with the retry no longer pinned right - reachable under the thumb
     and not squeezed against a wrapped message. */
  .form-error { gap: 0.5rem 0.75rem; }
  .form-error-retry {
    margin-left: 0;
    /* Icon width plus the row gap, so the retry lines up with the message
       above it rather than with the icon. */
    padding-left: calc(16px + 0.75rem);
    border-left: none;
  }
}