/* ==========================================================================
   Efficient Street V3 — inner-page components
   Loaded after es-tokens.css and es-site.css. Same rules apply: no raw hex
   outside :root, no preserveAspectRatio="none", no transition-all.
   ========================================================================== */

/* ==========================================================================
   Page header — the short daylight band inner pages use in place of the
   homepage hero.
   ========================================================================== */

.es-pagehead {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--art-sky) 0%,
    color-mix(in srgb, var(--illus-sky) 50%, var(--cream)) 55%,
    var(--cream) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .es-pagehead { background: linear-gradient(180deg, var(--art-sky), var(--cream)); }
}

/* Offset by the road's height: .es-road is a flow sibling that also lands at
   the bottom of the head, so bottom:0 here buries the buildings' plinths
   under the asphalt. The skyline stands ON the road. */
.es-pagehead__sky { position: absolute; left: 0; right: 0; bottom: var(--road-h); line-height: 0; opacity: 0.85; }
.es-pagehead__sky svg { width: 100%; height: clamp(90px, 11vw, 150px); }

/* --leaf reads 3.4–3.7:1 against the sky band on every page that carries this
   header — below the 4.5:1 AA floor for 12.5px text. --pine clears 7:1+ and
   is a small enough shift off-brand that it isn't worth a second token. */
.es-pagehead .es-eyebrow { color: var(--pine); }

/* --- Raster head plate (about, services, contact, dashboard, journal,
   seo-aeo-geo) ------------------------------------------------------------ */
/* Full opacity, unlike the SVG skyline above: the plate is the artwork here,
   not a wash behind the copy. Its own asphalt was cropped off at the curb so
   .es-road below still draws the single road edge the §4 gate checks. */
.es-pagehead--art .es-pagehead__sky { opacity: 1; }
.es-pagehead--art picture { display: block; line-height: 0; }
.es-pagehead__art {
  display: block;
  width: 100%;
  /* 26.6vw is the plate's own aspect (2400x638), so it renders uncropped from
     ~565px to ~1500px wide. Above that the cap holds and cover trims sky off
     the top; below it, the floor holds and cover trims the flanking
     storefronts inward from the sides. */
  height: clamp(150px, 26.6vw, 400px);
  object-fit: cover;
  object-position: center bottom;
  /* Same join fix as the hero: fade the plate's top edge into the section
     gradient behind it rather than trusting two sky colours to match. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52px);
          mask-image: linear-gradient(180deg, transparent 0, #000 52px);
}

/* The plate's clear sky gap runs from 33% to 70% of its width — 37%, and it
   stays 37% at every width the plate renders uncropped. The copy has to live
   inside that lane or it crosses a storefront: at the default 62ch the
   subhead ran straight through both signs. 36% of the wrap keeps it clear
   with room to spare; the h1 is exempt because it sits above the rooflines. */
@media (min-width: 1025px) {
  .es-pagehead--art .es-pagehead__inner > p { max-width: min(52ch, 36%); }
  /* The plate is anchored to the section's bottom edge, so the only way to
     put sky between the copy and the rooflines is to grow the section from
     the copy's side. The p above already keeps the subhead inside the gap
     between the two buildings horizontally — this padding is what clears
     the h1, which is deliberately NOT width-capped, from the roofline
     vertically. clamp(130px,15vw,216px) was the first working value; this
     is trimmed to the shortest header that still keeps the h1 clear of both
     rooflines at every width from 1025 to 1600 — re-verify with a real
     screenshot (not just computed geometry) before trimming further, since
     the plate's rooflines don't sit at a fixed fraction of its height. */
  .es-pagehead--art .es-pagehead__inner { padding-bottom: clamp(70px, 11vw, 158px); }
  /* Flat sky rather than the sky-to-cream ramp: that ramp was tuned for a
     head whose art started immediately, and it now reads as a washed-out
     band in the gap above the plate. */
  .es-pagehead--art { background: var(--art-sky); }
}

/* Below that the lane is too narrow to set type in, so the plate stops being
   a backdrop and becomes a band under the copy — the same stacked
   construction the homepage hero uses. Order is explicit because the plate
   precedes the copy in the DOM. */
@media (max-width: 1024px) {
  .es-pagehead--art { display: flex; flex-direction: column; }
  .es-pagehead--art .es-pagehead__sky { position: static; order: 2; }
  .es-pagehead--art .es-pagehead__inner { order: 1; padding-bottom: clamp(28px, 4vw, 44px); }
  .es-pagehead--art .es-road { order: 3; }
  .es-pagehead--art .es-pagehead__art { height: clamp(130px, 22vw, 240px); }
}

.es-pagehead__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(46px, 7vw, 84px) clamp(70px, 9vw, 120px);
}
.es-pagehead__inner h1 { margin-top: 16px; max-width: 20ch; font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.es-pagehead__inner > p { margin-top: 18px; max-width: 62ch; font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--ink-2); }
.es-pagehead--tight .es-pagehead__inner { padding-bottom: clamp(50px, 7vw, 90px); }

.es-note {
  margin-top: 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--illus-brick);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--forest);
}

.es-section--alt { background: var(--cream-2); }

/* ==========================================================================
   Illustrated icon holder — a light disc so the icon reads as an object
   sitting on the page, the way the brand sheet presents them.
   ========================================================================== */

.es-ill {
  display: inline-grid;
  place-items: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--sh-2);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.es-ill svg { width: 48px; height: 48px; }
.es-ill--sm { width: 62px; height: 62px; }
.es-ill--sm svg { width: 34px; height: 34px; }

.es-tile:hover .es-ill,
.es-svc__card:hover .es-ill,
.es-linkcard:hover .es-ill,
.es-infocard:hover .es-ill { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* ==========================================================================
   Tick list — illustrated check per row
   ========================================================================== */

.es-ticks { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.es-ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.96rem;
  color: var(--ink-2);
}
.es-ticks svg { width: 22px; height: 22px; margin-top: 2px; }

/* ==========================================================================
   Arrow link
   ========================================================================== */

.es-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--leaf);
  text-decoration: none;
}
.es-arrowlink span { transition: transform 240ms var(--ease); }
.es-arrowlink:hover span,
a:hover .es-arrowlink span { transform: translateX(4px); }

/* ==========================================================================
   Service / explainer cards
   ========================================================================== */

.es-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.es-svc__card {
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 2px solid var(--art-ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--sh-2);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.es-svc__card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.es-svc__card h2 { margin-top: 22px; font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.es-svc__card > p { margin-top: 12px; font-size: 0.97rem; }
.es-svc__card .es-arrowlink { margin-top: auto; padding-top: 22px; }

@media (max-width: 980px) { .es-svc { grid-template-columns: 1fr; } }

/* ==========================================================================
   Two-up link cards
   ========================================================================== */

.es-cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 26px); margin-top: 26px; }
.es-linkcard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  padding: 28px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: inherit;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.es-linkcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.es-linkcard h3 { font-size: 1.15rem; }
.es-linkcard p { margin-top: 10px; font-size: 0.93rem; }
.es-linkcard .es-arrowlink { margin-top: 14px; }

@media (max-width: 860px) { .es-cards2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   About — philosophy + rules
   ========================================================================== */

.es-philosophy { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.es-philosophy blockquote {
  margin: 18px 0 0;
  padding-left: 26px;
  border-left: 3px solid var(--leaf);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}
.es-philosophy__list h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
@media (max-width: 900px) { .es-philosophy { grid-template-columns: 1fr; } }

.es-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(34px, 5vw, 56px); }
.es-rule {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 26px 30px;
  border: 2px solid var(--art-ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--sh-2);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.es-rule:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
/* Raster plates, same treatment as .es-pillar__art on the homepage — 3:2 is
   the plates' own ratio so nothing crops at 3-up. Reuses the same three
   images rather than commissioning bespoke art per rule; the badge number
   and copy carry the distinction. */
.es-rule__art {
  margin: 0 -26px;
  aspect-ratio: 3 / 2;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, var(--art-sky), var(--cream-2));
  line-height: 0;
  overflow: hidden;
}
.es-rule__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.es-rule__num {
  align-self: flex-start;
  margin-top: -17px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--font-sign);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  box-shadow: var(--sh-2);
}
.es-rule h3 { margin-top: 18px; }
.es-rule p { margin-top: 10px; font-size: 0.97rem; }
@media (max-width: 900px) {
  .es-rules { grid-template-columns: 1fr; }
  /* Same fix as .es-pillar__art: the inherited SVG-era ratio (220/85) sliced
     the raster storefronts at the awning. 2:1 keeps a whole shop in frame. */
  .es-rule__art { aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   Journal index
   ========================================================================== */

.es-posts { display: grid; gap: clamp(22px, 3vw, 34px); }
.es-post {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.es-post:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.es-post__cover { display: block; border-radius: 14px; overflow: hidden; line-height: 0; }
.es-post__cover img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.es-post__tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--leaf);
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.es-post__body h2 { margin-top: 14px; font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
.es-post__body h2 a { color: inherit; text-decoration: none; }
.es-post__body h2 a:hover { color: var(--leaf); }
.es-post__body > p { margin-top: 12px; font-size: 0.97rem; }
.es-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}
.es-post .es-arrowlink { margin-top: 14px; }
@media (max-width: 860px) { .es-post { grid-template-columns: 1fr; } }

/* ==========================================================================
   Blog post detail
   ========================================================================== */

.es-posthead {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--art-sky) 0%,
    color-mix(in srgb, var(--illus-sky) 45%, var(--cream)) 60%,
    var(--cream) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .es-posthead { background: linear-gradient(180deg, var(--art-sky), var(--cream)); }
}
.es-posthead__sky { position: absolute; left: 0; right: 0; bottom: var(--road-h); line-height: 0; opacity: 0.72; }
.es-posthead__sky svg { width: 100%; height: clamp(72px, 8vw, 120px); }
.es-posthead__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding-block: clamp(28px, 4vw, 44px) clamp(64px, 8vw, 104px);
}
.es-posthead__inner h1 { margin-top: 16px; font-size: clamp(1.9rem, 4vw, 3.1rem); }
.es-posthead__inner .es-post__meta { margin-top: 18px; }

.es-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--leaf);
  text-decoration: none;
}
.es-backlink:hover { color: var(--forest); }

.es-postbody { max-width: 820px; padding-block: clamp(34px, 5vw, 56px) clamp(50px, 7vw, 84px); }
/* Fixed 16:9 frame, whole image visible. `contain` rather than `cover`
   because neither source is exactly 16:9 (1.53 and 1.84) and cropping a
   header photo loses the subject; the cream ground turns the residual
   letterbox into a deliberate mat rather than a gap. */
.es-post-cover {
  display: block;
  width: 100%;
  /* height:auto is load-bearing — the img's height attribute applies as a
     presentational hint, which would pin the box to the file's real height
     and leave aspect-ratio with nothing to resolve. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--cream-2);
  border-radius: 18px;
  box-shadow: var(--sh-2);
  margin-bottom: 34px;
}

/* ---- prose ---- */
.es-prose { font-size: 1.05rem; line-height: 1.78; color: var(--ink-2); }
.es-prose > p { margin-bottom: 22px; }
.es-prose h2 {
  margin: 40px 0 14px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
}
.es-prose h2:first-child { margin-top: 0; }
.es-prose a { color: var(--leaf); }
.es-prose figure { margin: 30px 0; }
.es-prose figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(13, 47, 34, 0.1);
  box-shadow: var(--sh-1);
}
.es-prose figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--muted); text-align: center; }
.es-prose ul, .es-prose ol { margin: 0 0 22px; padding-left: 24px; }
.es-prose li { margin-bottom: 8px; }
.es-prose blockquote {
  margin: 30px 0;
  padding-left: 24px;
  border-left: 3px solid var(--leaf);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
}

/* ---- "Listen to this article" ---- */
.es-audio {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px rgba(18, 29, 23, 0.08), var(--sh-1);
}
.es-audio-play {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  cursor: pointer;
  transition: background-color 300ms var(--ease), transform 350ms var(--ease);
}
.es-audio-play:hover { background: var(--pine); transform: scale(1.06); }
.es-audio-play svg { display: block; }
.es-audio-play .ico-pause { display: none; }
.es-audio.is-playing .ico-play { display: none; }
.es-audio.is-playing .ico-pause { display: block; }
.es-audio-body { flex: 1; min-width: 0; }
.es-audio-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.es-audio-label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.es-audio-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-audio-bar { position: relative; height: 5px; border-radius: 3px; background: var(--cream-2); cursor: pointer; }
.es-audio-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--leaf), var(--mint));
}
@media (max-width: 560px) {
  .es-audio { padding: 12px 16px; gap: 12px; }
  .es-audio-play { width: 38px; height: 38px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.es-contact { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.es-contact__form h2 { margin-top: 14px; font-size: clamp(1.4rem, 2.3vw, 2rem); }
.es-contact__lede { margin-top: 14px; font-size: 1rem; color: var(--ink-2); }
@media (max-width: 960px) { .es-contact { grid-template-columns: 1fr; } }

.es-form { display: grid; gap: 14px; margin-top: 28px; }
.es-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .es-form__row { grid-template-columns: 1fr; } }

.es-form input[type="text"],
.es-form input[type="email"],
.es-form input[type="password"],
.es-form input[type="url"],
.es-form select,
.es-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid rgba(13, 47, 34, 0.16);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.97rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.es-form textarea { resize: vertical; min-height: 130px; }
.es-form input:focus,
.es-form select:focus,
.es-form textarea:focus {
  outline: none;
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(30, 122, 82, 0.16);
}
.es-form ::placeholder { color: var(--muted); }
.es-form__lbl { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.es-form__submit { justify-self: start; margin-top: 4px; }
.es-form__submit[disabled] { opacity: 0.6; cursor: progress; }

/* Multi-select checkbox group ("what do you need help with?") */
.es-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid rgba(13, 47, 34, 0.16);
  border-radius: 12px;
  background: var(--card);
}
.es-form__checks legend {
  width: 100%;
  padding: 0 0 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.es-form__check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: var(--ink-2);
  cursor: pointer;
}
.es-form__check input[type="checkbox"] {
  accent-color: var(--leaf);
  width: 16px;
  height: 16px;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.es-form__honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.es-form__status { font-size: 0.92rem; }
.es-form__status.is-success { color: var(--leaf); font-weight: 600; }
.es-form__status.is-error { color: var(--illus-brick); font-weight: 600; }

.es-contact__side { display: grid; gap: 14px; }
.es-infocard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border-radius: 16px;
  background: var(--cream-2);
  color: inherit;
  text-decoration: none;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.es-infocard:not(.es-infocard--static):hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.es-infocard h3 { font-size: 1rem; }
.es-infocard p { margin-top: 5px; font-size: 0.93rem; color: var(--ink-2); }
.es-infocard__note { font-size: 0.85rem !important; color: var(--muted) !important; }
.es-infocard .es-arrowlink { margin-top: 10px; font-size: 0.88rem; }

/* ==========================================================================
   Admin auth
   ========================================================================== */

.es-auth {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--art-sky) 0%,
    color-mix(in srgb, var(--illus-sky) 45%, var(--cream)) 55%,
    var(--cream) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .es-auth { background: linear-gradient(180deg, var(--art-sky), var(--cream)); }
}
.es-auth__sky { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; opacity: 0.78; }
.es-auth__sky svg { width: 100%; height: clamp(120px, 14vw, 200px); }
.es-auth__inner { position: relative; z-index: 1; display: grid; place-items: center; padding-block: clamp(46px, 7vw, 90px) clamp(80px, 11vw, 150px); }

.es-authcard {
  width: 100%;
  max-width: 430px;
  padding: 36px 32px 32px;
  border: 2px solid var(--art-ink);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--sh-3);
  text-align: center;
}
.es-authcard__logo { width: 190px; margin: 0 auto 22px; }
.es-authcard h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.es-authcard__lede { margin-top: 10px; font-size: 0.95rem; color: var(--ink-2); }
.es-authcard .es-form { text-align: left; margin-top: 26px; }
.es-authcard .es-form__submit { justify-self: stretch; }
.es-authcard__note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 47, 34, 0.12);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.es-dash {
  padding: clamp(18px, 2.4vw, 28px);
  border: 2px solid var(--art-ink);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--sh-2);
}
.es-dash__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(13, 47, 34, 0.1);
}
.es-dash__title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.es-dash__range { font-size: 12.5px; color: var(--muted); }

.es-dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 18px); margin-top: 22px; }
.es-dash__stat { padding: 20px; border-radius: 14px; background: var(--cream-2); }
.es-dash__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.es-dash__num { display: block; margin-top: 8px; font-family: var(--font-sign); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1; color: var(--forest); }
.es-dash__delta { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.es-dash__delta--up { color: var(--leaf); font-weight: 600; }
@media (max-width: 860px) { .es-dash__stats { grid-template-columns: repeat(2, 1fr); } }

.es-dash__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(14px, 2vw, 22px); margin-top: 22px; }
@media (max-width: 960px) { .es-dash__grid { grid-template-columns: 1fr; } }

.es-dash__panel {
  margin-top: 22px;
  padding: 22px;
  border-radius: 14px;
  background: var(--cream-2);
  /* A grid/flex item defaults to min-width:auto and will refuse to shrink
     below its content — which lets the wide table push the whole page sideways
     instead of scrolling inside .es-dash__scroll. */
  min-width: 0;
}
.es-dash__grid .es-dash__panel { margin-top: 0; }
.es-dash__panel h2 { font-size: 1rem; margin-bottom: 16px; }
/* Wide content scrolls inside its own box — the page body must never
   scroll horizontally. */
.es-dash__scroll { overflow-x: auto; min-width: 0; }

.es-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 460px; }
.es-table th, .es-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid rgba(13, 47, 34, 0.09); }
.es-table th { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.es-table tr:last-child td { border-bottom: none; }
.es-table td:first-child { font-weight: 600; color: var(--ink); }

.es-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.es-pill--new { box-shadow: inset 0 0 0 1.5px var(--leaf); color: var(--leaf); }
.es-pill--booked { background: var(--leaf); box-shadow: none; color: var(--cream); }

.es-reviews { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.es-reviews li { padding-bottom: 16px; border-bottom: 1px solid rgba(13, 47, 34, 0.09); }
.es-reviews li:last-child { padding-bottom: 0; border-bottom: none; }
.es-stars { display: block; color: var(--illus-wood); letter-spacing: 2px; font-size: 13px; }
.es-reviews strong { display: block; margin-top: 6px; font-size: 0.92rem; color: var(--ink); }
.es-reviews p { margin-top: 4px; font-size: 0.9rem; color: var(--ink-2); }

.es-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1.4vw, 16px); align-items: end; height: 190px; }
.es-bars__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 10px; }
.es-bars__bar {
  width: 100%;
  max-width: 62px;
  height: var(--v);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--leaf), var(--pine));
  box-shadow: inset 0 0 0 1.5px var(--forest);
}
.es-bars__col span { font-size: 11.5px; color: var(--muted); }

.es-dash__foot { margin-top: 20px; font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.es-pricing { max-width: 520px; margin: 0 auto; }

.es-pricing__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.es-pricing__toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  font-family: var(--font-sign);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.es-pricing__toggle button.is-active { color: var(--forest); font-weight: 700; }
.es-pricing__switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--forest);
  position: relative;
  padding: 0;
}
.es-pricing__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cream);
  transition: left 200ms var(--ease);
}
.es-pricing__switch[data-on="true"]::after { left: 23px; }

.es-pricing__card {
  position: relative;
  padding: clamp(30px, 4vw, 44px);
  border: 2px solid var(--art-ink);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--sh-3);
  text-align: center;
}
.es-pricing__badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 20px;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--cream);
  font-family: var(--font-sign);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--sh-2);
  transition: opacity 150ms var(--ease);
}
.es-pricing__badge.is-hidden { opacity: 0; }

.es-pricing__price { margin: 18px 0 4px; }
.es-pricing__was {
  margin-right: 8px;
  font-size: 1.05rem;
  color: var(--muted);
  text-decoration: line-through;
}
.es-pricing__was.is-hidden { display: none; }
.es-pricing__now {
  font-family: var(--font-sign);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  color: var(--forest);
  line-height: 1;
}
.es-pricing__star {
  margin-left: 2px;
  font-size: 1.4rem;
  color: var(--leaf);
  text-decoration: none;
  vertical-align: super;
}
.es-pricing__period { font-size: 0.95rem; color: var(--muted); }

.es-pricing__card .es-btn { margin-top: 26px; }
.es-pricing__guarantee { margin-top: 16px; font-size: 0.85rem; }
.es-pricing__guarantee a { color: var(--muted); text-decoration: none; }
.es-pricing__guarantee a:hover { color: var(--leaf); text-decoration: underline; }

/* ---- Build-out phase list ---- */
.es-phaselist { display: grid; gap: clamp(20px, 3vw, 28px); margin-top: clamp(34px, 5vw, 56px); }
.es-phase {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
.es-phase__badge {
  justify-self: center;
  margin-top: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--cream);
  font-family: var(--font-sign);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  box-shadow: var(--sh-2);
}
.es-phase__card {
  padding: 28px 30px;
  border: 2px solid var(--art-ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--sh-2);
}
.es-phase__card h3 { color: var(--forest); }
.es-phase--upgrades .es-phase__card {
  background: var(--cream-2);
  border-style: dashed;
  box-shadow: none;
}
@media (max-width: 700px) {
  .es-phase { grid-template-columns: 1fr; }
  .es-phase__badge { justify-self: start; }
}

.es-pricing-disclosure {
  max-width: 760px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(13, 47, 34, 0.12);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.es-pricing-disclosure p + p { margin-top: 12px; }
.es-pricing-disclosure strong { color: var(--ink); }
.es-pricing-disclosure__mark { margin-right: 2px; color: var(--leaf); }

/* Next-entry link at the foot of a post */
.es-nextpost {
  display: block;
  margin-top: 44px;
  padding: 24px 28px;
  border-radius: 16px;
  background: var(--cream-2);
  text-decoration: none;
  color: inherit;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.es-nextpost:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.es-nextpost__k {
  display: block;
  font-family: var(--font-sign);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf);
}
.es-nextpost__t {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  color: var(--ink);
}
.es-nextpost:hover .es-nextpost__t { color: var(--leaf); }