/* ============================================================
   Construction Rubi — brand component & layout stylesheet.
   Ported from HTML/tokens.css + HTML/styles.css. Content-image
   background-urls (hero, usp, services, collage, final CTA) live
   inline on the partials so editors can swap them via the Media
   Library. Font @font-face src repathed to ../fonts/.
   ============================================================ */

/* ---------- Webfonts (self-hosted) ---------- */
/* Barlow Condensed — display / headlines */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-condensed-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-condensed-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-condensed-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-condensed-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* DM Sans — body / UI */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/dm-sans-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/dm-sans-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-sans-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-sans-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/dm-sans-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/dm-sans-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* ============ COLORS ============ */
  /* Warm beige + black recolor. Beige canvas, cream cards, warm-espresso black
     anchors (hero/footer), refined warm-gold accent. */
  --rubi-gold: #E0A11E;        /* refined warm gold (was neon #ffc300) */
  --rubi-gold-deep: #B97D14;   /* deep gold for hover/secondary */
  --rubi-ink: #181410;         /* warm espresso black — anchors + dark text */
  --rubi-black: #000000;
  --rubi-white: #FBF6EE;       /* warm cream — cards + text-on-dark */
  --rubi-surface: #F2EADC;     /* warm beige page canvas */
  --rubi-border: #DDD0BB;      /* warm border */
  --rubi-muted: #B8AB95;       /* warm inactive */
  --rubi-footer: #ECE3D4;
  --rubi-panel: #E9DDC9;       /* deeper beige — alternates with the canvas */

  --rubi-on-dark-80: rgba(251, 246, 238, 0.82);
  --rubi-on-dark-70: rgba(251, 246, 238, 0.72);
  --rubi-on-dark-50: rgba(251, 246, 238, 0.52);
  --rubi-on-dark-13: rgba(251, 246, 238, 0.16);
  --rubi-on-dark-10: rgba(251, 246, 238, 0.12);
  --rubi-on-light-80: rgba(24, 20, 16, 0.82);
  --rubi-on-light-50: rgba(24, 20, 16, 0.50);
  --rubi-scrim: rgba(20, 16, 12, 0.55);
  --rubi-overlay: rgba(24, 20, 16, 0.7);

  --surface-page: var(--rubi-surface);
  --surface-card: var(--rubi-white);
  --surface-dark: var(--rubi-ink);
  --text-strong: var(--rubi-ink);
  --text-muted: var(--rubi-on-light-80);
  --text-on-dark: var(--rubi-white);
  --text-on-dark-muted: var(--rubi-on-dark-80);
  --text-inactive: var(--rubi-muted);
  --brand-primary: var(--rubi-gold);
  --brand-accent: var(--rubi-gold-deep);
  --on-brand: var(--rubi-ink);
  --border-subtle: var(--rubi-border);

  --hero-gradient: linear-gradient(90deg, #181410 0%, rgba(24,20,16,0.78) 50%, rgba(24,20,16,0) 100%);

  /* ============ TYPOGRAPHY ============ */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "DM Sans", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-hero: 86px;
  --text-display: 64px;
  --text-stat: clamp(48px, 7.4vw, 80px);   /* fluid: never overflows narrow stat columns */
  --text-statement: 48px;
  --text-h3: 24px;
  --text-lg: 20px;
  --text-base: 16px;
  --text-sm: 14px;

  --leading-tight: 1.0;
  --leading-display: 1.03;
  --leading-snug: 1.1;
  --leading-heading: 1.05;
  --leading-body: 1.3;
  --leading-relaxed: 1.42;

  --tracking-hero: -0.008em;
  --tracking-tight: -0.15px;
  --tracking-sub: -0.4px;
  --tracking-btn: 0.04em;

  /* ============ SPACING & LAYOUT ============ */
  --space-2: 2px;  --space-4: 4px;  --space-8: 8px;  --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-60: 60px; --space-76: 76px;
  --space-80: 80px; --space-90: 90px; --space-120: 120px;

  --layout-max: 1320px;
  --layout-gutter: 60px;
  --section-pad-top: 120px;
  --section-pad-bottom: 80px;
  --grid-gap: 20px;
  --hero-min-height: 940px;
  --cta-min-height: 460px;

  /* ============ RADII ============ */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-pill: 100px;
  --radius-full: 999px;

  /* ============ EFFECTS ============ */
  --border-hairline-light: 0.5px solid var(--rubi-border);
  --border-hairline-dark: 0.5px solid var(--rubi-on-light-50);
  --border-on-dark: 0.5px solid var(--rubi-on-dark-50);
  --border-on-dark-faint: 0.5px solid var(--rubi-on-dark-13);
  --border-outline: 1px solid var(--rubi-white);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.12);
  --focus-ring: 0 0 0 3px rgba(224, 161, 30, 0.45);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-strong);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden — keeps position:sticky working on single-CPT pages */
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.container {
  max-width: var(--layout-max);
  margin: 0 auto;
  width: 100%;
}
.section {
  padding: var(--section-pad-top) var(--layout-gutter) var(--section-pad-bottom);
}
/* "Dark" sections are now a warm beige panel (one tone deeper than the page),
   giving the page rhythm without the rejected dark look. Black is reserved for
   the hero + footer anchors only. */
.section--dark { background: var(--rubi-panel); }
.section--light { background: var(--surface-page); }

/* Strict two-tone rhythm: content bands alternate the two warm beiges
   section-by-section for an eye-catching cadence. The black hero (first child)
   and the final-CTA / footer sit outside this, so the .section bands in between
   alternate cleanly. Every content section renders dark text on light beige, so
   only the background tone changes — readability is unaffected by the tone. */
#main > .section:nth-child(even) { background: var(--rubi-panel); }
#main > .section:nth-child(odd)  { background: var(--rubi-surface); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-20);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: 1.5;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--tracking-btn);
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-standard),
              filter var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.btn--primary { background: var(--brand-primary); color: var(--on-brand); border-color: var(--brand-primary); }
.btn--primary:hover { filter: brightness(0.94); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--rubi-white); border-color: var(--rubi-white); }
.btn--outline:hover { background: var(--rubi-on-dark-10); }
.btn--dark { background: var(--rubi-ink); color: var(--rubi-white); border-color: var(--rubi-ink); }
.btn--dark:hover { filter: brightness(1.35); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn .icon-arrow { font-size: 1.05em; line-height: 1; }

/* ---------- Section headings ---------- */
.heading {
  display: flex; flex-direction: column; gap: var(--space-24);
  align-items: flex-start; max-width: 640px;
}
.heading--center { align-items: center; text-align: center; margin: 0 auto; }
.heading__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  text-transform: capitalize;
  color: var(--text-strong);
}
/* Sections that were dark are now warm-beige; keep this modifier dark-text-safe. */
.heading--on-dark .heading__title { color: var(--text-strong); }
.gold { color: var(--brand-primary); }
.heading__lead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--text-muted);
  max-width: 640px;
}
.heading--on-dark .heading__lead { color: var(--text-muted); }

/* ---------- Navbar ---------- */
.navbar {
  position: absolute;
  /* gap above the navbar so it floats off the top edge */
  top: var(--space-20); left: 0; right: 0;
  z-index: 20;
  /* full-bleed bar; the inner .container provides the gutter on narrow
     screens, exactly like .section, so the bar's content lines up with the
     1320px content column shared by every section (logo↔headline, CTA↔edge) */
  padding-block: var(--space-24);
  padding-inline: var(--layout-gutter);
}
/* Inner row also carries the global .container (max-width + margin:auto). */
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
}
.navbar__logo { height: 48px; width: auto; border-radius: var(--radius-md); }
.navbar__nav { display: flex; align-items: center; }
/* Menu lists (top level + nested) reset to bare, layout per breakpoint below. */
.navbar__menu, .navbar__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.navbar__menu { display: flex; align-items: center; gap: var(--space-4); }
.menu-item { position: relative; }
/* Per-item toggle is desktop-hover-driven, so hidden until the mobile drawer. */
.submenu-toggle { display: none; }
.navlink {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  color: var(--text-inactive);
  text-decoration: none;
}
.navlink:hover { color: var(--rubi-white); }
.navlink--active, .navlink.is-current, .current-menu-item > .navlink {
  color: var(--rubi-white); font-weight: var(--weight-bold);
  text-decoration: underline; text-underline-offset: 4px;
}
.navlink__dot { width: 5px; height: 5px; background: var(--rubi-white); display: inline-block; }
.navlink__caret { font-size: 12px; opacity: 0.8; }
/* burger hidden on desktop */
.navbar__burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--rubi-on-dark-50);
  border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.navbar__burger span { display: block; width: 20px; height: 2px; background: var(--rubi-white); transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base); }
.navbar__backdrop { display: none; }

/* ---------- Dropdown sub-menus (desktop ≥981px) ---------- */
@media (min-width: 981px) {
  .navbar__menu .sub-menu {
    position: absolute;
    top: calc(100% + var(--space-12)); left: 0;
    min-width: 248px;
    background: var(--rubi-ink);
    border: var(--border-on-dark-faint);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    padding: var(--space-8);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-standard),
                visibility 0s linear var(--duration-base);
    z-index: 70;
  }
  /* Bridge the vertical gap below the top-level link so the pointer can
     travel from link to its first-level panel without the panel closing. */
  .navbar__menu > .menu-item-has-children > .sub-menu::before {
    content: ""; position: absolute; top: calc(-1 * var(--space-12));
    left: 0; right: 0; height: var(--space-12);
  }
  .navbar__menu .menu-item:hover > .sub-menu,
  .navbar__menu .menu-item:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
  }
  /* Second level and deeper fly out flush to the right of their parent row —
     no horizontal gap, so there is no hover dead zone to cross. */
  .navbar__menu .sub-menu .sub-menu {
    top: calc(-1 * var(--space-8)); left: 100%;
    transform: translateX(8px);
  }
  .navbar__menu .sub-menu .menu-item:hover > .sub-menu,
  .navbar__menu .sub-menu .menu-item:focus-within > .sub-menu {
    transform: translateX(0);
  }
  /* Sub-menu links: full-width rows inside the dark panel. */
  .navbar__menu .sub-menu .navlink {
    width: 100%; white-space: nowrap;
    justify-content: space-between;
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-sm);
    color: var(--rubi-on-dark-80);
    font-size: var(--text-base);
  }
  .navbar__menu .sub-menu .navlink:hover,
  .navbar__menu .sub-menu .navlink:focus-visible {
    background: var(--rubi-on-dark-10); color: var(--rubi-white);
    text-decoration: none;
  }
  .navbar__menu .sub-menu .navlink--active { text-decoration: none; background: var(--rubi-on-dark-13); }
  /* Caret feedback: top-level points down and flips open; deeper levels point right. */
  .navbar__menu .menu-item-has-children > .navlink .navlink__caret {
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .navbar__menu > .menu-item:hover > .navlink .navlink__caret,
  .navbar__menu > .menu-item:focus-within > .navlink .navlink__caret { transform: rotate(180deg); }
  .navbar__menu .sub-menu .menu-item-has-children > .navlink .navlink__caret { transform: rotate(-90deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: var(--hero-min-height);
  overflow: hidden;
  background: var(--rubi-ink);
}
.hero__photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-gradient); }
.hero__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-primary); }
.hero__inner { position: relative; padding: 224px var(--layout-gutter) var(--space-80); }
.hero__copy { max-width: 920px; display: flex; flex-direction: column; gap: var(--space-40); }
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-hero);
  text-transform: uppercase;
  color: var(--rubi-white);
}
.hero__lead {
  margin: 0; max-width: 712px;
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--text-on-dark-muted);
}
.hero__actions { display: flex; gap: var(--space-20); margin-top: var(--space-8); flex-wrap: wrap; }
/* Shorter inner-page hero variant */
.hero--page { min-height: 560px; }
.hero--page .hero__inner { padding-bottom: var(--space-90); }

/* ---------- Credibility (hero stats) ---------- */
.credibility {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--space-120);
  padding: var(--space-48) 0 0;
  border-top: var(--border-on-dark);
  gap: var(--space-40);   /* breathing room between stat columns */
}
.stat { display: flex; flex-direction: column; gap: var(--space-8); align-items: center; text-align: center; }
.stat--left { align-items: flex-start; text-align: left; }
.stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-stat);
  line-height: 1.1;
  letter-spacing: 1px;
  color: var(--text-strong);
}
.stat__label {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3);
  line-height: 1.2;
  color: var(--text-muted);
}
.stat--on-dark .stat__value { color: var(--text-on-dark); }
.stat--on-dark .stat__label { color: var(--text-on-dark-muted); }
/* stat--on-dark also ships in the (now-beige) .section--dark stats band; the
   hero keeps the cream-on-black treatment above. */
.section--dark .stat--on-dark .stat__value { color: var(--text-strong); }
.section--dark .stat--on-dark .stat__label { color: var(--text-muted); }
/* Standalone credibility band (inner pages) — warm beige panel, dark stats. */
.credibility-band { background: var(--rubi-panel); }
.credibility-band .credibility { margin-top: 0; border-top: none; }
.credibility-band .stat__value { color: var(--text-strong); }
.credibility-band .stat__label { color: var(--text-muted); }

/* ---------- Problem grid ---------- */
.problem__grid { margin-top: var(--space-60); display: grid; grid-template-columns: repeat(3, 1fr); }
.problem__cell { background: var(--rubi-ink); padding: var(--space-32); display: flex; flex-direction: column; gap: var(--space-16); }
.problem__cell:not(:nth-child(3n + 1)) { border-left: var(--border-on-dark-faint); }
.problem__cell:nth-child(n + 4) { border-top: var(--border-on-dark-faint); }
.problem__icon { color: var(--rubi-white); }
.problem__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  color: var(--rubi-white);
}
.problem__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--rubi-on-dark-70);
}
.center-cta { display: flex; justify-content: center; margin-top: var(--space-60); }
/* Problem grid (ships in a now-beige .section--dark) — cream cards, dark text. */
.section--dark .problem__cell { background: var(--rubi-white); }
.section--dark .problem__cell:not(:nth-child(3n + 1)) { border-left: var(--border-hairline-light); }
.section--dark .problem__cell:nth-child(n + 4) { border-top: var(--border-hairline-light); }
.section--dark .problem__icon { color: var(--brand-accent); }
.section--dark .problem__title { color: var(--text-strong); }
.section--dark .problem__text { color: var(--text-muted); }

/* ---------- USP ---------- */
.usp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-48); align-items: center; margin-top: var(--space-60); }
.usp__col { display: flex; flex-direction: column; gap: var(--space-32); }
.usp__list { border-bottom: var(--border-hairline-light); }
.usp__item { padding: var(--space-16) 0; border-top: var(--border-hairline-light); }
.usp__item span {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-sub);
  color: var(--rubi-ink);
}
.usp__photo { aspect-ratio: 650 / 686; border-radius: var(--radius-md); background-size: cover; background-position: center; }

/* ---------- Services ---------- */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--space-60); }
.service { display: flex; flex-direction: column; gap: var(--space-20); }
.service__photo { width: 100%; aspect-ratio: 427 / 280; border-radius: var(--radius-md); background-size: cover; background-position: center; }
.service__body { display: flex; flex-direction: column; gap: var(--space-12); }
.service__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
  color: var(--text-strong);
}
.service__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.service__link {
  display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--rubi-ink);
  text-decoration: underline; text-underline-offset: 4px;
  text-transform: capitalize;
}

/* ---------- Plan ---------- */
.plan__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--space-60); }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-32); }
.step__badge {
  width: 112px; height: 112px; border-radius: var(--radius-full);
  background: var(--rubi-surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--rubi-ink);
}
.step__body { display: flex; flex-direction: column; gap: var(--space-12); align-items: center; }
.step__label { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-heading); }
.step__label .step__no { display: block; color: var(--brand-primary); }
.step__label .step__name { display: block; color: var(--rubi-white); }
.step__text { margin: 0; max-width: 320px; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--rubi-on-dark-70); }
/* Plan (ships in a now-beige .section--dark) — dark step text on warm beige. */
.section--dark .step__label .step__name { color: var(--text-strong); }
.section--dark .step__text { color: var(--text-muted); }

/* ---------- Testimonials ---------- */
.testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--space-60); }
.testi {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-32);
  padding: var(--space-24); border-radius: var(--radius-md);
  border: var(--border-hairline-dark); background: var(--surface-card); color: var(--text-strong);
}
.testi--dark { background: var(--rubi-panel); color: var(--text-strong); border-color: var(--border-subtle); }
.testi__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: inherit;
}
.testi__author { display: flex; align-items: center; }
.testi__name { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: inherit; }
.testi__name span { display: block; }
.testi__nav { display: flex; gap: var(--space-16); margin-top: var(--space-60); }
.circle-btn {
  width: 62px; height: 62px; border-radius: var(--radius-full); font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.circle-btn--ghost { background: var(--rubi-white); border: 1.55px solid var(--rubi-ink); color: var(--rubi-ink); }
.circle-btn--gold { background: var(--brand-primary); border: none; color: var(--rubi-ink); }
.circle-btn:disabled { opacity: 0.4; cursor: default; }

/* ---------- Statement / collage ---------- */
.statement__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-40); }
.statement__copy { max-width: 874px; display: flex; flex-direction: column; gap: var(--space-32); }
.statement__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-statement);
  line-height: var(--leading-snug);
  text-transform: capitalize;
  color: var(--rubi-white);
}
.statement__approach { display: flex; flex-direction: column; gap: var(--space-8); }
.statement__approach b { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); color: var(--rubi-white); }
.statement__approach span { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--text-on-dark-muted); }
/* Statement (ships in a now-beige .section--dark) — dark text on warm beige. */
.section--dark .statement__title,
.section--dark .statement__approach b { color: var(--text-strong); }
.section--dark .statement__approach span { color: var(--text-muted); }
.collage { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; margin-top: var(--space-76); align-items: stretch; }
.collage__col { display: flex; flex-direction: column; gap: 18px; }
.collage__photo { border-radius: var(--radius-md); background-size: cover; background-position: center; }
.collage__photo { position: relative; }
.collage__photo--tall { min-height: 718px; }
.collage__photo--cell { height: 350px; }
.collage__stat { border-radius: var(--radius-md); background: var(--surface-page); height: 350px; display: flex; align-items: center; justify-content: center; }

/* ---------- Areas served ---------- */
.areas__row { display: flex; gap: var(--grid-gap); margin-top: var(--space-60); }
.area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-12);
  align-items: center; text-align: center;
  padding: var(--space-40) var(--space-32);
  border-radius: var(--radius-md);
  background: var(--rubi-white);
  border: var(--border-hairline-light);
  color: var(--text-strong);
  text-decoration: none;
}
.area__pin { width: 28px; height: 28px; filter: brightness(0); }
.area__name { margin: 0; font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--leading-heading); color: var(--text-strong); }
.area__text { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-muted); }

/* ---------- Final CTA (split: project photo + gold action panel) ---------- */
.final-cta { background: var(--rubi-surface); padding: 100px var(--layout-gutter); }
.cta-split {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: var(--cta-min-height);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.cta-split__media { position: relative; overflow: hidden; background: var(--rubi-ink); }
.cta-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gold panel overlaps the photo and is cut on an angle — the brand diagonal. */
.cta-split__panel {
  position: relative;
  margin-left: -64px;
  clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%);
  background: var(--rubi-gold);
  color: var(--rubi-ink);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-60) var(--space-48) var(--space-60) calc(var(--space-48) + 64px);
}
.cta-split__title { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-display); line-height: var(--leading-tight); text-transform: capitalize; color: var(--rubi-ink); }
.cta-split__panel .gold { color: inherit; }   /* accent word stays ink on the gold panel */
.cta-split__text { margin: 0; max-width: 40ch; font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.4; color: var(--rubi-on-light-80); }
.cta-split__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20); margin-top: var(--space-4); }
.cta-split__call {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-base);
  color: var(--rubi-ink); text-decoration: none;
}
.cta-split__call svg { width: 18px; height: 18px; }
.cta-split__call:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta-split__trust { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); }
.cta-split__trust li {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm);
  color: var(--rubi-ink);
}
.cta-split__trust li:not(:first-child)::before {
  content: ""; width: 4px; height: 4px; margin-right: var(--space-16);
  border-radius: var(--radius-full); background: var(--rubi-ink); opacity: 0.45;
}

/* ---------- Footer ---------- */
.footer { background: var(--rubi-ink); padding: 0 var(--layout-gutter) var(--space-24); }
.footer__inner { max-width: var(--layout-max); margin: 0 auto; padding-top: var(--space-48); border-top: var(--border-on-dark); }
/* Fixed grid (brand wider + 3 link columns) keeps every column aligned on one
   row — the old flex+space-between wrapped Contact onto its own line. */
.footer__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: var(--space-48);
  padding-bottom: var(--space-40);
  align-items: start;
}
.footer__brand { max-width: 360px; display: flex; flex-direction: column; gap: var(--space-16); }
.footer__logo { height: 42px; width: auto; border-radius: var(--radius-md); }
.footer__about { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--rubi-on-dark-70); }
.footer__social { display: flex; gap: var(--space-12); align-items: center; margin-top: var(--space-4); }
.footer__social a {
  color: var(--rubi-on-dark-70); display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: var(--border-on-dark-faint);
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.footer__social a svg { width: 16px; height: 16px; }
.footer__social a:hover { color: var(--rubi-ink); background: var(--rubi-white); border-color: var(--rubi-white); }
.footer__col { display: flex; flex-direction: column; gap: var(--space-12); }
.footer__col h4 {
  margin: 0 0 var(--space-2); font-family: var(--font-body);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-btn);
  color: var(--rubi-on-dark-50);
}
.footer__col nav { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a {
  padding: var(--space-4) 0; font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--rubi-on-dark-80); text-decoration: none; width: fit-content;
  transition: color var(--duration-fast) var(--ease-standard);
}
.footer__col a:hover { color: var(--rubi-white); }
.footer__bottom { border-top: var(--border-on-dark); padding-top: var(--space-20); text-align: center; }
.footer__bottom span { font-family: var(--font-body); font-size: var(--text-sm); color: var(--rubi-on-dark-50); }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-40) var(--space-32); }
  .footer__brand { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--space-32); }
  .footer__brand { grid-column: auto; }
}

/* ---------- Popup (quote modal) ---------- */
.popup { position: fixed; inset: 0; z-index: 100; background: var(--rubi-overlay); display: none; align-items: center; justify-content: center; padding: var(--space-24); }
.popup[open], .popup.is-open { display: flex; }
.popup__card { background: var(--rubi-white); border-radius: var(--radius-md); width: 520px; max-width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lift); }
.popup__head { background: var(--rubi-ink); padding: 28px var(--space-32); display: flex; align-items: flex-start; justify-content: space-between; }
.popup__head h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 36px; line-height: 1; color: var(--rubi-white); }
.popup__head p { margin: 10px 0 0; font-family: var(--font-body); font-size: var(--text-base); color: var(--text-on-dark-muted); }
.popup__close { background: none; border: none; color: var(--rubi-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0; }
.popup__form { padding: 28px var(--space-32); display: flex; flex-direction: column; gap: 18px; }

/* ============================================================
   ADDITIONS (beyond the export) — content photos as <img> (so they
   stay Media-Library editable via trd_image), nav drawer, sticky
   form, Fluent Forms theming, scroll-reveal.
   ============================================================ */

/* Content photos rendered as <img> inside the export's photo containers
   (rather than CSS background-image) so editors can swap them. NOTE:
   trd_image() wraps the <img> in <span class="trd-img-wrap"> (display:block;
   position:relative; width/height:100%), so cover rules must target the img
   regardless of that wrapper — not as a direct child. */
.hero__photo, .usp__photo, .service__photo { overflow: hidden; }
.hero__photo img,
.usp__photo img,
.service__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Collage cells use min-height (no definite height), so the wrapper's
   height:100% can't resolve. Make the cell a positioning context and let the
   trd_image wrapper fill it absolutely; the img then covers that box. */
.collage__photo { position: relative; overflow: hidden; }
.collage__photo .trd-img-wrap { position: absolute; inset: 0; }
.collage__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Mobile nav drawer (≤980px) ---------- */
@media (max-width: 980px) {
  .navbar__burger { display: inline-flex; }
  .navbar__nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 84vw);
    background: var(--rubi-ink);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--space-4);
    padding: 96px var(--space-24) var(--space-32);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-standard);
    z-index: 60; overflow-y: auto;
  }
  .navbar.is-open .navbar__nav { transform: translateX(0); }
  .navbar__menu { flex-direction: column; align-items: stretch; gap: var(--space-4); width: 100%; }
  .menu-item { width: 100%; }
  .navbar .navlink { width: 100%; font-size: var(--text-lg); padding: var(--space-16) var(--space-12); }
  /* The link's inline caret is replaced by the dedicated toggle button. */
  .navbar__menu .navlink__caret { display: none; }

  /* Accordion toggle — sits at the right edge of each parent row. */
  .submenu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 0; right: 0; height: 56px; width: 56px;
    background: transparent; border: 0; cursor: pointer; color: var(--rubi-white);
  }
  .submenu-toggle__icon { font-size: 16px; line-height: 1; transition: transform var(--duration-base) var(--ease-standard); }
  .menu-item.is-open > .submenu-toggle .submenu-toggle__icon { transform: rotate(180deg); }

  /* Collapsed by default; expands when its parent item carries .is-open. */
  .navbar__menu .sub-menu {
    overflow: hidden; max-height: 0;
    padding-left: var(--space-16);
    transition: max-height var(--duration-base) var(--ease-standard);
  }
  .menu-item.is-open > .sub-menu { max-height: 1200px; }
  .navbar__menu .sub-menu .navlink { font-size: var(--text-base); color: var(--rubi-on-dark-80); padding: var(--space-12); }
  .navbar__menu .sub-menu .navlink:hover { color: var(--rubi-white); }

  .navbar__backdrop { display: block; position: fixed; inset: 0; background: var(--rubi-overlay); opacity: 0; pointer-events: none; transition: opacity var(--duration-base); z-index: 50; }
  .navbar.is-open .navbar__backdrop { opacity: 1; pointer-events: auto; }
  .navbar.is-open .navbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar.is-open .navbar__burger span:nth-child(2) { opacity: 0; }
  .navbar.is-open .navbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Single-CPT sticky lead form (long_description with_form) ---------- */
.long__grid { display: block; }
.long__body .heading { max-width: none; }
.long__prose { font-family: var(--font-body); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-20); margin-top: var(--space-32); }
.long__prose p { margin: 0; }
.long__grid--with-form { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.long__body { min-width: 0; }
.long__form { position: sticky; top: 110px; padding: var(--space-32); background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); }
.long__form-title { margin: 0 0 var(--space-8); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 30px; line-height: 1.05; color: var(--rubi-ink); }
.long__form-sub { margin: 0 0 var(--space-24); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); color: var(--text-muted); }
@media (max-width: 900px) {
  .long__grid--with-form { grid-template-columns: 1fr; gap: 48px; }
  .long__grid--with-form .long__form { order: 1; position: static; top: auto; }
  .long__grid--with-form .long__body { order: 2; }
}

/* ---------- NAP / contact details card ---------- */
.nap__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-32); margin-top: var(--space-60); }
.nap__item { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-24); border-radius: var(--radius-md); background: var(--surface-card); border: var(--border-hairline-light); }
.nap__label { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-btn); color: var(--rubi-on-light-50); }
.nap__value { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); color: var(--rubi-ink); text-decoration: none; }
a.nap__value:hover { color: var(--rubi-gold-deep); }

/* ---------- Map ---------- */
.map__frame { margin-top: var(--space-60); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.map__frame iframe { display: block; border: 0; width: 100%; height: 460px; }

/* ---------- Form section wrapper ---------- */
.form__embed { max-width: 760px; margin: var(--space-60) auto 0; }

/* ---------- Fluent Forms — match plugin specificity, brand the controls ---------- */
.ff-el-group .ff-el-input--content input[type="text"],
.ff-el-group .ff-el-input--content input[type="email"],
.ff-el-group .ff-el-input--content input[type="tel"],
.ff-el-group .ff-el-input--content textarea,
.ff-el-group .ff-el-input--content select {
  border-color: var(--border-subtle);
  background: var(--rubi-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}
.ff-el-group .ff-el-input--content input:focus,
.ff-el-group .ff-el-input--content textarea:focus,
.ff-el-group .ff-el-input--content select:focus { border-color: var(--rubi-ink); box-shadow: var(--focus-ring); outline: none; }
.ff-el-group label.ff-el-input--label { font-family: var(--font-body); font-weight: var(--weight-bold); color: var(--rubi-ink); }
.frm-fluent-form .ff-btn.ff-btn-submit,
.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style) {
  background: var(--rubi-gold); color: var(--rubi-ink); border-color: var(--rubi-gold);
  width: 100%;
  font-family: var(--font-body); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-btn);
  border-radius: var(--radius-sm);
}
.frm-fluent-form .ff-btn.ff-btn-submit:hover { filter: brightness(0.94); }

/* ---------- Scroll reveal ----------
   Handled by the parent's pure-CSS `.trd-reveal` (CSS scroll-driven animation,
   gated by @supports animation-timeline: view()). Content is fully visible by
   default — no JS, nothing hidden from crawlers. No JS reveal here. */

/* Smooth in-page anchor scrolling — CSS only, no JS. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Responsive (from export) ---------- */
@media (max-width: 1040px) {
  .hero__title { font-size: 64px; }
  .heading__title, .cta-split__title { font-size: 48px; }
  .problem__grid, .services__grid, .plan__grid, .testi__grid { grid-template-columns: 1fr 1fr; }
  .usp__grid, .statement__head { grid-template-columns: 1fr; display: grid; }
  .collage { grid-template-columns: 1fr 1fr; }
  .collage__photo--tall { min-height: 360px; grid-column: span 2; }
  .areas__row { flex-wrap: wrap; }
  .nap__grid { grid-template-columns: 1fr; }
}

/* Final-CTA split stacks: photo on top, gold panel below, angled seam flips
   to a horizontal cut so the brand diagonal survives the stack. */
@media (max-width: 860px) {
  /* Hero/stat credibility stacks before the 3 columns get too tight to fit the
     stat figures — keeps "1 000+" / "Certifié" from colliding on tablets. */
  .credibility { grid-template-columns: 1fr; gap: var(--space-40); }
  .cta-split { grid-template-columns: 1fr; }
  .cta-split__media { min-height: 280px; }
  .cta-split__panel {
    margin-left: 0; margin-top: -36px;
    clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
    padding: calc(var(--space-48) + 12px) var(--space-32) var(--space-40);
  }
  .cta-split__trust { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .cta-split__trust li:not(:first-child)::before { display: none; }
}
@media (max-width: 680px) {
  .section { padding: var(--space-80) var(--space-24) var(--space-48); }
  .navbar { padding: var(--space-16) var(--space-24); }
  .hero__inner { padding: 120px var(--space-24) 0; }
  .hero__title { font-size: 48px; }
  .problem__grid, .services__grid, .plan__grid, .testi__grid, .collage { grid-template-columns: 1fr; }
  .problem__cell { border-left: none !important; }
  .area, .areas__row { flex-basis: 100%; }
}