/* ---- pitot (Pitot — Pilot supply & flight school shop 186) ------------------
   THE STRUCTURAL MOVE: ONE BLEED, AND IT SITS BETWEEN THE TWO CATALOGUE BLOCKS.
   The bar goes transparent and rides over a full-viewport three-slide stage, so
   the first screen is uninterrupted photograph rather than a painted strip with
   a picture under it. Everything after that drops into the 1080px container and
   STAYS there — strip, split prose, showcase — until the apron banner throws the
   container away, and then the page comes straight back inside it for the small
   consumables grid, the closing note and the enquiry band. The rhythm is
   contained · contained · contained · BLEED · contained, which is the opposite of
   the usual banner-near-the-top shape.
   Colour: cool bone ground with sealed concrete for the one alternating tray,
   graphite ink instead of pure black so the photographs stay the darkest thing
   on the page, and windsock orange in exactly three places — the hero slab, the
   banner slab and the price ticks. Category labels are pulled off the brand
   colour to grey on purpose, or the accent stops meaning anything, and the
   submit on the closing band goes bone rather than orange so it does not read as
   a fourth price.
   Only the SECOND prose block carries .sc-richtext — the split one renders as
   .sc-about-split — so the centred closing note is reached by plain class and
   nothing here needs an element-type selector. */
body.t-pitot {
  background: #f1f2f0;
  color: #2e3237;
  --pt-orange: #e8541f;
  --pt-concrete: #dfe1dc;
  --radius: 0;
  --shadow: none;
  --header-bg: #f1f2f0;
  --surface: #ffffff;
  --surface-2: #e5e6e2;
  --line: #d4d6d1;
  --line-strong: #b6b9b3;
  --heading: #23262a;
  --text: #2e3237;
  --muted: #6b7075;
}
body.t-pitot .sf-head, body.t-pitot .sf-header,
body.t-pitot .sf-foot, body.t-pitot .sf-footer, body.t-pitot .sf-cats {
  background: #f1f2f0; border-color: #d4d6d1;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* THE MOVE, part one — the bar floats on the photograph instead of standing on
   its own strip, so the stage runs edge to edge UNDER it. Scoped with :has,
   because the cart, search and product pages have no stage to float over and
   need the ordinary solid bar back. The brand name keeps the hard-left seat the
   header's own space-between gives it; nothing here moves or centres it. */
body.t-pitot:has(.sc-hero) .sf-header { position: absolute; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-pitot:has(.sc-hero) .sf-name, body.t-pitot:has(.sc-hero) .sf-navlink,
body.t-pitot:has(.sc-hero) .sf-cart, body.t-pitot:has(.sc-hero) .theme-toggle { color: #f4f5f2; }
body.t-pitot .btn.brand { background: var(--pt-orange); border: 0; color: #ffffff; box-shadow: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: 11px; padding: 16px 34px; }

/* the stage: three slides, the whole first screen, one column dead centre */
body.t-pitot .sc-hero { min-height: 100vh; padding: 128px 20px 92px; }
body.t-pitot .sc-hero h1 { font-weight: 800; font-size: clamp(32px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }

/* into the container, and it stays there: four photographic tiles, two words
   under each — image-heavy and text-starved on purpose */
body.t-pitot .sc-strip { padding: 76px 20px 16px; }
body.t-pitot .sc-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.t-pitot .sc-strip-img { aspect-ratio: 4 / 3; border: 0; }
body.t-pitot .sc-strip-label, body.t-pitot .sc-show-cat { margin-top: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; }

/* one narrow column of prose set beside one supporting photograph — the picture
   takes the wider half so the statement stays a column and never a full width */
body.t-pitot .sc-about-split { padding: 80px 20px 6px; gap: 60px; grid-template-columns: 6fr 5fr; }
body.t-pitot .sc-about-media img { aspect-ratio: 4 / 5; }
body.t-pitot .sc-about-copy p, body.t-pitot .sc-richtext p { color: var(--text); font-size: 16px; line-height: 1.92; }

/* THE CENTREPIECE — four across, two rows that fill, and the ratio flipped: the
   photograph is held down so the stacked spec line carries as much height as it
   does. Concrete rules the top of every panel instead of the base checkerboard. */
body.t-pitot .sc-show-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
body.t-pitot .sc-show-item, body.t-pitot .sc-show-item:nth-child(4n + 2),
body.t-pitot .sc-show-item:nth-child(4n + 3) { background: var(--surface); border-top: 3px solid var(--pt-concrete); }
body.t-pitot .sc-show-inner { padding: 30px 22px 34px; min-height: 460px; }
body.t-pitot .sc-show-media img { max-width: 88%; max-height: 168px; }
body.t-pitot .sc-show-price, body.t-pitot .product-card .p { color: var(--pt-orange); font-weight: 700; font-variant-numeric: tabular-nums; }

/* THE MOVE, part two — the only band on the page that leaves the container, and
   it sits BETWEEN the two catalogue blocks rather than anywhere near the hero */
body.t-pitot .sc-banner { margin: 68px calc(50% - 50vw) 72px; min-height: 58vh; display: flex; align-items: center; justify-content: center; }

/* the consumables: small tiles on a sealed-concrete tray, four across, rows that
   fill. The tray is contained — a second bleed here would cost the banner its
   whole effect. */
body.t-pitot .sc-products { background: var(--pt-concrete); padding: 58px 24px 52px; }
body.t-pitot .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-bottom: 0; }

/* the reference's multi-column footer text, landed as one narrow centred block */
body.t-pitot .sc-richtext { max-width: 640px; padding: 84px 20px 62px; }

/* the page closes on one graphite band. Form tokens are re-pointed inside it so
   the inputs sit on the band instead of on bone, and the submit goes bone so the
   orange stays a price colour. */
body.t-pitot .sc-contact-band { background: #23262a; color: #eceeec; padding: 84px 0 92px; --muted: #9aa0a4; --surface: #2f3338; --line: #454b50; }
body.t-pitot .sc-contact-band .btn.brand { background: #f1f2f0; color: #23262a; }

@media (max-width: 980px) {
  body.t-pitot .sc-hero { min-height: 86vh; }
  body.t-pitot .sc-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-pitot .sc-show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-pitot .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.t-pitot .sc-about-split { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  body.t-pitot .sc-show-grid { grid-template-columns: 1fr; }
}

/* NIGHT — the apron after last light. Bone goes to cold graphite, the concrete
   tray darkens with it so it stays one step off the ground rather than merging
   into it, and the closing band drops BELOW the ground colour so the page still
   ends on a step down instead of a step up. Windsock orange lifts a shade —
   #e8541f was picked against bone and reads slightly heavy on near-black — and
   stays the only colour in the room. */
html[data-theme="dark"] body.t-pitot {
  background: #15171a;
  color: #b5babd;
  --pt-orange: #f2652c;
  --pt-concrete: #212528;
  --header-bg: #15171a;
  --surface: #1b1e21;
  --surface-2: #22262a;
  --line: #2b3034;
  --line-strong: #3c4247;
  --heading: #eef1f0;
  --text: #b5babd;
  --muted: #7e858a;
}
html[data-theme="dark"] body.t-pitot .sf-head, html[data-theme="dark"] body.t-pitot .sf-header,
html[data-theme="dark"] body.t-pitot .sf-foot, html[data-theme="dark"] body.t-pitot .sf-footer,
html[data-theme="dark"] body.t-pitot .sf-cats { background: #15171a; border-color: #2b3034; }
html[data-theme="dark"] body.t-pitot .sc-contact-band { background: #0e1012; color: #dfe3e2; --muted: #8a9196; --surface: #1b1e21; --line: #333940; }