/* ============================================================
   ESSENTIA — page styles
   Builds on tokens.css + main.css. Iterates the homepage's
   "dawn watercolor" Essentia moment into a full invitation:
   dawn surfaces for the offer, ink for the descent sections,
   the sunset-orange block for the final call.
   ============================================================ */

/* This page has no fixed nav — undo the site-wide nav offset so the
   hero starts at the very top and 100svh means one full viewport */
body { padding-top: 0; }

/* ---- Shared page primitives ---------------------------------- */
.ess-section { padding-block: var(--space-section); }

.ess-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ess-eyebrow-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
  max-width: 10rem;
}
.on-ink .ess-eyebrow-row::after { background: var(--hairline-inv); }

/* Polaroid photo — the page's recurring artifact */
.ess-polaroid { margin: 0; }
.ess-polaroid img {
  border: 6px solid var(--cream);
  border-radius: var(--radius-photo);
  box-shadow: 0 30px 60px -28px rgba(38, 22, 13, 0.5);
}
.ess-polaroid figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  text-align: center;
}
.on-ink .ess-polaroid figcaption { color: var(--bone); }

/* ---- Hero ----------------------------------------------------- */
.ess-hero {
  position: relative;
  padding-top: clamp(4rem, 10vh, 7rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
  min-height: 100svh;
  display: grid;
  align-items: center;
}
.ess-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-group) clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.ess-hero-logo {
  width: clamp(4.5rem, 7vw, 6.5rem);
  height: auto;
  margin-bottom: 1.6rem;
}
.ess-hero-title {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(3.4rem, 10.5vw, 9rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin-top: 1.4rem;
}
.ess-hero-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  color: var(--flame-deep);
  margin-top: 1.1rem;
}
.ess-hero-lede {
  margin-top: 1.8rem;
  max-width: 32em;
  font-size: var(--text-lede);
  line-height: 1.6;
  color: var(--dawn-deep);
}
.ess-hero-cta {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.ess-hero-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dawn-deep);
  max-width: 16rem;
  line-height: 1.5;
}
.ess-hero-limit {
  margin-top: 0.85rem;
  max-width: 16.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--dawn-deep);
  opacity: 0.65;
  line-height: 1.45;
}

/* photo cluster — two overlapping polaroids */
.ess-hero-photos {
  position: relative;
  min-height: clamp(24rem, 52vw, 38rem);
}
.ess-hero-photos .ph1 {
  position: absolute;
  inset: 0 auto auto 0;
  width: 78%;
  transform: rotate(2.2deg);
}
.ess-hero-photos .ph1 figcaption { text-align: left; }
.ess-hero-photos .ph2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  transform: rotate(-3.5deg);
}

/* seal line under the hero copy */
.ess-hero-seal {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dawn-deep);
}
.ess-hero-seal .spark { color: var(--flame-deep); }

/* This page stays in the sunset palette — the homepage's pink
   accent on dark sections becomes terracotta here */
.on-ink .display em { color: var(--terracotta); }
.on-ink .ess-polaroid figcaption { color: var(--bone); }
.on-flame .ess-polaroid figcaption { color: rgba(38, 22, 13, 0.8); }

/* ---- Why Essentia is different -------------------------------- */
.ess-why { background: var(--ink); color: var(--cream); }
.ess-why-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-group) clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.ess-why-photo { align-self: center; }
.ess-why-title { font-size: var(--text-h2); max-width: 14em; }
.ess-why-intro { max-width: 40rem; }
.ess-why-intro p {
  margin-top: 1.4rem;
  color: var(--bone);
  font-size: var(--text-lede);
  line-height: 1.65;
}
.ess-why-intro .lede { color: var(--bone); max-width: none; }
.ess-why-intro p strong { color: var(--cream); font-weight: 600; }

.ess-why-pillars {
  margin-top: calc(var(--space-group) * 1.3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
}
.ess-pillar {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-inv);
}
.ess-pillar-num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: rgba(237, 225, 208, 0.55);
}
.ess-pillar-name {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 520;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--terracotta);
}
.ess-pillar p {
  margin-top: 0.85rem;
  color: var(--bone);
  line-height: 1.55;
}

.ess-why-close {
  margin-top: calc(var(--space-group) * 1.15);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: var(--text-h3);
  line-height: 1.3;
  color: var(--cream);
  max-width: 22em;
}

/* ---- Immersion (the offer) ------------------------------------ */
.ess-immersion h2 { font-size: var(--text-h2); max-width: 15em; }
.ess-immersion .lede { color: var(--dawn-deep); margin-top: 1.4rem; }
.ess-immersion-intro p {
  margin-top: 1.3rem;
  max-width: 36em;
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

/* is this you? — resonance list */
.ess-resonance {
  margin-top: var(--space-group);
  max-width: 46rem;
  list-style: none;
}
.ess-resonance li {
  display: flex;
  gap: 1rem;
  padding-block: 1.15rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}
.ess-resonance li:last-child { border-bottom: 1px solid var(--hairline); }
.ess-resonance li::before {
  content: "✦";
  color: var(--flame-deep);
  flex-shrink: 0;
  font-size: 0.8em;
  line-height: 1.9;
}
.ess-resonance-close {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: var(--text-h3);
  line-height: 1.3;
  color: var(--dawn-deep);
  max-width: 20em;
}

/* the seven-day journey — lead-in to the arc */
.ess-immersion-lead { margin-top: calc(var(--space-group) * 1.4); }
.ess-immersion-bridge {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 520;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 18em;
}
.ess-immersion-bridge em { font-style: italic; font-weight: 420; color: var(--flame-deep); }

/* photo band */
.ess-band {
  margin-top: var(--space-group);
  display: grid;
  grid-template-columns: 5fr 4fr 3fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: end;
}
.ess-band .ess-polaroid:nth-child(2) { transform: rotate(-1.6deg) translateY(-1.5rem); }
.ess-band .ess-polaroid:nth-child(3) { transform: rotate(2.4deg); }

/* the arc — numbered movements */
.ess-arc { margin-top: calc(var(--space-group) * 1.5); }
.ess-arc-item {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  padding-block: 1.9rem;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.ess-arc-item:last-child { border-bottom: 1px solid var(--hairline); }
.ess-arc-num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--dawn-deep);
}
.ess-arc-name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 520;
}
.ess-arc-name em { font-style: italic; font-weight: 420; color: var(--flame-deep); }
.ess-arc-body { color: var(--ink-soft); line-height: var(--leading-body); max-width: 34em; }

/* ---- The setting ----------------------------------------------- */
.ess-setting-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-group) clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.ess-setting h2 { font-size: var(--text-h2); max-width: 13em; }
.ess-setting-copy {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  line-height: var(--leading-body);
  max-width: 32em;
  font-size: var(--text-lede);
}
.ess-setting-meta {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--flame-deep);
}
.ess-amenities-wrap { align-self: center; }
.ess-amenities-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.3rem;
}
.ess-amenities { list-style: none; }
.ess-amenities li {
  display: flex;
  gap: 0.9rem;
  padding-block: 1rem;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 460;
  line-height: 1.25;
}
.ess-amenities li:last-child { border-bottom: 1px solid var(--hairline); }
.ess-amenities li::before {
  content: "✦";
  color: var(--flame-deep);
  font-size: 0.68em;
  line-height: 2;
  flex-shrink: 0;
}
.ess-setting-photo {
  margin-top: var(--space-group);
  transform: rotate(-0.6deg);
}
.ess-setting-photo img { width: 100%; }

/* ---- Two paths ------------------------------------------------- */
.ess-paths h2 { font-size: var(--text-h2); max-width: 13em; }
.ess-paths-grid {
  margin-top: var(--space-group);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-group) clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.ess-path:nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
.ess-path .ess-polaroid { max-width: 26rem; }
.ess-path:nth-child(1) .ess-polaroid { transform: rotate(-1.8deg); }
.ess-path:nth-child(2) .ess-polaroid { transform: rotate(2deg); }
.ess-path-label {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay);
}
.ess-path h3 {
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 520;
  max-width: 14em;
}
.ess-path h3 em { color: var(--flame-deep); font-weight: 420; }
.ess-path p { margin-top: 1.1rem; color: var(--ink-soft); line-height: var(--leading-body); max-width: 30em; }
.ess-paths-foot {
  margin-top: var(--space-group);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--clay);
  text-align: center;
}

/* ---- Included + investment ------------------------------------ */
.ess-included-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-group) clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.ess-included h2 { font-size: var(--text-h2); max-width: 13em; }
.ess-included-list {
  margin-top: 2.2rem;
  list-style: none;
}
.ess-included-list li {
  display: flex;
  gap: 0.9rem;
  padding-block: 1.05rem;
  border-top: 1px solid var(--hairline);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34em;
}
.ess-included-list li:last-child { border-bottom: 1px solid var(--hairline); }
.ess-included-list .spark { color: var(--flame-deep); flex-shrink: 0; }
.ess-included-list strong { color: var(--ink); font-weight: 600; }

/* invitation card */
.ess-invest {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(2rem, 4vw, 3.2rem);
  border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(38, 22, 13, 0.55);
  transform: rotate(0.6deg);
  position: sticky;
  top: 2rem;
}
.ess-invest .eyebrow { color: var(--bone); }
.ess-invest-lede {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.35;
}
.ess-invest-points { margin-top: 1.2rem; list-style: none; }
.ess-invest-points li {
  display: flex;
  gap: 0.8rem;
  padding-block: 1rem;
  border-top: 1px solid var(--hairline-inv);
  color: var(--bone);
  font-size: var(--text-small);
  line-height: 1.6;
}
.ess-invest-points .spark { color: var(--terracotta); flex-shrink: 0; }
.ess-invest .btn { margin-top: 1.8rem; width: 100%; justify-content: center; background: var(--terracotta); color: var(--ink); }
.ess-invest .btn:hover { background: var(--cream); }
.ess-invest-micro {
  margin-top: 1.1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ---- Hosts / your guides -------------------------------------- */
.ess-hosts-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-group) clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.ess-hosts-photos { position: relative; }
.ess-hosts-photos .ph-main { transform: rotate(-1.4deg); }
.ess-hosts-photos .ph-main figcaption { text-align: left; }
.ess-hosts-photos .ph-candid {
  position: absolute;
  right: -8%;
  bottom: -3rem;
  width: 46%;
  transform: rotate(4deg);
}
.ess-hosts h2 { font-size: var(--text-h2); max-width: 15em; }
.ess-hosts-lead > p { margin-top: 1.4rem; color: var(--ink-soft); line-height: var(--leading-body); max-width: 34em; font-size: var(--text-lede); }

.ess-hosts-bios {
  margin-top: calc(var(--space-group) * 1.4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-group) clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.ess-host { padding-top: 1.5rem; border-top: 2px solid var(--flame-deep); }
.ess-host-modalities {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.ess-host-name {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 520;
  line-height: 1;
}
.ess-host-body p { margin-top: 1.1rem; color: var(--ink-soft); line-height: var(--leading-body); max-width: 34em; }
.ess-host-body p.ess-host-belief {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  color: var(--flame-deep);
}

/* ---- For / not for --------------------------------------------- */
.ess-for { background: var(--ink); color: var(--cream); }
.ess-for h2 { font-size: var(--text-h2); max-width: 14em; }
.ess-for-grid {
  margin-top: var(--space-group);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-group) clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.ess-for-col h3 {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bone);
}
.ess-for-col ul { margin-top: 1.4rem; list-style: none; }
.ess-for-col li {
  display: flex;
  gap: 0.9rem;
  padding-block: 0.95rem;
  border-top: 1px solid var(--hairline-inv);
  color: var(--bone);
  line-height: 1.55;
}
.ess-for-col.is-yes li::before { content: "✦"; color: var(--terracotta); flex-shrink: 0; }
.ess-for-col.is-no li::before { content: "—"; color: rgba(237, 225, 208, 0.55); flex-shrink: 0; }
.ess-for-col.is-no li { color: rgba(237, 225, 208, 0.8); }
.ess-for-foot {
  margin-top: var(--space-group);
  max-width: 30em;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 420;
  line-height: 1.3;
  color: var(--cream);
}
.ess-for-foot em { font-style: italic; color: var(--terracotta); }

/* ---- False beliefs --------------------------------------------- */
.ess-beliefs h2 { font-size: var(--text-h2); max-width: 14em; }
.ess-belief {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 1.5rem clamp(2.5rem, 6vw, 6rem);
}
.ess-beliefs .ess-belief:first-of-type { margin-top: var(--space-group); }
.ess-belief:nth-of-type(even) .ess-belief-quote { order: 2; }
.ess-belief-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.9rem;
}
.ess-belief-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.2;
  color: var(--ink);
}
.ess-belief-quote blockquote::before { content: "“"; color: var(--flame); }
.ess-belief-quote blockquote::after { content: "”"; color: var(--flame); }
.ess-belief-truth p { color: var(--ink-soft); line-height: var(--leading-body); max-width: 30em; }
.ess-belief-truth p + p { margin-top: 1em; }

/* ---- FAQ -------------------------------------------------------- */
.ess-faq h2 { font-size: var(--text-h2); }
.ess-faq-list { margin-top: var(--space-group); max-width: 52rem; }
.ess-faq details { border-top: 1px solid var(--hairline); }
.ess-faq details:last-child { border-bottom: 1px solid var(--hairline); }
.ess-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 520;
  transition: color var(--speed-micro);
}
.ess-faq summary::-webkit-details-marker { display: none; }
.ess-faq summary:hover { color: var(--flame-deep); }
.ess-faq summary::after {
  content: "✦";
  color: var(--flame-deep);
  font-size: 0.85em;
  flex-shrink: 0;
  transition: transform 300ms var(--ease-out);
}
.ess-faq details[open] summary::after { transform: rotate(135deg); }
.ess-faq details p {
  padding-bottom: 1.7rem;
  color: var(--ink-soft);
  line-height: var(--leading-body);
  max-width: 40em;
}
.ess-faq details p + p { margin-top: -0.7rem; padding-bottom: 1.7rem; }

/* ---- Apply (final call) ----------------------------------------- */
.ess-apply { position: relative; }
.ess-apply-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-group) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ess-apply h2 { font-size: var(--text-giant); max-width: 10em; }
.ess-apply-photo { justify-self: end; width: min(100%, 22rem); transform: rotate(2.6deg); }
.ess-steps { margin-top: var(--space-group); list-style: none; max-width: 38rem; }
.ess-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  padding-block: 1.3rem;
  border-top: 1px solid rgba(38, 22, 13, 0.25);
  align-items: baseline;
}
.ess-steps .num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--flame-deep);
}
.ess-steps strong { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.ess-steps p { color: rgba(38, 22, 13, 0.85); line-height: 1.6; }
.ess-apply-cta { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ess-apply-micro {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(38, 22, 13, 0.8);
  max-width: 18rem;
  line-height: 1.6;
}

/* ---- Footer ------------------------------------------------------ */
.ess-footer { padding-block: var(--space-section); }
.ess-footer-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-group) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  justify-items: start;
}
.ess-footer-seal {
  width: clamp(11rem, 18vw, 15rem);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 30px 60px -25px rgba(232, 67, 13, 0.35);
}
.ess-footer-line {
  color: var(--bone);
  font-size: var(--text-lede);
  line-height: 1.6;
}
.ess-footer-note .btn { margin-top: 1.8rem; }
.ess-footer-micro {
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.75;
}

/* ---- Responsive -------------------------------------------------- */
@media (max-width: 960px) {
  .ess-hero-grid,
  .ess-included-grid,
  .ess-hosts-intro,
  .ess-hosts-bios,
  .ess-why-top,
  .ess-apply-grid { grid-template-columns: 1fr; }

  .ess-why-photo { max-width: 26rem; }
  .ess-why-pillars { grid-template-columns: 1fr 1fr; gap: 2rem clamp(1.5rem, 4vw, 3rem); }

  .ess-hero-photos { min-height: clamp(20rem, 88vw, 30rem); max-width: 30rem; }
  .ess-hosts-photos { max-width: 26rem; }
  .ess-hosts-photos .ph-candid { right: 0; bottom: -2rem; }
  .ess-hosts-intro { row-gap: calc(var(--space-group) + 2.5rem); }
  .ess-invest { position: static; transform: none; }
  .ess-apply-photo { justify-self: start; }

  .ess-arc-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .ess-setting-grid { grid-template-columns: 1fr; }
  .ess-paths-grid { grid-template-columns: 1fr; }
  .ess-footer-grid { grid-template-columns: 1fr; }
  .ess-path:nth-child(2) { margin-top: 0; }
  .ess-belief { grid-template-columns: 1fr; }
  .ess-belief:nth-of-type(even) .ess-belief-quote { order: 0; }
}

@media (max-width: 700px) {
  .ess-band { grid-template-columns: 1fr 1fr; }
  .ess-band .ess-polaroid:nth-child(3) { display: none; }
  .ess-for-grid { grid-template-columns: 1fr; }
  .ess-why-pillars { grid-template-columns: 1fr; }
  .ess-hero-seal { gap: 0.7rem 1.6rem; }
}