/* ==========================================================================
   Interiors of Idaho — "Mountain Lodge" refinement layer (release 2026-09-30)
   Loaded LAST on every page (see ../apply_design.py). CSS only; decorative
   SVGs live in /assets/design/. No data: URIs, no inline styles (CSP).
   Warm linen base, logo navy + logo orange only, three navy moments on the
   home page (hero, "Why Interiors of Idaho", "Who we are") plus the navy
   "A small first step" panel on Guide pages, rounded inset panels, a
   solid ridge-and-sun divider used sparingly, snow-capped range in the footer.
   Headings are typed in sentence case in the HTML; only H1s are set in caps.
   ========================================================================== */

:root{
  --navy:#08263f;
  --ink:#12304a;
  --linen:#f7f2e9;
  --paper:#f7f2e9;
  --sand:#efe5d4;
  --card:#fffcf6;
  --line:#e3d8c6;
  --line-strong:#cdbfa9;
  --field-line:#857560;     /* form field edges: 4.4:1 on card, 3.6 on sand, 4.0 on linen (WCAG 1.4.11) */
  --muted:#56626a;
  --burnt:#a63d11;          /* deep orange for SMALL text on linen (5.7:1): step labels, stars, proof numbers */
  --accent-display:#c85025; /* logo ribbon orange for LARGE display accents: 4.1:1 linen, 4.4 card, 3.6 sand */
  --orange:#ef7028;         /* logo orange: fills, ticks, sun (5.2:1 on navy) */
  --on-navy:#c9d4dc;        /* body text on navy: 10.3:1 */
  --on-navy-accent:#ffa062; /* focus/labels on navy: 7.7:1 */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;
  --shadow:0 1px 2px rgb(74 52 26 / .06),0 14px 34px -18px rgb(74 52 26 / .32);
  --shadow-lg:0 2px 4px rgb(40 30 20 / .06),0 30px 60px -30px rgb(20 30 45 / .45);
  --gutter:clamp(16px,3.2vw,44px);
  --ridge:url('/assets/design/ridge.svg');
  --ridge-h:52px;
  --foot-ridge-h:clamp(112px,9.05vw,240px);
}

body{background:var(--linen);color:var(--ink)}

/* ---------- Focus: visible on linen and on navy ---------- */
:focus-visible{outline:3px solid var(--burnt);outline-offset:3px}
.hero :focus-visible,.why-ioi :focus-visible,.layered .about :focus-visible,.guide-quiz :focus-visible,footer :focus-visible,.analytics-footer :focus-visible{outline-color:var(--on-navy-accent)}
.mobile-cta :focus-visible{outline:3px solid var(--navy);outline-offset:-5px}

/* ---------- Type: condensed caps only for H1 + small labels ---------- */
h1,h2,h3{color:inherit;text-wrap:balance}
h1{text-transform:uppercase;letter-spacing:.2px}
em{color:inherit}
.hero h1 em{color:var(--orange)}
.page-intro h1 em,.guide-hub-intro h1 em,.guide-text-hero h1 em,.guide-story-hero h1 em,.studio-main h1 em{color:var(--accent-display)}

/* Labels: logo navy, with a short logo-orange tick on section labels. */
.eyebrow,.guide .eyebrow,.review-card .eyebrow,.guide-quiz .eyebrow{text-wrap:balance;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;color:var(--navy)}
.hero .eyebrow,.why-ioi .eyebrow,.layered .about .eyebrow,.guide .guide-quiz .eyebrow{color:#e5e9e9}
.section-heading .eyebrow::before,.study-heading .eyebrow::before,.why-ioi>div>.eyebrow::before,.team-editorial .eyebrow::before,.faq>div>.eyebrow::before,.contact-copy .eyebrow::before,.page-intro>.eyebrow::before,.owners-intro .eyebrow::before,.chapter-title .eyebrow::before,.service-proof>.eyebrow::before,.team-story>.eyebrow::before,.guide-hub-intro>.eyebrow::before,.guide-text-hero>.eyebrow::before,.guide-story-hero>div>.eyebrow::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--orange);vertical-align:middle;margin:0 10px 2px 0}
.steps span{font-weight:700;letter-spacing:.08em}

/* Section headings: one size, one colour, sentence case as typed. */
.section-heading h2,.study-heading h2,.faq h2,.contact h2,.team-editorial h2,.about-copy h2,.why-ioi h2,.owner-invite h2,.team-story h2,.chapter-title h2,.project-next h2,.owner-feature h2,.owner-partner h2,.real-gallery>h2,.service-proof h2{font-size:clamp(32px,3.4vw,48px);line-height:1.06;letter-spacing:0;color:var(--navy);text-transform:none}
.section-heading h2 em,.faq h2 em,.contact h2 em,.study-heading h2 em,.team-editorial h2 em{color:inherit}
.start-callout h3{font-size:clamp(25px,2.2vw,30px);line-height:1.1;color:var(--navy)}

.article-body h2{font-size:clamp(27px,2.4vw,32px);line-height:1.15;color:var(--navy)}
.service-guide .article-body h3{font-size:23px;color:var(--navy)}
.service-card h3{font-size:clamp(34px,3.2vw,42px);color:var(--navy)}
.steps h3,.why-points h3,.process-detail h3{font-size:clamp(24px,2vw,27px);line-height:1.12}
.process-detail h3{color:var(--navy)}
.note-card h3{font-size:clamp(25px,2.1vw,29px);line-height:1.12}
.review-card blockquote{font-size:clamp(22px,1.9vw,25px);line-height:1.28;color:var(--navy)}
.review-summary strong{font-size:56px;color:var(--navy)}
/* Real Manrope weights (variable 200–800): names and labels read as bold. */
.review-card figcaption strong,.team-story strong,legend,.questions summary{font-weight:700}
.team-story p strong{white-space:nowrap}
.form-grid label,form>label{font-weight:600}

/* Starting-point questionnaire: the question is a display heading, not body copy. */
.discovery-shell legend{line-height:1.1;color:var(--navy);text-wrap:balance}

/* 404: a short page without header/footer; close it with the ridge mark. */
.studio-main::after{content:"";display:block;width:min(420px,86%);height:var(--ridge-h);margin-top:48px;background:var(--ridge) left center/contain no-repeat}

/* ---------- Buttons ---------- */
.button{border-radius:12px}
.button:focus-visible{outline-offset:4px}
.header-cta{border-radius:12px;border-color:var(--line-strong);background:transparent}
.header-cta:hover{background:var(--sand)}
.menu-toggle{border-radius:12px;background:transparent!important;border-color:var(--line-strong)!important;color:var(--navy)}

/* ---------- Header: light lodge bar, navy type ---------- */
.header{background:#fbf8f2;border-bottom:1px solid var(--line);color:var(--navy)}
.brand img{mix-blend-mode:multiply}
.header nav a{color:var(--navy)}
@media(max-width:1000px){
  .header nav{background:#fbf8f2!important;border-radius:0 0 18px 18px;border:1px solid var(--line);border-top:0}
  .header nav a{border-bottom-color:var(--line)!important}
  /* Menu label and icon on one line instead of stacked in a 45px box. */
  .menu-toggle{flex-direction:row!important;gap:6px!important;padding:0 12px;min-height:44px;font-weight:600}
  .menu-toggle span{font-size:16px;line-height:1}
}

/* ---------- Home hero: navy moment #1, inset + rounded ---------- */
.hero{margin:18px var(--gutter) 0;border-radius:var(--r-xl);overflow:hidden;gap:0;background:var(--navy);box-shadow:var(--shadow-lg);isolation:isolate}
.hero-copy{background-color:var(--navy);background-image:url('/assets/design/hero-range.svg');background-repeat:no-repeat;background-position:center bottom;background-size:100% auto}
.hero-bottom{border-top-color:rgb(255 255 255 / .16)}
@media(min-width:761px){.hero-intro{font-size:clamp(18px,1.55vw,21px)}}
.hero-photo.inspiration-hero{border-radius:0}
/* "BOISE / FLOORING & / REMODELING." — sized to the width of the copy column
   so the longest line ("REMODELING.", ~4.7em) always fits inside the panel. */
.hero h1.hero-title-seo{font-size:clamp(54px,7.7vw,108px);line-height:.98;letter-spacing:0;overflow-wrap:anywhere;hyphens:auto}

/* Proof strip becomes a soft card under the hero. */
.proof-strip{margin:18px var(--gutter) 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px clamp(20px,4vw,52px)}
.proof-strip>p{border-left-color:var(--line)}
.proof-strip strong span{color:var(--burnt)}

/* ---------- Flatten the old colour bands onto linen ---------- */
.proof-section,.layered .proof-section,.reviews,.notes,.selected-work,.comparison-study,.inspiration,.study-section,.gallery-ivory,.service-photographs,.work-chapter,.work-chapter:nth-of-type(odd){background:transparent}

/* ---------- Ridge divider: solid peaks + sun, used sparingly ----------
   Home: 3 (before Our work, Reviews, FAQ). Inner pages: 1, after the intro. */
.layered .proof-section,.layered .reviews,.layered .faq{position:relative}
.layered .proof-section::before,.layered .reviews::before,.layered .faq::before{content:"";position:absolute;top:calc(var(--ridge-h) / -2);left:50%;transform:translateX(-50%);width:min(620px,86%);height:var(--ridge-h);background:var(--ridge) center/contain no-repeat;pointer-events:none}
.page-intro+.article-body::before,.service-opening+.article-body::before,.owners-intro+.team-story::before,.page-intro+.work-chapter::before{content:"";display:block;width:min(620px,86%);height:var(--ridge-h);margin:0 auto 40px;background:var(--ridge) center/contain no-repeat;pointer-events:none}
/* Guide articles: the ridge hangs just below the intro panel (the reading area is a grid). */
.guide-text-hero,.guide-story-hero{position:relative}
.guide-text-hero::after,.guide-story-hero::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 26px);width:min(620px,86%);height:var(--ridge-h);background:var(--ridge) center/contain no-repeat;pointer-events:none}
.guide-story-hero::after{top:calc(100% - var(--ridge-h) - 28px)}
.guide-text-hero{margin-bottom:calc(var(--ridge-h) + 72px)}
.guide-story-hero{padding-bottom:calc(var(--ridge-h) + 56px)}
.guide-text-hero+.glossary-entries>h2:first-child{border-top:0;margin-top:0}

/* ---------- Photos: soft radii ---------- */
.study-photo,.rail-photo,.photo-frame,.home-owners img,.project-tile img,.owner-feature img,.team-pair img,.process-photo,.work-study-image{border-radius:var(--r-lg);overflow:hidden}
.study-photo{box-shadow:var(--shadow)}
.rail-photo{border-radius:var(--r)}
.collection-photo{border-radius:var(--r);overflow:hidden}
.collection-photo img{border-radius:var(--r)}
.layered .proof-side{border-color:var(--linen)!important;border-radius:24px}
.work-rail-wrap{border-top-color:var(--line)}
.rail-controls button{border-radius:50%;border-color:var(--line-strong);color:var(--navy)}

/* ---------- Services: two soft cards ---------- */
.service-grid{border:0;gap:24px}
.service-grid .service-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.service-card li{border-bottom-color:var(--line)}
.service-number{border-top-width:2px;color:var(--accent-display);font-weight:700}

/* ---------- Rounded inset panels ---------- */
.why-ioi,.layered .about,.contact,.owner-invite,.project-next{margin-left:var(--gutter);margin-right:var(--gutter);border-radius:var(--r-xl);color:var(--ink);padding:clamp(44px,6vw,76px) clamp(22px,5.5vw,72px)}

/* Home "Why Interiors of Idaho": navy moment #2 — an inset panel like the hero. */
.why-ioi{background-color:var(--navy);background-image:url('/assets/design/panel-range.svg');background-repeat:no-repeat;background-position:center bottom;background-size:100% clamp(64px,8vw,112px);color:#fff;box-shadow:var(--shadow-lg);margin-top:8px;margin-bottom:8px}
.why-ioi h2,.why-ioi h3{color:#fff}
.why-points p{color:var(--on-navy)}
.why-points article+article{border-top-color:rgb(255 255 255 / .16)}
.why-points a{color:#fff;text-decoration-color:var(--orange);text-decoration-thickness:2px}
.why-points a:hover{color:var(--on-navy-accent)}

/* Home "Who we are": navy moment #3, splitting the long light run between Why and the footer. */
.layered .about{background:var(--navy);border:0;color:#fff;box-shadow:var(--shadow-lg);margin-top:24px;margin-bottom:24px}
.team-editorial{border-top:0;padding-top:0}
.layered .about h2{color:#fff}
.about-copy p:not(.eyebrow){color:var(--on-navy)}
.about-copy .text-link{color:#fff;border-bottom:2px solid var(--orange)}
.about-copy .text-link:hover{color:var(--on-navy-accent)}

.contact{background:var(--sand);margin-bottom:0}
.contact-copy>p:not(.eyebrow){color:var(--muted)}
.contact-links a{color:var(--navy)}
.contact-links span{color:var(--burnt)}

.owner-invite{background:var(--sand);margin-bottom:0}
@media(min-width:761px){.owner-invite{width:min(900px,calc(100% - 2 * var(--gutter)));margin-left:auto;margin-right:auto}}
.owner-invite p{color:var(--ink)}
.team-reach{border-top-color:var(--line-strong)}
.team-reach a{color:var(--navy)}

.project-next{background:var(--sand);margin-bottom:0}

/* ---------- Forms: warm white card, rounded fields ---------- */
.contact #project-form,.team-inquiry #project-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}
.form-note,.team-inquiry .form-note{background:#f6efe3;color:var(--ink);border-radius:var(--r-sm)}
#project-form>button+.form-note{background:transparent;padding:0;color:var(--muted);margin:14px 0 0}
legend,form>label,.form-grid label{color:var(--ink)}
input:not([type=radio]):not([type=checkbox]),textarea,select{border-radius:12px;border:1px solid var(--field-line);background:#fff;color:var(--ink)}
input:not([type=radio]):not([type=checkbox]):focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--navy);outline:3px solid var(--burnt);outline-offset:2px}
.service-choices span{border-radius:12px;border:1px solid var(--field-line);background:#fff;color:var(--ink)}
.service-choices input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.service-choices input:focus-visible+span{outline:3px solid var(--burnt);outline-offset:3px}
.discovery-options span{border-radius:var(--r)}
.discovery-contact input:not([type=checkbox]),.discovery-contact select,.discovery-contact textarea{border-radius:12px;border:1px solid var(--field-line)}

/* ---------- Process ---------- */
.steps{border-top-color:var(--line)}
.start-callout{background:var(--sand);border-radius:var(--r-lg)}
.start-callout .button{font-size:15px}
.process-detail{border-top-color:var(--line)}

/* ---------- Reviews + notes as soft cards ---------- */
.review-card{background:var(--card);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.service-guide .review-card{background:var(--card);border-radius:var(--r-lg)}
.service-guide .service-proof .review-grid figure+figure{margin-top:0}
.service-guide .review-card blockquote{font-size:20px;line-height:1.32;margin:12px 0 16px}
/* Proof photos: whole photograph, rounded corners, no grey letterbox. */
.service-proof .photo-frame{border-radius:0;overflow:visible;background:transparent}
.service-proof .photo-frame img{width:auto;max-width:100%;margin:0 auto;border-radius:var(--r-lg);background:transparent;box-shadow:var(--shadow)}
.note-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 28px 26px;box-shadow:var(--shadow)}
.note-index{font-size:30px;margin-bottom:14px;color:var(--accent-display)}

/* ---------- FAQ in a soft card ---------- */
.questions{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px clamp(18px,2.5vw,30px);box-shadow:var(--shadow)}
.questions details{border-bottom-color:var(--line)}
.questions details:last-child{border-bottom:0}

/* ---------- Inner-page intros: linen, navy type, soft range ---------- */
.page-intro,.owners-intro{background-color:var(--linen);color:var(--ink)}
.page-intro.discovery-intro{background-image:url('/assets/design/intro-range.svg');background-repeat:no-repeat;background-position:right bottom;background-size:min(620px,62%) auto}
.page-intro h1,.owners-intro h1{color:var(--navy)}
.page-intro>p:not(.eyebrow),.owners-intro>p:last-child{color:#34495a}
.page-intro .article-date{color:var(--muted)}
.page-intro .back-link{color:var(--navy)}
.collection-nav a{color:var(--navy)}
/* Service openings: text beside a rounded, lifted photograph. */
.service-opening:not(.no-photo)>.page-intro{background-image:none}
.service-guide .service-photo-intro .photo-frame{box-shadow:var(--shadow-lg);border-radius:22px}

/* ---------- Articles ---------- */
.takeaway{background:var(--sand);border-left:0;border-radius:var(--r-lg);position:relative;padding-left:clamp(26px,3vw,36px)}
.takeaway::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:4px;border-radius:0 4px 4px 0;background:var(--orange)}
.article-sources{border-top-color:var(--line)}
.service-proof{border-top-color:var(--line)}
.article-contact{background:var(--sand);border-top:0;border-radius:var(--r-xl);padding:clamp(26px,4vw,40px)}
.article-contact .button+p{margin-top:14px}

/* ---------- Team page ---------- */
aside.team-story .eyebrow{font-size:12px}
aside.team-story{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);width:min(900px,calc(100% - 2 * var(--gutter)));padding:clamp(28px,4vw,44px);margin:0 auto 72px}

/* ---------- Projects ---------- */
.chapter-title{border-top:0;padding-top:0}
.collection-more{border-color:var(--line-strong)}
.project-filters button{border-radius:999px}

/* ---------- Remodeling Guide pages: same soft panels ---------- */
.guide-pair,.guide-quiz{margin-left:var(--gutter);margin-right:var(--gutter);border-radius:var(--r-xl)}
.guide-pair{background:var(--sand)}
.guide-pair article+article{border-color:var(--line-strong)}
.guide-quiz{background:var(--navy);color:#fff;box-shadow:var(--shadow-lg)}
.guide-quiz h2{color:#fff}
.guide-quiz p:not(.eyebrow){color:var(--on-navy)}
.guide .note-card{background:var(--card);border:1px solid var(--line);padding:26px 26px 24px}
.guide .note-card h3{font-size:clamp(25px,2.1vw,29px)}
.guide-text-hero,.guide-note{border-radius:var(--r-lg)}
.guide-text-hero{background:var(--sand);margin-left:var(--gutter);margin-right:var(--gutter);margin-top:18px;border-radius:var(--r-xl)}
.guide-note{background:var(--sand)}
th{background:var(--sand)}
.guide-feature img,.guide-feature .photo-frame{border-radius:var(--r-lg)}
.guide-photo img{border-radius:var(--r-lg)}
.table-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.table-wrap table{border-collapse:separate;border-spacing:0}
.table-wrap tr:last-child>*{border-bottom:0}
@media(min-width:761px){
  .guide-planning .notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-planning .note-card h3{min-height:0}
  .guide-story-hero h1{font-size:clamp(40px,5.2vw,72px)}
}
/* One-column guide reading area: guide-editorial's 6% gap would become a row gap that
   Chrome leaves out of the grid height, pushing the side panel into the next section. */
@media(max-width:700px){.guide-reading{row-gap:0}}

/* ---------- Footer: navy, a snow-capped range + sun rising into it ---------- */
footer{background:var(--navy);color:#e8edf1;position:relative;margin-top:calc(var(--foot-ridge-h) + 48px);padding-top:40px}
footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--foot-ridge-h);background:url('/assets/design/footer-range.svg') center bottom/100% 100% no-repeat;pointer-events:none}
footer a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-name span,footer>p{color:var(--on-navy)}
.footer-name span{font-size:11px;letter-spacing:.14em}
.footer-local{border-top-color:rgb(255 255 255 / .14)}
.footer-local strong{color:var(--on-navy-accent)}
.footer-local p{color:#d6dee4}
.footer-bottom{border-top-color:rgb(255 255 255 / .14);color:#aebdc8}
.analytics-footer{background:var(--navy);border-top:1px solid rgb(255 255 255 / .08)}

/* Consent panel matches the softer shapes. */
.analytics-choice{border-radius:var(--r-lg)}
.analytics-choice-actions button{border-radius:12px}

/* ---------- Tablet ---------- */
@media(max-width:1100px) and (min-width:761px){
  .hero-copy{padding-left:7%;padding-right:7%}
}

/* ---------- Phones ---------- */
@media(max-width:760px){
  :root{--ridge-h:32px;--foot-ridge-h:62px}
  /* Header: a little shorter, menu label + icon on one line. */
  .header{height:84px;gap:12px}
  .brand,.brand img{width:78px}
  .header-cta{min-height:44px}

  .hero{margin-top:12px;border-radius:22px}
  .hero-photo.inspiration-hero{aspect-ratio:16/10}
  .hero-copy{padding-top:28px}
  .hero .eyebrow{margin-bottom:16px}
  /* Copy column ≈ 88% of (viewport − 2 gutters); "REMODELING." ≈ 4.7em. */
  .hero h1.hero-title-seo{font-size:clamp(46px,16vw,84px)}
  .hero-intro{margin-top:18px}

  .proof-strip{margin-top:14px;padding:18px 18px}
  .why-ioi,.layered .about,.contact,.owner-invite,.project-next{border-radius:22px;padding:44px 20px}
  .why-ioi{padding-bottom:72px}
  .contact{padding-bottom:44px}
  .contact #project-form,.team-inquiry #project-form{padding:0;background:transparent;border:0;box-shadow:none}
  .contact{padding-left:16px;padding-right:16px}
  .section-heading h2,.study-heading h2,.faq h2,.contact h2,.team-editorial h2,.about-copy h2,.why-ioi h2,.owner-invite h2,.team-story h2,.chapter-title h2,.project-next h2,.owner-feature h2,.owner-partner h2,.real-gallery>h2,.service-proof h2{font-size:34px}
  .service-grid{gap:18px}
  .note-card{padding:24px 20px}
  .notes-grid{gap:18px}
  .questions{padding:0 18px}
  /* Inquiry form: service chips keep their labels on one line and wrap as whole chips. */
  .service-choices{flex-wrap:wrap}
  .service-choices label{flex:1 1 auto}
  .service-choices span{white-space:nowrap;padding:12px 10px;font-size:12px}

  /* Inner pages: smaller H1s so the photo / owners show on the first screen. */
  .page-intro,.owners-intro,.service-guide .service-opening.no-photo>.page-intro{background-image:none}
  .page-intro,.owners-intro{padding-top:30px;padding-bottom:30px}
  .page-intro h1,.owners-intro h1,.service-guide .page-intro h1,.guide h1,.guide-text-hero h1,.guide-story-hero h1{font-size:clamp(34px,10.5vw,44px);line-height:1.02;letter-spacing:0;margin:14px 0 14px}
  .page-intro>p:not(.eyebrow),.owners-intro>p:last-child{font-size:17px;line-height:1.55}
  .page-intro .back-link{margin-bottom:14px}
  .service-crumbs{padding-top:18px}
  .service-guide .page-intro{padding-top:22px;padding-bottom:26px}
  .service-guide .page-intro .button{margin-top:18px}
  .service-guide .service-opening:not(.no-photo)>.page-intro{padding-bottom:24px}
  .page-intro+.article-body::before,.service-opening+.article-body::before,.owners-intro+.team-story::before,.page-intro+.work-chapter::before{margin-bottom:20px}
  .guide-text-hero{margin-top:12px;border-radius:22px;margin-bottom:calc(var(--ridge-h) + 44px)}
  .guide-text-hero::after{top:calc(100% + 20px)}
  .guide-story-hero{padding-bottom:calc(var(--ridge-h) + 40px)}
  .guide-story-hero::after{top:calc(100% - var(--ridge-h) - 16px)}
  .page-intro+.article-body{padding-top:18px}
  .page-intro .article-date{margin-top:14px}
  .page-intro.article-intro{padding-bottom:22px}
  .owners-intro+.team-story{padding-top:8px}

  /* Kitchen care record worksheet: let the 5-column table scroll inside the page. */
  body>table{display:block;max-width:100%;overflow-x:auto}
  body:has(.analytics-footer){padding-bottom:0}
  .analytics-footer{padding-bottom:calc(16px + 56px + env(safe-area-inset-bottom))}
  footer{margin-top:calc(var(--foot-ridge-h) + 40px)}

  /* Keyboard focus scrolled into view stays above the fixed call bar (WCAG 2.4.11). */
  html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  /* Mobile call bar: white "Call" half + orange CTA, lifted off navy areas. */
  .mobile-cta{background:#fff;border-top:1px solid var(--line-strong);box-shadow:0 -10px 24px -6px rgb(8 38 63 / .28)}
  .mobile-cta a{color:var(--navy);display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px 6px;box-sizing:border-box;line-height:1.2}
  .mobile-cta a+a{background:var(--orange);color:var(--navy)}
}
@media(max-width:360px){
  /* The fixed call bar already carries "Start your project"; keep the header on one line. */
  .header-cta{display:none}
  .menu-toggle{margin-left:auto}
  .mobile-cta a{font-size:14px;letter-spacing:-.1px}
}

/* ---------- Print: no decorative ranges or ridges ---------- */
@media print{
  .layered .proof-section::before,.layered .reviews::before,.layered .faq::before,.page-intro+.article-body::before,.service-opening+.article-body::before,.owners-intro+.team-story::before,.page-intro+.work-chapter::before,.guide-text-hero::after,.guide-story-hero::after,.studio-main::after,footer::before{display:none!important}
  .guide-text-hero{margin:0}
}

/* Kitchen care record worksheet: keep "Back to the care guide" on one line. */
div.controls a{white-space:nowrap}

/* ---------- Quick wins (release 2026-09-30) ---------- */
/* Desktop header: click-to-call beside "Start your project". Phones keep the bottom call bar. */
.header-phone{flex-shrink:0;white-space:nowrap;padding:12px 0;font-size:15px;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:6px}
.header-phone:hover{color:var(--burnt)}
/* With the phone added, the desktop header keeps its compact (≤1100px) type up to 1240px,
   with slightly tighter gaps, so the menu and buttons never wrap. */
@media(max-width:1240px) and (min-width:1001px){.header{gap:16px}.header nav{gap:14px;font-size:13px}.header-cta{font-size:12px}}
@media(max-width:1240px){.header-phone{font-size:13px}}
@media(max-width:1000px) and (min-width:761px){.header-phone{margin-left:auto;font-size:15px}.header-phone+.header-cta{margin-left:0}}
@media(max-width:760px){.header-phone{display:none}}

/* Trust line under the H1: rating links to the Google reviews (same figures as the home proof strip). */
.trust-line,.page-intro>p.trust-line{font-size:15px;line-height:1.5;color:var(--muted);max-width:none;text-wrap:balance}
.trust-line a{white-space:nowrap;color:var(--navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.trust-line a:hover{text-decoration-color:currentColor}
.trust-line a>span{color:var(--burnt)}
.hero .trust-line{color:var(--on-navy);margin-top:18px}
.hero .trust-line a{color:#fff;text-decoration-color:var(--orange)}
.hero .trust-line a>span{color:var(--orange)}
.page-intro>p.trust-line+p{margin-top:12px}

/* Home proof strip: the two owners' faces inside "Your team". */
.proof-strip>a.proof-team{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.proof-strip>a.proof-team .proof-faces{grid-row:1 / span 2;display:flex;margin:0}
.proof-faces img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line-strong)}
.proof-faces img+img{margin-left:-10px}
/* Tablet and phone: the cell is narrow, so the faces sit above the label. */
@media(max-width:1000px){.proof-strip>a.proof-team{grid-template-columns:minmax(0,1fr)}.proof-strip>a.proof-team .proof-faces{grid-row:auto;margin-bottom:8px}}

/* Who we are: two owner cards under "Meet the owners." (stacked on phones by team.css). */
.team-story .team-pair{max-width:760px;margin:0 0 30px;padding:0;gap:24px}
.owner-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 12px 20px}
.owner-card picture{display:block}
.team-pair .owner-card img{border-radius:var(--r)}
.owner-card h3{font-size:clamp(25px,2.1vw,29px);line-height:1.12;color:var(--navy);margin:18px 8px 0}
.team-story .owner-card .owner-title{color:var(--burnt);font-size:16px;font-weight:700;margin:6px 8px 0}

/* One real homeowner excerpt beside the closing call to action (copied from the home page). */
.article-contact>.review-card,.project-next>.review-card{margin-top:28px}
.article-contact>p:has(+.review-card){font-size:14px;overflow-wrap:anywhere}
@media(min-width:900px){
  .article-contact:has(>.review-card),.project-next:has(>.review-card){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(4,auto) 1fr;column-gap:clamp(28px,4vw,48px)}
  .article-contact:has(>.review-card)>:not(.review-card),.project-next:has(>.review-card)>:not(.review-card){grid-column:1;justify-self:start}
  .article-contact:has(>.review-card)>.review-card,.project-next:has(>.review-card)>.review-card{grid-column:2;grid-row:1 / -1;align-self:center;margin:0}
}

@media(max-width:760px){
  /* First-visit privacy sheet sits above the fixed call bar (56px links + 1px border),
     so "Call" and "Start your project" stay visible and tappable while it is open. */
  .mobile-cta~.analytics-choice{bottom:calc(57px + 10px + env(safe-area-inset-bottom));max-height:calc(100% - 57px - 20px - env(safe-area-inset-bottom));padding:18px 20px 16px}
  .mobile-cta~.analytics-choice h2{font-size:24px;margin-bottom:8px}
  .mobile-cta~.analytics-choice p{font-size:14px;line-height:1.5}
  .mobile-cta~.analytics-choice .analytics-choice-actions{margin:14px 0 10px}
}