/* =========================================================================
   Incognito Labs — design system
   Grayscale only. No gradients, no shadows, no radius. Structure is drawn
   with 1px hairlines and negative space.
   ========================================================================= */

:root{
  --void:#0a0a0a;
  --panel:#131313;
  --panel-2:#1a1a1a;
  --line:#2b2b2b;
  --line-soft:#1e1e1e;
  --ink:#f6f6f4;
  --mute:#8f8f8b;
  --mute-dim:#5c5c59;

  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:clamp(20px,4vw,44px);
  --measure:1240px;
  --section:clamp(76px,9.5vw,136px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

/* any `display` rule beats the HTML hidden attribute's default, which
   silently leaves [hidden] elements on screen. Make hidden mean hidden. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--void)}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

/* ---------- layout primitives ------------------------------------------ */

.wrap{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{padding-block:var(--section)}
.band-tight{padding-block:clamp(56px,6.5vw,88px)}
.band-line{border-top:1px solid var(--line-soft)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--void);
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;
}
.skip-link:focus{left:0}

/* ---------- type ------------------------------------------------------- */

h1,h2,h3{margin:0}

.h1,.h2,.h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:.004em;
  margin:0;
  text-wrap:balance;
}

.h1{font-size:clamp(40px,10vw,104px);font-weight:800}
.h2{font-size:clamp(30px,5.6vw,66px)}
.h3{font-size:clamp(21px,2.1vw,26px);letter-spacing:.012em}

.lede{
  font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.66;
  color:var(--mute);
  margin:0;
  max-width:56ch;
}
.body-text{color:var(--mute);margin:0}
.body-text + .body-text{margin-top:18px}

.filenum{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute-dim);
}

/* ---------- buttons ---------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--body);
  font-size:13px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:15px 22px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.btn .arrow{
  display:inline-block;
  transition:transform .28s var(--ease);
}
.btn:hover .arrow{transform:translateX(4px)}

.btn-solid{background:var(--ink);color:var(--void);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}

.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--panel-2)}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ---------- nav -------------------------------------------------------- */

.nav{
  position:sticky;
  top:0;
  z-index:80;
  border-bottom:1px solid var(--line-soft);
  background:rgba(10,10,10,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  height:74px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex:none;
}
.brand img{width:46px;height:46px;margin:-4px 0}
.brand-name{
  font-family:var(--display);
  font-weight:700;
  font-size:21px;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  padding-top:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  margin-left:auto;
}
.nav-links a{
  position:relative;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--mute);
  padding-block:6px;
  transition:color .28s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links a.is-active{color:var(--ink)}
.nav-links a.is-active::after{transform:scaleX(1)}

.nav-right{display:flex;align-items:center;gap:16px;flex:none}

.nav-toggle{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--line);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:16px;height:1px;
  background:var(--ink);
  transition:transform .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.mobile-panel{
  border-top:1px solid var(--line-soft);
  background:var(--void);
}
.mobile-panel[hidden]{display:none}
.mobile-panel .wrap{padding-block:14px 28px}
.mobile-links{display:flex;flex-direction:column}
.mobile-links a{
  padding:16px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--display);
  font-size:27px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
  color:var(--mute);
}
.mobile-links a.is-active{color:var(--ink)}
.mobile-panel .btn{margin-top:24px}

/* ---------- hero ------------------------------------------------------- */

.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  padding-block:clamp(72px,11vw,132px) clamp(76px,11vw,140px);
}
.hero-mark{
  position:absolute;
  top:50%;
  right:-9%;
  width:min(660px,54vw);
  transform:translateY(-50%);
  opacity:.05;
  pointer-events:none;
  user-select:none;
}
.hero-inner{position:relative;z-index:1}
.hero-title{margin:0}
.hero-title .line{display:block}
.hero-sub{margin-top:clamp(28px,3.4vw,40px);max-width:60ch}
.hero .btn-row{margin-top:clamp(34px,4vw,48px)}

/* headline build-up ------------------------------------------------------
   Each line is typeset into place from below, staggered. Reads as something
   being assembled rather than declassified.
   ----------------------------------------------------------------------- */

.hero-title .line{overflow:hidden;padding-bottom:.04em}
.hero-title .line > span{
  display:inline-block;
  transform:translateY(102%);
  animation:line-in .95s cubic-bezier(.19,1,.22,1) forwards;
}
.hero-title .line:nth-child(1) > span{animation-delay:.06s}
.hero-title .line:nth-child(2) > span{animation-delay:.17s}
.hero-title .line:nth-child(3) > span{animation-delay:.28s}

@keyframes line-in{
  from{transform:translateY(102%)}
  to{transform:translateY(0)}
}

/* ---------- section head ----------------------------------------------- */

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,72px);
  align-items:end;
  margin-bottom:clamp(40px,5vw,68px);
}
.sec-head-copy{color:var(--mute);margin:0;max-width:46ch;padding-bottom:6px}

/* ---------- page head (non-home) --------------------------------------- */

/* Inner-page header. Deliberately smaller than the home hero — at hero
   scale it ate three quarters of the first screen and pushed all the
   actual content below the fold. */
.page-head{
  border-bottom:1px solid var(--line-soft);
  padding-block:clamp(52px,5.5vw,80px) clamp(36px,4vw,56px);
}
.page-head .h1{font-size:clamp(38px,6.4vw,74px)}

/* a page-head already provides the space above the first band; without
   this the two paddings stack into a 220px gap */
.page-head + .band{padding-top:clamp(40px,4.6vw,64px)}
.page-head-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);
  align-items:end;
}
.page-head .lede{padding-bottom:8px}

/* ---------- hairline grids --------------------------------------------- */

.grid-frame{
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.file-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.case-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.cell{
  background:var(--void);
  padding:clamp(28px,3.2vw,46px);
  transition:background .35s var(--ease);
}
.cell:hover{background:var(--panel)}

.cell .filenum{margin-bottom:clamp(30px,4vw,52px)}

/* image slot inside an offer cell. Swap assets/offer-*.png for the real
   image at the same 16:10 ratio and nothing else needs to change.        */
.cell-media{
  margin:0 0 clamp(24px,2.6vw,32px);
  border:1px solid var(--line-soft);
  background:var(--panel);
  overflow:hidden;
}
.cell-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
/* the file number sits tight above an image, not at editorial distance.
   Without :has support the gap is simply larger — nothing breaks.        */
.cell:has(.cell-media) .filenum{margin-bottom:22px}
/* on Services the image sits below the lead paragraph, not above it */
.cell-copy + .cell-media{margin-top:clamp(24px,2.6vw,32px)}
.cell .h3{margin-bottom:14px}
.cell-copy{color:var(--mute);margin:0;font-size:15.5px}

/* "learn more" row under a section grid */
.sec-more{margin-top:clamp(28px,3.4vw,44px)}

/* detailed breakdown inside a services cell */
.includes{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.includes-label{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 4px;
}
.includes .spec-list li{
  font-size:14.5px;
  padding:11px 0;
  gap:12px;
}
.includes .spec-list li:first-child{border-top:0}
.includes .spec-list li::before{width:6px;height:6px}

.fit{
  margin-top:26px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:14.5px;
  line-height:1.6;
  color:var(--mute);
}
.fit strong{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:9px;
}

/* ---------- process diagram -------------------------------------------- */

/* four boxes with connectors between them; the arrows are grid items too,
   which is why the columns alternate content/auto */
.flow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;
}
.flow-step{
  border:1px solid var(--line);
  background:var(--panel);
  padding:clamp(20px,2.2vw,28px);
  display:flex;
  flex-direction:column;
}
.flow-num{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--mute-dim);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.flow-title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(18px,1.7vw,22px);
  line-height:1.04;
  text-transform:uppercase;
  letter-spacing:.014em;
  margin:0 0 10px;
}
.flow-copy{
  color:var(--mute);
  font-size:14.5px;
  line-height:1.55;
  margin:0;
}

/* connector: a hairline with a chevron head, drawn in CSS so it inherits
   the palette and needs no asset */
.flow-arrow{
  position:relative;
  width:clamp(22px,3vw,46px);
  align-self:center;
  height:14px;
}
.flow-arrow::before{
  content:"";
  position:absolute;
  left:0;right:5px;top:50%;
  height:1px;
  background:var(--line);
}
.flow-arrow::after{
  content:"";
  position:absolute;
  right:2px;top:50%;
  width:7px;height:7px;
  border-top:1px solid var(--mute);
  border-right:1px solid var(--mute);
  transform:translateY(-50%) rotate(45deg);
}

@media (max-width:860px){
  /* stack, and turn the connectors downward */
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-arrow{
    width:auto;
    height:clamp(26px,5vw,38px);
    justify-self:center;
  }
  .flow-arrow::before{
    left:50%;right:auto;top:0;bottom:5px;
    width:1px;height:auto;
  }
  .flow-arrow::after{
    right:auto;left:50%;top:auto;bottom:2px;
    transform:translateX(-50%) rotate(135deg);
  }
}

/* ---------- faq (accordion) -------------------------------------------- */

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

.faq-item{border-bottom:1px solid var(--line-soft)}

.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  cursor:pointer;
  padding-block:clamp(18px,2.1vw,24px);
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(18px,1.7vw,22px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.012em;
  color:var(--mute);
  transition:color .25s var(--ease);
  list-style:none;          /* kills the default disclosure triangle */
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--ink)}
.faq-item[open] .faq-q{color:var(--ink)}
.faq-q:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.faq-q::after{
  content:"";
  flex:none;
  width:8px;height:8px;
  margin-bottom:4px;
  border-right:1px solid var(--mute);
  border-bottom:1px solid var(--mute);
  transform:rotate(45deg);
  transition:transform .28s var(--ease),margin .28s var(--ease);
}
.faq-item[open] .faq-q::after{
  transform:rotate(-135deg);
  margin-bottom:0;
  margin-top:4px;
  border-color:var(--ink);
}

.faq-a{
  padding-bottom:clamp(22px,2.6vw,30px);
  max-width:74ch;
}
.faq-a p{
  color:var(--mute);
  font-size:15.5px;
  margin:0;
}
.faq-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
  margin-top:26px;
}
.faq-cols .cell-label{margin-bottom:4px}
.faq-cols .spec-list li{font-size:14.5px;padding:10px 0;gap:12px}
.faq-cols .spec-list li:first-child{border-top:0}

@media (max-width:860px){
  /* stack the diagram and turn the connectors downward */
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-arrow{
    width:auto;
    height:clamp(26px,5vw,38px);
    justify-self:center;
  }
  .flow-arrow::before{
    left:50%;right:auto;top:0;bottom:5px;
    width:1px;height:auto;
  }
  .flow-arrow::after{
    right:auto;left:50%;top:auto;bottom:2px;
    transform:translateX(-50%) rotate(135deg);
  }
}
@media (max-width:620px){
  .faq-cols{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ---------- case cards ------------------------------------------------- */

.case-grid .cell .filenum{margin-bottom:22px}

/* schematic interface placeholders — deliberately wireframes, not mock
   screenshots. Replaced with real captures once the builds are done.      */
.case-ui{
  aspect-ratio:4/3;
  background:var(--panel);
  border:1px solid var(--line-soft);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:clamp(24px,2.6vw,32px);
}
.case-ui i{display:block;background:var(--line)}
.case-ui span{display:block}

.ui-top{
  display:flex;
  align-items:center;
  gap:5px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
  flex:none;
}
.ui-top i{width:5px;height:5px}
.ui-top i.ui-title{width:54px;height:5px;margin-left:8px;background:var(--mute-dim)}

.ui-body{flex:1;display:flex;gap:12px;min-height:0}

/* 01 — dashboard: sidebar, stat row, bar chart */
.ui-side{width:24%;display:flex;flex-direction:column;gap:8px;flex:none}
.ui-side i{height:5px}
.ui-side i:first-child{background:var(--mute-dim)}
.ui-main{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0}
.ui-stats{display:flex;gap:8px;flex:none}
.ui-stats i{flex:1;height:26px;background:var(--panel-2);border:1px solid var(--line)}
.ui-chart{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:0}
.ui-chart i{flex:1;background:var(--line)}
.ui-chart i:nth-child(1){height:42%}
.ui-chart i:nth-child(2){height:66%}
.ui-chart i:nth-child(3){height:54%}
.ui-chart i:nth-child(4){height:88%;background:var(--mute-dim)}
.ui-chart i:nth-child(5){height:72%}
.ui-chart i:nth-child(6){height:96%}

/* 02 — automation: stacked nodes joined by a run line */
.ui-flow{flex:1;display:flex;flex-direction:column;justify-content:space-between;position:relative;padding-left:22px}
.ui-flow::before{
  content:"";
  position:absolute;
  left:6px;top:8px;bottom:8px;
  width:1px;
  background:var(--line);
}
.ui-node{position:relative;height:24px;background:var(--panel-2);border:1px solid var(--line)}
.ui-node::before{
  content:"";
  position:absolute;
  left:-20px;top:50%;
  width:9px;height:9px;
  margin-top:-4.5px;
  background:var(--void);
  border:1px solid var(--line);
}
.ui-node.is-on{border-color:var(--mute-dim)}
.ui-node.is-on::before{background:var(--mute-dim);border-color:var(--mute-dim)}

/* 03 — community: list of member rows */
.ui-list{flex:1;display:flex;flex-direction:column;gap:10px}
.ui-row{display:flex;align-items:center;gap:9px;flex:1}
.ui-row .ui-dot{width:16px;height:16px;flex:none;border:1px solid var(--line);background:var(--panel-2)}
.ui-row .ui-lines{flex:1;display:flex;flex-direction:column;gap:5px}
.ui-row .ui-lines i{height:4px}
.ui-row .ui-lines i:last-child{width:52%;background:var(--line-soft)}
.ui-row:first-child .ui-dot{border-color:var(--mute-dim);background:var(--mute-dim)}
.tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  padding:7px 11px;
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
}
.tag::before{
  content:"";
  width:5px;height:5px;
  background:var(--mute);
  flex:none;
}
/* on pricing cards the tag qualifies the heading, so it sits directly under it */
.cell .h3 + .tag{margin-top:0;margin-bottom:20px}

/* ---------- cta band --------------------------------------------------- */

.cta-band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(72px,9vw,120px);
  text-align:center;
}
.cta-inner{
  max-width:720px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cta-inner .lede{margin-top:24px;text-align:center}
.cta-inner .btn-row{margin-top:36px;justify-content:center}

/* ---------- contact ---------------------------------------------------- */

.contact-hero{
  padding-block:clamp(80px,12vw,152px);
  text-align:center;
}
.contact-hero .cta-inner{max-width:780px}
.detail-cell{
  background:var(--void);
  padding:clamp(28px,3.2vw,42px);
  transition:background .35s var(--ease);
}
.detail-cell:hover{background:var(--panel)}
.detail-label{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute-dim);
  margin:0 0 16px;
}
.detail-value{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(20px,1.9vw,25px);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.014em;
  color:var(--ink);
  display:inline-block;
  border-bottom:1px solid transparent;
  transition:border-color .28s var(--ease);
}
a.detail-value:hover{border-bottom-color:var(--ink)}

/* ---------- booking ---------------------------------------------------- */

/* ---------- book page split -------------------------------------------- */

/* the picker sits beside the heading and fills one screen; the footer is
   the only thing below the fold */
.book-hero{
  display:flex;
  align-items:center;
  min-height:calc(100vh - 74px);
  padding-block:clamp(28px,4vh,56px);
}
.book-split{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(36px,5vw,88px);
  align-items:center;
  width:100%;
}

.book-intro .h1{margin-bottom:clamp(20px,2.4vw,28px)}
.book-intro .lede{margin-bottom:clamp(26px,3vw,36px)}

.book-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  list-style:none;
  margin:0;
  padding:20px 0 0;
  border-top:1px solid var(--line-soft);
}
.book-meta li{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute-dim);
}
.book-meta li::before{
  content:"";
  width:5px;height:5px;
  background:var(--mute);
  flex:none;
}

.booking{min-width:0}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.booking-status,
.booking-error{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 28px;
}
.booking-error{
  color:var(--ink);
  border-left:2px solid var(--ink);
  padding:12px 16px;
  background:var(--panel);
  text-transform:none;
  letter-spacing:.02em;
  font-family:var(--body);
  font-size:14.5px;
}

/* the whole thing sits in one bordered panel. Cell size lives here because
   the time list is capped against it — see .times-list */
.booking-panel{
  border:1px solid var(--line);
  --cal-cell:40px;
  --cal-gap:6px;
}

/* calendar sized by its own fixed cells, times take what is left */
.booking-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  border-bottom:1px solid var(--line);
}

/* ---------- calendar --------------------------------------------------- */

.cal{
  padding:clamp(22px,2.6vw,32px);
  border-right:1px solid var(--line);
}
.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.cal-head .cell-label{margin:0}
.cal-nav{display:flex;align-items:center;gap:6px}
.cal-month{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.03em;
  min-width:9.5ch;
  text-align:center;
}
.cal-arrow{
  width:30px;height:30px;
  border:1px solid var(--line);
  color:var(--mute);
  font-size:15px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:color .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.cal-arrow:hover:not(:disabled){color:var(--ink);border-color:var(--ink);background:var(--panel-2)}
.cal-arrow:disabled{opacity:.3;cursor:not-allowed}

/* fixed 40px cells rather than aspect-ratio, which would stretch them to
   fill whatever width the column happens to have */
.cal-dow,
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,var(--cal-cell));
  gap:var(--cal-gap);
}
.cal-dow{margin-bottom:8px}
.cal-dow span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute-dim);
  text-align:center;
  padding-bottom:6px;
}

.cal-pad{display:block}
.cal-day{
  width:var(--cal-cell);
  height:var(--cal-cell);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--body);
  font-size:14px;
  font-weight:500;
  border:1px solid transparent;
  color:var(--mute-dim);
  cursor:default;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
/* only days with real availability read as interactive */
.cal-day.is-open{
  border-color:var(--line);
  color:var(--ink);
  cursor:pointer;
  background:var(--panel);
}
.cal-day.is-open:hover{background:var(--panel-2);border-color:var(--mute-dim)}
.cal-day.is-selected,
.cal-day.is-selected:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--void);
}

/* ---------- time column ------------------------------------------------ */

.times-col{
  padding:clamp(22px,2.6vw,32px);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.times-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.times-head .cell-label{margin:0}

select.tz-select{
  color-scheme:dark;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  min-width:0;
  max-width:260px;
  border:1px solid var(--line);
  background-color:var(--panel);
  color:var(--mute);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  padding:7px 26px 7px 10px;
  text-overflow:ellipsis;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--mute) 50%),
    linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 10px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
select.tz-select:hover{border-color:var(--mute-dim);color:var(--ink)}
.tz-select option,
.tz-select optgroup{background:var(--panel);color:var(--ink)}

/* Two columns so a full day of slots fits without scrolling. A scrolling
   list meant an OS scrollbar sitting on top of the buttons — Chrome
   ignores ::-webkit-scrollbar once scrollbar-width is set, so it cannot
   be styled and matched. Sixteen slots is the daily maximum, so eight
   rows bounds the panel height. */
.times-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  align-content:start;
}
.time-btn{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.06em;
  padding:12px 6px;
  text-align:center;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.time-btn:hover{background:var(--panel-2);border-color:var(--mute-dim)}
.time-btn.is-selected,
.time-btn.is-selected:hover{background:var(--ink);border-color:var(--ink);color:var(--void)}

.times-empty{
  font-size:14px;
  line-height:1.5;
  color:var(--mute-dim);
  margin:0;
}
/* Spans the whole panel. The timezone control lives here rather than in
   the Time column header, which is too narrow to hold a label and a
   select without pushing the select through the panel border. */
.booking-tz{
  grid-column:1 / -1;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:0;
  padding:12px clamp(22px,2.6vw,32px);
}
.booking-tz-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mute-dim);
  flex:none;
}

/* ---------- form ------------------------------------------------------- */

.booking-form{padding:clamp(22px,2.6vw,32px)}

.booking-back-row{margin-bottom:18px}
.booking-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
  transition:color .22s var(--ease);
}
.booking-back:hover{color:var(--ink)}

.booking-chosen{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute-dim);
  margin:0 0 28px;
  padding:14px 16px;
  border:1px solid var(--line-soft);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.booking-chosen.is-set{color:var(--ink);border-color:var(--line)}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,2vw,24px);
}
.field{display:block;margin-bottom:clamp(18px,2.2vw,24px)}
.field-label{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute-dim);
  margin-bottom:10px;
}
.field-input{
  display:block;
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
  padding:13px 15px;
  transition:border-color .22s var(--ease),background .22s var(--ease);
  resize:vertical;
}
.field-input::placeholder{color:var(--mute-dim)}
.field-input:hover{border-color:var(--mute-dim)}
.field-input:focus{outline:none;border-color:var(--ink);background:var(--panel-2)}
.field-input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* honeypot — off-screen rather than display:none, which some bots detect */
.field-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.booking-submit{
  width:100%;
  justify-content:center;
  margin-top:8px;
}
/* disabled reads as an outline, not a washed-out grey slab */
.booking-form .btn:disabled,
.booking-form .btn:disabled:hover{
  background:transparent;
  border-color:var(--line);
  color:var(--mute-dim);
  cursor:not-allowed;
}
.booking-form .btn:disabled .arrow{opacity:.5}

.booking-done{
  border:1px solid var(--line);
  padding:clamp(32px,4vw,52px);
}
.booking-done .h2{margin-bottom:20px}
.booking-done .lede{margin-bottom:16px}
.booking-done:focus{outline:none}

/* below this the two columns no longer fit side by side, so stop forcing
   the viewport height and let the page scroll normally */
@media (max-width:1080px){
  .book-hero{
    min-height:0;
    padding-block:clamp(48px,7vw,84px);
  }
  .book-split{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:clamp(32px,5vw,48px);
  }
  .booking{max-width:720px}
}

@media (max-width:860px){
  .book-hero{min-height:0}
  .booking-top{grid-template-columns:minmax(0,1fr)}
  .cal{border-right:0;border-bottom:1px solid var(--line)}
  .times-list{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr}
  /* narrow screens: let the cells share the width instead of overflowing */
  .cal-dow,.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .cal-day{width:auto;aspect-ratio:1/1;height:auto;font-size:13px}
}

/* ---------- footer ----------------------------------------------------- */

.footer{border-top:1px solid var(--line-soft)}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(36px,5vw,64px);
  padding-block:clamp(56px,6.5vw,84px);
}
.footer-brand .brand{margin-bottom:22px}
.footer-brand .brand img{width:38px;height:38px;margin:-3px 0}
.footer-brand .brand-name{font-size:18px}
.footer-blurb{
  color:var(--mute);
  font-size:14.5px;
  margin:0;
  max-width:38ch;
}
.footer-col h2{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute-dim);
  margin:0 0 20px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li + li{margin-top:12px}
.footer-col a{
  font-size:14.5px;
  color:var(--mute);
  transition:color .28s var(--ease);
}
.footer-col a:hover{color:var(--ink)}

.footer-bottom{
  border-top:1px solid var(--line-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-block:22px;
}
.footer-meta{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute-dim);
  margin:0;
}
/* ---------- pricing: included / quoted-separately lists ----------------- */

.cell-label{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute-dim);
  margin:0 0 26px;
}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:15px 0;
  border-top:1px solid var(--line-soft);
  color:var(--mute);
  font-size:15.5px;
  line-height:1.5;
}
.spec-list li::before{
  content:"";
  width:7px;height:7px;
  flex:none;
  background:var(--mute);
  transform:translateY(-1px);
}
/* outline marker = billed on its own, filled = already covered */
.spec-list--extra li::before{
  background:none;
  border:1px solid var(--mute-dim);
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width:1040px){
  .sec-head,
  .page-head-grid{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .sec-head-copy,
  .page-head .lede{padding-bottom:0}
}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:inline-flex}
  .nav-inner{height:66px}
  .hero-mark{display:none}
}

@media (max-width:760px){
  .file-grid,
  .pricing-grid,
  .case-grid,
  .detail-grid{grid-template-columns:minmax(0,1fr)}
  .cell .filenum{margin-bottom:24px}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
  .brand-name{font-size:19px}
  .btn{width:100%;justify-content:space-between}
  .btn-row{width:100%}
  .cta-inner .btn-row .btn{justify-content:center}
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-title .line{overflow:visible}
  .hero-title .line > span{transform:none;animation:none}
}