:root{
  /* Navy carries the brand and the blue accent marks the live edge of it: the
     figure that was read, the label that names a source, the state of a thing.
     Sand is held back for the one rule per page that closes an argument. */
  --navy:#0F2A43;
  --navy-d:#0B2033;       /* the footer, and panels sitting inside a navy band */
  --accent:#2F6FB5;
  --accent-l:#7FB2E8;     /* the accent, legible on navy */
  --sand:#B8956A;
  /* Which dark goes where. The green carries the story: why now, the gap,
     the pitch, the pages that make the argument. The navy carries the
     technical and the hardware: specifications, the product page, Sense.
     A page about the argument leans green; a page about the machinery leans
     blue. */
  --deep:#1B3A34;
  --deep-soft:#C4D3CF;    /* inv-soft, for text on the green */
  --deep-l:#9FC4B8;       /* accent-l, for rules and marks on the green */
  --deep-d:#10231F;       /* the green, darker: a heading row inside a table */
  --paper:#FBFAF8;        /* the page itself: off white by a hair, warm by less */
  --ground:#F4F3F0;       /* the tinted section: a step darker, not yellower.
                             The rest of the difference is grain (grain.css). */
  --line:#DCDAD6;
  --line-soft:#EAE9E6;
  --line-inv:rgba(255,255,255,.16);
  --ink:#15242F;
  --txt:#33424D;
  --muted:#63727E;
  --inv-soft:#B9CBD8;
  --ok:#1B7F5E;           /* the one green: something is running */
  --ok-bg:#EDF9F4;
  --ok-line:#B7E0CE;
  --disp:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 16px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{padding:82px 0}
section.tint{background:var(--ground)}
h1,h2,h3,h4{font-family:var(--disp);color:var(--navy);letter-spacing:-.015em}
h1{font-size:clamp(32px,4.2vw,52px);font-weight:700;line-height:1.08}
h2{font-size:clamp(25px,2.9vw,36px);font-weight:700;line-height:1.16}
h3{font-size:19px;font-weight:600}
.lede{font-size:18px;line-height:1.6}
.rule{font-family:var(--disp);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:22px}
.rule span{color:var(--accent);margin-right:6px}
.eyebrow{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.sechead{max-width:66ch;margin-bottom:40px}
.sechead p{color:var(--txt);font-size:17px}

/* NAV */
/* The bar lifts out of the way as you read down the page. The script at the
   foot of the document drives the transform; all this rule owes it is a layer
   to move on. */
header{position:sticky;top:0;z-index:60;background:rgba(251,250,248,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);will-change:transform}
.nav{display:flex;align-items:center;gap:30px;height:64px}
.brand{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.26em;text-transform:uppercase;color:var(--navy)}
.brand span{color:var(--accent)}
.navlinks{display:flex;gap:22px;align-items:center}
.navitem{position:relative}
/* Every entry in the bar is a link to its own page. The four with a menu under
   them carry the caret, and up here the menu opens on hover, which leaves the
   click free to do the obvious thing and go to the page. */
.navitem>.navtop{font-size:14px;font-weight:500;color:var(--ink);padding:21px 0;display:flex;gap:6px;align-items:center}
.navitem>.navtop:hover{color:var(--accent)}
.navitem>.navtop.has-mega:after{content:"";width:5px;height:5px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
/* The caret is only a control of its own where there is no hover to open the
   menu with. Above 1040px it is not in the bar at all. */
.navdisc{display:none}
.mega{position:absolute;top:62px;left:-24px;min-width:640px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(15,42,67,.14);padding:26px 28px;display:none;grid-template-columns:1fr 1fr;gap:22px 40px}
.navitem:hover .mega,.navitem:focus-within .mega{display:grid}
.megacol h5{font-family:var(--disp);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
.megacol a{display:block;font-size:13.5px;padding:4px 0}
.megacol a:hover{color:var(--accent)}
.megacol a small{display:block;font-size:12px;color:var(--muted)}
.navcta{margin-left:auto;display:flex;gap:12px}
.btn{display:inline-block;font-family:var(--disp);font-size:13.5px;font-weight:600;padding:11px 20px;border:1px solid var(--navy);color:var(--navy);transition:background .2s,border-color .2s,color .2s}
.btn.solid{background:var(--navy);color:#fff}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* The bar has to hold the wordmark, five links and two calls to action on one
   line, and needs about 990px to do it. Below that the buttons start wrapping
   mid-word, so at 1040 the links fold away behind a toggle. Nothing in the bar
   is allowed to squash on the way there. */
.brand,.navcta,.navtoggle{flex:0 0 auto}
.navcta .btn{white-space:nowrap}
.navtoggle{display:none}

/* Crossing between the two modes. Which mode a page loads in is settled by the
   media query below, on the first paint and without script, so this fade is
   only ever for a window that actually crosses the line — which is why the
   script adds the class rather than the stylesheet carrying it. */
@keyframes nav-swap{from{opacity:0}to{opacity:1}}
header.swap .navlinks,header.swap .navcta,header.swap .navtoggle{animation:nav-swap .26s ease-out both}
/* Held for the two frames either side of the swap, so the panel and the bars of
   the toggle change mode outright instead of transitioning between two layouts
   that have nothing to do with each other. */
header.noanim .navlinks,header.noanim .navtoggle span{transition:none}
@media(prefers-reduced-motion:reduce){
  header.swap .navlinks,header.swap .navcta,header.swap .navtoggle{animation:none}
}

/* hero: the blurb */
.hero{background:linear-gradient(180deg,var(--ground),var(--paper));padding:88px 0 76px;border-bottom:1px solid var(--line-soft)}
.hero h1{max-width:22ch;margin-bottom:26px}
.hero .lede{max-width:64ch;color:#2C3A45}
.hero .lede+.lede{color:#3B4A55;font-size:17px}
.hero .case{align-items:center}
.hbtns{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}

/* fusion */
.fusion{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:30px}
.fq{border:1px solid var(--line);background:#fff;padding:22px}
.fq h4{font-size:16px;margin-bottom:8px}
.fq p{font-size:14px;color:#4A5966;margin:0}
.fjoin{background:var(--navy);color:#fff;padding:28px 30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.fjoin b{font-family:var(--disp);font-size:19px;color:#fff;letter-spacing:-.01em}
.fjoin span{color:var(--inv-soft);font-size:15.5px;max-width:70ch}

/* stories */
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.story{border-top:2px solid var(--navy);padding-top:18px}
.story .k{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.06em}
.story h4{font-size:16.5px;margin:9px 0 8px;line-height:1.32}
.story p{font-size:14px;color:#3B4A55;margin:0}

/* day */
.day{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:#fff}
.slot{padding:24px 20px;border-right:1px solid var(--line)}
.slot:last-child{border-right:0}
.slot .t{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.06em}
.slot h4{font-size:14.5px;margin:10px 0 8px;line-height:1.34}
.slot p{font-size:13.5px;color:#3B4A55;margin:0}

/* industries */
.inds{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ind{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 22px;background:#fff}
.ind b{font-family:var(--disp);display:block;font-size:15px;color:var(--navy);margin-bottom:5px}
.ind span{font-size:13.5px;color:#4A5966}
/* The same cells, read down the column instead of across: one group per
   column with its name at the head, so twelve industries arrive as four
   families rather than a dozen tiles. */
.inds.groups{grid-template-rows:auto repeat(3,1fr);grid-auto-flow:column}
a.ind{display:block;transition:background .2s}
a.ind:hover{background:var(--ground)}
a.ind:hover b{color:var(--accent)}
.ind.h{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);padding:12px 22px;background:var(--ground)}

/* case */
.case{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.case .map-shot{margin-top:0}
.caserow{border-top:1px solid var(--line);padding:17px 0}
.caserow h4{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.caserow p{font-size:15px;color:var(--txt);margin:0}
.parties{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.party{border:1px solid var(--line);padding:18px;background:#fff}
.party b{font-family:var(--disp);display:block;color:var(--navy);font-size:15px;margin-bottom:6px}
.party span{font-size:13.5px;color:#4A5966}

/* band */
.band{background:var(--navy);color:var(--inv-soft)}
.band h2,.band h3,.band h4{color:#fff}
.band .rule{color:#fff}
.band .rule span{color:var(--accent-l)}
.band .sechead p{color:var(--inv-soft)}
/* The physical foundation sits on the green rather than the navy: the one
   section about the product itself, not the record of it. */
.band.deep{background:var(--deep);color:var(--deep-soft)}
.band.deep .rule span{color:var(--deep-l)}
.band.deep .sechead p{color:var(--deep-soft)}
.band.deep .gen article{border-top-color:var(--deep-l)}
.band.deep .gen p{color:var(--deep-soft)}
.band strong{color:#fff;font-weight:600}
.band .btn{border-color:#fff;color:#fff}
.band .btn:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.band .intro p{font-size:17px;max-width:74ch}
.band .coda{margin-top:40px;font-size:17px;max-width:80ch}
.gen.two{grid-template-columns:1fr 1fr}
.gen .span{grid-column:1/-1}
.gen{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.gen article{border-top:2px solid var(--accent-l);padding-top:18px}
.gen h4{font-size:16px;margin-bottom:8px}
.gen p{font-size:14.5px;color:var(--inv-soft);margin:0}

/* moves */
.moves{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:#fff}
.move{padding:24px 20px;border-right:1px solid var(--line)}
.move:last-child{border-right:0}
.move .n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.move h4{font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin:8px 0 10px}
.move p{font-size:13.5px;color:#3B4A55;margin:0}

/* products */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod{border:1px solid var(--line);padding:24px;background:#fff}
.prodtop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.pill{font-family:var(--disp);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.pill.live{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.prod h3{font-size:17px;margin-bottom:8px}
.prod .q{font-family:var(--disp);font-size:13.5px;color:var(--accent);margin-bottom:10px;line-height:1.35}
.prod p{font-size:14px;color:#3B4A55;margin:0}
.prod .btn{margin-top:18px}

/* capability groups
   What a surface actually does, named rather than described: a heading with the
   working list under it, four groups to a row. The rule under each heading is
   the same one that closes a cell in .inds, so the two read as one family. */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 32px}
.capgroup h4{font-size:15px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.capgroup ul{list-style:none}
.capgroup li{font-size:13.5px;color:#4A5966;padding:3px 0}

/* pricing */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{border:1px solid var(--line);padding:28px;background:#fff}
.pcard h4{font-size:18px;margin-bottom:4px}
.pcard .amt{font-family:var(--mono);font-size:14px;color:var(--accent);margin-bottom:12px}
.pcard p{font-size:14.5px;color:#3B4A55;margin:0}
.pnote{margin-top:24px;border-top:2px solid var(--sand);padding-top:16px;font-size:15px;color:var(--txt);max-width:80ch}
.pnote a{color:var(--accent)}

/* comparison table
   Capabilities down the side, systems across the top, Terrafa in the last
   column and lit so the eye lands there. Group rows sit on the dark green: a
   table that makes the argument, so it takes the story colour. Three marks
   only: a filled green dot for yes, a bronze one for partial, a grey ring with
   a cross for not offered. Scrolls inside its own wrapper on a phone. */
.cmp-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.cmp{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;font-size:16px}
.cmp th,.cmp td{padding:24px 22px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line-soft)}
.cmp th:first-child,.cmp td:first-child{text-align:left;padding-left:28px;width:38%}
.cmp thead th{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.25;color:var(--ink);vertical-align:bottom;padding-top:28px;padding-bottom:18px;border-bottom:0}
.cmp thead th:first-child{font-weight:600;font-size:15.5px}
.cmp thead th small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.03em;color:var(--muted);margin-top:7px;line-height:1.5}
.cmp thead th.us{background:#2E5A4B;color:#fff;vertical-align:middle}
.cmp thead th.us small{color:#A9C9BB}
.cmp tbody th{font-family:var(--disp);font-weight:500;font-size:16.5px;line-height:1.3;color:var(--ink)}
.cmp tr.grp th{background:#102A26;color:#fff;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:17px 28px;border-bottom:0;width:auto;text-align:left}
.cmp tr.grp th i{font-style:normal;color:#9FC4B8;margin:0 8px}
.cmp td.us{background:#E9EFEB}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.mark{display:inline-block;width:28px;height:28px;border-radius:50%;vertical-align:middle}
.mark.yes{background:#3A7D5C}
.mark.part{background:#B07C3A}
.mark.no{color:#C9CED2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* faq */
.faq{max-width:920px}
details{border-bottom:1px solid var(--line);padding:17px 0}
summary{font-family:var(--disp);font-size:16.5px;font-weight:600;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-family:var(--mono);color:var(--accent);font-size:20px}
details[open] summary:after{content:"–"}
details p{margin:13px 0 0;font-size:15.5px;color:var(--txt);max-width:80ch}

/* resources */
.res{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rcard{border:1px solid var(--line);padding:22px;background:#fff}
.rcard .k{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.08em}
.rcard h4{font-size:16px;margin:9px 0 7px;line-height:1.32}
.rcard p{font-size:13.5px;color:#4A5966;margin:0}

/* news
   A list, not a grid: one row per piece, so the titles stack in a single column
   and read straight down however many of them there are. The thumbnail is drawn
   inline in the page rather than fetched, which keeps a press list that is ours
   to style, costs no request, and takes no third party's artwork onto the site.
   The whole row is the link; everything in it is the target. */
.news{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.narticle{display:grid;grid-template-columns:288px 1fr;gap:28px;align-items:center;padding:22px;background:#fff;transition:background .2s}
.narticle:hover{background:var(--ground)}
.nshot{position:relative;aspect-ratio:16/9;background:var(--navy-d);overflow:hidden}
.nfield{display:block;width:100%;height:100%}
/* The palette the rest of the site uses on navy: hairlines in the inverted line
   colour, the read in the legible accent, and the one sand mark for the latest
   point on the trace. */
.nfield .grid{stroke:var(--line-inv);stroke-width:1}
.nfield .trace{fill:none;stroke:var(--accent-l);stroke-width:2}
.nfield .node{fill:var(--accent-l)}
.nfield .head{fill:var(--sand)}
.nsrc{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.nmeta{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.06em}
.narticle h3{font-size:19px;margin:9px 0 8px;line-height:1.3;transition:color .2s}
.narticle:hover h3{color:var(--accent)}
.narticle p{font-size:14.5px;color:#3B4A55;margin:0 0 13px;max-width:72ch}
.nread{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:13px;font-weight:600;color:var(--accent)}
.nread svg{width:12px;height:12px;stroke-linecap:square;stroke-linejoin:miter}

/* the two product shots, on paper and on navy */
.map-shot{margin-top:56px}
.map-frame{border:1px solid var(--line);overflow:hidden;background:#fff}
.map-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--ground)}
.map-bar .id{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.map-bar .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.map-bar .live::before{content:"";width:6px;height:6px;background:var(--accent)}
.map-frame img{display:block;width:100%;height:auto}
/* The live app, framed at the screenshot's own ratio so the section keeps its height while
   the wasm bundle loads. The still is held as the narrow fallback: the app is a desktop UI
   and its own layout, not this frame, is what stops working below 720px. */
.map-live{display:block;width:100%;aspect-ratio:2000/1104;border:0;background:var(--ground)}
.map-frame img.map-fallback{display:none}
/* The way out of the embed, since a cross-origin frame cannot offer one itself: a large
   corner target that reads as glass over the app and firms up only when it is pointed at. */
.map-stage{position:relative}
/* The live embed carries no chrome of its own, so it takes the button's navy rule instead
   of the hairline the still shots sit in: it is the app, not a picture of it. */
.map-frame.is-live{border-color:var(--navy)}
.map-open{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:76px;height:76px;color:var(--navy);background:rgba(255,255,255,.5);border-left:1px solid var(--navy);border-bottom:1px solid var(--navy);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:background .18s ease,color .18s ease}
.map-open svg{width:30px;height:30px;stroke-linejoin:miter;stroke-linecap:square}
.map-open:hover,.map-open:focus-visible{background:rgba(255,255,255,.94);color:var(--accent)}
.map-note{margin-top:16px;font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--muted);max-width:80ch}
.map-reads{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:24px;background:var(--line);border:1px solid var(--line)}
.map-read{background:#fff;padding:20px 22px}
.map-read .k{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px}
.map-read p{font-size:14px;line-height:1.6;color:var(--txt);margin:0}
.map-shot.on-dark .map-frame{border-color:var(--line-inv);background:var(--navy-d)}
.map-shot.on-dark .map-bar{border-bottom-color:var(--line-inv);background:rgba(255,255,255,.05)}
.map-shot.on-dark .map-bar .id{color:var(--inv-soft)}
.map-shot.on-dark .map-bar .live{color:var(--accent-l)}
.map-shot.on-dark .map-bar .live::before{background:var(--accent-l)}
.map-shot.on-dark .map-note{color:var(--inv-soft)}
.map-shot.on-dark .map-reads{background:var(--line-inv);border-color:var(--line-inv)}
.map-shot.on-dark .map-read{background:var(--navy-d)}
.map-shot.on-dark .map-read .k{color:var(--accent-l)}
.map-shot.on-dark .map-read p{color:var(--inv-soft)}
.map-basis{margin-top:22px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--muted);border-left:2px solid var(--sand);padding:6px 0 6px 16px;max-width:840px}
.map-basis p+p{margin-top:14px}
.map-basis b{font-weight:600;color:var(--navy)}
.map-shot.on-dark .map-basis{color:var(--inv-soft)}
.map-shot.on-dark .map-basis b{color:#fff}

.cta{background:var(--navy);color:#fff;padding:72px 0}
.cta h2{color:#fff;max-width:20ch;margin-bottom:16px}
.cta p{color:var(--inv-soft);max-width:54ch}
.cta .btn{border-color:#fff;color:#fff}
.cta .btn:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.cta .btn.solid{background:#fff;color:var(--navy);border-color:#fff}
.cta .btn.solid:hover{background:var(--accent-l);border-color:var(--accent-l);color:var(--navy)}
.cta.deep{background:var(--deep)}
.cta.deep p{color:var(--deep-soft)}
.cta.deep .btn.solid{color:var(--deep)}
.cta.deep .btn.solid:hover{background:var(--deep-l);border-color:var(--deep-l);color:var(--deep)}
footer{background:var(--navy-d);color:#9FB6C8;padding:54px 0 30px;font-size:13.5px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
footer h6{font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px;font-weight:600}
footer a{display:block;padding:4px 0;color:#9FB6C8}
footer a:hover{color:#fff}
.fbrand{font-family:var(--disp);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#fff;font-size:16px;margin-bottom:12px}
.fbrand span{color:var(--accent-l)}
.fbot{margin-top:36px;border-top:1px solid var(--line-inv);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12.5px}
.fbot a{display:inline;padding:0}

.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:1040px){
  /* NAV, folded. The links leave the bar for a panel underneath it, and the
     toggle takes their place. */
  .navtoggle{
    display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:40px;height:40px;padding:0 10px;margin-left:14px;
    border:1px solid var(--navy);background:none;cursor:pointer;
  }
  .navtoggle span{display:block;height:1.5px;background:var(--navy);transition:transform .22s,opacity .22s}
  header.open .navtoggle span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  header.open .navtoggle span:nth-child(2){opacity:0}
  header.open .navtoggle span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* Hung off the header rather than the bar, so it spans the full width the way
     the bar's own bottom edge does. */
  .navlinks{
    position:absolute;top:100%;left:0;right:0;display:block;
    background:var(--paper);border-bottom:1px solid var(--line);
    box-shadow:0 24px 60px rgba(15,42,67,.14);
    padding:0 0 12px;
    max-height:calc(100vh - 65px);
    max-height:calc(100dvh - 65px);
    overflow-y:auto;
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  header.open .navlinks{visibility:visible;opacity:1;transform:none}

  .navitem+.navitem{border-top:1px solid var(--line-soft)}

  /* There is no hover here, so the two jobs the caret used to share are split:
     the label goes to the page, and the caret beside it opens the menu. The row
     wraps, which puts the menu on its own line underneath both of them. */
  .navitem{display:flex;flex-wrap:wrap;align-items:stretch}
  .navitem>.navtop{flex:1;padding:14px 32px;font-size:15px}
  .navitem>.navtop.has-mega:after{display:none}
  .navdisc{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 60px;background:none;border:0;cursor:pointer;
    border-left:1px solid var(--line-soft);
  }
  .navdisc:after{
    content:"";width:6px;height:6px;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
    transform:rotate(45deg);margin-bottom:3px;transition:transform .22s,margin .22s;
  }
  .navitem.open .navdisc:after{transform:rotate(-135deg);margin-bottom:0;margin-top:3px}

  /* The dropdown panels become sections of the one panel: in flow, one column,
     and opened by tapping rather than by hovering, which a touch screen has no
     way to do. */
  .mega{
    position:static;min-width:0;border:0;box-shadow:none;
    padding:0 32px 16px;grid-template-columns:1fr;gap:18px;
    flex:1 0 100%;
  }
  .navitem:hover .mega,.navitem:focus-within .mega{display:none}
  .navitem.open .mega{display:grid}
  .megacol a{padding:7px 0}

  .fusion,.stories,.inds,.res{grid-template-columns:repeat(2,1fr)}
  .narticle{grid-template-columns:224px 1fr;gap:22px}
  .day,.moves{grid-template-columns:repeat(2,1fr)}
  .slot,.move{border-bottom:1px solid var(--line)}
  .gen,.price,.prods{grid-template-columns:1fr 1fr}
  .case{grid-template-columns:1fr;gap:36px}
  .fgrid{grid-template-columns:1fr 1fr}
  .map-reads{grid-template-columns:1fr}
}
@media(max-width:720px){
  .wrap{padding:0 20px}
  .navitem>button,.navitem>a,.mega{padding-left:20px;padding-right:20px}
  .fusion,.stories,.inds,.res,.gen,.price,.prods,.day,.moves,.parties{grid-template-columns:1fr}
  .gen.two{grid-template-columns:1fr}
  .inds.groups{grid-template-rows:none;grid-auto-flow:row}
  .narticle{grid-template-columns:1fr;gap:16px;padding:18px}
  section{padding:56px 0}
  .btn{font-size:12.5px;padding:10px 16px;white-space:nowrap}
  .map-live{display:none}
  .map-frame img.map-fallback{display:block}
}
/* Two calls to action will not sit beside the wordmark on a phone, and a
   wrapped button reads as a broken one, so the softer of the two stands down. */
@media(max-width:560px){
  .nav{gap:16px}
  .navcta .btn:not(.solid){display:none}
}

/* ─── The site as pages ─────────────────────────────────────────────────────
   What follows is what the split into pages needs and the single page did not:
   a shorter opening for a page that is not the home one, somewhere for the home
   page to hand off to, and the two small things a sticky bar owes an anchor. */

/* An anchor arrived at from another page would otherwise land underneath the
   bar. Everything addressable keeps the bar's height clear above it. */
[id]{scroll-margin-top:84px}

/* The bar says which of the five pages you are on. On the folded panel the same
   rule reads as the open section's heading, which is the same fact. */
.navitem.current>.navtop{color:var(--accent)}

/* PAGE HEAD
   Every page but the home one opens with this rather than the hero: the same
   gradient, the same rule above the title, at about half the height. The
   heading that sat on the section when it was one page is carried here, so a
   page states what it is before any of it scrolls. */
.pagehead{background:linear-gradient(180deg,var(--ground),var(--paper));padding:58px 0 46px;border-bottom:1px solid var(--line-soft)}
.pagehead .rule{margin-bottom:16px}
.pagehead h1{font-size:clamp(28px,3.4vw,42px);max-width:24ch;margin-bottom:18px}
.pagehead .lede{max-width:72ch;color:#2C3A45}

/* PATHS
   The home page keeps the argument and hands the rest off. Built like the day
   and the moves — five cells on one rule — because it is the same kind of row. */
.paths{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:#fff}
.path{display:block;padding:24px 20px;border-right:1px solid var(--line);transition:background .2s}
.path:last-child{border-right:0}
.path .k{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.06em}
.path h4{font-size:15px;margin:10px 0 8px;line-height:1.34;transition:color .2s}
.path p{font-size:13.5px;color:#3B4A55;margin:0}
.path:hover{background:var(--ground)}
.path:hover h4{color:var(--accent)}

@media(max-width:1040px){
  .caps{grid-template-columns:repeat(2,1fr)}
  .paths{grid-template-columns:repeat(2,1fr)}
  .path{border-bottom:1px solid var(--line)}
}
@media(max-width:720px){
  .paths{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .pagehead{padding:40px 0 34px}
}