:root{
  --slate:#6A6A69; --slate-deep:#5A5A59;
  --paper:#FBFAF7; --paper-2:#F1EFEA; --ink:#262625; --muted:#5B5A57; --rule:#DCD8D0; --field:#FFFFFF; --field-line:#BDB8AE;
  --cream:#FFF9EF; --orange:#C9682F; --orange-hover:#B05A27; --apricot:#F5B262; --green:#4A7F64;
  --serif:"Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --wrap:72rem; --measure:36rem;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1F1F1E; --paper-2:#272726; --ink:#EDEAE4; --muted:#B8B4AD; --rule:#3C3B39; --field:#2A2A29; --field-line:#55534F;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1F1F1E; --paper-2:#272726; --ink:#EDEAE4; --muted:#B8B4AD; --rule:#3C3B39; --field:#2A2A29; --field-line:#55534F;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{background:var(--slate-deep); scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1rem/1.75 var(--sans)}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--apricot); outline-offset:3px}
.skip{position:absolute; left:-999px; top:0; background:var(--cream); color:#262625; padding:.6rem 1rem; z-index:10}
.skip:focus{left:1rem; top:1rem}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:clamp(1.25rem,4vw,2.5rem); padding-right:clamp(1.25rem,4vw,2.5rem)}

/* Header */
.site-head{background:var(--slate); color:var(--cream)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.25rem 2rem; flex-wrap:wrap; padding-top:1.1rem; padding-bottom:1.1rem}
.brand{display:block; text-decoration:none}
.brand img{height:72px; width:auto}
.site-nav ul{display:flex; align-items:center; gap:.5rem 1.9rem; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.site-nav a{color:var(--cream); text-decoration:none; font-weight:500; font-size:.92rem}
.site-nav a:hover, .site-nav a[aria-current="page"]{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.45em}
.site-nav .btn{font-size:.88rem; padding:.75rem 1.1rem}
.site-nav .btn:hover{text-decoration:none}

/* Buttons and links */
.btn{display:inline-block; font:600 .95rem/1 var(--sans); padding:1rem 1.45rem; border-radius:2px; border:0; cursor:pointer; text-decoration:none; background:var(--orange); color:#fff}
.btn:hover{background:var(--orange-hover)}
.text-link{font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.35em}
.text-link:hover{text-decoration-thickness:2px}

/* Hero */
.hero{background:var(--slate); color:var(--cream); padding:clamp(2rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.hero h1{font:400 clamp(2.5rem,5vw,4.15rem)/1.04 var(--serif); letter-spacing:-.01em; color:#fff; margin:0 0 1.6rem}
.hero .lead{font-size:1.08rem; line-height:1.7; max-width:33rem}
.hero .actions{display:flex; align-items:center; gap:1rem 1.75rem; flex-wrap:wrap; margin-top:2.1rem}
.hero .text-link{color:#fff}
.portrait{margin:0}
.portrait img{width:100%; border-radius:2px; box-shadow:18px 18px 0 var(--slate-deep)}
.portrait figcaption{font-size:.82rem; margin-top:1.4rem; opacity:.85}

/* Sections */
.section{padding:clamp(3.75rem,8vw,6.5rem) 0}
.section-alt{background:var(--paper-2)}
h2{font:500 clamp(2.1rem,3.8vw,3rem)/1.08 var(--serif); letter-spacing:-.005em; margin:0 0 1.2rem}
h3{font:600 1.04rem/1.4 var(--sans); margin:0 0 .35rem}
.intro{max-width:var(--measure); color:var(--muted); font-size:1.04rem}
.split{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5.5rem); align-items:start}

.areas{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule)}
.areas li{padding:1.35rem 0 1.25rem; border-top:1px solid var(--rule)}
.areas p{margin:0; color:var(--muted)}

/* In / On / About: the tilted blocks come from Erica's own quote graphic */
.tag{display:inline-block; font:700 clamp(1.1rem,1.7vw,1.35rem)/1 var(--sans); padding:.55em .7em .5em; color:var(--cream); transform:rotate(var(--tilt)); margin:0 0 1.5rem}
.tag-in{background:var(--orange); --tilt:-2.5deg}
.tag-on{background:var(--apricot); color:#2B241A; --tilt:2deg}
.tag-about{background:var(--green); --tilt:-1.5deg}
.modes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); margin-top:3.25rem}
.cadence{font-size:.9rem; color:var(--muted); margin:0 0 .9rem}
.modes p:last-child{margin-bottom:0}
.after-modes{margin:3rem 0 0}

/* Proof */
.facts{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:0}
.facts li{display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:.85rem 0; border-top:1px solid var(--rule); align-items:baseline}
.facts li:last-child{border-bottom:1px solid var(--rule)}
.facts strong{font:500 1.55rem/1.1 var(--serif)}
.facts span{color:var(--muted); font-size:.95rem}
blockquote{margin:0}
.testimonial p{font:italic 400 clamp(1.5rem,2.4vw,1.95rem)/1.35 var(--serif); margin:0 0 1.25rem}
.testimonial footer{font-size:.92rem; color:var(--muted)}

/* Call to action band */
.cta{background:var(--slate); color:var(--cream); padding:clamp(3.5rem,7vw,5.5rem) 0}
.cta h2{color:#fff}
.cta p{max-width:34rem; margin-bottom:2rem}

/* Page header */
.page-head{background:var(--slate); color:var(--cream); padding:clamp(2.25rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.page-head h1{font:400 clamp(2.5rem,5vw,4.1rem)/1.04 var(--serif); color:#fff; margin:0 0 1.3rem; max-width:52rem}
.page-head .lead{max-width:40rem; font-size:1.06rem}

/* Engagements */
.engagement{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1.5rem,5vw,4.5rem); padding:clamp(2.75rem,5vw,3.75rem) 0; border-top:1px solid var(--rule)}
.engagement:last-of-type{border-bottom:1px solid var(--rule)}
.engagement h2{font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:.6rem}
.engagement ul{margin:.5rem 0 0; padding-left:1.15rem}
.engagement li{margin:0 0 .45rem; padding-left:.2rem}
.engagement li::marker{color:var(--orange)}
.fit{color:var(--muted)}

.steps{list-style:none; margin:3rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,3.5rem); counter-reset:step}
.steps li{counter-increment:step; border-top:2px solid var(--ink); padding-top:1.25rem}
.steps li::before{content:counter(step); display:block; font:500 2.6rem/1 var(--serif); margin-bottom:.9rem}
.steps p{color:var(--muted); margin:0}

.motto{padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--paper)}
.motto blockquote p{font:400 clamp(2rem,4.2vw,3.4rem)/1.12 var(--serif); max-width:46rem; margin:0}
.motto .note{margin:1.4rem 0 0; color:var(--muted); font-size:.95rem; max-width:34rem}

.two-col{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,6vw,5rem)}
.two-col p{color:var(--muted)}

/* About */
.about-intro{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr); gap:clamp(2rem,6vw,5rem); align-items:start}
.stage{margin:0}
.stage img{width:100%; border-radius:2px}
.stage figcaption{font-size:.85rem; color:var(--muted); margin-top:.8rem}
.photo-stack{display:grid; gap:2rem}
.cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4.5rem); margin-top:3rem}
.case{border-top:2px solid var(--ink); padding-top:1.4rem}
.case .who{font-size:.88rem; color:var(--muted); margin:0 0 .5rem}
.case h3{font:500 clamp(1.55rem,2.4vw,1.95rem)/1.15 var(--serif); margin:0 0 .4rem}
.case dl{margin:0}
.case dt{font-weight:600; font-size:.9rem; margin-top:1.1rem}
.case dd{margin:.2rem 0 0; color:var(--muted)}
.case .result dd{color:var(--ink); font-weight:600}
.gallery-band{background:var(--slate); color:var(--cream)}
.gallery-band h2,.gallery-band h3,.gallery-band .text-link{color:#fff}
.gallery-band .intro,.gallery-band .strengths p{color:var(--cream)}
.timeline{list-style:none; margin:2.5rem 0 0; padding:0}
.timeline li{display:grid; grid-template-columns:7rem 1fr; gap:1.25rem; padding:1.5rem 0; border-top:1px solid var(--rule)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.timeline .year{font:500 1.9rem/1 var(--serif)}
.timeline p{margin:0; color:var(--muted)}
.strengths{list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.75rem 2.25rem}
.strengths p{margin:0; color:var(--muted); font-size:.95rem}

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,5rem); align-items:start}
.contact-ways{list-style:none; padding:0; margin:1.75rem 0 0}
.contact-ways li{padding:.7rem 0; border-top:1px solid var(--rule)}
.contact-ways li:last-child{border-bottom:1px solid var(--rule)}
.contact-ways a{font-weight:600; text-underline-offset:.3em; word-break:break-word}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem 1.25rem}
.form-grid .full{grid-column:1 / -1}
label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.4rem}
input,select,textarea{width:100%; font:400 1rem/1.4 var(--sans); color:var(--ink); background:var(--field); border:1px solid var(--field-line); border-radius:2px; padding:.8rem .9rem}
textarea{min-height:9rem; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange); outline-offset:0; border-color:var(--orange)}
.form-note{font-size:.85rem; color:var(--muted); margin:.9rem 0 0}
.form-status{margin:1rem 0 0; font-weight:600}

/* Footer */
.site-foot{background:var(--slate-deep); color:var(--cream); padding:3.5rem 0 2.5rem; font-size:.92rem}
.site-foot .wrap{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr); gap:2rem 3rem}
.site-foot img{height:58px; width:auto; margin-bottom:1.1rem}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin:0 0 .5rem}
.site-foot a{color:var(--cream); text-underline-offset:.3em}
.site-foot .legal{grid-column:1 / -1; border-top:1px solid rgba(255,249,239,.25); padding-top:1.5rem; margin-top:.5rem; opacity:.8; font-size:.82rem}
.site-foot h2{font:600 .92rem/1.4 var(--sans); margin:0 0 .8rem; color:#fff}

@media (max-width: 900px){
  .modes,.steps{grid-template-columns:1fr}
  .split,.engagement,.about-intro,.contact,.two-col{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .photo-stack{grid-template-columns:1fr 1fr; max-width:40rem}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .hero .wrap{grid-template-columns:1fr}
  .portrait{max-width:20rem}
  .portrait img{box-shadow:12px 12px 0 var(--slate-deep)}
  .brand img{height:52px}
  .site-nav ul{gap:.4rem 1.25rem}
  .facts li{grid-template-columns:1fr; gap:.15rem}
  .timeline li{grid-template-columns:1fr; gap:.4rem}
  .form-grid{grid-template-columns:1fr}
  .photo-stack{grid-template-columns:1fr}
  .site-foot .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto!important} }