/* Mannai v6 "Atlas" — site styles. Brand tokens are set from CONTENT.colors by js/site.js (applyTheme). */
:root {
  --night: #0A0C0F;
  --bg-rgb: 10, 12, 15;
  --ink-rgb: 255, 255, 255;
  --surface-rgb: 18, 22, 28;
  --deep: #07080A;
  --field-a: rgba(19, 32, 46, .9);
  --field-b: rgba(36, 40, 46, .35);
  --surface: #12161C;
  --stone: #FFFFFF;
  --stone-2: rgb(var(--ink-rgb)); /* secondary text white like the titles (owner, 2026-11-02; was .68 / .42) */
  --stone-3: rgb(var(--ink-rgb));
  --rule: rgba(var(--ink-rgb), .14);
  --accent: #8FB4DE;
  --paper: #ECE7DE;
  --paper-ink: #0D1117;
  --paper-ink-2: rgba(13, 17, 23, .66);
  --paper-rule: rgba(13, 17, 23, .14);
  --accent-paper: #2D5A8C;
  /* buttons: the title text colour (CONTENT.colors.button / buttonOnPaper) */
  --gold: #FFFFFF;
  --gold-hi: #FFFFFF;
  --gold-line: rgba(var(--ink-rgb), .55);
  --gold-paper: #0D1117;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --settle: cubic-bezier(.2, .8, .2, 1);
  --u: clamp(.72px, calc(100vw / 1440), 1.5px);
  --max: 2400px;
  --pad: clamp(20px, 6vw, 128px);
  --gut: calc(max(0px, (100vw - var(--max)) / 2) + var(--pad));
  --head: 76px;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rise: 28px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #0C0F12; } /* the hero's top colour: older iPhones show this above the page when pulled down (OPOS 150473) */
html.at-end { background: var(--deep); } /* ...and the footer black past the end */
body { margin: 0; background: var(--night); color: var(--stone); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.paper :focus-visible { outline-color: var(--accent-paper); }
::selection { background: var(--accent); color: var(--night); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--stone); color: var(--night); padding: 10px 16px; border-radius: 999px; font-weight: 500; transition: top .3s var(--settle); }
.skip:focus { top: 16px; }

/* ---------- type ---------- */
.eyebrow { font: 500 11px/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--stone-2); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.paper .eyebrow { color: var(--paper-ink-2); }
.d-xl, .d-l, .d-m, .stmt { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 96; }
.d-xl { font-size: clamp(50px, 7.4vw, 128px); line-height: .96; letter-spacing: -.025em; }
.d-l { font-size: clamp(40px, 5.6vw, 96px); line-height: .98; letter-spacing: -.03em; }
.d-m { font-size: clamp(34px, 3.6vw, 64px); line-height: 1; letter-spacing: -.02em; }
.stmt { font-size: clamp(28px, 3.3vw, 54px); line-height: 1.18; letter-spacing: -.015em; }
.it { font-style: italic; }
.lead { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; color: var(--stone-2); max-width: 46ch; }
.paper .lead { color: var(--paper-ink-2); }
.num { font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 96; }
.ln { display: block; overflow: clip; padding: .14em .16em .2em; margin: -.14em -.16em -.2em; } /* room for italic swashes and descenders so no letter is cut (owner, 2026-11-02) */
.ln > span { display: inline-block; }

/* ---------- buttons ---------- */
.btn { --b: var(--stone); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: .01em; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-line); transition: transform .35s var(--settle), box-shadow .35s var(--settle), background-color .35s var(--settle), color .35s var(--settle); white-space: nowrap; }
.btn:hover { transform: scale(1.03); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-hi); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--gold); color: var(--night); box-shadow: none; }
.btn.primary:hover { background: var(--gold-hi); color: var(--night); }
.btn .ar { width: 16px; height: 16px; transition: transform .35s var(--settle); }
.btn:hover .ar { transform: translateX(3px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.paper .btn { color: var(--gold-paper); box-shadow: inset 0 0 0 1px var(--gold-paper); }
.paper .btn.primary { background: var(--gold-paper); color: var(--paper); }

/* ---------- glass buttons with a moving light ----------
   Glass: a frosted, slightly tinted body with a fine top highlight. Motion: a slim arc of light travels round
   the edge (6 s per lap) and a soft glow follows the pointer on hover. Colours come from --gold (the title colour). */
@property --lap { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn, .om-btn, .rail .arrows button { position: relative; isolation: isolate; overflow: hidden;
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, var(--glow, 0)), transparent 70%), linear-gradient(180deg, rgba(var(--ink-rgb), .12), rgba(var(--ink-rgb), .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px var(--gold-line), 0 14px 34px -16px rgba(0, 0, 0, .7);
  transition: transform .35s var(--settle), box-shadow .35s var(--settle), color .35s var(--settle), --glow .4s; }
@property --glow { syntax: "<number>"; inherits: false; initial-value: 0; }
.btn:hover, .om-btn:hover, .rail .arrows button:hover { --glow: .2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px var(--gold-hi), 0 18px 40px -16px rgba(0, 0, 0, .75); }
.btn::before, .om-btn::before, .rail .arrows button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lap), transparent 0 64%, color-mix(in srgb, var(--gold) 30%, transparent) 74%, var(--gold) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lap 6s linear infinite; }
.btn:nth-of-type(2n)::before { animation-delay: -3s; }
@keyframes lap { to { --lap: 360deg; } }
.lap-off::before { animation-play-state: paused !important; } /* off screen: no per-frame work (js/site.js) */
html.scrolling .btn::before, html.scrolling .om-btn::before, html.scrolling .rail .arrows button::before { animation-play-state: paused; } /* touch: rests while scrolling */
.btn.primary { color: var(--night); background: radial-gradient(140px circle at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, calc(var(--glow, 0) * 2.5)), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--gold) 92%, transparent), color-mix(in srgb, var(--gold) 74%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 34px -14px rgba(0, 0, 0, .7); }
.btn.primary:hover { color: var(--night); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 18px 40px -14px rgba(0, 0, 0, .75); }
.btn.primary::before { background: conic-gradient(from var(--lap), transparent 0 64%, rgba(255, 255, 255, .5) 76%, #fff 82%, transparent 92%); }
.paper .btn { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, calc(var(--glow, 0) * 3)), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--gold-paper) 45%, transparent), 0 12px 28px -18px rgba(13, 17, 23, .45); }
.paper .btn::before { background: conic-gradient(from var(--lap), transparent 0 64%, color-mix(in srgb, var(--gold-paper) 30%, transparent) 74%, var(--gold-paper) 82%, transparent 92%); }
.paper .btn.primary { color: var(--paper); background: linear-gradient(180deg, color-mix(in srgb, var(--gold-paper) 90%, transparent), color-mix(in srgb, var(--gold-paper) 78%, transparent)); }
.paper .btn.primary::before { background: conic-gradient(from var(--lap), transparent 0 64%, rgba(255, 255, 255, .35) 76%, rgba(255, 255, 255, .85) 82%, transparent 92%); }
html.on-paper .hdr .tools .btn:not(.primary), html.on-paper .om-btn:not([aria-expanded="true"]) { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3)); }
html.on-paper .hdr .tools .btn::before, html.on-paper .om-btn::before { background: conic-gradient(from var(--lap), transparent 0 64%, var(--gold-paper) 82%, transparent 92%); }
.btn > *, .om-btn > * { position: relative; }
@media (prefers-reduced-motion: reduce) { .btn::before, .om-btn::before, .rail .arrows button::before { animation: none; } }
html.rm .btn::before, html.rm .om-btn::before, html.rm .rail .arrows button::before { animation: none; }
.link { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: border-color .3s var(--settle), color .3s var(--settle); }
.link:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- loader (wordmark-curtain) ---------- */

/* ---------- the world (fixed background, four layers) ---------- */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--night); }
.w-base, .w-dawn { position: absolute; inset: -20%; }
.w-base { background: radial-gradient(60% 50% at 30% 30%, var(--field-a), transparent 70%), radial-gradient(50% 45% at 78% 70%, var(--field-b), transparent 70%); animation: drift 36s ease-in-out infinite alternate; }
.w-dawn { background: radial-gradient(55% 45% at 60% 35%, rgba(255, 255, 255, .14), transparent 72%); opacity: 0; transition: opacity 1.2s var(--settle); }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
.w-cam { position: absolute; inset: 0; perspective: 1500px; transition: filter .8s var(--settle); }
html.map-soft .w-cam { filter: blur(7px); } /* past the Doha moment: map blurred behind text for readability (OPOS 150910) */
.w-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.w-plate { position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; }
.w-pins { position: absolute; inset: 0; }
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .6s var(--settle); }
.pin.on { opacity: 1; }
.pin i { position: absolute; left: 0; top: 0; width: calc(10px * var(--inv, 1)); height: calc(10px * var(--inv, 1)); margin: calc(-5px * var(--inv, 1)) 0 0 calc(-5px * var(--inv, 1)); border-radius: 50%; background: var(--stone); box-shadow: 0 0 0 calc(4px * var(--inv, 1)) rgba(143, 180, 222, .18); }
.pin.lit i { background: var(--accent); }
.pin b { position: absolute; left: 0; top: 0; width: calc(34px * var(--inv, 1)); height: calc(34px * var(--inv, 1)); margin: calc(-17px * var(--inv, 1)) 0 0 calc(-17px * var(--inv, 1)); border-radius: 50%; border: calc(1px * var(--inv, 1)) solid var(--accent); opacity: 0; transform: scale(.4); transition: opacity .5s var(--settle), transform .7s var(--ease); }
.pin.sel b, .pin.lit b { opacity: .8; transform: scale(1); }
.pin.sel b { animation: ping 2.6s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.pin span { position: absolute; left: calc(16px * var(--inv, 1)); top: calc(-9px * var(--inv, 1)); white-space: nowrap; font: 500 calc(11px * var(--inv, 1))/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); opacity: 0; transition: opacity .5s var(--settle); }
.pin.sel span, .pin.label span { opacity: .9; }
.w-ring { position: absolute; left: 0; top: 0; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; }
.w-light { position: absolute; left: 0; top: 0; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; background: radial-gradient(closest-side, rgba(143, 180, 222, .10), rgba(143, 180, 222, .04) 45%, transparent 70%); }
.w-dust { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(1.5px); }
.w-grain { position: absolute; inset: -6%; /* was -50%: a layer 4x the screen area; the 4% jitter still never shows an edge (OPOS 150072) */ opacity: .06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain .9s steps(7) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 14% { transform: translate(-3%, 2%); } 28% { transform: translate(2%, -4%); } 42% { transform: translate(-4%, -1%); } 57% { transform: translate(3%, 3%); } 71% { transform: translate(-1%, 4%); } 85% { transform: translate(4%, -2%); } 100% { transform: translate(0, 0); } }
.w-vig { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55)); }
.w-scrim { position: absolute; inset: 0; background: var(--night); opacity: 0; }
.world::after { content: ""; position: absolute; inset: 0; background: var(--deep); opacity: 0; pointer-events: none; }
html.at-end .world::after { opacity: 1; } /* FAQ + footer cover the screen: the fixed map shows the footer black, so pulling past the end on iPhone shows black */

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--head); display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); pointer-events: none; }
.hdr > * { pointer-events: auto; }
.hdr::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(rgba(var(--bg-rgb), .94), rgba(var(--bg-rgb), .9) 62%, rgba(var(--bg-rgb), 0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent); opacity: 0; transition: opacity .5s var(--settle); pointer-events: none; }
.hdr.solid::before { opacity: 1; }
/* iPhone (Safari 26+) fills the space above the page, when pulled down at the top, with the plain background colour of
   the fixed element at the top edge, and with black when it has none. At the very top (before the header turns
   solid) the header carries the hero's own top colour, so that space matches the hero (OPOS 150473). */
.hdr:not(.solid) { background-color: #0C0F12; }
html.on-paper .hdr:not(.solid) { background-color: transparent; }
.logo { display: block; width: 118px; aspect-ratio: 435/171; background: var(--stone); -webkit-mask: var(--logo) center/contain no-repeat; mask: var(--logo) center/contain no-repeat; transition: opacity .3s; }
.logo:hover { opacity: .8; }
.coord { margin-left: auto; display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--stone-3); font-variant-numeric: tabular-nums; }
.coord b { font-weight: 500; color: var(--stone-2); }
.coord i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(143, 180, 222, .16); }
.hdr .tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr .tools .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }
.prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(0); opacity: .8; }
html.on-paper .hdr .logo { background: var(--paper-ink); }
html.on-paper .hdr .coord, html.on-paper .hdr .coord b { color: var(--paper-ink-2); }
html.on-paper .hdr::before { background: linear-gradient(color-mix(in srgb, var(--paper) 94%, transparent), color-mix(in srgb, var(--paper) 90%, transparent) 62%, color-mix(in srgb, var(--paper) 0%, transparent)); }
html.on-paper .hdr .tools .btn:not(.primary) { color: var(--gold-paper); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--gold-paper) 45%, transparent); }

/* orbit menu glyph inside the Index button */
.om-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 8px 0 18px; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--gold); }
.om-btn:hover { transform: scale(1.03); }
html.on-paper .om-btn:not([aria-expanded="true"]) { color: var(--gold-paper); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--gold-paper) 45%, transparent); }

/* ---------- layout ---------- */
main { position: relative; z-index: 2; }
.sec { position: relative; padding: clamp(96px, 14vh, 180px) var(--gut); }
.sec-head { display: grid; gap: 24px; max-width: 1500px; margin-bottom: clamp(48px, 7vh, 96px); }
/* section headings on one line (owner, 2026-11-02): the two parts of every two-part heading sit side by side and only
   wrap when the screen is too narrow */
h2[aria-label] > .ln { display: inline-block; vertical-align: bottom; }
/* a real space between the two parts, so a wrapped second line starts flush left */
.hide { display: none !important; }

/* reveal kit */
.rv { opacity: 0; transform: translateY(var(--rise)); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.in .rv, .rv.in { opacity: 1; transform: none; }
.cl > span { transform: translateY(135%); transition: transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.in .cl > span, .cl.in > span { transform: none; }
html.rm .rv, html.rm .cl > span { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- 1 hero ---------- */
.hero { height: 170svh; padding: 0; }
.hero .stage { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; padding: var(--head) var(--gut) 0; }
/* iPhone/iPad: the pinned hero gets its own GPU layer so it moves exactly with the finger scroll (WebKit sticky bugs
   297779/234500; the same fix that steadied the Way cards, OPOS 150348) */
@media (pointer: coarse) { .hero .stage { transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } }
.hero .copy { max-width: min(980px, 64vw); display: grid; gap: 28px; position: relative; }
.hero h1 { margin-top: 4px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero .foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 28px; display: flex; justify-content: space-between; align-items: center; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone-3); }
.hero .scroll { display: inline-flex; align-items: center; gap: 14px; }
.hero .scroll i { width: 1px; height: 40px; background: linear-gradient(var(--stone-2), transparent); transform-origin: top; animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero .scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--bg-rgb), .72), rgba(var(--bg-rgb), .25) 46%, transparent 70%); pointer-events: none; }
.hero .dohalabel { position: absolute; left: 50%; top: 50%; transform: translate(26px, -50%); opacity: 0; display: grid; gap: 6px; }
.hero .dohalabel b { font: 400 clamp(32px, 3vw, 48px)/1 var(--serif); letter-spacing: -.02em; }
.hero .dohalabel span { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--stone-2); }

/* ---------- 2 group ---------- */
.group { padding-top: 6vh; }
.group .stmt-wrap { max-width: 1240px; margin: 0 auto; text-align: center; display: grid; gap: 32px; justify-items: center; }
.wf .w { color: color-mix(in srgb, var(--stone) calc(var(--w, 0) * 100%), rgba(var(--ink-rgb), .2)); transition: color .2s linear; }
.acts { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 4vw, 64px); margin: clamp(80px, 14vh, 160px) auto 0; max-width: 1100px; }
.acts .w1 { justify-self: end; } .acts .w2 { justify-self: start; }
.acts .bar { width: 1px; height: clamp(80px, 12vw, 160px); background: var(--rule); transform-origin: top; transform: scaleY(0); transition: transform 1.2s var(--ease) .2s; }
.acts.in .bar { transform: none; }
.acts .cap { grid-column: 1 / -1; text-align: center; }
.strength { margin: 40px auto 0; text-align: center; max-width: 60ch; color: var(--stone-2); }
.nums { margin-top: clamp(80px, 14vh, 160px); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.nums li { padding: 36px 28px 40px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; }
.nums li:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--rule); }
.nums .v { font-size: clamp(44px, 4.6vw, 78px); line-height: 1; letter-spacing: -.03em; }
.nums .l { color: var(--stone-2); max-width: 30ch; }
.nums .s { font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--stone-3); }

/* ---------- 3 businesses (lateral pinned track) ---------- */
.biz { padding: 0; }
.biz .intro { padding: clamp(96px, 14vh, 180px) var(--gut) 40px; }
.biz .pin-wrap { position: relative; }
.biz .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; touch-action: pan-y; }
html.biz-lock { touch-action: none; } /* iPhone: no native scroll between the first and last business (OPOS 150415) */
.biz .track { position: absolute; left: 0; top: 0; height: 100%; display: flex; perspective: 1600px; }
.panel { position: relative; flex: 0 0 100vw; height: 100%; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4.5vw, 96px); padding: calc(var(--head) + 24px) var(--gut) 90px; }
.panel .tilt { display: contents; }
.frame { --mh: 70svh; position: relative; justify-self: end; width: min(100%, calc(var(--mh) * (var(--ar, 16/9)))); aspect-ratio: var(--ar, 16/9); overflow: hidden; border-radius: 2px; background: var(--surface); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8); transform: translate3d(var(--px, 0px), 0, 0) rotateY(var(--ry, 0deg)); transform-origin: 50% 50%; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .1); pointer-events: none; }
.frame .tag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(var(--bg-rgb), .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.ptext { display: grid; gap: 20px; max-width: 620px; align-content: center; }
.ptext .idx { font: 500 12px/1 var(--sans); letter-spacing: .2em; color: var(--stone-3); font-variant-numeric: tabular-nums; }
.ptext .idx b { color: var(--stone); font-weight: 500; }
.ptext .co { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 1.4vw, 22px); color: var(--stone-2); margin-top: -6px; }
.ptext .sum { color: var(--stone-2); max-width: 46ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin-top: 4px; }
.facts div { padding: 18px 14px 4px 0; display: grid; gap: 6px; align-content: start; }
.facts div + div { padding-left: 14px; border-left: 1px solid var(--rule); }
.facts dt { font-size: clamp(24px, 2.2vw, 38px); line-height: 1; letter-spacing: -.02em; }
.facts dd { font-size: 13px; line-height: 1.4; color: var(--stone-3); }
.pact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pact .btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.rail { position: absolute; left: var(--gut); right: var(--gut); bottom: 34px; display: flex; align-items: center; gap: 20px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone-3); }
.rail .ticks { flex: 1; display: flex; gap: 6px; }
.rail .ticks button { flex: 1; height: 24px; position: relative; }
.rail .ticks button::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); transition: background .4s var(--settle), height .4s var(--settle); }
.rail .ticks button.on::before { background: var(--accent); height: 2px; margin-top: -.5px; }
.rail .ticks button:hover::before { background: var(--stone-2); }
.rail .arrows { display: flex; gap: 8px; }
.rail .arrows button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.rail .arrows button:hover { transform: scale(1.06); color: var(--gold-hi); }
.rail .arrows svg { width: 16px; height: 16px; }

/* details drawer */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer .bd { position: absolute; inset: 0; background: rgba(5, 6, 8, .6); opacity: 0; transition: opacity .5s var(--settle); }
.drawer.open .bd { opacity: 1; }
.drawer .sheet { position: absolute; right: 0; top: 0; bottom: 0; width: min(580px, 100vw); background: var(--surface); box-shadow: -40px 0 80px -40px rgba(0, 0, 0, .8); transform: translateX(102%); transition: transform .7s var(--ease); overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.drawer.open .sheet { transform: none; }
.drawer .sheet figure { position: relative; aspect-ratio: var(--ar, 16/9); overflow: hidden; background: var(--deep); }
.drawer .sheet figure img { width: 100%; height: 100%; object-fit: contain; }
.drawer .x { position: absolute; right: 16px; top: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--bg-rgb), .65); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; transition: transform .35s var(--settle); }
.drawer .x:hover { transform: rotate(90deg); }
.drawer .x svg { width: 16px; height: 16px; }
.drawer .in-sheet { padding: 32px clamp(20px, 4vw, 40px) 48px; display: grid; gap: 22px; }
.drawer .units { display: grid; border-top: 1px solid var(--rule); }
.drawer .units li { padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--stone-2); display: flex; gap: 14px; }
.drawer .units li span { font: 500 11px/1.9 var(--sans); color: var(--stone-3); font-variant-numeric: tabular-nums; }
.drawer .contact-rows { display: grid; gap: 10px; }
.drawer .contact-rows a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); transition: color .3s; }
.drawer .contact-rows a:hover { color: var(--accent); }
.drawer .contact-rows a span:first-child { color: var(--stone-3); font-size: 14px; }

/* ---------- 4 the Mannai Way (sticky stack) ---------- */
.way .vm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(80px, 12vh, 140px); }
.way .vm div { display: grid; gap: 18px; align-content: start; border-top: 1px solid var(--rule); padding-top: 24px; }
.way .vm p { font: 400 clamp(22px, 2.1vw, 32px)/1.3 var(--serif); letter-spacing: -.01em; }
.stack { position: relative; perspective: 1600px; }
.wcard { position: sticky; top: calc(var(--head) + 6svh); height: 64svh; min-height: 420px; margin: 0 auto 36svh; width: min(1320px, 100%); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 4vw, 56px); border-radius: 4px; background: rgba(var(--surface-rgb), .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--rule), 0 40px 90px -40px rgba(0, 0, 0, .9); transform-origin: 50% 0; transform: rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); }
.wcard:last-child { margin-bottom: 10svh; }
.wcard .dim { position: absolute; inset: 0; border-radius: inherit; background: var(--night); opacity: var(--dm, 0); pointer-events: none; }
.wcard .n { font-size: clamp(72px, 9vw, 150px); line-height: .8; letter-spacing: -.04em; color: var(--accent); opacity: .9; }
.wcard .l { display: grid; gap: 18px; align-content: space-between; }
.wcard .r { display: grid; gap: 22px; align-content: center; }
.wcard .r .lead { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(23px, 2.1vw, 32px); color: var(--stone); line-height: 1.35; }
.wcard ul { border-top: 1px solid var(--rule); }
.wcard li { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--stone-2); font-size: 18px; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.wcard li::before { content: ""; width: 6px; height: 6px; margin-top: 11px; border-radius: 50%; border: 1px solid var(--accent); }

/* ---------- 5 heritage (timeline) ---------- */
.tl { position: relative; }
.tl ol { display: grid; gap: clamp(56px, 10vh, 120px); padding: 20px 0 40px; }
.tl .spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 64px; margin-left: -32px; pointer-events: none; }
.tl .spine::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.tl .spine i { position: absolute; left: 31px; top: 0; bottom: 0; width: 2px; background: var(--accent); transform-origin: top; transform: scaleY(var(--tl, 0)); }
.ev { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: start; }
.ev .dot { grid-column: 2; justify-self: center; width: 13px; height: 13px; margin-top: .9em; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1px var(--stone-3); transition: background .5s var(--settle), box-shadow .5s; }
.ev.lit .dot { background: var(--accent); box-shadow: 0 0 0 6px rgba(143, 180, 222, .16); }
.ev .body { display: grid; gap: 10px; max-width: 440px; }
.ev:nth-child(odd) .body { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.ev:nth-child(even) .body { grid-column: 3; grid-row: 1; }
.ev .yr { color: var(--stone); }
.ev h3 { font: 500 13px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ev p { color: var(--stone-2); }

/* ---------- 6 investors (paper, colour flood) ---------- */
.inv { position: relative; z-index: 3; padding-top: clamp(96px, 14vh, 160px); color: var(--paper-ink); }
.inv .flood { position: absolute; inset: 0; z-index: -1; background: var(--paper); clip-path: circle(var(--fr, 0px) at var(--fx, 50%) var(--fy, 0px)); }
html.rm .inv .flood { clip-path: none; }
.inv .tickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; color: var(--paper-ink-2); }
.inv .tkr { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--paper-ink); color: var(--paper-ink); font: 500 13px/1 var(--sans); letter-spacing: .18em; }
.res { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--paper-ink); }
.res li { padding: 28px 24px 34px 0; display: grid; gap: 12px; align-content: start; }
.res li + li { padding-left: 24px; border-left: 1px solid var(--paper-rule); }
.res .p { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.res .dt { font-size: 13px; color: var(--paper-ink-2); }
.res .v { font-size: clamp(40px, 3.8vw, 64px); line-height: 1; letter-spacing: -.03em; margin-top: 14px; }
.res .vl { color: var(--paper-ink-2); font-size: 14px; }
.res .ch { display: flex; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 1px solid var(--paper-rule); margin-top: 8px; }
.res .ch b { font: 400 26px/1 var(--serif); color: var(--accent-paper); }
.res .ch span, .res .ex { font-size: 14px; color: var(--paper-ink-2); }
.inv .note { margin-top: 18px; font-size: 13px; color: var(--paper-ink-2); }
.inv-grid { margin-top: clamp(72px, 10vh, 120px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.inv-grid h3 { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding-bottom: 16px; border-bottom: 1px solid var(--paper-ink); margin-bottom: 4px; }
.rows a, .rows li > span { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--paper-rule); transition: color .3s, padding .4s var(--settle); }
.rows a:hover { color: var(--accent-paper); padding-left: 6px; }
.rows a svg { width: 15px; height: 15px; flex: none; }
.rows .tag { font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-ink-2); }
.cmte li { padding: 14px 0; border-bottom: 1px solid var(--paper-rule); display: grid; gap: 4px; }
.cmte b { font-weight: 500; }
.cmte span { color: var(--paper-ink-2); font-size: 14px; }
.inv .tail { height: clamp(36px, 6vh, 72px); }
/* minimal Investors (owner, 2026-11-02) */
.res-min { border-top: 1px solid var(--paper-rule); }
.res-min li, .res-min li + li { border-left: 0; padding: 30px 28px 8px 0; gap: 14px; }
.res-min .v { margin-top: 6px; }
.res-min .mini { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--paper-ink-2); }
.res-min .mini b { font-weight: 500; color: var(--accent-paper); }
.inv-min { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(44px, 6vh, 72px); }
.years { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }
.years a { display: inline-grid; place-items: center; min-width: 74px; min-height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--paper-rule); font: 500 14px/1 var(--sans); letter-spacing: .04em; transition: box-shadow .3s var(--settle), color .3s var(--settle); }
.years a:hover, .years a:focus-visible { color: var(--accent-paper); box-shadow: inset 0 0 0 1px var(--accent-paper); }
.cmte-d { margin-top: clamp(28px, 4vh, 48px); border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.cmte-d summary { display: flex; justify-content: space-between; align-items: center; min-height: 60px; cursor: pointer; list-style: none; font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.cmte-d summary::-webkit-details-marker { display: none; }
.cmte-d .pm { position: relative; width: 14px; height: 14px; }
.cmte-d .pm::before, .cmte-d .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .3s var(--settle); }
.cmte-d .pm::after { transform: rotate(90deg); }
.cmte-d[open] .pm::after { transform: rotate(0deg); }
.cmte-d .cmte { padding-bottom: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }

/* ---------- 7 leadership (shutter seam) ---------- */
.lead-sec { padding-top: 0; }
.shutter { position: relative; height: 100svh; margin: 0 calc(var(--gut) * -1); display: grid; place-items: center; text-align: center; overflow: clip; }
.shutter .h { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--paper); z-index: 2; }
.shutter .h.t { top: 0; transform: translateY(var(--sh, 0%)); }
.shutter .h.b { bottom: 0; transform: translateY(calc(var(--sh, 0%) * -1)); }
.shutter .sec-head { margin: 0; justify-items: center; padding: 0 var(--gut); }
.people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 24px; }
.people + .lbl2 { margin-top: clamp(72px, 10vh, 120px); }
.lbl2 { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: 18px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.person { display: grid; gap: 14px; align-content: start; }
.person .ph { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 2px; background: var(--surface); clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); transition-delay: var(--d, 0ms); }
.people.in .ph, html.rm .person .ph { clip-path: inset(0 0 0 0); }
.person .ph img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05) brightness(.92); transition: filter .6s var(--settle), transform .8s var(--ease); }
.person .ph::after { content: ""; position: absolute; inset: 0; background: rgba(46, 84, 130, .32); mix-blend-mode: multiply; transition: opacity .6s var(--settle); }
.person:hover .ph img, .person:focus-within .ph img { filter: none; }
.person:hover .ph::after, .person:focus-within .ph::after { opacity: 0; }
.person .ph .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 400 44px/1 var(--serif); color: var(--stone-3); }
.person b { font-weight: 500; line-height: 1.35; font-size: 16px; }
.person span { color: var(--stone-3); font-size: 14px; }
.gov { margin-top: clamp(72px, 10vh, 120px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.gov p { max-width: 70ch; color: var(--stone-2); }

/* ---------- 8 marquee bridge ---------- */
.mq { position: relative; z-index: 2; overflow: clip; padding: clamp(26px, 4.5vh, 52px) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mq .row { display: flex; width: max-content; will-change: transform; }
.mq span { font: italic 400 clamp(26px, 3.4vw, 56px)/1.05 var(--serif); letter-spacing: -.02em; padding-right: .6em; white-space: nowrap; color: var(--stone); }
.mq span em { font-style: normal; color: var(--accent); }

/* ---------- 9 news & careers ---------- */
.news li { position: relative; }
.news li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.news.in li::before, html.rm .news li::before { transform: none; }
.news a { display: grid; grid-template-columns: 150px 200px minmax(0, 1fr) 44px; gap: 24px; align-items: center; padding: 26px 0; transition: color .3s, padding .4s var(--settle); }
.news a:hover { color: var(--accent); padding-left: 10px; }
.news time { font-variant-numeric: tabular-nums; color: var(--stone-3); font-size: 14px; }
.news .u { font: 500 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--stone-2); }
.news .t { font: 400 clamp(19px, 1.6vw, 25px)/1.3 var(--serif); }
.news svg { width: 18px; height: 18px; justify-self: end; transition: transform .35s var(--settle); }
.news a:hover svg { transform: translate(3px, -3px); }
.news-foot { margin-top: 32px; }
.careers { margin-top: clamp(96px, 14vh, 180px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.roles li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.roles .btn { flex: none; }
.roles li:first-child { border-top: 1px solid var(--rule); }
.roles b { font: 400 clamp(20px, 1.7vw, 26px)/1.25 var(--serif); display: block; }
.roles span { color: var(--stone-3); font-size: 14px; }

/* ---------- 10 places & contact ---------- */
.places { padding: 0 0 clamp(96px, 14vh, 180px); }
.places .contact { margin-left: var(--gut); margin-right: var(--gut); }
.pl-wrap { height: 170svh; }
.places .panel-l { position: sticky; top: calc(var(--head) + 4svh); width: min(440px, 100%); display: grid; gap: 22px; padding: 28px; border-radius: 4px; background: rgba(var(--bg-rgb), .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--rule); }
.plist { display: grid; max-height: 34svh; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--rule); scrollbar-width: thin; }
.plist button { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left; padding: 12px 6px; border-bottom: 1px solid var(--rule); min-height: 52px; transition: background .3s, color .3s; }
.plist button:hover { background: rgba(var(--ink-rgb), .05); }
.plist button[aria-pressed="true"] { color: var(--accent); }
.plist button b { font-weight: 500; font-size: 15px; }
.plist button span { grid-column: 1; font-size: 13px; color: var(--stone-3); }
.plist button i { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--stone-3); }
.plist button[aria-pressed="true"] i { background: var(--accent); box-shadow: none; }
.pcard { display: grid; gap: 8px; padding-top: 4px; }
.pcard .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pcard .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
.contact { margin-top: clamp(80px, 12vh, 140px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); padding: clamp(28px, 4vw, 56px); border-radius: 4px; background: rgba(var(--bg-rgb), .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--rule); }
.contact .info { display: grid; gap: 28px; align-content: start; }
.contact .info dl { display: grid; gap: 18px; }
.contact .info dt { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone-3); margin-bottom: 6px; }
.contact .info dd a { border-bottom: 1px solid var(--rule); transition: color .3s, border-color .3s; }
.contact .info dd a:hover { color: var(--accent); border-color: var(--accent); }
.hours { display: grid; }
.hours li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--stone-2); font-variant-numeric: tabular-nums; }
.hours li.today { color: var(--stone); }
.hours li.today b::after { content: " · today"; color: var(--accent); font-weight: 500; }
.hours b { font-weight: 400; }
form.cf { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
.cf .f { display: grid; gap: 8px; }
.cf .f.full { grid-column: 1 / -1; }
.cf label { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--stone-2); }
.cf label .req { color: var(--accent); }
.cf input, .cf select, .cf textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--rule); background: rgba(var(--ink-rgb), .03); color: var(--stone); transition: border-color .3s, background .3s; }
.cf select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.cf select option { background: var(--surface); }
.cf textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.cf input:hover, .cf select:hover, .cf textarea:hover { border-color: var(--stone-3); }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--accent); background: rgba(143, 180, 222, .05); }
.cf [aria-invalid="true"] { border-color: #E39A8F; }
.cf .err { font-size: 13px; color: #E39A8F; min-height: 0; }
.cf .consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--stone-2); text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.cf .consent input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); }
.cf .send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cf .msg { font-size: 15px; color: var(--stone-2); }
.cf .msg.ok { color: var(--accent); }
.cf .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- 11 FAQ, CTA, footer ---------- */
.faq-sec { background: var(--night); z-index: 3; }
.faq { border-top: 1px solid var(--rule); max-width: 980px; }
.faq li { border-bottom: 1px solid var(--rule); }
.faq button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; padding: 24px 0; min-height: 64px; font: 400 clamp(20px, 1.8vw, 27px)/1.3 var(--serif); transition: color .3s; }
.faq button:hover { color: var(--accent); }
.faq .pm { flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); position: relative; transition: transform .4s var(--settle); }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 1px; background: currentColor; }
.faq .pm::after { transform: rotate(90deg); transition: transform .4s var(--settle); }
.faq [aria-expanded="true"] .pm { transform: rotate(180deg); }
.faq [aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.faq .ans { height: 0; overflow: hidden; }
.faq .ans .ai { padding: 0 64px 28px 0; color: var(--stone-2); max-width: 70ch; }
/* closing banner, design A "Editorial line" (owner pick, 2026-11-02): no box, a strong top rule, big headline + button,
   and a Call / Email / Visit column on the right */
.cta-line { position: relative; margin-top: clamp(96px, 14vh, 180px); padding: clamp(56px, 8vh, 88px) 0 clamp(48px, 7vh, 80px); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.cta-line .cl-main { display: grid; gap: 26px; justify-items: start; }
.cta-line h2 { font-size: clamp(48px, 5.6vw, 96px); }
.cta-line .cl-list { margin: 0; }
.cta-line .cl-list div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.cta-line dt { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--stone-3); }
.cta-line dd { margin: 0; font: 400 clamp(19px, 1.6vw, 24px)/1.25 var(--serif); overflow-wrap: anywhere; }
.cta-line dd a { transition: color .3s var(--settle); }
.cta-line dd a:hover { color: var(--accent); }
.ftr { position: relative; z-index: 2; background: var(--deep); padding: clamp(72px, 10vh, 120px) var(--gut) calc(32px + env(safe-area-inset-bottom)); }
.ftr .top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 64px); padding-bottom: 56px; border-bottom: 1px solid var(--rule); }
.ftr .brand { display: grid; gap: 20px; align-content: start; }
.ftr .brand p { color: var(--stone-2); max-width: 36ch; font-size: 15px; }
.ftr h3 { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--stone-3); margin-bottom: 18px; }
.ftr li { margin-bottom: 10px; }
.ftr li a, .ftr address a { color: var(--stone-2); font-size: 15px; transition: color .3s; }
.ftr li a:hover, .ftr address a:hover { color: var(--stone); }
.ftr address { font-style: normal; color: var(--stone-2); font-size: 15px; display: grid; gap: 8px; }
.ftr .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-top: 28px; font-size: 13px; color: var(--stone-3); }
.ftr .bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ftr .bottom a:hover { color: var(--stone); }
.ftr .wm { margin-top: 56px; font: 400 clamp(80px, 18vw, 300px)/.8 var(--serif); letter-spacing: -.05em; color: rgba(var(--ink-rgb), .05); text-align: center; user-select: none; white-space: nowrap; overflow: clip; }
/* Easy Technology credit: small white logo, centred at the very end of the page */
.et-credit { display: block; width: 112px; margin: 40px auto 0; opacity: 1; transition: opacity .3s var(--settle); }
.et-credit:hover, .et-credit:focus-visible { opacity: .7; }
.et-credit img { width: 100%; height: auto; }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); display: grid; place-items: center; transition: transform .35s var(--settle), box-shadow .35s; }
.social a:hover { transform: scale(1.06); box-shadow: inset 0 0 0 1px var(--stone-2); }
.social svg { width: 16px; height: 16px; }

/* ---------- orbit menu (part, themed) ---------- */
.om-ov { --bg: var(--night); --ink: var(--stone); --muted: var(--stone-3); --surface: var(--surface); --font-display: var(--serif); --font-body: var(--sans); }
.om-ico { position: relative; width: 30px; height: 30px; }
.om-ico svg { width: 100%; height: 100%; fill: currentColor; transition: opacity .3s .5s; }
.menu-open .om-ico svg { opacity: 0; transition-duration: .01s; transition-delay: 0s; }
.om-x { position: absolute; inset: 0; opacity: 0; transform: rotate(-90deg) scale(.3); transition: opacity .2s; }
.om-x::before, .om-x::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transform: rotate(45deg); }
.om-x::after { transform: rotate(-45deg); }
.menu-open .om-x { opacity: 1; transform: none; transition: transform .9s cubic-bezier(.16, 1, .3, 1) .45s, opacity .3s .45s; }
.om-lbl { display: block; height: 1.25em; overflow: hidden; line-height: 1.25; }
.om-lbl span { display: block; transition: transform .8s cubic-bezier(.65, 0, .2, 1); }
.menu-open .om-lbl span { transform: translateY(-100%); }
.om-ov { position: fixed; inset: 0; z-index: 80; visibility: hidden; overflow: hidden; transition: visibility 0s linear var(--t-hide, 1.3s); }
.menu-open .om-ov { visibility: visible; transition-delay: 0s; }
.om-ov[data-mode=stack] { overflow-y: auto; }
.om-wash { position: fixed; inset: 0; background: rgba(var(--bg-rgb), .93); -webkit-backdrop-filter: blur(16px) saturate(.9); backdrop-filter: blur(16px) saturate(.9); clip-path: circle(0 at var(--gx, 0) var(--gy, 0)); transition: clip-path var(--t-close, 1s) cubic-bezier(.7, 0, .25, 1) var(--t-cd, .25s); }
.menu-open .om-wash { clip-path: circle(var(--cr, 0) at var(--gx, 0) var(--gy, 0)); transition: clip-path var(--t-open, 1.2s) cubic-bezier(.62, 0, .18, 1); }
.om-orb { position: absolute; left: var(--ox, 0); top: var(--oy, 0); width: 0; height: 0; }
.om-list { list-style: none; margin: 0; padding: 0; }
.om-it { position: absolute; left: 0; top: 0; pointer-events: none; transition: opacity .3s; }
.has-hot .om-it:not(.hot) { opacity: .38; }
.om-dot { position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); border-radius: 50%; background: var(--stone); box-shadow: 0 0 0 2px var(--night); opacity: 0; --px: var(--gx0); --py: var(--gy0); --s: var(--gs); transform: translate(var(--px), var(--py)) scale(var(--s)); transition: transform .6s cubic-bezier(.7, 0, .25, 1), opacity .2s .5s, background .25s; }
.menu-open .om-dot { --px: var(--tx); --py: var(--ty); --s: 1; opacity: 1; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--dd), opacity .01s var(--dd), background .25s; }
.menu-settled [data-mode=orbit] .om-it[data-k=c] .om-dot { --px: 0px; --py: 0px; }
.om-it[data-k=l] .om-dot { pointer-events: auto; cursor: pointer; }
.om-it.hot .om-dot { --s: 1.5; background: var(--accent); }
.om-sp { position: absolute; left: 0; top: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--a)); }
.om-sp i { position: absolute; left: 0; top: -.5px; height: 1px; transform-origin: 0 50%; transition: transform .3s, opacity .3s, background .25s; }
.om-sp .o { width: var(--lo); background: var(--stone); opacity: .5; transform: translateX(var(--dr)) scaleX(.001); }
.om-sp .n { width: var(--lin); background: var(--accent); opacity: .5; transform: rotate(180deg) translateX(var(--dr)) scaleX(.001); }
.menu-open .om-sp i { transition: transform .7s cubic-bezier(.65, 0, .35, 1) var(--sd), opacity .3s, background .25s; }
.menu-open .om-sp .o { transform: translateX(var(--dr)) scaleX(1); }
.menu-open .om-sp .n { transform: rotate(180deg) translateX(var(--dr)) scaleX(.3); }
.om-it.hot .om-sp i { opacity: 1; transition: transform .5s var(--ease), opacity .3s, background .25s; }
.om-it.hot .om-sp .o { background: var(--accent); }
.om-it.hot .om-sp .n { transform: rotate(180deg) translateX(var(--dr)) scaleX(1); }
.om-lw { position: absolute; left: 0; top: 0; white-space: nowrap; text-align: var(--ta); transform: translate(var(--lx), var(--ly)) translate(var(--ax), var(--ay)); }
.om-lab { display: block; color: var(--stone); text-decoration: none; font: 400 clamp(22px, 2.6vw, 40px)/1.05 var(--serif); letter-spacing: -.025em; pointer-events: auto; opacity: 0; filter: blur(8px); transform: translate(calc(var(--ux) * -26px), calc(var(--uy) * -26px)); transition: opacity .25s, filter .25s, transform .25s, color .25s; }
.menu-open .om-lab { opacity: 1; filter: none; transform: none; transition: opacity .9s var(--ease) var(--d), filter .9s var(--ease) var(--d), transform 1s var(--ease) var(--d), color .25s; }
.om-lab .num { display: block; margin-bottom: 6px; font: 500 11px/1 var(--sans); letter-spacing: .08em; color: var(--stone-3); }
.om-it.hot .om-lab, .om-it.hot .num { color: var(--accent); }
.om-pv { position: absolute; left: 0; top: 0; width: var(--pvd); height: var(--pvd); margin: calc(var(--pvd) / -2) 0 0 calc(var(--pvd) / -2); border-radius: 50%; overflow: hidden; background: var(--surface); clip-path: circle(0); transition: clip-path .5s; }
.menu-open .om-pv { clip-path: circle(50%); transition: clip-path 1s cubic-bezier(.65, 0, .2, 1) var(--t-pv, 1.05s); }
.om-pvi { position: absolute; inset: 0; background: var(--deep) center/cover no-repeat; opacity: 0; transition: opacity .7s; }
.om-pvi.on { opacity: 1; }
.om-cap { position: fixed; left: var(--gut); bottom: 28px; display: grid; gap: 6px; font-size: 13px; color: var(--stone); opacity: 0; transition: opacity .3s; }
.menu-open .om-cap { opacity: 1; transition: opacity .6s ease var(--t-cap, 1.2s); }
.om-cap b { font: 500 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .2em; color: var(--stone-3); }
.om-size { height: var(--oh, 0); }
.om-ov[data-mode=stack] :is(.om-pv, .om-cap, .om-sp) { display: none; }
.om-ov[data-mode=stack] .om-lab { font-size: clamp(26px, 8vw, 34px); }
.om-ov[data-mode=stack] .om-lab .num { display: inline; margin: 0 10px 0 0; }
html.om-nt .om-ov * { transition: none !important; }

/* ---------- legal pages + 404 ---------- */
.doc { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: calc(var(--head) + 80px) var(--pad) 120px; display: grid; gap: 28px; }
.doc .body p { color: var(--stone-2); margin-bottom: 18px; white-space: pre-line; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .coord { display: none; }
  .panel { grid-template-columns: 1fr; align-content: center; gap: 28px; padding-top: calc(var(--head) + 8px); padding-bottom: 100px; }
  .frame { --mh: 42svh; justify-self: start; }
  .ptext { max-width: 640px; }
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res li:nth-child(3) { padding-left: 0; border-left: 0; }
  .res li:nth-child(n + 3) { border-top: 1px solid var(--paper-rule); }
  .inv-grid { grid-template-columns: 1fr 1fr; }
  .inv-grid > :last-child { grid-column: 1 / -1; }
  .contact { grid-template-columns: 1fr; }
  .ftr .top { grid-template-columns: 1fr 1fr; }
  .news a { grid-template-columns: 130px minmax(0, 1fr) 32px; }
  .news .u { display: none; }
  .careers { grid-template-columns: 1fr; }
  .wcard { grid-template-columns: 1fr; height: min(680px, calc(100svh - var(--head) - 8svh)); min-height: 0; align-content: center; overflow: hidden; }
  .wcard .l { align-content: start; }
}
@media (max-width: 767px) {
  :root { --head: 64px; }
  body { font-size: 16px; }
  .logo { width: 96px; }
  .hdr .tools .btn.c { display: none; }
  .hero .stage { align-content: start; padding-top: calc(var(--head) + 6svh); }
  .hero h1 { font-size: clamp(34px, 14vw, 60px); } /* two lines on phones: 'The standard' / 'of excellence.' (owner, 2026-11-02) */
  .hero h1 .ln > span { white-space: nowrap; }
  .hero .copy { gap: 22px; }
  .hero .cta .btn { flex: 1 1 auto; }
  .hero .scrim { background: linear-gradient(180deg, rgba(var(--bg-rgb), .78), rgba(var(--bg-rgb), .35) 55%, transparent 80%); }
  .hero .foot { bottom: 18px; gap: 12px; }
  .hero .foot > :last-child { display: none; } /* phones: only the listing line; the scroll hint ran into it */
  .nums { grid-template-columns: 1fr 1fr; }
  .nums li { padding: 26px 14px 28px 0 !important; border-left: 0 !important; }
  .nums li:nth-child(even) { padding-left: 14px !important; border-left: 1px solid var(--rule) !important; }
  .acts { gap: 16px; }
  .acts .d-l { font-size: clamp(36px, 11vw, 52px); }
  .panel { gap: 18px; padding: calc(var(--head) + 36px) var(--pad) 76px; align-content: safe center; } /* start below the header fade so the photo top is never covered (owner, 2026-11-02) */
  .frame { --mh: 24svh; justify-self: center; }
  .ptext { gap: 10px; }
  .ptext .d-m { font-size: clamp(30px, 8.6vw, 38px); }
  .ptext .sum { font-size: 15px; } /* full text on phones, no 3-line cut (owner, 2026-11-02) */
  .ptext .co { font-size: 16px; }
}
@media (max-width: 767px) {
  .facts dt { font-size: 22px; }
  .facts dd { font-size: 12px; }
  .pact .btn { flex: 1 1 0; padding: 0 12px; }
  .rail { bottom: 20px; left: var(--pad); right: var(--pad); }
  .rail .lbl { display: none; }
  .rail .arrows button { width: 40px; height: 40px; }
  .way .vm { grid-template-columns: 1fr; }
  /* iOS sticky shake (WebKit bugs 297779 / 234500 / 133334): no clip and no 3D context on the sticky cards' wrapper;
     the cards no longer tilt on phones, so neither is needed (owner, 2026-11-02: "the cards are shaking") */
  .stack { overflow-x: visible; perspective: none; }
  /* phones: the pinned card stack (owner likes it), kept steady: no tilt/scale (forced off) and no live blur */
  .wcard { top: calc(var(--head) + 2svh); margin-bottom: 24svh; height: calc(100svh - var(--head) - 4svh); padding: 24px 20px; gap: 18px; }
  /* each pinned card on its own GPU layer, so the phone moves it with the scroll itself (no main-thread lag) */
  .wcard { transform: translateZ(0) !important; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .wcard .n { font-size: 64px; }
  .wcard li { font-size: 16.5px; padding: 10px 0; }
  .tl .spine { left: 0; margin-left: 0; width: 24px; }
  .tl .spine::before, .tl .spine i { left: 5px; }
  .ev { grid-template-columns: 24px 1fr; gap: 0 16px; }
  .ev .dot { grid-column: 1; justify-self: start; margin-left: 0; }
  .ev:nth-child(odd) .body, .ev:nth-child(even) .body { grid-column: 2; justify-self: start; text-align: left; }
  .res { grid-template-columns: 1fr; }
  .res li, .res li + li { padding: 24px 0; border-left: 0; }
  .res li + li { border-top: 1px solid var(--paper-rule); }
  .inv-grid { grid-template-columns: 1fr; }
  .res-min li, .res-min li + li { padding: 22px 0 6px; border-top: 0; }
  .cmte-d .cmte { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .news a { grid-template-columns: 1fr 24px; gap: 8px 16px; padding: 20px 0; }
  .news time { grid-column: 1; }
  .news .t { grid-column: 1; }
  .news svg { grid-row: 1 / 3; grid-column: 2; align-self: center; }
  .places .panel-l { width: 100%; padding: 20px; }
  .plist { max-height: 26svh; }
  form.cf { grid-template-columns: 1fr; }
  .contact { padding: 24px 18px; }
  .faq .ans .ai { padding-right: 0; }
  .ftr .top { grid-template-columns: 1fr 1fr; gap: 36px 20px; } /* Group + Businesses side by side on phones (owner, 2026-11-02) */
  .ftr .brand, .ftr .top > div:last-child { grid-column: 1 / -1; }
  .wcard { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--surface-rgb), .97); } /* no live blur behind moving cards on phones: smoother */
  .cta-line { grid-template-columns: 1fr; align-items: start; }
  .cta-line .cl-list div { grid-template-columns: 76px minmax(0, 1fr); padding: 14px 0; }
}
/* short phones (iPhone SE and similar): smaller photo and tighter spacing so the full business text fits without anything sliding under the header */
@media (max-width: 767px) and (max-height: 760px) {
  .frame { --mh: 22svh; }
  .panel { gap: 12px; padding-bottom: 72px; }
  .ptext { gap: 7px; }
  .ptext .d-m { font-size: clamp(26px, 7.6vw, 32px); }
  .ptext .sum { font-size: 14px; line-height: 1.45; }
  .facts dt { font-size: 19px; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .frame { --mh: 16svh; }
}

/* ---------- reduced motion: content stays complete, no pins ---------- */
html.rm .hero { height: auto; }
html.rm .hero .stage { position: relative; min-height: 100svh; }
html.rm .biz .stage { position: relative; height: auto; overflow: visible; }
html.rm .biz .track { position: relative; flex-direction: column; }
html.rm .panel { flex: none; width: 100%; height: auto; min-height: 0; padding-top: 48px; padding-bottom: 48px; }
html.rm .rail { display: none; }
html.rm .wcard { position: relative; top: 0; margin-bottom: 32px; transform: none; }
html.rm .shutter .h { display: none; }
html.rm .places .panel-l { position: relative; }
html.rm .pl-wrap { height: auto; }
html.rm .w-grain, html.rm .w-base { animation: none; }

/* ---------- Places & contact: design D (owner pick 2026-11-02): editorial Bodoni index + glass card in the corner ---------- */
.pl-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--bg-rgb), .9) 0%, rgba(var(--bg-rgb), .78) 38%, rgba(var(--bg-rgb), 0) 62%); }
.pl-stage { isolation: isolate; position: sticky; top: 0; height: 100svh; padding: calc(var(--head) + 4svh) var(--gut) 6svh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto 1fr; gap: 3svh clamp(24px, 4vw, 64px); }
.pl-head { grid-column: 1; grid-row: 1; display: grid; gap: 14px; max-width: 760px; }
.pl-head h2 { white-space: nowrap; }
/* Places title on one line: "Where to find us." (owner, 2026-11-02) */
.pl-head h2 .ln { display: inline-block; vertical-align: bottom; }

@media (max-width: 767px) { .pl-head h2 { white-space: normal; } .pl-head .d-l { font-size: clamp(30px, 8.6vw, 40px); } }
.pl-head .lead { font-size: 15px; }
.pl-idx { grid-column: 1; grid-row: 2; align-self: start; border-top: 1px solid var(--rule); max-width: 900px; }
.pl-idx button { text-align: left; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: baseline; gap: 14px; width: 100%; min-height: 64px; padding: 17px 0; border-bottom: 1px solid var(--rule); color: var(--stone-2); transition: padding .45s var(--settle), color .3s; }
.pl-idx button:hover, .pl-idx button:focus-visible { padding-left: 8px; color: var(--stone); }
.pl-idx .no { font: 400 14px/1 var(--serif); color: var(--stone-3); }
.pl-idx b { font: 400 clamp(19px, 1.75vw, 26px)/1.15 var(--serif); text-wrap: balance; }
.pl-idx .ar { font: 500 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--stone-3); text-align: right; }
.pl-idx button[aria-pressed="true"] { color: var(--stone); padding-left: 8px; }
.pl-idx button[aria-pressed="true"] b { font-style: italic; }
.pl-idx button[aria-pressed="true"] .no { color: var(--accent); }
.pl-card { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; width: min(360px, 100%); padding: 22px 24px; border-radius: 6px; display: grid; gap: 6px; }
.pl-card:empty { display: none; }
.pl-card .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl-card .btn { min-height: 40px; padding: 0 15px; font-size: 13px; }
.glass { background: rgba(var(--bg-rgb), .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(0, 0, 0, .8); }
@media (max-width: 1099px) {
  .pl-stage { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .pl-card { grid-column: 1; grid-row: 3; justify-self: start; }
  .pl-stage::before { background: linear-gradient(180deg, rgba(var(--bg-rgb), .88) 0%, rgba(var(--bg-rgb), .7) 60%, rgba(var(--bg-rgb), .2) 100%); }
}
@media (max-width: 767px) {
  .pl-stage { padding-top: calc(var(--head) + 2svh); padding-bottom: 3svh; gap: 2svh; }
  .pl-head .d-l { font-size: clamp(34px, 10vw, 44px); }
  .pl-head .lead { display: none; }
  .pl-idx button { grid-template-columns: 30px minmax(0, 1fr); min-height: 48px; padding: 11px 0; gap: 10px; }
  .pl-idx .ar { display: none; }
  .pl-idx b { font-size: 18px; }
  .pl-card { width: 100%; padding: 16px 18px; }
}
html.rm .pl-stage { position: relative; height: auto; }

/* News, Careers and Places each fill their own screen (owner, 2026-11-02) */
.news-sec { padding-bottom: 0; }
.news-block { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 10vh 0; }
.news-foot { margin-bottom: 0; }
.careers { margin-top: 0; min-height: 100svh; align-items: center; align-content: center; padding: 14vh 0; border-top: 1px solid var(--rule); }
.places { margin-top: 18vh; }
@media (max-width: 767px) { .careers, .news-block { min-height: 0; padding: 12vh 0; } .places { margin-top: 10vh; } }