@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/geologica-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/geologica-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #171a18;
  --ink-soft: #222824;
  --paper: #f5f2eb;
  --white: #fff;
  --mist: #e7e8e2;
  --olive: #3f4a40;
  --olive-light: #677164;
  --accent: #d3a832;
  --accent-dark: #9a7614;
  --clay: #965b49;
  --text: #222622;
  --muted: #5d645e;
  --line: rgba(34, 38, 34, .16);
  --line-light: rgba(255, 255, 255, .18);
  --font-display: 'Outfit', Arial, sans-serif;
  --font-body: 'Geologica', Arial, sans-serif;
  --wrap: min(1240px, calc(100% - 48px));

  /* Fluid type scale — one source of truth, no breakpoint jumps */
  --fs-hero: clamp(2.3rem, 1.28rem + 4.2vw, 4.3rem);
  --fs-title: clamp(1.95rem, 1.3rem + 2.5vw, 3.05rem);
  --fs-h3: clamp(1.4rem, 1.18rem + .9vw, 1.85rem);
  --fs-lead: clamp(1rem, .95rem + .28vw, 1.155rem);

  /* Fluid rhythm */
  --space-section: clamp(4rem, 2.7rem + 4.6vw, 6.6rem);
  --space-head: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);

  /* Shape + depth */
  --radius: 8px;
  --radius-m: 14px;
  --shadow-s: 0 1px 2px rgba(23, 26, 24, .05), 0 4px 14px rgba(23, 26, 24, .07);
  --shadow: 0 2px 6px rgba(23, 26, 24, .06), 0 16px 38px rgba(23, 26, 24, .13);
  --shadow-l: 0 6px 18px rgba(23, 26, 24, .1), 0 32px 74px rgba(23, 26, 24, .2);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.25, .5, 1);
  --dur: .28s;
}

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  color: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.07;
  text-wrap: balance;
}
p { margin-bottom: 1em; text-wrap: pretty; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; background: var(--white); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--accent-dark);
  font: 600 13px/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 32px; height: 2px; background: currentColor; flex: none; }
.section--ink .eyebrow, .section--olive .eyebrow, .cta-band .eyebrow, .hero .eyebrow, .page-header .eyebrow { color: #efc85d; }

/* Buttons — tactile, no layout shift on hover */
.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 14px/1 var(--font-display);
  letter-spacing: .01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.btn > span[aria-hidden] { transition: translate var(--dur) var(--ease-spring); }
.btn:active { transform: scale(.975); }
.btn--accent { background: var(--accent); color: #171a18; box-shadow: 0 10px 26px rgba(211, 168, 50, .32); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--light { border-color: rgba(255, 255, 255, .65); color: var(--white); background: transparent; }
.btn--quiet { border-color: var(--line); background: transparent; color: var(--text); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover > span[aria-hidden] { translate: 4px 0; }
  .btn:active { transform: translateY(0) scale(.975); }
  .btn--accent:hover { background: #e2bb4d; box-shadow: 0 14px 32px rgba(211, 168, 50, .42); }
  .btn--outline:hover { background: var(--ink); color: var(--white); }
  .btn--light:hover { background: var(--white); color: var(--ink); }
}
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-dark); font-weight: 600; border-bottom: 1px solid currentColor; }

/* Scroll progress — thin gold hairline above everything */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  color: var(--white);
  background: rgba(23, 26, 24, .92);
  border-bottom: 1px solid var(--line-light);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.site-header.is-scrolled { background: rgba(23, 26, 24, .97); box-shadow: 0 12px 34px rgba(10, 12, 11, .35); }
.site-header__bar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: min-height .3s var(--ease); }
.site-header.is-scrolled .site-header__bar { min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand__mark { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; transition: width .3s var(--ease), height .3s var(--ease); }
.site-header.is-scrolled .brand__mark { width: 36px; height: 36px; }
.brand__copy { display: grid; line-height: 1; }
.brand__copy strong { font: 600 23px/1 var(--font-display); }
.brand__copy small { margin-top: 3px; color: rgba(255, 255, 255, .68); font: 500 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.nav { display: flex; align-items: center; gap: 22px; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; margin: 0; }
.nav__link { position: relative; display: block; padding: 25px 0 23px; color: rgba(255, 255, 255, .78); font: 500 13px/1.2 var(--font-display); white-space: nowrap; transition: color .2s ease; }
.nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--white); }
.nav__link[aria-current='page']::after { transform: scaleX(1); }
@media (hover: hover) { .nav__link:hover::after { transform: scaleX(1); } }
.lang { display: grid; grid-template-columns: repeat(3, 36px); align-items: center; padding: 4px; border: 1px solid var(--line-light); border-radius: 999px; }
.lang__item { display: grid; place-items: center; min-height: 30px; color: rgba(255, 255, 255, .58); font: 600 11px/1 var(--font-display); border-radius: 999px; transition: color .2s ease, background .2s ease; }
.lang__item:hover { color: var(--white); }
.lang__item--active { color: var(--ink); background: var(--accent); }
.nav-cta { min-height: 40px; padding: 10px 16px; white-space: nowrap; }
.burger { display: none; width: 44px; height: 44px; place-content: center; gap: 5px; background: transparent; border: 1px solid var(--line-light); border-radius: var(--radius); }
.burger span { display: block; width: 20px; height: 2px; background: var(--white); transition: transform .25s var(--ease), opacity .2s ease; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
  display: block;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  background: var(--ink);
  border-top: 1px solid transparent;
  transition: max-height .4s var(--ease), visibility .4s, border-color .4s;
}
.mobile-nav[data-open='true'] { max-height: min(560px, 80svh); visibility: visible; border-top-color: var(--line-light); overflow-y: auto; }
.mobile-nav__langs { display: none; }
.mobile-nav__list { list-style: none; margin: 0; padding: 12px 0; }
.mobile-nav__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-light); font: 500 17px/1.2 var(--font-display); }
.mobile-nav__cta { width: 100%; margin: 0 0 22px; }

/* Hero — slides are grid-stacked so the section GROWS with long copy
   (Cyrillic titles, short viewports) instead of clipping under the header. */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.hero__slides { display: grid; min-height: clamp(520px, calc(100svh - 112px), 800px); }
.hero__slide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility .8s; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); transition: transform 8s linear; }
.hero__slide.is-active .hero__image { transform: scale(1.08); }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 17, 16, .9) 0%, rgba(15, 17, 16, .58) 48%, rgba(15, 17, 16, .16) 100%); }
/* NB: .hero__content also carries .wrap — never override its width here,
   or the copy loses its gutters and hits the viewport edge. */
.hero__content { position: relative; z-index: 2; padding-top: clamp(40px, 6svh, 64px); padding-bottom: clamp(112px, 16svh, 150px); }
.hero__copy { width: min(720px, 74%); }
.hero__title { margin-bottom: 22px; max-width: 16ch; font-size: var(--fs-hero); color: var(--white); overflow-wrap: break-word; }
.hero__text { max-width: 66ch; margin-bottom: 30px; color: rgba(255, 255, 255, .84); font-size: var(--fs-lead); line-height: 1.7; }
/* Cyrillic display copy runs much longer — tune the scale down for ru/uk */
:lang(ru) .hero__title, :lang(uk) .hero__title { font-size: clamp(1.95rem, 1.1rem + 3.4vw, 3.6rem); max-width: 20ch; }
:lang(ru) .section__title, :lang(uk) .section__title { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem); }
:lang(ru) .page-header__title, :lang(uk) .page-header__title,
:lang(ru) .blog-post__header h1, :lang(uk) .blog-post__header h1 { font-size: clamp(1.9rem, 1.35rem + 2.5vw, 3.1rem); }
.hero__controls { position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.hero__controls button { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; color: var(--white); background: rgba(23, 26, 24, .42); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease-spring); }
.hero__controls button:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: scale(1.06); }
.hero__controls span { min-width: 68px; text-align: center; font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.hero__progress { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 148px; height: 2px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.hero__progress::after { content: ''; display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.hero__progress.is-running::after { animation: hero-progress 7s linear forwards; }
@keyframes hero-progress { to { transform: scaleX(1); } }

.trust-strip { color: var(--white); background: var(--olive); }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip__grid > div { min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-left: 1px solid var(--line-light); }
.trust-strip__grid > div:last-child { border-right: 1px solid var(--line-light); }
.trust-strip strong { color: var(--accent); font: 600 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.trust-strip span { color: rgba(255, 255, 255, .76); font-size: 13px; line-height: 1.35; }

/* Sections */
.section { padding: var(--space-section) 0; }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist); }
.section--ink { color: var(--white); background: var(--ink); }
.section--olive { color: var(--white); background: var(--olive); }
.section__head { max-width: 800px; margin: 0 auto var(--space-head); text-align: center; }
.section__head .eyebrow { justify-content: center; }
.section__head--left { max-width: 720px; margin-inline: 0; text-align: left; }
.section__head--left .eyebrow { justify-content: flex-start; }
.section__title { margin-bottom: 18px; font-size: var(--fs-title); }
.section__intro { margin: 0 auto; max-width: 72ch; color: var(--muted); font-size: 17px; }
.section--ink .section__intro, .section--olive .section__intro { color: rgba(255, 255, 255, .72); }
.section__action { margin-top: 42px; text-align: center; }
.section__action--left { text-align: left; }
.page-intro { max-width: 850px; margin: 0 auto 64px; color: var(--muted); font-size: 19px; text-align: center; }

/* Text-only intro block: heading left, prose + CTA right, so a section with
   no cards still reads as a deliberate editorial layout. */
.intro-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.intro-split__head .section__title { margin-bottom: 0; }
.intro-split__body { display: grid; justify-items: start; gap: 26px; }
.intro-split__body p { margin: 0; max-width: 62ch; color: var(--muted); font-size: var(--fs-lead); line-height: 1.8; }
@media (max-width: 900px) {
  .intro-split { grid-template-columns: 1fr; gap: 24px; }
}

/* Services */

.service-sections { display: grid; gap: 72px; }
.service-section { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 56px; align-items: center; }
.service-section:nth-child(even) .service-section__copy { order: 2; }
.service-section:nth-child(even) .service-section__media { order: 1; }
.service-section__copy > span { display: block; margin-bottom: 18px; color: var(--accent-dark); font: 600 13px/1 var(--font-display); }
.service-section__copy h2 { margin-bottom: 18px; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.service-section__copy p { color: var(--muted); font-size: 17px; }
.service-section__copy a { color: var(--accent-dark); font-weight: 600; }

/* Galleries and work */
.work-grid { display: grid; grid-template-columns: 1.35fr .65fr .65fr 1.35fr; grid-template-rows: 420px; gap: 14px; }
.work-tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-m); background: var(--ink-soft); }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-tile::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .76)); transition: opacity .4s ease; }
.work-tile figcaption { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; color: var(--white); font: 600 18px/1.2 var(--font-display); transition: transform .35s var(--ease); }
@media (hover: hover) {
  .work-tile:hover img { transform: scale(1.05); }
  .work-tile:hover figcaption { transform: translateY(-4px); }
}
.project { margin-bottom: 0; }
/* Without this two works sit 18px apart — less than the 28px between a work's
   own title and its gallery, so the heading reads as belonging to the gallery
   above it. Keep the gap between works clearly larger than the one inside one. */
.project + .project { margin-top: clamp(56px, 6vw, 96px); }
.project__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 28px; }
.project__head h2 { font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.65rem); }
.project__head p:last-child { margin: 0; color: var(--muted); }
.media-slider { position: relative; background: var(--ink); overflow: hidden; border-radius: var(--radius-m); box-shadow: var(--shadow); }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .55s var(--ease); }
.slider__slide { flex: 0 0 100%; margin: 0; }
.slider__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
[data-lightbox] .slider__slide img { cursor: zoom-in; }
.slider__btn { position: absolute; z-index: 3; top: 50%; width: 48px; height: 48px; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; color: var(--white); background: rgba(23, 26, 24, .6); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.slider__btn:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.slider__btn--prev { left: 18px; }
.slider__btn--next { right: 18px; }
.slider__counter { position: absolute; right: 20px; bottom: 18px; min-width: 78px; padding: 8px 12px; color: var(--white); background: rgba(23, 26, 24, .76); border-radius: 999px; text-align: center; font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 150; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--white); }
.lightbox::backdrop { background: rgba(10, 12, 11, .9); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox figure { margin: 0; max-width: min(1400px, 94vw); }
.lightbox img { max-width: min(1400px, 94vw); max-height: 84svh; width: auto; height: auto; margin-inline: auto; border-radius: var(--radius); box-shadow: var(--shadow-l); }
.lightbox figcaption { margin-top: 14px; text-align: center; color: rgba(255, 255, 255, .72); font-size: 14px; }
.lightbox__close { position: fixed; top: 18px; right: 18px; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: var(--white); background: rgba(23, 26, 24, .6); font-size: 22px; line-height: 1; }
.lightbox__close:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: var(--white); background: rgba(23, 26, 24, .6); }
.lightbox__nav:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__counter { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(23, 26, 24, .7); font: 600 12px/1 var(--font-display); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] figure { animation: lightbox-in .3s var(--ease); }
  @keyframes lightbox-in { from { opacity: 0; transform: scale(.96); } }
}

/* Reviews and FAQ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { min-height: 270px; display: flex; flex-direction: column; margin: 0; padding: 30px; border: 1px solid var(--line-light); border-radius: var(--radius-m); transition: border-color .3s ease, background .3s ease; }
@media (hover: hover) { .review:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .04); } }
.review__mark { color: var(--accent); font: 600 54px/.7 Georgia, serif; }
.review p { margin: 28px 0; color: rgba(255, 255, 255, .82); font-size: 17px; }
.review footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-light); font: 600 15px/1 var(--font-display); }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: start; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font: 600 18px/1.35 var(--font-display); transition: color .2s ease; }
.faq__item summary:hover { color: var(--accent-dark); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent-dark); font-size: 22px; font-weight: 400; transition: transform .3s var(--ease), background .3s ease, color .3s ease, border-color .3s ease; }
.faq__item[open] summary span { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--ink); }
.faq__item > div { padding: 0 42px 22px 0; color: var(--muted); }
.faq__item::details-content {
  opacity: 0;
  block-size: 0;
  overflow: clip;
  transition: content-visibility .35s allow-discrete, opacity .35s var(--ease), block-size .35s var(--ease);
}
.faq__item[open]::details-content { opacity: 1; block-size: auto; }

/* Page headers */
.page-header { position: relative; min-height: 420px; display: flex; align-items: flex-end; color: var(--white); background: var(--ink); overflow: hidden; }
.page-header--compact { min-height: 320px; }
.page-header__image, .page-header__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.page-header__scrim, .page-header__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23, 26, 24, .88), rgba(23, 26, 24, .38)); }
.page-header__inner { position: relative; z-index: 2; padding-top: 90px; padding-bottom: 52px; }
.page-header__title { max-width: 18ch; margin: 0; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: rgba(255, 255, 255, .7); font-size: 13px; }
.breadcrumb a:hover { color: var(--white); }

/* About and video */
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; }
.about-intro__text { color: var(--muted); font-size: 17px; }
.about-intro__text h3 { margin-top: 32px; color: var(--text); font-size: 27px; }
.about-quality { display: grid; grid-template-columns: .72fr 1.28fr; gap: 88px; align-items: center; }
.about-quality__copy > p { color: rgba(255, 255, 255, .72); font-size: 17px; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 14px 14px 14px 38px; border: 1px solid var(--line-light); border-radius: var(--radius); }
.check-list li::before { content: '✓'; position: absolute; left: 14px; color: var(--accent); }
.video { margin-inline: auto; }
.video__frame { position: relative; overflow: hidden; border-radius: var(--radius-m); background: #000; box-shadow: var(--shadow); }
.video--portrait .video__frame { width: min(380px, 100%); aspect-ratio: 9 / 16; }
.video--landscape .video__frame { width: 100%; aspect-ratio: 16 / 9; }
.video__frame iframe, .video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; color: var(--ink); background: rgba(0, 0, 0, .24); transition: background .3s ease; }
.video__play span { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .3s var(--ease-spring); }
@media (hover: hover) {
  .video__play:hover { background: rgba(0, 0, 0, .12); }
  .video__play:hover span { transform: scale(1.1); }
}

/* Forms and contact */
.contact-layout, .careers-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.contact-panel h2 { max-width: 18ch; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.contact-list { display: grid; margin-top: 38px; border-top: 1px solid var(--line); }
.contact-list a { display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; transition: color .2s ease; }
.contact-list a:hover { color: var(--accent-dark); }
.contact-list span { color: var(--accent-dark); font: 600 12px/1.65 var(--font-display); }
.form-shell { padding: 36px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow); }
.form-shell > h2 { margin-bottom: 28px; font-size: 32px; }
.form { display: grid; gap: 18px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__field { display: grid; gap: 7px; min-width: 0; }
.form label { color: var(--muted); font: 600 13px/1.25 var(--font-display); }
.form__input, .form__textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: #faf9f6; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.form__input { min-height: 48px; }
.form__textarea { min-height: 150px; resize: vertical; }
.form__turnstile:empty { display: none; }
.form__turnstile { margin: 4px 0 14px; min-height: 0; }
.form__input:focus, .form__textarea:focus { border-color: var(--accent-dark); outline: 0; box-shadow: 0 0 0 3px rgba(211, 168, 50, .22); background: var(--white); }
.form__input:user-invalid, .form__textarea:user-invalid { border-color: #a5352b; box-shadow: 0 0 0 3px rgba(165, 53, 43, .12); }
/* Checkbox row: the box and the first line of the label must share the same
   20px line box, otherwise the browser's default input margin (3px 3px 3px 4px)
   pushes the box down and out of its grid column. */
.form__check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.form__check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}
.form__check label { line-height: 20px; cursor: pointer; }
.form__check a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.form__privacy-summary { margin: 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(196, 154, 71, .08); color: var(--muted); font-size: 12px; line-height: 1.65; }
.form__privacy-summary a { color: var(--accent-dark); text-decoration: underline; }
.form .btn[type='submit'], .form .btn:not([href]) { position: relative; }
.form.is-submitting .btn { color: transparent; pointer-events: none; }
.form.is-submitting .btn::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid rgba(23, 26, 24, .3); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.blog-post__contact { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 32px; margin-top: 48px; padding: 28px 32px; color: var(--white); background: var(--olive); border-radius: var(--radius-m); }
.blog-post__contact h2 { margin: 6px 0 0; font-size: 28px; }
.blog-post__contact-links { display: grid; gap: 5px; font-size: 13px; }
.blog-post__contact-links a:hover { color: var(--accent); }
.form ul { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; list-style: none; color: #a5352b; font-size: 13px; }
.careers-copy { position: sticky; top: 110px; }
.careers-copy > p:last-child { color: var(--muted); font-size: 17px; }
.flash { padding: 14px 0; color: #164f30; background: #dff2e4; border-bottom: 1px solid #b8dcc3; }

/* Prose and blog */
.prose { max-width: 850px; font-size: 17px; }
.prose h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.65rem); }
.prose h2 { margin: 2.2em 0 .7em; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); }
/* Legacy WordPress articles lean on h4 (and the odd h6) for their subheadings,
   so every level below h2 needs a size of its own — browser defaults render
   h4 at body size, which reads as a bold paragraph rather than a heading. */
.prose h3 { margin: 1.9em 0 .6em; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.prose h4, .prose h5, .prose h6 { margin: 1.7em 0 .5em; font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); line-height: 1.35; }
.prose h3, .prose h4, .prose h5, .prose h6, .prose strong { font-weight: 600; }
.prose :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.prose p, .prose li { color: #4f5650; }
.prose a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose img { margin: 34px auto; border-radius: var(--radius-m); }
/* WordPress wraps article images in <figure>, whose 40px browser default
   margin made them narrower than the text they illustrate. */
.prose figure { margin: 34px 0; }
.prose figure img { margin: 0; width: 100%; }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.prose figcaption:empty { display: none; }
.prose table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.prose td, .prose th { padding: 10px; border: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.legal-copy > h1:first-child { display: none; }
.blog-post__hero { padding: 100px 0 130px; color: var(--white); background: var(--olive); }
.blog-post__header { max-width: 930px; }
.blog-post__header time { display: block; margin-bottom: 20px; color: #efc85d; }
.blog-post__header h1 { max-width: 18ch; margin-bottom: 24px; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); }
.blog-post__header p { max-width: 62ch; margin: 0; color: rgba(255, 255, 255, .75); font-size: 18px; }
.blog-post__cover { margin-top: -78px; }
.blog-post__cover img { width: 100%; height: auto; max-height: 650px; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-l); }
.blog-post__body { padding-top: 70px; padding-bottom: 50px; }
.blog-post__footer { max-width: 850px; margin-top: clamp(32px, 4vw, 56px); padding-bottom: 90px; }

/* CTA and footer */
.cta-band { padding: 70px 0; color: var(--white); background: var(--clay); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-band h2 { max-width: 18ch; margin: 0; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.65rem); }
.footer { padding: 72px 0 24px; color: var(--white); background: var(--ink); }
.footer__top { display: grid; grid-template-columns: 1.5fr .75fr 1fr .8fr; gap: 48px; }
.brand--footer { margin-bottom: 22px; }
.footer__brand > p { max-width: 42ch; color: rgba(255, 255, 255, .62); }
.footer__title { margin-bottom: 20px; color: rgba(255, 255, 255, .48); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.footer__links { display: grid; gap: 10px; color: rgba(255, 255, 255, .72); font-size: 14px; }
.footer__links a { transition: color .2s ease; }
.footer__links a:hover { color: var(--accent); }
.footer__links span { overflow-wrap: anywhere; }
.footer__areas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; color: rgba(255, 255, 255, .48); font-size: 13px; }
.footer__areas a { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.footer__areas a:hover { color: var(--accent); }
.footer__cookie-button { width: fit-content; padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.footer__cookie-button:hover, .footer__cookie-button:focus-visible { color: var(--accent); }
.social-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.social-links a { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.social-links a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--line-light); color: rgba(255, 255, 255, .42); font-size: 12px; }

.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: 24px; color: #fff; background: #197c50; box-shadow: var(--shadow); font: 600 13px/1 var(--font-display); transition: transform .25s var(--ease-spring), box-shadow .25s ease; }
.wa-float svg { width: 24px; height: 24px; }
@media (hover: hover) { .wa-float:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); } }
.to-top { position: fixed; left: 20px; bottom: 20px; z-index: 65; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-light); border-radius: 50%; color: var(--white); background: var(--ink); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, visibility .3s, transform .3s var(--ease); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.cookie-banner { position: fixed; z-index: 100; left: 20px; right: 20px; bottom: 20px; max-width: 920px; margin-inline: auto; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 22px 70px rgba(23, 26, 24, .25); }
.cookie-banner[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner:not([hidden]) { animation: cookie-in .45s var(--ease) both; }
  @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } }
}
.cookie-banner strong { font-family: var(--font-display); }
.cookie-banner p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.cookie-banner p a { color: var(--accent-dark); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex: none; }

/* Entrance animations — visible by default, enhanced only with JS */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal:nth-child(2) { transition-delay: .07s; }
.js .reveal:nth-child(3) { transition-delay: .14s; }
.js .reveal:nth-child(4) { transition-delay: .21s; }
.js .reveal:nth-child(n+5) { transition-delay: .26s; }

/* ---------------------------------------------------------------------
   Service groups, service pages, areas (/servicios/…, /reformas/…)
   --------------------------------------------------------------------- */
.section--flush-top { padding-top: 0; }
.page-lead { max-width: 62ch; margin: 0 0 32px; color: var(--text); font-size: var(--fs-lead); line-height: 1.75; }

/* Text column + sticky "get in touch" column */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.page-layout .prose { max-width: 72ch; }
.contact-aside { position: sticky; top: 110px; display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); box-shadow: var(--shadow-s); }
.contact-aside__title { margin: 0; font-size: var(--fs-h3); line-height: 1.2; }
.contact-aside .btn { justify-content: center; }
.contact-aside__links { display: grid; gap: 10px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.contact-aside__links a { color: var(--text); font-weight: 600; }
.contact-aside__links a:hover { color: var(--accent-dark); }

/* Group blocks on /servicios/ */
.service-group + .service-group { margin-top: clamp(56px, 6vw, 88px); }
.service-group__head { display: flex; gap: 20px; align-items: flex-start; max-width: 760px; margin-bottom: 28px; }
.service-group__head p { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-lead); }
.service-group__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--accent); }
.service-group__icon svg { width: 28px; height: 28px; }
.service-group__title { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.service-group__title a { color: inherit; }
.service-group__title a:hover { color: var(--accent-dark); }
.service-others__title { margin-top: clamp(64px, 7vw, 104px); }

/* Service cards */
.service-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.service-card { display: flex; }
.service-card__body { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); color: inherit; transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease); }
.service-card__body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.service-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mist); color: var(--olive); }
.service-card__icon svg { width: 24px; height: 24px; }
.service-card__title { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.3; }
.service-card__more { margin-top: auto; padding-top: 6px; color: var(--accent-dark); font-weight: 600; font-size: 15px; }
@media (hover: hover) {
  a.service-card__body:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-3px); }
  a.service-card__body:hover .service-card__icon { background: var(--accent); color: var(--ink); }
}

/* Place chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-weight: 600; font-size: 15px; transition: border-color var(--dur) ease, background var(--dur) ease; }
.chip:hover { border-color: var(--accent); background: var(--paper); }

/* Area cards on /reformas/ */
.area-group + .area-group { margin-top: clamp(56px, 6vw, 88px); }
.area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.area-card { display: flex; }
.area-card a { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); color: inherit; transition: border-color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease); }
.area-card a > picture, .area-card a > img { display: block; margin: -26px -26px 6px; }
.area-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.area-card a > img { width: calc(100% + 52px); max-width: none; }
.area-card__meta { color: var(--accent-dark); font: 600 13px/1.2 var(--font-display); letter-spacing: .02em; }
.area-card h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; }
.area-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.area-card__more { margin-top: auto; padding-top: 6px; color: var(--accent-dark); font-weight: 600; font-size: 15px; }
@media (hover: hover) {
  .area-card a:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-3px); }
}

/* Services listed on an area page */
.service-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 40px; }
.service-index__group h3 { margin: 0 0 12px; font-size: 1.15rem; }
.service-index__group h3 a { color: inherit; }
.service-index__group h3 a:hover { color: var(--accent-dark); }
.service-index__group ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.service-index__group li a { color: var(--text); }
.service-index__group li a:hover { color: var(--accent-dark); }

@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
}

@media (max-width: 1180px) {
  .nav__list { gap: 15px; }
  .nav { gap: 14px; }
  .nav-cta { display: none; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 320px); }
  .footer__top { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer__top > div:nth-child(2) { display: none; }
}

@media (max-width: 900px) {
  .blog-post__contact { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  :root { --wrap: min(100% - 36px, 760px); }
  .site-header__bar { min-height: 64px; }
  .site-header.is-scrolled .site-header__bar { min-height: 58px; }
  .nav__list, .nav > .lang { display: none; }
  .burger { display: grid; }
  /* Segmented control: equal-width segments keep the active pill a pill
     instead of a blob once the touch height grows to 44px. */
  .mobile-nav__langs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: min(280px, 100%);
    margin-top: 18px;
    padding: 4px;
    border: 1px solid var(--line-light);
    border-radius: 999px;
  }
  .hero__slides { min-height: clamp(540px, calc(100svh - 104px), 720px); }
  .hero__copy { width: 90%; }
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .service-section { grid-template-columns: 1fr; gap: 30px; }
  .service-section:nth-child(even) .service-section__copy, .service-section:nth-child(even) .service-section__media { order: initial; }
  .project__head { grid-template-columns: 1fr; gap: 10px; }
  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .reviews { grid-template-columns: 1fr; }
  .about-intro, .about-quality, .contact-layout, .careers-layout { grid-template-columns: 1fr; gap: 48px; }
  .careers-copy { position: static; }
  .about-quality__video { order: 2; }
}

@media (max-width: 620px) {
  :root { --wrap: calc(100% - 28px); }
  body { font-size: 15px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__copy strong { font-size: 20px; }
  .hero__slides { min-height: clamp(520px, calc(100svh - 94px), 680px); }
  .hero__content { padding-top: 18px; padding-bottom: 84px; }
  .hero__copy { width: 100%; }
  .hero__text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 7; -webkit-box-orient: vertical; font-size: 14px; }
  .hero .btn { width: 100%; }
  .trust-strip__grid > div { min-height: 80px; padding: 14px; }
  .trust-strip strong { font-size: 22px; }
  .section__head { margin-bottom: 36px; }
  .work-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 260px); }
  .service-sections { gap: 54px; }
  .slider__slide img { aspect-ratio: 4 / 3; }
  .slider__btn { width: 42px; height: 42px; }
  .slider__btn--prev { left: 10px; }
  .slider__btn--next { right: 10px; }
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .page-header { min-height: 360px; }
  .page-header__inner { padding-bottom: 36px; }
  .about-intro { gap: 34px; }
  .check-list { grid-template-columns: 1fr; }
  .form-shell { padding: 24px 18px; }
  .form__grid { grid-template-columns: 1fr; }
  .cta-band__inner { align-items: stretch; flex-direction: column; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .wa-float { width: 50px; height: 50px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .cookie-banner { align-items: stretch; flex-direction: column; gap: 16px; left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .cookie-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner .btn { padding-inline: 12px; font-size: 12px; }
  .blog-post__hero { padding: 70px 0 110px; }
  .blog-post__cover { margin-top: -58px; }
  .prose { font-size: 16px; }
  .prose td, .prose th { padding: 8px 6px; font-size: 13px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__progress { display: none; }
  .scroll-progress { display: none; }
}

/* Restored-content bits (live-site parity) */
.contact-schedule { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(211, 168, 50, .1); font-size: 14px; }
.contact-schedule strong { font-family: var(--font-display); }
.page-intro--secondary { margin-top: -34px; font-size: 16px; }
details.form__privacy-summary summary { cursor: pointer; list-style: none; }
details.form__privacy-summary summary::-webkit-details-marker { display: none; }
details.form__privacy-summary summary::after { content: ' ▾'; color: var(--accent-dark); }
details.form__privacy-summary[open] summary::after { content: ' ▴'; }
details.form__privacy-summary p { margin: 10px 0 0; }

/* WCAG 2.2 SC 2.5.8 baseline: standalone controls are at least 24px tall on
   every device; coarse pointers get the full 44px comfort target above. */
/* NB: .lang__item is deliberately excluded — it is a grid cell with
   place-items:center and its own 30px height; forcing inline-flex here
   squashes the active pill and breaks its centring. */
.footer__links a,
.footer__cookie-button,
.social-links a,
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------------------------------------------------------------
   Touch ergonomics: standalone controls get comfortable hit areas
   on coarse pointers (WCAG 2.2 SC 2.5.8 / Apple HIG 44pt).
   Inline links inside prose are intentionally exempt.
   --------------------------------------------------------------- */
@media (pointer: coarse) {
  .footer__links { gap: 0; }
  .footer__links a,
  .footer__cookie-button,
  .social-links a,
  .contact-list a,
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__links a, .footer__cookie-button { width: fit-content; }
  .social-links { gap: 10px 18px; }
  .lang__item { min-height: 44px; }
  .lang { grid-template-columns: repeat(3, 48px); }
  .slider__btn, .hero__controls button, .lightbox__nav, .lightbox__close, .to-top { width: 46px; height: 46px; }
  .faq__item summary { padding-block: 18px; }
  .skip-link { padding: 14px 18px; }
}

/* «Читайте также» — единственные ссылки между статьями: без них каждая
   остаётся тупиком и для читателя, и для поисковика. */
.related { margin-top: clamp(48px, 6vw, 88px); }
.related__title { margin-bottom: 24px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.related__card a { display: block; color: inherit; text-decoration: none; }
.related__card picture, .related__card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-m); }
.related__card h3 { margin: 14px 0 6px; font-size: 1.05rem; line-height: 1.35; }
.related__card a:hover h3 { color: var(--accent-dark); }
.related__card time { color: var(--muted); font-size: 13px; }

/* Блог: даты публикации и правки, источники, карточка услуги, к которой ведёт статья. */
/* Сильнее старого .blog-post__header p, который иначе убирает отступ и цвет. */
.blog-post__header .blog-post__dates { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: 0 0 20px; color: #efc85d; font-size: 15px; }
.blog-post__dates time { margin: 0; }
.blog-post__header .breadcrumb { flex-wrap: wrap; margin-bottom: 22px; }
.blog-post__sources { max-width: 850px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.blog-service { margin-top: 40px; }
.blog-post__sources h2 { margin: 0 0 12px; font-size: 1.15rem; }
.blog-post__sources ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 15px; }
.blog-post__sources li + li { margin-top: 6px; }
.blog-post__sources a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.blog-service__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; max-width: 850px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--white); }
.blog-service__card h2 { margin: 6px 0 8px; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.blog-service__card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.blog-cards__title { margin: 0; font-size: 1.3rem; line-height: 1.3; }
@media (max-width: 700px) {
  .blog-service__card { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
}