@font-face{
  font-family:"Ontel";
  src:url("https://files.fontsme.com/o/117/24117/file/Ontel-YzV0a.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* Madhi Studio — home production stylesheet (dark only; legacy hero overrides removed) */
.hero{min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 95px 24px 55px;
  position: relative;
  margin-bottom: 0;
  background: url("https://images.unsplash.com/photo-1520975958225-8f3c0c8c0b6d?auto=format&fit=crop&w=2000&q=80") center/cover no-repeat;}
.hero::after{content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--brand-aqua) 25%, transparent);
  pointer-events: none;}
.hero-content{position: relative;
  max-width: 750px;
  transform: translateY(-35px);}
.hero h1, .about-section h2, .cta h2{font-size: 40px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.05;}
.hero h1{font-size: clamp(27px, 5.5vw, 60px);
  letter-spacing: -2px;
  line-height: 1.02;
  white-space: nowrap;}
.hero p{margin-top: 18px;
  font-size: 18px;
  color: var(--muted);}
.hero-buttons{margin-top: var(--component-gap);}
.spacer{display: inline-block;
  width: 14px;}
#photos{scroll-margin-top: 60px;}
.section > .container > .btn{margin-top: var(--component-gap);}
.about-section{display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  align-items: center;}
.about-section img{width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 18px;}
.about-section p{color: var(--muted);
  font-size: 15px;
  margin-top: 16px;}
.cta{min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 160px 10%;
  margin-top: var(--hero-gap);
  margin-bottom: var(--hero-gap);
  background: var(--bg);}
.cta p{color: var(--muted);
  margin-top: 16px;
  margin-bottom: var(--component-gap);}
.motion-feature{padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  aspect-ratio: auto;}
.motion-top{text-align: center;
  align-self: center;
  width: 100%;}
.motion-top h3{font-size: 22px;
  margin-bottom: 8px;}
.motion-top p{color: var(--muted);
  font-size: 14px;
  max-width: 720px;
  margin: 0 auto;}
.player-wrap{position: relative;
  overflow: hidden;
  margin-top: 18px;
  background: var(--brand-aqua);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-height: 360px;}
.player-wrap svg{width: 100%;
  height: 100%;
  max-height: none;
  margin-left: 0;
  margin-right: 0;
  display: block;
  object-fit: contain;}
.controls-note{position: absolute;
  left: 10px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
  max-width: 160px;
  z-index: 5;}
.aircraft-schematic{width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;}
.aircraft-schematic svg, .aircraft-schematic img{width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;}
#platterSpin{transform-box: fill-box;
  transform-origin: center;}
.playing #platterSpin{animation: spinRecord 1.1s linear infinite;}
@keyframes spinRecord{from{transform: rotate(0deg);}
to{transform: rotate(360deg);}}
#tonearm{transform-box: view-box;
  transform-origin: 465px 163px;
  transition: transform 2.4s cubic-bezier(.35,.02,.16,1);}
#tonearm.lifted{transform: translateY(-14px) rotate(0deg);}
#tonearm.playing{transform: translateY(-14px) rotate(22deg);}
#tonearm.dropped{transform: translateY(0px) rotate(22deg);}
#startStopPhysical{cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .16s ease;}
#startStopPhysical .button-face{fill: var(--warm);
  animation: blinkButton 1s ease-in-out infinite;}
#startStopPhysical.is-on{transform: translateY(4px) scale(0.93);}
#startStopPhysical.is-on .button-face{fill: var(--warm);
  animation: none;}
#startStopPhysical:hover .button-face{filter: brightness(1.05);}
@keyframes blinkButton{0%, 100%{opacity: 1;}
50%{opacity: .35;}}
@media (max-width: 1100px){.grid-4, .hub-grid, .sitemap-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 760px){.dropdown{display: none;}
.grid-3, .grid-4, .hub-grid, .sitemap-grid, .special-focus-grid{grid-template-columns: 1fr !important; width: 100% !important;}
.container, .hub-shell, .sitemap-shell, .photos-shell{padding-left: 18px; padding-right: 18px;}
.hero{min-height: 72vh; padding: 70px 18px 45px;}
.hero h1{white-space: normal;}
.footer-site-links{flex-direction: column;
    gap: 6px;}
.footer-divider{display: none;}
.footer-site-link{width: 100%;
    min-width: 0;
    max-width: none;}}
@media (max-width: 520px){.page-section{padding-top: 70px;}}
html{scroll-behavior: smooth;
  scroll-snap-type: y mandatory;}
body{overflow-x: hidden;}
.cart-link{width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;}
.cart-link svg{width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;}
.hero, .services-viewport, .work-section, .cta{min-height: calc(100vh - 105px);}
.hero, .services-viewport, .cta{scroll-snap-align: start;
  scroll-snap-stop: always;}
.work-section{scroll-snap-align: none;
  scroll-snap-stop: normal;}
.hero{min-height: calc(100vh - 105px);}
.services-viewport{display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;}
.services-viewport .page-section{padding: 36px 0 24px;}
.services-viewport .page-title{font-size: clamp(42px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1;
  margin: 0;}
.services-viewport .section-divider{display: none;}
.services-viewport .sitemap-section{padding: 56px 0 34px;}
.sitemap-shell{max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;}
.sitemap-grid{display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;}
.sitemap-card{position: relative;
  min-height: 308px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-deep) 2%, transparent);
  border-radius: 4px;
  background: var(--brand-aqua);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;}
.sitemap-card:hover{border-color: var(--border);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-deep) 4%, transparent);}
.sitemap-card-content{height: 100%;
  display: flex;
  flex-direction: column;}
.sitemap-card-top{display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;}
.sitemap-card h2{flex: 0 1 78%;
  max-width: 78%;
  
  font-size: clamp(25px, 2.25vw, 35px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1.02;}
.sitemap-card p{color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;}
.sitemap-number{flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-aqua);
  border: 1px solid var(--border);
  color: var(--brand-teal);
  font-size: 18px;
  font-weight: 600;}
.sitemap-main-link{display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: auto;
  padding: 11.25px 20px;
  border-radius: 4px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--brand-deep);
  font-size: 16.25px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;}
.sitemap-main-link:hover, .sitemap-main-link:focus-visible{background: var(--accent);
  border-color: transparent;
  color: var(--brand-aqua);}
.work-section{display: flex;
  align-items: center;
  padding: 24px 0 22px;
  background: var(--brand-aqua);}
.work-section > .container{width: 100%;}
.work-section .section-title{font-size: 41.4px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.05;
  margin-bottom: 30px;}
.work-section .feature-layout{display: grid;
  grid-template-columns: minmax(0, 2.08fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;}
.work-section .feature-card, .work-section .mini-card{position: relative;
  display: block;
  border: 1px solid var(--brand-aqua);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .25s ease;}
.work-section:not(#motion-graphics) .feature-card, .work-section .mini-card{background: var(--card);}
.work-section .feature-card{height: min(59vh, 630px);}
.work-section .side-stack{display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;}
.work-section .mini-card{min-height: 0;}
.work-section .feature-card img, .work-section .mini-card img{position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 44px 28px 82px;
  transform: none;}
.work-section .mini-card img{padding: 46px 20px 68px;}
.work-section .card-caption{min-height: 66px;}
.work-section .section-action{display: block;
  width: fit-content;
  margin: 22px auto 0;}
.cta{margin: 0;
  min-height: calc(100vh - 105px);}
footer{scroll-snap-align: end;
  background: var(--brand-aqua);}
.footer-inner{gap: 10px;}
@media (max-width: 1200px){.sitemap-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;}
.services-viewport{min-height: auto; padding: 55px 0;}
.work-section .feature-layout{grid-template-columns: 1.65fr .9fr;}}
@media (max-width: 760px){html{scroll-snap-type: none;}
.sitemap-grid{grid-template-columns: 1fr;}
.work-section{min-height: auto; padding: 70px 0;}
.work-section .feature-layout{grid-template-columns: 1fr;}
.work-section .feature-card{height: 440px;}
.work-section .side-stack{grid-template-columns: 1fr; grid-template-rows: repeat(2, 330px);}}
.hero.typing-hero-panel{height: calc(100vh - 105px);
  min-height: calc(100vh - 105px);
  padding: 40px 24px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--brand-aqua);
  position: relative;
  overflow: hidden;}
.hero.typing-hero-panel::after{display: none !important;
  content: none !important;}
.typing-hero-inner{width: min(1120px, 100%);
  max-width: none;
  margin: 0 auto;
  transform: none;
  z-index: 1;}
.hero .hero-title.typing-hero{max-width: 900px;
  min-height: calc(0.98em * 3);
  margin: 0 auto;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(27.5px, 3.94vw, 57.5px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 400;
  color: var(--brand-deep);
  white-space: normal;}
.type-line{display: block;
  min-height: 0.98em;}
.typed-accent{color: var(--brand-deep);
  transition: color 0.75s ease;}
.accent-char{display: inline-block;
  transition: color 0.35s ease, background-color 0.18s ease;}
.accent-char.is-selected{background: color-mix(in srgb, var(--brand-gold) 18%, transparent);}
.typed-accent.is-green .accent-char, .typed-accent.is-green{color: var(--accent);
  background: transparent;}
.typing-cursor{display: inline-block;
  width: 0.026em;
  height: 0.82em;
  margin-left: 0.055em;
  background: var(--brand-deep);
  transform: translateY(0.08em);
  animation: landingCursorBlink 0.78s steps(1, end) infinite;
  vertical-align: baseline;}
@keyframes landingCursorBlink{0%, 48%{opacity: 1;}
49%, 100%{opacity: 0;}}
.scroll-cue{position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--brand-teal);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;}
.scroll-cue.is-visible{opacity: 1;}
body.user-has-scrolled .scroll-cue{opacity: 0;}
.scroll-cue-arrow{font-size: 22px;
  line-height: 1;
  animation: landingArrowBounce 1.15s ease-in-out infinite;}
@keyframes landingArrowBounce{0%, 100%{transform: translateY(0);}
50%{transform: translateY(10px);}}
.cta .cta-message{max-width: 860px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;}
.cta .btn{margin-top: 0;}
@media (max-width: 760px){.hero.typing-hero-panel{height: calc(100vh - 105px);
    min-height: calc(100vh - 105px);
    padding: 30px 18px 70px;}
.typing-hero-inner{transform: none;}
.hero .hero-title.typing-hero{font-size: clamp(33.75px, 10vw, 52.5px);}
.cta .cta-message{font-size: 16px;
    padding: 0 18px;}
.cta-break{display: none;}}
.sitemap-grid{grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;}
.sitemap-card{min-height: 310px;}
.sitemap-card h2{font-size: clamp(20.7px, 1.62vw, 28.8px);}
#scrollytelling{scroll-snap-align: start;
  scroll-snap-stop: always;}
.scrolly-feature-card img{object-fit: contain !important;
  background: var(--brand-aqua);
  padding: 34px 34px 82px !important;}
#contact-cta{scroll-snap-align: start;
  scroll-snap-stop: always;}
@media (max-width: 1380px){.sitemap-grid{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;}}
@media (max-width: 900px){.sitemap-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 620px){.sitemap-grid{grid-template-columns: 1fr;}}
.scrolly-work-section{align-items: flex-start;
  padding-top: 44px;
  padding-bottom: 44px;
  min-height: calc(100vh - 105px);}
.scrolly-section-container{width: 100%;}
.scrolly-work-section .section-title{margin-bottom: 28px;}
.scrolly-embedded-panel{position: relative;
  width: 100%;
  height: min(76vh, 820px);
  min-height: 660px;
  overflow: hidden;
  background: var(--brand-aqua);
  border: 1px solid var(--brand-aqua);
  border-radius: 18px;}
.scrolly-live-frame{position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--brand-aqua);
  display: block;}
.scrolly-panel-pill, .scrolly-panel-featured, .scrolly-panel-caption{pointer-events: none;}
.scrolly-panel-pill, .scrolly-panel-featured{z-index: 4;}
.scrolly-panel-caption{z-index: 4;
  min-height: 70px;
  background: color-mix(in srgb, var(--brand-aqua) 88%, transparent);}
@media (max-width: 900px){.scrolly-embedded-panel{height: 72vh;
    min-height: 560px;}}
@media (max-width: 620px){.scrolly-work-section{padding-top: 28px;
    padding-bottom: 28px;}
.scrolly-embedded-panel{height: 70vh;
    min-height: 500px;}}
footer{background: var(--brand-deep);
  color: var(--accent);
  border-top-color: var(--brand-deep);}
footer .footer-inner, footer .footer-main, footer .footer-site-links, footer a, footer .footer-site-link{color: var(--accent);}
footer a:hover, footer .footer-site-link:hover{color: var(--accent);
  opacity: 0.82;}
footer .footer-divider{background: var(--accent);
  opacity: 0.72;}
.logo-wordmark{position: absolute;
  left: 44px;
  top: 34px;
  z-index: 5;
  width: 152px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 2px;
  background: var(--brand-aqua);
  color: var(--brand-deep);
  font-family: "Inter", Arial, sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.015em;
  pointer-events: none;}
.hero-watermark{position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 100vw;
  transform: translate(-50%, -50%);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  color: var(--brand-aqua);
  font-family: "Inter", Arial, sans-serif;
  font-size: min(25vw, 460px);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: 0.025em;
  user-select: none;
  pointer-events: none;}
.typing-hero-inner{position: relative;
  z-index: 2;
  width: min(1540px, calc(100vw - 80px));}
.hero .hero-title.typing-hero{max-width: 1520px;
  min-height: calc(1.47em * 2);
  line-height: 1.47;}
.type-line{min-height: 1.47em;
  white-space: nowrap;}
.scroll-cue{bottom: 34px;
  gap: 9px;
  color: var(--brand-aqua);
  font-size: 13px;
  font-weight: 500;}
.scroll-cue-arrow{color: var(--brand-aqua);
  font-size: 34px;}
.sitemap-card-top{gap: 6px;}
.sitemap-card h2{flex: 1 1 auto;
  width: auto;
  max-width: calc(100% - 46px);}
footer{background: var(--brand-deep);
  color: var(--accent);}
footer .footer-inner, footer .footer-main, footer .footer-site-links, footer a, footer .footer-site-link{color: var(--accent);}
@media (max-width: 760px){.hero-watermark{font-size: 31vw;}
.typing-hero-inner{width: calc(100vw - 36px);}
.hero .hero-title.typing-hero{max-width: 100%;
    min-height: auto;
    line-height: 1.25;}
.type-line{min-height: 1.25em;
    white-space: normal;}
.logo-wordmark{display: none;}}
.logo-wordmark{display: none !important;}
.hero .hero-title.typing-hero{max-width: 1520px;
  min-height: calc(1.176em * 3);
  line-height: 1.176;}
.type-line{min-height: 1.176em;
  white-space: nowrap;}
.scroll-cue{bottom: 8px;
  color: var(--brand-aqua);}
.scroll-cue-arrow{color: var(--brand-aqua);}
.sitemap-card h2{max-width: calc(100% - 46px);}
@media (max-width: 760px){.hero .hero-title.typing-hero{min-height: auto;
    line-height: 1.12;}
.type-line{min-height: 1.12em;
    white-space: normal;}}
:root{--landing-feature-card-height: min(66vh, 700px);}
.hero, .services-viewport, .work-section, .cta{min-height: calc(100vh - var(--landing-header-height));}
.hero.typing-hero-panel, .cta{height: calc(100vh - var(--landing-header-height));
  min-height: calc(100vh - var(--landing-header-height));}
.hero-watermark{display: none !important;}
.hero-madhi-background{position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(1400px, calc(100vw - 48px));
  height: auto;
  max-height: 68%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;}
.typing-hero-inner{position: relative;
  z-index: 2;}
.scroll-cue{position: static;
  left: auto;
  bottom: auto;
  transform: none;
  margin: 58px auto 0;
  color: var(--brand-aqua);}
.scroll-cue-arrow{color: var(--brand-aqua);
  font-size: 34px;}
.services-viewport{display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 54px 0 22px;}
.about-madhi-viewport{
  min-height: calc(100svh - var(--site-header-height));
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 54px 0 22px;
  background: #000000;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
.about-madhi-container{width: 100%;}
.about-madhi-title{
  margin: 0 0 22px !important;
  color: #FFBF00 !important;
  font-family: "Londrina Outline", sans-serif !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 1.1px currentColor;
  text-shadow: 0 0 7px rgba(255,191,0,.48), 0 0 14px rgba(255,191,0,.18);
}
.about-madhi-byline{
  width: 100%;
  margin: 0;
  color: #FFFFFF;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
.services-container{width: 100%;}
.desktop-only-service{display:none;}
.services-title{font-size: 41.4px !important;
  font-weight: 600 !important;
  letter-spacing: -1px !important;
  line-height: 1.05 !important;
  margin-bottom: 30px !important;}
.sitemap-grid{grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 26px;}
.work-section .feature-layout{display: block;
  margin-bottom: 14px;}
.work-section .feature-card{width: 100%;
  height: var(--landing-feature-card-height);
  max-width: none;}
.work-section .feature-card img{padding: 48px 38px 84px;}
.work-section .side-stack, .work-section .mini-card{display: none !important;}
#scrollytelling{display: none !important;}
.sitemap-card{height: var(--landing-feature-card-height);
  min-height: 0;}
.work-section .section-action{margin: 22px 10% 0 auto;}
@media (max-width: 1200px){.sitemap-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}}
@media (max-width: 760px){.hero.typing-hero-panel{height: auto;
    min-height: 72vh;}
.hero-madhi-background{width: calc(100vw - 24px);
    max-height: 60%;}
.scroll-cue{margin-top: 42px;}
.services-viewport, .work-section{min-height: auto;
    padding: 64px 0;}
.sitemap-grid{grid-template-columns: 1fr !important;}
.sitemap-card{height: auto;
    min-height: 308px;}
.work-section .feature-card{height: 440px;}
.work-section .section-action{margin-right: 0;}}
:root{--landing-header-divider: color-mix(in srgb, var(--brand-deep) 24%, transparent);
  --landing-page-edge: 20px;}
.hero-madhi-background{left: var(--landing-page-edge) !important;
  right: var(--landing-page-edge) !important;
  top: 50% !important;
  width: calc(100vw - (var(--landing-page-edge) * 2)) !important;
  max-width: none !important;
  max-height: 76% !important;
  transform: translateY(-50%) !important;
  opacity: 1;}
.typing-hero-inner{width: min(1540px, calc(100vw - 80px)) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;}
.hero .hero-title.typing-hero{margin: 0 auto !important;}
.typing-cursor{width: 0.016em !important;
  height: 0.94em !important;
  margin-left: 0.045em !important;
  transform: translateY(0.10em) !important;}
.scroll-cue{position: absolute !important;
  left: 50% !important;
  top: calc(100% + 34px) !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;}
.sitemap-card{padding: 14px 14px 28px !important;}
.sitemap-card-top{align-items: center !important;
  gap: 5px !important;}
.sitemap-card h2{flex: 1 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 45px) !important;
  font-size: 37.26px !important;
  line-height: 1 !important;}
.sitemap-number{width: 44px !important;
  height: 44px !important;
  font-size: 22.5px !important;
  line-height: 1 !important;}
.sitemap-main-link{margin-bottom: 0 !important;}
.work-section .container{position: relative;}
.work-section .feature-layout{margin-bottom: 0 !important;}
.work-section .feature-card{display: block !important;}
.work-section .card-caption{min-height: 94px;
  padding: 12px 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;}
.work-section .card-caption-copy{min-width: 0;
  flex: 1 1 auto;}
.work-section .card-caption-copy h3, .work-section .card-caption-copy p{margin-right: 0;}
.work-section .section-action{position: static !important;
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;}
.work-section .feature-card img{padding-bottom: 106px !important;}
footer{background: var(--brand-deep);
  color: var(--brand-aqua);
  border-top-color: var(--brand-deep);}
footer .footer-main, footer .footer-main a{color: var(--brand-aqua);}
footer .footer-site-links, footer .footer-site-link, footer .footer-site-links a{color: var(--brand-teal);}
footer .footer-divider{background: var(--brand-teal);
  opacity: 0.8 !important;}
footer .footer-main a:hover{color: var(--brand-aqua);
  opacity: 0.82;}
footer .footer-site-link:hover, footer .footer-site-links a:hover{color: var(--brand-aqua);
  opacity: 1;}
@media (max-width: 980px){.sitemap-card h2{font-size: clamp(30px, 4.8vw, 40px) !important;}
.work-section .card-caption{align-items: flex-start;
    flex-direction: column;
    min-height: 128px;}
.work-section .feature-card img{padding-bottom: 140px !important;}}
@media (max-width: 760px){.hero-madhi-background{left: 12px !important;
    right: 12px !important;
    width: calc(100vw - 24px) !important;}
.scroll-cue{top: calc(100% + 26px) !important;}
.sitemap-card{padding-bottom: 28px !important;}}
:root{--landing-header-divider: color-mix(in srgb, var(--brand-deep) 10%, transparent);}
.scroll-cue, .scroll-cue-arrow{display: none !important;}
.sitemap-card-top{align-items: flex-start !important;}
.sitemap-card h2{display: grid !important;
  grid-template-rows: repeat(2, minmax(0, auto));
  align-content: start;
  min-height: 2em;
  line-height: 1 !important;}
.sitemap-card h2 > span{display: block;
  white-space: nowrap;}
.sitemap-number{margin-top: 0 !important;}
@media (max-width: 760px){.sitemap-card h2 > span{white-space: normal;}}
:root{--landing-header-divider: color-mix(in srgb, var(--brand-deep) 10%, transparent);}
.work-section{align-items: flex-start !important;
  padding-top: 54px !important;
  padding-bottom: 22px !important;
  min-height: calc(100vh - var(--landing-header-height)) !important;}
.work-section .section-title{margin-top: 0 !important;}
.work-section:not(#motion-graphics):not(#photography):not(#branding-logos) .feature-card{background: var(--brand-aqua);}
.work-section:not(#motion-graphics):not(#photography):not(#branding-logos) .feature-card img{background: var(--brand-aqua);}
.work-section .card-caption{background: var(--brand-aqua);
  backdrop-filter: none !important;}
.hero, .services-viewport, .work-section, .cta{min-height: calc(100vh - var(--landing-header-height)) !important;}
.hero.typing-hero-panel, .cta{height: calc(100vh - var(--landing-header-height)) !important;
  min-height: calc(100vh - var(--landing-header-height)) !important;}
@media (max-width: 760px){.hero.typing-hero-panel, .cta{height: auto !important;}}
:root{--madhi-light-panel: var(--brand-cyan);}
.sitemap-card, .work-section .card-caption{background: var(--madhi-light-panel);}
:root{--madhi-light-panel: var(--brand-cyan);
  --madhi-light-line: color-mix(in srgb, var(--brand-deep) 5%, transparent);}
.work-section .feature-card{border-color: var(--madhi-light-line);}
.work-section .card-caption{background: var(--madhi-light-panel);
  border-top-color: var(--madhi-light-line);}
.sitemap-card{background: var(--madhi-light-panel);
  border-color: var(--madhi-light-line);}
:root{--madhi-shared-divider: var(--landing-header-divider);}
.work-section .feature-card{border-color: var(--madhi-shared-divider);}
.work-section .card-caption{border-top: 1px solid var(--madhi-shared-divider) !important;}
#contact-cta{position: relative !important;}
#contact-cta .cta-footer{position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;}
footer, .cta-footer{background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0 !important;
  padding: 16px 24px 18px !important;}
footer .footer-inner, .cta-footer .footer-inner{gap: 0 !important;}
footer .footer-main, .cta-footer .footer-main{opacity:.75;}
footer .footer-main, footer .footer-main a, .cta-footer .footer-main, .cta-footer .footer-main a{color: color-mix(in srgb, var(--brand-deep) 68%, transparent);}
footer .footer-site-links, footer .footer-divider, .cta-footer .footer-site-links, .cta-footer .footer-divider{display: none !important;}
footer .footer-main a:hover, .cta-footer .footer-main a:hover{color: var(--brand-deep);
  opacity: 1 !important;}
#motion-graphics .landing-turntable-artwork{position: absolute;
  inset: 0 0 94px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px 16px;
  background: transparent;
  overflow: hidden;}
#motion-graphics .landing-turntable-inline{width: min(96%, 940px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;}
.landing-mobile-camera-feature{display:none !important;}
.motion-description-camera{display:none;}
#motion-graphics .landing-turntable-inline > svg{width: 100%;
  height: 100%;
  display: block;}
#motion-graphics .landing-turntable-actions{display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;}
#motion-graphics #turntableStartButton{margin: 0 !important;
  white-space: nowrap;}
@media (max-width: 900px){#motion-graphics .landing-turntable-actions{gap: 6px;}
#motion-graphics .landing-turntable-actions .btn{padding-left: 12px; padding-right: 12px;}}
#branding-logos .branding-feature-art{object-fit: contain !important;
  padding: 46px 46px 112px !important;}
#web-design .landing-web-preview-wrap{position: absolute;
  inset: 0 0 94px 0;
  overflow: hidden;
  background: transparent;}
#web-design .landing-web-preview{width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;}
#web-design .landing-preview-popout{position: static;
  z-index: 8;
  margin-top: 12px;
  margin-left: auto;
  align-self: flex-end;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-deep) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-aqua) 95%, transparent);
  color: var(--brand-deep);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-deep) 8%, transparent);
  transition: transform .18s ease, border-color .18s ease;}
#web-design .landing-preview-popout:hover, #web-design .landing-preview-popout:focus-visible{transform: translateY(-1px);
  border-color: transparent;
  background: var(--accent);
  color: var(--brand-aqua);}
#ui-icons .landing-airport-network-wrap{position: absolute;
  inset: 0 0 94px 0;
  overflow: hidden;
  background: var(--brand-cyan);}
#ui-icons .landing-airport-network-frame{width: 100%;
  height: 100%;
  display: block;
  border: 0;
  overflow: hidden;
  background: var(--brand-cyan);}
#ui-icons .landing-airport-network-card > img{display: none !important;}
#web-design .landing-web-preview-wrap, #web-design .landing-web-preview{overflow: hidden !important;}
.sitemap-card{min-height: 596px !important; background: var(--brand-cyan);}
.work-section .card-caption, .sitemap-card, .vector-info-card, .city-demo, .evacuation-demo{background: var(--brand-cyan);}
.sitemap-service-copy{display: flex; flex-direction: column; gap: 6px;}
.sitemap-subtitle{margin-bottom: 0 !important; color: color-mix(in srgb, var(--brand-deep) 82%, transparent); font-size: 12.5px !important; line-height: 1.45 !important;}
.sitemap-summary{margin-bottom: 2px !important; color: var(--muted); font-size: 12.5px !important; line-height: 1.48 !important;}
.sitemap-includes-title{margin: 2px 0 0 !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--brand-deep) 70%, transparent);}
.sitemap-bullet-list{margin: 0; padding-left: 16px; display: grid; gap: 4px; color: color-mix(in srgb, var(--brand-deep) 73%, transparent); font-size: 11.5px; line-height: 1.34;}
.sitemap-bullet-list li{margin: 0;}
.sitemap-main-link{margin-top: 18px !important;}
.branding-system-feature-card .branding-system-collage{position: absolute;
  inset: 0 0 94px 0;
  padding: 18px;
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr;
  grid-template-rows: 1.1fr 1fr .95fr;
  gap: 12px;
  background: var(--brand-deep);}
.branding-system-feature-card .branding-system-item{position: relative;
  padding: 30px 14px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--brand-aqua) 8%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-aqua) 4%, transparent), color-mix(in srgb, var(--brand-aqua) 2%, transparent));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;}
.branding-system-feature-card .branding-system-label{position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--brand-aqua) 82%, transparent);}
.branding-system-feature-card .branding-system-item img{position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  transform: none !important;
  object-fit: contain !important;}
.branding-system-feature-card .layout-primary{grid-column: 1 / 3; grid-row: 1;}
.branding-system-feature-card .layout-stacked{grid-column: 3; grid-row: 1 / 3; background: var(--brand-deep);}
.branding-system-feature-card .layout-wordmark{grid-column: 1 / 3; grid-row: 2;}
.branding-system-feature-card .layout-icon{grid-column: 1; grid-row: 3; background: var(--brand-deep);}
.branding-system-feature-card .layout-inverse{grid-column: 2; grid-row: 3; background: var(--brand-deep);}
.branding-system-feature-card .layout-extra{grid-column: 3; grid-row: 3; background: var(--brand-deep);}
.branding-system-feature-card .layout-mono{grid-column: 3; grid-row: 2; background: var(--brand-deep);}
#web-design .landing-web-preview-wrap{position: absolute;
  inset: 0 0 94px 0;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: center;}
#web-design .landing-web-preview-shell{width: min(calc(100% - 44px), 1120px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand-deep) 12%, transparent);
  background: transparent;}
#web-design .landing-web-preview{width: 100%; height: 100%; display:block; border:0; background:transparent;}
#web-design .card-caption-has-actions{display: flex; align-items: center; justify-content: space-between; gap: 16px;}
#web-design .landing-web-actions{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
#web-design .section-action{margin: 0 !important;}
.popout-action{display:inline-flex; align-items:center; gap:10px; white-space:nowrap;}
.popout-action .btn-arrow{display:inline-flex; width:18px; height:18px;}
.popout-action .btn-arrow svg{width:100%; height:100%;}
#motion-graphics .landing-turntable-actions{justify-content: flex-end; width: auto; margin-left: auto;}
#motion-graphics #turntableStartButton{display:none !important;}
@media (max-width: 1100px){.sitemap-card{min-height: 630px !important;}
#web-design .card-caption-has-actions{align-items: flex-start; flex-direction: column;}
#web-design .landing-web-actions{width: 100%; justify-content: flex-start; flex-wrap: wrap;}}
@media (max-width: 950px){.branding-system-feature-card .branding-system-collage{grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, minmax(80px, 1fr));}
.branding-system-feature-card .layout-primary{grid-column: 1 / -1; grid-row: 1;}
.branding-system-feature-card .layout-wordmark{grid-column: 1 / -1; grid-row: 2;}
.branding-system-feature-card .layout-stacked{grid-column: 1; grid-row: 3 / 5;}
.branding-system-feature-card .layout-icon{grid-column: 2; grid-row: 3;}
.branding-system-feature-card .layout-inverse{grid-column: 2; grid-row: 4;}
.branding-system-feature-card .layout-extra{grid-column: 1; grid-row: 5;}
.branding-system-feature-card .layout-mono{grid-column: 2; grid-row: 5;}
#web-design .landing-web-preview-shell{width: min(calc(100% - 28px), 1020px);}}
.sitemap-card{padding: 16px !important;}
.sitemap-card-content{gap: 0;}
.sitemap-subtitle{font-size: 14.5px !important;
  line-height: 1.5 !important;}
.sitemap-summary{font-size: 14.5px !important;
  line-height: 1.52 !important;}
.sitemap-includes-title{margin-top: 14px !important;
  margin-bottom: 8px !important;
  font-size: 13.25px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;}
.sitemap-bullet-list{font-size: 13.25px !important;
  line-height: 1.42 !important;
  gap: 5px !important;}
.sitemap-main-link{margin-top: auto !important;
  margin-bottom: 6px !important;
  align-self: center !important;}
#web-design .landing-web-preview-wrap{padding: 0 10px 0 !important;}
#web-design .landing-web-preview-shell{width: calc(100% - 20px) !important;
  max-width: none !important;
  height: auto !important;}
#web-design .landing-web-actions{gap: 12px;}
#web-design .card-caption-copy{display: flex;
  align-items: center;
  gap: 12px;}
#web-design .card-caption-copy > div{min-width: 0;}
#web-design .card-caption-copy h3, #web-design .card-caption-copy p{margin: 0;}
.popout-action{width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 0 !important;}
.popout-action .btn-arrow{width: 18px !important;
  height: 18px !important;}
.popout-action .btn-arrow svg{display: block;}
.branding-system-feature-card .branding-system-item img, .branding-system-collage .branding-system-item img{background: transparent;}
.sitemap-card:nth-child(2) .sitemap-includes-title, .sitemap-card:nth-child(3) .sitemap-includes-title{margin-top: 37px !important;}
.branding-system-feature-card .branding-system-item img, .branding-system-collage .branding-system-item img{width: 82% !important;
  height: 82% !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
  object-position: center !important;}
.branding-system-feature-card .layout-stacked img, .branding-system-collage .layout-stacked img, .branding-system-feature-card .layout-icon img, .branding-system-collage .layout-icon img{width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;}
.branding-system-feature-card .layout-mono img, .branding-system-collage .layout-mono img{width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;}
#web-design .landing-web-preview-wrap{padding: 10px !important;}
#web-design .landing-web-preview-shell{height: calc(100% - 20px) !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  aspect-ratio: 16 / 9 !important;
  flex: 0 1 auto !important;}
.sitemap-summary{font-size: 13.25px !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  font-style: normal !important;}
.branding-system-feature-card .branding-system-collage{grid-template-columns: 1.4fr 1.4fr 1fr !important;
  grid-template-rows: 1.08fr .92fr 1fr !important;}
.branding-system-feature-card .layout-primary{grid-column: 1 / 3 !important; grid-row: 1 !important;}
.branding-system-feature-card .layout-stacked{grid-column: 3 !important; grid-row: 1 !important;}
.branding-system-feature-card .layout-wordmark{grid-column: 1 / 3 !important; grid-row: 2 !important;}
.branding-system-feature-card .layout-mono{grid-column: 3 !important; grid-row: 2 !important; display: flex !important;}
.branding-system-feature-card .layout-icon{grid-column: 1 !important; grid-row: 3 !important;}
.branding-system-feature-card .layout-inverse{grid-column: 2 !important; grid-row: 3 !important;}
.branding-system-feature-card .layout-extra{grid-column: 3 !important; grid-row: 3 !important;}
.branding-system-feature-card .layout-primary img{width: 70% !important; height: 72% !important; max-width: 70% !important; max-height: 72% !important;}
.branding-system-feature-card .layout-wordmark img{width: 64% !important; height: 62% !important; max-width: 64% !important; max-height: 62% !important;}
.branding-system-feature-card .layout-stacked img{width: 68% !important; height: 70% !important; max-width: 68% !important; max-height: 70% !important;}
.branding-system-feature-card .layout-mono img{width: 74% !important; height: 66% !important; max-width: 74% !important; max-height: 66% !important;}
.branding-system-feature-card .layout-icon img{width: 48% !important; height: 58% !important; max-width: 48% !important; max-height: 58% !important;}
.branding-system-feature-card .layout-inverse img, .branding-system-feature-card .layout-extra img{width: 72% !important; height: 64% !important; max-width: 72% !important; max-height: 64% !important;}
#web-design .landing-web-preview-wrap{padding: 8px 14px !important;}
#web-design .landing-web-preview-shell{height: calc(100% - 16px) !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  margin: auto !important;}
#web-design .landing-web-preview{width: 100% !important;
  height: 100% !important;}
#branding-logos .feature-card{width:70% !important;
  margin-inline:auto !important;}
#branding-logos .branding-system-collage{background:var(--brand-deep);
  grid-template-columns:1.4fr 1.4fr 1fr !important;
  grid-template-rows:1.08fr .92fr 1fr !important;}
#branding-logos .branding-system-item{background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0 !important;}
#branding-logos .layout-primary{grid-column:1 / 3 !important; grid-row:1 !important;}
#branding-logos .layout-wordmark{grid-column:1 / 3 !important; grid-row:2 !important;}
#branding-logos .layout-icon{grid-column:1 !important; grid-row:3 !important;}
#branding-logos .layout-stacked{grid-column:2 !important; grid-row:3 !important;}
#branding-logos .layout-mono{grid-column:3 !important; grid-row:1 !important;}
#branding-logos .layout-extra{grid-column:3 !important; grid-row:2 !important;}
#branding-logos .layout-inverse{grid-column:3 !important; grid-row:3 !important;}
#branding-logos .branding-system-item img{width:70% !important;height:70% !important;max-width:70% !important;max-height:70% !important;}
#branding-logos .layout-wordmark img{width:64% !important;height:58% !important;max-width:64% !important;max-height:58% !important;}
#branding-logos .layout-icon img{width:42% !important;height:54% !important;max-width:42% !important;max-height:54% !important;}
#branding-logos .layout-stacked img{width:58% !important;height:64% !important;max-width:58% !important;max-height:64% !important;}
#branding-logos .layout-mono img, #branding-logos .layout-extra img, #branding-logos .layout-inverse img{width:72% !important;height:68% !important;max-width:72% !important;max-height:68% !important;}
#web-design .feature-card{width:80% !important;
  margin-inline:auto !important;}
#web-design .landing-web-preview-wrap{padding:8px 12px !important;}
#web-design .landing-web-preview-shell{height:calc(100% - 16px) !important;
  width:auto !important;
  max-width:calc(100% - 24px) !important;
  aspect-ratio:16/9 !important;
  margin:auto !important;}
@media (max-width:950px){#branding-logos .feature-card, #web-design .feature-card{width:100% !important;}}
#web-design .landing-web-preview-wrap{padding: 0 !important;
  background: transparent;
  display: block !important;}
#web-design .landing-web-preview-shell{width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
  overflow: hidden !important;}
#web-design .landing-web-preview{width: 178.5714286% !important;
  height: 178.5714286% !important;
  max-width: none !important;
  max-height: none !important;
  transform: scale(.56) !important;
  transform-origin: top left !important;
  background: transparent;
  border: 0;}
#branding-logos .feature-card{width: 62% !important;
  margin-inline: auto !important;}
#branding-logos .branding-system-collage{grid-template-columns: 1.15fr 1.15fr 1fr !important;}
#branding-logos .layout-primary img{width: 74% !important; height: 74% !important; max-width: 74% !important; max-height: 74% !important;}
#branding-logos .layout-wordmark img{width: 70% !important; height: 64% !important; max-width: 70% !important; max-height: 64% !important;}
#branding-logos .layout-icon img{width: 70% !important; height: 76% !important; max-width: 70% !important; max-height: 76% !important;}
#branding-logos .layout-stacked img{width: 80% !important; height: 82% !important; max-width: 80% !important; max-height: 82% !important;}
#branding-logos .layout-mono img, #branding-logos .layout-extra img, #branding-logos .layout-inverse img{width: 88% !important; height: 84% !important; max-width: 88% !important; max-height: 84% !important;}
@media (max-width: 950px){#motion-graphics .feature-card, #branding-logos .feature-card, #web-design .feature-card{width: 100% !important;}}
#branding-logos .feature-card, #ui-icons .feature-card, #motion-graphics .feature-card, #web-design .feature-card{width: min(980px, 100%) !important;
  height: 644px !important;
  margin-left: 0 !important;
  margin-right: auto !important;}
#branding-logos .branding-system-collage, #ui-icons .landing-airport-network-wrap, #motion-graphics .landing-turntable-artwork, #web-design .landing-web-preview-wrap{height: 550px !important;
  inset: 0 0 auto 0 !important;}
#web-design .landing-web-preview-wrap, #web-design .landing-web-preview-shell{width: 100% !important;
  max-width: 100% !important;}
#branding-logos .branding-system-collage{background: var(--brand-deep);
  grid-template-columns: 1.15fr 1.15fr 1fr !important;
  grid-template-rows: 1.08fr .92fr 1fr !important;}
#branding-logos .branding-system-item{display: flex !important;
  align-items: center !important;
  justify-content: center !important;}
#branding-logos .layout-primary img{width: 80% !important; height: 80% !important; max-width: 80% !important; max-height: 80% !important;}
#branding-logos .layout-wordmark img{width: 76% !important; height: 70% !important; max-width: 76% !important; max-height: 70% !important;}
#branding-logos .layout-icon img{width: 82% !important; height: 88% !important; max-width: 82% !important; max-height: 88% !important;}
#branding-logos .layout-stacked img{width: 90% !important; height: 92% !important; max-width: 90% !important; max-height: 92% !important;}
#branding-logos .layout-mono img, #branding-logos .layout-inverse img, #branding-logos .layout-extra img{width: 94% !important; height: 88% !important; max-width: 94% !important; max-height: 88% !important;}
@media (max-width: 1030px){#branding-logos .feature-card, #ui-icons .feature-card, #motion-graphics .feature-card, #web-design .feature-card{width: 100% !important;
    height: auto !important;
    min-height: 560px !important;}
#branding-logos .branding-system-collage, #ui-icons .landing-airport-network-wrap, #motion-graphics .landing-turntable-artwork, #web-design .landing-web-preview-wrap{height: calc(100% - 94px) !important;}}
#branding-logos .branding-system-collage{background: var(--brand-deep);}
#branding-logos .layout-primary img{width: 96% !important; height: 92% !important; max-width: 96% !important; max-height: 92% !important;}
#branding-logos .layout-wordmark img{width: 94% !important; height: 86% !important; max-width: 94% !important; max-height: 86% !important;}
#branding-logos .layout-icon img{width: 96% !important; height: 96% !important; max-width: 96% !important; max-height: 96% !important;}
#branding-logos .layout-stacked img{width: 112% !important; height: 112% !important; max-width: 112% !important; max-height: 112% !important;}
#branding-logos .layout-mono img, #branding-logos .layout-inverse img, #branding-logos .layout-extra img{width: 106% !important; height: 100% !important; max-width: 106% !important; max-height: 100% !important;}
.sitemap-main-link, .work-section .section-action{background: var(--brand-aqua);}
.sitemap-main-link:hover, .sitemap-main-link:focus-visible, .work-section .section-action:hover, .work-section .section-action:focus-visible{background: var(--accent);
  border-color: transparent;
  color: var(--brand-aqua);}
.sitemap-main-link, .work-section .section-action{border-width: 1px !important;}
#branding-logos .layout-stacked img{width: 145% !important;
  height: 145% !important;
  max-width: 145% !important;
  max-height: 145% !important;
  transform: translateY(8%) !important;}
.sitemap-main-link, .work-section .section-action{border-width: 2px !important;}
.sitemap-service-copy{display: grid !important;
  grid-template-rows: 44px 42px auto 1fr !important;
  align-content: start !important;}
.sitemap-subtitle, .sitemap-summary{min-height: 0 !important;
  margin-bottom: 0 !important;}
.sitemap-includes-title, .sitemap-card:nth-child(2) .sitemap-includes-title, .sitemap-card:nth-child(3) .sitemap-includes-title{margin-top: 14px !important;
  margin-bottom: 8px !important;}
.sitemap-service-copy{grid-template-rows: auto 42px auto 1fr !important;
  row-gap: 0 !important;}
.sitemap-subtitle, .sitemap-summary{margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: start !important;}
#web-design .landing-preview-popout, #web-design .popout-action{background: var(--brand-aqua);}
#web-design .landing-preview-popout:hover, #web-design .landing-preview-popout:focus-visible, #web-design .popout-action:hover, #web-design .popout-action:focus-visible{background: var(--accent);
  color: var(--brand-aqua);
  border-color: transparent;}
@media (min-width: 1101px){.sitemap-card{height: 570px !important;
    min-height: 570px !important;}}





.branding-system-feature-card .branding-system-label{font-size: 15.125px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;}
.hero.typing-hero-panel{background: var(--brand-aqua);}
.hero-madhi-background{display: none !important;}




.work-section .feature-layout{display: grid !important;
  grid-template-columns: minmax(0, 980px) minmax(250px, 330px) !important;
  gap: 24px !important;
  align-items: start !important;
  justify-content: start !important;
  margin-bottom: 0 !important;}
#branding-logos .feature-card, #motion-graphics .feature-card, #web-design .feature-card, .work-section .feature-card{width: 100% !important;
  max-width: 980px !important;
  height: 550px !important;
  min-height: 550px !important;
}
#ui-icons .feature-card{width:100% !important;
  max-width:980px !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:16 / 8.1 !important;
  margin: 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;}
#branding-logos .branding-system-collage, #ui-icons .landing-airport-network-wrap, #motion-graphics .landing-turntable-artwork, #web-design .landing-web-preview-wrap{height: 100% !important;
  min-height: 100% !important;
  inset: 0 !important;}
.work-section .card-caption{display: none !important;}
.landing-feature-info{width: fit-content;
  max-width: 330px;
  padding-top: 6px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: .92;
  align-self: stretch;
  justify-content: flex-start;}
.landing-feature-info h2{margin: 0;
  font-size: 22px;
  font-weight: 600;
  
  letter-spacing: -.3px;}
.landing-feature-kicker{display:none;}
.landing-feature-info .caption{font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: -15px;
  text-transform: uppercase;
  letter-spacing: .08em;}
.landing-feature-info > p, .landing-feature-info .feature-description, .landing-feature-info .motion-description{margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 100%;}
.landing-feature-info .feature-description, .landing-feature-info .motion-description{margin-top: 8px;}
.landing-feature-info .vector-card-stack{display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
  align-items: stretch;}
.landing-feature-info .vector-info-card, .landing-feature-info .city-demo{width: fit-content;
  min-width: 0;
  max-width: 100%;
  min-height: 112px;
  background: var(--madhi-light-panel);
  border: none;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-deep) 4%, transparent);
  display: flex;
  flex-direction: column;}
.landing-feature-info .vector-info-card h3{margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;}
.landing-feature-info .vector-info-card p, .landing-feature-info .city-demo .hint{margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);}
.landing-feature-info .city-demo{margin-top: 18px;
  min-height: 86px;
  justify-content: center;}
.landing-feature-info .info-title-action-row{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;}
.landing-feature-info .info-title-copy{min-width: 0;}
.landing-feature-info .info-title-action-row .caption{margin-bottom: 4px;}
.landing-feature-info .popout-action{position: static !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px;}
.landing-feature-info .landing-feature-explore{position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 14px auto 0 !important;
  min-height: 36px !important;
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  text-align: center !important;
  background: transparent;
  white-space: nowrap;}
.landing-feature-info .landing-feature-explore:hover, .landing-feature-info .landing-feature-explore:focus-visible{background: var(--accent);
  border-color: transparent;
  color: var(--brand-aqua);}
@media (max-width: 1380px) and (min-width: 1101px){.work-section .feature-layout{grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;}
.landing-feature-info{max-width: 300px;}}
@media (min-width:1101px){
  html[data-page="home"] #services{
    height:calc(100svh - var(--site-header-height)) !important;
    min-height:calc(100svh - var(--site-header-height)) !important;
    padding:26px 0 24px !important;
    align-items:flex-start !important;
    overflow:hidden;
  }
  html[data-page="home"] #services .services-title{margin-bottom:22px !important;font-size:clamp(29.16px,2.214vw,38.88px) !important;}
  html[data-page="home"] #services .services-byline{
    margin:0 0 22px !important;
  }
  html[data-page="home"] #services .desktop-service-explorer{
    display:grid;
    grid-template-columns:minmax(250px,20%) minmax(0,1fr);
    gap:18px;
    align-items:start;
    position:relative;
    width:100%;
  }
  html[data-page="home"] .desktop-only-service{display:block;}
  html[data-page="home"] #services .desktop-service-explorer > .sitemap-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-content:start;
    width:100%;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card{
    width:100% !important;
    height:auto !important;
    min-height:78px !important;
    padding:10px 16px !important;
    border:0 !important;
    border-radius:14px !important;
    background:var(--tile-charcoal) !important;
    overflow:hidden;
    cursor:default;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card-top{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
    min-height:58px;
    cursor:pointer;
    outline:0;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card-top:focus-visible{
    outline:2px solid #FFBF00;
    outline-offset:3px;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-number{
    order:1;
    flex:0 0 58px !important;
    width:58px !important;
    height:58px !important;
    margin:0 !important;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card h2{
    order:2;
    min-height:0 !important;
    max-width:none !important;
    margin:0 !important;
    font-size:clamp(21.6px,1.566vw,27px) !important;
    line-height:1.02 !important;
    letter-spacing:-2px !important;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card h2 > span{white-space:normal !important;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-service-copy,
  html[data-page="home"] #services .desktop-service-explorer .sitemap-main-link{display:none !important;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card{transition:opacity .2s ease;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card:not(.is-active){opacity:.38;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card.is-active{opacity:1;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card .sitemap-card-top{margin-bottom:0 !important;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-summary{
    min-height:0 !important;
    margin:0 !important;
    font-size:13.5px !important;
    line-height:1.42 !important;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-includes-block{margin-top:8px !important;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-includes-label,
  html[data-page="home"] #services .desktop-service-explorer .sitemap-includes-list{
    font-size:13.5px !important;
    line-height:1.42 !important;
  }
  html[data-page="home"] #services .desktop-service-panels{min-width:0;width:100%;}
  html[data-page="home"] #services .desktop-service-includes{
    position:absolute;
    top:10px;
    right:calc((var(--home-side-rail) + var(--home-main-right-gap) - var(--home-panel-scroll-safe) + var(--home-content-gutter)) * -1);
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    width:calc(var(--home-side-rail) - var(--home-panel-scroll-safe));
    min-width:0;
    padding-left:4px;
    padding-right:6px;
    box-sizing:border-box;
    color:#FFFFFF;
    text-align:right;
  }
  html[data-page="home"] #services .desktop-service-includes-title{
    display:block;
    width:fit-content;
    margin:0 0 5px;
    padding:0;
    border:0;
    background:transparent;
    color:#FFBF00;
    font-family:"Inter",Arial,sans-serif;
    font-size:15.6px;
    font-weight:600;
    line-height:1.45;
    letter-spacing:.04em;
    text-align:right;
  }
  html[data-page="home"] #services .desktop-service-includes-list{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
  }
  html[data-page="home"] #services .desktop-service-includes-list li{
    display:grid;
    grid-template-columns:7px minmax(0,1fr);
    column-gap:6px;
    align-items:start;
    width:fit-content;
    max-width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#FFFFFF;
    font-family:"Inter",Arial,sans-serif;
    font-size:15.6px;
    font-weight:500;
    line-height:1.45;
    text-align:right;
  }
  html[data-page="home"] #services .desktop-service-includes-list li::before{
    content:"";
    display:block;
    width:0;
    height:0;
    margin-top:.42em;
    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:7px solid #FFBF00;
  }
  html[data-page="home"] #services .desktop-service-explore{
    margin-top:24px;
  }
  html[data-page="home"] #services .desktop-service-panel{display:none;}
  html[data-page="home"] #services .desktop-service-panel.is-active{display:block;}
  html[data-page="home"] #services .desktop-service-panel > .work-section{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:0 !important;
    background:transparent !important;
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
  }
  html[data-page="home"] #services .desktop-service-panel > .work-section > .container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  html[data-page="home"] #services .desktop-service-panel .landing-indexed-heading{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel .feature-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
    align-items:start !important;
    margin:0 !important;
  }
  html[data-page="home"] #services .desktop-service-panel .mobile-feature-label{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel .feature-card{
    width:100% !important;
    max-width:none !important;
    height:460px !important;
    min-height:460px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:14px !important;
    overflow:hidden;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .feature-card{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1.98 / 1 !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .feature-card{
    height:602px !important;
    min-height:602px !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .feature-card,
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .landing-turntable-artwork{
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    --tile-background:transparent;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .feature-card{
    width:min(1120px,100%) !important;
    max-width:1120px !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    justify-self:start !important;
    background:transparent !important;
    --tile-background:transparent;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .landing-web-preview-wrap,
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .landing-web-preview-shell{
    width:100% !important;
    height:100% !important;
    border-radius:14px !important;
    overflow:hidden !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .landing-web-preview{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    transform-origin:top left !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .feature-layout{
    gap:7px !important;
    transform:translateY(12px) !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .feature-card{
    width:min(100%,620px) !important;
    max-width:620px !important;
    height:440px !important;
    min-height:440px !important;
    aspect-ratio:auto !important;
    justify-self:start !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .branding-system-collage.logo-system-three{
    top:0 !important;
    transform:translateX(-50%) !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .landing-feature-info{
    width:min(100%,var(--home-caption-width)) !important;
    max-width:var(--home-caption-width) !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .landing-feature-info .feature-description{
    width:100% !important;
    max-width:none !important;
    text-align:center !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-card{
    --tile-background:transparent;
    position:relative;
    width:100% !important;
    height:min(68svh,620px) !important;
    min-height:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-card > img{
    background:transparent !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center center !important;
    filter:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-title{
    position:absolute;
    left:50%;
    top:auto;
    bottom:18px;
    transform:translateX(-50%);
    width:calc(100% - 44px);
    color:#FFFFFF;
    font-family:"Allura",cursive;
    font-size:clamp(62px,5.45vw,98px);
    font-style:normal;
    font-weight:400 !important;
    font-synthesis:none;
    line-height:1.12;
    letter-spacing:0;
    text-align:center;
    white-space:nowrap;
    text-shadow:none;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-title-emphasis{
    color:#FFFFFF;
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    text-decoration:none;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="copywriting"] .copywriting-feature-card{
    --tile-background:transparent;
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    height:460px !important;
    min-height:460px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="copywriting"] .copywriting-feature-card p{
    margin:0;
    color:#232323;
    font-family:"Inter",Arial,sans-serif;
    font-size:162.24px;
    line-height:1.45;
    text-align:center;
  }
  html[data-page="home"] #services .desktop-service-panel .landing-feature-info{
    width:min(100%,var(--home-caption-width)) !important;
    max-width:var(--home-caption-width) !important;
    padding-top:0 !important;
    gap:8px !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .landing-feature-info{
    position:static !important;
    width:min(100%,var(--home-caption-width)) !important;
    max-width:var(--home-caption-width) !important;
    padding-right:0 !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] :is(.landing-preview-popout,.preview-popout){
    position:static !important;
    inset:auto !important;
    display:inline-flex !important;
    margin:12px 0 0 !important;
    align-self:flex-start !important;
  }
  html[data-page="home"] #services .desktop-service-panel .landing-feature-info > p,
  html[data-page="home"] #services .desktop-service-panel .landing-feature-info .feature-description,
  html[data-page="home"] #services .desktop-service-panel .landing-feature-info .motion-description{
    margin-top:0 !important;
  }
  html[data-page="home"] #services .desktop-service-panel .landing-feature-explore{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel .dog-ear{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel #motion-graphics .feature-card > .dog-ear{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel #motion-graphics .landing-feature-kicker{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .landing-feature-info{
    width:min(100%,var(--home-caption-width)) !important;
    max-width:var(--home-caption-width) !important;
    justify-self:start !important;
    margin-top:-26px !important;
    text-align:left !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .motion-description{
    text-align:center !important;
    text-wrap:balance;
  }
  html[data-page="home"] #services .desktop-service-panel .landing-turntable-artwork{height:602px !important;}
  html[data-page="home"] #services .desktop-service-panel .landing-turntable-inline{
    width:min(100%,1020px) !important;
    max-width:1020px !important;
    height:100% !important;
    transform:translateY(-37px) !important;
  }
  html[data-page="home"] :is(.sitemap-card,.feature-card,.studio-info-card,.vector-info-card,.city-demo){
    border-radius:4px !important;
  }
  html[data-page="home"] :is(.sitemap-card,.feature-card,.studio-info-card){border:0 !important;}
  html[data-page="home"] .approach-viewport .studio-info-card,
  html[data-page="home"] .client-viewport .studio-info-card{border:0 !important;}
}

@media (min-width: 1101px){
.dog-ear{padding:8.96px 23.04px;font-size:15.36px;border-bottom-left-radius:17.92px;}
#services .sitemap-main-link,
.work-section .landing-feature-info .landing-feature-explore{width:calc(100% - 10px) !important;max-width:100% !important;min-height:36px !important;padding:10px 8px !important;font-size:14.5px !important;line-height:1 !important;white-space:nowrap !important;}
html[data-header-style="alt"] #services .sitemap-number,
html[data-header-style="alt"] .work-section .landing-section-number{-webkit-text-stroke:1.8px currentColor;}
#motion-graphics .feature-card{--tile-background:transparent;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;}
#motion-graphics .feature-card > .dog-ear{display:none !important;}
#motion-graphics .landing-turntable-artwork{--tile-background:transparent;height:602px !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;}
#motion-graphics .landing-turntable-inline{width:min(100%,1020px) !important;max-width:1020px !important;height:100% !important;margin:0 auto !important;overflow:visible !important;}
#motion-graphics .landing-turntable-inline > svg{width:100% !important;height:100% !important;transform:none !important;transform-origin:center center;}
#motion-graphics .turntableSvg .turntable-bg{fill:transparent !important;}
#motion-graphics .turntableSvg .turntable-handle-fill{fill:#FFFFFF !important;}
#motion-graphics .landing-feature-kicker{display:block;margin:0 0 10px;color:#FFBF00;font-size:12.5px;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;}
}
#branding-logos .branding-system-collage{transform: translateY(18px) !important;}
#branding-logos .branding-system-feature-card, #branding-logos .branding-system-collage{background:transparent !important; border:0 !important; box-shadow:none !important;}
#branding-logos .branding-system-label{color: var(--brand-aqua);}
#branding-logos .feature-card > .dog-ear{top: -2px !important;
  right: -2px !important;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--accent);}
.services-byline, .studio-info-byline{width: min(1180px, 100%);
  margin: -12px 0 24px;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.52;
  font-weight: 400;
  font-style: normal;}
@media (min-width: 1101px){#services .sitemap-summary{min-height: 154px !important;}}
.studio-info-viewport{min-height: calc(100vh - var(--landing-header-height));
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 54px 0 22px;}
.studio-info-container{width: 100%;}
.studio-info-title{font-size: 41.4px !important;
  font-weight: 600 !important;
  letter-spacing: -1px !important;
  line-height: 1.05 !important;
  margin: 0 0 30px !important;}
.studio-info-grid{display: grid;
  gap: 26px;
  width: 100%;}
.studio-info-grid-four{grid-template-columns: repeat(4, minmax(0, 1fr));}
.studio-info-grid-three{grid-template-columns: repeat(3, minmax(0, 1fr));}
.studio-info-card{min-height: 330px;
  padding: 22px 20px;
  border: 1px solid var(--madhi-shared-divider);
  border-radius: 4px;
  background: var(--madhi-light-panel);
  overflow: hidden;}
.studio-info-card-content{height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;}
.studio-info-card h3{margin: 0 0 20px;
  
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(24px, 1.8vw, 31px);
  line-height: 1.06;
  letter-spacing: -1px;}
.studio-info-card h3 strong{font-weight: 700;}
.studio-info-card p{margin: 0;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.52;}
@media (max-width: 1100px){.studio-info-viewport{min-height: auto;
    padding: 48px 0;}
.studio-info-grid-four, .studio-info-grid-three{grid-template-columns: repeat(2, minmax(0, 1fr));}
.studio-info-card{min-height: 280px;}}
@media (max-width: 760px){.services-byline, .studio-info-byline{margin-top: -8px;
    margin-bottom: 20px;}
.studio-info-grid-four, .studio-info-grid-three{grid-template-columns: 1fr;}
.studio-info-card{min-height: 0;}}
.services-byline, .studio-info-byline{width: 100% !important;
  max-width: none !important;}
.studio-info-card{position: relative;
  padding: 16px !important;
  border: 1px solid var(--madhi-light-line);
  border-radius: 4px !important;
  background: var(--madhi-light-panel);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;}
.studio-info-card:hover{border-color: var(--border);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-deep) 4%, transparent);}
.studio-info-card-content{height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;}
.studio-info-card h3{margin: 0 0 16px !important;
  
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(25px, 2.25vw, 37.26px) !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;}
.studio-info-card h3 strong{font-weight: 700 !important;}
.studio-info-card p{margin: 0 !important;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.52 !important;}
.studio-info-title{margin: 0 0 18px !important;}
.services-byline, .studio-info-byline{width: 100% !important;
  max-width: none !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;}
.studio-info-card h3{margin: 0 0 16px !important;
  
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(25px, 2.25vw, 35px) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -2px !important;}
.studio-card-title-main, .studio-card-title-detail{display: block;
  font-size: inherit;
  line-height: inherit;}
.studio-card-title-main{font-weight: 500;
  font-style: normal;}
.studio-card-title-detail{margin-top: 2px;
  font-weight: 400;
  font-style: italic;}
.studio-info-card p{font-size: 14.5px !important;
  line-height: 1.52 !important;}
@media (min-width: 1101px){.approach-viewport .studio-info-card h3{min-height: 146px !important;}
.client-viewport .studio-info-card h3{min-height: 78px !important;}
.approach-viewport .studio-info-card{height: 286px !important;
    min-height: 286px !important;}
.client-viewport .studio-info-card{height: 218px !important;
    min-height: 218px !important;}}
@media (min-width: 1101px){#services .sitemap-service-copy{display: grid !important;
    grid-template-rows: 88px auto 1fr !important;
    row-gap: 0 !important;
    align-content: start !important;}
#services .sitemap-summary{min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    align-self: start !important;}
#services .sitemap-includes-title, #services .sitemap-card:nth-child(2) .sitemap-includes-title, #services .sitemap-card:nth-child(3) .sitemap-includes-title{margin-top: 0 !important;
    margin-bottom: 8px !important;
    align-self: start !important;}
.approach-viewport .studio-info-card-content{display: grid !important;
    grid-template-rows: 180px auto !important;
    row-gap: 18px !important;
    height: 100% !important;}
.approach-viewport .studio-info-card h3{min-height: 0 !important;
    margin: 0 !important;}
.approach-viewport .studio-info-card p{margin: 0 !important;
    align-self: start !important;}
.approach-viewport .studio-info-card{height: 306px !important;
    min-height: 306px !important;}
.client-viewport .studio-info-card-content{display: grid !important;
    grid-template-rows: 74px auto !important;
    row-gap: 18px !important;
    height: 100% !important;}
.client-viewport .studio-info-card h3{min-height: 0 !important;
    margin: 0 !important;}
.client-viewport .studio-info-card p{margin: 0 !important;
    align-self: start !important;}
.client-viewport .studio-info-card{height: auto !important;
    min-height: 0 !important;}}
#services .sitemap-card{height: 368px !important;
  min-height: 368px !important;}
#services .sitemap-card-content{height: 100% !important;
  display: flex !important;
  flex-direction: column !important;}
#services .sitemap-service-copy{display: block !important;}
#services .sitemap-summary{min-height: 88px !important;
  margin: 0 !important;}
#services .sitemap-includes-line{margin: 10px 0 0 !important;
  color: color-mix(in srgb, var(--brand-deep) 73%, transparent);
  font-size: 13.25px !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;}
#services .sitemap-main-link{margin-top: auto !important;
  margin-bottom: 6px !important;
  min-height: 36px !important;
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;}
#services .sitemap-includes-label{font-weight: 400 !important;
  font-style: normal !important;
  text-decoration: none !important;}
#services .sitemap-includes-line em{font-style: italic !important;
  font-weight: 400 !important;}
@media (min-width: 1101px){#branding-logos .feature-layout{grid-template-columns:minmax(0,1fr) !important;gap:3.5px !important;}
#branding-logos .branding-system-feature-card{width:100% !important;
    max-width:none !important;
    height:526px !important;
    min-height:526px !important;
    border-radius:0 !important;}
#branding-logos .landing-feature-info{max-width:none !important;}
#branding-logos .branding-system-collage{height: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    gap: 12px !important;
    transform: none !important;}
#branding-logos .branding-system-label{top: 9px !important;
    left: 10.8px !important;
    font-size: 13.6125px !important;}
#branding-logos .feature-card > .dog-ear{transform: none !important;
    transform-origin: top right !important;}}
.approach-viewport .studio-card-title-main, .client-viewport .studio-card-title-main{font-weight: 500 !important;
  font-style: normal !important;}
@media (min-width: 1101px){.client-viewport .studio-info-card-content{row-gap: 16px !important;}
.client-viewport .studio-info-card{height: auto !important;
    min-height: 0 !important;}}
#contact-cta.contact-viewport{display: block !important;
  text-align: left !important;
  padding: clamp(30px, 3vw, 48px) 0 64px !important;
  overflow: hidden !important;
  background: var(--brand-aqua);}
.contact-viewport-inner{width: min(1440px, calc(100% - 80px));
  margin: 0 auto;}
.contact-intro{width: 100%;
  margin: 0 auto clamp(28px, 3vw, 42px);
  text-align: center;}
.contact-intro h2{margin: 0 auto 18px;
  
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(68px, 5.2vw, 104px);
  font-weight: 400;
  font-style: normal;
  line-height: .96;
  letter-spacing: -.045em;}
.contact-intro p{width: min(980px, 100%);
  margin: 0 auto;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(14.4px, .972vw, 18.9px);
  font-weight: 400;
  line-height: 1.48;
  text-align: center;
  text-wrap: balance;}
.contact-content-grid{display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: stretch;}
.contact-guide-card{min-height: 330px;
  padding: 30px 32px;
  border-radius: 26px;
  background: var(--madhi-light-panel);
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif;}
.contact-guide-card h3{margin: 0 0 20px;
  
  font-size: 22px;
  font-weight: 600;
  line-height: 1.18;}
.contact-guide-card ul{margin: 0 0 22px;
  padding-left: 20px;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.48;}
.contact-guide-card p{margin: 0;
  font-size: 14.5px;
  line-height: 1.55;}
.contact-brief-form{min-height: 330px;
  padding: 28px 30px;
  border: 1px solid color-mix(in srgb, var(--brand-deep) 10%, transparent);
  border-radius: 4px;
  background: var(--brand-aqua);
  font-family: "Inter", Arial, sans-serif;}
.contact-form-grid{display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;}
.contact-field{display: grid;
  gap: 7px;
  min-width: 0;}
.contact-field-wide{grid-column: 1 / -1;}
.contact-field-label{color: var(--brand-deep);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;}
.contact-input-shell{position: relative;
  display: block;}
.contact-message-shell .contact-message-prompt{position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 42px 18px 18px;
  box-sizing:border-box;
  color:var(--brand-deep);
  font-size:14px;
  line-height:1.45;
  text-align:center;
  pointer-events:none;}
.contact-message-prompt-title, .contact-message-prompt-subtitle{display:block;
  font-style:normal;}
.contact-objective-note{display:block;
  margin-top:16px;
  font-style:italic;}
.contact-message-shell:has(textarea:focus) .contact-message-prompt{opacity:.35;}
.contact-message-shell:has(textarea:not(:placeholder-shown)) .contact-message-prompt{opacity:0;}
.contact-input-shell input, .contact-input-shell select, .contact-input-shell textarea{width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--brand-deep) 14%, transparent);
  border-radius: 0;
  background: var(--brand-aqua);
  color: var(--brand-deep);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;}
.contact-input-shell input, .contact-input-shell select{height: 48px;
  padding: 0 42px 0 14px;}
.contact-input-shell textarea{min-height: 112px;
  resize: vertical;
  padding: 13px 42px 13px 14px;
  line-height: 1.45;}
.contact-input-shell input:focus, .contact-input-shell select:focus, .contact-input-shell textarea:focus{border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 8%, transparent);}
.field-check{position: absolute;
  top: 9px;
  right: 11px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--brand-aqua);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;}
.contact-field.is-valid .field-check{opacity: 1;
  transform: scale(1);}
.contact-form-actions{margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;}
.contact-form-actions .btn{margin: 0 !important;}
.contact-submit{border-color: var(--accent);}
.contact-form-status{min-height: 18px;
  color: var(--muted);
  font-size: 12px;}
@media (max-width: 900px){#contact-cta.contact-viewport{height: auto !important;
    min-height: auto !important;
    overflow: visible !important;}
.contact-viewport-inner{width: min(100% - 36px, 760px);}
.contact-intro h2{font-size: clamp(44px, 11vw, 70px);}
.contact-content-grid, .contact-form-grid{grid-template-columns: 1fr;}
.contact-field-wide{grid-column: auto;}}
.contact-email-note{margin-top: 14px !important;}
.contact-email-note a{color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: .14em;}
.contact-honeypot{position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;}
.contact-optional{color: var(--muted);
  font-weight: 400;}
.attachment-dropzone{min-height: 104px;
  padding: 18px;
  border: 2px solid var(--brand-gold);
  border-radius: 4px;
  background: var(--brand-aqua);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.42;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;}
.attachment-dropzone:focus, .attachment-dropzone.is-dragover{border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 8%, transparent);
  background: color-mix(in srgb, var(--brand-gold) 2%, transparent);}
.attachment-dropzone input[type="file"]{position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;}
.attachment-dropzone-center{display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:100%;
  text-align:center;}
.attachment-browse{appearance: none;
  border: 0;
  background: transparent;
  color: var(--brand-gold);
  font: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: .15em;
  cursor: pointer;
  padding: 0;}
.attachment-file-list{display: block;
  color: color-mix(in srgb, var(--brand-deep) 62%, transparent);
  font-size: 12px;
  word-break: break-word;}
.contact-form-actions{justify-content: center !important;
  flex-direction: column !important;}
.contact-form-actions .contact-submit{min-width: 126px;}
.contact-form-status{text-align: center;}
.contact-success-popup{position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-aqua) 70%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;}
.contact-success-popup.is-visible{opacity: 1;
  visibility: visible;
  pointer-events: auto;}
.contact-success-popup-card{min-width: min(360px, calc(100vw - 48px));
  padding: 30px 34px;
  border: 2px solid var(--accent);
  border-radius: 24px;
  background: var(--brand-aqua);
  color: var(--brand-deep);
  font-family: "Inter", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--brand-deep) 12%, transparent);}
.cta-message-viewport{background: var(--brand-aqua);}
.cta-message-viewport .cta-static-message{}
.contact-form-viewport{overflow: hidden !important;
  background: var(--brand-aqua);}
.contact-form-container{width: 100%;}
.contact-desktop-intro{display:none;}
.contact-mobile-intro{display:none;}
.contact-form-kicker{display:none;}
.attachment-inline-label{display:none;}
@media (min-width: 901px){
.contact-form-container{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  grid-template-rows:auto auto 1fr;
  column-gap:clamp(19px,1.75vw,32px);
  align-items:start;}
.contact-form-viewport .studio-info-title{grid-column:1;
  grid-row:1;
  margin:0 0 10px !important;}
.contact-desktop-intro{display:block;
  grid-column:1;
  grid-row:2;
  margin:0;
  max-width:390px;
  color:#FFFFFF;
  font-family:"Inter",Arial,sans-serif;
  font-size:clamp(16px,1.05vw,19px);
  font-weight:400;
  line-height:1.5;
  text-align:left;}
.contact-form-kicker{display:block;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  align-self:start;
  margin:0;
  color:#FFFFFF;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:41.4px;
  font-style:italic;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-1px;
  text-align:center;}
.contact-desktop-intro-line{display:block;}
.contact-desktop-intro-emphasis{margin-bottom:6px;
  font-style:italic;}
.contact-form-viewport .contact-content-grid-form-only,
.contact-form-viewport .contact-content-grid.contact-content-grid-form-only{grid-column:2;
  grid-row:2 / span 2;
  align-self:start;
  width:100% !important;}
.contact-form-viewport .contact-content-grid-form-only .contact-brief-form{width:100% !important;
  max-width:none !important;
  margin:0 !important;}
.contact-form-viewport .contact-field-label{display:none !important;}
.contact-form-viewport .contact-field{gap:0 !important;}
.contact-form-viewport .attachment-inline-label{display:block;margin:0;color:#FFFFFF;font-weight:600;text-align:center;}
.contact-form-viewport .attachment-recommended-line{display:block;font-weight:400;}
.contact-form-viewport .contact-brief-form{padding-top:22px !important;padding-bottom:22px !important;}
.contact-form-viewport .contact-form-actions{margin-top:36px;gap:20px;padding-bottom:20px;}
.contact-form-viewport .contact-email-note-below-submit{margin:0 !important;}
}
@media (max-width: 900px){.contact-form-viewport .studio-info-title{margin-bottom:30px !important;}}
.contact-form-viewport .contact-content-grid{display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
  align-items: start !important;
  width: 100% !important;}
.contact-form-viewport .contact-guide-card{grid-column: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 30px 32px !important;
  border-radius: 26px !important;
  background: var(--madhi-light-panel);}
.contact-form-viewport .contact-guide-card h3{margin: 0 0 20px !important;
  
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(25px, 2.25vw, 35px) !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -2px !important;}
.contact-form-viewport .contact-brief-form{grid-column: 2 / span 2 !important;
  width: 100% !important;
  min-height: 0 !important;
  align-self: start !important;}
@media (max-width: 900px){.contact-form-viewport{height: auto !important;
    min-height: auto !important;
    overflow: visible !important;}
.contact-form-viewport .contact-content-grid{grid-template-columns: 1fr !important;}
.contact-form-viewport .contact-guide-card, .contact-form-viewport .contact-brief-form{grid-column: auto !important;}}
.contact-form-viewport{position: relative !important;}
.contact-form-viewport .cta-footer{position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;}
.cta-message-viewport .cta-static-message{align-items: center !important;
  text-align: center !important;}
.cta-message-viewport .cta-static-title, .cta-message-viewport .cta-static-byline{width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;}
.cta-message-viewport .cta-contact-button{margin: 36px auto 0 !important;
  min-height: 47px !important;
  padding: 13px 21px !important;
  font-size: 16.25px !important;
  line-height: 1 !important;}
.contact-form-viewport .contact-brief-form{height: auto !important;
  min-height: 0 !important;
  padding: 28px 30px !important;
  align-self: start !important;}
.contact-form-viewport .contact-form-status:empty{display: none !important;}
.approach-viewport .studio-card-title-main, .client-viewport .studio-card-title-main{font-weight: 600 !important;}
#services .sitemap-card-top{display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  column-gap: 10px !important;
  align-items: start !important;}
#services .sitemap-card h2{width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 2em !important;
  margin: 0 !important;}
#services .sitemap-card h2 > span{display: block !important;
  width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;}
#services .sitemap-number{grid-column: 2 !important;
  justify-self: end !important;
  align-self: start !important;}
@media (max-width: 1100px){:root{--mobile-page-gutter: 24px;}
html{scroll-snap-type: none !important;}
body{overflow-x: hidden !important;}
body.mobile-menu-open{overflow: hidden !important;}
body.mobile-menu-open::before{content:"";position:fixed;inset:0;background:#000000;z-index:1190;}
.container, .print-list{width: min(100%, 100% - (2 * var(--mobile-page-gutter))) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;}
.hero.typing-hero-panel, .hero{height: auto !important;
    min-height: calc(100svh - var(--mobile-nav-height)) !important;
    padding: 34px var(--mobile-page-gutter) 42px !important;
    scroll-snap-align: none !important;}
.hero-content, .typing-hero-inner{width: 100% !important;
    max-width: none !important;}
.hero-title, .typing-hero{font-size: clamp(42px, 7vw, 72px) !important;
    line-height: .98 !important;}
.services-viewport, .work-section, #contact-cta{height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;}
.services-viewport{padding: 48px 0 56px !important;}
.services-title, .work-section .section-title, .page-title{font-size: clamp(36px, 6vw, 50px) !important;
    line-height: 1 !important;}
.sitemap-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;}
.sitemap-card{height: auto !important;
    min-height: 590px !important;
    padding: 18px !important;}
.sitemap-card-content{min-height: 100% !important;}
.sitemap-card h2{font-size: clamp(31px, 4.2vw, 40px) !important;}
.sitemap-service-copy{display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;}
.sitemap-subtitle, .sitemap-summary, .sitemap-bullet-list{font-size: 14px !important;}
.sitemap-main-link{min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;}
.work-section{padding: 52px 0 64px !important;}
.work-section .feature-layout{display: block !important;}
#branding-logos .feature-card, #ui-icons .feature-card, #motion-graphics .feature-card, #web-design .feature-card, .work-section .feature-card{width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;}
#branding-logos .branding-system-collage, #ui-icons .landing-airport-network-wrap, #motion-graphics .landing-turntable-artwork, #web-design .landing-web-preview-wrap{position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;}
.landing-airport-network-frame, .landing-web-preview, .landing-web-preview-shell, .landing-turntable-inline{width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;}
#motion-graphics .landing-turntable-artwork{padding: 14px !important;}
#motion-graphics .landing-turntable-inline{max-width: 66% !important; margin: auto !important;}
.work-section .card-caption, #web-design .card-caption-has-actions{position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;}
.work-section .card-caption-copy{min-width: 0 !important;}
.work-section .card-caption-copy p{white-space: normal !important;}
.work-section .section-action, .popout-action{min-height: 36px !important;
    flex-shrink: 0 !important;}
#contact-cta{padding: 70px var(--mobile-page-gutter) 88px !important;}
#contact-cta .cta-message{max-width: 720px !important;}
#contact-cta .cta-break{display: none !important;}
#contact-cta .cta-footer{position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;}
.page-section{padding: 34px 0 14px !important;
    min-height: 0 !important;}
.page-section .section-divider{margin-top: 14px !important;}
.collection{padding: 0 0 52px !important;}
.print-list{display: flex !important;
    flex-direction: column !important;
    gap: 64px !important;}
.print-row, .print-row:first-child, .print-row:last-child, body .print-row.print-row, .print-row.has-tight-info, .branding-feature-row, .wanderports-ui-row, .taxi-plane-row, .turntable-row, .splitflap-row, .web-feature-row{display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-align: none !important;}
.print-row:first-child{padding-top: 0 !important;}
body .print-row.print-row .image-card, .branding-feature-row .image-card, .wanderports-ui-row .image-card, .taxi-plane-row .image-card, .turntable-row .image-card, .splitflap-row .image-card, .web-feature-row .image-card, .a380-row .image-card, .soccer-pitch-row .image-card, .image-card{width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 24px !important;
    overflow: hidden !important;}
.info-panel, body .print-row.print-row .info-panel, .print-row.has-tight-info .info-panel{width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    
    align-self: start !important;}
.feature-description{max-width: 680px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;}
.vector-card-stack, .a380-row .vector-card-stack, .soccer-pitch-row .vector-card-stack{width: 100% !important;
    max-width: 680px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, max-content)) !important;
    gap: 12px !important;
    justify-content: start !important;}
.vector-info-card{width: auto !important;
    max-width: 100% !important;
    min-width: 160px !important;
    height: auto !important;
    min-height: 0 !important;}
.vector-info-card:first-child:nth-last-child(3){grid-column: 1 !important;}
.motion-inline-svg, .evacuation-inline, .web-preview-stage, .web-preview-shell, .wanderports-ui-row iframe, .splitflap-row .splitflap-board, .splitflap-row .solari-board{width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;}
.web-feature-row .web-preview-frame{width: 161.2903226% !important;
    height: 161.2903226% !important;
    transform: scale(.62) !important;
    transform-origin: top left !important;}
#site-footer{margin-top: 0 !important;
    position: relative !important;}
#site-footer footer, footer{position: relative !important;
    padding: 14px var(--mobile-page-gutter) 18px !important;}}
@media (max-width: 700px){:root{--mobile-page-gutter: 16px;}
.hero.typing-hero-panel, .hero{padding: 26px var(--mobile-page-gutter) 34px !important;}
.hero-title, .typing-hero{font-size: clamp(38px, 12vw, 58px) !important;}
.hero-madhi-background{opacity: .08 !important;}
.services-viewport{padding-top: 38px !important;}
.sitemap-grid{grid-template-columns: 1fr !important; gap: 14px !important;}
.sitemap-card{min-height: 0 !important;
    padding: 18px !important;}
.sitemap-card-content{min-height: 520px !important;}
.sitemap-main-link{margin-top: 20px !important;}
.sitemap-card h2{font-size: 34px !important;}
.work-section{padding: 40px 0 50px !important;}
.work-section .section-title{margin-bottom: 22px !important;}
#branding-logos .branding-system-collage, #ui-icons .landing-airport-network-wrap, #motion-graphics .landing-turntable-artwork, #web-design .landing-web-preview-wrap{aspect-ratio: 4 / 3 !important;}
#motion-graphics .landing-turntable-inline{max-width: 82% !important;}
.work-section .card-caption, #web-design .card-caption-has-actions{flex-direction: column !important;
    align-items: stretch !important;}
.work-section .section-action{width: 100% !important; text-align: center !important;}
#web-design .landing-web-actions{width: 100% !important;}
#web-design .landing-web-actions .section-action{width: 100% !important;}
.dog-ear{font-size: 12px !important;}
.page-section{padding-top: 26px !important;}
.page-title{font-size: 38px !important;}
.print-list{gap: 46px !important;}
body .print-row.print-row .image-card, .branding-feature-row .image-card, .wanderports-ui-row .image-card, .taxi-plane-row .image-card, .turntable-row .image-card, .splitflap-row .image-card, .web-feature-row .image-card, .a380-row .image-card, .soccer-pitch-row .image-card, .image-card{aspect-ratio: 4 / 3 !important;
    border-radius: 20px !important;}
.caption{font-size: 11px !important;}
.info-panel h2{font-size: 22px !important;}
.vector-card-stack, .a380-row .vector-card-stack, .soccer-pitch-row .vector-card-stack{grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;}
.vector-info-card{min-width: 0 !important;
    width: 100% !important;
    padding: 14px !important;}
.wanderports-ui-row .image-card, .splitflap-row .image-card{aspect-ratio: 16 / 10 !important;}
#contact-cta{padding-bottom: 104px !important;}
#contact-cta .cta-message{font-size: 17px !important; line-height: 1.5 !important;}
#site-footer .footer-main, footer .footer-main{font-size: 11px !important; text-align: center !important;}}
@media (max-width: 430px){.hero-title, .typing-hero{font-size: 36px !important;}
.services-title, .work-section .section-title, .page-title{font-size: 34px !important;}
.sitemap-card-content{min-height: 500px !important;}
.vector-card-stack, .a380-row .vector-card-stack, .soccer-pitch-row .vector-card-stack{grid-template-columns: 1fr !important;}
.work-section .card-caption-copy h3{font-size: 17px !important;}
.work-section .card-caption-copy p{font-size: 13px !important;}}
@media (max-width: 1100px){

}
@media (max-width: 700px){

}
@media (max-width: 1100px){.work-section .feature-layout{display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;}
.landing-feature-info{width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;}
.landing-feature-info .vector-info-card, .landing-feature-info .city-demo{width: fit-content !important;
    max-width: min(360px, 100%) !important;}
.landing-feature-info .landing-feature-explore{align-self: flex-start !important;
    margin: 6px 0 0 !important;}}
@media (max-width: 700px){



.landing-feature-info .landing-feature-explore{width: 100% !important;
    justify-content: center !important;}}
@media (max-width: 950px){html[data-page="service"] .print-row, html[data-page="service"] .print-row:first-child, html[data-page="service"] .print-row:last-child, html[data-page="service"] .print-row.has-tight-info{display:grid !important; grid-template-columns:1fr !important; gap:18px !important;
    min-height:0 !important; height:auto !important; padding:26px 0 !important; margin:0 !important;}
html[data-page="service"] .image-card, html[data-page="service"] .madhi-hero-row .image-card, html[data-page="service"] .taxi-plane-row .image-card, html[data-page="service"] .turntable-row .image-card, html[data-page="service"] .splitflap-row .image-card, html[data-page="service"] .camera-row .image-card{width:100% !important; max-width:100% !important; height:auto !important; min-height:0 !important;
    aspect-ratio:16 / 9 !important; overflow:hidden !important;}
html[data-page="service"] .info-panel, html[data-page="service"] .print-row.has-tight-info .info-panel{width:100% !important; max-width:100% !important; min-width:0 !important; padding-top:0 !important;}
html[data-page="service"] .orientation-note{display:block !important; margin:9px 0 0 !important; font-size:12.5px !important; line-height:1.4 !important; font-style:italic !important;}}
@media (max-width: 700px){html[data-page="service"] .splitflap-row .solari-grid-row{height:34px !important; flex-basis:34px !important;}
html[data-page="service"] .splitflap-row .solari-header-row{height:34px !important; flex-basis:34px !important; font-size:10px !important;}
html[data-page="service"] .splitflap-row .solari-field, html[data-page="service"] .splitflap-row .solari-cell, html[data-page="service"] .splitflap-row .solari-signal-card, html[data-page="service"] .splitflap-row .solari-stair-spacer{height:34px !important;}
html[data-page="service"] .splitflap-row .solari-glyph{font-size:10.5px !important; line-height:34px !important;}
html[data-page="service"] .splitflap-row .solari-dot{width:8px !important; height:8px !important; border-width:1px !important;}}
:root{--bg: var(--brand-aqua);
  --text: var(--brand-deep);
  --muted: color-mix(in srgb, var(--brand-deep) 58%, transparent);
  --soft-muted: color-mix(in srgb, var(--brand-deep) 45%, transparent);

  --accent: var(--brand-gold);

  --gold: var(--brand-gold);
  --gold-soft: color-mix(in srgb, var(--brand-gold) 18%, transparent);
  --gold-medium: color-mix(in srgb, var(--brand-gold) 45%, transparent);
  --gold-shadow: color-mix(in srgb, var(--brand-gold) 12%, transparent);
  --gold-bg: var(--brand-aqua);

  --card: var(--brand-cyan);
  --border: color-mix(in srgb, var(--brand-deep) 5%, transparent);
  --warm: var(--brand-gold);

  --hero-gap: 50px;
  --section-gap: 100px;
  --component-gap: 15px;

  --madhi-scroll-track-width: 13px;
  --madhi-scroll-thumb-width: 6px;
  --madhi-scroll-thumb-height: 31vh;
  --madhi-scroll-thumb-min-height: 90px;
  --madhi-scroll-thumb-max-height: 230px;
  --madhi-scroll-thumb-offset: 3.5px;}
*{margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;}
html{scroll-behavior: smooth;
  scrollbar-width: auto;
  scrollbar-color: var(--accent) color-mix(in srgb, var(--brand-gold) 18%, transparent);}
html::-webkit-scrollbar{width: 14px;}
html::-webkit-scrollbar-track{background: color-mix(in srgb, var(--brand-gold) 18%, transparent);}
html::-webkit-scrollbar-thumb{background: var(--accent);
  border-radius: 999px;}
body{background: var(--bg);
  color: var(--text);
  line-height: 1.5;}
a{text-decoration: none;
  color: inherit;}
.container{max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;}
@media (min-width:1101px){
  html[data-page="home"]{
    --home-left-rail:var(--madhi-nav-left-rail,clamp(150px,11.78vw,205px));
    --home-side-rail:var(--madhi-nav-right-rail,clamp(165px,12.54vw,225px));
    --home-main-right-gap:clamp(20px,1.8vw,28px);
    --home-panel-scroll-safe:12px;
    --home-content-gutter:0px;
    --home-caption-width:330px;
  }
  html[data-page="home"] .container{
    width:calc(100% - var(--home-left-rail) - var(--home-side-rail) - var(--home-main-right-gap));
    max-width:none;
    margin-left:var(--home-left-rail);
    margin-right:calc(var(--home-side-rail) + var(--home-main-right-gap));
    padding-left:var(--home-content-gutter);
    padding-right:var(--home-content-gutter);
    box-sizing:border-box;
  }
}
footer{padding: 18px 32px;
  min-height: 58px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border);}
footer a{color: inherit;}
footer a:hover{color: var(--brand-deep);}
.footer-inner{display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--muted);}
.footer-main{color: var(--muted);}
@media (min-width:901px){.footer-craft{color:#FFBF00;}}
.footer-main a{color: inherit;}
.footer-site-links{display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  color: var(--muted);
  font-size: 13px;}
.footer-site-link{width: 210px;
  min-width: 210px;
  max-width: 210px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-align: center;
  white-space: nowrap;}
.footer-site-link:hover{color: var(--brand-deep);}
.footer-divider{width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.45;
  margin: 0 10px;}
#site-footer{position: relative;
  z-index: 20;}
#site-footer footer, #site-footer .footer-inner, #site-footer .footer-site-links, #site-footer a{position: relative;
  z-index: 30;}
#site-footer a{pointer-events: auto;}
#site-footer::before, #site-footer::after, footer::before, footer::after{pointer-events: none;}
html{scrollbar-width: auto !important;
  scrollbar-color: var(--accent) color-mix(in srgb, var(--brand-gold) 18%, transparent);}
html::-webkit-scrollbar{width: 14px !important;}
html::-webkit-scrollbar-track{background: color-mix(in srgb, var(--brand-gold) 18%, transparent);}
html::-webkit-scrollbar-thumb{background: var(--accent);
  border-radius: 999px !important;}
.nav-item:hover > a[href="aviation.html"]{font-style: italic;
  font-weight: 400;}
.nav-item{position: relative;}
.nav-item::after{content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: 100%;
  height: 24px;
  z-index: 1;}
.dropdown{position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(14px);
  width: max-content;
  min-width: auto;
  background: color-mix(in srgb, var(--brand-aqua) 96%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 6px;
  box-shadow: 0 20px 40px color-mix(in srgb, var(--brand-deep) 8%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  transition:
    opacity 0.22s ease 0.12s,
    transform 0.22s ease 0.12s,
    visibility 0s linear 0.28s;}
.nav-item:hover .dropdown{opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(8px);
  transition-delay: 0s;}
.dropdown a{display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 13px;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
  text-align: left;
  position: relative;}
.dropdown-section-label{display: flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 6px 10px;
  color: var(--brand-deep);
  font-size: 13px;
  line-height: 1.25;
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;}
.about-dropdown{left: 0;
  right: auto;}
.about-dropdown a{justify-content: flex-start;
  text-align: left;
  margin-left: 0;}
.about-dropdown .about-divider{width: 82%;
  margin: 4px auto;}
.about-dropdown .partnerships-link{font-style: italic;}
.kids-dropdown{left: auto;
  right: 0;}
.kids-dropdown a, .kids-dropdown .dropdown-section-label{justify-content: flex-end;
  text-align: right;
  margin-left: auto;}
.kids-dropdown .kids-divider{width: 82%;
  margin: 4px 0 4px auto;}
.dropdown a + a{margin-top: 0;}
.dropdown a:hover{background: transparent;
  border-color: transparent;
  color: var(--brand-deep);}
.dropdown a::after{content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transform: none;
  transition: opacity 0.14s ease;}
.dropdown a:hover::after{opacity: 1;
  transform: none;}
.aviation-dropdown a::after{background: var(--gold);}
.aviation-dropdown a.aviation-section-link::after{background: var(--gold);}
.dropdown-divider{display: block;
  width: 82%;
  height: 1px;
  background: var(--border);
  margin: 6px auto;}
.photos-dropdown, .content-dropdown, .design-dropdown, .workshop-dropdown, .shop-dropdown, .kids-dropdown{min-width: max-content;}
.about-dropdown{min-width: max-content;}
.nav-item > a[href="aviation.html"]{color: var(--muted);
  font-style: italic;
  font-weight: 400;}
.nav-item > a[href="aviation.html"]:hover{font-style: italic;
  font-weight: 400;}
.nav-item > a[href="aviation.html"].active{font-size: 14px;
  font-style: italic;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 999px;}
.nav-item > a[href="aviation.html"].active:hover{font-style: italic;
  font-weight: 400;}
.aviation-dropdown{min-width: max-content;
  width: max-content;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  column-gap: 10px;
  row-gap: 0;
  padding: 8px 6px;}
.aviation-column{display: flex;
  flex-direction: column;
  gap: 0;
  width: max-content;}
.aviation-dropdown a.aviation-section-link{color: var(--gold);
  font-style: italic;
  font-weight: 400;
  border-color: transparent;
  background: transparent;
  margin-bottom: 0;}
.aviation-dropdown a.aviation-section-link:hover{color: var(--gold);
  font-style: italic;
  font-weight: 400;
  background: transparent;
  border-color: transparent;}
.aviation-dropdown a{width: fit-content;
  border-width: 2px;
  justify-content: flex-start;
  text-align: left;}
.aviation-dropdown .dropdown-divider, .aviation-dropdown .gold-divider{width: 100%;
  margin: 3px 0;
  background: color-mix(in srgb, var(--brand-gold) 45%, transparent);}
.cart-link{display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;}
.cart-link svg{width: 24px;
  height: 24px;}
@media (max-width: 768px){.dropdown{left: auto;
    right: 0;
    transform: translateY(14px);
    max-width: calc(100vw - 32px);}
.nav-item:hover .dropdown{transform: translateY(8px);}
.aviation-dropdown{grid-template-columns: 1fr;
    width: max-content;
    min-width: max-content;
    max-width: calc(100vw - 32px);}
.aviation-column{width: max-content;}
.about-dropdown a, .about-dropdown .dropdown-section-label{justify-content: flex-end;
    text-align: right;
    margin-left: auto;}}
:root{--madhi-header-height: 119px;
  --madhi-header-divider: color-mix(in srgb, var(--brand-deep) 10%, transparent);}
:root{--site-header-divider: #3b3b3b;}
.section:first-of-type{margin-top: var(--section-gap);}
.section:last-of-type{margin-bottom: var(--section-gap);}
.section{padding: var(--hero-gap) 0;}
.section-title{margin-bottom: 32px;
  font-size: 46px;}
.section .btn{display: block;
  width: fit-content;
  margin: 0 auto;}
.feature-layout{display: flex;
  justify-content: center;
  margin-bottom: 14px;}
.feature-card{position: relative;
  width: 100%;
  display: block;
  background: var(--card);
  border: 0.5px solid var(--brand-aqua);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.25s ease;}
.feature-card:hover{border-color: var(--brand-aqua);}
.feature-card img{position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  height: auto;
  display: block;}
.grid-3{display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;}
.grid-4{display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;}
.hub-section{padding: 16px 0 var(--hero-gap);}
.hub-shell{max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;}
.hub-grid{display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;}
.hub-card{position: relative;
  min-height: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--brand-deep) 2%, transparent);
  border-radius: 26px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;}
.hub-card:hover{border-color: var(--border);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--brand-deep) 6%, transparent);}
.hub-card-content, .card-content{height: 100%;
  display: flex;
  flex-direction: column;}
.hub-card-top, .card-top{display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;}
.hub-card h1, .hub-card h2{font-size: clamp(25px, 3vw, 35px);
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 1.02;
  
  max-width: 75%;
  overflow-wrap: break-word;}
.hub-number, .card-number{width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-aqua);
  border: 1px solid var(--border);
  color: var(--brand-teal);
  font-size: 18px;
  font-weight: 600;}
.hub-card p{color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  min-height: 86px;
  margin-bottom: 16px;}
.hub-main-link, .card-main-link{align-self: center;
  margin-top: auto;
  margin-bottom: 14px;
  padding: 11.25px 20px;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--brand-deep);
  font-size: 16.25px;
  font-weight: 600;
  transition: 0.2s ease;}
.hub-main-link:hover, .card-main-link:hover, .hub-main-link:focus-visible, .card-main-link:focus-visible{background: var(--accent);
  color: var(--brand-aqua);
  border-color: transparent;}
.hub-links, .card-links{display: grid;
  gap: 8px;}
.hub-links a, .card-links a{min-height: 32px;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--brand-aqua);
  color: var(--muted);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;}
.hub-links a:hover, .card-links a:hover{color: var(--brand-deep);
  outline: 2px solid var(--accent);}
.card-links a::after{content: "→";}
.hub-links a span, .card-links a span{margin-left: auto;}
@media (max-width: 980px){.grid-3, .grid-4, .hub-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 620px){.grid-3, .grid-4, .hub-grid{grid-template-columns: 1fr;
    gap: 22px;}}
.photos-card{aspect-ratio: 4 / 3;
  max-width: 700px;}
.photos-card img{width: 84%;
  max-height: 70%;
  object-fit: contain;}
.content-card{aspect-ratio: 1 / 1;
  max-width: 700px;}
.content-card img{width: 78%;
  max-height: 72%;
  object-fit: contain;}
.design-card{aspect-ratio: 16 / 9;
  max-width: 1400px;}
.design-card img{width: 90%;
  max-height: 90%;
  object-fit: contain;}
.pill{position: absolute;
  top: 18px;
  left: 18px;
  background: color-mix(in srgb, var(--brand-aqua) 88%, transparent);
  color: var(--brand-deep);
  padding: 7px 13px;
  border: 2px solid var(--accent);
  border-color: var(--accent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  z-index: 5;}
.dog-ear{position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: var(--brand-aqua);
  padding: 11.2px 28.8px;
  font-size: 19.2px;
  font-weight: 500;
  z-index: 6;
  border-bottom-left-radius: 22.4px;}
.card-caption{position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--brand-aqua) 75%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--brand-deep) 8%, transparent);
  transition: border-color 0.2s ease;
  padding: 10px 14px;
  z-index: 4;}
.feature-card:hover .card-caption, .mini-card:hover .card-caption{border-top: 2px solid var(--brand-aqua);}
.card-caption h3{font-size: 17px;
  margin-bottom: 4px;}
.card-caption p{font-size: 13px;
  color: var(--muted);}
.aviation-card, .special-card.sitemap-card{position: relative;
  min-height: 100%;
  padding: 10px;
  border: 1px solid var(--gold-soft);
  border-radius: 26px;
  background: var(--gold-bg);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;}
.aviation-card:hover, .special-card.sitemap-card:hover{border-color: var(--brand-gold);
  box-shadow: 0 18px 40px var(--gold-shadow);}
.aviation-card-content, .special-card .sitemap-card-content{position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;}
.aviation-card-top, .special-card .sitemap-card-top{display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;}
.aviation-card-top h1, .special-card .sitemap-card-top h1{flex: 0 1 75%;
  width: 75%;
  max-width: 75%;
  min-width: 0;}
.aviation-card h1, .special-card .sitemap-card-top h1{font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -1.5px;
  line-height: 1.02;
  white-space: normal;
  overflow-wrap: break-word;}
.aviation-card p, .special-card.sitemap-card p{color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;
  position: relative;}
.aviation-number, .special-card .sitemap-number{flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-aqua);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  color: var(--brand-gold);
  font-size: 18px;
  font-weight: 600;}
.aviation-main-link, .special-card .sitemap-main-link{position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: auto;
  margin-bottom: 14px;
  padding: 11.25px 20px;
  border-radius: 999px;
  background: var(--brand-gold);
  border: 2px solid transparent;
  color: var(--brand-aqua);
  font-size: 16.25px;
  font-weight: 500;
  text-decoration: none;
  transition: font-weight 0.2s ease, transform 0.2s ease;}
.aviation-main-link:hover, .special-card .sitemap-main-link:hover{background: var(--brand-gold);
  border-color: transparent;
  color: var(--brand-aqua);
  font-weight: 600;}
.aviation-links, .special-card .sitemap-links{display: grid;
  grid-template-rows: repeat(5, 32px);
  gap: 8px;}
.aviation-links a, .special-card .sitemap-links a{display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 32px;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--brand-aqua);
  border: 2px solid color-mix(in srgb, var(--brand-gold) 18%, transparent);
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;}
.aviation-links a::after, .special-card .sitemap-links a::after{display: none;
  content: "";}
.aviation-links a:hover, .special-card .sitemap-links a:hover{color: var(--brand-deep);
  border-color: var(--brand-gold);
  transform: translateX(2px);}
@media (max-width: 620px){.aviation-card, .special-card.sitemap-card{border-radius: 24px;}
.aviation-card h1, .special-card .sitemap-card-top h1{font-size: clamp(24px, 9vw, 34px);}}
.btn, .btn.primary{padding: 9px 16px;
  border-radius: 4px;
  background: transparent;
  color: var(--brand-deep);
  border: 2px solid var(--accent);
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;}
.btn{will-change: background, border-color, color;}
.btn:hover, .btn.primary:hover, .btn:focus-visible, .btn.primary:focus-visible{background: var(--accent);
  color: var(--brand-aqua);
  border-color: transparent;}
html[data-theme="dark"]{color-scheme: dark;}
.site-preferences{position: fixed;
  right: 24px;
  bottom: 16px;
  z-index: 1400;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  align-items: center;}
.preference-toggle{width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--brand-deep) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-aqua) 96%, transparent);
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-deep) 12%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);}
.preference-toggle:hover, .preference-toggle:focus-visible{border-color: var(--brand-gold);
  outline: none;
  transform: translateY(-1px);}
.preference-toggle[aria-pressed="true"]{background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-aqua);}
#backToTop, html[data-theme="dark"] #backToTop{position: relative !important;
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 999px !important;
  overflow: visible !important;
  transform: none !important;}
#backToTop.is-attention{display: inline-flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;}
#backToTop:is(:hover, :focus-visible), html[data-theme="dark"] #backToTop:is(:hover, :focus-visible){border: 0;
  transform: none !important;}
#backToTop .back-to-top-arrow{position: relative !important;
  display: block !important;
  width: 30px !important;
  height: 20px !important;
  margin: 0 auto !important;
  top: -2px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  background: none;
  transform: none !important;
  opacity: 1 !important;}
#backToTop .back-to-top-arrow::before{content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 28px !important;
  height: 17px !important;
  background: var(--accent);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 80% 100%, 50% 38%, 20% 100%) !important;
  transform: translate(-50%, -50%) !important;}
#backToTop:is(:hover, :focus-visible) .back-to-top-arrow::before{background: var(--brand-aqua);}
#backToTop .back-to-top-label{position: absolute !important;
  right: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
  width: max-content !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  color: var(--brand-deep);
  font-family: "Inter", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .16s ease, visibility .16s ease !important;}
#backToTop:is(:hover, :focus-visible) .back-to-top-label{opacity: 1 !important;
  visibility: visible !important;}
#backToTop.is-attention:not(:hover):not(:focus-visible) .back-to-top-arrow{animation: madhiBackTopBlink 1.15s ease-in-out infinite !important;}
@keyframes madhiBackTopBlink{0%, 42%, 100%{opacity: 1;}
58%, 84%{opacity: 0;}}
html[data-motion="off"] #backToTop .back-to-top-arrow{animation: none !important;}
.preference-glyph{font-family: Arial, sans-serif !important;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;}
#motionToggle .preference-glyph::before{content: "▶"; font-size: 15px;}
html[data-motion="off"] #motionToggle .preference-glyph::before{content: "Ⅱ"; font-size: 16px;}
html[data-motion="off"]{scroll-behavior: auto !important;}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after{animation-duration: .001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;}
@media (max-width: 1100px){html[data-page] body.mobile-menu-open{overflow: hidden !important;}
body.mobile-menu-open::before{content:"";position:fixed;inset:0;background:#000000;z-index:1190;}}
@media (max-width: 700px){.site-preferences{right: 16px; bottom: 10px; gap: 6px;}
.preference-toggle{width: 40px; height: 40px;}}
:root{--madhi-alt-header-bg: var(--surface-header);
  --madhi-alt-header-green: var(--accent);
  --madhi-alt-header-white: var(--text-on-header);
  --madhi-alt-header-divider: var(--divider-color);}
html[data-header-style="alt"] body > main, html[data-header-style="alt"] body > main > :first-child{border-top: 0 !important;
  box-shadow: none;
  outline: none;}
.branding-system-collage.logo-system-six{display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  background: var(--brand-deep);}
.branding-system-collage.logo-system-six .branding-system-item{position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 30px 14px 14px !important;
  background: transparent;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;}
.branding-system-collage.logo-system-six .branding-system-label{top: 10px !important;
  left: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: .03em !important;
  color: color-mix(in srgb, var(--brand-aqua) 82%, transparent);}
.branding-system-collage.logo-system-six .branding-system-item img{position: static !important;
  width: 78% !important;
  height: 68% !important;
  max-width: 78% !important;
  max-height: 68% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  background: transparent;}
.branding-system-collage.logo-system-six .layout-primary{grid-column: 1 !important; grid-row: 1 !important;}
.branding-system-collage.logo-system-six .layout-inverse{grid-column: 1 !important; grid-row: 2 !important;}
.branding-system-collage.logo-system-six .layout-mono{grid-column: 1 !important; grid-row: 3 !important; display: flex !important;}
.branding-system-collage.logo-system-six .layout-stacked{grid-column: 2 !important; grid-row: 1 !important;}
.branding-system-collage.logo-system-six .layout-icon{grid-column: 2 !important; grid-row: 2 !important;}
.branding-system-collage.logo-system-six .layout-wordmark{grid-column: 2 !important; grid-row: 3 !important;}
@media (max-width: 620px){.branding-system-collage.logo-system-six{gap: 8px !important;}
.branding-system-collage.logo-system-six .branding-system-item{padding: 27px 8px 8px !important;}
.branding-system-collage.logo-system-six .branding-system-label{top: 8px !important;
    left: 8px !important;
    font-size: 9px !important;}
.branding-system-collage.logo-system-six .branding-system-item img{width: 84% !important;
    height: 70% !important;
    max-width: 84% !important;
    max-height: 70% !important;}}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 20px 26px !important;
  background: var(--brand-deep);}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .branding-system-item{padding: 8px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .branding-system-label{display: none !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .branding-system-item img{position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-primary{grid-column: 1 !important; grid-row: 1 !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-inverse{grid-column: 1 !important; grid-row: 2 !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-mono{grid-column: 1 !important; grid-row: 3 !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-icon{grid-column: 2 !important; grid-row: 1 !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-wordmark{grid-column: 2 !important; grid-row: 2 !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-stacked{grid-column: 2 !important; grid-row: 3 !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-primary img, html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-inverse img, html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-mono img{width: 78% !important;
  max-width: 78% !important;
  max-height: 74% !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-icon img{width: 24% !important;
  max-width: 24% !important;
  max-height: 72% !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-wordmark img{width: 62% !important;
  max-width: 62% !important;
  max-height: 48% !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-stacked img{width: 32% !important;
  max-width: 32% !important;
  max-height: 78% !important;}
@media (max-width: 620px){html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six{padding: 12px 10px !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .branding-system-item{padding: 5px 8px !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-primary img, html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-inverse img, html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-mono img{width: 88% !important; max-width: 88% !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-icon img{width: 34% !important; max-width: 34% !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-wordmark img{width: 78% !important; max-width: 78% !important;}
html[data-header-style="alt"] #branding-logos .branding-system-collage.logo-system-six .layout-stacked img{width: 44% !important; max-width: 44% !important;}}
#motionToggle{display: none !important;}
.soccer-demo button:not(.is-active){background: var(--brand-aqua);
  color: var(--brand-deep);
  border: 2px solid var(--accent);
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;}
.soccer-demo button:not(.is-active):hover, .soccer-demo button:not(.is-active):focus-visible{background: var(--accent);
  color: var(--brand-aqua);
  border-color: transparent;}
.sitemap-number, .hub-number, .card-number{font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 400 !important;}
.preview-popout, .popout-action, .preview-popout svg, .popout-action svg, .preview-popout .btn-arrow, .popout-action .btn-arrow{color: var(--brand-deep);}
.preview-popout:hover, .preview-popout:focus-visible, .popout-action:hover, .popout-action:focus-visible, .preview-popout:hover svg, .preview-popout:focus-visible svg, .popout-action:hover svg, .popout-action:focus-visible svg{color: var(--brand-aqua);}
#motionToggle{display: none !important;}
.sitemap-card-top .sitemap-number, .hub-card-top .hub-number, .card-top .card-number{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;}
.caption, .landing-feature-info .caption, .info-panel .caption{font-size: 14.4px !important;
  font-weight: 700 !important;
  color: var(--accent);}
.sitemap-card-top .sitemap-number, .hub-card-top .hub-number, .card-top .card-number{font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--brand-deep);
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 2px !important;}
.contact-field .field-check{opacity: 0 !important;}
.contact-field.is-valid .field-check{opacity: 1 !important;
  transform: scale(1) !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three{display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 22px 28px !important;
  background: var(--brand-deep);}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-item{grid-column: 1 !important;
  padding: 8px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent;
  border: 0;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-primary{grid-row: 1 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-inverse{grid-row: 2 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-mono{grid-row: 3 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-label{display: none !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-item img{position: static !important;
  width: 88% !important;
  height: auto !important;
  max-width: 88% !important;
  max-height: 86% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;}
.svg-artwork, .svg-artwork > object[type="image/svg+xml"], .svg-artwork > img[src$=".svg"], .image-card object[type="image/svg+xml"], .image-card img[src$=".svg"], .branding-system-item, .branding-system-item img[src$=".svg"]{background: transparent;
  background-color: transparent;}
.aoe-logo-row .svg-artwork img, .aoi-logo-row .svg-artwork img, .wanderports-logo-row .svg-artwork img{display: block;
  background: transparent;
  background-color: transparent;
  object-fit: contain;
  object-position: center center;}
.aoe-learning-row .aoe-learning-artwork, .aoe-learning-row .aoe-learning-artwork object, .aoe-learning-row #aoeLearningObject{background: transparent;
  background-color: transparent;}
.aoe-learning-row .aoe-learning-artwork img, .camera-row .svg-artwork img.motion-svg-object{background: transparent;
  background-color: transparent;}
.preview-popout, .landing-preview-popout, .popout-action, html[data-theme="dark"] .preview-popout, html[data-theme="dark"] .landing-preview-popout, html[data-theme="dark"] .popout-action{border: 2px solid transparent;
  transform: none !important;
  translate: none !important;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease !important;}
.preview-popout:hover, .preview-popout:focus-visible, .landing-preview-popout:hover, .landing-preview-popout:focus-visible, .popout-action:hover, .popout-action:focus-visible, html[data-theme="dark"] .preview-popout:hover, html[data-theme="dark"] .preview-popout:focus-visible, html[data-theme="dark"] .landing-preview-popout:hover, html[data-theme="dark"] .landing-preview-popout:focus-visible, html[data-theme="dark"] .popout-action:hover, html[data-theme="dark"] .popout-action:focus-visible{transform: none !important;
  translate: none !important;}
.preview-popout svg, .landing-preview-popout svg, .popout-action svg, .preview-popout:hover svg, .landing-preview-popout:hover svg, .popout-action:hover svg{transform: none !important;}
html :is(.preview-popout, .landing-preview-popout, .popout-action), html[data-theme="dark"] :is(.preview-popout, .landing-preview-popout, .popout-action){border: 2px solid var(--accent);
  transform: none !important;
  translate: none !important;
  box-sizing: border-box !important;}
html :is(.preview-popout, .landing-preview-popout, .popout-action):is(:hover, :focus-visible), html[data-theme="dark"] :is(.preview-popout, .landing-preview-popout, .popout-action):is(:hover, :focus-visible){transform: none !important;
  translate: none !important;}
html :is(.preview-popout, .landing-preview-popout, .popout-action) svg, html :is(.preview-popout, .landing-preview-popout, .popout-action) .btn-arrow{color: inherit;
  stroke: currentColor;}
.aoe-learning-row .image-card{background: var(--brand-aqua);
  background-color: var(--brand-aqua);}
.aoe-learning-replay, html[data-theme="dark"] .aoe-learning-replay{border: 2px solid var(--accent);}
.camera-row .svg-artwork .motion-svg-object{width: 56.25% !important;
  height: 56.25% !important;}
html body .preview-popout svg, html body .landing-preview-popout svg{width: 23px !important;
  height: 23px !important;}
html body .popout-action .btn-arrow, html body .popout-action .btn-arrow svg{width: 23px !important;
  height: 23px !important;}
.contact-email-note a{color: var(--accent);
  text-decoration: underline !important;
  text-decoration-color: currentColor;
  text-underline-offset: .14em !important;}
.landing-airport-network-card, .wanderports-ui-row .image-card{position: relative !important;}
.landing-runway-inspection-card, .mobile-ui-feature-copy{display:none !important;}
.map-fullscreen-control{position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 30 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: var(--brand-aqua);
  color: var(--brand-deep);
  cursor: pointer !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  transition: background-color .18s ease, color .18s ease !important;}
.map-fullscreen-control-under-dogear{top: 18px !important;}
.map-fullscreen-control svg{width: 20px !important;
  height: 20px !important;
  display: block !important;}
.map-fullscreen-control:hover, .map-fullscreen-control:focus-visible, html[data-theme="dark"] .map-fullscreen-control:hover, html[data-theme="dark"] .map-fullscreen-control:focus-visible{transform: none !important;}
.landing-airport-network-card:fullscreen, .wanderports-ui-row .image-card:fullscreen{width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--brand-deep);}
.landing-airport-network-card:fullscreen .landing-airport-network-wrap, .wanderports-ui-row .image-card:fullscreen .wanderports-map-frame{width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  inset: 0 !important;}
.landing-airport-network-card:fullscreen .map-fullscreen-control-under-dogear{top: 18px !important;}
#services .sitemap-number{font-family: "Shadows Into Light", cursive !important;
  font-weight: 400 !important;}
html[data-header-style="alt"] #services .sitemap-service-copy{display: grid !important;
  grid-template-rows: 96px auto !important;
  row-gap: 0 !important;}
html[data-header-style="alt"] #services .sitemap-summary{min-height: 96px !important;}
html[data-header-style="alt"] #services .sitemap-includes-block{margin-top: 0 !important;
  padding-bottom: 22px !important;}
@media (min-width: 1101px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 38px !important;
    height: 18px !important;
    clip-path: polygon(0 34%, 54% 34%, 54% 0, 100% 50%, 54% 100%, 54% 66%, 0 66%) !important;}}
@media (max-width: 1100px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 30px !important;
    height: 16px !important;
    clip-path: polygon(0 34%, 54% 34%, 54% 0, 100% 50%, 54% 100%, 54% 66%, 0 66%) !important;}}
html{scrollbar-width: none !important;}
html::-webkit-scrollbar{width: 0 !important;
  height: 0 !important;}
#madhiScrollTrack{position: fixed;
  z-index: 2000;
  top: 10px;
  right: 4px;
  bottom: 10px;
  width: var(--madhi-scroll-track-width);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 15%, transparent);
  pointer-events: auto;}
#madhiScrollThumb{position: absolute;
  top: 0;
  left: var(--madhi-scroll-thumb-offset);
  width: var(--madhi-scroll-thumb-width);
  height: var(--madhi-scroll-thumb-height);
  min-height: var(--madhi-scroll-thumb-min-height);
  max-height: var(--madhi-scroll-thumb-max-height);
  border-radius: 999px;
  background: var(--brand-jade);
  cursor: grab;
  touch-action: none;
  will-change: transform;}
#madhiScrollThumb:active{cursor: grabbing;}
.map-fullscreen-control, html[data-theme="dark"] .map-fullscreen-control{border: 2px solid var(--brand-cyan);}
.attachment-browse{color: var(--brand-gold);
  text-decoration: underline !important;
  text-decoration-color: currentColor;
  text-underline-offset: .15em !important;}
.contact-field-label{font-size: 14.5px !important;}
:is(
  button,
  .btn,
  .btn.primary,
  .section-action,
  .landing-feature-explore,
  .sitemap-main-link,
  .hub-main-link,
  .card-main-link,
  .aviation-main-link,
  .contact-submit,
  .cta-contact-button,
  .preview-popout,
  .landing-preview-popout,
  .popout-action,
  input[type="submit"],
  input[type="button"]
){font-weight: 700 !important;}
#services .sitemap-number, .sitemap-card-top .sitemap-number{font-family: inherit !important;
  font-weight: 500 !important;}
.map-fullscreen-control, html[data-theme="dark"] .map-fullscreen-control{border: 2px solid var(--brand-cyan);}
.aerowordsmith-fullscreen, .aoe-learning-replay, html[data-theme="dark"] .aerowordsmith-fullscreen, html[data-theme="dark"] .aoe-learning-replay{border: 2px solid var(--accent);}
.landing-airport-network-card:fullscreen, .wanderports-ui-row .image-card:fullscreen{display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  background: var(--brand-deep);
  overflow: hidden !important;}
.landing-airport-network-card:fullscreen .landing-airport-network-wrap, .wanderports-ui-row .image-card:fullscreen .wanderports-map-frame{width: min(100vw, 177.7778vh) !important;
  height: min(100vh, 56.25vw) !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: 16 / 9 !important;
  inset: auto !important;
  margin: auto !important;
  object-fit: contain !important;}
.landing-airport-network-card:fullscreen .landing-airport-network-frame{width: 100% !important;
  height: 100% !important;
  display: block !important;}
.a380-row .a380-artwork-dark{display: none !important;}
html[data-theme="dark"] html[data-theme="dark"] .a380-row .a380-artwork-dark{display: block !important;}
.splitflap-row .city-demo, .splitflap-row .city-demo-controls-only{border: 1px solid var(--border);}
#services .sitemap-number, .sitemap-card-top .sitemap-number, .hub-card-top .hub-number, .card-top .card-number{font-weight: 700 !important;}
:is(
  button,
  .btn,
  .btn.primary,
  .section-action,
  .landing-feature-explore,
  .sitemap-main-link,
  .hub-main-link,
  .card-main-link,
  .aviation-main-link,
  .contact-submit,
  .cta-contact-button,
  .preview-popout,
  .landing-preview-popout,
  .popout-action,
  input[type="submit"],
  input[type="button"]
){font-weight: 600 !important;}
.attachment-browse{font: inherit !important;
  font-weight: 400 !important;}
.branding-feature-row .branding-system-collage.logo-system-three .branding-system-item{display: flex !important;
  align-items: center !important;
  justify-content: center !important;}
.branding-feature-row .branding-system-collage.logo-system-three .branding-system-item img{width: 94% !important;
  height: 100% !important;
  max-width: 94% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;}
html :is(.preview-popout, .landing-preview-popout, .popout-action) svg path, html[data-theme="dark"] :is(.preview-popout, .landing-preview-popout, .popout-action) svg path{stroke-width: 2.1 !important;}
#services .sitemap-number, .sitemap-card-top .sitemap-number, .hub-card-top .hub-number, .card-top .card-number{font-weight: 600 !important;}
.approach-viewport .studio-info-card h3, .client-viewport .studio-info-card h3, .approach-viewport .studio-card-title-main, .client-viewport .studio-card-title-main{font-weight: 500 !important;}
#services .sitemap-card h2, #services .sitemap-card h2 > span{font-family: "Inter", Arial, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -2px !important;}
html[data-header-style="alt"] body.section-green #services .sitemap-card h2, html[data-header-style="alt"] body.section-green #services .sitemap-card h2 > span{font-weight: 400 !important;}
html[data-header-style="alt"] body.section-green .approach-viewport .studio-info-card h3, html[data-header-style="alt"] body.section-green .client-viewport .studio-info-card h3, html[data-header-style="alt"] body.section-green .approach-viewport .studio-card-title-main, html[data-header-style="alt"] body.section-green .client-viewport .studio-card-title-main{font-weight: 600 !important;}
html[data-header-style="alt"] body.section-green .approach-viewport .studio-card-title-detail, html[data-header-style="alt"] body.section-green .client-viewport .studio-card-title-detail{font-weight: 400 !important;}
@media (min-width: 1101px){html[data-header-style="alt"] #services .sitemap-card-top h2{flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(20px, 1.8vw, 28px) !important;
    line-height: 1.02 !important;
    letter-spacing: -2px !important;
    text-wrap: balance;}}
.contact-form-viewport .contact-content-grid-form-only, .contact-form-viewport .contact-content-grid.contact-content-grid-form-only{display: block !important;
  width: 100% !important;}
.contact-form-viewport .contact-content-grid-form-only .contact-brief-form{grid-column: auto !important;
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-inline: 0 auto !important;}
.contact-form-viewport .contact-form-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
.contact-form-viewport .contact-field-timeline{grid-column: 2 !important;
  grid-row: 3 !important;}
.contact-form-viewport .contact-field-message{grid-column: 1 !important;
  grid-row: 4 !important;}
.contact-form-viewport .contact-attachment-field{grid-column: 2 !important;
  grid-row: 4 !important;}
.contact-form-viewport .contact-field-message .contact-input-shell, .contact-form-viewport .contact-field-message textarea, .contact-form-viewport .contact-attachment-field .attachment-dropzone{height: 100% !important;}
.contact-form-viewport .contact-field-message textarea, .contact-form-viewport .contact-attachment-field .attachment-dropzone{min-height: 138px !important; width:100% !important;}
.contact-recommended{color: var(--accent);
  font-weight: 600 !important;}
.contact-email-note-below-submit{margin: 4px 0 0 !important;
  color: var(--muted);
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-align: center !important;}
#contact-message .cta-static-message{align-items: center !important;
  justify-content: center !important;
  text-align: center !important;}
#contact-message .cta-static-title, #contact-message .cta-static-title > span{width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;}
#contact-message .cta-static-byline{width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;}
.orientation-note{display: none !important;}
@media (max-width: 1100px){.orientation-note{display: block !important;
    margin: 9px 0 0 !important;
    color: var(--muted);
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    font-style: italic !important;}
.contact-form-viewport .contact-form-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
.contact-form-viewport .contact-field-timeline, .contact-form-viewport .contact-field-message, .contact-form-viewport .contact-attachment-field{grid-column: auto !important;
    grid-row: auto !important;}
.contact-form-viewport .contact-field-message, .contact-form-viewport .contact-attachment-field{grid-column: 1 / -1 !important;}
#ui-icons .landing-airport-network-wrap, #motion-graphics .landing-turntable-artwork, #web-design .landing-web-preview-wrap{width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;}
#ui-icons .landing-airport-network-frame, #web-design .landing-web-preview-shell, #web-design .landing-web-preview, #motion-graphics .landing-turntable-inline{width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;}
.landing-airport-network-card:fullscreen .landing-airport-network-wrap, .landing-airport-network-card:-webkit-full-screen .landing-airport-network-wrap{aspect-ratio: auto !important;
    height: 100% !important;}
.approach-viewport .studio-info-card, .client-viewport .studio-info-card{height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;}
.approach-viewport .studio-info-card-content, .client-viewport .studio-info-card-content{height: auto !important;
    min-height: 0 !important;}}
@media (max-width: 700px){.landing-feature-info .landing-feature-explore, .work-section .section-action.landing-feature-explore{width: fit-content !important;
    max-width: 100% !important;
    align-self: flex-start !important;
    padding-left: 18px !important;
    padding-right: 18px !important;}
.contact-form-viewport .contact-form-grid{grid-template-columns: 1fr !important;}
.contact-form-viewport .contact-field-message, .contact-form-viewport .contact-attachment-field{grid-column: auto !important;}
.contact-form-viewport .contact-brief-form{padding: 20px 18px !important;}
#contact-message .cta-static-title{font-size: clamp(46px, 12vw, 64px) !important;}}
.contact-field-label{padding-inline-start: 16px !important;
  text-transform: uppercase !important;}
.contact-field-label .contact-recommended{text-transform: none !important;
  color: inherit;}
#contact-message .cta-static-message{width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;}
#contact-message .cta-static-title, #contact-message .cta-static-title > span, #contact-message .cta-static-byline{margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;}
#contact-message .cta-static-title, #contact-message .cta-static-title > span{width: 100% !important;
  max-width: none !important;}
#contact-message .cta-static-byline{width: min(100%, 980px) !important;}
#contact-message .cta-static-byline .cta-byline-line{display:block;}
#contact-message .cta-static-byline .cta-byline-line + .cta-byline-line{margin-top:8px;}
#contact-message .cta-contact-button{align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;}
html[data-theme="dark"] :is(
  #services .sitemap-card,
  .approach-viewport .studio-info-card,
  .client-viewport .studio-info-card,
  .contact-guide-card
){border: 0;}
html[data-theme="dark"] .contact-brief-form{border: 0;}
@media (min-width: 1101px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 28px !important;
    height: 17px !important;
    background: var(--accent);
    clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%, 62% 50%) !important;}}
@media (max-width: 1100px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 28px !important;
    height: 17px !important;
    background: var(--accent);
    clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%, 62% 50%) !important;}}
html[data-theme="dark"] .section-title, html[data-theme="dark"] .studio-info-title{font-weight: 700 !important;}
html[data-theme="dark"] .contact-email-note-below-submit a{font-size: 13px !important;}
@media (min-width: 1101px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 28px !important;
    height: 17px !important;
    background: var(--accent);
    clip-path: polygon(0 100%, 50% 0, 100% 100%, 80% 100%, 50% 38%, 20% 100%) !important;
    transform: translate(50%, -50%) rotate(90deg) !important;
    transform-origin: center !important;}}
#madhiScrollThumb{background: var(--brand-jade) !important;}
#madhiScrollTrack{background: color-mix(in srgb, var(--brand-jade) 14%, transparent) !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{background: var(--brand-jade) !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;}
.contact-input-shell :is(input, select, textarea){border-color: transparent !important;}
.contact-input-shell :is(input, select, textarea):is(:focus, :focus-visible){border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-gold) 30%, transparent) !important;}
html[data-header-style="alt"] body > main, html[data-header-style="alt"] body > main > :first-child{border-top: 0 !important;
  box-shadow: none;
  outline: 0;}
html[data-header-style="alt"] #services .sitemap-card-content{height: 100% !important;
  display: flex !important;
  flex-direction: column !important;}
html[data-header-style="alt"] #services .sitemap-service-copy{display: grid !important;
  grid-template-rows: 118px auto !important;
  row-gap: 0 !important;}
html[data-header-style="alt"] #services .sitemap-summary{min-height: 118px !important;
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.52 !important;}
html[data-header-style="alt"] #services .sitemap-includes-block{margin-top: 0 !important;
  color: color-mix(in srgb, var(--brand-deep) 76%, transparent);}
html[data-header-style="alt"] #services .sitemap-includes-label{margin: 0 0 8px !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  font-style: normal !important;
  font-weight: 400 !important;}
html[data-header-style="alt"] #services .sitemap-includes-list{margin: 0 0 0 60px !important;
  padding: 0 0 0 17px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
  row-gap: 5px !important;
  font-size: 14.25px !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  font-weight: 400 !important;}
html[data-header-style="alt"] #services .sitemap-includes-list li{margin: 0 !important;
  padding-left: 1px !important;
  break-inside: avoid;}
html[data-header-style="alt"] #services .sitemap-card:nth-child(4) .sitemap-includes-list li:last-child{grid-column:auto;}
html[data-header-style="alt"] #services .sitemap-main-link{margin-top: auto !important;}
@media (min-width: 1101px){html[data-header-style="alt"] #services .sitemap-card{height: 482px !important;
    min-height: 482px !important;
    max-height: 482px !important;}}
html[data-header-style="alt"] .work-section .landing-feature-info > p, html[data-header-style="alt"] .work-section .landing-feature-info .feature-description, html[data-header-style="alt"] .work-section .landing-feature-info .motion-description{font-size: 15.5px !important;
  line-height: 1.55 !important;}
html[data-header-style="alt"] .work-section .landing-feature-info .vector-info-card h3, html[data-header-style="alt"] .work-section .landing-feature-info .city-demo h3{font-size: 14.5px !important;
  line-height: 1.35 !important;}
html[data-header-style="alt"] .work-section .landing-feature-info .vector-info-card p, html[data-header-style="alt"] .work-section .landing-feature-info .city-demo .hint{font-size: 15.5px !important;
  line-height: 1.5 !important;}
html[data-header-style="alt"] .work-section .landing-feature-info .vector-info-card, html[data-header-style="alt"] .work-section .landing-feature-info .city-demo{height: auto !important;
  min-height: 0 !important;}




html[data-header-style="alt"] .hero-service-pills{display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: clamp(12px, 1vw, 20px) !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  background: transparent;
  border: 0;
  box-shadow: none;}
html[data-header-style="alt"] .hero-service-pills a{display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(15.552px, 1.04976vw, 20.412px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  line-height: 1.48 !important;
  text-decoration: none !important;
  box-shadow: none;
  transition: color .16s ease, text-shadow .16s ease !important;}
html[data-header-style="alt"] .hero-service-pills a:hover, html[data-header-style="alt"] .hero-service-pills a:focus-visible{background: transparent;
  color: var(--madhi-blue);
  border: 0;
  filter: none !important;
  opacity: 1;
  font-weight: 400 !important;
  text-shadow: none;}
html[data-header-style="alt"] .hero-service-separator{display: inline-block !important;
  color: var(--muted);
  font-family: "Inter", Arial, sans-serif !important;
  font-size: clamp(15.552px, 1.04976vw, 20.412px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  line-height: 1 !important;}
@media (max-width: 900px){

html[data-header-style="alt"] .hero-service-pills{gap: 8px 12px !important;
    margin-top: 10px !important;}}
@media (min-width: 1101px){
html[data-page="home"] .studio-summary-viewport{
    height:calc(100svh - var(--site-header-height));
    min-height:calc(100svh - var(--site-header-height));
    display:grid;
    grid-template-rows:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.05fr);
    gap:18px;
    padding:16px 0 10px;
    box-sizing:border-box;
    overflow:hidden;
    background:#000000;
    scroll-snap-align:start;
    scroll-snap-stop:always;
}
html[data-page="home"] .studio-summary-viewport > .studio-info-viewport{
    width:100%;height:100% !important;min-height:0 !important;margin:0 !important;padding:0 !important;
    display:block !important;overflow:visible !important;scroll-snap-align:none !important;scroll-snap-stop:normal !important;overscroll-behavior:contain;
}
html[data-page="home"] .studio-summary-viewport .studio-info-container{
    height:100%;display:grid !important;grid-template-columns:minmax(180px,.72fr) repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:auto minmax(0,1fr);column-gap:28px;row-gap:8px;align-items:start;
}
html[data-page="home"] .studio-summary-viewport .studio-info-title{
    grid-column:1;grid-row:1;margin:0 !important;font-size:clamp(29.16px,2.214vw,38.88px) !important;line-height:1 !important;
}
html[data-page="home"] .studio-summary-viewport .studio-info-byline{
    grid-column:1;grid-row:2;margin:0 !important;
}
html[data-page="home"] .studio-summary-viewport :is(.approach-viewport,.client-viewport) .studio-info-grid{display:contents !important;}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card{
    grid-row:1 / span 2;height:250px !important;min-height:250px !important;padding:18px !important;overflow:visible !important;align-self:start;
}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card:nth-child(1){grid-column:2;}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card:nth-child(2){grid-column:3;}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card:nth-child(3){grid-column:4;}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card:nth-child(4){grid-column:5;}
html[data-page="home"] .studio-summary-viewport .client-viewport .studio-info-card{
    grid-row:1 / span 2;height:250px !important;min-height:250px !important;padding:18px !important;align-self:start;
}
html[data-page="home"] .studio-summary-viewport .client-viewport .studio-info-card:nth-child(1){grid-column:2;}
html[data-page="home"] .studio-summary-viewport .client-viewport .studio-info-card:nth-child(2){grid-column:3;}
html[data-page="home"] .studio-summary-viewport .client-viewport .studio-info-card:nth-child(3){grid-column:4;}
html[data-page="home"] .studio-summary-viewport :is(.approach-viewport,.client-viewport) .studio-info-card h3{
    min-height:0 !important;margin:0 !important;font-size:clamp(21.6px,1.566vw,27px) !important;line-height:1.02 !important;letter-spacing:-1px !important;
}
html[data-page="home"] .studio-summary-viewport :is(.approach-viewport,.client-viewport) .studio-info-card p{font-size:14.5px !important;line-height:1.52 !important;}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card-content{
    display:grid !important;grid-template-rows:120px auto !important;row-gap:16px !important;height:100% !important;align-content:start !important;
}
html[data-page="home"] .studio-summary-viewport .client-viewport .studio-info-card-content{
    display:grid !important;grid-template-rows:120px auto !important;row-gap:16px !important;height:100% !important;align-content:start !important;
}
html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-11px;width:13px !important;height:13px !important;
    transform:translate(50%,-50%) rotate(45deg) !important;background:transparent !important;clip-path:none !important;
    border:0 !important;border-top:3px solid #FFBF00 !important;border-right:3px solid #FFBF00 !important;z-index:5;pointer-events:none;
}
html[data-page="home"] .studio-summary-viewport .contact-form-viewport .contact-form-container{
    height:calc(100% - 42px);grid-template-columns:repeat(5,minmax(0,1fr)) !important;grid-template-rows:auto minmax(0,1fr) !important;
    column-gap:14px !important;row-gap:8px !important;
}
html[data-page="home"] .studio-summary-viewport .contact-form-viewport .studio-info-title{grid-column:1 !important;grid-row:1 !important;}
html[data-page="home"] .studio-summary-viewport .contact-desktop-intro{
    display:block;grid-column:1 !important;grid-row:2 !important;margin:0 !important;max-width:none !important;
    font-size:clamp(12.96px,.8856vw,15.66px) !important;line-height:1.4 !important;
}
html[data-page="home"] .studio-summary-viewport .contact-content-grid-form-only,
html[data-page="home"] .studio-summary-viewport .contact-content-grid.contact-content-grid-form-only{
    grid-column:2 / 5 !important;grid-row:1 / span 2 !important;width:100% !important;height:auto;align-self:start;
}
html[data-page="home"] .studio-summary-viewport .contact-content-grid-form-only .contact-brief-form{
    width:100% !important;max-width:none !important;min-height:0 !important;height:auto !important;margin:0 !important;
    padding:8px 10px !important;box-sizing:border-box;
}
html[data-page="home"] .studio-summary-viewport .contact-form-grid{gap:5px 8px !important;}
html[data-page="home"] .studio-summary-viewport .contact-input-shell :is(input,select){height:34px !important;font-size:12.96px !important;}
html[data-page="home"] .studio-summary-viewport .contact-field-message textarea,
html[data-page="home"] .studio-summary-viewport .contact-attachment-field .attachment-dropzone{min-height:72px !important;height:72px !important;font-size:12.42px !important;}
html[data-page="home"] .studio-summary-viewport .contact-form-actions{margin-top:4px !important;gap:3px !important;}
html[data-page="home"] .studio-summary-viewport .contact-submit{min-height:30px !important;padding:6px 16px !important;font-size:12.96px !important;}
html[data-page="home"] .studio-summary-viewport .contact-email-note-below-submit{margin:0 !important;font-size:11.34px !important;line-height:1.2 !important;}
html[data-page="home"] .studio-summary-viewport .contact-attachment-field .attachment-inline-label{font-size:13.5px !important;}
html[data-page="home"] .studio-summary-viewport .contact-attachment-field .attachment-dropzone-copy{font-size:12.42px !important;}
html[data-page="home"] .studio-summary-viewport .contact-attachment-field .attachment-file-list{font-size:12.96px !important;}
html[data-page="home"] .studio-summary-viewport .contact-form-viewport .cta-footer{min-height:38px !important;padding:8px 20px !important;font-size:14.04px !important;}
}
@media (max-width: 1100px){html[data-header-style="alt"] .approach-viewport .studio-info-grid-four{gap: 52px !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card{position: relative !important;
    min-height: 300px !important;
    overflow: visible !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{content: "";
    position: absolute;
    left: 50%;
    bottom: -42px;
    width: 20px;
    height: 11px;
    transform: translateX(-50%) rotate(90deg);
    background: var(--accent);
    clip-path: polygon(0 36%, 66% 36%, 66% 0, 100% 50%, 66% 100%, 66% 64%, 0 64%);
    z-index: 5;
    pointer-events: none;}}
@media (max-width:700px){html[data-header-style="alt"] .approach-viewport .studio-info-grid-four{gap:42px !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card{min-height:0 !important;
    height:auto !important;
    padding:20px 18px !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card-content{display:block !important;
    height:auto !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card h3{margin:0 0 12px !important;
    min-height:0 !important;}
html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{bottom:-30px;
    width:18px !important;
    height:18px !important;
    background:transparent !important;
    clip-path:none !important;
    border-right:4px solid #FFBF00 !important;
    border-bottom:4px solid #FFBF00 !important;
    transform:translateX(-50%) rotate(45deg) !important;}}
html[data-header-style="alt"] #services .sitemap-card-top{margin-bottom: 5px !important;}
html[data-header-style="alt"] #services .sitemap-includes-block{margin-top: 0 !important;}
html[data-header-style="alt"] #web-design .popout-action{display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 0 !important;}
html[data-header-style="alt"] #web-design .popout-action .btn-arrow{display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  line-height: 0 !important;}
html[data-header-style="alt"] #web-design .popout-action .btn-arrow svg{display: block !important;
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  transform: none !important;}
html[data-header-style="alt"] #services .sitemap-card-top{margin-bottom: 16px !important;}
html[data-header-style="alt"] #services .sitemap-card h2{min-height: 2.04em !important;
  height: 2.04em !important;
  display: flex !important;
  align-items: center !important;
  align-content: center !important;}
html[data-header-style="alt"] #services .sitemap-card h2 > span{display: block !important;}
#contact-message .cta-static-title, #contact-message .cta-static-title > span{font-family: "Manrope", Arial, sans-serif !important;
  font-weight: 400 !important;}
#contact-message .cta-static-title{font-size: clamp(65.28px, 4.992vw, 99.84px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;}
@media (max-width: 900px){#contact-message .cta-static-title{font-size: clamp(46.08px, 9.6vw, 72.96px) !important;}}
html[data-header-style="alt"] #services .sitemap-card h2, html[data-header-style="alt"] #services .sitemap-card h2 > span{letter-spacing: -2px !important;
  font-weight: 600 !important;}
html[data-header-style="alt"] #services .sitemap-service-copy{grid-template-rows: 70px auto !important;}
html[data-header-style="alt"] #services .sitemap-summary{min-height: 70px !important;}
html[data-header-style="alt"] #services .sitemap-main-link{margin-top: auto !important;}
@media (min-width: 1101px){html[data-header-style="alt"] #services .sitemap-card{height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;}}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three{display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:repeat(3,auto) !important;
  gap:4.5px !important;
  width:min(72.8%,535px) !important;
  height:auto !important;
  min-height:0 !important;
  left:50% !important;
  top:calc(50% + 10px) !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  padding:0 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-item{grid-column:1 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  background:transparent;
  border:0;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-label{display:none !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-item img{position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform:none !important;
  background:transparent;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-item picture{display:flex !important;
  width:100% !important;
  height:auto !important;
  align-items:center !important;
  justify-content:flex-start !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-primary{grid-row:1 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-inverse{grid-row:2 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-mono{grid-row:3 !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-mono img{width:100% !important;height:auto !important;max-width:100% !important;max-height:none !important;}
@media (max-width:950px){#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three{width:min(86%,535px) !important;gap:4.5px !important;}
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .branding-system-item img,
#branding-logos .branding-system-feature-card .branding-system-collage.logo-system-three .layout-mono img{width:100% !important;max-width:100% !important;max-height:none !important;}}
html[data-header-style="alt"] #services .sitemap-card-top{display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;}
html[data-header-style="alt"] #services .sitemap-number{display: inline-flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 56px !important;
  height: 66px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--madhi-blue);
  font-family: "Londrina Outline", sans-serif !important;
  font-size: 64px !important;
  font-weight: 400 !important;
  -webkit-text-stroke: .9px currentColor;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;}
html[data-header-style="alt"] #services .sitemap-card-top h2{grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;}
html[data-header-style="alt"] #services .sitemap-card-top h2 > span{width: 100% !important;
  text-align: left !important;
  justify-content: flex-start !important;}
html[data-header-style="alt"] .work-section .landing-indexed-heading{display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  margin: 0 0 30px !important;}
html[data-header-style="alt"] .work-section .landing-indexed-heading .section-title{margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(29px, 3.6vw, 43px) !important;
  font-weight: 600 !important;
  letter-spacing: -2px !important;
  line-height: .95 !important;}
html[data-header-style="alt"] .work-section .landing-section-number{flex: 0 0 clamp(44px, 3.55vw, 52px) !important;
  width: clamp(44px, 3.55vw, 52px) !important;
  height: clamp(46px, 3.65vw, 54px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--madhi-blue);
  font-family: "Londrina Outline", sans-serif !important;
  font-size: clamp(44px, 3.2vw, 52px) !important;
  font-weight: 400 !important;
  -webkit-text-stroke: .9px currentColor;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;}
@media (max-width: 760px){html[data-header-style="alt"] .work-section .landing-indexed-heading{gap: 6px !important;}
html[data-header-style="alt"] .work-section .landing-section-number{flex-basis: 44px !important;
    width: 44px !important;
    height: 46px !important;
    font-size: 44px !important;
    letter-spacing: 0 !important;}}
html[data-header-style="alt"] #services .sitemap-card-top{align-items: center !important;}
html[data-header-style="alt"] #services .sitemap-number{align-self: center !important;
  justify-self: start !important;
  padding: 0 !important;
  line-height: 1 !important;}
html[data-header-style="alt"] .work-section .landing-indexed-heading{align-items: center !important;}
html[data-header-style="alt"] .work-section .landing-section-number{align-self: center !important;
  line-height: 1 !important;}
html[data-theme][data-header-style="alt"] #services .sitemap-number{border: 0 !important;
  box-sizing: border-box !important;}
html[data-theme="dark"][data-header-style="alt"] .work-section .landing-section-number{border: 0 !important;
  color: var(--madhi-blue);
  background: transparent;
  box-sizing: border-box !important;}

html[data-header-style="alt"] #contact-message .cta-static-title, html[data-header-style="alt"] #contact-message .cta-static-title > span{font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(65.28px, 4.992vw, 99.84px) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: .96 !important;
  letter-spacing: -2px !important;}
@media (max-width: 900px){html[data-header-style="alt"] #contact-message .cta-static-title{font-size: clamp(46.08px, 9.6vw, 72.96px) !important;}}
@media (min-width: 1101px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 28px !important;
    height: 17px !important;
    background: var(--accent);
    clip-path: polygon(0 100%, 50% 0, 100% 100%, 80% 100%, 50% 38%, 20% 100%) !important;
    transform: translate(50%, -50%) rotate(90deg) !important;
    transform-origin: center !important;}}
@media (max-width: 1100px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width: 28px !important;
    height: 17px !important;
    background: var(--accent);
    clip-path: polygon(0 100%, 50% 0, 100% 100%, 80% 100%, 50% 38%, 20% 100%) !important;
    transform: translateX(-50%) rotate(180deg) !important;
    transform-origin: center !important;}}
.turntableSvg{width: 100%;
        height: auto;
        display: block;
        background: transparent;}
.turntable-bg{fill: var(--brand-aqua);}
.outline{fill: none;
        stroke: var(--brand-deep);
        stroke-linecap: round;
        stroke-linejoin: round;}
.thin{stroke-width: 1;}
.medium{stroke-width: 1.3;}
.strong{stroke-width: 1.5;}
.heavy{stroke-width: 2;}
.record{fill: var(--brand-deep);}
.label-fill{fill: var(--brand-aqua);
        stroke: var(--brand-deep);
        stroke-width: 1;}
.white-fill{fill: var(--brand-aqua);}
.dark-fill{fill: var(--brand-deep);}
.groove-1{fill: none;
        stroke: var(--brand-deep);
        stroke-width: 1;}
.groove-2{fill: none;
        stroke: var(--brand-deep);
        stroke-width: 1;}
.spin-mark{stroke: var(--brand-teal);
        stroke-width: 2;}
.button-face{fill: var(--brand-aqua);}
.button-face:active, #startStopPhysical:active .button-face{fill: var(--brand-aqua);}
.turntable-text{font-family: Arial, Helvetica, sans-serif;
        fill: var(--brand-deep);}
.label-text{font-size: 8px;
        font-weight: 600;}
.button-text{font-size: 7px;
        font-weight: 700;
        text-anchor: middle;}
.tiny-text{font-size: 5px;}
.micro-text{font-size: 4px;}
#platterSpin{transform-origin: 248px 258px;
        transform-box: view-box;}
.is-playing #platterSpin, #platterSpin.is-playing{animation: recordSpin 2.4s linear infinite;}
@keyframes recordSpin{from{transform: rotate(0deg);}
to{transform: rotate(360deg);}}
#tonearm{transform-origin: 465px 163px;
        transform-box: view-box;
        transition: transform 0.8s ease-in-out;}
.needle-on #tonearm, #tonearm.needle-on{transform: rotate(-8deg);}
#startStopPhysical{cursor: pointer;}
html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{background: var(--brand-jade) !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;}
html[data-header-style="alt"] #web-design .popout-action{border: 2px solid #FFFFFF !important;}
:root{--brand-deep: #000000;
  --brand-aqua: #9DC183;
  --brand-gold: #FFBF00;
  --brand-cyan: #FFBF00;
  --brand-teal: #FFBF00;
  --brand-jade: #FFBF00;
  --soft-white: #F4F4F4;
  --soft-gray: #C4C4C4;
  --tile-charcoal: #20242C;

  

  
  --madhi-green: var(--brand-gold);
  --madhi-blue: var(--brand-cyan);
  --madhi-off-white: var(--brand-aqua);
  --accent: var(--brand-gold);
  --gold: var(--brand-gold);
  --warm: var(--brand-gold);}
html[data-theme="dark"]{color-scheme: dark;
  --surface-page: #000000;
  --surface-header: #000000;
  --surface-section: #000000;
  --surface-tile: var(--tile-charcoal);
  --surface-field: #000000;
  --surface-control: #000000;

  --text-main: var(--brand-aqua);
  --text-muted: var(--brand-aqua);
  --text-on-header: var(--brand-aqua);
  --text-on-tile: var(--brand-aqua);
  --text-on-control: var(--brand-aqua);

  --title-page: #FFFFFF;
  --title-section: #FFFFFF;
  --label-category: #FFFFFF;

  --button-border: var(--brand-aqua);
  --button-text: var(--brand-aqua);
  --button-hover-bg: var(--brand-jade);
  --button-hover-text: #FFFFFF;
  --button-hover-border: transparent;

  --nav-active-bg: var(--brand-deep);
  --nav-active-text: var(--brand-aqua);
  --nav-hover-border: var(--brand-cyan);

  --field-border: var(--brand-aqua);
  --field-focus: var(--brand-cyan);
  --divider-color: var(--brand-cyan);

  
  --bg: var(--surface-page);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --soft-muted: var(--text-muted);
  --card: var(--surface-tile);
  --border: var(--brand-deep);
  --gold-bg: var(--surface-tile);
  --madhi-light-panel: var(--surface-tile);
  --madhi-light-line: var(--divider-color);
  --madhi-shared-divider: var(--divider-color);
  --madhi-header-divider: var(--divider-color);
  --landing-header-divider: var(--divider-color);
  --service-header-divider: var(--divider-color);
  --site-header-divider: #3b3b3b;
  --madhi-alt-header-bg: var(--surface-header);
  --madhi-alt-header-white: var(--text-on-header);
  --madhi-alt-header-green: var(--brand-cyan);
  --madhi-alt-header-divider: var(--divider-color);

  
  --home-header-bg: #FFFFFF;
  --home-logo-madhi: #FFBF00;
  --home-logo-studio: #FFBF00;
  --home-nav-rest-fill: #FFFFFF;
  --home-nav-rest-border: transparent;
  --home-nav-rest-text: #000000;
  --home-nav-hover-fill: transparent;
  --home-nav-hover-border: #FFBF00;
  --home-nav-hover-text: #000000;
  --home-divider: #F4F4F4;
  --home-main-fill: #000000;
  --home-hero-title: #FFFFFF;
  --home-hero-copy: #FFFFFF;
  --home-section-rest-fill: #000000;
  --home-section-rest-border: #000000;
  --home-section-rest-text: #FFFFFF;
  --home-section-hover-fill: #000000;
  --home-section-hover-border: #FFBF00;
  --home-section-hover-text: #FFBF00;
  --home-v2-fill: #000000;
  --home-v2-title: #FFBF00;
  --home-v2-copy: #C4C4C4;
  --home-card-fill: var(--tile-charcoal);
  --home-card-border: transparent;
  --home-card-text: #C4C4C4;
  --home-number-fill: transparent;
  --home-number-border: #FFBF00;
  --home-number-text: #FFBF00;
  --home-card-title-fill: var(--tile-charcoal);
  --home-card-title-border: var(--tile-charcoal);
  --home-card-title-text: #FFBF00;
  --home-card-paragraph-fill: var(--tile-charcoal);
  --home-card-paragraph-border: var(--tile-charcoal);
  --home-card-paragraph-text: #C4C4C4;
  --home-cta-rest-fill: #000000;
  --home-cta-rest-border: transparent;
  --home-cta-rest-text: #FFFFFF;
  --home-cta-hover-fill: #FFBF00;
  --home-cta-hover-border: #FFBF00;
  --home-cta-hover-text: #FFFFFF;
  --home-bottom-rest-fill: #FFFFFF;
  --home-bottom-rest-border: #8A8F98;
  --home-bottom-rest-text: #8A8F98;
  --home-bottom-hover-fill: #FFBF00;
  --home-bottom-hover-border: #FFBF00;
  --home-bottom-hover-text: #FFFFFF;}
html[data-theme] body, html[data-theme] main, html[data-theme] .work-section, html[data-theme] .studio-info-viewport, html[data-theme] #contact-message, html[data-theme] .collection, html[data-theme] footer{background: var(--surface-page);
  color: var(--text-main);}
html[data-theme] #home{background: var(--home-main-fill);
  color: var(--home-hero-copy);}
html[data-theme] #services{background: var(--home-v2-fill);
  color: var(--home-v2-copy);}
html[data-theme="dark"] :is(
  .services-viewport,
  .approach-viewport,
  .client-viewport,
  .contact-form-viewport,
  .page-section,
  .work-section,
  .studio-info-viewport,
  #contact-message
){background: #000000;}

html[data-theme] a{color: inherit;}
html[data-theme] .dropdown{background: var(--home-header-bg);
  color: var(--home-nav-rest-text);
  border-color: var(--home-divider);}
html[data-theme] .dropdown a{color: var(--home-nav-rest-text);}

html[data-theme="dark"] #contact-message :is(.cta-static-title, .cta-static-title > span){color: #FFFFFF;}

html[data-theme] #home :is(.hero-service-pills a, .hero-service-separator){color: var(--home-section-rest-text);}
html[data-theme] #home .hero-service-pills a{background: var(--home-section-rest-fill);
  box-shadow: inset 0 0 0 1px var(--home-section-rest-border);}
html[data-theme] #home .hero-service-pills a:is(:hover, :focus-visible){color: var(--home-section-hover-text);
  background: var(--home-section-hover-fill);
  box-shadow: inset 0 0 0 1px var(--home-section-hover-border);}
html[data-theme="dark"] #contact-message .cta-static-byline{color: #FFFFFF;}
html[data-theme="dark"] :is(
  .approach-viewport .studio-info-title,
  .client-viewport .studio-info-title,
  .contact-form-viewport .studio-info-title
){color: #FFFFFF;}
html[data-theme="dark"] .work-section .landing-indexed-heading .section-title{color: #FFFFFF;}
html[data-theme] #services .services-title{color: var(--home-v2-title);}
html[data-theme] #services .services-byline{color: var(--home-v2-copy);}
html[data-theme][data-page="service"] .page-title{color: var(--title-page);}
html[data-theme="dark"][data-page="service"] .page-section{background: #000000;}
html[data-theme="dark"] .work-section .landing-section-number{color: #FFFFFF;
  border-color: #F4F4F4;
  background: transparent;}
html[data-theme="dark"] :is(.caption, .landing-feature-info .caption, .info-panel .caption, .aviation-kicker){color: #FFFFFF;}
html[data-theme="dark"] :is(
  .approach-viewport .studio-info-card,
  .client-viewport .studio-info-card,
  .info-panel,
  .vector-info-card,
  .work-section .card-caption
){background: var(--surface-tile);
  color: #FFFFFF;
  border: 0;}
html[data-theme="dark"] :is(
  .approach-viewport .studio-info-card,
  .client-viewport .studio-info-card,
  .info-panel,
  .vector-info-card,
  .work-section .card-caption
) :is(h1,h2,h3,h4,p,li,span:not(.dog-ear),strong,em){color: #FFFFFF;}
html[data-theme] #services .sitemap-card{background: var(--home-card-fill);
  color: var(--home-card-text);
  border: 0;}
html[data-theme] #services .sitemap-card h2, html[data-theme] #services .sitemap-card h2 > span{background: transparent;
  color: var(--home-card-title-text);
  box-shadow: none;}
html[data-theme] #services :is(.sitemap-summary, .sitemap-includes-block, .sitemap-includes-label, .sitemap-includes-list, .sitemap-includes-list li){background: transparent;
  color: var(--home-card-paragraph-text);
  box-shadow: none;}
html[data-theme] #services .sitemap-number{background: var(--home-number-fill);
  color: var(--home-number-text);
  border: 1px solid var(--home-number-border);}
html[data-theme] .dog-ear, html[data-theme] .feature-card > .dog-ear{background: var(--brand-gold);
  color: var(--brand-deep);
  border-color: var(--brand-gold);}
html[data-theme] #services .sitemap-main-link{background: var(--home-cta-rest-fill);
  color: var(--home-cta-rest-text);
  border-color: var(--home-cta-rest-border);}
html[data-theme] #services .sitemap-main-link:is(:hover, :focus-visible){background: var(--home-cta-hover-fill);
  color: var(--home-cta-hover-text);
  border-color: transparent;
  outline-color: var(--home-cta-hover-fill);}
html[data-theme="dark"] .contact-brief-form{background: var(--surface-tile);
  color: #FFFFFF;
  border: 0;}
html[data-theme="dark"] .contact-brief-form .contact-field-label, html[data-theme="dark"] .contact-brief-form .contact-field-label :is(.contact-recommended, .contact-optional){color: #FFFFFF;}
html[data-theme="dark"] :is(
  .contact-field input,
  .contact-field select,
  .contact-field textarea,
  .attachment-dropzone
){background: #000000;
  color: #FFFFFF;
  border-color: transparent;}
html[data-theme] :is(
  .contact-field input,
  .contact-field select,
  .contact-field textarea,
  .attachment-dropzone
):is(:focus, :focus-visible), html[data-theme] .attachment-dropzone.is-dragover{border-color: #FFBF00;
  box-shadow: none;
  outline: none;}
html[data-theme="dark"] :is(.contact-field input, .contact-field textarea)::placeholder{color: #C4C4C4;
  opacity: 1;
  transition: opacity .16s ease;}
html[data-theme="dark"] :is(.contact-field input, .contact-field textarea):focus::placeholder{opacity:.35;}
html[data-theme] :is(.attachment-browse, .contact-email-note-below-submit a){color: var(--brand-gold);}
html[data-theme] .field-check{background: var(--brand-gold);
  color: var(--brand-deep);}
html[data-theme="dark"] footer, html[data-theme="dark"] footer a{color: var(--brand-jade);}
html[data-theme] footer a:is(:hover, :focus-visible){color: var(--brand-gold);}
html[data-theme] #backToTop{background: var(--home-bottom-rest-fill);
  color: var(--home-bottom-rest-text);
  border: 2px solid var(--home-bottom-rest-border);}
html[data-theme] #backToTop .back-to-top-arrow::before{background: var(--home-bottom-rest-text);}
html[data-theme] #backToTop .back-to-top-label{color: var(--home-bottom-rest-text);}
html[data-theme] #backToTop:is(:hover, :focus-visible){background: var(--home-bottom-hover-fill);
  color: var(--home-bottom-hover-text);
  border-color: var(--home-bottom-hover-border);}
html[data-theme="dark"] #backToTop:is(:hover, :focus-visible){border-color: transparent;}
html[data-theme] #backToTop:is(:hover, :focus-visible) .back-to-top-arrow::before{background: var(--home-bottom-hover-text);}
html[data-theme] #backToTop:is(:hover, :focus-visible) .back-to-top-label{color: var(--home-bottom-hover-text);}
html[data-theme] :is(.preview-popout, .landing-preview-popout, .popout-action), html[data-theme] :is(.preview-popout, .landing-preview-popout, .popout-action):is(:hover, :focus-visible){background: #000000 !important;
  color: #FFFFFF !important;}
html[data-theme="dark"] :is(
  #services .services-title,
  .work-section .landing-indexed-heading .section-title,
  .approach-viewport .studio-info-title,
  .client-viewport .studio-info-title,
  .contact-form-viewport .studio-info-title,
  [data-page="service"] .page-title
){color: #FFFFFF;}
html[data-theme="dark"] #services :is(.sitemap-card h2, .sitemap-card h2 > span, .sitemap-number){color: #FFFFFF;}
html[data-theme="dark"] #services :is(
  .sitemap-summary,
  .sitemap-includes-block,
  .sitemap-includes-label,
  .sitemap-includes-line,
  .sitemap-includes-list,
  .sitemap-includes-list li
){color: #C4C4C4;}
html[data-theme="dark"] :is(
  .approach-viewport,
  .client-viewport
) :is(.studio-info-byline, .studio-info-card h3, .studio-info-card p, .studio-card-title-main, .studio-card-title-detail){color: #FFFFFF;}
html[data-theme="dark"] :is(
  .landing-feature-info,
  .work-section .landing-feature-info,
  .work-section .card-caption,
  .info-panel,
  .vector-info-card
) :is(h1,h2,h3,h4,p,li,span:not(.dog-ear),strong,em,.caption,.aviation-kicker){color: #FFFFFF;}
html[data-theme="dark"] :is(
  .contact-form-viewport .studio-info-title,
  .contact-brief-form .contact-field-label,
  .contact-brief-form .contact-recommended,
  .contact-brief-form .contact-optional,
  .contact-brief-form .attachment-dropzone-copy,
  .contact-brief-form .attachment-file-list,
  .contact-form-status,
  .contact-email-note-below-submit
){color: #FFFFFF;}
html[data-theme="dark"] :is(
  .btn,
  .btn.primary,
  .section-action,
  .landing-feature-explore,
  .sitemap-main-link,
  .hub-main-link,
  .card-main-link,
  .aviation-main-link,
  .contact-submit,
  .cta-contact-button
){background: transparent;
  color: #FFFFFF;
  border-color: #F4F4F4;}
html[data-theme="dark"] :is(
  .btn,
  .btn.primary,
  .section-action,
  .landing-feature-explore,
  .sitemap-main-link,
  .hub-main-link,
  .card-main-link,
  .aviation-main-link,
  .contact-submit,
  .cta-contact-button
):is(:hover, :focus-visible){background:#FFBF00 !important;
  color: #351e10 !important;
  border-color:transparent !important;}
html[data-theme] #backToTop{border-color: #F4F4F4;}
html[data-theme] #backToTop:is(:hover, :focus-visible){background:#FFBF00;
  color: #351e10;
  border-color:transparent !important;}
html[data-theme] #backToTop:is(:hover, :focus-visible) .back-to-top-arrow::before{background: #351e10;}
html[data-theme] #backToTop:is(:hover, :focus-visible) .back-to-top-label{color: #351e10;}
html[data-theme]{scrollbar-color: var(--brand-jade) var(--surface-page);}
html[data-theme]::-webkit-scrollbar-track{background: var(--surface-page);}
html[data-theme]::-webkit-scrollbar-thumb{background: var(--brand-jade);}
html[data-theme="dark"] :is(.landing-feature-info, .info-panel, .vector-info-card, .work-section .card-caption){background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;}
html[data-theme="dark"] :is(.landing-feature-info, .info-panel, .vector-info-card) :is(h1,h2,h3,h4,p,li,span,strong,em,.caption,.aviation-kicker){background: transparent !important;}
html[data-theme="dark"] :is(.image-card, .web-preview-stage){background-color: var(--tile-background, var(--tile-charcoal)) !important;
  border: var(--tile-border, 0) !important;}
html[data-theme="dark"] .work-section:not(#motion-graphics):not(#branding-logos):not(#photography):not(#copywriting) .feature-card{background-color: var(--tile-background, var(--tile-charcoal)) !important;
  border: var(--tile-border, 0) !important;}
html[data-theme="dark"] .svg-artwork{background-color: var(--tile-background, var(--tile-charcoal)) !important;
  border: 0 !important;}
html[data-theme="dark"] #web-design :is(.popout-action, .landing-preview-popout), html[data-theme="dark"] .web-preview-card .preview-popout{border-width:2px !important;border-style:solid !important;}
html[data-theme="dark"] :is(.contact-field input, .contact-field select, .contact-field textarea, .attachment-dropzone){border-color: transparent !important;}
html[data-theme="dark"] :is(.contact-field input, .contact-field select, .contact-field textarea, .attachment-dropzone):is(:focus, :focus-visible), html[data-theme="dark"] .attachment-dropzone.is-dragover{border-color: #FFBF00 !important;
  box-shadow: none !important;}
html[data-theme="dark"] footer, html[data-theme="dark"] footer a, html[data-theme="dark"] .footer-main, html[data-theme="dark"] .footer-main a{color: var(--brand-jade) !important;}
html[data-theme] #madhiScrollThumb{background: var(--brand-jade) !important;}
html[data-theme] #madhiScrollTrack{background: color-mix(in srgb, var(--brand-jade) 14%, transparent) !important;}
html[data-theme] .turntableSvg :is(.turntable-bg, .label-fill, .white-fill, .button-face){fill: #FFFFFF !important;}
html[data-theme] .turntableSvg .spin-mark{stroke: #FFFFFF !important;}
html[data-theme] :is(.dog-ear, .feature-card > .dog-ear){background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;}
html[data-theme="dark"] #services .sitemap-card{border: 0 !important;}
html[data-theme="dark"] #services .sitemap-number{border-color: transparent !important;}
html[data-theme="dark"] #services .sitemap-main-link{color: #FFFFFF !important;
  border-color: transparent !important;}
html[data-theme="dark"] #services .sitemap-main-link:is(:hover, :focus-visible){background:#FFBF00 !important;
  color: #351e10 !important;
  border-color:transparent !important;}
:root{--brand-gold:#FFBF00;
  --brand-cyan:#FFBF00;
  --brand-teal:#FFBF00;
  --brand-jade:#FFBF00;
  --madhi-blue:#FFBF00;
  --accent:#FFBF00;
  --gold:#FFBF00;
  --warm:#FFBF00;}
html[data-theme] :is(
  #services .services-title,
  .approach-viewport .studio-info-title,
  .client-viewport .studio-info-title,
  .contact-form-viewport .studio-info-title
){color:#FFBF00 !important;
  font-family:"Londrina Outline",sans-serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;}
html[data-theme] #services :is(
  .sitemap-card h2,
  .sitemap-card h2 > span,
  .sitemap-number
){color:#FFBF00 !important;}
html[data-theme] #services .sitemap-number{background:transparent !important;
  border:0 !important;}
html[data-theme] .work-section .landing-indexed-heading .section-title{color:#FFBF00 !important;}
html[data-theme] .work-section .landing-section-number{color:#FFBF00 !important;
  background:transparent !important;
  border:0 !important;}
html[data-theme] :is(.dog-ear, .feature-card > .dog-ear){background:#FFBF00 !important;
  color:#FFFFFF !important;
  border-color:#FFBF00 !important;
  box-shadow:none !important;}
html[data-theme] :is(
  .caption,
  .landing-feature-info .caption,
  .info-panel .caption,
  .branding-system-label,
  .sitemap-includes-label,
  .aviation-kicker
){color:#FFBF00 !important;}
html[data-theme] :is(
  .approach-viewport .studio-card-title-main,
  .client-viewport .studio-card-title-main,
  .client-viewport .studio-card-punctuation
){color:#FFBF00 !important;}
html[data-theme] :is(
  .btn,
  .btn.primary,
  .section-action,
  .landing-feature-explore,
  .hub-main-link,
  .card-main-link,
  .aviation-main-link
):not(.popout-action):not(.cta-contact-button):not(.contact-submit){background:#FFBF00 !important;
  color:#351e10 !important;
  border-color:transparent !important;
  border-radius:999px !important;
  font-weight:700 !important;}
html[data-theme] :is(
  .btn,
  .btn.primary,
  .section-action,
  .landing-feature-explore,
  .hub-main-link,
  .card-main-link,
  .aviation-main-link
):not(.popout-action):not(.cta-contact-button):not(.contact-submit):is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border-color:transparent !important;
  border-radius:999px !important;}
html[data-theme] #services .sitemap-main-link{background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;
  border-radius:999px !important;
  font-weight:700 !important;}
html[data-theme] #services .sitemap-main-link:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;}
html[data-theme] .cta-contact-button{background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;
  border-radius:999px !important;
  font-weight:700 !important;}
html[data-theme] .contact-submit{background:#000000 !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:999px !important;
  font-weight:700 !important;}
html[data-theme] .cta-contact-button:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;
  border-color:transparent !important;
  border-radius:999px !important;}
html[data-theme] .contact-submit:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#000000 !important;
  border:0 !important;
  border-color:transparent !important;
  border-radius:999px !important;}
html[data-theme] :is(.preview-popout,.landing-preview-popout,.popout-action){background:#20242C !important;
  color:#FFFFFF !important;
  border-width:2px !important;
  border-style:solid !important;
  border-color:transparent;
  font-weight:700 !important;}
html[data-theme] :is(.preview-popout,.landing-preview-popout,.popout-action):is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border-color:transparent !important;
  animation:none !important;}
html[data-theme] :is(
  .map-fullscreen-control,
  .aerowordsmith-fullscreen,
  #backToTop,
  #motionToggle
){background:#20242C !important;
  color:#FFFFFF !important;
  border:0 !important;
  box-shadow:none !important;}
html[data-theme] :is(
  .map-fullscreen-control,
  .aerowordsmith-fullscreen,
  #backToTop,
  #motionToggle
):is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;}
html[data-theme] .aoe-learning-replay{background:#0B6623 !important;
  color:#00A86B !important;
  border:0 !important;
  box-shadow:none !important;}
html[data-theme] .aoe-learning-replay:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#FFFFFF !important;
  border:0 !important;}
html[data-theme] .contact-input-shell :is(input,select,textarea):is(:focus,:focus-visible){border-color:#FFBF00 !important;
  box-shadow:none !important;
  outline:none !important;}
html[data-theme] .attachment-dropzone{position:relative;
  overflow:hidden;
  border:2px solid transparent !important;}
html[data-theme] .attachment-dropzone:is(:focus,:focus-visible,:focus-within), html[data-theme] .attachment-dropzone.is-dragover{border-color:#FFBF00 !important;
  box-shadow:none !important;
  outline:none !important;}
html[data-theme] .contact-field-label{text-transform:none !important;}
@media (min-width:1101px){html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{width:17px !important;
    height:17px !important;
    background:transparent !important;
    clip-path:none !important;
    border:0 !important;
    border-top:4px solid #FFBF00 !important;
    border-right:4px solid #FFBF00 !important;
    box-shadow:none !important;
    opacity:1;
    transition:opacity .65s ease;
    transform:translate(50%,-50%) rotate(45deg) !important;}
  html[data-header-style="alt"] .approach-viewport.arrow-sequence-running .studio-info-card:not(:last-child)::after{opacity:.24;}
  html[data-header-style="alt"] .approach-viewport.arrow-sequence-running .studio-info-card.is-arrow-active::after{opacity:1;}
  html[data-header-style="alt"] .approach-viewport.arrow-sequence-stopped .studio-info-card:not(:last-child)::after{opacity:1;}}
html[data-theme] #madhiScrollThumb{background:#FFBF00 !important;}
html[data-theme] #madhiScrollTrack{background:color-mix(in srgb, #FFBF00 14%, transparent) !important;}
html[data-theme] #services .sitemap-number{background:transparent !important;
  color:#FFBF00 !important;
  border:0 !important;}
html[data-theme] #services .sitemap-main-link{background:#000000 !important;
  color:#FFFFFF !important;
  border:0 !important;
  font-weight:700 !important;}
html[data-theme] #services .sitemap-main-link:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;}
html[data-theme="dark"] #services .sitemap-includes-label{color:#C4C4C4 !important;}
html[data-theme] .work-section .landing-section-number{background:transparent !important;
  color:#FFBF00 !important;
  border:1px solid #FFBF00 !important;}
html[data-page="service"] .page-title{color:#FFBF00 !important;}
html[data-theme] :is(
  .approach-viewport .studio-card-title-main,
  .client-viewport .studio-card-title-main,
  .client-viewport .studio-card-punctuation
){color:#FFBF00 !important;}
html[data-theme] :is(.preview-popout,.landing-preview-popout,.popout-action){background:#20242C !important;
  color:#FFFFFF !important;
  border-width:2px !important;
  border-style:solid !important;
  border-color:transparent;
  box-shadow:none !important;
  font-weight:700 !important;}
html[data-theme] :is(.preview-popout,.landing-preview-popout,.popout-action):is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border-color:transparent !important;
  animation:none !important;}
html[data-theme] :is(.preview-popout,.landing-preview-popout,.popout-action).is-attention-active{animation:previewPopoutBorderBlink 1.6s ease-in-out infinite;}
@keyframes previewPopoutBorderBlink{0%,100%{border-color:#FFFFFF;}50%{border-color:transparent;}}
html[data-theme] :is(.preview-popout,.landing-preview-popout,.popout-action) :is(svg,path){color:inherit !important;
  stroke:currentColor !important;}
html[data-theme] .map-fullscreen-control:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#351e10 !important;
  border:0 !important;}
html[data-theme] .turntableSvg .turntable-body-fill{fill:#FFFFFF !important;}
html[data-theme] .turntableSvg :is(.label-fill,.white-fill,.button-face){fill:#FFFFFF !important;}
html[data-theme] .soccer-demo button, html[data-theme] .soccer-demo button:not(.is-active), html[data-theme] .soccer-demo button.is-active{background:#20242C !important;
  color:#FFFFFF !important;
  border:0 !important;
  font-weight:700 !important;}
html[data-theme] .soccer-demo button:is(:hover,:focus-visible){background:#FFBF00 !important;
  color:#FFFFFF !important;
  border:0 !important;}
html[data-theme="dark"] footer, html[data-theme="dark"] footer a, html[data-theme="dark"] .footer-main, html[data-theme="dark"] .footer-main a{color:#FFFFFF !important;}
html[data-theme] :is(.landing-feature-info,.info-panel,.vector-info-card,.work-section .card-caption){background:transparent !important;
  border:0 !important;
  box-shadow:none !important;}
html[data-theme] :is(
  .feature-card,.image-card,.branding-system-feature-card,.branding-system-collage,
  .branding-system-item,.landing-turntable-artwork,.web-preview-stage,.web-preview-card,
  .web-preview-shell,.landing-web-preview-shell,.svg-artwork,.taxi-plane-card,
  .solari-signal-card,.typing-hero-panel,.madhi-hero-card
){border:0 !important;
  box-shadow:none !important;}
:root{--site-header-height: 72px;
  --landing-header-height: var(--site-header-height);
  --service-header-height: var(--site-header-height);
  --mobile-nav-height: var(--site-header-height);
  --madhi-mobile-header-height: var(--site-header-height);
  --site-header-bg: #000000;
  --site-header-text: #FFFFFF;
  --site-header-hover-text: #FFBF00;
  --site-header-active-bg: #FFFFFF;
  --site-header-active-text: #000000;
  --site-header-divider: #3b3b3b;}
html{scroll-padding-top: var(--site-header-height);}
body{padding-top: var(--site-header-height);}
#site-nav{position: relative;
  z-index: 1200;}
nav.site-nav-global{position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  width: 100%;
  height: var(--site-header-height);
  min-height: var(--site-header-height);
  margin: 0;
  padding: 0 10px;
  background: var(--site-header-bg);
  color: var(--site-header-text);
  border: 0;
  border-bottom: 1px solid var(--site-header-divider);
  box-shadow: none;}
nav.site-nav-global::before, nav.site-nav-global::after{content: none;}
.site-nav-global .nav-inner{width: 100%;
  height: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  column-gap: 0;
  background: transparent;}
.site-nav-global .logo, .site-nav-global .logo a{width: 0;
  height: 100%;
  min-width: 0;
  display: none;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;}
.site-nav-global .logo img{display: block;
  width: 404px;
  max-width: 100%;
  height: auto;
  max-height: 104px;
  margin: 0;
  padding: 0;
  transform: none;
  filter: none;
  opacity: 1;}
.site-nav-global .nav-links{min-width: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;}
.site-nav-global .nav-links > a{flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 6px;
  color: var(--site-header-text);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(13.3px, .874vw, 17.1px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transition: color .18s ease, background-color .18s ease;}
.site-nav-global .nav-links > a:hover, .site-nav-global .nav-links > a:focus-visible{color: var(--site-header-hover-text);
  background: transparent;
  outline: none;}
.site-nav-global .nav-links > a.active, .site-nav-global .nav-links > a.section-current, .site-nav-global .nav-links > a.active:hover, .site-nav-global .nav-links > a.active:focus-visible, .site-nav-global .nav-links > a.section-current:hover, .site-nav-global .nav-links > a.section-current:focus-visible{color: var(--site-header-active-text);
  background: var(--site-header-active-bg);
  border: 0;
  outline: none;
  min-height:34px;
  padding-top:6px;
  padding-bottom:6px;
  font-size: clamp(13.3px, .874vw, 17.1px);
  font-weight: 700;
  line-height: 1;}
@media (min-width:951px){
.site-nav-global .nav-links > a:hover,
.site-nav-global .nav-links > a:focus-visible,
.site-nav-global .nav-links > a.active,
.site-nav-global .nav-links > a.section-current,
.site-nav-global .nav-links > a.active:hover,
.site-nav-global .nav-links > a.active:focus-visible,
.site-nav-global .nav-links > a.section-current:hover,
.site-nav-global .nav-links > a.section-current:focus-visible{font-weight:600;}
}
@media (min-width:1101px){
html[data-page="home"] .site-nav-global .nav-links > a,
html[data-page="home"] .site-nav-global .nav-links > a.active,
html[data-page="home"] .site-nav-global .nav-links > a.section-current{font-size:clamp(13.3px,.874vw,17.1px);}
.site-nav-global .nav-links > a.active,
.site-nav-global .nav-links > a.section-current,
.site-nav-global .nav-links > a.active:hover,
.site-nav-global .nav-links > a.active:focus-visible,
.site-nav-global .nav-links > a.section-current:hover,
.site-nav-global .nav-links > a.section-current:focus-visible{padding-left:14px;padding-right:14px;}
}
.site-nav-global .service-nav-label{display: inline;
  width: auto;
  min-width: 0;
  min-height: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: nowrap;}
.site-nav-global .nav-links > .nav-divider{display: block;
  width: 1px;
  min-width: 1px;
  height: 16px;
  flex: 0 0 1px;
  align-self: center;
  margin: 0 2px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  border-left: 1px solid #555555;
  border-radius: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  position: relative;
  z-index: 3;}
.site-nav-global .nav-toggle{display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--site-header-text);
  border-radius: 999px;
  background: transparent;
  color: var(--site-header-text);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;}
.site-nav-global .nav-toggle span{display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;}
.site-nav-global.mobile-open .nav-toggle span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.site-nav-global.mobile-open .nav-toggle span:nth-child(2){opacity: 0;}
.site-nav-global.mobile-open .nav-toggle span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
@media (max-width: 1500px){.site-nav-global .nav-links{gap:0;padding-inline:0;}
.site-nav-global .nav-links > a{padding-inline:6px;font-size:13.3px;}}
@media (max-width: 1100px){:root{--site-header-height: 84px;}
body.mobile-menu-open{overflow: hidden;}
nav.site-nav-global{padding: 0 14px;}
.site-nav-global .nav-inner{display: flex;
    justify-content: space-between;
    gap: 16px;}
.site-nav-global .logo, .site-nav-global .logo a{display:flex;
    width: 202px;
    height: 100%;}
.site-nav-global .logo img{width: 196px;
    max-height: 76px;}
.site-nav-global .nav-toggle{display: inline-flex;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;}
.site-nav-global .nav-links{position: absolute;
    top: 100%;
    left: -14px;
    right: -14px;
    height: auto;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 0 14px;
    background: #000000;
    border-bottom: 1px solid var(--site-header-divider);
    box-shadow: 0 18px 34px rgba(0,0,0,.28);
    transition: max-height .26s ease, opacity .18s ease, padding .26s ease;}
.site-nav-global.mobile-open .nav-links{max-height: calc(100svh - var(--site-header-height));
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
    padding-top: 8px;
    padding-bottom: 10px;}
.site-nav-global .nav-links > a{width: fit-content;
    min-height: 34px;
    justify-content: flex-end;
    align-self: flex-end;
    padding: 6px 0;
    border-radius: 0;
    font-size: 16px;
    font-weight:700;
    text-align: right;
    text-decoration:none;
    text-decoration-thickness:3px;
    text-underline-offset:6px;}
.site-nav-global .nav-links > a.active, .site-nav-global .nav-links > a.section-current,
.site-nav-global .nav-links > a.active:hover, .site-nav-global .nav-links > a.section-current:hover{background:transparent;
    color:#FFBF00;
    border-radius:0;
    font-size:16px;
    font-weight:800;}
.site-nav-global .nav-links > a[data-nav="home"].active,
.site-nav-global .nav-links > a[data-nav="home"].active:hover,
.site-nav-global .nav-links > a[data-nav="home"].active:focus-visible,
.site-nav-global .nav-links > a[data-nav="contact"].active,
.site-nav-global .nav-links > a[data-nav="contact"].section-current{background:transparent;
    color:#FFBF00;
    border-radius:0;
    text-decoration:none;
    font-size:16px;
    font-weight:800;}
.site-nav-global .nav-links > a:not(.active):not(.section-current):not([data-nav="home"]):not([data-nav="contact"]):hover,
.site-nav-global .nav-links > a:not(.active):not(.section-current):not([data-nav="home"]):not([data-nav="contact"]):focus-visible{background:transparent;
    color:#FFFFFF;
    border-radius:0;
    border-bottom:0;
    text-decoration:underline;
    text-decoration-color:#FFBF00;
    text-decoration-thickness:4px;
    box-shadow:none;}
.site-nav-global .nav-links > a[data-nav="home"]:hover,
.site-nav-global .nav-links > a[data-nav="home"]:focus-visible,
.site-nav-global .nav-links > a[data-nav="contact"]:hover,
.site-nav-global .nav-links > a[data-nav="contact"]:focus-visible{background:transparent;
    color:#FFBF00;
    border-radius:0;
    text-decoration:underline;
    text-decoration-color:#FFBF00;
    text-decoration-thickness:4px;
    box-shadow:none;}
.site-nav-global .nav-links > .nav-divider{display: none;}}
@media (max-width: 700px){:root{--site-header-height: 78px;
  --madhi-scroll-track-width: 6.5px;
  --madhi-scroll-thumb-width: 3px;
  --madhi-scroll-thumb-height: 15.5vh;
  --madhi-scroll-thumb-min-height: 45px;
  --madhi-scroll-thumb-max-height: 115px;
  --madhi-scroll-thumb-offset: 1.75px;
  --mobile-brand-width: min(48.15vw, calc(100svh * 0.2295));
  --mobile-section-gap: 100px;
  --mobile-section-separation: 126px;
  --mobile-feature-row-separation: 300px;}
nav.site-nav-global{padding-inline: 10px;}
.site-nav-global .logo, .site-nav-global .logo a{width: 192px;}
.site-nav-global .logo img{width: 186px;
    max-height: 70px;}
.site-nav-global .nav-toggle{width:42px;
    height:42px;}
.site-nav-global .nav-links{left: -10px;
    right: -10px;
    padding-left: 10px;
    padding-right: 26px;
    align-items:flex-end;}
html[data-page="home"] .site-nav-global{background:transparent;
    border-bottom:0;}
html[data-page="home"] .site-nav-global::after{display:none;}
html[data-page="home"] .site-nav-global .nav-inner{justify-content:flex-end;}
html[data-page="home"] .site-nav-global .logo{display:none;}
html[data-page="home"] .site-nav-global .nav-toggle{position:absolute;
    top:6px;
    right:10px;
    z-index:1;
    color:#FFFFFF;
    opacity:1;
    animation:none;
    transition:color .16s ease;}
html[data-page="home"] .site-nav-global .nav-toggle:hover,
html[data-page="home"] .site-nav-global .nav-toggle:focus-visible{color:#FFBF00;opacity:1;animation:none;}
html[data-page="home"] .site-nav-global .nav-toggle span{display:none;}
html[data-page="home"] .site-nav-global .nav-toggle::before,
html[data-page="home"] .site-nav-global .nav-toggle::after{content:"";
    position:absolute;
    left:5px;
    width:32px;
    height:2px;
    background:currentColor;
    transform-origin:center;
    transition:transform .22s ease, opacity .18s ease, box-shadow .18s ease, top .22s ease, left .22s ease, width .22s ease;}
html[data-page="home"] .site-nav-global .nav-toggle::before{top:clamp(5.5px,1.65vw,7px);
    box-shadow:
      0 clamp(6.3px,1.85vw,7.6px) 0 currentColor,
      0 clamp(12.6px,3.7vw,15.2px) 0 currentColor,
      0 clamp(18.9px,5.55vw,22.8px) 0 currentColor,
      0 clamp(25.2px,7.4vw,30.4px) 0 currentColor;}
html[data-page="home"] .site-nav-global .nav-toggle::after{top:20px;
    opacity:0;}
html[data-page="home"] .site-nav-global.mobile-open .nav-toggle{opacity:1;animation:none;}
html[data-page="home"] .site-nav-global.mobile-open .nav-toggle::before{top:20px;
    left:8px;
    width:26px;
    box-shadow:none;
    transform:rotate(45deg);}
html[data-page="home"] .site-nav-global.mobile-open .nav-toggle::after{left:8px;
    width:26px;
    opacity:1;
    transform:rotate(-45deg);}}
@media (max-width:700px){
  html[data-page="home"] .about-madhi-viewport{
    min-height:0;
    padding:var(--mobile-section-separation) 0 27px;
  }
  html[data-page="home"] .about-madhi-title{
    margin-bottom:10px !important;
    color:#FFBF00 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }
  html[data-page="home"] .about-madhi-byline{font-size:15px;line-height:1.45;}
}

@media (max-width:700px){
  /* Mobile homepage — single editorial flow inspired by high-end studio portfolios. */
  html[data-page="home"],html[data-page="home"] body{scroll-snap-type:none;}
  html[data-page="home"] :is(.about-madhi-viewport,.services-viewport,.work-section,.studio-info-viewport,.contact-form-viewport,#contact-message){scroll-snap-align:none;scroll-snap-stop:normal;}
  html[data-page="home"] .container{width:calc(100% - 32px) !important;max-width:520px !important;margin-inline:auto !important;padding-inline:0 !important;}

  /* Services: title → concise scope → featured work → action. */
  html[data-page="home"] .services-viewport{padding:var(--mobile-section-separation) 0 27px !important;}
  html[data-page="home"] .mobile-home-byline{display:block;margin:0 0 14px !important;color:#FFFFFF;font-family:"Inter",Arial,sans-serif;font-size:15px;font-weight:400;line-height:1.35;text-align:left;text-wrap:pretty;}
  html[data-page="home"] .services-title{margin:0 0 10px !important;color:#FFBF00 !important;font-size:15.6px !important;font-family:"Inter",Arial,sans-serif !important;font-weight:600 !important;line-height:1.45 !important;letter-spacing:0 !important;text-transform:none !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
  html[data-page="home"] .services-byline{max-width:36rem;margin:0 0 32px !important;font-size:15.6px !important;line-height:1.45;}
  html[data-page="home"] .desktop-only-service{display:block !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-grid{display:block !important;}
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion{display:flex !important;flex-direction:column !important;gap:0 !important;width:92% !important;margin:0 auto 22px !important;}
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded{margin-bottom:var(--mobile-section-gap) !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-card{order:2 !important;width:100% !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .sitemap-card{margin-top:10px !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-card-content{height:auto !important;min-height:0 !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-card-top,
  html[data-page="home"] body.mobile-service-flow #services .sitemap-main-link{display:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-service-copy{display:flex !important;justify-content:flex-start !important;width:100% !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-summary{display:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-block{margin:0 !important;padding:0 !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-label{display:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:6px !important;width:fit-content !important;margin:0 !important;padding:0 0 0 1.1em !important;list-style:disc outside !important;color:#FFFFFF !important;font-size:15.6px !important;font-style:normal !important;font-weight:400 !important;line-height:1.45 !important;text-align:left !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li{margin:0 !important;padding:0 !important;display:list-item !important;}
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li::marker{color:currentColor !important;font-size:1em !important;}

  /* Existing work is reused rather than duplicated: one dominant visual per service. */
  html[data-page="home"] body.mobile-service-flow #services .work-section{order:1 !important;width:100% !important;padding:0 !important;margin:0 !important;background:transparent !important;}
  html[data-page="home"] body.mobile-service-flow #services .work-section .container{display:flex !important;flex-direction:column !important;width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;}
  html[data-page="home"] body.mobile-service-flow #services .work-section .landing-indexed-heading{order:1 !important;display:grid !important;grid-template-columns:minmax(0,1fr) 36px !important;align-items:center !important;column-gap:8px !important;width:100% !important;margin:0 !important;padding:0 0 2px !important;background:transparent !important;transform:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .work-section .landing-section-number{display:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .work-section .landing-indexed-heading .section-title{grid-column:1 !important;grid-row:1 !important;min-height:0 !important;margin:0 !important;font-family:"Inter",Arial,sans-serif !important;font-size:15.6px !important;font-style:normal !important;font-weight:600 !important;line-height:1.35 !important;letter-spacing:0 !important;text-align:left !important;color:#FFFFFF !important;background:transparent !important;white-space:normal !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .work-section .dog-ear,
  html[data-page="home"] body.mobile-service-flow #services .work-section .landing-feature-info .caption,
  html[data-page="home"] body.mobile-service-flow #services .work-section .landing-feature-info h2{display:none !important;}
  /* The original Featured Works divider is one row: label left, counter right. */
  html[data-page="home"] body.mobile-service-flow #services .mobile-feature-label:has(.mobile-feature-navigation){
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    text-align:left !important;
  }
  html[data-page="home"] #services .mobile-feature-label-text{
    display:inline-block;
    flex:0 1 auto;
    min-width:0;
    font:inherit;
    color:inherit;
  }
  html[data-page="home"] body.mobile-service-flow #services .work-section .feature-layout{order:3 !important;display:flex !important;flex-direction:column !important;margin:0 !important;padding-top:10px !important;}
  html[data-page="home"] body.mobile-service-flow #services .work-section .feature-card{order:1 !important;width:100% !important;max-width:none !important;height:auto !important;aspect-ratio:4/3 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important;}
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .landing-airport-network-card{display:block !important;width:100% !important;height:88svh !important;min-height:0 !important;max-height:none !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .landing-runway-inspection-card{display:block !important;height:64svh !important;min-height:0 !important;max-height:590px !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .landing-runway-inspection-frame{display:block !important;width:100% !important;height:100% !important;border:0 !important;}
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .desktop-ui-feature-copy{display:none !important;}
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .mobile-ui-feature-copy{display:block !important;}
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info{display:contents !important;}
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info p,
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info .feature-description,
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info .motion-description{order:3 !important;margin:10px 0 0 !important;padding-inline:0 !important;color:#FFFFFF !important;font-size:15.6px !important;font-style:normal !important;font-weight:400 !important;line-height:1.45 !important;text-align:left !important;}
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info > p:first-of-type::before,
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info .feature-description::before,
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-info .motion-description::before{content:none !important;}
  html[data-page="home"] body.mobile-service-flow #services .mobile-feature-label{display:block !important;order:1 !important;margin:0 0 10px !important;padding-inline:0 !important;color:#FFBF00 !important;font-size:15.6px !important;font-style:normal !important;font-weight:700 !important;line-height:1.45 !important;letter-spacing:0 !important;text-transform:none !important;text-align:center !important;}
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-explore{order:4 !important;display:none !important;width:fit-content !important;max-width:100% !important;min-height:0 !important;margin:16px auto 0 !important;padding:7px 11px !important;align-items:center !important;justify-content:center !important;border:1px solid #FFFFFF !important;border-radius:0 !important;background:#20242C !important;color:#FFFFFF !important;font-size:15.6px !important;font-weight:400 !important;line-height:1.45 !important;}
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-explore:hover,
  html[data-page="home"] body.mobile-service-flow #services .landing-feature-explore:focus-visible{background:#FFBF00 !important;color:#000000 !important;border-color:transparent !important;}
  html[data-page="home"] body.mobile-service-flow #services .mobile-orientation-hint{display:block;margin:0 0 10px;color:#FFBF00;font-size:12px;line-height:1.3;}
  html[data-page="home"] body.mobile-service-flow #services .service-accordion-copy[hidden],
  html[data-page="home"] body.mobile-service-flow #services .service-accordion-feature[hidden]{display:none !important;}
  html[data-page="home"] #motion-graphics .feature-card{height:auto !important;min-height:0 !important;aspect-ratio:594 / 500 !important;overflow:visible !important;}
  html[data-page="home"] #motion-graphics .landing-turntable-artwork{display:flex !important;position:static !important;inset:auto !important;width:100% !important;height:auto !important;aspect-ratio:594 / 500 !important;margin:0 !important;padding:0 !important;align-items:center !important;justify-content:center !important;background:transparent !important;overflow:visible !important;}
  html[data-page="home"] #motion-graphics .landing-turntable-inline{width:100% !important;max-width:100% !important;height:100% !important;margin:0 auto !important;}
  html[data-page="home"] #motion-graphics .landing-turntable-inline > svg{width:100% !important;height:100% !important;display:block !important;transform:none !important;}
  html[data-page="home"] #motion-graphics .landing-mobile-camera-feature{display:none !important;}
  html[data-page="home"] #motion-graphics .motion-description-turntable{display:block !important;}
  html[data-page="home"] #motion-graphics .motion-description-camera{display:none !important;}
  html[data-page="home"] #branding-logos .feature-card{height:auto !important;min-height:0 !important;aspect-ratio:auto !important;overflow:visible !important;}
  html[data-page="home"] #branding-logos .branding-system-collage.logo-system-three{display:flex !important;flex-direction:column !important;align-items:stretch !important;width:100% !important;height:auto !important;min-height:0 !important;gap:2.25px !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;transform:none !important;}
  html[data-page="home"] #branding-logos .branding-system-collage.logo-system-three .branding-system-item{position:static !important;display:block !important;flex:0 0 auto !important;width:100% !important;height:auto !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;}
  html[data-page="home"] #branding-logos .branding-system-collage.logo-system-three .branding-system-item picture{display:block !important;width:100% !important;height:auto !important;}
  html[data-page="home"] #branding-logos .branding-system-collage.logo-system-three .branding-system-item img{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;max-height:none !important;margin:0 auto !important;transform:none !important;object-fit:contain !important;}
  html[data-page="home"] #branding-logos .landing-feature-info .feature-description{margin-top:4px !important;}
  html[data-page="home"] #branding-logos .landing-feature-explore{margin-top:16px !important;}
  html[data-page="home"] #branding-logos .feature-card.branding-system-feature-card{display:none !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card{display:block !important;order:2 !important;width:100% !important;max-width:520px !important;margin:0 auto !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-feature-card{width:100% !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-collage.logo-system-three{display:grid !important;grid-template-columns:1fr !important;grid-template-rows:repeat(3,auto) !important;width:100% !important;max-width:100% !important;height:auto !important;gap:10px !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;overflow:hidden !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item{position:static !important;display:flex !important;align-items:center !important;justify-content:flex-start !important;width:100% !important;height:auto !important;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;overflow:visible !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-label{display:none !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item picture{display:flex !important;justify-content:flex-start !important;width:100% !important;height:auto !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item img{display:block !important;width:100% !important;max-width:100% !important;height:auto !important;max-height:none !important;margin:0 !important;object-fit:contain !important;object-position:left center !important;transform:none !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .portfolio-work-caption{width:100% !important;margin:10px 0 0 !important;text-align:left !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .portfolio-work-heading,
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .portfolio-work-byline{margin:0 !important;font-family:"Inter",Arial,sans-serif !important;font-size:15.6px !important;font-style:normal !important;font-weight:400 !important;line-height:1.45 !important;text-align:left !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .portfolio-work-heading{color:#FFBF00 !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .portfolio-work-byline{margin-top:4px !important;color:#FFFFFF !important;}
  html[data-page="home"] #branding-logos .landing-feature-info .feature-description{display:none !important;}
  html[data-page="home"] #ui-icons .landing-airport-network-wrap,
  html[data-page="home"] #web-design .landing-web-preview-wrap{width:100% !important;height:100% !important;aspect-ratio:auto !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;}
  html[data-page="home"] #ui-icons .landing-airport-network-frame{width:100% !important;height:100% !important;}
  html[data-page="home"] #web-design .landing-web-preview-shell{width:100% !important;height:100% !important;border-radius:0 !important;box-shadow:none !important;}
  html[data-page="home"] #web-design .feature-layout{position:relative !important;}
  html[data-page="home"] #web-design .feature-card{position:relative !important;width:100% !important;height:clamp(720px,205vw,920px) !important;min-height:720px !important;max-height:920px !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html[data-page="home"] #web-design .landing-web-preview-wrap,
  html[data-page="home"] #web-design .landing-web-preview-shell{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;}
  html[data-page="home"] #web-design .landing-web-preview{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;transform:none !important;}
  html[data-page="home"] #web-design .landing-feature-info .landing-preview-popout{display:none !important;}
  html[data-page="home"] #web-design .feature-card .landing-preview-popout-mobile{display:grid !important;position:absolute !important;top:12px !important;right:12px !important;z-index:30 !important;margin:0 !important;}

  /* Photography feature uses the photo's native 4:3 canvas with the desktop-style title overlay. */
  html[data-page="home"] #photography .feature-layout{width:100% !important;align-items:stretch !important;}
  html[data-page="home"] #photography .photography-feature-card{position:relative !important;display:block !important;width:100% !important;max-width:100% !important;min-height:240px !important;height:auto !important;aspect-ratio:4 / 3 !important;margin:0 !important;overflow:hidden !important;}
  html[data-page="home"] #photography .photography-feature-card > img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;padding:0 !important;transform:none !important;object-fit:cover !important;object-position:center !important;}
  html[data-page="home"] #photography .photography-feature-title{display:block !important;position:absolute !important;top:auto !important;bottom:8px !important;left:50% !important;z-index:2 !important;width:calc(100% - 8px) !important;margin:0 !important;transform:translateX(-50%) !important;color:#FFFFFF !important;font-family:"Allura",cursive !important;font-size:clamp(48px,13vw,62px) !important;font-style:normal !important;font-weight:400 !important;line-height:1.08 !important;letter-spacing:0 !important;text-align:center !important;white-space:nowrap !important;text-shadow:none !important;}
  html[data-page="home"] #photography .photography-feature-title-emphasis{font:inherit !important;text-decoration:none !important;}

  /* Copywriting has no artwork yet, so keep the coming-soon line directly under Featured Work. */
  html[data-page="home"] #copywriting .mobile-feature-label{margin-bottom:0 !important;}
  html[data-page="home"] #copywriting .copywriting-feature-card{height:auto !important;min-height:0 !important;aspect-ratio:auto !important;overflow:visible !important;}
  html[data-page="home"] #copywriting .copywriting-feature-card > p{position:static !important;margin:0 !important;padding:0 !important;text-align:left !important;}
  html[data-page="home"] #copywriting .feature-layout{gap:0 !important;}

  /* Process and client-fit sections become mobile disclosures. */
  html[data-page="home"] :is(.approach-viewport,.client-viewport){padding:var(--mobile-section-gap) 0 0 !important;margin:0 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-container{width:calc(100% - 32px) !important;max-width:520px !important;margin-inline:auto !important;padding:0 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-title{margin:0 0 10px !important;padding-left:0 !important;box-sizing:border-box !important;color:#FFBF00 !important;font-size:15.6px !important;font-family:"Inter",Arial,sans-serif !important;font-weight:600 !important;line-height:1.45 !important;letter-spacing:0 !important;text-transform:none !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-byline{display:block !important;margin:0 0 32px !important;color:#FFFFFF !important;font-size:15.6px !important;line-height:1.45 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-grid{display:grid !important;grid-template-columns:1fr !important;gap:22px !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card{position:relative !important;width:100% !important;max-width:none !important;min-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;overflow:visible !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card.is-expanded{padding:0 !important;border-radius:0 !important;background:transparent !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card-content{display:block !important;height:auto !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card h3{min-height:0 !important;margin:0 0 6px !important;padding:0 !important;font-family:"Inter",Arial,sans-serif !important;font-size:15.6px !important;font-style:normal !important;font-weight:400 !important;line-height:1.45 !important;letter-spacing:0 !important;white-space:normal !important;text-align:left !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card p{margin:0 !important;padding:0 !important;color:#FFFFFF !important;font-size:15.6px !important;font-style:normal !important;font-weight:400 !important;line-height:1.45 !important;text-align:left !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-main,
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-detail{display:inline !important;margin:0 !important;font-family:"Inter",Arial,sans-serif !important;font-size:inherit !important;font-style:normal !important;line-height:inherit !important;letter-spacing:0 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-main{font-weight:700 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-detail{margin-left:.32em !important;font-style:normal !important;font-weight:400 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card h3,
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-main,
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-detail{font-family:"Inter",Arial,sans-serif !important;font-size:15.6px !important;font-style:normal !important;line-height:1.45 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card .studio-accordion-body{box-sizing:border-box !important;width:100% !important;max-height:none !important;margin:0 !important;padding:0 !important;overflow:visible !important;border:0 !important;border-radius:0 !important;background:transparent !important;color:#FFFFFF !important;font-size:15.6px !important;font-style:normal !important;font-weight:400 !important;line-height:1.45 !important;text-align:left !important;opacity:1 !important;transform:none !important;pointer-events:auto !important;transition:none !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card.is-expanded .studio-accordion-body{max-height:none !important;margin:0 !important;padding:0 !important;opacity:1 !important;transform:none !important;pointer-events:auto !important;}
  html[data-page="home"] .approach-viewport .studio-info-card:not(:last-child)::after{display:none !important;}

  html[data-page="home"] .mobile-disclosure-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0;padding:0;border:0;background:transparent;color:#FFFFFF;cursor:pointer;opacity:1;transition:color .2s ease, opacity .2s ease, transform .24s ease;}
  html[data-page="home"] .mobile-disclosure-toggle:hover,
  html[data-page="home"] .mobile-disclosure-toggle:focus-visible{color:#FFFFFF;opacity:1;outline:none;}
  html[data-page="home"] .mobile-disclosure-toggle svg{display:block;width:22px;height:22px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s ease;}
  html[data-page="home"] .mobile-disclosure-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  html[data-page="home"] body.mobile-service-flow #services .work-section .mobile-disclosure-toggle{grid-column:2 !important;grid-row:1 !important;justify-self:end !important;align-self:center !important;margin-right:0 !important;}
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .mobile-disclosure-toggle{color:#FFBF00 !important;}
  html[data-page="home"] body.mobile-service-flow #services .landing-indexed-heading:is(:hover,:focus-within) .section-title,
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .landing-indexed-heading .section-title{color:#FFBF00 !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card .mobile-disclosure-toggle{display:none !important;}
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-info-card.is-expanded .mobile-disclosure-toggle{display:none !important;}
  /* CTA: large typographic moment, one clear action. */
  html[data-page="home"] #contact-message{display:none !important;}
  html[data-page="home"] #contact-message .cta-static-message{width:100%;max-width:520px;margin:auto;text-align:left !important;}
  html[data-page="home"] #contact-message .cta-static-title{margin:0 0 22px !important;font-size:clamp(48px,14vw,72px) !important;line-height:.92 !important;letter-spacing:-.055em !important;text-align:left !important;}
  html[data-page="home"] #contact-message .cta-static-byline{margin:0 0 12px !important;font-size:15px !important;line-height:1.5 !important;text-align:left !important;}
  html[data-page="home"] #contact-message .cta-byline-line{display:inline !important;}
  html[data-page="home"] #contact-message .cta-contact-button{display:none !important;}

  /* Contact form: single-column, thumb-friendly, no compressed labels. */
  html[data-page="home"] .contact-form-viewport{display:flex !important;flex-direction:column !important;align-items:stretch !important;padding:16px 0 0 !important;margin:0 !important;scroll-margin-top:0 !important;}
  html[data-page="home"] .contact-form-container{width:calc(100% - 32px) !important;max-width:520px !important;margin-inline:auto !important;padding:0 !important;}
  html[data-page="home"] .contact-form-viewport .contact-content-grid{gap:12px !important;}
  html[data-page="home"] .contact-form-viewport .contact-brief-form .contact-form-grid > *{margin:0 !important;}
  html[data-page="home"] .contact-form-viewport .studio-info-title{margin:0 0 10px !important;color:#FFBF00 !important;font-size:15.6px !important;font-family:"Inter",Arial,sans-serif !important;font-weight:600 !important;line-height:1.45 !important;letter-spacing:0 !important;text-transform:uppercase !important;-webkit-text-stroke:0 !important;text-shadow:none !important;}
  html[data-page="home"] .contact-form-viewport .studio-info-title::after{content:none !important;display:none !important;}
  html[data-page="home"] .contact-brief-form{padding:0 !important;border-radius:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;}
  html[data-page="home"] .contact-form-grid{grid-template-columns:1fr !important;gap:12px !important;}
  html[data-page="home"] .contact-brief-form,
  html[data-page="home"] .contact-field,
  html[data-page="home"] .contact-input-shell{width:100% !important;margin-inline:auto !important;}
  html[data-page="home"] .contact-brief-form label.contact-field > .contact-field-label{display:none !important;}
  html[data-page="home"] .contact-input-shell :is(input,select,textarea){min-height:50px !important;font-size:16px !important;}
  html[data-page="home"] .contact-input-shell textarea{min-height:150px !important;}
  html[data-page="home"] .contact-form-actions{align-items:center !important;}
  html[data-page="home"] .contact-submit{display:inline-flex !important;width:fit-content !important;max-width:calc(100% - 24px) !important;min-height:46px !important;padding-left:22px !important;padding-right:22px !important;align-items:center !important;justify-content:center !important;}
  html[data-page="home"] .approach-viewport .studio-card-title-main,
  html[data-page="home"] .client-viewport .studio-card-title-main{color:#FFFFFF !important;}
  html[data-page="home"] .client-viewport .studio-card-punctuation{color:#FFFFFF !important;}
  html[data-page="home"] .approach-viewport .studio-card-title-detail,
  html[data-page="home"] .client-viewport .studio-card-title-detail{color:#FFFFFF !important;}
  html[data-page="home"] .contact-mobile-intro{display:block !important;margin:0 0 32px !important;padding-inline:0 !important;color:#FFFFFF;font-size:15.6px;line-height:1.45;text-align:left !important;font-family:"Inter",Arial,sans-serif;}
  html[data-page="home"] .contact-mobile-intro-line{display:block;}
  html[data-page="home"] .contact-mobile-intro-emphasis{font-style:normal;}
  html[data-page="home"] .contact-field-label{padding-inline-start:0 !important;}
  html[data-page="home"] :is(.contact-field input,.contact-field select,.contact-field textarea){border:1px solid #FFFFFF !important;border-radius:0 !important;}
  html[data-page="home"] :is(.contact-field input,.contact-field select,.contact-field textarea):is(:focus,:focus-visible){border-color:#FFBF00 !important;border-radius:0 !important;outline:none !important;}
  html[data-page="home"] .contact-input-shell:focus-within{border-radius:0 !important;}
  html[data-page="home"] .contact-attachment-field{position:relative !important;}
  html[data-page="home"] .contact-attachment-field > .contact-field-label{position:absolute !important;top:14px !important;left:0 !important;z-index:2 !important;width:100% !important;padding:0 18px !important;text-align:center !important;pointer-events:none;}
  html[data-page="home"] .contact-attachment-field .attachment-dropzone{padding:46px 18px 18px !important;}
  html[data-page="home"] .contact-input-shell :is(input,select,textarea),
  html[data-page="home"] .attachment-dropzone{display:block !important;width:100% !important;box-sizing:border-box !important;background:transparent !important;border:1px solid transparent !important;border-radius:0 !important;color:#FFFFFF !important;box-shadow:none !important;}
  html[data-page="home"] .contact-input-shell :is(input,select,textarea){caret-color:#FFFFFF !important;font-size:16px !important;}
  html[data-page="home"] .contact-input-shell textarea{padding-top:14px !important;white-space:pre-wrap;scrollbar-width:none !important;}
  html[data-page="home"] .contact-input-shell textarea::-webkit-scrollbar{display:none;width:0;height:0;}
  html[data-page="home"] .contact-input-shell :is(input,select,textarea)::placeholder,
  html[data-page="home"] .attachment-dropzone-copy,
  html[data-page="home"] .contact-message-prompt{color:rgba(255,255,255,.88) !important;font-size:14px !important;line-height:1.5 !important;}
  html[data-page="home"] .attachment-browse{font-size:inherit !important;line-height:inherit !important;}
  html[data-page="home"] .contact-input-shell :is(input,select,textarea):is(:focus,:focus-visible){background:transparent !important;border-color:#FFBF00 !important;border-radius:0 !important;color:#FFFFFF !important;box-shadow:none !important;outline:none !important;}
  html[data-page="home"] .attachment-dropzone:is(:focus,:focus-visible,:focus-within),
  html[data-page="home"] .attachment-dropzone.is-dragover{background:transparent !important;border-color:#FFBF00 !important;border-radius:0 !important;color:#FFFFFF !important;}
  html[data-page="home"] .attachment-dropzone:is(:focus,:focus-visible,:focus-within) :is(.attachment-inline-label,.attachment-dropzone-copy){opacity:.35;}
  html[data-page="home"] .contact-submit{background:#20242C !important;border:1px solid #FFFFFF !important;border-radius:0 !important;color:#FFFFFF !important;box-shadow:none !important;font-size:15.6px !important;font-weight:400 !important;}
  html[data-page="home"] .contact-submit:is(:hover,:focus-visible){background:#FFBF00 !important;border:1px solid transparent !important;border-radius:0 !important;color:#000000 !important;}
  html[data-page="home"] .contact-form-actions{display:flex !important;margin-top:16px !important;}
  html[data-page="home"] .contact-form-viewport .cta-footer{position:static !important;left:auto !important;right:auto !important;bottom:auto !important;width:100% !important;margin-top:calc(var(--mobile-feature-row-separation) / 2) !important;padding:0 16px 8px !important;align-self:stretch !important;}
  html[data-page="home"] .cta-footer .footer-inner{align-items:center !important;justify-content:center !important;padding:0 !important;}
  html[data-page="home"] .cta-footer .footer-main{width:100% !important;margin:0 !important;color:#FFFFFF !important;font-size:12.1px !important;text-align:center !important;}
  html[data-page="home"] .cta-footer .footer-craft{color:#FFBF00 !important;}

}
@media (max-width:700px) and (orientation:landscape){html[data-page="home"] .mobile-orientation-hint{display:none !important;} html[data-page="home"] body.mobile-service-flow #services #ui-icons .landing-runway-inspection-card, html[data-page="home"] body.mobile-service-flow #services #motion-graphics .feature-card{height:min(64svh,420px) !important;min-height:0 !important;aspect-ratio:auto !important;}}
html[data-page="home"] body{background: #000000;}
.mobile-feature-label{display:none;}
.landing-preview-popout-mobile{display:none !important;}
#branding-logos .mobile-aerowander-service-card{display:none;}
.mobile-branding-gallery,.mobile-branding-carousel{display:none;}
.mobile-service-gallery{display:contents;}
.mobile-feature-navigation{display:none;}
.mobile-service-swipe,.mobile-swipe-slide{display:contents;}
.mobile-swipe-caption,.mobile-only-swipe-slide{display:none;}
.mobile-home-byline,
.hero-title-mobile,
.mobile-brand-services{display:none;}
.hero-title-desktop{display:contents;}
.mobile-brand-watermark,
.mobile-hero-stage{display:none;}
@media (min-width:1101px){
  html[data-page="home"] .mobile-brand-watermark{
    display:flex;
    position:fixed;
    top:var(--site-header-height);
    left:0;
    z-index:60;
    width:clamp(148.5px,10.125vw,198px);
    height:calc(100svh - var(--site-header-height));
    align-items:flex-start;
    overflow:visible;
    opacity:1;
    pointer-events:auto;
    user-select:none;
    transition:opacity .2s ease;
    animation:madhiDesktopBrandArrival 3.4s ease-out 1;
  }
  html[data-page="home"] .mobile-brand-logo{
    display:block;
    width:100%;
    max-width:100%;
    height:calc(100% - 40px);
    max-height:100%;
    margin:20px 0;
    padding:0;
    object-fit:contain;
    object-position:left top;
    opacity:1;
    filter:brightness(0) invert(14.9%);
    animation:none;
    transition:filter .2s ease;
  }
  html[data-page="home"] .mobile-brand-watermark:hover{opacity:1;}
  html[data-page="home"] .mobile-brand-watermark:hover .mobile-brand-logo{filter:none;}
  html[data-page="home"] .mobile-brand-services{display:none;}
}
@keyframes madhiDesktopBrandArrival{
  0%{opacity:1;}
  24%{opacity:1;}
  100%{opacity:1;}
}
@media (min-width:1101px) and (prefers-reduced-motion:reduce){
  html[data-page="home"] .mobile-brand-watermark{animation:none;}
}
html[data-page="home"] #home.home-hero{position: relative;
  isolation: isolate;
  width: 100%;
  height: calc(100svh - var(--site-header-height));
  min-height: calc(100svh - var(--site-header-height));
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000000;
  scroll-snap-align: start;
  scroll-snap-stop: always;}
html[data-page="home"][data-theme="dark"] #home.home-hero::before{content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, calc((100svh - var(--site-header-height)) * 16 / 9));
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/hero/woodland-heron-reflection-hero.webp?v=20260918-v21");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(0.98) brightness(0.98);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.10) 1.5%,
    rgba(0,0,0,.26) 3%,
    rgba(0,0,0,.48) 4.5%,
    rgba(0,0,0,.70) 6.5%,
    rgba(0,0,0,.86) 8.5%,
    rgba(0,0,0,.96) 10%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.96) 90%,
    rgba(0,0,0,.86) 91.5%,
    rgba(0,0,0,.70) 93.5%,
    rgba(0,0,0,.48) 95.5%,
    rgba(0,0,0,.26) 97%,
    rgba(0,0,0,.10) 98.5%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.10) 1.5%,
    rgba(0,0,0,.26) 3%,
    rgba(0,0,0,.48) 4.5%,
    rgba(0,0,0,.70) 6.5%,
    rgba(0,0,0,.86) 8.5%,
    rgba(0,0,0,.96) 10%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.96) 90%,
    rgba(0,0,0,.86) 91.5%,
    rgba(0,0,0,.70) 93.5%,
    rgba(0,0,0,.48) 95.5%,
    rgba(0,0,0,.26) 97%,
    rgba(0,0,0,.10) 98.5%,
    transparent 100%
  );}
html[data-page="home"][data-theme="dark"] #home.home-hero::after{content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.90) 0%,
    rgba(0,5,2,.68) 5%,
    rgba(8,25,8,.40) 9%,
    rgba(35,61,20,.18) 13%,
    rgba(70,94,32,.06) 16%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(70,94,32,.06) 84%,
    rgba(35,61,20,.18) 87%,
    rgba(8,25,8,.40) 91%,
    rgba(0,5,2,.68) 95%,
    rgba(0,0,0,.90) 100%
  );}
html[data-page="home"] #home .home-hero-content{position: relative;
  z-index: 1;
  width: min(1320px, calc(100% - 56px));
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(22px, 3vw, 40px);
  text-align: center;}
html[data-page="home"] #home .home-hero-title{position: absolute;
  top: 13.2%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 44px);
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #FFFFFF;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(43.5456px, 4.04352vw, 73.0944px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.045em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.96), 0 0 24px rgba(0,0,0,.72);}
html[data-page="home"] #home .home-hero-title .hero-title-line{display:inline;background:transparent;padding:0;}
html[data-page="home"] #home .home-hero-byline{position: absolute;
  left: 50%;
  bottom: .625em;
  width: max-content;
  max-width: min(980px, calc(100% - 250px));
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  background: transparent;
  color: #FFFFFF;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(18.407813px, 1.245234vw, 23.821875px);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(0,0,0,.98), 0 0 20px rgba(0,0,0,.72);}
html[data-page="home"] #home .home-hero-byline .byline-line{display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0 .16em;
  background: transparent;}
html[data-page="home"] #home .home-hero-byline .byline-line + .byline-line{margin-top: 2px;}
@media (min-width:1101px){
  html[data-page="home"] #home .home-hero-byline{
    bottom:1.25em;
    font-size:clamp(24.3px,1.64376vw,31.4496px);
  }
}
@media (max-width: 1100px){html[data-page="home"] #home.home-hero{height: calc(100svh - var(--site-header-height));
    min-height: calc(100svh - var(--site-header-height));}
html[data-page="home"] #home .home-hero-content{width: min(100%, calc(100% - 28px));
    padding: 0 20px;}
html[data-page="home"] #home .home-hero-title{top:16.5%;
    font-size: clamp(36.8px, 5.6vw, 57.6px);
    line-height: .98;}
html[data-page="home"] #home .home-hero-byline{font-size: clamp(14.765625px, 1.96875vw, 18.703125px);}}
@media (max-width: 700px){
html[data-page="home"] #home.home-hero{scroll-snap-align:none;
    scroll-snap-stop:normal;
    min-height:calc(100svh - var(--site-header-height));}
html[data-page="home"][data-theme="dark"] #home.home-hero::before{content:none;}
html[data-page="home"] #home.home-hero::after{content:none;}
html[data-page="home"] .mobile-hero-stage{display:block;
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    background:#000000;}
html[data-page="home"] .mobile-hero-stage::before,
html[data-page="home"] .mobile-hero-stage::after{content:none;}
html[data-page="home"] .mobile-hero-image{position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:auto;
    opacity:0;
    filter:saturate(.98) brightness(.94) blur(.35px);
    transform:translate3d(0,-50%,0);
    transform-origin:center center;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
    will-change:opacity,filter;
    backface-visibility:hidden;
    animation:mobileHeroImageReveal 6.4s cubic-bezier(.22,.61,.36,1) 5.4s forwards;}
html[data-page="home"] .mobile-hero-curtain{position:absolute;
    inset:0;
    z-index:2;
    background:#000000;
    opacity:1;
    pointer-events:none;
    will-change:opacity;
    animation:mobileHeroCurtain 6.4s cubic-bezier(.22,.61,.36,1) 5.4s forwards;}
html[data-page="home"] .mobile-brand-watermark{display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:4;
    width:var(--mobile-brand-width);
    height:auto;
    opacity:1;
    filter:none;
    pointer-events:none;
    user-select:none;
    animation:mobileBrandIntroFade 5.6s cubic-bezier(.22,.61,.36,1) 5.4s forwards;}
html[data-page="home"] .mobile-brand-watermark::after{content:none;display:none;}
html[data-page="home"] .mobile-brand-logo{display:block;
    width:100%;
    height:auto;
    max-width:none;
    margin:0;
    padding:0;
    opacity:1;
    filter:none;
    animation:none;}
html[data-page="home"] .mobile-brand-services{display:flex;
    position:absolute;
    right:calc(var(--mobile-brand-width) - 100vw + 8px);
    bottom:5.7%;
    width:max-content;
    flex-direction:column;
    align-items:flex-end;
    margin:0;
    padding:0;
    color:#FFFFFF;
    font-family:"Inter",Arial,sans-serif;
    font-size:clamp(15px,4.7vw,17px);
    font-weight:400;
    line-height:1.38;
    text-align:right;
    opacity:1;
    text-shadow:0 1px 5px rgba(0,0,0,.9);
    animation:mobileBrandServicesFade 4.8s ease 1s forwards;}
html[data-page="home"] .mobile-brand-services span{display:block;white-space:nowrap;}
html[data-page="home"].skip-mobile-hero-intro .mobile-brand-watermark:not(.is-page-watermark){opacity:0;animation:none;}
html[data-page="home"].skip-mobile-hero-intro .mobile-brand-logo{animation:none;transition:none;}
html[data-page="home"].skip-mobile-hero-intro .mobile-brand-services{opacity:0;animation:none;}
html[data-page="home"].skip-mobile-hero-intro .mobile-hero-image{opacity:1;filter:saturate(.98) brightness(.98) blur(0);transform:translate3d(0,-50%,0);animation:none;}
html[data-page="home"].skip-mobile-hero-intro .mobile-hero-curtain{display:none;animation:none;}
html[data-page="home"].skip-mobile-hero-intro #home .home-hero-title,
html[data-page="home"].skip-mobile-hero-intro #home .home-hero-byline{opacity:1;transform:translateY(0);animation:none;}
html[data-page="home"] .mobile-brand-watermark.is-page-watermark{opacity:1;
    filter:none;
    animation:none;}
html[data-page="home"] .mobile-brand-watermark.is-page-watermark .mobile-brand-logo{filter:brightness(0) invert(14.9%);}
html[data-page="home"] main > section > :not(.mobile-hero-stage){position:relative;
    z-index:5;}
html[data-page="home"] #home .home-hero-content{z-index:5;
    width:100%;
    height:100%;
    padding:0 18px;}
html[data-page="home"] #home .home-hero-title{top:3.5%;
    left:18px;
    width:calc(100% - 36px);
    max-width:none;
    transform:none;
    opacity:0;
    font-family:"Bevan",Georgia,serif;
    font-size:clamp(90px,25vw,105px);
    font-weight:400;
    color:#09E84E;
    line-height:1;
    letter-spacing:0;
    text-align:center;
    white-space:nowrap;
    animation:mobileHeroCopyIn 1.8s ease 11.2s forwards;}
html[data-page="home"] #home .home-hero-title .hero-title-desktop{display:none;}
html[data-page="home"] #home .home-hero-title .hero-title-mobile{display:block;width:100%;margin:0;padding:0;font-family:"Bevan",Georgia,serif;line-height:1;background:transparent;}
html[data-page="home"] #home .home-hero-title .hero-title-period{font-size:136.6875%;line-height:1;}
html[data-page="home"] #home .home-hero-byline{display:none;}
html[data-page="home"] #home .hero-photo-credit{display:none;}
}
@keyframes mobileBrandFade{
  from{opacity:1;}
  to{opacity:.1216;}
}
@keyframes mobileBrandIntroFade{
  0%,10%{opacity:1;}
  55%{opacity:.48;}
  100%{opacity:0;}
}
@keyframes mobileBrandServicesFade{
  from{opacity:1;}
  to{opacity:0;}
}
@keyframes mobileHeroCurtain{
  0%,20%{opacity:1;}
  44%{opacity:.94;}
  68%{opacity:.58;}
  86%{opacity:.18;}
  100%{opacity:0;}
}
@keyframes mobileHeroImageReveal{
  0%,10%{opacity:0;filter:saturate(.98) brightness(.92) blur(.35px);transform:translate3d(0,-50%,0);}
  24%{opacity:.12;filter:saturate(.98) brightness(.93) blur(.28px);transform:translate3d(0,-50%,0);}
  42%{opacity:.42;filter:saturate(.98) brightness(.95) blur(.18px);transform:translate3d(0,-50%,0);}
  60%{opacity:.72;filter:saturate(.98) brightness(.97) blur(.1px);transform:translate3d(0,-50%,0);}
  76%{opacity:.93;filter:saturate(.98) brightness(.98) blur(.03px);transform:translate3d(0,-50%,0);}
  84%,100%{opacity:1;filter:saturate(.98) brightness(.98) blur(0);transform:translate3d(0,-50%,0);}
}
@keyframes mobileHeroCaptionReveal{
  0%,10%{opacity:0;}
  24%{opacity:.12;}
  42%{opacity:.42;}
  60%{opacity:.72;}
  76%{opacity:.93;}
  84%,100%{opacity:1;}
}
@keyframes mobileHeroCopyIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  html[data-page="home"] .mobile-brand-watermark::after{display:none;}
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark){opacity:0;animation:none;}
  html[data-page="home"] .mobile-brand-logo{opacity:1;animation:none;}
  html[data-page="home"] .mobile-brand-services{opacity:0;animation:none;}
  html[data-page="home"] .site-nav-global .nav-toggle{opacity:1;animation:none;}
  html[data-page="home"] .mobile-hero-image{opacity:1;filter:saturate(.98) brightness(.98);transform:translate3d(0,-50%,0);animation:none;}
  html[data-page="home"] .mobile-hero-curtain{display:none;}
  html[data-page="home"] #home .home-hero-title,
  html[data-page="home"] #home .home-hero-byline{opacity:1;animation:none;}
}
html[data-page="home"] #home .hero-photo-credit{position:absolute;
  left:auto;
  right:calc(var(--madhi-scroll-track-width) + 12px);
  bottom:8px;
  z-index:2;
  margin:0;
  color:#5F5F5F;
  font-family:"Inter",Arial,sans-serif;
  font-size:14.4375px;
  font-style:italic;
  font-weight:400;
  line-height:1.35;
  text-align:right;
  text-shadow:none;
  pointer-events:none;}
html[data-page="home"] #home .hero-photo-credit .photo-credit-label{font-style:normal;}
@media (max-width:700px){html[data-page="home"] #home .hero-photo-credit{display:block;
    left:auto;
    right:16px;
    bottom:22px;
    width:calc(100vw - 32px);
    max-width:none;
    margin:0;
    color:transparent;
    font-size:0;
    line-height:0;
    text-shadow:none;
    opacity:0;
    pointer-events:none;
    animation:mobileHeroCaptionReveal 1.2s ease 11.1s forwards;}
html[data-page="home"] #home .hero-photo-credit::before{content:"February 10, 2025\A Philadelphia Museum of Art\A On the night of Eagles' Super Bowl LIX victory";
    display:block;
    width:100%;
    white-space:pre;
    color:#8da38f;
    font-family:"Inter",Arial,sans-serif;
    font-size:18px;
    font-style:italic;
    font-weight:400;
    line-height:1.35;
    letter-spacing:.01em;
    text-align:right;
    text-shadow:0 1px 5px rgba(0,0,0,.6);}}




/* Shared Madhi text rhythm and action controls — same visual system as work captions / Photography controls. */
html[data-page="home"] :is(
  #services .services-byline,
  .work-section .landing-feature-info > p,
  .work-section .feature-description,
  .work-section .motion-description,
  .studio-info-byline,
  .contact-desktop-intro,
  .contact-mobile-intro,
  .copywriting-feature-card > p
){
  font-family:"Inter",Arial,sans-serif !important;
  font-size:15.6px !important;
  font-style:normal !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
}
html[data-page="home"] .studio-info-byline em{font-style:normal !important;}
html[data-page="home"] :is(.contact-desktop-intro-emphasis,.contact-mobile-intro-emphasis){
  font-style:normal !important;
  font-weight:400 !important;
}
@media (min-width:701px){
  html[data-page="home"] #services
  .desktop-service-panel[data-service-panel="copywriting"]
  .copywriting-feature-card > p{
    color:#FFFFFF !important;
    font-size:24px !important;
  }
}

html[data-page="home"] :is(
  .btn.section-action,
  .landing-feature-explore,
  #services .sitemap-main-link,
  #services .desktop-service-explore,
  .contact-submit,
  .cta-contact-button
){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:fit-content;
  min-height:0 !important;
  padding:7px 11px !important;
  border:1px solid #FFFFFF !important;
  border-radius:0 !important;
  background:#20242C !important;
  color:#FFFFFF !important;
  box-shadow:none !important;
  font-family:"Inter",Arial,sans-serif !important;
  font-size:15.6px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  text-align:center !important;
  text-decoration:none !important;
  animation:none !important;
}
html[data-page="home"] :is(
  .btn.section-action,
  .landing-feature-explore,
  #services .sitemap-main-link,
  #services .desktop-service-explore,
  .contact-submit,
  .cta-contact-button
):is(:hover,:focus-visible){
  background:#FFBF00 !important;
  color:#000000 !important;
  border-color:transparent !important;
  font-weight:400 !important;
}

/* Keep feature-page title/byline positioning consistent where home embeds a real work example. */
html[data-page="home"] .landing-feature-info{
  align-self:start !important;
}

/* 2026-09-29 requested layout polish: keep contact as its own viewport and normalize tile rhythm. */
@media (min-width:1101px){
  html[data-page="home"] .studio-summary-viewport{
    grid-template-rows:repeat(2,minmax(0,1fr));
    padding:26px 0 10px;
  }

  html[data-page="home"] .contact-form-viewport{
    position:relative;
    height:calc(100svh - var(--site-header-height)) !important;
    min-height:calc(100svh - var(--site-header-height)) !important;
    padding:26px 0 58px !important;
    box-sizing:border-box;
    overflow:hidden;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  html[data-page="home"] .contact-form-viewport .contact-form-container{
    height:100%;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:auto auto minmax(0,1fr) !important;
    column-gap:14px !important;
    row-gap:8px !important;
    align-items:start;
  }

  html[data-page="home"] .contact-form-viewport .studio-info-title{
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 !important;
  }

  html[data-page="home"] .contact-form-viewport .contact-desktop-intro{
    display:block;
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    max-width:none !important;
  }

  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    grid-column:2 / 5 !important;
  }

  html[data-page="home"] .contact-form-viewport .contact-content-grid-form-only,
  html[data-page="home"] .contact-form-viewport .contact-content-grid.contact-content-grid-form-only{
    grid-column:2 / 5 !important;
    grid-row:2 / span 2 !important;
    width:100% !important;
    height:auto;
    margin-top:43.5px !important;
    align-self:start;
  }

  html[data-page="home"] .contact-form-viewport .contact-content-grid-form-only .contact-brief-form{
    width:100% !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:24px 30px 12px !important;
    border-radius:14px !important;
    overflow:hidden;
    box-sizing:border-box;
  }

  html[data-page="home"] .contact-form-viewport .contact-form-grid{gap:10px 16px !important;}
  html[data-page="home"] .contact-form-viewport .contact-input-shell :is(input,select){
    height:42px !important;
    font-size:15.5px !important;
  }

  /* Objective and attachment fields are three times the previous desktop height. */
  html[data-page="home"] .contact-form-viewport .contact-field-message .contact-input-shell,
  html[data-page="home"] .contact-form-viewport .contact-field-message textarea,
  html[data-page="home"] .contact-form-viewport .contact-attachment-field .attachment-dropzone{
    min-height:238px !important;
    height:238px !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-field-message textarea{
    border-radius:0 !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-message-prompt{
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:22px !important;
    color:#FFFFFF !important;
    text-align:center !important;
    font-size:15.5px !important;
    line-height:1.35 !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-message-prompt-title{font-weight:400 !important;}
  html[data-page="home"] .contact-form-viewport .contact-attachment-field .attachment-dropzone{
    padding:22px !important;
    border:1px solid transparent !important;
    border-radius:0 !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-attachment-field .attachment-dropzone:is(:hover,:focus,:focus-visible,:focus-within),
  html[data-page="home"] .contact-form-viewport .contact-attachment-field .attachment-dropzone.is-dragover{
    border-color:#FFBF00 !important;
  }
  html[data-page="home"] .contact-form-viewport .attachment-dropzone-center{height:100% !important;gap:12px !important;}
  html[data-page="home"] .contact-form-viewport .attachment-inline-label{margin:0 !important;text-align:center !important;font-size:15.5px !important;line-height:1.25 !important;}
  html[data-page="home"] .contact-form-viewport .attachment-recommended-line{margin-top:2px !important;}
  html[data-page="home"] .contact-form-viewport .attachment-dropzone-copy{font-size:15.5px !important;line-height:1.35 !important;}
  html[data-page="home"] .contact-form-viewport .attachment-dropzone:is(:focus,:focus-visible,:focus-within) :is(.attachment-inline-label,.attachment-dropzone-copy){opacity:.35;}
  html[data-page="home"] .contact-form-viewport .attachment-browse{font-size:inherit !important;line-height:inherit !important;color:#FFBF00 !important;text-decoration:underline !important;text-underline-offset:.15em;}

  html[data-page="home"] .contact-form-viewport .contact-form-actions{margin-top:28px !important;gap:16px !important;}
  html[data-page="home"] .contact-form-viewport .contact-submit{
    min-height:0 !important;
    padding:7px 11px !important;
    border-radius:0 !important;
    font-weight:400 !important;
  }
  html[data-page="home"] .contact-form-viewport :is(
    .contact-input-shell input,
    .contact-input-shell select,
    .contact-input-shell textarea,
    .contact-message-prompt,
    .attachment-inline-label,
    .attachment-dropzone-copy,
    .attachment-browse,
    .contact-email-note-below-submit,
    .contact-email-note-below-submit a
  ){
    color:#C4C4C4 !important;
    font-family:inherit !important;
    font-size:15.5px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.35 !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-email-note-below-submit{margin:0 !important;text-align:center !important;}
  html[data-page="home"] .contact-form-viewport .contact-email-note-below-submit a{
    color:#FFBF00 !important;
    text-decoration:underline !important;
    text-underline-offset:.15em !important;
  }
  html[data-page="home"] .contact-form-viewport .cta-footer{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:58px !important;
    min-height:58px !important;
    padding:0 24px 6px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    box-sizing:border-box;
  }
  html[data-page="home"] .contact-form-viewport .cta-footer .footer-inner{
    width:100% !important;
    align-items:flex-end !important;
    justify-content:flex-end !important;
    gap:0 !important;
    text-align:right !important;
  }
  html[data-page="home"] .contact-form-viewport .cta-footer .footer-main{
    width:auto !important;
    margin:0 !important;
    text-align:right !important;
    opacity:.75 !important;
  }

  /* Align "How I Work" to the same left edge used by "What I Do". */
  html[data-page="home"] .approach-viewport .studio-info-title{
    justify-self:start;
    text-align:left;
  }

  /* Hero byline and photo credit: 10% smaller without moving either element. */
  html[data-page="home"] #home .home-hero-byline{
    font-size:clamp(19.683px,1.3314456vw,25.474176px);
  }
  html[data-page="home"] #home .hero-photo-credit{
    font-size:12.99375px;
  }

  /* Keep the four numbered section headings vertically balanced. */
  html[data-page="home"] .work-section .landing-indexed-heading{
    padding-top:8px !important;
    padding-bottom:8px !important;
    box-sizing:border-box;
  }


  html[data-page="home"] :is(.sitemap-card,.studio-info-card,.branding-system-collage,.branding-system-item,.landing-airport-network-wrap,.web-preview-stage,.web-preview-shell),
  html[data-page="home"] .work-section:not(#motion-graphics) .feature-card{
    border-radius:14px !important;
    overflow:hidden;
  }
  html[data-page="home"] .dog-ear{
    border-bottom-left-radius:14px !important;
  }

  /* How-I-Work arrows match the heading blue and sit in the newly opened inter-tile gap. */
  html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-grid-four{
    column-gap:28px !important;
  }
  html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card{
    border-radius:14px !important;
  }
  html[data-page="home"] .studio-summary-viewport .client-viewport .studio-info-card{
    border-radius:14px !important;
  }
  html[data-page="home"] .studio-summary-viewport .approach-viewport .studio-info-card:not(:last-child)::after{
    right:-10px !important;
    border-top-color:#FFBF00 !important;
    border-right-color:#FFBF00 !important;
  }
}

@media (max-width:1100px){
  html[data-header-style="alt"] .approach-viewport .studio-info-card:not(:last-child)::after{
    background:#FFBF00 !important;
  }
}

@media (min-width:1101px){
  html[data-page="home"] .studio-summary-viewport :is(.approach-viewport,.client-viewport) .studio-info-card-content{
    grid-template-rows:120px auto !important;
  }
}

/* 2026-10-02 — Home page mobile type-size normalization requested from the How I Work body-copy reference. */
@media (max-width:700px){
  html[data-page="home"] main > :not(#home) :is(
    h1,h2,h3,h4,h5,h6,p,span,a,button,li,label,input,select,textarea,option,em,strong,b,small,
    .mobile-feature-label,
    .portfolio-work-byline,
    .contact-message-prompt,
    .attachment-inline-label,
    .attachment-dropzone-copy,
    .contact-success-popup-card
  ):not(.cta-footer *){
    font-size:15.6px !important;
    font-style:normal !important;
  }
  html[data-page="home"] main > :not(#home) :is(input,textarea):not(.cta-footer *)::placeholder{
    font-size:15.6px !important;
    font-style:normal !important;
  }
}


/* =========================================================
   2026-10-03 — heading, footer and mobile content alignment
   ========================================================= */
html[data-page="home"][data-theme] :is(
  #services .services-title,
  .approach-viewport .studio-info-title,
  .client-viewport .studio-info-title,
  .contact-form-viewport .studio-info-title
){
  color:#FFBF00 !important;
  font-family:"Londrina Outline",sans-serif !important;
  font-size:64px !important;
  font-weight:400 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  -webkit-text-stroke:1.1px currentColor;
  text-shadow:0 0 7px rgba(255,191,0,.48),0 0 14px rgba(255,191,0,.18);
}
html[data-page="home"] #services .sitemap-number{
  -webkit-text-stroke:1.1px currentColor !important;
  text-shadow:0 0 7px rgba(255,191,0,.48),0 0 14px rgba(255,191,0,.18) !important;
}
html[data-page="home"] .cta-footer .footer-main,
html[data-page="home"] footer .footer-main{
  color:#FFFFFF !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html[data-page="home"] .cta-footer .footer-craft,
html[data-page="home"] footer .footer-craft{
  color:#FFBF00 !important;
}

@media (max-width:700px){
  html[data-page="home"][data-theme] :is(
    #services .services-title,
    .approach-viewport .studio-info-title,
    .client-viewport .studio-info-title,
    .contact-form-viewport .studio-info-title
  ){
    font-size:15.6px !important;
    line-height:1.45 !important;
  }

  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list{
    gap:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    font-style:normal !important;
    line-height:1.45 !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-style:normal !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li::marker{content:"" !important;}

  html[data-page="home"] body.mobile-service-flow #services .mobile-feature-label{
    font-family:"Inter",Arial,sans-serif !important;
    font-weight:400 !important;
    text-transform:none !important;
  }

  /* All service text begins at the same widest left edge; buttons retain their own centering. */
  html[data-page="home"] body.mobile-service-flow #services :is(
    .landing-indexed-heading,
    .sitemap-service-copy,
    .landing-feature-info p,
    .portfolio-work-caption,
    .portfolio-work-heading,
    .portfolio-work-byline
  ){
    margin-left:0 !important;
    padding-left:0 !important;
    text-align:left !important;
  }

  /* Use the Branding-page Aerowander treatment on the landing page, centered and fully visible. */
  html[data-page="home"] #branding-logos .feature-card.branding-system-feature-card{display:none !important;}
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card{
    display:block !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    overflow:hidden !important;
  }
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-collage.logo-system-three{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item,
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item picture{
    justify-content:center !important;
    overflow:hidden !important;
  }
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item img{
    width:86% !important;
    max-width:86% !important;
    height:auto !important;
    margin:0 auto !important;
    object-position:center !important;
  }
}

/* =========================================================
   2026-10-03 v6 — desktop/mobile refinement
   ========================================================= */

/* Desktop retains the established footer treatment. */
html[data-page="home"] :is(.cta-footer,footer) .footer-main{
  color:#FFFFFF !important;
  opacity:1 !important;
}
html[data-page="home"] :is(.cta-footer,footer) .footer-craft{color:#FFBF00 !important;}

/* Desktop: WanderPorts is the UI featured work; runway inspection remains mobile-only. */
@media (min-width:701px){
  html[data-page="home"] #ui-icons .landing-airport-network-card{display:block !important;}
  html[data-page="home"] #ui-icons .landing-runway-inspection-card{display:none !important;}

  /* Arrow / pop-out controls use the same white resting border as Submit. */
  html[data-page="home"] :is(.preview-popout,.landing-preview-popout,.popout-action){
    border:1px solid #FFFFFF !important;
  }
}

@media (min-width:1101px){
  /* Photography fills the desktop work area while retaining a deliberate bottom margin. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-card{
    height:min(86svh,700px) !important;
    max-height:calc(100svh - 46px) !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-card > img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center top !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-title{
    top:auto !important;
    bottom:clamp(9px,.875vw,15px) !important;
    width:calc(100% - 20px) !important;
    color:#D9E7F3 !important;
    font-family:"Allura",cursive !important;
    font-size:clamp(64px,5.9vw,108px) !important;
    font-weight:400 !important;
    letter-spacing:-0.01em !important;
    opacity:0.96 !important;
  }

  /* Contact: one invitation line immediately above the form, shifted down together. */
  html[data-page="home"] .contact-form-viewport .contact-form-container{
    grid-template-rows:auto auto minmax(0,1fr) !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-desktop-intro{display:none !important;}
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    display:block !important;
    grid-column:2 / 5 !important;
    grid-row:2 !important;
    align-self:end !important;
    justify-self:center !important;
    margin:1.05em 0 .28em !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-content-grid-form-only,
  html[data-page="home"] .contact-form-viewport .contact-content-grid.contact-content-grid-form-only{
    grid-column:2 / 5 !important;
    grid-row:3 !important;
    margin-top:0 !important;
  }
}

@media (max-width:700px){
  /* Mobile structural headings use the same compact Inter treatment as Define / Design. */
  html[data-page="home"][data-theme] :is(
    .about-madhi-title,
    #services .services-title,
    #services .work-section .landing-indexed-heading .section-title,
    .approach-viewport .studio-info-title,
    .client-viewport .studio-info-title,
    .contact-form-viewport .studio-info-title
  ){
    font-family:"Inter",Arial,sans-serif !important;
    font-size:19.5px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;
    color:#FFBF00 !important;
    text-transform:none !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }

  /* Keep mobile service titles and their revealed lists on the same left edge as the paragraph. */
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion{
    width:100% !important;
    margin:0 0 var(--mobile-section-gap) !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .sitemap-card{
    margin-top:4px !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-service-copy{
    width:100% !important;
    background:#000000 !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    list-style:none !important;
    font-style:normal !important;
    line-height:1.35 !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-style:normal !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li::marker{content:"" !important;}

  /* Deliberate separator before FEATURED WORK; label sits directly above the work. */
  html[data-page="home"] body.mobile-service-flow #services .mobile-feature-label{
    width:100% !important;
    margin:36px 0 18px !important;
    padding:8px 0 !important;
    border-top:1px solid #5d5d5d !important;
    border-bottom:1px solid #5d5d5d !important;
    color:#FFFFFF !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    text-transform:uppercase !important;
    text-align:center !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .work-section .feature-layout{
    padding-top:0 !important;
  }

  /* Runway Marking Inspection nearly fills a mobile viewport on the landing page. */
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .landing-runway-inspection-card{
    display:block !important;
    height:88svh !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
  }
  html[data-page="home"] body.mobile-service-flow #services #ui-icons .landing-runway-inspection-frame{
    width:100% !important;
    height:100% !important;
  }

  /* Landing turntable uses the same mobile proportions as the Motion Graphics page. */
  html[data-page="home"] #motion-graphics .feature-card,
  html[data-page="home"] #motion-graphics .landing-turntable-artwork,
  html[data-page="home"] #motion-graphics .landing-turntable-inline{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  html[data-page="home"] #motion-graphics .landing-turntable-inline > svg{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    aspect-ratio:526 / 500 !important;
    margin:0 0 -50px !important;
    transform:translateY(-50px) !important;
  }

  /* Use the Branding-page Aerowander geometry on the landing page. */
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    overflow:visible !important;
  }
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-collage.logo-system-three{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    gap:18px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item,
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item picture{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .branding-system-item img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  /* Mobile service work decks: swipe horizontally, one project per screen-width card. */
  html[data-page="home"] #services .mobile-service-gallery{
    order:2 !important;
    display:block !important;
    position:relative;
    width:100%;
    min-width:0;
  }
  html[data-page="home"] #services .mobile-service-swipe{
    order:2 !important;
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    gap:16px !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html[data-page="home"] #services .mobile-service-swipe::-webkit-scrollbar{display:none;}
  html[data-page="home"] #services .mobile-swipe-slide{
    display:flex !important;
    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  html[data-page="home"] #services .mobile-only-swipe-slide{display:flex !important;}
  html[data-page="home"] #services .mobile-swipe-caption{
    order:2 !important;
    display:block !important;
    width:min(100%,var(--home-caption-width)) !important;
    max-width:var(--home-caption-width) !important;
    margin:18px 0 0 !important;
    padding:0 !important;
    text-align:left !important;
  }
  html[data-page="home"] #services .mobile-swipe-caption .portfolio-work-heading{
    margin:0 !important;
    color:#FFBF00 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
  }
  html[data-page="home"] #services .mobile-swipe-caption .portfolio-work-byline{
    margin:4px 0 0 !important;
    color:#FFFFFF !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
  }
  html[data-page="home"] #services #motion-graphics .mobile-service-swipe{margin-bottom:0 !important;}
  html[data-page="home"] #services #motion-graphics .mobile-swipe-caption{margin:24px 0 0 !important;}
  html[data-page="home"] #services .mobile-swipe-title-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;width:100% !important;}
  html[data-page="home"] #services #web-design .mobile-swipe-title-row .landing-preview-popout-mobile{display:none !important;}
  html[data-page="home"] #services .mobile-swipe-art{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:300px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:transparent !important;
  }
  /* Keep the explainer centered with twice the mobile artwork side padding. */
  html[data-page="home"] #motion-graphics .mobile-image-art{padding-inline:32px !important;}
  html[data-page="home"] #services .mobile-swipe-art :is(img,svg){
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:72svh !important;
    object-fit:contain !important;
  }
  html[data-page="home"] #services .mobile-iframe-art{height:64svh !important;min-height:430px !important;}
  /* Both web previews use the same viewport as the runway inspection tile. */
  html[data-page="home"] body.mobile-service-flow #services #web-design .mobile-service-swipe :is(.landing-web-preview-card,.mobile-web-preview-art){height:64svh !important;min-height:430px !important;max-height:590px !important;aspect-ratio:auto !important;position:relative !important;overflow:hidden !important;}
  html[data-page="home"] #web-design .mobile-service-swipe .mobile-swipe-slide{justify-content:flex-start !important;}
  html[data-page="home"] #web-design .mobile-web-preview-art{padding:0 !important;}
  html[data-page="home"] #web-design .mobile-web-preview-art .landing-preview-popout-mobile{display:grid !important;position:absolute !important;top:10px !important;right:10px !important;z-index:40 !important;width:36px !important;height:36px !important;padding:2px !important;color:#FFFFFF !important;}
  html[data-page="home"] #web-design .mobile-web-preview-art .external-link-icon{width:32px !important;height:32px !important;}
  html[data-page="home"] #web-design .mobile-web-preview-art .landing-preview-popout-mobile:is(:hover,:focus-visible){color:#FFBF00 !important;}
  html[data-page="home"] #web-design .landing-web-preview{overflow:auto !important;}
  html[data-page="home"] #web-design .mobile-web-preview-art iframe{overflow:auto !important;}

  html[data-page="home"] #services #motion-graphics .mobile-iframe-art{height:auto !important;min-height:0 !important;aspect-ratio:526 / 500 !important;}
  html[data-page="home"] #services .mobile-iframe-art iframe,
  html[data-page="home"] #services .mobile-web-preview-art iframe{display:block !important;width:100% !important;height:100% !important;border:0 !important;background:transparent !important;}
  html[data-page="home"] #services .mobile-photo-art{height:auto !important;min-height:0 !important;aspect-ratio:4 / 3 !important;}
  html[data-page="home"] #services .mobile-photo-art img{width:100% !important;height:100% !important;object-fit:cover !important;max-height:none !important;}
  html[data-page="home"] #services .mobile-soccer-preview{height:70svh !important;min-height:430px !important;}
  html[data-page="home"] #services .mobile-soccer-preview .soccer-pitch-inline{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
  }
  html[data-page="home"] #services .mobile-soccer-preview .soccer-pitch-svg-mobile{
    display:block !important;
    width:auto !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
  }
  html[data-page="home"] #services .mobile-soccer-controls{
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
    margin:12px 0 0 !important;
  }
  html[data-page="home"] #services .mobile-soccer-controls button{
    border:1px solid #FFBF00;
    background:#20242c;
    color:#FFFFFF;
    font:600 15.6px/1.4 "Inter",Arial,sans-serif;
    padding:8px 20px;
    cursor:pointer;
  }
  html[data-page="home"] #services .mobile-soccer-controls button:is(:hover,:focus-visible){
    background:#FFBF00;
    color:#20242c;
  }
  html[data-page="home"] #services .mobile-splitflap-preview{
    min-height:300px !important;
    padding:20px !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:5px !important;
    background:#111 !important;
    border:1px solid #2E2E2E !important;
  }
  html[data-page="home"] #services .splitflap-preview-row{display:grid !important;grid-template-columns:1.5fr 1.2fr .45fr !important;gap:4px !important;width:100% !important;}
  html[data-page="home"] #services .splitflap-preview-row span{display:block !important;padding:8px 6px !important;background:#1D1D1D !important;color:#F4F4F4 !important;font-family:monospace !important;font-size:12px !important;line-height:1 !important;text-align:center !important;}
  html[data-page="home"] #services .splitflap-preview-head span{color:#FFBF00 !important;}
  html[data-page="home"] #services :is(#ui-icons,#motion-graphics,#web-design) .landing-feature-info > p{display:none !important;}
  html[data-page="home"] #services :is(#ui-icons,#motion-graphics,#web-design,#photography) .landing-feature-explore{margin-top:22px !important;}

  /* Re-enable the UI examples that were formerly mutually exclusive on mobile. */
  html[data-page="home"] #services #ui-icons .mobile-service-swipe .landing-airport-network-card,
  html[data-page="home"] #services #ui-icons .mobile-service-swipe .landing-runway-inspection-card{
    display:block !important;
    width:100% !important;
    height:88svh !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
  }
  html[data-page="home"] #services #ui-icons .mobile-service-swipe :is(.landing-airport-network-wrap,.landing-airport-network-frame,.landing-runway-inspection-frame){width:100% !important;height:100% !important;}

  /* Existing motion, web and photography feature cards become the first swipe slide. */
  html[data-page="home"] #services #motion-graphics .mobile-service-swipe .feature-card,
  html[data-page="home"] #services #web-design .mobile-service-swipe .feature-card,
  html[data-page="home"] #services #photography .mobile-service-swipe .feature-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  /* Branding mobile featured work: full-width horizontal swipe deck. */
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card{display:none !important;}
  html[data-page="home"] #branding-logos .mobile-branding-carousel{
    order:2 !important;
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    gap:16px !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html[data-page="home"] #branding-logos .mobile-branding-gallery{
    display:block !important;order:2 !important;position:relative;width:100%;min-width:0;
  }
  html[data-page="home"] #branding-logos .mobile-branding-carousel::-webkit-scrollbar{display:none;}
  /* Mobile featured-work navigation sits inside the existing bordered heading row.
     Triangle proportions echo the section's bullet indicators. */
  html[data-page="home"] #services .mobile-feature-navigation{
    display:grid !important;
    grid-template-columns:24px minmax(66px,auto) 24px;
    align-items:center;
    justify-content:end;
    justify-self:end;
    align-self:flex-end;
    column-gap:4px;
    width:max-content;
    min-width:122px;
    height:30px;
    margin:0 !important;
    padding:0 !important;
    position:static;
    transform:none;
    pointer-events:auto;
  }
  html[data-page="home"] #services .mobile-feature-arrow{
    display:inline-flex !important;
    position:relative;
    align-items:center;
    justify-content:center;
    width:24px;
    height:28px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
  }
  html[data-page="home"] #services .mobile-feature-arrow::before{
    content:"";
    display:block;
    width:12px;
    height:15px;
    background:currentColor;
  }
  html[data-page="home"] #services .mobile-feature-arrow-prev::before{
    clip-path:polygon(100% 0,100% 100%,0 50%);
  }
  html[data-page="home"] #services .mobile-feature-arrow-next::before{
    clip-path:polygon(0 0,100% 50%,0 100%);
  }
  html[data-page="home"] #services .mobile-feature-arrow:is(:hover,:focus-visible){
    color:#FFBF00;
  }
  /* Reserve the end-arrow slots to avoid moving the count during swipes. */
  html[data-page="home"] #services .mobile-feature-arrow[hidden]{
    visibility:hidden !important;
    pointer-events:none !important;
  }
  html[data-page="home"] #services .mobile-feature-position{
    display:block;
    position:static;
    min-width:66px;
    margin:0;
    padding:0;
    overflow:visible;
    color:#FFFFFF;
    font-family:"Inter",Arial,sans-serif;
    font-size:15.6px;
    font-weight:400;
    font-style:normal;
    line-height:1.45;
    letter-spacing:0;
    text-transform:none !important;
    text-align:center;
    white-space:nowrap;
  }
  /* Keep all three Branding captions at an identical position as visitors swipe.
     The shared artwork slot scales with screen width, like the Branding page. */
  html[data-page="home"] #branding-logos .mobile-branding-slide{
    display:flex !important;
    flex:0 0 100% !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  html[data-page="home"] #branding-logos .mobile-branding-slide-art{
    display:flex !important;
    flex:0 0 auto;
    align-items:center !important;
    justify-content:center !important;
    width:min(100%,520px) !important;
    max-width:520px !important;
    height:auto !important;
    aspect-ratio:4 / 5;
    /* Balance visible spacing from the divider to artwork and artwork to caption. */
    transform:translateY(-20px) !important;
    margin:0 auto !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    background:transparent !important;
  }
  /* Full source SVGs share a proportional artwork area with aligned captions. */
  html[data-page="home"] #branding-logos .mobile-branding-slide-art.branding-matched-art{
    padding-inline:0 !important;
    --branding-art-x:0px;
  }
  /* AOI is nudged toward the content's left edge, clear of the page scrollbar. */
  html[data-page="home"] #branding-logos .mobile-branding-slide:nth-child(3) .branding-matched-art{
    --branding-art-x:-2px;
  }
  html[data-page="home"] #branding-logos .mobile-branding-slide-art.branding-matched-art picture{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
  }
  html[data-page="home"] #branding-logos .mobile-branding-slide-art.branding-matched-art img{
    display:block !important;
    width:96% !important;
    max-width:96% !important;
    height:100% !important;
    max-height:100% !important;
    margin:0 auto !important;
    transform:translate(var(--branding-art-x), 11px) !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  /* Center all three Aerowander wordmarks with balanced side margins. */
  html[data-page="home"] #branding-logos .mobile-branding-aerowander-art{
    flex-direction:column !important;
    gap:8px !important;
  }
  html[data-page="home"] #branding-logos .mobile-branding-aerowander-art > img{
    display:block !important;
    flex-shrink:0 !important;
    width:96% !important;
    max-width:96% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  html[data-page="home"] #branding-logos .mobile-branding-slide .portfolio-work-caption{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }
  html[data-page="home"] #branding-logos .mobile-branding-slide .portfolio-work-heading{
    margin:0 !important;
    color:#FFBF00 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
  }
  html[data-page="home"] #branding-logos .mobile-branding-slide .portfolio-work-byline{
    margin:4px 0 0 !important;
    color:#FFFFFF !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-weight:400 !important;
    line-height:1.45 !important;
  }
  /* All three branding works now live on this page; no mobile link-out is needed. */
  html[data-page="home"] #services #photography .landing-feature-explore{display:inline-flex !important;}
  html[data-page="home"] #branding-logos .landing-feature-explore{display:none !important;}

  /* Copywriting: no artificial canvas between the coming-soon line and its action. */
  html[data-page="home"] #copywriting{min-height:auto !important;height:auto !important;}
  html[data-page="home"] #copywriting .feature-layout{gap:0 !important;min-height:0 !important;height:auto !important;justify-content:flex-start !important;margin-bottom:0 !important;}
  html[data-page="home"] #copywriting .mobile-feature-label{margin-bottom:18px !important;}
  html[data-page="home"] #copywriting .copywriting-feature-card{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  html[data-page="home"] #copywriting .copywriting-feature-card > p{
    margin:0 !important;
    padding:0 !important;
    color:#FFFFFF !important;
  }
  html[data-page="home"] #copywriting .landing-feature-info{margin:0 !important;padding:0 !important;}
  html[data-page="home"] #copywriting .landing-feature-explore{margin-top:32px !important;}
  html[data-page="home"] #motion-graphics .landing-feature-explore{margin-top:0 !important;}
  html[data-page="home"] #motion-graphics .landing-feature-info{margin-top:-98px !important;padding:0 !important;}

  /* Standard mobile subsection separation after Explore buttons; Copywriting is the final service. */
  html[data-page="home"] #services :is(#branding-logos,#ui-icons,#motion-graphics,#web-design,#photography) .landing-feature-explore{
    margin-bottom:calc(var(--mobile-feature-row-separation) / 2) !important;
  }

  /* Put the same section rhythm before Contact without pushing the Contact anchor/title down. */
  html[data-page="home"] .client-viewport{
    padding-bottom:calc(var(--mobile-feature-row-separation) / 2) !important;
  }

  /* Mobile contact form: equal side margins and the original neutral-grey resting border. */
  html[data-page="home"] .contact-form-viewport .contact-content-grid,
  html[data-page="home"] .contact-form-viewport .contact-content-grid-form-only{
    width:calc(100% - 16px) !important;
    margin-left:0 !important;
    margin-right:16px !important;
  }
  html[data-page="home"] :is(
    .contact-field input,
    .contact-field select,
    .contact-field textarea,
    .attachment-dropzone
  ){
    border-color:#777777 !important;
  }
  html[data-page="home"] :is(
    .contact-field input,
    .contact-field select,
    .contact-field textarea,
    .attachment-dropzone
  ):is(:focus,:focus-visible),
  html[data-page="home"] .attachment-dropzone:is(:focus,:focus-visible,:focus-within),
  html[data-page="home"] .attachment-dropzone.is-dragover{
    border-color:#FFBF00 !important;
  }

  html[data-page="home"] .contact-mobile-intro{display:none !important;}
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    display:inline-flex !important;
    width:fit-content !important;
    margin:1.35em 0 .55em calc(50% - 8px) !important;
    padding:4px 9px !important;
    transform:translateX(-50%) !important;
    align-items:center !important;
    justify-content:center !important;
    color:#000000 !important;
    background:#FFFFFF !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size:clamp(24px,7vw,31px) !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
    text-align:center !important;
  }

  /* Mobile footer at full visibility. */
  html[data-page="home"] :is(.cta-footer,footer) .footer-main{
    color:#FFFFFF !important;
    opacity:1 !important;
  }
  html[data-page="home"] :is(.cta-footer,footer) .footer-craft{
    color:#FFBF00 !important;
    opacity:1 !important;
  }
}

/* =========================================================
   2026-10-03 v8 — native desktop 90%-look sizing
   Uses real component dimensions (no root zoom/transform) so viewport math,
   scroll snapping, fixed navigation and full-screen sections remain native.
   ========================================================= */
@media (min-width:1101px){
  html[data-page="home"] .about-madhi-viewport{
    height:calc(100svh - var(--site-header-height));
    min-height:calc(100svh - var(--site-header-height));
    padding:23px 0 22px;
    overflow:hidden;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
  }
  html[data-page="home"] .about-madhi-title{
    margin-bottom:16px !important;
    font-size:57.6px !important;
    -webkit-text-stroke:1px currentColor !important;
    text-shadow:0 0 6.3px rgba(255,191,0,.48),0 0 12.6px rgba(255,191,0,.18) !important;
  }
  html[data-page="home"] .about-madhi-byline{
    font-size:22.5px !important;
    line-height:1.45 !important;
  }
  html[data-page="home"] .about-madhi-byline + .about-madhi-byline{
    margin-top:24px !important;
  }
}

@media (min-width:1101px){
  :root{
    --site-header-height:65px;
    --landing-header-height:var(--site-header-height);
    --service-header-height:var(--site-header-height);
  }

  html[data-page="home"]{
    --home-left-rail:var(--madhi-nav-left-rail,clamp(150px,11.78vw,205px));
    --home-side-rail:var(--madhi-nav-right-rail,clamp(165px,12.54vw,225px));
    --home-main-right-gap:clamp(20px,1.8vw,28px);
    --home-panel-scroll-safe:12px;
    --home-content-gutter:0px;
    --home-caption-width:330px;
  }

  html[data-page="home"] nav.site-nav-global{padding-inline:9px;}
  html[data-page="home"] .site-nav-global .nav-links > a,
  html[data-page="home"] .site-nav-global .nav-links > a.active,
  html[data-page="home"] .site-nav-global .nav-links > a.section-current{
    min-height:36px;
    padding:7.2px 5.4px;
    font-size:clamp(12px,.787vw,15.4px) !important;
  }
  html[data-page="home"] .site-nav-global .nav-links > a.active,
  html[data-page="home"] .site-nav-global .nav-links > a.section-current{
    min-height:31px;
    padding:5.4px 12.6px;
  }

  /* Major outlined section headings: same proportions as the preferred 90% view. */
  html[data-page="home"][data-theme] :is(
    #services .services-title,
    .approach-viewport .studio-info-title,
    .client-viewport .studio-info-title,
    .contact-form-viewport .studio-info-title
  ){
    font-size:57.6px !important;
    -webkit-text-stroke:1px currentColor !important;
    text-shadow:0 0 6.3px rgba(255,191,0,.48),0 0 12.6px rgba(255,191,0,.18) !important;
  }

  /* Service chooser: reduce every physical dimension rather than scaling the page. */
  html[data-page="home"] #services{padding:23px 0 22px !important;}
  html[data-page="home"] #services .services-title{margin-bottom:16px !important;}
  html[data-page="home"] #services .services-byline{margin-bottom:20px !important;}
  html[data-page="home"] #services .desktop-service-explorer{
    grid-template-columns:minmax(225px,18%) minmax(0,1fr);
    gap:16px;
  }
  html[data-page="home"] #services .desktop-service-explorer > .sitemap-grid{gap:7px !important;}
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card{
    min-height:70px !important;
    padding:9px 14px !important;
    border-radius:13px !important;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card-top{
    min-height:52px;
    gap:13px !important;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-number{
    flex-basis:52px !important;
    width:52px !important;
    height:52px !important;
  }
  html[data-page="home"] #services .desktop-service-explorer .sitemap-card h2{
    font-size:clamp(19.4px,1.41vw,24.3px) !important;
  }
  html[data-page="home"] #services .desktop-service-includes-title,
  html[data-page="home"] #services .desktop-service-includes-list li{
    font-size:14px !important;
  }
  html[data-page="home"] #services .desktop-service-explore{
    margin-top:22px;
    width:auto !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:6px 9px !important;
    font-size:13px !important;
    line-height:1.25 !important;
    white-space:normal !important;
    text-wrap:balance;
  }
  html[data-page="home"] #services .desktop-service-explorer:has(.sitemap-grid > .sitemap-card:nth-child(1).is-active) .desktop-service-explore,
  html[data-page="home"] #services .desktop-service-explorer:has(.sitemap-grid > .sitemap-card:nth-child(4).is-active) .desktop-service-explore{
    padding-left:4px !important;
    padding-right:4px !important;
  }

  /* Keep the artwork/copy proportions compact without changing viewport height. */
  html[data-page="home"] .landing-feature-info :is(.caption,.feature-description,p),
  html[data-page="home"] .studio-info-card p,
  html[data-page="home"] .contact-form-viewport :is(input,select,textarea,.attachment-dropzone,.contact-email-note-below-submit){
    font-size:14px !important;
  }
  html[data-page="home"] .landing-feature-info .landing-feature-explore{
    min-height:32px !important;
    padding:9px 14px !important;
    font-size:11.25px !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-brief-form{
    padding-top:20px !important;
    padding-bottom:20px !important;
  }
}

/* =========================================================
   2026-10-03 — desktop-only 10% reduction for user-marked objects.
   No page/root scaling; only the explicitly marked visual objects are reduced.
   ========================================================= */
@media (min-width:1101px){
  /* Home hero: side mark, headline, byline, and photo credit. */
  html[data-page="home"] .mobile-brand-logo{
    transform:scale(.9) !important;
    transform-origin:left top !important;
  }
  html[data-page="home"] #home .home-hero-title{
    transform:translate(-50%,-50%) scale(.9) !important;
    transform-origin:center center !important;
  }
  html[data-page="home"] #home .home-hero-byline{
    transform:translateX(-50%) scale(.9) !important;
    transform-origin:center bottom !important;
  }
  html[data-page="home"] #home .hero-photo-credit{
    transform:scale(.9) !important;
    transform-origin:right bottom !important;
  }

  /* What I Do: only the marked User Interfaces featured-work group. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .feature-layout{
    transform:scale(.9) !important;
    transform-origin:left top !important;
  }

  /* Contact: only the marked kicker and form group. */
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    transform:scale(.9) !important;
    transform-origin:center top !important;
  }
  html[data-page="home"] .contact-form-viewport .contact-content-grid-form-only,
  html[data-page="home"] .contact-form-viewport .contact-content-grid.contact-content-grid-form-only{
    transform:scale(.9) !important;
    transform-origin:center top !important;
  }
}


/* =========================================================
   2026-10-03 v10 — requested targeted refinements only.
   ========================================================= */
@media (min-width:1101px){
  /* Photography: keep a deliberate bottom gap equal to the title/divider rhythm. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-card{
    height:min(calc(86svh - 40px),660px) !important;
    margin-bottom:22px !important;
  }
}

/* External-link controls: icon-only open-square treatment. */
html[data-page="home"] :is(.landing-preview-popout,.preview-popout,.popout-action){
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  padding:2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#FFFFFF !important;
  transform:none !important;
}
html[data-page="home"] :is(.landing-preview-popout,.preview-popout,.popout-action) .external-link-icon{
  display:block !important;
  width:32px !important;
  height:32px !important;
}
html[data-page="home"] :is(.landing-preview-popout,.preview-popout,.popout-action) :is(.external-link-frame,.external-link-arrow){
  stroke:currentColor !important;
  transition:stroke .18s ease !important;
}
html[data-page="home"] :is(.landing-preview-popout,.preview-popout,.popout-action):is(:hover,:focus-visible){
  background:transparent !important;
  color:#FFBF00 !important;
  transform:none !important;
}



/* =========================================================
   2026-10-05 — requested landing/mobile refinements only
   ========================================================= */

/* Runway Marking Inspection tile: transparent container and square corners. */
html[data-page="home"] :is(.landing-runway-inspection-card,.landing-runway-inspection-frame){
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

@media (max-width:700px){
  /* Keep the vertical Madhi Studio mark behind all mobile text/content. */
  html[data-page="home"] .mobile-brand-watermark{z-index:0 !important;}
  html[data-page="home"] main{position:relative;z-index:1 !important;}
  html[data-page="home"] main > section,
  html[data-page="home"] main > section > *{position:relative;z-index:1;}

  /* Landing service disclosures: the text stays white; only the arrow turns gold on hover/open. */
  html[data-page="home"] body.mobile-service-flow #services .landing-indexed-heading .section-title,
  html[data-page="home"] body.mobile-service-flow #services .landing-indexed-heading:is(:hover,:focus-within) .section-title,
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .landing-indexed-heading .section-title{
    color:#FFFFFF !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .landing-indexed-heading:is(:hover,:focus-within) .mobile-disclosure-toggle,
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .mobile-disclosure-toggle{
    color:#FFBF00 !important;
  }

  /* Contact kicker matches the form-field width and border treatment. */
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    margin:1.35em 0 .55em 0 !important;
    padding:0 14px !important;
    transform:none !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:stretch !important;
    box-sizing:border-box !important;
    border:1px solid #FFFFFF !important;
    border-radius:0 !important;
    background:#FFFFFF !important;
    color:#000000 !important;
    text-align:center !important;
  }
}

/* =========================================================
   2026-10-05 pass9 — requested mobile hero/contact refinements
   ========================================================= */
@media (max-width:700px){
  /* Intro mark sits above viewport 1, then becomes the grey background watermark after viewport 1. */
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark){z-index:4 !important;}
  html[data-page="home"] .mobile-brand-watermark.is-page-watermark{z-index:0 !important;}

  /* LIX and its photo byline arrive together, immediately after the image reveal completes. */
  html[data-page="home"] #home .home-hero-title{
    animation:mobileHeroCopyIn .01s linear 11.8s forwards !important;
  }
  html[data-page="home"] #home .hero-photo-credit{
    animation:mobileHeroCaptionReveal .01s linear 11.8s forwards !important;
  }

  /* Match the invitation box exactly to the form-field column and enlarge its copy by 15%. */
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    width:calc(100% - 16px) !important;
    height:48px !important;
    min-height:48px !important;
    margin:1.35em 16px .55em 0 !important;
    padding:0 14px !important;
    transform:none !important;
    box-sizing:border-box !important;
    border:1px solid #FFFFFF !important;
    border-radius:0 !important;
    background:#FFFFFF !important;
    color:#000000 !important;
    font-size:17.94px !important;
    line-height:1 !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}


/* =========================================================
   2026-10-05 pass10 — requested mobile-only refinements
   ========================================================= */
@media (max-width:700px){
  /* Intro logo and right-side service list fade together as one unit. */
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark){z-index:4 !important;}
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark) .mobile-brand-services{
    opacity:1 !important;
    animation:none !important;
  }

  /* Once past viewport 1, keep the grey Madhi mark visible above page backgrounds but below all content. */
  html[data-page="home"] .mobile-brand-watermark.is-page-watermark{z-index:2 !important;}
  html[data-page="home"] main{position:relative;z-index:auto !important;background:transparent !important;}
  html[data-page="home"] main > section{position:relative;z-index:auto !important;background:transparent !important;}
  html[data-page="home"] main > section > *{position:relative;z-index:3 !important;}
  html[data-page="home"] :is(
    .studio-info-card,.studio-info-card-content,.studio-info-container,
    .contact-form-container,.contact-content-grid,.contact-content-grid-form-only,.contact-brief-form,
    .landing-feature-info,.feature-layout,.sitemap-card,.sitemap-card-content
  ){
    background:transparent !important;
    box-shadow:none !important;
  }

  /* Stronger white emphasis for the bold lead-in phrases. */
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-main{
    color:#FFFFFF !important;
    font-weight:800 !important;
  }

  /* Contact kicker: 20% larger than pass9 and italic. */
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    font-size:21.528px !important;
    font-style:italic !important;
  }

  /* Halve the gap after each service list before Featured Works. */
  html[data-page="home"] body.mobile-service-flow #services .mobile-feature-label{
    margin-top:18px !important;
  }
}

/* pass10 visibility reinforcement: transparent mobile content layers over the persistent grey mark. */
@media (max-width:700px){
  html[data-page="home"] :is(
    .about-madhi-viewport,.services-viewport,.work-section,.studio-summary-viewport,
    .studio-info-viewport,.approach-viewport,.client-viewport,.contact-form-viewport,
    .studio-info-container,.contact-form-container,.cta-footer
  ){
    background:transparent !important;
  }
  html[data-page="home"] .studio-summary-viewport,
  html[data-page="home"] .studio-summary-viewport > .studio-info-viewport{
    position:relative !important;
    z-index:auto !important;
  }
  html[data-page="home"] .studio-summary-viewport > .studio-info-viewport > *,
  html[data-page="home"] .contact-form-viewport > *{
    position:relative;
    z-index:3 !important;
  }
}

/* =========================================================
   2026-10-05 pass11 — requested mobile finishing refinements
   ========================================================= */
@media (max-width:700px){
  /* Strong lead-ins plus a 2px gold underline that excludes punctuation. */
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-main{
    color:#FFFFFF !important;
    font-weight:900 !important;
  }
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-key{
    display:inline !important;
    color:#FFFFFF !important;
    font-weight:900 !important;
    text-decoration-line:underline !important;
    text-decoration-color:#FFBF00 !important;
    text-decoration-thickness:3px !important;
    text-underline-offset:3px !important;
    text-decoration-skip-ink:auto !important;
  }
  html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-punctuation{
    text-decoration:none !important;
  }

  /* Service heading gets the same 2px gold underline while hovered/focused/open. */
  html[data-page="home"] body.mobile-service-flow #services .landing-indexed-heading:is(:hover,:focus-within) .section-title,
  html[data-page="home"] body.mobile-service-flow #services .mobile-service-accordion.is-expanded .landing-indexed-heading .section-title{
    color:#FFFFFF !important;
    text-decoration-line:underline !important;
    text-decoration-color:#FFBF00 !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-skip-ink:auto !important;
  }

  /* Portfolio preview pop-out controls: gold + visually bolder on hover/focus. */
  html[data-page="home"] :is(.preview-popout,.landing-preview-popout,.popout-action):is(:hover,:focus-visible){
    color:#FFBF00 !important;
  }
  html[data-page="home"] :is(.preview-popout,.landing-preview-popout,.popout-action):is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
    stroke-width:3.4px !important;
  }

  /* Footer: 15% larger and uniformly the resting Madhi mark grey. */
  html[data-page="home"] :is(.cta-footer,footer) .footer-main,
  html[data-page="home"] :is(.cta-footer,footer) .footer-main *,
  html[data-page="home"] :is(.cta-footer,footer) .footer-craft{
    color:#262626 !important;
    font-size:13.9px !important;
    opacity:1 !important;
  }
}


/* =========================================================
   2026-10-05 pass12 — requested mobile timing/type refinements only
   ========================================================= */
@media (max-width:700px){
  /* Faster intro: logo + service list fade together; image, LIX. and byline fade in together. */
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark){
    animation:mobileBrandIntroFade 1s ease .2s forwards !important;
  }
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark) .mobile-brand-services{
    opacity:1 !important;
    animation:none !important;
  }
  html[data-page="home"] .mobile-hero-image{
    animation:mobileHeroImageReveal 1.5s cubic-bezier(.22,.61,.36,1) 1s forwards !important;
  }
  html[data-page="home"] .mobile-hero-curtain{
    animation:mobileHeroCurtain 1.5s cubic-bezier(.22,.61,.36,1) 1s forwards !important;
  }
  html[data-page="home"] #home .home-hero-title{
    font-size:clamp(76.5px,21.25vw,89.25px) !important;
    animation:mobileHeroCopyIn 1.5s ease 1s forwards !important;
  }
  html[data-page="home"] #home .hero-photo-credit{
    animation:mobileHeroCaptionReveal 1.5s ease 1s forwards !important;
  }
  html[data-page="home"] #home .hero-photo-credit::before{
    font-size:15.3px !important;
  }

  /* Mobile photography title/caption over image: 15% smaller. */
  html[data-page="home"] #photography .photography-feature-title{
    font-size:clamp(40.8px,11.05vw,52.7px) !important;
  }

  /* Copywriting: reduce space above Explore button by 75%. */
  html[data-page="home"] #copywriting .landing-feature-explore{
    margin-top:0 !important;
  }

  /* Contact invitation: 20% larger than pass11. */
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    font-size:25.8336px !important;
  }
}


/* =========================================================
   2026-10-05 pass13 — requested mobile web-preview/footer refinements only
   ========================================================= */
@media (max-width:700px){
  /* Website Design preview pop-out sits inside the preview header, top-right. */
  html[data-page="home"] #web-design .landing-feature-info .preview-popout{
    display:none !important;
  }
  html[data-page="home"] #web-design .feature-card .landing-preview-popout-mobile{
    display:grid !important;
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    z-index:40 !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:2px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#1b0276 !important;
  }
  html[data-page="home"] #web-design .feature-card .landing-preview-popout-mobile .external-link-icon{
    width:32px !important;
    height:32px !important;
  }
  html[data-page="home"] #web-design .feature-card .landing-preview-popout-mobile:is(:hover,:focus-visible){
    color:#FFBF00 !important;
  }
  html[data-page="home"] #web-design .feature-card .landing-preview-popout-mobile:is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
    stroke:#FFBF00 !important;
    stroke-width:2.4px !important;
  }

  /* Footer text requested grey. */
  html[data-page="home"] :is(.cta-footer,footer) .footer-main,
  html[data-page="home"] :is(.cta-footer,footer) .footer-main *,
  html[data-page="home"] :is(.cta-footer,footer) .footer-craft{
    color:#4b4b4b !important;
  }
}

/* =========================================================
   2026-10-05 pass14 — slower mobile hero sequence only
   ========================================================= */
@media (max-width:700px){
  /* Half-speed transition: logo/services fade together more gradually. */
  html[data-page="home"] .mobile-brand-watermark:not(.is-page-watermark){
    animation:mobileBrandIntroFade 2s ease .4s forwards !important;
  }

  /* Image begins first and reveals at half the prior speed. */
  html[data-page="home"] .mobile-hero-image{
    animation:mobileHeroImageReveal 3s cubic-bezier(.22,.61,.36,1) 1.6s forwards !important;
  }
  html[data-page="home"] .mobile-hero-curtain{
    animation:mobileHeroCurtain 3s cubic-bezier(.22,.61,.36,1) 1.6s forwards !important;
  }

  /* LIX. and the right-aligned byline start together after the image has begun appearing. */
  html[data-page="home"] #home .home-hero-title{
    animation:mobileHeroCopyIn 3s ease 2.4s forwards !important;
  }
  html[data-page="home"] #home .hero-photo-credit{
    animation:mobileHeroCaptionReveal 3s ease 2.4s forwards !important;
  }
}


/* =========================================================
   2026-10-05 pass15 — requested mobile preview/contact refinements only
   ========================================================= */
@media (max-width:700px){
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    font-size:32.292px !important;
  }
}


/* =========================================================
   2026-10-05 pass16 — requested mobile-only refinements
   ========================================================= */
@media (max-width:700px){
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    font-size:70.841px !important;
  }
}


/* =========================================================
   2026-10-05 pass17 — runway inspection tile transparency fix
   ========================================================= */
html[data-page="home"] #ui-icons :is(.feature-card,.landing-runway-inspection-card,.landing-runway-inspection-frame){
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}


/* =========================================================
   2026-10-05 pass18 — runway inspection tile: panels-only transparency fix
   ========================================================= */
html[data-page="home"] #ui-icons :is(.feature-card,.landing-runway-inspection-card,.landing-runway-inspection-frame){
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}


/* =========================================================
   2026-10-06 pass21 — mobile contact-form select arrows match service chevrons
   ========================================================= */
@media (max-width:700px){
  html[data-page="home"] .contact-input-shell:has(> select)::after{
    content:"";
    position:absolute;
    right:18px;
    top:50%;
    width:10px;
    height:10px;
    border-right:2.6px solid #FFFFFF;
    border-bottom:2.6px solid #FFFFFF;
    transform:translateY(-62%) rotate(45deg);
    pointer-events:none;
    transition:border-color .2s ease, transform .2s ease;
    z-index:2;
  }
  html[data-page="home"] .contact-input-shell > select{
    -webkit-appearance:none !important;
    appearance:none !important;
    background-image:none !important;
    padding-right:48px !important;
  }
  html[data-page="home"] .contact-input-shell:has(> select:focus)::after,
  html[data-page="home"] .contact-input-shell:has(> select:focus-visible)::after{
    border-right-color:#FFBF00 !important;
    border-bottom-color:#FFBF00 !important;
  }
}


/* =========================================================
   2026-10-06 pass — restore requested home desktop/mobile refinements only
   ========================================================= */
@media (min-width:701px){
  /* Desktop landing-page copywriting placeholder: slightly smaller, white. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="copywriting"] .copywriting-feature-card > p,
  html[data-page="home"] #copywriting .copywriting-feature-card > p{
    color:#FFFFFF !important;
    font-size:20px !important;
  }
}

@media (max-width:700px){
  /* Mobile landing-page copywriting: match Photography spacing above the action button. */
  html[data-page="home"] #copywriting .feature-layout,
  html[data-page="home"] #copywriting .landing-feature-info{
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  html[data-page="home"] #copywriting .copywriting-feature-card{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  html[data-page="home"] #copywriting .copywriting-feature-card > p{
    margin:0 !important;
    padding:0 !important;
  }
  html[data-page="home"] #copywriting .landing-feature-explore{
    margin-top:16px !important;
  }
}

/* Footer text: retain the existing desktop color; mobile copyright is a quieter gray. */
@media (min-width:701px){
  html[data-page="home"] :is(.cta-footer, footer) :is(.footer-main, .footer-main *, .footer-craft, .footer-site-links, .footer-site-links *, .footer-site-link){
    color:#e7e7e7 !important;
    opacity:1 !important;
  }
}
@media (max-width:700px){
  html[data-page="home"] :is(.cta-footer, footer) :is(.footer-main, .footer-main *, .footer-craft){
    color:#858585 !important;
    opacity:1 !important;
  }
}



.landing-feature-title,
.desktop-feature-copy{display:none;}

/* =========================================================
   2026-10-06 — What I Do desktop tabs: service-page-style caption rail.
   Keeps all six featured titles/bylines in one consistent right column and
   lets the artwork resize within the remaining main-panel width.
   ========================================================= */
@media (min-width:1101px){
  html[data-page="home"] #services{
    --home-feature-caption-width:297px;
    --home-feature-caption-gap:16px;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .feature-layout{
    grid-template-columns:minmax(0,1fr) minmax(250px,var(--home-feature-caption-width)) !important;
    column-gap:var(--home-feature-caption-gap) !important;
    row-gap:0 !important;
    align-items:start !important;
    transform:none !important;
  }

  /* Keep every selected featured visual in the left column. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .feature-card{
    grid-column:1 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }

  /* One shared title/byline rail for all six What I Do tabs. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .landing-feature-info{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:start !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:var(--home-feature-caption-width) !important;
    min-width:0 !important;
    margin:0 !important;
    padding:4px 0 0 !important;
    gap:0 !important;
    text-align:left !important;
    opacity:1 !important;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .landing-feature-title{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    color:#FFBF00 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:17.3px !important;
    font-style:normal !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .landing-feature-info > :is(
    .feature-description,
    .desktop-ui-feature-copy,
    .motion-description-turntable
  ){
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:4px 0 0 !important;
    color:#C4C4C4 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:14px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    text-wrap:pretty;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .landing-feature-info > :is(
    .mobile-ui-feature-copy,
    .motion-description-camera
  ){
    display:none !important;
  }

  /* Keep the web pop-out control directly beneath its caption/byline. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] :is(.landing-preview-popout,.preview-popout){
    margin:12px 0 0 !important;
    align-self:flex-start !important;
  }

  /* Let the featured media shrink naturally into the new left column. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .feature-card{
    max-width:100% !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .feature-card,
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .feature-card{
    height:auto !important;
    min-height:0 !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .landing-feature-info{
    margin-top:0 !important;
  }
}

/* =========================================================
   2026-10-06 — What I Do: reuse first-project service-page structures
   for Branding, UI, Motion and Web on desktop. Mobile remains unchanged.
   ========================================================= */
.desktop-service-sync-feature{display:none;}

@media (min-width:1101px){
  html[data-page="home"] #services{
    --home-service-sync-caption-width:297px;
    --home-service-sync-gap:16px;
  }

  /* These four tabs now use the same first-project structure as their service pages. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .feature-layout,
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .feature-layout,
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .feature-layout,
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .feature-layout{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  /* Hide the landing-page-specific desktop approximation; preserve it for mobile/tablet. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .feature-layout > :not(.desktop-service-sync-feature):not(.mobile-feature-label),
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .feature-layout > :not(.desktop-service-sync-feature):not(.mobile-feature-label),
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .feature-layout > :not(.desktop-service-sync-feature):not(.mobile-feature-label),
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .feature-layout > :not(.desktop-service-sync-feature):not(.mobile-feature-label){
    display:none !important;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel] .desktop-service-sync-feature{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(270px,var(--home-service-sync-caption-width)) !important;
    gap:var(--home-service-sync-gap) !important;
    align-items:start !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    transform:none !important;
  }

  html[data-page="home"] #services .desktop-service-sync-feature .info-panel,
  html[data-page="home"] #services .desktop-service-sync-feature > .portfolio-work-caption{
    width:100% !important;
    max-width:var(--home-service-sync-caption-width) !important;
    min-width:0 !important;
    margin:0 !important;
    padding:4px 0 0 !important;
    align-self:start !important;
    justify-self:stretch !important;
    color:#C4C4C4 !important;
    opacity:1 !important;
    background:transparent !important;
  }

  html[data-page="home"] #services .desktop-service-sync-feature .portfolio-work-caption{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  html[data-page="home"] #services .desktop-service-sync-feature .portfolio-work-heading{
    margin:0 !important;
    color:#FFBF00 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:17.3px !important;
    font-style:normal !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
  }

  html[data-page="home"] #services .desktop-service-sync-feature .portfolio-work-byline{
    margin:4px 0 0 !important;
    color:#C4C4C4 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:14px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    text-wrap:pretty;
  }

  /* Branding — same three-logo first project layout as the Branding service page. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature{
    grid-template-rows:432px auto;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature .branding-system-feature-card{
    grid-column:1;
    grid-row:1;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    width:100% !important;
    height:432px !important;
    min-width:0 !important;
    padding-top:32px !important;
    box-sizing:border-box !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature > .portfolio-work-caption{
    grid-column:2;
    grid-row:1;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature .branding-system-collage.logo-system-three{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:repeat(3,auto) !important;
    gap:4.5px !important;
    width:min(78%,445.2px) !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    overflow:visible !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature .branding-system-item{
    position:static !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature .branding-system-label{display:none !important;}
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature .branding-system-item picture{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="branding-logos"] .desktop-service-sync-feature .branding-system-item img{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:445.2px !important;
    max-height:none !important;
    margin:0 !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:none !important;
    background:transparent !important;
  }

  /* UI — same map tile/frame/fullscreen structure as the UI service page. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .desktop-service-sync-feature .image-card{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 10 !important;
    overflow:hidden !important;
    border-radius:16px !important;
    background:var(--brand-cyan) !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .desktop-service-sync-feature .wanderports-map-frame{
    display:block !important;
    width:100% !important;
    height:100% !important;
    border:0 !important;
    border-radius:inherit !important;
    margin:0 !important;
    background:var(--brand-cyan) !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="ui-icons"] .desktop-service-sync-feature .map-fullscreen-control{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    z-index:12 !important;
  }

  /* Motion — same animated hero iframe tile as the first Motion service project. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .desktop-service-sync-feature .image-card{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
    background:var(--brand-aqua) !important;
    border:0 !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .desktop-service-sync-feature .madhi-hero-frame{
    display:block !important;
    width:100% !important;
    height:100% !important;
    border:0 !important;
    background:var(--brand-aqua) !important;
  }

  /* Web — same 16:9 preview shell and caption/pop-out stack as its service page. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature .image-card.web-preview-card{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:14px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature :is(.landing-web-preview-wrap,.landing-web-preview-shell){
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    overflow:hidden !important;
    border-radius:14px !important;
    background:transparent !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature .landing-web-preview{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    border:0 !important;
    background:transparent !important;
    transform:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature .preview-popout{
    position:static !important;
    display:inline-grid !important;
    place-items:center !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    margin:12px 0 0 !important;
    padding:2px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#FFFFFF !important;
    align-self:flex-start !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature .preview-popout svg{
    width:27px !important;
    height:27px !important;
  }
}

@media (max-width:1100px){
  html[data-page="home"] #services .desktop-service-sync-feature{display:none !important;}
}


/* =========================================================
   2026-10-06 — What I Do: activation, web-preview, pop-out, photography refinements
   ========================================================= */
@media (min-width:1101px){
  /* Website tab: match the dedicated service-page 16:9 preview tile. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature .image-card.web-preview-card.landing-web-preview-card{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:14px !important;
    background:#FFFFFF !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature :is(.landing-web-preview-wrap,.landing-web-preview-shell){
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:14px !important;
    background:#FFFFFF !important;
    box-shadow:none !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .desktop-service-sync-feature .landing-web-preview{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:132% !important;
    height:132% !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:14px !important;
    background:#FFFFFF !important;
    transform:scale(.757575758) !important;
    transform-origin:top left !important;
  }

  /* Visible square edge, not the invisible button box, aligns with the copy above. */
  html[data-page="home"] #services .desktop-service-panel .info-panel > :is(.preview-popout,.landing-preview-popout,.popout-action),
  html[data-page="home"] #services .desktop-service-panel .landing-feature-info > :is(.preview-popout,.landing-preview-popout,.popout-action){
    margin-left:-7px !important;
    align-self:flex-start !important;
    justify-self:start !important;
  }

  /* Photography tab: Serenity title at the bottom, centered in DM Sans. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-title{
    top:auto !important;
    bottom:18px !important;
    left:50% !important;
    width:calc(100% - 20px) !important;
    transform:translateX(-50%) !important;
    color:#FFFFFF !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:clamp(48px,4.425vw,81px) !important;
    font-style:normal !important;
    font-weight:320 !important;
    line-height:1 !important;
    text-align:center !important;
  }
}

@media (min-width:701px) and (max-width:1100px){
  html[data-page="home"] #photography .photography-feature-title{
    top:auto !important;
    bottom:18px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    color:#FFFFFF !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:clamp(46.5px,4.0875vw,73.5px) !important;
    font-style:normal !important;
    font-weight:320 !important;
    line-height:1 !important;
    text-align:center !important;
  }
}

@media (max-width:700px){
  html[data-page="home"] #photography .photography-feature-title{
    top:auto !important;
    bottom:18px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    color:#FFFFFF !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:clamp(30.6px,8.2875vw,39.5px) !important;
    font-style:normal !important;
    font-weight:320 !important;
    line-height:1 !important;
    text-align:center !important;
  }
}


/* =========================================================
   2026-10-07 — Landing Photography feature: Serenity property ad
   ========================================================= */
html[data-page="home"] #photography .photography-feature-card{
  position:relative !important;
}
html[data-page="home"] #photography .photography-feature-title{
  left:clamp(18px,2.4vw,34px) !important;
  right:auto !important;
  top:auto !important;
  bottom:clamp(16px,2vw,28px) !important;
  width:auto !important;
  max-width:42% !important;
  transform:none !important;
  margin:0 !important;
  color:#0E5D30 !important;
  font-family:"Playfair Display",Georgia,serif !important;
  font-size:clamp(42px,4.4vw,76px) !important;
  font-style:normal !important;
  font-weight:400 !important;
  line-height:.95 !important;
  letter-spacing:.01em !important;
  text-align:left !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
html[data-page="home"] #photography .photography-feature-property-copy{
  position:absolute;
  right:clamp(16px,2vw,26px);
  bottom:clamp(16px,2vw,26px);
  z-index:3;
  width:min(42%,380px);
  box-sizing:border-box;
  padding:clamp(12px,1.35vw,19px);
  border:2px solid #000000;
  background:#156082;
  color:#FFFFFF;
  font-family:"DM Sans",Arial,sans-serif;
  font-size:clamp(11px,.946vw,15.4px);
  font-style:normal;
  font-weight:400;
  line-height:1.42;
  text-align:left;
}
html[data-page="home"] #photography .photography-feature-property-copy .photography-feature-property-story{
  margin:0;
}
html[data-page="home"] #photography .photography-feature-property-copy address{
  margin:clamp(10px,1vw,14px) 0 0;
  color:#FFFFFF;
  font:inherit;
  font-style:normal;
}

@media (max-width:700px){
  html[data-page="home"] #photography .photography-feature-title{
    left:12px !important;
    bottom:12px !important;
    max-width:45% !important;
    font-size:clamp(26px,8vw,38px) !important;
  }
  html[data-page="home"] #photography .photography-feature-property-copy{
    right:8px;
    bottom:18px;
    width:42%;
    padding:0;
    border:0;
    background:transparent;
    font-size:clamp(4.2px,1.23vw,5px);
    line-height:1.18;
    text-align:right;
  }
  html[data-page="home"] #photography .photography-feature-property-copy address{
    margin-top:7px;
  }
}

/* 2026-10-07 — Landing Photography positioning refinement only */
@media (min-width:1101px){
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-title{
    left:10px !important;
    right:auto !important;
    top:auto !important;
    bottom:54px !important;
    width:auto !important;
    max-width:44% !important;
    transform:none !important;
    margin:0 !important;
    color:#A8E6CF !important;
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:clamp(42px,4.4vw,76px) !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:.95 !important;
    letter-spacing:.01em !important;
    text-align:left !important;
    white-space:nowrap !important;
    text-shadow:none !important;
    opacity:1 !important;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-property-copy{
    right:10px !important;
    bottom:54px !important;
    width:min(42%,380px) !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#FFFFFF !important;
    text-align:right !important;
  }

  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-property-copy address{
    text-align:right !important;
  }
}

/* 2026-10-07 — underline card lead-ins only; punctuation remains separate. */
html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-title-key{
  text-decoration-line:underline !important;
  text-decoration-color:#FFBF00 !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:4px !important;
  text-decoration-skip-ink:auto !important;
}
html[data-page="home"] :is(.approach-viewport,.client-viewport) .studio-card-punctuation{
  text-decoration:none !important;
}
html[data-page="home"] .client-viewport .studio-card-punctuation{
  color:#FFFFFF !important;
}

/* 2026-10-07 — compact only the two longest What I Do Explore buttons. */
@media (min-width:1101px){
  html[data-page="home"] #branding-logos .landing-feature-info .landing-feature-explore,
  html[data-page="home"] #web-design .landing-feature-info .landing-feature-explore{
    width:fit-content !important;
    max-width:184px !important;
    min-width:0 !important;
    padding-left:6px !important;
    padding-right:6px !important;
    white-space:normal !important;
    text-wrap:balance !important;
  }
}

/* 2026-10-07 — tighten only Branding and Websites Explore buttons in desktop What I Do rail. */
@media (min-width:1101px){
  html[data-page="home"] #services .desktop-service-explorer:has(.sitemap-grid > .sitemap-card:nth-child(1).is-active) .desktop-service-explore{
    width:164px !important;
    max-width:164px !important;
    min-width:0 !important;
    padding-left:4px !important;
    padding-right:4px !important;
    box-sizing:border-box !important;
  }
  html[data-page="home"] #services .desktop-service-explorer:has(.sitemap-grid > .sitemap-card:nth-child(4).is-active) .desktop-service-explore{
    width:174px !important;
    max-width:174px !important;
    min-width:0 !important;
    padding-left:4px !important;
    padding-right:4px !important;
    box-sizing:border-box !important;
  }
}


/* 2026-10-07 — consistent gold service arrows on landing, desktop and mobile. */
@media (max-width:1100px){
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:6px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li{
    display:grid !important;
    grid-template-columns:7px minmax(0,1fr) !important;
    column-gap:6px !important;
    align-items:start !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    font-style:normal !important;
    text-align:left !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li::before{
    content:"" !important;
    display:block !important;
    width:0 !important;
    height:0 !important;
    margin-top:.42em !important;
    border-top:4px solid transparent !important;
    border-bottom:4px solid transparent !important;
    border-left:7px solid #FFBF00 !important;
  }
  html[data-page="home"] body.mobile-service-flow #services .sitemap-includes-list li::marker{content:"" !important;}
}

/* 2026-10-07 — requested landing-page bullet, web pop-out, and photo-copy refinements only. */
@media (min-width:1101px){
  /* Website What I Do pop-out: visible square aligns with copy and turns gold/bolder on hover. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .info-panel > .preview-popout{
    margin-left:-9px !important;
    align-self:flex-start !important;
    justify-self:start !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .info-panel > .preview-popout:is(:hover,:focus-visible){
    color:#FFBF00 !important;
    font-weight:700 !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .info-panel > .preview-popout:is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
    stroke:#FFBF00 !important;
    stroke-width:3.6px !important;
  }

  /* Additional 10% increase requested for the photography property copy. */
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-property-copy{
    font-size:clamp(12.1px,1.0406vw,16.94px) !important;
  }
}


/* 2026-10-07 — final landing refinements: 5% photo-copy reduction. */
@media (min-width:1101px){
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="photography"] .photography-feature-property-copy{
    font-size:clamp(11.495px,.98857vw,16.093px) !important;
  }
}


/* 2026-10-07 — authoritative landing Motion service-list alignment. */
@media (min-width:1101px){
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .desktop-service-includes-list{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
    width:100% !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .desktop-service-includes-list li{
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:right !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .desktop-service-includes-list li::before{
    content:"" !important;
    position:static !important;
    display:block !important;
    flex:0 0 auto !important;
    width:0 !important;
    height:0 !important;
    margin:.42em 0 0 !important;
    border-top:4px solid transparent !important;
    border-bottom:4px solid transparent !important;
    border-left:7px solid #FFBF00 !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="motion-graphics"] .desktop-service-includes-text{
    display:block !important;
    flex:0 1 auto !important;
    width:max-content !important;
    max-width:calc(100% - 13px) !important;
    min-width:0 !important;
    text-align:right !important;
    white-space:normal !important;
  }
}

/* 2026-10-07 — Website pop-out hover stays gold at normal stroke weight. */
@media (min-width:1101px){
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .info-panel > .preview-popout:is(:hover,:focus-visible){
    color:#FFBF00 !important;
    font-weight:400 !important;
  }
  html[data-page="home"] #services .desktop-service-panel[data-service-panel="web-design"] .info-panel > .preview-popout:is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
    stroke:#FFBF00 !important;
    stroke-width:2.4px !important;
  }
}

/* =========================================================
   2026-10-07 — requested mobile refinements and copy parity.
   ========================================================= */
@media (max-width:700px){
  /* Move LIX. slightly upward into the midpoint of the open space above the photo. */
  html[data-page="home"] #home .home-hero-title{
    top:calc(3.5% - 17px) !important;
  }

  /* Keep clear paragraph separation in About Madhi Studio. */
  html[data-page="home"] .about-madhi-byline + .about-madhi-byline{
    margin-top:18px !important;
  }

  /* Additional project-specific paragraph used under the generic mobile captions. */
  html[data-page="home"] #services .mobile-swipe-caption .portfolio-work-example,
  html[data-page="home"] #branding-logos .mobile-aerowander-service-card .portfolio-work-example,
  html[data-page="home"] #branding-logos .mobile-branding-carousel .portfolio-work-example{
    margin-top:10px !important;
    color:#FFFFFF !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:15.6px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    text-align:left !important;
  }

  /* Photography ad: mobile-only compact copy + seafoam title. */
  html[data-page="home"] #photography .photography-feature-title{
    color:#A8E6CF !important;
  }
  html[data-page="home"] #photography .photography-feature-property-copy{
    right:8px !important;
    bottom:18px !important;
    width:42% !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#FFFFFF !important;
    font-size:clamp(4.2px,1.23vw,5px) !important;
    line-height:1.18 !important;
    text-align:right !important;
  }
  html[data-page="home"] #photography .photography-feature-property-copy :is(.photography-feature-property-story,address){
    font:inherit !important;
    font-size:inherit !important;
    line-height:inherit !important;
  }
  html[data-page="home"] #photography .photography-feature-property-copy address{
    margin-top:5px !important;
    text-align:right !important;
  }

  /* Start-with-what-you-know copy: 20% larger while staying inside the existing box. */
  html[data-page="home"] .contact-form-viewport .contact-form-kicker{
    font-size:19.2px !important;
    line-height:1 !important;
  }
}

@media (min-width:701px){
  /* Maintain deliberate separation between all three About paragraphs on larger screens. */
  html[data-page="home"] .about-madhi-byline + .about-madhi-byline{
    margin-top:24px !important;
  }
}

@media (min-width:1101px){
  html[data-page="home"] #services .desktop-service-sync-feature .portfolio-work-example{
    margin-top:10px !important;
    color:#C4C4C4 !important;
    font-family:"Inter",Arial,sans-serif !important;
    font-size:14px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.45 !important;
    text-align:left !important;
  }
}

/* Gold links rest clean; underline appears only on hover/focus, desktop and mobile. */
html[data-page="home"] .contact-form-viewport :is(.attachment-browse,.contact-email-note-below-submit a){
  text-decoration:none !important;
}
html[data-page="home"] .contact-form-viewport :is(.attachment-browse,.contact-email-note-below-submit a):is(:hover,:focus-visible){
  text-decoration:underline !important;
  text-decoration-color:#fff !important;
  text-underline-offset:.15em !important;
}

/* Website pop-out: gold on hover/focus without any increase in visual weight. */
html[data-page="home"] #web-design :is(.preview-popout,.landing-preview-popout,.landing-preview-popout-mobile):is(:hover,:focus-visible){
  color:#FFBF00 !important;
  font-weight:400 !important;
}
html[data-page="home"] #web-design :is(.preview-popout,.landing-preview-popout,.landing-preview-popout-mobile):is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
  stroke:#FFBF00 !important;
  stroke-width:2.4px !important;
}

/* 2026-10-07 — mobile Photography property copy: make story match compact address treatment. */
@media (max-width:700px){
  html[data-page="home"] #photography .photography-feature-property-copy{
    text-align:right !important;
  }
  html[data-page="home"] #photography .photography-feature-property-copy .photography-feature-property-story,
  html[data-page="home"] #photography .photography-feature-property-copy address{
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:clamp(4.2px,1.23vw,5px) !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.18 !important;
    text-align:right !important;
  }
}


/* 2026-10-07 — authoritative mobile Photography property composition. */
@media (max-width:700px){
  html[data-page="home"] body.mobile-service-flow #services #photography .mobile-service-swipe .photography-feature-card .photography-feature-title{
    left:6px !important;
    right:auto !important;
    bottom:7px !important;
    width:auto !important;
    max-width:46% !important;
    transform:none !important;
    color:#A8E6CF !important;
    font-family:"Playfair Display",Georgia,serif !important;
    font-size:clamp(24px,7vw,30px) !important;
    font-weight:400 !important;
    line-height:.92 !important;
    text-align:left !important;
    white-space:nowrap !important;
  }
  html[data-page="home"] body.mobile-service-flow #services #photography .mobile-service-swipe .photography-feature-card .photography-feature-property-copy{
    position:absolute !important;
    right:6px !important;
    bottom:7px !important;
    width:43.2% !important;
    max-width:43.2% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#FFFFFF !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:clamp(8.625px,2.2125vw,10.125px) !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.18 !important;
    text-align:right !important;
    box-sizing:border-box !important;
  }
  html[data-page="home"] body.mobile-service-flow #services #photography .mobile-service-swipe .photography-feature-card .photography-feature-property-copy .photography-feature-property-story,
  html[data-page="home"] body.mobile-service-flow #services #photography .mobile-service-swipe .photography-feature-card .photography-feature-property-copy address{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    color:#FFFFFF !important;
    font:inherit !important;
    font-family:"DM Sans",Arial,sans-serif !important;
    font-size:inherit !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:inherit !important;
    text-align:right !important;
  }
  html[data-page="home"] body.mobile-service-flow #services #photography .mobile-service-swipe .photography-feature-card .photography-feature-property-copy address{
    margin-top:4px !important;
  }
}