/* Self-hosted variable fonts: no third-party request, faster first paint. */
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:200 800;font-display:swap;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans-var.woff2") format("woff2");font-weight:400 700;font-display:swap;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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --void:#150A1E;
  --void-2:#1E0E2B;
  --porcelain:#F3F1F7;
  --porcelain-2:#E7E3EF;
  --mango:#FFB020;
  --rose:#FF3D77;
  --jade:#00C58E;
  --iris:#7C6BFF;
  --sky:#35D2F2;
  --lime:#C2F53D;

  --lime-deep:#6FB92C;   /* the green from the Navarro guides */
  --forest:#14331C;      /* deep field so the lime can stay an accent */
  --active:#C2F53D;
  --active-soft:#00C58E;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --wrap:1240px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--porcelain);color:var(--void);
  font-family:var(--body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--active);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--void);color:var(--porcelain);padding:.7rem 1.1rem;border-radius:999px}

h1,h2,h3,.num,.code{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:-.035em;margin:0}
h2{font-size:clamp(2.1rem,5vw,4rem)}
h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.15}
p{margin:0 0 1rem;max-width:62ch}
.lede{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-weight:600;font-size:1rem;text-decoration:none;
  padding:1.05rem 1.7rem;border-radius:999px;border:2px solid transparent;
  background:var(--active);color:var(--void);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .5s ease,box-shadow .25s;
  box-shadow:0 0 0 0 rgba(0,0,0,0);cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.btn.ghost{background:transparent;border-color:currentColor;color:var(--porcelain)}
.btn.ghost:hover{background:var(--porcelain);color:var(--void);border-color:var(--porcelain)}
.btn.dark{background:var(--void);color:var(--porcelain)}
.btn.accent{background:var(--active);border-color:var(--active);color:var(--void);transition:background-color .7s ease,border-color .7s ease,transform .25s}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;padding:1rem 0;transition:background-color .35s,backdrop-filter .35s,padding .35s}
.site-header.stuck{background:rgba(21,10,30,.94);backdrop-filter:blur(16px);padding:.5rem 0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;color:var(--porcelain)}
.wordmark{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.03em;text-decoration:none;line-height:1}
.wordmark span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.22em;opacity:.65;font-family:var(--body);margin-top:.15rem}
.nav{display:flex;align-items:center;gap:1.9rem;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none;position:relative;padding:.2rem 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--active);transition:right .3s cubic-bezier(.2,.8,.2,1)}
.nav a:not(.btn):hover::after{right:0}
.nav .btn{padding:.65rem 1.25rem;font-size:.92rem}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-weight:600;border:2px solid currentColor;border-radius:999px;padding:.5rem 1.1rem;color:var(--porcelain)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;left:1.25rem;right:1.25rem;top:calc(100% + .6rem);background:var(--void-2);border-radius:22px;padding:1rem 1.4rem 1.6rem;color:var(--porcelain)}
.menu-panel a{display:block;padding:.7rem 0;text-decoration:none;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.12)}
.menu-panel .btn{margin-top:1.2rem;border-bottom:none}
@media(max-width:980px){.nav{display:none}.menu{display:block}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--void);color:var(--porcelain);overflow:hidden;padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(3rem,5vw,4.5rem)}
.aurora{position:absolute;inset:-20%;pointer-events:none;filter:blur(64px) saturate(1.5);opacity:1}
.aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 55%,transparent 30%,var(--void) 100%)}
.blob{position:absolute;border-radius:50%;transition:background-color .9s ease}
.blob.a{width:40vw;height:40vw;left:-10vw;top:-2vw;background:var(--active);opacity:.62;animation:drift1 26s ease-in-out infinite alternate}
.blob.b{width:36vw;height:36vw;right:-6vw;bottom:-6vw;background:var(--active-soft);opacity:.55;animation:drift2 31s ease-in-out infinite alternate}
.blob.c{width:30vw;height:30vw;left:34vw;top:42%;background:var(--iris);opacity:.42;animation:drift1 37s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-4vw,0) scale(1.14)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-7vw,5vw,0) scale(.92)}}
.grain{position:absolute;inset:0;background-image:var(--grain);opacity:.14;pointer-events:none;mix-blend-mode:overlay}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-size:clamp(2.2rem,4vw,3.7rem);max-width:15ch;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--active);transition:color .6s ease}
.hero .lede{margin-top:1.4rem;max-width:36ch;color:#DCD4E8}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.langs{margin-top:1.9rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.16);font-size:.95rem;color:#B6ABC6;max-width:38ch}
@media(max-width:980px){.hero .wrap{grid-template-columns:1fr}}

/* ---------- quiz card ---------- */
.card{
  background:var(--porcelain);color:var(--void);
  border-radius:40px 40px 40px 6px;
  padding:clamp(1.6rem,2.6vw,2.4rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
  position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--active);transition:background-color .6s ease}
.card h2{font-size:clamp(1.5rem,2.2vw,1.95rem);margin-top:.5rem}
.card .hint{font-size:.98rem;color:#5B5168;margin:.6rem 0 1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font:inherit;font-size:.94rem;font-weight:500;cursor:pointer;
  background:transparent;color:var(--void);
  border:1.5px solid #C9C2D6;border-radius:999px;padding:.55rem 1.05rem;
  transition:border-color .2s,background-color .25s,color .25s,transform .2s;
}
.chip:hover{border-color:var(--void);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--void);border-color:var(--void);color:var(--porcelain);font-weight:600}
.reading{margin-top:1.5rem;border-top:1px solid #D3CCDE;padding-top:1.4rem;min-height:12.5rem}
.reading .said{font-family:var(--display);font-weight:600;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.35;letter-spacing:-.02em;margin:0 0 1.1rem;max-width:none}
.reading .paths{font-size:.97rem;color:#5B5168;margin:0}
.reading .paths a{font-weight:600;color:var(--void);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--active);white-space:nowrap}
.reading .fine{font-size:.85rem;color:#7C7189;margin:1rem 0 0}
.reading.enter{animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- creed: one line, scrolling ---------- */
.creed{background:var(--active);color:var(--void);overflow:hidden;padding:.95rem 0;transition:background-color .7s ease;border-block:2px solid var(--void)}
.creed-track{display:flex;width:max-content;animation:creedslide 46s linear infinite}
.creed-track span{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,1.9vw,1.5rem);letter-spacing:-.02em;white-space:nowrap;padding-right:clamp(3rem,6vw,6rem)}
.creed:hover .creed-track{animation-play-state:paused}
@keyframes creedslide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:clamp(4rem,8vw,7rem) 0}
.head{max-width:46rem;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
/* section headings hold one line and scale down rather than wrap */
.head h2{white-space:nowrap;max-width:none;font-size:clamp(1.15rem,5.35vw,2.75rem)}

.head p{margin-top:1.1rem;font-size:1.12rem;opacity:.72}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:2.2rem}
.steps li::before{
  content:"0" counter(s);
  font-family:var(--display);font-weight:800;font-size:clamp(3rem,5vw,4.6rem);
  line-height:.8;letter-spacing:-.05em;display:block;margin-bottom:1rem;color:var(--hue);
}
.steps li::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--hue);border-radius:2px}
.steps p{margin-top:.7rem;font-size:1rem;opacity:.75}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}

/* alone band */
.alone{background:var(--forest);color:var(--porcelain);position:relative;overflow:hidden}
.alone .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.alone h2{font-size:clamp(2.6rem,6vw,5rem);max-width:9ch;position:sticky;top:6rem}
.care{list-style:none;margin:0;padding:0}
.care li{padding:1.3rem 0;border-top:1px solid rgba(194,245,61,.3)}
.care li:last-child{border-bottom:1px solid rgba(194,245,61,.3)}
.care strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;margin-bottom:.3rem;color:var(--lime)}
.care span{color:#CBD8C2}
@media(max-width:900px){.alone .wrap{grid-template-columns:1fr}}

/* visa rows */
.visas{list-style:none;margin:0;padding:0;border-top:2px solid var(--void)}
.visas li{border-bottom:2px solid var(--void)}
.visas a{
  display:grid;grid-template-columns:13.5rem 1fr 3rem;gap:1.5rem;align-items:center;
  padding:1.5rem 1.2rem;text-decoration:none;position:relative;
  transition:background-color .35s cubic-bezier(.2,.8,.2,1),padding-left .35s;
}
.visas a:hover,.visas a:focus-visible{background:var(--hue);padding-left:1.9rem}
.code{font-size:clamp(1.7rem,3vw,2.6rem);white-space:nowrap}
.what{opacity:.75;max-width:56ch}
.visas a:hover .what{opacity:.9}
.go{justify-self:end;width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid var(--void);display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.visas a:hover .go{transform:rotate(-45deg) scale(1.08)}
.go svg{width:1.1rem;height:1.1rem}
.family-note{margin-top:1.8rem;opacity:.75}
.family-note a{font-weight:600;text-underline-offset:3px}
@media(max-width:760px){.visas a{grid-template-columns:1fr 3rem;gap:.4rem 1rem}.code{grid-column:1/-1}}

/* proof */
.proof{background:var(--void);color:var(--porcelain);position:relative;overflow:hidden}
.proof .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:center}
.stat .num{font-size:clamp(5.5rem,13vw,11rem);line-height:.8;color:var(--mango);letter-spacing:-.06em;margin:0}
.stat p{margin-top:1.2rem;font-size:1.15rem}
.fine{font-size:.85rem;opacity:.55}
.featured{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2);font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.35;letter-spacing:-.02em;max-width:30ch}
.quotes{display:grid;gap:1.2rem;align-content:start}
.quotes blockquote{margin:0;background:var(--void-2);border-radius:26px 26px 26px 6px;padding:1.6rem 1.7rem;border-left:4px solid var(--hue)}
.quotes blockquote p{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.35;letter-spacing:-.02em;margin:0 0 .9rem;max-width:46ch}
.quotes blockquote cite{font-style:normal;font-weight:600;font-size:.92rem;opacity:.62;font-family:var(--body)}
@media(max-width:900px){.proof .wrap{grid-template-columns:1fr}}

/* about */
.about .wrap{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.frame{position:relative}
.frame::before{content:"";position:absolute;inset:1.6rem -1.6rem -1.6rem 1.6rem;background:var(--lime);border-radius:8px 120px 8px 8px}
.portrait{position:relative;aspect-ratio:4/5;border-radius:8px 120px 8px 8px;overflow:hidden;background:var(--porcelain-2);display:grid;place-items:center;color:#7C7189;font-size:.9rem}
.portrait img{width:100%;height:100%;object-fit:cover}
.story{font-size:1.1rem;line-height:1.65;max-width:58ch}
.creds{list-style:none;padding:0;margin:1.8rem 0 0;font-size:.98rem}
.creds li{padding:.7rem 0;border-top:1px solid #D3CCDE;opacity:.8}
.creds a{font-weight:600;opacity:1}
@media(max-width:900px){.about .wrap{grid-template-columns:1fr}.frame{max-width:22rem}}

/* faq */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.faq .wrap{grid-template-columns:1fr}}
details.qa{border-top:2px solid var(--void)}
details.qa:last-of-type{border-bottom:2px solid var(--void)}
details.qa summary{cursor:pointer;list-style:none;padding:1.4rem 3rem 1.4rem 0;position:relative;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.35rem);letter-spacing:-.02em;line-height:1.25}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:1.5rem;height:1.5rem;background:var(--void);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5v14M5 12h14' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
details.qa[open] summary::after{transform:rotate(135deg);background:var(--rose)}
details.qa p{opacity:.78;padding-bottom:1.4rem;margin:0}

/* guides */
.guides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.guides a{display:block;height:100%;text-decoration:none;background:var(--porcelain-2);border-radius:28px 28px 28px 6px;padding:1.7rem;transition:transform .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
.guides a:hover{transform:translateY(-6px);background:var(--hue)}
.guides p{margin:.8rem 0 0;font-size:.98rem;opacity:.75}
@media(max-width:840px){.guides{grid-template-columns:1fr}}

/* close */
.close{background:var(--forest);color:var(--porcelain);position:relative;overflow:hidden}
.close .wrap{position:relative;z-index:2}
.close h2{font-size:clamp(2.4rem,6.2vw,5.2rem);max-width:15ch}
.close p{font-size:1.2rem;margin:1.5rem 0 2.4rem;max-width:42ch;color:#D8D2E2}

/* footer */
footer{background:var(--void);color:#B6ABC6;padding:4rem 0 3rem;font-size:.93rem;position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer a{color:#EDE8F5;text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer ul{list-style:none;margin:0;padding:0}
footer li{padding:.22rem 0}
footer .fname{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:#fff;margin-bottom:.7rem}
footer .fh{color:#fff;font-weight:600;margin-bottom:.6rem}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem;font-size:.8rem;max-width:none;opacity:.7}
@media(max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .wrap{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}


/* =================================================================
   INNER PAGES
   Everything above this line is the homepage design comp, verbatim.
   Everything below extends it for the other 35 pages, reusing the
   same ground colors, radius language, and 2px void rules.
   ================================================================= */

/* ---------- compact page hero ---------- */
.page-hero{position:relative;background:var(--void);color:var(--porcelain);overflow:hidden;padding:clamp(7rem,10vw,9rem) 0 clamp(2.6rem,4vw,3.6rem)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);max-width:22ch;text-wrap:balance}
.page-hero .lede{margin-top:1.2rem;max-width:44ch;color:#DCD4E8}
.page-hero .actions{margin-top:1.7rem}
.page-hero .blob.a{width:34vw;height:34vw;left:-12vw;top:-8vw;opacity:.5}
.page-hero .blob.b{width:26vw;height:26vw;right:-4vw;bottom:-12vw;opacity:.42}
.page-hero .blob.c{display:none}

/* ---------- breadcrumbs ---------- */
.crumbs{position:relative;z-index:2;font-size:.85rem;letter-spacing:.02em;color:#B6ABC6;margin:0 0 1.4rem;max-width:none}
.crumbs a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px}
.crumbs a:hover{border-bottom-color:var(--active)}
.crumbs span{opacity:.55;padding:0 .45rem}

/* ---------- reading column ----------
   The wrap keeps the page's left edge, so body copy lines up with the h1
   above it. Text carries its own measure; wide blocks opt out below. */
.prose{padding:clamp(3rem,6vw,5rem) 0}
.prose h2,.prose h3,.prose p,.prose .todo,.prose .notice,
.prose ul:not([class]){max-width:52rem}
.prose h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:clamp(2.4rem,4vw,3.4rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:2rem;font-size:1.25rem}
.prose p{margin:1rem 0 0}
.prose ul:not([class]){margin:1.2rem 0 0;padding-left:0;list-style:none}
.prose ul:not([class]) li{position:relative;padding:.55rem 0 .55rem 1.6rem;max-width:62ch}
.prose ul:not([class]) li::before{content:"";position:absolute;left:0;top:1.15rem;width:.55rem;height:.55rem;border-radius:2px;background:var(--hue,var(--lime-deep))}
.prose ol:not([class]){margin:1.2rem 0 0;padding-left:0;list-style:none;counter-reset:pl;max-width:52rem}
.prose ol:not([class]) li{position:relative;padding:.55rem 0 .55rem 2rem;max-width:62ch;counter-increment:pl}
.prose ol:not([class]) li::before{content:counter(pl) ".";position:absolute;left:0;top:.55rem;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--hue,var(--lime-deep))}
.prose a:not(.btn){font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--hue,var(--lime-deep))}
.prose .story{font-size:1.1rem;line-height:1.65;max-width:58ch}
.prose .fine{margin-top:1.2rem}

/* ---------- placeholder marker ---------- */
/* Deliberately loud. If one of these reaches production it should be obvious. */
.todo{
  margin:1.6rem 0;padding:1.1rem 1.3rem;max-width:62ch;
  background:repeating-linear-gradient(135deg,#FFF4D6 0 10px,#FFE9AE 10px 20px);
  border:2px solid var(--void);border-radius:18px 18px 18px 4px;
  font-size:.95rem;line-height:1.55;color:#3B2A05;
}
.todo b{font-family:var(--display);font-weight:800;letter-spacing:-.02em;display:block;margin-bottom:.35rem;font-size:1rem}

/* ---------- dated-post banner ---------- */
.notice{margin:0 0 1.8rem;padding:1rem 1.2rem;max-width:62ch;background:var(--porcelain-2);border-left:4px solid var(--mango);border-radius:4px 18px 18px 4px;font-size:.96rem}
.notice p{margin:0;max-width:none}

/* ---------- chip links ---------- */
ul.chip-links{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.3rem 0 0;padding:0}
ul.chip-links li{padding:0}
ul.chip-links a{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.94rem;
  border:1.5px solid #C9C2D6;border-radius:999px;padding:.55rem 1.05rem;
  transition:background-color .25s,border-color .2s,color .25s,transform .2s;
}
ul.chip-links a:hover{background:var(--void);border-color:var(--void);color:var(--porcelain);transform:translateY(-1px)}

/* ---------- comparison table ---------- */
.table-scroll{overflow-x:auto;margin:0 0 1.4rem}
.compare{width:100%;border-collapse:collapse;font-size:.97rem;min-width:40rem;text-align:left}
.compare caption{caption-side:bottom;text-align:left;padding-top:1rem}
.compare th,.compare td{padding:1rem .9rem;border-bottom:2px solid var(--void);vertical-align:top}
.compare thead th{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1rem;border-bottom-width:2px}
.compare tbody th{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.025em;white-space:nowrap}
.compare tbody th a{text-decoration:none;border-bottom:3px solid var(--lime)}
.compare tbody tr:hover{background:var(--porcelain-2)}

/* ---------- about and team ---------- */
.portrait-row{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.portrait-row h2{margin-top:0}
@media(max-width:860px){.portrait-row{grid-template-columns:1fr}.portrait-row .frame{max-width:20rem}}

ul.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.4vw,2rem)}
ul.team li{padding:0}
ul.team .portrait{aspect-ratio:4/5;border-radius:8px 56px 8px 8px;margin-bottom:1rem}
ul.team h3{margin-bottom:.2rem;font-size:1.15rem}
ul.team .role{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-deep);margin:0 0 .6rem}
ul.team p{margin:0;font-size:.95rem;opacity:.8}
@media(max-width:1000px){ul.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){ul.team{grid-template-columns:1fr;max-width:20rem}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.form p{margin:0 0 1.1rem;max-width:none}
.form label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem}
.form .opt{font-weight:400;opacity:.55}
.form input,.form select,.form textarea{
  font:inherit;width:100%;background:#fff;color:var(--void);
  border:2px solid #C9C2D6;border-radius:14px;padding:.85rem 1rem;
  transition:border-color .2s,box-shadow .2s;
}
.form textarea{border-radius:14px 14px 14px 4px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--void);box-shadow:0 0 0 4px rgba(194,245,61,.45)}
.form .hp{position:absolute;left:-9999px}
.contact-side h2{font-size:1.15rem;margin-top:1.8rem}
.contact-side h2:first-child{margin-top:0}
.contact-side p{font-size:1rem;margin:.6rem 0 0}
.contact-side a:not(.btn){font-weight:600}

/* ---------- embeds ---------- */
/* Was a decorative panel holding a one-line "embed goes here" note. It now
   holds the Calendly widget, which brings its own card and centring, so the
   panel's background and padding only added a band around it. Kept the shaped
   corner and the note styling. */
.embed{margin:1.6rem 0 0;border-radius:28px 28px 28px 6px;overflow:hidden}
.embed .calendly-inline-widget{width:100%}
.embed .embed-note{margin:1.2rem auto 0}
.embed-note{max-width:34ch;text-align:center;font-size:.98rem;opacity:.75;margin:0}

/* ---------- index lists: blog and guides ---------- */
.post-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--void)}
.post-list li{border-bottom:2px solid var(--void);padding:0}
.post-list a{
  display:grid;grid-template-columns:8rem 1fr 3rem;gap:1.5rem;align-items:center;
  padding:1.6rem 1.2rem;text-decoration:none;
  transition:background-color .35s cubic-bezier(.2,.8,.2,1),padding-left .35s;
}
.post-list a:hover,.post-list a:focus-visible{background:var(--hue);padding-left:1.9rem}
.post-list time{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;opacity:.6}
.post-list h3{margin:0}
.post-list .blurb{margin:.45rem 0 0;font-size:.98rem;opacity:.75;max-width:60ch}
.post-list a:hover .blurb{opacity:.9}
@media(max-width:700px){.post-list a{grid-template-columns:1fr 3rem}.post-list time{grid-column:1/-1}}

/* ---------- article meta ---------- */
.byline{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;font-size:.92rem;color:#B6ABC6;margin:1.3rem 0 0}
.byline strong{color:var(--porcelain);font-weight:600}
.article-foot{margin-top:clamp(2.6rem,5vw,4rem);padding-top:1.8rem;border-top:2px solid var(--void)}
.article-foot h2{font-size:1.4rem;margin-top:0}
.article-foot .btn{margin-top:1rem}

/* =================================================================
   MOBILE
   Desktop is untouched by everything below: every rule sits inside a
   max-width query. The homepage stays pixel-identical to the comp at
   desktop and tablet widths; at phone widths it intentionally differs
   from the comp in the two ways named here.
   ================================================================= */

@media (max-width:860px){
  /* Footer links were 18px tall and ~4px apart, stacked 25 deep. Each anchor
     now fills its column and clears 44px, which is the tap target floor. */
  footer li{padding:0}
  footer li a{display:block;padding:.65rem 0}
  footer .fh{margin-bottom:.2rem}
  /* The phone and email sit in the address block, not a list, and on a phone
     they are the two most likely taps on the page. */
  footer a[href^="tel:"],footer a[href^="mailto:"]{display:inline-block;padding:.6rem 0}
  /* Breadcrumb trail back. */
  .crumbs a{display:inline-block;padding:.45rem 0}
}

@media (max-width:700px){
  /* A post title inside the breadcrumb wrapped to three low-contrast lines
     and pushed the h1 down the screen. The trail back is what matters on a
     phone, so the current page drops out of it. The h1 directly below says
     where you are, and the BreadcrumbList structured data is unaffected. */
  .crumbs span[aria-current],.crumbs .sep-last{display:none}
}

@media (max-width:540px){
  /* Long unbroken strings (email addresses, visa codes) were the only things
     that could force a sideways nudge inside the text column. */
  .prose p,.prose li,.contact-side p{overflow-wrap:break-word}
}


/* ---------------------------------------------------------------- brand logo
   The header wordmark used to be set in type. It is now the real logo, which
   the pack says must not go below 180px wide in its horizontal lockup. At a
   360px viewport the bar holds 180px of logo plus the 85px Menu button inside
   a 320px wrap, so the floor holds everywhere without dropping to the icon.
   core.css still carries the old .wordmark type rules; they are inert now that
   the element contains an image rather than text. */
.wordmark{display:block;line-height:0}
.wordmark img{display:block;width:clamp(180px,17vw,205px);height:auto}
/* Below 360px the 180px floor plus the Menu button no longer fits the bar, so
   the lockup drops to the icon, which the pack allows at 24px and up. The firm
   name stays visible in the footer on every page. */
@media (max-width:359px){.wordmark img{width:44px}}


/* ------------------------------------------------- mobile layout fixes */

/* .alone h2 is position:sticky so the heading pins beside the list while it
   scrolls past. At 900px the grid collapses to one column and the list then
   scrolls underneath the pinned heading instead of beside it, which overlapped
   the two by about 64px. Sticky only makes sense while there are two columns. */
@media(max-width:900px){.alone h2{position:static}}

/* .frame::before paints the lime accent with inset:1.6rem -1.6rem -1.6rem 1.6rem,
   so it hangs 1.6rem past the bottom and right of the portrait. Without a
   bottom margin on the row, the next paragraph sits on top of that overhang. */
.portrait-row{margin-bottom:3.4rem}
.portrait-row > div > p + p{margin-top:1rem}

/* The mobile menu reads as a centred stack rather than a left-aligned list. */
.menu-panel a{text-align:center}


/* Build credit. Smaller and quieter than .legal (.8rem/.7) but deliberately
   still readable: hiding it would be cloaking, which Google penalises on the
   host domain. */
.credit{grid-column:1/-1;margin-top:.7rem;font-size:.72rem;opacity:.5}
.credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.credit a:hover{opacity:.85}