/* fonts: files in site-assets/fonts (SIL Open Font License), so nothing loads from another site */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/lora-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/lora-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/lora-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/lora-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/lora-latin-500-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== css/base.css ===== */
:root{
  /* brand */
  --night:#0F2A20; --forest:#1B4332; --pine:#2D6A4F; --sage:#6B8E6B; --pale:#C8DCC8;
  --gold:#B89968; --gold-ink:#7A5F2E; --gold-soft:#E6D5B4;
  --cream:#FAF6EE; --soft:#F3EFE5; --line:#E3DCCB; --paper:#FFFFFF;
  --ink:#1F2A24; --muted:#5F6F66; --terra:#B85C38;
  /* on dark */
  --on-dark:#F4F1E8; --on-dark-2:rgba(244,241,232,.74); --on-dark-3:rgba(244,241,232,.5);
  --line-dark:rgba(200,220,200,.18);
  /* type */
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* layout */
  --wrap:1200px; --gutter:clamp(20px,4vw,48px); --hdr-h:68px;
  --r-sm:4px; --r:8px; --r-lg:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
:where(h1,h2,h3,h4){font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.015em;margin:0;color:var(--forest);text-wrap:balance}
:where(p){margin:0 0 1em}
:where(a){color:var(--pine);text-underline-offset:3px;text-decoration-thickness:1px}
:where(ul,ol){margin:0;padding:0;list-style:none}
:where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(input,select,textarea){font:inherit;color:inherit}
:where(blockquote,figure){margin:0}
::selection{background:rgba(184,153,104,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--night);padding:10px 14px;border-radius:var(--r-sm);z-index:200;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* type roles */
.h-xl{font-size:clamp(2.55rem,4.6vw + .6rem,4.7rem);line-height:1.04;letter-spacing:-.024em}
.h-lg{font-size:clamp(2rem,2.6vw + .8rem,3.05rem);line-height:1.1}
.h-md{font-size:clamp(1.5rem,1.2vw + 1rem,1.95rem);line-height:1.18}
.h-sm{font-size:1.28rem;line-height:1.25}
.lead{font-size:clamp(1.08rem,.5vw + 1rem,1.26rem);line-height:1.58}
.small{font-size:.875rem;line-height:1.5}
.muted{color:var(--muted)}
.measure{max-width:62ch}
.measure-s{max-width:48ch}

/* a section marker: a node dot on a short branch, used where a label names the branch of the site */
.node-label{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;color:var(--gold-ink);margin-bottom:18px}
.node-label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(184,153,104,.22);flex:none}
.node-label::after{content:"";width:34px;height:1px;background:currentColor;opacity:.45;order:-1;margin-right:-4px;display:none}
.on-dark .node-label,.node-label.light{color:var(--gold-soft)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 22px;border-radius:6px;border:1px solid transparent;font-weight:500;font-size:1rem;line-height:1.1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--night);border-color:var(--gold)}
.btn-gold:hover{background:#C9AC7C;border-color:#C9AC7C}
.btn-forest{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.btn-forest:hover{background:var(--pine);border-color:var(--pine)}
.btn-line{background:transparent;color:var(--forest);border-color:rgba(27,67,50,.34)}
.btn-line:hover{border-color:var(--forest);background:rgba(27,67,50,.05)}
.btn-line-light{background:transparent;color:var(--on-dark);border-color:rgba(244,241,232,.36)}
.btn-line-light:hover{border-color:var(--on-dark);background:rgba(244,241,232,.08)}
.btn-sm{min-height:36px;padding:0 14px;font-size:.875rem;border-radius:5px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{font-weight:500;color:var(--pine);text-decoration:underline;text-decoration-color:rgba(45,106,79,.35)}
.link:hover{text-decoration-color:currentColor}
.on-dark .link{color:var(--gold-soft);text-decoration-color:rgba(230,213,180,.4)}

/* segmented control */
.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(244,241,232,.08);border:1px solid var(--line-dark)}
.seg button{min-height:36px;padding:0 16px;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--on-dark-2);transition:background-color .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--night)}
.seg.on-light{background:var(--soft);border-color:var(--line)}
.seg.on-light button{color:var(--muted)}
.seg.on-light button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}

/* quotes */
.quote{font-family:var(--serif);font-size:1.18rem;line-height:1.5;color:var(--forest)}
.quote footer,.quote-by{display:block;font-family:var(--sans);font-size:.875rem;color:var(--muted);margin-top:12px}
.on-dark .quote{color:var(--on-dark)}
.on-dark .quote-by,.on-dark .quote footer{color:var(--on-dark-3)}

/* toast + tooltip */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--night);color:var(--on-dark);padding:11px 18px;border-radius:6px;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:400;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);max-width:min(92vw,520px);text-align:center;border:1px solid var(--line-dark)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.tip{position:fixed;z-index:390;background:var(--night);color:var(--on-dark);font-size:.8rem;line-height:1.35;padding:7px 10px;border-radius:5px;pointer-events:none;display:none;max-width:260px;border:1px solid var(--line-dark);box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.tip b{font-weight:600}
.tip .k{display:inline-block;width:12px;height:2px;border-radius:2px;margin-right:6px;vertical-align:middle}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.okina{margin:0 -.13em 0 -.1em}


/* ===== css/layout.css ===== */
/* announcement */
.announce{background:var(--night);color:var(--gold-soft);font-size:.875rem;text-align:center;border-bottom:1px solid var(--line-dark)}
.announce a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;padding:9px var(--gutter)}
.announce a:hover{color:#fff}
.announce .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(184,153,104,.6);animation:pulse 2.6s ease-out 3}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,153,104,.55)}70%,100%{box-shadow:0 0 0 9px rgba(184,153,104,0)}}

/* header */
.hdr{position:sticky;top:0;z-index:100;background:var(--forest);color:var(--on-dark);border-bottom:1px solid var(--line-dark)}
.hdr-in{display:flex;align-items:center;gap:22px;height:var(--hdr-h)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--gold);flex:none}
.brand .mark{width:34px;height:34px}
.brand-name{font-family:var(--serif);font-size:1.22rem;font-weight:500;letter-spacing:-.01em;color:var(--on-dark);white-space:nowrap}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{position:relative;padding:9px 12px;border-radius:5px;color:var(--on-dark-2);text-decoration:none;font-size:.94rem;white-space:nowrap;transition:color .2s,background-color .2s}
.nav a:hover{color:#fff;background:rgba(244,241,232,.07)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--gold)}
.nav .nav-only{display:none}
.hdr-cta{min-height:40px;padding:0 16px;font-size:.92rem;flex:none}
.menu-btn{display:none;width:44px;height:44px;border-radius:6px;border:1px solid var(--line-dark);flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--on-dark);transition:transform .25s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* pages */
.page{display:none}
.page.is-active{display:block}
.sec{padding-block:clamp(64px,8vw,116px)}
.sec-tight{padding-block:clamp(48px,6vw,80px)}
.bg-soft{background:var(--soft)}
.bg-forest{background:var(--forest);color:var(--on-dark)}
.bg-night{background:var(--night);color:var(--on-dark)}
.on-dark :where(h1,h2,h3,h4){color:var(--on-dark)}
.on-dark :where(p){color:var(--on-dark-2)}
.on-dark :where(a:not(.btn)){color:var(--gold-soft)}
.dots{background-image:radial-gradient(rgba(200,220,200,.13) 1px,transparent 1.4px);background-size:22px 22px}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sec-head > p{margin:0}
.sec-head.one{grid-template-columns:minmax(0,1fr)}
.sec-head.one > *{max-width:760px}
.sec-head h2 + p{margin-top:18px}

/* page header band (inner pages) */
.ph{background:var(--forest);color:var(--on-dark);padding-block:clamp(52px,7vw,96px) clamp(44px,6vw,80px);position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(200,220,200,.12) 1px,transparent 1.4px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent 35%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);pointer-events:none}
.ph .wrap{position:relative;z-index:1}
.ph h1{color:var(--on-dark)}
.ph .lead{color:var(--on-dark-2);margin:22px 0 0}
.ph .wrap.ph-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:8px clamp(28px,5vw,80px);align-items:end}
.ph .wrap.ph-grid h1{grid-row:1/3;align-self:end}
.ph .wrap.ph-grid .lead{grid-column:2;margin:0}
.ph .wrap.ph-grid .crumbs{grid-column:2;margin-top:22px}
.ph .btns{margin-top:28px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px}
.crumbs a{font-size:.9rem;color:var(--gold-soft);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.crumbs a::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--gold)}
.crumbs a:hover{color:#fff}
.crumbs a:hover::before{background:var(--gold)}

/* footer */
.ftr{background:var(--night);color:var(--on-dark-2);padding-top:clamp(48px,6vw,80px);font-size:.95rem}
.ftr-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:clamp(28px,4vw,56px)}
.ftr-brand p{margin:18px 0 0;color:var(--on-dark-2)}
.ftr-contact a{color:var(--on-dark);text-decoration:none;font-size:1.02rem}
.ftr-contact a:hover{color:var(--gold-soft)}
.ftr nav h2{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--gold-soft);letter-spacing:0;margin-bottom:12px}
.ftr nav a{display:block;color:var(--on-dark-2);text-decoration:none;padding:5px 0}
.ftr nav a:hover{color:#fff}
.ftr-base{position:relative;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;margin-top:clamp(36px,5vw,64px);padding-block:20px 26px;font-size:.84rem;color:var(--on-dark-3)}
.ftr-base::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line-dark)}

/* full screen host */
.fs{position:fixed;inset:0;z-index:300;background:var(--night);display:flex;flex-direction:column}
.fs-bar{display:flex;align-items:center;gap:14px;height:52px;padding:0 16px;background:var(--forest);color:var(--on-dark);border-bottom:1px solid var(--line-dark);flex:none}
.fs-title{font-family:var(--serif);font-size:1.05rem}
.fs-note{font-size:.84rem;color:var(--on-dark-3);margin-right:auto}
.fs-body{flex:1;min-height:0;display:flex}
.fs-body > *{flex:1;min-width:0;min-height:0}
body.fs-open{overflow:hidden}

/* the home page trunk: the page drawn as a map */
.trunk{position:fixed;left:max(14px,calc((100vw - var(--wrap))/2 - 78px));top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:0;padding:0}
.trunk a{position:relative;display:flex;align-items:center;height:30px;width:22px;text-decoration:none}
.trunk a::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:1px;background:rgba(184,153,104,.45)}
.trunk a:first-child::before{top:50%}
.trunk a:last-child::before{bottom:50%}
.trunk a i{position:relative;width:9px;height:9px;margin-left:6px;border-radius:50%;background:var(--cream);border:1.5px solid var(--gold);transition:transform .2s var(--ease),background-color .2s}
.trunk a.on i{background:var(--gold);transform:scale(1.35)}
.trunk a span{position:absolute;left:28px;white-space:nowrap;font-size:.8rem;font-weight:500;background:var(--night);color:var(--on-dark);padding:4px 9px;border-radius:4px;opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s;pointer-events:none;border:1px solid var(--line-dark)}
.trunk a:hover span,.trunk a:focus-visible span{opacity:1;transform:none}
@media (min-width:1400px){body[data-page="home"] .trunk{display:flex}}

.ph-slim{padding-block:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,30px)}
.ph-slim::after{display:none}
.ph-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:end}
.ph-row h1{max-width:none}
.ph-row p{margin:0;color:var(--on-dark-2)}
.studio-page{padding-bottom:clamp(40px,5vw,72px)}
.studio-page .studio{--st-h:clamp(520px,calc(100vh - 330px),780px)}

/* the text dialog shown on computers */
.txd{position:fixed;inset:0;z-index:350;background:rgba(15,42,32,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.txd-card{position:relative;width:min(100%,680px);background:var(--cream);color:var(--ink);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.txd-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.txd-x:hover{background:var(--soft);color:var(--ink)}
.txd-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.txd-num{font-family:var(--serif);font-size:clamp(2rem,3vw,2.8rem);line-height:1.05;letter-spacing:-.02em;color:var(--forest);margin:0 0 10px}
.txd-msg{color:var(--muted);margin:0 0 22px}
.txd-msg q{quotes:none;color:var(--ink);font-style:italic}
.txd-grid{display:grid;grid-template-columns:184px minmax(0,1fr);gap:24px;align-items:start}
.txd-qr{width:184px;aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.txd-qr svg{width:100%;height:100%;display:block}
.txd-how p{margin:0 0 16px}
.txd-how .btns{flex-direction:column;align-items:stretch}
body.txd-open{overflow:hidden}
@media (max-width:620px){.txd-grid{grid-template-columns:minmax(0,1fr)}.txd-qr{margin:0 auto}}


/* ===== css/hero.css ===== */
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark)}
.hero-in{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:clamp(24px,3.5vw,56px);align-items:center;padding-block:clamp(36px,4.6vw,68px) clamp(36px,4.4vw,64px);min-height:min(720px,calc(100vh - var(--hdr-h) - 38px))}
.hero-h{color:var(--on-dark);font-size:clamp(2.5rem,3.6vw + .5rem,4.05rem);line-height:1.05;letter-spacing:-.024em}
.hero-h span{display:block}
.hero-h span + span{color:var(--on-dark-3);transition:color .9s var(--ease) .5s}
.hero.is-mapped .hero-h span + span{color:var(--gold-soft)}
.hero-copy .lead{margin:24px 0 28px;max-width:33em;font-size:clamp(1.05rem,.4vw + .98rem,1.2rem)}
.hero-by{margin:26px 0 0;color:var(--on-dark-3)}
.hero-stage{min-width:0;margin-right:calc(var(--gutter) * -0.6)}

/* the canvas where scattered thoughts become a map */
.hc{position:relative;height:500px;touch-action:pan-y}
.hc-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hc-lines path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .7s var(--ease),opacity .25s}
.hc[data-state="mapped"] .hc-lines path{stroke-dashoffset:0;opacity:.9;transition-delay:var(--d,.5s)}
.hc-root,.hc-branch,.hc-chip{position:absolute;left:0;top:0;will-change:transform}
.hc-root{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--cream);color:var(--forest);font-family:var(--serif);font-style:italic;font-size:1.3rem;font-weight:500;box-shadow:0 0 0 5px rgba(184,153,104,.28),0 0 0 1px var(--gold);opacity:0;transform-origin:center;transition:opacity .45s .25s}
.hc-branch{padding:6px 14px;border-radius:999px;background:var(--c);color:var(--night);font-size:.86rem;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .4s .45s}
.hc[data-state="mapped"] .hc-root,.hc[data-state="mapped"] .hc-branch{opacity:1}
.hc-chip{transition:transform 1s var(--ease);transition-delay:var(--d,0s)}
.hc-chip > span{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;font-size:.84rem;line-height:1.25;white-space:nowrap;color:var(--on-dark);background:rgba(244,241,232,.09);border:1px solid rgba(200,220,200,.2);transition:background-color .5s,border-color .5s,color .5s,opacity .5s}
.hc-chip i{flex:none;width:9px;height:9px;border-radius:50%;background:rgba(244,241,232,.35);transition:all .5s .4s}
.hc[data-state="scattered"] .hc-chip > span{animation:hcFloat var(--fd,7s) ease-in-out var(--fs,0s) infinite alternate;opacity:var(--o,.9)}
@keyframes hcFloat{from{transform:translate(0,0)}to{transform:translate(var(--fx,6px),var(--fy,-8px))}}
.hc[data-state="mapped"] .hc-chip > span{background:rgba(244,241,232,.05);border-color:rgba(200,220,200,.16)}
.hc[data-state="mapped"] .hc-chip[data-t="now"] i{background:var(--gold);box-shadow:0 0 0 3px rgba(184,153,104,.22)}
.hc[data-state="mapped"] .hc-chip[data-t="decide"] i{background:transparent;border:1.6px solid var(--gold);border-radius:1px;transform:rotate(45deg) scale(.92)}
.hc[data-state="mapped"] .hc-chip[data-t="wait"] i{background:transparent;border:1.4px solid rgba(200,220,200,.55)}
.hc[data-state="mapped"] .hc-chip[data-t="wait"] > span{color:var(--on-dark-3)}
.hc.no-anim .hc-chip,.hc.no-anim .hc-lines path,.hc.no-anim .hc-root,.hc.no-anim .hc-branch{transition:none!important}

.hc-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.hc-ctrl p{margin:0;color:var(--on-dark-3)}
.hc-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;color:var(--on-dark-2);opacity:0;transition:opacity .5s .6s}
.hero-stage.mapped .hc-legend{opacity:1}
.hc-legend li{display:inline-flex;align-items:center;gap:8px}
.hc-legend i{width:9px;height:9px;border-radius:50%;flex:none}
.hc-legend [data-t="now"] i{background:var(--gold);box-shadow:0 0 0 3px rgba(184,153,104,.22)}
.hc-legend [data-t="decide"] i{border:1.6px solid var(--gold);border-radius:1px;transform:rotate(45deg) scale(.92)}
.hc-legend [data-t="wait"] i{border:1.4px solid rgba(200,220,200,.55)}

/* first proof band */
.pullquote{padding-block:clamp(30px,4vw,48px);border-bottom:1px solid var(--line-dark)}
.pullquote .quote{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px}
.pullquote .quote p{margin:0;font-size:clamp(1.25rem,1.4vw + .8rem,1.7rem);line-height:1.35;color:var(--on-dark)}
.pullquote .quote footer{margin:0}

/* the prompt that invites people to replay the moment */
.hc-prompt{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:7px 15px 7px 11px;border-radius:999px;border:1px solid rgba(184,153,104,.5);background:rgba(184,153,104,.1);color:var(--gold-soft);font-size:.86rem;font-weight:500;line-height:1.2;transition:background-color .2s,border-color .2s}
.hc-prompt:hover{background:rgba(184,153,104,.2);border-color:var(--gold)}
.hc-prompt .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;animation:pulse 2.4s ease-out 6}
.hc-prompt.used .dot{animation:none}
.hc{cursor:pointer}


/* ===== css/sections.css ===== */
/* ---------- what a map shows ---------- */
.see{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.see-copy{position:sticky;top:calc(var(--hdr-h) + 40px)}
.see-copy .lead{margin:24px 0 18px}
.see-intro{font-weight:500;color:var(--forest);margin:6px 0 10px}
.see-list ol{border-top:1px solid var(--line)}
.see-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.see-list h3{font-family:var(--sans);font-size:1.08rem;font-weight:600;letter-spacing:0;color:var(--ink)}
.see-list li p{margin:4px 0 0;color:var(--muted)}
/* marker glyphs, the same vocabulary the maps use */
.gly{position:relative;width:34px;height:34px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;margin-top:1px}
.gly::before{content:"";width:11px;height:11px;border-radius:50%}
.gly[data-g="now"]::before{background:var(--gold);box-shadow:0 0 0 4px rgba(184,153,104,.25)}
.gly[data-g="wait"]::before{border:1.6px solid var(--sage)}
.gly[data-g="hand"]::before{width:14px;height:10px;border-radius:0;background:var(--pine);clip-path:polygon(0 35%,58% 35%,58% 0,100% 50%,58% 100%,58% 65%,0 65%)}
.gly[data-g="decide"]::before{border:1.8px solid var(--gold-ink);border-radius:1px;transform:rotate(45deg) scale(.9)}
.gly[data-g="track"]::before{width:13px;height:13px;border:1.6px solid var(--pine);border-top-color:transparent;border-radius:50%;transform:rotate(45deg)}
.gly[data-g="big"]::before{width:6px;height:6px;background:var(--forest);box-shadow:0 0 0 3px var(--soft),0 0 0 4.5px var(--forest)}

/* ---------- the two services ---------- */
.svc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.svc-art{height:230px;display:grid;place-items:center;padding:22px;border-bottom:1px solid var(--line)}
.svc-map .svc-art{background:var(--night);background-image:radial-gradient(rgba(200,220,200,.13) 1px,transparent 1.4px);background-size:22px 22px;border-bottom-color:var(--night)}
.svc-cc .svc-art{background:var(--cream)}
.art-map{width:min(100%,420px);height:auto}
.art-cc{width:min(100%,400px);height:176px;display:grid;grid-template-columns:54px 1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper);box-shadow:0 24px 40px -30px rgba(27,67,50,.5)}
.a-rail{background:var(--forest);padding:14px 10px;display:flex;flex-direction:column;gap:9px}
.a-rail i{height:6px;border-radius:3px;background:rgba(244,241,232,.28)}
.a-rail i.on{background:var(--gold)}
.a-main{padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.a-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.a-kpis b{height:34px;border:1px solid var(--line);border-top:3px solid var(--pale);background:#fff}
.a-kpis b.g{border-top-color:var(--gold)}.a-kpis b.t{border-top-color:var(--terra)}
.a-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;flex:1;min-height:0}
.a-list{border:1px solid var(--line);padding:9px;display:flex;flex-direction:column;gap:8px}
.a-list i{height:6px;border-radius:3px;background:var(--soft)}
.a-list i:nth-child(1){background:var(--pale);width:86%}.a-list i:nth-child(2){width:70%}.a-list i:nth-child(3){width:78%}.a-list i:nth-child(4){width:52%}
.a-chart{border:1px solid var(--line);padding:8px}
.a-chart svg{width:100%;height:100%}
.svc-body{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;flex:1}
.svc-tag{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--gold-ink);margin:8px 0 14px}
.svc-body .link{margin-top:auto;align-self:flex-start}
.ticks{margin:6px 0 24px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:24px;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:2px;top:.52em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.on-dark .ticks li{color:var(--on-dark-2)}
.svc-foot{margin:26px 0 0;color:var(--muted)}

/* ---------- studio + command center mounts ---------- */
.studio-mount{min-height:640px}
.studio-foot{margin:18px 0 0;color:var(--on-dark-3)!important}
.cc-switch{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:18px}
.cc-switch p{margin:0}
.cc-frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:0 40px 70px -50px rgba(27,67,50,.55)}
.cc-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);margin-top:clamp(28px,3vw,44px)}
.cc-points h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;letter-spacing:0;color:var(--ink);padding-top:14px;border-top:2px solid var(--gold)}
.cc-points p{margin:6px 0 0;color:var(--muted)}

/* ---------- outcomes ---------- */
.outcomes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.outcomes li{padding:26px clamp(14px,2vw,28px) 26px 0;border-right:1px solid var(--line);margin-right:clamp(14px,2vw,28px)}
.outcomes li:last-child{border-right:0;margin-right:0;padding-right:0}
.outcomes b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,1.6vw + 1rem,2.35rem);line-height:1.1;color:var(--forest);letter-spacing:-.02em}
.outcomes p{margin:10px 0 12px;line-height:1.45}
.outcomes span{display:block;font-size:.85rem;color:var(--muted)}
.quotes3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(22px,3vw,48px);margin-top:clamp(36px,4vw,60px)}
.quotes3 .quote{padding-left:20px;border-left:2px solid var(--gold)}
.quotes3 .quote p{margin:0}

/* ---------- who row ---------- */
.who-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.who-row li{border-right:1px solid var(--line)}
.who-row li:last-child{border-right:0}
.who-row a{display:block;height:100%;padding:22px 18px 26px;text-decoration:none;color:var(--ink);transition:background-color .2s}
.who-row li:first-child a{padding-left:0}
.who-row a:hover{background:var(--soft)}
.who-row li:first-child a:hover{background:linear-gradient(90deg,transparent,var(--soft) 18px)}
.who-row h3{font-size:1.2rem;display:flex;align-items:flex-start;gap:10px}
.who-row h3::before{content:"";flex:none;width:9px;height:9px;margin-top:.42em;border-radius:50%;border:1.5px solid var(--gold);transition:background-color .2s}
.who-row a:hover h3::before{background:var(--gold)}
.who-row p{margin:10px 0 0;font-size:.95rem;color:var(--muted);line-height:1.5}

/* ---------- photo frames ---------- */
.photo{position:relative;border-radius:var(--r);overflow:hidden;background:var(--pine)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.photo-sq{aspect-ratio:1/1}
.photo-tall{aspect-ratio:4/5}
.photo-fb{position:absolute;inset:0;display:none;place-items:center;background:var(--pine);background-image:radial-gradient(rgba(200,220,200,.2) 1px,transparent 1.4px);background-size:22px 22px}
.photo-fb span{font-family:var(--serif);font-style:italic;font-size:clamp(3rem,8vw,5.5rem);color:var(--gold-soft);width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold);box-shadow:0 0 0 8px rgba(184,153,104,.18)}
.photo.no-img img{display:none}
.photo.no-img .photo-fb{display:grid}

/* ---------- about teaser ---------- */
.about-t{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,88px);align-items:center}
.about-t .photo{box-shadow:0 0 0 1px var(--line-dark),14px 14px 0 -1px var(--forest),14px 14px 0 0 var(--gold)}
.about-t-copy .lead{margin:24px 0 16px}
.about-t-copy .btn{margin-top:14px}

/* ---------- closing call ---------- */
.cta{text-align:center;background:var(--cream);position:relative}
.cta-in{display:flex;flex-direction:column;align-items:center}
.cta h2{max-width:17ch}
.cta .lead{max-width:68ch;margin:24px auto 30px;color:var(--muted)}
.cta .btns{justify-content:center}

/* ---------- command center page pieces ---------- */
.cc-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);margin-bottom:clamp(24px,3vw,40px);align-items:start}
.cc-intro .ticks{margin-bottom:0}
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);counter-reset:step}
.steps4 li{counter-increment:step;padding-top:18px;border-top:2px solid var(--forest);position:relative}
.steps4 li::before{content:counter(step);font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--gold-ink);display:block;margin-bottom:12px}
.steps4 h3{font-size:1.22rem}
.steps4 p{margin:8px 0 0;color:var(--muted);font-size:.98rem}
.bg-forest .steps4 li{border-top-color:var(--gold)}
.bg-forest .steps4 li::before{color:var(--gold-soft)}
.bg-forest .steps4 p{color:var(--on-dark-2)}
.inside{margin-top:clamp(40px,5vw,72px)}
.build-btns{margin-top:clamp(28px,3vw,40px)}
.inside-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,72px);border-top:1px solid var(--line)}
.inside-list li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.inside-list b{font-weight:600;color:var(--forest)}
.inside-list span{color:var(--muted)}
/* studio page sample cards */
.samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.sample-own{border-top-color:var(--forest);background:var(--soft)}
.sample{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column}
.sample-kind{font-size:.85rem;color:var(--gold-ink);font-weight:500;margin-bottom:8px}
.sample p{color:var(--muted);margin:10px 0 14px}
.sample .btn{margin-top:auto;align-self:flex-start}
.mm-links{margin-top:clamp(36px,4vw,56px);padding-top:26px;border-top:1px solid var(--line)}
.mm-links ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:12px}
.mm-links p{margin:6px 0 0}

/* phones and small tablets see pictures of the dashboards instead of the live versions */
.cc-shots{display:none}
.cc-shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:0 30px 50px -40px rgba(27,67,50,.55)}
.cc-shot a{display:block}
.cc-shot img{width:100%;height:auto;display:block}
.cc-shot-note{margin:12px 0 0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.phone-only{display:none}
@media (max-width:820px){
  .cc-frame{display:none}
  .cc-shots{display:block}
  .desk-only{display:none!important}
  .phone-only{display:revert}
}


/* ===== css/studio.css ===== */
/* ---------- the map studio ---------- */
.studio{--st-line:rgba(200,220,200,.16);--st-h:600px;display:flex;flex-direction:column;background:var(--night);color:var(--on-dark);border:1px solid var(--st-line);border-radius:var(--r-lg);overflow:hidden;font-size:.9rem;line-height:1.45;box-shadow:0 50px 80px -60px rgba(0,0,0,.9)}
.studio button{font-size:inherit}
.studio.is-fs{border:0;border-radius:0;box-shadow:none}
.studio.is-fs .st-body{flex:1;min-height:0}
.studio.is-fs .st-stage{height:auto}

/* pick a map */
.st-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border-bottom:1px solid var(--st-line);background:rgba(244,241,232,.035)}
.st-pick-l{font-size:.82rem;color:var(--on-dark-3);margin-right:2px}
.st-pick-l + * {margin-right:8px}
.st-pick-g{display:inline-flex;flex-wrap:wrap;gap:6px}
.st-pick-g button,.st-own{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--st-line);color:var(--on-dark-2);font-weight:500;transition:background-color .2s,color .2s,border-color .2s}
.st-pick-g button:hover,.st-own:hover{border-color:rgba(244,241,232,.4);color:#fff}
.st-pick [data-src][aria-pressed="true"]{background:var(--gold);border-color:var(--gold);border-style:solid;color:var(--night)}
.st-pick .st-own{border-style:dashed;border-color:rgba(184,153,104,.7);color:var(--gold-soft)}

/* toolbar */
.st-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:9px 14px;border-bottom:1px solid var(--st-line)}
.st-views,.st-lens{display:inline-flex;align-items:center;gap:4px}
.st-views{padding:3px;border-radius:7px;background:rgba(244,241,232,.07)}
.st-views button{min-height:30px;padding:0 12px;border-radius:5px;color:var(--on-dark-2);font-weight:500}
.st-views button[aria-pressed="true"]{background:var(--on-dark);color:var(--night)}
.st-lens{flex-wrap:wrap}
.st-lens > span{font-size:.82rem;color:var(--on-dark-3);margin-right:4px}
.st-lens button{min-height:30px;padding:0 10px;border-radius:999px;color:var(--on-dark-2);border:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
.st-lens button:hover{color:#fff;background:rgba(244,241,232,.06)}
.st-lens button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-soft);background:rgba(184,153,104,.12)}
.st-lens b{font-weight:500;font-size:.78rem;color:var(--on-dark-3);font-variant-numeric:tabular-nums}
.st-tools{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.st-tools button{min-height:32px;min-width:32px;padding:0 9px;border-radius:6px;color:var(--on-dark-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.st-tools button:hover{background:rgba(244,241,232,.08);color:#fff}
.st-tools button:disabled{opacity:.35;cursor:default;background:none}
.st-tools svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.st-tools .st-sep{width:1px;height:20px;background:var(--st-line);margin:0 4px}
.st-search{position:relative;display:inline-flex;align-items:center}
.st-search svg{position:absolute;left:9px;width:14px;height:14px;pointer-events:none;color:var(--on-dark-3)}
.st-search input{width:128px;height:32px;padding:0 10px 0 30px;border-radius:6px;border:1px solid var(--st-line);background:rgba(244,241,232,.05);color:var(--on-dark);font-size:.88rem}
.st-search input::placeholder{color:var(--on-dark-3)}
.st-search input:focus{outline:none;border-color:var(--gold)}
.st-menu-wrap{position:relative}
.st-menu{position:absolute;right:0;top:38px;z-index:20;min-width:230px;padding:6px;background:#15382B;border:1px solid var(--st-line);border-radius:8px;box-shadow:0 24px 50px -20px rgba(0,0,0,.8)}
.st-menu button{display:flex;width:100%;justify-content:flex-start;min-height:38px;padding:0 12px;border-radius:5px;color:var(--on-dark)}
.st-menu hr{border:0;border-top:1px solid var(--st-line);margin:5px 0}

/* body */
.st-body{display:grid;grid-template-columns:minmax(0,1fr) 308px;min-height:0}
.st-stage{position:relative;height:var(--st-h);min-height:0;overflow:hidden}
.st-map{position:absolute;inset:0}
.mm-host{outline:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.mm-host.is-panning{cursor:grabbing}
.mm-host:focus-visible{box-shadow:inset 0 0 0 2px rgba(184,153,104,.55)}
.mm-svg{display:block;width:100%;height:100%}
.mm-node{cursor:pointer}
.mm-node text{pointer-events:none}
.mm-node:hover .mm-hit{fill:rgba(244,241,232,.06)}
.studio[data-theme="paper"] .mm-node:hover .mm-hit{fill:rgba(27,67,50,.06)}
.mm-toggle{cursor:pointer}
.mm-toggle .mm-dot{transition:r .15s}
.mm-toggle:hover .mm-dot{r:10px}
.mm-check{cursor:pointer}
.mm-host.is-dragging{cursor:grabbing}
.mm-edit{position:absolute;z-index:6;resize:none;overflow:hidden;border:2px solid var(--gold);border-radius:8px;background:#FFFEFA;color:var(--ink);outline:none;box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}

.st-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:rgba(244,241,232,.94);color:var(--night);font-weight:500;font-size:.86rem;pointer-events:none;transition:opacity .4s,transform .4s var(--ease);white-space:nowrap;max-width:calc(100% - 24px)}
.st-hint::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(184,153,104,.7);animation:pulse 2s ease-out infinite}
.st-hint.off{opacity:0;transform:translate(-50%,-8px)}
.st-zoom{position:absolute;right:12px;bottom:12px;z-index:4;display:inline-flex;border:1px solid var(--st-line);border-radius:7px;overflow:hidden;background:rgba(15,42,32,.86);backdrop-filter:blur(6px)}
.st-zoom button{min-width:36px;height:34px;padding:0 10px;color:var(--on-dark-2);font-weight:500}
.st-zoom button + button{border-left:1px solid var(--st-line)}
.st-zoom button:hover{color:#fff;background:rgba(244,241,232,.08)}
.st-status{position:absolute;left:12px;bottom:12px;z-index:4;padding:7px 12px;border-radius:7px;border:1px solid var(--st-line);background:rgba(15,42,32,.86);backdrop-filter:blur(6px);color:var(--on-dark-2);font-size:.84rem;max-width:calc(100% - 170px)}
.st-status b{color:var(--on-dark);font-weight:600}
.studio[data-theme="paper"] .st-zoom,.studio[data-theme="paper"] .st-status{background:rgba(250,246,238,.92);border-color:var(--line);color:var(--muted)}
.studio[data-theme="paper"] .st-zoom button{color:var(--forest)}
.studio[data-theme="paper"] .st-zoom button + button{border-color:var(--line)}
.studio[data-theme="paper"] .st-status b{color:var(--ink)}

/* guided tour card */
.st-tour{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:5;width:min(560px,calc(100% - 24px));padding:14px 16px;border-radius:10px;background:var(--cream);color:var(--ink);box-shadow:0 26px 50px -22px rgba(0,0,0,.75);border-top:3px solid var(--gold)}
.st-tour p{margin:0 0 10px;font-size:.95rem;line-height:1.45;color:var(--ink)}
.st-tour-f{display:flex;align-items:center;gap:8px}
.st-tour-f span{font-size:.82rem;color:var(--muted);margin-right:auto}
.st-tour-f button{min-height:32px;padding:0 12px;border-radius:5px;font-weight:500;color:var(--forest);border:1px solid var(--line)}
.st-tour-f button.go{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.st-tour-f button:disabled{opacity:.4;cursor:default}

/* empty-your-head bar */
.st-dump{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:5;width:min(620px,calc(100% - 24px));display:flex;gap:8px;padding:8px;border-radius:12px;background:var(--cream);box-shadow:0 26px 50px -22px rgba(0,0,0,.75)}
.st-dump input{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:1rem}
.st-dump input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,153,104,.25)}
.st-dump button{height:44px;padding:0 18px;border-radius:8px;background:var(--forest);color:var(--cream);font-weight:500}
.st-dump button:hover{background:var(--pine)}

/* outline view */
.st-outline{position:absolute;inset:0;overflow:auto;padding:22px 26px 80px;background:var(--cream);color:var(--ink);font-size:.95rem}
.st-outline h3{font-size:1.4rem;margin-bottom:4px;color:var(--forest)}
.st-outline .st-out-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.st-outline .st-out-top p{margin:0;color:var(--muted);font-size:.86rem}
.st-outline .btn-line{color:var(--forest)}
.st-outline ul{margin:0;padding:0}
.st-outline ul ul{margin-left:11px;padding-left:16px;border-left:1px solid var(--line)}
.st-outline li{list-style:none}
.st-out-row{display:flex;align-items:flex-start;gap:9px;padding:4px 8px;border-radius:5px;cursor:pointer}
.st-out-row:hover{background:var(--soft)}
.st-out-row.sel{background:rgba(184,153,104,.22)}
.st-out-row svg{flex:none;width:14px;height:14px;margin-top:4px}
.st-out-row .dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:7px}
.st-out-row.done > span{text-decoration:line-through;color:var(--muted)}
.st-out-row small{color:var(--muted);font-size:.84rem;margin-left:4px;white-space:nowrap}
.st-outline > ul > li{margin-bottom:10px}
.st-outline > ul > li > .st-out-row{font-weight:600;font-size:1rem}
.st-outline > ul > li > .st-out-row > span{color:var(--forest)}

/* side panel */
.st-side{border-left:1px solid var(--st-line);background:rgba(244,241,232,.035);padding:18px 18px 22px;overflow:auto;max-height:var(--st-h)}
.studio.is-fs .st-side{max-height:none}
.st-side h3{font-size:1.22rem;color:var(--on-dark);margin-bottom:8px}
.st-side h4{font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:0;color:var(--gold-soft);margin:20px 0 8px}
.st-side p{color:var(--on-dark-2);margin:0 0 12px}
.st-kind{font-size:.82rem!important;color:var(--gold-soft)!important;margin-bottom:6px!important}
.st-side ul{display:grid;gap:7px}
.st-side li{position:relative;padding-left:17px;color:var(--on-dark-2)}
.st-side li::before{content:"";position:absolute;left:1px;top:.55em;width:6px;height:6px;border-radius:50%;border:1.4px solid var(--gold)}
.st-side .btn{width:100%}
.st-side .btn + .btn{margin-top:8px}
.st-prompts button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;border:1px solid var(--st-line);color:var(--on-dark-2);margin-bottom:6px;line-height:1.35}
.st-prompts button:hover{border-color:var(--gold);color:#fff}
.st-f{margin-bottom:12px}
.st-f label,.st-f .lab{display:block;font-size:.8rem;color:var(--on-dark-3);margin-bottom:5px}
.st-f input[type="text"],.st-f select,.st-f textarea{width:100%;min-height:38px;padding:8px 10px;border-radius:6px;border:1px solid var(--st-line);background:rgba(244,241,232,.06);color:var(--on-dark);font-size:.92rem}
.st-f textarea{min-height:64px;resize:vertical;line-height:1.4}
.st-f select option{color:var(--ink);background:#fff}
.st-f input:focus,.st-f select:focus,.st-f textarea:focus{outline:none;border-color:var(--gold)}
.st-f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-chk{display:flex;align-items:center;gap:9px;color:var(--on-dark-2);margin-bottom:12px;cursor:pointer}
.st-chk input{width:17px;height:17px;accent-color:var(--gold)}
.st-sw{display:flex;flex-wrap:wrap;gap:7px}
.st-sw button{width:24px;height:24px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--st-line)}
.st-sw button[aria-pressed="true"]{border-color:var(--night);box-shadow:0 0 0 2px var(--on-dark)}
.st-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.st-acts button{min-height:38px;padding:0 10px;border-radius:6px;border:1px solid var(--st-line);color:var(--on-dark);font-weight:500;line-height:1.2}
.st-acts button:hover{border-color:var(--gold);background:rgba(184,153,104,.1)}
.st-acts .wide{grid-column:1/-1}
.st-acts .danger{color:#E9B7A2}
.st-acts .danger:hover{border-color:#C9805F;background:rgba(201,128,95,.12)}
.st-note{font-size:.84rem;color:var(--on-dark-3)!important;margin-top:14px!important}
.st-back{display:inline-flex;align-items:center;gap:6px;color:var(--gold-soft);font-size:.84rem;margin-bottom:12px}
.st-back:hover{color:#fff}

@media (max-width:1000px){
  .st-body{grid-template-columns:minmax(0,1fr)}
  .st-side{border-left:0;border-top:1px solid var(--st-line);max-height:none}
  .studio{--st-h:520px}
  .st-tools{margin-left:0}
}
@media (max-width:620px){
  .studio{--st-h:460px;border-radius:var(--r)}
  .st-pick{padding:10px}
  .st-pick-l{width:100%;margin:0}
  .st-bar{padding:8px 10px}
  .st-lens > span{display:none}
  .st-search input{width:96px}
  .st-status{max-width:calc(100% - 150px);font-size:.78rem}
  .st-tools [data-act="fs"] span,.st-tools [data-act="menu"] span{display:none}
  .st-hint{white-space:normal;text-align:left}
}


/* ===== css/command.css ===== */
/* ---------- sample command centers (two themes) ---------- */
.cc{
  --c-rail:#1B4332; --c-rail-2:rgba(255,255,255,.1); --c-rail-t:#D2E0D6; --c-rail-dim:#8FAE98;
  --c-acc:#B89968; --c-acc-ink:#1B4332; --c-head:#1B4332; --c-link:#2D6A4F;
  --c-bg:#FAF6EE; --c-paper:#FFFFFF; --c-line:#E3DCCB; --c-line-2:#F0EBDF; --c-soft:#F3EFE5; --c-pale:#C8DCC8;
  --c-ink:#1F2A24; --c-muted:#5F6F66; --c-warn:#B85C38; --c-warn-bg:#F3DED4; --c-warn-ink:#8A3E22;
  --c-gold-bg:#F1E8D6; --c-gold-ink:#7A5F2E; --c-ok-bg:#E3EDE4; --c-ok-ink:#3E5E44;
  --c-s1:#1E8A5A; --c-s2:#C28A1E; --c-s3:#2F78A8; --c-s4:#A24E7D; /* validated categorical order */
  --c-num:var(--serif); --c-numw:500; --cc-h:680px;
  display:grid;grid-template-columns:208px minmax(0,1fr);height:var(--cc-h);background:var(--c-bg);color:var(--c-ink);font-family:var(--sans);font-size:14px;line-height:1.45;text-align:left;overflow:hidden
}
/* the second sample keeps the same palette with a lighter, rounder look */
.cc[data-look="ops"]{--c-num:var(--sans);--c-numw:600}
.cc.is-fs{--cc-h:100%;height:100%}
.cc *{box-sizing:border-box}
.cc h1,.cc h2,.cc h3,.cc h4,.cc p{margin:0;letter-spacing:0}
.cc a{color:var(--c-link)}
.cc button{font:inherit;color:inherit;cursor:pointer}

/* rail */
.cc-rail{background:var(--c-rail);color:var(--c-rail-t);display:flex;flex-direction:column;min-height:0}
.cc-word{font-family:var(--serif);font-size:17px;line-height:1.18;color:#fff;padding:18px 18px 6px}
.cc-word small{display:block;font-family:var(--sans);font-size:11px;line-height:1.35;color:var(--c-rail-dim);margin-top:5px}
.cc-nav{flex:1;overflow:auto;padding:10px 9px}
.cc-nav button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 11px;border-radius:6px;color:var(--c-rail-t);font-size:13.5px;text-align:left;margin-bottom:2px}
.cc-nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.cc-nav button[aria-current="page"]{background:var(--c-rail-2);color:#fff}
.cc-nav .grp{font-size:11px;color:var(--c-rail-dim);padding:12px 11px 4px}
.cc-badge{margin-left:auto;background:var(--c-acc);color:var(--c-acc-ink);font-weight:600;font-size:11px;padding:0 7px;border-radius:10px;line-height:17px}
.cc-badge.warn{background:var(--c-warn);color:#fff}
.cc-foot{padding:12px 18px;font-size:11px;line-height:1.45;color:var(--c-rail-dim);border-top:1px solid rgba(255,255,255,.12)}
.cc-foot b{color:#fff;font-weight:500}

/* main */
.cc-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cc-sample{background:var(--c-gold-bg);color:var(--c-gold-ink);padding:6px 20px;font-size:12.5px;display:flex;gap:12px;align-items:center;flex:none}
.cc-sample span{margin-right:auto}
.cc-sample button{border:1px solid currentColor;border-radius:5px;padding:2px 9px;font-size:12px;background:transparent}
.cc-sample button:hover{background:rgba(255,255,255,.5)}
.cc-top{display:flex;align-items:center;gap:10px;padding:9px 20px;border-bottom:1px solid var(--c-line);background:var(--c-bg);flex:none}
.cc-search{position:relative;flex:1;max-width:360px}
.cc-search input{width:100%;height:34px;padding:0 10px 0 32px;border:1px solid var(--c-pale);border-radius:6px;background:var(--c-paper);font-size:13px;color:var(--c-ink)}
.cc-search input:focus{outline:2px solid color-mix(in srgb,var(--c-link) 35%,transparent);border-color:var(--c-link)}
.cc-search svg{position:absolute;left:10px;top:10px;width:14px;height:14px;stroke:var(--c-muted);fill:none;stroke-width:2;stroke-linecap:round}
.cc-res{position:absolute;left:0;right:0;top:38px;z-index:20;background:var(--c-paper);border:1px solid var(--c-pale);border-radius:6px;box-shadow:0 14px 30px -14px rgba(0,0,0,.35);max-height:260px;overflow:auto}
.cc-res button{display:block;width:100%;text-align:left;padding:8px 12px;border-bottom:1px solid var(--c-line-2)}
.cc-res button:hover{background:var(--c-soft)}
.cc-res small{display:block;color:var(--c-muted);font-size:11.5px}
.cc-date{margin-left:auto;color:var(--c-muted);font-size:12.5px;white-space:nowrap}
.cc-ib{height:34px;min-width:34px;padding:0 9px;border:1px solid var(--c-pale);border-radius:6px;background:var(--c-paper);color:var(--c-head);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;white-space:nowrap}
.cc-ib:hover{border-color:var(--c-muted)}
.cc-ib svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cc-ib.prim{background:var(--c-head);border-color:var(--c-head);color:#fff}
.cc-ib[aria-pressed="true"]{background:var(--c-soft);border-color:var(--c-muted)}
.cc-view{flex:1;overflow:auto;padding:20px 20px 40px;min-height:0;scroll-behavior:smooth}
.cc-view:focus{outline:none}
.cc-h1{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.15;color:var(--c-head)}
.cc-sub{color:var(--c-muted);margin:4px 0 16px!important;font-size:14px}
.cc-titlerow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
.cc-titlerow .sp{flex:1}

/* stat tiles */
.cc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.cc-kpi{background:var(--c-paper);border:1px solid var(--c-line);border-top:3px solid var(--c-pale);padding:12px 14px 11px;min-width:0}
.cc-kpi.gold{border-top-color:var(--c-acc)}.cc-kpi.warn{border-top-color:var(--c-warn)}.cc-kpi.head{border-top-color:var(--c-head)}
.cc[data-look="ops"] .cc-kpi{border-radius:6px}
.cc-kpi .v{font-family:var(--c-num);font-weight:var(--c-numw);font-size:23px;line-height:1.2;color:var(--c-head);white-space:nowrap}
.cc-kpi .v small{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--c-muted)}
.cc-kpi .l{font-size:12.5px;color:var(--c-muted)}
.cc-kpi .s{font-size:12px;color:var(--c-muted);margin-top:3px;line-height:1.35}
.cc-kpi .s.up{color:var(--c-ok-ink)}.cc-kpi .s.down{color:var(--c-warn-ink)}

/* sheets and tables */
.cc-sheet{background:var(--c-paper);border:1px solid var(--c-line);margin-bottom:16px;min-width:0}
.cc[data-look="ops"] .cc-sheet{border-radius:6px}
.cc-sheet-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;border-bottom:1px solid var(--c-line)}
.cc-sheet-h h2{font-family:var(--serif);font-weight:500;font-size:16.5px;color:var(--c-head)}
.cc-sheet-h .cnt{color:var(--c-muted);font-size:12.5px;margin-right:auto}
.cc-sheet-b{padding:14px}
.cc-sheet-b.tight{padding:0}
.cc-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.cc-half{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cc-tw{overflow-x:auto}
.cc-t{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.cc-t th{text-align:left;font-weight:500;color:var(--c-muted);font-size:12px;padding:8px 12px;border-bottom:1px solid var(--c-line);white-space:nowrap}
.cc-t td{padding:9px 12px;border-bottom:1px solid var(--c-line-2);vertical-align:top}
.cc-t .n{text-align:right;white-space:nowrap}
.cc-t tr:last-child td{border-bottom:0}
.cc-t tr.total td{font-weight:600;border-top:2px solid var(--c-pale);background:var(--c-soft)}
.cc-t tr.grp td{background:var(--c-soft);color:var(--c-head);font-weight:500;padding-block:7px}
.cc-t .dim{color:var(--c-muted);font-size:12.5px}
.cc-t b{font-weight:500;color:var(--c-head)}
.cc-pill{display:inline-block;font-size:11px;line-height:16px;padding:2px 8px;border-radius:10px;background:var(--c-pale);color:var(--c-head);white-space:nowrap}
.cc-pill.gold{background:var(--c-gold-bg);color:var(--c-gold-ink)}
.cc-pill.warn{background:var(--c-warn-bg);color:var(--c-warn-ink)}
.cc-pill.ok{background:var(--c-ok-bg);color:var(--c-ok-ink)}
.cc-pill.grey{background:#ECEAE4;color:#5d5d5d}
.cc-btn{font-size:12.5px;padding:5px 10px;border:1px solid var(--c-pale);background:var(--c-paper);color:var(--c-head);border-radius:5px;white-space:nowrap}
.cc-btn:hover{border-color:var(--c-muted)}
.cc-btn.prim{background:var(--c-head);color:#fff;border-color:var(--c-head)}
.cc-btn.ghost{border-color:transparent;background:transparent;color:var(--c-link)}
.cc-btn.ghost:hover{background:var(--c-soft)}
.cc-note{background:var(--c-soft);border-left:3px solid var(--c-acc);padding:10px 14px;font-size:13px;color:var(--c-ink)}
.cc-empty{padding:22px 16px;text-align:center;color:var(--c-muted)}

/* alerts */
.cc-al{display:flex;gap:13px;padding:11px 14px;border-bottom:1px solid var(--c-line-2)}
.cc-al:last-child{border-bottom:0}
.cc-al .d{width:54px;flex:none;text-align:center;border-right:2px solid var(--c-pale);padding-right:10px;padding-top:1px}
.cc-al .d b{display:block;font-family:var(--c-num);font-size:20px;line-height:1;font-weight:var(--c-numw);color:var(--c-head)}
.cc-al .d span{display:block;font-size:11px;color:var(--c-muted);margin-top:3px}
.cc-al.overdue .d{border-color:var(--c-warn)}.cc-al.overdue .d b{color:var(--c-warn)}
.cc-al.due .d{border-color:var(--c-acc)}
.cc-al.done{opacity:.55}
.cc-al .body{flex:1;min-width:0}
.cc-al .tt{font-weight:500;color:var(--c-head)}
.cc-al .rel{font-weight:400;font-size:12px;color:var(--c-muted);white-space:nowrap;margin-left:4px}
.cc-al .rel.overdue{color:var(--c-warn-ink);font-weight:500}.cc-al .rel.due{color:var(--c-gold-ink);font-weight:500}
.cc-al .xx{color:var(--c-muted);font-size:12.5px;margin-top:2px}
.cc-al .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* small rows */
.cc-hz{display:flex;gap:11px;align-items:baseline;padding:8px 14px;border-bottom:1px solid var(--c-line-2);font-size:13px}
.cc-hz:last-child{border-bottom:0}
.cc-hz .dt{width:52px;flex:none;color:var(--c-muted);font-size:12px}
.cc-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c-muted);position:relative;top:-1px}
.cc-dot.a{background:var(--c-s2)}.cc-dot.b{background:var(--c-s1)}.cc-dot.c{background:var(--c-s3)}.cc-dot.d{background:var(--c-s4)}
.cc-hz .mut{color:var(--c-muted);font-size:12px}
.cc-tk{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px 14px;border-bottom:1px solid var(--c-line-2)}
.cc-tk:last-child{border-bottom:0}
.cc-tk input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--c-link);cursor:pointer}
.cc-tk .t{font-size:13.5px;color:var(--c-ink)}
.cc-tk .m{font-size:12px;color:var(--c-muted);margin-top:1px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.cc-tk .due{font-size:12px;color:var(--c-muted);white-space:nowrap;padding-top:1px}
.cc-tk .due.overdue{color:var(--c-warn-ink);font-weight:500}.cc-tk .due.today{color:var(--c-gold-ink);font-weight:500}
.cc-tk.done .t{text-decoration:line-through;color:var(--c-muted)}
.cc-gh{display:flex;justify-content:space-between;font-size:12px;color:var(--c-muted);padding:10px 14px 6px;border-bottom:1px solid var(--c-line-2);background:var(--c-soft)}
.cc-gh.overdue{color:var(--c-warn-ink)}
.cc-quick{display:flex;gap:8px;padding:12px 14px;border-bottom:1px solid var(--c-line)}
.cc-quick input,.cc-quick select{height:36px;border:1px solid var(--c-pale);border-radius:6px;padding:0 10px;font-size:13.5px;background:var(--c-paper);color:var(--c-ink);min-width:0}
.cc-quick input{flex:1}
.cc-seg{display:inline-flex;border:1px solid var(--c-pale);border-radius:6px;overflow:hidden}
.cc-seg button{padding:5px 11px;font-size:12.5px;background:var(--c-paper);color:var(--c-muted)}
.cc-seg button + button{border-left:1px solid var(--c-pale)}
.cc-seg button[aria-pressed="true"]{background:var(--c-head);color:#fff}

/* charts */
.cc-chart{position:relative;max-width:720px}
.cc-chart svg{display:block;width:100%;height:auto;overflow:visible}
.cc-chart text{font-family:var(--sans);font-size:11px;fill:var(--c-muted)}
.cc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--c-muted)}
.cc-legend span{display:inline-flex;align-items:center;gap:6px}
.cc-legend i{width:10px;height:10px;border-radius:2px}
.cc-legend i.ln{height:2px;width:14px;border-radius:2px}
.cc-meter{height:8px;border-radius:4px;background:var(--c-soft);overflow:hidden}
.cc-meter i{display:block;height:100%;border-radius:4px;background:var(--c-s1)}
.cc-meter.acc i{background:var(--c-acc)}
.cc-alloc{display:flex;height:22px;gap:2px}
.cc-alloc i{display:block;height:100%;min-width:3px}
.cc-alloc i:first-child{border-radius:4px 0 0 4px}.cc-alloc i:last-child{border-radius:0 4px 4px 0}
.cc-hero{font-family:var(--c-num);font-weight:var(--c-numw);font-size:44px;line-height:1;color:var(--c-head);letter-spacing:-.01em}
.cc-nw{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--c-line-2);font-size:13px}
.cc-nw .k{color:var(--c-muted);display:flex;align-items:center;gap:8px}
.cc-nw.total{font-weight:600;border-top:2px solid var(--c-pale);border-bottom:0;padding-top:10px;margin-top:2px}
.cc.blur .money{filter:blur(6px)}

/* business-line strip (the operating business sample) */
.cc-arc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--c-head);border-radius:8px;overflow:hidden;color:#fff;margin-bottom:16px}
.cc-arc button{text-align:left;padding:14px 16px 16px;border-left:1px solid rgba(255,255,255,.12);min-width:0;display:block}
.cc-arc button:first-child{border-left:0}
.cc-arc button:hover{background:rgba(255,255,255,.06)}
.cc-arc .k{font-size:12px;color:var(--c-rail-t)}
.cc-arc .big{font-size:25px;font-weight:600;color:var(--c-acc);line-height:1.15;margin-top:6px;white-space:nowrap}
.cc-arc .meta{font-size:12px;color:rgba(255,255,255,.68);margin-top:5px;line-height:1.4}

/* pipeline board */
.cc-kan{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:12px;overflow-x:auto;padding-bottom:4px}
.cc-kcol{background:var(--c-soft);border-radius:6px;padding:10px;min-height:280px;transition:outline-color .15s;outline:2px dashed transparent;outline-offset:-4px}
.cc-kcol.over{outline-color:var(--c-link)}
.cc-kcol h3{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--c-muted);display:flex;justify-content:space-between;margin-bottom:9px}
.cc-kcol h3 b{color:var(--c-head);font-weight:600}
.cc-kcard{background:var(--c-paper);border:1px solid var(--c-line);border-radius:5px;padding:10px 11px;margin-bottom:8px;cursor:grab}
.cc-kcard:active{cursor:grabbing}
.cc-kcard.dragging{opacity:.45}
.cc-kcard .t{font-weight:500;color:var(--c-head);font-size:13.5px;line-height:1.3}
.cc-kcard .m{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--c-muted)}
.cc-kcard .amt{color:var(--c-ink);font-weight:600;font-size:13px}
.cc-kcard .mv{margin-top:8px;display:flex;gap:6px}
.cc-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cc-score div{background:var(--c-soft);border-radius:6px;padding:12px;text-align:center}
.cc-score .n{font-size:24px;font-weight:600;color:var(--c-head);line-height:1}
.cc-score .n small{font-size:13px;font-weight:400;color:var(--c-muted)}
.cc-score .l{font-size:12px;color:var(--c-muted);margin:4px 0 8px}
.cc-pri{display:grid;gap:8px}
.cc-pri label{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;padding:10px 12px;border:1px solid var(--c-line);border-radius:6px;background:var(--c-paper);cursor:pointer}
.cc-pri input{width:16px;height:16px;margin-top:2px;accent-color:var(--c-link)}
.cc-pri input:checked + span{text-decoration:line-through;color:var(--c-muted)}

/* frame header on the site */
.cc-wrap{position:relative}
.cc-hdr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.cc-hdr b{font-weight:600;color:var(--forest)}
.cc-hdr .sp{flex:1}

@media (max-width:1000px){
  .cc-two,.cc-half{grid-template-columns:minmax(0,1fr)}
  .cc-arc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-arc button{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .cc-arc button:last-child{grid-column:1/-1}
}
@media (max-width:760px){
  .cc{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);--cc-h:640px}
  .cc-rail{flex-direction:row;align-items:center;overflow:hidden}
  .cc-word{padding:10px 12px;font-size:15px;flex:none;max-width:40%}
  .cc-word small,.cc-foot,.cc-nav .grp{display:none}
  .cc-nav{display:flex;gap:2px;padding:6px 8px;overflow-x:auto}
  .cc-nav button{white-space:nowrap;width:auto;margin:0;padding:7px 10px;font-size:13px}
  .cc-date{display:none}
  .cc-view{padding:14px 12px 30px}
  .cc-top{padding:8px 12px}
  .cc-sample{padding:6px 12px}
  .cc-score{grid-template-columns:minmax(0,1fr)}
}


/* ===== css/pages.css ===== */
/* ---------- shared page pieces ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.split > div > .lead:first-child{margin-top:0}
.split .btns{margin-top:22px}
.block{margin-top:clamp(44px,5.5vw,84px)}
.block > .h-md{margin-bottom:22px}
.quote-lg{margin-top:clamp(36px,4vw,60px);padding:clamp(22px,3vw,36px) clamp(22px,3.4vw,44px);background:var(--soft);border-left:3px solid var(--gold);font-size:clamp(1.12rem,.6vw + 1rem,1.34rem)}
.quote-lg p{margin:0}
.bg-soft .quote-lg{background:var(--paper)}
.bio-main .quote-lg{margin-top:28px}

/* three requirements, three steps */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--forest);border-bottom:1px solid var(--line);margin-bottom:22px}
.tri li{padding:22px clamp(16px,2.4vw,32px) 24px 0;border-right:1px solid var(--line);margin-right:clamp(16px,2.4vw,32px)}
.tri li:last-child{border-right:0;margin-right:0;padding-right:0}
.tri h4{font-size:1.6rem}
.tri p{margin:8px 0 0;color:var(--muted)}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);counter-reset:s3}
.steps3 li{counter-increment:s3;position:relative;padding:22px 24px 24px;background:var(--paper);border:1px solid var(--line)}
.steps3 li::before{content:counter(s3);position:absolute;right:20px;top:14px;font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--pale)}
.steps3 h4{font-size:1.28rem;padding-right:40px}
.steps3 p{margin:10px 0 0;color:var(--muted);font-size:.98rem}
.steps3 li + li::after{content:"";position:absolute;left:calc(clamp(16px,2.4vw,32px) * -1);top:38px;width:clamp(16px,2.4vw,32px);height:2px;background:var(--gold)}
.steps4.named li::before{content:attr(data-k);font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--gold-ink);margin-bottom:10px}
.steps4.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* the research behind it */
.research{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(18px,2.6vw,36px);border-top:2px solid var(--forest)}
.research li{padding:20px 0 22px;border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.r-claim{font-family:var(--serif);font-size:1.22rem;line-height:1.3;color:var(--forest);margin:0 0 10px}
.r-so{margin:0 0 14px;color:var(--muted);font-size:.97rem;line-height:1.5}
.research cite{display:block;margin-top:auto;font-style:normal;font-size:.82rem;line-height:1.4;color:var(--muted)}
.research cite a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:rgba(122,95,46,.35)}
.research cite a:hover{text-decoration-color:currentColor}

/* the kinds of item on a map */
.kinds-wrap{margin-top:clamp(36px,4vw,56px);padding-top:26px;border-top:1px solid var(--line)}
.kinds-intro{font-weight:500;color:var(--forest);margin:0 0 16px}
.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px clamp(18px,2.4vw,32px)}
.kinds li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.kinds .g12{width:34px;height:34px;background:var(--paper)}
.kinds .g12 svg{width:15px;height:15px}
.kinds b{display:block;font-weight:600;color:var(--ink);font-size:.98rem;line-height:1.3;padding-top:4px}
.kinds div > span{display:block;color:var(--muted);font-size:.9rem;line-height:1.45}
.g12{width:40px;height:40px;border-radius:50%;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--pine)}
.g12 svg{width:17px;height:17px;overflow:visible}
.note-dark{margin:24px 0 0;padding:16px 20px;background:rgba(244,241,232,.07);border-left:3px solid var(--gold);color:var(--on-dark)!important}
.jbm-btns{margin-top:clamp(24px,3vw,36px)}

.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,4vw,56px);border-top:1px solid var(--line)}
.benefits li{padding:22px 0 24px;border-bottom:1px solid var(--line)}
.benefits h3{font-size:1.24rem;display:flex;gap:10px;align-items:baseline}
.benefits h3::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}
.benefits p{margin:8px 0 0 19px;color:var(--muted)}

.for4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-bottom:28px}
.for4 li{padding-top:16px;border-top:2px solid var(--gold)}
.for4 h4{font-size:1.18rem;color:var(--on-dark)}
.for4 p{margin:8px 0 0;font-size:.97rem}

/* plans */
.plans-h{margin-top:clamp(44px,5vw,72px)}
.plans{border-top:2px solid var(--forest)}
.plan{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(18px,3vw,48px);padding:clamp(22px,2.8vw,34px) 0;border-bottom:1px solid var(--line);align-items:start}
.plan-h h4{font-size:1.45rem;line-height:1.18}
.plan-price{display:inline-block;margin:10px 0 0;padding:4px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:.88rem;font-weight:500;color:var(--gold-ink)}
.plan-for{font-weight:500;color:var(--ink);margin-bottom:10px}
.plan .ticks{margin:0}
.plan .quote{font-size:1.04rem;padding-left:18px;border-left:2px solid var(--gold)}
.plan .quote p{margin:0}
.plan-link{padding-left:18px;border-left:2px solid var(--gold)}
.pricing-note{margin:26px 0 0;padding:18px 22px;background:var(--soft);border-left:3px solid var(--gold);color:var(--ink)}

/* who I work with */
.who-list{padding-top:0}
.who{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--line);align-items:start}
.who:last-child{border-bottom:0}
.who-h{position:sticky;top:calc(var(--hdr-h) + 28px)}
.who-h h2{display:flex;gap:14px;align-items:baseline}
.who-h h2::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(184,153,104,.22);transform:translateY(-4px)}
.who-tags{margin:12px 0 0 26px;color:var(--gold-ink);font-size:.95rem}
.who-b .lead{margin-top:0}
.who-b .quote{margin:24px 0;padding-left:20px;border-left:2px solid var(--gold)}
.who-b .quote p{margin:0}
.who-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}

/* case studies */
.cases{display:grid;gap:0}
.case{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--line);align-items:start}
.case:first-child{padding-top:0}
.case:last-child{border-bottom:0;padding-bottom:0}
.case-h{position:sticky;top:calc(var(--hdr-h) + 28px)}
.case-out{margin-top:24px;border-top:2px solid var(--forest)}
.case-out li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.4}
.case-out b{display:block;font-family:var(--serif);font-weight:500;font-size:1.5rem;color:var(--forest);line-height:1.2;margin-bottom:2px}
.case-b h3{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--gold-ink);margin:22px 0 6px}
.case-b h3:first-child{margin-top:0}
.case-b p{margin:0 0 12px}
.case-b .quote{margin:24px 0 16px;font-size:1.3rem;padding-left:20px;border-left:2px solid var(--gold)}
.case-b .quote p{margin:0}

/* about */
.bio{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);align-items:start}
.bio-side{position:sticky;top:calc(var(--hdr-h) + 28px)}
.bio-side .photo{box-shadow:12px 12px 0 -1px var(--cream),12px 12px 0 0 var(--gold)}
.bio-cap{margin:30px 0 0;color:var(--muted);font-size:.95rem;line-height:1.5}
.bio-cap b{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--forest)}
.bio-main .lead{margin:22px 0 16px}
.statband{padding-block:clamp(36px,4vw,56px)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.stats li{padding-left:18px;border-left:2px solid var(--gold)}
.stats b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,2.4vw + 1rem,3rem);line-height:1.05;color:var(--gold-soft)}
.stats span{display:block;margin-top:8px;color:var(--on-dark-2);font-size:.97rem;line-height:1.45}
.expertise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:start}
.expertise h3{font-size:1.3rem;padding-bottom:12px;border-bottom:2px solid var(--forest);margin-bottom:14px}
.expertise .ticks + h3{margin-top:30px}
.expertise .ticks{margin:0;font-size:.98rem}
.why4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.why4 li{font-family:var(--serif);font-size:1.4rem;line-height:1.25;color:var(--forest);padding-top:18px;border-top:2px solid var(--gold)}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.values article{padding:clamp(20px,2.4vw,30px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.values h3{font-size:1.32rem}
.values article > p{margin:10px 0 16px;color:var(--muted)}
.values .quote{font-size:1.02rem;padding-left:16px;border-left:2px solid var(--gold)}
.values .quote p{margin:0}

/* partners */
.partners4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(36px,4vw,60px);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.partners4 li{padding:clamp(20px,2.6vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.partners4 h3{font-size:1.36rem}
.partners4 .who-tags{margin:6px 0 10px}
.partners4 p:last-child{margin:10px 0 0;color:var(--muted)}
.spot h3{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--gold-soft);margin:22px 0 6px}
.spot h3:first-child{margin-top:0}
.spot .ticks{margin:8px 0 0}
#partners-spotlight .quote{margin-top:26px;padding-left:20px;border-left:2px solid var(--gold)}
#partners-referrals .quote{margin-top:24px;padding-left:20px;border-left:2px solid var(--gold)}
#partners-referrals .h-md{margin:0 0 8px}
#partners-referrals p + .h-md{margin-top:28px}
.fit{margin-top:22px;padding:16px 20px;background:var(--soft);border-left:3px solid var(--gold)}
.fit b{font-weight:600;color:var(--forest)}

/* get started */
.start-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.start-top h1{max-width:14ch}
.reach{background:rgba(244,241,232,.06);border:1px solid var(--line-dark);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:12px}
.reach-k{display:flex;align-items:center;gap:10px;margin:0 0 4px;color:var(--gold-soft)!important;font-weight:500}
.reach-k .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(184,153,104,.25)}
.reach .btn{width:100%}
.btn-xl{min-height:60px;font-size:1.15rem}
.reach .small{margin:4px 0 0;color:var(--on-dark-3)}
.form{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--forest);padding:clamp(22px,3vw,36px)}
.f{margin-bottom:18px}
.f label{display:block;font-weight:500;margin-bottom:7px;color:var(--ink)}
.f input,.f select,.f textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid #CFC7B4;border-radius:6px;background:#fff;color:var(--ink);font-size:1rem}
.f textarea{resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(45,106,79,.18)}
.form-err{color:#8A3E22;background:#F3DED4;padding:9px 12px;border-radius:6px;margin:0 0 16px;font-size:.95rem}
.form .small{margin:14px 0 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:2px solid var(--forest)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--serif);font-size:1.26rem;color:var(--forest);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details p{margin:0 0 22px;color:var(--muted)}

/* joeybmaps */
.jbm{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.jbm-name{font-family:var(--serif);font-size:clamp(2.6rem,4vw + 1rem,4.4rem);line-height:1;letter-spacing:-.03em;color:var(--on-dark)}
.jbm-name i{font-style:italic;color:var(--gold-soft)}
.jbm-live{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:5px 13px 5px 11px;border-radius:999px;border:1px solid rgba(184,153,104,.6);color:var(--gold-soft)!important;font-size:.88rem;font-weight:500}
.jbm-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#7BD6A2;box-shadow:0 0 0 0 rgba(123,214,162,.6);animation:pulse2 2.4s ease-out infinite}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(123,214,162,.55)}70%,100%{box-shadow:0 0 0 8px rgba(123,214,162,0)}}
.jbm .lead{margin:20px 0 14px}
.jbm-why{font-weight:500;color:var(--on-dark)!important;margin:0 0 14px}
.cta-more{margin:18px 0 0}
.jbm .btns{margin-top:24px}
.ladder{display:grid;gap:0;counter-reset:rung}
.ladder li{counter-increment:rung;position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:start;padding:16px 18px 16px 0;border-top:1px solid var(--line-dark)}
.ladder li:last-child{border-bottom:1px solid var(--line-dark)}
.ladder li::before{content:counter(rung);width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;color:var(--on-dark-3);margin-left:8px}
.ladder h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;letter-spacing:0;color:var(--on-dark)}
.ladder p{margin:3px 0 0;font-size:.95rem;color:var(--on-dark-3)!important}
.ladder li.now{background:rgba(184,153,104,.12);border-color:rgba(184,153,104,.5);border-radius:8px;border:1px solid rgba(184,153,104,.55);margin-top:-1px}
.ladder li.now::before{background:var(--gold);border-color:var(--gold);color:var(--night)}
.ladder li.now h3{color:var(--gold-soft)}
.ladder li.now p{color:var(--on-dark-2)!important}

@media (max-width:1000px){
  .split,.who,.case,.bio,.start-top,.jbm,.cc-intro,.ph-row,.ph .wrap.ph-grid{grid-template-columns:minmax(0,1fr)}
  .ph .wrap.ph-grid > h1,.ph .wrap.ph-grid > .lead,.ph .wrap.ph-grid > .crumbs{grid-column:1 / -1;grid-row:auto}
  .ph .wrap.ph-grid > .lead{margin-top:22px}
  .ph .wrap.ph-grid > .crumbs{margin-top:26px}
  .who-h,.case-h,.bio-side{position:static}
  .bio-side{max-width:380px}
  .values,.benefits,.expertise,.research{grid-template-columns:repeat(2,minmax(0,1fr))}
  .for4,.why4,.stats,.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan{grid-template-columns:minmax(0,1fr);gap:16px}
  .samples{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inside-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .tri,.steps3,.steps4.three{grid-template-columns:minmax(0,1fr)}
  .tri li{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--line)}
  .tri li:last-child{border-bottom:0}
  .steps3 li + li::after{display:none}
  .values,.benefits,.expertise,.partners4,.for4,.why4,.stats,.steps4,.research,.samples{grid-template-columns:minmax(0,1fr)}
  .inside-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .who-tags{margin-left:0}
}

/* ---------- the joeybmaps page ---------- */
.jb-hero{padding-block:clamp(56px,7vw,104px)}
.jb-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.jb-name{font-size:clamp(3.2rem,6vw + 1rem,6.2rem)}
.jb-hero-copy .lead{margin:24px 0 16px}
.jb-hero-copy .btns{margin-top:28px}
.jb-phone-wrap{display:flex;flex-direction:column;align-items:center}
.jb-phone{width:min(100%,318px);aspect-ratio:9/18.6;border-radius:46px;padding:12px;background:linear-gradient(160deg,#21483A,#0B1F17);box-shadow:0 0 0 1px rgba(200,220,200,.22),0 50px 90px -40px rgba(0,0,0,.85)}
.jb-screen{height:100%;border-radius:36px;overflow:hidden;padding:30px 14px 16px;background:radial-gradient(120% 70% at 50% 0%,#2D6A4F 0%,#163A2B 55%,#0F2A20 100%)}
.jb-clock{margin:0 0 18px;text-align:center;font-family:var(--serif);font-size:3.1rem;line-height:1;letter-spacing:-.02em;color:var(--on-dark)!important}
.jb-clock span{display:block;font-family:var(--sans);font-size:.85rem;letter-spacing:0;margin-bottom:6px;color:var(--on-dark-2)}
.jb-notes{display:grid;gap:8px}
.jb-notes li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 12px;border-radius:16px;background:rgba(250,246,238,.13);border:1px solid rgba(250,246,238,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.jb-app{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:500;color:var(--on-dark-2)}
.jb-app i{width:14px;height:14px;border-radius:4px;background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23B89968' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 20C26 20 25 10 32 10'/%3E%3Cpath d='M20 20C27 20 26 29 33 29'/%3E%3Cpath d='M20 20C14 20 15 11 8 11'/%3E%3Cpath d='M20 20C13 20 14 30 7 30'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5' fill='%23FAF6EE'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 1px rgba(184,153,104,.5)}
.jb-notes small{font-size:.7rem;color:var(--on-dark-3);text-align:right}
.jb-notes b{grid-column:1 / -1;font-size:.84rem;font-weight:600;line-height:1.3;color:var(--on-dark)}
.jb-body{grid-column:1 / -1;font-size:.8rem;line-height:1.35;color:var(--on-dark-2)}
.jb-phone-cap{margin:18px 0 0;max-width:300px;text-align:center;color:var(--on-dark-3)!important}

.jb-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:jbl;border-top:2px solid var(--forest)}
.jb-ladder li{counter-increment:jbl;position:relative;padding:26px clamp(16px,2.2vw,30px) 28px 0;margin-right:clamp(16px,2.2vw,30px);border-right:1px solid var(--line)}
.jb-ladder li:last-child{margin-right:0;border-right:0}
.jb-ladder li::before{content:counter(jbl);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-family:var(--serif);font-size:1.2rem;color:var(--muted);margin-bottom:18px;background:var(--paper)}
.jb-ladder h3{font-size:1.5rem}
.jb-ladder .g{margin:10px 0 6px;font-weight:500;color:var(--ink)}
.jb-ladder .l{margin:0;color:var(--muted)}
.jb-ladder li.now{background:var(--forest);border:0;border-radius:var(--r-lg);padding:26px 26px 30px;margin-top:-2px;box-shadow:0 30px 60px -36px rgba(27,67,50,.7)}
.jb-ladder li.now::before{background:var(--gold);border-color:var(--gold);color:var(--night)}
.jb-ladder li.now h3{color:var(--gold-soft)}
.jb-ladder li.now .g{color:var(--on-dark)}
.jb-ladder li.now .l{color:var(--gold-soft);font-weight:500}

.jb-does{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);background:var(--paper)}
.jb-does li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:clamp(22px,2.6vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.jb-does h3{font-size:1.32rem}
.jb-does p{margin:8px 0 0;color:var(--muted)}

.jb-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,26px);counter-reset:jbs}
.jb-steps li{counter-increment:jbs;padding-top:18px;border-top:2px solid var(--forest)}
.jb-steps li::before{content:counter(jbs);display:block;font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--gold-ink);margin-bottom:12px}
.jb-steps h3{font-size:1.16rem}
.jb-steps p{margin:8px 0 0;color:var(--muted);font-size:.98rem}

.jb-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.jb-split > div{padding:clamp(22px,2.6vw,32px);border:1px solid var(--line-dark);border-radius:var(--r-lg);background:rgba(244,241,232,.05)}
.jb-split h3{font-size:1.4rem;margin-bottom:14px}
.jb-split > div:last-child{border-color:rgba(184,153,104,.55);background:rgba(184,153,104,.1)}
.jb-split > div:last-child h3{color:var(--gold-soft)}
.jb-split .ticks{margin:0}

@media (max-width:1000px){
  .jb-hero-in{grid-template-columns:minmax(0,1fr)}
  .jb-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jb-ladder li:nth-child(2){margin-right:0;border-right:0}
  .jb-ladder li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .jb-ladder li.now{margin-top:18px}
  .jb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .jb-ladder,.jb-does,.jb-steps,.jb-split{grid-template-columns:minmax(0,1fr)}
  .jb-ladder li{margin-right:0;padding-right:0;border-right:0;border-bottom:1px solid var(--line)}
  .jb-ladder li.now{padding:24px 22px 26px;margin-top:18px}
  .jb-phone{width:min(100%,300px)}
}

/* one size for every paragraph in a text column that opens with a lead paragraph */
.lead ~ p:not([class]){font-size:clamp(1.08rem,.5vw + 1rem,1.26rem);line-height:1.58}


/* ===== css/responsive.css ===== */
/* ---------- responsive ---------- */
@media (max-width:1360px){
  .nav .nav-more{display:none}
}
@media (max-width:1240px){
  .nav .nav-mid{display:none}
}
@media (max-width:1240px){
  .nav a{padding:9px 8px;font-size:.9rem}
  .hdr-in{gap:12px}
  .hdr-cta{padding:0 13px;font-size:.88rem}
}
@media (max-width:1100px){
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;gap:0;background:var(--forest);padding:10px var(--gutter) 22px;border-bottom:1px solid var(--line-dark);display:none;max-height:calc(100vh - var(--hdr-h));overflow:auto;box-shadow:0 30px 40px -30px rgba(0,0,0,.6)}
  .nav a{padding:14px 4px;font-size:1.05rem;border-bottom:1px solid var(--line-dark);border-radius:0}
  .nav .nav-more,.nav .nav-mid,.nav .nav-only{display:block}
  .nav .nav-cta{margin-top:14px;border:0;padding:0}
  .nav .nav-cta .btn{width:100%}
  .nav a[aria-current="page"]::after{left:0;right:auto;width:3px;height:auto;top:12px;bottom:12px;margin-left:-10px}
  body.menu-open .nav{display:flex}
  .menu-btn{display:flex}
  .hdr-cta{margin-left:auto}
  .menu-btn{margin-left:0}
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-stage{margin-right:0}
  .hero-copy .lead{max-width:40em}
  .see{grid-template-columns:minmax(0,1fr)}
  .see-copy{position:static}
  .outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outcomes li:nth-child(2){border-right:0;margin-right:0;padding-right:0}
  .outcomes li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .quotes3{grid-template-columns:minmax(0,1fr)}
  .who-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .who-row li{border-bottom:1px solid var(--line)}
  .who-row li:nth-child(2n){border-right:0}
  .who-row li:first-child a{padding-left:18px}
  .who-row li:first-child a:hover{background:var(--soft)}
  .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .sec-head{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  .svc2{grid-template-columns:minmax(0,1fr)}
  .cc-points{grid-template-columns:minmax(0,1fr);gap:18px}
  .about-t{grid-template-columns:minmax(0,1fr)}
  .about-t .photo{max-width:360px}
}
@media (max-width:620px){
  body{font-size:16px}
  .hdr-cta{display:none}
  .menu-btn{margin-left:auto}
  .brand-name{font-size:1.1rem}
  .announce{font-size:.8rem}
  .outcomes{grid-template-columns:minmax(0,1fr)}
  .outcomes li{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--line)}
  .outcomes li:last-child{border-bottom:0}
  .who-row{grid-template-columns:minmax(0,1fr)}
  .who-row li{border-right:0}
  .who-row li a,.who-row li:first-child a{padding-left:0}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{white-space:normal;text-align:center;padding-block:10px}
  .hc-ctrl{flex-direction:column;align-items:flex-start}
}

.nav .nav-cta .btn{color:var(--night);padding:0 16px;font-size:1rem;border-radius:6px;display:inline-flex;border-bottom:0}



/* ===== css/gtm.css (October 2026: Map, Live, Build and the plans) ===== */
/* small fixes for existing pieces placed on dark bands */
.hero-by .link{display:inline-block;padding:3px 0}
.on-dark .svc-tag{color:var(--gold-soft)}
.on-dark .cc-points h3{color:var(--on-dark);border-top-color:var(--gold)}
.on-dark .cc-points p{color:var(--on-dark-2)}

/* ---------- Map, Live, Build (home and services) ---------- */
.mlb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.mlb-core{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(26px,3.6vw,52px);border-radius:var(--r-lg);background:var(--night);background-image:radial-gradient(rgba(200,220,200,.13) 1px,transparent 1.4px);background-size:22px 22px;color:var(--on-dark)}
.mlb-core h3{font-size:clamp(2.2rem,2.4vw + 1rem,3rem);color:var(--on-dark)}
.mlb-core p{color:var(--on-dark-2)}
.mlb-core .svc-tag{color:var(--gold-soft);margin:6px 0 14px}
.mlb-core .ticks{margin:18px 0 24px}
.mlb-core .ticks li{color:var(--on-dark-2)}
.mlb-art{display:grid;place-items:center;min-width:0}
.mlb-art .art-map{width:min(100%,460px)}
.mlb .svc h3{font-size:clamp(1.8rem,1.4vw + 1rem,2.3rem)}
.svc-live .svc-art{background:var(--soft)}
.mlb-note{margin:26px 0 0;color:var(--muted)}

/* tiles drawing for the Live card */
.art-tiles{width:min(100%,330px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative}
.art-tiles i{position:relative;display:block;height:46px;border-radius:7px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 20px -18px rgba(27,67,50,.55)}
.art-tiles i::before{content:"";position:absolute;left:9px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--pale)}
.art-tiles i::after{content:"";position:absolute;left:9px;right:14px;bottom:10px;height:5px;border-radius:3px;background:var(--soft)}
.art-tiles i.g{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,153,104,.2)}
.art-tiles i.g::before{background:var(--gold)}
.art-tiles i.p::before{background:var(--pine)}
.art-tiles i.t::before{background:#C9805F}
.art-tiles b{position:absolute;right:-6px;top:-14px;padding:5px 11px;border-radius:999px;background:var(--forest);color:var(--cream);font-size:.74rem;font-weight:500;white-space:nowrap;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}

/* ---------- plans teaser ---------- */
.ptz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--forest);border-bottom:1px solid var(--line)}
.ptz li{padding:24px clamp(14px,2vw,28px) 26px 0;margin-right:clamp(14px,2vw,28px);border-right:1px solid var(--line)}
.ptz li:last-child{border-right:0;margin-right:0;padding-right:0}
.ptz span{display:block;font-size:.88rem;font-weight:500;color:var(--gold-ink)}
.ptz b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,1.2vw + 1rem,2.2rem);line-height:1.1;letter-spacing:-.02em;color:var(--forest);margin:6px 0 10px}
.ptz b small{font-family:var(--sans);font-size:1rem;letter-spacing:0;font-weight:400;color:var(--muted)}
.ptz p{margin:0;color:var(--muted);line-height:1.5}
.ptz-btns{margin-top:clamp(24px,3vw,36px);align-items:center}
.ptz-btns p{margin:0 0 0 8px;color:var(--muted)}

/* plan names and prices in two short lists (services page) */
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3.4vw,56px)}
.plist h3{font-size:1.3rem;padding-bottom:10px;border-bottom:2px solid var(--forest)}
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.plist li span{color:var(--ink);font-weight:500}
.plist li b{font-family:var(--serif);font-weight:500;font-size:1.2rem;color:var(--forest);white-space:nowrap}
.plist li b small{font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--muted)}

/* ---------- the plans page ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.pc{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:0;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);min-width:0}
.pc > *{padding:18px clamp(20px,2.2vw,28px)}
.pc-h{padding-top:24px}
.pc-kind{margin:0 0 4px;font-size:.85rem;font-weight:500;color:var(--gold-ink)}
.pc-name{font-size:1.55rem;line-height:1.15}
.pc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:14px 0 0}
.pc-price b{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,1.6vw + 1.3rem,2.8rem);line-height:1;letter-spacing:-.02em;color:var(--forest)}
.pc-price span{color:var(--muted)}
.pc-for{margin:14px 0 0;color:var(--ink);line-height:1.5}
.pc-sec{border-top:1px solid var(--line)}
.pc-sec :is(h3,h4){font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--gold-ink);margin:0 0 8px}
.pc-sec p{margin:0;line-height:1.5}
.pc .ticks{margin:0;gap:7px;font-size:.97rem}
.pc .ticks li::before{top:.5em;width:7px;height:7px}
.pc-cta{border-top:1px solid var(--line);display:flex;align-items:flex-end}
.pc-cta .btn{width:100%}
.pc-term{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:.82rem;font-weight:500;color:var(--gold-ink)}
.bg-soft .pc-term{background:var(--cream)}
.plans-note{margin:clamp(22px,2.6vw,32px) 0 0;color:var(--muted)}
.plans-note b{color:var(--ink);font-weight:600}

/* the Free plan: the first card on the plans page, laid out wide */
.pc.pc-free{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3.4fr);border-top-color:var(--forest)}
.pc-free > *{padding:24px clamp(20px,2.4vw,32px) 26px}
.pc-free > * + *{border-left:1px solid var(--line)}
.pc-free .pc-sec{border-top:0}
.pc-free .pc-cta{border-top:0;flex-direction:column;align-items:stretch;justify-content:space-between;gap:16px}
.pc-free .pc-cta p{margin:0;line-height:1.5}
.pc-free .pc-cta p b{display:block;font-weight:600;color:var(--forest);margin-bottom:4px}

/* terms blocks: builds and the mapping program */
.terms{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.terms-big{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,3vw + 1rem,4rem);line-height:1;letter-spacing:-.025em;color:var(--gold-soft);margin:18px 0 8px}
.terms-big small{display:block;font-family:var(--sans);font-size:1rem;letter-spacing:0;font-weight:400;color:var(--on-dark-2);margin-top:12px;line-height:1.5}
.terms .ticks{margin:22px 0 0}
.prog{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3.4vw,48px);background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r)}
.prog .lead{margin:18px 0 0}
.prog-price{padding-left:clamp(0px,2.4vw,32px);border-left:1px solid var(--line)}
.prog-price b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,2vw + 1.2rem,3.2rem);line-height:1;letter-spacing:-.02em;color:var(--forest)}
.prog-price > span{display:block;margin:8px 0 18px;color:var(--muted)}
.prog-price ul{display:grid;gap:10px;margin:0 0 22px}
.prog-price li{padding-left:16px;border-left:2px solid var(--gold);line-height:1.45}

/* chips: base tiles, the seven looks */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:7px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.93rem;font-weight:500;line-height:1.3;color:var(--forest)}
.bg-soft .chips li{background:var(--paper)}
.on-dark .chips li{background:rgba(244,241,232,.07);border-color:var(--line-dark);color:var(--on-dark)}
.chips-note{margin:16px 0 0;color:var(--muted)}

/* ---------- the joeybmaps page ---------- */
.rad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.rad .lead{margin:22px 0 14px}
.rad h3{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--gold-ink);margin:24px 0 10px}
.rad-art{margin:0;border-radius:var(--r-lg);background:var(--night);background-image:radial-gradient(rgba(200,220,200,.13) 1px,transparent 1.4px);background-size:22px 22px;padding:clamp(14px,2vw,26px);box-shadow:0 40px 70px -50px rgba(15,42,32,.8)}
.rad-art svg{width:100%;height:auto}
.rad-art text{font-family:var(--sans)}
.rad-art .you{font-family:var(--serif);font-style:italic}
.rad-art .rad-tall{display:none}
.rad-art figcaption{margin:12px 4px 0;font-size:.86rem;color:var(--on-dark-3)}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.duo .svc-art{background:var(--soft)}
.duo h3{font-size:clamp(1.6rem,1.2vw + 1rem,2rem)}
.also{margin-top:clamp(28px,3vw,40px);padding-top:22px;border-top:1px solid var(--line)}
.also p{margin:0 0 12px;font-weight:500;color:var(--forest)}

/* the morning page drawing */
.art-today{width:min(100%,330px);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px 14px;box-shadow:0 24px 40px -30px rgba(27,67,50,.5);display:grid;gap:7px}
.art-today > b{font-family:var(--serif);font-weight:500;font-size:.98rem;line-height:1.2;color:var(--forest)}
.at-row{display:flex;align-items:center;gap:9px}
.at-row i{flex:none;width:12px;height:12px;border-radius:3px;border:1.5px solid var(--sage)}
.at-row i.on{background:var(--pine);border-color:var(--pine)}
.at-row s{display:block;height:6px;border-radius:3px;background:var(--soft);text-decoration:none}
.at-brief{border-left:3px solid var(--gold);background:var(--soft);padding:8px 10px;display:grid;gap:5px}
.at-brief s{display:block;height:5px;border-radius:3px;background:var(--gold-soft);text-decoration:none}
.at-reach{display:flex;align-items:center;gap:9px}
.at-reach em{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:var(--cream);font-style:normal;font-size:.66rem;font-weight:600}
.at-reach s{display:block;height:6px;border-radius:3px;background:var(--pale);text-decoration:none}

.flow{margin-top:clamp(36px,4vw,56px)}
.flow > p{margin:0 0 18px;font-weight:500;color:var(--on-dark)!important}

.shelves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:start}
.shelf h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:1.6rem;padding-bottom:12px;border-bottom:2px solid var(--forest)}
.shelf h3 small{font-family:var(--sans);font-size:.9rem;font-weight:400;letter-spacing:0;color:var(--muted);white-space:nowrap}
.shelf li{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:4px 18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.shelf b{font-weight:600;color:var(--forest);line-height:1.35}
.shelf b small{display:block;font-weight:400;font-size:.84rem;color:var(--muted)}
.shelf span{color:var(--muted);font-size:.96rem;line-height:1.5}
.shelf li.sys b{color:var(--gold-ink)}
.shelf-foot{margin:clamp(28px,3vw,40px) 0 0;padding:18px 22px;background:var(--paper);border-left:3px solid var(--gold)}
.shelf-foot p{margin:0 0 12px}
.shelf-foot p:last-child{margin:0}

.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.system{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--forest);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column}
.system h3{font-size:1.45rem}
.system .sample-kind{margin:0 0 8px}
.system p{margin:10px 0 0;color:var(--muted)}
.system .sample-kind{color:var(--gold-ink)}
.system .proof{margin-top:auto;padding-top:16px;color:var(--gold-ink);font-weight:500;font-size:.95rem;line-height:1.45}

@media (max-width:1100px){
  .ptz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptz li:nth-child(2){border-right:0;margin-right:0;padding-right:0}
  .ptz li:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:1000px){
  .pcards{grid-template-columns:minmax(0,1fr);max-width:680px}
  .pc,.pc.pc-free{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
  .pc.pc-free{max-width:680px}
  .pc-free > * + *{border-left:0;border-top:1px solid var(--line)}
  .pc-cta{display:block}
  .pc-free .pc-cta{display:flex}
  .terms,.prog,.rad{grid-template-columns:minmax(0,1fr)}
  .prog-price{padding-left:0;border-left:0;padding-top:22px;border-top:1px solid var(--line)}
  .shelves{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .mlb,.duo,.systems,.plist{grid-template-columns:minmax(0,1fr)}
  .mlb-core{grid-template-columns:minmax(0,1fr)}
  .mlb-art{order:-1}
}
@media (max-width:620px){
  .ptz{grid-template-columns:minmax(0,1fr)}
  .ptz li{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--line)}
  .ptz li:last-child{border-bottom:0}
}
@media (max-width:620px){
  .shelf li{grid-template-columns:minmax(0,1fr);gap:4px}
  .shelf b small{display:inline;margin-left:6px}
  .ptz-btns p{margin:6px 0 0}
  .art-tiles b{right:0}
}

/* header: the Plans link, and two buttons in the phone menu */
@media (max-width:1100px){
  .nav .nav-cta{display:grid;gap:10px}
  .nav .nav-cta .btn-line-light{color:var(--on-dark);border:1px solid rgba(244,241,232,.36)}
}

/* ---------- plans: how you pay (annual plan by default) ---------- */
.bill-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0 0 clamp(24px,2.8vw,36px)}
.bill{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:4px;border-radius:12px;background:var(--paper);border:1px solid var(--line);width:min(100%,540px);flex:none}
.bill button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:6px 8px;border-radius:9px;color:var(--ink);text-align:center;transition:background-color .2s,color .2s}
.bill button b{font-weight:600;font-size:.95rem;line-height:1.2;white-space:nowrap}
.bill button span{font-size:.8rem;line-height:1.25;color:var(--muted);white-space:nowrap}
.bill button:hover{background:var(--soft)}
.bill button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.bill button[aria-pressed="true"] span{color:var(--gold-soft)}
.bill-msg{margin:0;flex:1 1 260px;color:var(--ink);line-height:1.5}
.bill-msg b{font-weight:600;color:var(--forest)}
.trial-note{margin:clamp(22px,2.6vw,32px) 0 0;padding:16px 20px;background:var(--paper);border-left:3px solid var(--gold);color:var(--ink)}
.bg-soft .trial-note{background:var(--paper)}
.trial-note b{font-weight:600;color:var(--forest)}

/* price variants: one is shown at a time, the annual plan unless a choice is made */
.pc-price{margin:14px 0 0}
.pv{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0}
.pv b{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,1.6vw + 1.3rem,2.8rem);line-height:1;letter-spacing:-.02em;color:var(--forest)}
.pv span{color:var(--muted)}
.pv small{flex-basis:100%;margin-top:6px;font-size:.86rem;font-weight:500;color:var(--gold-ink)}
.pv-term b{font-size:clamp(1.6rem,1vw + 1.1rem,1.9rem);letter-spacing:-.01em;line-height:1.15}
.pv-m2m,.pv-year{display:none}
[data-bill="m2m"] .pv-annual,[data-bill="year"] .pv-annual{display:none}
[data-bill="m2m"] .pv-m2m,[data-bill="year"] .pv-year{display:flex}
.bill-msg .pv-annual,.bill-msg .pv-m2m,.bill-msg .pv-year{display:none}
.bill-msg .pv-annual{display:inline}
[data-bill="m2m"] .bill-msg .pv-annual,[data-bill="year"] .bill-msg .pv-annual{display:none}
[data-bill="m2m"] .bill-msg .pv-m2m,[data-bill="year"] .bill-msg .pv-year{display:inline}
.packs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.packs li{padding:6px 12px;border-radius:999px;border:1px solid var(--line-dark);background:rgba(244,241,232,.06);font-size:.9rem;color:var(--on-dark)}
@media (max-width:620px){
  .bill{width:100%;gap:2px;padding:3px}
  .bill button{padding:6px 3px;min-height:52px}
  .bill button b{font-size:.8rem}
  .bill button span{font-size:.72rem}
}

.note-dark p{margin:0}
.plist + .plans-note{margin-top:22px}

/* ---------- QA fixes ---------- */
/* header: with Plans added the full row no longer fits the content width; Partners moves to the menu and footer */
@media (min-width:1101px){.nav .nav-more{display:none}}
@media (min-width:1241px){.nav a{padding:9px 10px}.nav a[aria-current="page"]::after{left:10px;right:10px}}
@media (min-width:1101px) and (max-width:1280px){.nav .nav-mid{display:none}}
/* links inside the dark page headers */
.ph .link{color:var(--gold-soft);text-decoration-color:rgba(230,213,180,.4)}
.ph .link:hover{color:#fff}
/* tap targets of at least 24px for links that stand on their own */
.crumbs a{padding-block:3px}
.mlb-core .link,.cta-more .link,.chips-note .link,.shelf-foot .link{display:inline-block;padding-block:3px}
.ftr-contact a{display:inline-block;padding-block:2px}
.split > div > .h-lg + .muted{margin-top:14px}
@media (max-width:1000px){
  .pc-free .pc-sec,.pc-free .pc-cta{border-top:1px solid var(--line)}
  .plist{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){.rad-art .rad-wide{display:none}.rad-art .rad-tall{display:block}.rad-art{padding:14px 12px}}

/* ===== joeybmaps.com: the brand leads, Log in and Start free sit in the bar, legal links in the footer ===== */
/* wordmark with the company as a small line under it */
.brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand-name{font-size:1.42rem;letter-spacing:-.015em}
.brand-by{margin-top:5px;font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:.01em;color:var(--gold-soft);white-space:nowrap}
/* Log in and Start free */
.hdr-acts{display:flex;align-items:center;gap:4px;flex:none}
.hdr-login{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:5px;color:var(--on-dark);text-decoration:none;font-size:.94rem;font-weight:500;white-space:nowrap;transition:color .2s,background-color .2s}
.hdr-login:hover{color:#fff;background:rgba(244,241,232,.07)}
@media (max-width:1240px){.hdr-login{padding:0 9px;font-size:.9rem}}
@media (max-width:1100px){.hdr-acts{margin-left:auto}.hdr-cta{margin-left:0}}
/* the shorter wordmark leaves room for Case studies on laptop screens again */
@media (min-width:1161px) and (max-width:1280px){.nav .nav-mid{display:block}}
@media (max-width:620px){
  .hdr-cta{display:inline-flex}
  .menu-btn{margin-left:0}
  .brand-name{font-size:1.3rem}
}
/* small phones: the mark steps aside so the wordmark, Log in, Start free and the menu fit on one line */
@media (max-width:440px){
  .hdr-in{gap:8px}
  .hdr .brand .mark{display:none}
  .brand-by{font-size:.66rem;margin-top:4px}
  .hdr-acts{gap:2px}
  .hdr-login{padding:0 8px;font-size:.88rem}
  .hdr-cta{min-height:38px;padding:0 12px;font-size:.86rem}
  .menu-btn{width:40px;height:40px}
}
@media (max-width:340px){.hdr-login{padding:0 5px}.hdr-cta{padding:0 10px}.brand-name{font-size:1.18rem}}
/* footer: the booking lines (what #book opens without JavaScript) and the legal links */
.ftr-book{display:block;margin-bottom:6px;font-size:.85rem;font-weight:500;color:var(--gold-soft)}
.ftr-legal{display:flex;flex-wrap:wrap;gap:4px 20px}
.ftr .ftr-legal a{display:inline-block;padding:2px 0;color:var(--on-dark-2);text-decoration:none}
.ftr .ftr-legal a:hover{color:#fff}