[hidden] { display: none !important; }
/* Warm & soft: linen backgrounds, oak-honey accent, light type, hairline borders, rounded app-like cards.
   Change the colors here and the whole site follows. */
:root {
  /* v3.4 redesign: warm white ground, slate-blue accent, near-black ink, oak details */
  --bg: #F5F3EE;          /* warm white page background */
  --surface: #FFFFFF;     /* cards, inputs */
  --sand: #ECE8E0;        /* alternate sections, soft fills */
  --line: #DDD8CE;        /* hairline borders */
  --ink: #18212B;         /* main text: near-black navy */
  --body-ink: #3D4752;    /* paragraph text */
  --muted: #55606B;       /* secondary text */
  --accent: #2E4A66;      /* slate blue: buttons, highlights */
  --accent-dark: #1C3247; /* hover, links */
  --accent-soft: #E3E9EF; /* selected choices, callouts */
  --accent-line: #C3D0DC;
  --sage: #3E6B55;        /* check marks, quiet details */
  --navy: #18212B;        /* dark bands */
  --oak: #9A6A3A;         /* oak details on light */
  --oak-light: #D9B48A;   /* oak details on dark */
  --danger: #A8433A;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-rgb: 24, 33, 43;
  --shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 8px 24px -10px rgba(var(--shadow-rgb), .14);
  --shadow-lift: 0 2px 4px rgba(var(--shadow-rgb), .06), 0 24px 48px -16px rgba(var(--shadow-rgb), .3);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* legacy names used elsewhere */
  --charcoal: var(--ink); --gray-dark: var(--muted); --gray-light: var(--sand); --white: var(--bg);
  --orange: var(--accent); --orange-dark: var(--accent-dark); --text: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--body); font-weight: 400; color: var(--ink); background: var(--bg); line-height: 1.65; font-size: 16px;
  -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.2; letter-spacing: -.005em; margin: 0 0 .5em; text-wrap: balance; color: var(--ink); }
h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 500; }
a { color: var(--accent-dark); }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-block: 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 8px 12px; z-index: 100; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* buttons: soft pills, big tap targets */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font-family: var(--body); font-weight: 500;
  font-size: 1rem; padding: .8em 1.5em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s; min-height: 48px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(52, 80, 107, .32); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost, .btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover, .btn-outline:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-sm { font-size: .9rem; padding: .45em 1.1em; min-height: 40px; }
.btn-lg { font-size: 1.05rem; padding: .9em 1.7em; min-height: 54px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }
.link { background: none; border: 0; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; padding: 0; }

/* header: light, translucent */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(236, 233, 227, .9); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(236, 233, 227, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 28px; height: 28px; border-radius: 6px; background:
  linear-gradient(var(--accent), var(--accent)) 0 0/100% 26% no-repeat,
  linear-gradient(#9FB3C7, #9FB3C7) 0 50%/64% 26% no-repeat,
  linear-gradient(var(--accent), var(--accent)) 100% 100%/80% 26% no-repeat; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name { font-family: var(--head); font-weight: 500; font-size: 1.12rem; letter-spacing: .08em; margin: 0; }
.logo-sub { font-family: var(--head); font-weight: 400; font-size: .68rem; letter-spacing: .48em; color: var(--accent); margin-top: 4px; }
.nav-toggle { background: none; border: 0; width: 48px; height: 48px; cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; content: ''; border-radius: 2px; }
.bars::before { position: absolute; top: -7px; } .bars::after { position: absolute; top: 7px; }
.nav { display: none; position: absolute; top: 67px; left: 0; right: 0; background: var(--bg); flex-direction: column;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.nav.open { display: flex; }
.nav a { color: var(--ink); text-decoration: none; padding: 14px 4px; font-weight: 400; border-bottom: 1px solid var(--line); }
.nav a.btn { border: 0; margin-top: 12px; padding: .7em 1em; color: #fff; }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: flex; position: static; flex-direction: row; align-items: center; gap: 26px; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav a { border: 0; padding: 4px 0; font-size: .95rem; }
  .nav a:not(.btn):hover { color: var(--accent-dark); }
  .nav a.btn { margin: 0; }
}

/* hero: the owner's photo up front, warm shade only where the text sits */
.hero { position: relative; color: #F7F5F1; background: #1C2836; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  background-image:
    linear-gradient(180deg, rgba(18,28,40,.25) 0%, rgba(18,28,40,.55) 100%),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(10,18,28,.25) 238px 239px),
    repeating-linear-gradient(0deg, #6E7C88 0 46px, #63717D 46px 47px, #77858F 47px 94px, #5C6A76 94px 95px); }
.hero-bg.photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,28,40,.12) 0%, rgba(18,28,40,.48) 38%, rgba(18,28,40,.80) 100%); }
@media (min-width: 900px) {
  .hero-bg.photo::after { background: linear-gradient(95deg, rgba(18,28,40,.70) 0%, rgba(18,28,40,.35) 50%, rgba(18,28,40,.05) 100%); }
}
.hero-inner { position: relative; padding: 220px 16px 44px; }
.hero-bg.photo { background-position: center 85%; }
@media (min-width: 900px) { .hero-bg.photo { background-position: center 60%; } }
.eyebrow { color: #C9D8E6; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; margin: 0 0 12px; }
.hero h1 { font-size: clamp(2.1rem, 6.4vw, 3.7rem); font-weight: 300; max-width: 13em; line-height: 1.12; color: #F7F5F1; text-shadow: 0 2px 18px rgba(10,18,28,.35); }
.lead { font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: #E6EAEE; font-weight: 300; margin: 0 0 26px; text-shadow: 0 1px 10px rgba(10,18,28,.35); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn-ghost { background: rgba(255,248,239,.14); color: #F7F5F1; border-color: rgba(255,248,239,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .btn-ghost:hover { background: rgba(255,248,239,.26); color: #fff; border-color: #fff; }
.hero-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: #E6EAEE; font-size: .95rem; }
.hero-points li::before { content: '\2713'; color: #A9C4DA; margin-right: 8px; }
@media (min-width: 900px) { .hero-inner { padding: 150px 16px 130px; } }

/* sections */
.section { padding: 68px 0; }
.section-alt { background: var(--sand); }
.section-dark { background: var(--navy); color: #E6EAEE; position: relative; overflow: hidden; }
.section-dark h2 { color: #F7F5F1; }
.section-dark h3 { color: #C9D8E6; }
.section-lead { color: var(--muted); font-size: 1.05rem; font-weight: 300; max-width: 46em; margin: 0 0 30px; }
.grid { display: grid; gap: 16px; }
.services { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.why { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; }
.why p { color: #AEB8C3; margin: 0; }
.card { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.card p { margin: 0; color: var(--muted); }
.card h3 { margin-bottom: .4em; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.steps li { position: relative; padding-top: 8px; }
.steps .n { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--accent-soft); color: var(--accent-dark);
  font-family: var(--head); font-size: 1.2rem; font-weight: 500; border-radius: 999px; margin-bottom: 12px; border: 1px solid var(--accent-line); }
.steps p { color: var(--muted); margin: 0; }
.area-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li { background: var(--surface); border: 1px solid var(--line); padding: 7px 14px; border-radius: 999px; font-size: .93rem; color: var(--ink); }
.hint { color: var(--muted); font-size: .86rem; margin: 6px 0 0; display: block; font-weight: 400; }

/* forms */
.field { display: block; font-weight: 500; font-size: .95rem; margin: 0 0 18px; }
.field input, .field select, .field textarea { display: block; width: 100%; margin-top: 7px; font: inherit; font-weight: 400; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); min-height: 50px;
  transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(52,80,107,.14); }
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.row2 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.err { display: block; color: var(--danger); font-size: .85rem; font-weight: 400; min-height: 0; }
.err:empty { display: none; }
.form-error { background: #F8E9E6; color: var(--danger); padding: 12px 14px; border-radius: var(--radius-sm); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-family: var(--head); font-weight: 400; font-size: 1.45rem; margin-bottom: 16px; padding: 0; color: var(--ink); }
.q { font-weight: 500; margin: 20px 0 9px; }

.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .choices { grid-template-columns: repeat(3, 1fr); } .choices.two { grid-template-columns: repeat(2, 1fr); } }
.choices.three { grid-template-columns: repeat(3, 1fr); }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 62px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); font-weight: 500; line-height: 1.3; font-size: .95rem; transition: border-color .2s, background .2s; }
.choice small { font-weight: 400; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* calculator */
.calc { padding: 24px; }
.calc-progress { height: 4px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.calc-progress span { display: block; height: 100%; width: 25%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.calc-step-label { font-size: .85rem; color: var(--muted); margin: 10px 0 18px; }
.calc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.calc-nav .btn-primary { margin-left: auto; }
.calc-area { font-weight: 500; color: var(--ink); margin: 12px 0 0; }
.callout { background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 14px 16px; border-radius: var(--radius-sm); margin-top: 16px; }
.room { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.room .field { margin: 0; font-size: .85rem; }
.room button { min-height: 50px; }
.calc-result h3 { font-size: .8rem; color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; font-family: var(--body); }
.range { font-family: var(--head); font-size: clamp(2.2rem, 8vw, 3.2rem); font-weight: 400; color: var(--ink); margin: 6px 0 4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.range-sub { color: var(--muted); margin: 0 0 20px; }
.breakdown { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: .93rem; }
.breakdown th { text-align: left; font-family: var(--body); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 500; padding: 16px 0 6px; color: var(--muted); border-bottom: 1px solid var(--line); }
.breakdown td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.breakdown td.amt { text-align: right; white-space: nowrap; padding-left: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.breakdown .provisional td { color: var(--muted); font-style: italic; }
.qty-list { font-size: .88rem; color: var(--muted); padding-left: 18px; margin: 0 0 16px; }
.notes { padding-left: 18px; margin: 0 0 12px; color: var(--muted); }
.disclaimer { background: var(--sand); padding: 14px 16px; border-radius: var(--radius-sm); font-size: .92rem; color: var(--muted); margin: 0 0 20px; }
.result-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.result-ctas .btn { flex: 1 1 220px; }

/* lead form */
.lead-form { padding: 24px; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 22px; background: var(--sand); padding: 4px; border-radius: 999px; }
.tab input { position: absolute; opacity: 0; }
.tab span { display: grid; place-items: center; text-align: center; min-height: 46px; padding: 6px 8px; border-radius: 999px;
  cursor: pointer; font-weight: 500; font-size: .86rem; line-height: 1.2; color: var(--muted); transition: background .2s, color .2s; }
.tab input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--shadow-rgb),.12); }
.tab input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.attached { display: flex; justify-content: space-between; gap: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: .93rem; }
.callback-pref { margin: 4px 0 14px; }
.callback-pref legend { font-family: var(--body); font-size: .95rem; font-weight: 500; margin-bottom: 9px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; cursor: pointer; font-size: .9rem; min-height: 42px; transition: background .2s, border-color .2s; }
.pill input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent { font-size: .9rem; color: var(--muted); }
.success { text-align: left; }
.success h3 { color: var(--ink); }

/* gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; min-height: 40px; }
.filters button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery figure { margin: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.gallery a { display: block; }
.gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.gallery figcaption { padding: 10px 14px; font-size: .88rem; color: var(--muted); }
.gallery .pair { display: grid; grid-template-columns: 1fr 1fr; }
.gallery .tag { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; background: var(--accent-soft); color: var(--accent-dark); padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.empty { color: var(--muted); }

/* footer */
.site-footer { background: var(--sand); color: var(--muted); padding: 40px 0 22px; font-size: .92rem; border-top: 1px solid var(--line); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.site-footer nav { display: flex; gap: 18px; }
.site-footer a { color: var(--ink); }
.accent { color: var(--accent-dark); }
.copy { color: var(--muted); font-size: .82rem; margin-top: 20px; }

/* app-style action bar on phones */
.mobile-bar { display: none; }
@media (max-width: 899px) {
  .mobile-bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: rgba(236, 233, 227, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .mobile-bar .btn { flex: 1; min-height: 50px; font-size: .95rem; padding: .6em .8em; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* legal page */
.legal { padding: 48px 0 64px; }
.legal h1 { font-size: 2rem; font-weight: 300; }
.legal h2 { font-size: 1.3rem; margin-top: 1.6em; }
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery figure { border-radius: var(--radius-sm); }
  .gallery figcaption { font-size: .76rem; padding: 6px 8px; line-height: 1.3; }
}


/* ================= motion & depth ================= */
/* Hero: slow drift on the photo, text rises in on load */
.hero-bg.photo { animation: heroDrift 22s var(--ease) both alternate infinite; transform-origin: 60% 70%; }
@keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.hero-inner > * { animation: rise .9s var(--ease) both; }
.hero-inner > :nth-child(1) { animation-delay: .10s; }
.hero-inner > :nth-child(2) { animation-delay: .22s; }
.hero-inner > :nth-child(3) { animation-delay: .34s; }
.hero-inner > :nth-child(4) { animation-delay: .46s; }
.hero-inner > :nth-child(5) { animation-delay: .58s; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.hero-scroll { position: absolute; left: 50%; bottom: 18px; width: 26px; height: 40px; margin-left: -13px; border: 1.5px solid rgba(247,245,241,.55);
  border-radius: 999px; z-index: 2; display: none; }
.hero-scroll::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #F7F5F1; animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (min-width: 900px) { .hero-scroll { display: block; } }

/* Header gains a shadow once the page scrolls */
.site-header { transition: box-shadow .3s var(--ease), background .3s; }
.site-header.scrolled { box-shadow: 0 8px 30px -12px rgba(var(--shadow-rgb), .35); }

/* Buttons: lift + soft shine */
.btn { position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: linear-gradient(180deg, #3E5D7B, var(--accent)); }
.btn-primary:hover { box-shadow: 0 12px 26px -8px rgba(52, 80, 107, .55); }
.btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transition: left .7s var(--ease); }
.btn-primary:hover::after { left: 130%; }

/* Cards: layered depth, lift on hover, accent line grows */
.card { position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.services .card::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(.18); transform-origin: left; transition: transform .45s var(--ease); }
.services .card:hover, .services .card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--accent-line); }
.services .card:hover::before { transform: scaleX(1); }
.calc, .lead-form { box-shadow: var(--shadow-lift); }

/* Gallery: zoom inside the frame, soft overlay */
.gallery figure { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.gallery a { overflow: hidden; position: relative; }
.gallery img { transition: transform .7s var(--ease); }
.gallery figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.gallery figure:hover img { transform: scale(1.07); }

/* Why Choose Us: dark band with soft light and numbered glow */
.section-dark::before { content: ''; position: absolute; width: 620px; height: 620px; right: -220px; top: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,149,186,.28), transparent 65%); pointer-events: none; }
.section-dark .wrap { position: relative; }
.why > div { padding: 20px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: background .3s, transform .35s var(--ease); }
.why > div:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); }

/* How it works: connecting line */
.steps { position: relative; }
.steps .n { background: var(--surface); border-color: var(--accent-line); box-shadow: 0 6px 16px -6px rgba(var(--shadow-rgb), .3); position: relative; z-index: 1; }
@media (min-width: 900px) {
  .steps::before { content: ''; position: absolute; top: 30px; left: 22px; right: 10%; height: 1px;
    background: linear-gradient(90deg, var(--accent-line), var(--accent) 50%, var(--accent-line)); }
}

/* Calculator: result appears with a small rise */
.calc-result { animation: rise .6s var(--ease) both; }
.choice span { transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s; }
.choice:hover span { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(var(--shadow-rgb), .4); }

/* Scroll reveal (only when JS is running; content stays visible without it) */
.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg.photo, .hero-inner > *, .calc-result, .hero-scroll::after { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .gallery figure:hover, .why > div:hover { transform: none; }
}

/* language switch EN / ES */
.lang-switch { display: inline-flex; margin-left: auto; margin-right: 6px; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.lang-switch button { font: 500 .8rem/1 var(--body); letter-spacing: .06em; color: var(--muted); background: none; border: 0; border-radius: 999px;
  min-width: 40px; min-height: 34px; padding: 0 10px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.lang-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--shadow-rgb), .18); }
@media (min-width: 900px) { .lang-switch { order: 3; margin: 0 0 0 18px; } }
@media (max-width: 420px) {
  .logo { gap: 8px; }
  .logo-mark { width: 24px; height: 24px; }
  .logo-name { font-size: .98rem; letter-spacing: .06em; white-space: nowrap; }
  .logo-sub { font-size: .6rem; letter-spacing: .4em; }
  .lang-switch button { min-width: 36px; padding: 0 8px; }
}

/* services: main installations vs add-ons */
.sub-h { font-family: var(--body); font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.services { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, 1fr); } }
.addons { margin-top: 36px; padding: 22px 22px 8px; border-radius: var(--radius); background: var(--sand); border: 1px solid var(--line); }
.addons .sub-h { margin-bottom: 4px; }
.addons-lead { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }
.addon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .addon-list { grid-template-columns: repeat(3, 1fr); } }
.addon-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0 16px 26px; border-top: 1px solid var(--line); position: relative; }
.addon-list li::before { content: '+'; position: absolute; left: 0; top: 13px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; line-height: 1; color: var(--surface); background: var(--accent); }
@media (min-width: 800px) { .addon-list li { border-top: 0; } }
.addon-list strong { font-weight: 500; color: var(--ink); }
.addon-list span { color: var(--muted); font-size: .93rem; }

/* floor-type illustrations on the installation cards */
.floor-card { padding-top: 0; overflow: hidden; }
.card-media { margin: 0 -24px 18px; aspect-ratio: 2 / 1; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--sand); }
.card-media svg { display: block; width: 100%; height: 100%; transition: transform .7s var(--ease); }
.floor-card:hover .card-media svg { transform: scale(1.06); }
.services .floor-card::before { z-index: 1; top: 0; }
@media (prefers-reduced-motion: reduce) { .floor-card:hover .card-media svg { transform: none; } }

.choice-ill { display: block; margin: -12px -14px 10px; aspect-ratio: 2 / 1; overflow: hidden; border-bottom: 1px solid var(--line); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.choice-ill svg { display: block; width: 100%; height: 100%; }
.choice input:checked + span .choice-ill { border-bottom-color: var(--accent); }

/* 5 floor options: on phones "Not sure yet" takes the full last row as a slim card */
@media (max-width: 599px) {
  .floor-choices .choice:last-child { grid-column: 1 / -1; }
  .floor-choices .choice:last-child .choice-ill { display: none; }
}

.card-media img, .choice-ill img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.floor-card:hover .card-media img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .floor-card:hover .card-media img { transform: none; } }

/* "Is it right for me?" panel on each floor card */
.floor-card { display: flex; flex-direction: column; }
.floor-info { margin-top: auto; padding-top: 14px; }
.floor-info summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-dark); font-weight: 500; font-size: .9rem;
  transition: background .2s, border-color .2s; }
.floor-info summary::-webkit-details-marker { display: none; }
.floor-info summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.floor-info[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.floor-info summary:hover { border-color: var(--accent); }
.floor-info dl { margin: 14px 0 0; display: grid; gap: 10px; animation: rise .4s var(--ease) both; }
.floor-info dt { font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); }
.floor-info dd { margin: 2px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.floor-info-note { margin: 12px 0 0 !important; font-size: .85rem; color: var(--ink) !important; font-style: italic; }
.services .card:has(.floor-info[open]) { transform: none; }

/* floating info window with blurred background */
.floor-info > dl, .floor-info > .floor-info-note { display: none !important; }
.floor-modal { border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border-radius: 20px; overflow: auto;
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(var(--shadow-rgb), .55); animation: modalIn .32s var(--ease) both; }
.floor-modal::backdrop { background: rgba(28, 40, 54, .32); -webkit-backdrop-filter: blur(8px) saturate(.9); backdrop-filter: blur(8px) saturate(.9); animation: fadeIn .3s ease both; }
.floor-modal.closing { animation: modalOut .18s ease both; }
.floor-modal.closing::backdrop { animation: fadeOut .18s ease both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes modalOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
.modal-media { aspect-ratio: 5 / 2; overflow: hidden; background: var(--sand); }
.modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-body { padding: 20px 22px 22px; }
.modal-body h3 { font-size: 1.35rem; margin-bottom: 12px; }
.modal-info dl { margin: 0; display: grid; gap: 0; }
.modal-info dt { font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); }
.modal-info dd { margin: 4px 0 16px; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.modal-info .floor-info-note { margin: 16px 0 0; font-size: .9rem; font-style: italic; color: var(--ink); display: block !important; }
.modal-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.modal-ctas .btn { flex: 1 1 200px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; z-index: 2;
  background: rgba(250, 248, 244, .9); color: var(--ink); font-size: 1.5rem; line-height: 1; box-shadow: 0 4px 14px rgba(var(--shadow-rgb), .2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.floor-modal { position: fixed; }
@media (max-width: 599px) {
  .floor-modal { width: calc(100vw - 24px); max-width: calc(100vw - 24px); margin: auto auto calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px; max-height: 86vh; animation-name: sheetIn; }
  .floor-modal { clip-path: inset(0 round 22px); }
  .modal-media { border-radius: 22px 22px 0 0; }
  @keyframes sheetIn { from { transform: translateY(110%); } to { transform: none; } }
  .floor-modal.closing { animation-name: sheetOut; }
  @keyframes sheetOut { to { transform: translateY(110%); } }
}
@media (prefers-reduced-motion: reduce) { .floor-modal, .floor-modal::backdrop { animation: none !important; } }
html:has(.floor-modal[open]) { overflow: hidden; }

/* every corner of the floating window rounded the same, in every browser */
.floor-modal { clip-path: inset(0 round 20px); }
.modal-media { border-radius: 20px 20px 0 0; }
@media (max-width: 599px) { .floor-modal { clip-path: inset(0 round 22px); } .modal-media { border-radius: 22px 22px 0 0; } }

/* ================= v3.4 redesign ================= */
/* Type: bold Bricolage headings, Inter body */
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; margin-bottom: .45em; }
h3 { font-weight: 600; letter-spacing: -.01em; }
.section-lead { font-weight: 400; color: var(--body-ink); }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ''; width: 28px; height: 2px; background: var(--oak); }

/* Buttons: squarer, flat, confident */
.btn { border-radius: 12px; font-weight: 600; }
.btn-primary, .btn-primary:hover { background: var(--accent); box-shadow: none; }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 12px 24px -12px rgba(46, 74, 102, .6); }
.btn-primary::after { display: none; }
.btn-ghost, .btn-outline { border: 1.5px solid var(--ink); background: transparent; }
.btn-ghost:hover, .btn-outline:hover { border-color: var(--accent); background: var(--surface); }

/* Header + logo */
body::before, .site-header { background: rgba(245, 243, 238, .92); }
.header-row { min-height: 72px; }
.logo { gap: 12px; }
.logo-mark { width: 40px; height: 40px; border-radius: 0; background: url(/img/logo-mark.svg) center / contain no-repeat; }
.logo-name { font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.logo-sub { font-family: var(--body); font-weight: 600; font-size: .66rem; letter-spacing: .44em; color: var(--muted); margin-top: 5px; }
.nav a { font-weight: 500; }
.nav a.btn { border-radius: 10px; }
.lang-switch { background: transparent; border-color: var(--line); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
@media (max-width: 420px) { .logo-mark { width: 32px; height: 32px; } .logo-name { font-size: .98rem; } }

/* Hero: full-bleed photo, bold white headline */
.hero-bg.photo::after { background: linear-gradient(180deg, rgba(18,26,36,.15) 0%, rgba(18,26,36,.6) 40%, rgba(18,26,36,.9) 100%); }
@media (min-width: 900px) {
  .hero-bg.photo::after { background: linear-gradient(95deg, rgba(18,26,36,.86) 0%, rgba(18,26,36,.62) 45%, rgba(18,26,36,.12) 100%); }
  .hero-inner { padding: 170px 16px 120px; }
}
.hero .eyebrow { display: flex; align-items: center; gap: 10px; color: #E2D3C0; font-weight: 600; letter-spacing: .14em; }
.hero .eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--oak-light); }
.hero h1 { font-weight: 700; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.025em; max-width: 13ch; margin-bottom: .35em; }
.hero .lead { font-weight: 400; color: #E6EAEE; max-width: 40ch; }
.hero .btn-ghost { border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.08); }
.hero-points li::before { color: #A9D3B9; font-weight: 700; }
.hero::after { display: none; }

/* Highlights strip (former "Why Choose Us") right under the hero */
.section-dark.strip { padding: 30px 0; }
.section-dark.strip::before { display: none; }
.strip .why { counter-reset: why; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 32px; }
.strip .why > div { counter-increment: why; padding: 0 0 0 34px; background: none; border: 0; border-radius: 0; position: relative; }
.strip .why > div:hover { background: none; transform: none; }
.strip .why > div::before { content: counter(why, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--head); font-weight: 600; font-size: .95rem; color: var(--oak-light); }
.strip .why h3 { font-family: var(--body); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: #fff; margin: 0 0 2px; }
.strip .why p { font-size: .9rem; line-height: 1.5; color: #AEB8C3; }

/* Sections */
.section { padding: 88px 0; }
.card { box-shadow: none; border-color: var(--line); }
.services .card::before { display: none; }
.services .card:hover, .services .card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line); }
.floor-card h3 { font-size: 1.35rem; }
.floor-info summary { border-radius: 10px; background: transparent; border-color: var(--line); color: var(--accent); font-weight: 600; }
.floor-info summary:hover { background: var(--accent-soft); }
.addons { background: transparent; border-color: var(--line); }
.addon-list li::before { background: var(--oak); }

/* Estimate: slate-blue band around the calculator */
.section-band { background: var(--accent); color: #fff; }
.section-band h2 { color: #fff; }
.section-band .kicker { color: #C9D8E6; }
.section-band .kicker::before { background: var(--oak-light); }
.section-band .section-lead { color: #D6E0EA; }
.section-band .calc { color: var(--ink); border: 0; box-shadow: 0 30px 60px -30px rgba(10, 18, 28, .55); }
legend { font-family: var(--head); font-weight: 700; letter-spacing: -.01em; }
.calc-progress { height: 6px; }
.choice input:checked + span { box-shadow: inset 0 0 0 2px var(--accent); }

/* Gallery: big feature photo, captions on the image */
.filters button { border-color: var(--line); background: transparent; font-weight: 600; }
.filters button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery { gap: 16px; grid-auto-flow: dense; }
.gallery figure { position: relative; border: 0; box-shadow: none; background: var(--sand); }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 6px 12px;
  border-radius: 8px; background: rgba(24, 33, 43, .82); color: #fff; font-size: .84rem; line-height: 1.35; pointer-events: none; }
.gallery .tag { background: var(--oak-light); color: var(--ink); }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery figure:first-child a, .gallery figure:first-child img { height: 100%; }
}
@media (max-width: 600px) { .gallery figcaption { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 4px 8px; } }

/* How it works: big oak numerals on a ruled line */
.steps { gap: 0 28px; border-top: 2px solid var(--ink); }
.steps::before { display: none; }
.steps li { padding-top: 24px; }
.steps .n { width: auto; height: auto; display: block; background: none; border: 0; box-shadow: none; border-radius: 0; margin-bottom: 10px;
  font-family: var(--head); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--oak); }
.steps h3 { font-family: var(--body); font-size: 1.1rem; }

/* Service area chips + form */
.area-list li { border-radius: 8px; }
.tabs { border-radius: 12px; }
.tab span { border-radius: 9px; font-weight: 600; }
.pill input:checked + span { border-color: var(--accent); }

/* Footer: dark */
.site-footer { background: var(--navy); color: #C9CFD6; border-top: 0; }
.site-footer a { color: #fff; }
.site-footer .logo-name { color: #fff; display: flex; align-items: center; gap: 12px; }
.site-footer .logo-name::before { content: ''; width: 36px; height: 36px; flex: none; background: url(/img/logo-mark-dark.svg) center / contain no-repeat; }
.site-footer .accent { color: var(--oak-light); }
.copy { color: #8E99A5; }

/* Phone action bar */
@media (max-width: 899px) { .mobile-bar { background: rgba(255, 255, 255, .96); } }

/* ---- v3.4: match the approved mockup ---- */
.hero-scroll { display: none !important; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-bottom: 36px; }
.section-head h2 { margin: 0; }
.section-head .section-lead { max-width: 400px; margin: 0; }
.section-head .filters { margin: 0; }

/* strip: four short promises */
.strip-list { list-style: none; margin: 0; padding: 0; counter-reset: why; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 40px; }
.strip-list li { counter-increment: why; display: flex; align-items: baseline; gap: 12px; color: #F5F3EE; }
.strip-list li::before { content: counter(why, decimal-leading-zero); font-family: var(--head); font-weight: 600; font-size: .95rem; color: var(--oak-light); }

/* service cards: tag, title, one line, "Is it right for me? ->" */
.floor-card { padding: 0; }
.floor-card .card-media { margin: 0 0 4px; aspect-ratio: 16 / 10; border-bottom: 0; }
.floor-card > :not(.card-media) { margin-left: 22px; margin-right: 22px; }
.card-tag { margin-top: 18px !important; margin-bottom: 6px !important; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
.floor-card h3 { margin-bottom: .3em; }
.floor-card > p:not(.card-tag) { font-size: .95rem; color: var(--body-ink); }
.floor-info { padding: 6px 0 16px; }
.floor-info summary { border: 0; background: none; padding: 0; min-height: 44px; border-radius: 0; color: var(--accent); font-weight: 600; font-size: .95rem; }
.floor-info summary:hover { background: none; color: var(--accent-dark); }
.floor-info summary::after { content: '\2192'; width: auto; height: auto; border: 0; transform: none; }
.floor-info[open] summary::after { transform: none; }
.addon-row { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.addon-row li { padding: 22px 24px; box-shadow: 1px 1px 0 var(--line); }
.addon-row strong { display: block; font-weight: 600; margin-bottom: 4px; }
.addon-row span { font-size: .9rem; color: var(--muted); }

/* estimate: rounded blue band, copy left and calculator right */
.section-band { background: transparent; color: inherit; padding: 16px 0; }
.band-grid { background: var(--accent); color: #fff; border-radius: 24px; padding: clamp(28px, 5vw, 64px); width: calc(100% - 32px); display: grid; gap: 28px; }
.band-copy .section-lead { margin-bottom: 0; }
@media (min-width: 1000px) {
  .band-grid { width: calc(100% - 48px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .band-copy { position: sticky; top: 110px; }
}
@media (max-width: 600px) { .band-grid { width: calc(100% - 16px); border-radius: 18px; padding: 24px 14px; } }

/* service area and contact form side by side */
.duo { display: grid; gap: 48px; }
@media (min-width: 1000px) { .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; } }
.duo-area .area-list li { background: transparent; }
.form-title { font-size: 1.75rem; margin-bottom: .3em; }
.form-lead { color: var(--muted); margin: 0 0 20px; }
#area, #contact { scroll-margin-top: 90px; }

/* ---- v3.4: second pass, literal to the mockup ---- */
/* hero: tall photo, text sitting low */
.hero { min-height: 560px; display: flex; align-items: flex-end; }
.hero-inner { padding: 120px 16px 32px; }
@media (min-width: 900px) { .hero { min-height: 680px; } .hero-inner { padding: 120px 16px 88px; } }
@media (max-width: 899px) {
  .hero-ctas, .hero-points li:nth-child(3) { display: none; }
  .hero-points { flex-direction: column; gap: 8px; margin-top: 4px; }
  .hero h1 { font-size: 2.5rem; }
  .strip-list li:nth-child(n+3) { display: none; }
}

/* calculator choices: text only, two columns, like the mockup */
.choice-ill { display: none !important; }
.choices, .choices.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice span { min-height: 70px; padding: 14px 16px; font-weight: 600; font-size: 1rem; border-radius: 12px; }
.choice small { font-weight: 400; font-size: .85rem; }
.floor-choices .choice:last-child { grid-column: auto; }

/* gallery: feature photo + four, "See all photos" button */
.gallery-more { text-align: center; margin: 24px 0 0; }
@media (max-width: 899px) {
  .gallery figure:first-child { grid-column: span 2; }
  .gallery figure:first-child img { aspect-ratio: 16 / 9; }
}

/* services on phones: cards slide sideways */
@media (max-width: 699px) {
  .services { display: flex; overflow-x: auto; gap: 12px; margin-right: -16px; padding: 0 16px 6px 0; scroll-snap-type: x mandatory; }
  .services .floor-card { flex: 0 0 78%; scroll-snap-align: start; }
  .services .card:hover { transform: none; }
}

/* contact: short form, extra fields folded away */
.more-details { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.more-details > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 600; color: var(--accent); list-style: none; }
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; font-weight: 400; }
.more-details[open] > summary::after { content: '\2212'; }
.more-details[open] { padding-bottom: 4px; }
.lead-form .consent { font-size: .85rem; }

/* footer: one row */
.site-footer { padding: 40px 0; }
.site-footer p { margin: 0; }
.site-footer .logo-name { margin-bottom: 6px; }
.site-footer nav { flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-footer .copy { margin: 0; font-size: .9rem; }

/* phone bar: callback icon + estimate */
.mobile-bar .bar-call { flex: 0 0 52px; padding: 0; border: 1.5px solid var(--ink); color: var(--ink); }

/* mockup width */
.wrap:not(.narrow) { max-width: 1240px; }

/* ---- v3.4: third pass, copied from the canvas design ---- */
.m-only { display: none !important; }
@media (max-width: 899px) { .m-only { display: block !important; } .d-only { display: none !important; } }
.lang-desktop { display: none; }
@media (min-width: 900px) { .lang-mobile { display: none; } .lang-desktop { display: inline-flex; margin: 0; } }
.lang-switch { border-color: #CFC9BD; }
@media (max-width: 899px) {
  .nav-toggle { width: 44px; height: 44px; border-radius: 10px; background: var(--ink); }
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { background: #fff; width: 20px; }
}

/* hero: still photo, arrow on the main button */
.hero-bg.photo { animation: none; transform: none; }
.hero .btn-primary svg { margin-left: 2px; }

/* service cards: 180px photo, 22px padding, tag colours as designed */
.floor-card .card-media { aspect-ratio: auto; height: 180px; margin: 0; }
.floor-card > :not(.card-media) { margin-left: 22px; margin-right: 22px; }
.card-tag { margin-top: 22px !important; color: var(--muted) !important; }
.card-tag-accent { color: var(--accent) !important; }
.floor-card h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.floor-card > p:not(.card-tag) { font-size: 15px; margin-bottom: 4px; }
.floor-info { padding: 4px 0 14px; }

/* estimate band */
.band-grid { align-items: center; }
@media (min-width: 1000px) { .band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; } .band-copy { position: static; } }
.band-copy h2 { margin-bottom: 16px; }
.band-copy .section-lead { font-size: 17px; color: #D6E0EA; max-width: 46ch; }
.section-band .calc { padding: 24px; border-radius: 16px; }
.calc legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc-step-label { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.calc-progress { margin-bottom: 18px; background: #E6E1D7; }
.choice-hidden { display: none !important; }
.choice span { padding: 14px; }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.calc-nav { margin-top: 18px; }
.calc-nav .btn-primary { flex: 1; min-height: 52px; background: var(--ink); }
.calc-nav .btn-primary:hover { background: #000; box-shadow: none; }
.calc-open { width: 100%; background: #fff; color: var(--ink); border: 0; min-height: 52px; margin-top: 4px; }
@media (max-width: 899px) {
  #estimate:not(.calc-opened) .calc { display: none; }
  #estimate.calc-opened .calc-open { display: none !important; }
  .band-grid { gap: 14px; }
  .band-copy h2 { font-size: 28px; line-height: 1.1; }
  .band-copy .section-lead { font-size: 15px; }
}

/* gallery: tall photo on the left, four 220px photos, as designed */
.gallery { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gallery img { aspect-ratio: auto; height: 220px; border-radius: var(--radius); }
.gallery figure { border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .gallery figure:first-child { grid-column: auto; grid-row: span 2; }
  .gallery figure:first-child img { height: 100%; min-height: 456px; }
}
@media (max-width: 899px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery figure:first-child { grid-column: span 2; }
  .gallery figure:first-child img { height: 200px; aspect-ratio: auto; }
  .gallery img { height: 140px; }
  .gallery figure:nth-child(n+4) { display: none; }
  .gallery figcaption { display: none; }
}

/* how it works on sand */
.section-sand { background: var(--sand); }
.steps h3 { font-size: 18px; }
.steps p { font-size: 15px; color: var(--body-ink); }

/* service area chips */
.duo-area .area-list li { border-color: #CFC9BD; font-size: 14px; padding: 6px 12px; }
.duo-area .section-lead { margin-bottom: 20px; }

/* contact card: title inside, as designed */
.lead-form { border-radius: 20px; padding: clamp(24px, 4vw, 40px); }
.lead-form .form-title { font-size: 28px; letter-spacing: -.01em; margin: 0 0 6px; }
.lead-form .form-lead { font-size: 15px; margin-bottom: 18px; }
.tabs { background: var(--bg); }
.tab span { font-size: 14px; }
.lead-form #leadSubmit { min-height: 54px; font-size: 17px; }

/* phones: services slide sideways with photo, title and one line */
@media (max-width: 699px) {
  #services .section-head .section-lead { display: none; }
  .services .floor-card { flex: 0 0 250px; }
  .floor-card .card-media { height: 140px; }
  .services .card-tag, .services .floor-info { display: none; }
  .floor-card > :not(.card-media) { margin-left: 16px; margin-right: 16px; }
  .floor-card h3 { margin-top: 16px; font-size: 20px; margin-bottom: 4px; }
  .floor-card > p:not(.card-tag) { font-size: 14px; margin-bottom: 16px; }
}
.lang-desktop { order: 0 !important; }
@media (max-width: 899px) { .hero-points li:nth-child(3) { display: flex; } .hero-points li:nth-child(2) { display: none; } }

/* ================= reviews ================= */
.stars { --pct: 100%; display: inline-block; width: max-content; align-self: flex-start; font-size: 1.15rem; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(90deg, var(--oak) var(--pct), #C9C1B3 var(--pct)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars::before { content: '\2605\2605\2605\2605\2605'; }
.rating-summary { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.rating-avg { grid-row: 1 / span 2; font-family: var(--head); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rating-summary .stars { font-size: 1.3rem; }
.rating-count { color: var(--muted); font-size: .9rem; }
.reviews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px; margin: 0; }
.review blockquote { margin: 0; color: var(--body-ink); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.review-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.review-photos button { padding: 0; border: 0; background: var(--sand); border-radius: 8px; overflow: hidden; cursor: zoom-in; aspect-ratio: 1; }
.review-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.review-photos button:hover img { transform: scale(1.06); }
.review footer { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.review footer strong { color: var(--ink); font-weight: 600; }
.review-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft);
  color: var(--accent-dark); font-weight: 600; border: 1px solid var(--accent-line); }
.reviews-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }
#reviewsEmpty { text-align: center; margin: 0; }
#reviews .empty:not([hidden]) + .reviews-actions { margin-top: 16px; }

/* review form */
.review-modal .modal-body { padding-top: 26px; }
.review-modal h3 { padding-right: 40px; }
.star-input legend { font-family: var(--body); font-size: .95rem; font-weight: 500; margin-bottom: 4px; }
.star-pick { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 10px; }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { cursor: pointer; font-size: 2.3rem; line-height: 1; color: var(--line); padding: 2px; transition: color .15s, transform .15s; }
.star-pick label::before { content: '\2605'; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: var(--oak); }
.star-pick label:hover { transform: scale(1.12); }
.star-pick input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.photo-drop { display: block; margin-top: 7px; cursor: pointer; }
.photo-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photo-drop span { display: flex; align-items: center; justify-content: center; min-height: 64px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--accent-dark); font-weight: 500; background: var(--bg); transition: border-color .2s, background .2s; }
.photo-drop:hover span, .photo-drop input:focus-visible + span { border-color: var(--accent); background: var(--accent-soft); }
.photo-previews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.photo-previews:empty { display: none; }
.photo-previews div { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--sand); }
.photo-previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-previews button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(24, 33, 43, .75); color: #fff; font-size: 1rem; line-height: 1; }
.review-modal .field textarea { resize: vertical; }
.field.invalid textarea { border-color: var(--danger); }

/* full-size photo viewer */
.photo-viewer { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: visible; }
.photo-viewer::backdrop { background: rgba(18, 26, 36, .85); }
.photo-viewer img { display: block; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); border-radius: 12px; }
html:has(.photo-viewer[open]) { overflow: hidden; }
@media (max-width: 600px) {
  .reviews { grid-template-columns: 1fr; gap: 12px; }
  .review { padding: 18px; }
  .rating-avg { font-size: 2.4rem; }
}
/* menu has 5 links since "Reviews" was added: keep each on one line */
@media (min-width: 900px) { .nav a { white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1199px) { .nav { gap: 16px; } .nav a { font-size: .88rem; } .lang-switch { margin-left: 4px; } }