/* Newton & Co · design concept V2 · midnight editorial */
:root {
  --obsidian: #121110;
  --canvas: #181716;
  --graphite: #1f1d1c;
  --slate: #272523;
  --iron: #333333;
  --pewter: #4a4744;
  --smoke: #6a6461;
  --fog: #a8a09b;
  --taupe: #9d918e;
  --ash: #d9d3cf;
  --bone: #efebe7;
  --offwhite: #f7f5f3;
  --lighttaupe: #ece7e4;
  --bronze: #b5683c;
  --bronze-light: #d9956a;
  --ember: #e07a3f;
  --ember-hot: #f08d52;
  --serif: 'Libre Baskerville', 'Source Serif Pro', Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --max: 1200px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--canvas); color: var(--bone); font: 400 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--ember); color: var(--obsidian); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
.wrap { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 4rem, var(--max)); } }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--bone); color: var(--obsidian); padding: .7rem 1rem; border-radius: 4px; font-weight: 600; }
.skip:focus { top: 1rem; }

/* type */
.display, .h2, .h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; color: var(--offwhite); }
.display { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.08; }
.h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; text-wrap: balance; }
.h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.3; }
.lede { font-size: 1.125rem; line-height: 1.65; color: var(--fog); max-width: 36rem; }
.muted { color: var(--fog); }
.label { font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.label.ember { color: var(--ember); }
.mono { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fog); }
.prose p + p { margin-top: 1rem; }

/* hairlines */
.hr { border: 0; border-top: 1px solid var(--iron); margin: 0; }
.rule-top { border-top: 1px solid var(--iron); }
.rule-bottom { border-bottom: 1px solid var(--iron); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.25rem; border-radius: 4px; font-size: .9rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s var(--ease-soft), transform .35s var(--ease-out), box-shadow .3s var(--ease-soft); will-change: transform; }
.btn-primary { background: var(--ember); color: var(--obsidian); }
.btn-primary:hover { background: var(--ember-hot); box-shadow: 0 8px 30px -10px rgba(224, 122, 63, .55); }
.btn-ghost { border: 1px solid #78726d; color: var(--bone); }
.btn-ghost:hover { background: var(--slate); border-color: var(--smoke); }
.btn-bone { background: var(--bone); color: var(--obsidian); }
.btn-bone:hover { background: #fff; }
.btn svg { width: 1rem; height: 1rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--bone); position: relative; padding: .35rem 0; }
.arrow-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pewter); transform-origin: left; transition: transform .4s var(--ease-out), background-color .3s; }
.arrow-link:hover::after { background: var(--ember); }
.arrow-link svg { width: .9rem; height: .9rem; transition: transform .35s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }
.tap { position: relative; }
.tap::after { content: ""; position: absolute; inset: -8px -6px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 60; transition: transform .38s var(--ease-out), border-color .4s; background: rgba(24, 23, 22, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s; }
.site-header.scrolled { border-bottom-color: var(--iron); }
@media (max-width: 1023px) { .site-header.hide { transform: translateY(-100%); } .site-header.hide .mobile-menu { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-header { transition: border-color .4s; } .site-header.hide { transform: none; } }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 92px; gap: 1.25rem; transition: height .35s var(--ease-out); }
.logo img { height: 56px; width: auto; transition: height .35s var(--ease-out); }
.site-header.compact .bar { height: 66px; }
.site-header.compact .logo img { height: 38px; }
@media (prefers-reduced-motion: reduce) { .site-header .bar, .logo img { transition: none; } }
.nav { display: none; gap: .25rem; }
.nav a, .nav button { padding: .5rem .8rem; border-radius: 4px; font-size: .9rem; color: var(--ash); transition: color .25s, background-color .25s; display: inline-flex; align-items: center; gap: .3rem; }
.nav a:hover, .nav button:hover, .nav [aria-current="page"] { color: var(--offwhite); background: var(--slate); }
.nav svg { width: .8rem; height: .8rem; }
#services-trigger { position: relative; }
#services-trigger::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.25rem; }
.header-cta { display: none; align-items: center; gap: .75rem; }
.phone { display: inline-flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ash); }
.phone strong { color: var(--offwhite); font-weight: 600; white-space: nowrap; }
.menu-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--iron); }
.menu-btn svg { width: 20px; height: 20px; }
.mega { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--graphite); border-top: 1px solid var(--iron); border-bottom: 1px solid var(--iron); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s var(--ease-soft), transform .4s var(--ease-out), visibility .3s; }
@media (min-width: 1024px) { .mega { display: block; } .nav, .header-cta { display: flex; } .menu-btn { display: none; } .site-header .bar { height: 108px; } .logo img { height: 68px; } .site-header.compact .bar { height: 76px; } .site-header.compact .logo img { height: 46px; } }
.mega.open { opacity: 1; visibility: visible; transform: none; }
.mega .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 2rem 0 2.25rem; }
.mega h4 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-light); font-weight: 500; margin-bottom: .75rem; }
.mega a.item { display: block; padding: .4rem 0; font-size: .9rem; color: var(--ash); border-bottom: 1px solid var(--slate); transition: color .2s, padding-left .3s var(--ease-out); }
.mega a.item:hover { color: var(--offwhite); padding-left: .4rem; }
.mobile-menu { display: none; border-top: 1px solid var(--iron); background: var(--graphite); max-height: calc(100vh - 92px); overflow-y: auto; }
.mobile-menu.open { display: block; }
.mobile-menu a, .mobile-menu summary { display: block; padding: .9rem 0; border-bottom: 1px solid var(--iron); font-size: 1rem; color: var(--ash); }
.mobile-menu summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.mobile-menu details a { padding: .6rem 0 .6rem 1rem; font-size: .9rem; border-bottom-color: var(--slate); }
.mobile-menu details details > summary { padding: .65rem 0 .65rem 1rem; font-size: .92rem; color: var(--bone); border-bottom-color: var(--slate); }
.mobile-menu details details a { padding: .55rem 0 .55rem 2rem; font-size: .88rem; color: var(--fog); }
.mobile-menu details details[open] > summary { color: var(--bronze-light); }
.mobile-menu details details[open] > summary svg { transform: rotate(180deg); }
.mobile-menu summary svg { transition: transform .25s var(--ease-out); }
.mobile-menu .all-services { color: var(--ember); font-weight: 500; }
.mobile-menu .cta-row { display: flex; gap: .6rem; padding: 1.4rem 0 1.6rem; }
.mobile-menu .cta-row .btn { flex: 1 1 0; min-height: 48px; padding: .75rem .5rem; justify-content: center; text-align: center; }

.header-tel { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .6rem .75rem; border: 1px solid var(--iron); border-radius: 4px; font-size: .85rem; font-weight: 500; color: var(--offwhite); }
.header-tel svg { width: 1rem; height: 1rem; color: var(--bronze-light); }
.header-tel span { display: none; }
@media (min-width: 420px) { .header-tel span { display: inline; } }
@media (min-width: 1024px) { .header-tel { display: none; } }
.soon { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; opacity: .62; }
.soon .name { color: var(--ash); }
.soon-tag, .soon-note { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--taupe); white-space: nowrap; }
.soon-note { display: inline-block; }
.form-note { margin-top: .9rem; font-size: .8rem; color: var(--slate-text, #6d6560); }
.opt { color: #6b615c; font-weight: 400; }

/* hero */
.hero { position: relative; min-height: calc(100svh - 92px); display: grid; align-items: center; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--graphite) 1px, transparent 1px), linear-gradient(90deg, var(--graphite) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 45%, #000 20%, transparent 70%); opacity: .9; }
.hero-inner { position: relative; display: grid; gap: 1.25rem; padding: 1.25rem 0 3rem; }
@media (max-width: 1023px) { .hero-foot { order: 2; } .cradle-wrap { order: 3; margin-top: .5rem; } }
@media (max-width: 767px) { .hero-actions .btn { flex: 1 1 100%; justify-content: center; } .trust { padding-right: 4.25rem; } }
.hero-head .label { margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: .6rem; }
.hero-head .label::before { content: ""; width: 28px; height: 1px; background: var(--bronze); }
.hero-foot { display: grid; gap: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.page-hero .hero-actions, .contact-band .hero-actions { margin-top: 2rem; }
.trust { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font-size: .85rem; color: var(--fog); }
.trust .stars { display: inline-flex; gap: 2px; color: var(--ember); }
.trust .stars svg { width: 14px; height: 14px; }
.trust strong { color: var(--offwhite); font-weight: 500; }
.cradle-wrap { position: relative; width: 100%; }
#cradle { position: relative; aspect-ratio: 16 / 10; }
#cradle canvas { display: block; width: 100% !important; height: 100% !important; }
.cradle-fallback { position: absolute; inset: 0 0 2rem; display: grid; place-items: center; opacity: .5; }
.cradle-fallback svg { width: 60%; height: auto; }
.cradle-caption { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: .25rem; }
.cradle-caption .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px rgba(224, 122, 63, .18); }
@media (min-width: 1024px) {
  .hero { min-height: calc(100svh - 108px); }
  .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "head cradle" "foot cradle"; column-gap: 4rem; row-gap: 1.75rem; padding: 2rem 0 4rem; align-items: start; }
  .hero-head { grid-area: head; align-self: end; }
  .hero-foot { grid-area: foot; }
  .cradle-wrap { grid-area: cradle; align-self: center; }
  #cradle { aspect-ratio: 3 / 2; }
  .hero-head .display { font-size: clamp(2.6rem, 4.3vw, 4rem); }
}

/* marquee */
.marquee { border-top: 1px solid var(--iron); border-bottom: 1px solid var(--iron); overflow: hidden; padding: 1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee 48s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.marquee-track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

@media (hover: none) { .director .frame img { filter: none; } }

/* sections */
.section { padding: 5rem 0; }
@media (min-width: 1024px) { .section { padding: 7.5rem 0; } }
.section-head { max-width: 42rem; }
.section-head .label { display: block; margin-bottom: 1.25rem; }
.section-head .lede { margin-top: 1.25rem; }
.split { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: 5rem; } .split.eq { grid-template-columns: 1fr 1fr; } .sticky { position: sticky; top: 7rem; align-self: start; } }

/* service columns */
.cols { display: grid; border-top: 1px solid var(--iron); margin-top: 3.5rem; }
.col { padding: 2rem 0; border-bottom: 1px solid var(--iron); display: flex; flex-direction: column; gap: .9rem; position: relative; transition: background-color .35s var(--ease-soft); }
.col .glyph { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--iron); border-radius: 4px; color: var(--bronze-light); transition: border-color .3s, color .3s; }
.col .glyph svg { width: 28px; height: 28px; }
/* pen-on-paper: each stroke draws itself, and the fresh ink cools from ember to bronze */
html.js .ink :is(path, circle, line, rect, polyline, polygon, ellipse) { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
html.js .ink.drawn :is(path, circle, line, rect, polyline, polygon, ellipse) { animation: ink-draw var(--dur, 900ms) cubic-bezier(.33, 0, .2, 1) forwards, ink-wet var(--dur, 900ms) ease-out forwards; animation-delay: var(--d, 0ms); }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes ink-wet { 0% { stroke: var(--ember); } 70% { stroke: var(--ember); } 100% { stroke: currentColor; } }
@media (prefers-reduced-motion: reduce) { html.js .ink :is(path, circle, line, rect, polyline, polygon, ellipse) { stroke-dashoffset: 0; } html.js .ink.drawn :is(path, circle, line, rect, polyline, polygon, ellipse) { animation: none; } }
.page-art { overflow: hidden; }
.page-art .ink { animation: art-float 9s ease-in-out infinite; }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .page-art .ink { animation: none; } }
.col:hover .glyph { border-color: var(--ember); color: var(--ember); }
.col p { color: var(--fog); flex: 1; }
.col .arrow-link { align-self: flex-start; }
@media (min-width: 768px) { .cols { grid-template-columns: repeat(2, 1fr); } .col { padding: 2.25rem 1.75rem; } .col:nth-child(odd) { padding-left: 0; } .col:nth-child(even) { border-left: 1px solid var(--iron); } }
@media (min-width: 1024px) { .cols { grid-template-columns: repeat(4, 1fr); } .col:nth-child(even) { border-left: 0; } .col + .col { border-left: 1px solid var(--iron); } .col:nth-child(odd) { padding-left: 1.75rem; } .col:first-child { padding-left: 0; } .col:last-child { padding-right: 0; } }

/* reasons list */
.reasons { border-top: 1px solid var(--iron); }
.reason { display: grid; gap: 1rem; padding: 1.75rem 0; border-bottom: 1px solid var(--iron); align-items: start; }
.reason .num { font-family: var(--serif); font-size: 1.1rem; color: var(--bronze-light); font-style: italic; padding-top: .15rem; }
.reason p { color: var(--fog); margin-top: .4rem; max-width: 34rem; }
@media (min-width: 768px) { .reason { padding: 2rem 0; } }

/* directors */
.directors { display: grid; gap: 2rem; margin-top: 3.5rem; }
.director { position: relative; }
.director .frame { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--iron); aspect-ratio: 4 / 5; background: var(--graphite); }
.director img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05); transform: scale(1.02); transition: filter .8s var(--ease-soft), transform 1.2s var(--ease-out); }
.director:hover img, .director:focus-within img { filter: none; transform: scale(1); }
.director .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(18, 17, 16, .55)); pointer-events: none; }
.director .meta { padding: 1.25rem 0 0; }
.director .h3 { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.director .h3 small { font-family: var(--sans); font-size: .75rem; letter-spacing: .08em; color: var(--taupe); }
.director .role { color: var(--bronze-light); font-size: .85rem; font-weight: 500; margin-top: .3rem; }
.director p.bio { color: var(--fog); margin-top: .75rem; }
@media (min-width: 768px) { .directors { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* reviews */
.reviews { background: var(--obsidian); border-top: 1px solid var(--iron); border-bottom: 1px solid var(--iron); }
.rating a { display: inline-flex; align-items: center; gap: .75rem; color: inherit; }
.rating a:hover { color: var(--offwhite); }
.rating { display: inline-flex; align-items: center; gap: .75rem; border: 1px solid var(--iron); border-radius: 4px; padding: .55rem .9rem; margin-top: 1.5rem; font-size: .85rem; color: var(--fog); }
.rating .big { font-family: var(--serif); font-size: 1.35rem; color: var(--offwhite); }
.rating .stars { color: var(--ember); display: inline-flex; gap: 2px; }
.rating .stars svg { width: 13px; height: 13px; }
.quotes { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--iron); }
.quote { padding: 2rem 0; border-bottom: 1px solid var(--iron); }
.quote blockquote { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.35; color: var(--offwhite); }
.quote blockquote::before { content: "\201C"; color: var(--bronze); margin-right: .1em; }
.sticky .lede, .h2 + .lede, .display + .lede, .page-hero .lede { margin-top: 1.25rem; }
.quote figcaption { margin-top: 1rem; font-size: .8rem; color: var(--taupe); letter-spacing: .04em; }
@media (min-width: 1024px) { .quotes { grid-template-columns: repeat(3, 1fr); } .quote { padding: 2.5rem 2rem; } .quote:first-child { padding-left: 0; } .quote + .quote { border-left: 1px solid var(--iron); } }

/* local */
.local-photo { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--iron); }
.local-photo img { width: 100%; height: 100%; object-fit: cover; }
.places { display: block; margin-top: 1.5rem; font-size: .95rem; color: var(--ash); line-height: 2; }
.places li { display: inline; }
.places li + li::before { content: " · "; color: var(--taupe); }
.places li.ember { color: var(--bronze-light); }

/* news rows */
.news { border-top: 1px solid var(--iron); margin-top: 3rem; }
.news a { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--iron); transition: padding-left .35s var(--ease-out); }
.news a:hover { padding-left: .5rem; }
.news .h3 { transition: color .25s; }
.news a:hover .h3 { color: var(--bronze-light); }
.news .news-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.news .cat { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); background: rgba(224, 122, 63, .12); border: 1px solid rgba(224, 122, 63, .32); border-radius: 3px; padding: .2rem .5rem; }
.news .cat.b { color: var(--bronze-light); background: rgba(217, 149, 106, .1); border-color: rgba(217, 149, 106, .3); }
.news .date { font-size: .8rem; color: var(--taupe); letter-spacing: .04em; }
.news svg { width: 1.1rem; height: 1.1rem; color: var(--taupe); transition: transform .35s var(--ease-out), color .25s; }
.news a:hover svg { transform: translateX(4px); color: var(--ember); }

/* light contrast block (CTA) */
.contrast { background: var(--bone); color: var(--obsidian); }
.contrast .display, .contrast .h2, .contrast .h3 { color: var(--obsidian); }
.contrast .lede, .contrast .muted { color: #5e5854; }
.contrast .label { color: #8a4b27; }
.contrast .btn-ghost { border-color: #8d8681; color: var(--obsidian); }
.contrast .btn-ghost:hover { background: #fff; border-color: #a39a95; }
.contrast ::selection { background: var(--obsidian); color: var(--bone); }
.contact-band { padding: 5rem 0; }
@media (min-width: 1024px) { .contact-band { padding: 7rem 0; } }
.contact-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; font-size: .9rem; }
.contact-meta a, .contact-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.contact-meta svg { width: 1rem; height: 1rem; color: var(--bronze); }
.form-card { background: #fff; border: 1px solid #e0dad6; border-radius: 8px; padding: 1.75rem; }
@media (min-width: 1024px) { .form-card { padding: 2.25rem; } }
.form-card .h3 { font-size: 1.35rem; }
.field { margin-top: 1.1rem; }
.field label { display: block; font-size: .8rem; font-weight: 500; margin-bottom: .4rem; color: var(--obsidian); }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #cfc7c2; border-radius: 4px; padding: .8rem .9rem; font: inherit; color: var(--obsidian); background: #fff; transition: border-color .25s, box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(224, 122, 63, .25); }
.field input::placeholder, .field textarea::placeholder { color: #8b837e; }
.field textarea { resize: vertical; min-height: 5.25rem; line-height: 1.55; }
.form-card .btn { width: 100%; margin-top: 1.25rem; }
.form-card .note { text-align: center; font-size: .78rem; color: #6d6560; margin-top: .9rem; }
.form-card .note a { color: var(--bronze); font-weight: 500; }
.form-card [role="status"] { margin-top: .75rem; text-align: center; font-weight: 500; font-size: .9rem; color: var(--obsidian); }

/* footer */
.site-footer { background: var(--obsidian); border-top: 1px solid var(--iron); color: var(--fog); font-size: .875rem; }
.foot-grid { display: grid; gap: 2.5rem; padding: 4rem 0 3rem; }
.foot-brand p { max-width: 20rem; margin-top: 1.25rem; }
.foot-brand address { font-style: normal; margin-top: 1.25rem; display: grid; gap: .5rem; }
.foot-brand address span { display: inline-flex; gap: .6rem; align-items: flex-start; }
.foot-brand svg { width: .95rem; height: .95rem; color: var(--bronze); flex-shrink: 0; margin-top: .2rem; }
.foot-social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.foot-social a { width: 40px; height: 40px; border: 1px solid var(--iron); border-radius: 4px; display: grid; place-items: center; color: var(--ash); transition: color .2s, border-color .2s, background-color .2s; }
.foot-social a:hover { color: var(--offwhite); border-color: var(--bronze); background: rgba(255, 255, 255, .06); }
.foot-social svg { width: 1.05rem; height: 1.05rem; color: inherit; margin-top: 0; }
.foot-col h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); font-weight: 500; margin-bottom: .9rem; }
.foot-col h4 + ul + h4 { margin-top: 1.75rem; }
@media (max-width: 639px) { .foot-services .foot-col + .foot-col { margin-top: 1.75rem; } }
.foot-col li { margin: .1rem 0; }
.foot-col li a { display: inline-block; padding: .45rem 0; }
.foot-col a { color: var(--ash); transition: color .2s; }
.foot-col a:hover { color: var(--offwhite); }
.accred { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .25rem; }
.accred div { border: 1px solid var(--iron); border-radius: 4px; min-height: 56px; display: grid; place-items: center; padding: .5rem .35rem; font-size: .8rem; font-weight: 500; letter-spacing: .06em; color: var(--bone); text-align: center; }
.accred-note { margin-top: .9rem; font-size: .8rem; color: var(--fog); max-width: 22rem; }
.legal { margin-top: 1rem; font-size: .78rem; line-height: 1.6; color: var(--taupe); max-width: 24rem; }
.existing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--iron); border-radius: 8px; padding: 1.25rem 1.5rem; }
.existing strong { color: var(--offwhite); font-weight: 500; display: block; }
.existing .btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.foot-bottom { border-top: 1px solid var(--iron); margin-top: 3rem; padding: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--fog); }
.foot-bottom a { color: var(--fog); display: inline-block; padding: .35rem 0; }
.foot-bottom a:hover { color: var(--offwhite); }
.version { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--iron); border-radius: 4px; padding: .35rem .6rem; color: var(--fog); }
.version a, .version span { padding: .1rem .35rem; border-radius: 3px; }
.version .on { background: var(--ember); color: var(--obsidian); font-weight: 600; }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: 4fr 5fr 3fr; gap: 3rem; padding: 5rem 0 3rem; } .foot-services { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 640px) and (max-width: 1023px) { .foot-services { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* bubble + dialog */
.bubble { position: fixed; right: 1.1rem; bottom: .75rem; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; visibility: hidden; opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility .3s; }
.bubble.on { visibility: visible; opacity: 1; transform: none; }
.bubble-panel { display: none; width: 16.5rem; background: var(--graphite); border: 1px solid var(--iron); border-radius: 8px; padding: .5rem; }
.bubble-panel.open { display: block; animation: rise .35s var(--ease-out); }
.bubble-panel p { padding: .5rem .6rem .35rem; font-weight: 500; color: var(--offwhite); }
.bubble-panel small { display: block; padding: 0 .6rem .5rem; color: var(--taupe); font-size: .75rem; }
.bubble-panel a { display: flex; align-items: center; gap: .75rem; padding: .6rem; border-radius: 4px; color: var(--ash); transition: background-color .2s; }
.bubble-panel a:hover { background: var(--slate); color: var(--offwhite); }
.bubble-panel a .ic { width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; border: 1px solid var(--iron); color: var(--bronze-light); }
.bubble-panel a .ic svg { width: 16px; height: 16px; }
.bubble-btn { min-width: 54px; height: 54px; padding: 0; border-radius: 4px; background: var(--ember); color: var(--obsidian); display: inline-flex; align-items: center; justify-content: center; gap: 0; font-weight: 500; font-size: .92rem; white-space: nowrap; transition: background-color .25s, transform .35s var(--ease-out), gap .35s var(--ease-out), padding .35s var(--ease-out); box-shadow: 0 10px 30px -12px rgba(224, 122, 63, .6); }
.bubble-label { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .4s var(--ease-out), opacity .3s var(--ease-out); }
.bubble.wide .bubble-btn { padding: 0 1rem 0 .9rem; gap: .55rem; }
.bubble.wide .bubble-label { max-width: 9rem; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bubble, .bubble-btn, .bubble-label { transition: none; } }
.bubble-btn:hover { background: var(--ember-hot); }
.bubble-btn svg { width: 24px; height: 24px; transform: translateY(1.5px); }   /* the speech-bubble tail sits low, so the glyph reads high without this */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.dialog-wrap { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; }
.dialog-wrap.open { display: flex; }
.dialog-wrap .scrim { position: absolute; inset: 0; background: rgba(18, 17, 16, .7); backdrop-filter: blur(6px); }
.dialog { position: relative; width: 100%; max-width: 27rem; background: var(--graphite); border: 1px solid var(--iron); border-radius: 8px; padding: 1.75rem; animation: rise .35s var(--ease-out); }
.dialog .close { position: absolute; top: .9rem; right: .9rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 4px; color: var(--fog); }
.dialog .close:hover { background: var(--slate); color: var(--offwhite); }
.dialog .close svg { width: 18px; height: 18px; }
.dialog .h3 { padding-right: 2rem; }
.dialog .muted { margin-top: .5rem; font-size: .9rem; }
.dialog .field label { color: var(--ash); }
.dialog .field input, .dialog .field select, .dialog .field textarea { background: var(--slate); border-color: var(--pewter); color: var(--offwhite); }
.dialog .btn { width: 100%; margin-top: 1.25rem; }
.dialog .note { text-align: center; font-size: .78rem; color: var(--taupe); margin-top: .9rem; }
.dialog .note a { color: var(--bronze-light); }
.dialog [role="status"] { margin-top: .75rem; text-align: center; font-weight: 500; font-size: .9rem; }

/* page hero (inner pages) */
.page-hero { padding: 3.5rem 0 4rem; border-bottom: 1px solid var(--iron); position: relative; overflow: hidden; }
.page-hero .hero-grid { mask-image: radial-gradient(ellipse at 85% 30%, #000 10%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 85% 30%, #000 10%, transparent 60%); }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--taupe); margin-bottom: 2rem; position: relative; }
.crumbs a { color: var(--fog); }
.crumbs a:hover { color: var(--offwhite); }
.crumbs span[aria-current] { color: var(--ash); }
.page-hero .display { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.page-hero .wrap { position: relative; }
.page-art { border: 1px solid var(--iron); border-radius: 8px; background: linear-gradient(160deg, #201e1c, #171514); display: grid; place-items: center; padding: 2rem; aspect-ratio: 4 / 3; }
.page-art svg { width: 100%; max-width: 380px; height: auto; color: var(--bronze-light); }
.page-hero .photo { border-radius: 8px; overflow: hidden; border: 1px solid var(--iron); aspect-ratio: 4 / 3; }
.page-hero .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .page-hero { padding: 4.5rem 0 5.5rem; } }

/* service group rows (services hub) */
.group { padding: 4rem 0; border-bottom: 1px solid var(--iron); }
@media (min-width: 1024px) { .group { padding: 5.5rem 0; } }
.services-list { border-top: 1px solid var(--iron); }
.services-list a, .services-list div.row, .services-list .soon { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--iron); transition: padding-left .35s var(--ease-out); }
.services-list a:hover { padding-left: .5rem; }
.services-list .name { font-weight: 500; color: var(--offwhite); }
.services-list .desc { color: var(--fog); font-size: .9rem; margin-top: .2rem; }
.services-list a > svg { width: 2.25rem; height: 2.25rem; padding: .55rem; box-sizing: border-box; border: 1px solid rgba(224, 122, 63, .45); border-radius: 50%; color: var(--ember); flex-shrink: 0; transition: transform .35s var(--ease-out), background-color .25s, border-color .25s; }
.services-list a:hover > svg, .services-list a:focus-visible > svg { transform: translateX(4px); background: var(--ember); border-color: var(--ember); color: var(--obsidian); }
.services-list .tag { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); border: 1px solid rgba(224, 122, 63, .4); border-radius: 3px; padding: .15rem .4rem; margin-left: .5rem; vertical-align: middle; }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; position: relative; }
.jump a { border: 1px solid var(--iron); border-radius: 4px; padding: .5rem .8rem; font-size: .85rem; color: var(--ash); transition: border-color .25s, color .25s, background-color .25s; }
.jump a:hover { border-color: var(--bronze-light); color: var(--offwhite); }

/* payroll page specifics */
.includes { display: grid; gap: 0; border-top: 1px solid var(--iron); margin-top: 3rem; }
.include { padding: 1.75rem 0; border-bottom: 1px solid var(--iron); display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
.include .glyph { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--iron); border-radius: 4px; color: var(--bronze-light); }
.include .glyph svg { width: 18px; height: 18px; }
.include strong { color: var(--offwhite); font-weight: 500; display: block; }
.include p { color: var(--fog); font-size: .9rem; margin-top: .3rem; }
@media (min-width: 768px) { .includes { grid-template-columns: 1fr 1fr; } .include:nth-child(even) { border-left: 1px solid var(--iron); padding-left: 2rem; } .include:nth-child(odd) { padding-right: 2rem; } }
.steps { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--iron); margin-top: 3rem; }
.step { padding: 2rem 0; border-bottom: 1px solid var(--iron); }
.step .num { font-family: var(--serif); font-style: italic; color: var(--bronze-light); font-size: 1.5rem; }
.step strong { display: block; color: var(--offwhite); font-weight: 500; margin-top: .75rem; font-size: 1.05rem; }
.step p { color: var(--fog); margin-top: .4rem; font-size: .95rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } .step { padding: 2rem 2rem 2rem 0; } .step:nth-child(even) { border-left: 1px solid var(--iron); padding-left: 2rem; padding-right: 0; } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } .step { padding: 2rem 1.5rem; } .step + .step { border-left: 1px solid var(--iron); } .step:first-child { padding-left: 0; } .step:last-child { padding-right: 0; } .step:nth-child(even) { padding-left: 1.5rem; padding-right: 1.5rem; } }
.faq { border-top: 1px solid var(--iron); margin-top: 2rem; }
.faq details { border-bottom: 1px solid var(--iron); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; font-weight: 500; color: var(--offwhite); transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bronze-light); }
.faq summary svg { width: 1rem; height: 1rem; color: var(--taupe); transition: transform .35s var(--ease-out); flex-shrink: 0; }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--ember); }
.faq .answer { color: var(--fog); padding: 0 0 1.25rem; max-width: 40rem; }
.paired { display: grid; gap: .75rem; margin-top: 1.5rem; }
.paired a { border: 1px solid var(--iron); border-radius: 4px; padding: 1rem 1.1rem; display: flex; justify-content: space-between; align-items: center; color: var(--ash); transition: border-color .25s, color .25s; }
.paired a:hover { border-color: var(--bronze-light); color: var(--offwhite); }
.paired a svg { width: 1rem; height: 1rem; color: var(--taupe); }
.local-note { border: 1px solid var(--iron); border-radius: 8px; padding: 1.5rem; background: var(--graphite); }
.local-note .label { display: block; margin-bottom: .75rem; }
.local-note p { color: var(--fog); }

/* reveal motion: only when JS is on and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-out); }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .lines .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  html.js .lines .line > span { display: block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
  html.js .lines.in .line > span { transform: none; }
  html.js .lines.in .line:nth-child(2) > span { transition-delay: .08s; }
  html.js .lines.in .line:nth-child(3) > span { transition-delay: .16s; }
  html.js .lines.in .line:nth-child(4) > span { transition-delay: .24s; }
}

/* ---------------- news index, articles, author pages ---------------- */
/* the index and the author pages reuse the homepage hairline rows, with room for a
   category illustration, the standfirst and the author */
.news-list { margin-top: 2.5rem; }
.news-list a { grid-template-columns: 64px 1fr auto; column-gap: 1.1rem; align-items: start; padding: 1.75rem 0; }
.news-list a > svg { align-self: center; }
.news-meta { flex-wrap: wrap; }
.news-list .thumb { display: grid; place-items: center; width: 64px; height: 64px; box-sizing: border-box; padding: .3rem; border: 1px solid var(--iron); border-radius: 6px; background: linear-gradient(160deg, #201e1c, #171514); color: var(--bronze-light); }
.news-list .thumb svg { width: 100%; height: auto; }
.news-list .summary { color: var(--fog); font-size: .95rem; line-height: 1.6; margin-top: .6rem; max-width: 44rem; }
.news-list .row-by { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; font-size: .82rem; color: var(--taupe); }
@media (min-width: 768px) { .news-list a { grid-template-columns: 120px 1fr auto; column-gap: 1.75rem; } .news-list .thumb { width: 120px; height: 120px; padding: .5rem; } }

.avatar { border-radius: 50%; border: 1px solid var(--iron); background: var(--graphite); }
.avatar.tiny { width: 32px; height: 32px; }

.byline { display: flex; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.byline .avatar { width: 64px; height: 64px; }
@media (min-width: 768px) { .byline .avatar { width: 96px; height: 96px; } }
.byline-name { font-weight: 500; color: var(--offwhite); border-bottom: 1px solid rgba(217, 149, 106, .45); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.byline-name:hover { color: var(--bronze-light); border-color: var(--bronze-light); }
.byline-meta { font-size: .85rem; color: var(--taupe); margin-top: .4rem; }

/* the "on this page" list, stacked in the sticky column */
.jump.stack { flex-direction: column; align-items: stretch; gap: .2rem; margin-top: 1.25rem; }
.jump.stack a { border: 0; border-left: 1px solid var(--iron); border-radius: 0; padding: .5rem .9rem; color: var(--fog); transition: border-color .25s, color .25s; }
.jump.stack a:hover { border-left-color: var(--ember); color: var(--offwhite); }

.article-body { max-width: 44rem; min-width: 0; }   /* min-width:0 or a wide table stretches the grid column and the page scrolls sideways */
.article-body > :first-child { margin-top: 0; }
.article-body p { color: var(--fog); font-size: 1.02rem; line-height: 1.75; margin-top: 1.1rem; }
.article-body .h3 { margin-top: 3rem; scroll-margin-top: 6.5rem; }
.article-body .h3 + p { margin-top: 1rem; }
.article-body strong { color: var(--offwhite); font-weight: 600; }
.article-body a { color: var(--bronze-light); border-bottom: 1px solid rgba(217, 149, 106, .4); transition: color .2s, border-color .2s; }
.article-body a:hover { color: var(--ember); border-color: var(--ember); }
.article-body ul { margin-top: 1.25rem; }
.article-body li { position: relative; padding-left: 1.4rem; color: var(--fog); line-height: 1.7; }
.article-body li + li { margin-top: .7rem; }
.article-body li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--bronze); }

/* tables: hairlines and the same type scale as everything else */
.table-wrap { margin-top: 1.75rem; border: 1px solid var(--iron); border-radius: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table-wrap th, .table-wrap td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--iron); }
.table-wrap thead th { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); background: var(--graphite); }
.table-wrap tbody th { color: var(--ash); font-weight: 500; }
.table-wrap td { color: var(--fog); }
.table-wrap tbody tr:last-child th, .table-wrap tbody tr:last-child td { border-bottom: 0; }

.takeaway { border: 1px solid var(--iron); border-radius: 8px; background: var(--graphite); padding: 1.5rem; }
.takeaway ul { margin-top: 0; }
@media (min-width: 768px) { .takeaway { padding: 2.25rem; } }

.sources li { position: relative; padding-left: 1.4rem; }
.sources li + li { margin-top: .9rem; }
.sources li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--bronze); }
.sources a { color: var(--ash); border-bottom: 1px solid var(--iron); transition: color .2s, border-color .2s; }
.sources a:hover { color: var(--bronze-light); border-color: var(--bronze-light); }

/* explainer diagrams: these carry information, so they get a caption and real alt text */
.diagram { margin: 2.5rem 0 0; }
.diagram-art { border: 1px solid var(--iron); border-radius: 8px; background: linear-gradient(160deg, #201e1c, #171514); padding: 1rem .6rem; }
.diagram-art svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; color: var(--bronze-light); }
.diagram text { fill: var(--ash); stroke: none; font-family: var(--sans); }
.diagram figcaption { font-size: .88rem; color: var(--taupe); margin-top: .9rem; }
@media (min-width: 768px) { .diagram-art { padding: 2rem; } }

/* a service an article points at that has no page yet: named and muted, exactly as the
   services hub renders one, so it never looks broken and never carries a build status */
.paired .paired-soon { border: 1px solid var(--iron); border-radius: 4px; padding: 1rem 1.1rem; color: var(--ash); opacity: .62; }

/* author pages */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chips span { border: 1px solid var(--iron); border-radius: 4px; padding: .4rem .7rem; font-size: .85rem; color: var(--ash); }
.author-photo { display: grid; place-items: center; }
.author-photo .avatar { width: 100%; max-width: 260px; height: auto; aspect-ratio: 1; }
@media (min-width: 1024px) { .author-photo .avatar { max-width: 320px; } }
.director .h3 a { border-bottom: 1px solid rgba(217, 149, 106, .35); transition: color .2s, border-color .2s; }
.director .h3 a:hover { color: var(--bronze-light); border-color: var(--bronze-light); }

/* ================================================================
   V3: a lighter version of the same site
   Same markup, same words. A class on <body> lifts the palette, swaps the
   serif for the Inter V1 used, and turns the cradle into a header mark.
   Every rule below is scoped to .v3, so V2 is untouched and a fix to the
   shared rules above still lands on both.
   ================================================================ */
body.v3 {
  --obsidian: #1b1918;
  --canvas: #26231f;
  --graphite: #2f2b27;
  --slate: #39342f;
  --iron: #4b4540;
  --pewter: #635c55;
  --smoke: #867d75;
  --fog: #b9b2ab;
  --taupe: #aaa29b;
  --ash: #e2ddd8;
  --serif: var(--sans);          /* headings go back to Inter, as V1 had them */
}
/* Inter needs more weight and tighter tracking than Libre Baskerville to hold a headline */
body.v3 .display, body.v3 .h2, body.v3 .h3 { font-weight: 600; letter-spacing: -.028em; }
body.v3 .display { line-height: 1.05; }
body.v3 .h2 { line-height: 1.1; }
body.v3 .quote blockquote { font-weight: 500; letter-spacing: -.015em; }
/* slanted sans numerals read as a mistake, so the ranked numbers stand up in V3 */
body.v3 .reason .num, body.v3 .step .num { font-style: normal; font-weight: 600; }
/* the inset panels have to lift with the canvas or they read as holes in the page */
body.v3 .page-art, body.v3 .news-list .thumb, body.v3 .diagram-art { background: linear-gradient(160deg, #332f2a, #262220); }
body.v3 .hero-grid { opacity: .7; }
body.v3 .site-header { background: rgba(38, 35, 31, .8); }
/* the category chip's ink has to brighten as the canvas does: ember on the tinted chip
   measures 5.08 on V2's canvas and 4.41 on V3's, which is under the 4.5 floor */
body.v3 .news .cat { color: var(--ember-hot); }

.pay-link { font-size: .85rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ash); padding: .55rem .2rem; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.pay-link:hover { color: var(--offwhite); border-bottom-color: var(--bronze-light); }
.pay-row { display: block; width: 100%; text-align: left; padding: .9rem 0; font-size: 1.05rem; color: var(--ash); border-bottom: 1px solid var(--iron); transition: color .2s; }
.pay-row:hover { color: var(--offwhite); }
.menu-call { padding: 1.25rem 0 .5rem; color: var(--fog); font-size: .95rem; }
.menu-call a { color: var(--offwhite); font-weight: 600; display: inline-block; padding: .3rem 0; border-bottom: 1px solid rgba(217, 149, 106, .5); }

/* ---- hero: the team photo, in the three treatments the picker switches between ---- */
body.v3 .hero-head .cradle-caption { justify-content: flex-start; margin-top: 1.5rem; }
.hero-shot { position: relative; margin: 0; border: 1px solid var(--iron); border-radius: 10px; overflow: hidden; }
.hero-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-inner { z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38, 35, 31, .82), rgba(38, 35, 31, .94)); }
/* "auto" is the shipped default: A at phone width, B on a desktop. An explicit pick wins. */
body[data-hero="a"] .hero-bg, body[data-hero="c"] .hero-bg, body[data-hero="auto"] .hero-bg { display: none; }
body[data-hero="b"] .hero-shot { display: none; }
body[data-hero="a"] .hero-shot, body[data-hero="auto"] .hero-shot { aspect-ratio: 5 / 3; }
.hero-bg img { object-position: 50% 18%; }

/* C: the photo runs the full width of the page, above the words rather than beside them */
body[data-hero="c"] .hero { align-items: start; }
body[data-hero="c"] .hero-inner { padding-top: 0; }
body[data-hero="c"] .hero-shot { order: -1; margin-inline: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; border-top: 0; aspect-ratio: 2 / 1; }
body[data-hero="c"] .hero-shot img { object-position: 50% 22%; }

@media (min-width: 1024px) {
  body[data-hero="a"] .hero-shot { grid-area: cradle; align-self: center; aspect-ratio: 5 / 3; }
  body[data-hero="auto"] .hero-bg { display: block; }
  body[data-hero="auto"] .hero-shot { display: none; }
  body[data-hero="b"] .hero-inner, body[data-hero="auto"] .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "foot"; max-width: 48rem; }
  body[data-hero="b"] .hero-bg::after, body[data-hero="auto"] .hero-bg::after { background: linear-gradient(90deg, var(--canvas) 18%, rgba(38, 35, 31, .86) 55%, rgba(38, 35, 31, .5) 100%); }
  body[data-hero="c"] .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "shot" "head" "foot"; row-gap: 2.5rem; }
  body[data-hero="c"] .hero-shot { grid-area: shot; aspect-ratio: 32 / 9; }
  body[data-hero="c"] .hero-head .display { font-size: clamp(2.4rem, 3.8vw, 3.4rem); }
}
@media (max-width: 1023px) { .hero-shot { order: 1; } body[data-hero="c"] .hero-shot { order: -1; } }

/* the hero picker is concept scaffolding: it goes when the real site is built */
.hero-pick { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: flex; align-items: center; gap: .35rem; padding: .45rem .55rem; border: 1px solid var(--iron); border-radius: 6px; background: rgba(38, 35, 31, .94); backdrop-filter: blur(6px); }
.hero-pick-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); margin-right: .2rem; }
.hero-pick button { width: 28px; height: 28px; border: 1px solid var(--iron); border-radius: 4px; font-size: .8rem; font-weight: 500; color: var(--ash); transition: border-color .2s, color .2s, background-color .2s; }
.hero-pick button:hover { border-color: var(--bronze-light); color: var(--offwhite); }
.hero-pick button[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: var(--obsidian); }
@media (max-width: 767px) { .hero-pick { left: .75rem; bottom: .75rem; padding: .35rem .45rem; } .hero-pick-label { display: none; } }

/* ================================================================
   V4: the light theme
   V4 is V3's layout with the palette turned over, so its pages carry both classes:
   .v3 gives the typography, the header lockup and the photo hero, .v4 turns the page
   light. The tokens keep their roles (canvas = the page, fog = body text, offwhite =
   headings, iron = hairlines), so most of the stylesheet flips for free. What follows
   is only the rules that assumed a dark page underneath them.
   ================================================================ */
body.v4 {
  --canvas: #f6f3f0;
  --graphite: #ffffff;
  --slate: #ebe6e1;
  --iron: #d5cdc5;
  --pewter: #b3aaa2;
  --smoke: #9a918a;
  --fog: #57504b;
  --taupe: #6b635d;
  --ash: #3a3531;
  --offwhite: #1e1b19;
  --bone: #1e1b19;         /* the "ink on the page" role: .btn-ghost, .arrow-link, .accred */
  --obsidian: #1e1b19;     /* text on ember and on light bands, so it has to stay dark */
  --bronze: #8c4a22;
  --bronze-light: #a55c2c;
  --ember-ink: #a04a17;    /* ember as text: the brand orange is only 3.0:1 on this canvas */
  --band: #ece6e0;
}

/* surfaces that were dark by hand rather than by token */
/* V4 keeps V1's charcoal header over the light page. Re-declaring the tokens on the header
   re-themes everything inside it, bar and both menus, without touching the rest of the page:
   custom properties inherit, so the nav, the mega menu and the hamburger all follow. */
body.v4 .site-header {
  background: rgba(51, 51, 51, .93);
  --graphite: #333333;
  --slate: #3f3e3c;
  --iron: #4c4a47;
  --smoke: #6f6a66;
  --fog: #b8b2ad;
  --taupe: #a9a29c;
  --ash: #d9d3cf;
  --offwhite: #ffffff;
  --bone: #f7f5f3;
  --bronze-light: #d9956a;
  --ember-ink: #e07a3f;
  color: var(--bone);
}
body.v4 .site-header.scrolled { border-bottom-color: #4c4a47; }
body.v4 .menu-btn { color: var(--offwhite); border-color: #5a5754; }
/* with no photograph beside it, the "where we work" copy runs wider and the place list
   spreads across the row rather than sitting in a half-empty column */
body.v4 .section-head .places { margin-top: 2rem; }
body.v4 .section-head:has(.places) { max-width: 56rem; }
body.v4 .mega, body.v4 .mobile-menu { box-shadow: 0 24px 48px -28px rgba(30, 27, 25, .45); }
body.v4 .hero-grid { background-image: linear-gradient(#e4ddd6 1px, transparent 1px), linear-gradient(90deg, #e4ddd6 1px, transparent 1px); opacity: .9; /* cells the shape of spreadsheet rows rather than squares */ background-size: 148px 42px; }
body.v4 .reviews { background: var(--graphite); }
body.v4 .site-footer { background: var(--slate); }
body.v4 .foot-social a:hover { background: rgba(30, 27, 25, .05); }
body.v4 .contrast { background: var(--band); }
body.v4 .contrast ::selection { background: var(--obsidian); color: var(--canvas); }
body.v4 .skip { background: var(--offwhite); color: var(--canvas); }
body.v4 .bubble-panel, body.v4 .dialog { box-shadow: 0 24px 60px -24px rgba(30, 27, 25, .35); }
body.v4 .page-art, body.v4 .news-list .thumb, body.v4 .diagram-art { background: linear-gradient(160deg, #ffffff, #efe9e3); }
body.v4 .table-wrap thead th { background: var(--slate); }
body.v4 .hero-pick { background: rgba(246, 243, 240, .96); }
/* the chat bubble is fixed over the bottom-right corner and the switcher grew a fourth
   entry, so the last footer row keeps clear of it. Margin, not padding: padding leaves the
   box where it was and only moves the text inside it. */
.foot-cradle { display: none; }
@media (min-width: 900px) {
  /* in the flow, right-aligned, above the last footer row: absolutely positioned it landed
     on top of the accreditation boxes */
  .foot-cradle { display: block; width: 190px; margin: 1.5rem 0 0 auto; }
  .foot-cradle #cradle { aspect-ratio: 3 / 2; opacity: .6; transition: opacity .4s var(--ease-soft); }
  .foot-cradle:hover #cradle { opacity: .9; }
  .foot-cradle #cradle canvas { display: block; width: 100% !important; height: 100% !important; }
  .foot-cradle-line { margin-top: .25rem; text-align: center; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); }
  /* the render is lit for a dark page, so on V4 it sits on a plate of the header's charcoal */
  body.v4 .foot-cradle { background: #333333; border-radius: 8px; padding: .75rem .75rem .5rem; }
  body.v4 .foot-cradle-line { color: #a9a29c; }
}
.foot-photo { margin: 0; }
.foot-photo img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; object-position: 50% 14%; }
@media (min-width: 1024px) { .foot-photo img { max-height: 420px; } }
/* the bubble widens to "Chat with us" on the way up, so the clearance is measured against
   that, not against the collapsed icon */
.foot-bottom .version { margin-right: 4.5rem; }
@media (min-width: 640px) { .foot-bottom .version { margin-right: 12rem; } }
/* on a phone there is no room to sit beside it, so the last row clears it vertically instead */
@media (max-width: 639px) { .foot-bottom { padding-bottom: 6rem; } }
body.v4 .director .frame::after { background: linear-gradient(180deg, transparent 60%, rgba(30, 27, 25, .35)); }

/* controls: a boundary needs to be visible against a light page, not a dark one */
body.v4 .btn-ghost { border-color: #8a827b; color: var(--obsidian); }
body.v4 .btn-ghost:hover { background: var(--slate); border-color: var(--offwhite); }
body.v4 .field input, body.v4 .field select, body.v4 .field textarea { border-color: var(--smoke); }
body.v4 :focus-visible { outline-color: var(--ember-ink); }

/* ember reads as a fill, not as ink, once the page is light */
body.v4 .label.ember { color: var(--ember-ink); }
body.v4 .trust .stars, body.v4 .rating .stars { color: var(--ember-ink); }
body.v4 .news .cat { color: var(--ember-ink); background: rgba(160, 74, 23, .08); border-color: rgba(160, 74, 23, .3); }
body.v4 .news .cat.b { color: var(--bronze); background: rgba(140, 74, 34, .08); border-color: rgba(140, 74, 34, .28); }
body.v4 .services-list .tag { color: var(--ember-ink); border-color: rgba(160, 74, 23, .38); }
/* a muted row was muted with opacity, which reads fine over a dark page and washes out
   over a light one: 3.69:1. On V4 it is a solid quieter colour instead. */
body.v4 .soon, body.v4 .paired .paired-soon { opacity: 1; color: var(--taupe); }
body.v4 .soon .name, body.v4 .soon .desc { color: var(--taupe); }
body.v4 .article-body a { color: var(--bronze); border-bottom-color: rgba(140, 74, 34, .45); }
body.v4 .article-body a:hover { color: var(--ember-ink); border-bottom-color: var(--ember-ink); }
body.v4 .byline-name, body.v4 .director .h3 a { border-bottom-color: rgba(140, 74, 34, .45); }
body.v4 .byline-name:hover, body.v4 .director .h3 a:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
body.v4 .sources a:hover { color: var(--bronze); border-bottom-color: var(--bronze); }
body.v4 .news a:hover .h3, body.v4 .paired a:hover, body.v4 .jump a:hover { color: var(--bronze); }

/* the hero scrim has to lighten the photo now, so the dark type over it still reads */
body.v4 .hero-bg::after { background: linear-gradient(180deg, rgba(246, 243, 240, .86), rgba(246, 243, 240, .95)); }
@media (min-width: 1024px) { body.v4 .hero-bg::after, body.v4[data-hero="auto"] .hero-bg::after { background: linear-gradient(90deg, var(--canvas) 16%, rgba(246, 243, 240, .92) 52%, rgba(246, 243, 240, .6) 100%); } }

/* ================================================================
   V4 client round, 22 September 2026
   ================================================================ */
/* the third "What kind of help" card sat hard against its left border: the tablet rule that
   strips left padding from every odd card was still applying at four columns (fixed above,
   in the shared .col rules) */

/* a bigger logo on a desktop, from the 3x re-render, so it reads at a glance */
@media (min-width: 1024px) {
  body.v4 .site-header .bar { height: 116px; }
  body.v4 .logo img { height: 86px; }
  body.v4 .site-header.compact .bar { height: 80px; }
  body.v4 .site-header.compact .logo img { height: 54px; }
}

/* hero, as chosen: C on a phone (the team as a full-width band above the words), B on a
   desktop. B was too faint because the words sat in the middle of the page, right over the
   team, so the whole photo had to be veiled to keep them readable. Now the words sit left and
   the photo takes the right of the hero at close to full strength. */
body[data-hero="set"] .hero-bg { display: none; }
@media (max-width: 1023px) {
  body[data-hero="set"] .hero { align-items: start; }
  body[data-hero="set"] .hero-inner { padding-top: 0; }
  body[data-hero="set"] .hero-shot { order: -1; margin-inline: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; border-top: 0; aspect-ratio: 2 / 1; }
  body[data-hero="set"] .hero-shot img { object-position: 50% 22%; }
}
/* Below 1800 there is not enough width for a readable headline column AND a photo beside it
   that is big enough to be worth having: the photo ended up small and low, which is what read as
   misaligned. Under 1800 it runs as a band under the header, the way it does on a phone. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body[data-hero="set"] .hero { align-items: start; }
  body[data-hero="set"] .hero-bg { display: none; }
  body[data-hero="set"] .hero-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "shot" "head" "foot"; row-gap: 2.5rem; padding-top: 0; }
  body[data-hero="set"] .hero-shot { display: block; grid-area: shot; order: -1; margin-inline: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; border-top: 0; aspect-ratio: 32 / 9; }
  body[data-hero="set"] .hero-shot img { object-position: 50% 22%; }
  body[data-hero="set"] .hero-head .display { font-size: clamp(2.4rem, 3.8vw, 3.4rem); }
}
/* The photo is a column of the same grid row as the words, so its top and bottom edges are the
   words' edges whatever the window height. Pinned to the hero section instead (23 Sep, first
   attempt) it started above the heading and finished below the review line on a tall window,
   which is what still read as misaligned. It bleeds off the right edge of the page from inside
   the 1200px wrap, hence the negative margin. */
@media (min-width: 1200px) {
  body[data-hero="set"] .hero-bg { display: none; }
  body[data-hero="set"] .hero-inner { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); grid-template-areas: "head shot" "foot shot"; column-gap: 3rem; align-items: stretch; }
  body[data-hero="set"] .hero-shot { display: block; grid-area: shot; aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; margin-right: calc((1200px - 100vw) / 2); }
  body[data-hero="set"] .hero-shot img { object-fit: contain; object-position: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
  /* softens the photo's left edge into the page, the way the old scrim did, but only at the edge */
  body.v4[data-hero="set"] .hero-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, var(--canvas) 0, rgba(246, 243, 240, .45) 5%, rgba(246, 243, 240, 0) 14%); }
  /* the words keep their own panel, which is what holds the two columns to the same width */
  body.v4[data-hero="set"] .hero-head, body.v4[data-hero="set"] .hero-foot { background: rgba(246, 243, 240, .88); backdrop-filter: blur(3px); }
  body.v4[data-hero="set"] .hero-head { border-radius: 12px 12px 0 0; padding: 2rem 2.25rem 1.25rem; margin-left: -2.25rem; }
  body.v4[data-hero="set"] .hero-foot { border-radius: 0 0 12px 12px; padding: 0 2.25rem .5rem; margin-left: -2.25rem; }
  /* the picture element must not sit between the figure and the img, or the column stops sizing it */
  .hero-shot picture { display: contents; }
}
@media (min-width: 1200px) and (prefers-reduced-transparency: reduce) {
  body.v4[data-hero="set"] .hero-head, body.v4[data-hero="set"] .hero-foot { background: var(--canvas); }
}

/* homepage news rows carry the same drawn illustration as the news page */
.home-news .thumb svg { width: 100%; height: auto; }

/* Google-style initials beside each reviewer */
.quote figcaption { display: flex; align-items: center; gap: .7rem; }
.q-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; color: #fff; }
.q-av-0 { background: #8c4a22; }
.q-av-1 { background: #333333; }
.q-av-2 { background: #5f5a55; }

/* the footer band, taller on a desktop so the team are in frame from head to hip */
@media (min-width: 1024px) {
  body.v4 .foot-photo img { max-height: none; aspect-ratio: 3 / 1; object-position: 50% 38%; }
}

/* a framed photograph beside a page hero, on the Meet the Team and Contact pages */
.page-photo { margin: 0; border: 1px solid var(--iron); border-radius: 10px; overflow: hidden; }
.page-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 1023px) { .page-photo { margin-top: 2rem; } }

/* V4's mobile menu closes on the V1 pattern: the two buttons side by side, number underneath */
.menu-actions { display: flex; gap: .75rem; padding: 1.5rem 0 .25rem; }
.menu-actions .btn { flex: 1; justify-content: center; text-align: center; }
.menu-actions + .menu-call { text-align: center; }
/* the V4 mobile menu sits on the charcoal header, so the ghost button can't use the light
   theme's dark ink: it measured as dark grey on charcoal */
body.v4 .mobile-menu .btn-ghost { color: var(--offwhite); border-color: #8d8782; }
body.v4 .mobile-menu .btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--offwhite); }
/* the four wider-team cards sit four across, so nobody is left alone on a second row */
@media (min-width: 1024px) { .directors.team-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.mega-foot { border-top: 1px solid var(--iron); padding: 1rem 0 1.25rem; }

/* V4 footer, 23 Sep 2026: the cradle sits on the footer itself above the existing-clients box,
   with no plate and no caption, and the legal sentence runs full width underneath that box */
body.v4 .foot-cradle { background: none; padding: 0; margin: .5rem auto 1.75rem 0; width: 230px; }
body.v4 .foot-cradle #cradle { opacity: .85; }
body.v4 .foot-cradle .foot-cradle-line { display: none; }
body.v4 .foot-legal { max-width: none; margin-top: 1.5rem; }
@media (min-width: 900px) { body.v4 .foot-cradle { width: 260px; margin-left: auto; margin-right: 0; } }

/* ---- 24 Sep 2026, client round four ---- */
/* the tree-lined photo is the hero now: keep their heads well inside the band on a tablet */
@media (min-width: 1024px) and (max-width: 1199px) { body.v4[data-hero="set"] .hero-shot img { object-position: 50% 10%; } }
/* header links as they were on V1: white, 15px, medium weight. The light grey read as faded. */
body.v4 .site-header .nav a, body.v4 .site-header .nav button { color: #ffffff; font-size: 15px; font-weight: 500; }
body.v4 .site-header .nav a:hover, body.v4 .site-header .nav button:hover { color: #d9956a; }

/* Illustrations, style B (Newton's pick, 24 Sep 2026). Heavy outline, lighter detail, a flat
   offset tint and a highlighter on the fact. Built by the kit in build_v2.py, spec in
   Resources/illustration-kit.md. The tint, knockout and highlighter are fills, which the pen
   animation cannot draw, so they fade in once the lines are down. V2 and V3 keep the old
   single-weight line and never show the fills. */
body:not(.v4) .art :is(.t, .k, .hl) { display: none; }
body.v4 .art .t, .art .k, .art .hl { stroke: none; }
body.v4 svg.art { color: #2b2724; }
body.v4 .art .o { stroke-width: 2.8; }
body.v4 .art .a { stroke: #b8531d; stroke-width: 2.2; }
body.v4 .art .g { stroke: #b3aaa2; stroke-width: 1.6; }
body.v4 .art .t { fill: #e4d9cf; }
body.v4 .art .k { fill: #fbf8f5; }
body.v4 .art .hl { fill: #f6c9a8; }
body.v4 svg.art { stroke-width: 1.6; }
body.v4 .thumb svg.art { stroke-width: 3.4; }
body.v4 .thumb .art .o { stroke-width: 6; }
body.v4 .thumb .art .a { stroke-width: 4.6; }
body.v4 .thumb .art .g { stroke-width: 3.2; }
body.v4 .page-art svg.art, body.v4 .thumb svg.art { color: #2b2724; }
@media (max-width: 767px) {
  body.v4 .thumb svg.art { stroke-width: 4.2; }
  body.v4 .thumb .art .o { stroke-width: 7.4; }
  body.v4 .thumb .art .a { stroke-width: 5.6; }
}
body.v4 .diagram-art svg { color: #2b2724; }
html.js .ink :is(.t, .k, .hl) { opacity: 0; }
html.js .ink.drawn :is(.t, .k, .hl) { animation: ink-fade var(--dur, 700ms) ease forwards; animation-delay: var(--d, 0ms); }
/* the accent and the ground keep their own colour: the "wet ink" fade would end them on charcoal */
html.js .ink.drawn :is(.a, .g) { animation: ink-draw var(--dur, 900ms) cubic-bezier(.33, 0, .2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes ink-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.js .ink :is(.t, .k, .hl) { opacity: 1; }
  html.js .ink.drawn :is(.a, .g, .t, .k, .hl) { animation: none; }
}

/* The column layout now runs from 1200, where there is less room: a narrower copy column gives
   the photo the width, and the headline is sized so "Accountancy sorted," stays on one line and
   the heading keeps its three lines at every width. */
@media (min-width: 1200px) {
  body.v4[data-hero="set"] .hero-head .display { font-size: clamp(2.5rem, 2.9vw, 3.4rem); }
}
@media (min-width: 1200px) and (max-width: 1799px) {
  body.v4[data-hero="set"] .hero-inner { grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); }
}
/* the words set the height of the row, never the photo: absolutely placed inside its column, the
   photo fills exactly the height of the copy block, so top and bottom line up at every size */
@media (min-width: 1200px) {
  body.v4[data-hero="set"] .hero-shot { position: relative; min-height: 0; }
  body.v4[data-hero="set"] .hero-shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
}
/* the steps photo in the footer band: more room above the tallest head than the trees shot needed */
@media (min-width: 1024px) { body.v4 .foot-photo img { object-position: 50% 30%; } }

/* Pay here in the V4 bar as V1 had it: a bordered button beside Request a callback (Natalie,
   24 Sep 2026, pointing at V1). The ghost button is dark ink on the light page, so inside the
   charcoal bar it takes the same light treatment as the mobile menu's. */
body.v4 .header-cta .btn-ghost { color: #ffffff; border-color: #8d8782; }
body.v4 .header-cta .btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: #ffffff; }

/* ---- the V4 desktop hero, option B (Ian's pick, 24 Sep 2026). Phones and tablets, under 1200, are unchanged. ---- */
/* B: framed. The photo becomes a picture in its own right: rounded corners, a soft shadow, no
   fade, a clear gap from the screen edge, centred on the words. It keeps its shape, so nobody is
   cropped, and it grows into the spare margin on a wide screen instead of shrinking into a corner. */
@media (min-width: 1200px) {
  body.v4[data-hero-alt="b"] .hero-inner { align-items: center; }
  body.v4[data-hero-alt="b"][data-hero="set"] .hero-shot { align-self: center; justify-self: start; height: auto; margin: 0; aspect-ratio: 1600 / 1119;
    width: min(calc(100% + max(0px, (100vw - 1200px) / 2 - 4rem)), calc(74svh * 1.43));
    border-radius: 14px; overflow: hidden; box-shadow: 0 28px 60px -28px rgba(30, 27, 25, .45); }
  body.v4[data-hero-alt="b"][data-hero="set"] .hero-shot img { object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  body.v4[data-hero-alt="b"][data-hero="set"] .hero-shot::after { display: none; }
}

/* B, refined: the words no longer sit over the photo, so they lose their panel and the spreadsheet
   grid runs behind them again, re-centred on the words. A soft warm wash on the left gives the
   hero some depth so it does not read as flat. */
@media (min-width: 1200px) {
  body.v4[data-hero-alt="b"][data-hero="set"] .hero-head, body.v4[data-hero-alt="b"][data-hero="set"] .hero-foot { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.v4[data-hero-alt="b"] .hero { background:
      radial-gradient(ellipse 55% 85% at 0% 55%, rgba(181, 104, 60, .11), rgba(181, 104, 60, 0) 70%),
      linear-gradient(90deg, #efe7df 0, rgba(239, 231, 223, 0) 55%), var(--canvas); }
  body.v4[data-hero-alt="b"] .hero-grid { -webkit-mask-image: radial-gradient(ellipse 75% 95% at 32% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 75% 95% at 32% 50%, #000 30%, transparent 85%); }
}
@media (min-width: 1200px) and (prefers-reduced-transparency: reduce) {
  body.v4[data-hero-alt="b"][data-hero="set"] .hero-head, body.v4[data-hero-alt="b"][data-hero="set"] .hero-foot { background: none; }
}