/* ==========================================================================
   Sandalo — inner pages (everything except the homepage)
   Shared by Demonte Mobilya, Hizmetler, Projeler, Fabrika, Hakkımızda,
   İletişim and Teklif. Built only from the existing tokens and components:
   cream canvas, olive accents, serif headlines, Archivo UI, hairlines,
   4:5 cards, generous spacing. No new colours, fonts or decorative patterns.
   ========================================================================== */

/* ---- Page head & breadcrumb (moved unchanged from shop.css) -------------- */
/* Pages without a hero start below the fixed header. */
.page-head { padding-top: calc(var(--header-h) + var(--sp-16)); padding-bottom: var(--sp-12); }
.page-head .t-eyebrow { margin-bottom: var(--sp-3); }
.page-head .breadcrumb + .t-eyebrow { margin-top: var(--sp-8); }
.page-head .t-lead { margin-top: var(--sp-4); color: var(--text-muted); }

.breadcrumb { font-size: var(--fs-small); color: var(--text-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--sage-grey); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--olive-500); }

/* ---- Chips (moved unchanged from shop.css) ------------------------------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; list-style: none; min-height: 40px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 40px; padding: 0 16px; border: var(--hairline); border-radius: var(--radius);
  background: transparent; font-size: 15px; cursor: pointer; white-space: nowrap; color: var(--text);
}
.chip:hover { border-color: var(--olive-500); }
.chip[aria-pressed="true"] { background: var(--olive-100); border-color: var(--olive-500); color: var(--olive-900); }

/* ---- Empty state, bridge, detail blocks (moved unchanged from shop.css) -- */
.empty-state { padding: var(--sp-16) 0; display: grid; gap: var(--sp-4); justify-items: start; max-width: 36rem; }
/* Bridge to the custom flow (separate workflow, link only). */
.bridge { border-top: var(--hairline); margin-top: var(--section-y); padding-block: var(--sp-12); display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); align-items: center; justify-content: space-between; }
.detail-block { display: grid; gap: var(--sp-4); padding-block: var(--sp-8); border-top: var(--hairline); }
@media (min-width: 1024px) {
  .detail-block { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .detail-block > h2 { grid-column: 1 / span 3; }
  .detail-block > .detail-body { grid-column: 5 / span 7; }
}
.spec-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.spec-list dt { color: var(--text-muted); }
.spec-list dd { margin: 0; }
.not-found { padding-block: var(--sp-24); display: grid; gap: var(--sp-4); justify-items: start; }

/* ==========================================================================
   Components for the inner pages (Hizmetler, Projeler, Fabrika, Hakkımızda,
   İletişim, Teklif). Same tokens, hairlines and spacing as the homepage.
   ========================================================================== */

.section--tight { padding-block: calc(var(--section-y) * 0.6); }
/* Inner pages render their content from data after the first paint (prototype);
   reserving the viewport height keeps the footer below the fold meanwhile, so the
   page doesn't jump (spec 11: CLS < 0.05). A server-rendered build won't need it. */
main[data-view], main:has(.product-grid, [data-pdp]) { min-height: 100vh; min-height: 100svh; }
.page-head__actions { margin-top: var(--sp-8); }
.wide-media { aspect-ratio: 16 / 7; overflow: hidden; background: var(--stone); }
.wide-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .wide-media { aspect-ratio: 4 / 3; } }
.page-head .wide-media { margin-top: var(--sp-12); }
.chips--static { margin-top: var(--sp-6); flex-wrap: wrap; }
.chips--static .chip { display: inline-flex; align-items: center; cursor: default; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { padding-left: 22px; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--olive-500); }

/* ---- Compact process strip (hub, category pages, factory journey) -------- */
.strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.strip__item { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-6); border-top: var(--hairline); }
.strip__item p { color: var(--text-muted); }
@media (min-width: 768px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--gutter); } }
@media (min-width: 1024px) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.strip__note { margin-top: var(--sp-8); color: var(--text-muted); }

/* ---- Hizmetler hub: full-width index rows (spec 6) ----------------------- */
.index-group + .index-group { padding-top: 0; }
.index-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-3) var(--sp-8); margin-bottom: var(--sp-6); }
.index-rows { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.index-row {
  position: relative; display: grid; gap: var(--sp-2) var(--gutter); padding-block: var(--sp-6);
  border-bottom: var(--hairline); text-decoration: none; color: inherit; min-height: 48px;
}
.index-row__name { color: var(--text-strong); font-family: var(--font-serif); font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2rem); line-height: 1.15; }
.index-row__line { color: var(--text-muted); }
.index-row__go { justify-self: start; }
.index-row__media { display: none; }
@media (min-width: 1024px) {
  .index-row { grid-template-columns: 5fr 5fr 2fr; align-items: center; padding-right: 180px; }
  .index-row__go { justify-self: end; }
  .index-row__media {
    display: block; position: absolute; right: 0; top: 50%; width: 150px; aspect-ratio: 1;
    transform: translateY(-50%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); overflow: hidden;
  }
  .index-row__media .ph__label { display: none; }
  .index-row__media img { width: 100%; height: 100%; object-fit: cover; }
  .index-row:hover .index-row__media, .index-row:focus-visible .index-row__media { opacity: 1; }
}
.index-row:hover .index-row__name { color: var(--olive-500); }

/* ---- Cards (typical solutions) and swatches ------------------------------ */
.cards { display: grid; gap: var(--sp-12) var(--gutter); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: grid; gap: var(--sp-3); align-content: start; }
.card p { color: var(--text-muted); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--sp-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--gutter); }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.swatch { display: grid; gap: var(--sp-2); font-size: var(--fs-small); }
.swatch__media { aspect-ratio: 1; overflow: hidden; }
.swatch__media img { width: 100%; height: 100%; object-fit: cover; }
.swatches__note { margin-top: var(--sp-8); color: var(--text-muted); }

.spec-list--wide { gap: var(--sp-4) var(--sp-12); max-width: 60rem; }
@media (max-width: 767px) { .spec-list--wide { grid-template-columns: 1fr; gap: 4px; } .spec-list--wide dd { margin-bottom: var(--sp-4); } }

.faq { border-top: var(--hairline); max-width: 52rem; }
.faq details { border-bottom: var(--hairline); }
.faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); cursor: pointer; list-style: none; font-weight: 400; color: var(--text-strong); padding-block: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--olive-500); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: 40rem; }

/* ---- Quote call-to-action band ------------------------------------------ */
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-8); }
.cta-band__inner > div:first-child { display: grid; gap: var(--sp-3); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.cta-band__links { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-2); }

/* ---- Text + image rows (Tasarım Hizmeti steps, Fabrika sections) --------- */
.split, .ds-step { display: grid; gap: var(--sp-8) var(--gutter); align-items: center; }
.split + .split, .ds-step + .ds-step { margin-top: var(--section-y); }
.split__media, .ds-step__media { aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden; }
.split__media:empty, .ds-step__media:empty { display: none; }
.split__media img, .ds-step__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text, .ds-step__text { display: grid; gap: var(--sp-4); align-content: start; }
.split__text p, .ds-step__text p:not(.t-lead) { color: var(--text-muted); }
@media (min-width: 1024px) {
  .split, .ds-step { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .split__media, .ds-step__media { grid-column: 1 / span 5; }
  .split__text, .ds-step__text { grid-column: 7 / span 5; }
  .split--flip .split__media, .ds-step--flip .ds-step__media { grid-column: 8 / span 5; grid-row: 1; }
  .split--flip .split__text, .ds-step--flip .ds-step__text { grid-column: 2 / span 5; grid-row: 1; }
  .split__media:empty + .split__text { grid-column: 2 / span 7; }
}

/* ---- Fabrika ------------------------------------------------------------- */
.factory--hero { padding-top: calc(var(--header-h) + var(--sp-16)); }
.factory--hero .t-h1 { color: var(--cream); }
.factory__media[hidden] + .factory__text { grid-column: 1 / -1; max-width: 48rem; }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-grid__item { aspect-ratio: 4 / 5; overflow: hidden; }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Hakkımızda ---------------------------------------------------------- */
.about-hero .intro__media[hidden] { display: none; }
.about-name { position: relative; overflow: hidden; }
.about-name__mark { position: absolute; right: -4%; top: 50%; width: min(60vw, 560px); transform: translateY(-50%); opacity: 0.05; pointer-events: none; }
.about-name__text { grid-column: 1 / -1; display: grid; gap: var(--sp-6); position: relative; }
.about-name__text .t-lead { color: var(--text-muted); }
@media (min-width: 1024px) { .about-name__text { grid-column: 2 / span 8; } }
.cols-3 { display: grid; gap: var(--sp-8) var(--gutter); }
@media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col { display: grid; gap: var(--sp-3); align-content: start; padding-top: var(--sp-6); border-top: var(--hairline); }
.col p { color: var(--text-muted); }
.people { display: grid; gap: var(--sp-8) var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person__media { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: var(--sp-3); }
.person__media img { width: 100%; height: 100%; object-fit: cover; }
.about-numbers .stats { margin-top: 0; }

/* ---- Projeler index (spec 7) --------------------------------------------- */
.project-count { margin-top: var(--sp-4); color: var(--text-muted); }
.filter-bar { position: sticky; top: 0; z-index: 20; background: var(--cream); border-top: var(--hairline); border-bottom: var(--hairline); margin-bottom: var(--sp-12); }
.filter-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); padding-block: var(--sp-3); }
.filter-bar .switch { border-bottom: 0; }
.filter-bar .switch button { min-height: 48px; }
.filter-bar .result-count { margin-left: auto; }
.filter-bar .result-count:focus { outline: none; }
.switch button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--olive-500); }
@media (max-width: 767px) { .filter-bar .chips { order: 3; width: 100%; } }

.project-grid { display: grid; gap: var(--sp-12) var(--gutter); transition: opacity 150ms linear; }
.project-grid.is-fading { opacity: 0; }
@media (min-width: 768px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  /* Rhythm of 3 rows, repeating every 7 cards (spec 7):
     A: large 1–7 + medium 9–12 offset · B: three equal · C: mirror of A */
  .project-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .project-grid > * { grid-column: span 4; }
  .project-grid > :nth-child(7n+1) { grid-column: 1 / span 7; }
  .project-grid > :nth-child(7n+2) { grid-column: 9 / span 4; margin-top: 120px; }
  .project-grid > :nth-child(7n+6) { grid-column: 1 / span 4; margin-top: 120px; }
  .project-grid > :nth-child(7n+7) { grid-column: 6 / span 7; grid-row: span 1; }
}
.project-card__hover { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-in-out); }
@media (hover: hover) and (min-width: 1024px) { .project-card:hover .project-card__hover { opacity: 1; } }
.empty-state__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-top: var(--sp-4); }
.cards--projects .project-card__title { font-size: 22px; }

/* ---- Project detail (spec 8) --------------------------------------------- */
.project-hero { position: relative; margin-top: var(--header-h); height: 85vh; min-height: 560px; color: var(--cream); overflow: hidden; background: var(--olive-900); }
.project-hero__media { position: absolute; inset: 0; }
.project-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.project-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,28,23,0.6), rgba(28,28,23,0) 55%); pointer-events: none; }
.project-hero__content { position: absolute; left: 0; right: 0; bottom: var(--sp-12); display: grid; gap: var(--sp-4); }
.project-hero__content .t-h1 { color: var(--cream); max-width: 16em; }
.project-hero__content .t-lead { max-width: 34em; }
.breadcrumb--light, .breadcrumb--light a { color: rgba(245,242,235,0.85); }
.breadcrumb--light li + li::before { color: rgba(245,242,235,0.5); }

.fact-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--gutter); margin: 0; padding-block: var(--sp-8); border-bottom: var(--hairline); }
.fact-bar dt { font-size: var(--fs-small); color: var(--text-muted); }
.fact-bar dd { margin: 4px 0 0; }
@media (min-width: 1024px) { .fact-bar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

.project-brief .grid, .project-brief__text { row-gap: var(--sp-8); }
.project-brief__text { grid-column: 1 / -1; display: grid; gap: var(--sp-4); align-content: start; }
.fact-box { grid-column: 1 / -1; display: grid; gap: var(--sp-3); padding: var(--sp-6); background: var(--stone); align-self: start; }
.fact-box h3 + * { margin-bottom: var(--sp-4); }
.client-logo { height: 40px; width: auto; filter: grayscale(1); }
@media (min-width: 1024px) {
  .project-brief__text { grid-column: 2 / span 6; }
  .fact-box { grid-column: 9 / span 4; position: sticky; top: calc(68px + var(--sp-8)); }
}

.gallery__chapter { margin-bottom: var(--sp-6); }
.gallery__row { display: grid; gap: var(--gutter); margin-bottom: var(--gutter); }
.gallery__row--wide { max-width: none; padding-inline: 0; }
.gallery__row--two, .gallery__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery__item { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--stone); cursor: zoom-in; overflow: hidden; aspect-ratio: 4 / 5; }
div.gallery__item { cursor: default; }
.gallery__row--wide .gallery__item { aspect-ratio: 16 / 7; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__cap { position: absolute; left: 12px; bottom: 12px; font-size: 12px; background: var(--cream); padding: 3px 8px; }
@media (min-width: 1024px) {
  .gallery__row--offset { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery__row--offset .gallery__item { grid-column: 6 / span 6; }
  .gallery__row--pair { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery__row--pair .gallery__item { grid-column: span 5; aspect-ratio: 1; }
  .gallery__row--pair .gallery__item:first-child { grid-column: 2 / span 5; }
}
@media (max-width: 767px) { .gallery__row--two, .gallery__row--pair { grid-template-columns: 1fr; } .gallery__row--wide .gallery__item { aspect-ratio: 4 / 3; } }

.d2r-row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8) var(--gutter); }
@media (min-width: 768px) { .d2r-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; } }
.d2r-row__media { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: var(--sp-2); }
.d2r-row__media img { width: 100%; height: 100%; object-fit: cover; }

.project-next { row-gap: var(--sp-12); align-items: end; }
.project-next__card, .project-next__cta { grid-column: 1 / -1; display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .project-next__card { grid-column: 1 / span 5; } .project-next__cta { grid-column: 7 / span 6; } }

.lightbox { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--cream); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: var(--sp-3); max-height: 100vh; padding: var(--sp-12) 0; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; }
.lightbox__figure figcaption { font-size: var(--fs-small); color: rgba(245,242,235,0.8); }
.lightbox button { background: none; border: 0; color: var(--cream); font-size: 28px; min-width: 48px; min-height: 48px; cursor: pointer; }
.lightbox__close { position: absolute; top: 12px; right: 12px; }

/* ---- İletişim ------------------------------------------------------------ */
.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .channels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.channel { display: grid; gap: 6px; align-content: start; min-height: 140px; padding: var(--sp-6); border: var(--hairline); text-decoration: none; color: inherit; transition: border-color var(--dur-fast); }
a.channel:hover { border-color: var(--olive-500); }
.channel svg { width: 24px; height: 24px; color: var(--olive-500); margin-bottom: var(--sp-2); }
.channel__label { font-size: var(--fs-small); color: var(--text-muted); }
.channel__value { font-size: 19px; font-weight: 400; color: var(--text-strong); }
.visit { row-gap: var(--sp-12); align-items: start; }
.visit__text { grid-column: 1 / -1; display: grid; gap: var(--sp-4); justify-items: start; }
.visit__text address { font-style: normal; }
.visit__map { grid-column: 1 / -1; }
@media (min-width: 1024px) { .visit__text { grid-column: 1 / span 5; } .visit__map { grid-column: 7 / span 6; } }
.map-box { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: var(--stone); cursor: pointer; overflow: hidden; }
div.map-box { cursor: default; }
.map-box img { width: 100%; height: 100%; object-fit: cover; }
.map-box__cta { position: absolute; left: 16px; bottom: 16px; background: var(--cream); padding: 8px 12px; font-weight: 500; }
.map-frame { width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* ---- Forms (shared) ------------------------------------------------------ */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-error { color: var(--error); }
.form-status.is-success { color: var(--success); }
.form-status.is-note { color: var(--text); background: var(--olive-100); padding: var(--sp-3) var(--sp-4); border-left: 2px solid var(--olive-500); }
.form-status:empty { display: none; }
.field__label { font-size: var(--fs-small); font-weight: 400; color: var(--text); }
.field__hint { font-weight: 400; color: var(--text-muted); }

/* ---- Teklif (spec 10) ---------------------------------------------------- */
[data-page="quote"] .action-bar { display: none; }   /* the form has its own sticky "Devam" on mobile */
[data-page="quote"] body.has-action-bar, body.has-action-bar:has([data-view="quote"]) { padding-bottom: 0; }
.quote-page { padding-bottom: var(--section-y); }
.quote-page__grid { row-gap: var(--sp-12); align-items: start; }
.quote-page__form { grid-column: 1 / -1; min-width: 0; }
.quote-page__aside { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .quote-page__form { grid-column: 1 / span 7; }
  .quote-page__aside { grid-column: 9 / span 4; position: sticky; top: calc(68px + var(--sp-8)); }
}
.qsteps { list-style: none; margin: 0 0 var(--sp-12); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qsteps li { font-size: var(--fs-small); color: var(--text-muted); padding-top: var(--sp-3); border-top: 2px solid var(--sage-grey); }
.qsteps li span { display: inline-block; font-weight: 500; margin-right: 4px; }
.qsteps li[aria-current="step"], .qsteps li.is-done { color: var(--text); border-top-color: var(--olive-500); }
@media (max-width: 767px) { .qsteps li { font-size: 0; } .qsteps li span { font-size: var(--fs-small); } .qsteps li[aria-current="step"] { font-size: var(--fs-small); } }
.qstep { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-8); min-width: 0; }
.qstep legend { padding: 0; margin-bottom: var(--sp-8); }
.qstep.is-in { animation: qstep-in var(--dur-base) var(--ease-out); }
@keyframes qstep-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qstep.is-in { animation: none; } }

.choice-cards { display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice-card { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); border: var(--hairline); cursor: pointer; min-height: 140px; align-content: start; transition: border-color var(--dur-fast), background var(--dur-fast); }
.choice-card input { position: absolute; top: var(--sp-6); right: var(--sp-6); width: 20px; height: 20px; accent-color: var(--olive-500); }
.choice-card__title { font-family: var(--font-serif); font-size: 28px; line-height: 1.1; }
.choice-card__text { color: var(--text-muted); font-size: var(--fs-small); padding-right: var(--sp-8); }
.choice-card:hover { border-color: var(--olive-500); }
.choice-card:has(input:checked) { border-color: var(--olive-500); background: var(--olive-100); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--olive-500); outline-offset: 2px; }

.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-2); }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: var(--hairline); border-radius: var(--radius); cursor: pointer; font-size: 15px; transition: border-color var(--dur-fast); }
.chip-check span:hover { border-color: var(--olive-500); }
.chip-check input:checked + span { background: var(--olive-100); border-color: var(--olive-500); color: var(--olive-900); }
.chip-check input:focus-visible + span { outline: 2px solid var(--olive-500); outline-offset: 2px; }
.field input[type="file"] { border-bottom: 0; padding: 10px 0; }

.qnav { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-12); }
.qnav .btn { min-height: 48px; }
.qnav [data-next], .qnav [data-submit] { margin-left: auto; }
@media (max-width: 767px) {
  .qnav { position: sticky; bottom: 0; z-index: 10; background: var(--cream); margin-inline: calc(var(--margin) * -1); padding: var(--sp-3) var(--margin) calc(var(--sp-3) + env(safe-area-inset-bottom)); border-top: var(--hairline); }
  .qnav .btn { flex: 1; }
}
.quote-page .form-status { margin-top: var(--sp-6); }
.quote-success { display: grid; gap: var(--sp-8); }
.quote-success:focus { outline: none; }

.next-panel { display: grid; gap: var(--sp-6); padding: var(--sp-8); background: var(--stone); }
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.next-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 2px var(--sp-3); }
.next-steps strong { font-weight: 500; color: var(--text-strong); }
.next-steps .step__num { grid-row: span 2; font-size: 22px; }
.next-steps p { color: var(--text-muted); font-size: var(--fs-small); }
.next-panel__contact { list-style: none; margin: 0; padding: var(--sp-6) 0 0; border-top: var(--hairline); display: grid; gap: 8px; }

/* Inline errors sit in the gap under the field, so showing or clearing one never
   shifts the fields and buttons below (a shifted button can miss a click). */
.qstep .field, [data-contact-form] .field { position: relative; }
.qstep .field .field-error, [data-contact-form] .field .field-error {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; line-height: 1.3;
}
.qstep { row-gap: var(--sp-12); }