/* NAIC — public site styles.
   One page, scrolled: black ground, a moving light show fixed behind everything, the
   wordmark and nav pinned to the viewport, and the sections passing underneath them. */

/* One font stack, declared once. Every rule below refers to --sans, so the mark, the
   nav and the headings can never drift onto different faces by accident. */
:root{
  --sans:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  height:100%;
  scroll-behavior:smooth;
  scroll-padding-top:clamp(7rem,16vh,10rem);   /* anchors land clear of the fixed mark */
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  min-height:100vh;
  min-height:100svh;
  margin:0;
  color:#fff;
  /* A STILL of the light show, painted by CSS the instant the HTML arrives — before
     any JavaScript runs. WebGL cannot draw until its context exists and a raymarching
     shader has compiled, which on a phone GPU is a visible pause, and the page looked
     broken during it. This costs nothing, needs no script, and is also exactly what a
     visitor sees if their browser has no WebGL at all. */
  background:
    radial-gradient(58vmax 44vmax at 44% 42%, rgba(58,96,150,.30), rgba(0,0,0,0) 68%),
    radial-gradient(46vmax 38vmax at 62% 58%, rgba(84,46,116,.26), rgba(0,0,0,0) 66%),
    #000;
  background-attachment:fixed;
  font-family:var(--sans);
  /* deliberately NOT -webkit-font-smoothing:antialiased — on macOS it thins every
     stroke, and a page set almost entirely in bold caps goes visibly spindly. Let the
     OS rasterise natively. */
}

/* ── fixed backdrop ─────────────────────────────────────────────── */

/* the light show — behind everything, full viewport, never scrolls */
#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  /* The canvas is created with alpha:false, so the moment it exists it paints opaque
     black over anything behind it. It therefore starts INVISIBLE and fades in on the
     first drawn frame (lightshow.js adds .is-live), letting the CSS still on <body>
     show through until the shader is ready. */
  background:transparent;
  opacity:0;
  transition:opacity .6s ease;
}
#bg.is-live{opacity:1}
@media (prefers-reduced-motion:reduce){
  #bg{transition:none}
}

/* Scroll veil. The light show is full strength on the opening screen and then dims
   behind the sections, so text sits on near-black instead of on moving colour.
   Opacity is driven from scroll.js; this is the element it fades. */
#veil{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:#000;
  opacity:0;
  will-change:opacity;
}

/* Keeps BOTH top corners black so the wordmark and the nav never fight the light.
   Two falloffs, not a bar: a hard band would cut a line across the light show. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(60vmin 46vmin at 0% 0%,rgba(0,0,0,.92),rgba(0,0,0,0) 72%),
    radial-gradient(52vmin 34vmin at 100% 0%,rgba(0,0,0,.88),rgba(0,0,0,0) 70%);
}

/* ── wordmark ───────────────────────────────────────────────────── */

/* Four words stacked, one per line, contained in a single block.
   Arial/Helvetica bold — the face the original NAIC logo art was set in.

   FIXED, always. Anchored to the viewport, not the document, so it holds the same
   corner whatever is scrolled past it and whatever page it sits on. Every page that
   links this stylesheet gets the identical mark in the identical place — the position
   is defined once, here, and never per-page. */
.logo{
  position:fixed;
  z-index:4;
  top:clamp(1.5rem,3.5vw,2.5rem);
  left:clamp(1.5rem,3.5vw,2.5rem);
  margin:0;
  width:max-content;
  font-family:var(--sans);
  font-size:clamp(1.05rem,2.1vw,1.75rem);
  font-weight:700;
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.005em;      /* caps need air where lowercase needed tightening */
  color:#fff;
}

.logo a{
  display:flex;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
}
.logo span{display:block}

/* ── nav ────────────────────────────────────────────────────────── */

/* Fixed to the viewport like the wordmark, top right. Same face, same caps, same
   tracking — one step down in size so the mark stays dominant. */
.nav{
  position:fixed;
  z-index:4;
  top:clamp(1.5rem,3.5vw,2.5rem);
  right:clamp(1.5rem,3.5vw,2.5rem);
  display:flex;
  gap:clamp(1.1rem,2.6vw,2.25rem);
  font-family:var(--sans);
  font-size:clamp(.92rem,1.6vw,1.25rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;            /* identical tracking to .logo — same face, same treatment */
  line-height:1.02;
  /* Optical alignment. Both blocks share the same `top`, but a cap's distance from the
     top of its line box scales with font-size — so the smaller nav caps were sitting
     ~1.5px HIGHER than the wordmark's, which reads as a wonky top edge. Nudge down by
     the difference in that offset. */
  padding-top:.08em;
}

.nav a{
  position:relative;
  display:inline-block;
  padding-bottom:.4em;
  color:#fff;
  text-decoration:none;
  transition:opacity .22s ease;
}

/* the rule draws in from the left rather than simply appearing */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}

.nav a:hover,
.nav a:focus-visible{opacity:.72}
.nav a:hover::after,
.nav a:focus-visible::after{transform:scaleX(1)}

/* the section you are actually in keeps its rule drawn */
.nav a.is-active::after{transform:scaleX(1)}

/* Login is a different kind of item: the others move you down this page, this one
   leaves it. Set apart by a rule rather than by a different size or colour, so the
   nav still reads as one typographic block. */
.nav-login{
  margin-left:clamp(.3rem,1vw,.75rem);
  padding-left:clamp(1.1rem,2.6vw,2.25rem);
  border-left:1px solid rgba(255,255,255,.32);
}

.nav a:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:1px}

@media (prefers-reduced-motion:reduce){
  .nav a,.nav a::after{transition:none}
}

/* ── sections ───────────────────────────────────────────────────── */

main{position:relative;z-index:3}

section{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  align-content:center;
  padding:clamp(8rem,18vh,11rem) clamp(1.5rem,6vw,5rem) clamp(5rem,12vh,8rem);
}

/* the opening screen carries the mark and nothing else */
#top{min-height:100vh;min-height:100svh}

.inner{width:100%;max-width:58ch;margin-inline:auto}

/* sections carrying side-by-side offers need more room than a reading column */
.inner-wide{max-width:92ch}

h2{
  margin:0 0 1.25rem;
  font-size:clamp(2rem,5.5vw,3.75rem);
  font-weight:700;
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.005em;
}

/* opening line of a section — full white and a step up, so the eye lands here first */
.lead{
  margin:0 0 1.5rem;
  max-width:26ch;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:#fff;
}

.body{
  margin:0 0 1.15rem;
  max-width:56ch;
  font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.body:last-child{margin-bottom:0}

/* ── services / offers ──────────────────────────────────────────── */

/* auto-fit so the row reflows for two, three or four offers without a rule change */
.offers{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:clamp(1.75rem,3.5vw,2.75rem);
}
@media (max-width:760px){
  .offers{grid-template-columns:1fr;gap:clamp(2.5rem,7vh,3.5rem)}
}

.offer{display:flex;flex-direction:column;align-items:flex-start}

.offer h3{
  margin:0 0 .75rem;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.005em;
}

/* the paragraph pushes the action to a common baseline across both columns */
.offer .body{flex:1 1 auto;margin-bottom:1.75rem}

/* Actions. Two weights: solid for the thing we want clicked, outline for the secondary.
   Same face and caps as everything else, sized as a comfortable target. */
.action{
  display:inline-block;
  padding:.85em 1.5em;
  border:2px solid #fff;
  color:#fff;
  font-size:clamp(.8rem,1.1vw,.92rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  transition:background-color .22s ease,color .22s ease,opacity .22s ease;
}
.action:hover,
.action:focus-visible{background:#fff;color:#000}

.action-solid{background:#fff;color:#000}
.action-solid:hover,
.action-solid:focus-visible{background:transparent;color:#fff}

.action:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .action{transition:none}
}

.back{margin:2.5rem 0 0}

/* A single-section page still owns a full screen, so the fixed mark has room and the
   veil behaves the same as it does on the scrolling page. */
#catalogue,#login,#hub{min-height:100vh;min-height:100svh}

/* the hub is a list that can outgrow the viewport — let it start at the top and flow */
#hub{align-content:start}

/* ── client hub: downloads and updates ──────────────────────────── */

/* honest banner for screens that are not wired to anything yet */
.notice{
  margin:0 0 2.25rem;
  padding:.85rem 1.1rem;
  border:1px solid rgba(255,255,255,.28);
  border-left-width:3px;
  font-size:clamp(.85rem,1.1vw,.95rem);
  line-height:1.5;
  color:rgba(255,255,255,.72);
}

/* screen-reader-only label: present for assistive tech, invisible on screen */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* search */
.search{position:relative;margin:0 0 1rem;max-width:26rem}
.search-icon{
  position:absolute;
  left:.95rem;top:50%;
  width:1.05rem;height:1.05rem;
  transform:translateY(-50%);
  fill:none;stroke:rgba(255,255,255,.5);
  stroke-width:2;stroke-linecap:round;
  pointer-events:none;
}
.search input{
  width:100%;
  padding:.85rem 1rem .85rem 2.9rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-family:var(--sans);
  font-size:1rem;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
}
.search input::placeholder{color:rgba(255,255,255,.45)}
.search input:focus{
  outline:none;
  border-color:#fff;
  background:rgba(255,255,255,.09);
}

.results{
  margin:0 0 1.75rem;
  font-size:.85rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}

.empty{margin:0;color:rgba(255,255,255,.72)}
.linkish{
  background:none;border:0;padding:0;
  color:#fff;font:inherit;text-decoration:underline;
  cursor:pointer;
}

/* The library: a dense grid of small icon tiles — a launcher, not a product listing.
   Small enough that several rows and columns sit on one screen without scrolling. */
.library{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));
  gap:.6rem;
}

.tile{position:relative}
.tile[hidden]{display:none}

/* the whole tile is the target, so there is no separate button eating height */
.tile > a{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  height:100%;
  padding:.95rem .5rem .8rem;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
  color:inherit;
  text-decoration:none;
  transition:border-color .18s ease,background-color .18s ease;
}
.tile > a:hover,
.tile > a:focus-visible{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);
}
.tile > a:focus-visible{outline:2px solid #fff;outline-offset:2px}

.tile-icon{
  display:grid;
  place-items:center;
  width:2.5rem;height:2.5rem;
  margin-bottom:.55rem;
  color:#fff;
}
.tile-icon svg{
  width:100%;height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tile h3{
  margin:0 0 .25rem;
  font-size:.72rem;
  font-weight:700;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.tile-ver{
  margin:auto 0 0;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.68rem;
  color:rgba(255,255,255,.45);
}

/* update state as a corner dot — no room for a badge at this size, and the tile
   still says "Update" in its version line for anyone who cannot see the colour */
.tile-dot{
  position:absolute;
  top:.4rem;right:.4rem;
  width:.45rem;height:.45rem;
  border-radius:50%;
  background:#e8c25a;
}

@media (max-width:420px){
  .library{grid-template-columns:repeat(auto-fill,minmax(5.75rem,1fr));gap:.45rem}
  .tile-icon{width:2rem;height:2rem}
  .tile h3{font-size:.64rem}
}

/* ── app detail ─────────────────────────────────────────────────── */

.crumb{margin:0 0 2rem;font-size:.85rem;letter-spacing:.02em}
.crumb a{color:rgba(255,255,255,.7);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}

.detail-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:1.5rem 2rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.18);
}

.detail-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:5.5rem;height:5.5rem;
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.detail-icon svg{
  width:3rem;height:3rem;
  fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}

.detail-title{flex:1 1 16rem}
.detail-title h2{margin:0 0 .55rem}

.detail-status{
  margin:0 0 1.25rem;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.85rem;
}
.detail-status.is-ok{color:rgba(255,255,255,.55)}
.detail-status.is-update{color:#e8c25a}

.detail-actions{margin:0}

/* facts as a definition list: labels small and quiet, values in mono so they align */
.detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 3rem;
  margin:2rem 0;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.detail-meta div{margin:0}
.detail-meta dt{
  margin:0 0 .3rem;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.5);
}
.detail-meta dd{
  margin:0;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.95rem;
  color:#fff;
}

.detail-body{max-width:60ch}
.detail-body p{
  margin:0 0 1.15rem;
  font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.detail-body h4{
  margin:2rem 0 .9rem;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#fff;
}
.detail-body ul{margin:0;padding:0;list-style:none}
.detail-body li{
  position:relative;
  padding:0 0 .7rem 1.4rem;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
.detail-body li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:.45rem;height:1px;
  background:rgba(255,255,255,.5);
}

@media (max-width:520px){
  .detail-icon{width:4rem;height:4rem}
  .detail-icon svg{width:2.2rem;height:2.2rem}
  .detail-meta{gap:1.25rem 2rem}
}

/* ── administrator: headline figures + client/app matrix ────────── */

.figures{
  list-style:none;
  margin:0 0 2.25rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem 3rem;
}
.figures b{
  display:block;
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}
.figures span{
  display:block;
  margin-top:.25rem;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.5);
}

/* A wide table must scroll inside its OWN box — never let it push the page sideways. */
.tablewrap{
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.18);
  -webkit-overflow-scrolling:touch;
}

.matrix{
  border-collapse:collapse;
  width:100%;
  min-width:44rem;                /* below this the columns stop being readable */
  font-size:.85rem;
}

.matrix th,
.matrix td{
  padding:.7rem .6rem;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}

.matrix thead th{
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.6);
  border-bottom-color:rgba(255,255,255,.3);
  vertical-align:bottom;
}
.matrix thead abbr{text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.35)}

/* the client column is the row label: left aligned and sticky so it stays readable
   while the app columns scroll under it */
.matrix .c-client,
.matrix tbody th,
.matrix tfoot th{
  position:sticky;
  left:0;
  z-index:1;
  text-align:left;
  background:#0a0a0c;
  font-weight:700;
}
.matrix tbody th{font-size:.9rem;color:#fff}

.matrix tbody tr[hidden]{display:none}
.matrix tbody tr:hover td,
.matrix tbody tr:hover th{background:rgba(255,255,255,.06)}

/* Held vs not held is carried by the GLYPH, not by colour alone. */
.matrix .yes{color:#fff;font-size:1rem}
.matrix .no{color:rgba(255,255,255,.25)}

.matrix .c-total{
  text-align:right;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  color:#fff;
}

.matrix tfoot{background:rgba(255,255,255,.04)}
.matrix tfoot th,
.matrix tfoot td{
  border-bottom:0;
  border-top:1px solid rgba(255,255,255,.3);
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.8rem;
  color:rgba(255,255,255,.75);
}
.matrix tfoot th{font-family:var(--sans);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em}
.matrix tfoot tr:last-child td{color:#fff}

/* Status is carried by the WORD, not only by colour — a green dot alone is invisible
   to anyone who cannot distinguish it. */
.badge{
  padding:.3em .6em;
  border:1px solid currentColor;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  white-space:nowrap;
}
.badge-ok{color:rgba(255,255,255,.55)}
.badge-update{color:#e8c25a}

.app .body{margin-bottom:1rem;max-width:60ch}

/* version and build facts, set small and monospaced so numbers line up and scan */
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.5rem;
  margin:0 0 1.35rem;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.82rem;
  color:rgba(255,255,255,.55);
}
.meta b{color:#fff;font-weight:700}

.app-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.app-actions .action{padding:.7em 1.2em}

@media (max-width:560px){
  .app{padding:1.25rem 1.1rem}
  .app-actions .action{width:100%;text-align:center}
}

/* ── portal (server-rendered: login, hub, admin) ────────────────── */

.portal-section{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  align-content:start;
  padding:clamp(8rem,18vh,11rem) clamp(1.5rem,6vw,5rem) clamp(5rem,12vh,8rem);
}

/* sign out is a POST form, so it needs to sit in the nav like a link */
.nav-form{margin:0;display:inline}
button.nav-login{
  background:none;
  border:0;
  border-left:1px solid rgba(255,255,255,.32);
  color:#fff;
  font:inherit;
  text-transform:uppercase;
  cursor:pointer;
}

.signin{max-width:22rem;margin-top:2rem}
.field{margin:0 0 1.25rem}
.field label{
  display:block;
  margin-bottom:.4rem;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.6);
}
.field input{
  width:100%;
  padding:.8rem .9rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  color:#fff;
  font-family:var(--sans);
  font-size:1rem;
  -webkit-appearance:none;
  appearance:none;
}
.field input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.09)}
.field button{cursor:pointer;border-width:2px}

.tile-none{
  grid-column:1 / -1;
  padding:2rem;
  border:1px dashed rgba(255,255,255,.25);
  color:rgba(255,255,255,.6);
  text-align:center;
}

/* ── NAIC Receptionist (front desk on our own site) ─────────────── */

#reception{
  position:fixed;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.75rem;
}

/* A square, worded button — not a speech bubble. It says what it is. */
.rc-launch{
  padding:.85em 1.4em;
  background:#fff;
  border:2px solid #fff;
  color:#000;
  font-family:var(--sans);
  font-size:clamp(.72rem,1vw,.8rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.rc-launch:hover,
.rc-launch:focus-visible{background:transparent;color:#fff}
.rc-launch:focus-visible{outline:2px solid #fff;outline-offset:3px}

.rc-panel{
  order:-1;
  width:min(23rem,calc(100vw - 2rem));
  max-height:min(32rem,calc(100vh - 8rem));
  display:flex;
  flex-direction:column;
  background:#08080a;
  border:1px solid rgba(255,255,255,.3);
}
.rc-panel[hidden]{display:none}

.rc-head{
  position:relative;
  padding:1rem 2.6rem 1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.rc-title{
  margin:0;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.rc-sub{
  margin:.2rem 0 0;
  font-size:.72rem;
  color:rgba(255,255,255,.5);
}
.rc-close{
  position:absolute;
  top:.7rem;right:.7rem;
  width:1.8rem;height:1.8rem;
  background:none;border:0;
  color:rgba(255,255,255,.6);
  font-size:1.3rem;line-height:1;
  cursor:pointer;
}
.rc-close:hover{color:#fff}

.rc-log{
  flex:1 1 auto;
  overflow-y:auto;
  padding:1.1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.rc-msg p{margin:0;font-size:.88rem;line-height:1.5}

.rc-you{align-self:flex-end;max-width:85%}
.rc-you p{
  padding:.6rem .8rem;
  background:rgba(255,255,255,.12);
  color:#fff;
}

.rc-desk{align-self:flex-start;max-width:95%}
.rc-desk p{color:rgba(255,255,255,.82)}

.rc-cta{
  display:inline-block;
  margin-top:.7rem;
  padding:.5em 1em;
  border:1px solid #fff;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
}
.rc-cta:hover{background:#fff;color:#000}

.rc-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.rc-chip{
  padding:.4em .7em;
  background:none;
  border:1px solid rgba(255,255,255,.3);
  color:rgba(255,255,255,.8);
  font-family:var(--sans);
  font-size:.72rem;
  cursor:pointer;
}
.rc-chip:hover{border-color:#fff;color:#fff}

/* the affordance no bought-in widget has: show the rule that fired */
.rc-why{
  margin-top:.6rem;
  padding:0;
  background:none;border:0;
  color:rgba(255,255,255,.4);
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:underline;
  cursor:pointer;
}
.rc-why:hover{color:rgba(255,255,255,.75)}
.rc-reason{
  margin:.45rem 0 0;
  padding:.5rem .6rem;
  border-left:2px solid rgba(255,255,255,.3);
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.7rem;
  line-height:1.45;
  color:rgba(255,255,255,.55);
}

.rc-form{
  display:flex;
  gap:.5rem;
  padding:.8rem 1.1rem;
  border-top:1px solid rgba(255,255,255,.2);
}
.rc-input{
  flex:1 1 auto;
  min-width:0;
  padding:.6rem .7rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  color:#fff;
  font-family:var(--sans);
  font-size:.85rem;
  -webkit-appearance:none;
  appearance:none;
}
.rc-input:focus{outline:none;border-color:#fff}
.rc-send{
  padding:.6rem .9rem;
  background:#fff;border:0;
  color:#000;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
}

.rc-foot{
  margin:0;
  padding:0 1.1rem 1rem;
  font-size:.68rem;
  line-height:1.45;
  color:rgba(255,255,255,.4);
}
.rc-foot a{color:rgba(255,255,255,.7)}

@media (max-width:480px){
  .rc-panel{max-height:calc(100vh - 7rem)}
}

/* ── contact ────────────────────────────────────────────────────── */

/* No form. A form is a promise that something is listening; these are real handoffs —
   mailto: opens the client's own mail app, tel: dials on a phone and hands off to the
   desktop's call handler otherwise. Set large enough to be a comfortable tap target. */
.contact{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(1.5rem,4vh,2.25rem);
}

.contact-key{
  display:block;
  margin-bottom:.5rem;
  font-size:clamp(.72rem,1vw,.82rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.5);
}

.contact-val{
  position:relative;
  display:inline-block;
  padding-bottom:.18em;
  color:#fff;
  font-size:clamp(1.35rem,3.4vw,2.25rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.005em;
  text-decoration:none;
  /* a long address must wrap rather than overflow, but break only when it genuinely
     cannot fit — word-break:break-word chopped short addresses mid-word for no reason */
  overflow-wrap:anywhere;
  transition:opacity .22s ease;
}

/* same rule-draws-in behaviour as the nav, so the site has one link idiom */
.contact-val::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.contact-val:hover,
.contact-val:focus-visible{opacity:.72}
.contact-val:hover::after,
.contact-val:focus-visible::after{transform:scaleX(1)}
.contact-val:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:1px}

@media (prefers-reduced-motion:reduce){
  .contact-val,.contact-val::after{transition:none}
}

/* ── booking (audit diary) ──────────────────────────────────────── */

.booking{
  margin-top:clamp(2.75rem,7vh,4rem);
  padding-top:clamp(2rem,5vh,2.75rem);
  border-top:1px solid rgba(255,255,255,.2);
}

.booking h3{
  margin:0 0 .6rem;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
}

.booking-note{
  margin:0 0 1.5rem;
  max-width:52ch;
  font-size:.92rem;
  line-height:1.55;
  color:rgba(255,255,255,.6);
}

/* month calendar */
.cal{
  max-width:24rem;
  margin-bottom:1.5rem;
  border:1px solid rgba(255,255,255,.22);
}

.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  padding:.7rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.cal-month{
  margin:0;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cal-nav{
  width:2rem;height:2rem;
  background:none;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:1.1rem;line-height:1;
  cursor:pointer;
}
.cal-nav:hover:not(:disabled){border-color:#fff;background:rgba(255,255,255,.1)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cal-dows,
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}

.cal-dows{
  padding:.6rem .5rem .3rem;
  gap:.15rem;
}
.cal-dows span{
  text-align:center;
  font-size:.6rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.45);
}

.cal-grid{
  padding:.3rem .5rem .6rem;
  gap:.15rem;
}

.cal-cell{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  background:none;
  border:1px solid transparent;
  color:#fff;
  font-family:var(--sans);
  font-size:.85rem;
  cursor:pointer;
}
button.cal-cell:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
button.cal-cell:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* unavailable days stay visible but inert, so the month still reads as a month */
.cal-cell.is-off{color:rgba(255,255,255,.22);cursor:default}
.cal-cell.is-blank{cursor:default}

/* today is marked by an outline; the SELECTED day is filled — two different signals,
   so neither depends on colour alone */
.cal-cell.is-today{border-color:rgba(255,255,255,.4)}
.cal-cell.is-on{background:#fff;border-color:#fff;color:#000;font-weight:700}

/* time slots for the chosen day */
.slots{margin-bottom:1.5rem}
.slots-hint{
  margin:0 0 .7rem;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
}
.slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));
  gap:.35rem;
  max-width:24rem;
}
.slot{
  padding:.55em .3em;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.82rem;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.slot:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.09)}
.slot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.slot.is-on{background:#fff;border-color:#fff;color:#000;font-weight:700}

/* a slot someone else holds: visible so the day still reads honestly, but inert */
.slot:disabled{
  opacity:.3;
  cursor:default;
}
.slot:disabled:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.04)}

/* contact fields reuse the portal's .field look; two-up where there is room */
.booking-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1.25rem;
  margin-top:1.5rem;
}
.booking-details .field:last-child{grid-column:1 / -1}
@media (max-width:560px){
  .booking-details{grid-template-columns:1fr}
  .booking-details .field:last-child{grid-column:auto}
}

.booking-actions{margin:0}
button.action{font-family:var(--sans);background:transparent;cursor:pointer}
button.action-solid{background:#fff}
button.action:disabled{opacity:.35;cursor:default}
button.action-solid:disabled:hover,
button.action-solid:disabled:focus-visible{background:#fff;color:#000}
.booking-chosen{
  margin:.9rem 0 0;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.8rem;
  color:rgba(255,255,255,.6);
}

/* ── scoping questionnaire ──────────────────────────────────────── */

.scope{
  margin-top:clamp(2.75rem,7vh,4rem);
  padding-top:clamp(2rem,5vh,2.75rem);
  border-top:1px solid rgba(255,255,255,.2);
}

.scope h3{
  margin:0 0 .6rem;
  font-size:clamp(1.05rem,1.9vw,1.35rem);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.scope-opt{
  margin-left:.6rem;
  padding:.25em .5em;
  border:1px solid rgba(255,255,255,.3);
  font-size:.55em;
  letter-spacing:.12em;
  color:rgba(255,255,255,.6);
  vertical-align:middle;
}

.scope-q{margin-bottom:1.5rem}
.scope-label{
  margin:0 0 .6rem;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
}

.scope-opts{display:flex;flex-wrap:wrap;gap:.35rem}
.scope-pick{
  padding:.55em .9em;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-family:var(--sans);
  font-size:.82rem;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
}
.scope-pick:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.09)}
.scope-pick:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* selected is filled AND aria-pressed, so it never depends on colour alone */
.scope-pick.is-on{background:#fff;border-color:#fff;color:#000;font-weight:700}

.scope-out{
  margin:1.75rem 0;
  padding:1.1rem 1.25rem;
  border-left:2px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.03);
}
.scope-out p{
  margin:0 0 .8rem;
  max-width:58ch;
  font-size:.95rem;
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
.scope-out p:last-child{margin-bottom:0}
.scope-out b{color:#fff}
.scope-maybe{color:rgba(255,255,255,.62)}
.scope-next{border-top:1px solid rgba(255,255,255,.15);padding-top:.8rem}

.scope-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.scope-actions .action{cursor:pointer;font-family:var(--sans)}

/* free text — where the real job usually is */
.scope-free{
  margin-top:2rem;
  padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.scope-free .field{margin-bottom:1.1rem;max-width:44rem}
.scope-free label{
  display:block;
  margin-bottom:.4rem;
  font-size:.85rem;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:rgba(255,255,255,.72);
}
.scope-free input,
.scope-free textarea{
  width:100%;
  padding:.7rem .8rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.28);
  border-radius:0;
  color:#fff;
  font-family:var(--sans);
  font-size:.95rem;
  line-height:1.5;
  resize:vertical;
  -webkit-appearance:none;
  appearance:none;
}
.scope-free input::placeholder,
.scope-free textarea::placeholder{color:rgba(255,255,255,.35)}
.scope-free input:focus,
.scope-free textarea:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.09)}

/* the pointer from the contact section to the scoping page */
.scope-link{
  margin:clamp(2.25rem,6vh,3rem) 0 0;
  padding-top:clamp(1.75rem,4vh,2.25rem);
  border-top:1px solid rgba(255,255,255,.2);
  max-width:56ch;
  font-size:.98rem;
  line-height:1.6;
  color:rgba(255,255,255,.72);
}
.scope-link a{color:#fff}

#scopepage{align-content:start;min-height:100vh;min-height:100svh}

/* ── holding page ───────────────────────────────────────────────── */

/* The launch page: wordmark, one message, one way to reach us. No nav, because there
   is nowhere yet to go — a menu of dead links reads worse than an honest holding page. */
.holding{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(9rem,22vh,13rem) clamp(1.5rem,6vw,5rem) clamp(4rem,10vh,6rem);
}

.holding-in{max-width:46ch}

.holding-tag{
  margin:0 0 1.4rem;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgba(255,255,255,.5);
}

.holding-lead{
  margin:0 0 1.25rem;
  font-size:clamp(1.5rem,4vw,2.4rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  color:#fff;
}

.holding-body{
  margin:0 0 2.25rem;
  font-size:clamp(1rem,1.2vw,1.1rem);
  line-height:1.6;
  color:rgba(255,255,255,.72);
}

/* The only other thing on the page: when it opens.
   Same face and same treatment as the wordmark — var(--sans), bold, uppercase, and
   crucially the SAME .005em tracking. Wide tracking is what makes caps read as a
   different typeface even when the family is identical. */
.holding-when{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(1.05rem,2.1vw,1.75rem);
  font-weight:700;
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.005em;
  color:#fff;
}

@media (max-width:640px){
  /* the stacked wordmark is tall on a phone — keep the message clear of it */
  .holding{padding-top:clamp(11rem,30vh,14rem)}
}

/* ── skip link ──────────────────────────────────────────────────── */

.skip{
  position:absolute;
  left:-9999px;
  z-index:9;
}
.skip:focus{
  left:clamp(1.5rem,3.5vw,2.5rem);
  top:clamp(1.5rem,3.5vw,2.5rem);
  padding:.7rem 1.1rem;
  background:#fff;
  color:#000;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  text-decoration:none;
}

/* ── narrow screens ─────────────────────────────────────────────── */

/* A four-item row would collide with the mark, so the nav stacks right-aligned —
   mirroring the wordmark's block instead of shrinking into illegibility. */
@media (max-width:640px){
  .nav{
    flex-direction:column;
    align-items:flex-end;
    gap:.1rem;
    font-size:.95rem;
  }
  .nav a{padding-bottom:.1em}

  /* stacked, the divider has to move from the side to the top */
  .nav-login{
    margin-left:0;
    padding-left:0;
    border-left:0;
    margin-top:.45rem;
    padding-top:.45rem;
    border-top:1px solid rgba(255,255,255,.32);
  }

  section{padding-top:clamp(12rem,30vh,16rem)}
}