:root {
  --paper: #eae6df;
  --paper-soft: #f1eee8;
  --paper-deep: #dfdad1;
  --ink: #252321;
  --ink-soft: #514b46;
  --brown: #966e55;
  --brown-deep: #745541;
  --line: #bdb0a5;
  --line-light: rgba(91, 75, 64, .26);
  --dark: #292724;
  --dark-soft: #34312d;
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Roboto Condensed', Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --edge: clamp(20px, 4.2vw, 84px);
  --ease: cubic-bezier(.19,1,.22,1);
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior:smooth; scroll-padding-top:82px}
body {margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
::selection {background:var(--brown); color:#fff}
a {color:inherit; text-decoration:none}
button, input, textarea {font:inherit}
button {cursor:pointer}
img, svg {display:block; max-width:100%}
summary {list-style:none; cursor:pointer}
summary::-webkit-details-marker {display:none}
:focus-visible {outline:3px solid var(--brown); outline-offset:5px}
.visually-hidden {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link {position:fixed; left:10px; top:-50px; padding:12px 16px; background:#fff; z-index:300; transition:top .2s}
.skip-link:focus {top:10px}
.progress {height:3px; width:0; background:var(--brown); position:fixed; z-index:210; inset:0 auto auto 0; pointer-events:none; will-change:width}
.site-shell {overflow:hidden}
.section-wrap {padding-left:var(--edge); padding-right:var(--edge)}
.section-topline {display:flex; justify-content:space-between; gap:20px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding-bottom:16px; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.section-topline span:last-child {text-align:right}
.period {color:var(--brown); font-style:normal}
.site-header {height:86px; padding:0 var(--edge); display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); background:rgba(234,230,223,.85); position:relative; z-index:100}
.brand {display:flex; align-items:center; gap:11px; min-width:194px}
.brand-mark {font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:39px; letter-spacing:-.1em; line-height:.8}
.brand-period {color:var(--brown); margin-left:1px}
.brand-caption {font-size:10px; font-weight:700; line-height:1.25; letter-spacing:.012em; text-transform:uppercase}
.desktop-nav {display:flex; align-items:center; gap:clamp(16px,2.8vw,48px); padding-left:12px}
.desktop-nav a {position:relative; font-weight:600; font-size:12px; transition:color .3s}
.desktop-nav a:hover {color:var(--brown)}
.desktop-nav a::after {content:""; position:absolute; left:0; bottom:-7px; height:1px; width:100%; background:var(--brown); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.desktop-nav a:hover::after {transform:scaleX(1)}
.header-cta {font-size:11px; text-transform:uppercase; letter-spacing:.05em; display:flex; gap:20px; align-items:center; white-space:nowrap; border-bottom:1px solid var(--ink); padding:13px 0; font-weight:800; transition:color .3s,border-color .3s}
.header-cta span:last-child {font-size:23px; font-weight:400; line-height:0; transform:translateY(-1px); transition:transform .3s}
.header-cta:hover {color:var(--brown);border-color:var(--brown)}
.header-cta:hover span:last-child {transform:translate(3px,-4px)}
.menu-toggle {display:none; width:44px; height:44px; align-items:center; flex-direction:column; justify-content:center; gap:6px; background:none; border:0; padding:7px}
.menu-toggle span {width:25px; height:2px; background:var(--ink); transition:transform .3s}
.menu-toggle[aria-expanded="true"] span:first-child {transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child {transform:translateY(-4px) rotate(-45deg)}
.mobile-menu[hidden] {display:none!important}
.mobile-menu {position:absolute; top:86px; left:0; right:0; background:var(--paper-soft); padding:28px var(--edge) 38px; z-index:99; box-shadow:0 20px 30px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:15px; border-bottom:1px solid var(--line)}
.mobile-menu a {font-family:var(--font-display); font-size:32px; font-weight:800; text-transform:uppercase}
.mobile-menu .mobile-menu-cta {font-family:var(--font-body); font-size:14px; color:var(--brown); margin-top:16px; text-transform:none}

/* Hero: reference-inspired typographic composition, intentionally very little ornament. */
.hero {position:relative; isolation:isolate; min-height:min(900px, calc(100svh - 86px)); display:flex; flex-direction:column; justify-content:space-between; padding:24px var(--edge) 54px; overflow:hidden; background:radial-gradient(ellipse at 30% 68%,rgba(255,255,255,.4),transparent 56%),var(--paper)}
.panel-lines {background-image:linear-gradient(90deg,transparent calc(var(--edge) - 1px),rgba(98,74,61,.25) var(--edge),transparent calc(var(--edge) + 1px)),linear-gradient(90deg,transparent calc(100% - var(--edge) - 1px),rgba(98,74,61,.25) calc(100% - var(--edge)),transparent calc(100% - var(--edge) + 1px)),radial-gradient(ellipse at 35% 64%,rgba(255,255,255,.30),transparent 55%)}
.hero::after {content:""; position:absolute; height:1px; background:var(--line); bottom:92px; left:0; right:0; z-index:0}
.hero-rays {position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:-1}
.hero-rays i {display:block; position:absolute; height:100%; width:34%; background:rgba(255,255,255,.19); transform:skewX(-37deg); top:0}
.hero-rays i:nth-child(1) {left:8%; background:rgba(255,255,255,.16)}
.hero-rays i:nth-child(2) {left:40%; background:rgba(125,109,94,.055)}
.hero-rays i:nth-child(3) {left:85%; background:rgba(255,255,255,.23)}
.hero-eyebrow {display:flex; justify-content:space-between; align-items:center; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.11em; z-index:2}
.hero-eyebrow-left {display:inline-flex; align-items:center; gap:12px}
.availability-dot {width:7px; height:7px; background:var(--brown); border-radius:50%}
.hero-type {width:100%; margin:2vw 0 0; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; min-height:365px; padding-bottom:20px}
.hero-title-row {width:100%; display:flex; align-items:center; overflow:hidden; justify-content:center; white-space:nowrap}
.hero-title-row .title-inner {display:block; font-family:var(--font-display); text-transform:uppercase; font-size:clamp(118px,19.5vw,370px); font-weight:900; letter-spacing:-.078em; line-height:.78; font-stretch:condensed; transform:translateY(110%); opacity:0; animation:heroRise 1.4s var(--ease) forwards; padding-right:.072em}
.hero-title-row--first {transform:translateX(-8%)}
.hero-title-row--second {transform:translateX(10%); margin-top:-.004em}
.hero-title-row--second .title-inner {animation-delay:.15s}
@keyframes heroRise {to {transform:translateY(0);opacity:1}}
.signature-stroke {position:absolute; height:63%; width:42%; min-width:255px; left:23%; top:10%; transform:rotate(-6deg); pointer-events:none; overflow:visible; filter:drop-shadow(0 1px 0 rgba(255,255,255,.05))}
.signature-stroke path {stroke:var(--brown); stroke-width:16; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1500; stroke-dashoffset:1500; animation:drawStroke 1.85s 1s var(--ease) forwards}
@keyframes drawStroke {to {stroke-dashoffset:0}}
.hero-bottom {position:relative; z-index:2; display:flex; justify-content:space-between; gap:30px; align-items:end; padding-bottom:28px}
.hero-roles {font-size:clamp(11px,1.1vw,16px); letter-spacing:.14em; text-transform:uppercase; font-weight:800; line-height:1.7; white-space:nowrap}
.hero-roles b {font-weight:500; color:var(--brown); padding:0 8px}
.hero-description {width:clamp(290px,28vw,460px)}
.hero-description p {margin:0 0 17px; font-size:clamp(16px,1.45vw,21px); line-height:1.45; font-weight:600; letter-spacing:-.03em}
.text-link {display:inline-flex; gap:18px; align-items:center; padding-bottom:7px; border-bottom:1px solid var(--ink); text-transform:uppercase; font-size:11px; letter-spacing:.07em; font-weight:800; transition:color .25s}
.text-link:hover {color:var(--brown)}
.scroll-cue {position:absolute; bottom:33px; left:var(--edge); display:flex; align-items:center; gap:23px; z-index:2; font-size:10px; text-transform:uppercase; font-weight:800; letter-spacing:.11em}
.scroll-cue-arrow {font-family:var(--font-body); color:var(--brown); font-size:24px; font-weight:400; animation:arrowFloat 1.8s ease-in-out infinite}
@keyframes arrowFloat {50%{transform:translateY(6px)}}
.hero-coordinate {position:absolute; bottom:39px; right:var(--edge); z-index:2; color:var(--ink-soft); font-size:10px; font-weight:800; letter-spacing:.12em}

.intro-section {position:relative; padding-top:118px; padding-bottom:160px; min-height:650px; background:var(--paper-soft); isolation:isolate}
.intro-grid {display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); gap:7vw; align-items:end; margin-top:56px}
.intro-title, .services-heading h2, .solutions-left h2, .about-right h2, .process-title, .contact-title {font-family:var(--font-display); text-transform:uppercase; font-weight:900; letter-spacing:-.065em; line-height:.91; margin:0}
.intro-title {font-size:clamp(70px,9.6vw,170px)}
.intro-title em, .services-heading h2 em, .solutions-left h2 em, .about-right h2 em, .process-title em, .contact-title em {font-style:normal; color:var(--brown-deep)}
.intro-text {padding-bottom:18px; max-width:420px; position:relative; z-index:2}
.intro-text p {font-size:clamp(16px,1.28vw,20px); line-height:1.72; font-weight:500; margin:0 0 22px}
.intro-text p + p {font-size:15px; color:var(--ink-soft)}
.underlined-link {text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.04em; display:inline-flex; gap:20px; padding:10px 0; border-bottom:1px solid var(--ink); transition:color .3s,border-color .3s}
.underlined-link:hover {color:var(--brown); border-color:var(--brown)}
.outline-asterisk {position:absolute; bottom:-10px; left:43%; font-size:230px; font-family:var(--font-display); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(150,110,85,.33); z-index:1; pointer-events:none}

.ticker {overflow:hidden; white-space:nowrap; background:var(--brown-deep); color:var(--paper-soft); border-block:1px solid var(--brown-deep); padding:15px 0 10px; transform:rotate(-1.4deg) scale(1.03); position:relative; z-index:4}
.ticker-track {display:flex; width:max-content; animation:marquee 120s linear infinite; will-change:transform}
.ticker-group {display:flex; flex:0 0 auto; min-width:100vw; align-items:center; justify-content:space-around}
.ticker-item {display:block; flex:0 0 auto}
.ticker-track span {font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.035em; font-size:clamp(33px,4vw,64px); line-height:1; font-weight:900; padding-right:30px}
.ticker-track i {font-style:normal; font-size:.54em; vertical-align:.18em; margin:0 32px; color:#cdb4a4}
@keyframes marquee {from {transform:translateX(0)} to {transform:translateX(-50%)}}

.services-section {padding-top:150px; padding-bottom:145px; background:var(--paper)}
.services-heading {display:flex; gap:30px; justify-content:space-between; align-items:end; margin:55px 0 90px}
.services-heading h2 {font-size:clamp(94px,12.2vw,205px)}
.services-heading p {max-width:255px; font-size:14px; font-weight:600; line-height:1.65; padding-bottom:17px}
.service-list {border-top:1px solid var(--line)}
.service-row {border-bottom:1px solid var(--line); position:relative; transition:background .4s}
.service-row::before {content:""; position:absolute; inset:0 calc(-1 * var(--edge)); background:var(--paper-deep); transform:scaleY(0); transform-origin:bottom; pointer-events:none; transition:transform .48s var(--ease)}
.service-row:hover::before,.service-row[open]::before {transform:scaleY(1)}
.service-row summary {position:relative; display:grid; grid-template-columns:75px minmax(0,1fr) auto 40px; gap:24px; align-items:center; min-height:124px; padding:22px 0; z-index:1}
.service-n {font-size:14px; font-weight:600; color:var(--brown); align-self:center}
.service-main {min-width:0; display:flex; flex-direction:column; gap:6px}
.service-main strong {font-family:var(--font-display); text-transform:uppercase; font-size:clamp(28px,3.45vw,59px); font-weight:900; letter-spacing:-.035em; line-height:1.0}
.service-main small {font-family:var(--font-body); font-size:12px; color:var(--ink-soft); letter-spacing:0; font-weight:600; line-height:1.5}
.service-price {font-family:var(--font-body); font-size:clamp(16px,1.43vw,23px); color:var(--brown-deep); font-weight:600; white-space:nowrap; text-align:right}
.service-action {font-size:26px; font-weight:300; text-align:right; transition:transform .42s var(--ease),color .3s}
.service-row:hover .service-action {transform:translate(5px,-5px); color:var(--brown)}
.service-row[open] .service-action {transform:rotate(45deg); color:var(--brown)}
.service-extra {position:relative; z-index:1; max-width:850px; margin-left:99px; padding:0 0 31px 0; display:flex; gap:30px; align-items:flex-end; justify-content:space-between}
.service-extra p {max-width:540px; margin:0; font-size:14px; line-height:1.75; color:var(--ink-soft)}
.service-extra a {white-space:nowrap; color:var(--brown-deep); text-decoration:underline; text-underline-offset:5px; font-size:12px; font-weight:800; margin-right:8px}
.services-note {display:flex; max-width:730px; gap:22px; margin-top:39px; align-items:flex-start; color:var(--ink-soft)}
.services-note span {font-family:var(--font-display); font-size:36px; line-height:1; color:var(--brown)}
.services-note p {font-size:13px; line-height:1.7; margin:5px 0 0}

.solutions-section {color:var(--paper-soft); background:var(--dark); position:relative; overflow:hidden}
.solutions-section::before {content:""; position:absolute; top:0; left:55%; bottom:0; border-left:1px solid rgba(255,255,255,.13)}
.solutions-inner {padding-top:113px; padding-bottom:130px}
.solutions-section .section-topline {color:#c4bbb3; border-color:#726960}
.solutions-layout {display:grid; grid-template-columns:53% 47%; margin-top:75px}
.solutions-left {padding-right:5vw; position:relative; min-height:690px}
.solutions-left h2 {font-size:clamp(80px,9.25vw,157px); position:sticky; top:100px}
.solutions-left h2 em {color:#b49a87}
.solutions-orbit {width:clamp(220px,32vw,500px); height:clamp(220px,32vw,500px); position:absolute; left:9%; bottom:0; display:grid; place-items:center; pointer-events:none; opacity:.64}
.orbit-ring {width:76%; height:76%; border:1px solid rgba(196,173,156,.28); border-radius:50%; position:absolute; box-shadow:0 0 0 55px rgba(255,255,255,.015),0 0 0 110px rgba(255,255,255,.01)}
.orbit-ring::before,.orbit-ring::after {content:""; position:absolute; inset:18%; border:1px dashed rgba(196,173,156,.25); border-radius:50%}
.orbit-ring::after {inset:37%; border-style:solid}
.orbit-cross {font-size:clamp(75px,9vw,145px); color:#907967; font-weight:200; animation:slowSpin 36s linear infinite}
@keyframes slowSpin {to{transform:rotate(360deg)}}
.solutions-right {padding-left:6.4vw; display:flex; flex-direction:column}
.solution-item {border-top:1px solid rgba(237,229,217,.35); padding:32px 0 72px}
.solution-item > span {font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:#bba896}
.solution-item h3 {font-family:var(--font-display); font-size:clamp(36px,4.2vw,70px); text-transform:uppercase; line-height:.98; letter-spacing:-.045em; margin:32px 0 23px}
.solution-item p {font-size:14px; line-height:1.75; color:#cec8c0; margin:0; max-width:430px}

.about-section {padding-top:140px; padding-bottom:170px; background:var(--paper-soft)}
.about-grid {display:grid; grid-template-columns:48% 52%; margin-top:95px}
.about-left {border-right:1px solid var(--line); padding-right:30px}
.about-years {font-family:var(--font-display); font-size:clamp(115px,17vw,290px); font-weight:900; letter-spacing:-.095em; line-height:.8; margin:13px 0 24px; white-space:nowrap}
.about-years b {font-weight:900}
.about-years span {color:var(--brown); font-size:.45em; vertical-align:.17em; padding:0 .06em; font-weight:400}
.years-caption {text-transform:uppercase; letter-spacing:.1em; font-weight:800; font-size:12px; color:var(--brown-deep)}
.about-right {padding-left:7vw}
.about-right h2 {font-size:clamp(73px,8.5vw,140px); margin-bottom:40px}
.about-right p {font-size:clamp(16px,1.35vw,19px); line-height:1.7; max-width:590px; margin:0 0 18px}
.about-right p + p {color:var(--ink-soft); font-size:15px}
.about-links {display:flex; gap:34px; flex-wrap:wrap; margin-top:30px}

.process-section {padding-top:116px; padding-bottom:138px; background:var(--paper)}
.process-title {font-size:clamp(76px,9.4vw,157px); margin:65px 0 90px}
.process-list {display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.process-step {padding:27px 22px 15px 0; border-right:1px solid var(--line); min-height:250px}
.process-step:last-child {border-right:0}
.process-step:not(:first-child) {padding-left:22px}
.step-n {font-family:var(--font-display); display:block; font-size:66px; line-height:1; color:var(--brown); font-weight:600; letter-spacing:-.07em}
.process-step h3 {text-transform:uppercase; font-family:var(--font-display); font-size:clamp(23px,2.3vw,37px); font-weight:900; margin:28px 0 14px; letter-spacing:-.035em}
.process-step p {max-width:285px; font-size:13px; line-height:1.75; color:var(--ink-soft); margin:0}

.contact-section {background:var(--paper-deep); position:relative; overflow:hidden}
.contact-section::after {content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,transparent 55%,rgba(255,255,255,.12) 55%,rgba(255,255,255,.12) 70%,transparent 70%)}
.contact-inner {padding-top:112px; padding-bottom:75px; position:relative; z-index:1}
.contact-eyebrow {font-size:11px; text-transform:uppercase; font-weight:800; letter-spacing:.12em; margin-top:80px; color:var(--brown-deep)}
.contact-title {font-size:clamp(76px,11.7vw,200px); position:relative; margin:23px 0 75px}
.contact-arrow {position:absolute; right:2vw; top:4%; width:clamp(70px,9vw,150px); fill:none; stroke:var(--brown); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-3deg); transition:transform .5s var(--ease)}
.contact-title:hover .contact-arrow {transform:translate(10px,-13px) rotate(-3deg)}
.contact-bottom {display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:start; padding-top:30px; border-top:1px solid var(--line)}
.contact-pitch p {font-size:clamp(19px,2vw,29px); max-width:560px; margin:0 0 29px; line-height:1.4; letter-spacing:-.035em; font-weight:700}
.contact-pitch small {display:block; max-width:360px; font-size:12px; line-height:1.7; color:var(--ink-soft)}
.contact-methods {border-top:1px solid var(--line)}
.contact-method {display:grid; grid-template-columns:95px minmax(0,1fr) 24px; gap:10px; padding:20px 0; border-bottom:1px solid var(--line); align-items:center; transition:color .3s}
.contact-method > span {font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.contact-method > strong {font-family:var(--font-display); font-size:clamp(21px,2.3vw,35px); font-weight:700; text-transform:uppercase; letter-spacing:-.02em}
.contact-method > i {font-style:normal; font-size:25px; text-align:right; transition:transform .3s}
.contact-method:not(.placeholder):hover {color:var(--brown-deep)}
.contact-method:not(.placeholder):hover i {transform:translate(4px,-4px)}
.contact-method.placeholder {cursor:default; color:#887a70}
.contact-site-links {display:flex; gap:30px; margin-top:95px; font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:5px}
.contact-site-links a:hover {color:var(--brown)}
.footer {min-height:105px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--dark); color:#ded5cb; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.footer a:hover {color:#fff}

.js .reveal {opacity:0; transform:translateY(55px); transition:opacity .85s var(--ease), transform 1.05s var(--ease)}
.js .reveal.in-view {opacity:1; transform:translateY(0)}
.parallax-item {transform:translate3d(0,var(--parallax-y,0px),0);will-change:transform}
@media (min-width:1800px) {
  .hero {min-height:930px}
  .site-header, .hero, .section-wrap {padding-left:max(var(--edge),calc((100vw - 1750px)/2)); padding-right:max(var(--edge),calc((100vw - 1750px)/2))}
}
@media (max-width:1100px) {
  .hero-title-row .title-inner {font-size:20vw}
  .hero-type {min-height:310px}
  .hero-roles {white-space:normal; max-width:400px}
  .intro-grid {grid-template-columns:1.1fr .9fr;gap:4vw}
  .intro-title {font-size:9vw}
  .about-years {font-size:15vw}
  .about-right h2 {font-size:8.5vw}
  .service-row summary {grid-template-columns:50px minmax(0,1fr) auto 27px; gap:16px}
  .service-extra {margin-left:66px}
}
@media (max-width:760px) {
  :root {--edge:22px}
  html {scroll-padding-top:70px}
  .site-header {height:70px; gap:12px}
  .brand {min-width:unset}
  .brand-mark {font-size:35px}
  .brand-caption {font-size:9px}
  .desktop-nav, .header-cta {display:none}
  .menu-toggle {display:flex}
  .mobile-menu {top:70px}
  .hero {min-height:calc(100svh - 70px); min-height:max(650px,calc(100svh - 70px)); padding-top:22px; padding-bottom:40px}
  .hero-eyebrow {font-size:9px; line-height:1.4; letter-spacing:.045em}
  .hero-eyebrow >span:last-child {text-align:right}
  .hero-type {flex:1; min-height:280px; justify-content:center; padding-bottom:0; margin-top:0}
  .hero-title-row .title-inner {font-size:25vw; line-height:.83; letter-spacing:-.085em}
  .hero-title-row--first {transform:translateX(-5%)}
  .hero-title-row--second {transform:translateX(7%)}
  .signature-stroke {left:18%; top:18%; width:68%; height:57%; min-width:unset}
  .signature-stroke path {stroke-width:19}
  .hero-bottom {flex-direction:column; align-items:start; gap:29px; padding-bottom:30px}
  .hero-roles {font-size:11px; max-width:100%; letter-spacing:.06em}
  .hero-roles b {padding:0 5px}
  .hero-description {width:100%; max-width:470px}
  .hero-description p {font-size:19px; max-width:420px}
  .scroll-cue {bottom:21px; font-size:9px}
  .hero-coordinate {bottom:29px}
  .hero::after {bottom:75px}
  .section-topline {font-size:9px; gap:12px; line-height:1.5}
  .section-topline span:last-child {max-width:55%}
  .intro-section {padding-top:89px; padding-bottom:116px; min-height:auto}
  .intro-grid {display:block; margin-top:55px}
  .intro-title {font-size:clamp(67px,11.7vw,104px)}
  .intro-text {margin-top:52px; max-width:530px}
  .intro-text p {font-size:17px}
  .outline-asterisk {font-size:150px; left:65%; bottom:5px}
  .ticker-track span {font-size:37px}
  .ticker-track i {margin:0 17px}
  .services-section {padding-top:95px; padding-bottom:95px}
  .services-heading {display:block; margin:49px 0 51px}
  .services-heading h2 {font-size:clamp(89px,16vw,142px)}
  .services-heading p {max-width:460px; padding:0; margin:28px 0 0; font-size:14px}
  .service-row summary {grid-template-columns:34px minmax(0,1fr) 25px; min-height:112px; gap:10px; padding:22px 0}
  .service-n {font-size:12px; align-self:start; padding-top:9px}
  .service-main strong {font-size:clamp(27px,5.3vw,42px); line-height:1.05}
  .service-main small {font-size:11px; line-height:1.5}
  .service-price {grid-column:2; font-size:16px; margin-top:4px; text-align:left}
  .service-action {grid-column:3; grid-row:1/3; align-self:start; margin-top:3px; font-size:24px}
  .service-extra {margin-left:44px; display:block; max-width:530px; padding-right:16px}
  .service-extra p {font-size:13px}
  .service-extra a {display:inline-block; margin-top:18px}
  .services-note {margin-top:25px}
  .solutions-section::before {display:none}
  .solutions-inner {padding-top:95px; padding-bottom:105px}
  .solutions-layout {display:block; margin-top:58px}
  .solutions-left {min-height:260px; padding-right:0; overflow:hidden}
  .solutions-left h2 {font-size:clamp(75px,13vw,110px); position:relative; top:0; z-index:1}
  .solutions-orbit {right:0; left:auto; bottom:-40px; width:210px; height:210px;opacity:.3}
  .solutions-right {padding-left:0}
  .solution-item {padding:32px 0 49px}
  .solution-item h3 {font-size:clamp(44px,9vw,65px); margin:25px 0 14px}
  .about-section {padding-top:95px;padding-bottom:110px}
  .about-grid {display:block; margin-top:62px}
  .about-left {border-right:0; border-bottom:1px solid var(--line); padding:0 0 40px}
  .about-years {font-size:clamp(105px,22vw,165px)}
  .about-right {padding:50px 0 0}
  .about-right h2 {font-size:clamp(79px,13vw,112px); margin-bottom:28px}
  .about-right p {font-size:17px}
  .about-right p + p {font-size:14px}
  .process-section {padding-top:95px; padding-bottom:97px}
  .process-title {font-size:clamp(66px,11.1vw,100px); margin:58px 0 58px}
  .process-list {grid-template-columns:1fr 1fr}
  .process-step {padding:25px 16px 32px 0; min-height:220px; border-bottom:1px solid var(--line)}
  .process-step:nth-child(2) {padding-left:20px; border-right:0}
  .process-step:nth-child(3) {padding-left:0; border-bottom:0}
  .process-step:nth-child(4) {padding-left:20px; border-bottom:0}
  .step-n {font-size:54px}
  .process-step h3 {font-size:27px; margin-top:24px}
  .contact-inner {padding-top:94px; padding-bottom:60px}
  .contact-eyebrow {margin-top:66px}
  .contact-title {font-size:clamp(69px,12vw,114px); margin:25px 0 54px}
  .contact-arrow {right:1vw; top:-9%; width:62px; stroke-width:6}
  .contact-bottom {display:block; padding-top:31px}
  .contact-pitch p {font-size:22px}
  .contact-pitch {margin-bottom:38px}
  .contact-method {grid-template-columns:90px minmax(0,1fr) 20px; padding:19px 0}
  .contact-method > strong {font-size:27px}
  .contact-site-links {margin-top:59px; gap:20px; flex-wrap:wrap}
  .footer {padding-top:32px; padding-bottom:32px; min-height:auto; display:grid; grid-template-columns:1fr auto; gap:12px}
  .footer span:nth-child(2) {grid-row:2;grid-column:1 / -1; font-size:10px; opacity:.65}
  .footer a {text-align:right}
}
@media (max-width:400px) {
  :root {--edge:17px}
  .hero {min-height:max(660px,calc(100svh - 70px))}
  .hero-eyebrow {font-size:8px}
  .hero-title-row .title-inner {font-size:25.4vw}
  .hero-description p {font-size:17px}
  .hero-roles {font-size:10px}
  .services-heading h2 {font-size:16vw}
  .service-main strong {font-size:6vw}
  .service-main small {font-size:10px}
  .process-step h3 {font-size:23px}
  .process-step p {font-size:12px}
  .contact-title {font-size:12vw}
  .contact-method > strong {font-size:22px}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *, *::before, *::after {animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  .hero-title-row .title-inner {opacity:1;transform:none}
  .signature-stroke path {stroke-dashoffset:0}
  .js .reveal {opacity:1; transform:none}
  .parallax-item {transform:none!important}
}

/* Reference composition: one proportional canvas keeps accents and lettering intact. */
.hero-type {display:block; flex:0 0 auto; width:calc(100% + 2 * var(--edge)); min-height:0; margin:18px calc(-1 * var(--edge)) 32px; padding:0; line-height:0}
.hero-lettering {display:block; width:100%; height:auto; overflow:visible}
.hero-name {font-family:var(--font-display); font-size:266px; font-weight:900; letter-spacing:-19px}
.hero-frame {stroke:var(--line); stroke-width:1}
.hero-brush {stroke:var(--brown); stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.hero-brush path {stroke-dasharray:1200; stroke-dashoffset:1200; animation:drawStroke 1.8s .3s var(--ease) forwards}
.hero-brush .brush-i {stroke-width:11; animation-delay:.6s}
/* The separator belongs to the content flow, below every line of text. */
.hero::after {display:none}
.hero {padding-bottom:80px}
.hero-bottom {padding-bottom:30px; margin-bottom:16px}
.hero-bottom::after {content:""; position:absolute; height:1px; background:var(--line); left:calc(-1 * var(--edge)); right:calc(-1 * var(--edge)); bottom:0; pointer-events:none}
@media(min-width:1921px) {.hero-type {width:calc(100% + 2 * max(var(--edge),(100vw - 1750px)/2)); margin-left:calc(-1 * max(var(--edge),(100vw - 1750px)/2)); margin-right:calc(-1 * max(var(--edge),(100vw - 1750px)/2))}}
@media(max-width:680px) {.hero-type {min-height:0; margin-top:34px; margin-bottom:38px} .hero {padding-bottom:76px} .hero-bottom {padding-bottom:28px; margin-bottom:12px}}
@media(prefers-reduced-motion:reduce) {.hero-brush path {stroke-dashoffset:0}}

/* One opening composition: signature, proposition, explanation, actions, ticker. */
.hero {min-height:min(900px,calc(100svh - 86px)); padding-top:24px; padding-bottom:0; gap:0}
.hero-composition {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,92px); align-items:center; flex:1; padding:clamp(40px,5vh,68px) 0}
.hero .hero-type {position:relative; top:clamp(24px,2.4vw,40px); width:100%; margin:0; padding:0; min-height:0; align-self:center; flex:none}
.hero-copy {position:relative; top:-12px}
.hero-frame {display:none}
.hero-copy-label {font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; color:var(--ink-soft); margin:0 0 22px}
.hero-copy .intro-title {font-size:clamp(50px,6.4vw,106px); line-height:.92; letter-spacing:-.055em}
.hero-copy .intro-text {max-width:440px; padding:0; margin:24px 0 0}
.hero-copy .intro-text p {font-size:clamp(14px,1.12vw,17px); line-height:1.55; margin:0 0 14px}
.hero-copy .intro-text p + p {font-size:clamp(12px,.98vw,15px); line-height:1.6; margin-bottom:0}
.hero .hero-bottom {align-items:center; gap:24px; margin:0; padding:24px 0 28px; border-top:1px solid var(--line-light)}
.hero-bottom::after {display:none}
.hero .hero-roles {font-size:clamp(10px,.86vw,13px); white-space:normal; letter-spacing:.08em; max-width:52%}
.hero-roles b {padding:0 6px}
.hero-actions {display:flex; align-items:center; gap:28px; flex-shrink:0}
.hero-primary-link {display:inline-flex; justify-content:space-between; align-items:center; gap:25px; padding:15px 20px; background:var(--ink); color:var(--paper-soft); text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.06em; transition:background .25s}
.hero-primary-link:hover {background:var(--brown-deep)}
.hero .ticker {width:calc(100% + 2 * var(--edge)); margin:calc(16px + 1.1vw) calc(-1 * var(--edge)) calc(12px + 1.1vw); transform:rotate(-1.2deg) scale(1.035); transform-origin:center; flex:none; padding:13px 0 10px}
.hero .ticker-track span {font-size:clamp(28px,2.8vw,44px)}
@media(min-width:1921px) {.hero .ticker {width:calc(100% + 2 * max(var(--edge),(100vw - 1750px)/2)); margin-left:calc(-1 * max(var(--edge),(100vw - 1750px)/2)); margin-right:calc(-1 * max(var(--edge),(100vw - 1750px)/2))}}
@media(max-width:1000px) and (min-width:761px) {.hero-composition {gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} .hero-actions {gap:16px} .hero .hero-roles {max-width:40%}}
@media(max-width:760px) {
  .hero {min-height:0; padding-top:22px; padding-bottom:0}
  .hero-composition {grid-template-columns:1fr; gap:28px; padding:30px 0 28px}
  .hero .hero-type {top:0; width:88%; max-width:475px; margin:0 auto}
  .hero-copy {top:0}
  .hero-copy-label {margin-bottom:16px; font-size:9px}
  .hero-copy .intro-title {font-size:clamp(58px,13vw,94px)}
  .hero-copy .intro-text {max-width:560px; margin-top:20px}
  .hero-copy .intro-text p {font-size:16px}
  .hero-copy .intro-text p + p {font-size:14px}
  .hero .hero-bottom {align-items:stretch; padding:22px 0 26px; gap:20px}
  .hero .hero-roles {max-width:none; font-size:10px; letter-spacing:.045em}
  .hero-actions {justify-content:space-between; gap:15px; flex-wrap:wrap}
  .hero-primary-link {padding:15px 17px}
  .hero-actions .text-link {font-size:10px; gap:12px}
}

/* Long public handles remain readable within the contact grid. */
.contact-method > strong {min-width:0; overflow-wrap:anywhere; text-transform:none}
.contact-site-links {flex-wrap:wrap}

/* All phrases occupy one grid cell. The tallest reserves space throughout the cycle. */
.rotating-title {display:grid; align-items:start}
.hero-phrase {display:block; grid-area:1 / 1; min-width:0; opacity:0; animation:heroPhraseFade 21s linear infinite both}
.hero-phrase:nth-child(2) {animation-delay:-14s}
.hero-phrase:nth-child(3) {animation-delay:-7s}
@keyframes heroPhraseFade {
  0%, 26% {opacity:1}
  31%, 95% {opacity:0}
  100% {opacity:1}
}
@media(prefers-reduced-motion:reduce) {
  .ticker-track {animation:none; transform:none; will-change:auto}
  .hero-phrase {animation:none; opacity:0}
  .hero-phrase:first-child {opacity:1}
}

/* Two aligned rows: name and heading above, one paragraph beneath each. */
.hero-composition {grid-template-areas:"name heading" "question answer"; grid-template-rows:auto auto; align-content:center; align-items:start; column-gap:clamp(28px,5vw,92px); row-gap:24px; padding:36px 0}
.hero .hero-type {grid-area:name; top:0; width:96%; margin:0; align-self:center}
.hero-copy {grid-area:heading; top:0; align-self:center; padding-top:0; container-type:inline-size}
.hero-copy .intro-title {font-size:clamp(44px,5.6vw,94px)}
.hero-description-copy {justify-self:start; text-align:right; width:100%; max-width:480px; padding:0; margin:0}
.hero-description-copy p {font-size:clamp(14px,1.12vw,17px); line-height:1.6; margin:0 0 13px}
.hero-description-copy--answer p {font-size:clamp(13px,.98vw,15px); line-height:1.6; color:var(--ink-soft); margin-bottom:0}
.hero-description-copy--question {grid-area:question}
.hero-description-copy--answer {grid-area:answer}
.rotating-title {align-items:center}
@supports(font-size:1cqw) {.hero-copy .intro-title {font-size:clamp(34px,12.5cqw,96px)}}
/* The outer panel animates; the inner content keeps its natural spacing. */
.service-panel {overflow:hidden}
.service-copy {flex:1; min-width:0; max-width:570px}
.service-copy p + p {margin-top:14px}
.service-row[data-expanded="false"] .service-action {transform:none}
@media(max-width:760px) {
  .hero-composition {grid-template-areas:"name" "heading" "question" "answer"; grid-template-columns:minmax(0,1fr); row-gap:24px; padding:28px 0}
  .hero .hero-type {width:88%; max-width:475px; margin:0 auto}
  .hero-copy {padding-top:0}
  .hero-copy .intro-title {font-size:clamp(38px,10.5vw,74px)}
  .hero-description-copy {max-width:560px}
  .hero-description-copy p {font-size:16px}
  .hero-description-copy--answer p {font-size:14px}
}

/* Client situations: retain the dark editorial layout and distinguish each answer. */
.solutions-left h2 {font-size:clamp(62px,7.5vw,128px)}
.solution-answer {max-width:430px; margin-top:24px; padding-left:18px; border-left:1px solid #907967}
.solution-answer > span {display:block; margin-bottom:9px; color:#bba896; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em}
.solution-answer p {color:var(--paper-soft)}
/* Work stages: reserve the large lettering for the message, and make deliverables scannable. */
.process-title {font-size:clamp(54px,6.6vw,112px); margin:56px 0 64px; line-height:.96}
.process-list {grid-template-columns:repeat(4,minmax(0,1fr))}
.process-step {display:flex; flex-direction:column; min-width:0; min-height:360px; padding-bottom:22px}
.process-step h3 {line-height:1.08; font-size:clamp(23px,2.1vw,35px)}
.process-step > p {padding-bottom:24px; max-width:none}
.process-outcome {margin-top:auto; padding-top:17px; border-top:1px solid var(--line-light)}
.process-outcome > span {display:block; margin-bottom:8px; color:var(--brown-deep); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.1em}
.process-outcome p {font-weight:600; color:var(--ink); max-width:none}
.process-note {max-width:740px; margin:28px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.7}
@media(min-width:761px) and (max-width:1100px) {
  .process-list {grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-step {min-height:340px; border-bottom:1px solid var(--line)}
  .process-step:nth-child(2n) {border-right:0; padding-left:22px}
  .process-step:nth-child(3) {padding-left:0; border-bottom:0}
  .process-step:nth-child(4) {border-bottom:0}
}
@media(max-width:760px) {
  .solutions-left {min-height:300px}
  .solutions-left h2 {font-size:clamp(58px,12.5vw,92px)}
  .solution-answer {margin-top:20px; padding-left:15px}
  .process-title {font-size:clamp(42px,9.4vw,66px); margin:44px 0}
  .process-step {min-height:340px; padding-bottom:28px}
  .process-step h3 {font-size:25px}
}
@media(max-width:580px) {
  .process-list {grid-template-columns:minmax(0,1fr)}
  .process-step, .process-step:not(:first-child) {min-height:0; padding:26px 0 28px; border-right:0; border-bottom:1px solid var(--line)}
  .process-step:last-child {border-bottom:0}
  .process-step h3 {font-size:29px; margin-top:20px}
  .process-step > p, .process-outcome {max-width:440px}
  .process-outcome {margin-top:0}
}

/* Distribute situations across both columns instead of one long right-hand stack. */
.solutions-layout {margin-top:52px; align-items:start}
.solutions-left {min-height:0}
.solutions-left h2 {position:relative; top:0}
.solution-item {padding-top:24px; padding-bottom:36px}
.solution-item h3 {margin-top:24px; margin-bottom:20px}
.solutions-left .solution-item--lead {position:relative; z-index:2; margin-top:36px; padding-bottom:24px}
.solutions-orbit {bottom:-260px}
@media(max-width:760px) {
  .solutions-layout {margin-top:40px}
  .solutions-left {overflow:visible}
  .solutions-left .solution-item--lead {margin-top:30px; padding-bottom:32px}
  .solutions-orbit {bottom:0; z-index:0}
  .solutions-right {position:relative; z-index:1}
}

/* Mirror the right column's distance from the existing central separator. */
.solutions-inner {--solutions-edge:var(--edge)}
.solutions-left .solution-item--lead {left:calc(2.6vw + .12 * var(--solutions-edge)); text-align:right}
.solution-item--lead > p {margin-left:auto}
.solution-item--lead .solution-answer {margin-left:auto; padding-left:0; padding-right:18px; border-left:0; border-right:1px solid #907967}
@media(min-width:1921px) {.solutions-inner {--solutions-edge:max(var(--edge),calc((100vw - 1750px)/2))}}
@media(max-width:760px) {
  .solutions-left .solution-item--lead {left:0}
  .solution-item--lead .solution-answer {padding-right:15px}
}

/* Keep both small paragraphs in the last row, just above the hero divider. */
@media(min-width:761px) {
  .hero-composition {grid-template-rows:minmax(min-content,1fr) auto; align-content:stretch; padding-bottom:18px}
  .solutions-orbit {left:calc(9% - clamp(16px,2.5vw,48px)); bottom:calc(-260px + clamp(12px,2vw,36px))}
}

/* Approved about layout: portrait and role on the left, biography on the right. */
.about-grid {grid-template-columns:minmax(0,40%) minmax(0,60%); margin-top:64px}
.about-left {padding-right:clamp(24px,3vw,48px)}
.about-portrait-card {width:100%; max-width:500px; margin:0; container-type:inline-size}
.about-portrait {display:block; width:100%; height:auto; overflow:hidden; background:var(--paper-soft)}
.about-portrait-card figcaption {width:100%; margin-top:17px}
.about-role {font-family:var(--font-display); text-transform:uppercase; font-weight:900; font-size:clamp(36px,4vw,64px); letter-spacing:-.045em; line-height:.95; margin:0 0 12px}
.about-portrait-card .years-caption {margin:0; font-size:clamp(10px,.85vw,13px); letter-spacing:.07em; line-height:1.5}
.about-right {padding-left:clamp(28px,4.5vw,80px)}
@supports(font-size:1cqw) {.about-role {font-size:clamp(30px,13cqw,65px)}}
@media(max-width:760px) {
  .about-grid {display:block; margin-top:44px}
  .about-left {padding:0 0 32px; border-right:0; border-bottom:1px solid var(--line)}
  .about-portrait-card {max-width:440px}
  .about-role {font-size:clamp(36px,11vw,58px)}
  .about-portrait-card .years-caption {font-size:11px}
  .about-right {padding:34px 0 0}
}

/* Anchor the message at the lower-right without changing the upper grid geometry. */
.hero-composition {position:relative}
.hero-description-reserve {grid-area:question; visibility:hidden; pointer-events:none; user-select:none}
.hero-description-group {grid-area:answer; position:absolute; right:0; bottom:0; width:100%; max-width:780px; display:flex; flex-direction:column; gap:12px; text-align:right}
.hero-description-group .hero-description-copy {grid-area:auto; width:100%; max-width:none; margin:0}
.hero-description-group .hero-description-copy p {margin:0}
.hero-description-group .hero-description-copy--question p {font-size:clamp(20px,1.2vw,24px); line-height:1.45; font-weight:600; color:var(--ink)}
.hero-description-group strong {font-weight:800}
.hero-description-group .hero-description-copy--answer p {font-size:clamp(17px,1vw,20px); line-height:1.5; font-weight:500; color:var(--brown-deep)}
/* Constrained screens use natural flow to guarantee space for the larger message. */
@media(max-width:1200px), (max-height:760px) {
  .hero-description-reserve {display:none}
  .hero-description-group {position:static; justify-self:end}
}
@media(max-width:760px) {
  .hero-composition {grid-template-areas:"name" "heading" "answer"; grid-template-rows:auto auto auto}
  .hero-description-group {max-width:560px; gap:14px}
}