/* Shared styles for all TBF v2 pages. Keep page-specific rules inline. */

/* Base / reset */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
    --navy:#243746; --navy-l:#2e4658; --blue:#009ADE; --blue-d:#0086c2; --mag:#D6006B;
    /* lighter blue tint for eyebrow text on the navy band – passes AA 4.5:1 where --blue does not */
    --blue-on-navy:#7fd0f4;
    /* --blue-on-white darkened from #007bb0 (passed AA on white at 4.71:1 but only 4.41:1 on bg-cool) so small
       accent text – eyebrows, quote context, quote toggles – passes 4.5:1 on both white (5.04:1) and bg-cool (4.72:1).
       Text only; large headings, buttons and graphic accents keep the true --blue (3.15:1). */
    --blue-on-white:#0076a9;
    /* --slate-l darkened from #8294a0 (failed AA at 3.14:1 on white, 2.94:1 on bg-cool) so small
       body text – testimonials, breadcrumbs, captions – passes 4.5:1 on both white and bg-cool. */
    --ink:#243746; --slate:#5d6e7a; --slate-l:#5f7180; --line:#e6edf1;
    --bg:#ffffff; --bg-cool:#f4f8fb; --r:14px;
    --shadow:0 10px 34px rgba(36,55,70,.08); --shadow-s:0 4px 14px rgba(36,55,70,.06);
  }
html { scroll-behavior:smooth; }
/* Fixed nav is 70px – offset in-page anchor targets so section headings clear it (single shared rule, no per-section magic). */
.sec, .hero2 { scroll-margin-top:88px; }
body { font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.55; }
a { text-decoration:none; color:inherit; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
img { max-width:100%; width:auto; height:auto; display:block; }

/* Skip link – first focusable element on every page; visually hidden until focused, then pinned
   top-left so keyboard users can jump straight past the fixed nav to <main>. Picks up the shared
   :focus-visible blue outline. The main landmark takes focus via the link (tabindex="-1") without
   showing a ring of its own. */
.skip-link { position:absolute; left:8px; top:-60px; z-index:300; background:#fff; color:var(--navy);
    font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
    font-size:15px; padding:10px 18px; border-radius:9px; box-shadow:var(--shadow); transition:top .18s; }
.skip-link:focus { top:8px; }
main:focus { outline:none; }

/* Layout & type */
.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,56px); }
.eyebrow { display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600;
    letter-spacing:1.4px; text-transform:uppercase; color:var(--blue-on-white); margin-bottom:18px; }
.eyebrow::before { content:""; width:26px; height:2px; background:var(--blue-on-white); border-radius:2px; }
.sec-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:-.5px;
    line-height:1.02; font-size:clamp(30px,4.4vw,52px); color:var(--navy); text-transform:uppercase; }

/* Nav */
nav { position:fixed; inset:0 0 auto 0; z-index:100; height:70px; padding:0 clamp(20px,5vw,56px);
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(255,255,255,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); }
.logo { height:52px; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { font-size:14.5px; font-weight:500; color:var(--slate); transition:color .18s; }
.nav-links a:hover { color:var(--navy); }
.nav-cta, .btn { font-family:'Barlow Condensed',sans-serif; letter-spacing:.6px; text-transform:uppercase; }
.nav-cta { font-size:16px; font-weight:600; background:var(--blue); color:#fff; padding:10px 20px; border-radius:9px; transition:.18s; }
.nav-cta:hover { background:var(--blue-d); transform:translateY(-1px); }
.burger { display:none; background:none; border:0; cursor:pointer; }

/* "What we build" dropdown (issue #83) – parent stays a link to /#doors, the caret
   toggle opens the three door pages. Driven by the .open class from site.js. */
.nav-links .has-sub { position:relative; display:flex; align-items:center; gap:2px; }
.sub-toggle { display:inline-flex; align-items:center; justify-content:center; padding:6px 4px;
    background:none; border:0; cursor:pointer; color:var(--slate); line-height:0; transition:color .18s; }
.sub-toggle:hover { color:var(--navy); }
.sub-caret { transition:transform .18s; }
.has-sub.open .sub-caret { transform:rotate(180deg); }
.sub-menu { display:none; position:absolute; top:calc(100% + 12px); left:0; min-width:210px; list-style:none;
    background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; }
/* transparent bridge over the gap so a hovering pointer reaches the menu without closing it */
.sub-menu::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.has-sub.open .sub-menu { display:block; }
.sub-menu a { display:block; padding:10px 14px; border-radius:8px; font-size:14.5px; font-weight:500;
    color:var(--slate); white-space:nowrap; transition:background .15s, color .15s; }
.sub-menu a:hover { background:var(--bg-cool); color:var(--navy); }

/* Buttons */
.btn { font-size:17px; font-weight:600; letter-spacing:.7px; padding:14px 26px; border-radius:10px;
    cursor:pointer; transition:all .18s; display:inline-flex; align-items:center; gap:9px; }
.btn-fill { background:var(--blue); color:#fff; border:1.5px solid var(--blue); }
.btn-fill:hover { background:var(--blue-d); border-color:var(--blue-d); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,154,222,.28); }
.btn-line { background:transparent; color:var(--navy); border:1.5px solid var(--line); }
.btn-line:hover { border-color:var(--navy); transform:translateY(-2px); }
.btn svg { width:15px; height:15px; }

/* Sections */
.sec-cool { background:var(--bg-cool); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* Footer */
footer { background:var(--navy); color:rgba(255,255,255,.72); padding:56px 0 30px; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
footer p { font-size:14px; max-width:300px; }
footer h2 { font-family:'Barlow Condensed',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:#fff; font-size:15px; margin-bottom:16px; }
footer ul { list-style:none; }
footer ul li { margin-bottom:10px; }
footer ul a { font-size:14px; color:rgba(255,255,255,.72); transition:color .15s; }
footer ul a:hover { color:var(--blue); }
.foot-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.foot-bottom a { color:rgba(255,255,255,.72); transition:color .15s; }
.foot-bottom a:hover { color:var(--blue); }

/* Reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{transition:none;opacity:1;transform:none} html{scroll-behavior:auto} }

/* Mobile menu */
.mnav { display:none; position:fixed; top:70px; left:0; right:0; background:#fff; z-index:99;
    border-bottom:1px solid var(--line); box-shadow:0 14px 30px rgba(36,55,70,.10); padding:6px 26px 14px; }
.mnav.open { display:block; }
.mnav ul { list-style:none; }
.mnav a { display:block; padding:13px 2px; font-size:16px; font-weight:500; color:var(--navy); border-bottom:1px solid var(--line); }
.mnav li:last-child a { border-bottom:0; }
/* "What we build" is an accordion row on mobile – the caret expands the three
   doors in place rather than the desktop menu cloning flat (issue #83). */
.mnav .has-sub { display:flex; flex-wrap:wrap; align-items:center; }
.mnav .has-sub > a { flex:1; }
.mnav .sub-toggle { padding:13px 6px; background:none; border:0; cursor:pointer; color:var(--navy); line-height:0; }
.mnav .sub-menu { display:none; flex-basis:100%; list-style:none; }
.mnav .has-sub.open .sub-menu { display:block; }
.mnav .sub-menu a { padding-left:18px; font-size:15px; color:var(--slate); }

/* Toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px); z-index:200;
    background:var(--navy); color:#fff; font-size:13.5px; padding:11px 20px; border-radius:10px;
    box-shadow:0 10px 26px rgba(36,55,70,.28); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Nav collapses to burger on small screens */
@media (max-width:980px){ .nav-links { display:none; } .burger { display:block; } }

/* Testimonial cards – shared component, rendered from window.BRAINS_TESTIMONIALS. All three pages that
   show testimonials (home + the two door pages) now use the rotating rail below (issue #87); the base
   .quotes rule mainly supplies the shared gap the rail reads for its scroll step. */
.quotes { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.qcard { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--shadow-s); display:flex; flex-direction:column; }
.qcard .qm { font-family:'Barlow Condensed',sans-serif; font-size:44px; font-weight:800; color:var(--blue); line-height:.6; }
.qcard p { font-size:14px; color:var(--slate-l); font-style:italic; line-height:1.55; margin-top:10px; }
.qcard .who { font-size:12.5px; color:var(--slate-l); margin-top:auto; padding-top:14px; font-weight:500; }
.qcard .q-context { display:inline-block; align-self:flex-start; margin-top:12px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:11px; color:var(--blue-on-white); }
.qcard .q-full p { margin-top:10px; }
.qcard .q-toggle { align-self:flex-start; margin-top:12px; padding:0; background:none; border:0; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:.5px; text-transform:uppercase; font-size:13px; color:var(--blue-on-white); }
.qcard .q-toggle:hover { text-decoration:underline; }
.qcard .q-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
@media (max-width:620px){ .quotes { grid-template-columns:1fr; } }

/* Testimonial rotator (issues #71, #87) – the rail every testimonial page rotates through: home shows
   every published entry, the two door pages their door's entries. Scoped to .qrotator / .quotes--rail
   so the base .quotes card styling is shared while only the rail changes the layout to a scroller. */
.qrotator { position:relative; }
.quotes--rail { display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; padding:4px 2px 14px; scrollbar-width:thin; }
.quotes--rail .qcard { flex:0 0 340px; max-width:86%; scroll-snap-align:start; }
.qrotator-controls { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:22px; }
.qrotator-btn { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-s); transition:transform .18s, box-shadow .18s, border-color .18s, color .18s; }
.qrotator-btn:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow); }
.qrotator-btn:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.qrotator-btn svg { width:18px; height:18px; }
@media (prefers-reduced-motion:reduce){ .quotes--rail { scroll-behavior:auto; } }

/* "Also consider" cross-links – shared wayfinding row on the three door pages (issue #84).
   Quiet by design: a small heading and two links to the other doors, not a second sales pitch. */
.also-sec { padding:clamp(40px,5vh,60px) 0; }
.also-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; font-size:clamp(18px,2vw,22px); color:var(--navy); margin-bottom:18px; }
.also-links { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.also-link { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; box-shadow:var(--shadow-s);
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.also-link:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--blue); }
.also-name { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.2px; font-size:19px; color:var(--navy); display:inline-flex; align-items:center; gap:8px; }
.also-name svg { width:15px; height:15px; color:var(--blue); flex:none; transition:transform .18s; }
.also-link:hover .also-name svg { transform:translateX(4px); }
.also-ctx { font-size:14px; color:var(--slate); }
@media (max-width:620px){ .also-links { grid-template-columns:1fr; } }