/* GENERATED from sydney-express-footer.html by scripts/build-footer-kit.mjs.
   Do not edit this file. Edit the fragment and re-run the script. */

/* ============================================================================
   SYDNEY EXPRESS — SITE FOOTER
   Dark editorial. One ink field, paper type, three coloured routes.

   Signature: the Express line map. One trunk line runs down the section and
   splits into three coloured branches, each ending at a station node and a
   destination. The pillars are parallel, not sequential, so they are drawn as
   diverging routes rather than numbered steps. The pillar logos already carry
   three trailing speed lines, so the diagram is the brand's own vocabulary.

   TWO PROJECT RULES ARE LOAD-BEARING IN THIS FILE
   1. The scoped reset below is `#se-footer-root *` (specificity 100), so EVERY
      rule that sets padding / margin / gap / line-height is prefixed with
      #se-footer-root. A bare .class (specificity 10) loses to the reset.
   2. This footer is dark end to end. Inherited `color` loses to ListingPro and
      Elementor descendant selectors on the live site, so EVERY text node sets
      its own colour with !important. Do not "tidy" these away.
   ========================================================================= */

#se-footer-root {
  /* Field. Never pure black: tinted toward the brand blue. */
  --f-ink:      #0B0E16;
  --f-ink-2:    #11151F;
  --f-ink-3:    #171C29;

  /* Type. Never pure white: warm paper against the cool ink. */
  --f-paper:    #F2F0EA;
  --f-paper-2:  rgba(242,240,234,0.66);
  --f-paper-3:  rgba(242,240,234,0.54);

  --f-rule:     rgba(242,240,234,0.13);
  --f-rule-hi:  rgba(242,240,234,0.28);

  /* Route colours, lifted from the real pillar pages. All clear 6.9:1 on the
     ink field. Events = express-events --blue-4, Essentials = --gold-4. */
  --f-events:   #5FA0DB;
  --f-exp:      #4FC79A;
  --f-ess:      #DDAA44;
  --f-blue:     #5FA0DB;

  /* Sydney Express blue is #0055FE, which only reaches 2.8:1 on this ink field
     and fails AA as text. This is that hue lifted to 5.8:1 so it can be used
     for link hover without going illegible. */
  --f-electric: #4A8CFF;

  --f-ease:     cubic-bezier(0.23, 1, 0.32, 1);
  --f-ease-io:  cubic-bezier(0.77, 0, 0.175, 1);

  --f-gut:      clamp(20px, 4vw, 48px);
  --f-band:     clamp(68px, 8.5vw, 124px);

  position: relative;
  display: block;
  background: var(--f-ink);
  color: var(--f-paper);
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  color-scheme: dark;
  -webkit-tap-highlight-color: rgba(95,160,219,0.18);
}

#se-footer-root *,
#se-footer-root *::before,
#se-footer-root *::after { box-sizing: border-box; margin: 0; padding: 0; }

#se-footer-root ul { list-style: none; }
#se-footer-root p, #se-footer-root li, #se-footer-root span, #se-footer-root a { overflow-wrap: break-word; }
#se-footer-root h2, #se-footer-root h3 { text-wrap: balance; }
#se-footer-root p { text-wrap: pretty; }
#se-footer-root img { max-width: 100%; display: block; }
#se-footer-root a { text-decoration: none; color: inherit; }
#se-footer-root a, #se-footer-root button { touch-action: manipulation; }
#se-footer-root svg { display: block; }

#se-footer-root :focus-visible {
  outline: 2px solid var(--f-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

#se-footer-root .sef-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding:
    clamp(64px, 8vw, 112px)
    calc(var(--f-gut) + env(safe-area-inset-right))
    calc(clamp(28px, 3vw, 40px) + env(safe-area-inset-bottom))
    calc(var(--f-gut) + env(safe-area-inset-left));
}

/* Off-screen bands cost nothing to lay out. */
#se-footer-root .sef-band { content-visibility: auto; }
/* Measured at 1440px. The `auto` keyword makes the browser remember each
   band's real height after it first renders, so these only need to be close
   enough to keep the scrollbar from jumping on the very first pass. */
#se-footer-root .sef-adv  { contain-intrinsic-size: auto 600px; }
#se-footer-root .sef-bgs  { contain-intrinsic-size: auto 750px; }
#se-footer-root .sef-room { contain-intrinsic-size: auto 750px; }

/* ── Type roles ─────────────────────────────────────────────────────────── */
/* Tracking is size-specific: negative as display type grows, positive on small
   caps labels. Leading runs looser than a light-on-dark equivalent would. */

#se-footer-root .sef-display {
  font-family: 'Syne', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--f-paper) !important;
}

#se-footer-root .sef-h2 { font-size: clamp(30px, 3.6vw, 46px); }

#se-footer-root .sef-lede {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.72;
  color: var(--f-paper-2) !important;
  max-width: 46ch;
}

#se-footer-root .sef-head { margin-bottom: clamp(40px, 5vw, 68px); }
#se-footer-root .sef-head .sef-lede { margin-top: 16px; }

/* Only the line map centres its heading, because the trunk is drawn as though
   it descends out of the title. Every other band stays left aligned. */
@media (min-width: 900px) {
  #se-footer-root .sef-head-mid { text-align: center; margin-bottom: 0; }
  #se-footer-root .sef-head-mid .sef-lede { margin-inline: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   BAND 1 — EXPRESS ADVANTAGE, THREE COLUMNS

   Three parallel services, so three equal columns. What stops this reading as
   a stock three-up is the dividers: each is a hairline carrying a static
   gradient blended from the two route colours it sits between, and each drops
   a travelling light beam while the section is hovered. The columns themselves
   have no card surface, no border and no background. The rules do the work.
   ═══════════════════════════════════════════════════════════════════════ */

#se-footer-root .sef-adv { padding-bottom: var(--f-band); }

#se-footer-root .sef-cols { display: grid; gap: clamp(38px, 4vw, 52px); }

@media (min-width: 900px) {
  #se-footer-root .sef-cols {
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    gap: 0 clamp(28px, 3.4vw, 52px);
    align-items: stretch;
  }
}

/* ── The divider ────────────────────────────────────────────────────────── */

#se-footer-root .sef-div {
  position: relative;
  width: 1px;
  justify-self: center;
  align-self: stretch;
  transform-origin: top center;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--d-top) 20%,
    var(--d-top) 45%,
    rgba(242,240,234,0.72) 50%,
    var(--d-bot) 55%,
    var(--d-bot) 80%,
    transparent 100%
  );
}
/* Each divider blends the two route colours it sits between, in column order:
   Experiences (--f-exp #4FC79A) | Essentials (--f-ess #DDAA44) | Events
   (--f-events #5FA0DB). Reorder the columns and these two lines move with them. */
#se-footer-root .sef-div.d-1 { --d-top: rgba(79,199,154,0.78);  --d-bot: rgba(221,170,68,0.78); }
#se-footer-root .sef-div.d-2 { --d-top: rgba(221,170,68,0.78);  --d-bot: rgba(95,160,219,0.78); }

/* A wider, very faint bloom either side, so the line reads as lit rather than
   drawn. Sits behind the beam and costs nothing: it never animates. */
#se-footer-root .sef-div::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: -6px;
  right: -6px;
  background: linear-gradient(180deg, transparent, var(--d-top), var(--d-bot), transparent);
  filter: blur(7px);
  opacity: 0.42;
  pointer-events: none;
}

/* The beam. Parked and invisible until the section is hovered, so nothing
   animates while the footer is just sitting there. */
#se-footer-root .sef-div::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(242,240,234,0.92), transparent);
  opacity: 0;
  transform: translateY(-110%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-cols:hover .sef-div::after {
    animation: sef-beam 2.6s cubic-bezier(0.23, 1, 0.32, 1) infinite;
  }
  #se-footer-root .sef-cols:hover .sef-div.d-2::after { animation-delay: 0.55s; }
}

@keyframes sef-beam {
  0%   { opacity: 0;    transform: translateY(-110%); }
  12%  { opacity: 0.85; }
  78%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateY(310%); }
}

/* Under 900px the columns stack, so a vertical rule between them is
   meaningless. A rule above each following column carries the separation. */
@media (max-width: 899px) {
  #se-footer-root .sef-div { display: none; }
  #se-footer-root .sef-svc + .sef-svc {
    padding-top: clamp(30px, 5vw, 44px);
    border-top: 1px solid var(--f-rule);
  }
}

/* ── A service column ───────────────────────────────────────────────────── */

#se-footer-root .sef-svc { position: relative; display: flex; flex-direction: column; }

#se-footer-root .sef-svc-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55));
  transition: transform 320ms var(--f-ease);
}
#se-footer-root .sef-svc-mark img { width: 100%; height: 100%; object-fit: contain; }

#se-footer-root .sef-svc-name {
  font-family: 'Syne', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--f-paper) !important;
}

#se-footer-root .sef-svc-why {
  margin-top: 11px;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.62;
  color: var(--f-line) !important;
}

#se-footer-root .sef-feats { margin-top: 20px; }
#se-footer-root .sef-feats li {
  padding: 10px 0;
  border-top: 1px solid var(--f-rule);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--f-paper-2) !important;
}

#se-footer-root .sef-go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 4px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--f-line) !important;
  box-shadow: inset 0 -1px 0 0 transparent;
  transition: box-shadow 220ms var(--f-ease), gap 220ms var(--f-ease);
}
#se-footer-root .sef-go svg { width: 15px; height: 15px; color: var(--f-line) !important; }

@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-go:hover { gap: 15px; box-shadow: inset 0 -1px 0 0 var(--f-line); }
  #se-footer-root .sef-svc:hover .sef-svc-mark { transform: translateY(-3px); }
}

/* ════════════════════════════════════════════════════════════════════════
   BAND 2 — BUSINESS GROWTH SERVICES, THE LEDGER
   Rows, not cards. The offer leads because the offer is the point.
   ═══════════════════════════════════════════════════════════════════════ */

#se-footer-root .sef-bgs { padding-bottom: var(--f-band); }

#se-footer-root .sef-bgs-head .sef-lede { max-width: 60ch; }
#se-footer-root .sef-bgs-head {
  display: grid;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
@media (min-width: 900px) {
  #se-footer-root .sef-bgs-head { grid-template-columns: 1fr auto; column-gap: 48px; }
}

#se-footer-root .sef-ledger { border-top: 1px solid var(--f-rule-hi); }

#se-footer-root .sef-row {
  display: grid;
  gap: 6px;
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-bottom: 1px solid var(--f-rule);
  transition: background-color 220ms var(--f-ease);
}
@media (min-width: 880px) {
  #se-footer-root .sef-row {
    grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.6fr) auto;
    align-items: center;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: 0;
  }
}

#se-footer-root .sef-offer {
  font-family: 'Syne', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(25px, 2.7vw, 35px);
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--f-paper) !important;
}

#se-footer-root .sef-row-copy { min-width: 0; max-width: 52ch; }
#se-footer-root .sef-row-copy p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--f-paper-2) !important;
}
#se-footer-root .sef-row-name {
  display: block;
  margin-bottom: 7px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.3;
  color: var(--f-paper) !important;
}

/* Partner wordmarks knocked back to paper tone, true colour on hover. */
#se-footer-root .sef-plogo {
  height: 30px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.72;
}
@media (min-width: 880px) {
  #se-footer-root .sef-plogo { object-position: right center; }
}

#se-footer-root .sef-bgs-foot {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: clamp(26px, 3vw, 38px);
}
@media (min-width: 880px) {
  #se-footer-root .sef-bgs-foot { grid-template-columns: 1fr auto; column-gap: 40px; }
}
#se-footer-root .sef-bgs-foot p {
  font-size: 14px;
  line-height: 1.66;
  color: var(--f-paper-2) !important;
}
#se-footer-root .sef-bgs-foot p b { color: var(--f-paper) !important; font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

#se-footer-root .sef-btn {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  background: var(--f-paper);
  color: var(--f-ink) !important;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform 160ms var(--f-ease), background-color 180ms var(--f-ease);
}
#se-footer-root .sef-btn svg { width: 15px; height: 15px; color: var(--f-ink) !important; }
#se-footer-root .sef-btn:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-btn:hover { background: #FFFDF7; }
}

#se-footer-root .sef-btn-ghost {
  background: transparent;
  color: var(--f-paper) !important;
  border: 1px solid var(--f-rule-hi);
}
#se-footer-root .sef-btn-ghost svg { color: var(--f-paper) !important; }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-btn-ghost:hover { background: var(--f-ink-2); border-color: var(--f-paper-3); }
}

/* ════════════════════════════════════════════════════════════════════════
   BAND 3 — DRUMMOYNE

   Sized to sit inside one desktop screen: one photograph rather than two, one
   paragraph rather than two, and the map beside the copy instead of below it.
   The photographs are already dark, warm interiors, so they need no scrim.
   ═══════════════════════════════════════════════════════════════════════ */

#se-footer-root .sef-room { padding-bottom: clamp(56px, 6vw, 88px); }
#se-footer-root .sef-room .sef-head { margin-bottom: clamp(28px, 3vw, 40px); }

#se-footer-root .sef-room-grid { display: grid; gap: clamp(28px, 3.4vw, 44px); }
@media (min-width: 940px) {
  #se-footer-root .sef-room-grid {
    grid-template-columns: 1.12fr 0.88fr;
    column-gap: clamp(36px, 4vw, 60px);
    align-items: stretch;
  }
  /* The photograph stretches to whatever height the copy column needs, so the
     two columns finish level instead of leaving a ragged gap under the photo. */
  #se-footer-root .sef-plates { display: flex; flex-direction: column; }
  #se-footer-root .sef-plates .sef-plate-main { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
}

#se-footer-root .sef-plate { position: relative; overflow: hidden; background: var(--f-ink-2); }
#se-footer-root .sef-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: transform 700ms var(--f-ease), filter 500ms var(--f-ease);
}
#se-footer-root .sef-plate-main { aspect-ratio: 16 / 10; }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-plate:hover img { transform: scale(1.03); filter: saturate(1); }
}

#se-footer-root .sef-caption {
  margin-top: 11px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--f-paper-3) !important;
}

#se-footer-root .sef-room-copy p {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--f-paper-2) !important;
  max-width: 52ch;
}
#se-footer-root .sef-room-copy p b { color: var(--f-paper) !important; font-weight: 600; }

/* Address set as type against a rule, not a chip. */
#se-footer-root .sef-addr {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--f-rule-hi);
}
#se-footer-root .sef-addr-street {
  font-family: 'Syne', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.02em;
  line-height: 1.24;
  color: var(--f-paper) !important;
}
#se-footer-root .sef-addr-sub {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--f-paper-2) !important;
}
#se-footer-root .sef-addr .sef-btn { margin-top: 18px; }

/* ── Map ────────────────────────────────────────────────────────────────────
   A real Google Maps embed. The keyless ?output=embed endpoint is used, the
   same one the contact page uses, so there is no Maps API key and no billing.

   The iframe is pointer-events:none with a link laid over it. That is
   deliberate: a live map inside a footer swallows the scroll wheel as you pass
   over it, which traps the page. The overlay keeps the map readable and sends
   a click to Google Maps proper.

   The filter is the standard dark-mode treatment for a Google embed. Google
   serves no dark tiles on the keyless endpoint, so a raw embed is a glaring
   white rectangle in the middle of a dark footer. */
#se-footer-root .sef-map {
  display: block;
  position: relative;
  margin-top: clamp(20px, 2.4vw, 28px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--f-ink-2);
  border: 1px solid var(--f-rule);
  transition: border-color 220ms var(--f-ease);
}
@media (min-width: 940px) { #se-footer-root .sef-map { aspect-ratio: 16 / 9; } }

#se-footer-root .sef-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.72) brightness(0.94) contrast(0.92);
}
#se-footer-root .sef-map-hit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(180deg, rgba(11,14,22,0.26) 0%, rgba(11,14,22,0.08) 42%, rgba(11,14,22,0.46) 100%);
  transition: background-color 220ms var(--f-ease);
}
#se-footer-root .sef-map-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: rgba(11,14,22,0.86);
  border: 1px solid var(--f-rule-hi);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--f-paper) !important;
  transition: transform 220ms var(--f-ease), border-color 220ms var(--f-ease);
}
#se-footer-root .sef-map-tag svg { width: 12px; height: 12px; color: var(--f-paper) !important; }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-map:hover { border-color: var(--f-rule-hi); }
  #se-footer-root .sef-map:hover .sef-map-tag { transform: translateY(-2px); border-color: var(--f-electric); }
}

/* ════════════════════════════════════════════════════════════════════════
   BAND 4 — DIRECTORY OF LINKS
   ═══════════════════════════════════════════════════════════════════════ */

#se-footer-root .sef-links { padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--f-rule-hi); }

#se-footer-root .sef-links-head {
  display: grid;
  gap: 26px;
  align-items: center;
  padding-bottom: clamp(40px, 5vw, 58px);
}
@media (min-width: 1000px) {
  #se-footer-root .sef-links-head {
    grid-template-columns: auto 1fr auto;
    column-gap: clamp(28px, 3.5vw, 56px);
  }
}

#se-footer-root .sef-lockup { display: flex; align-items: center; gap: 13px; }
#se-footer-root .sef-lockup img { width: 46px; height: 46px; object-fit: contain; }
#se-footer-root .sef-lockup-wm {
  font-family: 'Syne', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--f-paper) !important;
}
#se-footer-root .sef-lockup-wm small {
  display: block;
  margin-top: 8px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--f-paper-3) !important;
}

#se-footer-root .sef-search {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 17px;
  background: var(--f-ink-2);
  border: 1px solid var(--f-rule);
  font-size: 14px;
  color: var(--f-paper-2) !important;
  transition: border-color 200ms var(--f-ease), background-color 200ms var(--f-ease);
}
#se-footer-root .sef-search span { min-width: 0; }
#se-footer-root .sef-search svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--f-paper-3) !important; }
#se-footer-root .sef-search span { color: var(--f-paper-2) !important; }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-search:hover { border-color: var(--f-electric); background: var(--f-ink-3); }
  #se-footer-root .sef-search:hover span { color: var(--f-paper) !important; }
}

#se-footer-root .sef-claim {
  display: block;
  padding: 17px 21px;
  max-width: 330px;
  background: var(--f-paper);
  transition: transform 180ms var(--f-ease);
}
#se-footer-root .sef-claim b {
  display: block;
  font-family: 'Syne', 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--f-ink) !important;
}
#se-footer-root .sef-claim span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(11,14,22,0.72) !important;
}
#se-footer-root .sef-claim:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-claim:hover { transform: translateY(-2px); }
}

#se-footer-root .sef-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
}
@media (min-width: 700px)  { #se-footer-root .sef-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { #se-footer-root .sef-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

#se-footer-root .sef-col h3 {
  margin-bottom: 17px;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--f-paper) !important;
}
#se-footer-root .sef-col li { margin-bottom: 10px; }
#se-footer-root .sef-col a {
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--f-paper-2) !important;
  background-image: linear-gradient(var(--f-electric), var(--f-electric));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 260ms var(--f-ease), color 200ms var(--f-ease);
}
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-col a:hover { color: var(--f-electric) !important; background-size: 100% 1px; }
}

/* ════════════════════════════════════════════════════════════════════════
   BAND 5 — BASE
   ═══════════════════════════════════════════════════════════════════════ */

#se-footer-root .sef-base {
  display: grid;
  gap: 22px;
  align-items: center;
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 26px;
  border-top: 1px solid var(--f-rule);
}
@media (min-width: 940px) {
  #se-footer-root .sef-base { grid-template-columns: 1fr auto auto; column-gap: 36px; }
}

#se-footer-root .sef-fine {
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--f-paper-3) !important;
  max-width: 62ch;
}
#se-footer-root .sef-fine b { color: var(--f-paper-2) !important; font-weight: 500; }
#se-footer-root .sef-fine a {
  color: var(--f-paper-2) !important;
  border-bottom: 1px solid var(--f-rule-hi);
  transition: color 200ms var(--f-ease), border-color 200ms var(--f-ease);
}
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-fine a:hover { color: var(--f-electric) !important; border-bottom-color: var(--f-electric); }
}

/* Each platform in its own brand colour, at full saturation. */
#se-footer-root .sef-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#se-footer-root .sef-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: transform 200ms var(--f-ease);
}
#se-footer-root .sef-social svg { width: 26px; height: 26px; }

/* Brand colours forced, not left as presentation attributes.
   ListingPro carries its own SVG icon styling (a plain white glyph at rest,
   green on hover) that was clobbering the Instagram mark, because CSS beats a
   bare fill="" attribute regardless of specificity -- an unrelated stylesheet
   rule of any weight wins over it. Facebook and YouTube happened to survive
   because ListingPro's fallback colours are close enough to blue and red to
   pass unnoticed; Instagram's gradient has no such near-miss. Every fill here
   is therefore reasserted as class-targeted CSS with !important, and again
   inside :hover so a later-loading theme :hover rule cannot re-win the fight.
   Same root cause as the Dark Card Problem elsewhere in this file: a
   descendant selector beats an inherited or attribute-level value. */
#se-footer-root .sef-social .sef-ig-bg   { fill: url(#sef-ig-grad) !important; stroke: none !important; }
#se-footer-root .sef-social .sef-ig-ring { fill: none !important; stroke: #fff !important; stroke-width: 1.9px; }
#se-footer-root .sef-social .sef-ig-dot  { fill: #fff !important; stroke: none !important; }
#se-footer-root .sef-social .sef-fb-bg   { fill: #1877F2 !important; stroke: none !important; }
#se-footer-root .sef-social .sef-fb-f    { fill: #fff !important; stroke: none !important; }
#se-footer-root .sef-social .sef-yt-bg   { fill: #FF0000 !important; stroke: none !important; }
#se-footer-root .sef-social .sef-yt-play { fill: #fff !important; stroke: none !important; }

#se-footer-root .sef-social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-social a:hover { transform: translateY(-3px); }
  /* Reasserted a second time under :hover on purpose -- see note above. */
  #se-footer-root .sef-social a:hover .sef-ig-bg   { fill: url(#sef-ig-grad) !important; }
  #se-footer-root .sef-social a:hover .sef-ig-ring { fill: none !important; stroke: #fff !important; }
  #se-footer-root .sef-social a:hover .sef-ig-dot  { fill: #fff !important; }
  #se-footer-root .sef-social a:hover .sef-fb-bg   { fill: #1877F2 !important; }
  #se-footer-root .sef-social a:hover .sef-fb-f    { fill: #fff !important; }
  #se-footer-root .sef-social a:hover .sef-yt-bg   { fill: #FF0000 !important; }
  #se-footer-root .sef-social a:hover .sef-yt-play { fill: #fff !important; }
}

#se-footer-root .sef-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  background: transparent;
  border: 1px solid var(--f-rule-hi);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f-paper-2) !important;
  cursor: pointer;
  transition: color 200ms var(--f-ease), border-color 200ms var(--f-ease), background-color 200ms var(--f-ease);
}
#se-footer-root .sef-top svg {
  width: 12px; height: 12px;
  color: var(--f-paper-2) !important;
  transition: transform 220ms var(--f-ease);
}
#se-footer-root .sef-top:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  #se-footer-root .sef-top:hover { color: var(--f-electric) !important; border-color: var(--f-electric); background: var(--f-ink-2); }
  #se-footer-root .sef-top:hover svg { transform: translateY(-2px); color: var(--f-electric) !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOTION
   The routes draw themselves as they scroll into view. Scroll-driven CSS, so
   there is no scroll listener and no IntersectionObserver, and it keeps
   running while the main thread is busy.

   Hidden initial states exist ONLY inside this block. A browser without
   animation-timeline, or a visitor who asked for reduced motion, gets the
   fully visible static footer. Content can never be stranded invisible, which
   is the recurring Elementor reveal failure this avoids.
   ═══════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* The dividers draw downward as the section arrives. */
    #se-footer-root .sef-div {
      transform: scaleY(0);
      animation: sef-draw-y linear both;
      animation-timeline: view();
      animation-range: entry 18% cover 34%;
    }

    #se-footer-root .sef-svc,
    #se-footer-root .sef-row,
    #se-footer-root .sef-plates,
    #se-footer-root .sef-room-copy {
      opacity: 0;
      transform: translateY(14px);
      animation: sef-rise 1ms linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 78%;
    }
  }
}

@keyframes sef-draw-y { to { transform: scaleY(1); } }
@keyframes sef-rise  { to { opacity: 1; transform: translateY(0); } }

/* Respect the other two accessibility preferences too. */
@media (prefers-reduced-motion: reduce) {
  #se-footer-root *, #se-footer-root *::before, #se-footer-root *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-contrast: more) {
  #se-footer-root {
    --f-paper-2: rgba(242,240,234,0.86);
    --f-paper-3: rgba(242,240,234,0.72);
    --f-rule: rgba(242,240,234,0.32);
    --f-rule-hi: rgba(242,240,234,0.52);
  }
}