/* ==========================================================================
   Y2K Transport — brand foundation
   Loaded last, after the Impreza theme + plugin CSS, so it wins.

   The theme drives nearly everything from CSS custom properties, so the
   rebrand is mostly a matter of redefining those rather than fighting
   the theme with overrides. Section 2 does that; everything after it is
   new work (buttons, header, footer, a11y).
   ========================================================================== */

/* 1. Brand tokens — from the client brand kit ----------------------------- */
:root {
  --y2k-blue:        #1F1A98;  /* primary: headings, nav, key elements */
  --y2k-orange:      #E96F10;  /* buttons, CTAs, highlights            */
  --y2k-navy:        #15145F;  /* footer, dark sections                */
  --y2k-sky:         #5A57B3;  /* secondary accents, hover, icons      */
  --y2k-warm:        #FFF7F1;  /* soft backgrounds                     */
  --y2k-grey-light:  #F3F4F6;  /* section backgrounds, cards, dividers */
  --y2k-grey-mid:    #9DA7AF;  /* borders, secondary text, icons       */
  --y2k-charcoal:    #25282B;  /* body text                            */
  --y2k-white:       #FFFFFF;

  /* derived */
  --y2k-orange-dark: #C85B08;
  --y2k-blue-dark:   #191578;
  --y2k-navy-deep:   #0F0E45;

  --y2k-radius:      10px;
  --y2k-radius-pill: 999px;
  --y2k-shadow-sm:   0 1px 2px rgba(37, 40, 43, .06), 0 2px 8px rgba(37, 40, 43, .06);
  --y2k-shadow-md:   0 4px 12px rgba(37, 40, 43, .08), 0 12px 28px rgba(37, 40, 43, .08);

  --y2k-ease:        cubic-bezier(.2, .7, .3, 1);
}

/* 2. Retheme the Impreza colour + type variables -------------------------- */
:root {
  /* header */
  --color-header-middle-text:        var(--y2k-blue);
  --color-header-middle-text-hover:  var(--y2k-orange);
  --color-header-top-text-hover:     var(--y2k-orange);

  /* content */
  --color-content-bg-alt:            var(--y2k-grey-light);
  --color-content-bg-alt-grad:       var(--y2k-grey-light);
  --color-content-border:            #E3E6EA;
  --color-content-heading:           var(--y2k-blue);
  --color-content-heading-grad:      var(--y2k-blue);
  --color-content-text:              var(--y2k-charcoal);
  --color-content-link:              var(--y2k-orange);
  --color-content-link-hover:        var(--y2k-blue);
  --color-content-primary:           var(--y2k-orange);
  --color-content-primary-grad:      var(--y2k-orange);
  --color-content-secondary:         var(--y2k-blue);
  --color-content-secondary-grad:    var(--y2k-blue);
  --color-content-faded:             var(--y2k-grey-mid);

  /* the theme's "alt" scheme still carried demo pink/purple — map to brand
     so a stray alt-coloured module can never render off-brand */
  --color-alt-content-bg:            var(--y2k-warm);
  --color-alt-content-bg-grad:       var(--y2k-warm);
  --color-alt-content-border:        #E7DCD3;
  --color-alt-content-heading:       var(--y2k-blue);
  --color-alt-content-heading-grad:  var(--y2k-blue);
  --color-alt-content-text:          var(--y2k-charcoal);
  --color-alt-content-link:          var(--y2k-orange);
  --color-alt-content-link-hover:    var(--y2k-blue);
  --color-alt-content-primary:       var(--y2k-orange);
  --color-alt-content-primary-grad:  var(--y2k-orange);
  --color-alt-content-secondary:     var(--y2k-blue);
  --color-alt-content-secondary-grad: var(--y2k-blue);
  --color-alt-content-overlay:       rgba(31, 26, 152, .78);
  --color-alt-content-overlay-grad:  linear-gradient(135deg, rgba(31,26,152,.85), rgba(233,111,16,.72));

  /* footer */
  --color-footer-bg:                 var(--y2k-navy);
  --color-footer-bg-grad:            var(--y2k-navy);
  --color-footer-bg-alt:             var(--y2k-navy-deep);
  --color-footer-bg-alt-grad:        var(--y2k-navy-deep);
  --color-footer-border:             rgba(255, 255, 255, .14);
  --color-footer-text:               rgba(255, 255, 255, .78);
  --color-footer-link:               var(--y2k-white);
  --color-footer-link-hover:         var(--y2k-orange);

  /* typography — Montserrat headings, Open Sans body */
  --font-family:      "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1-font-family:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-weight:      400;
  --line-height:      1.65;

  --h1-font-weight:      700;
  --h1-bold-font-weight: 800;
  --h1-letter-spacing:   -.02em;
  --h2-letter-spacing:   -.015em;
  --h3-letter-spacing:   -.01em;
}

/* Headings read tighter and heavier than the theme default, matching the
   brand kit's "bold | modern | strong | clean" specimen. */
h1, h2, h3, h4, h5, h6,
.w-btn, .us_custom_heading {
  font-family: var(--h1-font-family);
}
h1, h2, h3 { font-weight: 700; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 3. Buttons -------------------------------------------------------------- */
/* Brand kit: orange primary, blue on hover, outlined secondary, arrow affordance. */
.w-btn.us-btn-style_1,
.w-btn.us-btn-style_2,
input[type="submit"],
.wpcf7-submit {
  font-family: var(--h1-font-family);
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--y2k-radius-pill);
  transition: background-color .22s var(--y2k-ease),
              border-color .22s var(--y2k-ease),
              color .22s var(--y2k-ease),
              transform .22s var(--y2k-ease),
              box-shadow .22s var(--y2k-ease);
}
.w-btn.us-btn-style_1:hover,
.w-btn.us-btn-style_2:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--y2k-shadow-md);
}

/* Reusable brand buttons for new markup */
.y2k-btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--y2k-radius-pill);
  font-family: var(--h1-font-family);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--y2k-ease),
              border-color .22s var(--y2k-ease),
              color .22s var(--y2k-ease),
              transform .22s var(--y2k-ease),
              box-shadow .22s var(--y2k-ease);
}
.y2k-btn svg { flex: none; transition: transform .22s var(--y2k-ease); }
.y2k-btn:hover svg { transform: translateX(3px); }

.y2k-btn--primary { background: var(--y2k-orange); border-color: var(--y2k-orange); color: #fff; }
.y2k-btn--primary:hover,
.y2k-btn--primary:focus-visible { background: var(--y2k-blue); border-color: var(--y2k-blue); color: #fff; }

.y2k-btn--secondary { background: transparent; border-color: var(--y2k-blue); color: var(--y2k-blue); }
.y2k-btn--secondary:hover,
.y2k-btn--secondary:focus-visible { background: var(--y2k-blue); color: #fff; }

/* on dark grounds */
.y2k-btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.y2k-btn--ghost:hover,
.y2k-btn--ghost:focus-visible { background: var(--y2k-orange); border-color: var(--y2k-orange); color: #fff; }

/* 4. Header / navigation -------------------------------------------------- */
.l-header .w-nav-anchor.level_1 {
  font-family: var(--h1-font-family);
  font-weight: 600;
  letter-spacing: .01em;
}
/* Underline that grows from the left instead of a hard colour swap. */
.l-header .w-nav-list.level_1 > .menu-item > .w-nav-anchor.level_1 { position: relative; }
.l-header .w-nav-list.level_1 > .menu-item > .w-nav-anchor.level_1::after {
  content: "";
  position: absolute;
  left: 1.1em;
  right: 1.1em;
  bottom: .55em;
  height: 2px;
  background: var(--y2k-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--y2k-ease);
}
.l-header .w-nav-list.level_1 > .menu-item:hover > .w-nav-anchor.level_1::after,
.l-header .w-nav-list.level_1 > .menu-item.current-menu-item > .w-nav-anchor.level_1::after {
  transform: scaleX(1);
}
/* "Online Accounts" CTA.
   This pill used to be painted by an inline gradient on a second <a> nested
   inside the menu anchor (invalid HTML). The nesting is gone, so the pill is
   styled here instead — and it now picks up the brand orange automatically. */
.l-header .btn-primary.menu-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: var(--y2k-radius-pill);
  background: var(--y2k-orange);
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  transition: background-color .22s var(--y2k-ease), box-shadow .22s var(--y2k-ease);
}
.l-header .w-nav-anchor:hover .btn-primary.menu-btn,
.l-header .w-nav-anchor:focus-visible .btn-primary.menu-btn {
  background: var(--y2k-blue);
  box-shadow: var(--y2k-shadow-sm);
}
.l-header .w-nav-anchor.y2k-nav-cta { color: inherit; }
.l-header .w-nav-list.level_1 > .menu-item.btn > .w-nav-anchor.level_1::after,
.l-header .w-nav-anchor.y2k-nav-cta::after { display: none; }

/* Header layout fix.
   The theme let the left cell collapse to ~22px while the logo inside it is
   248px, so the logo overflowed and the nav rendered on top of it (visible on
   the live site too, and worse once "Y2K News" was added). Give each cell an
   explicit job: logo sized to content, nav takes the slack and aligns right. */
.l-header .l-subheader-h {
  gap: 28px;
}
.l-header .l-subheader-cell.at_left {
  flex: 0 0 auto;
  min-width: 0;
}
.l-header .l-subheader-cell.at_right {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  gap: 16px;
}
/* The nav must not shrink below its own content — when it did, the menu
   overflowed its box and painted straight over the social icons. */
.l-header .l-subheader-cell.at_right > .w-nav { flex: 0 0 auto; min-width: 0; }
.l-header .w-nav-list.level_1 { flex-wrap: nowrap; }

/* Reclaim horizontal room progressively so the bar never has to overlap.
   Seven items plus a CTA pill is a lot to fit beside the logo. */
/* The theme caps the header row at the 1140px content measure, which is too
   narrow for logo + seven items + socials: the nav overflowed its cell and
   spilled back across the logo. Let the header bar use the viewport while
   page content keeps its own narrower measure. */
@media (min-width: 901px) {
  .l-header .l-subheader-h { max-width: min(1600px, calc(100vw - 56px)); }
}
/* The theme sets the nav item padding with a 6-class selector
   (.header_hor .ush_menu_1.type_desktop .menu-item.level_1 > a:not(.w-btn)),
   so these compaction rules have to match that weight to win. */
@media (min-width: 901px) and (max-width: 1500px) {
  .l-header .ush_menu_1.type_desktop .menu-item.level_1 > .w-nav-anchor.level_1 {
    padding-inline: .7em;
    font-size: .95rem;
  }
  .l-header .l-subheader-h { gap: 18px; }
}
/* Social icons repeat in the footer — drop them here rather than crowd the
   nav or shrink the logo below legibility. */
@media (min-width: 901px) and (max-width: 1400px) {
  .l-header .l-subheader-cell.at_right > .w-socials { display: none; }
}
@media (min-width: 1200px) and (max-width: 1350px) {
  .l-header .ush_menu_1.type_desktop .menu-item.level_1 > .w-nav-anchor.level_1 {
    padding-inline: .5em;
    font-size: .9rem;
  }
  .l-header .ush_image_1 img { max-width: 205px; }
}

/* Mobile menu band.
   Seven items plus a CTA pill cannot sit beside the logo below ~1200px, so
   the nav is switched to the theme's dropdown there ($us.navOptions.mobileWidth
   is set to 1200 in each page). The theme's own panel CSS is gated at ~899px,
   so these rules extend the identical treatment up to 1199px — values mirror
   the theme's computed mobile styles so the panel looks the same either side
   of the old breakpoint. Scoped to .type_mobile, the class the theme's JS
   adds, so desktop is never affected. */
/* Upper bound overlaps the desktop band by 1px so neither can fall through a
   rounding gap; every rule here is scoped to .type_mobile, which the theme's
   JS only sets below 1200, so it stays inert on desktop. */
@media (max-width: 1200px) {
  .l-header .w-nav.type_mobile .w-nav-control { display: block; }

  .l-header .w-nav.type_mobile > .w-nav-list.level_1 {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    width: auto;
    max-height: 820px;
    padding: 0 5px;
    overflow: auto;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
    z-index: 3;
  }
  html.w-nav-open .l-header .w-nav.type_mobile > .w-nav-list.level_1 { display: block; }

  .l-header .w-nav.type_mobile > .w-nav-list.level_1 > li { display: block; width: auto; }
  .l-header .w-nav.type_mobile > .w-nav-list.level_1 > li > .w-nav-anchor.level_1 {
    display: block;
    padding: 11px;
    font-size: 1rem;
  }
  /* the sliding underline is a desktop affordance only */
  .l-header .w-nav.type_mobile > .w-nav-list.level_1 > li > .w-nav-anchor.level_1::after { display: none; }
  /* let the CTA read as a button in the stacked panel */
  .l-header .w-nav.type_mobile .btn-primary.menu-btn { display: inline-block; }
  /* the panel ships its own close "X" as well as the toggle, which turns into
     an X when open — two close affordances side by side just reads as a bug */
  .l-header .w-nav.type_mobile > .w-nav-list.level_1 > .w-nav-close { display: none; }
}

/* 5. Footer --------------------------------------------------------------- */
.y2k-footer {
  background: var(--y2k-navy);
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.7;
}
.y2k-footer a { color: #fff; text-decoration: none; transition: color .2s var(--y2k-ease); }
.y2k-footer a:hover { color: var(--y2k-orange); }

/* thin brand rule across the very top of the footer */
.y2k-footer-rule {
  height: 4px;
  background: linear-gradient(90deg, var(--y2k-orange) 0%, var(--y2k-orange) 38%, var(--y2k-blue) 38%, var(--y2k-blue) 100%);
}

.y2k-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 24px;
}
.y2k-footer-main { padding-block: 64px 8px; }

.y2k-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr;
  gap: 48px 40px;
}

.y2k-footer-logo { display: inline-block; }
.y2k-footer-logo img { width: 230px; max-width: 100%; height: auto; }
.y2k-footer-tagline {
  margin: 18px 0 0;
  font-family: var(--h1-font-family);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--y2k-orange);
}
.y2k-footer-blurb { margin: 12px 0 0; max-width: 34ch; }

.y2k-footer-h {
  margin: 0 0 18px;
  font-family: var(--h1-font-family);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.y2k-footer-list { margin: 0; padding: 0; list-style: none; }
.y2k-footer-list li + li { margin-top: 10px; }
.y2k-footer-list a { color: rgba(255, 255, 255, .78); }
.y2k-footer-list a:hover { color: var(--y2k-orange); }

/* contact column */
.y2k-contact-list { margin: 0; padding: 0; list-style: none; }
.y2k-contact-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.y2k-contact-list li + li { margin-top: 14px; }
.y2k-contact-list svg { flex: none; margin-top: 3px; color: var(--y2k-orange); }
.y2k-contact-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.y2k-contact-list a { font-weight: 600; }
.y2k-footer-cta { margin-top: 24px; }

/* socials */
.y2k-social { display: flex; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.y2k-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  transition: background-color .2s var(--y2k-ease), border-color .2s var(--y2k-ease), transform .2s var(--y2k-ease);
}
.y2k-social a:hover {
  background: var(--y2k-orange);
  border-color: var(--y2k-orange);
  transform: translateY(-2px);
}

/* service areas — replaces the old curved strip the client flagged as
   hard to read. Chips give each place its own hit area and let the list
   wrap cleanly instead of squeezing onto one line. */
.y2k-areas {
  margin-top: 56px;
  padding-block: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.y2k-areas-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 18px;
}
.y2k-areas-head .y2k-footer-h { margin: 0; }
.y2k-areas-note { margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .6); }
.y2k-areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.y2k-areas-list li > span,
.y2k-areas-list li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--y2k-radius-pill);
  background: rgba(255, 255, 255, .04);
  font-size: .9rem;
  color: rgba(255, 255, 255, .88);
  transition: background-color .2s var(--y2k-ease), border-color .2s var(--y2k-ease), color .2s var(--y2k-ease);
}
.y2k-areas-list svg { flex: none; color: var(--y2k-orange); }
.y2k-areas-list a:hover {
  background: rgba(233, 111, 16, .16);
  border-color: var(--y2k-orange);
  color: #fff;
}

/* bottom bar */
.y2k-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: var(--y2k-navy-deep);
}
.y2k-footer-bottom .y2k-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}
.y2k-footer-bottom p { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .62); }
.y2k-footer-bottom a { font-weight: 600; }

@media (max-width: 1000px) {
  .y2k-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .y2k-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .y2k-footer-main { padding-block: 48px 0; }
  .y2k-footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .y2k-footer-blurb { max-width: none; }
  .y2k-footer-bottom .y2k-footer-inner { justify-content: flex-start; }
  .y2k-areas { margin-top: 40px; }
}

/* 6. Accessibility + interaction polish ----------------------------------- */

/* The theme ships no visible keyboard focus ring. Use :focus-visible so it
   only shows for keyboard users, not on mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--y2k-orange);
  outline-offset: 2px;
  border-radius: 3px;
}
.y2k-footer a:focus-visible { outline-color: #fff; }

/* Skip link — first tab stop, lets keyboard and screen-reader users jump
   past the header nav on every page. */
.y2k-skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: var(--y2k-radius);
  background: var(--y2k-blue);
  color: #fff;
  font-family: var(--h1-font-family);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s var(--y2k-ease);
}
.y2k-skip:focus { top: 8px; }

/* Comfortable tap targets for the phone/social links on touch devices. */
@media (pointer: coarse) {
  .y2k-footer-list a,
  .y2k-contact-list a { display: inline-block; padding-block: 4px; }
}

/* Respect the OS "reduce motion" setting — the brief asks for this on the
   logo marquee, and it should hold for every transition on the site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Images should never overflow their column on small screens. */
img { max-width: 100%; height: auto; }

/* Nor should form controls. Box-sizing keeps padded fields in their column. */
input, select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Select2 keeps the original <select> in the DOM for screen readers and clips
   it from view — but Forminator leaves that clipped element absolutely
   positioned at its full 1140px width, and an absolutely positioned box still
   counts toward scrollable overflow. On the careers page that pushed the
   document to 1867px and produced a horizontal scrollbar.
   Collapse it to the usual 1px visually-hidden box: still in the accessibility
   tree and still clipped, but no longer able to stretch the page. */
select.select2-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
}
/* Belt and braces: every ancestor of that shim is position:static, so the
   absolutely positioned box resolves against the initial containing block and
   escapes the form entirely — no ancestor can clip it. Making the form a
   containing block keeps the shim inside the form's own width. */
form.forminator-custom-form {
  position: relative;
  overflow-x: clip;
}

/* ==========================================================================
   7. Home page sections
   ========================================================================== */

/* The theme's two-tone heading spans still carried the old hex values. */
.heading-highlight-orange { color: var(--y2k-orange); text-transform: uppercase; }
.heading-highlight-blue   { color: var(--y2k-blue);   text-transform: uppercase; }

.y2k-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.y2k-section { padding-block: 80px; }
.y2k-section > .y2k-wrap > .y2k-h2 { margin-top: 0; }

.y2k-eyebrow {
  margin: 0 0 10px;
  font-family: var(--h1-font-family);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--y2k-orange);
  text-align: center;
}
.y2k-h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-align: center;
}
.y2k-h2--sm { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.y2k-section-lede {
  max-width: 68ch;
  margin: 0 auto 44px;
  text-align: center;
  font-size: 1.05rem;
  color: #4A5158;
}

/* ------------------------------- hero ----------------------------------- */
.y2k-hero { position: relative; background: #fff; }
.y2k-hero-media { position: relative; }
.y2k-hero-media .slider-pro { margin: 0 !important; }

/* The slider stage is 720px, which suits desktop but swallows a whole phone
   screen. Cap it on small viewports and let the photo cover the shorter box.
   slider-pro writes its sizing inline (height + centring margins), so these
   have to be !important and the centring offsets reset. */
@media (max-width: 700px) {
  .y2k-hero-media .sp-mask,
  .y2k-hero-media .sp-slides-container,
  .y2k-hero-media .sp-slide,
  .y2k-hero-media .sp-image-container { height: 400px !important; }
  .y2k-hero-media .sp-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    inset: 0 !important;
    object-fit: cover;
    object-position: center;
  }
}
.y2k-hero-inner { max-width: 1200px; margin: 0 auto; padding-inline: 24px; background: #fff; }
/* Two columns: the headline holds the left, the supporting copy and both
   buttons sit on the right, so the card balances across the full width
   instead of stacking all the weight on one side. */
.y2k-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: 20px clamp(28px, 3.4vw, 48px);
  align-items: center;
  margin-top: -96px;
  margin-bottom: 56px;
  padding: 42px clamp(24px, 4vw, 52px);
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--y2k-shadow-md);
}
.y2k-hero-aside { display: flex; flex-direction: column; }

/* Two columns need real room. Below 1200 the right column gets too narrow to
   seat both buttons on one row, so stack instead of letting them wrap. */
@media (max-width: 1199px) {
  .y2k-hero-card {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
    margin-top: -64px;
  }
}
.y2k-hero-title { margin: 0; }
.y2k-hero-kicker {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-family);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y2k-grey-mid);
}
.y2k-hero-display {
  display: block;
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
}
.y2k-hero-lede { margin: 0; font-size: 1.06rem; color: #4A5158; }

.y2k-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* In the home hero card both buttons stay on one row at every width — never
   wrap, never stack. Scoped to the card: the service-page split heroes carry
   longer labels and must stay free to wrap. */
.y2k-hero-card .y2k-hero-actions { flex-wrap: nowrap; }
.y2k-hero-card .y2k-hero-actions .y2k-btn { padding-inline: 1.3em; white-space: nowrap; }

/* --------------------------- service cards ------------------------------ */
.y2k-services { background: #fff; }
.y2k-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.y2k-svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s var(--y2k-ease), box-shadow .25s var(--y2k-ease), border-color .25s var(--y2k-ease);
}
.y2k-svc-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--y2k-shadow-md);
}
.y2k-svc-media { aspect-ratio: 16 / 10; background: var(--y2k-grey-light); overflow: hidden; }
.y2k-svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--y2k-ease); }
.y2k-svc-card:hover .y2k-svc-media img { transform: scale(1.04); }
.y2k-svc-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.y2k-svc-title { margin: 0 0 10px; font-size: 1.06rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-svc-body p { margin: 0 0 18px; font-size: .95rem; color: #4A5158; }
.y2k-textlink {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: auto;
  font-family: var(--h1-font-family);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--y2k-orange);
  text-decoration: none;
}
.y2k-textlink svg { transition: transform .22s var(--y2k-ease); }
.y2k-textlink:hover { color: var(--y2k-blue); }
.y2k-textlink:hover svg { transform: translateX(4px); }

.y2k-callout {
  margin-top: 40px;
  padding: 28px 32px;
  border-left: 4px solid var(--y2k-orange);
  border-radius: 12px;
  background: var(--y2k-warm);
}
.y2k-callout h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-callout p { margin: 0; color: #4A5158; }

/* ----------------------------- trusted by -------------------------------- */
.y2k-trusted { background: var(--y2k-grey-light); padding-bottom: 64px; }
/* The lede above the marquee is the last child of its wrapper, so its bottom
   margin gets zeroed and the two ran together. Space them from the marquee
   side, which does not depend on that. */
.y2k-trusted .y2k-marquee { margin-top: 44px; }
@media (max-width: 700px) {
  .y2k-trusted .y2k-marquee { margin-top: 30px; }
}

/* Several client logos arrive as JPEGs with baked-in white/grey backgrounds.
   Seating the marquee on a white card lets those blend instead of showing as
   visible boxes, and still reads as a distinct band inside the grey section. */
.y2k-marquee {
  --y2k-marquee-duration: 46s;
  position: relative;
  overflow: hidden;
  max-width: 1200px;
  margin-inline: auto;
  padding-block: 26px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.y2k-marquee-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: y2k-marquee var(--y2k-marquee-duration) linear infinite;
}
.y2k-marquee:hover .y2k-marquee-track,
.y2k-marquee:focus-within .y2k-marquee-track { animation-play-state: paused; }
.y2k-marquee-track li { flex: none; }
.y2k-marquee-track img {
  display: block;
  width: auto;
  height: 52px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .25s var(--y2k-ease), opacity .25s var(--y2k-ease);
}
.y2k-marquee-track li:hover img { filter: grayscale(0); opacity: 1; }
@keyframes y2k-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The brief asks the marquee to respect reduced-motion: stop the scroll and
   let the logos wrap into a static, readable row instead. */
@media (prefers-reduced-motion: reduce) {
  .y2k-marquee { -webkit-mask-image: none; mask-image: none; }
  .y2k-marquee-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 48px;
  }
  .y2k-marquee-track li[aria-hidden="true"] { display: none; }
}

/* --------------------------- delivery speeds ----------------------------- */
.y2k-speeds { background: #fff; }
.y2k-speed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.y2k-speed-card {
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 14px;
}
.y2k-speed-card--note { background: var(--y2k-warm); border-color: #F0DFD2; }
.y2k-speed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.y2k-speed-head h3 { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-speed-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(233, 111, 16, .1);
  color: var(--y2k-orange);
}
.y2k-speed-card p { margin: 0 0 14px; font-size: .95rem; color: #4A5158; }
.y2k-cutoff {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--y2k-grey-light);
  font-size: .88rem;
}
.y2k-cutoff dt {
  font-family: var(--h1-font-family);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--y2k-grey-mid);
  margin-bottom: 4px;
}
.y2k-cutoff dd { margin: 0; color: var(--y2k-charcoal); font-weight: 600; }
.y2k-speed-list { margin: 0 0 14px; padding: 0; list-style: none; columns: 2; column-gap: 18px; }
.y2k-speed-list li { font-size: .9rem; color: #4A5158; padding-left: 16px; position: relative; margin-bottom: 5px; }
.y2k-speed-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--y2k-orange);
}
.y2k-speed-note { margin: 0 !important; font-size: .86rem !important; color: var(--y2k-grey-mid) !important; }

/* ---------------------------- why choose -------------------------------- */
.y2k-why { background: var(--y2k-grey-light); }
.y2k-why-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.y2k-why-intro .y2k-h2 { text-align: left; }
.y2k-why-intro p { color: #4A5158; }
.y2k-why-intro .y2k-btn { margin-top: 10px; }
.y2k-why-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.y2k-why-item {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E6E9ED;
}
.y2k-why-item h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-why-item p { margin: 0; font-size: .93rem; color: #4A5158; }
.y2k-why-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(31, 26, 152, .08);
  color: var(--y2k-blue);
}

/* ------------------------------- news ----------------------------------- */
.y2k-news { background: #fff; }
.y2k-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.y2k-news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #E6E9ED;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.y2k-news-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--y2k-grey-light), #E4E7EC);
  color: var(--y2k-grey-mid);
}
.y2k-news-media svg { width: 34px; height: 34px; }
.y2k-news-body { padding: 20px 22px 24px; }
.y2k-news-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.y2k-news-tag {
  font-family: var(--h1-font-family);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y2k-orange);
}
.y2k-news-soon {
  padding: 3px 9px;
  border-radius: var(--y2k-radius-pill);
  background: var(--y2k-grey-light);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--y2k-grey-mid);
}
.y2k-news-card h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-news-card p { margin: 0; font-size: .93rem; color: #4A5158; }
.y2k-news-placeholder-note {
  margin: 32px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--y2k-warm);
  font-size: .9rem;
  color: #6B5646;
  text-align: center;
}

/* -------------------------------- CTA ----------------------------------- */
.y2k-cta { padding-block: 64px; background: var(--y2k-blue); color: #fff; }
.y2k-cta-inner { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; justify-content: space-between; }
.y2k-cta-inner > div:first-child { flex: 1 1 460px; }
.y2k-cta-title { margin: 0 0 12px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.y2k-cta p { margin: 0 0 8px; color: rgba(255, 255, 255, .84); max-width: 62ch; }
.y2k-cta-existing { font-size: .95rem; }
.y2k-cta-existing a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.y2k-cta-existing a:hover { color: var(--y2k-orange); }
.y2k-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----------------------------- responsive -------------------------------- */
@media (max-width: 1100px) {
  .y2k-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .y2k-speed-grid { grid-template-columns: repeat(2, 1fr); }
  .y2k-why-grid { grid-template-columns: 1fr; gap: 36px; }
  .y2k-why-intro { text-align: center; }
  .y2k-why-intro .y2k-h2 { text-align: center; }
}
@media (max-width: 860px) {
  .y2k-news-grid { grid-template-columns: 1fr 1fr; }
  .y2k-news-grid > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .y2k-section { padding-block: 56px; }
  .y2k-hero-card { margin-top: -40px; margin-bottom: 40px; padding: 28px 22px; border-radius: 14px; }
  /* Keep the home hero pair on one row on phones: tighten them and drop the
     "Call Dispatch:" prefix so the number alone carries the second button. */
  .y2k-hero-card .y2k-hero-actions { gap: 10px; }
  .y2k-hero-card .y2k-hero-actions .y2k-btn {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: .7em;
    font-size: .82rem;
  }
  .y2k-hero-card .y2k-hero-actions .y2k-btn-prefix { display: none; }
  /* A fixed 2.8rem headline would overrun a phone; scale it down here only. */
  .y2k-hero-display { font-size: clamp(1.75rem, 8.2vw, 2.2rem); }
  .y2k-svc-grid, .y2k-speed-grid, .y2k-news-grid { grid-template-columns: 1fr; }
  .y2k-news-grid > :nth-child(3) { grid-column: auto; }
  .y2k-speed-list { columns: 1; }
  .y2k-callout { padding: 22px 20px; }
  .y2k-cta-actions { width: 100%; }
  .y2k-cta-actions .y2k-btn { width: 100%; justify-content: center; }
  .y2k-marquee-track { gap: 36px; }
  .y2k-marquee-track img { height: 42px; }
}
/* On the narrowest phones the decorative arrow is the last thing that has to
   give for both home-hero buttons to fit the row; the phone icon carries the
   meaning. Trimming the card gutter buys back enough width to keep both labels. */
@media (max-width: 480px) {
  .y2k-hero-card { padding-inline: 16px; }
  .y2k-hero-card .y2k-hero-actions { gap: 8px; }
  .y2k-hero-card .y2k-hero-actions .y2k-btn--primary svg { display: none; }
  .y2k-hero-card .y2k-hero-actions .y2k-btn { padding-inline: .5em; font-size: .78rem; }
}
/* Below 360px (legacy iPhone SE and similar) the icons go too — the number
   itself is the call to action, and the whole button is a tel: link. */
@media (max-width: 359px) {
  .y2k-hero-card { padding-inline: 13px; }
  .y2k-hero-card .y2k-hero-actions { gap: 6px; }
  .y2k-hero-card .y2k-hero-actions .y2k-btn svg { display: none; }
  .y2k-hero-card .y2k-hero-actions .y2k-btn { padding-inline: .35em; font-size: .72rem; }
}

/* ==========================================================================
   8. Interior pages — services cornerstone, service landing pages, news
   ========================================================================== */

/* ----------------------------- breadcrumbs ------------------------------- */
.y2k-crumbs { background: var(--y2k-grey-light); border-bottom: 1px solid #E6E9ED; }
.y2k-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding-block: 14px;
  list-style: none;
  font-size: .85rem;
  color: var(--y2k-grey-mid);
}
.y2k-crumbs li + li::before { content: "/"; margin-right: 10px; color: #C6CCD2; }
.y2k-crumbs a { color: var(--y2k-blue); text-decoration: none; font-weight: 600; }
.y2k-crumbs a:hover { color: var(--y2k-orange); text-decoration: underline; text-underline-offset: 3px; }
.y2k-crumbs [aria-current] { color: var(--y2k-charcoal); font-weight: 600; }

/* ------------------------------ split hero ------------------------------- */
/* Light grey ground so the page header reads as its own band, separate from
   the white section that always follows it.
   The photo is pulled out of the container and pinned to the right half of the
   section so it runs flush to the top, bottom and right edge of the viewport.
   The grid still reserves that half, which keeps the copy clear of it. */
.y2k-shero {
  position: relative;
  padding-block: 0;
  background: var(--y2k-grey-light);
  overflow: hidden;
}
.y2k-shero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: stretch;
}
.y2k-shero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 64px;
}
.y2k-shero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
}
.y2k-eyebrow--left { text-align: left; }
.y2k-shero-title {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--y2k-blue);
}
.y2k-shero-lede { margin: 0; font-size: 1.05rem; color: #4A5158; max-width: 60ch; }
.y2k-shero .y2k-hero-actions { margin-top: 28px; }
/* Edge to edge: no radius or shadow, since it now meets the section borders. */
.y2k-shero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------ icon cards ------------------------------- */
.y2k-icards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.y2k-icards--4 { grid-template-columns: repeat(4, 1fr); }
.y2k-icards--5 { grid-template-columns: repeat(5, 1fr); }
.y2k-icards--6 { grid-template-columns: repeat(3, 1fr); }
.y2k-icard {
  padding: 24px 22px 26px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 14px;
}
.y2k-icard h3 { margin: 14px 0 8px; font-size: 1rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-icard p { margin: 0; font-size: .92rem; color: #4A5158; }
.y2k-icard-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(233, 111, 16, .1);
  color: var(--y2k-orange);
}

/* ---------------------------- check columns ------------------------------ */
.y2k-checkcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.y2k-checkcol {
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 14px;
}
.y2k-checkcol h3 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EDF0F3;
  font-size: 1rem;
  font-weight: 700;
  color: var(--y2k-blue);
}
.y2k-checkcol ul { margin: 0; padding: 0; list-style: none; }
.y2k-checkcol li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 28px;
  font-size: .93rem;
  color: #4A5158;
}
.y2k-checkcol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--y2k-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* tick list (single column) */
.y2k-ticklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.y2k-ticklist li {
  position: relative;
  padding: 14px 18px 14px 46px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 10px;
  font-size: .95rem;
  color: var(--y2k-charcoal);
}
.y2k-ticklist li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 1.05em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--y2k-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 6 6L20 6'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* ------------------------------- specs ----------------------------------- */
.y2k-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.y2k-spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  align-items: baseline;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 12px;
}
.y2k-spec-name { font-family: var(--h1-font-family); font-weight: 700; color: var(--y2k-blue); }
.y2k-spec-body { grid-column: 1 / -1; font-size: .92rem; color: #4A5158; }
.y2k-spec-cap {
  justify-self: end;
  padding: 5px 12px;
  border-radius: var(--y2k-radius-pill);
  background: rgba(233, 111, 16, .1);
  font-size: .8rem;
  font-weight: 700;
  color: var(--y2k-orange-dark);
  white-space: nowrap;
}

/* ------------------------------ coverage --------------------------------- */
.y2k-coverage { background: var(--y2k-grey-light); }
.y2k-coverage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.y2k-coverage-card {
  padding: 30px 30px 32px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 16px;
}
.y2k-coverage-card h3 { margin: 16px 0 10px; font-size: 1.2rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-coverage-card p { margin: 0; color: #4A5158; }

/* --------------------------- service areas ------------------------------- */
.y2k-areas-sec { background: var(--y2k-grey-light); }
.y2k-areagrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}
.y2k-areagrid li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--y2k-charcoal);
}
.y2k-areagrid svg { flex: none; width: 17px; height: 17px; color: var(--y2k-orange); }
.y2k-area-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.y2k-area-note {
  padding: 24px 26px 26px;
  background: #fff;
  border-left: 4px solid var(--y2k-blue);
  border-radius: 12px;
}
.y2k-area-note h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; color: var(--y2k-blue); }
.y2k-area-note p { margin: 0 0 12px; font-size: .95rem; color: #4A5158; }
.y2k-area-note .y2k-textlink { margin-top: 0; }

/* --------------------------------- FAQ ----------------------------------- */
.y2k-faq { background: #fff; }
.y2k-faq-wrap { max-width: 900px; }
.y2k-faq-list { display: grid; gap: 12px; }
.y2k-faq-item {
  border: 1px solid #E6E9ED;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.y2k-faq-item[open] { border-color: #D9DEE4; box-shadow: var(--y2k-shadow-sm); }
.y2k-faq-item summary {
  position: relative;
  padding: 18px 56px 18px 22px;
  cursor: pointer;
  font-family: var(--h1-font-family);
  font-size: 1rem;
  font-weight: 700;
  color: var(--y2k-blue);
  list-style: none;
}
.y2k-faq-item summary::-webkit-details-marker { display: none; }
.y2k-faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border-right: 2.5px solid var(--y2k-orange);
  border-bottom: 2.5px solid var(--y2k-orange);
  transform: rotate(45deg);
  transition: transform .22s var(--y2k-ease);
}
.y2k-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.y2k-faq-item summary:hover { background: var(--y2k-grey-light); }
.y2k-faq-a { padding: 0 22px 20px; }
.y2k-faq-a p { margin: 0; color: #4A5158; }

/* --------------------------- section variants ---------------------------- */
.y2k-envelope { background: var(--y2k-grey-light); }
.y2k-caps { background: #fff; }

/* Band rhythm.
   The page header is grey, so the section directly after it is always white
   and every section below alternates from there. The builder stamps these in
   document order (see alternateBands in _tools/lib/page.js) so the sequence
   cannot drift as sections are added or reordered. Two classes deep, so these
   beat the per-section background rules above. */
.y2k-section.y2k-band-white { background: #fff; }
.y2k-section.y2k-band-grey { background: var(--y2k-grey-light); }
.y2k-shero + .y2k-services { padding-top: 24px; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 1100px) {
  .y2k-icards, .y2k-icards--4, .y2k-icards--5, .y2k-icards--6 { grid-template-columns: repeat(2, 1fr); }
  .y2k-checkcols { grid-template-columns: 1fr; }
  .y2k-areagrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* Stacked: the photo returns to normal flow above the copy, at a fixed
     ratio rather than pinned to half the section. */
  .y2k-shero { padding-block: 48px; overflow: visible; }
  .y2k-shero-grid { grid-template-columns: 1fr; gap: 32px; }
  .y2k-shero-copy { padding-block: 0; }
  .y2k-shero-media { position: static; width: auto; order: -1; }
  .y2k-shero-media img { height: auto; aspect-ratio: 16 / 10; border-radius: 16px; }
  .y2k-coverage-grid, .y2k-area-notes, .y2k-specs { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .y2k-shero { padding-block: 40px; }
  .y2k-icards, .y2k-icards--4, .y2k-icards--5, .y2k-icards--6 { grid-template-columns: 1fr; }
  .y2k-areagrid { grid-template-columns: 1fr 1fr; }
  .y2k-shero .y2k-hero-actions .y2k-btn { width: 100%; justify-content: center; }
  .y2k-faq-item summary { padding: 16px 48px 16px 18px; font-size: .95rem; }
  .y2k-faq-a { padding: 0 18px 18px; }
}
@media (max-width: 420px) {
  .y2k-areagrid { grid-template-columns: 1fr; }
}

/* ------------------------------- prose ---------------------------------- */
.y2k-prose { max-width: 74ch; margin-inline: auto; }
.y2k-prose p { margin: 0 0 16px; color: #4A5158; font-size: 1.02rem; }
.y2k-prose p:last-child { margin-bottom: 0; }
.y2k-prose + .y2k-ticklist { margin-top: 28px; }

.y2k-ticklist--wide {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-inline: auto;
}

/* --------------------------- related services ---------------------------- */
.y2k-related { background: var(--y2k-grey-light); padding-block: 64px; }
.y2k-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.y2k-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 14px;
  text-decoration: none;
  color: var(--y2k-blue);
  transition: transform .22s var(--y2k-ease), box-shadow .22s var(--y2k-ease), border-color .22s var(--y2k-ease);
}
.y2k-related-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--y2k-shadow-md);
  color: var(--y2k-blue);
}
.y2k-related-card > svg:last-child { margin-left: auto; color: var(--y2k-orange); transition: transform .22s var(--y2k-ease); }
.y2k-related-card:hover > svg:last-child { transform: translateX(4px); }
.y2k-related-name { font-family: var(--h1-font-family); font-weight: 700; font-size: 1rem; }
.y2k-related-back { margin: 26px 0 0; text-align: center; }

@media (max-width: 900px) {
  .y2k-related-grid { grid-template-columns: 1fr; }
  .y2k-ticklist--wide { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. Y2K News — index, cards, post pages
   ========================================================================== */

/* card becomes a single link target once posts are real */
.y2k-news-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.y2k-news-card:has(.y2k-news-link) { transition: transform .25s var(--y2k-ease), box-shadow .25s var(--y2k-ease), border-color .25s var(--y2k-ease); }
.y2k-news-card:has(.y2k-news-link):hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--y2k-shadow-md);
}
.y2k-news-media { overflow: hidden; }
.y2k-news-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--y2k-ease); }
.y2k-news-card:hover .y2k-news-media img { transform: scale(1.04); }
.y2k-news-link .y2k-news-body { display: flex; flex-direction: column; flex: 1; }
.y2k-news-link .y2k-textlink { margin-top: auto; padding-top: 14px; }
.y2k-news-meta time { font-size: .8rem; color: var(--y2k-grey-mid); }
.y2k-news-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ------------------------------ post page -------------------------------- */
.y2k-post-head { padding-block: 56px 32px; background: var(--y2k-grey-light); }
.y2k-post-wrap { max-width: 820px; }
.y2k-post-title {
  margin: 12px 0 14px;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--y2k-blue);
}
.y2k-post-lede { margin: 0; font-size: 1.1rem; color: #4A5158; }
.y2k-post-figure { margin: -24px 0 0; }
.y2k-post-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--y2k-shadow-md);
}
.y2k-post-body { padding-block: 40px 64px; }
.y2k-post-body p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.75; color: #3C434A; }
.y2k-post-body h2 {
  margin: 36px 0 14px;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--y2k-blue);
}
.y2k-post-body h2:first-child { margin-top: 0; }
.y2k-post-cta {
  margin: 36px 0 0;
  padding: 26px 28px;
  border-left: 4px solid var(--y2k-orange);
  border-radius: 12px;
  background: var(--y2k-warm);
}
.y2k-post-cta p { margin: 0 0 16px; font-size: 1.02rem; color: #6B5646; }

.y2k-news-index { padding-top: 56px; }
.y2k-news-index .y2k-h2 { margin-top: 0; }

@media (max-width: 860px) {
  .y2k-news-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .y2k-post-head { padding-block: 36px 28px; }
  .y2k-post-figure { margin-top: -16px; }
  .y2k-post-body { padding-block: 30px 44px; }
  .y2k-post-body p { font-size: 1rem; }
  .y2k-post-cta { padding: 22px 20px; }
}

/* Older browsers without :has() simply keep the card static — the link still
   works, it just does not lift on hover. */
@supports not (selector(:has(*))) {
  .y2k-news-card { transition: none; }
}

/* ==========================================================================
   10. About / Careers / Contact / Gallery
   ========================================================================== */

/* ------------------------------- story ---------------------------------- */
.y2k-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.y2k-story-copy .y2k-h2 { text-align: left; margin-bottom: 18px; }
.y2k-story-copy p { margin: 0 0 16px; color: #4A5158; font-size: 1.02rem; }
.y2k-story-copy p:last-child { margin-bottom: 0; }
.y2k-story-figure { margin: 0; }
.y2k-story-figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--y2k-shadow-md);
}

/* ------------------------------ role cards ------------------------------- */
.y2k-role {
  padding: 32px clamp(22px, 3vw, 38px) 34px;
  margin-bottom: 26px;
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 16px;
}
.y2k-role:last-child { margin-bottom: 0; }
.y2k-role-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #EDF0F3;
}
.y2k-role-head h3 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; color: var(--y2k-blue); }
.y2k-role-type {
  margin: 0;
  font-family: var(--h1-font-family);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--y2k-orange);
}
.y2k-role-intro { margin: 0 0 22px; color: #4A5158; font-size: 1rem; }

/* ---------------------------- form surfaces ------------------------------ */
.y2k-formcard {
  padding: clamp(22px, 3vw, 36px);
  background: #fff;
  border: 1px solid #E6E9ED;
  border-radius: 16px;
  box-shadow: var(--y2k-shadow-sm);
}
.y2k-apply-wrap { max-width: 940px; }

/* The Contact Form 7 / Forminator styling that sat here is gone: both forms
   were rebuilt as plain markup (see section 11), so those rules matched nothing
   and only competed with the new ones. */

/* ------------------------------- contact -------------------------------- */
.y2k-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.y2k-contact-aside {
  padding: clamp(22px, 3vw, 32px);
  background: var(--y2k-warm);
  border-radius: 16px;
}
.y2k-contact-details { margin: 0; padding: 0; list-style: none; }
.y2k-contact-details li { display: flex; gap: 14px; align-items: flex-start; }
.y2k-contact-details li + li { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EFE2D7; }
.y2k-contact-details svg { flex: none; margin-top: 3px; width: 20px; height: 20px; color: var(--y2k-orange); }
.y2k-contact-details a { color: var(--y2k-blue); font-weight: 700; text-decoration: none; }
.y2k-contact-details a:hover { color: var(--y2k-orange); }
.y2k-contact-label {
  display: block;
  margin-bottom: 3px;
  font-family: var(--h1-font-family);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--y2k-grey-mid);
}
.y2k-contact-account { margin-top: 24px; width: 100%; justify-content: center; }

/* --------------------------------- map ----------------------------------- */
.y2k-map-frame {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #E6E9ED;
  box-shadow: var(--y2k-shadow-sm);
  line-height: 0;
}
.y2k-map-frame iframe { display: block; width: 100%; height: 440px; border: 0; }

/* ------------------------------- gallery --------------------------------- */
.y2k-gallery-sec { background: #fff; padding-block: 72px !important; }
.y2k-gallery-cat {
  margin: 0 0 20px !important;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--y2k-orange);
  font-family: var(--h1-font-family) !important;
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  color: var(--y2k-blue) !important;
  text-transform: uppercase;
}
.y2k-gallery-sec .w-grid + .y2k-gallery-cat { margin-top: 56px !important; }
.y2k-gallery-sec .w-grid-item-h { border-radius: 12px; overflow: hidden; background: var(--y2k-grey-light); }
.y2k-gallery-sec .w-grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--y2k-ease);
}
.y2k-gallery-sec .w-grid-item:hover img { transform: scale(1.05); }
/* the anchor is an empty overlay the theme stretches over the tile — give it a
   visible hover state so the lightbox affordance reads */
.y2k-gallery-sec .w-grid-item-anchor {
  z-index: 2;
  background: rgba(31, 26, 152, 0);
  transition: background-color .25s var(--y2k-ease);
}
.y2k-gallery-sec .w-grid-item-h:hover .w-grid-item-anchor { background: rgba(31, 26, 152, .16); }
.y2k-gallery-sec .w-grid-item-anchor:focus-visible { outline: 3px solid var(--y2k-orange); outline-offset: -3px; }

/* --------------------------- section variants ---------------------------- */
.y2k-stats { background: var(--y2k-grey-light); }
.y2k-values { background: #fff; }
.y2k-related-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 1100px) {
  .y2k-related-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .y2k-story-grid { grid-template-columns: 1fr; gap: 32px; }
  .y2k-story--rev .y2k-story-figure { order: -1; }
  .y2k-story-copy .y2k-h2 { text-align: center; }
  .y2k-story-figure img { min-height: 0; aspect-ratio: 16 / 10; }
  .y2k-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .y2k-role { padding: 24px 20px 26px; }
  .y2k-role-head { align-items: flex-start; }
  .y2k-role-head .y2k-btn { width: 100%; justify-content: center; }
  .y2k-related-grid--4 { grid-template-columns: 1fr; }
  .y2k-map-frame iframe { height: 320px; }
  .y2k-gallery-sec { padding-block: 48px !important; }
}

/* ==========================================================================
   11. Forms (rebuilt) + lightbox
   ========================================================================== */

/* The card is a flat surface now — no drop shadow. */
.y2k-formcard {
  padding: clamp(22px, 3vw, 36px);
  background: #fff;
  border: 1px solid #E3E6EA;
  border-radius: 14px;
  box-shadow: none;
}

.y2k-form { margin: 0; }
.y2k-field { margin-bottom: 18px; }
.y2k-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.y2k-field-row .y2k-field { margin-bottom: 18px; }

.y2k-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--h1-font-family);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--y2k-blue);
}
.y2k-req { color: var(--y2k-orange); }

/* Square-ish, flat fields that sit with the cards and buttons rather than the
   theme's rounded, shadowed defaults. */
.y2k-form .y2k-input, .y2k-input {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #D7DCE2;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font-family: var(--font-family);
  font-size: .97rem;
  line-height: 1.4;
  height: auto;
  color: var(--y2k-charcoal);
  transition: border-color .18s var(--y2k-ease), background-color .18s var(--y2k-ease);
  -webkit-appearance: none;
          appearance: none;
}
.y2k-form .y2k-input::placeholder { color: #98A2AC; }
.y2k-form .y2k-input:hover { border-color: #BCC5CE; }
.y2k-form .y2k-input:focus {
  outline: none;
  border-color: var(--y2k-blue);
  background: #fff;
  box-shadow: none;
}
.y2k-form .y2k-form .y2k-input:focus-visible { outline: 2px solid var(--y2k-blue); outline-offset: 1px; }
.y2k-form .y2k-textarea { min-height: 150px; resize: vertical; }

.y2k-select-wrap { position: relative; }
.y2k-form .y2k-select { padding-right: 44px; cursor: pointer; }
.y2k-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 2px solid var(--y2k-blue);
  border-bottom: 2px solid var(--y2k-blue);
  transform: rotate(45deg);
  pointer-events: none;
}

.y2k-file {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px dashed #C9D1D9;
  border-radius: 8px;
  background: var(--y2k-grey-light);
  font-family: var(--font-family);
  font-size: .92rem;
  color: var(--y2k-charcoal);
  cursor: pointer;
}
/* the theme's input[type="file"]::file-selector-button forces color:inherit,
   which outweighs a single class — match its weight to keep the label white */
.y2k-form input.y2k-file::file-selector-button,
.y2k-file::file-selector-button {
  margin-right: 12px;
  padding: 9px 18px;
  border: 0;
  /* a full pill squeezes the label on this short button — a rounded rect keeps
     "Choose File" inside its own bounds */
  border-radius: 7px;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--y2k-blue);
  color: #fff;
  font-family: var(--h1-font-family);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.y2k-file:hover { border-color: var(--y2k-orange); }

.y2k-help { margin: 7px 0 0; font-size: .84rem; color: var(--y2k-grey-mid); }
.y2k-form-submit { margin-top: 6px; border: 0; cursor: pointer; }
.y2k-form-note { margin: 16px 0 0; font-size: .9rem; color: var(--y2k-grey-mid); }
.y2k-form-note a { color: var(--y2k-blue); font-weight: 700; text-decoration: none; }
.y2k-form-note a:hover { color: var(--y2k-orange); }

@media (max-width: 620px) {
  .y2k-field-row { grid-template-columns: 1fr; gap: 0; }
  .y2k-form-submit { width: 100%; justify-content: center; }
}

/* ------------------------------- lightbox -------------------------------- */
.y2k-lb-open, .y2k-lb-open body { overflow: hidden; }
.y2k-lb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
.y2k-lb[hidden] { display: none; }
.y2k-lb-backdrop { position: absolute; inset: 0; background: rgba(15, 14, 69, .92); }
.y2k-lb-figure {
  position: relative;
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.y2k-lb-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: 10px;
  background: #10103a;
}
.y2k-lb-caption {
  font-family: var(--h1-font-family);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.y2k-lb-btn {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--y2k-ease), border-color .2s var(--y2k-ease);
}
.y2k-lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.y2k-lb-btn:hover { background: var(--y2k-orange); border-color: var(--y2k-orange); }
.y2k-lb-btn:focus-visible { outline: 3px solid var(--y2k-orange); outline-offset: 2px; }
.y2k-lb-btn[hidden] { display: none; }
.y2k-lb-close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.y2k-lb-prev { left: clamp(8px, 2.5vw, 28px); top: 50%; margin-top: -24px; }
.y2k-lb-next { right: clamp(8px, 2.5vw, 28px); top: 50%; margin-top: -24px; }

@media (max-width: 600px) {
  .y2k-lb-prev { left: 8px; }
  .y2k-lb-next { right: 8px; }
  .y2k-lb-img { max-height: calc(100vh - 190px); }
}

/* The theme styles bare <button> elements, which outweighed .y2k-form-submit
   and left the submit button with the old orange and a 4px radius. Match the
   weight so form buttons look like every other button on the site. */
.y2k-form .y2k-btn.y2k-form-submit,
.y2k-form button.y2k-btn {
  border-radius: var(--y2k-radius-pill);
  background: var(--y2k-orange);
  border: 2px solid var(--y2k-orange);
  color: #fff;
  box-shadow: none;
  text-transform: none;
  letter-spacing: .02em;
}
.y2k-form .y2k-btn.y2k-form-submit:hover,
.y2k-form button.y2k-btn:hover {
  background: var(--y2k-blue);
  border-color: var(--y2k-blue);
  color: #fff;
}