/* ==========================================================================
   Everwell Solutions — site styles

   MOBILE FIRST. The base rules below are the phone layout. Every media query
   is min-width and only ADDS to it — there are no max-width overrides. Reading
   top to bottom gives you the small screen; each breakpoint widens it.

   Breakpoints:
     768px  — content grids go multi-column
     960px  — nav goes horizontal, hero splits in two, process bars animate

   All rules namespaced under .ews-site / .ews-* so nothing leaks into or is
   overridden by styles loaded around it. No bare tag selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --ews-navy:        #0f1e3d;
  --ews-navy-deep:   #0a1730;
  --ews-navy-soft:   #1b2f56;
  --ews-blue:        #1f4e8c;
  --ews-blue-light:  #4a7fc1;
  --ews-accent:      #d9a441;   /* gold — ALWAYS pair with navy text, never white */
  --ews-accent-deep: #b8862c;
  --ews-accent-tint: #f7edd8;
  --ews-gray:        #4a5568;
  --ews-gray-light:  #7b8598;
  /* Warm off-white, pulled from the gold rather than introduced as a new hue.
     Cool grays read colder than this brand wants to feel. */
  --ews-light:       #fbf8f3;
  --ews-line:        #ece5da;
  --ews-white:       #ffffff;

  /* Type */
  --ews-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ews-font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout — phone values */
  --ews-max:       1140px;
  --ews-gutter:    20px;
  --ews-section:   68px;
  --ews-radius:    10px;
  --ews-radius-lg: 20px;
  /* Nav height is a token because the sticky header would otherwise cover the
     top of whatever an anchor link jumps to. scroll-padding-top below keeps
     the two in step — change the height here, not in the nav rules. */
  --ews-nav-h:     72px;

  /* Depth */
  --ews-shadow-sm: 0 1px 2px rgba(15, 30, 61, 0.06), 0 2px 8px rgba(15, 30, 61, 0.04);
  --ews-shadow-md: 0 4px 12px rgba(15, 30, 61, 0.08), 0 12px 32px rgba(15, 30, 61, 0.07);
  --ews-shadow-lg: 0 8px 24px rgba(15, 30, 61, 0.12), 0 24px 64px rgba(15, 30, 61, 0.12);

  --ews-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --ews-gutter: 24px;
    --ews-section: 104px;
  }
}

/* The wordmark is a wide 6.3:1 lockup, so it can only grow once the nav has
   room for it beside the links and the CTA. */
@media (min-width: 960px) {
  :root {
    --ews-nav-h: 96px;
  }
}

/* The one property that cannot be namespaced: only the scrolling element can
   offset an anchor jump, and every nav link is an in-page anchor. Without it
   the sticky header sits on top of each section heading you land on. */
:root {
  scroll-padding-top: calc(var(--ews-nav-h) + 12px);
}

/* --------------------------------------------------------------------------
   2. Base — scoped to the site wrapper only
   -------------------------------------------------------------------------- */

.ews-site {
  font-family: var(--ews-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ews-gray);
  background: var(--ews-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* :where() zeroes this rule's specificity so component classes like
   .ews-nav__logo can still set an explicit height. */
:where(.ews-site) img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ews-site :focus-visible {
  outline: 3px solid var(--ews-blue-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.ews-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ews-navy);
  color: var(--ews-white);
  font-family: var(--ews-font-body);
  font-weight: 600;
  text-decoration: none;
}

.ews-skip-link:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

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

.ews-section {
  padding-block: var(--ews-section);
}

.ews-section--light { background: var(--ews-light); }
.ews-section--navy  { background: var(--ews-navy); color: rgba(255, 255, 255, 0.78); }
.ews-section--tight { padding-block: calc(var(--ews-section) * 0.62); }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

/* The eyebrow echoes the wordmark's letterspaced small caps. Used as the
   structural marker throughout instead of decorative numbering. */
.ews-eyebrow {
  display: block;
  margin: 0 0 18px;
  font-family: var(--ews-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ews-accent-deep);
}

.ews-eyebrow--onDark { color: var(--ews-accent); }

.ews-display {
  margin: 0 0 20px;
  font-family: var(--ews-font-display);
  font-weight: 600;
  font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ews-navy);
}

.ews-h2 {
  margin: 0 0 18px;
  font-family: var(--ews-font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--ews-navy);
}

.ews-h2--onDark { color: var(--ews-white); }

.ews-h3 {
  margin: 0 0 12px;
  font-family: var(--ews-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--ews-navy);
}

.ews-lede {
  margin: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  line-height: 1.6;
  color: var(--ews-gray);
}

.ews-lede--onDark { color: rgba(255, 255, 255, 0.86); }

.ews-body { margin: 0 0 16px; }
.ews-body:last-child { margin-bottom: 0; }

.ews-sectionHead {
  max-width: 660px;
  margin-bottom: 40px;
}

.ews-sectionHead--center {
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 768px) {
  .ews-sectionHead { margin-bottom: 56px; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   Full width on phones — a thumb should not have to aim.
   -------------------------------------------------------------------------- */

.ews-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;          /* comfortable tap target */
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--ews-radius);
  font-family: var(--ews-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s var(--ews-ease),
              border-color 0.18s var(--ews-ease),
              color 0.18s var(--ews-ease),
              transform 0.12s var(--ews-ease),
              box-shadow 0.18s var(--ews-ease);
}

/* Gold on navy text — 7.4:1. White text on gold would fail AA at 2.3:1. */
.ews-btn--primary {
  background: var(--ews-accent);
  border-color: var(--ews-accent);
  color: var(--ews-navy);
  box-shadow: 0 2px 10px rgba(184, 134, 44, 0.28);
}

.ews-btn--primary:hover {
  background: #e6b45a;
  border-color: #e6b45a;
  box-shadow: 0 6px 20px rgba(184, 134, 44, 0.36);
}

.ews-btn--solid {
  background: var(--ews-navy);
  border-color: var(--ews-navy);
  color: var(--ews-white);
}

.ews-btn--solid:hover {
  background: var(--ews-blue);
  border-color: var(--ews-blue);
}

.ews-btn--outline {
  background: transparent;
  border-color: var(--ews-line);
  color: var(--ews-navy);
}

.ews-btn--outline:hover {
  border-color: var(--ews-navy);
  background: var(--ews-white);
}

.ews-btn--sm {
  min-height: 44px;
  padding: 11px 22px;
  font-size: 14px;
}

.ews-btn:active { transform: translateY(1px); }

.ews-btnRow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.ews-btnNote {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ews-gray-light);
}

@media (min-width: 768px) {
  /* Buttons shrink to their content once there is room for them side by side. */
  .ews-btn { width: auto; }
  .ews-btn--block { width: 100%; }

  .ews-btnRow {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
  }
}

/* --------------------------------------------------------------------------
   6. Header / navigation
   Base is the phone bar: compact logo, hamburger, collapsed drawer.
   -------------------------------------------------------------------------- */

.ews-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ews-white);
  border-bottom: 1px solid var(--ews-line);
  transition: box-shadow 0.2s var(--ews-ease);
}

.ews-header.is-stuck {
  box-shadow: var(--ews-shadow-sm);
}

.ews-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--ews-nav-h);
}

.ews-nav__brand {
  flex-shrink: 0;
  line-height: 0;
}

/* Sized by WIDTH on phones, not height. The lockup is 2400x380 — a 6.3:1 ratio
   that runs out of horizontal room beside the hamburger long before it runs
   out of vertical room, so width is the real constraint and driving it from
   height risks a squashed image once max-width clamps. */
.ews-nav__logo {
  width: min(225px, 62vw);
  height: auto;
}

.ews-nav__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 8px var(--ews-gutter) 22px;
  list-style: none;
  background: var(--ews-white);
  border-bottom: 1px solid var(--ews-line);
  box-shadow: var(--ews-shadow-md);
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.26s var(--ews-ease), visibility 0.26s;
}

.ews-nav__menu.is-open {
  max-height: 460px;
  visibility: visible;
}

.ews-nav__link {
  position: relative;
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--ews-line);
  font-size: 16px;
  font-weight: 500;
  color: var(--ews-navy);
  text-decoration: none;
  transition: color 0.16s var(--ews-ease);
}

.ews-nav__link:hover,
.ews-nav__link.is-active {
  color: var(--ews-blue);
}

.ews-nav__menuCta { margin-top: 18px; }

.ews-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* The header CTA is a duplicate of the one inside the drawer, so it stays out
   of the phone bar to keep the logo and hamburger uncramped. */
.ews-nav__actions .ews-btn { display: none; }

.ews-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ews-line);
  border-radius: var(--ews-radius);
  cursor: pointer;
}

.ews-nav__toggleBar {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ews-navy);
  transition: background 0.15s var(--ews-ease);
}

.ews-nav__toggleBar::before,
.ews-nav__toggleBar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ews-navy);
  transition: transform 0.2s var(--ews-ease);
}

.ews-nav__toggleBar::before { top: -6px; }
.ews-nav__toggleBar::after  { top: 6px; }

.ews-nav__toggle[aria-expanded="true"] .ews-nav__toggleBar {
  background: transparent;
}

.ews-nav__toggle[aria-expanded="true"] .ews-nav__toggleBar::before {
  transform: translateY(6px) rotate(45deg);
}

.ews-nav__toggle[aria-expanded="true"] .ews-nav__toggleBar::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 960px) {
  .ews-nav {
    gap: 24px;
  }

  /* Room for the full lockup once the nav is horizontal — back to height-driven. */
  .ews-nav__logo { width: auto; height: 54px; }

  .ews-nav__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    visibility: visible;
  }

  .ews-nav__link {
    display: inline-block;
    padding: 6px 0;
    border-bottom: 0;
    font-size: 15px;
  }

  /* Underline sweep is a hover affordance — pointer devices only. */
  .ews-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--ews-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s var(--ews-ease);
  }

  .ews-nav__link:hover::after,
  .ews-nav__link.is-active::after {
    transform: scaleX(1);
  }

  .ews-nav__menuCta { display: none; }
  .ews-nav__actions .ews-btn { display: inline-flex; }
  .ews-nav__toggle { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

/* The photograph sits in its own panel beside the words rather than behind
   them. Nothing overlaps the type, so there is no scrim and no contrast risk. */
.ews-hero {
  background: var(--ews-light);
  padding-block: clamp(44px, 6vw, 84px);
}

.ews-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.ews-hero__copy {
  max-width: 560px;
}

.ews-heroPanel {
  margin: 0;
  border-radius: var(--ews-radius-lg);
  overflow: hidden;
  box-shadow: var(--ews-shadow-lg);
}

.ews-hero__media { display: block; }

.ews-hero__img {
  width: 100%;
  /* Fixed band height keeps the panel proportionate at every width; the
     off-center focal point holds the instructor on screen as it narrows. */
  height: clamp(260px, 40vw, 500px);
  object-fit: cover;
  object-position: 72% center;
}

@media (min-width: 960px) {
  .ews-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}

/* --------------------------------------------------------------------------
   8. Proof strip
   Two columns on a phone, four once there is room.
   -------------------------------------------------------------------------- */

.ews-proof {
  padding-block: 36px;
  background: var(--ews-white);
  border-bottom: 1px solid var(--ews-line);
}

.ews-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 16px;
}

.ews-proof__item {
  text-align: center;
  padding-inline: 8px;
  border-left: 1px solid var(--ews-line);
}

.ews-proof__item:nth-child(odd) { border-left: 0; }

.ews-proof__figure {
  display: block;
  font-family: var(--ews-font-display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ews-navy);
  font-variant-numeric: tabular-nums;
}

.ews-proof__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ews-gray);
}

@media (min-width: 768px) {
  .ews-proof { padding-block: 44px; }

  .ews-proof__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }

  .ews-proof__item { border-left: 1px solid var(--ews-line); }
  .ews-proof__item:first-child { border-left: 0; }
}

/* --------------------------------------------------------------------------
   9. Services
   -------------------------------------------------------------------------- */

.ews-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.ews-service {
  display: flex;
  flex-direction: column;
  padding: 30px 24px;
  background: var(--ews-white);
  border: 0;
  border-radius: var(--ews-radius-lg);
  box-shadow: var(--ews-shadow-sm);
  transition: box-shadow 0.22s var(--ews-ease), transform 0.22s var(--ews-ease);
}

.ews-service:hover {
  box-shadow: var(--ews-shadow-md);
  transform: translateY(-3px);
}

/* Card banner. The card carries the padding, so the image is pulled back out to
   the card edges with negative margins that mirror the padding at each
   breakpoint — update both together if the padding changes. */
.ews-service__media {
  margin: -30px -24px 22px;
  border-radius: var(--ews-radius-lg) var(--ews-radius-lg) 0 0;
  overflow: hidden;
  background: var(--ews-light);
}

.ews-service__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ews-service__list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.ews-service__listItem {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 15px;
  border-top: 1px solid var(--ews-line);
}

.ews-service__listItem::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 10px;
  height: 2px;
  background: var(--ews-accent);
}

@media (min-width: 768px) {
  .ews-services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .ews-service { padding: 40px; }
  .ews-service__media { margin: -40px -40px 26px; }
}

/* Three services, so they only go one-per-column once there is real width.
   At 768px a third column would leave each card too narrow to read. */
@media (min-width: 960px) {
  .ews-services__grid { grid-template-columns: repeat(3, 1fr); }
  .ews-service { padding: 34px 30px; }
  .ews-service__media { margin: -34px -30px 24px; }
}

/* --------------------------------------------------------------------------
   10. Process
   On a phone this is a plain ordered list — a 12-column Gantt is unreadable at
   375px. The schedule bars only appear once there is width to encode overlap.
   -------------------------------------------------------------------------- */

.ews-process__board {
  padding: 26px 20px;
  background: var(--ews-white);
  border: 0;
  border-radius: var(--ews-radius-lg);
  box-shadow: var(--ews-shadow-sm);
}

.ews-process__scale { display: none; }

.ews-process__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ews-process__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-block: 18px;
  border-bottom: 1px solid var(--ews-line);
}

.ews-process__step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ews-process__name {
  margin: 0;
  font-family: var(--ews-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ews-navy);
}

.ews-process__track { display: block; }

.ews-process__bar {
  display: block;
  padding: 13px 20px;
  border-radius: var(--ews-radius);
  background: var(--ews-navy);
  color: var(--ews-white);
  font-size: 14px;
  line-height: 1.4;
}

.ews-process__bar--s2 { background: var(--ews-blue); }
.ews-process__bar--s3 { background: var(--ews-accent); color: var(--ews-navy); }

@media (min-width: 960px) {
  .ews-process__board { padding: 40px; }

  .ews-process__scale {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ews-line);
  }

  .ews-process__scaleTicks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .ews-process__tick {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ews-gray-light);
  }

  .ews-process__step {
    grid-template-columns: 150px 1fr;
    gap: 22px;
    align-items: center;
  }

  .ews-process__track {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    min-height: 54px;
    background: repeating-linear-gradient(
      90deg,
      transparent 0 calc(100% / 4 - 1px),
      var(--ews-line) calc(100% / 4 - 1px) calc(100% / 4)
    );
  }

  .ews-process__bar {
    transform-origin: left center;
    transform: scaleX(0.02);
    opacity: 0;
    transition: transform 0.6s var(--ews-ease), opacity 0.3s var(--ews-ease);
  }

  .ews-process__board.is-visible .ews-process__bar {
    transform: scaleX(1);
    opacity: 1;
  }

  .ews-process__bar--s1 { grid-column: 1 / span 4;  transition-delay: 0.05s; }
  .ews-process__bar--s2 { grid-column: 4 / span 6;  transition-delay: 0.22s; }
  .ews-process__bar--s3 { grid-column: 9 / span 4;  transition-delay: 0.39s; }
}

/* --------------------------------------------------------------------------
   11. About
   -------------------------------------------------------------------------- */

.ews-about__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

/* Copy first, image second — deliberately the reverse of the old portrait
   layout. On a phone the grid stacks in source order, so the image sits below
   the copy rather than pushing it down the screen. */
.ews-about__media {
  margin: 0;
  border-radius: var(--ews-radius-lg);
  overflow: hidden;
  background: var(--ews-light);
  box-shadow: var(--ews-shadow-md);
}

.ews-about__mediaImg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@media (min-width: 960px) {
  .ews-about__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 62px;
  }
}

/* Track record, pulled out of the prose so it is scannable. Gold rule ties it to
   the accent without adding another color. */
.ews-about__highlight {
  margin: 24px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ews-accent);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ews-navy);
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */

/* Photographic backdrop. The quote cards are white, so the photo is dropped
   behind a heavy navy wash — the cards keep their contrast and the section head
   switches to its --onDark variants. isolation + z-index:-1 keeps the wash above
   the photo but below every child, without needing a wrapper element. */
.ews-testimonials {
  position: relative;
  isolation: isolate;
  background-color: var(--ews-navy);
  background-image: url("../assets/testimonials-bg-1400.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 900px) {
  .ews-testimonials {
    background-image: url("../assets/testimonials-bg-2400.jpg");
  }
}

.ews-testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(15, 30, 61, 0.93) 0%,
    rgba(15, 30, 61, 0.86) 45%,
    rgba(10, 23, 48, 0.94) 100%
  );
}

.ews-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.ews-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 24px;
  background: var(--ews-white);
  border: 0;
  border-radius: var(--ews-radius-lg);
  box-shadow: var(--ews-shadow-sm);
}

.ews-quote__mark {
  font-family: var(--ews-font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.7;
  color: var(--ews-accent);
  margin-bottom: 14px;
}

.ews-quote__text {
  margin: 0;
  font-family: var(--ews-font-display);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ews-navy);
}

.ews-quote__cite {
  margin-top: auto;
  padding-top: 22px;
  font-style: normal;
  font-size: 14px;
  color: var(--ews-gray);
}

.ews-quote__name {
  display: block;
  font-weight: 600;
  color: var(--ews-navy);
}

@media (min-width: 768px) {
  .ews-quote { padding: 34px; }
}

@media (min-width: 960px) {
  .ews-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
}

/* --------------------------------------------------------------------------
   13. Contact — the conversion point
   -------------------------------------------------------------------------- */

.ews-contact {
  background:
    radial-gradient(80% 140% at 80% 10%, var(--ews-navy-soft) 0%, transparent 60%),
    var(--ews-navy);
}

.ews-contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}

/* White panel on navy. Same card language as the service and quote cards, and
   it keeps the field text on white rather than asking form controls to be
   legible against the navy gradient. */
.ews-formPanel {
  padding: 28px 22px;
  border-radius: var(--ews-radius-lg);
  background: var(--ews-white);
  box-shadow: var(--ews-shadow-lg);
}

.ews-field {
  margin-bottom: 18px;
}

.ews-field__label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--ews-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ews-navy);
}

.ews-field__req {
  color: var(--ews-accent-deep);
}

.ews-field__input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ews-line);
  border-radius: var(--ews-radius);
  background: var(--ews-white);
  font-family: var(--ews-font-body);
  font-size: 16px;         /* 16px stops iOS Safari zooming on focus */
  line-height: 1.4;
  color: var(--ews-navy);
  transition: border-color 0.18s var(--ews-ease), box-shadow 0.18s var(--ews-ease);
}

.ews-field__input:focus {
  outline: none;
  border-color: var(--ews-accent-deep);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.22);
}

.ews-field__input--area {
  resize: vertical;
  min-height: 110px;
}

/* Native select arrow is inconsistent across platforms; this draws one that
   matches the field border color. */
.ews-field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230f1e3d' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.ews-field--invalid .ews-field__input {
  border-color: #b3261e;
}

.ews-field--invalid .ews-field__input:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
}

.ews-field__error {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #b3261e;
}

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.ews-field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ews-form__submit {
  margin-top: 4px;
}

.ews-form__status {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: var(--ews-radius);
  font-size: 14.5px;
  line-height: 1.5;
}

.ews-form__status--ok {
  background: rgba(21, 128, 61, 0.08);
  border: 1px solid rgba(21, 128, 61, 0.3);
  color: #15803d;
}

.ews-form__status--error {
  background: rgba(179, 38, 30, 0.07);
  border: 1px solid rgba(179, 38, 30, 0.28);
  color: #b3261e;
}

.ews-form__small {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ews-gray-light);
}

.ews-form--sending .ews-form__submit {
  opacity: 0.6;
  pointer-events: none;
}

@media (min-width: 960px) {
  .ews-contact__inner {
    grid-template-columns: 1fr 1fr;
    gap: 62px;
    align-items: center;
  }

  .ews-formPanel { padding: 40px 36px; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.ews-footer {
  padding-block: 48px 30px;
  background: var(--ews-navy-deep);
  color: rgba(255, 255, 255, 0.62);
  font-size: 15px;
}

.ews-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

/* Reversed wordmark set in type — the JPEG logo is white-background only.
   Replace with a transparent reversed asset when one exists. */
.ews-footer__brand {
  font-family: var(--ews-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ews-white);
  margin: 0 0 14px;
}

.ews-footer__brandAccent { color: var(--ews-accent); }

.ews-footer__tagline {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ews-footer__heading {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ews-white);
}

.ews-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Generous row height so footer links are tappable, not just clickable. */
.ews-footer__item { padding-block: 8px; }

.ews-footer__link {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.16s var(--ews-ease);
}

.ews-footer__link:hover {
  color: var(--ews-accent);
  text-decoration: underline;
}

.ews-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.ews-footer__bottom p { margin: 0; }

@media (min-width: 768px) {
  .ews-footer {
    padding-block: 64px 34px;
  }

  .ews-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 40px;
  }

  .ews-footer__item { padding-block: 6px; }
}

/* --------------------------------------------------------------------------
   15. Scroll reveal + motion preferences
   -------------------------------------------------------------------------- */

.ews-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ews-ease), transform 0.5s var(--ews-ease);
}

.ews-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* No-JS fallback: never leave content hidden. */
.ews-noJs .ews-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ews-site *,
  .ews-site *::before,
  .ews-site *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .ews-reveal { opacity: 1; transform: none; }
  .ews-process__bar { transform: scaleX(1); opacity: 1; }
}



/* --------------------------------------------------------------------------
   14. 404 page

   Used only by 404.html. The page reuses .ews-header, .ews-display,
   .ews-eyebrow and the button classes above; these rules only handle the
   centred single-column layout that has no equivalent on the main page.
   -------------------------------------------------------------------------- */

.ews-404__bar {
  display: flex;
  align-items: center;
  min-height: var(--ews-nav-h);
}

.ews-404 {
  /* Fills the window so the footer sits at the bottom on short pages rather
     than floating directly under the text. */
  min-height: calc(100vh - var(--ews-nav-h) - 80px);
  display: flex;
  align-items: center;
  padding-block: var(--ews-section);
  background: var(--ews-light);
}

.ews-404__inner {
  max-width: 620px;
}

.ews-404__text {
  margin: 0 0 32px;
  font-size: 18px;
  color: var(--ews-gray);
}

.ews-404__actions {
  margin-bottom: 32px;
}

.ews-404__contact {
  margin: 0;
  font-size: 15px;
  color: var(--ews-gray-light);
}

.ews-404__link {
  color: var(--ews-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ews-404__link:hover {
  color: var(--ews-navy);
}

.ews-404__footer {
  padding-block: 28px;
  background: var(--ews-navy);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.ews-404__footer p {
  margin: 0;
}