/* v15: Swiss Paper, four pages (Home, Work, AI, About) sharing this file and site.js.
   Swiss poster type on an e-ink sheet; paper punk tiles that match the page and lift
   when touched; one window into the void (the AI section) with stars and the station.
   Night mode puts the whole page in the void, with layered stars.
   No header bar: the logo sits in the top-left margin (click it to switch day and night), a name tab hangs
   from the top center and drops down into the menu, and Get in touch sits in the top-right margin.
   Buttons are small windows into space; hovering spreads the accent from the center out.

   THE SUN COLOR: change --sun and the logo's sun and every accent follow it, day and night.
   --sun-on   : the text color that sits on top of a sun-colored fill.
   Bright yellow text can't be read on the light day paper, so by day accent text is plain ink and the color
   comes from sun fills and space chips (.chip: a starry strip with sun text). At night text uses the sun itself.
   v14's day blue was #0047FF (earlier options: sapphire #1D44B8, red #E3222B). */
:root{
  --sun:#F5B301; --sun-on:#0D0D0D;
  --day-accent:var(--sun);   --day-on-accent:var(--sun-on);
  --night-accent:var(--sun); --night-on-accent:var(--sun-on);

  --bg:#E7E7E3; --fill:#F1F1EE; --ink:#0D0D0D; --muted:#4A4A47; --frame:#0D0D0D; --soft:rgba(13,13,13,.18);
  --accent:var(--day-accent); --on-accent:var(--day-on-accent); --accent-text:var(--ink);
  /* HIGHLIGHTS (menu links, How we'll solve it rows, Home's case cards, chips): by day they fill with space and the text turns sun-colored;
     at night the page is already space, so they fill with the sun and the text goes dark. */
  --hl:var(--void); --hl-img:var(--stars); --hl-size:var(--stars-size); --on-hl:var(--sun);
  --band:#0D0D0D; --band-ink:#E7E7E3;
  --void:#040509; --void-ink:#E3ECF0; --void-muted:#AEBBC3; --void-edge:rgba(227,236,240,0);
  --stars-on:0;
  --mark-ink:#1A1A1A; --mark-sun:var(--sun);
  /* a starfield texture: three tiled layers whose tile sizes don't line up, so the dots never read as a grid */
  --stars:
    radial-gradient(circle at 17px 23px, rgba(227,236,240,.95) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 61px 9px, rgba(227,236,240,.6) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 8px 31px, rgba(227,236,240,.4) 0 .6px, transparent 1.1px);
  --stars-size:83px 71px, 131px 113px, 47px 53px;
  /* the script swaps these for large random star maps, so long buttons never show a repeat */
  --sy:0;
  --sans:'Archivo',system-ui,sans-serif; --tech:'Chakra Petch','Arial Narrow',system-ui,sans-serif;
  --gutter:48px; --maxw:1336px; --col-gap:36px; --cut:18px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
  interpolate-size:allow-keywords;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#040507; --fill:transparent; --ink:#E3ECF0; --muted:#A3B3BC; --frame:#E3ECF0; --soft:rgba(227,236,240,.2);
    --accent:var(--night-accent); --on-accent:var(--night-on-accent); --accent-text:var(--night-accent); --btn-edge:color-mix(in srgb, var(--sun) 55%, transparent);
    --band:#10151B; --band-ink:#E3ECF0;
    --void:#000000; --void-edge:rgba(227,236,240,.22);
    --stars-on:1; --mark-ink:#E3ECF0; color-scheme:dark;
    --hl:var(--accent); --hl-img:none; --on-hl:var(--on-accent);
  }
}
:root[data-theme="dark"]{
  --bg:#040507; --fill:transparent; --ink:#E3ECF0; --muted:#A3B3BC; --frame:#E3ECF0; --soft:rgba(227,236,240,.2);
  --accent:var(--night-accent); --on-accent:var(--night-on-accent); --accent-text:var(--night-accent); --btn-edge:color-mix(in srgb, var(--sun) 55%, transparent);
  --band:#10151B; --band-ink:#E3ECF0;
  --void:#000000; --void-edge:rgba(227,236,240,.22);
  --stars-on:1; --mark-ink:#E3ECF0; color-scheme:dark;
  --hl:var(--accent); --hl-img:none; --on-hl:var(--on-accent);
}
@property --bl{syntax:'<length>';inherits:false;initial-value:16px;}
@property --cutc{syntax:'<color>';inherits:true;initial-value:transparent;}

*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px);background:var(--bg);transition:background-color .5s ease;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .5s ease;}
h1,h2,h3{margin:0;font-weight:900;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
main,footer{position:relative;z-index:1;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px;}

/* night sky behind the whole page: four layers of stars, drawn by the script, scrolled at different speeds */
#sky{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;opacity:var(--stars-on);transition:opacity .6s ease,visibility 0s linear .6s;}
:root:not([data-stars]) #sky{visibility:hidden;}
:root[data-stars] #sky{transition:opacity .6s ease,visibility 0s;}

.lbl{font-family:var(--tech);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.barcode{display:inline-block;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 13px,currentColor 13px 14px,transparent 14px 18px);}
.hatch{display:block;background:repeating-linear-gradient(-45deg,currentColor 0 2px,transparent 2px 7px);}

/* Hard Swiss rule, drawn as a background so it can sweep in on scroll. */
.ruled{--rule-w:3px;background:linear-gradient(var(--rule-c,var(--ink)),var(--rule-c,var(--ink))) 0 0/100% var(--rule-w) no-repeat;}

/* ---------- paper punk tile ----------
   Same color as the page, so only the corner brackets and the cut corner show.
   Scrolling in draws the brackets and inks the cut and a short bar in the accent.
   Hover fills the tile, runs the bar across, and grows the brackets. */
.pnl{--brk:var(--frame);--cutc:var(--accent);--bl:16px;position:relative;
  background-image:
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk));
  background-repeat:no-repeat;
  background-position:left top,left top,right var(--cut) top 0,right 0 top var(--cut),left bottom,left bottom,right bottom,right bottom;
  background-size:var(--bl) 2px,2px var(--bl),var(--bl) 2px,2px var(--bl),var(--bl) 2px,2px var(--bl),var(--bl) 2px,2px var(--bl);
  background-color:transparent;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
  transition:--bl .8s var(--ease),--cutc .6s ease .25s,transform .2s var(--ease);}
.pnl::after{content:"";position:absolute;top:0;right:0;width:var(--cut);height:var(--cut);pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 2px),var(--cutc) calc(50% - 2px),var(--cutc) calc(50% + .5px),transparent calc(50% + .5px));}
.pnl::before{content:"";position:absolute;left:0;top:0;height:7px;width:48px;background:var(--accent);pointer-events:none;transition:width .32s var(--ease);}
.js-reveal .pnl{--bl:0px;--cutc:var(--frame);}
.js-reveal .pnl::before{width:0;transition:width .7s var(--ease) .2s;}
.js-reveal .pnl.in{--bl:16px;--cutc:var(--accent);}
.js-reveal .pnl.in::before{width:48px;}
@media (hover:hover){
  :root:not(.js-hover) .pnl:hover,.pnl.is-hover,.js-reveal .pnl.in.is-hover{--bl:28px;transform:translateY(-4px);}
  :root:not(.js-hover) .pnl:hover::before,.pnl.is-hover::before,.js-reveal .pnl.in.is-hover::before{width:100%;transition-delay:0s;}
}

/* ---------- the corners: logo (day/night switch), name tab (the menu), Get in touch ---------- */
.corner{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 14px);}
.corner-logo{left:14px;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--ink);}
.corner-logo svg{width:46px;height:46px;transition:transform .7s var(--ease);}
/* hover tilt only where there's a real mouse: iPhones keep :hover stuck after a tap, which left the logo crooked by day */
@media (hover:hover){ .corner-logo:hover svg{transform:rotate(-24deg);} }
:root.flip .corner-logo svg{transform:rotate(180deg);}
/* The tab hangs from the top center. Hover it (or click/tap) and it grows downward into the menu.
   Scrolling down tucks it up until only a lip shows; scrolling up, or hovering the lip, brings it back. */
.tab{position:fixed;z-index:30;top:env(safe-area-inset-top,0px);left:50%;transform:translate(-50%,0);
  display:flex;flex-direction:column;min-width:200px;white-space:nowrap;
  font-family:var(--tech);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(var(--ink),var(--ink)) left top/2px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) right top/2px 100% no-repeat,
    linear-gradient(135deg,transparent 7px,var(--ink) 7px 9px,transparent 9px) left bottom/12px 12px no-repeat,
    linear-gradient(225deg,transparent 7px,var(--ink) 7px 9px,transparent 9px) right bottom/12px 12px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center bottom/calc(100% - 20px) 2px no-repeat,var(--bg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px));
  transition:transform .4s var(--ease),background-color .5s ease;}
.tab.away:not(.open):not(:hover):not(:focus-within){transform:translate(-50%,calc(-100% + 9px));background-color:var(--accent);}
.tab__face{display:block;width:100%;margin:0;padding:4px 22px 6px;line-height:1.1;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;transition:color .15s ease;}
.tab__face:hover{color:var(--accent-text);}
.tab__menu{display:none;}
.tab__drop{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.tab.open .tab__drop,.tab:focus-within .tab__drop{grid-template-rows:1fr;}
@media (hover:hover){ .tab:hover .tab__drop{grid-template-rows:1fr;} }
.tab__drop ul{min-height:0;overflow:hidden;list-style:none;margin:0;padding:0;}
.tab__drop li:first-child{border-top:1px dashed var(--soft);margin:0 14px;}
.tab__drop li:first-child a{margin:0 -14px;}
.tab__drop li:last-child a{padding-bottom:16px;}
.tab__drop a{position:relative;isolation:isolate;display:block;padding:10px 26px;text-align:center;text-decoration:none;color:var(--ink);
  transition:color .2s ease .05s;}
.tab__drop a::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--hl);background-image:var(--hl-img);background-size:var(--hl-size);background-position:0 calc(var(--sy) * -.2px),0 calc(var(--sy) * -.09px),0 calc(var(--sy) * -.035px);transform:scaleX(0);transition:transform .32s var(--ease);}
.tab__drop a:hover,.tab__drop a:focus-visible{color:var(--on-hl);}
.tab__drop a:hover::before,.tab__drop a:focus-visible::before{transform:scaleX(1);}
.tab__drop a:focus-visible{outline-offset:-3px;}
/* the page you're on gets a small sun-colored diamond */
.tab__drop a[aria-current="page"]::after{content:"";position:absolute;left:16px;top:50%;width:7px;height:7px;margin-top:-4px;
  background:var(--accent);transform:rotate(45deg);}
.corner.btn{position:fixed;}
.corner-cta{right:14px;}

/* ---------- buttons: a small window into space; hover spreads the accent from the center out ---------- */
.btn{--c:12px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 24px;border:0;cursor:pointer;white-space:nowrap;
  font-family:var(--tech);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--void-ink);background-color:var(--void);background-image:var(--stars);background-size:var(--stars-size);
  background-position:0 calc(var(--sy) * -.2px),0 calc(var(--sy) * -.09px),0 calc(var(--sy) * -.035px);
  box-shadow:inset 0 0 0 1px var(--btn-edge,transparent);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%);
  transition:color .2s ease .05s;}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .38s var(--ease);}
.btn:hover,.btn:focus-visible{color:var(--on-accent);}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);}
.btn:active::before{transform:scaleX(.96);}
.btn--sm{--c:9px;min-height:44px;padding:0 18px;font-size:13px;}
/* where the side margin is too narrow for the full button, it stands on end along the right edge */
@media (min-width:641px) and (max-width:1611px){
  .corner-cta{writing-mode:vertical-rl;min-height:0;width:44px;padding:18px 0 22px;font-size:12px;letter-spacing:.16em;--c:9px;}
  .corner-cta::before{transform:scaleY(0);}
  .corner-cta:hover::before,.corner-cta:focus-visible::before{transform:scaleY(1);}
}

/* ---------- hero ---------- */
.hero{padding-block:104px 72px;}
/* line height leaves room for descenders (g, y, p) so they don't touch the line below */
.hero h1{font-size:clamp(46px,7.8vw,116px);letter-spacing:-.055em;line-height:.96;max-width:12.5em;}
.hero__row{margin-top:64px;padding-top:18px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px;}
.hero .deck{grid-column:1/5;font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.05;color:var(--accent-text);}
.hero .lede{grid-column:5/11;font-size:19px;font-weight:500;max-width:34em;}
.hero .btn{grid-column:11/13;justify-self:end;align-self:start;}

/* ---------- results (the one solid accent block) ---------- */
.results-band{background:var(--accent);color:var(--on-accent);padding-block:40px 52px;transition:background-color .5s ease;}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;}
.result{--rule-c:currentColor;display:flex;flex-direction:column;gap:14px;padding-top:16px;text-decoration:none;}
.result strong{font-size:clamp(40px,4.3vw,76px);font-weight:900;letter-spacing:-.055em;line-height:.85;white-space:nowrap;transition:transform .2s var(--ease);}
.result strong span{font-size:18px;font-weight:700;letter-spacing:0;margin-left:4px;}
.result > span{font-size:17px;font-weight:600;}
@media (hover:hover){ .result:hover strong{transform:translateX(8px);} }

/* ---------- section scaffolding ---------- */
.section{padding-block:96px;}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:16px;align-items:end;margin-bottom:52px;}
.sec-title{grid-column:1/9;font-size:clamp(44px,6.6vw,100px);letter-spacing:-.055em;line-height:.86;}
.sec-note{grid-column:9/13;font-size:18px;font-weight:500;max-width:26em;padding-bottom:4px;}
.sec-title--md{font-size:clamp(38px,4.6vw,68px);letter-spacing:-.05em;line-height:.88;}
/* long titles in the sticky panel (About's process heading) step down a size so words don't hit the panel edge */
.sec-title--long{font-size:clamp(32px,3.5vw,54px);}

/* ---------- tiles (lanes, quotes) ---------- */
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);}
.tile{display:block;text-decoration:none;color:inherit;padding:30px 28px;}
.tile__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;}
.tile__big{font-family:var(--tech);font-weight:700;font-size:clamp(30px,2.9vw,44px);letter-spacing:.01em;line-height:.95;text-transform:uppercase;
  margin:0 0 18px;transition:transform .2s var(--ease);}
.tile p{max-width:34em;}
@media (hover:hover){ :root:not(.js-hover) .tile:hover .tile__big,.tile.is-hover .tile__big,:root:not(.js-hover) .case:hover .case__name,.case.is-hover .case__name{transform:translateX(8px);} }

/* ---------- case files ----------
   Every case shows its name and figures. The story opens on click or tap. */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);align-items:start;}
.case{display:flex;flex-direction:column;}
.case--lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);}
.case__main{padding:30px 28px 22px;display:flex;flex-direction:column;gap:18px;min-width:0;}
.case__head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.case__file{font-family:var(--tech);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);}
.case__head .barcode{width:64px;height:14px;color:var(--ink);opacity:.8;}
.case__name{font-family:var(--tech);font-weight:700;font-size:clamp(23px,2.2vw,30px);letter-spacing:.01em;line-height:1.05;text-transform:uppercase;
  max-width:17em;transition:transform .2s var(--ease);}
.case--lead .case__name{font-size:clamp(28px,3vw,40px);}
/* the receipt strip: always visible */
.receipt{list-style:none;margin:0;padding:12px 0 14px;border-top:2px solid var(--ink);border-bottom:1px dashed var(--ink);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 20px;}
.receipt li{display:flex;flex-direction:column;gap:4px;min-width:0;}
.receipt b{white-space:nowrap;color:var(--accent-text);font-family:var(--tech);font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1;font-variant-numeric:tabular-nums;}
.receipt span{font-size:14px;font-weight:500;color:var(--muted);line-height:1.3;}
.case__more summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;cursor:pointer;
  font-family:var(--tech);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.case__more summary::-webkit-details-marker{display:none;}
.case__more summary .shut{display:none;}
.case__more[open] summary .open{display:none;}
.case__more[open] summary .shut{display:inline;}
.case__more summary i{position:relative;width:14px;height:14px;flex:none;}
.case__more summary i::before,.case__more summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--accent);transition:transform .25s var(--ease);}
.case__more summary i::after{transform:rotate(90deg);}
.case__more[open] summary i::after{transform:rotate(0deg);}
.case__more summary:hover{color:var(--accent-text);}
.case__more p{padding:6px 0 10px;max-width:40em;}
.case__more::details-content{height:0;overflow:clip;transition:height .4s var(--ease),content-visibility .4s allow-discrete;}
.case__more[open]::details-content{height:auto;}
.manifest{border-left:1px dashed var(--ink);margin:30px 0 26px;padding:0 28px;display:flex;flex-direction:column;gap:11px;
  font-family:var(--tech);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.manifest .mh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px dashed var(--ink);}
.manifest .mh .barcode{width:78px;height:18px;}
.manifest .ln{display:flex;justify-content:space-between;gap:12px;}
.manifest .ln span:last-child{color:var(--muted);}
.manifest .ln span.tst{background:var(--accent);color:var(--on-accent);padding:0 6px;}
.manifest .ref{margin-top:auto;padding-top:10px;color:var(--muted);font-size:11px;}

/* ---------- approach: the row floods with the accent from the bottom on hover ----------
   .flood is a copy of the row in the contrast color, clipped to the fill line, so the number and text
   switch color exactly where the fill crosses them. */
.steps{list-style:none;margin:0;padding:0;}
.step,.flood{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:12px;}
.step{position:relative;padding-block:20px 40px;}
.step__num{grid-column:1/3;font-family:var(--tech);font-size:clamp(52px,5.6vw,88px);font-weight:700;line-height:.8;transition:color .15s ease;}
.step h3,.step__h{grid-column:3/7;display:block;font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.05;padding-right:12px;text-wrap:balance;}
.step p,.step__p{grid-column:7/13;display:block;max-width:36em;}
.flood{position:absolute;inset:0 -20px;padding:20px 20px 40px;background-color:var(--hl);background-image:var(--hl-img);background-size:var(--hl-size);background-position:0 calc(var(--sy) * -.2px),0 calc(var(--sy) * -.09px),0 calc(var(--sy) * -.035px);color:var(--on-hl);
  clip-path:inset(100% 0 0 0);transition:clip-path .4s var(--ease);pointer-events:none;}
.flood .step__num{color:var(--on-hl);}
.step.lit > .step__num{color:var(--accent-text);}
.step.lit .flood{clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease) .14s;}
@media (hover:hover){
  :root:not(.js-hover) .step:hover > .step__num,.step.is-hover > .step__num{color:var(--accent-text);}
  :root:not(.js-hover) .step:hover .flood,.step.is-hover .flood{clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease) .14s;}
}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);}
.quote{margin:0;}
.quote__mark{display:block;height:62px;margin-top:6px;font-size:150px;font-weight:900;line-height:.72;color:var(--accent);}
.quote blockquote{margin:0;font-size:clamp(24px,2.7vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.08;max-width:18em;}
.quote .who{margin-top:22px;}

/* ---------- AI: the window into the void ---------- */
.ai{padding-block:24px 0;}
.window{position:relative;isolation:isolate;display:grid;grid-template-columns:22px minmax(0,1fr);background:var(--void);color:var(--void-ink);
  box-shadow:inset 0 0 0 1px var(--void-edge);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);}
.window__trim{grid-row:1/3;color:var(--void-ink);opacity:.45;z-index:1;}
.window__stars{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;}
/* star layers are painted once, then only slid up and down, which the graphics card does without repainting */
.starlayer{position:absolute;left:0;top:0;width:100%;background-repeat:repeat;pointer-events:none;will-change:transform;}
.window .ai-rule{--rule-c:var(--accent);--rule-w:9px;grid-column:2;height:9px;z-index:1;}
.window__in{grid-column:2;position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;
  padding:64px clamp(20px,4vw,56px) 80px;align-items:start;}
.window__lead{grid-column:1/6;display:flex;flex-direction:column;gap:28px;}
.window h1,.window h2{font-size:clamp(44px,5.6vw,88px);font-weight:900;letter-spacing:-.055em;line-height:.86;}
.window .body{grid-column:7/13;}
.window .body p{max-width:36em;margin-bottom:22px;font-size:18px;color:var(--void-muted);}
.window .body p:first-child{font-size:21px;font-weight:600;color:var(--void-ink);line-height:1.4;}
.window .body p:last-child{margin-bottom:0;}
.station{position:relative;width:100%;max-width:440px;aspect-ratio:1;}
.station img,.station canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.station img{transition:opacity .8s ease;}
.station.is-live img{opacity:0;}
.station canvas{opacity:0;transition:opacity .8s ease;}
.station.is-live canvas{opacity:1;}
.station__tag{position:absolute;left:0;bottom:-6px;font-family:var(--tech);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--void-muted);}

/* ---------- about + process ---------- */
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:start;padding-top:20px;}
.split > h2,.split > .pin{grid-column:1/6;}
.split > .body{grid-column:7/13;}
.about .body p{font-size:22px;font-weight:500;line-height:1.42;letter-spacing:-.01em;max-width:30em;}
.about{padding-bottom:40px;}
.pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + 104px);padding:30px 28px 32px;}
.pin .hatch{width:120px;height:20px;margin-top:24px;color:var(--ink);}
.process .body p{--rule-w:2px;padding:14px 0 30px;max-width:36em;}

/* ---------- contact ---------- */
.contact{padding-block:96px 104px;}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:36px;padding-top:20px;}
.contact-grid > .intro{grid-column:1/6;}
.contact-grid > .form-col{grid-column:7/13;padding:30px 28px 28px;}
.contact h2{font-size:clamp(48px,6.4vw,100px);letter-spacing:-.055em;line-height:.86;}
.contact .sub{margin-top:26px;font-size:19px;font-weight:500;max-width:28em;}
.field{display:block;margin-top:18px;}
.field:first-child{margin-top:0;}
.field > span{display:block;margin-bottom:8px;font-family:var(--tech);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.field input,.field textarea{width:100%;padding:12px 14px;border:2px solid var(--ink);border-radius:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);}
.field textarea{resize:vertical;min-height:132px;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent-text);}
.field textarea::placeholder{color:var(--muted);}
/* day: the typing boxes are a window of space, and what's typed comes out in the sun */
.field input,.field textarea{background-color:var(--void);background-image:var(--stars);background-size:var(--stars-size);
  background-position:0 calc(var(--sy) * -.2px),0 calc(var(--sy) * -.09px),0 calc(var(--sy) * -.035px);
  color:var(--sun);caret-color:var(--sun);}
.field input::placeholder,.field textarea::placeholder{color:var(--void-muted);}

/* night: the typing boxes are clear, so the moving sky shows through, and what's typed takes the accent */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field textarea{
    background:transparent;
    color:var(--accent);caret-color:var(--accent);border-color:rgba(227,236,240,.45);}
}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field textarea{
  background:transparent;
  color:var(--accent);caret-color:var(--accent);border-color:rgba(227,236,240,.45);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field-row .field{margin-top:0;}
.field-row + .field{margin-top:18px;}
.intake-submit{margin-top:20px;width:100%;}
.or-email{margin-top:18px;font-size:16px;}
.or-email a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px;}
.or-email a:hover{color:var(--accent-text);}
.hp{position:absolute!important;left:-9999px;top:auto;height:1px;overflow:hidden;}

/* ---------- ticker ---------- */
.ticker{background:var(--band);color:var(--band-ink);overflow:hidden;padding-block:16px;transition:background-color .5s ease;}
.ticker .track{display:flex;align-items:center;width:max-content;animation:ticker-run 150s linear infinite;}
.ticker:hover .track,.ticker:focus-within .track{animation-play-state:paused;}
.ticker .stat{white-space:nowrap;padding:0 24px;font-size:15px;font-weight:600;}
.ticker .stat + .stat{border-left:2px solid var(--soft);}
.ticker .lane{white-space:nowrap;margin:0 10px 0 34px;padding:5px 11px;background:var(--accent);color:var(--on-accent);
  font-family:var(--tech);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
@keyframes ticker-run{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- pages beyond Home ---------- */
/* page header: a small label, a poster headline, then a ruled lede row */
.page-hero{padding-block:120px 64px;}
.page-hero .lbl{display:block;margin-bottom:22px;color:var(--accent-text);}
.page-hero h1{font-size:clamp(46px,7.2vw,108px);letter-spacing:-.055em;line-height:.96;max-width:12em;}
.page-hero .hero__row{margin-top:56px;}
.page-hero .portrait{grid-column:10/13;width:100%;height:auto;border:2px solid var(--frame);}
.page-hero .lede{grid-column:1/9;font-size:22px;font-weight:500;line-height:1.42;letter-spacing:-.01em;max-width:32em;}

/* "read more" links: tech caps with an arrow that steps right on hover */
.more{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;
  font-family:var(--tech);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.more::after{content:"";flex:none;width:22px;height:2px;background:var(--accent);transition:transform .25s var(--ease);}
.more:hover{color:var(--accent-text);}
.more:hover::after{transform:translateX(6px);}
.case .more{justify-content:space-between;margin-top:auto;}

/* Home: four short case cards; Work: every case open, one per row */
.cases--home{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;}
.cases--home .case__main{height:100%;}
/* Home's case cards: hover sweeps the highlight in from the left (space by day, sun at night), inset so the brackets
   stay visible, with the same cut corner as the tile */
.cases--home .case__main{position:relative;isolation:isolate;transition:color .3s ease .08s;}
.cases--home .case__main::before{content:"";position:absolute;inset:10px;z-index:-1;pointer-events:none;
  background-color:var(--hl);background-image:var(--hl-img);background-size:var(--hl-size);background-position:0 calc(var(--sy) * -.2px),0 calc(var(--sy) * -.09px),0 calc(var(--sy) * -.035px);
  clip-path:polygon(0 0,0 0,0 0,0 100%,0 100%);transition:clip-path .45s var(--ease);}
.cases--home .receipt{border-color:currentColor;}
.cases--home .case__head .barcode{color:currentColor;}
@media (hover:hover){
  :root:not(.js-hover) .cases--home .case:hover .case__main,.cases--home .case.is-hover .case__main{color:var(--on-hl);}
  :root:not(.js-hover) .cases--home .case:hover .case__main::before,.cases--home .case.is-hover .case__main::before{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);transition-duration:.6s;}
  :root:not(.js-hover) .cases--home .case:hover :is(.receipt b,.receipt span,.more,.case__file),
  .cases--home .case.is-hover :is(.receipt b,.receipt span,.more,.case__file){color:inherit;background:none;}
  :root:not(.js-hover) .cases--home .case:hover .more::after,.cases--home .case.is-hover .more::after{background:currentColor;}
}

/* chip: a small starry strip with sun text by day; a sun tag with dark text at night */
.chip,.case__file,.page-hero .lbl,.draft b{display:inline-block;width:fit-content;padding:3px 8px 2px;color:var(--on-hl);
  background-color:var(--hl);background-image:var(--hl-img);background-size:var(--hl-size);}
.hero .deck{text-decoration:underline 6px var(--accent);text-underline-offset:8px;text-decoration-skip-ink:none;}
.cases--full{grid-template-columns:1fr;}
.case__story p{max-width:44em;font-size:18px;}
.case__story p + p{margin-top:14px;}
.sec-head .more{grid-column:9/13;}

/* the AI teaser on Home: a button that shows its edge against the void */
.btn--edge{box-shadow:inset 0 0 0 1px rgba(227,236,240,.45);align-self:flex-start;}
.window .body .more{margin-top:8px;color:var(--void-ink);}
.window .body .more:hover{color:var(--accent);}
.ai--page{padding-top:104px;}

/* About: credentials as three plain tiles */
.lanes--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);}
.creds .tile__big{font-size:clamp(24px,2.2vw,32px);}

/* end-of-page nudge toward the form on Home */
.cta{padding-block:40px 96px;}
.cta .split{align-items:end;}
.cta .body{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.cta .body p{font-size:20px;font-weight:500;max-width:28em;}

/* DRAFT notes: placeholders for writing still to do. Delete each one once its section is written. */
.draft{margin-top:40px;padding:18px 22px;border:2px dashed var(--soft);color:var(--muted);font-size:15px;max-width:44em;}
.draft b{display:block;margin-bottom:4px;font-family:var(--tech);font-size:12px;letter-spacing:.16em;text-transform:uppercase;}

/* ---------- footer ---------- */
.site-footer .wrap{padding-bottom:40px;}
.foot{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;padding-top:22px;
  border-top:3px solid var(--ink);margin-top:56px;font-size:15px;font-weight:600;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand .mark{flex:none;}
.wordmark{font-weight:800;letter-spacing:-.01em;}
.foot .brand{gap:10px;}
.foot .brand .mark{width:32px;height:32px;}
.foot .wordmark{font-size:17px;}
.foot .barcode{width:140px;height:24px;color:var(--ink);}
.foot-creds{margin-top:14px;font-size:14px;color:var(--muted);}
.foot-legal{margin-top:6px;font-size:14px;color:var(--muted);}
.foot-legal a{color:inherit;}
.foot-legal a:hover,.foot-legal a[aria-current="page"]{color:var(--ink);}
/* Privacy / Accessibility: one readable column */
.prose{max-width:44em;}
.prose h2{margin:44px 0 12px;font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.prose p{font-size:18px;max-width:40em;}
.prose p + p{margin-top:14px;}
.prose .draft{margin-top:0;}
.prose .lbl{margin-top:44px;}
.prose a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--accent);}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:18px;font-family:var(--tech);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.foot-nav a{text-decoration:none;padding-block:6px;}
.foot-nav a:hover,.foot-nav a[aria-current="page"]{box-shadow:inset 0 -3px var(--accent);}

/* ---------- scroll motion: Swiss rules sweep in, tiles ink in ---------- */
.js-reveal .ruled{background-size:0 var(--rule-w);transition:background-size .9s var(--ease);}
.js-reveal .ruled.in{background-size:100% var(--rule-w);}
.js-reveal .lanes > :nth-child(2),.js-reveal .results > :nth-child(2),.js-reveal .cases > :nth-child(3),.js-reveal .quotes > :nth-child(2){transition-delay:.1s;}
.js-reveal .lanes > :nth-child(3),.js-reveal .results > :nth-child(3),.js-reveal .cases > :nth-child(4){transition-delay:.2s;}

/* ---------- responsive ---------- */
@media (min-width:760px){ :root{--gutter:76px;} }
@media (min-width:1612px){ .corner-logo{width:60px;height:60px;} .corner-logo svg{width:54px;height:54px;} }
@media (max-width:1000px){
  .cases{grid-template-columns:1fr 1fr;}
  .case--lead{grid-template-columns:1fr;}
  .manifest{border-left:0;border-top:1px dashed var(--ink);margin:0 28px 26px;padding:18px 0 0;}
}
@media (max-width:900px){
  :root{--col-gap:24px;}
  .sec-title,.sec-note,.sec-head .more,.page-hero .lede{grid-column:1/-1;}
  .page-hero .portrait{grid-column:1/-1;max-width:260px;}
  .creds{grid-template-columns:1fr;}
  .hero .deck,.hero .lede,.hero .btn{grid-column:1/-1;justify-self:start;}
  .hero__row{margin-top:44px;}
  .results,.lanes,.quotes,.cases{grid-template-columns:1fr;}
  .step__num{grid-column:1/4;}
  .step h3,.step__h{grid-column:4/13;padding-right:0;}
  .step p,.step__p{grid-column:4/13;}
  .window__lead,.window .body,.split > h2,.split > .pin,.split > .body,.contact-grid > .intro,.contact-grid > .form-col{grid-column:1/-1;}
  .window__in{padding-top:48px;padding-bottom:56px;}
  .station{max-width:360px;margin-inline:auto;}
  .pin{position:relative;top:auto;}
  .section,.contact{padding-block:72px;}
}
@media (max-width:640px){
  :root{--gutter:20px;}
  .corner{top:calc(env(safe-area-inset-top,0px) + 10px);}
  .corner-logo{left:8px;width:44px;height:44px;background:var(--bg);}
  .corner-logo svg{width:36px;height:36px;}
  .corner-cta{right:8px;--c:8px;min-height:38px;padding:0 14px;font-size:11px;letter-spacing:.12em;}
  /* phones: the tab hangs from the left edge under the logo, out from under the iPhone's camera notch.
     It reads bottom to top, and the menu slides out to the right; scrolling down tucks it to a lip on the edge. */
  .tab{left:0;top:calc(env(safe-area-inset-top,0px) + 66px);transform:none;flex-direction:row;align-items:stretch;
    background:linear-gradient(var(--ink),var(--ink)) left top/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) left bottom/100% 2px no-repeat,
      linear-gradient(45deg,transparent 7px,var(--ink) 7px 9px,transparent 9px) right top/12px 12px no-repeat,
      linear-gradient(135deg,transparent 7px,var(--ink) 7px 9px,transparent 9px) right bottom/12px 12px no-repeat,
      linear-gradient(var(--ink),var(--ink)) right center/2px calc(100% - 20px) no-repeat,var(--bg);
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);}
  /* no :hover/:focus-within escape here: on iPhones a tap leaves both stuck, which kept the tab from tucking */
  .tab.away:not(.open){transform:translate(calc(-100% + 9px),0);background-color:var(--accent);}
  .tab .tab__face{width:auto;padding:16px 5px 16px 3px;font-size:11px;letter-spacing:.16em;writing-mode:vertical-rl;transform:rotate(180deg);}
  .tab__drop{grid-template-rows:1fr;grid-template-columns:0fr;transition:grid-template-columns .4s var(--ease);}
  .tab.open .tab__drop,.tab:focus-within .tab__drop{grid-template-columns:1fr;}
  .tab__drop ul{min-width:0;align-self:center;border-left:1px dashed var(--soft);padding:8px 0;}
  .tab__drop li:first-child{border-top:0;margin:0;}
  .tab__drop li:first-child a{margin:0;}
  .tab__drop li:last-child a{padding-bottom:10px;}
  .tab__drop a{padding:10px 30px 10px 34px;text-align:left;}
  .tab__drop a[aria-current="page"]::after{left:14px;}
  /* phones: the tab is too wide to fit between the corners, so it just says Menu */
  .tab{min-width:0;}
  .tab__face{padding:4px 16px 6px;}
  .tab__name{display:none;}
  .tab__menu{display:inline;}
  .tab__drop a{padding-inline:30px;}
  .page-hero{padding-block:84px 44px;}
  .ai--page{padding-top:76px;}
  .hero{padding-block:76px 48px;}
  .section,.contact{padding-block:56px;}
  .sec-head{margin-bottom:36px;}
  .tile,.case__main{padding:26px 20px 20px;}
  .manifest{margin:0 20px 22px;}
  .contact-grid > .form-col{padding:26px 20px 22px;}
  .step,.flood{grid-template-columns:1fr;}
  .step{padding-bottom:32px;}
  .flood{padding-bottom:32px;}
  .step__num,.step h3,.step__h,.step p,.step__p{grid-column:1/-1;}
  .field-row{grid-template-columns:1fr;}
  .about .body p{font-size:19px;}
  .window{grid-template-columns:10px minmax(0,1fr);clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .pnl,.pnl::before,.tile__big,.case__name,.result strong,.step__num,.flood,.case__more::details-content{transition:none!important;}
  .pnl:hover,.pnl.is-hover{transform:none;}
  .ticker .track{animation:none;transform:none;}
  .ticker{overflow-x:auto;}
  .ticker .dup{display:none;}
}

/* ---------- pre-launch (LAUNCH: delete this block and the .early note in each page) ---------- */
.draft{display:none;}
.early{position:fixed;z-index:40;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 18px;
  background-color:var(--hl);background-image:var(--hl-img);background-size:var(--hl-size);color:var(--on-hl);
  border:2px solid var(--frame);box-shadow:0 0 0 3px var(--bg);font-size:15px;font-weight:600;line-height:1.35;}
.early[hidden]{display:none;}
.early__x{flex:none;width:32px;height:32px;border:0;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer;}