@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Public+Sans:wght@400;500;600;700&display=swap');
:root{
  --green:#15291F;--green-2:#1E3A2D;--deep:#0E1D16;--brass:#C9A13B;--brass-2:#DDB955;--brass-soft:#EFE2BC;--gold-ink:#8A6A12;
  --porcelain:#F6F5F0;--sage:#E4E9E3;--ink:#1F2623;--muted:#5A645F;--line:#D9DED8;
  --serif:'Libre Caslon Text',Georgia,'Times New Roman',serif;
  --display:'Libre Caslon Display','Libre Caslon Text',Georgia,serif;
  --sans:'Public Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --measure:38rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px}
.wrap{max-width:74rem;margin:0 auto;padding:0 1.5rem}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(21,41,31,.97);backdrop-filter:blur(6px);color:var(--porcelain);border-bottom:1px solid rgba(201,161,59,.3)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-top:.9rem;padding-bottom:.9rem}
.brand{font-family:var(--display);font-size:1.45rem;text-decoration:none;white-space:nowrap;letter-spacing:.06em}
.nav{display:flex;align-items:center;gap:1.4rem;font-family:var(--sans);font-size:.9375rem}
.nav a{text-decoration:none;opacity:.85}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;color:var(--brass-2)}
.nav .btn{opacity:1;color:var(--deep)}
@media (max-width:900px){.nav a:not(.btn){display:none}.brand{font-size:1.25rem}}

/* buttons */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.9375rem;text-decoration:none;padding:.85rem 1.35rem;background:var(--brass);color:var(--deep);border:1px solid var(--brass);transition:background .15s,border-color .15s}
.btn:hover{background:var(--brass-2);border-color:var(--brass-2)}
.btn.big{font-size:1.05rem;padding:1.05rem 1.7rem}
.btn.ghost{background:transparent;color:var(--porcelain);border-color:rgba(246,245,240,.5)}
.btn.ghost:hover{border-color:var(--brass-2);color:var(--brass-2);background:transparent}
.btn.dark{background:var(--green);border-color:var(--green);color:var(--porcelain)}
.btn.dark:hover{background:var(--deep)}
.small-note{font-family:var(--sans);font-size:.875rem;opacity:.8;margin-top:.9rem}

/* hero */
.hero{background:var(--green);color:var(--porcelain);padding:4.5rem 0 5.5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-12rem;top:-12rem;width:34rem;height:34rem;border:1px solid rgba(180,138,74,.18);border-radius:50%}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.04;margin:0 0 1.6rem;letter-spacing:-.012em}
.hero h1 .ln{display:block}
.hero .rule{display:block;width:5rem;height:2px;background:var(--brass);margin:0 0 1.6rem;transform-origin:left}
.hero p.lead{max-width:34rem;font-size:1.15rem;color:#D3DDD6;margin:0 0 2rem}
.hero .ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.portrait{position:relative;margin:0}
.portrait::before{content:"";position:absolute;inset:1.1rem -1.1rem -1.1rem 1.1rem;border:1px solid var(--brass)}
.portrait img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait figcaption{font-family:var(--sans);font-size:.75rem;color:#93A59A;margin-top:1.6rem}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .ln,.hero .rule,.hero p.lead,.hero .ctas{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .hero h1 .ln:nth-child(2){animation-delay:.08s}.hero h1 .ln:nth-child(3){animation-delay:.16s}
  .hero .rule{animation:draw .9s .35s cubic-bezier(.2,.7,.2,1) forwards;transform:scaleX(0)}
  .hero p.lead{animation-delay:.45s}.hero .ctas{animation-delay:.55s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes draw{to{opacity:1;transform:scaleX(1)}}
}

/* credibility strip */
.creds{background:var(--deep);color:#C9D3CC;font-family:var(--sans);font-size:.9375rem}
.creds .wrap{display:flex;gap:1rem 2rem;flex-wrap:wrap;justify-content:space-between;padding-top:1.1rem;padding-bottom:1.1rem}
.creds b{color:var(--brass-2);font-weight:600}

/* sections */
section{padding:5.5rem 0}
h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.12;margin:0 0 1.25rem;color:var(--green)}
h3{font-family:var(--serif);font-weight:700;font-size:1.2rem;margin:0 0 .5rem;color:var(--green)}
.lede{max-width:var(--measure);color:var(--muted);margin:0 0 2.75rem;font-size:1.1rem}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.2rem}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start}

/* pains */
.pains{background:var(--green-2);color:var(--porcelain)}
.pains h2{color:var(--porcelain)}
.pain-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.pain-list li{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.3;padding:1.4rem 0 1.4rem 1.6rem;border-top:1px solid rgba(246,245,240,.15);position:relative}
.pain-list li::before{content:"";position:absolute;left:0;top:2.05rem;width:.55rem;height:.55rem;background:var(--brass)}
.pains .after{margin-top:2.5rem;color:#D3DDD6;max-width:40rem}

/* offers */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.offer{background:#fff;border:1px solid var(--line);padding:2rem 1.75rem;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.offer:hover{border-color:var(--brass);transform:translateY(-3px)}
.offer p{margin:0 0 1rem}
.offer .who{font-family:var(--sans);font-size:.875rem;color:var(--muted);margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.offer .from{font-family:var(--sans);font-size:.875rem;color:var(--green);font-weight:600;margin:.5rem 0 0}

/* steps (true sequence) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--brass);padding-top:1.1rem}
.steps li::before{content:counter(s);font-family:var(--display);font-size:2.4rem;color:var(--brass);display:block;line-height:1;margin-bottom:.6rem}
.steps p{margin:0;color:var(--muted)}

/* quote */
.quote{background:var(--green);color:var(--porcelain);text-align:center}
.quote .q[hidden]{display:none}
.quote blockquote{margin:0 auto;max-width:50rem;font-family:var(--display);font-size:clamp(1.45rem,2.7vw,2.05rem);line-height:1.38}
.quote blockquote::before{content:"“";display:block;font-size:5rem;line-height:.6;color:var(--brass);margin-bottom:1rem}
.quote cite{display:block;margin-top:1.75rem;font-family:var(--sans);font-style:normal;font-size:.9375rem;color:var(--brass-soft)}

/* clients marquee */
.clients{background:var(--sage);overflow:hidden}
.clients .row-label{font-family:var(--sans);font-size:.9375rem;color:var(--muted);margin:2.25rem 0 1rem}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:1rem;width:max-content}
@media (prefers-reduced-motion:no-preference){.track{animation:scroll 80s linear infinite}.marquee:hover .track{animation-play-state:paused}}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{flex-wrap:wrap;width:auto}.track [aria-hidden]{display:none}}
.logo{background:var(--porcelain);width:15rem;height:8.5rem;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center}
.logo img{max-height:5.2rem;max-width:100%;width:auto;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;opacity:.9}
.logo span{font-family:var(--display);font-size:1.4rem;line-height:1.2;color:var(--green)}

/* book band */
.book{background:var(--brass);color:var(--deep)}
.book .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;align-items:center}
.book h2{color:var(--deep);margin-bottom:.75rem}
.book p{margin:0 0 1rem;font-size:1.1rem}
.book ul{margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:.9375rem}
.book li{padding:.45rem 0;border-bottom:1px solid rgba(14,29,22,.18)}
.book .btn{background:var(--green);border-color:var(--green);color:var(--porcelain)}
.book .btn:hover{background:var(--deep)}

/* timeline / rooms */
.rooms{list-style:none;margin:0;padding:0}
.rooms li{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--line)}
.rooms .name small{display:block;font-family:var(--sans);font-size:.8125rem;color:var(--muted)}
.rooms .dots{border-bottom:1px dotted #B6BEB8;transform:translateY(-.35rem)}
.rooms .fact{font-style:italic;color:var(--green);text-align:right}
.timeline{list-style:none;margin:0;padding:0;max-width:50rem}
.timeline li{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.timeline .yr{font-family:var(--sans);font-size:.875rem;color:var(--muted)}
.timeline .tag{display:block;font-size:.75rem;color:var(--gold-ink);margin-top:.15rem}
.timeline p{margin:.25rem 0 0;color:var(--muted)}

/* service detail & cases */
.case{display:grid;grid-template-columns:17rem 1fr;gap:2.75rem;padding:2.75rem 0;border-bottom:1px solid var(--line)}
.case:first-child{padding-top:0}
.case .meta{font-family:var(--sans);font-size:.875rem;color:var(--muted)}
.case .meta strong{display:block;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--green);line-height:1.2;margin-bottom:.5rem}
.case dl{margin:1rem 0 0;display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem 1.25rem}
.case dt{font-family:var(--sans);font-size:.875rem;color:var(--muted);padding-top:.15rem}
.case dd{margin:0}
.fee{font-family:var(--sans);font-weight:600;color:var(--green)}
.fee small{display:block;font-weight:400;color:var(--muted)}

.todo{background:#FFF1C9;color:#6B4E00;font-family:var(--sans);font-size:.85em;padding:.05rem .35rem}

.page-head{background:var(--green);color:var(--porcelain);padding:4rem 0 4.5rem}
.page-head h1{font-family:var(--display);font-weight:400;font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.08;margin:0 0 1rem;max-width:50rem}
.page-head p{max-width:38rem;color:#D3DDD6;margin:0 0 1.5rem;font-size:1.15rem}

.contact-grid dl{margin:0}
.contact-grid dt{font-family:var(--sans);font-size:.875rem;color:var(--muted);margin-top:1.25rem}
.contact-grid dd{margin:.2rem 0 0;font-size:1.15rem}

/* footer */
.site-foot{background:var(--deep);color:#9FB0A6;font-family:var(--sans);font-size:.875rem;padding:3rem 0 6rem}
.site-foot .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-foot a{color:var(--porcelain)}

/* mobile sticky booking bar */
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--green);padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));border-top:1px solid rgba(180,138,74,.4)}
  .mbar .btn{display:block;text-align:center}
}
@media (max-width:900px){
  .hero .wrap,.split,.book .wrap{grid-template-columns:1fr;gap:2.5rem}
  .portrait{max-width:20rem}
  .offers,.pain-list{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr;gap:.75rem}
  .timeline li{grid-template-columns:1fr;gap:.25rem}
  .rooms li{grid-template-columns:1fr}.rooms .dots{display:none}.rooms .fact{text-align:left}
  section{padding:4rem 0}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* combined track record */
.entry{display:grid;grid-template-columns:11rem 1fr;gap:2.5rem;padding:2.25rem 0;border-bottom:1px solid var(--line)}
.entry .emeta{font-family:var(--sans);font-size:.875rem;color:var(--muted)}
.entry .yr{display:block}
.entry .tag{display:block;font-size:.75rem;color:var(--gold-ink);margin-top:.2rem;text-transform:uppercase;letter-spacing:.08em}
.entry h3{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.2;margin:0 0 .25rem}
.entry .role{font-family:var(--sans);font-size:.9375rem;color:var(--green);font-weight:600;margin:0 0 .6rem}
.entry p{max-width:var(--measure)}
.proj{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brass);padding:1.5rem 1.75rem;margin-top:1.25rem;max-width:46rem}
.proj h4{font-family:var(--serif);font-size:1.15rem;color:var(--green);margin:0}
.proj .pmeta{font-family:var(--sans);font-size:.8125rem;color:var(--muted);margin:.2rem 0 1rem}
.proj dl{display:grid;grid-template-columns:7rem 1fr;gap:.5rem 1.25rem;margin:0}
.proj dt{font-family:var(--sans);font-size:.8125rem;color:var(--muted);padding-top:.15rem}
.proj dd{margin:0}
.clientlist{font-size:.98rem}
.clientlist b{font-family:var(--sans);font-size:.875rem;color:var(--green)}
@media (max-width:700px){.entry{grid-template-columns:1fr;gap:.5rem}.proj dl{grid-template-columns:1fr;gap:.15rem}.proj dd{margin-bottom:.6rem}}
.pains .split h2{color:var(--porcelain)}
.plain{list-style:none;margin:0;padding:0;font-family:var(--sans)}
.plain li{padding:.6rem 0;border-top:1px solid rgba(246,245,240,.15);color:#D3DDD6}
.logo.solid img{filter:brightness(0);opacity:.85}

/* rotating quotes */
.quote .qstack{display:grid}
.quote .q{grid-area:1/1;transition:opacity .7s ease,visibility .7s}
.quote .q[hidden]{display:block;visibility:hidden;opacity:0}
.qdots{display:flex;justify-content:center;gap:.6rem;margin-top:2rem}
.qdots button{width:.6rem;height:.6rem;padding:0;border:1px solid var(--brass);background:transparent;cursor:pointer}
.qdots button[aria-current]{background:var(--brass)}
@media (prefers-reduced-motion:reduce){.quote .q{transition:none}}

/* booking */
.days,.times{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.days .day,.times .time{font-family:var(--sans);font-size:.9375rem;padding:.6rem .9rem;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.days .day:hover,.times .time:hover{border-color:var(--brass)}
.days .day[aria-pressed],.times .time[aria-pressed]{background:var(--green);color:var(--porcelain);border-color:var(--green)}
.times{padding-top:1rem;border-top:1px solid var(--line)}
.bkform label{display:block;font-family:var(--sans);font-size:.875rem;color:var(--muted);margin:1rem 0 .3rem}
.bkform label span{opacity:.7}
.bkform input,.bkform textarea{width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--line);background:#fff;color:var(--ink)}
.bkform input:focus,.bkform textarea:focus{outline:2px solid var(--brass);outline-offset:0}
.bkform .btn{margin-top:1.5rem}
.bkform .chosen{font-family:var(--sans);font-weight:600;color:var(--green)}
.bkmsg{font-family:var(--sans);font-size:.9rem;color:var(--muted);margin-top:.8rem}
.bkdone{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brass);padding:2rem}
.bkfor{margin-top:2.5rem;font-family:var(--sans);font-size:.9375rem}
.plain2{list-style:none;margin:0;padding:0}
.plain2 li{padding:.45rem 0;border-bottom:1px solid var(--line)}

/* ---- motion: one idea per page, all off under reduced motion ---- */
.site-head{transition:background .3s,box-shadow .3s}
.site-head.scrolled{box-shadow:0 1px 0 rgba(201,161,59,.35)}

/* page heads: brass rule draws in under the title */
.page-head h1::after{content:"";display:block;width:4.5rem;height:2px;background:var(--brass);margin-top:1.4rem;transform-origin:left}
.js .page-head h1::after{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s}
.js .page-head.in h1::after{transform:scaleX(1)}

/* sound familiar: each marker stretches into a rule as the line arrives */
.js .pain-list li{opacity:.35;transition:opacity .6s ease}
.js .pain-list li::before{transition:width .6s cubic-bezier(.2,.7,.2,1),height .6s}
.js .pain-list li.in{opacity:1}
.pain-list li.in::before{width:1.1rem;height:2px;top:2.3rem}

/* how we'd work together: the line completes step by step */
.steps li{border-top-color:var(--line);position:relative}
.steps li::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--brass);transform-origin:left}
.js .steps li::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.js .steps li::before{opacity:0;transition:opacity .5s}
.js .steps.in li::after{transform:scaleX(1)}
.js .steps.in li::before{opacity:1}
.js .steps.in li:nth-child(2)::after,.js .steps.in li:nth-child(2)::before{transition-delay:.45s}
.js .steps.in li:nth-child(3)::after,.js .steps.in li:nth-child(3)::before{transition-delay:.9s}
.js .steps.in li:nth-child(4)::after,.js .steps.in li:nth-child(4)::before{transition-delay:1.35s}

/* about: figures band */
.figures{background:var(--green);color:var(--porcelain);padding:3.5rem 0}
.figures .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.fig .n{display:block;font-family:var(--display);font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:var(--brass-2);font-variant-numeric:lining-nums tabular-nums}
.fig .l{display:block;font-family:var(--sans);font-size:.9rem;color:#C9D3CC;margin-top:.7rem;max-width:14rem}
.js .figures .fig{opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s}
.js .figures.in .fig{opacity:1;transform:none}
.js .figures.in .fig:nth-child(2){transition-delay:.15s}.js .figures.in .fig:nth-child(3){transition-delay:.3s}.js .figures.in .fig:nth-child(4){transition-delay:.45s}
@media (max-width:800px){.figures .wrap{grid-template-columns:1fr 1fr}}

/* track record: a brass rail fills as you scroll through the career */
.entries{position:relative}
.entries .rail{position:absolute;left:calc(11rem + 1.2rem);top:2.6rem;bottom:2.6rem;width:2px;background:var(--line)}
.entries .rail span{display:block;height:100%;background:var(--brass);transform-origin:top;transform:scaleY(1)}
.js .entries .rail span{transform:scaleY(0)}
.entry{position:relative}
.entry > div:last-child{padding-left:1rem}
.entry::before{content:"";position:absolute;left:calc(11rem + 1.2rem - 6px);top:2.75rem;width:10px;height:10px;border:2px solid var(--brass);background:var(--brass);border-radius:50%;z-index:1}
.js .entry::before{background:var(--porcelain);border-color:var(--line);transition:background .4s,border-color .4s}
.js .entry.in::before{background:var(--brass);border-color:var(--brass)}
@media (max-width:700px){.entries .rail{left:0}.entry{padding-left:1.25rem}.entry::before{left:-5px}.entry > div:last-child{padding-left:0}}
.quote .qstack{align-items:center}
.entry .tag{text-transform:none;letter-spacing:0;font-size:.8125rem}

/* ---- Apple-style moments ---- */
section{padding:7rem 0}
h2{font-size:clamp(2.2rem,4.2vw,3.4rem);letter-spacing:-.01em}
@media (max-width:900px){section{padding:4.5rem 0}}

/* 1. hero recedes as you scroll away: text lifts and fades, portrait settles */
.js .hero .wrap > div:first-child{transform:translateY(calc(var(--hp,0) * -60px));opacity:calc(1 - var(--hp,0) * 1.3)}
.hero .portrait{overflow:visible}
.js .hero .portrait img{transform:scale(calc(1.08 - var(--hp,0) * .08))}
.hero .portrait img{transform-origin:center;will-change:transform}

/* 2. statement: pinned in place, words light up one by one as you scroll */
.statement{background:var(--deep);padding:0;height:240vh;position:relative}
.statement .stick{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.statement .big{font-family:var(--display);font-size:clamp(2.2rem,5.6vw,5rem);line-height:1.12;letter-spacing:-.015em;color:var(--porcelain);margin:0;max-width:60rem}
.js .statement .w{color:rgba(246,245,240,.16);transition:color .35s ease}
.statement .w.on{color:var(--porcelain)}
.statement .w:nth-child(n+7).on{color:var(--brass-2)}
.rm .statement,html:not(.js) .statement{height:auto;padding:7rem 0}
html:not(.js) .statement .stick{position:static;height:auto}

/* 3. recommendations: the panel opens out to full width as it arrives */
.quote-outer{padding:0;background:var(--porcelain)}
.quote-outer .quote{padding:7rem 0}
.js .quote-outer .quote{clip-path:inset(0 calc((1 - var(--xp,1)) * 8%) round calc((1 - var(--xp,1)) * 28px));transform:scale(calc(.96 + var(--xp,1) * .04))}
.quote-outer + .clients,.quote-outer + section{margin-top:0}
/* logos: optically balanced sizes set per logo */
.logo{width:auto;min-width:13rem;padding:1rem 2.2rem}
.logo img{max-height:none;max-width:none}
.calbox{background:#fff;border:1px solid rgba(21,41,31,.12);padding:1rem}
.calsec .split{align-items:start}
.figures.f3 .wrap{grid-template-columns:repeat(3,1fr)}@media (max-width:900px){.figures.f3 .wrap{grid-template-columns:1fr}}