/* Madhi Studio — branding service styles (dark only) */
.page-section{padding: 110px 0 40px;}
.page-title{font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -2px;
  line-height: .95;
  margin-bottom: 22px;}
.collection{padding: 16px 0 110px;}
.print-list{max-width: var(--service-page-max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 160px;}

/* =========================================================
   BRANDING SHOWCASE
   Uses the same Aerowander logo-system markup as the Home featured example.
   Three artwork groups share one proportional grid and aligned captions.
========================================================= */
.branding-showcase-grid{max-width:var(--service-page-max-width);margin:0 auto;padding:0 24px;display:grid;gap:56px;}
.branding-showcase-card{min-width:0;display:grid;grid-template-rows:auto auto auto;gap:7px;align-content:start;}
.branding-showcase-card .portfolio-work-caption{width:min(100%,330px);justify-self:center;text-align:left;}
.branding-showcase-card .feature-description{width:min(100%,34ch);margin:0 auto;color:#FFFFFF;font-size:14px;line-height:1.4;text-align:center;text-wrap:balance;}
.branding-showcase-artwork{display:flex;align-items:center;justify-content:center;min-width:0;background:transparent;}
.branding-showcase-artwork picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.branding-showcase-artwork img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;}

/* Desktop service overview — mirrors the landing-page What I Do right rail. */
.branding-service-desktop-overview{display:none;}

/* Aerowander — same three-item structure used by the landing-page featured work. */
.branding-showcase-aerowander .branding-system-feature-card{--tile-background:transparent;display:block;width:100%;min-width:0;background:transparent;border:0;box-shadow:none;}
.branding-showcase-aerowander .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:100% !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;}
.branding-showcase-aerowander .branding-system-collage.logo-system-three .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;}
.branding-showcase-aerowander .branding-system-label{display:none;}
.branding-showcase-aerowander .branding-system-item picture{display:flex;align-items:center;justify-content:flex-start;width:100%;}
.branding-showcase-aerowander .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 !important;}
.branding-showcase-aerowander .branding-system-collage.logo-system-three .layout-primary,
.branding-showcase-aerowander .branding-system-collage.logo-system-three .layout-inverse,
.branding-showcase-aerowander .branding-system-collage.logo-system-three .layout-mono{grid-column:1 !important;}
.branding-showcase-aerowander .branding-system-collage.logo-system-three .layout-primary{grid-row:1 !important;}
.branding-showcase-aerowander .branding-system-collage.logo-system-three .layout-inverse{grid-row:2 !important;}
.branding-showcase-aerowander .branding-system-collage.logo-system-three .layout-mono{grid-row:3 !important;}

@media (min-width:1101px){
  .page-section .container{position:relative;}
  .branding-service-desktop-overview{
    position:fixed;
    top:calc(var(--site-header-height) + 28px);
    right:var(--service-panel-scroll-safe,12px);
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:calc(var(--service-side-rail) - var(--service-panel-scroll-safe,12px));
    min-width:0;
    padding-left:4px;
    padding-right:6px;
    box-sizing:border-box;
    color:#FFFFFF;
    font-family:"Inter",Arial,sans-serif;
  }
  .branding-service-desktop-headline{
    margin:0;
    color:#FFBF00;
    font:600 21px/1.35 "Inter",Arial,sans-serif;
    text-align:left;
  }
  .branding-service-desktop-copy{
    margin:20px 0 0;
    color:#FFFFFF;
    font:400 16.2px/1.4 "Inter",Arial,sans-serif;
    text-align:left;
  }
  .branding-service-desktop-includes{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    margin-top:20px;
    color:#FFFFFF;
    text-align:left;
  }
  .branding-service-desktop-includes-label{
    margin:0 0 5px;
    color:#FFFFFF;
    font:400 16.2px/1.4 "Inter",Arial,sans-serif;
    letter-spacing:.04em;
    text-align:left;
  }
  .branding-service-desktop-includes-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
  }
  .branding-service-desktop-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;
    color:#FFFFFF;
    font:400 14px/1.45 "Inter",Arial,sans-serif;
    text-align:left;
  }
  .branding-service-desktop-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="service"] #madhiScrollTrack{display:none !important;}
  html[data-page="service"] .collection{padding:0 0 30px;}
  html[data-page="service"] .branding-showcase-grid{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr) minmax(0,.82fr);
    column-gap:clamp(48px,4.5vw,88px);
    align-items:start;
    width:var(--service-page-max-width);
    max-width:none;
    min-height:0;
    margin-left:var(--service-left-rail);
    margin-right:var(--service-side-rail);
    padding:0 var(--service-content-gutter) 18px;
    box-sizing:border-box;
  }
  html[data-page="service"] .branding-showcase-card{grid-template-rows:432px auto;gap:6px;padding-top:0;justify-items:center;}
  html[data-page="service"] .branding-showcase-aerowander .branding-system-feature-card{height:432px;display:flex;align-items:flex-start;justify-content:center;padding-top:32px;box-sizing:border-box;}
  html[data-page="service"] .branding-showcase-aerowander .branding-system-collage.logo-system-three{width:min(78%,445.2px) !important;gap:4.5px !important;}
  html[data-page="service"] .branding-showcase-aerowander .portfolio-work-caption{width:min(100%,330px) !important;justify-self:center !important;}
  html[data-page="service"] .branding-showcase-card .feature-description{margin-top:0;}
  html[data-page="service"] .branding-showcase-aerowander .branding-system-collage.logo-system-three .branding-system-item img{width:100% !important;max-width:445.2px !important;}
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork{height:432px;padding-top:32px;box-sizing:border-box;align-items:center;justify-content:center;}
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork picture{display:flex;align-items:center;justify-content:flex-start;width:min(100%,330px);height:100%;margin:0 auto;}
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork img{display:block !important;visibility:visible !important;opacity:1 !important;object-fit:contain;object-position:left center;margin:0;}
  html[data-page="service"] .branding-showcase-aoe .branding-showcase-artwork img{width:100%;height:100%;max-width:280px;max-height:360px;transform:translateX(-18px);}
  html[data-page="service"] .branding-showcase-aoi .branding-showcase-artwork img{width:100%;height:100%;max-width:270px;max-height:330px;}
  html[data-page="service"] .branding-showcase-card .portfolio-work-caption{width:min(100%,330px) !important;justify-self:center !important;}
}

@media (max-width:1100px){
  .branding-showcase-grid{grid-template-columns:1fr;gap:72px;padding:0 20px 48px;}
  .branding-showcase-card{max-width:760px;width:100%;margin:0 auto;}
  .branding-showcase-aerowander .branding-system-collage.logo-system-three{gap:6px;}
  .branding-showcase-artwork{min-height:320px;}
  .branding-showcase-artwork img{max-width:72%;max-height:300px;}
}

@media (max-width:700px){
  .branding-showcase-grid{gap:calc(var(--mobile-feature-row-separation, 200px) / 2);padding:0;}
  .branding-showcase-card{width:100%;max-width:520px;margin:0 auto;justify-items:center;}
  .branding-showcase-aerowander .branding-system-feature-card{width:100%;}
  .branding-showcase-aerowander .branding-system-collage.logo-system-three{width:100% !important;gap:10px !important;margin:0 auto !important;}
  .branding-showcase-aerowander .branding-system-collage.logo-system-three .branding-system-item{justify-content:center !important;}
  .branding-showcase-aerowander .branding-system-item picture{justify-content:center !important;}
  .branding-showcase-aerowander .branding-system-collage.logo-system-three .branding-system-item img{width:100% !important;max-width:100% !important;margin:0 auto !important;object-position:center !important;}
  .branding-showcase-artwork{width:100%;min-height:0;height:auto;justify-content:center;}
  .branding-showcase-artwork picture{height:auto;}
  :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork{height:clamp(300px,78vw,350px);align-items:center;justify-content:center;}
  :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork picture{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
  :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork img{display:block;width:auto;height:92%;max-width:88%;max-height:92%;margin:0 auto;object-fit:contain;object-position:center;}
  .branding-showcase-card .portfolio-work-caption{width:100% !important;max-width:none !important;justify-self:stretch !important;}
  .branding-showcase-card .feature-description{width:min(100%,34ch);margin:12px auto 0;font-size:13px;text-align:center;}
}

.print-row{display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(250px, .62fr);
  gap: 28px;
  align-items: stretch;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;}
.print-row.reveal{opacity: 1; transform: translateY(0);}
.info-panel{padding-top: 6px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: .92;
  align-self: stretch;
  justify-content: flex-start;}
.info-panel h2{font-size: 22px;
  font-weight: 600;
  
  letter-spacing: -.3px;}
.caption{font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: -15px;
  text-transform: uppercase;
  letter-spacing: .08em;}
.feature-description{font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
  margin-top: 8px;}
.image-card{width: 100%;
  height: 600px;
  min-height: 0;
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;}
.branding-artwork{width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-aqua);
  padding: 42px;}
.branding-artwork img{width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;}
.web-preview-frame{width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--brand-cyan);}
.preview-popout{position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  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) 94%, 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;}
.preview-popout:hover, .preview-popout:focus-visible{transform: translateY(-1px); border-color: transparent; background: var(--accent); color: var(--brand-aqua);}
.vector-card-stack{display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
  align-items: stretch;}
.vector-info-card{width: 100%;
  min-height: 112px;
  background: var(--brand-cyan);
  border: none;
  border-radius: 0;
  padding: 14px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-deep) 4%, transparent);
  display: flex;
  flex-direction: column;}
.vector-info-card h3{font-size: 13px;
  font-weight: 600;
  
  margin-bottom: 8px;}
.vector-info-card p{font-size: 11px;
  line-height: 1.45;
  color: var(--muted);}
@media (max-width: 950px){.print-row{grid-template-columns: 1fr; gap: 24px;}
.info-panel{padding-top: 0;}
.image-card{height: min(600px, 68vw); min-height: 380px;}}
@media (max-width: 768px){.collection{padding-left:16px; padding-right:16px;}
.print-list{padding-left:0; padding-right:0; gap:44px;}
.branding-artwork{padding: 22px;}}
.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: 1fr 1fr 1fr;
  gap: 12px;
  background: var(--brand-deep);}
.branding-system-item{position: relative;
  border-radius: 0;
  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;
  padding: 30px 14px 14px;
  display: flex;
  align-items: center;
  justify-content: center;}
.branding-system-item img{position: static;
  inset: auto;
  transform: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;}
.branding-system-label{position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--brand-aqua) 82%, transparent);
  letter-spacing: .03em;}
.layout-primary{grid-column: 1 / 3; grid-row: 1;}
.layout-stacked{grid-column: 3; grid-row: 1 / 3;}
.layout-wordmark{grid-column: 1 / 3; grid-row: 2;}
.layout-icon{grid-column: 1; grid-row: 3;}
.layout-inverse{grid-column: 2; grid-row: 3;}
.layout-extra{grid-column: 3; grid-row: 3;}
.layout-mono{grid-column: 1 / -1; grid-row: 4; display:none;}
.branding-system-collage .layout-mono{display:flex;}
.branding-system-collage{grid-template-rows: 1.1fr 1fr .95fr;}
.layout-mono{grid-column: 3; grid-row: 2; background: var(--brand-deep);}
.layout-extra{background: var(--brand-deep);}
.layout-inverse{background: var(--brand-deep);}
.layout-icon{background: var(--brand-deep);}
.layout-stacked{background: var(--brand-deep);}
.web-preview-stage, .web-preview-shell{width: 100%; height: 100%;}
.web-preview-stage{position: relative; display: flex; align-items: center; justify-content: center; background: var(--brand-cyan);}
.web-preview-shell{width: min(calc(100% - 40px), 1120px);
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  background: var(--brand-cyan);}
.web-preview-frame{width: 100%; height: 100%; background: var(--brand-cyan);}
.preview-popout{position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-aqua) 97%, transparent);
  color: var(--brand-deep);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-deep) 10%, transparent);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;}
.preview-popout svg{width: 20px; height: 20px;}
.preview-popout:hover, .preview-popout:focus-visible{transform: translateY(-1px); background: var(--accent); color: var(--brand-aqua); border-color: transparent;}
@media (max-width: 950px){.branding-system-collage{grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, minmax(80px, 1fr));}
.layout-primary{grid-column: 1 / -1; grid-row: 1;}
.layout-wordmark{grid-column: 1 / -1; grid-row: 2;}
.layout-stacked{grid-column: 1; grid-row: 3 / 5;}
.layout-icon{grid-column: 2; grid-row: 3;}
.layout-inverse{grid-column: 2; grid-row: 4;}
.layout-extra{grid-column: 1; grid-row: 5;}
.layout-mono{grid-column: 2; grid-row: 5;}
.web-preview-shell{width: min(calc(100% - 28px), 1040px);}}
.branding-system-item img{background: transparent;}
.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-collage .layout-stacked img, .branding-system-collage .layout-icon img{width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;}
.branding-system-collage .layout-mono img{width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;}
.web-preview-stage{padding: 10px !important;}
.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;}
.branding-system-collage{grid-template-columns: 1.4fr 1.4fr 1fr !important;
  grid-template-rows: 1.08fr .92fr 1fr !important;}
.branding-system-collage .layout-primary{grid-column: 1 / 3 !important; grid-row: 1 !important;}
.branding-system-collage .layout-stacked{grid-column: 3 !important; grid-row: 1 !important;}
.branding-system-collage .layout-wordmark{grid-column: 1 / 3 !important; grid-row: 2 !important;}
.branding-system-collage .layout-mono{grid-column: 3 !important; grid-row: 2 !important; display: flex !important;}
.branding-system-collage .layout-icon{grid-column: 1 !important; grid-row: 3 !important;}
.branding-system-collage .layout-inverse{grid-column: 2 !important; grid-row: 3 !important;}
.branding-system-collage .layout-extra{grid-column: 3 !important; grid-row: 3 !important;}
.branding-system-collage .layout-primary img{width: 70% !important; height: 72% !important; max-width: 70% !important; max-height: 72% !important;}
.branding-system-collage .layout-wordmark img{width: 64% !important; height: 62% !important; max-width: 64% !important; max-height: 62% !important;}
.branding-system-collage .layout-stacked img{width: 68% !important; height: 70% !important; max-width: 68% !important; max-height: 70% !important;}
.branding-system-collage .layout-mono img{width: 74% !important; height: 66% !important; max-width: 74% !important; max-height: 66% !important;}
.branding-system-collage .layout-icon img{width: 48% !important; height: 58% !important; max-width: 48% !important; max-height: 58% !important;}
.branding-system-collage .layout-inverse img, .branding-system-collage .layout-extra img{width: 72% !important; height: 64% !important; max-width: 72% !important; max-height: 64% !important;}
.web-preview-stage{padding: 8px 14px !important;}
.web-preview-shell{height: calc(100% - 16px) !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  aspect-ratio: 16 / 9 !important;
  margin: auto !important;}
.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-system-collage .branding-system-item{background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0 !important;}
.branding-system-collage .layout-primary{grid-column:1 / 3 !important; grid-row:1 !important;}
.branding-system-collage .layout-wordmark{grid-column:1 / 3 !important; grid-row:2 !important;}
.branding-system-collage .layout-icon{grid-column:1 !important; grid-row:3 !important;}
.branding-system-collage .layout-stacked{grid-column:2 !important; grid-row:3 !important;}
.branding-system-collage .layout-mono{grid-column:3 !important; grid-row:1 !important;}
.branding-system-collage .layout-extra{grid-column:3 !important; grid-row:2 !important;}
.branding-system-collage .layout-inverse{grid-column:3 !important; grid-row:3 !important;}
.branding-system-collage .branding-system-item img{width:70% !important;height:70% !important;max-width:70% !important;max-height:70% !important;}
.branding-system-collage .layout-wordmark img{width:64% !important;height:58% !important;max-width:64% !important;max-height:58% !important;}
.branding-system-collage .layout-icon img{width:42% !important;height:54% !important;max-width:42% !important;max-height:54% !important;}
.branding-system-collage .layout-stacked img{width:58% !important;height:64% !important;max-width:58% !important;max-height:64% !important;}
.branding-system-collage .layout-mono img, .branding-system-collage .layout-extra img, .branding-system-collage .layout-inverse img{width:72% !important;height:68% !important;max-width:72% !important;max-height:68% !important;}
.web-preview-stage{padding: 0 !important;
  background: transparent;
  overflow: hidden !important;}
.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-preview-frame{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-system-collage{grid-template-columns: 1.15fr 1.15fr 1fr !important;}
.branding-system-collage .layout-primary img{width: 74% !important; height: 74% !important; max-width: 74% !important; max-height: 74% !important;}
.branding-system-collage .layout-wordmark img{width: 70% !important; height: 64% !important; max-width: 70% !important; max-height: 64% !important;}
.branding-system-collage .layout-icon img{width: 70% !important; height: 76% !important; max-width: 70% !important; max-height: 76% !important;}
.branding-system-collage .layout-stacked img{width: 80% !important; height: 82% !important; max-width: 80% !important; max-height: 82% !important;}
.branding-system-collage .layout-mono img, .branding-system-collage .layout-extra img, .branding-system-collage .layout-inverse img{width: 88% !important; height: 84% !important; max-width: 88% !important; max-height: 84% !important;}
@media (min-width: 951px){
.print-row:first-child{grid-template-columns: var(--service-media-width) 348px !important;
    gap: 24px !important;}
.print-row:first-child .info-panel{width: 348px !important;
    max-width: 348px !important;}}
.print-row:first-child .image-card{width: var(--service-media-width) !important;
  max-width: 100% !important;
  height: var(--service-media-height) !important;
  min-height: 0 !important;
  align-self: center !important;}
.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-system-collage .branding-system-item{display: flex !important;
  align-items: center !important;
  justify-content: center !important;}
.branding-system-collage .layout-primary img{width: 80% !important; height: 80% !important; max-width: 80% !important; max-height: 80% !important;}
.branding-system-collage .layout-wordmark img{width: 76% !important; height: 70% !important; max-width: 76% !important; max-height: 70% !important;}
.branding-system-collage .layout-icon img{width: 82% !important; height: 88% !important; max-width: 82% !important; max-height: 88% !important;}
.branding-system-collage .layout-stacked img{width: 90% !important; height: 92% !important; max-width: 90% !important; max-height: 92% !important;}
.branding-system-collage .layout-mono img, .branding-system-collage .layout-inverse img, .branding-system-collage .layout-extra img{width: 94% !important; height: 88% !important; max-width: 94% !important; max-height: 88% !important;}
.vector-info-card{box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;}
.branding-system-collage{background: var(--brand-deep);}
.branding-system-collage .layout-primary img{width: 96% !important; height: 92% !important; max-width: 96% !important; max-height: 92% !important;}
.branding-system-collage .layout-wordmark img{width: 94% !important; height: 86% !important; max-width: 94% !important; max-height: 86% !important;}
.branding-system-collage .layout-icon img{width: 96% !important; height: 96% !important; max-width: 96% !important; max-height: 96% !important;}
.branding-system-collage .layout-stacked img{width: 112% !important; height: 112% !important; max-width: 112% !important; max-height: 112% !important;}
.branding-system-collage .layout-mono img, .branding-system-collage .layout-inverse img, .branding-system-collage .layout-extra img{width: 106% !important; height: 100% !important; max-width: 106% !important; max-height: 100% !important;}
.branding-system-label{font-size: 15.125px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;}
.branding-feature-row .branding-system-collage{transform: translateY(18px) !important;}
.branding-feature-row .image-card, .branding-feature-row .branding-system-collage{background: var(--brand-deep);}
.branding-feature-row .branding-system-label{color: var(--brand-aqua);}
@media (min-width: 951px){.branding-feature-row{grid-template-columns: 882px 348px !important;
    gap: 24px !important;}
.branding-feature-row .image-card{width: 882px !important;
    max-width: 882px !important;
    height: 495px !important;
    min-height: 495px !important;
    border-radius: 0 !important;}
.branding-feature-row .branding-system-collage{height: 495px !important;
    min-height: 495px !important;
    inset: 0 !important;
    padding: 16.2px !important;
    gap: 10.8px !important;
    transform: translateY(16.2px) !important;}
.branding-feature-row .branding-system-label{top: 9px !important;
    left: 10.8px !important;
    font-size: 13.6125px !important;}}
@media (min-width: 951px){.print-row.branding-feature-row:first-child{grid-template-columns: 882px 348px !important;}
.print-row.branding-feature-row:first-child .image-card{width: 882px !important;
    max-width: 882px !important;
    height: 495px !important;
    min-height: 495px !important;}}
:root{--service-page-header: var(--site-header-height, 58px);
  --service-page-viewport: calc(100vh - var(--service-page-header));
  --service-media-width: min(1120px, calc(100vw - 430px));
  --service-media-height: clamp(550px, 38vw, 630px);
  --service-page-max-width: min(1540px, calc(100vw - 48px));
  --madhi-light-panel: var(--brand-cyan);
  --service-title-top: 54px;
  --service-first-row-top-space: 158px;}
html{scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth;}
body{background: var(--brand-aqua);}
main{position: relative;}
.page-section{position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 20 !important;
  padding: var(--service-title-top) 0 0 !important;
  pointer-events: none !important;}
.page-section .page-title{margin: 0 0 18px !important;}
.page-section .section-divider{margin: 0 !important;}
.collection{padding: 0 !important;}
.print-list{gap: 0 !important;}
.print-row{min-height: var(--service-page-viewport) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  padding: 34px 0 !important;
  box-sizing: border-box !important;
  align-content: center !important;}
.print-row:first-child{padding-top: var(--service-first-row-top-space) !important;}
.vector-info-card, .city-demo, .evacuation-demo{background: var(--madhi-light-panel);}
#site-footer{scroll-snap-align: end;}
@media (max-width: 950px){html{scroll-snap-type: y proximity !important;}
.page-section{position: relative !important;
    padding: 28px 0 18px !important;}
.print-row, .print-row:first-child{min-height: auto !important;
    padding: 36px 0 !important;}}
@media (max-width: 760px){:root{--service-page-header: 0px;}
.page-section{padding-top: 34px !important;}}
.motion-inline-svg, .soccer-pitch-inline{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.motion-inline-svg > svg, .soccer-pitch-inline > svg{width:100%; height:100%; display:block;}
.turntable-row .motion-inline-svg{width:90%; height:90%; margin:auto;}
.splitflap-row .motion-inline-svg{width:100%; height:70%; margin:auto;}
.evacuation-row .motion-inline-svg{width:100%; height:100%; margin:0;}
.evacuation-row .image-card{background:var(--brand-aqua);}
.evacuation-button-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.evacuation-room-btn::before{width:5px; background:var(--accent);}
@media (min-width: 951px){.wanderports-ui-row, .soccer-pitch-row, .wanderports-row, .turntable-row, .splitflap-row{grid-template-columns: minmax(0, 2.55fr) minmax(250px, 0.52fr) !important;
    gap: 28px !important;}}
.turntable-row .motion-inline-svg{width: 98% !important;
  height: 94% !important;}
.splitflap-row .motion-inline-svg{width: 100% !important;
  height: 84% !important;}
.soccer-pitch-row .soccer-pitch-inline{width: 100% !important;
  height: 100% !important;}
.soccer-pitch-row .image-card{aspect-ratio: 493 / 277 !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: center !important;}
.soccer-pitch-row .soccer-pitch-inline, .soccer-pitch-row .soccer-pitch-inline > svg{width: 100% !important;
  height: 100% !important;}
.vector-card-stack.stack-format-first{width: fit-content !important;
  max-width: 100% !important;
  grid-template-columns: repeat(2, minmax(190px, 236px)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: start !important;}
.vector-card-stack.stack-format-first > .format-card{grid-column: 1 / -1;
  min-height: 104px !important;
  max-width: 484px !important;}
.a380-row .svg-artwork img{width: 88.2% !important;
  height: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-position: center center !important;}
.soccer-pitch-row .soccer-demo{width: 100% !important;
  margin-top: 14px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent;}
@media (max-width: 950px){.vector-card-stack.stack-format-first{grid-template-columns: 1fr !important;}
.vector-card-stack.stack-format-first > .format-card{grid-column: auto;}}
.print-row.has-tight-info{grid-template-columns: minmax(0, 2.68fr) max-content !important; gap: 24px !important;}
.print-row.has-tight-info .info-panel{max-width: 500px !important;}
.print-row.has-tight-info .image-card{width: 100% !important;}
@media (max-width: 950px){.print-row.has-tight-info{grid-template-columns: 1fr !important;}
.print-row.has-tight-info .info-panel{max-width: 100% !important;}}
@media (min-width: 951px){.a380-row.has-tight-info, .soccer-pitch-row.has-tight-info, .turntable-row.has-tight-info, .splitflap-row.has-tight-info{grid-template-columns: minmax(0, 1fr) 372px !important;
    gap: 24px !important;}
.a380-row.has-tight-info .info-panel, .soccer-pitch-row.has-tight-info .info-panel, .turntable-row.has-tight-info .info-panel, .splitflap-row.has-tight-info .info-panel{width: 372px !important;
    max-width: 372px !important;
    min-width: 0 !important;}
.a380-row .vector-card-stack.stack-format-first, .soccer-pitch-row .vector-card-stack.stack-format-first{width: 372px !important;
    max-width: 372px !important;
    grid-template-columns: repeat(2, 180px) !important;
    gap: 12px !important;}
.a380-row .vector-card-stack.stack-format-first > .format-card, .soccer-pitch-row .vector-card-stack.stack-format-first > .format-card{width: 372px !important;
    max-width: 372px !important;}
.turntable-row .city-demo{width: 350px !important;
    max-width: 350px !important;}}
.wanderports-ui-row .image-card{height: 600px !important;}
.taxi-plane-row .image-card, .turntable-row .image-card{height: 600px !important;}
.splitflap-row .image-card{height: 520px !important;}
.soccer-pitch-row .image-card{width: 100% !important;
  aspect-ratio: 493 / 277 !important;
  height: auto !important;
  min-height: 0 !important;}
@media (max-width: 950px){.a380-row.has-tight-info .info-panel, .soccer-pitch-row.has-tight-info .info-panel, .turntable-row.has-tight-info .info-panel, .splitflap-row.has-tight-info .info-panel, .a380-row .vector-card-stack.stack-format-first, .soccer-pitch-row .vector-card-stack.stack-format-first, .turntable-row .city-demo{width: 100% !important;
    max-width: 100% !important;}}
@media (min-width: 951px){.a380-row.has-tight-info, .soccer-pitch-row.has-tight-info{grid-template-columns: minmax(0, 1fr) 312px !important;
    gap: 22px !important;}
.a380-row.has-tight-info .info-panel, .soccer-pitch-row.has-tight-info .info-panel{width: 312px !important;
    max-width: 312px !important;}
.a380-row .vector-card-stack.stack-format-first, .soccer-pitch-row .vector-card-stack.stack-format-first{width: 312px !important;
    max-width: 312px !important;
    grid-template-columns: 150px 150px !important;
    gap: 12px !important;}
.a380-row .vector-card-stack.stack-format-first > .format-card, .soccer-pitch-row .vector-card-stack.stack-format-first > .format-card{width: 312px !important;
    max-width: 312px !important;
    min-height: 96px !important;}
.turntable-row.has-tight-info, .splitflap-row.has-tight-info{grid-template-columns: minmax(0, 1fr) 310px !important;
    gap: 22px !important;}
.turntable-row.has-tight-info .info-panel, .splitflap-row.has-tight-info .info-panel{width: 310px !important;
    max-width: 310px !important;}
.turntable-row .city-demo{width: 296px !important;
    max-width: 296px !important;}}
.a380-row .vector-info-card, .soccer-pitch-row .vector-info-card{padding: 12px !important;}
.feature-copy-inline{display: flex;
  align-items: flex-start;
  gap: 12px;}
.feature-copy-inline .feature-description{flex: 1 1 auto;
  margin-bottom: 0;}
.preview-popout{width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 2px solid var(--accent);
  border-radius: 999px !important;
  background: var(--brand-aqua);
  color: var(--brand-deep);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-deep) 10%, transparent);}
.preview-popout:hover, .preview-popout:focus-visible{background: var(--accent);
  color: var(--brand-aqua);
  border-color: transparent;}
.preview-popout svg{width: 18px !important; height: 18px !important;}
.web-preview-frame{border: 0;}
.image-card.web-preview-card, .image-card.web-preview-card .web-preview-stage{aspect-ratio: 16 / 9;}
.image-card.web-preview-card .web-preview-shell{width: 100%;
  height: 100%;}
.image-card.web-preview-card .preview-popout{align-self: flex-start;}
.branding-system-collage .branding-system-item img{background: transparent;}
@media (max-width: 820px){.feature-copy-inline{align-items: center;}}
@media (min-width: 951px){.wanderports-ui-row, .turntable-row.has-tight-info{grid-template-columns: var(--service-media-width) 348px !important;
    gap: 24px !important;}
.wanderports-ui-row .info-panel, .turntable-row.has-tight-info .info-panel{width: 348px !important;
    max-width: 348px !important;}}
.wanderports-ui-row .image-card, .turntable-row .image-card{width: var(--service-media-width) !important;
  max-width: 100% !important;
  height: var(--service-media-height) !important;
  min-height: 0 !important;
  align-self: center !important;}
.turntable-row .motion-inline-svg{width: 100% !important;
  height: 100% !important;
  max-width: 650px !important;
  margin: 0 auto !important;}
:root{--service-title-top: 51px;
  --service-first-row-top-space: 124px;
  --service-footer-fit: 56px;}
.print-list{max-width: var(--service-page-max-width) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;}
.page-section{padding-top: var(--service-title-top) !important;}
.page-section .page-title{margin-bottom: 18px !important;}
.print-row{align-items: start !important;
  align-content: start !important;}
.print-row:first-child{padding-top: var(--service-first-row-top-space) !important;}
.print-row:last-child{min-height: calc(var(--service-page-viewport) - var(--service-footer-fit)) !important;
  padding-bottom: 0 !important;}
@media (min-width: 951px){.branding-feature-row, .wanderports-ui-row, .turntable-row.has-tight-info, .web-feature-row{grid-template-columns: var(--service-media-width) max-content !important;
    gap: 24px !important;
    justify-content: start !important;}
.branding-feature-row .image-card, .wanderports-ui-row .image-card, .turntable-row.has-tight-info .image-card, .web-feature-row .image-card{width: var(--service-media-width) !important;
    max-width: var(--service-media-width) !important;
    height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;
    border-radius: 0 !important;
    align-self: start !important;}
.wanderports-ui-row .info-panel, .turntable-row.has-tight-info .info-panel, .web-feature-row .info-panel{width: 348px !important;
    max-width: 348px !important;}
.branding-feature-row .info-panel{width: 262px !important;
    max-width: 262px !important;}}
.branding-feature-row .image-card, .web-feature-row .image-card, .wanderports-ui-row .image-card, .turntable-row.has-tight-info .image-card{overflow: hidden !important;}
.branding-feature-row .branding-system-collage{position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  padding: 18px !important;
  border-radius: 0 !important;
  background: var(--brand-deep);
  grid-template-columns: 1.15fr 1.15fr 1fr !important;
  grid-template-rows: 1.08fr 0.92fr 1fr !important;}
.branding-feature-row .branding-system-item{display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;}
.branding-feature-row .layout-stacked img{width: 112% !important;
  height: 112% !important;
  max-width: 112% !important;
  max-height: 112% !important;
  object-position: center !important;}
.branding-feature-row .vector-card-stack{width: fit-content !important;
  max-width: 220px !important;}
.branding-feature-row .vector-info-card{min-height: 0 !important;
  width: 220px !important;
  padding: 14px 16px !important;}
.web-feature-row .web-preview-stage, .web-feature-row .web-preview-shell{width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent;
  border-radius: 0 !important;}
.web-feature-row .web-preview-frame{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;}
.turntable-row .motion-inline-svg{width: 100% !important;
  height: 100% !important;
  max-width: 650px !important;
  margin: 0 auto !important;}
#site-footer{margin-top: calc(var(--service-footer-fit) * -1) !important;
  position: relative !important;
  z-index: 30 !important;}
#site-footer footer, footer{padding-top: 12px !important;}
@media (max-width: 950px){#site-footer{margin-top: 0 !important;}
.branding-feature-row .image-card, .wanderports-ui-row .image-card, .turntable-row.has-tight-info .image-card, .web-feature-row .image-card{width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;}
.branding-feature-row .branding-system-collage{position: relative !important;
    height: var(--service-media-height) !important;}
.web-feature-row .web-preview-frame{width: 161.2903226% !important;
    height: 161.2903226% !important;}}
:root{--service-footer-height: 56px;}
.print-row, .print-row:first-child{padding-top: var(--service-row-top) !important;
  padding-bottom: 0 !important;
  align-items: start !important;
  align-content: start !important;}
.print-row:last-child{min-height: calc(var(--service-page-viewport) - var(--service-footer-height)) !important;}
#site-footer{margin-top: 0 !important;
  position: relative !important;
  z-index: 30 !important;
  min-height: var(--service-footer-height) !important;
  height: var(--service-footer-height) !important;}
#site-footer footer, footer{height: var(--service-footer-height) !important;
  min-height: var(--service-footer-height) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;}
.vector-card-stack{justify-items: start !important;
  align-items: start !important;}
.vector-info-card{box-sizing: border-box !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  justify-self: start !important;}
.vector-info-card h3, .vector-info-card p{max-width: 100% !important;}
.vector-card-stack.stack-format-first{width: fit-content !important;
  max-width: 100% !important;
  grid-template-columns: max-content max-content !important;}
.vector-card-stack.stack-format-first > .format-card{width: max-content !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;}
.branding-feature-row .vector-card-stack, .branding-feature-row .vector-info-card{width: max-content !important;
  max-width: 100% !important;}
.info-title-action-row{display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;}
.info-title-copy{min-width: 0 !important;}
.info-title-action-row .caption{margin-bottom: 4px !important;}
.info-title-action-row h2{margin: 0 !important;}
.info-title-action-row .preview-popout{position: static !important;
  flex: 0 0 42px !important;
  margin: 0 !important;}
.web-feature-row .feature-description{margin-top: 2px !important;}
@media (max-width: 950px){.print-row, .print-row:first-child{padding-top: 36px !important;}
.print-row:last-child{min-height: auto !important;}
#site-footer{height: auto !important;
    min-height: 0 !important;}
#site-footer footer, footer{height: auto !important;
    min-height: 0 !important;}
.vector-card-stack.stack-format-first{grid-template-columns: 1fr !important;}}
.branding-feature-row .branding-system-collage{background: var(--brand-deep);}
.branding-feature-row .layout-primary img{width: 96% !important; height: 92% !important; max-width: 96% !important; max-height: 92% !important;}
.branding-feature-row .layout-wordmark img{width: 94% !important; height: 86% !important; max-width: 94% !important; max-height: 86% !important;}
.branding-feature-row .layout-icon img{width: 96% !important; height: 96% !important; max-width: 96% !important; max-height: 96% !important;}
.branding-feature-row .layout-stacked img{width: 112% !important; height: 112% !important; max-width: 112% !important; max-height: 112% !important;}
.branding-feature-row .layout-mono img, .branding-feature-row .layout-inverse img, .branding-feature-row .layout-extra img{width: 106% !important; height: 100% !important; max-width: 106% !important; max-height: 100% !important;}
@media (min-width: 951px){body .print-row.print-row{grid-template-columns: var(--service-media-width) 348px !important;
    gap: 24px !important;
    justify-content: start !important;}
body .print-row.print-row .image-card{width: var(--service-media-width) !important;
    max-width: var(--service-media-width) !important;
    height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;
    aspect-ratio: auto !important;
    align-self: start !important;}
body .print-row.print-row .info-panel{width: 348px !important;
    max-width: 348px !important;
    min-width: 0 !important;}}
.info-panel .vector-card-stack{width: fit-content !important;
  max-width: 100% !important;
  justify-items: start !important;}
.info-panel .vector-info-card{width: fit-content !important;
  min-width: 150px !important;
  max-width: 220px !important;
  min-height: 112px !important;
  padding: 14px 16px !important;
  justify-self: start !important;}
.info-panel .vector-info-card h3, .info-panel .vector-info-card p{width: auto !important;
  max-width: 188px !important;}
.taxi-plane-row .taxi-plane-card, .taxi-plane-row .taxi-plane-frame{background: transparent;}
.taxi-plane-row .taxi-plane-frame{width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0;}
@media (max-width: 950px){body .print-row.print-row .image-card{width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 380px !important;}}
.branding-feature-row .layout-stacked img{width: 145% !important;
  height: 145% !important;
  max-width: 145% !important;
  max-height: 145% !important;
  transform: translateY(8%) !important;}
.info-panel .vector-card-stack{justify-items: start !important;
  align-items: start !important;}
.info-panel .vector-info-card{box-sizing: border-box !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 220px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  justify-self: start !important;}
.info-panel .vector-info-card h3, .info-panel .vector-info-card p{width: auto !important;
  max-width: 188px !important;}
.a380-row .vector-card-stack.stack-format-first > .format-card, .soccer-pitch-row .vector-card-stack.stack-format-first > .format-card{grid-column: 1 !important;
  width: 150px !important;
  max-width: 150px !important;
  min-width: 150px !important;}
.web-feature-row .vector-info-card, .branding-feature-row .vector-info-card{width: max-content !important;
  min-width: 0 !important;
  max-width: 220px !important;}
.splitflap-row .motion-inline-svg{width: 100% !important;
  height: 100% !important;
  margin: 0 !important;}
.splitflap-row .image-card{height: 455px !important;
  min-height: 455px !important;
  background: var(--brand-deep);}
@media (min-width: 951px){.splitflap-row.has-tight-info{grid-template-columns: var(--service-media-width) 310px !important;
    gap: 22px !important;
    justify-content: start !important;}
.splitflap-row.has-tight-info .image-card{width: var(--service-media-width) !important;
    max-width: var(--service-media-width) !important;}}
@media (max-width: 950px){.splitflap-row .image-card{height: 384px !important;
    min-height: 384px !important;}}
.splitflap-row .motion-inline-svg, .splitflap-row .svg-artwork, .splitflap-row .solari-demo, .splitflap-row .solari-board{width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;}
.splitflap-row .image-card{background: var(--brand-deep);
  overflow: hidden !important;
  border-radius: 0 !important;}
@media (min-width: 951px){body .splitflap-row.has-tight-info{grid-template-columns: var(--service-media-width) 348px !important;
    gap: 24px !important;
    justify-content: start !important;
    align-items: start !important;}
body .splitflap-row.has-tight-info .image-card{width: var(--service-media-width) !important;
    max-width: var(--service-media-width) !important;
    height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;
    aspect-ratio: auto !important;}
body .splitflap-row.has-tight-info .info-panel{width: 348px !important;
    max-width: 348px !important;
    min-width: 0 !important;
    align-self: start !important;}
.splitflap-row .city-demo{width: 326px !important;
    max-width: 326px !important;
    box-sizing: border-box !important;}}
@media (max-width: 950px){.splitflap-row .image-card{width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 440px !important;
    aspect-ratio: 980 / 550 !important;}
.splitflap-row .info-panel, .splitflap-row .city-demo{width: 100% !important;
    max-width: 100% !important;}}
.a380-row .vector-card-stack.stack-format-first, .soccer-pitch-row .vector-card-stack.stack-format-first{width: 348px !important;
  max-width: 348px !important;
  display: grid !important;
  grid-template-columns: 168px 168px !important;
  grid-template-areas:
    "format ."
    "use strengths" !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;}
.a380-row .vector-card-stack.stack-format-first > .format-card, .soccer-pitch-row .vector-card-stack.stack-format-first > .format-card{grid-area: format !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  height: auto !important;}
.a380-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(2), .soccer-pitch-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(2){grid-area: use !important;}
.a380-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(3), .soccer-pitch-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(3){grid-area: strengths !important;}
.a380-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(2), .a380-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(3), .soccer-pitch-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(2), .soccer-pitch-row .vector-card-stack.stack-format-first > .vector-info-card:nth-child(3){width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  height: 100% !important;
  align-self: stretch !important;}
.turntable-row .city-demo{min-height: 0 !important;
  height: auto !important;
  padding: 14px 16px !important;}
.turntable-row .city-demo .hint{margin: 0 !important;}
@media (min-width: 951px){body .splitflap-row.has-tight-info .image-card{width: var(--service-media-width) !important;
    max-width: var(--service-media-width) !important;
    height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;
    border-radius: 0 !important;
    overflow: hidden !important;}}
@media (max-width: 950px){.a380-row .vector-card-stack.stack-format-first, .soccer-pitch-row .vector-card-stack.stack-format-first{width: 100% !important;
    max-width: 348px !important;}}
.splitflap-row .image-card{position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: var(--brand-deep);}
.splitflap-row .svg-artwork{position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;}
.splitflap-row .solari-demo, .splitflap-row .solari-board{width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;}
@media (min-width: 951px){body .splitflap-row.has-tight-info{display: grid !important;
    grid-template-columns: var(--service-media-width) 348px !important;
    gap: 24px !important;
    justify-content: start !important;
    align-items: start !important;}
body .splitflap-row.has-tight-info .image-card{width: var(--service-media-width) !important;
    max-width: var(--service-media-width) !important;
    height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;
    aspect-ratio: auto !important;}
body .splitflap-row.has-tight-info .info-panel{width: 348px !important;
    max-width: 348px !important;
    min-width: 0 !important;}}
@media (min-width: 951px){body .splitflap-row.has-tight-info{display: grid !important;
    grid-template-columns: var(--service-media-width) 348px !important;
    column-gap: 24px !important;
    width: 1352px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: start !important;
    align-items: start !important;}
body .splitflap-row.has-tight-info .image-card{grid-column: 1 !important;
    grid-row: 1 !important;}
body .splitflap-row.has-tight-info .info-panel{grid-column: 2 !important;
    grid-row: 1 !important;
    width: 348px !important;
    max-width: 348px !important;
    min-width: 0 !important;
    align-self: start !important;
    padding-top: 6px !important;}
body .splitflap-row.has-tight-info .city-demo{width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;}}
.info-panel .vector-info-card{width: max-content !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;}
.info-panel .vector-info-card h3, .info-panel .vector-info-card p{width: max-content !important;
  max-width: calc(100% - 0px) !important;}
.preview-popout{background: var(--brand-aqua);}
.wanderports-ui-caption .vector-card-stack{width: 220px !important;
  max-width: 220px !important;}
.wanderports-ui-caption .vector-info-card{width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;}
.wanderports-ui-caption .vector-info-card h3, .wanderports-ui-caption .vector-info-card p{width: auto !important;
  max-width: 188px !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;}
html .preview-popout, html[data-theme="dark"] .preview-popout{border: 2px solid var(--accent);
  transform: none !important;
  box-sizing: border-box !important;}
html .preview-popout:is(:hover, :focus-visible), html[data-theme="dark"] .preview-popout:is(:hover, :focus-visible){transform: none !important;}
@media (max-width: 950px){html[data-page="service"]{scroll-snap-type: none !important;}
html[data-page="service"] .page-section{padding:18px 0 6px !important;}
html[data-page="service"] .collection{padding:6px 20px 56px !important;}
html[data-page="service"] .print-list{padding:0 !important;gap:44px !important;}
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: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;}
html[data-page="service"] .image-card{width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;}
html[data-page="service"] .branding-feature-row .image-card{height:var(--service-media-height) !important;
    min-height:var(--service-media-height) !important;
    aspect-ratio:auto !important;}
html[data-page="service"] .a380-row .image-card, html[data-page="service"] .soccer-pitch-row .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, html[data-page="service"] .wanderports-ui-row .image-card, html[data-page="service"] .runway-inspection-row .image-card, html[data-page="service"] .aoe-learning-row .image-card, html[data-page="service"] .web-feature-row .image-card{height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;}
html[data-page="service"] .aerowordsmith-row .image-card{aspect-ratio: 1 / 1 !important;}
html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row) .image-card{aspect-ratio: 16 / 7 !important;}
html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row) .svg-artwork img{width: 96% !important;
    height: 96% !important;
    max-width: 96% !important;
    max-height: 96% !important;
    object-fit: contain !important;}
html[data-page="service"] .image-card > iframe, html[data-page="service"] .wanderports-map-frame, html[data-page="service"] .aerowordsmith-frame, html[data-page="service"] .runway-inspection-frame, html[data-page="service"] .madhi-hero-frame, html[data-page="service"] .taxi-plane-frame{width: 100% !important;
    height: 100% !important;
    display: block !important;
    border: 0;}
html[data-page="service"] .web-preview-stage, html[data-page="service"] .web-preview-shell{width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !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;
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;}
html[data-page="service"] .info-panel :is(h2,p,.feature-description,.motion-description){margin-top:0 !important;margin-bottom:0 !important;}
html[data-page="service"] .orientation-note{display: block !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    font-style: italic !important;}}
@media (max-width: 700px){
html[data-page="service"] .print-row,
html[data-page="service"] .print-row:first-child{padding-top:0 !important;}
html[data-page="service"] .print-row:first-child{padding-top:24px !important;}
html[data-page="service"] .branding-feature-row .image-card{height:440px !important;min-height:440px !important;aspect-ratio:auto !important;}
html[data-page="service"] .branding-feature-row .info-panel{margin-top:24px !important;margin-bottom:0 !important;}
html[data-page="service"] .aoe-logo-row .image-card{width:100% !important;height:420px !important;min-height:420px !important;aspect-ratio:auto !important;padding:10px !important;box-sizing:border-box !important;margin-inline:auto !important;}
html[data-page="service"] .aoi-logo-row .image-card{width:100% !important;height:340px !important;min-height:340px !important;aspect-ratio:auto !important;padding:10px !important;box-sizing:border-box !important;margin-inline:auto !important;}
html[data-page="service"] .wanderports-logo-row .image-card{width:100% !important;height:232px !important;min-height:232px !important;aspect-ratio:auto !important;padding:0 !important;box-sizing:border-box !important;margin-inline:auto !important;}
html[data-page="service"] .aoe-logo-row .info-panel{margin-top:38px !important;margin-bottom:0 !important;}
html[data-page="service"] .aoi-logo-row .info-panel{margin-top:12px !important;margin-bottom:0 !important;}
html[data-page="service"] .wanderports-logo-row .info-panel{margin-top:0 !important;margin-bottom:0 !important;}
html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row) .svg-artwork{width:100% !important;height:100% !important;padding:0 !important;}
html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row) .svg-artwork picture{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;height:100% !important;}
html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row) .svg-artwork img{display:block !important;width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important;object-position:center !important;}
.splitflap-row .solari-grid-row{height: 34px !important; flex-basis: 34px !important;}
.splitflap-row .solari-header-row{height: 34px !important; flex-basis: 34px !important; font-size: 10px !important;}
.splitflap-row .solari-field, .splitflap-row .solari-cell, .splitflap-row .solari-signal-card, .splitflap-row .solari-stair-spacer{height: 34px !important;}
.splitflap-row .solari-glyph{font-size: 10.5px !important; line-height: 34px !important;}
.splitflap-row .solari-dot{width: 8px !important; height: 8px !important; border-width: 1px !important;}}
html[data-theme="dark"] .image-card.web-preview-card .preview-popout{background: #000000 !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;}
html[data-theme="dark"] :is(.info-panel, .vector-info-card){background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;}
.aoe-logo-row .image-card{background: transparent;}
.aoi-logo-row .image-card{background: transparent;}
.wanderports-logo-row{--tile-background:#FFFFFF;margin-top:64px !important;}
.wanderports-logo-row .image-card{background: #FFFFFF !important;}
.wanderports-logo-row .svg-artwork{background:#FFFFFF !important;}
.aoe-logo-row .svg-artwork, .aoi-logo-row .svg-artwork, .wanderports-logo-row .svg-artwork{width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;}
.aoe-logo-row .svg-artwork object, .aoe-logo-row .svg-artwork img, .aoi-logo-row .svg-artwork object, .aoi-logo-row .svg-artwork img, .wanderports-logo-row .svg-artwork object, .wanderports-logo-row .svg-artwork img{width: 64.8%;
  height: 55.8%;
  display: block;
  object-fit: contain;
  object-position: center center;}
.aoe-logo-row .svg-artwork img, .aoi-logo-row .svg-artwork img{width: 77.4%;
  max-width: 77.4%;
  height: 63%;
  max-height: 63%;}
.a380-row{--tile-background:#000000; --tile-border:1px solid #FFFFFF;}
.a380-row .image-card{background: #000000; border:1px solid #FFFFFF;}
.a380-row .svg-artwork{width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;}
.a380-row .svg-artwork img{width: 88.2%;
  height: 90%;
  display: block;
  object-fit: contain;
  object-position: center center;
  margin: auto;}
.a380-row .a380-artwork-dark{display: block;}
@media (max-width: 950px){.aoe-logo-row .svg-artwork object, .aoe-logo-row .svg-artwork img, .aoi-logo-row .svg-artwork object, .aoi-logo-row .svg-artwork img, .wanderports-logo-row .svg-artwork object, .wanderports-logo-row .svg-artwork img{width: 96%;
    height: 96%;
    max-width:96%;
    max-height:96%;}
.aoe-logo-row .svg-artwork img, .aoi-logo-row .svg-artwork img{width: 96%;
    max-width: 96%;
    height: 96%;
    max-height: 96%;}}
.desktop-branding-feature-dog-ear{display:none;}
@media (min-width: 951px) and (max-width: 1100px){.branding-feature-row.has-tight-info{grid-template-columns: 640px 262px !important;
    gap: 30px !important;
    justify-content: start !important;}
.branding-feature-row .image-card{width: 640px !important;
    max-width: 640px !important;
    height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;}}
@media (max-width: 1100px){
.branding-feature-row .branding-system-collage.logo-system-three{display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  height: 100% !important;
  min-height: 100% !important;
  inset: 0 !important;
  transform: none !important;
  padding: 12px !important;
  background: var(--brand-deep);}
.branding-feature-row .branding-system-collage.logo-system-three .branding-system-item{padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: transparent;
  border: 0;}
.branding-feature-row .branding-system-collage.logo-system-three .branding-system-label{display: none !important;}
.branding-feature-row .branding-system-collage.logo-system-three .branding-system-item picture{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
.branding-feature-row .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;
  background: transparent;}
.branding-feature-row .branding-system-collage.logo-system-three .layout-primary{grid-column: 1 !important; grid-row: 1 !important;}
.branding-feature-row .branding-system-collage.logo-system-three .layout-inverse{grid-column: 1 !important; grid-row: 2 !important;}
.branding-feature-row .branding-system-collage.logo-system-three .layout-mono{grid-column: 1 !important; grid-row: 3 !important;}
}
@media (min-width: 701px) and (max-width: 950px){.branding-feature-row .branding-system-collage.logo-system-three{height: 100% !important;
    min-height: 100% !important;
    padding: 10px !important;
    gap: 6px !important;}
.branding-feature-row .branding-system-collage.logo-system-three .branding-system-item img{width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: scale(0.92) !important;}}
@media (min-width: 951px) and (max-width: 1100px){.print-row.branding-feature-row:first-child .image-card{height: var(--service-media-height) !important;
    min-height: var(--service-media-height) !important;}
.print-row.branding-feature-row:first-child .branding-system-collage.logo-system-three{height: 100% !important;
    min-height: 100% !important;}
.wanderports-logo-row .svg-artwork img{width: 77.4% !important;
    max-width: 77.4% !important;}
.aoe-logo-row .svg-artwork img, .aoi-logo-row .svg-artwork img, .wanderports-logo-row .svg-artwork img{margin:0 auto !important;
    object-position:center center !important;}}
@media (max-width: 700px){html[data-page="service"] .wanderports-logo-row .svg-artwork img{width:100% !important;max-width:100% !important;height:100% !important;max-height:100% !important;object-fit:contain !important;object-position:center 86% !important;}}
@media (min-width: 701px){
html[data-theme="dark"] :is(
  .branding-feature-row .image-card,
  .aoe-logo-row .image-card,
  .aoi-logo-row .image-card,
  .wanderports-logo-row .image-card,
  .a380-row .image-card,
  .branding-system-collage.logo-system-three
){background: transparent !important;
  border-color: transparent !important;}
}

@media (min-width: 701px) and (max-width: 1100px){
  .branding-showcase-aoi .branding-showcase-artwork{
    align-items:center !important;
    justify-content:center !important;
  }
  .branding-showcase-aoi .branding-showcase-artwork picture{
    align-items:center !important;
    justify-content:center !important;
  }
  .branding-showcase-aoi .branding-showcase-artwork img{
    width:82% !important;
    max-width:308px !important;
    object-position:center center !important;
    transform:translateY(8px) !important;
    margin:0 auto !important;
  }
}


/* 2026-10-03 — proportional AOE/AOI artwork sizing. */
@media (min-width:1101px){
  html[data-page="service"] .branding-showcase-aoe .branding-showcase-artwork img{
    width:100% !important;
    height:100% !important;
    max-width:322px !important;
    max-height:386px !important;
    margin:0 auto !important;
    transform:none !important;
    object-position:center !important;
  }
}
@media (max-width:700px){
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
    align-items:center !important;
    justify-content:center !important;
  }
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork picture{
    display:flex !important;
    width:100% !important;
    height:auto !important;
    align-items:center !important;
    justify-content:center !important;
  }
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork img{
    display:block !important;
    width:90% !important;
    height:auto !important;
    max-width:90% !important;
    max-height:none !important;
    margin:0 auto !important;
    transform:none !important;
    object-fit:contain !important;
    object-position:center !important;
  }
}

/* 2026-10-07 — center the middle Branding work group more evenly between its neighbors. */
@media (min-width:1101px){
  html[data-page="service"] .branding-showcase-aoe{
    transform:translateX(clamp(38px,2.75vw,48px)) !important;
  }
}

/* 2026-10-07 — rebalance middle Branding column between left and right work groups. */
@media (min-width:1101px){
  html[data-page="service"] .branding-showcase-aoe{
    transform:translateX(clamp(-48px,-2.75vw,-38px)) !important;
  }
}


/* 2026-10-07 — slight final AOE group nudge right for even three-column spacing. */
@media (min-width:1101px){
  html[data-page="service"] .branding-showcase-aoe{
    transform:translateX(clamp(-32px,-2vw,-26px)) !important;
  }
}

/* 2026-10-07 — mobile Multi-Logo caption spacing parity with the other Branding works. */
@media (max-width:700px){
  html[data-page="service"] .branding-showcase-aerowander .portfolio-work-caption{
    margin-top:40px !important;
  }
}