/* Cozzens Cabinets — modern rebuild
   Grammar: neutral canvas, type-first hierarchy, soft depth, pill buttons.
   Accent: walnut (warm wood) in place of a tech-brand color. */

:root {
  --ink: #1d1d1f;
  --text-soft: #424245;
  --text-muted: #6e6e73;
  --text-subtle: #86868b;
  --bg: #ffffff;
  --bg-alt: #fafafa;
  --bg-tint: #f5f5f7;
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --brand: #8a5a2b;        /* walnut */
  --brand-deep: #5e3a17;
  --brand-tint: rgba(138, 90, 43, 0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px -10px rgba(0,0,0,.08);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,.15);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ---------- type ---------- */
h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 14px;
}
.section-sub { color: var(--text-muted); max-width: 620px; margin-bottom: 56px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-nav { padding: 9px 20px; font-size: 15px; }

/* ---------- nav ----------
   Default (gallery.html): a solid white bar in the layout flow.
   With .nav-over (index.html): fixed and transparent so the hero photo runs
   to the very top edge, then it hardens to the solid bar past 40px of scroll.
   Legibility over the photo comes from three things together — white text, a
   text-shadow, and the ::before scrim — because the slideshow alternates
   between dark walnut and near-white painted kitchens. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.nav-over {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background .3s ease, border-color .3s ease;
}
/* The scrim rides with the bar rather than the hero, so it still backs the
   links during the first few pixels of scroll, before .is-solid kicks in. */
.nav-over::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.26) 45%, rgba(0,0,0,0) 100%);
  transition: opacity .3s ease;
}
.nav-over.is-solid::before,
.nav-over.is-open::before { opacity: 0; }
.nav-over.is-solid,
.nav-over.is-open {
  background: var(--bg);
  border-bottom-color: var(--line-soft);
}

/* Over-the-photo state. The selector carries three classes so it outranks the
   solid-bar colours below without !important. */
.nav-over:not(.is-solid):not(.is-open) .wordmark { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.nav-over:not(.is-solid):not(.is-open) .wordmark span { color: #e3c298; }
.nav-over:not(.is-solid):not(.is-open) .nav-links a {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.nav-over:not(.is-solid):not(.is-open) .nav-links a:hover { color: #e3c298; }
.nav-over:not(.is-solid):not(.is-open) .nav-toggle span {
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.nav-inner {
  position: relative;   /* above the ::before scrim */
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.wordmark:hover { text-decoration: none; }

.nav .wordmark { color: var(--ink); }
.nav .wordmark span { color: var(--brand); }
.nav .nav-links a { color: var(--text-soft); }
.nav .nav-links a:hover { color: var(--ink); }
.nav .btn-nav { background: var(--brand); color: #fff; border-color: transparent; }
.nav .btn-nav:hover { background: var(--brand-deep); }
.nav-toggle span { background: var(--ink); }

.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 15px; font-weight: 500; transition: color .3s ease; }
.nav-links a:hover { text-decoration: none; }

/* hamburger — hidden on desktop, shown under 900px */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  padding: 0 9px;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, background .3s ease;
}
.nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ----------
   Full-bleed slideshow, starting at the very top of the viewport — the nav is
   fixed and floats over it. 88vh rather than 100vh so a sliver of the next
   section stays visible: it signals the page scrolls, and it dodges the
   mobile browser-chrome resize jump that 100vh causes. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #2a2320;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ken Burns — a slow drift on the visible frame only, so the photo feels
   alive without ever reading as movement for its own sake. */
.hero-slide.is-active img { animation: kenburns 18s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Scrim. Two passes, because the copy is left-aligned and the photos behind
   it swap between dark walnut and near-white painted kitchens:
     1. left-to-right  — the one that actually carries text contrast
     2. bottom-to-top  — grounds the copy block and the dots
   Without pass 1 the headline washes out on the light kitchen slides. The
   top of the frame is handled by .nav-over::before, which travels with the
   bar instead of scrolling away underneath it. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 34%, rgba(0,0,0,0) 62%),
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 62%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px 150px;
  color: #fff;
}
.hero-copy .eyebrow { color: rgba(255,255,255,.85); }
.hero-copy h1 { max-width: 15ch; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-sub {
  max-width: 46ch;
  margin: 20px 0 32px;
  font-size: 19px;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-ctas .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.1);
}
.hero-ctas .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.2); }

/* hero controls */
.hero-dots {
  position: absolute;
  z-index: 3;
  bottom: 40px; left: 0; right: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  gap: 10px;
}
.hero-dots button {
  width: 34px; height: 3px;
  border: none;
  border-radius: 2px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: background .3s ease;
}
.hero-dots button.is-active { background: #fff; }
.hero-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
.hero-arrow:hover { background: rgba(0,0,0,.45); }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

/* ---------- lightbox arrows ---------- */
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 999px;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
  z-index: 2;
}

/* ---------- sections ---------- */
/* scroll-margin-top clears the fixed nav so anchor targets aren't hidden
   underneath it when the top-nav links jump down the page. */
.section { padding: 120px 0; scroll-margin-top: 88px; }
.section-tint { background: var(--bg-tint); }

/* ---------- category tiles ----------
   The homepage entry point into the work. Image + scrim + caption, one click
   through to the filtered gallery. Replaces six stacked project galleries. */
/* Two tiles, one per gallery filter — so they run wide rather than the
   narrow portrait columns the old four-category row used. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--line-soft);
  color: #fff;
}
.tile:hover { text-decoration: none; }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%);
}
.tile-copy {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 26px 24px;
}
.tile-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,.8);
  margin-bottom: 8px;
}
.tile-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.work-footer { margin-top: 40px; }

/* ---------- gallery page ---------- */
.gallery-head { padding: 74px 0 32px; }
/* section-sub carries a 56px tail meant for full sections; the chips sit
   directly under this one, so pull it back in. */
.gallery-head .section-sub { margin-bottom: 0; }
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.chip {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-soft);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* Each project is its own section: title, count, a grid that shows the first
   six photos, and an expander for the rest. scroll-margin clears the nav for
   the per-project anchor links (#mountain-lodge etc.). */
.project { margin-bottom: 56px; scroll-margin-top: 96px; }
.project.is-hidden { display: none; }
.project-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.project-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-subtle);
  margin-left: 8px;
}
.project .gallery-grid { padding-bottom: 0; }
.project .is-extra { display: none; }
.project.is-open .is-extra { display: block; }
.project-expand { margin-top: 16px; padding: 9px 22px; font-size: 15px; }
#projects { padding-bottom: 120px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gallery-grid a {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid a.is-hidden { display: none; }
.gallery-empty {
  color: var(--text-muted);
  padding: 40px 0 120px;
}

/* ---------- testimonials ----------
   Two views of the same seven quotes:
     .quote-carousel — the default. One quote is centred and full size; its
       neighbours peek in at either edge, scaled back and faded, so it reads
       as "there is more" without competing for attention.
     .quote-grid     — every quote at once, revealed by the toggle. Also the
       no-JS fallback, which is why it is what ships in the markup.

   The slide maths: the track is exactly as wide as the viewport, so both the
   slide width (--slide) and the translate resolve against the same box. The
   active slide is centred by shifting half the leftover width, (100 - w)/2,
   which is --edge. */
.quote-carousel { --slide: 62%; --edge: 19%; }
.quote-viewport {
  overflow: hidden;
  padding: 20px 0;          /* room for the card shadows */
  margin: 0 -10px;
  /* Feather the two edges so the peeking cards fade out instead of being
     guillotined mid-word. The fade zones stop short of the centred card. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.quote-track {
  display: flex;
  align-items: stretch;
  width: 100%;
  transform: translateX(calc(var(--edge) - var(--i, 0) * var(--slide)));
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.quote-slide {
  flex: 0 0 var(--slide);
  padding: 0 10px;
  cursor: pointer;
}
.quote-slide .quote-card {
  height: 100%;
  margin-bottom: 0;
  opacity: .38;
  transform: scale(.92);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.quote-slide.is-active .quote-card {
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow-lg);
}
.quote-slide.is-active { cursor: default; }
/* The centred quote gets the emphasis: larger type, roomier card. */
.quote-slide.is-active .quote-card p { font-size: 19px; color: var(--ink); }

.quote-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.quote-arrow {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.quote-arrow:hover { border-color: var(--ink); background: var(--bg-tint); }
.quote-dots { display: flex; gap: 8px; }
.quote-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
.quote-dots button.is-active { background: var(--brand); width: 24px; }

.quote-more { margin-top: 32px; text-align: center; }
.quote-grid.is-collapsed { display: none; }

.quote-grid {
  columns: 3;
  column-gap: 20px;
  margin-top: 40px;
}
.quote-card {
  break-inside: avoid;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.quote-card p { font-size: 16px; color: var(--text-soft); margin-bottom: 16px; }
.quote-card footer { display: flex; flex-direction: column; font-size: 14px; }
.quote-card footer strong { color: var(--ink); }
.quote-card footer span { color: var(--text-subtle); }

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-body { color: var(--text-muted); font-size: 18px; }
.shop-machines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.shop-machines figure { margin: 0; }
.shop-machines img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  display: block;
}
.shop-machines figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-subtle);
}
.stat-row { display: grid; gap: 16px; }
.stat {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.stat-num { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.stat-label { color: var(--text-subtle); font-size: 14px; }

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.contact-info { display: grid; gap: 28px; }
.info-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 4px;
}
.info-value { font-size: 17px; color: var(--ink); }
a.info-value:hover { color: var(--brand); }

.contact-form { display: grid; gap: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.contact-form textarea { resize: vertical; }
.botcheck { position: absolute; left: -9999px; }
.btn-submit { justify-self: start; }
.form-status { font-size: 14px; color: var(--text-muted); min-height: 1.5em; }
.form-status.is-error { color: #e05959; }
.form-done {
  background: var(--bg-tint);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 40px 32px;
}
.form-done p { color: var(--text-muted); margin-top: 8px; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 28px 0; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-subtle);
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.is-open { display: flex; }
.lb-img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: 8px;
  object-fit: contain;
}
.lb-arrow { background: rgba(255,255,255,.15); color: #fff; }
.lb-arrow:hover { background: rgba(255,255,255,.3); }
.lb-arrow.prev { left: 20px; }
.lb-arrow.next { right: 20px; }
.lb-close {
  position: absolute;
  top: 16px; right: 20px;
  width: 44px; height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  z-index: 2;
}
.lb-close:hover { background: rgba(255,255,255,.3); }
.lb-count {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  font-family: var(--mono);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
}

@media (max-width: 900px) {
  .section { padding: 80px 0; }
  .quote-grid { columns: 2; }
  /* Wider slide, so the centred quote still holds its own on a narrow screen
     while the neighbours stay visible as a hint. */
  .quote-carousel { --slide: 76%; --edge: 12%; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-arrow { display: none; }

  /* Collapse the links into a slide-down panel under the white bar. */
  .nav-toggle { display: flex; }
  .btn-nav { display: none; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0 28px;
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav.is-open .nav-links { max-height: 60vh; }
  .nav .nav-links a {
    color: var(--text-soft);
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 17px;
  }
  .nav .nav-links a:last-child { border-bottom: none; }
}

@media (max-width: 560px) {
  .hero { min-height: 80vh; }
  .hero-copy { padding: 0 20px 92px; }
  .hero-sub { font-size: 17px; }
  .hero-ctas .btn { flex: 1 1 auto; text-align: center; }
  .hero-dots { padding: 0 20px; bottom: 34px; }
  .quote-grid { columns: 1; }
  .quote-carousel { --slide: 88%; --edge: 6%; }
  .quote-slide.is-active .quote-card p { font-size: 17px; }
  .quote-controls { gap: 14px; }
  .field-row { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr; gap: 14px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gallery-head { padding: 50px 0 32px; }
  .container { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .hero-slide.is-active img { animation: none; }
}