/* ==========================================================================
   Restaurant Printing — by Pack 'n' Mail
   Shared stylesheet
   --------------------------------------------------------------------------
   Contents
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Decorative background & print motifs
   06. Glass surface system
   07. Buttons & links
   08. Site header & navigation
   09. Operating status component
   10. Hero blocks
   11. Trust strip
   12. Split intro section
   13. Service cards
   14. Process steps
   14b. FAQ grid
   15. CTA bands
   16. Services page detail sections
   17. Contact page: panels, hours, form
   18. Site footer
   19. Motion, scroll reveal & pointer glow
   20. Responsive refinements
   21. Reduced motion, forced colors & print
   ========================================================================== */


/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
  /* Brand palette (do not extend without approval) */
  --black: #09080A;
  --red: #EF3E48;
  --silver: #CDCFD9;
  --white: #FFFFFF;

  /* Derived surface tones */
  --ink-900: #09080A;
  --ink-800: #0D0C0F;
  --ink-700: #131216;
  --ink-600: #1A181D;

  /* Text roles */
  --text-strong: var(--white);
  --text-body: var(--silver);
  --text-muted: #9EA1AE;
  /* Used for small uppercase labels, so it is kept light enough to clear
     WCAG AA (5.4:1) against the glass panels. */
  --text-faint: #8A8D98;

  /* Accents */
  --red-soft: rgba(239, 62, 72, 0.16);
  --red-line: rgba(239, 62, 72, 0.38);
  --red-glow: rgba(239, 62, 72, 0.22);

  /* The only non-palette hue on the site: the small "open" indicator. */
  --open-dot: #35D07E;

  /* Glass system */
  --glass-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 58%, rgba(255, 255, 255, 0.05) 100%);
  --glass-bg-strong: linear-gradient(158deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.07) 100%);
  --glass-border: rgba(205, 207, 217, 0.16);
  --glass-border-bright: rgba(205, 207, 217, 0.3);
  --glass-blur: blur(18px) saturate(135%);
  --glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.07) inset,
    0 18px 44px -22px rgba(0, 0, 0, 0.9);
  --glass-shadow-lift:
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    0 26px 60px -24px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(239, 62, 72, 0.14);

  /* Spacing scale */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: clamp(3.5rem, 8vw, 6.5rem);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Layout */
  --shell: 1200px;
  --shell-narrow: 900px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --header-h: 78px;

  /* Type stack — system fonts only, no external requests. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.75, 0.28, 1);
  --dur-fast: 160ms;
  --dur-mid: 280ms;
  --dur-slow: 620ms;
}


/* ==========================================================================
   02. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps in-page anchors clear of the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--black);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Guards against any decorative layer forcing a sideways scrollbar. */
  overflow-x: hidden;
}

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

img {
  height: auto;
}

/* <picture> wraps the responsive logo sources. It must not create a box of its
   own, so the <img> stays the direct layout child and the plate rules further
   down keep applying to it. */
picture {
  display: contents;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

address {
  font-style: normal;
}

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  margin: var(--space-lg) 0;
}

/* Visible focus for keyboard users on every interactive element. */
:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--red-soft);
  color: var(--white);
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--red);
  color: var(--black);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}


/* ==========================================================================
   03. Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.35rem + 3.6vw, 3.9rem);
}

h2 {
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
}

h3 {
  font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.45rem);
  letter-spacing: -0.012em;
  line-height: 1.22;
}

h4 {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

p {
  margin: 0 0 1.05em;
  max-width: 68ch;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--text-strong);
  font-weight: 650;
}

a {
  color: var(--white);
  text-decoration-color: var(--red-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

/* Eyebrow / kicker label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 var(--space-sm);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red));
}

.lead {
  color: var(--text-strong);
  font-size: clamp(1.075rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: -0.008em;
}

.muted {
  color: var(--text-muted);
}

.fine-print {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Small caption row used under hero cards and CTA bands */
.note-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.note-line .note-line__mark {
  flex: none;
  margin-top: 0.42em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}


/* ==========================================================================
   04. Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--shell-narrow);
}

.section {
  position: relative;
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

/* Hairline divider between major sections */
.section--ruled::before {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(205, 207, 217, 0.14) 22%,
      rgba(239, 62, 72, 0.3) 50%,
      rgba(205, 207, 217, 0.14) 78%,
      transparent 100%);
}

.section__head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .eyebrow {
  justify-content: center;
}

.section__head--center p {
  margin-inline: auto;
}

.section__head p {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--space-sm);
}

.grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}


/* ==========================================================================
   05. Decorative background & print motifs
   ========================================================================== */

/* Fixed atmosphere layer: soft red radial glows over near-black.
   Purely decorative, hidden from assistive technology. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58rem 34rem at 78% -8%, rgba(239, 62, 72, 0.17), transparent 62%),
    radial-gradient(42rem 30rem at 6% 12%, rgba(239, 62, 72, 0.1), transparent 65%),
    radial-gradient(46rem 34rem at 50% 108%, rgba(239, 62, 72, 0.11), transparent 66%),
    radial-gradient(34rem 24rem at 90% 72%, rgba(205, 207, 217, 0.055), transparent 68%),
    linear-gradient(180deg, #0B0A0D 0%, var(--black) 45%, #0B0A0D 100%);
}

/* Very fine grain keeps the large gradients from banding. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px);
}

/* Sheet-edge lines: suggests stacked paper running down the page. */
.sheet-lines {
  position: fixed;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1360px);
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(205, 207, 217, 0.06) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(205, 207, 217, 0.06) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 62, 72, 0.09) 0 1px, transparent 1px);
  background-position: 12% 0, 88% 0, 50% 0;
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-repeat: no-repeat;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent);
}

/* Ink registration mark — small crosshair used as a section ornament. */
.reg-mark {
  /* Block-level so the fixed size and auto margins actually apply — it is a
     <span> in the markup. */
  display: block;
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--red-line);
  border-radius: 50%;
  opacity: 0.85;
}

.reg-mark::before,
.reg-mark::after {
  content: "";
  position: absolute;
  background: var(--red-line);
}

.reg-mark::before {
  inset-inline: -9px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.reg-mark::after {
  inset-block: -9px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

/* Abstract "stacked sheets" ornament used behind hero visuals. */
.sheet-stack {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.sheet-stack span {
  position: absolute;
  border: 1px solid rgba(205, 207, 217, 0.12);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.05), transparent 70%);
}

.sheet-stack span:nth-child(1) {
  inset: 6% 26% 30% 8%;
  transform: rotate(-4deg);
}

.sheet-stack span:nth-child(2) {
  inset: 16% 10% 18% 22%;
  transform: rotate(3.5deg);
  border-color: var(--red-line);
  background: linear-gradient(150deg, rgba(239, 62, 72, 0.11), transparent 68%);
}

.sheet-stack span:nth-child(3) {
  inset: 34% 16% 6% 30%;
  transform: rotate(-1.5deg);
}


/* ==========================================================================
   06. Glass surface system
   ========================================================================== */

.glass {
  position: relative;
  background-image: var(--glass-bg);
  background-color: rgba(19, 18, 22, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Top edge highlight — reads like light catching a pane. */
.glass::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}

.glass--flush::before {
  inset-inline: 22%;
}

.glass--pad {
  padding: clamp(1.35rem, 3vw, 2.25rem);
}

.glass--pad-lg {
  padding: clamp(1.65rem, 4vw, 3rem);
}

/* Where backdrop-filter is unavailable, lean on opaque tinted panels so the
   design still reads as layered glass rather than washed-out boxes. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .glass {
    background-color: rgba(26, 24, 29, 0.94);
    border-color: rgba(205, 207, 217, 0.2);
  }

  .site-header__inner,
  .nav-panel {
    background-color: rgba(11, 10, 13, 0.98);
  }
}


/* ==========================================================================
   07. Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* The only disabled button on the site is the quote form's submit while a
   request is in flight, so the cursor reads as "working" rather than "blocked".
   Kept above 0.6 opacity so the label stays legible throughout. */
.btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

.btn:disabled:hover {
  transform: none;
}

.btn--primary:disabled:hover {
  background-color: var(--red);
  box-shadow: 0 12px 30px -14px var(--red-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

/* Primary — brand red with near-black label for strong contrast. */
.btn--primary {
  background-color: var(--red);
  color: var(--black);
  box-shadow: 0 12px 30px -14px var(--red-glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

.btn--primary:hover {
  background-color: #F5545D;
  color: var(--black);
  box-shadow: 0 18px 38px -14px rgba(239, 62, 72, 0.42), 0 1px 0 rgba(255, 255, 255, 0.34) inset;
}

/* Secondary — glass with a fine silver border. */
.btn--ghost {
  background-image: var(--glass-bg);
  background-color: rgba(19, 18, 22, 0.5);
  border-color: var(--glass-border-bright);
  color: var(--white);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn--ghost:hover {
  border-color: var(--red-line);
  color: var(--white);
  background-color: rgba(239, 62, 72, 0.1);
}

/* Quiet inline text action with an arrow */
.btn--text {
  min-height: 0;
  padding: 0.35rem 0;
  border-radius: 4px;
  color: var(--red);
  font-size: 0.9375rem;
  background: none;
}

.btn--text:hover {
  color: var(--white);
  transform: none;
}

.btn--text .btn__arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn--text:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--block {
  width: 100%;
}

.btn__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-md);
}

.btn-row--center {
  justify-content: center;
}


/* ==========================================================================
   08. Site header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 0.55rem;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
  padding: 0.5rem 0.75rem 0.5rem 0.85rem;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  background-color: rgba(9, 8, 10, 0.72);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 18px 40px -26px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

/* Brand lockup: supplied logo plate + typeset wordmark. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  padding: 0.15rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--white);
}

.brand:hover {
  color: var(--white);
}

.brand__plate {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 2px;
  background-color: var(--black);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(239, 62, 72, 0.12), 0 8px 18px -12px rgba(0, 0, 0, 0.9);
  transition: box-shadow var(--dur-mid) var(--ease-out);
}

.brand:hover .brand__plate {
  box-shadow: 0 0 0 1px var(--red-line), 0 10px 22px -12px rgba(239, 62, 72, 0.5);
}

/* The supplied artwork is never stretched or recolored: it is contained. */
.brand__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}

.brand__name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--white);
}

.brand__name em {
  font-style: normal;
  color: var(--red);
}

.brand__sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Primary navigation */
.nav-panel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav-list a:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Active page: colour plus a persistent underline mark, so state is never
   communicated by colour alone. */
.nav-list a[aria-current="page"] {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.07);
}

.nav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: var(--red);
}

.nav-panel .btn {
  min-height: 42px;
  padding-inline: 1.15rem;
  margin-left: 0.5rem;
  font-size: 0.9rem;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background-image: var(--glass-bg);
  background-color: rgba(19, 18, 22, 0.6);
  border: 1px solid var(--glass-border-bright);
  border-radius: 14px;
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav-toggle:hover {
  border-color: var(--red-line);
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-mid) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle__bars span:nth-child(1) {
  top: 0;
}

.nav-toggle__bars span:nth-child(2) {
  top: 6px;
}

.nav-toggle__bars span:nth-child(3) {
  top: 12px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* ==========================================================================
   09. Operating status component
   ========================================================================== */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.95rem 0.55rem 0.8rem;
  max-width: 100%;
  background-color: rgba(205, 207, 217, 0.07);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.4;
  color: var(--text-body);
}

.status__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 3px rgba(205, 207, 217, 0.1);
}

/* Green is used only here, and always alongside the word "Open". */
.status[data-open="true"] .status__dot {
  background: var(--open-dot);
  box-shadow: 0 0 0 3px rgba(53, 208, 126, 0.16);
}

.status[data-open="true"] .status__text {
  color: var(--white);
}

.status[data-open="false"] .status__dot {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

.status--block {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}


/* ==========================================================================
   10. Hero blocks
   ========================================================================== */

/* Home hero — two columns on wide screens */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 4.75rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.hero__copy h1 {
  margin-bottom: var(--space-md);
}

.hero__copy .lead {
  color: var(--text-body);
  max-width: 54ch;
}

.hero__visual {
  position: relative;
  min-width: 0;
}

/* Glass information card in the hero */
.hero-card {
  padding: clamp(1.35rem, 3vw, 1.9rem);
  background-image: var(--glass-bg-strong);
}

.hero-card__plate {
  display: grid;
  place-items: center;
  padding: clamp(0.9rem, 2.5vw, 1.4rem);
  margin-bottom: var(--space-md);
  background-color: var(--black);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(239, 62, 72, 0.1) inset,
    0 20px 46px -26px rgba(0, 0, 0, 0.95);
}

.hero-card__plate img {
  width: 100%;
  max-width: 268px;
  height: auto;
}

.hero-card__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: 0.7rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-card__list {
  display: grid;
  gap: 0;
}

.hero-card__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0;
  border-bottom: 1px solid rgba(205, 207, 217, 0.09);
  color: var(--white);
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -0.005em;
}

.hero-card__list li:last-child {
  border-bottom: 0;
}

.hero-card__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--red);
}

.hero-card__foot {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--glass-border);
}


/* Interior page hero (services / contact) */
.page-hero {
  position: relative;
  padding-top: clamp(2.25rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}

.page-hero__panel {
  overflow: hidden;
  padding: clamp(1.75rem, 5vw, 3.25rem);
}

.page-hero__panel::after {
  /* Soft red wash in the corner — decorative. */
  content: "";
  position: absolute;
  top: -40%;
  right: -12%;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 62, 72, 0.16), transparent 66%);
  pointer-events: none;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 62ch;
}

.page-hero h1 {
  margin-bottom: var(--space-md);
}


/* ==========================================================================
   11. Trust strip
   ========================================================================== */

.trust {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.trust__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(1.1rem, 2.6vw, 1.5rem) clamp(1.15rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--glass-border);
}

.trust__item:last-child {
  border-bottom: 0;
}

.trust__item svg {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--red);
}

.trust__item span {
  color: var(--white);
  font-size: 0.9875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

@media (min-width: 800px) {
  .trust {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust__item {
    border-bottom: 0;
    border-right: 1px solid var(--glass-border);
  }

  .trust__item:last-child {
    border-right: 0;
  }
}


/* ==========================================================================
   12. Split intro section
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(1.75rem, 4.5vw, 3.25rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .split--reverse .split__media {
    order: -1;
  }
}

.split__media {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-xl);
}

/* Abstract composition standing in for printed pieces — pure CSS, no images. */
.paper-set {
  position: relative;
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.paper-set__sheet {
  position: absolute;
  border-radius: 14px;
  border: 1px solid rgba(205, 207, 217, 0.16);
  background-image: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 62%);
  background-color: rgba(19, 18, 22, 0.6);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Menu sheet with ruled "lines" */
.paper-set__sheet--menu {
  inset: 8% 30% 10% 6%;
  transform: rotate(-3.5deg);
  padding: 12% 12% 12% 14%;
}

.paper-set__sheet--menu::before {
  content: "";
  position: absolute;
  inset: 26% 16% 14% 16%;
  /* Ruled menu lines: two offset layers of differing width read as alternating
     long and short entries. */
  background-image:
    repeating-linear-gradient(180deg, rgba(205, 207, 217, 0.34) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(180deg, rgba(205, 207, 217, 0.18) 0 2px, transparent 2px 16px);
  background-size: 58% 100%, 100% 100%;
  background-position: 0 0, 0 8px;
  background-repeat: no-repeat;
}

.paper-set__sheet--menu::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 16%;
  width: 34%;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}

/* Card with a stamp block */
.paper-set__sheet--card {
  inset: 40% 6% 12% 42%;
  transform: rotate(4deg);
  border-color: var(--red-line);
  background-image: linear-gradient(150deg, rgba(239, 62, 72, 0.16), rgba(255, 255, 255, 0.02) 66%);
}

.paper-set__sheet--card::before {
  content: "";
  position: absolute;
  top: 16%;
  right: 14%;
  width: 22%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}

.paper-set__sheet--card::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 22%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 -10px 0 0 rgba(255, 255, 255, 0.22),
    0 -20px 0 0 rgba(255, 255, 255, 0.16);
}

/* Small folded sheet */
.paper-set__sheet--slip {
  inset: 6% 8% 58% 52%;
  transform: rotate(-6deg);
}

.paper-set__sheet--slip::after {
  content: "";
  position: absolute;
  inset: 22% 18%;
  background-image: linear-gradient(180deg,
      rgba(205, 207, 217, 0.3) 0 2px, transparent 2px 12px);
}

/* Registration crosshair floating over the composition */
.paper-set__mark {
  position: absolute;
  right: 8%;
  top: 6%;
  width: 30px;
  height: 30px;
  border: 1px solid var(--red-line);
  border-radius: 50%;
}

.paper-set__mark::before,
.paper-set__mark::after {
  content: "";
  position: absolute;
  background: var(--red-line);
}

.paper-set__mark::before {
  inset-inline: -8px;
  top: 50%;
  height: 1px;
}

.paper-set__mark::after {
  inset-block: -8px;
  left: 50%;
  width: 1px;
}


/* ==========================================================================
   13. Service cards
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.35rem;
  border: 1px solid var(--glass-border-bright);
  border-radius: 13px;
  background-image: linear-gradient(150deg, rgba(239, 62, 72, 0.2), rgba(255, 255, 255, 0.03));
  color: var(--white);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  margin: 0;
}

.card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 42ch;
}

.card__more {
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Whole card is a link target while the visible focus stays on the anchor. */
.card--link {
  text-decoration: none;
  color: inherit;
}

.card--link:hover {
  color: inherit;
  transform: translateY(-3px);
  border-color: var(--glass-border-bright);
  box-shadow: var(--glass-shadow-lift);
}

.card--link:hover .card__more {
  color: var(--white);
}

.card--link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Corner fold motif */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: linear-gradient(225deg, rgba(239, 62, 72, 0.28), transparent 62%);
  pointer-events: none;
}

/* Pointer-following sheen, enabled by JS on fine-pointer devices only. */
.card--glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(18rem 18rem at var(--px, 50%) var(--py, 0%),
      rgba(239, 62, 72, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.card--glow:hover::before,
.card--glow:focus-within::before {
  opacity: 1;
}

.card > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   14. Process steps
   ========================================================================== */

.steps {
  counter-reset: step;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.step {
  position: relative;
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--red-line);
  border-radius: 50%;
  /* White rather than red: red type on the red-tinted chip only reaches 4:1. */
  color: var(--white);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--red-soft);
}

.step h3 {
  font-size: 1.075rem;
  margin-bottom: 0.5rem;
}

.step p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}


/* ==========================================================================
   14b. FAQ grid
   ========================================================================== */

/* Two columns at desktop rather than three: it gives the answers a comfortable
   line length and keeps an even number of rows for the eight entries. */
.faq {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.faq__item {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.faq__item h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.185rem);
}

.faq__item p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 48ch;
}


/* ==========================================================================
   15. CTA bands
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding: clamp(1.85rem, 5vw, 3.25rem);
  text-align: center;
  background-image: var(--glass-bg-strong);
}

.cta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: 44rem;
  height: 32rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(239, 62, 72, 0.2), transparent 64%);
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 60ch;
  margin-inline: auto;
}

.cta p {
  margin-inline: auto;
}

.cta .note-line {
  justify-content: center;
  margin-top: var(--space-md);
}


/* ==========================================================================
   16. Services page detail sections
   ========================================================================== */

.service-block {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

@media (min-width: 940px) {
  .service-block {
    grid-template-columns: 1fr 0.85fr;
  }

  .service-block--reverse .service-block__aside {
    order: -1;
  }
}

.service-block__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: var(--space-md);
}

.service-block__head h2 {
  margin: 0;
}

.service-block__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--glass-border-bright);
  border-radius: 15px;
  background-image: linear-gradient(150deg, rgba(239, 62, 72, 0.22), rgba(255, 255, 255, 0.03));
  color: var(--white);
}

.service-block__badge svg {
  width: 26px;
  height: 26px;
}

.service-block__body .lead {
  margin-bottom: var(--space-sm);
}

.service-block__aside {
  padding: clamp(1.35rem, 3vw, 1.9rem);
}

.service-block__aside h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-sm);
}

/* Checked feature list */
.feature-list {
  display: grid;
  gap: 0.85rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
}

.feature-list svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 0.15em;
  color: var(--red);
}

.service-block__cta {
  margin-top: var(--space-md);
}


/* ==========================================================================
   17. Contact page: panels, hours, form
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

@media (min-width: 980px) {
  .contact-grid {
    grid-template-columns: 0.92fr 1.08fr;
  }
}

.info-panel {
  padding: clamp(1.4rem, 3.2vw, 2rem);
}

.info-panel + .info-panel {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.info-panel h2 {
  font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  margin-bottom: var(--space-sm);
}

.info-panel__business {
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.008em;
  margin-bottom: 0.35rem;
}

.info-list {
  display: grid;
  gap: 1.05rem;
  margin-top: var(--space-md);
}

.info-list > li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.info-list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.2em;
  color: var(--red);
}

.info-list__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}

.info-list a,
.info-list address {
  color: var(--white);
  font-size: 1rem;
  line-height: 1.5;
}

/* Stacked at every width: this panel is a narrow sidebar on desktop, so a
   viewport-based multi-column rule would cramp the labels into two lines. */
.info-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
}

/* Hours table */
.hours {
  margin-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
}

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.72rem 0;
  border-bottom: 1px solid rgba(205, 207, 217, 0.09);
  font-size: 0.9375rem;
}

.hours__row:last-child {
  border-bottom: 0;
}

.hours__day {
  color: var(--text-body);
  font-weight: 550;
}

.hours__time {
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hours__row--closed .hours__time {
  color: var(--text-muted);
}

/* --- Quote form --- */

.form-panel {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  scroll-margin-top: calc(var(--header-h) + 2rem);
}

.form-panel h2 {
  margin-bottom: var(--space-sm);
}

.form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0.9rem 1.05rem;
  background: rgba(239, 62, 72, 0.09);
  border: 1px solid var(--red-line);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-body);
}

.form-note svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 0.1em;
  color: var(--red);
}

.quote-form {
  display: grid;
  gap: var(--space-md);
}

.field-row {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 620px) {
  .field-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.field > label,
.fieldset__legend {
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.field .req {
  color: var(--red);
  margin-left: 0.15rem;
}

.field .optional {
  color: var(--text-faint);
  font-weight: 500;
  margin-left: 0.3rem;
  font-size: 0.8125rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background-color: rgba(9, 8, 10, 0.55);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.field textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.field select {
  appearance: none;
  /* Chevron drawn with gradients so no image asset is required. */
  background-image:
    linear-gradient(45deg, transparent 49%, var(--silver) 50% 52%, transparent 53%),
    linear-gradient(-45deg, transparent 49%, var(--silver) 50% 52%, transparent 53%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent);
  background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%, 0 0;
  background-size: 9px 9px, 9px 9px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  padding-right: 2.85rem;
}

.field select option {
  background-color: #141317;
  color: var(--white);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-faint);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(205, 207, 217, 0.45);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
  border-color: var(--white);
  background-color: rgba(9, 8, 10, 0.75);
}

/* Invalid state: red border plus a text message and an icon — never colour
   alone. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.4;
  color: var(--red);
}

.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--red);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
}

.field__error.is-shown {
  display: flex;
}

/* Radio group */
.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.fieldset__legend {
  padding: 0;
  margin-bottom: 0.6rem;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  background-color: rgba(9, 8, 10, 0.45);
  border: 1px solid var(--glass-border-bright);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.choice:hover {
  border-color: rgba(205, 207, 217, 0.45);
  color: var(--white);
}

.choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--red);
  flex: none;
}

.choice:has(input:checked) {
  border-color: var(--red-line);
  background-color: rgba(239, 62, 72, 0.1);
  color: var(--white);
}

/* Consent checkbox */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background-color: rgba(9, 8, 10, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--red);
}

.consent label {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-body);
}

.field--consent .field__error {
  margin-top: 0.45rem;
}

/* Submit row + live status region */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.25rem;
}

.form-status {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.form-status.is-error {
  color: var(--red);
  font-weight: 550;
}

.form-status.is-sent {
  color: var(--white);
  font-weight: 550;
}

.contact-close {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}


/* ==========================================================================
   18. Site footer
   ========================================================================== */

.site-footer {
  position: relative;
  margin-top: var(--space-2xl);
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: var(--space-lg);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 207, 217, 0.18) 30%, rgba(239, 62, 72, 0.3) 50%, rgba(205, 207, 217, 0.18) 70%, transparent);
}

.footer-grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr 0.7fr 1.1fr;
  }
}

.footer-brand__plate {
  display: inline-grid;
  place-items: center;
  width: 118px;
  padding: 0.6rem;
  margin-bottom: var(--space-sm);
  background-color: var(--black);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px rgba(239, 62, 72, 0.1) inset;
}

.footer-brand__plate img {
  width: 100%;
  height: auto;
}

.footer-brand p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 36ch;
}

.footer-col h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: grid;
  gap: 0.15rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0;
  color: var(--text-body);
  font-size: 0.9375rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--red);
}

.footer-contact {
  display: grid;
  gap: 0.55rem;
}

.footer-contact a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0.3rem 0;
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
}

.footer-contact a:hover {
  color: var(--red);
}

.footer-contact svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  color: var(--red);
}

.footer-hours {
  display: grid;
  gap: 0.3rem;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.footer-hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: 20rem;
}

.footer-hours dt {
  margin: 0;
}

.footer-hours dd {
  margin: 0;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

.footer-status {
  margin-top: var(--space-md);
}

/* Social icon row */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--space-md);
}

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background-color: rgba(205, 207, 217, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  color: var(--silver);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.social a:hover {
  color: var(--white);
  border-color: var(--red-line);
  background-color: rgba(239, 62, 72, 0.14);
  transform: translateY(-2px);
}

.social svg {
  width: 20px;
  height: 20px;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: var(--space-md);
  border-top: 1px solid var(--glass-border);
  font-size: 0.8125rem;
  color: var(--text-faint);
}

.footer-base p {
  margin: 0;
}


/* ==========================================================================
   19. Motion, scroll reveal & pointer glow
   ========================================================================== */

/* Reveal-on-scroll. The class is added by JS; without JS the content is
   visible by default, so nothing depends on scripting to be readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Small stagger for grouped items */
.js .reveal[data-reveal-delay="1"] {
  transition-delay: 70ms;
}

.js .reveal[data-reveal-delay="2"] {
  transition-delay: 140ms;
}

.js .reveal[data-reveal-delay="3"] {
  transition-delay: 210ms;
}


/* ==========================================================================
   20. Responsive refinements
   ========================================================================== */

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.06fr 0.94fr;
  }
}

/* Four-up groups: pair them at tablet/laptop widths and only go to a single
   row once there is genuinely space, so a lone card never orphans onto its
   own row. */
@media (min-width: 620px) {
  .grid--4,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1140px) {
  .grid--4,
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  :root {
    --shell: 1280px;
  }
}

/* --- Mobile navigation (below 900px) --- */
@media (max-width: 899px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.75rem;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    background-color: rgba(9, 8, 10, 0.9);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 30px 60px -28px rgba(0, 0, 0, 0.98);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);

    /* Closed state: removed from the tab order and hidden from AT. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
    transform-origin: top center;
    transition: opacity var(--dur-mid) var(--ease-out),
      transform var(--dur-mid) var(--ease-out),
      visibility 0s linear var(--dur-mid);
  }

  .nav-panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  .nav-list a {
    min-height: 50px;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
  }

  .nav-list a[aria-current="page"]::after {
    left: 1rem;
    bottom: 9px;
    transform: none;
  }

  .nav-panel .btn {
    min-height: 50px;
    margin: 0.4rem 0 0;
  }

  /* Header needs to be a positioning context for the dropdown. */
  .site-header .shell {
    position: relative;
  }
}

@media (max-width: 520px) {
  .brand__text {
    display: none;
  }

  .brand {
    margin-right: auto;
  }

  .footer-base {
    justify-content: flex-start;
  }

  .btn-row .btn {
    flex: 1 1 100%;
  }
}

/* At very narrow widths keep the sheet ornaments from crowding the copy. */
@media (max-width: 700px) {
  .split__media,
  .paper-set {
    min-height: 260px;
  }

  .sheet-lines {
    display: none;
  }
}


/* ==========================================================================
   21. Reduced motion, forced colors & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .card--link:hover,
  .social a:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .glass,
  .site-header__inner,
  .nav-panel,
  .status,
  .card,
  .step {
    border: 1px solid CanvasText;
  }

  .btn {
    border: 1px solid ButtonText;
  }

  .card::after,
  .cta::after,
  .page-hero__panel::after,
  .backdrop,
  .sheet-lines {
    display: none;
  }
}

@media print {
  .backdrop,
  .sheet-lines,
  .nav-toggle,
  .nav-panel,
  .sheet-stack,
  .paper-set {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .glass {
    border: 1px solid #999;
    box-shadow: none;
    background: #fff;
  }

  h1,
  h2,
  h3,
  h4,
  strong {
    color: #000;
  }
}