.page-contact .contact-stage{
  position: relative;
  width: 100%;
  overflow: visible;
}

/* ABOUT: final tie-breaker to prevent stacking */
.page-about .about-desktop { display: block !important; }
.page-about .about-mobile { display: none !important; }

@media (max-width: 768px) {
  .page-about .about-desktop { display: none !important; }
  .page-about .about-mobile { display: block !important; }
}



@font-face {
  font-family: "GlacialIndifference";
  src: url("fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* CONTACT OVERRIDE: ensure CTA is positioned relative to the SVG stage (not viewport) */
.page-contact .contact-stage{
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

/* ABOUT: final tie-breaker for Next steps CTA positioning */
.page-about .page-svg-wrap a.page-cta.page-cta--about-nextsteps.cta-desktop{
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(1%);
}

/* ABOUT: final tie-breaker for CTA centering + 1% downshift */
.page-about .about-stage a.page-cta--about-nextsteps.cta-desktop{
  left: 50% !important;
  transform: translate(-50%, -50%) translateY(1%) !important;
}




/* Parent positioning context */
.page-contact .contact-stage{
  position: relative;
}

/* Email overlay placement (desktop) */
.page-contact .email-cta{
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}

/* Base sizing */
.page-contact .email-cta img,
.page-contact .email-cta video{
  display: block;
  height: auto;
}

/* Layering */
.page-contact .email-static{ display: block; }
.page-contact .email-video{ display: none; }
.page-contact .email-underline{ display: none; }

/* No CSS transitions (instant swaps) */
.page-contact .email-cta *{
  transition: none !important;
  animation: none !important;
}


/* CONTACT: base stage/animation sizing (no fixed viewport positioning) */
.page-contact .contact-stage{
  position: relative;
  width: 100%;
  overflow: visible;
}


/* CONTACT-ONLY: final placement and sizing (added per request) */


/* (email-hover and email-anim visibility controlled via script/css where needed) */

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  padding: 0 20px;

  /* match site background for seamless look */
  background: #FCF8ED;
  border: 0 !important;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 18px;
  font-family: "GlacialIndifference" !important;
  /* scale nav typography with viewport so it follows the SVG scaling */
  font-size: clamp(12px, 1.2vw, 18px);

  z-index: 2147483647;
}

.top-nav{
  z-index: 1000;
}

/* Page-scoped nav logo sizing for What We Do page only */
/*
.page-whatwedo .top-nav .brand img,
.page-whatwedo .top-nav .brand-logo{
  width: auto !important;
  height: 21px !important;
  max-height: 21px !important;
  max-width: 140px !important;
}
*/

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: "GlacialIndifference" !important;
}

.brand-logo {
  /* site-wide logo target: 75% of 28px = 21px */
  height: 21px;
  width: auto;
  display: block;
}

/* Prevent the top navigation logo from inheriting full-width image rules.
   Keep layout/gaps untouched — only lock the logo size for predictability. */
.top-nav .brand img,
.top-nav .brand-logo{
  width: auto !important;
  height: 21px !important;
  max-height: 21px !important;
  display: block;
}

.navlink {
  font-family: "GlacialIndifference" !important;
  font-size: 1em;
  line-height: 1;
  font-weight: 400;

  text-decoration: none;
  color: #050606;
  -webkit-tap-highlight-color: transparent;
}

.nav-right {
  margin-left: auto;
  display: flex;
  gap: 36px;
  font-family: "GlacialIndifference" !important;
}

/* Tablet breakpoint: allow nav to wrap and reduce spacing/font between 769px–1050px
   This prevents the nav from clipping when the viewport is in a tablet-ish size. */
@media (max-width: 1050px) and (min-width: 769px){
  .top-nav .nav-inner{
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .top-nav .brand{
    flex: 0 0 auto;
  }

  .top-nav .nav-right{
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 18px;
  }

  .top-nav .navlink{
    font-size: 15px;
    white-space: nowrap;
  }
}

/* Safety: never clip nav contents */
.top-nav,
.top-nav .nav-inner{
  overflow: visible;
}

/* Tablet widths: allow wrapping and reduce spacing/font between 769px–1050px
   This prevents the nav from clipping when the viewport is in a tablet-ish size. */
@media (max-width: 1050px) and (min-width: 769px){
  .top-nav .nav-inner{
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .top-nav .brand{
    flex: 0 0 auto;
  }

  .top-nav .nav-right{
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 18px;
  }

  .top-nav .navlink{
    font-size: 15px;
    white-space: nowrap;
  }
}

/* Safety: never clip nav contents */
.top-nav,
.top-nav .nav-inner{
  overflow: visible;
}


/* HARD OVERRIDE: prevent Services desktop SVG clipping */
/* NAV LAYOUT: ensure nav-inner anchors dropdown panel and spreads items */
.top-nav .nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* anchor dropdown panel */
}
.page-services .page-svg-wrap {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative;
}

.page-services .services-desktop {
.nav-toggle span{
  height: 2px;
  width: 100%;
  background: currentColor;
  display: block;
}
  position: relative !important;
  transform: none !important;
}

/* SAFE Services desktop fix: re-assert non-clipping and ensure desktop image sizing */
.page-services .page-svg-wrap {
  height: auto !important;
  overflow: visible !important;
}

.page-services .services-desktop {
  display: block;
  width: 100%;
  height: auto;
}

/* Remove viewport-height constraints on Services desktop to avoid clipping */
body.page-services,
.page-services main,
.page-services .page-svg-wrap {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

.page-services .services-desktop {
  transform: none !important;
}

/* Services desktop: prevent SVG crop */
.page-services .services-desktop {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain !important;
  object-position: center !important;
  overflow: visible !important;
}

.page-services .page-svg-wrap {
  overflow: visible !important;
}


/* center nav content and constrain width */
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: clamp(12px, 2vw, 28px);
  padding-right: clamp(12px, 2vw, 28px);
  /* small side padding controlled with clamp() for smooth scaling */
  box-sizing: border-box;
}

/* SVG-relative horizontal positioning for nav contents
   These rules shift the nav contents horizontally using percentages
   so the UI lines up with the underlying SVG artwork. They only set
   positioning offsets and do NOT alter flex, gap, alignment, font
   sizes, or padding inside the nav. */
.top-nav .nav-inner{
  position: relative;
}

.top-nav .brand{
  position: relative;
  left: clamp(-6%, -3vw, 0%);
}

.top-nav .nav-right{
  position: relative;
  right: clamp(-6%, -3vw, 0%);
}


/* reset default link styles globally */
a {
  text-decoration: none;
  color: inherit;
}

/* Position the CTA relative to the homepage SVG container */
.page-svg-wrap {
  position: relative;
  display: block; /* ensure the wrapper spans layout flow */
  width: 100%; /* full-width container so SVGs can scale to the viewport */
}

.email-cta--desktop {
  position: absolute;
  top: 80%;
  transform: translateX(-50%) !important;
  transform-origin: center;
  display: inline-block;
  z-index: 9999;
}

.email-cta--desktop .email-cta-img {
  display: block;
  height: auto !important;
  image-rendering: auto;
}

.email-cta--desktop .email-cta-img--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.email-cta--desktop .email-cta-img--blank {
  position: relative;
}

.email-cta--desktop:hover .email-cta-img--hover {
  opacity: 1;
}

.email-cta--desktop:hover .email-cta-img--blank {
  opacity: 0;
}

.corner-email--desktop {
  position: absolute;
  right: 2.5%;
  bottom: 32px;
  top: auto;
  transform: none;
  text-decoration: none;
  z-index: 9999;
  font-size: calc(1em + 2pt);
  color: inherit;
}

.corner-email--desktop:hover {
  text-decoration: underline;
}

/* Ensure the SVG panel sits under CTAs */
.panel {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.page-cta{
  z-index: 99999; /* ensure CTA sits above SVGs */
  pointer-events: auto; /* allow clicks on the CTA anchor */
  /* restored responsive size and transform */
  width: clamp(180px, 12vw, 260px);
}

/*
body:not(.page-whatwedo) .page-cta{
  position: absolute;
  top: 90.8%;
  left: 14.11%;
  transform: translate(85px, -30px) scale(1.25);
}
*/

/* Make sure children (video) don't block clicks on the anchor */
.page-cta * {
  pointer-events: none;
}

/* Per-page CTA overrides: center horizontally and position 400px up from bottom */
/*
body:not(.page-whatwedo) .page-about .page-cta,
body:not(.page-whatwedo) .page-services .page-cta.page-cta--learnmore {
  left: 50%;
  bottom: 400px;
  transform: translateX(-50%) scale(1.25);
}
*/

/* Services page: position contact CTA using top/left instead of shared bottom rule */
.page-services .page-cta--contact{
  left: 14.11%;
  top: 90.8%;
  bottom: auto;
}

/* Added per-request: specific Services page CTA positions */
.page-services .page-cta--nextsteps{
  top: 62.3%;
  left: 71.8%;
  bottom: auto;
  width: clamp(160px, 10vw, 240px);
  transform: translate(-50%, -50%) scale(1.25);
}

.page-services .page-cta--contact{
  top: 90.8%;
  left: 14.11%;
  bottom: auto;
}

/* Specific positioning for the duplicate services CTA on the homepage */
.page-cta--services {
  top: 62.3%;
  left: 71.8%;
  width: clamp(160px, 10vw, 240px);
  transform: translate(-50%, -50%) scale(1.25);
}

/* HOME: place the Learn More CTA specifically for the homepage */
.page-home .home-btns-desktop .cta-button-desktop{
  position: absolute;
  top: 93% !important;
  left: 31% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

.page-cta-video{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}


body {
  margin: 0;
  padding-top: 56px;
  font-family: "GlacialIndifference", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 16px;
  color: #050606;
}

/* Minimal CSS: make 01.svg scale to full browser width, preserve aspect ratio, remove default margins */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #FCF8ED;
}
/* Ensure the SVG image fills the viewport width and preserves aspect ratio */
/* Ensure images/embeds placed directly inside the page SVG wrapper
   scale to the wrapper width and preserve aspect ratio. This avoids
   applying full-width scaling to global images such as nav logos. */
.page-svg-wrap > img,
.page-svg-wrap > object,
.page-svg-wrap > iframe{
  width: 100%;
  height: auto;
  display: block;
}

/* Generic image defaults (do not force width). Keep max-width to avoid overflow. */
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}


/* Homepage mobile-only SVG swap (scoped) */
.desktop-only {
  display: block;
  position: static;
  height: auto;
}
.desktop-only img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}
.mobile-only {
  display: none;
  position: static;
  height: auto;
}
.mobile-only img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}

/* Contact page: email hover animation overlay (scoped) */
.page-contact .page-svg-wrap {
  /* ensure overlay can be absolutely positioned above the artwork */
  position: relative;
}



@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

/* Contact page: mobile-only SVG swap (scoped) */
.contact-desktop {
  display: block;
  position: static;
  height: auto;
}
.contact-desktop img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}
.contact-mobile {
  display: none;
  position: static;
  height: auto;
}
.contact-mobile img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}

/* Enforce: desktop state - ensure mobile contact SVG is never visible at desktop widths
   These desktop-default rules live outside media queries and appear after the
   contact-specific rules above so they win unless a media query override applies. */
.contact-mobile {
  display: none !important;
}

.contact-desktop {
  display: block !important;
}

/* Responsive scaling for Contact images */
.contact-desktop,
.contact-mobile {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* On mobile, hide the desktop SVG and show the mobile SVG */
  .contact-desktop { display: none !important; }
  .contact-mobile  { display: block !important; }
}

.panel{
  pointer-events: none;
}

/* SERVICES: explicit CTA placement + stacking so none overlap */
.page-cta{ display:block; }

.page-services .page-cta--nextsteps{
  z-index: 100001;
}

.page-services .page-cta--contact{
  z-index: 100002;
}

.page-services .page-cta--learnmore{
  z-index: 100003; /* keep Learn more on top */
  top: 92%;
  left: 50%;
  bottom: auto;
  width: clamp(180px, 12vw, 260px);
  transform: translate(-50%, -50%) scale(1.25);
}

/* SERVICES CTAs: only position them on Services page */
.page-services .page-cta { position: absolute; z-index: 99999; pointer-events: auto; }
.page-services .page-cta * { pointer-events: none; }

.page-services .page-cta--learnmore{
  top: 92%;
  left: 50%;
  width: clamp(180px, 12vw, 260px);
  transform: translate(-50%, -50%) scale(1.25);
}

.page-services .page-cta--contact{
  top: 92%;
  left: 20%;
}

/* CONTACT DEBUG removed: fixed-position debug removed to keep CTA inside contact-stage */

.page-services .page-cta--nextsteps{
  top: 44%;
  left: 72%;
  width: clamp(180px, 12vw, 260px);
  transform: translate(-50%, -50%) scale(1.25);
}

/* Services page: desktop/mobile SVG swap (scoped) */
.services-desktop {
  display: block;
  position: static;
  height: auto;
}
.services-desktop img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}

/* --- Services-only: prevent clipping of the desktop SVG wrapper ---
   Targeting only the Services page wrapper and desktop SVG so other pages
   (Home/About/Contact) remain untouched. These rules ensure the wrapper
   does not constrain height and allow the SVG to overflow when needed.
*/
.page-services .page-svg-wrap {
  /* do not constrain container height for Services artwork */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.page-services .services-desktop,
.page-services .services-desktop img {
  /* ensure the desktop SVG itself does not get clipped or forced to a
     fixed height by inheritance */
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.services-mobile {
  display: none;
  position: static;
  height: auto;
}
.services-mobile img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}

/* Enforce: desktop state - ensure mobile services SVG is never visible at desktop widths */
.services-mobile {
  display: none !important;
}

.services-desktop {
  display: block !important;
}

/* Responsive scaling for Services images */
.services-desktop,
.services-mobile {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* On mobile, hide the desktop SVG and show the mobile SVG */
  .services-desktop { display: none !important; }
  .services-mobile  { display: block !important; }
}

/* ABOUT: force next steps CTA to be clickable */
.page-about .page-cta--about-nextsteps.cta-desktop{
  position: absolute;
  z-index: 999999;
  left: 50%;
  top: 94% !important;
  bottom: auto !important;
  transform: translateX(-50%);
  pointer-events: auto;
}
.page-about .page-cta--about-nextsteps *{
  pointer-events: none;
}

/* ABOUT: nudge Next Steps CTA 1% down, centered */
.page-about .page-cta--about-nextsteps.cta-desktop{
  left: 50%;
  top: 95% !important;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .page-home .home-btns-mobile .cta-button-mobile{
    position: absolute;
    top: 90% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* HOME: ensure only one home SVG is visible at a time */
.home-desktop { display: block; }
.home-mobile  { display: none; }

/* ABOUT: ensure only one About SVG is visible at a time */
.page-about .page-svg-wrap.about-desktop { display: block; }
.page-about .page-svg-wrap.about-mobile  { display: none; }

/* WHAT WE DO: wrapper positioning context + CTA visibility split */
.page-whatwedo .page-svg-wrap.whatwedo-desktop,
.page-whatwedo .page-svg-wrap.whatwedo-mobile,
.page-whatwedo .whatwedo-desktop-only,
.page-whatwedo .whatwedo-mobile-only{
  position: relative;
  display: block;
}

/* WHAT WE DO: show only one SVG wrapper per breakpoint */
.page-whatwedo .page-svg-wrap.whatwedo-desktop{ display: block; }
.page-whatwedo .page-svg-wrap.whatwedo-mobile{ display: none; }

@media (max-width: 768px){
  .page-whatwedo .page-svg-wrap.whatwedo-desktop{ display: none; }
  .page-whatwedo .page-svg-wrap.whatwedo-mobile{ display: block; }
}

.page-whatwedo .whatwedo-cta-desktop{ display: inline-block; }
.page-whatwedo .whatwedo-cta-mobile{ display: none; }

@media (max-width: 768px){
  .page-whatwedo .whatwedo-cta-desktop{ display: none; }
  .page-whatwedo .whatwedo-cta-mobile{ display: inline-block; }
}

/* ABOUT: keep wrapper neutral so it doesn't force both variants to stack */
.page-about .page-svg-wrap {
  display: block;
}

@media (max-width: 768px) {
  .home-desktop { display: none !important; }
  .home-mobile  { display: block !important; }
}

@media (max-width: 768px) {
  body.page-contact .page-svg-wrap .email-cta--mobile {
    transform: translateX(-50%) scale(0.75) !important;
    transform-origin: center !important;
  }
}

.page-contact .page-svg-wrap .email-cta--desktop {
  top: 80% !important;
  bottom: auto !important;
  left: 64% !important;
  right: auto !important;
  transform: translateX(-50%) scale(0.45) !important;
  transform-origin: center;
}

.page-contact .page-svg-wrap .email-cta--desktop .email-cta-img {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .page-about .page-svg-wrap.about-desktop { display: none !important; }
  .page-about .page-svg-wrap.about-mobile  { display: block !important; }
}

@media (max-width: 768px) {
  .page-about .page-cta--about-nextsteps.cta-mobile{
    position: absolute;
    left: 50%;
    top: 96% !important;
    transform: translateX(-50%) translateY(1%);
    z-index: 999999;
    pointer-events: auto;
  }
}

/* Global utility: explicit desktop/mobile visibility helpers
   These allow pages to use `.desktop-only` and `.mobile-only` classes
   to control which image or element appears at desktop vs. mobile widths.
   Added as a small, global rule-set and mobile override only. */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* CTA visibility split: desktop vs mobile */
.cta-desktop { display: block; }
.cta-mobile { display: none; }

@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }

  .cta-desktop { display: none; }
  .cta-mobile { display: block; }
}


/* Home page: mobile-only SVG swap (scoped) */
.home-desktop {
  /* default: visible on desktop/tablet */
  display: block;
  position: static;
  height: auto;
}
.home-desktop img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}
.home-mobile {
  /* default: hidden */
  display: none;
  position: static;
  height: auto;
}
.home-mobile img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100vw;
}

@media (max-width: 768px) {
  .home-desktop {
    display: none;
  }
  .home-mobile {
    display: block;
  }
}

/* HOME: show desktop buttons only on desktop */
.page-home .cta-button-desktop { display: block; }
.page-home .cta-button-mobile { display: none; }

@media (max-width: 768px){
  .page-home .cta-button-desktop { display: none; }
  .page-home .cta-button-mobile { display: block; }
}

.page-home .home-btns-desktop{ display: block; }
.page-home .home-btns-mobile{ display: none; }

@media (max-width: 768px){
  .page-home .home-btns-desktop{ display: none; }
  .page-home .home-btns-mobile{ display: block; }
}

.page-home .home-btns-desktop a,
.page-home .home-btns-desktop button,
.page-home .home-btns-mobile a,
.page-home .home-btns-mobile button{
  position: absolute;
  z-index: 500;
  cursor: pointer;
  transform: none !important;
}

.page-home .home-btns-desktop,
.page-home .home-btns-mobile{
  transform: none !important;
  scale: 1 !important;
  zoom: 1 !important;
  font-size: initial !important;
  overflow: visible !important;
}

.page-home .home-btns-desktop img,
.page-home .home-btns-mobile img,
.page-about .about-btns-desktop img,
.page-about .about-btns-mobile img{
  width: auto !important;
  height: auto !important;
  max-width: none !important;
}

.page-home .home-btns-desktop img,
.page-home .home-btns-desktop svg{
  width: 110%;
  height: auto;
}

.page-home .home-btns-desktop a,
.page-home .home-btns-desktop button{
  transform: scale(1.2);
  transform-origin: center;
}

.page-home .home-btns-mobile img,
.page-home .home-btns-mobile svg{
  width: 115%;
  height: auto;
}

.page-home .home-btns-desktop a,
.page-home .home-btns-desktop button,
.page-home .home-btns-mobile a,
.page-home .home-btns-mobile button{
  transform-origin: center;
}

.page-home .home-btns-desktop a,
.page-home .home-btns-desktop button{
  transform: none !important;
  width: auto !important;
  height: auto !important;
}

.page-home .home-btns-desktop a img,
.page-home .home-btns-desktop button img,
.page-about .about-btns-desktop a img,
.page-about .about-btns-desktop button img{
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

@media (max-width: 768px){
  .page-home .home-btns-mobile a img,
  .page-home .home-btns-mobile button img{
    width: 220px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }
}

.page-home .home-btns-desktop video,
.page-about .about-btns-desktop video{
  width: 260px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

@media (max-width: 768px){
  .page-home .home-btns-mobile video{
    width: 230px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }
}

.page-home .home-btns-desktop video,
.page-home .home-btns-mobile video,
.page-about .about-btns-desktop video,
.page-about .about-btns-mobile video{
  transform: none !important;
  scale: 1 !important;
}

/* HOME – FINAL button positioning */
.page-home .desktop-only .home-btns-desktop{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}

.page-home .mobile-only .home-btns-mobile{
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page-home .desktop-only .home-btns-desktop{
  top: 85%;
}

.page-home .mobile-only .home-btns-mobile{
  top: 85%;
}

.page-home .desktop-only .home-btns-desktop{
  top: 92%;
}

.page-home .mobile-only .home-btns-mobile{
  top: 92%;
}

.page-home .desktop-only .home-btns-desktop{
  left: calc(50% - 18px);
}

.page-home .mobile-only .home-btns-mobile{
  top: 93%;
}

.page-home .desktop-only .home-btns-desktop{
  left: calc(50% - 30px);
}

.page-home .mobile-only .home-btns-mobile{
  left: 50%;
  transform: translateX(-50%);
}

.page-home .desktop-only .home-btns-desktop{
  left: 30%;
}

.page-home .desktop-only .home-btns-desktop{
  left: 32%;
}

.page-home .desktop-only .home-btns-desktop{
  left: 31%;
}

/* About CTAs intentionally match Home CTA sizing — do not rescale */
.page-about .page-svg-wrap.about-desktop,
.page-about .page-svg-wrap.about-mobile{
  position: relative;
  display: block;
}

/* About CTAs intentionally match Home CTA sizing — do not rescale */
.page-about .page-svg-wrap.about-desktop a img,
.page-about .page-svg-wrap.about-desktop button img{
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

.page-about .page-svg-wrap.about-desktop .about-cta-desktop img,
.page-about .page-svg-wrap.about-desktop .about-cta-desktop video{
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  scale: 1 !important;
  display: block !important;
}

.page-about .page-svg-wrap.about-desktop video,
.page-about .page-svg-wrap.about-mobile video{
  transform: none !important;
  scale: 1 !important;
}

.page-about .page-svg-wrap.about-desktop video{
  width: 260px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

.page-about .page-svg-wrap.about-desktop .about-cta-desktop video{
  width: 260px !important;
  height: auto !important;
  max-width: none !important;
  transform: none !important;
  scale: 1 !important;
  display: block !important;
}

@media (max-width: 768px) {
  .page-about .page-svg-wrap.about-mobile a img,
  .page-about .page-svg-wrap.about-mobile button img{
    width: 240px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

  .page-about .page-svg-wrap.about-mobile .about-cta-mobile img,
  .page-about .page-svg-wrap.about-mobile .about-cta-mobile video{
    width: 240px !important;
    height: auto !important;
    max-width: none !important;
    transform: none !important;
    scale: 1 !important;
    display: block !important;
  }
}

.page-about .page-svg-wrap.about-desktop img,
.page-about .page-svg-wrap.about-desktop object,
.page-about .page-svg-wrap.about-desktop embed,
.page-about .page-svg-wrap.about-mobile img,
.page-about .page-svg-wrap.about-mobile object,
.page-about .page-svg-wrap.about-mobile embed{
  display: block;
  width: 100%;
}

.page-about .about-btns-desktop{ display: block; }
.page-about .about-btns-mobile{ display: none; }

.page-about .about-btns-desktop,
.page-about .about-btns-mobile{
  position: relative;
}

@media (max-width: 768px){
  .page-about .about-btns-desktop{ display: none; }
  .page-about .about-btns-mobile{ display: block; }
}

.page-about .about-cta-desktop{
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% - 2px));
}

.page-about .about-cta-mobile{
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% - 2px));
}

.page-about .page-svg-wrap.about-desktop .about-cta-desktop{
  position: absolute;
  top: 93.5% !important;
  left: 47% !important;
  transform: translateX(-50%) !important;
}

.page-about .page-svg-wrap.about-mobile .about-cta-mobile{
  position: absolute;
  top: 94%;
  left: 50%;
  transform: translateX(calc(-50% - 10%));
}

.page-home .mobile-only .home-btns-mobile{
  left: 48%;
}

.page-home .mobile-only .home-btns-mobile{
  left: 47%;
}

/* Make the home SVGs scale correctly inside their container */
.home-desktop,
.home-mobile {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.page-home .home-desktop,
.page-home .home-mobile{
  position: relative;
}

:root{ --nav-h: 72px; }

.page-home .desktop-only,
.page-home .mobile-only{
  position: relative;
  padding-top: var(--nav-h);
  box-sizing: border-box;
}

/* Turn off the old single-SVG render on the home page */
.page-home img.panel {
  display: none !important;
}



/* Ensure panel inside svg wrapper scales with its container */
.page-svg-wrap .panel{
  display: block;
  width: 100%;
  height: auto;
}

/* Contact page logo size correction */
.page-contact .brand-logo{
  height: clamp(18px, 1.6cqi, 21px);
}

/* ------------------------------------------------------------------ */
/* Overlay + navigation container scaling (CLAMP rules)                */
/* Applies ONLY to the selectors requested by the design brief.       */
/* NOTE: We do NOT touch `body { font-size: 16px; }` or page content. */
/* ------------------------------------------------------------------ */
.top-nav,
.navlink,
.nav-inner,
.nav-right,
.page-cta {
  /* Scale overlay/navigation typography with viewport but keep
     global body font-size and long-copy untouched for a11y. */
  font-family: "GlacialIndifference", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: clamp(12px, 1.4vw, 20px);
}

.brand-logo {
  /* Logo height scales with the UI but doesn't affect page text flow */
  height: clamp(14px, 1.6vw, 21px);
  width: auto;
  display: block;
}

.page-cta-video {
  /* Keep videos responsive inside CTA anchors — sizing limited by CTA container.
     width:100% is already set elsewhere; provide a safe max-height so it scales
     visually with the viewport without touching body/type. */
  width: 100%;
  max-height: clamp(60px, 10vh, 320px);
  height: auto;
}



/* FINAL LOCK — Services Contact centered + SVG-scaled */
.page-services .page-cta--contact.cta-desktop{
  top: 86% !important;
  left: 50% !important;
  bottom: auto !important;
}

.page-services .cta-desktop {
  top: 80% !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
}

.page-services .cta-desktop .page-cta-video {
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .page-services .mobile-only.services-mobile {
    position: relative !important;
  }

  .page-services .mobile-only.services-mobile .services-cta-mobile {
    position: absolute !important;
    left: 50% !important;
    top: 91% !important;
    transform: translateX(-50%) !important;
    outline: none !important;
    z-index: 9999 !important;
    width: auto !important;
    height: auto !important;
  }

  .page-services .mobile-only.services-mobile .services-cta-mobile .page-cta-video {
    display: block !important;
    pointer-events: none;
    width: 100% !important;
    height: auto !important;
  }

  .corner-email {
    position: absolute !important;
    right: 24px !important;
    left: auto !important;
    text-align: right !important;
  }

  .email-cta--desktop { display: none; }

  .page-contact .mobile-only {
    position: relative;
  }

  .page-contact .email-cta--mobile .email-cta-img {
    width: auto !important;
    height: auto !important;
  }

  .page-contact .email-cta--mobile .email-cta-img--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  .page-contact .email-cta--mobile:hover .email-cta-img--hover {
    opacity: 1;
  }

  .page-contact .email-cta--mobile:hover .email-cta-img--blank {
    opacity: 0;
  }
}


/* Enforce: desktop state - ensure mobile home SVG is never visible at desktop widths */
.home-mobile {
  display: none !important;
}

.home-desktop {
  display: block !important;
}

/* Mobile override ONLY inside the max-width: 768px media query */
@media (max-width: 768px) {
  .home-desktop { display: none !important; }
  .home-mobile  { display: block !important; }
}


/* CONTACT-ONLY: ensure top navigation is above all SVG/hero layers */
.page-contact{
  padding-top: 80px; /* prevents content from hiding under fixed nav */
}

/*
  Scoped checks: earlier scans showed no rules that set display:none, opacity:0,
  or visibility:hidden on .top-nav or .nav-inner. If you later add such rules,
  prefer scoping them out of Contact like:

    .some-page:not(.page-contact) .top-nav { display: none; }

  This keeps the Contact nav always visible.
*/

/* Ensure page SVG images always scale correctly inside their wrappers */
.page-svg-wrap img{
  width: 100%;
  height: auto;
  display: block;
}

/* Hamburger button (hidden on desktop) */
.nav-toggle{
  display: none;
  width: 28px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span{
  height: 2px;
  width: 100%;
  background: currentColor;
  display: block;
}


/* FINAL: lock CTA to contact-stage (relative to SVG bounds) */
.page-contact .contact-stage{
  position: relative !important;
  width: 100% !important;
  overflow: visible !important;
}

/* =========================================
   WHAT WE DO — BASELINE (NO MAGIC)
   ========================================= */

html.page-whatwedo,
body.page-whatwedo{
  height: auto;
  min-height: 0;
}

.page-whatwedo .whatwedo-stage{
  position: relative;
  width: 100%;
}

.page-whatwedo .page-svg-wrap{
  position: relative;
  width: 100%;
  display: block;
}

.page-whatwedo .page-svg-wrap.whatwedo-desktop,
.page-whatwedo .page-svg-wrap.whatwedo-mobile{
  position: relative;
  display: block;
}

/* Desktop / mobile SVG swap */
.page-whatwedo .whatwedo-desktop{ display: block; }
.page-whatwedo .whatwedo-mobile{ display: none; }

.page-whatwedo .whatwedo-desktop-only{ display: block !important; }
.page-whatwedo .whatwedo-mobile-only{ display: none !important; }

@media (max-width: 768px){
  .page-whatwedo .whatwedo-desktop{ display: none; }
  .page-whatwedo .whatwedo-mobile{ display: block; }

  .page-whatwedo .whatwedo-desktop-only{ display: none !important; }
  .page-whatwedo .whatwedo-mobile-only{ display: block !important; }
}

/* SVG sizing — NO forced height */
.page-whatwedo .page-svg-wrap img,
.page-whatwedo .page-svg-wrap object,
.page-whatwedo .page-svg-wrap embed{
  width: 100%;
  height: auto;
  display: block;
}

/* CTA — one button only */
.page-whatwedo .page-cta{
  position: absolute;
  left: 50%;
  top: 93%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: auto;
}

/* Mobile CTA tweak only */
@media (max-width: 768px){
  .page-whatwedo .page-cta{
    top: 95%;
    transform: translate(-50%, -50%);
  }
}

.page-whatwedo .whatwedo-cta-desktop img,
.page-whatwedo .whatwedo-cta-desktop video,
.page-whatwedo .whatwedo-cta-mobile img,
.page-whatwedo .whatwedo-cta-mobile video{
  transform: none !important;
  scale: 1 !important;
}

.page-whatwedo .whatwedo-cta-desktop img{
  width: 240px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

.page-whatwedo .whatwedo-cta-desktop video{
  width: 260px !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

@media (max-width: 768px){
  .page-whatwedo .whatwedo-cta-mobile img{
    width: 220px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }

  .page-whatwedo .whatwedo-cta-mobile video{
    width: 230px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
  }
}

.page-whatwedo .whatwedo-desktop-only .whatwedo-cta-desktop{
  top: 94%;
  left: calc(50% - 4%) !important;
}

@media (max-width: 768px){
  .page-whatwedo .whatwedo-mobile-only .whatwedo-cta-mobile{
    left: calc(50% - 3%) !important;
    top: 90.5% !important;
  }
}

.page-contact .contact-stage{
  position: relative !important;
}

.page-contact .email-cta{
  position: absolute !important;
  left: 50% !important;
  top: 90% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.page-contact .email-cta img{
  display: block !important;
  height: auto !important;
}
.page-contact .email-video{ display: none !important; }
.page-contact .email-underline{ display: none !important; }

@media (max-width: 768px){
  .top-nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    pointer-events: auto;
  }

  .top-nav *{
    pointer-events: auto;
  }

  /* menu closed by default */
  #mobile-menu{
    display: none;
  }

  /* open only when JS toggles .open on .top-nav */
  .top-nav.open #mobile-menu{
    display: flex;
    flex-direction: column;
  }
}

/* --- FORCE hamburger to exist + be clickable on mobile --- */
@media (max-width: 768px){
  .nav-toggle{
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147483647 !important;
  }

  /* If your SVG wrapper is sitting on top, push it behind nav */
  .page-svg-wrap,
  .page-svg-wrap *{
    position: relative;
    z-index: 0;
  }

  .top-nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2147483646 !important;
  }
}

@media (max-width: 768px){
  #mobile-menu { display: none; }
  #mobile-menu.is-open { display: block; }
}

@media (max-width: 768px){
  .top-nav, .top-nav *{
    pointer-events: auto !important;
  }
  .top-nav{
    position: fixed !important;
    z-index: 2147483647 !important;
  }
  .nav-toggle{
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 768px){
  /* default closed */
  .top-nav #mobile-menu{ display: none !important; }

  /* open state driven by JS (nav gets class "open") */
  .top-nav.open #mobile-menu{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 768px){
  #mobile-menu{ display: none !important; }
  .top-nav.open #mobile-menu{ display: block !important; }
}

@media (max-width: 768px){
  .top-nav .nav-inner{
    align-items: center;
  }

  .nav-toggle{
    flex: 0 0 auto;
    margin-left: 0 !important;
  }
}

@media (max-width: 768px){
  .top-nav #mobile-menu{
    display: none !important;
  }

  .top-nav.open #mobile-menu{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;

    position: absolute !important;
    top: 100% !important;         /* directly under the nav bar */
    left: 0 !important;
    right: auto !important;

    width: max-content !important;
    padding: 14px 16px !important;

    background: #f7f0e6 !important; /* match your site bg */
    z-index: 2147483647 !important;
  }

  .top-nav.open #mobile-menu .navlink{
    display: block !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px){
  .top-nav{
    position: fixed !important;  /* keep if you already use fixed */
  }

  .top-nav .nav-inner{
    position: relative !important;
  }
}

@media (max-width: 768px){
  .top-nav .nav-inner { position: relative; }

  .top-nav .nav-right#mobile-menu,
  .top-nav #mobile-menu.nav-right,
  .top-nav #mobile-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: max-content;
    min-width: 180px;
    display: none;            /* keep hidden until opened by the hamburger */
    flex-direction: column;
    gap: 0;
    padding: 10px 12px;
    background: #FCF8ED;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 9999;
  }

  .top-nav .nav-right.is-open,
  .top-nav #mobile-menu.is-open,
  .top-nav .nav-right[aria-hidden="false"],
  .top-nav .nav-toggle[aria-expanded="true"] + #mobile-menu {
    display: flex;
  }

  .top-nav #mobile-menu .navlink {
    display: block;
    padding: 10px 8px;
    border-radius: 8px;
  }
}

@media (max-width: 768px){
  .nav-toggle {
    position: relative;
  }

  #mobile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    width: max-content;
    min-width: 180px;
    background: #FCF8ED;
    border-radius: 12px;
    padding: 10px 12px;
    z-index: 9999;
    margin-left: 0;
  }

  .top-nav .nav-inner {
    justify-content: space-between;
  }
}

@media (max-width: 768px){
  /* 1) Make the right side of the nav the positioning anchor */
  .top-nav .nav-right {
    position: relative !important;
  }

  /* 2) Force the dropdown to sit under the hamburger on the right */
  .top-nav .nav-right#mobile-menu,
  .top-nav #mobile-menu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;

    width: max-content !important;
    min-width: 180px !important;

    background: #FCF8ED !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    z-index: 99999 !important;
  }

  /* 3) If any rule is forcing full width or left placement, kill it */
  .top-nav #mobile-menu {
    margin: 0 !important;
    transform: none !important;
  }

  /* 4) Ensure nav layout keeps hamburger on the right */
  .top-nav .nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

@media (max-width: 768px){
  .top-nav #mobile-menu {
    min-width: 145px;   /* was ~180px → ~80% */
    padding: 8px 10px; /* slightly tighter padding */
  }

  .top-nav #mobile-menu .navlink {
    padding: 8px 6px;
  }
}

@media (max-width: 768px){
  .top-nav #mobile-menu {
    width: 60% !important;
    min-width: unset !important;
    max-width: none !important;
  }
}

@media (max-width: 768px){
  .top-nav #mobile-menu,
  .top-nav #mobile-menu > * {
    max-width: 160px !important;
    width: auto !important;
  }

  .top-nav #mobile-menu > * {
    background: #FCF8ED !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 768px) {
  .page-whatwedo .whatwedo-mobile {
    position: relative;
  }

  .page-whatwedo .whatwedo-cta-mobile {
    position: absolute;
    top: 40% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    outline: 4px solid lime !important;
  }
}

@media (max-width: 768px) {
  .page-whatwedo .whatwedo-cta-mobile .page-cta-video {
    position: relative;
    top: 0 !important;
    display: block !important;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .page-whatwedo .whatwedo-cta-mobile { outline: none !important; }
}

@media (max-width: 768px) {
  .page-whatwedo .whatwedo-cta-mobile {
    display: inline-block !important;
    transform: translateX(-50%) translateY(52px) !important;
  }
}