/* Final visual refinements for the fictional client demonstrations. */
.alder-gallery { grid-template-columns:1.12fr .88fr; grid-template-rows:repeat(2,minmax(280px,1fr)); }
.alder-gallery figure { min-height:0; }
.alder-gallery figure:first-child { grid-row:span 2; min-height:575px; }
.alder .menu-item { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.alder .menu-item p { margin:-4px 0 0; }
.menu-add { grid-column:1 / -1; justify-self:start; margin-top:4px; padding:7px 9px; color:#2d4d35; border:1px solid #8eab91; background:transparent; font:600 9px var(--mono); letter-spacing:.04em; text-transform:uppercase; transition:background .16s ease,color .16s ease; }
.menu-add:hover { color:#fffdf7; border-color:#31563b; background:#31563b; }
.builder-add { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:2px; padding:15px 17px; color:#193827; border:1px solid #ffe09e; background:#ffe09e; font-size:12px; font-weight:700; }
.builder-add span { font-size:19px; line-height:1; }
.builder-add:hover { background:#fff1c8; }
.alder .order-ticket { position:sticky; top:18px; }
.alder .ticket-lines { gap:0; min-height:102px; }
.alder .cart-empty { color:#716655!important; font-style:italic; }
.alder .cart-line { display:grid!important; grid-template-columns:minmax(0,1fr) auto 22px; align-items:start; gap:9px; padding:8px 0; border-bottom:1px solid rgba(157,146,127,.25); }
.alder .cart-line:last-child { border-bottom:0; }
.alder .cart-line span { line-height:1.35; }
.alder .cart-line b { white-space:nowrap; }
.remove-item,.ticket-clear { padding:0; color:#8d3020; border:0; background:transparent; font:500 17px/1 var(--sans); }
.ticket-clear { display:block; margin:0 auto; font:500 9px var(--mono); letter-spacing:.08em; text-decoration:underline; text-underline-offset:3px; }
.alder .deal { display:grid; grid-template-rows:184px auto; padding:0; overflow:hidden; }
.alder .deal img { width:100%; height:184px; object-fit:cover; object-position:center; }
.alder .deal:nth-child(2) img { object-position:center 62%; }
.alder .deal>div { padding:22px; }
.alder .deal b { min-height:0; margin:18px 0 10px; }
.alder .deal p { min-height:36px; }
.thread .visit-map { filter:none; background:#f7f5f0; }
.thread .demo-flag { background:#95554c; }
.thread .hero-kicker,.thread .section-kicker { color:#7c433c; }
.thread .dark-section .section-kicker { color:#f2c6bc; }
.thread .demo-button.ghost { color:#263c3e; border-color:#263c3e; background:transparent; }
.thread .demo-button.ghost:hover { color:#fff; background:#263c3e; }
.ridge .dark-section .booking-intro p { color:#dce4dd; }
.ridge .dark-section .section-kicker { color:#f0d4a5; }

@media (max-width:900px) {
  .alder .order-ticket { position:static; }
}

@media (max-width:580px) {
  .alder-gallery { grid-template-columns:1fr; grid-template-rows:auto; }
  .alder-gallery figure:first-child { grid-row:auto; min-height:350px; }
  .alder .deal { grid-template-rows:205px auto; }
  .alder .deal img { height:205px; }
  .demo-flag span { display:none; }
  .demo-nav { gap:12px; padding:12px 18px; }
  .demo-logo { min-width:0; font-size:22px; }
  .demo-logo-image { width:165px; height:45px; }
  .thread .demo-logo { font-size:24px; }
  .ridge .demo-logo { font-size:14px; }
  .nav-call { min-height:44px; display:flex; align-items:center; justify-content:center; padding:9px 12px; text-align:center; }
  .hero-copy { padding:62px 20px 30px; }
  .demo-hero h1,.thread .demo-hero h1,.ridge .demo-hero h1 { font-size:clamp(46px,13vw,54px); line-height:1; }
  .demo-button { width:100%; min-height:48px; }
  .hero-fact { width:calc(100% - 40px); margin:0 20px 24px; padding:19px; }
  .info-strip { gap:0; padding:10px 20px; }
  .info-strip div { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); }
  .info-strip a { width:100%; margin-top:10px; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .site-section { padding:62px 20px; }
  .section-head h2,.solo-head h2,.alder-intro-copy h2,.thread .intro-copy h2,.ridge .intro-copy h2,.booking-intro h2,.visit h2 { font-size:clamp(41px,11.5vw,48px); line-height:1.02; }
  .alder-intro-stats,.thread .studio-facts { grid-template-columns:1fr; }
  .alder-intro-stats div { min-height:0; padding:19px; }
  .alder-intro-stats b { margin-top:16px; }
  .alder-gallery,.hair-gallery { gap:10px; margin-top:34px; }
  .alder-gallery figure:first-child,.hair-gallery figure:first-child { min-height:300px; }
  .alder-gallery figure,.hair-gallery figure { min-height:245px; }
  .menu-board,.deal-grid,.project-grid,.process-grid { margin-top:34px; }
  .option-grid { grid-template-columns:1fr; }
  .choice,.topping,.menu-add,.date-picks button { min-height:44px; }
  .booking-submit,.quote-form button,.builder-add,.ticket-clear { min-height:48px; }
  .ticket-clear { width:100%; margin-top:4px; }
  .remove-item { min-width:44px; min-height:44px; font-size:9px; font-weight:700; text-transform:uppercase; }
  .order-ticket,.booking-panel,.automation-panel,.quote-form { width:100%; padding:20px; box-shadow:none; }
  .visit-actions { display:grid; grid-template-columns:1fr; }
  .visit-map { min-height:290px; }
  .site-footer { gap:16px; padding:24px 20px; }
}

/* Sales-readiness pass: readable labels, reliable controls, and distinct mobile rhythm. */
.demo-flag,
.hero-kicker,
.section-kicker,
.hero-fact span,
.alder-intro-stats span,
.ticket-label,
.ticket-total span,
.deal span,
.thread .studio-facts span,
.service-card span,
.automation-panel>span,
.project-card span,
.process-card span { font-size:10px; line-height:1.45; }
.alder-gallery figcaption,.hair-gallery figcaption { font-size:10px; line-height:1.35; }
.menu-add,.ticket-clear { font-size:10px; }
.choice small { font-size:10px; line-height:1.5; }
.site-footer { font-size:11px; line-height:1.6; }
.booking-panel select,.booking-panel input,.quote-form input,.quote-form textarea { min-height:44px; }

@media (max-width:580px) {
  body { overflow-x:hidden; }
  .demo-flag { min-height:32px; font-size:9px; }
  .demo-flag b { display:block; margin:auto; }
  .hero-kicker,.section-kicker { font-size:10px; line-height:1.5; }
  .hero-copy { min-width:0; }
  .hero-copy>p:not(.hero-kicker) { font-size:15px; line-height:1.58; }
  .hero-fact p,.menu-item p,.service-card p,.project-card p,.process-card p { font-size:12px; line-height:1.58; }
  .site-footer,.site-footer p { font-size:11px; line-height:1.65; }
  .site-footer a { min-height:44px; align-items:center; }
  .booking-panel select,.booking-panel input,.quote-form input,.quote-form textarea { min-height:46px; font-size:16px; }

  /* Alder stays warm, food-led, and compact rather than copying the other demos. */
  .alder .hero-photo { object-position:56% center; }
  .alder .hero-shade { background:linear-gradient(180deg,rgba(20,31,22,.34),rgba(20,31,22,.82)); }
  .alder .hero-copy { padding-top:54px; }
  .alder .demo-hero h1 { font-size:clamp(45px,12.8vw,52px); }
  .alder .menu-board { gap:30px; }
  .alder .menu-item { padding:15px 0; }

  /* Thread & Tide keeps a bright editorial hero with stronger reading contrast. */
  .thread .hero-shade { background:linear-gradient(90deg,rgba(248,246,241,.97) 0%,rgba(248,246,241,.9) 72%,rgba(248,246,241,.68) 100%); }
  .thread .hero-copy { padding-top:58px; }
  .thread .hero-copy>p:not(.hero-kicker) { color:#304448; }
  .thread .service-grid { gap:18px; }
  .thread .service-card { min-height:235px; border-radius:2px; }

  /* Ridge & Rail remains bold and architectural without clipping long headings. */
  .ridge .hero-shade { background:linear-gradient(90deg,rgba(22,29,28,.94),rgba(22,29,28,.77) 72%,rgba(22,29,28,.58)); }
  .ridge .demo-hero h1 { max-width:100%; font-size:clamp(40px,11.8vw,47px); line-height:1.02; letter-spacing:-.05em; }
  .ridge .hero-copy { padding-top:58px; overflow:hidden; }
  .ridge .project-grid { gap:30px; }
  .ridge .project-card { padding-bottom:4px; }
  .ridge .process-grid { gap:10px; background:transparent; }
}

/* Accessibility: keyboard focus, readable contrast, touch targets, and motion preferences. */
.demo-skip { position:fixed; z-index:1000; top:-100px; left:14px; padding:12px 16px; color:#fff; background:#111; font-weight:700; text-decoration:none; }
.demo-skip:focus { top:14px; }
:where(a,button,input,select,textarea,iframe):focus-visible { outline:3px solid #f0b85e!important; outline-offset:3px; box-shadow:0 0 0 2px #fff; }
.booking-panel select,.booking-panel input,.quote-form input,.quote-form textarea { outline:0; }
.booking-field-label { display:grid; gap:8px; margin-top:16px; font-size:10px; font-weight:700; }
.menu-add,.choice,.topping,.date-picks button,.ticket-clear,.remove-item,.booking-submit,.quote-form button { min-height:44px; }
.remove-item { min-width:44px; font-size:9px; font-weight:700; text-transform:uppercase; }
.ticket-clear { min-width:44px; padding-inline:10px; }
.site-footer a { text-underline-offset:3px; }

.thread .booking-panel .section-kicker { color:#7c433c; }
.thread .booking-result { color:#31524f; }
.thread .site-footer .demo-logo { color:#fff; }
.ridge #projects .section-kicker { color:#6a4d31; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Each demo has its own composition. Shared accessibility rules remain consistent. */
.hero-copy .hero-meta { max-width:none; margin:24px 0 0; color:inherit; font:600 10px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; opacity:.86; }

/* Alder & Stone: full-bleed food photography with a menu-first restaurant rhythm. */
.alder .demo-hero { display:flex; align-items:flex-end; min-height:700px; }
.alder .hero-shade { background:linear-gradient(180deg,rgba(16,27,19,.08) 16%,rgba(16,27,19,.82) 100%); }
.alder .hero-copy { width:100%; max-width:none; padding:90px clamp(24px,8vw,130px) 72px; }
.alder .hero-copy h1 { max-width:820px; }
.alder .hero-copy>p:not(.hero-meta) { max-width:520px; }
.alder .hero-fact { position:absolute; right:clamp(22px,5vw,74px); bottom:62px; margin:0; }
.alder .menu-board { grid-template-columns:1.15fr .9fr .95fr; }

/* Thread & Tide: bright editorial split, soft cards, and an appointment-led path. */
.thread .demo-hero { grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); min-height:650px; background:#f2ede7; }
.thread .hero-photo { position:relative; grid-column:1; grid-row:1; height:100%; object-position:center; }
.thread .hero-shade { display:none; }
.thread .hero-copy { grid-column:2; grid-row:1; align-self:center; max-width:none; padding:78px clamp(44px,7vw,112px); color:#263c3e; }
.thread .demo-hero h1 { color:#263c3e; }
.thread .demo-hero h1 em { color:#9a5a51; }
.thread .hero-copy>p:not(.hero-meta) { color:#44575a; }
.thread .hero-fact { position:absolute; z-index:2; bottom:34px; left:clamp(22px,4vw,58px); width:min(270px,34%); margin:0; background:#fffdf9; transform:none; }
.thread .service-grid { grid-template-columns:1.15fr .85fr; gap:18px; }
.thread .service-card:first-child { grid-column:1 / -1; display:grid; grid-template-columns:.45fr 1fr; align-items:end; gap:22px; min-height:210px; }
.thread .service-card:first-child p { grid-column:2; }
.thread .hair-gallery { grid-template-columns:.78fr 1.22fr; grid-template-rows:310px 310px; }
.thread .hair-gallery figure:first-child { grid-row:1 / 3; min-height:0; }
.thread .hair-gallery figure:nth-child(2),.thread .hair-gallery figure:nth-child(3) { min-height:0; }

/* Ridge & Rail: architectural split hero, featured project, and linear process. */
.ridge .demo-hero { grid-template-columns:minmax(0,.82fr) minmax(440px,1.18fr); min-height:660px; background:#202d2c; }
.ridge .hero-photo { position:relative; grid-column:2; grid-row:1; height:100%; object-position:center; }
.ridge .hero-shade { display:none; }
.ridge .hero-copy { grid-column:1; grid-row:1; align-self:center; max-width:none; padding:78px clamp(34px,6vw,96px); color:#f5f3ed; }
.ridge .hero-copy>p:not(.hero-meta) { color:#dce4dd; }
.ridge .hero-fact { position:absolute; right:clamp(22px,4vw,58px); bottom:34px; width:min(300px,34%); margin:0; transform:none; }
.ridge .project-grid { grid-template-columns:1.2fr .8fr; grid-template-rows:1fr 1fr; gap:24px 32px; }
.ridge .project-card:first-child { grid-row:1 / 3; }
.ridge .project-card:first-child img { aspect-ratio:auto; height:535px; }
.ridge .project-card:nth-child(2),.ridge .project-card:nth-child(3) { display:grid; grid-template-columns:150px 1fr; column-gap:18px; align-items:start; }
.ridge .project-card:nth-child(2) img,.ridge .project-card:nth-child(3) img { grid-row:1 / 4; width:150px; height:100%; min-height:210px; aspect-ratio:auto; }
.ridge .project-card:nth-child(2) h3,.ridge .project-card:nth-child(3) h3 { margin-top:15px; }
.ridge .process-grid { grid-template-columns:1fr; gap:0; background:transparent; border-top:1px solid #6e817d; }
.ridge .process-card,.ridge .process-card:nth-child(2),.ridge .process-card:nth-child(3) { display:grid; grid-template-columns:150px minmax(230px,.75fr) 1fr; align-items:start; gap:28px; min-height:0; padding:28px 0; color:#f0f3ef; border-bottom:1px solid #6e817d; background:transparent; }
.ridge .process-card h3 { margin:0; }
.ridge .process-card:nth-child(3) span { color:#f0d4a5; }

@media (max-width:900px) {
  .alder .hero-copy { padding-right:clamp(24px,8vw,90px); }
  .alder .hero-fact { position:relative; right:auto; bottom:auto; flex:none; margin:0 22px 38px auto; }
  .thread .demo-hero,.ridge .demo-hero { grid-template-columns:1fr; }
  .thread .hero-photo { grid-column:1; grid-row:1; height:390px; }
  .thread .hero-copy { grid-column:1; grid-row:2; padding:62px clamp(24px,7vw,70px); }
  .thread .hero-fact { position:relative; grid-column:1; grid-row:3; bottom:auto; left:auto; width:min(440px,calc(100% - 44px)); margin:0 22px 40px; }
  .ridge .hero-copy { grid-column:1; grid-row:1; padding:68px clamp(24px,7vw,70px); }
  .ridge .hero-photo { grid-column:1; grid-row:2; height:430px; }
  .ridge .hero-fact { position:relative; grid-column:1; grid-row:3; right:auto; bottom:auto; width:min(440px,calc(100% - 44px)); margin:-90px 22px 38px auto; }
  .ridge .project-grid { grid-template-columns:1fr; grid-template-rows:auto; }
  .ridge .project-card:first-child { grid-row:auto; }
  .ridge .project-card:first-child img { height:auto; aspect-ratio:1.15; }
  .ridge .project-card:nth-child(2),.ridge .project-card:nth-child(3) { display:block; }
  .ridge .project-card:nth-child(2) img,.ridge .project-card:nth-child(3) img { width:100%; height:auto; min-height:0; aspect-ratio:1.15; }
}

@media (max-width:580px) {
  .hero-copy .hero-meta { margin-top:19px; font-size:9px; }
  .alder .demo-hero { display:grid; min-height:620px; }
  .alder .hero-copy { padding:82px 20px 34px; }
  .alder .hero-fact { width:calc(100% - 40px); margin:0 20px 24px; }
  .thread .hero-photo { height:310px; }
  .thread .hero-copy { padding:52px 20px 38px; }
  .thread .service-grid { grid-template-columns:1fr; }
  .thread .service-card:first-child { grid-column:auto; display:block; min-height:235px; }
  .thread .service-card:first-child p { grid-column:auto; }
  .thread .hair-gallery { grid-template-columns:1fr; grid-template-rows:auto; }
  .thread .hair-gallery figure:first-child { grid-row:auto; }
  .ridge .hero-copy { padding:58px 20px 44px; }
  .ridge .hero-photo { height:320px; }
  .ridge .hero-fact { width:calc(100% - 40px); margin:-62px 20px 28px; }
  .ridge .process-card,.ridge .process-card:nth-child(2),.ridge .process-card:nth-child(3) { grid-template-columns:42px 1fr; gap:12px; padding:24px 0; }
  .ridge .process-card p { grid-column:2; }
}
