:root{
  --canvas:#0c0c0d;
  --canvas-2:#17181a;
  --ink:#f2f0ec;
  --ink-dim:#c9c7c2;
  --plate-1:#2b2b2e;
  --plate-2:#1a1a1a;
  --rivet:#000;
  --accent:#9C7C38;
  --accent-ink:#1b1a17;
  --light-bg:#f7f5f1;
  --light-ink:#2a2a2a;
  --rule:#3a3a3d;
  --max:1200px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:#000;}
body{
  font-family:'Public Sans',Arial,Helvetica,sans-serif;
  background:var(--canvas);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.rich-page{
  background-color:#000;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}

/* ---- Locked PDF-style stage: fixed 1440x810 canvas scaled uniformly to fit ---- */
body.staged{background-image:none !important;background:#000;height:100vh;overflow:hidden;}
/* Stage is top-aligned so the nav strip is flush with the top of the window and
   all the leftover letterbox space collects as black at the bottom. */
.stage-outer{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;background:#000;}
.stage{
  width:1440px;height:810px;flex:none;
  transform:scale(var(--stage-scale,1));
  transform-origin:top center;
  display:flex;flex-direction:column;position:relative;
  background-color:#000;background-size:cover;background-position:center top;background-repeat:no-repeat;
}
/* Footer lives outside the stage, pinned to the very bottom of the window so it
   sits in the black band below the photo. */
/* Centre with left:50% + a negative margin, NOT left:0/right:0/margin:auto -
   that combination is over-constrained once the viewport is narrower than the
   1440 canvas, so browsers drop `right`, the box sits at left:0, and scaling it
   about its centre pushes the whole footer (and the badge) off the right edge. */
.stage-footer{
  position:absolute;left:50%;right:auto;bottom:0;margin-left:-720px;
  width:1440px;height:62px;
  transform:scale(var(--stage-scale,1));
  transform-origin:bottom center;
}
/* ---- Staged inner pages, positioned from the PDF's own text coordinates
   (extracted with pdftotext -bbox, page 959.76x540pt scaled x1.5 to this
   1440x810 canvas). All values below are those measured positions. ---- */
body.staged main > .section{padding:0;}
body.staged .section > .container{max-width:none;padding:0;}
/* Logo sits identically on every page: 567px wide, top edge 92px */
body.staged .page-logo{width:567px;max-width:none;margin:0 auto;display:block;}
body.staged:not(.page-home) main{padding-top:34px;}

/* Nav geometry from the PDF's own placements: plates 48px tall at y=5, widths
   225/225/366/225/225, spanning x=41..1399 - so a 58px header strip. */
body.staged .site-header{padding:5px 0;height:58px;box-sizing:border-box;}
body.staged .site-header > .container{max-width:none;padding:0;justify-content:center;flex-wrap:nowrap;gap:0;}
body.staged nav.plates.wide{width:1358px;margin:0 auto;gap:0;justify-content:space-between;align-items:center;flex-wrap:nowrap;}
body.staged nav.plates.wide a{padding:0;display:block;}
body.staged nav.plates.wide a img.nav-plate-img{height:48px;width:225px;display:block;}
body.staged nav.plates.wide a:nth-of-type(3) img.nav-plate-img{width:366px;}

/* About - body 21px, line pitch 24.85px, first line top 220.4px */
body.staged .about-copy{
  width:800px;margin:0 auto;text-align:center;
  font-size:21px;line-height:25.15px;color:var(--ink);
  padding-top:35.6px;
}
body.staged .about-copy p{font-size:21px;line-height:25.15px;margin:0 0 25.75px;color:var(--ink);}
body.staged .about-core-heading{text-decoration:underline;text-underline-offset:3px;}
body.staged .about-core-list{list-style:none;margin:0;padding:0;}
body.staged .about-core-list li{font-size:21px;line-height:25.15px;}

/* News - heading 36.4px serif, glyph top 324.8px */
/* The PDF's two serif headings sit ~8px left of page centre (its body copy is
   centred at 720, these at ~711.7). Treated as a slip in the artwork and
   centred properly here, at the client's request. */
body.staged .news-heading{
  font-size:36.4px;line-height:44.2px;text-align:center;
  margin:140px 0 0;color:var(--ink);font-weight:600;
}

/* Contact - heading 36.9px serif at 288.5px; form grid taken from the PDF:
   label/field columns 161.5 / 287.3 / (93.5 gap + 239.1) / 287.3 = 1068.7px,
   rows pitched 74.2px with 287.3x33.1px field plates. */
body.staged .contact-heading{
  font-size:36.9px;line-height:44.2px;text-align:center;
  margin:103.7px 0 0;color:var(--ink);font-weight:600;
}
/* The form block is not page-centred in the design: it spans x 223.4..1291.7 */
body.staged .contact-form--forged{
  width:1068.3px;max-width:none;margin:0 0 0 223.4px;
  padding-top:103.5px;display:block;
}
body.staged .cf-grid{
  display:grid;
  grid-template-columns:161.1px 287.3px 332.6px 287.3px;
  grid-auto-rows:74.2px;align-items:center;
}
body.staged .cf-grid label{
  font-family:'Public Sans',Arial,sans-serif;
  font-size:26.5px;line-height:31.9px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--ink);
  margin:0;white-space:nowrap;
}
body.staged .cf-grid label.cf-col2{padding-left:93.5px;}
body.staged .cf-grid input,
body.staged .cf-grid select{
  width:287.3px;height:33.1px;box-sizing:border-box;
  background-image:url('/images/contact-field-plate.jpg');
  background-size:100% 100%;background-repeat:no-repeat;
  border:none;border-radius:0;margin:0;
  padding:0 10px;font-size:16px;color:#1e1e1e;
  position:relative;top:-2.5px;
}
body.staged .contact-form--forged .btn{margin:8px auto 0;display:block;width:330px;height:46px;padding:0;font-size:14px;}
body.staged .contact-page .form-msg{width:1068.7px;margin:0 auto;}

/* ================= Fortress ==================
   Geometry from "Fortress Website - 3D Website Text.pptx" (EMU x1440/12192000).
   Nav plates 191.2x56.2 at y=1.1, x = 84.4/444.4/804.4/1164.4 (pitch 360).
   Logo frame 460.6x120.9 at (489.7, 98.6). Background frame y=58.8, h=751.2. */
body.staged.brand-fortress .site-header{height:58px;padding:1.1px 0 0;box-sizing:border-box;background:#000;}
body.staged.brand-fortress nav.plates.wide{width:1271.2px;margin:0 auto;justify-content:space-between;gap:0;}
body.staged.brand-fortress nav.plates.wide a img.nav-plate-img{width:191.2px;height:56.2px;}
body.staged.brand-fortress .page-logo{width:460.6px;height:120.9px;margin:0;position:absolute;left:489.7px;top:98.6px;}
/* Positioning context is .stage, so every `top` below is an absolute canvas
   coordinate straight from the deck - not offset by the header. */
body.staged.brand-fortress main{padding-top:0;position:static;}
body.staged.brand-fortress .stage{background-size:1440px 751.2px;background-position:0 58.8px;}
body.staged.brand-fortress .section,
body.staged.brand-fortress .section > .container{position:static;}

/* Typeface and colour come from the deck's own run properties:
   tagline = Libre Baskerville, algn=ctr, caps=all, #EEEEEE
   everything else = Roboto, #EEEEEE */
body.staged.brand-fortress{font-family:'Roboto',Arial,Helvetica,sans-serif;}

/* Home tagline - 32pt bold at (384.1, 390.1). 32pt x (1440/960) = 48px. */
body.staged.brand-fortress .staged-tagline{
  position:absolute;left:384.1px;top:390.1px;width:699.3px;
  font-size:48px;line-height:1.22;font-weight:700;color:#EEEEEE;
  font-family:'Libre Baskerville',Georgia,serif;
  text-align:center;text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}
/* About copy - 16pt bold at (497.7, 236.7), width 444.5, centred.
   Deck font size kept (16pt = 24px); leading tightened from 1.32 to 1.24 because
   the deck's own text box overflows into the disclaimer, which we don't copy. */
body.staged.brand-fortress .staged-copy{
  position:absolute;left:497.7px;top:236.7px;width:444.5px;
  font-size:24px;line-height:1.24;font-weight:700;color:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}
body.staged.brand-fortress .staged-copy p{color:#EEEEEE;font-size:24px;line-height:1.24;margin:0 0 16px;}
body.staged.brand-fortress .staged-copy p:last-child{margin-bottom:0;}

/* Products - four quadrants, 20pt titles (=30px) and 14pt items (=21px) */
body.staged.brand-fortress .product-stage{position:absolute;inset:0;}
body.staged.brand-fortress .product-quad{position:absolute;}
body.staged.brand-fortress .product-quad-title{
  font-size:30px;font-weight:700;letter-spacing:.02em;color:#EEEEEE;
  text-decoration:underline;text-underline-offset:4px;
  font-family:'Roboto',Arial,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.7);white-space:nowrap;
}
body.staged.brand-fortress .product-quad-items li{position:relative;}
body.staged.brand-fortress .product-quad-items li::before{
  content:"\27A2";position:absolute;left:-33.8px;top:0;
  font-weight:400;color:#EEEEEE;
}
body.staged.brand-fortress .product-quad-items{
  position:absolute;list-style:none;margin:0;padding:0 0 0 33.8px;width:391.3px;
  font-size:21px;line-height:1.5;font-weight:700;color:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.7);
}
/* Contact - heading 24pt (=36px) at (382.8,243.8); labels and 290.3x36.3
   field plates on the deck's two-column grid. */
body.staged.brand-fortress .contact-heading{
  position:absolute;left:382.8px;top:243.8px;width:686.9px;margin:0;
  font-size:36px;line-height:1.2;font-weight:700;text-align:left;color:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.7);
}
/* Columns: label 216.1->342.8, field 342.8->633.1, label2 712.4 (79.3 into its
   369.8 column), field2 1002.9->1293.2. Rows pitched 78.3. */
body.staged.brand-fortress .contact-form--forged{
  position:absolute;left:216.1px;top:348px;width:1077.1px;margin:0;padding:0;
}
body.staged.brand-fortress .cf-grid{
  grid-template-columns:126.7px 290.3px 369.8px 290.3px;
  grid-auto-rows:78.3px;align-items:center;
}
/* Labels bold, matching the Black Forge contact treatment */
body.staged.brand-fortress .cf-grid label{font-size:24px;line-height:1.2;font-weight:700;position:relative;top:-7.5px;
  font-family:'Roboto',Arial,sans-serif;color:#EEEEEE;text-shadow:0 2px 8px rgba(0,0,0,.7);}
body.staged.brand-fortress .cf-grid label.cf-col2{padding-left:79.3px;}
body.staged.brand-fortress .cf-grid input,
body.staged.brand-fortress .cf-grid select{
  width:290.3px;height:36.3px;top:0;
  background-image:url('/images/fortress-field-plate.png');
}
/* Centred on the form like Black Forge, same 330x46 and gap below the fields */
body.staged.brand-fortress .contact-form--forged .btn{
  width:330px;height:46px;margin:10.1px auto 0;padding:0;
  font-size:14px;border-radius:3px;
}
/* "Powered by Black Forge Capital" badge, 187.9x89.0 at (1252.1, 720.5) */
/* The badge lives inside .stage-footer, which is already transformed - so a
   `position:fixed` child resolves against that ancestor, not the viewport, and
   its own scale() stacked on top of the footer's. That double-scaling pushed it
   off the right edge on any window narrower than the canvas (e.g. iPad).
   Position it in the footer's own coordinates and let it inherit that scale:
   right:0 / bottom:0 puts it at the deck's 1252.1,720.5 on the 1440 canvas. */
body.staged .footer-badge-link{
  position:absolute;right:0;bottom:0;display:block;
  width:187.9px;height:89px;z-index:6;
}
body.staged .footer-badge{width:100%;height:100%;display:block;}
body.staged .footer-badge-link:hover{filter:brightness(1.15);}
/* Disclaimer uses the double-width + scale(.5) trick, so width must be 2x the
   deck's 1059.4px and margin-left half of that to keep it centred (deck centre
   190.9 + 1059.4/2 = 720.6, i.e. centred on the canvas). */
body.staged.brand-fortress footer.site-footer .disclaimer{width:2118.8px;margin-left:-1059.4px;}

/* Portfolio - each logo absolutely placed at its PDF coordinate */
body.staged .portfolio-logo-stage{position:absolute;left:0;top:0;width:1440px;height:810px;pointer-events:none;}
body.staged .portfolio-logo-tile{pointer-events:auto;}
body.staged .portfolio-logo-tile{position:absolute;display:flex;align-items:center;justify-content:center;}
body.staged .portfolio-logo-tile a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
body.staged .portfolio-logo-tile .portfolio-logo-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
body.staged .portfolio-page .page-logo{position:relative;z-index:2;}

/* Home background crop solved against the PDF by image correlation (NCC 0.990):
   source scaled 0.5012 of the PDF page, offset (-3,80); x0.72 for this stage. */
body.staged.page-home .stage{background-size:1444.9px 754.6px;background-position:-2.2px 57.6px;}
/* Same solve per page (NCC: about .95, news .99, contact .999, portfolio .56 -
   portfolio scores lower only because its logos cover most of the frame). */
body.staged.page-about .stage{background-size:1456.1px 750.1px;background-position:-2.2px 67px;}
body.staged.page-portfolio .stage{background-size:1440.4px 753.3px;background-position:-3.6px 58.3px;}
body.staged.page-news .stage{background-size:1437.2px 750.1px;background-position:0 58.3px;}
body.staged.page-contact .stage{background-size:1443.1px 753.3px;background-position:0 58.3px;}
.stage main{flex:1;display:flex;flex-direction:column;min-height:0;}
.stage footer.site-footer{flex-shrink:0;}
@media (max-width:1024px){
  body.staged{height:auto;overflow:visible;}
  .stage-outer{position:static;display:block;overflow:visible;}
  .stage{width:auto;height:auto;min-height:100vh;transform:none;}
}
body.rich-page footer.site-footer{background:transparent;border-top:none;}
body.rich-page footer.site-footer .container{max-width:1700px;}
body.rich-page .disclaimer{border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);}
body.no-scroll-page{height:100vh;overflow:hidden;display:flex;flex-direction:column;}
body.no-scroll-page main{flex:1;display:flex;flex-direction:column;min-height:0;}
body.no-scroll-page footer.site-footer{flex-shrink:0;padding:12px 0 16px;}
h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink);
}
p{margin:0 0 1em;color:var(--ink-dim);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
.section{padding:88px 0;}
.section--tight{padding:56px 0;}
.section--light{background:var(--light-bg);color:var(--light-ink);}
.section--light p{color:#4a4a4a;}
.section--light h2,.section--light h3{color:var(--light-ink);}
.bg-photo{
  position:relative;
  background-size:cover;
  background-position:center;
  color:var(--ink);
}
.bg-photo::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,8,9,.72), rgba(8,8,9,.55) 40%, rgba(8,8,9,.85));
  z-index:0;
}
.bg-photo > .container{position:relative;z-index:1;}

/* ---- Header / Nav (Black Forge exact-match nav uses baked plate images) ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#0a0a0b;
  border-bottom:1px solid #000;
  padding:14px 0;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.brand-logo{display:flex;align-items:center;gap:10px;}
.brand-logo img{height:34px;width:auto;}
.brand-logo .wordmark{font-family:'Fraunces',serif;font-weight:700;font-size:20px;letter-spacing:.02em;color:var(--ink);}
.brand-logo .sub{display:block;font-size:10px;letter-spacing:.28em;color:var(--ink-dim);font-family:Arial,sans-serif;}
nav.plates{display:flex;gap:10px;flex-wrap:wrap;}
nav.plates a{
  position:relative;
  display:inline-block;
  padding:10px 18px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(155deg, var(--plate-1), var(--plate-2));
  border-radius:3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.5);
  border:1px solid #050505;
  transition:box-shadow .15s ease, transform .15s ease, color .15s ease;
}
nav.plates a::before,nav.plates a::after{
  content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #888, #111 70%);
  transform:translateY(-50%);
}
nav.plates a::before{left:6px;}
nav.plates a::after{right:6px;}
nav.plates a:hover{color:var(--accent);box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.6), 0 0 0 1px var(--accent);}
nav.plates a.active{color:var(--accent);}

/* ---- Rich riveted header (Black Forge exact-match nav, image buttons) ---- */
.container.header-rich{justify-content:center;max-width:none;width:100%;padding:0 20px;}
.container.header-rich nav.plates{width:100%;}
nav.plates.wide{gap:14px;width:100%;justify-content:space-between;align-items:center;}
nav.plates.wide a{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  transition:opacity .15s ease;
}
nav.plates.wide a img{height:46px;width:auto;display:block;}
.nav-plate-text{display:none;}
/* Viewport-keyed sizing must not apply inside the locked stage - it would
   overflow the fixed 1440px canvas and wrap the nav onto a second row. */
@media (min-width:1700px){body:not(.staged) nav.plates.wide a img{height:58px;}}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:34px;background:none;border:none;padding:0;cursor:pointer;}
.nav-toggle span{display:block;width:100%;height:3px;background:var(--ink);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.is-active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media (max-width:1024px){
  .site-header{padding:10px 0;}
  .container.header-rich{justify-content:flex-start;position:relative;}
  .nav-toggle{display:flex;width:29px;height:26px;gap:4px;}
  nav.plates.wide{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:#0a0a0b;border-top:1px solid #050505;border-bottom:1px solid #050505;
    padding:16px 20px 22px;gap:12px;
    max-height:80vh;overflow-y:auto;
  }
  nav.plates.wide.nav-open{display:flex;}
  nav.plates.wide a{width:100%;justify-content:flex-start;padding:0;}
  nav.plates.wide a img.nav-plate-img{display:none;}
  nav.plates.wide a .nav-plate-text{
    display:block;width:100%;text-align:center;box-sizing:border-box;
    padding:14px 18px;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink);background:linear-gradient(155deg, var(--plate-1), var(--plate-2));
    border-radius:3px;border:1px solid #050505;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.5);
  }
}
nav.plates.wide a:hover{opacity:.82;}
nav.plates.wide a.active{opacity:1;}
nav.plates.wide a::before,nav.plates.wide a::after{display:none;content:none;}

/* ---- Buttons ---- */
.btn{
  display:inline-block;
  padding:14px 28px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:2px;
  border:none;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.08);}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--ink-dim);}
.btn--outline:hover{border-color:var(--accent);color:var(--accent);}

/* ---- Hero ---- */
.hero{min-height:640px;display:flex;align-items:center;padding:140px 0 90px;}
.hero .pre{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:18px;}
.hero h1{font-size:48px;max-width:820px;}
.hero .subhead{font-size:19px;max-width:640px;color:var(--ink-dim);margin:22px 0 32px;}

/* ---- Icon grid ---- */
.grid{display:grid;gap:24px;}
.grid--4{grid-template-columns:repeat(4,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){.grid--4{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:repeat(1,1fr);} .grid--2{grid-template-columns:1fr;}}
@media (max-width:560px){.grid--4{grid-template-columns:1fr;}}
.pillar{
  background:var(--canvas-2);
  border:1px solid var(--rule);
  padding:26px 20px;
  border-radius:4px;
}
.pillar .num{color:var(--accent);font-family:'Fraunces',serif;font-size:26px;margin-bottom:10px;display:block;}
.pillar h4{font-size:16px;margin-bottom:6px;}
.pillar p{font-size:14px;margin:0;}

/* ---- Cards (portfolio) ---- */
.card{
  background:var(--canvas-2);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:28px;
  display:flex;flex-direction:column;gap:14px;
}
.card img.logo-mark{height:56px;width:auto;object-fit:contain;filter:grayscale(0);}
.card h4{font-size:18px;margin:0;}
.card .badge{
  display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:4px 9px;border-radius:20px;width:fit-content;
}
.card .link{margin-top:auto;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);}
.card .link:hover{color:var(--accent);}
.card--tier2{opacity:.92;}
.card--tier2 img.logo-mark{filter:grayscale(15%);}

.tier-note{
  font-size:14px;color:var(--ink-dim);max-width:760px;margin-bottom:28px;padding:16px 18px;
  background:rgba(156,124,56,.08);border-left:3px solid var(--accent);border-radius:2px;
}

/* ---- Callout / TODO ---- */
.callout{
  background:rgba(156,124,56,.1);
  border-left:3px solid var(--accent);
  padding:16px 20px;border-radius:2px;font-size:14px;color:var(--ink-dim);margin:24px 0;
}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--rule);padding:22px 0;}
.faq-item h4{font-size:17px;margin-bottom:8px;}
.faq-item p{margin:0;font-size:15px;}

/* ---- Stats ---- */
.stat{text-align:left;}
.stat .value{font-family:'Fraunces',serif;font-size:48px;color:var(--accent);display:block;}
.stat .label{font-size:13px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em;}

/* ---- Form ---- */
form.contact-form{display:grid;gap:18px;max-width:640px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:600px){.form-row{grid-template-columns:1fr;}}
.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;background:#111214;border:1px solid var(--rule);color:var(--ink);
  font-family:inherit;font-size:15px;border-radius:3px;
}
.field textarea{min-height:120px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.hp-field{position:absolute;left:-9999px;top:-9999px;}
.contact-form--forged .field{display:flex;align-items:center;gap:18px;}
.contact-form--forged .field label{
  width:190px;flex-shrink:0;display:block;margin-bottom:0;white-space:nowrap;
  font-size:21px;font-weight:600;letter-spacing:0;text-transform:none;
  font-family:'Fraunces',Georgia,serif;color:var(--ink);
}
.contact-form--forged .field input,.contact-form--forged .field select{
  background-image:url('/images/contact-field-plate.jpg');background-size:100% 100%;background-repeat:no-repeat;
  color:#2a2a2a;border:none;border-radius:0;padding:14px 18px;
}
.contact-form--forged .field textarea{
  background:#e9e2d3;color:#2a2a2a;border:1px solid #b8ab8c;border-radius:2px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);min-height:96px;
}
.contact-form--forged .field input:focus,.contact-form--forged .field select:focus,.contact-form--forged .field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
/* Copper riveted plate, built from the nav plate's own metal texture */
.contact-form--forged .btn{
  background:var(--btn-plate) no-repeat center/100% 100%;
  color:#fff;font-weight:800;
  border:none;border-radius:3px;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
}
.contact-form--forged .btn:hover{filter:brightness(1.1);}
@media (max-width:600px){
  .contact-form--forged .field{flex-direction:column;align-items:flex-start;gap:8px;}
  .contact-form--forged .field label{width:auto;font-size:18px;}
}
.form-msg{padding:14px 16px;border-radius:3px;font-size:14px;margin-bottom:6px;display:none;}
.form-msg.success{display:block;background:rgba(60,140,80,.15);border:1px solid #3c8c50;color:#bfe6c8;}
.form-msg.error{display:block;background:rgba(180,60,50,.15);border:1px solid #b43c32;color:#f0bdb6;}

/* ---- Footer ---- */
footer.site-footer{background:#000;border-top:1px solid #000;padding:64px 0 32px;}
.family-strip h3{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-dim);margin-bottom:22px;}
.family-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:48px;}
@media (max-width:800px){.family-cards{grid-template-columns:1fr;}}
.family-card{background:var(--canvas-2);border:1px solid var(--rule);border-radius:4px;padding:18px 20px;}
.family-card .name{font-weight:700;font-size:14px;margin-bottom:4px;}
.family-card .desc{font-size:13px;color:var(--ink-dim);margin-bottom:8px;}
.family-card .go{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--accent);}
.disclaimer{font-size:9px;line-height:1.5;color:#7a7a7d;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0;max-width:1600px;margin:0 auto;text-align:center;}
.disclaimer p{color:#7a7a7d;font-size:9px;margin:0 0 8px;}
.disclaimer p:last-child{margin-bottom:0;}
.copyright{font-size:9px;color:#7a7a7d;margin:0 0 12px;text-align:center;}

/* Disclaimer measured off the PDF: text block 67.3% of page width, 5.9px at
   1440-stage scale (each paragraph fits one line), short centred rules. */
/* Text widened across the page for legibility (each paragraph still one line,
   so the wider block means a proportionally larger font). Top rule stays at
   the PDF's position - 721.4px, 89.07% of page height - so it crosses the
   anvil exactly where the template does; the block grows downward instead. */
/* Laid out at 12px in a double-width box, then scaled to half. A browser
   minimum-font-size setting clamps font-size but cannot touch a transform, so
   the line breaks are fixed at 12px metrics and this always stays four lines. */
body.staged .stage-footer .disclaimer{
  position:absolute;left:50%;right:auto;bottom:0;margin-left:-1380px;
  width:2760px;max-width:none;
  font-size:12px;line-height:24px;
  border:none;padding:16px 0 20px;
  transform:scale(.5);transform-origin:bottom center;
}
/* PDF glyph brightness measures ~215 and the rules ~221, not the dim grey
   used elsewhere - tiny text at this size needs the contrast to stay legible. */
body.staged .disclaimer,
body.staged .disclaimer p{color:#d6d6d8;}
body.staged .disclaimer p{font-size:12px;line-height:24px;margin:0;}
body.staged .copyright{font-size:12px;line-height:24px;margin:0;color:#dcdcde;}
body.staged .disclaimer::before,
body.staged .disclaimer::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:586px;height:2px;background:rgba(255,255,255,.87);
}
body.staged .disclaimer::before{top:0;}
body.staged .disclaimer::after{bottom:0;}
body.staged .stage-footer footer.site-footer{padding:0;background:transparent;border:none;}
body.staged .stage-footer footer.site-footer > .container{max-width:none;padding:0;}
@media (max-width:600px){
  footer.site-footer{padding:20px 0 16px;}
  .disclaimer{padding:12px 0;font-size:8px;line-height:1.35;}
  .disclaimer p{font-size:8px;margin:0 0 5px;}
  .copyright{margin:0 0 8px;font-size:8px;}
}

/* ---- Utility ---- */
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px;}
.section h2{font-size:32px;}
.lede{font-size:18px;max-width:760px;color:var(--ink-dim);}
.lede--about{font-size:24px;max-width:900px;line-height:1.5;color:var(--ink);margin-left:auto;margin-right:auto;}
@media (max-width:600px){.lede--about{font-size:19px;}}
.mt-0{margin-top:0;}

/* ---- Minimal hero (Black Forge home) ---- */
.hero-minimal{padding:0;min-height:0;}
.hero-minimal.bf-hero{flex:1;display:flex;min-height:0;}
/* Sizes below are fixed px against the locked 1440x810 stage (see .stage) */
.hero-minimal-inner{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding-top:34px;height:100%;width:100%;}
.hero-minimal-logo{width:567px;max-width:none;margin:0 auto;display:block;align-self:center;}
.hero-minimal-tagline{margin-top:30vh;text-align:center;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:44px;line-height:1.25;color:var(--ink);text-shadow:0 2px 8px rgba(0,0,0,.6);}
.hero-minimal-tagline-img{margin-top:312px;margin-left:auto;margin-right:auto;width:428px;max-width:none;display:block;align-self:center;}
@media (max-width:1024px){
  .hero-minimal-inner{padding:4% 5%;gap:6%;}
  .hero-minimal-logo{width:74%;max-width:440px;}
  .hero-minimal-tagline{margin-top:6%;font-size:26px;}
  .hero-minimal-tagline-img{margin-top:0;width:74%;max-width:420px;}
}

/* ---- Rich-header secondary pages (Black Forge exact-match) ---- */
.page-logo{max-width:460px;width:70%;margin:0 auto 32px;display:block;}
.section--centered{text-align:center;}
.section--centered .lede,.section--centered > .container > p{max-width:760px;margin-left:auto;margin-right:auto;}
@media (max-width:600px){.page-logo{width:82%;}}

/* ---- Core Focus (About page) ---- */
.core-focus{margin-top:40px;text-align:center;}
.core-focus h3{font-size:20px;text-decoration:underline;margin-bottom:20px;}
.core-focus-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:19px;color:var(--ink);}

/* ---- Portfolio logo grid ---- */
.portfolio-logo-grid{display:flex;flex-direction:column;gap:64px;}
.portfolio-logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;}
.portfolio-logo-tile{display:flex;align-items:center;justify-content:center;}
.portfolio-logo-tile a{display:block;transition:transform .15s ease, opacity .15s ease;}
.portfolio-logo-tile a:hover{transform:scale(1.06);opacity:.9;}
.portfolio-logo-img{max-height:64px;max-width:100%;width:auto;object-fit:contain;}
.portfolio-logo-img--lg{max-height:128px;}
.portfolio-logo-img--md{max-height:96px;}
@media (max-width:700px){
  .portfolio-logo-grid{gap:40px;}
  .portfolio-logo-row{justify-content:center;gap:28px 40px;}
}

/* ---- News hero ---- */
.news-hero{min-height:520px;display:flex;align-items:flex-start;}
.news-hero h1{max-width:760px;}

/* ================= Fusion ==================
   Geometry from "Fusion Website - Blue Forge Menu and Fields.pptx"
   (EMU x1440/12192000). Nav plates 285.1x58.3 at y=6.5, x=35.6/577.8/1120.0.
   Logo frame 357.5x99.0 at (541.3, 80.5) - it sits on black, above the photo.
   Background frame starts at y=179.5, h=630.5 (not under the nav like Fortress). */
body.staged.brand-fusion{font-family:'Roboto',Arial,Helvetica,sans-serif;}
body.staged.brand-fusion .site-header{height:71px;padding:6.5px 0 0;box-sizing:border-box;background:#000;}
body.staged.brand-fusion nav.plates.wide{width:1369.5px;margin:0 auto;justify-content:space-between;gap:0;}
body.staged.brand-fusion nav.plates.wide a img.nav-plate-img{width:285.1px;height:58.3px;}
body.staged.brand-fusion .page-logo{width:357.5px;height:99px;margin:0;position:absolute;left:541.3px;top:80.5px;}
body.staged.brand-fusion main{padding-top:0;position:static;}
body.staged.brand-fusion .stage{background-size:1440px 630.5px;background-position:0 179.5px;}
body.staged.brand-fusion .section,
body.staged.brand-fusion .section > .container{position:static;}

/* Home tagline - 32pt (48px) Libre Baskerville, centred, ALL CAPS, at (329.8, 374.6) */
body.staged.brand-fusion .staged-tagline{
  position:absolute;left:329.8px;top:374.6px;width:807.8px;
  font-size:48px;line-height:1.22;color:#EEEEEE;
  font-family:'Libre Baskerville',Georgia,serif;
  text-align:center;text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
/* About copy - 16pt (24px) Roboto bold, centred, at (490.7, 239.6) width 474.3 */
body.staged.brand-fusion .staged-copy{
  position:absolute;left:490.7px;top:239.6px;width:474.3px;
  font-size:24px;line-height:1.26;font-weight:700;color:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}
body.staged.brand-fusion .staged-copy p{color:#EEEEEE;font-size:24px;line-height:1.26;margin:0 0 16px;}
body.staged.brand-fusion .staged-copy p:last-child{margin-bottom:0;}

/* Contact - heading 24pt (36px) Roboto bold at (382.8, 243.8); the form grid is
   identical to Fortress's: labels 216.1/712.4, plates 342.8/1002.9, rows 78.3. */
body.staged.brand-fusion .contact-heading{
  position:absolute;left:382.8px;top:243.8px;width:686.9px;margin:0;
  font-size:36px;line-height:1.2;font-weight:700;text-align:left;color:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.75);
}
body.staged.brand-fusion .contact-form--forged{
  position:absolute;left:216.1px;top:348px;width:1077.1px;margin:0;padding:0;display:block;
}
body.staged.brand-fusion .cf-grid{
  grid-template-columns:126.7px 290.3px 369.8px 290.3px;
  grid-auto-rows:78.3px;align-items:center;
}
body.staged.brand-fusion .cf-grid label{
  font-family:'Roboto',Arial,sans-serif;font-size:24px;line-height:1.2;font-weight:700;
  color:#EEEEEE;text-shadow:0 2px 8px rgba(0,0,0,.75);position:relative;top:-7.5px;
}
body.staged.brand-fusion .cf-grid label.cf-col2{padding-left:79.3px;}
/* Fusion's field plate is dark with a blue glow, so field text must be light. */
body.staged.brand-fusion .cf-grid input,
body.staged.brand-fusion .cf-grid select{
  width:290.3px;height:36.4px;top:0;
  background-image:url('/images/fusion-field-plate.png');
  color:#EEEEEE;
}
body.staged.brand-fusion .cf-grid select option{background:#101416;color:#EEEEEE;}
body.staged.brand-fusion .contact-form--forged .btn{
  width:330px;height:46px;margin:10.1px auto 0;padding:0;font-size:14px;border-radius:3px;
}
body.staged.brand-fusion footer.site-footer .disclaimer{width:2118.8px;margin-left:-1059.4px;}

/* ================= Anvil ==================
   Geometry from "Anvil Assets Website - Forged Steel Buttons.pptx"
   (EMU x1440/12192000). Nav plates ~149x56.2 at y=1.1, x=105.3/645.4/1185.8.
   Logo frame 355.3x202.6 at (556.0, 65.4) - taller than the other brands.
   Background frame y=66.3, h=743.7. Deck is monochrome steel, no colour accent. */
body.staged.brand-anvil{font-family:'Roboto',Arial,Helvetica,sans-serif;}
body.staged.brand-anvil .site-header{height:58px;padding:1.1px 0 0;box-sizing:border-box;background:#000;}
body.staged.brand-anvil nav.plates.wide{width:1229px;margin:0 auto;justify-content:space-between;gap:0;}
body.staged.brand-anvil nav.plates.wide a img.nav-plate-img{width:149.5px;height:56.2px;}
body.staged.brand-anvil nav.plates.wide a:nth-of-type(2) img.nav-plate-img{width:149.1px;}
body.staged.brand-anvil nav.plates.wide a:nth-of-type(3) img.nav-plate-img{width:148.5px;}
body.staged.brand-anvil .page-logo{width:355.3px;height:202.6px;margin:0;position:absolute;left:556px;top:65.4px;}
body.staged.brand-anvil main{padding-top:0;position:static;}
body.staged.brand-anvil .stage{background-size:1440px 743.7px;background-position:0 66.3px;}
body.staged.brand-anvil .section,
body.staged.brand-anvil .section > .container{position:static;}

/* Home tagline - 32pt (48px) Libre Baskerville, centred, ALL CAPS, at (329.8, 374.5) */
body.staged.brand-anvil .staged-tagline{
  position:absolute;left:329.8px;top:374.5px;width:807.8px;
  font-size:48px;line-height:1.22;color:#EEEEEE;
  font-family:'Libre Baskerville',Georgia,serif;
  text-align:center;text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
/* About copy - 14pt (21px) Roboto bold, centred, at (465.5, 305.2) width 509.1 */
body.staged.brand-anvil .staged-copy{
  position:absolute;left:465.5px;top:305.2px;width:509.1px;
  font-size:21px;line-height:1.28;font-weight:700;color:#EEEEEE;
  font-family:'Roboto',Arial,sans-serif;text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}
body.staged.brand-anvil .staged-copy p{color:#EEEEEE;font-size:21px;line-height:1.28;margin:0 0 14px;}
body.staged.brand-anvil .staged-copy p:last-child{margin-bottom:0;}

/* Contact - heading 24pt (36px) #F5F5F5 at (372.0, 270.5); labels 18pt (27px)
   #F2F2F2. Field plates 290.3x36.3 on the same grid as the other brands. */
body.staged.brand-anvil .contact-heading{
  position:absolute;left:372px;top:270.5px;width:686.9px;margin:0;
  font-size:36px;line-height:1.2;font-weight:700;text-align:left;color:#F5F5F5;
  font-family:'Roboto',Arial,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.75);
}
body.staged.brand-anvil .contact-form--forged{
  position:absolute;left:216.1px;top:348px;width:1077.1px;margin:0;padding:0;display:block;
}
body.staged.brand-anvil .cf-grid{
  grid-template-columns:126.7px 290.3px 369.8px 290.3px;
  grid-auto-rows:78.3px;align-items:center;
}
body.staged.brand-anvil .cf-grid label{
  font-family:'Roboto',Arial,sans-serif;font-size:27px;line-height:1.2;font-weight:700;
  color:#F2F2F2;text-shadow:0 2px 8px rgba(0,0,0,.75);position:relative;top:-7.5px;
}
body.staged.brand-anvil .cf-grid label.cf-col2{padding-left:79.3px;}
body.staged.brand-anvil .cf-grid input,
body.staged.brand-anvil .cf-grid select{
  width:290.3px;height:36.3px;top:0;
  background-image:url('/images/anvil-field-plate.png');
  color:#1e1e1e;
}
body.staged.brand-anvil .contact-form--forged .btn{
  width:330px;height:46px;margin:10.1px auto 0;padding:0;font-size:14px;border-radius:3px;
}
body.staged.brand-anvil footer.site-footer .disclaimer{width:2118.8px;margin-left:-1059.4px;}

/* ================= Mobile / portrait (all staged brands) =================
   The desktop design is a locked 1440x810 canvas with everything absolutely
   positioned at deck coordinates. None of that survives a phone, so below
   1024px we unwind it completely and stack the page in normal flow. */
@media (max-width:1024px){
  body.staged{height:auto;overflow:visible;}
  body.staged.staged .stage-outer{position:static;display:block;overflow:visible;background:#000;}
  body.staged.staged .stage{
    width:auto;height:auto;min-height:0;transform:none;display:block;
    background-size:cover !important;background-position:center center !important;background-attachment:scroll !important;
  }
  /* header + nav collapse to the hamburger; plate images are desktop-only */
  body.staged.staged .site-header{height:auto;padding:10px 0;position:relative;}
  body.staged.staged .site-header > .container{padding:0 16px;justify-content:space-between;}
  body.staged.staged nav.plates.wide{width:100%;margin:0;}
  body.staged.staged nav.plates.wide a img.nav-plate-img{display:none !important;}

  /* logo: centred and sized to the screen */
  body.staged.staged .page-logo{
    position:static;left:auto;top:auto;
    width:min(70vw,320px);height:auto;margin:0 auto;display:block;
  }
  body.staged.staged main{padding-top:0 !important;}
  body.staged.staged main > .section{
    padding:22px 18px 30px;min-height:56vh;
    display:flex;flex-direction:column;justify-content:center;
  }
  body.staged.staged.page-contact main > .section,
  body.staged.staged.page-products main > .section,
  body.staged.staged.page-portfolio main > .section{min-height:0;display:block;}
  /* Black Forge's home hero is <section class="hero hero-minimal">, not .section,
     so it needs the same treatment or it collapses to content height. */
  body.staged.staged main > .hero{
    min-height:56vh;padding:22px 18px 30px;
    display:flex;flex-direction:column;justify-content:center;
  }
  body.staged.staged .section > .container{padding:0;}

  /* unwind every absolutely-placed block */
  body.staged.staged .staged-tagline,
  body.staged.staged .staged-copy,
  body.staged.staged .contact-heading,
  body.staged.staged .contact-form--forged,
  body.staged.staged .product-stage,
  body.staged.staged .product-quad,
  body.staged.staged .product-quad-items{
    position:static;left:auto;top:auto;right:auto;bottom:auto;
    width:auto;max-width:none;margin-left:0;margin-right:0;
  }
  body.staged.staged .staged-tagline{
    font-size:clamp(22px,7vw,34px);line-height:1.25;margin:26px auto 0;text-align:center;
  }
  body.staged.staged .staged-copy{margin:24px auto 0;text-align:center;}
  body.staged.staged .staged-copy p{font-size:clamp(15px,4.2vw,19px);line-height:1.5;margin:0 0 14px;}

  /* Black Forge home hero */
  body.staged.staged .hero-minimal-inner{padding:18px 16px 0;height:auto;}
  body.staged.staged .hero-minimal-logo{width:min(78vw,340px);}
  body.staged.staged .hero-minimal-tagline-img{width:min(72vw,300px);margin-top:26px;}

  /* Black Forge About / Portfolio */
  body.staged.staged .about-copy{width:auto;padding-top:20px;}
  body.staged.staged .about-copy p,
  body.staged.staged .about-core-list li{font-size:clamp(15px,4.2vw,18px);line-height:1.5;margin:0 0 14px;}
  body.staged.staged .portfolio-logo-stage{position:static;width:auto;height:auto;}
  body.staged.staged .portfolio-logo-tile{
    position:static !important;width:auto !important;height:auto !important;
    display:flex;align-items:center;justify-content:center;padding:14px 8px;
  }
  body.staged.staged .portfolio-logo-tile .portfolio-logo-img{max-height:80px;width:auto;}
  body.staged.staged .portfolio-logo-stage{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
  body.staged.staged .news-heading{font-size:clamp(20px,5.6vw,28px);margin:26px 0 0;text-align:center;}

  /* Fortress products */
  body.staged.staged .product-quad{margin:22px 0 0;}
  body.staged.staged .product-quad-title{font-size:clamp(17px,4.8vw,22px);white-space:normal;}
  body.staged.staged .product-quad-items{margin:8px 0 0;font-size:clamp(14px,4vw,17px);line-height:1.55;}

  /* contact: single column, full-width fields */
  body.staged.staged .contact-heading{font-size:clamp(20px,5.6vw,28px);margin:22px 0 0;text-align:center;}
  body.staged.staged .contact-form--forged{padding-top:10px !important;}
  body.staged.staged .cf-grid{display:block;}
  body.staged.staged .cf-grid label{
    display:block;width:auto;font-size:15px;line-height:1.3;margin:16px 0 6px;
    padding-left:0 !important;position:static;top:auto;white-space:normal;
  }
  body.staged.staged .cf-grid input,
  body.staged.staged .cf-grid select{
    width:100%;height:42px;position:static;top:auto;font-size:16px;
    background-size:100% 100%;
  }
  body.staged.staged .contact-form--forged .btn{width:100%;max-width:320px;height:48px;margin:22px auto 0;}
  body.staged.staged .contact-page .form-msg{width:auto;}

  /* footer: normal flow, readable disclaimer, badge centred */
  body.staged.staged .stage-footer{position:static;left:auto;width:auto;height:auto;transform:none;margin:0;flex:0 0 auto;}
  body.staged.staged footer.site-footer{padding:18px 16px 24px;}
  body.staged.staged footer.site-footer .disclaimer,
  body.staged.staged.brand-fortress footer.site-footer .disclaimer,
  body.staged.staged.brand-fusion footer.site-footer .disclaimer,
  body.staged.staged.brand-anvil footer.site-footer .disclaimer{
    position:static;width:auto;margin:0;transform:none;padding:14px 0;
    font-size:10px;line-height:1.5;
  }
  body.staged.staged .disclaimer p{font-size:10px;line-height:1.5;margin:0 0 8px;}
  body.staged.staged .copyright{font-size:10px;margin:0 0 8px;}
  body.staged.staged .disclaimer::before,
  body.staged.staged .disclaimer::after{width:180px;}
  body.staged.staged .footer-badge-link{
    position:static;transform:none;width:150px;height:auto;margin:6px auto 0;display:block;
  }
  body.staged.staged .footer-badge{width:100%;height:auto;}
}

/* Legal block: transparent to layout on desktop (keeps the measured positions
   exactly), collapsible on mobile where it would otherwise dominate. */
.disclaimer-legal{display:contents;}
.disclaimer-legal > summary{display:none;}
@media (max-width:1024px){
  body.staged.staged .disclaimer-legal{display:block;margin-top:8px;}
  body.staged.staged .disclaimer-legal > summary{
    display:inline-block;cursor:pointer;list-style:none;
    font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:#9a9a9d;padding:6px 10px;border:1px solid #3a3a3d;border-radius:3px;
  }
  body.staged.staged .disclaimer-legal > summary::-webkit-details-marker{display:none;}
  body.staged.staged .disclaimer-legal[open] > summary{margin-bottom:10px;}
  body.staged.staged .disclaimer-legal p{font-size:9px;line-height:1.45;margin:0 0 7px;}
}

/* ===================== Phones only (portrait, <=600px) =====================
   iPad portrait also lands in the <=1024px block above, and its layout is
   signed off, so nothing here may leak up to it. 600px is the cut: the widest
   iPhone is 430px, the narrowest iPad is 744px. */
@media (max-width:600px){
  /* iOS Safari: the document itself must not be draggable. overscroll-behavior
     alone is not enough - Safari still lets you pull the whole page and spring
     it back, which is what reads as the page "moving up and down under your
     thumb" even on a screen with nothing to scroll. Pinning the body with
     position:fixed removes the document from the scroll flow entirely, so a
     drag has nothing to grab. Anything that genuinely needs to scroll (an
     expanded Legal Disclosures panel) scrolls inside .stage-outer instead, and
     the page frame stays put. */
  html,body.staged.staged{overscroll-behavior:none;}
  html{height:100%;}
  body.staged.staged{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    overflow:hidden;
  }
  /* Fill the visible viewport exactly. svh is the viewport height with the
     browser chrome SHOWN, so the page can never be taller than what's visible;
     that stops Safari from retracting/expanding its toolbar as you drag.
     100vh is the fallback for anything without svh support. */
  body.staged.staged .stage-outer{
    display:flex;flex-direction:column;
    /* the base rule sets align-items:center, which would make the stage
       shrink-to-fit its content instead of spanning the screen */
    align-items:stretch;
    min-height:100vh;min-height:100svh;
    /* the only scroll container on the page, and only if content exceeds it */
    max-height:100%;overflow-y:auto;overscroll-behavior:none;
    -webkit-overflow-scrolling:touch;
  }
  /* The stage grows to absorb the slack, and main stretches inside it, so a
     page's content centres in the space rather than hugging the header. */
  body.staged.staged .stage{flex:1 0 auto;display:flex;flex-direction:column;}
  body.staged.staged .stage > main{flex:1 0 auto;display:flex;flex-direction:column;}
  body.staged.staged main > .section,
  body.staged.staged main > .hero{min-height:56svh;flex:1 0 auto;}

  /* --- Fitting the content pages into one screen ---
     Everything below is sized in svh, not stepped at height breakpoints. An
     earlier attempt used a <=750px-tall tier, which left a dead band at
     751-811px where About and Contact ran ~45px over - and that band is exactly
     where a real iPhone's Safari content area sits (the device screen is 844,
     but the usable viewport with the toolbars showing is ~745-800). Sizing
     against svh means the type and rhythm shrink continuously with the actual
     visible height, so there is no band to fall into.

     The contact and about rules apply to every staged brand - the markup is
     identical across all four, only the copy differs. Input font-size stays
     pinned at 16px - anything smaller makes iOS zoom the page on focus. */

  body.staged.staged main > .section,
  body.staged.staged main > .hero{
    padding:clamp(10px,1.7svh,22px) 18px clamp(12px,2.2svh,30px);
  }
  body.staged.staged .staged-tagline{margin-top:clamp(14px,3svh,26px);}
  body.staged.staged .hero-minimal-inner{padding-top:clamp(10px,2svh,18px);}
  body.staged.staged footer.site-footer{
    padding:clamp(9px,1.6svh,18px) 16px clamp(11px,2.2svh,24px);
  }
  /* Constrain the logo on BOTH axes. Width alone is not enough: Anvil's mark is
     much taller relative to its width than the others, and a width-only rule let
     it render 102px tall where Black Forge's is 29px. Auto width/height with two
     maxes keeps the aspect ratio and fits inside the box whichever axis binds. */
  body.staged.staged .page-logo{
    width:auto;height:auto;
    max-width:min(70vw,320px);
    max-height:clamp(26px,10svh,110px);
  }
  /* The footer is a fixed ~112px in the <=1024px rules - and ~179px on the three
     brands carrying the Black Forge badge - which is most of the budget on a
     short screen. Make its rhythm shrink with the viewport too. The brand
     variants are spelled out because the <=1024px rule qualifies them by brand,
     which out-specifies an unqualified selector here. */
  body.staged.staged footer.site-footer .disclaimer,
  body.staged.staged.brand-fortress footer.site-footer .disclaimer,
  body.staged.staged.brand-fusion footer.site-footer .disclaimer,
  body.staged.staged.brand-anvil footer.site-footer .disclaimer{
    padding:clamp(5px,1.1svh,14px) 0;
  }
  /* "Powered by Black Forge Capital" badge - Fortress/Fusion/Anvil only. */
  body.staged.staged .footer-badge-link{
    width:clamp(96px,19svh,150px);margin:clamp(2px,0.7svh,6px) auto 0;
  }
  /* On a short screen the badge's own line is worth ~50px, which is roughly what
     those three brands were running over. Sit it beside the copyright instead of
     beneath it; taller phones keep the stacked arrangement. */
  @media (max-height:680px){
    body.staged.staged footer.site-footer > .container{
      display:flex;align-items:center;justify-content:center;gap:10px;
    }
    body.staged.staged footer.site-footer > .container > .disclaimer{
      flex:1 1 auto;min-width:0;
    }
    body.staged.staged .footer-badge-link{
      flex:0 0 auto;width:clamp(76px,15svh,110px);margin:0;
    }
    /* Sitting the badge alongside narrows the disclaimer column, which wrapped
       the copyright onto a second line for the brands with longer legal names
       (Fortress Financial Partners LLC, Fusion Venture Partners LLC). One point
       smaller keeps it on one line and gives back 13px. */
    body.staged.staged .copyright{font-size:9px;}
  }
  body.staged.staged .copyright{line-height:1.3;margin:0 0 clamp(4px,0.8svh,8px);}
  body.staged.staged .disclaimer-legal{margin-top:clamp(4px,0.8svh,8px);}
  body.staged.staged .disclaimer-legal > summary{padding:clamp(4px,0.8svh,6px) 10px;}

  /* About. Black Forge's copy block is .about-copy; the three portfolio
     companies use .staged-copy from their decks. Both get the same treatment. */
  body.staged.staged.page-about main > .section{
    padding:clamp(7px,1.3svh,16px) 17px clamp(9px,1.6svh,18px);
  }
  body.staged.staged.page-about .about-copy{
    padding-top:clamp(3px,0.8svh,12px);
  }
  body.staged.staged.page-about .staged-copy{
    margin-top:clamp(8px,1.8svh,24px);
  }
  body.staged.staged.page-about .about-copy p,
  body.staged.staged.page-about .about-core-list li,
  body.staged.staged.page-about .staged-copy p{
    font-size:clamp(12.5px,min(4.1vw,1.83svh),18px);
    line-height:1.4;
    margin:0 0 clamp(5px,0.85svh,13px);
  }

  /* Portfolio: fits already, but the tiles sat top-aligned with the grown
     stage leaving dead space beneath. Centre them like every other page. */
  body.staged.staged.brand-blackforge.page-portfolio main > .section{
    display:flex;flex-direction:column;justify-content:center;
  }
  body.staged.staged.brand-blackforge.page-portfolio .portfolio-logo-tile{
    padding:clamp(6px,1.2svh,14px) 8px;
  }
  body.staged.staged.brand-blackforge.page-portfolio .portfolio-logo-tile .portfolio-logo-img{
    max-height:clamp(46px,8.6svh,80px);
  }
  /* Iron Oak and Bull & Bowl carry the same +25% here as on the canvas, so the
     two logos read the same relative size on a phone as they do on desktop. */
  body.staged.staged.brand-blackforge.page-portfolio .tile-ironoak .portfolio-logo-img,
  body.staged.staged.brand-blackforge.page-portfolio .tile-bullbowl .portfolio-logo-img{
    max-height:clamp(57.5px,10.75svh,100px);
  }

  /* Contact - all four brands share this markup. */
  body.staged.staged.page-contact main > .section{
    padding:clamp(5px,1svh,14px) 16px clamp(7px,1.3svh,16px);
  }
  /* the desktop rule sets line-height in px for the 1440 canvas (44.2px), which
     left a 15px heading sitting in 44px of leading */
  body.staged.staged.page-contact .contact-heading{
    font-size:clamp(15px,min(5.2vw,2.5svh),28px);
    line-height:1.2;
    margin-top:clamp(4px,1svh,12px);
  }
  body.staged.staged.page-contact .contact-form--forged{padding-top:0 !important;}
  body.staged.staged.page-contact .cf-grid label{
    font-size:clamp(12px,min(3.9vw,1.72svh),15px);
    line-height:1.2;
    /* the floors only bind on short screens; taller phones are unaffected.
       Fortress needs the extra px - its Roboto labels sit slightly taller. */
    margin:clamp(2px,0.85svh,10px) 0 clamp(1px,0.38svh,4px);
  }
  body.staged.staged.page-contact .cf-grid input,
  body.staged.staged.page-contact .cf-grid select{
    /* 4.3 rather than 4.5: six fields multiply the coefficient, so this is where
       a couple of svh buys the most. At 553px tall it recovers ~7px, which is
       what Fortress was over; on a big phone it costs 1.5px of field height. */
    height:clamp(27px,4.3svh,42px);
  }
  body.staged.staged.page-contact .contact-form--forged .btn{
    height:clamp(32px,5svh,48px);margin-top:clamp(5px,1.4svh,18px);
    width:min(100%,320px);
  }
  /* The success/error notice was sitting in normal flow on phones, so showing
     it added 69px and pushed the page into scrolling right after a visitor hit
     submit - on a 553px screen that ate all 43px of slack and then some.
     Overlay it instead, the way the desktop canvas already does. */
  body.staged.staged.page-contact .form-msg{
    position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);
    width:auto;max-width:none;margin:0;z-index:30;
  }

  /* Fortress Products: four title+list quadrants stacked on a phone. */
  body.staged.staged.page-products main > .section{
    padding:clamp(5px,1svh,14px) 16px clamp(7px,1.3svh,16px);
  }
  body.staged.staged.page-products .product-quad{
    margin:clamp(5px,1.6svh,22px) 0 0;
  }
  body.staged.staged.page-products .product-quad-title{
    font-size:clamp(12px,min(4.6vw,2svh),22px);line-height:1.2;white-space:normal;
  }
  body.staged.staged.page-products .product-quad-items{
    margin:clamp(1px,0.5svh,8px) 0 0;
    font-size:clamp(11px,min(3.8vw,1.62svh),17px);
    line-height:1.3;
  }
  body.staged.staged.page-products .product-quad-items li{
    margin:0 0 clamp(1px,0.25svh,4px);
  }
}

/* Contact status messages were sitting in normal flow at the top of the
   container, underneath the absolutely-positioned logo - so a visitor never
   saw "thank you". Float them over the form instead, above everything. */
body.staged .contact-page .form-msg{
  position:absolute;left:50%;top:196px;transform:translateX(-50%);
  width:760px;max-width:calc(100% - 36px);z-index:20;
  background:rgba(8,8,9,.88);border:1px solid rgba(255,255,255,.22);border-radius:4px;
  padding:12px 18px;text-align:center;font-size:16px;color:#fff;
}
@media (max-width:1024px){
  body.staged.staged .contact-page .form-msg{
    position:static;transform:none;width:auto;max-width:none;margin:12px 0 0;font-size:14px;
  }
}