/* evas.aero -- what the static site needs beside styles.css (the old global sheet, verbatim but for one font swap (the
   Material heading/body face -> Inter), which build.py applies and the tests hold).

   1. The one component stylesheet the Angular build had (the quotation form, avx-service-request), with its
      emulated-encapsulation attributes removed. `form[attr] .dropdown-menu[attr]` was (0,2,1); it is
      scoped here by the form's id instead, (1,1,1), so it still beats the global `*{margin:0;padding:0;…}` reset and
      every tailwind utility -- the `[root]>…` lesson from evas-hello: dropping the attribute costs specificity, and a
      rule that silently loses changes the layout. Every other component had no styles of its own (all global).
   2. New: what Angular did by other means (ngIf -> [hidden]), and the mobile menu, which the old header styled
      ([data-menu-open]) but never wired: its lines had no stroke and nothing set the attribute. */

/* 1. avx-service-request -- the quotation form, redesigned 2026-09-25 (Founder: "improve the form's UX/UI").
   Scoped by the form's id, (1,x,x), so it beats the global sheet's `*{margin:0;padding:0}` reset and its
   `input,textarea,select{margin-bottom:1.25rem;border-radius:2rem;border-color:var(--color-bg-secondary)}` -- a border
   that is nearly invisible on the page background; the form's fields get a visible one here.
   Brand: burgundy #800020 (--color-primary), Oxford Blue #050D23 (--color-secondary), ecru #DDC796 (--color-accent-1);
   every colour here is a brand value or a token from styles.css :root (the "Bolder brand" pass, 2026-09-25, section 3).
   No entrance animations and no transitions: a state change (a chosen card, a ticked chip, an error) paints at once,
   in every renderer -- an offscreen one never ticks a transition. */
#quote{--q-line:var(--color-grey-dark);--q-soft:var(--color-grey-mid);--q-red:var(--color-error);--q-tint:var(--color-grey-light);
  display:flex;flex-direction:column;gap:2rem;max-width:800px;margin:0 auto;padding:0 1.25rem;color:var(--color-secondary);
  font-size:max(15px,1rem);line-height:1.5}
@media (min-width:1024px){#quote{padding:0}}
#quote .q-body{display:flex;flex-direction:column;gap:2.5rem}
#quote fieldset{border:0;margin:0;padding:0;min-width:0}
#quote legend{padding:0;margin:0 0 1rem;width:100%}
#quote legend h5,#quote .q-section>h5{margin:0 0 1rem}
#quote legend h5{margin:0}
#quote .q-note{font-size:max(13px,.875rem);color:var(--color-text-muted);margin:-.5rem 0 0}
#quote .q-req{color:var(--color-primary);font-weight:600}
#quote h5 .q-req{font-size:.7em;vertical-align:top}
#quote .q-grid{display:grid;grid-template-columns:1fr;gap:.25rem 1.25rem}
@media (min-width:768px){#quote .q-grid{grid-template-columns:1fr 1fr}}
#quote .q-field{display:flex;flex-direction:column;min-width:0}
#quote .q-field>label{font-size:max(14px,.875rem);line-height:1.4;font-weight:500;margin:0 0 .375rem .25rem}
#quote input:not([type=radio]):not([type=checkbox]),#quote textarea{
  display:block;width:100%;margin:0;min-height:max(48px,3rem);padding:.625rem 1.125rem;font-size:max(16px,1rem);line-height:1.5;
  background:#FFFFFF;border:1px solid var(--q-line);border-radius:1.5rem;color:inherit;
  -webkit-user-select:text;user-select:text}
#quote textarea{border-radius:1.25rem;min-height:7.5rem;resize:vertical}
#quote input[type=date],#quote input[type=time]{-webkit-appearance:none;appearance:none}
#quote input:not([type=radio]):not([type=checkbox]):hover,#quote textarea:hover{border-color:var(--color-secondary)}
#quote input:not([type=radio]):not([type=checkbox]):focus,#quote textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
#quote input:not([type=radio]):not([type=checkbox])[aria-invalid=true]{border-color:var(--q-red)}
#quote input:not([type=radio]):not([type=checkbox])[aria-invalid=true]:focus{box-shadow:0 0 0 1px var(--q-red)}
/* the error line keeps its height whether empty or not: an error appearing never moves the next field */
#quote .q-err{min-height:max(22px,1.5rem);margin:.25rem 0 0 .25rem;font-size:max(13px,.8125rem);line-height:1.4;color:var(--q-red)}
#quote .q-err:empty::before{content:"\00a0"}

/* the service: four selectable cards (a radio group), two by two on a phone */
#quote .q-cards{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (min-width:768px){#quote .q-cards{grid-template-columns:repeat(4,1fr)}}
#quote .q-card{position:relative;display:block;cursor:pointer}
#quote .q-card input,#quote .q-chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
#quote .q-card-face{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.75rem;height:100%;min-height:max(76px,5.5rem);
  padding:.875rem 1rem;background:#FFFFFF;border:1.5px solid var(--q-soft);border-radius:1rem}
#quote .q-card-label{font-weight:500;line-height:1.3}
#quote .q-card-mark{width:max(20px,1.25rem);height:max(20px,1.25rem);border-radius:50%;border:2px solid var(--q-line);background:#FFFFFF}
#quote .q-card:hover .q-card-face{border-color:var(--color-primary)}
#quote .q-card input:checked+.q-card-face{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-text-inverse)}
#quote .q-card input:checked+.q-card-face .q-card-mark{border-color:var(--color-accent-1);box-shadow:inset 0 0 0 4px var(--color-primary);background:var(--color-accent-1)}
#quote .q-card input:focus-visible+.q-card-face{outline:3px solid var(--color-primary);outline-offset:2px}
#quote .q-invalid .q-card-face{border-color:var(--q-red)}

/* the chosen service's options: chips (radio for Air Charter, checkboxes for the others) */
#quote .q-chips{display:flex;flex-wrap:wrap;gap:.5rem}
#quote .q-chip{position:relative;display:inline-flex;cursor:pointer}
#quote .q-chip span{display:inline-flex;align-items:center;gap:.5rem;min-height:max(44px,2.75rem);padding:.5rem 1.125rem;background:#FFFFFF;
  border:1.5px solid var(--q-line);border-radius:9999px;font-weight:500;line-height:1.25rem}
#quote .q-chip--check span::before{content:"";width:max(14px,.875rem);height:max(14px,.875rem);border:2px solid var(--q-line);border-radius:.25rem;flex:none}
#quote .q-chip:hover span{border-color:var(--color-primary)}
#quote .q-chip input:checked+span{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
#quote .q-chip--check input:checked+span::before{border-color:var(--color-text-inverse);
  background:var(--color-text-inverse) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='%23800020' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
#quote .q-chip input:focus-visible+span{outline:3px solid var(--color-primary);outline-offset:2px}

/* routes: one card per leg, numbered; From/To full width on a phone, Date and Time side by side */
#quote .q-routes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.5rem;counter-reset:route}
#quote .q-route{counter-increment:route;position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"from from" "to to" "date time" "pax pax";
  gap:.25rem .75rem;padding:1.5rem 1rem .5rem;background:#FFFFFF;border:1px solid var(--q-soft);border-radius:1.25rem}
@media (min-width:768px){#quote .q-route{grid-template-columns:repeat(6,1fr);grid-template-areas:"from from from to to to" "date date time time pax pax";gap:.25rem 1rem;padding:1.5rem 1.25rem .5rem}}
#quote .q-route::before,#quote .q-station::before{content:counter(route);position:absolute;top:-.75rem;left:1rem;min-width:max(22px,1.5rem);height:max(22px,1.5rem);padding:0 .5rem;border-radius:9999px;
  background:var(--color-primary);color:var(--color-text-inverse);font-size:max(12px,.75rem);font-weight:600;line-height:max(22px,1.5rem);text-align:center}
#quote .q-route .q-field,#quote .q-station .q-field{padding-bottom:1rem}
#quote .q-route .q-field:nth-child(1){grid-area:from}
#quote .q-route .q-field:nth-child(2){grid-area:to}
#quote .q-route .q-field:nth-child(3){grid-area:date}
#quote .q-route .q-field:nth-child(4){grid-area:time}
#quote .q-route .q-field:nth-child(5){grid-area:pax}
#quote .q-remove{position:absolute;top:-22px;right:-10px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border-radius:9999px;background:#FFFFFF;border:1px solid var(--q-soft);color:var(--color-text-muted);box-shadow:0 1px 3px rgb(5 13 35 / .08)}
#quote .q-remove svg{width:18px;height:18px}
#quote .q-remove:hover{color:var(--color-primary);border-color:var(--color-primary)}
#quote .q-add{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:max(48px,3rem);margin-top:1rem;padding:.5rem 1.5rem;
  border:1.5px dashed var(--color-primary);border-radius:9999px;color:var(--color-primary);font-weight:600;width:100%}
@media (min-width:768px){#quote .q-add{width:auto}}
#quote .q-add svg{width:max(18px,1.25rem);height:max(18px,1.25rem)}
#quote .q-add:hover{background:var(--color-grey-light);border-style:solid}
#quote .q-remove:focus-visible,#quote .q-add:focus-visible,#quote .q-submit:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}

/* the airport list: a listbox under its input, keyboard-highlighted option = aria-selected */
#quote .q-airport{position:relative}
#quote .q-list{position:absolute;top:calc(100% - .75rem);left:0;right:0;z-index:30;margin:0;padding:.375rem;list-style:none;max-height:18rem;overflow-y:auto;
  background:#FFFFFF;border:1px solid var(--q-soft);border-radius:1rem;box-shadow:0 10px 30px rgb(5 13 35 / .14)}
#quote .q-list [role=option]{display:flex;flex-direction:column;padding:.625rem .875rem;border-radius:.625rem;cursor:pointer;-webkit-user-select:none;user-select:none}
#quote .q-list [role=option]:hover,#quote .q-list [aria-selected=true]{background:var(--q-tint)}
#quote .q-list [aria-selected=true]{box-shadow:inset 3px 0 0 var(--color-primary)}
#quote .q-opt-name{font-weight:500;line-height:1.3}
#quote .q-opt-meta{font-size:max(13px,.8125rem);color:var(--color-text-muted)}

/* sending, sent, failed */
#quote .q-actions{display:flex;justify-content:flex-end}
#quote .q-submit{position:relative;display:inline-grid;align-items:center;justify-items:center;width:100%;min-height:max(52px,3.25rem);padding:.75rem 3rem;
  font-size:max(16px,1rem);font-weight:600;border-radius:9999px}
@media (min-width:768px){#quote .q-submit{width:auto;min-width:12rem}}
#quote .q-submit>.q-submit-idle,#quote .q-submit>.q-submit-busy{grid-area:1/1}
#quote .q-submit-busy,#quote .q-submit.is-busy .q-submit-idle{visibility:hidden}
#quote .q-submit.is-busy .q-submit-busy{visibility:visible}
#quote .q-submit:disabled{cursor:progress;opacity:.9}
#quote .q-spinner{position:absolute;left:1.25rem;top:50%;width:1.125rem;height:1.125rem;margin-top:-.5625rem;border-radius:50%;
  border:2px solid var(--color-accent-1);border-top-color:var(--color-text-inverse);visibility:hidden}
#quote .q-submit.is-busy .q-spinner{visibility:visible;animation:q-spin .8s linear infinite}
@keyframes q-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#quote .q-submit.is-busy .q-spinner{animation-duration:2.4s}}
#quote .q-result{border-radius:1.25rem;padding:1.25rem 1.5rem;outline:none}
#quote .q-result p+p{margin-top:.5rem}
#quote .q-result--sent{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:2.5rem 1.5rem;
  background:var(--color-grey-light);border:1px solid var(--color-primary)}
#quote .q-result-icon{width:3rem;height:3rem;color:var(--color-primary)}
#quote .q-result-title{font-size:max(22px,1.5rem);line-height:1.3;font-weight:600;color:var(--color-secondary)}
#quote .q-result--error{background:#FFFFFF;border:1px solid var(--q-red);border-left-width:4px;color:var(--color-secondary)}
#quote .q-result--error a{text-decoration:underline;text-underline-offset:2px;color:inherit;font-weight:500;white-space:nowrap}
#quote .q-result:focus-visible{box-shadow:0 0 0 3px var(--color-primary)}

/* the spam trap: off-screen for people, present for naive bots (never display:none -- some bots skip hidden fields) */
#quote .q-hp,#newsletter .nl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.q-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 2. new */
[hidden]{display:none!important}
/* a service section lands with its dark cover right under the menu band (Founder, 2026-09-25: "again the white space") --
   the old 196 px left a cream band above every cover once the covers turned dark; a plain #anchor lands the same way */
[inertia-offset-y]{scroll-margin-top:100px}
/* mobile menu, below 1024 px: the burger's lines (currentColor, as the header text), the cross when open, the panel */
#headerMobileMenuTrigger line{stroke:currentColor;stroke-width:1.5px;transform-box:fill-box;transform-origin:center}
#headerMobileMenuTrigger .cross-line{transform:scale(0)}
@media (max-width:1023px){
  avx-header #header #headerContent[data-menu-open] #headerNav{top:0;right:0;margin:0;max-height:100svh;opacity:1;background:var(--color-bg-primary);border-bottom-left-radius:1.5rem;pointer-events:auto}
  avx-header #header #headerContent[data-menu-open] #headerNav ul{row-gap:1rem}
}

/* One logo on screen at a time (2026-09-25): the header logo hides while the hero's own mark is in view -- site.js */
#headerLogo { transition: opacity .3s ease, visibility .3s ease; }
.hero-in-view #headerLogo { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #headerLogo { transition: none; } }

/* Airport fields read as dropdowns (2026-09-25): a chevron, a greyed hint row, and room above/below when focused so the
   list is never under the sticky header or off the bottom of the screen -- request.js reveal(). The :not() pair matches
   the base input rule's specificity, whose `background:#FFFFFF` shorthand would otherwise reset image and repeat */
#quote .q-airport input:not([type=radio]):not([type=checkbox]){padding-right:2.75rem;scroll-margin-top:8rem;scroll-margin-bottom:20rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23800020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:14px}
#quote .q-airport input:not([type=radio]):not([type=checkbox])[aria-expanded=true]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23800020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
#quote .q-list .q-hint{cursor:default;color:var(--color-text-muted);font-style:italic}
#quote .q-list .q-hint:hover{background:none}

/* Passengers per leg and the cargo block (Founder, 2026-09-25: "number of passengers? cargo information?") */
#quote[data-cargo-only] .q-route{grid-template-areas:"from from" "to to" "date time"}
@media (min-width:768px){#quote[data-cargo-only] .q-route{grid-template-areas:"from from from to to to" "date date date time time time"}}
#quote[data-cargo-only] .q-pax{display:none}
#quote .q-span{grid-column:1/-1}
#quote .q-label{display:block;font-size:max(14px,.875rem);line-height:1.4;font-weight:500;margin:0 0 .375rem .25rem}
#quote .q-cargo .q-grid{margin-bottom:.25rem}
#quote .q-cargo .q-field{padding-bottom:1rem}

/* Stations for Ground Handling and Flight Support, the aircraft, and the Aircraft Management enquiry (Founder, 2026-09-25).
   A station card is a leg card with its own grid: Station full width; the arrival on one row, the departure on the
   next, then Passengers. On a phone the airport fields go full width and each date sits beside its time. */
#quote .q-station{counter-increment:route;position:relative;display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"station station" "from from" "arrdate arrtime" "to to" "depdate deptime" "pax pax";
  gap:.25rem .75rem;padding:1.5rem 1rem .5rem;background:#FFFFFF;border:1px solid var(--q-soft);border-radius:1.25rem}
@media (min-width:768px){#quote .q-station{grid-template-columns:2fr 1fr 1fr;
  grid-template-areas:"station station station" "from arrdate arrtime" "to depdate deptime" "pax . .";gap:.25rem 1rem;padding:1.5rem 1.25rem .5rem}}
#quote .q-station .q-f-station{grid-area:station}
#quote .q-station .q-f-from{grid-area:from}
#quote .q-station .q-f-arrdate{grid-area:arrdate}
#quote .q-station .q-f-arrtime{grid-area:arrtime}
#quote .q-station .q-f-to{grid-area:to}
#quote .q-station .q-f-depdate{grid-area:depdate}
#quote .q-station .q-f-deptime{grid-area:deptime}
#quote .q-station .q-f-pax{grid-area:pax}
/* the Station field's error line: no reserved height inside a card (the card's own spacing carries it) */
#quote .q-station .q-err{min-height:0;margin-top:.25rem}
#quote .q-station .q-err:empty{display:none}
#quote .q-details .q-field{padding-bottom:1rem}

#quote .q-looking .q-err{margin-top:.5rem}
#quote .q-invalid .q-chip span{border-color:var(--q-red)}

/* Nature of Goods is a dropdown (2026-09-25): styled as the other fields, the same burgundy chevron */
#quote select.q-select{display:block;width:100%;margin:0;min-height:max(48px,3rem);padding:.625rem 2.75rem .625rem 1.125rem;
  font:inherit;font-size:max(16px,1rem);line-height:1.5;color:inherit;border:1px solid var(--q-line);border-radius:1.5rem;
  -webkit-appearance:none;appearance:none;cursor:pointer;background-color:#FFFFFF;background-repeat:no-repeat;
  background-position:right 1.1rem center;background-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23800020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
#quote select.q-select:hover{border-color:var(--color-secondary)}
#quote select.q-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}

/* 3. Bolder brand (Founder, 2026-09-25): an Oxford Blue menu band and footer with Ecru accents -- the brand's own
   "accent on primary" pairing -- Burgundy for headings, buttons and one key section, cream kept for reading.
   Every colour is a brand value (06 Brand/Brand -- Colour) or the site cream #FFFCF9, which stands in for the palette's
   Isabelline/White (named, never given values). Two rules decide most of what follows, both from the contrast matrix:
   Burgundy on Oxford Blue is 1.78:1, so neither is ever text or ground for the other; Ecru on cream/white is 1.66:1,
   so Ecru appears only on Oxford Blue or Burgundy. The pairs and their ratios are in the README.
   On the dark grounds (the band, the footer, the darkened hero) the mark is the brand kit's own Ecru export
   (logo.accent.svg, logo_mark.accent.svg), copied byte for byte -- Karim's decision as brand owner, 2026-09-25. The
   burgundy files stay for light grounds and are untouched (email signatures load them); the tests hold both by sha256. */

/* the menu band: solid Oxford Blue, one Ecru rule beneath it (the old cream gradient + mask + blur are dropped) */
avx-header #header:before{inset:0 0 auto 0;height:100px;opacity:1;background:var(--color-band);-webkit-mask:none;mask:none;
  border-bottom:1px solid var(--color-accent-1)}
avx-header #header:after{display:none}
avx-header #header #headerContent #headerNav ul a{color:var(--color-text-inverse)}
avx-header #header #headerContent #headerNav ul a:hover,avx-header #header #headerContent #headerNav ul a.active{color:var(--color-accent-1)}
avx-header #header #headerContent #headerMobileMenuTrigger{color:var(--color-text-inverse)}
avx-header a:focus-visible,avx-header button:focus-visible{outline:2px solid var(--color-accent-1);outline-offset:3px;border-radius:.25rem}
/* the CTA on the band is Ecru with an Oxford Blue label (Founder, 2026-09-25: "the request quotation button should be
   ecru") -- the sanctioned accent-on-Oxford pairing: label 11.66:1, and the fill against the band 11.66:1, so the edge
   clears the 3:1 UI-boundary rule with no outline. Hover/active turn the fill cream (label 18.88:1, edge 18.88:1); focus
   is a cream ring offset from the button. Only the header CTA: every button on the cream ground stays Burgundy. */
avx-header #headerCTA .cta-button{background-color:var(--color-accent-1);color:var(--color-secondary)}
avx-header #headerCTA .cta-button:hover,avx-header #headerCTA .cta-button:active{background-color:var(--color-cream);color:var(--color-secondary)}
avx-header #headerCTA .cta-button a:focus-visible{outline:2px solid var(--color-cream);outline-offset:4px;border-radius:9999px}
@media (max-width:1023px){
  avx-header #header #headerContent #headerNav{background:var(--color-band);box-shadow:0 10px 40px rgb(5 13 35 / .25)}
  avx-header #header #headerContent[data-menu-open] #headerNav{background:var(--color-band);border-left:1px solid var(--color-accent-1);border-bottom:1px solid var(--color-accent-1)}
}

/* the footer: Oxford Blue, Ecru section labels, cream text and links (Ecru on hover), Grey Mid small print */
avx-footer,avx-footer #footer{display:block;background:var(--color-band);color:var(--color-text-inverse)}
avx-footer{margin-top:2.5rem}
avx-footer #footer{display:grid}
avx-footer:before{display:none}
avx-footer #footer .top .center .line .name,avx-footer #footer .top .right .line .name,avx-footer #footer .top .left .label,
avx-footer #footer .bottom .right .line .legal{color:var(--color-accent-1)}
avx-footer #footer a:hover,avx-footer #footer .quick-view-button:hover{color:var(--color-accent-1)}
avx-footer #footer a:focus-visible,avx-footer #footer button:focus-visible{outline:2px solid var(--color-accent-1);outline-offset:2px;border-radius:.25rem}
avx-footer #footer .content:has(.social-link) .social-link .social-icon{height:1rem;width:1rem;flex:none}
avx-footer #footer .bottom{background:transparent;border-radius:0;border-top:1px solid var(--color-accent-1);padding-left:0;padding-right:0}
avx-footer #footer .bottom .right .line .documents li::marker{color:var(--color-accent-1)}
/* the newsletter field on the band: an Oxford Blue field with an Ecru edge (11.66:1 against the footer, clears 3:1),
   cream text (18.88:1), Grey Mid placeholder (12.04:1), the send arrow in Ecru (11.66:1); focus adds a cream ring */
avx-footer #footer .top .left .input_wrapper .email{background:var(--color-band);color:var(--color-text-inverse);border-color:var(--color-accent-1)}
avx-footer #footer .top .left .input_wrapper .email::placeholder{color:var(--color-grey-mid)}
avx-footer #footer .top .left .input_wrapper .email:focus{outline:none;box-shadow:0 0 0 1px var(--color-accent-1),0 0 0 4px var(--color-band),0 0 0 6px var(--color-cream)}
avx-footer #footer .top .left .input_wrapper .email:disabled{background:var(--color-band);color:var(--color-grey-mid)}
avx-footer #footer .top .left .input_wrapper .submit{color:var(--color-accent-1)}
avx-footer #footer .top .left .input_wrapper .submit:hover{color:var(--color-cream)}

/* focus on the light reading ground: Burgundy */
avx-outlet a:focus-visible,avx-outlet button:focus-visible,quick-view a:focus-visible,quick-view button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
quick-view .modal .content .content-wrapper .header .title{color:var(--color-primary)}

/* the hero, darker (Founder, 2026-09-25): an Oxford Blue overlay on the photo (heavier at the top where the headline
   sits), the bottom fade and the curtain falling into the Oxford Blue band rather than the cream page, the clouds dimmed,
   and every hero element light: "Egypt Valley" and the tagline cream, "Aviation Services" and the chevron Ecru, the
   mark in the Ecru export. Ratios measured on the rendered hero, darkest and lightest points: README. */
#hero #scene #heroCraft #heroCanvas{position:relative}
#hero #scene #heroCraft #heroCanvas:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgb(5 13 35 / .82) 0%,rgb(5 13 35 / .66) 50%,rgb(5 13 35 / .72) 100%)}
#hero #scene #heroContent #heroClouds img{opacity:.25}
#hero #scene #heroContent .headline .container .title{color:var(--color-text-inverse)}
#hero #scene #heroContent .headline .container .title span{color:var(--color-accent-1)}
#hero #scene #heroContent .headline .container .quote{color:var(--color-text-inverse);font-weight:300}
/* the Terms / Privacy quick views sit inside the footer's markup: reset them to the reading palette */
quick-view .modal .content{color:var(--color-text-base)}
quick-view .modal .content .body h1,quick-view .modal .content .body h2,quick-view .modal .content .body h3{color:var(--color-primary)}
/* the quotation form's section headings take the brand's heading colour */
#quote legend h5,#quote .q-section>h5{color:var(--color-primary)}
/* the first screen ends exactly at the band (Founder, 2026-09-25: "the white part below the hero"): the old sheet sized
   the hero 100svh - 120px under a 100px header, so 20px of the page showed above the fold -- invisible while hero, bar
   and page were all cream, a stray sliver under an Oxford Blue band. Hero + band = 100svh; the band's Ecru rule is the
   one deliberate edge between it and the page. */
#hero #scene{max-height:calc(100svh - 100px)}
#hero #scene #heroCraft{height:calc(100svh - 100px)}
#stageCurtain{inset:0 0 100px}

/* 4. Section rhythm (Founder, 2026-09-25): dark hero -- "Who we are" on cream -- "What we offer" on Oxford Blue --
   "Our partners" on cream -- the Burgundy call-to-action band -- the Oxford Blue footer. On Oxford Blue the key word of a
   heading turns Ecru (never Burgundy: 1.78:1) and the section sub-title becomes the signature: Ecru, letter-spaced caps,
   under a 1px Ecru rule. Burgundy stays for the key word on cream. */
home-page #services{margin-left:-2.5rem;margin-right:-2.5rem;padding:6rem 2.5rem;background:var(--color-band);color:var(--color-text-inverse)}
home-page #services .headline .title{color:var(--color-text-inverse)}
home-page #services .headline .title .text-primary{color:var(--color-accent-1)}
home-page #services .headline .quote{color:var(--color-accent-1);font-weight:500}
home-page #services .headline:after,avx-cta .cta-inner:before{content:"";display:block;width:4rem;height:1px;background:var(--color-accent-1)}
/* the service cards, dark (Founder: "the service cards should be darker too"). On the Oxford Blue section each card is
   told apart by its Ecru hairline (11.66:1 against the section, clears the 3:1 boundary rule on its own) over a
   cream-at-4% surface, so no new colour is invented; text cream, icons Ecru. The icons are the site's own burgundy
   raster files, painted Ecru through a CSS mask of the same file -- the files are untouched. Hover and keyboard
   focus: a second Ecru hairline and the title in Ecru. */
home-page #services .list .item{background:rgb(255 252 249 / .04);border-color:var(--color-accent-1)}
home-page #services .list .item:hover,home-page #services .list .item:focus-within{background:rgb(255 252 249 / .04);box-shadow:inset 0 0 0 1px var(--color-accent-1)}
home-page #services .list .item:hover .name,home-page #services .list .item:focus-within .name{color:var(--color-accent-1)}
home-page #services .list .item a:focus-visible{outline:2px solid var(--color-cream);outline-offset:6px;border-radius:1.5rem}
home-page #services .list .item a .image img{object-position:-99999px 0;background:var(--color-accent-1);
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
home-page #services .list .item a .image img[src$="air-charter.webp"]{--icon:url(/brand/stock/aviation/air-charter.webp)}
home-page #services .list .item a .image img[src$="ground-handling.webp"]{--icon:url(/brand/stock/aviation/ground-handling.webp)}
home-page #services .list .item a .image img[src$="flight-support.webp"]{--icon:url(/brand/stock/aviation/flight-support.webp)}
home-page #services .list .item a .image img[src$="aircraft-management.webp"]{--icon:url(/brand/stock/aviation/aircraft-management.webp)}
/* /services/: its sections open on photo banners that fade into the cream page, so the sections stay cream and the
   dark beat is the cards -- the same card as the home page's (Oxford Blue, Ecru hairline, cream text, Ecru title) */
services-page .restrainer .parts .floating-panel{background:var(--color-band);color:var(--color-text-inverse);box-shadow:inset 0 0 0 1px var(--color-accent-1)}
services-page .restrainer .parts .floating-panel .content .title{color:var(--color-accent-1)}

/* partner logos in greyscale, full colour on hover or keyboard focus (a CSS filter; the files are untouched). On a
   device with no hover they stay in colour: nothing could reveal them there, and a partner's mark should be seen as
   the partner drew it. The change is instant for readers who ask for reduced motion. */
@media (hover:hover){
  home-page #partners .list .item img{filter:grayscale(1);transition:filter .3s ease}
  home-page #partners .list .item:hover img,home-page #partners .list .item:focus-visible img{filter:none}
}
@media (prefers-reduced-motion:reduce){home-page #partners .list .item img{transition:none}}
/* the partner tiles wrap as centred rows (FlyEgypt off the list, Founder 2026-09-25: seven tiles left one orphan at the
   left of a six-column grid); each tile keeps its 9rem square */
home-page #partners .list{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem 2rem}
home-page #partners .list .item{flex:none}
/* the CEO's list, as on the company profile (Founder, 2026-09-26): 18 tiles, all light -- the three white marks (CKD, M1,
   EgyptAir Ground Services) are recoloured Oxford Blue in the files, not set on dark tiles (Founder: "darken them
   yourself"); a partner with no confirmed site is a tile without a link */
home-page #partners .list .item img{margin:auto}
home-page #partners .list{padding-bottom:.5rem}
home-page #partners .trademarks{margin:0;padding:0 1.5rem 2rem;text-align:center;font-size:.75rem;line-height:1rem;color:var(--color-text-muted)}

/* 5. The Burgundy call-to-action band above the footer (Founder, 2026-09-25), every page but /request/: full-width
   Burgundy -- it restores the brand's >=70% Burgundy share on pages now mostly Oxford Blue and cream. Headline cream
   (10.60:1); the button Ecru with an Oxford Blue label (11.66:1), its edge against the band 6.54:1; hover cream. */
avx-cta{display:block;width:100%;align-self:stretch;background:var(--color-primary);color:var(--color-text-inverse);margin-top:2.5rem}
avx-cta .cta-inner{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:4rem 1.5rem;text-align:center}
avx-cta .cta-title{font-size:2.25rem;line-height:2.5rem;font-weight:700;text-transform:uppercase;color:var(--color-text-inverse)}
avx-cta .cta-button{display:inline-block;background:var(--color-accent-1);color:var(--color-secondary);font-size:1rem;font-weight:600;padding:.75rem 2rem}
avx-cta .cta-button:hover,avx-cta .cta-button:active{background:var(--color-cream)}
avx-cta .cta-button a:focus-visible{outline:2px solid var(--color-cream);outline-offset:6px;border-radius:9999px}
avx-cta + avx-footer{margin-top:0}

/* 6. The footer, compact (Founder, 2026-09-25: "this is taking too much space"). Desktop: one row of four top-aligned
   columns -- the newsletter (about 28%), Head Office (its address first), Operations & Flight Support, Charter with
   the social icons beneath it. Tablet: the newsletter across the top, the three groups in three columns. Phone:
   stacked, tighter. The .center wrapper takes no box of its own (display:contents) so its groups sit in the row. */
avx-footer #footer{padding:2.75rem 2.5rem 1.25rem;gap:1.5rem}
avx-footer #footer .top{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:2rem;align-items:start}
avx-footer #footer .top .left,avx-footer #footer .top .center,avx-footer #footer .top .right{padding:0;grid-row:auto;grid-column:auto}
avx-footer #footer .top .center{display:contents}
avx-footer #footer .top .left .label{padding:0 0 .5rem}
avx-footer #footer .top .left .notice{margin-top:.625rem;padding:0;font-size:.6875rem;line-height:1.05rem}
avx-footer #footer .top .left .message{padding:0}
avx-footer #footer .top .line{gap:.5rem}
avx-footer #footer .top .line .name,avx-footer #footer .top .left .label{line-height:1.35}
avx-footer #footer .top .line .content{display:flex;flex-direction:column;gap:.375rem}
avx-footer #footer .top li,avx-footer #footer .top .center ul li a,avx-footer #footer .top .right ul li a{line-height:1.5}
avx-footer #footer .top .right{display:block;gap:0}
avx-footer #footer .top .right .line .content{flex-direction:row;gap:.25rem;padding-top:0}
avx-footer #footer .content:has(.social-link) .social-link a{align-items:center;justify-content:center;width:2.25rem;height:2.25rem;margin-left:-.5rem;margin-right:.25rem}
avx-footer #footer .content:has(.social-link) .social-link .social-icon{height:1.125rem;width:1.125rem}
avx-footer #footer .social-label{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:768px){
  avx-footer #footer .top{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem;row-gap:2rem}
  avx-footer #footer .top .left{grid-column:1 / -1}
  avx-footer #footer .top .center .line{grid-row:2 / span 2}
  avx-footer #footer .top .center .line:last-child{grid-row:2}
  avx-footer #footer .top .right{grid-column:3;grid-row:3}
}
@media (min-width:1024px){
  avx-footer #footer .top{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));column-gap:3rem;row-gap:.875rem}
  avx-footer #footer .top .left{grid-column:1;grid-row:1 / span 2;max-width:26rem}
  avx-footer #footer .top .center .line{grid-row:1 / span 2}
  avx-footer #footer .top .center .line:last-child{grid-row:1}
  avx-footer #footer .top .right{grid-column:4;grid-row:2}
}
/* the bottom bar: continuous Oxford Blue under an Ecru hairline, one compact row (stacked on a phone); the copyright
   at reduced emphasis in Grey Mid (12.04:1), "Legal" Ecru, the two quick-view triggers cream with Ecru hover */
avx-footer #footer .bottom{padding-top:1.25rem;padding-bottom:0;gap:1rem;flex-wrap:wrap}
avx-footer #footer .bottom .left .copyrights{color:var(--color-grey-mid)}
avx-footer #footer .bottom .left a{width:2.25rem}
avx-footer #footer .bottom .right .line .documents{flex-direction:row;flex-wrap:wrap;gap:.25rem 1rem}
@media (max-width:767px){
  avx-footer #footer{padding:2.5rem 1.5rem 1.5rem}
  avx-footer #footer .bottom{flex-direction:column;align-items:flex-start}
  avx-footer #footer .bottom .right{justify-content:flex-start}
  avx-footer #footer .bottom .right .line .legal{width:auto;text-align:left}
}

/* Services cards sit side by side in full rows (Founder, 2026-09-25: "the cards should be beside each other") --
   the old flex-wrap with a 24rem basis left Air Charter's four cards as 3 + 1. The column count follows the number of
   cards: 4 -> four across from 1440px (two by two below, where four columns grow tall and narrow), 3 -> three, 6 -> three by two; one column on a phone. Equal heights. */
services-page .restrainer .parts{display:grid;grid-template-columns:1fr;gap:2rem;justify-content:stretch;align-items:stretch}
services-page .restrainer .parts .floating-panel{flex:none;width:100%;height:100%}
@media (min-width:768px){
  services-page .restrainer .parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  services-page .restrainer .parts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  services-page .restrainer .parts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px) and (max-width:1439.98px){
  services-page .restrainer .parts:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1440px){
  services-page .restrainer .parts:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* 7. "Who we are" turns like pages (Founder, 2026-09-25: "make each section in about scrolled as a page section" ->
   "full-screen parts that snap: The Story, Mission and Vision each fill the screen; one scroll moves to the next part").
   Each part is one panel exactly the height left under the docked band (--band, the band's 100px at every width),
   text on one side and one photo on the other, the photo side alternating. The slideshow and its controls are gone:
   each photo now belongs to one part (Story -- the FlyEgypt charter, Mission -- AMC refuelling, Vision -- the M1 Group
   jet; the group-boarding photo is no longer shown). min-height, never height: a part whose text needs more room
   grows rather than clips (a phone, a short landscape window); the photo is absolutely placed so it never adds height.
   Snapping is `proximity`, not `mandatory`: mandatory would forbid resting anywhere but a snap point, so the hero, the
   long services content and the footer could not be scrolled freely, and a part taller than the screen would fight the
   reader. Each part is exactly one snapport tall, so proximity catches every part once a scroll comes near it.
   #services is a fourth snap point, so leaving Vision lands on "What we offer" instead of being pulled back to Vision.
   The smooth-scroll engine in site.js switches snapping off while it animates (.no-snap) -- a snap container would
   otherwise re-snap every frame it writes. Reduced motion: no snapping at all, and the engine jumps instead of gliding. */
:root{--band:100px}
#composite:has(#introduction .about-part){scroll-snap-type:y proximity}
#composite.no-snap{scroll-snap-type:none!important}
@media (prefers-reduced-motion:reduce){#composite:has(#introduction .about-part){scroll-snap-type:none}}
home-page{padding-top:0}
home-page #introduction{display:block;margin-left:-2.5rem;margin-right:-2.5rem}
home-page #introduction .about-part{box-sizing:border-box;min-height:calc(100svh - var(--band));scroll-snap-align:start;
  scroll-margin-top:var(--band);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  column-gap:clamp(2.5rem,5vw,6rem);padding:2.5rem max(2.5rem,calc((100% - 84rem) / 2));background:var(--color-bg-primary)}
home-page #services{scroll-snap-align:start;scroll-margin-top:var(--band)}
/* the photo: the whole height of the part, rounded as the slideshow was */
home-page #introduction .about-photo{position:relative;align-self:stretch;min-height:16rem;margin:0;overflow:hidden;border-radius:2rem;
  background:var(--color-grey-light)}
home-page #introduction .about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
home-page #introduction .about-part:nth-child(odd) .about-photo{order:2}
/* the text: the part's number above a Burgundy hairline (Ecru on cream would be 1.66:1), then the part */
home-page #introduction .about-text{display:flex;flex-direction:column;gap:1.75rem;max-width:40rem;line-height:2rem}
home-page #introduction .about-part:nth-child(even) .about-text{justify-self:end}
home-page #introduction .about-text:before{content:"0" counter(about-part) " / 03";content:"0" counter(about-part) " / 03" / "";
  counter-increment:about-part;display:block;width:max-content;padding-bottom:.75rem;border-bottom:1px solid var(--color-primary);
  color:var(--color-primary);font-size:.75rem;line-height:1rem;font-weight:600;letter-spacing:.3rem}
home-page #introduction{counter-reset:about-part}
home-page #introduction .headline{display:flex;flex-direction:column;gap:1rem}
home-page #introduction .headline .title{font-size:2.25rem;line-height:2.5rem;font-weight:700;text-transform:uppercase}
home-page #introduction .headline .quote{font-size:.75rem;line-height:1rem;font-weight:300;text-transform:uppercase;letter-spacing:.3rem}
home-page #introduction .section{display:flex;flex-direction:column;gap:1.5rem}
home-page #introduction .section .title{font-size:2.25rem;line-height:2.5rem;font-weight:700;text-transform:uppercase;color:var(--color-primary)}
@media (min-width:1280px){home-page #introduction .article,home-page #introduction .section .text{font-size:1.0625rem;line-height:2.1rem}}
/* a phone: the parts stack, photo above text, each at least one screen tall */
@media (max-width:767.98px){
  home-page #introduction .about-part{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;row-gap:2rem;
    padding:2rem 2.5rem}
  home-page #introduction .about-part:nth-child(odd) .about-photo{order:0}
  home-page #introduction .about-photo{align-self:auto;min-height:0;height:clamp(12rem,32svh,20rem);border-radius:1.5rem}
  home-page #introduction .about-part:nth-child(even) .about-text{justify-self:auto}
  home-page #introduction .about-text{gap:1.25rem;max-width:none}
  home-page #introduction .headline .title,home-page #introduction .section .title{font-size:1.875rem;line-height:2.25rem}
}

/* Services covers on a phone (Founder, 2026-09-25, iPhone screenshots): the section title ran edge to edge at the full
   heading size, the letter-spaced subtitle sat on the screen edge and wrapped badly, and justified text left rivers.
   Side padding everywhere, a title that scales with the width, a centred subtitle with tighter tracking, left-aligned
   intro text below 768px. */
services-page .cover .content{box-sizing:border-box;padding:2.5rem 1.25rem 0;text-align:center}
services-page .cover .content .title{font-size:clamp(2rem,8.5vw,4.5rem);line-height:1.05;overflow-wrap:anywhere;max-width:100%}
services-page .cover .content .subtitle{max-width:40rem;text-align:center;line-height:1.6}
@media (max-width:767.98px){
  services-page .cover .banner{height:26rem}
  services-page .cover .content{padding-top:2rem}
  services-page .cover .content .subtitle{letter-spacing:.2em;font-size:max(12px,.8rem);margin-bottom:1.5rem;padding:0 .5rem}
  services-page .restrainer .description-panel{padding-left:1.25rem;padding-right:1.25rem;text-align:left}
  services-page .restrainer .description-panel .description{font-size:.95rem;line-height:1.6}
}

/* Services covers dark like the hero (Founder, 2026-09-25): the same Oxford Blue gradient over the photo (replacing
   the fade to cream), cream title with the key word in Ecru, cream subtitle, the Ecru button as in the menu band, and
   an Ecru hairline where the cover meets the cream page. Worst case (gradient at .66 over a white pixel): cream 6.3:1,
   Ecru 3.9:1 (titles are large text). */
services-page .cover{background:var(--color-band);border-bottom:1px solid var(--color-accent-1)}
services-page .cover .banner:after{background:linear-gradient(to bottom,rgb(5 13 35 / .82) 0%,rgb(5 13 35 / .66) 50%,rgb(5 13 35 / .78) 100%)}
services-page .cover .content .title{color:var(--color-text-inverse)}
services-page .cover .content .title .text-primary{color:var(--color-accent-1)}
services-page .cover .content .subtitle{color:var(--color-text-inverse)}
services-page .cover .content .cta-button{background-color:var(--color-accent-1);color:var(--color-secondary)}
services-page .cover .content .cta-button:hover,services-page .cover .content .cta-button:active{background-color:var(--color-cream);color:var(--color-secondary)}
services-page .cover .content .cta-button a:focus-visible{outline:2px solid var(--color-cream);outline-offset:4px;border-radius:9999px}

/* The first dark cover meets the menu band (Founder, 2026-09-25: "the white gap below the hero?"): the page's 108px top
   padding was a cream band between the navy band and the Air Charter cover. Section spacing below is unchanged. */
services-page{padding-top:0}

/* 8. Navigation (Founder, 2026-09-25: all four chosen): the Services dropdown, the section bar on /services/, the
   current page in the menu, the phones-only action bar, and a skip link. Every colour is the band's own pairing:
   cream on Oxford Blue 18.88:1, Ecru on Oxford Blue 11.66:1, Oxford Blue on Ecru 11.66:1 (README, Colour). No
   transitions: a panel or a chip paints at once, in every renderer. */
:root{--section-bar:56px;--action-bar:65px}

/* the skip link: off-screen until focused, then a navy pill with an Ecru edge at the top left */
.skip-link{position:fixed;top:12px;left:16px;z-index:1000;padding:10px 18px;border:1px solid var(--color-accent-1);border-radius:9999px;
  background:var(--color-band);color:var(--color-text-inverse);font-size:14px;line-height:20px;font-weight:600;transform:translateY(-300%)}
.skip-link:focus{transform:none;outline:2px solid var(--color-accent-1);outline-offset:3px}
#mainContent{scroll-margin-top:var(--band)}
#mainContent:focus{outline:none}

/* the current page in the menu: an Ecru underline under the cream label. Services on /services/ (build time), About while
   the About panels are under the band, Contact while the footer is in view (site.js); only one at a time. */
avx-header #header #headerContent #headerNav a[data-nav][aria-current],avx-header #header #headerContent #headerNav a[data-nav].is-here{
  text-decoration:underline;text-decoration-color:var(--color-accent-1);text-decoration-thickness:2px;text-underline-offset:8px}
avx-header #header #headerContent #headerNav.has-here a[data-nav][aria-current=page]:not(.is-here){text-decoration:none}

/* the Services dropdown. Desktop (1024px+): the Services link, a chevron disclosure button beside it, and a small Oxford
   Blue panel hanging from the band's Ecru rule -- cream items, Ecru on hover and focus with an Ecru bar at the left.
   The panel opens only through site.js ([data-open]); without script the Services link still goes to /services/. */
avx-header #header #headerContent #headerNav .nav-sub-toggle{display:none}
@media (min-width:1024px){
  avx-header #header #headerContent #headerNav .nav-has-sub{position:relative;display:flex;align-items:center;pointer-events:auto}
  avx-header #header #headerContent #headerNav .nav-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
    margin-left:-4px;padding:0;border:0;border-radius:.25rem;background:none;color:var(--color-text-inverse);cursor:pointer}
  avx-header #header #headerContent #headerNav .nav-sub-toggle svg{width:14px;height:14px}
  avx-header #header #headerContent #headerNav .nav-sub-toggle:hover,avx-header #header #headerContent #headerNav .nav-has-sub[data-open] .nav-sub-toggle{color:var(--color-accent-1)}
  avx-header #header #headerContent #headerNav .nav-has-sub[data-open] .nav-sub-toggle svg{transform:rotate(180deg)}
  avx-header #header #headerContent #headerNav ul.nav-sub{position:absolute;top:calc(50% + var(--band) / 2);left:-15px;z-index:5;display:flex;
    flex-direction:column;gap:0;min-width:240px;margin:0;padding:8px 0;background:var(--color-band);border:1px solid var(--color-accent-1);border-top:0;
    border-radius:0 0 1rem 1rem;box-shadow:0 18px 40px rgb(5 13 35 / .35);visibility:hidden;pointer-events:auto}
  /* the item sits centred in the band, so the panel's top edge is the band's lower edge, under its Ecru rule; a bridge
     over the gap between the 28px item and the panel lets the pointer cross it */
  avx-header #header #headerContent #headerNav ul.nav-sub:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--band) / 2 - 14px)}
  avx-header #header #headerContent #headerNav .nav-has-sub[data-open] ul.nav-sub{visibility:visible}
  avx-header #header #headerContent #headerNav ul.nav-sub a{display:block;padding:10px 20px;font-size:14px;line-height:20px;white-space:nowrap;box-shadow:inset 2px 0 0 transparent}
  avx-header #header #headerContent #headerNav ul.nav-sub a:hover,avx-header #header #headerContent #headerNav ul.nav-sub a:focus-visible{color:var(--color-accent-1);box-shadow:inset 2px 0 0 var(--color-accent-1)}
  avx-header #header #headerContent #headerNav ul.nav-sub a:focus-visible{outline:none;background:rgb(255 252 249 / .06)}
}
/* the burger menu (below 1024px): the four sections always shown, indented under Services behind an Ecru rule */
@media (max-width:1023px){
  avx-header #header #headerContent #headerNav ul.nav-sub{display:flex;flex-direction:column;gap:2px;margin:6px 0 0 10px;padding:0 0 0 12px;
    border-left:1px solid var(--color-accent-1)}
  avx-header #header #headerContent #headerNav ul.nav-sub a{display:block;padding:6px 8px;font-size:.95em;opacity:1}
}

/* the section bar on /services/: sticky under the band, Oxford Blue with an Ecru rule beneath it, so the dark covers run
   on from it with no cream between. Items are cream chips (Ecru on hover); the section in view is an Ecru chip with an
   Oxford Blue label. A jump lands the cover right under band + bar: scroll-margin-top and the engine's inertia-offset-y
   (156 in services.html = --band + --section-bar; the tests hold the sum). On a phone the strip scrolls sideways and
   site.js keeps the current chip in view. <main> is a clip, not a scroll container, so the bar can stick. */
#mainContent:has(> .section-bar){display:block;overflow:visible;overflow:clip}
services-page section[inertia-offset-y]{scroll-margin-top:calc(var(--band) + var(--section-bar))}
/* the covers sit at fractional offsets (rem-sized content above them), so a landed cover can start a fraction of a pixel
   under the bar: a 2px Oxford Blue extension above each cover closes that sliver (it reads as the cover itself) */
services-page>section>.cover{box-shadow:0 -2px 0 var(--color-band)}
.section-bar{position:sticky;top:var(--band);z-index:90;box-sizing:border-box;height:var(--section-bar);background:var(--color-band);
  border-bottom:1px solid var(--color-accent-1)}
.section-bar ul{display:flex;align-items:center;gap:8px;height:100%;margin:0;padding:0 16px;list-style:none;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.section-bar ul::-webkit-scrollbar{display:none}
.section-bar li{flex:none}
.section-bar li:first-child{margin-left:auto}
.section-bar li:last-child{margin-right:auto}
.section-bar a{display:inline-flex;align-items:center;height:34px;padding:0 16px;border:1px solid rgb(255 252 249 / .4);border-radius:9999px;
  color:var(--color-text-inverse);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap}
.section-bar a:hover{color:var(--color-accent-1);border-color:var(--color-accent-1)}
.section-bar a[aria-current]{background:var(--color-accent-1);border-color:var(--color-accent-1);color:var(--color-secondary)}
.section-bar a:focus-visible{outline:2px solid var(--color-cream);outline-offset:2px}

/* the action bar, phones only (below 768px): pinned to the bottom above the home indicator, Oxford Blue under an Ecru
   rule; Call Ops 24/7 is the Ecru button (Oxford Blue label, 11.66:1), Request Quote an outlined cream one (18.88:1).
   Hidden while the hero fills the screen (it would sit on the hero's scroll chevron; the header CTA is there anyway),
   absent from /request/ (build.py). The footer and the scroll-into-view padding grow by its height, so it never
   covers the footer's last line or a focused field. */
.action-bar{display:none}
@media (max-width:767.98px){
  .action-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;gap:10px;box-sizing:border-box;min-height:var(--action-bar);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--color-band);border-top:1px solid var(--color-accent-1)}
  .action-bar a{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:9999px;
    font-size:15px;line-height:20px;font-weight:600;white-space:nowrap}
  .action-bar .action-call{background:var(--color-accent-1);color:var(--color-secondary);border:1px solid var(--color-accent-1)}
  .action-bar .action-quote{background:transparent;color:var(--color-text-inverse);border:1px solid var(--color-text-inverse)}
  .action-bar .action-call:active{background:var(--color-cream)}
  .action-bar .action-quote:active{color:var(--color-accent-1);border-color:var(--color-accent-1)}
  .action-bar a:focus-visible{outline:2px solid var(--color-cream);outline-offset:3px}
  .action-bar .action-icon{width:18px;height:18px;flex:none}
  .hero-in-view .action-bar{visibility:hidden}
  body:has(.action-bar) avx-footer #footer{padding-bottom:calc(1.5rem + var(--action-bar) + env(safe-area-inset-bottom))}
  body:has(.action-bar) #composite{scroll-padding-bottom:calc(var(--action-bar) + env(safe-area-inset-bottom))}
}
@media print{.action-bar,.section-bar,.skip-link{display:none!important}}