/* ==========================================================================
   Domisi DP — main stylesheet
   ========================================================================== */

:root {
  --navy-900: #060d33;
  --navy-800: #0a1a5c;
  --navy-700: #1a2b78;
  --gold: #f2b705;
  --gold-soft: #f6d26b;
  --ink: #12152a;
  --text: #3b3f55;
  --muted: #6b7088;
  --line: #e7e4dd;
  --stone-50: #faf8f4;
  --stone-100: #f3efe7;
  --white: #ffffff;

  --font: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 30px 60px -30px rgba(10, 26, 92, .3);
  --shadow-soft: 0 12px 32px -18px rgba(10, 26, 92, .25);
  --card: 0 0 0 1px rgba(10, 26, 92, .06), 0 14px 34px -22px rgba(10, 26, 92, .28);
  --card-hover: 0 0 0 1px rgba(10, 26, 92, .04), 0 34px 60px -28px rgba(10, 26, 92, .38);
  --container: 1240px;
  --header-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: keep the scrollbar's space reserved, so pausing scrolling
   (lightbox, mobile menu) never makes the page jump wider */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--stone-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--navy-800); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.12; margin: 0 0 .6em; font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: -.015em; }
p { margin: 0 0 1.1em; }
ul { padding-left: 1.2em; }
::selection { background: var(--gold); color: var(--navy-900); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section--tight { padding: clamp(56px, 7vw, 90px) 0; }
.section--stone { background: var(--stone-100); }
.section--navy { background: var(--navy-900); color: rgba(255,255,255,.78); }
.section--navy h2, .section--navy h3 { color: var(--white); }

/* Section label: small pill chip with a gold dot */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 15px 7px 12px; border-radius: 999px; margin-bottom: 22px;
  background: rgba(10,26,92,.06); box-shadow: inset 0 0 0 1px rgba(10,26,92,.06);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2;
  color: var(--navy-700);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,183,5,.18); }
.section--navy .eyebrow, .on-dark .eyebrow { color: var(--gold); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 680px; }
.section--navy .lead { color: rgba(255,255,255,.7); }
.section-head { margin-bottom: clamp(40px, 5vw, 70px); }
.section-head--center { text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.upper { text-transform: uppercase; }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; border: 0; overflow: hidden; isolation: isolate;
  font: 600 .95rem/1 var(--font); letter-spacing: .01em; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease), transform .5s var(--spring), translate .7s var(--spring);
}
.btn.is-magnetic { transition: background .3s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease), transform .5s var(--spring), translate .15s linear; }
.btn::after { /* soft shine sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; transition: transform .4s var(--spring); }
.btn:hover svg { transform: translateX(4px); }
.btn--gold { background: linear-gradient(180deg, #f8c728, var(--gold)); color: var(--navy-900); box-shadow: 0 10px 24px -10px rgba(242,183,5,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--gold:hover { color: var(--navy-900); box-shadow: 0 16px 34px -12px rgba(242,183,5,.8), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--navy { background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); color: var(--white); box-shadow: 0 10px 24px -12px rgba(10,26,92,.7), inset 0 1px 0 rgba(255,255,255,.15); }
.btn--navy:hover { color: var(--white); box-shadow: 0 16px 34px -12px rgba(10,26,92,.75), inset 0 1px 0 rgba(255,255,255,.15); }
.btn--ghost { /* glass button for dark backgrounds */
  color: var(--white); background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--ghost:hover { background: rgba(255,255,255,.2); color: var(--white); }
.btn--outline { color: var(--navy-800); box-shadow: inset 0 0 0 1.5px var(--navy-800); background: transparent; }
.btn--outline:hover { background: var(--navy-800); color: var(--white); }
.link-arrow { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .4s var(--spring); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ==========================================================================
   Header — floating "liquid glass" bar
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 16px 0; pointer-events: none;
  /* Light-surface theme (default); .on-dark switches it over dark sections */
  --glass-bg: rgba(255,255,255,.58);
  --glass-rim: rgba(255,255,255,.75);
  --glass-text: var(--ink);
  --glass-hover: rgba(10,26,92,.07);
  --glass-active: rgba(10,26,92,.12);
  --glass-shadow: 0 12px 40px -14px rgba(6,13,51,.28);
}
.site-header.on-dark {
  --glass-bg: rgba(255,255,255,.1);
  --glass-rim: rgba(255,255,255,.4);
  --glass-text: var(--white);
  --glass-hover: rgba(255,255,255,.16);
  --glass-active: rgba(255,255,255,.24);
  --glass-shadow: 0 12px 40px -14px rgba(0,0,0,.45);
}
.site-header .container {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 14px;
  width: min(1200px, 100%); height: 70px; padding: 0 10px 0 22px;
  border-radius: 999px; color: var(--glass-text);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--glass-shadow), inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 1px rgba(255,255,255,.08);
  transition: width .7s var(--ease-out), height .6s var(--ease-out), background .5s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease);
}
/* Liquid rim: a gradient border that catches the light */
.site-header .container::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, var(--glass-rim), rgba(255,255,255,.05) 40%, rgba(255,255,255,.05) 60%, var(--glass-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .5s var(--ease);
}
/* Specular highlight that follows the pointer (set by main.js) */
.site-header .container::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -40%), rgba(255,255,255,.38), transparent 65%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.site-header .container:hover::before { opacity: 1; }
.site-header.is-scrolled .container { width: min(1080px, 100%); height: 60px; }

.brand { display: flex; align-items: center; flex-shrink: 0; position: relative; z-index: 2; }
.brand img { height: 46px; width: auto; transition: height .6s var(--ease-out); }
.site-header.is-scrolled .brand img { height: 40px; }
.brand .brand__light { display: none; }
.site-header.on-dark .brand__dark { display: none; }
.site-header.on-dark .brand__light { display: block; }

.nav { position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  position: relative; z-index: 1; padding: 10px 16px; border-radius: 999px;
  font-size: .94rem; font-weight: 500; letter-spacing: 0; color: var(--glass-text); opacity: .86;
  transition: color .4s var(--ease), opacity .3s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--glass-text); opacity: 1; }
.nav__link[aria-current="page"] { font-weight: 600; }
/* Liquid indicator: glides between links with a springy stretch (positioned by main.js) */
.nav__indicator {
  position: absolute; left: 0; top: 50%; z-index: 0; height: 40px; width: var(--w, 0px);
  translate: var(--x, 0px) -50%; border-radius: 999px; pointer-events: none; opacity: 0;
  background: var(--glass-active);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  /* Smooth ease-out (no overshoot) so the bubble glides gently into place; the slight
     liquid squash eases in and out over the same span instead of snapping back. */
  transition: translate .55s cubic-bezier(.22, 1, .36, 1), width .55s cubic-bezier(.22, 1, .36, 1),
              scale .5s cubic-bezier(.45, 0, .25, 1), opacity .35s var(--ease), background .4s var(--ease);
}
.nav__indicator.is-visible { opacity: 1; }
.nav__indicator.is-moving { scale: 1.05 .9; }
/* The tab under the bubble reads as selected (brightness only: changing font-weight
   would change the tab widths and make the menu shift) */
.nav__link.is-bubbled { opacity: 1; }
.nav .btn { margin-left: 10px; padding: 12px 20px; }

/* Language toggle (ΕΛ | EN) */
.lang-toggle {
  position: relative; z-index: 2; display: flex; align-items: center; flex-shrink: 0; gap: 2px; padding: 3px;
  border-radius: 999px; background: var(--glass-hover);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: background .4s var(--ease);
}
.lang-toggle a {
  display: block; padding: 8px 11px; border-radius: 999px; line-height: 1;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--glass-text); opacity: .75;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.lang-toggle a:hover { opacity: 1; color: var(--glass-text); }
.lang-toggle a[aria-current] { opacity: 1; background: var(--navy-800); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.site-header.on-dark .lang-toggle a[aria-current] { background: var(--gold); color: var(--navy-900); }

/* With JS: the highlight becomes a separate liquid "thumb" that glides between languages */
.lang-toggle.has-thumb a,
.lang-toggle.has-thumb a[aria-current] { position: relative; z-index: 1; background: transparent; box-shadow: none; transition: color .45s var(--ease), opacity .3s var(--ease); }
.lang-toggle.has-thumb a[aria-current] { color: var(--white); }
.site-header.on-dark .lang-toggle.has-thumb a[aria-current] { color: var(--navy-900); }
.lang-toggle__thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--w, 0px);
  translate: var(--x, 0px) 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  box-shadow: 0 4px 12px -4px rgba(10,26,92,.6), inset 0 1px 0 rgba(255,255,255,.28);
  transition: translate .65s var(--spring), width .65s var(--spring), scale .35s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header.on-dark .lang-toggle__thumb {
  background: linear-gradient(180deg, #f8c728, var(--gold));
  box-shadow: 0 4px 14px -4px rgba(242,183,5,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.lang-toggle__thumb.is-peek { scale: 1.08 1; }
.lang-toggle__thumb.is-moving { scale: 1.35 .82; }
.lang-toggle__thumb.no-anim { transition: none; }

.nav-toggle {
  display: none; position: relative; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--glass-hover); color: var(--glass-text); cursor: pointer; padding: 0;
}
.nav-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--spring), opacity .3s; }
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { display: none; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 980px) {
  .site-header { padding: 10px 12px 0; }
  .site-header .container, .site-header.is-scrolled .container { height: 62px; padding: 0 9px 0 16px; width: 100%; }
  .brand img, .site-header.is-scrolled .brand img { height: 38px; }
  .nav-toggle { display: block; order: 3; }
  .lang-toggle { order: 2; margin-left: auto; }
  .nav__indicator { display: none; }
  /* Menu becomes a glass sheet that drops from the bar */
  .nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; border-radius: 28px;
    background: var(--glass-bg);
    box-shadow: var(--glass-shadow), inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top center;
    transition: opacity .35s var(--ease), transform .6s var(--spring), visibility 0s linear .6s;
  }
  /* Nested inside the glass bar, so backdrop blur can't apply here (a backdrop-filter
     parent isolates its children) — use near-opaque fills instead to keep it legible. */
  .site-header.on-dark .nav { background: #0c1868; }
  .site-header:not(.on-dark) .nav { background: rgba(255,255,255,.97); }
  /* While the menu is open the bar turns solid too: Chrome lets the bar's backdrop
     blur bleed into the nested sheet, which made it look see-through on dark pages. */
  .nav-open .site-header .container { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-open .site-header.on-dark .container { background: rgba(14,26,92,.97); }
  .nav-open .site-header:not(.on-dark) .container { background: rgba(255,255,255,.97); }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .6s var(--spring), visibility 0s; }
  .nav > * { opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
  .nav-open .nav > * { opacity: 1; transform: none; }
  .nav-open .nav > :nth-child(2) { transition-delay: .04s; }
  .nav-open .nav > :nth-child(3) { transition-delay: .08s; }
  .nav-open .nav > :nth-child(4) { transition-delay: .12s; }
  .nav-open .nav > :nth-child(5) { transition-delay: .16s; }
  .nav-open .nav > :nth-child(6) { transition-delay: .2s; }
  .nav-open .nav > :nth-child(7) { transition-delay: .24s; }
  .nav .nav__link { padding: 14px 18px; font-size: 1.08rem; opacity: 1; }
  .nav .nav__link[aria-current="page"] { background: var(--glass-hover); }
  .nav .btn { margin: 8px 0 0; padding: 16px; }
}

/* Browsers without backdrop-filter: fall back to solid surfaces */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header .container { background: rgba(255,255,255,.96); }
  .site-header.on-dark .container { background: rgba(6,13,51,.92); }
}

/* ==========================================================================
   Scroll-built hero
   ========================================================================== */
.build { position: relative; height: 620vh; background: var(--navy-900); }
.build__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.build__poster, .build__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.build__poster { object-fit: cover; }
.build__shade {
  position: absolute; inset: 0; pointer-events: none;
  /* Kept light so the video stays bright and crisp; dark only behind header and text */
  background:
    linear-gradient(180deg, rgba(6,13,51,.55) 0%, rgba(6,13,51,0) 18%),
    linear-gradient(90deg, rgba(6,13,51,.78) 0%, rgba(6,13,51,.4) 30%, rgba(6,13,51,0) 50%),
    linear-gradient(0deg, rgba(6,13,51,.35) 0%, rgba(6,13,51,0) 20%);
}
.build__panels { position: absolute; inset: 0; }
.build__panel {
  position: absolute; left: 0; right: 0; bottom: clamp(90px, 16vh, 170px);
  opacity: 0; transform: translateY(24px); pointer-events: none; will-change: opacity, transform;
}
.build__panel.is-active { pointer-events: auto; }
.build__panel .container { max-width: var(--container); }
.build__text { max-width: 600px; color: rgba(255,255,255,.9); text-shadow: 0 2px 18px rgba(6,13,51,.55); }
.build__step {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 15px 8px 12px; border-radius: 999px; margin-bottom: 20px;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; color: var(--white); text-transform: uppercase; text-shadow: none;
  background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.build__step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,183,5,.25); }
.build__title { color: var(--white); font-size: clamp(2.1rem, 5vw, 4.1rem); font-weight: 700; margin-bottom: 18px; text-shadow: 0 4px 30px rgba(0,0,0,.25); }
.build__title em { font-style: normal; color: var(--gold); }
.build__desc { font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 520px; }
.build__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.build__rail {
  position: absolute; right: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 22px 18px 22px 22px; border-radius: 26px;
  background: rgba(6,13,51,.22); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.22);
}
.build__rail li { display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: rgba(255,255,255,.6); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .3s; }
.build__rail li::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: background .3s, transform .3s; }
.build__rail li.is-active { color: var(--white); }
.build__rail li.is-active::after { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }
.build__rail li.is-done::after { background: rgba(255,255,255,.6); }

.build__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
.build__progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); box-shadow: 0 0 14px rgba(242,183,5,.7); transform-origin: left; transform: scaleX(0); }

.build__hint {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,.75); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; transition: opacity .4s;
}
.build__hint i { width: 22px; height: 36px; border: 2px solid currentColor; border-radius: 12px; position: relative; }
.build__hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: hint 1.8s infinite; }
@keyframes hint { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

.build__loader { position: absolute; top: calc(var(--header-h) + 30px); right: clamp(20px, 4vw, 56px); font-size: .75rem; color: rgba(255,255,255,.6); letter-spacing: .1em; transition: opacity .5s; }
.build__loader.is-done { opacity: 0; }

@media (max-width: 768px) {
  .build { height: 520vh; }
}
/* Portrait screens (phones, upright tablets, tall windows): the video sits as a wide band in the upper
   half and fades into navy behind the text (mirrors hero.js). Near-square desktop windows keep the
   full-screen video. */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__poster { inset: auto; left: -33.2%; top: calc(56% - 90vw); width: 160%; height: auto; }
  .build__sticky { background: var(--navy-900); }
  .build__shade {
    background: linear-gradient(180deg, rgba(6,13,51,.7) 0%, rgba(6,13,51,0) 22%, rgba(6,13,51,0) 42%, rgba(6,13,51,1) 57%);
  }
  .build__rail { display: none; }
}
/* Very short, wide screens (phones held sideways): compact text, no stage list */
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .build__rail, .build__hint { display: none; }
  .build__panel { bottom: 22px; }
  .build__step { margin-bottom: 10px; padding-top: 6px; padding-bottom: 6px; }
  .build__title { font-size: clamp(1.5rem, 4.2vw, 2.3rem); margin-bottom: 8px; }
  .build__desc { font-size: .92rem; }
  .build__actions { margin-top: 14px; }
}
@media (max-width: 768px) {
  .build__panel { bottom: 70px; }
  .build__rail { display: none; }
  .build__hint { display: none; }
}

/* Reduced motion: no scroll scrubbing, show finished house with stacked text */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .build { height: auto; }
  .build__sticky { position: relative; height: auto; min-height: 100vh; }
  .build__canvas, .build__rail, .build__progress, .build__hint, .build__loader { display: none; }
  .build__panels { position: relative; padding: calc(var(--header-h) + 80px) 0 80px; }
  .build__panel { position: relative; bottom: auto; opacity: 1; transform: none; margin-bottom: 40px; pointer-events: auto; }
  .build__shade { background: rgba(6,13,51,.72); }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Page hero (inner pages)
   ========================================================================== */
.page-hero {
  position: relative; min-height: 540px; display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 110px) 0 80px; color: rgba(255,255,255,.85); background: var(--navy-900);
  border-radius: 0 0 clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px); overflow: hidden; isolation: isolate;
}
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: heroZoom 18s var(--ease-out) both; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.page-hero .container > * { animation: heroIn 1.1s var(--ease-out) both; }
.page-hero .container > :nth-child(2) { animation-delay: .08s; }
.page-hero .container > :nth-child(3) { animation-delay: .16s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(6,13,51,.9) 0%, rgba(6,13,51,.55) 60%, rgba(6,13,51,.35) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { max-width: 640px; font-size: 1.12rem; margin: 0; }
.breadcrumb { display: flex; gap: 10px; font-size: .85rem; margin-bottom: 18px; color: rgba(255,255,255,.6); }
.breadcrumb a { color: var(--gold); }

/* ==========================================================================
   Home sections
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { padding: 34px 30px; border-radius: var(--radius); background: var(--white); box-shadow: var(--card); }
.stat__num {
  font-size: clamp(2.6rem, 4.4vw, 3.8rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-700) 60%, #3a4fb0); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__num sup { color: var(--gold); -webkit-text-fill-color: var(--gold); font-size: .5em; vertical-align: top; position: relative; top: .25em; }
.stat__label { margin-top: 12px; font-size: .92rem; color: var(--muted); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat { padding: 26px 22px; } }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--reverse > :first-child { order: 0; } }

.media-stack { position: relative; padding: 0 0 60px 60px; }
.media-stack img { border-radius: var(--radius); box-shadow: var(--shadow); }
.media-stack__main { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.media-stack__small { position: absolute; left: 0; bottom: 0; width: 45%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--stone-50); }
.media-stack__badge {
  position: absolute; right: -14px; top: 30px; color: var(--white); border-radius: var(--radius);
  padding: 20px 24px; text-align: center;
  background: rgba(10,26,92,.72); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
.media-stack__badge strong { display: block; font-size: 2.4rem; line-height: 1; color: var(--gold); }
.media-stack__badge span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

.values { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 34px 0; }
.value { display: flex; gap: 16px; }
.value__icon { flex: 0 0 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--white); color: var(--navy-800); box-shadow: var(--card); }
.value__icon svg { width: 24px; height: 24px; }
.value h3 { font-size: 1.05rem; margin-bottom: 4px; }
.value p { font-size: .95rem; margin: 0; color: var(--muted); }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* Service cards */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card {
  position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; background: var(--white);
  border-radius: var(--radius); color: var(--text); min-height: 280px; overflow: hidden; isolation: isolate;
  box-shadow: var(--card);
  transition: transform .6s var(--spring), box-shadow .5s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--card-hover); color: var(--text); }
.service-card__num { font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: .1em; }
.service-card__icon {
  width: 60px; height: 60px; margin: 18px 0 22px; padding: 13px; border-radius: 18px; color: var(--navy-800);
  background: linear-gradient(160deg, var(--stone-100), #fff); box-shadow: inset 0 0 0 1px rgba(10,26,92,.06);
  transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--spring);
}
.service-card:hover .service-card__icon { background: linear-gradient(160deg, #f8c728, var(--gold)); color: var(--navy-900); transform: rotate(-6deg) scale(1.06); }

/* Cursor spotlight on cards (position set by main.js) */
.spotlight::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(242,183,5,.13), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.spotlight:hover::after { opacity: 1; }
.service-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.service-card p { font-size: .92rem; color: var(--muted); margin: 0 0 18px; }
.service-card .link-arrow { margin-top: auto; font-size: .88rem; }
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } .service-card { min-height: 0; } }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
/* overflow: clip (not hidden) contains the glow without breaking position: sticky inside */
.section--navy { position: relative; overflow: hidden; overflow: clip; isolation: isolate; }
.section--navy::before { /* soft ambient glow behind glass panels */
  content: ""; position: absolute; z-index: -1; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  right: -20vw; top: -30vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242,183,5,.16), rgba(26,43,120,.25) 40%, transparent 70%);
}
.step {
  position: relative; padding: 38px 32px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .6s var(--spring), background .5s var(--ease);
}
.step:hover { transform: translateY(-6px); background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); }
.step__num { font-size: 3.2rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--gold); margin-bottom: 22px; display: block; }
.step h3 { font-size: 1.2rem; }
.step p { margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Package cards */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.package {
  position: relative; display: flex; flex-direction: column; padding: 40px 34px; background: var(--white);
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--card); isolation: isolate; overflow: hidden;
  transition: transform .6s var(--spring), box-shadow .5s var(--ease);
}
.package:hover { transform: translateY(-6px); box-shadow: var(--card-hover); }
.package--featured {
  color: rgba(255,255,255,.8); box-shadow: var(--shadow);
  background: radial-gradient(120% 80% at 100% 0%, #24379a 0%, var(--navy-800) 45%, var(--navy-900) 100%);
}
.package--featured h3, .package--featured .package__price strong { color: var(--white); }
.package__tag { position: absolute; top: 18px; right: 18px; background: var(--gold); color: var(--navy-900); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.package__name { font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.package h3 { font-size: 1.3rem; margin: 10px 0 18px; }
.package__price { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; font-size: .9rem; }
.package--featured .package__price { border-color: rgba(255,255,255,.15); }
.package__price strong { display: block; font-size: 2.2rem; color: var(--navy-800); line-height: 1.1; }
.package__price strong small { font-size: .45em; font-weight: 600; }
.package ul { list-style: none; padding: 0; margin: 0 0 28px; }
.package li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: .95rem; line-height: 1.5; }
.package li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060d33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.package .btn { margin-top: auto; }
.note { font-size: .88rem; color: var(--muted); margin-top: 28px; }
@media (max-width: 980px) { .packages { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Comparison table */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card); }
.compare tbody tr { transition: background .3s var(--ease); }
.compare tbody tr:hover { background: var(--stone-50); }
.compare th, .compare td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--navy-800); color: var(--white); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.compare thead th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 22%; }
.compare thead th strong { display: block; font-size: 1.8rem; letter-spacing: 0; color: var(--gold); text-transform: none; }
.compare tfoot td { background: var(--stone-100); font-weight: 600; }
.yes, .no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.yes { background: rgba(242,183,5,.18); color: #a77c00; }
.no { background: var(--stone-100); color: #b0b3c2; }
.yes svg, .no svg { width: 15px; height: 15px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .compare th, .compare td { padding: 14px 12px; font-size: .88rem; } }

/* Before / After */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ba { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card); transition: transform .6s var(--spring), box-shadow .5s var(--ease); }
.ba:hover { transform: translateY(-6px); box-shadow: var(--card-hover); }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 3px; background: var(--line); aspect-ratio: 3 / 2; }
.ba__img { position: relative; height: 100%; min-height: 0; min-width: 0; overflow: hidden; cursor: zoom-in; background: var(--stone-100); border: 0; padding: 0; display: block; width: 100%; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ba__img:hover img { transform: scale(1.06); }
.ba__label {
  position: absolute; left: 12px; top: 12px; padding: 6px 13px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(6,13,51,.68); color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.ba__img--after .ba__label { background: var(--gold); color: var(--navy-900); }
.ba__caption { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ba__caption h3 { font-size: 1rem; margin: 0; }
.ba__caption span { font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) { .ba-grid { grid-template-columns: 1fr; } }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.gallery__item { position: relative; overflow: hidden; border-radius: var(--radius-sm); cursor: zoom-in; border: 0; padding: 0; background: var(--stone-100); grid-column: span 4; aspect-ratio: 4 / 3; }
.gallery__item--wide { grid-column: span 8; aspect-ratio: auto; }
.gallery__item--tall { grid-row: span 2; aspect-ratio: auto; }
.gallery__item--full { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.gallery__item:hover img { transform: scale(1.06); }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery__item, .gallery__item--wide { grid-column: span 1; aspect-ratio: 1; grid-row: auto; } .gallery__item--wide, .gallery__item--full { grid-column: span 2; aspect-ratio: 16 / 10; } }

.project-feature { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: rgba(255,255,255,.85); }
.project-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.project-feature:hover img { transform: scale(1.04); }
.project-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,13,51,.88) 0%, rgba(6,13,51,0) 60%); }
.project-feature__body { position: relative; z-index: 1; padding: 34px; }
.project-feature h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 6px; }
.project-feature p { margin: 0; }
.projects-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .projects-duo { grid-template-columns: 1fr; } .project-feature { min-height: 340px; } }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member { position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px; border-radius: var(--radius); background: var(--white); box-shadow: var(--card); transition: transform .6s var(--spring), box-shadow .5s var(--ease); }
.member:hover { transform: translateY(-6px); box-shadow: var(--card-hover); }
.member__avatar {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: var(--gold); font-weight: 700; font-size: 1.05rem; margin-bottom: 18px; letter-spacing: .04em;
  background: radial-gradient(120% 120% at 0% 0%, #24379a, var(--navy-800) 50%, var(--navy-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.member__photo {
  display: block; width: 84px; height: 84px; border-radius: 24px; object-fit: cover; margin-bottom: 18px;
  background: var(--stone-100); box-shadow: 0 10px 24px -14px rgba(10,26,92,.55), inset 0 0 0 1px rgba(10,26,92,.06);
  transition: transform .6s var(--spring);
}
.member:hover .member__photo { transform: scale(1.05) rotate(-2deg); }
.member h3 { font-size: 1.02rem; margin-bottom: 6px; }
.member p { font-size: .9rem; color: var(--muted); margin: 0 0 12px; line-height: 1.55; }
.member a { font-size: .9rem; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.member a svg { width: 15px; height: 15px; }
@media (max-width: 1080px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.8); border-radius: calc(var(--radius) * 1.5);
  padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center;
  background: radial-gradient(90% 140% at 100% 0%, #2a3fa6 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
}
.cta-band::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(242,183,5,.28), transparent 65%); animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { to { transform: translate(-60px, 50px) scale(1.15); } }
.cta-band h2 { color: var(--white); margin-bottom: 10px; }
.cta-band p { margin: 0; }
.cta-band__actions { position: relative; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } }

/* ==========================================================================
   Services page
   ========================================================================== */
.services-layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.services-nav { position: sticky; top: calc(var(--header-h) + 24px); background: var(--white); border-radius: var(--radius); box-shadow: var(--card); padding: 12px; }
.services-nav a { display: flex; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; color: var(--text); line-height: 1.35; transition: background .3s var(--ease), color .3s var(--ease); }
.services-nav a span { color: var(--gold); font-size: .78rem; padding-top: 2px; }
.services-nav a:hover, .services-nav a.is-active { background: var(--stone-100); color: var(--navy-800); }
.service-block { padding: 0 0 clamp(56px, 7vw, 90px); margin-bottom: clamp(56px, 7vw, 90px); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.service-block:last-child { border-bottom: 0; margin-bottom: 0; }
.service-block__img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius); margin-bottom: 36px; }
.service-block h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.service-block h3 { font-size: 1.1rem; margin-top: 30px; }
.checklist { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 30px; line-height: 1.55; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060d33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.checklist--cols { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.callout { position: relative; background: var(--stone-100); border-radius: var(--radius-sm); padding: 22px 26px 22px 30px; margin: 24px 0; overflow: hidden; }
.callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); }
.callout p:last-child { margin: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.pill { padding: 8px 16px; border-radius: 999px; background: var(--white); box-shadow: var(--card); font-size: .88rem; font-weight: 600; color: var(--navy-800); }
@media (max-width: 980px) { .services-layout { grid-template-columns: 1fr; } .services-nav { display: none; } }
/* PC: the side menu's column runs the full height of the services, so the (sticky) menu follows the scroll */
@media (min-width: 981px) { .services-layout > aside { align-self: stretch; } }
@media (max-width: 640px) { .checklist--cols { grid-template-columns: 1fr; } }

/* Article */
.article { max-width: 780px; margin-inline: auto; }
.article h2 { font-size: 1.6rem; margin-top: 1.6em; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 5vw, 70px); align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; }
.contact-list__icon { flex: 0 0 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--gold); background: radial-gradient(120% 120% at 0% 0%, #24379a, var(--navy-800) 50%, var(--navy-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.contact-list__icon svg { width: 20px; height: 20px; }
.contact-list small { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact-list a, .contact-list strong { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.contact-list a:hover { color: var(--navy-700); }
.map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--card); aspect-ratio: 4 / 3; background: var(--stone-100); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.form { background: var(--white); border-radius: calc(var(--radius) + 4px); padding: clamp(28px, 4vw, 48px); box-shadow: var(--card), var(--shadow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 17px; border: 1.5px solid transparent; border-radius: var(--radius-sm); background: var(--stone-100);
  font: inherit; font-size: 1rem; color: var(--ink); transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); background: var(--white); box-shadow: 0 0 0 5px rgba(26,43,120,.1); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: 6px 0 24px; }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--navy-800); flex-shrink: 0; }
.form__status { margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: .95rem; display: none; }
.form__status.is-success { display: block; background: #e8f6ee; color: #1e6b41; }
.form__status.is-error { display: block; background: #fdecec; color: #9b2c2c; }
.form button[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; gap: 0; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.65); padding: 100px 0 0; font-size: .95rem;
  background: var(--navy-900); border-radius: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px) 0 0;
}
.site-footer::before { content: ""; position: absolute; z-index: -1; left: -10%; top: -40%; width: 60%; height: 120%; border-radius: 50%; background: radial-gradient(circle, rgba(26,43,120,.55), transparent 65%); pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; }
.site-footer h4 { color: var(--white); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 22px; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--gold); }
.footer-brand img { height: 70px; width: auto; margin-bottom: 20px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 60px 70px;
  background: rgba(6,13,51,.72); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: scale(.94); transition: transform .6s var(--spring); }
.lightbox.is-open img { transform: none; }
.lightbox button {
  position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 0; color: var(--white); cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.3);
  transition: background .3s var(--ease), color .3s var(--ease), transform .5s var(--spring);
}
.lightbox button:hover { background: var(--gold); color: var(--navy-900); }
.lightbox button svg { width: 22px; height: 22px; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .85rem; letter-spacing: .1em; }
@media (max-width: 640px) { .lightbox { padding: 70px 12px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 10px; transform: none; } }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
/* opacity + transform only: both run on the compositor, unlike blur filters */
.reveal { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; } }

/* ==========================================================================
   Modern layer: marquee, bento services, stacking steps, word reveals,
   image reveals, footer wordmark
   ========================================================================== */

/* Marquee band after the hero */
.marquee {
  position: relative; overflow: hidden; padding: clamp(18px, 2.6vw, 30px) 0; background: var(--navy-900); color: var(--white);
  border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 48s linear infinite; }
.marquee__track > * { margin-right: clamp(22px, 3vw, 40px); flex-shrink: 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; white-space: nowrap; }
.marquee .is-outline { color: transparent; -webkit-text-stroke: 1.3px rgba(255,255,255,.5); }
.marquee i { font-style: normal; color: var(--gold); font-size: clamp(.9rem, 1.6vw, 1.3rem); }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* Bento services grid */
.services-grid { grid-auto-rows: minmax(250px, auto); }
.service-card--feature { grid-column: span 2; grid-row: span 2; justify-content: flex-end; color: rgba(255,255,255,.8); background: var(--navy-900); padding: 34px 32px; }
.service-card--feature:hover { color: rgba(255,255,255,.8); }
.service-card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.service-card--feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,13,51,.95) 12%, rgba(6,13,51,.5) 55%, rgba(6,13,51,.12)); }
.service-card--feature:hover .service-card__bg { transform: scale(1.06); }
.service-card--feature h3 { color: var(--white); font-size: clamp(1.4rem, 2.2vw, 1.9rem); max-width: 440px; }
.service-card--feature p { color: rgba(255,255,255,.75); font-size: 1rem; max-width: 440px; }
.service-card--feature .service-card__num { color: var(--gold); }
.service-card--feature .service-card__icon { background: rgba(255,255,255,.12); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.service-card--feature .link-arrow { color: var(--gold); }
.service-card--wide { grid-column: span 2; }
@media (max-width: 1080px) {
  .service-card--feature { grid-row: span 1; min-height: 420px; }
}
@media (max-width: 560px) {
  .service-card--feature, .service-card--wide { grid-column: span 1; }
  .service-card--feature { min-height: 380px; }
}

/* Process: heading stays pinned while the step cards stack up */
@media (min-width: 861px) {
  .process .container { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
  .process .section-head { position: sticky; top: calc(var(--header-h) + 70px); margin-bottom: 0; }
  .process .steps { grid-template-columns: 1fr; gap: 0; }
  .process .step {
    position: sticky; top: calc(var(--header-h) + 70px + var(--n, 0) * 30px);
    min-height: 280px; padding: 44px 40px; margin-bottom: 22vh;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(160deg, #17287e 0%, #0d1a5e 55%, #091348 100%);
    box-shadow: 0 -24px 60px -28px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.16);
  }
  .process .step:hover { transform: none; background: linear-gradient(160deg, #1b2e8c 0%, #0f1d66 55%, #0a154d 100%); }
  .process .step:nth-child(2) { --n: 1; }
  .process .step:nth-child(3) { --n: 2; margin-bottom: 0; }
  .process .step__num { font-size: 4.4rem; }
  .process .step h3 { font-size: 1.5rem; }
}

/* Headings rise in word by word (spans added by main.js) */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin-bottom: -.14em; }
.split-words .w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.split-words.is-in .w > span { transform: none; }

/* Images open up like a window as they scroll into view (class added by main.js) */
.img-reveal { clip-path: inset(9% 9% 9% 9% round var(--reveal-r, var(--radius))); transition: clip-path 1.4s var(--ease-out); }
.img-reveal.is-in { clip-path: inset(0 0 0 0 round var(--reveal-r, var(--radius))); }
.gallery__item.img-reveal { --reveal-r: var(--radius-sm); }
.ba__pair.img-reveal { --reveal-r: 0px; }

/* Giant wordmark at the foot of the page */
.footer-wordmark {
  font-size: clamp(5rem, 23.5vw, 23rem); font-weight: 800; line-height: .76; letter-spacing: -.065em; text-align: center;
  margin: 10px 0 0; padding-bottom: .04em; white-space: nowrap; overflow: hidden; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 70%, rgba(255,255,255,0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* Page hero: bigger title, glass breadcrumb, parallax background, rotating badge */
.page-hero { min-height: min(78vh, 720px); }
.page-hero h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: -.045em; line-height: 1.02; max-width: 15ch; }
.page-hero .container > h1.split-words { animation: none; }   /* rises word by word instead */
.page-hero p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.page-hero__bg { will-change: translate; }
.page-hero::after { /* soft fade into the page below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(6,13,51,.55), transparent);
}
.breadcrumb {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; margin-bottom: 26px;
  background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.25);
  color: rgba(255,255,255,.75);
}
.breadcrumb a { color: var(--gold); }
.hero-badge {
  position: absolute; z-index: 3; right: clamp(20px, 6vw, 90px); bottom: clamp(30px, 7vw, 80px);
  width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
  color: var(--white); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .6s var(--spring), background .4s var(--ease);
}
.hero-badge:hover { transform: scale(1.08); background: rgba(255,255,255,.16); }
.hero-badge svg.hero-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.hero-badge text { fill: rgba(255,255,255,.85); font: 700 10.5px var(--font); letter-spacing: 3.2px; text-transform: uppercase; }
.hero-badge__arrow { width: 26px; height: 26px; color: var(--gold); transition: transform .5s var(--spring); }
.hero-badge:hover .hero-badge__arrow { transform: translateY(4px); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .hero-badge { width: 96px; height: 96px; } .hero-badge text { font-size: 13.5px; } }
@media (max-width: 600px) { .hero-badge { display: none; } }

/* Thin reading-progress line under the glass bar (article pages) */
.read-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-soft), var(--gold)); box-shadow: 0 0 12px rgba(242,183,5,.7); pointer-events: none; }

/* Services page: liquid highlight in the side menu + big outlined numbers */
.services-nav { position: sticky; }
.services-nav a { position: relative; z-index: 1; }
.services-nav a.is-active { background: transparent; }
.services-nav__pill {
  position: absolute; left: 12px; right: 12px; top: 0; z-index: 0; height: var(--h, 0px); translate: 0 var(--y, 0px);
  border-radius: var(--radius-sm); background: var(--stone-100); box-shadow: inset 3px 0 0 var(--gold);
  transition: translate .6s var(--spring), height .6s var(--spring); pointer-events: none;
}
.service-block { position: relative; counter-increment: service; }
.services-layout > div { counter-reset: service; }
.service-block::before { /* big outlined number in the photo's top-right corner */
  content: counter(service, decimal-leading-zero); position: absolute; z-index: 1; right: 28px; top: 14px;
  font-size: clamp(3.6rem, 8vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.7); text-shadow: 0 6px 30px rgba(6,13,51,.35);
}
.service-block__img { will-change: translate; }
.service-block .checklist li { transition: transform .4s var(--spring); }
.service-block .checklist li:hover { transform: translateX(4px); }

/* Packages: animated gold border on the featured card, highlighted Premium column */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.package--featured::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0deg, var(--gold) 60deg, transparent 140deg, transparent 220deg, rgba(242,183,5,.6) 280deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: borderSpin 6s linear infinite;
}
@keyframes borderSpin { to { --angle: 360deg; } }
.compare thead th:last-child { background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); box-shadow: inset 0 3px 0 var(--gold); }
.compare td:last-child { background: rgba(242,183,5,.05); }
.compare tfoot td:last-child { background: rgba(242,183,5,.16); color: var(--navy-900); }

/* Projects: sticky glass chip bar, expanding before/after pairs, gallery zoom icon */
.chipbar {
  position: sticky; top: calc(var(--header-h) + 14px); z-index: 20; display: flex; justify-content: center;
  margin: -34px auto 0; padding: 0 16px; pointer-events: none;
}
.chipbar__inner {
  pointer-events: auto; position: relative; display: flex; gap: 4px; padding: 5px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 12px 34px -16px rgba(6,13,51,.35), inset 0 0 0 1px rgba(255,255,255,.7);
}
.chipbar__inner::-webkit-scrollbar { display: none; }
.chipbar a { position: relative; z-index: 1; flex-shrink: 0; padding: 10px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap; transition: color .4s var(--ease); }
.chipbar a.is-active { color: var(--white); }
.chipbar__pill {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: var(--w, 0px); translate: var(--x, 0px) 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  transition: translate .6s var(--spring), width .6s var(--spring); pointer-events: none;
}
.ba__pair { transition: grid-template-columns .8s var(--ease-out); }
@media (hover: hover) {
  .ba__pair:has(.ba__img--after:hover) { grid-template-columns: .65fr 1.35fr; }
  .ba__pair:has(.ba__img:not(.ba__img--after):hover) { grid-template-columns: 1.35fr .65fr; }
}
.gallery__item::after, .ba__img::after {
  content: ""; position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 20px no-repeat;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  opacity: 0; transform: scale(.7); transition: opacity .35s var(--ease), transform .5s var(--spring);
}
.gallery__item:hover::after, .ba__img:hover::after { opacity: 1; transform: none; }

/* Contact: floating labels (state classes set by main.js) and a tinted map */
.form .field.is-floating { position: relative; }
.form .field.is-floating label {
  position: absolute; left: 18px; top: 16px; margin: 0; pointer-events: none; transform-origin: left top;
  font-weight: 500; color: var(--muted); transition: transform .35s var(--ease-out), color .3s var(--ease), top .35s var(--ease-out);
}
.form .field.is-floating input, .form .field.is-floating textarea { padding-top: 24px; padding-bottom: 8px; }
.form .field.is-floating.is-filled label, .form .field.is-floating:focus-within label { transform: translateY(-9px) scale(.78); color: var(--navy-700); font-weight: 600; }
/* calm, static tint — no hover animation (animating filters on the map flashes odd colours) */
.map iframe { filter: saturate(.7) contrast(1.02); }
.contact-list li { padding: 14px; margin: -14px; border-radius: var(--radius-sm); transition: background .3s var(--ease), transform .5s var(--spring); }
.contact-list li:hover { background: var(--white); transform: translateX(4px); box-shadow: var(--card); }

/* Article pages: drop cap on the lead */
.article .lead::first-letter { float: left; font-size: 3.6em; line-height: .9; font-weight: 800; margin: .04em .1em 0 0; color: var(--navy-800); }

@media (prefers-reduced-motion: reduce) {
  .hero-badge svg.hero-badge__ring, .package--featured::before { animation: none; }
  .marquee__track { animation: none; }
  .split-words .w > span { transform: none; }
  .img-reveal { clip-path: none; }
}

/* ==========================================================================
   Page transitions — "blueprint"
   The glass header stays on top (z 50) while a navy blueprint sheet covers the
   page below it (z 45), led by a thin gold sheet (z 44). On the sheet the logo's
   house is drawn in construction order, then the page name (or language), a
   measuring-ruler progress bar and the company name.
   ========================================================================== */
.pt-curtain, .pt-accent {
  position: fixed; inset: 0; pointer-events: none;
  transform: translateY(105%); border-radius: 56px 56px 0 0;
  will-change: transform;
}
.pt-accent { z-index: 44; background: linear-gradient(180deg, #f8c728, var(--gold) 30%, #d99f00); }
.pt-curtain {
  --pt-ease: cubic-bezier(.76, 0, .24, 1);
  z-index: 45; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(120% 90% at 50% 0%, #1f3196 0%, var(--navy-800) 40%, var(--navy-900) 100%);
}
/* blueprint grid (fades out towards the edges) */
.pt-curtain::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 30%, transparent 100%);
  transform: translateY(30px); transition: transform 1.6s var(--ease-out);
}
.pt-leaving .pt-curtain::before, .pt-covered .pt-curtain::before { transform: none; }

/* the house drawing */
.pt-house { width: clamp(96px, 12vw, 132px); height: auto; margin-bottom: 22px; overflow: visible; }
.pt-house path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pt-house .w { stroke: rgba(255,255,255,.95); stroke-width: 4.5; }
.pt-house .g { stroke: var(--gold); stroke-width: 2.6; opacity: .9; }
.pt-leaving .pt-house path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.45, 0, .2, 1) var(--d); }
.pt-covered .pt-house path { stroke-dashoffset: 0; }
.pt-revealing .pt-house { opacity: 0; transform: translateY(-24px); transition: opacity .35s var(--ease) .1s, transform .5s var(--ease) .1s; }

/* big name: the page you're going to, or the language you're switching to */
.pt-curtain__label {
  display: none; justify-content: center; overflow: hidden; padding: .06em .1em; margin-bottom: 18px;
  font-size: clamp(2.1rem, 5vw, 3.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--white);
}
.pt-lang .pt-curtain__label { font-size: clamp(3rem, 8vw, 6.5rem); }
.pt-lang .pt-curtain__label, .pt-page .pt-curtain__label { display: flex; }
.pt-curtain__label span { display: inline-block; transform: translateY(110%); opacity: 0; }
.pt-curtain__label span.dot { color: var(--gold); }
.pt-leaving .pt-curtain__label span { transform: none; opacity: 1; transition: transform .7s var(--ease-out), opacity .45s var(--ease); transition-delay: calc(.62s + var(--i) * .03s); }
.pt-covered .pt-curtain__label span { transform: none; opacity: 1; }
.pt-revealing .pt-curtain__label span { transform: translateY(-110%); opacity: 0; transition: transform .6s var(--ease), opacity .4s var(--ease); transition-delay: calc(var(--i) * .02s); }

/* measuring ruler: tick marks, filled in gold while the next page loads */
.pt-ruler {
  width: 200px; height: 9px; opacity: 0;
  background:
    linear-gradient(var(--gold), var(--gold)) left bottom / 0% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 50px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 10px) left bottom / 100% 5px no-repeat,
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) left bottom / 100% 2px no-repeat;
}
.pt-leaving .pt-ruler { opacity: 1; background-size: 86% 2px, 100% 9px, 100% 5px, 100% 2px; transition: opacity .3s var(--ease) .45s, background-size 1s cubic-bezier(.3, .6, .3, 1) .45s; }
.pt-covered .pt-ruler { opacity: 1; background-size: 86% 2px, 100% 9px, 100% 5px, 100% 2px; }
.pt-revealing .pt-ruler { opacity: 0; background-size: 100% 2px, 100% 9px, 100% 5px, 100% 2px; transition: background-size .25s var(--ease), opacity .3s var(--ease) .2s; }

/* company name */
.pt-curtain__name { margin-top: 16px; text-align: center; color: rgba(255,255,255,.72); opacity: 0; transform: translateY(10px); }
.pt-curtain__name strong { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--white); }
.pt-curtain__name span { display: block; margin-top: 4px; font-size: clamp(.56rem, 1.2vw, .66rem); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.pt-leaving .pt-curtain__name { opacity: 1; transform: none; transition: opacity .5s var(--ease) .85s, transform .7s var(--spring) .85s; }
.pt-covered .pt-curtain__name { opacity: 1; transform: none; }
.pt-revealing .pt-curtain__name { opacity: 0; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .5s var(--ease); }

/* Leaving: the gold sheet rises first, the navy one follows; the page recedes */
.pt-leaving .pt-accent { transform: none; border-radius: 0; transition: transform .7s cubic-bezier(.76, 0, .24, 1), border-radius .7s cubic-bezier(.76, 0, .24, 1); }
.pt-leaving .pt-curtain { transform: none; border-radius: 0; transition: transform .7s var(--pt-ease) .07s, border-radius .7s var(--pt-ease) .07s; }
.pt-leaving main, .pt-leaving .site-footer { transform: scale(.96) translate3d(0, -20px, 0); opacity: .4; transition: transform .7s cubic-bezier(.76, 0, .24, 1), opacity .7s var(--ease); }

/* Arriving: cover instantly (before first paint), hold the finished drawing, then slide the sheets away — navy first, gold trailing */
.pt-enter body::after { content: ""; position: fixed; inset: 0; z-index: 45; background: var(--navy-900); }
.pt-covered .pt-curtain, .pt-covered .pt-accent { transform: none; border-radius: 0; }
.pt-revealing .pt-curtain { transform: translateY(-105%); border-radius: 0 0 56px 56px; transition: transform .9s var(--pt-ease) .14s, border-radius .9s var(--pt-ease) .14s; }
.pt-revealing .pt-accent { transform: translateY(-105%); border-radius: 0 0 56px 56px; transition: transform .9s cubic-bezier(.76, 0, .24, 1) .24s, border-radius .9s cubic-bezier(.76, 0, .24, 1) .24s; }
.pt-covered main { transform: scale(.97) translate3d(0, 40px, 0); opacity: 0; }
.pt-revealing main { transform: none; opacity: 1; transition: transform 1.1s var(--ease-out) .3s, opacity .8s var(--ease) .3s; }

/* The navbar fades out as the sheet rises (after the menu bubble has glided to the chosen tab),
   stays hidden while the page is covered, and fades back in as the new page is revealed */
.pt-leaving .site-header { opacity: 0; translate: 0 -16px; pointer-events: none; transition: opacity .45s var(--ease) .28s, translate .6s var(--ease) .28s; }
.pt-enter .site-header, .pt-covered .site-header { opacity: 0; translate: 0 -16px; }
.pt-revealing .site-header { opacity: 1; translate: none; transition: opacity .6s var(--ease) .5s, translate .9s var(--ease-out) .5s; }
.pt-leaving.pt-revealing .site-header { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .pt-curtain, .pt-accent { display: none; } .site-header { opacity: 1 !important; translate: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--gold); color: var(--navy-900); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Cloudflare Turnstile (contact form, when enabled in the admin) */
.cf-turnstile { margin: 4px 0 20px; min-height: 65px; }

/* Google reCAPTCHA (contact form, when enabled in the admin). The floating v3 badge is hidden:
   Google allows that when the form shows the reCAPTCHA notice (.form__legal) instead. */
.g-recaptcha-box { margin: 4px 0 20px; min-height: 78px; }
.grecaptcha-badge { visibility: hidden; }
.form__legal { margin: 14px 0 0; font-size: .76rem; line-height: 1.5; color: var(--muted); }
.form__legal a { color: inherit; text-decoration: underline; }

/* ==========================================================================
   Home page below the hero — editorial layout
   Real photos with captions, thin rules instead of cards, square corners,
   numbered section labels, plain lists. Prefix: .ed-
   ========================================================================== */
:root { --ed-rule: rgba(18, 21, 42, .14); --ed-strong: rgba(18, 21, 42, .85); --ed-gold: #a77d00; }
.ed-section { padding: clamp(72px, 9vw, 128px) 0; overflow-x: clip; }   /* rows that slide in from the side never widen the page */
.ed-label {
  display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.ed-label span { color: var(--ed-gold); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 12px; }
.ed-label span::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.ed-h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 18px; max-width: 20ch; }
.ed-lead { font-size: 1.06rem; line-height: 1.7; color: var(--muted); max-width: 54ch; margin: 0; }
.ed-link {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; white-space: nowrap;
  font-weight: 600; font-size: .95rem; color: var(--ink); border-bottom: 1px solid currentColor;
}
.ed-link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.ed-link:hover { color: var(--navy-700); }
.ed-link:hover svg { transform: translateX(4px); }

/* section header: label | heading + intro | link — ruled underneath */
.ed-head {
  display: grid; grid-template-columns: minmax(170px, 3fr) 7fr auto; gap: 16px clamp(24px, 4vw, 56px); align-items: end;
  padding-bottom: 28px; margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--ed-strong);
}
.ed-head .ed-label { align-self: start; margin: 10px 0 0; }
.ed-head .ed-h2 { margin-bottom: 12px; }
.ed-head--dark { border-bottom-color: rgba(255,255,255,.22); }
.ed-head--dark .ed-label, .ed-head--dark .ed-h2 { color: var(--white); }
.ed-head--dark .ed-label span { color: var(--gold); }

/* (01) who we are: text + real photo, then key figures */
.ed-intro__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.ed-figure { margin: 0; }
.ed-figure__frame { overflow: hidden; border-radius: 2px; }
.ed-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ed-figure figcaption { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.ed-figure figcaption::before { content: "— "; }
.ed-values { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 36px 0 0; }
.ed-values div { border-top: 1px solid var(--ed-rule); padding: 14px 0 16px; }
.ed-values dt { font-weight: 700; color: var(--ink); font-size: .95rem; }
.ed-values dd { margin: 2px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.ed-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(56px, 7vw, 96px) 0 0; border-top: 1px solid var(--ed-strong); }
.ed-facts div { padding: 22px 20px 0 0; }
.ed-facts div + div { padding-left: 24px; border-left: 1px solid var(--ed-rule); }
.ed-facts dt { font-size: clamp(2.4rem, 4.4vw, 3.8rem); font-weight: 500; color: var(--ink); letter-spacing: -.045em; line-height: 1; }
.ed-facts dd { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }

/* (02) selected work: big real photos, the "before" as an inset */
.ed-work { background: var(--white); }
.ed-work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 56px clamp(20px, 3vw, 40px); }
.ed-project { margin: 0; grid-column: span 6; --h: clamp(300px, 36vw, 540px); }
.ed-project:nth-child(4n + 1), .ed-project:nth-child(4n + 4) { grid-column: span 7; }
.ed-project:nth-child(4n + 2), .ed-project:nth-child(4n + 3) { grid-column: span 5; }
.ed-project__media { position: relative; }
.ed-project__after { display: block; overflow: hidden; border-radius: 2px; cursor: zoom-in; }
.ed-project__after img { width: 100%; height: var(--h); object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ed-project__after:hover img { transform: scale(1.03); }
.ed-project__before {
  position: absolute; left: 16px; bottom: 16px; width: clamp(84px, 9vw, 128px); cursor: zoom-in;
  border: 3px solid var(--white); box-shadow: 0 10px 24px -12px rgba(6,13,51,.55); background: var(--white);
}
.ed-project__before img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ed-project__before span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; text-align: center;
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: rgba(6,13,51,.72);
}
.ed-project figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ed-rule); }
.ed-project__place { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-gold); }
.ed-project figcaption strong { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.ed-project__facts { margin-left: auto; color: var(--muted); font-size: .88rem; }

/* (03) services as a numbered index */
.ed-services__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.ed-services__head { position: sticky; top: calc(var(--header-h) + 36px); }
.ed-services__head .ed-lead { margin-bottom: 28px; }
.ed-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ed-strong); }
.ed-index a {
  display: grid; grid-template-columns: 52px 1fr 22px; gap: 20px; align-items: center;
  padding: 22px 6px; border-bottom: 1px solid var(--ed-rule); color: var(--ink);
  transition: background .35s var(--ease), padding .45s var(--ease-out);
}
.ed-index a:hover { background: var(--white); padding-left: 18px; color: var(--ink); }
.ed-index__num { font-size: .85rem; font-weight: 600; color: var(--ed-gold); font-variant-numeric: tabular-nums; }
.ed-index__body strong { display: block; font-size: clamp(1.05rem, 1.6vw, 1.28rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.ed-index__body span { display: block; margin-top: 4px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.ed-index svg { width: 20px; height: 20px; color: var(--muted); transition: transform .35s var(--ease), color .35s var(--ease); }
.ed-index a:hover svg { transform: translateX(4px); color: var(--ed-gold); }

/* (04) how we work: one compact dark band */
.ed-process { background: var(--navy-900); color: rgba(255,255,255,.72); }
.ed-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.ed-steps li { border-top: 2px solid var(--gold); padding-top: 22px; }
.ed-steps span { font-size: .85rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.ed-steps h3 { color: var(--white); font-size: 1.25rem; font-weight: 600; margin: 12px 0 10px; }
.ed-steps p { margin: 0; font-size: .97rem; line-height: 1.65; }

/* (05) renovation packages as a ruled price table */
.ed-prices { background: var(--stone-100); }
.ed-prices__table { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ed-strong); }
.ed-price { padding: 28px clamp(20px, 2.4vw, 32px) 32px; display: flex; flex-direction: column; }
.ed-price + .ed-price { border-left: 1px solid var(--ed-rule); }
.ed-price__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ed-price__name { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ed-gold); }
.ed-price__tag { padding: 2px 8px; border: 1px solid var(--gold); color: var(--gold); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ed-price h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.35; margin: 14px 0 18px; min-height: 2.7em; }
.ed-price__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.ed-price__amount strong { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -.035em; color: var(--ink); line-height: 1; }
.ed-price__amount small { color: var(--muted); font-size: .85rem; }
.ed-price ul { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.ed-price li { padding: 9px 0; border-top: 1px solid var(--ed-rule); font-size: .93rem; }
.ed-price.is-featured { background: var(--navy-900); color: rgba(255,255,255,.75); border-left-color: transparent; }
.ed-price.is-featured + .ed-price { border-left-color: transparent; }
.ed-price.is-featured h3, .ed-price.is-featured .ed-price__amount strong { color: var(--white); }
.ed-price.is-featured .ed-price__name { color: var(--gold); }
.ed-price.is-featured .ed-price__amount small { color: rgba(255,255,255,.6); }
.ed-price.is-featured li { border-top-color: rgba(255,255,255,.14); }
.ed-price.is-featured .ed-link { color: var(--gold); }
.ed-price .ed-link { align-self: flex-start; }

/* client reviews (shown only when real reviews are added in the admin) */
.ed-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); }
.ed-review { margin: 0; border-top: 1px solid var(--ed-strong); padding-top: 22px; }
.ed-review__stars { color: var(--gold); letter-spacing: .12em; font-size: .9rem; }
.ed-review p { margin: 10px 0 16px; font-size: 1.08rem; line-height: 1.6; color: var(--ink); }
.ed-review footer { color: var(--muted); font-size: .88rem; }
.ed-review footer strong { color: var(--ink); }
.ed-review footer span { margin-left: 10px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

/* team as a directory (a photo appears only when one is uploaded) */
.ed-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
.ed-people li { display: flex; flex-direction: column; gap: 4px; padding: 20px 0 28px; border-top: 1px solid var(--ed-rule); }
.ed-people img { width: 96px; height: 96px; object-fit: cover; border-radius: 2px; margin-bottom: 12px; }
.ed-people strong { color: var(--ink); font-size: 1.02rem; }
.ed-people span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ed-people a { margin-top: 6px; font-weight: 600; font-size: .92rem; color: var(--navy-700); }

/* contact band */
.ed-cta { background: var(--stone-100); padding: clamp(64px, 8vw, 112px) 0; border-top: 1px solid var(--ed-rule); }
.ed-cta__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 96px); align-items: end; }
.ed-cta h2 { font-size: clamp(2rem, 3.8vw, 3.3rem); font-weight: 500; letter-spacing: -.035em; max-width: 16ch; margin-bottom: 14px; }
.ed-cta p { color: var(--muted); max-width: 48ch; margin-bottom: 28px; }
.ed-cta__details { margin: 0; border-top: 1px solid var(--ed-strong); }
.ed-cta__details div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--ed-rule); }
.ed-cta__details dt { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.ed-cta__details dd { margin: 0; color: var(--ink); font-weight: 500; }
.ed-cta__details a { color: var(--ink); }
.ed-cta__details a:hover { color: var(--navy-700); }

@media (max-width: 980px) {
  .ed-head { grid-template-columns: 1fr; align-items: start; }
  .ed-head .ed-label { margin-top: 0; }
  .ed-head .ed-link { border-bottom: 0; padding-bottom: 0; }
  .ed-intro__grid, .ed-services__grid, .ed-cta__grid { grid-template-columns: 1fr; }
  .ed-services__head { position: static; }
  .ed-facts { grid-template-columns: 1fr 1fr; }
  .ed-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ed-facts div:nth-child(n + 3) { padding-top: 28px; }
  .ed-project, .ed-project:nth-child(n) { grid-column: span 6; --h: clamp(260px, 44vw, 420px); }
  .ed-steps, .ed-reviews__grid { grid-template-columns: 1fr; }
  .ed-prices__table { grid-template-columns: 1fr; }
  .ed-price + .ed-price { border-left: 0; border-top: 1px solid var(--ed-rule); }
  .ed-people { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ed-project, .ed-project:nth-child(n) { grid-column: span 12; --h: 78vw; }
  .ed-work__grid { row-gap: 44px; }
  .ed-values { grid-template-columns: 1fr; }
  .ed-index a { grid-template-columns: 36px 1fr 18px; gap: 14px; padding: 18px 2px; }
  .ed-index a:hover { padding-left: 8px; }
  .ed-people { grid-template-columns: 1fr; }
  .ed-head + .ed-people li:first-child { border-top: 0; padding-top: 0; }
  .ed-cta__details div { grid-template-columns: 90px 1fr; }
}


/* the price table already sits under the section's rule */
.ed-head + .ed-prices__table { border-top: 0; }

/* ---- Photo strip: two rows of real job photos that slide sideways with the scroll ---- */
.ed-strip { overflow: hidden; padding: clamp(40px, 6vw, 80px) 0; background: var(--white); display: grid; gap: clamp(12px, 1.6vw, 20px); }
.ed-strip__row { display: flex; gap: clamp(12px, 1.6vw, 20px); width: max-content; will-change: transform; }
.ed-strip__row a { position: relative; display: block; flex: none; height: clamp(180px, 24vw, 340px); overflow: hidden; border-radius: 2px; cursor: zoom-in; }
.ed-strip__row img { height: 100%; width: auto; transition: scale 1.1s var(--ease-out); }
.ed-strip__row a:hover img { scale: 1.05; }
.ed-strip__row span {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; background: rgba(6,13,51,.72); color: var(--white);
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* ---- Editorial scroll motion (html.ed-motion is only set when motion is allowed) ---- */
.ed-figure img, .ed-project__after img { scale: 1.12; }          /* room for the parallax drift */
.ed-project__after:hover img { transform: none; scale: 1.16; }
.ed-project__after img { transition: scale 1.2s var(--ease-out); }

/* section header: label line grows, the rule underneath draws from the left */
.ed-motion .ed-head { position: relative; border-bottom-color: transparent; }
.ed-motion .ed-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ed-strong);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) .1s;
}
.ed-motion .ed-head--dark::after { background: rgba(255,255,255,.22); }
.ed-motion .ed-head.is-in::after { transform: none; }
.ed-motion .ed-label span::after { width: 0; transition: width .9s var(--ease-out) .25s; }
.ed-motion .is-in .ed-label span::after, .ed-motion .ed-intro__text.is-in .ed-label span::after { width: 28px; }
.ed-motion .ed-head > *, .ed-motion .ed-intro__text > *, .ed-motion .ed-services__head > *, .ed-motion .ed-cta__grid > div > * {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .8s var(--ease), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + .05s);
}
.ed-motion :is(.ed-head, .ed-intro__text, .ed-services__head, .ed-cta__grid > div).is-in > * { opacity: 1; transform: none; }
.ed-motion .ed-h2.split-words, .ed-motion .ed-cta h2.split-words { opacity: 1; transform: none; }   /* the words do the rising */

/* strong top rules of figures, the services index and the contact details */
.ed-motion .ed-facts, .ed-motion .ed-index, .ed-motion .ed-cta__details { position: relative; border-top-color: transparent; }
.ed-motion .ed-facts::before, .ed-motion .ed-index::before, .ed-motion .ed-cta__details::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ed-strong);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out);
}
.ed-motion .is-in.ed-facts::before, .ed-motion .is-in.ed-index::before, .ed-motion .is-in.ed-cta__details::before { transform: none; }

/* list items follow one after another (rows slide in, their rule grows) */
.ed-motion :is(.ed-facts, .ed-index, .ed-values, .ed-people, .ed-steps, .ed-prices__table, .ed-reviews__grid, .ed-cta__details) > * {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .8s var(--ease), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + .1s);
}
.ed-motion .ed-index > * { transform: translate3d(36px, 0, 0); }
.ed-motion :is(.ed-facts, .ed-index, .ed-values, .ed-people, .ed-steps, .ed-prices__table, .ed-reviews__grid, .ed-cta__details).is-in > * { opacity: 1; transform: none; }
.ed-motion .ed-steps > li { border-top-color: transparent; background: linear-gradient(var(--gold), var(--gold)) left top / 0% 2px no-repeat; }
.ed-motion .ed-steps.is-in > li { background-size: 100% 2px; transition: opacity .8s var(--ease), transform 1s var(--ease-out), background-size 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .15s); }
.ed-motion :is(.ed-values, .ed-people) > * { border-top-color: transparent; background: linear-gradient(var(--ed-rule), var(--ed-rule)) left top / 0% 1px no-repeat; }
.ed-motion :is(.ed-values, .ed-people).is-in > * { background-size: 100% 1px; transition: opacity .8s var(--ease), transform 1s var(--ease-out), background-size 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + .1s); }

/* photos: wipe up from the bottom while the image settles; the "before" inset pops in afterwards */
.ed-motion :is(.ed-figure__frame, .ed-project__after) { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); }
.ed-motion .ed-figure img { transition: scale 1.6s var(--ease-out); scale: 1.3; }
.ed-motion .ed-figure.is-in .ed-figure__frame { clip-path: inset(0); }
.ed-motion .ed-figure.is-in img { scale: 1.12; }
.ed-motion .ed-project__after img { scale: 1.3; transition: scale 1.6s var(--ease-out); }
.ed-motion .ed-project.is-in .ed-project__after { clip-path: inset(0); }
.ed-motion .ed-project.is-in .ed-project__after img { scale: 1.12; }
.ed-motion .ed-project.is-in .ed-project__after:hover img { scale: 1.16; transition-duration: 1.2s; }
.ed-motion .ed-project__before { opacity: 0; transform: translate3d(0, 18px, 0) scale(.85); transform-origin: left bottom; transition: opacity .6s var(--ease) .85s, transform .9s var(--spring) .85s; }
.ed-motion .ed-project.is-in .ed-project__before { opacity: 1; transform: none; }
.ed-motion .ed-project figcaption, .ed-motion .ed-figure figcaption { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .7s var(--ease) .6s, transform .9s var(--ease-out) .6s; }
.ed-motion :is(.ed-project, .ed-figure).is-in figcaption { opacity: 1; transform: none; }
.ed-motion .ed-project:nth-child(even) { transition-delay: .12s; }
.ed-motion .ed-project:nth-child(even) .ed-project__after { transition-delay: .15s; }

/* ==========================================================================
   Softer editorial (feedback: "too boxy") — fewer rules and boxes, rounded
   photos, staggered layout, space instead of dividers, one calm background.
   ========================================================================== */
:root { --ed-radius: 20px; }
.ed-work, .ed-strip, .ed-prices, .ed-cta { background: var(--stone-50); }
.ed-cta { border-top: 0; }

/* headers: label + heading only, no rule underneath */
.ed-head { border-bottom: 0; padding-bottom: 0; }
.ed-motion .ed-head::after { display: none; }

/* who we are: values marked with a short gold stroke instead of lines */
.ed-values { gap: 22px 32px; }
.ed-values div { border-top: 0; padding: 0; }
.ed-motion .ed-values > * { background: none; }
.ed-values dt::before { content: ""; display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--gold); margin-bottom: 12px; }
/* key figures float freely */
.ed-facts { border-top: 0; gap: 24px; }
.ed-motion .ed-facts::before { display: none; }
.ed-facts div, .ed-facts div + div { border-left: 0; padding: 0; }
.ed-facts dd { margin-top: 8px; }

/* photos: rounded, and the wipe keeps the rounding */
.ed-figure__frame, .ed-project__after, .ed-strip__row a { border-radius: var(--ed-radius); }
.ed-motion :is(.ed-figure__frame, .ed-project__after) { clip-path: inset(100% 0 0 0 round var(--ed-radius)); }
.ed-motion .ed-figure.is-in .ed-figure__frame, .ed-motion .ed-project.is-in .ed-project__after { clip-path: inset(0 round var(--ed-radius)); }
.ed-project__before { border-radius: 14px; overflow: hidden; border-width: 4px; }
.ed-project figcaption { border-top: 0; padding-top: 0; margin-top: 18px; }
.ed-strip__row span, .ed-project__before span { border-radius: 999px; }
.ed-strip__row span { left: 12px; bottom: 12px; padding: 4px 10px; }
.ed-project__before span { left: 6px; right: 6px; bottom: 6px; padding: 2px 6px; }

/* projects: staggered, not in rigid rows */
@media (min-width: 981px) {
  .ed-work__grid { align-items: start; }
  .ed-project:nth-child(even) { margin-top: clamp(60px, 8vw, 120px); }
  .ed-project:nth-child(4n + 3) { margin-top: calc(clamp(60px, 8vw, 120px) * -1 + 20px); }
}

/* services: a soft list — rows highlight on hover instead of being ruled */
.ed-index { border-top: 0; display: grid; gap: 4px; }
.ed-motion .ed-index::before { display: none; }
.ed-index a { border-bottom: 0; border-radius: 16px; padding: 18px 20px; }
.ed-index a:hover { padding-left: 26px; background: var(--white); box-shadow: 0 14px 34px -24px rgba(10,26,92,.35); }

/* how we work: a rounded dark panel with a timeline */
.ed-process { margin: 0 clamp(8px, 1.5vw, 20px); border-radius: clamp(24px, 3vw, 40px); }
.ed-steps { position: relative; }
.ed-steps::before {
  content: ""; position: absolute; left: 9px; right: 0; top: 9px; height: 1px; background: rgba(255,255,255,.2);
  transform-origin: left; transition: transform 1.6s var(--ease-out) .1s;
}
.ed-motion .ed-steps::before { transform: scaleX(0); }
.ed-motion .ed-steps.is-in::before { transform: none; }
.ed-steps li, .ed-motion .ed-steps > li, .ed-motion .ed-steps.is-in > li { border-top: 0; background: none; padding-top: 46px; position: relative; }
.ed-steps li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%;
  background: var(--navy-900); border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(242,183,5,.12);
}
@media (max-width: 980px) {
  .ed-steps::before { left: 9px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top; }
  .ed-motion .ed-steps::before { transform: scaleY(0); }
  .ed-steps li, .ed-motion .ed-steps > li, .ed-motion .ed-steps.is-in > li { padding: 0 0 8px 44px; }
}

/* packages: three soft panels instead of a table */
.ed-prices__table { border-top: 0; gap: clamp(14px, 2vw, 24px); align-items: stretch; }
.ed-price, .ed-price + .ed-price { border-left: 0; border-top: 0; background: var(--white); border-radius: 24px; padding: 30px clamp(22px, 2.4vw, 34px) 32px; }
.ed-price.is-featured { background: var(--navy-900); }
.ed-price__tag { border-radius: 999px; padding: 3px 10px; }
.ed-price li, .ed-price.is-featured li { border-top: 0; padding: 6px 0 6px 20px; position: relative; }
.ed-price li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }

/* team: names breathe, no lines */
.ed-people { gap: 30px clamp(20px, 3vw, 40px); }
.ed-people li, .ed-motion .ed-people > * { border-top: 0; background: none; padding: 0; }
.ed-people img { border-radius: 16px; }

/* reviews: no rules */
.ed-review { border-top: 0; padding-top: 0; }

/* contact: details without row lines */
.ed-cta__details { border-top: 0; display: grid; gap: 14px; }
.ed-motion .ed-cta__details::before { display: none; }
.ed-cta__details div { border-bottom: 0; padding: 0; }

/* ==========================================================================
   Typography: refined serif for large headings and figures (Greek + Latin),
   Commissioner for everything else. The scroll hero keeps its own type.
   ========================================================================== */
:root { --serif: "Noto Serif Display", Georgia, "Times New Roman", serif; }
h1, h2, .ed-h2, .ed-cta h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; }
.build__title, .build h1, .build h2 { font-family: var(--font); font-weight: 700; letter-spacing: -.025em; }
h2 em, h1 em, .ed-h2 em { font-style: italic; color: var(--ed-gold, #a77d00); }
.ed-facts dt, .ed-price__amount strong { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.ed-h2 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); }
.ed-cta h2 { font-size: clamp(2.2rem, 4.2vw, 3.7rem); }

/* ---- Featured project with a drag-to-compare slider ---- */
.ed-feature__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.ed-feature__facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ed-feature__facts li { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); }
.ed-feature__rooms { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 28px; }
.ed-feature__rooms button {
  font: 600 .88rem var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--ed-rule);
  padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ed-feature__rooms button:hover { border-color: var(--ink); }
.ed-feature__rooms button[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.ed-feature__quote { margin: 0 0 28px; padding-left: 18px; border-left: 2px solid var(--gold); }
.ed-feature__quote p { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
.ed-feature__quote footer { font-size: .88rem; color: var(--muted); }

.ed-compare { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--ed-radius, 20px); overflow: hidden; background: var(--stone-100); user-select: none; touch-action: pan-y; }
.ed-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s var(--ease); }
.ed-compare.is-swapping img { opacity: 0; }
.ed-compare.is-swapping .ed-compare__handle, .ed-compare.is-swapping .ed-compare__tag { opacity: 0; }
.ed-compare__handle, .ed-compare__tag { transition: opacity .3s var(--ease); }
.ed-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ed-compare.is-hinting .ed-compare__before, .ed-compare.is-hinting .ed-compare__handle { transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), left .6s cubic-bezier(.65, 0, .35, 1); }
.ed-compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--white); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(6,13,51,.08);
}
.ed-compare__handle svg {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; padding: 13px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: var(--white); color: var(--navy-900); box-shadow: 0 10px 30px -10px rgba(6,13,51,.6);
}
.ed-compare__tag {
  position: absolute; top: 16px; padding: 5px 12px; border-radius: 999px; pointer-events: none;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: rgba(6,13,51,.7);
}
.ed-compare__tag--before { left: 16px; }
.ed-compare__tag--after { right: 16px; background: var(--gold); color: var(--navy-900); }
.ed-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ed-compare__range:focus-visible + * , .ed-compare:has(.ed-compare__range:focus-visible) .ed-compare__handle svg { outline: 3px solid var(--gold); outline-offset: 3px; }
.ed-motion .ed-feature__text > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + .05s); }
.ed-motion .ed-feature__text.is-in > * { opacity: 1; transform: none; }
.ed-motion .ed-compare { clip-path: inset(100% 0 0 0 round var(--ed-radius, 20px)); transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1); }
.ed-motion .ed-compare.is-in { clip-path: inset(0 round var(--ed-radius, 20px)); }
@media (max-width: 980px) { .ed-feature__grid { grid-template-columns: 1fr; } .ed-compare { aspect-ratio: 4 / 5; } }

/* ==========================================================================
   Inner pages in the same editorial style as the home page:
   labels instead of pills, no card shadows, rounded real photos, calm CTA.
   ========================================================================== */
/* pill eyebrow -> small label with a gold line */
.eyebrow, .section--navy .eyebrow, .on-dark .eyebrow {
  display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0;
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; border-radius: 0; background: var(--ed-gold, #a77d00); box-shadow: none; }
.section--navy .eyebrow, .on-dark .eyebrow { color: var(--white); }
.section--navy .eyebrow::before, .on-dark .eyebrow::before { background: var(--gold); }
.section-head--center { text-align: left; margin-left: 0; }
.section-head--center .lead { margin-left: 0; }

/* page hero: breadcrumb as plain text, no spinning badge */
.hero-badge { display: none; }
.breadcrumb { padding: 0; background: none; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* services page */
.services-nav { background: none; box-shadow: none; padding: 0; }
.services-nav__pill { border-radius: 12px; background: var(--white); box-shadow: 0 10px 28px -20px rgba(10,26,92,.4); }
.service-block { border-bottom: 0; }
.service-block::before { display: none; }
.service-block__img { border-radius: var(--ed-radius, 20px); }
.pill { background: none; box-shadow: none; padding: 0; border-radius: 0; font-weight: 600; color: var(--ed-gold, #a77d00); font-size: .82rem; letter-spacing: .06em; }
.pill-row { gap: 6px 18px; }
.callout { background: none; border-radius: 0; padding: 4px 0 4px 22px; }
.callout::before { width: 2px; background: var(--gold); }
.service-block .callout p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; color: var(--ink); }
.checklist li::before, .package li::before {
  width: 6px; height: 6px; top: .72em; left: 6px; border-radius: 50%; background: var(--gold); transform: translateY(-50%);
}
.checklist li, .package li { padding-left: 24px; }

/* packages: soft panels like the home page */
.package { box-shadow: none; border-radius: 24px; background: var(--white); }
.package:hover { transform: none; box-shadow: none; }
.package--featured { background: var(--navy-900); }
.package--featured::before { display: none; }
.package__price { border-color: var(--ed-rule, rgba(18,21,42,.14)); }
.package__price strong { font-family: var(--serif); font-weight: 400; }
.package__tag { border-radius: 999px; background: none; border: 1px solid var(--gold); color: var(--gold); box-shadow: none; }
.compare { box-shadow: none; border-radius: 20px; }
.compare thead th { background: var(--navy-900); }
.compare thead th:last-child { background: var(--navy-800); box-shadow: none; }

/* projects: before/after without the white card */
.ba, .ba:hover { background: none; box-shadow: none; transform: none; border-radius: 0; overflow: visible; }
.ba__pair { border-radius: var(--ed-radius, 20px); overflow: hidden; background: transparent; }
.ba__caption { padding: 14px 2px 0; justify-content: flex-start; gap: 14px; }
.ba__caption h3 { font-size: 1.05rem; font-weight: 600; }
.ba__caption span { order: -1; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-gold, #a77d00); }
.ba__label { border-radius: 999px; }
.project-feature { border-radius: var(--ed-radius, 20px); }
.gallery__item { border-radius: 16px; }
.chipbar__inner { box-shadow: 0 12px 34px -24px rgba(10,26,92,.4); }

/* contact: icons without navy tiles, a calmer form panel */
.contact-list__icon { flex: 0 0 22px; height: 22px; margin-top: 18px; border-radius: 0; background: none; box-shadow: none; color: var(--ed-gold, #a77d00); }
.contact-list li:hover { background: none; transform: none; box-shadow: none; }
.form { box-shadow: none; border-radius: 24px; }
.field input, .field select, .field textarea { background: var(--stone-50); }
.map { border-radius: var(--ed-radius, 20px); box-shadow: none; }

/* bottom call-to-action: same calm band as the home page (no gradient box, no glow) */
.cta-band {
  background: var(--stone-100); color: var(--muted); border-radius: 24px; box-shadow: none;
}
.cta-band::before { display: none; }
.cta-band h2 { color: var(--ink); font-size: clamp(2rem, 3.6vw, 3.2rem); }
.cta-band .btn--ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--ed-strong, rgba(18,21,42,.85)); }
.cta-band .btn--ghost:hover { background: var(--ink); color: var(--white); }

/* navy sections: no ambient glow */
.section--navy::before { display: none; }

/* ---- (03) More projects: swipeable carousel of equal cards ---- */
.ed-work { --gut: max(20px, (100% - var(--container)) / 2); }
.ed-carousel__nav { display: flex; align-items: center; gap: 10px; align-self: end; }
.ed-carousel__count { margin-right: 10px; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-carousel__count b { color: var(--ink); font-weight: 600; }
.ed-carousel__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ed-rule); background: var(--white); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.ed-carousel__btn svg { width: 18px; height: 18px; }
.ed-carousel__btn:hover:not(:disabled) { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.ed-carousel__btn:disabled { opacity: .35; cursor: default; }

.ed-carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 29vw, 400px); gap: clamp(14px, 2vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
  padding: 4px var(--gut) 8px; scrollbar-width: none; cursor: grab; outline: none;
}
.ed-carousel::-webkit-scrollbar { display: none; }
.ed-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ed-carousel.is-dragging .ed-card { pointer-events: none; }
.ed-card { margin: 0; scroll-snap-align: start; }
.ed-card__media {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--ed-radius, 20px); overflow: hidden; background: var(--stone-100);
}
.ed-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ed-card__after { transition: scale 1.2s var(--ease-out); }
.ed-card__before { clip-path: inset(0 0 0 100%); transition: clip-path .75s cubic-bezier(.77, 0, .18, 1); }
.ed-card__media:hover .ed-card__after { scale: 1.04; }
.ed-card__media[aria-pressed="true"] .ed-card__before { clip-path: inset(0); }
@media (hover: hover) { .ed-card__media:hover .ed-card__before { clip-path: inset(0); } }
/* little "Πριν | Μετά" switch shows which photo you are looking at */
.ed-card__switch {
  position: absolute; left: 14px; top: 14px; display: flex; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ed-card__switch span { padding: 4px 10px; border-radius: 999px; color: var(--muted); transition: background .4s var(--ease), color .4s var(--ease); }
.ed-card__switch span:last-child { background: var(--navy-900); color: var(--white); }
.ed-card__media[aria-pressed="true"] .ed-card__switch span:first-child { background: var(--navy-900); color: var(--white); }
.ed-card__media[aria-pressed="true"] .ed-card__switch span:last-child { background: none; color: var(--muted); }
@media (hover: hover) {
  .ed-card__media:hover .ed-card__switch span:first-child { background: var(--navy-900); color: var(--white); }
  .ed-card__media:hover .ed-card__switch span:last-child { background: none; color: var(--muted); }
}
.ed-card__hint {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: rgba(6,13,51,.62); color: var(--white); font-size: .74rem; font-weight: 600; opacity: 0; transition: opacity .4s var(--ease);
}
.ed-card:first-child .ed-card__hint { opacity: 1; }
.ed-card:first-child .ed-card__media:hover .ed-card__hint, .ed-card:first-child .ed-card__media[aria-pressed="true"] .ed-card__hint { opacity: 0; }
.ed-card figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 16px; }
.ed-card__num { font-size: .8rem; font-weight: 600; color: var(--ed-gold); font-variant-numeric: tabular-nums; }
.ed-card figcaption strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.ed-card figcaption em { display: block; font-style: normal; color: var(--muted); font-size: .88rem; margin-top: 2px; }
/* last card: link to all projects */
.ed-card--more {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; aspect-ratio: 4 / 5; padding: 28px;
  border-radius: var(--ed-radius, 20px); background: var(--navy-900); color: var(--white); scroll-snap-align: start;
  font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15;
}
.ed-card--more svg { width: 34px; height: 34px; color: var(--gold); transition: transform .4s var(--ease); }
.ed-card--more:hover { color: var(--white); }
.ed-card--more:hover svg { transform: translateX(8px); }
.ed-carousel__bar { height: 2px; margin-top: 30px; background: var(--ed-rule); border-radius: 2px; overflow: hidden; }
.ed-carousel__bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.08); transition: transform .3s var(--ease); }

/* entrance: cards rise in one after another */
.ed-motion .ed-carousel > * { opacity: 0; transform: translate3d(60px, 0, 0); transition: opacity .8s var(--ease), transform 1.1s var(--ease-out); }
.ed-motion .ed-carousel > :nth-child(2) { transition-delay: .08s; } .ed-motion .ed-carousel > :nth-child(3) { transition-delay: .16s; }
.ed-motion .ed-carousel > :nth-child(4) { transition-delay: .24s; } .ed-motion .ed-carousel > :nth-child(n + 5) { transition-delay: .32s; }
.ed-motion .ed-carousel.is-in > * { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .ed-carousel__nav { justify-self: start; }
}
@media (max-width: 640px) {
  .ed-carousel { grid-auto-columns: 78vw; }
  .ed-carousel__btn { width: 42px; height: 42px; }
}

/* ---- (03) More projects: 2×2 grid of small before/after sliders ---- */
.ed-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.ed-compare--small { aspect-ratio: 4 / 3; }
.ed-compare--small .ed-compare__handle svg { width: 44px; height: 44px; padding: 11px; margin: -22px 0 0 -22px; }
.ed-compare--small .ed-compare__tag { top: 12px; font-size: .64rem; padding: 4px 10px; }
.ed-compare--small .ed-compare__tag--before { left: 12px; }
.ed-compare--small .ed-compare__tag--after { right: 12px; }
.ed-slider__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 16px 0 0; }
.ed-slider__cap strong { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.ed-slider__cap span { color: var(--muted); font-size: .9rem; }
.ed-slider__cap span:first-of-type { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-gold); }
.ed-motion .ed-slider:nth-child(even) .ed-compare { transition-delay: .12s; }
@media (max-width: 760px) { .ed-sliders { grid-template-columns: 1fr; } }

.map__open:hover svg { transform: translateX(3px); }

/* Team: round photos / role icons */
.ed-people .ed-people__pic { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; display: block; background: var(--stone-100); }
.ed-people li.has-photo .ed-people__pic, .ed-people li.has-photo img.ed-people__pic { box-shadow: 0 0 0 4px var(--white), 0 0 0 5px rgba(242,183,5,.6); }
/* ---- Cookie notice ---- */
.cookie {
  position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(440px, calc(100% - 32px));
  padding: 20px 22px; border-radius: 20px; background: var(--white); color: var(--text);
  box-shadow: 0 24px 60px -24px rgba(6,13,51,.45), 0 0 0 1px rgba(10,26,92,.06);
  opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
.cookie.is-shown { opacity: 1; transform: none; }
.cookie p { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; }
.cookie strong { color: var(--ink); display: block; margin-bottom: 2px; }
.cookie a { text-decoration: underline; }
.cookie__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie__btn { padding: 11px 18px; font-size: .9rem; }
.cookie__btn svg { display: none; }

/* ---- Map waiting for consent ---- */
.map { position: relative; }
.map__consent {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
  background: linear-gradient(135deg, var(--stone-100), var(--stone-50)); color: var(--muted); font-size: .92rem;
}
.map__consent p { margin: 0; }

/* ---- Quick call / Viber on phones ---- */
.quick-contact { display: none; }
@media (max-width: 768px) {
  .quick-contact {
    display: flex; position: fixed; right: 14px; bottom: 14px; z-index: 55; gap: 10px; align-items: center;
    opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .35s var(--ease), transform .5s var(--spring);
  }
  .quick-contact.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .has-cookie .quick-contact { opacity: 0; pointer-events: none; }
  .quick-contact__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(6,13,51,.55); font-weight: 700; font-size: .95rem; }
  .quick-contact__btn svg { width: 22px; height: 22px; }
  .quick-contact__btn--viber { width: 52px; background: #7360f2; color: #fff; }
  .quick-contact__btn--call { padding: 0 20px 0 16px; background: var(--gold); color: var(--navy-900); }
  .quick-contact__btn:hover { color: inherit; }
}

/* ---- FAQ ---- */
.ed-faq__grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.ed-faq__head { position: sticky; top: calc(var(--header-h) + 36px); }
.ed-faq__head .ed-lead { margin-bottom: 26px; }
.ed-faq__list { display: grid; gap: 10px; }
.ed-faq__item { background: var(--white); border-radius: 18px; transition: box-shadow .4s var(--ease); }
.ed-faq__item[open] { box-shadow: 0 18px 40px -28px rgba(10,26,92,.45); }
.ed-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.04rem; color: var(--ink); line-height: 1.4;
}
.ed-faq__item summary::-webkit-details-marker { display: none; }
.ed-faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--stone-100); transition: background .3s var(--ease), transform .4s var(--ease); }
.ed-faq__icon::before, .ed-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease); }
.ed-faq__icon::after { transform: rotate(90deg); }
.ed-faq__item[open] .ed-faq__icon { background: var(--gold); }
.ed-faq__item[open] .ed-faq__icon::after { transform: rotate(0); }
.ed-faq__answer { padding: 0 24px 22px; color: var(--muted); line-height: 1.7; }
.ed-faq__answer p { margin: 0; }
.ed-motion .ed-faq__list > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .7s var(--ease), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.ed-motion .ed-faq__list.is-in > * { opacity: 1; transform: none; }
.ed-motion .ed-faq__head > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.ed-motion .ed-faq__head.is-in > * { opacity: 1; transform: none; }
@media (max-width: 980px) { .ed-faq__grid { grid-template-columns: 1fr; } .ed-faq__head { position: static; } }

/* ---- Guarantees (only when filled in the admin) ---- */
.ed-guarantees { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ed-guarantees li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: .95rem; }
.ed-guarantees svg { width: 20px; height: 20px; color: var(--ed-gold, #a77d00); }

/* ---- Footer: company line, cookie settings ---- */
.footer-bottom { flex-wrap: wrap; gap: 8px 24px; }
.footer-legal { color: rgba(255,255,255,.5); font-size: .82rem; }
.footer-bottom__links { display: inline-flex; gap: 20px; margin-left: auto; }
.footer-bottom__links button { background: none; border: 0; padding: 0; font: inherit; color: rgba(255,255,255,.75); cursor: pointer; }
.footer-bottom__links button:hover { color: var(--gold); }

/* ---- Articles (blog) ---- */
.blog-intro { margin-bottom: 36px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.blog-card { display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.blog-card:hover { color: var(--text); }
.blog-card__img { display: block; overflow: hidden; border-radius: var(--ed-radius, 20px); aspect-ratio: 4 / 3; background: var(--stone-100); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.blog-card:hover .blog-card__img img { transform: scale(1.04); }
.blog-card__body { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.blog-card time { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-gold, #a77d00); }
.blog-card strong { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--ink); }
.blog-card__body > span { color: var(--muted); font-size: .95rem; line-height: 1.6; }
.blog-card em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--ink); margin-top: 4px; }
.blog-card em svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.blog-card:hover em svg { transform: translateX(4px); }
@media (min-width: 981px) {
  .blog-grid > .blog-card--first { grid-column: span 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
  .blog-card--first .blog-card__img { aspect-ratio: 4 / 3; }
  .blog-card--first strong { font-size: 2rem; }
}
.blog-grid--small { margin-top: 18px; }
@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.post-meta { display: flex; gap: 10px; align-items: center; font-size: .88rem; color: var(--muted); margin-bottom: 28px; }
.post-meta a { font-weight: 600; color: var(--ink); }

/* ---- Blog v2 ---- */
.post-cat { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #fff3c4; color: #7a5a00; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
a.post-cat:hover { background: var(--gold); color: var(--navy-900); }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .78rem; color: var(--muted); }
.blog-card__meta time { font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; }
.blog-card[hidden] { display: none; }
.blog-card--lead { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.blog-card--lead .blog-card__img { aspect-ratio: 16 / 11; }
.blog-card--lead strong { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.blog-card--lead .blog-card__text { font-size: 1.02rem; }
.blog-grid > .blog-card--first { grid-column: auto; display: flex; }
@media (max-width: 860px) { .blog-card--lead { grid-template-columns: 1fr; } }
.blog-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chips button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--ed-rule, #ddd); background: var(--white); font: 600 .88rem var(--font); color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.blog-chips button:hover { border-color: var(--ink); }
.blog-chips button.is-on { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.blog-search { flex: 0 1 300px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--ed-rule, #ddd); background: var(--white); font: inherit; }
.blog-empty { color: var(--muted); margin-top: 20px; }

/* article page */
.post-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 3px; pointer-events: none; }
.post-progress span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.post-head { padding: calc(var(--header-h) + 70px) 0 0; background: var(--stone-100); }
.post-head .breadcrumb { color: var(--muted); }
.post-head .breadcrumb a { color: var(--ed-gold, #a77d00); }
.post-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 18ch; margin: 18px 0 16px; }
.post-head__lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; margin: 0 0 40px; }
.post-head__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--ed-radius, 20px); margin-bottom: -60px; position: relative; }
.post-head + .post-section { padding-top: 110px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 56px; }
.post-layout.has-toc { grid-template-columns: minmax(0, 760px) 250px; }
.post-main .article { max-width: none; padding: 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .88rem; color: var(--muted); margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--ed-rule, #e5e5e5); }
.post-meta__back { font-weight: 600; color: var(--ink); }
.post-body { font-size: 1.08rem; line-height: 1.8; }
.post-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 1.6em 0 .5em; scroll-margin-top: 110px; }
.post-body h3 { font-size: 1.25rem; margin: 1.4em 0 .4em; scroll-margin-top: 110px; font-family: var(--font); font-weight: 700; }
.post-body > p:first-child { font-size: 1.2rem; color: var(--ink); }
.post-body blockquote { margin: 1.8em 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.45rem; line-height: 1.45; color: var(--ink); font-style: italic; }
.post-body blockquote p { margin: 0; }
.post-toc { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; padding: 20px 22px; border-radius: 18px; background: var(--white); }
.post-toc p { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.post-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: .9rem; line-height: 1.35; color: var(--text); }
.post-toc .lvl-h3 a { padding-left: 22px; font-size: .84rem; }
.post-toc a:hover { background: var(--stone-100); }
.post-toc a.is-on { background: #fff3c4; color: var(--ink); font-weight: 600; }
@media (max-width: 1100px) { .post-layout.has-toc { grid-template-columns: minmax(0, 760px); } .post-toc { display: none; } }
.post-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 40px 0; }
.post-gallery a { display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 1; cursor: zoom-in; }
.post-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post-gallery a:hover img { transform: scale(1.05); }
.post-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin: 48px 0 28px; padding: 24px 0; border-top: 1px solid var(--ed-rule, #e5e5e5); border-bottom: 1px solid var(--ed-rule, #e5e5e5); }
.post-author { display: flex; align-items: center; gap: 14px; }
.post-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.post-author img.is-logo { object-fit: contain; background: var(--white); padding: 8px; }
.post-author small, .post-share small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post-author strong { display: block; color: var(--ink); }
.post-author span { display: block; font-size: .86rem; color: var(--muted); max-width: 36ch; }
.post-share { display: flex; align-items: center; gap: 8px; }
.post-share small { margin-right: 6px; }
.post-share a, .post-share button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ed-rule, #ddd); background: var(--white); color: var(--ink); cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.post-share a:hover, .post-share button:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.post-share svg { width: 17px; height: 17px; }
.post-share button.is-done { background: #e3f5ea; border-color: #b9e3c9; color: #1e7a4a; }
.post-service { display: grid; gap: 6px; padding: 24px 28px; border-radius: 20px; background: var(--navy-900); color: rgba(255,255,255,.75); }
.post-service:hover { color: rgba(255,255,255,.75); }
.post-service small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.post-service strong { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--white); }
.post-service em { display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 600; color: var(--gold); margin-top: 6px; }
.post-service em svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.post-service:hover em svg { transform: translateX(4px); }
@media (max-width: 640px) { .post-gallery { grid-template-columns: 1fr 1fr; } .post-head__img { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Article content blocks (drag-and-drop builder)
   ========================================================================== */
.post-lead { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.5; color: var(--ink); margin: 0 0 1.4em; }
.post-body > .blk { margin: 2.2em 0; }
.post-body > .blk:first-child { margin-top: 0; }
.blk-text > :last-child { margin-bottom: 0; }
.blk figure, figure.blk { margin: 2.2em 0; }
.blk figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); }
.blk figcaption::before { content: "— "; }
/* widths: wide and full break out of the text column */
.blk--wide { margin-left: clamp(-120px, -8vw, 0px) !important; margin-right: clamp(-120px, -8vw, 0px) !important; }
.blk--full { width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
.blk--full img, .blk--full .ed-compare, .blk--full .post-video { border-radius: 0; }
.blk--full figcaption { padding: 0 20px; text-align: center; }
.post-layout.has-toc .blk--wide { margin-right: 0 !important; }
.blk-image img { width: 100%; border-radius: var(--ed-radius, 20px); }
.blk-image a, .blk-images2 a { display: block; cursor: zoom-in; overflow: hidden; border-radius: var(--ed-radius, 20px); }
.blk-images2 > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.blk-images2 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease-out); }
.blk-images2 a:hover img, .blk-image a:hover img { transform: scale(1.03); }
.blk-image img { transition: transform 1s var(--ease-out); }
.blk-imagetext { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.blk-imagetext.is-right > figure { order: 2; }
.blk-imagetext figure { margin: 0; }
.blk-imagetext img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ed-radius, 20px); }
.blk-imagetext > div > :last-child { margin-bottom: 0; }
.blk-compare .ed-compare { aspect-ratio: 16 / 10; }
.blk-gallery .post-gallery { margin: 0; }
.blk-quote { margin: 2.4em 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--gold); }
.post-body .blk-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.4; color: var(--ink); margin: 0; }
.blk-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; font-weight: 600; color: var(--muted); }
.blk-quote cite::before { content: "— "; }
.blk-note { display: flex; gap: 16px; padding: 22px 24px; border-radius: 18px; background: #eef3ff; }
.blk-note__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #3b5bdb; color: #fff; font-weight: 800; font-family: var(--font); }
.blk-note strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 4px; }
.blk-note p { margin: 0; }
.blk-note--tip { background: #fff7d6; } .blk-note--tip .blk-note__icon { background: var(--gold); color: var(--navy-900); }
.blk-note--warning { background: #fdecec; } .blk-note--warning .blk-note__icon { background: #c0392b; }
/* steps: a numbered timeline */
.blk-steps { list-style: none; padding: 0; position: relative; }
.blk-steps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(var(--gold), rgba(242,183,5,.15)); }
.blk-steps > li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 0 0 36px; }
.blk-steps > li:last-child { padding-bottom: 0; }
.blk-steps__num { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); color: var(--gold); font: 700 1rem var(--font); box-shadow: 0 0 0 6px var(--stone-50); }
.post-body .blk-steps h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin: 10px 0 10px; }
.blk-steps > li > div { padding: 0 0 4px; }
.blk-steps > li > div > :last-child { margin-bottom: 0; }
.blk-check { list-style: none; padding: 22px 24px; border-radius: 18px; background: var(--white); display: grid; gap: 12px; }
.blk-check li { position: relative; padding-left: 34px; }
.blk-check li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060d33' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.blk-button { margin: 2em 0; }
.blk-divider { border: 0; height: 1px; background: var(--ed-rule, #e5e5e5); margin: 3em 0; }
.post-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ed-radius, 20px); overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, #1f3196, var(--navy-900)); display: grid; place-items: center; }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-video__play { width: 82px; height: 82px; border-radius: 50%; border: 0; background: var(--gold); color: var(--navy-900); cursor: pointer; display: grid; place-items: center; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); transition: transform .3s var(--spring); }
.post-video__play:hover { transform: scale(1.08); }
.post-video__play svg { width: 34px; height: 34px; margin-left: 4px; }
.post-video__note { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: .8rem; color: rgba(255,255,255,.7); }
@media (max-width: 760px) {
  .blk--wide { margin-left: 0 !important; margin-right: 0 !important; }
  .blk-imagetext { grid-template-columns: 1fr; } .blk-imagetext.is-right > figure { order: 0; }
  .blk-images2 > div { grid-template-columns: 1fr; }
  .blk-steps > li { grid-template-columns: 44px 1fr; gap: 16px; } .blk-steps__num { width: 44px; height: 44px; font-size: .9rem; } .blk-steps::before { left: 21px; }
}

/* ---- Mobile hero, refined ---- */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  /* smooth fade from the video into navy (no visible edge) */
  .build__shade { background: linear-gradient(180deg, rgba(6,13,51,.65) 0%, rgba(6,13,51,0) 18%, rgba(6,13,51,0) 38%, rgba(6,13,51,.55) 47%, rgba(6,13,51,1) 54%); }
  /* stage dots: a small glass pill at the bottom-right of the video */
  .build__rail {
    display: flex; flex-direction: row; gap: 8px; top: calc(56% - 46px); right: 16px; transform: none; padding: 8px 10px; border-radius: 999px;
    font-size: 0; letter-spacing: 0;
  }
  .build__rail li { font-size: 0; gap: 0; }
  .build__rail li::after { width: 8px; height: 8px; border-width: 2px; }
  .build__rail li.is-active::after { transform: scale(1.25); }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__poster { top: calc(50% - 90vw); }
  .build__shade { background: linear-gradient(180deg, rgba(6,13,51,.65) 0%, rgba(6,13,51,0) 16%, rgba(6,13,51,0) 32%, rgba(6,13,51,.55) 41%, rgba(6,13,51,1) 48%); }
  .build__rail { top: calc(50% - 46px); }
  .build__panel { bottom: 26px; }
  .build__step { margin-bottom: 12px; }
  .build__title { font-size: 1.85rem; margin-bottom: 10px; }
  .build__desc { font-size: .95rem; }
  .build__actions { margin-top: 18px; }
}

/* Tall phones (e.g. Pixel 9 Pro): the video band grows to fill the top half, no empty navy above it (mirrors hero.js) */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__poster { width: max(160%, 99.6svh); left: calc(50% - max(83.2vw, 51.8svh)); top: calc(56% - max(90vw, 56svh)); }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__poster { width: max(160%, 88.9svh); left: calc(50% - max(83.2vw, 46.2svh)); top: calc(50% - max(90vw, 50svh)); }
}

/* nothing floats above the page-change sheet: contact button, cookie card, reading progress */
.pt-leaving .quick-contact, .pt-covered .quick-contact,
.pt-leaving .cookie, .pt-covered .cookie, .pt-leaving .post-progress, .pt-covered .post-progress { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s; }

/* ---- Mobile hero: vertical progress (reads as "scroll", not "swipe") + scroll hint ---- */
.build__hint span { display: block; }
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__rail {
    flex-direction: column; gap: 10px; top: 28%; right: 12px; transform: translateY(-50%);
    padding: 10px 7px; border-radius: 999px;
  }
  .build__rail::before { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 2px; margin-left: -1px; background: rgba(255,255,255,.25); border-radius: 2px; }
  .build__rail li { position: relative; }
  .build__hint {
    display: flex !important; flex-direction: row; gap: 8px; align-items: center;
    left: 50%; bottom: auto; top: calc(56% - 54px); transform: translateX(-50%);
    padding: 8px 14px 8px 10px; border-radius: 999px; white-space: nowrap;
    background: rgba(6,13,51,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    color: var(--white); font-size: .74rem; font-weight: 700; letter-spacing: .1em;
    transition: opacity .4s;
  }
  .build__hint i { width: 18px; height: 18px; border: 0; border-radius: 0; animation: hintBounce 1.4s ease-in-out infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b705' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .build__hint i::after { display: none; }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__rail { top: 25%; }
  .build__hint { top: calc(50% - 50px); }
}
@keyframes hintBounce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* ---- Mobile hero v3: no dots; an animated finger swiping up shows "scroll" ---- */
.build__gesture { display: none; }
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__rail { display: none !important; }
  .build__hint {
    display: flex !important; flex-direction: column; align-items: center; gap: 6px;
    left: auto; right: 18px; top: calc(56% - 150px); bottom: auto; transform: none;
    padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: rgba(255,255,255,.92); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-shadow: 0 1px 6px rgba(6,13,51,.8);
  }
  /* the track the finger travels along */
  .build__hint i {
    position: relative; width: 4px; height: 70px; border-radius: 4px; animation: none; background: rgba(255,255,255,.25);
    box-shadow: 0 0 0 1px rgba(6,13,51,.15);
  }
  .build__hint i::after {
    display: block !important; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; margin: 0; width: auto; top: auto;
    border-radius: 4px; background: linear-gradient(to top, rgba(242,183,5,0), var(--gold));
    transform-origin: bottom; animation: swipeTrail 1.8s cubic-bezier(.5, 0, .3, 1) infinite;
  }
  .build__gesture {
    display: block; position: absolute; top: 46px; left: 50%; width: 38px; height: 38px; margin-left: -12px;
    filter: drop-shadow(0 4px 10px rgba(6,13,51,.55)); animation: swipeFinger 1.8s cubic-bezier(.5, 0, .3, 1) infinite;
  }
  .build__gesture svg { width: 100%; height: 100%; display: block; }
  .build__hint span { margin-top: 30px; writing-mode: horizontal-tb; }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__hint { top: calc(50% - 140px); }
}
@keyframes swipeFinger {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: 1; transform: translateY(0) scale(.92); }
  60% { transform: translateY(-58px) scale(.92); opacity: 1; }
  75%, 100% { transform: translateY(-62px) scale(1); opacity: 0; }
}
@keyframes swipeTrail {
  0%, 12% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  80%, 100% { transform: scaleY(1); opacity: 0; }
}
/* swipe gesture: larger and centred */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__hint { left: 50%; right: auto; transform: translateX(-50%); top: calc(56% - 190px); font-size: .7rem; }
  .build__hint i { width: 5px; height: 96px; }
  .build__gesture { width: 54px; height: 54px; top: 62px; margin-left: -17px; }
  .build__hint span { margin-top: 40px; padding: 6px 12px; border-radius: 999px; background: rgba(6,13,51,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__hint { top: calc(50% - 175px); }
}
@keyframes swipeFinger {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: 1; transform: translateY(0) scale(.9); }
  60% { transform: translateY(-82px) scale(.9); opacity: 1; }
  75%, 100% { transform: translateY(-88px) scale(1); opacity: 0; }
}

/* ---- Mobile hero v4: like the desktop scroll icon, but a phone with content scrolling inside ---- */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__gesture { display: none !important; }
  .build__hint {
    left: 50%; right: auto; transform: translateX(-50%); top: calc(56% - 112px); gap: 10px;
    color: rgba(255,255,255,.85); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-shadow: 0 1px 8px rgba(6,13,51,.7);
  }
  .build__hint span { margin-top: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* phone outline */
  .build__hint i {
    position: relative; width: 24px; height: 40px; border: 2px solid currentColor; border-radius: 6px; background: none; box-shadow: none; overflow: hidden;
  }
  .build__hint i::before {   /* little speaker / notch */
    content: ""; position: absolute; top: 3px; left: 50%; width: 6px; height: 2px; margin-left: -3px; border-radius: 2px; background: currentColor; opacity: .8;
  }
  .build__hint i::after {    /* page content sliding up inside the screen */
    display: block !important; content: ""; position: absolute; left: 4px; right: 4px; top: 8px; bottom: auto; width: auto; height: 46px; margin: 0;
    border-radius: 1px; transform-origin: center; opacity: 1;
    background:
      linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 4px no-repeat,
      linear-gradient(currentColor, currentColor) 0 8px / 70% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 13px / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 18px / 55% 2px no-repeat,
      linear-gradient(var(--gold), var(--gold)) 0 25px / 100% 4px no-repeat,
      linear-gradient(currentColor, currentColor) 0 33px / 80% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 38px / 60% 2px no-repeat;
    animation: phoneScroll 2s cubic-bezier(.6, 0, .3, 1) infinite;
  }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__hint { top: calc(50% - 104px); }
}
@keyframes phoneScroll {
  0%, 15% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(-22px); opacity: 1; }
  85% { transform: translateY(-22px); opacity: 0; }
  86% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__hint i { width: 30px; height: 50px; border-width: 2px; border-radius: 8px; }
  .build__hint i::before { top: 4px; width: 8px; }
  .build__hint i::after {
    left: 5px; right: 5px; top: 11px; height: 60px;
    background:
      linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 7px no-repeat,
      linear-gradient(currentColor, currentColor) 0 11px / 75% 3px no-repeat,
      linear-gradient(currentColor, currentColor) 0 17px / 100% 3px no-repeat,
      linear-gradient(var(--gold), var(--gold)) 0 26px / 100% 7px no-repeat,
      linear-gradient(currentColor, currentColor) 0 37px / 85% 3px no-repeat,
      linear-gradient(currentColor, currentColor) 0 43px / 60% 3px no-repeat;
  }
}
@keyframes phoneScroll {
  0%, 15% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(-26px); opacity: 1; }
  85% { transform: translateY(-26px); opacity: 0; }
  86% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
/* ---- Mobile hero v5: phone + finger swiping on its screen, below the video (in the navy fade) ---- */
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) {
  .build__hint { flex-direction: row; gap: 16px; top: calc(54% - 60px); }
  .build__hint i { flex: none; }
  .build__gesture {
    display: block !important; position: absolute; left: 12px; top: 26px; width: 34px; height: 34px; margin: 0;
    filter: drop-shadow(0 3px 6px rgba(6,13,51,.7)); animation: phoneFinger 2s cubic-bezier(.6, 0, .3, 1) infinite;
  }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) {
  .build__hint { top: calc(48% - 58px); }
}
/* finger touches the screen, drags up (page scrolls down), lifts off — in step with the screen content */
@keyframes phoneFinger {
  0% { transform: translateY(0) scale(1.15); opacity: 0; }
  12% { transform: translateY(0) scale(1); opacity: 1; }
  70% { transform: translateY(-24px) scale(1); opacity: 1; }
  85%, 100% { transform: translateY(-26px) scale(1.15); opacity: 0; }
}
@media (max-width: 768px) and (max-aspect-ratio: 1/1), (max-aspect-ratio: 4/5) { .build__hint { top: calc(54% - 14px); } }
@media (max-width: 768px) and (max-aspect-ratio: 1/1) and (max-height: 719px), (max-aspect-ratio: 4/5) and (max-height: 719px) { .build__hint { top: calc(48% - 24px); } }

/* ---- 404: page not found ---- */
.nf-hero { min-height: 100vh; min-height: 100svh; align-items: center; padding: calc(var(--header-h) + 60px) 0 70px; }
.nf-hero h1 { max-width: 16ch; }
.nf-hero p:not(.nf-code) { max-width: 560px; }
.nf-code { margin: 6px 0 -6px; font-family: var(--serif); font-size: clamp(5rem, 16vw, 11rem); line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(242,183,5,.85); }
.nf-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); font-size: .95rem; }
.nf-links span { color: rgba(255,255,255,.6); }
.nf-links a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(242,183,5,.6); }
.nf-links a:hover { color: var(--gold); }
.nf-hero .eyebrow { color: #fff; }
.nf-hero .eyebrow::before { background: var(--gold); }
.page-hero p.nf-code { margin: 14px 0 0; max-width: none; font-family: var(--serif); font-size: clamp(5rem, 16vw, 11rem); line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(242,183,5,.9); }
.nf-hero { border-radius: 0; }
.nf-hero { padding: calc(var(--header-h) + 36px) 0 48px; }
.page-hero p.nf-code { font-size: clamp(4.5rem, 12vw, 8.5rem); margin-top: 8px; }
.nf-actions { margin-top: 24px; } .nf-links { margin-top: 26px; padding-top: 18px; }