/* Keey Homes — main stylesheet (hand-maintained; Harroway direction rebuilt by hand)
   Palette: navy-tinted slate surfaces (Harroway's slate scale, re-based on the logo navy), logo navy #2D3078 accent tiles,
   roof orange #F17C31 for actions (ink labels: white on orange fails contrast). Logo file is used untouched.
   Type: Bodoni Moda (display) · Bricolage Grotesque (text) · Sono (labels). No CSS blend modes anywhere (cursor included). */

:root {
  --slate: #6F7790;
  --light-subtle: #DFE1E7;
  --light: #CDCFD8;
  --light-strong: #BEC2CD;
  --dark-subtle: #383C48;
  --dark: #21242B;
  --dark-strong: #15171C;
  --navy: #2D3078;
  --navy-deep: #22255F;
  --roof: #F17C31;
  --roof-hover: #FF8E45;
  --roof-text: #C2561A;
  --sky: #CBE7F3;
  --ink: #111216;
  --text: #1D1F27;
  --muted: #4A4E5C;
  --on-dark: #ECEDF2;
  --on-dark-muted: #A6AABA;
  --line: rgba(17, 18, 22, .16);
  --line-dark: rgba(236, 237, 242, .16);
  --serif: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --sans: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Sono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gut: clamp(1rem, .6rem + 2vw, 2.25rem);
  --max: 100rem;
  --radius: 12px;
  --gap: 4px;
  --header-h: 68px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --sec-bg: var(--light);
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--light); color: var(--text); font-family: var(--sans); font-size: clamp(1rem, .975rem + .125vw, 1.0625rem); line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
address { font-style: normal; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--roof); outline-offset: 3px; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--roof); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 500; transition: top .2s; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(4.5rem, 3rem + 6vw, 9rem) 0; background: var(--sec-bg); }
.sec--tight { padding-bottom: clamp(2rem, 1rem + 3vw, 4rem); }
.sec--flush { padding-top: 0; }
[data-theme="dark"] { --sec-bg: var(--dark); background: var(--dark); color: var(--on-dark); --line: var(--line-dark); --muted: var(--on-dark-muted); }
[data-theme="navy"] { --sec-bg: var(--navy); background: var(--navy); color: #fff; --line: rgba(255,255,255,.2); --muted: #C9CBE4; }

/* ---------------- type ---------------- */
/* Bodoni Moda's top optical sizes thin the hairlines to nothing at display sizes; a pinned low opsz keeps the
   moderate contrast of Harroway's Nyght Serif. Applies to every serif use. */
.h-lg, .h-xl, .hero__t, .phero__t, .pjhero__t, .gqhero__t, .typo__t, .stack__t, .stack__n, .stat__n, .statement__t, .svc__t, .prow__t,
.talk__t, .tcard__n, .icard__t, .xcta__t, .footer__big, .manifesto__t, .founder__n, .vgrid__i h3, .mission__list h3, .index__t, .mcard__t,
.mcard__ph, .pull p, .next__t, .diary__body h3, .art__t, .art__lead, .art__body h2, .nf__t, .steps__t, .intro__note blockquote p,
.menu__nav > a, .menu__acc > summary, .preloader__line, .facts--strip dd, .chapter__fig .stack__n {
  font-optical-sizing: none; font-variation-settings: 'opsz' 16;
}
.h-lg { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.35rem + 2.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.012em; }
.h-xl { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 5rem); line-height: 1; letter-spacing: -.015em; }
.p-lg { font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
.lbl { font-family: var(--mono); font-size: .74rem; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; font-weight: 400; }
.eb { display: flex; align-items: flex-start; align-self: start; gap: 3px; margin: 0 0 1.4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.eb > span { padding: .38em .7em; border-radius: 4px; background: rgba(17,18,22,.08); }
[data-theme="dark"] .eb > span, [data-theme="navy"] .eb > span { background: rgba(255,255,255,.1); }
.eb__num { background: var(--roof) !important; color: var(--ink); }
.tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .35em .7em; border-radius: 4px; background: var(--ink); color: var(--light-subtle); }
.tag--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .tag { background: var(--light); color: var(--ink); }
.note { font-size: .88rem; color: var(--muted); border-left: 2px solid var(--roof); padding-left: 1rem; }

/* ---------------- buttons & pills ---------------- */
.btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 22px; border-radius: 999px; font-weight: 500; font-size: .95rem; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s; white-space: nowrap; }
.btn--sm { height: 42px; font-size: .9rem; padding-left: 18px; }
.btn__t { position: relative; display: inline-block; overflow: hidden; height: 1.5em; line-height: 1.5em; }
.btn__t > span, .pill__t > span { display: block; transition: transform .45s var(--ease); }
.btn__t::after, .pill__t::after { content: attr(data-label); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .45s var(--ease); }
.btn:hover .btn__t > span, .btn:hover .btn__t::after, .pill:hover .pill__t > span, .pill:hover .pill__t::after { transform: translateY(-100%); }
.btn__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; transition: transform .45s var(--ease); }
.btn--sm .btn__ico { width: 28px; height: 28px; }
.btn:hover .btn__ico { transform: rotate(-45deg); }
.btn--dark { background: var(--ink); color: var(--light-subtle); }
.btn--dark .btn__ico { background: var(--light); color: var(--ink); }
.btn--dark:hover { background: var(--navy); }
.btn--light { background: var(--light-subtle); color: var(--ink); }
.btn--light .btn__ico { background: var(--ink); color: var(--light-subtle); }
.btn--accent { background: var(--roof); color: var(--ink); }
.btn--accent .btn__ico { background: var(--ink); color: var(--roof); }
.btn--accent:hover { background: var(--roof-hover); }
.btn--glass { background: rgba(236,237,242,.12); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(236,237,242,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--glass .btn__ico { background: var(--on-dark); color: var(--ink); }
.btn--glass:hover { background: rgba(236,237,242,.22); }
.btn--line { box-shadow: inset 0 0 0 1px var(--line); color: inherit; }
.btn--line .btn__ico { background: var(--ink); color: var(--light); }
.btn[disabled] { opacity: .6; pointer-events: none; }

.pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--on-dark); background: rgba(21,23,28,.56); box-shadow: inset 0 0 0 1px rgba(236,237,242,.1); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); transition: background .3s var(--ease); white-space: nowrap; }
.pill:hover, .pill[aria-current="page"] { background: rgba(21,23,28,.85); }
.pill[aria-current="page"]::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--roof); margin-left: -3px; }
.pill__t { position: relative; display: inline-block; overflow: hidden; height: 1.5em; line-height: 1.5em; }
.pill__ico { display: grid; opacity: .7; }
.pill--icon { width: 38px; padding: 0; justify-content: center; }
.pill--accent { background: var(--roof); color: var(--ink); box-shadow: none; }
.pill--accent:hover, .pill--accent[aria-current="page"] { background: var(--roof-hover); }
.pill--accent[aria-current="page"]::before { background: var(--ink); }

/* ---------------- header ---------------- */
.header { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px var(--gut); pointer-events: none; transition: transform .5s var(--ease); }
.header > * { pointer-events: auto; }
.header.is-hidden { transform: translateY(-110%); }
.header__side { display: flex; align-items: center; gap: 4px; }
.header__side--r { justify-content: flex-end; }
.header__logo { display: block; border-radius: 999px; }
.header__logo img { width: 176px; height: auto; transform: translateX(-4px); }
.dd { position: relative; display: flex; gap: 2px; }
.dd__toggle svg { transition: transform .3s var(--ease); }
.dd__panel { position: absolute; top: calc(100% + 10px); left: 0; width: 400px; padding: 14px; border-radius: 16px; background: var(--light-subtle); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(17,18,22,.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.dd:hover .dd__panel, .dd.is-open .dd__panel, .dd:focus-within .dd__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dd.is-closed .dd__panel { opacity: 0; visibility: hidden; }
.dd:hover .dd__toggle svg, .dd.is-open .dd__toggle svg { transform: rotate(180deg); }
.dd__h { color: var(--muted); margin: 2px 6px 10px; }
.dd__list a { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; transition: background .25s; }
.dd__list a:hover { background: var(--light); }
.dd__list img { width: 72px; height: 52px; object-fit: cover; border-radius: 6px; }
.dd__list b { display: block; font-weight: 500; font-size: .95rem; }
.dd__list small { display: block; color: var(--muted); font-size: .8rem; }
.dd__all { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--line); font-weight: 500; font-size: .9rem; }
.burger { display: none; width: 44px; height: 38px; border-radius: 999px; background: rgba(21,23,28,.56); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--on-dark); transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:first-child { top: 15px; } .burger span:last-child { top: 22px; }
.menu-open .burger span:first-child { top: 18.5px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 18.5px; transform: rotate(-45deg); }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 55; background: var(--dark-strong); color: var(--on-dark); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s .7s; overflow-y: auto; }
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu__inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-h) + 28px) var(--gut) 28px; }
.menu__nav > a, .menu__acc > summary { display: flex; align-items: baseline; gap: 14px; font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.2; padding: 6px 0; border-bottom: 1px solid var(--line-dark); list-style: none; cursor: pointer; }
.menu__acc > summary::-webkit-details-marker { display: none; }
.menu__acc > summary i { margin-left: auto; align-self: center; transition: transform .3s; }
.menu__acc[open] > summary i { transform: rotate(45deg); }
.menu__nav .lbl { color: var(--roof); font-size: .7rem; }
.menu__sub { display: grid; gap: 2px; padding: 10px 0 14px 34px; }
.menu__sub a { display: flex; justify-content: space-between; padding: 8px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-dark); }
.menu__sub small { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; color: var(--on-dark-muted); }
.menu__all { color: var(--roof); }
.menu__foot { display: grid; gap: 6px; padding-top: 28px; color: var(--on-dark-muted); }
.menu__foot p { margin: 0; }
.menu__social { display: flex; gap: 14px; margin-top: 8px !important; color: var(--on-dark); }

/* ---------------- preloader ---------------- */
.preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--dark-strong); color: var(--on-dark); transition: transform 1s var(--ease-io), visibility 0s 1s; }
.preloader__inner { width: min(340px, 82vw); display: grid; justify-items: center; gap: 22px; }
.preloader__logo { width: 210px; }
.preloader__line { margin: 0; display: grid; text-align: center; font-family: var(--serif); text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; }
.preloader__bar { width: 100%; height: 2px; background: rgba(236,237,242,.14); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; background: var(--roof); transform: scaleX(0); transform-origin: left; }
.preloader__meta { width: 100%; display: flex; justify-content: space-between; margin: 0; color: var(--on-dark-muted); }
.preloader.is-leaving, .pre-done .preloader { transform: translateY(-100%); visibility: hidden; }
.preloader.is-gone, .pre-skip .preloader, .no-js .preloader { display: none; }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* ---------------- cursor (no blend modes) ---------------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 120; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--roof); }
.cursor__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(111,119,144,.75); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, box-shadow .35s; }
.cursor.is-hover .cursor__ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; box-shadow: inset 0 0 0 1px var(--roof); }
.cursor.is-label .cursor__ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--roof); box-shadow: none; }
.cursor__label { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .2s; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }

/* ---------------- reveals (only with JS) ---------------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.ln > span { display: inline-block; }
.js [data-lines] .ln > span { transform: translateY(108%); transition: transform 1.1s var(--ease); }
.js [data-lines].is-in .ln > span { transform: none; }
.js [data-img-reveal] { position: relative; }
.js [data-img-reveal]::after { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--sec-bg); transform-origin: top; transition: transform 1.25s var(--ease-io); pointer-events: none; }
.js [data-img-reveal].is-in::after { transform: scaleY(0); }
.w { opacity: var(--wo, 1); transition: opacity .2s linear; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-lines] .ln > span { opacity: 1; transform: none; transition: none; }
  .js [data-img-reveal]::after { display: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------------- hero ---------------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.hero__bg, .phero__bg, .pjhero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img, .hero__bg video, .phero__bg img, .phero__bg video, .pjhero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgv { opacity: 0; transition: opacity 1.2s; }
.bgv.is-playing { opacity: 1; }
.hero__bg::after, .phero--media .phero__bg::after, .pjhero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,22,.66) 0%, rgba(17,18,22,.46) 34%, rgba(17,18,22,.5) 62%, rgba(17,18,22,.88) 100%); }
.hero__in { position: relative; z-index: 1; align-self: center; text-align: center; padding-top: calc(var(--header-h) + 3vh); }
.hero__in .eb { justify-content: center; }
.hero__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.7rem, 1rem + 7.4vw, 8.4rem); line-height: .96; letter-spacing: -.01em; }
.hero__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); width: min(660px, 100%); }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 104px; padding: 14px 16px; border-radius: 6px; background: rgba(214,216,224,.94); color: var(--ink); --muted: #4A4E5C; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.stat__n { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; }
.stat__n--txt { font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.stat .lbl { color: var(--muted); }
.hero__side { max-width: 330px; display: grid; gap: 18px; text-align: right; }
.hero__side p { margin: 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; color: var(--on-dark); }
.hero__scroll { justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
.hero__scroll::before { content: ''; width: 40px; height: 1px; background: currentColor; }

/* ---------------- page heroes ---------------- */
.phero { position: relative; min-height: 64vh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--header-h) + 8vh) 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.phero--media { min-height: 82vh; }
.phero__in { position: relative; z-index: 1; text-align: center; }
.phero__in .eb { justify-content: center; }
.phero__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.6rem, 1rem + 6.6vw, 7.4rem); line-height: .96; letter-spacing: -.01em; }
.phero__lead { max-width: 40rem; margin: 1.6rem auto 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--on-dark); }
.crumbs { display: flex; gap: 8px; color: var(--on-dark-muted); margin-bottom: 1.4rem; }
.crumbs a:hover { color: var(--roof); }

.pjhero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.pjhero__in { position: relative; z-index: 1; align-self: end; padding-top: calc(var(--header-h) + 10vh); padding-bottom: 2rem; }
.pjhero__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.6rem, 1rem + 6.4vw, 7.6rem); line-height: .96; }
.pjhero__lead { max-width: 36rem; margin: 1.2rem 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.pjhero__facts { position: relative; z-index: 1; padding-bottom: 20px; }

.gqhero { padding: calc(var(--header-h) + 12vh) 0 clamp(3rem, 2rem + 4vw, 6rem); text-align: center; }
.gqhero .crumbs { justify-content: center; }
.gqhero__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.8rem, 1rem + 7.4vw, 8.6rem); line-height: .96; }
.gqhero__inl { display: inline-block; vertical-align: middle; width: 1.9em; height: .82em; border-radius: 999px; overflow: hidden; margin: -.12em .04em 0; }
.gqhero__img { width: 100%; height: 100%; object-fit: cover; }
.gqhero__lead { max-width: 38rem; margin: 1.8rem auto 2.4rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.gqhero .facts--strip { text-align: left; }
.gqband { padding-bottom: clamp(3rem, 6vw, 6rem); }
.gqband__fig { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; aspect-ratio: 1318 / 540; }
.gqband__img { width: 100%; height: 112%; object-fit: cover; }
.gqband__fig figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: .45em .8em; border-radius: 4px; background: rgba(17,18,22,.72); color: #fff; }
.plan { margin: 2rem 0; max-width: 34rem; }
.plan__img { width: 100%; border-radius: 8px; }
.plan figcaption { margin-top: 10px; color: var(--muted); }

/* facts */
.facts { margin: 1.4rem 0; border-bottom: 1px solid var(--line); }
.facts__row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-align: right; font-weight: 500; }
.facts dd a:hover { color: var(--roof-text); }
.facts--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; border: 0; }
.facts--strip .facts__row { flex-direction: column; justify-content: space-between; gap: 18px; min-height: 96px; padding: 14px 16px; border: 0; border-radius: 6px; background: rgba(214,216,224,.94); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.facts--strip dt { color: #4A4E5C; }
.facts--strip dd { text-align: left; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.15; }
.facts--light dt { color: #C9CBE4; }

/* ---------------- intro ---------------- */
.intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.intro__text { grid-column: span 5; display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 3vw, 3rem) clamp(0rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem) 0; }
.intro__text .h-lg { margin-bottom: 1.4rem; max-width: 14ch; }
.intro__text .p-lg { max-width: 34rem; color: var(--muted); margin-bottom: 2rem; }
.intro__media { grid-column: span 4; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.intro__img { width: 100%; height: 112%; object-fit: cover; }
.intro__note { grid-column: span 3; align-self: end; display: grid; gap: 18px; padding: 24px; border-radius: var(--radius); background: var(--light-subtle); }
.intro__face { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.intro__note blockquote { margin: 0; }
.intro__note blockquote p { font-family: var(--serif); font-size: 1.22rem; line-height: 1.32; margin: 0; }
.intro__note .lbl { color: var(--muted); }

/* ---------------- kinetic typography ---------------- */
.typo__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.5rem, .8rem + 7.2vw, 8rem); line-height: .94; letter-spacing: -.012em; display: grid; }
.typo__l { display: block; }
.typo__l--1 { text-align: left; }
.typo__l--2 { text-align: center; }
.typo__l--3 { text-align: right; }
.typo__inl { display: inline-block; vertical-align: middle; width: 1.7em; height: .78em; margin: -.14em .16em 0 0; border-radius: 999px; overflow: hidden; }
.typo__img { width: 100%; height: 100%; object-fit: cover; }
.typo__ps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); max-width: 50rem; margin: clamp(2rem, 4vw, 3.5rem) 0 0 auto; color: var(--muted); }
.typo__ps p { margin: 0; }
.typo__t--c { text-align: center; }
.typo__t--c .typo__l { text-align: center; }
.typo__aside { max-width: 32rem; margin: 2rem auto 0; text-align: center; color: var(--muted); }

/* ---------------- stacked service cards ---------------- */
.stack { background: var(--light); padding-bottom: clamp(3rem, 6vw, 7rem); }
.stack__card { position: sticky; top: calc(var(--header-h) + 18px + var(--i) * 16px); height: min(76vh, 760px); min-height: 440px; margin-bottom: 4vh; border-radius: var(--radius); overflow: hidden; color: #fff; transform-origin: 50% 0; }
.stack__card:last-child { margin-bottom: 0; }
.stack__media { position: absolute; inset: 0; }
.stack__img { width: 100%; height: 100%; object-fit: cover; }
.stack__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,22,.08) 30%, rgba(17,18,22,.82) 100%); }
.stack__shade { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; z-index: 1; }
.stack__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: clamp(1.25rem, 3vw, 2.5rem); }
.stack__l { max-width: 34rem; }
.stack__t { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 1.2rem + 4vw, 5rem); line-height: 1; margin-bottom: .9rem; }
.stack__l p { color: rgba(255,255,255,.85); max-width: 30rem; }
.stack__more { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; background: rgba(255,255,255,.14); transition: background .3s; }
.stack__more:hover { background: var(--roof); color: var(--ink); }
.stack__r { text-align: right; display: grid; gap: 10px; justify-items: end; }
.stack__r .lbl { max-width: 16rem; color: rgba(255,255,255,.75); }
.stack__n { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.8rem); line-height: .9; }

/* ---------------- statement ---------------- */
.statement { position: relative; min-height: 118vh; display: grid; place-items: center; overflow: hidden; padding: 16vh 0; }
.statement__rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.statement__rings i { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(236,237,242,.11); }
.statement__rings i:nth-child(1) { width: 38vmax; height: 38vmax; }
.statement__rings i:nth-child(2) { width: 62vmax; height: 62vmax; }
.statement__rings i:nth-child(3) { width: 88vmax; height: 88vmax; }
.statement__float { position: absolute; inset: 0; pointer-events: none; }
.fl { position: absolute; border-radius: 8px; overflow: hidden; opacity: .9; }
.fl img { width: 100%; height: 100%; object-fit: cover; }
.fl--1 { top: 8%; left: 5%; width: 22vw; aspect-ratio: 16 / 9; }
.fl--2 { top: 12%; right: 7%; width: 15vw; aspect-ratio: 4 / 3; }
.fl--3 { bottom: 10%; left: 12%; width: 15vw; aspect-ratio: 4 / 3; }
.fl--4 { bottom: 6%; right: 15%; width: 12vw; aspect-ratio: 4 / 5; }
.statement__in { position: relative; z-index: 1; text-align: center; }
.statement__t { font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.2rem); line-height: 1.04; max-width: 16ch; margin: 0 auto 2.2rem; }
.statement__sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; }
.statement__sub span { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; padding: .5em .9em; border-radius: 4px; background: rgba(255,255,255,.08); }

/* ---------------- services grid ---------------- */
.svc__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: minmax(250px, auto); gap: var(--gap); }
.svc__lead { grid-row: span 2; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius); }
.svc__lead .h-lg { max-width: 12ch; }
.svc__all { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.svc__all:hover { color: var(--roof); }
.svc__tile { display: flex; flex-direction: column; gap: 12px; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--light-subtle); transition: background .35s var(--ease); }
.svc__tile:hover { background: #E8E9EE; }
.svc__tile .lbl { color: var(--muted); }
.svc__t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.08; margin-top: auto; }
.svc__tile ul { display: grid; gap: 0; }
.svc__tile li { padding: 7px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.svc__tile p { margin: 0; color: var(--muted); }

/* ---------------- project rows ---------------- */
.plist__rows, .plist .wrap { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
.prow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.prow.is-hidden { display: none; }
.prow__media { grid-column: 1 / span 7; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--light-strong); }
.prow__img { width: 100%; height: 112%; object-fit: cover; transition: transform 1.2s var(--ease); }
.prow__media:hover .prow__img { transform: scale(1.03); }
.prow__card { grid-column: 8 / span 5; align-self: center; padding: clamp(1.4rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--light-subtle); }
.prow--rev .prow__media { grid-column: 6 / span 7; grid-row: 1; }
.prow--rev .prow__card { grid-column: 1 / span 5; grid-row: 1; }
.prow__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.prow__t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.04; margin-bottom: .8rem; }
.prow__p { color: var(--muted); }
.plist__more { display: flex; justify-content: center; margin: 1rem 0 0; }
.filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.chip { height: 38px; padding: 0 16px; border-radius: 999px; font-size: .9rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.chip:hover { background: var(--light-subtle); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink); color: var(--light-subtle); box-shadow: none; }

/* ---------------- before / after ---------------- */
.ba { margin: 0; }
.ba__frame { position: relative; border-radius: var(--radius); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: var(--dark-subtle); --pos: 50%; }
.ba__img { width: 100%; height: auto; pointer-events: none; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__before .ba__img { width: 100%; height: 100%; object-fit: cover; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255,255,255,.92); pointer-events: none; }
.ba__handle { position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--roof); color: var(--ink); display: grid; place-items: center; cursor: ew-resize; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); transition: transform .3s var(--ease); }
.ba__handle:hover, .ba.is-drag .ba__handle { transform: scale(1.08); }
.ba__tag { position: absolute; top: 14px; padding: .4em .75em; border-radius: 4px; background: rgba(17,18,22,.72); color: #fff; font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }
.ba__tag--b { left: 14px; }
.ba__tag--a { right: 14px; }
.ba__cap { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px 0; font-size: .92rem; }
.ba__cap .lbl { color: var(--muted); }

.potential__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 4vw, 5rem); align-items: center; }
.potential__text .h-xl { margin-bottom: 1.6rem; }
.potential__text p { color: var(--on-dark-muted); max-width: 30rem; }
.potential__text .lbl { margin-top: 1.6rem; color: var(--roof); }

/* ---------------- tabs / talk ---------------- */
.tabs__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.tabs__btn { height: 56px; border-radius: 8px; background: var(--light-subtle); font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; transition: background .3s, color .3s; }
.tabs__btn:hover { background: #E8E9EE; }
.tabs__btn[aria-selected="true"] { background: var(--navy); color: #fff; }
.tabs__bar--chips { display: flex; gap: 4px; margin: 0; }
.talk__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); }
.talk__visual { position: relative; min-height: 600px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; padding: clamp(1.5rem, 3vw, 2.5rem); }
.talk__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.talk__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,22,.1) 20%, rgba(17,18,22,.85) 100%); }
.talk__t { position: relative; z-index: 1; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.04; max-width: 14ch; }
.talk__panels { padding: clamp(1.4rem, 3vw, 2.75rem); border-radius: var(--radius); background: var(--light-subtle); display: grid; gap: 2.5rem; align-content: start; }
.risk { margin-top: var(--gap); padding: 22px 26px; border-radius: var(--radius); background: var(--light-subtle); display: grid; grid-template-columns: 140px 1fr; gap: 16px; }
.risk p { margin: 0; font-size: .92rem; }
.risk .lbl { color: var(--roof-text); }

/* form */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.field { display: grid; gap: 6px; position: relative; }
.field--wide { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field small { text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(17,18,22,.32); background: transparent; border-radius: 0; font-size: 1rem; transition: border-color .3s; }
.field select { appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23111216' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--navy); box-shadow: 0 1px 0 var(--navy); }
.field__err { display: none; font-size: .78rem; color: #A3361A; }
.field.is-invalid input { border-bottom-color: #A3361A; }
.field.is-invalid .field__err { display: block; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; font-size: .88rem; color: var(--muted); }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--navy); flex: none; }
.check a { display: inline-block; padding: 3px 0; }
.diary__src, .art__meta a, .facts dd a, .contact__social a { padding: 5px 0; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.check.is-invalid span { color: #A3361A; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 26px; }
.form-ok { margin: 0; font-size: .92rem; color: var(--navy); max-width: 30rem; }

/* accordion + steps */
.acc { border-bottom: 1px solid var(--line); }
.acc__item { border-top: 1px solid var(--line); }
.acc__item summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.04rem; }
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--light); flex: none; transition: transform .35s var(--ease), background .3s; }
.acc__item[open] summary i { transform: rotate(45deg); background: var(--roof); color: var(--ink); }
.acc__body p { margin: 0 0 18px; color: var(--muted); max-width: 44rem; }
.steps { display: grid; gap: var(--gap); counter-reset: s; }
.steps__item { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--light-subtle); display: grid; align-content: start; gap: 10px; }
.steps__n { font-family: var(--mono); font-size: .76rem; color: var(--roof-text); }
.steps__t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.8rem); line-height: 1.1; }
.steps__item p { margin: 0; color: var(--muted); font-size: .95rem; }
.steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--compact { gap: 0; }
.steps--compact .steps__item { background: none; border-radius: 0; border-top: 1px solid var(--line); padding: 16px 0; grid-template-columns: 44px 1fr; column-gap: 12px; }
.steps--compact .steps__n { grid-row: span 2; padding-top: 4px; }
.steps--compact .steps__t { font-size: 1.2rem; }
[data-theme="dark"] .steps__item { background: var(--dark-subtle); }
[data-theme="dark"] .steps__n { color: var(--roof); }

/* ---------------- team ---------------- */
.team__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.team__head { position: sticky; top: calc(var(--header-h) + 30px); }
.team__head .h-lg { margin-bottom: 1.2rem; }
.team__head p { color: var(--on-dark-muted); max-width: 26rem; margin-bottom: 2rem; }
.team__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tcard { padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--radius); background: var(--dark-subtle); }
.tcard__face { aspect-ratio: 1; width: min(100%, 240px); border-radius: 50%; overflow: hidden; margin-bottom: 1.2rem; }
.tcard__face img { width: 100%; height: 100%; object-fit: cover; }
.tcard__n { font-family: var(--serif); font-size: 1.7rem; margin-bottom: .4rem; }
.tcard .lbl { color: var(--on-dark-muted); }
.tstat { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--light); color: var(--ink); --muted: #4A4E5C; display: flex; flex-direction: column; gap: 12px; }
.tstat .stat__n { font-size: clamp(3rem, 2rem + 3vw, 5rem); }
.tstat .lbl { color: var(--muted); }
.tstat p { margin: auto 0 0; color: var(--muted); font-size: .93rem; }

/* ---------------- insights ---------------- */
.sec__head { display: grid; gap: 0; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec__head .h-lg { max-width: 18ch; }
.sec__head > div:last-child:not(:first-child) { margin-top: 1.4rem; }
.sec__head--split { grid-template-columns: 1fr minmax(0, 26rem); align-items: end; gap: 2rem; }
.sec__head--split > p { margin: 0; color: var(--muted); }
.icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem) var(--gap); }
.icard__link { display: grid; gap: 14px; height: 100%; padding: 10px 10px 22px; border-radius: var(--radius); background: var(--light-subtle); transition: background .35s; }
.icard__link:hover { background: #E8E9EE; }
.icard__media { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--light-strong); }
.icard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.icard__link:hover .icard__img { transform: scale(1.04); }
.icard__meta { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.icard__meta .lbl { color: var(--muted); }
.icard__t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.12; padding: 0 6px; }
.icard__p { margin: 0; padding: 0 6px; color: var(--muted); font-size: .93rem; }
.ifeat { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ifeat__link { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); }
.ifeat__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.ifeat__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ifeat__link:hover .ifeat__img { transform: scale(1.03); }
.ifeat__body { padding: clamp(1.4rem, 3vw, 2.5rem); border-radius: var(--radius); background: var(--light-subtle); display: flex; flex-direction: column; gap: 1.2rem; }
.ifeat__body .icard__meta { padding: 0; }
.ifeat__body .p-lg { color: var(--muted); margin: 0; }
.ifeat__more { margin-top: auto; color: var(--roof-text); }

/* ---------------- closing CTA ---------------- */
.xcta { position: relative; min-height: 108vh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 18vh 0; }
.xcta__win { position: absolute; inset: 0; }
.xcta__media { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.xcta__media img { width: 100%; height: 100%; object-fit: cover; }
.xcta__media::after { content: ''; position: absolute; inset: 0; background: rgba(17,18,22,.58); }
.xcta__in { position: relative; z-index: 1; }
.xcta__in .eb { justify-content: center; }
.xcta__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.6rem, 1rem + 6.8vw, 7.6rem); line-height: .96; }
.xcta__p { max-width: 34rem; margin: 2rem auto; color: var(--on-dark); }
.xcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------------- footer ---------------- */
.footer { background: var(--dark-strong); padding: clamp(3.5rem, 6vw, 6rem) 0 24px; }
.footer__top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); }
.footer__logo img { width: 190px; transform: translateX(-6px); }
.footer__brand p { color: var(--on-dark-muted); max-width: 26rem; margin: 1.4rem 0; }
.footer__social { display: flex; gap: 4px; margin: 0 !important; }
.footer__social .pill { background: rgba(236,237,242,.08); }
.footer__social .pill:hover { background: var(--roof); color: var(--ink); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer__h { color: var(--on-dark-muted); margin-bottom: 1rem; }
.footer__cols li { padding: 4px 0; }
.footer__cols a { transition: color .25s; }
.footer__cols a:hover { color: var(--roof); }
.footer__contact { display: grid; gap: 10px; }
.footer__big { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.2rem, .6rem + 6.4vw, 7.6rem); line-height: .95; color: rgba(236,237,242,.14); margin: clamp(3rem, 6vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .82rem; color: var(--on-dark-muted); }
.footer__bottom a:hover { color: var(--roof); }

/* ---------------- about ---------------- */
.manifesto__t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.8rem); line-height: 1.12; max-width: 26ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.manifesto__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); max-width: 62rem; margin-left: auto; color: var(--muted); }
.founder { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--line); }
.founder--rev .founder__face { order: 2; }
.founder__face { aspect-ratio: 1; border-radius: 50%; overflow: hidden; max-width: 420px; }
.founder__face img { width: 100%; height: 100%; object-fit: cover; }
.founder__n { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin: .6rem 0 1.4rem; }
.founder__body p:not(.lbl) { color: var(--muted); max-width: 46rem; }
.founder__body .lbl { color: var(--roof-text); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.vgrid__i { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--dark-subtle); display: grid; gap: 12px; align-content: start; min-height: 260px; }
.vgrid__i .lbl { color: var(--roof); }
.vgrid__i h3 { font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.vgrid__i p { margin: 0; color: var(--on-dark-muted); font-size: .95rem; }
.mission__grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(2rem, 5vw, 6rem); }
.mission__head .h-xl { margin-bottom: 1.6rem; }
.mission__head .p-lg { color: var(--muted); }
.mission__list li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 22px 0; border-top: 1px solid var(--line); }
.mission__list li:last-child { border-bottom: 1px solid var(--line); }
.mission__list .lbl { color: var(--roof-text); padding-top: 6px; }
.mission__list h3 { font-family: var(--serif); font-size: 1.6rem; margin-bottom: .4rem; }
.mission__list p { margin: 0; color: var(--muted); }
.company__box { border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.75rem); display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
.company__box .facts { margin: 0; }

/* ---------------- services page ---------------- */
.chapters .wrap { display: grid; gap: clamp(3rem, 7vw, 7rem); }
.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; scroll-margin-top: calc(var(--header-h) + 20px); }
.chapter__media { grid-column: span 6; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; }
.chapter__img { width: 100%; height: 112%; object-fit: cover; }
.chapter__body { grid-column: span 6; }
.chapter--rev .chapter__media { order: 2; }
.chapter__body .h-xl { margin-bottom: 1.4rem; }
.chapter__body p:not(.p-lg):not(.eb) { color: var(--muted); max-width: 38rem; }
.chapter__fig { display: flex; align-items: flex-end; gap: 16px; margin: 1.6rem 0 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.chapter__fig .stack__n { color: var(--navy); }
.chapter__fig .lbl { color: var(--muted); max-width: 14rem; padding-bottom: 8px; }
.index__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.index__col { padding: 10px 10px 22px; border-radius: var(--radius); background: var(--dark-subtle); }
.index__media { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin-bottom: 1.2rem; }
.index__img { width: 100%; height: 100%; object-fit: cover; }
.index__t { font-family: var(--serif); font-size: 2rem; padding: 0 8px; margin-bottom: .8rem; }
.index__col li { padding: 9px 8px; border-top: 1px solid var(--line-dark); color: var(--on-dark-muted); }

/* ---------------- projects pages ---------------- */
.more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mcard { border-radius: var(--radius); background: var(--dark-subtle); }
.mcard__link { display: grid; gap: 12px; padding: 10px 10px 22px; height: 100%; align-content: start; }
.mcard__media { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--navy); display: grid; place-items: center; }
.mcard__img { width: 100%; height: 100%; object-fit: cover; }
.mcard__ph { font-family: var(--serif); font-size: 2rem; text-align: center; padding: 1rem; color: #fff; }
.mcard__meta { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; }
.mcard__meta .lbl { color: var(--on-dark-muted); }
.mcard__t { font-family: var(--serif); font-size: 1.6rem; padding: 0 6px; }
.mcard p { margin: 0; padding: 0 6px; color: var(--on-dark-muted); font-size: .93rem; }
.mcard__via { display: inline-flex; gap: 8px; align-items: center; padding: 6px 6px 0; color: var(--roof); }
.mcard--reels { padding: 22px 16px; display: grid; gap: 14px; align-content: start; }
.reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.reels a { display: block; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; }
.reels img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.reels a:hover img { transform: scale(1.05); }

.pjstory__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 5vw, 6rem); }
.pjstory__head { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
.pjstory__body p:not(.p-lg) { color: var(--muted); max-width: 44rem; }
.pull { margin: 2rem 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line); }
.pull p { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.2; color: var(--text) !important; }
.pull cite { font-style: normal; color: var(--muted); }
.pjba__grid { display: grid; gap: var(--gap); }
.pjba__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjba__grid--3 { grid-template-columns: 1fr 1fr; }
.pjba__grid--3 > :first-child { grid-column: 1 / -1; }
.pjba__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjba__grid--1 { max-width: 64rem; }
.pjba .ba__cap .lbl { color: var(--on-dark-muted); }
.gal__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.gal__item { display: block; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--light-strong); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal__item:hover img { transform: scale(1.04); }
.next__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next__t { font-family: var(--serif); font-size: clamp(2rem, 1rem + 4vw, 4.6rem); line-height: 1; transition: color .3s; }
.next__link:hover .next__t { color: var(--navy); }
.next__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--roof); color: var(--ink); transition: transform .4s var(--ease); }
.next__link:hover .next__ico { transform: rotate(-45deg); }
.diary__list { display: grid; gap: var(--gap); }
.diary__item { display: grid; grid-template-columns: 160px 1fr 180px; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--radius); background: var(--dark-subtle); }
.diary__item time { color: var(--roof); padding-top: 6px; }
.diary__body h3 { font-family: var(--serif); font-size: 1.7rem; margin-bottom: .6rem; }
.diary__body p { color: var(--on-dark-muted); max-width: 40rem; }
.diary__src { display: inline-flex; gap: 8px; align-items: center; color: var(--on-dark); }
.diary__src:hover { color: var(--roof); }
.diary__media { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.diary__media img { width: 100%; height: 100%; object-fit: cover; }

/* invest */
.strat__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.strat__grid .svc__tile { min-height: 260px; }
.talk__faq, .talk__form { display: block; }

/* ---------------- article ---------------- */
.art__head { padding: calc(var(--header-h) + 12vh) 0 clamp(5rem, 9vw, 9rem); }
.art__t { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 1.2rem + 4vw, 5rem); line-height: 1.02; max-width: 20ch; }
.art__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0 0; color: var(--on-dark-muted); }
.art__meta a { display: inline-flex; gap: 6px; align-items: center; }
.art__meta a:hover { color: var(--roof); }
.art__media { margin-top: clamp(-4rem, -6vw, -2rem); position: relative; z-index: 1; }
.art__media img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: var(--radius); }
.art__body { max-width: 48rem; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.art__lead { font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); line-height: 1.3; margin-bottom: 2rem; }
.art__body h2 { font-family: var(--serif); font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); margin: 2.2rem 0 1rem; }
.art__body ul { margin: 0 0 1.4em; border-bottom: 1px solid var(--line); }
.art__body li { padding: 10px 0 10px 26px; border-top: 1px solid var(--line); position: relative; }
.art__body li::before { content: ''; position: absolute; left: 4px; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; background: var(--roof); }
.art__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.5rem; }
.legal h2:first-child { margin-top: 0; }

/* ---------------- contact, 404 ---------------- */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.contact__info .p-lg { color: var(--muted); }
.contact__social { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.contact__social a { display: inline-flex; gap: 6px; align-items: center; }
.contact__social a:hover { color: var(--roof-text); }
.contact__form { padding: clamp(1.4rem, 3vw, 2.75rem); border-radius: var(--radius); background: var(--light-subtle); }
.contact__form .h-lg { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); margin-bottom: 1.6rem; }
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 18vh 0 10vh; }
.nf__t { font-family: var(--serif); font-weight: 500; text-transform: uppercase; font-size: clamp(2.6rem, 1rem + 6.6vw, 7rem); line-height: .96; margin: 1rem 0 1.6rem; }
.nf__in > p:not(.lbl) { max-width: 32rem; margin: 0 auto 2rem; color: var(--on-dark-muted); }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* glightbox caption colours */
.glightbox-clean .gslide-description { background: var(--dark-strong); }
.glightbox-clean .gslide-desc { color: var(--on-dark); font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .pill__ico { display: none; }
  .header__logo img { width: 160px; }
  .intro__text { grid-column: span 6; }
  .intro__media { grid-column: span 6; }
  .intro__note { grid-column: 1 / -1; grid-template-columns: 88px 1fr; align-items: center; }
  .intro__note .lbl { grid-column: 2; }
  .svc__grid { grid-template-columns: 1fr 1fr; }
  .svc__lead { grid-column: 1 / -1; grid-row: auto; min-height: 260px; }
  .steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --header-h: 62px; }
  .header { grid-template-columns: 1fr auto; padding-top: 12px; }
  .header__side--l, .pill--hide-m { display: none; }
  .header__logo { grid-column: 1; justify-self: start; }
  .header__logo img { width: 150px; transform: translateX(-24px); }
  .burger { display: block; }
  .hero__foot { flex-direction: column; align-items: stretch; }
  .hero__side { text-align: left; max-width: none; }
  .hero__scroll { justify-self: start; }
  .stats { width: 100%; }
  .typo__ps { grid-template-columns: 1fr; margin-left: 0; }
  .intro__grid { grid-template-columns: 1fr; }
  .intro__text, .intro__media, .intro__note { grid-column: 1 / -1; }
  .intro__text { padding: 0 0 1.5rem; }
  .intro__media { aspect-ratio: 4 / 3; }
  .prow, .prow--rev { grid-template-columns: 1fr; }
  .prow__media, .prow--rev .prow__media, .prow__card, .prow--rev .prow__card { grid-column: 1; grid-row: auto; }
  .potential__grid, .talk__grid, .team__grid, .pjstory__grid, .contact__grid, .mission__grid, .footer__top, .ifeat__link, .company__box { grid-template-columns: 1fr; }
  .team__head, .pjstory__head { position: static; }
  .talk__visual { min-height: 380px; }
  .icards, .more__grid, .index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec__head--split { grid-template-columns: 1fr; align-items: start; }
  .chapter { grid-template-columns: 1fr; }
  .chapter__media, .chapter__body { grid-column: 1; }
  .chapter--rev .chapter__media { order: 0; }
  .founder, .founder--rev { grid-template-columns: 1fr; }
  .founder--rev .founder__face { order: 0; }
  .founder__face { max-width: 300px; }
  .manifesto__cols { grid-template-columns: 1fr; }
  .facts--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diary__item { grid-template-columns: 1fr 140px; }
  .diary__item time { grid-column: 1 / -1; }
  .fl--1 { width: 34vw; } .fl--2 { width: 26vw; } .fl--3 { width: 26vw; } .fl--4 { width: 20vw; }
  .stack__card { height: 72vh; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pill--hide-s { display: none; }
  .header__logo img { width: 140px; transform: translateX(-23px); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .stat:last-child { grid-column: 1 / -1; min-height: 0; }
  .stat { min-height: 88px; }
  .svc__grid, .icards, .more__grid, .index__grid, .vgrid, .steps--row, .steps--grid, .strat__grid, .pjba__grid--2, .pjba__grid--3, .pjba__grid--4 { grid-template-columns: 1fr; }
  .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs__bar { grid-template-columns: 1fr 1fr 1fr; }
  .tabs__btn { height: 50px; font-size: .66rem; padding: 0 4px; }
  .form__grid { grid-template-columns: 1fr; }
  .stack__body { flex-direction: column; align-items: flex-start; }
  .stack__r { text-align: left; justify-items: start; }
  .stack__card { min-height: 520px; }
  .typo__l--1, .typo__l--2, .typo__l--3 { text-align: left; }
  .typo__inl { width: 1.4em; }
  .statement { min-height: 92vh; }
  .fl--1 { top: 6%; left: 4%; } .fl--2 { top: 8%; right: 4%; } .fl--3 { bottom: 8%; left: 6%; } .fl--4 { bottom: 5%; right: 8%; }
  .risk { grid-template-columns: 1fr; }
  .next__link { grid-template-columns: 1fr auto; }
  .next__link .lbl { grid-column: 1 / -1; }
  .next__ico { width: 52px; height: 52px; }
  .diary__item { grid-template-columns: 1fr; }
  .diary__media { max-width: 220px; }
  .reels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: 1fr; }
  .facts--strip .facts__row { min-height: 84px; }
  .contact__social { justify-content: flex-start; }
  .btn { height: 46px; }
}