/* ==========================================================================
   Qaraqoyunlu Consulting — "Private-bank editorial"
   Site-specific styles, loaded after fonts.css and base.css.

   Contents
     01  Tokens & dark scope
     02  Typography & shared bits (labels, eyebrows, links, buttons, icons)
     03  Header & navigation
     04  Hero (headline, figure plate, facts)
     05  Ticker
     06  01 Services (ledger)
     07  02 Online services (checklist)
     08  03 Investment chapter
     09  04 Construction consulting
     10  05 Tender / B2B + company details
     11  06 Contact, form, map
     12  Family, footer, floating actions
     13  Motion keyframes
     14  Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 01 tokens */

:root {
  --ivory: #F6F2EA;
  --paper: #FFFDF8;
  --teal: #0F3D3E;
  --teal-deep: #0A2C2D;
  --ink-deep: #10201F;
  --brass: #B08D57;
  --brass-dark: #8C6B3C;
  --brass-light: #D6B888;
  --sage: #DCE3DC;

  --bg: var(--ivory);
  --bg-alt: #EFE9DD;
  --surface: var(--paper);
  --ink: #10201F;
  --ink-soft: #5E6B69;
  --line: rgba(16, 32, 31, 0.13);
  --line-strong: rgba(16, 32, 31, 0.26);
  --accent: var(--brass);
  --accent-ink: #10201F;
  --brass-ink: #7A5B30;          /* brass for small text on light (AA) */
  --brass-big: var(--brass-dark); /* brass for display type on light */

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  --container: 1280px;
  --radius: 4px;
  --radius-lg: 4px;              /* one panel radius across plates, cards, form and map */
  --header-h: 78px;
  --shadow-soft: 0 1px 0 rgba(16, 32, 31, 0.04), 0 28px 60px -36px rgba(16, 32, 31, 0.28);
}

/* Dark scope: deep-teal chapters re-map the ink tokens */
.dark {
  --bg: var(--teal);
  --ink: #F6F2EA;
  --ink-soft: rgba(246, 242, 234, 0.74);
  --line: rgba(246, 242, 234, 0.15);
  --line-strong: rgba(246, 242, 234, 0.3);
  --brass-ink: var(--brass-light);
  --brass-big: var(--brass-light);
  background: var(--teal);
  color: var(--ink);
}

body { background: var(--bg); color: var(--ink); font-feature-settings: 'ss01' 0; }
body.nav-open { overflow: hidden; }
main { display: block; }
.section { padding: var(--section) 0; }

/* -------------------------------------------------------- 02 typography */

.hero__title, .h2, .h3, .h4, .pullquote p, .smart__title, .closing__text,
.build__cta-text, .panel__range, .readout__roi, .fact__num, .faq__q, .brand__name, .brand__sub {
  font-family: var(--font-display);
  font-optical-sizing: auto;
}

.h2 {
  font-size: clamp(36px, 4.4vw, 68px);
  font-weight: 360;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h2--xl { font-size: clamp(42px, 6.2vw, 100px); line-height: 1; letter-spacing: -0.03em; }
.h3 { font-size: clamp(24px, 2vw, 30px); font-weight: 400; line-height: 1.15; letter-spacing: -0.012em; }
.h3--lg { font-size: clamp(28px, 2.9vw, 44px); font-weight: 360; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.h4 { font-size: clamp(19px, 1.45vw, 22px); font-weight: 460; line-height: 1.25; letter-spacing: -0.005em; }

.hero__title em, .h2 em, .h3 em, .smart__title em, .closing__text em, .build__cta-text em {
  font-style: italic;
  font-weight: 300;
  color: var(--brass-big);
  font-synthesis: none; /* never paint a slanted roman while the italic file loads */
}

p { text-wrap: pretty; }

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-soft);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow__n {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--brass-ink);
}
.eyebrow__rule { width: 48px; height: 1px; background: currentColor; opacity: 0.55; }

.section-head__text { margin-top: 24px; max-width: 46ch; color: var(--ink-soft); font-size: clamp(16px, 1.15vw, 18px); }

.sub__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  color: var(--brass-ink);
  margin-bottom: 14px;
  font-variant-numeric: lining-nums;
}
.sub__text { margin-top: 16px; max-width: 52ch; color: var(--ink-soft); }

/* icons: one stroke language across the site. Strokes do not scale with the icon, so
   every icon draws the same 1.5px line. Sizes: 18 (buttons, links), 20 (rows, chips),
   24 (service marks, floating buttons), 36 (feature icons). Colour: teal on light
   backgrounds, brass-light on dark ones. */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sprite symbol * { vector-effect: non-scaling-stroke; }
.icon--feature { width: 36px; height: 36px; }

/* links */
.link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--ease-out), color 0.3s;
  padding-bottom: 2px;
}
.link:hover { background-size: 100% 1px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.link-arrow > span {
  padding-bottom: 3px;
  background:
    linear-gradient(var(--brass), var(--brass)) 0 100% / 0 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.link-arrow .icon { width: 18px; height: 18px; transition: transform 0.45s var(--ease-out); }
.link-arrow:hover > span { background-size: 100% 1px, 100% 1px; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* buttons */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  transition: color 0.35s var(--ease-out), border-color 0.35s, transform 0.4s var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }
.btn .icon { width: 18px; height: 18px; transition: transform 0.45s var(--ease-out); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; gap: 10px; }

.btn--primary { background: var(--teal); color: var(--ivory); }
.btn--primary::before { background: var(--ink-deep); }
.btn--brass { background: var(--brass); color: var(--ink-deep); }
.btn--brass::before { background: var(--ivory); }
.btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost::before { background: var(--ink-deep); }
.btn--ghost:hover { color: var(--ivory); }
.btn--paper { background: var(--paper); color: var(--ink-deep); box-shadow: 0 8px 24px -12px rgba(16, 32, 31, 0.35); }
.btn--paper::before { background: var(--sage); }

/* small ticked lists */
.ticks { list-style: none; padding: 0; margin-top: 22px; }
.ticks li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
}
.ticks li::before { /* whole-pixel position so every dash renders equally crisp */
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 11px;
  height: 0;
  border-top: 1px solid var(--brass);
}
.ticks--light li { color: var(--ink-soft); }

/* focus ring: teal on light backgrounds (3:1 against ivory), brass on dark ones */
:focus-visible { outline-color: var(--teal); }
.dark :focus-visible, .site-footer :focus-visible, .sibling--current :focus-visible, .chapter-nav :focus-visible,
.site-header.is-on-dark :focus-visible, .nav-open .site-header :focus-visible, .fab.is-on-dark :focus-visible { outline-color: var(--brass-light); }

.note { display: flex; gap: 8px; margin-top: 18px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-width: 70ch; }
.note__mark { font-family: var(--font-display); color: var(--brass-ink); font-size: 17px; line-height: 1.1; }

/* ---------------------------------------------------- 03 header & nav */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  color: var(--ink);
}
/* background lives on a pseudo-element so the header itself never becomes a
   containing block for the fixed mobile menu (backdrop-filter would do that) */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(246, 242, 234, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header::before { transition: opacity 0.45s var(--ease-out), background-color 0.35s var(--ease-out); }

/* over the deep-teal chapters the header turns teal as well (site.js toggles .is-on-dark) */
.site-header.is-on-dark::before { background: rgba(10, 44, 45, 0.92); box-shadow: 0 1px 0 rgba(246, 242, 234, 0.12); }
.site-header .brand, .site-header .brand__name, .site-header .brand__sub, .site-nav__list a, .site-nav__n,
.site-header .lang-switch, .site-header .lang-switch button, .nav-toggle { transition: color 0.35s, background-color 0.35s, box-shadow 0.35s; }
.site-header.is-on-dark { color: var(--ivory); }
.site-header.is-on-dark .brand { color: var(--brass-light); }
.site-header.is-on-dark .brand__name, .site-header.is-on-dark .brand__sub, .site-header.is-on-dark .site-nav__list a { color: var(--ivory); }
.site-header.is-on-dark .brand__sub, .site-header.is-on-dark .site-nav__n { color: var(--brass-light); }
.site-header.is-on-dark .site-header__cta { background: var(--brass); color: var(--ink-deep); }
.site-header.is-on-dark .site-header__cta::before { background: var(--ivory); }
.site-header.is-on-dark .site-header__actions .lang-switch { box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.3); }
.site-header.is-on-dark .site-header__actions .lang-switch button { color: rgba(246, 242, 234, 0.78); }
.site-header.is-on-dark .site-header__actions .lang-switch button.is-active { background: var(--brass-light); color: var(--teal-deep); }
.site-header.is-on-dark .nav-toggle { box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.4); }
.site-header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--teal); flex: none; }
.brand__mark { width: 44px; height: auto; aspect-ratio: 1812 / 1422; fill: currentColor; transition: transform 0.6s var(--ease-out); }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.04); }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-size: 21px; font-weight: 520; letter-spacing: -0.012em; color: var(--ink); }
.brand__sub { margin-top: 2px; font-size: 21px; font-weight: 520; letter-spacing: -0.012em; color: var(--ink); }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 2px; }
.site-nav__list a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 12px 11px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.3s;
}
.site-nav__n { font-family: var(--font-display); font-style: italic; font-size: 11px; font-weight: 400; line-height: 1; color: var(--brass-ink); margin-top: -2px; }
.site-nav__list a::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 6px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out);
}
.site-nav__list a:hover::after, .site-nav__list a.is-current::after { transform: scaleX(1); }
.site-nav__extra { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 14px; flex: none; }

.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.lang-switch button {
  min-width: 42px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  transition: background-color 0.35s var(--ease-out), color 0.35s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.is-active { background: var(--teal); color: var(--ivory); }

.nav-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: inherit;
}
.nav-toggle__bar {
  position: absolute;
  left: 15px;
  right: 15px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out);
}
.nav-toggle__bar:first-child { top: 20px; }
.nav-toggle__bar:last-child { top: 27px; right: 19px; }
.nav-open .nav-toggle__bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-open .nav-toggle__bar:last-child { transform: translateY(-3.5px) rotate(-45deg); right: 15px; }

/* ------------------------------------------------------------- 04 hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(44px, 6.5vw, 96px)) 0 clamp(56px, 6vw, 88px);
}
/* engraved logo watermark: hairline outline that draws itself once */
.hero__mark {
  position: absolute;
  z-index: 0;
  top: calc(var(--header-h) - 10px);
  right: -9vw;
  width: min(64vw, 1020px);
  height: auto;
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.6;
  stroke-dasharray: 12400;
  stroke-dashoffset: 12400;
  opacity: 0.42;
  pointer-events: none;
  animation: qq-draw 1.6s var(--ease-in-out) 0.1s forwards;
}
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 2.6vw, 36px); color: var(--ink-soft); }
.hero__eyebrow-rule { width: 56px; height: 1px; background: var(--brass); }

.hero__title {
  font-size: clamp(46px, 7vw, 112px);
  font-weight: 340;
  line-height: 1.04; /* ≥ 1: "q" of line 1 must not touch the accents of line 2 (Ö, Ü, İ) */
  letter-spacing: -0.032em;
  color: var(--ink);
}
.hero__line { display: block; text-wrap: balance; }
.hero__line--2 { padding-left: 0.9em; }
.hero__line--3 { padding-left: 1.8em; }
.hero__title em { font-weight: 280; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(36px, 4.5vw, 60px);
}
.hero__copy { padding-top: 8px; }
.hero__lead { max-width: 46ch; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.65; color: var(--ink-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }

/* hero intro: pure CSS, runs from the first paint. Nothing above the fold waits for
   JavaScript (fast LCP, no flash of an unsplit headline on slow phones), and the lines
   rise without word masks, so no descender or accent can ever be clipped. */
.hero__eyebrow, .hero__line, .plate, .hero__lead, .hero__ctas { animation: qq-hero-in 0.9s var(--ease-out) both; }
.hero__eyebrow { animation-name: qq-fade-in; animation-delay: 0.05s; }
.hero__line { animation-name: qq-line-in; animation-duration: 1s; }
.hero__line:nth-child(2) { animation-delay: 0.09s; }
.hero__line:nth-child(3) { animation-delay: 0.18s; }
.plate { animation-delay: 0.22s; }
.hero__lead { animation-delay: 0.3s; }
.hero__ctas { animation-delay: 0.4s; }

/* figure plate (hero chart) */
.plate {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-soft);
}
.plate::before { /* brass corner tick */
  content: '';
  position: absolute;
  top: -1px;
  left: 24px;
  width: 56px;
  height: 2px;
  background: var(--brass);
}
.plate__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.plate__head .label { font-size: 11px; }
.plate__chart { width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.plate__bands rect { fill: rgba(15, 61, 62, 0.045); }
.plate__grid path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.plate__grid .dash { stroke: var(--line); stroke-dasharray: 3 4; }
/* the whole figure is drawn within ~1.5 s: line, then one faint contour, area and end dot */
.plate__contours path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  opacity: 0.35;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: qq-draw 1.1s var(--ease-in-out) forwards;
  animation-delay: calc(0.5s + var(--d) * 0.08s);
}
.plate__area { fill: var(--teal); opacity: 0; animation: qq-fade-to 0.8s var(--ease-out) 0.9s forwards; --to: 0.07; }
.plate__line {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: qq-draw 1.2s var(--ease-in-out) 0.3s forwards;
}
.plate__end circle:last-child { fill: var(--teal); opacity: 0; animation: qq-fade-to 0.3s ease 1.4s forwards; --to: 1; }
.plate__pulse { fill: var(--brass); opacity: 0; transform-box: fill-box; transform-origin: center; animation: qq-pulse 2.6s var(--ease-out) 1.6s infinite; }
.plate__steps circle { fill: var(--paper); stroke: var(--teal); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.plate__steps text { fill: var(--teal); font: 600 11px var(--font-body); text-anchor: middle; }
.plate__ticks text { fill: var(--ink-soft); font: 500 12px var(--font-body); text-anchor: middle; }
.plate .plate__legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.plate__legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.2; }
.plate__n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--teal);
  color: var(--teal);
  font-size: 10.5px;
  font-weight: 600;
}
.plate__caption { margin-top: 12px; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-soft); }

/* facts strip */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line-strong);
}
.fact { padding: 26px clamp(16px, 2vw, 32px) 0; border-left: 1px solid var(--line); }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact__num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(44px, 4.4vw, 68px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
  font-variant-numeric: lining-nums tabular-nums;
}
.fact__num--word { font-size: clamp(36px, 3.4vw, 52px); letter-spacing: 0; font-weight: 340; padding-top: 0.15em; }
.fact__unit { font-family: var(--font-display); font-style: italic; font-size: 0.42em; letter-spacing: 0; color: var(--brass-ink); }
.fact__k { margin-top: 16px; font-size: 15px; font-weight: 600; }
.fact__v { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* ----------------------------------------------------------- 05 ticker */

.ticker {
  background: var(--teal);
  color: var(--ivory);
  padding: 10px 0;
  --marquee-gap: 34px;
  --marquee-speed: 55s;
}
.ticker .marquee { padding: 12px 0; } /* room for italic descenders (q, y, g) and Ə/İ accents: .marquee clips */
.ticker .marquee__track { align-items: center; }
.ticker li {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ticker__sep svg { width: 30px; height: auto; fill: var(--brass); }

/* --------------------------------------------------- 06 services ledger */

.services__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.services__head { position: sticky; top: calc(var(--header-h) + 40px); }
.services__cta { margin-top: 28px; }
.services__head .h2, .online__head .h2 { font-size: clamp(36px, 3.7vw, 56px); }

.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.ledger__item { position: relative; padding: 34px clamp(24px, 3vw, 44px) 44px 0; border-bottom: 1px solid var(--line); }
.ledger__item:nth-child(even) { padding-left: clamp(24px, 3vw, 44px); padding-right: 0; border-left: 1px solid var(--line); }
.ledger__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out);
}
.ledger__item:hover::before { transform: scaleX(1); }
.ledger__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; }
.ledger__n {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(56px, 5vw, 76px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--brass-big);
  font-variant-numeric: lining-nums;
}
.ledger__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--teal);
  transition: background-color 0.45s var(--ease-out), color 0.45s, transform 0.6s var(--ease-out);
}
.ledger__icon .icon { width: 24px; height: 24px; }
.ledger__item:hover .ledger__icon { background: var(--teal); color: var(--ivory); transform: rotate(-8deg); }
.ledger__text { margin-top: 12px; color: var(--ink-soft); font-size: 16px; }

/* ------------------------------------------------- 07 online checklist */

.online { background: var(--sage); --ink-soft: #4C5957; --brass-ink: #6E5129; }
.online__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.online__head { position: sticky; top: calc(var(--header-h) + 40px); }
/* live tally under the intro: follows the filter (site.js) */
.online__count {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.online__num {
  font-family: var(--font-display);
  font-weight: 250;
  font-size: clamp(88px, 8vw, 124px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--teal);
  font-variant-numeric: lining-nums tabular-nums;
  min-width: 0.62em;
}
.online__count-k { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.online__count-cat { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 17px; color: var(--brass-ink); }

.online__table {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 36px);
  box-shadow: var(--shadow-soft);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.35s var(--ease-out), color 0.35s, box-shadow 0.35s;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip.is-active { background: var(--teal); color: var(--ivory); box-shadow: none; }
.chip__count { font-family: var(--font-display); font-style: italic; font-size: 13px; opacity: 0.7; }

.checklist { counter-reset: none; }
.checklist__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 16px;
  padding: 16px 6px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s;
}
/* rows rise in only after a filter click (site.js adds .is-filtered), not on page load */
.checklist.is-filtered .checklist__row {
  animation-name: qq-row-in;
  animation-duration: 0.55s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}
.checklist__row:nth-child(2) { animation-delay: 0.04s; }
.checklist__row:nth-child(3) { animation-delay: 0.08s; }
.checklist__row:nth-child(4) { animation-delay: 0.12s; }
.checklist__row:nth-child(5) { animation-delay: 0.16s; }
.checklist__row:nth-child(6) { animation-delay: 0.2s; }
.checklist__row:nth-child(7) { animation-delay: 0.24s; }
.checklist__row:nth-child(8) { animation-delay: 0.28s; }
.checklist__row:nth-child(9) { animation-delay: 0.32s; }
.checklist__row:hover { background: rgba(220, 227, 220, 0.45); }
.checklist__n { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--brass-ink); }
.checklist__name { font-size: 16.5px; font-weight: 500; line-height: 1.35; transition: transform 0.45s var(--ease-out); }
.checklist__row:hover .checklist__name { transform: translateX(4px); }
.checklist__tag {
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.checklist__ok { width: 20px; height: 20px; color: var(--teal); }
.online__cta { margin-top: 20px; }

/* ------------------------------------------------- 08 investment chapter */

/* chapter index: a deep-teal strip that sticks under the header for the whole chapter */
.chapter-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  background: var(--teal-deep);
  color: var(--ivory);
  box-shadow: 0 1px 0 rgba(214, 184, 136, 0.22);
}
/* lists carry two classes here: base.css resets ul[class]/ol[class] padding at (0,1,1) */
.chapter-nav .chapter-nav__list {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 calc(var(--gutter) - 10px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.chapter-nav__list::-webkit-scrollbar { display: none; }
.chapter-nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 0 10px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(246, 242, 234, 0.74);
  transition: color 0.3s;
}
.chapter-nav__n { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 13px; color: var(--brass-light); font-variant-numeric: lining-nums; }
.chapter-nav__list a::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: var(--brass-light);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out);
}
.chapter-nav__list a:hover, .chapter-nav__list a.is-current { color: var(--ivory); }
.chapter-nav__list a.is-current::after { transform: scaleX(1); }
/* when the strip is wider than the screen, a soft fade marks the side that still hides links */
.chapter-nav::before, .chapter-nav::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.chapter-nav::before { left: 0; background: linear-gradient(90deg, var(--teal-deep), rgba(10, 44, 45, 0)); }
.chapter-nav::after { right: 0; background: linear-gradient(270deg, var(--teal-deep), rgba(10, 44, 45, 0)); }
.chapter-nav.has-more-start::before, .chapter-nav.has-more-end::after { opacity: 1; }
/* anchors inside the chapter land below header + strip */
.invest [id] { scroll-margin-top: 56px; }

.invest__opener { position: relative; overflow: hidden; padding: var(--section) 0; }
.invest__mark {
  position: absolute;
  top: -4%;
  left: -14%;
  width: min(78vw, 1200px);
  height: auto;
  fill: none;
  stroke: var(--brass-light);
  stroke-width: 2;
  opacity: 0.16;
  pointer-events: none;
}
.invest__opener .container { position: relative; }
.section-head--wide { max-width: 1040px; }

.pullquote {
  margin: clamp(48px, 6vw, 88px) 0 0 auto;
  max-width: 780px;
  padding-left: clamp(24px, 3vw, 40px);
  border-left: 1px solid var(--brass);
}
.pullquote p {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.pullquote__src { margin-top: 18px; font-size: 13px; color: var(--ink-soft); letter-spacing: 0.02em; }

.sub { margin-top: clamp(80px, 10vw, 150px); }
.sub--first { margin-top: 0; }
.sub__head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 760px; }
.sub__head--row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: end;
  max-width: none;
}
.sub__head--row .sub__text { margin-top: 0; }

/* why Azerbaijan — three pillars */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.pillar { position: relative; padding: 30px clamp(20px, 2.6vw, 40px) 8px; border-left: 1px solid var(--line); }
.pillar:first-child { padding-left: 0; border-left: 0; }
.pillar__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(64px, 6vw, 96px);
  line-height: 0.85;
  color: var(--brass-light);
  letter-spacing: -0.02em;
}
.pillar__icon { position: absolute; top: 32px; right: clamp(20px, 2.6vw, 40px); width: 36px; height: 36px; color: var(--brass-light); }
.pillar:last-child .pillar__icon { right: 0; }
.pillar .h4 { margin: 30px 0 12px; font-family: var(--font-display); font-size: clamp(22px, 1.8vw, 27px); font-weight: 400; }
.pillar p { color: var(--ink-soft); font-size: 15.5px; }

.reasons { margin-top: clamp(56px, 6vw, 88px); }
.reasons__label { margin-bottom: 18px; }
.reasons__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 36px); }
.reasons__list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.4;
}
.reasons__n { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--brass-light); flex: none; }

/* sectors: ROI range explorer */
.explorer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.roi__list { border-top: 1px solid var(--line-strong); }
.roi__row {
  --cols: minmax(150px, 15rem) minmax(0, 1fr) 4.6rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 66px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background-color 0.4s var(--ease-out);
}
.roi__row::before { /* active marker */
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--brass-light);
  transform: scaleY(0);
  transition: transform 0.45s var(--ease-out);
}
.roi__row:hover { background: rgba(246, 242, 234, 0.04); }
.roi__row.is-active { background: rgba(246, 242, 234, 0.07); }
.roi__row.is-active::before { transform: scaleY(1); }
.roi__name { font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ink-soft); transition: color 0.3s; }
.roi__row.is-active .roi__name, .roi__row:hover .roi__name { color: var(--ink); }
.roi__track {
  position: relative;
  height: 12px;
  background:
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 6) 100% repeat-x;
  border-right: 1px solid var(--line);
}
.roi__track::before { /* 0 → min: the floor of the range, dotted */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--min) / 30 * 100%);
  border-top: 1px dotted var(--line-strong);
}
.roi__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--min) / 30 * 100%);
  width: calc((var(--max) - var(--min)) / 30 * 100%);
  border-radius: 2px;
  background: linear-gradient(90deg, #8F7A55, var(--brass-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease-out), background-color 0.3s;
  transition-delay: calc(0.25s + var(--i) * 0.12s);
}
.roi.is-visible .roi__bar { transform: scaleX(1); }
.roi__row:not(.is-active) .roi__bar { filter: saturate(0.6) brightness(0.86); }
.roi__val { font-family: var(--font-display); font-size: 19px; font-weight: 400; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.roi__axis { display: grid; grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr) 4.6rem; gap: 20px; padding: 10px 14px 0 18px; }
.roi__axis-ticks { grid-column: 2; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.roi__axis-ticks span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.roi__formula { margin-top: 26px; font-size: 13.5px; color: var(--ink-soft); font-style: italic; font-family: var(--font-display); }

.explorer__panels { position: relative; }
.panel {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(10, 44, 45, 0.55);
  animation: qq-panel-in 0.6s var(--ease-out) both;
}
.panel__range {
  font-size: clamp(60px, 6vw, 96px);
  font-weight: 250;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brass-light);
  font-variant-numeric: lining-nums;
}
.panel__range span { font-style: italic; font-size: 0.5em; margin-left: 4px; letter-spacing: 0; }
.panel__k { margin-top: 12px; }
.panel__t { margin-top: 26px; font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.15; }
.note--light { margin-top: 18px; }

/* smart-home statement: a large pull-quote with the explanation set against a brass rule */
.smart {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 0 clamp(32px, 5vw, 88px);
  align-items: end;
  margin-top: clamp(80px, 10vw, 150px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-strong);
}
.smart .sub__n { grid-column: 1 / -1; }
.smart__title { font-size: clamp(40px, 5.2vw, 84px); font-weight: 320; line-height: 1; letter-spacing: -0.032em; text-wrap: balance; }
.smart__text { padding: 4px 0 6px 26px; border-left: 1px solid var(--brass); color: var(--ink-soft); font-size: 17px; line-height: 1.65; }

/* light part of the chapter */
.invest__light { background: var(--paper); }

/* alternatives: hairline ledger rows — opportunity · how it works · what it delivers */
.alts { border-top: 2px solid var(--ink); }
.alts__head, .alt {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: 0 clamp(16px, 2.6vw, 44px);
}
.alts__head { padding: 14px 0 12px; border-bottom: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); }
.alts__head span:first-child { grid-column: 2; }
.alt { position: relative; align-items: start; padding: 28px 0 30px; border-bottom: 1px dashed var(--line-strong); }
.alt::before { /* brass sweep on hover, as on the services ledger */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--ease-out);
}
.alt:hover::before { transform: scaleX(1); }
.alt__icon { width: 36px; height: 36px; color: var(--teal); margin-top: -2px; }
.alt__t { font-family: var(--font-display); font-size: clamp(22px, 1.8vw, 27px); font-weight: 420; line-height: 1.15; letter-spacing: -0.01em; }
.alt__p { color: var(--ink-soft); font-size: 15.5px; padding-top: 3px; }
.alt__gain { font-family: var(--font-display); font-style: italic; font-weight: 380; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.3; color: var(--brass-ink); }

/* T-account: income vs costs */
.taccount { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.taccount__col { padding: 26px clamp(20px, 3vw, 48px) 8px 0; }
.taccount__col + .taccount__col { padding: 26px 0 8px clamp(20px, 3vw, 48px); border-left: 1px solid var(--ink); }
.taccount__h { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.taccount__sign {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--brass-big);
}
.taccount__list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 16px 0; border-top: 1px dashed var(--line-strong); }
.taccount__list dt { font-family: var(--font-display); font-size: 19px; font-weight: 420; line-height: 1.25; }
.taccount__list dd { color: var(--ink-soft); font-size: 15px; }

/* $1M scenario */
.scenario { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.scenario__intro { position: sticky; top: calc(var(--header-h) + 32px); }

.seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); /* equal thirds: the pill moves by transform alone */
  margin-top: 28px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--line);
  max-width: 100%;
}
.seg__btn {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.4s var(--ease-out);
  white-space: nowrap;
}
.seg__btn.is-active { color: var(--ivory); }
.seg__thumb { /* one third wide; slides under the buttons (compositor-only, no JS measuring) */
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border-radius: 999px;
  background: var(--teal);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.55s var(--ease-out);
}
[data-active="cons"] .seg__thumb { transform: translate3d(0, 0, 0); }
[data-active="opt"] .seg__thumb { transform: translate3d(200%, 0, 0); }

.readout { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.readout__roi {
  display: flex;
  align-items: baseline;
  font-size: clamp(72px, 7.4vw, 120px);
  font-weight: 260;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--teal);
  margin-top: 6px;
  font-variant-numeric: lining-nums tabular-nums;
}
.readout__pct { font-style: italic; font-size: 0.42em; letter-spacing: 0; margin-left: 6px; color: var(--brass-big); }
.readout__bars { display: grid; gap: 10px; margin-top: 28px; }
.rbar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 6.4rem; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-soft); }
.rbar__v { text-align: right; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.rbar__track { height: 8px; background: rgba(16, 32, 31, 0.06); border-radius: 2px; overflow: hidden; }
.rbar__fill { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--s, 0.5)); transition: transform 0.8s var(--ease-out); border-radius: 2px; }
.rbar--in .rbar__fill { background: var(--teal); }
.rbar--out .rbar__fill { background: var(--brass); }
.rbar--net .rbar__fill { background: linear-gradient(90deg, var(--teal), #2D6A6B); }
.readout__cap { margin-top: 16px; font-family: var(--font-display); font-style: italic; font-size: 14.5px; color: var(--ink-soft); }

.scenario__table { min-width: 0; }
.sc-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.sc-table th, .sc-table td { padding: 17px 16px; text-align: right; border-bottom: 1px solid var(--line); vertical-align: middle; transition: background-color 0.45s var(--ease-out), color 0.45s; }
.sc-table thead th {
  padding-top: 0;
  padding-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
  line-height: 1.35;
}
.sc-table tbody th { text-align: left; font-weight: 500; font-size: 15px; padding-left: 0; line-height: 1.35; }
.sc-table td { font-size: 16px; white-space: nowrap; }
.sc-table__strong th, .sc-table__strong td { font-weight: 650; }
.sc-table__roi th { font-weight: 600; }
.sc-table__roi td { font-family: var(--font-display); font-size: 26px; font-weight: 380; border-bottom: 0; }
.sc-table__roi th { border-bottom: 0; }
[data-active="cons"] [data-col="cons"],
[data-active="base"] [data-col="base"],
[data-active="opt"] [data-col="opt"] { background: rgba(15, 61, 62, 0.07); color: var(--teal); }
[data-active="cons"] thead [data-col="cons"],
[data-active="base"] thead [data-col="base"],
[data-active="opt"] thead [data-col="opt"] { background: var(--teal); color: var(--ivory); border-bottom-color: var(--teal); }
.sc-table thead th[data-col] { padding-top: 14px; text-wrap: balance; }

/* roadmap (dark) */
.invest__road { overflow: hidden; }
.roadmap { --p: 0; }
.roadmap__scale { position: relative; margin-bottom: 44px; }
.roadmap__bar { position: relative; height: 6px; background: rgba(246, 242, 234, 0.1); border-radius: 3px; }
.roadmap__fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brass-light), var(--brass));
  transform-origin: 0 50%;
  transform: scaleX(var(--p));
}
.roadmap__node { /* the start of each phase, at its true month */
  position: absolute;
  top: 50%;
  left: calc(var(--at) / 36 * 100%);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: inset 0 0 0 1.5px var(--brass-light);
  transition: background-color 0.5s;
}
.roadmap__node[style*="--at:0"] { margin-left: 0; }
.roadmap__node.is-active { background: var(--brass-light); }
.roadmap__ticks { position: relative; height: 26px; margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.roadmap__ticks > span { position: absolute; left: calc(var(--at) / 36 * 100%); transform: translateX(-50%); white-space: nowrap; }
.roadmap__ticks > span:first-child { transform: none; }
.roadmap__ticks > span:last-child { transform: translateX(-100%); }

.roadmap__phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
/* each phase sits on its own 0–36 month track, its segment drawn at the true position */
.phase { position: relative; display: flex; flex-direction: column; padding-top: 30px; }
.phase__share { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(246, 242, 234, 0.16); }
.phase__share span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) / 36 * 100%);
  width: calc((var(--to) - var(--from)) / 36 * 100%);
  background: var(--brass-light);
  opacity: 0.45;
  transition: opacity 0.6s var(--ease-out);
}
.phase::before { /* node at the start of the segment */
  content: '';
  position: absolute;
  z-index: 1;
  top: -4px;
  left: calc(var(--from) / 36 * 100%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: inset 0 0 0 1.5px var(--brass-light);
  transition: background-color 0.5s;
}
.phase[style*="--from:0"]::before { margin-left: 0; }
.phase.is-active::before { background: var(--brass-light); }
.phase.is-active .phase__share span { opacity: 1; }
.phase__when { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 2.4vw, 36px); font-weight: 300; line-height: 1; color: var(--brass-light); font-variant-numeric: lining-nums; transition: color 0.6s var(--ease-out); }
.phase:not(.is-active) .phase__when { color: #A99A78; }
.phase .h4 { margin: 18px 0 10px; }
.phase p:not(.phase__when) { color: var(--ink-soft); font-size: 15px; }

/* risks vs mitigation */
.risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 80px); }
/* side by side, both columns share one set of row lines (subgrid), so a wrapped item on
   one side no longer pushes the other side's hairlines out of step */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .risks { row-gap: 0; }
    .risks__col { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
    .risks .risks__list { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  }
}
.risks__h { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.risks__sign { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.risks__sign .icon { width: 18px; height: 18px; }
.risks__col--plus .risks__sign { background: var(--brass-light); color: var(--teal); box-shadow: none; }
/* two independent lists (the brief pairs no risk with a specific measure), so the items
   carry the column's − / + sign rather than parallel numbers */
.risks__list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.45;
}
.risks__list li::before { content: '\2212'; font-family: var(--font-display); font-size: 20px; line-height: 1.15; color: rgba(246, 242, 234, 0.6); }
.risks__col--plus .risks__list li::before { content: '+'; color: var(--brass-light); }
.risks__col:not(.risks__col--plus) .risks__list li { color: var(--ink-soft); }

/* closing part: questions, partner, disclaimer, CTA */
.invest__close { background: var(--ivory); }
.questions { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.questions__intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__n { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--brass-ink); }
.faq__q { font-size: clamp(19px, 1.6vw, 24px); font-weight: 400; line-height: 1.25; transition: color 0.3s; }
.faq__item summary:hover .faq__q { color: var(--teal); }
.faq__icon { position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color 0.4s, transform 0.5s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 11px; right: 11px; top: 17.5px; height: 1px; background: currentColor; transition: transform 0.5s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--teal); color: var(--ivory); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 48px 26px 52px; color: var(--ink-soft); font-size: 16.5px; max-width: 62ch; }
.faq__item[open] .faq__a { animation: qq-faq-in 0.55s var(--ease-out) both; }

.partner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.partner__lead { margin-top: 18px; font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 1.5vw, 23px); font-weight: 300; line-height: 1.4; color: var(--ink); }
.partner__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.partner__item { padding: 30px clamp(20px, 2.6vw, 40px) 34px 0; border-bottom: 1px solid var(--line); }
.partner__item:nth-child(even) { padding-left: clamp(20px, 2.6vw, 40px); padding-right: 0; border-left: 1px solid var(--line); }
.partner__item .icon { width: 36px; height: 36px; color: var(--teal); margin-bottom: 22px; }
.partner__item .h4 { font-family: var(--font-display); font-weight: 420; font-size: clamp(21px, 1.7vw, 25px); margin-bottom: 8px; }
.partner__item p { color: var(--ink-soft); font-size: 15.5px; }

.disclaimer {
  --ink-soft: #4C5957;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 24px;
  margin-top: clamp(64px, 8vw, 112px);
  padding: 26px clamp(20px, 3vw, 36px);
  background: var(--sage);
  border-left: 2px solid var(--brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.disclaimer__k { color: var(--ink); }
.disclaimer p:last-child { font-size: 14.5px; line-height: 1.6; color: #3E4B49; }

.closing {
  position: relative;
  margin-top: clamp(80px, 10vw, 150px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line-strong);
}
.closing__text {
  max-width: 21ch;
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 330;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.closing__mark {
  position: absolute;
  right: 0;
  top: clamp(48px, 6vw, 80px);
  width: min(30vw, 420px);
  height: auto;
  fill: none;
  stroke: var(--brass);
  stroke-width: 3;
  stroke-dasharray: 12400;
  stroke-dashoffset: 12400;
  opacity: 0.7;
  pointer-events: none;
}
.js .closing__mark[data-reveal] { opacity: 0.7; transform: none; }
.closing__mark.is-visible { transition: stroke-dashoffset 3.2s var(--ease-in-out); stroke-dashoffset: 0; }
.closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }

/* ------------------------------------------- 09 construction consulting */

.build { background: var(--bg-alt); }
.section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 72px);
}
.section-head--split .section-head__text { margin-top: 0; }
/* three steps on one hairline (sketch → supervision → supply); rows line up via subgrid */
.build__steps {
  --gap: clamp(28px, 4vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gap);
  border-top: 1px solid var(--line-strong);
}
.build__step {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: 0;
  padding-top: 34px;
}
.build__step::before { /* node on the rule */
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass);
}
.build__step:not(:last-child)::after { /* arrow tick between two steps */
  content: '';
  position: absolute;
  top: -4.5px;
  left: calc(100% + var(--gap) / 2 - 6px);
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--ink-soft);
  border-right: 1px solid var(--ink-soft);
  transform: rotate(45deg);
}
.build__n { grid-row: 1; font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--brass-ink); font-variant-numeric: lining-nums; }
.build__icon { grid-row: 1; justify-self: end; align-self: start; width: 36px; height: 36px; margin-top: -6px; color: var(--teal); }
.build__step .h3 { grid-row: 2; margin: 34px 0 12px; text-wrap: balance; }
.build__p { grid-row: 3; color: var(--ink-soft); font-size: 15.5px; max-width: 36ch; }
.build__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: center;
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line-strong);
}
.build__cta-text { font-size: clamp(22px, 2.2vw, 32px); font-weight: 340; line-height: 1.25; letter-spacing: -0.012em; max-width: 34ch; }
.build__cta-text em { color: var(--brass-ink); } /* AA at every size on the warm background */

/* --------------------------------------------------- 10 tender / B2B */

.tender { background: var(--ink-deep); position: relative; overflow: hidden; }
.tender::before { /* faint engraved mark */
  content: '';
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: 52vw;
  max-width: 820px;
  aspect-ratio: 1812 / 1422;
  background: var(--brass-light);
  -webkit-mask: url("../img/logo-mark.svg") center / contain no-repeat;
  mask: url("../img/logo-mark.svg") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.tender__layout { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.tender .h2 { font-size: clamp(36px, 4.6vw, 72px); }
.tender__text { margin-top: 26px; max-width: 48ch; color: var(--ink-soft); font-size: 17px; }
.tender__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 36px; }
.link-arrow--light { color: var(--ivory); }

.req {
  position: relative;
  background: var(--paper);
  color: var(--ink-deep);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  --line: rgba(16, 32, 31, 0.12);
}
.req::before { content: ''; position: absolute; top: 0; left: clamp(24px, 3vw, 40px); width: 64px; height: 3px; background: var(--brass); }
.req__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 2px solid var(--ink-deep); }
.req__title { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.015em; }
.req__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(16, 32, 31, 0.25);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.35s, color 0.35s;
}
.req__copy:hover { background: var(--teal); color: var(--ivory); box-shadow: none; }
.req__copy .icon { width: 18px; height: 18px; }
.req__copy.is-copied { background: var(--teal); color: var(--ivory); box-shadow: none; }
.req__list > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.req__list dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #56625F; padding-top: 3px; }
.req__list dd { font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.req__mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.req__status { min-height: 1.5em; margin-top: 12px; font-size: 13px; color: var(--teal); }

/* -------------------------------------------- 11 contact, form, map */

.contact__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.contact__promise { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 10px 16px; border-radius: 999px; background: var(--sage); font-size: 14.5px; font-weight: 500; }
.contact__promise .icon { width: 20px; height: 20px; color: var(--teal); }
.contact__list { margin-top: 34px; border-top: 1px solid var(--line-strong); }
.contact__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact__row dt { display: flex; align-items: center; gap: 10px; align-self: start; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); min-height: 26px; }
.contact__row dt .icon { width: 20px; height: 20px; color: var(--teal); }
.contact__row dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 16px; line-height: 1.5; }
.contact__row dd .link { min-height: 26px; display: inline-flex; align-items: center; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s;
}
.social .icon { width: 20px; height: 20px; }
.social:hover { background: var(--teal); color: var(--ivory); box-shadow: none; }

.form {
  position: relative;
  padding: clamp(26px, 3.4vw, 48px);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.form::before { content: ''; position: absolute; top: 0; left: clamp(26px, 3.4vw, 48px); width: 64px; height: 3px; background: var(--brass); }
.form__title { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 400; letter-spacing: -0.015em; }
.form__hint { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.field { position: relative; margin-top: 24px; }
.field label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.3s; }
.field:focus-within label { color: var(--teal); }
.req-star { color: var(--brass-ink); }
/* the focus underline sweeps in as a background layer on the control itself */
.field input, .field select, .field textarea {
  --sweep: linear-gradient(var(--teal), var(--teal)) 0 100% / 0 2px no-repeat;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--sweep);
  font-size: 17px;
  color: var(--ink);
  transition: border-color 0.3s, background-size 0.5s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.field select {
  padding-right: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%230F3D3E' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E") right 4px center / 14px no-repeat, var(--sweep);
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: #697472; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--teal); background-size: 100% 2px; }
.field select:focus { background-size: 14px, 100% 2px; }
.field__error { margin-top: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: #A4442F; }
.field__error[hidden] { display: none; }
.field.is-invalid label { color: #A4442F; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #A4442F; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.form__actions .btn { flex: 1 1 auto; }
.form__privacy { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.form__sent { display: none; margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--sage); font-size: 14.5px; color: var(--teal); }
.form.is-sent .form__sent { display: block; animation: qq-faq-in 0.5s var(--ease-out) both; }

.map { position: relative; margin-top: clamp(56px, 7vw, 96px); border-radius: var(--radius-lg); overflow: hidden; background: var(--sage); }
/* default state: address card over a schematic street sketch (never an empty box) */
.map__ph { position: relative; display: flex; align-items: center; min-height: clamp(320px, 34vw, 460px); padding: clamp(20px, 4vw, 56px); }
.map__sketch { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__streets path { fill: none; stroke: rgba(15, 61, 62, 0.16); stroke-width: 14; stroke-linecap: round; }
.map__lanes path { fill: none; stroke: rgba(15, 61, 62, 0.22); stroke-width: 1; stroke-dasharray: 6 8; }
.map__ring { fill: rgba(176, 141, 87, 0.16); stroke: var(--brass); stroke-width: 1; }
.map__dot { fill: var(--teal); stroke: var(--paper); stroke-width: 3; }
.map__card {
  position: relative;
  max-width: 440px;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.map__card::before { content: ''; position: absolute; top: 0; left: clamp(22px, 2.6vw, 34px); width: 56px; height: 3px; background: var(--brass); }
.map__addr { margin-top: 10px; font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.map__near { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.map__frame { display: block; width: 100%; height: clamp(320px, 34vw, 460px); border: 0; filter: grayscale(1) sepia(0.18) contrast(0.96) brightness(1.02); }
.map__frame[hidden], .map__open[hidden] { display: none; }
.map.is-loaded .map__ph { display: none; }
.map.is-loaded::after { content: ''; position: absolute; inset: 0; background: var(--teal); mix-blend-mode: color; opacity: 0.32; pointer-events: none; }
.map__open { position: absolute; z-index: 1; left: 20px; bottom: 20px; }

/* ----------------------------------------- 12 family, footer, floating */

.family { background: var(--paper); padding: clamp(64px, 8vw, 112px) 0; }
.family__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-bottom: 34px; }
.family__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.family__grid > li { display: flex; }
.sibling {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--ivory);
  transition: box-shadow 0.4s, transform 0.6s var(--ease-out);
}
a.sibling:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-soft); }
.sibling__mark { width: 46px; height: auto; fill: var(--teal); margin-bottom: 28px; }
.sibling__name { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 27px); font-weight: 420; letter-spacing: -0.012em; }
.sibling__text { margin-top: 10px; flex: 1; font-size: 15px; color: var(--ink-soft); }
.sibling__url { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--teal); }
.sibling__url .icon { width: 16px; height: 16px; transition: transform 0.45s var(--ease-out); }
a.sibling:hover .sibling__url .icon { transform: translate(3px, -3px); }
.sibling--current { background: var(--teal); color: var(--ivory); box-shadow: none; }
.sibling--current .sibling__mark { fill: var(--brass-light); }
.sibling--current .sibling__text { color: rgba(246, 242, 234, 0.74); }
.sibling__here { color: var(--brass-light); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.sibling__here::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.site-footer {
  --ink: #F6F2EA;
  --ink-soft: rgba(246, 242, 234, 0.66);
  --line: rgba(246, 242, 234, 0.14);
  --brass-ink: var(--brass-light);
  background: var(--teal-deep);
  color: var(--ink);
  padding: clamp(64px, 8vw, 112px) 0 32px;
  overflow: hidden;
}
.site-footer__top { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 2.4fr) minmax(0, 3.2fr) minmax(0, 2.8fr); gap: 40px; }
.brand--light { color: var(--brass-light); }
.brand--light .brand__name { color: var(--ivory); }
.brand--light .brand__sub { color: var(--ivory); }
.site-footer__desc { margin-top: 22px; max-width: 34ch; font-size: 15px; color: var(--ink-soft); }
.site-footer__col .label { margin-bottom: 16px; color: var(--brass-light); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col ul li + li { margin-top: 8px; }
.site-footer__col .site-footer__social li + li { margin-top: 0; }
.site-footer__col a, .site-footer__addr, .site-footer__hours { font-size: 15px; }
.site-footer__col .link { display: inline-flex; min-height: 30px; align-items: center; }
.site-footer__addr { line-height: 1.55; }
.site-footer__hours { margin-top: 12px; color: var(--ink-soft); font-size: 14px; }
.site-footer .site-footer__social { display: flex; gap: 8px; margin-top: 22px; }
.site-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 0.35s, color 0.35s; }
.site-footer__social a:hover { background: var(--brass-light); color: var(--teal-deep); }
.site-footer__social .icon { width: 20px; height: 20px; }
.site-footer__word {
  margin: clamp(56px, 7vw, 96px) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(64px, 17.4vw, 258px);
  line-height: 0.8;
  letter-spacing: -0.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(214, 184, 136, 0.42);
  white-space: nowrap;
  user-select: none;
  text-align: center;
  padding-bottom: 0.14em;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.site-footer__top-link { color: var(--ink); }

/* floating actions: hidden while the hero, the sector ROI list, the $1M scenario, the contact
   section or the footer is on screen (those already show the same actions, or the buttons would cover figures);
   over the deep-teal sections the colours flip so the buttons stay visible (site.js) */
.fab { position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; gap: 10px; transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out), visibility 0.35s; }
.js .fab:not(.is-ready), .fab.is-tucked { opacity: 0; visibility: hidden; transform: translate3d(0, 14px, 0); pointer-events: none; }
.fab__btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--ivory);
  box-shadow: 0 14px 30px -12px rgba(10, 44, 45, 0.6), inset 0 0 0 1px rgba(214, 184, 136, 0.35);
  transition: transform 0.45s var(--ease-out), background-color 0.35s, color 0.35s;
}
.fab.is-on-dark .fab__btn--wa { background: var(--brass-light); color: var(--ink-deep); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); }
.fab.is-on-dark .fab__btn--call { background: var(--ivory); color: var(--teal); }
.fab__btn:hover { transform: translateY(-3px); background: var(--ink-deep); }
.fab__btn .icon { width: 24px; height: 24px; stroke-width: 1.5; }
.fab__btn--call { display: none; background: var(--brass); color: var(--ink-deep); }
.nav-open .fab { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------- 13 motion */

@keyframes qq-draw { to { stroke-dashoffset: 0; } }
@keyframes qq-fade-to { to { opacity: var(--to, 1); } }
@keyframes qq-pulse {
  0% { opacity: 0.45; transform: scale(0.5); }
  80%, 100% { opacity: 0; transform: scale(2.2); }
}
@keyframes qq-row-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
@keyframes qq-panel-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes qq-faq-in { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes qq-hero-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes qq-line-in { from { opacity: 0; transform: translate3d(0, 0.38em, 0); } }
@keyframes qq-fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  /* base.css shortens durations; delays must go too, or "both"/"forwards" animations
     would keep elements invisible until their original start time */
  *, *::before, *::after { animation-delay: 0s !important; }
  .hero__mark, .plate__contours path, .plate__line, .closing__mark { stroke-dashoffset: 0; }
  .plate__pulse { animation: none; opacity: 0; }
  .roi__bar { transform: none; }
}

/* ------------------------------------------------------ 14 responsive */

@media (max-width: 1240px) {
  .site-nav__list a { padding: 12px 8px; font-size: 14px; }
  .site-nav__list a::after { left: 8px; right: 8px; }
  .site-nav__n { display: none; }
}

/* small desktops: all ten chapter links fit on one line, so the strip never scrolls
   or shifts sideways when the current item changes */
@media (min-width: 1101px) and (max-width: 1320px) {
  .chapter-nav__list a { padding: 0 8px; font-size: 13px; }
  .chapter-nav__list a::after { left: 8px; right: 8px; }
}
@media (min-width: 1101px) and (max-width: 1240px) {
  .chapter-nav__n { display: none; } /* as in the main nav at these widths */
}

@media (max-width: 1100px) {
  .nav-toggle { display: inline-block; }
  .site-header__inner { gap: 16px; }
  .site-header__actions { margin-left: auto; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: calc(var(--header-h) + 20px) var(--gutter) max(28px, env(safe-area-inset-bottom));
    background: var(--teal);
    color: var(--ivory);
    overflow-y: auto;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.65s var(--ease-in-out), visibility 0s linear 0.65s;
  }
  .nav-open .site-nav { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.65s var(--ease-in-out); }
  .nav-open .site-header::before { opacity: 0; }
  .nav-open .site-header { color: var(--ivory); }
  .nav-open .brand { color: var(--brass-light); }
  .nav-open .brand__name { color: var(--ivory); }
  .nav-open .brand__sub { color: var(--ivory); }
  .nav-open .site-header__actions .lang-switch { opacity: 0; pointer-events: none; }
  .nav-open .nav-toggle { box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.4); }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list li { border-bottom: 1px solid rgba(246, 242, 234, 0.14); }
  .site-nav__list a {
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 7.6vw, 46px);
    font-weight: 340;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ivory);
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .site-nav__list a::after { display: none; }
  .site-nav__n { display: inline; font-size: 15px; color: var(--brass-light); margin: 0; min-width: 22px; }
  .nav-open .site-nav__list a { opacity: 1; transform: none; }
  .nav-open .site-nav__list li:nth-child(1) a { transition-delay: 0.2s; }
  .nav-open .site-nav__list li:nth-child(2) a { transition-delay: 0.25s; }
  .nav-open .site-nav__list li:nth-child(3) a { transition-delay: 0.3s; }
  .nav-open .site-nav__list li:nth-child(4) a { transition-delay: 0.35s; }
  .nav-open .site-nav__list li:nth-child(5) a { transition-delay: 0.4s; }
  .nav-open .site-nav__list li:nth-child(6) a { transition-delay: 0.45s; }

  .site-nav__extra {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: auto;
    padding-top: 36px;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out);
  }
  .nav-open .site-nav__extra { opacity: 1; transition-delay: 0.5s; }
  .site-nav__extra .lang-switch { margin-bottom: 26px; box-shadow: inset 0 0 0 1px rgba(246, 242, 234, 0.35); }
  .site-nav__extra .lang-switch button { height: 44px; min-width: 56px; color: rgba(246, 242, 234, 0.75); }
  .site-nav__extra .lang-switch button.is-active { background: var(--brass-light); color: var(--teal-deep); }
  .site-nav__label { color: var(--brass-light); margin-bottom: 8px; }
  .site-nav__contact { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; color: var(--ivory); }
  .site-nav__contact--mail { font-size: 15px; color: rgba(246, 242, 234, 0.8); }

  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .closing__mark { width: 30vw; opacity: 0.4; }
  .plate { max-width: 680px; }
  .services__layout, .online__layout { grid-template-columns: minmax(0, 1fr); }
  .services__head, .online__head { position: static; }
  .online__count { display: none; }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .scenario { grid-template-columns: minmax(0, 1fr); }
  .scenario__intro { position: static; }
  .questions, .partner { grid-template-columns: minmax(0, 1fr); }
  .questions__intro { position: static; }
  .tender__layout, .contact__layout { grid-template-columns: minmax(0, 1fr); }
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }

  .chapter-nav .chapter-nav__list { justify-content: flex-start; }
  .alts__head { display: none; }
  .alt { grid-template-columns: 48px minmax(0, 0.8fr) minmax(0, 1.4fr); row-gap: 10px; }
  .alt__icon, .alt__t { grid-row: 1 / span 2; }
  .alt__gain { grid-column: 3; }
}

/* tablet: keep the three-up rows instead of one long column */
@media (min-width: 700px) and (max-width: 1099px) {
  .partner__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n + 3) { margin-top: 28px; border-top: 1px solid var(--line); }
  .pillar__n { font-size: 56px; }
  .pillar .h4 { margin-top: 22px; }
  .reasons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smart { grid-template-columns: minmax(0, 1fr); }
  .smart__text { margin-top: 28px; }
  .taccount { grid-template-columns: minmax(0, 1fr); }
  .taccount__col, .taccount__col + .taccount__col { padding: 24px 0 8px; border-left: 0; }
  .taccount__col + .taccount__col { border-top: 1px solid var(--ink); }
  .section-head--split { grid-template-columns: minmax(0, 1fr); }
  .build__cta { grid-template-columns: minmax(0, 1fr); }
  .build__cta .btn { justify-self: start; }
  .roadmap__phases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .risks { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sub__head--row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sub__head--row .sub__text { margin-top: 16px; }
  .family__grid { grid-template-columns: minmax(0, 1fr); }
  .disclaimer { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 699px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar, .pillar:first-child { padding: 28px 0 32px; border-left: 0; border-bottom: 1px solid var(--line); }
  .pillar__icon, .pillar:last-child .pillar__icon { right: 0; }
}

@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .brand__mark { width: 38px; }
  .brand__name, .brand__sub { font-size: 19px; }
  .site-header__cta { display: none; }
  .site-header__actions { gap: 8px; }

  .chapter-nav__list a { min-height: 44px; font-size: 13px; }

  .hero { padding-top: calc(var(--header-h) + 40px); }
  .hero__mark { width: 128vw; right: -48vw; top: calc(var(--header-h) + 150px); opacity: 0.3; }
  .hero__eyebrow { font-size: 10.5px; letter-spacing: 0.11em; gap: 10px; }
  .hero__eyebrow-rule { width: 18px; flex: none; }
  /* phones: the emphasis takes its own line and keeps the staircase */
  .hero__title { font-size: clamp(38px, 11vw, 52px); letter-spacing: -0.03em; line-height: 1.02; }
  .hero__line--2, .hero__line--3 { padding-left: 0; }
  .hero__line em { display: block; }
  .hero__line--2 em { padding-left: 0.5em; }
  .hero__line--3 em { padding-left: 1em; }
  .hero__ctas { gap: 10px 24px; }
  .hero__ctas .btn { width: 100%; }
  .plate { padding: 16px 14px 14px; }
  .plate::before { left: 14px; }
  .plate .plate__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  /* the chart is drawn ~330px wide: sizes in viewBox units give ~13px and ~11px text */
  .plate__steps text { font-size: 20px; transform: translateY(3px); }
  .plate__steps circle { transform: scale(1.4); }
  .plate__ticks text { font-size: 24px; }
  .plate__ticks .tick--minor { display: none; }
  .fact { padding-top: 22px; }
  .fact__k { font-size: 14px; margin-top: 12px; }
  .fact__v { font-size: 13px; }

  .ledger { grid-template-columns: minmax(0, 1fr); }
  .ledger__item, .ledger__item:nth-child(even) { padding: 30px 0 34px; border-left: 0; }
  .ledger__top { margin-bottom: 24px; }

  .online__table { padding: 18px 16px; }
  .checklist__row { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 12px; padding: 15px 2px; }
  .checklist__tag { display: none; }
  .checklist__name { font-size: 15.5px; }
  /* one scrollable row of filters instead of a wrapped orphan */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 2px 16px; scroll-padding: 0 16px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 44px; padding: 0 14px; }

  .pullquote { padding-left: 20px; }
  .reasons__list { grid-template-columns: minmax(0, 1fr); }

  .alt { grid-template-columns: 40px minmax(0, 1fr); padding: 24px 0 26px; }
  .alt__icon { width: 30px; height: 30px; grid-row: 1 / span 3; }
  .alt__t, .alt__p, .alt__gain { grid-column: 2; }
  .alt__t { grid-row: auto; }

  .roi__row { --cols: minmax(0, 1fr) auto; grid-template-areas: 'name val' 'track track'; row-gap: 12px; padding: 16px 12px 18px 16px; }
  .roi__name { grid-area: name; }
  .roi__val { grid-area: val; }
  .roi__track { grid-area: track; }
  .roi__axis { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 0 16px; }
  .roi__axis-ticks { grid-column: 1; }

  .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .seg__btn { padding: 0 6px; font-size: 14px; }
  .rbar { grid-template-columns: 4.4rem minmax(0, 1fr) 5.8rem; gap: 10px; }
  .rbar__v { font-size: 13px; }

  /* mobile table: only the selected scenario column is shown (acts as tabs) */
  .sc-table th, .sc-table td { padding: 15px 10px; }
  .sc-table tbody th { padding-left: 0; font-size: 14.5px; }
  [data-active="cons"] .sc-table [data-col]:not([data-col="cons"]),
  [data-active="base"] .sc-table [data-col]:not([data-col="base"]),
  [data-active="opt"] .sc-table [data-col]:not([data-col="opt"]) { display: none; }

  .roadmap__phases { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .roadmap__ticks { font-size: 12px; }

  /* construction: the three steps run down a vertical hairline */
  .build .build__steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; border-top: 0; border-left: 1px solid var(--line-strong); padding-left: 24px; row-gap: 40px; }
  .build__step { display: block; padding-top: 0; }
  .build__step::before { top: 6px; left: -29px; }
  .build__step::after { display: none; }
  .build__n { display: inline-block; }
  .build__icon { float: right; margin-top: -4px; width: 32px; height: 32px; }
  .build__step .h3 { margin: 18px 0 10px; }

  .faq__item summary { grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 10px; }
  .faq__a { padding: 0 0 24px 40px; font-size: 15.5px; }
  .partner__grid { grid-template-columns: minmax(0, 1fr); }
  .partner__item, .partner__item:nth-child(even) { padding: 26px 0 28px; border-left: 0; }

  .closing__actions .btn, .build__cta .btn, .tender__actions .btn { width: 100%; }
  .closing__mark { display: none; }

  .req__list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .taccount__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .req__head { flex-wrap: wrap; }

  .contact__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .form__actions .btn { width: 100%; }
  .map__ph { align-items: flex-end; min-height: 420px; padding: 16px; }
  .map__actions .btn { width: 100%; }
  .map__open { left: 12px; bottom: 12px; }

  .site-footer { padding-bottom: 96px; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .site-footer__bottom { flex-direction: column; }
  .site-footer__sep { display: none; }
  .site-footer__tin { display: block; }
  /* two compact buttons tight to the corner */
  .fab { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); gap: 8px; }
  .fab__btn { width: 48px; height: 48px; }
  .fab__btn .icon { width: 22px; height: 22px; }
  .fab__btn--call { display: grid; }
}

/* touch screens (phones and tablets): links and buttons are at least 44px tall.
   Where links stack, the gaps between them shrink and the first and last reach into
   the surrounding padding, so the text keeps its place and the rhythm stays the same. */
@media (max-width: 640px), (pointer: coarse) {
  .lang-switch button { min-width: 44px; height: 44px; }
  .chip { min-height: 44px; }

  .contact__row dd { gap: 0; }
  .contact__row dd .link { min-height: 44px; background-position: 0 calc(50% + 0.8em); }
  .contact__row dd .link:first-child { margin-top: -9px; }
  .contact__row dd .link:last-child { margin-bottom: -9px; }

  .site-footer__col ul li + li { margin-top: 0; }
  .site-footer__col ul:not(.site-footer__social) { margin: -7px 0; }
  .site-footer__col .link, .site-footer .site-footer__top-link { min-width: 44px; min-height: 44px; background-position: 0 calc(50% + 0.8em); }
  .site-footer .site-footer__top-link { display: inline-flex; align-items: center; gap: 0.28em; align-self: flex-start; margin: -10px 0; } /* gap: flex drops the space before ↑ */
}

/* smallest phones: the eyebrow stays on one line */
/* three language buttons no longer fit beside the logo: on phones they stay in the menu */
@media (max-width: 430px) {
  .site-header__actions .lang-switch { display: none; }
}

@media (max-width: 380px) {
  .hero__eyebrow { letter-spacing: 0.08em; gap: 8px; }
  /* the longest service ("Onlayn qeydiyyat və hesabatlar") must fit the closed select; 16px keeps iOS from zooming */
  .field select { font-size: 16px; padding-right: 24px; background-position: right 2px center, 0 100%; }
}

@media (hover: none) {
  .ledger__item:hover::before, .alt:hover::before { transform: scaleX(0); }
  a.sibling:hover { transform: none; }
}