/* Shout Labs — lab-dossier theme. Rendered Umbraco demo site. */
:root{
  --paper:#F1EDE2;
  --paper-2:#E7E2D3;
  --ink:#16130D;
  --muted:#6C6657;
  --hazard:#FF551F;
  --stamp:#BF3A2B;
  --line: rgba(22,19,13,.14);
  --line-2: rgba(22,19,13,.07);
  --maxw:1280px;
  --reticle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23FF551F' stroke-width='1.4'%3E%3Ccircle cx='14' cy='14' r='8'/%3E%3Cpath d='M14 0v6M14 22v6M0 14h6M22 14h6'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='1.4' fill='%23FF551F'/%3E%3C/svg%3E") 14 14, crosshair;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Archivo",sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:28px 28px;
  overflow-x:hidden;
}
::selection{background:var(--hazard); color:#fff}
a{color:inherit; text-decoration:none}
.mono{font-family:"Space Mono",monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}

/* One full-width horizontal band of the page, owned end-to-end by a single block.
   This was `section{padding:84px 0}` — a bare element selector, which was safe while
   home.cshtml was the only template and every <section> on the site was hand-placed.
   Now that any block partial may emit a <section>, an element selector would give two
   stacked blocks 168px of dead space between them. Opt in with class="band" instead.
   Declared here, ahead of the block-specific rules, so a band that wants different
   padding (.hero, below) simply says so later in the file and wins on source order. */
.band{padding:84px 0}

/* ---- engineering frame: crop marks + edge ticks ---- */
.frame{position:fixed; inset:14px; pointer-events:none; z-index:50; border:1px solid var(--line)}
.frame i{position:absolute; width:16px; height:16px; border:2px solid var(--hazard)}
.frame i:nth-child(1){top:-1px;left:-1px; border-right:0; border-bottom:0}
.frame i:nth-child(2){top:-1px;right:-1px; border-left:0; border-bottom:0}
.frame i:nth-child(3){bottom:-1px;left:-1px; border-right:0; border-top:0}
.frame i:nth-child(4){bottom:-1px;right:-1px; border-left:0; border-top:0}
.frame b{position:absolute; top:-1px; left:18%; font:700 9px/1 "Space Mono",monospace; letter-spacing:.18em; color:var(--muted); background:var(--paper); padding:0 8px; transform:translateY(-50%)}

/* ---- top status bar ---- */
.topbar{border-bottom:1px solid var(--line); font:700 11px/1 "Space Mono",monospace; letter-spacing:.14em; color:var(--muted)}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:34px; text-transform:uppercase}
.dot{display:inline-block; width:7px;height:7px;border-radius:50%; background:#3a9d4b; margin-right:7px; box-shadow:0 0 0 0 rgba(58,157,75,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,157,75,.5)}70%{box-shadow:0 0 0 7px rgba(58,157,75,0)}100%{box-shadow:0 0 0 0 rgba(58,157,75,0)}}

/* ---- header / nav ---- */
header{position:sticky; top:0; z-index:40; background:rgba(241,237,226,.86); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand .mk{font:400 30px/.8 "Anton",sans-serif; letter-spacing:.01em; text-transform:uppercase}
.brand .mk b{color:var(--hazard)}
.brand .sub{font:700 9px/1.3 "Space Mono",monospace; letter-spacing:.14em; color:var(--muted); border-left:1px solid var(--line); padding-left:12px; text-transform:uppercase}
nav{display:flex; align-items:center; gap:30px}
nav a{font:700 12px/1 "Space Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); position:relative; padding:6px 0; cursor:var(--reticle)}
nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--hazard); transition:width .25s}
nav a:hover{color:var(--ink)} nav a:hover::after{width:100%}
.btn{font:700 12px/1 "Space Mono",monospace; letter-spacing:.1em; text-transform:uppercase; padding:13px 20px; cursor:var(--reticle); border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); display:inline-flex; align-items:center; gap:10px; transition:transform .12s, background .2s, color .2s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--hazard)}
.btn--hazard{background:var(--hazard); border-color:var(--hazard); color:#fff}
.btn--hazard:hover{box-shadow:4px 4px 0 var(--ink)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--hazard)}

/* ---- hero ---- */
.hero{padding:64px 0 40px; position:relative}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center}
.kicker{font:700 11px/1 "Space Mono",monospace; letter-spacing:.2em; color:var(--hazard); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:22px}
.kicker::before{content:""; width:34px; height:1px; background:var(--hazard)}
h1{font:400 clamp(54px,8.2vw,108px)/.92 "Anton",sans-serif; letter-spacing:.005em; text-transform:uppercase; margin:0 0 26px}
h1 .o{color:var(--hazard)}
h1 .out{-webkit-text-stroke:2px var(--ink); color:transparent}
.lead{font-size:17px; color:#332f26; max-width:34ch; margin:0 0 30px}
.specs{display:flex; gap:0; border:1px solid var(--line); margin:0 0 30px; max-width:480px}
.specs div{flex:1; padding:12px 14px; border-right:1px solid var(--line)}
.specs div:last-child{border-right:0}
.specs .n{font:400 26px/1 "Anton",sans-serif}
.specs .l{font:700 9px/1.3 "Space Mono",monospace; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; margin-top:6px}
.specs .red{color:var(--stamp)}
.cta-row{display:flex; gap:14px; flex-wrap:wrap}

/* hero reveal */
.reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.2s}
@keyframes rise{to{opacity:1; transform:none}}

/* schematic panel */
.schematic{position:relative; border:1.5px solid var(--ink); background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--line-2) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--line-2) 27px 28px), var(--paper); aspect-ratio:1/1; box-shadow:6px 6px 0 var(--paper-2), 6px 6px 0 1.5px var(--ink)}
.schematic .tag{position:absolute; top:10px; left:10px; font:700 9px/1 "Space Mono",monospace; letter-spacing:.14em; color:var(--muted); text-transform:uppercase}
.schematic .warn{position:absolute; top:10px; right:10px; font:700 9px/1.4 "Space Mono",monospace; letter-spacing:.05em; color:var(--stamp); text-align:right; text-transform:uppercase}
.schematic svg{position:absolute; inset:0; width:100%; height:100%}
.scan{transform-origin:center; animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scanline{animation:sweep 3.6s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateY(0); opacity:.0}10%{opacity:.9}50%{transform:translateY(330px); opacity:.9}90%{opacity:0}}
/* title block */
.titleblock{position:absolute; right:-1.5px; bottom:-1.5px; border:1.5px solid var(--ink); background:var(--paper); display:grid; grid-template-columns:repeat(2,minmax(74px,1fr))}
.titleblock span{padding:5px 9px; border-right:1px solid var(--line); border-top:1px solid var(--line); font:700 8px/1.3 "Space Mono",monospace; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
.titleblock span b{display:block; color:var(--ink); font-weight:700; font-size:10px; margin-top:2px}
.titleblock span:nth-child(2n){border-right:0}

/* hazard tape divider */
.tape{height:14px; background:repeating-linear-gradient(45deg, var(--ink) 0 14px, var(--hazard) 14px 28px); opacity:.92}

/* ---- incident ticker ---- */
.ticker{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; display:flex; align-items:center; border-top:0}
.ticker .label{flex:0 0 auto; background:var(--hazard); color:#fff; font:700 11px/1 "Space Mono",monospace; letter-spacing:.16em; padding:13px 18px; text-transform:uppercase; z-index:2}
.ticker .track{display:inline-flex; gap:48px; padding-left:48px; animation:marq 34s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .track span{font:700 12px/1 "Space Mono",monospace; letter-spacing:.04em; padding:13px 0; text-transform:uppercase}
.ticker .track span::before{content:"\25E6  "; color:var(--hazard)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- section heading ---- */
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; border-bottom:1.5px solid var(--ink); padding-bottom:16px}
.shead .idx{font:700 11px/1 "Space Mono",monospace; letter-spacing:.16em; color:var(--hazard); text-transform:uppercase; margin-bottom:10px}
.shead h2{font:400 clamp(30px,4.4vw,52px)/.95 "Anton",sans-serif; text-transform:uppercase; margin:0; letter-spacing:.01em}
.shead p{font:700 11px/1.5 "Space Mono",monospace; letter-spacing:.06em; color:var(--muted); max-width:30ch; text-align:right; text-transform:uppercase}

/* ---- divisions ---- */
/* Column count is a field on divisionsGridBlock, so the partial sets --cols inline.
   The fallback is the 2 the design was drawn at. */
.divs{display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:0; border:1px solid var(--ink); overflow:hidden}

/* Cell dividers, drawn in a way that survives ANY number of divisions.
   The scheme this replaces was `.div:nth-child(2n){border-right:0}` plus
   `.div:nth-child(n+3){border-bottom:0}` — border arithmetic that only produces a clean
   edge for exactly four cards in exactly two columns. Divisions are editable pages now,
   so a fifth one is a single click and that arithmetic would draw a double line down the
   middle and leave the last row unbordered.
   Instead: every cell draws only its TOP and LEFT edge and is pulled back 1px, so the
   first row's and first column's borders land outside the container's padding box and are
   clipped away by overflow:hidden. The container's own 1px border supplies the outer edge.
   Grid stretch resolves the negative margins by making each item 1px larger, so cells
   still meet flush at the far edge — nothing overflows the bottom or right. */
.divs > *{border-left:1px solid var(--line); border-top:1px solid var(--line); margin-left:-1px; margin-top:-1px}

/* The card partial wraps the whole card in a link to the division page. Flex so the card
   inside fills the full height of its grid cell — otherwise the hover background stops
   short in any row where another card is taller. */
.divs > a{display:flex; flex-direction:column; color:inherit}
.divs > a > .div{flex:1 1 auto; width:100%}

.div{padding:34px; position:relative; transition:background .2s}
.div:hover{background:var(--paper-2)}
.div .no{font:700 11px/1 "Space Mono",monospace; letter-spacing:.16em; color:var(--muted)}
.div .ic{width:46px; height:46px; margin:18px 0 16px}
.div .ic svg{width:100%; height:100%; stroke:var(--ink); fill:none; stroke-width:1.4}
.div h3{font:400 26px/1 "Anton",sans-serif; text-transform:uppercase; margin:0 0 6px; letter-spacing:.01em}
.div .qn{font:700 10px/1 "Space Mono",monospace; letter-spacing:.12em; color:var(--hazard); text-transform:uppercase}
.div p{font-size:14.5px; color:#3a362c; margin:14px 0 0; max-width:36ch}
.div .clr{position:absolute; top:34px; right:34px; font:700 9px/1 "Space Mono",monospace; letter-spacing:.1em; padding:5px 9px; border:1px solid currentColor; text-transform:uppercase}
.clr-amber{color:#B26A00}.clr-orange{color:var(--hazard)}.clr-red{color:var(--stamp)}

/* Note cards put the badge IN FLOW instead of pinning it to the corner. A
   division's heading is short and sits below an icon, so a corner badge clears
   it; a note's heading IS the note text, runs the full width and collided with
   it. Reference left, status right, heading underneath at full width. Same
   .clr component and the same amber/orange/red vocabulary — only the placement
   differs. Must follow `.div .clr` in source order: equal specificity. */
.div--log .loghead{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px}
.logstat{font:700 9px/1 "Space Mono",monospace; letter-spacing:.1em; padding:5px 9px; border:1px solid currentColor; text-transform:uppercase; flex:0 0 auto; white-space:nowrap}
.div--log h3{margin:0 0 10px}

/* ---- catalogue (case files) ---- */
.cat{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* Same story as .divs: the column count is a catalogueGridBlock field, set inline as
   --cols, falling back to the 3 the design was drawn at. */
.files{display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:18px}
/* Product cards wrap in a link to the product page; keep them the full height of the row
   so a short description does not leave a card floating above its neighbours. */
.files > a{display:flex; flex-direction:column; color:inherit}
.files > a > .file{flex:1 1 auto; width:100%}
.file{background:var(--paper); border:1.5px solid var(--ink); padding:20px; position:relative; overflow:hidden; transition:transform .14s}
.file:hover{transform:translateY(-4px); box-shadow:7px 9px 0 var(--paper-2), 7px 9px 0 1.5px var(--ink)}
.file .fno{font:700 10px/1 "Space Mono",monospace; letter-spacing:.12em; color:var(--muted)}
.file h4{font:400 23px/.98 "Anton",sans-serif; text-transform:uppercase; margin:14px 0 8px; max-width:11ch}
.file .desc{font-size:13.5px; color:#3a362c; min-height:42px}
.file .row{display:flex; justify-content:space-between; gap:8px; font:700 9.5px/1.4 "Space Mono",monospace; letter-spacing:.04em; color:var(--muted); border-top:1px dashed var(--line); padding-top:9px; margin-top:14px; text-transform:uppercase}
.file .foot{display:flex; justify-content:space-between; align-items:center; margin-top:14px}
.file .status{font:700 9px/1 "Space Mono",monospace; letter-spacing:.1em; padding:5px 9px; background:var(--ink); color:var(--paper); text-transform:uppercase}
.file .price{font:400 22px/1 "Anton",sans-serif}
.stamp{position:absolute; top:14px; right:-6px; font:700 11px/1 "Space Mono",monospace; letter-spacing:.14em; color:var(--stamp); border:2px solid var(--stamp); padding:4px 8px; transform:rotate(7deg); opacity:.78; text-transform:uppercase; border-radius:2px}
.file:hover .stamp{color:#1f7a3a; border-color:#1f7a3a}
.file:hover .stamp::after{content:"DE";}
.file:hover .stamp .c{display:none}

/* ---- request CTA ---- */
.req{background:var(--ink); color:var(--paper); position:relative; overflow:hidden}
.req::before{content:""; position:absolute; inset:0; background:
   radial-gradient(120% 120% at 100% 0%, rgba(255,85,31,.20), transparent 55%);}
.req .wrap{position:relative; text-align:center; padding:24px 32px}
.req .k{font:700 11px/1 "Space Mono",monospace; letter-spacing:.2em; color:var(--hazard); text-transform:uppercase; margin-bottom:20px}
.req h2{font:400 clamp(34px,5.4vw,68px)/.95 "Anton",sans-serif; text-transform:uppercase; margin:0 0 18px; letter-spacing:.01em}
.req h2 .o{color:var(--hazard)}
.req p{font:700 11px/1.6 "Space Mono",monospace; letter-spacing:.06em; color:#b8b2a4; max-width:46ch; margin:0 auto 30px; text-transform:uppercase}
.req .btn{background:var(--hazard); border-color:var(--hazard); color:#fff; font-size:13px; padding:16px 26px}
.req .btn:hover{box-shadow:5px 5px 0 var(--paper)}

/* ---- requisition form (Umbraco Forms in the dark request band) ---- */
.reqform{max-width:560px; margin:10px auto 0; text-align:left}
.reqform .umbraco-forms-field{margin-bottom:18px}
.reqform label{display:block; font:700 10px/1.4 "Space Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:#d8d2c4; margin-bottom:8px}
.reqform .umbraco-forms-tooltip,.reqform .help-block,.reqform small{display:block; font:400 11px/1.45 "Space Mono",monospace; color:#9a9486; margin-top:5px; text-transform:none; letter-spacing:0}
.reqform input[type=text],.reqform input[type=email],.reqform input[type=tel],.reqform textarea{
  width:100%; background:var(--paper); border:1.5px solid var(--ink); color:var(--ink);
  font:400 15px/1.45 "Archivo",sans-serif; padding:12px 14px; border-radius:0; outline:none}
.reqform input:focus,.reqform textarea:focus{box-shadow:3px 3px 0 var(--hazard)}
.reqform textarea{min-height:120px; resize:vertical}
.reqform .field-validation-error,.reqform .validation-summary-errors,.reqform .umbraco-forms-field.error label{color:#ff9a7a}
.reqform .field-validation-error{display:block; font:700 10px/1.4 "Space Mono",monospace; letter-spacing:.04em; text-transform:uppercase; margin-top:6px}
.reqform button,.reqform input[type=submit],.reqform .umbraco-forms-navigation input{
  font:700 12px/1 "Space Mono",monospace; letter-spacing:.1em; text-transform:uppercase; padding:14px 24px;
  cursor:var(--reticle); border:1.5px solid var(--hazard); background:var(--hazard); color:#fff; transition:transform .12s, box-shadow .2s}
.reqform button:hover,.reqform input[type=submit]:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--paper)}
.reqform .umbraco-forms-submitmessage{font:700 13px/1.6 "Space Mono",monospace; color:#a9e6b5; text-transform:uppercase; letter-spacing:.04em}

/* ---- footer ---- */
footer{border-top:1.5px solid var(--ink); padding:46px 0 30px}
footer .grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:34px}
footer .mk{font:400 28px/.85 "Anton",sans-serif; text-transform:uppercase}
footer .mk b{color:var(--hazard)}
footer .blurb{font:700 10px/1.6 "Space Mono",monospace; letter-spacing:.04em; color:var(--muted); max-width:30ch; margin-top:14px; text-transform:uppercase}
footer h5{font:700 10px/1 "Space Mono",monospace; letter-spacing:.14em; color:var(--ink); text-transform:uppercase; margin:0 0 16px}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:10px}
footer li a{font:700 11px/1 "Space Mono",monospace; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; cursor:var(--reticle)}
footer li a:hover{color:var(--hazard)}
.fbar{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:18px; font:700 9.5px/1.4 "Space Mono",monospace; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; gap:16px; flex-wrap:wrap}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:36px}
  .schematic{max-width:440px}
  /* Overrides the --cols rules above on source order: a 3-column catalogue authored for
     desktop must still collapse on a phone, whatever the editor typed. */
  .divs,.files{grid-template-columns:1fr}
  .files{display:grid; grid-template-columns:1fr 1fr}
  nav .nlink{display:none}
  footer .grid{grid-template-columns:1fr 1fr}
  .shead{flex-direction:column; align-items:flex-start} .shead p{text-align:left}
}
@media(max-width:600px){ .files{grid-template-columns:1fr} .specs{flex-wrap:wrap} .topbar .hide-sm{display:none} }