/* Citadel Wire Systems — company site.
   World: the Citadel Menu label kit (label stock, liner-gray roll, charcoal marker, CWS blue).
   Signature: the cable run. One blue line carries the page from the first walkthrough to the last drop. */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600.woff2) format('woff2')}

:root{
  color-scheme:light;
  --paper:#FFFFFF; --backing:#ECEDEF; --backing-2:#E2E4E8; --rule:#D3D6DB; --tape-edge:#C9CED6;
  --ink:#1E2126; --ink-2:#3B4049; --ink-3:#5C626C; --chalk:#E8EAEE; --fog:#C4C9D1;
  --blue:#1649FF; --blue-deep:#0E35C4; --blue-wash:#E8EDFF;
  --breakfast:#F2B90F; --lunch:#EE6A1B; --notyet:#8A5A00; --fail:#C42727;
  --label:'Barlow Condensed','Arial Narrow',sans-serif;
  --read:'Barlow','Helvetica Neue',Arial,sans-serif;
  --gutter:max(20px, env(safe-area-inset-left,0px));
  --gutter-r:max(20px, env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,1,.3,1);
  /* the cable */
  --cable:4px; --rail-x:18px; --indent:124px;
  --sh-label:0 1px 2px rgba(20,24,32,.14), 0 0 0 1px rgba(20,24,32,.04);
  --sh-tape:0 1px 3px rgba(20,24,32,.08);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--read); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
::selection{background:var(--blue); color:#fff}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
::placeholder{color:#6B717B; opacity:1}
html{scrollbar-color:#9AA0AA var(--backing)}
img,svg{display:block; max-width:100%}
a{color:var(--blue-deep); text-decoration-thickness:2px; text-underline-offset:4px}
a:hover{color:var(--blue)}
a[href^="tel:"]{white-space:nowrap}
.inner{max-width:1240px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
h1,h2,h3{font-family:var(--label); text-transform:uppercase; font-weight:800; margin:0; text-wrap:balance}
h1{font-size:clamp(52px,7.8vw,96px); line-height:.88; letter-spacing:-.01em}
h2{font-size:clamp(38px,5vw,64px); line-height:.92; letter-spacing:-.005em}
h3{font-size:24px; line-height:1.05; letter-spacing:.02em}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0}
.lead{font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--ink-2); max-width:56ch}
.small{font-size:14px; line-height:1.45; color:var(--ink-3)}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; z-index:50; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; text-decoration:none}
.skip:focus{top:12px; color:#fff}
.skip:hover{color:#fff; background:var(--blue-deep)}

/* ---------- brand ---------- */
.brand{display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; white-space:nowrap}
.brand svg{width:48px; height:auto; flex:none}
.brand span{font:800 21px/1 var(--label); letter-spacing:.05em; text-transform:uppercase}
.brand:hover{color:var(--ink)}
.brand .short{display:none}

/* ---------- label-roll navigation ---------- */
.roll{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--backing); border-bottom:1px solid var(--rule)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); background:var(--backing); z-index:31}
.roll .bar{display:flex; align-items:center; gap:14px; min-height:68px}
.nav{display:flex; align-items:center; gap:8px; margin-left:auto}
.labels{display:flex; gap:8px; list-style:none; align-items:center}
.lab{display:inline-flex; align-items:center; gap:6px; background:var(--paper); color:var(--ink); text-decoration:none; border:0; border-radius:7px; padding:10px 14px 9px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; box-shadow:var(--sh-label); cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s}
.lab:hover{transform:translateY(-1px); box-shadow:0 3px 8px rgba(20,24,32,.16), 0 0 0 1px rgba(20,24,32,.05); color:var(--ink)}
.lab[aria-current="page"], .lab.is-current{background:var(--ink); color:#fff; box-shadow:none}
.lab svg{width:10px; height:10px; transition:transform .2s var(--ease)}
.has-menu{position:relative}
.has-menu.open > .lab svg{transform:rotate(180deg)}
.submenu{position:absolute; top:calc(100% + 10px); left:0; width:330px; background:var(--paper); border-radius:9px; padding:8px; list-style:none; box-shadow:0 2px 4px rgba(20,24,32,.1), 0 18px 40px -18px rgba(20,24,32,.45), 0 0 0 1px rgba(20,24,32,.05); display:none}
.has-menu.open .submenu{display:block}
.no-js .has-menu:focus-within .submenu{display:block}
.submenu a{display:block; padding:12px 12px 11px; border-radius:6px; color:var(--ink); text-decoration:none}
.submenu a:hover,.submenu a:focus-visible{background:var(--backing)}
.submenu a[aria-current="page"]{background:var(--ink); color:#fff}
.submenu b{display:block; font:800 17px/1.1 var(--label); letter-spacing:.06em; text-transform:uppercase}
.submenu small{display:block; margin-top:3px; font:500 14px/1.35 var(--read); color:var(--ink-3)}
.submenu li + li.all{border-top:1px solid var(--rule); margin-top:6px; padding-top:6px}
.tel{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font:700 15px/1 var(--label); letter-spacing:.08em; white-space:nowrap; padding:10px 6px}
.tel svg{width:16px; height:16px; color:var(--blue)}
.tel:hover{color:var(--blue-deep)}
.pill{display:inline-flex; align-items:center; gap:10px; background:var(--blue); color:#fff; text-decoration:none; border-radius:999px; padding:10px 18px 10px 10px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:background .2s var(--ease), transform .2s var(--ease)}
.pill i,.quick i{position:relative; width:18px; height:18px; border-radius:4px; background:#fff; flex:none}
.pill i::after,.quick i::after{content:""; position:absolute; left:5px; right:5px; top:6px; height:5px; border-radius:1px; background:var(--blue)}
.pill:hover{background:var(--blue-deep); color:#fff}
.pill:active{transform:scale(.97)}
.menu-btn{display:none; align-items:center; gap:8px; background:var(--paper); color:var(--ink); border:0; border-radius:7px; padding:10px 12px 9px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--sh-label); cursor:pointer}
.menu-btn svg{width:16px; height:16px}

/* ---------- buttons and links ---------- */
.actions{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--ink); color:#fff; text-decoration:none; border:0; border-radius:999px; padding:16px 26px 15px; font:700 17px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease)}
.btn:hover{background:var(--blue); color:#fff}
.btn:active{transform:scale(.97)}
.btn svg{width:16px; height:16px}
.btn[disabled]{background:var(--ink-3); cursor:progress; transform:none}
.link{font-weight:600; color:var(--ink); text-decoration-color:var(--blue)}
.link:hover{color:var(--blue-deep)}
.more{display:inline-flex; align-items:center; gap:8px; font:700 16px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid var(--blue)}
.more svg{width:14px; height:14px; transition:transform .2s var(--ease)}
.more:hover{color:var(--blue-deep)}
.more:hover svg{transform:translateX(3px)}

/* ---------- label tape ---------- */
.tape{display:inline-block; background:var(--paper); border:1px solid var(--tape-edge); border-radius:5px; padding:9px 12px 10px; font:500 14px/1.35 var(--read); color:var(--ink-2); box-shadow:var(--sh-tape); text-align:left}
.tape b{display:block; font:800 16px/1.1 var(--label); letter-spacing:.07em; text-transform:uppercase; color:var(--ink)}
.tape a{color:var(--ink); text-decoration:none}
.tape a:hover{color:var(--blue-deep)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,80px) 0}
.hero-top{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end}
.hero .lead{margin-bottom:26px}
.callnote{margin-top:16px}
.callnote a{color:var(--ink); font-weight:600; text-decoration-color:var(--blue)}

/* the start of the cable: a tape on the rail, with the cable leaving it */
.start{position:relative; margin-top:clamp(32px,4vw,52px); padding-left:calc(var(--rail-x) + 22px); height:clamp(52px,5vw,64px)}
.run .drop:first-child{padding-top:clamp(16px,2vw,28px)}
.start::before{content:""; position:absolute; left:var(--rail-x); top:14px; bottom:0; width:var(--cable); border-radius:2px 2px 0 0; background:var(--blue)}
.start .jack{position:absolute; left:calc(var(--rail-x) - 8px); top:4px}
.start .tape{position:relative; top:-2px}

/* ---------- the cable run ---------- */
.run{position:relative}
.drop{position:relative; display:grid; grid-template-columns:var(--indent) minmax(0,1.12fr) minmax(0,.88fr); column-gap:clamp(28px,4vw,64px); row-gap:20px; padding-block:clamp(36px,4.5vw,60px); --h2:clamp(38px,4.8vw,62px); --p:1}
.drop > *{min-width:0}
/* track and fill: one segment per drop, so the cable is continuous down the run */
.drop::before,.drop::after{content:""; position:absolute; left:var(--rail-x); top:0; bottom:0; width:var(--cable)}
.drop::before{background:var(--rule)}
.drop::after{background:var(--blue); transform-origin:top; transform:scaleY(var(--p))}
.drop.last::before,.drop.last::after{bottom:auto; height:calc(clamp(36px,4.5vw,60px) + var(--h2) * .46); border-radius:0 0 2px 2px}
.drop .connector{grid-column:1; grid-row:1; position:relative; height:calc(var(--h2) * .92); display:flex; align-items:center; padding-left:var(--rail-x)}
.connector .branch{flex:1; height:var(--cable); background:var(--blue); margin-right:-1px; transition:background .35s var(--ease)}
.connector .tag{flex:none; background:var(--paper); border:1px solid var(--blue); border-radius:5px; padding:6px 9px 5px; font:800 16px/1 var(--label); letter-spacing:.07em; color:var(--blue-deep); box-shadow:var(--sh-tape); transition:color .35s var(--ease), border-color .35s}
.jack{position:absolute; left:calc(var(--rail-x) - 8px); width:20px; height:20px; border-radius:4px; background:var(--blue); box-shadow:inset 0 0 0 3px var(--blue); transition:background .35s var(--ease), box-shadow .35s var(--ease); z-index:1}
.jack::after{content:""; position:absolute; left:6px; right:6px; top:7px; height:5px; border-radius:1px; background:#fff; transition:background .35s}
.connector .jack{top:calc(50% - 10px)}
/* while the run animates, a drop stays unlit until the cable reaches it */
.run-anim .drop:not(.live) .connector .branch{background:var(--rule)}
.run-anim .drop:not(.live) .connector .tag{color:var(--ink-3); border-color:var(--tape-edge)}
.run-anim .drop:not(.live) .jack{background:var(--paper); box-shadow:inset 0 0 0 3px var(--rule)}
.run-anim .drop:not(.live) .jack::after{background:var(--rule)}
.drop h2{grid-column:2; grid-row:1; font-size:var(--h2)}
.drop .body{grid-column:2; grid-row:2; display:grid; gap:22px; align-content:start}
.drop .side{grid-column:3; grid-row:1 / span 2; align-self:start}
.drop[aria-labelledby="n2"],.drop[aria-labelledby="installation-h"]{grid-template-rows:auto 1fr}
.drop[aria-labelledby="network-h"],.drop[aria-labelledby="security-h"],.drop[aria-labelledby="s1"],.drop[aria-labelledby="s5"],.drop[aria-labelledby="work-h"]{grid-template-rows:auto 1fr}
/* Home's last drop: "Rather call?" starts level with the first form row, however the title and lead wrap. The lead's 2px keeps the form's 22px gap in rows that sit 20px apart. */
@media (min-width:1001px){
  .drop[aria-labelledby="project-h"] .body{display:contents}
  .drop[aria-labelledby="project-h"] .lead{grid-column:2; grid-row:2; margin-bottom:2px}
  .drop[aria-labelledby="project-h"] .form-wrap{grid-column:2; grid-row:3}
  .drop[aria-labelledby="project-h"] .side{grid-row:3}
}
.drop .lead{max-width:50ch}
.drop .status{display:inline-flex; align-items:center; gap:8px; margin-left:4px; vertical-align:.32em; background:var(--paper); border:1.5px dashed var(--ink-3); border-radius:999px; padding:6px 12px 5px; font:700 14px/1 var(--label); letter-spacing:.08em; color:var(--ink-2); white-space:nowrap}

/* what we handle: square jack bullets, never dots */
.handles{list-style:none; display:grid; gap:10px; max-width:58ch}
.handles li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:14px; align-items:baseline}
.handles li::before{content:""; width:10px; height:10px; border-radius:2px; background:var(--blue); transform:translateY(-1px)}
.handles b{font-weight:600; color:var(--ink)}
.handles.two{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:36px; max-width:none}
.bound{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:baseline; font-size:15px; line-height:1.5; color:var(--ink-2); max-width:58ch; padding-top:16px; border-top:1px solid var(--rule)}
.bound b{font:800 14px/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.bound.not b{color:var(--fail)}

/* ---------- photo slots ---------- */
.shot{margin:0; display:grid; gap:10px}
.shot .frame{position:relative; aspect-ratio:var(--ratio,4/3); border-radius:9px; overflow:hidden; background:var(--backing)}
.shot img{width:100%; height:100%; object-fit:cover}
.shot video{display:block; width:100%; height:100%; object-fit:contain}
.shot video:focus-visible{outline-offset:-3px}
.drop[aria-labelledby="s5"] .shot img{object-fit:contain}
.shot.todo .frame{background:var(--backing); outline:1.5px dashed var(--tape-edge); outline-offset:-10px}
.shot.todo .frame svg{position:absolute; left:50%; top:44%; width:44px; height:44px; transform:translate(-50%,-50%); color:#9AA0AA}
.shot.todo .tape{position:absolute; left:16px; bottom:16px; right:16px; max-width:max-content}
.shot.todo .tape b{color:var(--ink-3); font-size:14px}
.shot figcaption{font-size:14px; line-height:1.4; color:var(--ink-3)}
.shots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}

/* ---------- Citadel Menu sample (inside drop 04 and on its page) ---------- */
.cm-card{background:var(--paper); border-radius:14px; padding:clamp(20px,2.4vw,30px); box-shadow:0 1px 2px rgba(20,24,32,.1), 0 24px 50px -28px rgba(20,24,32,.45), 0 0 0 1px rgba(20,24,32,.05); display:grid; gap:20px}
.cm-card .lockup{width:min(260px,80%); height:auto}
.cm-line{position:relative; display:flex; align-items:center; gap:14px; padding:16px 0 4px; border-top:1px solid var(--rule)}
.cm-line .d{flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font:800 13px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--blue); box-shadow:0 2px 3px rgba(20,24,32,.16), 0 8px 18px -8px rgba(20,24,32,.35), inset 0 0 0 4px rgba(255,255,255,.28)}
.cm-line .tape{white-space:normal; border:0; box-shadow:none; background:none; padding:0}
.cm-line em{font-style:normal; font-weight:600; color:var(--blue-deep)}

/* ---------- last drop: the inquiry ---------- */
.form{display:grid; gap:16px; max-width:640px}
.form .row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.field{display:grid; gap:7px}
.field label{font:700 15px/1.1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink)}
.field label span{font:500 14px/1 var(--read); letter-spacing:0; text-transform:none; color:var(--ink-3); margin-left:6px}
.field input,.field select,.field textarea{width:100%; font:400 17px/1.4 var(--read); color:var(--ink); background:var(--paper); border:1.5px solid #8E949E; border-radius:7px; padding:12px 14px; min-height:50px; transition:border-color .15s, box-shadow .15s; caret-color:var(--blue)}
.field textarea{min-height:120px; resize:vertical}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231E2126' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px; padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue); outline:3px solid rgba(22,73,255,.28); outline-offset:0}
.field.invalid input,.field.invalid textarea{border-color:var(--fail)}
.field .err{display:none; font-size:14px; color:var(--fail); font-weight:500}
.field.invalid .err{display:block}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .submit{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center}
.form .note{font-size:14px; color:var(--ink-3); max-width:44ch}
.form-msg{display:none; border-radius:9px; padding:18px 20px; font-size:16px; line-height:1.5}
.form-msg b{display:block; font:800 20px/1.1 var(--label); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
.form-msg.show{display:block; max-width:640px; margin-bottom:24px}
.form-msg.error{background:#FBEAEA; color:#5E1414; box-shadow:inset 0 0 0 1.5px var(--fail)}
.form-msg.error b{color:var(--fail)}
.form-msg.error a{color:#5E1414; font-weight:600}
.form-msg.done{background:var(--blue-wash); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--blue)}
.form-msg.done b{color:var(--blue-deep)}

.next{list-style:none; counter-reset:n; display:grid; gap:0; border-top:3px solid var(--ink)}
.next li{counter-increment:n; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--rule)}
.next li::before{content:counter(n); width:32px; height:32px; border-radius:5px; display:grid; place-items:center; font:800 17px/1 var(--label); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.next li:last-child::before{background:var(--blue); color:#fff; box-shadow:none}
.next b{display:block; font:800 19px/1.1 var(--label); letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px}
.next p{font-size:15px; line-height:1.5; color:var(--ink-2)}
.contacts{display:grid; gap:12px; margin-top:24px}
.contacts .tape{font-size:15px}
.contacts .tape{display:block}
.contacts .tape a{display:block; font:700 clamp(18px,1.7vw,22px)/1.25 var(--read); color:var(--ink); letter-spacing:.005em; overflow-wrap:anywhere}
.contacts .tape a:hover{color:var(--blue-deep)}
.side-head{font:800 22px/1 var(--label); letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px}

/* ---------- inner pages ---------- */
.page-head{padding-block:clamp(40px,6vw,80px) 0}
.page-head .hero-top{align-items:start}
.page-head .lead + .actions{margin-top:26px}
.page-head h1{font-size:clamp(48px,7vw,88px)}
.crumb{display:flex; gap:8px; align-items:center; margin-bottom:18px; font:700 14px/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--blue-deep)}
.prose{max-width:68ch; display:grid; gap:18px; color:var(--ink-2)}
.prose h2{font-size:clamp(28px,3vw,36px); line-height:1; color:var(--ink); margin-top:22px}
.prose ul{padding-left:20px; display:grid; gap:6px}

/* scope sheet: who handles what */
.sheet-wrap{overflow-x:auto; margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); padding-inline:var(--gutter) var(--gutter-r)}
.sheet{width:100%; min-width:640px; border-collapse:collapse; background:var(--paper); font:500 16px/1.35 var(--read)}
.sheet caption{caption-side:bottom; text-align:left; padding-top:14px; font-size:14px; color:var(--ink-3)}
.sheet th{font:800 15px/1.1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:0 10px 12px; border-bottom:3px solid var(--ink); vertical-align:bottom}
.sheet th:first-child{text-align:left; padding-left:0}
.sheet td{padding:14px 10px; border-bottom:1px solid var(--rule); text-align:center; color:var(--ink-2)}
.sheet td:first-child{text-align:left; padding-left:0; color:var(--ink); font-weight:600}
.sheet td small{display:block; font-weight:400; font-size:14px; color:var(--ink-3)}
.sheet .x{display:inline-block; width:16px; height:16px; border-radius:3px; background:var(--blue); vertical-align:middle}
.sheet .x.o{background:transparent; box-shadow:inset 0 0 0 2.5px var(--ink-3)}
.sheet tr.theirs td:first-child{color:var(--ink-2)}

/* bands */
.band{background:var(--backing); border-block:1px solid var(--rule)}
.close{background:var(--ink); color:var(--chalk); padding-block:clamp(64px,8vw,112px)}
.close .grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:end}
.close h2{color:#fff; font-size:clamp(44px,6.4vw,84px)}
.close .lead{color:var(--fog); margin-top:20px}
.close .btn{background:var(--blue)}
.close .btn:hover{background:#fff; color:var(--ink)}
.close .tel-big{display:inline-block; margin-top:6px; font:700 26px/1.2 var(--read); color:#fff; text-decoration:none}
.close .tel-big:hover{color:#B9C8FF}
.close .small{color:var(--fog)}
.where{padding-block:28px}
.where .inner{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
.where p{font-size:16px; color:var(--ink-2)}
.where p b{font:800 17px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-right:8px}

/* related services */
.related{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; list-style:none}
.related a{display:grid; gap:6px; height:100%; padding:20px; border-radius:9px; background:var(--paper); color:var(--ink); text-decoration:none; box-shadow:var(--sh-label); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.related a:hover{transform:translateY(-2px); box-shadow:0 6px 16px -6px rgba(20,24,32,.25), 0 0 0 1px rgba(20,24,32,.05); color:var(--ink)}
.related b{font:800 22px/1.05 var(--label); letter-spacing:.04em; text-transform:uppercase}
.related span{font-size:15px; line-height:1.45; color:var(--ink-3)}
.sec{padding-block:clamp(56px,7vw,96px)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(28px,4vw,48px)}

/* ---------- Citadel Menu page (its own product world: the shift line) ---------- */
.cm-hero .brandline{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-bottom:22px}
.cm-hero .brandline img{width:min(300px,70vw); height:auto}
.status-pill{display:inline-flex; align-items:center; gap:8px; border:1.5px dashed var(--ink-3); border-radius:999px; padding:7px 13px 6px; font:700 14px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.shift{margin:clamp(40px,5vw,64px) 0 0; position:relative}
.shift .track{position:relative; height:0}
.shift .axis{position:absolute; left:0; right:0; top:74px; height:3px; background:var(--ink); border-radius:2px}
.shift .ticks{position:absolute; left:0; right:0; top:236px; height:16px; font:700 13px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.shift .ticks span{position:absolute; transform:translateX(-50%); white-space:nowrap}
.shift .ticks span:first-child{transform:none}
.shift .ticks span:last-child{transform:translateX(-100%)}
.shift .now{position:absolute; top:-6px; height:166px; width:2px; background:var(--blue); left:var(--t)}
.shift .now span{position:absolute; top:-22px; left:50%; transform:translateX(-50%); white-space:nowrap; font:700 13px/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--blue)}
.parts{list-style:none; position:relative; height:262px}
.part{position:absolute; top:0; left:var(--t); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:14px}
.dot{width:72px; height:72px; margin-top:39px; border-radius:50%; display:grid; place-items:center; font:800 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; flex:none; box-shadow:0 2px 3px rgba(20,24,32,.16), 0 8px 18px -8px rgba(20,24,32,.35), inset 0 0 0 4px rgba(255,255,255,.28)}
.dot.bk{background:var(--breakfast); color:var(--ink)}
.dot.ln{background:var(--lunch); color:var(--ink)}
.dot.dn{width:148px; height:148px; margin-top:0; background:var(--blue); color:#fff; font-size:28px}
.dot.lt{background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 4px var(--ink)}
.part .tape{white-space:nowrap}
.part .tape em{font-style:normal; font-weight:600; color:var(--blue-deep)}
.part .tape em.wait{color:var(--notyet)}
.shift figcaption{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px solid var(--rule)}
.replay{display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--tape-edge); border-radius:999px; padding:9px 14px; font:700 14px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); cursor:pointer}
.replay:hover{border-color:var(--ink)}
.replay svg{width:12px; height:12px}
.dot.dn.pressing{animation:press .7s var(--ease) both}
.dot.dn.received{background:var(--paper); color:var(--blue); box-shadow:inset 0 0 0 6px var(--blue), 0 2px 3px rgba(20,24,32,.12)}
.dot.dn.filling{animation:fill .8s var(--ease) both}
@keyframes press{0%{transform:scale(1.18); opacity:.4} 100%{transform:scale(1); opacity:1}}
@keyframes fill{0%{box-shadow:0 2px 3px rgba(20,24,32,.16), inset 0 0 0 6px var(--blue), inset 0 0 0 74px var(--paper)} 100%{box-shadow:0 8px 18px -8px rgba(20,24,32,.35), inset 0 0 0 4px rgba(255,255,255,.28), inset 0 0 0 0 var(--paper)}}
.steps{list-style:none; display:grid; gap:26px}
.steps li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px; align-items:start}
.steps .num{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font:800 24px/1 var(--label); box-shadow:inset 0 0 0 3px var(--ink)}
.steps li:last-child .num{background:var(--blue); color:#fff; box-shadow:none}
.steps h3{margin:6px 0 6px}
.steps p{color:var(--ink-2); max-width:46ch}
.legend{list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.legend li{display:grid; justify-items:start; gap:20px}
.ldot{width:clamp(110px,11vw,148px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; text-align:center; font:800 clamp(17px,1.6vw,22px)/1 var(--label); letter-spacing:.08em; text-transform:uppercase}
.ldot.rec{background:var(--paper); color:var(--blue); box-shadow:inset 0 0 0 7px var(--blue)}
.ldot.show{background:var(--blue); color:#fff; box-shadow:0 2px 3px rgba(20,24,32,.16), 0 14px 28px -12px rgba(20,24,32,.45), inset 0 0 0 6px rgba(255,255,255,.22)}
.ldot.fail{background:var(--paper); color:var(--fail); box-shadow:inset 0 0 0 7px var(--fail)}
.legend .tape{max-width:36ch; font-size:16px; padding:14px 16px 15px}
.legend .tape b{font-size:20px; margin-bottom:4px}
.draft-note{display:inline-block; background:var(--paper); border:1px dashed var(--ink-3); border-radius:6px; padding:12px 14px; font-size:15px; color:var(--ink-2); max-width:62ch}
.draft-note b{font:800 14px/1 var(--label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-right:6px}

/* the TV before pairing (Citadel Menu page) */
.pair-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
.tv{container-type:inline-size; position:relative; aspect-ratio:16/9; width:100%; background:#0E1013; border-radius:14px; padding:12px; box-shadow:0 24px 50px -24px rgba(20,24,32,.55)}
.tv-screen{position:absolute; inset:12px; background:var(--paper); border-radius:5px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6cqw; padding:5cqw 6cqw}
.tv .bigdot{width:28cqw; height:28cqw; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1.4cqw var(--blue); color:var(--blue); display:grid; place-items:center; text-align:center; font:800 2.8cqw/1.1 var(--label); letter-spacing:.08em; text-transform:uppercase}
.tv .bigdot b{display:block; font-size:9cqw; line-height:1}
.tv h3{font-size:5.4cqw; line-height:.95; margin-bottom:1.6cqw}
.tv p{font:400 2.4cqw/1.4 var(--read); color:var(--ink-2); margin-bottom:2.4cqw}
.tv .codes{display:flex; align-items:center; gap:3cqw}
.tv .qrw{width:15cqw; border:.35cqw solid var(--ink); border-radius:1.2cqw; padding:1cqw; background:#fff}
.tv .code{font:800 5.2cqw/1 var(--label); letter-spacing:.12em; color:var(--ink)}
.tv-cap{margin-top:14px}

/* contact page */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,5vw,80px); align-items:start; padding-block:clamp(36px,5vw,64px) clamp(64px,8vw,112px)}
.contact-grid aside{display:grid; gap:28px}
.story{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:start}
.story .prose{font-size:18px}
.sec[aria-labelledby="story-h"] .shot{align-self:center}

/* ---------- footer ---------- */
footer{background:var(--backing); border-top:1px solid var(--rule)}
footer .cols{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px; padding-block:48px 32px}
footer h2{font:800 15px/1 var(--label); letter-spacing:.1em; color:var(--ink-3); margin-bottom:14px}
footer ul{list-style:none; display:grid; gap:9px}
footer li{font-size:15px; color:var(--ink-2)}
footer a{color:var(--ink); text-decoration:none; font-size:15px}
footer a:hover{color:var(--blue-deep); text-decoration:underline}
footer .about p{font-size:15px; color:var(--ink-2); max-width:36ch; margin-top:16px}
footer .legal{display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; padding-block:18px calc(22px + env(safe-area-inset-bottom,0px)); font-size:14px; color:var(--ink-3); background:linear-gradient(var(--rule),var(--rule)) no-repeat; background-size:calc(100% - var(--gutter) - var(--gutter-r)) 1px; background-position:var(--gutter) 0}
footer .legal a{font-size:14px; color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .tel span{display:none}
}
@media (max-width:1000px){
  .hero-top,.sec-head,.close .grid{grid-template-columns:minmax(0,1fr)}
  .drop{grid-template-columns:var(--indent) minmax(0,1fr)}
  .drop .side{grid-column:2; grid-row:3}
  .drop .side .shot,.story .shot{max-width:560px}
  .legend{grid-template-columns:minmax(0,1fr)}
  .legend li{grid-template-columns:auto minmax(0,1fr); align-items:center}
  .related{grid-template-columns:minmax(0,1fr)}
  .pair-grid,.contact-grid,.story{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1120px){
  .js .menu-btn{display:inline-flex}
  .js .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--backing); border-bottom:1px solid var(--rule); padding:12px var(--gutter-r) 20px var(--gutter); box-shadow:0 18px 30px -20px rgba(20,24,32,.4); max-height:calc(100dvh - 68px); overflow-y:auto}
  .js .nav.open{display:block}
  .nav .labels{flex-direction:column; align-items:stretch; gap:8px}
  .nav .lab{width:100%; justify-content:space-between; padding:15px 16px 14px; font-size:17px}
  .nav .has-menu .submenu{position:static; width:auto; margin-top:6px; box-shadow:none; background:transparent; padding:0 0 4px 8px}
  .nav .has-menu .submenu a{padding:11px 12px}
  .no-js .nav .has-menu .submenu{display:block}
  .nav .tel{margin-top:10px; font-size:18px}
  .nav .tel span{display:inline}
  .nav .pill{margin-top:12px; width:100%; justify-content:center; padding:15px 18px; font-size:17px}
  .no-js .nav{flex-wrap:wrap; margin-left:0}
  .roll .bar{gap:10px; position:relative}
  .quick{display:inline-flex; margin-left:auto}
}
@media (min-width:1121px){ .quick{display:none!important} }
.quick{align-items:center; gap:8px; background:var(--blue); color:#fff; text-decoration:none; border-radius:999px; padding:10px 14px; font:700 15px/1 var(--label); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}

.quick:hover{background:var(--blue-deep); color:#fff}
@media (max-width:760px){
  :root{--rail-x:6px; --indent:52px; --gutter:max(16px, env(safe-area-inset-left,0px)); --gutter-r:max(16px, env(safe-area-inset-right,0px))}
  body{font-size:16px}
  .brand svg{width:40px}
  .brand span{font-size:18px}
  .brand .long{display:none}
  .brand .short{display:inline}
  .drop{column-gap:12px; --h2:clamp(30px,8.4vw,40px)}
  .connector .tag{font-size:13px; padding:5px 6px 4px}
  .form .row{grid-template-columns:minmax(0,1fr)}
  .handles.two{grid-template-columns:minmax(0,1fr)}
  .shots{grid-template-columns:minmax(0,1fr); gap:10px}
  .shot.todo .frame{aspect-ratio:auto; background:none; outline:none; overflow:visible}
  .shot.todo .frame svg{display:none}
  .shot.todo .tape{position:static; display:block; max-width:none; border-style:dashed; box-shadow:none; background:var(--backing)}
  .phone-hide{display:none}
  footer .cols{grid-template-columns:minmax(0,1fr)}
  .close .tel-big{font-size:22px}
  /* the shift line turns vertical on a phone */
  .shift .track{display:none}
  .parts{height:auto; display:grid; gap:16px}
  .parts::before{content:""; position:absolute; left:43px; top:20px; bottom:20px; width:3px; background:var(--ink); border-radius:2px}
  .part{position:relative; left:auto; transform:none; flex-direction:row; align-items:center; gap:14px}
  .dot{margin-top:0; width:58px; height:58px; margin-left:15px; font-size:13px}
  .dot.dn{width:88px; height:88px; margin-left:0; font-size:19px}
  .part .tape{white-space:normal}
  .legend li{grid-template-columns:88px minmax(0,1fr); gap:16px}
  .ldot{width:88px; font-size:13px}
  .tv-screen{grid-template-columns:1fr; gap:3cqw; padding:4cqw 5cqw}
  .tv .bigdot{display:none}
  .tv h3{font-size:8cqw}
  .tv p{font-size:4cqw}
  .tv .qrw{width:24cqw}
  .tv .code{font-size:8cqw}
}
@media (max-width:360px){
  .brand span{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important; animation:none!important}
}
@media print{
  .roll,.menu-btn,.close,.form,.replay{display:none!important}
  .drop::before,.drop::after{display:none}
}