:root {
  --forest: #1c3a27;
  --forest-deep: #102b1c;
  --forest-light: #294c35;
  --oak: #bf8d5b;
  --oak-text: #c79766;
  --chalk: #f5f1ea;
  --ink: #18251c;
  --muted: #515a50;
  --rule: #d6c8b5;
  --sand: #eae1d3;
  --white: #ffffff;
  --transparent: transparent;
  --shadow: rgb(8 24 15 / 22%);
  --overlay: rgb(10 20 12 / 35%);
  --hero-shade: rgb(10 20 12 / 60%);
  --text-shadow: rgb(0 0 0 / 55%);
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: clamp(1rem, 1.4vw, 1.25rem);
  --text-lg: clamp(1.125rem, 1.8vw, 1.5rem);
  --text-xl: clamp(1.45rem, 2.5vw, 2rem);
  --text-h3: clamp(1.55rem, 2.65vw, 2.4rem);
  --text-h2: clamp(2.2rem, 4.5vw, 4rem);
  --text-h1: clamp(2.6rem, 5.65vw, 5rem);
  --text-number: clamp(1.6rem, 3vw, 2.65rem);
  --text-display: clamp(2.8rem, 6.7vw, 6rem);
  --text-feature: clamp(2rem, 3.4vw, 3rem);
  --text-service: clamp(1.125rem, 2.1vw, 1.85rem);
  --text-home-number: clamp(1.6rem, 3.7vw, 3.25rem);
  --content: 1240px;
  --space-section: clamp(2.75rem, 5vw, 4.5rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--chalk); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
body, button, a { -webkit-tap-highlight-color: var(--transparent); }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
button, summary { cursor: pointer; }
a, button, summary { transition: background-color 180ms, color 180ms, border-color 180ms; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--forest); outline-offset: 5px; }
.site-header :focus-visible, .site-footer :focus-visible, .services-band :focus-visible, .closing :focus-visible, .service-wide :focus-visible, .stairs-copy :focus-visible { outline-color: var(--chalk); }
button { font: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.3rem; }
li + li { margin-top: .4rem; }
.wrap { width: min(calc(100% - 2.5rem), var(--content)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.eyebrow { display: block; margin: 0 0 1.25rem; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.body-large { font-size: var(--text-md); line-height: 1.45; }
.muted { color: var(--muted); }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 20; padding: .75rem 1rem; background: var(--chalk); color: var(--forest); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1.5rem; min-height: 48px; padding: .75rem 1.5rem; border: 1px solid var(--forest); background: var(--forest); color: var(--chalk); font-size: var(--text-base); font-weight: 600; text-decoration: none; line-height: 1.3; }
.button:hover { background: var(--forest-light); }
.button.light { background: var(--chalk); color: var(--ink); border: 1px solid var(--oak); box-shadow: inset 0 0 0 3px var(--chalk), inset 0 0 0 4px var(--rule); }
.button.light:hover { background: var(--sand); }
.button.outline { background: var(--transparent); border-color: var(--oak); color: var(--chalk); }
.button.outline:hover { background: var(--forest-light); }
.arrow { font-size: var(--text-lg); line-height: 1; }
.site-header { position: relative; z-index: 5; padding: 1rem 1.25rem; color: var(--chalk); background: var(--forest); box-shadow: inset 0 0 0 5px var(--forest), inset 0 0 0 6px var(--forest-light), inset 0 0 0 10px var(--forest), inset 0 0 0 11px var(--forest-light); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { flex: 0 0 auto; display: block; }
.brand, .footer-logo { position: relative; }
.brand::after, .footer-logo::after { content: ''; position: absolute; left: 6.9%; top: 14%; width: 21.2%; aspect-ratio: 1; background: var(--forest) url('/images/logo-mark.svg') center / cover no-repeat; pointer-events: none; }
.brand img { width: 190px; height: auto; }
.menu-toggle { display: none; background: var(--transparent); color: var(--chalk); border: 1px solid var(--oak); min-height: 44px; padding: .5rem .75rem; }
.js .menu-toggle { display: inline-flex; gap: .65rem; align-items: center; }
.menu-icon { font-size: var(--text-lg); }
.header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .25rem; padding-top: 1rem; }
.header-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .8rem; text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.header-nav a:hover { color: var(--oak-text); }
.header-nav .button { padding-inline: 1rem; color: var(--ink); }
.header-nav .header-call { text-decoration: none; }
.js .header-nav { display: none; }
.js .header-nav.is-open { display: flex; }
.home-hero { position: relative; isolation: isolate; min-height: 760px; display: flex; flex-direction: column; color: var(--chalk); }
.hero-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.home-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, var(--overlay), var(--hero-shade) 45%, var(--overlay)); }
.home-header { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); width: min(calc(100% - 2rem), 1216px); }
.hero-copy { width: min(calc(100% - 2.5rem), 950px); margin: auto; padding: 4rem 0 6rem; text-align: center; }
.hero-copy h1 { margin-bottom: 1.25rem; }
.hero-copy .eyebrow { font-size: var(--text-sm); font-family: var(--font-body); letter-spacing: .12em; }
.hero-copy h1, .hero-copy p { text-shadow: 0 2px 12px var(--text-shadow); }
.hero-copy p { max-width: 650px; margin: 0 auto 1.65rem; font-size: var(--text-md); text-wrap: pretty; }
.hero-copy h1 span { display: block; }
.hero-caption { position: absolute; right: 1.5rem; bottom: 1rem; background: var(--hero-shade); padding: .3rem .6rem; font-size: var(--text-xs); }
.approach { display: grid; gap: 2rem; align-items: center; }
.approach-copy h2 { margin-bottom: 1.5rem; }
.approach-copy p { max-width: 440px; }
.photo-caption { padding-top: .5rem; font-size: var(--text-xs); color: var(--muted); }
.photo-caption.on-dark { color: var(--chalk); }
.approach-photo img { width: 100%; aspect-ratio: 1.08; object-fit: cover; }
.side-note { font-size: var(--text-sm); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; border-left: 1px solid var(--oak); padding-left: 1.5rem; color: var(--muted); }
.services-band { background: var(--forest); color: var(--chalk); }
.services-layout { display: grid; gap: 2.5rem; }
.services-heading { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; margin-bottom: 1rem; }
.service-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.service-list li { margin: 0; border-bottom: 1px solid var(--oak); }
.service-list li:last-child { border-bottom: 0; }
.service-list a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .75rem; min-height: 62px; text-decoration: none; font-size: var(--text-lg); line-height: 1.25; padding-block: .65rem; }
.service-list a:hover { background: var(--forest-light); }
.service-number { color: var(--oak-text); font-family: var(--font-heading); font-size: var(--text-number); }
.service-arrow { color: var(--oak-text); }
.service-aside { border-top: 1px solid var(--oak); padding-top: 2rem; }
.service-aside h3 { margin: 2rem 0; font-size: var(--text-h3); }
.short-rule { display: block; width: 72px; height: 1px; background: var(--oak); margin: 1.75rem 0; }
.moulded { position: relative; border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: -8px; padding: 1.5rem; }
.moulded::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--rule); pointer-events: none; clip-path: polygon(0 16px,16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px)); }
.feature-band { margin-block: 1.5rem; }
.feature-layout { display: grid; gap: 1.5rem; align-items: center; }
.feature-photo img { width: 100%; height: 250px; object-fit: cover; }
.feature-copy h2 { font-size: var(--text-h3); margin-bottom: 1rem; }
.feature-copy p { margin: 0; }
.feature-detail { display: none; }
.ideas-layout { display: grid; gap: 2rem; }
.ideas-grid { display: grid; gap: 1.5rem; }
.idea-link { display: block; text-decoration: none; }
.idea-link:hover .image-frame { border-color: var(--forest); }
.image-frame { padding: 5px; background: var(--sand); border: 1px solid var(--oak); }
.image-frame img { width: 100%; aspect-ratio: .85; object-fit: cover; }
.idea-link h3 { margin-top: .65rem; font-family: var(--font-body); font-size: var(--text-base); letter-spacing: 0; line-height: 1.4; }
.ideas-caption { text-align: center; margin: 1rem 0 0; font-size: var(--text-xs); color: var(--muted); }
.areas-layout { display: grid; gap: 2rem; align-items: center; }
.areas-copy h2 { margin-bottom: 1.25rem; }
.areas-copy p { max-width: 500px; }
.area-map { width: 100%; height: auto; display: block; color: var(--forest); }
.area-map .area-shape { fill: var(--sand); stroke: var(--rule); stroke-width: 2; }
.area-map text { fill: var(--forest); font: var(--text-sm) var(--font-body); }
.area-map .main-label { font-weight: 700; }
.area-map circle { fill: var(--forest); }
.map-caption { text-align: right; font-size: var(--text-xs); color: var(--muted); }
.reviews-placeholder { margin: 0 auto; padding: 2.5rem 1.25rem; text-align: center; }
.reviews-placeholder h2 { font-size: var(--text-xl); }
.process { display: grid; gap: 2rem; padding-block: 2.5rem; }
.process h2 { font-size: var(--text-h3); }
.steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.steps li { margin: 0; border-left: 1px solid var(--oak); padding-left: 1.5rem; }
.step-number { font-family: var(--font-heading); font-size: var(--text-number); line-height: 1; display: block; margin-bottom: .8rem; }
.steps h3 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; letter-spacing: -.025em; margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.faq-layout { display: grid; gap: 1.5rem; padding-block: 1.5rem 2.5rem; }
.faq-layout h2 { font-size: var(--text-h3); }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; font-family: var(--font-heading); font-size: var(--text-base); padding: .8rem 0; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--forest); font-family: var(--font-body); font-size: var(--text-lg); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list details p { color: var(--muted); font-size: var(--text-base); line-height: 1.6; padding-bottom: .4rem; }
.closing { color: var(--chalk); background: var(--forest); padding-block: 1.25rem; }
.closing-frame { border-color: var(--forest-light); outline-color: var(--forest-light); display: grid; gap: 1.5rem; padding: 2rem; box-shadow: inset 0 0 0 12px var(--forest), inset 0 0 0 13px var(--forest-light); }
.closing-frame::before { border-color: var(--forest-light); }
.closing h2 { font-size: var(--text-h3); max-width: 500px; }
.closing .eyebrow { margin-bottom: .6rem; }
.closing p { margin: .75rem 0 0; font-size: var(--text-sm); }
.closing-note { border-left: 1px solid var(--oak); padding-left: 1.5rem; font-size: var(--text-sm); letter-spacing: .08em; text-transform: uppercase; }
.site-footer { background: var(--forest); color: var(--chalk); padding: 1.5rem 0 5rem; }
.footer-top { display: grid; gap: 1.5rem; }
.footer-logo img { width: 270px; }
.footer-logo { width: 270px; align-self: start; }
.footer-contact, .footer-area { font-size: var(--text-sm); }
.footer-contact p { margin-bottom: .35rem; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-nav { display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--oak); margin-top: 1.5rem; padding-block: 1rem; font-size: var(--text-sm); }
.footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--oak-text); }
.footer-disclosure { margin: 0; padding-top: 1rem; border-top: 1px solid var(--oak); text-align: center; font-size: var(--text-xs); }
.copyright { margin: .6rem 0 0; text-align: center; font-size: var(--text-xs); }
.mobile-contact { position: fixed; bottom: 0; inset-inline: 0; z-index: 10; display: grid; grid-template-columns: 1fr 1fr; background: var(--chalk); color: var(--forest); box-shadow: 0 -2px 12px var(--shadow); padding-bottom: env(safe-area-inset-bottom); }
.mobile-contact a { padding: .85rem .5rem; min-height: 50px; text-decoration: none; font-size: var(--text-sm); font-weight: 600; text-align: center; }
.mobile-contact a + a { background: var(--forest); color: var(--chalk); }
.inner-header { margin: 1rem auto 0; width: min(calc(100% - 2rem), 1216px); }
.breadcrumb { font-size: var(--text-sm); color: var(--muted); padding-block: 1.5rem; }
.breadcrumb a:hover { color: var(--forest); }
.page-hero { display: grid; gap: 2rem; padding-block: 1rem var(--space-section); align-items: center; }
.page-hero h1 { margin-bottom: 1.5rem; }
.page-hero .intro { font-size: var(--text-md); max-width: 640px; margin-bottom: 1.5rem; }
.page-hero figure img { width: 100%; aspect-ratio: .95; object-fit: cover; }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-actions .text-link { padding: .75rem 0; }
.service-wide { background: var(--forest); color: var(--chalk); padding-block: 3rem; }
.service-wide h1 { max-width: 960px; }
.service-wide .intro { max-width: 720px; }
.wide-photo img { width: 100%; height: clamp(260px, 32vw, 480px); object-fit: cover; object-position: center 45%; }
.text-hero { display: grid; gap: 2rem; }
.text-hero .joinery-detail img { height: 260px; aspect-ratio: auto; }
.stairs-hero .stairs-copy { background: var(--forest); color: var(--chalk); padding: 2rem; }
.garden-hero { padding: 2rem; align-items: start; }
.garden-hero h1 { max-width: 850px; }
.planning-note { border-left: 1px solid var(--oak); padding-left: 1.5rem; }
.planning-note h2 { font-size: var(--text-h3); }
.kitchen-hero { align-items: start; border-bottom: 1px solid var(--rule); }
.kitchen-checklist { margin: 0; padding-left: 1.5rem; font-size: var(--text-lg); }
.kitchen-checklist li { border-bottom: 1px solid var(--rule); padding-block: 1rem; padding-left: .5rem; }
.kitchen-checklist li::marker { color: var(--forest); font-family: var(--font-heading); }
.decision-layout { display: grid; gap: 2rem; }
.decision-layout h2 { max-width: 500px; }
.decision-intro p { margin-top: 1.5rem; max-width: 480px; }
.decision-list { display: grid; gap: 0; }
.decision-item { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.decision-item h3 { font-size: var(--text-xl); margin-bottom: .75rem; }
.decision-item p { margin: 0; color: var(--muted); }
.service-process { border-block: 1px solid var(--rule); }
.service-process .process { padding-block: var(--space-section); }
.related { border-top: 1px solid var(--rule); padding-block: 2rem; }
.related h2 { font-size: var(--text-xl); margin-bottom: 1rem; }
.related-links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.related-links a { padding-block: .65rem; }
.about-story { display: grid; gap: 2rem; }
.about-story h2 { margin-bottom: 1.5rem; }
.about-facts { border-left: 1px solid var(--oak); padding-left: 2rem; }
.about-facts dt { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.about-facts dd { margin: 0 0 1.5rem; font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1.2; }
.contact-hero { max-width: 900px; margin-inline: auto; text-align: center; }
.contact-hero .intro { margin-inline: auto; }
.contact-layout { display: grid; gap: 2.5rem; align-items: start; }
.contact-options { display: grid; gap: 1.5rem; }
.contact-option { padding: 2rem; border: 1px solid var(--rule); }
.contact-option h2 { font-size: var(--text-xl); margin-bottom: .75rem; }
.contact-option .contact-value { font-size: var(--text-lg); overflow-wrap: anywhere; }
.contact-option .button { margin-top: .5rem; }
.contact-details h2 { font-size: var(--text-h3); margin-bottom: 1.25rem; }
.contact-details section + section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.send-list { padding-left: 1.2rem; }
.contact-example { font-size: var(--text-sm); color: var(--muted); }
html:not(.js) .home-page .hero-copy { padding-top: 15rem; }
@media (min-width: 600px) {
  .wrap { width: min(calc(100% - 4rem), var(--content)); }
  .ideas-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .feature-layout { grid-template-columns: 1fr 1.4fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-area { grid-column: 1 / -1; }
  .page-hero figure img { aspect-ratio: 1.2; }
  .contact-options { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .js .menu-toggle { display: none; }
  .site-header { display: flex; align-items: center; gap: 2.5rem; padding: 1.15rem 2.25rem; }
  .brand img { width: 210px; }
  .header-nav, .js .header-nav { display: flex; flex: 1; padding: 0; flex-wrap: nowrap; gap: .5rem; }
  .header-nav a { font-size: var(--text-base); padding-inline: .8rem; }
  .header-nav .button { margin-left: auto; min-width: 140px; }
  .home-hero { min-height: min(73.2vw, 1055px); }
  .home-header { top: 40px; }
  .hero-copy { padding: 4rem 0 6rem; }
  .hero-copy h1 { line-height: 1.04; }
  .approach { grid-template-columns: 1fr 1.08fr .23fr; gap: 2.5rem; }
  .approach-photo img { height: 530px; aspect-ratio: auto; }
  .approach .side-note { align-self: stretch; display: flex; align-items: center; }
  .services-layout { grid-template-columns: 2.5fr 1fr; gap: 4rem; }
  .service-list a { grid-template-columns: 4rem 1fr auto; min-height: 70px; }
  .service-aside { border-top: 0; border-left: 1px solid var(--oak); padding: 2rem 0 2rem 4rem; display: flex; flex-direction: column; justify-content: center; }
  .service-aside h3 { font-size: var(--text-h3); }
  .feature-band { margin-block: 2rem; }
  .feature-layout { grid-template-columns: 1.05fr 1.45fr .52fr .46fr; gap: 3rem; min-height: 360px; }
  .feature-photo img, .feature-detail img { width: 100%; height: 340px; object-fit: cover; }
  .feature-copy h2 { font-size: var(--text-h3); }
  .feature-detail { display: block; }
  .ideas-layout { grid-template-columns: 1fr 3fr; gap: 2.5rem; }
  .ideas-layout h2 { font-size: var(--text-h3); }
  .ideas-grid { gap: 2rem; }
  .areas-layout { grid-template-columns: 1fr 1.3fr; gap: 6rem; }
  .reviews-placeholder { padding-block: 3.5rem; }
  .process { grid-template-columns: 1.3fr 2.7fr; gap: 2.5rem; }
  .steps { gap: 2.25rem; }
  .faq-layout { grid-template-columns: .75fr 2.75fr; gap: 3rem; }
  .faq-list { border-left: 1px solid var(--oak); border-top: 0; padding-left: 2rem; }
  .faq-list summary { font-size: var(--text-md); }
  .closing-frame { grid-template-columns: 1.55fr 1fr .5fr; align-items: center; gap: 3rem; padding: 3rem; }
  .closing h2 { font-size: var(--text-h3); }
  .closing-note { align-self: stretch; display: flex; align-items: center; }
  .site-footer { padding-bottom: 1.5rem; }
  .footer-top { grid-template-columns: 1fr 1fr 1.1fr; gap: 2.5rem; }
  .footer-contact, .footer-area { border-left: 1px solid var(--oak); padding-left: 2rem; }
  .footer-area { grid-column: auto; }
  .mobile-contact { display: none; }
  .page-hero { grid-template-columns: 1.25fr 1fr; gap: 4.5rem; padding-block: 2rem 4.5rem; }
  .page-hero figure img { aspect-ratio: .9; max-height: 640px; }
  .page-hero.wardrobe-hero figure img { aspect-ratio: .78; }
  .service-wide .page-hero { display: block; padding-block: 1rem; }
  .service-wide .intro { margin-top: 2rem; }
  .text-hero { grid-template-columns: 1.7fr .7fr; }
  .text-hero .joinery-detail img { height: 430px; }
  .stairs-hero { grid-template-columns: 1fr 1.3fr; gap: 0; padding-top: 0; }
  .stairs-hero .stairs-copy { padding: 4rem; }
  .stairs-hero figure img { height: 640px; aspect-ratio: auto; }
  .garden-hero { grid-template-columns: 1.7fr 1fr; padding: 4rem; }
  .garden-hero .planning-note { padding: 1.5rem 0 1.5rem 2rem; }
  .kitchen-hero { grid-template-columns: 1.5fr 1fr; gap: 6rem; }
  .decision-layout { grid-template-columns: 1fr 1.4fr; gap: 5rem; }
  .about-story { grid-template-columns: 1.6fr 1fr; gap: 5rem; }
  .contact-layout { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
  .contact-options { grid-template-columns: 1fr; }
  .contact-hero { display: block; }
  .home-page #approach { padding-block: 40px; }
  .home-page .approach-copy h2 { font-size: var(--text-display); }
  .home-page .approach-copy p { font-size: var(--text-lg); }
  .home-page #services { padding-block: 40px; }
  .home-page .service-list a { font-size: var(--text-service); }
  .home-page .service-number { font-size: var(--text-home-number); }
  .home-page .feature-copy h2, .home-page .ideas-layout h2, .home-page .closing h2 { font-size: var(--text-feature); }
  .home-page #ideas { padding-block: 32px; }
  .home-page .areas-layout { padding-block: 24px; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
  .home-page .areas-copy h2 { font-size: var(--text-feature); }
  .home-page .reviews-placeholder { padding-block: 2.5rem; }
  .home-page .faq-list details[open] { display: grid; grid-template-columns: 1.05fr 1.7fr; gap: 1.5rem; align-items: baseline; }
  .home-page .faq-list summary { font-size: var(--text-base); padding-block: .55rem; }
  .home-page .faq-list details p { margin: 0; padding: .55rem 0; }
  html:not(.js) .home-page .hero-copy { padding-top: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.faq-list summary, .service-number, .decision-item h3 { font-weight: 600; }

/* one-question-at-a-time enquiry */
.wizard { border: 1px solid var(--forest); background: var(--white); padding: 1.75rem; margin-bottom: 1.5rem; }
.wiz-head { margin-bottom: 1.25rem; }
.wiz-head .eyebrow { margin-bottom: .6rem; }
.wiz-bar { height: 4px; background: var(--rule); }
.wiz-bar i { display: block; height: 100%; background: var(--forest); transition: width 200ms; }
.wiz-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz-step legend, .wiz-review h2 { padding: 0; margin-bottom: .75rem; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -.03em; }
.wiz-hint { color: var(--muted); font-size: var(--text-sm); }
.wiz-options { display: grid; gap: .6rem; margin-bottom: 1rem; }
.wiz-option { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .7rem 1rem; border: 1px solid var(--rule); background: var(--chalk); color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; transition: border-color 180ms, background-color 180ms; }
.wiz-option:hover, .wiz-option.is-picked { border-color: var(--forest); background: var(--sand); }
.wiz-option input { width: 20px; height: 20px; accent-color: var(--forest); }
.wiz-input { width: 100%; min-height: 52px; padding: .7rem 1rem; border: 1px solid var(--forest); font: inherit; font-size: var(--text-md); background: var(--white); margin-bottom: 1rem; }
.wiz-back, .wiz-edit, .wiz-copy { background: none; border: 0; padding: .5rem 0; font: inherit; font-size: var(--text-sm); color: var(--forest); text-decoration: underline; cursor: pointer; }
.wiz-back { display: block; margin-top: .75rem; }
.wiz-msg { min-height: 1.4em; color: #8a2b1f; font-size: var(--text-sm); margin: .5rem 0 0; }
.wiz-review dl { margin: 0 0 1.25rem; }
.wiz-review dt { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .8rem; }
.wiz-review dd { margin: .1rem 0 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: .5rem; }
.wiz-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .5rem; }
.button.ghost { background: var(--transparent); color: var(--forest); }
.button.ghost:hover { background: var(--sand); }
.wiz-step legend:focus, .wiz-review h2:focus { outline: none; }

/* approach: timeline */
.approach-fig img { width: 100%; aspect-ratio: 1.1; object-fit: cover; }
.timeline-band { background: var(--forest); color: var(--chalk); padding-block: var(--space-section); }
.timeline { display: grid; gap: 2.5rem; }
.timeline-head h2 { color: var(--chalk); margin-bottom: 1rem; }
.timeline-head p { color: var(--sand); max-width: 24rem; }
.timeline-steps { list-style: none; margin: 0; padding: 0 0 0 1.75rem; border-left: 1px solid var(--oak); }
.timeline-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-block: 1.5rem; margin: 0; }
.timeline-steps li + li { margin-top: 0; border-top: 1px solid var(--forest-light); }
.timeline-steps li::before { content: ''; position: absolute; left: calc(-1.75rem - 5px); top: 2.35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--oak); }
.tl-num { font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.5rem, 5vw, 4rem); line-height: .9; color: var(--oak); letter-spacing: -.04em; min-width: 2.2ch; }
.timeline-steps h3 { font-size: var(--text-xl); margin-bottom: .4rem; }
.timeline-steps p { margin: 0; color: var(--sand); max-width: 34rem; }
.send-split { display: grid; gap: 2.5rem; padding-block: var(--space-section); align-items: center; }
.send-photo img { width: 100%; max-height: 560px; object-fit: cover; object-position: top; }
.send-rows { list-style: none; padding: 0; margin: 0 0 1.75rem; border-top: 1px solid var(--rule); }
.send-rows li { display: grid; gap: .15rem; padding: 1rem 0; margin: 0; border-bottom: 1px solid var(--rule); }
.send-rows b { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); letter-spacing: -.02em; }
.send-rows span { color: var(--muted); }
/* ideas: editorial rows */
.idea-row { display: grid; gap: 2rem; padding-block: var(--space-section); align-items: center; }
.idea-wide img { width: 100%; aspect-ratio: 1.45; object-fit: cover; }
.idea-tall img { width: 100%; max-height: 620px; object-fit: cover; object-position: top; }
.idea-text h2 { margin-bottom: 1rem; }
.idea-band { background: var(--forest); color: var(--chalk); }
.idea-band .photo-caption { color: var(--sand); }
.idea-band .text-link { color: var(--chalk); }
.idea-strip { display: grid; gap: 1.5rem; padding-block: var(--space-section); }
.strip { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.strip a { display: block; width: 190px; text-decoration: none; }
.strip img { width: 100%; height: 230px; object-fit: cover; margin-bottom: .6rem; border: 1px solid var(--rule); }
.strip span { font-weight: 600; font-size: var(--text-sm); }
/* services: decision guide */
.guide { display: grid; gap: 1.75rem; }
.guide-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--forest); }
.guide-list li { margin: 0; border-bottom: 1px solid var(--rule); }
.guide-list a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: 1.1rem 0; text-decoration: none; align-items: center; }
.guide-list a:hover { background: var(--sand); }
.g-q { grid-column: 1; font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); letter-spacing: -.02em; }
.g-a { grid-column: 1; color: var(--muted); font-size: var(--text-sm); }
.guide-list .service-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: var(--text-lg); color: var(--forest); }
@media (min-width: 1000px) {
  .timeline { grid-template-columns: .8fr 1.2fr; gap: 5rem; align-items: start; }
  .timeline-head { position: sticky; top: 2rem; }
  .send-split { grid-template-columns: .9fr 1.1fr; gap: 5rem; }
  .idea-row { grid-template-columns: 1.4fr 1fr; gap: 4.5rem; }
  .idea-row.reverse { grid-template-columns: 1fr .75fr; }
  .idea-strip { grid-template-columns: .7fr 1.3fr; align-items: center; }
  .guide { grid-template-columns: .7fr 1.3fr; gap: 4rem; align-items: start; }
  .guide-list a { grid-template-columns: 1.3fr 1fr auto; }
  .g-a { grid-column: 2; }
  .guide-list .service-arrow { grid-column: 3; grid-row: 1; }
  .g-q, .g-a { grid-row: 1; }
}
.send-split h2 { margin-bottom: 1rem; } .idea-band h2 { color: var(--chalk); }

/* real map */
.area-map-live { width: 100%; height: 440px; border: 1px solid var(--rule); background: var(--sand); position: relative; z-index: 0; }
.area-map-live:not(.is-live) .area-map { height: 100%; object-fit: contain; }
.area-map-live .leaflet-tile-pane { filter: grayscale(.45) sepia(.22) contrast(1.02); }
.area-map-live .leaflet-container { font-family: var(--font-body); }
.map-pin { background: none; border: 0; }
.map-pin .pin-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--oak); border: 2px solid var(--forest); box-shadow: 0 0 0 2px rgb(245 241 234 / 85%); }
.map-pin.is-main .pin-dot { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--forest); border-color: var(--chalk); }
.map-pin .pin-label { position: absolute; left: 10px; top: -10px; white-space: nowrap; padding: 1px 6px; background: rgb(245 241 234 / 90%); color: var(--forest); font: 600 .75rem var(--font-body); }
.map-pin.is-main .pin-label { left: 14px; top: -12px; font-size: .85rem; font-weight: 700; }
@media (max-width: 700px) { .area-map-live { height: 340px; } }
.map-pin.left .pin-label { left: auto; right: 10px; }
.map-pin.is-main.left .pin-label { right: 14px; }
@media (max-width: 700px) { .map-pin .pin-label { font-size: .68rem; padding-inline: 4px; } }
.map-pin.low .pin-label { top: 2px; }

/* Website information pages share the existing typography and spacing. */
.legal-copy { max-width: 820px; padding-bottom: var(--space-section); }
.legal-copy section + section { margin-top: 2.5rem; }
.legal-copy h2 { font-size: var(--text-h3); margin-bottom: 1rem; }
.legal-copy p { overflow-wrap: anywhere; }
.legal-copy a:not(.button) { text-decoration: underline; text-underline-offset: .18em; }
.legal-hero { grid-template-columns: 1fr; max-width: 820px; }