/* ==========================================================================
   Elitestream IPTV — design system
   --------------------------------------------------------------------------
   Foundation: warm ivory and white, with cinematic midnight panels for the
   hero, the entertainment showcase, the streaming section and the closing
   call to action. Amber is the accent; it sits on midnight, where it reaches
   9.8:1 against the panel, and switches to a darker burnt tone on light
   backgrounds so small text stays legible.

   Contents
     01 Tokens
     02 Reset and base
     03 Typography
     04 Layout
     05 Buttons and links
     06 Header and navigation
     07 Hero
     08 Sections and cards
     09 Pricing
     10 FAQ
     11 Footer
     12 Floating contact
     13 Blog, comments and forms
     14 Utilities, motion and print
   ========================================================================== */

/* 01 Tokens ============================================================== */

:root {
  /* Ink and dark panels */
  --es-ink: #101a29;
  --es-ink-deep: #09111d;
  --es-surface-dark: #182638;
  --es-surface-dark-2: #1f2f45;

  /* Light foundation */
  --es-paper: #ffffff;
  --es-paper-warm: #f7f4ee;
  --es-ivory: #f4f0e7;

  /* Text */
  --es-body: #4a5567;
  --es-body-strong: #2b3648;
  --es-muted: #adb8c6;

  /* Lines */
  --es-line: #e6e1d7;
  --es-line-strong: #d6cfc0;
  --es-line-dark: rgba(244, 240, 231, 0.14);
  --es-line-dark-strong: rgba(244, 240, 231, 0.26);

  /* Accent */
  --es-amber: #f2b85a;
  --es-amber-soft: #f8d9a4;
  --es-amber-ink: #ad6716;  /* 4.44:1 on white — icons and rules only */
  --es-amber-text: #96590f; /* 5.61:1 on white, 5.11:1 on warm — small text */
  --es-amber-wash: #fdf4e6;

  /* WhatsApp */
  --es-wa: #25d366;
  --es-wa-ink: #06281a;
  --es-wa-edge: #12703f;

  /* Type */
  --es-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --es-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape */
  --es-radius: 18px;
  --es-radius-sm: 12px;
  --es-radius-lg: 26px;
  --es-pill: 999px;

  /* Elevation — ambient navy, matching the photography */
  --es-shadow-sm: 0 1px 2px rgba(16, 26, 41, 0.05), 0 4px 12px -6px rgba(16, 26, 41, 0.14);
  --es-shadow: 0 1px 2px rgba(16, 26, 41, 0.05), 0 16px 38px -18px rgba(16, 26, 41, 0.28);
  --es-shadow-lg: 0 2px 4px rgba(16, 26, 41, 0.06), 0 34px 70px -28px rgba(16, 26, 41, 0.38);

  /* Rhythm */
  --es-section: clamp(4rem, 8vw, 7.25rem);
  --es-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --es-container: 1200px;
  --es-container-wide: 1340px;
  --es-container-narrow: 760px;
}

/* 02 Reset and base ====================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--es-paper);
  color: var(--es-body);
  font-family: var(--es-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas { max-width: 100%; }

img,
video { height: auto; }

svg { flex: none; }

iframe,
embed,
object { max-width: 100%; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--es-line);
  margin: 2.5rem 0;
}

::selection {
  background: var(--es-amber);
  color: var(--es-ink);
}

/* One focus treatment everywhere: a dark ring for shape, an amber halo for
   visibility. The pair stays legible on ivory and on midnight. */
:focus-visible {
  outline: 2px solid var(--es-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(242, 184, 90, 0.6);
  border-radius: 4px;
}

.es-panel--dark :focus-visible,
.es-footer :focus-visible {
  outline-color: var(--es-ivory);
  box-shadow: 0 0 0 5px rgba(242, 184, 90, 0.5);
}

.es-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.85rem 1.4rem;
  background: var(--es-ink);
  color: var(--es-ivory);
  font-weight: 700;
  border-radius: 0 0 var(--es-radius-sm) 0;
  text-decoration: none;
}

.es-skip-link:focus {
  left: 0;
}

/* 03 Typography ========================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  color: var(--es-ink);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.3vw, 3.85rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.22rem + 2.2vw, 2.8rem); letter-spacing: -0.026em; }
h3 { font-size: clamp(1.18rem, 1.05rem + 0.55vw, 1.48rem); }
h4 { font-size: 1.125rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--es-amber-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--es-ink); }

strong, b { color: var(--es-body-strong); font-weight: 700; }

ul, ol { padding-left: 1.3em; margin: 0 0 1.2em; }
li { margin-bottom: 0.45em; }

blockquote {
  margin: 2rem 0;
  padding: 0.3rem 0 0.3rem 1.6rem;
  border-left: 3px solid var(--es-amber);
  color: var(--es-body-strong);
  font-size: 1.1rem;
}

code, kbd, samp {
  font-family: var(--es-font-mono);
  font-size: 0.9em;
  background: var(--es-paper-warm);
  padding: 0.14em 0.42em;
  border-radius: 5px;
}

pre {
  overflow-x: auto;
  padding: 1.1rem 1.25rem;
  background: var(--es-ink);
  color: var(--es-ivory);
  border-radius: var(--es-radius-sm);
}

pre code { background: none; padding: 0; color: inherit; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.97rem;
}

th, td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--es-line);
  text-align: left;
  vertical-align: top;
}

th { color: var(--es-ink); font-weight: 700; }

/* Eyebrow — echoes the wide tracking of the wordmark lockup. */
.es-eyebrow {
  margin: 0 0 0.95rem;
  color: var(--es-amber-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: 1.4;
}

.es-panel--dark .es-eyebrow,
.es-footer .es-eyebrow { color: var(--es-amber); }

.es-lead {
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--es-body);
}

/* 04 Layout ============================================================== */

.es-container {
  width: 100%;
  max-width: var(--es-container);
  margin-inline: auto;
  padding-inline: var(--es-gutter);
}

.es-container--wide { max-width: var(--es-container-wide); }
.es-container--narrow { max-width: var(--es-container-narrow); }

.es-section { padding-block: var(--es-section); }
.es-section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }

.es-panel--warm { background: var(--es-paper-warm); }

.es-panel--dark {
  background: var(--es-ink);
  color: var(--es-muted);
}

.es-panel--dark h1,
.es-panel--dark h2,
.es-panel--dark h3,
.es-panel--dark h4 { color: var(--es-ivory); }

.es-panel--dark .es-lead { color: var(--es-muted); }

/* `a` carries a type selector, so it outranks `.es-btn` on specificity.
   Buttons are excluded here and keep their own --btn-fg. */
.es-panel--dark a:not(.es-btn) { color: var(--es-amber); }
.es-panel--dark a:not(.es-btn):hover { color: var(--es-amber-soft); }
.es-panel--dark strong { color: var(--es-ivory); }

/* Section heading block */
.es-head {
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.es-head--center {
  margin-inline: auto;
  text-align: center;
}

.es-head > p:last-child { margin-bottom: 0; }

.es-head__title { margin-bottom: 0.5em; }

/* Generic responsive grid */
.es-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.es-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.es-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.es-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr)); }

/* Contact cards are short and sit inside a split column, so they need a
   smaller minimum than the general two-up grid to stay side by side. */
.es-grid--contact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.es-grid > * { min-width: 0; }

/* Split: media beside text */
.es-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.25rem);
  align-items: center;
}

@media (min-width: 900px) {
  .es-split { grid-template-columns: 1fr 1fr; }
  .es-split--media-first .es-split__media { order: -1; }
  .es-split--wide-text { grid-template-columns: 1.08fr 0.92fr; }
}

.es-split__media { min-width: 0; }

.es-split__media .es-picture {
  border-radius: var(--es-radius-lg);
  overflow: hidden;
  box-shadow: var(--es-shadow);
}

.es-panel--dark .es-split__media .es-picture {
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--es-line-dark);
}

.es-picture { display: block; }
.es-picture img { display: block; width: 100%; height: auto; }

/* Actions row */
.es-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
}

.es-head--center .es-actions { justify-content: center; }

/* 05 Buttons and links =================================================== */

.es-btn {
  --btn-bg: var(--es-ink);
  --btn-fg: var(--es-ivory);
  --btn-edge: var(--es-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.55rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-edge);
  border-radius: var(--es-pill);
  font-size: 0.975rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.es-btn:hover {
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--es-shadow-sm);
}

.es-btn:active { transform: translateY(0); }

.es-btn__icon { width: 19px; height: 19px; }
.es-btn__icon--end { transition: transform 0.16s ease; }
.es-btn:hover .es-btn__icon--end { transform: translateX(3px); }

/* Primary — midnight on light foundations, amber on cinematic panels. */
.es-btn--primary { --btn-bg: var(--es-ink); --btn-fg: var(--es-ivory); --btn-edge: var(--es-ink); }
.es-btn--primary:hover { --btn-bg: var(--es-ink-deep); --btn-edge: var(--es-ink-deep); }

.es-panel--dark .es-btn--primary,
.es-hero .es-btn--primary,
.es-footer .es-btn--primary,
.es-mobile-nav .es-btn--primary {
  --btn-bg: var(--es-amber);
  --btn-fg: var(--es-ink);
  --btn-edge: var(--es-amber);
}

.es-panel--dark .es-btn--primary:hover,
.es-hero .es-btn--primary:hover,
.es-footer .es-btn--primary:hover,
.es-mobile-nav .es-btn--primary:hover {
  --btn-bg: var(--es-amber-soft);
  --btn-edge: var(--es-amber-soft);
}

/* Secondary — outlined, inherits the surface it sits on. */
.es-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--es-ink);
  --btn-edge: rgba(16, 26, 41, 0.26);
}

.es-btn--secondary:hover {
  --btn-bg: var(--es-ink);
  --btn-fg: var(--es-ivory);
  --btn-edge: var(--es-ink);
}

.es-panel--dark .es-btn--secondary,
.es-hero .es-btn--secondary,
.es-footer .es-btn--secondary,
.es-mobile-nav .es-btn--secondary {
  --btn-fg: var(--es-ivory);
  --btn-edge: var(--es-line-dark-strong);
}

.es-panel--dark .es-btn--secondary:hover,
.es-hero .es-btn--secondary:hover,
.es-footer .es-btn--secondary:hover,
.es-mobile-nav .es-btn--secondary:hover {
  --btn-bg: var(--es-ivory);
  --btn-fg: var(--es-ink);
  --btn-edge: var(--es-ivory);
}

/* WhatsApp — brand green with dark green text, 8:1, plus a darker edge so
   the control keeps a visible boundary on white. */
.es-btn--whatsapp {
  --btn-bg: var(--es-wa);
  --btn-fg: var(--es-wa-ink);
  --btn-edge: var(--es-wa-edge);
}

.es-btn--whatsapp:hover {
  --btn-bg: #34e07a;
  --btn-edge: var(--es-wa-edge);
}

.es-btn--whatsapp .es-btn__icon { width: 21px; height: 21px; }

/* Ghost — inline text action with an arrow. */
.es-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--es-amber-text);
  --btn-edge: transparent;
  min-height: 44px;
  padding: 0.5rem 0;
  border-radius: 6px;
}

.es-btn--ghost:hover {
  --btn-fg: var(--es-ink);
  box-shadow: none;
  transform: none;
}

.es-btn--ghost:hover .es-btn__icon--end { transform: translateX(4px); }

.es-panel--dark .es-btn--ghost { --btn-fg: var(--es-amber); }
.es-panel--dark .es-btn--ghost:hover { --btn-fg: var(--es-amber-soft); }

.es-btn--block { width: 100%; }
.es-btn--sm { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9rem; }

.es-icon { width: 24px; height: 24px; }
.es-icon--flip { transform: rotate(180deg); }

/* 06 Header and navigation =============================================== */

.es-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--es-line);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  transition: box-shadow 0.2s ease;
}

.es-header.is-stuck { box-shadow: 0 8px 28px -20px rgba(16, 26, 41, 0.5); }

.es-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 74px;
  padding-block: 0.65rem;
}

.es-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-right: auto;
  text-decoration: none;
  color: var(--es-ink);
}

.es-brand img,
.es-brand svg { display: block; width: auto; height: 38px; }

.es-brand__fallback {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Desktop navigation */
.es-nav { display: none; }

.es-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1.1vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-nav__list li { margin: 0; }

.es-nav__list a {
  position: relative;
  display: block;
  padding: 0.55rem 0.35rem;
  color: var(--es-body-strong);
  font-size: 0.925rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.es-nav__list a::after {
  content: "";
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--es-amber);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.es-nav__list a:hover { color: var(--es-ink); }
.es-nav__list a:hover::after { transform: scaleX(1); }

.es-nav__list .current-menu-item > a,
.es-nav__list .current_page_item > a,
.es-nav__list .current-menu-ancestor > a { color: var(--es-ink); }

.es-nav__list .current-menu-item > a::after,
.es-nav__list .current_page_item > a::after,
.es-nav__list .current-menu-ancestor > a::after { transform: scaleX(1); }

/* Sub-menus */
.es-nav__list .sub-menu {
  position: absolute;
  z-index: 10;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-sm);
  box-shadow: var(--es-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.es-nav__list li { position: relative; }

.es-nav__list li:hover > .sub-menu,
.es-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.es-nav__list .sub-menu a { padding: 0.5rem 0.7rem; border-radius: 8px; white-space: normal; }
.es-nav__list .sub-menu a::after { display: none; }
.es-nav__list .sub-menu a:hover { background: var(--es-paper-warm); }

.es-header__cta { display: none; flex: none; }

/* Mobile toggle */
.es-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--es-line-strong);
  border-radius: var(--es-radius-sm);
  color: var(--es-ink);
  cursor: pointer;
}

.es-burger__bars { display: block; width: 20px; height: 14px; position: relative; }

.es-burger__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease, top 0.22s ease;
}

.es-burger__bars span:nth-child(1) { top: 0; }
.es-burger__bars span:nth-child(2) { top: 6px; }
.es-burger__bars span:nth-child(3) { top: 12px; }

.es-burger[aria-expanded="true"] .es-burger__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.es-burger[aria-expanded="true"] .es-burger__bars span:nth-child(2) { opacity: 0; }
.es-burger[aria-expanded="true"] .es-burger__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Mobile panel */
.es-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--es-ink);
  color: var(--es-ivory);
  padding: 1rem var(--es-gutter) calc(2rem + env(safe-area-inset-bottom));
  padding-top: calc(1rem + env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.es-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.es-mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
  margin-bottom: 1.5rem;
}

.es-mobile-nav__top .es-brand { color: var(--es-ivory); }

.es-mobile-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1.5px solid var(--es-line-dark-strong);
  border-radius: var(--es-radius-sm);
  color: var(--es-ivory);
  cursor: pointer;
}

.es-mobile-nav__list {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--es-line-dark);
}

.es-mobile-nav__list li { margin: 0; }

.es-mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid var(--es-line-dark);
  color: var(--es-ivory);
  font-size: 1.06rem;
  font-weight: 600;
  text-decoration: none;
}

.es-mobile-nav__list a:hover { color: var(--es-amber); }

.es-mobile-nav__list .current-menu-item > a,
.es-mobile-nav__list .current_page_item > a { color: var(--es-amber); }

.es-mobile-nav__list .sub-menu {
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: none;
}

.es-mobile-nav__list .sub-menu a { font-size: 0.97rem; font-weight: 500; min-height: 48px; }

.es-mobile-nav__actions { display: grid; gap: 0.7rem; margin-top: auto; }

.es-mobile-nav__contact {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--es-line-dark);
  color: var(--es-muted);
  font-size: 0.9rem;
}

.es-mobile-nav__contact a { color: var(--es-ivory); font-weight: 700; text-decoration: none; }

body.es-menu-open { overflow: hidden; }

@media (min-width: 1024px) {
  .es-nav { display: block; }
  .es-header__cta { display: inline-flex; }
  .es-burger { display: none; }

  /* Seven nav items, a wordmark and a labelled button do not fit on a
     1024px line. Between 1024 and 1280 the navigation tightens and the
     WhatsApp control becomes icon-only; its accessible name comes from
     aria-label, so nothing is lost when the text is hidden. */
  .es-nav__list { gap: 0.22rem; }
  .es-nav__list a { font-size: 0.855rem; padding-inline: 0.3rem; }
  .es-nav__list a::after { left: 0.3rem; right: 0.3rem; }

  .es-header__cta .es-btn {
    width: 46px;
    padding-inline: 0;
  }

  .es-header__cta .es-btn > span:not(.screen-reader-text) { display: none; }
}

@media (min-width: 1280px) {
  .es-nav__list { gap: clamp(0.35rem, 1.1vw, 1rem); }
  .es-nav__list a { font-size: 0.925rem; padding-inline: 0.35rem; }
  .es-nav__list a::after { left: 0.35rem; right: 0.35rem; }

  .es-header__cta .es-btn {
    width: auto;
    padding-inline: 1.1rem;
  }

  .es-header__cta .es-btn > span:not(.screen-reader-text) { display: inline; }
}

/* 07 Hero ================================================================ */

.es-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--es-ink);
  color: var(--es-muted);
  overflow: hidden;
}

/* Phones read the copy first and the portrait photograph second. The markup
   leads with the image so the desktop overlay can stack without reordering
   the accessibility tree; on mobile the order is flipped visually only, and
   the heading still precedes the image for a screen reader. */
.es-hero__body { order: 1; }
.es-hero__media { order: 2; }

/* Mobile: copy above a portrait photograph, which is what the art direction
   of the separate mobile composition expects. */
.es-hero__content {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 7vw, 3.75rem) clamp(1.75rem, 5vw, 2.5rem);
  max-width: 34rem;
}

.es-hero__title {
  margin-bottom: 0.55em;
  color: var(--es-ivory);
}

.es-hero__title em {
  font-style: normal;
  color: var(--es-amber);
}

.es-hero__text {
  margin-bottom: 0;
  color: var(--es-muted);
  font-size: clamp(1.03rem, 0.97rem + 0.35vw, 1.18rem);
  max-width: 46ch;
}

.es-hero__media { position: relative; }

.es-hero__media .es-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.es-hero__note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.9rem;
  padding: 0;
  list-style: none;
  color: var(--es-muted);
  font-size: 0.875rem;
}

.es-hero__note li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.es-hero__note .es-icon {
  width: 17px;
  height: 17px;
  color: var(--es-amber);
}

@media (min-width: 900px) {
  /* Desktop: the copy sits on solid midnight in the left 42% and the
     photograph fills the right, fading into the panel across a soft gradient.
     Overlaying the headline on the television itself was unreadable, and
     narrowing it enough to clear the screen left no room for a headline. */
  .es-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(33rem, 62vh, 43rem);
  }

  .es-hero__media {
    position: absolute;
    inset: 0 0 0 34%;
    order: 0;
  }

  .es-hero__media .es-picture,
  .es-hero__media .es-picture img {
    width: 100%;
    height: 100%;
  }

  .es-hero__media .es-picture img {
    object-fit: cover;
    object-position: 62% center;
  }

  .es-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to right, var(--es-ink) 0%, rgba(16, 26, 41, 0.97) 20%, rgba(16, 26, 41, 0.74) 31%, rgba(16, 26, 41, 0.28) 45%, rgba(16, 26, 41, 0.04) 57%, transparent 66%),
      linear-gradient(to top, rgba(9, 17, 29, 0.45), transparent 38%);
  }

  .es-hero__body {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .es-hero__content {
    padding-block: clamp(3rem, 6vw, 4.75rem);
    max-width: 26rem;
  }

  .es-hero__title { font-size: clamp(2.1rem, 1.1rem + 2.2vw, 3.05rem); }
}

@media (min-width: 1280px) {
  .es-hero__media { inset: 0 0 0 30%; }
  .es-hero__content { max-width: 34rem; }
}

@media (min-width: 1600px) {
  .es-hero__media { inset: 0 0 0 27%; }
  .es-hero__content { max-width: 37rem; }
}

/* Inner-page hero */
.es-page-hero {
  position: relative;
  background: var(--es-ink);
  color: var(--es-muted);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.75rem, 6vw, 4.5rem);
  overflow: hidden;
}

.es-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90rem 34rem at 82% -10%, rgba(242, 184, 90, 0.16), transparent 62%),
    radial-gradient(60rem 28rem at 8% 108%, rgba(31, 47, 69, 0.85), transparent 60%);
  pointer-events: none;
}

.es-page-hero__inner { position: relative; z-index: 1; max-width: 56rem; }

.es-page-hero__title { color: var(--es-ivory); margin-bottom: 0.45em; }

.es-page-hero__text {
  margin-bottom: 0;
  color: var(--es-muted);
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.16rem);
  max-width: 62ch;
}

/* Breadcrumbs */
.es-breadcrumbs { margin-bottom: 1.4rem; font-size: 0.83rem; }

.es-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }

.es-breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--es-line-dark-strong);
}

.es-page-hero .es-breadcrumbs a { color: var(--es-muted); text-decoration: none; }
.es-page-hero .es-breadcrumbs a:hover { color: var(--es-amber); text-decoration: underline; }
.es-page-hero .es-breadcrumbs [aria-current] { color: var(--es-ivory); }

/* 08 Sections and cards ================================================== */

.es-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.es-panel--warm .es-card { background: var(--es-paper); }

.es-card__title { margin-bottom: 0.5rem; }
.es-card__text { margin-bottom: 0; font-size: 0.975rem; }

.es-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.15rem;
  background: var(--es-amber-wash);
  border-radius: 14px;
  color: var(--es-amber-ink);
}

.es-card__icon .es-icon { width: 24px; height: 24px; }

.es-card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--es-shadow);
  border-color: var(--es-line-strong);
}

.es-card__foot { margin-top: auto; padding-top: 1.25rem; }

.es-card__note {
  margin: 0.85rem 0 0;
  color: var(--es-body);
  font-size: 0.86rem;
  opacity: 0.85;
}

/* Dark card variant, used inside cinematic panels */
.es-panel--dark .es-card {
  background: var(--es-surface-dark);
  border-color: var(--es-line-dark);
  color: var(--es-muted);
}

.es-panel--dark .es-card__icon {
  background: rgba(242, 184, 90, 0.14);
  color: var(--es-amber);
}

.es-panel--dark .es-card--link:hover {
  border-color: var(--es-line-dark-strong);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.9);
}

/* Category tiles — cinematic, image-backed where artwork exists */
.es-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 15rem;
  padding: 1.5rem;
  background: var(--es-surface-dark);
  border: 1px solid var(--es-line-dark);
  border-radius: var(--es-radius);
  overflow: hidden;
  isolation: isolate;
}

.es-tile--feature { min-height: 20rem; }

.es-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.es-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.es-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(9, 17, 29, 0.95) 12%, rgba(9, 17, 29, 0.62) 46%, rgba(9, 17, 29, 0.24) 100%);
}

.es-tile:hover .es-tile__media img { transform: scale(1.045); }

.es-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
  background: rgba(242, 184, 90, 0.16);
  border: 1px solid rgba(242, 184, 90, 0.3);
  border-radius: 12px;
  color: var(--es-amber);
}

.es-tile__icon .es-icon { width: 21px; height: 21px; }

.es-tile__title { margin-bottom: 0.4rem; color: var(--es-ivory); font-size: 1.16rem; }
.es-tile__text { margin: 0; color: var(--es-muted); font-size: 0.92rem; }

/* Numbered steps */
.es-steps {
  counter-reset: es-step;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Five steps: auto-fit leaves a single card stranded on its own row at most
   desktop widths, so the column count is set explicitly instead. */
@media (min-width: 560px) { .es-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .es-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .es-steps { grid-template-columns: repeat(5, 1fr); } }

.es-steps li {
  counter-increment: es-step;
  position: relative;
  margin: 0;
  padding: 1.6rem 1.35rem 1.45rem;
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius);
}

.es-steps li::before {
  content: counter(es-step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.85rem;
  color: var(--es-amber-text);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.es-steps__title { margin-bottom: 0.4rem; font-size: 1.05rem; }
.es-steps__text { margin: 0; font-size: 0.945rem; }

/* Checklist */
.es-check {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.es-check li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.97rem;
}

.es-check .es-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.18rem;
  color: var(--es-amber-ink);
}

.es-panel--dark .es-check .es-icon { color: var(--es-amber); }

/* Contact rows */
.es-contact-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius);
}

.es-contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--es-amber-wash);
  color: var(--es-amber-ink);
}

.es-contact-card--whatsapp .es-contact-card__icon {
  background: rgba(37, 211, 102, 0.16);
  color: var(--es-wa-edge);
}

.es-contact-card__title { margin-bottom: 0.3rem; font-size: 1.05rem; }
.es-contact-card__text { margin-bottom: 0.7rem; font-size: 0.93rem; }

.es-contact-card__value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--es-ink);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.es-contact-card__value:hover { text-decoration: underline; }

/* Notice block — used for honest caveats, never for marketing */
.es-notice {
  padding: 1.1rem 1.25rem;
  background: var(--es-paper-warm);
  border: 1px solid var(--es-line);
  border-left: 3px solid var(--es-amber-ink);
  border-radius: var(--es-radius-sm);
  font-size: 0.93rem;
}

.es-panel--dark .es-notice {
  background: rgba(244, 240, 231, 0.05);
  border-color: var(--es-line-dark);
  border-left-color: var(--es-amber);
  color: var(--es-muted);
}

.es-notice--success {
  border-left-color: #0a7c3f;
  background: #eef8f1;
}

.es-notice--error {
  border-left-color: #b32d2e;
  background: #fdeeee;
}

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

.es-plans {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}

.es-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-lg);
  box-shadow: var(--es-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.es-plan:hover { transform: translateY(-3px); box-shadow: var(--es-shadow); }

/* The highlighted plan is the one with the lowest monthly equivalent, which
   is calculated from the prices rather than asserted. */
.es-plan--featured {
  background: var(--es-ink);
  border-color: var(--es-ink);
  color: var(--es-muted);
  box-shadow: var(--es-shadow-lg);
}

.es-plan--featured .es-plan__name,
.es-plan--featured .es-plan__price { color: var(--es-ivory); }

.es-plan__flag {
  position: absolute;
  top: -0.85rem;
  left: clamp(1.6rem, 2.6vw, 2.1rem);
  padding: 0.32rem 0.8rem;
  background: var(--es-amber);
  color: var(--es-ink);
  border-radius: var(--es-pill);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.es-plan__name {
  margin-bottom: 0.15rem;
  font-size: 1.28rem;
}

.es-plan__duration {
  margin-bottom: 1.25rem;
  color: var(--es-amber-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.es-plan--featured .es-plan__duration { color: var(--es-amber); }

.es-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  color: var(--es-ink);
  font-size: clamp(2.4rem, 2rem + 1.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.es-plan__currency {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--es-body);
  text-transform: uppercase;
}

.es-plan--featured .es-plan__currency { color: var(--es-muted); }

.es-plan__rate {
  margin-bottom: 1.35rem;
  font-size: 0.87rem;
  color: var(--es-body);
}

.es-plan--featured .es-plan__rate { color: var(--es-muted); }

.es-plan__summary {
  margin-bottom: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--es-line);
  font-size: 0.93rem;
}

.es-plan--featured .es-plan__summary { border-bottom-color: var(--es-line-dark); }

.es-plan__features {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.es-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.93rem;
}

.es-plan__features .es-icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.22rem;
  color: var(--es-amber-ink);
}

.es-plan--featured .es-plan__features .es-icon { color: var(--es-amber); }

.es-plan__cta { margin-top: auto; }

.es-plan__cta .es-btn { width: 100%; }

.es-plan--featured .es-btn--primary {
  --btn-bg: var(--es-amber);
  --btn-fg: var(--es-ink);
  --btn-edge: var(--es-amber);
}

.es-plan--featured .es-btn--primary:hover {
  --btn-bg: var(--es-amber-soft);
  --btn-edge: var(--es-amber-soft);
}

.es-plans-note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 64ch;
  font-size: 0.91rem;
}

/* Compact plan comparison table */
.es-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius);
  background: var(--es-paper);
}

.es-table-wrap table { margin: 0; min-width: 34rem; }
.es-table-wrap th, .es-table-wrap td { padding: 0.85rem 1.1rem; white-space: nowrap; }
.es-table-wrap tbody tr:last-child td { border-bottom: 0; }
.es-table-wrap td:first-child { font-weight: 700; color: var(--es-ink); }

/* 10 FAQ ================================================================= */

.es-faq { display: grid; gap: 0.7rem; }

.es-faq__item {
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-sm);
  overflow: hidden;
}

.es-faq__item[open] { border-color: var(--es-line-strong); box-shadow: var(--es-shadow-sm); }

.es-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 1.25rem;
  color: var(--es-ink);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.es-faq__q::-webkit-details-marker { display: none; }

.es-faq__q:hover { background: var(--es-paper-warm); }

.es-faq__sign {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.es-faq__sign::before,
.es-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--es-amber-ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.es-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.es-faq__item[open] .es-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.es-faq__a {
  padding: 0 1.25rem 1.3rem;
  font-size: 0.975rem;
}

.es-faq__a p:last-child { margin-bottom: 0; }

.es-faq__group { margin-bottom: clamp(2rem, 4vw, 3rem); }
.es-faq__group:last-child { margin-bottom: 0; }
.es-faq__group-title { margin-bottom: 1.1rem; font-size: 1.2rem; }

.es-panel--dark .es-faq__item { background: var(--es-surface-dark); border-color: var(--es-line-dark); }
.es-panel--dark .es-faq__q { color: var(--es-ivory); }
.es-panel--dark .es-faq__q:hover { background: var(--es-surface-dark-2); }
.es-panel--dark .es-faq__sign::before,
.es-panel--dark .es-faq__sign::after { background: var(--es-amber); }

/* 11 Footer ============================================================== */

.es-footer {
  background: var(--es-ink-deep);
  color: var(--es-muted);
  padding-block: clamp(3rem, 6vw, 4.75rem) 0;
}

.es-footer h2, .es-footer h3 { color: var(--es-ivory); }

.es-footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 640px) { .es-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .es-footer__grid { grid-template-columns: 1.65fr 1fr 1fr 1fr; } }

.es-footer__brand .es-brand { color: var(--es-ivory); margin-bottom: 1.15rem; }
.es-footer__brand .es-brand img { height: 36px; }

.es-footer__about {
  max-width: 38ch;
  font-size: 0.93rem;
  margin-bottom: 1.35rem;
}

.es-footer__title {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--es-ivory);
}

.es-footer__list { margin: 0; padding: 0; list-style: none; }
.es-footer__list li { margin: 0 0 0.1rem; }

.es-footer__list a {
  display: inline-block;
  padding: 0.38rem 0;
  color: var(--es-muted);
  font-size: 0.93rem;
  text-decoration: none;
}

.es-footer__list a:hover { color: var(--es-amber); text-decoration: underline; }

.es-footer__contact { display: grid; gap: 0.7rem; margin-top: 0.25rem; }

.es-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--es-ivory);
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
}

.es-footer__contact a:hover { color: var(--es-amber); }
.es-footer__contact .es-icon { width: 19px; height: 19px; color: var(--es-amber); }

.es-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--es-line-dark);
  font-size: 0.85rem;
}

.es-footer__bottom p { margin: 0; }

.es-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-footer__legal li { margin: 0; }
.es-footer__legal a { color: var(--es-muted); text-decoration: none; }
.es-footer__legal a:hover { color: var(--es-amber); text-decoration: underline; }

/* 12 Floating contact ==================================================== */

.es-float {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  min-width: 56px;
  padding: 0 1.1rem;
  background: var(--es-wa);
  color: var(--es-wa-ink);
  border-radius: var(--es-pill);
  box-shadow: 0 0 0 1.5px var(--es-wa-edge), 0 14px 34px -12px rgba(9, 17, 29, 0.55);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.es-float:hover {
  background: #34e07a;
  color: var(--es-wa-ink);
  transform: translateY(-2px);
}

.es-float .es-icon { width: 26px; height: 26px; }

.es-float__label { display: none; }

@media (min-width: 768px) {
  .es-float__label { display: inline; }
}

/* Never let the floating control sit over the mobile menu. */
body.es-menu-open .es-float { display: none; }

/* Or over the plan cards, whose own buttons start the same conversation. */
.es-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

/* 13 Blog, comments and forms ============================================ */

.es-posts {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.es-post-card {
  display: flex;
  flex-direction: column;
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.es-post-card:hover { transform: translateY(-3px); box-shadow: var(--es-shadow); }

.es-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--es-paper-warm); }
.es-post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.es-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }

.es-post-card__title { margin-bottom: 0.5rem; font-size: 1.13rem; }
.es-post-card__title a { color: var(--es-ink); text-decoration: none; }
.es-post-card__title a:hover { color: var(--es-amber-text); }

.es-post-card__excerpt { font-size: 0.94rem; margin-bottom: 1.1rem; }
.es-post-card__foot { margin-top: auto; }

.es-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  color: var(--es-body);
  font-size: 0.82rem;
}

.es-page-hero .es-post-meta { color: var(--es-muted); }

.es-prose { max-width: var(--es-container-narrow); }
.es-prose > * { margin-inline: auto; }

.es-prose h2 { margin-top: 2.4em; }
.es-prose h3 { margin-top: 1.9em; }
.es-prose h2:first-child, .es-prose h3:first-child { margin-top: 0; }

.es-prose img,
.es-prose figure { border-radius: var(--es-radius-sm); }
.es-prose figure { margin: 2rem 0; }
.es-prose figcaption { margin-top: 0.6rem; font-size: 0.86rem; color: var(--es-body); }

.es-prose .alignwide { max-width: min(100%, var(--es-container)); }
.es-prose .alignfull { max-width: 100%; }

.es-with-sidebar { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 1024px) {
  .es-with-sidebar { grid-template-columns: minmax(0, 1fr) 19rem; }
}

.es-widget {
  padding: 1.4rem;
  background: var(--es-paper-warm);
  border-radius: var(--es-radius);
  margin-bottom: 1.25rem;
}

.es-widget__title { margin-bottom: 0.85rem; font-size: 1.02rem; }
.es-widget ul { margin: 0; padding: 0; list-style: none; }
.es-widget li { margin-bottom: 0.4rem; }

/* Pagination */
.es-pagination { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.es-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-pagination li { margin: 0; }

.es-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.85rem;
  justify-content: center;
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: var(--es-radius-sm);
  color: var(--es-body-strong);
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
}

.es-pagination .page-numbers:hover { border-color: var(--es-ink); color: var(--es-ink); }

.es-pagination .page-numbers.current {
  background: var(--es-ink);
  border-color: var(--es-ink);
  color: var(--es-ivory);
}

.es-pagination .es-icon { width: 17px; height: 17px; }

/* Forms */
.es-form { display: grid; gap: 1.1rem; }

.es-field { display: grid; gap: 0.4rem; }

.es-field label {
  color: var(--es-ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.es-field__hint { font-size: 0.84rem; color: var(--es-body); }

.es-field input[type="text"],
.es-field input[type="email"],
.es-field input[type="tel"],
.es-field input[type="search"],
.es-field input[type="url"],
.es-field textarea,
.es-field select {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.95rem;
  background: var(--es-paper);
  border: 1.5px solid var(--es-line-strong);
  border-radius: var(--es-radius-sm);
  color: var(--es-ink);
}

.es-field textarea { min-height: 9.5rem; resize: vertical; }

.es-field input:hover,
.es-field textarea:hover { border-color: var(--es-body); }

.es-field input[aria-invalid="true"],
.es-field textarea[aria-invalid="true"] { border-color: #b32d2e; }

.es-field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Search form */
.es-searchform { display: flex; gap: 0.5rem; }

.es-searchform__field { position: relative; flex: 1; }

.es-searchform input[type="search"] {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.95rem 0.7rem 2.65rem;
  background: var(--es-paper);
  border: 1.5px solid var(--es-line-strong);
  border-radius: var(--es-pill);
  color: var(--es-ink);
}

.es-searchform .es-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--es-body);
  pointer-events: none;
}

/* Comments */
.es-comments { margin-top: clamp(3rem, 6vw, 4.5rem); }
.es-comments__title { margin-bottom: 1.5rem; }

.es-comments .comment-list { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.es-comments .comment-list ol.children { margin: 1.25rem 0 0 0; padding-left: clamp(1rem, 3vw, 2rem); list-style: none; }

.es-comments .comment-body {
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  background: var(--es-paper-warm);
  border-radius: var(--es-radius-sm);
}

.es-comments .comment-meta { margin-bottom: 0.6rem; font-size: 0.85rem; }
.es-comments .comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 0.55rem; }
.es-comments .reply { font-size: 0.87rem; font-weight: 700; }

.es-comments .comment-form { display: grid; gap: 1rem; }
.es-comments .comment-form p { margin: 0; display: grid; gap: 0.4rem; }
.es-comments .comment-form label { font-size: 0.9rem; font-weight: 700; color: var(--es-ink); }

.es-comments .comment-form input[type="text"],
.es-comments .comment-form input[type="email"],
.es-comments .comment-form input[type="url"],
.es-comments .comment-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.95rem;
  border: 1.5px solid var(--es-line-strong);
  border-radius: var(--es-radius-sm);
  background: var(--es-paper);
}

.es-comments .comment-form textarea { min-height: 8rem; resize: vertical; }

.es-comments .form-submit input[type="submit"],
.es-comments .form-submit button {
  min-height: 50px;
  padding: 0.8rem 1.55rem;
  background: var(--es-ink);
  color: var(--es-ivory);
  border: 1.5px solid var(--es-ink);
  border-radius: var(--es-pill);
  font-weight: 700;
  cursor: pointer;
}

/* 404 and search results */
.es-empty { max-width: 44rem; }
.es-empty__links { display: grid; gap: 0.55rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.es-empty__links a { font-weight: 700; }

/* 14 Utilities, motion and print ========================================= */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
}

.es-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }

.es-text-center { text-align: center; }
.es-mt-0 { margin-top: 0; }
.es-mb-0 { margin-bottom: 0; }

/* Respect a reduced-motion preference: keep state changes, drop movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .es-btn:hover,
  .es-card--link:hover,
  .es-plan:hover,
  .es-post-card:hover,
  .es-float:hover { transform: none; }

  .es-tile:hover .es-tile__media img { transform: none; }
}

/* Older engines without backdrop-filter get a solid header instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .es-header { background: var(--es-paper); }
}

@media print {
  .es-header,
  .es-mobile-nav,
  .es-float,
  .es-footer__grid,
  .es-pagination,
  .es-comments { display: none !important; }

  body { color: #000; background: #fff; }
  .es-panel--dark, .es-page-hero, .es-hero { background: #fff !important; color: #000 !important; }
  .es-panel--dark h1, .es-panel--dark h2, .es-panel--dark h3 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}