/* ══════════════════════════════════════════════════════════════════════════
   Freestyle Concepts — page styles.
   Layered on modernist.css: first the brand's token overrides, then the
   layout and component classes the page needs. The design canvas expressed
   these as inline styles; they live here as classes instead.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand overrides on the Modernist palette */
  --color-bg: #f7fafc;
  --color-text: #0d3049;
  --color-accent: #f88104;
  --color-accent-400: #fa9d36;
  --color-accent-500: #f88104;
  --color-accent-600: #d96f03;
  --color-accent-700: #a35201;
  --color-divider: #0d3049;
  --color-neutral-100: #e9f4fa;
  --brand-teal: #17708a;
  --brand-sky: #8ecbe8;

  /* Page-level primitives */
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1200px;
  --rule: 2px solid var(--color-divider);
  /* Named for the job, not the percentage, because the percentages move.
     Three steps down from full ink; every one clears AA on both grounds. */
  --ink-body: color-mix(in srgb, var(--color-text) 88%, transparent);
  --ink-label: color-mix(in srgb, var(--color-text) 78%, transparent);
  --ink-muted: color-mix(in srgb, var(--color-text) 72%, transparent);
  --wa: #25d366;
  --wa-hover: #1da851;
  --wa-dark: #128c7e;
}

html { scroll-behavior: smooth; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-200%);
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 18px; text-decoration: none; font-size: 17px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.skip-link:focus { transform: translateY(0); }
body { margin: 0; text-wrap: pretty; overflow-x: hidden; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-accent-600); }

/* ── Layout ────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.band { background: var(--color-neutral-100); }
.section { padding: 84px 0; }
/* Our work and Occasion finder are the only two sections that sit back to back
   on the same ground, so they ran together. The 2px rule is the same device the
   page already uses between the service and step rows. */
.section + .section { border-top: var(--rule); }

/* ── Type ──────────────────────────────────────────────────────────────── */

.kicker {
  display: block; font-size: 13px; line-height: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-teal); margin: 0 0 14px;
}
.kicker-tnum { font-feature-settings: 'tnum' 1; }
.t-display {
  font-size: clamp(38px, 4.6vw, 64px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 0 0 0 -0.058em;
}
.t-title {
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
  letter-spacing: -0.015em; margin: 0 0 0 -0.045em;
}
.t-sub { font-size: 22px; line-height: 26px; letter-spacing: -0.01em; margin: 0; }
.lede {
  font-size: 17px; line-height: 29px; max-width: 58ch;
  color: var(--ink-body); margin: 20px 0 0;
}
.note { font-size: 17px; line-height: 24px; margin: 0; color: var(--ink-muted); }
.note-wide { max-width: 58ch; line-height: 28px; margin: 20px 0 0; color: var(--ink-label); }
.field-label {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-label); margin: 0 0 12px;
}
.field-label--tight { margin-bottom: 8px; }
.tnum { font-feature-settings: 'tnum' 1; }

.link-strong {
  font-size: 17px; font-family: var(--font-heading); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
}
.link-quiet {
  font-size: 17px; font-family: var(--font-heading); font-weight: 600;
  text-decoration: none; margin-top: 4px;
}

/* ── Buttons — brand variants on top of .btn ───────────────────────────── */

/* Form text and buttons all read at the body size. The design system pairs
   .btn with .input at 14px; that pairing is preserved, just at 17px.
   Weight 600 rather than the heading's 800: at 800 the same word renders 13%
   wider than body copy and reads as a larger size, which it is not. */
.field > label { font-size: 17px; margin-bottom: 8px; }
.input { font-size: 17px; }
.btn { font-size: 17px; font-weight: 600; }

/* Contrast: the near-white label the design system puts on the brand orange
   is 2.5:1. Navy on the same orange is 5.25:1 and keeps the colour vivid, so
   the hover state lightens rather than darkens to hold the ratio. */
.btn-primary { color: var(--color-text); }
.btn-primary:hover { background: var(--color-accent-400); color: var(--color-text); }
.btn-primary:active { background: var(--color-accent-500); color: var(--color-text); }

.btn-ink { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.btn-ink:hover { background: #164468; border-color: #164468; color: var(--color-bg); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: var(--color-text); }
.btn-wa:hover { background: var(--wa); border-color: var(--wa); color: var(--color-text); filter: brightness(1.08); }
.btn-nowrap { white-space: nowrap; }
.btn .ico-inline { margin-left: 10px; flex-shrink: 0; }

.linkbtn {
  align-self: flex-start; background: none; border: 0; padding: 0;
  font-size: 17px; font-family: var(--font-heading); font-weight: 600;
  color: var(--color-accent-700); cursor: pointer; text-decoration: underline;
}
.linkbtn:hover { color: var(--color-accent-600); }
/* The design's "Remove logo" link is body text, not heading weight. */
.linkbtn-plain {
  align-self: flex-start; background: none; border: 0; padding: 0;
  font-size: 17px; color: var(--color-accent-700); cursor: pointer; text-decoration: underline;
}

/* ── Option buttons (filters, occasions, products, swatches, segments) ─── */

.opt {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 17px; padding: 10px 16px; cursor: pointer; white-space: nowrap;
  background: #fff; color: var(--color-text); border: var(--rule);
}
.opt[aria-pressed='true'] { background: var(--color-text); color: #fff; }
.opt--chip { padding: 9px 13px; flex-shrink: 0; }
.opt--pill { padding: 12px 18px; background: transparent; }
.opt--pill[aria-pressed='true'] { color: var(--color-bg); }
.opt--seg { padding: 12px 20px; display: flex; align-items: center; gap: 8px; }
.opt--seg + .opt--seg { margin-left: -2px; }
/* The tick shares one anonymous flex item with the label, as in the canvas,
   so the 8px gap does not open up between them. */
.opt--seg [data-mark] { display: contents; }

.opt-row { display: flex; gap: 8px; margin-top: 32px; overflow-x: auto; padding-bottom: 4px; }

/* Touch platforms hide scrollbars at rest, so a row that scrolls sideways
   looks like a row that simply ends. Fading whichever edge has more content
   behind it makes the affordance visible without adding furniture. */
[data-scrollable] { --fade: 32px; scrollbar-width: thin; }
[data-scrollable][data-overflow='end'] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
}
[data-scrollable][data-overflow='start'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
          mask-image: linear-gradient(to right, transparent, #000 var(--fade));
}
[data-scrollable][data-overflow='both'] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.opt-wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.opt-group { display: flex; flex-wrap: wrap; gap: 10px; }
.opt-seg-row { display: flex; gap: 0; }

/* ── Navigation ────────────────────────────────────────────────────────── */

.site-nav {
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter)));
}
.nav a { font-size: 16px; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { height: 40px; width: 40px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: var(--space-4); }
/* Needs to beat `.nav a`, not merely match it: the design system sets
   .nav a { color: inherit } at 0-1-1, which silently outranked a class-only
   rule here and left this icon inheriting navy instead of taking its colour. */
.nav-wa {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0;
}
.nav a.nav-wa { color: var(--wa-dark); }
.nav a.nav-wa:hover { color: var(--wa-hover); }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none;
  border: var(--rule); color: var(--color-text); cursor: pointer; flex-shrink: 0;
}
.nav-panel { border-bottom: var(--rule); background: var(--color-bg); }
.nav-panel .wrap { padding: 8px var(--gutter) 20px; display: flex; flex-direction: column; }
.nav-panel a {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; color: var(--color-text); text-decoration: none;
  padding: 16px 0; border-bottom: 2px solid var(--color-neutral-100);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: 112px 0 84px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 42px; align-items: center;
}
.hero-title span { display: block; white-space: nowrap; }
.hero-title .accent { color: var(--color-accent-600); white-space: normal; }
.hero-points {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 17px; line-height: 29px; max-width: 58ch;
}
.hero-points li { display: flex; align-items: baseline; gap: 14px; }
.hero-points li::before {
  content: ''; width: 10px; height: 10px; background: var(--color-accent);
  flex-shrink: 0; transform: translateY(-2px);
}
.cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 28px; }
.hero-logo { width: min(340px, 80%); height: auto; justify-self: center; object-fit: contain; }

/* ── Stats ─────────────────────────────────────────────────────────────── */

.stats { padding: 70px 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 42px 28px;
}
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
  color: var(--brand-teal); margin: 0 0 0 -0.045em;
}
.stat-label {
  font-size: 13px; line-height: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-label); margin: 14px 0 0;
}

/* ── Gallery ───────────────────────────────────────────────────────────── */

.gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px; margin-top: 32px;
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gallery figcaption {
  font-size: 13px; line-height: 20px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-label); margin-top: 12px;
}
.gallery-foot {
  display: flex; gap: 20px 28px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; margin-top: 32px; padding-top: 24px;
  border-top: var(--rule);
}
.gallery-foot-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.gallery-count {
  font-size: 13px; line-height: 20px; margin: 0; color: var(--ink-muted);
  font-feature-settings: 'tnum' 1; white-space: nowrap;
}

/* ── Occasion finder ───────────────────────────────────────────────────── */

.suggestions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 42px; border-top: var(--rule); margin-top: 32px;
}
.suggestion {
  padding: 24px 0; border-bottom: var(--rule);
  display: flex; flex-direction: column; gap: 10px;
}
.suggestion h3 { line-height: 24px; }
.suggestion p { font-size: 17px; line-height: 25px; margin: 0; color: var(--ink-body); }

/* ── Two-column tool panels (estimate + designer) ──────────────────────── */

.panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0; border: var(--rule); margin-top: 42px;
}
.panel-in {
  padding: clamp(24px, 3vw, 42px);
  display: flex; flex-direction: column; gap: 24px;
}
.panel-out {
  padding: clamp(24px, 3vw, 42px); border-left: var(--rule);
  display: flex; flex-direction: column; gap: 20px; background: #fff;
}
.panel-preview {
  padding: clamp(24px, 3vw, 42px); border-left: var(--rule);
  background: var(--color-neutral-100);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
}

.item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.item-grid .opt--tile {
  padding: 12px 6px; font-size: 15px; line-height: 19px;
  white-space: normal; text-align: center;
}

.qty-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.qty-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.input--qty { width: 92px; flex: 1 1 92px; }

.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.size-grid .input { padding-inline: 10px; }
.size-total { font-size: 17px; line-height: 24px; margin: 14px 0 0; font-feature-settings: 'tnum' 1; }
.tip { font-size: 17px; line-height: 24px; margin: 0; color: var(--color-accent-700); }

.readouts { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.readout {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline; border-bottom: var(--rule); padding-bottom: 16px;
}
.readout dt {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-label);
}
.readout dd {
  margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px;
}
.readout dd.accent { color: var(--color-accent-700); }
.covers {
  font-size: 17px; line-height: 24px; margin: 20px 0 0;
  color: var(--ink-label); border-left: 3px solid var(--color-accent); padding-left: 12px;
}
.panel-out .btn-block { margin-top: auto; }

/* Fixed mobile bar mirroring the estimator's outcome; the JS switches it on
   while the estimator section is in view, the 760px media query below is
   what actually lets it show. */
.quote-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: var(--rule);
}
.quote-bar-info { min-width: 0; }
.quote-bar-price {
  margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; color: var(--color-accent-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quote-bar-per { margin-left: 8px; font-size: 13px; color: var(--ink-label); font-family: var(--font-body, inherit); font-weight: 400; }
.quote-bar-ready { margin: 2px 0 0; font-size: 13px; line-height: 17px; color: var(--ink-label); }
.quote-bar .btn { flex-shrink: 0; }

/* ── Live designer ─────────────────────────────────────────────────────── */

.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  width: 38px; height: 38px; border: var(--rule);
  outline-offset: 2px; cursor: pointer; padding: 0;
}
.swatch[aria-pressed='true'] { outline: 3px solid var(--color-accent); }

.preview { position: relative; width: min(320px, 100%); }
.preview svg { display: block; width: 100%; }
.preview-print {
  position: absolute; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  pointer-events: none; overflow: hidden;
}
.preview-text {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 18px; text-align: center;
  margin: 0; word-break: break-word;
}
.preview-empty { font-size: 17px; line-height: 22px; text-align: center; margin: 0; }
.preview-logo { max-width: 100%; max-height: 70%; object-fit: contain; }
.preview-actions {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; width: 100%;
}

/* ── What we print ─────────────────────────────────────────────────────── */

.services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0; border-top: var(--rule); margin-top: 42px;
}
.service {
  padding: 28px 28px 28px 0; border-bottom: var(--rule);
  display: flex; flex-direction: column; gap: 12px;
}
.service-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 20px; margin: 0;
  font-feature-settings: 'tnum' 1; color: var(--color-accent-700);
}
.service h3 { font-size: 22px; line-height: 26px; letter-spacing: -0.01em; margin: 0; }
.service > p:last-child { font-size: 17px; line-height: 25px; margin: 0; color: var(--ink-body); max-width: 44ch; }

.methods { margin-top: 28px; }
.methods-label {
  font-size: 13px; line-height: 20px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-label); margin: 0 0 14px;
}
.method-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.method-list li {
  font-size: 17px; line-height: 24px; padding: 6px 12px;
  border: var(--rule); white-space: nowrap;
}

/* ── Bulk split ────────────────────────────────────────────────────────── */

.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px clamp(24px, 5vw, 96px); align-items: center; padding: 56px 0 84px;
}
.split h2 { line-height: 1.15; margin: 0; }
.split .lede { max-width: 48ch; }
.split img { width: 100%; aspect-ratio: 951 / 665; object-fit: cover; display: block; }
.split figcaption {
  font-size: 13px; line-height: 20px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-label); margin-top: 12px;
}

/* ── How it works ──────────────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px 20px; align-items: baseline;
  padding: 28px 0; border-top: var(--rule);
}
.step-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: 28px; margin: 0;
  font-feature-settings: 'tnum' 1; color: var(--color-accent-700);
}
.step h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.01em; margin: 0; }
.step > div > p { font-size: 17px; line-height: 27px; margin: 10px 0 0; color: var(--ink-body); max-width: 60ch; }

/* ── Reviews ───────────────────────────────────────────────────────────── */

.google-line { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 17px; }
/* strong defaults to 700, which is not one of the three weights loaded, so the
   browser would pick a face for us. 600 matches the emphasis tier used for
   buttons and links. */
.google-line strong { font-weight: 600; }
.reviews {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 42px; border-top: var(--rule); margin-top: 42px;
}
.review {
  margin: 0; padding: 28px 0; border-bottom: var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.review-head { display: flex; align-items: center; gap: 10px; }
.review-stars {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 26px; color: var(--color-accent-700);
  margin: 0; letter-spacing: 0.06em;
}
.review blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 26px; letter-spacing: -0.01em; margin: 0;
}
.review figcaption { font-size: 13px; line-height: 20px; color: var(--ink-label); margin-top: auto; }

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0; border: var(--rule); margin-top: 42px;
}
.contact-cell { padding: 28px; border-right: var(--rule); }
.contact-cell:last-child { border-right: 0; }
.copy-body { font-size: 17px; line-height: 25px; margin: 0; }
.contact-strong {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; color: var(--color-text); text-decoration: none;
}
.contact-mail { font-size: 17px; line-height: 25px; color: var(--color-text); }
.contact-social {
  font-size: 17px; line-height: 25px; display: inline-flex; align-items: center;
  gap: 10px; color: var(--color-text); text-decoration: none;
}
.contact-social:hover { color: var(--color-accent-700); }
.contact-map { font-size: 17px; display: inline-block; margin-top: 10px; }
.turnaround {
  display: flex; flex-wrap: wrap; gap: 20px 42px;
  border: var(--rule); border-top: 0; padding: 24px 28px;
}

/* ── Poster close, footer, floating action ─────────────────────────────── */

.poster { background: var(--color-text); color: var(--color-bg); }
.poster-inner { max-width: var(--measure); margin: 0 auto; padding: 84px var(--gutter); }
.poster h2 { margin: 0 0 0 -0.058em; letter-spacing: -0.015em; }
.poster .cta-row { margin-top: 42px; }

.site-footer {
  padding: 56px 0; font-size: 13px; line-height: 28px; color: var(--ink-label);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.site-footer img { height: 32px; width: 32px; object-fit: contain; }
.footer-social { display: flex; gap: 12px; margin-left: auto; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.footer-mail { background: var(--color-text); color: var(--color-bg); }
.footer-mail:hover { background: var(--color-accent); color: var(--color-bg); }
.footer-fb { background: #1877f2; color: #fff; }
.footer-fb:hover { background: #0f5cc4; color: #fff; }

.wa-float {
  position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wa); color: var(--color-text); box-shadow: var(--shadow-md);
  z-index: 50; text-decoration: none;
}
.wa-float:hover { background: var(--wa); color: var(--color-text); filter: brightness(1.08); }

/* ── Small per-section adjustments ─────────────────────────────────────── */

.section--pb-70 { padding-bottom: 70px; }
.section--pb-56 { padding-bottom: 56px; }
.kicker--lead { margin-bottom: 28px; }
.t-title--snug { line-height: 1.12; }
.cta-row--tight { margin-top: 32px; }
.self-start { align-self: flex-start; }
.ico { flex-shrink: 0; }
.btn-gap { gap: 10px; }
.contact-note { margin-top: 10px; color: var(--ink-label); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 760px) {
  .hero-logo { display: none; }
  .hero { padding-top: 48px; padding-bottom: 48px; }
  .hero-title span { white-space: normal; }
  /* The canvas only shrank the banded sections; every section shrinks here,
     which is what its (unmatched) [data-section] rule was reaching for. */
  .section, .stats, .split { padding-top: 56px; padding-bottom: 56px; }
  .panel, .split, .suggestions { grid-template-columns: 1fr; }
  .panel-out, .panel-preview { border-left: 0; border-top: var(--rule); }
  .contact-cell { border-right: 0; border-bottom: var(--rule); }
  .contact-cell:last-child { border-bottom: 0; }
  /* Two rows deep, still scrolling sideways. Columns at 48% put four photos
     on screen at once and leave the next one just clipped, which reads as
     "there is more" alongside the edge fade. */
  .gallery {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 48%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding-inline: 20px;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > figure { scroll-snap-align: start; }
  .opt-seg-row { flex-direction: column; align-items: stretch; }
  .opt--seg { justify-content: center; }
  .opt--seg + .opt--seg { margin-left: 0; margin-top: -2px; }
  .size-grid { grid-template-columns: repeat(2, 1fr); }
  .swatch { width: 44px; height: 44px; }
  .wa-float { bottom: 16px; right: 16px; }
  .quote-bar--on { display: flex; }
  body.quote-bar-open .wa-float { display: none; }
  .item-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-foot { flex-direction: column; align-items: flex-start; }
  .gallery-foot .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .stat-num { font-size: 34px; }
  .stat-label { margin-top: 10px; line-height: 17px; }
}

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