/* ═══════════════════════════════════════════════════════════════════
   LEARN TO SCALE — MAIN STYLESHEET
   Layout and styling only. Colors/fonts come from tokens.css.
   Each block below is fenced. Edit only inside the fence named in
   the request. Copy edits happen in HTML files, never here.
═══════════════════════════════════════════════════════════════════ */

/* ══════════ FENCE: BASE ══════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue-deep)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--font-head);font-weight:800;letter-spacing:-0.015em;line-height:1.14}
h2{font-size:clamp(1.55rem,3.3vw,2.2rem);margin:.5rem 0 .6rem}
.eyebrow{font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dimgrey)}
.section-note{color:var(--dimgrey);max-width:58ch}
.more{display:inline-block;margin-top:1.6rem;padding-block:.3rem;font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.95rem;padding:.78rem 1.35rem;text-decoration:none;cursor:pointer;border:2px solid var(--ink);background:var(--white);color:var(--ink);transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.pattern{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='%2356FA56' fill-opacity='0.13'%3E%3Ccircle cx='48.4' cy='90.1' r='4.4'/%3E%3Crect x='42.4' y='97.5' width='12' height='21' rx='4.2'/%3E%3Ccircle cx='70' cy='154' r='4.4'/%3E%3Crect x='64' y='161.4' width='12' height='15' rx='4.2'/%3E%3Ccircle cx='142.3' cy='53.2' r='4.4'/%3E%3Crect x='136.3' y='60.6' width='12' height='18' rx='4.2'/%3E%3Ccircle cx='94.1' cy='3' r='4.4'/%3E%3Crect x='88.1' y='10.4' width='12' height='19' rx='4.2'/%3E%3Ccircle cx='94.1' cy='195' r='4.4'/%3E%3Crect x='88.1' y='202.4' width='12' height='19' rx='4.2'/%3E%3Ccircle cx='173' cy='134.6' r='4.4'/%3E%3Crect x='167' y='142' width='12' height='16' rx='4.2'/%3E%3Ccircle cx='20.9' cy='6' r='4.4'/%3E%3Crect x='14.9' y='13.4' width='12' height='25' rx='4.2'/%3E%3Ccircle cx='20.9' cy='198' r='4.4'/%3E%3Crect x='14.9' y='205.4' width='12' height='25' rx='4.2'/%3E%3Ccircle cx='112.7' cy='101.9' r='4.4'/%3E%3Crect x='106.7' y='109.3' width='12' height='23' rx='4.2'/%3E%3Ccircle cx='24.4' cy='136.2' r='4.4'/%3E%3Crect x='18.4' y='143.6' width='12' height='17' rx='4.2'/%3E%3Ccircle cx='83.8' cy='41.2' r='4.4'/%3E%3Crect x='77.8' y='48.6' width='12' height='27' rx='4.2'/%3E%3Ccircle cx='151.8' cy='-23.6' r='4.4'/%3E%3Crect x='145.8' y='-16.2' width='12' height='26' rx='4.2'/%3E%3Ccircle cx='151.8' cy='168.4' r='4.4'/%3E%3Crect x='145.8' y='175.8' width='12' height='26' rx='4.2'/%3E%3Ccircle cx='-1.6' cy='50.6' r='4.4'/%3E%3Crect x='-7.6' y='58' width='12' height='22' rx='4.2'/%3E%3Ccircle cx='190.4' cy='50.6' r='4.4'/%3E%3Crect x='184.4' y='58' width='12' height='22' rx='4.2'/%3E%3C/g%3E%3C/svg%3E")}
/* ══════════ END FENCE: BASE ══════════ */

/* ══════════ FENCE: SHAPE TINTS (shared by the home shelf and the know-how shelves) ══════════ */
/* One class per shape in the grammar. Each sets --lane and --lane-deep, the
   same pair the lanes section uses, so a tile, a post, or a tool can carry
   its shape's color into a bar, a label, and a link without naming a hex. */
.tint-square  { --lane: var(--buttercup); --lane-deep: var(--buttercup-deep); }
.tint-triangle{ --lane: var(--lime);      --lane-deep: var(--lime-deep); }
.tint-circle  { --lane: var(--blue);      --lane-deep: var(--blue-deep); }
/* ══════════ END FENCE: SHAPE TINTS ══════════ */

/* ══════════ FENCE: NAV ══════════ */
nav{border-bottom:1px solid var(--line);background:var(--white)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px 10px;padding:10px 22px;max-width:1020px;margin:0 auto}
.logo img{height:40px;display:block}
.nav-links{display:flex;gap:2px;font-weight:500;font-size:.92rem;width:100%;order:3;margin-left:-.6rem}
.nav-links a{padding:.5rem .6rem}
@media(min-width:820px){.nav-links{width:auto;order:0;gap:22px;font-size:.94rem;margin-left:0}.nav-links a{padding:0}}
.nav-links a{color:var(--ink);text-decoration:none}
.nav-links a:hover{color:var(--blue-deep)}
.nav-links a[aria-current="page"]{color:var(--blue-deep);font-weight:600}
.nav-cta{font-family:var(--font-head);font-weight:600;font-size:.88rem;background:var(--ink);color:#fff;padding:.5rem 1rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav-cta:hover{background:var(--blue-deep)}
/* ══════════ END FENCE: NAV ══════════ */

/* ══════════ FENCE: HERO (home) ══════════ */
header.home-hero{padding-block:56px 68px;position:relative}
/* living pattern: js/hero-pattern.js swaps the static tile for a canvas
   of the same crowd, so people come into focus under the pointer. If the
   script never runs (no JS, touch, reduced motion) the .pattern tile from
   the BASE fence stays put and the hero looks exactly as it always did. */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
header.home-hero.pattern-live{background-image:none}
header.home-hero>.wrap{position:relative;z-index:1}
@media(min-width:760px){header.home-hero{padding-block:76px 84px}}
.hero-grid{display:grid;gap:34px;grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.15fr 1fr}}
h1{font-size:clamp(2.05rem,5.4vw,3.4rem);max-width:17ch;margin:.9rem 0 1.1rem}
.hero-sub{max-width:50ch;font-size:1.08rem;color:var(--dimgrey)}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.7rem}
header .btn{border-radius:0}
.hero-photo{position:relative}
.hero-photo img{width:100%;display:block;border:2px solid var(--ink)}
.hero-photo .stamp{position:absolute;left:-10px;bottom:-14px;background:var(--lime);border:2px solid var(--ink);font-family:var(--font-head);font-weight:600;font-size:.8rem;padding:.45rem .8rem;transform:rotate(-2deg)}
/* ══════════ END FENCE: HERO ══════════ */

/* ══════════ FENCE: PAGE HERO (interior pages) ══════════ */
.page-hero{padding-block:clamp(38px,6vw,52px) clamp(30px,5vw,40px)}
.page-hero h1{font-size:clamp(1.9rem,4.6vw,2.9rem);max-width:22ch}
.page-hero .lede{max-width:56ch;font-size:1.08rem;color:var(--dimgrey);margin-top:.9rem}
.page-hero .lede b{color:var(--ink);font-weight:600}
/* ══════════ END FENCE: PAGE HERO ══════════ */

/* ══════════ FENCE: SERVICES (services page; .wrong also used by home lanes) ══════════ */
/* The home-page ZERO fence and the .doors/.door home cards were replaced
   by the LANES section (end of this file) Sep 2026 and their rules removed.
   tarot.html has its own unrelated .door — standalone page, no main.css. */
.wrong{margin-top:1.8rem;font-size:.94rem;color:var(--dimgrey);max-width:62ch}
.wrong b{color:var(--ink);font-weight:600}
/* service detail blocks (services page) */
.svc{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.svc-grid{display:grid;gap:30px;grid-template-columns:1fr;margin-top:1.4rem}
@media(min-width:860px){.svc-grid{grid-template-columns:1.3fr 1fr}}
.svc h2 .shape{display:inline-block;width:.62em;height:.62em;margin-right:.35em;vertical-align:baseline}
/* lane icons double as the h2 bookmark, matching the homepage lanes section.
   The .shape chips above still serve knowhow's toolbox — leave them.
   residency.svg fills its viewBox edge to edge (no padding), same story as
   the homepage: it gets a smaller box so the three read the same weight. */
.svc h2 .svc-icon{width:1.3em;height:1.3em;margin-right:.4em;vertical-align:-.3em}
.svc h2 .svc-icon-circle{width:1.05em;height:1.05em;margin-right:.5em;vertical-align:-.18em}
.shape-square{background:var(--buttercup)}
.shape-triangle{width:0!important;height:0!important;border-left:.36em solid transparent;border-right:.36em solid transparent;border-bottom:.62em solid var(--lime);background:none!important}
.shape-circle{background:var(--blue);border-radius:50%}
.svc ul{list-style:none;margin-top:1rem}
.svc li{padding:.55rem 0 .55rem 1.6rem;position:relative;font-size:.97rem}
.svc li::before{content:"";position:absolute;left:0;top:1.05em;width:11px;height:11px;background:var(--lime);border-radius:2px}
.svc-aside{background:var(--mist);border-radius:12px;padding:1.5rem 1.5rem;align-self:start}
.svc-aside h3{font-size:.98rem;margin-bottom:.5rem}
.svc-aside p{font-size:.92rem;color:var(--dimgrey)}
.svc-aside .btn{margin-top:1.1rem}
.fit{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.fit-row{display:grid;gap:16px;grid-template-columns:1fr;margin-top:1.6rem}
@media(min-width:780px){.fit-row{grid-template-columns:1fr 1fr}}
.fit-card{border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.4rem;background:#fff}
.fit-card h3{font-size:1rem;margin-bottom:.5rem}
.fit-card p{font-size:.93rem;color:var(--dimgrey)}
/* ══════════ END FENCE: SERVICES ══════════ */

/* ══════════ FENCE: PROOF (home track-record band) ══════════ */
.proof{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.proof-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;grid-template-columns:1fr;margin-top:1.8rem}
@media(min-width:600px){.proof-grid{grid-template-columns:1fr 1fr}
  .proof-item:nth-child(3){grid-column:span 2}}
@media(min-width:980px){.proof-grid{grid-template-columns:repeat(3,1fr)}
  .proof-item:nth-child(3){grid-column:auto}}
.proof-item{background:var(--white);padding:1.5rem 1.4rem}
.proof-item b{display:block;font-family:var(--font-head);font-weight:700;font-size:2.05rem;
  line-height:1;letter-spacing:-.03em;color:var(--buttercup-deep);
  font-variant-numeric:tabular-nums;margin-bottom:.5rem}
.proof-item span{display:block;font-size:.94rem;color:var(--dimgrey);line-height:1.45}
/* the logo wall and the quote card now live inside this section */
.proof .client-wall{margin-top:2.4rem}
.proof .testi{margin-top:2.2rem}
.proof .more{margin-top:1.5rem}
/* ══════════ END FENCE: PROOF ══════════ */

/* ══════════ FENCE: THINKING ══════════ */
.thinking{padding-block:clamp(46px,7.4vw,70px);border-top:1px solid var(--line)}
.posts{display:grid;gap:18px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:780px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{border:1px solid var(--line);border-left:4px solid var(--lane,var(--line));border-radius:12px;padding:1.5rem 1.4rem;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .15s ease,border-color .15s ease;background:#fff}
.post:hover{transform:translateY(-4px);border-color:var(--lane,var(--blue))}
.post img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin-bottom:.85rem}
.post .kicker{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lane-deep,var(--buttercup-deep));margin-bottom:.55rem}
.post h3{font-size:1.04rem;margin-bottom:.5rem}
.post p{font-size:.92rem;color:var(--dimgrey);flex:1}
.post .read{margin-top:1rem;font-weight:600;font-size:.9rem;color:var(--blue-deep)}
/* ══════════ END FENCE: THINKING ══════════ */

/* ══════════ FENCE: FREEBIES ══════════ */
.freebies{padding-block:clamp(48px,7.6vw,76px) clamp(44px,7vw,64px);background:var(--white);border-radius:40px 40px 0 0;margin-top:-40px;position:relative;z-index:2}
.freebies.flat{margin-top:0;border-radius:0;border-top:1px solid var(--line)}
.meetup{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;margin-bottom:3rem}
@media(min-width:860px){.meetup{grid-template-columns:1fr 1.2fr}}
.meetup img{width:100%;display:block;border-radius:22px}
.gift-row{display:grid;gap:16px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:780px){.gift-row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.gift{border:1px solid var(--line);border-radius:22px;padding:1.5rem 1.5rem;background:#fff;transition:transform .15s ease,border-color .15s ease}
.gift:hover{transform:translateY(-4px);border-color:var(--lime-deep)}
.gift h3{font-size:1.02rem;margin-bottom:.4rem}
.gift p{font-size:.92rem;color:var(--dimgrey)}
.gift a{display:inline-block;margin-top:.9rem;padding-block:.3rem;font-weight:600;font-size:.92rem;text-decoration:none}
.gift a:hover{text-decoration:underline}
/* ══════════ END FENCE: FREEBIES ══════════ */

/* ══════════ FENCE: SHELF (home: the free stuff in one band) ══════════ */
/* Three tiles on the brand tile pattern. Each tile carries one shape and a
   .tint-* class; --lane drives its bar, label, button, and link, the way
   the lanes section works. The texture under the band is the .pattern tile
   from BASE used as a mask, so its color comes from a token instead of the
   hex baked into the SVG. The mask duplicates that tile's geometry: if the
   .pattern tile changes, regenerate this one from it. */
.shelf{position:relative;background:var(--white);padding-block:clamp(48px,7.6vw,76px) clamp(44px,7vw,64px);overflow:hidden}
.shelf::before{content:"";position:absolute;inset:0;background:var(--blue);opacity:.11;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='black'%3E%3Ccircle cx='48.4' cy='90.1' r='4.4'/%3E%3Crect x='42.4' y='97.5' width='12' height='21' rx='4.2'/%3E%3Ccircle cx='70' cy='154' r='4.4'/%3E%3Crect x='64' y='161.4' width='12' height='15' rx='4.2'/%3E%3Ccircle cx='142.3' cy='53.2' r='4.4'/%3E%3Crect x='136.3' y='60.6' width='12' height='18' rx='4.2'/%3E%3Ccircle cx='94.1' cy='3' r='4.4'/%3E%3Crect x='88.1' y='10.4' width='12' height='19' rx='4.2'/%3E%3Ccircle cx='94.1' cy='195' r='4.4'/%3E%3Crect x='88.1' y='202.4' width='12' height='19' rx='4.2'/%3E%3Ccircle cx='173' cy='134.6' r='4.4'/%3E%3Crect x='167' y='142' width='12' height='16' rx='4.2'/%3E%3Ccircle cx='20.9' cy='6' r='4.4'/%3E%3Crect x='14.9' y='13.4' width='12' height='25' rx='4.2'/%3E%3Ccircle cx='20.9' cy='198' r='4.4'/%3E%3Crect x='14.9' y='205.4' width='12' height='25' rx='4.2'/%3E%3Ccircle cx='112.7' cy='101.9' r='4.4'/%3E%3Crect x='106.7' y='109.3' width='12' height='23' rx='4.2'/%3E%3Ccircle cx='24.4' cy='136.2' r='4.4'/%3E%3Crect x='18.4' y='143.6' width='12' height='17' rx='4.2'/%3E%3Ccircle cx='83.8' cy='41.2' r='4.4'/%3E%3Crect x='77.8' y='48.6' width='12' height='27' rx='4.2'/%3E%3Ccircle cx='151.8' cy='-23.6' r='4.4'/%3E%3Crect x='145.8' y='-16.2' width='12' height='26' rx='4.2'/%3E%3Ccircle cx='151.8' cy='168.4' r='4.4'/%3E%3Crect x='145.8' y='175.8' width='12' height='26' rx='4.2'/%3E%3Ccircle cx='-1.6' cy='50.6' r='4.4'/%3E%3Crect x='-7.6' y='58' width='12' height='22' rx='4.2'/%3E%3Ccircle cx='190.4' cy='50.6' r='4.4'/%3E%3Crect x='184.4' y='58' width='12' height='22' rx='4.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/192px 192px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='black'%3E%3Ccircle cx='48.4' cy='90.1' r='4.4'/%3E%3Crect x='42.4' y='97.5' width='12' height='21' rx='4.2'/%3E%3Ccircle cx='70' cy='154' r='4.4'/%3E%3Crect x='64' y='161.4' width='12' height='15' rx='4.2'/%3E%3Ccircle cx='142.3' cy='53.2' r='4.4'/%3E%3Crect x='136.3' y='60.6' width='12' height='18' rx='4.2'/%3E%3Ccircle cx='94.1' cy='3' r='4.4'/%3E%3Crect x='88.1' y='10.4' width='12' height='19' rx='4.2'/%3E%3Ccircle cx='94.1' cy='195' r='4.4'/%3E%3Crect x='88.1' y='202.4' width='12' height='19' rx='4.2'/%3E%3Ccircle cx='173' cy='134.6' r='4.4'/%3E%3Crect x='167' y='142' width='12' height='16' rx='4.2'/%3E%3Ccircle cx='20.9' cy='6' r='4.4'/%3E%3Crect x='14.9' y='13.4' width='12' height='25' rx='4.2'/%3E%3Ccircle cx='20.9' cy='198' r='4.4'/%3E%3Crect x='14.9' y='205.4' width='12' height='25' rx='4.2'/%3E%3Ccircle cx='112.7' cy='101.9' r='4.4'/%3E%3Crect x='106.7' y='109.3' width='12' height='23' rx='4.2'/%3E%3Ccircle cx='24.4' cy='136.2' r='4.4'/%3E%3Crect x='18.4' y='143.6' width='12' height='17' rx='4.2'/%3E%3Ccircle cx='83.8' cy='41.2' r='4.4'/%3E%3Crect x='77.8' y='48.6' width='12' height='27' rx='4.2'/%3E%3Ccircle cx='151.8' cy='-23.6' r='4.4'/%3E%3Crect x='145.8' y='-16.2' width='12' height='26' rx='4.2'/%3E%3Ccircle cx='151.8' cy='168.4' r='4.4'/%3E%3Crect x='145.8' y='175.8' width='12' height='26' rx='4.2'/%3E%3Ccircle cx='-1.6' cy='50.6' r='4.4'/%3E%3Crect x='-7.6' y='58' width='12' height='22' rx='4.2'/%3E%3Ccircle cx='190.4' cy='50.6' r='4.4'/%3E%3Crect x='184.4' y='58' width='12' height='22' rx='4.2'/%3E%3C/g%3E%3C/svg%3E") 0 0/192px 192px repeat}
.shelf>.wrap{position:relative}
.shelf-grid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:780px){.shelf-grid{grid-template-columns:repeat(3,1fr)}}
.shelf-tile{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--lane);border-radius:12px;padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(51,52,58,.06)}
.shelf-tile>img{width:100%;display:block;border-radius:8px;margin-bottom:1.1rem}
.shelf-kind{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lane-deep);margin-bottom:.6rem}
.shelf-kind .shape{display:inline-block;width:.62em;height:.62em;font-size:1rem;flex:none}
.shelf-tile h3{font-size:1.25rem;margin-bottom:.5rem}
.shelf-tile p{font-size:.95rem;color:var(--dimgrey);flex:1;margin:0}
.shelf-tile .kit-embed{margin-top:1.1rem;max-width:none}
.shelf-tile .btn{align-self:flex-start;margin-top:1.2rem;border-radius:999px;border-color:var(--lane-deep);color:var(--lane-deep)}
.shelf-tile .btn:hover{background:var(--lane-deep);border-color:var(--lane-deep);color:var(--white);transform:translateY(-2px)}
.shelf-more{margin-top:.9rem;font-weight:600;font-size:.92rem;color:var(--lane-deep);text-decoration:none;border-bottom:2px solid transparent;align-self:flex-start}
.shelf-more:hover,.shelf-more:focus-visible{border-bottom-color:var(--lane)}
/* ══════════ END FENCE: SHELF ══════════ */

/* ══════════ FENCE: ABOUT ══════════ */
.story{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.story .prose{max-width:64ch}
.story .prose p{margin-bottom:1.1rem}
.believe{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line);background:var(--mist)}
/* the values, stacked like a manifesto: one line in display type, one
   sentence beside it. No cards, no triad. */
.belief-stack{margin-top:2rem;border-top:1px solid var(--line)}
.belief{padding:1.5rem 0;border-bottom:1px solid var(--line);display:grid;gap:.45rem}
@media(min-width:780px){.belief{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.4rem;align-items:baseline}}
.belief h3{font-size:clamp(1.35rem,2.6vw,1.8rem);margin:0;letter-spacing:-0.015em}
.belief p{font-size:1rem;color:var(--dimgrey);margin:0;max-width:44ch}
/* ══════════ END FENCE: ABOUT ══════════ */

/* ══════════ FENCE: CONTACT ══════════ */
.contact-ways{padding-block:clamp(30px,5vw,40px) clamp(44px,7vw,64px)}
.intro-form{display:grid;gap:28px;grid-template-columns:1fr;margin-top:1.8rem;align-items:start}
@media(min-width:860px){.intro-form{grid-template-columns:1.2fr 1fr}}
.qform{border:1px solid var(--line);border-radius:12px;padding:1.7rem 1.6rem;background:#fff}
.qform label{display:block;font-family:var(--font-head);font-weight:600;font-size:.88rem;margin:1.1rem 0 .35rem}
.qform label:first-of-type{margin-top:0}
.qform input,.qform textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--dimgrey);border-radius:6px;font-family:var(--font-body);font-size:.96rem;background:#fff}
.qform textarea{min-height:120px;resize:vertical}
.qform .btn{margin-top:1.3rem}
.q-interests{border:none;padding:0;margin:1.2rem 0 0}
.q-interests legend{font-family:var(--font-head);font-weight:600;font-size:.88rem;padding:0;margin-bottom:.4rem}
.q-interests .opt{color:var(--dimgrey);font-weight:400}
.q-interests .chk{display:flex;align-items:center;gap:.55rem;font-size:.95rem;margin:.35rem 0;font-weight:400}
.q-interests .chk input{width:auto;accent-color:var(--lime-deep)}
.qform-aside h2{font-size:1.02rem;margin:0 0 .5rem}
.qform-aside p{font-size:.95rem;color:var(--dimgrey);margin-bottom:1rem}
.ways-row{display:grid;gap:18px;grid-template-columns:1fr;margin-top:1.8rem}
@media(min-width:780px){.ways-row{grid-template-columns:repeat(2,1fr)}}
.way{border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.5rem;background:#fff;display:flex;flex-direction:column}
.way .dot{width:14px;height:14px;border-radius:50%;margin-bottom:.9rem}
.way h3{font-size:1.05rem;margin-bottom:.45rem}
.way p{font-size:.93rem;color:var(--dimgrey);flex:1}
.way .btn{margin-top:1.2rem;align-self:flex-start}
/* ══════════ END FENCE: CONTACT ══════════ */

/* ══════════ FENCE: TESTIMONIALS (Dan's original quote-card images) ══════════ */
/* Cards are Dan-supplied square images in assets/img/testimonials/.
   Full quote + attribution goes in each img's alt text — search engines
   and screen readers can't read pixels. */
.testi{max-width:460px;margin-left:auto;margin-right:auto}
.testi img{width:100%;display:block;border-radius:14px;box-shadow:0 10px 30px rgba(51,52,58,.14)}
.testi-pair{display:grid;gap:22px;grid-template-columns:1fr;margin-top:1.8rem}
@media(min-width:820px){.testi-pair{grid-template-columns:1fr 1fr}}
.svc .testi{margin-top:1.8rem;margin-left:0}
/* ══════════ END FENCE: TESTIMONIALS ══════════ */

/* ══════════ FENCE: CLIENT WALL ══════════ */
/* Text tiles now; when logo image files arrive, each .client swaps to
   <img src="assets/img/clients/<name>.png" alt="<Name>"> — same tile box. */
.clients{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.client-wall{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);margin-top:1.8rem}
@media(min-width:640px){.client-wall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.client-wall{grid-template-columns:repeat(4,1fr)}}
.client{border:1px solid var(--line);border-radius:8px;min-height:64px;display:flex;align-items:center;justify-content:center;padding:.8rem 1rem;background:#fff;font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--dimgrey);text-align:center;letter-spacing:.02em}
.client img{max-height:34px;max-width:80%;filter:grayscale(1);opacity:.75;transition:filter .15s ease,opacity .15s ease}
.client:hover img{filter:none;opacity:1}
/* ══════════ END FENCE: CLIENT WALL ══════════ */

/* ══════════ FENCE: BLOG PROSE (post pages) ══════════ */
.post-body{max-width:68ch;margin:0 auto;padding:40px 22px 70px}
.post-body p{margin-bottom:1.15rem}
.post-body h2{margin-top:2.2rem}
.post-body h3{margin-top:1.8rem;margin-bottom:.5rem}
.post-body img{max-width:100%;border-radius:12px;margin:1.4rem 0}
.post-body blockquote{border-left:4px solid var(--lime);padding-left:1.05rem;color:var(--dimgrey);margin:1.4rem 0}
.post-meta{color:var(--dimgrey);font-size:.9rem;margin-top:.6rem}
.post-meta .kick{color:var(--buttercup-deep);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;margin-right:.7rem}
/* ══════════ END FENCE: BLOG PROSE ══════════ */

/* ══════════ FENCE: KNOW-HOW TOOLBOX (knowhow.html) ══════════ */
/* Shelves, not cards. Every tool carries a .tint-* class: --lane colors the
   bar across the top, the kind label, and the link. The interactive one
   (.tool-featured) takes two columns of three, so five tools fill two rows
   with no orphan. */
.toolbox-zone{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.toolbox{display:grid;gap:16px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:780px){.toolbox{grid-template-columns:repeat(3,1fr)} .tool-featured{grid-column:span 2}}
.tool{border:1px solid var(--line);border-top:4px solid var(--lane);border-radius:12px;padding:1.4rem 1.4rem 1.5rem;background:#fff;display:flex;flex-direction:column;transition:transform .15s ease,border-color .15s ease}
.tool:hover{transform:translateY(-4px);border-color:var(--lane)}
.tool-kind{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lane-deep);margin-bottom:.7rem}
.tool-kind .shape{display:inline-block;width:.62em;height:.62em;font-size:1rem;flex:none}
.tool h3{font-size:1.02rem;margin-bottom:.4rem}
.tool-featured h3{font-size:1.3rem}
.tool p{font-size:.92rem;color:var(--dimgrey)}
.tool-featured p{font-size:.97rem;max-width:58ch}
.tool h3+p{flex:1}
.tool a{display:inline-block;align-self:flex-start;margin-top:.9rem;font-weight:600;font-size:.92rem;text-decoration:none;color:var(--lane-deep);border-bottom:2px solid transparent}
.tool a:hover,.tool a:focus-visible{border-bottom-color:var(--lane)}
/* ══════════ END FENCE: KNOW-HOW TOOLBOX ══════════ */

/* ══════════ FENCE: ADVISORY BOARD (ai-advisory-board.html) ══════════ */
.boardroom{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.advisors{display:grid;gap:16px;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:640px){.advisors{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.advisors{grid-template-columns:repeat(5,1fr)}}
.advisor{border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.2rem;background:#fff}
.advisor .dot{display:block;width:14px;height:14px;border-radius:50%;margin-bottom:.8rem}
.advisor h3{font-size:.98rem;margin-bottom:.4rem}
.advisor p{font-size:.88rem;color:var(--dimgrey)}
.promptzone{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.promptbox{margin-top:1.8rem;border:1px solid var(--line);border-radius:16px;background:var(--mist);overflow:hidden}
.promptbox-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--line);background:#fff;font-family:var(--font-head);font-weight:600;font-size:.92rem;flex-wrap:wrap}
.promptbox pre{margin:0;padding:1.3rem 1.4rem;max-height:430px;overflow:auto;white-space:pre-wrap;font-size:.84rem;line-height:1.55;color:var(--ink)}
.scenarios{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.scenario{border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:.8rem;padding:0}
.scenario summary{cursor:pointer;padding:.9rem 1.2rem;font-family:var(--font-head);font-weight:600;font-size:.95rem;list-style-position:inside}
.scenario summary:hover{color:var(--blue-deep)}
.scenario p{padding:0 1.2rem 1.1rem;font-size:.93rem;color:var(--dimgrey)}
/* ══════════ END FENCE: ADVISORY BOARD ══════════ */

/* ══════════ FENCE: READINESS CALLOUT (home lead-in to readiness.html) ══════════ */
.rq{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(52px,7.5vw,72px)}
.rq-wrap{max-width:720px;margin:0 auto;padding:0 22px}
.rq-kicker{display:flex;align-items:center;gap:11px;margin-bottom:1.2rem}
.rq-sq{width:13px;height:13px;background:var(--buttercup);border-radius:2px;flex:none}
.rq h2{max-width:20ch}
.rq-ask{margin:1.6rem 0 0;font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.45;
  max-width:34ch;border-left:3px solid var(--blue);padding-left:1.1rem}
.rq-ask b{font-weight:600}
.rq-opts{margin:1.7rem 0 0;display:grid;gap:11px;max-width:600px}
.rq-opt{display:block;text-decoration:none;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-radius:12px;padding:.95rem 1.15rem;
  font-size:.97rem;line-height:1.45;transition:border-color .18s ease,transform .12s ease}
.rq-opt:hover{border-color:var(--blue);transform:translateY(-2px)}
.rq-note{margin:1.5rem 0 0;font-size:.94rem;color:var(--dimgrey);max-width:52ch}
@media(max-width:600px){.rq-ask{max-width:none}}
/* ══════════ END FENCE: READINESS CALLOUT ══════════ */

/* ══════════ FENCE: READINESS TOOL (readiness.html) ══════════ */
.rd{max-width:720px;margin:0 auto;padding:0 22px}
.rd-rail{display:flex;align-items:center;gap:14px;margin:2.4rem 0 1.6rem}
.rd-pip{width:16px;height:16px;background:var(--line);
  transition:background .45s ease,transform .55s ease}
.rd-sq{border-radius:2px}
.rd-tri{border-radius:2px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.rd-cir{border-radius:50%}
.rd-on{background:var(--blue);transform:scale(1.35)}
.rd-done{background:var(--blue-deep)}
.rd-railtxt{font-size:.82rem;color:var(--dimgrey);font-family:var(--font-head);font-weight:600}
.rd-step{padding:.4rem 0 3.4rem}
.rd-step[hidden],.rd-res[hidden]{display:none}
.rd-qnum{font-family:var(--font-head);font-weight:800;font-size:.78rem;color:var(--buttercup-deep);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.7rem}
.rd-step h2{max-width:24ch}
.rd-opts{margin-top:1.6rem;display:grid;gap:12px}
.rd-opt{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:1rem 1.2rem;
  transition:border-color .18s ease,transform .12s ease}
.rd-opt:hover{border-color:var(--blue);transform:translateY(-2px)}
.rd-opt.sel{border-color:var(--blue-deep);background:var(--mist)}
.rd-back{margin-top:1.5rem;background:none;border:0;font:inherit;font-size:.9rem;
  color:var(--dimgrey);cursor:pointer;text-decoration:underline}
.rd-res{padding:.4rem 0 2.2rem}
.rd-lede{font-size:1.06rem;color:var(--dimgrey);margin:1rem 0 2.2rem;max-width:58ch}
.rd-block{border-left:3px solid var(--line);padding:2px 0 2px 1.2rem;margin:0 0 1.9rem}
.rd-cool{border-left-color:var(--blue)}
.rd-warm{border-left-color:var(--buttercup)}
.rd-grow{border-left-color:var(--lime-deep)}
.rd-block h3{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimgrey);margin-bottom:.6rem}
.rd-block p{margin:0 0 .7rem}
.rd-block p:last-child{margin-bottom:0}
.rd-aside{background:var(--mist);border-radius:12px;padding:1.1rem 1.2rem;margin-top:.9rem;font-size:.95rem}
.rd-aside a{font-weight:600}
.rd-cta{margin-top:.5rem;border:1.5px solid var(--lime-deep);border-radius:14px;
  padding:1.9rem 1.7rem;background:var(--lime-soft)}
.rd-cta h3{font-family:var(--font-head);font-weight:800;font-size:1.3rem}
.rd-cta p{margin:.8rem 0 1.4rem;max-width:52ch}
.rd-tools{margin-top:1.4rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.rd-tools button{background:none;border:0;font:inherit;font-size:.9rem;color:var(--dimgrey);
  text-decoration:underline;cursor:pointer}
@media print{
  .draft-ribbon,nav,.rd-rail,.rd-tools,.rd-back,#guideBtn,#guidePanel,.invitefoot{display:none!important}
  .rd-cta{background:var(--white);border:1px solid var(--line)}
}
/* ══════════ END FENCE: READINESS TOOL ══════════ */

/* ══════════ FENCE: INVITE (footer) ══════════ */
.invitefoot{padding-block:clamp(46px,7.2vw,66px) clamp(42px,6.8vw,60px);background:var(--mist)}
.invitefoot .btn{border-radius:999px}
.invite{display:grid;gap:32px;grid-template-columns:1fr;align-items:center;margin-top:1.6rem}
@media(min-width:860px){.invite{grid-template-columns:1fr 1.15fr}}
.invite-photo img{width:100%;display:block;border-radius:26px}
.foot-sub{color:var(--dimgrey);max-width:46ch;margin:.5rem 0 1.3rem}
/* the TL;DR box, spelled out. These footers lead with a headline about
   starting a conversation, so a bare email field under it reads as the
   contact form. The card says what it is and keeps the label tied to the
   field. Footers that already pitch the letter (contact, blog) don't
   need it — their headline does this job. */
.foot-subscribe{margin-top:1.5rem;max-width:34rem;padding:1.25rem 1.35rem;
  border:1px solid var(--line);border-radius:16px;background:var(--white)}
.foot-subscribe-label{font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--ink)}
.foot-subscribe-note{font-size:.88rem;color:var(--dimgrey);margin-top:.25rem;line-height:1.5}
.foot-subscribe .kit-embed{margin-top:.9rem;max-width:none}
.orbit-links{display:grid;gap:.8rem;margin-top:1.5rem}
.orbit{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink);font-weight:500;font-size:.96rem;padding:.72rem 1rem;border:1px solid var(--line);border-radius:999px;transition:border-color .15s ease,transform .15s ease;background:#fff}
.orbit:hover{border-color:var(--blue);transform:translateX(4px)}
.orbit .dot{flex:0 0 12px;height:12px;border-radius:50%}
.orbit .hint{color:var(--dimgrey);font-size:.82rem;font-weight:400;margin-left:auto}
/* site map: the handful of links people come back for, above the base line */
.foot-map{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);display:grid;gap:1.4rem 2rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.foot-map div{display:grid;gap:.3rem;align-content:start}
.foot-map-head{font-family:var(--font-head);font-weight:600;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dimgrey);margin-bottom:.25rem}
.foot-map a{color:var(--ink);text-decoration:none;font-size:.92rem;padding-block:.3rem;width:fit-content}
.foot-map a:hover,.foot-map a:focus-visible{text-decoration:underline}
.foot-base{margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.84rem;color:var(--dimgrey)}
/* ══════════ END FENCE: INVITE ══════════ */

/* ══════════ FENCE: GUIDE WIDGET ══════════ */
#guideBtn{position:fixed;right:16px;bottom:16px;width:52px;height:52px;z-index:60;border:none;background:transparent;cursor:pointer;padding:0}
@media(min-width:760px){#guideBtn{width:62px;height:62px;right:26px;bottom:26px}}
#guideShape{width:100%;height:100%;background:var(--buttercup);transition:filter .15s ease}
#guideBtn:hover #guideShape{filter:brightness(1.08)}
/* one nudge, five seconds after load, desktop pointers only. guide.js adds
   .nudge once per session and removes it when the animation ends. */
@keyframes guide-nudge{0%,100%{transform:translateY(0)}20%{transform:translateY(-14px)}40%{transform:translateY(0)}60%{transform:translateY(-7px)}80%{transform:translateY(0)}}
@media(min-width:760px) and (hover:hover){#guideBtn.nudge{animation:guide-nudge .9s cubic-bezier(.2,.7,.3,1) 1}}
#guidePing{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--blue);border:2px solid #fff}
#guidePanel{position:fixed;right:16px;bottom:82px;z-index:60;width:min(330px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px rgba(51,52,58,.16);padding:1.2rem 1.2rem 1rem;display:none}
@media(min-width:760px){#guidePanel{right:26px;bottom:104px}}
#guidePanel.open{display:block}
#guidePanel .gp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
#guidePanel .gp-title{font-family:var(--font-head);font-weight:800;font-size:1rem}
#guidePanel .gp-close{border:none;background:none;cursor:pointer;font-size:1.1rem;color:var(--dimgrey);padding:.2rem .4rem}
#guidePanel .gp-where{font-size:.85rem;color:var(--dimgrey);margin-bottom:.9rem}
#guidePanel .gp-where b{color:var(--ink)}
.gp-actions{display:grid;gap:.5rem}
.gp-actions a{display:block;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;transition:border-color .12s ease}
.gp-actions a:hover{border-color:var(--blue);color:var(--blue-deep)}
.gp-soon{margin-top:.9rem;padding-top:.8rem;border-top:1px dashed var(--line);font-size:.82rem;color:var(--dimgrey)}
/* ══════════ END FENCE: GUIDE WIDGET ══════════ */

/* ══════════ FENCE: KIT EMBED ══════════ */
/* Wrapper around Kit's injected subscribe form. Kit ships its own styles
   for the form itself; all we do here is bound its width and give it the
   same rhythm as the block it replaced, so it doesn't sprawl in a footer. */
.kit-embed{margin-top:1.1rem;max-width:520px}
.kit-embed form{margin:0!important}
.invitefoot .kit-embed{max-width:480px}
/* ══════════ END FENCE: KIT EMBED ══════════ */

/* ══════════ FENCE: EXPRESS GRANT (express-grant.html only) ══════════ */
.grant-what,.grant-eligible,.grant-webinar,.grant-rules,.grant-faq{
  padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.grant-source{font-size:.85rem;margin-top:1.2rem;color:var(--dimgrey)}
/* the reset zeroes every margin, so two notes in a row need their own gap,
   and a note that follows the eligibility list needs room to breathe */
.grant-what .section-note+.section-note{margin-top:.9rem}
.grant-eligible .grant-checks+.section-note{margin-top:1.2rem}

/* the caps band — same hairline grid as the home track record, but this one
   carries FOUR figures, not three. The grid paints its rules by letting a
   1px gap show the background through, so a half-empty last row would show
   up as a grey slab. These columns divide evenly at every width: 1 up, 2x2,
   then a single four-across strip. Add a fifth figure and this needs redoing. */
@media(min-width:600px){
  .grant-numbers{grid-template-columns:1fr 1fr}
  .grant-numbers .proof-item:nth-child(3){grid-column:auto}
}
@media(min-width:980px){.grant-numbers{grid-template-columns:repeat(4,1fr)}}

/* eligibility checks — a list that reads as a gate, not as prose */
.grant-checks{list-style:none;margin-top:1.3rem;display:grid;gap:.9rem}
.grant-checks li{position:relative;padding-left:2rem;font-size:.95rem;color:var(--dimgrey);line-height:1.55}
.grant-checks li b{color:var(--ink)}
.grant-checks li::before{content:"";position:absolute;left:0;top:.3em;width:1.05rem;height:1.05rem;
  border-radius:50%;background:var(--lime-soft);border:2px solid var(--lime-deep)}

/* the webinar recording */
.video-frame{margin-top:1.6rem;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink);aspect-ratio:16/9}
.video-frame iframe{display:block;width:100%;height:100%;border:0}
.grant-webinar .video-frame+.section-note{margin-top:1.4rem}
.grant-webinar .testi{margin-top:1.4rem}

/* the four rules */
.grant-rulelist{list-style:none;counter-reset:rule;margin-top:1.6rem;display:grid;gap:14px}
@media(min-width:820px){.grant-rulelist{grid-template-columns:1fr 1fr}}
.grant-rulelist li{counter-increment:rule;position:relative;border:1px solid var(--line);
  border-radius:12px;padding:1.3rem 1.3rem 1.3rem 3.4rem;background:var(--white)}
.grant-rulelist li::before{content:counter(rule);position:absolute;left:1.3rem;top:1.25rem;
  font-family:var(--font-head);font-weight:800;font-size:1.1rem;color:var(--buttercup-deep);
  font-variant-numeric:tabular-nums}
.grant-rulelist h3{font-size:1rem;margin-bottom:.4rem}
.grant-rulelist p{font-size:.92rem;color:var(--dimgrey);line-height:1.55}

/* FAQ — native details/summary, no JS */
.faq-list{margin-top:1.5rem;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;
  font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-size:1.3rem;font-weight:400;color:var(--dimgrey);line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list summary:hover{color:var(--blue-deep)}
.faq-list details p{padding:0 2.2rem 1.15rem 0;font-size:.94rem;color:var(--dimgrey);line-height:1.6}

/* closing call to action */
.grant-cta{padding-block:clamp(40px,6.5vw,56px)}
.grant-cta-card{background:var(--mist);border-radius:14px;padding:clamp(1.6rem,4vw,2.6rem)}
.grant-cta-card h2{margin-bottom:.6rem}
.grant-cta-card p{font-size:.98rem;color:var(--dimgrey);max-width:60ch;line-height:1.6}
.grant-cta-card .btn{margin-top:1.3rem}
.grant-kicker{margin-top:1.4rem;font-family:var(--font-head);font-weight:600;
  font-size:1.02rem;color:var(--ink)!important}
/* ══════════ END FENCE: EXPRESS GRANT ══════════ */

/* ══════════ FENCE: HUBSPOT FORM ══════════ */
/* Styling for the embedded HubSpot doorbell on contact.html. HubSpot
   injects its own markup and its own stylesheet, so these rules target
   HubSpot's stable class names and lean on specificity to win. The goal
   is simple: the embed should be indistinguishable from the hand-built
   .qform above it in the CONTACT fence — same border, same inputs, same
   button, same rhythm.
   WRITTEN BLIND (Aug 20) against HubSpot's documented DOM, because the
   form does not exist yet. Expect one tidy-up pass the first time it
   renders live; that is normal, not a rewrite. */
#hs-doorbell .hs-form{border:1px solid var(--line);border-radius:12px;
  padding:1.7rem 1.6rem;background:var(--white)}
#hs-doorbell .hs-form-field{margin-bottom:1.1rem}
#hs-doorbell .hs-form-field:first-child{margin-top:0}
#hs-doorbell .hs-form-field>label{display:block;font-family:var(--font-head);
  font-weight:600;font-size:.88rem;margin:0 0 .35rem;color:var(--ink)}
#hs-doorbell .hs-field-desc{font-size:.85rem;color:var(--dimgrey);margin-bottom:.35rem}

/* inputs — mirrors .qform input/textarea exactly */
#hs-doorbell .hs-input:not([type=checkbox]):not([type=radio]){width:100%;
  padding:.75rem 1rem;border:1.5px solid var(--dimgrey);border-radius:6px;
  font-family:var(--font-body);font-size:.96rem;background:var(--white);color:var(--ink)}
#hs-doorbell textarea.hs-input{min-height:120px;resize:vertical}
#hs-doorbell .hs-input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}

/* checkbox group — mirrors .q-interests */
#hs-doorbell .hs-form-booleancheckbox,
#hs-doorbell .inputs-list{list-style:none;margin:0;padding:0}
#hs-doorbell .inputs-list li{margin:.35rem 0}
#hs-doorbell .hs-form-checkbox-display,
#hs-doorbell .hs-form-booleancheckbox-display{display:flex;align-items:center;
  gap:.55rem;font-size:.95rem;font-weight:400;color:var(--ink)}
#hs-doorbell input[type=checkbox]{width:auto;accent-color:var(--lime-deep);margin:0}

/* submit — mirrors .btn.btn-primary */
#hs-doorbell .hs-button{margin-top:1.3rem;display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;padding:.7rem 1.3rem;border:none;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:.92rem;
  background:var(--ink);color:var(--white)}
#hs-doorbell .hs-button:hover{background:var(--blue-deep)}

/* validation + confirmation */
#hs-doorbell .hs-error-msg,#hs-doorbell .hs-main-font-element{font-size:.85rem;
  color:var(--buttercup-deep);margin-top:.3rem}
#hs-doorbell .hs-input.invalid{border-color:var(--buttercup-deep)}
#hs-doorbell .submitted-message{border:1px solid var(--line);border-radius:12px;
  padding:1.7rem 1.6rem;background:var(--lime-soft);font-size:.98rem;color:var(--ink)}

/* SEEN LIVE (Sep 3): the embed Dan pasted is HubSpot's newer renderer, which
   ignores the .hs-* rules above and names its parts .hsfc-*. Two moves:
   the card is drawn on #hs-doorbell itself (our element, always wins), and
   the parts inside get the same treatment under their new names. The old
   .hs-* rules stay in case HubSpot ever falls back to the legacy markup. */
#hs-doorbell{border:1px solid var(--line);border-radius:12px;padding:1.7rem 1.6rem;background:var(--white)}
#hs-doorbell .hsfc-Form{font-family:var(--font-body)}
#hs-doorbell .hsfc-FieldLabel,#hs-doorbell label{font-family:var(--font-head);font-weight:600;
  font-size:.88rem;color:var(--ink)}
#hs-doorbell .hsfc-FieldLabel span[aria-hidden],#hs-doorbell .hsfc-FieldLabel .hsfc-RequiredIndicator{color:var(--buttercup-deep)}
#hs-doorbell .hsfc-DescriptionText{font-size:.85rem;color:var(--dimgrey)}
#hs-doorbell .hsfc-TextInput,#hs-doorbell .hsfc-TextareaInput,#hs-doorbell .hsfc-EmailInput,
#hs-doorbell input[type=text],#hs-doorbell input[type=email],#hs-doorbell textarea{
  width:100%;padding:.75rem 1rem;border:1.5px solid var(--dimgrey)!important;border-radius:6px;
  font-family:var(--font-body);font-size:.96rem;background:var(--white)!important;color:var(--ink)}
#hs-doorbell textarea{min-height:120px;resize:vertical}
#hs-doorbell .hsfc-TextInput:focus,#hs-doorbell .hsfc-TextareaInput:focus,#hs-doorbell input:focus,#hs-doorbell textarea:focus{
  outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)!important}
#hs-doorbell .hsfc-CheckboxInput,#hs-doorbell input[type=checkbox]{accent-color:var(--lime-deep)}
#hs-doorbell .hsfc-CheckboxField label,#hs-doorbell .hsfc-CheckboxField .hsfc-FieldLabel{font-family:var(--font-body);font-weight:400;font-size:.95rem}
#hs-doorbell .hsfc-Button,#hs-doorbell button[type=submit]{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.7rem 1.3rem;border:none;border-radius:0;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:.92rem;background:var(--ink)!important;color:var(--white)!important}
#hs-doorbell .hsfc-Button:hover,#hs-doorbell button[type=submit]:hover{background:var(--blue-deep)!important}
#hs-doorbell .hsfc-ErrorAlert{font-size:.85rem;color:var(--buttercup-deep)}
/* ══════════ END FENCE: HUBSPOT FORM ══════════ */

/* ══════════ FENCE: REDUCED MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  .btn,.post,.gift,.orbit,.tool,.faq-list summary{transition:none}
  #guideBtn.nudge{animation:none}
}
/* ══════════ END FENCE: REDUCED MOTION ══════════ */
/* ═══════════════════════════════════════════════════════════════════
   LANES — homepage glossary paired with offerings
   Replaced the rules for .zero / .glossary / .word / .jargon / .plain
   and .services / .doors / .door — those were deleted from the fences
   above once index.html switched over. .wrong stays up in the SERVICES
   fence — the fair-warning paragraph moved into this section unchanged.

   HOW THE ALIGNMENT WORKS: .lane is display:contents, so its four
   children become direct grid items of .lane-grid. With
   grid-auto-flow:column they fill top to bottom, one column per lane.
   That makes every definition box the same height as the tallest one
   and every offering card start on the same line, no matter how long
   the copy runs. Custom properties still inherit through
   display:contents, which is what lets --lane carry the color down.

   ONE COLOR VARIABLE PER LANE. Nothing in here hardcodes a hex.
   ═══════════════════════════════════════════════════════════════════ */

.lane-governance { --lane: var(--buttercup); --lane-deep: var(--buttercup-deep); }
.lane-fluency    { --lane: var(--lime-deep);  --lane-deep: var(--lime-deep); }
.lane-residency  { --lane: var(--blue);       --lane-deep: var(--blue-deep); }

/* Full-bleed mist band (same move as .invitefoot) so the section reads
   as its own room between the proof band above and the TL;DR below.
   The section holds a .wrap div; defs go white to stand off the mist. */
.lanes { background: var(--mist); padding-block: clamp(46px, 7vw, 64px); }
.lanes h2 { margin-bottom: .75rem; }
.lanes .section-note { max-width: 46rem; }

.lane-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto auto;
  gap: 0 2.25rem;
  margin: 3rem 0 2.5rem;
}

.lane { display: contents; }

/* ── icon ───────────────────────────────────────────────────────── */
.lane-icon { display: flex; justify-content: center; padding-bottom: 1.25rem; }
.lane-icon img { width: 76px; height: 76px; display: block; }
/* residency.svg fills its viewBox edge to edge while the other two sit
   inside padding, so it reads ~39% larger at the same box size. Scaled
   down here rather than editing the file Dan may replace. */
.lane-icon img.lane-icon-circle { width: 62px; height: 62px; margin: 7px 0; }

/* ── definition (top half) ──────────────────────────────────────── */
.lane-def {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.65rem;
}
.lane-jargon {
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--lane-deep);
  margin-bottom: .5rem;
}
.lane-plain { margin: 0; color: var(--dimgrey); line-height: 1.62; }
.lane-plain b { color: var(--ink); font-weight: 600; }

/* ── the tie ────────────────────────────────────────────────────── */
/* The whole point of the section. Draws the definition and the
   offering as one object instead of two stacked boxes. */
.lane-tie { height: 38px; position: relative; }
.lane-tie::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: var(--lane);
  border-radius: 2px;
}

/* ── offering (bottom half) ─────────────────────────────────────── */
.lane-offer {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--lane);
  border-radius: 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.lane-eyebrow {
  display: block;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dimgrey);
  margin-bottom: .45rem;
}
.lane-offer h3 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 .6rem;
}
.lane-offer p { margin: 0 0 1.15rem; color: var(--dimgrey); line-height: 1.6; }
.lane-offer a {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  color: var(--lane-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.lane-offer a:hover,
.lane-offer a:focus-visible { border-bottom-color: var(--lane); }

/* ── narrow screens ─────────────────────────────────────────────── */
/* Two columns first, then one. Auto-flow returns to row so each lane
   stacks as a unit: icon, definition, tie, offering. */
@media (max-width: 940px) {
  .lane-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    gap: 2.5rem 2rem;
  }
  .lane { display: flex; flex-direction: column; }
  .lane-def { flex: 1; }
  .lane-tie { height: 30px; }
}
@media (max-width: 620px) {
  .lane-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .lane-icon img { width: 64px; height: 64px; }
  .lane-icon img.lane-icon-circle { width: 52px; height: 52px; margin: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lane-offer a { transition: none; }
}

/* ══════════ FENCE: FAQ (services.html) ══════════ */
/* The accordion itself (borders, the + / – toggle, summary and answer type)
   is the .faq-list ruleset in the EXPRESS GRANT fence above; it is not scoped
   to that page, so the same markup gets the same behavior here. This fence
   adds only what services.html needs: the section band, matched to .fit, and
   a reading measure on the answers. */
.faq{padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.faq-item p{max-width:65ch}
/* ══════════ END FENCE: FAQ ══════════ */

/* ══════════ FENCE: PRIVACY (privacy.html) ══════════ */
/* The page reuses .section-note and .grant-checks for its prose and lists,
   and until now had no rules of its own: sections ran into each other and
   subheads sat flush on the paragraph above. Same band as the grant page. */
.privacy-short,.privacy-collect,.privacy-tools,.privacy-cookies,
.privacy-ai,.privacy-rights,.privacy-misc,.privacy-changes{
  padding-block:clamp(40px,6.5vw,56px);border-top:1px solid var(--line)}
.privacy-collect h3,.privacy-misc h3{font-size:1rem;margin:1.5rem 0 .4rem}
.privacy-collect h3:first-of-type,.privacy-misc h3:first-of-type{margin-top:1rem}
.privacy-short .section-note+.section-note,.privacy-collect .section-note+.section-note,
.privacy-tools .section-note+.section-note,.privacy-cookies .section-note+.section-note,
.privacy-ai .section-note+.section-note,.privacy-rights .section-note+.section-note,
.privacy-misc .section-note+.section-note,.privacy-changes .section-note+.section-note{margin-top:.9rem}
.privacy-tools .section-note+.grant-checks,.privacy-ai .section-note+.grant-checks{margin-top:1.3rem}
.privacy-tools .grant-checks+.section-note{margin-top:1.3rem}
/* ══════════ END FENCE: PRIVACY ══════════ */