/* Madhi Studio — service theme and header (dark only) */
: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:#FFBF00 !important;font-family:"Londrina Outline",sans-serif !important;font-size:41.4px !important;font-weight:400 !important;line-height:1 !important;letter-spacing:0 !important;}
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: var(--brand-jade);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-jade) 30%, transparent);
  outline: none;}
html[data-theme="dark"] :is(.contact-field input, .contact-field textarea)::placeholder{color: #C4C4C4;
  opacity: 1;}
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-browse,
  .contact-brief-form .attachment-file-list,
  .contact-form-status,
  .contact-email-note-below-submit,
  .contact-email-note-below-submit a
){color: #FFFFFF;}
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(.feature-card, .image-card:not(.landing-web-preview-card), .branding-system-feature-card, .branding-system-collage, .landing-turntable-artwork, .web-preview-stage){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;border-color:transparent;}
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){border-radius:0 !important;}
html[data-theme="dark"] .attachment-dropzone{border-radius:4px !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: var(--brand-jade) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-jade) 30%, transparent) !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="dark"] .footer-craft{color:#FFBF00 !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;}
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:1px solid #FFBF00 !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:1px solid #FFBF00 !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
){color:#FFBF00 !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] :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:var(--utility-background, #20242C) !important;
  color:var(--utility-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:var(--utility-hover-background, #FFBF00) !important;
  color:var(--utility-hover-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), html[data-theme] .attachment-dropzone:is(:focus,:focus-visible), html[data-theme] .attachment-dropzone.is-dragover{border-color:transparent !important;
  box-shadow:0 0 0 2px color-mix(in srgb, #FFBF00 32%, transparent) !important;
  outline:none !important;}
html[data-theme] .attachment-dropzone{--attachment-dash:#FFBF00;
  position:relative;
  overflow:hidden;
  border:0 !important;}
html[data-theme] .attachment-dropzone::before{content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--attachment-dash) 0 13px,transparent 13px 21px) top left / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--attachment-dash) 0 13px,transparent 13px 21px) bottom left / 100% 2px no-repeat,
    repeating-linear-gradient(0deg,var(--attachment-dash) 0 13px,transparent 13px 21px) top left / 2px 100% no-repeat,
    repeating-linear-gradient(0deg,var(--attachment-dash) 0 13px,transparent 13px 21px) top right / 2px 100% no-repeat;}
html[data-theme] .attachment-dropzone > *{position:relative;
  z-index:1;}
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;
    transform:translate(50%,-50%) rotate(45deg) !important;}}
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:1px solid #FFBF00 !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="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;font-family:"Londrina Outline",sans-serif !important;font-weight:400 !important;letter-spacing:0 !important;}
html[data-theme] :is(
  .approach-viewport .studio-card-title-main,
  .client-viewport .studio-card-title-main
){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="dark"] .turntableSvg .turntable-bg{fill:transparent !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] .attachment-dropzone{--attachment-dash:transparent !important;}
html[data-theme] .attachment-dropzone:is(:focus,:focus-visible,:focus-within), html[data-theme] .attachment-dropzone.is-dragover{--attachment-dash:#FFBF00 !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,.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,.city-demo
){border:0 !important;
  box-shadow:none !important;}
html[data-theme] .image-card{border:var(--tile-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;
  --mobile-brand-width: min(48.15vw, calc(100svh * 0.2295));}
html{scroll-padding-top: var(--site-header-height);}
body{padding-top: var(--site-header-height);}
html[data-page="service"] body{min-height:100svh;display:flex;flex-direction:column;}
html[data-page="service"] body > main{flex:1 0 auto;}
html[data-page="service"] #site-footer{margin-top:auto;}
#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;}
.mobile-back-control{display:none;}
.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){
.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;}
body.mobile-menu-open::before{content:""; position:fixed; inset:0; background:#000000; z-index:1190;}
nav.site-nav-global{padding: 0 14px;border-bottom:0;}
.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: 0;
    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-weight:800;}
.site-nav-global .nav-links > a[data-nav="home"].active,
.site-nav-global .nav-links > a[data-nav="contact"].active{color:#FFBF00;
    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;
    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;
  --mobile-section-gap:100px;
  --mobile-section-separation:100px;}
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;}}

/* =========================================================
   RESPONSIVE SERVICE PAGES — shared desktop shell and mobile presentation
========================================================= */
.mobile-brand-watermark,
.mobile-brand-logo,
.service-mobile-overview,
.service-mobile-feature-label,
.service-desktop-overview{display:none;}
.soccer-pitch-inline > .soccer-pitch-svg-mobile{display:none !important;}
html[data-page="service"] picture{display:block;width:100%;height:auto;}
html[data-page="service"] picture img{display:block;width:100%;height:auto;}
.service-coming-soon{
  display:none;
  margin:28px 0 0;
  color:#FFFFFF;
  font-family:"Inter",Arial,sans-serif;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.45;
}
.copywriting-main{position:relative;min-height:calc(100svh - var(--site-header-height) - 58px);}
.copywriting-main .copywriting-coming-soon-stage{
  position:absolute;
  inset:0;
  min-height:0;
  display:grid;
  place-items:center;
  padding:0 24px;
  box-sizing:border-box;
  pointer-events:none;
}
.copywriting-main .service-coming-soon{margin:0;text-align:center;color:#232323;}

/* Shared work title/byline — one source of truth for Branding, UI, Motion and Web work captions. */
html[data-theme][data-page="service"] .portfolio-work-caption{width:100%;margin:0 0 12px;text-align:left;}
html[data-theme][data-page="service"] .portfolio-work-caption .portfolio-work-heading{
  margin:0;
  color:#FFBF00 !important;
  font-family:"Inter",Arial,sans-serif;
  font-size:19.2px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:0;
}
html[data-theme][data-page="service"] .portfolio-work-caption .portfolio-work-byline{
  margin:4px 0 0;
  color:#C4C4C4 !important;
  font-family:"Inter",Arial,sans-serif;
  font-size:15.6px;
  font-style:normal;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  text-wrap:pretty;
}
html[data-theme][data-page="service"] .copywriting-main .service-coming-soon{
  color:#232323;
  font-family:"Inter",Arial,sans-serif;
  font-size:15.5px;
  font-style:normal;
  font-weight:400;
  line-height:1.45;
}

/* Shared text-action button — matches the Photography "Thumbnails" control. */
html[data-theme][data-page="service"] :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,
  .soccer-demo button,
  .city-controls button,
  .city-demo button
){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:0;
  padding:7px 11px;
  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;
  font-size:15.6px;
  font-weight:400;
  line-height:1.45;
  text-align:center;
  text-decoration:none;
  animation:none !important;
  cursor:pointer;
}
html[data-theme][data-page="service"] :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,
  .soccer-demo button,
  .city-controls button,
  .city-demo button
):is(:hover,:focus-visible){
  background:#FFBF00 !important;
  color:#000000 !important;
  border-color:transparent !important;
  font-weight:400;
}


@media (min-width:1101px){
  :root{
    --service-left-rail:var(--madhi-nav-left-rail,clamp(150px,11.78vw,205px));
    --service-side-rail:var(--madhi-nav-right-rail,clamp(165px,12.54vw,225px));
    --service-main-right-gap:clamp(20px,1.8vw,28px);
    --service-panel-scroll-safe:12px;
    --service-content-gutter:0px;
    --service-caption-width:330px;
    --service-page-max-width:calc(100vw - var(--service-left-rail) - var(--service-side-rail) - var(--service-main-right-gap));
    --service-media-width:calc(var(--service-page-max-width) - (2 * var(--service-content-gutter)) - var(--service-caption-width) - 18px);
    --service-media-height:clamp(590px,42vw,690px);
  }
  html[data-page="service"]{
    --service-row-top:86px;
    --service-title-top-desktop:22px;
  }
  html[data-page="service"] .page-section .container{position:relative;}
  html[data-page="service"] .service-desktop-overview{
    position:fixed;
    top:calc(var(--site-header-height) + 28px);
    right:var(--service-panel-scroll-safe);
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:calc(var(--service-side-rail) - var(--service-panel-scroll-safe));
    min-width:0;
    padding-left:4px;
    padding-right:6px;
    box-sizing:border-box;
    color:#FFFFFF;
    font-family:"Inter",Arial,sans-serif;
  }
  html[data-page="service"] .service-desktop-headline{
    margin:0;
    color:#FFBF00;
    font:600 21px/1.35 "Inter",Arial,sans-serif;
    text-align:left;
  }
  html[data-page="service"] .service-desktop-copy{
    margin:20px 0 0;
    color:#FFFFFF;
    font:400 16.2px/1.4 "Inter",Arial,sans-serif;
    text-align:left;
  }
  html[data-page="service"] .service-desktop-includes{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    margin-top:20px;
    color:#FFFFFF;
    text-align:left;
  }
  html[data-page="service"] .service-desktop-includes-label{
    margin:0 0 5px;
    color:#FFFFFF;
    font:400 14px/1.45 "Inter",Arial,sans-serif;
    letter-spacing:.04em;
    text-align:left;
  }
  html[data-page="service"] .service-desktop-includes-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
  }
  html[data-page="service"] .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;
  }
  html[data-page="service"] .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"] .collection{
    padding-top:0 !important;
  }
  html[data-page="service"] .page-section .container,
  html[data-page="service"] .collection > .print-list{
    width:var(--service-page-max-width) !important;
    max-width:none !important;
    margin-left:var(--service-left-rail) !important;
    margin-right:calc(var(--service-side-rail) + var(--service-main-right-gap)) !important;
    padding-left:var(--service-content-gutter) !important;
    padding-right:var(--service-content-gutter) !important;
    box-sizing:border-box !important;
  }
  html[data-page="service"]:not(.photography-root) .page-section{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:20 !important;
    padding-top:var(--service-title-top-desktop) !important;
    padding-bottom:0 !important;
    pointer-events:none !important;
  }
  html[data-page="service"]:not(.photography-root) .page-section .page-title{
    margin-top:0 !important;
    margin-bottom:18px !important;
  }
  html[data-page="service"]:not(.photography-root) .page-section .section-divider{
    margin:0 !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row{
    grid-template-columns:minmax(0,1fr) var(--service-caption-width) !important;
    gap:18px !important;
    justify-content:start !important;
    align-items:start !important;
    align-content:start !important;
    min-height:calc(100svh - var(--site-header-height)) !important;
    padding-top:var(--service-row-top) !important;
    padding-bottom:34px !important;
    box-sizing:border-box !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row:first-child{
    padding-top:var(--service-row-top) !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row:first-child .image-card{
    margin-top:0 !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row .image-card{
    width:100% !important;
    max-width:none !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row .info-panel{
    width:var(--service-caption-width) !important;
    max-width:var(--service-caption-width) !important;
    align-self:start !important;
    justify-self:start !important;
    padding-top:0 !important;
    margin-top:0 !important;
  }
  html[data-page="service"] .branding-showcase-card .portfolio-work-caption{
    margin-top:34px !important;
    align-self:start !important;
  }
  html[data-page="service"] .branding-showcase-grid{
    padding-top:var(--service-row-top) !important;
    box-sizing:border-box !important;
  }
  html[data-page="service"] .branding-showcase-card .portfolio-work-caption{
    justify-self:center !important;
  }

  html[data-page="service"] .web-feature-row .info-panel{
    position:static !important;
    padding-right:0 !important;
  }
  html[data-page="service"] .web-feature-row .info-panel .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="service"] .service-coming-soon{display:block;}
  html[data-page="service"] :is(
    .image-card:not(.landing-web-preview-card),.feature-card,.branding-system-feature-card,.branding-system-collage,
    .branding-system-item,.web-preview-card:not(.landing-web-preview-card),.web-preview-stage,.web-preview-shell,
    .vector-info-card,.svg-artwork,.taxi-plane-card,.madhi-hero-card,.city-demo,
    .solari-demo,.solari-board
  ){border-radius:4px !important;}
  html[data-page="service"] .info-panel :is(p,.feature-description,.motion-description){
    font-size:15.6px !important;
    line-height:1.45 !important;
  }
  html[data-page="service"] .dog-ear{
    padding:11px 35px;
    font-size:17.7px;
    border-bottom-left-radius:0;
  }
  html[data-page="service"] .mobile-brand-watermark{
    display:flex;
    position:fixed;
    top:var(--site-header-height);
    left:0;
    z-index:60;
    width:var(--service-left-rail);
    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;
  }
  html[data-page="service"] .mobile-brand-logo{
    display:block;
    width:100%;
    max-width:100%;
    height:calc(100% - 10px);
    max-height:100%;
    margin:0;
    padding:0;
    object-fit:contain;
    object-position:left top;
    opacity:1;
    filter:brightness(0) invert(14.9%);
    transition:filter .2s ease;
  }
  html[data-page="service"]:not(.photography-root) .mobile-brand-logo{
    height:calc(100% - 40px);
  }
  html[data-page="service"] .mobile-brand-watermark:hover{
    opacity:1;
  }
  html[data-page="service"] .mobile-brand-watermark:hover .mobile-brand-logo{
    filter:none;
  }
}

@media (max-width:700px){
  :root{
    --site-header-height:78px;
    --mobile-section-gap:100px;
    --mobile-section-separation:150px;
    --mobile-feature-copy-gap:23px;
    --mobile-feature-row-separation:300px;
  }

  html[data-page="service"] body{background:#000000;}
  html[data-page="service"] .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;
  }
  html[data-page="service"] .mobile-brand-logo{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    margin:0;
    padding:0;
    opacity:1;
    filter:brightness(0) invert(14.9%);
  }
  html[data-page="service"] body > main{position:relative;z-index:5;}
  html[data-page="service"] main > section{position:relative;z-index:5;}
  html[data-page="service"] .wanderports-ui-row .map-fullscreen-control{background:#FFFFFF !important;color:#022B3A !important;border:0 !important;box-shadow:none !important;}
  html[data-page="service"] .wanderports-ui-row .map-fullscreen-control:is(:hover,:focus-visible){background:#FFFFFF !important;color:#022B3A !important;}

  html[data-page="service"] .site-nav-global{background:transparent;border-bottom:0;box-shadow:none;}
  html[data-page="service"] .site-nav-global .nav-inner{justify-content:flex-end;}
  html[data-page="service"] .site-nav-global .logo{display:none;}
  html[data-page="service"] .mobile-back-control{
    position:absolute;
    top:3px;
    right:62px;
    z-index:2;
    width:116px;
    height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
    color:#FFFFFF;
    font-family:"Inter",Arial,sans-serif;
    font-size:18px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    isolation:isolate;
  }
  html[data-page="service"] .mobile-back-control::before{
    content:"";
    position:absolute;
    top:calc(3px + clamp(5.5px,1.65vw,7px));
    left:0;
    z-index:0;
    width:100%;
    height:2px;
    background:#262626;
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 #262626,0 clamp(12.6px,3.7vw,15.2px) 0 #262626,0 clamp(18.9px,5.55vw,22.8px) 0 #262626,0 clamp(25.2px,7.4vw,30.4px) 0 #262626;
    pointer-events:none;
  }
  html[data-page="service"] .mobile-back-arrow,
  html[data-page="service"] .mobile-back-label{
    position:relative;
    z-index:1;
    display:inline-block;
    color:#FFFFFF;
    font-size:18px;
    font-weight:700;
    line-height:1;
    text-shadow:0 0 3px #000000,0 0 3px #000000;
  }
  html[data-page="service"] .mobile-back-arrow{
    flex:0 0 34px;
    width:34px;
    height:18px;
    font-size:0;
    color:#FFFFFF;
    text-shadow:none;
  }
  html[data-page="service"] .mobile-back-arrow::before{
    content:"";
    position:absolute;
    left:2px;
    top:7px;
    width:32px;
    height:4px;
    background:currentColor;
  }
  html[data-page="service"] .mobile-back-arrow::after{
    content:"";
    position:absolute;
    left:2px;
    top:2px;
    width:11px;
    height:11px;
    border-left:4px solid currentColor;
    border-bottom:4px solid currentColor;
    transform:rotate(45deg);
    transform-origin:center;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible){
    outline:none;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible)::before{
    background:rgba(255,255,255,.5);
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 rgba(255,255,255,.5),0 clamp(12.6px,3.7vw,15.2px) 0 rgba(255,255,255,.5),0 clamp(18.9px,5.55vw,22.8px) 0 rgba(255,255,255,.5),0 clamp(25.2px,7.4vw,30.4px) 0 rgba(255,255,255,.5);
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) :is(.mobile-back-arrow,.mobile-back-label){color:#FFBF00;}
  html[data-page="service"] .site-nav-global .nav-toggle{
    position:absolute;
    top:6px;
    right:10px;
    z-index:1;
    width:42px;
    height:42px;
    color:#FFFFFF;
    opacity:1;
    animation:none;
    border:0;
    border-radius:0;
    background:transparent;
  }
  html[data-page="service"] .site-nav-global .nav-toggle:hover,
  html[data-page="service"] .site-nav-global .nav-toggle:focus-visible{color:#FFBF00;opacity:1;animation:none;}
  html[data-page="service"] .site-nav-global .nav-toggle span{display:none;}
  html[data-page="service"] .site-nav-global .nav-toggle::before,
  html[data-page="service"] .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="service"] .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="service"] .site-nav-global .nav-toggle::after{top:20px;opacity:0;}
  html[data-page="service"] .site-nav-global.mobile-open .nav-toggle{opacity:1;animation:none;}
  html[data-page="service"] .site-nav-global.mobile-open .nav-toggle::before{top:20px;left:8px;width:26px;box-shadow:none;transform:rotate(45deg);}
  html[data-page="service"] .site-nav-global.mobile-open .nav-toggle::after{left:8px;width:26px;opacity:1;transform:rotate(-45deg);}
  html[data-page="service"] .site-nav-global .nav-links{left:-10px;right:-10px;padding-left:10px;padding-right:26px;background:#000000;border-bottom:0;}
  html[data-page="service"] .site-nav-global.mobile-open{background:#000000;}
  html[data-page="service"] body.mobile-menu-open::before{content:"";position:fixed;inset:0;background:#000000;z-index:1190;}
  html[data-page="service"] .site-nav-global.mobile-open .nav-links{
    height:calc(100svh - var(--site-header-height));
    max-height:calc(100svh - var(--site-header-height));
    justify-content:flex-start;
    background:#000000;
  }
  html[data-page="service"] .site-nav-global .nav-links > a,
  html[data-page="service"] .site-nav-global .nav-links > a.active,
  html[data-page="service"] .site-nav-global .nav-links > a.section-current{font-size:16px !important;}

  html[data-page="service"] .page-section{padding:16px 0 0 !important;background:transparent !important;}
  html[data-page="service"] .page-section .container{
    width:calc(100% - 32px) !important;
    max-width:520px !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
  }
  html[data-page="service"] .page-title{
    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:#FFBF00 !important;
    background:transparent !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }
  html[data-page="service"] .section-divider{display:none !important;}

  /* Same service-details treatment used by an expanded landing-page section, minus the number. */
  html[data-page="service"] .service-mobile-overview{
    display:flex;
    justify-content:flex-start;
    width:100%;
    margin:4px 0 0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  html[data-page="service"] .service-mobile-summary{display:none !important;}
  html[data-page="service"] .service-mobile-includes{
    display:flex;
    justify-content:flex-start;
    width:100%;
    margin:0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
  }
  html[data-page="service"] .service-mobile-includes-label{display:none !important;}
  html[data-page="service"] .service-mobile-includes-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    width:fit-content;
    margin:0;
    padding:0 0 0 1.1em;
    list-style:disc outside;
    color:#FFFFFF;
    font-size:15.6px;
    font-style:normal;
    font-weight:400;
    line-height:1.35;
    text-align:left;
  }
  html[data-page="service"] .service-mobile-includes-list li{margin:0;padding:0;display:list-item !important;}
  html[data-page="service"] .service-mobile-includes-list li::marker{color:currentColor !important;font-size:1em !important;}

  html[data-page="service"] .collection{
    padding:18px 16px calc(var(--mobile-feature-row-separation) / 2) !important;
    background:transparent !important;
  }
  html[data-page="service"] .service-mobile-feature-label{
    display:block;
    width:100%;
    max-width:520px;
    margin:var(--mobile-section-separation) auto 0;
    padding:8px 0;
    color:#FFFFFF;
    font-size:15.6px;
    font-weight:400;
    line-height:1.45;
    letter-spacing:0;
    text-transform:uppercase;
    text-align:center;
    border-top:1px solid #5d5d5d;
    border-bottom:1px solid #5d5d5d;
  }
  html[data-page="service"] .portfolio-work-caption .portfolio-work-heading{
    color:#FFBF00 !important;
    font-size:15.6px !important;
    font-style:normal !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    text-align:left !important;
  }
  html[data-page="service"] .portfolio-work-caption .portfolio-work-byline{
    color:#FFFFFF !important;
    font-size:15.6px !important;
    font-style:normal !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    text-align:left !important;
    margin-top:4px !important;
  }
  html[data-page="service"] .print-list{
    display:grid !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    gap:calc(var(--mobile-feature-row-separation) / 2) !important;
    padding:0 !important;
    background:transparent !important;
  }
  html[data-page="service"] .print-row.mobile-hidden-feature{
    display:none !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:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:var(--mobile-feature-copy-gap) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Artwork is content, not a tile: no surrounding panel, fill, frame, or rounded container. */
  html[data-page="service"] :is(
    .image-card,
    .feature-card,
    .branding-system-feature-card,
    .branding-system-collage,
    .branding-system-item,
    .landing-turntable-artwork,
    .web-preview-stage,
    .web-preview-shell,
    .svg-artwork,
    .aoe-learning-artwork,
    .vector-info-card
  ){
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  html[data-page="service"] .image-card{
    order:1 !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  html[data-page="service"] .info-panel,
  html[data-page="service"] .print-row.has-tight-info .info-panel{
    order:2 !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  html[data-page="service"] .info-panel :is(p,.feature-description,.motion-description){margin:0 !important;line-height:1.5 !important;}

  html[data-page="service"] :is(.svg-artwork,.aoe-learning-artwork,.motion-inline-svg){
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  html[data-page="service"] :is(
    .svg-artwork img,
    .svg-artwork object,
    .svg-artwork picture,
    .motion-svg-object,
    .aoe-learning-artwork img,
    .branding-system-item img,
    .image-card > img
  ){
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }

  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three{
    position:static !important;
    inset:auto !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;
    transform:none !important;
  }
  html[data-page="service"] .branding-feature-row .branding-system-item,
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .layout-primary,
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .layout-inverse,
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .layout-mono{
    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;
  }
  html[data-page="service"] .branding-feature-row .branding-system-label{display:none !important;}
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .branding-system-item picture{display:block !important;width:100% !important;height:auto !important;}
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .branding-system-item img{display:block !important;width:100% !important;height:auto !important;max-width:100% !important;max-height:none !important;margin:0 auto !important;transform:none !important;object-fit:contain !important;}
  html[data-page="service"] .branding-feature-row .info-panel{margin-top:0 !important;}

  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row,.a380-row) .image-card{aspect-ratio:auto !important;}
  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row,.a380-row) .svg-artwork{position:static !important;display:block !important;width:100% !important;height:auto !important;}
  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row,.a380-row) .svg-artwork picture{position:static !important;display:block !important;width:100% !important;height:auto !important;}
  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row,.wanderports-logo-row,.a380-row) .svg-artwork img{position:static !important;display:block !important;width:100% !important;height:auto !important;max-width:100% !important;max-height:none !important;margin:0 auto !important;object-fit:contain !important;transform:none !important;}
  html[data-page="service"] .aoe-logo-row .svg-artwork img{aspect-ratio:420 / 438 !important;}
  html[data-page="service"] .aoi-logo-row .svg-artwork img{aspect-ratio:420 / 350 !important;}
  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row) .info-panel{margin-top:0 !important;}

  /* Interactive work keeps its own native canvas, while its outer tile remains removed. */
  html[data-page="service"] .wanderports-ui-row .image-card{height:88svh !important;min-height:88svh !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html[data-page="service"] .wanderports-ui-row .wanderports-map-frame{width:100% !important;height:100% !important;object-fit:contain !important;}
  html[data-page="service"] .aerowordsmith-row .image-card{height:560px !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html[data-page="service"] .aerowordsmith-row .aerowordsmith-frame{width:100% !important;height:100% !important;}
  html[data-page="service"] .runway-inspection-row .image-card{height:100svh !important;min-height:100svh !important;aspect-ratio:auto !important;overflow:hidden !important;}
  html[data-page="service"] .runway-inspection-row .runway-inspection-frame{width:100% !important;height:100% !important;}
  html[data-page="service"] .aoe-learning-row .image-card{aspect-ratio:auto !important;overflow:visible !important;}
  html[data-page="service"] .aoe-learning-row .aoe-learning-artwork{width:100% !important;height:auto !important;overflow:visible !important;}
  html[data-page="service"] .aoe-learning-row .aoe-learning-artwork img{width:61.25% !important;height:auto !important;max-width:61.25% !important;max-height:none !important;margin:14px auto 0 !important;object-fit:contain !important;}
  html[data-page="service"] .aoe-learning-row .info-panel{margin-top:0 !important;}
  html[data-page="service"] .soccer-pitch-row .image-card{aspect-ratio:auto !important;overflow:visible !important;}
  html[data-page="service"] .soccer-pitch-row .svg-artwork,
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-inline{width:100% !important;height:auto !important;overflow:visible !important;}
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-svg-desktop{display:none !important;}
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-svg-mobile{display:block !important;width:100% !important;height:auto !important;max-width:100% !important;margin:0 auto !important;}
  html[data-page="service"] .soccer-pitch-row .info-panel{margin-top:0 !important;}
  html[data-page="service"] .soccer-pitch-row .soccer-demo{margin-top:14px !important;justify-content:center !important;}

  /* Split-flap board is part of the complete mobile featured-work list. */

  /* Turntable: preserve the full SVG canvas on mobile and keep its description below the artwork. */
  html[data-page="service"] .turntable-row .image-card,
  html[data-page="service"] .turntable-row .svg-artwork,
  html[data-page="service"] .turntable-row .motion-inline-svg{height:auto !important;min-height:0 !important;aspect-ratio:auto !important;overflow:visible !important;background:transparent !important;}
  html[data-page="service"] .turntable-row .motion-inline-svg{width:100% !important;margin:0 !important;}
  html[data-page="service"] .turntable-row .turntableSvg{display:block !important;width:100% !important;height:auto !important;max-width:100% !important;max-height:none !important;aspect-ratio:526 / 500;margin:0 !important;}
  html[data-page="service"] .turntable-row .turntableSvg .turntable-bg{fill:transparent !important;}
  html[data-page="service"] .turntable-row .info-panel{margin-top:0 !important;}

  html[data-page="service"] .web-preview-card{position:relative !important;aspect-ratio:4 / 3 !important;overflow:hidden !important;}
  html[data-page="service"] .web-preview-stage,
  html[data-page="service"] .web-preview-shell,
  html[data-page="service"] .landing-web-preview-wrap,
  html[data-page="service"] .landing-web-preview-shell{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;overflow:hidden !important;}
  html[data-page="service"] .web-preview-frame,
  html[data-page="service"] .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="service"] .web-feature-row{position:relative !important;}
  html[data-page="service"] .web-feature-row .info-panel{position:static !important;padding-right:0 !important;}
  html[data-page="service"] .web-feature-row .info-panel .preview-popout{position:absolute !important;top:12px !important;right:12px !important;bottom:auto !important;left:auto !important;z-index:30 !important;margin:0 !important;}
  html[data-page="service"] .web-feature-row:first-child .preview-popout{
    color:#1b0276 !important;
  }
  html[data-page="service"] .web-feature-row:first-child .preview-popout:is(:hover,:focus-visible){
    color:#FFBF00 !important;
  }
  html[data-page="service"] :is(.btn,.section-action,.contact-submit){width:fit-content !important;max-width:calc(100% - 24px) !important;padding-left:22px !important;padding-right:22px !important;}
  html[data-page="service"] .copywriting-main{min-height:0 !important;}
  html[data-page="service"] .copywriting-main .copywriting-coming-soon-stage{position:static !important;inset:auto !important;display:block !important;width:calc(100% - 32px) !important;max-width:520px !important;margin:0 auto !important;padding:0 0 calc(var(--mobile-feature-row-separation) / 2) !important;}
  html[data-page="service"] .copywriting-main .service-coming-soon{display:block !important;margin:0 !important;text-align:left !important;}
  html[data-page="service"] .copywriting-main .service-mobile-feature-label{margin-bottom:0 !important;}
  html[data-page="service"] .copywriting-main .service-coming-soon{margin-top:0 !important;padding-top:0 !important;}

  /* Footer matches the landing-page mobile copyright treatment. */
  html[data-page="service"] #site-footer{height:auto !important;min-height:0 !important;margin-top:0 !important;}
  html[data-page="service"] #site-footer footer{width:100% !important;height:auto !important;min-height:0 !important;padding:0 16px 8px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:transparent !important;border:0 !important;box-shadow:none !important;}
  html[data-page="service"] #site-footer .footer-inner{width:100% !important;align-items:center !important;justify-content:center !important;gap:0 !important;padding:0 !important;text-align:center !important;}
  html[data-page="service"] #site-footer .footer-main{width:100% !important;margin:0 !important;color:#FFFFFF !important;font-size:12.1px !important;text-align:center !important;opacity:1 !important;}
  html[data-page="service"] #site-footer .footer-craft{color:#FFBF00 !important;}
}


/* 2026-09-29 requested service-page alignment and tile-radius pass. */
:root{--service-tile-radius:14px;}

@media (min-width:1101px){
  /* Center the vertical Madhi Studio mark so the visual padding above and below matches. */
  html[data-page="service"] .mobile-brand-logo{
    height:calc(100% - 40px);
    margin-top:20px;
    margin-bottom:20px;
    object-position:left top;
  }

  /* A consistent radius for artwork tiles; dog ears follow the same geometry. */
  html[data-page="service"] :is(
    .image-card:not(.landing-web-preview-card),.feature-card,.branding-system-feature-card,.branding-system-collage,
    .branding-system-item,.web-preview-card:not(.landing-web-preview-card),.web-preview-stage,.web-preview-shell,
    .vector-info-card,.svg-artwork,.taxi-plane-card,.madhi-hero-card,.city-demo
  ){border-radius:var(--service-tile-radius) !important;}

  html[data-page="service"] .dog-ear{
    border-bottom-left-radius:var(--service-tile-radius) !important;
  }

  /* Keep the final work viewport and copyright visually connected. */
  html[data-page="service"]{
    --service-footer-height:58px;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > :is(.print-row:last-child,.splitflap-row){
    min-height:calc(100svh - var(--site-header-height) - var(--service-footer-height)) !important;
    box-sizing:border-box;
  }
  html[data-page="service"] #site-footer{
    min-height:var(--service-footer-height);
    height:var(--service-footer-height);
    margin-top:0;
  }
  html[data-page="service"] #site-footer footer{
    width:100%;
    height:var(--service-footer-height) !important;
    min-height:var(--service-footer-height) !important;
    padding:0 24px 6px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    box-sizing:border-box;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    font-size:13px !important;
  }
  html[data-page="service"] #site-footer .footer-inner{
    width:100%;
    align-items:flex-end !important;
    justify-content:flex-end !important;
    gap:0 !important;
    text-align:right !important;
  }
  html[data-page="service"] #site-footer .footer-main{
    width:auto !important;
    margin:0 !important;
    color:#FFFFFF !important;
    font-size:13px !important;
    text-align:right !important;
    opacity:.75;
  }
  html[data-page="service"] #site-footer .footer-craft{color:#FFBF00 !important;}

  /* The three Aerowander marks use equal visual scale and identical alignment. */
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three{
    border-radius:var(--service-tile-radius) !important;
    gap:8px !important;
    padding:12px !important;
  }
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .branding-system-item{
    border-radius:var(--service-tile-radius) !important;
    align-items:center !important;
    justify-content:center !important;
  }
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .branding-system-item img{
    display:block !important;
    width:88% !important;
    height:88% !important;
    max-width:88% !important;
    max-height:88% !important;
    margin:auto !important;
    transform:none !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
  html[data-page="service"] .branding-feature-row .branding-system-collage.logo-system-three .branding-system-item picture{
    display:flex !important;
    width:100% !important;
    height:100% !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* AeroWordsmith uses a tighter media column so the white SVG canvas has even side padding. */
  html[data-page="service"] .aerowordsmith-row{
    --aerowordsmith-media-width:min(960px, calc(var(--service-page-max-width) - 366px));
    grid-template-columns:var(--aerowordsmith-media-width) minmax(300px,330px) !important;
  }
  html[data-page="service"] .aerowordsmith-row .image-card{
    width:var(--aerowordsmith-media-width) !important;
    max-width:var(--aerowordsmith-media-width) !important;
    height:580px !important;
    min-height:580px !important;
    aspect-ratio:auto !important;
    justify-self:start !important;
  }
}


/* =========================================================
   2026-10-03 — shared service heading/footer/mobile polish
   ========================================================= */
html[data-page="service"][data-theme] .page-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="service"] #site-footer .footer-main,
html[data-page="service"] footer .footer-main{
  color:#FFFFFF !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html[data-page="service"] #site-footer .footer-craft,
html[data-page="service"] footer .footer-craft{color:#FFBF00 !important;}

@media (max-width:700px){
  html[data-page="service"][data-theme] .page-title{
    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;
    color:#FFBF00 !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }
  html[data-page="service"] .service-mobile-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="service"] .service-mobile-includes-list li{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-style:normal !important;
  }
  html[data-page="service"] .service-mobile-includes-list li::marker{content:"" !important;}
  html[data-page="service"] .service-mobile-feature-label{
    font-family:"Inter",Arial,sans-serif !important;
    color:#FFFFFF !important;
    font-weight:400 !important;
    text-transform:uppercase !important;
    text-align:center !important;
  }
  html[data-page="service"] :is(
    .page-section .container,
    .service-mobile-overview,
    .service-mobile-includes,
    .portfolio-work-caption,
    .portfolio-work-heading,
    .portfolio-work-byline,
    .info-panel
  ){
    text-align:left !important;
  }

  /* No outer tiles around the AOE blocks, runway viewer, or camera artwork. */
  html[data-page="service"] :is(
    .aoe-learning-row .image-card,
    .aoe-learning-row .aoe-learning-artwork,
    .camera-row .image-card,
    .camera-row .svg-artwork,
    .camera-row .motion-camera-picture,
    .runway-inspection-row .image-card
  ){
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  html[data-page="service"] .runway-inspection-row .runway-inspection-frame{
    background:transparent !important;
    border:0 !important;
  }

  /* The final Split-Flap Board and Camera projects are desktop/tablet only. */
  html[data-page="service"] :is(.splitflap-row,.camera-row){display:none !important;}
}

/* =========================================================
   2026-10-03 v6 — shared service finish
   ========================================================= */
html[data-page="service"] #site-footer .footer-main,
html[data-page="service"] footer .footer-main{color:#FFFFFF !important;opacity:1 !important;}
html[data-page="service"] #site-footer .footer-craft,
html[data-page="service"] footer .footer-craft{color:#FFBF00 !important;}

@media (min-width:701px){
  html[data-page="service"] :is(.preview-popout,.landing-preview-popout,.popout-action){
    border:1px solid #FFFFFF !important;
  }
}

@media (max-width:700px){
  /* Mobile service-page titles use the same compact Inter treatment as Define / Design. */
  html[data-page="service"][data-theme] .page-title{
    font-family:"Inter",Arial,sans-serif !important;
    font-size:19.5px !important;
    font-style:normal !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    color:#FFBF00 !important;
    -webkit-text-stroke:0 !important;
    text-shadow:none !important;
  }

  /* Mobile service content aligns to one left edge with tighter single-spaced lists. */
  html[data-page="service"] .service-mobile-overview,
  html[data-page="service"] .service-mobile-includes,
  html[data-page="service"] .service-mobile-includes-list{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:left !important;
  }
  html[data-page="service"] .service-mobile-includes-list{
    gap:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    list-style:none !important;
    font-style:normal !important;
    line-height:1.35 !important;
  }
  html[data-page="service"] .service-mobile-includes-list li{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-style:normal !important;
  }
  html[data-page="service"] .service-mobile-includes-list li::marker{content:"" !important;}

  /* Standard mobile service rhythm: 36px before Featured Works, 18px to the work below. */
  html[data-page="service"] .service-mobile-feature-label{
    width:100% !important;
    margin-top:36px !important;
    margin-right:0 !important;
    margin-bottom:18px !important;
    margin-left:0 !important;
    padding:8px 0 !important;
    border-top:1px solid #5d5d5d !important;
    border-bottom:1px solid #5d5d5d !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="service"] .copywriting-main .service-coming-soon{
    color:#FFFFFF !important;
  }

  /* Web Design mobile: tall scrollable preview windows, approximately 3x the former 4:3 canvas height. */
  html[data-page="service"] .web-feature-row .image-card.web-preview-card{
    width:100% !important;
    height:clamp(720px,205vw,920px) !important;
    min-height:720px !important;
    max-height:920px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    border-radius:0 !important;
  }
  html[data-page="service"] .web-feature-row :is(.landing-web-preview-wrap,.landing-web-preview-shell,.web-preview-stage,.web-preview-shell){
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }
  html[data-page="service"] .web-feature-row :is(.landing-web-preview,.web-preview-frame){
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
    border:0 !important;
  }
  html[data-page="service"] .collection{margin-top:0 !important;padding-top:0 !important;}
  html[data-page="service"] .collection > .print-list{padding-top:0 !important;margin-top:0 !important;}
  html[data-page="service"] .collection > .print-list > .print-row:first-child{margin-top:0 !important;padding-top:0 !important;}

  /* AOE/AOI mobile marks are centered on the usable viewport, excluding the scrollbar track. */
  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row) .svg-artwork{
    width:calc(100% - 8px) !important;
    margin-left:0 !important;
    margin-right:8px !important;
  }
  html[data-page="service"] :is(.aoe-logo-row,.aoi-logo-row) .svg-artwork img{
    width:100% !important;
    max-width:100% !important;
    transform:translateX(-4px) !important;
  }

  /* Remove all outer tiles requested for mobile artwork. */
  html[data-page="service"] :is(
    .aoe-learning-row .image-card,
    .aoe-learning-row .aoe-learning-artwork,
    .camera-row .image-card,
    .camera-row .svg-artwork,
    .camera-row .motion-camera-picture,
    .runway-inspection-row .image-card
  ){
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  html[data-page="service"] .runway-inspection-row .runway-inspection-frame{
    background:transparent !important;
    border:0 !important;
  }

  /* Camera artwork centered on the usable width, not the scrollbar track. */
  html[data-page="service"] .camera-row .motion-camera-picture{
    width:calc(100% - 8px) !important;
    margin-left:0 !important;
    margin-right:8px !important;
    transform:translateX(-4px) !important;
  }
  html[data-page="service"] .camera-row .svg-artwork .motion-svg-object{
    display:block !important;
    margin:0 auto !important;
  }

  /* Split-flap and animated-camera demos are desktop/tablet only. */
  html[data-page="service"] :is(.splitflap-row,.camera-row){display:none !important;}
  html[data-page="service"] .turntable-row{order:99 !important;}

  /* Copywriting: no empty stage between the coming-soon line and the end of content. */
  html[data-page="service"] .copywriting-main .copywriting-coming-soon-stage{
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 !important;
  }
  html[data-page="service"] .copywriting-main .service-coming-soon{
    margin:0 !important;
    padding:0 !important;
  }

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

/* =========================================================
   2026-10-03 v8 — native desktop 90%-look sizing + first-viewport clearance
   No document zoom is used. Component dimensions are reduced directly while
   the service rows continue to use the real browser viewport.
   ========================================================= */
@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="service"]{
    --service-side-rail:var(--madhi-nav-right-rail,clamp(165px,12.54vw,225px));
    --service-main-right-gap:clamp(20px,1.8vw,28px);
    --service-panel-scroll-safe:12px;
    --service-content-gutter:clamp(9px,.81vw,14.4px);
    --service-page-max-width:calc(100vw - var(--service-left-rail) - var(--service-side-rail) - var(--service-main-right-gap));
    --service-media-width:calc(var(--service-page-max-width) - 329px);
    --service-media-height:clamp(531px,37.8vw,621px);
    --service-row-top:120px;
    --service-title-top-desktop:20px;
  }

  html[data-page="service"] nav.site-nav-global{padding-inline:9px;}
  html[data-page="service"] .site-nav-global .nav-links > a,
  html[data-page="service"] .site-nav-global .nav-links > a.active,
  html[data-page="service"] .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="service"] .site-nav-global .nav-links > a.active,
  html[data-page="service"] .site-nav-global .nav-links > a.section-current{
    min-height:31px;
    padding:5.4px 12.6px;
  }

  /* New outlined title system at the visual size produced by 90% browser zoom. */
  html[data-page="service"][data-theme] .page-title{
    font-family:"Londrina Outline",sans-serif !important;
    font-size:57.6px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    color:#FFBF00 !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;
  }

  /* Every first project starts safely below the larger title and fits the first viewport. */
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row{
    grid-template-columns:minmax(0,1fr) minmax(270px,297px) !important;
    gap:16px !important;
    min-height:calc(100svh - var(--site-header-height)) !important;
    padding-top:var(--service-row-top) !important;
    padding-bottom:31px !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row:first-child{
    padding-top:var(--service-row-top) !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row:first-child .image-card{
    height:min(var(--service-media-height),calc(100svh - var(--site-header-height) - var(--service-row-top) - 34px)) !important;
    min-height:0 !important;
    max-height:none !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row:first-child .image-card > :is(iframe,object,img,svg,.web-preview-stage,.web-preview-shell,.svg-artwork,.runway-inspection-frame){
    max-height:100% !important;
  }
  html[data-page="service"] .collection > .print-list:not(.branding-desktop-groups) > .print-row .info-panel{
    max-width:297px !important;
  }
  html[data-page="service"] .info-panel :is(p,.feature-description,.motion-description),
  html[data-page="service"] .portfolio-work-caption .portfolio-work-byline{
    font-size:14px !important;
  }
  html[data-page="service"] .portfolio-work-caption .portfolio-work-heading{
    font-size:17.3px !important;
  }
  html[data-page="service"] .copywriting-main .service-coming-soon{
    font-size:18.6px !important;
    color:#FFFFFF !important;
  }

  /* Branding: lower all three artwork/caption groups by one text line, evenly. */
  html[data-page="service"] .branding-showcase-grid{
    padding-top:calc(var(--service-row-top) + 22px) !important;
  }
  html[data-page="service"] .branding-showcase-card{
    grid-template-rows:389px auto !important;
    gap:5px !important;
  }
  html[data-page="service"] .branding-showcase-aerowander .branding-system-feature-card,
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork{
    height:389px !important;
    padding-top:29px !important;
  }
  html[data-page="service"] .branding-showcase-aerowander .branding-system-collage.logo-system-three{
    width:min(78%,401px) !important;
  }
  html[data-page="service"] .branding-showcase-aerowander .branding-system-collage.logo-system-three .branding-system-item img{
    max-width:401px !important;
  }
  html[data-page="service"] .branding-showcase-aoe .branding-showcase-artwork img{
    max-width:252px !important;
    max-height:324px !important;
    transform:translateX(-16px) !important;
  }
  html[data-page="service"] .branding-showcase-aoi .branding-showcase-artwork img{
    max-width:243px !important;
    max-height:297px !important;
  }
  html[data-page="service"] .branding-showcase-card .portfolio-work-caption{
    margin-top:31px !important;
    max-width:297px !important;
  }

  /* The side brand rail and footer follow the same physical reduction. */
  html[data-page="service"] .mobile-brand-watermark{width:clamp(133.7px,9.11vw,178.2px);}
  html[data-page="service"] #site-footer footer{font-size:11.7px !important;}
  html[data-page="service"] #site-footer .footer-main{font-size:11.7px !important;}
}

/* =========================================================
   2026-10-03 — desktop-only 10% reduction for user-marked service objects.
   Layout, copy, spacing, colors, interactions, and viewport sizing are unchanged.
   ========================================================= */
@media (min-width:1101px){
  html[data-page="service"] .wanderports-ui-row .image-card,
  html[data-page="service"] .runway-inspection-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"] .turntable-row .image-card{
    transform:scale(.9) !important;
    transform-origin:left top !important;
  }

  /* The red box on the AOE example surrounds the learning-block artwork itself. */
  html[data-page="service"] .aoe-learning-row .aoe-learning-artwork img{
    transform:scale(.9) !important;
    transform-origin:center center !important;
  }


  /* Preserve full-screen viewer behavior. */
  html[data-page="service"] .wanderports-ui-row .image-card:fullscreen,
  html[data-page="service"] .wanderports-ui-row .image-card:-webkit-full-screen,
  html[data-page="service"] .runway-inspection-row .image-card.runway-expanded{
    transform:none !important;
  }
}


/* =========================================================
   2026-10-03 v10 — requested targeted service-page refinements only.
   ========================================================= */
@media (min-width:1101px){
  /* Branding: center AOE/AOI to their captions and enlarge proportionally without lowering captions. */
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork{
    padding-top:29px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  html[data-page="service"] :is(.branding-showcase-aoe,.branding-showcase-aoi) .branding-showcase-artwork picture{
    width:297px !important;
    max-width:297px !important;
    height:100% !important;
    margin:0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    transform:translate(-28px,18px) !important;
  }
  html[data-page="service"] .branding-showcase-aoe .branding-showcase-artwork img{
    width:auto !important;
    height:auto !important;
    max-width:297px !important;
    max-height:380px !important;
    margin:0 auto !important;
    transform:none !important;
    object-position:center center !important;
  }
  html[data-page="service"] .branding-showcase-aoi .branding-showcase-artwork img{
    width:auto !important;
    height:auto !important;
    max-width:297px !important;
    max-height:350px !important;
    margin:0 auto !important;
    transform:none !important;
    object-position:center center !important;
  }


  /* Soccer pitch: align artwork top with the adjacent gold caption title. */
  html[data-page="service"] .soccer-pitch-row .image-card{
    margin-top:0 !important;
  }

  /* Split-flap: thin split line, full gold board outline, and board header aligned to caption top. */
  html[data-page="service"] .splitflap-row .image-card,
  html[data-page="service"] .splitflap-row .svg-artwork,
  html[data-page="service"] .splitflap-row .motion-inline-svg{
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
  html[data-page="service"] .splitflap-row .motion-inline-svg{
    margin:0 !important;
  }
  html[data-page="service"] .splitflap-row .solari-board{
    padding-top:0 !important;
    border:0 !important;
    box-sizing:border-box !important;
  }
  html[data-page="service"] .splitflap-row :is(.solari-half.top,.solari-motion.top,.solari-signal-half.top),
  html[data-page="service"] .splitflap-row .solari-stair-spacer::before{
    border-bottom:1.5px solid #000000 !important;
  }

  /* Web Design: both embedded preview screens use the same physical 16:9 canvas. */
  html[data-page="service"] .web-feature-row .image-card.web-preview-card{
    width:var(--service-media-width) !important;
    max-width:var(--service-media-width) !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16 / 9 !important;
  }
  html[data-page="service"] .web-feature-row :is(.landing-web-preview-wrap,.landing-web-preview-shell,.web-preview-stage,.web-preview-shell){
    width:100% !important;
    height:100% !important;
  }
}

/* External-link controls: icon-only open-square treatment. */
html[data-page="service"] :is(.preview-popout,.landing-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="service"] :is(.preview-popout,.landing-preview-popout,.popout-action) .external-link-icon{
  display:block !important;
  width:32px !important;
  height:32px !important;
}
html[data-page="service"] :is(.preview-popout,.landing-preview-popout,.popout-action) :is(.external-link-frame,.external-link-arrow){
  stroke:currentColor !important;
  transition:stroke .18s ease !important;
}
html[data-page="service"] :is(.preview-popout,.landing-preview-popout,.popout-action):is(:hover,:focus-visible){
  background:transparent !important;
  color:#FFBF00 !important;
  transform:none !important;
}



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

  /* Back control linework matches the menu icon line weight/spacing. */
  html[data-page="service"] .mobile-back-control::before,
  html[data-page="service"] .site-nav-global .nav-toggle::before{
    height:2px !important;
  }
  html[data-page="service"] .mobile-back-control::before{
    top:calc(3px + clamp(5.5px,1.65vw,7px)) !important;
    background:#262626 !important;
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 #262626,0 clamp(12.6px,3.7vw,15.2px) 0 #262626,0 clamp(18.9px,5.55vw,22.8px) 0 #262626,0 clamp(25.2px,7.4vw,30.4px) 0 #262626 !important;
  }
  html[data-page="service"] .mobile-back-arrow,
  html[data-page="service"] .mobile-back-label{
    color:#FFFFFF !important;
    text-shadow:none !important;
  }
  html[data-page="service"] .mobile-back-arrow{
    flex:0 0 28px !important;
    width:28px !important;
    height:18px !important;
  }
  html[data-page="service"] .mobile-back-arrow::before{
    left:3px !important;
    top:7px !important;
    width:25px !important;
    height:4px !important;
  }
  html[data-page="service"] .mobile-back-arrow::after{
    left:3px !important;
    top:4px !important;
    width:8px !important;
    height:8px !important;
    border-left:4px solid currentColor !important;
    border-bottom:4px solid currentColor !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) .mobile-back-arrow,
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) .mobile-back-label{
    color:#FFBF00 !important;
  }

  /* Restore the top divider and match the Featured Works divider thickness. */
  html[data-page="service"] .section-divider{
    display:block !important;
    width:100% !important;
    height:1px !important;
    margin:0 0 36px !important;
    background:#5d5d5d !important;
    border:0 !important;
  }

  /* Increase spacing between featured works / sections by 50%. */
  html[data-page="service"] .service-mobile-feature-label{margin:225px auto 0 !important;}
  html[data-page="service"] .print-list{gap:225px !important;}

  /* Runway viewer shell: transparent and square-cornered. */
  html[data-page="service"] .runway-inspection-row :is(.image-card,.runway-inspection-frame){
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  /* Final motion items stay hidden on mobile. */
  html[data-page="service"] :is(.splitflap-row,.camera-row,.mobile-hidden-feature){display:none !important;}
}

/* =========================================================
   2026-10-05 pass9 — requested mobile header/service refinements
   ========================================================= */
@media (max-width:700px){
  /* Align BACK/menu line sets with the vertical logo's top line set. */
  html[data-page="service"] .mobile-back-control{top:0 !important;}
  html[data-page="service"] .site-nav-global .nav-toggle{top:2px !important;}

  /* Lighter arrow; BACK still turns gold, while the arrow remains white. */
  html[data-page="service"] .mobile-back-arrow::before{
    height:3px !important;
  }
  html[data-page="service"] .mobile-back-arrow::after{
    width:8px !important;
    height:8px !important;
    border-left-width:3px !important;
    border-bottom-width:3px !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible)::before{
    background:#FFFFFF !important;
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 #FFFFFF,0 clamp(12.6px,3.7vw,15.2px) 0 #FFFFFF,0 clamp(18.9px,5.55vw,22.8px) 0 #FFFFFF,0 clamp(25.2px,7.4vw,30.4px) 0 #FFFFFF !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) .mobile-back-arrow{color:#FFFFFF !important;}
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) .mobile-back-label{color:#FFBF00 !important;}

  /* No divider beneath the page title; title and service list sit together. */
  html[data-page="service"] .section-divider{display:none !important;}
  html[data-page="service"] .page-title{margin-bottom:0 !important;}
  html[data-page="service"] .service-mobile-overview{margin-top:0 !important;}

  /* Give the first featured artwork more breathing room below FEATURED WORKS on every service page. */
  html[data-page="service"] .service-mobile-feature-label{margin-bottom:36px !important;}
}


/* =========================================================
   2026-10-05 pass10 — requested mobile-only refinements
   ========================================================= */
@media (max-width:700px){
  /* Keep the grey Madhi Studio watermark visibly behind all service-page content. */
  html[data-page="service"] .mobile-brand-watermark{z-index:2 !important;}
  html[data-page="service"] body > main{position:relative;z-index:auto !important;background:transparent !important;}
  html[data-page="service"] main > section{position:relative;z-index:auto !important;background:transparent !important;}
  html[data-page="service"] main > section > *{position:relative;z-index:3 !important;}
  html[data-page="service"] :is(
    .page-section,.page-section .container,.collection,.print-list,.print-row,.info-panel,
    .service-mobile-overview,.service-mobile-includes,.portfolio-work-caption,
    .branding-showcase-grid,.branding-showcase-card,.branding-system-feature-card
  ){
    background:transparent !important;
    box-shadow:none !important;
  }

  /* BACK hover changes only the arrow and word; all horizontal guide lines stay unchanged. */
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible)::before{
    background:#262626 !important;
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 #262626,0 clamp(12.6px,3.7vw,15.2px) 0 #262626,0 clamp(18.9px,5.55vw,22.8px) 0 #262626,0 clamp(25.2px,7.4vw,30.4px) 0 #262626 !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) .mobile-back-arrow,
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) .mobile-back-label{
    color:#FFBF00 !important;
  }

  /* Halve the space after the service list before Featured Works, consistently on every service page. */
  html[data-page="service"] .service-mobile-feature-label{
    margin-top:112.5px !important;
  }
}

/* pass10 visibility reinforcement: keep service content transparent over the persistent grey mark. */
@media (max-width:700px){
  html[data-page="service"] :is(
    .page-section,.collection,.branding-showcase-grid,.branding-showcase-card,
    .print-list,.print-row,.image-card,.info-panel,.portfolio-work-caption,
    .service-mobile-overview,.service-mobile-includes,#site-footer,#site-footer footer
  ){
    background:transparent !important;
  }
}

/* =========================================================
   2026-10-05 pass11 — requested mobile finishing refinements
   ========================================================= */
@media (max-width:700px){
  /* Copywriting coming-soon line sits lower beneath its divider. */
  html[data-page="service"] .copywriting-main .copywriting-coming-soon-stage{
    padding-top:16px !important;
  }

  /* Shorter BACK arrow shaft; guide lines do not change on hover. */
  html[data-page="service"] .mobile-back-arrow{
    flex-basis:18px !important;
    width:18px !important;
  }
  html[data-page="service"] .mobile-back-arrow::before{
    width:13px !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible)::before{
    background:#262626 !important;
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 #262626,0 clamp(12.6px,3.7vw,15.2px) 0 #262626,0 clamp(18.9px,5.55vw,22.8px) 0 #262626,0 clamp(25.2px,7.4vw,30.4px) 0 #262626 !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible) :is(.mobile-back-arrow,.mobile-back-label){
    color:#FFBF00 !important;
  }

  /* Portfolio preview pop-out controls: gold + bolder on hover/focus. */
  html[data-page="service"] :is(.preview-popout,.landing-preview-popout,.popout-action):is(:hover,:focus-visible){
    color:#FFBF00 !important;
  }
  html[data-page="service"] :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="service"] #site-footer .footer-main,
  html[data-page="service"] #site-footer .footer-main *,
  html[data-page="service"] #site-footer .footer-craft,
  html[data-page="service"] footer .footer-main,
  html[data-page="service"] footer .footer-main *,
  html[data-page="service"] footer .footer-craft{
    color:#262626 !important;
    font-size:13.9px !important;
    opacity:1 !important;
  }
}


/* =========================================================
   2026-10-05 pass13 — requested mobile BACK/footer refinements only
   ========================================================= */
@media (max-width:700px){
  /* Start the arrow at the left end of the grey guide lines and place its white shaft directly over the middle guide line. */
  html[data-page="service"] .mobile-back-control{
    justify-content:flex-start !important;
  }
  html[data-page="service"] .mobile-back-arrow{
    flex:0 0 28px !important;
    width:28px !important;
    height:18px !important;
  }
  html[data-page="service"] .mobile-back-arrow::before{
    left:0 !important;
    top:9px !important;
    width:28px !important;
    height:2px !important;
  }
  html[data-page="service"] .mobile-back-arrow::after{
    left:0 !important;
    top:5px !important;
    width:8px !important;
    height:8px !important;
    border-left-width:3px !important;
    border-bottom-width:3px !important;
  }
  html[data-page="service"] .mobile-back-control:is(:hover,:focus-visible)::before{
    background:#262626 !important;
    box-shadow:0 clamp(6.3px,1.85vw,7.6px) 0 #262626,0 clamp(12.6px,3.7vw,15.2px) 0 #262626,0 clamp(18.9px,5.55vw,22.8px) 0 #262626,0 clamp(25.2px,7.4vw,30.4px) 0 #262626 !important;
  }

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

@media (min-width:701px){
  html[data-page="service"] #site-footer .footer-main,
  html[data-page="service"] #site-footer .footer-main *,
  html[data-page="service"] #site-footer .footer-craft,
  html[data-page="service"] footer .footer-main,
  html[data-page="service"] footer .footer-main *,
  html[data-page="service"] footer .footer-craft{
    color:#4b4b4b !important;
  }
}


/* =========================================================
   2026-10-05 pass16 — Motion Graphics mobile-only visibility
   ========================================================= */
@media (max-width:700px){
  html[data-page="service"] .splitflap-row,
  html[data-page="service"] .camera-row{
    display:none !important;
  }
}

/* =========================================================
   Soccer pitch — one SVG per breakpoint
   ========================================================= */

/* DESKTOP — show horizontal pitch only */
@media (min-width:951px){
  html[data-page="service"] .soccer-pitch-svg-desktop{
    display:block !important;
  }

  html[data-page="service"] .soccer-pitch-svg-mobile{
    display:none !important;
  }
}

/* MOBILE — show vertical pitch only */
@media (max-width:950px){
  html[data-page="service"] .soccer-pitch-svg-desktop{
    display:none !important;
  }

  html[data-page="service"] .soccer-pitch-svg-mobile{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
}

/* =========================================================
   UI page — soccer final viewport + footer
   ========================================================= */
@media (min-width:951px){

  html[data-page="service"]{
    --soccer-footer-height:56px;
  }

  html[data-page="service"] .soccer-pitch-row:last-child{
    height:calc(
      var(--service-page-viewport) - var(--soccer-footer-height)
    ) !important;

    min-height:calc(
      var(--service-page-viewport) - var(--soccer-footer-height)
    ) !important;

    max-height:calc(
      var(--service-page-viewport) - var(--soccer-footer-height)
    ) !important;

    box-sizing:border-box !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  html[data-page="service"] #site-footer{
    height:var(--soccer-footer-height) !important;
    min-height:var(--soccer-footer-height) !important;
    margin:0 !important;
  }

  html[data-page="service"] #site-footer footer{
    height:var(--soccer-footer-height) !important;
    min-height:var(--soccer-footer-height) !important;
    padding:0 24px 8px !important;
    display:flex !important;
    align-items:flex-end !important;
    box-sizing:border-box !important;
  }
}


/* =========================================================
   2026-10-06 pass — restore requested service-page refinements only
   ========================================================= */
/* Footer text color: consistent #e7e7e7 on all service pages, desktop and mobile. */
html[data-page="service"] :is(#site-footer, footer) :is(.footer-main, .footer-main *, .footer-craft, .footer-site-links, .footer-site-links *, .footer-site-link){
  color:#e7e7e7 !important;
  opacity:1 !important;
}

/* Desktop footer uses the exact landing-page footprint and typography. */
@media (min-width:701px){
  html[data-page="service"]{--service-footer-height:58px !important;}
  html[data-page="service"] #site-footer{
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    margin:0 !important;
  }
  html[data-page="service"] #site-footer footer{
    width:100% !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 !important;
    background:transparent !important;
    border:0 !important;
  }
  html[data-page="service"] #site-footer .footer-inner{
    width:100% !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-end !important;
    gap:0 !important;
    padding:0 !important;
    text-align:right !important;
  }
  html[data-page="service"] #site-footer .footer-main{
    width:auto !important;
    margin:0 !important;
    font-size:13.9px !important;
    text-align:right !important;
    color:#e7e7e7 !important;
    opacity:1 !important;
  }
  html[data-page="service"] #site-footer .footer-craft{color:#e7e7e7 !important;}
}

/* Mobile Motion Graphics restores the visible board/camera presentation. */
@media (max-width:700px){
  html[data-page="service"] .splitflap-row,
  html[data-page="service"] .camera-row{
    display:grid !important;
  }

  /* Split-flap: restore the larger mobile board proportions and top alignment. */
  html[data-page="service"] .splitflap-row .image-card,
  html[data-page="service"] .splitflap-row .svg-artwork,
  html[data-page="service"] .splitflap-row .motion-inline-svg,
  html[data-page="service"] .splitflap-row .solari-demo,
  html[data-page="service"] .splitflap-row .solari-board{
    width:100% !important;
    height:306px !important;
    min-height:306px !important;
    max-height:306px !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding-top:0 !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
  html[data-page="service"] .splitflap-row .solari-grid-row,
  html[data-page="service"] .splitflap-row .solari-header-row,
  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;
    min-height:34px !important;
    flex-basis:34px !important;
  }
  html[data-page="service"] .splitflap-row .solari-header-row{font-size:10px !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;}

  /* Keep only the single intended rule above the Philadelphia row. */
  html[data-page="service"] .splitflap-row .solari-data-row.is-editable :is(.solari-half.top,.solari-motion.top,.solari-signal-half.top),
  html[data-page="service"] .splitflap-row .solari-data-row.is-editable .solari-stair-spacer::before{
    border-bottom:0 !important;
  }

  /* Animated camera: 40% smaller than the prior 90% mobile treatment. */
  html[data-page="service"] .camera-row .motion-camera-picture{
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
  }
  html[data-page="service"] .camera-row .svg-artwork .motion-svg-object{
    width:54% !important;
    max-width:54% !important;
    height:auto !important;
    margin:0 auto !important;
  }
}

/* Ensure exactly one soccer-pitch SVG is visible per breakpoint. */
@media (min-width:701px){
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-inline{
    position:relative !important;
  }
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-svg-desktop{
    display:block !important;
    visibility:visible !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
  }
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-svg-mobile{
    display:none !important;
    visibility:hidden !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    opacity:0 !important;
  }
}
@media (max-width:700px){
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-svg-desktop{
    display:none !important;
    visibility:hidden !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    opacity:0 !important;
  }
  html[data-page="service"] .soccer-pitch-row .soccer-pitch-svg-mobile{
    display:block !important;
    visibility:visible !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    opacity:1 !important;
  }
}



/* 2026-10-06 — align visible external-link square with the copy column. */
@media (min-width:1101px){
  html[data-page="service"] .info-panel > :is(.preview-popout,.landing-preview-popout,.popout-action){
    margin-left:-7px !important;
    align-self:flex-start !important;
    justify-self:start !important;
  }
}


/* 2026-10-07 — match mobile service bullets to desktop gold arrows. */
@media (max-width:1100px){
  html[data-page="service"] .service-mobile-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="service"] .service-mobile-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="service"] .service-mobile-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="service"] .service-mobile-includes-list li::marker{content:"" !important;}
}

/* 2026-10-07 — requested service-page bullet and Website pop-out refinements only. */
@media (min-width:1101px){
  /* Keep service-page arrows immediately beside their copy when a list item wraps. */
  html[data-page="service"] .service-desktop-includes-list li{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    gap:6px !important;
    width:fit-content !important;
    max-width:100% !important;
    padding:0 !important;
  }
  html[data-page="service"] .service-desktop-includes-list li::before{
    position:static !important;
    display:block !important;
    flex:0 0 auto !important;
    width:0 !important;
    height:0 !important;
    margin:.42em 0 0 !important;
  }

  /* Both Website Design pop-out controls align to the copy column and hover gold/bold. */
  html[data-page="service"] .web-feature-row .info-panel > .preview-popout{
    margin-left:-9px !important;
    align-self:flex-start !important;
    justify-self:start !important;
  }
  html[data-page="service"] .web-feature-row .info-panel > .preview-popout:is(:hover,:focus-visible){
    color:#FFBF00 !important;
    font-weight:700 !important;
  }
  html[data-page="service"] .web-feature-row .info-panel > .preview-popout:is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
    stroke:#FFBF00 !important;
    stroke-width:3.6px !important;
  }
}


/* 2026-10-07 — Website service pop-outs use landing-page caption spacing. */
@media (min-width:1101px){
  html[data-page="service"] .web-feature-row .info-panel{
    gap:0 !important;
  }
  html[data-page="service"] .web-feature-row .portfolio-work-caption{
    margin-bottom:0 !important;
  }
  html[data-page="service"] .web-feature-row .info-panel > .preview-popout{
    position:static !important;
    inset:auto !important;
    margin:12px 0 0 -9px !important;
    align-self:flex-start !important;
    justify-self:start !important;
  }
}

/* 2026-10-07 — Website service pop-out hover stays gold at normal stroke weight. */
@media (min-width:1101px){
  html[data-page="service"] .web-feature-row .info-panel > .preview-popout:is(:hover,:focus-visible){
    color:#FFBF00 !important;
    font-weight:400 !important;
  }
  html[data-page="service"] .web-feature-row .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 — Website service pop-outs stay gold at the normal resting stroke weight. */
html[data-page="service"] .web-feature-row .info-panel > .preview-popout:is(:hover,:focus-visible){
  color:#FFBF00 !important;
  font-weight:400 !important;
}
html[data-page="service"] .web-feature-row .info-panel > .preview-popout:is(:hover,:focus-visible) :is(.external-link-frame,.external-link-arrow){
  stroke:#FFBF00 !important;
  stroke-width:2.4px !important;
}