:root {
  --ink: #1D1D1F;
  --text: #333336;
  --grey: #6E6E73;
  --soft: #F5F5F7;
  --soft-2: #E8E8ED;
  --line: #D2D2D7;
  --white: #FFFFFF;
  --red: #A50F25;
  --red-dark: #840C1E;
  --font: "Google Sans", -apple-system, BlinkMacSystemFont, "SF Hebrew", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --wide: 74rem;
  --r: 1.5rem;
}

* { box-sizing: border-box; margin: 0; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { background: var(--white); color: var(--text); font: 400 1.25rem/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: .5rem; }
h1, h2, h3 { color: var(--ink); font-weight: 500; letter-spacing: -.02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: fixed; top: -5rem; right: 1rem; z-index: 100; padding: .75rem 1.25rem; background: var(--ink); color: #fff; border-radius: 1rem; }
.skip:focus { top: 1rem; }

/* Buttons: pills that react on press */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.4rem; border-radius: 999px;
  font: 500 1.0625rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s, transform .1s ease-out;
}
.pill:active { transform: scale(.97); }
.pill-lg { min-height: 3.6rem; padding: 0 1.9rem; font-size: 1.15rem; }
.pill-red { background: var(--red); color: #fff; box-shadow: 0 6px 18px -8px rgba(165, 15, 37, .55); }
.pill-red:hover { background: var(--red-dark); }
.pill-line { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-line:hover { background: var(--ink); color: #fff; }
.arrow-link { color: var(--red); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.arrow-link::after { content: "←"; transition: transform .25s cubic-bezier(.2, .9, .3, 1); }
.arrow-link:hover::after { transform: translateX(-.3rem); }

/* Header: a translucent layer; content scrolls underneath */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem var(--gutter);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: box-shadow .3s;
}
.bar.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 30px -20px rgba(0, 0, 0, .3); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.logo-mark { width: 2.6rem; height: 2.6rem; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.brand:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
.brand-text b { display: block; font-weight: 700; font-size: 1.2rem; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
.brand-text small { display: block; font-size: .85rem; color: var(--grey); line-height: 1.3; }
.nav { position: relative; display: flex; gap: .2rem; margin-inline-start: auto; }
.nav a { position: relative; z-index: 1; padding: .55rem 1rem; border-radius: 999px; text-decoration: none; font-size: 1.05rem; color: var(--text); transition: color .2s; }
.nav a[aria-current="page"] { color: var(--red); font-weight: 500; }
.nav-pill { position: absolute; top: 0; height: 100%; right: 0; width: 0; border-radius: 999px; background: var(--soft-2); opacity: 0; will-change: transform, width; }
.bar-call { flex: none; }
.menu-btn { display: none; align-items: center; gap: .55rem; min-height: 3rem; padding: 0 1.1rem; border-radius: 999px; background: var(--soft); font-weight: 500; transition: background .2s, transform .1s ease-out; }
.menu-btn:active { transform: scale(.96); }
.menu-icon { position: relative; width: 1.15rem; height: .8rem; }
.menu-icon i { position: absolute; right: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s cubic-bezier(.2, .9, .3, 1), top .35s cubic-bezier(.2, .9, .3, 1); }
.menu-icon i:first-child { top: 0; }
.menu-icon i:last-child { top: calc(100% - 2px); }
.menu-btn[aria-expanded="true"] .menu-icon i:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon i:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Menu sheet: grows out of the button that opened it, background dims */
.scrim { position: fixed; inset: 0; z-index: 48; background: rgba(0, 0, 0, .28); opacity: 0; }
.sheet {
  position: fixed; z-index: 49; top: 4.6rem; left: var(--gutter); width: min(25rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100svh - 6rem); overflow: auto;
  padding: .75rem; border-radius: 1.6rem;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05);
  transform-origin: 1.5rem -1rem;
}
.sheet-links { display: grid; }
.sheet-links a { display: block; padding: .8rem 1rem; border-radius: 1rem; text-decoration: none; transition: background .15s; }
.sheet-links a:hover, .sheet-links a:focus-visible { background: var(--soft); }
.sheet-links b { display: block; font-weight: 500; font-size: 1.35rem; color: var(--ink); line-height: 1.25; }
.sheet-links small { display: block; font-size: .95rem; color: var(--grey); }
.sheet-links a[aria-current="page"] b { color: var(--red); }
.sheet-foot { display: grid; gap: .5rem; padding: .75rem .25rem .25rem; border-top: 1px solid var(--soft-2); margin-top: .5rem; }

/* Home hero: high-key photo low on the left, words on the reading side */
.hero {
  position: relative; overflow: hidden;
  min-height: min(48rem, calc(100svh - 4.4rem));
  display: flex; align-items: center;
  padding: 3rem var(--gutter);
  background: #E9E9E9;
}
.hero-photo {
  position: absolute; left: 0; top: 11%; bottom: 0; width: 54%;
  -webkit-mask: linear-gradient(to left, transparent 0, #000 16%), linear-gradient(to top, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to left, transparent 0, #000 16%) intersect, linear-gradient(to top, transparent 0, #000 14%);
}
/* The man is cut out of his photo and stands on the site's own grey */
.hero-img { position: absolute; inset: 0; background: url("img/hero-man.webp") left bottom / auto 100% no-repeat; will-change: transform; animation: settle 2.4s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 30% 100%; }
@keyframes settle { from { transform: scale(1.07); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
.hero-copy { position: relative; width: min(35rem, 44%); text-align: center; margin-inline-start: max(0rem, calc((100% - var(--wide)) / 2)); }
.hero-copy > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .12s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
.hero-kicker { display: inline-block; font-weight: 500; font-size: 1.05rem; color: var(--red); background: rgba(255, 255, 255, .75); padding: .35rem 1rem; border-radius: 999px; margin-bottom: 1rem; }
.hero-main { display: block; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; color: var(--ink); }
.hero-sub { font-size: 1.3rem; color: var(--grey); margin-top: 1rem; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

/* Inner page heads */
.page-hero { max-width: var(--wide); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.crumb { color: var(--red); font-weight: 500; margin-bottom: .5rem; }
.page-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.08; letter-spacing: -.035em; max-width: 50rem; }
.lead { font-size: clamp(1.3rem, 2vw, 1.55rem); color: var(--grey); margin-top: 1.1rem; max-width: 46rem; }

/* Statement */
.statement { padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter); }
.statement p { max-width: 54rem; margin: 0 auto; text-align: center; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.35; letter-spacing: -.02em; color: var(--ink); font-weight: 500; }
.statement span { color: var(--grey); }

.band { padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); }
.band-grey { background: var(--soft); }
.sec-head { max-width: var(--wide); margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.sec-head h2 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); line-height: 1.12; letter-spacing: -.03em; }
.sec-head p { color: var(--grey); margin-top: .5rem; }
.center { text-align: center; margin-top: 2rem; }
.muted { color: var(--grey); }
.wide-text { max-width: 52rem; margin: 0 auto; font-size: 1.35rem; text-align: center; }

/* Tiles that open in place */
.tiles { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.tile { background: var(--soft); border-radius: var(--r); overflow: hidden; transition: background .3s, box-shadow .3s; }
.tile:hover { background: var(--soft-2); }
.tile.is-open { background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 20px 40px -24px rgba(0, 0, 0, .3); }
.tile h3 { font-size: inherit; }
.tile button { width: 100%; min-height: 5.75rem; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; text-align: start; transition: transform .1s ease-out; }
.tile button:active { transform: scale(.985); }
.tile-icon { width: 3.25rem; height: 3.25rem; flex: none; display: grid; place-items: center; border-radius: 1rem; background: #fff; transition: background .3s, transform .45s cubic-bezier(.2, .9, .3, 1.3); }
.tile.is-open .tile-icon { background: var(--red); transform: rotate(-8deg); }
.tile-icon svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.tile.is-open .tile-icon svg { stroke: #fff; }
.tile-title { flex: 1; font-size: 1.55rem; font-weight: 500; color: var(--ink); letter-spacing: -.015em; }
.tile i, .q i { position: relative; flex: none; width: 1.25rem; height: 1.25rem; transition: transform .4s cubic-bezier(.2, .9, .3, 1); }
.tile i::before, .tile i::after, .q i::before, .q i::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--ink); }
.tile i::after, .q i::after { transform: rotate(90deg); }
.tile.is-open i, .q.is-open i { transform: rotate(45deg); }
.tile-body { height: 0; overflow: hidden; visibility: hidden; }
.tile.is-open .tile-body, .tile.is-moving .tile-body { visibility: visible; }
.tile-in { padding: 0 1.4rem 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 44%; gap: 1.25rem; align-items: start; }
.tile-in img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem; }

/* Deck */
.know { background: var(--soft); padding: clamp(4rem, 8vw, 6.5rem) var(--gutter); }
.deck-wrap { max-width: 46rem; margin: 0 auto; }
.deck { position: relative; height: 17.5rem; touch-action: pan-y; }
.dcard {
  position: absolute; inset: 0; background: #fff; border-radius: 1.75rem; padding: 2rem 2.2rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 50px -28px rgba(0, 0, 0, .35);
  will-change: transform; user-select: none; -webkit-user-select: none; cursor: grab;
}
.dcard.is-dragging { cursor: grabbing; }
.dnum { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; margin-bottom: 1rem; }
.dcard h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; margin-bottom: .6rem; }
.deck-bar { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.6rem; flex-wrap: wrap; }
.round { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); display: grid; place-items: center; transition: background .2s, color .2s, transform .1s ease-out; }
.round:hover { background: var(--ink); color: #fff; }
.round:active { transform: scale(.94); }
.round svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.deck-count { min-width: 6.5rem; text-align: center; font-weight: 500; }
.textbtn { color: var(--red); font-weight: 500; text-decoration: underline; text-underline-offset: .25em; padding: .5rem; }
.deck-wrap.is-list .deck { height: auto; display: grid; gap: .9rem; }
.deck-wrap.is-list .dcard { position: relative; inset: auto; transform: none !important; opacity: 1 !important; cursor: default; }
.deck-wrap.is-list .round, .deck-wrap.is-list .deck-count { display: none; }

/* Paths to inner pages */
.paths { padding: clamp(4rem, 8vw, 6rem) var(--gutter); }
.path-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.path {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.8rem; border-radius: var(--r);
  background: var(--soft); text-decoration: none;
  transition: background .3s, transform .45s cubic-bezier(.2, .9, .3, 1), box-shadow .3s;
}
.path:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--ink), 0 24px 40px -26px rgba(0, 0, 0, .35); }
.path:active { transform: scale(.985); }
.path svg { width: 3rem; height: 3rem; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: .5rem; }
.path h3 { font-size: 1.6rem; }
.path p { color: var(--grey); flex: 1; }
.go { color: var(--red); font-weight: 500; }
.go::after { content: " ←"; display: inline-block; transition: transform .3s cubic-bezier(.2, .9, .3, 1); }
.path:hover .go::after { transform: translateX(-.35rem); }

/* About */
.about-mini { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-photo { width: 15rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--soft); }
.about-photo img, .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); }
.about-text h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: .5rem; }
.about-text p { margin-bottom: .8rem; }

/* Roles */
.roles { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.role { background: var(--soft); border-radius: var(--r); padding: 1.6rem; transition: transform .45s cubic-bezier(.2, .9, .3, 1), background .3s; }
.role:hover { background: var(--soft-2); transform: translateY(-3px); }
.role-mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: var(--red); font-weight: 700; margin-bottom: 1rem; }
.role h3 { font-size: 1.45rem; margin-bottom: .4rem; }
.role p { font-size: 1.1rem; color: var(--text); }

/* Split */
.split { max-width: var(--wide); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split-text h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 1rem; }
.split-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.split-about .portrait { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--soft); max-width: 26rem; }
.split-about .portrait img { border-radius: 0; aspect-ratio: auto; }
.big { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.35; color: var(--ink); font-weight: 500; margin-bottom: 1rem; letter-spacing: -.015em; }
.split-text p + p { margin-top: .8rem; }
.ticks { list-style: none; padding: 0; display: grid; gap: .8rem; margin-bottom: 1rem; }
.ticks li { position: relative; padding-inline-start: 2rem; }
.ticks li::before { content: ""; position: absolute; right: 0; top: .45em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E"); }
.ticks b { color: var(--ink); font-weight: 500; }

/* About: his own words, how he works, what happens in the meeting */
.quote { max-width: 52rem; margin: 0 auto; text-align: center; }
.quote p { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.35; letter-spacing: -.02em; color: var(--ink); font-weight: 500; }
.quote p::before { content: ""; display: block; width: 3rem; height: 3px; border-radius: 3px; background: var(--red); margin: 0 auto 1.5rem; }
.quote footer { margin-top: 1rem; color: var(--grey); font-size: 1.05rem; }
.values { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.value { background: var(--soft); border-radius: var(--r); padding: 1.7rem; transition: transform .45s cubic-bezier(.2, .9, .3, 1), background .3s; }
.value:hover { background: var(--soft-2); transform: translateY(-3px); }
.value svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.value h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.value p { font-size: 1.1rem; }
.meet { max-width: 46rem; margin: 0 auto; padding: 0; list-style: none; counter-reset: meet; display: grid; gap: .75rem; }
.meet li { counter-increment: meet; position: relative; background: #fff; border-radius: 1.2rem; padding: 1.1rem 4.2rem 1.1rem 1.4rem; }
.meet li::before { content: counter(meet); position: absolute; right: 1.1rem; top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 700; font-size: 1rem; }
.meet b { color: var(--ink); font-weight: 500; }

/* Steps on alternating sides, arrows drawn on scroll */
.steps { padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem); }
.zz { position: relative; max-width: 62rem; margin: 0 auto; display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.zz-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.zz-lines path { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.zz-lines .run { stroke: var(--ink); }
.zz-lines .head { stroke: var(--red); stroke-width: 2.4; }
.zz-step { position: relative; width: min(28rem, 54%); background: #fff; border-radius: var(--r); padding: 1.6rem 1.8rem; box-shadow: 0 0 0 1.5px var(--soft-2), 0 22px 44px -30px rgba(0, 0, 0, .35); }
.zz-step:nth-of-type(even) { justify-self: end; }
.zz-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--soft); margin-bottom: .9rem; }
.zz-icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zz-step h3 { font-size: 1.65rem; margin-bottom: .35rem; }

/* Tools */
.tools-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tool { background: var(--soft); border-radius: var(--r); padding: 1.8rem 2rem; }
.tool h2 { font-size: 1.7rem; margin-bottom: .6rem; }
.tool .pill, .tool .arrow-link { margin-top: 1.1rem; }
.tool-msg { grid-row: span 2; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.tool-q { font-weight: 500; margin-bottom: .6rem; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button { min-height: 3rem; padding: 0 1.15rem; border-radius: 999px; background: var(--soft); font-size: 1.05rem; transition: background .2s, color .2s, transform .1s ease-out; }
.chips button:hover { background: var(--soft-2); }
.chips button:active { transform: scale(.96); }
.chips button[aria-checked="true"] { background: var(--ink); color: #fff; }
textarea { width: 100%; margin-top: 1rem; padding: 1rem 1.1rem; border: 0; border-radius: 1rem; background: var(--soft); font: 400 1.125rem/1.55 var(--font); color: var(--ink); resize: vertical; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tool-note { font-size: 1rem; color: var(--grey); margin-top: .8rem; }
.checks { list-style: none; padding: 0; display: grid; gap: .4rem; }
.checks label { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; min-height: 2.75rem; padding-top: .3rem; }
.checks input { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .25rem; accent-color: var(--red); }

/* FAQ */
.faq-list { max-width: 52rem; margin: 0 auto; display: grid; gap: .6rem; }
.q { background: var(--soft); border-radius: 1.2rem; transition: background .3s; }
.q.is-open { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.q button { width: 100%; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; text-align: start; font-size: 1.3rem; font-weight: 500; color: var(--ink); }
.a { height: 0; overflow: hidden; visibility: hidden; }
.q.is-open .a, .q.is-moving .a { visibility: visible; }
.a-in { padding: 0 1.4rem 1.4rem; }

/* Contact cards */
.contact-cards { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ccard { display: block; padding: 2rem; border-radius: var(--r); background: var(--soft); text-decoration: none; transition: background .3s, transform .45s cubic-bezier(.2, .9, .3, 1); }
a.ccard:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 0 0 1.5px var(--ink); }
.ccard svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.ccard h2 { font-size: 1.2rem; color: var(--grey); font-weight: 400; }
.ccard-big { font-size: 1.7rem; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }

/* Closing call band + footer */
.cta { background: var(--ink); color: #fff; padding: clamp(4rem, 8vw, 6rem) var(--gutter); }
.cta-in { max-width: var(--wide); margin: 0 auto; text-align: center; }
.cta-kicker { font-size: 1.3rem; color: rgba(255, 255, 255, .7); }
.cta-phone { display: inline-block; margin: .3rem 0 1.5rem; font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: -.03em; color: #fff; text-decoration: none; white-space: nowrap; transition: opacity .2s; }
.cta-phone:hover { opacity: .8; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.cta .pill-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.cta .pill-line:hover { background: #fff; color: var(--ink); }
.cta .pill-red { background: #fff; color: var(--ink); box-shadow: none; }
.cta .pill-red:hover { background: var(--soft-2); }
.foot { background: var(--soft); padding: 2.5rem var(--gutter) 1.5rem; }
.foot-in { max-width: var(--wide); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.foot-links a { text-decoration: none; color: var(--text); font-size: 1.05rem; }
.foot-links a:hover { color: var(--red); }
.foot-addr { margin-inline-start: auto; color: var(--grey); font-size: 1.05rem; }
.foot-addr a { color: var(--ink); text-decoration: none; }
.legal { max-width: var(--wide); margin: 1.6rem auto 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--grey); }

.dock { display: none; }

/* Reveal; without JS everything shows */
.js [data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (max-width: 1260px) {
  .nav, .bar-call { display: none; }
  .menu-btn { display: inline-flex; margin-inline-start: auto; }
  .roles, .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body { padding-bottom: 5.5rem; font-size: 1.1875rem; }
  .bar { padding-block: .55rem; }
  .brand-text small { display: none; }
  .sheet { top: 4rem; left: .75rem; right: .75rem; width: auto; }
  .hero { min-height: 0; flex-direction: column; align-items: stretch; padding: 2.5rem var(--gutter) 0; }
  .hero { padding-top: 0; padding-bottom: 2.5rem; }
  /* Phone: the man centred and larger, the topic tag resting just over his chest */
  /* The man's lower half fades into the grey, so the words can start just under his chin */
  .hero-photo { position: relative; order: -1; left: auto; top: auto; bottom: auto; width: auto; height: 81.6vw; margin: .25rem calc(var(--gutter) * -1) 0; -webkit-mask: linear-gradient(to top, transparent 0, #000 20%); mask: linear-gradient(to top, transparent 0, #000 20%); }
  .hero-img { background-size: auto 100%; background-position: 50% bottom; transform-origin: 50% 100%; }
  .hero-copy { width: 100%; margin-top: -2.6rem; z-index: 1; } /* the whole man shows; the tag just overlaps his chest */
  .hero-main { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .hero-actions .pill { flex: 1 1 100%; }
  .tiles, .tools-grid, .path-grid, .contact-cards, .split, .roles, .values { grid-template-columns: 1fr; }
  .tile-in { grid-template-columns: 1fr; }
  .tile-in img { aspect-ratio: 16 / 9; order: -1; }
  .tool-msg { grid-row: auto; }
  .deck { height: 19.5rem; }
  .dcard { padding: 1.6rem 1.5rem; }
  .zz-step { width: 88%; }
  .about-mini { grid-template-columns: 1fr; text-align: center; }
  .about-photo { width: 11rem; margin: 0 auto; }
  .foot-addr { margin-inline-start: 0; }
  .dock {
    position: fixed; right: .75rem; left: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .5rem; border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06);
  }
  .dock .pill { min-height: 3.4rem; }
  .dock { opacity: 0; transform: translateY(calc(100% + 1.5rem)); pointer-events: none; transition: opacity .25s, transform .5s cubic-bezier(.2, .9, .3, 1); }
  .show-dock .dock { opacity: 1; transform: none; pointer-events: auto; }
  .menu-open .dock { opacity: 0; transform: translateY(calc(100% + 1.5rem)); pointer-events: none; }
}

@media print {
  body * { visibility: hidden; }
  #checklist, #checklist * { visibility: visible; }
  #checklist { position: absolute; inset: 0 0 auto; background: none; }
  #checklist .pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { transform: none; transition: opacity .2s; }
  .hero-img, .hero-copy > * { animation: none; }
  .tile i, .q i, .tile-icon, .path, .role { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bar, .sheet, .dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== articles, city pages, hubs (SEO round 2026-11-11) ===== */
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.meta { color: var(--grey); font-size: 1rem; margin-top: 1rem; }
.prose { max-width: 46rem; margin: 0 auto; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1.18; letter-spacing: -.025em; margin-top: 2.8rem; }
.prose h3 { font-size: 1.4rem; line-height: 1.3; margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--red); text-underline-offset: .18em; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; display: grid; gap: .45rem; }
.prose li::marker { color: var(--red); }
.prose b, .prose strong { color: var(--ink); font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1.05rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: start; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.prose thead th { color: var(--ink); font-weight: 600; background: var(--soft); }
.prose .note { background: var(--soft); border-radius: var(--r); padding: 1.3rem 1.5rem; border-inline-start: 4px solid var(--red); }
.cards { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem 1.7rem; border-radius: var(--r); background: var(--white); box-shadow: 0 0 0 1px var(--soft-2); text-decoration: none; color: var(--text); transition: transform .35s cubic-bezier(.2, .9, .3, 1), box-shadow .35s; }
.band-grey .card { box-shadow: none; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .25); }
.card h3 { font-size: 1.4rem; line-height: 1.25; }
.card p { color: var(--grey); font-size: 1.08rem; }
.card .go-on { margin-top: auto; padding-top: .4rem; color: var(--red); font-weight: 500; }
.related { max-width: 46rem; margin: 0 auto; }
.related h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.related .cards { grid-template-columns: 1fr; }
.foot-areas { max-width: var(--wide); margin: 1.2rem auto 0; color: var(--grey); font-size: .98rem; }
.foot-areas a { color: var(--grey); text-decoration: none; }
.foot-areas a:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }