/* Japandi Editorial (Banamco edition): light paper, deep navy panels from the logo blue, Banamco orange accent. Large light-weight headings, Naskh accent words,
   hairline rules instead of cards, numbered "index" lists. Built for the Banamco demo; reusable kit in the redesign skill (assets/kits/editorial). */
:root {
  --paper: #F4F1EA;
  --paper-2: #EBE6DC;
  --white: #FCFBF8;
  --line: #DCD5C8;
  --ink: #1B1F1D;
  --ink-soft: #5C625E;
  --sage: #1F2C52;      /* deep navy (logo blue, darkened) */
  --sage-2: #DDE2EE;
  --oak: #C9601C;       /* Banamco orange, deepened for text contrast */
  --head: "Readex Pro", "IBM Plex Sans Arabic", sans-serif;
  --serif: "Noto Naskh Arabic", "Amiri", serif;
  --body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --pad: clamp(1rem, 4vw, 3.5rem);
  --max: 1320px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--paper); color: var(--ink); line-height: 1.85; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 300; line-height: 1.25; letter-spacing: 0; }
em { font-family: var(--serif); font-style: normal; font-weight: 500; color: var(--oak); }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Labels: small numbered kicker with a rule */
.kicker { display: flex; align-items: center; gap: .8rem; font-size: .82rem; color: var(--ink-soft); margin-bottom: 1.4rem; font-weight: 500; }
.kicker b { font-family: var(--head); font-weight: 500; color: var(--sage); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); max-width: 120px; }
.h-xl { font-size: clamp(2.4rem, 6.6vw, 5.8rem); line-height: 1.12; }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.2; }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.lead { color: var(--ink-soft); font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 36rem; }
.statement { font-family: var(--head); font-weight: 300; font-size: clamp(1.4rem, 2.7vw, 2.3rem); line-height: 1.6; max-width: 58rem; }
.statement em { font-size: 1.05em; }

/* Buttons: pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .9rem 1.7rem; border-radius: 999px; border: 1px solid var(--ink); font-weight: 500; font-size: .96rem; transition: background .35s, color .35s, border-color .35s, transform .4s var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--sage); border-color: var(--sage); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-outline-light { border-color: rgba(244, 241, 234, .55); color: var(--paper); }
.btn-outline-light:hover { background: var(--paper); color: var(--ink); }
.link { display: inline-flex; gap: .5rem; align-items: center; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: .15rem; transition: gap .3s var(--ease), color .3s; }
.link:hover { gap: .9rem; color: var(--sage); }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 234, .88); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.header.scrolled { border-bottom-color: var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1rem; }
.logo img { height: 40px; width: auto; }
.nav { display: flex; gap: 2.2rem; font-size: .95rem; }
.nav a { color: var(--ink-soft); position: relative; transition: color .3s; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a.active::before { content: ""; position: absolute; top: 50%; inset-inline-start: -.8rem; width: 5px; height: 5px; border-radius: 50%; background: var(--oak); transform: translateY(-50%); }
.header-cta { display: flex; gap: .6rem; align-items: center; }
.header-cta .btn { padding: .6rem 1.2rem; font-size: .88rem; }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; }
.menu-btn svg { width: 26px; height: 26px; }

/* Home cover */
.cover { padding-top: clamp(2.5rem, 6vw, 5rem); }
.cover-top { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cover-top .lead { margin-top: 1.4rem; }
.cover-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }
.cover-index { list-style: none; min-width: 240px; border-top: 1px solid var(--ink); font-size: .92rem; }
.cover-index li { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .55rem; border-bottom: 1px solid var(--line); }
.cover-index li span { color: var(--ink-soft); font-family: var(--head); }
.cover-media { position: relative; overflow: hidden; aspect-ratio: 16 / 7.4; background: var(--paper-2); }
.cover-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.2s var(--ease); }
.cover-media.in img { transform: scale(1); }
.cover-note { position: absolute; inset-inline-start: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); background: var(--white); padding: 1rem 1.2rem; max-width: 300px; font-size: .88rem; color: var(--ink-soft); }
.cover-note strong { display: block; font-family: var(--head); font-weight: 500; font-size: 1.05rem; color: var(--ink); }

/* Marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 4rem); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--head); font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 2rem); padding: 1.1rem 1.6rem; white-space: nowrap; color: var(--ink-soft); }
.marquee span::after { content: "✦"; color: var(--oak); font-size: .6em; margin-inline-start: 3.2rem; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(50%); } }

/* Facts row: hairlines, no cards */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); margin-top: clamp(2.5rem, 5vw, 4rem); }
.fact { padding: 1.4rem 1.2rem 0 0; border-inline-start: 1px solid var(--line); padding-inline-start: 1.2rem; }
.fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.fact strong { display: block; font-family: var(--head); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.2; }
.fact span { color: var(--ink-soft); font-size: .92rem; }

/* Index list (services) with hover preview */
.index-list { list-style: none; border-top: 1px solid var(--ink); position: relative; }
.index-row { display: grid; grid-template-columns: 4.5rem 1fr 1.2fr auto; align-items: center; gap: 1.5rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease), background .4s; position: relative; }
.index-row:hover { padding-inline: 1rem; background: var(--white); }
.index-row .num { font-family: var(--head); color: var(--oak); font-size: .95rem; }
.index-row h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.index-row p { color: var(--ink-soft); font-size: .95rem; }
.index-row .arrow { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background .3s, color .3s, transform .4s var(--ease); }
.index-row:hover .arrow { background: var(--ink); color: var(--paper); transform: rotate(-45deg); }
.index-row .arrow svg { width: 18px; height: 18px; }
.index-row .thumb { display: none; }
.preview { position: fixed; z-index: 30; width: 260px; aspect-ratio: 4 / 5; pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .4s var(--ease); overflow: hidden; }
.preview.show { opacity: 1; transform: scale(1); }
.preview img { width: 100%; height: 100%; object-fit: cover; }

/* Planner (replaces the configurator) */
.planner { background: var(--sage); color: var(--paper); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.6rem, 5vw, 4rem); }
.planner .kicker { color: rgba(244, 241, 234, .7); }
.planner .kicker b { color: var(--paper); }
.planner .kicker::after { background: rgba(244, 241, 234, .25); }
.planner .lead { color: rgba(244, 241, 234, .78); margin-block: 1rem 2rem; }
.wall { margin-bottom: 1.4rem; }
.wall-head { display: flex; justify-content: space-between; font-size: .95rem; margin-bottom: .5rem; }
.wall-head output { font-family: var(--head); font-weight: 500; }
.wall input[type=range] { width: 100%; appearance: none; -webkit-appearance: none; height: 2px; background: rgba(244, 241, 234, .3); outline: none; }
.wall input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 5px solid var(--oak); cursor: grab; }
.wall input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 5px solid var(--oak); cursor: grab; }
.wall input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--paper); outline-offset: 3px; }
.toggles { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: .4rem 2rem; }
.toggle { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(244, 241, 234, .35); border-radius: 999px; padding: .45rem 1rem; font-size: .9rem; cursor: pointer; transition: background .3s, color .3s; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; }
.toggle:has(input:checked) { background: var(--paper); color: var(--sage); }
.toggle:has(input:checked)::before { background: var(--oak); border-color: var(--oak); }
.toggle:has(input:focus-visible) { outline: 2px solid var(--paper); outline-offset: 2px; }
.plan-view { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.plan-view svg { width: 100%; height: auto; display: block; margin-block: auto; padding: 1rem; }
.plan-total { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 1.2rem 1.4rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.plan-total strong { font-family: var(--head); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.plan-total span { color: var(--ink-soft); font-size: .88rem; display: block; }
.plan-shape { font-size: .9rem; color: var(--sage); font-weight: 500; }
.plan-note { font-size: .82rem; color: rgba(244, 241, 234, .65); margin-top: 1rem; }

/* Horizontal reel */
.reel-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.reel-nav { display: flex; gap: .5rem; }
.reel-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; display: grid; place-items: center; transition: background .3s, color .3s; }
.reel-nav button:hover { background: var(--ink); color: var(--paper); }
.reel-nav svg { width: 20px; height: 20px; }
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 30vw, 400px); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--pad); scroll-padding-inline: var(--pad); padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.reel figure { scroll-snap-align: start; }
.reel .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.reel .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.reel figure:hover .ph img { transform: scale(1.05); }
.reel figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; font-size: .92rem; }
.reel figcaption span { color: var(--ink-soft); }
.reel-wide { grid-auto-columns: clamp(300px, 46vw, 620px); }
.reel-wide .ph { aspect-ratio: 4 / 3; }

/* Before / after */
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; background: var(--paper-2); touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: var(--paper); transform: translateX(-1px); }
.ba .handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; transform: translate(-50%, -50%); font-size: 1.1rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.ba .tag { position: absolute; top: 1rem; background: rgba(27, 31, 29, .7); color: var(--paper); font-size: .8rem; padding: .25rem .8rem; border-radius: 999px; }
.ba .tag.b { left: 1rem; } .ba .tag.a { right: 1rem; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* Sticky split (process) */
.sticky-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.sticky-split .side { position: sticky; top: 110px; }
.steps { list-style: none; counter-reset: s; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding-block: 1.8rem; border-bottom: 1px solid var(--line); }
.steps li::before { counter-increment: s; content: "٠" counter(s, arabic-indic); font-family: var(--head); font-weight: 300; font-size: 1.8rem; color: var(--oak); line-height: 1.2; }
.steps h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: .2rem; }
.steps p { color: var(--ink-soft); }

/* Duo: two images + text */
.duo { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.duo .a { aspect-ratio: 4 / 3.2; overflow: hidden; }
.duo .b { aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: clamp(2rem, 8vw, 7rem); }
.duo img { width: 100%; height: 100%; object-fit: cover; }

/* CTA */
.cta { background: var(--ink); color: var(--paper); padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; }
.cta em { color: #F2A15E; }
.cta p { color: rgba(244, 241, 234, .72); margin-bottom: 1.6rem; }
.cta .actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* Inner page hero */
.page-hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; border-bottom: 1px solid var(--ink); }
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 1rem; }
.crumbs a:hover { color: var(--ink); }
.page-hero .lead { max-width: 26rem; }

/* Service chapters */
.chapter { display: grid; grid-template-columns: 5rem 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line); align-items: start; }
.chapter .num { font-family: var(--head); font-weight: 300; font-size: 3rem; color: var(--oak); line-height: 1; }
.chapter h2 { margin-bottom: .8rem; }
.chapter .ph { aspect-ratio: 5 / 4; overflow: hidden; }
.chapter .ph img { width: 100%; height: 100%; object-fit: cover; }
.specs { list-style: none; margin-block: 1.6rem 2rem; border-top: 1px solid var(--line); }
.specs li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.specs li span { color: var(--ink-soft); }

/* Gallery (projects) */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 2rem; }
.filter { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1.2rem; color: var(--ink-soft); transition: all .3s; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.masonry { columns: 3; column-gap: 1.2rem; }
.shot { break-inside: avoid; margin-bottom: 1.6rem; display: block; }
.shot .ph { overflow: hidden; background: var(--paper-2); }
.shot img { width: 100%; height: auto; transition: transform 1.2s var(--ease); cursor: zoom-in; }
.shot:hover img { transform: scale(1.04); }
.shot figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .6rem; font-size: .9rem; }
.shot figcaption span { color: var(--ink-soft); }
.shot.hide { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(20, 23, 21, .94); display: none; place-items: center; padding: 4vw; }
.lightbox.open { display: grid; }
.lightbox img { max-height: 86vh; width: auto; max-width: 100%; }
.lightbox button { position: absolute; top: 1rem; inset-inline-end: 1rem; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 0; font-size: 1.3rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.form { display: grid; gap: 1.4rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field label { display: block; font-size: .85rem; color: var(--ink-soft); margin-bottom: .2rem; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: .6rem 0; transition: border-color .3s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--oak); border-bottom-width: 2px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #A39E94; }
.field .err { color: #A3412D; font-size: .85rem; min-height: 1.2em; display: block; margin-top: .2rem; }
.form-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.info { border-top: 1px solid var(--ink); }
.info-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: 1.2rem; border-bottom: 1px solid var(--line); font-size: .98rem; }
.info-row h3 { font-family: var(--body); font-weight: 500; font-size: .88rem; color: var(--ink-soft); }
.info-row a { border-bottom: 1px solid var(--line); }
.info-row a:hover { border-color: var(--ink); }

/* Footer */
.footer { background: var(--paper-2); color: var(--ink-soft); margin-top: clamp(4rem, 8vw, 7rem); }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: 4rem 2.5rem; }
.footer .logo img { height: 44px; }
.footer h4 { font-family: var(--head); font-weight: 500; color: var(--ink); font-size: 1rem; margin-bottom: .8rem; }
.footer ul { list-style: none; display: grid; gap: .45rem; font-size: .93rem; }
.footer a:hover { color: var(--ink); }
.footer .about { font-size: .93rem; margin-top: 1.1rem; max-width: 22rem; }
.footer-bottom { border-top: 1px solid var(--line); text-align: center; font-size: .85rem; padding-block: 1.2rem; }

/* WhatsApp float + mobile bar */
.wa-float { position: fixed; inset-inline-start: 1.4rem; bottom: 1.4rem; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); transition: transform .3s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }
.mobile-bar { display: none; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }


/* Tabs (branch finder) + segmented control (care centre) */
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.tab { background: none; border: 0; padding: .8rem 1.1rem; font-size: 1rem; color: var(--ink-soft); position: relative; }
.tab sup { font-size: .7rem; color: var(--oak); margin-inline-start: .2rem; }
.tab[aria-selected="true"] { color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: .6rem; bottom: -1px; height: 2px; background: var(--oak); }
.tab-panel[hidden] { display: none; }
.branches { list-style: none; }
.branch { display: grid; grid-template-columns: 3rem 1.4fr 1fr auto; gap: 1.2rem; align-items: center; padding-block: 1.3rem; border-bottom: 1px solid var(--line); }
.branch .num { font-family: var(--head); color: var(--oak); }
.branch h3 { font-family: var(--head); font-weight: 400; font-size: 1.15rem; }
.branch p { color: var(--ink-soft); font-size: .9rem; }
.branch .actions { display: flex; gap: .5rem; }
.branch > a.ltr { white-space: nowrap; }
.branch .actions a { font-size: .85rem; padding: .45rem .95rem; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 1rem; }
.seg button { background: none; border: 0; border-radius: 999px; padding: .65rem .4rem; font-size: .92rem; transition: background .3s, color .3s; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg-hint { color: var(--ink-soft); font-size: .92rem; min-height: 1.6em; margin-bottom: 1.6rem; }
.care { background: var(--white); padding: clamp(1.5rem, 4vw, 3rem); }
.timeline { list-style: none; border-top: 1px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding-block: 1.8rem; border-bottom: 1px solid var(--line); }
.timeline .yr { font-family: var(--head); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--oak); line-height: 1.1; }
.timeline h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: .2rem; }
.timeline p { color: var(--ink-soft); }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.photo-pair figure .ph { aspect-ratio: 4 / 3; overflow: hidden; }
.photo-pair img { width: 100%; height: 100%; object-fit: cover; }
.photo-pair figcaption { font-size: .88rem; color: var(--ink-soft); padding-top: .6rem; }
@media (max-width: 860px) {
  .branch { grid-template-columns: 2rem 1fr auto; row-gap: .7rem; }
  .branch > div:not(.actions) { grid-column: 2 / 4; }
  .branch > a.ltr { grid-column: 2; grid-row: 2; justify-self: start; }
  .branch .actions { grid-column: 3; grid-row: 2; }
  .seg { grid-template-columns: 1fr 1fr; border-radius: 22px; }
  .timeline li { grid-template-columns: 1fr; gap: .3rem; }
  .photo-pair { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .fact { padding-bottom: 1.4rem; }
  .masonry { columns: 2; }
}

@media (max-width: 860px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .header .wrap { height: 66px; }
  .logo img { height: 34px; }
  .menu-btn { display: grid; place-items: center; }
  .header.open .nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 66px; inset-inline: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem var(--pad) 1rem; }
  .header.open .nav a { padding-block: .9rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .header.open .nav a.active::before { display: none; }
  .cover-top, .page-hero, .planner, .sticky-split, .duo, .cta, .contact-grid, .chapter { grid-template-columns: 1fr; }
  .cover-index { display: none; }
  .cover-media { aspect-ratio: 4 / 4.2; margin-inline: calc(var(--pad) * -1); }
  .cover-note { inset-inline: 1rem; max-width: none; }
  .cover-actions .btn { flex: 1 1 auto; }
  .index-row { grid-template-columns: 2.6rem 1fr auto; gap: 1rem; padding-block: 1.2rem; }
  .index-row p { grid-column: 2 / 4; grid-row: 2; font-size: .9rem; }
  .index-row .arrow { width: 40px; height: 40px; }
  .index-row:hover { padding-inline: 0; background: none; }
  .preview { display: none; }
  .planner { margin-inline: calc(var(--pad) * -1); }
  .sticky-split .side { position: static; }
  .duo .b { margin-bottom: 0; }
  .chapter { gap: 1rem; }
  .chapter .num { font-size: 2.2rem; }
  .chapter .ph { order: -1; }
  .reel { grid-auto-columns: 74%; }
  .reel-wide { grid-auto-columns: 86%; }
  .reel-nav { display: none; }
  .form .row { grid-template-columns: 1fr; }
  .footer .wrap { grid-template-columns: 1fr; }
  .wa-float { display: none; }
  .mobile-bar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: rgba(244, 241, 234, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: .6rem; gap: .6rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
  .mobile-bar a { flex: 1; text-align: center; padding: .8rem; border-radius: 999px; font-weight: 500; }
  .mobile-bar .call { border: 1px solid var(--ink); }
  .mobile-bar .wa { background: #25D366; color: #fff; }
  body { padding-bottom: 76px; }
}

@media (max-width: 520px) {
  .masonry { columns: 1; }
  .facts { grid-template-columns: 1fr 1fr; }
  .info-row { grid-template-columns: 1fr; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .cover-media img, .shot img, .reel .ph img { transform: none !important; transition: none; }
}