@font-face{font-family:'Bricolage Grotesque';src:url('../assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');font-style:normal;font-weight:300 800;font-display:swap}
@font-face{font-family:'Spline Sans Mono';src:url('../assets/fonts/spline-sans-mono-latin.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}

:root{
  /* surfaces: cool violet-tinted off-white (deliberately not cream/beige).
     The hero carries its own frozen copies; its --midnight must equal --bg. */
  --bg:#FAFAFC;
  --bg-raised:#F4F3F8;
  --surface:#FFFFFF;
  --surface-2:#EFEDF6;
  /* type colors: real ink, body-safe muted (>=4.5:1 on --bg) */
  --ink:#17162B;
  --muted:#4E4B6E;
  --faint:#6E6A92;
  /* accent system: one confident indigo, deepened for light ground, no gradients */
  --accent:#5B48D9;
  --accent-strong:#4936C4;
  --accent-soft:rgba(91,72,217,.08);
  --accent-border:rgba(91,72,217,.34);
  --accent-dim:rgba(91,72,217,.45);
  --accent-deeper:#3B2AA8;
  --good:#0E8A5F;
  --danger:#C43D3D;
  --danger-soft:rgba(196,61,61,.07);
  --danger-border:rgba(196,61,61,.35);
  /* semantic warning status, derived from the portfolio's amber palette */
  --warning:#B45309;
  --warning-soft:rgba(180,83,9,.10);
  --warning-border:rgba(180,83,9,.42);
  /* hairlines: ink-based on light */
  --edge:rgba(23,22,43,.10);
  --edge-strong:rgba(23,22,43,.22);
  /* geometry + elevation */
  --r-sm:0;
  --r-md:0;
  --r-lg:0;
  --shadow-1:0 1px 2px rgba(23,22,43,.06);
  --shadow-2:0 12px 32px rgba(23,22,43,.10);
  /* type stack: one grotesque family with committed weight/optical contrast,
     plus a mono data layer (prices, tags, counters) */
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Bricolage Grotesque',sans-serif;
  --mono:'Spline Sans Mono',monospace;
  --maxw:1180px;
  --nav-h:70px;
  /* spacing scale: 4px base. Use --s-* for component insets and gaps.
     --section-y is the single vertical rhythm step for every page section. */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;
  --s-5:20px;  --s-6:24px;  --s-7:32px;  --s-8:40px;
  --s-9:48px;  --s-10:56px; --s-11:64px; --s-12:80px;
  --s-13:96px; --s-14:128px;
  --section-y:clamp(64px,10vw,128px);
  --gutter:clamp(24px,4vw,58px);
  /* motion: duration expresses distance and consequence, never latency.
     Ease-out only. The global reduced-motion switch neutralizes all of it. */
  --dur-fast:150ms;
  --dur-base:240ms;
  --dur-slow:420ms;
  --dur-focal:620ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.25,1,.5,1);
  /* on-dark surface set: the services proof band and the service detail hero
     paint on --ink, where the light-ground type tokens are unreadable. */
  --on-dark:#FFFFFF;
  --on-dark-body:#D9D6EB;
  --on-dark-muted:#A9A3C7;
  --on-dark-accent:#B8B0FF;
  --on-dark-edge:rgba(255,255,255,.18);
  --on-dark-edge-strong:rgba(255,255,255,.30);
  /* the services CTA band paints on --accent-strong, a different ground */
  --on-accent-body:#E4E1FA;
  --on-accent-muted:#E0DCF9;
  /* legacy aliases: keep old var names working during migration.
     The hero carries its own frozen copies (see HERO). */
  --midnight:var(--bg);
  --violet:var(--accent);
  --cyan:var(--accent);
  --coral:var(--danger);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--faint);
}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-0.02em}
/* balance headline wraps outside the frozen hero */
section h2,section h3{text-wrap:balance}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(8px);
  background:rgba(250,250,252,0.88);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{border-bottom:1px solid var(--edge);background:rgba(250,250,252,0.96)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-0.01em}
.brand-logo{width:40px;height:40px;display:block;flex:none;object-fit:contain;image-rendering:-webkit-optimize-contrast;transform:translateZ(0);backface-visibility:hidden}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--muted);
  padding:8px 14px;border-radius:var(--r-sm);transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--ink);background:var(--surface-2)}
.nav .btn-primary{box-shadow:none}
/* services dropdown */
.nav-item{position:relative}
.nav-item .chev{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;margin-left:5px;vertical-align:-1px;transition:transform .2s}
.nav-item.open > .nav-link .chev{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:240px;padding:8px;
  background:var(--surface);border:1px solid var(--edge-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast);
}
/* invisible hover bridge across the gap between trigger and panel */
.nav-dropdown::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-item.open .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:none}
.nav-dropdown a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-family:var(--display);font-size:14px;font-weight:500;color:var(--muted);transition:background .15s,color .15s}
.nav-dropdown a:hover{background:var(--surface-2);color:var(--ink)}
.nav-dropdown .nav-dropdown-all{margin-top:4px;border-top:1px solid var(--edge);border-radius:0 0 var(--r-sm) var(--r-sm);color:var(--accent);font-size:13px}
.nav-dropdown .nav-dropdown-all:hover{color:var(--ink)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:0;transition:var(--dur-base) var(--ease-out)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}


/* ===== HERO ===== */
/* FROZEN COMPOSITION: the hero keeps the launch composition (pixel canvas,
   auras, shimmer headline, copy, Space Grotesk/Inter). It carries its own
   token copies so :root can never change a hero pixel. Colors were retuned
   once for the light theme (July 2026); do not restyle structure or fonts.
   --midnight must always equal :root --bg so the fade resolves into the page. */
.hero{
  --cyan:#0E7490;
  --violet:#6B58E8;
  --coral:#E85D75;
  --midnight:#FAFAFC;
  --ink:#17162B;
  --muted:#8B87B0;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  font-family:var(--body);
  color:var(--ink);
}
.hero{
  position:relative;overflow:hidden;
  min-height:100dvh;
  display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  padding:150px 0 56px;
  text-align:center;
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero-fade{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(250,250,252,.5) 0%,var(--midnight) 80%);
}
.aura{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;
  transition:transform .25s ease-out;z-index:0;
}
.aura-1{width:560px;height:560px;background:radial-gradient(circle,#6B58E8,transparent 70%);top:-120px;left:-80px;opacity:.18}
.aura-2{width:520px;height:520px;background:radial-gradient(circle,#22B8D4,transparent 70%);top:40px;right:-120px;opacity:.12}
.aura-3{width:420px;height:420px;background:radial-gradient(circle,#E85D75,transparent 70%);bottom:-160px;left:35%;opacity:.10}

.hero-top{position:relative;z-index:2;margin:0 auto}
/* frozen: original eyebrow treatment, unaffected by the global .eyebrow restyle */
.hero .eyebrow{
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:0.28em;color:var(--cyan);
}
.hero-top .eyebrow{text-shadow:0 2px 12px rgba(250,250,252,.9)}
.hero-mid{position:relative;z-index:2;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(34px,6vw,64px);margin:20px auto 0;max-width:920px}
.hero h1.hero-glass{
  color:transparent;
  background:repeating-linear-gradient(100deg,
    rgba(23,22,43,1) 0px,
    rgba(23,22,43,.78) 50px,
    rgba(23,22,43,.62) 100px,
    rgba(23,22,43,.95) 150px,
    rgba(23,22,43,1) 200px);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px rgba(23,22,43,.28);
  filter:drop-shadow(0 12px 30px rgba(23,22,43,.14));
  animation:heroTextShimmer 8s linear infinite;
}
.hero h1 .grad{
  background:linear-gradient(110deg,var(--cyan),var(--violet) 55%,var(--coral));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:0;filter:none;animation:none;
}
@keyframes heroTextShimmer{0%{background-position:0 0}100%{background-position:200px 0}}
.hero p.lede{font-size:clamp(16px,2vw,19px);color:#565378;max-width:600px;margin:0 auto;text-shadow:0 2px 14px rgba(250,250,252,.8)}
.stats-row{display:flex;justify-content:center;gap:42px;margin-top:40px;flex-wrap:wrap}
.stat{text-align:center}
.stat .n{font-family:var(--display);font-size:34px;font-weight:700;color:var(--ink)}
.stat .l{font-size:13.5px;color:#565378;letter-spacing:.02em;text-shadow:0 1px 10px rgba(250,250,252,.8)}

.hero-actions{
  position:relative;z-index:2;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 auto;opacity:0;animation:heroFadeUp .8s ease both;animation-delay:.45s;
}
/* frozen: hero buttons pin their own geometry + motion so .btn base changes never leak in */
.hero-btn-primary,.hero-btn-secondary{
  font-family:var(--display);border-radius:0;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.hero-btn-primary{
  background:linear-gradient(180deg,rgba(126,106,245,.95),var(--violet));
  color:var(--on-dark);border:1px solid rgba(107,88,232,.5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.3),0 2px 4px rgba(23,22,43,.12),0 14px 30px rgba(107,88,232,.25);
}
.hero-btn-primary:hover{transform:scale(1.02)}
.hero-btn-primary:active{transform:scale(.98)}
.hero-btn-secondary{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(244,243,248,.92));
  color:var(--ink);border:1px solid rgba(23,22,43,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 5px 10px rgba(23,22,43,.24);
}
.hero-btn-secondary:hover{transform:scale(1.02)}
.hero-btn-secondary:active{transform:scale(.98)}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:769px){
  .hero{justify-content:center;gap:30px;padding:150px 0 90px}
}
@media(max-width:768px){
  .hero{justify-content:center;gap:28px}
  .hero-top,.hero-mid,.hero-actions{width:100%}
}

/* ===== BUTTONS (site-wide: booking, checkout, service pages, flows) ===== */
.btn{
  font-family:var(--display);font-weight:600;font-size:15px;
  height:44px;padding:0 24px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s,transform .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  white-space:nowrap;
}
.btn-primary{background:var(--accent-strong);color:var(--on-dark);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--accent-deeper);transform:translateY(-1px)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--edge-strong);box-shadow:none}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--edge-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--surface-2);border-color:var(--edge-strong);color:var(--faint);box-shadow:none;cursor:not-allowed;pointer-events:none;transform:none}
.btn[aria-busy="true"]{background:var(--ink);color:var(--on-dark);cursor:progress;pointer-events:none;transform:none}
.btn[aria-busy="true"]::after{display:none}
.btn[aria-busy="true"]::before{content:"";width:14px;height:14px;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;animation:button-spin .7s linear infinite}
.service-action-btn{min-height:48px;height:auto;padding-block:12px;line-height:1.25}
@keyframes button-spin{to{transform:rotate(360deg)}}

/* Pulse-beam treatment: the narrow beam runs across CTA faces and edges so
   the page's next actions read as one connected set. */
.btn-primary,.hero-btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after,.hero-btn-primary::after{content:"";position:absolute;z-index:1;pointer-events:none;top:-1px;bottom:-1px;left:-42%;width:16%;background:rgba(255,255,255,.32);box-shadow:0 0 14px rgba(255,255,255,.32);transform:skewX(-18deg);animation:cta-pulse-beam 3.8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes cta-pulse-beam{0%,42%{transform:translateX(0) skewX(-18deg);opacity:0}49%{opacity:1}66%,100%{transform:translateX(840px) skewX(-18deg);opacity:0}}

/* ===== SECTION SHELL ===== */
section{position:relative}
.block{padding:var(--section-y) 0}
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head h2{font-size:clamp(30px,4.4vw,46px);margin:0 0 16px}
.sec-head p{color:var(--muted);font-size:17px}
.head-glyph{width:30px;height:30px;stroke:var(--accent);stroke-width:1.7;fill:none;margin-right:12px;vertical-align:-3px}
.head-glyph circle{fill:var(--accent);stroke:none}

/* ===== CHECKOUT PAGE ===== */
.checkout-block{padding-top:calc(var(--nav-h) + var(--gutter))}
.checkout-head{text-align:center;margin:0 auto 34px}
.checkout-head h1{font-size:clamp(28px,4vw,40px)}
.checkout-shell{max-width:1060px;margin:0 auto}
.checkout-unavailable{text-align:center;padding:36px;border:1px solid var(--edge-strong);background:var(--surface)}
.checkout-unavailable p{margin:10px 0 22px;color:var(--muted)}
.checkout-progress{display:flex;align-items:stretch;gap:0;margin:0 0 18px;padding:0;list-style:none;border:1px solid var(--edge-strong);background:var(--surface)}
.checkout-progress li{position:relative;display:flex;align-items:center;gap:8px;min-width:0;flex:1;padding:11px 12px;border-right:1px solid var(--edge);color:var(--faint);font-size:12px;line-height:1.3}
.checkout-progress li:last-child{border-right:0}
.checkout-progress li>span:first-child{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:1px solid var(--edge-strong);font-family:var(--mono);font-size:10px;color:var(--faint)}
.checkout-progress li.current{color:var(--ink);font-weight:600;background:var(--accent-soft)}
.checkout-progress li.current>span:first-child{border-color:var(--accent-strong);background:var(--accent-strong);color:var(--on-dark)}
.checkout-progress li.completed{color:var(--muted)}
.checkout-progress li.completed>span:first-child{border-color:var(--good);color:var(--good)}
.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.checkout-form-panel{min-width:0;padding:30px;border:1px solid var(--edge-strong);background:var(--surface)}
.checkout-step-header{margin-bottom:24px;padding-bottom:19px;border-bottom:1px solid var(--edge)}
.checkout-step-header h2{font-size:24px;letter-spacing:-.02em;outline:none}
.checkout-step-header p{max-width:65ch;margin-top:7px;color:var(--muted);font-size:14.5px;line-height:1.55}
.checkout-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.checkout-field-grid .checkout-field{grid-column:1/-1}
.checkout-field-grid .checkout-field-firstName,.checkout-field-grid .checkout-field-lastName{grid-column:auto}
.checkout-field textarea{min-height:112px}
.duration-control{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);gap:10px;align-items:start}
.checkout-actions{padding-top:4px}
.checkout-summary{position:sticky;top:96px;border:1px solid var(--edge-strong);background:var(--surface);padding:22px}
.checkout-summary h2{margin-bottom:18px;font-size:18px}
.checkout-summary-service{display:flex;flex-direction:column;gap:2px;margin:0 -22px 14px;padding:0 22px 17px;border-bottom:1px solid var(--edge)}
.checkout-summary-service strong{font-size:15px;line-height:1.3}
.checkout-summary-service span{color:var(--muted);font-size:13px}
.checkout-summary .row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:7px 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.checkout-summary .row>span:last-child,.checkout-summary .row>strong{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.checkout-summary .row .disc{color:var(--good)}
.checkout-summary .row.total{margin-top:8px;padding-top:14px;border-top:1px solid var(--edge-strong);color:var(--ink);font-size:17px;font-weight:600}
.checkout-summary .row.recurring{margin-top:8px;padding-top:12px;border-top:1px solid var(--edge);font-size:12.5px}
.checkout-summary .row.recurring+.row.recurring{margin-top:0;padding-top:4px;border-top:0}
.checkout-summary .row.addon{padding-left:12px;font-size:12.5px}
.checkout-summary-plan{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding:12px;background:var(--surface-2);font-size:12.5px;color:var(--muted)}
.checkout-summary-plan strong{color:var(--ink);font-weight:600;line-height:1.45}
.summary-note{margin:3px 0 10px;padding:10px;background:var(--surface-2);color:var(--muted);font-size:12.5px;line-height:1.45}
.checkout-secure-note{display:flex;align-items:flex-start;gap:9px;margin:18px -22px -22px;padding:15px 22px;border-top:1px solid var(--edge);color:var(--muted);font-size:12.5px;line-height:1.45}
.checkout-secure-note>span{color:var(--accent);font-family:var(--mono)}
.checkout-policy-note{margin-top:18px;padding:13px 14px;border:1px solid var(--edge);background:var(--surface-2);color:var(--muted);font-size:13px;line-height:1.55}
.checkout-time-error{text-align:center;margin-top:8px}
.installment-fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0}
.installment-option{display:flex;align-items:flex-start;gap:11px;min-height:74px;padding:13px;border:1px solid var(--edge-strong);background:var(--surface);cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.installment-option:hover{border-color:var(--accent)}
.installment-option.selected{border-color:var(--accent-strong);background:var(--accent-soft)}
.installment-option input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.installment-option span{display:flex;flex-direction:column;gap:3px;min-width:0}
.installment-option strong{font-size:14.5px}
.installment-option small{color:var(--muted);font-size:12px;line-height:1.4}
.checkout-addons{margin-top:26px;padding:20px 0 0;border:0;border-top:1px solid var(--edge);min-width:0}
.checkout-addons legend{padding:0;font-size:15px;font-weight:600;color:var(--ink)}
.checkout-addons>.field-hint{margin:6px 0 14px}
.checkout-addon{padding:14px 0;border-bottom:1px solid var(--edge)}
.checkout-addon:last-of-type{border-bottom:0}
.checkout-addon-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.checkout-addon-head span{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.checkout-addon-units{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.checkout-addon-unit.field{display:flex;gap:10px;align-items:center;min-width:0;margin:0}
.checkout-addon-unit select{flex:1 1 auto;min-width:0}
.checkout-addon-add{margin-top:10px}
.checkout-review{border-top:1px solid var(--edge-strong)}
.checkout-review-section{padding:20px 0;border-bottom:1px solid var(--edge)}
.checkout-review-section h3{margin-bottom:12px;font-size:16px}
.checkout-review-section dl{display:grid;gap:10px}
.checkout-review-section dl>div{display:grid;grid-template-columns:minmax(110px,.38fr) minmax(0,1fr);gap:18px}
.checkout-review-section dt{color:var(--faint);font-size:12.5px}
.checkout-review-section dd{min-width:0;overflow-wrap:anywhere;color:var(--ink);font-size:13.5px;white-space:pre-line}
.checkout-review-section>p{color:var(--muted);font-size:13.5px}
.checkout-terms{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:14px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--ink);font-size:13.5px;line-height:1.5;cursor:pointer}
.checkout-terms.invalid{border-color:var(--danger);background:var(--danger-soft)}
.checkout-terms input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.checkout-notice{margin-bottom:16px;padding:12px 14px;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--ink);font-size:13.5px;line-height:1.5}
.checkout-success-card{max-width:640px;padding:32px;border:1px solid var(--edge-strong);background:var(--surface)}
.checkout-success-card .modal-success h1.success-title{margin-bottom:10px;font-size:26px}
.checkout-success-card .modal-success>.sub{max-width:56ch;margin:0 auto 22px;color:var(--muted)}
.checkout-success-card .modal-success>.btn{justify-content:center;margin-top:22px}
.checkout-success-details{margin:0;text-align:left;border-top:1px solid var(--edge-strong)}
.checkout-success-details>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:11px 0;border-bottom:1px solid var(--edge)}
.checkout-success-details dt{color:var(--faint);font-size:13px}
.checkout-success-details dd{color:var(--ink);font-size:14px;font-weight:600}
.checkout-success-next{margin-top:18px;padding:13px 14px;background:var(--surface-2);color:var(--muted);font-size:13.5px;text-align:left}
.checkout-success-next strong{color:var(--ink)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:920px){
  .checkout-shell{max-width:720px}
  .checkout-layout{grid-template-columns:1fr;gap:18px}
  .checkout-summary{position:static;grid-row:2}
}
@media(max-width:680px){
  .checkout-progress li{justify-content:center;padding-inline:8px}
  .checkout-progress li>span:nth-child(2){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .checkout-progress li.current{flex:2.4;justify-content:flex-start}
  .checkout-progress li.current>span:nth-child(2){position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}
}
@media(max-width:620px){
  .checkout-head{text-align:left}
  .checkout-form-panel{padding:24px 20px}
  .checkout-field-grid{grid-template-columns:1fr}
  .checkout-field-grid .checkout-field-firstName,.checkout-field-grid .checkout-field-lastName{grid-column:1}
  .duration-control{grid-template-columns:1fr}
  .installment-fieldset{grid-template-columns:1fr}
  .checkout-addon-unit{flex-wrap:wrap}
  .checkout-addon-unit select{flex-basis:100%}
}
@media(max-width:480px){
  .checkout-block{padding-top:calc(var(--nav-h) + var(--s-7))}
  .checkout-progress li{padding:9px 5px}
  .checkout-progress li.current{flex:3}
  .checkout-progress li>span:first-child{width:20px;height:20px;flex-basis:20px}
  .checkout-form-panel{padding:22px 16px}
  .checkout-summary{padding:19px 16px}
  .checkout-summary-service{margin-inline:-16px;padding-inline:16px}
  .checkout-secure-note{margin-inline:-16px;padding-inline:16px}
  .checkout-review-section dl>div{grid-template-columns:1fr;gap:2px}
  .checkout-success-card{padding:24px 18px}
  .checkout-success-details>div{grid-template-columns:1fr;gap:2px}
}

/* ===== HOME SERVICE DIRECTORY =====
   One link per row: name leads, value line and sentence-case meta support it. */
.home-service-directory{border-top:2px solid var(--ink);border-bottom:1px solid var(--edge-strong)}
.home-service-list{margin:0;padding:0;list-style:none}
.home-service-list>li+li{border-top:1px solid var(--edge-strong)}
.home-service-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:6px;align-items:start;padding:22px 0;color:inherit;text-decoration:none}
.home-service-row>:not(.home-service-arrow){grid-column:1;min-width:0}
.home-service-name{color:var(--ink);font-size:clamp(26px,6vw,36px);line-height:1.05;letter-spacing:-.03em;overflow-wrap:break-word;transition:color .2s ease}
.home-service-value{max-width:52ch;color:var(--muted);font-size:16px;line-height:1.5}
.home-service-meta{color:var(--ink);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.home-service-arrow{grid-column:2;grid-row:1;align-self:center;color:var(--accent-strong);font-size:22px;line-height:1;transition:transform .2s cubic-bezier(.25,1,.5,1)}
.home-service-row.is-unavailable .home-service-meta{color:var(--muted)}
a.home-service-row:focus-visible{outline-offset:4px}
a.home-service-row:hover .home-service-name,a.home-service-row:focus-visible .home-service-name{color:var(--accent-strong)}
.home-service-all{width:max-content;max-width:100%;margin-top:22px}
.home-service-all span{transition:transform .2s ease}
@media(min-width:921px){
  .home-service-row{grid-template-columns:15rem minmax(0,1fr) 14rem 1.5rem;column-gap:clamp(24px,3vw,40px);align-items:baseline;padding:28px 0}
  .home-service-row>:not(.home-service-arrow){grid-column:auto}
  .home-service-arrow{grid-column:auto;grid-row:auto;align-self:center}
  .home-service-value{max-width:none}
  .home-service-meta{text-align:right}
  .home-service-meta>span:not(.home-service-sep){display:block}
  .home-service-sep{display:none}
}
@media(hover:hover){
  a.home-service-row:hover .home-service-arrow,.home-service-all:hover span{transform:translateX(4px)}
}
a.home-service-row:focus-visible .home-service-arrow{transform:translateX(4px)}

/* ===== PORTFOLIO: client work, founder ventures, more client builds ===== */
.block-raised{background:var(--bg-raised);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.sec-head-split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.sec-head-split>div{max-width:680px}
.data-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--muted);border:1px solid var(--edge-strong);background:var(--surface);padding:8px 14px;white-space:nowrap;margin-bottom:6px}
.data-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}

/* Groups: a clear break before each, tight head-to-content spacing inside. */
.work-group{margin-top:clamp(64px,9vw,112px)}
.work-group-first{margin-top:clamp(32px,5vw,56px)}
.work-founder-btn{margin-top:clamp(28px,4vw,40px)}
.work-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4) var(--s-8);flex-wrap:wrap;padding-bottom:var(--s-4);margin-bottom:var(--s-8);border-bottom:1px solid var(--edge-strong)}
.work-group-head h3{font-size:clamp(22px,2.6vw,28px)}
.work-group-head p{margin:0;color:var(--muted);font-size:15.5px;max-width:60ch}
.work-group-head a{color:var(--accent-strong);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--accent-border);text-underline-offset:4px}
.work-group-head a:hover{color:var(--accent-deeper);text-decoration-color:currentColor}

.case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,5vw,52px) clamp(20px,3vw,36px)}
.case{grid-column:span 7;display:flex;flex-direction:column}
.case:nth-child(4n+2),.case:nth-child(4n+3){grid-column:span 5}
.case-visual{border:1px solid var(--edge-strong);background:var(--surface);overflow:hidden;transition:transform .3s cubic-bezier(.25,1,.5,1),box-shadow .3s cubic-bezier(.25,1,.5,1),border-color .3s}
.case-chrome{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;background:var(--surface-2);border-bottom:1px solid var(--edge)}
.case-chrome span{width:7px;height:7px;border-radius:50%;background:var(--faint);opacity:.55}
.case-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:var(--bg-raised)}
.case:focus-within .case-visual,.venture:focus-within .case-visual{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--accent-border)}
.case-meta{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:16px 2px 0}
.case-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:100%}
.case h4,.venture h4,.venture h3{font-size:20px;line-height:1.2}
.case .sector,.venture .sector{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.case p{color:var(--muted);font-size:15px;line-height:1.55;margin-top:6px;max-width:52ch;text-wrap:pretty}
.case-action{margin-top:var(--s-4);min-height:44px;padding-inline:16px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-strong);border-color:var(--accent-border)}
.case-action:hover{color:var(--accent-deeper);border-color:var(--accent-strong)}

.work-index{margin-top:clamp(44px,7vw,72px)}
.case-carousel-dots{display:none}
.work-index ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:clamp(28px,5vw,64px)}
.work-index li{border-bottom:1px solid var(--edge)}
.wi-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:2px;padding:14px 2px;text-decoration:none}
.wi-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);transition:color .2s}
.wi-sector{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:right}
.wi-result{flex-basis:100%;color:var(--muted);font-size:14px;line-height:1.5}
.work-index a.wi-row .wi-name{color:var(--accent-strong)}
.work-index a svg{width:14px;height:14px;flex:0 0 auto;stroke:var(--faint);stroke-width:2;fill:none;transition:stroke .2s,transform .2s}
.work-index a:hover .wi-name,.work-index a:focus-visible .wi-name{color:var(--accent-deeper)}
.work-index a:hover svg{stroke:var(--accent-strong);transform:translate(2px,-2px)}

/* Ventures: smaller, side-by-side media rows so they never read as client cards. */
.venture-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px)}
.venture{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.venture-meta{display:flex;flex-direction:column;align-items:flex-start}
.venture-meta .case-top{flex-direction:column;gap:var(--s-1)}
.venture p{color:var(--muted);font-size:15px;line-height:1.55;margin-top:var(--s-2)}
.venture-meta .btn{margin-top:var(--s-3)}
/* Founder page: one venture per row, screenshot scaled up, meta beside it. */
.venture-list-wide{grid-template-columns:1fr;gap:clamp(36px,5vw,64px)}
.venture-list-wide .venture{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.venture-list-wide .venture p{font-size:17px;line-height:1.65;max-width:46ch}
.venture-list-wide .venture h3{font-size:clamp(24px,3vw,34px)}

@media(hover:hover){
  .case:hover .case-visual{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--accent-border)}
}

/* ===== PROCESS ===== */
.process-carousel{border:1px solid var(--edge-strong);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-1)}
.process-tabs{display:flex;align-items:stretch;gap:2px;padding:8px;border-bottom:1px solid var(--edge);background:var(--bg-raised);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
.process-tabs::-webkit-scrollbar{display:none}
.process-tab{flex:1 0 auto;scroll-snap-align:start;min-height:46px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);padding:10px 14px;font-family:var(--display);font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background .22s,color .22s,transform .22s}
.process-tab:hover{color:var(--ink);background:rgba(23,22,43,.05)}
.process-tab:active{transform:scale(.98)}
.process-tab.is-active{background:var(--accent-strong);color:var(--on-dark)}
/* journey rail: the section's own graphic, driven by the tab JS */
.process-rail{position:relative;display:flex;justify-content:space-between;align-items:center;height:22px;margin:14px clamp(20px,4vw,44px) 0}
.process-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--edge)}
.process-rail .rail-fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--accent);transform:scaleX(var(--rail-scale,0));transform-origin:left center;transition:transform .45s cubic-bezier(.25,1,.5,1)}
.rail-node{position:relative;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--edge-strong);transition:border-color .3s,background .3s}
.rail-node.is-done{border-color:var(--accent)}
.rail-node.is-active{border-color:var(--accent);background:var(--accent)}
.process-panels{padding:clamp(28px,5vw,64px)}
.process-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.7fr);align-items:center;gap:clamp(28px,6vw,90px);min-height:260px;animation:process-panel-in var(--dur-slow) var(--ease-out)}
.process-panel[hidden]{display:none}
@keyframes process-panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.process-panel-copy{max-width:570px}
.process-panel-copy h3{font-size:clamp(32px,4vw,52px);margin-bottom:14px}
.process-panel-copy p{max-width:52ch;color:var(--muted);font-size:17px;line-height:1.65}
.process-panel-action{margin-top:22px}
.process-visual{position:relative;width:min(100%,390px);aspect-ratio:3/2;margin:0 0 0 auto;overflow:hidden;background:var(--surface);isolation:isolate}
/* one shared accent veil keeps six different photos reading as a family */
.process-visual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(125deg,rgba(91,72,217,.16),rgba(91,72,217,.03) 65%);box-shadow:inset 0 0 0 1px rgba(23,22,43,.08)}
.process-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.04);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .35s ease}
.process-panel:hover .process-visual img{transform:scale(1.035);filter:saturate(.92) contrast(1.04)}

/* ===== LEADERSHIP + ABOUT ===== */
.leadership-portrait{position:relative;max-width:390px;border:1px solid var(--edge-strong);background:var(--surface);overflow:hidden}
.leadership-portrait::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(91,72,217,.12)}
.leadership-portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center top;filter:saturate(.9) contrast(1.02)}
.leadership-name{font-family:var(--display);font-size:18px;font-weight:650;margin-bottom:14px}
.leadership-name span{display:block;margin-top:2px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--faint)}
.about-hero{padding-top:clamp(126px,16vw,178px);padding-bottom:var(--section-y)}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(220px,.55fr);gap:clamp(30px,7vw,100px);align-items:end}
.about-hero h1{max-width:850px;font-size:clamp(48px,7vw,68px);letter-spacing:-.04em}
.about-hero-cta{margin-top:clamp(24px,3vw,34px)}
.about-hero-aside{display:grid;justify-items:start}
.story-profile-cta{margin-top:var(--s-3)}
.about-hero-summary{max-width:390px;border-top:2px solid var(--accent);padding-top:16px;color:var(--muted);font-size:17px;line-height:1.65}
.about-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(34px,8vw,128px);align-items:start}
.about-story h2,.about-leadership h2,.about-trust h2,.about-cta h2,.leader-contact-band h2{font-size:clamp(34px,4.8vw,60px)}
.about-story-copy{display:grid;gap:18px;max-width:650px;color:var(--muted);font-size:17px;line-height:1.7}
.principle-list{list-style:none;border-top:1px solid var(--edge);margin-top:32px}
.principle-list li{padding:18px 0;border-bottom:1px solid var(--edge)}
.principle-list span{color:var(--muted);line-height:1.55}
.about-leadership{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1fr);gap:clamp(36px,8vw,130px);align-items:center}
.about-leadership .leadership-portrait{max-width:440px}
.about-leadership-copy{max-width:660px}
.about-leadership-copy .leadership-name{margin-top:22px}
.about-leadership-copy > p:not(.leadership-name){margin-top:16px;color:var(--muted);font-size:17px;line-height:1.7}
.about-trust{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(34px,8vw,128px);align-items:start}
.trust-list{list-style:none;border-top:1px solid var(--edge-strong)}
.trust-list li{padding:20px 0;border-bottom:1px solid var(--edge)}
.trust-list strong{display:block;font-family:var(--display);font-size:19px;font-weight:650;margin-bottom:5px}
.trust-list span{display:block;max-width:58ch;color:var(--muted);line-height:1.55}
.about-cta{text-align:center;border-top:1px solid var(--edge-strong)}
.about-cta h2{max-width:760px;margin:0 auto 18px}
.about-cta p{max-width:560px;margin:0 auto 26px;color:var(--muted);font-size:17px}
/* leadership profile (about/keleb-jones) */
.about-leadership-copy .btn{margin-top:28px}
.leader-section-note{margin-top:14px;max-width:34ch;color:var(--muted);font-size:15.5px;line-height:1.6}
/* portfolio accordion (founder profile) */
.pf-accordion{border-top:1px solid var(--edge-strong)}
.pf-item{border-bottom:1px solid var(--edge)}
.pf-item summary{display:flex;min-height:58px;align-items:baseline;justify-content:space-between;gap:16px;padding:17px 4px;list-style:none;cursor:pointer}
.pf-item summary::-webkit-details-marker{display:none}
.pf-name{font-family:var(--display);font-size:19px;font-weight:650;color:var(--ink);line-height:1.3;transition:color var(--dur-base) var(--ease-out)}
.pf-sector{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-item summary:hover .pf-name,.pf-item[open] .pf-name{color:var(--accent-strong)}
.pf-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pf-panel{padding:0 4px 24px;animation:pf-open .32s cubic-bezier(.16,1,.3,1)}
.pf-panel .case-visual{max-width:520px;margin-bottom:16px}
.pf-panel p{max-width:58ch;color:var(--muted);font-size:15.5px;line-height:1.65}
.pf-panel .case-action{margin-top:var(--s-3)}
@keyframes pf-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* The list runs long, so the head rides along with it on wide screens only. */
@media(min-width:921px){.pf-head{position:sticky;top:112px}}
.leader-quote{max-width:920px;margin:0 auto}
.leader-quote blockquote{display:grid;gap:22px;font-family:var(--display);font-size:clamp(21px,2.4vw,28px);font-weight:500;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
.leader-quote figcaption{margin-top:28px;font-family:var(--display);font-size:17px;font-weight:650;color:var(--muted)}
.leader-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:19px;font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--edge-strong);text-underline-offset:5px;transition:color var(--dur-base) var(--ease-out),text-decoration-color var(--dur-base) var(--ease-out)}
.leader-link:hover{color:var(--accent-strong);text-decoration-color:currentColor}
.trust-list .leader-link + span{margin-top:0}
/* Contact rows: icon + label + value, drawn in the house line style. No cards. */
.leader-contact-band p{max-width:58ch;margin-top:var(--s-3);color:var(--muted);font-size:17px}
.leader-contact{margin-top:var(--s-6);border-top:1px solid var(--edge-strong)}
.leader-contact li{border-bottom:1px solid var(--edge)}
.leader-contact a{display:flex;align-items:center;gap:18px;min-height:64px;padding:14px 4px;color:var(--ink);transition:color var(--dur-base) var(--ease-out)}
.leader-contact a:hover,.leader-contact a:focus-visible{color:var(--accent-strong)}
.lc-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--accent-strong);transition:border-color var(--dur-base) var(--ease-out)}
.leader-contact a:hover .lc-icon,.leader-contact a:focus-visible .lc-icon{border-color:var(--accent-strong)}
.lc-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.lc-label{flex:0 0 auto;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lc-value{margin-left:auto;font-family:var(--display);font-size:17px;font-weight:650;letter-spacing:-.01em;text-align:right;overflow-wrap:anywhere}
.leader-reply{margin-top:16px;color:var(--muted);font-size:14px}
@media(max-width:620px){
  .leader-contact a{flex-wrap:wrap;gap:10px 14px;padding:16px 4px}
  .lc-value{margin-left:0;flex:1 0 100%;text-align:left;font-size:16px}
}

/* ===== CASE STUDY ARTICLE ===== */
.case-study-hero{padding-top:clamp(126px,16vw,178px);padding-bottom:clamp(48px,7vw,88px)}
.case-study-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-strong);text-decoration:none;margin-bottom:24px}
.case-study-back:hover{color:var(--accent-deeper)}
.case-study-hero h1{max-width:820px;font-size:clamp(40px,6vw,68px);letter-spacing:-.03em;margin-top:6px}
.case-study-hero .dek{max-width:640px;margin-top:20px;color:var(--muted);font-size:18px;line-height:1.6}
.case-study-copy{max-width:680px;margin:0 auto;color:var(--ink)}
.case-study-copy h2{font-size:clamp(26px,3.4vw,36px);margin-top:56px;margin-bottom:16px}
.case-study-copy h2:first-child{margin-top:0}
.case-study-copy p{color:var(--muted);font-size:17px;line-height:1.7;margin-top:14px}
.case-lede{font-size:19px;line-height:1.6;color:var(--ink)}
.case-study-copy ul{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:10px}
.case-study-copy li{position:relative;padding-left:22px;color:var(--muted);font-size:16px;line-height:1.6}
.case-study-copy li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.facts-box{margin:40px 0;padding:28px clamp(20px,4vw,36px);border:1px solid var(--edge-strong);background:var(--bg-raised)}
.facts-box dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 28px;margin:0}
.facts-box dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.facts-box dd{margin:0;color:var(--ink);font-size:15px;font-weight:500;line-height:1.5}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--edge);padding:56px 0 40px;margin-top:40px}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.foot-brand{max-width:300px}
.foot-brand p{color:var(--muted);font-size:14.5px;margin-top:14px}
.foot-col h2{font-family:var(--mono);font-size:11.5px;font-weight:500;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--edge);padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--faint);font-size:13.5px}
.foot-legal{display:flex;gap:18px}
.foot-legal a{color:var(--muted);transition:color .2s}
.foot-legal a:hover{color:var(--ink)}
/* legal pages (/privacy, /terms) */
.legal-updated{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--faint)}


/* ===== FORM ===== */
.form-card{max-width:560px;margin:32px auto 0;text-align:left}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;background:var(--surface);border:1px solid var(--edge-strong);border-radius:var(--r-md);
  padding:13px 15px;color:var(--ink);font-family:var(--body);font-size:15px;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background-color:var(--surface);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
/* Branded dropdowns: accent chevron, themed option list, muted placeholder */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B48D9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px;
}
.field select:required:invalid{color:var(--muted)}
.field select option{background:var(--surface);color:var(--ink)}
.field select option[value=""]{color:var(--muted)}
/* Mobile-first: fields stack, then pair up once there is room for two. */
.form-row{display:grid;gap:0}
@media(min-width:560px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.form-row .field{min-width:0}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(23,22,43,.5);display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex;animation:fadein var(--dur-base) var(--ease-out)}
.modal-inner{background:var(--surface);border:1px solid var(--edge-strong);border-radius:var(--r-lg);max-width:520px;width:100%;padding:40px 36px;position:relative;max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:0;border:1px solid var(--edge);background:transparent;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center;transition:.2s}
.modal-close:hover{background:var(--surface-2);border-color:var(--danger);color:var(--danger)}
.modal-inner h3{font-size:26px;margin-bottom:8px}
.modal-inner .sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.modal-success{text-align:center;padding:20px 0}
.modal-success .check{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);display:grid;place-items:center;margin:0 auto 18px;font-size:30px}
.modal-success .success-title{font-size:24px;margin-bottom:8px}
/* The check draws itself once on confirmation. Default state is the finished
   mark, so a failed script or reduced motion still shows a complete check. */
.modal-success .check svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.modal-success .check .check-mark{stroke-dasharray:26;stroke-dashoffset:0}
.modal-success.is-confirmed .check{animation:check-pop var(--dur-slow) var(--ease-out) both}
.modal-success.is-confirmed .check .check-mark{animation:check-draw var(--dur-focal) var(--ease-out) both}
.modal-success .check.is-pending{background:transparent;border-width:2px;border-color:var(--accent-border);border-top-color:var(--accent);animation:button-spin .8s linear infinite}
.modal-success .flow-success-action{justify-content:center;margin-top:var(--s-5)}
@keyframes check-draw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes check-pop{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}


@media(max-width:920px){
  .case,.case:nth-child(4n+2),.case:nth-child(4n+3){grid-column:span 6}
  .venture-list{grid-template-columns:1fr}
  .venture{grid-template-columns:minmax(0,.6fr) minmax(0,1fr)}
  .process-tab{padding-inline:12px}
  .process-panel{gap:36px}
  .about-leadership{gap:48px}
  .about-hero-grid,.about-story,.about-trust{gap:46px}
  .nav-right{display:none}
  .burger{display:flex}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:fixed;top:70px;left:0;right:0;max-height:calc(100dvh - 70px);overflow-y:auto;
    background:rgba(250,250,252,.98);
    padding:20px 24px 24px;border-bottom:1px solid var(--edge);
    transform:translateY(-130%);transition:transform var(--dur-slow) var(--ease-out);
  }
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu-links{display:flex;flex-direction:column;gap:6px}
  .nav-link-mobile{width:100%;padding:14px 16px;font-size:16px}
  /* services accordion inside the mobile menu */
  .nav-acc{display:flex;align-items:center;justify-content:space-between;background:none;border:0;cursor:pointer;text-align:left}
  .nav-acc .chev{width:14px;height:14px;margin-left:8px}
  .nav-acc.open .chev{transform:rotate(180deg)}
  .mobile-sub{display:none;flex-direction:column;padding-left:14px}
  .mobile-sub.open{display:flex;animation:flow-reveal var(--dur-base) var(--ease-out) both}
  .mobile-sub a{padding:11px 16px;font-size:15px;color:var(--muted);border-radius:var(--r-sm)}
  .mobile-sub a:hover{color:var(--ink);background:var(--surface-2)}
  /* desktop dropdown never renders inside the burger menu */
  .nav-dropdown{display:none}
  .mobile-menu-cta{margin-top:20px;padding-top:20px;border-top:1px solid var(--edge)}
  .mobile-menu-cta .btn{width:100%;justify-content:center}
}
@media(max-width:620px){
  /* Flagship cases become a native swipe rail on phones. The peek of the next
     card communicates horizontal scrolling without adding JS or autoplay. */
  .case-grid{display:flex;gap:16px;overflow-x:auto;padding:2px 24px 8px;margin-inline:-24px;scroll-snap-type:x mandatory;scroll-padding-inline:24px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .case-grid::-webkit-scrollbar{display:none}
  .case,.case:nth-child(4n+2),.case:nth-child(4n+3){flex:0 0 calc(100% - 54px);min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
  .case-carousel-dots{display:flex;align-items:center;justify-content:center;gap:0;margin-top:8px}
  .case-carousel-dot{position:relative;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
  .case-carousel-dot::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border:1px solid var(--edge-strong);border-radius:50%;background:var(--surface);transform:translate(-50%,-50%);transition:background .2s,border-color .2s,transform .2s}
  .case-carousel-dot.is-active::before{background:var(--accent-strong);border-color:var(--accent-strong);transform:translate(-50%,-50%) scale(1.15)}
  .case-carousel-dot:hover::before{border-color:var(--accent)}
  .case-carousel-dot:focus-visible{outline-offset:3px}
  .case-action{width:100%;justify-content:center}
  .case-grid{align-items:flex-start}
  /* two ventures stack instead of forming a second dot-less rail */
  .venture-grid{display:grid;grid-template-columns:1fr;gap:32px;overflow:visible;padding:0;margin-inline:0}
  .venture-grid .case{min-width:0}
  .work-founder-btn{width:100%;justify-content:center}
  .venture{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--s-4)}
  .venture-list-wide .venture{grid-template-columns:1fr;gap:var(--s-4)}
  .venture-list-wide .venture p{font-size:16px}
  .venture-list-wide .venture .btn{width:100%;justify-content:center}
  .venture .sector{white-space:normal}
  /* keeps the off-screen rail cards from widening the document */
  .work-group{contain:paint}
  .work-group-head{margin-bottom:var(--s-6)}
  .sec-head-split{flex-direction:column;align-items:flex-start;gap:14px}
  .process-tabs{padding:6px}
  .process-tab{flex-basis:auto;min-height:44px;font-size:12.5px;padding-inline:13px}
  .process-panels{padding:30px 24px}
  .process-panel{grid-template-columns:1fr;min-height:0;gap:28px;text-align:left}
  .process-panel-copy{margin:0}
  .process-panel-copy p{font-size:15.5px}
  .process-visual{width:min(100%,390px);margin:0 auto}
  .process-rail{margin-inline:20px}
  .about-leadership,.about-hero-grid,.about-story,.about-trust{grid-template-columns:1fr;gap:28px}
  .about-leadership .leadership-portrait{max-width:390px;margin:0 auto}
  .about-hero{padding-top:116px}
  .about-hero h1{font-size:clamp(42px,12vw,60px)}
  .about-hero-summary{max-width:520px}
  .about-story h2,.about-leadership h2,.about-trust h2,.about-cta h2,.leader-contact-band h2{font-size:clamp(32px,9vw,46px)}
  .hero{padding:120px 0 56px}
  .stats-row{gap:28px}
}
/* ===== MULTI-STEP FLOWS (booking + checkout) ===== */
.modal-inner.wide{max-width:620px}
.flow-steps{display:flex;align-items:center;gap:8px;margin-bottom:22px}
.flow-steps .dot{flex:1;height:4px;border-radius:0;background:var(--edge);transition:background .3s}
.flow-steps .dot.active{background:var(--accent)}
.flow-steps .dot.done{background:var(--accent-dim)}
.flow-step{display:none}
.flow-step.active{display:block;animation:fadein var(--dur-slow) var(--ease-out) both}
.flow-step.no-anim{animation:none}
.flow-title{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-0.01em;margin-bottom:4px}
.flow-sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.flow-nav{display:flex;gap:12px;margin-top:22px}
.flow-nav .btn{flex:1;justify-content:center;height:44px;font-size:14.5px}
.btn-sm{height:38px;padding:0 18px;font-size:13.5px}
.btn-lg{height:50px;padding:0 30px;font-size:14.5px}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-head .mname{font-family:var(--display);font-weight:600;font-size:16px}
.cal-nav{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--edge);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.2s}
.cal-nav:hover:not(:disabled){background:var(--surface-2);border-color:var(--edge-strong)}
.cal-nav:disabled{opacity:.35;cursor:not-allowed}
.cal-nav svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-grid .wd{text-align:center;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:4px 0}
.cal-day{aspect-ratio:1;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-family:var(--body);font-size:14px;cursor:pointer;transition:.18s;position:relative}
.cal-day:hover:not(:disabled){border-color:var(--accent);background:var(--accent-soft)}
.cal-day.empty{border:0;background:none;cursor:default}
.cal-day:disabled:not(.empty){opacity:.3;cursor:not-allowed}
.cal-day.weekend:not(:disabled){border-color:rgba(196,61,61,.45)}
.cal-day.weekend:not(:disabled)::after{content:"$";position:absolute;top:3px;right:5px;font-size:9px;color:var(--danger);font-weight:700}
.cal-day.selected{background:var(--accent-strong);color:var(--on-dark);border-color:var(--accent-strong);font-weight:600}
.cal-legend{display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend .sw{width:10px;height:10px;border-radius:0;border:1px solid var(--edge-strong)}
.cal-legend .sw.paid{border-color:rgba(196,61,61,.5)}

/* consultation time picker */
.time-picker{width:100%;max-width:460px;margin:0 auto}
.time-picker-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.time-picker-field{min-width:0}
.time-picker-field label{display:block;margin:0 0 7px;font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink)}
.time-picker-field select{width:100%;min-width:0;min-height:44px;padding:10px 34px 10px 12px;border:1px solid var(--edge-strong);border-radius:var(--r-sm);background-color:var(--surface);color:var(--ink);font-family:var(--body);font-size:15px;cursor:pointer}
.time-picker-field select:hover:not(:disabled){border-color:var(--accent)}
.time-picker-field select:disabled{opacity:.55;cursor:not-allowed;background-color:var(--surface-2)}
.time-picker-field select option:disabled{color:var(--faint)}
.time-picker-summary{min-height:20px;margin:11px 0 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}
.flow-note{margin-top:14px;font-size:13px;color:var(--muted);background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r-sm);padding:11px 13px}

/* inline validation + API error messaging (replaces blocking alert()s) */
.flow-error{margin-bottom:16px;font-size:13.5px;color:var(--danger);background:var(--danger-soft);border:1px solid var(--danger-border);border-radius:var(--r-sm);padding:11px 13px}
.flow-error[hidden]{display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger)}
.field.invalid input:focus,.field.invalid select:focus,.field.invalid textarea:focus{border-color:var(--danger);box-shadow:0 0 0 3px rgba(196,61,61,.15)}
.field-error{color:var(--danger);font-size:12.5px;line-height:1.4;margin-top:6px}
.field-hint{color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:6px}
/* modals move focus to the dialog container on open; the container itself
   needs no visible ring (interactive children keep the global ring) */
.modal-inner{outline:none}

/* order / pricing summary (checkout) */
.summary{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-md);padding:18px 20px;margin-top:6px}
.summary .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;font-size:14.5px;color:var(--muted)}
.summary .row.total{border-top:1px solid var(--edge);margin-top:6px;padding-top:13px;color:var(--ink);font-family:var(--display);font-weight:600;font-size:18px}
.summary .row.recurring{border-top:1px dashed var(--edge);margin-top:6px;padding-top:11px;color:var(--ink);font-size:13.5px;font-weight:600}
.summary .row .disc{color:var(--good)}
.summary .row strong{color:var(--ink);font-weight:600}
.feat-list{list-style:none;margin:10px 0 0;padding:0}
.feat-list li{position:relative;padding:6px 0 6px 26px;color:var(--muted);font-size:14px}
.feat-list li::before{content:"\2713";position:absolute;left:0;top:6px;color:var(--accent);font-weight:700}
.flow-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);padding:6px 12px;border-radius:var(--r-sm);margin-bottom:14px}
.flow-nav .btn:disabled{cursor:not-allowed;opacity:.52;transform:none}


/* small utilities used by JS-rendered templates */
.link-accent{color:var(--accent)}
.link-accent:hover{color:var(--ink)}
.label-opt{color:var(--muted);font-weight:400}
.meta-line{color:var(--muted);font-size:14px}
.meta-line strong{color:var(--ink)}
.back-link{display:inline-block;margin-bottom:18px;color:var(--accent)}
.back-link:hover{color:var(--ink)}
.mini-label{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:14px 0 2px}
.svc-detail .lede strong{color:var(--ink)}

@media(max-width:620px){
  .time-picker{max-width:none}
  .time-picker-fields{gap:8px}
  .time-picker-field select{padding-inline:10px 28px;font-size:14px}
  .flow-nav{flex-direction:column-reverse}
  /* Mobile onboarding actions need a consistent, thumb-friendly target.
     Back is rendered with .btn-sm in the flow markup, so override that
     compact variant only inside the stacked mobile navigation. */
  .flow-nav .btn,.flow-nav .btn-sm{width:100%;min-height:44px;height:44px}
}

@media(prefers-reduced-motion:reduce){
  .btn-primary::after,.hero-btn-primary::after{display:none}
  .hero-actions{opacity:1;transform:none}
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}

/* ===== MOBILE REFINEMENTS (responsive pass) ===== */
@media(max-width:560px){
  /* stacked name fields in checkout / booking forms */
  .sec-head{margin-bottom:36px}
  .svc-detail .lede{font-size:15px}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .case-grid{padding-inline:18px;margin-inline:-18px;scroll-padding-inline:18px}
  .venture-grid{padding-inline:0;margin-inline:0}
  /* modals reclaim horizontal space on small screens */
  .modal{padding:16px}
  .modal-inner{padding:30px 22px}
  /* hero actions: full-width, easy-to-tap buttons */
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  /* tier price scales down so the struck + sale price never crowds */
  .tier .tier-price{font-size:26px}
  .process-panels{padding:26px 18px}
  .process-panel-copy h3{font-size:30px}
}

/* ===== SERVICES SYSTEM: OVERVIEW ===== */
.services-page main{background:var(--bg)}
.services-kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:14px}

.services-catalog-section{padding:calc(var(--nav-h) + var(--section-y)) 0 var(--section-y);background:var(--bg)}
/* Each service is a full-width editorial band: what it is on the left, what a
   buyer weighs on the right. No illustration column, so every band shares one
   left edge and the headline gets the width it deserves. Rules sit only between
   bands, never above the first or below the last. */
.service-overview-card{scroll-margin-top:calc(var(--nav-h) + var(--s-6));display:grid;grid-template-columns:1fr;gap:var(--s-7);padding:var(--s-9) 0;border-top:1px solid var(--edge-strong)}
.service-overview-card:first-child{border-top:0;padding-top:0}
.service-overview-card:last-child{padding-bottom:0}
.service-overview-body,.service-overview-detail{min-width:0}
.service-overview-name{max-width:18ch;color:var(--accent-strong);font-size:clamp(30px,7vw,46px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.service-overview-tagline{max-width:44ch;margin-top:14px;color:var(--ink);font-size:clamp(16px,2.2vw,19px);font-weight:700;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.service-overview-value{max-width:54ch;margin-top:var(--s-4);color:var(--muted);font-size:16px;line-height:1.6;text-wrap:pretty}
.service-overview-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-block:17px;border-block:1px solid var(--edge)}
.service-overview-meta dt,.service-overview-inclusions>p{color:var(--faint);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.service-overview-meta dd{margin-top:5px;font-size:clamp(18px,3vw,23px);font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums}
.service-overview-inclusions{margin-top:20px}
.service-overview-inclusions ul{display:grid;grid-template-columns:1fr;list-style:none;margin-top:8px}
.service-overview-inclusions li{padding:8px 0;border-top:1px solid var(--edge);color:var(--ink);font-size:14px;line-height:1.4}
.service-overview-action{width:max-content;max-width:100%;margin-top:22px}
.service-overview-action span,.services-text-link span{transition:transform .2s ease}
.services-text-link{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;min-height:44px;margin-top:22px;color:var(--ink);font-family:var(--display);font-size:14px;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.services-noscript,.services-empty{padding:24px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--muted)}
.services-empty h3{color:var(--ink);font-size:24px}
.services-empty p{max-width:58ch;margin:10px 0 20px;line-height:1.55}
.services-noscript a{color:var(--accent-strong);text-decoration:underline}

/* ===== RECOMMENDER =====
   The "Not sure which service fits?" inquiry band that closes every page
   (js/components.js builds it into a [data-recommender] mount). It is an inset
   panel, not a full-bleed band, so the page resolves back to --bg before the
   footer instead of butting accent into it.

   The panel and its contents are deliberately separate. .recommender-panel is
   the mount and is painted by CSS alone, so the ground and padding exist even
   if no script runs; the mount ships with .recommender-fallback copy inside it
   that the script replaces with .recommender, the real form. A stale cache or a
   failed script therefore degrades to a working contact prompt, never to an
   empty band. */
/* Mobile-first and single column at every width. There is no second column to
   collapse, no panel inset to eat a 375px screen, and no ground of its own: the
   form reads as the page's closing question, ruled off rather than boxed in.
   Because it sits on --bg, the site's base .field and .btn styles apply as-is. */
.services-recommend-section{padding:var(--section-y) 0;background:var(--bg)}
/* Founder strip: names the person behind the closing form, so the page's
   last question is asked by someone, not by "us". */
/* Direct line under the closing form, for visitors who would rather not fill one in. */
.recommender-panel{padding-top:var(--s-8);border-top:1px solid var(--edge-strong)}
.recommender-panel h2{font-size:clamp(29px,7vw,44px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.recommender-fallback p,.recommender-copy p{max-width:52ch;margin-top:var(--s-3);color:var(--muted);font-size:16px;line-height:1.6;text-wrap:pretty}
.contact-direct{display:flex;gap:var(--s-3);margin-top:var(--s-6)}
.contact-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--accent-strong);transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.contact-icon:hover,.contact-icon:focus-visible{border-color:var(--accent-strong);color:var(--accent-deeper)}
.contact-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.recommender-fallback-actions{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);margin-top:var(--s-4)}
.recommender-fallback-actions .btn{margin-top:0}
.recommender{display:grid;gap:var(--s-6);max-width:640px}
.recommender-form{min-width:0}
/* The consultation route is offered after a submission, not beside the form:
   the form is the primary action, and an alternative offered first is an exit
   offered first. Once the question is in, booking the call is the next step. */
.recommender-next{padding:var(--s-6);border:1px solid var(--accent-border);background:var(--accent-soft);animation:flow-reveal var(--dur-slow) var(--ease-out) both}
.recommender-next-title{color:var(--accent-strong);font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25}
.recommender-next-sub{max-width:52ch;margin-top:var(--s-2);color:var(--muted);font-size:15.5px;line-height:1.6}
.recommender-next .btn{margin-top:var(--s-5)}
.recommender-reset{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s-2);padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.recommender-reset:hover{color:var(--ink)}
.recommender-form[hidden],.recommender-next[hidden]{display:none}
.recommender-next:focus{outline:none}
.recommender .field{margin-bottom:var(--s-4)}
/* 16px floor: anything smaller makes iOS Safari zoom the viewport on focus. */
.recommender .field input,.recommender .field textarea{font-size:16px}
.recommender .field textarea{min-height:124px}
.recommender-panel .btn-primary{width:100%}
.recommender-privacy{max-width:54ch;margin-top:var(--s-4);color:var(--muted);font-size:12.5px;line-height:1.5}
.recommender-privacy a,.flow-privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.recommender-privacy a:hover,.flow-privacy a:hover{color:var(--accent-strong)}
.flow-privacy{max-width:56ch;margin-top:14px;color:var(--muted);font-size:12.5px;line-height:1.5}
@media(min-width:560px){
  .recommender-panel .btn-primary{width:auto;min-width:220px}
}

/* Service recommender (services/#recommend) */
.ai-result{display:none;margin-top:var(--s-4)}
.ai-result.show{display:block;animation:flow-reveal var(--dur-slow) var(--ease-out) both}
@keyframes flow-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ai-result h4{margin-bottom:9px;color:var(--faint);font-family:var(--display);font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.ai-result .rec{padding:17px 19px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--ink);font-size:15px;line-height:1.6}
.ai-result .rec strong{font-family:var(--display);font-size:17.5px;font-weight:700}
.ai-result .view-svc{display:inline-block;margin-top:6px;color:var(--accent-strong);font-family:var(--display);font-weight:650;font-size:14.5px}
.ai-result .view-svc:hover{text-decoration:underline;text-underline-offset:4px}

/* ===== SERVICES SYSTEM: DETAIL ===== */
.service-detail-page{padding:calc(var(--nav-h) + var(--gutter)) 0 var(--section-y);background:var(--bg)}
.service-return{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;margin-bottom:var(--s-5);color:var(--ink);font-family:var(--display);font-size:14px;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px}
.detail-section{scroll-margin-top:calc(var(--nav-h) + var(--s-6));margin-top:var(--section-y)}
.detail-section-heading{max-width:740px;margin-bottom:var(--s-7)}
.detail-section-heading h2{font-size:clamp(34px,7vw,50px);line-height:1;letter-spacing:-.04em}
.detail-section-heading p{max-width:660px;margin-top:14px;color:var(--muted);font-size:16px;line-height:1.65;text-wrap:pretty}
.service-pricing-first{margin-top:var(--s-5)}
.service-pricing-heading{max-width:860px}
.service-page-name{margin-bottom:var(--s-3);color:var(--accent-strong);font-family:var(--display);font-size:15px;font-weight:700}
.service-pricing-heading h1{max-width:820px;font-size:clamp(40px,7vw,68px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.service-pricing-heading>p:last-child{max-width:680px;margin-top:var(--s-4);color:var(--muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.service-scope-grid{display:grid;grid-template-columns:1fr;border-block:1px solid var(--edge-strong);border-top-width:2px;border-top-color:var(--ink)}
.service-scope-grid>div{padding:var(--s-7) 0}
.service-scope-grid>div+div{border-top:1px solid var(--edge-strong)}
.detail-section .service-scope-grid h3{margin:0 0 var(--s-4);color:var(--accent-strong);font-family:var(--mono);font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.service-outcome-list,.service-inclusion-list{list-style:none}
.service-outcome-list li,.service-inclusion-list li{display:grid;grid-template-columns:11px 1fr;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--edge)}
.service-outcome-list li:first-child,.service-inclusion-list li:first-child{border-top:0}
.service-outcome-list li>span,.service-inclusion-list li>span{width:7px;height:7px;margin-top:8px;background:var(--accent)}
.service-outcome-list p,.service-inclusion-list p{color:var(--ink);font-size:15.5px;line-height:1.5}

.service-pricing .tier-comparison{display:none}
.tier-mobile-selector{display:block}
.tier-tabs-wrap{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.tier-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);flex:1 1 auto;gap:4px;min-height:52px;padding:4px;border:1px solid var(--edge-strong);background:var(--surface-2);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tier-tabs::-webkit-scrollbar{display:none}
.tier-tab{display:flex;min-width:0;min-height:44px;align-items:center;justify-content:center;border:0;background:transparent;padding:9px 13px;color:var(--muted);font-family:var(--display);font-size:13.5px;font-weight:600;line-height:1.25;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s,transform .12s}
.tier-tab:hover{background:var(--surface);color:var(--ink)}
.tier-tab:active{transform:translateY(1px)}
.tier-tab.active,.tier-tab.active:hover{background:var(--accent-strong);color:var(--on-dark)}
.tier-tab:focus-visible{outline-offset:-2px}
.tabs-arrow{display:none;flex:0 0 auto;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--edge-strong);background:var(--surface);color:var(--muted);cursor:pointer}
.tabs-arrow.show{display:inline-flex}
.tabs-arrow:hover{border-color:var(--accent);color:var(--ink)}
.tabs-arrow:active{transform:translateY(1px)}
.tabs-arrow svg{width:16px;height:16px}
.tier-panel{max-width:none}
.tier{position:relative;display:flex;min-height:100%;flex-direction:column;padding:24px 20px;border:1px solid var(--edge-strong);background:var(--surface)}
.tier-popular{box-shadow:inset 0 4px 0 var(--accent-strong)}
.tier-selected{border-color:var(--accent-strong)}
.tier-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tier .tier-name{margin:0;color:var(--ink);font-family:var(--display);font-size:19px;font-weight:700;line-height:1.25}
.tier-badge{flex:0 0 auto;padding:4px 9px;background:var(--accent-strong);color:var(--on-dark);font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tier .tier-summary{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.55}
.tier .tier-price{margin-top:20px;color:var(--ink);font-family:var(--display);font-size:32px;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums}
.tier .tier-price small{color:var(--muted);font-size:13px;font-weight:500}
.tier .tier-was-line{margin-top:4px;color:var(--faint);font-size:12px}
.tier .tier-time{margin-top:6px;color:var(--faint);font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
.tier .tier-addons{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}
.tier .tier-feat-label{margin-top:22px;color:var(--faint);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tier .tier-feats{flex:1 1 auto;list-style:none;margin-top:10px}
.tier .tier-feats li{display:flex;align-items:flex-start;gap:9px;padding:5px 0;color:var(--ink);font-size:13.5px;line-height:1.45}
.tier .tier-feats svg{width:14px;height:14px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
.tier .tier-cta{width:100%;min-height:48px;height:auto;margin-top:20px;padding:12px 14px;white-space:normal;line-height:1.2}
.tier .tier-cta:disabled,.tier .tier-cta[aria-disabled="true"]{border-color:var(--edge-strong);background:var(--surface-2);color:var(--faint);cursor:not-allowed;box-shadow:none;transform:none}
.tier .tier-cta.is-loading{background:var(--ink);color:var(--on-dark)}
.tier .tier-price-block{display:block}
/* Every card exposes the same six rows (head, summary, price block, feature
   label, features, CTA). Subgrid gives those rows one shared height across the
   comparison grid, so prices and buttons sit on the same line no matter how
   long a tier summary runs. Browsers without subgrid keep the flex column. */
@supports (grid-template-rows: subgrid){
  .service-pricing .tier-comparison{grid-template-rows:auto auto auto auto 1fr auto}
  .service-pricing .tier-comparison .tier{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
}

.service-faq-section{display:grid;grid-template-columns:1fr;gap:2px}
.faq-list{border-top:1px solid var(--edge-strong)}
.faq{margin:0;border-bottom:1px solid var(--edge)}
.faq summary{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:14px;padding:17px 4px;color:var(--ink);font-family:var(--display);font-size:16px;font-weight:600;line-height:1.4;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--edge-strong);color:var(--accent);font-size:18px}
.faq[open] summary::after{content:"\2013"}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq p{max-width:70ch;margin:0;padding:0 48px 22px 4px;color:var(--muted);font-size:15px;line-height:1.65}
.service-consult-only{padding:var(--gutter);background:var(--ink);color:var(--on-dark)}
.service-consult-only h1{font-size:clamp(36px,7vw,56px);line-height:1;letter-spacing:-.04em}
.service-consult-only p{max-width:600px;margin:12px 0 22px;color:var(--on-dark-body)}
.service-not-found{max-width:760px;padding:clamp(30px,7vw,64px);border:1px solid var(--edge-strong);background:var(--surface)}
.service-not-found h1{font-size:clamp(34px,8vw,56px);letter-spacing:-.035em}
.service-not-found>p:not(.services-kicker){max-width:590px;margin-top:18px;color:var(--muted);font-size:17px;line-height:1.6}
.service-not-found-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

@media(min-width:621px){
  .service-overview-card{grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);gap:clamp(34px,6vw,70px);padding:var(--s-11) 0}
  .service-overview-inclusions ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .service-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-scope-grid>div{padding:var(--s-7) var(--s-7) var(--s-7) 0}
  .service-scope-grid>div+div{padding-left:var(--s-7);padding-right:0;border-top:0;border-left:1px solid var(--edge-strong)}
  .service-pricing .tier-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
  .service-pricing .tier-comparison.tiers-count-5{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .service-pricing .tier-mobile-selector{display:none}
}

@media(min-width:921px){
  .service-overview-card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(34px,4vw,58px);padding:var(--s-12) 0}
  .service-overview-detail{padding-left:var(--gutter);border-left:1px solid var(--edge)}
  .service-overview-action{max-width:none}
  .service-pricing .tier-comparison{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .service-pricing .tier-comparison.tiers-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-pricing .tier-comparison.tiers-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 5 tiers stay on one row: aligned columns are what makes a price grid comparable */
  .service-pricing .tier-comparison.tiers-count-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .tier-comparison.tiers-count-5 .tier{padding:var(--s-5) var(--s-3)}
  .tier-comparison.tiers-count-5 .tier-name{font-size:17px}
  .tier-comparison.tiers-count-5 .tier-price{font-size:26px}
  .tier-comparison .tier-head{flex-direction:column;gap:8px}
  .tier-comparison .tier-badge{align-self:flex-start}
  .service-faq-section{grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:clamp(40px,8vw,100px);align-items:start}
  .service-faq-section .detail-section-heading{position:sticky;top:calc(var(--nav-h) + var(--s-7));margin-bottom:0}
}

@media(max-width:620px){
  .home-service-all,.service-overview-action{width:100%}
  .service-not-found-actions{flex-direction:column;align-items:stretch}
  .service-not-found-actions .btn{width:100%}
  .service-detail-page{padding-top:98px}
  .service-pricing-heading h1{font-size:clamp(38px,12vw,54px)}
  .foot-col a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
  .modal-close,.cal-nav{width:44px;height:44px}
}

@media(max-width:920px){
  .burger{width:44px;height:44px;align-items:center;justify-content:center;padding:0}
  .nav-acc-row{display:flex;align-items:stretch}
  .nav-acc-row .nav-link-mobile{flex:1 1 auto}
  .nav-acc{display:grid;width:48px;min-height:48px;place-items:center;border:0;background:transparent;color:var(--muted);cursor:pointer}
  .nav-acc:hover{background:var(--surface-2);color:var(--ink)}
  .nav-acc .chev{width:16px;height:16px;margin:0;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s}
  .mobile-sub .mobile-sub-all{color:var(--accent-strong);font-weight:700}
}

@media (hover:hover){
  .services-text-link:hover{color:var(--accent-strong)}
  .service-overview-action:hover span,.service-overview-action:focus-visible span{transform:translateX(4px)}
  .services-text-link:hover span,.services-text-link:focus-visible span{transform:translateX(4px)}
}

@media(prefers-reduced-transparency:reduce){
  .nav,.nav.scrolled,.mobile-menu{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Private CRM and client portal, using the shared site tokens. */
.crm{font-size:15px}
.crm button,.crm input,.crm select,.crm textarea{font:inherit;border:1px solid var(--edge-strong);border-radius:0;color:var(--ink);background:var(--surface);padding:10px 12px;max-width:100%}
.crm button{cursor:pointer;min-height:44px;line-height:1.3;font-weight:500}
.crm button:hover{background:var(--surface-2)}
.crm button:disabled{cursor:wait;opacity:.55}
.crm .crm-primary{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.crm .crm-primary:hover{background:var(--accent-strong)}
.crm :is(button,a,input,textarea,select):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.crm label{display:grid;gap:var(--s-2);font-weight:500;min-width:0}
.crm form{display:grid;gap:var(--s-4)}
.crm h1{font-size:clamp(28px,3vw,40px);line-height:1.15}
.crm h2{font-size:22px;margin:var(--s-6) 0 var(--s-4)}
.crm h3{font-size:17px;margin-bottom:var(--s-3)}
.crm p{margin-bottom:var(--s-3)}
.crm a:not(.brand){text-decoration:underline;text-underline-offset:4px}
.crm-muted{color:var(--muted)}
.crm-auth{max-width:520px;margin:clamp(32px,9vh,100px) auto;padding:var(--s-6)}
.crm-auth .brand{margin-bottom:var(--s-9)}
.crm-auth h1{margin-bottom:var(--s-5)}
.crm-auth form{margin-top:var(--s-6)}
.crm-auth-links{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.crm-auth-links button{border:0;padding-left:0;text-decoration:underline;color:var(--accent-strong)}
.crm-shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}
.crm-sidebar{position:sticky;top:0;height:100vh;background:var(--bg-raised);border-right:1px solid var(--edge);padding:var(--s-7) var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.crm-sidebar nav{display:grid;gap:var(--s-1);margin-top:var(--s-5)}
.crm-sidebar nav button{border:0;background:transparent;text-align:left}
.crm-sidebar nav [aria-current=page]{background:var(--surface-2);color:var(--accent-strong);font-weight:700}
.crm-account{margin-top:auto;display:grid;gap:var(--s-3);overflow-wrap:anywhere;font-size:13px}
.crm-main{min-width:0;padding:var(--s-8);max-width:1600px;width:100%;margin:0 auto}
.crm-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-5);margin-bottom:var(--s-7)}
.crm-heading p{margin-top:var(--s-3)}
.crm-actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.crm-toolbar{display:flex!important;gap:var(--s-3);align-items:flex-end;flex-wrap:wrap;margin:var(--s-5) 0}
.crm-toolbar label{min-width:160px;flex:1;max-width:360px}
.crm-table-wrap{overflow:auto;border:1px solid var(--edge);background:var(--surface)}
.crm table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.crm th{background:var(--bg-raised);font-weight:500;color:var(--muted);white-space:nowrap}
.crm :is(td,th){padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--edge);vertical-align:top}
.crm td{overflow-wrap:anywhere;min-width:100px;max-width:360px}
.crm td button{border:0;padding:4px 0;color:var(--accent-strong);text-align:left;background:transparent}
.crm-badge{display:inline-block;padding:4px 8px;background:var(--surface-2);color:var(--muted);font-size:12px;white-space:nowrap;margin:2px}
.crm-pagination{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-5) 0}
.crm-stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--edge);margin-bottom:var(--s-8)}
.crm-stats>div{padding:var(--s-5) var(--s-3);display:grid;gap:var(--s-1);color:var(--muted)}
.crm-stats strong{font:500 36px var(--display);color:var(--ink)}
.crm-list{list-style:none;margin:var(--s-4) 0 var(--s-7)}
.crm-list-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--edge)}
.crm-list-row>button:first-child{border:0;padding-left:0;text-align:left;background:transparent;flex:1;color:var(--accent-strong)}
.crm-empty{padding:var(--s-7) 0;color:var(--muted)}
.crm-tabs{display:flex;gap:var(--s-2);overflow:auto;border-bottom:1px solid var(--edge);margin-bottom:var(--s-6);padding-bottom:var(--s-2)}
.crm-tabs button{border:0;white-space:nowrap;background:transparent;flex-shrink:0}
.crm-tabs [aria-current=page]{box-shadow:inset 0 -3px var(--accent);color:var(--accent-strong)}
.crm-project-overview{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-8);border-bottom:1px solid var(--edge);padding-bottom:var(--s-6)}
.crm-prose{white-space:pre-wrap;overflow-wrap:anywhere;max-width:75ch}
.crm progress{width:100%;accent-color:var(--accent);height:10px}
.crm-roadmap{padding-left:var(--s-6);margin-top:var(--s-6)}
.crm-roadmap li{padding:var(--s-4);border-bottom:1px solid var(--edge)}
.crm-roadmap button{border:0;padding-left:0;font-size:19px}
.crm-board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));overflow:auto;gap:var(--s-4);padding-bottom:var(--s-5)}
.crm-column{background:var(--bg-raised);padding:var(--s-3);min-height:240px}
.crm-column h2{font-size:15px;margin:var(--s-2) 0 var(--s-5)}
.crm-column article{background:var(--surface);border:1px solid var(--edge);padding:var(--s-3);margin-bottom:var(--s-3)}
.crm-column article>button{border:0;text-align:left;padding:0;background:transparent}
.crm-column p,.crm-column label{font-size:12px;margin-top:var(--s-3)}
.crm-column select{font-size:13px;width:100%}
.crm-update,.crm-comment{padding:var(--s-5) 0;border-bottom:1px solid var(--edge)}
.crm-comment-form{max-width:700px;margin-top:var(--s-5)}
.crm-session{padding:var(--s-5) 0;border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;gap:var(--s-4)}
.crm-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid var(--edge);border-top:1px solid var(--edge)}
.crm-calendar section{min-height:140px;padding:var(--s-2);border-right:1px solid var(--edge);border-bottom:1px solid var(--edge)}

.crm-check{display:flex!important;align-items:center;gap:var(--s-3)!important}
.crm-check input{width:20px;height:20px;accent-color:var(--accent)}
.crm-upload{margin:var(--s-5) 0;max-width:460px}
.crm dialog{position:fixed;inset:0 0 0 auto;width:min(620px,100%);max-width:100%;height:100%;max-height:100%;border:0;border-left:1px solid var(--edge);padding:var(--s-7);background:var(--bg);color:var(--ink);overflow:auto}
.crm dialog::backdrop{background:rgba(23,22,43,.35)}
.crm dialog>header{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.crm dialog h2{margin:0}.crm dialog form{margin-bottom:var(--s-6)}
.crm-answers{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.7 var(--mono);padding:var(--s-4);background:var(--bg-raised)}
.crm-toast:not(:empty){position:fixed;bottom:var(--s-4);left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:var(--s-3) var(--s-5);background:var(--ink);color:var(--surface);z-index:200;box-shadow:var(--shadow-2)}
.crm [role=alert],.crm .error{color:var(--danger)}
.crm-skip{position:fixed;top:-100px;left:16px;background:var(--surface);padding:16px;z-index:300}.crm-skip:focus{top:16px}
.portal-invite{margin-top:var(--s-5);padding:var(--s-4);background:var(--bg-raised);color:var(--ink);text-align:center}.portal-invite a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}
@media(max-width:920px){.crm-shell{grid-template-columns:180px minmax(0,1fr)}.crm-sidebar{padding:var(--s-5) var(--s-3)}.crm-main{padding:var(--s-6)}.crm-heading{flex-direction:column}.crm-stats{grid-template-columns:repeat(2,1fr)}.crm-project-overview{grid-template-columns:1fr}}
@media(max-width:620px){.crm-shell{display:block}.crm-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--edge);padding:var(--s-4)}.crm-sidebar>p{display:none}.crm-sidebar nav{display:flex;overflow:auto;margin:0;gap:0}.crm-sidebar nav button{white-space:nowrap}.crm-account{display:flex;justify-content:space-between;align-items:center}.crm-account span{max-width:70%}.crm-main{padding:var(--s-5)}.crm-session{flex-direction:column}.crm-list-row{flex-wrap:wrap}.crm-list-row>button:first-child{flex-basis:60%}.crm-pagination{font-size:12px}.crm dialog{padding:var(--s-5)}}
@media(max-width:480px){.crm-main{padding:var(--s-4)}.crm-stats strong{font-size:30px}.crm-toolbar label{min-width:100%}.crm-heading .crm-actions{width:100%}.crm-heading .crm-actions button{flex:1}.crm-auth{padding:var(--s-5)}}

/* CRM workspace: client-led work lists and a month-first calendar. */
.crm{background:var(--bg);font-size:14px;line-height:1.55}
.crm h1{font-size:30px;font-weight:600;letter-spacing:-.035em}
.crm h2{font-size:18px;font-weight:600;letter-spacing:-.02em}
.crm h3{font-size:15px;font-weight:600}
.crm-shell{grid-template-columns:208px minmax(0,1fr)}
.crm-sidebar{background:var(--surface);padding:var(--s-7) var(--s-4)}
.crm-sidebar .brand{font-size:23px;letter-spacing:-.06em}
.crm-sidebar>p{font-size:12px;margin-bottom:var(--s-6)}
.crm-sidebar nav{gap:var(--s-2)}
.crm-sidebar nav button{padding:var(--s-3) var(--s-4);color:var(--muted)}
.crm-sidebar nav [aria-current=page]{background:var(--accent-soft);color:var(--accent-strong)}
.crm-account{border-top:1px solid var(--edge);padding-top:var(--s-4);font-size:12px}
.crm-account button{background:transparent;text-align:left;border:0;padding-left:0;color:var(--muted)}
.crm-main{padding:var(--s-8);max-width:1600px}
.crm-heading{align-items:center;margin-bottom:var(--s-7);padding-bottom:var(--s-6);border-bottom:1px solid var(--edge)}
.crm-heading p{margin:var(--s-2) 0 0;font-size:14px}
.crm-dashboard{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:var(--s-8)}
.crm-dashboard>*,.crm-calendar-layout>*{min-width:0}
.crm-section-title{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4)}
.crm-section-title h2{margin:0}.crm-section-title>span{font-size:12px}
.crm-work>.crm-section-title:not(:first-child){margin-top:var(--s-8)}
.crm-project-list{list-style:none;padding:0;margin:0;background:var(--surface);border:1px solid var(--edge)}
.crm-project-list>li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-5);border-bottom:1px solid var(--edge)}
.crm-project-list>li:last-child{border-bottom:0}
.crm-project-identity{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.crm-project-identity>div{min-width:0}
.crm .crm-project-identity button{display:block;border:0;background:transparent;padding:0;min-height:0;text-align:left;font-size:16px;font-weight:600;overflow-wrap:anywhere}
.crm-project-identity button:hover{color:var(--accent-strong)}
.crm-project-identity p{font-size:13px;margin:var(--s-1) 0 0}
.crm-avatar{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;background:var(--surface-2);color:var(--accent-strong);font-weight:600}
.crm-project-meta{display:grid;justify-items:end;gap:var(--s-2);font-size:12px;flex-shrink:0}
.crm-badge{margin:0;padding:var(--s-1) var(--s-2);font-size:12px;font-weight:500;line-height:1.5}
.crm-badge[data-state="In progress"],.crm-badge[data-state="confirmed"]{background:var(--accent-soft);color:var(--accent-strong)}
.crm-badge[data-state="Done"],.crm-badge[data-state="Completed"]{color:var(--good)}
.crm-badge[data-state="Overdue"],.crm-badge[data-state="failed"]{color:var(--danger);background:var(--danger-soft)}
.crm-upcoming,.crm-project-summary{padding-left:var(--s-7);border-left:1px solid var(--edge)}
.crm-upcoming .crm-list,.crm-project-summary .crm-list{margin:0}
.crm-upcoming .crm-session,.crm-project-summary .crm-session{display:block;padding:var(--s-5) 0}
.crm-upcoming .crm-session:first-child{padding-top:var(--s-2)}
.crm-session strong{font-size:16px;font-weight:600}
.crm-session p{margin:var(--s-1) 0;font-size:13px}
.crm-session .crm-actions{margin-top:var(--s-3)}
.crm-session .crm-muted{font-size:12px}
.crm-clear-state{padding:var(--s-6);background:var(--bg-raised)}
.crm-clear-state h3{margin:0 0 var(--s-2)}.crm-clear-state p{margin:0;color:var(--muted)}
.crm-delivery-details{margin-top:var(--s-9);border-top:1px solid var(--edge);padding-top:var(--s-5)}
.crm-delivery-details summary{cursor:pointer;color:var(--muted);font-size:13px}
.crm-delivery-details summary span{margin-left:var(--s-4)}
.crm-delivery-details[open]>p{margin-top:var(--s-4)}
.crm-delivery-details .crm-table-wrap{margin-top:var(--s-4)}
.crm-register-tabs{display:flex;gap:var(--s-5);margin:var(--s-6) 0 var(--s-4);border-bottom:1px solid var(--edge)}
.crm-register-tabs button{border:0;background:transparent;padding:var(--s-3) 0;color:var(--muted)}
.crm-register-tabs [aria-pressed=true]{color:var(--accent-strong);box-shadow:inset 0 -2px var(--accent)}
.crm-pagination[hidden]{display:none}
.crm-facts{margin:var(--s-4) 0}
.crm-facts>div{display:flex;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--edge)}
.crm-facts dt{color:var(--muted)}.crm-facts dd{margin:0;text-align:right;overflow-wrap:anywhere}
.crm-project-summary>h2:first-child{margin-top:0}
.crm-purchase-summary h3{margin:0}
.crm-purchase-summary section{padding-top:var(--s-3)}
.crm-comment-form{padding-top:var(--s-4)}
.crm-comment-form textarea{background:var(--surface)}
.crm-comment-form>button{justify-self:start}
.crm-project-dashboard{row-gap:var(--s-7);align-items:start}
.crm-project-brief{grid-column:1;grid-row:1}
.crm-project-conversation{grid-column:1;grid-row:2}
.crm-project-dashboard>.crm-project-summary{grid-column:2;grid-row:1 / span 2}
.crm-project-dashboard .crm-prose{margin-bottom:0}
.crm-project-conversation>.crm-empty{padding:var(--s-3) 0}
.crm-project-conversation .crm-comment-form{margin-top:var(--s-3)}
.crm-project-summary .crm-session{padding-top:var(--s-2)}

.crm-answers{padding:0;background:transparent;font:inherit}
.crm-answers>div{padding:var(--s-4) 0;border-bottom:1px solid var(--edge)}
.crm-answers dt{color:var(--muted);font-size:12px;font-weight:500;margin-bottom:var(--s-2)}
.crm-answers dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-answers .crm-answers{padding-left:var(--s-4);border-left:1px solid var(--edge)}
.crm-answer-list{padding-left:var(--s-5)}
.crm-calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5);flex-wrap:wrap}
.crm-calendar-navigation{display:flex;align-items:center;gap:var(--s-4)}
.crm-calendar-navigation h2{margin:0;text-align:center;font-size:20px}
.crm-calendar-toolbar>.crm-actions{align-items:end}
.crm-calendar-toolbar label{font-size:12px;gap:var(--s-1)}
.crm-calendar-toolbar select{min-height:44px}
.crm-calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--s-5)}
.crm-calendar-surface{min-width:0}
.crm-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--surface);border:1px solid var(--edge);border-bottom:0}
.crm-weekdays span{padding:var(--s-3) var(--s-2);text-align:center;color:var(--muted);font-size:12px}
.crm-calendar{grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;background:var(--surface);border-top:1px solid var(--edge)}
.crm-calendar section{position:relative;min-width:0;min-height:124px;padding:var(--s-2);text-align:right}
.crm-calendar section.is-outside{background:var(--bg-raised)}
.crm-calendar section.is-selected{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-border)}
.crm .crm-day-number{width:32px;min-height:32px;display:inline-grid;place-items:center;text-align:center;font-size:13px;border:0;background:transparent;padding:0}
.crm .is-today .crm-day-number{background:var(--accent-strong);color:var(--surface)}
.crm .crm-day-number:disabled{cursor:default}
.crm-calendar-events{display:grid;gap:var(--s-1);margin-top:var(--s-2)}
.crm .crm-calendar-event{width:100%;padding:var(--s-2);border:0;background:var(--surface-2);text-align:left;font-size:11px;line-height:1.4;min-height:44px;overflow:hidden}
.crm-calendar-event time,.crm-calendar-event span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-calendar-event span{font-weight:600;color:var(--accent-strong)}
.crm .crm-more-events{border:0;background:transparent;font-size:11px}
.crm-event-count{display:none}
.crm-day-detail{padding:var(--s-5);border:1px solid var(--edge);background:var(--surface);align-self:start}
.crm-day-detail>p{font-size:12px;margin:0}
.crm-day-detail>h2{margin:var(--s-2) 0 var(--s-4)}
.crm-day-detail .crm-session{display:block;padding:var(--s-4) 0}.crm-day-detail .crm-session:first-child{padding-top:0}
.crm-day-detail .crm-list{margin:0 0 var(--s-4);max-height:520px;overflow:auto;overscroll-behavior:contain;padding-right:var(--s-2)}
.crm-day-detail .crm-empty{padding:var(--s-5) 0}
.crm-calendar-caption{font-size:12px;color:var(--muted);padding-top:var(--s-3)}
@media(max-width:920px){
 .crm-shell{grid-template-columns:172px minmax(0,1fr)}.crm-main{padding:var(--s-5)}
 .crm-heading{align-items:flex-start}.crm-dashboard{grid-template-columns:1fr;gap:var(--s-7)}
 .crm-project-brief,.crm-project-conversation,.crm-project-dashboard>.crm-project-summary{grid-column:auto;grid-row:auto}
 .crm-project-dashboard>.crm-project-summary{order:1}.crm-project-conversation{order:2}
 .crm-upcoming,.crm-project-summary{padding:var(--s-5) 0 0;border-left:0;border-top:1px solid var(--edge)}
 .crm-calendar-layout{grid-template-columns:1fr}.crm-day-detail{display:block}
 .crm-calendar section{min-height:100px;padding:var(--s-1)}
 .crm-calendar-navigation h2{font-size:18px}.crm-calendar-navigation{gap:var(--s-2)}
 .crm-project-list>li{gap:var(--s-3);padding:var(--s-4)}
}
@media(max-width:680px){
 .crm-project-list>li{align-items:flex-start;flex-direction:column}.crm-project-meta{display:flex;align-items:center;padding-left:calc(44px + var(--s-4));gap:var(--s-3)}
 .crm-calendar-events{display:none}.crm-event-count{display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);font-size:11px;width:20px;height:20px;margin:var(--s-1) auto}
 .crm-calendar section{min-height:76px;text-align:center}.crm-calendar-navigation{width:100%;justify-content:space-between}
 .crm-section-title{flex-wrap:wrap}.crm-calendar-toolbar>.crm-actions{width:100%;justify-content:space-between}
}
@media(max-width:620px){
 .crm-shell{display:block}.crm-sidebar{padding:var(--s-4);height:auto;position:static;border-right:0;border-bottom:1px solid var(--edge)}
 .crm-sidebar .brand{font-size:21px}.crm-sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);margin:0}.crm-sidebar nav button{padding:var(--s-3);font-size:13px}
 .crm-account{border:0;padding:0;gap:var(--s-3)}.crm-account button{min-height:32px;font-size:12px}
 .crm-main{padding:var(--s-5)}.crm h1{font-size:26px}.crm-heading{gap:var(--s-4)}
 .crm-calendar section{min-height:76px}.crm-weekdays span{padding:var(--s-3) 0}
}
@media(max-width:480px){
 .crm-main{padding:var(--s-4)}.crm-calendar section{min-height:68px}
 .crm-calendar-navigation h2{font-size:17px}.crm-calendar-navigation button{font-size:12px;padding:var(--s-2)}
 .crm-project-meta{padding-left:0;flex-wrap:wrap}.crm-avatar{width:36px;height:36px}.crm-project-identity{gap:var(--s-3)}
}

/* ===== RESUME (/resume) =====
   The page is the resume. "Download PDF" calls window.print(), and the
   @media print block at the end of this section is what the PDF looks like:
   one column, black on white, no chrome, no orphaned headings. */
.resume-head{padding-top:clamp(112px,14vw,160px);padding-bottom:clamp(28px,4vw,44px)}
.resume-head-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:6px}
.resume-head h1{font-size:clamp(40px,6.5vw,72px);letter-spacing:-.04em;line-height:1}
.resume-role{margin-top:12px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-strong)}
.resume-print{flex:none}
.resume-print svg{width:18px;height:18px;margin-right:9px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.resume-contact{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:28px;padding-top:22px;border-top:1px solid var(--edge-strong)}
.resume-contact li{display:flex;align-items:center;gap:9px;min-height:44px;color:var(--muted);font-size:15px}
.resume-contact svg{flex:none;width:19px;height:19px;stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.resume-contact a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--edge-strong);text-underline-offset:4px;transition:color var(--dur-base) var(--ease-out)}
.resume-contact a:hover{color:var(--accent-strong);text-decoration-color:currentColor}
.resume-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,6vw,72px);padding-bottom:var(--section-y)}
.resume-section+.resume-section{margin-top:clamp(36px,5vw,56px)}
.resume-section h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;padding-bottom:12px;border-bottom:1px solid var(--edge-strong)}
.resume-section>p{max-width:72ch;margin-top:16px;color:var(--muted);font-size:16px;line-height:1.7}
.resume-lede{color:var(--ink)!important;font-size:17px!important}
.resume-job{margin-top:clamp(26px,3.5vw,38px)}
.resume-job-head{display:grid;gap:3px;margin-bottom:12px}
.resume-job-head h3{font-size:20px;line-height:1.25}
.resume-org{font-family:var(--display);font-size:16px;font-weight:600;color:var(--accent-strong)}
.resume-dates{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.resume-job>p{max-width:72ch;color:var(--muted);font-size:15.5px;line-height:1.65}
.resume-job ul{list-style:none;display:grid;gap:9px;margin-top:14px}
.resume-job li{position:relative;max-width:74ch;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.6}
.resume-job li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.resume-job strong{color:var(--ink);font-weight:650}
.resume-education{list-style:none;margin-top:18px;border-top:1px solid var(--edge)}
.resume-education li{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--edge)}
.resume-edu-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.resume-edu-line strong{font-family:var(--display);font-size:16.5px;font-weight:650;color:var(--ink)}
.resume-education span{color:var(--muted);font-size:14.5px}
.resume-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.resume-tags li{padding:7px 12px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--muted);font-family:var(--mono);font-size:12px;line-height:1.3}
.resume-skills{display:grid;gap:16px;margin-top:18px}
.resume-skills dt{font-family:var(--display);font-size:14px;font-weight:650;color:var(--ink)}
.resume-skills dd{margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.6}
.resume-refs{margin-top:16px;color:var(--muted);font-size:15px}
@media(min-width:921px){
  .resume-body{grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
  .resume-aside{position:sticky;top:112px;align-self:start}
  .resume-job-head{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  .resume-job-head h3{grid-column:1}
  .resume-org{grid-column:1}
  .resume-job-head .resume-dates{grid-column:2;grid-row:1/3;text-align:right}
}
@media(max-width:620px){
  .resume-head-top{align-items:flex-start}
  .resume-print{width:100%;justify-content:center}
  .resume-contact{gap:4px 24px}
  .resume-edu-line{flex-direction:column;gap:2px}
}

/* PDF output. Everything the screen needs and paper does not comes off here. */
@media print{
  @page{margin:14mm 13mm}
  html,body{background:#fff}
  body{color:#000;font-size:10.5pt}
  #site-nav,#site-footer,.resume-print,.case-study-back,.booking-modal,.nav{display:none!important}
  .wrap{max-width:none;padding:0}
  main,.block,.resume-head{padding:0!important;margin:0!important}
  .resume-head{padding-bottom:10pt!important;border-bottom:1pt solid #000!important}
  .resume-head h1{font-size:26pt;color:#000}
  .resume-role{font-size:9pt;color:#000;margin-top:4pt}
  .resume-contact{gap:2pt 16pt;margin-top:10pt;padding-top:8pt;border-top:0}
  .resume-contact li{min-height:0;font-size:9pt;color:#000}
  .resume-contact svg{stroke:#000;width:11pt;height:11pt}
  .resume-contact a{color:#000;text-decoration:none}
  .resume-body{display:block;padding-bottom:0}
  .resume-aside{position:static;margin-top:14pt}
  .resume-section+.resume-section,.resume-job{margin-top:12pt}
  .resume-section h2{font-size:12pt;color:#000;padding-bottom:3pt;border-bottom:.75pt solid #000}
  .resume-section>p,.resume-job>p,.resume-job li,.resume-education span,.resume-skills dd{color:#000;font-size:10pt;line-height:1.45}
  .resume-lede{font-size:10.5pt!important}
  .resume-job-head h3{font-size:12pt;color:#000}
  .resume-org{font-size:10.5pt;color:#000}
  .resume-dates{font-size:9pt;color:#000}
  .resume-job li::before{background:#000}
  .resume-job strong,.resume-edu-line strong,.resume-skills dt{color:#000}
  .resume-tags li{border:.5pt solid #666;background:transparent;color:#000;padding:2pt 5pt;font-size:8.5pt}
  /* Keep a heading with its content and an entry whole across a page break. */
  .resume-section h2,.resume-job-head{break-after:avoid;page-break-after:avoid}
  .resume-job,.resume-education li,.resume-skills>div{break-inside:avoid;page-break-inside:avoid}
  a[href]::after{content:""}
}
.study-resume{margin-top:20px}
.about-trust .leader-quote{margin:26px 0 0;max-width:none}
.about-trust .leader-quote blockquote{font-size:clamp(19px,1.7vw,23px)}