/* ==========================================================================
   M&M Rendering & Plastering Ltd — Phase 1 website stylesheet
   Built from the approved M&M design system (tokens, components, guidelines).
   Structured for straightforward transfer to Elementor + Blocksy (Free):
   flat, reusable class names, no framework dependency, standard box model.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&family=Inter:wght@400;500;600;700;900&family=Cal+Sans&display=swap');

/* TEMP PREVIEW — Cal Sans swapped in for headings only, to compare against Manrope. It IS on
   Google Fonts (corrected — it isn't a third-party CDN font), loaded in the @import above.
   Note: Google only ships one static weight for it, so headings set to font-weight:800 will
   render as the browser's synthetic/faux bold rather than a true bold cut — expected for this
   font, not a bug. Falls back to Manrope if it ever fails to load. Easy to remove: change
   --font-display back to just 'Manrope',... below and drop &family=Cal+Sans from the import. */

/* ---- Design tokens (source of truth: mm-design-system) ---- */
:root{
  --mm-ink:#141719;
  --mm-canvas:#FFFFFF;
  --mm-canvas-soft:#F4F5F2;
  --mm-primary:#B8D936;
  --mm-primary-hover:#C7E45A;
  --mm-primary-active:#A7C72D;
  --mm-primary-pale:#EFF6D3;
  --mm-secondary:#22A59A;
  --mm-tertiary:#2786C8;
  --mm-brand-gradient:linear-gradient(90deg,#B8D936 0%,#22A59A 52%,#2786C8 100%);
  --mm-text-ink:#141719;
  --mm-text-body:#53585A;
  --mm-text-mute:#7A7F81;
  --mm-border:#DADDD9;
  --mm-surface-dark-soft:#202527;
  --mm-positive:#2EAD4B;
  --mm-positive-deep:#145C2A;
  --mm-warning:#F5B82E;
  --mm-warning-content:#4A3710;
  --mm-negative:#D64747;
  --mm-negative-deep:#A62B2B;
  --mm-negative-bg:#FFF0F0;
  --text-on-dark:#FFFFFF;
  --text-on-dark-mute:#C7CBC7;

  --font-display:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;

  --display-mega-size:88px;  --display-mega-size-mobile:52px;  --display-mega-weight:800; --display-mega-lh:.95;
  --display-xxl-size:72px;   --display-xxl-size-mobile:46px;   --display-xxl-weight:800; --display-xxl-lh:.98;
  --display-xl-size:60px;    --display-xl-size-mobile:40px;    --display-xl-weight:800; --display-xl-lh:1.00;
  --display-lg-size:48px;    --display-lg-size-mobile:36px;    --display-lg-weight:800; --display-lg-lh:1.05;
  --display-md-size:46px;    --display-md-size-mobile:34px;    --display-md-weight:800; --display-md-lh:1.08;
  --display-sm-size:32px;    --display-sm-size-mobile:28px;    --display-sm-weight:700; --display-sm-lh:1.15;
  --display-xs-size:24px;    --display-xs-size-mobile:22px;    --display-xs-weight:700; --display-xs-lh:1.20;
  --body-lg-size:20px; --body-lg-size-mobile:18px; --body-lg-weight:400; --body-lg-lh:1.55;
  --body-md-size:16px; --body-md-weight:400; --body-md-lh:1.55; --body-md-strong-weight:600;
  --body-sm-size:14px; --body-sm-weight:400; --body-sm-lh:1.50; --body-sm-strong-weight:600;
  --caption-size:12px; --caption-weight:500; --caption-lh:1.40;
  --button-md-size:16px; --button-md-weight:600; --button-md-lh:1.20;

  --space-xxs:2px; --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px;
  --space-xl:24px; --space-2xl:32px; --space-3xl:48px; --space-4xl:64px; --space-5xl:80px;
  --space-6xl:96px; --space-7xl:120px;
  --container-max:1280px; --container-wide-max:1440px; --content-max:760px; --content-max-wide:900px;
  --container-pad-desktop:32px; --container-pad-tablet:24px; --container-pad-mobile:20px;

  --radius-none:0px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --radius-2xl:24px; --radius-pill:9999px; --radius-full:9999px;
  --radius-swoop:clamp(28px, 3.5vw, 48px);
  --shadow-level3:0 12px 36px rgba(20,23,25,0.08);
  --border-level1:1px solid var(--mm-border);

  --ease:cubic-bezier(.4,0,.2,1);
  --header-h:76px;
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--body-md-size);
  font-weight:var(--body-md-weight);
  line-height:var(--body-md-lh);
  color:var(--mm-text-body);
  background:var(--mm-canvas);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--mm-ink);font-weight:800;letter-spacing:-.01em;}
/* TEMP PREVIEW — Cal Sans on H1/H2 only, everything else (H3–H6, nav/footer/labels using
   --font-display) is back to Manrope. Cal Sans has unusually tight built-in letter spacing as
   part of its design, so the shared -.01em above (tuned for Manrope) would make it look
   cramped/swashed together — reset to normal here for just these two. Remove this block to
   drop Cal Sans entirely. */
h1,h2{font-family:'Cal Sans','Manrope',ui-sans-serif,system-ui,sans-serif; letter-spacing:normal;}
p{margin:0;}
input,textarea,select,button{font-size:16px;}

/* Focus visibility (accessibility) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--mm-tertiary);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:12px; top:-60px; background:var(--mm-ink); color:#fff; padding:12px 18px;
  border-radius:var(--radius-sm); z-index:1000; transition:top .15s var(--ease); font-weight:600; font-size:14px;
}
.skip-link:focus{top:12px;}

/* ---- Layout ---- */
.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad-desktop);}
.container-wide{max-width:var(--container-wide-max); margin:0 auto; padding:0 var(--container-pad-desktop);}
.content-max{max-width:var(--content-max); margin-left:auto; margin-right:auto;}
@media (max-width:1024px){
  .container,.container-wide{padding:0 var(--container-pad-tablet);}
}
@media (max-width:640px){
  .container,.container-wide{padding:0 var(--container-pad-mobile);}
}

.section{padding:var(--space-6xl) 0;}
.section-lg{padding:var(--space-7xl) 0;}
.section-sm{padding:var(--space-4xl) 0;}
@media (max-width:1024px){
  .section{padding:var(--space-5xl) 0;}
  .section-lg{padding:var(--space-5xl) 0;}
}

/* ---- Homepage gap tightening — three specific spots flagged as having too much space
   between sections. Scoped to these exact homepage sections only, nothing else changes. ---- */
.transform-stack{padding-bottom:var(--space-2xl);}
.services-section{padding-top:var(--space-2xl);}
.reviews-section{padding-bottom:var(--space-2xl);}
.advice-section{padding-top:var(--space-2xl);}
.home-final-cta{padding-bottom:var(--space-2xl);}
@media (max-width:640px){
  .section{padding:var(--space-4xl) 0;}
  .section-lg{padding:var(--space-4xl) 0;}
  .section-sm{padding:var(--space-3xl) 0;}
  .hero-banner .hero-banner-service-area{display:none;}
  .transform-stack{padding-bottom:var(--space-lg);}
  .services-section{padding-top:var(--space-lg);}
  .reviews-section{padding-bottom:var(--space-lg);}
  .advice-section{padding-top:var(--space-lg);}
}
.section-soft{background:var(--mm-canvas-soft);}
.section-dark{background:var(--mm-ink); color:var(--text-on-dark);}
.section-dark .eyebrow{color:var(--mm-primary);}
.text-lime{color:var(--mm-primary-active);}
.section-dark .text-lime{color:var(--mm-primary);}
.section-dark p{color:var(--text-on-dark-mute);}
.section-dark h2,.section-dark h3,.section-dark h4{color:var(--text-on-dark);}

.grid{display:grid; gap:var(--space-2xl);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:1024px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.section-head-center{text-align:center; max-width:640px; margin:0 auto 40px;}
.section-head-center .btn{margin-top:22px;}

/* ---- Advice section — centered intro with scroll-nav arrows. The card row is
   fully boxed inside the normal .container width (same as every other section) —
   no edge bleed, so there's no viewport math for it to ever get out of sync with. ---- */
.advice-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:32px;}
.advice-head-text{max-width:640px;}
.advice-head-row--centered{display:block; margin-bottom:0;}
.advice-head-row--centered .advice-head-text{max-width:640px; margin-inline:auto; text-align:center;}
.advice-featured-row{display:flex; align-items:center; justify-content:space-between; gap:24px; margin:var(--space-xl) 0 18px;}
.advice-featured-row h3{margin:0; font-size:30px; line-height:1.1;}
.advice-featured-controls{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.advice-featured-view-all{min-height:40px; padding:9px 18px; font-size:14px; border-radius:14px;}
.advice-featured-counter{display:none; color:var(--mm-text-body); font-size:17px; font-weight:600; white-space:nowrap;}
.advice-card--desktop-only{display:none;}
.advice-scroll-nav{display:flex; gap:10px; flex:0 0 auto;}
.advice-scroll-btn{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:var(--border-level1); background:var(--mm-canvas);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.advice-scroll-btn svg{width:17px; height:17px; color:var(--mm-ink);}
.advice-scroll-btn:hover:not(:disabled){background:var(--mm-canvas-soft); border-color:var(--mm-ink);}
.advice-scroll-btn:disabled{opacity:.35; cursor:default;}
.advice-scroll-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:4px 0 14px 0;
  scrollbar-width:none;
}
.advice-scroll-track::-webkit-scrollbar{display:none;}
.advice-scroll-track .card-service{flex:0 0 320px; scroll-snap-align:start;}
@media (min-width:641px){
  .advice-card--desktop-only{display:block;}
}
@media (max-width:640px){
  .advice-section > .container{display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:12px; row-gap:0;}
  .advice-head-row,.advice-featured-row,.advice-featured-controls{display:contents;}
  .advice-head-text{grid-column:1 / -1; grid-row:1;}
  .advice-featured-view-all{grid-column:1 / -1; grid-row:2; justify-self:center; margin-top:20px;}
  .advice-featured-row h3{grid-column:1; grid-row:3; margin-top:48px;}
  .advice-featured-counter{display:block; grid-column:2; grid-row:3; margin-top:48px; font-size:14px;}
  .advice-scroll-nav{grid-column:3; grid-row:3; margin-top:48px;}
  .advice-scroll-track{grid-column:1 / -1; grid-row:4; margin-top:18px; width:100%;}
  .advice-head-row--centered .advice-head-text{max-width:100%;}
  .advice-featured-row h3{font-size:clamp(20px, 6.2vw, 28px);}
  .advice-scroll-nav{gap:8px;}
  .advice-scroll-btn{width:40px; height:40px;}
  .advice-scroll-track{gap:14px; margin-right:0; padding-right:0;}
  .advice-scroll-track .card-service{flex:0 0 86%;}
  .advice-scroll-track .card-service{display:flex; flex-direction:column;}
  .advice-scroll-track .card-service.advice-card--desktop-only{display:none;}
  .advice-scroll-track .card-body{display:flex; flex:1; flex-direction:column; min-height:230px; padding:20px 18px 20px;}
  .advice-scroll-track .card-body h3{font-size:var(--display-xs-size); line-height:1.1; margin:0 0 12px; min-height:52px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
  .advice-scroll-track .card-body p{font-size:16px; line-height:1.4; margin:0 0 18px; min-height:89.6px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;}
  .advice-scroll-track .card-link{margin-top:auto;}
}

/* ---- Manufacturer/brand approval strip ---- */
.brand-strip{background:#F4F5F1; padding-top:var(--space-2xl);}
.brand-strip-title{text-align:center; font-size:15px; font-weight:400; color:var(--mm-text-body); max-width:640px; margin:0 auto 28px;}
.brand-strip-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px 56px;}
.brand-logo-slot{display:flex; align-items:center; justify-content:center; height:40px;}
.brand-logo-slot img{max-height:100%; max-width:130px; width:auto; height:auto; object-fit:contain;}
.brand-logo-slot--prb-systems-limited{height:75px;}
.brand-logo-slot--prb-systems-limited img{max-height:none; height:75px;}
@media (max-width:640px){
  .brand-strip-logos{gap:28px 32px;}
  .brand-logo-slot{height:30px;}
  .brand-logo-slot img{max-width:100px;}
}
@media (max-width:640px){.brand-logo-slot--prb-systems-limited{height:75px;}.brand-logo-slot--prb-systems-limited img{height:75px; max-height:none;}}

/* ---- Typography helpers ---- */
.eyebrow{
  font-family:var(--font-body); font-size:14px; font-weight:900; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mm-text-mute); display:block; text-align:center; margin:0 0 var(--space-lg);
}
.h-mega{font-size:var(--display-mega-size); font-weight:var(--display-mega-weight); line-height:var(--display-mega-lh); text-align:center;}
.h-xxl{font-size:var(--display-xxl-size); font-weight:var(--display-xxl-weight); line-height:var(--display-xxl-lh); text-align:center;}
.h-xl{font-size:var(--display-xl-size); font-weight:var(--display-xl-weight); line-height:var(--display-xl-lh);}
.h-lg{font-size:var(--display-lg-size); font-weight:var(--display-lg-weight); line-height:var(--display-lg-lh); text-align:center;}
.h-md{font-size:var(--display-md-size); font-weight:var(--display-md-weight); line-height:var(--display-md-lh); text-align:center;}
.h-sm{font-size:var(--display-sm-size); font-weight:var(--display-sm-weight); line-height:var(--display-sm-lh); text-align:center;}
.h-xs{font-size:var(--display-xs-size); font-weight:var(--display-xs-weight); line-height:var(--display-xs-lh); text-align:center;}
@media (max-width:640px){
  .h-mega{font-size:var(--display-mega-size-mobile);}
  .h-xxl{font-size:var(--display-xxl-size-mobile);}
  .h-xl{font-size:var(--display-xl-size-mobile);}
  .h-lg{font-size:var(--display-lg-size-mobile);}
  .h-md{font-size:var(--display-md-size-mobile);}
  .h-sm{font-size:var(--display-sm-size-mobile);}
  .h-xs{font-size:var(--display-xs-size-mobile);}
}
.text-lg{font-size:var(--body-lg-size); line-height:var(--body-lg-lh);}
.text-sm{font-size:var(--body-sm-size); line-height:var(--body-sm-lh);}
.text-mute{color:var(--mm-text-mute);}
.text-body{color:var(--mm-text-body);}
@media (max-width:640px){ .text-lg{font-size:var(--body-lg-size-mobile);} }
.lede{font-size:var(--body-lg-size); line-height:var(--body-lg-lh); color:var(--mm-text-body); max-width:44ch;}
.reviews-intro-lede{max-width:48ch; margin-top:16px; margin-inline:auto; text-align:center;}

/* Featured banner image above an Advice article's eyebrow/title. */
.advice-banner{margin-bottom:8px;}
.advice-banner .photo-frame{border-radius:var(--radius-lg);}

/* Long-form article prose (Advice pages) — sane defaults for headings/paragraphs/lists
   inside a body of HTML we generate from plain content, without a dedicated component. */
.advice-article{max-width:68ch;}
.advice-article p{color:var(--mm-text-body); line-height:var(--body-lg-lh); margin:0 0 20px;}
.advice-article h2{font-size:26px; margin:40px 0 16px;}
.advice-article h2:first-child{margin-top:0;}
.advice-article ul{margin:0 0 20px; padding-left:22px; color:var(--mm-text-body); line-height:var(--body-lg-lh);}
.advice-article li{margin-bottom:8px;}
.advice-article a{color:var(--mm-primary-active); text-decoration:underline; text-underline-offset:2px;}
.advice-filter{appearance:none; border:1px solid var(--mm-border); border-radius:var(--radius-pill); background:var(--mm-canvas); color:var(--mm-ink); padding:9px 19px; font:600 13px/1.2 var(--font-body); cursor:pointer; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);}
.advice-filter:hover{border-color:var(--mm-ink); transform:translateY(-1px);}
.advice-filter.is-active{border-color:var(--mm-primary); background:var(--mm-primary); font-weight:800;}
.advice-topic-nav{display:flex; flex-direction:column; gap:16px;}
.advice-sidebar{font-size:13px;}
.advice-sidebar h3{margin-bottom:8px; font-size:18px;}
.advice-sidebar-intro{margin:0 0 12px; color:var(--mm-text-body); font-size:12px; line-height:1.4;}
.advice-sidebar-filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.advice-sidebar .advice-filter{padding:7px 11px; font-size:12px;}
.advice-topic-nav{gap:14px;}
.advice-topic-section + .advice-topic-section{border-top:1px solid var(--mm-border); padding-top:12px;}
.advice-topic-section h4{margin:0 0 6px; color:var(--mm-text-mute); font-family:var(--font-body); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;}
.advice-topic-links{display:flex; flex-direction:column; gap:6px; list-style:none; margin:0; padding:0;}
.advice-topic-links a{display:block; color:var(--mm-text-body); font-size:13px; line-height:1.4; text-decoration:none;}
.advice-topic-links a:hover{color:var(--mm-ink); text-decoration:underline; text-underline-offset:2px;}

/* Advice article layout — the sidebar remains the desktop presentation at 900px and above;
   below that point the article gets the full container width and its related links move into
   the native, accessible details control rendered by generate.py. */
.advice-page-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:48px; align-items:start;}
.advice-mobile-nav{display:none;}

@media (max-width:899px){
  .advice-page-layout{grid-template-columns:1fr; gap:32px;}
  .advice-page-layout > .related-aside{display:none;}
  .advice-mobile-nav{
    display:block; width:100%; margin:28px 0 4px; border:1px solid var(--mm-border);
    border-radius:var(--radius-lg); background:var(--mm-canvas-soft); overflow:hidden;
  }
  .advice-mobile-nav summary{
    list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
    gap:12px; min-height:52px; padding:12px 16px; cursor:pointer; color:var(--mm-ink);
    font-family:var(--font-display); font-size:16px; font-weight:700;
  }
  .advice-mobile-nav summary::-webkit-details-marker{display:none;}
  .advice-mobile-nav summary:focus-visible{position:relative; z-index:1;}
  .advice-mobile-nav__label{min-width:0;}
  .advice-mobile-nav__meta{color:var(--mm-text-mute); font-family:var(--font-body); font-size:13px; font-weight:600; white-space:nowrap;}
  .advice-mobile-nav__chevron{width:18px; height:18px; flex-shrink:0; transition:transform .2s var(--ease);}
  .advice-mobile-nav[open] .advice-mobile-nav__chevron{transform:rotate(180deg);}
  .advice-mobile-nav nav{border-top:1px solid var(--mm-border);}
  .advice-mobile-nav .advice-topic-nav{gap:0;}
  .advice-mobile-nav .advice-topic-section{padding:12px 16px;}
  .advice-mobile-nav .advice-topic-section + .advice-topic-section{padding-top:12px;}
  .advice-mobile-nav .advice-sidebar-intro{padding:14px 16px 0; margin-bottom:10px;}
  .advice-mobile-nav .advice-sidebar-filters{padding:0 16px 14px; margin-bottom:0;}
  .advice-article .advice-mobile-nav__list{margin:0; padding:0; list-style:none;}
  .advice-mobile-nav__list li{margin:0; border-bottom:1px solid var(--mm-border);}
  .advice-mobile-nav__list li:last-child{border-bottom:0;}
  .advice-mobile-nav__list a{
    display:flex; align-items:center; min-height:44px; padding:12px 16px; color:var(--mm-ink);
    font-size:15px; line-height:1.45; text-decoration:none; overflow-wrap:anywhere;
  }
  .advice-mobile-nav__list a:hover{background:var(--mm-canvas);}
}

/* Project case-study detail list (key/value rows in the sidebar) */
.detail-list{display:flex; flex-direction:column; gap:0;}
.detail-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--mm-border, #E4E4DF); font-size:14px;}
.detail-row:last-child{border-bottom:0;}
.detail-label{color:var(--mm-text-mute); font-weight:600;}
.detail-value{color:var(--mm-ink); font-weight:700; text-align:right;}

.gradient-line{height:3px; width:100%; background:var(--mm-brand-gradient); border-radius:3px; border:0;}
.gradient-text{
  background:var(--mm-brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Moving brand-gradient text — signature accent word, used sparingly (e.g. the final CTA headline).
   The gradient is mirrored (lime -> mid -> blue -> mid -> lime) and background-size is 200%, so
   at every point in the pan the visible word shows the FULL lime -> mid -> blue range end to end
   (just flipping which side is which colour) — the animation stays, but the sweep always reads
   clearly instead of only a thin, mostly-one-colour slice being visible. */
.gradient-text-live{
  background:linear-gradient(90deg, var(--mm-primary) 0%, var(--mm-primary) 10%, #1B9F67 30%, #1E93E0 40%, #1E93E0 60%, #1B9F67 70%, var(--mm-primary) 90%, var(--mm-primary) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:mm-gradient-pan 6s ease-in-out infinite;
  font-weight:800;
  text-shadow:
    0 0 8px rgba(90,190,110,.18),
    0 0 14px rgba(50,160,210,.10);
}
@keyframes mm-gradient-pan{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media (prefers-reduced-motion:reduce){
  .gradient-text-live{animation:none; background-position:0% 50%;}
}
@media (max-width:768px){
  .gradient-text-live{
    -webkit-text-fill-color:transparent;
    text-shadow:none;
  }
}

/* ---- Buttons ---- */
.btn{
  font-family:var(--font-body); font-size:var(--button-md-size); font-weight:var(--button-md-weight);
  line-height:var(--button-md-lh); min-height:48px; padding:13px 26px; border-radius:16px; border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease);
  white-space:nowrap;
}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--mm-primary); color:var(--mm-ink);}
.btn-primary:hover{background:var(--mm-primary-hover);}
.btn-primary:active{background:var(--mm-primary-active);}
.btn-secondary{background:var(--mm-canvas); color:var(--mm-ink); border-color:var(--mm-ink);}
.btn-secondary:hover{background:var(--mm-canvas-soft);}
.btn-dark{background:var(--mm-ink); color:#fff;}
.btn-dark:hover{background:var(--mm-surface-dark-soft);}
.btn-on-dark-primary{background:var(--mm-primary); color:var(--mm-ink);}
.btn-on-dark-primary:hover{background:var(--mm-primary-hover);}
.btn-on-dark-secondary{background:transparent; color:#fff; border-color:#fff;}
.btn-on-dark-secondary:hover{background:rgba(255,255,255,.08);}
.btn-sm{min-height:40px; padding:9px 18px; font-size:14px; border-radius:14px;}
.btn-lg{min-height:56px; padding:16px 34px; font-size:18px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn-icon-only{padding:10px; min-width:44px;}

/* ---- Badges ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:.02em; padding:5px 13px; border-radius:var(--radius-pill);
}
.badge-pale{background:var(--mm-primary-pale); color:var(--mm-ink);}
.badge-teal{background:#E4F5F3; color:#136A62;}
.badge-blue{background:#E6F2FA; color:#175D8E;}
.badge-dark{background:var(--mm-surface-dark-soft); color:#fff;}
.badge-light{background:rgba(255,255,255,.95); color:var(--mm-ink);}

/* ---- Icons ---- */
.icon{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}

/* ---- Placeholder photography ---- */
.ph-image{
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(20,23,25,.05) 0px, rgba(20,23,25,.05) 1px, transparent 1px, transparent 14px),
    linear-gradient(160deg,#EDEFEA 0%,#E2E5DE 100%);
  color:var(--mm-text-mute);
  min-height:100%;
}
.ph-image::after{
  content:'';
  position:absolute; inset:0; border:1px solid var(--mm-border);
}
.ph-image .ph-label{
  position:relative; z-index:1; text-align:center; padding:20px; font-size:13px; font-weight:600; color:var(--mm-text-mute);
  display:flex; flex-direction:column; align-items:center; gap:10px; max-width:80%;
}
.ph-image .ph-label svg{width:26px; height:26px; opacity:.55;}
.ratio-16-10{aspect-ratio:16/10;}
.ratio-4-3{aspect-ratio:4/3;}
.ratio-3-4{aspect-ratio:3/4;}
.ratio-1-1{aspect-ratio:1/1;}
.ratio-21-9{aspect-ratio:21/9;}

/* ---- Real photo frame (replaces ph-image once a file is supplied) ---- */
.photo-frame{position:relative; overflow:hidden; display:block; background:var(--mm-canvas-soft);}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--ease);}

/* ---- Cards ---- */
.card-content{background:var(--mm-canvas); border-radius:var(--radius-lg); padding:28px;}
.card-content h3{font-size:20px; margin:0 0 12px;}
.card-content p{font-size:15px; color:var(--mm-text-body);}
.section-soft .card-content{background:var(--mm-canvas);}

.related-aside{position:sticky; top:calc(var(--header-h) + 24px); max-height:calc(100vh - var(--header-h) - 48px); overflow-y:auto;}
.advice-page-layout > .related-aside{max-height:none; overflow:visible;}
@media (max-width:640px){ .related-aside{position:static; max-height:none;} }

.card-service{display:block; text-decoration:none; color:inherit; border-radius:var(--radius-lg); overflow:hidden; background:var(--mm-canvas); border:1px solid var(--mm-border); group:card; transition:border-radius .4s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);}
.card-service .card-media{border-radius:var(--radius-md) var(--radius-md) 0 0; overflow:hidden; transition:border-radius .4s var(--ease);}
.card-service:hover{border-radius:var(--radius-swoop) var(--radius-lg) var(--radius-lg) var(--radius-lg); box-shadow:var(--shadow-level3); transform:translateY(-4px);}
.card-service:hover .card-media{border-radius:var(--radius-swoop) var(--radius-md) 0 0;}
@media (prefers-reduced-motion:reduce){
  .card-service, .card-service .card-media{transition:none;}
  .card-service:hover{transform:none;}
}
.card-service .card-media .ph-image{transition:transform .35s var(--ease);}
.card-service:hover .card-media .ph-image,
.card-service:hover .card-media .photo-frame img{transform:scale(1.035);}
.card-service .card-body{padding:24px 22px 26px;}
.card-service h3,.card-service h4{font-size:var(--display-xs-size); margin:0 0 8px;}
.card-service p{font-size:15px; color:var(--mm-text-body); margin:0 0 14px;}
.card-bullets{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px;}
.card-bullets li{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--mm-ink);}
.card-bullets li svg{width:16px; height:16px; color:var(--mm-primary-active); flex-shrink:0;}
.card-service .card-link{font-size:14px; font-weight:700; color:var(--mm-ink); display:inline-flex; align-items:center; gap:6px;}
.card-service .card-link svg{transition:transform .2s var(--ease); width:16px; height:16px;}
.card-service:hover .card-link svg{transform:translateX(4px);}

.card-project{border-radius:var(--radius-lg); overflow:hidden; background:var(--mm-canvas); display:block; text-decoration:none; color:inherit; transition:box-shadow .25s var(--ease), transform .25s var(--ease);}
.card-project:hover{box-shadow:var(--shadow-level3); transform:translateY(-4px);}
@media (prefers-reduced-motion:reduce){ .card-project:hover{transform:none;} }
.card-project .card-media{position:relative; border-radius:var(--radius-lg); overflow:hidden;}
.card-project .card-media .ph-image{transition:transform .35s var(--ease);}
.card-project:hover .card-media .ph-image,
.card-project:hover .card-media .photo-frame img{transform:scale(1.035);}
.card-project .card-tag{position:absolute; top:14px; left:14px;}
.card-project .card-body{padding:18px 4px 4px;}
.card-project .card-meta{font-size:12px; font-weight:600; color:var(--mm-text-mute); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.card-project h3{font-size:19px; margin:0;}
.card-project.card-project-lg h3{font-size:var(--display-sm-size);}

.card-feature-dark{background:var(--mm-surface-dark-soft); color:#fff; border-radius:var(--radius-xl); padding:32px; position:relative; overflow:hidden;}
.card-feature-dark .grad-hairline{position:absolute; top:0; left:0; right:0; height:3px; background:var(--mm-brand-gradient);}
.card-feature-dark .eyebrow{color:var(--mm-primary);}
.card-feature-dark h3{color:#fff; font-size:var(--display-sm-size); margin:0 0 12px;}
.card-feature-dark p,.card-feature-dark div{color:var(--text-on-dark-mute); font-size:16px; line-height:1.55;}

.card-review{background:var(--mm-canvas); border-radius:var(--radius-lg); padding:28px; border:var(--border-level1); position:relative; overflow:hidden;}
.card-review .grad-hairline{position:absolute; top:0; left:0; right:0; height:3px; background:var(--mm-brand-gradient);}
.card-review h3{font-size:var(--display-sm-size); text-align:left; margin:0 0 14px; color:var(--mm-ink);}
.card-review .stars{display:flex; gap:3px; margin-bottom:14px; color:var(--mm-border);}
.card-review .stars svg{width:16px; height:16px;}
.card-review .stars .filled{color:var(--mm-warning); fill:currentColor;}
.card-review p{font-size:15px; line-height:1.55; color:var(--mm-ink); margin:0 0 16px;}
.card-review .reviewer-name{font-size:14px; font-weight:700; color:var(--mm-ink);}
.card-review .reviewer-meta{font-size:13px; color:var(--mm-text-mute);}
.card-review.placeholder{border-style:dashed; color:var(--mm-text-mute);}
.reviews-page-grid .card-review{min-height:280px; box-sizing:border-box; display:flex; flex-direction:column;}
.reviews-page-grid .card-review p{flex:1;}

/* ---- Homepage "Compare render systems" — approved card/table treatment ---- */
/* The section heading/subheading and CTA block deliberately live outside these selectors. */
.render-compare{
  width:min(1200px,calc(100vw - 48px));
  margin:0 50% 32px;
  transform:translateX(-50%);
}
.render-compare-grid{
  display:grid;
  grid-template-columns:240px repeat(3,minmax(0,1fr));
  gap:4px;
  align-items:start;
}

/* Left-hand row key. Its top edge begins exactly where the product data rows begin. */
.render-compare-labels{
  margin-top:176px;
  display:grid;
  grid-template-rows:repeat(6,56px) 88px;
  overflow:hidden;
  background:#fff;
  border:1px solid #E4E6E2;
  border-radius:18px 0 0 18px;
  box-shadow:0 10px 28px rgba(20,23,25,.045);
  position:relative;
  z-index:2;
}
.render-compare-label{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
  padding:0 28px 0 34px;
  border-bottom:1px solid #E5E7E3;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:#202426;
  white-space:nowrap;
}
.render-compare-label:last-child{border-bottom:0;}
.render-compare-label img{width:23px;height:23px;object-fit:contain;flex:0 0 23px;}
.render-compare-label:nth-child(5) img{height:19px;}
.render-compare-label:last-child img{height:27px;}

/* Each option is a separate card — one column is designated "Most popular" and intentionally highlighted; see the `render-option--popular` / `render-option-icon--popular` / `render-choice--popular` modifiers below, applied via generate.py to whichever service is currently the popular option. */
.render-option{
  min-width:0;
  background:#fff;
  border:1px solid #E5E7E4;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(20,23,25,.045);
  overflow:hidden;
  position:relative;
  z-index:1;
}
.render-option--popular{
  border-color:rgba(167,199,45,.86);
  background:linear-gradient(180deg,#FEFFF9 0%,#FFFFFF 44%,#FCFDF8 100%);
  box-shadow:0 10px 32px rgba(133,158,31,.08);
  z-index:3;
}
.render-option-head{
  height:176px;
  padding:28px 18px 15px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  position:relative;
}
.render-option--popular .render-option-head{padding-top:38px;}
.render-popular{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  min-height:25px;
  padding:4px 11px 4px 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:5px;
  background:var(--mm-primary-active);
  color:#fff;
  font-family:var(--font-body);
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap;
}
.render-popular svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px;}
.render-option-icon{
  width:46px;
  height:46px;
  object-fit:contain;
  margin:0 0 8px;
}
.render-option-icon--popular{width:40px;height:46px;}
.render-option-head h3{
  margin:0;
  color:#0F1112;
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.025em;
}
.render-option-head p{
  margin:7px 0 0;
  color:#515659;
  font-size:13.5px;
  line-height:1.3;
  font-weight:400;
  white-space:nowrap;
}
.render-option-rows{
  margin:0;
  display:grid;
  grid-template-rows:repeat(6,56px) 88px;
}
.render-option-row{
  min-width:0;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-top:1px solid #E5E7E3;
}
.render-option-row dt{display:none;}
.render-option-row dd{
  margin:0;
  color:#272B2D;
  font-size:13.5px;
  line-height:1.35;
  font-weight:400;
}
.render-option-row--choice{padding:10px 12px;}
.render-option-row--choice dd{width:100%;height:100%;}
.render-choice{
  width:100%;
  height:100%;
  min-height:64px;
  padding:8px 12px;
  border-radius:11px;
  background:#F5F6F4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#171A1B;
  font-size:12px;
  line-height:1.25;
  font-weight:750;
  text-align:left;
}
.render-choice--popular{background:#F3F7E9;}
.render-choice-check{
  width:21px;
  height:21px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 21px;
  background:#44494A;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:900;
}
.render-choice--popular .render-choice-check{background:var(--mm-primary-active);}

@media (max-width:1080px){
  .render-compare{width:calc(100vw - 32px);overflow-x:auto;overflow-y:hidden;padding:0 0 8px;scrollbar-width:thin;}
  .render-compare-grid{min-width:1010px;grid-template-columns:205px repeat(3,minmax(0,1fr));}
  .render-compare-label{padding-left:25px;gap:14px;}
}

/* On phones the same content becomes three readable cards. The page heading and CTAs are untouched. */
@media (max-width:720px){
  .render-compare{width:100%;margin:0 0 28px;transform:none;overflow:visible;padding:0;}
  .render-compare-grid{min-width:0;grid-template-columns:1fr;gap:16px;}
  .render-compare-labels{display:none;}
  .render-option{border-radius:16px;}
  .render-option-head{height:auto;min-height:164px;padding:25px 18px 18px;}
  .render-option--popular .render-option-head{padding-top:40px;}
  .render-option-icon{width:42px;height:42px;margin-bottom:7px;}
  .render-option-icon--popular{width:36px;height:42px;}
  .render-option-head h3{font-size:23px;}
  .render-option-head p{font-size:13px;white-space:normal;}
  .render-option-rows{display:block;}
  .render-option-row{
    min-height:58px;
    padding:12px 16px;
    display:grid;
    grid-template-columns:116px minmax(0,1fr);
    gap:14px;
    text-align:left;
  }
  .render-option-row dt{
    display:block;
    color:#747A7C;
    font-size:10.5px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
  }
  .render-option-row dd{font-size:13.5px;}
  .render-option-row--choice{display:grid;padding:10px 12px;}
  .render-option-row--choice dd{grid-column:1/-1;}
  .render-option-row--choice dt{display:none;}
  .render-choice{min-height:60px;font-size:12.5px;justify-content:flex-start;padding-left:18px;}
}

/* ---- Homepage "Leave a Google review" block (sits inside the light Reviews section) ---- */
.google-review-block{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; margin-top:40px;}
.google-review-card{
  background:var(--mm-surface-dark-soft); border-radius:var(--radius-xl); padding:40px;
  display:flex; flex-direction:column; justify-content:center; gap:20px;
}
.google-review-card h3{color:#fff; font-size:var(--display-sm-size); text-align:left; margin:0;}
.google-review-card p{color:var(--text-on-dark-mute); font-size:16px; line-height:1.55; margin:0;}
.google-review-card .btn{align-self:flex-start; display:inline-flex; align-items:center; gap:8px;}
.google-review-card .btn svg{width:16px; height:16px;}
.google-review-map{border-radius:var(--radius-xl); overflow:hidden; min-height:340px;}
.google-review-map iframe{display:block; width:100%; height:100%; min-height:340px;}
@media (max-width:800px){
  .google-review-block{grid-template-columns:1fr; margin-top:28px;}
  .google-review-card{padding:32px;}
  .google-review-map{min-height:260px;}
  .google-review-map iframe{min-height:260px;}
}

/* ---- Trust strip ---- */
.trust-strip{display:flex; gap:var(--space-2xl); flex-wrap:wrap; align-items:center;}
.trust-strip .trust-item{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;}
.trust-strip .trust-item svg{color:var(--mm-primary-active); width:20px; height:20px; flex-shrink:0;}
.trust-strip.placeholder .trust-item{color:var(--mm-text-mute); font-style:italic; font-weight:500;}

/* ---- Process ---- */
.process-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-2xl);}
.process-step .step-num{font-family:var(--font-display); font-weight:800; font-size:32px; color:var(--mm-primary-active); margin-bottom:12px;}
.process-step .step-label{font-size:15px; font-weight:700; color:var(--mm-ink); margin-bottom:6px;}
.process-step p{font-size:14px; color:var(--mm-text-body);}
@media (max-width:1024px){ .process-steps{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .process-steps{grid-template-columns:1fr 1fr; gap:var(--space-xl);} }

/* ---- Process (pop / icon-circle variant) ---- */
.process-steps-pop{display:grid; grid-template-columns:repeat(5,1fr); gap:24px;}
.process-step-pop{display:flex; flex-direction:column; align-items:center; text-align:center; position:relative;}
.step-icon-wrap{position:relative; margin-bottom:20px; z-index:1;}
.step-icon{
  width:82px; height:82px; border-radius:50%; background:var(--mm-surface-dark-soft);
  border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
}
.step-icon svg{width:32px; height:32px; color:var(--mm-primary);}
.step-num-badge{
  position:absolute; top:-6px; right:-6px; width:30px; height:30px; border-radius:50%; background:#fff;
  color:var(--mm-ink); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.step-label-pop{font-size:15px; font-weight:700; color:#fff; max-width:17ch;}
.process-steps-pop .process-step-pop:not(:last-child)::after{
  content:''; position:absolute; top:41px; left:calc(50% + 53px); width:calc(100% - 106px); height:1px; background:rgba(255,255,255,.16); z-index:0;
}
.home-process-cta{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:32px;}
.home-process-cta p{color:var(--text-on-dark-mute);font-size:13px;}
.home-process-cta .btn{white-space:nowrap;}
@media (max-width:1024px){
  .process-steps-pop{grid-template-columns:repeat(3,1fr); row-gap:44px;}
  .process-steps-pop .process-step-pop::after{display:none;}
}
@media (max-width:640px){
  .process-steps-pop{grid-template-columns:1fr 1fr; row-gap:36px;}
  .process-steps-pop .process-step-pop:last-child{grid-column:1/-1;}
  .home-process-cta{flex-direction:column;gap:12px;margin-top:28px;}
  .home-process-cta .btn,
  .compare-cta .btn{
    max-width:100%;
    min-width:0;
    white-space:normal;
    text-align:center;
  }
}

/* ---- Trust band — full-width dark strip below the hero (lined eyebrow + heading + 4
   outlined-icon items divided by thin vertical rules) ---- */
.eyebrow-lines{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-family:var(--font-body); font-size:13px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mm-primary); margin:0 0 16px; text-align:center;
}
.eyebrow-lines::before,.eyebrow-lines::after{content:''; width:40px; height:1px; background:rgba(184,217,54,.35); flex-shrink:0;}
.trust-band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0;}
.trust-band-item{display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 20px;}
.trust-band-item:not(:first-child){border-left:1px solid rgba(255,255,255,.14);}
.trust-band-icon{
  width:54px; height:54px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.trust-band-icon img{display:block; width:54px; height:54px; object-fit:contain;}
.trust-band-item h3{color:#fff; font-size:15px; font-weight:700; margin:0 0 5px;}
.trust-band-item p{color:var(--text-on-dark-mute); font-size:13px; line-height:1.4; margin:0; max-width:23ch;}
/* 2-up from tablet all the way down to the smallest phones — keeps the band short instead
   of stacking to a single tall column. */
@media (max-width:900px){
  .trust-band-grid{grid-template-columns:repeat(2,1fr); row-gap:28px; column-gap:8px;}
  .trust-band-item{border-left:none; padding:0 10px;}
  .trust-band-item:nth-child(even){border-left:1px solid rgba(255,255,255,.14);}
}
@media (max-width:480px){
  .trust-band-icon{width:46px; height:46px; margin-bottom:10px;}
  .trust-band-icon img{width:46px; height:46px;}
  .trust-band-item h3{font-size:13.5px;}
  .trust-band-item p{font-size:12px; line-height:1.35;}
}

/* ---- Areas ---- */
.area-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 32px;}
.area-grid a{font-size:15px; font-weight:600; color:var(--mm-ink); text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.area-grid a:hover{color:var(--mm-primary);}
.area-grid a.is-primary{font-weight:800;}
@media (max-width:1024px){ .area-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .area-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- Areas We Cover (homepage) ---- */
.section-areas-cover{background:var(--mm-canvas-soft); position:relative;}
.section-areas-cover::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--mm-brand-gradient);}
.areas-cover-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.grad-hairline-sm{display:block; width:56px; height:3px; margin:0 auto 20px; border-radius:var(--radius-pill); background:var(--mm-brand-gradient);}
.areas-cover-head .h-md{margin-bottom:12px;}
.areas-cover-sub{margin:0 auto; color:var(--mm-text-body);}
.area-cover-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:960px; margin:0 auto;}
.area-cover-card{
  display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border-radius:var(--radius-lg);
  box-shadow:0 4px 14px rgba(20,23,25,0.06); text-decoration:none; color:var(--mm-ink); font-size:15px; font-weight:700;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.area-cover-card .pin-badge{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--mm-brand-gradient); flex-shrink:0;
}
.area-cover-card .pin-badge svg{width:16px; height:16px; color:#fff;}
.area-cover-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-level3);}
.areas-cover-cta{text-align:center; margin-top:32px;}
@media (max-width:900px){ .area-cover-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .area-cover-grid{grid-template-columns:repeat(2,1fr); gap:12px;} .area-cover-card{padding:12px 14px; font-size:14px;} }

/* ---- Before/after slider ---- */
.ba-slider{
  position:relative; aspect-ratio:16/10; border-radius:var(--radius-2xl); overflow:hidden; user-select:none;
  touch-action:none; cursor:ew-resize; background:var(--mm-canvas-soft);
}
.ba-slider .ba-layer{position:absolute; inset:0; width:100%; height:100%;}
.ba-slider .ba-layer.ba-before{overflow:hidden; width:50%; z-index:2;}
.ba-slider .ba-layer.ba-before .ph-image,
.ba-slider .ba-layer.ba-before img{position:absolute; inset:0; width:var(--ba-fixed-w,100vw); max-width:none; height:100%; object-fit:cover;}
.ba-slider .ba-layer.ba-after img,
.ba-slider .ba-layer.ba-after .ph-image{width:100%; height:100%; object-fit:cover; display:block;}
.ba-slider .ba-handle-line{position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; transform:translateX(-50%); z-index:3; box-shadow:0 0 0 1px rgba(20,23,25,.15);}
.ba-slider .ba-handle{
  position:absolute; top:50%; left:50%; width:48px; height:48px; border-radius:50%; background:#fff; box-shadow:var(--shadow-level3);
  transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; z-index:4; color:var(--mm-ink);
}
.ba-slider .ba-handle svg{width:20px; height:20px;}
.ba-slider .ba-tag{position:absolute; top:16px; z-index:5; font-size:12px; font-weight:700; padding:6px 14px; border-radius:var(--radius-pill);}
.ba-slider .ba-tag-before{left:16px; background:rgba(20,23,25,.85); color:#fff;}
.ba-slider .ba-tag-after{right:16px; background:var(--mm-primary); color:var(--mm-ink);}

/* ---- FAQ / Accordion (native <details> for zero-JS accessibility) ---- */
.accordion{border-top:var(--border-level1);}
.accordion-item{border-bottom:var(--border-level1);}
.accordion-item summary{
  list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--mm-ink);
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary .plus{flex-shrink:0; width:24px; height:24px; position:relative;}
.accordion-item summary .plus::before,.accordion-item summary .plus::after{
  content:''; position:absolute; background:var(--mm-ink); border-radius:2px; transition:transform .2s var(--ease);
}
.accordion-item summary .plus::before{top:11px; left:2px; right:2px; height:2px;}
.accordion-item summary .plus::after{left:11px; top:2px; bottom:2px; width:2px;}
.accordion-item details[open] summary .plus::after,
.accordion-item details.is-open summary .plus::after{transform:rotate(90deg); opacity:0;}
.accordion-item .accordion-body{padding:0 4px 22px; font-size:15px; line-height:1.6; color:var(--mm-text-body); max-width:70ch;}

/* ---- FAQ home grid (numbered, tagged tiles) + dedicated /faq page topic sections ----
   Light theme: matches the site's established off-white section colour (--mm-canvas-soft /
   #F4F5F1) and the sitewide convention of using --mm-primary-active (the darker, more
   saturated lime) rather than --mm-primary for lime text/accents on light backgrounds — see
   .text-lime, .step-num, .trust-strip svg, etc. for the same pattern elsewhere. */
.eyebrow-dash{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--font-body); font-size:13px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mm-primary-active); margin-bottom:16px;
}
.eyebrow-dash::before{content:''; width:26px; height:2px; border-radius:2px; background:var(--mm-primary-active); flex-shrink:0;}

.btn-pill-outline{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14.5px; font-weight:700;
  color:var(--mm-ink); background:transparent; border:1.5px solid var(--mm-ink);
  padding:11px 22px; border-radius:var(--radius-pill); text-decoration:none; white-space:nowrap; flex-shrink:0;
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-pill-outline svg{width:16px; height:16px; transition:transform .2s var(--ease);}
.btn-pill-outline:hover{background:var(--mm-ink); color:#fff;}
.btn-pill-outline:hover svg{transform:translateX(3px);}

.faq-home-section{background:#F4F5F1;}
.faq-home-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px;}
.faq-home-head h2{text-align:left; margin:0;}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}

.faq-tile{background:var(--mm-canvas); border:1px solid var(--mm-border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);}
.faq-tile:hover{border-color:var(--mm-ink); box-shadow:var(--shadow-level3);}
.faq-tile summary{
  list-style:none; cursor:pointer; padding:24px 22px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.faq-tile summary::-webkit-details-marker{display:none;}
.faq-tile-text{display:flex; flex-direction:column; gap:12px;}
.faq-tile-meta{display:flex; align-items:center; gap:10px;}
.faq-tile-number{font-family:var(--font-body); font-size:13px; font-weight:800; color:var(--mm-primary-active);}
.faq-tile-tag{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mm-text-mute); background:var(--mm-canvas-soft); padding:4px 11px; border-radius:var(--radius-pill);}
.faq-tile-q{font-family:var(--font-body); font-size:16px; font-weight:700; color:var(--mm-ink); line-height:1.4;}
.faq-tile-plus{
  flex-shrink:0; width:24px; height:24px; position:relative; margin-top:2px;
}
.faq-tile-plus::before,.faq-tile-plus::after{content:''; position:absolute; background:var(--mm-primary-active); border-radius:2px; transition:transform .2s var(--ease);}
.faq-tile-plus::before{top:11px; left:2px; right:2px; height:2px;}
.faq-tile-plus::after{left:11px; top:2px; bottom:2px; width:2px;}
.faq-tile[open] .faq-tile-plus::after,
.faq-tile.is-open .faq-tile-plus::after{transform:rotate(90deg); opacity:0;}
.faq-tile-body{padding:0 22px 24px 22px; color:var(--mm-text-body); font-size:14.5px; line-height:1.65;}
.faq-tile-body p{margin:0; padding-top:16px; border-top:1px solid var(--mm-border);}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr;}
  .faq-home-head{flex-direction:column; align-items:flex-start; gap:20px;}
}
@media (max-width:640px){
  .faq-tile summary{padding:20px 18px;}
  .faq-tile-body{padding:0 18px 20px;}
  .faq-tile-q{font-size:15px;}
}

/* ---- Dedicated /faq page: "Browse by topic" sidebar + grouped question sections ---- */
.faq-page-layout{display:grid; grid-template-columns:1fr 260px; gap:48px; align-items:start;}
.faq-page-layout .faq-sidebar{order:2;}
.faq-page-layout .faq-topics{order:1;}
.faq-sidebar-title{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--mm-text-mute); margin-bottom:14px;}
.faq-topic-nav{display:flex; flex-direction:column; gap:4px; margin-bottom:28px;}
.faq-topic-link{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-md); font-size:14.5px; font-weight:600;
  color:var(--mm-ink); text-decoration:none; transition:background-color .2s var(--ease), color .2s var(--ease);
}
.faq-topic-link:hover{background:var(--mm-canvas-soft);}
.faq-topic-link.is-active{background:var(--mm-primary); color:var(--mm-ink); font-weight:700;}
.faq-topic-link-icon{display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--mm-primary-pale); color:var(--mm-primary-active);}
.faq-topic-link-icon .icon{width:17px; height:17px;}
.faq-topic-link-icon--pricing .icon{width:17px; height:17px;}
.faq-topic-link.is-active .faq-topic-link-icon{background:rgba(255,255,255,.52); color:var(--mm-ink);}
.faq-sidebar-card{background:var(--mm-ink); color:#fff; border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:10px;}
.faq-sidebar-card h3{color:#fff; font-size:17px; margin:0;}
.faq-sidebar-card p{color:var(--text-on-dark-mute); font-size:14px; margin:0 0 6px;}
.faq-topics{display:flex; flex-direction:column; gap:56px;}
.faq-topic-head{margin-bottom:16px;}
.faq-topic-heading{display:flex; align-items:center; gap:14px; min-width:0;}
.faq-topic-icon{display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:var(--mm-primary-pale); color:var(--mm-primary-active);}
.faq-topic-icon .icon{width:21px; height:21px;}
.faq-topic-icon--pricing .icon{width:21px; height:21px;}
.faq-topic-heading-copy{display:flex; flex-direction:column; min-width:0;}
.faq-topic-heading-copy h2{text-align:left; margin:0;}
.faq-topic-heading-copy .eyebrow-dash{margin:7px 0 0;}

/* ---- Advice landing page FAQ — category cards with a shared filter bar. Scoped so the
   redesign does not change the accordion treatment used by articles and service pages. ---- */
.advice-faq-section{background:var(--mm-canvas-soft);}
.advice-faq-shell{max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad-desktop);}
.advice-faq-filters{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 auto 40px;}
.advice-faq-filter{appearance:none; border:1px solid transparent; border-radius:var(--radius-pill); background:var(--mm-canvas); color:var(--mm-text-body); padding:11px 18px; min-height:44px; font:600 14px/1.2 var(--font-body); cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);}
.advice-faq-filter:hover{border-color:var(--mm-border); color:var(--mm-ink); transform:translateY(-1px);}
.advice-faq-filter.is-active{background:var(--mm-primary); color:var(--mm-ink); font-weight:800;}
.advice-faq-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch;}
.advice-faq-card{display:flex; flex-direction:column; min-width:0; background:var(--mm-canvas); border:1px solid var(--mm-border); border-radius:var(--radius-lg); padding:26px 26px 22px; box-shadow:0 8px 24px rgba(20,23,25,.035); transition:opacity .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);}
.advice-faq-card:hover{box-shadow:var(--shadow-level3);}
.advice-faq-card[hidden]{display:none;}
.advice-faq-card-head{display:flex; align-items:center; gap:13px; padding-bottom:20px; border-bottom:1px solid var(--mm-border);}
.advice-faq-card-head h3{font-size:20px; line-height:1.2;}
.advice-faq-icon{display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:var(--radius-md); background:var(--mm-primary-pale); color:var(--mm-primary-active);}
.advice-faq-icon .icon{width:21px; height:21px;}
.advice-faq-rows{flex:1;}
.advice-faq-row{border-bottom:1px solid var(--mm-border);}
.advice-faq-row details{margin:0;}
.advice-faq-row summary{list-style:none; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 0; cursor:pointer; color:var(--mm-ink); font-size:15px; font-weight:700; line-height:1.4;}
.advice-faq-row summary::-webkit-details-marker{display:none;}
.advice-faq-row summary .plus{position:relative; flex:0 0 18px; width:18px; height:18px; color:var(--mm-primary-active);}
.advice-faq-row summary .plus::before,.advice-faq-row summary .plus::after{content:''; position:absolute; background:currentColor; border-radius:2px; transition:transform .2s var(--ease), opacity .2s var(--ease);}
.advice-faq-row summary .plus::before{top:8px; left:0; right:0; height:2px;}
.advice-faq-row summary .plus::after{top:0; bottom:0; left:8px; width:2px;}
.advice-faq-row details[open] summary .plus::after,.advice-faq-row details.is-open summary .plus::after{transform:rotate(90deg); opacity:0;}
.advice-faq-row .accordion-body{padding:0 22px 17px 0; max-width:none; color:var(--mm-text-body); font-size:14px; line-height:1.6;}
.advice-faq-row .accordion-body p{margin:0;}
.advice-faq-more{display:inline-flex; align-items:center; gap:7px; margin-top:20px; color:var(--mm-text-ink); font-size:14px; font-weight:700; text-decoration:none;}
.advice-faq-more span{color:var(--mm-primary-active); font-size:18px; line-height:1; transition:transform .2s var(--ease);}
.advice-faq-more:hover span{transform:translateX(4px);}
@media (max-width:1024px){
  .advice-faq-shell{padding:0 var(--container-pad-tablet);}
  .advice-faq-grid{grid-template-columns:1fr; max-width:720px; margin:0 auto;}
  .advice-faq-card{padding:24px;}
}
@media (max-width:640px){
  .advice-faq-shell{padding:0 var(--container-pad-mobile);}
  .advice-faq-filters{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; margin:30px -20px 28px; padding:0 20px 5px; scrollbar-width:none;}
  .advice-faq-filters::-webkit-scrollbar{display:none;}
  .advice-faq-filter{flex:0 0 auto;}
  .advice-faq-card{padding:22px 18px 20px;}
  .advice-faq-card-head{padding-bottom:17px;}
  .advice-faq-card-head h3{font-size:19px;}
}
@media (max-width:900px){
  .faq-page-layout{grid-template-columns:1fr; gap:32px;}
  .faq-page-layout .faq-sidebar{order:1; position:static; max-height:none;}
  .faq-page-layout .faq-topics{order:2;}
  .faq-topic-nav{flex-direction:row; flex-wrap:wrap; gap:8px;}
  .faq-topic-link{padding:7px 10px; border:1px solid var(--mm-border);}
}

@media (max-width:480px){
  .faq-topic-heading{gap:12px;}
  .faq-topic-icon{flex-basis:38px; width:38px; height:38px;}
  .faq-topic-icon .icon{width:19px; height:19px;}
  .faq-topic-icon--pricing .icon{width:19px; height:19px;}
  .faq-topic-heading-copy .eyebrow-dash{font-size:12px;}
  .faq-topic-link-icon{flex-basis:30px; width:30px; height:30px;}
  .faq-topic-link-icon .icon{width:16px; height:16px;}
  .faq-topic-link-icon--pricing .icon{width:16px; height:16px;}
}

/* ---- Breadcrumbs ---- */
.breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--mm-text-mute); padding-block:18px;}
.breadcrumb a{color:var(--mm-text-mute); text-decoration:none;}
.breadcrumb a:hover{color:var(--mm-primary);}
.breadcrumb .sep{opacity:.6;}
.breadcrumb .current{color:var(--mm-ink); font-weight:600;}

/* ---- Header / Navigation ---- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:saturate(180%) blur(6px);
  border-bottom:1px solid var(--mm-border);
}
.header-inner{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; position:relative;}
.brand img{height:50px; width:auto; display:block;}
.brand .brand-logo-line{display:none;}
.brand .brand-text{font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--mm-ink); line-height:1.2;}
.brand .brand-text span{display:block; font-family:var(--font-body); font-weight:600; font-size:11px; color:var(--mm-text-mute); text-transform:uppercase; letter-spacing:.04em;}

.main-nav{display:flex; align-items:center; gap:4px;}
.main-nav > ul{display:flex; align-items:center; gap:2px;}
.nav-link{
  font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--mm-ink); text-decoration:none;
  padding:14px 14px; display:inline-flex; align-items:center; gap:6px; position:relative; border-radius:var(--radius-sm);
  white-space:nowrap; flex-shrink:0; transition:color .2s ease, background-color .2s ease;
}
.main-nav > ul{flex-wrap:nowrap;}
.main-nav > ul > li{flex-shrink:0;}
.nav-link:hover{color:var(--mm-ink); background:var(--mm-canvas-soft);}
.nav-link svg{width:15px; height:15px; transition:transform .18s var(--ease);}
.has-mega{position:relative;}
.has-mega:hover > .nav-link svg,.has-mega:focus-within > .nav-link svg{transform:rotate(180deg);}
.nav-link.is-active::after{content:''; position:absolute; left:14px; right:14px; bottom:7px; height:2px; background:var(--mm-brand-gradient); border-radius:2px;}

@media (min-width:1141px) and (max-width:1240px){
  .main-nav > ul{gap:0;}
  .nav-link{padding-left:10px; padding-right:10px;}
}

.mega-panel{
  /* No vertical offset here on purpose: the panel's own box is what :hover hit-testing uses,
     so a translateY gap between the trigger and the panel becomes dead space neither element
     is hovered over — crossing it while moving the mouse down breaks the :hover chain and the
     menu closes before you can reach a sub-link. Keeping the box flush against the trigger
     (top:100%, no translateY) and adding an invisible padding-top "bridge" instead preserves
     the same visual gap above the panel's visible surface without ever breaking hover. */
  position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:560px;
  padding-top:6px; display:none; z-index:50;
}
.mega-panel-card{
  background:var(--mm-canvas); border:1px solid var(--mm-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-level3);
  padding:24px; display:grid; gap:8px;
}
.has-mega:hover > .mega-panel, .has-mega:focus-within > .mega-panel{display:block;}
.mega-panel .mega-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 32px;}
.mega-panel .mega-col-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--mm-text-mute); padding:8px 10px 4px;}
.mega-panel a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); text-decoration:none; color:var(--mm-ink); font-size:14.5px; font-weight:600;
}
.mega-panel a:hover{background:var(--mm-canvas-soft);}
.mega-panel a.mega-view-all{color:var(--mm-secondary); font-weight:700;}
.mega-link-icon{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--mm-canvas-soft); color:var(--mm-primary-active); flex-shrink:0;
}
.mega-link-icon svg{width:14px; height:14px;}
.mega-panel .mega-note{grid-column:1/-1; border-top:var(--border-level1); margin-top:8px; padding-top:12px; font-size:13px; color:var(--mm-text-mute); font-weight:500;}

.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.header-utility{display:flex; align-items:center; gap:6px;}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-md);
  color:var(--mm-ink); text-decoration:none; border:1px solid var(--mm-border);
}
.icon-btn:hover{background:var(--mm-canvas-soft);}
.icon-btn svg{width:19px; height:19px;}

.nav-toggle{
  display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-md);
  border:1px solid var(--mm-border); background:transparent; color:var(--mm-ink); cursor:pointer;
}
.nav-toggle svg{width:22px; height:22px;}

@media (max-width:1140px), (min-width:1141px) and (max-width:1180px){
  .main-nav{display:none;}
  .header-utility{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-actions .btn{display:none;}
}
@media (max-width:1140px), (min-width:1141px) and (max-width:1180px){
  .header-inner{height:68px;}
  .brand img{height:40px;}
}

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:0; z-index:200; display:none;
}
.mobile-drawer.is-open{display:block;}
.mobile-drawer .drawer-backdrop{position:absolute; inset:0; background:rgba(20,23,25,.5);}
.mobile-drawer .drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(400px,92vw); background:#fff; overflow-y:auto;
  box-shadow:-16px 0 40px rgba(20,23,25,.18); display:flex; flex-direction:column;
}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:var(--border-level1);}
.drawer-head img{height:38px;}
.drawer-close{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); border:1px solid var(--mm-border); background:none; cursor:pointer;}
.drawer-close svg{width:20px; height:20px;}
.drawer-body{padding:8px 12px; flex:1;}
.drawer-group{border-bottom:var(--border-level1);}
.drawer-group summary{list-style:none; display:flex; align-items:center; justify-content:space-between; padding:16px 10px; font-family:var(--font-display); font-weight:700; font-size:17px; cursor:pointer;}
.drawer-group summary::-webkit-details-marker{display:none;}
.drawer-group summary > svg{width:18px; height:18px; transition:transform .2s var(--ease); flex-shrink:0;}
.drawer-group[open] summary > svg,
.drawer-group.is-open summary > svg{transform:rotate(180deg);}
.drawer-group .drawer-sublinks{padding:0 10px 16px; display:flex; flex-direction:column; gap:2px;}
.drawer-group .drawer-sublinks a{display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:var(--radius-sm); text-decoration:none; color:var(--mm-text-body); font-size:15px; font-weight:500;}
.drawer-group .drawer-sublinks a:hover{background:var(--mm-canvas-soft); color:var(--mm-ink);}
.drawer-sub-icon{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--mm-canvas-soft); color:var(--mm-primary-active); flex-shrink:0;
}
.drawer-sub-icon svg{width:15px; height:15px;}
.drawer-label{display:flex; align-items:center; gap:14px;}
.drawer-link{display:flex; align-items:center; gap:14px; padding:16px 10px; font-family:var(--font-display); font-weight:700; font-size:17px; text-decoration:none; color:var(--mm-ink); border-bottom:var(--border-level1);}
.drawer-icon{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:var(--mm-primary); color:var(--mm-ink); flex-shrink:0;
}
.drawer-icon svg{width:17px; height:17px;}
.drawer-foot{padding:18px 20px 28px; display:flex; flex-direction:column; gap:10px; border-top:var(--border-level1);}
.drawer-foot .btn{width:100%;}
.drawer-foot .drawer-utility{display:flex; gap:10px;}
.drawer-foot .drawer-utility .btn{flex:1;}

/* ---- Mobile sticky conversion bar ---- */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150; background:#fff; border-top:1px solid var(--mm-border);
  padding:4px max(10px,env(safe-area-inset-left)) 4px max(10px,env(safe-area-inset-right));
  box-shadow:0 -8px 24px rgba(20,23,25,.08);
}
.mobile-cta-bar .bar-inner{display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:8px;}
.mobile-cta-bar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 4px; border-radius:var(--radius-md);
  text-decoration:none; font-size:11.5px; font-weight:700; color:var(--mm-ink); border:1px solid var(--mm-border);
}
.mobile-cta-bar a.bar-quote{background:var(--mm-primary); border-color:var(--mm-primary); color:var(--mm-ink);}
@media (max-width:768px){
  .mobile-footer-cta-icon{width:24px !important; height:24px !important; min-width:24px !important; min-height:24px !important; max-width:24px !important; max-height:24px !important; flex:0 0 24px !important; object-fit:contain; display:block;}
  .mobile-cta-bar{display:block;}
  body{padding-bottom:74px;}
}
@media (display-mode: standalone) and (max-width:768px){
  .mobile-cta-bar{padding-bottom:max(4px,env(safe-area-inset-bottom));}
}

/* ---- Mobile back-to-top control ---- */
.back-to-top{display:none;}
@media (max-width:768px){
  .back-to-top{
    position:fixed; right:16px; bottom:calc(74px + env(safe-area-inset-bottom) + 26px); z-index:155;
    display:flex; align-items:center; justify-content:center; width:50px; height:50px; padding:0;
    border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.06); color:var(--mm-ink);
    box-shadow:0 4px 12px rgba(0,0,0,.10); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
    cursor:pointer;
  }
  .back-to-top.is-visible{
    opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear 0s;
  }
  .back-to-top svg{width:20px; height:20px;}
  .back-to-top.is-on-dark{color:#fff;}
}
@media (prefers-reduced-motion:reduce){
  .back-to-top{transition:none;}
}

/* ---- Sticky WhatsApp button (desktop/tablet — mobile already has WhatsApp in the bottom bar) ---- */
.whatsapp-float{
  display:flex; position:fixed; right:24px; bottom:28px; z-index:160;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(20,23,25,.28);
  text-decoration:none; transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.whatsapp-float:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(20,23,25,.32);}
.whatsapp-float svg{width:28px; height:28px;}
.whatsapp-float .ping-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--mm-negative); border:2px solid #fff;
}
@media (max-width:768px){
  .whatsapp-float{display:none;}
}

/* ---- Cookie consent banner ---- */
.cookie-consent{
  display:grid; grid-template-columns:38px 1fr; column-gap:14px; row-gap:14px; position:fixed; left:24px; bottom:24px; z-index:170;
  width:380px; max-width:calc(100vw - 48px); background:#fff; border:1px solid var(--mm-border); border-radius:18px;
  padding:20px; box-shadow:0 18px 44px rgba(20,23,25,.16);
}
.cookie-consent[hidden]{display:none;}
.cookie-consent-icon{
  width:38px; height:38px; border-radius:10px; background:var(--mm-primary-pale);
  display:flex; align-items:center; justify-content:center; color:var(--mm-primary-active);
}
.cookie-consent-icon .icon{width:20px; height:20px;}
.cookie-consent-body strong{display:block; font-size:15px; color:var(--mm-ink); margin-bottom:6px;}
.cookie-consent-body p{font-size:13px; line-height:1.55; color:var(--mm-text-body); margin:0;}
.cookie-consent-body a{color:var(--mm-ink); text-decoration:underline; text-underline-offset:2px; font-weight:600;}
.cookie-consent-actions{grid-column:2; display:flex; gap:10px;}
.cookie-consent-actions .btn{flex:1; justify-content:center;}
@media (max-width:640px){
  .cookie-consent{left:12px; right:12px; bottom:88px; width:auto; max-width:none;}
}

/* ---- Footer ---- */
.site-footer{background:var(--mm-ink); color:#fff;}
.footer-top{max-width:var(--container-max); margin:0 auto; padding:var(--space-6xl) var(--container-pad-desktop) var(--space-3xl);
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:40px;}
@media (min-width:1025px){
  .footer-top{padding:72px var(--container-pad-desktop) 20px;}
}
.footer-brand img{height:42px; margin-bottom:18px;}
.footer-brand p{font-size:14px; color:var(--text-on-dark-mute); line-height:1.6; max-width:260px; margin-bottom:20px;}
/* Get in touch, positioned between the brand copy and the social icons on desktop/tablet
   (it's physically in that spot in the markup — no grid trickery needed there). Its base
   top margin was tuned for sitting under the Company accordion; reset it here since the
   paragraph above already provides matching spacing. */
.footer-brand .footer-touch-title{margin-top:0;}
.footer-brand .footer-contact{margin-bottom:8px;}
.footer-social{display:flex; gap:12px; margin-top:24px; margin-bottom:16px;}
.footer-social a{
  width:44px; height:44px; border:1.5px solid rgba(255,255,255,.32); border-radius:var(--radius-md);
  background:rgba(255,255,255,.06); display:inline-flex; align-items:center; justify-content:center;
  color:#fff; text-decoration:none;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer-social a:hover{background:var(--mm-primary); border-color:var(--mm-primary); color:var(--mm-ink); transform:translateY(-2px);}
.footer-social svg{width:20px; height:20px; stroke-width:1.8;}
.footer-col-title{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-on-dark-mute); margin-bottom:18px;}
.footer-touch-title{margin-top:22px;}
.footer-col a{display:block; font-size:14.5px; color:var(--text-on-dark-mute); text-decoration:none; margin-bottom:13px; transition:color .15s var(--ease), transform .15s var(--ease);}
.footer-col a:hover{color:var(--mm-primary); transform:translateX(2px);}

/* ---- Footer accordion (native <details> — collapsible tabs on mobile, static columns on desktop) ---- */
.footer-accordion{border-top:1px solid var(--mm-surface-dark-soft);}
.footer-accordion summary{
  list-style:none; cursor:pointer; padding:16px 2px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff;
}
.footer-accordion summary::-webkit-details-marker{display:none;}
.footer-accordion summary .plus{flex-shrink:0; width:18px; height:18px; position:relative;}
.footer-accordion summary .plus::before,.footer-accordion summary .plus::after{
  content:''; position:absolute; background:var(--mm-primary); border-radius:2px; transition:transform .2s var(--ease);
}
.footer-accordion summary .plus::before{top:8px; left:0; right:0; height:2px;}
.footer-accordion summary .plus::after{left:8px; top:0; bottom:0; width:2px;}
.footer-accordion[open] summary .plus::after,
.footer-accordion.is-open summary .plus::after{transform:rotate(90deg); opacity:0;}
.footer-accordion .footer-col{padding:0 2px 18px;}
@media (min-width:641px){
  .footer-accordion{border-top:none;}
  .footer-accordion summary{pointer-events:none; padding:0 0 18px; margin-bottom:0;}
  .footer-accordion summary .plus{display:none;}
  .footer-accordion .footer-col{display:flex !important; flex-direction:column; padding:0;}
}
.footer-contact-item{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:14.5px; color:#fff;}
.footer-contact-item svg{width:18px; height:18px; margin-top:1px; color:var(--mm-primary); flex-shrink:0;}
.footer-contact-item a{text-decoration:none; transition:color .15s var(--ease);}
.footer-contact-item a:hover{color:var(--mm-primary);}
.footer-bottom{border-top:1px solid var(--mm-surface-dark-soft);}
.footer-bottom-inner{max-width:var(--container-max); margin:0 auto; padding:22px var(--container-pad-desktop); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font-size:12.5px; color:#8A8E8A;}
@media (min-width:1025px){
  .footer-bottom-inner{padding:10px var(--container-pad-desktop);}
}
.footer-bottom-links{display:flex; gap:20px; flex-wrap:wrap;}
.footer-bottom-links a{color:#8A8E8A; text-decoration:none;}
.footer-bottom-links a:hover{color:var(--mm-primary);}
@media (min-width:1025px){
  .footer-brand img{margin-bottom:12px;}
  .footer-brand p{margin-bottom:10px;}
  .footer-brand .footer-touch-title{margin-bottom:10px;}
  .footer-brand .footer-contact-item{margin-bottom:8px;}
  .footer-brand .footer-social{margin-top:10px; margin-bottom:8px;}
  .footer-accordion summary{padding-bottom:14px;}
  .footer-col a{margin-bottom:9px;}
}
@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr; gap:36px 28px;}
}
@media (max-width:640px){
  /* Mobile-only footer composition: the brand block becomes the reference-style two-column
     panel, while the four navigation accordions remain below it. Desktop and tablet keep the
     existing footer grid and markup flow above. */
  .footer-top{
    grid-template-columns:1fr; column-gap:0;
    grid-template-areas:"brand"
                         "rendering" "plastering" "areas" "company";
    padding:var(--space-2xl) var(--container-pad-mobile) var(--space-md); gap:0;
  }
  .footer-brand{
    display:grid; grid-area:brand; min-width:0; align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"logo contact" "text contact" "social contact";
    column-gap:16px; padding-bottom:24px;
  }
  .footer-brand-logo{grid-area:logo;}
  .footer-brand-text{grid-area:text;}
  .footer-contact{grid-area:contact;}
  .footer-social{grid-area:social;}
  .footer-accordion--rendering{grid-area:rendering;}
  .footer-accordion--plastering{grid-area:plastering;}
  .footer-accordion--areas{grid-area:areas;}
  .footer-accordion--company{grid-area:company;}
  .footer-brand img{width:150px; max-width:100%; height:auto; margin-bottom:10px;}
  .footer-brand p{max-width:100%; margin-bottom:10px; font-size:13px; line-height:1.55;}
  .footer-social{gap:8px; margin-top:0 !important; margin-bottom:0;}
  .footer-social a{width:40px; height:40px;}
  .footer-social svg{width:18px; height:18px;}
  .footer-contact{
    align-self:stretch; min-width:0; margin-top:0; margin-bottom:0;
    padding-left:14px; border-left:1px solid rgba(184,217,54,.28);
  }
  .footer-accordion summary{padding:13px 2px;}
  .footer-accordion .footer-col{padding:0 2px 13px;}
  .footer-accordion .footer-col a{margin-bottom:9px; font-size:14px;}
  .footer-col-title{margin-top:0; margin-bottom:12px;}
  .footer-brand .footer-touch-title{font-size:14px;}
  .footer-contact-item{min-width:0; margin-bottom:11px; font-size:13px; line-height:1.45; gap:8px;}
  .footer-contact-item a{min-width:0; overflow-wrap:anywhere;}
  .footer-contact-item a[href^="mailto:"]{font-size:13px;}
  .footer-bottom-inner{padding:16px var(--container-pad-mobile); flex-direction:column; align-items:flex-start; gap:10px;}
}

/* ---- Forms ---- */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.field label{font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--mm-ink);}
.field .hint{font-size:13px; color:var(--mm-text-mute); margin-top:-2px;}
.input,.textarea,.select{
  width:100%; min-height:52px; padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--mm-border);
  font-family:var(--font-body); font-size:16px; color:var(--mm-ink); background:#fff; outline:none; transition:border-color .15s var(--ease);
}
.textarea{min-height:130px; resize:vertical;}
.input:focus,.textarea:focus,.select:focus{border-color:var(--mm-ink);}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23141719' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center;}

.option-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.option-card{position:relative;}
.option-card input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;}
.option-card .option-face{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 14px; border:1px solid var(--mm-border);
  border-radius:var(--radius-md); font-size:14px; font-weight:700; color:var(--mm-ink); min-height:64px; justify-content:center;
  transition:border-color .15s var(--ease), background-color .15s var(--ease);
}
.option-card .option-face svg{width:20px; height:20px; color:var(--mm-secondary);}
.option-card input:checked + .option-face{border-color:var(--mm-ink); background:var(--mm-primary-pale);}
.option-card input:focus-visible + .option-face{outline:2px solid var(--mm-tertiary); outline-offset:2px;}
@media (max-width:640px){ .option-grid{grid-template-columns:repeat(2,1fr);} }

.checkbox-row{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--mm-text-body); line-height:1.5;}
.checkbox-row input{margin-top:3px; width:18px; height:18px; flex-shrink:0;}
.checkbox-row a{color:var(--mm-ink); font-weight:600;}

.file-upload{border:1.5px dashed var(--mm-border); border-radius:var(--radius-md); padding:36px 20px; text-align:center; cursor:pointer; background:#fff; transition:background-color .15s var(--ease), border-color .15s var(--ease);}
.file-upload:hover,.file-upload.is-dragover{background:var(--mm-canvas-soft); border-color:var(--mm-ink);}
.file-upload svg{width:26px; height:26px; color:var(--mm-text-mute); margin:0 auto 12px;}
.file-upload .fu-title{font-size:15px; font-weight:700; color:var(--mm-ink); margin-bottom:4px;}
.file-upload .fu-sub{font-size:13px; color:var(--mm-text-mute);}
.file-chip-list{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.file-chip{font-size:12.5px; font-weight:600; background:var(--mm-canvas-soft); padding:6px 12px; border-radius:var(--radius-pill); color:var(--mm-ink); display:inline-flex; align-items:center; gap:8px;}
.file-chip button{border:none; background:none; cursor:pointer; color:var(--mm-text-mute); font-size:14px; line-height:1; padding:0;}

.form-section-title{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.form-section-title .num{
  width:30px; height:30px; border-radius:50%; background:var(--mm-ink); color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.form-section-title h3{font-size:19px;}

.form-panel{background:#fff; border-radius:var(--radius-xl); padding:36px; box-shadow:var(--shadow-level3);}
@media (max-width:640px){ .form-panel{padding:24px 20px;} }
@media (max-width:900px){
  .grid > *{min-width:0; max-width:100%;}
  .form-panel{min-width:0; max-width:100%;}
}

.form-msg{border-radius:var(--radius-md); padding:16px 18px; font-size:14px; display:flex; gap:10px; align-items:flex-start;}
.form-msg[hidden]{display:none;}
.form-msg svg{width:20px; height:20px; flex-shrink:0; margin-top:1px;}
.form-msg.success{background:#EAF7ED; color:var(--mm-positive-deep);}

/* ---- Reveal-on-scroll (subtle, respects reduced motion) ---- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none;} }

/* ---- Utility spacing/text ---- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.center{text-align:center;}
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.wrap{flex-wrap:wrap;}
.gap-sm{gap:var(--space-sm);} .gap-md{gap:var(--space-md);} .gap-lg{gap:var(--space-lg);} .gap-xl{gap:var(--space-xl);}
.cluster{display:flex; gap:16px; flex-wrap:wrap;}
@media (max-width:768px){
  .mobile-hide-standalone-whatsapp{display:none !important;}
}

/* ---- Placeholder page notice ---- */
.coming-soon{
  border:1px dashed var(--mm-border); border-radius:var(--radius-xl); padding:40px; background:var(--mm-canvas-soft);
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.coming-soon .badge{margin-bottom:4px;}

/* ---- Hero ---- */
.hero{padding:var(--space-6xl) 0 var(--space-5xl);}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.hero-media{border-radius:var(--radius-2xl); overflow:hidden; aspect-ratio:4/3;}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-media{order:-1; aspect-ratio:16/10;}
}

/* ---- Full-bleed hero banner (homepage) with transparent overlay header ---- */
body.home{margin-top:0;}
body.home .site-header{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:200;
  background:transparent; border-bottom-color:transparent; box-shadow:none;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Homepage overlay state: swap to the outline mark with a soft shadow for legibility over photography */
body.home .site-header:not(.is-scrolled) .brand-logo-solid{display:none;}
body.home .site-header:not(.is-scrolled) .brand-logo-line{display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(0,0,0,.25));}
body.home .site-header:not(.is-scrolled) .nav-link{color:#fff;}
body.home .site-header:not(.is-scrolled) .nav-link:hover{background:rgba(255,255,255,.14); color:#fff;}
body.home .site-header:not(.is-scrolled) .icon-btn,
body.home .site-header:not(.is-scrolled) .nav-toggle{color:#fff; border-color:rgba(255,255,255,.55);}
body.home .site-header:not(.is-scrolled) .icon-btn:hover,
body.home .site-header:not(.is-scrolled) .nav-toggle:hover{background:rgba(255,255,255,.14);}
body.home .site-header.is-scrolled{
  background:rgba(255,255,255,.97); border-bottom-color:var(--mm-border); box-shadow:0 4px 20px rgba(20,23,25,.08);
}
body.home .site-header.is-scrolled .brand-logo-solid{display:block;}
body.home .site-header.is-scrolled .brand-logo-line{display:none;}
@media (max-width:1140px), (min-width:1141px) and (max-width:1180px){
  /* mobile drawer icons are on a solid white panel regardless, no override needed */
  body.home .site-header:not(.is-scrolled) .nav-toggle{color:#fff; border-color:rgba(255,255,255,.6);}
}

.hero-banner{
  position:relative; overflow:hidden; color:#fff; isolation:isolate;
  min-height:min(88vh,780px);
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 64px) 0 var(--space-6xl);
  background-color:var(--mm-ink);
}
.hero-banner-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:0; display:block;}
.hero-banner-overlay{
  position:absolute; inset:0; z-index:1;
  /* left-to-right: clear over the van/left side, tinted behind the text on the right */
  background:
    linear-gradient(90deg, rgba(8,10,11,0) 0%, rgba(8,10,11,.1) 46%, rgba(8,10,11,.62) 68%, rgba(8,10,11,.85) 100%),
    linear-gradient(180deg, rgba(8,10,11,.35) 0%, rgba(8,10,11,0) 22%, rgba(8,10,11,0) 62%, rgba(8,10,11,.45) 100%);
}
.hero-banner-row{
  position:relative; z-index:2; width:100%; box-sizing:border-box;
  padding:0 max(32px, 4.5vw); display:flex; justify-content:flex-end;
}
.hero-banner-inner{max-width:640px; margin-left:auto;}
.hero-banner .eyebrow{color:#fff; opacity:.9; display:inline-block; text-align:left;}
.hero-banner h1{color:#fff; text-align:left; margin-bottom:var(--space-lg);}
@media (min-width:769px){
  .hero-banner h1{text-shadow:0 4px 6px rgba(0,0,0,.26);}
  .hero-banner h1 .gradient-text-live{
    text-shadow:
      0 0 8px rgba(90,190,110,.18),
      0 0 14px rgba(50,160,210,.10),
      0 4px 5px rgba(0,0,0,.22);
  }
}
.hero-banner .lede{color:rgba(255,255,255,.92);}
.hero-banner .btn-secondary{background:transparent; color:#fff; border-color:#fff;}
.hero-banner .btn-secondary:hover{background:rgba(255,255,255,.12);}
.hero-banner-phone{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:800; font-size:22px; margin-top:24px;}
.hero-banner-phone svg{width:24px; height:24px;}
.hero-banner-phone:hover{color:var(--mm-primary); text-decoration:none;}
.hero-trust-strip{display:flex; flex-wrap:wrap; row-gap:12px; column-gap:28px; margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.22);}
.hero-trust-strip .trust-item{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; color:#fff;}
.hero-trust-strip .trust-item svg{width:19px; height:19px; color:var(--mm-primary); flex-shrink:0;}
@media (max-width:900px){
  .hero-banner-row{padding:0 var(--container-pad-tablet); justify-content:flex-start;}
  .hero-banner-inner{max-width:none; margin-left:0;}
  .hero-banner-phone{font-size:19px;}
}

/* ---- Mobile: shorter banner photo on top, text on a plain white section below it ---- */
@media (max-width:768px){
  .hero-banner{
    display:block; position:relative; overflow:visible; isolation:auto;
    min-height:auto; padding:0; background:none; color:var(--mm-ink);
  }
  .hero-banner-img{
    position:relative; inset:auto; width:100%; height:44vh; min-height:240px; max-height:340px;
    object-position:center 32%;
  }
  .hero-banner-overlay{display:none;}
  .hero-banner-row{
    position:static; z-index:auto; padding:28px var(--container-pad-mobile) 4px;
    background:var(--mm-canvas); display:block;
  }
  .hero-banner-inner{max-width:none; margin:0; text-align:center;}
  .hero-banner .eyebrow{color:var(--mm-text-mute); opacity:1; text-align:center;}
  .hero-banner h1{color:var(--mm-ink); text-align:center;}
  .hero-banner .lede{color:var(--mm-text-body); margin-left:auto; margin-right:auto;}
  .hero-banner-row .cluster{justify-content:center; flex-wrap:nowrap; gap:8px;}
  .hero-banner-row .cluster .btn-lg{min-height:48px; padding:12px 10px; font-size:14px;}
  .hero-banner .btn-secondary{background:var(--mm-canvas); color:var(--mm-ink); border-color:var(--mm-ink);}
  .hero-banner .btn-secondary:hover{background:var(--mm-canvas-soft);}
  .hero-banner-phone{color:var(--mm-ink); display:flex; width:fit-content; margin:12px auto 0;}
  .hero-trust-strip{border-top-color:var(--mm-border); padding-bottom:24px; justify-content:center;}
  .hero-trust-strip .trust-item{color:var(--mm-ink);}
  .hero-trust-strip .trust-item-hide-mobile{display:none;}
  /* header still floats transparently over the top of the (now shorter) photo until scrolled */
}

@media (max-width:640px){
  .hero-banner h1{font-size:36px;}
  .hero-banner .eyebrow{font-size:12px; letter-spacing:-0.03em; white-space:nowrap;}
  .hero-banner .lede{margin-bottom:24px !important;}
  .hero-banner-row .cluster{flex-direction:column; align-items:stretch; gap:8px;}
  .hero-banner-row .cluster .btn-lg{width:100%; font-size:18px;}
  .hero-banner-phone{margin-top:8px;}
  .hero-trust-strip{margin-top:8px;}
}

/* ---- Areas ticker — embedded flush at the top of the dark trust band, same background ---- */
.trust-band{padding-top:0; padding-bottom:var(--space-2xl);}
.trust-band > .container{padding-top:var(--space-xl);}
@media (max-width:640px){
  .trust-band{padding-bottom:var(--space-lg);}
  .trust-band > .container{padding-top:var(--space-lg);}
}
.area-ticker{background:transparent; overflow:hidden; padding:16px 0;}
.ticker-track{display:inline-flex; align-items:center; white-space:nowrap; animation:mm-ticker-scroll 46s linear infinite; will-change:transform;}
.ticker-set{display:inline-flex; align-items:center;}
.ticker-item{font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#fff;}
.ticker-dot{width:5px; height:5px; border-radius:50%; background:var(--mm-primary); margin:0 22px; flex-shrink:0;}
@keyframes mm-ticker-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@media (max-width:640px){
  .area-ticker{padding:13px 0;}
  .ticker-item{font-size:12px;}
  .ticker-dot{margin:0 16px;}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none; flex-wrap:wrap; white-space:normal; padding:0 var(--container-pad-mobile);}
  .ticker-set:nth-child(2){display:none;}
}
@media (max-width:480px){
  .hero-banner-img{height:38vh; min-height:210px;}
}

/* ---- Interior-page photo hero — full-bleed photo, dark overlay, tag pills, heading, optional
   stat row. Used for the Our Work page and each case-study page. ---- */
.cs-hero{position:relative; overflow:hidden; display:flex; align-items:flex-end; min-height:520px; color:#fff;}
.cs-hero-photo{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.cs-hero-photo .photo-frame{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; border-radius:0;}
.cs-hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.cs-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,12,13,.12) 0%, rgba(10,12,13,.5) 55%, rgba(10,12,13,.86) 100%);
}
.cs-hero-content{position:relative; z-index:2; width:100%; max-width:var(--container-max); margin:0 auto; padding:56px var(--container-pad-desktop) 44px;}
/* Our Work page uses the wider 1440px container throughout (gallery and hero content). */
.our-work-page .cs-hero-content{max-width:var(--container-wide-max);}
/* Keep the gallery's internal horizontal selectors from widening the page on small screens. */
.our-work-page{overflow-x:hidden;}
html:has(body.our-work-page){overflow-x:hidden;}
@media (max-width:767px){
  .our-work-hub-hero .render-hub-hero-media{min-height:0;}
}
.cs-hero-tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.cs-hero-tag{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.28);
}
.cs-hero-tag.is-primary{background:var(--mm-primary); color:var(--mm-ink); border-color:transparent;}
.cs-hero h1{color:#fff; margin:0 0 12px; max-width:16ch;}
.cs-hero p.lede{color:rgba(255,255,255,.88); margin:0 0 8px; max-width:56ch;}
.cs-hero-stats{display:flex; flex-wrap:wrap; gap:28px 44px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.22);}
.cs-hero-stat-value{display:block; font-family:var(--font-display); font-weight:800; font-size:24px; color:#fff; line-height:1;}
.cs-hero-stat-value.is-lime{color:var(--mm-primary);}
.cs-hero-stat-label{display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:6px;}
@media (max-width:640px){
  .cs-hero{min-height:400px;}
  .cs-hero-content{padding:36px var(--container-pad-mobile) 32px;}
  .cs-hero h1{font-size:30px; max-width:none;}
  .cs-hero-stats{gap:18px 26px; margin-top:20px; padding-top:18px;}
  .cs-hero-stat-value{font-size:20px;}
}

/* ---- Page hero — split layout (heading/intro/CTAs left, framed photo + floating trust
   badge right) used on hub/landing pages such as /rendering. A distinct pattern from the
   homepage's full-bleed hero and the our-work/case-study photo hero. ---- */
.page-hero{padding:var(--space-xl) 0 var(--space-3xl);}
.page-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.page-hero-text{max-width:520px;}
.page-hero-text .lede{margin-bottom:28px;}
.page-hero-text .cluster{margin-bottom:24px;}
.page-hero-media{position:relative;}
.page-hero-media .photo-frame{border-radius:var(--radius-lg);}
.page-hero-badge{
  position:absolute; top:20px; right:20px; z-index:2; max-width:220px;
  background:var(--mm-canvas); border-radius:var(--radius-lg); box-shadow:0 16px 32px rgba(20,22,20,.16);
  padding:14px 16px; display:flex; align-items:center; gap:12px;
}
.page-hero-badge-icon{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:rgba(160,209,52,.16);
  display:flex; align-items:center; justify-content:center; color:var(--mm-primary-active);
}
.page-hero-badge-icon svg{width:18px; height:18px;}
.page-hero-badge-text{font-size:13px; font-weight:700; color:var(--mm-ink); line-height:1.3;}
.hero-badge-mobile-text{display:none;}
@keyframes hero-badge-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
@media (max-width:900px){
  .page-hero-grid{grid-template-columns:1fr; gap:28px;}
  .page-hero-media{order:-1; max-width:420px;}
}
@media (max-width:640px){
  .page-hero{padding:var(--space-lg) 0 var(--space-2xl);}
  .page-hero-media{margin-bottom:36px;}
  .page-hero-badge{top:auto; right:10px; bottom:-28px; width:max-content; max-width:calc(100% - 20px); padding:6px 8px; gap:6px; border-radius:10px; background:rgba(255,255,255,.7); border-color:rgba(16,24,32,.1); box-shadow:0 6px 16px rgba(16,24,32,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:hero-badge-float 3.6s ease-in-out infinite; will-change:transform;}
  .page-hero-badge-icon{width:24px; height:24px;}
  .page-hero-badge-icon svg{width:13px; height:13px;}
  .page-hero-badge-text{font-size:11px; line-height:1.2;}
}

/* ---- Shared legal pages — photographic hero, scannable contents and numbered long-form sections ---- */
.legal-page{overflow:hidden;}
.legal-hero{
  position:relative; min-height:430px; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
  color:#fff; background:var(--mm-ink);
}
.legal-hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:-2;}
.legal-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(8,10,11,.12) 0%,rgba(8,10,11,.42) 42%,rgba(8,10,11,.84) 72%,rgba(8,10,11,.94) 100%),
    linear-gradient(180deg,rgba(8,10,11,.18),rgba(8,10,11,.5));
}
.legal-hero-panel{
  position:relative; width:min(760px,100%); margin-left:auto; padding:64px max(var(--container-pad-desktop),4.5vw) 58px;
  background:rgba(8,10,11,.78); border-left:3px solid var(--mm-primary);
}
.legal-hero .eyebrow{color:var(--mm-primary); text-align:left; margin-bottom:16px;}
.legal-hero h1{color:#fff; text-align:left; margin:0 0 16px;}
.legal-hero p{max-width:62ch; color:rgba(255,255,255,.86); line-height:1.6; margin:0;}
.legal-hero-badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding:9px 13px;
  border:1px solid rgba(255,255,255,.24); border-radius:var(--radius-pill); background:rgba(255,255,255,.1);
  color:#fff; font-size:12.5px; line-height:1.2;
}
.legal-hero-badge span{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--mm-ink); background:var(--mm-primary);}
.legal-hero-badge svg{width:14px; height:14px;}
.legal-main{padding-top:var(--space-5xl);}
.legal-layout{display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.7fr); gap:56px; align-items:start;}
.legal-sidebar{position:sticky; top:calc(var(--header-h) + 24px); display:flex; flex-direction:column; gap:18px;}
.legal-toc,.legal-trust{border:1px solid var(--mm-border); border-radius:var(--radius-lg); background:var(--mm-canvas);}
.legal-toc{padding:24px;}
.legal-toc h2{font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px;}
.legal-toc ol{list-style:none; padding:0; margin:0;}
.legal-toc a{
  display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:10px 0; color:var(--mm-text-body);
  text-decoration:none; border-bottom:1px solid var(--mm-border); font-size:14px; line-height:1.35;
}
.legal-toc li:last-child a{border-bottom:0;}
.legal-toc a span:first-child{color:var(--mm-primary-active); font-family:var(--font-display); font-weight:800;}
.legal-toc a:hover,.legal-toc a:focus-visible{color:var(--mm-ink);}
.legal-trust{padding:24px; background:var(--mm-canvas-soft);}
.legal-trust-icon,.legal-section-icon{display:grid; place-items:center; color:var(--mm-primary-active); background:var(--mm-primary-pale); border-radius:50%;}
.legal-trust-icon{width:48px; height:48px; margin-bottom:16px;}
.legal-trust-icon svg{width:23px; height:23px;}
.legal-trust h2{font-size:20px; margin:0 0 8px;}
.legal-trust p{font-size:14px; line-height:1.55; color:var(--mm-text-body); margin:0;}
.legal-content{min-width:0;}
.legal-section{
  display:grid; grid-template-columns:62px minmax(0,1fr); gap:20px; padding:0 0 40px; margin:0 0 40px;
  border-bottom:1px solid var(--mm-border); scroll-margin-top:calc(var(--header-h) + 24px);
}
.legal-section:last-child{margin-bottom:0; border-bottom:0;}
.legal-section-mark{display:flex; flex-direction:column; align-items:center; gap:12px;}
.legal-section-mark>span:first-child{font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--mm-primary-active);}
.legal-section-icon{width:44px; height:44px;}
.legal-section-icon svg{width:21px; height:21px;}
.legal-section-body h2{font-size:28px; line-height:1.12; margin:0 0 14px;}
.legal-section-body h3{font-size:18px; margin:24px 0 8px;}
.legal-section-body p,.legal-section-body li{color:var(--mm-text-body); font-size:16px; line-height:1.7;}
.legal-section-body p{margin:0 0 16px;}
.legal-section-body p:last-child{margin-bottom:0;}
.legal-section-body ul{margin:0 0 16px; padding-left:22px;}
.legal-section-body li{margin-bottom:8px;}
.legal-section-body a{color:var(--mm-primary-active); text-decoration:underline; text-underline-offset:3px;}
.legal-section-body code{padding:2px 5px; border-radius:5px; background:var(--mm-canvas-soft); color:var(--mm-ink); font-size:.9em;}
.legal-toc a:focus-visible,.legal-section-body a:focus-visible{outline:3px solid var(--mm-primary); outline-offset:3px; border-radius:4px;}
@media (max-width:900px){
  .legal-hero{min-height:390px;}
  .legal-hero-panel{width:100%; padding:52px var(--container-pad-tablet) 44px;}
  .legal-layout{grid-template-columns:1fr; gap:32px;}
  .legal-sidebar{position:static;}
  .legal-toc{order:0;}
  .legal-trust{order:1;}
  .legal-content{order:2;}
}
@media (max-width:640px){
  .legal-hero{display:block; min-height:0; overflow:visible; background:var(--mm-canvas); color:var(--mm-ink);}
  .legal-hero>img{position:relative; inset:auto; width:100%; height:240px; object-position:center 36%; z-index:0; display:block;}
  .legal-hero::after{display:none;}
  .legal-hero-panel{width:auto; margin:0; padding:30px var(--container-pad-mobile) 34px; background:var(--mm-canvas); border-left:0; border-bottom:1px solid var(--mm-border);}
  .legal-hero .eyebrow{color:var(--mm-text-mute); text-align:center;}
  .legal-hero h1{color:var(--mm-ink); text-align:center; font-size:clamp(34px,10vw,46px);}
  .legal-hero p{color:var(--mm-text-body); text-align:center; font-size:16px;}
  .legal-hero-badge{display:flex; width:fit-content; margin:22px auto 0; border-color:var(--mm-border); background:var(--mm-canvas-soft); color:var(--mm-ink);}
  .legal-main{padding-top:var(--space-3xl);}
  .legal-toc{padding:18px 20px;}
  .legal-toc h2{margin-bottom:8px;}
  .legal-toc a{min-height:24px; padding:9px 0; font-size:14px;}
  .legal-section{grid-template-columns:42px minmax(0,1fr); gap:14px; padding-bottom:30px; margin-bottom:30px;}
  .legal-section-mark{gap:9px;}
  .legal-section-mark>span:first-child{font-size:15px;}
  .legal-section-icon{width:36px; height:36px;}
  .legal-section-icon svg{width:18px; height:18px;}
  .legal-section-body h2{font-size:23px;}
  .legal-section-body p,.legal-section-body li{font-size:15px; line-height:1.65;}
}

/* ---- Quick-answer info box — icon badge, eyebrow, heading, short paragraph and a 2-col
   checklist, used underneath a hub page's page-hero. ---- */
.quick-answer-box{
  display:flex; gap:28px; align-items:flex-start; background:var(--mm-canvas);
  border:var(--border-level1); border-radius:var(--radius-lg); padding:36px;
}
.quick-answer-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:rgba(160,209,52,.16);
  display:flex; align-items:center; justify-content:center; color:var(--mm-primary-active);
}
.quick-answer-icon svg{width:26px; height:26px;}
.quick-answer-body{flex:1 1 auto;}
.quick-answer-body h2{margin-bottom:12px;}
.quick-answer-body .text-body{margin-bottom:20px;}
.quick-answer-checklist{display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;}
.quick-answer-check{
  display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:600; color:var(--mm-ink);
}
.qa-check-icon{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:rgba(160,209,52,.16);
  color:var(--mm-primary-active); display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.qa-check-icon svg{width:12px; height:12px;}
@media (max-width:640px){
  .quick-answer-box{flex-direction:column; padding:24px; gap:16px;}
  .quick-answer-checklist{grid-template-columns:1fr;}
}

/* ---- Icon service cards — same card-service/card-body DNA as the photo cards, with a small
   icon badge instead of a photo. Used for the compact overview grid under a hub page's
   page-hero + quick-answer box. ---- */
.card-service-icon .card-body{padding:24px 22px 26px;}
.card-icon-badge{
  width:52px; height:52px; border-radius:var(--radius-md); background:var(--mm-canvas-soft);
  display:flex; align-items:center; justify-content:center; color:var(--mm-primary-active); margin-bottom:18px;
}
.card-icon-badge svg{width:24px; height:24px;}
.card-service-icon .card-link{color:var(--mm-primary-active);}

/* ---- Misc section-specific ---- */
.transform-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
@media (max-width:1024px){ .transform-grid{grid-template-columns:1fr;} }

.transform-stack .ba-slider{max-width:1180px; margin:0 auto;}
.transform-stack .transform-intro{max-width:640px; margin:0 auto 40px;}

/* ---- "Recent transformations" project collage — editorial asymmetric grid ----
   One tall feature card (Project 01) spans the full height on the left; the right side stacks
   a wide card (Project 02) over two standard-width cards (Project 03 — a live before/after
   slider — and Project 04). Plain CSS Grid with grid-template-areas, ordinary rounded corners,
   directional gradients per card so overlay text stays readable without hiding the photography. */
.mm-project-collage{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"p1 p2 p2" "p1 p3 p4";
  gap:16px;
  aspect-ratio:1.85;
}
.mm-project-card--tall{grid-area:p1;}
.mm-project-card--wide{grid-area:p2;}
.mm-project-card--compare{grid-area:p3;}
.mm-project-card--standard{grid-area:p4;}

.mm-project-card{
  position:relative; display:block; overflow:hidden; text-decoration:none; color:inherit;
  border-radius:var(--radius-xl); background:var(--mm-canvas-soft);
}
.mm-project-image{position:absolute; inset:0;}
/* The shared photo() helper wraps every image in a .photo-frame box with its own fixed
   aspect-ratio (e.g. 4:3) for use in normal card grids. Inside the collage, the card itself
   already dictates the shape (grid area / mobile aspect-ratio), so the frame must be forced
   to stretch full-bleed rather than keeping its own ratio — otherwise a real photo only fills
   a small ratio-locked box at the top of the tall/standard cards, leaving empty space below. */
.mm-project-image .photo-frame{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto;}
.mm-project-image img,.mm-project-image .ph-image{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--ease);}
.mm-project-card:hover .mm-project-image img{transform:scale(1.03);}

/* Directional gradients — bottom-up for the tall/standard/compare cards, left-to-right for the
   wide card (so its text sits in a dark left band while the photo stays visible on the right). */
.mm-project-gradient{position:absolute; inset:0; z-index:2; pointer-events:none;}
.mm-project-card--tall .mm-project-gradient,
.mm-project-card--standard .mm-project-gradient,
.mm-project-card--compare .mm-project-gradient{
  background:linear-gradient(to top, rgba(20,23,25,.94) 0%, rgba(20,23,25,.68) 30%, rgba(20,23,25,.18) 55%, rgba(20,23,25,0) 72%);
}
.mm-project-card--wide .mm-project-gradient{
  background:linear-gradient(90deg, rgba(20,23,25,.96) 0%, rgba(20,23,25,.86) 22%, rgba(20,23,25,.48) 42%, rgba(20,23,25,.10) 62%, rgba(20,23,25,0) 75%);
}
/* Subtle hover darkening — the only "gradient strengthening" feedback, no shape change */
.mm-project-card::after{content:''; position:absolute; inset:0; z-index:3; background:rgba(8,10,11,.1); opacity:0; transition:opacity .3s var(--ease); pointer-events:none;}
.mm-project-card:hover::after{opacity:1;}

.mm-project-content{position:absolute; z-index:4; color:#fff;}
.mm-project-card--tall .mm-project-content,
.mm-project-card--standard .mm-project-content,
.mm-project-card--compare .mm-project-content{left:20px; right:20px; bottom:18px;}
.mm-project-card--wide .mm-project-content{left:28px; right:28px; top:50%; transform:translateY(-50%); max-width:380px;}
.mm-project-number{
  display:inline-block; position:relative; padding-bottom:10px; margin-bottom:8px;
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mm-primary);
}
.mm-project-number::after{content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--mm-primary);}
.mm-project-title{color:#fff; font-size:19px; line-height:1.25; text-align:left; margin:0 0 6px;}
.mm-project-card--tall .mm-project-title{font-size:27px; max-width:19ch;}
.mm-project-card--wide .mm-project-title{font-size:23px;}
.mm-project-description{color:rgba(255,255,255,.82); font-size:14px; line-height:1.55; margin:0 0 12px; max-width:34ch;}
.mm-project-link{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#fff;}
.mm-project-link svg{width:16px; height:16px; transition:transform .25s var(--ease);}
.mm-project-card:hover .mm-project-link svg{transform:translateX(4px);}


@media (prefers-reduced-motion:reduce){
  .mm-project-image img,.mm-project-card::after,.mm-project-link svg{transition:none;}
}
/* Tablet: keep the tall feature card as the editorial anchor, stack the other three beside it */
@media (max-width:1024px){
  .mm-project-collage{
    grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, 220px);
    grid-template-areas:"p1 p2" "p1 p3" "p1 p4";
    aspect-ratio:auto; gap:14px;
  }
  .mm-project-card--wide .mm-project-content{max-width:none;}
}
/* Mobile: stack all four as plain, full-width cards in order */
@media (max-width:640px){
  .mm-project-collage{display:flex; flex-direction:column; gap:14px; aspect-ratio:auto;}
  .mm-project-card{aspect-ratio:4/3;}
  .mm-project-card--tall .mm-project-title{font-size:22px;}
}

.story-seq{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.story-seq .story-step{display:flex; flex-direction:column; gap:8px;}
.story-seq .story-step .ph-image{border-radius:var(--radius-md);}
.story-seq .story-step .story-label{font-size:12px; font-weight:700; text-align:center; color:var(--mm-text-mute); text-transform:uppercase; letter-spacing:.03em;}
@media (max-width:1024px){ .story-seq{grid-template-columns:repeat(3,1fr); row-gap:20px;} }
@media (max-width:640px){ .story-seq{grid-template-columns:repeat(2,1fr);} }

.proof-cols{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media (max-width:900px){ .proof-cols{grid-template-columns:1fr;} }

/* ==========================================================================
   Our Work — filterable multi-image project viewer
   ========================================================================== */
.gallery-section{--gallery-gap:14px; overflow:clip; scroll-margin-top:calc(var(--header-h) + 16px);}
.gallery-section-controls{display:flex; flex-direction:column; gap:16px; min-width:0;}
.gallery-section-head{margin:0 auto;}
.gallery-project-helper{display:block; align-self:flex-end; margin:0; color:var(--mm-text-mute); font-size:12px; font-weight:700; line-height:1.2; text-align:right;}
.gallery-filters{display:flex; flex-wrap:nowrap; gap:8px; margin:0; overflow-x:auto; scrollbar-width:none;}
.gallery-filters::-webkit-scrollbar{display:none;}
.gallery-filter-pill{
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:var(--radius-pill); white-space:nowrap;
  border:var(--border-level1); background:var(--mm-canvas); color:var(--mm-text-body);
  font-size:12px; font-weight:700; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.gallery-filter-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--mm-text-mute); flex-shrink:0;}
.gallery-filter-pill:hover{border-color:var(--mm-primary-active);}
.gallery-filter-pill.is-active{background:var(--mm-ink); color:#fff; border-color:var(--mm-ink);}
.gallery-filter-pill.is-active .dot{background:var(--mm-primary);}

.gallery-viewer{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(clamp(280px,29%,420px),.9fr); gap:var(--gallery-gap); align-items:start;}
.gallery-stage{display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:var(--gallery-gap); min-width:0; align-items:start;}
.gallery-main{
  position:relative; border-radius:var(--radius-2xl); overflow:hidden; background:var(--mm-canvas-soft);
  width:100%; aspect-ratio:4/3; min-width:0;
}
.gallery-main-photo{position:absolute; inset:0; width:100%; height:100%;}
.gallery-main-image{display:block; width:100%; height:100%; object-fit:cover;}
.gallery-main-counters{position:absolute; top:16px; left:16px; z-index:2; display:flex; flex-wrap:wrap; gap:8px;}
.gallery-main-counters span{
  display:inline-flex; align-items:center; min-height:34px; background:rgba(20,23,25,.74); color:#fff;
  font-size:13px; font-weight:700; padding:6px 12px; border-radius:var(--radius-pill); backdrop-filter:blur(4px);
}
.gallery-empty{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; background:var(--mm-canvas-soft);
}
.gallery-empty[hidden]{display:none;}
.gallery-empty svg{width:32px; height:32px; color:var(--mm-text-mute); margin-bottom:4px;}
.gallery-empty p{font-weight:700; color:var(--mm-ink); margin:0;}
.gallery-nav{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-level3); transition:background .2s var(--ease);
}
.gallery-nav svg{width:20px; height:20px; color:var(--mm-ink);}
.gallery-nav:hover{background:var(--mm-primary);}
.gallery-nav:disabled{opacity:.45; cursor:default; background:#fff;}
.gallery-image-prev{left:16px;}
.gallery-image-next{right:16px;}

.gallery-image-rail{
  display:flex; flex-direction:column; align-items:center; align-self:stretch; gap:10px; min-width:0; min-height:0; padding:0 11px; box-sizing:border-box;
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-y; cursor:grab;
}
.gallery-image-rail::-webkit-scrollbar{display:none; width:0; height:0;}
.gallery-image-rail.is-dragging{cursor:grabbing; user-select:none;}
.gallery-image-rail[hidden]{display:none;}
.gallery-image-thumb{
  display:flex; align-items:center; justify-content:center; width:88px; flex:0 0 auto; aspect-ratio:4/3; padding:0; overflow:hidden;
  border:2px solid transparent; border-radius:var(--radius-lg); background:var(--mm-canvas-soft); color:var(--mm-ink);
  font:700 14px/1.2 var(--font-body); cursor:pointer; transition:border-color .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.gallery-image-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.gallery-image-thumb:hover{border-color:var(--mm-primary-active); opacity:1;}
.gallery-image-thumb.is-active{border-color:var(--mm-primary-active); background:var(--mm-primary-pale);}

.gallery-detail{
  position:relative; display:flex; flex-direction:column; background:var(--mm-canvas); border:var(--border-level1);
  border-radius:var(--radius-2xl); padding:28px; overflow:hidden; min-width:0; height:580px; box-sizing:border-box;
}
.gallery-detail[hidden]{display:none;}
.gallery-detail .grad-hairline{position:absolute; top:0; left:0; right:0; height:3px; background:var(--mm-brand-gradient);}
.gallery-detail-content{flex:1; min-height:0; overflow:hidden;}
.gallery-progress{height:4px; border-radius:var(--radius-pill); background:var(--mm-canvas-soft); overflow:hidden; margin-top:14px;}
.gallery-progress-fill{height:100%; border-radius:var(--radius-pill); background:var(--mm-primary-active); transition:width .3s var(--ease);}
.gallery-detail-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; margin-bottom:16px;}
.gallery-detail-title{font-size:26px; margin:0 0 8px;}
.gallery-detail-location{display:flex; align-items:center; gap:7px; margin:0 0 14px; color:var(--mm-ink); font-size:14px; font-weight:700;}
.gallery-detail-location svg{width:16px; height:16px; color:var(--mm-primary-active); flex:0 0 auto;}
.gallery-detail-summary{font-size:12px; line-height:1.55; margin:0 0 18px;}
.gallery-detail-meta{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 0; border-top:var(--border-level1); border-bottom:var(--border-level1); margin-bottom:16px;}
.gallery-detail-meta > div:last-child:nth-child(odd){grid-column:1/-1;}
.gallery-detail-meta .meta-label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mm-text-mute); margin-bottom:4px;}
.gallery-detail-meta .meta-value{display:block; font-size:12px; font-weight:700; color:var(--mm-ink);}
.gallery-detail-points{list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:10px;}
.gallery-detail-points li{position:relative; padding-left:18px; font-size:12px; color:var(--mm-text-body); line-height:1.5;}
.gallery-detail-points li::before{content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--mm-primary-active);}
.gallery-detail-more-slot{min-height:0; flex-shrink:0;}
.gallery-detail-more-slot:not(:empty){margin-top:12px;}
.gallery-detail-more-btn{background:none; border:0; padding:0; font-size:13px; font-weight:700; color:var(--mm-primary-active); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.gallery-detail-more-btn:hover{color:var(--mm-ink);}

/* Optional extended project content. The trigger is not rendered without data. */
.gallery-desc-modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;}
.gallery-desc-modal[hidden]{display:none;}
.gallery-desc-modal-backdrop{position:absolute; inset:0; background:rgba(20,23,25,.55);}
.gallery-desc-modal-panel{
  position:relative; z-index:1; background:#fff; border-radius:var(--radius-2xl); padding:32px;
  max-width:520px; width:100%; max-height:80vh; overflow-y:auto; box-shadow:var(--shadow-level3);
}
.gallery-desc-modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:0;
  background:var(--mm-canvas-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.gallery-desc-modal-close svg{width:16px; height:16px; color:var(--mm-ink);}
.gallery-desc-modal-close:hover{background:var(--mm-primary-pale);}
.gallery-desc-modal-badge{margin-bottom:12px;}
.gallery-desc-modal-panel h3{font-size:22px; margin:0 0 16px; padding-right:28px;}
.gallery-desc-modal-content{color:var(--mm-text-body); font-size:14px; line-height:1.6;}
.gallery-desc-modal-content p{margin:0 0 12px;}
.gallery-desc-modal-content p:last-child{margin-bottom:0;}
.gallery-desc-modal-section + .gallery-desc-modal-section{margin-top:18px;}
.gallery-desc-modal-section h4{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--mm-text-mute); margin:0 0 8px;}
.gallery-desc-modal-meta{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0;}
.gallery-desc-modal-meta dt{font-weight:700; color:var(--mm-ink);}
.gallery-desc-modal-meta dd{margin:0;}
.gallery-desc-modal-points{margin:0; padding-left:20px;}
.gallery-desc-modal-points li + li{margin-top:8px;}

.gallery-project-selector{display:grid; grid-template-columns:40px minmax(0,1fr) 40px; align-items:center; gap:12px; margin:0; min-width:0;}
.gallery-project-cards{display:flex; gap:12px; min-width:0; overflow-x:auto; scroll-behavior:smooth; padding:2px 2px 8px; scrollbar-width:thin; scrollbar-color:var(--mm-border) transparent;}
.gallery-project-cards::-webkit-scrollbar{height:6px;}
.gallery-project-cards::-webkit-scrollbar-thumb{background:var(--mm-border); border-radius:var(--radius-pill);}
.gallery-project-card{
  flex:0 0 188px; display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:10px;
  width:188px; height:88px; min-width:0; padding:8px; box-sizing:border-box; overflow:hidden;
  border:var(--border-level1); border-radius:var(--radius-lg); background:var(--mm-canvas-soft); text-align:left;
  color:var(--mm-ink); cursor:pointer; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.gallery-project-card[hidden]{display:none;}
.gallery-project-card:hover{border-color:var(--mm-primary-active); box-shadow:var(--shadow-level2);}
.gallery-project-card.is-active{border-color:var(--mm-primary-active); box-shadow:0 0 0 1px var(--mm-primary-active); background:var(--mm-primary-pale);}
.gallery-project-card-media{display:block; width:72px; height:72px; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; background:var(--mm-canvas);}
.gallery-project-card-media img{display:block; width:100%; height:100%; object-fit:cover;}
.gallery-project-card-copy{display:flex; min-width:0; flex-direction:column; justify-content:center; gap:4px;}
.gallery-project-card-title{display:-webkit-box; overflow:hidden; color:var(--mm-ink); font-size:12px; font-weight:700; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.gallery-project-card-location{display:block; overflow:hidden; color:var(--mm-text-mute); font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap;}
.gallery-project-nav{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:50%;
  border:var(--border-level1); background:var(--mm-canvas); cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.gallery-project-nav:hover{border-color:var(--mm-primary-active); background:var(--mm-primary-pale);}
.gallery-project-nav:disabled{opacity:.4; cursor:default; background:var(--mm-canvas);}
.gallery-project-nav svg{width:17px; height:17px; color:var(--mm-ink);}
.gallery-project-mobile-counter{display:none;}

@media (max-width:1180px){
  .gallery-viewer{grid-template-columns:1fr;}
  .gallery-stage{display:flex; flex-direction:column;}
  .gallery-main{width:100%;}
  .gallery-image-rail{width:100%; flex-direction:row; justify-content:flex-start; align-self:auto; overflow-x:auto; overflow-y:hidden; padding:0 0 4px; touch-action:pan-x pan-y;}
  .gallery-image-thumb{flex:0 0 88px; width:88px;}
  .gallery-detail{width:100%; height:auto;}
  .gallery-detail-content{overflow:visible;}
}
@media (min-width:1181px) and (max-width:1280px){
  .gallery-viewer{align-items:start;}
  .gallery-stage{align-self:start;}
  .gallery-detail{height:auto; min-height:0;}
}
@media (max-width:640px){
  .gallery-section-controls{gap:8px;}
  .gallery-viewer{gap:8px;}
  .gallery-stage{gap:8px;}
  .gallery-image-rail{padding:0;}
  .gallery-filters{margin:0 -20px; padding:0 20px;}
  .gallery-project-selector{grid-template-columns:40px minmax(0,1fr) 40px; grid-template-rows:auto auto; gap:8px 12px; margin:0;}
  .gallery-projects-prev{grid-column:1; grid-row:1;}
  .gallery-project-mobile-counter{display:flex; grid-column:2; grid-row:1; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border-radius:var(--radius-pill); background:var(--mm-ink); color:#fff; font-size:12px; font-weight:700; white-space:nowrap;}
  .gallery-projects-next{grid-column:3; grid-row:1;}
  .gallery-project-cards{grid-column:1/-1; grid-row:2; padding:0 2px 8px;}
  .gallery-main-counters{top:12px; left:12px; right:12px;}
  .gallery-main-counters .gallery-project-counter{display:none;}
  .gallery-main-counters span{min-height:30px; padding:5px 10px; font-size:12px;}
  .gallery-nav{width:40px; height:40px;}
  .gallery-image-prev{left:12px;}
  .gallery-image-next{right:12px;}
  .gallery-image-thumb{flex-basis:76px; width:76px;}
  .gallery-detail{padding:22px;}
  .gallery-detail-top{align-items:flex-start; flex-direction:column-reverse; gap:8px;}
  .gallery-detail-title{font-size:23px;}
  .gallery-detail-meta{grid-template-columns:1fr;}
  .gallery-detail-meta > div:last-child:nth-child(odd){grid-column:auto;}
  .gallery-project-card{flex-basis:188px; width:188px; height:88px;}
}

/* ==========================================================================
   How We Apply — process tabs (stat cards + numbered timeline steps)
   ========================================================================== */
.process-tabs{display:flex; gap:0; overflow-x:auto; border-bottom:var(--border-level1); margin-bottom:40px;}
.process-tab-btn{
  flex:0 0 auto; padding:14px 4px; margin-right:28px; background:none; border:none; border-bottom:3px solid transparent;
  font-size:15px; font-weight:700; color:var(--mm-text-mute); cursor:pointer; white-space:nowrap; transition:color .2s var(--ease), border-color .2s var(--ease);
}
.process-tab-btn:hover{color:var(--mm-ink);}
.process-tab-btn.is-active{color:var(--mm-ink); border-bottom-color:var(--mm-primary-active);}

.process-panel[hidden]{display:none;}

.process-stats{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:44px;}
.process-stat-card{background:var(--mm-ink); border-radius:var(--radius-2xl); padding:26px 28px;}
.process-stat-label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mm-primary); margin-bottom:10px; opacity:.8;}
.process-stat-value{display:block; font-family:var(--font-display); font-weight:800; font-size:36px; line-height:1.05; color:var(--mm-primary); margin-bottom:8px;}
.process-stat-caption{display:block; font-size:14px; color:var(--text-on-dark-mute);}

.process-steps-timeline{display:flex; flex-direction:column;}
.process-step-row{
  display:grid; grid-template-columns:44px 1fr; gap:20px; position:relative;
  background:var(--mm-canvas); border:var(--border-level1); border-radius:var(--radius-xl);
  padding:24px 24px 24px 20px; margin-bottom:20px;
}
.process-step-row:last-child{margin-bottom:0;}
.process-step-row:hover{border-color:var(--mm-primary-active); box-shadow:var(--shadow-level3);}
.process-step-num-col{position:relative; display:flex; justify-content:center;}
.process-step-num{
  width:40px; height:40px; border-radius:50%; background:var(--mm-ink); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:14px; z-index:1;
}
.process-step-row:not(:last-child) .process-step-num-col::after{
  content:''; position:absolute; top:40px; bottom:-44px; left:50%; width:2px; background:var(--mm-border); transform:translateX(-50%); z-index:0;
}
.process-step-content h3{font-size:19px; margin-bottom:8px;}
.process-step-content p{color:var(--mm-text-body); font-size:15px; margin-bottom:14px;}

.process-cta-row{
  display:flex; align-items:center; gap:12px; padding:20px 24px; background:var(--mm-canvas-soft); border-radius:var(--radius-lg); margin-top:8px;
}
.process-cta-row svg{width:18px; height:18px; color:var(--mm-primary-active); flex-shrink:0;}
.process-cta-row span{font-size:14px; color:var(--mm-text-body);}
.process-cta-row a{color:var(--mm-ink); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
.process-swipe-control,.process-swipe-helper,.process-tab-progress,.process-card-progress{display:none;}

@media (max-width:640px){
  .process-stats{grid-template-columns:1fr;}
  .process-stat-value{font-size:30px;}
  .process-step-row{padding:18px 16px 18px 14px; gap:14px;}
}

@media (max-width:767px){
  .process-intro{margin-bottom:18px !important;}
  .process-swipe-control{
    display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-width:0; margin:0 auto 18px;
  }
  .process-swipe-arrow-btn{
    display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; padding:0; border:1px solid var(--mm-border);
    border-radius:50%; background:#fff; color:var(--mm-ink); box-shadow:0 4px 12px rgba(20,23,25,.06); cursor:pointer;
    transition:opacity .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
  }
  .process-swipe-arrow-btn svg{width:21px; height:21px;}
  .process-swipe-arrow-btn:not(:disabled):hover{box-shadow:0 6px 16px rgba(20,23,25,.1); transform:translateY(-1px);}
  .process-swipe-arrow-btn:not(:disabled):active{transform:translateY(0);}
  .process-swipe-arrow-btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none;}
  .process-swipe-helper{
    display:flex; align-items:center; justify-content:center; gap:9px; flex:0 1 auto; width:max-content; max-width:calc(100% - 112px);
    min-height:56px; margin:0; padding:0 20px; border-radius:999px; background:var(--mm-primary-pale);
    color:var(--mm-ink); font-size:13px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  }
  .process-swipe-helper .process-swipe-hand{width:17px; height:17px; color:var(--mm-primary-active); flex:0 0 17px;}

  .process-tabs{
    margin-bottom:14px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  .process-tabs::-webkit-scrollbar{display:none;}
  .process-tab-btn{padding:14px 4px 11px; margin-right:24px;}
  .process-tab-progress,.process-card-progress{display:flex; align-items:center; justify-content:center; gap:8px;}
  .process-tab-progress{margin:0 0 22px;}
  .process-tab-progress-dot,.process-card-progress-dot{display:block; width:6px; height:6px; border-radius:50%; background:#D7DCD8;}
  .process-tab-progress-dot.is-active,.process-card-progress-dot.is-active{background:var(--mm-primary-active);}

  .process-stats{
    display:flex; gap:16px; overflow-x:auto; margin:0 calc(-1 * var(--container-pad-mobile)) 12px; padding:0 var(--container-pad-mobile) 6px;
    scroll-snap-type:x mandatory; scroll-snap-stop:always; scroll-padding-inline:var(--container-pad-mobile);
    scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  .process-stats::-webkit-scrollbar{display:none;}
  .process-stat-card{
    flex:0 0 82%; min-width:0; min-height:172px; padding:24px 22px; scroll-snap-align:start;
  }
  .process-stat-value{font-size:30px; line-height:1.08;}
  .process-stat-caption{font-size:13px; line-height:1.45;}
  .process-card-progress{margin:0 0 28px;}

  .process-stats{
    display:grid; grid-template-columns:1fr; gap:16px; overflow:visible;
    margin:0 0 12px; padding:0; scroll-snap-type:none; scroll-padding-inline:0;
  }
  .process-stat-card{flex:0 0 100%; width:100%; scroll-snap-align:none;}
  .process-card-progress{display:none;}

  @keyframes process-swipe-cue{
    0%,100%{transform:translateX(0);}
    42%{transform:translateX(-6px);}
    72%{transform:translateX(3px);}
  }
  .process-stats.is-swipe-cue{animation:process-swipe-cue .65s ease-out both;}
}

@media (max-width:360px){
  .process-swipe-control{gap:8px;}
  .process-swipe-arrow-btn{flex-basis:44px; width:44px; height:44px;}
  .process-swipe-helper{max-width:calc(100% - 96px); min-height:52px; padding:0 12px; gap:6px; font-size:11px;}
  .process-swipe-helper .process-swipe-hand{width:15px; height:15px; flex-basis:15px;}
}

@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .process-stats.is-swipe-cue{animation:none;}
}

/* ---- How We Apply — real application videos ---- */
.process-video-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:820px; margin:0 auto; align-items:start;}
.process-video-card{
  display:flex; flex-direction:column; align-items:stretch; gap:14px; text-align:center;
  background:var(--mm-canvas-soft); border:var(--border-level1); border-radius:var(--radius-2xl); padding:12px;
}
.process-video-frame{width:100%; aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--radius-xl); background:var(--mm-ink);}
.process-video{display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.process-video-copy{display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 8px 8px;
}
.process-video-label{font-size:14px; font-weight:700; color:var(--mm-ink); max-width:24ch;}
.process-video-sub{font-size:12px; color:var(--mm-text-mute);}
@media (max-width:900px){
  .process-video-grid{grid-template-columns:1fr;}
}

.faq-process-link{margin-top:-24px; padding:18px 20px; border:var(--border-level1); border-radius:var(--radius-lg); background:var(--mm-canvas-soft);}
.faq-process-link a{display:inline-flex; align-items:center; gap:8px; color:var(--mm-ink); font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.faq-process-link a svg{width:18px; height:18px; color:var(--mm-primary-active);}

/* ========================================================================== 
   Rendering hub — dedicated high-intent landing page
   ========================================================================== */
.render-hub-hero{padding:28px 0 0;background:linear-gradient(180deg,#fbfcfa 0%,#fff 100%);overflow:hidden;}
.render-hub-hero-inner{display:grid;grid-template-columns:minmax(0,.94fr) minmax(520px,1.18fr);gap:54px;align-items:center;min-height:520px;}
.render-hub-hero-copy{padding:48px 0 56px;position:relative;z-index:2;}
.render-hub-hero-copy .eyebrow{margin-bottom:14px;}
.render-hub-hero-copy h1{font-size:var(--display-lg-size);font-weight:var(--display-lg-weight);line-height:var(--display-lg-lh);max-width:760px;letter-spacing:normal;}
.render-hub-hero-copy h1 .mobile-bedford-heading-lead{display:block;}
.render-hub-hero-copy>p{font-size:18px;line-height:1.65;max-width:650px;margin-top:24px;color:var(--mm-text-body);}
.render-hub-actions{margin-top:30px;}
.render-hub-actions .btn{min-height:52px;}
.render-hub-hero-media{position:relative;min-height:470px;align-self:stretch;border-radius:0 0 0 64px;overflow:visible;background:transparent;}
.render-hub-hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 6%,rgba(255,255,255,0) 30%);pointer-events:none;}
.render-hub-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0;}
.render-hub-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0;}
.render-hub-hero-chip{position:absolute;z-index:2;left:34px;bottom:28px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-level3);padding:12px 16px;border-radius:999px;font-weight:700;color:var(--mm-ink);backdrop-filter:blur(8px);}
.render-hub-hero-chip .icon{width:20px;height:20px;color:var(--mm-primary-active);}

.render-trust-wrap{position:relative;z-index:3;margin-top:-22px;}
.render-trust-strip{background:#fff;border:1px solid var(--mm-border);box-shadow:0 14px 40px rgba(20,23,25,.08);border-radius:20px;padding:16px 18px;display:grid;grid-template-columns:repeat(5,1fr);}
.render-trust-item{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;min-height:64px;padding:4px 18px;border-right:1px solid #e4e6e3;}
.render-trust-item:last-child{border-right:0;}
.render-trust-icon{width:38px;height:38px;border-radius:12px;background:var(--mm-canvas-soft);display:flex;align-items:center;justify-content:center;color:var(--mm-primary-active);}
.render-trust-icon .icon{width:22px;height:22px;}
.render-trust-item strong{display:block;font-size:13px;color:var(--mm-ink);line-height:1.25;}
.render-trust-item small{display:block;font-size:11.5px;color:var(--mm-text-mute);line-height:1.35;margin-top:3px;}

.render-section-head{text-align:center;max-width:790px;margin:0 auto 36px;}
.render-section-head .eyebrow{justify-content:center;}
.render-section-head h2{font-size:clamp(32px,3vw,44px);line-height:1.05;}
.render-section-head p{margin:10px auto 0;max-width:720px;font-size:15px;color:var(--mm-text-body);}
.render-services-section{padding-top:78px;padding-bottom:72px;}
.render-services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.render-service-card{position:relative;min-height:180px;border:1px solid var(--mm-border);border-radius:20px;background:#fff;padding:22px;display:grid;grid-template-columns:88px 1fr;gap:20px;text-decoration:none;overflow:hidden;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
.render-service-card::after{content:"";position:absolute;right:-55px;bottom:-60px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--mm-primary-pale) 0%,rgba(239,246,211,0) 72%);opacity:0;transition:opacity .2s var(--ease);}
.render-service-card:hover{transform:translateY(-3px);border-color:#c9cec7;box-shadow:0 14px 32px rgba(20,23,25,.08);}
.render-service-card:hover::after{opacity:1;}
.render-service-icon{width:88px;height:88px;border-radius:18px;background:var(--mm-canvas-soft);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;}
.render-service-icon img{width:76px;height:76px;object-fit:contain;}
.render-service-copy{display:flex;flex-direction:column;min-width:0;position:relative;z-index:1;}
.render-service-copy>strong{font-family:var(--font-display);font-size:18px;line-height:1.25;color:var(--mm-ink);}
.render-service-copy>span:not(.render-service-link){font-size:13px;line-height:1.5;color:var(--mm-text-body);margin-top:7px;}
.render-service-link{display:inline-flex;align-items:center;gap:6px;color:var(--mm-primary-active);font-size:13px;font-weight:700;margin-top:auto;padding-top:12px;}
.render-service-link .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.render-service-card:hover .render-service-link .icon,.render-compare-card:hover .render-service-link .icon{transform:translateX(3px);}

.render-benefits-section{background:#f7f8f5;border-top:1px solid #eef0eb;border-bottom:1px solid #eef0eb;}
.render-benefits-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;}
.render-benefit{background:#fff;border:1px solid var(--mm-border);border-radius:16px;padding:20px 16px 18px;min-height:170px;}
.render-benefit-icon{width:66px;height:66px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.render-benefit-icon img{width:66px;height:66px;object-fit:contain;}
.render-benefit h3{font-size:14px;line-height:1.25;margin-bottom:6px;}
.render-benefit p{font-size:12.5px;line-height:1.48;color:var(--mm-text-body);}

.render-guide-section{padding-top:78px;padding-bottom:82px;}
.render-compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.render-compare-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin:0 auto;}
.render-compare-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;margin:0 auto;}
.render-compare-grid-3+.render-guide-note{max-width:920px;margin-left:auto;margin-right:auto;}
.render-compare-grid-2+.render-guide-note{max-width:640px;margin-left:auto;margin-right:auto;}
.render-compare-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--mm-border);border-radius:20px;background:#fff;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);}
.render-compare-card:hover{transform:translateY(-3px);border-color:#c9cec7;box-shadow:0 14px 32px rgba(20,23,25,.08);}
.render-compare-image{height:138px;display:block;overflow:hidden;background:var(--mm-canvas-soft);}
.render-compare-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);}
.render-compare-card:hover .render-compare-image img{transform:scale(1.035);}
.render-compare-content{display:flex;flex-direction:column;padding:18px;min-height:230px;}
.render-compare-card--compact .render-compare-content{min-height:0;}
.render-compare-content>strong{font-family:var(--font-display);font-size:17px;color:var(--mm-ink);}
.render-compare-content>span:not(.render-service-link){font-size:13px;line-height:1.5;margin-top:8px;color:var(--mm-text-body);}
.render-compare-content small{display:block;font-size:11.5px;line-height:1.45;color:var(--mm-text-mute);padding-top:12px;margin-top:12px;border-top:1px solid #eceeea;}
.render-guide-note{margin-top:20px;border:1px solid var(--mm-border);border-radius:16px;background:var(--mm-canvas-soft);padding:16px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;font-size:13px;}
.render-guide-note strong{color:var(--mm-ink);}
.render-guide-note a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;color:var(--mm-ink);white-space:nowrap;}
.render-guide-note a .icon{width:15px;height:15px;color:var(--mm-primary-active);}

/* ---- Compact process visibility banner — used only on the two service hubs ---- */
.process-visibility-banner{
  width:100%; min-height:198px; overflow:hidden; isolation:isolate; color:#fff;
  background-color:#1b2021;
  background-image:linear-gradient(90deg,rgba(16,20,21,.96) 0%,rgba(16,20,21,.9) 34%,rgba(16,20,21,.58) 68%,rgba(16,20,21,.28) 100%),url('../img/how-we-apply-process-banner.webp');
  background-size:cover; background-position:center right;
}
.process-visibility-banner-inner{min-height:198px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:26px;padding-bottom:26px;}
.process-visibility-banner-copy{min-width:0;max-width:720px;}
.process-visibility-banner .eyebrow{text-align:left;color:var(--mm-primary);font-size:12px;letter-spacing:.1em;margin:0 0 8px;}
.process-visibility-banner h2{color:#fff;font-size:clamp(28px,3vw,40px);line-height:1.03;}
.process-visibility-banner p{margin-top:10px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.45;}
.process-visibility-banner-cta{flex:0 0 auto;white-space:nowrap;}

@media (max-width:900px){
  .process-visibility-banner-inner{align-items:flex-start;flex-direction:column;justify-content:center;gap:16px;}
}
@media (max-width:640px){
  .process-visibility-banner{min-height:220px;max-height:250px;background-position:70% center;}
  .process-visibility-banner-inner{min-height:220px;padding-top:22px;padding-bottom:22px;gap:10px;}
  .process-visibility-banner h2{font-size:26px;line-height:1.06;}
  .process-visibility-banner p{margin-top:8px;font-size:14px;line-height:1.35;max-width:34ch;}
  .process-visibility-banner-cta{min-height:44px;padding:10px 16px;font-size:14px;}
}

.render-process-projects{padding:72px 0;}
.render-process-projects-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:start;}
.render-process-col h2,.render-projects-col h2{font-size:34px;line-height:1.08;}
.render-dark-intro{max-width:680px;margin-top:10px;font-size:14px;line-height:1.6;}
.render-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;position:relative;}
.render-process-grid::before{content:"";position:absolute;top:39px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,rgba(184,217,54,.3),rgba(184,217,54,.9),rgba(184,217,54,.3));}
.render-process-step{text-align:center;position:relative;padding:0 10px;}
.render-process-num{position:absolute;top:-8px;left:calc(50% - 36px);z-index:2;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mm-primary);color:var(--mm-ink);font-size:10px;font-weight:800;box-shadow:0 0 0 4px var(--mm-ink);}
.render-process-dot{position:relative;z-index:1;margin:0 auto 14px;width:78px;height:78px;border-radius:50%;background:#fff;color:var(--mm-ink);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.7);}
.render-process-dot .icon{width:28px;height:28px;}
.render-process-step h3{font-size:14px;color:#fff;margin-bottom:7px;}
.render-process-step p{font-size:11.5px;line-height:1.45;color:var(--text-on-dark-mute);}
.render-dark-link{display:inline-flex;align-items:center;gap:7px;margin-top:28px;color:#fff;text-decoration:none;font-weight:700;font-size:13px;}
.render-dark-link .icon{width:16px;height:16px;color:var(--mm-primary);}
.render-projects-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;}
.render-projects-head a{display:inline-flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap;}
.render-projects-head a .icon{width:15px;height:15px;color:var(--mm-primary);}
.render-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.render-project-thumb{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:1/1.08;border:1px solid rgba(255,255,255,.18);text-decoration:none;}
.render-project-thumb::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.68));}
.render-project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);}
.render-project-thumb:hover img{transform:scale(1.04);}
.render-project-thumb span{position:absolute;z-index:2;left:12px;right:12px;bottom:10px;color:#fff;font-weight:700;font-size:11px;line-height:1.3;}

.render-seo-faq-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:start;}
.render-seo-copy h2,.render-faq-col h2{font-size:34px;line-height:1.1;margin-top:6px;}
.render-seo-copy>p{font-size:15px;line-height:1.7;color:var(--mm-text-body);margin-top:16px;}
.render-seo-copy a{text-decoration:underline;text-underline-offset:2px;font-weight:600;color:var(--mm-ink);}
.render-check-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:24px;}
.render-check-list li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--mm-ink);font-weight:600;}
.render-check-list .icon{width:18px;height:18px;flex:0 0 auto;color:var(--mm-primary-active);margin-top:1px;}
.render-area-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--mm-border);font-size:12px;}
.render-area-links strong{color:var(--mm-ink);margin-right:4px;}
.render-area-links a{text-decoration:none;background:var(--mm-canvas-soft);border:1px solid var(--mm-border);padding:6px 10px;border-radius:999px;font-weight:600;}
.render-faq-col>.accordion{margin-top:20px;}
.render-faq-col .accordion-item{border-color:var(--mm-border);}
.render-faq-col .accordion-item summary{font-size:14px;padding:15px 0;}
.render-faq-col .accordion-body{font-size:13px;line-height:1.6;}
.render-faq-more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;text-decoration:none;color:var(--mm-ink);font-weight:700;font-size:13px;}
.render-faq-more .icon{width:15px;height:15px;color:var(--mm-primary-active);}

.render-quote-section{background:#f7f8f5;padding-top:72px;padding-bottom:72px;}
.render-quote-card{display:grid;grid-template-columns:1.05fr .95fr;border-radius:26px;overflow:hidden;box-shadow:0 18px 48px rgba(20,23,25,.08);border:1px solid var(--mm-border);background:#fff;}
.render-quote-copy{background:linear-gradient(135deg,#181c1e 0%,#242a2d 100%);padding:42px;color:#fff;}
.render-quote-copy .eyebrow{color:var(--mm-primary);}
.render-quote-copy h2{color:#fff;font-size:36px;line-height:1.05;margin-top:8px;}
.render-quote-copy>p{color:var(--text-on-dark-mute);font-size:14px;line-height:1.65;margin-top:14px;max-width:620px;}
.render-quote-contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
.render-quote-contact a{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;text-decoration:none;color:#fff;min-width:180px;}
.render-quote-contact .icon{width:20px;height:20px;color:var(--mm-primary);}
.render-quote-contact span{display:flex;flex-direction:column;line-height:1.2;}
.render-quote-contact small{font-size:10px;color:var(--text-on-dark-mute);}
.render-quote-contact strong{font-size:13px;margin-top:3px;}
.render-quote-next{padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.render-quote-next-label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--mm-text-mute);margin-bottom:16px;}
.render-quote-next ol{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:11px;}
.render-quote-next li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;color:var(--mm-ink);font-size:13px;font-weight:600;}
.render-quote-next li span{width:28px;height:28px;border-radius:50%;background:var(--mm-primary-pale);display:flex;align-items:center;justify-content:center;color:var(--mm-primary-active);font-size:11px;font-weight:800;}
.render-quote-next>.btn .icon{width:17px;height:17px;}
.render-quote-next>small{text-align:center;font-size:10.5px;color:var(--mm-text-mute);margin-top:10px;}

@media (max-width:1200px){
  .render-hub-hero-inner{grid-template-columns:1fr 1fr;gap:34px;}
  .render-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .render-benefits-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .render-trust-strip{grid-template-columns:repeat(3,1fr);}
  .render-trust-item:nth-child(3){border-right:0;}
  .render-trust-item:nth-child(n+4){border-top:1px solid #e4e6e3;padding-top:12px;margin-top:8px;}
  .render-process-projects-grid{grid-template-columns:1fr;}
  .render-projects-col{max-width:760px;}
}
@media (max-width:900px){
  .render-hub-hero{padding-top:12px;}
  .render-hub-hero-inner{grid-template-columns:1fr;gap:0;}
  .render-hub-hero-copy{padding:38px 0 34px;}
  .render-hub-hero-media{border-radius:28px;}
  .render-hub-hero-media::before{background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 30%);}
  .render-trust-wrap{margin-top:20px;}
  .render-trust-strip{grid-template-columns:1fr 1fr;}
  .render-trust-item{border-right:0;border-bottom:1px solid #e4e6e3;}
  .render-trust-item:nth-child(n+4){border-top:0;padding-top:4px;margin-top:0;}
  .render-trust-item:last-child{grid-column:1/-1;border-bottom:0;}
  .render-compare-grid{grid-template-columns:repeat(2,1fr);}
  .render-guide-note{grid-template-columns:1fr;gap:8px;}
  .render-seo-faq-grid{grid-template-columns:1fr;gap:48px;}
  .render-quote-card{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .render-hub-hero-copy{padding-top:28px;}
  .render-hub-hero-copy h1{font-size:clamp(31px,8.2vw,32px);}
  .render-hub-hero-copy>p{font-size:16px;}
  .render-hub-actions{display:grid;grid-template-columns:1fr;gap:10px;}
  .render-hub-actions .btn{width:100%;justify-content:center;}
  .render-hub-hero-media{border-radius:22px;}
  .render-hub-hero-chip{left:16px;bottom:16px;}
  .render-trust-strip{grid-template-columns:1fr;padding:8px 14px;}
  .render-trust-item,.render-trust-item:last-child{grid-column:auto;border-bottom:1px solid #e4e6e3;padding:10px 2px;}
  .render-trust-item:last-child{border-bottom:0;}
  .render-services-section,.render-guide-section{padding-top:56px;padding-bottom:56px;}
  .render-section-head{margin-bottom:26px;}
  .render-section-head h2{font-size:32px;}
  .render-services-grid{grid-template-columns:1fr;gap:12px;}
  .render-service-card{min-height:0;grid-template-columns:72px 1fr;padding:18px;gap:16px;}
  .render-service-card::after{right:0;bottom:0;}
  .render-service-icon{width:72px;height:72px;}
  .render-service-icon img{width:64px;height:64px;}
  .render-benefits-grid{grid-template-columns:1fr 1fr;}
  .render-benefit{min-height:154px;padding:16px 14px;}
  .render-compare-grid{grid-template-columns:1fr;}
  .render-compare-image{height:180px;}
  .render-compare-content{min-height:0;}
  .render-process-projects{padding:56px 0;}
  .render-process-projects-grid{gap:46px;}
  .render-process-grid{grid-template-columns:1fr 1fr;gap:28px 10px;}
  .render-process-grid::before{display:none;}
  .render-project-grid{grid-template-columns:1fr 1fr;}
  .render-project-thumb:last-child{grid-column:1/-1;aspect-ratio:2/1;}
  .render-check-list{grid-template-columns:1fr;}
  .render-seo-copy h2,.render-faq-col h2{font-size:30px;}
  .render-quote-copy,.render-quote-next{padding:28px 22px;}
  .render-quote-copy h2{font-size:31px;}
  .render-quote-contact{display:grid;grid-template-columns:1fr;}
  .render-quote-contact a{min-width:0;}
}

@media (max-width:360px){
  .render-benefits-grid{grid-template-columns:1fr;}
}

/* Shared mobile media-object treatment for centred-icon benefit cards. */
@media (max-width:767px){
  .render-benefit{
    display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;column-gap:14px;
    min-height:0;padding:16px 14px;text-align:left;
  }
  .render-benefit-icon{
    grid-column:1;grid-row:1 / span 2;align-self:center;width:48px;height:48px;margin-bottom:0;
  }
  .render-benefit-icon img{width:48px;height:48px;}
  .render-benefit h3,.render-benefit p{grid-column:2;min-width:0;}
}

/* Mobile phone CTAs: keep the shared label and number together at every phone width. */
@media (max-width:768px){
  .hero-banner-phone{white-space:nowrap;}
  .render-quote-contact a:first-child{flex-direction:row;justify-content:center;white-space:nowrap;}
  .render-quote-contact a:first-child span{flex-direction:row;align-items:baseline;gap:8px;}
  .render-quote-contact a:first-child small,.render-quote-contact a:first-child strong{font-size:18px;margin-top:0;}
}
@media (max-width:360px){
  .render-quote-contact a.phone-cta-long-label{padding-left:8px;padding-right:8px;gap:8px;}
  .render-quote-contact a.phone-cta-long-label span{gap:4px;}
  .render-quote-contact a.phone-cta-long-label small,.render-quote-contact a.phone-cta-long-label strong{font-size:14px;}
}


/* Rendering hub hero refresh - Aug 2026 */
.render-hub-hero{padding:14px 0 28px;background:#fff;overflow:visible;}
.render-hub-hero-inner{display:grid;grid-template-columns:minmax(0,0.98fr) minmax(540px,1.02fr);gap:56px;align-items:center;min-height:auto;}
.render-hub-hero-copy{padding:24px 0 16px;position:relative;z-index:2;}
.render-hub-hero-copy .eyebrow{margin-bottom:16px;color:var(--mm-primary-active);}
.render-hub-hero-copy h1{font-size:var(--display-lg-size);font-weight:var(--display-lg-weight);line-height:var(--display-lg-lh);max-width:690px;letter-spacing:normal;}
.render-hub-hero-copy h1 .mobile-bedford-heading-lead{display:block;}
.mobile-bedford-heading-lead{display:block;}
.hero-keep-together,.hero-keep-together-ampersand,.hero-keep-together-surrounding{display:inline;}
.mobile-bedford-heading-mobile-break{display:none;}
.hero-keep-together-desktop-break{display:block;}
.render-hub-hero-copy>p{font-size:18px;line-height:1.58;max-width:640px;margin-top:26px;color:#5b6468;}
.render-hub-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;}
.render-hub-actions .btn-secondary{background:#fff;border:1.5px solid #d8dcda;box-shadow:none;}
.render-hub-actions .btn-secondary:hover{background:#f8f9f8;}
.render-hero-rating{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;color:#576065;}
.render-hero-rating-label,.render-hero-rating-brand,.render-hero-rating-score{font-size:16px;font-weight:600;line-height:1.25;}
.render-hero-rating-label,.render-hero-rating-brand{color:#2c3236;}
.render-hero-rating-score{color:#576065;font-weight:500;}
.render-hero-stars{display:inline-flex;gap:5px;}
.render-hero-starbox{width:30px;height:30px;border-radius:4px;background:#00b67a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;box-shadow:0 1px 0 rgba(0,0,0,.05);}
.render-hub-hero-media{position:relative;aspect-ratio:4/3;align-self:auto;border-radius:28px;overflow:visible;background:transparent;box-shadow:0 22px 54px rgba(17,24,28,.08);margin-bottom:72px;}
.render-hub-hero-image{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#eef3f7;}
.render-hub-hero-media::before{display:none;}
.render-hub-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;inset:0;}
.render-hub-hero-badge{position:absolute;z-index:2;top:auto;right:20px;bottom:-60px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.86);border:1px solid rgba(16,24,32,.08);box-shadow:0 16px 32px rgba(16,24,32,.12);padding:14px 16px;border-radius:var(--radius-lg);max-width:220px;backdrop-filter:blur(8px);animation:hero-badge-float 3.6s ease-in-out infinite;will-change:transform;}
.render-hub-hero-badge-icon{width:36px;height:36px;border-radius:50%;background:#f6f8f4;display:flex;align-items:center;justify-content:center;color:var(--mm-primary-active);flex:0 0 auto;}
.render-hub-hero-badge-icon .icon{width:18px;height:18px;}
.render-hub-hero-badge-text{font-size:13px;font-weight:700;color:var(--mm-ink);line-height:1.3;}
.render-trust-wrap{display:none;}
@media (max-width: 1199px){
  .render-hub-hero-inner{grid-template-columns:1fr;gap:28px;}
  .render-hub-hero-copy{padding-bottom:0;}
}
@media (max-width: 767px){
  .render-hub-hero{padding-top:8px;padding-bottom:18px;}
  .render-hub-hero-copy h1{font-size:clamp(31px,8.2vw,32px);}
  .mobile-bedford-heading-mobile-break{display:block;}
  .hero-keep-together{display:inline-block;white-space:nowrap;}
  .hero-keep-together-desktop-break{display:none;}
  .render-hub-hero-copy>p{font-size:16px;margin-top:20px;}
  .render-hub-actions{gap:12px;margin-top:26px;}
  .render-hub-actions .btn-lg{width:100%;justify-content:center;}
  .render-hub-hero-media{border-radius:22px;overflow:visible;margin-bottom:36px;}
  .render-hub-hero-image{border-radius:inherit;}
  .render-hub-hero-badge{top:auto;right:10px;bottom:-28px;width:max-content;max-width:calc(100% - 20px);padding:6px 8px;gap:6px;border-radius:10px;background:rgba(255,255,255,.7);box-shadow:0 6px 16px rgba(16,24,32,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:hero-badge-float 3.6s ease-in-out infinite;will-change:transform;}
  .render-hub-hero-badge-icon{width:24px;height:24px;}
  .render-hub-hero-badge-icon .icon{width:13px;height:13px;}
  .render-hub-hero-badge-text{font-size:11px;line-height:1.2;}
  .hero-badge-desktop-text{display:none;}
  .hero-badge-mobile-text{display:inline;}
}

@media (prefers-reduced-motion:reduce){
  .page-hero-badge,.render-hub-hero-badge{animation:none;}
}

/* Plastering hub — mirrors the Rendering hub visual system */
.plaster-hub-hero .render-hub-hero-image img{object-position:center 48%;}
.plaster-quote-form-wrap{padding:30px 34px;}
.plaster-quick-form{display:grid;gap:10px;width:100%;}
.plaster-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.plaster-quick-form .input,.plaster-quick-form .select,.plaster-quick-form .textarea{width:100%;min-height:44px;border-radius:10px;font-size:13px;}
.plaster-quick-form .textarea{min-height:86px;resize:vertical;}
.plaster-quick-form .btn{margin-top:2px;}
.plaster-quick-form>small{text-align:center;font-size:10.5px;color:var(--mm-text-mute);margin-top:0;}
@media (max-width:767px){
  .plaster-quick-grid{grid-template-columns:1fr;}
  .plaster-quote-form-wrap{padding:24px 20px;}
}

/* ========================================================================== 
   Silicone rendering service page — approved sub-page visual system
   ========================================================================== */
.silicone-rendering-page .silicone-hero{padding-bottom:34px;}
.silicone-rendering-page .silicone-hero .render-hub-hero-copy{padding-top:18px;}
.silicone-rendering-page .silicone-hero .render-hub-hero-copy h1{max-width:700px;}
.silicone-rendering-page .silicone-hero .render-hub-hero-copy>p{max-width:650px;}

.silicone-section-head{margin-bottom:30px;}
.silicone-section-head h2,.silicone-best-head h2,.silicone-key-head h2{font-size:clamp(30px,2.7vw,40px);}
.silicone-section-head p,.silicone-best-head p{font-size:14px;color:var(--mm-text-body);}

.silicone-why-section{padding-top:42px;padding-bottom:54px;background:var(--mm-canvas-soft);}
.silicone-why-section .silicone-feature-card{background:#fff;}
.silicone-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.silicone-feature-card{border:1px solid #e1e4df;border-radius:20px;background:#fff;padding:22px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 22px rgba(20,23,25,.025);}
.silicone-feature-icon{width:60px;height:60px;border-radius:50%;background:#f5f7f1;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;}
.silicone-feature-icon img{width:32px;height:32px;}
.silicone-feature-icon img{width:76px;height:76px;object-fit:contain;}
.silicone-feature-card h3{font-size:17px;line-height:1.25;}
.silicone-feature-card p{font-size:13px;line-height:1.6;color:var(--mm-text-body);margin-top:9px;max-width:27ch;}
.silicone-feature-card a{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;color:var(--mm-primary-active);text-decoration:none;font-size:13px;font-weight:800;}
.silicone-feature-card a .icon{width:15px;height:15px;transition:transform .2s var(--ease);}
.silicone-feature-card:hover a .icon{transform:translateX(3px);}

.silicone-system-section{padding-top:42px;padding-bottom:58px;}
.silicone-system-grid{display:grid;grid-template-columns:minmax(0,.96fr) minmax(560px,1.04fr);gap:70px;align-items:center;}
.silicone-system-copy h2{font-size:clamp(32px,3vw,42px);line-height:1.08;}
.silicone-system-copy>p{font-size:16px;line-height:1.65;color:var(--mm-text-body);margin-top:14px;max-width:680px;}
.silicone-system-list{display:grid;gap:16px;margin-top:24px;}
.silicone-system-list li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.65;color:var(--mm-text-body);}
.silicone-system-list li .icon{width:21px;height:21px;color:var(--mm-primary-active);border:2px solid var(--mm-primary);border-radius:50%;padding:3px;margin-top:2px;}
.silicone-system-list strong{color:var(--mm-ink);}

.silicone-layer-card{border:1px solid #e0e3df;border-radius:22px;background:#fff;padding:22px;display:grid;grid-template-columns:minmax(240px,.88fr) minmax(260px,1.12fr);gap:22px;align-items:stretch;box-shadow:0 10px 28px rgba(20,23,25,.035);min-height:330px;}
.silicone-layer-sample{position:relative;min-height:286px;border-radius:16px;overflow:hidden;border:1px solid #d5d8d2;background:#8f9390;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
.silicone-layer-sample::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 35%,rgba(0,0,0,.08));pointer-events:none;}
.silicone-layer{position:absolute;left:0;right:0;display:block;}
.silicone-layer-finish{top:0;height:38%;background-color:#ded8c9;background-image:radial-gradient(circle at 3px 3px,rgba(123,115,101,.25) 1px,transparent 1.2px),radial-gradient(circle at 7px 7px,rgba(255,255,255,.45) 1px,transparent 1.2px);background-size:10px 10px;}
.silicone-layer-mesh{top:38%;height:23%;background-color:#f2f1eb;background-image:linear-gradient(45deg,rgba(148,153,146,.7) 1px,transparent 1px),linear-gradient(-45deg,rgba(148,153,146,.7) 1px,transparent 1px);background-size:12px 12px;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(122,128,121,.13);}
.silicone-layer-base{bottom:0;height:39%;background-color:#929792;background-image:radial-gradient(circle at 4px 4px,rgba(255,255,255,.18) 1px,transparent 1.4px),radial-gradient(circle at 10px 8px,rgba(50,55,52,.13) 1px,transparent 1.3px);background-size:14px 14px;}
.silicone-layer-labels{display:grid;grid-template-rows:1fr 1fr 1fr;align-items:center;gap:4px;padding:4px 0;}
.silicone-layer-label{display:grid;grid-template-columns:66px 1fr;gap:14px;align-items:start;position:relative;}
.silicone-layer-rule{height:2px;background:var(--mm-primary);width:66px;margin-top:11px;position:relative;}
.silicone-layer-rule::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--mm-primary);right:-1px;top:-2px;}
.silicone-layer-label strong{font-size:14px;color:var(--mm-ink);display:block;line-height:1.3;}
.silicone-layer-label p{font-size:12.5px;line-height:1.5;color:var(--mm-text-body);margin-top:4px;}
.silicone-system-diagram{display:block;grid-column:1 / -1;width:100%;height:auto;max-width:100%;object-fit:contain;}

.silicone-key-section{padding-top:34px;padding-bottom:68px;}
.silicone-key-head{margin-bottom:24px;}
.silicone-key-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.silicone-key-card{border:1px solid #e1e4df;border-radius:18px;background:#fff;padding:19px 18px;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;min-height:132px;}
.silicone-key-icon{width:70px;height:70px;display:flex;align-items:center;justify-content:center;}
.silicone-key-icon img{width:64px;height:64px;object-fit:contain;}
.silicone-key-card h3{font-size:15px;line-height:1.25;}
.silicone-key-card p{font-size:12.5px;line-height:1.5;color:var(--mm-text-body);margin-top:5px;}

.silicone-explained-section{padding-top:52px;padding-bottom:58px;}
.silicone-explained-compare-grid{display:grid;grid-template-columns:460px 1fr;gap:48px;align-items:start;}
.silicone-explained-solo{max-width:760px;}
.silicone-explained-photo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.silicone-explained-photo-grid .silicone-explained-solo{max-width:none;}
.silicone-explained-photo{border-radius:20px;overflow:hidden;background:var(--mm-canvas-soft);aspect-ratio:4/3;}
.silicone-explained-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.silicone-explained-head{text-align:left;margin:0 0 20px;max-width:none;}
.silicone-explained-head .eyebrow{justify-content:flex-start;}
.silicone-explained-head p{margin:10px 0 0;}
.silicone-explained-copy p{font-size:15px;line-height:1.7;color:var(--mm-text-body);margin:0 0 16px;}
.silicone-explained-copy p:last-child{margin-bottom:0;}

.silicone-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.silicone-compare-card{border:1px solid var(--mm-border);border-radius:20px;background:#fff;padding:24px 26px;}
.silicone-compare-card.is-highlight{border-left:4px solid var(--mm-primary);}
.silicone-compare-card .badge{margin-bottom:14px;}
.silicone-compare-label{display:block;font-size:13px;font-weight:700;color:var(--mm-text-mute);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;}
.silicone-compare-card h3{font-size:17px;line-height:1.3;color:var(--mm-ink);}
.silicone-compare-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.silicone-compare-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.4;color:var(--mm-text-body);}
.silicone-compare-list .icon{width:16px;height:16px;color:var(--mm-primary-active);flex:0 0 auto;margin-top:2px;}
.silicone-compare-note{margin-top:28px;border:1px solid var(--mm-border);border-radius:16px;background:var(--mm-canvas-soft);padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.silicone-compare-note p{margin:0;font-size:14px;line-height:1.6;color:var(--mm-text-body);max-width:640px;}
.silicone-compare-note p strong{color:var(--mm-ink);}
.silicone-compare-note-links{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.silicone-compare-note-links .btn{border-radius:999px;white-space:nowrap;}
.silicone-compare-note-links .render-faq-more{margin-top:0;}

.silicone-process-projects{padding-top:66px;padding-bottom:66px;}
.silicone-process-projects .render-dark-intro{max-width:620px;}
.silicone-seo-faq-section{padding-top:70px;padding-bottom:62px;}
.silicone-check-list{grid-template-columns:1fr;gap:8px;}
.silicone-quote-section{padding-top:38px;padding-bottom:72px;}

@media (max-width:1200px){
  .silicone-feature-grid,.silicone-key-grid,.silicone-use-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .silicone-system-grid{grid-template-columns:1fr;gap:34px;}
  .silicone-layer-card{max-width:820px;}
  .silicone-explained-compare-grid{grid-template-columns:1fr;gap:36px;}
  .silicone-explained-photo-grid{grid-template-columns:1fr;gap:24px;}
  .silicone-explained-photo-grid .silicone-explained-photo{order:-1;}
}
@media (max-width:767px){
  .silicone-rendering-page .silicone-hero{padding-bottom:20px;}
  .silicone-why-section{padding-top:28px;padding-bottom:44px;}
  .silicone-section-head{margin-bottom:22px;}
  .silicone-section-head h2,.silicone-key-head h2{font-size:30px;}
  .silicone-compare-grid{grid-template-columns:1fr;}
  .silicone-compare-note{flex-direction:column;align-items:flex-start;}
  .silicone-compare-note-links{align-items:stretch;width:100%;}
  .silicone-compare-note-links .btn{width:100%;justify-content:center;}
  .silicone-feature-grid,.silicone-key-grid,.silicone-use-grid{grid-template-columns:1fr;gap:12px;}
  .silicone-feature-card{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:14px;align-items:center;padding:16px;text-align:left;}
  .silicone-feature-icon{grid-column:1;grid-row:1 / span 2;width:52px;height:52px;margin-bottom:0;}
  .silicone-feature-icon img{width:30px;height:30px;}
  .silicone-feature-card h3,.silicone-feature-card p{grid-column:2;min-width:0;}
  .silicone-feature-card p{max-width:none;}
  .silicone-system-section{padding-top:36px;padding-bottom:46px;}
  .silicone-system-copy>p{font-size:15px;}
  .silicone-layer-card{grid-template-columns:1fr;padding:16px;gap:18px;min-height:0;}
  .silicone-layer-sample{min-height:230px;}
  .silicone-layer-labels{gap:14px;}
  .silicone-layer-label{grid-template-columns:44px 1fr;gap:10px;}
  .silicone-layer-rule{width:44px;}
  .silicone-key-section{padding-top:20px;padding-bottom:50px;}
  .silicone-key-card{grid-template-columns:64px 1fr;min-height:0;padding:16px;}
  .silicone-key-icon{width:62px;height:62px;}
  .silicone-key-icon img{width:58px;height:58px;}
  .silicone-best-section{padding-top:44px;padding-bottom:48px;}
  .silicone-use-media{height:190px;}
  .silicone-seo-faq-section{padding-top:54px;padding-bottom:48px;}
  .silicone-quote-section{padding-top:24px;padding-bottom:54px;}
}

/* ========================================================================== 
   Areas hub — mock-up matched layout (Aug 2026)
   ========================================================================== */
.areas-hub-page{padding:10px 0 72px;background:#fff;overflow:hidden;}
.areas-hub-hero{position:relative;min-height:350px;margin-top:10px;}
.areas-hub-hero-copy{position:relative;z-index:2;width:46%;padding:34px 0 0;}
.areas-hub-hero-copy .eyebrow{letter-spacing:.24em;margin-bottom:22px;color:#2aa84a;font-weight:800;}
.areas-hub-hero-copy h1{font-size:clamp(58px,5vw,78px);line-height:.98;letter-spacing:-.025em;}
.areas-hub-hero-copy .lede{font-size:20px;line-height:1.65;max-width:560px;margin-top:24px;color:#59616a;}
.areas-hub-map{position:absolute;right:-54px;top:-34px;width:58%;height:400px;background:url('../img/areas-service-map.svg') center/cover no-repeat;}
.areas-hub-map::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:130px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 22%,rgba(255,255,255,0) 100%);pointer-events:none;z-index:1;}
.areas-hub-map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.22));pointer-events:none;}
.areas-map-rings{position:absolute;z-index:2;left:48.5%;top:48%;width:250px;height:250px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(148,200,63,.075);box-shadow:0 0 0 42px rgba(148,200,63,.055),0 0 0 84px rgba(148,200,63,.04);}
.areas-map-marker{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;font-weight:700;color:#171b1e;font-size:14px;white-space:nowrap;}
.areas-map-marker .map-pin{width:24px;height:24px;color:#7dca19;filter:drop-shadow(0 1px 0 rgba(0,0,0,.05));}
.areas-map-marker--small{flex-direction:column;gap:3px;font-size:13px;}
.areas-map-marker--small .map-pin{width:20px;height:20px;}
.areas-map-marker--bedford{left:48.5%;top:49%;flex-direction:column;gap:6px;font-size:18px;z-index:5;}
.areas-map-marker--bedford .map-pin{width:58px;height:58px;color:#70c800;filter:drop-shadow(0 6px 8px rgba(95,163,0,.18));}
.areas-map-marker--mk{left:28%;top:14%;}
.areas-map-marker--stneots{left:71%;top:13%;}
.areas-map-marker--luton{left:31%;top:61%;}
.areas-map-marker--biggleswade{left:80%;top:53%;}
.areas-map-marker--sandy{left:25%;top:80%;}
.areas-map-marker--hitchin{left:48%;top:81%;}
.areas-map-marker--stevenage{left:69%;top:82%;}

/* Main areas page map test: keep the legacy artwork above available while the
   inline SVG is reviewed. The SVG deliberately owns the same existing slot. */
.areas-hub-map--redesign{background:none;isolation:isolate;}
.areas-hub-map--redesign::before,.areas-hub-map--redesign::after{display:none;}
.areas-map-artwork{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
.areas-map-legacy{display:none;}
.areas-map-artwork text{font-family:inherit;}
.areas-map-soft-region{vector-effect:non-scaling-stroke;}
.areas-map-tree{fill:#b8d0b0;fill-opacity:.46;vector-effect:non-scaling-stroke;}
.areas-map-boundaries path{vector-effect:non-scaling-stroke;}
.areas-map-highway{stroke:#b8d9ea;stroke-width:3.4;stroke-opacity:.84;vector-effect:non-scaling-stroke;}
.areas-map-principal-road{stroke:#b8d9ea;stroke-width:2.2;stroke-opacity:.72;vector-effect:non-scaling-stroke;}
.areas-map-roads--secondary path{vector-effect:non-scaling-stroke;}
.areas-map-route-shield rect{stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke;}
.areas-map-route-shield text{fill:#fff;font-size:11px;letter-spacing:.02em;}
.areas-map-route-shield--blue rect{fill:#3d86bf;}
.areas-map-route-shield--green rect{fill:#4a9660;}
.areas-map-service-wash{vector-effect:non-scaling-stroke;}
.areas-map-land{vector-effect:non-scaling-stroke;}
.areas-map-boundary{fill:none;stroke:#d8dde0;stroke-width:1.5;stroke-dasharray:5 8;opacity:.78;vector-effect:non-scaling-stroke;}
.areas-map-river{fill:none;stroke:#b8d9ea;stroke-width:7;stroke-opacity:.42;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.areas-map-river--secondary{stroke-width:4;stroke-opacity:.3;}
.areas-map-roads--major path{vector-effect:non-scaling-stroke;}
.areas-map-roads--secondary path{vector-effect:non-scaling-stroke;}
.areas-map-county-labels{opacity:.68;}
.areas-map-road-labels{letter-spacing:.1em;}
.areas-map-location{cursor:pointer;}
.areas-map-location a{color:inherit;text-decoration:none;}
.areas-map-pin{fill:#8aca24;stroke:#fff;stroke-width:2.6;stroke-linejoin:round;filter:drop-shadow(0 2px 2px rgba(53,73,28,.15));vector-effect:non-scaling-stroke;transition:fill .18s var(--ease),stroke-width .18s var(--ease);}
.areas-map-pin--bedford{fill:#8aca24;stroke-width:3.2;}
.areas-map-pin-dot{fill:#fff;}
.areas-map-marker-halo{fill:#8aca24;fill-opacity:.11;stroke:#8aca24;stroke-opacity:.18;stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill-opacity .18s var(--ease),stroke-opacity .18s var(--ease);}
.areas-map-marker-core{fill:#8aca24;stroke:#fff;stroke-width:4;vector-effect:non-scaling-stroke;transition:fill .18s var(--ease),stroke-width .18s var(--ease);}
.areas-map-marker-dot{fill:#20282b;}
.areas-map-label{fill:#20282b;font-size:15px;font-weight:750;letter-spacing:.005em;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-opacity:.78;stroke-linejoin:round;}
.areas-map-label--bedford{font-size:22px;font-weight:850;}
.areas-map-location--bedford .areas-map-label{font-size:22px;font-weight:850;}
.areas-map-location--active .areas-map-label{font-size:22px;font-weight:850;}
.areas-map-location:hover .areas-map-pin,.areas-map-location a:focus-visible .areas-map-pin{fill:#a1d83a;stroke-width:3.8;}
.areas-map-location:hover .areas-map-marker-core,.areas-map-location a:focus-visible .areas-map-marker-core{fill:#a1d83a;stroke-width:5;}
.areas-map-location:hover .areas-map-marker-halo,.areas-map-location a:focus-visible .areas-map-marker-halo{fill-opacity:.2;stroke-opacity:.34;}
.areas-map-focus-ring{fill:none;stroke:#20282b;stroke-width:3;stroke-dasharray:5 4;opacity:0;pointer-events:none;vector-effect:non-scaling-stroke;}
.areas-map-location a:focus-visible .areas-map-focus-ring{opacity:1;}

@media (max-width:760px){
  .areas-map-label{font-size:14px;}
  .areas-map-location--bedford .areas-map-label{font-size:19px;}
  .areas-map-location--active .areas-map-label{font-size:19px;}
  .areas-map-county-labels{font-size:12px;}
  .areas-map-road-labels{font-size:11px;}
}
@media (max-width:460px){
  .areas-map-label{font-size:13px;}
  .areas-map-location--bedford .areas-map-label{font-size:17px;}
  .areas-map-location--active .areas-map-label{font-size:17px;}
  .areas-map-location--secondary.areas-map-location--stevenage .areas-map-label,.areas-map-location--secondary.areas-map-location--hitchin .areas-map-label{display:none;}
  .areas-map-county-labels{font-size:10px;}
}

.areas-popular{margin-top:16px;}
.areas-section-title{font-size:22px;line-height:1.2;margin-bottom:18px;}
.areas-popular-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px;}
.areas-view-all{display:inline-flex;align-items:center;gap:8px;color:#26ad55;font-weight:700;text-decoration:none;font-size:14px;}
.areas-view-all .icon{width:18px;height:18px;}
.areas-popular-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 18px;}
.area-popular-card{min-height:68px;border:1px solid #e1e5e1;border-radius:10px;display:flex;align-items:center;padding:14px 18px;gap:14px;text-decoration:none;background:#fff;box-shadow:0 4px 14px rgba(20,23,25,.025);transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);}
.area-popular-card:hover{transform:translateY(-2px);border-color:#cfdbbd;box-shadow:0 10px 24px rgba(20,23,25,.06);}
.area-popular-icon{width:34px;height:34px;border-radius:50%;background:#f0f8df;display:flex;align-items:center;justify-content:center;color:#7fc921;flex:0 0 auto;}
.area-popular-icon .icon{width:20px;height:20px;}
.area-popular-name{font-weight:700;color:#22272a;font-size:15px;}
.area-popular-card>.icon{width:18px;height:18px;color:#23af54;margin-left:auto;}

.areas-directory{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(350px,.98fr);gap:32px;align-items:start;}
.areas-directory-left .areas-section-title{margin-bottom:14px;}
.areas-accordion{border:1px solid #e1e5e1;border-radius:10px;overflow:hidden;background:#fff;}
.area-region{border-bottom:1px solid #e5e8e5;}
.area-region:last-child{border-bottom:0;}
.area-region summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;min-height:48px;padding:0 16px;color:#272c2f;font-size:14px;font-weight:700;}
.area-region summary::-webkit-details-marker{display:none;}
.area-region-mapicon{color:#7fc921;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.area-region-mapicon .icon{width:20px;height:20px;}
.area-region-count{color:#81878a;font-weight:500;font-size:13px;margin-left:6px;}
.area-region-chevron{width:18px;height:18px;color:#3f4548;transition:transform .18s var(--ease);}
.area-region[open] .area-region-chevron{transform:rotate(180deg);}
.area-region-links{display:flex;flex-wrap:wrap;gap:8px 14px;padding:4px 58px 16px;}
.area-region-links a{font-size:13px;color:#3f4649;text-decoration:none;border-bottom:1px solid transparent;}
.area-region-links a:hover{color:#21a94f;border-bottom-color:currentColor;}
.areas-directory-note{display:flex;align-items:center;gap:7px;margin-top:13px;color:#808689;font-size:12px;}
.areas-directory-note .icon{width:16px;height:16px;color:#7fc921;}
.areas-directory-note a{color:#23a94f;font-weight:700;text-decoration:none;}

.areas-help-card{margin-top:36px;min-height:204px;border:1px solid #e1e5e1;border-radius:12px;background:linear-gradient(135deg,#fbfcfa,#f5f7f4);display:grid;grid-template-columns:74px 1fr;gap:22px;padding:40px 38px;align-items:start;box-shadow:0 7px 20px rgba(20,23,25,.025);}
.areas-help-icon{width:72px;height:72px;border-radius:50%;background:#e7f4e3;display:flex;align-items:center;justify-content:center;color:#19a448;}
.areas-help-icon .icon{width:42px;height:42px;}
.areas-help-copy h2{font-size:23px;line-height:1.15;margin-bottom:8px;}
.areas-help-copy p{font-size:14px;line-height:1.55;color:#5e6568;max-width:430px;}
.areas-help-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2px;}
.areas-help-actions .btn{min-height:48px;border-radius:8px;}
.areas-help-actions .btn-secondary{border-color:#6bc48b;color:#28a750;background:#fff;}

@media (max-width:1100px){
  .areas-hub-hero{min-height:620px;}
  .areas-hub-hero-copy{width:100%;max-width:700px;padding-top:24px;}
  .areas-hub-map{position:absolute;left:0;right:0;top:285px;width:100%;height:330px;}
  .areas-hub-map::before{display:none;}
  .areas-popular{margin-top:34px;}
  .areas-popular-grid{grid-template-columns:repeat(2,1fr);}
  .areas-directory{grid-template-columns:1fr;gap:18px;}
  .areas-help-card{margin-top:0;}
}
@media (max-width:640px){
  .areas-hub-page{padding-bottom:48px;}
  .areas-hub-hero{min-height:580px;}
  .areas-hub-hero-copy h1{font-size:48px;}
  .areas-hub-hero-copy .lede{font-size:17px;line-height:1.55;margin-top:18px;}
  .areas-hub-map{top:300px;height:275px;left:-100px;width:calc(100% + 180px);}
  .areas-map-marker{font-size:10px;}
  .areas-map-marker--bedford{font-size:13px;}
  .areas-map-marker--bedford .map-pin{width:42px;height:42px;}
  .areas-popular-head{align-items:center;}
  .areas-popular-grid{grid-template-columns:1fr;gap:10px;}
  .area-popular-card{min-height:60px;padding:11px 14px;}
  .area-region summary{grid-template-columns:26px 1fr auto auto;padding:0 12px;gap:7px;}
  .area-region-count{font-size:12px;}
  .area-region-links{padding-left:46px;padding-right:14px;}
  .areas-help-card{grid-template-columns:56px 1fr;padding:26px 20px;gap:14px;}
  .areas-help-icon{width:54px;height:54px;}
  .areas-help-icon .icon{width:32px;height:32px;}
  .areas-help-actions{grid-template-columns:1fr;}
}


/* ========================================================================== 
   Bedford area page — mock-up matched layout (Aug 2026)
   ========================================================================== */
.bedford-area-page{background:#fff;padding-bottom:0;}
.bedford-area-hero{padding:4px 0 18px;overflow:hidden;}
.bedford-area-hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);gap:28px;align-items:center;min-height:410px;}
.bedford-area-hero-copy{padding:18px 0 10px;position:relative;z-index:3;}
.bedford-area-hero-copy .eyebrow{color:#31a84a;letter-spacing:.11em;margin-bottom:18px;font-weight:800;}
.bedford-area-hero-copy h1{font-size:clamp(54px,4.55vw,74px);line-height:.98;letter-spacing:-.035em;max-width:650px;}
.bedford-area-hero-copy>p{font-size:18px;line-height:1.65;color:#596169;max-width:620px;margin:24px 0 0;}
.bedford-hero-actions{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;}
.bedford-hero-actions .btn{min-width:205px;min-height:56px;border-radius:8px;font-size:16px;}
.bedford-hero-actions .btn-secondary{border-color:#9fd957;color:#24292c;background:#fff;}
.bedford-hero-actions .btn .icon{width:19px;height:19px;}
.bedford-hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;color:#70777b;font-size:14px;}
.bedford-hero-trust i{font-style:normal;color:#9aa0a3;}

.bedford-area-map{position:relative;min-height:390px;background:url('../img/areas-service-map.svg') center/cover no-repeat;}
.bedford-area-map::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:105px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.84) 38%,rgba(255,255,255,0) 100%);z-index:1;}
.bedford-area-map::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.12);pointer-events:none;}
.bedford-map-rings{position:absolute;z-index:2;left:50%;top:48%;width:200px;height:200px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(142,199,52,.10);box-shadow:0 0 0 45px rgba(142,199,52,.07),0 0 0 92px rgba(142,199,52,.04);}
.bedford-area-map{background:none;isolation:isolate;overflow:hidden;}
.bedford-area-map::before,.bedford-area-map::after{display:none;}
.bedford-area-map>.areas-map-artwork{position:absolute;inset:0;width:100%;height:100%;display:block;}
.bedford-map-marker{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;color:#15191c;font-size:13px;font-weight:700;white-space:nowrap;}
.bedford-map-marker>.icon{width:22px;height:22px;color:#77c924;stroke-width:2.4;}
.bedford-map-marker--bedford{left:50%;top:49%;font-size:17px;gap:5px;z-index:5;}
.bedford-map-main-pin{width:52px;height:62px;color:#72ca00;filter:drop-shadow(0 7px 10px rgba(95,163,0,.18));}
.bedford-map-marker--mk{left:27%;top:13%;}
.bedford-map-marker--stneots{left:69%;top:13%;}
.bedford-map-marker--luton{left:27%;top:56%;}
.bedford-map-marker--biggleswade{left:77%;top:48%;}
.bedford-map-marker--sandy{left:23%;top:79%;}
.bedford-map-marker--hitchin{left:48%;top:82%;}
.bedford-map-marker--stevenage{left:68%;top:79%;}

.bedford-services-section{padding:26px 0 20px;}
.bedford-services-section h2,.bedford-about-section h2,.bedford-projects-section h2,.bedford-nearby-section h2{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin-bottom:18px;}
.bedford-services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #e1e5e1;border-bottom:1px solid #e1e5e1;}
.bedford-service-link{min-height:58px;padding:0 14px;display:flex;align-items:center;gap:12px;text-decoration:none;color:#2c3235;font-weight:700;font-size:15px;border-right:1px solid #e1e5e1;border-bottom:1px solid #e1e5e1;}
.bedford-service-link:nth-child(3n){border-right:0;}
.bedford-service-link:nth-last-child(-n+3){border-bottom:0;}
.bedford-service-link>.icon{margin-left:auto;width:18px;height:18px;color:#67c51a;}
.bedford-service-link:hover{background:#fafcf7;color:#171b1e;}

.bedford-about-section{padding:24px 0 26px;}
.bedford-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:start;}
.bedford-about-copy p{font-size:15px;line-height:1.65;color:#596169;max-width:620px;margin:0 0 15px;}
.bedford-benefits-list{border-left:1px solid #e0e4e0;padding:10px 0 4px 42px;display:grid;gap:15px;}
.bedford-benefits-list>div{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;color:#596169;font-size:14px;line-height:1.45;}
.bedford-benefits-list .icon{width:21px;height:21px;color:#fff;fill:none;stroke:currentColor;stroke-width:2.6;background:#73c914;border-radius:50%;padding:3px;}

.bedford-projects-section{padding:18px 0 22px;}
.bedford-projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.bedford-project-card{min-height:176px;border:1px solid #dfe4df;border-radius:8px;overflow:hidden;background:#fff;display:grid;grid-template-columns:55% 45%;box-shadow:0 4px 14px rgba(20,23,25,.025);}
.bedford-project-media{display:block;overflow:hidden;min-height:176px;}
.bedford-project-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease);}
.bedford-project-card:hover .bedford-project-media img{transform:scale(1.02);}
.bedford-project-copy{padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.bedford-project-copy h3{font-size:17px;line-height:1.25;margin-bottom:10px;}
.bedford-project-location{display:block;color:#5c6468;font-size:12px;font-weight:700;line-height:1.3;margin:-4px 0 8px;}
.bedford-project-copy p{font-size:14px;line-height:1.55;color:#5c6468;margin:0 0 18px;}
.bedford-project-link{display:inline-flex;align-items:center;gap:8px;color:#56bb17;font-size:13px;font-weight:800;text-decoration:none;margin-top:auto;}
.bedford-project-link .icon{width:17px;height:17px;}

.bedford-nearby-section{padding:4px 0 30px;}
.bedford-nearby-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.bedford-nearby-link{min-height:48px;border:1px solid #dfe4df;border-radius:8px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0 16px;color:#40474a;font-size:13px;font-weight:700;text-decoration:none;background:#fff;}
.bedford-nearby-link>.icon{width:18px;height:18px;color:#79c925;}
.bedford-nearby-link:hover{border-color:#a8d66f;background:#fbfdf8;}

.bedford-quote-section{padding-top:14px;padding-bottom:58px;background:#f8faf7;}
.bedford-quote-section .render-quote-copy h2{max-width:760px;}
.bedford-quote-section .render-quote-next li{font-size:14px;}

@media (max-width:1100px){
  .bedford-area-hero-grid{grid-template-columns:1fr;gap:14px;}
  .bedford-area-hero-copy{max-width:760px;}
  .bedford-area-map{min-height:340px;}
  .bedford-project-card{grid-template-columns:48% 52%;}
  .bedford-nearby-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .bedford-area-hero-copy h1{font-size:48px;}
  .bedford-area-hero-copy>p{font-size:16px;}
  .bedford-hero-actions{gap:12px;}
  .bedford-hero-actions .btn{width:100%;min-width:0;}
  .bedford-area-map{min-height:280px;margin-left:-70px;margin-right:-70px;}
  .bedford-map-marker{font-size:10px;}
  .bedford-map-marker--bedford{font-size:13px;}
  .bedford-map-main-pin{width:42px;height:50px;}
  .bedford-services-grid{grid-template-columns:1fr;}
  .bedford-service-link,.bedford-service-link:nth-child(3n),.bedford-service-link:nth-last-child(-n+3){border-right:0;border-bottom:1px solid #e1e5e1;}
  .bedford-service-link:last-child{border-bottom:0;}
  .bedford-about-grid{grid-template-columns:1fr;gap:12px;}
  .bedford-benefits-list{border-left:0;border-top:1px solid #e0e4e0;padding:24px 0 0;}
  .bedford-projects-grid{grid-template-columns:1fr;}
  .bedford-project-card{grid-template-columns:1fr;}
  .bedford-project-media{height:210px;}
  .bedford-nearby-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:460px){
  .bedford-area-hero-copy h1{font-size:42px;}
  .bedford-area-map{margin-left:-105px;margin-right:-105px;}
  .bedford-nearby-grid{grid-template-columns:1fr;}
}


/* ABOUT PAGE V2 - mockup match */
.about-page-v2{background:#fff;padding:20px 0 0;}
.about-hero-v2{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:58px;align-items:center;padding:18px 0 24px;}
.about-hero-copy h1{font-size:clamp(42px,4vw,60px);line-height:1.05;letter-spacing:-.035em;margin:0 0 18px;color:var(--mm-ink);}
.about-hero-copy p{max-width:565px;font-size:17px;line-height:1.55;color:var(--mm-text-body);margin:0 0 14px;}
.about-hero-copy strong{color:var(--mm-ink);font-weight:800;}
.about-hero-actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;}
.about-hero-actions .btn{min-width:205px;justify-content:center;min-height:54px;border-radius:10px;}
.about-hero-actions .btn-secondary{border-color:var(--mm-primary-active);color:var(--mm-ink);}
.about-hero-actions .btn-secondary .icon{color:var(--mm-primary-active);}
.about-hero-image{height:395px;background:transparent;box-shadow:none;}
.about-trust-line{border-top:1px solid var(--mm-border);border-bottom:1px solid var(--mm-border);display:flex;align-items:center;justify-content:center;gap:34px;min-height:54px;color:#626a6f;font-size:15px;margin-bottom:26px;}
.about-trust-line i{width:4px;height:4px;background:var(--mm-primary-active);border-radius:50%;flex:0 0 auto;}
.about-story-v2{display:grid;grid-template-columns:minmax(0,695px) minmax(0,1fr);gap:56px;align-items:center;padding:0 0 28px;border-bottom:1px solid var(--mm-border);}
.about-story-image{width:100%;aspect-ratio:4/3;height:auto;align-self:start;border-radius:28px;overflow:hidden;background:transparent;}
.about-story-image-inner{width:100%;height:100%;border-radius:inherit;overflow:hidden;contain:paint;transform:translateZ(0);}
.about-story-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.about-story-copy h2,.about-compact-section h2{font-size:27px;line-height:1.15;letter-spacing:-.025em;margin:0 0 14px;color:var(--mm-ink);}
.about-story-copy h2{font-size:34px;}
.about-story-copy p{font-size:16px;line-height:1.55;color:var(--mm-text-body);margin:0 0 12px;}
.about-story-copy p.about-story-tagline{font-weight:600;color:var(--mm-ink);margin:16px 0 0;padding-top:16px;border-top:1px solid var(--mm-border);}
.about-story-copy p{font-size:18px;line-height:1.65;}
.about-story-copy a{text-decoration:underline;text-underline-offset:2px;}
.about-compact-section{padding:15px 0;border-bottom:1px solid var(--mm-border);}
.about-compact-section h2{font-size:25px;margin-bottom:10px;}
.about-service-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--mm-border);}
.about-service-link{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:50px;padding:0 16px;border-right:1px solid var(--mm-border);border-bottom:1px solid var(--mm-border);font-size:15px;font-weight:700;color:var(--mm-ink);}
.about-service-link:nth-child(3n){border-right:0;}
.about-service-link .icon{width:19px;height:19px;color:var(--mm-primary-active);}
.about-service-link:hover{color:var(--mm-primary-active);background:#fbfcfa;}
.about-reasons-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.about-reason{display:grid;grid-template-columns:24px 1fr;gap:13px;padding:5px 26px 6px 8px;border-right:1px solid var(--mm-border);}
.about-reason:last-child{border-right:0;}
.about-check{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mm-primary-active);color:white;margin-top:2px;}
.about-check .icon{width:13px;height:13px;}
.about-reason h3{font-size:15px;line-height:1.3;margin:0 0 6px;color:var(--mm-ink);}
.about-reason p{font-size:14px;line-height:1.5;color:var(--mm-text-body);margin:0;}
.about-steps-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.about-step{position:relative;display:grid;grid-template-columns:34px 1fr 20px;gap:9px;padding:4px 24px 5px 8px;border-right:1px solid var(--mm-border);align-items:start;}
.about-step:last-child{border-right:0;}
.about-step-no{font-size:18px;font-weight:800;color:var(--mm-primary-active);}
.about-step h3{font-size:15px;line-height:1.3;margin:0 0 5px;color:var(--mm-ink);}
.about-step p{font-size:13.5px;line-height:1.45;color:var(--mm-text-body);margin:0;}
.about-step>.icon{width:19px;height:19px;color:var(--mm-primary-active);align-self:center;margin-top:16px;}
.about-area-chips{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;}
.about-area-chip{height:44px;border:1px solid var(--mm-border);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:700;color:var(--mm-text-body);background:#fff;}
.about-area-chip .icon{width:18px;height:18px;color:var(--mm-primary-active);}
.about-area-chip:hover{border-color:var(--mm-primary-active);color:var(--mm-ink);}
.about-systems-strip{background:#f8f9f7;padding:35px 0 40px;margin-top:0;text-align:center;}
.about-systems-strip p{font-size:13px;color:var(--mm-text-mute);margin:0 0 18px;}
.about-systems-logos{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap;}
.about-systems-logos img{max-height:42px;max-width:110px;width:auto;height:auto;object-fit:contain;}
.about-final-cta{background:#111619;color:white;padding:78px 0 64px;}
.about-final-cta .content-max{max-width:700px;}
.about-final-eyebrow{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:800;color:var(--mm-primary);margin-bottom:18px;}
.about-final-cta h2{color:white;margin:0 0 24px;}
.about-final-cta-mobile-break{display:none;}
.about-final-cta h2 span{background:linear-gradient(90deg,#8ccf22 0%,#22b678 52%,#32a8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(77,192,131,.22);}
@media (min-width:769px){.about-final-cta h2 span{text-shadow:0 0 8px rgba(90,190,110,.18), 0 0 14px rgba(50,160,210,.10);}}
@media (min-width:768px){.about-final-cta .content-max{max-width:var(--content-max);}.about-final-cta h2 br{display:none;}}
.about-final-cta p{font-size:17px;line-height:1.5;color:#c9cdcf;margin:0 auto 24px;}
.about-final-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;}
.about-final-actions .btn{min-width:155px;justify-content:center;border-radius:10px;}
.about-final-cta small{font-size:12px;color:#9ca3a6;}
@media(max-width:1100px){.about-hero-v2{grid-template-columns:1fr 1fr;gap:34px}.about-hero-image{height:350px}.about-story-v2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.about-reasons-grid,.about-steps-grid{grid-template-columns:1fr 1fr;gap:18px 0}.about-reason:nth-child(2),.about-step:nth-child(2){border-right:0}.about-area-chips{grid-template-columns:repeat(4,1fr)}}
@media(max-width:767px){.about-page-v2{padding-top:4px}.about-hero-v2{grid-template-columns:1fr;gap:26px;padding-top:8px}.about-hero-copy h1{font-size:42px}.about-hero-copy p{font-size:16px}.about-hero-actions{gap:10px}.about-hero-actions .btn{width:100%;min-width:0}.about-hero-image{height:280px;order:-1}.about-trust-line{justify-content:flex-start;overflow-x:auto;white-space:nowrap;gap:16px;padding:0 4px}.about-story-v2{grid-template-columns:1fr;gap:22px}.about-story-image{height:235px;border-radius:22px}.about-story-image-inner{border-radius:inherit}.about-service-links{grid-template-columns:1fr}.about-service-link,.about-service-link:nth-child(3n){border-right:0}.about-reasons-grid,.about-steps-grid{grid-template-columns:1fr;gap:0}.about-reason,.about-reason:nth-child(2),.about-step,.about-step:nth-child(2){border-right:0;border-bottom:1px solid var(--mm-border);padding:12px 4px}.about-reason:last-child,.about-step:last-child{border-bottom:0}.about-area-chips{grid-template-columns:1fr 1fr;gap:10px}.about-systems-logos{gap:26px}.about-systems-logos img{max-height:34px;max-width:95px}.about-final-cta{padding:56px 0 48px}.about-final-cta h2{font-size:40px;line-height:1.02;letter-spacing:-.04em}.about-final-cta-mobile-break{display:inline;}.about-final-cta p br{display:none}.about-final-actions{flex-direction:column}.about-final-actions .btn{width:100%}}

/* The homepage final CTA is the mobile source of truth. The About page keeps its
   existing desktop presentation, while this shared component treatment prevents
   the matching mobile CTA from drifting in size, wrapping, or spacing. */
.about-final-cta.home-final-cta{padding-bottom:64px;}
@media(max-width:767px){
  .about-final-cta.home-final-cta{background:var(--mm-ink);padding:var(--space-5xl) 0;}
  .about-final-cta.home-final-cta .content-max{max-width:var(--content-max);}
  .about-final-cta.home-final-cta .about-final-eyebrow{
    font-family:var(--font-body);font-size:14px;font-weight:900;letter-spacing:.08em;
    text-transform:uppercase;margin:0 0 var(--space-lg);color:var(--mm-primary);
  }
  .about-final-cta.home-final-cta h2{
    font-size:var(--display-lg-size);font-weight:var(--display-lg-weight);line-height:var(--display-lg-lh);
    letter-spacing:normal;margin:0 0 var(--space-xl);color:var(--text-on-dark);
  }
  .about-final-cta.home-final-cta h2 span{
    background:linear-gradient(90deg,var(--mm-primary) 0%,var(--mm-primary) 10%,#1B9F67 30%,#1E93E0 40%,#1E93E0 60%,#1B9F67 70%,var(--mm-primary) 90%,var(--mm-primary) 100%);
    background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent;text-shadow:none;animation:mm-gradient-pan 6s ease-in-out infinite;
  }
  .about-final-cta.home-final-cta h2 br{display:none;}
  .about-final-cta.home-final-cta p{
    font-size:var(--body-lg-size);line-height:var(--body-lg-lh);max-width:44ch;
    margin:0 auto 20px;color:var(--text-on-dark-mute);
  }
  .about-final-cta.home-final-cta .about-final-actions{
    display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:0;
  }
  .about-final-cta.home-final-cta .about-final-actions .btn{
    width:auto;min-width:0;border-radius:var(--radius-lg);
  }
  .about-final-cta.home-final-cta small{
    display:block;font-size:var(--body-sm-size);line-height:var(--body-sm-lh);
    margin-top:20px;color:var(--text-on-dark-mute);
  }
}
@media(max-width:640px){
  .about-final-cta.home-final-cta{padding:var(--space-4xl) 0;}
  .about-final-cta.home-final-cta h2{font-size:var(--display-lg-size-mobile);}
}


/* About page: reuse established Rendering hub card/process language */
.about-reasons-modern{margin-top:24px;padding-top:64px;padding-bottom:68px;}
.about-reasons-modern .render-section-head{max-width:760px;margin:0 auto 30px;text-align:center;}
.about-reasons-modern .render-section-head h2{font-size:clamp(32px,3.1vw,44px);line-height:1.05;}
.about-reasons-modern .render-section-head p{max-width:650px;margin:10px auto 0;}
.about-reasons-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1180px;margin:0 auto;gap:16px;}
.about-reasons-card-grid .render-benefit{min-height:205px;padding:24px 20px 22px;}
.about-reasons-card-grid .render-benefit h3{font-size:16px;}
.about-reasons-card-grid .render-benefit p{font-size:13.5px;}
@media(max-width:1100px){
  .about-reasons-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:767px){
  .about-reasons-modern{padding-top:48px;padding-bottom:50px;}
  .about-reasons-card-grid{grid-template-columns:1fr;gap:12px;}
  .about-reasons-card-grid .render-benefit{
    display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;column-gap:14px;
    min-height:0;padding:16px 14px;
  }
  .about-reasons-card-grid .render-benefit-icon{
    grid-column:1;grid-row:1 / span 2;align-self:center;width:48px;height:48px;margin-bottom:0;
  }
  .about-reasons-card-grid .render-benefit-icon img{width:48px;height:48px;}
  .about-reasons-card-grid .render-benefit h3,.about-reasons-card-grid .render-benefit p{grid-column:2;min-width:0;}
}
@media(max-width:520px){
  .about-process-grid-modern{grid-template-columns:1fr;gap:32px;}
}

/* ========================================================================== 
   Project case studies — reusable production template
   Scoped to .cs-project-page so the existing example pages and shared site
   components retain their current presentation.
   ========================================================================== */
.cs-project-page .cs-project-hero{
  position:relative; min-height:560px; display:flex; align-items:flex-end; overflow:hidden;
  isolation:isolate; background:var(--mm-ink); color:#fff;
}
.cs-project-page .cs-project-hero-image{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  object-position:center center; display:block;
}
.cs-project-page .cs-project-hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,10,11,.88) 0%,rgba(8,10,11,.73) 29%,rgba(8,10,11,.34) 56%,rgba(8,10,11,.08) 78%),
    linear-gradient(180deg,rgba(8,10,11,.2) 0%,rgba(8,10,11,.06) 45%,rgba(8,10,11,.62) 100%);
}
.cs-project-page .cs-project-hero-inner{width:100%; padding-top:64px; padding-bottom:44px;}
.cs-project-page .cs-project-tags{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px;}
.cs-project-page .cs-project-tag{
  display:inline-flex; align-items:center; min-height:32px; padding:6px 14px; border:1px solid rgba(255,255,255,.34);
  border-radius:var(--radius-pill); background:rgba(18,21,22,.38); color:#fff; backdrop-filter:blur(6px);
  font-size:12px; font-weight:800; letter-spacing:.045em;
}
.cs-project-page .cs-project-tag--primary{background:var(--mm-primary); border-color:var(--mm-primary); color:var(--mm-ink);}
.cs-project-page .cs-project-title{
  max-width:850px; margin:0 0 18px; color:#fff; font-size:clamp(44px,5vw,68px); line-height:.98; letter-spacing:-.035em;
}
.cs-project-page .cs-project-intro{max-width:690px; margin:0; color:rgba(255,255,255,.9); font-size:18px; line-height:1.55;}
.cs-project-page .cs-project-meta{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:920px; gap:28px;
  margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.28);
}
.cs-project-page .cs-project-meta-item{display:flex; align-items:center; min-width:0; gap:12px;}
.cs-project-page .cs-project-meta-icon{display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; color:var(--mm-primary);}
.cs-project-page .cs-project-meta-icon svg{width:24px; height:24px;}
.cs-project-page .cs-project-meta-copy{display:block; min-width:0;}
.cs-project-page .cs-project-meta-label,
.cs-project-page .cs-project-meta-value{display:block;}
.cs-project-page .cs-project-meta-label{margin-bottom:2px; color:rgba(255,255,255,.62); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.cs-project-page .cs-project-meta-value{color:#fff; font-size:14px; font-weight:750; line-height:1.25;}

.cs-project-page .cs-project-main{padding-top:56px; padding-bottom:88px;}
.cs-project-page .cs-project-main-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr); gap:clamp(48px,7vw,88px); align-items:start;}
.cs-project-page .cs-project-copy{max-width:690px;}
.cs-project-page .cs-project-copy .eyebrow,
.cs-project-page .cs-project-gallery-header .eyebrow,
.cs-project-page .cs-before-after-heading .eyebrow{text-align:left; margin-bottom:12px; color:var(--mm-primary-active);}
.cs-project-page .cs-project-copy h2,
.cs-project-page .cs-project-gallery-header h2,
.cs-project-page .cs-before-after-heading h2,
.cs-project-page .cs-project-highlights-heading h2{margin:0; color:var(--mm-ink); font-size:clamp(32px,3.4vw,46px); line-height:1.08; letter-spacing:-.025em;}
.cs-project-page .cs-project-copy p{margin:22px 0 0; color:var(--mm-text-body); font-size:17px; line-height:1.7;}
.cs-project-page .cs-project-checklist{display:grid; gap:15px; margin:30px 0 0; padding:0; list-style:none;}
.cs-project-page .cs-project-check{display:flex; align-items:flex-start; gap:13px; color:var(--mm-ink); font-size:15px; line-height:1.5; font-weight:600;}
.cs-project-page .cs-project-check-icon{display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; margin-top:0; border-radius:50%; background:var(--mm-primary); color:var(--mm-ink);}
.cs-project-page .cs-project-check-icon svg{width:14px; height:14px; stroke-width:2.6;}
.cs-project-page .cs-project-details{
  position:relative; overflow:hidden; padding:32px; border:1px solid var(--mm-border); border-radius:var(--radius-xl);
  background:var(--mm-canvas-soft); box-shadow:0 16px 38px rgba(20,23,25,.055);
}
.cs-project-page .cs-project-details::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--mm-brand-gradient);}
.cs-project-page .cs-project-details h2{margin:0 0 17px; color:var(--mm-ink); font-size:25px; line-height:1.2;}
.cs-project-page .cs-project-details-list{display:grid;}
.cs-project-page .cs-project-details-row{display:grid; grid-template-columns:34px minmax(0,1fr); gap:13px; align-items:start; padding:15px 0; border-bottom:1px solid var(--mm-border);}
.cs-project-page .cs-project-details-row:last-child{padding-bottom:0; border-bottom:0;}
.cs-project-page .cs-project-details-icon{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--mm-primary-pale); color:var(--mm-primary-active);}
.cs-project-page .cs-project-details-icon svg{width:17px; height:17px;}
.cs-project-page .cs-project-details-copy,
.cs-project-page .cs-project-details-label,
.cs-project-page .cs-project-details-value{display:block;}
.cs-project-page .cs-project-details-label{margin-bottom:2px; color:var(--mm-text-mute); font-size:10.5px; font-weight:800; letter-spacing:.065em; text-transform:uppercase;}
.cs-project-page .cs-project-details-value{color:var(--mm-ink); font-size:14px; line-height:1.35; font-weight:700;}

.cs-project-page .cs-project-gallery{overflow:hidden;}
.cs-project-page .cs-project-gallery-header{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px;}
.cs-project-page .cs-gallery-view-larger{
  display:inline-flex; align-items:center; gap:8px; padding:8px 0; border:0; background:none; color:var(--mm-ink);
  font:inherit; font-size:14px; font-weight:750; text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}
.cs-project-page .cs-gallery-view-larger svg{width:17px; height:17px;}
.cs-project-page .cs-gallery-shell{display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:14px; align-items:center;}
.cs-project-page .cs-gallery-shell:not(.has-overflow){grid-template-columns:minmax(0,1fr);}
.cs-project-page .cs-gallery-shell:not(.has-overflow) .cs-gallery-arrow{display:none;}
.cs-project-page .cs-gallery-track{
  display:flex; gap:18px; min-width:0; overflow-x:auto; padding:3px 2px 12px; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.cs-project-page .cs-gallery-track::-webkit-scrollbar{display:none;}
.cs-project-page .cs-gallery-card{
  flex:0 0 calc((100% - 54px)/4); min-width:210px; padding:0; border:0; border-radius:var(--radius-md); background:transparent;
  color:inherit; font:inherit; text-align:left; scroll-snap-align:start; cursor:pointer;
}
.cs-project-page .cs-gallery-image{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius-md); background:#e8e9e5;}
.cs-project-page .cs-gallery-image img{width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s var(--ease);}
.cs-project-page .cs-gallery-card:hover .cs-gallery-image img{transform:scale(1.025);}
.cs-project-page .cs-gallery-caption{display:block; padding:10px 2px 0; color:var(--mm-ink); font-size:13px; line-height:1.35; font-weight:650;}
.cs-project-page .cs-gallery-arrow,
.cs-project-page .cs-gallery-lightbox-arrow,
.cs-project-page .cs-gallery-lightbox-close{
  display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--mm-border);
  border-radius:50%; background:var(--mm-canvas); color:var(--mm-ink); cursor:pointer; transition:opacity .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.cs-project-page .cs-gallery-arrow svg,
.cs-project-page .cs-gallery-lightbox-arrow svg,
.cs-project-page .cs-gallery-lightbox-close svg{width:18px; height:18px;}
.cs-project-page .cs-gallery-arrow:hover:not(:disabled){border-color:var(--mm-ink); background:#fff;}
.cs-project-page .cs-gallery-arrow:disabled{opacity:.28; cursor:default;}
.cs-project-page .cs-gallery-progress{height:3px; margin:18px 58px 0; overflow:hidden; border-radius:var(--radius-pill); background:#daddd5;}
.cs-project-page .cs-gallery-progress-thumb{display:block; height:100%; width:0; border-radius:inherit; background:var(--mm-primary); transform:translateX(0); will-change:transform;}

.cs-project-page .cs-gallery-lightbox{position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:32px;}
.cs-project-page .cs-gallery-lightbox[hidden]{display:none;}
.cs-project-page .cs-gallery-lightbox-backdrop{position:absolute; inset:0; background:rgba(6,8,9,.92);}
.cs-project-page .cs-gallery-lightbox-dialog{position:relative; z-index:1; width:min(1180px,100%); min-height:0; display:grid; grid-template-columns:52px minmax(0,1fr) 52px; gap:20px; align-items:center;}
.cs-project-page .cs-gallery-lightbox-dialog figure{min-width:0; margin:0; text-align:center;}
.cs-project-page .cs-gallery-lightbox-image{display:block; width:100%; max-height:calc(100vh - 150px); object-fit:contain; border-radius:var(--radius-md);}
.cs-project-page .cs-gallery-lightbox-caption{margin-top:13px; color:#fff; font-size:14px;}
.cs-project-page .cs-gallery-lightbox-arrow,
.cs-project-page .cs-gallery-lightbox-close{border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.1); color:#fff;}
.cs-project-page .cs-gallery-lightbox-close{position:absolute; top:-18px; right:0; z-index:2; transform:translateY(-100%);}
.cs-project-page .cs-gallery-lightbox-arrow:hover,
.cs-project-page .cs-gallery-lightbox-close:hover{background:rgba(255,255,255,.2); border-color:#fff;}

.cs-project-page .cs-before-after{padding-top:88px;}
.cs-project-page .cs-before-after-heading{margin-bottom:28px;}
.cs-project-page .cs-before-after-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.cs-project-page .cs-before-after-item{position:relative; overflow:hidden; margin:0; aspect-ratio:16/10; border-radius:var(--radius-lg); background:var(--mm-canvas-soft);}
.cs-project-page .cs-before-after-item img{width:100%; height:100%; display:block; object-fit:cover;}
.cs-project-page .cs-before-after-label{position:absolute; top:18px; left:18px; padding:7px 16px; border-radius:var(--radius-pill); font-size:12px; font-weight:800;}
.cs-project-page .cs-before-after-label--before{background:rgba(20,23,25,.88); color:#fff;}
.cs-project-page .cs-before-after-label--after{background:var(--mm-primary); color:var(--mm-ink);}

.cs-project-page .cs-project-highlights{padding-top:64px;}
.cs-project-page .cs-project-highlights-heading{margin-bottom:24px;}
.cs-project-page .cs-project-highlights-heading p{margin:9px 0 0; color:var(--mm-text-body); font-size:16px; line-height:1.55;}
.cs-project-page .cs-project-highlights-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.cs-project-page .cs-project-highlight{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:18px; align-items:start; min-width:0; padding:24px;
  border:1px solid rgba(20,23,25,.04); border-radius:var(--radius-lg); background:var(--mm-canvas-soft);
}
.cs-project-page .cs-project-highlight-icon{
  display:grid; place-items:center; width:64px; height:64px; border:2px solid var(--mm-primary); border-radius:50%;
  background:var(--mm-ink); color:var(--mm-primary);
}
.cs-project-page .cs-project-highlight-icon svg{width:31px; height:31px; stroke-width:1.7;}
.cs-project-page .cs-project-highlight-copy{min-width:0;}
.cs-project-page .cs-project-highlight-title{margin:1px 0 10px; color:var(--mm-ink); font-size:18px; line-height:1.18; letter-spacing:-.018em;}
.cs-project-page .cs-project-highlight-text{margin:0; color:var(--mm-text-body); font-size:14px; line-height:1.5;}

.cs-project-page .cs-gallery-card:focus-visible,
.cs-project-page .cs-gallery-view-larger:focus-visible,
.cs-project-page .cs-gallery-arrow:focus-visible,
.cs-project-page .cs-gallery-lightbox-arrow:focus-visible,
.cs-project-page .cs-gallery-lightbox-close:focus-visible,
.cs-project-page .cs-gallery-track:focus-visible{outline:3px solid var(--mm-primary); outline-offset:3px;}

@media(max-width:1024px){
  .cs-project-page .cs-project-hero{min-height:550px;}
  .cs-project-page .cs-project-title{font-size:clamp(42px,6vw,58px);}
  .cs-project-page .cs-project-main-grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:40px;}
  .cs-project-page .cs-project-details{padding:26px;}
  .cs-project-page .cs-gallery-card{flex-basis:230px;}
}
@media(max-width:900px){
  .cs-project-page .cs-project-highlights-grid{grid-template-columns:1fr;}
}
@media(max-width:800px){
  .cs-project-page .cs-project-hero{min-height:650px;}
  .cs-project-page .cs-project-hero-image{object-position:62% center;}
  .cs-project-page .cs-project-hero-overlay{background:linear-gradient(90deg,rgba(8,10,11,.83),rgba(8,10,11,.28)),linear-gradient(180deg,rgba(8,10,11,.2),rgba(8,10,11,.72));}
  .cs-project-page .cs-project-meta{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; row-gap:20px;}
  .cs-project-page .cs-project-main-grid{grid-template-columns:1fr; gap:42px;}
  .cs-project-page .cs-project-copy{max-width:none;}
  .cs-project-page .cs-project-details{width:100%;}
}
@media(max-width:640px){
  .cs-project-page .cs-project-hero{min-height:680px;}
  .cs-project-page .cs-project-hero-inner{padding-top:48px; padding-bottom:28px;}
  .cs-project-page .cs-project-title{font-size:clamp(36px,11vw,46px); line-height:1.02;}
  .cs-project-page .cs-project-intro{font-size:16px; line-height:1.5;}
  .cs-project-page .cs-project-meta{gap:18px 14px; margin-top:24px; padding-top:20px;}
  .cs-project-page .cs-project-meta-item{gap:8px;}
  .cs-project-page .cs-project-meta-icon{width:28px; height:28px; flex-basis:28px;}
  .cs-project-page .cs-project-meta-icon svg{width:20px; height:20px;}
  .cs-project-page .cs-project-meta-value{font-size:12.5px;}
  .cs-project-page .cs-project-main{padding-top:38px; padding-bottom:58px;}
  .cs-project-page .cs-project-copy p{font-size:16px; line-height:1.65;}
  .cs-project-page .cs-project-details{padding:22px 20px;}
  .cs-project-page .cs-project-gallery-header{align-items:flex-end; margin-bottom:20px;}
  .cs-project-page .cs-gallery-view-larger{font-size:13px;}
  .cs-project-page .cs-gallery-shell{display:block;}
  .cs-project-page .cs-gallery-arrow{display:none;}
  .cs-project-page .cs-gallery-track{margin-right:calc(var(--container-pad-mobile) * -1); padding-right:var(--container-pad-mobile); gap:14px;}
  .cs-project-page .cs-gallery-card{flex-basis:62vw;}
  .cs-project-page .cs-gallery-progress{margin:15px 0 0;}
  .cs-project-page .cs-gallery-lightbox{padding:18px;}
  .cs-project-page .cs-gallery-lightbox-dialog{grid-template-columns:40px minmax(0,1fr) 40px; gap:8px;}
  .cs-project-page .cs-gallery-lightbox-arrow{width:40px; height:40px;}
  .cs-project-page .cs-gallery-lightbox-close{top:-12px; width:40px; height:40px;}
  .cs-project-page .cs-before-after{padding-top:58px;}
  .cs-project-page .cs-before-after-grid{grid-template-columns:1fr; gap:18px;}
  .cs-project-page .cs-project-highlights{padding-top:52px;}
  .cs-project-page .cs-project-highlight{grid-template-columns:54px minmax(0,1fr); gap:15px; padding:20px;}
  .cs-project-page .cs-project-highlight-icon{width:54px; height:54px;}
  .cs-project-page .cs-project-highlight-icon svg{width:27px; height:27px;}
  .cs-project-page .cs-project-highlight-title{font-size:17px;}
}
@media(max-width:390px){
  .cs-project-page .cs-project-hero{min-height:700px;}
  .cs-project-page .cs-project-tag{padding:5px 10px; font-size:10.5px;}
  .cs-project-page .cs-project-title{font-size:35px;}
  .cs-project-page .cs-gallery-card{flex-basis:68vw;}
}
@media(max-width:340px){
  .cs-project-page .cs-project-hero{min-height:730px;}
  .cs-project-page .cs-project-title{font-size:32px;}
  .cs-project-page .cs-project-meta-value{font-size:12px;}
  .cs-project-page .cs-project-gallery-header{align-items:flex-start; flex-direction:column; gap:8px;}
  .cs-project-page .cs-gallery-view-larger{padding:0;}
  .cs-project-page .cs-gallery-card{flex-basis:76vw;}
}

/* Mobile shared subpage heroes: show the complete source image instead of cropping it into
   the desktop/tablet cover frame. The homepage hero, sliders and gallery components use other
   classes and are intentionally unaffected. */
@media (max-width:767px){
  .render-hub-hero-media,
  .render-hub-hero-media.about-hero-image{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    aspect-ratio:auto;
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .render-hub-hero-image{
    position:relative;
    inset:auto;
    width:100%;
    max-width:100%;
    height:auto;
    overflow:hidden;
    border-radius:inherit;
  }
  .render-hub-hero-image img{
    display:block;
    position:relative;
    inset:auto;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
  .render-hub-hero-media img{
    display:block;
    position:relative;
    inset:auto;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
  .render-quote-copy,
  .render-quote-next{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .silicone-compare-note-links .btn{
    white-space:normal;
    text-align:center;
  }
}

/* Page-level mobile guard: component overflow is fixed at source above; this prevents a
   remaining positioned/animated child from turning the document into a horizontal scroller.
   Explicit inner rails keep their own overflow-x:auto and remain independently scrollable. */
@media (max-width:768px){
  html,
  body{
    max-width:100%;
    overflow-x:clip;
  }
}