@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Shared stylesheet for every agency page except the homepage (index.html
   links home.css). Tokens, header, actions, close band, footer and the mobile
   nav are copied from home.css so the pages read as one site; keep the two in
   step until they are folded into a single file.
   --------------------------------------------------------------------------- */

:root {
  --blue:#3454f4;
  --blue-deep:#2440d6;
  --ink:#101a2e;
  --ground:#f1f2f7;
  --white:#ffffff;
  --muted:#5a6377;
  --rule:#d5d8e3;
  --tint:#e4e9ff;
  --gutter:max(28px, calc((100vw - 1292px) / 2));
  --radius:14px;
  --radius-sm:6px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Poppins', sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection { background:#c3cfff; color:var(--ink); }
a { color:inherit; }
button,input,select,textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { padding:0; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.04em; line-height:.95; }
p { margin:0; }
ol,ul { margin:0; padding:0; list-style:none; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 16px; background:var(--white); color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; transform:translateY(-160%); transition:transform .16s ease; }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.lead :focus-visible, .close :focus-visible, .site-header :focus-visible { outline-color:var(--white); }

/* --- the blue field: header + page title ----------------------------------- */

.lead { background:var(--blue); color:var(--white); }

.site-header {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px var(--gutter);
  background:var(--blue);
  color:var(--white);
}
.wordmark { font-size:18px; font-weight:700; letter-spacing:-.04em; text-decoration:none; }
.site-header nav { display:flex; align-items:center; gap:28px; }
.site-header nav a { color:#e4e9ff; font-size:15px; font-weight:500; text-decoration:none; }
.site-header nav a:hover { color:var(--white); }
.site-header nav a[aria-current="page"] { color:var(--white); text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1.5px; }
.site-header nav a.nav-button { padding:11px 17px; background:var(--white); color:var(--blue); font-weight:700; text-decoration:none; }
.site-header nav a.nav-button:hover { background:var(--tint); color:var(--blue); }
.nav-toggle { display:none; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; background:transparent; color:var(--white); }
.nav-toggle svg { display:block; }

.page-hero { padding:clamp(44px,5.6vw,76px) var(--gutter); }
.page-hero h1 {
  max-width:22ch;
  text-wrap:balance;
  font-size:clamp(2.9rem,6.4vw,5.9rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.045em;
}
.page-note { max-width:54ch; margin-top:22px; color:#e4e9ff; font-size:17px; }
.page-note a { color:var(--white); font-weight:700; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,3.8vw,46px); }

.action {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 26px;
  border:1.5px solid transparent;
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background-color .14s ease, color .14s ease;
}
.action-solid { background:var(--white); color:var(--blue); }
.action-solid:hover { background:#dfe5ff; }
.action-ghost { border-color:rgba(255,255,255,.65); color:var(--white); }
.action-ghost:hover { background:rgba(255,255,255,.14); }
.action-ink { background:var(--ink); color:var(--white); }
.action-ink:hover { background:#25334f; }
.action-line { border-color:var(--ink); color:var(--ink); }
.action-line:hover { background:var(--ink); color:var(--white); }
.action-sm { min-height:46px; padding:0 20px; font-size:14.5px; }

.text-link { display:inline-block; color:var(--blue); font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.text-link:hover { color:var(--blue-deep); }

/* --- section rhythm --------------------------------------------------------- */

.band { padding:clamp(48px,5.4vw,72px) var(--gutter) clamp(52px,6vw,80px); }
.sheet { padding:clamp(52px,6vw,84px) var(--gutter); background:var(--white); }
.band > h2, .sheet > h2, .section-title { font-size:clamp(2.2rem,3.6vw,3.6rem); }
.section-lede { max-width:46ch; margin-top:18px; color:var(--muted); font-size:16px; }

/* --- pricing: four package boxes, the comparison, then care ------------------ */

.package-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.package { display:flex; flex-direction:column; padding:30px 28px 28px; background:var(--white); border-radius:var(--radius); scroll-margin-top:96px; }
.package h2 { font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.package-price { display:block; margin-top:14px; font-size:clamp(2.2rem,3.2vw,3rem); font-weight:700; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums; }
.package p { margin-top:14px; color:var(--muted); font-size:15px; }
.package .action { width:100%; margin-top:26px; }
.package p { flex-grow:1; }

.compare > h2 { margin-bottom:clamp(20px,2.6vw,32px); }
.compare-wrap { overflow-x:auto; }
.compare-table { width:100%; min-width:720px; border-collapse:separate; border-spacing:0 6px; table-layout:fixed; }
.compare-table th,.compare-table td { padding:15px 18px; text-align:left; vertical-align:middle; background:var(--white); }
.compare-table tbody th { border-radius:var(--radius) 0 0 var(--radius); }
.compare-table tbody td:last-child { border-radius:0 var(--radius) var(--radius) 0; }
.compare-table thead th { padding-top:0; padding-bottom:8px; background:transparent; font-size:15px; font-weight:700; }
.compare-table thead th.compare-feature-col { width:32%; }
.compare-table tbody th { font-size:15px; font-weight:500; }
.compare-table tbody td { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.compare-table .yes { color:var(--blue); font-weight:700; }
.compare-table .no { color:#aeb4c4; }
.compare-table .tier-label { display:none; }

.care > h2 { margin-bottom:12px; }
.care .section-lede { max-width:62ch; }
.care-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:clamp(24px,3vw,36px); }
.care-plan { display:flex; flex-direction:column; padding:30px 28px 28px; background:var(--white); border-radius:var(--radius); }
.care-plan h3 { font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.care-price { display:block; margin-top:14px; font-size:clamp(2.2rem,3.2vw,3rem); font-weight:700; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums; }
.care-price small { margin-left:4px; color:var(--muted); font-size:14px; font-weight:500; letter-spacing:0; }
.care-updates { display:block; margin-top:20px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.care-plan p { flex-grow:1; margin-top:6px; color:var(--muted); font-size:15px; }
.care-plan .action { width:100%; margin-top:26px; }
.care-note { max-width:62ch; margin-top:clamp(20px,2.4vw,28px); color:var(--muted); font-size:15px; }

/* --- about: one short statement, four promise boxes (same row as the homepage's
   steps), then the FAQ at the full measure, matching the pricing compare rows -- */

.why-text { max-width:44ch; margin-top:clamp(18px,2.2vw,26px); font-size:clamp(1.15rem,1.6vw,1.45rem); font-weight:500; letter-spacing:-.02em; line-height:1.45; text-wrap:pretty; }

.principle-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:clamp(24px,3vw,36px); }
.principle { display:flex; flex-direction:column; align-items:flex-start; padding:30px 28px 28px; background:var(--white); border-radius:var(--radius); }
.principle h3 { font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.25; text-wrap:balance; }
.principle p { flex-grow:1; margin-top:10px; color:var(--muted); font-size:15px; }
.principle .text-link { margin-top:22px; }

.faq { display:grid; gap:8px; margin-top:clamp(24px,3vw,36px); }
.faq-item { background:var(--white); border-radius:var(--radius); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; list-style:none; font-size:17.5px; font-weight:600; letter-spacing:-.02em; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--blue); font-size:26px; font-weight:400; line-height:1; transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { max-width:66ch; margin-top:-6px; padding:0 70px 24px 26px; color:var(--muted); font-size:15.5px; line-height:1.6; }
.faq-item p a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* --- styles picker ---------------------------------------------------------- */

.showroom { padding:clamp(36px,4.4vw,56px) var(--gutter) clamp(56px,6vw,84px); }
.control-bar { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:32px 40px; align-items:start; }
.control-group legend { margin-bottom:12px; font-size:14.5px; font-weight:700; }
.name-control { grid-column:1 / -1; grid-row:1; }
.structure-control { grid-column:1; grid-row:2; }
.type-control { grid-column:2; grid-row:2; }
.palette-control { grid-column:1 / -1; grid-row:3; }
.name-control input { width:100%; max-width:380px; min-height:50px; padding:0 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); }
.name-control input::placeholder { color:#8a92a6; }
.layout-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.layout-tab { display:flex; align-items:center; min-width:0; min-height:88px; padding:0 18px; border:0; border-radius:var(--radius-sm); background:var(--white); font-size:17px; font-weight:600; letter-spacing:-.025em; text-align:left; transition:background-color .14s ease, color .14s ease; }
.layout-tab:hover { background:var(--tint); }
.layout-tab.selected { background:var(--blue); color:var(--white); }
.palette-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px 12px; }
.palette-option { min-width:0; padding:0; border:0; background:transparent; text-align:left; }
.swatch { display:block; width:100%; height:44px; border-radius:4px; background:linear-gradient(90deg,var(--a) 0 62%,var(--b) 62%); }
.palette-option:hover .swatch { outline:2px solid #b9bfd2; outline-offset:3px; }
.palette-option.selected .swatch { outline:2px solid var(--ink); outline-offset:3px; }
.palette-option span { display:block; margin-top:9px; overflow:hidden; font-size:12.5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.signage{--a:#16233f;--b:#b8935a}.laundry{--a:#24483d;--b:#e8dcc2}.receipt{--a:#201d1a;--b:#d95b43}.porcelain{--a:#174c62;--b:#a9d7d5}.workwear{--a:#3c3026;--b:#d8a44a}.citrus{--a:#3e4a2f;--b:#d8e26b}.rosewood{--a:#4b2630;--b:#e6b5ad}.slate{--a:#2e4655;--b:#ed754d}.poppy{--a:#8d2634;--b:#f4a4a0}.moss{--a:#415b3f;--b:#cb7f5a}.cobalt{--a:#2546d8;--b:#f1c75b}.lilac{--a:#5a3b80;--b:#d9c6ef}.teal{--a:#005d5d;--b:#7fd5c1}.denim{--a:#2e5487;--b:#c4d9ed}.terracotta{--a:#a64f37;--b:#f0c6a1}.charcoal{--a:#272a30;--b:#b8d2bd}.electric{--a:#3b2ee8;--b:#c8ff3d}.tangerine{--a:#8c2e0b;--b:#ffb13b}.pool{--a:#005e78;--b:#67e8e1}.berry{--a:#7a174b;--b:#ff8ec4}.royal{--a:#1e3a8a;--b:#ff6b6b}.violet{--a:#5b21b6;--b:#f0abfc}.jungle{--a:#075f44;--b:#ffe047}.cherry{--a:#9f1239;--b:#ffd2dc}
.custom-palette { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:20px 28px; align-items:center; margin-top:26px; padding:18px 22px; background:var(--white); border-radius:var(--radius); }
.custom-palette.selected { box-shadow:inset 0 0 0 2px var(--ink); }
.custom-palette-copy strong { display:block; font-size:15px; font-weight:600; }
.custom-palette-copy span { display:block; margin-top:2px; color:var(--muted); font-size:13px; }
.custom-palette label { display:grid; grid-template-columns:auto 56px 74px; gap:10px; align-items:center; font-size:13.5px; font-weight:600; }
.custom-palette input[type="color"] { width:56px; height:44px; padding:0; border:0; border-radius:4px; background:transparent; }
.custom-palette input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.custom-palette input[type="color"]::-webkit-color-swatch { border:0; border-radius:4px; }
.custom-palette output { color:var(--muted); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.type-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.type-option { min-width:0; min-height:88px; padding:14px 8px 12px; border:0; border-radius:var(--radius-sm); background:var(--white); text-align:center; transition:background-color .14s ease, color .14s ease; }
.type-option:hover { background:var(--tint); }
.type-option.selected { background:var(--blue); color:var(--white); }
.type-sample { display:block; margin-bottom:8px; font-size:28px; font-style:normal; line-height:1; }
.type-sample.poppins { font-family:'Poppins',sans-serif; font-weight:600; }
.type-sample.source { font-family:'Source Sans 3',sans-serif; font-weight:600; }
.type-sample.playfair { font-family:'Playfair Display',serif; }
.type-sample.lora { font-family:'Lora',serif; font-weight:600; }
.type-option span { display:block; overflow:hidden; font-size:12.5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }

.preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; margin-top:clamp(40px,4.6vw,60px); margin-bottom:18px; }
.preview-toolbar-left { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.preview-toolbar h2 { font-size:clamp(1.6rem,2.4vw,2.2rem); }
.preview-pages { display:flex; align-items:center; gap:2px; padding:3px; border-radius:var(--radius-sm); background:#e2e5ee; }
.preview-page { min-height:38px; padding:0 15px; border:0; background:transparent; color:var(--muted); font-size:14px; font-weight:600; }
.preview-page:hover { color:var(--ink); }
.preview-page { border-radius:4px; }
.preview-page.selected { background:var(--white); color:var(--ink); }
.toolbar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.toolbar-actions .action { gap:6px; }
.preview-frame { overflow:hidden; background:var(--white); border-radius:var(--radius); box-shadow:0 22px 44px rgba(16,26,46,.22); }
.preview-frame iframe { display:block; width:100%; height:720px; border:0; background:var(--white); }

/* --- forms: contact and project intake -------------------------------------- */

.intake-form { max-width:calc(1100px + 2 * var(--gutter)); padding:clamp(36px,4.4vw,56px) var(--gutter) clamp(64px,7vw,96px); }
.intake-section { margin-bottom:22px; padding:clamp(24px,3vw,36px); background:var(--white); border-radius:var(--radius); }
.intake-section legend { float:left; width:100%; margin:0 0 24px; font-size:clamp(1.5rem,2.2vw,1.9rem); font-weight:600; letter-spacing:-.035em; line-height:1.1; }
.field-grid { clear:both; display:grid; gap:20px 24px; }
.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.full-width { grid-column:1 / -1; }
.form-field > span { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.form-field input:not([type="checkbox"]):not([type="radio"]),.form-field select,.form-field textarea { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground); }
.form-field input:not([type="checkbox"]):not([type="radio"]):hover,.form-field select:hover,.form-field textarea:hover { border-color:#b9bfd2; }
.form-field textarea { resize:vertical; min-height:120px; overflow-x:hidden; word-break:break-word; }
.form-field select { appearance:auto; }
.form-field input::placeholder,.form-field textarea::placeholder { color:#8a92a6; opacity:1; }
.form-field input[type="file"] { padding:11px 14px; font-size:14px; }
.photo-previews { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.photo-thumb { width:80px; height:80px; border-radius:var(--radius-sm); background-color:var(--ground); background-position:center; background-size:cover; }
.hours-grid { display:grid; gap:8px; margin-top:8px; }
.hours-row { display:grid; grid-template-columns:104px 1fr auto 1fr 96px; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-sm); background:var(--ground); }
#hours-grid input[type="time"] { min-height:40px; padding:8px 10px; border:1px solid var(--rule); border-radius:4px; background:var(--white); font-size:14px; text-align:center; }
#hours-grid input[type="time"]:hover { border-color:#b9bfd2; }
#hours-grid input[type="time"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.55; }
#hours-grid input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity:.9; }
.hours-day { font-size:14px; font-weight:600; }
.hours-to { color:var(--muted); font-size:13px; text-align:center; }
.hours-closed { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }
.hours-closed input { width:16px; height:16px; margin:0; }
.hours-row:has(.hours-closed input:checked) input[type="time"] { opacity:.4; pointer-events:none; }
.social-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 20px; margin-top:8px; }
.social-fields .form-field > span { color:var(--muted); font-size:13px; font-weight:500; }
.checkbox-field { clear:both; display:flex; align-items:start; gap:12px; }
.checkbox-field input { width:18px; height:18px; margin:3px 0 0; }
.checkbox-field span { margin:0; font-size:15px; font-weight:500; }
.color-picker { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:18px 12px; margin-top:8px; }
.color-option { position:relative; min-width:0; }
.color-option input[type="radio"] { position:absolute; width:1px; height:1px; opacity:0; }
.color-option .swatch { height:40px; font-style:normal; }
.color-option:hover .swatch { outline:2px solid #b9bfd2; outline-offset:3px; }
.color-option input:checked + .swatch { outline:2px solid var(--ink); outline-offset:3px; }
.color-option input:focus-visible + .swatch { outline:3px solid var(--ink); outline-offset:3px; }
.color-option span { display:block; margin:9px 0 0; overflow:hidden; font-size:12.5px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.custom-swatch { position:relative; background:conic-gradient(from 180deg,#2546d8,#c8ff3d,#ed754d,#2546d8); }
.custom-swatch::after { content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.4); }
#custom-color-fields[hidden] { display:none; }
.intake-section .custom-palette { margin-top:18px; background:var(--ground); }
.intake-section .action { margin-top:22px; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:8px; }
.clear-button { padding:0; border:0; background:transparent; color:var(--muted); font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.clear-button:hover { color:var(--ink); }
.form-success { margin-top:22px; padding:20px 22px; background:#dfe5ff; border-radius:var(--radius); }
.form-success strong { display:block; font-size:16px; }

/* --- close ----------------------------------------------------------------- */

.close {
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:32px 56px;
  padding:clamp(56px,6.5vw,88px) var(--gutter);
  background:var(--blue); color:var(--white);
}
.close h2 { max-width:16ch; font-size:clamp(2.2rem,4.4vw,4.2rem); font-weight:700; }
.close-actions { display:flex; flex-wrap:wrap; gap:14px; }

/* --- footer ---------------------------------------------------------------- */

.site-footer { padding:52px var(--gutter) 28px; background:var(--ink); color:#fff; }
.footer-top { display:flex; flex-wrap:wrap; gap:40px 96px; padding-bottom:36px; }
.footer-links { display:flex; flex-wrap:wrap; gap:56px; }
.footer-col { display:flex; flex-direction:column; gap:11px; }
.footer-col span { color:#8b96ad; font-size:13px; font-weight:700; }
.footer-col a { color:#d3d8e4; font-size:15px; text-decoration:none; }
.footer-col a:hover { color:#fff; }
.footer-bottom { padding-top:24px; border-top:1px solid rgba(255,255,255,.14); color:#8b96ad; font-size:13px; }

/* --- reveal on scroll ------------------------------------------------------
   html.motion is set by an inline <head> snippet (IntersectionObserver only);
   reveal.js adds .is-in (and any sibling stagger) as each one scrolls into view.
   The whole block sits inside the no-preference query, so reduced-motion users
   get the page exactly as it was, nothing hidden and nothing moving. --------- */

@media (prefers-reduced-motion:no-preference) {
  html.motion :is(.reveal, .reveal-group > *) {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .6s ease-out, transform .6s cubic-bezier(.22,.61,.36,1);
  }
  html.motion :is(.reveal, .reveal-group > *).is-in { opacity:1; transform:none; }
}

/* --- responsive ------------------------------------------------------------ */

@media (max-width:1080px) {
  .package-grid, .principle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .control-bar { grid-template-columns:1fr 1fr; }
  .palette-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .layout-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .type-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .layout-tab,.type-option { min-height:76px; }
  .preview-frame iframe { height:640px; }
}

@media (max-width:760px) {
  .site-header { padding:14px 18px; }
  .nav-toggle { display:flex; }
  .site-header nav {
    position:absolute; top:calc(100% + 6px); right:18px; z-index:20;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    min-width:214px; max-width:calc(100vw - 36px);
    padding:6px 16px 14px;
    background:var(--white);
    box-shadow:0 18px 34px rgba(16,26,46,.24);
  }
  .site-header nav.nav-open { display:flex; }
  .site-header nav a { padding:13px 2px; border-bottom:1px solid #e6e8ef; color:#3d4759; font-size:16px; }
  .site-header nav a:hover { color:var(--ink); }
  .site-header nav a[aria-current="page"] { color:var(--ink); text-decoration:none; font-weight:700; }
  .site-header nav a.nav-button { margin-top:10px; padding:13px 15px; border-bottom:0; background:var(--blue); color:var(--white); text-align:center; }
  .site-header nav :focus-visible { outline-color:var(--ink); }

  :root { --gutter:18px; }
  .page-hero { padding:40px 18px 42px; }
  .page-hero h1 { max-width:none; font-size:clamp(2.5rem,10.5vw,3.7rem); }
  .page-note { margin-top:18px; font-size:16px; }
  .hero-actions { width:100%; }
  .action { width:100%; min-height:52px; }

  .band { padding:44px 18px 48px; }
  .sheet { padding:48px 18px; }

  .package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .package { padding:20px 16px 18px; }
  .package h2 { font-size:16px; }
  .package-price { margin-top:10px; font-size:1.9rem; }
  .package p { margin-top:10px; font-size:13px; }
  .package .action { margin-top:18px; min-height:42px; padding:0 10px; font-size:13px; }

  .compare-wrap { overflow-x:visible; }
  .compare-table { min-width:0; border-spacing:0; }
  .compare-table thead { display:none; }
  .compare-table,.compare-table tbody,.compare-table tr { display:block; width:100%; }
  .compare-table tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; margin-bottom:8px; padding:16px 18px 14px; background:var(--white); border-radius:var(--radius); }
  .compare-table tbody th,.compare-table tbody td { border-radius:0; }
  .compare-table tbody th { grid-column:1 / -1; padding:0 0 8px; font-size:15px; font-weight:600; }
  .compare-table tbody td { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:15px; }
  .compare-table .tier-label { display:block; color:var(--muted); font-size:13.5px; font-weight:500; }

  .care-grid { grid-template-columns:1fr; gap:10px; }
  .care-plan { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:18px 18px 16px; }
  .care-plan h3 { grid-column:1; grid-row:1; font-size:16px; }
  .care-plan .care-price { grid-column:2; grid-row:1 / span 2; margin-top:0; font-size:1.7rem; }
  .care-updates { grid-column:1; grid-row:2; margin-top:0; font-size:15px; }
  .care-plan p { grid-column:1 / -1; grid-row:3; margin-top:6px; font-size:13.5px; }
  .care-plan .action { grid-column:1 / -1; grid-row:4; margin-top:14px; min-height:44px; font-size:14px; }
  .care-note { margin-top:18px; font-size:14px; }

  .why-text { font-size:1.1rem; }
  .principle-grid { grid-template-columns:1fr; gap:10px; }
  .principle { padding:24px 20px 22px; }
  .principle h3 { font-size:17px; }
  .principle p { font-size:14.5px; }
  .principle .text-link { margin-top:16px; }
  .faq { gap:6px; }
  .faq-item summary { padding:18px 18px; font-size:16px; gap:14px; }
  .faq-item p { padding:0 44px 20px 18px; }

  .showroom { padding:28px 18px 56px; }
  .control-bar { display:block; }
  .control-group { margin-bottom:28px; }
  .control-group:last-child { margin-bottom:0; }
  .layout-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .layout-tab { min-height:60px; font-size:16px; }
  .palette-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 10px; }
  .swatch { height:40px; }
  .custom-palette { grid-template-columns:1fr 1fr; gap:16px; padding:16px 18px; }
  .custom-palette-copy { grid-column:1 / -1; }
  .custom-palette label { grid-template-columns:1fr 48px; }
  .custom-palette input[type="color"] { width:48px; }
  .custom-palette output { grid-column:1 / -1; }
  .type-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .type-option { min-height:80px; }
  .preview-toolbar { margin-top:36px; }
  .preview-toolbar-left { width:100%; }
  .preview-pages { width:100%; overflow-x:auto; }
  .preview-page { flex:1 0 auto; }
  .toolbar-actions { width:100%; }
  .toolbar-actions .action { flex:1 1 auto; width:auto; }
  .preview-frame iframe { height:560px; }

  .intake-form { padding:24px 0 56px; }
  .intake-section { margin-bottom:12px; padding:26px 18px 28px; border-radius:0; }
  .intake-section legend { margin-bottom:20px; font-size:1.45rem; }
  .field-grid { gap:16px; }
  .two-columns { grid-template-columns:1fr; }
  .full-width { grid-column:auto; }
  .hours-row { grid-template-columns:auto 1fr; grid-template-areas:"day closed" "open open" "to close"; gap:8px 10px; padding:10px 12px; }
  .hours-day { grid-area:day; }
  .hours-closed { grid-area:closed; justify-self:end; }
  .hours-row input[type="time"]:first-of-type { grid-area:open; width:100%; min-width:0; }
  .hours-to { grid-area:to; text-align:left; }
  .hours-row input[type="time"]:last-of-type { grid-area:close; width:100%; min-width:0; }
  .social-fields { grid-template-columns:1fr 1fr; }
  .color-picker { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .intake-section .action { width:auto; }
  .form-actions { padding:0 18px; }
  .form-actions .action { flex:1 1 200px; width:auto; }
  .form-success { margin:18px 18px 0; }

  .close { padding:48px 18px; }
  .close-actions { width:100%; }
  .site-footer { padding:40px 18px 24px; }
  .footer-top { gap:30px; }
  .footer-links { gap:34px; }
}

@media (max-width:760px) {
  html:not(.js) .site-header { flex-wrap:wrap; }
  html:not(.js) .site-header nav { position:static; display:flex; width:100%; max-width:none; margin-top:14px; box-shadow:none; background:transparent; padding:0; }
  html:not(.js) .site-header nav a { color:#e4e9ff; border-bottom-color:rgba(255,255,255,.18); }
  html:not(.js) .nav-toggle { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .action,.layout-tab,.type-option,.faq-item summary::after { transition:none; }
}