/* ==========================================================================
   BuildAngle — main stylesheet
   1. Variables   2. Fonts & reset   3. Typography   4. Layout
   5. Components  6. Page sections   7. Animations  8. Media queries
   ========================================================================== */


/* 1. Variables
   ========================================================================== */

:root {
  /* Brand colours — change these to re-theme the whole site (see BRANDING.md) */
  --color-accent: #ff8a24;          /* buttons, highlights, "//" eyebrows, logo dot */
  --color-accent-deep: #ff6a00;     /* map pins */
  --color-accent-glow: #f17101;     /* glow under primary buttons */
  --color-page: #0d0d0d;            /* page background */
  --color-root: #0a0a0a;            /* behind the page (overscroll) */
  --color-panel: #1a1a1a;           /* cards and panels */
  --color-panel-2: #262626;         /* tags, lines inside panels */
  --color-glass-base: #212121;      /* see-through header bar */
  --color-shade: #141414;           /* dark fade over hero photos */
  --color-border: #222;
  --color-white: #fff;              /* text */
  --color-black: #000;
  --color-star: #de8f07;
  --color-grey: #666;               /* muted labels (e.g. detail page eyebrow) */

  /* Effect colours (WebGL card borders / banners) */
  --color-shader-warm: #0f0a05;
  --color-shader-grey: var(--color-grey);

  /* Derived colours — calculated from the brand colours above, normally not edited */
  --color-glass: color-mix(in srgb, var(--color-glass-base) 70%, transparent);
  --color-glass-dark: color-mix(in srgb, var(--color-shade) 80%, transparent);
  --color-text-70: color-mix(in srgb, var(--color-white) 70%, transparent);
  --color-text-50: color-mix(in srgb, var(--color-white) 50%, transparent);
  --color-text-55: color-mix(in srgb, var(--color-white) 55%, transparent);
  --color-text-40: color-mix(in srgb, var(--color-white) 40%, transparent);
  --color-text-30: color-mix(in srgb, var(--color-white) 30%, transparent);
  --color-text-20: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-line-12: color-mix(in srgb, var(--color-white) 12%, transparent);
  --color-line-10: color-mix(in srgb, var(--color-white) 10%, transparent);
  --color-fill-06: color-mix(in srgb, var(--color-white) 6%, transparent);
  --color-scrim-40: color-mix(in srgb, var(--color-black) 40%, transparent);
  --color-pin-ring: color-mix(in srgb, var(--color-accent-deep) 64%, transparent);
  --color-pin-fill: color-mix(in srgb, var(--color-accent-deep) 18%, transparent);
  --shadow-pin: 0 4px 16px color-mix(in srgb, var(--color-black) 25%, transparent);
  --gradient-hero: linear-gradient(color-mix(in srgb, var(--color-shade) 0%, transparent) 40%, var(--color-shade) 100%);
  --gradient-cta: linear-gradient(color-mix(in srgb, var(--color-shade) 0%, transparent) 0%, var(--color-page) 100%);
  --gradient-card: linear-gradient(color-mix(in srgb, var(--color-page) 50%, transparent) 40%, var(--color-page) 100%);
  --gradient-promo: linear-gradient(color-mix(in srgb, var(--color-page) 22%, transparent) 0%, var(--color-page) 100%);
  --gradient-page-hero: linear-gradient(color-mix(in srgb, var(--color-shade) 0%, transparent) 0%, var(--color-shade) 100%);
  --gradient-page-hero-soft: linear-gradient(color-mix(in srgb, var(--color-shade) 25%, transparent) 0%, var(--color-shade) 100%);
  --gradient-visual: linear-gradient(color-mix(in srgb, var(--color-panel) 47%, transparent) 0%, color-mix(in srgb, var(--color-panel) 0%, transparent) 48%, color-mix(in srgb, var(--color-panel) 47%, transparent) 100%);

  /* Masks: only their opacity matters, they are never visible as a colour */
  --mask-solid: #000;
  --mask-light: #fff;

  /* Fonts — one variable Inter file: optical size 14 = "Inter", 32 = "Inter Display" */
  --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-opsz-text: "opsz" 14;
  --font-opsz-display: "opsz" 32;
  --font-features-display: "cv03", "cv04", "cv09", "cv11";

  /* Font sizes */
  --fs-h1: 56px;
  --fs-h2: 48px;
  --fs-h3: 32px;
  --fs-h3-card: 24px;
  --fs-card-small: 22px;
  --fs-h4: 20px;
  --fs-heat: 28px;
  --fs-statement: 28px;
  --fs-counter: 48px;
  --fs-stat: 48px;
  --fs-ticker: 24px;
  --fs-body: 16px;
  --fs-button: 16px;
  --fs-eyebrow: 14px;
  --fs-small: 12px;
  --fs-loader: 64px;

  /* Line heights & letter spacing */
  --lh-tight: 1;
  --lh-snug: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --ls-h1: -0.025em;
  --ls-h2: -0.02em;
  --ls-h3: -0.01em;
  --ls-eyebrow: 1.11px;
  --ls-tag: 1px;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-88: 88px;
  --space-120: 120px;
  --gutter: 88px;
  --section-gap: 128px;
  --page-gap: 120px;
  --content-max: 1440px;
  --header-pad: 16px;

  /* Logo file sizes (only used when a logo image replaces the text logo — see BRANDING.md) */
  --logo-height: 32px;
  --logo-height-loader: 64px;

  /* Radius */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-glow:
    color-mix(in srgb, var(--color-accent-glow) 19%, transparent) 0 1.34px 1.34px -0.47px,
    color-mix(in srgb, var(--color-accent-glow) 18%, transparent) 0 3.18px 3.18px -0.94px,
    color-mix(in srgb, var(--color-accent-glow) 18%, transparent) 0 5.81px 5.81px -1.41px,
    color-mix(in srgb, var(--color-accent-glow) 17%, transparent) 0 9.66px 9.66px -1.88px,
    color-mix(in srgb, var(--color-accent-glow) 16%, transparent) 0 15.6px 15.6px -2.34px,
    color-mix(in srgb, var(--color-accent-glow) 15%, transparent) 0 25.53px 25.53px -2.81px,
    color-mix(in srgb, var(--color-accent-glow) 12%, transparent) 0 43.96px 43.96px -3.28px,
    color-mix(in srgb, var(--color-accent-glow) 6%, transparent) 0 80px 80px -3.75px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-bars: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-bounce: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-hover: 0.3s;
  --dur-base: 0.4s;
  --dur-card: 0.5s;
  --dur-slow: 0.6s;
  --dur-rise: 0.8s;
  --dur-zoom: 1s;
  --dur-3d: 1.5s;
  --roll-duration: 0.4s;
  --reveal-distance: 40px;
  --rise-distance: 150px;
}


/* 2. Fonts & reset
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  background: var(--color-root);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow-x: clip;
  background: var(--color-page);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  font-variation-settings: var(--font-opsz-text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

address {
  font-style: normal;
}

hr {
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 2000;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-8);
  background: var(--color-accent);
  font-weight: 600;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* 3. Typography
   ========================================================================== */

.hero__title,
.page-hero__title,
.detail__title,
.section-head__title,
.about-card__title,
.coverage-card__title,
.service-card__title,
.blog-card__title,
.hero-card__title,
.mega-promo__title,
.why-us__visual-title,
.project-card__title,
.step__title,
.faq-item__question,
.review-card__name,
.newsletter__title,
.team-card__name,
.feature__toggle,
.statement__text,
.featured-post__title,
.material-card__title,
.perk__title,
.testimonial__quote,
.testimonial__name,
.project-tile__title,
.rich-text h2,
.quote-card__title,
.heat-text,
.eyebrow,
.tag-label,
.btn,
.nav__link,
.dropdown__link,
.mobile-menu__link,
.callback-banner__text,
.loader__word {
  font-variation-settings: var(--font-opsz-display);
  font-feature-settings: var(--font-features-display);
}

.hero__title,
.page-hero__title,
.detail__title {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
}

.about-card__title,
.coverage-card__title,
.mega-promo__title,
.project-card__title,
.rich-text h2,
.quote-card__title,
.featured-post__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h3);
}

.service-card__title,
.blog-card__title,
.why-us__visual-title,
.project-tile__title,
.material-card__title {
  font-size: var(--fs-h3-card);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.hero-card__title,
.step__title,
.faq-item__question,
.review-card__name,
.newsletter__title,
.team-card__name,
.feature__toggle,
.testimonial__name,
.perk__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* Same as the original: headings and short copy use balanced line breaks */
.hero__title,
.page-hero__title,
.page-hero__text,
.section-head__title,
.section-head__text,
.mega-promo__title,
.service-card__title,
.about-card__title,
.about-card__text,
.coverage-card__title,
.step__title,
.step__text,
.review-card__quote p,
.blog-card__title {
  text-wrap: balance;
}

.why-us__text,
.blog-preview__text,
.mission .section-head__text,
.why-choose__head .section-head__text {
  text-wrap: wrap;
}

.eyebrow {
  color: var(--color-text-30);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "// ";
  color: var(--color-accent);
}

.eyebrow--muted {
  color: var(--color-grey);
}

.eyebrow--small {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.tag-label {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--space-8) var(--space-14);
  border-radius: var(--radius-pill);
  background: var(--color-panel-2);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
}


/* 4. Layout
   ========================================================================== */

.home-page {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.section {
  position: relative;
}

.section--inset-8 {
  padding: var(--space-8);
}

.section--inset-12 {
  padding: var(--space-12);
}

.section__panel {
  padding-inline: var(--gutter);
  border-radius: var(--radius-12);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.section-head__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.section-head__text {
  color: var(--color-text-50);
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-head--center .section-head__copy {
  align-self: stretch;
  align-items: center;
}

.section-head--split .section-head__copy {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
}


/* 5. Components
   ========================================================================== */

/* Icons */
.icon {
  flex: none;
  fill: currentColor;
}

.icon--12 { width: 12px; height: 12px; }
.icon--14 { width: 14px; height: 14px; }
.icon--14-16 { width: 16px; height: 14px; }
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--22 { width: 22px; height: 22px; }
.icon--24 { width: 24px; height: 24px; }
.icon--28 { width: 28px; height: 28px; }
.icon--star { width: 12.63px; height: 12px; color: var(--color-star); }

/* Rolling text (letters slide up one line on hover) */
.roll {
  display: inline-flex;
  overflow: hidden;
  vertical-align: top;
  line-height: var(--lh-heading);
  white-space: pre;
}

.roll__letter {
  display: block;
  text-shadow: 0 1.2em 0 currentColor;
  transition: transform var(--roll-duration) var(--ease-out);
  transition-delay: var(--roll-delay, 0s);
}

:is(a, button):hover .roll__letter,
:is(a, button):focus-visible .roll__letter {
  transform: translateY(-1.2em);
}

/* Buttons */
.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 48px;
  padding-right: var(--space-16);
  border-radius: var(--radius-12);
  color: var(--color-white);
  font-size: var(--fs-button);
  font-weight: 600;
  white-space: nowrap;
}

.btn__label {
  padding: var(--space-16) var(--space-8) var(--space-16) var(--space-16);
  line-height: var(--lh-heading);
}

.btn--primary {
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.btn--flat {
  box-shadow: none;
}

.btn--ghost {
  background: var(--color-line-10);
}

.btn--text {
  padding-right: 0;
}

.btn--text .btn__label {
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
}

.btn--call {
  gap: 0;
  padding: 0 var(--space-16) 0 var(--space-4);
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.btn--call .btn__label {
  padding: 0 0 0 var(--space-8);
}

.btn__icon-tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-8);
  background: var(--color-white);
  color: var(--color-page);
}

.btn--submit {
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-14);
  background: var(--color-accent);
}

.btn--submit .btn__label {
  padding-inline: var(--space-16);
}

.btn--block {
  justify-content: center;
  width: 100%;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-20);
  background: var(--color-panel);
  transition: background-color var(--dur-hover) var(--ease-out);
}

.icon-button:hover {
  background: var(--color-accent);
}

/* Social icons */
.social {
  display: flex;
  align-items: center;
}

.social--topbar {
  gap: var(--space-10);
}

.social--footer {
  gap: var(--space-14);
}

.social--footer .social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-10);
  background: var(--color-page);
  transition: background-color var(--dur-hover) var(--ease-out);
}

.social--footer .social__link:hover {
  background: var(--color-accent);
}

/* Logo */
.logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.03em;
}

.logo__dot,
.wordmark__dot {
  color: var(--color-accent);
}

/* Optional logo file: <img class="logo-image"> replaces the text inside .logo,
   .loader__word or .wordmark (see BRANDING.md). The text logo stays the default. */
.logo-image {
  display: block;
  width: auto;
  height: var(--logo-height);
}

.logo-image--loader {
  height: var(--logo-height-loader);
}

.logo-image--wordmark {
  width: 100%;
  height: auto;
}

/* Rating badge */
.rating-badge {
  display: flex;
  align-items: center;
  gap: 4.75px;
}

.rating-badge__laurel {
  width: 24px;
  height: 38px;
  color: var(--color-white);
}

.rating-badge__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.96px;
}

.rating-badge__stars {
  display: flex;
  gap: 3.17px;
}

.rating-badge__label,
.statement__label {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-variation-settings: var(--font-opsz-display);
}

/* Header */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--header-pad);
  transition: background-color var(--dur-base) var(--ease-out);
}

.site-header__topbar {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
  border-radius: var(--radius-8);
  background: var(--color-glass);
  backdrop-filter: blur(10px);
}

.site-header__topbar-inner,
.site-header__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin-inline: auto;
}

.site-header__topbar-inner {
  padding-block: var(--space-8);
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  color: var(--color-text-50);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-eyebrow);
  font-variation-settings: var(--font-opsz-display);
}

.site-header__phone-icon {
  color: var(--color-accent);
}

.site-header__bar {
  padding-inline: var(--gutter);
}

/* Bar items sit above the mega menu panel, which covers the header from the top */
.site-header .logo,
.nav__link,
.nav__toggle,
.site-header__cta,
.menu-toggle {
  position: relative;
  z-index: 2;
}

.site-header__bar-inner {
  height: 48px;
}

.site-header .logo {
  margin-right: var(--space-56);
}

.nav {
  flex: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--space-8);
  font-size: var(--fs-button);
  font-weight: 600;
}

.nav__toggle {
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) var(--ease-out);
}

[data-dropdown].is-open .nav__toggle,
[data-dropdown].is-open .nav__link--button .icon {
  transform: rotate(180deg);
}

.nav__link--button > [data-roll] {
  display: inline-flex;
}

.nav__link--button .icon {
  transition: transform var(--dur-base) var(--ease-out);
}

.site-header__cta {
  transition: background-color var(--dur-base) var(--ease-out);
}

.menu-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: var(--radius-8);
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

/* Mega menu: the panel covers the header from the top, its content sits below the nav */
.mega {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  padding: calc(var(--header-offset, 126px)) var(--header-pad) var(--header-pad);
  background: var(--color-panel);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  visibility: hidden;
  transition: clip-path var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
}

.is-open > .mega {
  clip-path: inset(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mega__inner {
  display: flex;
  gap: var(--space-24);
  padding: var(--space-24) var(--gutter);
  border-radius: var(--radius-16);
  background: var(--color-page);
}

.mega__grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-32) var(--space-8);
  align-content: center;
  max-width: calc(var(--content-max) - 444px);
}

.mega-item {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-12);
  border-radius: var(--radius-12);
  transition: background-color var(--dur-base) var(--ease-out);
}

.mega-item:hover {
  background: var(--color-panel);
}

.mega-item__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-10);
  background: var(--color-panel);
}

.mega-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mega-item__title {
  font-weight: 500;
}

.mega-item__desc {
  color: var(--color-text-50);
}

.mega-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 444px;
  min-height: 308px;
  margin-left: auto;
  padding: var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-12);
}

.mega-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-promo);
}

.mega-promo__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-promo__title,
.mega-promo .btn {
  position: relative;
  z-index: 1;
}

.mega-promo__title {
  max-width: 300px;
}

.mega-promo .btn {
  align-self: flex-start;
}

/* "More pages" dropdown */
.nav__item--more {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 9px);
  left: -48px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 204px;
  padding: 22px var(--space-24);
  border-radius: var(--radius-12);
  background: var(--color-page);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
}

.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.dropdown__link {
  display: flex;
  align-items: center;
  height: 35px;
  font-weight: 600;
  white-space: nowrap;
}

/* Header states */
.site-header.is-mega-open .site-header__cta,
.site-header.is-stuck .site-header__cta {
  background: var(--color-panel-2);
}

.site-header.is-stuck {
  --header-offset: 80px;
  position: fixed;
  gap: 0;
  background: var(--color-glass-dark);
  backdrop-filter: blur(20px);
}

.site-header.is-stuck .site-header__topbar {
  display: none;
}

/* Mobile menu */
.mobile-menu {
  display: none;
}

/* Benefits list */
.benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.benefits__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-50);
}

.benefits__item .icon {
  color: var(--color-text-50);
  fill: none;
}

/* Cards: hero glass card */
.hero-card {
  display: flex;
  flex: none;
  gap: var(--space-16);
  width: 356px;
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
  border-radius: var(--radius-8);
  background: var(--color-fill-06);
  backdrop-filter: blur(10px);
}

.hero-card__image {
  flex: none;
  width: 148px;
  height: 125px;
  border-radius: var(--radius-4);
  object-fit: cover;
}

.hero-card__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 17px;
}

/* Slider */
.slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  overflow: hidden;
  touch-action: pan-y;
}

.slider__track {
  --per-view: 3;
  display: flex;
  gap: var(--space-16);
  transition: transform var(--dur-slow) var(--ease-out);
  perspective: 1200px;
}

.slider__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--space-16)) / var(--per-view));
}

.slider__controls {
  display: flex;
  align-items: center;
  gap: 11px;
}

.slider__progress {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-20);
}

.slider__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--color-white);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Service card */
.service-card {
  position: relative;
  display: block;
  height: 350px;
  padding: var(--space-8);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.service-card__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-12);
}

.service-card__body {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-8);
  background: var(--color-page);
}

.service-card__media {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-8);
  transition: height var(--dur-card) var(--ease-out);
}

.service-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 334px;
  background: var(--gradient-card);
}

.service-card__image {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 334px;
  object-fit: cover;
}

.service-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: var(--space-20);
}

.service-card__text {
  max-width: 355px;
}

.service-card__icon {
  width: 32px;
  height: 32px;
  color: var(--color-white);
}

.service-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-card) var(--ease-out), opacity var(--dur-card) var(--ease-out);
}

.service-card__desc {
  min-height: 0;
  overflow: hidden;
  color: var(--color-text-50);
}

.service-card__desc::before {
  content: "";
  display: block;
  height: var(--space-16);
}

.service-card:is(:hover, :focus-visible) .service-card__media {
  height: 100%;
}

.service-card:is(:hover, :focus-visible) .service-card__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Heat text (scroll-lit paragraph) */
.heat-text {
  flex: 1;
  color: var(--color-text-20);
  font-size: var(--fs-heat);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
}

.heat-text__char {
  color: var(--char-color, var(--color-text-20));
}

/* Stat card */
.stat-card {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  max-width: 292px;
  overflow: clip;
  padding: var(--space-16);
  border-radius: var(--radius-8);
  background: var(--color-panel);
}

/* The original centres number + label in a 90px box, which lifts the number 4px */
.stat-card__value,
.counter__value {
  margin-top: -4px;
  font-size: var(--fs-stat);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  font-feature-settings: "tnum", "zero";
}

.stat-card__label,
.counter__label {
  margin-top: var(--space-16);
  color: var(--color-text-50);
}

.stat-card__note {
  margin-top: auto;
  color: var(--color-text-50);
}

.avatars {
  display: flex;
  margin-top: auto;
}

.avatars__item,
.avatars__count {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.avatars__item + .avatars__item,
.avatars__count {
  margin-left: -19px;
}

.avatars__item {
  border: 2px solid var(--color-panel);
  object-fit: cover;
}

.avatars__count {
  display: grid;
  place-items: center;
  border: 2px solid var(--color-panel);
  background: var(--color-accent);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Callback banner + rotating word */
.callback-banner {
  position: relative;
  display: flex;
  flex: 1 0 0;
  padding: var(--space-8);
  overflow: clip;
  border-radius: var(--radius-8);
  background: var(--color-panel);
}

.callback-banner__shader {
  position: absolute;
  inset: var(--space-8);
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: var(--radius-4);
  background: var(--color-page);
  mask-image: radial-gradient(72% 50%, var(--mask-solid) 0%, transparent 100%);
}

.callback-banner__text {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  color: var(--color-text-70);
  font-size: var(--fs-ticker);
  font-weight: 600;
  line-height: var(--lh-body);
}

.word-ticker {
  position: relative;
  display: inline-block;
  min-width: 4.2em;
  color: var(--color-accent);
  line-height: var(--lh-heading);
  font-variation-settings: var(--font-opsz-text);
}

.word-ticker__word {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.word-ticker__word.is-active {
  position: relative;
  opacity: 1;
  transform: none;
}

.word-ticker__word.is-leaving {
  transform: translateY(-100%);
}

/* Coverage card */
.coverage-card {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-8) var(--space-24) var(--space-24);
  overflow: clip;
  border-radius: var(--radius-8);
  background: var(--color-panel);
}

/* Text and photo share the width equally (as in the original) */
.coverage-card__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-self: stretch;
  justify-content: space-between;
}

.coverage-card__desc {
  color: var(--color-text-50);
}

/* The photo reaches 8px from the card's top and bottom edges (16px past the 24px padding) */
.coverage-card__image {
  flex: 1 0 0;
  min-width: 0;
  height: calc(100% + 2 * var(--space-16));
  border-radius: var(--radius-4);
  object-fit: cover;
}

/* Logo strip */
/* Moving strip that fades out at both ends, like the original */
.logo-strip {
  overflow: hidden;
  border-radius: 3px;
  mask-image: linear-gradient(90deg, transparent 0%, var(--mask-solid) 10%, var(--mask-solid) 90%, transparent 100%);
}

.logo-strip__track {
  display: flex;
  gap: 21px;
  width: max-content;
}

.logo-strip__item img {
  width: auto;
  height: 21px;
}

/* Process step */
.step__header {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  text-align: left;
}

.step__icon {
  width: 24px;
  height: 24px;
  transition: color var(--dur-base) var(--ease-out);
}

.step.is-active .step__icon {
  color: var(--color-accent);
}

.step__panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 1px;
  opacity: 0;
  transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.step.is-active .step__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.step__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.step__text {
  padding-top: var(--space-24);
  color: var(--color-text-50);
}

.step__image {
  display: none;
}

/* Before / after compare */
.compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-16);
  --pos: 50%;
}

.compare__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare > .compare__image {
  position: absolute;
  inset: 0;
}

.compare__after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}

.compare__tag {
  position: absolute;
  top: var(--space-16);
  z-index: 1;
  padding: 6px var(--space-12);
  border-radius: 6px;
  background: var(--color-panel);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.compare__tag--before {
  left: var(--space-16);
}

.compare__tag--after {
  right: var(--space-16);
}

.compare__handle {
  position: absolute;
  inset: 0 auto 0 var(--pos);
  z-index: 1;
  width: 2px;
  margin-left: -1px;
  background: var(--color-white);
  pointer-events: none;
}

.compare__handle .icon {
  position: absolute;
  max-width: none;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  padding: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  fill: none;
  transform: translate(-50%, -50%);
}

.compare__range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare:has(.compare__range:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Review card */
.review-card {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-24);
  width: 405px;
  padding: var(--space-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-20);
  background: var(--color-page);
  user-select: none;
}

.review-card__icon {
  width: 30px;
  height: 26px;
  padding: 2.5px;
  color: var(--color-text-20);
}

.review-card__quote {
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-line-12);
  color: var(--color-text-70);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.review-card__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.review-card__place {
  color: var(--color-text-50);
}

/* Map */
.map {
  position: relative;
  width: min(731px, 100%);
  margin: 0 auto var(--space-16);
}

.map__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Optional uploaded map image (replaces the dotted outline) */
.map__image {
  display: block;
  width: 100%;
  height: auto;
}

.map__land {
  fill: var(--color-panel);
}

.map__dot {
  fill: var(--color-text-30);
}

.map__dot--lit {
  fill: var(--color-white);
}

.map__spotlight {
  fill: var(--mask-light);
}

.map__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, calc(-100% + 11px));
}

/* Pin position from WordPress (city settings): --pin-x / --pin-y. The numbered classes are the defaults. */
.map-pin { left: var(--pin-x); top: var(--pin-y); }
.map-pin--1 { left: 4.3%; top: 7.3%; }
.map-pin--2 { left: 13.2%; top: 68.7%; }
.map-pin--3 { left: 47.4%; top: 48.2%; }
.map-pin--4 { left: 96.7%; top: 18.9%; }
.map-pin--5 { left: 77%; top: 97.4%; }

.map-pin__label {
  padding: var(--space-8) var(--space-14);
  border-radius: 30px;
  background: var(--color-page);
  box-shadow: var(--shadow-pin);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.map-pin__dot {
  position: relative;
  width: 14px;
  height: 14px;
}

.map-pin__dot::before,
.map-pin__dot::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.map-pin__dot::before {
  inset: 0;
  border: 2.3px solid var(--color-pin-ring);
  background: var(--color-pin-fill);
}

.map-pin__dot::after {
  inset: 3.5px;
  background: var(--color-accent-deep);
}

/* Blog card */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 460px;
  padding: var(--space-8);
  overflow: hidden;
  border-radius: var(--radius-16);
}

.blog-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% 81.2%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.blog-card__image--home-addition {
  object-position: 48.3% 63.7%;
}

.blog-card__image--warning-signs {
  object-position: 52% 100%;
}

.blog-card__image--sealing { object-position: 48% 66.2%; }
.blog-card__image--commercial-maintenance { object-position: 45.8% 79.4%; }
.blog-card__image--new-build { object-position: 48.7% 90.8%; }
.blog-card__image--drainage { object-position: 45% 81.4%; }
.blog-card__image--foundation-crack { object-position: 54.4% 67.2%; }

.blog-card:hover .blog-card__image {
  transform: scale(1.05);
}

.blog-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-12);
  background: var(--color-page);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-50);
}

.blog-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.blog-card__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* FAQ */
.faq-item {
  border-radius: var(--radius-12);
  background: var(--color-panel);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-24);
  text-align: left;
}

.faq-item__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-white);
  fill: none;
  transition: transform var(--dur-base) var(--ease-bounce);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 1px;
  opacity: 0;
  transition: grid-template-rows var(--dur-base) var(--ease-bounce), opacity var(--dur-base) var(--ease-out);
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item__answer-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-item__answer p {
  padding: 0 var(--space-24) var(--space-24);
  color: var(--color-text-50);
}

/* Forms */
.quote-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: 688px;
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-scrim-40);
  backdrop-filter: blur(10px);
}

.quote-form__row {
  display: flex;
  gap: var(--space-16);
}

.field {
  position: relative;
  display: flex;
  flex: 1;
}

.field__input {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-10);
  background: var(--color-fill-06);
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: var(--ls-h2);
  appearance: none;
}

.field__input::placeholder {
  color: var(--color-text-50);
}

.field__input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Field with a visible label above it (detail page quote form) */
.field--labelled {
  flex-direction: column;
  gap: var(--space-8);
}

.field__label {
  color: var(--color-text-70);
}

.field__control {
  position: relative;
  display: block;
}

.field__input--soft {
  padding-inline: 14px;
  background: color-mix(in srgb, var(--color-page) 50%, transparent);
}

.field__input--soft::placeholder {
  color: var(--color-text-40);
}

.field__input--area {
  height: 140px;
  padding-block: var(--space-16);
  resize: vertical;
}

.field--select select {
  cursor: pointer;
}

.field--select option {
  background: var(--color-panel);
}

.field__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-16);
  width: 16px;
  height: 16px;
  fill: none;
  pointer-events: none;
  transform: translateY(-50%);
}

.newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.newsletter__row {
  display: flex;
  gap: var(--space-10);
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-10);
  background: var(--color-page);
}

.newsletter__input::placeholder {
  color: var(--color-text-50);
}

.newsletter__input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.newsletter__button {
  width: 105px;
}


/* 6. Page sections
   ========================================================================== */

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}

.has-loader .loader {
  display: block;
}

.loader__bars,
.page-transition {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
}

.loader__bar,
.page-transition__bar {
  flex: 1;
  margin-right: -1px;
  background: var(--color-accent);
}

.loader__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.25s ease-out;
}

.loader__word {
  font-size: var(--fs-loader);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025px;
  transform: translateY(-16px);
}

.loader__progress {
  position: absolute;
  top: calc(50% + 30px);
  left: 50%;
  width: 320px;
  height: 2px;
  background: var(--color-text-20);
  transform: translateX(-50%);
}

.loader__progress-fill {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--color-white);
}

.loader__count {
  position: absolute;
  right: 41px;
  bottom: 35px;
  color: var(--color-text-70);
  font-size: var(--fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.loader.is-leaving .loader__content {
  opacity: 0;
}

.loader.is-leaving .loader__bar {
  transform: translateY(-101%);
  transition: transform var(--dur-zoom) var(--ease-bars) var(--bar-delay, 0s);
}

/* Page transition */
.page-transition {
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

.page-transition__bar {
  background: var(--color-accent-deep);
  transform: translateY(-101%);
}

.is-transitioning .page-transition__bar,
.page-transition.is-covering .page-transition__bar {
  transform: none;
  transition: transform 0.3s var(--ease-bars) var(--bar-delay, 0s);
}

.page-transition.is-revealing .page-transition__bar {
  transform: translateY(101%);
  transition: transform 0.3s var(--ease-bars) var(--bar-delay, 0s);
}

/* Hero */
.hero {
  padding: var(--space-12);
}

.hero__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: calc(100vh - 24px);
  min-height: 640px;
  padding: 0 var(--gutter) var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-12);
}

.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}

.hero__image,
.hero__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__reveal {
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.hero__top {
  display: flex;
  align-items: flex-end;
  gap: var(--space-10);
}

.hero__intro {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-text-20);
}

/* Services */
.services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  max-width: var(--content-max);
  margin-inline: auto;
}

.services__inner > .slider,
.services__inner > .section-head {
  align-self: stretch;
}

.services__title {
  max-width: 600px;
}

.services__text {
  max-width: 50%;
}

/* About */
.about__panel {
  padding-block: var(--space-64);
  background: var(--color-panel);
}

.about__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.about__top {
  display: flex;
  gap: var(--space-16);
}

.about__eyebrow {
  flex: none;
  width: 420px;
}

.about__bottom {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-16);
  height: 445px;
}

.about-card {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.about-card__shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-16);
}

.about-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-12);
  background: var(--color-page);
}

.about-card__text {
  margin-top: auto;
  margin-bottom: var(--space-32);
  color: var(--color-text-70);
}

.about__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.about__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 21.2% 3.3%;
}

/* Why us */
.why-us__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.why-us__title {
  max-width: 620px;
}

.why-us__text {
  max-width: 496px;
}

/* Fixed-height row: the image card spans the full height of both stat rows */
.why-us__layout {
  display: flex;
  gap: var(--space-16);
  height: 608px;
}

.why-us__visual {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;
  max-width: 400px;
  padding: var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-8);
}

.why-us__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-visual);
}

.why-us__visual-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-us__visual-title,
.why-us__visual .logo-strip {
  position: relative;
  z-index: 1;
}

.why-us__visual-title {
  max-width: 282px;
}

.why-us__stats {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.why-us__row {
  display: flex;
  flex: 1 0 0;
  gap: var(--space-16);
  min-height: 0;
}

.why-us__row .stat-card:last-child {
  max-width: 284px;
}

/* Process */
.process__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.process__sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
}

.process__head {
  align-self: stretch;
}

.process__text {
  max-width: 50%;
}

.process__layout {
  display: flex;
  gap: var(--space-48);
  width: 100%;
}

.process__media {
  position: relative;
  flex: 1;
  height: 500px;
  overflow: hidden;
  border-radius: var(--radius-16);
}

.process__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(calc((var(--image-index, 0) - var(--process-step, 0)) * 100%));
  transition: transform var(--dur-slow) var(--ease-out);
}

.process__image:nth-child(1) { --image-index: 0; object-position: 47.8% 3.9%; }
.process__image:nth-child(2) { --image-index: 1; }
.process__image:nth-child(3) { --image-index: 2; }
.process__image:nth-child(4) { --image-index: 3; }

.process__track {
  display: flex;
  flex: 1;
  gap: var(--space-48);
}

.process__line {
  position: relative;
  flex: none;
  width: 2px;
  border-radius: 2px;
  background: var(--color-line-10);
}

.process__line-fill {
  position: absolute;
  top: var(--marker-top, 0);
  left: 0;
  width: 100%;
  height: var(--marker-height, 0);
  border-radius: inherit;
  background: linear-gradient(transparent, var(--color-accent) 50%, transparent);
  transition: top var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}

.process__steps {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.step {
  padding: var(--space-20);
  border-radius: var(--radius-16);
  opacity: 0.5;
  transition: background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.step.is-active {
  opacity: 1;
  background: var(--color-panel);
}

.step__text {
  max-width: 506px;
}

/* Projects */
.projects__panel {
  padding-block: var(--space-88);
  background: var(--color-panel);
}

.projects__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  max-width: var(--content-max);
  margin-inline: auto;
}

.projects__head .section-head {
  gap: var(--space-10);
}

.projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-32);
}

.projects__title {
  max-width: 553px;
}

.projects__cta-mobile {
  display: none;
}

.projects__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.projects__item {
  position: sticky;
  top: 120px;
}

.project-card {
  display: flex;
  gap: var(--space-16);
  height: 483px;
  padding: var(--space-16);
  border-radius: var(--radius-24);
  background: var(--color-page);
  transform-origin: center top;
  scale: var(--stack-scale, 1);
  opacity: var(--stack-opacity, 1);
}

.project-card .compare,
.project-card__info {
  flex: 1 0 0;
  min-width: 0;
}

.project-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  padding: var(--space-32);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.meta-list {
  --meta-gap: var(--space-24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--meta-gap);
  color: var(--color-text-50);
}

.meta-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.meta-list li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--meta-gap) / -2 - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
}

.meta-list .icon {
  fill: none;
}

.project-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.project-card__text {
  color: var(--color-text-70);
}

/* Reviews */
.reviews__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.reviews__head {
  gap: var(--space-24);
}

.reviews__text {
  max-width: 42%;
}

.reviews__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  overflow: clip;
  mask-image: linear-gradient(90deg, transparent 0%, var(--mask-solid) 10%, var(--mask-solid) 90%, transparent 100%);
}

.reviews__row {
  cursor: grab;
  touch-action: pan-y;
}

.reviews__row.is-dragging {
  cursor: grabbing;
}

.reviews__track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: max-content;
}

/* Areas */
.areas__panel {
  padding: var(--space-88);
  background: var(--color-panel);
}

.areas__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.areas__text {
  max-width: 600px;
}

.areas__cta {
  margin-top: calc(var(--space-40) - var(--space-56));
}

/* Blog preview */
.blog-preview__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.blog-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
}

.blog-preview__copy {
  gap: var(--space-16);
}

.blog-preview__text {
  max-width: 520px;
}

.blog-preview__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

/* FAQ */
.faq {
  padding: 0 var(--gutter) var(--space-120);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: var(--content-max);
  margin-inline: auto;
}

.faq__title {
  max-width: 600px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

/* CTA */
.cta__panel {
  position: relative;
  padding-block: var(--space-88);
  overflow: hidden;
  background: var(--color-panel);
}

.cta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gradient-cta);
}

.cta__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-64);
  max-width: var(--content-max);
  margin-inline: auto;
}

.cta__title,
.cta__text {
  max-width: 660px;
}

.cta__text {
  color: var(--color-white);
}

/* Floating WhatsApp button (every page) */
.whatsapp-float {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-16);
  background: var(--color-accent);
  box-shadow: var(--shadow-glow);
  color: var(--color-white);
  transition: background-color var(--dur-hover) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility 0s;
}

.whatsapp-float:hover {
  background: var(--color-accent-deep);
}

.js .whatsapp-float {
  animation: float-in var(--dur-slow) var(--ease-soft) 1s both;
}

.has-loader .whatsapp-float {
  animation-play-state: paused;
}

/* Hidden while the mobile menu is open */
.site-header.is-menu-open ~ .whatsapp-float {
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s, 0s, var(--dur-base);
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.8);
  }
}

/* Footer */
.site-footer {
  padding: 72px var(--gutter) var(--space-24);
  border-radius: var(--radius-8);
  background: var(--color-page);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: var(--content-max);
  margin-inline: auto;
}

.site-footer__columns {
  display: flex;
  justify-content: space-between;
  gap: var(--space-32);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-col__title {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--color-text-50);
}

.footer-col__link {
  color: var(--color-text-50);
  transition: color var(--dur-base) var(--ease-out);
}

.footer-col__link:hover {
  color: var(--color-white);
}

.site-footer__divider {
  height: 1px;
  background: var(--color-text-20);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4%;
}

.site-footer__brand {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
}

.wordmark {
  font-size: 19.2cqi;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.footer-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-32);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.footer-panel__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
}

.footer-panel__label,
.team-card__role,
.partners__title {
  color: var(--color-text-50);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-variation-settings: var(--font-opsz-display);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-16);
  color: var(--color-text-50);
}

.site-footer__legal {
  display: flex;
  gap: var(--space-32);
  white-space: nowrap;
}


/* Inner pages (shared by every page except the homepage)
   ========================================================================== */

.page-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
}

/* Page hero: full-bleed photo, centred title, call button.
   Each page sets its own title/text widths with a modifier (e.g. .page-hero--about). */
.page-hero {
  --hero-title-max: 50%;
  --hero-text-max: 40%;
  padding: var(--space-12);
}

.page-hero__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 900px;
  padding: 0 var(--gutter) var(--space-56);
  overflow: hidden;
  border-radius: var(--radius-12);
}

.page-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-page-hero);
  pointer-events: none;
}

.page-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  text-align: center;
}

.page-hero__copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: var(--space-24);
}

.page-hero__title {
  max-width: var(--hero-title-max);
}

.page-hero__text {
  max-width: var(--hero-text-max);
  color: var(--color-text-50);
}

/* Inner pages — tablet */
@media (max-width: 1199px) {
  .page-hero__frame {
    height: 720px;
  }
}

/* Inner pages — phone */
@media (max-width: 809px) {
  .page-hero {
    --hero-title-max: none;
    --hero-text-max: none;
  }

  .page-hero__frame {
    padding: 0 var(--space-16) var(--space-56);
  }
}


/* About page
   ========================================================================== */

/* Hero: 8px inset and a softer photo fade than the other pages */
.page-hero--about {
  padding: var(--space-8);
}

.page-hero--about .page-hero__frame::after {
  background: var(--gradient-page-hero-soft);
}

/* About intro: heading + text, photo strip, counters */
.about-intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.about-intro__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.about-intro__text {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.about-intro__head {
  flex: 1;
}

.about-intro__lead {
  max-width: 48%;
  color: var(--color-text-50);
}

.photo-strip {
  display: flex;
  gap: var(--space-16);
  height: 455px;
}

.photo-strip__image {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-16);
}

.photo-strip__image--side {
  max-width: 25%;
}

.photo-strip__image:first-child {
  object-position: 68% 1.5%;
}

.photo-strip__image:last-child {
  object-position: 50% 100%;
}

.about-stats {
  display: flex;
  justify-content: space-between;
}

.about-stats__divider {
  flex: none;
  width: 1px;
  height: 71px;
  align-self: center;
  background: var(--color-text-20);
}

.counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 90px;
}

.counter__value {
  margin-top: 0;
  font-size: var(--fs-counter);
}

/* Mission: who we are, mission and vision statements */
.mission__panel {
  padding-block: var(--space-64);
  background: var(--color-panel);
}

.mission__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: var(--content-max);
  margin-inline: auto;
}

.mission__intro {
  display: flex;
  gap: var(--space-24);
}

.mission__intro-text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.mission .section-head__text {
  max-width: 83%;
}

.mission__image {
  flex: 1 0 0;
  min-width: 0;
  height: 378px;
  object-fit: cover;
  border-radius: var(--radius-16);
}

.mission__line {
  height: 1px;
  background: var(--color-panel-2);
}

.mission__statements {
  display: flex;
  align-items: center;
}

.statement {
  display: flex;
  flex: 1 0 0;
}

.statement--end {
  justify-content: flex-end;
}

.statement__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  max-width: 94%;
}

.statement__text {
  color: var(--color-text-50);
  font-size: var(--fs-statement);
  line-height: var(--lh-body);
}

.statement__highlight {
  color: var(--color-white);
}

/* Team */
.team__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.team__list {
  display: flex;
  gap: var(--space-16);
}

.team-card {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-8);
}

.team-card__photo {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: var(--radius-12);
}

.team-card__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20);
  border-radius: var(--radius-12);
  background: var(--color-panel);
}

.team-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.team-card__social {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-8);
  background: var(--color-page);
  transition: background-color var(--dur-hover) var(--ease-out);
}

.team-card__social:hover {
  background: var(--color-accent);
}

.team-card__social .icon {
  width: 19px;
  height: 19px;
}

/* Why choose us: photo + feature accordion */
.why-choose {
  padding: 0 var(--gutter) var(--space-120);
}

.why-choose__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.why-choose__top {
  display: flex;
  align-items: flex-end;
  gap: var(--space-16);
}

.why-choose__head {
  flex: 1;
}

.why-choose__head .section-head__title {
  max-width: 800px;
}

.why-choose__head .section-head__text {
  max-width: 48%;
}

.why-choose__body {
  display: flex;
  gap: var(--space-48);
}

.why-choose__image {
  flex: 1 0 0;
  min-width: 0;
  height: 451px;
  object-fit: cover;
  border-radius: var(--radius-16);
}

.features {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-32);
  max-width: 46%;
}

.feature {
  padding-bottom: var(--space-24);
  border-radius: var(--radius-16);
  transition: background-color var(--dur-hover) var(--ease-out);
}

.feature.is-open {
  background: var(--color-panel);
}

.feature__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-24) var(--space-24) 0;
  text-align: left;
  opacity: 0.5;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.feature.is-open .feature__toggle {
  opacity: 1;
}

.feature__icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: color var(--dur-hover) var(--ease-out);
}

.feature.is-open .feature__icon {
  color: var(--color-accent);
}

.feature__body {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 1px;
  padding-inline: var(--space-24);
  transition: grid-template-rows var(--dur-hover) var(--ease-bounce);
}

.feature.is-open .feature__body {
  grid-template-rows: 1fr;
}

.feature__body-inner {
  min-height: 0;
  overflow: hidden;
}

.feature__body p {
  padding-top: var(--space-16);
  color: var(--color-text-50);
}


/* About page — tablet */
@media (max-width: 1199px) {
  .page-hero--about {
    --hero-title-max: 60%;
    --hero-text-max: 65%;
  }

  .why-choose__head .section-head__text {
    max-width: 70%;
  }

  .about-intro__top {
    gap: var(--space-32);
  }

  .about-intro__text {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
  }

  .about-intro__lead {
    max-width: none;
  }

  .photo-strip {
    height: 370px;
  }

  .mission__line {
    background: var(--color-text-20);
  }

  .team__list,
  .why-choose__body {
    flex-direction: column;
  }

  .why-choose__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .why-choose__head {
    align-self: stretch;
  }

  .why-choose__image {
    flex: none;
    width: 100%;
    height: 466px;
  }

  .features {
    max-width: none;
  }
}

/* About page — phone */
@media (max-width: 809px) {
  .page-hero--about {
    --hero-title-max: none;
    --hero-text-max: none;
  }

  .mission .section-head__text,
  .why-choose__head .section-head__text {
    max-width: none;
  }

  .about-intro.section,
  .team.section {
    padding: 0;
  }

  .about-intro__inner,
  .about-intro__top {
    gap: var(--space-24);
  }

  .about-intro__text {
    gap: var(--space-16);
  }

  .photo-strip {
    height: 240px;
  }

  .photo-strip__image--side,
  .about-stats__divider,
  .why-choose__image {
    display: none;
  }

  .about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  .counter {
    align-items: center;
    text-align: center;
  }

  .mission.section {
    padding: var(--space-8);
  }

  .mission__panel {
    padding-block: var(--space-40);
  }

  .mission__inner {
    gap: var(--space-40);
  }

  .mission__intro {
    flex-direction: column;
    gap: var(--space-32);
  }

  .mission__intro-text {
    flex: none;
    align-items: stretch;
    gap: var(--space-24);
  }

  .mission__cta {
    justify-content: center;
  }

  .mission__image {
    flex: none;
    width: 100%;
  }

  .mission__statements {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-48);
  }

  .statement {
    justify-content: flex-end;
  }

  .statement__body {
    gap: var(--space-8);
  }

  .why-choose {
    padding: var(--space-32) var(--gutter);
  }

  .why-choose__inner {
    gap: var(--space-32);
  }

  /* The quote button moves below the feature list */
  .why-choose__top {
    display: contents;
  }

  .why-choose__cta {
    order: 1;
    justify-content: center;
  }

  /* The hidden photo still leaves its 12px gap above the list, as in the original */
  .why-choose__body {
    padding-top: var(--space-12);
  }
}


/* Services page
   ========================================================================== */

.page-wrap--services {
  --page-gap: 118px;
}

/* Services list: split heading + 2-column grid of the shared service cards */
.services-list {
  padding: var(--space-10);
}

.services-list__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.services-list__head .section-head__copy {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.services-list__head .section-head__title {
  flex: 1 0 0;
  max-width: 50%;
}

.services-list__head .section-head__text {
  flex: 1 0 0;
  max-width: 32%;
}

.services-list__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

/* The original shows the reviews block on phones only */
.reviews--phone-only {
  display: none;
}

/* Services page — tablet */
@media (max-width: 1199px) {
  .page-wrap--services {
    --page-gap: 80px;
  }

  .page-hero--services {
    --hero-title-max: 58%;
    --hero-text-max: none;
  }

  .services-list__head .section-head__text {
    max-width: 34%;
  }
}

/* Services page — phone */
@media (max-width: 809px) {
  .page-wrap--services {
    --page-gap: 64px;
  }

  .page-hero--services {
    --hero-title-max: 97%;
  }

  .services-list {
    padding: 0;
  }

  .services-list__inner {
    gap: var(--space-40);
  }

  .services-list__head .section-head__copy {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .services-list__head .section-head__title,
  .services-list__head .section-head__text {
    flex: none;
    max-width: none;
  }

  .services-list__grid {
    grid-template-columns: 1fr;
  }

  .page-hero--services .page-hero__image {
    object-position: 29.4% 12.2%;
  }

  .reviews--phone-only {
    display: block;
  }

  .reviews--phone-only .reviews__head {
    padding-top: 0;
  }
}


/* Projects page
   ========================================================================== */

/* Project grid: tiles with a before/after slider and an info bar */
.projects-grid {
  padding-inline: var(--gutter);
}

.projects-grid__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.projects-grid__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
}

.page-hero--projects {
  --hero-text-max: 89%;
}

.page-hero--projects .page-hero__image {
  object-position: 50% 100%;
}

/* Fixed 548px tile: the slider takes the height left by the info bar */
.project-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  height: 548px;
}

.project-tile__compare {
  flex: 1 0 0;
}

.project-tile__compare .compare__handle .icon {
  width: 40px;
  height: 40px;
  padding: 9px;
}

.project-tile__info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.project-tile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.project-tile .meta-list {
  --meta-gap: var(--space-20);
}

/* Partner logos: label + moving strip */
.partners {
  padding-inline: var(--gutter);
}

.partners__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  max-width: var(--content-max);
  margin-inline: auto;
}

.logo-strip--large {
  border-radius: 3px;
  mask-image: linear-gradient(90deg, transparent 7%, var(--mask-solid) 14%, var(--mask-solid) 86%, transparent 93%);
}

.logo-strip--large .logo-strip__track {
  gap: var(--space-64);
}

.logo-strip--large .logo-strip__item img {
  height: 32px;
}

/* Process without its intro paragraph (Services, Projects) — phone spacing */
@media (max-width: 809px) {
  .process--compact .section__panel {
    padding-inline: var(--space-16);
  }

  .process--compact .process__sticky {
    gap: var(--space-24);
  }
}

/* Projects page — tablet */
@media (max-width: 1199px) {
  .page-wrap--projects {
    --page-gap: 80px;
  }

  .page-hero--projects {
    --hero-text-max: 50%;
  }

  .page-wrap--projects .process__sticky {
    gap: var(--space-40);
  }

  .page-wrap--projects .why-us .section-head__copy {
    gap: var(--space-24);
  }

  .projects-grid {
    padding-bottom: 100px;
  }

  .projects-grid__list {
    grid-template-columns: 1fr;
  }
}

/* Projects page — phone */
@media (max-width: 809px) {
  .projects-grid {
    padding-block: var(--space-48);
  }

  .page-wrap--projects {
    --page-gap: 64px;
  }

  .page-hero--projects {
    --hero-text-max: 93%;
  }

  .page-wrap--projects .process__sticky {
    gap: var(--space-24);
  }

  .page-wrap--projects .faq {
    padding: 60px var(--space-16);
  }

  .projects-grid__list {
    gap: var(--space-20);
  }

  .project-tile__info {
    flex-direction: column;
    align-items: flex-start;
  }

  .partners {
    padding-inline: var(--space-16);
  }

  .logo-strip--large .logo-strip__item img {
    height: 17px;
  }
}


/* Blog page
   ========================================================================== */

.page-hero--blog {
  --hero-title-max: 500px;
}

.page-hero--blog .page-hero__frame::after {
  background: var(--gradient-page-hero-soft);
}

.blog-list__inner {
  display: flex;
  flex-direction: column;
  gap: 86px;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-120);
}

.blog-list__featured {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

/* Featured post: photo + text panel */
.featured-post {
  display: grid;
  grid-template-columns: 596fr 628fr;
  gap: var(--space-16);
  height: 460px;
}

.featured-post__media {
  overflow: hidden;
  border-radius: var(--radius-16);
}

.featured-post__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% 81.2%;
  transition: transform var(--dur-slow) var(--ease-out);
}

.featured-post:hover .featured-post__image {
  transform: scale(1.05);
}

.featured-post__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.featured-post__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.featured-post__excerpt {
  color: var(--color-text-50);
}

.featured-post__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

/* All posts: centred heading, category filter, 2-column grid */
.blog-list__all {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
}

.blog-list__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.blog-list__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
}

/* Filter tabs (Blog, Materials) */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.filter-tabs__tab {
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-8);
  background: var(--color-panel-2);
  font-size: var(--fs-eyebrow);
  line-height: 20px;
  transition: background-color var(--dur-hover) var(--ease-out);
}

.filter-tabs__tab:hover {
  background: color-mix(in srgb, var(--color-white) 15%, var(--color-panel-2));
}

.filter-tabs__tab[aria-pressed="true"] {
  background: var(--color-accent);
}

/* Blog page — tablet */
@media (max-width: 1199px) {
  .page-wrap--blog {
    --page-gap: 80px;
  }

  .page-hero--blog {
    --hero-text-max: none;
  }

  .blog-list__grid,
  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post {
    height: auto;
  }

  .featured-post__media {
    height: 460px;
  }
}

/* Blog page — phone */
@media (max-width: 809px) {
  .page-wrap--blog {
    --page-gap: 64px;
  }

  .page-hero--blog {
    --hero-text-max: 88%;
  }

  .blog-list__inner {
    padding-block: 44px 92px;
  }

  .blog-list__grid {
    gap: var(--space-24);
  }

  .featured-post__body {
    gap: var(--space-40);
  }

  .featured-post__media {
    height: 288px;
  }

  .featured-post__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .featured-post__cta {
    justify-content: center;
  }

  .filter-tabs__tab {
    flex: 1 1 0;
    min-width: max-content;
  }

  .blog-list__all {
    gap: var(--space-32);
  }
}


/* Blog detail page
   ========================================================================== */

.post-page__article {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  max-width: calc(var(--content-max) + 200px);
  margin-inline: auto;
  padding: 200px 100px var(--space-120);
}

.post-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.post-page__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
}

.tag-label--large {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
}

.post-page__meta {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  color: var(--color-text-50);
}

.post-page__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.post-page__cover {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: 49% 81.2%;
  border-radius: var(--radius-16);
}

/* Sticky contents + share card beside the article */
.post-page__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
}

.post-page__aside {
  position: sticky;
  top: 64px;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--space-16);
  width: 308px;
}

.post-page__content {
  flex: 1 0 0;
  min-width: 0;
}

.rich-text--article h2 {
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.04em;
  scroll-margin-top: 100px;
}

.rich-text.rich-text--article > * + ul {
  margin-top: var(--space-24);
}

.toc,
.share-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.toc {
  gap: var(--space-16);
  padding: var(--space-24);
}

.toc__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Links sit 12px left of the title so their bar lines up with the card padding */
.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-left: calc(-1 * var(--space-12));
}

.toc__link {
  display: block;
  padding: 2px 0 2px var(--space-12);
  border-left: 2px solid var(--color-line-12);
  color: var(--color-text-55);
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: -0.01em;
  transition: color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.toc__link:hover,
.toc__link.is-active {
  color: var(--color-white);
}

.toc__link.is-active {
  border-color: var(--color-accent);
}

.share-card {
  gap: var(--space-14);
  padding: var(--space-16);
}

.share-card__title {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
}

/* Related posts */
.related-posts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: calc(var(--content-max) + 200px);
  margin-inline: auto;
  padding: 0 100px var(--space-88);
}

.related-posts__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
}

.related-posts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.blog-card--related {
  height: 464px;
}

.blog-card--related .blog-card__title {
  font-size: var(--fs-card-small);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h3);
}

/* Blog detail page — tablet: contents list hidden, share card under the article */
@media (max-width: 1199px) {
  .post-page__article {
    gap: var(--space-40);
    padding: 140px 40px 154px;
  }

  /* Article and share card share one centred 650px column */
  .post-page__body {
    width: 100%;
    max-width: 650px;
    margin-inline: auto;
  }

  .post-page__cover {
    height: 350px;
  }

  .post-page__body {
    flex-direction: column;
  }

  .post-page__aside {
    position: static;
    order: 1;
    width: auto;
  }

  .toc {
    display: none;
  }

  /* One related card, heading stacked above the button */
  .related-posts__inner {
    padding: 30px 88px var(--space-120);
  }

  .related-posts__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .related-posts__grid {
    grid-template-columns: 1fr;
  }

  .related-posts__grid li + li {
    display: none;
  }
}

/* Blog detail page — phone */
@media (max-width: 809px) {
  .post-page__header {
    padding: var(--space-8);
  }

  .post-page__body {
    padding-inline: var(--space-20);
  }

  .post-page__cover {
    height: 240px;
  }

  .post-page__article {
    padding: 120px var(--gutter) 145px;
  }

  .related-posts__inner {
    padding: 38px 36px 128px;
  }
}


/* Contact page
   ========================================================================== */

.contact__layout {
  display: grid;
  grid-template-columns: 586fr 634fr;
  gap: var(--space-20);
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Map card with the contact details at the bottom */
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-16);
  overflow: hidden;
  border-radius: var(--radius-16);
}

.contact-card__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49.4% 100%;
}

.contact-card__details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-16);
  border-radius: var(--radius-12);
  background: var(--color-scrim-40);
  backdrop-filter: blur(10px);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.contact-item__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-12);
  background: var(--color-page);
  color: var(--color-accent);
}

.contact-item__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-item__label {
  color: var(--color-text-50);
}

.page-hero--contact {
  --hero-text-max: 500px;
}

.quote-card__group.contact__row {
  flex-direction: row;
}

.contact__row .field {
  flex: 1 0 0;
}

/* FAQ on this page: no bottom padding, 800px list, 56px under the heading */
.page-wrap--contact .faq {
  padding: 0 var(--gutter);
}

.page-wrap--contact .faq__inner {
  gap: var(--space-56);
}

.page-wrap--contact .faq__list {
  max-width: 800px;
}

/* Contact page — tablet: form first, map card below */
@media (max-width: 1199px) {
  .page-wrap--contact {
    --page-gap: 80px;
  }

  .contact__layout {
    grid-template-columns: 1fr;
  }

  .contact__form {
    order: -1;
  }

  .contact-card {
    padding-top: 386px;
  }

  .page-wrap--contact .faq__list {
    max-width: none;
  }
}

/* Contact page — phone */
@media (max-width: 809px) {
  .page-wrap--contact {
    --page-gap: 64px;
  }

  .contact.section {
    padding: 0;
  }

  .contact-card {
    padding-top: 250px;
  }

  .page-hero--contact {
    --hero-text-max: none;
  }

  .quote-card__group.contact__row {
    flex-direction: column;
  }

  .page-wrap--contact .faq {
    padding: 0 var(--space-16);
  }
}


/* 404 page
   ========================================================================== */

.page-wrap--404 {
  padding-bottom: var(--space-120);
}

.page-hero--404 .page-hero__frame {
  align-items: center;
  height: max(640px, calc(100vh - 24px));
}

.page-hero--404 .page-hero__frame::after {
  background: var(--gradient-page-hero-soft);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-16);
}

@media (max-width: 809px) {
  .page-wrap--404 {
    padding-bottom: var(--space-64);
  }

  .page-hero__actions {
    flex-direction: column;
    align-self: stretch;
  }

  .page-hero__actions .btn {
    justify-content: center;
  }
}


/* Materials page (new page, built in the site's style)
   ========================================================================== */

.materials {
  padding-inline: var(--gutter);
}

.materials__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: var(--content-max);
  margin-inline: auto;
}

.materials__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

.materials__text {
  max-width: 560px;
}

.materials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}

/* Material card: icon + category, name, specs, rate, quote and WhatsApp buttons */
.material-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  height: 100%;
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.material-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.material-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-12);
  background: var(--color-page);
  color: var(--color-accent);
}

.material-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.material-card__desc {
  color: var(--color-text-50);
}

.material-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-16);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-line-10);
}

.material-card__spec dt {
  color: var(--color-text-50);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
}

.material-card__spec dd {
  margin: 0;
}

.material-card__rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-10);
  background: var(--color-page);
  color: var(--color-text-50);
}

.material-card__rate strong {
  color: var(--color-accent);
  font-weight: 600;
}

.material-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.material-card__actions .btn {
  justify-content: center;
}

.material-card__whatsapp {
  gap: 0;
  padding-left: var(--space-16);
}

.material-card__whatsapp .btn__label {
  padding-left: var(--space-8);
}

.material-card__whatsapp .icon {
  color: var(--color-accent);
}

/* Why our materials: 4 benefits in a panel */
.perks__panel {
  padding-block: var(--space-64);
  background: var(--color-panel);
}

.perks__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  max-width: var(--content-max);
  margin-inline: auto;
}

.perks__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
}

.perk {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-page);
}

.perk__icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  fill: currentColor;
}

.perk__text {
  color: var(--color-text-50);
}

/* Materials page — tablet */
@media (max-width: 1199px) {
  .page-wrap--materials {
    --page-gap: 80px;
  }

  .materials__grid,
  .perks__list {
    grid-template-columns: 1fr 1fr;
  }

  .perks__panel {
    padding-block: var(--space-48);
  }
}

/* Materials page — phone */
@media (max-width: 809px) {
  .page-wrap--materials {
    --page-gap: 64px;
  }

  .materials__grid,
  .perks__list {
    grid-template-columns: 1fr;
  }

  .perks.section {
    padding: var(--space-8);
  }

  .perks__panel {
    padding-block: var(--space-40);
  }

  .partners {
    padding-inline: var(--space-16);
  }
}


/* Detail pages (shared by service, project and blog detail)
   ========================================================================== */

.detail__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  max-width: calc(var(--content-max) + 200px);
  margin-inline: auto;
  padding: 200px 100px var(--space-120);
}

.detail__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.detail__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.detail__intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.detail__lead {
  color: var(--color-text-50);
}

.detail__banner {
  width: 100%;
  height: 530px;
  object-fit: cover;
  border-radius: var(--radius-16);
}

/* Article column (92% of the space left by the 400px form) + sticky quote form */
.detail__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-48);
}

.detail__main {
  width: calc((100% - 448px) * 0.92);
}

.detail__aside {
  flex: none;
  width: 400px;
}

/* Rich text (article content from the editor) */
.rich-text {
  color: var(--color-text-50);
}

.rich-text > * + * {
  margin-top: var(--space-20);
}

.rich-text > * + :is(h2, h3, ul, ol, img, figure) {
  margin-top: var(--space-40);
}

.rich-text h2 {
  color: var(--color-white);
}

.rich-text li {
  position: relative;
  padding-left: var(--space-20);
}

.rich-text li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

.rich-text img {
  width: 100%;
  border-radius: var(--radius-16);
}

/* Quote form card */
.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-16);
  background: var(--color-panel);
}

.quote-card__form,
.quote-card__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.quote-card__group {
  gap: var(--space-16);
}

/* Related items: heading row + 3 cards */
.related {
  padding: var(--space-10) var(--space-10) var(--space-120);
}

.related__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-56);
  max-width: var(--content-max);
  margin-inline: auto;
}

.related__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.related__title {
  max-width: 50%;
}

.related__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 33%;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
}


/* Project detail: header with meta + service chips, overview, testimonial, results gallery */
.detail__content--project {
  padding: 200px 100px var(--space-120);
}

.project-head {
  gap: var(--space-48);
}

.project-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.project-head__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.project-head__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.project-head__meta {
  display: flex;
  gap: var(--space-20);
  color: var(--color-text-50);
}

.project-head__meta li,
.project-head__chips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-head__chips {
  gap: var(--space-8);
}

.chip {
  padding: var(--space-16);
  border-radius: 40px;
  background: var(--color-panel);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-tight);
  white-space: nowrap;
}

.detail__banner--project {
  height: 561px;
  border-radius: var(--radius-20);
}

.detail__body--project .detail__main {
  flex: 1 0 0;
  width: auto;
}

.detail__body--project .detail__aside {
  width: 380px;
}

.project-body,
.project-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.rich-text--large h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
}

/* In the results block the heading sits 32px above the text; the list follows one empty line later */
.project-results .rich-text > h2 + * {
  margin-top: var(--space-32);
}

.project-results .rich-text > p + ul {
  margin-top: calc(var(--lh-body) * 1em);
}

.project-results__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.project-results__gallery img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-14);
}

/* Testimonial card */
.testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-20);
  background: var(--color-page);
}

.testimonial__star {
  width: 22px;
  height: 21px;
  margin: 2.5px;
  color: var(--color-star);
  fill: currentColor;
}

.testimonial__quote {
  color: var(--color-text-70);
  font-size: var(--fs-statement);
  line-height: var(--lh-body);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  align-self: stretch;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-line-12);
}

.testimonial__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial__place {
  color: var(--color-text-50);
}

/* Detail pages — desktop: the quote form follows the reader */
@media (min-width: 1200px) {
  .detail__aside {
    position: sticky;
    top: 64px;
  }
}

/* Detail pages — tablet */
@media (max-width: 1199px) {
  /* The original adds 9px inside the 48px side padding on tablets */
  .detail__content {
    gap: var(--space-56);
    padding: 169px 57px 129px;
  }

  .detail__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-40);
  }

  .detail__main,
  .detail__aside {
    width: auto;
  }

  .related__row {
    flex-direction: column;
    align-items: stretch;
  }

  .related__aside {
    flex-direction: row;
    align-items: center;
    gap: var(--space-10);
    max-width: none;
  }

  .related__aside .section-head__text {
    flex: 1;
  }

  .detail__content--project {
    gap: var(--space-64);
    padding: 200px var(--gutter) var(--space-120);
  }

  .detail__body--project .detail__aside {
    width: auto;
  }
}

/* Detail pages — phone */
@media (max-width: 809px) {
  .detail__content {
    gap: var(--space-64);
    padding: 160px var(--gutter) var(--space-88);
  }

  .detail__banner:not(.detail__banner--project) {
    height: 240px;
  }

  .detail__content--project {
    padding: 200px var(--gutter) var(--space-120);
  }

  .project-head__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail__body {
    gap: var(--space-32);
  }

  .related {
    padding: 0;
  }

  .related .section__panel {
    padding-bottom: 72px;
  }

  /* Heading parts join the column so the button can move below the cards */
  .related__inner {
    gap: var(--space-16);
  }

  .related__head,
  .related__row,
  .related__aside {
    display: contents;
  }

  .related__title {
    max-width: none;
  }

  .related__grid {
    grid-template-columns: 1fr;
    margin-top: var(--space-40);
  }

  .related__cta {
    order: 1;
    align-self: flex-start;
    margin-top: var(--space-24);
  }
}


/* 7. Animations
   ========================================================================== */

/* Scroll reveals (only when JS is running, so content is never hidden without it) */
.js [data-reveal] {
  transition-property: opacity, transform;
}

.js [data-reveal="fade-up"] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-in-out);
}

.js [data-reveal="rise"] {
  opacity: 0;
  transform: translateY(var(--rise-distance));
  transition-duration: var(--dur-rise);
  transition-timing-function: var(--ease-out);
}

.js [data-reveal="lift"] {
  opacity: 0;
  transform: translateY(50px);
  transition-duration: var(--dur-rise);
  transition-timing-function: var(--ease-out);
}

.js [data-reveal="slide-in"] {
  opacity: 0;
  transform: translateX(-50px);
  transition-duration: var(--dur-rise);
  transition-timing-function: var(--ease-out);
}

.js [data-reveal="rise-3d"] {
  opacity: 0;
  transform: translateY(140px) scale(0.8) rotateX(14deg);
  transition-duration: var(--dur-3d);
  transition-timing-function: var(--ease-soft);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-zoom] {
  transform: scale(1.3);
  transition: transform var(--dur-zoom) var(--ease-out);
}

.js [data-zoom].is-visible {
  transform: none;
}

.js .site-header {
  animation: header-drop var(--dur-rise) var(--ease-out) both;
}

.js .site-header.is-stuck {
  animation: header-in var(--dur-base) var(--ease-out);
}

.has-loader .site-header {
  animation-play-state: paused;
}

@keyframes header-drop {
  from {
    opacity: 0;
    transform: translateY(-150px);
  }
}

@keyframes header-in {
  from {
    transform: translateY(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-zoom] {
    opacity: 1;
    transform: none;
  }
}


/* 8. Media queries
   ========================================================================== */

/* Laptop: 1200–1439px */
@media (max-width: 1439px) {
  :root {
    --fs-h1: 45px;
    --fs-h2: 40px;
    --fs-h3: 26px;
    --fs-h4: 16px;
    --fs-statement: 22px;
  }

  .why-us__title {
    max-width: 500px;
  }

  .why-us__text {
    max-width: 400px;
  }

  .projects__title {
    max-width: 433px;
  }

}

/* Desktop only: pinned process + stacking projects */
@media (min-width: 1200px) {
  .process__inner {
    height: calc(100vh + 2530px);
  }

  .process__sticky {
    position: sticky;
    top: 10px;
    justify-content: center;
    height: 100vh;
  }
}

/* Tablet: 810–1199px */
@media (max-width: 1199px) {
  :root {
    --gutter: 48px;
    --section-gap: 80px;
    --page-gap: 82px;
    --fs-counter: 32px;
    --fs-h3-card: 20px;
    --fs-heat: 24px;
    --fs-ticker: 20px;
  }

  .site-header {
    gap: 0;
  }

  .site-header__topbar,
  .site-header__bar {
    padding-inline: var(--space-16);
  }

  .site-header__bar-inner {
    height: 40px;
  }

  .nav,
  .site-header__cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .site-header.is-menu-open {
    background: var(--color-page);
  }

  .mobile-menu {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
  }

  .is-menu-open .mobile-menu {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
  }

  .mobile-menu__inner {
    min-height: 0;
    overflow: hidden;
  }

  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: var(--space-16) var(--space-16) 0;
  }

  .mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 35px;
    font-weight: 600;
  }

  .mobile-menu__toggle[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  .mobile-menu__toggle .icon {
    fill: none;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .mobile-menu__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }

  .mobile-menu__toggle[aria-expanded="true"] + .mobile-menu__panel {
    grid-template-rows: 1fr;
  }

  .mobile-menu__sublist {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-height: 0;
    overflow: hidden;
    padding-left: var(--space-16);
  }

  .mobile-menu__sublink {
    color: var(--color-text-50);
  }

  .mobile-menu__sublist li:first-child {
    padding-top: var(--space-12);
  }

  .mobile-menu .btn {
    margin: var(--space-16) var(--space-16) 0;
    width: calc(100% - 32px);
  }

  .hero__frame {
    padding: 0 var(--gutter) var(--gutter);
  }

  .hero__image {
    object-position: 78% 50%;
  }

  .hero__intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
  }

  .hero__title {
    flex: 1;
  }

  .hero-card,
  .hero__bottom .rating-badge {
    display: none;
  }

  .benefits {
    flex: 1;
    justify-content: space-between;
  }

  .slider__track {
    --per-view: 2;
  }

  .about__panel {
    padding-block: var(--space-40);
  }

  .about__inner {
    gap: var(--space-32);
  }

  .about__top {
    flex-direction: column;
    gap: 21px;
  }

  .about__eyebrow {
    width: auto;
  }

  .about__bottom {
    grid-template-columns: 329fr 353fr;
    height: 371px;
  }

  .about__image {
    width: 145%;
  }

  .section-head--split .section-head__copy {
    flex-direction: column;
    align-items: flex-start;
  }

  .why-us__title,
  .why-us__text {
    max-width: none;
  }

  .why-us__visual-title {
    max-width: 340px;
  }

  .why-us__layout {
    flex-direction: column;
    height: auto;
  }

  .why-us__visual {
    flex: none;
    max-width: none;
    height: 310px;
  }

  .why-us__stats {
    flex: none;
  }

  .why-us__row {
    flex: none;
    justify-content: center;
    height: 240px;
  }

  .why-us__row + .why-us__row {
    height: 256px;
    gap: var(--space-12);
  }

  .callback-banner {
    flex: none;
    width: 422px;
  }

  .coverage-card {
    padding: var(--space-8);
  }

  .coverage-card__text {
    padding: var(--space-8);
  }

  .coverage-card__image {
    height: 100%;
  }

  .process__sticky {
    align-items: flex-start;
  }

  .process__head,
  .process__head .section-head__copy {
    align-items: flex-start;
    text-align: left;
  }

  .process__text {
    max-width: none;
  }

  .process__media,
  .process__line {
    display: none;
  }

  .process__steps {
    gap: var(--space-48);
  }

  .step {
    padding: 0;
    background: none;
  }

  .step.is-active {
    background: none;
  }

  .step__header {
    min-height: 65px;
    padding: var(--space-20);
    border-radius: var(--radius-16);
    transition: background-color var(--dur-base) var(--ease-out);
  }

  .step.is-active .step__header {
    border-radius: var(--radius-16) var(--radius-16) 0 0;
    background: var(--color-panel);
  }

  /* 24px between title and text inside the open step: 20px header padding + 1px min-height + 3px */
  .step__text {
    max-width: none;
    padding: 3px var(--space-20) var(--space-20);
    border-radius: 0 0 var(--radius-16) var(--radius-16);
    background: var(--color-panel);
  }

  .step__image {
    display: block;
    width: 100%;
    height: 350px;
    margin-top: var(--space-16);
    border-radius: var(--radius-8);
    object-fit: cover;
  }

  .step:first-child .step__image {
    object-position: 66.8% 42.9%;
  }

  .projects__panel {
    padding-inline: var(--gutter);
  }

  .projects__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .projects__cta {
    display: none;
  }

  .projects__title {
    max-width: none;
  }

  .projects__item {
    position: static;
  }

  .project-card {
    height: 350px;
    scale: 1;
    opacity: 1;
  }

  .reviews__inner {
    padding-block: 60px;
  }

  .reviews__text {
    max-width: 82%;
  }

  .areas__panel {
    padding: var(--space-88) var(--gutter) var(--space-64);
  }

  .map {
    width: 731px;
    max-width: none;
    margin-inline: calc(50% - 365.5px);
  }

  .areas .section-head__copy {
    gap: var(--space-16);
  }

  .blog-preview__head .section-head {
    flex: 1;
  }

  .blog-preview__text {
    max-width: 440px;
  }

  .blog-preview__list {
    grid-template-columns: 1fr;
  }

  .faq {
    padding: var(--space-32) var(--gutter);
  }

  .faq__title {
    max-width: 464px;
  }

  .faq__list {
    max-width: none;
  }

  .cta__panel {
    padding: var(--space-48);
  }

  .cta__title,
  .cta__text {
    max-width: 540px;
  }

  .site-footer {
    padding-inline: var(--space-88);
  }

  .site-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .site-footer__bottom {
    flex-wrap: nowrap;
  }
}

/* Phone: up to 809px */
@media (max-width: 809px) {
  :root {
    --gutter: 20px;
    --page-gap: 64px;
    --fs-statement: 18px;
    --fs-h1: 36px;
    --fs-h2: 32px;
    --fs-h3: 20px;
    --fs-heat: 20px;
    --fs-stat: 32px;
    --fs-ticker: 16px;
    --fs-body: 13px;
  }

  .hero {
    padding: var(--space-8);
  }

  .hero__frame {
    height: calc(100vh - 16px);
    padding: var(--space-16);
  }

  .hero__image {
    object-position: 72% 50%;
  }

  .hero__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-32);
  }

  .hero__bottom {
    padding-top: 0;
    border-top: 0;
  }

  .benefits {
    justify-content: flex-start;
  }

  .services__inner {
    gap: var(--space-24);
  }

  .slider__track {
    --per-view: 1;
  }

  .services__title,
  .services__text {
    max-width: none;
  }

  .services__cta {
    align-self: stretch;
    justify-content: center;
  }

  .service-card__media {
    height: 100%;
  }

  .service-card__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .about__inner {
    gap: var(--space-24);
  }

  .about__top {
    gap: var(--space-16);
  }

  .about__bottom {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .about__media {
    order: -1;
    height: 276px;
  }

  .about__image {
    top: -50%;
    right: auto;
    left: -13%;
    width: 116%;
    height: 156%;
    object-position: 78.9% 40.2%;
  }

  .about-card {
    height: 293px;
  }

  .why-us {
    padding: 0;
  }

  .why-us__inner {
    gap: var(--space-32);
  }

  .why-us__visual {
    height: 250px;
    padding: var(--space-16);
  }

  .why-us__title {
    font-size: var(--fs-h1);
    letter-spacing: var(--ls-h1);
  }

  .why-us__text {
    max-width: 245px;
  }

  .why-us__visual-title {
    max-width: none;
  }

  .why-us__row,
  .why-us__row + .why-us__row {
    flex-direction: column;
    height: auto;
    gap: var(--space-12);
  }

  .stat-card,
  .stat-card--rating,
  .why-us__row .stat-card:last-child {
    flex: none;
    max-width: none;
    height: 250px;
  }

  .stat-card__value {
    margin-top: var(--space-8);
  }

  .callback-banner {
    width: auto;
    height: 296px;
  }

  .coverage-card {
    flex: none;
    flex-direction: column;
    height: 313px;
  }

  .coverage-card__text {
    flex: none;
    align-self: stretch;
    justify-content: flex-start;
    gap: var(--space-24);
    padding: var(--space-4);
  }

  .coverage-card__image {
    flex: 1 0 0;
    width: 100%;
    min-height: 0;
  }

  .process {
    padding: 0;
  }

  .process__sticky {
    gap: var(--space-40);
  }

  .process__steps {
    gap: var(--space-16);
  }

  .step__image {
    height: 235px;
  }

  .step:first-child .step__image {
    object-position: 47.8% 2%;
  }

  .projects {
    padding: var(--space-8);
  }

  .projects__panel {
    padding: var(--space-48) var(--space-16);
    border-radius: var(--radius-8);
  }

  .projects__inner {
    gap: var(--space-32);
  }

  .projects__cta-mobile {
    display: inline-flex;
  }

  .projects__list {
    gap: var(--space-16);
  }

  .project-card {
    flex-direction: column;
    gap: var(--space-8);
    height: 644px;
    padding: var(--space-8);
  }

  .project-card .compare {
    flex: 1;
  }

  .project-card__info {
    flex: none;
    height: 290px;
    padding: var(--space-16);
  }

  .reviews__inner {
    padding-block: 0;
  }

  .reviews__head {
    align-items: flex-start;
    gap: var(--space-16);
    padding-top: 26px;
    text-align: left;
  }

  .reviews__head .section-head__copy {
    align-items: flex-start;
    gap: var(--space-16);
  }

  .reviews__rows {
    mask-image: none;
  }

  .reviews__row {
    cursor: auto;
  }

  .reviews__row--secondary,
  .reviews__track [data-marquee-clone] {
    display: none;
  }

  .reviews__track {
    flex-direction: column;
    width: auto;
  }

  .review-card {
    width: 100%;
  }

  .areas {
    padding: var(--space-8);
  }

  .areas__panel {
    padding: var(--space-40) var(--space-20) var(--space-56);
  }

  .areas__inner {
    gap: var(--space-24);
  }

  .areas__cta {
    margin-top: 0;
  }

  .map {
    width: 301px;
    margin-block: 27.5px;
  }

  .areas .section-head__copy {
    gap: var(--space-24);
  }

  .map-pin__label {
    padding: var(--space-8) 13px;
    font-size: 12.6px;
  }

  .blog-preview__head {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-preview__cta {
    justify-content: center;
  }

  .blog-preview__list {
    gap: var(--space-20);
  }

  .faq {
    padding: var(--space-20);
  }

  .cta__panel {
    padding: 68px var(--space-4) var(--space-20);
  }

  .quote-form {
    padding: var(--space-24);
  }

  .site-footer {
    padding: var(--space-20);
  }

  .site-footer__inner {
    gap: var(--space-40);
  }

  .site-footer__columns {
    display: grid;
    grid-template-columns: 180px 180px;
    gap: var(--space-32) var(--space-8);
  }

  .site-footer__top {
    gap: var(--space-32);
  }

  .newsletter__row {
    flex-direction: column;
  }

  .newsletter__button {
    width: 100%;
  }

  .site-footer__bottom {
    flex-direction: column;
  }

  .whatsapp-float {
    right: var(--space-16);
    bottom: var(--space-16);
  }
}