/* Isaac Construction — site styles */

/* ---------- Tokens ---------- */
:root {
  --night: #1d1b18;        /* deep ink, dark surfaces */
  --night-2: #2a2723;      /* raised dark surface */
  --rust: #b4532a;         /* Isaac brand rust */
  --rust-ink: #9a4422;     /* rust, AA on light */
  --rust-hover: #8e3e1d;
  --peach: #f0b08d;        /* labels and accents on dark */
  --peach-2: #f6cdb4;
  --rust-soft: #f3dfd2;
  --sheet: #f7f3ec;        /* warm paper light */
  --sheet-2: #efe8dc;
  --white: #ffffff;
  --ink: #1a1714;
  --ink-2: #57514a;
  --rule: #e3dacc;
  --rule-dark: rgba(255,255,255,.14);
  --shade: 20,17,14;       /* rgb of the photo overlays */

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --wrap: 1320px;
  --gutter: clamp(16px, 3.5vw, 48px);
  --space: clamp(72px, 7vw, 100px);
  --r-sm: 10px;
  --r-lg: 22px;
  --r-card: 26px 72px 26px 26px;
  --ease: cubic-bezier(.2,.7,.1,1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-tap-highlight-color: transparent; background: var(--white); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6vw, 48px); }
h3 { font-size: 22px; letter-spacing: -.02em; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
svg.arr, .illo, .why-art, .legal-art, .mark { fill: none; }
.illo, .why-art { height: auto; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }

/* ---------- Type ---------- */
.label, .eyebrow {
  font: 700 13px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink);
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
}
.label::before, .eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border: 1.8px solid currentColor; transform: rotate(45deg); }
.eyebrow { margin-bottom: 18px; }
.on-dark .label, .section-dark .label, .eyebrow-light, .section-dark .eyebrow, .note-card .eyebrow { color: var(--peach); }
.h2 { font: 700 52px/.95 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.h2 em, .hero h1 em, .cta h2 em, .page-hero h1 em { font-style: normal; color: var(--rust-ink); }
.on-dark .h2 em, .hero h1 em, .cta h2 em, .page-hero h1 em { color: var(--peach); }
.lede, .lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.on-dark .lede { color: rgba(255,255,255,.72); }
.small-note { font-size: 13px; color: var(--ink-2); margin-top: 16px; }
.meta { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.meta svg { width: 13px; height: 13px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font: 600 14px/1.2 var(--body); white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.btn:hover svg.arr { transform: translateX(3px); }
.btn-primary { background: var(--rust); color: #fff; }
.btn-primary:hover { background: var(--rust-hover); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { background: var(--peach); }
.btn-line, .btn-outline { border-color: rgba(26,23,20,.25); color: var(--ink); background: transparent; }
.btn-line:hover, .btn-outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-line-light, .btn-ghost-light { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.04); }
.btn-line-light:hover, .btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-ghost { background: var(--sheet-2); color: var(--ink); }
.btn-ghost:hover { background: var(--rule); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn-block { width: 100%; }
.link-arrow, .link-u, .card-link {
  display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--body); color: var(--rust-ink);
  padding-bottom: 5px; border-bottom: 1.5px solid currentColor; transition: color .2s;
}
.link-arrow svg, .link-u svg, .card-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link-arrow:hover, .link-u:hover, .card-link:hover { color: var(--ink); }
a:hover .link-arrow svg, .link-arrow:hover svg, .link-u:hover svg, .card-link:hover svg { transform: translateX(3px); }
.link-arrow.light, .on-dark .link-u, .section-dark .link-arrow { color: var(--peach); }
.link-arrow.light:hover, .section-dark .link-arrow:hover { color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* Tags and stars */
.tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font: 600 12.5px/1 var(--body); background: rgba(255,255,255,.94); color: var(--ink); }
.tag-quiet { background: var(--sheet-2); }
.tag-light { background: rgba(255,255,255,.16); color: #fff; }
.stars { display: inline-flex; gap: 3px; color: #e9a23b; }
.stars svg { width: 18px; height: 18px; }

/* Dimension line — the drafting device used for real measurements */
.dim { position: relative; display: flex; align-items: center; justify-content: center; height: 18px; color: #7c7468; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; opacity: .55; }
.dim i { position: absolute; top: 2px; bottom: 2px; width: 1px; background: currentColor; opacity: .55; }
.dim i:first-child { left: 0; } .dim i:last-child { right: 0; }
.dim span { position: relative; background: var(--dim-bg, var(--white)); padding: 0 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: #3a342d; }
.specs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font: 500 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3a342d; }
.specs span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--rust); vertical-align: 2px; }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--night); color: rgba(255,255,255,.78); font-size: 13.5px; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 9px; padding-bottom: 9px; }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: .45em; }
.topbar svg { color: var(--peach); }
.topbar a:hover { color: #fff; }
.topbar-links { display: flex; gap: 22px; }
.site-header { position: sticky; top: 0; z-index: 50; background: #ffffff; -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; gap: 24px; height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.logo-mark { width: 38px; height: 38px; color: var(--rust); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text strong { font: 800 24px/1 var(--display); letter-spacing: -.03em; }
.logo-text span { font: 700 10.5px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; margin-top: 5px; color: var(--ink-2); }
.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.main-nav li { position: relative; }
.main-nav > ul > li > a { display: flex; align-items: center; gap: 5px; padding: 10px 13px; font: 600 15px/1 var(--body); border-radius: 999px; transition: background .2s, color .2s; }
.main-nav > ul > li > a:hover, .has-menu:focus-within > a { background: var(--sheet); color: var(--rust-ink); }
.main-nav > ul > li > a[aria-current] { color: var(--rust-ink); }
.chev { width: 10px; height: 10px; fill: none; opacity: .8; transition: transform .25s var(--ease); }
.has-menu:hover .chev, .has-menu:focus-within .chev { transform: rotate(180deg); }
.main-nav li.has-menu { position: static; }
.menu { position: absolute; left: 0; right: 0; top: calc(100% + 1px); padding-top: 0; color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; pointer-events: none; }
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mega-box { width: min(100%, max(80%, 940px)); margin: 0 auto; background: var(--white); border: 1px solid #ddd2c3; border-top: 0; border-radius: 0 0 22px 22px; box-shadow: 0 34px 60px -30px rgba(var(--shade),.45), 0 10px 20px -14px rgba(var(--shade),.2); overflow: hidden; }
.mega { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 230px; gap: 20px; padding: 22px 22px 18px 26px; align-items: start; }
.mega-k { font: 700 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-ink); }
.mega-col { padding-top: 4px; }
.mega-col ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mega-col a { display: block; margin: 0 -10px; padding: 8px 10px; border-radius: 10px; transition: background .2s; }
.mega-col a span { font: 700 14.5px/1.3 var(--body); color: var(--ink); transition: color .2s; }
.mega-col a small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.mega-col a:hover { background: var(--sheet); }
.mega-col a:hover span { color: var(--rust-ink); }
.mega-card { display: flex; flex-direction: column; padding: 10px 10px 16px; border-radius: 16px; background: var(--sheet); transition: box-shadow .3s var(--ease), background .25s; }
.mega-card:hover { background: var(--sheet-2); box-shadow: 0 18px 34px -26px rgba(var(--shade),.55); }
.mega-img { display: block; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 10px; overflow: hidden; background: var(--night); }
.mega-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mega-card:hover .mega-img img { transform: scale(1.05); }
.mega-card .mega-k { padding: 0 6px; font-size: 11px; }
.mega-card b { display: block; margin-top: 7px; padding: 0 6px; font: 800 16.5px/1.25 var(--display); letter-spacing: -.015em; color: var(--ink); }
.mega-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 0 6px; font: 700 13.5px/1 var(--body); color: var(--rust-ink); }
.out { width: 12px; height: 12px; flex: none; transition: transform .25s var(--ease); }
.mega-card:hover .out, .mega-foot a:hover .out { transform: translate(2px, -2px); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 26px; background: var(--sheet); border-top: 1px solid #e6ddd0; font-size: 13.5px; color: var(--ink-2); }
.mega-foot > a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--rust-ink); }
.mega-foot p a { font-weight: 700; color: var(--rust-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1280px) { .mega { gap: 16px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) 210px; } }
.header-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.header-phone { display: inline-flex; align-items: center; gap: 7px; font: 700 15px/1 var(--body); white-space: nowrap; }
.header-phone svg { color: var(--rust); }
.header-phone:hover { color: var(--rust-ink); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: var(--sheet-2); border-radius: 12px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--ink); transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { border-top: 1px solid var(--rule); padding: 12px var(--gutter) 24px; max-height: calc(100vh - 70px); overflow-y: auto; background: var(--white); }
.mobile-nav > ul { list-style: none; margin: 0 0 16px; padding: 0; }
.mobile-nav summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; border-bottom: 1px solid var(--rule); cursor: pointer; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font: 400 24px/1 var(--body); color: var(--rust); }
.mobile-nav details[open] summary::after { content: "–"; }
.mobile-nav summary { transition: color .2s; }
.mobile-nav details[open] summary { color: var(--rust-ink); border-bottom-color: transparent; }
.m-panel { padding: 4px 0 18px; border-bottom: 1px solid var(--rule); }
.m-groups { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 22px; padding: 6px 0 16px; }
.m-group ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.m-group a { display: block; margin: 0 -10px; padding: 8px 10px; border-radius: 10px; }
.m-group a span { font: 700 15px/1.3 var(--body); color: var(--ink); }
.m-group a small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.m-group a:hover, .m-group a:active { background: var(--sheet); }
.m-group a:hover span { color: var(--rust-ink); }
.m-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: var(--sheet); }
.m-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.m-card .mega-k { font-size: 11px; }
.m-card b { display: block; margin-top: 6px; font: 800 16px/1.25 var(--display); letter-spacing: -.015em; color: var(--ink); }
.m-card .mega-cta { margin-top: 8px; padding: 0; }
.m-all { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font: 700 14px/1 var(--body); color: var(--rust-ink); }
@media (max-width: 680px) {
  .m-groups { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 12px; }
  .m-card { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .m-card b { font-size: 15px; }
}
.mobile-nav .btn { margin-top: 10px; }

/* ---------- Home hero ---------- */
.hero { position: relative; min-height: calc(100svh - 50px); color: #fff; background: var(--night); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img, .hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--shade),.25) 0%, rgba(var(--shade),0) 30%), linear-gradient(0deg, rgba(var(--shade),.94) 0%, rgba(var(--shade),.45) 50%, rgba(var(--shade),.08) 75%);
}
.hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 72px; padding-bottom: 110px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: end; }
.hero .label { color: var(--peach-2); margin-bottom: 26px; padding: 9px 14px; border-radius: 999px; background: rgba(var(--shade),.55); border: 1px solid rgba(240,176,141,.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-grid > div:first-child { container-type: inline-size; padding-bottom: 78px; }
/* Three fixed lines: the size follows the text column so the longest line always fits */
.hero h1 { font: 800 min(clamp(40px, 5.5vw, 78px), 12cqi)/.92 var(--display); letter-spacing: 0; font-variation-settings: "opsz" 96; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .07em; }
.hero h1 .line > span { display: inline-block; white-space: nowrap; }
.hero-sub { margin-top: 24px; }
.hero-sub p { max-width: 560px; font-size: 17px; color: rgba(255,255,255,.84); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* Project finder — the hero's working tool */
.finder { border-radius: var(--r-lg); padding: 20px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.finder-head { display: flex; justify-content: space-between; align-items: center; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach-2); }
.finder h2 { font: 700 21px/1.15 var(--display); letter-spacing: -.02em; margin: 14px 0 16px; }
.finder h2 em { font-style: normal; color: var(--peach); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: rgba(0,0,0,.28); }
.seg button { height: 36px; border: 0; border-radius: 14px; background: transparent; color: rgba(255,255,255,.82); font: 600 13px/1 var(--body); cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { color: #fff; background: rgba(255,255,255,.08); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.finder-out { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }
.finder-out b { display: block; font: 700 22px/1.05 var(--display); letter-spacing: -.03em; }
.finder-out small { display: block; font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 6px; }


/* ---------- Outside / inside compare ---------- */
.p2h { background: var(--white); padding: var(--space) 0; }
.p2h-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.compare { --pos: 50%; position: relative; aspect-ratio: 5 / 4.2; border-radius: 26px 80px 26px 26px; overflow: hidden; background: var(--sheet-2); box-shadow: 0 40px 80px -50px rgba(var(--shade),.6); user-select: none; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare .drawing-layer { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.c-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); pointer-events: none; }
.c-knob { position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--rust); color: #fff; display: grid; place-items: center; pointer-events: none; box-shadow: 0 0 0 6px rgba(255,255,255,.55), 0 12px 24px -8px rgba(0,0,0,.45); }
.c-knob svg { width: 24px; height: 24px; fill: none; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare:has(input:focus-visible) .c-knob { outline: 2px solid #fff; outline-offset: 4px; }
.c-tag { position: absolute; top: 18px; z-index: 2; height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.c-tag.l { left: 18px; background: var(--ink); color: #fff; }
.c-tag.r { right: 18px; background: var(--rust); color: #fff; }
.c-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; height: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(var(--shade),.78); color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.compare.touched .c-hint { opacity: 0; }
.compare-cap { display: flex; align-items: center; gap: 16px; margin-top: 18px; --dim-bg: var(--white); }
.compare-cap b { font: 700 17px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.compare-cap .dim { flex: 1; }
.compare-cap .dim span { padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); }
.compare-cap a { font: 700 15px/1 var(--body); color: var(--rust-ink); white-space: nowrap; border-bottom: 1.5px solid currentColor; padding-bottom: 5px; }
.compare-cap a:hover { color: var(--ink); }
.p2h-copy .h2, .yours-copy .h2, .process-intro .h2, .why-head .h2, .plans-head .h2, .builds-head .h2, .faq-grid .h2, .voices .h2 { margin-top: 20px; }
.p2h-copy .h2 .accent, .process-intro .h2 .accent { display: block; color: var(--rust-ink); }
.p2h-copy .lede, .plans-head .lede, .yours-copy .lede, .process-intro .lede, .faq-grid .lede, .why-head .lede { margin-top: 16px; }
.process-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Cards with line-art (stats and pillars) ---------- */
.stats-band { position: relative; z-index: 2; background: var(--sheet-2); padding: clamp(28px, 3vw, 40px) 0; }
/* Home stats: a dark spec-sheet band that continues the hero, with the rust line on top */
.stats-band.lift { background: var(--white); color: var(--ink); padding: 0; isolation: isolate; overflow: hidden; }
.stats-band.lift::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; background: linear-gradient(90deg, var(--rust), var(--peach) 60%, transparent); }
.stats-band.lift::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(154,68,34,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(154,68,34,.05) 1px, transparent 1px); background-size: 32px 32px; }
.stats-band.lift .tblock { border: 0; border-radius: 0; box-shadow: none; overflow: visible; background: transparent; }
.stats-band.lift .tblock::before { display: none; }
.stats-band.lift .stat { overflow: hidden; isolation: isolate; flex-direction: column; gap: 0; padding: 30px 26px 28px; background: transparent; transition: background .45s var(--ease); }
.stats-band.lift .stat:first-child { padding-left: 0; }
.stats-band.lift .stat + .stat::before { top: 26px; bottom: 26px; border-left: 1px dashed var(--rule); }
.stats-band.lift .stat:hover { background: transparent; }
.stats-band.lift .stat .illo { z-index: -1; top: 22px; right: 18px; bottom: auto; width: 46%; max-width: 132px; color: rgba(154,68,34,.16); transition: color .45s, transform .9s var(--ease); }
.stats-band.lift .stat:hover .illo { transform: none; }
.stats-band.lift .stat-ico { display: none; }
.stats-band.lift .stat-k { margin-top: 12px; font-size: 15px; color: var(--rust-ink); }
.stats-band.lift .stat-n { margin-top: 6px; font-size: 52px; letter-spacing: -.06em; background: linear-gradient(180deg, var(--ink) 45%, var(--rust)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-band.lift .stat-n sup { color: var(--rust); -webkit-text-fill-color: var(--rust); }
.stats-band.lift .stat p { margin-top: 8px; font-size: 14px; color: var(--ink-2); max-width: 27ch; }
.stats-band.lift + .p2h { padding-top: clamp(40px, 4.5vw, 64px); }
.tblock {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden;
  background: var(--white); border: 1px solid var(--rule); border-radius: 22px 64px 22px 22px;
  box-shadow: 0 40px 70px -40px rgba(var(--shade),.55), 0 12px 24px -16px rgba(var(--shade),.25);
}
.tblock::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--rust), var(--peach) 60%, transparent); }
.stat { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 26px 24px 24px; transition: background .35s var(--ease); }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; border-left: 1px dashed var(--rule); }
.stat:hover { background: var(--sheet); }
.stat-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--rust-soft); color: var(--rust-ink); transition: background .35s var(--ease), color .35s var(--ease), transform .45s var(--ease); }
.stat-ico svg { width: 20px; height: 20px; }
.stat-ico svg[stroke] { fill: none; }
.stat:hover .stat-ico { background: var(--rust); color: #fff; transform: rotate(-8deg) scale(1.05); }
.stat-k { display: block; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.stat-n { display: block; margin-top: 10px; font: 800 clamp(34px, 3vw, 46px)/.9 var(--display); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-n sup { font-size: .42em; margin-left: 3px; vertical-align: 1em; color: var(--rust); }
.stat p { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 26ch; }
.pcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 400px; padding: 26px; border-radius: var(--r-card); color: #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
a.pcard:hover { transform: translateY(-4px); }
.illo { position: absolute; z-index: -1; pointer-events: none; right: 16px; bottom: 68px; width: 44%; max-width: 140px; color: var(--illo); transition: transform 1.2s var(--ease); }
.pcard:hover .illo { transform: translateY(-6px) scale(1.04); }
.illo * { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rv .illo * { stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .25s; }
  .rv.in .illo * { stroke-dashoffset: 0; }
}
.pcard .k { font: 700 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pcard .k b { display: inline-block; padding: 5px 9px; margin-right: 2px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 700; }
.pcard h3 { font: 800 clamp(24px, 2vw, 30px)/.98 var(--display); letter-spacing: -.035em; margin-top: 14px; }
.pcard p { margin-top: 14px; font-size: 15px; line-height: 1.55; max-width: 30ch; opacity: .92; }
.pcard-foot { margin-top: auto; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 14.5px/1 var(--display); }
.circ { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--rust-ink); display: grid; place-items: center; flex-shrink: 0; transition: transform .35s var(--ease), background .3s; }
.circ svg { width: 17px; height: 17px; }
.pcard:hover .circ { transform: rotate(-45deg); }
.c-green { background: var(--rust); --illo: rgba(255,255,255,.55); }
.c-mint { background: var(--rust-soft); color: var(--night); --illo: rgba(154,68,34,.45); }
.pcard.c-mint h3 { color: var(--rust-ink); }
.c-mint .k b, .c-paper .k b { background: rgba(26,23,20,.08); }
.c-pine { background: var(--night); --illo: rgba(240,176,141,.45); }
.c-pine .k, .pcard.c-pine h3 { color: var(--peach); }
.section-dark .c-pine, .why .c-pine { background: var(--night-2); border: 1px solid var(--rule-dark); }
.c-paper { background: #fff; color: var(--ink); border: 1px solid var(--rule); --illo: rgba(154,68,34,.4); }
.pcard.c-paper h3 { color: var(--night); }
.c-paper .circ, .c-mint .circ { background: var(--night); color: #fff; }
.c-deep { background: var(--rust-ink); --illo: rgba(255,255,255,.45); }
.pcard.c-deep h3 { color: var(--peach-2); }
/* Photo backgrounds: the card colour stays solid behind the text and fades to reveal the photo */
.pcard-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pcard.has-bg::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .5s var(--ease);
  background: linear-gradient(180deg, rgba(var(--tint),.97) 0%, rgba(var(--tint),.9) 38%, rgba(var(--tint),.45) 72%, rgba(var(--tint),.72) 100%); }
.pcard.has-bg:hover .pcard-bg { transform: scale(1.06); }
.pcard.has-bg:hover::after { opacity: .92; }
.pcard.has-bg .illo { display: none; }
.pcard.has-bg .pcard-foot { text-shadow: 0 1px 10px rgba(var(--tint),.9); }
.c-green { --tint: 180,83,42; } .c-mint { --tint: 243,223,210; } .c-pine { --tint: 29,27,24; } .c-paper { --tint: 255,255,255; } .c-deep { --tint: 154,68,34; }
.pcard-wide.has-bg::after { background: linear-gradient(90deg, rgba(var(--tint),.97) 0%, rgba(var(--tint),.9) 45%, rgba(var(--tint),.35) 100%); }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcard-wide { grid-column: 1 / -1; min-height: 260px; }
.pcard-wide .illo { bottom: 22px; right: 96px; width: 260px; max-width: 34%; }

/* ---------- Featured projects rail ---------- */
.plans { padding: var(--space) 0; }
.plans-head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.plans-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.pills, .filters { display: flex; gap: 8px; flex-wrap: wrap; }
.pill, .chip { height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font: 600 15px/1 var(--body); color: var(--ink); cursor: pointer; transition: all .2s; }
.pill:hover, .chip:hover { border-color: var(--ink); }
.pill[aria-pressed="true"], .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip span { margin-left: 6px; opacity: .6; font-weight: 500; }
.filters { margin-bottom: 36px; }
.arrows { display: flex; gap: 8px; }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.arrow svg { width: 18px; height: 18px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 30vw, 400px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  padding: 48px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 8px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card-media { position: relative; aspect-ratio: 4 / 4.4; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; background: var(--sheet-2); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform .9s var(--ease); }
.card-media .plan { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.04); transition: opacity .55s var(--ease), transform .9s var(--ease); }
.card-media img.plan { object-fit: contain; padding: 28px; mix-blend-mode: multiply; }
.card-media:has(.plan) { background-color: var(--sheet); background-image: linear-gradient(rgba(154,68,34,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(154,68,34,.06) 1px, transparent 1px); background-size: 24px 24px; }
.card.show-plan .photo, .card-media:hover .photo { opacity: 0; transform: scale(1.06); }
.card.show-plan .plan, .card-media:hover .plan { opacity: 1; transform: none; }
.plan-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; font: 500 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); }
.plan-soon .illo { position: static; width: 56%; max-width: 220px; transform: none; --illo: rgba(154,68,34,.55); color: var(--illo); }
.plan-soon .illo * { stroke-dashoffset: 0 !important; }
.card-tags { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 8px; z-index: 2; }
.card-tags .flip { border: 0; cursor: pointer; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: #fff; }
.card-body { padding: 18px 4px 0; }
.card h3 { font: 700 24px/1 var(--display); letter-spacing: -.035em; }
.card h3 a:hover { color: var(--rust-ink); }
.card .specs { margin-top: 12px; }
.card .dim { margin-top: 18px; }
.card-link { margin-top: 18px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
.plans-tools-page { align-items: flex-start; margin-bottom: 36px; }
.card-soon .card-media { background-color: var(--sheet); background-image: linear-gradient(rgba(154,68,34,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(154,68,34,.07) 1px, transparent 1px); background-size: 24px 24px; }
.card-soon .illo { position: absolute; inset: auto; left: 50%; top: 50%; right: auto; bottom: auto; width: 62%; max-width: 240px; transform: translate(-50%, -45%); z-index: 0; --illo: rgba(154,68,34,.5); color: var(--illo); }
.card-soon .illo * { stroke-dashoffset: 0 !important; }
.card-soon .tag { background: var(--rust); color: #fff; }
.card-soon h3 { color: var(--ink-2); }
.card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rail-end { scroll-snap-align: start; border-radius: var(--r-lg); background: var(--night); color: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 4.4; }
.rail-end b { font: 800 70px/.9 var(--display); letter-spacing: -.05em; color: var(--peach); }
.rail-end p { font: 700 22px/1.1 var(--display); letter-spacing: -.02em; margin-top: 10px; }
.rail-end .btn { align-self: flex-start; }
.plans-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }
.plans-foot p { font-size: 13px; color: var(--ink-2); max-width: 70ch; }
.mir { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.mir .dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px var(--rust-soft); }
.mir a { font-weight: 600; color: var(--rust-ink); border-bottom: 1px solid currentColor; }

/* ---------- Why (3 doors) ---------- */
.why { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; padding: var(--space) 0; }
.why-art { position: absolute; top: 0; left: 50%; width: clamp(1400px, 100%, 1700px); height: auto; transform: translateX(-50%); z-index: -1; pointer-events: none; color: var(--peach); opacity: .06; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 85%); }
.why-art text { fill: currentColor; stroke: none; font: 500 14px var(--mono); }
.why-head { max-width: 780px; margin: 0 auto; text-align: center; }
.why-head .label { justify-content: center; }
.why-head .h2 .accent { display: block; color: var(--peach); }
.why-head .lede { margin-left: auto; margin-right: auto; max-width: 58ch; }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(48px, 6vw, 72px); }
.door { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 4.6; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; color: #fff; border-radius: var(--r-card); background: var(--night-2); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.door img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--shade),.94) 0%, rgba(var(--shade),.45) 42%, rgba(var(--shade),.05) 70%); }
.door.d-green::after { background: linear-gradient(0deg, rgba(154,68,34,.96) 0%, rgba(154,68,34,.55) 42%, rgba(154,68,34,0) 72%); }
.door:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
.door:hover img { transform: scale(1.06); }
.door-tag { position: absolute; top: 20px; left: 20px; height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(255,255,255,.94); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.door h3 { font: 800 clamp(24px, 2.1vw, 32px)/.95 var(--display); letter-spacing: -.04em; }
.door p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.84); max-width: 30ch; }
.door-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.door .circ { color: var(--ink); width: 48px; height: 48px; }
.door:hover .circ { transform: rotate(-45deg); background: var(--peach); }
.svc-doors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svc-doors .door { grid-column: span 2; aspect-ratio: 4 / 4.4; }
.svc-doors .door:nth-child(-n+2) { grid-column: span 3; aspect-ratio: 16 / 11; }
.svc-doors .door-tag { max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-all { margin-top: 32px; text-align: center; }
.creds-strip { margin-top: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cred { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--night-2); border: 1px solid var(--rule-dark); font: 600 14px/1.3 var(--body); color: #fff; }
.cred .ficon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; background: rgba(240,176,141,.12); color: var(--peach); display: grid; place-items: center; }
.cred .ficon svg { width: 18px; height: 18px; }
.cred small { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 3px; }
a.cred:hover { color: var(--peach); }

/* ---------- Make it yours (kitchen hotspots + selection list) ---------- */
.yours { padding: var(--space) 0; background: var(--white); }
.yours-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.yours-copy { order: -1; }
.kitchen-frame { position: relative; aspect-ratio: 1.1 / 1; border-radius: 26px 80px 26px 26px; overflow: hidden; background: var(--sheet); box-shadow: 0 40px 80px -50px rgba(var(--shade),.6); }
.kitchen-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.kitchen-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), transparent 0 14%, rgba(var(--shade),.4) 46%); opacity: 0; transition: opacity .5s var(--ease); }
.kitchen-frame.focus::after { opacity: 1; }
.kitchen-tag { position: absolute; left: 16px; top: 16px; z-index: 3; height: 30px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; background: rgba(255,255,255,.94); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 38px; min-width: 38px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: #fff; color: var(--ink); font: 700 14px/1 var(--display); box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); transition: background .3s, color .3s, padding .4s var(--ease); }
.pin::before { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 2px solid rgba(255,255,255,.75); animation: ping 2.4s var(--ease) infinite; pointer-events: none; }
.pin .n { width: 38px; text-align: center; flex-shrink: 0; }
.pin .t { max-width: 0; overflow: hidden; white-space: nowrap; font: 600 13px/1 var(--body); transition: max-width .45s var(--ease); }
.pin.on { background: var(--rust); color: #fff; padding-right: 16px; }
.pin.on::before { border-color: rgba(180,83,42,.7); }
.pin.on .t, .pin:hover .t { max-width: 180px; }
.pin:hover { padding-right: 16px; }
@keyframes ping { 0% { transform: scale(.85); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.kitchen-note { margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.sel { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.sel li { border-bottom: 1px solid var(--rule); }
.sel button { width: 100%; display: block; padding: 18px 2px; text-align: left; cursor: pointer; background: none; border: 0; color: var(--ink); }
.sel-row { display: flex; align-items: center; gap: 14px; }
.sel-t { flex: 1; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; transition: color .3s; }
.sel button:hover .sel-t, .sel button.on .sel-t { color: var(--rust-ink); }
.sel .num { font: 700 13px/1 var(--mono); letter-spacing: .06em; }
.sel button.on .num { color: var(--rust-ink); }
.sel .chev { width: 9px; height: 9px; margin: 0 4px 4px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--ease), margin .35s var(--ease); }
.sel button.on .chev { transform: rotate(-135deg); margin-bottom: -4px; }
.sel .d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.sel .d > span { overflow: hidden; }
.sel button.on .d { grid-template-rows: 1fr; }
.sel .d-in { position: relative; display: flex; align-items: center; gap: 14px; margin: 16px 0 2px 2px; padding: 6px 0 6px 18px; border-left: 2px solid var(--rule); }
.sel .d-in::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--rust); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease) .1s; }
.sel button.on .d-in::before { transform: scaleY(1); }
.sel .sw { flex: none; width: 40px; height: 40px; border-radius: 10px; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sel .d-txt { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.sw-layout { background: #fbfaf7; background-image: linear-gradient(rgba(154,68,34,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(154,68,34,.18) 1px, transparent 1px); background-size: 8px 8px; }
.sw-layout::after { content: ""; position: absolute; inset: 9px; border: 2px solid var(--night); border-right-width: 0; }
.sw-cab { background: #f3f1ec; }
.sw-cab::before, .sw-cab::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 12px; border: 2px solid #d9d4ca; box-shadow: inset 0 0 0 3px #f3f1ec, inset 0 0 0 4px #ddd8ce; border-radius: 2px; }
.sw-cab::before { left: 6px; } .sw-cab::after { right: 6px; }
.sw-counter { background: repeating-linear-gradient(90deg, #d9b98f 0 6px, #c9a273 6px 7px, #e2c49b 7px 13px, #c9a273 13px 14px); }
.sw-floor { background: repeating-linear-gradient(90deg, #d8c4a6 0 12px, #bfa98a 12px 13px, #e2d0b4 13px 25px, #bfa98a 25px 26px); }
.sw-floor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(120,86,50,.35) 21px 22px); }
.sw-fix { background: linear-gradient(135deg, #3a3631 0%, #6b645a 38%, #2a2723 55%, #8a8277 100%); }

/* ---------- Process ---------- */
.process { background: var(--sheet-2); padding: var(--space) 0; position: relative; }
.process-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.process-intro { position: sticky; top: 96px; }
@media (max-height: 880px) { .process-intro { position: relative; top: 0; } }

/* ---------- Builds bento ---------- */
.builds { padding: var(--space) 0; background: var(--white); }
.builds-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.rb-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, clamp(200px, calc((100svh - 300px) / 2), 320px)); gap: 14px; margin: 0 calc(50% - 50vw); padding: 0 14px; }
.builds .builds-head { margin-bottom: 32px; }
.rb-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; border-radius: var(--r-lg); color: #fff; background: var(--sheet-2); }
.rb-main { grid-row: span 2; border-radius: 26px 80px 26px 26px; }
.rb-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.rb-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--shade),.9) 0%, rgba(var(--shade),.45) 38%, transparent 65%); }
.rb-card:hover img { transform: scale(1.05); }
.rb-cap { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 18px; }
.rb-main .rb-cap { padding: clamp(22px, 2.6vw, 32px); }
.rb-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(var(--shade),.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach-2); }
.rb-cap b { display: block; margin-top: 10px; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.rb-main .rb-cap b { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.04em; }
.rb-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.rb-facts span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 10px; border-radius: 50%; background: var(--peach); vertical-align: 2px; }
.rb-cap p { margin-top: 12px; max-width: 46ch; font-size: 15px; color: rgba(255,255,255,.82); }
@media (max-height: 820px) { .rb-cap p { display: none; } }
.rb-cap .circ { flex: none; color: var(--ink); }
.rb-card:hover .circ { transform: rotate(-45deg); background: var(--peach); }

/* ---------- Reviews deck ---------- */
.voices { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: var(--space) 0; background: var(--night); }
.voices-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.04); }
.voices::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--shade),.95) 0%, rgba(var(--shade),.84) 42%, rgba(var(--shade),.5) 75%, rgba(var(--shade),.65) 100%), linear-gradient(0deg, rgba(var(--shade),.6), transparent 40%); }
.voices-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.score { display: flex; align-items: flex-end; gap: 22px; margin-top: 26px; }
.score-num { font: 800 clamp(96px, 12vw, 176px)/.78 var(--display); letter-spacing: -.07em; }
.score-meta { padding-bottom: 10px; }
.score-meta .stars svg { width: 22px; height: 22px; }
.score-meta p { margin-top: 10px; font-size: 14.5px; color: rgba(255,255,255,.76); line-height: 1.45; }
.score-meta p b { color: #fff; font-weight: 600; }
.voices .h2 em { color: var(--peach); }
.voices-actions { display: flex; align-items: center; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.deck-wrap { position: relative; }
.deck { display: grid; padding: 18px 26px 40px 10px; perspective: 1400px; touch-action: pan-y; }
.rcard { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: 22px; padding: clamp(26px, 3vw, 38px); background: var(--white); color: var(--ink); border-radius: 24px 64px 24px 24px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); transform-origin: 50% 90%; transition: transform .7s var(--ease), opacity .6s var(--ease), filter .6s var(--ease); will-change: transform; user-select: none; }
.rcard[data-pos="0"] { z-index: 5; transform: none; cursor: grab; }
.rcard[data-pos="0"]:active { cursor: grabbing; }
.rcard[data-pos="1"] { z-index: 4; transform: translate(22px, 16px) rotate(3.5deg) scale(.96); filter: brightness(.93); }
.rcard[data-pos="2"] { z-index: 3; transform: translate(-14px, 30px) rotate(-4deg) scale(.92); filter: brightness(.86); }
.rcard:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { z-index: 1; opacity: 0; transform: translateY(46px) scale(.88); }
.rcard.dragging { transition: none; }
.rcard.fly-r { transform: translate(115%, -6%) rotate(16deg) !important; opacity: 0; z-index: 6; }
.rcard.fly-l { transform: translate(-115%, -6%) rotate(-16deg) !important; opacity: 0; z-index: 6; }
.rcard > * { transition: opacity .45s var(--ease) .12s; }
.rcard:not([data-pos="0"]) > * { opacity: 0; transition-delay: 0s; }
.rcard.fly-r > *, .rcard.fly-l > * { opacity: 1; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rcard blockquote { font: 500 clamp(18px, 1.6vw, 22px)/1.36 var(--display); letter-spacing: -.018em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.rc-more { display: none; align-self: flex-start; align-items: center; gap: 8px; margin-top: -8px; font: 700 15px/1 var(--body); color: var(--rust-ink); }
.rc-more svg { width: 14px; height: 14px; }
.rcard.long .rc-more { display: inline-flex; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--rule); margin-top: auto; }
.rc-who { display: flex; align-items: center; gap: 12px; }
.av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--night); color: var(--peach); font: 700 15px/1 var(--display); }
.rc-who b { display: block; font: 700 16px/1.2 var(--display); }
.rc-who span span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.rc-n { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: #9a9184; }
.deck-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-left: 10px; }
.round { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.round:hover { background: #fff; color: var(--night); border-color: #fff; }
.round svg { width: 16px; height: 16px; }
.round.sm svg { width: 12px; height: 12px; fill: currentColor; }
.prog { flex: 1; height: 2px; background: rgba(255,255,255,.18); border-radius: 2px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 100%; background: var(--peach); transform: scaleX(0); transform-origin: left; }
.prog i.run { animation: fill var(--dur, 7s) linear forwards; }
.voices.paused .prog i { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
.deck-hint { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); white-space: nowrap; }

/* ---------- Where we build ---------- */
.areas-sec { padding: var(--space) 0; background: var(--white); }
.areas-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 140px); align-items: start; }
.areas-grid .h2 { margin-top: 20px; }
.areas-grid .lede { margin: 18px 0 28px; }
.area-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.area-links li { border-bottom: 1px solid var(--rule); }
.area-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font: 700 clamp(19px, 1.7vw, 23px)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); transition: color .25s, padding .35s var(--ease); }
.area-links svg { width: 20px; height: 20px; color: var(--rust); transition: transform .35s var(--ease); }
.area-links a:hover { color: var(--rust-ink); padding-left: 12px; }
.area-links a:hover svg { transform: translateX(6px); }

/* ---------- Insights ---------- */
.insights { padding: var(--space) 0; background: var(--sheet); }

.ins-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 44px; }
.ins-head .h2 { margin-top: 20px; }
.ins-head .lede { margin-top: 16px; }
.ins-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; }
.ins-card { display: flex; flex-direction: column; }
.ins-card figure { position: relative; margin: 0; height: clamp(280px, 28vw, 400px); overflow: hidden; border-radius: var(--r-card); background: var(--sheet-2); }
.ins-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ins-card figure .tag { position: absolute; left: 14px; top: 14px; }
.ins-card:hover img { transform: scale(1.05); }
.ins-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.ins-cat { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); }
.ins-cat::before { content: ""; width: 7px; height: 7px; border: 1.6px solid currentColor; transform: rotate(45deg); }
.ins-meta time { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.ins-meta time svg { width: 15px; height: 15px; color: var(--rust); fill: none; }
.ins-card h3 { margin-top: 16px; font: 700 clamp(21px, 1.8vw, 26px)/1.1 var(--display); letter-spacing: -.03em; flex: 1; }
.ins-card:hover h3 { color: var(--rust-ink); }
.ins-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1.5px solid currentColor; font: 700 15px/1 var(--body); color: var(--rust-ink); }
.ins-more svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.ins-card:hover .ins-more svg { transform: translateX(5px); }

/* ---------- FAQ ---------- */
.faq { padding: var(--space) 0; background: var(--white); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 110px); }
.faq-grid .btn { margin-top: 26px; }
.qa details, .faq-list details { border-bottom: 1px solid var(--rule); }
.qa details:first-child, .faq-list details:first-child { border-top: 1px solid var(--ink); }
.qa summary, .faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font: 700 clamp(17px, 1.4vw, 20px)/1.25 var(--display); letter-spacing: -.02em; }
.qa summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker { display: none; }
.qa .ico, .faq-list summary::after { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); flex-shrink: 0; position: relative; transition: all .3s var(--ease); }
.qa .ico::before, .qa .ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.qa .ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa details[open] .ico { background: var(--ink); border-color: var(--ink); }
.qa details[open] .ico::before, .qa details[open] .ico::after { background: #fff; }
.qa details[open] .ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list summary::after { content: "+"; display: grid; place-items: center; font: 400 22px/1 var(--body); }
.faq-list details[open] summary::after { content: "–"; background: var(--ink); border-color: var(--ink); color: #fff; }
.qa .ans, .faq-list p { padding: 0 60px 26px 0; margin: 0; color: var(--ink-2); max-width: 68ch; }

/* ---------- CTA panel ---------- */
.cta-wrap { padding: var(--space) 0; }
/* Adjacent sections on the same background share one gap instead of two */
.faq + .cta-wrap, .plans + .yours { padding-top: 0; }
.cta { position: relative; margin: 0 var(--gutter); border-radius: 28px; overflow: hidden; color: #fff; isolation: isolate; background: var(--night); }
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.85) brightness(.85); }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--shade),.93) 0%, rgba(var(--shade),.85) 50%, rgba(var(--shade),.78) 100%); }
.cta-in { max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(24px, 6vw, 88px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.cta h2 { font: 800 clamp(34px, 3.9vw, 60px)/.9 var(--display); letter-spacing: -.05em; margin-top: 20px; }
.cta .label { color: var(--peach); }
.cta p { color: rgba(255,255,255,.9); font-size: 16px; max-width: 38ch; }
.cta .row { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.cta-side { padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid rgba(255,255,255,.18); }
.cta-meta { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.cta-meta small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }
.cta-meta b { display: block; margin-top: 8px; font: 600 15px/1.2 var(--display); color: #fff; overflow-wrap: anywhere; transition: color .2s; }
.cta-meta a:hover b { color: var(--peach); }

/* ---------- Footer ---------- */
.footer {
  position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.7); font-size: 15px; padding-top: clamp(56px, 6vw, 80px);
  background:
    radial-gradient(60% 55% at 88% 0%, rgba(180,83,42,.28), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, rgba(240,176,141,.08), transparent 70%),
    var(--night);
}
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid var(--rule-dark); }
.foot-brand { width: min(100%, 460px); }
.foot-touch { min-width: 0; }
.foot-brand p { font-size: 15px; line-height: 1.6; max-width: none; }
.foot-touch > b { display: block; font: 700 15px/1.2 var(--display); color: #fff; }
.foot-touch .btn { margin-top: 22px; }
.foot-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding: 44px 0 clamp(40px, 5vw, 56px); }
.foot-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff; }
.foot-logo .tile { width: 46px; height: 46px; border-radius: 13px; background: var(--rust); display: grid; place-items: center; color: #fff; }
.foot-logo .tile .mark { width: 26px; height: 26px; }
.foot-logo b { font: 800 20px/1 var(--display); letter-spacing: -.02em; }
.foot-brand p { margin: 16px 0 0; }
.foot-touch .foot-contact { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.foot-contact li { display: flex; align-items: center; gap: 10px; }
.copy { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--peach); cursor: pointer; transition: background .2s, color .2s; }
.copy svg { width: 15px; height: 15px; fill: none; }
.copy:hover { background: rgba(255,255,255,.1); color: #fff; }
.copy.done { color: #8fd19e; }
.foot-contact a { display: inline-flex; align-items: flex-start; gap: 10px; color: #fff; font-size: 14.5px; transition: color .2s; }
.foot-contact a span { min-width: 0; overflow-wrap: anywhere; }
.foot-contact li > a { min-width: 0; }
.foot-contact a:hover { color: var(--peach); }
.foot-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--peach); }
.foot-contact li:first-child svg { margin-top: 2px; }
.foot-grid h4 { margin: 4px 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid ul a { position: relative; transition: color .2s; }
.foot-grid ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--peach); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.foot-grid ul a:hover { color: #fff; }
.foot-grid ul a:hover::after { transform: scaleX(1); }
.areas { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.foot-social { margin-top: 26px; }
.foot-social > b { display: block; font: 700 15px/1.2 var(--display); color: #fff; }
.foot-social > div { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; }
.foot-social a { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: rgba(255,255,255,.75); transition: color .2s; }
.foot-social a svg { width: 18px; height: 18px; color: var(--peach); transition: color .2s; }
.foot-social a:hover, .foot-social a:hover svg { color: #fff; }
.social { display: flex; gap: 6px; margin-top: 22px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; color: #fff; transition: all .2s; }
.social a:hover { background: var(--rust); border-color: var(--rust); }
.social svg { width: 16px; height: 16px; }
.contact-aside .social a { border-color: var(--rule); color: var(--ink); background: var(--sheet); }
.contact-aside .social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.legal-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 26px; font-size: 13px; color: rgba(255,255,255,.7); }
.legal-row::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--rule-dark); }
.legal-row nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-left: auto; }
.legal-row a:hover { color: #fff; }
.to-top { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: #fff; font: 600 13px/1 var(--body); transition: background .25s, color .25s, border-color .25s; }
.to-top em { font-style: normal; }
.to-top span { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--night); display: grid; place-items: center; transition: transform .35s var(--ease); }
.to-top svg { width: 14px; height: 14px; }
.to-top:hover, .legal-row .to-top:hover { background: #fff; color: var(--night); border-color: #fff; }
.to-top:hover span { transform: translateY(-3px); background: var(--peach); }

/* ---------- Inner pages: hero ---------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; padding: 88px 0 72px; min-height: 380px; display: flex; align-items: flex-end; }
.page-hero.has-image { min-height: 500px; padding-bottom: 80px; }
.page-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero.has-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade),.3) 0%, rgba(var(--shade),0) 32%), linear-gradient(0deg, rgba(var(--shade),.94) 0%, rgba(var(--shade),.5) 52%, rgba(var(--shade),.15) 80%); }
.page-hero-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero-art .why-art { opacity: .07; top: -40px; }
.page-hero h1 { font: 800 clamp(40px, 5vw, 72px)/.92 var(--display); letter-spacing: -.05em; max-width: 18ch; margin-top: 22px; }
.page-hero .label { color: var(--peach-2); padding: 8px 13px; border-radius: 999px; background: rgba(var(--shade),.55); border: 1px solid rgba(240,176,141,.25); }
.page-hero .lead { margin-top: 22px; color: rgba(255,255,255,.82); max-width: 60ch; }
.crumbs { font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 22px; }
.crumbs a:hover { color: #fff; }
.crumbs span { margin: 0 4px; }
.crumbs [aria-current] { color: rgba(255,255,255,.9); margin: 0; }
.pillar-jump .btn { flex: 0 1 auto; }

/* ---------- Inner pages: sections ---------- */
.section { padding: var(--space) 0; }
.section-tight { padding-top: 32px; }
.section-alt { background: var(--sheet); }
.section-dark { background: var(--night); color: #ece5da; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.section-head h2 { margin: 0; max-width: 22ch; font-size: clamp(32px, 4.06vw, 52px); line-height: .98; letter-spacing: -.035em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-center { align-items: center; }
.split-copy h2 { margin-bottom: 18px; }
.split-copy p { color: var(--ink-2); margin-bottom: 1em; }
.split-copy h3 { margin: 28px 0 10px; }
.split-copy .btn { margin-top: 12px; }
.check-list { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list svg { color: #fff; background: var(--rust); border-radius: 50%; padding: 4px; width: 22px; height: 22px; margin-top: 1px; }
.check-list.small { gap: 9px; font-size: 15px; }
.check-list.small svg { width: 19px; height: 19px; }
.check-list.cols { grid-template-columns: 1fr 1fr; gap: 14px 28px; }

/* Services */
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-grid.small { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--rule); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(var(--shade),.45); }
.service-card img { aspect-ratio: 16/11; object-fit: cover; width: 100%; }
.service-card > div { padding: 20px 22px 24px; flex: 1; }
.service-card h3 { font-size: 19px; }
.service-card p { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.service-rows { display: grid; gap: clamp(56px, 8vw, 96px); }
.service-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.service-row.flip .service-row-media { order: 2; }
.service-row-media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 26px 80px 26px 26px; transition: transform .8s var(--ease); }
.service-row-media { display: block; overflow: hidden; border-radius: 26px 80px 26px 26px; }
.service-row-media:hover img { transform: scale(1.03); }
.service-row h2 { font-size: clamp(32px, 3.6vw, 46px); margin: 14px 0 16px; }
.service-row-copy > p { color: var(--ink-2); font-size: 17px; }
.facts { display: flex; flex-wrap: wrap; gap: 32px; margin: 26px 0; padding: 18px 0; border-block: 1px solid var(--rule); }
.facts dt { font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); margin-bottom: 8px; }
.facts dd { margin: 0; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.facts.stacked { flex-direction: column; gap: 16px; border: 0; padding: 0; margin: 0 0 24px; }
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.service-block { padding: 0 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.service-block:last-child { border: 0; margin: 0; }
.service-block h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 14px; }
.service-block p { color: var(--ink-2); font-size: 17px; max-width: 62ch; }
.aside-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 28px; position: sticky; top: 96px; }
.aside-card h3 { font-size: 20px; margin-bottom: 14px; }
.aside-card p { color: var(--ink-2); margin-bottom: 18px; }
.aside-card .btn + .btn { margin-top: 10px; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--r-lg); border: 1px solid var(--rule); }
table.compare-table { width: 100%; border-collapse: collapse; min-width: 680px; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none; }
table.compare-table th, table.compare-table td { text-align: left; padding: 18px 22px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 15px; }
table.compare-table thead th { font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); }
table.compare-table tbody th a { font: 700 18px/1.2 var(--display); letter-spacing: -.02em; }
table.compare-table tbody th a:hover { color: var(--rust-ink); }
table.compare-table tr:last-child > * { border-bottom: 0; }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; }
.project-card { display: flex; flex-direction: column; }
.project-card[hidden] { display: none; }
.project-card figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4/3.4; border-radius: var(--r-lg); background: var(--sheet-2); }
.project-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.project-card:hover figure img { transform: scale(1.05); }
.project-card figure .tag { position: absolute; left: 14px; top: 14px; }
.project-card-body { padding: 18px 4px 0; }
.project-card h3 { font-size: 24px; letter-spacing: -.035em; }
.project-card:hover h3 { color: var(--rust-ink); }
.project-card .specs { margin: 12px 0 16px; }
.facts-bar { background: var(--night-2); color: #fff; }
.facts-bar dl { display: flex; flex-wrap: wrap; margin: 0; }
.facts-bar dl > div { padding: 22px 32px 22px 0; margin-right: 32px; border-right: 1px solid rgba(255,255,255,.14); }
.facts-bar dl > div:last-child { border: 0; }
.facts-bar dt { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach); margin-bottom: 8px; }
.facts-bar dd { margin: 0; font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.project-layout h2 { margin-bottom: 8px; }
.gallery-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.gallery-title span { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.gallery { columns: 3 300px; column-gap: 14px; }
.gallery-item { display: block; margin-bottom: 14px; border-radius: 16px; overflow: hidden; break-inside: avoid; cursor: zoom-in; }
.gallery-item img { width: 100%; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.03); }
.project-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; padding-top: 48px; padding-bottom: 8px; }
.project-nav a { padding: 20px 24px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: #fff; transition: border-color .2s, transform .3s var(--ease); }
.project-nav a:hover { border-color: var(--rust); transform: translateY(-2px); }
.project-nav a:nth-child(3) { text-align: right; }
.project-nav small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.project-nav strong { font: 700 19px/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(15,13,11,.95); display: flex; align-items: center; justify-content: center; padding: 56px 72px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.lightbox button { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); width: 52px; height: 52px; border-radius: 50%; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox button:hover { background: #fff; color: var(--night); }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: rgba(255,255,255,.65); margin: 0; }

/* Solutions phases */
.phase { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding: 64px 0; border-top: 1px solid var(--rule); scroll-margin-top: 96px; }
.phase:first-child { border-top: 0; padding-top: 0; }
.phase-num { position: sticky; top: 104px; align-self: start; }
.phase-num > span { font: 800 clamp(72px, 8vw, 110px)/.8 var(--display); letter-spacing: -.06em; color: var(--rust); display: block; margin-bottom: 22px; }
.phase-num h2 { margin: 14px 0 12px; }
.phase-num p:last-child { color: var(--ink-2); }
.phase-items { display: grid; gap: 14px; }
.phase-item { background: #fff; border: 1px solid var(--rule); border-radius: 22px 56px 22px 22px; padding: 26px 28px; }
.phase-item:nth-child(2) { background: var(--sheet); }
.phase-item:nth-child(3) { background: var(--rust-soft); border-color: transparent; }
.phase-item h3 { font-size: 21px; margin-bottom: 8px; }
.phase-item p { color: var(--ink-2); }

/* Reviews */
.review-card { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: 22px 56px 22px 22px; padding: 26px; display: flex; flex-direction: column; color: var(--ink); }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.review-card blockquote { margin: 0 0 18px; font: 500 19px/1.4 var(--display); letter-spacing: -.015em; flex: 1; }
.review-card figcaption { color: var(--ink-2); font-size: 14px; }
.review-card figcaption strong { color: var(--ink); }
.review-masonry { columns: 2 380px; column-gap: 20px; }
.review-full { margin: 0 0 20px; background: #fff; border: 1px solid var(--rule); border-radius: 22px 56px 22px 22px; padding: 30px; break-inside: avoid; }
.review-full blockquote { margin: 16px 0 22px; font: 500 18px/1.5 var(--display); letter-spacing: -.012em; color: var(--ink); }
.review-full figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.review-full figcaption strong { display: block; font: 700 16px/1.2 var(--display); }
.review-full figcaption span span { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.rating-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.rating-summary div { padding: 22px; border-radius: 18px; background: var(--sheet-2); }
.rating-summary strong { display: block; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; }
.rating-summary span { display: block; margin-top: 6px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; }

/* Posts */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; }
.post-card { display: flex; flex-direction: column; }
.post-card[hidden] { display: none; }
.post-card figure { position: relative; margin: 0; aspect-ratio: 16/11; overflow: hidden; border-radius: var(--r-lg); background: var(--sheet-2); }
.post-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.post-card:hover figure img { transform: scale(1.05); }
.post-card figure .tag { position: absolute; left: 14px; top: 14px; }
.post-card > div { padding: 18px 4px 0; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 22px; letter-spacing: -.03em; }
.post-card:hover h3 { color: var(--rust-ink); }
.post-card p { color: var(--ink-2); font-size: 15px; margin: 10px 0 16px; flex: 1; }
.resource-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.resource-links a { padding: 30px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--rule); transition: border-color .2s, transform .3s var(--ease); }
.resource-links a:hover { border-color: var(--rust); transform: translateY(-3px); }
.resource-links h3 { margin-bottom: 8px; }
.resource-links p { color: var(--ink-2); margin: 0; }
.tools-links { margin-top: 32px; }

/* Articles */
.article { padding: var(--space) 0 0; }
.prose { font-size: 18px; line-height: 1.7; }
.prose h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 1.6em 0 .55em; }
.prose p { color: var(--ink-2); margin: 0 0 1.1em; }
.prose a { color: var(--rust-ink); font-weight: 700; border-bottom: 1.5px solid currentColor; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 48px auto 0; padding: 30px 34px; border-radius: var(--r-card); background: var(--night); color: #fff; }
.article-cta h3 { color: #fff; margin-bottom: 6px; }
.article-cta p { margin: 0; color: rgba(255,255,255,.75); }

/* Company */
.leader-card { background: #fff; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--rule); }
.leader-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.leader-card > div { padding: 28px; }
.leader-card h3 { font-size: 30px; margin-bottom: 12px; }
.leader-card p { color: var(--ink-2); margin-bottom: 1em; }
.leader-quote { font: 500 20px/1.4 var(--display); letter-spacing: -.015em; color: var(--rust-ink) !important; margin: 0; }
.leader-proof { display: grid; gap: 14px; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.value { background: #fff; border: 1px solid var(--rule); border-radius: 22px 56px 22px 22px; padding: 28px; }
.value::before { content: ""; display: block; width: 10px; height: 10px; border: 2px solid var(--rust); transform: rotate(45deg); margin-bottom: 22px; }
.value h3 { margin-bottom: 10px; }
.value p { color: var(--ink-2); margin: 0; }
.section-alt .value, .section-alt .review-full, .section-alt .resource-links a { background: var(--white); }
.note-card { margin-top: 28px; padding: 34px; border-radius: var(--r-card); background: var(--night); color: rgba(255,255,255,.82); }
.note-card h3 { color: #fff; margin-bottom: 10px; }
.note-card p { margin: 0; max-width: 70ch; }
.area-list { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.area-list li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; font-weight: 600; }
.area-list svg { color: var(--rust); }
.split-copy .area-list + h2 { margin-top: 8px; }
.map-embed { border-radius: 26px 80px 26px 26px; overflow: hidden; border: 1px solid var(--rule); aspect-ratio: 4/3; background: var(--sheet-2); }
.map-embed.tall { aspect-ratio: 4/5; }
.map-embed iframe, .map-full iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-full { height: 420px; margin: var(--space) var(--gutter); border-radius: 28px; overflow: hidden; }

/* Checklists */
.checklist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.checklist { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-card); padding: 28px; }
.checklist h2 { font-size: 24px; margin-bottom: 14px; }
.checklist ul { list-style: none; padding: 0; margin: 0; }
.checklist li { border-top: 1px solid var(--rule); }
.checklist label { display: flex; gap: 12px; padding: 12px 0; cursor: pointer; font-size: 15px; }
.checklist input { accent-color: var(--rust); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.checklist input:checked + span { text-decoration: line-through; color: var(--ink-2); }

/* Case studies */
.case-list { display: grid; gap: 24px; }
.case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); background: #fff; border: 1px solid var(--rule); border-radius: 26px 80px 26px 26px; overflow: hidden; }
.case.no-image { grid-template-columns: minmax(0, 1fr); background: var(--night); color: #fff; border: 0; }
.case.no-image h2 { color: #fff; }
.case.no-image .case-steps dd, .case.no-image .case-quote cite { color: rgba(255,255,255,.75); }
.case.no-image .case-steps dt, .case.no-image .link-arrow { color: var(--peach); }
.case-media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.case-body { padding: clamp(26px, 3vw, 44px); }
.case-body .tag { background: var(--sheet-2); }
.case.no-image .tag { background: #fff; }
.case-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 14px; }
.case-steps { display: grid; gap: 16px; margin: 22px 0; }
.case-steps dt { font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); margin-bottom: 6px; }
.case-steps dd { margin: 0; color: var(--ink-2); }
.case-quote { margin: 0 0 22px; padding-left: 16px; border-left: 3px solid var(--rust); font: 500 18px/1.45 var(--display); letter-spacing: -.012em; }
.case-quote cite { display: block; margin-top: 8px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--ink-2); }

/* ---------- Forms ---------- */
.lead-form { background: #fff; border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--rule); box-shadow: 0 40px 80px -60px rgba(var(--shade),.6); color: var(--ink); }
.lead-form h3 { font-size: 24px; margin-bottom: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 20px; }
.compact .form-grid label:last-child:nth-child(odd) { grid-column: span 2; }
.span-2 { grid-column: span 2; }
.lead-form label { display: flex; flex-direction: column; gap: 7px; font: 700 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lead-form input, .lead-form select, .lead-form textarea { font: 500 16px var(--body); letter-spacing: 0; text-transform: none; padding: 13px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--sheet); color: var(--ink); width: 100%; transition: border-color .2s, background .2s; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--rust); background: #fff; }
.lead-form .invalid { border-color: #c0392b; background: #fdf1ee; }
.lead-form textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; text-align: center; }
.form-note a { color: var(--rust-ink); font-weight: 700; }
.form-status { margin: 10px 0 0; font-weight: 600; text-align: center; }
.form-status.err { color: #b0301f; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.contact-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.contact-aside .aside-card { position: static; }
.contact-aside .social a { background: var(--sheet); }
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 12px; }
.contact-list a, .contact-list .as-link { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; font-weight: 700; overflow-wrap: anywhere; }
.contact-list svg { color: var(--rust); }
.contact-list.big { margin: 0 0 20px; gap: 16px; }
.contact-list.big svg { width: 42px; height: 42px; padding: 11px; background: var(--rust-soft); border-radius: 50%; }
.contact-list.big small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.contact-list.big svg + span { display: block; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .line > span { transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
  .hero h1 .line:nth-child(2) > span { animation-delay: .1s; }
  .hero h1 .line:nth-child(3) > span { animation-delay: .2s; }
  .fade-up { opacity: 0; animation: fadeUp .9s var(--ease) .55s forwards; }
  @keyframes rise { to { transform: none; } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) { .h2 { font-size: clamp(32px, 4.06vw, 52px); } }
@media (max-width: 1100px) {
  .main-nav, .header-phone span { display: none; }
  .topbar .wrap > span:first-child { display: none; }
  .topbar .wrap { justify-content: flex-end; }
  .nav-toggle { display: flex; }
  .header-cta { margin-left: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-grid > div:first-child { padding-bottom: 0; }
  .finder { max-width: 480px; }
  .plans-head, .yours-grid, .process-grid, .voices-grid, .faq-grid, .areas-grid, .cta-in, .p2h-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-side { padding-left: 0; border-left: 0; }
  .yours-copy { order: 0; }
  .tblock { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px dashed var(--rule); }
  .stats-band.lift .tblock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-band.lift .stat:nth-child(n+3) { border-top: 0; }
  .stats-band.lift .stat:nth-child(3)::before { display: block; }
  .stats-band.lift .stat { padding: 26px 16px 24px; }
  .stats-band.lift .stat:first-child { padding-left: 0; }
  .stats-band.lift .stat .illo { width: 64px; top: 20px; right: 10px; }
  .stat p { max-width: 34ch; }
  .plans-tools { align-items: flex-start; }
  .process-intro { position: relative; top: 0; }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid > div:last-child { grid-column: span 2; }
  .voices::after { background: linear-gradient(180deg, rgba(var(--shade),.92) 0%, rgba(var(--shade),.8) 50%, rgba(var(--shade),.92) 100%); }
  .doors { grid-template-columns: 1fr 1fr; }
  .doors .door:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .svc-doors { grid-template-columns: 1fr 1fr; }
  .svc-doors .door, .svc-doors .door:nth-child(-n+2) { grid-column: auto; aspect-ratio: 4 / 4; }
  .svc-doors .door:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
  .creds-strip { grid-template-columns: 1fr 1fr; }
  .cred:last-child { grid-column: 1 / -1; }
  .service-grid.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(250px, auto); }
  .rb-main { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .split, .service-row, .service-layout, .project-layout, .contact-layout, .phase, .case { grid-template-columns: minmax(0, 1fr); }
  .service-row.flip .service-row-media { order: 0; }
  .service-grid, .project-grid, .post-grid, .checklist-grid, .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ins-card:nth-child(3) { display: none; }
  .rating-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aside-card, .phase-num { position: static; }
  .case-media img { min-height: 0; aspect-ratio: 16/9; }
}
@media (max-width: 1000px) {
  .stats-band.lift .tblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band.lift .stat:nth-child(3)::before { display: none; }
  .stats-band.lift .stat:nth-child(3) { padding-left: 0; }
  .stats-band.lift .stat:nth-child(n+3) { border-top: 1px dashed var(--rule); }
}
@media (max-width: 680px) {
  .rb-grid { padding: 0 10px; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(240px, auto); }
  .rb-main { grid-row: auto; min-height: 340px; border-radius: 22px 56px 22px 22px; }
  .rb-cap p { display: none; }
  .ins-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ins-card:nth-child(3) { display: flex; }
  .ins-card figure { height: 240px; border-radius: 22px 56px 22px 22px; }
  .topbar span:first-child, .topbar-links a:first-child { display: none; }
  .topbar .wrap { justify-content: center; }
  .header-inner { height: 60px; gap: 12px; }
  .logo-mark { width: 32px; height: 32px; }
  .logo-text strong { font-size: 21px; }
  .header-cta .btn { display: none; }
  .hero { min-height: calc(100svh - 40px); }
  .hero-inner { padding-top: 56px; padding-bottom: 94px; }
  .hero h1 { font-size: min(52px, 10.8cqi); }
  .hero-cta .btn, .actions .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .pcard { min-height: 320px; }
  .stats-band.lift .tblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band.lift .stat:nth-child(3)::before { display: none; }
  .stats-band.lift .stat:nth-child(n+3) { border-top: 1px dashed var(--rule); }
  .stats-band.lift .stat { padding: 22px 14px 20px; }
  .stats-band.lift .stat:nth-child(odd) { padding-left: 0; }
  .stats-band.lift .stat-n { margin-top: 4px; }
  .stats-band.lift .stat-k { margin-top: 10px; }
  .stats-band.lift .stat .illo { width: 64px; top: 16px; right: 8px; }
  .tblock { border-radius: 18px 44px 18px 18px; }
  .stat { flex-direction: column; gap: 10px; padding: 18px 16px; }
  .stat-ico { width: 36px; height: 36px; border-radius: 11px; }
  .stat-ico svg { width: 17px; height: 17px; }
  .stat-n { font-size: 32px; margin-top: 8px; }
  .stat p { font-size: 12.5px; }
  .pcard-wide .illo { right: 16px; bottom: 68px; width: 44%; max-width: 140px; }
  .pcard-wide { min-height: 360px; }
  .qa .ans, .faq-list p { padding-right: 0; }
  .cta { margin: 0 10px; border-radius: 22px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot-grid > div:last-child { grid-column: 1 / -1; }
  .foot-grid > div:last-child .areas { grid-template-columns: 1fr 1fr; }
  .legal-row nav { margin-left: 0; }
  .to-top { padding: 0 6px; } .to-top em { display: none; }
  .legal-row { flex-direction: column; align-items: flex-start; }
  .score { gap: 16px; }
  .deck { padding: 14px 14px 34px 4px; }
  .rcard { border-radius: 20px 44px 20px 20px; }
  .rcard[data-pos="1"] { transform: translate(10px, 12px) rotate(2.5deg) scale(.96); }
  .rcard[data-pos="2"] { transform: translate(-8px, 22px) rotate(-3deg) scale(.92); }
  .deck-hint { display: none; }
  .kitchen-frame, .compare, .service-row-media, .service-row-media img, .map-embed, .case { border-radius: 22px 56px 22px 22px; }
  .pin .t { display: none; }
  .pin.on, .pin:hover { padding-right: 0; }
  .compare { aspect-ratio: 4 / 4.4; }
  .compare-cap .dim { display: none; }
  .compare-cap { justify-content: space-between; }
  .doors, .creds-strip { grid-template-columns: minmax(0, 1fr); }
  .door, .doors .door:last-child, .svc-doors .door, .svc-doors .door:nth-child(-n+2), .svc-doors .door:last-child { grid-column: auto; aspect-ratio: 4 / 3.6; }
  .cred:last-child { grid-column: auto; }
  .page-hero { padding: 64px 0 52px; min-height: 320px; }
  .page-hero.has-image { min-height: 420px; padding-bottom: 56px; }
  .service-grid, .service-grid.small, .project-grid, .post-grid, .checklist-grid, .plan-grid, .form-grid, .check-list.cols, .area-list { grid-template-columns: minmax(0, 1fr); }
  .span-2, .compact .form-grid label:last-child:nth-child(odd) { grid-column: auto; }
  .facts { gap: 20px; }
  .facts-bar dl > div { padding: 16px 18px 16px 0; margin-right: 18px; }
  .project-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-nav a:nth-child(2) { display: none; }
  .article-cta { flex-direction: column; align-items: flex-start; }
  .lightbox { padding: 56px 8px; }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
  .gallery { columns: 2; column-gap: 8px; }
  .gallery-item { margin-bottom: 8px; border-radius: 12px; }
  .map-full { margin: 48px 10px; height: 340px; border-radius: 22px; }
}
@media print {
  .topbar, .site-header, .footer, .cta-wrap, .page-hero .actions, .lightbox { display: none !important; }
  .page-hero { background: none; color: var(--ink); padding: 0 0 16px; min-height: 0; }
  .page-hero h1, .page-hero .lead { color: var(--ink); }
  .page-hero-art { display: none; }
  .checklist-grid { grid-template-columns: 1fr; }
  .checklist { break-inside: avoid; border: 1px solid #999; }
}

/* Services page: hero title on two lines; service cards three across */
.hub-hero h1 { max-width: none; font-size: clamp(30px, 3.9vw, 58px); }
.hub-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.hub-doors .door { aspect-ratio: 4 / 4.2; }
.hub-doors .door-tag { max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .hub-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .hub-doors { grid-template-columns: minmax(0, 1fr); } .hub-doors .door { aspect-ratio: 4 / 3.6; } }
@media (max-width: 680px) { .hub-hero h1 { font-size: clamp(26px, 8.6vw, 40px); } .hub-more { display: none; } }
/* Services page: section header above the cards; Where we build and the closing panel on the warm background */
.hub-head { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.hub-head .label { justify-content: center; }
.hub-head .h2 { margin-top: 20px; }
.hub-head .h2 em { font-style: normal; color: var(--rust-ink); }
.hub-head .lede { margin: 16px auto 0; max-width: 60ch; }
.hub-hero ~ .hub-svc ~ .areas-sec, .hub-hero ~ .hub-svc ~ .cta-wrap { background: var(--sheet); }
.hub-hero ~ .hub-svc ~ .areas-sec + .cta-wrap { padding-top: 0; }
/* Services hero title: normal letter spacing, the second line in peach */
.hub-hero h1 { letter-spacing: 0; }
.hub-hero h1 .l1, .hub-hero h1 .l2 { display: block; }
.hub-hero h1 em { font-style: normal; color: #f0b08d; }
.hub-narrow { display: none; }
@media (max-width: 680px) { .hub-wide { display: none; } .hub-narrow { display: inline; } }

/* ---------- Custom Homes page ---------- */
.svc2-hero h1 { letter-spacing: 0; max-width: none; line-height: .98; }
.svc2-hero h1 .l1, .svc2-hero h1 .l2 { display: block; }
.svc2-hero h1 em { font-style: normal; color: #f0b08d; }
.ov-sec { padding: var(--space) 0; background: var(--white); }
.ov-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 4vw, 52px); }
.ov-head .h2 { margin-top: 20px; }
.ov-head .h2 em, .os-sec .h2 em, .ch-plans .h2 em { font-style: normal; color: var(--rust-ink); }
.ov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ov-card { padding: 26px 24px 28px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--rule); }
.ov-card:first-child { border-radius: 22px 56px 22px 22px; }
.ov-num { font: 700 12px/1 var(--mono); letter-spacing: .1em; color: var(--rust-ink); }
.ov-card h3 { margin-top: 18px; font: 800 21px/1.1 var(--display); letter-spacing: -.02em; }
.ov-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ov-facts { margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 22px; background: var(--night); color: #fff; }
.ov-facts div { padding: 22px 24px; }
.ov-facts div + div { border-left: 1px dashed rgba(255,255,255,.18); }
.ov-facts dt { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach-2); }
.ov-facts dd { margin: 8px 0 0; font: 700 18px/1.25 var(--display); letter-spacing: -.01em; }
.ch-plans, section.bg-sheet { background: var(--sheet); }
.ch-builds, section.bg-sheet { background: var(--sheet); }
.os-sec { padding: var(--space) 0; background: var(--white); overflow: hidden; }
.os-sec .plans-head { margin-bottom: 36px; }
.sarrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.sarrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.sarrow svg { width: 18px; height: 18px; }
.svc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(270px, 28vw, 380px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  scroll-padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.svc-rail::-webkit-scrollbar { display: none; }
.svc-rail .door { scroll-snap-align: start; aspect-ratio: 4 / 4.6; }
.svc-rail .door-tag { max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-areas { background: var(--sheet); }
@media (max-width: 1100px) {
  .ov-head { grid-template-columns: minmax(0, 1fr); }
  .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-facts div:nth-child(3) { border-left: 0; }
  .ov-facts div:nth-child(n+3) { border-top: 1px dashed rgba(255,255,255,.18); }
}
@media (max-width: 680px) {
  .svc2-hero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-facts { grid-template-columns: minmax(0, 1fr); }
  .ov-facts div + div { border-left: 0; border-top: 1px dashed rgba(255,255,255,.18); }
  .svc-rail { grid-auto-columns: 82%; }
}
.os-sec + .cta-wrap { padding-top: 0; }
section.bg-white { background: var(--white); }

/* Custom Homes overview: text tabs over a half-bleed photo and copy */
.wd-sec { padding: var(--space) 0; background: var(--white); overflow: hidden; }
.wd-head .h2 { margin-top: 20px; }
.wd-head .h2 em, .wd-copy h3 em { font-style: normal; color: var(--rust-ink); }
.wd-tabs { display: flex; flex-wrap: wrap; gap: 8px 44px; margin-top: 52px; }
.wd-tabs button { position: relative; padding: 0 0 12px; border: 0; background: none; cursor: pointer; font: 700 19px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink-2); transition: color .25s; }
.wd-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--rust); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.wd-tabs button:hover { color: var(--ink); }
.wd-tabs button[aria-selected="true"] { color: var(--rust-ink); }
.wd-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.wd-panels { margin-top: 20px; }
.wd-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 120px); animation: tbIn .55s var(--ease); }
.wd-panel[hidden] { display: none; }
@keyframes tbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wd-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0 26px 26px 0; background: var(--sheet-2); }
.wd-media img { width: 100%; height: 100%; object-fit: cover; }
.wd-copy { padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.wd-sub { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.wd-copy h3 { margin-top: 16px; font: 700 clamp(32px, 3.2vw, 48px)/1.05 var(--display); letter-spacing: -.03em; max-width: 14ch; }
.wd-copy p { margin-top: 24px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 50ch; }
.wd-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px; margin-top: 34px; }
.wd-more { display: inline-flex; align-items: center; gap: 16px; font: 600 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-ink); }
.wd-more span { width: 40px; height: 2px; background: currentColor; transition: width .35s var(--ease); }
.wd-more:hover span { width: 60px; }
@media (max-width: 1100px) {
  .wd-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wd-media { border-radius: 0; aspect-ratio: 16 / 9; }
  .wd-copy { padding: 0 var(--gutter); }
}
@media (max-width: 680px) {
  .wd-tabs { gap: 6px 24px; }
  .wd-tabs button { font-size: 16px; }
}
.wd-head > .label { display: flex; justify-content: center; }
.wd-head > .h2 { text-align: center; }
/* Tabs sit over the photo column, right-aligned to its edge; the underline doubles as the auto-advance timer */
.wd-tabrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); margin-top: 52px; }
.wd-tabrow .wd-tabs { margin-top: 0; justify-content: flex-end; }
.wd-tabs.run button[aria-selected="true"]::after { transform: scaleX(0); animation: tbFill 6s linear forwards; }
@keyframes tbFill { to { transform: scaleX(1); } }
@media (max-width: 1100px) {
  .wd-tabrow { grid-template-columns: minmax(0, 1fr); padding: 0 var(--gutter); }
  .wd-tabrow .wd-tabs { justify-content: flex-start; }
}
/* Service pages: four project cards fill the bento; tabs without a photo show a drawn panel */
.rb-grid.n4 .rb-card:nth-child(4) { grid-column: span 2; }
.builds-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-2); }
.wd-art { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 40px); background: var(--night); color: #fff; background-image: linear-gradient(rgba(240,176,141,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(240,176,141,.07) 1px, transparent 1px); background-size: 32px 32px; }
.wd-art .illo { z-index: 0; position: absolute; top: 12%; left: 50%; right: auto; bottom: auto; width: 46%; max-width: 280px; transform: translateX(-50%); color: rgba(240,176,141,.55); }
.wd-art .illo * { stroke-dashoffset: 0 !important; }
.wd-art b { position: relative; font: 800 clamp(26px, 2.6vw, 40px)/1.05 var(--display); letter-spacing: -.02em; color: var(--peach); }
@media (max-width: 1100px) { .rb-grid.n4 .rb-card:nth-child(4) { grid-column: 1 / -1; } }
@media (max-width: 680px) { .rb-grid.n4 .rb-card:nth-child(4) { grid-column: auto; } }
/* Service heroes: each line stays on one line and shrinks with the column when the screen is narrow */
.svc2-hero .page-hero-inner { container-type: inline-size; }
.svc2-hero h1 .l1, .svc2-hero h1 .l2 { white-space: nowrap; font-size: min(1em, calc(100cqi / (var(--len) * .6))); }

/* ---------- Solutions pages ---------- */

.frame { position: relative; margin: 0; aspect-ratio: 5 / 4.2; border-radius: 26px 80px 26px 26px; overflow: hidden; background: var(--sheet-2); box-shadow: 0 40px 80px -50px rgba(var(--shade),.6); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.roles-sec { padding: var(--space) 0; background: var(--sheet); }
.roles-head { margin-bottom: clamp(32px, 4vw, 48px); }
.roles-head .h2 { margin-top: 20px; }
.roles-head .h2 em { font-style: normal; color: var(--rust-ink); }
.roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.role { padding: clamp(26px, 3vw, 40px); border-radius: 24px; }
.role-you { background: var(--white); border: 1px solid var(--rule); }
.role-us { background: var(--night); color: #fff; border-radius: 24px 70px 24px 24px; }
.role-k { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-ink); }
.role-us .role-k { color: var(--peach-2); }
.role ul { list-style: none; margin: 22px 0 0; padding: 0; }
.role li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 15px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; }
.role-us li { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.role li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--rust); color: #fff; margin-top: 1px; }
.role-us li svg { background: var(--peach); color: var(--night); }

.leave-sec { padding: var(--space) 0; background: var(--white); }
.leave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.leave-card { position: relative; isolation: isolate; overflow: hidden; padding: 28px 26px 30px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--rule); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.leave-card:first-child { border-radius: 22px 60px 22px 22px; }
.leave-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(var(--shade),.5); }
.leave-card .illo { top: 20px; right: 20px; bottom: auto; width: 76px; color: rgba(154,68,34,.35); }
.leave-n { font: 800 40px/1 var(--display); letter-spacing: -.04em; color: var(--rust); }
.leave-card h3 { margin-top: 36px; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.leave-card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.ms-sec { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: #fff; padding: var(--space) 0; }
.ms-sec .why-head .h2 em { font-style: normal; color: var(--peach); }
.ms { --n: 5; list-style: none; margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.ms::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 27px; height: 2px; background: linear-gradient(90deg, var(--rust), var(--peach)); }
.ms li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px; text-align: center; }
.ms-dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--night-2); border: 2px solid var(--peach); font: 700 14px/1 var(--mono); color: var(--peach); }
.ms li:last-child .ms-dot { background: var(--rust); border-color: var(--rust); color: #fff; }
.ms b { font: 700 19px/1.15 var(--display); letter-spacing: -.02em; }
.ms-note { margin-top: 30px; text-align: center; font-size: 13px; color: rgba(255,255,255,.6); }

.glance4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.g4 { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--rule); transition: transform .4s var(--ease), border-color .3s; }
.g4:hover { transform: translateY(-4px); border-color: rgba(154,68,34,.35); }
.g4 h3 { margin-top: 18px; font: 800 21px/1.1 var(--display); letter-spacing: -.02em; }
.g4 ul { list-style: none; margin: 16px 0 0; padding: 0; }
.g4 li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px dashed var(--rule); font-size: 14.5px; }
.g4 li svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--rust); color: #fff; margin-top: 2px; }
.cmp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 20px; font: 700 14px/1 var(--body); color: var(--rust-ink); }
.cmp-more svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.g4:hover .cmp-more svg, .cmp-more:hover svg { transform: translateX(4px); }

.tools-sec { padding: var(--space) 0; background: var(--white); }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.tool { display: flex; flex-direction: column; padding: 28px 26px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--rule); }
.tool:first-child { border-radius: 22px 60px 22px 22px; }
.tool-top { display: flex; justify-content: space-between; align-items: center; }
.tool-tag { height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--rule); font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tool h3 { margin-top: 20px; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.tool ul { list-style: none; margin: 18px 0 0; padding: 0; }
.tool li { border-top: 1px solid var(--rule); }
.tool label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 0; font-size: 15px; line-height: 1.45; cursor: pointer; }
.tool input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rust); }
.tool input:checked + span { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--rust); }
@media print { .site-header, .topbar, .page-hero, .os-sec, .cta-wrap, footer { display: none !important; } .pstep { display: none !important; } .tools { grid-template-columns: 1fr; } .tool { break-inside: avoid; } }

@media (max-width: 1100px) {
  .glance4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .leave { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .roles, .glance4 { grid-template-columns: minmax(0, 1fr); }
  .ms { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; }
  .ms::before { left: 27px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--rust), var(--peach)); }
  .ms li { flex-direction: row; text-align: left; padding: 0; }
}
.mega-foot p { margin-left: auto; }
/* Solutions bar: six steps under the hero */
.pstep { background: var(--white); border-bottom: 1px solid var(--rule); }
.pstep ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pstep li + li { border-left: 1px solid var(--rule); }
.pstep a { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 20px 14px; }
.pstep li:first-child a { padding-left: 0; }
.pstep a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--rust); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.pstep a:hover::after, .pstep li.on a::after { transform: scaleX(1); }
.pstep-n { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--rule); font: 700 12px/1 var(--mono); color: var(--ink-2); transition: all .25s; }
.pstep-t { font: 700 15px/1.2 var(--display); letter-spacing: -.01em; color: var(--ink-2); transition: color .25s; }
.pstep a:hover .pstep-t, .pstep li.on .pstep-t { color: var(--ink); }
.pstep li.on .pstep-n { background: var(--rust); border-color: var(--rust); color: #fff; }
.pstep a:hover .pstep-n { border-color: var(--rust); color: var(--rust-ink); }
@media (max-width: 1100px) {
  .pstep ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pstep li:nth-child(4) { border-left: 0; }
  .pstep li:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .pstep li:nth-child(4) a { padding-left: 0; }
}
@media (max-width: 680px) {
  .pstep ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstep li:nth-child(4) { border-left: 1px solid var(--rule); }
  .pstep li:nth-child(odd) { border-left: 0; }
  .pstep li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .pstep li:nth-child(4) a { padding-left: 10px; }
  .pstep li:nth-child(odd) a { padding-left: 0; }
  .pstep a { padding: 14px 10px; gap: 10px; }
  .pstep-n { width: 30px; height: 30px; font-size: 11px; }
  .pstep-t { font-size: 13.5px; }
}

/* ---------- Project story (Our Work project pages) ---------- */
.cs-sec { padding: var(--space) 0; background: var(--white); scroll-margin-top: 70px; }
.cs-sec.alt { background: var(--sheet); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cs-grid.flip .cs-media { order: 2; }
.cs-media { position: sticky; top: 96px; align-self: start; }
.cs-frame { aspect-ratio: 4 / 4.4; }
.cs-frame .wd-art { position: absolute; inset: 0; }
.cs-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(var(--shade),.75) 0%, transparent 42%); }
.cs-frame .kitchen-tag { z-index: 2; }
.cs-facts { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; margin: 0; display: flex; border-radius: 18px; color: #fff; background: rgba(29,27,24,.5); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cs-facts div { flex: 1; min-width: 0; padding: 14px 16px; }
.cs-facts div + div { border-left: 1px dashed rgba(255,255,255,.22); }
.cs-facts dt { font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach-2); }
.cs-facts dd { margin: 7px 0 0; font: 700 15px/1.25 var(--display); }
.cs-copy .h2 { margin-top: 20px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; }
.cs-steps { list-style: none; margin: 30px 0 0; padding: 0; }
.cs-step { position: relative; padding: 0 0 24px 30px; }
.cs-step::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rust); background: var(--white); }
.cs-sec.alt .cs-step::before { background: var(--sheet); }
.cs-step::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 2px; width: 2px; background: var(--rule); }
.cs-step.s3::after { display: none; }
.cs-step.s3::before { background: var(--rust); }
.cs-k { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rust-ink); }
.cs-step p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.cs-step.s3 p { color: var(--ink); font-weight: 600; }
.cs-quote { margin: 8px 0 0; padding: 22px 24px; border-radius: 20px 50px 20px 20px; background: var(--night); color: #fff; }
.cs-quote blockquote { margin: 0; font: 500 18px/1.45 var(--display); letter-spacing: -.01em; }
.cs-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.cs-quote figcaption b { display: block; font: 700 15px/1.2 var(--display); }
.cs-quote figcaption span span { display: block; font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 2px; }
.cs-quote .stars { margin-left: auto; }
.cs-quote .av { background: var(--rust); color: #fff; }
@media (max-width: 1100px) {
            .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-grid.flip .cs-media { order: 0; }
  .cs-media { position: relative; top: 0; }
  .cs-frame { aspect-ratio: 16 / 10; }
}
@media (max-width: 680px) {
  .cs-frame { aspect-ratio: 4 / 4; }
  .cs-facts { left: 10px; right: 10px; bottom: 10px; border-radius: 14px; }
  .cs-facts div { padding: 9px 10px; }
  .cs-facts dt { font-size: 9px; }
  .cs-facts dd { font-size: 12.5px; margin-top: 5px; }
  .cs-quote .stars { display: none; }
}
.cs-sec .cs-step.s3::before { background: var(--rust); }

/* ---------- Our Work ---------- */
.rb-grid.rb-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.wk-sec { padding: var(--space) 0; background: var(--sheet); scroll-margin-top: 70px; }
.csx-bar { display: flex; justify-content: space-between; align-items: end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 32px; }
.csx-bar .h2 { margin-top: 20px; }
.csx-bar .h2 em { font-style: normal; color: var(--rust-ink); }
.wk-sec .filters { margin-bottom: 0; }
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; }
.wk-card { display: flex; flex-direction: column; }
.wk-card[hidden] { display: none; }
.wk-card figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--sheet-2); }
.wk-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.wk-card:hover img { transform: scale(1.05); }
.wk-card .tag { position: absolute; left: 16px; top: 16px; }
.wk-body { display: flex; flex-direction: column; flex: 1; padding: 18px 4px 0; }
.wk-card h3 { font: 800 22px/1.1 var(--display); letter-spacing: -.02em; transition: color .25s; }
.wk-card:hover h3 { color: var(--rust-ink); }
.wk-card .specs { margin-top: 10px; }
.wk-card .cmp-more { padding-top: 16px; }
.wk-card:hover .cmp-more svg { transform: translateX(4px); }
@media (max-width: 1100px) {
  .rb-grid.rb-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-grid.rb-3 .rb-main { grid-column: 1 / -1; }
  .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .rb-grid.rb-3 { grid-template-columns: minmax(0, 1fr); }
  .wk-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Recent work: one large and two smaller photos aligned on the bottom, caption underneath */
.rw-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 38px; align-items: end; }
.rw-card { display: block; }
.rw-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--sheet-2); }
.rw-main figure { aspect-ratio: 3 / 2; border-radius: 22px 70px 22px 22px; }
.rw-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.rw-card:hover img { transform: scale(1.05); }
@media (max-width: 1100px) { .rw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .rw-main { grid-column: 1 / -1; } }
@media (max-width: 680px) { .rw-grid { grid-template-columns: minmax(0, 1fr); } }
.wk-head { margin-bottom: 28px; }
.wk-head .h2 { margin-top: 20px; }
.wk-head .h2 em { font-style: normal; color: var(--rust-ink); }
.wk-sec .filters { margin-bottom: 36px; }
/* Recent work captions match the project cards */
.rw-card figure { position: relative; }
/* Our Work cards: type · year in rust, then the name and size; the same in Recent work and All work */
.rw-card[hidden] { display: none; }
.rw-k { display: block; margin-top: 20px; font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); }
.rw-card h3 { margin-top: 12px; font: 800 20px/1.25 var(--display); letter-spacing: -.01em; transition: color .25s; }
.rw-main h3 { font-size: 24px; }
.rw-card:hover h3 { color: var(--rust-ink); }
.rw-card figure .tag { position: absolute; left: 16px; top: 16px; z-index: 1; }
.rw-k { line-height: 1.5; }
.wk-areas + .cta-wrap { padding-top: 0; }
.cs-sec + .section-tight { padding-top: clamp(56px, 6vw, 80px); }

/* ---------- Our Company pages ---------- */
section.bg-sheet { background: var(--sheet); }
.roles-head .lede { margin-top: 14px; }
.leave { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cody-frame { aspect-ratio: 1 / 1; max-width: 520px; }
.cody-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 16px; color: #fff; background: rgba(29,27,24,.55); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cody-cap b { display: block; font: 800 20px/1.1 var(--display); }
.cody-cap span { display: block; margin-top: 4px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--peach-2); }
.p2h-copy .lede + .lede { margin-top: 14px; }
.co-quote { margin: 22px 0 0; padding: 18px 22px; border-left: 3px solid var(--rust); background: var(--white); border-radius: 0 16px 16px 0; font: 600 18px/1.45 var(--display); }
.co-quote cite { display: block; margin-top: 8px; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--rust-ink); }
.vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.val { padding: 26px 24px; border-radius: 22px; background: var(--night); color: #fff; }
.val:first-child { border-radius: 22px 60px 22px 22px; background: var(--rust); }
.val-n { font: 700 12px/1 var(--mono); letter-spacing: .1em; color: var(--peach-2); }
.val:first-child .val-n { color: #fff; opacity: .8; }
.val h3 { margin-top: 28px; font: 800 22px/1.1 var(--display); letter-spacing: -.02em; }
.val p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); }
.g4-stat b { display: block; font: 800 clamp(28px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.03em; color: var(--rust-ink); }
.g4-stat b small { font-size: .5em; color: var(--ink-2); letter-spacing: 0; }
.g4-stat p { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.g4-stat h3 { margin-top: 14px; }
.glance4.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); font: 600 15px/1 var(--body); }
.leave-sec:not(.bg-sheet) .chips li { background: var(--sheet); }
.co-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.co-split .h2 { margin-top: 20px; }
.co-split .h2 em, .roles-head .h2 em { font-style: normal; color: var(--rust-ink); }
.co-form { background: var(--white); border: 1px solid var(--rule); border-radius: 24px; padding: clamp(22px, 3vw, 34px); }
#apply .h2 { margin-top: 20px; }
#apply .h2 em { font-style: normal; color: var(--rust-ink); }
#apply .lede { margin-top: 14px; }
.leave-sec .map-embed iframe { border-radius: 22px; }
@media (max-width: 1100px) {
  .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance4.g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .co-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .vals, .glance4.g5 { grid-template-columns: minmax(0, 1fr); }
}
.areas-sec + .cta-wrap, .faq + .cta-wrap, .leave-sec:not(.bg-sheet) + .cta-wrap { padding-top: 0; }
.wk-sec + .section-alt { padding-top: 0; }

/* ---------- Article reading page ---------- */
.rd-hero { background: var(--rust-ink); color: #fff; padding: clamp(40px, 5vw, 64px) 0 clamp(44px, 5vw, 64px); }
.rd-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: stretch; }
.rd-crumbs { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.rd-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85); }
.rd-crumbs a:hover { color: #fff; }
.rd-crumbs svg { width: 13px; height: 13px; }
.rd-hero h1 { margin-top: 20px; max-width: 22ch; font: 800 clamp(32px, 3.8vw, 52px)/1.04 var(--display); letter-spacing: -.02em; }
.rd-lead { margin-top: 16px; max-width: 62ch; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); }
.rd-meta { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-meta li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); font: 600 13px/1 var(--body); }
.rd-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
.rd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rd-badge { margin: 0; width: clamp(160px, 16vw, 220px); aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; overflow: hidden; background: var(--peach); box-shadow: 0 0 0 10px rgba(255,255,255,.08); }
.rd-badge img { width: 100%; height: 100%; object-fit: cover; }
.rd-body { padding: clamp(40px, 5vw, 64px) 0 var(--space); background: var(--white); }
.rd-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(220px, 280px); justify-content: space-between; gap: 64px; align-items: start; }
.rd-learn { padding: 26px 28px; border-radius: 20px; background: var(--sheet); border: 1px solid var(--rule); }
.rd-learn h2 { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.rd-learn p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.rd-learn ul { list-style: none; margin: 16px 0 0; padding: 0; }
.rd-learn li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--rule); font: 600 15.5px/1.4 var(--body); }
.rd-learn li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 7px; height: 7px; border-top: 2px solid var(--rust); border-right: 2px solid var(--rust); transform: rotate(45deg); }
.rd-learn a:hover { color: var(--rust-ink); }
.rd-main .prose > :first-child { margin-top: 0; }
.rd-main .prose h2 { scroll-margin-top: 90px; }
.rd-main .article-cta { margin: 48px 0 0; }
.rd-toc { position: sticky; top: 96px; font-size: 14.5px; }
.rd-toc-k { font: 700 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.rd-toc-k + ol, .rd-toc-k + ul { margin: 12px 0 26px; }
.rd-toc ol, .rd-toc ul { list-style: none; padding: 0; border-left: 1px solid var(--rule); }
.rd-toc li a { display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; line-height: 1.35; color: var(--ink-2); transition: color .2s, border-color .2s; }
.rd-toc li a:hover { color: var(--ink); }
.rd-toc ol a.on { color: var(--rust-ink); border-left-color: var(--rust); font-weight: 600; }
.rd-toc-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rust-ink); }
.rd-toc-cta svg { width: 15px; height: 15px; }
@media (max-width: 1100px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-toc { display: none; }
}
@media (max-width: 680px) {
  .rd-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-badge { display: none; }
  .rd-learn { padding: 22px 20px; }
}
.rd-photo { margin: 0; min-height: 320px; border-radius: 22px 70px 22px 22px; overflow: hidden; background: rgba(0,0,0,.15); box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
.rd-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .rd-hero-grid { grid-template-columns: minmax(0, 1fr); } .rd-photo { min-height: 0; aspect-ratio: 16 / 9; order: -1; } }
@media (max-width: 680px) { .rd-photo { border-radius: 18px 50px 18px 18px; } }
/* Article text: smaller section titles and photos inside the text */
.rd-main .prose h2 { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; letter-spacing: -.015em; margin: 1.8em 0 .5em; }
.rd-fig { margin: 30px 0 34px; }
.rd-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.rd-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* Article header on peach: dark text for contrast */
.rd-hero { background: #f0b08d; color: var(--ink); }
.rd-crumbs, .rd-crumbs a { color: rgba(26,23,20,.7); }
.rd-crumbs a:hover { color: var(--ink); }
.rd-lead { color: rgba(26,23,20,.78); }
.rd-meta li { background: rgba(255,255,255,.45); border-color: rgba(26,23,20,.12); color: var(--ink); }
.rd-photo { box-shadow: 0 30px 60px -34px rgba(26,23,20,.45); }
.rd-more .plans-head { margin-bottom: 32px; }
.rd-more .wk-head { margin-bottom: 0; }
.svc-rail .rw-card { scroll-snap-align: start; }
/* Article header: large round photo badge */
.rd-hero-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rd-badge.rd-badge-lg { display: block; width: clamp(280px, 30vw, 420px); box-shadow: 0 0 0 16px rgba(255,255,255,.28); }
@media (max-width: 1100px) { .rd-badge.rd-badge-lg { width: 260px; justify-self: start; order: -1; margin: 16px 0 12px 16px; } }
@media (max-width: 680px) { .rd-badge.rd-badge-lg { width: 200px; } }
@media (max-width: 1100px) { .rd-hero-grid { grid-template-columns: minmax(0, 1fr); } .rd-badge.rd-badge-lg { position: static; } }
.rd-hero .rd-meta { margin-top: 58px; }
/* Contact page */
.ct-sec { background: var(--white); padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); }
.ct-head { margin-bottom: clamp(24px, 3vw, 36px); }
.ct-eyebrow { display: block; font: 700 14px/1.2 var(--body); letter-spacing: .02em; text-transform: uppercase; color: var(--rust-ink); margin-bottom: 10px; }
.ct-head h2 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 58px); align-items: stretch; }
.lead-form.ct-form { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.lead-form.ct-form label { display: block; position: relative; }
.lead-form.ct-form input, .lead-form.ct-form select, .lead-form.ct-form textarea { border: 1px solid transparent; border-radius: 0; background: #f0eeea; padding: 15px 16px; font: 500 15px/1.4 var(--body); color: var(--ink); }
.lead-form.ct-form input::placeholder, .lead-form.ct-form textarea::placeholder { color: #3a3631; opacity: 1; }
.lead-form.ct-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.ct-sel::after { content: ""; position: absolute; right: 20px; top: 50%; margin-top: -2px; border: 5px solid transparent; border-top-color: var(--ink); border-bottom: 0; pointer-events: none; }
.lead-form.ct-form input:focus, .lead-form.ct-form select:focus, .lead-form.ct-form textarea:focus { border-color: var(--rust); background: #fff; }
.lead-form.ct-form textarea { min-height: 160px; height: 160px; }
.ct-hint { margin: -10px 0 0 6px; font-size: 13.5px; color: var(--ink-2); }
.ct-submit { margin-top: 14px; width: 100%; padding: 18px; border: 0; background: var(--night); color: #fff; font: 600 17px var(--body); cursor: pointer; transition: background .2s; }
.ct-submit:hover { background: var(--rust); }
.ct-panel { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: clamp(32px, 3.4vw, 48px) clamp(28px, 3.2vw, 46px); }
.ct-panel > *:not(.ct-bgmark) { position: relative; }
.ct-bgmark { position: absolute; right: -90px; bottom: -70px; width: 380px; color: rgba(240,176,141,.09); pointer-events: none; }
.ct-bgmark svg { width: 100%; height: auto; display: block; }
.ct-top { display: flex; align-items: center; gap: 20px; }
.ct-badge { flex: none; width: 84px; height: 84px; border-radius: 50%; background: var(--peach); color: var(--night); display: grid; place-items: center; }
.ct-badge svg { width: 46px; height: 46px; }
.ct-top h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 500; color: #fff; }
.ct-intro { margin: 28px 0 8px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.88); }
.ct-panel h3 { margin: 36px 0 16px; font-size: 22px; font-weight: 600; color: #fff; }
.ct-line { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 17px; margin: 0 0 12px; }
.ct-line svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; }
.ct-line svg path { fill: currentColor; stroke: none; }
.ct-strong { font-weight: 700; }
.ct-addr { margin: 0 0 14px 29px; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.86); }
.ct-link { display: inline-flex; align-items: center; gap: 8px; margin-left: 29px; font-weight: 600; color: #fff; font-size: 15.5px; }
.ct-link svg { width: 14px; height: 14px; }
.ct-link:hover, a.ct-line:hover { color: var(--peach); }
.ct-social { display: flex; gap: 10px; }
.ct-social a { width: 36px; height: 36px; border-radius: 8px; background: #fff; color: var(--night); display: grid; place-items: center; transition: background .2s; }
.ct-social a:hover { background: var(--peach); }
.ct-social svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 960px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ct-row { grid-template-columns: minmax(0, 1fr); } .ct-top { align-items: flex-start; } .ct-badge { width: 64px; height: 64px; } .ct-badge svg { width: 36px; height: 36px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ct-sec:has(+ .map-full) { padding-bottom: clamp(40px, 5vw, 64px); }
.ct-sec + .map-full { margin-top: 0; margin-bottom: clamp(40px, 5vw, 64px); }
.ct-intro { max-width: 44ch; }
@media (min-width: 961px) and (max-width: 1100px) { .ct-intro { font-size: 15.5px; } }
@media (max-width: 380px) { .ct-intro { font-size: 14.5px; } }
.lead-form.ct-form label.ct-msg { flex: 1 1 auto; display: flex; }
.lead-form.ct-form .ct-msg textarea { height: auto; flex: 1; }
.ct-form .form-status:empty { display: none; }
/* FAQs page */
.fq-sec { background: var(--white); padding: clamp(56px, 7vw, 100px) 0; }
.fq-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.fq-side { position: sticky; top: 110px; display: grid; gap: 20px; }
@media (max-width: 960px) { .fq-grid .fq-side { display: none; } }
.fq-card { position: relative; background: var(--night); color: #fff; padding: 28px; }
.fq-card .ct-badge { width: 60px; height: 60px; margin-bottom: 18px; }
.fq-card .ct-badge svg { width: 32px; height: 32px; }
.fq-card h3 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.fq-card p { color: rgba(255,255,255,.82); margin-bottom: 18px; font-size: 15.5px; }
.fq-card .ct-line { font-size: 14px; white-space: nowrap; }
.fq-card .btn { margin-top: 10px; }
.fq-search { display: flex; align-items: center; gap: 12px; background: #f0eeea; padding: 0 18px; margin-bottom: clamp(36px, 4vw, 52px); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.fq-search:focus-within { border-color: var(--rust); background: #fff; }
.fq-search svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.fq-search input { flex: 1; border: 0; background: none; padding: 17px 0; font: 500 16px var(--body); color: var(--ink); outline: none; min-width: 0; }
.fq-group { scroll-margin-top: 110px; }
.fq-group + .fq-group { margin-top: clamp(44px, 5vw, 64px); }
.fq-gh { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.fq-n { font: 700 13px/1 var(--mono); color: #fff; background: var(--rust); padding: 8px 10px; border-radius: 999px; margin-top: 4px; }
.fq-gh h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; color: var(--ink); }
.fq-gh p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; }
.fq-main .ans { padding: 0 60px 24px 0; color: var(--ink-2); line-height: 1.7; }
.fq-empty { padding: 24px; background: var(--sheet); }
.fq-empty a { color: var(--rust-ink); font-weight: 600; }
@media (max-width: 960px) { .fq-grid { grid-template-columns: minmax(0, 1fr); } .fq-side { position: static; order: 2; } .fq-nav { display: none; } }
@media (max-width: 560px) { .fq-main .ans { padding-right: 0; } .fq-gh { gap: 12px; } }
.fq-sec + .cta-wrap { padding-top: 0; }

/* FAQ topics nav */
.fq-nav { display: block; }
.fq-k { display: block; font: 700 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.fq-nav a { display: block; border-bottom: 1px solid var(--rule); color: var(--ink); }
.fq-row { display: flex; align-items: center; gap: 14px; padding: 18px 0; }
.fq-t { flex: 1; font: 700 19px/1.2 var(--display); letter-spacing: -.02em; transition: color .25s; }
.fq-i { font: 700 12.5px var(--mono); color: var(--ink-2); transition: color .25s; }
.fq-chev { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.fq-nav a:hover .fq-t { color: var(--rust-ink); }
.fq-nav a.on .fq-t, .fq-nav a.on .fq-i { color: var(--rust-ink); }
.fq-nav a.on .fq-chev { transform: rotate(180deg); }
.fq-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.fq-dx { overflow: hidden; display: flex; gap: 14px; align-items: flex-start; min-height: 0; border-left: 2px solid var(--rust); padding: 0 0 0 18px; margin-bottom: 0; transition: margin .35s var(--ease); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.fq-dx b { display: block; margin-top: 4px; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rust-ink); }
.fq-nav a.on .fq-d { grid-template-rows: 1fr; }
.fq-nav a.on .fq-dx { margin-bottom: 20px; }
/* Service areas page */
.sa-sec { background: var(--white); padding: var(--space) 0; }
.sa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 80px); align-items: stretch; }
.sa-left .lede { margin-bottom: 28px; }
.sa-list { border-top: 1px solid var(--rule); }
.sa-item { border-bottom: 1px solid var(--rule); }
.sa-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ink); }
.sa-t { flex: 1; font: 700 19px/1.2 var(--display); letter-spacing: -.02em; transition: color .25s; }
.sa-i { font: 700 12.5px var(--mono); color: var(--ink-2); transition: color .25s; }
.sa-chev { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.sa-row:hover .sa-t, .sa-item.on .sa-t, .sa-item.on .sa-i { color: var(--rust-ink); }
.sa-item.on .sa-chev { transform: rotate(180deg); }
.sa-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.sa-item.on .sa-d { grid-template-rows: 1fr; }
.sa-dx { overflow: hidden; min-height: 0; border-left: 2px solid var(--rust); padding-left: 18px; margin-bottom: 0; transition: margin .35s var(--ease); }
.sa-item.on .sa-dx { margin-bottom: 18px; }
.sa-dx b { display: block; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rust-ink); margin-bottom: 4px; }
.sa-dx p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 8px; }
.sa-dx a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.sa-dx a svg { width: 13px; height: 13px; fill: currentColor; }
.sa-dx a:hover { color: var(--rust-ink); }
.sa-map { position: relative; min-height: 520px; border-radius: 22px 80px 22px 22px; overflow: hidden; background: var(--sheet); box-shadow: 0 40px 80px -60px rgba(var(--shade),.6); }
.sa-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sa-chip { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; background: var(--night); color: #fff; padding: 12px 18px 12px 14px; border-radius: 999px; font: 600 15px var(--body); box-shadow: 0 16px 30px -16px rgba(0,0,0,.5); }
.sa-chip svg { width: 18px; height: 18px; fill: var(--peach); }
.sa-chip small { display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.sa-band { background: var(--night); color: #fff; padding: var(--space) 0; }
.sa-bh { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(32px, 4vw, 52px); }
.sa-bh .h2 { color: #fff; }
.sa-bh p { max-width: 42ch; color: rgba(255,255,255,.75); }
.sa-counties { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sa-county { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 24px 22px; transition: border-color .25s, background .25s; }
.sa-county:hover { border-color: var(--peach); background: rgba(240,176,141,.06); }
.sa-n { font: 700 12.5px var(--mono); color: var(--peach); }
.sa-county h3 { margin: 26px 0 4px; font-size: 22px; color: #fff; }
.sa-st { font-size: 14px; color: rgba(255,255,255,.6); }
.sa-county ul { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; font-size: 15px; color: rgba(255,255,255,.88); }
.sa-county li::before { content: "·"; color: var(--peach); margin-right: 8px; }
@media (max-width: 1100px) { .sa-counties { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sa-grid { grid-template-columns: minmax(0, 1fr); } .sa-map { min-height: 380px; } .sa-bh { flex-direction: column; align-items: flex-start; } }
@media (max-width: 560px) { .sa-counties { grid-template-columns: minmax(0, 1fr); } .sa-map { min-height: 320px; border-radius: 18px 50px 18px 18px; } }
/* Counties band: same background as the footer */
.sa-band { position: relative; overflow: hidden; isolation: isolate; background:
  radial-gradient(60% 55% at 88% 0%, rgba(180,83,42,.28), transparent 70%),
  radial-gradient(45% 40% at 0% 100%, rgba(240,176,141,.08), transparent 70%),
  var(--night); }
.sa-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.sa-bh .h2 em { color: var(--peach); }
/* Careers page */
.cr-exp { background: var(--white); padding: var(--space) 0; }
.cr-exp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.cr-exp-side { position: sticky; top: 110px; }
.cr-exp-side .lede { margin-top: 14px; }
.cr-exp-photo { margin: 28px 0 0; aspect-ratio: 4/3; border-radius: 22px 80px 22px 22px; overflow: hidden; }
.cr-exp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cr-list li { display: flex; gap: clamp(18px, 2.5vw, 32px); align-items: flex-start; padding: clamp(24px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--rule); }
.cr-n { flex: none; font: 700 13px/1 var(--mono); color: #fff; background: var(--rust); padding: 8px 10px; border-radius: 999px; margin-top: 3px; }
.cr-list h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.15; margin-bottom: 6px; }
.cr-list p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.cr-roles { background: var(--sheet); padding: var(--space) 0; }
.cr-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cr-role { background: #fff; border-radius: 22px 70px 22px 22px; overflow: hidden; display: flex; flex-direction: column; }
.cr-role figure { position: relative; margin: 0; aspect-ratio: 16/8; overflow: hidden; }
.cr-role figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cr-role:hover figure img { transform: scale(1.04); }
.cr-role figure .tag { position: absolute; left: 18px; top: 18px; background: rgba(29,27,24,.8); color: #fff; padding: 7px 12px; border-radius: 999px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cr-role-body { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; flex: 1; }
.cr-role h3 { font-size: clamp(24px, 2.3vw, 30px); margin-bottom: 18px; }
.cr-role ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 0; }
.cr-role li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; }
.cr-role li svg, .cr-help svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: var(--rust); }
.cr-role-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rust-ink); }
.cr-role-go svg { width: 14px; height: 14px; fill: currentColor; }
.cr-role.dark { background: var(--night); color: #fff; }
.cr-role.dark h3 { color: #fff; }
.cr-role.dark li { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.cr-role.dark li svg { fill: var(--peach); }
.cr-role.dark .cr-role-go { color: var(--peach); }
.cr-trades { background: var(--white); padding: var(--space) 0; }
.cr-tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cr-tcol { background: var(--sheet); border-radius: 18px; padding: 24px; }
.cr-th { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.cr-th .cr-n { margin: 0; }
.cr-th h3 { flex: 1; font-size: 19px; line-height: 1.2; }
.cr-th b { font: 700 12.5px var(--mono); color: var(--ink-2); }
.cr-tcol ul { list-style: none; margin: 0; padding: 0; }
.cr-tcol li { padding: 11px 0; border-bottom: 1px dashed var(--rule); font: 600 16px var(--body); color: var(--ink); }
.cr-tcol li:last-child { border-bottom: 0; }
.cr-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cr-help li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: rgba(255,255,255,.88); }
.cr-help svg { fill: var(--peach); }
@media (max-width: 1100px) { .cr-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cr-exp-grid, .cr-role-grid { grid-template-columns: minmax(0, 1fr); } .cr-exp-side { position: static; } }
@media (max-width: 560px) { .cr-tgrid { grid-template-columns: minmax(0, 1fr); } .cr-role, .cr-exp-photo { border-radius: 18px 44px 18px 18px; } }
/* Partners page */
.pt-hub { background: var(--white); padding: var(--space) 0; }
.pt-hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.pt-copy .lede + .lede { margin-top: 16px; }
.pt-copy .h2 { margin-bottom: 20px; }
.pt-orbit { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: center; }
.pt-rings { position: absolute; inset: 0; width: 100%; height: 100%; animation: pt-spin 80s linear infinite; }
.pt-rings circle { fill: none; stroke: var(--rust); stroke-opacity: .35; stroke-width: .25; stroke-dasharray: 1 1.4; }
.pt-rings circle + circle { stroke-opacity: .2; }
@keyframes pt-spin { to { transform: rotate(360deg); } }
.pt-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 10px #f0b08d55, 0 30px 60px -30px rgba(var(--shade),.7); }
.pt-core img { width: 100%; height: 100%; object-fit: cover; }
.pt-core span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22% 8% 12%; text-align: center; background: linear-gradient(transparent, rgba(29,27,24,.85)); color: rgba(255,255,255,.8); font-size: clamp(10px, 1vw, 12px); line-height: 1.3; }
.pt-core b { display: block; color: #fff; font: 700 clamp(12px, 1.2vw, 15px)/1.2 var(--display); }
.pt-node { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 15px; font: 600 clamp(12px, 1.05vw, 14.5px) var(--body); color: var(--ink); box-shadow: 0 12px 24px -16px rgba(var(--shade),.6); transition: background .25s, color .25s, border-color .25s; }
.pt-node:hover { background: var(--night); color: #fff; border-color: var(--night); }
.pt-node:nth-of-type(odd) { background: var(--sheet); }
.pt-node:nth-of-type(odd):hover { background: var(--night); }
.pt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt-tile { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 26px 24px; transition: border-color .25s, background .25s; }
.pt-tile:hover { border-color: var(--peach); background: rgba(240,176,141,.06); }
.pt-tile h3 { margin: 22px 0 8px; font-size: 21px; color: #fff; }
.pt-tile p { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.6; }
.pt-k { display: block; font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); margin-bottom: 12px; }
.cr-role.dark .pt-k { color: var(--peach); }
@media (max-width: 1000px) { .pt-hub-grid { grid-template-columns: minmax(0, 1fr); } .pt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pt-tiles { grid-template-columns: minmax(0, 1fr); } .pt-node { padding: 6px 10px; font-size: 11px; } .pt-orbit { max-width: 280px; } .pt-core span { display: none; } }
@media (prefers-reduced-motion: reduce) { .pt-rings { animation: none; } }
/* Testimonials page */
.tm-score-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.tm-num { font: 800 clamp(120px, 15vw, 210px)/.85 var(--display); letter-spacing: -.06em; color: #fff; margin: 18px 0 18px; }
.tm-stars { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tm-stars .stars svg { width: 22px; height: 22px; }
.tm-stars p { color: rgba(255,255,255,.75); font-size: 15.5px; }
.tm-stars b { color: #fff; }
.tm-bars .h2 { color: #fff; margin-bottom: 28px; }
.tm-bars .h2 em { color: var(--peach); }
.tm-bar { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.tm-bar:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.tm-bl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.tm-bl span { font: 700 20px var(--display); color: #fff; }
.tm-bl b { font: 700 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--peach); }
.tm-track { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.tm-track span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--rust), var(--peach)); }
.tm-all { background: var(--white); padding: var(--space) 0; }
.tm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 40px); }
.tm-head .co-head, .tm-head > div:first-child { margin-bottom: 0; }
.tm-wall { columns: 2 400px; column-gap: 20px; }
.tm-card { margin: 0 0 20px; break-inside: avoid; background: var(--sheet); border-radius: 22px 60px 22px 22px; overflow: hidden; }
.tm-card[hidden] { display: none; }
.tm-ph { position: relative; display: block; aspect-ratio: 16/8; overflow: hidden; }
.tm-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tm-card:hover .tm-ph img { transform: scale(1.04); }
.tm-ph .tag { position: absolute; left: 16px; top: 16px; background: rgba(29,27,24,.8); color: #fff; padding: 7px 12px; border-radius: 999px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tm-body { padding: clamp(22px, 2.4vw, 32px); }
.tm-body blockquote { margin: 14px 0 22px; font: 500 17.5px/1.55 var(--display); letter-spacing: -.01em; color: var(--ink); }
.tm-body figcaption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--rule); }
.tm-body figcaption strong { display: block; font: 700 16px/1.2 var(--display); }
.tm-body figcaption span span { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.tm-go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--rust-ink); }
.tm-go svg { width: 13px; height: 13px; fill: currentColor; }
.tm-share-sec { background: var(--white); padding: 0 0 var(--space); }
.tm-share { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; background: var(--peach); border-radius: 22px 80px 22px 22px; padding: clamp(32px, 4vw, 56px); }
.tm-share .h2 em { color: var(--rust-ink); }
.tm-share p { margin-top: 10px; max-width: 52ch; color: rgba(26,23,20,.78); }
.tm-share-act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tm-share .btn-dark { background: var(--night); color: #fff; }
.tm-share .btn-dark svg { width: 18px; height: 18px; fill: currentColor; }
.tm-share-sec + .cta-wrap { padding-top: 0; }
@media (max-width: 900px) { .tm-score-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tm-card, .tm-share { border-radius: 18px 44px 18px 18px; } .tm-go { margin-left: 0; } }
/* About page */
.ab-story { background: var(--white); padding: var(--space) 0; }
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.ab-stack { position: sticky; top: 110px; padding-bottom: 18%; }
.ab-stack figure { margin: 0; overflow: hidden; }
.ab-stack img { width: 100%; height: 100%; object-fit: cover; }
.ab-ph1 { aspect-ratio: 4/4.4; width: 82%; border-radius: 22px 90px 22px 22px; }
.ab-ph2 { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4/3; border-radius: 22px; border: 8px solid var(--white); box-shadow: 0 30px 60px -30px rgba(var(--shade),.7); }
.ab-badge { position: absolute; left: 6%; bottom: 10%; display: flex; align-items: center; gap: 12px; background: var(--night); color: rgba(255,255,255,.75); padding: 12px 18px 12px 12px; border-radius: 999px; font-size: 13px; box-shadow: 0 16px 30px -16px rgba(0,0,0,.5); }
.ab-badge svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--peach); color: var(--night); }
.ab-badge b { display: block; color: #fff; font: 700 15px var(--display); }
.ab-lead { margin: 18px 0 8px; font: 500 clamp(19px, 1.6vw, 22px)/1.5 var(--display); letter-spacing: -.01em; color: var(--ink); }
.ab-chapters { list-style: none; margin: 24px 0 32px; padding: 0; border-top: 1px solid var(--ink); }
.ab-chapters li { display: flex; gap: 22px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.ab-chapters h3 { font-size: 21px; margin-bottom: 6px; }
.ab-chapters p { color: var(--ink-2); line-height: 1.65; }
.ab-do { background: var(--sheet); padding: var(--space) 0; }
.ab-do-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: stretch; }
.ab-do .lede { margin: 14px 0 28px; }
.ab-do .sa-list { border-top-color: var(--rule); }
.ab-do-photo { margin: 0; min-height: 480px; border-radius: 22px 80px 22px 22px; overflow: hidden; background: var(--sheet-2); }
.ab-do-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.ab-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); }
.ab-v { padding: 32px 28px 8px 0; }
.ab-v + .ab-v { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.14); }
.ab-vn { display: block; font: 800 clamp(48px, 5vw, 72px)/1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--peach); margin-bottom: 22px; transition: color .3s; }
.ab-v:hover .ab-vn { color: var(--peach); }
.ab-v h3 { font-size: 22px; color: #fff; margin-bottom: 10px; }
.ab-v p { color: rgba(255,255,255,.72); font-size: 15.5px; line-height: 1.6; }
@media (max-width: 1000px) { .ab-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-v:nth-child(3) { padding-left: 0; border-left: 0; } .ab-v:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } }
@media (max-width: 900px) { .ab-story-grid, .ab-do-grid { grid-template-columns: minmax(0, 1fr); } .ab-stack { position: relative; top: 0; } .ab-do-photo { min-height: 320px; order: -1; } }
@media (max-width: 560px) { .ab-vgrid { grid-template-columns: minmax(0, 1fr); } .ab-v, .ab-v + .ab-v { padding: 26px 0 6px; border-left: 0; } .ab-v + .ab-v { border-top: 1px solid rgba(255,255,255,.14); } .ab-ph1, .ab-do-photo { border-radius: 18px 50px 18px 18px; } }
/* Leadership page */
.ld-pro { background: var(--white); padding: var(--space) 0; }
.ld-pro-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ld-portrait { position: sticky; top: 110px; margin: 0; border-radius: 22px 100px 22px 22px; overflow: hidden; aspect-ratio: 4/5; background: var(--sheet); }
.ld-portrait img { width: 100%; height: 100%; object-fit: cover; }
.ld-portrait figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; background: rgba(29,27,24,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; padding: 16px 18px; border-radius: 16px; }
.ld-portrait figcaption b { font: 700 19px var(--display); }
.ld-portrait figcaption span { grid-column: 1; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.ld-portrait figcaption a { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; background: var(--peach); color: var(--night); padding: 10px 14px; border-radius: 999px; font: 700 13.5px var(--body); white-space: nowrap; }
.ld-portrait figcaption a svg { width: 15px; height: 15px; fill: currentColor; }
.ld-copy .lede { margin-top: 14px; }
.ld-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 30px 0 32px; }
.ld-stat { background: var(--sheet); border-radius: 18px; padding: 22px; }
.ld-stat b { display: block; font: 800 clamp(24px, 2.4vw, 32px)/1.05 var(--display); letter-spacing: -.03em; color: var(--rust-ink); margin-bottom: 8px; }
.ld-stat span { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 900px) { .ld-pro-grid { grid-template-columns: minmax(0, 1fr); } .ld-portrait { position: relative; top: 0; max-width: 480px; } }
@media (max-width: 560px) { .ld-stats { grid-template-columns: minmax(0, 1fr); } .ld-portrait { border-radius: 18px 60px 18px 18px; } .ld-portrait figcaption { grid-template-columns: 1fr; } .ld-portrait figcaption a { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } }
/* Leadership: team */
.ld-team { background: var(--white); padding: var(--space) 0; }
.ld-team-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.ld-team-head .lede { margin-top: 14px; }
.ld-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ld-member { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; font: inherit; color: inherit; }
.ld-ph { display: block; aspect-ratio: 1/1.06; border-radius: 22px 60px 22px 22px; overflow: hidden; background: var(--sheet); }
.ld-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .4s, transform .6s var(--ease); }
.ld-member:hover .ld-ph img { filter: none; transform: scale(1.03); }
.ld-ph-empty { display: grid; place-items: center; color: var(--rule); background-image: linear-gradient(rgba(181,83,42,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(181,83,42,.08) 1px, transparent 1px); background-size: 16px 16px; }
.ld-ph-empty svg { width: 34%; height: auto; color: rgba(181,83,42,.35); }
.ld-cap { display: block; padding-top: 18px; }
.ld-member b { display: block; font: 700 20px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.ld-cap > span { display: block; margin-top: 6px; font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
@media (max-width: 1000px) { .ld-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ld-team-grid { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin: 0 auto; } }
.ld-founder { background: var(--sheet); }
/* Leadership: community */
.ld-comm { background: var(--white); padding: var(--space) 0; }
.ld-comm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .7fr); gap: clamp(16px, 2vw, 24px); align-items: end; }
.ld-comm-copy { align-self: center; padding-right: clamp(0px, 2vw, 32px); }
.ld-comm-copy .lede { margin: 14px 0 28px; }
.ld-comm-grid figure { position: relative; margin: 0; overflow: hidden; }
.ld-comm-grid img { width: 100%; height: 100%; object-fit: cover; }
.ld-comm-a { aspect-ratio: 16/10; border-radius: 22px; }
.ld-comm-b { aspect-ratio: 4/5; border-radius: 22px 70px 22px 22px; }
.ld-comm-b figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; background: rgba(29,27,24,.82); color: #fff; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
@media (max-width: 1000px) { .ld-comm-grid { grid-template-columns: 1fr 1fr; } .ld-comm-copy { grid-column: 1 / -1; padding-right: 0; } }
@media (max-width: 560px) { .ld-comm-grid { grid-template-columns: minmax(0, 1fr); } .ld-comm-b { aspect-ratio: 4/4.6; } }
/* Leadership: how we run a job bento */
.ld-bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: minmax(210px, auto); gap: 14px; }
.ld-b-photo { grid-row: span 2; position: relative; margin: 0; border-radius: 22px 80px 22px 22px; overflow: hidden; min-height: 434px; }
.ld-b-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-b-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,27,24,0) 35%, rgba(29,27,24,.9)); }
.ld-b-photo figcaption { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1; color: #fff; }
.ld-b-photo figcaption span { display: block; font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.ld-b-photo figcaption b { display: block; margin: 6px 0 6px; font: 800 clamp(26px, 2.6vw, 36px)/1.05 var(--display); letter-spacing: -.03em; }
.ld-b-photo figcaption small { font-size: 15px; color: rgba(255,255,255,.78); }
.ld-b-tile { display: flex; flex-direction: column; border-radius: 22px; padding: 26px 26px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: border-color .25s, background .25s, transform .25s; }
.ld-b-tile:hover { border-color: var(--peach); background: rgba(240,176,141,.06); transform: translateY(-3px); }
.ld-b-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: auto; padding-bottom: 22px; }
.ld-b-n { font: 800 46px/1 var(--display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.4px var(--peach); transition: color .25s; }
.ld-b-tile:hover .ld-b-n { color: var(--peach); }
.ld-b-k { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); text-align: right; padding-top: 6px; }
.ld-b-tile h3 { font-size: 21px; line-height: 1.2; color: #fff; margin-bottom: 8px; }
.ld-b-tile p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); }
.ld-b-cta { grid-column: span 2; display: flex; align-items: center; gap: 18px; border-radius: 22px 60px 22px 22px; padding: 28px 30px; background: var(--peach); color: var(--night); transition: background .25s; }
.ld-b-cta .ld-b-k { color: var(--rust-ink); text-align: left; padding: 0; }
.ld-b-cta b { flex: 1; font: 800 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.ld-b-cta .ld-b-k { position: absolute; }
.ld-b-cta { position: relative; padding-top: 44px; }
.ld-b-cta .ld-b-k { top: 22px; left: 30px; }
.ld-b-cta .circ { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--night); color: var(--peach); display: grid; place-items: center; transition: transform .25s; }
.ld-b-cta .circ svg { width: 18px; height: 18px; fill: currentColor; }
.ld-b-cta:hover { background: #f4c0a2; }
.ld-b-cta:hover .circ { transform: translateX(4px); }
@media (max-width: 1100px) { .ld-bento { grid-template-columns: 1fr 1fr; } .ld-b-photo { grid-column: span 2; grid-row: auto; min-height: 320px; } .ld-b-cta { grid-column: span 2; } }
@media (max-width: 620px) { .ld-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .ld-b-photo, .ld-b-cta { grid-column: auto; } .ld-b-photo { min-height: 280px; border-radius: 18px 50px 18px 18px; } .ld-b-top { padding-bottom: 16px; } }
.ld-b-cta { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 26px; }
.ld-b-cta .ld-b-k { position: static; }
.ld-b-cta b { flex: none; margin: 18px 0 auto; }
.ld-b-cta .circ { align-self: flex-end; margin-top: 18px; }
@media (max-width: 1100px) { .ld-b-cta { grid-column: span 2; } }
@media (max-width: 620px) { .ld-b-cta { grid-column: auto; } }

.ld-cap em { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 13.5px var(--body); font-style: normal; color: var(--ink-2); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.ld-cap em svg { width: 12px; height: 12px; fill: currentColor; }
.ld-member:hover .ld-cap em, .ld-member:focus-visible .ld-cap em { opacity: 1; transform: none; color: var(--rust-ink); }
.ld-member:focus-visible .ld-ph { outline: 2px solid var(--rust); outline-offset: 3px; }
/* Team profile pop-up */
.tm-dlg { width: min(920px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 22px 70px 22px 22px; background: #fff; color: var(--ink); overflow: auto; box-shadow: 0 40px 100px -30px rgba(0,0,0,.5); }
.tm-dlg::backdrop { background: rgba(29,27,24,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tm-dlg[open] { animation: tm-in .3s var(--ease); }
@keyframes tm-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.tm-dlg-in { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.tm-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--night); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background .2s; }
.tm-x:hover { background: var(--rust); }
.tm-dlg-ph { min-height: 100%; background: var(--sheet); }
.tm-dlg-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-dlg-ph .ld-ph-empty { display: grid; place-items: center; height: 100%; min-height: 320px; }
.tm-dlg-body { padding: clamp(28px, 4vw, 48px); }
.tm-dlg-role { font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.tm-dlg-body h3 { margin: 8px 0 18px; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; }
.tm-dlg-body p { color: var(--ink-2); line-height: 1.7; margin-bottom: 12px; }
.tm-dlg-body ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.tm-dlg-body li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.tm-dlg-body li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: var(--rust); }
.tm-li { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; background: var(--night); color: #fff; padding: 12px 20px; border-radius: 999px; font: 600 14.5px var(--body); transition: background .2s; }
.tm-li svg { width: 16px; height: 16px; fill: currentColor; }
.tm-li:hover { background: var(--rust); }
body.dlg-open { overflow: hidden; }
@media (max-width: 720px) { .tm-dlg-in { grid-template-columns: minmax(0, 1fr); } .tm-dlg-ph { aspect-ratio: 4/3; min-height: 0; } .tm-dlg-ph img { object-position: 50% 25%; } .tm-dlg { border-radius: 18px 44px 18px 18px; } }
.ld-team + .cta-wrap { padding-top: 0; }
.ld-portrait figcaption a svg { width: 22px; height: 22px; padding: 4px; border-radius: 5px; background: #fff; }
/* Careers v2 */
.cr-intro { background: var(--white); padding: var(--space) 0 calc(var(--space) * .6); }
.cr-statement { margin-top: 18px; max-width: 30ch; font: 600 clamp(28px, 3.6vw, 50px)/1.15 var(--display); letter-spacing: -.03em; color: var(--ink); }
.cr-statement em { font-style: normal; color: var(--rust-ink); }
.cr-tabs-sec { background: var(--sheet); padding: var(--space) 0; }
.cr-tabs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cr-tablist { display: flex; flex-direction: column; gap: 4px; background: var(--night); border-radius: 22px; padding: 22px 14px; }
.cr-tablist button { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 14px; border: 0; border-radius: 14px; background: none; color: rgba(255,255,255,.55); font: 700 17px/1.2 var(--display); cursor: pointer; transition: background .2s, color .2s; }
.cr-tablist button span { font: 700 11.5px var(--mono); color: rgba(255,255,255,.4); }
.cr-tablist button:hover { color: #fff; }
.cr-tablist button[aria-selected=true] { background: var(--peach); color: var(--night); }
.cr-tablist button[aria-selected=true] span { color: var(--rust-ink); }
.cr-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; background: #fff; border-radius: 22px 70px 22px 22px; overflow: hidden; animation: tm-in .35s var(--ease); }
.cr-panel[hidden] { display: none; }
.cr-panel-copy { padding: clamp(26px, 3vw, 44px); }
.cr-panel-copy h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.03em; margin-bottom: 12px; }
.cr-panel-copy p { color: var(--ink-2); line-height: 1.65; margin-bottom: 16px; }
.cr-panel-copy ul { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--rule); }
.cr-panel-copy li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.cr-panel-copy li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: var(--rust); }
.cr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.cr-chips span { padding: 6px 12px; border-radius: 999px; background: var(--sheet); font: 600 13px var(--body); }
.cr-panel-ph { margin: 0; min-height: 100%; }
.cr-panel-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-vals { background: var(--white); padding: var(--space) 0; }
.cr-vals-head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 4vw, 48px); }
.cr-vals-head .lede { margin-top: 12px; }
.cr-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cr-v { background: var(--sheet); border-radius: 20px; padding: 26px 24px; transition: transform .25s, box-shadow .25s; }
.cr-v:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(var(--shade),.6); }
.cr-vi { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #fff; color: var(--rust); margin-bottom: 22px; }
.cr-vi svg { width: 26px; height: 26px; }
.cr-v h3 { font-size: 21px; margin-bottom: 8px; }
.cr-v p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.cr-open { background: var(--sheet); padding: var(--space) 0; }
.cr-open-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.cr-open .lede { margin-top: 14px; }
.cr-open .lede a { color: var(--rust-ink); font-weight: 600; }
.cr-jobs { list-style: none; margin: 0; padding: 0; }
.cr-jobs a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--rule); color: var(--ink); }
.cr-jobs b { display: block; font: 700 21px var(--display); }
.cr-jobs small { color: var(--ink-2); font-size: 14.5px; }
.cr-jobs svg { width: 22px; height: 22px; color: var(--rust); transition: transform .2s; }
.cr-jobs a:hover svg { transform: translateX(4px); }
.cr-none { background: #fff; border-radius: 22px 60px 22px 22px; padding: clamp(26px, 3vw, 40px); }
.cr-none b { display: block; font: 700 22px var(--display); margin-bottom: 8px; }
.cr-none p { color: var(--ink-2); line-height: 1.65; margin-bottom: 22px; }
@media (max-width: 1000px) { .cr-tabs { grid-template-columns: minmax(0, 1fr); } .cr-tablist { flex-direction: row; overflow-x: auto; padding: 10px; } .cr-tablist button { flex: none; } .cr-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-open-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .cr-panel { grid-template-columns: minmax(0, 1fr); } .cr-panel-ph { aspect-ratio: 16/9; order: -1; } .cr-panel { border-radius: 18px 44px 18px 18px; } }
@media (max-width: 520px) { .cr-vgrid { grid-template-columns: minmax(0, 1fr); } }
.cr-vi svg { fill: none; stroke: currentColor; }
/* Careers: our culture strip */
.cu-sec { background: linear-gradient(180deg, var(--white), var(--sheet)); padding: var(--space) 0; overflow: hidden; }
.cu-head { text-align: center; max-width: 820px; }
.cu-head .lede { margin: 14px auto 0; max-width: 64ch; }
.cu-marquee { margin-top: clamp(36px, 4vw, 56px); }
.cu-track { display: flex; align-items: flex-start; gap: 16px; width: max-content; animation: cu-scroll 60s linear infinite; padding-bottom: 64px; }
.cu-marquee:hover .cu-track { animation-play-state: paused; }
.cu-ph { flex: none; margin: 0; width: clamp(240px, 26vw, 400px); aspect-ratio: 4/3.4; border-radius: 22px; overflow: hidden; background: var(--sheet-2); }
.cu-ph.low { margin-top: 64px; }
.cu-ph:nth-child(3n) { border-radius: 22px 70px 22px 22px; }
.cu-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cu-ph:hover img { transform: scale(1.04); }
@keyframes cu-scroll { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .cu-track { animation: none; } .cu-marquee { overflow-x: auto; } }
@media (max-width: 560px) { .cu-ph.low { margin-top: 36px; } .cu-track { padding-bottom: 36px; } }
.cr-jobs li:first-child a { padding-top: 6px; }
.cr-jobs li:last-child a { border-bottom: 0; }
.cr-jobs b { font-size: clamp(18px, 1.6vw, 21px); margin-bottom: 4px; }
.cr-jobs a:hover b { color: var(--rust-ink); }
/* Careers: benefits */
.cr-ben-head { max-width: 900px; }
.cr-ben-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin: 22px 0 clamp(32px, 4vw, 52px); color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.cr-ben .ab-do-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.cr-ben .sa-list { border-top: 1px solid var(--rule); align-self: center; }
.cr-ben-list { list-style: none; margin: 0; padding: 0; }
.cr-ben-list li { position: relative; padding: 3px 0 3px 18px; font-size: 15px; color: var(--ink); }
.cr-ben-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--rust); }
.cr-ben .sa-dx p { margin-bottom: 8px; }
@media (max-width: 900px) { .cr-ben-intro { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cr-ben .ab-do-grid { grid-template-columns: minmax(0, 1fr); } }
.cr-vals + .cr-open { background: var(--white); padding-top: 0; }
.tm-head .filters { margin-bottom: 0; }
.tm-share .tm-gi { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; } .tm-share .tm-gi svg { width: 15px; height: 15px; }
/* Careers: who we're looking for (intro + tabs) */
.cr-imp-sec { background: var(--white); }
.cr-imp { margin-bottom: clamp(36px, 4vw, 56px); }
.cr-imp-p { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: 22px; }
.cr-imp-p p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--ink-2); }
.cr-imp-p em { font-style: normal; font-weight: 700; color: var(--rust-ink); }
.cr-it { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.cr-it-list { display: flex; flex-direction: column; gap: 4px; background: var(--rust); border-radius: 22px; padding: 30px 0; }
.cr-it-list button { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 14px 30px; border: 0; background: none; text-align: left; cursor: pointer; color: rgba(255,255,255,.6); transition: color .2s; }
.cr-it-list button span { flex: none; font: 700 12px var(--mono); }
.cr-it-list button b { font: 600 clamp(19px, 1.7vw, 23px)/1.2 var(--display); letter-spacing: -.02em; }
.cr-it-list button:hover { color: #fff; }
.cr-it-list button[aria-selected=true] { color: #fff; }
.cr-it-list button[aria-selected=true] b { font-weight: 700; }
.cr-it-list button[aria-selected=true]::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 2px; background: #fff; }
.cr-it-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); gap: clamp(24px, 3vw, 48px); align-items: center; animation: tm-in .35s var(--ease); }
.cr-it-panel[hidden] { display: none; }
.cr-it-copy h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 14px; }
.cr-it-copy p { color: var(--ink-2); line-height: 1.65; margin-bottom: 18px; }
.cr-it-copy ul { list-style: none; margin: 0 0 20px; padding: 0; }
.cr-it-copy li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 15px; line-height: 1.5; }
.cr-it-copy li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: var(--rust); }
.cr-it-ph { margin: 0; aspect-ratio: 4/3.1; border-radius: 22px 70px 22px 22px; overflow: hidden; }
.cr-it-ph img { width: 100%; height: 100%; object-fit: cover; }
.cr-imp-sec + .cr-ben { padding-top: var(--space); }
@media (max-width: 1100px) { .cr-it { grid-template-columns: minmax(0, 1fr); } .cr-it-list { flex-direction: row; overflow-x: auto; padding: 8px; border-radius: 18px; } .cr-it-list button { flex: none; padding: 12px 18px; border-radius: 12px; } .cr-it-list button[aria-selected=true] { background: rgba(255,255,255,.16); } .cr-it-list button[aria-selected=true]::before { display: none; } }
@media (max-width: 760px) { .cr-imp-p { grid-template-columns: minmax(0, 1fr); gap: 12px; } .cr-it-panel { grid-template-columns: minmax(0, 1fr); } .cr-it-ph { order: -1; aspect-ratio: 16/10; border-radius: 18px 50px 18px 18px; } }
/* Careers: learning */
.cr-learn { background: var(--white); padding: 0 0 var(--space); }
.cr-learn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.cr-learn .lede { margin-top: 16px; }
.cr-learn-ph { margin: 0; aspect-ratio: 4/3.4; border-radius: 22px 80px 22px 22px; overflow: hidden; }
.cr-learn-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 900px) { .cr-learn-grid { grid-template-columns: minmax(0, 1fr); } .cr-learn-ph { border-radius: 18px 50px 18px 18px; } }
.ms-sec + .cr-learn { padding-top: var(--space); }
.cr-learn + .cu-sec { padding-top: 0; }
.cu-track { padding-bottom: 0; }
.cu-sec { padding-bottom: clamp(56px, 6vw, 80px); background: var(--white); }
.cr-vals-head .lede { margin-left: auto; margin-right: auto; max-width: 60ch; text-wrap: balance; }
/* Investors */
.inv-talk { padding-top: var(--space); }
.inv-talk .btn-dark svg, .inv-talk .link-u svg { width: 16px; height: 16px; fill: currentColor; }
.inv-note { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); max-width: 90ch; }
.builds + .inv-talk { padding-top: 0; }
/* Partners & Suppliers */
.ps-intro { background: var(--sheet); padding: var(--space) 0; }
.ps-intro-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ps-intro-p { border-left: 2px solid var(--rust); padding-left: clamp(20px, 3vw, 40px); }
.ps-intro-p p { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.ps-intro-p p + p { margin-top: 12px; }
.ps-dir { background: var(--white); padding: var(--space) 0; }
.ps-cat + .ps-cat { margin-top: clamp(44px, 5vw, 64px); }
.ps-cat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--ink); }
.ps-cat-h h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.02em; }
.ps-cat-h span { font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.ps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ps-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 22px; border: 1px solid var(--rule); border-radius: 20px; background: #fff; color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s; }
a.ps-card:hover { border-color: var(--rust); transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(var(--shade),.6); }
.ps-logo { display: grid; place-items: center; width: 100%; aspect-ratio: 16/9; border-radius: 14px; background: var(--sheet); padding: 18px; }
.ps-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ps-logo b { font: 700 18px var(--display); }
.ps-name { font: 600 15.5px var(--body); }
.ps-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 16px; border-radius: 999px; background: var(--night); color: #fff; font: 600 13.5px var(--body); transition: background .2s; }
.ps-go svg { width: 12px; height: 12px; fill: currentColor; }
a.ps-card:hover .ps-go, .ps-go:hover { background: var(--rust); }
.ps-empty { border-style: dashed; }
.ps-empty .ps-logo { background-color: var(--sheet); background-image: linear-gradient(rgba(181,83,42,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(181,83,42,.08) 1px, transparent 1px); background-size: 14px 14px; }
.ps-empty .ps-logo svg { width: 46px; height: 46px; color: rgba(181,83,42,.4); }
.ps-empty .ps-name { color: var(--ink-2); }
@media (max-width: 1000px) { .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ps-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 460px) { .ps-grid { grid-template-columns: minmax(0, 1fr); } }
.ps-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ps-tile { position: relative; padding: 26px; border-radius: 20px; background: var(--sheet); transition: transform .25s, box-shadow .25s; }
.ps-tile:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(var(--shade),.6); }
.ps-tn { position: absolute; top: 26px; right: 26px; font: 700 12px var(--mono); color: var(--ink-2); }
.ps-ti { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--rust); margin-bottom: 22px; }
.ps-ti svg { width: 28px; height: 28px; }
.ps-tile h4 { font: 700 20px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 6px; }
.ps-tile p { color: var(--ink-2); font-size: 15px; margin-bottom: 16px; }
.ps-tile a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--rust-ink); }
.ps-tile a svg { width: 12px; height: 12px; fill: currentColor; }
@media (max-width: 1000px) { .ps-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ps-soon { grid-template-columns: minmax(0, 1fr); } }
/* Partners: audience cards + alt directory */
.ps-aud { background: var(--white); padding: var(--space) 0; }
.ps-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps-aud-card { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); border-radius: 22px 70px 22px 22px; overflow: hidden; background: var(--sheet); color: var(--ink); transition: transform .25s, box-shadow .25s; }
.ps-aud-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(var(--shade),.7); }
.ps-aud-card img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.ps-aud-card > div { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; }
.ps-aud-k { font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.ps-aud-card h3 { margin: 10px 0 10px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.ps-aud-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.ps-aud-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rust-ink); }
.ps-aud-go svg { width: 13px; height: 13px; fill: currentColor; transition: transform .2s; }
.ps-aud-card:hover .ps-aud-go svg { transform: translateX(4px); }
.ps-aud-card.dark { background: var(--night); color: #fff; }
.ps-aud-card.dark h3 { color: #fff; }
.ps-aud-card.dark p { color: rgba(255,255,255,.75); }
.ps-aud-card.dark .ps-aud-k, .ps-aud-card.dark .ps-aud-go { color: var(--peach); }
.ps-dir-alt { background: var(--sheet); }
.ps-dir-alt .ps-tile { background: #fff; }
.ps-dir-alt .ps-ti { background: var(--sheet); }
.ps-dir-alt .ps-cat-h { display: none; }
#join { background: var(--sheet); }
@media (max-width: 1100px) { .ps-aud-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ps-aud-card { grid-template-columns: minmax(0, 1fr); border-radius: 18px 50px 18px 18px; } .ps-aud-card img { min-height: 0; aspect-ratio: 16/9; } }
/* Partners & Suppliers v3 */
.pp-partners, .pp-brands, .pp-proj, .pp-qual, .pp-faq { background: var(--white); }
.pp-partners, .pp-sup, .pp-proj, .pp-qual { padding: var(--space) 0; }
.pp-pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.pp-pcol h3 { font: 700 15px/1.3 var(--display); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ink); min-height: 50px; }
.pp-logo { display: grid; place-items: center; aspect-ratio: 16/10; border: 1px solid var(--rule); border-radius: 16px; background: #fff; padding: 16px; margin-bottom: 12px; color: var(--ink); }
.pp-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pp-ph { border-style: dashed; background-color: var(--sheet); background-image: linear-gradient(rgba(181,83,42,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(181,83,42,.07) 1px, transparent 1px); background-size: 14px 14px; gap: 6px; align-content: center; }
.pp-ph svg { width: 30px; height: 30px; color: rgba(181,83,42,.4); }
.pp-ph small { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pp-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.pp-sup { background: var(--sheet); }
.pp-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-scard { background: #fff; border-radius: 20px; overflow: hidden; }
.pp-scard figure { position: relative; margin: 0; aspect-ratio: 16/9; overflow: hidden; }
.pp-scard figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pp-scard:hover figure img { transform: scale(1.04); }
.pp-sn { position: absolute; left: 14px; top: 14px; background: rgba(29,27,24,.8); color: var(--peach); padding: 6px 10px; border-radius: 999px; font: 700 11.5px var(--mono); }
.pp-scard > div { padding: 20px 22px 22px; }
.pp-scard h3 { font-size: 19px; margin-bottom: 10px; }
.pp-soon { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--rule); font: 600 12.5px var(--body); color: var(--ink-2); }
.pp-slogos { display: flex; flex-wrap: wrap; gap: 8px; } .pp-slogos a { padding: 6px 12px; border-radius: 999px; background: var(--sheet); font-weight: 600; font-size: 13.5px; } .pp-slogos img { height: 24px; }
.pp-brands { padding: calc(var(--space) * .8) 0; }
.pp-bhead { text-align: center; margin-bottom: 28px; }
.pp-brow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.pp-brand { display: grid; place-items: center; aspect-ratio: 2/1; border-radius: 14px; border: 1px solid var(--rule); padding: 14px; }
.pp-brand img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.pp-brand:hover img { filter: none; opacity: 1; }
.pp-brands .pp-note { text-align: center; }
.pp-std { background: var(--sheet); }
.pp-std .cr-v { background: #fff; }
.pp-qual-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pp-qual-ph { margin: 0; aspect-ratio: 4/4.2; border-radius: 22px 90px 22px 22px; overflow: hidden; }
.pp-qual-ph img { width: 100%; height: 100%; object-fit: cover; }
.pp-qlist { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.pp-qlist li { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.pp-qlist h3 { font-size: 20px; margin-bottom: 4px; } .pp-qlist p { color: var(--ink-2); line-height: 1.6; }
.pp-anchor { display: block; position: relative; top: -90px; }
.pp-faq { padding-top: calc(var(--space) * .4); }
@media (max-width: 1100px) { .pp-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-brow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pp-qual-grid { grid-template-columns: minmax(0, 1fr); } .pp-qual-ph { aspect-ratio: 16/11; border-radius: 18px 50px 18px 18px; } }
@media (max-width: 560px) { .pp-pgrid, .pp-brow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-sgrid { grid-template-columns: minmax(0, 1fr); } .pp-pcol h3 { min-height: 0; } }
.pp-std { background: var(--white); } .pp-std .cr-v { background: var(--sheet); }
.pp-qual { background: var(--sheet); }
.pp-slg { gap: 20px; }
.pp-sl .pp-logo { margin-bottom: 12px; aspect-ratio: 16/8; background-color: #fff; }
.pp-sup .pp-ph { background-color: #fff; }
.pp-slc { display: block; text-align: center; font: 600 15px var(--body); color: var(--ink); }
/* Partner + supplier logos match brand placeholder size */
.pp-pgrid, .pp-slg { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.pp-pgrid .pp-logo, .pp-sl .pp-logo { aspect-ratio: 2/1; border-radius: 14px; padding: 14px; margin-bottom: 0; }
.pp-sl .pp-logo { margin-bottom: 10px; }
.pp-pgrid .pp-ph, .pp-sl .pp-ph { border-style: solid; }
.pp-slc { font-size: 13.5px; line-height: 1.3; }
@media (max-width: 1100px) { .pp-pgrid, .pp-slg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pp-pgrid, .pp-slg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-slg .pp-logo { aspect-ratio: 2/1; border-radius: 14px; padding: 14px; margin-bottom: 0; background-color: #fff; border-style: solid; }

.pp-std { background: var(--sheet); } .pp-std .cr-v { background: #fff; }
.pp-qual { background: var(--white); }
.pp-qual .process-actions { margin-top: 28px; }
.pp-qual + .pp-anchor + .cta-wrap { padding-top: 0; }
/* Investors v2 */
.inv-why { background: var(--white); }
.inv-count { background: var(--sheet); }
.inv-appr .h2 em { color: var(--peach); }
.inv-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
.inv-tl::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: linear-gradient(90deg, var(--rust), var(--peach)); }
.inv-tl li { position: relative; }
.inv-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--rust); color: var(--rust-ink); font: 700 12.5px var(--mono); box-shadow: 0 0 0 6px #fff; margin-bottom: 20px; }
.inv-tl li:last-child .inv-dot { background: var(--rust); color: #fff; }
.inv-tl li > div { background: var(--sheet); border-radius: 18px; padding: 22px; height: calc(100% - 64px); }
.inv-tl h3 { font-size: 19px; margin-bottom: 8px; }
.inv-tl p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.inv-note { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.inv-who { background: var(--sheet); } .inv-who .cr-v { background: #fff; }
.cr-vgrid.inv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-trans { padding: var(--space) 0; }
.inv-faq { padding: var(--space) 0; }
.inv-faq + .inv-talk { padding-top: 0; }
@media (max-width: 1100px) { .inv-ogrid, .inv-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv-stages li:nth-child(2)::after { display: none; } .inv-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-vgrid.inv-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .inv-tl { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 64px; }
  .inv-tl::before { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--rust), var(--peach)); }
  .inv-dot { position: absolute; left: -64px; top: 14px; margin: 0; }
  .inv-tl li > div { height: auto; }
}
@media (max-width: 600px) { .inv-ogrid, .inv-stages { grid-template-columns: minmax(0, 1fr); } .inv-stages li::after { display: none; } .inv-pgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; } .inv-pc:nth-child(n) { grid-row: auto; grid-column: auto; } .inv-pcap p { max-height: 60px; opacity: 1; } }
@media (max-width: 1100px) { .inv-pc:nth-child(n) { grid-row: auto; grid-column: auto; } .inv-pc:nth-child(1) { grid-column: span 2; } }
@media (max-width: 600px) { .inv-pc:nth-child(1) { grid-column: auto; } }
.inv-faq + .pp-anchor + .cta-wrap { padding-top: 0; }
.inv-disc { padding-bottom: clamp(32px, 4vw, 48px); }
.inv-disc .inv-note { margin-top: 18px; }
.cta-wrap:has(+ .inv-disc) { padding-bottom: 0; }
/* Investors: facts strip + spacing fixes */
.inv-facts { background: var(--white); padding: clamp(40px, 5vw, 64px) 0; }
.inv-facts-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inv-facts-row > div { padding: 0 clamp(16px, 3vw, 40px); text-align: center; }
.inv-facts-row > div + div { border-left: 1px solid var(--rule); }
.inv-facts-row b { display: block; font: 800 clamp(34px, 4vw, 54px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.inv-facts-row sup { font-size: .45em; color: var(--rust); vertical-align: top; margin-left: 2px; }
.inv-facts-row span { display: block; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.inv-proc { background: var(--white); padding: var(--space) 0; }
.inv-builds + .inv-faq { padding-top: 0; }
@media (max-width: 700px) { .inv-facts-row { grid-template-columns: minmax(0, 1fr); gap: 24px; } .inv-facts-row > div + div { border-left: 0; border-top: 1px solid var(--rule); padding-top: 24px; } }
.inv-count { background: var(--white); } .inv-facts + .inv-count { padding-top: clamp(16px, 2vw, 24px); }
/* Investors facts v3: peach band */
.inv-facts2 { background: var(--peach); padding: clamp(40px, 5vw, 64px) 0; }
.inv-f2 { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.inv-f2-intro { padding-right: clamp(20px, 3vw, 40px); align-self: center; }
.inv-f2-intro .label { color: var(--rust-ink); }
.inv-f2-intro p { margin-top: 12px; font: 600 clamp(19px, 1.7vw, 24px)/1.3 var(--display); letter-spacing: -.02em; color: var(--night); }
.inv-f2-item { position: relative; padding: 4px clamp(18px, 2.5vw, 36px); border-left: 1px solid rgba(29,27,24,.18); }
.inv-f2-n { font: 700 11.5px var(--mono); color: var(--rust-ink); }
.inv-f2-item b { display: block; margin: 14px 0 12px; font: 800 clamp(30px, 3vw, 46px)/1 var(--display); letter-spacing: -.04em; color: var(--night); white-space: nowrap; }
.inv-f2-item sup { font-size: .45em; color: var(--rust-ink); vertical-align: top; margin-left: 3px; }
.inv-f2-item h3 { font: 700 16px var(--display); color: var(--night); }
.inv-f2-item p { margin-top: 2px; font-size: 14px; color: rgba(29,27,24,.7); }
.inv-facts2 + .inv-count { padding-top: var(--space); }
@media (max-width: 1100px) { .inv-f2 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .inv-f2-intro { grid-column: 1 / -1; padding: 0; } .inv-f2-item:nth-child(2) { border-left: 0; padding-left: 0; } .inv-f2-item b { font-size: clamp(24px, 3.4vw, 36px); } }
@media (max-width: 640px) { .inv-f2 { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .inv-f2-intro { margin-bottom: 20px; } .inv-f2-item, .inv-f2-item:nth-child(2) { border-left: 0; border-top: 1px solid rgba(29,27,24,.18); padding: 18px 0; } }
.inv-f2-item b { font-size: clamp(26px, 2.5vw, 38px); }
.inv-f2-item { container-type: inline-size; } .inv-f2-item b { font-size: min(40px, 15cqi); }
.inv-count + .inv-proc { padding-top: 0; }
.inv-facts2 { background: var(--sheet); } .inv-facts2 .inv-f2-item { border-color: var(--rule); }
.inv-proc + .inv-builds { padding-top: 0; }
/* Investors polish */
.inv-faq { background: var(--sheet); padding-top: var(--space) !important; }
.inv-faq + .pp-anchor + .cta-wrap { padding-top: var(--space); }
.inv-tl li:last-child > div { background: var(--peach); }
.inv-tl li:last-child p { color: rgba(29,27,24,.78); }
.inv-who { background: var(--white); } .inv-who .cr-v { background: var(--sheet); }
.inv-who + .inv-proc { padding-top: 0; }
.inv-faq { background: var(--white); padding-top: 0 !important; } .inv-faq + .pp-anchor + .cta-wrap { padding-top: 0; }
.inv-count + .inv-who { padding-top: 0; }
.ld-founder .ld-stats { row-gap: 4px; } .ld-founder .ld-stat { padding: 8px 22px; }


/* About: mission / vision / impact tabs */
.ab-tabs { background: var(--sheet); padding: var(--space) 0; }
.ab-tabs-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.ab-tabs + .ab-do { background: var(--white); }
.ab-tabs .cr-it-ph { aspect-ratio: 4/3.2; }
/* Solutions: spacing fixes */
.ms-sec + .voices { margin-top: 0; }
.ms-sec:has(+ .voices) { padding-bottom: clamp(40px, 4vw, 56px); }
.faq + .os-sec, .tools-sec + .os-sec { padding-top: 0; }
.ms-sec + .voices { padding-top: clamp(40px, 4vw, 56px); } .faq + .os-sec { padding-top: 28px; }
/* Planning tools v2 */
.pt2-kit { background: var(--white); padding: var(--space) 0; }
.pt2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pt2-card { display: flex; flex-direction: column; border-radius: 22px; background: var(--sheet); overflow: hidden; transition: transform .25s, box-shadow .25s; }
.pt2-card:first-child { border-radius: 22px 70px 22px 22px; }
.pt2-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(var(--shade),.7); }
.pt2-doc { position: relative; margin: 26px 26px 0; padding: 22px 22px 0; height: 210px; overflow: hidden; background: #fff; border-radius: 12px 12px 0 0; box-shadow: 0 18px 30px -24px rgba(var(--shade),.6); }
.pt2-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, #fff); }
.pt2-doc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sheet); color: var(--rust); margin-bottom: 12px; }
.pt2-doc-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.pt2-doc b { display: block; font: 700 14px var(--display); margin-bottom: 10px; }
.pt2-doc ul { list-style: none; margin: 0; padding: 0; }
.pt2-doc li { position: relative; padding: 6px 0 6px 20px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-2); }
.pt2-doc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border: 1.5px solid var(--rust); border-radius: 3px; }
.pt2-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--rule); }
.pt2-meta { font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rust-ink); }
.pt2-body h3 { margin: 10px 0 8px; font-size: 22px; letter-spacing: -.02em; }
.pt2-body p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.pt2-body .btn { margin-top: auto; align-self: flex-start; }
.pt2-print { display: none; }
.pt2-how { background: var(--sheet); padding: var(--space) 0; }
.pt2-how .inv-dot { background: var(--sheet); box-shadow: 0 0 0 6px var(--sheet); }
.pt2-how .inv-tl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt2-how .inv-tl li > div { background: #fff; }
.pt2-how .inv-tl li:last-child > div { background: var(--peach); }
.pt2-how .inv-tl li:last-child p { color: rgba(29,27,24,.78); }
.pt2-ben { background: var(--white); }
.pt2-rgrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pt2-rside { position: sticky; top: 120px; }
.pt2-rside .h2 { color: #fff; } .pt2-rside .h2 em { color: var(--peach); }
.pt2-rside > p { margin-top: 14px; color: rgba(255,255,255,.75); line-height: 1.65; }
.pt2-score { margin-top: 30px; padding: 26px; border-radius: 22px 60px 22px 22px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; }
.pt2-score b { font: 800 clamp(56px, 6vw, 80px)/1 var(--display); letter-spacing: -.05em; color: var(--peach); }
.pt2-score > span:not(.pt2-bar) { color: rgba(255,255,255,.75); font-size: 16px; }
.pt2-bar { grid-column: 1 / -1; display: block; height: 8px; margin: 18px 0 14px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.pt2-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rust), var(--peach)); transition: width .4s var(--ease); }
.pt2-score p { grid-column: 1 / -1; color: #fff; font-weight: 600; }
.pt2-rlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.pt2-rlist li { border-bottom: 1px solid rgba(255,255,255,.14); }
.pt2-rlist label { display: flex; align-items: center; gap: 16px; padding: 18px 4px; cursor: pointer; color: #fff; font-size: 16.5px; transition: background .2s; }
.pt2-rlist label:hover { background: rgba(255,255,255,.04); }
.pt2-rlist input { position: absolute; opacity: 0; pointer-events: none; }
.pt2-chk { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid rgba(240,176,141,.6); transition: background .2s, border-color .2s; }
.pt2-chk svg { width: 16px; height: 16px; fill: var(--night); opacity: 0; transition: opacity .2s; }
.pt2-rlist input:checked + .pt2-chk { background: var(--peach); border-color: var(--peach); }
.pt2-rlist input:checked + .pt2-chk svg { opacity: 1; }
.pt2-rlist input:focus-visible + .pt2-chk { outline: 2px solid var(--peach); outline-offset: 3px; }
.pt2-rlist small { display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); margin-bottom: 4px; }
.pt2-next { background: var(--sheet); padding: var(--space) 0; }
.pt2-ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pt2-n { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.pt2-n:nth-child(2) { border-radius: 22px 70px 22px 22px; }
.pt2-n:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(var(--shade),.7); }
.pt2-n figure { position: relative; margin: 0; aspect-ratio: 16/10; overflow: hidden; }
.pt2-n figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pt2-n figure span { position: absolute; left: 14px; top: 14px; background: var(--rust); color: #fff; padding: 6px 10px; border-radius: 999px; font: 700 12px var(--mono); }
.pt2-n > div { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.pt2-n h3 { font-size: 21px; margin-bottom: 8px; }
.pt2-n p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
.pt2-ngo { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--rust-ink); }
.pt2-ngo svg { width: 13px; height: 13px; fill: currentColor; }
.pt2-next + .faq { padding-top: var(--space); }
@media (max-width: 1000px) { .pt2-cards, .pt2-ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt2-rgrid { grid-template-columns: minmax(0, 1fr); } .pt2-rside { position: static; } }
@media (max-width: 900px) { .pt2-how .inv-tl { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .pt2-cards, .pt2-ngrid { grid-template-columns: minmax(0, 1fr); } }
@media print {
  body[data-print] > *:not(.pt2-print) { display: none !important; }
  body[data-print] .pt2-print { display: block !important; }
  body[data-print] .pt2-sheet { display: none; }
  body[data-print="0"] .pt2-sheet[data-sheet="0"], body[data-print="1"] .pt2-sheet[data-sheet="1"], body[data-print="2"] .pt2-sheet[data-sheet="2"] { display: block; }
  .pt2-sheet { font-family: Arial, sans-serif; color: #000; padding: 24px; }
  .pt2-brand { font-size: 11px; color: #555; margin-bottom: 18px; }
  .pt2-sheet h2 { font-size: 24px; margin-bottom: 18px; }
  .pt2-sheet ul { list-style: none; padding: 0; margin: 0; }
  .pt2-sheet li { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #ccc; font-size: 14px; }
  .pt2-box { flex: none; width: 14px; height: 14px; border: 1.5px solid #000; border-radius: 3px; }
  .pt2-notes { margin-top: 24px; padding-top: 8px; height: 140px; border-top: 1px solid #000; font-size: 12px; }
}
/* Design page additions */
.dz-shape { background: var(--sheet); padding: var(--space) 0; }
.dz-sgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.dz-s { display: flex; flex-direction: column; padding: 24px 22px; border-radius: 20px; background: #fff; transition: background .3s, transform .3s; }
.dz-s:first-child { border-radius: 20px 56px 20px 20px; }
.dz-s:hover { background: var(--peach); transform: translateY(-4px); }
.dz-stop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.dz-si { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--sheet); color: var(--rust); transition: background .3s, color .3s; }
.dz-si svg { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.dz-s:hover .dz-si { background: var(--night); color: var(--peach); }
.dz-sn { font: 700 12px var(--mono); color: var(--ink-2); }
.dz-s h3 { font-size: 19px; margin-bottom: 8px; }
.dz-s p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.dz-s:hover p { color: rgba(29,27,24,.8); }
.ms li p { max-width: 24ch; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); margin: -4px auto 0; }
.dz-poss { background: var(--white); padding: var(--space) 0; }
.dz-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 240px; gap: 14px; }
.dz-p { position: relative; border-radius: 20px; overflow: hidden; color: #fff; }
.dz-p:nth-child(1) { grid-column: span 2; grid-row: span 2; border-radius: 20px 80px 20px 20px; }
.dz-p:nth-child(4) { grid-column: span 2; }
.dz-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dz-p:hover img { transform: scale(1.05); }
.dz-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(29,27,24,.85)); }
.dz-pk { position: absolute; left: 16px; top: 16px; z-index: 1; background: rgba(29,27,24,.8); padding: 7px 12px; border-radius: 999px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.dz-pn { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font: 700 17px var(--display); }
.dz-pn svg { width: 13px; height: 13px; fill: currentColor; }
.dz-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.dz-poss + .roles-sec { padding-top: var(--space); }
@media (max-width: 1100px) { .dz-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dz-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dz-p:nth-child(n) { grid-column: auto; grid-row: auto; } .dz-p:nth-child(1) { grid-column: span 2; } }
@media (max-width: 640px) { .dz-sgrid { grid-template-columns: minmax(0, 1fr); } .dz-stop { margin-bottom: 20px; } .dz-pgrid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; } .dz-p:nth-child(1) { grid-column: auto; } .ms li p { margin: 4px 0 0; max-width: none; } }
@media (max-width: 900px) { .ms li { align-items: flex-start; } .ms li > b, .ms li > p { } }
@media (min-width: 1101px) { .dz-p:nth-child(5), .dz-p:nth-child(6) { grid-column: span 2; } }
@media (min-width: 641px) and (max-width: 1100px) { .dz-p:nth-child(6) { grid-column: span 2; } }
/* Pre-construction additions */
.pc-intro { background: var(--sheet); padding: var(--space) 0; }
.pc-i { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pc-i .lede { margin-top: 14px; }
.pc-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.pc-flow li { position: relative; padding: 20px 22px 20px 64px; border-radius: 18px; background: #fff; }
.pc-flow li::before { content: ""; position: absolute; left: 24px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--rust); background: #fff; }
.pc-flow li + li::after { content: ""; position: absolute; left: 32px; top: -12px; width: 2px; height: 12px; background: var(--rust); }
.pc-flow li.on { background: var(--night); color: #fff; border-radius: 18px 50px 18px 18px; }
.pc-flow li.on::before { background: var(--peach); border-color: var(--peach); }
.pc-flow span { display: block; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); margin-bottom: 4px; }
.pc-flow li.on span { color: var(--peach); }
.pc-flow b { font: 700 18px var(--display); }
.pc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pc-cat { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.pc-cat span { font: 700 11.5px var(--mono); color: var(--peach); }
.pc-cat b { font: 700 18px var(--display); color: #fff; }
.pc-cat small { font-size: 14px; color: rgba(255,255,255,.65); }
.pc-cat.hl { background: var(--peach); border-color: var(--peach); }
.pc-cat.hl span, .pc-cat.hl b { color: var(--night); } .pc-cat.hl small { color: rgba(29,27,24,.75); }
.pc-note { margin-top: 16px; font-size: 13.5px; color: rgba(255,255,255,.6); }
.pc-mat { background: var(--white); padding: var(--space) 0; }
.pc-m { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pc-m-ph { margin: 0; aspect-ratio: 4/4.2; border-radius: 22px 90px 22px 22px; overflow: hidden; }
.pc-m-ph img { width: 100%; height: 100%; object-fit: cover; }
.pc-m .lede { margin-top: 14px; }
.pc-perm { background: var(--sheet); padding: var(--space) 0; }
.pc-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pc-pcol { border-radius: 22px; padding: 28px 26px; background: #fff; }
.pc-pcol.us { background: var(--night); color: #fff; border-radius: 22px 70px 22px 22px; }
.pc-pcol.us h3 { color: #fff; } .pc-pcol.us .pt-k { color: var(--peach); }
.pc-pcol h3 { font-size: 22px; margin-bottom: 16px; }
.pc-pcol ul { list-style: none; margin: 0; padding: 0; }
.pc-pcol li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.pc-pcol.us li { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.88); }
.pc-pcol li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: var(--rust); }
.pc-pcol.us li svg { fill: var(--peach); }
.pc-pcol.third { background: transparent; border: 1.5px dashed var(--rule); }
.pc-tl { background: var(--white); padding: var(--space) 0; }
.inv-tl.pc-tl5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pc-tl + .roles-sec { padding-top: var(--space); }
@media (max-width: 1100px) { .pc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-pgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pc-i, .pc-m { grid-template-columns: minmax(0, 1fr); } .inv-tl.pc-tl5 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pc-cats { grid-template-columns: minmax(0, 1fr); } .pc-m-ph { border-radius: 18px 50px 18px 18px; aspect-ratio: 16/12; } }
/* Construction additions */
.cs-q { background: var(--sheet); padding: var(--space) 0; }
.cs-qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: q; }
.cs-qi { position: relative; padding: 26px 24px; border-radius: 20px; background: #fff; }
.cs-qi:first-child { background: var(--night); color: #fff; border-radius: 20px 60px 20px 20px; }
.cs-qk { display: block; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.cs-qi:first-child .cs-qk { color: var(--peach); }
.cs-qc { display: grid; place-items: center; width: 40px; height: 40px; margin: 26px 0 16px; border-radius: 50%; background: var(--sheet); }
.cs-qi:first-child .cs-qc { background: var(--peach); }
.cs-qc svg { width: 20px; height: 20px; fill: var(--rust); }
.cs-qi:first-child .cs-qc svg { fill: var(--night); }
.cs-qi h3 { font-size: 20px; margin-bottom: 6px; }
.cs-qi:first-child h3 { color: #fff; }
.cs-qi p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cs-qi:first-child p { color: rgba(255,255,255,.75); }
.cs-c { background: var(--white); padding: var(--space) 0; }
.cs-cg { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.cs-c-ph { position: relative; margin: 0; aspect-ratio: 4/4.6; border-radius: 22px 90px 22px 22px; overflow: hidden; }
.cs-c-ph img { width: 100%; height: 100%; object-fit: cover; }
.cs-c-ph figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 18px; border-radius: 14px; background: rgba(29,27,24,.85); color: rgba(255,255,255,.75); font-size: 13px; }
.cs-c-ph figcaption b { display: block; color: #fff; font: 700 17px var(--display); }
.cs-c .process-actions { margin-top: 26px; }
.cs-g { background: var(--sheet); padding: var(--space) 0; }
.cs-g .dz-p:nth-child(5), .cs-g .dz-p:nth-child(6) { }
.leave-sec + .cs-g { padding-top: var(--space); }
@media (max-width: 1100px) { .cs-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cs-cg { grid-template-columns: minmax(0, 1fr); } .cs-c-ph { max-width: 420px; aspect-ratio: 1; } }
@media (max-width: 560px) { .cs-qgrid { grid-template-columns: minmax(0, 1fr); } }
/* Delivery additions */
.dv-punch { background: var(--sheet); padding: var(--space) 0; }
.dv-punch .inv-dot { background: var(--sheet); box-shadow: 0 0 0 6px var(--sheet); }
.dv-punch .inv-tl li > div { background: #fff; }
.dv-insp { background: var(--white); padding: var(--space) 0; }
.dv-hg { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.dv-hg .h2 { color: #fff; } .dv-hg .h2 em { color: var(--peach); }
.dv-hg > div > p { margin-top: 14px; color: rgba(255,255,255,.75); line-height: 1.65; }
.dv-hlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.dv-hlist li { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.dv-hlist .pt2-chk { background: var(--peach); border-color: var(--peach); }
.dv-hlist .pt2-chk svg { opacity: 1; }
.dv-hlist b { display: block; font: 700 18px var(--display); color: #fff; }
.dv-hlist small { display: block; margin-top: 3px; font-size: 14.5px; color: rgba(255,255,255,.68); }
.dv-hand + .roles-sec { padding-top: var(--space); }
.dv-after { background: var(--white); padding: var(--space) 0; }
.dv-ag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(32px, 4vw, 56px); border-radius: 22px 90px 22px 22px; background: var(--peach); }
.dv-ag .h2 em { color: var(--rust-ink); }
.dv-ag .lede { color: rgba(29,27,24,.8); }
.dv-ag .process-actions { margin-top: 22px; }
.dv-ag .btn svg { width: 16px; height: 16px; fill: currentColor; }
.dv-after + .voices { margin-top: 0; }
@media (max-width: 900px) { .dv-hg, .dv-ag { grid-template-columns: minmax(0, 1fr); } .dv-ag { border-radius: 18px 50px 18px 18px; } }
/* Planning toolkit v3: paper sheets on dark */
.pt3-kit .sa-bh .h2 { color: #fff; } .pt3-kit .sa-bh .h2 em { color: var(--peach); }
.pt3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.pt3-item { display: flex; flex-direction: column; }
.pt3-sheet { position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; aspect-ratio: 8.5/9.4; padding: 34px 28px 0; border: 0; border-radius: 6px 6px 6px 40px; background: #fbf8f3; color: var(--ink); cursor: pointer; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.04); transform: rotate(-2deg); transition: transform .45s var(--ease), box-shadow .45s; }
.pt3-item:nth-child(2) .pt3-sheet { transform: rotate(1.5deg); }
.pt3-item:nth-child(3) .pt3-sheet { transform: rotate(-1deg); }
.pt3-item:hover .pt3-sheet, .pt3-sheet:focus-visible { transform: rotate(0) translateY(-10px); box-shadow: 0 50px 80px -34px rgba(0,0,0,.9), 0 0 0 2px var(--peach); outline: none; }
.pt3-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(transparent, #fbf8f3 75%); pointer-events: none; }
.pt3-tab { position: absolute; top: 0; right: 26px; padding: 14px 10px 10px; border-radius: 0 0 10px 10px; background: var(--rust); color: #fff; font: 700 12px var(--mono); }
.pt3-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--ink); font: 700 12px var(--display); }
.pt3-head small { display: block; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pt3-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--peach); color: var(--night); }
.pt3-mark svg { width: 18px; height: 18px; }
.pt3-title { font: 800 clamp(19px, 1.7vw, 23px)/1.15 var(--display); letter-spacing: -.02em; margin-bottom: 16px; }
.pt3-lines { display: grid; }
.pt3-lines span { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed rgba(29,27,24,.15); font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.pt3-lines i { flex: none; width: 12px; height: 12px; margin-top: 2px; border: 1.5px solid var(--rust); border-radius: 3px; }
.pt3-hover { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--night); color: #fff; font: 600 13.5px var(--body); opacity: 0; transition: opacity .3s, transform .3s; }
.pt3-hover svg { width: 13px; height: 13px; fill: currentColor; transform: rotate(90deg); }
.pt3-item:hover .pt3-hover, .pt3-sheet:focus-visible .pt3-hover { opacity: 1; transform: translate(-50%, 0); }
.pt3-body { padding: 30px 4px 0; display: flex; flex-direction: column; flex: 1; }
.pt3-meta { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--peach); }
.pt3-body h3 { margin: 10px 0 8px; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.pt3-body p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.pt3-dl { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: none; color: #fff; font: 600 14.5px var(--body); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.pt3-dl .circ { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--peach); color: var(--night); }
.pt3-dl .circ svg { width: 14px; height: 14px; fill: currentColor; transform: rotate(90deg); }
.pt3-dl:hover { background: var(--peach); border-color: var(--peach); color: var(--night); }
.pt3-dl:hover .circ { background: var(--night); color: var(--peach); }
@media (max-width: 1000px) { .pt3-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } .pt3-sheet { aspect-ratio: 8.5/7.6; } }
@media (prefers-reduced-motion: reduce) { .pt3-sheet, .pt3-item:nth-child(n) .pt3-sheet { transform: none; } }
/* Planning: how to use v2 */
.pt4-how { background: var(--sheet); padding: var(--space) 0; }
.pt4-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.pt4-head p { max-width: 40ch; color: var(--ink-2); line-height: 1.6; }
.pt4-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pt4-s { position: relative; overflow: visible; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); min-height: 320px; border-radius: 24px; background: #fff; transition: transform .3s var(--ease), box-shadow .3s; }
.pt4-s:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -38px rgba(var(--shade),.7); }
.pt4-s:last-child { background: var(--night); color: #fff; border-radius: 24px 80px 24px 24px; }
.pt4-n { position: absolute; right: 22px; top: 6px; font: 800 clamp(90px, 9vw, 130px)/1 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(181,83,42,.22); pointer-events: none; }
.pt4-s:last-child .pt4-n { -webkit-text-stroke-color: rgba(240,176,141,.28); }
.pt4-ic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--peach); color: var(--night); }
.pt4-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; }
.pt4-k { margin-top: auto; padding-top: 48px; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.pt4-s:last-child .pt4-k { color: var(--peach); }
.pt4-s h3 { margin: 8px 0 8px; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.pt4-s:last-child h3 { color: #fff; }
.pt4-s p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.pt4-s:last-child p { color: rgba(255,255,255,.75); }
.pt4-arrow { position: absolute; z-index: 2; right: -27px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rust); color: #fff; box-shadow: 0 0 0 6px var(--sheet); }
.pt4-arrow svg { width: 13px; height: 13px; fill: currentColor; }
.pt4-go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--peach); }
.pt4-go svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 900px) { .pt4-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; } .pt4-s { min-height: 0; } .pt4-k { padding-top: 26px; } .pt4-arrow { right: auto; left: 50%; top: auto; bottom: -29px; transform: translateX(-50%) rotate(90deg); } }
.pt4-how + .pt2-next { background: var(--white); } .pt4-how + .pt2-next .pt2-n { background: var(--sheet); }
.pt2-next + .pt2-ben { background: var(--sheet); } .pt2-next + .pt2-ben .cr-v { background: #fff; }
/* Planning toolkit on white */
.pt3-kit { background: var(--white); color: var(--ink); }
.pt3-kit::before, .pt3-kit::after { display: none; }
.pt3-kit .sa-bh .h2 { color: var(--ink); } .pt3-kit .sa-bh .h2 em { color: var(--rust-ink); }
.pt3-kit .sa-bh p { color: var(--ink-2); }
.pt3-kit .label { color: var(--rust-ink); }
.pt3-sheet { background: #fff; box-shadow: 0 30px 60px -32px rgba(var(--shade),.55), 0 0 0 1px var(--rule); }
.pt3-sheet::after { background: linear-gradient(transparent, #fff 75%); }
.pt3-item:hover .pt3-sheet, .pt3-sheet:focus-visible { box-shadow: 0 46px 80px -36px rgba(var(--shade),.7), 0 0 0 2px var(--rust); }
.pt3-meta { color: var(--rust-ink); }
.pt3-body h3 { color: var(--ink); }
.pt3-body p { color: var(--ink-2); }
.pt3-dl { color: var(--ink); border-color: var(--rule); }
.pt3-dl .circ { background: var(--rust); color: #fff; }
.pt3-dl:hover { background: var(--night); border-color: var(--night); color: #fff; }
.pt3-dl:hover .circ { background: var(--peach); color: var(--night); }
/* Who does what v2 */
.wd-roles .wr-head { text-align: center; max-width: 680px; margin: 0 auto clamp(36px, 4vw, 56px); }
.wd-roles .wr-head .lede { margin: 12px auto 0; }
.wr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: stretch; }
.wr-col { border-radius: 26px; padding: clamp(26px, 3vw, 40px); }
.wr-col.you { background: #fff; border-radius: 26px 26px 26px 80px; }
.wr-col.us { background: var(--night); color: #fff; border-radius: 26px 80px 26px 26px; position: relative; overflow: hidden; }
.wr-col.us::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, rgba(180,83,42,.35), transparent 60%); }
.wr-col > * { position: relative; }
.wr-who { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.wr-col.us .wr-who { border-color: rgba(255,255,255,.14); }
.wr-av { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--sheet); color: var(--rust); }
.wr-av svg { width: 26px; height: 26px; }
.wr-col.us .wr-av { background: var(--peach); color: var(--night); }
.wr-who small { display: block; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.wr-col.us .wr-who small { color: var(--peach); }
.wr-who b { font: 700 20px var(--display); letter-spacing: -.02em; }
.wr-col ol { list-style: none; margin: 0; padding: 0; }
.wr-col li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px dashed var(--rule); font-size: 16px; line-height: 1.5; }
.wr-col li:last-child { border-bottom: 0; }
.wr-col.us li { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.wr-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--rust); color: var(--rust-ink); font: 700 11.5px var(--mono); }
.wr-col.us .wr-n { background: var(--peach); border-color: var(--peach); }
.wr-col.us .wr-n svg { width: 15px; height: 15px; fill: var(--night); }
.wr-spine { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wr-line { position: absolute; top: 40px; bottom: 40px; left: 50%; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--rust) 0 6px, transparent 6px 12px); opacity: .5; }
.wr-badge { position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rust); color: #fff; box-shadow: 0 0 0 8px var(--sheet); }
.wr-badge svg { width: 32px; height: 32px; }
.wr-tag { position: relative; z-index: 1; margin-top: 16px; padding: 6px 10px; border-radius: 999px; background: var(--sheet); font: 700 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rust-ink); }
@media (max-width: 900px) { .wr-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .wr-spine { flex-direction: row; gap: 12px; padding: 18px 0; } .wr-line { display: none; } .wr-tag { margin-top: 0; } .wr-col.you { border-radius: 22px 22px 22px 50px; } .wr-col.us { border-radius: 22px 50px 22px 22px; } }
/* Pre-con budget v2: estimate document */
.pcb { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.pcb-side .h2 { color: #fff; } .pcb-side .h2 em { color: var(--peach); }
.pcb-side > p { margin-top: 14px; color: rgba(255,255,255,.75); line-height: 1.65; }
.pcb-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.pcb-points li { display: flex; gap: 12px; align-items: center; color: #fff; font-size: 16px; }
.pcb-points svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--peach); fill: var(--night); }
.pcb-doc { position: relative; background: #fbf8f3; color: var(--ink); border-radius: 8px 8px 8px 48px; padding: clamp(24px, 3vw, 38px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.85); transform: rotate(1deg); transition: transform .5s var(--ease); }
.pcb-doc:hover { transform: rotate(0); }
.pcb-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 8px 8px 0 0; background: repeating-linear-gradient(90deg, var(--rust) 0 18px, var(--peach) 18px 36px); }
.pcb-top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.pcb-top b { display: block; font: 800 20px var(--display); letter-spacing: -.02em; }
.pcb-top small { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pcb-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--peach); color: var(--night); }
.pcb-mark svg { width: 22px; height: 22px; }
.pcb-stamp { margin-left: auto; padding: 6px 10px; border: 2px solid var(--rust); border-radius: 6px; color: var(--rust); font: 800 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-6deg); }
.pcb-rows { list-style: none; margin: 6px 0 0; padding: 0; }
.pcb-rows li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(29,27,24,.08); }
.pcb-n { flex: none; font: 700 11px var(--mono); color: var(--rust-ink); width: 20px; }
.pcb-t b { display: block; font: 700 15px var(--display); }
.pcb-t small { display: block; font-size: 12.5px; color: var(--ink-2); }
.pcb-dots { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(29,27,24,.2); transform: translateY(4px); }
.pcb-v { flex: none; font: 700 13px var(--mono); }
.pcb-v i { display: block; width: 56px; height: 8px; border-radius: 4px; background: rgba(29,27,24,.1); }
.pcb-rows li.hl { margin-top: 6px; padding: 12px 12px; border-radius: 10px; background: var(--peach); border: 0; }
.pcb-rows li.hl .pcb-dots { border-color: rgba(29,27,24,.3); }
.pcb-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ink); }
.pcb-foot > span:first-child { font: 800 16px var(--display); }
.pcb-foot b { font: 700 13px var(--body); color: var(--rust-ink); }
@media (max-width: 1000px) { .pcb { grid-template-columns: minmax(0, 1fr); } .pcb-doc { transform: none; } }
@media (max-width: 520px) { .pcb-stamp { display: none; } .pcb-v i { width: 32px; } .pcb-foot b { font-size: 12px; } }
/* Pre-con budget on light */
.pc-budget { background: var(--sheet); color: var(--ink); }
.pc-budget::before, .pc-budget::after { display: none; }
.pc-budget .label { color: var(--rust-ink); }
.pcb-side .h2 { color: var(--ink); } .pcb-side .h2 em { color: var(--rust-ink); }
.pcb-side > p { color: var(--ink-2); }
.pcb-points li { color: var(--ink); }
.pcb-points svg { background: var(--rust); fill: #fff; }
.pcb-doc { background: #fff; box-shadow: 0 40px 70px -42px rgba(var(--shade),.6), 0 0 0 1px var(--rule); }
/* Pre-con budget v3: house diagram */
.pc-hx { background: var(--sheet); }
.phx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 44px); }
.phx-head p { max-width: 46ch; color: var(--ink-2); line-height: 1.6; }
.phx-head .h2 { color: var(--ink); } .phx-head .h2 em { color: var(--rust-ink); }
.phx { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(20px, 3vw, 40px); align-items: stretch; }
.phx-list.sel { margin: 28px 0 0; }
.phx-left { align-self: center; }
.phx-left .h2 { margin-top: 10px; }
.phx-lede { margin: 16px 0 0; color: var(--ink-2); line-height: 1.6; max-width: 46ch; }
.phx-note { grid-column: 2; margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.phx-list .sel-t { font-size: 18px; }
.phx-list button { padding: 15px 2px; }
.phx-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--rust); box-shadow: inset 0 0 0 1px var(--rule); }
.phx-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phx-art { position: relative; display: flex; flex-direction: column; justify-content: center; border-radius: 24px 90px 24px 24px; background: #fff; padding: 28px; }
.hx { width: 100%; height: auto; }
.hg { fill: none; stroke: rgba(29,27,24,.22); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s, fill .3s, opacity .3s; }
.hg text { fill: rgba(29,27,24,.35); stroke: none; font: 700 13px var(--mono); }
.hg .fillsoft { fill: rgba(29,27,24,.05); }
.hg.on { stroke: var(--rust); stroke-width: 3.5; }
.hg.on rect, .hg.on path:not([stroke-dasharray]), .hg.on circle { fill: rgba(240,176,141,.35); }
.hg[data-g="1"].on path, .hg[data-g="3"].on path, .hg[data-g="6"].on path, .hg[data-g="7"].on path { fill: none; }
.hg[data-g="8"].on rect { fill: rgba(240,176,141,.12); }
.hg.on text { fill: var(--rust); }
.phx-cap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.phx-cn { font: 800 28px/1 var(--display); color: var(--rust); letter-spacing: -.04em; }
.phx-cap b { font: 700 20px var(--display); letter-spacing: -.02em; }
.phx-tag { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--sheet); font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rust-ink); }
.pc-hx .pc-note { color: var(--ink-2); }
@media (max-width: 1000px) { .phx { grid-template-columns: minmax(0, 1fr); } .phx-note { grid-column: auto; } .phx-art { border-radius: 20px 50px 20px 20px; } }
@media (max-width: 560px) { .phx-tag { margin-left: 0; } }
/* Pre-con permits v2: swimlanes */
.pc-lanes .phx-head .h2 { color: var(--ink); }
.pl { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0; align-items: stretch; }
.pl-lanes { display: grid; gap: 14px; position: relative; }
.pl-lane { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 18px; padding: 16px; border-radius: 22px; background: #fff; }
.pl-lane::after { content: ""; position: absolute; right: -40px; top: 50%; width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--rust) 0 6px, transparent 6px 11px); }
.pl-lane.us { background: var(--night); color: #fff; }
.pl-who { display: flex; align-items: center; gap: 12px; }
.pl-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sheet); color: var(--rust); }
.pl-ic svg { width: 24px; height: 24px; }
.pl-lane.us .pl-ic { background: var(--peach); color: var(--night); }
.pl-who small { display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.pl-lane.us .pl-who small { color: var(--peach); }
.pl-who b { font: 700 18px var(--display); letter-spacing: -.02em; }
.pl-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; position: relative; }
.pl-track li { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--sheet); font-size: 14px; line-height: 1.45; }
.pl-lane.us .pl-track li { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.pl-lane.third { background: transparent; border: 1.5px dashed var(--rule); }
.pl-lane.third .pl-track li { background: #fff; }
.pl-end { margin-left: 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 28px 24px; border-radius: 22px 70px 22px 22px; background: var(--rust); color: #fff; }
.pl-end-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; margin-bottom: 18px; }
.pl-end-ic svg { width: 24px; height: 24px; fill: var(--rust); }
.pl-end b { font: 800 24px/1.1 var(--display); letter-spacing: -.02em; }
.pl-end small { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.5; }
@media (max-width: 1100px) { .pl { grid-template-columns: minmax(0, 1fr); } .pl-lane::after { display: none; } .pl-end { margin: 14px 0 0; flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; } .pl-end-ic { margin: 0; } }
@media (max-width: 860px) { .pl-lane { grid-template-columns: minmax(0, 1fr); } .pl-track { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }
.pl-lane.you .pl-ic svg, .pl-lane.third .pl-ic svg { fill: none; stroke: currentColor; }
.phx-acts { margin-top: 28px; }
.dv-hand:has(+ .voices) { padding-bottom: clamp(40px, 4vw, 56px); }
.dv-hand + .voices { margin-top: 0; padding-top: clamp(40px, 4vw, 56px); }
/* Delivery punch list v3: interactive clipboard */
.pad-board { position: relative; max-width: 900px; margin: 8px auto 0; padding: 26px 16px 16px; border-radius: 26px; background: #c79a6b; background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.06) 0 3px, transparent 3px 11px), linear-gradient(160deg, #cfa477, #b88a5c); box-shadow: 0 40px 60px -40px rgba(60,35,15,.55); transform: rotate(-.6deg); }
.pad-clip { position: absolute; z-index: 3; left: 50%; top: -14px; width: 150px; height: 40px; margin-left: -75px; border-radius: 10px 10px 14px 14px; background: linear-gradient(#e9e6e1, #b9b4ac); box-shadow: 0 6px 10px -4px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.12); }
.pad-clip::before { content: ""; position: absolute; left: 50%; top: 9px; width: 34px; height: 12px; margin-left: -17px; border-radius: 6px; background: #8f8a82; box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.pad-pencil { position: absolute; z-index: 3; right: -54px; top: 38%; width: 250px; height: 25px; transform: rotate(-64deg); filter: drop-shadow(4px 6px 5px rgba(60,35,15,.35)); }
.pad-note { position: absolute; z-index: 3; right: 30px; top: 30px; width: 176px; padding: 16px 16px 20px; background: #f6c7a8; font: 700 13px/1.35 var(--mono); color: var(--ink); transform: rotate(4deg); box-shadow: 0 12px 16px -10px rgba(60,35,15,.45); }
.pad-note::before { content: ""; position: absolute; left: 50%; top: -9px; width: 60px; height: 18px; margin-left: -30px; background: rgba(255,255,255,.55); transform: rotate(-3deg); }
.pad-sheet { position: relative; padding: clamp(26px, 3.4vw, 44px) clamp(20px, 3.4vw, 48px) clamp(22px, 3vw, 36px) clamp(56px, 7vw, 92px); border-radius: 10px; background: #fff; background-image: linear-gradient(90deg, transparent calc(clamp(40px, 5vw, 66px) - 1px), rgba(180,83,42,.45) calc(clamp(40px, 5vw, 66px) - 1px) clamp(40px, 5vw, 66px), transparent clamp(40px, 5vw, 66px)); overflow: hidden; }
.pad-holes { position: absolute; left: clamp(12px, 1.6vw, 22px); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; }
.pad-holes i { width: 16px; height: 16px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 2px 3px rgba(60,35,15,.3); }
.pad-top { padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.pad-title { font: 800 clamp(28px, 3vw, 38px)/1 var(--display); letter-spacing: -.03em; }
.pad-rows { list-style: none; margin: 0; padding: 0; }
.pad-rows li { display: grid; grid-template-columns: 30px 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px 0; border-bottom: 1px solid #cfe0ea; }
.pad-box { width: 28px; height: 28px; padding: 0; border-radius: 7px; border: 2px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .25s, border-color .25s, transform .15s; }
.pad-box:hover { transform: scale(1.08); }
.pad-box:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.pad-box svg { width: 16px; height: 16px; fill: #fff; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pad-rows li.done .pad-box { background: var(--rust); border-color: var(--rust); }
.pad-rows li.done .pad-box svg { transform: none; }
.pad-rows li > div { transition: opacity .3s; }
.pad-rows li:not(.done) > div { opacity: .55; }
.pad-n { font: 700 12px/28px var(--mono); color: var(--ink-2); }
.pad-rows b { font: 700 19px/1.2 var(--display); letter-spacing: -.02em; }
.pad-rows p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.pad-foot { position: relative; display: flex; align-items: center; gap: 10px; padding-top: 18px; min-height: 64px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pad-count { position: relative; display: grid; place-items: center; width: 64px; height: 48px; }
.pad-count b { font: 800 32px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.pad-count svg { position: absolute; inset: -4px -6px; width: calc(100% + 12px); height: calc(100% + 8px); fill: none; stroke: var(--rust); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; opacity: 0; transition: stroke-dashoffset .7s var(--ease), opacity .2s; }
.pad-board.all .pad-count svg { stroke-dashoffset: 0; opacity: 1; transition-delay: .15s; }
.pad-stamp { position: absolute; right: 4px; bottom: 0; padding: 8px 18px; border: 3px solid var(--rust); border-radius: 10px; font: 800 20px/1 var(--mono); letter-spacing: .12em; color: var(--rust); opacity: 0; transform: rotate(-9deg) scale(1.8); transition: opacity .2s, transform .4s cubic-bezier(.3,1.5,.5,1); pointer-events: none; }
.pad-board.all .pad-stamp { opacity: .9; transform: rotate(-9deg); transition-delay: .5s; }
@media (max-width: 1100px) { .pad-pencil { display: none; } }
@media (max-width: 760px) { .pad-note { position: relative; right: auto; top: auto; display: block; width: auto; max-width: 220px; margin: 0 0 16px auto; transform: rotate(2deg); } }
@media (max-width: 640px) { .pad-board { transform: none; padding: 22px 8px 8px; } .pad-sheet { padding-left: 46px; background-image: linear-gradient(90deg, transparent 33px, rgba(180,83,42,.45) 33px 34px, transparent 34px); } .pad-holes { left: 9px; } .pad-holes i { width: 13px; height: 13px; } .pad-rows li { grid-template-columns: 28px minmax(0, 1fr); } .pad-n { display: none; } .pad-foot { flex-wrap: wrap; } .pad-stamp { position: relative; right: auto; bottom: auto; margin: 6px 0 0 auto; font-size: 15px; padding: 6px 12px; } }
@media (prefers-reduced-motion: reduce) { .pad-box, .pad-box svg, .pad-stamp, .pad-count svg { transition: none; } }

/* Delivery handover v3: key rack */
.dv-rack { background: var(--sheet); padding: var(--space) 0; overflow: hidden; }
.rk-head { max-width: 640px; margin: 0 auto; text-align: center; }
.rk-head .label { justify-content: center; }
.rk-head .lede { margin: 16px auto 0; }
.rk { position: relative; margin-top: clamp(48px, 6vw, 72px); }
.rk-rail { position: relative; height: 34px; border-radius: 10px; background: repeating-linear-gradient(100deg, rgba(255,255,255,.07) 0 3px, transparent 3px 12px), linear-gradient(#cfa477, #b0825a); box-shadow: 0 14px 20px -14px rgba(60,35,15,.6), inset 0 -4px 0 rgba(0,0,0,.12); }
.rk-rail::before, .rk-rail::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #8f8a82; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.rk-rail::before { left: 14px; } .rk-rail::after { right: 14px; }
.rk-tags { list-style: none; margin: 0; padding: 0 clamp(8px, 2vw, 28px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.rk-t { position: relative; padding-top: 44px; transform-origin: 50% -8px; transform: rotate(var(--r)); }
.rk-t::before { content: ""; position: absolute; left: 50%; top: -14px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: linear-gradient(#e9e6e1, #9c978f); box-shadow: 0 2px 3px rgba(0,0,0,.35); z-index: 2; }
.rk-t::after { content: ""; position: absolute; left: 50%; top: -6px; width: 2px; height: 66px; margin-left: -1px; background: #6b645a; z-index: 1; }
.rk-t > div, .rk-t > a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 46px 22px 24px; background: #fff; color: var(--ink); text-decoration: none; clip-path: polygon(calc(50% - 56px) 0, calc(50% + 56px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px); border-radius: 0 0 18px 18px; box-shadow: 0 20px 30px -24px rgba(60,35,15,.45); }
.rk-hole { position: absolute; left: 50%; top: 16px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 2px rgba(60,35,15,.25); z-index: 2; }
.rk-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: var(--sheet); color: var(--rust); }
.rk-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rk-t small { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rust-ink); }
.rk-t b { display: block; margin-top: 6px; font: 700 19px/1.15 var(--display); letter-spacing: -.02em; }
.rk-t p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rk-k > div { background: var(--peach); }
.rk-k .rk-ic { background: rgba(255,255,255,.55); color: var(--rust-ink); }
.rk-k p { color: rgba(29,27,24,.75); }
.rk-call > a { background: var(--rust); color: #fff; }
.rk-call .rk-ic { background: rgba(255,255,255,.18); color: #fff; }
.rk-call .rk-ic svg { fill: currentColor; stroke: none; }
.rk-call small { color: var(--peach); }
.rk-call p { color: rgba(255,255,255,.85); }
.rk-num { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font: 700 15px var(--display); }
.rk-num svg { width: 15px; height: 15px; }
.rk-t:hover { animation: rk-sway 1.1s var(--ease); }
.rk.in .rk-t { animation: rk-swing 1.8s var(--ease) both; animation-delay: calc(.2s + var(--i) * .12s); }
.rk.in .rk-t:hover { animation: rk-sway 1.1s var(--ease); }
@keyframes rk-swing { 0% { transform: rotate(calc(var(--r) * -5)); } 40% { transform: rotate(calc(var(--r) * 2.2)); } 70% { transform: rotate(calc(var(--r) * -.6)); } 100% { transform: rotate(var(--r)); } }
@keyframes rk-sway { 0%, 100% { transform: rotate(var(--r)); } 30% { transform: rotate(calc(var(--r) - 6deg)); } 60% { transform: rotate(calc(var(--r) + 3deg)); } }
@media (max-width: 1100px) { .rk-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .rk-call { grid-column: span 2; } .rk-rail { display: none; } .rk-t { padding-top: 0; transform: none; } .rk-t::before, .rk-t::after { display: none; } .rk.in .rk-t, .rk.in .rk-t:hover, .rk-t:hover { animation: none; } }
@media (max-width: 760px) { .rk-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; } .rk-call { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rk-tags { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rk.in .rk-t, .rk-t:hover, .rk.in .rk-t:hover { animation: none; } }
.pad-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.pad-copy .lede { margin-top: 16px; max-width: 46ch; }
.pad-copy .process-actions { margin-top: 28px; }
.pad-grid .pad-board { margin: 0; max-width: none; }
.pad-grid .pad-pencil { right: -40px; width: 200px; height: 20px; }
@media (max-width: 1000px) { .pad-grid { grid-template-columns: minmax(0, 1fr); } }
/* 404: hanging sign */
.nf { position: relative; overflow: hidden; background: var(--sheet); background-image: linear-gradient(rgba(154,68,34,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(154,68,34,.06) 1px, transparent 1px); background-size: 40px 40px; padding: 0 0 clamp(64px, 8vw, 110px); }
.nf-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-sign { display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 2vw, 28px); padding-top: 0; }
.nf-d { position: relative; display: block; padding-top: clamp(70px, 9vw, 120px); transform-origin: 50% 0; transform: rotate(var(--r)); animation: nf-swing 2.2s var(--ease) both; animation-delay: calc(.15s + var(--i) * .15s); }
.nf-d::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: calc(clamp(70px, 9vw, 120px) + 14px); margin-left: -1px; background: #6b645a; }
.nf-d b { position: relative; display: block; font: 800 clamp(120px, 19vw, 250px)/.85 var(--display); letter-spacing: -.04em; }
.nf-a b { color: var(--night); text-shadow: 6px 6px 0 #4a443d, 12px 12px 0 rgba(29,27,24,.12); }
.nf-b b { color: var(--rust); text-shadow: 6px 6px 0 #8a3c1d, 12px 12px 0 rgba(29,27,24,.12); }
.nf-c b { color: var(--peach); text-shadow: 6px 6px 0 #c98a68, 12px 12px 0 rgba(29,27,24,.12); }
.nf-hat { position: absolute; z-index: 2; left: 50%; top: calc(clamp(70px, 9vw, 120px) - clamp(26px, 3.4vw, 42px)); width: clamp(70px, 9vw, 116px); height: auto; aspect-ratio: 120 / 70; margin-left: calc(clamp(70px, 9vw, 116px) / -2); transform: rotate(-8deg); filter: drop-shadow(0 6px 6px rgba(60,35,15,.25)); }
.nf-copy { max-width: 620px; margin-top: clamp(36px, 5vw, 56px); }
.nf-copy .label { justify-content: center; }
.nf-copy .h2 { margin-top: 10px; }
.nf-copy .lede { margin: 16px auto 0; }
.nf-copy .process-actions { justify-content: center; margin-top: 28px; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.nf-links a { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s; }
.nf-links a:hover { border-color: var(--rust); color: var(--rust-ink); }
@keyframes nf-swing { 0% { transform: rotate(calc(var(--r) * -4)) translateY(-40px); opacity: 0; } 30% { opacity: 1; } 55% { transform: rotate(calc(var(--r) * 1.8)); } 80% { transform: rotate(calc(var(--r) * -.5)); } 100% { transform: rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .nf-d { animation: none; } }
.dz-poss + .leave-sec { padding-top: 0; }
.areas .areas-all { grid-column: 1 / -1; }
.areas-all a { display: inline-flex; align-items: center; gap: 6px; color: var(--peach); font-weight: 600; }
.areas-all a svg { width: 13px; height: 13px; }
.areas-all a:hover { color: #fff; }