/* ============================================================
   ESK — Contact page suite. Ported from the Claude Design comp
   against the Esketchers design system (Sora / Instrument Sans,
   terracotta on navy).

   Everything is scoped to .eskc. The parent theme styles bare
   inputs, headings and links globally, so the control rules here
   are specific and force the handful of properties the theme sets
   with !important of its own.
   ============================================================ */

.eskc {
  /* the design-system tokens the comp uses, localised to this suite so
     nothing leaks into the rest of the site */
  --eskc-accent: #E76F51;
  --eskc-ink: #022450;

  --eskc-accent-600: #C9563A;
  --eskc-accent-200: #FAD4C9;
  --eskc-accent-050: #FDF2EE;
  --eskc-white: #fff;
  --eskc-paper: #F7F8FA;
  --eskc-paper-2: #E9ECEF;   /* filled-field grey, the soft variant */
  --eskc-grey-200: #E2E6EC;
  --eskc-grey-300: #CBD2DC;
  --eskc-grey-400: #A7B1C0;
  --eskc-grey-500: #7C8798;
  --eskc-grey-600: #5A6577;
  --eskc-grey-800: #2B3340;
  --eskc-success: #1E8E6A;
  --eskc-success-050: #E8F5F0;
  --eskc-danger: #C8402F;

  /* The site's own stack: Niveau Grotesk for headings, Roboto for body —
     the same pairing the header, footer and every other section uses. The
     design-system faces stay as fallbacks only. */
  --eskc-font-display: "niveaugroteskregular", "Sora", "Segoe UI", system-ui, sans-serif;
  --eskc-font-sans: "Roboto", "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --eskc-radius-field: 10px;
  --eskc-radius-card: 14px;
  --eskc-radius-panel: 20px;

  --eskc-shadow-sm: 0 2px 6px rgba(2, 36, 80, .07);
  --eskc-shadow-md: 0 6px 18px -4px rgba(2, 36, 80, .12);
  --eskc-shadow-lg: 0 18px 40px -12px rgba(2, 36, 80, .18);
  --eskc-shadow-focus: 0 0 0 3px rgba(231, 111, 81, .32);

  --eskc-ease-out: cubic-bezier(.16, 1, .3, 1);
  --eskc-ease-std: cubic-bezier(.2, .7, .2, 1);

  --eskc-max: 1280px;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--eskc-font-sans);
  color: var(--eskc-grey-800);
}
.eskc *,
.eskc *::before,
.eskc *::after { box-sizing: border-box; }

.eskc__inner {
  position: relative;
  z-index: 1;
  max-width: var(--eskc-max);
  margin: 0 auto;
  padding: 0;
}

.eskc .eskc-ic { display: block; flex: 0 0 auto; }

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

/* ============================================================
   1. Heading
   ============================================================ */

/* The site header is a fixed transparent overlay, so a page-opening heading
   needs its own clearance. Admin-set via --eskc-pad-top. */
.eskc-head { padding-top: var(--eskc-pad-top, 120px); }
.eskc-head.is-center { text-align: center; }
.eskc-head.is-left { text-align: left; }

/* The parent theme sets heading font-size/family with !important, so every
   type property in this suite is forced to win against it. */
.eskc .eskc-head__title {
  margin: 0 !important;
  font-weight: 700 !important;
  color: var(--eskc-ink) !important;
  text-transform: none !important;
  overflow-wrap: break-word;
}

/* --- heading font --- */
/* Site brand face, the same one every other ESK display heading uses. */
.eskc-head.font-site .eskc-head__title,
.eskc-head.font-site .eskc-head__title .esk-wc {
  font-family: 'niveaugroteskregular', 'Sora', system-ui, sans-serif !important;
}
/* the alternate: the site body face, for headings that should read quieter */
.eskc-head.font-sora .eskc-head__title,
.eskc-head.font-sora .eskc-head__title .esk-wc {
  font-family: var(--eskc-font-sans) !important;
}

/* --- heading size --- */
/* `display` borrows the site-wide token from esk-tokens.css, so this heading
   matches the other pages and follows the same mobile step-down. The literal
   fallbacks keep it correct if the token stylesheet is not on the page. */
/* The site's display tier is always set in caps, so the biggest size follows
   that rule rather than leaving it to whatever the admin typed. */
.eskc-head.size-display .eskc-head__title {
  font-size: var(--esk-display, clamp(72px, 10vw, 160px)) !important;
  line-height: var(--esk-display-lh, 0.88) !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
}
.eskc-head.size-xl .eskc-head__title {
  font-size: clamp(38px, 10.5vw, 74px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
}
.eskc-head.size-lg .eskc-head__title {
  font-size: clamp(32px, 6vw, 48px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
}
@media (max-width: 767px) {
  .eskc-head.size-display .eskc-head__title {
    font-size: var(--esk-display, clamp(36px, 10.4vw, 54px)) !important;
    line-height: 0.95 !important;
  }
}

/* --- per-word colours (site-wide esk_word_colors picker) --- */
/* Driven by the element's own Style-tab pickers, so accent/ink stay in sync
   with the rest of the suite. -webkit-text-fill-color is set too: the shimmer
   rules below use background-clip:text, and a stale fill would hide the word. */
.eskc .eskc-head__title .esk-wc--blue {
  color: var(--eskc-ink) !important;
  -webkit-text-fill-color: var(--eskc-ink) !important;
}
.eskc .eskc-head__title .esk-wc--orange {
  color: var(--eskc-accent) !important;
  -webkit-text-fill-color: var(--eskc-accent) !important;
}
.eskc .eskc-head__accent { color: var(--eskc-accent) !important; -webkit-text-fill-color: var(--eskc-accent) !important; }

.eskc .eskc-head__sub {
  /* no top margin — the display heading's 0.88 line-height already leaves
     enough optical space under it */
  margin: 0 !important;
  font-family: var(--eskc-font-display) !important;
  font-weight: 600 !important;
  /* 34px to match the shimmer sub-lines on the other elements. Clamped rather
     than a flat 34px so it steps down on phones instead of overflowing. */
  font-size: clamp(20px, 2.6vw, 34px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.018em !important;
  color: var(--eskc-ink) !important;
}
.eskc-head.font-site .eskc-head__sub {
  font-family: 'niveaugroteskregular', 'Sora', system-ui, sans-serif !important;
}

/* --- sub-line shimmer --- */
/* Same sweep as Why Choose (.eskw__t2) and the CTA support line: base-colour
   text with an accent band drifting through it every 6s. */
.eskc .eskc-head__sub.is-shimmer {
  background-image: linear-gradient(100deg,
      var(--eskc-ink) 0%,
      var(--eskc-ink) 42%,
      var(--eskc-accent) 50%,
      var(--eskc-ink) 58%,
      var(--eskc-ink) 100%) !important;
  background-size: 300% auto !important;
  background-position: 0% 50%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: eskc-grad 6s ease-in-out infinite !important;
}
@keyframes eskc-grad {
  0% { background-position: 0% 50%; }
  75%, 100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .eskc .eskc-head__sub.is-shimmer {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--eskc-ink) !important;
    color: var(--eskc-ink) !important;
  }
}

.eskc .eskc-head__desc {
  margin: 14px 0 0 !important;
  font-family: var(--eskc-font-sans) !important;
  font-size: clamp(14.5px, 3.7vw, 16px) !important;
  line-height: 1.62 !important;
  color: var(--eskc-grey-600) !important;
  text-wrap: pretty;
}
.eskc-head.is-center .eskc-head__desc { margin-left: auto; margin-right: auto; }

/* --- drifting backdrop --- */

.eskc-head__deco {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.eskc-deco { position: absolute; display: block; }

.eskc-deco--dots {
  top: 18px; left: 8px; width: 152px; height: 92px;
  background-image: radial-gradient(circle, #C9D6E6 1.6px, transparent 1.7px);
  background-size: 19px 19px;
  opacity: .75;
  animation: eskc-float-b 13s ease-in-out infinite;
}
.eskc-deco--hexL { top: 120px; left: -108px; opacity: .55; animation: eskc-float-hex 11s ease-in-out infinite; }
.eskc-deco--rings { top: 400px; left: -232px; opacity: .75; animation: eskc-float-c 16s ease-in-out infinite; }
.eskc-deco--pill {
  top: 104px; right: -130px; width: 290px; height: 86px;
  border-radius: 999px;
  background: var(--eskc-accent-200);
  transform: rotate(-40deg);
  animation: eskc-drift 14s ease-in-out infinite, eskc-breathe 6.5s ease-in-out infinite;
}
.eskc-deco--hexR { top: 20px; right: 34px; opacity: .9; animation: eskc-float-hex 9.5s ease-in-out infinite 1.2s; }
.eskc-deco--ring-sm { top: -4px; right: 46px; animation: eskc-float-a 8s ease-in-out infinite .6s; }
.eskc-deco--lines { top: -10px; right: -40px; opacity: .85; animation: eskc-float-b 15s ease-in-out infinite; }

@media (max-width: 900px) {
  .eskc-deco--rings, .eskc-deco--hexL { display: none; }
  .eskc-deco--pill { right: -190px; }
}

@keyframes eskc-float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-10px, -26px, 0); } }
@keyframes eskc-float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(22px, 18px, 0); } }
@keyframes eskc-float-c { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-26px, 16px, 0); } }
@keyframes eskc-float-hex { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-6px, -22px, 0) rotate(6deg); } }
@keyframes eskc-drift { 0%, 100% { transform: rotate(-40deg) translate3d(0, 0, 0); } 50% { transform: rotate(-40deg) translate3d(-34px, 20px, 0); } }
@keyframes eskc-breathe { 0%, 100% { opacity: .18; } 50% { opacity: .44; } }

@keyframes eskc-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes eskc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eskc-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes eskc-spin { to { transform: rotate(360deg); } }

.eskc-anim .eskc-head__title { animation: eskc-rise 620ms var(--eskc-ease-out) backwards; }
.eskc-anim .eskc-head__sub { animation: eskc-rise 620ms var(--eskc-ease-out) 90ms backwards; }
.eskc-anim .eskc-head__desc { animation: eskc-rise 620ms var(--eskc-ease-out) 170ms backwards; }

/* ============================================================
   2. Form panel
   ============================================================ */

.eskc-form { padding-top: clamp(24px, 4vw, 38px); }

.eskc-panel {
  background: var(--eskc-white);
  border: 1px solid var(--eskc-grey-200);
  border-radius: var(--eskc-radius-panel);
  box-shadow: var(--eskc-shadow-lg);
  padding: clamp(20px, 4.5vw, 32px) clamp(18px, 4.5vw, 36px) clamp(24px, 5vw, 36px);
}
.eskc-anim.eskc-form .eskc-panel { animation: eskc-rise 700ms var(--eskc-ease-out) 240ms backwards; }

.eskc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 22px;
  align-items: start;
}
.eskc-field { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.eskc-field.is-full { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .eskc-grid { grid-template-columns: 1fr; }
}

.eskc-field__head { display: flex; align-items: baseline; gap: 5px; }
.eskc .eskc-field__num { font-size: 14px; font-weight: 600; color: var(--eskc-accent) !important; }
.eskc .eskc-field__label {
  margin: 0 !important;
  font-family: var(--eskc-font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--eskc-ink) !important;
  text-transform: none !important;
}
.eskc .eskc-field__req { color: var(--eskc-accent) !important; margin-left: 2px; }

/* --- controls --- */

.eskc-control { position: relative; display: flex; align-items: center; }
.eskc-control.is-area { align-items: flex-start; }

/* The field glyph sits in a soft accent chip rather than floating as a thin
   grey stroke — it carries brand colour and reads as deliberate at small size.
   The chip tints further on focus and turns red when the field errors. */
.eskc-control__ic {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--eskc-accent-050);
  color: var(--eskc-accent-600);
  pointer-events: none;
  z-index: 1;
  transition: background-color 160ms var(--eskc-ease-std), color 160ms var(--eskc-ease-std);
}
.eskc-control.is-area .eskc-control__ic { top: 9px; transform: none; }

.eskc-control:focus-within .eskc-control__ic {
  background: var(--eskc-accent-200);
  color: var(--eskc-accent-700, #A8422B);
}
.eskfrm__field.has-error .eskc-control__ic {
  background: #FBECE9;
  color: var(--eskc-danger);
}

.eskc-control__caret {
  position: absolute;
  right: 15px;
  display: flex;
  color: var(--eskc-grey-500);
  pointer-events: none;
}

/* phone with the country picker: the two controls share one bordered frame */
.eskc-control.has-cc {
  background: var(--eskc-white);
  border: 1px solid var(--eskc-grey-300);
  border-radius: var(--eskc-radius-field);
  transition: border-color 160ms var(--eskc-ease-std), box-shadow 160ms var(--eskc-ease-std);
}
.eskc-control.has-cc:focus-within {
  border-color: var(--eskc-ink);
  box-shadow: 0 0 0 3px rgba(2, 36, 80, .18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eskc-ink) 22%, transparent);
}
.eskc-control__rule { flex: 0 0 auto; width: 1px; height: 24px; background: var(--eskc-grey-200); }
.eskc .eskc-input.has-cc {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 16px !important;   /* no chip here — the flag picker leads */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.eskc .eskc-input.has-cc:focus { box-shadow: none !important; }
.eskc-control.has-cc .eskc-control__ok { right: 12px; }

.eskc .eskc-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 46px;
  min-height: 46px;
  margin: 0 !important;
  padding: 0 42px 0 52px !important;   /* left clears the icon chip */
  font-family: var(--eskc-font-sans) !important;
  font-size: 15px;
  line-height: 1.4;
  color: var(--eskc-ink) !important;
  background: var(--eskc-white) !important;
  border: 1px solid var(--eskc-grey-300) !important;
  border-radius: var(--eskc-radius-field) !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color 160ms var(--eskc-ease-std), box-shadow 160ms var(--eskc-ease-std);
}
.eskc .eskc-input::placeholder { color: var(--eskc-grey-400); opacity: 1; }

.eskc .eskc-textarea {
  height: auto;
  min-height: 118px;
  padding: 14px 16px 14px 52px !important;
  line-height: 1.6;
  resize: vertical;
}
.eskc .eskc-select { cursor: pointer; }
.eskc .eskc-select[data-empty="1"] { color: var(--eskc-grey-400) !important; }

.eskc .eskc-input:hover { border-color: var(--eskc-grey-400) !important; }
/* Focus is navy, not terracotta: the accent is reserved for the single most
   important action on the view (the submit button). */
.eskc .eskc-input:focus,
.eskc .eskc-input:focus-visible {
  border-color: var(--eskc-ink) !important;
  box-shadow: 0 0 0 3px rgba(2, 36, 80, .18) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eskc-ink) 22%, transparent) !important;
}

/* green tick once a text field validates, as in the comp */
.eskc-control__ok {
  position: absolute;
  right: 14px;
  display: none;
  color: var(--eskc-success);
  animation: eskc-pop 280ms var(--eskc-ease-out) backwards;
}
.eskc-control.is-valid .eskc-control__ok { display: flex; }
.eskc-control.is-valid .eskc-input { padding-right: 40px !important; }

/* --- errors --- */

.eskc .eskc-err {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--eskc-danger) !important;
  display: none;
}
.eskfrm__field.has-error .eskc-err { display: block; }
.eskfrm__field.has-error .eskc-input { border-color: var(--eskc-danger) !important; }
.eskfrm__field.has-error .eskc-err::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 14px; height: 14px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--eskc-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: -2px;
}
.eskfrm__field.has-error .eskc-check { outline: 2px solid var(--eskc-danger); outline-offset: 2px; }

.eskc .eskc-formerr {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--eskc-danger) !important;
  display: none;
}
.eskfrm__form.has-formerror .eskc-formerr { display: block; }

/* --- honeypot --- */

.eskc .eskfrm__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- consent --- */

.eskc-consent { margin-top: 26px; }
.eskc-consent__row { display: flex; align-items: flex-start; gap: 12px; }

.eskc .eskc-check {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  min-height: 0;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  background: var(--eskc-white) !important;
  border: 1px solid var(--eskc-grey-300) !important;
  border-radius: 5px !important;
  cursor: pointer;
  position: relative;
  transition: background-color 160ms var(--eskc-ease-std), border-color 160ms var(--eskc-ease-std);
}
.eskc .eskc-check:checked {
  background: var(--eskc-accent) !important;
  border-color: var(--eskc-accent) !important;
  outline: none !important;
}
.eskc .eskc-check:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.eskc .eskc-check:focus-visible {
  box-shadow: 0 0 0 3px rgba(2, 36, 80, .18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eskc-ink) 22%, transparent);
  outline: none;
}

.eskc .eskc-consent__link {
  color: var(--eskc-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: color 160ms var(--eskc-ease-std);
}
.eskc .eskc-consent__link:hover { color: var(--eskc-accent) !important; }

.eskc .eskc-consent__text {
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.56;
  font-weight: 400;
  color: var(--eskc-grey-800) !important;
  width: 100%;
  text-wrap: pretty;
  cursor: pointer;
}

/* --- submit --- */

/* captcha widget — the provider renders its own iframe inside */
.eskcap { margin-top: 20px; max-width: 340px; }
.eskcap:empty { display: none; }
.eskpop .eskcap { margin-top: 18px; max-width: none; }
@media (max-width: 620px) {
  .eskcap { max-width: none; }
}

.eskc-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 30px;
}
.eskc .eskc-formerr { text-align: right; }

/* Same DNA as the site-wide footer CTA (.esk-footer-cta-btn): coral, 15px/600,
   14px 28px, 8px radius, a 1px lift on hover with the background unchanged,
   and the circled arrow sliding 4px. Font-family is deliberately not forced so
   it inherits the theme face, exactly as the footer button does. */
.eskc .eskc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background-color: var(--eskc-accent) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}
.eskc .eskc-btn:hover:not(:disabled),
.eskc .eskc-btn:focus:not(:disabled) {
  background-color: var(--eskc-accent) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.eskc .eskc-btn:focus-visible { outline: 2px solid var(--eskc-ink); outline-offset: 3px; }
.eskc .eskc-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.eskc .eskc-btn__ic {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.eskc .eskc-btn:hover:not(:disabled) .eskc-btn__ic { transform: translateX(4px); }

/* Sending: the arrow gives up its slot to the spinner, so the button keeps
   its width instead of jumping. */
.eskc-spinner {
  display: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: eskc-spin .7s linear infinite;
}
.eskfrm__form.is-sending .eskc-btn { pointer-events: none; }
.eskfrm__form.is-sending .eskc-spinner { display: block; }
.eskfrm__form.is-sending .eskc-btn__ic { display: none; }

.eskc .eskc-noscript { margin: 14px 0 0; font-size: 14px; color: var(--eskc-grey-600) !important; }

/* --- success --- */

.eskc-done { text-align: center; padding: clamp(20px, 4vw, 30px) 0; animation: eskc-pop 360ms var(--eskc-ease-out) backwards; }
.eskc-done[hidden] { display: none !important; }
.eskc-done__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--eskc-success-050);
  border: 1px solid #BFE2D6;
  color: var(--eskc-success);
}
.eskc .eskc-done__title {
  margin: 0 0 8px !important;
  font-family: var(--eskc-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(20px, 4.4vw, 26px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--eskc-ink) !important;
  text-transform: none !important;
}
.eskc .eskc-done__text {
  margin: 0 !important;
  font-family: var(--eskc-font-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: var(--eskc-grey-600) !important;
}

/* ============================================================
   2b. Form variants

   Same element, same engine — only the skin changes.

   .eskc-form--panel  the contact-page card: white panel, boxed
                      outlined fields, two columns.
   .eskc-form--soft   the in-page/sidebar form used on the service
                      and landing pages: grey filled fields, labels
                      above with optional hints, one column, and an
                      outlined button.
   ============================================================ */

/* column count is a modifier, so either variant can run 1 or 2 up */
.eskc-form.is-cols-1 .eskc-grid { grid-template-columns: minmax(0, 1fr); }
.eskc-form.is-cols-1 .eskc-field.is-half { grid-column: 1 / -1; }

/* optional narrower measure, set per element */
.eskc-form .eskc__inner { max-width: var(--eskc-form-max, var(--eskc-max)); }

/* button alignment */
.eskc-form.btn-left   .eskc-actions { align-items: flex-start; }
.eskc-form.btn-center .eskc-actions { align-items: center; }
.eskc-form.btn-right  .eskc-actions { align-items: flex-end; }
.eskc-form.btn-full   .eskc-actions { align-items: stretch; }
.eskc-form.btn-full .eskc-btn { width: 100%; }
.eskc-form.btn-left   .eskc-formerr { text-align: left; }
.eskc-form.btn-center .eskc-formerr { text-align: center; }
.eskc-form.btn-full   .eskc-formerr { text-align: center; }

/* helper line under a field */
.eskc .eskc-help {
  margin: 0 !important;
  font-family: var(--eskc-font-sans) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--eskc-grey-600) !important;
}

/* --- soft variant --- */

.eskc-form--soft .eskc-panel {
  border-radius: var(--eskc-radius-card);
  box-shadow: var(--eskc-shadow-sm);
  padding: clamp(20px, 3.5vw, 30px);
}
.eskc-form--soft .eskc-grid { column-gap: 20px; row-gap: 20px; }
.eskc-form--soft .eskc-field { gap: 8px; }

.eskc-form--soft .eskc-field__label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--eskc-ink) !important;
}
.eskc-form--soft .eskc-field__req { color: var(--eskc-danger) !important; }

/* one field per line — this design is for narrow columns and sidebars */
.eskc-form--soft .eskc-grid { grid-template-columns: minmax(0, 1fr); }
.eskc-form--soft .eskc-field.is-half { grid-column: 1 / -1; }

/* white controls with a hairline, not a grey fill */
.eskc-form--soft .eskc-input {
  height: 50px;
  min-height: 50px;
  padding: 0 16px 0 52px !important;   /* left clears the icon chip */
  background: var(--eskc-white) !important;
  border: 1px solid var(--eskc-grey-300) !important;
  border-radius: 6px !important;
  font-size: 15px;
}
.eskc-form--soft .eskc-textarea {
  height: auto;
  min-height: 118px;
  padding: 14px 16px 14px 52px !important;
}
/* the phone control has the country picker in place of a chip */
.eskc-form--soft .eskc-control.has-cc .eskc-input { padding-left: 16px !important; }
.eskc-form--soft .eskc-select { padding-right: 42px !important; }

.eskc-form--soft .eskc-input:hover { border-color: var(--eskc-grey-400) !important; }
.eskc-form--soft .eskc-input:focus,
.eskc-form--soft .eskc-input:focus-visible { border-color: var(--eskc-ink) !important; }

/* the phone frame matches the other controls */
.eskc-form--soft .eskc-control.has-cc {
  background: var(--eskc-white);
  border-color: var(--eskc-grey-300);
  border-radius: 6px;
}
.eskc-form--soft .eskc-control.has-cc .eskc-input { height: 48px; min-height: 48px; }

.eskc-form--soft .eskc-consent { margin-top: 22px; }
.eskc-form--soft .eskc-consent__text { font-size: 14px !important; }

/* --- outlined button --- */

.eskc .eskc-btn--outline {
  background-color: transparent !important;
  color: var(--eskc-ink) !important;
  border: 1px solid var(--eskc-accent) !important;
  box-shadow: none !important;
}
.eskc .eskc-btn--outline .eskc-btn__ic { color: var(--eskc-accent); }
.eskc .eskc-btn--outline:hover:not(:disabled),
.eskc .eskc-btn--outline:focus:not(:disabled) {
  background-color: var(--eskc-accent) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.eskc .eskc-btn--outline:hover:not(:disabled) .eskc-btn__ic { color: #fff; }
/* the looping shine is for filled buttons only — it is invisible on a
   transparent one and would flash oddly on hover */
.eskc .eskc-btn--outline::after { display: none !important; }

/* ============================================================
   3. Discovery CTA
   ============================================================ */

.eskc-disc { padding-top: 26px; }

.eskc-disc__card {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--eskc-white);
  border: 1px solid var(--eskc-grey-200);
  border-radius: var(--eskc-radius-panel);
  box-shadow: var(--eskc-shadow-md);
  padding: clamp(18px, 4vw, 26px) clamp(18px, 4vw, 32px);
  transition: transform 240ms var(--eskc-ease-std), box-shadow 240ms var(--eskc-ease-std);
}
.eskc-disc__card:hover { transform: translateY(-3px); box-shadow: var(--eskc-shadow-lg); }

.eskc-disc__icon {
  position: relative;
  flex: 0 0 auto;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--eskc-accent-050);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eskc-ink);
}
.eskc-disc__badge {
  position: absolute;
  right: 8px; bottom: 6px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--eskc-white);
  border: 1px solid var(--eskc-accent-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eskc-accent);
}

.eskc-disc__body { flex: 1 1 auto; min-width: 0; }
.eskc .eskc-disc__title {
  margin: 0 0 6px !important;
  font-family: var(--eskc-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(19px, 4.6vw, 23px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.022em !important;
  color: var(--eskc-ink) !important;
  text-transform: none !important;
}
.eskc .eskc-disc__text {
  margin: 0 !important;
  font-family: var(--eskc-font-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  color: var(--eskc-grey-600) !important;
  max-width: 330px;
  text-wrap: pretty;
}

.eskc-disc__rule { flex: 0 0 auto; width: 1px; height: 76px; background: var(--eskc-grey-200); }
.eskc-disc__cta { flex: 0 0 auto; }

@media (max-width: 700px) {
  .eskc-disc__card { flex-wrap: wrap; gap: 16px; text-align: left; }
  .eskc-disc__icon { width: 64px; height: 64px; }
  .eskc-disc__icon .eskc-ic { width: 32px; height: 32px; }
  .eskc-disc__badge { width: 24px; height: 24px; right: 2px; bottom: 0; }
  .eskc-disc__badge .eskc-ic { width: 14px; height: 14px; }
  .eskc-disc__rule { display: none; }
  .eskc-disc__cta { flex: 1 1 100%; }
  .eskc .eskc-btn--link { width: 100%; }
}

/* ============================================================
   4. Offices
   ============================================================ */

.eskc-off { padding-top: 56px; }
.eskc-off__head { text-align: center; }
.eskc .eskc-off__title {
  margin: 0 !important;
  font-family: var(--eskc-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 6vw, 31px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.024em !important;
  color: var(--eskc-ink) !important;
  text-transform: none !important;
}
.eskc-off__rule {
  display: block;
  width: 52px; height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--eskc-accent);
}

.eskc-off__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

/* Column layout so the cards can align internally, not just match in height:
   addresses run to one or two lines depending on the office, which would
   otherwise leave each card's divider and contact rows at a different y. */
.eskc-off__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--eskc-white);
  border: 1px solid var(--eskc-grey-200);
  border-radius: var(--eskc-radius-card);
  box-shadow: var(--eskc-shadow-sm);
  padding: 16px 18px 20px;
  transition: transform 240ms var(--eskc-ease-std), box-shadow 240ms var(--eskc-ease-std), border-color 240ms var(--eskc-ease-std);
}
.eskc-off__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--eskc-shadow-lg);
  border-color: #F6B4A2;
}

.eskc-off__art {
  display: block;
  color: var(--eskc-ink);
  opacity: .82;
  transition: transform 500ms var(--eskc-ease-std), opacity 400ms var(--eskc-ease-std);
}
.eskc .eskc-off__img { width: 100%; height: 128px; object-fit: contain; display: block; }

/* --- ambient motion ---------------------------------------------------
   Three quiet layers: clouds drift, a few windows light up, and the whole
   skyline lifts a little further than its card on hover. All slow and
   low-contrast — the section should feel alive, not busy. */

.eskc-off__cloud {
  animation: eskc-cloud 20s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.eskc-off__cloud.is-b { animation-duration: 27s; animation-direction: reverse; }
.eskc-off__card:nth-child(2) .eskc-off__cloud { animation-duration: 24s; }
.eskc-off__card:nth-child(3) .eskc-off__cloud { animation-duration: 31s; }

@keyframes eskc-cloud {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(12px); }
}

.eskc-off__lite {
  fill: var(--eskc-accent);
  opacity: 0;
  animation: eskc-lite 5.5s ease-in-out infinite;
}
.eskc-off__lite:nth-child(1) { animation-delay: .2s; }
.eskc-off__lite:nth-child(2) { animation-delay: 1.4s; }
.eskc-off__lite:nth-child(3) { animation-delay: 2.6s; }
.eskc-off__lite:nth-child(4) { animation-delay: 3.4s; }
.eskc-off__lite:nth-child(5) { animation-delay: 4.3s; }

@keyframes eskc-lite {
  0%, 100%  { opacity: 0; }
  35%, 60%  { opacity: .9; }
}

/* hover: the art rides above the card's own lift, and the lights quicken */
.eskc-off__card:hover .eskc-off__art { transform: translateY(-4px); opacity: 1; }
.eskc-off__card:hover .eskc-off__lite { animation-duration: 2.2s; }

@media (prefers-reduced-motion: reduce) {
  .eskc-off__cloud { animation: none !important; }
  .eskc-off__lite { animation: none !important; opacity: .55; }
  .eskc-off__card:hover .eskc-off__art { transform: none; }
}

.eskc .eskc-off__name {
  margin: 12px 0 4px !important;
  text-align: center;
  font-family: var(--eskc-font-display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.24 !important;
  letter-spacing: -0.018em !important;
  color: var(--eskc-ink) !important;
  text-transform: none !important;
}
.eskc .eskc-off__city {
  /* the gap above the divider lives here: the divider's own top margin is
     `auto`, which collapses to nothing on a card with no spare height */
  margin: 0 0 18px !important;
  text-align: center;
  font-family: var(--eskc-font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: var(--eskc-grey-600) !important;
  /* two lines reserved: the longest address needs them, and holding the space
     on the shorter ones keeps every divider on the same line */
  min-height: 3em;
}

/* margin-top:auto pins the divider and the contact rows to the bottom, so they
   stay aligned even if an address ever runs past two lines */
.eskc-off__sep { height: 1px; background: var(--eskc-grey-200); margin: auto 0 16px; }

/* artwork + office name only: no reserved address line and no rule, so the
   card is given its height back through padding and the name is set well
   clear of the skyline rather than crowding it */
.eskc-off__card.is-compact { padding: 30px 20px 34px; }
.eskc-off__card.is-compact .eskc-off__art { margin-bottom: 10px; }
.eskc-off__card.is-compact .eskc-off__name { margin: 26px 0 0 !important; }
.eskc-off__card.is-compact .eskc-off__city { min-height: 0; margin-bottom: 0 !important; }

.eskc-off__lines { display: flex; flex-direction: column; gap: 14px; }
.eskc-off__line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eskc-off__dot {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--eskc-ink);
  color: var(--eskc-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eskc .eskc-off__line a {
  font-size: 15px;
  color: var(--eskc-ink) !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  transition: color 160ms var(--eskc-ease-std);
}
.eskc .eskc-off__line a:hover { color: var(--eskc-accent) !important; }

/* the comp's phone layout: art to the left, text stacked right */
@media (max-width: 700px) {
  .eskc-off__grid { grid-template-columns: 1fr; }
  .eskc-off__card {
    display: grid;
    /* the comp uses 38% for the art; 30% here so long addresses stop
       breaking mid-word in the text column */
    grid-template-columns: 30% 1px 1fr;
    column-gap: 14px;
    row-gap: 5px;
    padding: 14px 16px;
  }
  .eskc .eskc-off__line a { font-size: 14px; }
  .eskc-off__card::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 5;
    width: 1px;
    height: 100%;
    background: var(--eskc-grey-200);
  }
  .eskc-off__art { grid-column: 1; grid-row: 1 / span 5; align-self: center; height: auto; }
  .eskc-off__card > *:not(.eskc-off__art) { grid-column: 3; text-align: left; margin: 0; }
  .eskc-off__name, .eskc-off__city { text-align: left !important; }
  /* the phone layout stacks its own way — no reserved line box, no auto push */
  .eskc .eskc-off__city { min-height: 0; margin-bottom: 0 !important; }
  .eskc-off__sep { margin: 7px 0; }
}

/* ============================================================
   Styled select (shared by every form)

   The native <select> keeps the value and stays in the DOM for
   validation and no-JS submission; this is the visible control.
   ============================================================ */

/* the real select, hidden but still submitted */
.has-fs .eskfrm__select {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.eskc .eskfs__btn {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font-weight: 400 !important;
  text-transform: none !important;
}
.eskfs__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eskfs__val.is-placeholder { color: var(--eskc-grey-400); }

/* the caret already sits in the field wrapper — just turn it on open */
.has-fs.is-open .eskc-control__caret,
.has-fs.is-open .eskpop__caret { transform: translateY(-50%) rotate(180deg); }
.eskc-control__caret, .eskpop__caret { transition: transform 180ms var(--eskc-ease-std); }
.eskc-control .eskc-control__caret { top: 50%; transform: translateY(-50%); }

.eskfs__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--eskc-white);
  border: 1px solid var(--eskc-grey-200);
  border-radius: 12px;
  box-shadow: var(--eskc-shadow-lg);
  overflow: hidden;
  animation: eskfs-drop 180ms var(--eskc-ease-out) backwards;
}
.eskfs__panel[hidden] { display: none; }

@keyframes eskfs-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.eskfs__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.eskfs__opt {
  position: relative;
  display: flex;
  align-items: center;
  padding: 11px 14px 11px 38px;
  border-radius: 8px;
  font-family: var(--eskc-font-sans);
  font-size: 15px;
  color: var(--eskc-grey-800);
  cursor: pointer;
  transition: background-color 140ms var(--eskc-ease-std), color 140ms var(--eskc-ease-std);
}
/* a dot that grows into a tick on the chosen row */
.eskfs__opt::before {
  content: "";
  position: absolute;
  left: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--eskc-grey-300);
  transition: background-color 140ms var(--eskc-ease-std), transform 140ms var(--eskc-ease-std);
}
.eskfs__opt:hover,
.eskfs__opt.is-active {
  background: var(--eskc-accent-050);
  color: var(--eskc-ink);
}
.eskfs__opt:hover::before,
.eskfs__opt.is-active::before { background: var(--eskc-accent-300, #F6B4A2); }

.eskfs__opt.is-on {
  background: var(--eskc-accent-050);
  color: var(--eskc-ink);
  font-weight: 600;
}
.eskfs__opt.is-on::before {
  background: var(--eskc-accent);
  transform: scale(1.25);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eskc-accent) 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .eskfs__panel { animation: none; }
}

/* ============================================================
   Country dial-code picker (shared by the contact form and the
   Book a Meeting popup).

   The <select> is the source of truth and stays in the DOM. With
   JS it is hidden behind a searchable dropdown; without JS it is
   an ordinary, fully working select.
   ============================================================ */

.eskcc { position: relative; display: flex; align-items: center; flex: 0 0 auto; }

.eskcc .eskcc__native {
  -webkit-appearance: none;
  appearance: none;
  max-width: 132px;
  height: 44px;
  margin: 0 !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  font-family: var(--eskc-font-sans) !important;
  font-size: 15px;
  color: var(--eskc-ink) !important;
  cursor: pointer;
}
/* once enhanced the native control is hidden from sight but still submitted */
.eskcc.is-enhanced .eskcc__native {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0 !important;
}

.eskcc .eskcc__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 12px 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--eskc-ink) !important;
  font-family: var(--eskc-font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.eskcc .eskcc__btn:hover { background: transparent !important; }
.eskcc .eskcc__btn:focus-visible { outline: 2px solid var(--eskc-ink); outline-offset: -2px; }
.eskcc__flag { font-size: 17px; line-height: 1; }
.eskcc__code { font-variant-numeric: tabular-nums; }
.eskcc__caret { display: flex; color: var(--eskc-grey-500); }

/* --- dropdown --- */

.eskcc__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 300px;
  max-width: 78vw;
  background: var(--eskc-white);
  border: 1px solid var(--eskc-grey-200);
  border-radius: 12px;
  box-shadow: var(--eskc-shadow-lg);
  overflow: hidden;
}
.eskcc__panel[hidden] { display: none; }

.eskcc .eskcc__search {
  display: block;
  width: 100% !important;
  height: 42px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--eskc-grey-200) !important;
  border-radius: 0 !important;
  background: var(--eskc-white) !important;
  box-shadow: none !important;
  outline: none;
  font-family: var(--eskc-font-sans) !important;
  font-size: 14.5px;
  color: var(--eskc-ink) !important;
}
.eskcc .eskcc__search::placeholder { color: var(--eskc-grey-400); }

.eskcc__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.eskcc__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14.5px;
  color: var(--eskc-grey-800);
  cursor: pointer;
}
.eskcc__item:hover,
.eskcc__item.is-active { background: var(--eskc-paper); }
.eskcc__item.is-on { background: var(--eskc-accent-050); color: var(--eskc-ink); font-weight: 600; }
.eskcc__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eskcc__dial { flex: 0 0 auto; color: var(--eskc-grey-500); font-variant-numeric: tabular-nums; }
.eskcc__none { padding: 14px; text-align: center; color: var(--eskc-grey-500); font-size: 14px; }

@media (max-width: 620px) {
  .eskcc__panel { width: 260px; }
}

/* ============================================================
   Scroll reveal (driven by esk-contact.js)
   ============================================================ */

.eskc [data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(22px);
}
.eskc [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--eskc-ease-out), transform 620ms var(--eskc-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .eskc *,
  .eskc *::before,
  .eskc *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .eskc [data-reveal].is-hidden { opacity: 1; transform: none; }
  .eskc-disc__card:hover, .eskc-off__card:hover { transform: none; }
}