/* Evening Slate page styles (Rich, 30 October 2026).
   Shared by the homepage and the offer pages rebuilt to the Evening Slate
   direction (Codex handover, 30 Oct). Every class is prefixed es- so nothing
   collides with site.css, which still draws the nav, footer and sticky bar
   (themselves Evening Slate since the same date). Colour tokens --es-* live
   in site.css. Started as the homepage's page <style> block; moved here when
   the offer pages needed the same components. */
.es,.es-top{--ink:#23323d;--body:#58616a;--rule:#d9dbd6;--stone:#eeede7;--eyebrow:#8a5a14;font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:var(--es-cream)}
.es{color:var(--ink)}
.es h2,.es h3,.es-top h1,.es-top h2,.es-top h3{font-family:inherit;font-variation-settings:normal;margin:0;text-wrap:balance}
.es h2,.es-top h2{font-weight:300;font-size:clamp(2rem,3.4vw,2.85rem);line-height:1.18;letter-spacing:-.03em;margin-bottom:22px}
.es h3,.es-top h3{font-weight:500;font-size:1.4rem;line-height:1.3;letter-spacing:-.01em}
:where(.es) p{margin:0 0 1em}
.es .es-eyebrow,.es-top .es-eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--eyebrow);margin:0 0 18px}
.es .es-dark .es-eyebrow,.es-top .es-eyebrow,.es .es-dark.es-offer .es-eyebrow{color:var(--es-amber)}
.es-btn{display:inline-flex;align-items:center;gap:14px;background:var(--es-amber);color:var(--es-amber-ink);border-radius:8px;padding:15px 23px;font-weight:600;font-size:1rem;text-decoration:none;transition:background .2s,transform .2s}
.es-btn:hover{background:var(--es-amber-hi);transform:translateY(-2px)}
.es-link{display:inline-block;color:inherit;text-decoration:none;border-bottom:1px solid #b98735;padding-bottom:3px;font-size:.92rem}
.es-dark .es-link,.es-top .es-link{color:var(--es-amber)}
.es a:focus-visible,.es-top a:focus-visible,.es summary:focus-visible{outline:3px solid #b5761a;outline-offset:4px;border-radius:2px}
.es-dark a:focus-visible,.es-top a:focus-visible{outline-color:var(--es-amber)}
.es-dark{background:var(--es-slate);color:var(--es-cream)}
.es-sec{padding:88px 0}
.es-stone{background:var(--stone)}
@media (prefers-reduced-motion:reduce){.es-btn{transition:none}.es-btn:hover{transform:none}}

/* 1. hero */
.es-hero{display:grid;grid-template-columns:1.08fr 1fr;gap:48px;align-items:start;padding-top:20px;padding-bottom:44px}
.es-hero .es-copy{padding-top:10px}
.es-top h1{font-weight:300;font-size:clamp(2.6rem,4.8vw,4.1rem);line-height:1.08;letter-spacing:-.045em;color:#fff;margin:0 0 22px}
.es-lead{font-size:1.25rem;line-height:1.5;margin:0 0 14px}
.es-intro{font-size:1.02rem;color:#d4dbe0;max-width:30em;margin:0 0 28px}
.es-creds{font-size:.78rem;color:#c7cfd5;margin:20px 0 0}
.es-portrait{margin:0}
.es-portrait img{display:block;width:100%;height:auto;aspect-ratio:23/20;object-fit:cover;object-position:50% 30%;border-radius:14px}

/* 2-3. experience line and short quotes */
.es-proof{padding-bottom:46px}
.es-proof-top{display:flex;align-items:center;gap:20px;font-size:.95rem;color:#e0e4e7;margin:0 0 30px}
.es-proof-top::before,.es-proof-top::after{content:"";height:1px;background:rgba(255,255,255,.19);flex:1}
.es-quotes{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:0;padding:0;list-style:none}
.es-quote{margin:0;position:relative;padding-left:22px}
.es-quote::before{content:"\201C";position:absolute;left:-6px;top:-14px;font:48px Georgia,serif;color:var(--es-amber)}
.es-quote h3{font-size:1.1rem;font-weight:600;color:var(--es-amber);margin:0 0 12px}
.es-quote blockquote{margin:0 0 12px;font-size:1rem;line-height:1.5;font-weight:300}
.es-quote cite{font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#d0d8dd}
.es-proof-foot{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:28px;font-size:.75rem;color:#aebbc4}

/* 4. a little more room */
.es-room h2{font-size:clamp(2.2rem,3.9vw,3.3rem);max-width:15em;margin-bottom:44px}
.es-room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:0 0 56px;padding:0;list-style:none}
.es-room-grid li{border-top:1px solid #d4d6d0;padding-top:20px;font-size:1.5rem;font-weight:300;line-height:1.4}
.es-num{display:block;color:var(--eyebrow);font-size:.75rem;letter-spacing:.14em;margin-bottom:14px;font-weight:600}
.es-cost{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:42px;border-radius:12px;background:var(--stone)}
.es-cost h3{font-size:1.7rem;font-weight:300;line-height:1.4}
.es-cost h3 span{display:block;color:#6e5532}
.es-cost p{font-size:1.04rem;color:var(--body)}

/* 5. approach */
.es-center{max-width:720px;margin:0 auto 46px;text-align:center}
.es-center p{font-size:1.08rem;color:var(--body)}
.es-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}
.es-steps h3{margin-bottom:10px}
.es-steps p{color:var(--body)}
.es-note{max-width:770px;margin:30px auto 0;text-align:center;color:#5f676d;font-size:.9rem}

/* 6. offers: commitment only, no prices (Rich's brief) */
.es-work{padding-bottom:44px}
.es-offer-head{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:38px}
.es-offer-head>p{max-width:20em;color:var(--body)}
.es-offers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.es-offer{padding:28px 22px;border:1px solid var(--rule);border-radius:10px;display:flex;flex-direction:column}
.es .es-offer .es-eyebrow{letter-spacing:.12em;font-size:.66rem;min-height:2.6em;margin-bottom:14px}
.es-offer h3{margin-bottom:6px}
.es-term{font-weight:600;font-size:.95rem;margin:0 0 16px}
.es-offer p{font-size:.94rem;color:var(--body)}
.es-offer .es-fit{font-style:italic;font-size:.9rem}
.es-offer .es-link{align-self:flex-start;margin-top:auto;font-size:.85rem}
.es-offer.es-dark{border-color:var(--es-slate)}
.es-offer.es-dark p{color:#d1d9df}
.es-offer.es-dark .es-term{color:var(--es-cream)}
.es-offer.es-dark .es-fit{color:#e7dac2}
.es-offers-note{font-size:.85rem;color:#666d72;margin:22px 0 0}

/* 7. corporate invitation: one band, no stacked padding */
.es-corp{padding-top:30px;padding-bottom:50px}
.es-corp>div{border-top:1px solid #d4d8d5;padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.es .es-corp .es-eyebrow{margin-bottom:10px}
.es-corp h3{margin-bottom:6px}
.es-corp p{color:var(--body);margin:0}
.es-corp .es-btn{flex-shrink:0;white-space:nowrap}

/* 8. meet Rich */
.es-about{padding:64px 0}
.es-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.es-about img{display:block;width:100%;height:auto;aspect-ratio:650/515;object-fit:cover;border-radius:12px}
.es-about p{color:var(--body);font-size:1.04rem}
.es-about .es-sig{font-size:1.6rem;font-weight:300;color:var(--ink)}

/* 9. client experiences */
.es-stories{display:grid;grid-template-columns:1fr 1fr;gap:38px 50px;margin:0;padding:0;list-style:none}
.es-story{border-top:1px solid rgba(255,255,255,.15);padding-top:24px}
.es-story blockquote{margin:0 0 16px;font-size:1.3rem;font-weight:300;line-height:1.5}
.es-story cite{font-style:normal;font-size:.85rem;color:var(--es-cream)}
.es-story cite span{display:block;font-size:.75rem;color:#b9c6cf;margin-top:6px}
.es-disclaimer{font-size:.75rem;color:#aebbc4;margin:34px 0 22px}

/* 10. FAQs and close */
.es-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.es-faq details{padding:20px 0;border-bottom:1px solid var(--rule)}
.es-faq details:first-child{padding-top:0}
.es-faq summary{font-size:1.1rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.es-faq summary::-webkit-details-marker{display:none}
.es-faq summary::after{content:"+";color:var(--eyebrow);font-weight:400;font-size:1.4rem;line-height:1}
.es-faq details[open] summary::after{content:"\2013"}
.es-faq details p{margin:14px 0 0;color:var(--body)}
.es-final{padding:78px 0;text-align:center}
.es-final h2{font-size:clamp(2.2rem,4vw,3rem)}
.es-final p{max-width:36em;margin:0 auto 26px;font-size:1.08rem;color:#cbd5dc}
.es-final .es-small{font-size:.78rem;margin:18px auto 0}

@media (max-width:1050px){
  .es-offers,.es-quotes{grid-template-columns:repeat(2,1fr)}
  .es-quotes{row-gap:32px}
  .es .es-offer .es-eyebrow{min-height:0}
}
@media (max-width:900px){
  .es-hero{gap:28px}
  .es-room-grid,.es-steps{gap:28px}
  .es-about-grid,.es-faq{gap:40px}
  .es-offer-head{display:block}
  .es-offer-head>p{max-width:none}
}
@media (max-width:700px){
  .es-sec{padding:60px 0}
  .es-hero{grid-template-columns:1fr;padding-top:8px;gap:26px}
  .es-hero .es-copy{padding-top:0}
  .es-portrait img{aspect-ratio:1/1;object-position:52% 30%}
  .es-lead{font-size:1.15rem}
  .es-quotes,.es-room-grid,.es-steps,.es-offers,.es-about-grid,.es-stories,.es-faq,.es-cost{grid-template-columns:1fr}
  .es-proof-top{justify-content:center;text-align:center;font-size:.85rem}
  .es-proof-top::before,.es-proof-top::after{display:none}
  .es-proof-foot{flex-direction:column;align-items:flex-start}
  .es-quote blockquote{font-size:1.1rem}
  .es-room h2{margin-bottom:30px}
  .es-room-grid{gap:18px;margin-bottom:34px}
  .es-cost{gap:20px;padding:28px 22px}
  .es-cost h3 span{margin-top:8px}
  .es-offer-head{display:block;margin-bottom:28px}
  .es-offer{padding:26px 22px}
  .es-work{padding-bottom:30px}
  .es-corp{padding-top:10px;padding-bottom:34px}
  .es-corp>div{display:block;padding-top:24px}
  .es-corp .es-btn{margin-top:16px}
  .es-about{padding:50px 0}
  .es-about-grid{gap:30px}
  .es-story blockquote{font-size:1.15rem}
  .es-faq{gap:16px}
  .es-btn{min-height:48px}
}

/* ── Offer pages ───────────────────────────────────────────────────────── */
/* hero: copy left, portrait right */
.es-ihero{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding-top:6px;padding-bottom:56px}
.es-crumb{font-size:.78rem;color:#c1cbd1;margin:0 0 26px}
.es-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(193,203,209,.4)}
.es-ihero .es-intro{max-width:34em}
.es-facts{color:var(--es-amber);font-size:.95rem;margin:0 0 24px}
.es-ihero figure{margin:0}
.es-ihero img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;object-position:50% 25%;border-radius:12px}
.es-top .es-ihero h1{font-size:clamp(2.5rem,4.4vw,3.8rem)}
/* "on this page" links: a div with role=navigation, not a <nav>, because
   site.css styles every nav as the top bar (and hides its list on phones) */
.es-jump{border-bottom:1px solid var(--rule)}
.es-jump ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:20px 0;list-style:none;font-size:.9rem}
.es-jump a{color:var(--ink);text-decoration:none;border-bottom:1px solid #b98735;padding-bottom:2px}
/* two columns: argument left, list right */
.es-split{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.es-split p,.es-split li{color:var(--body);font-size:1.04rem}
.es-split ul{margin:0;padding-left:20px}
.es-split li{margin-bottom:12px}
.es-split h3{margin:0 0 8px}
.es-split h3+p{margin-bottom:22px}
/* two cards side by side (approaches, formats) */
.es-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.es-card{padding:30px;border:1px solid var(--rule);border-radius:10px;background:var(--es-cream)}
.es-stone .es-card{border-color:#e0dfd8}
.es-card h3{margin-bottom:6px}
.es-card p{color:var(--body)}
.es-card .es-term{color:var(--ink)}
.es-card .es-take{font-weight:600;color:var(--ink);font-size:.95rem;margin:0}
.es-after{max-width:46em;margin:28px 0 0;color:var(--body)}
/* process steps reuse .es-steps; labels */
.es-step-label{display:block;color:var(--eyebrow);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
/* quotes on dark reuse .es-stories; three across */
.es-stories.es-three{grid-template-columns:repeat(3,1fr)}
/* investment */
.es-invest{max-width:780px;margin:0 auto;text-align:center}
.es-invest .es-price{color:var(--ink);font-size:clamp(2.4rem,4vw,3.1rem);font-weight:300;line-height:1.2;margin:0 0 14px;letter-spacing:-.02em}
.es-invest>p{color:var(--body);font-size:1.06rem}
.es-credit{margin:32px auto 0;max-width:640px;text-align:left;padding:26px 28px;background:var(--stone);border-left:3px solid var(--es-amber);border-radius:8px}
.es-credit h3{margin-bottom:10px}
.es-credit p{color:#4f5d66;margin:0 0 10px}
.es-credit p:last-child{margin:0}
/* other offers */
.es-related{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:6px}
.es-related .es-link{font-size:.95rem}
.es-sec-tight{padding:56px 0}
.es-research{font-size:.9rem}

@media (max-width:900px){
  .es-ihero{gap:30px}
  .es-split{gap:40px}
  .es-stories.es-three{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .es-ihero{grid-template-columns:1fr;padding-bottom:40px}
  .es-ihero img{max-height:360px}
  .es-top .es-ihero h1{font-size:2.6rem}
  .es-split,.es-cards,.es-stories.es-three{grid-template-columns:1fr}
  .es-split{gap:24px}
  .es-card{padding:24px 22px}
  .es-jump ul{gap:8px 20px}
  .es-credit{padding:22px 20px}
}
.es-ihero.es-noimg{grid-template-columns:minmax(0,760px)}
/* centred sections: the eyebrow keeps its centring (its own margin rule is more specific) */
.es .es-final .es-eyebrow,.es .es-invest .es-eyebrow,.es .es-center .es-eyebrow{max-width:none;margin-left:auto;margin-right:auto}

/* forms on Evening Slate pages (contact). Inputs keep site.css .form layout. */
button.es-btn{border:0;cursor:pointer;font-family:inherit;align-self:flex-start}
button.es-btn[disabled]{opacity:.65;cursor:default;transform:none}
.es-form label{color:var(--ink)}
.es-form input,.es-form textarea{border-color:#cfd2cc;border-radius:8px;background:#fff}
.es-form input:focus,.es-form textarea:focus{outline:3px solid #b5761a;outline-offset:1px;border-color:transparent}
.es .es-form .note{color:#5f676d;font-size:.85rem}