/* =====================================================================
   SummitBridge — layout.css
   Floating capsule nav, drop mega panel, mobile sheet, search, footer,
   containers and the architectural section/rule system.
   ===================================================================== */

/* ---------- containers ---------- */
.wrap { width: min(100% - 2*var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2*var(--gutter), var(--wide)); margin-inline: auto; }
.wrap--read { width: min(100% - 2*var(--gutter), 760px); margin-inline: auto; }

/* ---------- section system (architectural ruled) ---------- */
.block { padding-block: clamp(64px, 9vw, 150px); }
.block--sm { padding-block: clamp(44px, 5vw, 84px); }
.block--flush { padding-block: 0; }
.ruled { border-top: 2px solid var(--charcoal); }
.ruled-light { border-top: 1px solid var(--line); }
.block-head { display:grid; grid-template-columns: auto 1fr; gap: clamp(1rem,4vw,3rem); align-items:start; padding-top: 1.4rem; }
.block-head__no { font-family: var(--ff-display); font-weight:800; font-size: clamp(1rem,2vw,1.3rem); color: var(--red); padding-top:.4rem; }
.block-head__main { max-width: 64ch; }
@media (max-width:620px){ .block-head { grid-template-columns:1fr; } }

.surface-warm { background: var(--warm); }
.surface-bone { background: var(--bone); }
.surface-concrete { background: var(--concrete); }
.surface-char { background: var(--g-char); }
.surface-ember { background: var(--g-ember); }
.surface-blueprint { background-color: var(--charcoal); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; }
.relative { position: relative; } .overflow-hidden { overflow: hidden; }

/* =====================================================================
   FLOATING DOCK NAV
   ===================================================================== */
.dock { position: fixed; top: 0; left:0; right:0; z-index: 140; padding: clamp(12px,1.6vw,20px) var(--gutter); transition: padding var(--t); pointer-events:none; }
.dock__inner { pointer-events:auto; width: min(100%, var(--wide)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; background: rgba(250,246,240,.82); backdrop-filter: saturate(160%) blur(16px); border:1px solid var(--line); border-radius: var(--r-pill); padding: 10px 12px 10px 22px; box-shadow: 0 10px 30px -20px rgba(28,27,26,.5); transition: border-radius var(--t), background var(--t), box-shadow var(--t), max-width var(--t); }
.dock.is-scrolled .dock__inner { background: rgba(28,27,26,.92); border-color: rgba(255,255,255,.12); box-shadow: var(--sh-2); }
.dock.is-scrolled .dock__brand, .dock.is-scrolled .docknav > button, .dock.is-scrolled .docknav > a { color: var(--warm); }
.dock.is-scrolled .dock__brand b { color: var(--yellow); }
.dock.is-scrolled .dock-ic { background: rgba(255,255,255,.1); color: var(--warm); }
.dock__brand { display:inline-flex; align-items:center; gap:.5em; font-family: var(--ff-display); font-weight:800; font-size:1.18rem; letter-spacing:-.03em; color: var(--charcoal); text-transform:uppercase; }
.dock__brand .mk { width:30px; height:30px; flex:none; }
.dock__brand b { color: var(--red); }
.docknav { display:flex; align-items:center; gap: clamp(.3rem,1vw,1.1rem); }
.docknav > a, .docknav > button { position:relative; font-family: var(--ff-display); font-weight:600; font-size:.86rem; letter-spacing:.01em; color: var(--ink); padding:.5em .3em; display:inline-flex; align-items:center; gap:.35em; }
.docknav > a::after { content:""; position:absolute; left:.3em; right:calc(100% - .3em); bottom:.1em; height:2px; background: var(--red); transition: right var(--t-fast); }
.docknav > a:hover::after, .docknav > a[aria-current="page"]::after { right:.3em; }
.docknav .caret { width:13px; transition: transform var(--t-fast); }
.dock.mega-open .docknav .caret { transform: rotate(180deg); }
.dock__tools { display:flex; align-items:center; gap:.4rem; }
.dock-ic { width:42px; height:42px; border-radius: var(--r-pill); display:grid; place-items:center; background: var(--concrete); color: var(--charcoal); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.dock-ic:hover { background: var(--red); color:#fff; transform: translateY(-1px); }
.dock-ic svg { width:19px; }
.dock-burger { display:none; }
@media (max-width:1080px){ .docknav { display:none; } .dock__tools .dock-ic--reading { display:none; } .dock-burger { display:grid; } }

/* ---------- drop mega panel ---------- */
.megapanel { position: fixed; left:0; right:0; top:0; z-index:139; display:flex; justify-content:center; padding: 90px var(--gutter) 0; pointer-events:none; opacity:0; visibility:hidden; transition: opacity var(--t-fast), visibility var(--t-fast); }
.dock.mega-open + .megapanel, .megapanel.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.megapanel__card { width: min(100%, 1040px); background: var(--bone); border:1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: clamp(22px,3vw,38px); transform: translateY(-12px); transition: transform var(--t); display:grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: clamp(18px,2.4vw,34px); }
.megapanel.is-open .megapanel__card { transform:none; }
.megacol h5 { font-family: var(--ff-display); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--red); margin-bottom:.9rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); }
.megacol a { display:flex; align-items:baseline; gap:.5em; padding:.4rem 0; color: var(--ink); font-family: var(--ff-display); font-weight:600; font-size:1rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.megacol a:hover { color: var(--red); padding-left:6px; }
.megacol a small { font-family: var(--ff-body); font-weight:400; font-size:.78rem; color: var(--muted); }
.megafeature { background: var(--g-ember); border-radius: var(--r-md); padding:22px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.megafeature h4 { color:#fff; } .megafeature p { color: rgba(255,255,255,.86); font-size:.88rem; }
@media (max-width:920px){ .megapanel__card { grid-template-columns:1fr 1fr; } .megafeature { grid-column:1 / -1; } }

/* ---------- mobile sheet ---------- */
.sheet { position:fixed; inset:0; z-index:200; visibility:hidden; }
.sheet__scrim { position:absolute; inset:0; background: rgba(28,27,26,.55); opacity:0; transition: opacity var(--t); }
.sheet__panel { position:absolute; inset:14px 14px auto 14px; max-height: calc(100% - 28px); overflow-y:auto; background: var(--g-char); color: var(--warm); border-radius: var(--r-lg); padding: 22px; transform: translateY(-12px) scale(.98); opacity:0; transition: transform var(--t), opacity var(--t); }
.sheet.is-open { visibility:visible; }
.sheet.is-open .sheet__scrim { opacity:1; }
.sheet.is-open .sheet__panel { transform:none; opacity:1; }
.sheet__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.sheet__top .dock__brand { color: var(--warm); }
.sheet nav a { display:flex; align-items:center; justify-content:space-between; font-family: var(--ff-display); font-weight:700; font-size:1.4rem; text-transform:uppercase; letter-spacing:-.02em; color: var(--warm); padding:.6rem 0; border-bottom:1px solid var(--line-light); }
.sheet nav a span { font-family: var(--ff-body); font-weight:400; font-size:.7rem; color: var(--yellow); letter-spacing:.1em; }
.sheet__foot { margin-top:1.2rem; display:flex; gap:.6rem; }

/* ---------- search overlay ---------- */
.seek { position:fixed; inset:0; z-index:210; display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; visibility:hidden; }
.seek__scrim { position:absolute; inset:0; background: rgba(28,27,26,.62); backdrop-filter: blur(5px); opacity:0; transition: opacity var(--t); }
.seek__box { position:relative; width:min(92vw,680px); background: var(--bone); border-radius: var(--r-md); padding:26px; box-shadow: var(--sh-2); transform: translateY(-16px); opacity:0; transition: transform var(--t), opacity var(--t); }
.seek.is-open { visibility:visible; }
.seek.is-open .seek__scrim { opacity:1; }
.seek.is-open .seek__box { transform:none; opacity:1; }
.seek__field { display:flex; align-items:center; gap:.8rem; border-bottom:3px solid var(--red); padding-bottom:.7rem; }
.seek__field svg { width:24px; color: var(--red); flex:none; }
.seek__field input { flex:1; border:none; background:none; font-family: var(--ff-display); font-weight:700; font-size:1.4rem; text-transform:uppercase; color: var(--charcoal); }
.seek__field input:focus { outline:none; box-shadow:none; }
.seek__hint { font-size:.8rem; color: var(--muted); margin-top:.8rem; }
.seek__sugg { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.seek__sugg button { font-family: var(--ff-display); font-weight:600; font-size:.8rem; padding:.4em .9em; border:1px solid var(--line); border-radius: var(--r-pill); color: var(--charcoal); }
.seek__sugg button:hover { background: var(--charcoal); color:#fff; }
.seek__results { margin-top:1.2rem; display:grid; gap:.2rem; max-height:46vh; overflow:auto; }
.seek__results a { display:flex; justify-content:space-between; padding:.7rem .8rem; border-radius: var(--r-sm); transition: background var(--t-fast); }
.seek__results a:hover, .seek__results a.is-active { background: var(--concrete); }
.seek__results .tag { color: var(--red); font-family: var(--ff-display); font-weight:600; font-size:.78rem; }

/* =====================================================================
   FOOTER (architectural, distinct language)
   ===================================================================== */
.foot { background: var(--g-char); color: rgba(250,246,240,.72); position:relative; overflow:hidden; }
.foot__mark { position:absolute; right: -2%; bottom: -8%; font-family: var(--ff-display); font-weight:800; font-size: clamp(5rem,20vw,18rem); line-height:.8; color: transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.07); text-stroke:1.5px rgba(255,255,255,.07); pointer-events:none; text-transform:uppercase; }
.foot__top { position:relative; display:grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,5vw,72px); padding-block: clamp(56px,7vw,96px); border-bottom:1px solid var(--line-light); align-items:end; }
.foot h2 { color: var(--warm); }
.foot__news { }
.foot__news label { font-family: var(--ff-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; color: var(--yellow); }
.foot__news .row { display:flex; gap:.6rem; margin-top:.8rem; }
.foot__news input { flex:1; padding:.95em 1.2em; border-radius: var(--r-pill); border:1px solid var(--line-light); background: rgba(255,255,255,.07); color:#fff; }
.foot__news input::placeholder { color: rgba(255,255,255,.5); }
.foot__cols { position:relative; display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:2rem; padding-block: clamp(40px,5vw,64px); }
.foot__about p { color: rgba(250,246,240,.6); max-width:34ch; margin-top:1rem; }
.foot__col h4 { color: var(--warm); font-family: var(--ff-display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.foot__col a { display:block; padding:.32rem 0; color: rgba(250,246,240,.66); font-size:.93rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.foot__col a:hover { color: var(--yellow); padding-left:5px; }
.foot__social { display:flex; gap:.55rem; margin-top:1.2rem; }
.foot__social a { width:42px; height:42px; border-radius: var(--r-sm); display:grid; place-items:center; background: rgba(255,255,255,.08); transition: background var(--t-fast); }
.foot__social a:hover { background: var(--red); }
.foot__social svg { width:18px; }
.foot__disc { position:relative; font-size:.82rem; color: rgba(250,246,240,.42); max-width:80ch; padding:1.4rem 0 2rem; }
.foot__base { position:relative; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-block:24px; border-top:1px solid var(--line-light); font-size:.84rem; color: rgba(250,246,240,.5); }
.foot__base nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:900px){ .foot__top { grid-template-columns:1fr; } .foot__cols { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__cols { grid-template-columns:1fr; } }

/* ---------- back to top ---------- */
.totop { position:fixed; right:20px; bottom:20px; z-index:120; width:52px; height:52px; border-radius: var(--r-md); background: var(--g-ember); color:#fff; display:grid; place-items:center; box-shadow: var(--sh-red); opacity:0; transform: translateY(14px); pointer-events:none; transition: opacity var(--t), transform var(--t); }
.totop.show { opacity:1; transform:none; pointer-events:auto; }
.totop svg { width:22px; }

/* ---------- page masthead band (interior pages) ---------- */
.masthead { position:relative; overflow:hidden; padding-block: clamp(130px,16vw,210px) clamp(48px,7vw,96px); }
.masthead--dark { color: var(--warm); }
.masthead__bg { position:absolute; inset:0; z-index:-2; }
.masthead__bg img, .masthead__bg svg { width:100%; height:100%; object-fit:cover; }
.masthead--dark::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(120deg, rgba(28,27,26,.84), rgba(28,27,26,.4)); }
.masthead--dark h1 { color: var(--warm); }
.crumbs { display:flex; gap:.5rem; align-items:center; font-family: var(--ff-display); font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); margin-bottom:1.3rem; flex-wrap:wrap; }
.masthead--dark .crumbs { color: rgba(250,246,240,.7); }
.crumbs a:hover { color: var(--red); }
.masthead--dark .crumbs a:hover { color: var(--yellow); }
.crumbs svg { width:.7em; opacity:.6; }