/* ============================================================
   SITE FOOTER — nested variant
   ============================================================
   Ported from the `.es-footer--nested` layout in the HTML kit
   (enstacked_HTML/footer-variants.html, variant E) onto the
   theme's own tokens. Panels inside panels: the dark call to
   action card, then the footer itself as a raised card on the
   page ground, then the wordmark on the floor under both.

   ── Why this is its own file and not utilities.css ──────────
   The footer is global. Every one of the ~200 legacy pages
   renders it, so its rules cannot live in a per-template
   stylesheet, and utilities.css is for reusable primitives
   rather than for one component. `assets/css/footer.css` is
   NOT this file: that one has never been enqueued and its
   rules were superseded years ago by the block at style.css
   line 2737. It is left alone here rather than revived,
   because reviving a dead stylesheet site-wide is a bigger
   change than the one that was asked for.

   ── What it has to beat ─────────────────────────────────────
   style.css:2737 and responsive.css:1359 / :3282 style the
   BARE `footer` element: `display: inline-block`, a fixed
   80px/40px top padding and an #F8F5EE ground. Those still
   load on every page. A class beats an element selector
   regardless of source order, so `.es-footer` wins each of
   them, but only for the properties it actually restates.
   Every one of those three is therefore restated below on
   purpose, not by accident: display, background and both
   paddings. Do not "tidy" them away.

   ── Tokens only ─────────────────────────────────────────────
   No hex anywhere in this file, which is what lets the footer
   follow a dark block the day design-tokens.css grows one.
   The only indirection worth naming is `--footer-accent`: the
   ink a footer link takes on hover. `--brand-500` is not
   usable for it (3.47:1 on white at 15px, which fails AA), so
   it points at `--brand-700`, the same ink `.es-eyebrow`
   already uses on its chip and measured there at 6.09:1.
   ============================================================ */

.es-footer {
  --footer-accent: var(--brand-700);
  --footer-gap: var(--gap-fluid-lg);

  /* Beats `footer { display: inline-block }` at style.css:2737.
     inline-block on the page's last block element gives it a
     text baseline, which is where the stray few pixels under
     the old footer came from. */
  display: block;
  position: relative;
  color: var(--text-body);
  font-size: var(--fs-body-sm);
}

/* ── The dark call to action card ───────────────────────────
   `.es-bg-dark` (utilities.css) decides the ground; this only
   states the shape and the ink on it. */

.es-footer__promo {
  position: relative;
  overflow: hidden;
  padding: var(--gap-fluid-xl) var(--gap-fluid-md);
  border-radius: var(--radius-2xl);
  text-align: center;
}

/* The glow, as an overlay rather than a background on the
   panel itself, so `.es-bg-dark` keeps deciding the ground and
   this only adds light on top of it. Mixed from `--brand-500`
   so there is no second copy of the brand colour in the file. */
.es-footer__promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 130% at 50% -30%,
              color-mix(in srgb, var(--brand-500) 42%, transparent) 0%,
              transparent 62%);
  pointer-events: none;
}

.es-footer__promo > * { position: relative; }

/* The eyebrow is the site-wide chip. utilities.css already
   repaints it for `.es-bg-dark`, so nothing is redefined here
   beyond centring the shrink-wrapped box. */
.es-footer__promo .es-eyebrow { margin-inline: auto; }

.es-footer__promo h2 {
  max-width: 28ch;
  margin: 0 auto;
  color: var(--text-inverse);
  font-size: var(--fs-title-md);
  font-weight: var(--font-extrabold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* The kit's variant carries a lede paragraph between the heading and the
   button. There is no field behind one here: the CTA block is four SCF fields
   (tagline, heading, button text, button link) and adding a fifth would be
   inventing copy for 689 pages. So there is no `.es-footer__promo-lede` rule,
   on purpose, rather than a rule nothing ever matches. */
.es-footer__promo-cta { margin: var(--gap-fluid-md) 0 0; }

/* ── The footer card ────────────────────────────────────────
   The one place in the theme's footer that draws a surface
   rather than a hairline, because the layering is what carries
   the hierarchy in this variant.

   ── Glass ──────────────────────────────────────────────────
   The card is frosted rather than solid. This only means
   anything because of the wordmark: `backdrop-filter` blurs
   what is painted behind an element, and behind most of this
   card is one flat token colour, which blurs to itself. What
   makes the effect readable is the orange wordmark tucked up
   under the card's bottom edge further down this file. The two
   are one change, not two, so do not remove either on its own.

   The opaque `background` below is the fallback and it comes
   FIRST: a browser without backdrop-filter keeps the solid
   surface the card had before, rather than a see-through card
   with the wordmark legible straight through the copy. Only
   inside the @supports does it become translucent. */

.es-footer__card {
  padding: var(--gap-fluid-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (color: color-mix(in srgb, red 50%, transparent)) {
  .es-footer__card {
    /* 76%, and the number is a contrast floor rather than a taste
       call. The strongest thing that ever sits behind this card is
       the top of the wordmark at `--wordmark-a`, which composites
       to #F3BEA6 on the page ground. The darkest ink over it is
       `--text-muted`, which style.css:12141 resolves site-wide to
       #595959, and it lands there because the bottom bar is the part
       of the card the wordmark actually reaches. Measured through
       that stack: #595959 on #FCEFEA, 6.25:1. At 64% it is 5.89:1
       and at a 30% wordmark it is 6.39:1, so there is room in both
       directions, but check the number before moving either. */
    background: color-mix(in srgb, var(--bg-surface) 76%, transparent);

    /* Saturate as well as blur. A blur alone over a pale tint
       averages it towards grey and the orange stops reading as
       orange; the lift puts the hue back. */
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);

    /* A frosted pane catches light on its edge. Half a step
       brighter than `--border-subtle`, mixed rather than stated,
       so it still follows the token. */
    border-color: color-mix(in srgb, var(--gray-0) 55%, var(--border-subtle));
    box-shadow: var(--shadow-md);
  }
}

.es-footer__top {
  display: grid;
  gap: var(--footer-gap);
  grid-template-columns: 1fr;
}

/* One hairline, reused by every rule the card draws, so the bands
   cannot drift apart on the divider alone.

   `--footer-gap` on both sides was 96px of clearance between the
   shortest link column and the rule under it, which on the Legal
   column (three links against Useful Links' six) read as the block
   having been abandoned halfway. The rule only has to separate two
   bands, not hold them apart. */
.es-footer__rule {
  margin-top: var(--gap-fluid-sm);
  padding-top: var(--gap-fluid-md);
  border-top: 1px solid var(--border-subtle);
}

/* ── Brand block ─────────────────────────────────────────────
   An inset panel rather than loose content on the card. The kit's
   base note says this footer draws exactly one surface and
   hairlines everywhere else, and this is a deliberate departure
   from it: the nested variant's whole premise is panels inside
   panels, and with the badge row gone the card had nothing left
   to distinguish it from the flat logo-blurb-three-columns
   footer it replaced.

   Translucent rather than solid, so the frost on the card still
   reads through it. A solid `--brand-50` here would have punched
   an opaque rectangle through the glass. */

/* No tinted panel. The identity block sits on the card's own ground and
   is held together by a hairline above the marks instead of by a box,
   which is the layout the owner supplied on 5 Sep 2026.

   Dropping the box also lines the logo, the blurb and the social row up
   with the card's inner edge rather than insetting them by a further
   `--gap-fluid-md`, so the left block and the link columns beside it now
   start on the same optical line. */
.es-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

/* The one rule in this block, standing in for the panel edge that used
   to separate the proof marks from the identity above them. Full width
   of the column so it reads as a divider and not as an underline on the
   marks themselves. */
.es-footer__brand .es-footer__marks {
  align-self: stretch;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--brand-500) 14%, transparent);
}

.es-footer__logo { display: inline-flex; }

.es-footer__logo img {
  display: block;
  width: 200px;
  height: auto;
}

.es-footer__blurb {
  max-width: 46ch;
  margin: 0;
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* ── Group label ────────────────────────────────────────────
   Every group in the card is titled the same way: the 12px
   type floor, uppercase, muted rather than heading ink so the
   links under it are what the eye lands on. */

.es-footer__heading {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.es-footer__panel { margin-top: var(--space-5); }

/* ── Link lists ───────────────────────────────────────────── */

.es-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The hit area is the link, not the row, so a 15px label still
   gives a comfortable target without the row looking padded. */
.es-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 24px;
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

/* Colour and a 2px step. The step is the same gesture the CTA
   buttons make on hover, at a fraction of the distance, so a
   footer link acknowledges the pointer in the site's own motion
   language rather than in a second one invented for the footer.
   `transform` is on the base rule above so it eases both ways. */
.es-footer__list a:hover,
.es-footer__list a:focus-visible {
  color: var(--footer-accent);
  transform: translateX(2px);
}

.es-footer__list svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--brand-500);
}

/* Contact and office rows wrap onto several lines, so the mark
   aligns to the first line rather than to the middle of the
   block.

   `overflow-wrap` here is not cosmetic. An email address is one
   unbreakable word about 175px wide, and at 768px a three
   column grid gives this column roughly 210px with the icon and
   gap taken off. Without it the row is wider than its track and
   pushes the document past the viewport, which is a horizontal
   scrollbar on EVERY page of the site, since this footer is
   global. `anywhere` rather than `break-word`, because only
   `anywhere` also shrinks the min-content size, and it is the
   min-content size a grid item's automatic minimum resolves
   from. */
.es-footer__list--contact a {
  align-items: flex-start;
  overflow-wrap: anywhere;
}

.es-footer__list--contact svg { margin-top: 3px; }

/* ── Offices ────────────────────────────────────────────────
   A heading, an address, and the map link the address always
   was. Not a `.es-footer__list` any more: these moved out of the
   link columns into their own band, where each office gets about
   a third of the card instead of the ~150px a 3-up column
   resolves to at 992px.

   The address is contact data rather than copy, so it is set at
   caption size in muted ink with a reading cap of its own, and
   `overflow-wrap: anywhere` because a long unbroken token in a
   grid track sets that track's min-content width and would push
   the document sideways. */

/* ── The offices band ───────────────────────────────────────
   A two-up band of addresses on the card's own ground, closing
   the link block above the subscribe row.

   ── What was here before, and why none of it is now ────────
   This was a dotted world map: an aspect-ratio canvas, a masked
   plate of the artwork, a beacon on each office's real
   coordinates, a connector to a glass card, a pinned state from
   992px and a hover reveal above that. The map went on the
   owner's instruction (7 Sep 2026), and everything listed there
   went with it, because every one of those pieces existed only
   to place an address over a picture.

   The addresses themselves did not move. They are the site's
   NAP signal and this footer is global, so the same
   `.es-footer__office` markup, the same Google Maps links and
   the same rules below all stand exactly as they were. The map
   was presentation over that markup and presentation is the
   whole of what was removed.

   ── Spacing ────────────────────────────────────────────────
   The band is sized by its content now rather than by a
   ratio, which takes roughly 200-280px of height out of the
   link block on a phone and more than that on a desktop, where
   the canvas was a 2.3 ratio box. Nothing is added back: the
   hairline the band carries and the `--gap-fluid-md` under it
   are the card's own band rhythm, and the two addresses need no
   more room than the link columns above them do.

   Two columns from 576px. Not one of the shared breakpoints,
   because what decides it is the width of an address rather
   than the width of the page: these are capped at 40ch below,
   and below 576 two of them share a line badly. */
.es-footer__offices {
  display: grid;
  gap: var(--gap-fluid-md);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .es-footer__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 8px, not 12. The heading and the address it belongs to are one
   unit; the space between them only has to be smaller than the
   space between the two offices, and at 12 against a 13px address
   it was reading as two separate lines. */
.es-footer__office {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.es-footer__office .es-footer__heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.es-footer__office a {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 40ch;
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  line-height: var(--leading-normal);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.es-footer__office a:hover,
.es-footer__office a:focus-visible { color: var(--footer-accent); }

.es-footer__office svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--brand-500);
}

.es-footer__flag {
  width: 18px;
  height: auto;
  flex-shrink: 0;
}

/* ── Social row ─────────────────────────────────────────────
   Outline circles. The marks stay the theme's existing brand
   coloured SVG files rather than being redrawn inline: four
   inline social glyphs is about 9KB added to every page on the
   site, and this footer is global. The circle is what carries
   the hover state instead. */

.es-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.es-footer__social a:hover,
.es-footer__social a:focus-visible {
  border-color: var(--footer-accent);
  background-color: var(--accent-subtle);
}

.es-footer__social img { width: 20px; height: 20px; }

/* The subscribe row closes the link block. Only a top margin: the
   hairline above the offices is the last divider the card needs and
   a second one 40px under it would read as a stutter. */
.es-footer__subscribe { margin-top: var(--gap-fluid-md); }

/* ── Newsletter ─────────────────────────────────────────────
   A link, not a form. The subscription runs through the
   LinkedIn newsletter and there is no mailing list behind an
   email field, so a field here would be a control that cannot
   do anything. */

.es-footer__news {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.es-footer__news svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brand-500);
}

.es-footer__news:hover,
.es-footer__news:focus-visible {
  border-color: var(--footer-accent);
  color: var(--footer-accent);
}

/* ── The marks ──────────────────────────────────────────────
   Two, on the owner's instruction: the Shopify Partners lockup
   and the Clutch rating. Six shields, two review wordmarks and
   the two bottom-bar seals came out with the same change.

   They live on the FLOOR OF THE BRAND PANEL, not in a band of
   their own. `margin-top: auto` inside the panel's flex column
   pushes them to its bottom edge, and because the panel is a grid
   item that stretches to the row height, that bottom edge is the
   same line the link block beside it finishes on. That is what
   removes the dead space: nothing is left trailing.

   No box around them. The card is already a surface and the brand
   block is already a panel inside it; a third bordered rectangle
   inside those two was one nesting level past the point where the
   layering reads as hierarchy. A hairline does the same job.

   ── The two heights are not the same number ─────────────────
   The Shopify file is a 6:1 wordmark and the Clutch file is a 1:1
   badge with the rating and the stars packed inside its own
   padding, so matching them on height makes the wordmark twice the
   optical weight and leaves the badge unreadable. At 42px the
   Clutch mark measured about 34px of actual glyph, which is why it
   was illegible; 56px is the size at which the score and the stars
   resolve. They are matched by eye, which is what a logo row
   always needs. */

.es-footer__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--gap-fluid-sm);

  /* Directly under the social row, not pinned to the panel's floor.
     It WAS pinned with `margin-top: auto`, which lined the panel's
     bottom edge up with the link block's but opened an 85px hole
     between the social icons and the marks. The marks belong with
     the social row: both are the identity block's proof, and they
     read as one group only when they are next to each other.

     What that costs is the flush bottom edge. The panel is still a
     stretching grid item, so the slack now collects under the marks
     instead of above them, inside a tinted box that visibly ends.
     That is the better place for it: empty space inside a defined
     shape reads as air, the same space above the marks read as a
     gap between two things that belong together. Measured at 1440,
     it is about 35px. */
  margin: 0;
  width: 100%;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--brand-500) 14%, transparent);
  list-style: none;
}

.es-footer__mark { display: inline-flex; }

.es-footer__mark + .es-footer__mark {
  padding-left: var(--gap-fluid-sm);
  border-left: 1px solid color-mix(in srgb, var(--brand-500) 14%, transparent);
}

.es-footer__mark a {
  display: inline-flex;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.es-footer__mark a:hover,
.es-footer__mark a:focus-visible { opacity: 0.72; }

.es-footer__mark img {
  display: block;
  width: auto;
  height: 56px;
}

.es-footer__mark--wide img { height: 26px; }

/* Stacked on a phone, and the divider goes with the direction.
   Side by side the pair needs 245px; the brand panel's inner width
   is 237px at 375 and 184px at 320, so below 480 the row was
   wrapping on its own and leaving the vertical hairline stranded at
   the start of the second line. Stacking it deliberately is the
   same layout without the stray rule. */
@media (max-width: 479px) {
  .es-footer__marks {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .es-footer__mark + .es-footer__mark {
    padding-left: 0;
    border-left: 0;
  }
}

/* ── Bottom bar ─────────────────────────────────────────────
   The copyright line and nothing else, on the owner's
   instruction. The DMCA and Copyscape seals are gone and the
   three legal links are a column above, so there is nothing left
   to space apart and the row centres instead of justifying.

   It sits inside the card, so the card's own inset already holds
   it off the edge and it does not need the full outer margin. */

/* Copyright left, positioning line right. Centres and stacks on a phone,
   where two lines side by side would each be about 150px wide. */
.es-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--gap-fluid-sm);
  margin-top: var(--gap-fluid-md);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  text-align: center;
}

.es-footer__bottom p { margin: 0; }

@media (min-width: 768px) {
  .es-footer__bottom { justify-content: space-between; text-align: left; }
}

/* ── "Build · Scale · Grow Together" ────────────────────────
   Set in the same small caps treatment the section eyebrows use, so the
   line reads as a label rather than as another link row.

   The separators are generated, never typed. A literal bullet in the
   markup is announced ("Build bullet Scale bullet Grow Together"); a
   `::before` on all but the first item is decoration and is skipped, so
   the line is read as the three words it actually is. */
.es-footer__tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-body);
  font-size: var(--fs-caption);
  font-weight: var(--font-semibold, 600);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.es-footer__tagline span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.es-footer__tagline span + span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--brand-500);
}

/* ── Mobile accordion ───────────────────────────────────────
   `data-collapsible` is set by assets/js/es-footer.js, and only
   below the breakpoint it was told to collapse at. With no
   script the markup is a plain heading over a plain list, fully
   expanded, which is the correct no-JS footer.

   The panel animates on `grid-template-rows` rather than on
   max-height, so the open height is the content's real height
   and never a guessed ceiling that clips a long list. */

.es-footer__col[data-collapsible] .es-footer__panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows var(--duration-normal) var(--ease-out);
}

.es-footer__col[data-collapsible] .es-footer__panel > * {
  /* Also what lets the 0fr row actually collapse: a grid item's
     automatic minimum size resolves to zero once its overflow is
     not visible. The padding, cancelled by the matching negative
     margin, keeps the focus ring on the last link from being
     clipped by that same overflow. */
  overflow: hidden;
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
}

.es-footer__col[data-collapsible][data-open] .es-footer__panel {
  grid-template-rows: 1fr;
  margin-top: var(--space-4);
}

.es-footer__col[data-collapsible] { border-bottom: 1px solid var(--border-subtle); }
.es-footer__col[data-collapsible]:last-child { border-bottom: 0; }

/* `font: inherit` alone is not enough to make the generated
   button look like the heading it replaced. Chrome's UA sheet
   sets `text-transform: none` and `letter-spacing: normal` on
   form controls, and a UA declaration beats inheritance, so the
   label came out sentence case and untracked while every other
   label in the footer was uppercase and tracked. Both are
   restated as `inherit` rather than as values, so the heading
   stays the one place either is decided. */
.es-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding-block: var(--space-4);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

/* Collapsed, this heading is not a label over a visible list
   any more: it is the control the whole column is reached
   through, and on a phone it is the footer's primary
   navigation. It takes the next size up for that, which is the
   only place the group label leaves the 12px floor. */
.es-footer__col[data-collapsible] .es-footer__heading { font-size: var(--fs-small); }

.es-footer__toggle svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--brand-500);
  transition: transform var(--duration-normal) var(--ease-out);
}

.es-footer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── The wordmark on the floor ──────────────────────────────
   Decoration and nothing else, so it is out of the
   accessibility tree and cannot be selected or dragged.
   `line-height: .78` crops the empty space under the baseline
   so it sits on the floor of the page rather than above it.

   ── The colour ─────────────────────────────────────────────
   A light orange, mixed from `--brand-500` against
   `transparent` rather than stated as `--brand-50`. Two
   reasons. The literal lightest orange in the scale is #FFF3EE,
   which against the #FAFAF8 page ground is a two-point
   difference and effectively invisible; and a solid token
   cannot follow a dark ground, where the same MIX composites to
   a dark rust instead of a pale peach. The mix keeps it a
   brand-relative tint on whatever the footer is painted on. */
.es-footer__wordmark {
  --wordmark-a: color-mix(in srgb, var(--brand-500) 38%, transparent);
  --wordmark-b: color-mix(in srgb, var(--brand-500) 9%, transparent);

  display: block;

  /* Painted BEFORE `.es-container`, which is what puts it in the
     footer card's backdrop and lets the frost above pick it up.
     A z-index rather than a DOM move: it is the last thing in the
     footer for a reason, being the last thing anyone should reach
     if the stylesheet never arrives. */
  position: relative;
  z-index: 0;

  margin-top: var(--gap-fluid-md);
  font-size: clamp(64px, 19vw, 320px);
  font-weight: var(--font-extrabold);
  line-height: 0.78;
  letter-spacing: var(--tracking-tight);
  text-align: center;
  white-space: nowrap;
  user-select: none;

  /* The solid fallback comes first, so an engine without
     background-clip shows the mark rather than nothing. Only
     inside the query does the text become transparent. */
  color: var(--wordmark-a);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .es-footer__wordmark {
    background: linear-gradient(180deg, var(--wordmark-a) 0%, var(--wordmark-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ── The nested variant itself ─────────────────────────────── */

.es-footer--nested {
  /* `overflow: hidden` is what lets the wordmark run to the
     edge of the viewport without adding a horizontal scrollbar:
     at 19vw the glyph is wider than the page on narrow screens
     by design, and this clips it instead of letting the
     document grow. */
  overflow: hidden;

  /* Beats both `footer { padding-top: 80px; padding-bottom: 28px }`
     (style.css:2737) and the two responsive.css overrides. */
  padding-block: var(--space-6) 0;

  /* Beats `footer { background-color: #F8F5EE }`. The card
     above it is the surface; this is the ground it sits on. */
  background: var(--bg-page);
}

/* Everything in the container paints above the wordmark, which is
   what makes the wordmark the card's backdrop rather than
   something sitting on top of it. */
.es-footer--nested .es-container {
  position: relative;
  z-index: 1;
}

/* The card follows the promo panel rather than butting against
   it. Stated on the card so a page with `show_footer_cta` off
   gets the same gap from the top of the footer. */
.es-footer--nested .es-footer__card { margin-top: var(--gap-fluid-md); }

/* ── The wordmark, tucked under the card ────────────────────
   Pulled up so the top of the glyphs runs behind the card's
   bottom edge while the rest stays on the page. Part of the
   mark reads through the frost, part of it reads clean, and the
   two together are what makes the card look like glass rather
   than like a slightly transparent box.

   `-0.3em`, in em rather than px, so the overlap stays the same
   FRACTION of the glyph at every size the clamp produces. The
   box is 0.78em tall, so 0.3em puts a little under 40% of the
   mark behind the card and leaves the rest below it: at 1440px
   that is roughly 82px hidden of 213px, at 375px 21px of 56px.
   A px value would have swallowed the whole mark on a phone. */
.es-footer--nested .es-footer__wordmark { margin-top: -0.3em; }

/* ── How the card's two tracks resolve ──────────────────────
   Every breakpoint here is set by one number: 205px. The contact
   column has to clear it, because `solutions@enstacked.com` is a
   single unbreakable ~175px token with a 17px icon and a 12px gap
   in front of it, and below 205 it wraps mid-word.

     768-991    panel full width, columns 2-up   (~300 each)
     992-1399   panel full width, columns 3-up   (288-316 each)
     1400+      panel 400 beside them, 3-up      (236/193/249)

   The two-track split does not start until 1400, and that is the
   second constraint doing the work rather than a taste call. Three
   columns need the whole card: at 992 a 340px panel leaves the nav
   484px, which is 137px a column. Two-up columns fit there, but
   they make the nav two rows tall, and the panel then stretches to
   match and carries 248px of empty tinted space under its content.
   Measured. Below 1400 the panel is full width and horizontal
   instead, which has no balance to keep. */

@media (min-width: 768px) {
  .es-footer--nested .es-footer__cols {
    display: grid;
    gap: var(--footer-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  /* ── The full-width brand panel reads across, not down ─────
     Stacked, a logo over a 46ch paragraph over two short rows
     leaves most of a 936px panel empty on the right. Split in
     two it is a band: who we are on the left, what backs it on
     the right. Placed explicitly rather than by source order so
     the markup stays a plain list of four blocks. */
  .es-footer--nested .es-footer__brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-5) var(--gap-fluid-lg);
    align-items: start;
  }

  .es-footer--nested .es-footer__logo   { grid-column: 1; grid-row: 1; }
  .es-footer--nested .es-footer__blurb  { grid-column: 1; grid-row: 2; }
  .es-footer--nested .es-footer__social { grid-column: 2; grid-row: 1; justify-self: end; }

  /* In two columns the marks are already set apart by the column
     itself, so the hairline that separates them from the social
     row in the stacked panel would be a second divider doing a job
     nothing is asking for. */
  .es-footer--nested .es-footer__marks {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: auto;
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 992px) {
  .es-footer--nested .es-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  /* A fixed left track rather than a ratio. The brand panel holds a
     logo, a fixed blurb and two fixed-size blocks, so its ideal
     width is a number, not a share of whatever the viewport happens
     to be: 1.1fr of 1198px handed it 419px and starved the columns
     to 209px each. */
  /* 340, not 400. The supplied layout gives the identity block about a
     quarter of the card and the link-and-map side about seventy per cent,
     and 400 was handing the left track a third. The 60px this returns all
     goes to the map, which is what lets both office cards open to the
     RIGHT the way the layout draws them: at 742px the India card had to
     open inward or it finished past the card's edge. */
  .es-footer--nested .es-footer__top {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--gap-fluid-xl);
  }

  /* Back to a column: at 400px wide the panel has no room to run
     two tracks, and everything placed above is reset here rather
     than being scoped to a max-width range, so there is one place
     that says what the narrow panel looks like. */
  .es-footer--nested .es-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .es-footer--nested .es-footer__marks {
    width: 100%;
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--brand-500) 14%, transparent);
  }

  /* Not even thirds. The three columns want different widths and
     always did: "Hire Dedicated Developers" is the longest link in
     this footer, "Confidentiality" the longest legal one, and the
     email needs its 205. Equal thirds sized all three to the middle
     one's needs. */
  .es-footer--nested .es-footer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1.06fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .es-footer__col[data-collapsible] .es-footer__panel,
  .es-footer__toggle svg,
  .es-footer__list a,
  .es-footer__social a,
  .es-footer__mark a,
  .es-footer__office a,
  .es-footer__news { transition: none; }

  .es-footer__list a:hover,
  .es-footer__list a:focus-visible { transform: none; }
}