/* Quillo — components and sections. Load after tokens.css.
   Measured from the 1600px design: content 1272px wide, sections 150px top/bottom, Lora headlines, Geist Mono eyebrows. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.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; }
.sr-only:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 200; background: var(--surface); padding: 8px 14px; border-radius: var(--r-btn); }
.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.center { display: flex; justify-content: center; }

/* Reveal (only when JS runs and the motion engine is absent) */
.js:not(.m-js) .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js:not(.m-js) .reveal.in { opacity: 1; transform: none; }

/* ── Eyebrow: 8px dot + Geist Mono uppercase ── */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.eyebrow--light { color: var(--on-dark); }

/* ── Section heads ── */
.sec { padding-block: var(--section); }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--head-gap); }
.sec-head h2 { max-width: 13em; text-wrap: balance; }
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
.two-tone { color: var(--text); text-wrap: balance; }
.two-tone span { color: var(--muted); }

/* ── Buttons: 10px radius, Manrope Medium 16 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.5; white-space: nowrap; cursor: pointer; background: var(--dark); color: var(--on-dark);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
/* buttons fade colour only (lesson 71): no lift */
.btn--sm { padding: 11px 16px; }
.btn--dark { background: var(--dark); color: var(--on-dark); }
.btn--dark:hover { background: var(--dark-2); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: #FFD272; }
.btn--light { background: var(--surface); color: var(--text); }
.btn--light:hover { background: var(--bg); }
.btn--ghost-light { background: transparent; color: var(--bg); border-color: var(--bg); }
.btn--ghost-light:hover { background: rgba(255, 251, 245, .1); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn--ghost:hover { background: rgba(57, 29, 10, .06); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── Logo: square mark + Lora wordmark ── */
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 32px; line-height: 1.3; letter-spacing: -.2px; color: var(--text); }
.logo svg { width: 27px; height: 27px; fill: currentColor; flex: none; }

/* ── Header: 84px, logo left, links centred, small button right ── */
.site-head { position: relative; z-index: 20; }
.site-head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
/* menu hover = soft fill in the buttons' corners (house rule soft-hovers, lesson 71): 9px × 16px of room, current page the same */
.nav-links { display: flex; gap: 4px; font-size: 16px; }
.nav-links a { padding: 9px 16px; border-radius: var(--r-btn); transition: background-color var(--dur) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: color-mix(in srgb, currentColor 8%, transparent); }
.site-head__cta { justify-self: end; }
.site-head .btn--sm { background: var(--dark); color: var(--on-dark); }
.site-head--light { position: absolute; inset: 0 0 auto; color: var(--on-dark); }
.site-head--light .logo { color: var(--on-dark); }
.site-head--light .btn--sm { background: var(--surface); color: var(--text); }
.menu-btn { display: none; justify-self: end; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 0; cursor: pointer; font-weight: 500; }
.menu-btn span { width: 22px; height: 10px; border-block: 1.5px solid currentColor; }
.menu { position: fixed; inset: 0; z-index: 100; background: var(--bg); padding: 0 var(--gutter) 32px; display: flex; flex-direction: column; gap: 32px; visibility: hidden; opacity: 0; transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast); }
.menu.open { visibility: visible; opacity: 1; transition: opacity var(--dur-fast) var(--ease); }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.menu__top .menu-btn { display: inline-flex; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { font-family: var(--font-display); font-size: 36px; line-height: 1.2; letter-spacing: -.5px; padding-block: 12px; border-bottom: 1px solid var(--line); }
body.menu-open { overflow: hidden; }

/* ── Hero: full-bleed photo, left scrim, bottom fade ── */
.hero { position: relative; min-height: min(1080px, max(760px, 100svh)); display: flex; color: var(--on-dark); background: var(--dark-3); isolation: isolate; overflow: hidden; }
.hero__photo { position: absolute; inset: 0; z-index: -2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 288px; z-index: -1; background: linear-gradient(0deg, var(--dark-3), rgba(42, 25, 13, 0)); }
.hero__in { display: flex; flex-direction: column; justify-content: flex-end; padding-top: 204px; padding-bottom: 120px; }
.hero__rating { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-hero); color: var(--bg); }
.hero__rating svg { width: 17px; height: 16px; fill: var(--bg); }
.hero__title { color: var(--on-dark); text-wrap: balance; }
.hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: min(560px, 100%); color: var(--bg); }
.hero__lead { max-width: 463px; margin-top: 8px; }
.hero__copy .btn-row { margin-top: 8px; }
.awards { display: flex; gap: 60px; }
.award { display: flex; align-items: center; gap: 0; }
.award img { width: 45px; height: 68px; }
.award span { width: 110px; margin-inline: -22px; text-align: center; font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 1px; }
.award b { font-weight: 600; font-size: 14px; line-height: 1.35; }

/* ── About: statement + stat cards ── */
.about__head { display: grid; grid-template-columns: 250px minmax(0, 842px); gap: 92px; align-items: start; }
.about__head .eyebrow { white-space: nowrap; }
.about__head .eyebrow { padding-top: 7px; }
.about__body { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 80px; }
.about__team { display: flex; flex-direction: column; gap: 16px; width: 231px; color: var(--text-2); }
.avatars { display: flex; }
.avatars img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--surface); object-fit: cover; object-position: bottom; }
.avatars img + img { margin-left: -17px; }
.stat-cards { display: grid; grid-template-columns: repeat(3, 302px); gap: var(--gap); }
.stat-card { position: relative; overflow: hidden; height: 428px; background: var(--surface); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; }
.stat-card > .t-label { color: var(--text-2); width: 8em; }
.stat-card .t-stat { margin-top: auto; }
.stat-card .t-body { color: var(--text-2); margin-top: 8px; }
.stat-card__deco { position: absolute; width: 201px; height: 200px; object-fit: contain; right: -48px; top: 84px; opacity: .6; pointer-events: none; transition: transform .8s var(--ease-out); }
.stat-card:hover .stat-card__deco { transform: rotate(-6deg) translateX(-6px); }

/* ── Why: photo + compare table ── */
.why { background: var(--surface); padding-block: 140px; }
.why__grid { display: grid; grid-template-columns: 512px minmax(0, 700px); justify-content: space-between; gap: 60px; }
.why__side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.why__photo { aspect-ratio: 512 / 352; border-radius: var(--r); overflow: hidden; }
.why__photo img { width: 100%; height: 100%; object-fit: cover; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--surface-3); border-radius: var(--r-lg); padding: 32px; }
.compare__col { display: flex; flex-direction: column; }
.compare__col p { min-height: 97px; padding: 20px 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--text-2); display: flex; align-items: flex-start; }
.compare__col--own { padding-block: 24px; padding-right: 16px; }
.compare__col--us { background: var(--dark); border-radius: var(--r); padding-block: 24px; }
.compare__col--us p { color: var(--on-dark); border-color: var(--line-dark); }
.compare p.compare__head { min-height: 55px; border-top: 0; padding-top: 0; padding-bottom: 20px; align-items: center; gap: 12px; font-size: 20px; font-weight: 500; color: var(--text); }
.compare__col--us p.compare__head { color: var(--on-dark); }
.compare__head img { width: 20px; height: 20px; }

/* ── Practice areas ── */
.practice { background: var(--surface-2); }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block: var(--head-to-content); }
.area-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 408 / 512; border-radius: var(--r); overflow: hidden; padding: 24px; color: var(--on-dark); isolation: isolate; }
.area-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }
.area-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26, 12, 4, .38) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 48%, rgba(26, 12, 4, .9) 100%); }
.area-card:hover img { transform: scale(1.04); }
.area-card__title { font-family: var(--font); font-weight: 500; font-size: 20px; line-height: 1.5; }
.area-card__proof { font-size: 16px; line-height: 1.5; max-width: 300px; color: rgba(255, 251, 245, .85); }
.area-card__proof b { font-weight: 600; color: var(--on-dark); }

/* ── Process ── */
.how__grid { display: grid; grid-template-columns: 540px minmax(0, 460px); justify-content: space-between; gap: 64px; margin-top: var(--head-to-content); align-items: start; }
.how__photo { aspect-ratio: 540 / 600; border-radius: var(--r); overflow: hidden; }
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.steps { position: relative; display: flex; flex-direction: column; gap: 64px; padding-top: 0; }
.steps::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: -40px; width: 1px; background: linear-gradient(180deg, var(--text-2), rgba(109, 99, 92, .25) 40%, rgba(109, 99, 92, 0)); }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 40px; transition: opacity .5s var(--ease); }
.step__n { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--step-off); color: var(--on-dark); display: grid; place-items: center; font-family: var(--mono); font-size: 14px; transition: background-color .5s var(--ease); }
.step h3 { color: var(--text); margin-top: 8px; }
.step p { color: var(--text-2); margin-top: 16px; }
.step:not(.is-on) h3 { color: var(--text-2); }
.step.is-on .step__n { background: var(--dark); }

/* ── Team ── */
.team { padding-top: 0; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: var(--head-to-content); }
.person { border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.person img { width: 100%; height: auto; aspect-ratio: 309 / 343; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.person:hover img { transform: scale(1.03); }
.person__meta { position: relative; background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.person__meta p { color: var(--text-2); }

/* ── Testimonials: espresso inset card ── */
.quotes { padding-top: 0; }
.quotes__card { background: var(--dark); border-radius: var(--r-lg); padding: 110px 84px; color: var(--on-dark); }
.quotes__card h2 { color: var(--on-dark); }
.quote-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(234px, auto); gap: 12px; margin-top: var(--head-to-content); }
.quote { background: var(--surface-2); color: var(--text); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.quote--tall { grid-row: span 2; }
.quote blockquote { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.quote figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; font-weight: 500; font-size: 16px; color: var(--text); }
.quote--score { align-items: center; justify-content: center; text-align: center; gap: 8px; }
.quote--score .t-body { color: var(--text-2); }
.quote__big { font-family: var(--font-display); font-size: 40px; line-height: 1.2; letter-spacing: -.5px; color: var(--accent-2-ink); }
.stars { display: flex; align-items: center; gap: 2px; font-size: 16px; color: var(--text); }
.stars i { width: 20px; height: 19px; background: var(--accent-2); -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb24vU29saWQvc3RhciI+CjxwYXRoIGlkPSJJY29uIiBkPSJNMTAuODU4OSA0LjcxMzAzQzExLjIxODEgMy42MDc0NiAxMi43ODIyIDMuNjA3NDYgMTMuMTQxNCA0LjcxMzAzTDE0LjQyNDkgOC42NjMxOUMxNC41ODU1IDkuMTU3NjEgMTUuMDQ2MyA5LjQ5MjM3IDE1LjU2NjEgOS40OTIzN0gxOS43MTk2QzIwLjg4MjEgOS40OTIzNyAyMS4zNjU0IDEwLjk3OTkgMjAuNDI0OSAxMS42NjMyTDE3LjA2NDcgMTQuMTA0NUMxNi42NDQxIDE0LjQxMDEgMTYuNDY4MSAxNC45NTE3IDE2LjYyODggMTUuNDQ2MkwxNy45MTIzIDE5LjM5NjNDMTguMjcxNSAyMC41MDE5IDE3LjAwNjEgMjEuNDIxMiAxNi4wNjU3IDIwLjczOEwxMi43MDU1IDE4LjI5NjZDMTIuMjg0OSAxNy45OTExIDExLjcxNTQgMTcuOTkxMSAxMS4yOTQ4IDE4LjI5NjZMNy45MzQ1OCAyMC43MzhDNi45OTQxMiAyMS40MjEyIDUuNzI4NzUgMjAuNTAxOSA2LjA4Nzk3IDE5LjM5NjNMNy4zNzE0NSAxNS40NDYyQzcuNTMyMSAxNC45NTE3IDcuMzU2MTEgMTQuNDEwMSA2LjkzNTUzIDE0LjEwNDVMMy41NzUzMiAxMS42NjMyQzIuNjM0ODcgMTAuOTc5OSAzLjExODIgOS40OTIzNyA0LjI4MDY3IDkuNDkyMzdIOC40MzQxMUM4Ljk1Mzk4IDkuNDkyMzcgOS40MTQ3MiA5LjE1NzYxIDkuNTc1MzcgOC42NjMxOUwxMC44NTg5IDQuNzEzMDNaIiBmaWxsPSIjQ0M3NTNBIi8+CjwvZz4KPC9zdmc+") center / contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Ikljb24vU29saWQvc3RhciI+CjxwYXRoIGlkPSJJY29uIiBkPSJNMTAuODU4OSA0LjcxMzAzQzExLjIxODEgMy42MDc0NiAxMi43ODIyIDMuNjA3NDYgMTMuMTQxNCA0LjcxMzAzTDE0LjQyNDkgOC42NjMxOUMxNC41ODU1IDkuMTU3NjEgMTUuMDQ2MyA5LjQ5MjM3IDE1LjU2NjEgOS40OTIzN0gxOS43MTk2QzIwLjg4MjEgOS40OTIzNyAyMS4zNjU0IDEwLjk3OTkgMjAuNDI0OSAxMS42NjMyTDE3LjA2NDcgMTQuMTA0NUMxNi42NDQxIDE0LjQxMDEgMTYuNDY4MSAxNC45NTE3IDE2LjYyODggMTUuNDQ2MkwxNy45MTIzIDE5LjM5NjNDMTguMjcxNSAyMC41MDE5IDE3LjAwNjEgMjEuNDIxMiAxNi4wNjU3IDIwLjczOEwxMi43MDU1IDE4LjI5NjZDMTIuMjg0OSAxNy45OTExIDExLjcxNTQgMTcuOTkxMSAxMS4yOTQ4IDE4LjI5NjZMNy45MzQ1OCAyMC43MzhDNi45OTQxMiAyMS40MjEyIDUuNzI4NzUgMjAuNTAxOSA2LjA4Nzk3IDE5LjM5NjNMNy4zNzE0NSAxNS40NDYyQzcuNTMyMSAxNC45NTE3IDcuMzU2MTEgMTQuNDEwMSA2LjkzNTUzIDE0LjEwNDVMMy41NzUzMiAxMS42NjMyQzIuNjM0ODcgMTAuOTc5OSAzLjExODIgOS40OTIzNyA0LjI4MDY3IDkuNDkyMzdIOC40MzQxMUM4Ljk1Mzk4IDkuNDkyMzcgOS40MTQ3MiA5LjE1NzYxIDkuNTc1MzcgOC42NjMxOUwxMC44NTg5IDQuNzEzMDNaIiBmaWxsPSIjQ0M3NTNBIi8+CjwvZz4KPC9zdmc+") center / contain no-repeat; }
.stars span { margin-left: 8px; }

/* ── FAQ ── */
.faq { padding-top: 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 712px); justify-content: space-between; gap: 64px; }
.faq__side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.faq__ask { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--text-2); }
.faq__ask-title { color: var(--text); font-weight: 500; }
.faq__ask .btn { margin-top: 20px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-list details { border: 1px solid var(--line); border-radius: var(--r); background: transparent; transition: background-color var(--dur-fast) var(--ease); }
.faq-list details[open] { background: var(--surface); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; font-size: 18px; font-weight: 500; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; width: 24px; height: 24px; flex: none; background: var(--text); -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsdXMiPgo8cGF0aCBpZD0iSWNvbiIgZD0iTTEyIDVWMTlNNSAxMkgxOSIgc3Ryb2tlPSIjMzkxRDBBIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPg==") center / 18px no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9InBsdXMiPgo8cGF0aCBpZD0iSWNvbiIgZD0iTTEyIDVWMTlNNSAxMkgxOSIgc3Ryb2tlPSIjMzkxRDBBIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPg==") center / 18px no-repeat; }
.faq-list details[open] summary::after { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Im1pbnVzIj4KPHBhdGggaWQ9Ikljb24iIGQ9Ik01IDEySDE5IiBzdHJva2U9IiMzOTFEMEEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Im1pbnVzIj4KPHBhdGggaWQ9Ikljb24iIGQ9Ik01IDEySDE5IiBzdHJva2U9IiMzOTFEMEEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+"); }
.faq-list details p { padding: 0 24px 24px; max-width: 560px; color: var(--text-2); }

/* ── Insights ── */
.insights { padding-top: 0; }
.post-grid { display: grid; grid-template-columns: minmax(0, 808px) minmax(0, 440px); grid-template-rows: auto auto; justify-content: space-between; gap: 32px 24px; margin-top: var(--head-to-content); }
.post { display: flex; flex-direction: column; gap: 12px; }
.post img { width: 100%; height: auto; aspect-ratio: 440 / 220; object-fit: cover; border-radius: var(--r); margin-bottom: 12px; transition: transform 1.2s var(--ease-out); }
.post--big { grid-row: span 2; }
.post--big img { aspect-ratio: 808 / 510; }
.post__date { color: var(--text-2); }
.post h3 { max-width: 28em; text-wrap: balance; }
.post:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ── CTA: full-bleed photo with an espresso form card ── */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--on-dark); padding-block: 140px 120px; }
.cta__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: -2; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 8, 2, .35), rgba(20, 8, 2, 0) 50%); }
.cta__grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 593px); justify-content: space-between; gap: 64px; align-items: start; }
.cta h2 { color: var(--on-dark); }
.form-card { background: var(--dark-2); border-radius: var(--r-lg); padding: 48px; box-shadow: var(--shadow-2); }
.form { display: flex; flex-direction: column; gap: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 12px; font-size: 16px; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 14px 16px; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--text); }
.field textarea { resize: vertical; min-height: 132px; }
.field--select select { appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZXZyb24tZG93biI+CjxwYXRoIGlkPSJJY29uIiBkPSJNNCA2TDggMTBMMTIgNiIgc3Ryb2tlPSIjRkZGQkY1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; cursor: pointer; }
.form--dark .field { color: var(--on-dark); }
.form--dark .field input, .form--dark .field select, .form--dark .field textarea { background-color: var(--field-dark); border-color: var(--line-dark); color: var(--on-dark); }
.form--dark .field select option { color: var(--text); }
.form--dark ::placeholder { color: rgba(255, 251, 245, .66); }
.form--dark .field--select select { background-image: none; }
.form--dark .field--select { position: relative; }
.form--dark .field--select::after { content: ""; position: absolute; right: 16px; bottom: 19px; width: 16px; height: 16px; background: var(--on-dark); -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZXZyb24tZG93biI+CjxwYXRoIGlkPSJJY29uIiBkPSJNNCA2TDggMTBMMTIgNiIgc3Ryb2tlPSIjRkZGQkY1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+") center / contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImNoZXZyb24tZG93biI+CjxwYXRoIGlkPSJJY29uIiBkPSJNNCA2TDggMTBMMTIgNiIgc3Ryb2tlPSIjRkZGQkY1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9zdmc+") center / contain no-repeat; pointer-events: none; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.form-note { font-size: 14px; min-height: 0; }
.form-note:empty { display: none; }

/* ── Footer: espresso ── */
.site-foot { background: var(--dark); color: var(--on-dark-2); padding-block: 140px 120px; font-size: 16px; }
.site-foot .logo { color: var(--on-dark); }
.site-foot__top { display: flex; justify-content: space-between; gap: 64px; }
.site-foot__brand { display: flex; flex-direction: column; gap: 24px; max-width: 300px; }
.socials { display: flex; gap: 8px; }
.socials a { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--dark-2); display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease); }
.socials a:hover { background: #5C3A22; }
.socials img { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) invert(1); }
.site-foot__cols { display: grid; grid-template-columns: 164px 170px 160px; gap: 92px; margin-right: 8px; }
.site-foot__cols div { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.site-foot__cols a, .site-foot__cols p { color: var(--on-dark); }
.site-foot__cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-foot__cols .site-foot__h { color: var(--on-dark-2); margin-bottom: 12px; }
.site-foot__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-top: 80px; }
.site-foot__legal { display: flex; flex-direction: column; gap: 16px; max-width: 520px; font-size: 14px; }
.seals { display: flex; gap: 6px; }
.seals svg { width: 64px; height: 64px; }
.site-foot__copy { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.site-foot__copy a { color: var(--on-dark); }
.news { display: grid; grid-template-columns: 174px 1fr; gap: 24px; align-items: center; width: min(666px, 100%); background: var(--dark-2); border-radius: var(--r); padding: 12px; }
.news img { width: 174px; height: 194px; object-fit: cover; object-position: 50% 30%; border-radius: var(--r-sm); }
.news__body { display: flex; flex-direction: column; gap: 32px; padding-right: 24px; }
.news__title { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--on-dark); max-width: 300px; }
.news__form { display: flex; flex-wrap: wrap; gap: 8px; }
.news__form input { flex: 1 1 170px; min-width: 0; border: 1px solid var(--line-dark); border-radius: var(--r-btn); background: var(--field-dark); color: var(--on-dark); padding: 11px 16px; font-size: 16px; }
.news__form input::placeholder { color: rgba(255, 251, 245, .66); }
.news__form .form-note { flex-basis: 100%; color: var(--on-dark); }

/* ── Responsive ── */
@media (max-width: 1360px) {
  .about__head { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
  .stat-cards { grid-template-columns: repeat(3, minmax(0, 302px)); }
  .why__grid { grid-template-columns: minmax(0, 440px) minmax(0, 700px); }
  .site-foot__cols { gap: 48px; }
}
@media (max-width: 1100px) {
  :root { --section: 112px; --head-to-content: 48px; }
  .t-h1, .t-display { font-size: 56px; }
  .t-h2 { font-size: 44px; }
  .t-h3 { font-size: 34px; }
  .about__head { grid-template-columns: 1fr; gap: 24px; }
  .about__body { flex-direction: column-reverse; align-items: stretch; }
  .about__team { width: auto; flex-direction: row; align-items: center; }
  .stat-cards { grid-template-columns: repeat(3, 1fr); }
  .stat-card { height: 360px; }
  .why__grid, .how__grid, .faq__grid, .cta__grid { grid-template-columns: 1fr; }
  .why__photo { max-width: 640px; }
  .how__photo { max-width: 640px; aspect-ratio: 4 / 3; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes__card { padding: 80px 40px; }
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post--big { grid-column: 1 / -1; grid-row: auto; }
  .site-foot__top, .site-foot__bottom { flex-direction: column; align-items: flex-start; }
  .site-foot__cols { margin-right: 0; }
}
@media (max-width: 900px) {
  .nav-links, .site-head__cta { display: none; }
  .site-head__in { grid-template-columns: 1fr auto; height: 72px; }
  .menu-btn { display: inline-flex; }
  .hero__in { padding-top: 160px; padding-bottom: 72px; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero::before { background: linear-gradient(180deg, rgba(41, 18, 5, .55) 0%, rgba(41, 18, 5, .2) 40%, rgba(41, 18, 5, .4) 60%, var(--dark-3) 100%); }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .quote-bento { grid-template-columns: 1fr 1fr; }
  .quote--tall { grid-row: auto; }
  .quote--score { grid-column: 1 / -1; min-height: 180px; }
}
@media (max-width: 640px) {
  :root { --section: 88px; --head-to-content: 40px; --gutter: 20px; }
  .t-h1, .t-display { font-size: 42px; letter-spacing: -1.2px; }
  .t-h2 { font-size: 34px; letter-spacing: -.6px; }
  .t-h3 { font-size: 28px; letter-spacing: -.3px; }
  .t-stat { font-size: 34px; }
  .logo { font-size: 28px; }
  .hero { min-height: min(820px, max(720px, 100svh)); }
  .hero__photo img { object-position: 72% 30%; }
  .awards { gap: 24px; }
  .stat-cards, .area-grid, .quote-bento, .post-grid, .form__row { grid-template-columns: 1fr; }
  .stat-card { height: 220px; }
  .stat-card__deco { width: 150px; height: 150px; top: 40px; right: -30px; }
  .compare { padding: 16px; grid-template-columns: 1fr 1fr; }
  .compare__col p { padding: 14px 12px; min-height: 92px; font-size: 14px; }
  .compare p.compare__head { font-size: 16px; gap: 8px; min-height: 44px; }
  .compare__col--own { padding-right: 4px; }
  .why { padding-block: var(--section); }
  .steps { gap: 40px; }
  .step { gap: 20px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .person__meta { padding: 12px; }
  .person__meta .t-title { font-size: 16px; }
  .quotes__card { padding: 64px 16px 16px; }
  .quote--score { grid-column: auto; }
  .faq-list summary { padding: 20px; font-size: 16px; }
  .form-card { padding: 24px; }
  .cta { padding-block: 88px; }
  .site-foot { padding-block: 88px 72px; }
  .site-foot__cols { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .news { grid-template-columns: 1fr; }
  .news img { width: 100%; height: 200px; }
  .news__body { padding: 0 8px 12px; gap: 20px; }
}

/* ───────── About ───────── */
/* Quillo — About page (prefix ab-). Loaded right after quillo.css. Measured from the 1600 About frame. */

/* ── Page hero: head on linen + two photos in a row (418 + 842, 476 tall) ── */
.ab-hero { padding-top: 94px; }
.ab-hero__head { gap: 20px; }
.ab-hero__head .eyebrow { margin-bottom: 4px; }
.ab-hero__head h1 { text-wrap: balance; }
.ab-hero__lead { max-width: 520px; color: var(--text-2); }
.ab-hero__photos { display: grid; grid-template-columns: minmax(0, 418fr) minmax(0, 842fr); gap: var(--gap); margin-top: 80px; }
.ab-hero__photo { height: 476px; border-radius: var(--r); overflow: hidden; min-width: 0; }
.ab-hero__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ab-hero__photo--sm img { object-position: 40% 60%; }
.ab-hero__photo--lg img { object-position: 50% 45%; }
.ab-hero__photo:hover img { transform: scale(1.03); }

/* ── Statement + four plain numbers ── */
.ab-statement { padding-block: 110px var(--section); }
.ab-stats { display: flex; justify-content: space-between; gap: 32px; margin-top: 110px; }
.ab-stats li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-stats .t-body { color: var(--text-2); }

/* ── Values: sand inset panel with three tall ivory cards ── */
.ab-values { padding-bottom: var(--section); }
.ab-values__panel { background: var(--surface-2); border-radius: var(--r-lg); padding: 120px 84px 100px; }
.ab-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); max-width: var(--container-narrow); margin: var(--head-to-content) auto 0; }
.ab-value { min-height: 362px; background: var(--surface); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; transition: transform var(--dur) var(--ease-out); }
.ab-value:hover { transform: translateY(-4px); }
.ab-value img { width: 32px; height: 32px; }
.ab-value h3 { color: var(--text); }
.ab-value p { color: var(--text-2); margin-top: 8px; max-width: 290px; font-size: 16px; }

/* ── Why: tall photo left, head + accordion right ── */
.ab-why { padding-top: 0; }
.ab-why__grid { display: grid; grid-template-columns: minmax(0, 608px) minmax(0, 560px); justify-content: space-between; gap: 64px; align-items: stretch; }
.ab-why__photo { aspect-ratio: 608 / 744; border-radius: var(--r); overflow: hidden; }
.ab.why__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-why__body { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding-top: 24px; }
.ab-why__body .sec-head { gap: 20px; }
.ab-why__body .sec-head .eyebrow { margin-bottom: 4px; }
.ab-why__lead { max-width: 490px; color: var(--text-2); }
.ab-why__body .btn { margin-top: 16px; }
.ab-acc { max-width: 440px; padding-bottom: 24px; }
.ab-acc details { border-top: 1px solid var(--line-2); }
.ab-acc details:first-child { border-top: 0; }
.ab-acc summary { list-style: none; cursor: pointer; padding-block: 24px; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.2px; color: var(--text-2); transition: color var(--dur-fast) var(--ease); }
.ab-acc summary::-webkit-details-marker { display: none; }
.ab-acc summary:hover, .ab-acc details[open] summary { color: var(--text); }
.ab-acc details:first-child summary { padding-top: 0; }
.ab-acc details[open] summary { padding-bottom: 12px; }
.ab-acc details p { color: var(--text-2); padding-bottom: 28px; max-width: 340px; }

/* ── Testimonial carousel: score card + sliding quote card on espresso ── */
.ab-quotes { padding-top: 0; }
.ab-quotes__card { padding: 110px 84px 100px; }
.ab-quotes__row { display: grid; grid-template-columns: minmax(0, 323fr) minmax(0, 767fr); gap: var(--gap); max-width: var(--container-narrow); margin: var(--head-to-content) auto 0; }
.ab-score { background: var(--surface-2); color: var(--text); border-radius: var(--r); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 350px; }
.ab-score .t-small { color: var(--text-2); font-size: 16px; margin-top: 4px; }
.ab-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r); min-width: 0; }
.ab-track::-webkit-scrollbar { display: none; }
.ab-track:focus-visible { outline-offset: 4px; }
.ab-slide { scroll-snap-align: start; padding: 32px; gap: 40px; min-height: 350px; }
.ab-slide blockquote { font-size: 20px; line-height: 1.5; letter-spacing: -.2px; max-width: 660px; }
.ab-arrows { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }
.ab-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: var(--r-btn); background: rgba(255, 251, 245, .45); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ab-arrow img { width: 22px; height: 22px; }
.ab-arrow--next img { transform: rotate(180deg); }
.ab-arrow.arrow-btn--fill { background: var(--surface); }
.ab-arrow:hover { transform: translateY(-1px); background: var(--surface); }

/* ── Responsive (home pattern: 1100 / 900 / 640) ── */
@media (max-width: 1100px) {
  .ab-hero { padding-top: 64px; }
  .ab-hero__photos { margin-top: 56px; }
  .ab-hero__photo { height: 400px; }
  .ab-statement { padding-top: 96px; }
  .ab-stats { margin-top: 72px; }
  .ab-values__panel { padding: 88px 40px 72px; }
  .ab-value { min-height: 300px; padding: 24px; }
  .ab-why__grid { grid-template-columns: 1fr; gap: 48px; }
  .ab-why__photo { max-width: 640px; aspect-ratio: 4 / 3; }
  .ab-why__body { padding-top: 0; gap: 48px; }
  .ab-quotes__card { padding: 80px 40px; }
}
@media (max-width: 900px) {
  .ab-hero__photo { height: 320px; }
  .ab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .ab-values__grid { grid-template-columns: 1fr; }
  .ab-value { min-height: 220px; }
  .ab-quotes__row { grid-template-columns: 1fr; }
  .ab-score { min-height: 0; flex-direction: row; align-items: flex-end; }
  .ab-slide { min-height: 320px; }
}
@media (max-width: 640px) {
  .ab-hero { padding-top: 40px; }
  .ab-hero__photos { grid-template-columns: 1fr; margin-top: 40px; }
  .ab-hero__photo { height: auto; aspect-ratio: 4 / 3; }
  .ab-statement { padding-top: 72px; }
  .ab-stats { margin-top: 48px; }
  .ab-values__panel { padding: 64px 16px 16px; }
  .ab-value { min-height: 200px; gap: 32px; }
  .ab-acc summary { font-size: 18px; }
  .ab-quotes__card { padding: 64px 16px 32px; }
  .ab-score { flex-direction: column; align-items: flex-start; padding: 24px; gap: 24px; }
  .ab-slide { padding: 24px; gap: 24px; min-height: 0; }
  .ab-slide blockquote { font-size: 17px; }
  .ab-arrows { margin-top: 32px; }
}

/* ───────── Practice ───────── */
/* Quillo — Practice areas (list + detail). Prefix pa-. Loaded after quillo.css. */

/* ── Shared page head: left-aligned eyebrow + Lora H1 on linen ── */
.pa-head h1 { max-width: 12em; text-wrap: balance; }

/* ── Practice areas list: 3×3 home cards ── */
.page-practice-areas .pa-areas { padding-top: 72px; }
.page-practice-areas .pa-grid { margin-bottom: 0; }
.page-practice-areas .faq { padding-top: 0; }

/* ── Detail hero ── */
.pa-detail { padding-top: 72px; }
.pa-detail .pa-head .btn { margin-top: 8px; }
.pa-photo { margin-top: 80px; aspect-ratio: 1272 / 700; border-radius: var(--r); overflow: hidden; }
.pa-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }

/* ── Detail body: article | sticky form card ── */
.pa-body { padding-block: 72px var(--section); }
.pa-body__grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 400px); justify-content: space-between; gap: 64px; align-items: start; }
.pa-article { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.pa-block { display: flex; flex-direction: column; gap: 16px; color: var(--text-2); }
.pa-block h2 { color: var(--text); text-wrap: balance; }
.pa-list { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.pa-list li { position: relative; padding-left: 20px; }
.pa-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pa-form { position: sticky; top: 32px; background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.pa-form h2 { color: var(--on-dark); text-wrap: balance; }
.pa-form .form { gap: 20px; }
.pa-form .btn { margin-top: 8px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .pa-body__grid { grid-template-columns: 1fr; }
  .pa-form { position: static; max-width: 560px; }
  .pa-photo { margin-top: 56px; }
}
@media (max-width: 900px) {
  .page-practice-areas .pa-areas, .pa-detail { padding-top: 48px; }
  .pa-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .pa-photo { margin-top: 40px; aspect-ratio: 1 / 1; }
  .pa-grid .area-card { aspect-ratio: 1 / 1; }
  .pa-body { padding-top: 48px; }
  .pa-article { gap: 40px; }
  .pa-block .t-h4 { font-size: 28px; }
  .pa-form { padding: 24px; gap: 24px; }
}

/* Readable measure + stronger card scrim for the busier list photos */
.pa-block p { max-width: 64ch; }
.page-practice-areas .area-card::before { background: linear-gradient(180deg, rgba(26, 12, 4, .62) 0%, rgba(26, 12, 4, .12) 26%, rgba(0, 0, 0, 0) 46%, rgba(26, 12, 4, .94) 100%); }
.page-practice-areas .area-card__proof { color: var(--on-dark); }
.page-practice-areas .pa-card--bright::before { background: linear-gradient(180deg, rgba(26, 12, 4, .82) 0%, rgba(26, 12, 4, .3) 24%, rgba(0, 0, 0, 0) 46%, rgba(26, 12, 4, .94) 100%); }

/* ───────── Style Guide ───────── */
/* Quillo — style guide page (prefix sg-, scoped to .page-style-guide) */
.page-style-guide code { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--text); }
.page-style-guide .sg-k { font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.page-style-guide .sg-k--light { color: var(--on-dark-2); }
.page-style-guide .sg-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.page-style-guide .sg-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.page-style-guide .sg-mono { font-family: var(--mono); font-weight: 400; }
.page-style-guide .sg-copper { color: var(--accent-2-ink); }
.page-style-guide .sg-body { color: var(--text-2); }
.page-style-guide .sg-note { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-left: 8px; }

/* ── Overview bento (first 1440 × 990 = store image) ── */
.page-style-guide .sg-top { padding: 24px 0 96px; }
.page-style-guide .sg-bento { display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 480fr) minmax(0, 420fr) minmax(0, 348fr);
  grid-template-rows: 252px 290px 60px 228px;
  grid-template-areas: "intro type area" "pal type area" "pal type quote" "btns stat quote"; }
.page-style-guide .sg-bento > * { min-width: 0; }
.page-style-guide .sg-intro { grid-area: intro; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 24px 0 0; }
.page-style-guide .sg-intro h1 { text-wrap: balance; }
.page-style-guide .sg-intro .t-body { color: var(--text-2); max-width: 430px; }
.page-style-guide .sg-tile { border-radius: var(--r-lg); padding: var(--card-pad); background: var(--surface); display: flex; flex-direction: column; gap: 16px; }
.page-style-guide .sg-tile--palette { grid-area: pal; background: var(--surface-2); }
.page-style-guide .sg-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 10px; flex: 1; align-content: space-between; }
.page-style-guide .sg-chips li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.page-style-guide .sg-chips i { height: 72px; border-radius: var(--r); background: var(--c); border: 1px solid var(--line-2); margin-bottom: 8px; }
.page-style-guide .sg-chips b { font-weight: 500; font-size: 13px; white-space: nowrap; line-height: 1.4; color: var(--text); }
.page-style-guide .sg-chips code { font-size: 11px; color: var(--text-2); }
.page-style-guide .sg-tile--btns { grid-area: btns; justify-content: space-between; }
.page-style-guide .sg-tile--btns .btn-row, .page-style-guide .sg-stage--split .btn-row { gap: 12px; }
.page-style-guide .sg-tile--type { grid-area: type; background: var(--dark); color: var(--on-dark); padding: 32px; gap: 20px; }
.page-style-guide .sg-aa { font-family: var(--font-display); font-size: 140px; line-height: .9; letter-spacing: -5px; color: var(--on-dark); display: flex; gap: 20px; margin-top: 4px; }
.page-style-guide .sg-aa em { font-style: italic; color: var(--accent-2); }
.page-style-guide .sg-type__line { color: var(--on-dark); max-width: 12em; text-wrap: balance; }
.page-style-guide .sg-fams { display: flex; flex-direction: column; border-top: 1px solid var(--line-dark); margin-top: auto; }
.page-style-guide .sg-fams li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.page-style-guide .sg-fams b { font-weight: 500; color: var(--on-dark); }
.page-style-guide .sg-fams li:first-child b { font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.page-style-guide .sg-fams span { font-size: 14px; color: var(--on-dark-2); }
.page-style-guide .sg-tile--type .btn-row { gap: 12px; }
.page-style-guide .sg-stat { grid-area: stat; height: auto; }
.page-style-guide .sg-stat .stat-card__deco { top: 20px; right: -40px; }
.page-style-guide .sg-area { grid-area: area; aspect-ratio: auto; }
.page-style-guide .sg-area .area-card__title { font-size: 20px; }
.page-style-guide .sg-quote { grid-area: quote; }

/* ── Sections ── */
.page-style-guide .sg-sec { padding-block: 112px; }
.page-style-guide .sg-sec--ivory { background: var(--surface); }
.page-style-guide .sg-sec--sand { background: var(--surface-2); }
.page-style-guide .sg-head { margin-bottom: var(--head-to-content); }
.page-style-guide .sg-head h2 { max-width: 20em; }
.page-style-guide .sg-head .t-body { color: var(--text-2); max-width: 620px; }

/* Colour swatches */
.page-style-guide .sg-group + .sg-group { margin-top: 48px; }
.page-style-guide .sg-group > h3 { margin-bottom: 16px; display: flex; align-items: baseline; }
.page-style-guide .sg-sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--gap); }
.page-style-guide .sg-sw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.page-style-guide .sg-sw i { display: block; height: 96px; margin-bottom: 12px; background: linear-gradient(var(--c), var(--c)), var(--under, transparent); border-bottom: 1px solid var(--line); }
.page-style-guide .sg-sw--ondark i { --under: var(--dark); }
.page-style-guide .sg-sw--grad i { background: var(--g), var(--surface-2); }
.page-style-guide .sg-sw--rule i { background: var(--surface); display: flex; align-items: center; padding: 0 16px; }
.page-style-guide .sg-sw--rule i::before { content: ""; flex: 1; height: 2px; background: var(--c); }
.page-style-guide .sg-sw--rule.sg-sw--ondark i { background: var(--dark); }
.page-style-guide .sg-sw b, .page-style-guide .sg-sw code { padding-inline: 16px; }
.page-style-guide .sg-sw b { font-weight: 500; font-size: 15px; line-height: 1.4; margin-bottom: 4px; }
.page-style-guide .sg-sw code { font-size: 12px; color: var(--text-2); }
.page-style-guide .sg-sw code:first-of-type { color: var(--text); }

/* Type specimens */
.page-style-guide .sg-specs { border-top: 1px solid var(--line); }
.page-style-guide .sg-specs li { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.page-style-guide .sg-spec__meta { display: flex; flex-direction: column; gap: 4px; }
.page-style-guide .sg-spec__meta span { font-size: 14px; color: var(--text-2); }
.page-style-guide .sg-specs p { min-width: 0; text-wrap: balance; }

/* Shape & space */
.page-style-guide .sg-shape-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.page-style-guide .sg-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.page-style-guide .sg-box--shadows { grid-column: 1 / -1; }
.page-style-guide .sg-radii { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.page-style-guide .sg-radii li { display: flex; flex-direction: column; gap: 4px; }
.page-style-guide .sg-radii i { display: block; aspect-ratio: 1; max-width: 88px; border-radius: var(--r-x); background: var(--surface-2); border: 1px solid var(--text); margin-bottom: 8px; }
.page-style-guide .sg-radii span, .page-style-guide .sg-space span:last-child { font-size: 13px; color: var(--text-2); }
.page-style-guide .sg-space { display: flex; flex-direction: column; gap: 10px; }
.page-style-guide .sg-space li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 16px; align-items: center; }
.page-style-guide .sg-bar { height: 12px; width: min(var(--w), 100%); background: var(--accent-2); border-radius: 2px; }
.page-style-guide .sg-shadows { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 32px; background: var(--bg); border-radius: var(--r); }
.page-style-guide .sg-shadow { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; min-height: 140px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.page-style-guide .sg-shadow span { font-size: 14px; color: var(--text-2); }
.page-style-guide .sg-shadow--2 { background: var(--dark-2); border-color: var(--dark-2); box-shadow: var(--shadow-2); }
.page-style-guide .sg-shadow--2 code { color: var(--on-dark); }
.page-style-guide .sg-shadow--2 span { color: var(--on-dark-2); }

/* Components */
.page-style-guide .sg-comps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.page-style-guide .sg-comp { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.page-style-guide .sg-comp--wide { grid-column: 1 / -1; }
.page-style-guide .sg-stage { background: var(--bg); border-radius: var(--r-lg); padding: 32px; flex: 1; min-width: 0; }
.page-style-guide .sg-stage--ivory { background: var(--surface); }
.page-style-guide .sg-stage--split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.page-style-guide .sg-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; color: var(--text-2); }
.page-style-guide .sg-cap code { background: var(--surface); border-radius: 6px; padding: 1px 7px; }
.page-style-guide .sg-ondark { background: var(--dark); color: var(--on-dark); border-radius: var(--r); padding: 24px; }
.page-style-guide .sg-ondark--tight { padding: 16px 20px; }
.page-style-guide .sg-ondark .logo { color: var(--on-dark); }
.page-style-guide .sg-headbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 84px; padding: 0 24px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line); }
.page-style-guide .sg-headbar .btn { justify-self: end; }
.page-style-guide .sg-stage--stat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.page-style-guide .sg-stage--stat .stat-card { height: 300px; }
.page-style-guide .sg-stage--stat .stat-card__deco { width: 150px; height: 150px; right: -36px; top: 60px; }
.page-style-guide .sg-stage--ivory .compare { padding: 20px; }
.page-style-guide .sg-stage--ivory .compare__col p { min-height: 0; padding: 16px; }
.page-style-guide .sg-stage--ivory .compare p.compare__head { padding: 0 16px 16px; min-height: 0; }
.page-style-guide .sg-stage--duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
.page-style-guide .sg-stage--duo .area-card { aspect-ratio: auto; min-height: 360px; }
.page-style-guide .sg-stage--duo .person img { aspect-ratio: 309 / 300; }
.page-style-guide .sg-stage .steps { gap: 40px; }
.page-style-guide .sg-quotes { background: var(--dark); padding: 40px; }
.page-style-guide .sg-quotes .quote-bento { margin-top: 0; grid-auto-rows: minmax(200px, auto); }
.page-style-guide .sg-stage .post-date, .page-style-guide .sg-stage .post img { margin-bottom: 4px; }
.page-style-guide .sg-stage--cta { background: var(--dark); color: var(--on-dark); padding: 24px; }
.page-style-guide .sg-stage--cta .form-card { padding: 32px; }
.page-style-guide .sg-foot { padding: 40px; border-radius: var(--r-lg); color: var(--on-dark-2); }
.page-style-guide .sg-foot__grid { display: grid; grid-template-columns: auto auto minmax(0, 560px); justify-content: space-between; gap: 48px; align-items: center; }
.page-style-guide .sg-foot .site-foot__brand { gap: 24px; }
.page-style-guide .sg-foot__cols { grid-template-columns: auto; margin: 0; }
.page-style-guide .sg-foot .news img { height: 160px; object-position: 50% 20%; }
.page-style-guide .sg-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap); }
.page-style-guide .sg-icons li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 8px 16px; background: var(--surface); border-radius: var(--r); text-align: center; }
.page-style-guide .sg-icons img { width: 32px; height: 32px; object-fit: contain; }
.page-style-guide .sg-icon--dark { background: var(--dark) !important; }
.page-style-guide .sg-icon--dark code { color: var(--on-dark-2) !important; }
.page-style-guide .sg-icon--deco img { width: 48px; height: 48px; margin-block: -8px; }
.page-style-guide .sg-icons code { font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }

/* Motion */
.page-style-guide .sg-motion { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); }
.page-style-guide .sg-eases, .page-style-guide .sg-list { display: flex; flex-direction: column; }
.page-style-guide .sg-eases li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 20px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.page-style-guide .sg-eases li > span:last-child { grid-column: 2; font-size: 13px; color: var(--text-2); }
.page-style-guide .sg-track { position: relative; height: 20px; border-radius: var(--r-pill); background: var(--surface-2); }
.page-style-guide .sg-dot { position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--dark); animation: sg-glide 2.4s var(--ease) infinite alternate; }
.page-style-guide .sg-dot--out { animation-timing-function: var(--ease-out); background: var(--accent-2); }
.page-style-guide .sg-dot--dur { animation-duration: calc(var(--dur) * 3); }
.page-style-guide .sg-dot--fast { animation-duration: calc(var(--dur-fast) * 4); }
@keyframes sg-glide { from { left: 4px; } to { left: calc(100% - 16px); } }
.page-style-guide .sg-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.page-style-guide .sg-list li span { font-size: 14px; color: var(--text-2); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .page-style-guide .sg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
    grid-template-areas: "intro intro" "pal type" "btns type" "stat area" "quote area"; }
  .page-style-guide .sg-area { min-height: 480px; }
  .page-style-guide .sg-stat { min-height: 240px; }
  .page-style-guide .sg-specs li { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .page-style-guide .sg-shape-grid, .page-style-guide .sg-motion, .page-style-guide .sg-stage--split { grid-template-columns: 1fr; }
  .page-style-guide .sg-foot__grid { grid-template-columns: auto auto; }
  .page-style-guide .sg-foot .news { grid-column: 1 / -1; }
  .page-style-guide .sg-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-style-guide .sg-comps { grid-template-columns: 1fr; }
  .page-style-guide .sg-headbar { grid-template-columns: 1fr auto; }
  .page-style-guide .sg-headbar .nav-links { display: none; }
}
@media (max-width: 640px) {
  .page-style-guide .sg-top { padding-bottom: 64px; }
  .page-style-guide .sg-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "type" "pal" "btns" "area" "stat" "quote"; }
  .page-style-guide .sg-intro { padding-right: 0; }
  .page-style-guide .sg-aa { font-size: 120px; letter-spacing: -4px; }
  .page-style-guide .sg-tile--type { padding: 24px; }
  .page-style-guide .sg-fams li { grid-template-columns: 1fr; gap: 2px; }
  .page-style-guide .sg-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-style-guide .sg-sec { padding-block: 80px; }
  .page-style-guide .sg-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-style-guide .sg-sw b, .page-style-guide .sg-sw code { padding-inline: 12px; }
  .page-style-guide .sg-specs li { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .page-style-guide .sg-box, .page-style-guide .sg-stage { padding: 20px; }
  .page-style-guide .sg-radii { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-style-guide .sg-space li { grid-template-columns: 1fr 72px; }
  .page-style-guide .sg-space .sg-bar { grid-column: 1 / -1; grid-row: 2; }
  .page-style-guide .sg-shadows { grid-template-columns: 1fr; padding: 16px; }
  .page-style-guide .sg-stage--stat, .page-style-guide .sg-stage--duo { grid-template-columns: 1fr; }
  .page-style-guide .sg-stage--stat .stat-card { height: 220px; }
  .page-style-guide .sg-quotes { padding: 16px; }
  .page-style-guide .sg-foot { padding: 24px 16px; }
  .page-style-guide .sg-foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .page-style-guide .sg-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-style-guide .sg-eases li { grid-template-columns: 1fr; }
  .page-style-guide .sg-eases li > span:last-child { grid-column: 1; }
  .page-style-guide .sg-headbar { padding: 0 16px; height: 72px; }
  .page-style-guide .sg-headbar .btn { display: none; }
}

/* ───────── Variants ───────── */
/* Quillo · variants library (pages/variants.html) + 404 (pages/404.html). Prefixes: vr- (variants), nf- (404).
   Catalogue chrome (.v-intro, .v-label, .v-head, .v-jump, .v-item) is ignored by the ui checker (typography still reads it, so sizes stay 14px+). */

/* ───────── Catalogue chrome ───────── */
.page-variants .v-intro { padding: 96px 0 56px; }
.page-variants .v-intro .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--head-gap); }
.page-variants .v-intro p:not(.eyebrow) { max-width: 640px; color: var(--text-2); }
.v-jump { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 8px; }
.v-jump li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-jump li > span { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-ink); margin-right: 4px; }
.v-jump a { padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); font-size: 14px; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.v-jump a:hover { background: var(--dark); color: var(--on-dark); }
.v-item { padding-bottom: 96px; scroll-margin-top: 24px; }
.v-label { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-block: 1px solid var(--line-2); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.v-label__id { padding: 4px 10px; border-radius: var(--r-sm); background: var(--dark); color: var(--on-dark); font-family: var(--mono); font-size: 14px; }
.v-label__name { font-family: var(--font-display); font-size: 20px; line-height: 1.3; letter-spacing: -.2px; color: var(--text); }
.v-label__use { flex: 1 1 100%; max-width: 34em; font-size: 16px; }
.v-label__cls { width: 100%; max-width: 64ch; font-family: var(--mono); font-size: 14px; color: var(--muted-ink); }
.v-head { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 40px auto 32px; font-family: var(--font-display); font-size: 32px; line-height: 1.3; letter-spacing: -.2px; color: var(--text); }

/* ───────── Hero B · split: copy on linen, tall photo right ───────── */
.vr-hero-b { padding-block: 48px 0; }
.vr-hero-b__grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 600px); justify-content: space-between; align-items: center; gap: 64px; }
.vr-hero-b__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.vr-hero-b__copy .t-h1 { text-wrap: balance; }
.vr-hero-b__copy .t-lead { color: var(--text-2); max-width: 470px; }
.vr-rating { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); color: var(--text); }
.vr-rating svg { width: 17px; height: 16px; fill: var(--accent-2); }
.vr-facts { align-self: stretch; display: flex; gap: 40px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.vr-facts p { display: flex; flex-direction: column; color: var(--text-2); }
.vr-facts b { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.3; color: var(--text); }
.vr-hero-b__photo { aspect-ratio: 600 / 720; border-radius: var(--r); overflow: hidden; }
.vr-hero-b__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }

/* ───────── Hero C · centred statement on espresso + three-photo strip ───────── */
.vr-hero-c { background: var(--dark); color: var(--on-dark); padding-block: 150px 0; overflow: hidden; }
.vr-hero-c__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; max-width: 860px; margin-inline: auto; }
.vr-hero-c__head .t-h1 { color: var(--on-dark); text-wrap: balance; }
.vr-hero-c__head .t-lead { color: var(--on-dark-2); max-width: 520px; }
.vr-hero-c__head .btn-row { justify-content: center; margin-top: 8px; }
.vr-hero-c__strip { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: end; gap: var(--gap); margin-top: 96px; }
.vr-hero-c__strip figure { border-radius: var(--r) var(--r) 0 0; overflow: hidden; aspect-ratio: 4 / 4.4; }
.vr-hero-c__strip figure:nth-child(2) { aspect-ratio: 4 / 4.6; }
.vr-hero-c__strip img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── Hero D · editorial headline across, photo band under ───────── */
.vr-hero-d { padding-block: 64px 0; }
.vr-hero-d__title { font-family: var(--font-display); font-weight: 400; font-size: 96px; line-height: 1.04; letter-spacing: -2.6px; text-wrap: balance; max-width: 13em; margin-top: 32px; }
.vr-hero-d__title span { color: var(--muted); }
.vr-hero-d__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 48px; }
.vr-hero-d__row .t-lead { max-width: 460px; color: var(--text-2); }
.vr-hero-d__band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); margin-top: 64px; }
.vr-hero-d__photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 840 / 470; }
.vr-hero-d__photo img { width: 100%; height: 100%; object-fit: cover; }
.vr-hero-d__card { background: var(--surface); border-radius: var(--r); padding: var(--card-pad); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.vr-hero-d__card .t-label { color: var(--text-2); }
.vr-hero-d__card .t-body { color: var(--text-2); margin-top: 8px; }

/* ───────── Features A · photo cards with the head left, button right ───────── */
.vr-feat-a__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.vr-feat-a .area-grid { margin-bottom: 0; }

/* ───────── Features B · compare table, centred ───────── */
.vr-feat-b { background: var(--surface); }
.vr-feat-b .compare { max-width: 880px; margin: var(--head-to-content) auto 0; }
.vr-feat-b .compare__col p { min-height: 0; }

/* ───────── Features C · numbered list beside a photo ───────── */
.vr-feat-c__grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 620px); justify-content: space-between; gap: 64px; align-items: stretch; }
.vr-feat-c__photo { border-radius: var(--r); overflow: hidden; min-height: 520px; }
.vr-feat-c__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.vr-feat-c__side { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.vr-list { border-bottom: 1px solid var(--line); }
.vr-list a { display: grid; grid-template-columns: 56px 1fr 24px; align-items: center; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); transition: padding var(--dur-fast) var(--ease); }
.vr-list a:hover { padding-left: 8px; }
.vr-list .t-label { color: var(--text-2); }
.vr-list .t-title span { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.vr-list img { width: 20px; height: 20px; transform: scaleX(-1); opacity: .7; }

/* ───────── Proof B · stats row with avatar stack ───────── */
.vr-proof-b__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.vr-proof-b__top .two-tone { max-width: 15em; }
.vr-proof-b__team { display: flex; align-items: center; gap: 16px; color: var(--text-2); max-width: 280px; }
.vr-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--head-to-content); border-top: 1px solid var(--line-2); }
.vr-stats li { display: flex; flex-direction: column; gap: 8px; padding: 32px 24px 0; border-left: 1px solid var(--line-2); }
.vr-stats li:first-child { border-left: 0; padding-left: 0; }
.vr-stats .t-label { color: var(--text-2); }
.vr-stats .t-stat { color: var(--text); }
.vr-stats .t-stat em { font-style: normal; color: var(--accent-2-ink); }

/* ───────── Team B · spotlight portrait + roster ───────── */
.vr-team-b__grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 640px); justify-content: space-between; gap: 64px; align-items: center; }
.vr-team-b__photo { aspect-ratio: 520 / 620; border-radius: var(--r); overflow: hidden; }
.vr-team-b__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vr-team-b__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.vr-team-b__side blockquote { font-family: var(--font-display); font-size: 32px; line-height: 1.3; letter-spacing: -.2px; text-wrap: balance; }
.vr-team-b__who { color: var(--text-2); }
.vr-team-b__who b { display: block; font-weight: 500; font-size: 18px; color: var(--text); }
.vr-roster { width: 100%; margin-top: 24px; border-bottom: 1px solid var(--line); }
.vr-roster li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.vr-roster .t-label { color: var(--text-2); text-align: right; }
.vr-team-b__side .btn { margin-top: 16px; }

/* ───────── Process B · four step cards on sand ───────── */
.vr-proc-b { background: var(--surface-2); }
.vr-proc-b__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--head-to-content); }
.vr-proc-b__card { background: var(--surface); border-radius: var(--r); padding: var(--card-pad); display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.vr-proc-b__card .step__n { background: var(--dark); }
.vr-proc-b__card .t-title { margin-top: auto; }
.vr-proc-b__card .t-body { color: var(--text-2); }

/* ───────── CTA B · espresso inset card with one button ───────── */
.vr-cta-b__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 64px; background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: 24px 24px 24px 84px; }
.vr-cta-b__card .sec-head h2 { color: var(--on-dark); }
.vr-cta-b__card .t-lead { color: var(--on-dark-2); max-width: 440px; }
.vr-cta-b__text { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding-block: 56px; }
.vr-cta-b__photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 420 / 440; }
.vr-cta-b__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }

/* ───────── CTA C · sand panel: phone + hours, small form ───────── */
.vr-cta-c__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; background: var(--surface-2); border-radius: var(--r-lg); padding: 84px; }
.vr-cta-c__left { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.vr-phone { font-family: var(--font-display); font-size: 40px; line-height: 1.2; letter-spacing: -.5px; color: var(--text); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; align-self: flex-start; transition: color var(--dur-fast) var(--ease); }
.vr-phone:hover { color: var(--accent-2-ink); }
.vr-hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px 40px; margin-top: 24px; color: var(--text-2); }
.vr-hours dt { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.vr-hours dd { margin: 0; color: var(--text); }
.vr-cta-c__form { background: var(--surface); border-radius: var(--r); padding: 32px; }

/* ───────── CTA D · single line on ivory ───────── */
.vr-cta-d { background: var(--surface); padding-block: 72px; }
.vr-cta-d__in { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.vr-cta-d__in .t-h4 { max-width: 22em; text-wrap: balance; }

/* ───────── Footer B · big Lora wordmark ───────── */
.vr-foot-b { background: var(--dark); color: var(--on-dark-2); padding-top: 120px; overflow: hidden; }
.vr-foot-b__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.vr-foot-b__top .t-h4 { color: var(--on-dark); max-width: 14em; text-wrap: balance; }
.vr-foot-b__links { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.vr-foot-b__links a { color: var(--on-dark); }
.vr-foot-b__links a:hover, .vr-foot-c a:hover, .vr-foot-d a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vr-foot-b__mid { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 80px; padding-block: 24px; border-block: 1px solid var(--line-dark); font-size: 14px; }
.vr-foot-b__mark { font-family: var(--font-display); font-weight: 400; font-size: clamp(120px, 26vw, 400px); line-height: .8; letter-spacing: -.04em; color: var(--on-dark); text-align: center; margin-top: 48px; transform: translateY(14%); user-select: none; }

/* ───────── Footer C · photo fading into espresso ───────── */
.vr-foot-c { position: relative; isolation: isolate; background: var(--dark); color: var(--on-dark-2); padding-bottom: 80px; }
.vr-foot-c__photo { position: absolute; inset: 0 0 auto; height: 620px; z-index: -2; }
.vr-foot-c__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.vr-foot-c::before { content: ""; position: absolute; inset: 0 0 auto; height: 621px; z-index: -1; background: linear-gradient(180deg, rgba(42, 25, 13, .5) 0%, rgba(57, 29, 10, .72) 50%, var(--dark) 100%); }
.vr-foot-c__cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding-block: 150px 120px; }
.vr-foot-c__cta h2 { color: var(--on-dark); max-width: 13em; text-wrap: balance; }
.vr-foot-c__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 56px; border-top: 1px solid var(--line-dark); }
.vr-foot-c__cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.vr-foot-c__cols a { color: var(--on-dark); }
.vr-foot-c .logo { color: var(--on-dark); }
.vr-foot-c__copy { margin-top: 64px; font-size: 14px; }

/* ───────── Footer D · minimal one row on linen ───────── */
.vr-foot-d { padding-block: 32px; }
.vr-foot-d__in { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--line-2); }
.vr-foot-d .logo { font-size: 24px; }
.vr-foot-d .logo svg { width: 20px; height: 20px; }
.vr-foot-d nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.vr-foot-d__copy { font-size: 14px; color: var(--text-2); }

/* ───────── 404 ───────── */
.nf { padding-block: 96px var(--section); }
.nf__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--head-gap); max-width: 720px; margin-inline: auto; }
.nf__in .t-h1 { text-wrap: balance; }
.nf__in .t-lead { color: var(--text-2); max-width: 460px; }
.nf__in .btn-row { justify-content: center; margin-top: 8px; }
.nf__photo { width: min(560px, 100%); margin: 72px auto 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 560 / 360; }
.nf__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

/* ───────── Responsive ───────── */
@media (max-width: 1100px) {
  .vr-hero-b__grid, .vr-feat-c__grid, .vr-team-b__grid, .vr-cta-c__panel { grid-template-columns: 1fr; }
  .vr-hero-b__photo { max-width: 640px; aspect-ratio: 4 / 3.6; }
  .vr-hero-d__title { font-size: 72px; letter-spacing: -2px; }
  .vr-feat-c__photo { min-height: 0; aspect-ratio: 4 / 3; max-width: 640px; }
  .vr-team-b__photo { max-width: 520px; }
  .vr-proc-b__grid { grid-template-columns: repeat(2, 1fr); }
  .vr-cta-b__card { grid-template-columns: 1fr minmax(0, 340px); padding-left: 48px; gap: 40px; }
  .vr-cta-c__panel { padding: 56px 40px; }
  .vr-foot-c__cols { grid-template-columns: repeat(3, 1fr); }
  .vr-foot-c__cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .vr-hero-d__row, .vr-feat-a__head, .vr-proof-b__top, .vr-cta-d__in, .vr-foot-b__top { flex-direction: column; align-items: flex-start; }
  .vr-hero-d__band { grid-template-columns: 1fr; }
  .vr-stats { grid-template-columns: repeat(2, 1fr); }
  .vr-stats li { padding: 28px 20px 28px 0; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .vr-stats li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line-2); }
  .vr-cta-b__card { grid-template-columns: 1fr; padding: 16px; gap: 0; }
  .vr-cta-b__text { padding: 40px 16px 32px; }
  .vr-cta-b__photo { aspect-ratio: 16 / 10; }
  .vr-hero-c__strip { margin-top: 64px; }
}
@media (max-width: 640px) {
  .page-variants .v-intro { padding: 56px 0 32px; }
  .v-item { padding-bottom: 64px; }
  .v-head { font-size: 26px; }
  .vr-hero-b { padding-top: 24px; }
  .vr-hero-c { padding-top: 88px; }
  .vr-hero-c__strip { grid-template-columns: 1fr 1fr; }
  .vr-hero-c__strip figure:nth-child(3) { display: none; }
  .vr-hero-d { padding-top: 32px; }
  .vr-hero-d__title { font-size: 46px; letter-spacing: -1.3px; }
  .vr-facts { gap: 24px; }
  .vr-facts b { font-size: 28px; }
  .vr-team-b__side blockquote { font-size: 24px; }
  .vr-proc-b__grid { grid-template-columns: 1fr; }
  .vr-proc-b__card { min-height: 0; }
  .vr-phone { font-size: 30px; }
  .vr-cta-c__panel { padding: 40px 20px 20px; gap: 40px; }
  .vr-cta-c__form { padding: 20px; }
  .vr-cta-d { padding-block: 56px; }
  .vr-foot-b { padding-top: 88px; }
  .vr-foot-b__mid { flex-direction: column; align-items: flex-start; }
  .vr-foot-c__photo, .vr-foot-c::before { height: 520px; }
  .vr-foot-c__cta { padding-block: 104px 80px; }
  .vr-foot-c__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .nf { padding-top: 48px; }
  .nf__photo { margin-top: 48px; }
}