/* ==========================================================================
   Estudio Digital — components that exist only in the WordPress build
   (inner pages, archives, article layout). The homepage reuses the compiled
   layout stylesheet; everything below is additive.
   ========================================================================== */

.ed-main { display: block; }

/* --------------------------------------------------------------------------
   Header logo

   The compiled stylesheet caps .nav-logo-wrap at 6.5vw and stretches the image
   to 100%/100% — sized for the reference's compact square mark. Our lockup is
   a wide horizontal one (roughly 5.4:1), so that cap squashed it to about 23px
   tall. Size by height instead and let the width follow the aspect ratio.
   -------------------------------------------------------------------------- */

.nav-logo-wrap {
  max-width: none;
  width: auto;
  flex: 0 0 auto;
}

.nav-logo {
  width: auto;
  /* Floor set at 38px so the desktop range never dips below the tablet size —
     2.7vw only overtakes it around 1400px. */
  height: clamp(38px, 2.7vw, 52px);
  max-height: none;
  object-fit: contain;
  display: block;
}

@media screen and (max-width: 991px) {
  .nav-logo { height: 36px; }
}

@media screen and (max-width: 479px) {
  .nav-logo { height: 30px; }
}

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

.ed-kicker {
  font-family: var(--ed-font-body);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-accent);

  /*
   * Half what it was. A kicker is a label for the heading below it, not a line
   * of its own, so it should sit closer to that heading than the heading sits
   * to the paragraph after it.
   *
   * It used to be 1rem and measured about 12px on screen, because the heading
   * was being pulled up into it by the split-line margins (see overrides.css).
   * With that leak fixed the same 1rem measured 21px, which read as three
   * evenly spaced lines rather than a label, a heading and a paragraph.
   */
  margin: 0 0 .5rem;
}

.ed-text-link {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--ed-font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ed-accent);
  padding-bottom: .2em;
  transition: color .25s var(--ed-ease), gap .25s var(--ed-ease);
}
.ed-text-link:hover { color: var(--ed-accent); gap: .95em; }
.ed-text-link svg { width: 1em; height: 1em; }


/* --------------------------------------------------------------------------
   Page hero (inner templates)
   -------------------------------------------------------------------------- */

/* The reference gives an inner-page hero no top padding of its own: the header
   is followed by the section's own rhythm and nothing else. The extra offset
   here was pushing every inner heading roughly 160px further down the page than
   the reference has it. */
.ed-page-hero { padding-top: 0; }

/* The split-text scaffolding gives animated headings a negative bottom margin
   (see overrides.css) so the reveal does not clip descenders. Anything that
   follows one has to win that space back. The `data-skew-up` attribute is
   removed once the animation completes, so these selectors must not depend
   on it. */
.ed-page-hero h1 + *,
.ed-article__head h1 + *,
.ed-case__head h1 + * { margin-top: clamp(1.75rem, 3vw, 3rem); }

.ed-page-hero .ed-kicker + h1 { margin-top: 0; }

.ed-page-hero__media {
  margin-top: clamp(2rem, 4vw, 4rem);
  border-radius: clamp(16px, 2vw, 32px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.ed-page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.ed-post-grid,
.ed-service-grid,
.ed-work-grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ed-work-grid > a { position: relative; }

/* --------------------------------------------------------------------------
   Post card
   -------------------------------------------------------------------------- */

.ed-post-card { position: relative; }
.ed-post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: var(--ed-paper);
  transition: transform .4s var(--ed-ease), box-shadow .4s var(--ed-ease);
}
.ed-post-card__link:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
}
.ed-post-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.ed-post-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ed-ease);
}
.ed-post-card__link:hover .ed-post-card__media img { transform: scale(1.05); }
.ed-post-card__body {
  padding: clamp(1.1rem, 1.8vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}
.ed-post-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--ed-font-body);
  font-size: .8rem;
  color: var(--ed-muted);
}
.ed-post-card__cat {
  color: var(--ed-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ed-post-card__title {
  font-family: var(--ed-font-body);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  margin: 0;
}
.ed-post-card__excerpt {
  font-family: var(--ed-font-body);
  color: var(--ed-muted);
  font-size: .98rem;
  line-height: 1.55;
  margin: 0;
}
.ed-post-card__more {
  margin-top: auto;
  font-family: var(--ed-font-body);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ed-accent);
}

/* --------------------------------------------------------------------------
   Service card
   -------------------------------------------------------------------------- */

.ed-service-card__link {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: 100%;
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  border: 1px solid var(--ed-hairline);
  border-radius: clamp(14px, 1.6vw, 24px);
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: border-color .35s var(--ed-ease), transform .35s var(--ed-ease), box-shadow .35s var(--ed-ease);
}
.ed-service-card__link:hover {
  border-color: transparent;
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(var(--ed-accent-rgb, 217, 32, 192), .16);
}
.ed-service-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--ed-gradient-diag);
  color: #fff;
}
.ed-service-card__icon svg { width: 24px; height: 24px; }
.ed-service-card__title {
  font-family: var(--ed-font-body);
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.15;
  margin: 0;
}
.ed-service-card__excerpt {
  font-family: var(--ed-font-body);
  color: var(--ed-muted);
  line-height: 1.6;
  margin: 0;
}
.ed-service-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.ed-service-card__items li {
  font-family: var(--ed-font-body);
  font-size: .82rem;
  padding: .3em .75em;
  border-radius: 999px;
  background: var(--ed-paper-soft);
  color: var(--ed-muted);
}
.ed-service-card__more {
  margin-top: auto;
  font-family: var(--ed-font-body);
  font-weight: 600;
  font-size: .92rem;
  color: var(--ed-accent);
}

/* --------------------------------------------------------------------------
   Service detail layout
   -------------------------------------------------------------------------- */

.ed-service-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 992px) {
  .ed-service-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, .85fr); }
  .ed-service-layout__aside { position: sticky; top: 7rem; }
}

.ed-service-panel {
  padding: clamp(1.4rem, 2.2vw, 2.2rem);
  border-radius: clamp(14px, 1.6vw, 24px);
  border: 1px solid var(--ed-hairline);
  margin-bottom: 1.25rem;
  font-family: var(--ed-font-body);
}
.ed-service-panel h2 {
  font-family: var(--ed-font-body);
  font-size: 1.25rem;
  margin: 0 0 1rem;
}
.ed-service-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ed-service-panel li { position: relative; padding-left: 1.4em; color: var(--ed-muted); }
.ed-service-panel li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: .5em; height: .5em;
  border-radius: 50%;
  background: var(--ed-gradient);
}
.ed-service-panel--cta { background: var(--ed-ink); border-color: var(--ed-ink); color: #fff; }
.ed-service-panel--cta h2 { color: #fff; }
.ed-service-panel--cta p { color: var(--ed-on-dark-muted); line-height: 1.6; }
.ed-service-panel__button {
  display: inline-block;
  margin: .5rem 0 1rem;
  padding: .85em 1.6em;
  border-radius: 999px;
  background: var(--ed-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s var(--ed-ease);
}
.ed-service-panel__button:hover { background: var(--ed-purple); }
.ed-service-panel--cta .ed-text-link { color: #fff; }

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

/* Same as the inner-page heroes: no top padding of its own, so an article
   opens at the same distance below the header as every other page. */
.ed-article__head { padding-top: 0; }
.ed-article__meta {
  display: flex;
  gap: .6rem;
  align-items: center;
  font-family: var(--ed-font-body);
  font-size: .9rem;
  color: var(--ed-muted);
  margin-top: 1.1rem;
}
.ed-article__media {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-radius: clamp(16px, 2vw, 32px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.ed-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-article__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.ed-article__tags a {
  font-family: var(--ed-font-body);
  font-size: .85rem;
  padding: .35em .9em;
  border-radius: 999px;
  border: 1px solid var(--ed-hairline);
  color: var(--ed-muted);
  text-decoration: none;
}
.ed-article__tags a:hover { border-color: var(--ed-accent); color: var(--ed-accent); }

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */

.ed-case__head { padding-top: 0; }
.ed-case__facts {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: clamp(2rem, 3.5vw, 3.5rem) 0 0;
  font-family: var(--ed-font-body);
}
.ed-case__facts dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ed-muted);
  margin-bottom: .4rem;
}
.ed-case__facts dd { margin: 0; font-size: 1.05rem; font-weight: 500; }
.ed-case__result {
  background: var(--ed-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700 !important;
}
.ed-case__media {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-radius: clamp(16px, 2vw, 32px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.ed-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-case__live { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   About: process + values + stats
   -------------------------------------------------------------------------- */

.ed-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: none;
}
.ed-process__step {
  padding: clamp(1.3rem, 2vw, 2rem);
  border-radius: clamp(14px, 1.6vw, 24px);
  border: 1px solid var(--ed-hairline);
  font-family: var(--ed-font-body);
}
.ed-process__num {
  display: block;
  font-family: var(--ed-font-display);
  font-size: 1.6rem;
  background: var(--ed-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: .7rem;
}
.ed-process__step h3 { font-family: var(--ed-font-body); font-size: 1.25rem; margin: 0 0 .6rem; }
.ed-process__step p { margin: 0; color: var(--ed-muted); line-height: 1.6; }

.ed-values {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  font-family: var(--ed-font-body);
}
.ed-values__item { padding-top: 1.4rem; border-top: 2px solid transparent; border-image: var(--ed-gradient) 1; }
.ed-values__item h3 { font-family: var(--ed-font-body); font-size: 1.3rem; margin: 0 0 .6rem; }
.ed-values__item p { margin: 0; color: var(--ed-muted); line-height: 1.65; }

.ed-stat-row {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ed-stat .p-count-wrap { margin-bottom: .6rem; }

/* --------------------------------------------------------------------------
   Careers
   -------------------------------------------------------------------------- */

.ed-roles { list-style: none; margin: 0; padding: 0; font-family: var(--ed-font-body); }
.ed-roles__item {
  padding: clamp(1.5rem, 2.6vw, 2.4rem) 0;
  border-top: 1px solid var(--ed-hairline);
  display: grid;
  gap: .8rem;
}
.ed-roles__item:last-child { border-bottom: 1px solid var(--ed-hairline); }
.ed-roles__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; }
.ed-roles__head h3 { font-family: var(--ed-font-body); font-size: clamp(1.3rem, 2vw, 1.85rem); margin: 0; }
.ed-roles__meta { display: flex; gap: .55rem; color: var(--ed-muted); font-size: .9rem; }
.ed-roles__item p { margin: 0; color: var(--ed-muted); line-height: 1.65; max-width: 68ch; }

/* --------------------------------------------------------------------------
   Contact extras
   -------------------------------------------------------------------------- */

.ed-contact-note { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.ed-cta-band__inner {
  background: var(--ed-ink);
  color: #fff;
  border-radius: clamp(20px, 3vw, 48px);
  padding: clamp(2.5rem, 6vw, 6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ed-cta-band__inner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--ed-gradient);
}
.ed-cta-band__inner p {
  max-width: 56ch;
  margin: 1.25rem auto 2rem;
  font-family: var(--ed-font-body);
  color: var(--ed-on-dark-muted);
  line-height: 1.65;
}
.ed-cta-band__button {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: 1em 2.2em;
  border-radius: 999px;
  background: var(--ed-accent);
  color: #fff;
  font-family: var(--ed-font-body);
  font-weight: 600;
  text-decoration: none;
  transition: background .3s var(--ed-ease), transform .3s var(--ed-ease);
}
.ed-cta-band__button:hover { background: var(--ed-purple); transform: translateY(-2px); }
.ed-cta-band__button svg { width: 1.1em; height: 1.1em; }

/* --------------------------------------------------------------------------
   Filters, pagination, search, 404
   -------------------------------------------------------------------------- */

.ed-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--ed-font-body);
}
.ed-filter a {
  padding: .5em 1.15em;
  border-radius: 999px;
  border: 1px solid var(--ed-hairline);
  color: var(--ed-muted);
  text-decoration: none;
  font-size: .92rem;
  transition: all .25s var(--ed-ease);
}
.ed-filter a:hover,
.ed-filter a.is-active { background: var(--ed-ink); border-color: var(--ed-ink); color: #fff; }

.ed-pagination { margin-top: clamp(2.5rem, 5vw, 4rem); font-family: var(--ed-font-body); }
.ed-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.ed-pagination a,
.ed-pagination span {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .9em;
  border-radius: 999px;
  border: 1px solid var(--ed-hairline);
  text-decoration: none;
  color: var(--ed-muted);
}
.ed-pagination a:hover { border-color: var(--ed-accent); color: var(--ed-accent); }
.ed-pagination .current { background: var(--ed-ink); border-color: var(--ed-ink); color: #fff; }

.ed-search-form { display: flex; gap: .6rem; max-width: 520px; font-family: var(--ed-font-body); }
.ed-search-form input[type="search"] {
  flex: 1;
  padding: .9em 1.2em;
  border-radius: 999px;
  border: 1px solid var(--ed-hairline);
  font: inherit;
}
.ed-search-form button {
  padding: .9em 1.6em;
  border-radius: 999px;
  border: 0;
  background: var(--ed-ink);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ed-search-form button:hover { background: var(--ed-accent); }

.ed-search-again { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ed-search-results { list-style: none; margin: 0; padding: 0; font-family: var(--ed-font-body); }
.ed-search-results li { border-top: 1px solid var(--ed-hairline); }
.ed-search-results li:last-child { border-bottom: 1px solid var(--ed-hairline); }
.ed-search-results a { display: block; padding: 1.6rem 0; text-decoration: none; color: inherit; }
.ed-search-results a:hover h2 { color: var(--ed-accent); }
.ed-search-results__type {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ed-accent);
}
.ed-search-results h2 { font-family: var(--ed-font-body); font-size: 1.4rem; margin: .4rem 0 .5rem; transition: color .25s; }
.ed-search-results p { margin: 0; color: var(--ed-muted); line-height: 1.6; }

.ed-404 { padding-top: clamp(7rem, 13vw, 13rem); text-align: left; }
.ed-404__links { display: flex; flex-wrap: wrap; gap: .7rem; margin: 2.5rem 0; font-family: var(--ed-font-body); }
.ed-404__links a {
  padding: .7em 1.4em;
  border-radius: 999px;
  border: 1px solid var(--ed-hairline);
  color: var(--ed-muted);
  text-decoration: none;
}
.ed-404__links a:hover { background: var(--ed-ink); border-color: var(--ed-ink); color: #fff; }

.ed-work-more { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Dark-surface adjustments where the theme paints on black
   -------------------------------------------------------------------------- */

.footer-component .ed-text-link { color: #fff; }

/* --------------------------------------------------------------------------
   Oversized footer wordmark

   The compiled stylesheet hides .wrapper-footer-logo above 991px (the
   reference only showed it on mobile). We want it on every breakpoint, so the
   display is re-asserted here.
   -------------------------------------------------------------------------- */

.wrapper-footer-logo.ed-wordmark {
  display: block;
  margin-top: clamp(1.5rem, 4vw, 4rem);
  padding: 0 2vw;
  line-height: 0;
}

.ed-wordmark__text {
  display: block;
  font-family: var(--ed-font-display);
  font-weight: 700;
  /* Sized so a ~7-character name fills the container edge to edge. The
     container is padded, so cap against the padded width rather than the raw
     viewport — otherwise the wordmark runs past the footer on phones. */
  font-size: min(24rem, 21vw);
  /* Tight, but not so tight that a descender (g, y, p) would be cut off if the
     wordmark is changed to a name that has one. */
  line-height: .9;
  letter-spacing: -0.035em;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  user-select: none;

}

/* The gradient is painted per letter, not on this element. `background-clip:
   text` only clips to text the element renders itself, and every letter here is
   an inline-block child — an atomic inline box, which the clip region excludes.
   Painting the ramp on the parent therefore filled the letters' boxes instead of
   their glyphs, which rendered as one solid slab. Each letter carries its own
   slice of the ramp instead; see .ed-wordmark__letter below. */

/* Safari and older engines that cannot clip a gradient to text fall back to
   solid white rather than an invisible wordmark. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ed-wordmark__letter {
    background-image: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .ed-wordmark__text { letter-spacing: -0.02em; }
}

/* The header sits flush against the page, with no edge of its own — as the
   reference has it. The open mobile menu is the panel that needs lifting off
   the content, and that shadow is on `.nav-menu-wrap` below. */
.navbar { background-color: #fff; }

/* The dropped menu is a white panel over white content, so it carries the
   shadow instead. Webflow only mounts `.w-nav-overlay` while the menu is open,
   so scoping to it means the shadow never applies to the inline desktop nav. */
.w-nav-overlay .nav-menu-wrap {
  background-color: #fff;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .22);
}

/* Admin bar offset so the fixed navbar is not hidden behind it. */
body.admin-bar .navbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .navbar { top: 46px; }
}

/* ==========================================================================
   Header — animated menu button
   ========================================================================== */

/* .w-nav-button floats right in the Webflow stylesheet, which takes the button
   out of the flex row and lifts it above the logo. */
.ed-burger {
  float: none;
  align-self: center;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color .3s var(--ed-ease);
}

.ed-burger__box {
  position: relative;
  width: 24px;
  height: 16px;
  display: block;
}

.ed-burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ed-ink);
  transition: transform .38s var(--ed-ease), opacity .2s linear, width .38s var(--ed-ease);
}

.ed-burger__bar:nth-child(1) { top: 0; }
.ed-burger__bar:nth-child(2) { top: 7px; width: 70%; }
.ed-burger__bar:nth-child(3) { top: 14px; }

.ed-burger:hover .ed-burger__bar:nth-child(2) { width: 100%; }

/* Webflow adds .w--open to the button while the menu is showing. */
.ed-burger.w--open { background-color: rgba(var(--ed-accent-rgb, 217, 32, 192), .1); }
.ed-burger.w--open .ed-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ed-burger.w--open .ed-burger__bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.ed-burger.w--open .ed-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 991px) {
  /* The selector is deliberately as specific as the one it has to beat. The
     Webflow stylesheet sets display: block on this same element via
     `.w-nav[data-collapse="medium"] .w-nav-button`, which is (0,3,0); anything
     lighter loses, the flex centring never applies, and the three bars sit
     against the top edge of the 48px button rather than in the middle of it. */
  .w-nav[data-collapse="medium"] .ed-burger { display: flex; }

  /* Line the three header items up on one row, vertically centred. */
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .navbar2_button-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }
  .nav-logo-wrap { margin-right: auto; }
}

@media screen and (max-width: 479px) {
  /* Tight on the narrowest phones, so the button sheds its icon and some
     padding rather than disappearing — it is the one control that follows you
     down the page, so it has to be there to follow. */
  .navbar2_button-wrapper .button.is-navbar {
    font-size: .82rem;
    padding-left: .35rem;
    padding-right: .35rem;
  }
  .navbar2_button-wrapper .nav-button-icon-wrap { display: none; }
}

/* ==========================================================================
   Footer — link columns, social buttons, wordmark
   ========================================================================== */

.ed-footer-grid { align-items: start; }

.ed-footer-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.ed-footer-col__chevron { display: none; }

.ed-footer-col__body { display: block; }

.ed-footer-col__inner {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.ed-footer-col__body a.is-link { color: var(--ed-on-dark-muted); text-decoration: none; transition: color .25s var(--ed-ease); }
.ed-footer-col__body a.is-link:hover { color: #fff; }

/* Social buttons — pill with the network mark, brand colour on hover. */
.ed-footer-social-title { margin-bottom: 1rem; }

.ed-social { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }

.ed-social__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1.15rem .55rem .7rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-family: var(--ed-font-body);
  font-size: .9rem;
  line-height: 1;
  background: transparent;
  transition: border-color .3s var(--ed-ease), background-color .3s var(--ed-ease), transform .3s var(--ed-ease);
}

.ed-social__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ed-gradient-diag);
  color: #fff;
  flex: 0 0 auto;
}
.ed-social__icon svg { width: 15px; height: 15px; }

.ed-social__link:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, .1);
  transform: translateX(3px);
}

/* Give each network its own accent from the logo palette. */
.ed-social__link:nth-child(1) .ed-social__icon { background: linear-gradient(135deg, var(--ed-blue), var(--ed-purple)); }
.ed-social__link:nth-child(2) .ed-social__icon { background: linear-gradient(135deg, var(--ed-blue), var(--ed-accent)); }
.ed-social__link:nth-child(3) .ed-social__icon { background: linear-gradient(135deg, var(--ed-purple), var(--ed-blue)); }
.ed-social__link:nth-child(4) .ed-social__icon { background: linear-gradient(135deg, var(--ed-accent), var(--ed-purple)); }

@media screen and (max-width: 767px) {
  /*
     One group per row, collapsed until tapped.

     align-items has to be reset here. The desktop rule sets it to start so
     the columns align to the top of the grid, but this is a column flex
     container, where the cross axis is horizontal: start made every row only
     as wide as its own label. "Site" came out 66px wide in a 335px footer,
     so each tap target and each divider stopped at a different place.
  */
  .ed-footer-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .ed-footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .ed-footer-col__head {
    cursor: pointer;
    padding: 1.15rem 0;
  }

  .ed-footer-col__chevron {
    display: block;
    width: 11px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .35s var(--ed-ease);
    flex: 0 0 auto;
  }
  .ed-footer-col.is-open .ed-footer-col__chevron { transform: rotate(225deg) translate(-2px, -2px); }

  /* The panel height is animated from JavaScript, the same way the FAQ is.
     The 0fr -> 1fr grid trick looks tidier but does not actually interpolate
     here: the transition holds grid-template-rows at its start value and the
     row never opens. Collapsing is scoped to .ed-acc-ready, which the script
     adds once it has taken over, so with JavaScript off every column stays
     open and readable rather than sealed shut. */
  .ed-footer-col__body { overflow: hidden; }

  .ed-footer-col.ed-acc-ready:not(.is-open) .ed-footer-col__body { height: 0; }
  .ed-footer-col.ed-acc-ready.is-open .ed-footer-col__inner { padding-bottom: 1.25rem; }

  /* Social is never collapsed — it is short and it is the call to action. */
  .ed-footer-col--social { border-bottom: 0; padding-top: 1.5rem; }
  .ed-social { flex-direction: row; flex-wrap: wrap; }
}

/* ==========================================================================
   Scroll to top
   ========================================================================== */

.ed-scrolltop {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  bottom: clamp(14px, 2vw, 30px);
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ed-ink);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px) scale(.85);
  transition: opacity .35s var(--ed-ease), transform .35s var(--ed-ease), background-color .3s var(--ed-ease);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.ed-scrolltop[hidden] { display: none; }
.ed-scrolltop.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ed-scrolltop:hover { background: var(--ed-accent); }
.ed-scrolltop:hover .ed-scrolltop__arrow { transform: translateY(-3px); }

.ed-scrolltop__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ed-scrolltop__track {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 2.5;
}
.ed-scrolltop__progress {
  fill: none;
  stroke: url(#edScrollGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}

.ed-scrolltop__arrow {
  position: relative;
  width: 19px;
  height: 19px;
  transition: transform .3s var(--ed-ease);
}

@media (prefers-reduced-motion: reduce) {
  .ed-scrolltop, .ed-scrolltop__arrow, .ed-scrolltop__progress { transition: none; }
}

/* --------------------------------------------------------------------------
   Footer — social column aligns to the right edge on desktop
   -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  .ed-footer-col--social,
  .ed-footer-col--social .ed-footer-col__head { text-align: right; }
  .ed-footer-col--social .ed-footer-col__head { justify-content: flex-end; }
  .ed-footer-col--social .ed-social { align-items: flex-end; }
}

/* --------------------------------------------------------------------------
   Footer wordmark — per-letter hover

   Each letter carries --i (its index). Hovering one lifts and tilts it while
   its neighbours ease slightly out of the way, so the whole word reacts but
   only subtly. The varied rotation keeps it from looking mechanical.
   -------------------------------------------------------------------------- */

.ed-wordmark__letter {
  display: inline-block;
  /* The tracking is applied as a negative margin between letters instead of
     letter-spacing. letter-spacing narrows each letter box below its own glyph
     advance, and background-clip: text paints only inside that box, so the
     right edge of wide letters (the S especially) lost its fill. */
  letter-spacing: normal;
  transform-origin: 50% 90%;
  transition:
    transform .45s var(--ed-ease),
    opacity .45s var(--ed-ease),
    filter .45s var(--ed-ease);
  will-change: transform;

  /* Paint the logo palette through the name, using the lifted ramp so it stays
     legible against the black footer. The ramp is stretched to the width of the
     whole word (--n letters) and then offset to this letter's position along it
     (--p, 0 to 100), so the separate slices read as one continuous gradient. */
  background-image: var(--ed-gradient-bright, var(--ed-gradient));
  background-repeat: no-repeat;
  background-size: calc(var(--n, 7) * 100%) 100%;
  background-position: calc(var(--p, 0) * 1%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Odd and even letters tilt opposite ways, and every third scales instead —
   three behaviours cycling across the word rather than one repeated move. */
.ed-wordmark__letter:hover {
  transform: translateY(-0.06em) rotate(-4deg) scale(1.04);
  filter: brightness(1.25);
}
.ed-wordmark__letter:nth-child(even):hover {
  transform: translateY(-0.05em) rotate(5deg) scale(1.03);
}
.ed-wordmark__letter:nth-child(3n):hover {
  transform: translateY(-0.09em) rotate(0deg) scale(1.07);
}

.ed-wordmark__letter + .ed-wordmark__letter { margin-left: -0.035em; }

/* The same move, played on a timer by initWordmarkAutoplay() so the wordmark
   has a pulse of its own when nobody is hovering it. */
.ed-wordmark__letter.is-auto {
  transform: translateY(-0.05em) rotate(-3deg) scale(1.03);
  filter: brightness(1.2);
}
.ed-wordmark__letter.is-auto:nth-child(even) { transform: translateY(-0.045em) rotate(4deg) scale(1.025); }
.ed-wordmark__letter.is-auto:nth-child(3n) { transform: translateY(-0.07em) scale(1.05); }

/* Neighbours give a little room. */
.ed-wordmark__letter:hover + .ed-wordmark__letter { transform: translateX(0.015em) translateY(-0.02em); }
.ed-wordmark__text:has(.ed-wordmark__letter:hover) .ed-wordmark__letter:not(:hover) { opacity: .78; }

@media (prefers-reduced-motion: reduce) {
  .ed-wordmark__letter { transition: none; }
  .ed-wordmark__letter:hover,
  .ed-wordmark__letter:nth-child(even):hover,
  .ed-wordmark__letter:nth-child(3n):hover,
  .ed-wordmark__letter.is-auto { transform: none; filter: none; }
}

/* -------------------------------------------------------------------------
 * 21. Comments
 *
 * The reference had no comment thread, so this is written from scratch in the
 * theme's own type scale. The first rule is deliberately global: WordPress and
 * plugins both emit form controls with intrinsic `cols`/`size` widths, which
 * overflow a 360px viewport unless they are capped here.
 * ---------------------------------------------------------------------- */

input,
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.ed-comments {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.ed-comments__title,
.ed-comments .comment-reply-title {
  font-family: var(--ed-font-body);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 1.5rem;
}

.ed-comments__notes,
.ed-comments__closed {
  color: rgba(0, 0, 0, .6);
  font-size: .95rem;
  margin: 0 0 1.75rem;
}

.ed-comment-list,
.ed-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ed-comment-list .children {
  margin-left: clamp(1rem, 4vw, 3rem);
  padding-left: clamp(1rem, 4vw, 2rem);
  border-left: 1px solid rgba(0, 0, 0, .1);
}

.ed-comment-list li.comment {
  margin: 0 0 2rem;
}

.ed-comment-list .comment-body {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ed-comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 600;
}

.ed-comment-list .comment-author img {
  border-radius: 50%;
  flex: 0 0 auto;
}

.ed-comment-list .comment-author .says {
  display: none;
}

.ed-comment-list .comment-meta {
  font-size: .85rem;
  color: rgba(0, 0, 0, .55);
  margin: .35rem 0 .9rem;
}

.ed-comment-list .comment-meta a {
  color: inherit;
  text-decoration: none;
}

.ed-comment-list .comment-meta a:hover {
  color: var(--ed-accent);
}

.ed-comment-list .reply a,
.ed-comments .comment-reply-title small a {
  display: inline-block;
  margin-top: .5rem;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ed-accent);
}

/* ---- The form ---------------------------------------------------------- */

.ed-comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}

.ed-comment-field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* The comment box, the notes and the submit row always span both columns.
   `:first-of-type` cannot be used for the comment box: the notes paragraph is
   also a <p>, so it would win. */
.ed-comment-form > .ed-comment-field--body,
.ed-comment-form > .ed-comments__notes,
.ed-comment-form > .form-submit,
.ed-comment-form > .comment-form-cookies-consent {
  grid-column: 1 / -1;
}

.ed-comment-field label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.ed-comment-field input,
.ed-comment-field textarea {
  width: 100%;
  padding: .9rem 1rem;
  font: inherit;
  color: var(--ed-ink);
  background: rgba(0, 0, 0, .03);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .6rem;
  transition: border-color .25s var(--ed-ease), box-shadow .25s var(--ed-ease);
}

.ed-comment-field textarea {
  resize: vertical;
  min-height: 9rem;
}

.ed-comment-field input:focus,
.ed-comment-field textarea:focus {
  outline: none;
  border-color: var(--ed-accent);
  box-shadow: 0 0 0 3px rgba(var(--ed-accent-rgb), .16);
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: rgba(0, 0, 0, .6);
}

.comment-form-cookies-consent input {
  width: auto;
  accent-color: var(--ed-accent);
}

.ed-comments .form-submit {
  margin: .5rem 0 0;
}

.ed-comment-submit {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 1rem 2.25rem;
  font: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ed-paper);
  background: var(--ed-ink);
  border-radius: 100px;
  background-image: var(--ed-gradient);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position .5s var(--ed-ease), transform .25s var(--ed-ease);
}

.ed-comment-submit:hover {
  background-position: 0 0;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .ed-comment-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Submit button — brand letters behind the label

   `.submit-ab-img._1` to `._4` come from the compiled stylesheet and place four
   slots across the button; those slots hold letters here. The compiled
   interaction runtime also parks the slots roughly two of their own heights
   above the button and only brings them down from its own hover handler, which
   does not fire reliably once the markup differs from the reference. The slot
   transform is therefore pinned with !important (which outranks the inline
   style that runtime writes) and the letter inside it is what animates.
   -------------------------------------------------------------------------- */

.submit-button-wrap {
  position: relative;
  overflow: hidden;
}

.submit-button-wrap .form-button {
  position: relative;
  z-index: 2;
}

/* Above the input, not behind it: .form-button is an opaque magenta bar, so a
   letter underneath it is simply invisible. pointer-events stay off, so the
   click still lands on the input.

   `--x` is the letter's position along the button as a percentage, worked out
   from the letter count in ed_submit_button_letters(). The compiled stylesheet
   only positions four slots; this spreads however many the brand name has. */
/* The `._1` to `._4` modifiers in the compiled stylesheet pin those four slots
   to fixed left/right percentages at (0,2,0), which outranks a bare
   `.submit-ab-img` rule — so the first four letters ignored their computed
   position and the word came out shuffled. Listing the modifiers here matches
   that weight and wins on order. */
.submit-ab-img,
.submit-ab-img._1,
.submit-ab-img._2,
.submit-ab-img._3,
.submit-ab-img._4 {
  left: calc(var(--x, 50) * 1%);
  right: auto;
}

.submit-ab-img {
  position: absolute;
  top: 0;
  width: auto;
  height: 100%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateX(-50%) !important;
}

.ed-submit-letter {
  font-family: var(--ed-font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1;
  /* Plain translucent white. A blend mode was tried here and is too subtle
     against the magenta, on top of behaving oddly inside the stacking context
     the wrapper creates with overflow: hidden. */
  color: rgba(255, 255, 255, .62);
  opacity: 0;
  user-select: none;
  transform: translateY(90%) scale(.7) rotate(-10deg);
  transition:
    transform .65s var(--ed-ease),
    opacity .4s var(--ed-ease);
}

.submit-button-wrap:hover .ed-submit-letter,
.submit-button-wrap:focus-within .ed-submit-letter {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

/* Staggered left to right so they arrive as a drift, not all at once. */
.ed-submit-letter { transition-delay: calc(var(--i, 0) * 55ms); }

@media (prefers-reduced-motion: reduce) {
  .ed-submit-letter {
    transition: opacity .2s linear;
    transform: none;
    transition-delay: 0s;
  }
  .submit-button-wrap:hover .ed-submit-letter { transform: none; }
}

/* --------------------------------------------------------------------------
   Header CTA — detaches and follows

   The header scrolls away with the page, as it does in the reference. The
   enquiry button is the one thing worth keeping within reach, so it lifts out
   of the header and settles into the top-right corner. See initStickyCta() in
   assets/js/app.js: it is the same element throughout, positioned against a
   placeholder that holds its slot in the header, which is what lets the trip to
   the corner animate rather than jump.
   -------------------------------------------------------------------------- */

.ed-cta-holder {
  display: inline-block;
  flex: 0 0 auto;
}

.ed-cta-holder[hidden] { display: none; }

.ed-cta-float {
  position: fixed;
  z-index: 200;
  margin: 0;
  will-change: top, left;
}

/* Parked in the corner: a light, blurred plate so it stays legible over
   whatever is behind it, going fully opaque on hover, focus and press. */
.ed-cta-float.is-stuck {
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .04),
    0 12px 32px -14px rgba(0, 0, 0, .35);
}

.ed-cta-float.is-stuck:hover,
.ed-cta-float.is-stuck:focus-visible,
.ed-cta-float.is-stuck:active {
  background-color: #fff;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .06),
    0 16px 40px -12px rgba(var(--ed-accent-rgb, 217, 32, 192), .45);
}

/* The admin bar occupies the same corner. */
body.admin-bar .ed-cta-float.is-stuck { margin-top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .ed-cta-float.is-stuck { margin-top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-cta-float { transition: none !important; }
}

/* ==========================================================================
   Floating navigation

   On desktop it appears once the header has scrolled away, sitting immediately
   to the right of the sticky enquiry button. Below the nav collapse breakpoint
   it replaces the header burger outright and is on screen from the start.

   The panel is anchored to the button's own corner so it grows out from behind
   it, and the button stays put and becomes the close control — which is why it
   is a sibling of the panel rather than a child, and why both share the same
   top/right inset.
   ========================================================================== */

.ed-floatnav {
  position: fixed;
  top: calc(16px + var(--ed-topbar-h, 0px));
  right: 16px;
  z-index: 210;
  pointer-events: none;
}

body.admin-bar .ed-floatnav { top: calc(48px + var(--ed-topbar-h, 0px)); }

@media screen and (max-width: 782px) {
  body.admin-bar .ed-floatnav { top: calc(62px + var(--ed-topbar-h, 0px)); }
}

/* This panel used to hide the native cursor too, the way the rest of the page
   did, on the grounds that the custom one was the pointer here. It is not one
   any more, so the menu keeps the ordinary pointer like everything else and
   the shard trail rides over the top of it. */

/* ---- The button ---------------------------------------------------------- */

.ed-floatnav__toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  pointer-events: auto;

  /* No plate at rest: on mobile this sits on the header, where a plate would
     read as a second surface floating over a surface. */
  background-color: transparent;
  box-shadow: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.9);
  transition:
    opacity .35s var(--ed-ease),
    transform .45s var(--ed-ease),
    visibility 0s linear .35s,
    background-color .3s ease,
    box-shadow .3s ease;
}

.ed-floatnav.is-visible .ed-floatnav__toggle {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity .35s var(--ed-ease),
    transform .45s var(--ed-ease),
    visibility 0s,
    background-color .3s ease,
    box-shadow .3s ease;
}

/* Once it has left the header it needs its own ground to stay legible over
   whatever scrolls past, and again while it is acting as the close control. */
.ed-floatnav.is-visible .ed-floatnav__toggle,
.ed-floatnav[data-open="true"] .ed-floatnav__toggle {
  background-color: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .04),
    0 12px 32px -14px rgba(0, 0, 0, .35);
}

.ed-floatnav.is-visible .ed-floatnav__toggle:hover,
.ed-floatnav.is-visible .ed-floatnav__toggle:focus-visible,
.ed-floatnav[data-open="true"] .ed-floatnav__toggle:hover,
.ed-floatnav[data-open="true"] .ed-floatnav__toggle:focus-visible {
  background-color: #fff;
}

.ed-floatnav__box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.ed-floatnav__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ed-ink);
  transition:
    transform .38s var(--ed-ease),
    opacity .2s linear,
    width .38s var(--ed-ease);
}

.ed-floatnav__bar:nth-child(1) { top: 0; }
.ed-floatnav__bar:nth-child(2) { top: 6px; width: 70%; }
.ed-floatnav__bar:nth-child(3) { top: 12px; }

.ed-floatnav__toggle:hover .ed-floatnav__bar:nth-child(2) { width: 100%; }

/* Same morph as the header burger. */
.ed-floatnav[data-open="true"] .ed-floatnav__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ed-floatnav[data-open="true"] .ed-floatnav__bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.ed-floatnav[data-open="true"] .ed-floatnav__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Below the nav collapse breakpoint this is the only menu -------------- */

@media screen and (max-width: 991px) {
  /*
   * The header burger keeps its slot but stops being a control: removing it
   * from flow would slide the enquiry button right, under this one. The
   * floating button lines up with the slot it vacates.
   */
  .navbar2_button-wrapper .ed-burger {
    visibility: hidden;
    pointer-events: none;
  }

  .ed-floatnav {
    top: calc(11px + var(--ed-topbar-h, 0px));
    right: 20px;
  }

  body.admin-bar .ed-floatnav { top: calc(43px + var(--ed-topbar-h, 0px)); }

  /* On screen from the start here, since nothing else opens the menu. */
  .ed-floatnav .ed-floatnav__toggle {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar .ed-floatnav { top: calc(57px + var(--ed-topbar-h, 0px)); }
}

/* ---- The panel ----------------------------------------------------------- */

.ed-floatnav__panel {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 1;
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* 10px of clearance around the button, which sits in this corner. */
  padding: 66px 26px 26px;
  border-radius: 26px;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .05),
    0 30px 70px -20px rgba(0, 0, 0, .38);
  pointer-events: auto;

  /* Grows out from behind the button, which is what the corner origin buys. */
  transform-origin: top right;
  opacity: 0;
  transform: scale(.72);
  transition:
    opacity .3s var(--ed-ease),
    transform .45s var(--ed-ease);
}

.ed-floatnav__panel[hidden] { display: none; }

.ed-floatnav[data-open="true"] .ed-floatnav__panel {
  opacity: 1;
  transform: scale(1);
}

@media screen and (max-width: 767px) {
  .ed-floatnav__panel { width: 90vw; }
}

/* ---- Panel contents ------------------------------------------------------ */

.ed-floatnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ed-floatnav__item {
  border-bottom: 1px solid rgba(0, 0, 0, .08);

  /* Each row arrives just after the one above it. */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .35s var(--ed-ease),
    transform .4s var(--ed-ease);
}

.ed-floatnav[data-open="true"] .ed-floatnav__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(90ms + var(--i, 0) * 45ms);
}

/* The footer below supplies the closing edge, so the last rule would double it. */
.ed-floatnav__item:last-child { border-bottom: 0; }

.ed-floatnav__group { display: flex; align-items: center; justify-content: space-between; }

.ed-floatnav__link {
  display: block;
  padding: .95rem 0;
  font-family: var(--ed-font-body);
  font-size: 1.2rem;
  color: var(--ed-ink);
  text-decoration: none;
  transition: color .25s var(--ed-ease);
}
.ed-floatnav__link:hover { color: var(--ed-accent); }

.ed-floatnav__expand {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .05);
  transition: background-color .25s var(--ed-ease);
}
.ed-floatnav__expand:hover { background: rgba(0, 0, 0, .1); }

.ed-floatnav__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ed-ink);
  border-bottom: 2px solid var(--ed-ink);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .3s var(--ed-ease);
}
.ed-floatnav__expand[aria-expanded="true"] .ed-floatnav__chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* ---- The services group --------------------------------------------------
   Laid out for the panel rather than lifted from the header. The header has a
   full-width bar to fill, so it runs three tall columns side by side; that
   shape in a 480px panel meant either a sideways scroll or columns cut
   mid-word. Here the groups stack and the services inside each one flow across,
   which keeps the card short with nothing running off the edge.

   Only the link itself is shared with the header, through .dropdown-link and
   .d-link-icon, so the icons and the hover text-swap stay identical to it.
   ------------------------------------------------------------------------- */

.ed-floatnav__sub { padding: .35rem 0 1.35rem; }
.ed-floatnav__sub[hidden] { display: none; }

.ed-floatnav__sub-inner {
  padding: 1.35rem 1.25rem 1.4rem;
  border-radius: 18px;
  background: var(--ed-ink);
}

.ed-floatnav__set + .ed-floatnav__set { margin-top: 1.35rem; }

.ed-floatnav__set-label {
  margin: 0 0 .7rem;
  font-family: var(--ed-font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

/* Two across where the panel is wide enough for the longest service name to
   sit on one line, one down where it is not. */
.ed-floatnav__set-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem 1rem;
}

@media screen and (min-width: 480px) {
  .ed-floatnav__set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ed-floatnav__sub .dropdown-link {
  gap: .55rem;
  font-size: .88rem;
  line-height: 1.25;
  align-items: center;
}

.ed-floatnav__sub .d-link-icon {
  width: 1rem;
  opacity: .85;
}

.ed-floatnav__sub-foot {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .14);

  font-family: var(--ed-font-body);
  font-size: .9rem;
  color: #fff;
  text-decoration: none;
  transition: color .25s var(--ed-ease);
}
.ed-floatnav__sub-foot:hover { color: var(--ed-accent); }

.ed-floatnav__sub-arrow {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--ed-ease);
}
.ed-floatnav__sub-foot:hover .ed-floatnav__sub-arrow { transform: rotate(45deg) translate(2px, -2px); }

/* ---- Panel footer --------------------------------------------------------- */

.ed-floatnav__foot {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
}

/* The CTA is a plain site button: .button carries the fill, the radius and the
   type. Only the scale is pinned, because .button sizes itself in vw for a
   full-width section and this panel is a fixed 420px — left alone it would keep
   growing with the viewport inside a box that does not. The values are what it
   renders at on a 1280 screen, which is the header button's size. */
.ed-floatnav__cta { transition: transform .25s var(--ed-ease); }

/*
 * Below the collapse breakpoint .button already sizes itself in px and is
 * correct as it stands. Above it, it switches to vw for a full-width section,
 * and this panel is a fixed 420px — left alone the button would keep growing
 * with the viewport inside a box that does not. Pinned to what it renders at
 * on a 1280 screen, which is the header button's size.
 */
@media screen and (min-width: 992px) {
  .ed-floatnav__cta {
    font-size: 1rem;
    padding: .875rem 1.6rem;
  }
}
.ed-floatnav__cta:hover { transform: translateY(-2px); }

.ed-floatnav__mail {
  font-family: var(--ed-font-body);
  font-size: .92rem;
  color: var(--ed-muted);
  text-decoration: none;
}
.ed-floatnav__mail:hover { color: var(--ed-accent); }

/* A click anywhere else closes it. */
.ed-floatnav__scrim {
  position: fixed;
  inset: 0;
  z-index: 205;
  background: transparent;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ed-floatnav__toggle,
  .ed-floatnav__panel,
  .ed-floatnav__item,
  .ed-floatnav__bar { transition-duration: .01ms; }
  .ed-floatnav__panel { transform: none; }
  .ed-floatnav__item { transform: none; transition-delay: 0s; }
}

/* ==========================================================================
   Cursor shards

   The logo throws a cluster of small squares off the top-right of its "d",
   shrinking and spreading as they go. These trail the cursor with the same
   shape, the same three colours, and the same shrink.

   Position comes from JS (see initCursorShards) because each shard eases on
   its own coefficient; everything below is only appearance and state. They sit
   just under the dot itself, which stays the thing your eye tracks.
   ========================================================================== */

.ed-shards {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;

  /* Hidden until the pointer moves, so nothing sits in the corner on load. */
  opacity: 0;
  transition: opacity .3s var(--ed-ease);
}

.ed-shards.is-live { opacity: 1; }

.ed-shard {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s, 8px);
  height: var(--s, 8px);

  /* Rounded squares, not dots — the mark's shapes are square. */
  border-radius: 2px;
  will-change: transform;

  /* The trailing shards sit back a little, as they do in the mark. */
  opacity: calc(1 - var(--i, 0) * .13);
  transition: opacity .3s var(--ed-ease), border-radius .3s var(--ed-ease);
}

/*
 * The gradient's three cool colours, in the order they climb the mark.
 *
 * Set by class rather than :nth-child. Shards and motes are both spans under
 * one parent, so nth-child and nth-of-type share a single counter across both
 * sets and the motes would start from wherever the shards left off. The class
 * is assigned per set in cursor.php.
 */
.ed-c1 { background: var(--ed-accent); }
.ed-c2 { background: var(--ed-purple); }
.ed-c3 { background: var(--ed-blue); }

/*
 * Motes: the squares the cursor sheds on a timer, travelling up and to the
 * right the way the mark's do before fading out. Position, opacity and scale
 * are all written by JS each frame, so nothing here transitions — a transition
 * would fight the per-frame writes and smear the motion.
 */
.ed-mote {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 1.5px;
  opacity: 0;
  will-change: transform, opacity;
}


/* Over anything clickable the cluster opens up and softens. */
.ed-shards.is-open .ed-shard {
  opacity: calc(.75 - var(--i, 0) * .1);
  border-radius: 50%;
}

/* The custom cursor is off on touch and for reduced motion, and so is this.
   The JS removes the element, but the guard keeps it invisible either way. */
@media (hover: none), (pointer: coarse) {
  .ed-shards { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-shards { display: none !important; }
}

/* ==========================================================================
   Brand watermark

   The mark, oversized and faint, sitting behind content as a ground rather
   than an image. It is decorative: aria-hidden, never in the tab order, and
   never carrying meaning that is not also in the text.
   ========================================================================== */

.ed-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

.ed-watermark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Anything the watermark sits behind needs to establish a stacking context,
   or the mark paints over the copy. */
.ed-watermark-host { position: relative; }
.ed-watermark-host > *:not(.ed-watermark) { position: relative; z-index: 1; }

/* ---- Placements ---------------------------------------------------------- */

/*
 * Homepage banner: large, faint, sitting behind the headline.
 *
 * Held inside the right edge rather than bleeding past it. The hero contains a
 * position: sticky track, so the section cannot take overflow: hidden to clip a
 * bleed — a clipping ancestor kills the sticky — and a mark hanging outside the
 * viewport put a horizontal scrollbar on the homepage.
 */
.ed-watermark--hero {
  top: 50%;
  right: 0;
  width: clamp(280px, 40vw, 600px);
  max-width: 90vw;
  transform: translateY(-46%);
  opacity: .07;
}

/*
 * Corner and anchor stay inside their section.
 *
 * They used to hang outside on negative offsets, which looks better but only
 * works when the host clips. Most of these sections do not, so a mark could
 * drift down over the following section's copy — faint, but visible, and
 * impossible to predict from the markup. Bleeding is opted into below, on the
 * one host that does clip.
 */
.ed-watermark--corner {
  top: 0;
  right: 0;
  width: clamp(160px, 22vw, 340px);
  opacity: .06;
}

.ed-watermark--anchor {
  bottom: 0;
  left: 0;
  width: clamp(200px, 26vw, 420px);
  opacity: .05;
}

/* The promise card sets overflow: hidden through .lc-card, so a mark hanging
   off its corner is clipped to the card and cannot escape. */
.ed-promise .ed-watermark--anchor {
  bottom: -12%;
  left: -6%;
  width: clamp(220px, 30vw, 380px);
}

/* On a dark ground the mark needs more presence to register at all. */
.ed-watermark--on-dark { opacity: .1; }

@media screen and (max-width: 767px) {
  /* Faint marks turn to noise behind copy on a narrow column. */
  .ed-watermark--corner,
  .ed-watermark--anchor { display: none; }

  .ed-watermark--hero {
    width: 62vw;
    right: 0;
    opacity: .05;
  }
}

/* ==========================================================================
   Cookie consent

   Prior consent with a real reject option. Reject and Accept are the same size,
   the same shape and sit side by side, because the AEPD guidance is that
   refusing must be as easy as agreeing — and a greyed-out "Reject" link under
   the fold is the usual way that rule gets broken.

   The banner never blocks the page: it sits at the bottom, above the sticky
   controls, and the site works whichever button is pressed.
   ========================================================================== */

.ed-cookie {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 300;

  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ed-ease), transform .45s var(--ed-ease);
}

.ed-cookie[hidden] { display: none; }
.ed-cookie.is-open { opacity: 1; transform: translateY(0); }

.ed-cookie__inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.15rem 1.35rem;
  border-radius: 18px;
  background: var(--ed-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px -24px rgba(0, 0, 0, .8);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.ed-cookie__text { flex: 1 1 22rem; min-width: 0; }

.ed-cookie__title {
  margin: 0 0 .2rem;
  font-family: var(--ed-font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ed-accent-light);
}

.ed-cookie__body {
  margin: 0;
  font-family: var(--ed-font-body);
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}

.ed-cookie__body a { color: #fff; text-underline-offset: 3px; }

.ed-cookie__actions {
  flex: 0 0 auto;
  display: flex;
  gap: .6rem;
}

/* Same box, same weight — only the fill differs. */
.ed-cookie__btn {
  font-family: var(--ed-font-body);
  font-size: .9rem;
  font-weight: 600;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .25s var(--ed-ease), border-color .25s var(--ed-ease), color .25s var(--ed-ease);
}

.ed-cookie__btn--reject:hover,
.ed-cookie__btn--reject:focus-visible { background: rgba(255, 255, 255, .12); }

.ed-cookie__btn--accept {
  background: #fff;
  border-color: #fff;
  color: var(--ed-ink);
}

.ed-cookie__btn--accept:hover,
.ed-cookie__btn--accept:focus-visible { background: var(--ed-accent-light); border-color: var(--ed-accent-light); }

@media screen and (max-width: 559px) {
  .ed-cookie__actions { width: 100%; }
  .ed-cookie__btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-cookie { transition: none; }
}

/* ==========================================================================
   Legal pages
   ========================================================================== */

/*
 * Unfilled fields are marked, not hidden. A legal notice carrying a made-up
 * company number is worse than none at all, so these have to be impossible to
 * miss before launch.
 */
.ed-legal-blank {
  background: rgba(240, 56, 224, .14);
  color: var(--ed-accent-deep);
  padding: .1em .45em;
  border-radius: 3px;
  font-family: var(--ed-font-mono);
  font-size: .82em;
}

.ed-legal-warning {
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border-left: 3px solid var(--ed-accent);
  border-radius: 0 10px 10px 0;
  background: var(--ed-paper-soft);
  font-size: .95rem;
  line-height: 1.6;
}

.ed-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: .92rem;
}

.ed-legal-table th,
.ed-legal-table td {
  text-align: left;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--ed-hairline);
  vertical-align: top;
}

.ed-legal-table th {
  font-family: var(--ed-font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

.ed-legal-updated { color: var(--ed-muted); font-size: .9rem; }

.ed-cookie-reopen {
  font-family: var(--ed-font-body);
  font-size: .92rem;
  font-weight: 600;
  padding: .65rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--ed-ink);
  background: transparent;
  color: var(--ed-ink);
  cursor: pointer;
  transition: background-color .25s var(--ed-ease), color .25s var(--ed-ease);
}

.ed-cookie-reopen:hover,
.ed-cookie-reopen:focus-visible { background: var(--ed-ink); color: var(--ed-paper); }

/* --------------------------------------------------------------------------
   Header row: keep it inside the viewport

   .navbar2_button-wrapper was measuring 0.8px past the right edge on a 360px
   viewport, which is enough to make the whole document scroll sideways by a
   pixel on every page. It is a flex row whose children will not shrink by
   default, so min-width:0 lets them, and the wrapper is capped at the space
   actually available.

   The hidden burger keeps its slot on purpose — see the float nav notes — so
   it is narrowed rather than removed, which holds the enquiry button in the
   same place without the extra fraction of a pixel.
   -------------------------------------------------------------------------- */

.nav-container { max-width: 100%; }

.navbar2_button-wrapper {
  max-width: 100%;
  min-width: 0;
}

.navbar2_button-wrapper > * { min-width: 0; }

@media screen and (max-width: 479px) {
  .navbar2_button-wrapper .ed-burger { width: 40px; }
}

/* The cookie table has three columns and cannot fit a 375px screen. It scrolls
   inside its own box rather than pushing the whole document sideways — which it
   was doing, by 64px. */

.ed-legal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 2rem;
}

.ed-legal-table-wrap .ed-legal-table {
  margin: 0;
  min-width: 30rem;
}

/* ==========================================================================
   Contact form: the consent row

   The consent label was inheriting .checkbox-label, which the compiled sheet
   styles as a pill — 62px radius, accent border, generous padding. That is
   right for a one-word radio like "Restaurant" and wrong for a sentence: it
   boxed the consent text into a tall narrow capsule sitting on top of the
   submit button.

   Here it is a plain row: a real square control, the sentence beside it, and
   enough space beneath it that it is not touching the button.
   ========================================================================== */

.form-consent-wrap {
  margin: 1.75rem 0 2.5rem;
  max-width: 52ch;
}

.ed-consent.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* The pill treatment, undone for this one label. */
.ed-consent .checkbox-label.ed-consent__label {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.ed-consent .w-checkbox-input.checkbox {
  appearance: none;
  -webkit-appearance: none;
  float: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: .15rem 0 0;
  border: 1.5px solid var(--ed-accent);
  border-radius: 5px;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.ed-consent .w-checkbox-input.checkbox:checked {
  background-color: var(--ed-accent);
  border-color: var(--ed-accent);
  /* A tick drawn in the box rather than a bitmap from the export. */
  background-image: linear-gradient(transparent, transparent);
  box-shadow: inset 0 0 0 2px var(--ed-ink);
}

.ed-consent .w-checkbox-input.checkbox:focus-visible {
  outline: 2px solid var(--ed-accent-light);
  outline-offset: 2px;
}

/* ==========================================================================
   Dropdown links: the hover text swap

   The markup ships each label twice inside .wrapper so the second copy can
   slide up on hover. Nothing in the compiled stylesheet styles .wrapper or
   .text-clone, so the clone simply rendered underneath the original — every
   label in the menu appeared twice, and clipped where the row was short.

   The clone is taken out of flow and parked one wrapper-height below, so this
   works whether the label is one line or two.
   ========================================================================== */

.dropdown-link .wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
}

.dropdown-link .wrapper .text-original,
.dropdown-link .wrapper .text-clone {
  display: block;
  margin: 0;
  white-space: normal;
  transition: transform .42s cubic-bezier(.6, .05, .2, 1);
}

.dropdown-link .wrapper .text-clone {
  position: absolute;
  inset: 100% 0 auto 0;
  color: var(--ed-accent-light);
}

.dropdown-link:hover .wrapper .text-original,
.dropdown-link:hover .wrapper .text-clone,
.dropdown-link:focus-visible .wrapper .text-original,
.dropdown-link:focus-visible .wrapper .text-clone {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-link .wrapper .text-original,
  .dropdown-link .wrapper .text-clone { transition: none; }
}

/* ==========================================================================
   Services mega menu

   The panel used one class, .d-link-large, for two different jobs: the three
   column headings and the "Explore all services" link at the foot. Both came
   out at 2.25vw — 43px on a 1920 screen — which is display size for what are
   really labels, and it left the panel looking like a page rather than a menu.
   The foot link was also absolutely positioned inside a grid that clips, so it
   sat on the boundary of the dark panel instead of within it.

   Column headings become small caps, the way they already read on mobile. The
   foot link returns to normal flow under a hairline.
   ========================================================================== */

.internal-services-internal > .d-link-large,
.internal-services-internal > .link > .d-link-large {
  font-family: var(--ed-font-mono);
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  white-space: normal;
}

.internal-services-internal > .link:hover > .d-link-large { color: var(--ed-accent-light); }

.internal-services-wrap .dropdown-link {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.35;
  align-items: flex-start;
  gap: .6rem;
}

.internal-services-wrap .d-link-icon {
  width: 1.1rem;
  margin-top: .12rem;
}

.internal-services-wrap .dropdown-links-wrap {
  gap: .85rem;
  white-space: normal;
}

/* The foot link, back in flow across the full width of the panel. */
.internal-services-wrap {
  overflow: visible;
  align-items: start;
}

.internal-services-wrap > .link-wrap {
  position: static;
  grid-column: 1 / -1;
  flex-flow: row;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-top: .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.internal-services-wrap > .link-wrap > .d-link-large {
  font-family: var(--ed-font-body);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
}

.internal-services-wrap > .link-wrap .line {
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(255, 255, 255, .2);
  transition: background-color .3s ease;
}

.internal-services-wrap > .link-wrap:hover > .d-link-large { color: var(--ed-accent-light); }
.internal-services-wrap > .link-wrap:hover .line { background-color: var(--ed-accent); }

@media screen and (max-width: 991px) {
  .internal-services-wrap .dropdown-link { font-size: .95rem; }
  .internal-services-wrap > .link-wrap { padding-top: 1rem; }
  .internal-services-wrap > .link-wrap > .d-link-large { font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   Panel width

   The dropdown sizes itself from the toggle, which is a 173px word. That gave
   three columns about 125px each, so every two-word label broke across lines.
   A fixed comfortable width, centred under the toggle and held inside the
   viewport.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 992px) {
  .mega-menu .d-content-wrap.w-dropdown-list {
    width: min(56rem, calc(100vw - 4rem));
    min-width: 0;
  }

  .internal-services-wrap {
    grid-column-gap: 2.5rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .internal-services-wrap .dropdown-links-wrap { white-space: nowrap; }
  .internal-services-wrap .dropdown-link { white-space: nowrap; }
}

/* Legal pages: the quiet placeholder a visitor sees, and the opening line. */
.ed-legal-pending {
  color: var(--ed-muted);
  font-style: italic;
}

.ed-legal-lede {
  font-size: 1.05em;
  line-height: 1.75;
  color: var(--ed-ink);
  max-width: 62ch;
  margin-bottom: 2em;
}

/* --------------------------------------------------------------------------
   Contact page: the consent row

   The contact page builds its own form rather than calling ed_contact_form(),
   with .cf-checkbox-field / .cf-checkbox-label instead of the footer form's
   classes. Both are pill styles from the export — 62px radius, centred flex,
   fixed height — which turned a two-line sentence into a lozenge with the
   policy link pushed out to the right on its own line.

   Same treatment as the footer form: a real square control, the sentence beside
   it, aligned left, with room beneath it before the submit button.
   -------------------------------------------------------------------------- */

.contact-input-wrapper .cf-checkbox-field.ed-consent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .75rem;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.contact-input-wrapper .cf-checkbox-label.ed-consent__label {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--ed-muted);
  line-height: 1.6;
}

.contact-input-wrapper .cf-checkbox-label.ed-consent__label a {
  color: var(--ed-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-input-wrapper .cf-checkbox-label.ed-consent__label a:hover { color: var(--ed-accent-deep); }

.contact-input-wrapper .w-checkbox-input.cf-checkbox {
  appearance: none;
  -webkit-appearance: none;
  float: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: .2rem 0 0;
  border: 1.5px solid var(--ed-accent);
  border-radius: 5px;
  background: transparent none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}

.contact-input-wrapper .w-checkbox-input.cf-checkbox:checked {
  background-color: var(--ed-accent);
  border-color: var(--ed-accent);
  box-shadow: inset 0 0 0 2px var(--ed-paper);
}

.contact-input-wrapper .w-checkbox-input.cf-checkbox:focus-visible {
  outline: 2px solid var(--ed-accent-deep);
  outline-offset: 2px;
}

/* Breathing room between the agreement row and the submit button. */
.contact-form-row:has(.ed-consent) { padding-bottom: 1.5rem; }
.contact-input-wrapper .ed-consent { margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   Make the consent control visible

   The export hides the real input — opacity 0, absolutely positioned, z-index
   -1 — and paints the checked state on the pill label instead. With the pill
   removed there was nothing left to see, so the box has to be put back into
   the flow and made visible. Both forms use the same treatment.
   -------------------------------------------------------------------------- */

.ed-consent .w-checkbox-input.checkbox,
.contact-input-wrapper .w-checkbox-input.cf-checkbox {
  position: static;
  opacity: 1;
  z-index: auto;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 68% 68%;
}

/* The tick is drawn rather than fetched, so it cannot 404 and needs no request. */
.ed-consent .w-checkbox-input.checkbox:checked,
.contact-input-wrapper .w-checkbox-input.cf-checkbox:checked {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ed-consent:hover .w-checkbox-input.checkbox,
.contact-input-wrapper .ed-consent:hover .w-checkbox-input.cf-checkbox {
  border-color: var(--ed-accent-deep);
}

/* The checked fill, restated here because the export's own `background`
   shorthand on the base rule resets background-color in some cascade orders. */
.ed-consent .w-checkbox-input.checkbox:checked,
.contact-input-wrapper .w-checkbox-input.cf-checkbox:checked {
  background-color: var(--ed-accent);
  border-color: var(--ed-accent);
}

/* ==========================================================================
   Header extras: language switch and WhatsApp

   Both sit beside the proposal button, and both are quiet: the button is the
   primary action and these are alternatives to it, not competitors.
   ========================================================================== */

.ed-lang {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  margin-right: .35rem;
}

.ed-lang__link {
  font-family: var(--ed-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ed-muted);
  text-decoration: none;
  padding: .35rem .45rem;
  border-radius: 6px;
  transition: color .2s ease, background-color .2s ease;
}

.ed-lang__link + .ed-lang__link { border-left: 1px solid var(--ed-hairline); }
.ed-lang__link:hover { color: var(--ed-ink); }
.ed-lang__link.is-current { color: var(--ed-ink); font-weight: 600; }

.ed-nav-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-right: .6rem;
  font-family: var(--ed-font-body);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ed-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}

.ed-nav-whatsapp:hover { color: var(--ed-accent-deep); }
.ed-nav-whatsapp__icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

@media screen and (max-width: 991px) {
  /* The header is tight on a phone; both live in the menu panel instead. */
  .ed-nav-whatsapp { display: none; }
  .ed-lang { margin-right: .2rem; }
  .ed-lang__link { font-size: .68rem; padding: .3rem .35rem; }
}

/* ==========================================================================
   Buttons

   The hero carries the two calls to action the final draft names: a proposal
   as the primary and WhatsApp as the secondary. These are the theme's own
   button shapes rather than the export's, which are wired to interactions.
   ========================================================================== */

.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95em 1.9em;
  border-radius: 62px;
  border: 1.5px solid transparent;
  font-family: var(--ed-font-body);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.ed-btn:hover { transform: translateY(-2px); }

.ed-btn--primary {
  background-color: var(--ed-ink);
  color: #fff;
}

.ed-btn--primary:hover { background-color: var(--ed-accent-deep); }

.ed-btn--ghost {
  background-color: transparent;
  color: var(--ed-ink);
  border-color: var(--ed-ink);
}

.ed-btn--ghost:hover {
  border-color: var(--ed-accent);
  color: var(--ed-accent-deep);
}

.ed-btn__icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.ed-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: 2vw;
}

.ed-hero-sub {
  margin-top: 2.2vw;
  max-width: 56ch;
  color: var(--ed-muted);
}

@media screen and (max-width: 991px) {
  .ed-hero-sub { margin-top: 22px; }
  .ed-hero-cta { margin-top: 22px; gap: .7rem; }
  .ed-btn { font-size: .95rem; padding: .9em 1.6em; }
}

@media screen and (max-width: 479px) {
  .ed-hero-cta { flex-direction: column; align-items: stretch; }
  .ed-btn { width: 100%; }
}

/* ==========================================================================
   Lead magnet cards

   Section 13. Each is a whole-card link, so the cue at the foot is styling
   rather than a nested anchor.
   ========================================================================== */

.ed-plan-card { text-decoration: none; }

.ed-plan-card__cue {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-family: var(--ed-font-body);
  font-weight: 600;
  color: var(--ed-accent-deep);
  transition: gap .25s ease;
}

.ed-plan-card__cue::after {
  content: "→";
  transition: transform .25s ease;
}

.ed-plan-card:hover .ed-plan-card__cue::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Header density

   The final draft's header carries seven links, a language switch, a WhatsApp
   link and the proposal button. That is a lot for one row: at 1440 the button
   label wrapped onto two lines and the whole bar grew.

   The button never wraps. The WhatsApp label drops to its icon before anything
   else has to give, since the icon is recognisable on its own.
   -------------------------------------------------------------------------- */

.button.is-navbar { white-space: nowrap; }
.button.is-navbar > div { white-space: nowrap; }

.navbar2_button-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
}

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .ed-nav-whatsapp span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ed-nav-whatsapp { margin-right: .45rem; }
  .ed-lang { margin-right: .25rem; }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
  /* Tighten the link row before the button is allowed to shrink. */
  .nav-menu-wrap { gap: .35rem; }
  .nav-link { padding-left: .55rem; padding-right: .55rem; }
}

/* --------------------------------------------------------------------------
   Hero: close the gap under the rotating line

   The sub-headline, buttons and trust line sit in a second .container, which
   carries the layout's standard 96px top padding. Directly under the headline
   that reads as a hole rather than as breathing room, so this block opts out
   and sets its own spacing.
   -------------------------------------------------------------------------- */

.ed-hero-section .container:has(> .ed-hero-cta) { padding-top: 0; }

@media screen and (max-width: 991px) {
  .ed-hero-section .container:has(> .ed-hero-cta) { padding-top: 0; }
}

/* ==========================================================================
   Keyboard focus

   The cookie buttons and the consent boxes already had focus rings; the
   elements added since — the hero buttons, the language switch, the WhatsApp
   link, the empty-state link and the plan cards — did not, so a keyboard user
   lost the caret the moment they entered any of them.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind, and one shared offset so every ring looks like the same ring.
   ========================================================================== */

.ed-btn:focus-visible,
.ed-empty__cta:focus-visible,
.ed-nav-whatsapp:focus-visible,
.ed-lang__link:focus-visible,
.ed-plan-card:focus-visible,
.ed-cookie-reopen:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* On the ink ground the magenta ring is hard to find; lift it. */
.ed-promise .ed-btn:focus-visible,
.footer .ed-btn:focus-visible,
.ed-cta-band .ed-btn:focus-visible {
  outline-color: var(--ed-accent-light);
}

/* The plan cards are whole-card links, so the ring wants the card's radius. */
.ed-plan-card:focus-visible {
  border-radius: clamp(20px, 2.4vw, 30px);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Menu panel: WhatsApp and the language switch

   Both are hidden in the header below 992 to keep that row on one line, so
   this is the only route to them on a phone. Sized to sit with the email link
   already in the panel foot rather than compete with the Start a project
   button above it.
   -------------------------------------------------------------------------- */

.ed-floatnav__wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ed-font-body);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ed-ink);
  text-decoration: none;
  transition: color .2s ease;
}

.ed-floatnav__wa:hover,
.ed-floatnav__wa:focus-visible { color: var(--ed-accent-deep); }

.ed-floatnav__wa-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

.ed-floatnav__lang {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  margin-top: .1rem;
}

.ed-floatnav__lang .ed-lang__link { font-size: .78rem; }

.ed-floatnav__wa:focus-visible,
.ed-floatnav__mail:focus-visible {
  outline: 2px solid var(--ed-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * The utility bar
 *
 * Section 2 of the brief asks for an EN/ES switch and a WhatsApp link fixed to
 * the right alongside the proposal button. All three in the nav row needed
 * 1841px and a 1440 laptop gives that row 1325, so they overflowed onto the
 * navigation links. These two get their own slim row above the header, stuck to
 * the top of the window, which is where a language switch conventionally lives
 * and leaves the nav row to the logo, the links and the button.
 *
 * It renders only when it has something in it, so a site with neither a
 * WhatsApp number nor a sibling language URL gets no empty strip.
 * ---------------------------------------------------------------------- */

.ed-topbar {
  position: sticky;
  top: 0;
  z-index: 220;
  background: var(--ed-ink);
  color: var(--ed-on-dark-muted);
  font-family: var(--ed-font-mono, var(--ed-font-body));
  font-size: 12px;
  letter-spacing: .04em;
}

body.has-topbar { --ed-topbar-h: 34px; }

body.admin-bar .ed-topbar { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .ed-topbar { top: 46px; }
}

.ed-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  max-width: 100%;
  min-height: 34px;
  padding: 0 clamp(1rem, 3vw, 3.6rem);
}

/* ---- WhatsApp ------------------------------------------------------------
 *
 * The mark sheds small squares off its "d", up and to the right; the cursor
 * trail does the same thing, and opens them into circles over anything
 * clickable. That is the house motion, so the one live link in the utility bar
 * uses it rather than inventing a second idea.
 *
 * At rest two shards drift off the icon on a long cycle — magenta then blue,
 * the mark's own colours, on the mark's own diagonal. Long enough apart that
 * the bar is still rather than busy, and the whole thing is two pseudo
 * elements and a keyframe, so it costs nothing to run.
 *
 * On hover the squares become circles and the cycle tightens, which is exactly
 * what the cursor does over a link. The pill is the nav's hover state, borrowed
 * so the two bars agree.
 * ---------------------------------------------------------------------- */

.ed-topbar__wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: inherit;
  text-decoration: none;

  /* Padded so the pill has something to draw around, pulled back by the same
     amount so the label stays where it was. */
  padding: .15rem .5rem;
  margin-left: -.5rem;
  border-radius: 999px;

  transition:
    color .25s var(--ed-ease),
    background-color .25s var(--ed-ease);
}

.ed-topbar__wa:hover,
.ed-topbar__wa:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, .09);
}

.ed-topbar__icon {
  width: .95rem;
  height: .95rem;
  flex: 0 0 auto;
  transition: transform .25s var(--ed-ease);
}

/*
 * Two at once: the lean into the throw, and the colour walk every WhatsApp
 * link shares. Named together because the shorthand replaces the whole list.
 *
 * Qualified by the link rather than set on the icon alone, so it outweighs the
 * .ed-wa svg rule further down — which otherwise replaces this list with the
 * colour walk by itself and quietly drops the lean.
 */
.ed-topbar__wa .ed-topbar__icon {
  animation:
    ed-wa-nudge 5.6s ease-in-out infinite,
    ed-wa-hue var(--ed-wa-clock) linear infinite;
}

/* The two shards. Positioned off the icon's top-right corner, which is where
   the mark sheds its own. */
.ed-topbar__wa::before,
.ed-topbar__wa::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 38%;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  opacity: 0;
  pointer-events: none;
  animation: ed-wa-shard 5.6s var(--ed-ease) infinite;
}

.ed-topbar__wa::before { background: var(--ed-accent); }

.ed-topbar__wa::after {
  width: 3px;
  height: 3px;
  background: var(--ed-blue);
  animation-delay: .5s;
}

@keyframes ed-wa-shard {
  0%, 68% { opacity: 0; transform: translate(0, 0) scale(.5); }
  74% { opacity: .9; transform: translate(1px, -2px) scale(1); }
  100% { opacity: 0; transform: translate(11px, -13px) scale(.3); }
}

/* The icon leans into the throw on the same beat. */
@keyframes ed-wa-nudge {
  0%, 68%, 100% { transform: none; }
  74% { transform: translate(.5px, -1.5px); }
}

/* Hover: round, and more often — the same thing the cursor trail does. */
.ed-topbar__wa:hover::before,
.ed-topbar__wa:hover::after,
.ed-topbar__wa:focus-visible::before,
.ed-topbar__wa:focus-visible::after {
  border-radius: 50%;
  animation-duration: 1.6s;
}

/* On hover the nudge stops so the lift can hold, and the colour keeps walking
   — it had been stopping both, which left the icon a flat blue while the label
   beside it carried on cycling. */
.ed-topbar__wa:hover .ed-topbar__icon,
.ed-topbar__wa:focus-visible .ed-topbar__icon {
  animation: ed-wa-hue var(--ed-wa-clock) linear infinite;
  transform: translate(1px, -1px) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .ed-topbar__icon,
  .ed-topbar__wa::before,
  .ed-topbar__wa::after { animation: none; }

  .ed-topbar__wa::before,
  .ed-topbar__wa::after { display: none; }
}

/* ---- The language switcher -----------------------------------------------
   A disclosure on a dark bar. The list is open in the markup so that with the
   script blocked it stays readable; .is-ready is added once something can open
   and close it again, and only then does the closed state apply.
   ------------------------------------------------------------------------ */

.ed-topbar .ed-lang { position: relative; }

.ed-lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .5rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color .25s var(--ed-ease), color .25s var(--ed-ease);
}

.ed-lang__toggle:hover,
.ed-lang__toggle:focus-visible,
.ed-lang.is-open .ed-lang__toggle {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

/* The flags are the only colour on the bar, so they carry a hairline to sit
   on the dark ground without appearing to float. */
.ed-lang__flag {
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
  object-fit: cover;
}

.ed-lang__chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s var(--ed-ease);
}

.ed-lang.is-open .ed-lang__chev { transform: rotate(225deg) translate(-2px, -2px); }

.ed-lang__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Only once the script has taken over does this become a panel; before that it
   is a plain list sitting in the bar. */
.ed-lang.is-ready .ed-lang__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 240;
  min-width: 13.5rem;
  padding: .35rem;
  border-radius: 12px;
  background: var(--ed-ink-soft, #141922);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 18px 44px -18px rgba(0, 0, 0, .8);
}

.ed-lang__list[hidden] { display: none; }

.ed-lang__link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  color: var(--ed-on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ed-ease), color .2s var(--ed-ease);
}

.ed-lang__link:hover,
.ed-lang__link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.ed-lang__link.is-current { color: #fff; }

/* A dot on the one you are reading, rather than only a colour change. */
.ed-lang__link.is-current::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ed-accent);
  flex: 0 0 auto;
}

.ed-lang__name { font-weight: 500; }

/* .58 rather than .45: measured against the panel, the lighter value came to
   4.48:1 at 10.6px, which is under the 4.5:1 WCAG asks of text this size.
   This lands near 6:1 and still reads as the quieter of the two names. */
.ed-lang__en {
  color: rgba(255, 255, 255, .58);
  font-size: .92em;
}

.ed-lang__link.is-current .ed-lang__en { color: rgba(255, 255, 255, .7); }

@media screen and (max-width: 767px) {
  /* Anchored to the right edge of the screen rather than the button, so a
     long language name cannot push the panel off it. */
  .ed-lang.is-ready .ed-lang__list { right: -.5rem; min-width: 12rem; }
  .ed-lang__now { display: none; }
}

@media screen and (max-width: 767px) {
  .ed-topbar__inner { justify-content: space-between; min-height: 32px; }
  body.has-topbar { --ed-topbar-h: 32px; }
}
/* =========================================================================
 * Knowing what is clickable, and a menu that does not flash open
 * ====================================================================== */

/* ---- The language menu starts closed -----------------------------------
 *
 * It used to be written open and closed by the script on boot, so that it
 * still worked as a plain list if the script never ran. The cost was a list of
 * five languages sitting over the top of the page on every single load until
 * the script caught up — brief on a fast connection, not brief on a phone.
 *
 * Closed in CSS instead, and opened only once the script has taken the panel
 * over. The no-script case is handled by a <noscript> block in the head, which
 * puts the list back as a plain row.
 * -------------------------------------------------------------------- */
.ed-lang__list { display: none; }
.ed-lang.is-ready .ed-lang__list:not([hidden]) { display: block; }

/* ---- The pointer says what is clickable --------------------------------
 *
 * The reference stylesheet sets cursor: none on the body, every link, the
 * mega-menu and the form controls, because it was drawing its own. It is not
 * drawing one any more, so these put the ordinary pointer back. Nothing here
 * is exotic: it is the hand over a link and the I-beam over a text field,
 * which is what a visitor already knows how to read.
 *
 * Explicit rather than inherited, because the rules being overridden are
 * per-element and would otherwise win on the elements that matter most.
 * -------------------------------------------------------------------- */
body,
.cursor-wrapper { cursor: auto; }

a[href],
button,
[role="button"],
summary,
label[for],
.mega-menu,
.mega-menu-link,
.dropdown-link,
.form-button,
.checkbox-label,
.cf-checkbox-label,
.checkbox-field,
.cf-checkbox-field,
input[type="checkbox"],
input[type="radio"],
select { cursor: pointer; }

button[disabled],
[aria-disabled="true"] { cursor: not-allowed; }

.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea { cursor: text; }

/* ---- Menu links: the pill is the hover state ---------------------------
 *
 * There was an underline here, drawn in from the left on hover. It was added
 * on a misreading: the reference stylesheet has .nav-link:hover changing a
 * border colour, and a glance at the resting state said the link had no
 * border, so it looked like a rule that did nothing.
 *
 * The link does have one — 1px, transparent, on a 28.8px radius — and turning
 * it black draws the pill around the label. The hover state was there all
 * along, and a second marker under a pill is one too many.
 *
 * Keyboard focus is covered separately by the outline in brand.css, so nothing
 * is lost by taking the underline out.
 * -------------------------------------------------------------------- */

/* ---- Footer and in-text links ------------------------------------------ */
.ed-footer-col__body a.is-link,
.ed-footer-col__body a.is-link:hover {
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.ed-footer-col__body a.is-link { text-decoration: none; }
.ed-footer-col__body a.is-link:hover,
.ed-footer-col__body a.is-link:focus-visible { text-decoration: underline; }

.ed-prose a:hover,
.ed-prose a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor-white { transition: none; }
}

/* =========================================================================
 * Every WhatsApp link, wherever it is
 *
 * The utility bar got the shard treatment first; this is the same idea applied
 * to the other four — the hero button, the floating menu, the footer and the
 * contact page — so the one channel the business answers fastest looks the
 * same wherever it appears.
 *
 * The colour comes from the mark: blue, violet, magenta, the three stops of
 * the brand gradient. It is painted onto the label and drifted slowly, and the
 * icon walks the same three colours on the same clock, so the pair stay in
 * step without either of them flashing.
 *
 * Hover does not add a new idea; it runs the same one four times faster.
 * ====================================================================== */

.ed-wa {
  position: relative;

  /*
   * The light-surface set: the hero button, the floating menu, the contact
   * page. Deepened from the display colours, because the brand blue and
   * magenta are mixed for large type on dark — on paper at 15px they measure
   * 4.18 and 3.03 against the 4.5 that size needs. These are 5.44, 5.88 and
   * 5.19, and --ed-accent-deep is the theme's own answer to the same problem.
   */
  --ed-wa-a: #1559e0;
  --ed-wa-b: var(--ed-violet);
  --ed-wa-c: var(--ed-accent-deep);
  --ed-wa-clock: 9s;
}

/*
 * On the dark bars the same three colours, lifted.
 *
 * #1e6bff on near-black is about 3.4:1, and the top-bar label is 12px — under
 * the 4.5 that size needs. These are the same hues with the lightness raised
 * until each one clears it against --ed-ink.
 */
.ed-topbar .ed-wa,
.footer-component .ed-wa {
  --ed-wa-a: #7fb0ff;
  --ed-wa-b: #cba4ff;
  --ed-wa-c: #ff95ea;
}

/*
 * Painted on the text itself. Guarded, because without background-clip the
 * transparent colour would simply erase the label.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ed-wa > span {
    background-image: linear-gradient(
      100deg,
      var(--ed-wa-a) 0%,
      var(--ed-wa-b) 25%,
      var(--ed-wa-c) 50%,
      var(--ed-wa-b) 75%,
      var(--ed-wa-a) 100%
    );
    background-size: 280% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ed-wa-sheen var(--ed-wa-clock) linear infinite;
  }
}

/* The icon is fill="currentColor", so it only needs the colour walked. */
.ed-wa svg { animation: ed-wa-hue var(--ed-wa-clock) linear infinite; }

@keyframes ed-wa-sheen {
  from { background-position: 0 0; }
  to { background-position: 280% 0; }
}

@keyframes ed-wa-hue {
  0%, 100% { color: var(--ed-wa-a); }
  33% { color: var(--ed-wa-b); }
  66% { color: var(--ed-wa-c); }
}

/* ---- Hover: the same drift, four times faster -------------------------- */

.ed-wa:hover,
.ed-wa:focus-visible { --ed-wa-clock: 2.2s; }

/* ---- Reduced motion ----------------------------------------------------
 * Everything stops, and the label goes back to inheriting a solid colour
 * rather than staying transparent with nothing moving behind it.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ed-wa > span {
    animation: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: inherit;
  }

  .ed-wa svg { animation: none; }
}