/* directory-shell.css — nav + footer styles for /directory pages
   Extracted from main site CSS. Do not edit manually. */

/* Custom properties - define at :root for fallback */
:root {
  --black: #0b0b0b;
  --champagne: #f4efe4;
  --orange: #d4652a;
  --graphite: #1e1d1a;
  --grey: #736a5a;
  --line: rgba(244, 239, 228, 0.12);
  --muted: #b3aa97;
}

/* Re-define for nav and footer to isolate from directory CSS variables */
.site-header,
.site-footer {
  --black: #0b0b0b;
  --champagne: #f4efe4;
  --orange: #d4652a;
  --graphite: #1e1d1a;
  --grey: #736a5a;
  --line: rgba(244, 239, 228, 0.12);
  --muted: #b3aa97;
}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100%;left:10px;z-index:999;padding:8px 16px;background:var(--orange);color:var(--black);font-weight:700}
.skip:focus{top:10px}

/* Directory page body overrides */
body.directory-page {
  padding-top: 80px;
}
@media(max-width:760px){
  body.directory-page { padding-top: 64px; }
}

/* === Nav bar (from nav.css) === */
/* ═══════════════════════════════════════════════
   Loading screen
   ═══════════════════════════════════════════════ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0b0b0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.loader-text {
  display: flex;
  overflow: hidden;
}

.loader-text span {
  display: inline-block;
  font: 700 clamp(80px, 14vw, 150px)/1 Oswald, Impact, sans-serif;
  color: #f4efe4;
  letter-spacing: -0.03em;
  transform: translateY(110%);
  will-change: transform;
}

.loader-dot {
  color: #d4652a;
}

.loader-sub {
  font: 500 clamp(12px, 2vw, 18px) Oswald, Impact, sans-serif;
  letter-spacing: 0.35em;
  color: #f4efe4;
  opacity: 0;
}

/* Hide ancillary elements behind loader; .page stays opacity:1
   so the LCP image paints immediately (behind the opaque overlay). */
body:has(.loader) .skip,
body:has(.loader) .contact-dock {
  opacity: 0;
}


/* ═══════════════════════════════════════════════
   Resizable navbar + floating dropdown cards
   ═══════════════════════════════════════════════ */

/* ─── Base: full-width fixed bar ─── */
.site-header.nav-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 80px;
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: none;
  transition:
    max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4vw;
  height: 100%;
}

/* ─── Scrolled: floating pill ─── */
.nav-shell.compact {
  top: 10px;
  height: 56px;
  max-width: 960px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(244, 239, 228, 0.07);
  border-bottom-color: rgba(244, 239, 228, 0.07);
  background: rgba(11, 11, 11, 0.75);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(244, 239, 228, 0.03) inset;
}

.nav-shell.compact .nav-inner {
  padding: 0 12px 0 24px;
}

/* Logo */
.nav-shell .site-logo {
  width: 80px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.nav-shell.compact .site-logo {
  width: 60px;
}

/* Nav items tighten in pill */
.nav-shell.compact #primary-nav {
  gap: 22px;
  font-size: 11px;
}

.nav-shell.compact .nav-trigger {
  font-size: 11px;
  padding: 12px 0;
}

/* CTA pill button */
.nav-shell.compact #primary-nav .nav-cta {
  padding: 7px 14px;
  gap: 16px;
  border-radius: 999px;
  font-size: 11px;
}

/* CTA button — orange, stands out from nav */
#primary-nav .nav-cta {
  border-radius: 8px;
  background: var(--orange);
  color: var(--black);
  border-color: var(--orange);
}
#primary-nav .nav-cta:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--black);
}

/* Animation panel — rounded card */
.animation-panel {
  border-radius: 14px;
  overflow: hidden;
}

/* Hero — GSAP controls animations, disable CSS transitions */
.row-arrow {
  transition: none !important;
}

.scene {
  transition: none !important;
}

.panel-head {
  overflow: hidden;
}

#panel-title {
  will-change: transform, opacity;
}

/* Page offset for fixed header */
.page {
  padding-top: 80px;
}

html {
  scroll-padding-top: 100px;
}


/* ═══════════════════════════════════════════════
   Floating dropdown cards (replaces full-width mega-panels)
   ═══════════════════════════════════════════════ */

.nav-item {
  position: relative !important;
}

.mega-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 12px);
  width: max-content;
  border-radius: 16px;
  background: var(--champagne);
  color: var(--black);
  border: none;
  border-top: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  padding: 30px 34px 24px;
  max-height: 80vh;
  display: grid;
  align-items: start;
}

/* Orange accent line at top */
.mega-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  border-radius: 16px 16px 0 0;
}

/* Invisible hover bridge — covers the gap between trigger and dropdown */
.mega-panel::after {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

/* Services dropdown — 3 columns */
.services-mega {
  display: grid;
  min-width: 680px;
  max-width: 760px;
  grid-template-columns: 1fr 1.4fr 0.85fr;
  gap: 24px;
}

/* Projects dropdown — 3 cards */
.projects-mega {
  display: grid;
  min-width: 580px;
  max-width: 660px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* CPaaS dropdown — 3 columns */
.cpaas-mega {
  display: grid;
  min-width: 700px;
  max-width: 820px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* White Label dropdown — 3 columns */
.wl-mega {
  display: grid;
  min-width: 720px;
  max-width: 860px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Industries dropdown — 3 columns */
.industries-mega {
  display: grid;
  min-width: 680px;
  max-width: 780px;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Locations dropdown — 4 columns */
.locations-mega {
  display: grid;
  min-width: 760px;
  max-width: 920px;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Category label headers inside mega panels — large Oswald style */
.mega-cat-label {
  display: block !important;
  font-family: Oswald, Impact, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #ad4500 !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* Section headers (BUILD / MARKET / AUTOMATE) */
.mega-panel > div > span:not(.mega-cat-label) {
  color: #ad4500 !important;
  letter-spacing: 0.08em;
  margin-bottom: 10px !important;
}

/* Links inside dropdowns */
.mega-panel a {
  color: var(--black) !important;
  border-bottom-color: rgba(11, 11, 11, 0.12) !important;
  padding: 10px 8px !important;
  border-radius: 8px;
  transition: background 0.2s;
}

.mega-panel a:hover {
  background: rgba(11, 11, 11, 0.05);
}

.mega-panel a:after {
  display: none !important;
}

.mega-panel small {
  color: #615845 !important;
}

/* "Explore all" / "View all" link at bottom */
.mega-panel .mega-all {
  color: #615845 !important;
  font-size: 11px !important;
  border-top: 1px solid rgba(11, 11, 11, 0.1);
  border-bottom: none !important;
  margin-top: 8px;
  padding-top: 14px !important;
  border-radius: 0;
}

.mega-panel .mega-all:hover {
  color: #ad4500 !important;
  background: none;
}

/* Project images in dropdown */
.projects-mega img {
  border-radius: 8px;
}

.projects-mega strong {
  color: var(--black);
  font-size: 13px !important;
}


/* ─── Compact pill: dropdown adjustments ─── */
.nav-shell.compact .mega-panel {
  top: calc(100% + 12px);
  border-radius: 16px;
}


/* ═══════════════════════════════════════════════
   Tablet
   ═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nav-shell.compact {
    max-width: 840px;
  }

  .nav-shell.compact #primary-nav {
    gap: 16px;
  }

  .nav-shell.compact .nav-inner {
    padding: 0 8px 0 18px;
  }

  .services-mega {
    min-width: 580px;
    max-width: 640px;
  }

  .projects-mega {
    min-width: 500px;
    max-width: 560px;
  }
}


/* ═══════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════ */
@media (max-width: 760px) {
  .site-header.nav-shell,
  .nav-shell.compact {
    top: 0;
    height: 64px;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    background: rgba(11, 11, 11, 0.95);
  }

  .nav-inner,
  .nav-shell.compact .nav-inner {
    padding: 0 5vw;
  }

  .nav-shell .site-logo,
  .nav-shell.compact .site-logo {
    width: 68px;
  }

  #primary-nav {
    top: 64px !important;
  }

  /* Mobile dropdowns revert to inline */
  .nav-item {
    position: static !important;
  }

  .mega-panel,
  .nav-shell.compact .mega-panel {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    min-width: 0;
    max-width: none;
    border-radius: 12px;
    box-shadow: none;
    border: none;
    background: var(--champagne);
    color: var(--black);
    padding: 18px;
    margin: 8px 0;
    max-height: none;
  }

  .mega-panel::before {
    display: none;
  }

  .services-mega,
  .projects-mega {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }

  .page {
    padding-top: 64px;
  }

  html {
    scroll-padding-top: 74px;
  }
}




/* Hero enquiry — in-place success state */
.hero-enquiry-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  color: var(--champagne);
  letter-spacing: -.02em;
}
.hero-enquiry-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}


/* === Nav mega panels (from refresh.css) === */
.nav-shell{height:100px;transition:height .3s}
.nav-shell.compact{height:78px}
.nav-shell .site-logo{transition:width .3s}
.nav-shell.compact .site-logo{width:78px}
.nav-trigger{background:none;border:0;font-size:12px;padding:20px 0;display:flex;gap:25px;align-items:center}
.nav-trigger span{font-size:20px;transition:transform .3s}
.nav-trigger[aria-expanded=true] span{transform:rotate(45deg);color:var(--orange)}
.mega-panel{position:absolute;left:0;top:100%;width:100%;background:var(--champagne);color:var(--black);padding:35px;box-shadow:0 20px 35px #0004;border-top:4px solid var(--orange);display:grid;gap:30px;max-height:75vh;overflow:auto}
.mega-panel>div>span{font:500 25px Oswald;color:#ad4500;display:block;margin-bottom:12px}
.mega-panel a{display:block!important;padding:12px 0!important;border-bottom:1px solid #0b0b0b25;font-size:14px}
.mega-panel a:after{display:none}
.mega-panel small{display:block;font-size:9px;line-height:1.7;color:#615845;margin-top:6px}
.mega-panel .mega-all{grid-column:1/-1;font-size:11px;font-family:Montserrat}
.no-js .mega-panel{display:none}
.nav-shell,.nav-shell.compact{height:80px}
.nav-shell .site-logo,.nav-shell.compact .site-logo{width:80px}
.nav-trigger{width:100%;justify-content:space-between;font:500 27px Oswald;padding:12px 0}
.mega-panel{position:static;box-shadow:none;padding:18px;margin:12px 0;max-height:none;gap:20px}
.mega-panel small{font-size:9px}
.light-section button:focus-visible,.light-section a:focus-visible,.mega-panel a:focus-visible{outline-color:#0b0b0b}
.mega-panel{font-family:Montserrat}
.mega-panel a{font-family:Montserrat}

/* === Nav/footer rules (from site.css) === */
button{color:inherit}
#primary-nav{display:flex;align-items:center;gap:36px;font-size:12px;font-weight:500}
#primary-nav a{position:relative;padding:14px 0}
#primary-nav a:after{content:'';position:absolute;left:0;bottom:8px;width:100%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s}
#primary-nav a:hover:after,#primary-nav a[aria-current]:after{transform:scaleX(1)}
#primary-nav .nav-cta{border:1px solid var(--line);padding:11px 16px;display:flex;gap:35px}
#primary-nav .nav-cta:hover{background:var(--orange);color:var(--black)}
.menu-toggle{display:none}
.button{background:var(--orange);color:var(--black);border:0;display:inline-flex;align-items:center;justify-content:space-between;gap:40px;padding:17px 24px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}
.button:hover{background:var(--champagne);transform:translateY(-2px)}
.industry-tabs button{background:none;border:0;border-bottom:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;font:500 32px Oswald;text-align:left;color:var(--muted)}
.industry-tabs button[aria-selected=true]{color:var(--orange)}
.industry-tabs button[aria-selected=true] span{opacity:1}
.quote-controls button{border:1px solid var(--line);background:none;width:50px;height:50px;font-size:20px}
.quote-controls button:hover{background:var(--orange);color:var(--black)}
.site-footer{border-top:1px solid var(--line);padding:80px 0 30px}
.footer-heading{display:block;font:500 clamp(55px,9.8vw,145px)/1.04 Oswald;letter-spacing:-.035em;position:relative;padding:0 100px 60px 0;transition:color .3s}
.footer-heading>span{position:absolute;right:0;top:0;color:var(--orange)}
.footer-heading:hover{color:var(--orange)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;border-top:1px solid var(--line);padding:40px 0}
.footer-grid img{width:100px;height:auto}
.footer-grid p{font-size:12px;margin:14px 0}
.footer-grid nav,.footer-connect{display:flex;flex-direction:column;align-items:start;gap:12px;font-size:12px}
.footer-connect button,.footer-bottom button,.text-button{background:none;border:0;padding:0;color:var(--champagne);font-size:12px}
.footer-grid a:hover,.footer-connect button:hover{color:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding:26px 0;border-top:1px solid var(--line);font-size:10px;color:var(--grey)}
.footer-bottom button{font-size:10px;color:var(--grey)}
.work-filters button{background:none;border:0;border-bottom:1px solid transparent;font-size:12px;padding:10px 0;color:var(--muted)}
.work-filters button[aria-pressed=true]{color:var(--orange);border-color:var(--orange)}
.contact-channel-list button{display:flex;width:100%;justify-content:space-between;background:none;border:0;border-bottom:1px solid var(--line);padding:20px 0;font-size:14px}
.contact-channel-list button:hover{color:var(--orange)}
.contact-dock{position:fixed;right:22px;bottom:22px;display:flex;gap:4px;background:#181818;border:1px solid #464139;padding:6px;z-index:40;box-shadow:0 8px 25px #0005}
.contact-dock button{width:40px;height:40px;padding:10px;border:0;background:none;color:var(--champagne);transition:background .2s}
.contact-dock button:hover{background:var(--orange);color:var(--black)}
.contact-dock svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chat-panel{position:fixed;right:22px;bottom:87px;width:370px;max-width:calc(100vw - 30px);border:1px solid #514637;background:var(--black);z-index:45;box-shadow:0 20px 65px #0009}
.chat-header{padding:22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:start}
.chat-header strong{display:block;font-size:13px}
.chat-header span{display:block;font-size:9px;color:var(--grey);margin-top:5px}
.chat-header button{background:none;border:0;font-size:25px;padding:0 0 8px 12px;line-height:1}
.chat-messages{height:240px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:15px}
.chat-messages p{padding:13px;margin:0;font-size:12px;line-height:1.6;max-width:95%}
.chat-prompts{display:flex;gap:8px;padding:0 20px 15px}
.chat-prompts button{background:none;border:1px solid var(--line);font-size:9px;padding:7px 9px}
.chat-prompts button:hover{border-color:var(--orange)}
#chat-form{display:flex;padding:15px;border-top:1px solid var(--line);gap:6px}
#chat-form button{width:45px;flex-shrink:0;background:var(--orange);color:var(--black);border:0;font-size:23px}
.dialog-close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:25px}
.text-button{display:block;margin-top:25px;border-bottom:1px solid currentColor;padding-bottom:4px}
.no-js .contact-dock,.no-js .menu-toggle,.no-js .work-filters,.no-js .quote-controls{display:none}
.no-js .industry-tabs button{pointer-events:none}
.button:disabled{opacity:.5;pointer-events:none}
.footer-socials{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap}
.footer-socials a{font-size:11px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.footer-socials a:hover{color:var(--orange);border-color:var(--orange)}
.site-footer{padding-top:60px}
.footer-heading{font-size:clamp(45px,10.8vw,75px);padding-right:50px;padding-bottom:40px}
.footer-grid{grid-template-columns:1fr 1fr;gap:30px}
.footer-grid>div:first-child{grid-column:1/-1}
.footer-bottom{flex-wrap:wrap;padding-bottom:65px;font-size:9px;gap:16px}
.work-filters button{font-size:10px}
.contact-dock{right:15px;bottom:15px;padding:4px}
.contact-dock button{width:36px;height:36px;padding:8px}
.chat-panel{right:15px;bottom:70px}
.chat-messages{height:min(230px,34vh)}
.quote-bottom button{width:45px;height:45px;font-size:20px;background:none;border:1px solid var(--line)}
.quote-bottom button:hover{color:var(--orange);border-color:var(--orange)}
.quote-bottom button{width:38px;height:38px}
.service-detail-layout .button{margin-top:30px}

@media(max-width:1100px){
  #primary-nav{gap:24px}
}
@media(max-width:760px){
  .menu-toggle{display:flex;background:none;border:0;gap:30px;align-items:center;font-size:12px;padding:12px 0 12px 20px}
  .menu-toggle span{font-size:24px;line-height:1;transition:transform .3s}
  .menu-toggle[aria-expanded=true] span{transform:rotate(45deg)}
  #primary-nav{display:none;position:absolute;top:80px;left:0;width:100%;background:var(--black);border-bottom:1px solid var(--line);padding:25px 20px;flex-direction:column;align-items:stretch;gap:5px;font-size:22px;font-family:Oswald}
  #primary-nav.open{display:flex}
  .no-js #primary-nav{display:flex;position:static;flex-direction:row;font-family:Montserrat;font-size:9px;gap:10px;width:auto;padding:0;border:0}
  .no-js #primary-nav .nav-cta{padding:8px}
  .industry-tabs button{font-size:25px;padding:17px 0}
  .site-footer{padding-top:60px}
  .footer-heading{font-size:clamp(45px,10.8vw,75px);padding-right:50px;padding-bottom:40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-bottom{flex-wrap:wrap;padding-bottom:65px;font-size:9px;gap:16px}
  .work-filters button{font-size:10px}
  .contact-dock{right:15px;bottom:15px;padding:4px}
  .contact-dock button{width:36px;height:36px;padding:8px}
  .chat-panel{right:15px;bottom:70px}
  .chat-messages{height:min(230px,34vh)}
}
@media(max-width:760px){
  .quote-bottom button{width:38px;height:38px}
}

/* === Footer dark theme (from page-theme.css) === */
/* ── Full-bleed helper ─────────────────────────────────
   Sections + hero + footer live inside .page (90vw centred).
   Stretch all to 100vw; restore padding = page gutter so
   inner content stays at the exact same horizontal position.
   ──────────────────────────────────────────────────────*/
.section,
.hero-grid,
.hero-bottom,
.vsi-services,
.site-footer{box-sizing: border-box;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-left:  max(5vw, calc((100vw - 1440px) / 2));
  padding-right: max(5vw, calc((100vw - 1440px) / 2));}
.section, .hero-grid, .hero-bottom, .vsi-services, .site-footer{padding-left: 4vw;
    padding-right: 4vw;}
.section, .hero-grid, .hero-bottom, .vsi-services, .site-footer{padding-left: 5.5vw;
    padding-right: 5.5vw;}
.site-footer{background: #0b0b0b;}
/* Footer keeps its dark-theme tokens intact */
.site-footer{--champagne: #e6d8b8;
  --muted:     #b3aa97;
  --line:      #34332f;
  --grey:      #8a8a8a;
  color: #e6d8b8;}
/* ── Footer legal row ─────────────────────────────────── */
.footer-legal{display: flex;
  gap: 20px;
  align-items: center;}
.footer-legal a{color: var(--grey);
  font-size: 10px;
  text-decoration: none;
  transition: color 0.2s;}
.footer-legal a:hover{color: var(--champagne);}
/* ── Footer social links — remove hover underline ─── */
.footer-socials a{border-bottom: none !important;
  padding-bottom: 0 !important;}
/* ── Ask AI footer strip ──────────────────────────── */
.footer-ask-ai{margin-top: 18px;}
.footer-ask-label{font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4652a;
  margin: 0 0 10px;}
.footer-ai-icons{display: flex;
  gap: 10px;
  flex-wrap: wrap;}
.footer-ai-icons a{width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #1e1d1a;
  border: 1px solid rgba(244,239,228,0.06);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;}
.footer-ai-icons a:hover{border-color: #d4652a;
  background: #2a2520;
  transform: translateY(-2px);}
.footer-ai-icons svg{width: 18px;
  height: 18px;}
.footer-ai-toast{position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1d1a;
  color: #f4efe4;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #d4652a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;}
.footer-ai-toast.is-visible{opacity: 1;
  transform: translateX(-50%) translateY(0);}
.section,
.hero-grid,
.hero-bottom,
.vsi-services,
.site-footer{box-sizing: border-box;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-left:  max(5vw, calc((100vw - 1440px) / 2));
  padding-right: max(5vw, calc((100vw - 1440px) / 2));}
.section, .hero-grid, .hero-bottom, .vsi-services, .site-footer{padding-left: 4vw;
    padding-right: 4vw;}
.section, .hero-grid, .hero-bottom, .vsi-services, .site-footer{padding-left: 5.5vw;
    padding-right: 5.5vw;}

.footer-ask-ai{margin-top: 18px;}
.footer-ask-label{font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4652a;
  margin: 0 0 10px;}
.footer-ai-icons{display: flex;
  gap: 10px;
  flex-wrap: wrap;}
.footer-ai-icons a{width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #1e1d1a;
  border: 1px solid rgba(244,239,228,0.06);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;}
.footer-ai-icons a:hover{border-color: #d4652a;
  background: #2a2520;
  transform: translateY(-2px);}
.footer-ai-icons svg{width: 18px;
  height: 18px;}
.footer-ai-toast{position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e1d1a;
  color: #f4efe4;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #d4652a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 9999;}
.footer-ai-toast.is-visible{opacity: 1;
  transform: translateX(-50%) translateY(0);}

/* === Directory page overrides === */
/* Neutralize full-bleed rules — directory content is already full-width */
body.directory-page .section,
body.directory-page .hero-grid,
body.directory-page .hero-bottom,
body.directory-page .vsi-services {
  width: auto;
  position: static;
  left: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Footer full-bleed without .page wrapper */
body.directory-page .site-footer {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  left: 0;
  margin-left: 0;
  padding-left: max(5vw, calc((100vw - 1440px) / 2));
  padding-right: max(5vw, calc((100vw - 1440px) / 2));
  background: #0b0b0b;
}
@media (max-width: 1100px) {
  body.directory-page .site-footer { padding-left: 4vw; padding-right: 4vw; }
}
@media (max-width: 760px) {
  body.directory-page .site-footer { padding-left: 5.5vw; padding-right: 5.5vw; }
}

/* Ensure footer typography */
body.directory-page .site-footer {
  --champagne: #e6d8b8;
  --muted: #b3aa97;
  --line: #34332f;
  --grey: #8a8a8a;
  color: #e6d8b8;
  font-family: Montserrat, Arial, sans-serif;
}

body.directory-page .site-footer a {
  color: #e6d8b8;
  text-decoration: none;
}

body.directory-page .site-footer a:hover {
  color: var(--orange);
}

/* Contact dock */
body.directory-page .contact-dock {
  border-radius: 14px;
}

/* Font imports for nav/footer */
@font-face {
  font-family: Montserrat;
  src: url("/assets/Montserrat.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Oswald;
  src: url("/assets/Oswald.woff2") format("woff2");
  font-display: swap;
}