@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: oklch(0.988 0.004 90);
  --surface: oklch(0.964 0.006 90);
  --ink: oklch(0.31 0.046 243);
  --muted: oklch(0.49 0.024 243);
  --blue: oklch(0.5 0.147 252);
  --blue-hover: oklch(0.43 0.132 252);
  --blue-light: oklch(0.943 0.022 245);
  --teal: oklch(0.47 0.081 200);
  --orange: oklch(0.58 0.139 56);
  --line: oklch(0.88 0.014 240);
  --input-line: oklch(0.62 0.021 243);
  --light-text: oklch(0.85 0.015 240);
  --radius: 12px;
  --text-display: clamp(60px, 7.6vw, 110px);
  --text-heading: clamp(36px, 3.8vw, 54px);
  --page-width: 1264px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --header-height: 88px;
  --header-offset: var(--header-height);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Archivo", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
html.menu-ready { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-offset) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3 { margin: 0; }
h1, h2, h3 { font-weight: 500; line-height: 1.1; text-wrap: balance; }
h1, h2 { letter-spacing: -0.04em; }
h2 { font-size: var(--text-heading); font-weight: 450; }
h3 { font-size: clamp(20px, 1.8vw, 25px); letter-spacing: -0.025em; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 5px; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: oklch(0.5 0.147 252 / 0.1); touch-action: manipulation; }
button { cursor: pointer; }
::selection { color: var(--ink); background: var(--blue-light); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
section { scroll-margin-top: 12px; }
main:focus { outline: none; }
.wrap { width: min(var(--page-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: clamp(72px, 8vw, 112px); }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link {
  position: fixed;
  inset: 12px auto auto 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* A small, consistent set of actions. */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-height: 54px;
  padding: 14px 23px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.button-primary { background: var(--blue); color: var(--paper); }
.button-outline { background: transparent; color: var(--ink); border-color: var(--input-line); }
.button-full { width: 100%; justify-content: space-between; }
.button .icon, .text-link .icon { transition: transform 300ms var(--ease); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.text-link-light { color: var(--paper); }
.button:active { transform: scale(0.985); }
.button:disabled { cursor: wait; opacity: 0.7; transform: none; }
@media (hover: hover) {
  .button-primary:hover:not(:disabled) { background: var(--blue-hover); }
  .button-outline:hover { background: var(--blue-light); border-color: var(--blue); }
  .button:hover:not(:disabled):not(:active) { transform: translateY(-2px); }
  .button:hover:not(:disabled) > .icon:last-child, .text-link:hover .icon:last-child { transform: translateX(4px); }
  .text-link:hover { text-decoration: underline; }
}

/* Permanent WhatsApp shortcut, always bottom right. The official green
   bubble is the button itself: no custom disc behind it. */
.whatsapp-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transition: transform 220ms var(--ease);
}
.whatsapp-fab img {
  width: 52px;
  height: 52px;
  display: block;
  filter: drop-shadow(0 8px 18px oklch(0.31 0.046 243 / 0.26)) drop-shadow(0 2px 6px oklch(0.31 0.046 243 / 0.18));
}
@media (hover: hover) {
  .whatsapp-fab:hover { transform: translateY(-2px); }
}

/* Navigation stays small enough to leave the work in focus. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
html:not(.menu-ready) .site-header { position: relative; }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: clamp(20px, 2.5vw, 36px); }
/* Desktop: true page-centered navigation regardless of brand/actions width. */
@media (min-width: 941px) {
  .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .brand { justify-self: start; }
  .main-nav { margin-inline: 0; justify-self: center; }
  .header-actions { margin-left: 0; justify-self: end; }
}
/* Narrow desktop: compact actions so the centered nav never collides. */
@media (min-width: 941px) and (max-width: 1160px) {
  .header-phone span { display: none; }
  .header-actions { gap: 14px; }
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.brand img { flex: 0 0 auto; mix-blend-mode: multiply; }
.brand > span { font-size: 21px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.brand-accent { color: var(--blue); }
.main-nav { display: flex; align-items: center; gap: 26px; margin-inline: auto; }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease); }
.main-nav a::after { content: ""; position: absolute; inset: auto 0 5px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease); }
.main-nav a[aria-current="location"]::after { transform: scaleX(1); }
.main-nav a:hover, .main-nav a[aria-current="location"] { color: var(--blue); }
.main-nav .nav-contact { display: none; }
.header-actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.header-phone { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; min-width: 44px; text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 600; }
.header-phone .icon { width: 19px; height: 19px; }
.header-budget { min-height: 46px; padding: 12px 16px; font-size: 14px; gap: 14px; }
.nav-toggle { display: none; position: relative; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; }
.nav-toggle span { position: absolute; top: 50%; left: 11px; width: 20px; height: 1.5px; background: var(--ink); transition: transform 200ms var(--ease); }
.nav-toggle span:first-child { transform: translateY(-4px); }
.nav-toggle span:last-child { transform: translateY(3px); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* Immersive full-bleed hero: Exo Ape's overlay scale, Apron's scrim discipline, MANNA's anchoring wordmark. */
.hero { position: relative; }
.hero-scene { position: relative; overflow: clip; }
.hero-stage { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: end; gap: 40px clamp(40px, 7vw, 100px); min-height: min(max(600px, calc(100svh - var(--header-offset))), 1080px); padding-top: clamp(56px, 8vh, 110px); padding-bottom: clamp(150px, 21vh, 225px); }
.hero-copy { min-width: 0; }
.hero-location { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: oklch(0.96 0.008 95 / 0.88); font-size: 14px; letter-spacing: 0.01em; }
.hero-location .icon { width: 17px; height: 17px; color: oklch(0.79 0.1 252); }
.hero h1 { color: var(--paper); font-size: var(--text-display); line-height: 0.99; font-weight: 400; letter-spacing: -0.045em; }
.hero-intro { min-width: 0; padding-bottom: 4px; }
.hero-description { max-width: 42ch; color: oklch(0.96 0.008 95 / 0.88); font-size: 18px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; }
.hero-actions .text-link { color: var(--paper); }
.hero-note { margin-top: 13px; color: oklch(0.95 0.008 95 / 0.72); font-size: 13px; letter-spacing: 0.01em; }
.hero :is(a, summary):focus-visible { outline-color: var(--paper); }
.hero-media { position: absolute; inset: 0; min-width: 0; overflow: hidden; background: oklch(0.34 0.03 250); }
.hero-media picture { display: block; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(78deg, oklch(0.23 0.02 250 / 0.6) 0%, oklch(0.23 0.02 250 / 0.28) 34%, transparent 60%), linear-gradient(292deg, oklch(0.23 0.02 250 / 0.52) 0%, oklch(0.23 0.02 250 / 0.22) 30%, transparent 52%), linear-gradient(to top, oklch(0.2 0.02 250 / 0.62) 0%, oklch(0.2 0.02 250 / 0.3) 36%, transparent 64%); }
.hero-media figcaption { position: absolute; z-index: 3; top: 28px; right: max(var(--gutter), calc((100% - var(--page-width)) / 2)); display: flex; align-items: center; gap: 12px; padding: 15px 19px; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.35; }
/* Liquid glass accreditation (Aave/Apple direction): the live photo shows
   through blurred and saturated, with a specular sheen and a bright rim that
   keep the text crisp while the photo drifts underneath. Plain
   backdrop-filter, so it works in every modern browser; without support the
   solid paper background above remains. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hero-media figcaption {
    background:
      linear-gradient(118deg, oklch(1 0 0 / 0.42) 0%, oklch(1 0 0 / 0.1) 24%, transparent 44%),
      linear-gradient(165deg, oklch(1 0 0 / 0.66) 0%, oklch(1 0 0 / 0.44) 58%, oklch(1 0 0 / 0.5) 100%);
    -webkit-backdrop-filter: blur(30px) saturate(1.5) brightness(1.1);
    backdrop-filter: blur(30px) saturate(1.5) brightness(1.1);
    border: 1px solid oklch(1 0 0 / 0.44);
    box-shadow:
      inset 0 1px 0 oklch(1 0 0 / 0.6),
      inset 0 -1px 0 oklch(0.31 0.046 243 / 0.14),
      inset 1px 0 0 oklch(1 0 0 / 0.16),
      0 12px 30px oklch(0.23 0.02 250 / 0.16);
  }
  .hero-media figcaption .credential-detail {
    color: oklch(0.32 0.03 243);
    font-weight: 500;
    text-shadow: 0 0 4px oklch(1 0 0 / 0.45), 0 1px 2px oklch(1 0 0 / 0.35);
  }
}
.hero-media figcaption strong { font-weight: 600; }
.hero-wordmark { position: absolute; z-index: 1; bottom: 0; left: 50%; width: max-content; transform: translate(-50%, 24%); font-size: clamp(96px, 17vw, 238px); font-weight: 800; line-height: 0.78; letter-spacing: -0.045em; text-transform: uppercase; color: oklch(0.99 0.003 95 / 0.3); white-space: nowrap; pointer-events: none; user-select: none; }

/* Wide 2K/4K displays: the scene fills the whole viewport and the wordmark keeps growing. */
@media screen and (min-width: 1600px) and (min-height: 1100px) {
  .hero-stage { min-height: calc(100svh - var(--header-offset)); }
}
@media screen and (min-width: 2200px) {
  .hero-wordmark { font-size: clamp(96px, 17vw, 340px); }
}
@media screen and (min-width: 3200px) {
  .hero-wordmark { font-size: clamp(96px, 17vw, 440px); }
}
.credential-detail { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; letter-spacing: 0.01em; }
.credential-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-light); color: var(--blue); }
.hero-assurances { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 25px 0; margin: 0; border-block: 1px solid var(--line); }
.hero-assurances li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; }
.hero-assurances .icon { width: 18px; height: 18px; color: var(--blue); }

/* Service details stay readable and work without JavaScript. */
.services-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 8vw, 120px); align-items: start; }
.section-label { color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0.015em; margin-bottom: 20px; }
.section-heading > p:not(.section-label) { max-width: 34ch; margin-top: 21px; color: var(--muted); }
.section-heading > .text-link { margin-top: 22px; }
.service-list { position: relative; overflow-anchor: none; }
.service { --service-color: var(--blue); position: relative; border-bottom: 1px solid var(--line); scroll-margin-top: 18px; }
.service:first-child { border-top: 1px solid var(--line); }
.service-water { --service-color: var(--teal); }
.service-electric { --service-color: var(--orange); }
.service-lock { --service-color: var(--ink); }
.service summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 30px; align-items: center; gap: 22px; min-height: 99px; padding-block: 25px; cursor: pointer; list-style: none; }
.service summary::-webkit-details-marker { display: none; }
.service summary::marker { content: ""; }
.service summary h3 { font-weight: 500; transition: color 220ms var(--ease); }
.service-icon { width: 28px; height: 28px; color: var(--service-color); }
.service-toggle { position: relative; display: block; width: 30px; height: 30px; color: var(--muted); }
.service-toggle::before, .service-toggle::after { content: ""; position: absolute; width: 14px; height: 1.5px; top: 50%; left: 8px; background: currentColor; transition: transform 220ms var(--ease); }
.service-toggle::after { transform: rotate(90deg); }
.service[open] .service-toggle::after { transform: rotate(0); }
.service[open] summary h3 { color: var(--blue); }
.service summary:hover h3 { color: var(--blue); }
.service summary:focus-visible { outline-offset: 4px; border-radius: 3px; }
.service-content { padding: 0 34px 27px 50px; }
.service-content p { max-width: 49ch; color: var(--muted); font-size: 16px; }
.service-content .text-link { margin-top: 13px; color: var(--blue); }
.service-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 25px; margin-top: 13px; }
.service-actions .text-link { margin-top: 0; }
.service-content .service-consult { color: var(--muted); font-size: 14px; font-weight: 500; }
.service-ghost { position: absolute; pointer-events: none; }

/* The existing service icons and rules become a compact reading sequence. */
@media (prefers-reduced-motion: no-preference) {
  .services-section.has-scroll-services .service[open] { min-height: clamp(244px, 29svh, 290px); }
  .services-section.has-scroll-services .service summary { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 22px; padding-block: 29px; }
  .services-section.has-scroll-services .service-icon { width: 34px; height: 34px; stroke-dasharray: 100; stroke-dashoffset: var(--service-draw, 0); transform: translateY(var(--service-icon-y, 0px)); }
  .services-section.has-scroll-services .service summary h3 { font-size: clamp(23px, 2.05vw, 28px); color: var(--ink); }
  .services-section.has-scroll-services .service.is-current summary h3,
  .services-section.has-scroll-services .service summary:hover h3 { color: var(--blue); }
  .services-section.has-scroll-services .service-content { padding: 0 30px 35px 56px; }
  .services-section.has-scroll-services .service-copy { transform: translateY(var(--service-offset, 0px)); }
  .services-section.has-scroll-services .service::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--service-color); transform: scaleX(var(--service-progress, 0)); transform-origin: left; pointer-events: none; }
  .services-section.has-scroll-services .service:focus-within .service-icon { stroke-dashoffset: 0; transform: none; }
  .services-section.has-scroll-services .service:focus-within .service-copy { transform: none; }
}
@media (min-width: 961px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .services-section.is-services-sticky .services-grid { align-items: stretch; }
  .services-section.is-services-sticky .services-intro { position: sticky; top: max(calc(var(--header-offset) + 32px), calc((100svh - var(--services-intro-height, 280px)) / 2)); align-self: start; }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .services-section.has-scroll-services .services-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .services-section.has-scroll-services .service[open] { min-height: clamp(232px, 28svh, 260px); }
  .services-section.has-scroll-services .service summary { grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 18px; padding-block: 24px; }
  .services-section.has-scroll-services .service summary h3 { font-size: 23px; }
  .services-section.has-scroll-services .service-icon { width: 30px; height: 30px; }
  .services-section.has-scroll-services .service-content { padding-inline: 48px 0; padding-bottom: 31px; }
}
@media (max-width: 360px) and (prefers-reduced-motion: no-preference) {
  .services-section.has-scroll-services .service summary { grid-template-columns: 26px minmax(0, 1fr) 22px; gap: 14px; }
  .services-section.has-scroll-services .service summary h3 { font-size: 21px; }
  .services-section.has-scroll-services .service-icon { width: 26px; height: 26px; }
  .services-section.has-scroll-services .service-content { padding-left: 40px; }
}

/* One short process replaces the repeated principles and mock paperwork. */
.work-section { background: var(--surface); }
.work-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(40px, 7.5vw, 110px); }
.work-steps { padding: 0; margin: 0; list-style: none; }
.work-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 22px; padding-block: 27px; border-bottom: 1px solid var(--line); }
.work-steps li:first-child { padding-top: 0; }
.work-steps li:last-child { padding-bottom: 0; border-bottom: none; }
.step-number { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-top: -5px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.work-steps h3 { font-size: 21px; font-weight: 500; }
.work-steps p { color: var(--muted); font-size: 16px; max-width: 45ch; margin-top: 10px; }
.work-progress { display: none; }
.work-track { position: absolute; inset: 19px 19px auto; height: 2px; background: var(--line); }
.work-track > span { display: block; height: 100%; background: var(--blue); transform: scaleX(var(--work-progress, 0)); transform-origin: left; }
.work-marker { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.work-marker.is-reached { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.work-steps h3 { transition: color 380ms var(--ease); }
.step-number { transition: transform 380ms var(--ease); }
.work-section.is-tracking .is-current h3 { color: var(--blue); }
.work-section.is-tracking .is-current .step-number { color: var(--paper); background: var(--blue); border-color: var(--blue); transform: scale(1.04); }

/* The three real steps drive the scene; scrolling remains entirely native. */
@media (min-width: 961px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .work-section.is-scroll-driven .work-grid { align-items: stretch; }
  .work-section.is-scroll-driven .work-intro { position: sticky; top: max(calc(var(--header-offset) + 32px), calc((100svh - var(--work-intro-height, 364px)) / 2)); align-self: start; }
  .work-section.is-scroll-driven .work-progress { position: relative; display: flex; justify-content: space-between; max-width: 320px; margin-top: 38px; }
  .work-section.is-scroll-driven .work-steps li { grid-template-columns: 54px minmax(0, 1fr); align-content: center; gap: 24px; min-height: clamp(270px, 43svh, 420px); padding-block: 60px; }
  .work-section.is-scroll-driven .step-number { width: 48px; height: 48px; margin-top: 2px; font-size: 14px; }
  .work-section.is-scroll-driven .step-copy { transform: translate3d(0, var(--step-offset, 0px), 0); }
  .work-section.is-scroll-driven .work-steps h3 { max-width: 18ch; font-size: clamp(29px, 2.7vw, 38px); line-height: 1.15; }
  .work-section.is-scroll-driven .work-steps p { max-width: 35ch; margin-top: 18px; font-size: 17px; }
}

@media (max-width: 960px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .work-section.is-scroll-driven-mobile .work-grid { display: block; }
  .work-section.is-scroll-driven-mobile .work-intro { display: contents; }
  .work-section.is-scroll-driven-mobile .desktop-break { display: none; }
  .work-section.is-scroll-driven-mobile .work-progress {
    position: sticky;
    top: calc(var(--header-offset) - 1px);
    z-index: 2;
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding: 18px 0;
    background: var(--surface);
  }
  .work-section.is-scroll-driven-mobile .work-track { top: 37px; }
  .work-section.is-scroll-driven-mobile .work-steps li { min-height: clamp(225px, 34svh, 300px); padding-block: 42px; align-content: center; }
  .work-section.is-scroll-driven-mobile .step-copy { transform: translate3d(0, var(--step-offset, 0px), 0); }
  .work-section.is-scroll-driven-mobile .work-steps h3 { max-width: 21ch; font-size: clamp(23px, 5.8vw, 30px); line-height: 1.18; }
}

/* A local, photographic break in the page. */
.coverage-section { padding-top: clamp(64px, 7.5vw, 104px); }
.coverage-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; overflow: clip; border-radius: var(--radius); background: var(--ink); }
.coverage-image { display: block; min-height: 392px; overflow: hidden; }
.coverage-image img { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
.coverage-copy { padding: clamp(30px, 4vw, 54px); color: var(--paper); align-self: center; }
.coverage-pin { width: 26px; height: 26px; color: var(--light-text); margin-bottom: 19px; }
.coverage-copy h2 { font-size: clamp(36px, 3.6vw, 52px); }
.coverage-copy p { max-width: 31ch; margin-top: 20px; font-size: 16px; color: var(--light-text); }
.coverage-copy .text-link { margin-top: 24px; }
.coverage-copy a:focus-visible { outline-color: var(--paper); }

/* Two straightforward ways to start a conversation. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 8vw, 116px); align-items: start; }
.contact-copy { padding-top: 24px; }
.contact-copy h2 { font-size: clamp(38px, 4.5vw, 62px); }
.contact-copy > p:not(.section-label):not(.response-note) { margin-top: 24px; color: var(--muted); }
.contact-phone { display: flex; align-items: center; gap: 24px; width: fit-content; min-height: 44px; margin-block: 32px 24px; color: var(--blue); font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.2; text-decoration: none; }
.contact-phone > .icon { width: 28px; height: 28px; transform: rotate(-45deg); }
.contact-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.response-note { max-width: 35ch; margin-top: 29px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.contact-email { display: flex; width: fit-content; margin-top: 15px; font-size: 14px; color: var(--blue); }
.form-panel { min-width: 0; padding: clamp(24px, 3vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.form-panel h3 { font-size: 28px; font-weight: 500; }
.form-hint { margin-top: 10px; margin-bottom: 25px; color: var(--muted); font-size: 13px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.field { min-width: 0; margin-bottom: 19px; }
.field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--input-line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.5; transition: border-color 180ms var(--ease); }
.field textarea { display: block; resize: vertical; }
.field select { cursor: pointer; padding-right: 30px; }
.field ::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.form-privacy { margin-top: 15px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-error { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--input-line); font-size: 14px; color: var(--ink); }
.form-error .text-link { margin-top: 8px; color: var(--blue); }
.form-success { padding-block: 38px; }
.success-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 50%; background: var(--blue-light); color: var(--blue); }
.success-icon .icon { width: 32px; height: 32px; }
.form-success p { margin-top: 18px; max-width: 36ch; color: var(--muted); }
.form-success .text-link { margin-top: 25px; color: var(--blue); }

.site-footer { background: var(--surface); }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-block: 42px; }
.footer-main > p { color: var(--muted); font-size: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.back-top .icon { transform: rotate(-90deg); }
.back-top:hover .icon { transform: translateY(-3px) rotate(-90deg); }

/* Supporting pages share the same identity. */
.message-page { min-height: 100svh; padding-block: 40px; display: flex; flex-direction: column; }
.message-content { margin-block: auto; padding-block: 64px; max-width: 720px; }
.message-content h1 { font-size: clamp(42px, 6vw, 72px); }
.message-content > p:not(.section-label) { max-width: 45ch; color: var(--muted); margin-block: 24px 30px; font-size: 18px; }
.message-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Service pages keep the same photography, icons and open typography. */
.service-page { --detail-accent: var(--blue); }
.page-fontaneria { --detail-accent: var(--teal); }
.page-electricidad { --detail-accent: var(--orange); }
.page-cerrajeria { --detail-accent: var(--ink); }
.detail-hero { padding-block: 28px 80px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.detail-kind { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.detail-kind .icon { width: 34px; height: 34px; color: var(--detail-accent); }
.detail-hero h1 { max-width: 12ch; font-size: clamp(46px, 5.4vw, 76px); font-weight: 400; }
.detail-tagline { margin-top: 22px; font-size: clamp(22px, 2.25vw, 29px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.25; }
.detail-description { max-width: 43ch; margin-top: 18px; color: var(--muted); font-size: 18px; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 25px; margin-top: 30px; }
.detail-note { display: flex; align-items: flex-start; gap: 8px; max-width: 44ch; margin-top: 23px; color: var(--muted); font-size: 13px; }
.detail-note .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--detail-accent); }
.detail-photo { position: relative; height: clamp(400px, 40vw, 540px); overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.detail-photo picture { display: block; height: 100%; }
.detail-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.detail-photo figcaption { position: absolute; inset: auto auto 20px 20px; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 40px); padding: 12px 16px; background: var(--paper); border-radius: var(--radius); font-size: 13px; letter-spacing: 0.01em; }
.detail-photo figcaption .icon { color: var(--detail-accent); width: 19px; height: 19px; }
.page-aire .detail-photo img { object-position: 58% center; }
.page-cerrajeria .detail-photo img { object-position: center 52%; }
.detail-scope { background: var(--surface); }
.scope-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(42px, 8vw, 120px); align-items: start; }
.scope-list { margin: 0; }
.scope-list > div { padding-block: 25px; border-bottom: 1px solid var(--line); }
.scope-list > div:first-child { padding-top: 0; }
.scope-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.scope-list dt { font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.scope-list dd { margin: 12px 0 0; max-width: 53ch; color: var(--muted); font-size: 16px; }
.scope-progress { display: none; }
.detail-contact { padding-top: clamp(64px, 7vw, 96px); }
.detail-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius); background: var(--ink); color: var(--paper); }
.detail-contact h2 { max-width: 22ch; font-size: clamp(30px, 3vw, 42px); }
.detail-contact p { max-width: 48ch; margin-top: 17px; color: var(--light-text); font-size: 16px; }
.detail-contact-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.detail-contact .button-primary { color: var(--ink); background: var(--paper); }
.detail-contact .button-primary:hover:not(:disabled) { background: var(--blue-light); }
.detail-contact a:focus-visible { outline-color: var(--paper); }
.related-services { padding-block: clamp(64px, 7vw, 96px); }
.related-services h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 25px; }
.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.related-link { display: flex; align-items: center; gap: 15px; min-height: 86px; padding-block: 20px; border-top: 1px solid var(--line); text-decoration: none; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.related-link > .icon:first-child { width: 28px; height: 28px; color: var(--service-color, var(--blue)); }
.related-link > .icon:last-child { margin-left: auto; transition: transform 250ms var(--ease); }
.related-link:hover { color: var(--blue); }
.related-link:hover > .icon:last-child { transform: translateX(4px); }
.footer-email { font-size: 14px; font-weight: 500; }

/* A reading rhythm for the four scopes, with no hidden descriptions. */
@media (prefers-reduced-motion: no-preference) {
  .detail-scope.is-tracking .scope-list > div { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(180px, 22svh, 220px); padding-block: 30px; }
  .detail-scope.is-tracking .scope-list dt,
  .detail-scope.is-tracking .scope-list dd { transform: translate3d(0, var(--scope-offset, 0px), 0); }
  .detail-scope.is-tracking .scope-list dt { transition: color 280ms var(--ease); }
  .detail-scope.is-tracking .scope-list .is-current dt { color: var(--blue); }
  .detail-scope.is-tracking .scope-list > div::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--detail-accent); transform: scaleX(var(--scope-progress, 0)); transform-origin: left; }
  .detail-scope.is-tracking .scope-progress { display: flex; gap: 8px; max-width: 192px; margin-top: 28px; }
  .scope-progress > span { flex: 1; height: 3px; background: var(--line); }
  .scope-progress > span::after { content: ""; display: block; height: 100%; background: var(--detail-accent); transform: scaleX(var(--scope-progress, 0)); transform-origin: left; }
  .work-section.is-tracking .work-steps li { position: relative; }
  .work-section.is-tracking .work-steps li:not(:last-child)::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--blue); transform: scaleX(var(--step-progress, 0)); transform-origin: left; }
}
@media (min-width: 961px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .detail-scope.is-scope-sticky .scope-grid { align-items: stretch; }
  .detail-scope.is-scope-sticky .scope-intro { position: sticky; top: max(calc(var(--header-offset) + 32px), calc((100svh - var(--scope-intro-height, 280px)) / 2)); align-self: start; }
}

/* Entrances are one-shot enhancements, never a prerequisite to reading or clicking. */
@media (prefers-reduced-motion: no-preference) {
  .page-entering .hero-location,
  .page-entering .detail-kind { animation: enter 520ms var(--ease) both; }
  .page-entering .hero h1,
  .page-entering .detail-hero h1 { animation: enter 680ms var(--ease) 65ms both; }
  .page-entering .hero-description,
  .page-entering .detail-tagline { animation: enter 600ms var(--ease) 130ms both; }
  .page-entering .detail-description { animation: enter 580ms var(--ease) 180ms both; }
  .page-entering .hero-actions,
  .page-entering .detail-actions { animation: enter 560ms var(--ease) 210ms both; }
  .page-entering .hero-note,
  .page-entering .detail-note { animation: enter 500ms var(--ease) 260ms both; }
  .page-entering .hero-media,
  .page-entering .detail-photo { animation: photo-enter 800ms var(--ease) 80ms both; }
  .page-entering .hero-media figcaption,
  .page-entering .detail-photo figcaption { animation: enter 500ms var(--ease) 340ms both; }
  .page-entering .hero-wordmark { animation: wordmark-enter 900ms var(--ease) 220ms both; }
  .page-entering :is(.hero-copy, .hero-intro, .detail-hero-copy):focus-within > * { animation: none; }
  .scroll-motion [data-scroll-image] { transform: translate3d(0, var(--image-y, 0%), 0) scale(var(--image-scale, 1.08)); }
  @supports (animation-timeline: view()) and (animation-range: cover 0% cover 100%) {
    .scroll-motion.native-scroll [data-scroll-frame] { view-timeline: --photo block; }
    .scroll-motion.native-scroll [data-scroll-image] {
      animation: photo-drift linear both;
      animation-timeline: --photo;
      animation-range: cover 0% cover 100%;
    }
    /* The hero photo gets a livelier drift and its own timeline, which also reveals the wordmark. */
    .scroll-motion.native-scroll .hero-media[data-scroll-frame] { view-timeline: --hero-photo block; }
    .scroll-motion.native-scroll .hero-scene { timeline-scope: --hero-photo; }
    .scroll-motion.native-scroll .hero-media [data-scroll-image] {
      animation-name: hero-photo-drift;
      animation-timeline: --hero-photo;
    }
    .scroll-motion.native-scroll .hero-wordmark {
      animation: wordmark-reveal linear both;
      animation-timeline: --hero-photo;
      animation-range: cover 0% cover 100%;
    }
    .scroll-motion.native-scroll .page-entering .hero-wordmark {
      animation: wordmark-enter 900ms var(--ease) 220ms both, wordmark-reveal linear both;
      animation-timeline: auto, --hero-photo;
      animation-range: normal, cover 0% cover 100%;
    }
    @media (max-width: 760px) {
      .scroll-motion.native-scroll .hero-wordmark { animation-name: wordmark-reveal-mobile; }
      .scroll-motion.native-scroll .page-entering .hero-wordmark { animation-name: wordmark-enter, wordmark-reveal-mobile; }
    }
  }

  /* Cross-document transitions keep real links, browser history and the header. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition { pointer-events: none; }
  ::view-transition-old(root) { animation: page-out 140ms ease-out both; }
  ::view-transition-new(root) { animation: page-in 280ms var(--ease) both; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
  ::view-transition-old(site-header) { display: none; }
  ::view-transition-new(site-header) { animation: none; }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes photo-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.975); }
  to { opacity: 1; transform: none; }
}
@keyframes photo-drift {
  from { transform: translate3d(0, -2.5%, 0) scale(1.1); }
  to { transform: translate3d(0, 2.5%, 0) scale(1.065); }
}
@keyframes hero-photo-drift {
  from { transform: translate3d(0, -3.4%, 0) scale(1.13); }
  to { transform: translate3d(0, 3.4%, 0) scale(1.075); }
}
@keyframes wordmark-reveal {
  0%, 50% { transform: translate(-50%, 24%); }
  100% { transform: translate(-50%, 2%); }
}
@keyframes wordmark-reveal-mobile {
  0%, 50% { transform: translate(-50%, 26%); }
  100% { transform: translate(-50%, 2%); }
}
@keyframes wordmark-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 941px) and (max-width: 1160px) {
  .hero-stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; }
  .hero-description { font-size: 17px; }
  .hero-actions { gap: 10px 18px; }
}

@media (max-width: 940px) {
  :root { --header-height: 76px; }
  .header-inner { flex-wrap: wrap; gap: 18px; padding-block: 12px; }
  .header-budget { display: none; }
  .main-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin: 0; }
  .main-nav .nav-contact { display: inline-flex; }
  .menu-ready .nav-toggle { display: block; }
  .menu-ready .main-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 22px;
    max-height: calc(100dvh - var(--header-offset));
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s 180ms;
  }
  .menu-ready .main-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
  .menu-ready .main-nav a { min-height: 52px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
  .menu-ready .main-nav a:last-child { border: 0; color: var(--blue); }
  .hero-stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; padding-top: 44px; }
  .hero h1 { font-size: clamp(52px, 7vw, 72px); }
  .hero-description { font-size: 17px; }
  .hero-actions { gap: 8px 18px; }
  .hero-assurances { column-gap: 18px; }
  .hero-assurances li { font-size: 13px; }
  .services-grid, .work-grid, .contact-grid { gap: 42px; }
  .service summary { gap: 17px; }
  .service-content { padding-left: 45px; }
  .detail-hero-grid { gap: 38px; }
  .detail-hero h1 { font-size: clamp(43px, 5.5vw, 60px); }
  .detail-description { font-size: 17px; }
  .scope-grid { gap: 42px; }
  .detail-contact-inner { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .detail-contact-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
}

@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .hero-stage { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 22px; min-height: min(max(540px, calc(100svh - var(--header-offset))), 900px); padding-top: 40px; padding-bottom: clamp(120px, 18vh, 170px); }
  .hero h1 { font-size: clamp(46px, 11vw, 62px); }
  .hero-description { max-width: 46ch; }
  .hero-location { width: fit-content; margin-bottom: 16px; padding: 7px 13px; border-radius: 999px; background: oklch(0.22 0.02 250 / 0.42); font-size: 13px; }
  .hero-actions { margin-top: 22px; gap: 10px 24px; }
  .hero-media img { object-position: 57% 26%; }
  .hero-media figcaption { top: 14px; right: auto; left: 14px; }
  .hero-wordmark { font-size: 17.5vw; transform: translate(-50%, 26%); }
  .hero-assurances { display: grid; gap: 12px; padding-block: 24px; margin: 0; }
  .hero-assurances li { font-size: 14px; }
  .services-grid, .work-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .section-heading > p:not(.section-label) { margin-top: 16px; }
  .section-heading > .text-link { margin-top: 12px; }
  .section-label { margin-bottom: 16px; }
  .service summary { min-height: 85px; }
  .service summary h3 { font-size: 23px; }
  .work-steps li { padding-block: 26px; }
  .work-steps h3 { font-size: 22px; }
  .desktop-break { display: none; }
  .coverage-grid { grid-template-columns: minmax(0, 1fr); }
  .coverage-image { min-height: 0; aspect-ratio: 1.7; }
  .coverage-copy { padding: 32px; }
  .coverage-copy p { max-width: 41ch; }
  .contact-copy { padding-top: 0; }
  .contact-phone { font-size: 38px; }
  .response-note { max-width: 44ch; margin-top: 23px; }
  .footer-main { flex-wrap: wrap; gap: 16px 28px; }
  .footer-main > p { order: 3; width: 100%; }
  .footer-bottom { flex-direction: column; gap: 4px; }
  .detail-hero { padding-block: 14px 64px; }
  .breadcrumbs { margin-bottom: 20px; }
  .detail-hero-grid, .scope-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .detail-kind { margin-bottom: 18px; }
  .detail-hero h1 { max-width: 13ch; font-size: clamp(44px, 8vw, 62px); }
  .detail-tagline { margin-top: 18px; }
  .detail-photo { height: clamp(320px, 78vw, 440px); }
  .detail-photo img { object-position: center 35%; }
  .page-cerrajeria .detail-photo img { object-position: center 52%; }
  .related-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .related-link { min-height: 76px; font-size: 22px; }
}

@media (max-width: 420px) {
  :root { --gutter: 20px; }
  .header-inner { gap: 10px; }
  .brand > span { font-size: 19px; }
  .brand img { width: 34px; height: 34px; }
  .header-actions { gap: 7px; }
  .header-phone span { display: none; }
  .header-phone .icon { width: 21px; height: 21px; }
  .hero h1 { font-size: clamp(40px, 11.4vw, 48px); }
  .hero-description { font-size: 16px; }
  .hero-actions { gap: 10px 18px; }
  .hero-actions > .button { padding-inline: 16px; gap: 14px; }
  .hero-stage { min-height: min(max(520px, calc(100svh - var(--header-offset))), 760px); padding-bottom: 108px; }
  .hero-media figcaption { gap: 10px; padding: 12px; font-size: 12px; max-width: calc(100% - 28px); }
  .credential-icon { width: 30px; height: 30px; }
  .credential-detail { font-size: 11px; }
  .service summary { grid-template-columns: 26px minmax(0, 1fr) 24px; gap: 14px; }
  .service summary h3 { font-size: 21px; }
  .service-content { padding-left: 40px; padding-right: 0; }
  .work-steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
  .step-number { width: 32px; height: 32px; margin-top: -2px; }
  .work-steps h3 { font-size: 20px; }
  .coverage-copy { padding: 28px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .contact-phone { font-size: clamp(29px, 9.1vw, 36px); gap: 14px; }
  .form-panel h3 { font-size: 25px; }
  .back-top { font-size: 13px; gap: 6px; }
  .detail-hero h1 { font-size: clamp(39px, 10.4vw, 44px); }
  .detail-actions > .button { width: 100%; justify-content: space-between; }
  .detail-photo { height: 340px; }
  .detail-photo figcaption { inset: auto 14px 14px; max-width: none; padding: 11px 12px; font-size: 12px; }
  .scope-list dt { font-size: 21px; }
  .detail-contact-actions > .button { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html.menu-ready { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .site-header, .hero-actions, .contact-section, .site-footer, .skip-link, .whatsapp-fab { display: none; }
  .section, .coverage-section { padding-block: 24px; }
  .hero-scene { display: flex; flex-direction: column; overflow: visible; }
  .hero-stage { order: -1; position: static; display: block; min-height: 0; padding: 0 0 20px; }
  .hero-stage :is(h1, .hero-description, .hero-note, .hero-location) { color: var(--ink); }
  .hero-scrim, .hero-wordmark { display: none; }
  .hero-media { position: relative; height: 240px; max-height: 240px; }
  .hero-media figcaption { top: auto; right: auto; bottom: 14px; left: 14px; }
  .wrap { width: 100%; }
  .coverage-grid { break-inside: avoid; }
  .work-section.is-scroll-driven .work-intro { position: static; }
  .work-section.is-scroll-driven .work-steps li, .work-section.is-scroll-driven-mobile .work-steps li { min-height: 0; padding-block: 20px; }
  .work-progress { display: none !important; }
  .detail-hero, .related-services, .detail-contact { padding-block: 24px; }
  .detail-photo { max-height: 320px; }
  .services-section.is-services-sticky .services-intro { position: static; }
  .services-section.has-scroll-services .service[open] { min-height: 0; }
  .services-section.has-scroll-services .service::after { display: none; }
  .services-section.has-scroll-services .service-icon { stroke-dasharray: none; stroke-dashoffset: 0; }
  .detail-scope.is-scope-sticky .scope-intro { position: static; }
  .detail-scope.is-tracking .scope-list > div { min-height: 0; padding-block: 20px; }
  .scope-progress, .scope-list > div::after, .work-steps li::after { display: none !important; }
  .scope-list dt, .scope-list dd { transform: none !important; }
  [data-scroll-image], .step-copy, .service-copy, .service-icon { transform: none !important; }
}