/* ============================================================================
   HST Architects — Prototype A "Editorial Light"
   Design system: brand-book palette, Montserrat + Cormorant, glass surfaces.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* brand palette (brand book) */
  --navy:        #182331;
  --ivory:       #F7F3EA;
  --copper:      #B66B55;
  --taupe:       #CFC6B8;
  --charcoal:    #2B2B2B;
  --offwhite:    #FFFDF8;

  /* semantic — light theme */
  --bg:            #F1EDE4;
  --bg-alt:        var(--ivory);
  --surface:       var(--offwhite);
  --surface-2:     #FFFFFF;
  --ink:           var(--navy);
  --ink-2:         var(--charcoal);
  --ink-muted:     #5A626C;
  --ink-faint:     #646C77;
  --accent:        #9C4F3A;
  --accent-ink:    #FFFFFF;
  --accent-soft:   rgba(156,79,58,.11);
  --line:          rgba(24,35,49,.14);
  /* plan-drawing texture: warm grey on the light theme */
  --plan-op:       .30;
  --line-strong:   #767E88;

  /* glass */
  --glass-bg:       rgba(255,253,248,.62);
  --glass-bg-hover: rgba(255,253,248,.72);
  --glass-bg-2:    rgba(255,253,248,.40);
  --glass-brd:     rgba(255,255,255,.55);
  --glass-shadow:  0 1px 2px rgba(24,35,49,.04), 0 12px 32px -12px rgba(24,35,49,.16);
  --glass-blur:    blur(20px) saturate(150%);

  /* elevation */
  --sh-sm: 0 1px 2px rgba(24,35,49,.05), 0 2px 8px -4px rgba(24,35,49,.10);
  --sh-md: 0 2px 4px rgba(24,35,49,.04), 0 14px 34px -14px rgba(24,35,49,.20);
  --sh-lg: 0 4px 8px rgba(24,35,49,.05), 0 32px 64px -24px rgba(24,35,49,.28);

  /* type */
  --font-sans:   "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:  "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;

  /* radius + spacing */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);
  --maxw: 1320px;
  --sec-y: clamp(3.4rem, 6.4vw, 6.4rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            #0E1620;
  --bg-alt:        #121C27;
  --surface:       #16212E;
  --surface-2:     #1B2836;
  --ink:           #F2EEE5;
  --ink-2:         #DCD7CD;
  --ink-muted:     #A8B2BE;
  --ink-faint:     #8B95A1;
  --accent:        #E0937B;
  --accent-ink:    #121A24;
  --accent-soft:   rgba(224,147,123,.16);
  --line:          rgba(242,238,229,.12);
  --line-strong:   #79838F;
  /* white ink on a dark ground reads brighter, so it needs less */
  --plan-op:     .22;

  --glass-bg:       rgba(28,40,54,.58);
  --glass-bg-hover: rgba(28,40,54,.68);
  --glass-bg-2:    rgba(28,40,54,.38);
  --glass-brd:     rgba(242,238,229,.13);
  --glass-shadow:  0 1px 2px rgba(0,0,0,.30), 0 16px 40px -14px rgba(0,0,0,.60);

  --sh-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 10px -4px rgba(0,0,0,.45);
  --sh-md: 0 2px 6px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.65);
  --sh-lg: 0 6px 12px rgba(0,0,0,.35), 0 40px 80px -28px rgba(0,0,0,.75);

  color-scheme: dark;
}

/* ---------- 2. Reset / base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: clamp(88px, 12vh, 120px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
/* let <picture> vanish from layout so sizing rules land on the <img> itself */
picture { display: contents; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
p { margin: 0; }
/* keeps single-word last lines out of body copy without changing block height */
p, li, .small, .step__d, .faq__a > div { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--accent); color: #fff; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--bg); padding: .7rem 1.1rem;
  border-radius: var(--r-sm); font-weight: 600; font-size: .85rem;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 3. Typography ------------------------------------------------ */
.display   { font-size: clamp(2.6rem, 7.4vw, 6.2rem); line-height: .96; letter-spacing: -.035em; font-weight: 700; }
.h1        { font-size: clamp(2.15rem, 5.2vw, 4.1rem); line-height: 1.03; letter-spacing: -.03em; }
.h2        { font-size: clamp(1.8rem, 3.9vw, 3.05rem); line-height: 1.07; letter-spacing: -.028em; }
.h3        { font-size: clamp(1.28rem, 2.1vw, 1.75rem); line-height: 1.18; letter-spacing: -.02em; }
.h4        { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.28; letter-spacing: -.012em; }

/* the reference's signature two-tone headline */
.split-head { color: var(--ink); font-weight: 700; }
.split-head .lite { color: #7E8792; font-weight: 500; }
[data-theme="dark"] .split-head .lite { color: #7C8794; }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.62; color: var(--ink-muted); font-weight: 400; text-wrap: pretty; }
.small { font-size: .855rem; line-height: 1.55; }
.muted { color: var(--ink-muted); }

.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.28; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  font-style: italic;
}

/* eyebrow: copper dot + spaced caps, straight from the reference */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .715rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.eyebrow.on-dark { color: rgba(255,255,255,.82); }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto; position: relative; z-index: 1;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
.wrap-wide { max-width: 1560px; }
.wrap-narrow { max-width: 860px; }
.section { padding-block: var(--sec-y); position: relative; }
.section-sm { padding-block: clamp(2.2rem, 4vw, 3.6rem); position: relative; }
.stack > * + * { margin-top: var(--gap, 1rem); }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(1.7rem, 3vw, 2.6rem);
}
.sec-head__text { max-width: 46ch; }
.sec-head .lede { margin-top: 1.05rem; }
.sec-head--split { align-items: start; }
.sec-head__aside { max-width: 42ch; }
.tick-list { display: grid; gap: .7rem; }
.tick-list li { display: flex; gap: .7rem; color: var(--ink-muted); line-height: 1.6; font-size: .96rem; }
.tick-list li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .62rem;
  border-radius: 50%; background: var(--accent);
}
@media (max-width: 900px) { .sec-head__aside { max-width: none; } }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--bg);
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: .78rem 1rem .78rem 1.35rem;
  font-size: .88rem; font-weight: 600; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); }
.btn--ghost  { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light  { --btn-bg: var(--surface-2); --btn-fg: var(--ink); }
.btn--lg { padding: .95rem 1.15rem .95rem 1.6rem; font-size: .95rem; }

/* the circular ↗ badge that anchors the reference design */
.btn .arrow, .arrow-badge {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  transition: transform .38s var(--ease-out), background-color .25s var(--ease);
}
.btn .arrow svg, .arrow-badge svg { width: 13px; height: 13px; }
.btn:hover .arrow { transform: rotate(45deg); }
.btn--accent .arrow { background: rgba(255,255,255,.22); color: var(--btn-fg); }

.arrow-badge--lg { width: 46px; height: 46px; }
.arrow-badge--lg svg { width: 17px; height: 17px; }
.arrow-badge--ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .42rem;
  font-size: .845rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow svg { width: 11px; height: 11px; transition: transform .3s var(--ease-out); }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); gap: .62rem; }
.link-arrow:hover svg { transform: translate(2px,-2px); }

/* ---------- 6. Glass ----------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
  position: relative;
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,0) 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-theme="dark"] .glass::after {
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%);
}
.glass-soft { background: var(--glass-bg-2); }

/* ---------- 7. Header / nav ---------------------------------------------- */
.header {
  position: fixed; inset: 14px 0 auto; z-index: 100;
  transition: transform .45s var(--ease), padding .35s var(--ease);
}
.header.is-hidden { transform: translateY(calc(-100% - 20px)); }
.header__bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem .55rem .55rem 1.35rem;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.header__bar:hover, .header__bar:focus-within { background: var(--glass-bg-hover); }
.brand { display: flex; align-items: center; flex: none; margin-right: auto; }
.brand img, .brand svg { height: 40px; width: auto; }

.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
  position: relative; padding: .55rem .82rem; border-radius: var(--r-pill);
  font-size: .855rem; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; translate: -50% 0;
  width: 15px; height: 2px; border-radius: 2px; background: var(--accent);
}

.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0;
  min-width: 268px; padding: .5rem; border-radius: var(--r-md);
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel a {
  display: block; padding: .62rem .8rem; border-radius: var(--r-sm);
  font-size: .855rem; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__panel a small { display: block; font-size: .74rem; color: var(--ink-faint); font-weight: 400; margin-top: 1px; }
.nav__panel a:hover { background: var(--accent-soft); color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: .45rem; flex: none; }

.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.icon-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.burger { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 130;
  background: var(--bg); padding: 1.1rem var(--gutter) 2rem;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto; overscroll-behavior: contain;
  /* inset:0 resolves against the large viewport, so on a phone the foot of the
     drawer hides behind the browser chrome. dvh tracks the visible height. */
  height: 100vh; height: 100dvh;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.drawer__nav { display: flex; flex-direction: column; gap: .15rem; }
.drawer__nav > a {
  font-size: 1.55rem; font-weight: 600; letter-spacing: -.025em; color: var(--ink);
  padding: .6rem 0; border-bottom: 1px solid var(--line);
}
.drawer__nav .sub { padding: .35rem 0 .8rem 1rem; display: flex; flex-direction: column; gap: .55rem; }
.drawer__nav .sub a { font-size: .95rem; color: var(--ink-muted); font-weight: 500; }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .8rem; }

/* ---------- 8. Hero ------------------------------------------------------ */
.hero { position: relative; padding-top: clamp(84px, 8vw, 104px); }
.hero__frame {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  min-height: clamp(520px, 84vh, 860px);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8,13,20,.82) 0%, rgba(8,13,20,.52) 34%, rgba(8,13,20,.12) 62%, rgba(8,13,20,0) 82%),
    linear-gradient(to top, rgba(8,13,20,.93) 0%, rgba(8,13,20,.78) 20%, rgba(8,13,20,.46) 40%, rgba(8,13,20,.10) 66%, rgba(8,13,20,.32) 100%);
}

/* oversized wordmark bleeding behind the content, as in the reference */
.hero__wordmark {
  position: absolute; left: 50%; translate: -50% 0; top: -.14em;
  width: 130%; z-index: -1; pointer-events: none;
  font-size: clamp(7rem, 25vw, 24rem); font-weight: 700; letter-spacing: -.055em;
  text-align: center; line-height: .78; white-space: nowrap;
  color: rgba(255,255,255,.17);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 96%);
}

.hero__body { padding: clamp(1.6rem, 3.4vw, 3rem) clamp(1.6rem, 3.6vw, 3.2rem) clamp(3.2rem, 5vw, 4.4rem); color: #fff; text-shadow: 0 1px 28px rgba(6,10,16,.42); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: clamp(1.4rem, 3.2vw, 3rem); align-items: end;
}
.hero h1 { color: #fff; }
.hero h1 .lite { color: rgba(255,255,255,.76); font-weight: 500; }
.hero__sub { color: rgba(255,255,255,.86); font-size: clamp(.95rem, 1.2vw, 1.04rem); line-height: 1.65; max-width: 44ch; text-wrap: pretty; }
.hero__sub strong { color: #fff; font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.hero .btn--light { --btn-bg: #fff; --btn-fg: var(--navy); }
.hero .btn--outline { --btn-bg: rgba(255,255,255,.10); --btn-fg: #fff; border-color: rgba(255,255,255,.30); }

/* floating trust pill (reference: Trustpilot chip) */
.trust-chip {
  position: absolute; top: clamp(1.5rem, 4vw, 3.4rem); left: clamp(1.5rem, 4vw, 3.4rem);
  display: inline-flex; align-items: center; gap: .8rem;
  padding: .5rem 1.05rem .5rem .55rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--sh-md);
  color: var(--navy);
}
.trust-chip__avatars { display: flex; }
.trust-chip__avatars span {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
  margin-left: -9px; background-size: cover; background-position: center;
  display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: #fff;
}
.trust-chip__avatars span:first-child { margin-left: 0; }
.trust-chip__txt { line-height: 1.25; }
.trust-chip__txt b { display: block; font-size: .78rem; font-weight: 700; }
.trust-chip__txt small { font-size: .705rem; color: #5A626C; }

/* stats strip that overlaps the hero foot */
/* Sits over the foot of the hero image: narrower than the frame, frosted, so
   the photograph still reads behind it. */
.hero-stats {
  position: relative; z-index: 3;
  width: min(100%, 980px); margin: -58px auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow);
}
.hero-stats__item {
  background: transparent; padding: clamp(.95rem,1.9vw,1.45rem) clamp(.9rem,1.7vw,1.35rem);
  border-right: 1px solid var(--line);
}
.hero-stats__item:last-child { border-right: 0; }
.hero-stats__v { font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.hero-stats__l { font-size: .69rem; color: var(--ink-muted); margin-top: .4rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* ---------- 9. Cards ----------------------------------------------------- */
/* The bottom-right corner is notched out and the round link button sits in the
   cut, so the button reads as part of the card silhouette rather than on top of
   it. Cards stretch to a common height so the location line always sits on the
   same baseline across a row. */
.card {
  --go: 54px;              /* button diameter */
  --gap: 9px;              /* clearance between button and card edge */
  --notch: calc(var(--go) + var(--gap) * 2);
  position: relative; border-radius: var(--r-lg);
  height: 100%;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }

/* The masked shell. The surface paint has to live HERE, not on .card: a mask
   cannot remove paint from an ancestor, so a background on the unmasked parent
   would simply fill the cut back in. The outline is a masked pseudo-element
   rather than a border, because a border would be sliced by the same mask. */
.card__inner {
  display: flex; flex-direction: column; height: 100%;
  position: relative;
  background: var(--surface);
  border-radius: inherit; overflow: hidden;
  /* a single length is only valid for an explicit circle */
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 100%, transparent 98.5%, #000 99.5%);
  mask: radial-gradient(circle var(--notch) at 100% 100%, transparent 98.5%, #000 99.5%);
}
/* hairline that follows the cut instead of a border that the mask would slice */
.card__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border: 1px solid var(--line); border-radius: inherit;
  transition: border-color .3s var(--ease);
}
.card:hover .card__inner::after { border-color: transparent; }
/* the title carries the real link; its overlay makes the whole card clickable
   while keeping the accessible name to just the project title */
.card__link { color: inherit; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.card__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.card__go {
  position: absolute; right: var(--gap); bottom: var(--gap); z-index: 3;
  width: var(--go); height: var(--go); border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); border: 0;
  display: grid; place-items: center;
  transition: transform .4s var(--ease-out), background-color .25s var(--ease);
}
.card__go svg { width: 16px; height: 16px; }
.card:hover .card__go { transform: rotate(45deg); }

.card__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--bg-alt); flex: none; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.055); }
/* the photograph dissolves into the card body instead of ending on a hard edge */
.card__media::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 26%;
  background: linear-gradient(to bottom, transparent, var(--surface) 92%);
  pointer-events: none;
}
.card__body {
  padding: clamp(.9rem, 1.8vw, 1.3rem) clamp(1.1rem, 2vw, 1.6rem) clamp(1.05rem, 2vw, 1.45rem);
  display: flex; flex-direction: column; flex: 1; gap: .5rem;
}
.card__body .h3 { margin: 0; }
.card__blurb { margin: 0; text-wrap: pretty; }
/* pushes the location to the bottom so every card in a row lines up */
.card__foot { margin-top: auto; padding-top: .9rem; padding-right: var(--notch); }
.card__meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .74rem; color: var(--ink-faint); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
.card__meta span + span::before { content: "·"; margin-right: .5rem; color: var(--line-strong); }

/* image card with the label floated on glass at the bottom (reference pattern) */
.tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3/4; display: block; isolation: isolate;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,16,24,.78), rgba(10,16,24,.10) 52%, transparent 78%);
}
.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1rem,2vw,1.5rem); color: #fff;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.tile__label h3 { color: #fff; font-size: clamp(1rem,1.5vw,1.22rem); letter-spacing: -.015em; }
.tile__label p { font-size: .775rem; color: rgba(255,255,255,.74); margin-top: .25rem; }
.tile .arrow-badge {
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.28); color: #fff;
}
.tile:hover .arrow-badge { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: rotate(45deg); }
.tile--wide { aspect-ratio: 16/11; }
/* the related-projects row: the image melts into the page instead of stopping
   on a hard edge */
.tile--fade { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tile--fade::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--bg) 94%);
  pointer-events: none;
}
.tile--fade::after { background: linear-gradient(to top, rgba(10,16,24,.34), transparent 46%); }
.tile--fade .tile__label { padding-bottom: clamp(1.1rem,2vw,1.6rem); }
.tile--fade .tile__label h3 { color: var(--ink); }
.tile--fade .tile__label p { color: var(--ink-muted); }
.tile--fade .arrow-badge { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tile--tall { aspect-ratio: 3/4.4; }

/* service card with a numeral and a capability list */
.svc {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.svc__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.svc:hover .svc__media img { transform: scale(1.06); }
.svc__num {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  padding: .3rem .68rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--navy);
}
.svc__body { padding: clamp(1.2rem,2.2vw,1.75rem); display: flex; flex-direction: column; flex: 1; }
.svc__list { margin: 1.05rem 0 1.4rem; display: grid; gap: .5rem; }
.svc__list li { display: flex; gap: .55rem; font-size: .855rem; color: var(--ink-muted); line-height: 1.45; }
.svc__list li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  flex: none; margin-top: .55rem;
}
.svc__body .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- 10. Marquee / logo strip ------------------------------------- */
.strip { border-block: 1px solid var(--line); padding-block: clamp(1.5rem,3vw,2.4rem); overflow: hidden; }
.strip__label { text-align: center; font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.3rem; letter-spacing: .04em; }
.strip__label b { color: var(--ink); font-weight: 600; }
.marquee { display: flex; gap: clamp(2rem,5vw,4.5rem); width: max-content; animation: slide 42s linear infinite; }
.marquee:hover, .marquee:focus-within { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex; align-items: center; gap: .55rem;
  font-size: clamp(.95rem,1.5vw,1.15rem); font-weight: 600; letter-spacing: -.01em;
  color: var(--ink-faint); white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee__item:hover { color: var(--ink); }
.marquee__item svg { width: 18px; height: 18px; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ---------- 11. Split feature -------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.6rem,4.5vw,4.5rem); align-items: stretch; }
.split--reverse .split__media { order: 2; }
.split__media { border-radius: var(--r-xl); overflow: hidden; position: relative; display: flex; min-height: clamp(300px, 40vw, 560px); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { max-width: 52ch; align-self: center; }
@media (max-width: 900px) { .split__media { min-height: 260px; } }

/* inline image pills embedded inside a headline — the reference's signature move */
.inline-pill {
  display: inline-block; vertical-align: middle;
  width: clamp(66px, 9vw, 124px); aspect-ratio: 16/8.6;
  border-radius: var(--r-pill); overflow: hidden; margin: 0 .16em;
  box-shadow: var(--sh-sm); translate: 0 -.06em;
}
.inline-pill img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 12. Process -------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 78px minmax(0,1fr) minmax(0,1.25fr);
  gap: clamp(1rem,3vw,2.6rem); align-items: start;
  padding-block: clamp(1.4rem,2.6vw,2.2rem);
  border-top: 1px solid var(--line);
  transition: background-color .35s var(--ease);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step:hover { background: var(--accent-soft); }
.step__n { font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .06em; padding-top: .28rem; }
.step__t { font-size: clamp(1.08rem,1.7vw,1.35rem); font-weight: 600; color: var(--ink); letter-spacing: -.018em; line-height: 1.25; }
.step__d { color: var(--ink-muted); font-size: .93rem; line-height: 1.6; }

/* ---------- 13. Accordion (FAQ) ------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem,2.1vw,1.6rem) 0; text-align: left;
  font-size: clamp(1rem,1.5vw,1.15rem); font-weight: 600; color: var(--ink);
  letter-spacing: -.015em; line-height: 1.35;
  transition: color .25s var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  position: relative; margin-top: 2px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.faq__icon::before { width: 11px; height: 1.6px; }
.faq__icon::after  { width: 1.6px; height: 11px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.faq__item.is-open .faq__icon { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { opacity: 0; }
.faq__a { overflow: hidden; height: 0; visibility: hidden;
          transition: height .38s var(--ease), visibility 0s linear .38s; }
.faq__item.is-open .faq__a { visibility: visible; transition: height .38s var(--ease), visibility 0s; }
.faq__a > div { padding-bottom: clamp(1.1rem,2.1vw,1.6rem); color: var(--ink-muted); font-size: .95rem; line-height: 1.68; max-width: 74ch; }

/* ---------- 14. Testimonials --------------------------------------------- */
.quotes { display: grid; gap: clamp(1rem,2vw,1.5rem); grid-template-columns: repeat(3, minmax(0,1fr)); }
.quote-card { padding: clamp(1.4rem,2.6vw,2.1rem); border-radius: var(--r-lg); }
.quote-card__mark { font-family: var(--font-serif); font-size: 3.2rem; line-height: .6; color: var(--accent); opacity: .5; }
.quote-card p { margin-top: 1rem; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.quote-card footer { margin-top: 1.35rem; padding-top: 1.05rem; border-top: 1px solid var(--line); }
.quote-card b { display: block; font-size: .88rem; color: var(--ink); font-weight: 600; }
.quote-card small { font-size: .78rem; color: var(--ink-faint); }

/* ---------- 15. CTA band -------------------------------------------------- */
.cta {
  position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  padding: clamp(2.6rem,6vw,5.5rem) clamp(1.5rem,4vw,4rem); color: #fff;
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(12,20,30,.90) 8%, rgba(12,20,30,.62) 52%, rgba(12,20,30,.30) 100%);
}
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: rgba(255,255,255,.80); margin-top: 1.1rem; max-width: 48ch; font-size: 1.02rem; line-height: 1.6; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.cta .btn--light { --btn-bg: #fff; --btn-fg: var(--navy); }
.cta .btn--outline { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.32); }

/* ---------- 16. Forms ---------------------------------------------------- */
.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: .42rem; }
.field label { font-size: .79rem; font-weight: 600; color: var(--ink); letter-spacing: .015em; }
.field label .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: .82rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  /* 16px exactly. Below it, iOS Safari zooms the page in when the field takes
     focus and never zooms back out, which strands the visitor mid-form. */
  font-size: 1rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field--error input, .field--error textarea, .field--error select { border-color: #A8362B; }
.field__err { font-size: .76rem; color: #A8362B; display: none; }
.field--error .field__err { display: block; }
.form__row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.05rem; }
.form__note { font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }
.form__status:empty { display: none; }
.form__status { padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .88rem; font-weight: 500; }
.form__status.is-ok  { background: rgba(39,104,72,.12); color: #276848; border: 1px solid rgba(39,104,72,.34); }
.form__status.is-err { background: rgba(168,54,43,.10); color: #A8362B; border: 1px solid rgba(168,54,43,.30); }
[data-theme="dark"] .form__status.is-ok  { color: #6FCB9B; background: rgba(111,203,155,.10); border-color: rgba(111,203,155,.28); }
[data-theme="dark"] .form__status.is-err { color: #F08A7C; background: rgba(240,138,124,.10); border-color: rgba(240,138,124,.28); }
[data-theme="dark"] .field__err          { color: #F08A7C; }
[data-theme="dark"] .field--error input,
[data-theme="dark"] .field--error textarea,
[data-theme="dark"] .field--error select { border-color: #F08A7C; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-panel { padding: clamp(1.5rem,3vw,2.6rem); border-radius: var(--r-xl); }
.contact-item { display: flex; gap: .95rem; padding-block: 1.05rem; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 0; }
.contact-item__ic {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.contact-item__ic svg { width: 17px; height: 17px; }
.contact-item b { display: block; font-size: .73rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 600; }
.contact-item a, .contact-item span { font-size: .98rem; color: var(--ink); font-weight: 500; }
.contact-item a:hover { color: var(--accent); }

/* ---------- 17. Footer --------------------------------------------------- */
.footer { background: var(--navy); color: rgba(247,243,234,.72); padding-top: clamp(3rem,6vw,5.5rem); margin-top: clamp(3rem,6vw,6rem); }
[data-theme="dark"] .footer { background: #0A121B; }
.footer h3, .footer h4 { color: var(--ivory); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.15rem; }
.footer a { color: rgba(247,243,234,.72); transition: color .25s var(--ease); }
.footer a:hover { color: var(--copper); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.35fr; gap: clamp(1.6rem,4vw,3.5rem); padding-bottom: clamp(2.4rem,5vw,4rem); }
.footer__brand img { height: 52px; margin-bottom: 1.35rem; }
.footer__brand p { font-size: .9rem; line-height: 1.65; max-width: 38ch; }
.footer__links { display: grid; gap: .68rem; font-size: .9rem; }
.footer__bottom {
  border-top: 1px solid rgba(247,243,234,.14); padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .8rem; color: rgba(247,243,234,.5);
}
.footer__social { display: flex; gap: .5rem; }
.footer__social a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(247,243,234,.18);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.footer__social a:hover { background: var(--copper); border-color: var(--copper); color: #fff; }
.footer__social svg { width: 16px; height: 16px; }

/* ---------- 18. Page header (inner pages) -------------------------------- */
.page-head { padding-top: clamp(7.5rem, 12vw, 10.5rem); padding-bottom: clamp(2rem,4vw,3.5rem); }
.crumbs { display: flex; flex-wrap: wrap; gap: .42rem; font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: .42rem; color: var(--line-strong); }
.crumbs li { display: flex; }
.crumbs [aria-current] { color: var(--ink-2); }

.page-head__grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); align-items: end; }

/* ---------- 19. Filters + gallery ---------------------------------------- */
/* Segmented capsule. The active state is one indicator that slides between
   segments, so the switch reads as a single moving piece of glass rather than
   eight buttons changing colour. */
.filters-bar { display: flex; justify-content: center; margin-bottom: clamp(1.8rem,3.5vw,2.8rem); }
.filters {
  position: relative; display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 2px; padding: 5px; border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow);
  max-width: 100%;
}
.filters__thumb {
  position: absolute; z-index: 0; top: 5px; left: 0; height: calc(100% - 10px);
  width: 0; border-radius: var(--r-pill); opacity: 0;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -6px rgba(24,35,49,.45);
  transition: transform .5s var(--ease-out), width .5s var(--ease-out),
              height .5s var(--ease-out), opacity .3s var(--ease);
  will-change: transform, width;
}
.filters__thumb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,0) 52%);
}
.filter {
  position: relative; z-index: 1;
  padding: .6rem 1.15rem; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-muted);
  font-size: .83rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color .3s var(--ease);
}
.filter:hover { color: var(--ink); }
.filter.is-active { color: var(--bg); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .filters__thumb { transition: none; } }
html:not(.js) .filters__thumb { display: none; }
html:not(.js) .filter.is-active { background: var(--ink); color: var(--bg); }

.masonry { columns: 3; column-gap: clamp(1rem,2vw,1.5rem); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(1rem,2vw,1.5rem); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: clamp(.8rem,1.6vw,1.25rem); }
.gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md); }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--r-md); }
.gallery-grid figure img { transition: transform .8s var(--ease-out); }
.gallery-grid figure:hover img { transform: scale(1.05); }

/* horizontal scroll rail, as in the reference gallery */
.rail { display: flex; gap: clamp(.9rem,1.8vw,1.4rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.rail > * { flex: 0 0 clamp(240px, 30vw, 380px); scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 5px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.rail-nav { display: flex; gap: .5rem; }

/* ---------- 20. Prose ---------------------------------------------------- */
.prose { max-width: 72ch; }
.prose p { color: var(--ink-muted); font-size: 1.02rem; line-height: 1.75; text-wrap: pretty; }
.prose p + p { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.6rem; margin-bottom: .9rem; }
.prose h3 { margin-top: 2rem; margin-bottom: .7rem; }
.prose ul { margin-top: 1rem; display: grid; gap: .6rem; }
.prose ul li { display: flex; gap: .65rem; color: var(--ink-muted); line-height: 1.6; }
.prose ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; margin-top: .6rem; }
.prose a:not(.btn):not(.link-arrow) { color: var(--accent); border-bottom: 1px solid var(--accent-soft); }
.prose a:not(.btn):not(.link-arrow):hover { border-color: var(--accent); }

.pill-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.pill {
  padding: .42rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--line);
  font-size: .78rem; color: var(--ink-muted); background: var(--surface);
}
.pill a:hover { color: var(--accent); }

.spec { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.spec__i { background: var(--surface); padding: 1.1rem 1.25rem; }

/* project hero: the spec panel sits on the lower part of the photograph */
.hero-figure { position: relative; }
.hero-figure__media { border-radius: var(--r-xl); overflow: hidden; }
.spec--float {
  position: absolute; left: clamp(1rem,3vw,2.6rem); right: clamp(1rem,3vw,2.6rem);
  bottom: clamp(1rem,2.2vw,1.8rem); z-index: 2;
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  gap: 0;
}
.spec--float .spec__i { background: transparent; border-right: 1px solid var(--line); }
.spec--float .spec__i:last-child { border-right: 0; }
@media (max-width: 900px) {
  /* stacked: the divider becomes a gap filled by the panel behind, which works
     for both the 3-item and 4-item variants without row maths */
  .spec--float {
    position: static; margin: -2.5rem clamp(.8rem,3vw,1.6rem) 0;
    gap: 1px; background-color: var(--line);
  }
  .spec--float .spec__i { border-right: 0; background: var(--glass-bg); }
}
.spec__i b { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: .35rem; font-weight: 600; }
.spec__i span { font-size: .93rem; color: var(--ink); font-weight: 500; }

/* related links block — internal-link surface */
.related { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: clamp(.8rem,1.6vw,1.2rem); }
.related a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.related a:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--sh-md); }
.related b { display: block; font-size: .96rem; color: var(--ink); font-weight: 600; letter-spacing: -.012em; }
.related small { font-size: .78rem; color: var(--ink-faint); }
.related svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* ---------- 21. Reveal motion -------------------------------------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* the panel pulls up over the hero; between the tablet and small-desktop
   breakpoints the hero is short enough that the full pull-up would cover the
   call-to-action, so ease it off in that band only */
@media (max-width: 1160px) and (min-width: 901px) {
  .hero-stats { margin-top: -26px; }
}

/* ---------- 22. Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .step { grid-template-columns: 56px minmax(0,1fr); }
  .step__d { grid-column: 2; }
}
@media (max-width: 900px) {
  .nav, .header__actions .btn { display: none; }
  .burger { display: grid; }
  .hero__grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .page-head__grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2,1fr); margin-top: -20px; }
  .hero-stats__item:nth-child(2n) { border-right: 0; }
  .hero-stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .form__row { grid-template-columns: 1fr; }
  .hero__frame { min-height: 78vh; }
  .trust-chip { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2,1fr); }
}

@media print {
  .header, .drawer, .footer__social, .cta, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ---------- 23. Floating actions ----------------------------------------- */
.to-top, .wa-fab {
  position: fixed; z-index: 90;
  bottom: calc(clamp(1rem, 2.6vw, 1.9rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); cursor: pointer;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease),
              visibility .35s, background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.to-top, .wa-fab { -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }

/* back to top, bottom left, revealed once the page has scrolled */
.to-top {
  left: calc(clamp(1rem, 2.6vw, 1.9rem) + env(safe-area-inset-left, 0px));
  width: 48px; height: 48px;
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  color: var(--ink); box-shadow: var(--glass-shadow);
  opacity: 0; visibility: hidden; transform: translateY(14px);
}
.to-top.is-in { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-3px); }
.to-top svg { width: 18px; height: 18px; }

/* WhatsApp, bottom right, frosted copper */
.wa-fab {
  right: calc(clamp(1rem, 2.6vw, 1.9rem) + env(safe-area-inset-right, 0px));
  gap: .6rem; height: 52px; padding: 0 1.15rem;
  color: #fff; border: 1px solid rgba(255,255,255,.30);
  background: linear-gradient(150deg, rgba(142,70,52,.86), rgba(111,53,39,.90));
  box-shadow: 0 10px 30px -10px rgba(156,79,58,.65), inset 0 1px 0 rgba(255,255,255,.28);
}
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 38px -12px rgba(156,79,58,.75), inset 0 1px 0 rgba(255,255,255,.34); }
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab__label { font-size: .84rem; font-weight: 600; letter-spacing: -.005em; }
[data-theme="dark"] .wa-fab {
  background: linear-gradient(150deg, rgba(158,80,60,.88), rgba(124,60,44,.92));
  border-color: rgba(255,255,255,.22);
}
@media (max-width: 620px) {
  .wa-fab { width: 52px; padding: 0; }
  .wa-fab__label { display: none; }
  .to-top { width: 44px; height: 44px; }
  /* 52px button plus its 16px offset, so the last footer row clears both */
  .footer__bottom { padding-bottom: calc(1.6rem + 68px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .to-top, .wa-fab { display: none !important; } }


/* ---------- 23b. Touch sizing -------------------------------------------- */
/* Everything a finger has to hit gets 44px. Below the tablet breakpoint the
   eight-segment filter capsule wrapped into a four-row blob inside a pill
   radius, so it scrolls sideways instead. */
@media (max-width: 900px) {
  .footer__links a,
  .drawer__nav .sub a,
  .crumbs a,
  .contact-item a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer__links { gap: 0; }
  .drawer__nav .sub { gap: 0; padding-bottom: .5rem; }
}

@media (max-width: 620px) {
  .filters-bar {
    justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .filters-bar::-webkit-scrollbar { display: none; }
  /* nowrap keeps the sliding thumb tracking a single row of segments */
  .filters { flex-wrap: nowrap; }
  .filter { min-height: 44px; }
}



/* ---------- 24. Plan-drawing texture ------------------------------------- */
/* Real architectural drawings supplied by the studio, one file per ink: graphite
   on the light theme, white on the dark one. Because the ink is baked in there
   is nothing to tint and nothing to composite, so the browser paints a plain
   background image. The aspect ratio is set per drawing since they differ. */
.plan-deco {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; translate: 0 -50%;
  width: var(--plan-size, min(52%, 720px));
  aspect-ratio: var(--plan-ratio, 16 / 9);
  background: var(--plan-light) no-repeat center / contain;
  opacity: var(--plan-op);
}
[data-theme="dark"] .plan-deco { background-image: var(--plan-dark); }
/* The drawings run a little past the page edge on purpose. Clip them at the
   section rather than letting the document grow sideways; `clip` is used instead
   of `hidden` because `hidden` would turn the section into a scroll container and
   break the sticky elements inside it. */
.section:has(> .plan-deco),
.section-sm:has(> .plan-deco) { overflow-x: clip; }
.plan-deco--right  { right: calc(var(--gutter) * -0.4); }
.plan-deco--left   { left:  calc(var(--gutter) * -0.4); }
.plan-deco--center { left: 50%; translate: -50% -50%; width: var(--plan-size, min(74%, 940px)); }
/* anchored beside a section heading, where the right column is genuinely empty */
.plan-deco--head {
  top: var(--sec-y); translate: 0 0;
  right: calc(var(--gutter) * -0.4);
  width: var(--plan-size, min(40%, 540px));
}

/* below the tablet breakpoint the columns collapse, so there is no dead space
   left to fill and the drawing would sit under the copy */
@media (max-width: 1080px) { .plan-deco { display: none; } }
@media print { .plan-deco { display: none; } }