/* ============================================================================
   sections.css — CSS for the ported non-hero sections.
   The brief says rebuild sections in PIXY components, so almost nothing from
   the old stylesheets comes across. The exception is the ENGINE ROOM terminal
   tile: the brief explicitly says to copy the .er3-term fragment, so its rules
   are carried over VERBATIM below (bto-os-home.css lines 436-484), together
   with the .er3-grid/.er3-tile rules the fragment sits inside.
   Also included: the .fq-* accordion rules, because §7b (ported into
   bto-js/sections.js) drives that exact markup and its 0fr->1fr animation.
   ========================================================================== */

/* --- bto-os-home.css 436-484 : ENGINE ROOM grid + terminal tile ---------- */
.er3-grid { display: grid; margin: 0 auto;
    grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr);
    grid-template-areas: "ipad mac mac iph" "ipad card term fly";
    gap: 14px; aspect-ratio: 2.31 / 1;
    max-width: min(1690px, calc((100vh - 350px) * 2.31)); }
.er3-tile { position: relative; display: block; overflow: hidden; border-radius: 10px;
    border: 1px solid rgba(33, 33, 34, .14); min-height: 0;
    transition: border-color .25s, box-shadow .25s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.er3-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er3-tile:hover { border-color: rgba(241, 184, 75, .8);
    box-shadow: 0 18px 50px rgba(26, 23, 18, .25); transform: translateY(-4px); }
.er3-tag { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 99px;
    font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
    color: #f1b84b; background: rgba(6, 14, 10, .78); border: 1px solid rgba(241, 184, 75, .35);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* NEW 2026-07-27 · documentary tile (grid-area:term) only.
   Its source is a 9:16 poster dropped into a wide tile, so the default
   centre cover-crop takes the top off a standing subject's turban. Pulling the
   focal point up keeps his head in frame at both the desktop cell (~1.15:1) and
   the much wider 860px cell (~2.5:1). Scoped to this one tile on purpose —
   the shared `.er3-tile img` rule above is untouched. */
.er3-tile--doc img { object-position: center 30%; }

/* RETIRED 2026-07-27 — the .er3-term markup (BTO ENGINE bar, clock, "6 lanes
   running", lane links, the human line) was removed from the Engine Room when
   all six tiles became work categories; grid-area:term is now a photo tile.
   These rules are KEPT INTENTIONALLY, unchanged and currently unused, so the
   terminal can be re-homed elsewhere on the site by pasting the markup back.
   Do not delete without checking with Ash. The clock driver (§7 in
   bto-js/sections.js) already guards on a null #erClock and no-ops. */
.er3-term { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; min-height: 0;
    border: 1px solid rgba(241, 184, 75, .45); background: rgba(6, 14, 10, .95);
    background-image: linear-gradient(rgba(51, 214, 132, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(51, 214, 132, .04) 1px, transparent 1px);
    background-size: 100% 26px, 26px 100%;
    box-shadow: 0 0 40px rgba(241, 184, 75, .12); }
.er3-tbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 14px;
    font: 500 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: #f1b84b;
    border-bottom: 1px solid rgba(241, 184, 75, .22); background: rgba(51, 214, 132, .05); }
.er3-dots { display: inline-flex; gap: 5px; }
.er3-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(241, 184, 75, .32); }
.er3-tbody { flex: 1; display: flex; flex-direction: column; padding: 12px 16px 11px; min-height: 0; }
.er3-st { display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 ui-monospace, Menlo, monospace;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .55); }
.er3-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 8px rgba(51, 214, 132, .8); animation: erPulse 2.2s infinite; }
@keyframes erPulse { 50% { opacity: .3; } }
.er3-lanes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: center;
    gap: 4px 12px; margin: 8px 0 6px; }
.er3-lanes a { font: 500 11.5px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .06em;
    color: #f1b84b; text-decoration: none; }
.er3-lanes a::before { content: "> "; color: rgba(241, 184, 75, .45); }
.er3-lanes a:hover { color: #fff; }
.er3-human { font: 500 9.5px/1.4 ui-monospace, Menlo, monospace; color: rgba(244, 241, 234, .4); }
@media (max-width: 860px) {
    .er3-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; grid-template-rows: none;
        grid-template-areas: "mac mac" "ipad iph" "ipad card" "term term" "fly fly";
        aspect-ratio: auto; max-width: none; gap: 10px; }
    .er3-term { grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) {
    .er3-tile { transition: none; }
    .er3-st::before { animation: none; }
}

/* --- bto-os-home.css 487-506 : FAQ accordion (drives §7b in sections.js) -- */
.fq-sec { background: var(--canvas); padding: clamp(52px, 7vh, 96px) 0; }
.fq-head { font-weight: 800; font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.03em; margin-top: 14px; }
.fq-head em.s { color: var(--dc-accent, #f1b84b); }
.fq-list { margin-top: 38px; max-width: 900px; border-top: 1px solid var(--hair); }
.fq-item { border-bottom: 1px solid var(--hair); }
.fq-q { width: 100%; display: flex; align-items: baseline; gap: 18px; text-align: left;
    background: none; border: 0; cursor: pointer; color: inherit;
    padding: 20px 2px; font-weight: 700; font-size: clamp(16px, 1.6vw, 19px); letter-spacing: -.01em; }
.fq-n { flex: 0 0 26px; font: 600 11px/1 ui-monospace, Menlo, monospace;
    letter-spacing: .08em; color: var(--green-tx); }
.fq-pl { margin-left: auto; align-self: center; width: 26px; height: 26px;
    display: grid; place-items: center; font-weight: 400; font-size: 22px; line-height: 1;
    color: var(--mute); transition: transform .3s, color .3s; }
.fq-q:hover .fq-pl { color: var(--dc-accent, #f1b84b); }
.fq-item.open .fq-pl { transform: rotate(45deg); color: var(--dc-accent, #f1b84b); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2, .7, .2, 1); }
.fq-item.open .fq-a { grid-template-rows: 1fr; }
.fq-a > div { overflow: hidden; }
.fq-a p { padding: 0 20px 22px 44px; color: var(--mute); font-size: 15px; line-height: 1.7; max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .fq-a, .fq-pl { transition: none; } }

/* --- bto-os-home.css 426-429 + 530-534 : ENGINE ROOM section shell ------
   .wrap and .center were RENAMED for the transplant: both are generic,
   unprefixed class names and are collision bait on a template page.
   .wrap -> Pixy's own .container ; .center -> .er-center               */
.er-sec { background: #0a0f0c; color: var(--on-dark); padding: clamp(52px, 7vh, 96px) 0; }
.er-sec .er-center { text-align: center; }
.er-head { font-weight: 800; font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -.03em; color: #fff; margin-top: 14px; }
.er-head em.s { color: #f1b84b; }
.er-sec { position: relative; overflow: hidden; }
.er-sec::before { content: ""; position: absolute; left: 50%; top: 58%; width: 900px; height: 520px;
    transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(241, 184, 75, .16) 0%, transparent 70%); }
.er-sec .container { position: relative; }

/* ==========================================================================
   NEW FOR THIS REBUILD (not ported) — the pieces the Pixy template lacks.
   Every rule below is written for the transplant and is flagged as an
   adaptation in _notes/00_decisions.md.
   ========================================================================== */

/* 1 · True 16:9 and 9:16 media ratios.
   Pixy ships .mil-long 40% (5:2), .mil-land 60% (5:3), .mil-square 100%,
   .mil-port 150% (2:3) — none of which is 16:9 or 9:16. THE WORK needs both. */
.mil-project-img.mil-9-16 { padding-bottom: 177.7778%; }
.mil-project-img.mil-16-9 { padding-bottom: 56.25%; }

/* 2 · Pixy sizes <img> inside its media frames but NOT <video> — the only
   styled video in the whole template is .mil-half-container's. A <video>
   dropped into .mil-project-img would be unsized and blow out the layout. */
.mil-project-img video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* 3 · Swiper 8 renamed .swiper-container -> .swiper, so the template's CSS has
   no .swiper-container rule at all; the rails only LOOK contained because the
   page wrapper clipped the spill. We changed that wrapper to overflow:clip for
   the hero, so contain the rails explicitly. */
.swiper-container { overflow: hidden; }

/* 4 · THE WORK section shell (Pixy-native type, our content). */
.bto-work-slider { width: 100%; }
.bto-work-slider .swiper-slide { height: auto; }
.bto-work-cap { padding: 18px 2px 0; }
.bto-work-cap .tag {
  display: inline-block; margin-bottom: 8px;
  font: 600 11px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #f1b84b;
}
.bto-work-cap h4 { font-size: 17px; line-height: 1.3; margin: 0; }
.bto-work-cap p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; opacity: .62; }
.bto-work-rights { margin-top: 40px; font-size: 12px; opacity: .45; }
.bto-work-slider .mil-project-img .drop {
  position: absolute; inset: auto 0 0 0; padding: 12px;
  text-align: center; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; background: rgba(0,0,0,.55);
}

/* 5 · NEW 2026-07-27 · anchor targets for the six Engine Room category tiles.
   Zero-height and non-painting, so they add nothing to the layout; they exist
   only so #work-ads / #work-music-video / #work-event / #work-social /
   #work-grade / #work-documentary are real, resolvable scroll targets.
   scroll-margin-top clears the fixed .mil-top-panel-2 — measured 120px once
   .mil-scroll lands (any downward scroll) and 100px at <=768px, per
   style-friendly.css:2677/2805; the extra ~16px is breathing room so the
   section head isn't flush against the bar. */
.bto-work-anchor {
  display: block; height: 0; width: 0;
  overflow: hidden; pointer-events: none;
  scroll-margin-top: 140px;
}
@media (max-width: 768px) {
  .bto-work-anchor { scroll-margin-top: 116px; }
}

/* 5 · DARK-SKIN RECONCILIATION.
   home-4 loads style-stylish.css (dark). Our FAQ was designed for the live
   site's bright-white canvas, so `.fq-sec{background:var(--canvas)}` (cream)
   would punch a light band through the dark page. Neutralised here and the
   accordion's hairlines/text re-tinted for dark. The ENGINE ROOM needs no
   such treatment — it was already a dark panel (#0a0f0c). */
.fq-sec { background: transparent; color: inherit; }
.fq-head { color: inherit; }
.fq-list { border-top-color: rgba(210,210,208,.2); }
.fq-item { border-bottom-color: rgba(210,210,208,.2); }
.fq-q { color: inherit; background: none; }
.fq-a p { color: rgba(210,210,208,.62); }
.fq-n { color: rgba(210,210,208,.45); }

/* 6 · Header brand lockup + CTA (Pixy's logo slot is an icon+word mark;
   ours is a two-line name/tagline, and its CTA slot holds an icon button
   where we need a text button). */
.mil-top-panel-2 .mil-logo { width: auto; height: auto; }
.bto-brand { display: flex; flex-direction: column; line-height: 1.1; }
.bto-brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.bto-brand-tag {
  font-size: 9px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; opacity: .55; margin-top: 3px;
}
.bto-tp-cta { height: 50px; padding: 0 26px; font-size: 11px; white-space: nowrap; }
@media (max-width: 992px) { .bto-tp-cta { display: none; } }

/* CTA row — .mil-button-pad has no gap in the template */
.bto-cta-row { display: inline-flex; flex-wrap: wrap; gap: 20px; }

/* footer detail columns */
.bto-footer-cols { gap: 40px; flex-wrap: wrap; }
.bto-footer-cols > div { min-width: 180px; }
.bto-footer-cols p { margin: 0 0 6px; }

/* 7 · Screen-reader-only heading for the EVERYTHING panel.
   The billboard headline "EVERYTHING YOUR BRAND NEEDS." is baked into the JPEG
   (see _notes/00_decisions.md D6), so the live site carries an invisible <h2>
   to keep the document outline and SEO intact. Pixy has NO visually-hidden
   utility of its own — I first reached for `.mil-visually-hidden`, which does
   not exist, and the heading rendered on the page. This is the real rule. */
.bb-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}