/* ==========================================================================
   pplAGI design system
   Base: #111111 charcoal. The arch supplies the colour: six stones, six hues,
   and one neutral keystone that carries the result. Every section inherits --accent from its stone.
   Type: Fraunces (Black 900 / Light 300) from Google Fonts.
   ========================================================================== */

:root{
  --ink:#111111;
  --ink2:#181818;
  --ink3:#1F1F1F;
  --line:#2A2A2A;
  --line2:#3A3A3A;
  --white:#FFFFFF;
  --body:#D6D6D6;
  --muted:#8A8F98;
  --bar:#6D6E72;
  --maxw:1140px;

  /* six stones, and a keystone that never changes */
  --red:#FF4D4D;      --red-d:#F03E3E;
  --orange:#FF9F1C;   --orange-d:#FF8C00;
  --yellow:#FFD60A;   --yellow-d:#F5C400;
  --keystone:#C9CCD1;
  --green:#2ECC71;    --green-d:#22B35E;
  --blue:#3A86FF;     --blue-d:#2F6FE8;
  --violet:#9B5DE5;   --violet-d:#8A4FD8;

  --accent:var(--yellow);
  --accent-d:var(--yellow-d);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--ink);color:var(--white);
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:300;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- mark ---------- */
.mark{display:block;height:auto;}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(17,17,17,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);}
nav{display:flex;align-items:center;justify-content:space-between;height:70px;}
.navbrand{display:flex;align-items:center;gap:10px;}
.navbrand svg{height:26px;width:auto;}
.wordmark{font-weight:900;font-size:20px;letter-spacing:-.02em;}
.wordmark span{font-weight:300;}
.navlinks{display:flex;gap:26px;font-size:14.5px;color:#B9B9B9;}
.navlinks a{font-weight:400;}
.navlinks a:hover{color:#fff;}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--accent);color:#111;font-weight:900;
  font-size:14.5px;letter-spacing:.02em;padding:15px 26px;border-radius:6px;
  border:1px solid var(--accent);transition:transform .12s ease,opacity .12s ease;}
.btn:hover{transform:translateY(-1px);opacity:.92;}
.btn.ghost{background:transparent;color:#fff;border:1px solid var(--line2);font-weight:400;}
.btn.ghost:hover{border-color:#7A7A7A;}
.btn.sm{padding:10px 18px;font-size:13.5px;}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---------- sections ---------- */
section{padding:96px 0;border-bottom:1px solid var(--line);position:relative;}
section.tight{padding:74px 0;}
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;}
h1{font-size:clamp(40px,6.6vw,74px);font-weight:900;letter-spacing:-.025em;line-height:1.03;}
h2{font-size:clamp(29px,4.3vw,48px);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin-bottom:18px;}
h3{font-size:19px;font-weight:900;letter-spacing:-.01em;margin-bottom:10px;}
.lede{font-size:clamp(17px,2vw,21px);color:var(--body);max-width:640px;line-height:1.55;}
.sub{color:var(--muted);font-size:15.5px;max-width:660px;}
.mt{margin-top:34px;}

/* ---------- hero ---------- */
.hero{padding:70px 0 88px;border-bottom:1px solid var(--line);position:relative;
  background:
    radial-gradient(70% 60% at 88% 8%, rgba(155,93,229,.20) 0%, rgba(17,17,17,0) 62%),
    radial-gradient(60% 55% at 70% 30%, rgba(58,134,255,.16) 0%, rgba(17,17,17,0) 60%),
    radial-gradient(60% 55% at 6% 4%, rgba(255,159,28,.14) 0%, rgba(17,17,17,0) 58%),
    radial-gradient(50% 50% at 20% 96%, rgba(46,204,113,.10) 0%, rgba(17,17,17,0) 60%);}
.herogrid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 16px;}
.trust{font-size:14px;color:var(--muted);}
.heroshot{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/11;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);}
.heroshot img{width:100%;height:100%;object-fit:cover;}
.heroshot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,0) 45%,rgba(17,17,17,.55) 100%);}

/* ---------- photo blocks ---------- */
.photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);position:relative;}
.photo img{width:100%;height:100%;object-fit:cover;display:block;}
.photo.tall{aspect-ratio:4/5;}
.photo.wide{aspect-ratio:16/9;}
.photo.square{aspect-ratio:1/1;}
.photocap{font-size:13px;color:var(--muted);margin-top:10px;}

/* ---------- the arch, interactive ---------- */
.archwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.archsvg{width:100%;height:auto;overflow:visible;}
.archsvg a{cursor:pointer;}
.archsvg a path{transition:opacity .18s ease,transform .18s ease;transform-origin:160px 170px;}
.archsvg a:hover path,.archsvg a:focus path{opacity:1;}
.archsvg a path{opacity:.92;}
.archsvg:hover a path{opacity:.42;}
.archsvg a:hover path{opacity:1;}
.archlegend{list-style:none;}
.archlegend li{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);}
.archlegend .dot{width:11px;height:11px;border-radius:3px;flex:none;margin-top:7px;}
.archlegend .nm{font-weight:900;font-size:16px;line-height:1.3;}
.archlegend .ds{font-size:14.5px;color:var(--muted);line-height:1.45;}
.archlegend a{display:flex;gap:13px;width:100%;}
.archlegend a:hover .nm{color:#fff;text-decoration:underline;text-underline-offset:3px;}

/* ---------- node cards ---------- */
.nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.node{background:var(--ink2);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s ease,border-color .16s ease;}
.node:hover{transform:translateY(-3px);border-color:var(--nc);}
.node .shot{aspect-ratio:16/10;overflow:hidden;position:relative;}
.node .shot img{width:100%;height:100%;object-fit:cover;}
.node .shot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,17,0) 40%,rgba(24,24,24,.96) 100%);}
.node .body{padding:22px 22px 24px;border-top:2px solid var(--nc);flex:1;display:flex;flex-direction:column;}
.node .stone{font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--nc);margin-bottom:9px;}
.node h3{font-size:21px;line-height:1.2;margin-bottom:9px;}
.node p{font-size:15px;color:var(--body);line-height:1.55;}
.node .more{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--nc);}
.node.keystone{grid-column:1/-1;flex-direction:row;align-items:stretch;}
.node.keystone .shot{aspect-ratio:auto;flex:0 0 46%;}
.node.keystone .shot:after{background:linear-gradient(90deg,rgba(24,24,24,0) 55%,rgba(24,24,24,.98) 100%);}
.node.keystone .body{padding:38px 40px;justify-content:center;}
.node.keystone h3{font-size:clamp(24px,3vw,34px);}

/* ---------- reason rows ---------- */
.reasons{list-style:none;margin-top:36px;border-top:1px solid var(--line);}
.reasons li{border-bottom:1px solid var(--line);}
.reasons a{display:grid;grid-template-columns:44px 1fr auto;gap:20px;align-items:center;padding:22px 4px;}
.reasons .sw{width:34px;height:9px;border-radius:3px;}
.reasons .q{font-size:clamp(17px,2.1vw,22px);font-weight:900;letter-spacing:-.01em;line-height:1.3;}
.reasons .a{font-size:15px;color:var(--muted);margin-top:5px;line-height:1.45;}
.reasons .go{font-size:20px;color:var(--line2);}
.reasons a:hover .go{color:var(--rc);}

/* ---------- ledger ---------- */
.ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.ledger .card{background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:28px 26px;}
.ledger .big{font-size:clamp(38px,5vw,56px);font-weight:900;letter-spacing:-.035em;line-height:1;
  margin-bottom:10px;}
.ledger .lbl{font-size:15px;color:var(--body);line-height:1.5;}

/* ---------- cards / generic ---------- */
.cards{display:grid;gap:18px;margin-top:40px;}
.c3{grid-template-columns:repeat(3,1fr);}
.c2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:30px 28px;}
.card p{font-size:15.5px;color:var(--body);line-height:1.6;}
.card .num{font-size:34px;font-weight:900;letter-spacing:-.03em;margin-bottom:10px;line-height:1;}
.card .n{font-size:20px;font-weight:900;margin-bottom:9px;}
.stepno{font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--muted);margin-bottom:13px;}
ul.ticks{list-style:none;margin-top:14px;}
ul.ticks li{position:relative;padding-left:22px;font-size:15px;color:var(--body);margin-bottom:9px;line-height:1.5;}
ul.ticks li:before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--accent);}
ul.ticks.dim li:before{background:var(--bar);}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.split.rev .txt{order:2;}
.split.rev .img{order:1;}

/* ---------- pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.pill{border:1px solid var(--line2);border-radius:999px;padding:12px 22px;font-size:15px;color:#CFCFCF;font-weight:400;}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:22px 0;}
details summary{cursor:pointer;list-style:none;font-weight:900;font-size:19px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;letter-spacing:-.01em;}
details summary::-webkit-details-marker{display:none;}
details summary:after{content:"+";font-weight:300;color:var(--muted);font-size:26px;line-height:1;flex:none;}
details[open] summary:after{content:"\2013";}
details p{margin-top:14px;color:var(--body);font-size:16px;max-width:780px;}

/* ---------- final / footer ---------- */
.final{text-align:center;padding:110px 0;position:relative;
  background:radial-gradient(60% 70% at 50% 0%, rgba(155,93,229,.16) 0%, rgba(17,17,17,0) 62%),
             radial-gradient(50% 60% at 20% 100%, rgba(255,159,28,.10) 0%, rgba(17,17,17,0) 60%),
             radial-gradient(50% 60% at 82% 100%, rgba(58,134,255,.12) 0%, rgba(17,17,17,0) 60%);}
.final svg{height:96px;width:auto;margin:0 auto 24px;}
.final h2{max-width:800px;margin:0 auto 18px;}
.final .lede{margin:0 auto 32px;}
footer{padding:44px 0;border-top:1px solid var(--line);}
.footrow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.footbrand{display:flex;align-items:center;gap:9px;}
.footbrand svg{height:20px;width:auto;}
.footbrand .wordmark{font-size:15px;}
.footlinks{font-size:14px;color:var(--muted);display:flex;gap:20px;flex-wrap:wrap;}
.footlinks a:hover{color:#fff;}

/* ---------- placeholders ---------- */
.fillme{color:var(--yellow);border-bottom:1.5px dashed rgba(255,214,10,.65);padding-bottom:1px;}
.fillbox{border:1px dashed rgba(255,214,10,.5);background:rgba(255,214,10,.05);
  border-radius:10px;padding:14px 16px;color:#FFE680;font-size:14.5px;line-height:1.55;}

/* ---------- page chrome for sub pages ---------- */
.pagehead{padding:64px 0 46px;border-bottom:1px solid var(--line);position:relative;
  background:radial-gradient(60% 100% at 88% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, rgba(17,17,17,0) 62%);}
.pagehead h1{font-size:clamp(34px,5.2vw,58px);}
.pagehead .lede{margin-top:20px;}
.prose{max-width:740px;}
.prose h3{margin:32px 0 10px;font-size:20px;}
.prose p,.prose li{color:var(--body);font-size:16px;line-height:1.68;}
.prose ul{margin:10px 0 10px 20px;}
.prose li{margin-bottom:7px;}
.sectionpad{padding:56px 0 90px;}

/* ---------- stone page ---------- */
.stonehead{padding:0;border-bottom:1px solid var(--line);}
.stonehead .hero2{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;}
.stonehead .txt{padding:70px 52px 70px 0;}
.stonehead .img{position:relative;min-height:420px;}
.stonehead .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.stonehead .img:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,17,17,.96) 0%,rgba(17,17,17,.25) 40%,rgba(17,17,17,0) 100%);}
.stonebar{height:5px;width:100%;background:var(--accent);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;}
.panel{background:var(--ink2);border:1px solid var(--line);border-radius:16px;padding:28px 26px;}
.panel.you{border-top:3px solid var(--accent);}
.panel.us{border-top:3px solid var(--bar);}
.panel h3{font-size:18px;margin-bottom:14px;}

/* ---------- assessment ---------- */
.assess{max-width:820px;}
.qstep{border-top:1px solid var(--line);padding:34px 0;}
.qstep .sh{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.qstep .sd{width:30px;height:9px;border-radius:3px;flex:none;}
.qstep .sn{font-weight:600;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);}
.qstep h3{font-size:clamp(20px,2.6vw,26px);margin:8px 0 6px;}
.qstep .qh{font-size:15px;color:var(--muted);margin-bottom:18px;}
.qrow{margin-bottom:16px;}
.qrow .ql{font-size:15.5px;margin-bottom:10px;color:var(--body);}
.opts{display:flex;flex-wrap:wrap;gap:10px;}
.opts label{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);border-radius:999px;
  padding:10px 16px;font-size:14.5px;cursor:pointer;color:#CFCFCF;}
.opts label:hover{border-color:#6D6E72;}
.opts input{accent-color:var(--accent);width:15px;height:15px;}
.opts label.on{border-color:var(--accent);color:#fff;background:color-mix(in srgb, var(--accent) 12%, transparent);}
.tally{position:sticky;bottom:0;background:rgba(17,17,17,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:18px 0;margin-top:20px;z-index:20;}
.tally .row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.tally .num{font-size:clamp(30px,4vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1;}
.tally .cap{font-size:14px;color:var(--muted);}
.bar{height:8px;border-radius:4px;background:var(--ink3);overflow:hidden;margin-top:16px;}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet));transition:width .35s ease;}

/* ---------- form ---------- */
form.intake{max-width:760px;}
.field{margin-bottom:26px;}
.field label{display:block;font-weight:900;font-size:16px;margin-bottom:7px;}
.field .hint{font-size:14px;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field textarea,.field select{
  width:100%;background:#181818;border:1px solid var(--line2);border-radius:8px;color:#fff;
  font-family:inherit;font-size:16px;padding:13px 15px;line-height:1.5;-webkit-appearance:none;appearance:none;}
.field textarea{min-height:118px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--yellow);}
.field input::placeholder,.field textarea::placeholder{color:#5F5F5F;}
.radios,.checks{display:flex;flex-wrap:wrap;gap:12px;}
.radios label,.checks label{display:flex;align-items:center;gap:9px;font-weight:400;font-size:15px;
  border:1px solid var(--line2);border-radius:999px;padding:10px 18px;cursor:pointer;margin:0;}
.radios input,.checks input{accent-color:#FFD60A;width:16px;height:16px;}
/* Suggested booking windows (thank-you page). Same pill geometry as the .checks
   labels above on purpose, so the booking form reads as the same family.
   Every rule is prefixed `.field` because `.field label` is display:block /
   font-weight:900 at a specificity of 0,1,1 and would otherwise win over a bare
   `.chip` (0,1,0) - the pills would render as stacked bold blocks. */
.suggest{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px;}
.field .chip{font:inherit;font-weight:400;font-size:15px;line-height:1.3;
  display:inline-flex;align-items:center;margin:0;
  background:transparent;color:var(--white);border:1px solid var(--line2);
  border-radius:999px;padding:10px 18px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;}
.field .chip:hover{border-color:#7A7A7A;}
.field .chip:focus-within{border-color:var(--yellow);}
/* The checkbox is the real form control and the pill is its label. Visually
   hidden rather than display:none, so keyboard focus and screen readers still
   reach it and the value still posts. */
.field .chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.field .chip.on{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:900;}
.field .chip.on span::before{content:"\2713\00a0";}
.field .customtime{display:block;font-weight:400;font-size:14px;color:var(--muted);margin:0 0 9px;}
/* Attachment picker. The file input is hidden and its label is the button, so
   the control can be styled at all. */
.upload{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;margin-top:16px;}
.upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;}
.field .uploadbtn{display:inline-block;font-weight:400;font-size:14.5px;margin:0;
  border:1px dashed var(--line2);border-radius:10px;padding:11px 18px;cursor:pointer;
  transition:border-color .15s,color .15s;}
.field .uploadbtn:hover{border-color:var(--yellow);color:var(--yellow);}
.uploadnote{font-size:13.5px;color:var(--muted);line-height:1.45;}
.uploadnote.bad{color:#FF4D4D;}
.sliderow{display:flex;align-items:center;gap:16px;}
.sliderow input[type=range]{flex:1;accent-color:#FFD60A;}
.sliderow output{font-weight:900;font-size:20px;min-width:112px;text-align:right;color:var(--yellow);}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--body);line-height:1.55;}
.consent input{margin-top:4px;width:17px;height:17px;accent-color:#FFD60A;flex:none;}
.formnote{border:1px dashed rgba(255,214,10,.55);background:rgba(255,214,10,.06);border-radius:10px;
  padding:16px 18px;margin-bottom:34px;font-size:14.5px;line-height:1.6;color:#FFE680;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.center{text-align:center;}
.center .lede{margin-left:auto;margin-right:auto;}
.bigmark{height:110px;width:auto;margin:0 auto 24px;}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width:960px){
  .herogrid,.archwrap,.split,.stonehead .hero2,.two{grid-template-columns:1fr;}
  .split.rev .txt{order:1;} .split.rev .img{order:2;}
  .herogrid{gap:34px;}
  .heroshot{order:-1;}
  .archwrap{gap:34px;}
  .nodes{grid-template-columns:1fr 1fr;}
  .node.keystone{flex-direction:column;}
  .node.keystone .shot{flex:none;aspect-ratio:16/9;}
  .node.keystone .shot:after{background:linear-gradient(180deg,rgba(17,17,17,0) 40%,rgba(24,24,24,.96) 100%);}
  .node.keystone .body{padding:26px 22px 28px;}
  .ledger,.c3,.c2,.steps{grid-template-columns:1fr;}
  .navlinks{display:none;}
  section{padding:64px 0;}
  .hero{padding:44px 0 64px;}
  .final{padding:78px 0;}
  .stonehead .txt{padding:44px 0 38px;}
  .stonehead .img{min-height:280px;order:-1;}
  .stonehead .img:after{background:linear-gradient(180deg,rgba(17,17,17,0) 40%,rgba(17,17,17,.96) 100%);}
  .reasons a{grid-template-columns:30px 1fr;gap:14px;}
  .reasons .go{display:none;}
  .pagehead{padding:44px 0 34px;}
  .sectionpad{padding:40px 0 66px;}
  .heroshot{aspect-ratio:16/12;}
}
@media (max-width:600px){
  body{font-size:16px;}
  .nodes{grid-template-columns:1fr;}
  h1{font-size:clamp(34px,9vw,48px);}
  .archlegend li{padding:9px 0;}
  .btn{width:100%;text-align:center;}
  .hero .ctas .btn,.btnrow .btn,section .btn,.final .btn{width:100%;}
  header .btn.sm{width:auto;padding:9px 13px;font-size:12.5px;}
  .btnrow{flex-direction:column;align-items:stretch;}
  .final svg{height:74px;}
  .tally .num{font-size:32px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important;} }


/* ---------- the film ---------- */
.filmband{padding:8px 0 0;}
.filmbox{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:#0b0b0b;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);}
.filmbox video{width:100%;height:auto;display:block;}
.filmplay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  width:100%;height:100%;border:0;padding:0;background:rgba(0,0,0,.3);cursor:pointer;color:#fff;}
.filmplay.on{display:flex;}
.filmplay:hover{background:rgba(0,0,0,.42);}
.filmplay svg{width:76px;height:76px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.65));}

/* Full screen affordance. The film is 16:9; inline on a phone it is about
   210px tall and the detail is unreadable, so the way in has to be visible
   rather than a hover-only control nobody on a phone can hover. */
.filmfs{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;
  gap:8px;padding:9px 15px 9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  background:rgba(10,10,10,.6);color:#fff;font:inherit;font-size:13px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s,border-color .15s;}
.filmfs svg{width:16px;height:16px;flex:0 0 auto;}
.filmfs:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.55);}
.filmfs:focus-visible{outline:2px solid #FFD60A;outline-offset:2px;}

/* Sound control (2026-10-30). The film has a voiceover, and it autoplays muted
   because muted is the only way a browser permits autoplay at all. That leaves
   the visitor needing one obvious way to turn the sound on WITHOUT leaving the
   page, which is what this is. Sits opposite the full-screen pill so the two
   never collide on a narrow band. */
.filmsound{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;
  gap:8px;min-height:36px;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  background:rgba(10,10,10,.6);color:#fff;font:inherit;font-size:13px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s,border-color .15s,color .15s;}
.filmsound:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.55);}
.filmsound:focus-visible{outline:2px solid #FFD60A;outline-offset:2px;}
/* On = the sound is playing. The gold border is the only state colour the page
   uses for "this is live", so it reads as a status rather than as decoration. */
.filmsound[aria-pressed="true"]{border-color:#FFD60A;color:#FFD60A;}

/* Full screen state: fill the screen, letterbox on black, drop the rounded
   frame, and get our own overlays out of the way of the native controls. */
.filmbox:fullscreen,.filmbox:-webkit-full-screen{width:100%;height:100%;border:0;border-radius:0;
  background:#000;box-shadow:none;display:flex;align-items:center;justify-content:center;}
.filmbox:fullscreen video,.filmbox:-webkit-full-screen video{width:100%;height:100%;object-fit:contain;}
.filmbox:fullscreen .filmplay,.filmbox:fullscreen .filmfs,.filmbox:fullscreen .filmsound,
.filmbox:-webkit-full-screen .filmplay,.filmbox:-webkit-full-screen .filmfs,
.filmbox:-webkit-full-screen .filmsound{display:none;}

@media (max-width:600px){
  .filmplay svg{width:60px;height:60px;}
  /* 44px is the smallest target Apple says a thumb can reliably hit. */
  .filmfs{right:10px;bottom:10px;min-height:44px;padding:0 16px 0 13px;font-size:14px;}
  .filmsound{left:10px;bottom:10px;min-height:44px;padding:0 16px;font-size:14px;}
}

/* ---------------------------------------------------------------------------
   The sign-in entry point, 2026-10-26.

   Brock's call: the mark stays top left and goes home, the assessment stays on
   the right, and sign-in sits on the right beside it rather than in the middle.
   So the nav is three zones: mark, the explanatory links, then the two doors
   and the intake button.

   The staff door is deliberately quiet. It is a low-contrast word in the footer
   and it is not in the sitemap, because it is for pplAGI staff and not for
   client staff. Quiet, not hidden: a door nobody can find is a door that
   generates support mail.
   --------------------------------------------------------------------------- */
.navcta{display:flex;align-items:center;gap:20px;}
.navcta .plain{font-size:14.5px;color:#B9B9B9;white-space:nowrap;font-weight:400;}
.navcta .plain:hover{color:#fff;}
.stafflink{color:#3A3A3A!important;}
.stafflink:hover{color:#8A8A8A!important;}
@media (max-width:960px){
  .navcta{gap:16px;}
}
@media (max-width:600px){
  .navcta{gap:12px;}
  .navcta .plain{font-size:13px;}
  /* The assessment is one tap away from the page itself, so on a phone it
     yields its place in the nav to sign-in, which has no other route in. */
  .navcta .assess{display:none;}
}

/* ---------------------------------------------------------------------------
   MEET BROCK, 2026-10-27.

   The site never said who is behind it. For an owner buying a weekly service
   run by a person, the person IS the offer, so this band sits high: straight
   after the film and above "What we manage".

   Two halves, matching the arrangement Brock picked from the producer mock:
   the map on the left carrying the beta boundary, the words on the right.

   The marker position is NOT eyeballed. It is the Web Mercator position of
   33.749, -84.388 in this exact tile crop, computed in build_photos.py and
   verified by round-tripping the pixel back to lat/lon. If the map crop
   changes, those two percentages must be recomputed with it.
   --------------------------------------------------------------------------- */
.meetband{padding:88px 0 0;}
.meetgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center;}
/* The portrait card. Brock's photograph has a bright office background, so on the
   near-black page it reads as a lit panel. That is deliberate: it draws the eye to
   the one section whose job is to introduce a real person.

   2026-10-30 (Brock: "the picture of me is massive on desktop, that's not cool").
   The photo is a head-and-shoulders crop, and at full column width it rendered
   543x679 at a 1512px viewport, which is 92% of a laptop screen's height. On a
   portrait crop that reads as one enormous face rather than as a card. Capped at
   400px and centred in its column, so it is 400x500 and the text column is now
   the taller of the two. The lit-panel treatment is kept; only the scale changed.
   Do not widen this back to the column without looking at it on a laptop first. */
.meetgrid .photo{aspect-ratio:4/5;width:100%;max-width:400px;justify-self:center;
  border-radius:20px;box-shadow:0 40px 90px -46px rgba(0,0,0,.95);}
.sig{font-size:15px;color:var(--muted);letter-spacing:.01em;}
.sig b{color:var(--white);font-weight:900;}
/* The Atlanta map, kept on Brock's instruction 2026-10-30 so the beta's metro-only
   scope is visible on the page rather than only in the copy. */
.mapband{margin-top:52px;}
.mapband .mapcard{aspect-ratio:21/9;}
/* Three equal cards, per the copy's build note. No numbers, no icons. */
.cards.c3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){.cards.c3{grid-template-columns:1fr;}}
.mapcard{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/11;background:#0e1014;box-shadow:0 40px 90px -46px rgba(0,0,0,.95);}
.mapcard>img{width:100%;height:100%;object-fit:cover;display:block;}
.mapdot{position:absolute;left:59.26%;top:64.78%;width:12px;height:12px;
  margin:-6px 0 0 -6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 0 10px rgba(255,255,255,.07);}
.maplabel{position:absolute;left:calc(59.26% + 15px);top:calc(64.78% - 9px);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:#F2F2F2;text-shadow:0 2px 10px #000,0 0 4px #000;}
.mapnote{position:absolute;left:16px;right:16px;bottom:16px;display:flex;
  align-items:center;gap:14px;padding:13px 15px;border-radius:14px;
  border:1px solid var(--line2);background:rgba(15,15,15,.82);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);}
.mapnote img{width:54px;height:54px;border-radius:50%;object-fit:cover;
  object-position:center;flex:none;border:1px solid var(--line2);}
.mapnote .nm{font-weight:900;font-size:15px;line-height:1.25;letter-spacing:-.01em;}
.mapnote p{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45;}
.meettxt .ctas{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 14px;}
@media (max-width:960px){
  .meetband{padding:64px 0 0;}
  .meetgrid{grid-template-columns:1fr;gap:34px;}
  .mapcard{order:-1;}
  .mapnote img{width:46px;height:46px;}
}
@media (max-width:600px){
  .mapnote{left:12px;right:12px;bottom:12px;gap:11px;padding:11px 12px;}
  .mapnote p{font-size:12.5px;}
  .meettxt .ctas .btn{width:100%;}
}


/* licences page, added 2026-10-27 */
.lic { background:#0F0F0F; border:1px solid var(--line); border-radius:6px;
       padding:18px 20px; overflow-x:auto; color:var(--body);
       font:400 12.5px/1.6 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; }
.note-pg { color:var(--muted); font-size:13px; margin-top:34px; }

/* ==========================================================================
   DASHBOARD (2026-10-30). A representation of a live client dashboard.
   Built from the same six hues as the arch so the product and the brand agree.
   This is a DEMO tenant. No real client data appears in these styles or the
   markup that uses them. Sample figures only, labelled as such on the page.
   ========================================================================== */
.dashdemo{background:var(--ink2);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;margin-top:40px;}
.dashbar{display:flex;align-items:center;gap:12px;padding:14px 20px;
  background:var(--ink3);border-bottom:1px solid var(--line);flex-wrap:wrap;}
.dashlights{display:flex;gap:6px;}
.dashlights i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block;}
.dashlights i:first-child{background:#5A4A4A;}
.dashwho{font-size:14px;font-weight:900;letter-spacing:-.01em;}
.dashwho span{font-weight:300;color:var(--muted);}
.dashbadge{margin-left:auto;font-family:'Fraunces',Georgia,serif;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#111;background:var(--yellow);
  border-radius:999px;padding:5px 12px;}
.dashgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.dashcard{background:var(--ink2);padding:22px 20px 20px;border-top:3px solid var(--dc);
  display:flex;flex-direction:column;gap:9px;}
.dashcard .dk{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dc);}
.dashcard .dv{font-size:clamp(22px,2.6vw,29px);font-weight:900;letter-spacing:-.03em;line-height:1;}
.dashcard .dl{font-size:13.5px;color:var(--body);line-height:1.5;}
.dashcard .ds{margin-top:auto;padding-top:12px;font-size:12.5px;color:var(--muted);}
.dashfoot{border-top:1px solid var(--line);padding:16px 20px;display:flex;gap:10px 26px;
  flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);}
.dashfoot b{color:var(--body);font-weight:600;}
.dashfoot .live{color:var(--green);}
.dashnote{margin-top:16px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:760px;}
@media(max-width:760px){
  .dashgrid{grid-template-columns:1fr;}
  .dashcard{border-top-width:3px;border-left:3px solid var(--dc);border-top-color:transparent;}
}

/* ==========================================================================
   KEYSTONE CALLOUT (2026-10-30, Brock: "we still need the line that represents
   the keystone here but we should outline it in white ... so that it is clearly
   the result").
   WHY THIS EXISTS AS ITS OWN CLASS: this block sits OUTSIDE .archlegend, so the
   .dot / .nm / .ds rules scoped to .archlegend never reached it. The grey marker
   was rendering as a zero-size invisible span and the label was inheriting body
   text, which is why the keystone read as missing rather than as the result.
   Do not restyle this by reusing .archlegend classes; the scoping is the bug.
   ========================================================================== */
.keyline{display:flex;gap:16px;align-items:stretch;margin-top:28px;padding:20px 22px;
  border:1.5px solid var(--white);border-radius:12px;text-decoration:none;
  transition:background .18s ease,transform .18s ease,border-color .18s ease;}
.keyline:hover{background:rgba(255,255,255,.05);transform:translateY(-2px);}
.keyline .kmark{flex:none;width:4px;border-radius:2px;background:var(--keystone);}
.keyline .kbody{display:block;min-width:0;}
.keyline .kt{display:block;font-weight:900;font-size:16px;line-height:1.3;color:var(--white);
  letter-spacing:-.01em;margin-bottom:4px;}
.keyline .kd{display:block;font-size:14.5px;color:var(--muted);line-height:1.45;}
.keyline .ktag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#111;background:var(--keystone);
  border-radius:999px;padding:3px 9px;vertical-align:2px;}

/* ==========================================================================
   THE ARCH, interactive  (V4, 2026-10-30)
   --------------------------------------------------------------------------
   Six areas plus the keystone. Every label sits INSIDE its wedge, always
   visible, never hover-only. Every wedge is a real button with aria-pressed.
   The arch is capped at 620px so the 7.4-unit label renders at about 14 CSS px;
   below 640px the in-stone labels are hidden and the toggle list underneath
   carries the same names, which is what V4 asks for on very small screens.

   This block overrides the older .archwrap two-column grid, which is why it
   sits at the end of the file rather than beside the other arch rules.
   ========================================================================== */
.archwrap{display:block;max-width:620px;margin:0 auto;}
.archsvg{display:block;width:100%;height:auto;}

/* a stone OFF: dark fill, dashed outline, grey label */
.archsvg .stone .w{fill:#151515;stroke:var(--line2);stroke-width:1.1;
  stroke-dasharray:3 2.4;cursor:pointer;
  transition:fill .18s ease,stroke .18s ease,filter .18s ease;}
.archsvg .stone .sl{font-family:'Fraunces',Georgia,serif;font-size:6.8px;font-weight:900;
  fill:#71767E;letter-spacing:.02em;pointer-events:none;transition:fill .18s ease;}

/* a stone ON: its full brand colour, label flips to near-black for contrast */
.archsvg .stone[aria-pressed="true"] .w{stroke-dasharray:none;}
.archsvg .stone[data-key="business"][aria-pressed="true"]    .w{fill:#FF4D4D;stroke:#FF4D4D;}
.archsvg .stone[data-key="operations"][aria-pressed="true"]  .w{fill:#FF9F1C;stroke:#FF9F1C;}
.archsvg .stone[data-key="money"][aria-pressed="true"]       .w{fill:#FFD60A;stroke:#FFD60A;}
.archsvg .stone[data-key="aspirations"][aria-pressed="true"] .w{fill:#2ECC71;stroke:#2ECC71;}
.archsvg .stone[data-key="security"][aria-pressed="true"]    .w{fill:#3A86FF;stroke:#3A86FF;}
.archsvg .stone[data-key="family"][aria-pressed="true"]      .w{fill:#9B5DE5;stroke:#9B5DE5;}
.archsvg .stone[aria-pressed="true"] .sl{fill:#141414;}

.archsvg .stone:hover .w{filter:brightness(1.2);}
.archsvg .stone:focus-visible{outline:none;}
.archsvg .stone:focus-visible .w{stroke:#FFD60A;stroke-width:2;stroke-dasharray:none;}

/* the keystone: always lit, never switchable, brighter with each area on */
.archsvg .kstone .w{fill:#2A2C30;stroke:#6D6E72;stroke-width:1.1;
  transition:filter .3s ease;}
.archsvg .kl{font-family:'Fraunces',Georgia,serif;font-size:6.8px;font-weight:900;
  fill:#C9CCD1;letter-spacing:.02em;}
.archwrap[data-lit="0"] .kstone .w{filter:brightness(.78) saturate(.5);}
.archwrap[data-lit="1"] .kstone .w{filter:brightness(.94);}
.archwrap[data-lit="2"] .kstone .w{filter:brightness(1.1) drop-shadow(0 0 2px rgba(201,204,209,.22));}
.archwrap[data-lit="3"] .kstone .w{filter:brightness(1.26) drop-shadow(0 0 4px rgba(201,204,209,.34));}
.archwrap[data-lit="4"] .kstone .w{filter:brightness(1.44) drop-shadow(0 0 6px rgba(201,204,209,.46));}
.archwrap[data-lit="5"] .kstone .w{filter:brightness(1.62) drop-shadow(0 0 9px rgba(201,204,209,.6));}
.archwrap[data-lit="6"] .kstone .w{filter:brightness(1.8) drop-shadow(0 0 12px rgba(201,204,209,.75));}

.archcount{text-align:center;font-size:15px;color:var(--muted);margin:16px 0 0;letter-spacing:.01em;}
.archcount b{color:var(--white);font-weight:900;}

.archpicks{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 0;}
.pick{font:inherit;font-size:13.5px;color:var(--body);background:transparent;
  border:1px solid var(--line2);border-radius:999px;padding:8px 16px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.pick:hover{border-color:#5A5A5A;color:var(--white);}
.pick[aria-pressed="true"]{border-color:var(--white);color:var(--white);background:#1B1B1B;}
.pick:focus-visible{outline:2px solid #FFD60A;outline-offset:2px;}

.archdetail{max-width:620px;margin:24px auto 0;text-align:center;
  border-top:1px solid var(--line);padding-top:18px;}
.archline{font-size:17px;color:var(--body);line-height:1.5;}
.archopen{display:inline-block;margin-top:10px;font-size:14px;color:var(--white);
  border-bottom:1px solid var(--line2);padding-bottom:2px;}
.archopen:hover{border-color:var(--white);}

/* the toggle list. Hidden above 640px, where the labels live in the stones. */
.archlist{display:none;list-style:none;max-width:520px;margin:24px auto 0;
  flex-direction:column;gap:8px;}
.archlist button{width:100%;display:flex;align-items:center;gap:11px;font:inherit;
  font-size:15px;color:var(--body);background:#161616;border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;cursor:pointer;text-align:left;
  transition:border-color .15s,color .15s;}
.archlist button:hover{border-color:var(--line2);color:var(--white);}
.archlist button:focus-visible{outline:2px solid #FFD60A;outline-offset:2px;}
.archlist .sw{width:13px;height:13px;border-radius:3px;flex:0 0 auto;
  background:#2A2A2A;border:1px dashed var(--line2);}
.archlist button[aria-pressed="true"]{color:var(--white);}
.archlist button[aria-pressed="true"] .sw{background:var(--c,#888);border:1px solid var(--c,#888);}

@media (max-width:639px){
  .archsvg .sl,.archsvg .kl{display:none;}
  .archlist{display:flex;}
}

/* the Atlanta map, moved out of Meet Brock by V4 into its own band */
/* The old standalone Atlanta band, retired 2026-10-30 when the map moved into
   Meet Brock. .mapcard / .mapnote / .mapdot / .maplabel are now unreferenced by
   any page. Kept one cycle in case a stone page wants the map, then delete. */
.mapstandalone{padding:0 0 30px;}

/* the one price line, reused verbatim on the homepage and on /pricing.
   2026-10-30 (Claude with Brock): the coloured left border is gone. It read as a
   quote bar rather than as a price, so the box is now a plain pill: no border,
   rounded on all four corners. On the homepage the text is centred. */
.priceline{margin-top:20px;padding:15px 26px;
  background:#161616;border-radius:999px;max-width:860px;
  font-size:clamp(16.5px,2vw,19px);line-height:1.5;color:var(--white);}

/* the closing mark: the same labelled arch, static, all areas lit */
.archstatic{display:block;width:100%;max-width:330px;height:auto;margin:0 auto 26px;}
.archstatic .w{stroke:none;}

/* the area selection handed over from the homepage arch (?stones=) */
.stonepick{margin:0 0 22px;padding:14px 17px;border-left:3px solid #FFD60A;background:#161616;
  border-radius:0 10px 10px 0;font-size:15px;color:#D6D6D6;line-height:1.5;}
.stonepick b{color:#fff;font-weight:900;}
.stonepick span{color:#8A8F98;}

/* ==========================================================================
   V5, 2026-10-30. The seven fixes from the V4 preview review.
   Each block says what was wrong, so the next reader does not undo it.
   ========================================================================== */

/* (2) LABEL OVERFLOW. The label geometry is solved, not hand-placed: the
   builder measures the real Fraunces metrics and then searches the radius for
   the largest clearance to the wedge's two radial edges and two arcs. A 6.8-unit
   font on a radius of 127 (120 for the three-line keystone) gives every label at
   least 4.0 units of clearance, about 8 CSS px at the 620px cap. The old 7.3 was
   hand-placed and left "Time, Money," with 1.15 units, which reads as touching
   the keystone's edge. If you change this number, re-run the builder: it fails
   loudly when a label stops fitting. */
.archsvg .stone .sl,.archsvg .kl{font-size:6.8px;}

/* 2026-10-30: a rule that briefly brightened the unlit wedges on a phone was
   reverted. The reviewer rechecked the arch at a true 375px viewport and it
   renders fully, keystone included; their earlier screenshot caught it mid
   scroll-animation. There was never a phone bug. The unlit wedges stay dark on
   purpose: off should look off. */

/* (1b) THE CLOSING MARK. Its root element carried class="archstatic" plus a
   second, ignored class="archsvg". The second one is dropped by the HTML
   parser, so `.archsvg .sl` never matched it and its labels inherited the 17px
   body size inside a 320-unit viewBox. They rendered about 2.4x too large,
   spilled out of their wedges and were clipped at both ends of the graphic.
   It now gets the same 7.2-unit label the main arch uses, a size that makes
   those labels legible, and no labels at all on a phone where they cannot be. */
.archstatic .sl,.archstatic .kl{font-family:'Fraunces',Georgia,serif;
  font-size:6.8px;font-weight:900;letter-spacing:.02em;}
.archstatic .sl{fill:#141414;}
.archstatic .kl{fill:#2A2C30;}
.final svg.archstatic{width:100%;max-width:520px;height:auto;margin:0 auto 26px;}
@media (max-width:639px){
  .archstatic .sl,.archstatic .kl{display:none;}
}

/* (7) PHONE HEADER. At 320px the wordmark and "Sign in" met with a measured
   gap of exactly zero. The nav is space-between with no gap of its own, so the
   two zones could always touch on a narrow enough phone. A gap on the nav is
   the floor; below 400px sign-in stands down, because "Book a brief" is the
   action that matters there and /app/login has its own route from the footer. */
nav{gap:16px;}
@media (max-width:400px){
  header .navcta .signin{display:none;}
}


/* ==========================================================================
   MEET BROCK, the map card  (2026-10-30, Claude with Brock)
   --------------------------------------------------------------------------
   The separate Atlanta box is gone. The real map is the left-hand card, in full
   colour, with Brock's portrait pinned on Atlanta and a white callout under it
   like a map pin label. The right column is the copy, unchanged, plus one short
   line of metro-only scope under the headline.

   THE PIN IS AT 50% / 50%, AND THAT IS COMPUTED, NOT LUCK. The 1600x900 colour
   source built by /root/.hermes/scripts/build_atlanta_map.py is centred on
   downtown Atlanta, so Atlanta sits at exactly 50.00% / 50.00% of the file
   (the builder prints it). Every card aspect ratio here is narrower than the
   source's 16:9, so object-fit:cover crops the WIDTH and never the height,
   which leaves both 50s untouched at every breakpoint.

   If you ever rebuild the map with a different bbox, or change an aspect-ratio
   so the card becomes wider than 16:9, these numbers stop being true. Re-run
   the builder, take its two percentages, and recompute. Do not nudge by eye.

   Why 1/1.25 on a phone and not 1/1: at 1/1 on a 320px screen the card is only
   276px tall, and the callout sits below the pin, so it needs the room.
   ========================================================================== */
.meetmap{position:relative;}
.meetmapcard{--pin:96px;position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;background:#EDE8E0;
  box-shadow:0 40px 90px -46px rgba(0,0,0,.95);}
.meetmapimg{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
.meetpin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--pin);height:var(--pin);border-radius:50%;overflow:hidden;
  background:#111;border:4px solid #fff;
  box-shadow:0 16px 34px -10px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.28);}
.meetpin img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}
.meetpinlabel{position:absolute;left:50%;top:50%;transform:translateX(-50%);
  margin-top:calc(var(--pin) / 2 + 10px);
  /* width:max-content matters. Without it an absolutely positioned box shrinks
     to fit the space between `left` and the card's right edge, which squeezed
     this callout to 110px on a phone and pushed it 42px out of the card.
     max-width then caps it. */
  width:max-content;max-width:min(280px,66%);
  background:#fff;color:#111;border-radius:10px;padding:9px 13px;
  font-size:12.5px;line-height:1.35;font-weight:600;text-align:center;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.85);}
@media (max-width:960px){
  .meetmap{max-width:640px;margin:0 auto;order:-1;}
}
@media (max-width:600px){
  /* A taller card on a phone, because the callout sits below the pin and at
     1/1 on a 320px screen there was not room for it. The crop stays centred,
     so the pin stays at 50% / 50%: see the note above. */
  .meetmapcard{--pin:72px;aspect-ratio:1/1.25;}
  .meetpinlabel{max-width:74%;font-size:12px;padding:8px 11px;}
}

/* .meetgrid .photo is unreferenced since the portrait became a map pin. The
   .photo rules themselves are still used by the stone pages. */

/* ==========================================================================
   HOMEPAGE REBUILD, 2026-10-30 (Claude with Brock)
   --------------------------------------------------------------------------
   Brock's verdict on the previous page: too long and too bland. About 9,200px
   on desktop, eleven sections, every one the same dark background. This is the
   five-section version. Everything here exists to serve that: the hero holds
   the arch, Meet Brock is the one light section, the ledger and the dashboard
   are one section, the offer carries the FAQ, and the close is a single band.

   Colour rule for this page: the six area colours carry it, used in the
   dashboard tiles (already there) and as THIN accents. Yellow stays the button
   colour. No new gradients were added.
   ========================================================================== */

/* the thin six-colour rule under the header. Six equal segments, 3px, full
   bleed. This is the page's colour signature and it is deliberately thin. */
.sixrule{display:grid;grid-template-columns:repeat(6,1fr);height:3px;}
.sixrule i{display:block;height:100%;}

/* ---------- 1. HERO, WITH THE ARCH ---------------------------------------- */
/* The headline is sized to land on 3 to 4 lines in this column on a laptop.
   The site-wide h1 is clamp(40px,6.6vw,74px), which put the same sentence on 8
   lines here, so the hero overrides it. Re-measure the line count if the
   column split changes. */
.hero{padding:56px 0 66px;}
.hero h1{font-size:clamp(27px,3vw,39px);line-height:1.06;max-width:560px;}
/* 39px is measured, not guessed: at a 545px column this sentence runs 4 lines at
   40px and 5 lines at 42px. The site-wide h1 (clamp(40px,6.6vw,74px)) put it on
   5 lines here, which is what Brock flagged. */
.heroarch-grid{grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;}
.heroarch{min-width:0;}
.heroarch .archwrap{max-width:520px;}
.heroarch .archcount{margin-top:10px;}
.heroarch .archpicks{margin-top:14px;}
.heroarch .archgo{margin-top:18px;justify-content:center;}

/* the three promise cards, cut down to three lines with a thin area-colour
   edge each. Red, orange and yellow are the three the arch starts with. */
.threelines{list-style:none;margin:30px 0 0;display:flex;flex-direction:column;gap:11px;}
.threelines li{border-left:3px solid var(--c);padding:1px 0 1px 13px;
  font-size:16.5px;line-height:1.4;color:var(--body);}

/* ---------- 2. MEET BROCK, ON LIGHT --------------------------------------- */
/* The one light section on the page. Warm off-white, near-black text, so the
   page breaks out of all-dark. Everything inside has to be re-coloured for it;
   the dark-page greys (--body, --muted) are cool and read wrong on warm paper. */
.meetband.light{background:#F7F5F1;color:#141414;border-bottom:1px solid #E3DCD1;}
.meetband.light h2{color:#12100E;}
.meetband.light .lede{color:#3B3733;}
.meetband.light .sub{color:#6E6860;}
.meetband.light .sig{color:#6E6860;}
.meetband.light .sig b{color:#12100E;}
.meetband.light .meetmapcard{border-color:#E0D9CE;
  box-shadow:0 30px 70px -42px rgba(60,50,40,.55);}
.mapcredit{margin:10px 0 0;font-size:12px;line-height:1.4;text-align:right;
  color:var(--muted);letter-spacing:.01em;}
.meetband.light .mapcredit{color:#6E6860;}  /* 4.6:1 on #F7F5F1; the licence credit has to be readable, not decorative */
.meetband.light .mapcredit a{color:#6E6860;text-decoration:underline;}

/* ---------- 4. THE OFFER -------------------------------------------------- */
.faqhead{margin:52px 0 4px;font-size:19px;letter-spacing:-.01em;}

/* ---------- 5. CLOSE ------------------------------------------------------ */
/* The decorative arch that used to sit here is gone with the extra section. */
.final{padding:84px 0;}

/* ---------- phones -------------------------------------------------------- */
@media (max-width:960px){
  .heroarch-grid{grid-template-columns:1fr;gap:40px;}
  .heroarch{order:-1;}            /* the arch leads on a phone */
  .heroarch .archwrap{max-width:480px;margin:0 auto;}
  .hero h1{max-width:none;}
}
@media (max-width:600px){
  .hero{padding:34px 0 48px;}
  .threelines{margin-top:24px;gap:9px;}
  .threelines li{font-size:15.5px;}
  .final{padding:60px 0;}
  .faqhead{margin-top:40px;}
  .mapcredit{text-align:center;}
}


/* ==========================================================================
   THE ARCH, FULL COLOUR  (2026-10-30, Claude with Brock)
   --------------------------------------------------------------------------
   The hero brief was "the interactive full-colour arch ... it is the logo, the
   product and the colour in one picture". With the old off-state the unlit
   wedges were #151515 on an #111111 page, so half the arch vanished and the
   hero had no colour in it at all.

   An unlit wedge now keeps a GHOST of its own hue: a 28% wash and a 60% edge.
   Lit wedges stay at full strength, so the on/off state is still obvious at a
   glance, and all six hues are always on the page.

   Specificity note: the [aria-pressed="true"] rules above are (0,5,0) and these
   are (0,4,0), so a lit wedge always wins over its own ghost. Do not "fix" that
   by reordering; the specificity is what keeps them apart.
   ========================================================================== */
.archsvg .stone[data-key="business"]    .w{fill:rgba(255,77,77,.28); stroke:rgba(255,77,77,.60);}
.archsvg .stone[data-key="operations"]  .w{fill:rgba(255,159,28,.28);stroke:rgba(255,159,28,.60);}
.archsvg .stone[data-key="money"]       .w{fill:rgba(255,214,10,.28);stroke:rgba(255,214,10,.60);}
.archsvg .stone[data-key="aspirations"] .w{fill:rgba(46,204,113,.28);stroke:rgba(46,204,113,.60);}
.archsvg .stone[data-key="security"]    .w{fill:rgba(58,134,255,.28);stroke:rgba(58,134,255,.60);}
.archsvg .stone[data-key="family"]      .w{fill:rgba(155,93,229,.28);stroke:rgba(155,93,229,.60);}
.archsvg .stone .sl{fill:#8E939B;}


/* ==========================================================================
   HOMEPAGE v9, 2026-10-30 (Claude with Brock, part 2).
   --------------------------------------------------------------------------
   Five sections, target under 3,000px on desktop. The page says what we do
   fast, then gets out of the way; everything else moved one click deeper
   (/about, /areas, /pricing, /faq, /support, /keystone, /foundation).

   Order: 1 hero, 2 film, 3 the three things (cards, then the arch),
   4 assessment doorway, 5 close. One primary button throughout: Book a
   company brief, to /brief. The six area hues are the only colour on the
   page besides the yellow buttons.
   ========================================================================== */

/* ---------- 1. HERO. No photo, no arch: the arch appears in section 3. ----- */
.hero.short{padding:34px 0 40px;text-align:center;}
.hero.short .eyebrow{margin-bottom:24px;}
.hero.short h1{font-size:clamp(28px,3.9vw,48px);line-height:1.05;letter-spacing:-.025em;
  max-width:920px;margin:0 auto;}
.hero.short .lede{margin:22px auto 0;max-width:740px;}
.hero.short .ctas{justify-content:center;margin:26px 0 0;}
.hero.short .trust{margin-top:16px;}

/* ---------- 2. THE FILM, alone. No copy around it. ------------------------ */
.filmsolo{padding:6px 0 30px;border-bottom:1px solid var(--line);}

/* ---------- 3. THE THREE THINGS ------------------------------------------- */
.threecards .card{display:flex;flex-direction:column;border-top:2px solid var(--c);padding:20px 20px;}
.threecards .card .num{font-size:34px;font-weight:900;letter-spacing:-.04em;line-height:1;
  color:var(--c);margin-bottom:12px;}
.threecards .card h3{font-size:20px;line-height:1.2;margin-bottom:10px;}
.threecards .card p{flex:1;}
.threecards .card .more{display:inline-block;margin-top:18px;font-size:14.5px;font-weight:600;color:var(--c);}
.threecards .card .more:hover{text-decoration:underline;text-underline-offset:3px;}
#three{padding:44px 0;}
.archsection{margin-top:26px;}
.archsection .archwrap{max-width:470px;}
/* the handoff button sits under a centred arch, so it centres with it. It used to
   be left-aligned inside the 470px column, which put it far left of the arch. */
.archsection .archgo{justify-content:center;}

/* ---------- 4. ASSESSMENT DOORWAY. One short centred block, no cards. ----- */
.doorway{padding:42px 0;text-align:center;}
.doorway h2{max-width:760px;margin:0 auto 16px;}
.doorway .lede{margin:0 auto;max-width:660px;}
.doorway .btnrow{justify-content:center;margin-top:30px;}

/* ---------- 5. CLOSE ------------------------------------------------------ */
.final{padding:38px 0;}
footer{padding:32px 0;}
.final .priceline{margin:22px auto 0;text-align:center;}
.final .btnrow{justify-content:center;margin-top:30px;}
.founderstrip{display:flex;align-items:center;justify-content:center;gap:13px;margin-top:34px;
  flex-wrap:wrap;}
.founderstrip img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line2);}
.founderstrip p{font-size:15px;color:var(--muted);}
.founderstrip a{color:#CFCFCF;text-decoration:underline;text-underline-offset:3px;}
.founderstrip a:hover{color:#fff;}

/* ---------- inner pages the v9 move created ------------------------------- */
.pagehead{padding:62px 0 8px;}
.pagehead .eyebrow{margin-bottom:18px;}
.pagehead h1{font-size:clamp(32px,4.6vw,56px);line-height:1.04;letter-spacing:-.025em;max-width:900px;}
.pagehead .lede{margin-top:22px;}
.pageend{padding:64px 0;text-align:center;border-top:1px solid var(--line);}
.areagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;}
.areacard{display:block;background:var(--ink2);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;border-top:3px solid var(--c);transition:transform .16s ease,border-color .16s ease;}
.areacard:hover{transform:translateY(-3px);}
.areacard .nm{font-weight:900;font-size:20px;letter-spacing:-.01em;margin-bottom:9px;}
.areacard p{font-size:15px;color:var(--body);line-height:1.55;}
.areacard .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--c);}

@media (max-width:900px){
  .areagrid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hero.short{padding:40px 0 48px;}
  .filmsolo{padding:8px 0 48px;}
  .threecards .card .num{font-size:34px;}
  .archsection{margin-top:52px;}
  .doorway{padding:56px 0;}
  .pagehead{padding:44px 0 4px;}
  .pageend{padding:52px 0;}
}