/* Phase Surveys: "drawing sheet" style (chosen 2026-10-03).
   The page reads as a measured survey drawing: paper grid, drawing border, mono annotations,
   dimension-line dividers, ruled schedules and a title-block footer. */

@font-face{font-family:Archivo; font-style:normal; font-weight:500 800; font-stretch:100% 125%; font-display:swap; src:url(../fonts/archivo-latin-var-wdth.woff2) format("woff2")}
@font-face{font-family:Figtree; font-style:normal; font-weight:400 700; font-display:swap; src:url(../fonts/figtree-latin-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/plex-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/plex-mono-latin-600.woff2) format("woff2")}

:root{
  --ink:#0f1d21; --ink-2:#36403f; --mute:#565e62; --paper:#e9e6df; --sheet:#ffffff;
  --rule:#c3bfb5; --rule-soft:#dcd8cf; --gridline:rgba(15,29,33,.05);
  --navy:#384090; --navy-d:#2b327a; --teal:#00aec7; --teal-ink:#006d7e; --purple:#8a52a0;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hdr-h:76px; --frame:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
/* keeps the sticky header off headings when jumping to a section or tabbing */
html{scroll-padding-top:calc(var(--hdr-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; font-family:Figtree,system-ui,sans-serif; color:var(--ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  /* drawing paper: fine 8px grid with a heavier line every 40px */
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px),
    linear-gradient(rgba(15,29,33,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(15,29,33,.022) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
}
/* headings use Archivo's width axis: semi-expanded reads as an engineered drawing title */
h1,h2,h3{font-family:Archivo,Figtree,sans-serif; font-stretch:112.5%; line-height:1.15; margin:0; letter-spacing:-0.01em; text-wrap:balance}
h3{font-stretch:106%}
p{margin:0; text-wrap:pretty}
a{color:inherit}
::selection{background:#bfe9f0; color:var(--ink)}
img{max-width:100%}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:600; line-height:1.6; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.anno{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:inherit; white-space:nowrap}
.btn svg{transition:transform .15s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--teal-ink); color:#fff}
.btn-primary:hover{background:#00525f}
.btn-primary:disabled{opacity:.7; cursor:progress}
.btn-light{background:#fff; color:var(--ink)}
.btn-light:hover{background:#efede8}
.btn-outline{border-color:var(--teal-ink); color:var(--ink); background:transparent}
.btn-outline:hover{background:var(--teal-ink); color:#fff}

/* keyboard focus: visible on paper and on the navy sheets */
:focus-visible{outline:3px solid var(--teal-ink); outline-offset:3px}
.door-1 :focus-visible,.sheet-dark :focus-visible{outline-color:#fff}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:16px; top:-100px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}

/* page background canvas: fixed behind everything, painted by js/bg.js */
.bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hdr,main,.ftr{position:relative; z-index:1}

/* UCS icon fixed bottom left, above the drawing border */
.ucs{position:fixed; left:calc(var(--frame) + 8px); bottom:calc(var(--frame) + 6px); z-index:55; color:var(--ink); pointer-events:none; opacity:.75}
@media (max-width:640px){ .ucs{display:none} }

/* drawing border round the window, with grid references (decorative) */
.frame{position:fixed; inset:0; pointer-events:none; z-index:60}
.frame::before{content:""; position:absolute; inset:var(--frame); border:1px solid var(--rule)}
.refs{position:absolute; display:flex; justify-content:space-around; font-family:var(--mono); font-size:10px; color:#8a9099}
.refs-top{top:0; left:var(--frame); right:var(--frame); height:var(--frame); align-items:center}
.refs-bottom{bottom:0; left:var(--frame); right:var(--frame); height:var(--frame); align-items:center}
.refs-left,.refs-right{top:var(--frame); bottom:var(--frame); width:var(--frame); flex-direction:column; align-items:center}
.refs-left{left:0} .refs-right{right:0}

/* header */
/* fixed rather than sticky: Safari drops sticky headers on pages with other composited layers */
.hdr{position:fixed; top:0; left:0; right:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--rule); transform:translateZ(0)}
body{padding-top:var(--hdr-h)}
.hdr .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--hdr-h)}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none}
.logo{height:62px; width:auto; display:block}
/* horizontal wordmark in the menu bar */
.logo-h{height:28px}
.by{font-size:12px; color:var(--mute); font-weight:500; padding-left:14px; border-left:1px solid var(--rule); line-height:1.35}
/* header by-line: a glint sweeps across the words every few seconds, drawing the eye to the Phase Projects link (Chris, 2026-10-03) */
.by-shine{color:var(--ink-2); font-weight:600; position:relative; padding:2px 10px 2px 14px; border-radius:999px; border-left:1px solid var(--rule)}
@media (prefers-reduced-motion:no-preference){
  .by-shine{background:linear-gradient(100deg,var(--ink-2) 0 44%,var(--teal-ink) 48%,#fff 50%,var(--teal-ink) 52%,var(--ink-2) 56% 100%); background-size:260% 100%; background-position:100% 0;
    -webkit-background-clip:text; background-clip:text; color:transparent; animation:by-glint 7s ease-in-out infinite}
  @keyframes by-glint{0%,70%{background-position:100% 0} 85%,100%{background-position:0 0}}
}
/* Phase Projects door: a light travels round the border */
.door-lit{overflow:visible}
.door-lit::before{content:""; position:absolute; inset:-3px; border-radius:3px; padding:3px; pointer-events:none;
  background:conic-gradient(from var(--lit,0deg),transparent 0 78%,var(--teal-ink) 92%,#fff 96%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude}
@property --lit{syntax:'<angle>'; inherits:false; initial-value:0deg}
@media (prefers-reduced-motion:no-preference){ .door-lit::before{animation:door-lit 6s linear infinite} @keyframes door-lit{to{--lit:360deg}} }
@media (prefers-reduced-motion:reduce){ .door-lit::before{display:none} }
.nav{display:flex; align-items:center; gap:28px; font-size:15px; font-weight:600}
.nav a{text-decoration:none; color:var(--ink-2)}
.nav a:hover{color:var(--teal-ink)}
.nav a:not(.btn){position:relative; padding:6px 0}
.nav a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:0; border-top:1.5px solid var(--teal-ink); transform:scaleX(0); transition:transform .25s}
.nav a[aria-current="true"]{color:var(--ink)}
.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav .btn{color:#fff; padding:10px 20px}

/* hero: tall scroll track with a sticky panel; the animation follows the scroll */
.hero-scroll{height:175vh; position:relative}
.hero-stick{position:sticky; top:var(--hdr-h); height:calc(100vh - var(--hdr-h)); display:flex; align-items:center}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); grid-template-rows:auto minmax(0,1fr); column-gap:48px; width:100%; height:100%; padding-block:24px 20px}
.hero-head{grid-column:1 / -1; grid-row:1; position:relative; z-index:1; min-width:0}
.hero-text{grid-column:1; grid-row:2; align-self:end; padding-bottom:44px; position:relative; z-index:1}
/* the drawing spans both rows, so its lines cross the big type */
.viewport{grid-column:2; grid-row:1 / span 2; position:relative; z-index:2; display:flex; flex-direction:column; min-height:0}
.hero-title{margin-top:10px; line-height:1}
.ht-big{display:block; font-size:clamp(56px,min(12.5vw,18vh),200px); font-weight:800; font-stretch:118%; line-height:.86; letter-spacing:-.035em}
.ht-big > span{display:block}
.ht-2{padding-left:.9em}
.ht-rest{display:block; margin-top:16px; font-size:clamp(22px,2.3vw,32px); font-weight:700; letter-spacing:-.01em; line-height:1.15; max-width:15em}
.hero-cta{display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; margin-top:28px}
.link-quiet{font-weight:600; font-size:15px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px}
.link-quiet:hover{color:var(--teal-ink); border-color:var(--teal-ink)}
.sub{font-family:Archivo,sans-serif; font-size:21px; font-weight:600; color:var(--ink); margin:0 0 14px}
.intro{font-size:18px; color:var(--ink-2); max-width:540px}

.scroll-hint span{display:inline-block; margin-left:6px; animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
.viewport{margin:0}
.vp-label{order:3; display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); padding:8px 2px 0}
/* no frame: the drawing sits straight on the paper */
.vp-box{position:relative; width:100%; flex:1 1 auto; min-height:260px}
.vp-box canvas,.vp-box .still{position:absolute; inset:0; width:100%; height:100%; display:block}
.vp-box .still{object-fit:contain; transition:opacity .6s}
.live .still{opacity:0}
.vp-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; order:2}
.stages{display:flex; border:1px solid var(--rule); width:max-content; background:var(--sheet); border-radius:999px; overflow:hidden}
/* live readout of the drawing (top left) */
.vp-hud{position:absolute; left:0; bottom:12px; margin:0; padding:6px 8px; display:grid; gap:1px; background:rgba(255,255,255,.86); border:1px solid var(--rule); font-family:var(--mono); font-size:10px; line-height:1.35; color:var(--ink-2); pointer-events:none; opacity:0; transition:opacity .4s}
.live .vp-hud{opacity:1}
.vp-hud div{display:grid; grid-template-columns:3ch 8ch; gap:6px}
.vp-hud dt{color:var(--mute); text-transform:uppercase; letter-spacing:.04em}
.vp-hud dd{margin:0; text-align:right; color:var(--ink)}
/* plan-stage coordinates under the pointer */
.vp-box.measuring{cursor:crosshair}
.vp-coords{position:absolute; left:0; top:0; display:none; padding:3px 6px; background:#fff; border:1px solid var(--ink); font-family:var(--mono); font-size:11px; color:var(--ink); white-space:nowrap; pointer-events:none}
.vp-box.measuring .vp-coords.on{display:block}

/* north arrow + scale bar, shown in the plan stage. --ppm (pixels per metre) is set by js/main.js */
.vp-legend{position:absolute; right:14px; bottom:12px; display:flex; align-items:flex-end; gap:14px; color:var(--ink); opacity:0; transition:opacity .4s; pointer-events:none}
.vp-box[data-stage="1"] .vp-legend{opacity:1}
.scalebar{display:flex; flex-direction:column; gap:3px}
.sb-bar{display:block; width:calc(var(--ppm,24px) * 5); height:5px; border:1px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--ink) 0 var(--ppm,24px),#fff var(--ppm,24px) calc(var(--ppm,24px) * 2))}
.sb-lbl{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ink-2); line-height:1}
.stage{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; color:var(--mute); border-left:1px solid var(--rule); transition:background .3s,color .3s}
.stage:first-child{border-left:0}
.stage.on{background:var(--ink); color:#fff; border-radius:999px; margin:-1px 0}

/* detail bubbles (drawing callouts) */
.bubble{position:absolute; top:-15px; left:24px; width:30px; height:30px; border-radius:999px; display:grid; place-items:center; font-family:var(--mono); font-size:13px; font-weight:600; background:var(--paper); color:var(--ink); border:1px solid var(--ink)}

/* two doors */
.doors-sec{padding:40px 0 8px}
.doors{display:grid; grid-template-columns:1.35fr 1fr; gap:24px; align-items:stretch}
.door{position:relative; padding:36px 32px 32px; display:flex; flex-direction:column; gap:14px}
.door-1{background:var(--ink); color:#fff}
.door-1 h2{font-size:30px; font-weight:800}
.door-1 p{color:#c9d2d5; font-size:17px; max-width:620px}
.door-1 .btn{align-self:flex-start; margin-top:6px}
/* Phase Projects door: the industrial plant photo fades in from the right, so the card reads as the industrial side without fighting the text */
.door-2{background-color:var(--sheet); border:1px solid var(--ink);
  background-image:linear-gradient(90deg,var(--sheet) 0 46%,rgba(255,255,255,.9) 64%,rgba(255,255,255,.55) 82%,rgba(255,255,255,.2) 100%),url(/img/views/pp-industrial.webp);
  background-size:auto,cover; background-position:0 0,right center; background-repeat:no-repeat}
.door-2 > *{position:relative}
.pp-head{display:flex; align-items:center; gap:14px}
.pp-tile{background:#fff; border:1px solid var(--rule-soft); padding:7px 9px; display:flex; flex:none}
.pp-tile img{height:58px; width:auto; display:block}
.lbl{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); line-height:1.5}
.lbl span{display:block; font-family:Figtree,sans-serif; color:var(--mute); font-weight:500; letter-spacing:.01em; text-transform:none; font-size:13px}
.door-2 h2{font-size:22px; font-weight:800; margin-top:4px}
.door-2 p{color:var(--ink-2); font-size:15px}
.door-2 .btn{align-self:flex-start; margin-top:auto}

/* dimension-line divider: a line with end ticks and a centred section number */
.dimline{position:relative; margin:72px 0 0; height:24px; display:flex; align-items:center; justify-content:center}
.dimline::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--teal-ink)}
.dimline::after{content:""; position:absolute; inset:4px 0; border-left:1px solid var(--teal-ink); border-right:1px solid var(--teal-ink)}
.dimline span{position:relative; background:var(--paper); padding:0 14px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-ink)}

/* dividers draw themselves as they scroll into view. Chrome and Safari 26+; elsewhere they
   are simply drawn. Skipped for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .dimline{view-timeline:--dim block}
    .dimline::before{animation:dim-draw linear both; animation-timeline:--dim; animation-range:entry 0% cover 30%}
    .dimline::after,.dimline span{animation:dim-fade linear both; animation-timeline:--dim; animation-range:cover 20% cover 32%}
  }
}
@keyframes dim-draw{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes dim-fade{from{opacity:0} to{opacity:1}}

/* sections */
.sec{padding:56px 0 24px}
.sec-head{max-width:880px; margin-bottom:36px}
.sec-head h2{font-size:clamp(28px,3vw,44px); font-weight:800; letter-spacing:-0.015em; margin:12px 0 0}
.sec-head p{font-size:18px; color:var(--ink-2); margin-top:14px; max-width:680px}

/* schedule: ruled cells sharing their lines, like a drawing legend.
   The 1px gaps over an ink background draw the rules. */
.schedule{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ink); border:1px solid var(--ink)}
.item{position:relative; padding:28px 26px 30px; background:var(--sheet); transition:background .15s}
.item:hover,.item:focus-within{background-color:#f2f8f9;
  background-image:
    linear-gradient(var(--teal-ink),var(--teal-ink)),linear-gradient(var(--teal-ink),var(--teal-ink)),
    linear-gradient(var(--teal-ink),var(--teal-ink)),linear-gradient(var(--teal-ink),var(--teal-ink)),
    linear-gradient(var(--teal-ink),var(--teal-ink)),linear-gradient(var(--teal-ink),var(--teal-ink)),
    linear-gradient(var(--teal-ink),var(--teal-ink)),linear-gradient(var(--teal-ink),var(--teal-ink));
  background-repeat:no-repeat;
  background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px;
  background-position:6px 6px,6px 6px,calc(100% - 6px) 6px,calc(100% - 6px) 6px,6px calc(100% - 6px),6px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) calc(100% - 6px)}
.item .no{position:absolute; top:12px; right:14px; font-family:var(--mono); font-size:12px; color:var(--mute)}
.item .ico{color:var(--ink); display:block; margin-bottom:16px}
.item h3{font-size:19px; font-weight:700; margin-bottom:8px}
.item p{color:var(--ink-2); font-size:15px}

/* virtual tours add-on: a detail box below the schedule */
.tours{margin-top:40px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr); background:var(--sheet); border:1px solid var(--ink)}
.tours-intro{padding:36px 32px 32px; border-right:1px solid var(--ink)}
.tours-intro h2{font-size:30px; font-weight:800; margin:10px 0 12px}
.tours-intro p{color:var(--ink-2); font-size:16px; margin-bottom:22px}
.tour-types{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule)}
.tour{background:var(--sheet); padding:32px 22px 26px}
.tour .ico{color:var(--ink); display:block; margin-bottom:14px}
.tour h3{font-size:17px; font-weight:700; margin-bottom:6px}
.tour p{color:var(--ink-2); font-size:14.5px}

/* why some surveys cost less: a navy "blueprint" sheet */
.sheet-dark{background-color:var(--navy); color:#fff; padding:48px 44px; border:1px solid var(--ink);
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:40px 40px}
.sheet-dark .eyebrow{color:#a9ecf6}
.sheet-dark .sec-head h2{color:#fff}
.sheet-dark .sec-head p{color:#dfe3f6}
.factors{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:1px; background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.35)}
.factor{background:var(--navy); padding:26px 22px}
.factor .n{font-family:var(--mono); font-weight:600; color:#a9ecf6; font-size:13px; letter-spacing:.06em}
.factor h3{color:#fff; font-size:19px; font-weight:700; margin:10px 0}
.factor p{font-size:15px; color:#dfe3f6}
.compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); gap:20px; margin-top:24px}
.cmp{padding:26px 26px 20px; border:1px solid rgba(255,255,255,.35); background:var(--navy-d)}
.cmp h3{font-size:18px; color:#fff; margin-bottom:12px; display:flex; align-items:center; gap:10px}
.cmp ul{margin:0; padding:0; list-style:none}
.cmp li{padding:9px 0 9px 26px; position:relative; font-size:15px; color:#e6e9f7; border-top:1px dashed rgba(255,255,255,.22)}
.cmp li:first-child{border-top:0}
.cmp li::before{content:""; position:absolute; left:2px; top:19px; width:10px; height:2px; background:#fff}
.cmp.careful li::before{background:#d7b3e8}
.why-note{margin-top:24px; font-size:16px; color:#dfe3f6; max-width:780px}
/* scale guide and checklist panels on the navy sheet */
.guide{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:20px}
.guide-panel{padding:26px 26px 22px; border:1px solid rgba(255,255,255,.35); background:var(--navy-d)}
.guide-panel h3{font-size:18px; color:#fff; margin-bottom:14px}
.scale-table{width:100%; border-collapse:collapse}
.scale-table thead th{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#a9ecf6; text-align:left; padding:0 0 8px; border-bottom:1px solid rgba(255,255,255,.35)}
.scale-table tbody th{font-family:Archivo,sans-serif; font-stretch:112.5%; font-weight:800; font-size:clamp(28px,3vw,40px); line-height:1; color:#fff; text-align:left; padding:16px 20px 16px 0; white-space:nowrap; width:1%}
.scale-table td{font-size:16px; color:#e6e9f7; padding:16px 0}
.scale-table thead th:first-child{padding-right:20px}
.scale-table tbody tr + tr > *{border-top:1px dashed rgba(255,255,255,.22)}
.guide-note{margin-top:12px; font-size:13px; color:#c9cfee}
.needs{margin:0; padding:0; list-style:none}
.needs li{display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:15px; color:#e6e9f7; border-top:1px dashed rgba(255,255,255,.22)}
.needs li:first-child{border-top:0}
.needs svg{flex:none; margin-top:3px}

/* level the instrument: a small game on a sheet */
.level-wrap{margin-top:40px}
.level-summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:14px; padding:14px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-size:17px; font-weight:700; color:var(--ink)}
.level-summary::-webkit-details-marker{display:none}
.level-summary .eyebrow{margin:0}
.level-summary-t{flex:1}
.level-summary-hint{color:var(--teal-ink)}
.level-summary-hint::after{content:"Open"}
.level-wrap[open] .level-summary-hint::after{content:"Close"}
.level-wrap[open] .level-summary{border-bottom:0}
.level-summary:hover .level-summary-t,.level-summary:focus-visible .level-summary-t{color:var(--teal-ink)}
.level-summary:focus-visible{outline:3px solid var(--teal-ink); outline-offset:4px}
.level-wrap[open] .level{margin-top:0}
.level{margin-top:40px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:36px; align-items:center; background:var(--sheet); border:1px solid var(--ink); padding:30px 34px; box-shadow:6px 6px 0 -1px var(--paper),6px 6px 0 0 var(--rule)}
.level h3{font-size:26px; font-weight:800; margin:8px 0 10px}
.level-text p{color:var(--ink-2); font-size:16px; max-width:52ch}
.level-controls{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.level-status{margin-top:14px; font-size:14px; color:var(--ink-2)}
.level-times{margin:14px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ink); border:1px solid var(--ink); max-width:460px}
.level-times div{background:var(--sheet); padding:10px 12px}
.level-times dt{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.level-times dd{margin:4px 0 0; font-family:Archivo,sans-serif; font-stretch:112.5%; font-weight:800; font-size:22px; line-height:1; color:var(--ink)}
.level-note{margin-top:14px}
.level-dial{justify-self:center; position:relative}
.level-dial canvas{display:block; width:320px; height:320px; max-width:100%; cursor:crosshair; touch-action:none; border-radius:50%}
.level-dial canvas:focus-visible{outline:3px solid var(--teal-ink); outline-offset:6px}
.level-readout{display:flex; justify-content:space-between; margin-top:10px; font-variant-numeric:tabular-nums}
@media (max-width:980px){ .level{grid-template-columns:1fr} .level-dial{justify-self:start} }
@media (max-width:640px){ .level{padding:22px 18px} .level-dial canvas{width:260px; height:260px} }
@media print{ .level{display:none} }

/* fit for purpose: the statement as a stamped sheet */
.ffp-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center}
.ffp h2{font-size:clamp(28px,3vw,44px); font-weight:800; letter-spacing:-0.015em; margin:12px 0 16px}
.ffp .lead{font-size:18px; color:var(--ink-2)}
.ffp .punch{font-family:Archivo,sans-serif; font-size:20px; font-weight:700; margin-top:20px}
.ffp .qc{margin-top:14px; font-size:16px; color:var(--ink-2)}
.ticks{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:4px}
.ticks li{display:flex; gap:12px; padding:6px 0; color:var(--ink-2)}
.ticks svg{flex:none; margin-top:4px}
.doc{background:var(--sheet); border:1px solid var(--ink); box-shadow:6px 6px 0 -1px var(--paper),6px 6px 0 0 var(--rule); padding:30px 30px 0; font-size:14px; position:relative; margin:0}
.doc-top{display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--ink); margin-bottom:6px; gap:12px}
.doc-logo{display:block; width:166px; height:auto; margin-bottom:14px}
.doc-top h3{font-size:18px; font-weight:800}
.doc-top small{display:block; color:var(--mute); font-size:12px; margin-top:4px}
.doc-ref{font-family:var(--mono); font-size:12px; color:var(--mute); text-align:right; white-space:nowrap; margin-top:12px}
.doc dl{margin:0}
.doc-row{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:12px 0; border-bottom:1px dashed var(--rule)}
.doc-row:last-child{border-bottom:0}
.doc-row dt{font-weight:700}
.doc-row dd{margin:0; color:var(--ink-2)}
.pill{display:inline-block; padding:1px 8px; border:1px solid currentColor; font-size:12px; font-weight:600; margin:0 4px 4px 0}
.pill.yes{color:var(--ink); background:#f3f1ec}
.pill.no{color:#6e3a87; background:#f6eff9}
.ph{background:#fff3c4; color:#6b5200; padding:0 4px}
.doc-sign{display:grid; grid-template-columns:1fr 1fr; margin:18px -30px 0; border-top:1px solid var(--ink); font-size:12px; color:var(--mute)}
.doc-sign > span{padding:10px 14px}
.doc-sign > span + span{border-left:1px solid var(--ink)}
.stamp{position:absolute; right:24px; top:-16px; transform:rotate(-4deg); border-radius:999px; border:2px solid var(--purple); color:#6e3a87; background:rgba(255,255,255,.85); font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; pointer-events:none}

/* who: 37 years, drawn as a dimension, with the mark faded behind as a watermark */
.who{position:relative; overflow:hidden}
.who .wrap{position:relative; z-index:1}
.wm{position:absolute; right:-4%; top:50%; height:min(92%, 720px); width:auto; transform:translateY(-50%) rotate(-8deg); opacity:.09; pointer-events:none; user-select:none}

.who-grid{display:grid; grid-template-columns:auto minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center}
.figure{margin:0; display:inline-block; justify-self:start; text-align:center}
.big{font-family:Archivo,sans-serif; font-stretch:125%; font-weight:800; font-size:120px; line-height:.9; letter-spacing:-0.03em; color:var(--ink); display:block}
.big-dim{display:block; position:relative; margin-top:14px; height:18px; border-left:1px solid var(--teal-ink); border-right:1px solid var(--teal-ink)}
.big-dim::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--teal-ink)}
.big-cap{display:block; margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-ink)}
.who p.lede{font-size:20px; color:var(--ink-2); max-width:660px; margin-top:12px}

/* 1989 kit: line drawings in a ruled schedule */
.kit{margin-top:56px}
.kit-title{font-size:clamp(20px,2vw,26px); font-weight:800; max-width:34ch; margin-bottom:22px}
.kit-head{display:flex; justify-content:space-between; gap:12px; padding:0 2px 8px}
.kit-list{list-style:none; margin:0; padding:0 1px 1px 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr))}
.kit-today{grid-template-columns:repeat(7,minmax(0,1fr))}
/* groups: ink borders between groups, finer rules between the items inside a group */
.kit-group{grid-column:span var(--span,var(--n,1)); background:var(--sheet); border:1px solid var(--ink); margin:0 -1px -1px 0; display:flex; flex-direction:column}
.kit-group-label{display:block; padding:9px 14px 0; font-size:10px; color:var(--mute)}
.kit-group>ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,1),minmax(0,1fr)); flex:1}
.kit-item{padding:12px 16px 14px; display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--rule)}
.kit-item:first-child{border-left:0}
.kit-item img{width:100%; height:auto; display:block}
.kit-wide .kit-item img{max-width:240px; margin:0 auto}
.kit-cap{font-family:var(--mono); font-size:12px; color:var(--ink-2); display:flex; gap:8px; align-items:baseline}
.kit-cap .no{color:var(--mute)}
.kit-now{margin-top:40px}

/* views: real images framed as drawing views, with a numbered mono caption */
.view{margin:0; background:var(--sheet); border:1px solid var(--ink); padding:6px; box-shadow:6px 6px 0 -1px var(--paper),6px 6px 0 0 var(--rule)}
.view img{display:block; width:100%; height:auto}
.view figcaption{display:flex; gap:12px; align-items:baseline; padding:8px 4px 2px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-2)}
.view-no{font-weight:600; text-transform:uppercase; color:var(--ink); white-space:nowrap}
.head-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:36px}
.head-row .sec-head{margin-bottom:0}
.tours-pano{grid-column:1 / -1; border:0; border-bottom:1px solid var(--ink); box-shadow:none; padding:0}
.tours-pano figcaption{padding:8px 12px}
.view-dark{background:transparent; border-color:rgba(255,255,255,.35); box-shadow:none; margin-top:20px; padding:18px 18px 8px}
.view-dark img{max-height:420px; width:auto; max-width:100%; margin:0 auto}
.view-dark figcaption{color:#dfe3f6}
/* View 05 zoom lens: plan in the middle, capture kit on white cards either side */
.lens{display:grid; grid-template-columns:150px minmax(0,1fr) 150px; gap:24px; align-items:center; margin-top:20px}
.lens .lens-view{margin-top:0; width:100%}
.lens-side{display:flex; flex-direction:column; gap:12px}
.lens-card{background:#fff; border:1px solid var(--ink); padding:6px; display:flex; flex-direction:column; gap:2px; box-shadow:5px 5px 0 -1px var(--navy),5px 5px 0 0 rgba(255,255,255,.35)}
.lens-card img{width:100%; height:auto; display:block}
.lens-lbl{font-size:13px; line-height:1.5; color:#dfe3f6; margin:0}
.lens-lbl strong{display:block; color:#fff; font-weight:700}
.lens-stage{position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; cursor:zoom-in; touch-action:pan-y}
.lens-stage img{display:block; max-height:420px; width:auto; max-width:100%}
.lens-glass{position:absolute; left:42%; top:46%; width:180px; height:180px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;
  background:var(--navy-d) no-repeat; border:2px solid var(--teal-ink); box-shadow:0 0 0 1px rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.35)}
.lens-glass .anno{position:absolute; right:14px; bottom:10px; color:#fff; font-size:10px}
.lens-since{grid-column:1/-1; margin:14px 0 0; text-align:center; font-family:Archivo,sans-serif; font-stretch:118%; font-weight:800; letter-spacing:-0.01em; font-size:clamp(24px,3.2vw,40px); line-height:1.1; color:#fff}
@media (max-width:980px){
  .lens{grid-template-columns:1fr 1fr}
  .lens .lens-view{grid-column:1/-1; grid-row:1}
  .lens-side{flex-direction:row; align-items:flex-start}
  .lens-card{width:120px; flex:none}
  .lens-glass{width:140px; height:140px}
}
@media (max-width:640px){
  .lens{grid-template-columns:1fr}
  .lens-glass{width:120px; height:120px}
}
.view-dark .view-no{color:#a9ecf6}
.ffp .clip{max-width:820px; margin:40px auto 0}
.who-view{grid-column:3; align-self:center; min-width:0}
/* clips: a poster with a play button; the video is created on click (js/main.js) */
.clip-play{display:block; position:relative; width:100%; padding:0; border:0; background:none; cursor:pointer; font:inherit}
.clip-play img{display:block; width:100%; height:auto}
.clip-btn{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:var(--sheet); color:var(--ink); border:1px solid var(--ink); font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.clip-play:hover .clip-btn,.clip-play:focus-visible .clip-btn{background:var(--teal-ink); color:#fff; border-color:var(--teal-ink)}
.clip video{display:block; width:100%; height:auto; background:#000}
.tour-frame{display:block; width:100%; aspect-ratio:16 / 9; border:0; background:#000}
/* Matterport tours open in a large viewer over the page */
.tour-dialog{width:min(96vw,1600px); height:min(90vh,1000px); max-width:none; max-height:none; padding:0; border:1px solid var(--ink); background:#000; display:flex; flex-direction:column}
.tour-dialog:not([open]){display:none}
.tour-dialog::backdrop{background:rgba(15,29,33,.78)}
.tour-dialog-bar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 10px 8px 14px; background:var(--sheet); border-bottom:1px solid var(--ink)}
.tour-dialog-bar .anno{color:var(--ink)}
.tour-dialog-close{position:static; transform:none; padding:7px 14px; font-size:11px; cursor:pointer}
.tour-dialog-close:hover,.tour-dialog-close:focus-visible{background:var(--teal-ink); color:#fff; border-color:var(--teal-ink)}
.tour-dialog .tour-frame{flex:1; aspect-ratio:auto; height:auto}
html.dialog-open{overflow:hidden}
@media (max-width:640px){ .tour-dialog{width:100vw; height:100dvh; border:0} }
/* a YouTube clip shown clean: the frame is 130% and centred, so the title bar and watermark are cropped away; no pointer, so no hover chrome */
.yt-clean{position:relative; overflow:hidden; aspect-ratio:16 / 9; background:#000}
.yt-clean .yt-frame{position:absolute; left:-15%; top:-15%; width:130%; height:130%; pointer-events:none}
.clip-stop{left:auto; top:auto; transform:none; right:12px; bottom:12px; z-index:1; padding:7px 12px; font-size:11px; cursor:pointer}
.clip-stop:hover,.clip-stop:focus-visible{background:var(--teal-ink); color:#fff; border-color:var(--teal-ink)}
.clips-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:40px}
.clips-2 .flythrough{max-width:none; margin:0}
.clips-3{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.clips-3 .clip-btn{padding:8px 12px; font-size:11px}
@media (max-width:980px){ .clips-2{grid-template-columns:1fr} }
.tour-row{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ink); border-top:1px solid var(--ink)}
.tour-row .view{border:0; box-shadow:none; padding:14px 14px 10px}
.tour-row-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tour-row-4 .clip-btn{padding:8px 12px; font-size:11px}
/* visualisation section: two labelled halves in the right-hand column, and a placeholder row for visuals examples */
.tv-half + .tv-half{border-top:1px solid var(--ink)}
.tv-h{display:flex; gap:12px; align-items:baseline; margin:0; padding:14px 16px 10px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--rule)}
.tv-h .no{color:var(--teal-ink)}
.tour-note{grid-column:1 / -1; padding:8px 14px 10px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--mute); background:var(--sheet)}
/* title block key plan */
.tb-offices{display:flex; justify-content:space-between; gap:16px; align-items:center}
.keyplan-fig{margin:0; flex:none; text-align:right}
.keyplan{height:72px; width:auto; border:1px solid var(--rule); display:inline-block}
.keyplan-fig figcaption{margin-top:4px; font-size:10px}

/* on site: a ruled strip of the kit in use */
.onsite{padding:56px 0 0}
.strip{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; background:var(--ink); border:1px solid var(--ink)}
.strip .view{border:0; box-shadow:none; padding:10px 10px 8px}
.strip .view img,.strip .clip-play img{aspect-ratio:4 / 3; object-fit:cover}
.strip .clip video{aspect-ratio:4 / 3; object-fit:cover; height:auto} /* the player keeps the poster's box instead of shrinking to a letterboxed strip */
.strip figcaption{font-size:10.5px; padding:8px 2px 0; line-height:1.4}
.strip .clip-btn{padding:7px 10px; font-size:10px; white-space:nowrap}

/* quote form: a sheet with ruled fields */
.quote .sec-head{margin-left:auto; margin-right:auto; text-align:center}
form.qf{max-width:840px; margin:0 auto; background:var(--sheet); border:1px solid var(--ink); box-shadow:6px 6px 0 -1px var(--paper),6px 6px 0 0 var(--rule); padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
.f{display:flex; flex-direction:column; gap:6px}
.f.full{grid-column:1 / -1}
.f label{font-size:14px; font-weight:700}
.f label span{font-weight:400; color:var(--mute)}
.f input,.f select,.f textarea{font:inherit; font-size:15px; padding:11px 12px; border:1px solid #8f98a3; border-radius:0; background:#fff; color:var(--ink); width:100%}
.f input::placeholder,.f textarea::placeholder{color:var(--mute); opacity:1}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:3px solid var(--teal-ink); outline-offset:0; border-color:var(--teal-ink)}
.f textarea{min-height:110px; max-height:420px; resize:vertical; field-sizing:content}
.f [aria-invalid="true"]{border-color:#b42318; box-shadow:0 0 0 1px #b42318}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.qf .hint{display:block; margin-top:6px; font-size:12px; color:var(--mute)}
.drop{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:10px 12px; border:1px dashed var(--ink); background:#fff}
.drop.over{border-style:solid; border-color:var(--teal-ink); background:#eef6f7}
.drop.has-file{border-style:solid}
.drop:focus-visible{outline:3px solid var(--teal-ink); outline-offset:2px}
.drop-text{font-size:14px; color:var(--mute)}
.drop.has-file .drop-text{display:none}
.drop-name{font-family:var(--mono); font-size:12px; color:var(--teal-ink)}
.qf input[type=file]{padding:0; font-size:14px; color:var(--ink-2); border:0; width:auto; background:transparent}
.qf input[type=file]::file-selector-button{font:600 14px Figtree,sans-serif; color:var(--ink); background:#fff; border:1px solid var(--ink); border-radius:999px; padding:6px 14px; margin-right:12px; cursor:pointer}
.qf input::placeholder{color:#8a9099}
.qf .submit{grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px; text-align:center}
.qf .submit p{color:var(--ink-2); font-size:15px}
.qf .submit small{color:var(--mute); font-size:12px}
.form-msg{grid-column:1 / -1; padding:14px 16px; font-weight:600; text-align:center; border:1px solid currentColor}
.form-msg:empty{display:none}
.form-msg:focus{outline:none}
.form-msg.ok{background:#fff; color:var(--ink); border-color:var(--ink); padding:22px 16px 20px}
.form-msg.ok p{margin:0}
.form-logo{display:block; width:166px; height:auto; margin:0 auto 12px}
.form-msg.err{background:#fbe9e9; color:#8a1f1f}

/* text pages (privacy notice) */
.page{padding:56px 0 24px}
.page .wrap{max-width:820px}
.page .sheet{background:var(--sheet); border:1px solid var(--ink); padding:40px 44px}
.page-logo{display:block; width:188px; height:auto; margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--ink)}
.page h1{font-size:44px; font-weight:800; margin:12px 0 8px}
.page h2{font-size:24px; font-weight:800; margin:40px 0 12px}
.page p,.page li{font-size:17px; color:var(--ink-2)}
.page p + p{margin-top:12px}
.page ul{padding-left:22px; margin:0; display:grid; gap:10px}
.who .lede a{color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px}
.page a{color:var(--teal-ink)}
.page a.btn-primary{color:#fff}
.page .updated{color:var(--mute); font-size:15px}
.draft-note{background:#fff3c4; color:#6b5200 !important; border:1px solid #e8d48a; padding:14px 16px; margin-bottom:32px}

/* footer: drawing title block. The 1px gaps over the ink background draw the rules. */
.ftr{padding:72px 0 48px}
.titleblock{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--ink); border:2px solid var(--ink); font-size:14px; color:var(--ink-2)}
.titleblock > *{background:var(--sheet)}
.tb-company{display:flex; justify-content:space-between; align-items:center; gap:28px}
.reg{display:block; margin-top:8px; font-size:12px; color:var(--mute)}
.tb-brand{display:flex; align-items:center; gap:14px; flex:none; padding:4px 0}
.tb-brand img{height:64px; width:auto; display:block}
.tb-cell{padding:10px 14px 12px}
.tb-wide{grid-column:span 4}
.tb-nav{grid-column:span 4; display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline}
.tb-nav a{text-decoration:none; color:var(--ink)}
.tb-nav a:hover{color:var(--teal-ink)}
.k{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-bottom:2px}
.tb-nav .k{width:100%}
.tb-cell a{color:var(--ink)}
.addr{display:block}
.office{display:block}
.office + .office{margin-top:8px}
.k2{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute)}
.tel,.mail,.w3w{display:block; font-variant-numeric:tabular-nums}
.w3w{font-family:var(--mono); font-size:12px}
.mail{margin-top:8px}
a.addr{color:inherit; text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px}
a.addr:hover{text-decoration-color:currentColor}
.nw{white-space:nowrap}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; grid-template-rows:none; row-gap:24px; height:auto; padding-block:0}
  .hero-head,.hero-text,.viewport{grid-column:1; grid-row:auto}
  .hero-text{padding-bottom:0}
  .vp-box{flex:none; aspect-ratio:4 / 3}
  .ffp-grid{grid-template-columns:1fr; gap:40px}
  .doors{grid-template-columns:1fr}
  .schedule{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tours{grid-template-columns:1fr}
  .tour-row,.tour-row-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide{grid-template-columns:1fr}
  .tours-intro{border-right:0; border-bottom:1px solid var(--ink)}
  .who-grid{grid-template-columns:1fr; gap:24px}
  .who-view{grid-column:auto}
  .head-row{grid-template-columns:1fr; gap:24px}
  .who-view{max-width:560px}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kit-list,.kit-today{grid-template-columns:1fr 1fr; grid-auto-flow:dense}
  .kit-group{grid-column:span 2}
  .kit-group[style*="--n:1"],.kit-group[style*="--n:2"]{grid-column:span 1}
  .kit-item img{max-width:240px; margin:0 auto}
  .nav a:not(.btn){display:none}
  .titleblock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-company{flex-direction:column; align-items:flex-start}
  .tb-wide,.tb-nav{grid-column:span 2}
}
/* no scroll-driving on tablets, phones or short screens: the animation plays by itself.
   Must match autoplayQuery in js/main.js. */
@media (max-width:980px),(max-height:620px){
  .hero-scroll{height:auto}
  .hero-stick{position:static; height:auto; padding:48px 0 24px}
  .vp-box{flex:none; aspect-ratio:4 / 3}
  .scroll-hint{display:none}
}
@media (max-width:640px){
  :root{--hdr-h:64px; --frame:0px}
  .frame{display:none}
  .wrap{padding:0 16px}
  .hero-stick{padding:32px 0 16px}

  .sub{font-size:18px}
  .ht-big{font-size:14.5vw; font-stretch:100%}
  .ht-2{padding-left:.6em}
  .nav .btn{padding:9px 16px; font-size:14px}
  .ht-rest{font-size:22px}
  .intro{font-size:16px}
  .vp-box{min-height:240px}
  .door{padding:32px 22px 24px}
  .door-1 h2{font-size:25px}
  .sec-head h2,.ffp h2{font-size:30px}
  .schedule,.tour-types{grid-template-columns:1fr}
  .tours-intro{padding:28px 22px 24px}
  .view-dark{padding:10px 10px 6px}
  .view-dark img{max-height:260px}
  .tb-offices{flex-direction:column; align-items:flex-start}
  .keyplan{height:60px}
  .tours-intro h2{font-size:25px}
  .sheet-dark{padding:32px 20px}
  .doc{padding:22px 22px 0}
  .doc-row{grid-template-columns:1fr; gap:4px}
  .doc-sign{margin:18px -22px 0}
  .stamp{right:14px}
  .doc-logo{width:140px}
  .big{font-size:84px}
  .wm{height:min(60%, 520px); right:-18%; top:12%; transform:rotate(-8deg)}
  .who p.lede{font-size:17px}
  form.qf{grid-template-columns:1fr; padding:22px}
  .page .sheet{padding:28px 20px}
  .page h1{font-size:34px}
  .dimline{margin-top:48px}
  .by{display:none}
  .logo-h{height:24px}
  .vp-label span:last-child{display:none}
  .hero-cta .btn{flex:1 1 auto; justify-content:center}
  .vp-legend{display:none}
  .kit-list,.kit-today{grid-template-columns:1fr}
  .kit-group,.kit-group[style*="--n:1"],.kit-group[style*="--n:2"]{grid-column:span 1}
  .kit-group>ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-item:nth-child(odd){border-left:0}
  .kit-item:nth-child(even){border-left:1px solid var(--rule)}
  .kit-item:nth-child(n+3){border-top:1px solid var(--rule)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero-stick{position:static; height:auto; padding:48px 0 24px}
  .scroll-hint{display:none}
  .scroll-hint span{animation:none}
  .hero-grid{height:auto}
  .vp-box{flex:none; aspect-ratio:4 / 3}
  .vp-box .still,.stage,.item{transition:none}
}

/* print: the page prints as a drawing sheet on A4 */
@media print{
  @page{size:A4; margin:12mm}
  :root{--hdr-h:0px}
  body{background:#fff; font-size:11pt}
  .frame,.skip,.nav,.scroll-hint,.hero-cta,.vp-foot,canvas,.vp-legend,.vp-hud,.vp-coords,.form-msg,.hp,.bg,.ucs,.wm{display:none !important}
  .hdr{position:static; background:#fff; border-bottom:1px solid var(--ink); transform:none}
  body{padding-top:0}
  .hero-scroll{height:auto}
  .hero-stick{position:static; height:auto; padding:16px 0}
  .hero-grid{grid-template-columns:1fr 1fr}
  .vp-box{max-height:none; box-shadow:none}
  .vp-box .still{opacity:1 !important}
  .door-1,.sheet-dark,.factor,.cmp,.stage.on{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .item,.factor,.cmp,.guide-panel,.doc,.tour,.door,.titleblock,form.qf,.view{break-inside:avoid}
  .clip-btn{display:none}
  .guide-panel{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .dimline{margin-top:24px}
  .dimline::before,.dimline::after,.dimline span{animation:none !important}
  .sec{padding:16px 0}
  .doc,form.qf,.vp-box{box-shadow:none}
  .ftr{padding:24px 0 0}
}