/* ========================================================================== 
   BLINDS LINEN — shared tokens and components
   Extracted from budgetblinds.com, captured 2026-08-24.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

:root {
  --ink: #292929;
  --ink-soft: #3a3a3a;
  --ink-mute: #4c6370;
  --paper: #ffffff;
  --wash: #ebf2f3;
  --wash-cool: #d9e1e5;
  --wash-warm: #f2f0f1;
  --wash-gray: #e5e2e2;
  --cta: #76c8df;
  --slate: #425866;
  --slate-mid: #4a7d92;
  --slate-gray: #597182;
  --slate-band: #5d7889;
  --overlay: rgba(104, 136, 152, .85);
  --teal-deep: #37626b;
  --teal-sage: #3d7d8b;
  --accent-blue: #6397ad;
  --sage: #70917e;
  --cream: #f2e3b0;
  --sage-soft: #97b7af;
  --link-hover: #3f5a6b;
  --border: #d8e0e3;
  --border-dark: #aebcc2;
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Nunito Sans', Arial, sans-serif;
  --container: 1180px;
  --container-narrow: 860px;
  --gutter: 32px;
  --section: 84px;
  --shadow: 0 12px 34px rgba(41, 41, 41, .13);
  --shadow-soft: 0 5px 20px rgba(41, 41, 41, .09);
  --radius-leaf: 160px 0 160px 0;
  --radius-arch: 50% 50% 0 0;
  --ease: cubic-bezier(.2, .65, .25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--ink-mute); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.container { width: min(100%, var(--container)); margin: 0 auto; padding-inline: var(--gutter); }
.container.narrow { width: min(100%, var(--container-narrow)); }
.section { padding: var(--section) 0; background: var(--paper); }
.section.tight { padding: 54px 0; }
.section.wash { background: var(--wash); }
.section.cool { background: var(--wash-cool); }
.section.warm { background: var(--wash-warm); }
.section.slate { background: var(--slate-band); color: var(--paper); }
.section.slate h1, .section.slate h2, .section.slate h3, .section.slate h4 { color: var(--paper); }
.section.slate p { color: rgba(255,255,255,.9); }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.text-center { text-align: center; }
.muted { color: var(--ink-mute); }
.kit-note { color: var(--ink-mute); }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
}
h1, .h1 { font-size: clamp(2.45rem, 4.8vw, 4.5rem); }
h2, .h2 { font-size: clamp(2rem, 3.2vw, 3.25rem); }
h3, .h3 { font-size: clamp(1.35rem, 1.8vw, 1.9rem); }
h4, .h4 { font-size: 1.18rem; }
.lede { max-width: 66ch; margin: 0; color: var(--ink-soft); font-size: clamp(1.03rem, .5vw + .95rem, 1.2rem); }
.display { font-size: clamp(2.7rem, 5.7vw, 5.3rem); }
.caps-heading {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1.03;
  text-transform: uppercase;
  text-shadow: 0 0 6px #707070;
}

/* buttons and links */
.btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 29px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: .91rem;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s linear, background .2s linear, border-color .2s linear, padding .2s linear;
}
.btn-primary { background: var(--cta); color: var(--ink); }
.btn-primary:hover { border-color: var(--cta); background: transparent; }
.btn-slate { background: var(--slate); color: var(--paper); }
.btn-slate:hover { border-color: var(--slate); background: transparent; color: var(--slate); }
.btn-outline { border-color: var(--paper); background: transparent; color: var(--paper); }
.btn-outline:hover { background: var(--paper); color: var(--slate); }
.btn-rounded { border: 3px solid var(--sage); border-radius: 24px; background: var(--paper); color: var(--ink); text-transform: none; }
.btn-rounded:hover { background: var(--sage); color: var(--paper); }
.btn-effect::after { content: '→'; transition: transform .2s linear; }
.btn-effect:hover::after { transform: translateX(7px); }
.link-arrow { display: inline-block; padding-bottom: 3px; color: var(--ink-mute); font-size: .83rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.link-arrow::after { content: ' →'; }
.link-arrow:hover { color: var(--link-hover); box-shadow: inset 0 -2px var(--link-hover); }

/* source site header */
.utility-header { border-bottom: 1px solid #eef1f2; background: var(--paper); font-size: .76rem; }
.utility-header .container { display: flex; min-height: 34px; align-items: center; gap: 18px; }
.utility-link { padding: 6px 11px; background: var(--slate); color: var(--paper); text-decoration: none; text-transform: uppercase; }
.utility-spacer { flex: 1; }
.utility-control { border: 0; background: none; color: var(--ink); }
.brand-row { background: var(--paper); }
.brand-row .container { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 70px; align-items: center; gap: 24px; }
.brand-row .brand-logo { width: 156px; }
.brand-row .local-contact { justify-self: end; text-align: right; }
.brand-row .local-contact strong { display: block; font-size: .98rem; }
.brand-row .local-contact a { color: var(--ink); font-weight: 700; text-decoration: none; }
.primary-nav { position: relative; z-index: 40; border-bottom: 1px solid #eef1f2; background: var(--paper); }
.primary-nav .container { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: clamp(14px, 2.3vw, 33px); }
.primary-nav a { color: var(--ink); font-size: .77rem; font-weight: 700; text-decoration: none; text-transform: uppercase; }
.primary-nav .nav-cta { padding: 8px 12px; background: var(--accent-blue); color: var(--paper); }
.nav-toggle { display: none; border: 1px solid var(--border); background: var(--paper); color: var(--ink); }
.nav-mobile-panel { display: contents; }

/* hero family */
.hero-full { position: relative; min-height: 640px; overflow: hidden; background: var(--slate); }
.hero-full .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); animation: kenburns 30s ease-in-out alternate infinite; }
.hero-full::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(41,41,41,.58), rgba(41,41,41,.12)); }
.hero-full .hero-content { position: relative; z-index: 2; display: flex; min-height: 640px; align-items: center; }
.hero-full h1 { max-width: 16ch; color: var(--paper); }
.hero-full .lede { color: var(--paper); }
.generic-hero { position: relative; min-height: 520px; overflow: hidden; background: var(--slate); }
.generic-hero .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.generic-hero::after { content: ''; position: absolute; inset: 0; background: var(--overlay); }
.generic-hero .hero-card { position: relative; z-index: 2; width: min(560px, calc(100% - 64px)); margin: 0 auto; transform: translateY(290px); padding: 32px 38px; border-radius: 30px 0; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.text-banner { padding: 64px 0; background: var(--wash); text-align: center; }
.breadcrumb-hero { display: grid; grid-template-columns: 1fr 1.4fr; min-height: 350px; background: var(--wash); }
.breadcrumb-hero .copy { display: flex; flex-direction: column; justify-content: center; padding: 50px max(32px, calc((100vw - var(--container)) / 2)); padding-right: 42px; }
.breadcrumb-hero .media img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 17px 0; color: var(--ink-mute); font-size: .77rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs span:not(:last-child)::after { content: '/'; margin-left: 8px; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.1); } }

/* hero-welded consultation form */
.consultation-wrap { position: relative; z-index: 8; margin-top: -214px; padding-bottom: 74px; }
.consultation-panel { position: relative; width: min(760px, 100%); margin: 0 auto; padding: 34px 48px 40px; border-top: 22px solid var(--slate-mid); background: var(--wash); box-shadow: var(--shadow); text-align: center; }
.consultation-panel .pointer { position: absolute; top: -48px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 24px solid transparent; border-bottom: 26px solid var(--slate-mid); border-left: 24px solid transparent; }
.step-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; }
.field { min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-width: 150px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-dark); background: var(--paper); color: var(--ink); }
.field textarea { min-height: 110px; resize: vertical; }
.disclaimer { color: var(--ink-soft); font-size: .72rem; }

/* content patterns */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.image-card { background: var(--paper); }
.image-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.image-card .body { padding: 20px 8px 4px; }
.image-card p { color: var(--ink-soft); }
.product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.product-card h3 { margin-top: 18px; color: var(--slate-mid); text-align: center; }
.product-card p { font-size: .9rem; }
.leaf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(34px, 6vw, 78px); }
.leaf-split .media { overflow: hidden; border-radius: var(--radius-leaf); background: var(--wash-cool); }
.leaf-split .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.leaf-split.flip .media { order: 2; }
.leaf-split.arch .media { border-radius: var(--radius-arch); }
.content-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 54px; align-items: start; }
.content-split > * { min-width: 0; }
.content-split p:first-child { margin-top: 0; }
.read-more { position: relative; max-height: 230px; overflow: hidden; padding-bottom: 50px; background: var(--paper); }
.read-more::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 80px; background: linear-gradient(transparent, var(--paper) 68%); }
.wash .read-more { background: var(--wash); }
.wash .read-more::after { background: linear-gradient(transparent, var(--wash) 68%); }
.icon-rail, .card-rail, .photo-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(330px, 82vw); gap: 22px; overflow-x: auto; padding: 4px 4px 18px; scroll-snap-type: x mandatory; }
.icon-rail > *, .card-rail > *, .photo-rail > * { min-width: 0; scroll-snap-align: start; }
.icon-card { padding: 28px; border: 1px solid var(--border); background: var(--paper); text-align: center; }
.icon-card .icon { width: 64px; height: 64px; margin: 0 auto 18px; border: 2px solid var(--slate-mid); border-radius: 50%; color: var(--slate-mid); font-size: 1.9rem; line-height: 60px; }
.quote-card { padding: 28px; border: 1px solid var(--border); background: var(--paper); box-shadow: var(--shadow-soft); }
.stars { color: #e79a29; letter-spacing: .12em; }
.stars::before { content: '★★★★★'; }
.quote-card blockquote { margin: 14px 0; font-size: 1rem; }
.quote-card cite { color: var(--ink-mute); font-size: .82rem; font-style: normal; }
.testimonial-feature { display: grid; grid-template-columns: .75fr 1.25fr; gap: 46px; align-items: center; }
.testimonial-feature .media { overflow: hidden; border-radius: 60px 0; }
.testimonial-feature blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 3rem); line-height: 1.15; }
.testimonial-feature cite { display: block; margin-top: 18px; font-size: .82rem; font-style: normal; text-transform: uppercase; }
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; min-width: 680px; border-collapse: collapse; background: rgba(255,255,255,.6); }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid var(--paper); text-align: center; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table th.featured { background: var(--sage-soft); }
.compare-table td.featured { background: var(--paper); box-shadow: 0 0 10px rgba(41,41,41,.12); color: var(--teal-sage); font-weight: 800; }
.accordion { display: grid; gap: 5px; }
.accordion details { background: var(--wash-gray); }
.accordion summary { position: relative; padding: 16px 54px 16px 22px; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '⌄'; position: absolute; right: 22px; color: var(--ink-mute); }
.accordion details[open] summary::after { transform: rotate(180deg); }
.accordion details p { margin: 0; padding: 0 22px 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.gallery-grid > * { min-width: 0; }
.gallery-grid img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.gallery-grid .wide { grid-column: span 7; }
.gallery-grid .narrow { grid-column: span 5; }
.gallery-grid .third { grid-column: span 4; }
.gallery-grid .leaf { border-radius: 90px 0; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; text-align: center; }
.stats > * { min-width: 0; }
.stats strong { display: block; color: var(--sage); font-size: clamp(2rem, 4vw, 4rem); font-weight: 300; }
.team-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 60px 0; }
.offer-callout { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; padding: 44px; background: var(--slate-band); color: var(--paper); }
.offer-callout h2, .offer-callout h3 { color: var(--paper); }
.offer-callout p { color: var(--paper); }
.article-card { display: grid; grid-template-columns: 140px 1fr; gap: 20px; color: inherit; text-decoration: none; }
.article-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-card p { margin: 0; }
.category-filter { display: flex; flex-wrap: wrap; gap: 9px; }
.category-filter button { padding: 9px 15px; border: 1px solid var(--border-dark); background: var(--paper); }
.category-filter button.active { background: var(--slate-mid); color: var(--paper); }
.blog-article { max-width: 760px; margin: 0 auto; }
.blog-article .hero-image { width: 100%; margin: 28px 0; }
.legal-copy { max-width: 900px; margin: 0 auto; }
.location-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.location-picker select { width: 100%; min-width: 150px; padding: 13px; border: 1px solid var(--border-dark); }

/* local footer and site footer */
.local-band { background: #454545; color: var(--paper); padding: 42px 0; }
.local-band h2, .local-band h3, .local-band h4 { color: var(--paper); }
.local-band .local-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 34px; }
.local-band p, .local-band a { color: rgba(255,255,255,.82); }
.newsletter { padding: 30px 0; background: var(--wash-cool); }
.newsletter .container { display: grid; grid-template-columns: 1.35fr .65fr; gap: 36px; align-items: center; }
.newsletter-form { display: grid; grid-template-columns: 1fr 140px 140px; gap: 8px; }
.newsletter input { min-width: 150px; padding: 10px; border: 1px solid var(--border-dark); }
.site-footer { padding: 58px 0 30px; background: var(--paper); }
.site-footer .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.site-footer h3 { font-family: var(--font-body); font-size: .84rem; font-weight: 700; text-transform: uppercase; }
.site-footer a { display: block; padding: 4px 0; color: var(--ink-soft); font-size: .76rem; text-decoration: none; }
.site-footer .legal { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--ink-mute); font-size: .72rem; text-align: center; }

/* documentation chrome */
.ds-nav { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 13px var(--gutter); background: var(--slate); }
.ds-nav .lockup-text { margin: 0; color: var(--paper); font-family: var(--font-display); font-size: 1.03rem; }
.ds-nav .lockup-text small { display: block; color: var(--cta); font-family: var(--font-body); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.ds-nav .tab { padding: 7px 12px; color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 700; text-decoration: none; }
.ds-nav .tab:hover, .ds-nav .tab.active { background: var(--cta); color: var(--ink); }
.ds-hero { padding: 74px 0 54px; background: var(--wash); }
.ds-section { padding: 62px 0; border-top: 1px solid var(--border); }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 20px; }
.doc-card { min-width: 0; padding: 25px; border: 1px solid var(--border); background: var(--paper); color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); }
.doc-card p { margin-bottom: 0; color: var(--ink-mute); }
.file-list { display: grid; gap: 9px; }
.file-row { display: grid; grid-template-columns: minmax(190px, .7fr) 1.3fr; gap: 22px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.file-row code { color: var(--slate-mid); font-weight: 700; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr)); gap: 16px; }
.swatch { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: var(--paper); }
.swatch-color { height: 82px; }
.swatch-meta { padding: 11px 13px; font-size: .76rem; }
.swatch-meta strong { display: block; }
.type-row { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: baseline; padding: 23px 0; border-bottom: 1px solid var(--border); }
.type-spec { color: var(--ink-mute); font-size: .78rem; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.asset-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: var(--paper); }
.asset-card .thumb { display: flex; aspect-ratio: 16 / 10; align-items: center; justify-content: center; overflow: hidden; background: var(--wash); }
.asset-card .thumb.dark { background: var(--slate); }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-card .thumb img.contain { width: 72%; height: 72%; object-fit: contain; }
.asset-card .meta { padding: 12px 14px; color: var(--ink-mute); font-size: .72rem; }
.asset-card .meta strong { display: block; color: var(--ink); }

/* section catalog */
.sx-header { padding: 72px 0 52px; background: var(--wash); }
.sx-header .meta { display: flex; flex-wrap: wrap; gap: 16px 44px; margin-top: 27px; }
.sx-header .meta div { color: var(--ink-mute); font-size: .79rem; }
.sx-header .meta strong { display: block; color: var(--ink); font-size: .98rem; }
.sx-index { border-bottom: 1px solid var(--border); background: var(--paper); }
.sx-index .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 4px; width: min(100%, var(--container)); margin: 0 auto; padding: 22px var(--gutter); }
.sx-index a { display: flex; min-width: 0; justify-content: space-between; gap: 10px; padding: 7px 9px; color: var(--ink-mute); font-size: .76rem; text-decoration: none; }
.sx-index a:hover { background: var(--wash); }
.sx-index .num { color: var(--slate-mid); font-weight: 800; }
.sx-pattern { border-bottom: 1px solid var(--border); }
.pattern-meta { display: flex; width: min(100%, var(--container)); margin: 0 auto; align-items: baseline; gap: 28px; padding: 38px var(--gutter) 18px; }
.pattern-meta .id { display: flex; align-items: center; gap: 9px; color: var(--ink-mute); font-size: .76rem; white-space: nowrap; }
.pattern-meta .num { color: var(--slate-mid); font-weight: 800; }
.pattern-meta .signature { padding: 3px 7px; background: var(--slate); color: var(--paper); font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
.pattern-meta .name { margin: 0; }
.pattern-meta .purpose { margin: 3px 0 0; color: var(--ink-mute); font-size: .86rem; }
.sx-demo { position: relative; border-top: 1px dashed var(--border-dark); }
.demo-label { position: absolute; top: 0; right: var(--gutter); z-index: 12; transform: translateY(-50%); padding: 3px 10px; border: 1px solid var(--border-dark); background: var(--paper); color: var(--ink-mute); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* page gallery */
.pages-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.page-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: var(--paper); color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); }
.page-card .preview { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash); }
.page-card .preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.page-card .preview::after { content: ''; position: absolute; inset: 0; }
.page-card .body { padding: 20px 24px 24px; }
.page-card .body p { color: var(--ink-mute); }
.page-cta { color: var(--slate-mid); font-weight: 800; text-transform: uppercase; }

@media (max-width: 960px) {
  .primary-nav .container { justify-content: space-between; }
  .nav-toggle { display: inline-flex; padding: 9px 12px; }
  .nav-mobile-panel { display: none; }
  .primary-nav.is-open .nav-mobile-panel { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 0; padding: 12px var(--gutter) 20px; background: var(--paper); box-shadow: var(--shadow); }
  .primary-nav.is-open .nav-mobile-panel a { padding: 12px; border-bottom: 1px solid var(--border); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
  .breadcrumb-hero, .leaf-split, .leaf-split.flip, .content-split, .testimonial-feature, .location-picker { grid-template-columns: 1fr; }
  .leaf-split.flip .media { order: 0; }
  .local-band .local-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --gutter: 22px; --section: 64px; }
  .brand-row .container { grid-template-columns: auto 1fr; }
  .brand-row .brand-logo { width: 128px; }
  .brand-row .local-contact { display: none; }
  .primary-nav .nav-actions { display: none; }
  .hero-full, .hero-full .hero-content { min-height: 540px; }
  .consultation-wrap { margin-top: -130px; }
  .consultation-panel { padding: 30px 22px 34px; }
  .grid-2, .pages-gallery { grid-template-columns: 1fr; }
  .newsletter .container { grid-template-columns: 1fr; }
  .newsletter-form { grid-template-columns: 1fr; }
  .offer-callout { grid-template-columns: 1fr; padding: 32px 24px; }
  .stats { grid-template-columns: 1fr; }
  .gallery-grid .wide, .gallery-grid .narrow, .gallery-grid .third { grid-column: span 12; }
  .ds-nav { align-items: flex-start; }
  .ds-nav .tabs { justify-content: flex-end; }
  .file-row, .type-row { grid-template-columns: 1fr; gap: 5px; }
}

@media (max-width: 600px) {
  .utility-header .language, .utility-header .find-location { display: none; }
  .brand-row .container { min-height: 60px; }
  .hero-full, .hero-full .hero-content { min-height: 500px; }
  .generic-hero .hero-card { width: calc(100% - 36px); transform: translateY(250px); padding: 25px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .field input, .field select, .field textarea { min-width: 0; }
  .grid-4 { grid-template-columns: 1fr; }
  .local-band .local-grid, .site-footer .footer-cols { grid-template-columns: 1fr; }
  .article-card { grid-template-columns: 100px 1fr; }
  .pattern-meta { flex-direction: column; gap: 10px; }
  .pattern-meta > div { min-width: 0; }
  .pattern-meta .name, .pattern-meta .purpose { overflow-wrap: anywhere; }
  body .sx-pattern, body .sx-demo { padding-right: 0; padding-left: 0; }
}

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