/* Layout: left-aligned throughout. A periwinkle band opens with the promise beside a sample
   "solution plan" sheet (the firm's own deliverable); its rows link down to the services,
   which run as plain ruled rows rather than cards. The periwinkle band returns once, for contact. */
/* Palette and display face are taken from the Briteway logo: its periwinkle ground, black fat-face
   lettering, lilac inline and hard offset shadow. */
:root{
  --bg:#F7F7FE; --surface:#FFFFFF; --tint:#EAEBFC; --hover:#E3E5FC;
  --ink:#0F0E17; --muted:#55546B; --line:#D2D4EE; --field:#8687A8;
  --accent:#3B3DA6;
  --hl:#E3C9F7;
  --cta:#0F0E17; --cta-ink:#FFFFFF;
  --band:#BAC0FA; --band-ink:#0F0E17; --band-muted:#34355E; --band-line:#9499DE; --shadow:#0F0E17;
  --focus:#3B3DA6;
  --display:"Abril Fatface", "Bodoni 72", Didot, Georgia, serif;
  --body:"Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.75rem;
  --step-3:clamp(1.9rem,3.6vw,2.6rem); --step-4:clamp(2.2rem,4.8vw,3.7rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12111C; --surface:#1C1B2B; --tint:#191827; --hover:#2C2B45;
    --ink:#ECECF8; --muted:#A6A7C3; --line:#302F49; --field:#727192;
    --accent:#BAC0FA;
    --hl:rgba(168,148,255,.34);
    --cta:#BAC0FA; --cta-ink:#0F0E17;
    --focus:#BAC0FA;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
/* Everything is sized in rem, so the whole page scales with the screen: 16px on phones up to ~19px on large monitors. */
html{font-size:clamp(100%,.9rem + .2vw,118%);-webkit-text-size-adjust:100%;scroll-padding-top:5.25rem}
img,svg{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
p,li,dd{text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;line-height:1.12;overflow-wrap:break-word}
::selection{background:var(--hl)}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.wrap{max-width:72rem;margin-inline:auto;padding-left:max(clamp(16px,4vw,40px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,40px),env(safe-area-inset-right,0px))}
.sec{padding-block:clamp(3.25rem,7vw,5.75rem)}
.sec.flush{padding-top:0}
[hidden]{display:none!important}
.sec-head{display:grid;gap:.75rem;max-width:40rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec-head h2{font-size:var(--step-3)}
.sec-head p{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.35rem;border-radius:999px;border:1.5px solid var(--btn-bg,var(--cta));background:var(--btn-bg,var(--cta));color:var(--btn-ink,var(--cta-ink));font:inherit;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer}
.btn{transition:opacity .15s,background-color .15s}
.btn:hover{opacity:.86}
@supports (background:color-mix(in srgb,red,blue)){.btn:hover{opacity:1;background:color-mix(in srgb,var(--btn-bg,var(--cta)) 78%,var(--btn-ink,var(--cta-ink)))}}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.btn.ghost:hover{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}
.btn.small{padding:.55rem 1rem;font-size:var(--step--1)}

/* ---------- Band (hero + contact) ---------- */
.band{overflow-x:clip;background:var(--band);color:var(--band-ink);--focus:#0F0E17;--btn-bg:#0F0E17;--btn-ink:#FFFFFF}
/* The header stays in view on this long page; it gains a hairline once the page has scrolled. */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--band);color:var(--band-ink);--focus:#0F0E17;--btn-bg:#0F0E17;--btn-ink:#FFFFFF;border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.is-stuck{border-bottom-color:var(--band-line)}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem;position:relative}
.skip{--focus:#0F0E17;position:absolute;left:1rem;top:-5rem;z-index:30;background:#0F0E17;color:#FFFFFF;padding:.6rem 1rem;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(.5rem + env(safe-area-inset-top,0px))}
.mark{display:inline-flex;line-height:0;flex:none}
.logo{display:block;height:clamp(2rem,1.7rem + 1.2vw,2.7rem);width:auto;aspect-ratio:2144/568}
.nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem)}
.nav>ul{display:flex;gap:1.5rem;font-size:.95rem;font-weight:500}
.nav>ul a{text-decoration:none;color:var(--band-muted);white-space:nowrap}
.nav>ul a:hover,.nav>ul a[aria-current]{color:var(--band-ink)}
.nav>ul a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.nav>ul a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1.5px solid currentColor;border-radius:50%;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:1.25rem;height:1.25rem}
.menu summary:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.menu[open] summary{background:var(--band-ink);color:var(--band)}
.menu-panel{position:absolute;right:0;top:calc(100% + .6rem);width:min(17rem,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1.5px solid var(--shadow);box-shadow:5px 5px 0 var(--shadow);border-radius:6px;padding:.4rem;--focus:var(--accent);max-height:calc(100vh - 5.5rem);max-height:calc(100dvh - 5.5rem);overflow-y:auto;overscroll-behavior:contain}
.menu-panel a{display:block;padding:.8rem 1rem;border-radius:4px;font-weight:600;text-decoration:none}
.menu-panel a:hover{background:var(--hover)}
.menu-panel a[aria-current]{color:var(--accent)}
.menu-panel li+li{border-top:1px solid var(--line)}
@media (max-width:55em){.nav>ul{display:none}.menu{display:block}.nav .btn.small{min-height:2.75rem}}
@media (max-width:30em){.nav>.btn{display:none}}
/* A short screen (a phone on its side, or a big zoom): tighter menu rows so all of them fit. */
@media (max-height:500px){.menu-panel a{padding-block:.5rem}}

.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-block:clamp(2rem,5vw,4rem) clamp(3rem,7vw,5.5rem)}
@media (min-width:901px){.hero-copy{padding-top:clamp(1rem,3vw,2.75rem)}}
.hero-copy{display:grid;gap:1.5rem;min-width:0}
.hero h1{font-size:var(--step-4);line-height:1.06}
.hero .lede{font-size:var(--step-1);line-height:1.5;color:var(--band-muted);max-width:34rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
@media (max-width:420px){.cta-row .btn{flex:1 1 100%}}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}

/* ---------- The sample plan sheet ---------- */
.sheet{background:var(--surface);color:var(--ink);border:1.5px solid var(--shadow);box-shadow:7px 7px 0 var(--shadow);border-radius:6px;padding:clamp(1.1rem,2.6vw,1.75rem);min-width:0;--focus:var(--accent)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1rem;border-bottom:2px solid var(--ink)}
.sheet-title{font-family:var(--display);font-size:var(--step-1);line-height:1.15}
.sheet-sub{font-size:var(--step--1);color:var(--muted)}
.tag{flex:none;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:.2rem .6rem;border:1.5px solid var(--ink);border-radius:999px}
.plan-cols,.plan a{display:grid;grid-template-columns:7.25rem minmax(0,1fr);gap:.25rem 1rem}
.plan-cols{padding-block:.6rem;font-size:.8rem;font-weight:600;color:var(--muted)}
.plan a{padding-block:.8rem;border-top:1px solid var(--line);text-decoration:none}
.plan .area{font-weight:700;font-size:.95rem;line-height:1.35}
.plan .rx{display:grid;gap:.2rem;min-width:0;line-height:1.4}
.plan .hl{color:inherit;padding-inline:.12em;margin-inline:-.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 60%/100% 82%}
.plan .svc{font-size:var(--step--1);color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.plan a:hover .svc{text-decoration-thickness:2px}
.sheet-foot{padding-top:.9rem;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}
/* ---------- Motion ----------
   1. Load: the headline rises word by word, the plan sheet lands and its shadow drops, then the highlighter runs down the rows.
   2. Scroll: blocks rise into place once; the process steps count in along their line; each service icon draws itself.
   3. Hover and open states answer the pointer.
   All of it is skipped when the visitor prefers reduced motion (the header's reading-progress line still follows the
   scroll, since it shows position and does not animate), and nothing is hidden unless the script is running. */
.hero h1 .w{display:inline-block}
/* "side by side" is kept on one line, so its three words sit in a .keep wrapper; the delays count words in reading order. */
.hero h1 .keep{white-space:nowrap}
.hero h1>.w:nth-child(2){--i:1}.hero h1>.w:nth-child(3){--i:2}.hero h1 .keep .w:nth-child(1){--i:3}.hero h1 .keep .w:nth-child(2){--i:4}.hero h1 .keep .w:nth-child(3){--i:5}.hero h1>.w:nth-child(5){--i:6}.hero h1>.w:nth-child(6){--i:7}.hero h1>.w:nth-child(7){--i:8}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--band-ink);transform-origin:left;transform:scaleX(var(--progress,0))}
.plan .hl{transition:background-size .2s ease,background-position .2s ease}
.plan a:hover .hl{background-size:100% 100%;background-position:0 50%}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sheet{transition:transform .2s ease,box-shadow .2s ease}
  .sheet:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--shadow)}
  .jump a{transition:border-color .15s,transform .15s}
  .jump a:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .w{animation:word .75s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 60ms + 80ms)}
  .hero .lede{animation:rise .7s ease .55s backwards}
  .hero .cta-row{animation:rise .7s ease .7s backwards}
  .sheet{animation:sheet-in .8s cubic-bezier(.2,.7,.2,1) .35s backwards}
  .plan .hl{animation:draw .55s cubic-bezier(.3,.7,.3,1) backwards}
  .plan li:nth-child(1) .hl{animation-delay:1.05s}
  .plan li:nth-child(2) .hl{animation-delay:1.19s}
  .plan li:nth-child(3) .hl{animation-delay:1.33s}
  .plan li:nth-child(4) .hl{animation-delay:1.47s}
  .plan li:nth-child(5) .hl{animation-delay:1.61s}
  .plan li:nth-child(6) .hl{animation-delay:1.75s}
  .wait .hero h1 .w,.wait .hero .lede,.wait .hero .cta-row,.wait .sheet,.wait .plan .hl{animation-play-state:paused}
  @keyframes word{from{opacity:0;transform:translateY(.55em) rotate(2deg)}}
  @keyframes rise{from{opacity:0;transform:translateY(.9rem)}}
  @keyframes sheet-in{from{opacity:0;transform:translateY(1.6rem) rotate(1.2deg);box-shadow:0 0 0 var(--shadow)}}
  @keyframes draw{from{background-size:0% 82%}}
  @keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}

  .menu[open] .menu-panel{transform-origin:top right;animation:pop .18s ease}
  @media (max-width:760px){.more[open] .svc-more{animation:rise .35s ease}}

  /* scroll reveals: .anim is set by the script, .rv marks a block, .in arrives when it enters the screen */
  .anim .rv{opacity:0;transform:translateY(1.1rem)}
  .anim .rv.in{opacity:1;transform:none;transition:opacity .6s ease var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}

  .anim .steps li.rv::before{transform:scale(0)}
  .anim .steps li.rv.in::before{transform:scale(1);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0ms) + 100ms)}
  .anim .steps li.rv::after{transform:scaleX(0);transform-origin:left}
  .anim .steps li.rv.in::after{transform:scaleX(1);transition:transform .5s ease calc(var(--d,0ms) + 320ms)}

  .anim .svc-row.rv .ico{opacity:0;transform:scale(.5)}
  .anim .svc-row.rv.in .ico{opacity:1;transform:none;transition:opacity .3s ease .15s,transform .5s cubic-bezier(.3,1.5,.5,1) .15s}
  .anim .svc-row.rv .ico svg>*{stroke-dasharray:1 2;stroke-dashoffset:1.05}
  .anim .svc-row.rv.in .ico svg>*{stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .45s}
}
@media print{
  .anim .rv{opacity:1!important;transform:none!important}
  .site-head{position:static}
  .site-head::after,.skip,.menu,.nav,.cta-row,.jump,.form,#copy-email,.more>summary,.hero-ico,.foot-nav,.foot-services{display:none!important}
  .btn{background:none!important;color:#000!important;border-color:#000!important}
  .sheet,.menu-panel{box-shadow:none}
  h2,h3,.sec-head,.svc-head{break-after:avoid}
  .steps li,.pillars li,.faq>div,.courses li,.facts div,.covers,.email-line,.svc-more>div{break-inside:avoid}
  .ticks li::before,.covers li::before,.steps li::before,.ico{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:420px){.plan a{grid-template-columns:minmax(0,1fr)}.plan-cols{display:none}.plan li:first-child a{border-top:0}}

/* ---------- Process ---------- */
.steps{display:grid;gap:1.5rem;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.25rem 1rem;counter-increment:step}
.steps li::before{content:counter(step);grid-row:span 2;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;background:var(--band);color:var(--band-ink);font-family:var(--display);font-size:1.2rem}
.steps h3{font-family:var(--body);font-weight:700;font-size:var(--step-0);line-height:1.3;align-self:end}
.steps p{color:var(--muted);font-size:1rem;grid-column:2}
@media (min-width:640px) and (max-width:999px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 2.5rem}}
@media (min-width:1000px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem;position:relative}
  .steps li{grid-template-columns:minmax(0,1fr);gap:.6rem;position:relative;align-content:start}
  .steps li:not(:last-child)::after{content:"";position:absolute;left:2.75rem;right:-2rem;top:1.375rem;border-top:1.5px solid var(--line)}
  .steps h3{align-self:start;min-height:2.6em}
  .steps li::before{grid-row:auto}
  .steps p{grid-column:auto}
}

.sub-head{text-wrap:pretty;font-family:var(--body);font-weight:700;font-size:var(--step-0);margin-top:clamp(2.5rem,5vw,3.5rem);margin-bottom:1.25rem}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 2.5rem}
@media (max-width:999px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pillars{grid-template-columns:minmax(0,1fr)}}
.pillars li{border-top:2px solid var(--ink);padding-top:.9rem;display:grid;gap:.35rem;align-content:start}
.pillars strong{font-weight:700;line-height:1.3}
.pillars p{color:var(--muted);font-size:1rem}

/* ---------- Services ---------- */
.svc-row{display:grid;grid-template-columns:minmax(0,clamp(12rem,30%,19rem)) minmax(0,1fr);gap:1.25rem clamp(1.5rem,5vw,4rem);padding-block:clamp(1.75rem,4vw,2.5rem);border-top:1px solid var(--line);scroll-margin-top:1rem}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--band);color:var(--band-ink);margin-bottom:1rem}
.ico svg{width:1.6rem;height:1.6rem}
.svc-row h3{font-size:var(--step-2)}
.svc-row .what{color:var(--muted);margin-top:.6rem;font-size:1rem}
.more-link{display:inline-block;margin-top:.9rem;font-size:.95rem;font-weight:600;color:var(--accent);text-underline-offset:3px}
.more-link:hover{text-decoration-thickness:2px}
@media (min-width:761px){.svc-head{position:sticky;top:5.75rem;align-self:start}}
.svc-body{display:grid;gap:1rem;min-width:0;container-type:inline-size}
.svc-body h4,.svc-more h4{font-size:.95rem;font-weight:700;line-height:1.3}
.svc-more{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem 2rem;margin-top:.75rem;padding-top:1.5rem;border-top:1px dashed var(--line)}
@container (min-width:40rem){.svc-more{grid-template-columns:repeat(3,minmax(0,1fr))}}
.svc-more>div{display:grid;gap:.6rem;align-content:start;min-width:0}
.svc-more p,.svc-more li{font-size:1rem;line-height:1.5;color:var(--muted)}
.svc-more ul{display:grid;gap:.45rem}
.svc-more li{position:relative;padding-left:1.1rem}
.svc-more li::before{content:"";position:absolute;left:0;top:.72em;width:.5rem;border-top:1.5px solid var(--muted)}
.more>summary{display:none}
@media (max-width:760px){
  .more>summary:hover{border-color:var(--accent)}
  .more>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;cursor:pointer;padding:.8rem 1rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-weight:600;font-size:.95rem}
  .more>summary::-webkit-details-marker{display:none}
  .more>summary::after{content:"+";content:"+" / "";font-size:1.35rem;line-height:1}
  .more[open]>summary::after{content:"\2212";content:"\2212" / ""}
  .more .svc-more{border-top:0;margin-top:0;padding-top:1.25rem}
}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.jump a{padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:.92rem;font-weight:600;text-decoration:none}
.jump a:hover{border-color:var(--accent)}
.ticks{columns:2 15rem;column-gap:2.5rem}
.ticks li{break-inside:avoid;position:relative;padding:.3rem 0 .3rem 1.15rem;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.85em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
@media (max-width:760px){.svc-row{grid-template-columns:minmax(0,1fr)}.svc-row>.svc-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center}.ico{margin-bottom:0}.svc-row .what,.svc-row .more-link{grid-column:1/-1}.svc-row .more-link{justify-self:start;margin-top:.6rem}}

/* ---------- Courses ---------- */
.tinted{background:var(--tint)}
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem clamp(1.5rem,4vw,3rem)}
.courses li{border-top:2px solid var(--ink);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.courses h3{font-size:1.45rem;line-height:1.2}
.courses p{color:var(--muted);font-size:1rem}
.after-note{margin-top:2rem;color:var(--muted);max-width:40rem}
@media (max-width:640px){.courses{grid-template-columns:minmax(0,1fr)}}

/* ---------- Founder ---------- */
.founder{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:1.5rem clamp(1.5rem,5vw,4rem)}
.founder h2{font-size:var(--step-3)}
.founder .role{color:var(--muted);margin-top:.5rem}
.founder .bio{display:grid;gap:1rem;max-width:40rem}
.facts{display:grid;margin-top:1.75rem;max-width:40rem}
.facts div{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:.25rem 1.5rem;padding-block:.8rem;border-top:1px solid var(--line)}
.facts dt{font-weight:700}
.facts dd{color:var(--muted)}
@media (max-width:760px){.founder{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.facts div{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem clamp(1.5rem,4vw,3.5rem)}
.faq>div{display:grid;gap:.4rem;align-content:start;border-top:1px solid var(--line);padding-top:1.1rem}
.faq h3{font-family:var(--body);font-weight:700;font-size:var(--step-0);line-height:1.35;text-wrap:pretty}
.faq p{color:var(--muted);font-size:1rem;max-width:34rem}
@media (max-width:700px){.faq{grid-template-columns:minmax(0,1fr)}}
@supports selector(:has(*)){@media (min-width:1000px){.faq:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}}

/* ---------- Contact ---------- */
/* In the page order the form follows the heading, so on a phone it is the first thing after the invitation.
   On wide screens the heading and the notes share the left column and the form takes the right. */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,5vw,4.5rem);row-gap:1.5rem;align-items:start}
.contact-intro,.contact-aside{grid-column:1;display:grid;gap:1.25rem}
.contact-intro{grid-row:1}
.contact-aside{grid-row:2}
.contact>.form{grid-column:2;grid-row:1/span 2}
.contact h2{font-size:var(--step-3)}
.contact-intro>p{color:var(--band-muted);max-width:32rem}
.covers{display:grid;gap:.7rem;max-width:32rem}
.covers h3{font-family:var(--body);font-weight:700;font-size:var(--step-0)}
.covers ul{display:grid;gap:.45rem}
.covers li{position:relative;padding-left:1.15rem;line-height:1.45}
.covers li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--band-ink)}
.email-line{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding-block:1.1rem;border-block:1px solid var(--band-line)}
.email-label{flex:1 0 100%;font-size:var(--step--1);font-weight:600;color:var(--band-muted)}
.email{font-family:var(--display);letter-spacing:.01em;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.1;overflow-wrap:anywhere}
.form{--btn-bg:var(--cta);--btn-ink:var(--cta-ink);background:var(--surface);color:var(--ink);border:1.5px solid var(--shadow);box-shadow:7px 7px 0 var(--shadow);border-radius:6px;padding:clamp(1.1rem,2.6vw,1.75rem);display:grid;gap:1.1rem;min-width:0;--focus:var(--accent)}
.form-head{display:grid;gap:.4rem}
.form h3{font-size:var(--step-1)}
.form .hint{font-size:var(--step--1);color:var(--muted)}
.field{display:grid;gap:.35rem;min-width:0;align-content:start}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
@media (max-width:520px){.pair{grid-template-columns:minmax(0,1fr)}}
label,legend{font-weight:600;font-size:.95rem}
input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--field);border-radius:4px;padding:.65rem .75rem;transition:border-color .15s}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,textarea:hover{border-color:var(--muted)}
input[type="text"]:focus-visible,input[type="email"]:focus-visible,input[type="tel"]:focus-visible,textarea:focus-visible{outline-offset:1px;border-color:var(--accent)}
textarea{resize:vertical;line-height:1.5}
fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:.5rem}
legend{padding:0;margin-bottom:.5rem}
.areas{display:flex;flex-wrap:wrap;gap:.5rem}
.areas label{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;font-weight:500;font-size:.92rem;cursor:pointer;transition:border-color .15s,background-color .15s}
.areas label:hover{border-color:var(--accent)}
.areas input{accent-color:var(--accent);margin:0}
.areas label:has(input:checked){border-color:var(--accent);background:var(--hover)}
@supports selector(:has(*)){.areas input:focus-visible{outline:0}.areas label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}}
/* On phones the choices stack as a tidy list with comfortable tap targets, instead of a ragged run of pills. */
@media (max-width:520px){.areas{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}.areas label{min-height:2.75rem;padding:.5rem .8rem;border-radius:6px;gap:.6rem}}
.form-body{display:grid;gap:1.1rem;min-width:0}
/* The message box is as tall as the message (the script sizes it), up to a limit, so it is read without scrolling inside it. */
.draft{background:var(--tint);min-height:12.5rem;max-height:30rem;resize:none;border-style:dashed}
.draft:hover{border-color:var(--field)}
/* The preview reads as an email: who it goes to and its subject, above the text. */
.mail-head{display:grid;gap:.2rem;font-size:var(--step--1);line-height:1.45;margin-block:.15rem .25rem}
.mail-head div{display:flex;flex-wrap:wrap;gap:0 .6rem}
.mail-head dt{font-weight:700;min-width:3.9rem}
.mail-head dd{min-width:0;overflow-wrap:anywhere}
.form .hint.note{color:var(--ink);font-weight:600}
#mail-help:empty{display:none}
/* Without the script the builder cannot work, so a note with the address stands in for it: when there is no
   script at all, and when boot.js finds that the main script never set the builder up. */
#form-fallback{display:none}
html:not(.js) .needs-js,.js.stalled:not(.ready) .needs-js{display:none}
html:not(.js) #form-fallback,.js.stalled:not(.ready) #form-fallback{display:block}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
@media (max-width:520px){.form-actions .btn{flex:1 1 100%}}
/* The form is much taller than the notes beside it, so on wide screens the notes and the address stay in view while it is filled in. */
@media (min-width:901px) and (min-height:34rem){.contact-aside{position:sticky;top:5.75rem}}
@media (max-width:900px){.contact-aside .email-line{border-bottom:0}.contact{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:1.75rem}.contact-intro,.contact-aside,.contact>.form{grid-column:1;grid-row:auto}}

.foot{border-top:1px solid var(--band-line);margin-top:clamp(3rem,6vw,4.5rem);padding-top:2rem;display:grid;grid-template-columns:minmax(0,1.3fr) auto auto auto;gap:1.75rem clamp(1.5rem,4vw,3rem);align-items:start;font-size:.95rem}
.foot-brand{display:grid;gap:.75rem;justify-items:start}
.foot-brand .logo{height:2rem}
.foot-brand p{color:var(--band-muted);max-width:20rem}
.foot-nav,.foot-services{display:grid;gap:.5rem;justify-items:start;align-content:start}
.foot-nav a,.foot-services a,.foot-contact a{text-decoration:none;font-weight:500}
.foot-nav a:hover,.foot-services a:hover,.foot-contact a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-services a[aria-current]{font-weight:700}
.foot-contact{display:grid;gap:.5rem;justify-items:start}
.foot-contact .eml{font-weight:600}
.eml a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
.eml a:hover{text-decoration-thickness:2px}
.foot-contact .eml a{font-weight:inherit}
.after-note .eml{overflow-wrap:anywhere}
.legal{padding-block:1.5rem;font-size:var(--step--1);color:var(--band-muted)}
@media (max-width:980px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot{grid-template-columns:minmax(0,1fr)}}
/* On touch screens the small text links and pills get a taller tap area. */
@media (pointer:coarse){.jump a{padding-block:.7rem}.foot-nav,.foot-services,.foot-contact{gap:0}.foot-nav a,.foot-services a,.foot-contact a{padding-block:.5rem}.foot-contact .eml a{display:inline-block}.more-link,.plan .svc{padding-block:.35rem}.crumbs a{padding-block:.5rem}}
@media (forced-colors:active){
  .plan .hl{background:none}
  .ticks li::before,.covers li::before{forced-color-adjust:none;background:CanvasText}
  .steps li::before,.ico{border:1px solid CanvasText}
  .site-head::after{background:CanvasText}
  .logo{forced-color-adjust:none;background:#BAC0FA;border-radius:4px}
  .draft{border-style:dashed}
  .hero h1{line-height:1.15}   /* each word gets a backplate here, which would cover the descenders above */
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.contact-band{padding-top:clamp(3.25rem,7vw,5.75rem)}
.foot-band{display:flow-root}   /* keeps the footer's top margin inside the band */

/* ---------- Service pages (built by tools/build.py from the services on the home page) ---------- */
.page-hero{position:relative;display:grid;gap:1.25rem;justify-items:start;padding-block:clamp(1.5rem,4vw,2.75rem) clamp(2.75rem,6vw,4.5rem)}
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem .6rem;font-size:var(--step--1);font-weight:500;color:var(--band-muted)}
.crumbs a{color:inherit;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--band-ink);font-weight:600}
.page-hero h1{font-size:var(--step-4);line-height:1.06;max-width:18ch}
.page-hero .lede{font-size:var(--step-1);line-height:1.5;color:var(--band-muted);max-width:40rem}
/* The service's icon, large, beside the heading on wide screens (it is decoration, and hidden where it would crowd the text). */
.hero-ico{display:none}
@media (min-width:1100px){.hero-ico{display:grid;place-items:center;position:absolute;right:clamp(16px,4vw,40px);top:0;bottom:1.5rem;margin-block:auto;width:clamp(12rem,18vw,15rem);height:clamp(12rem,18vw,15rem);border-radius:50%;background:var(--surface);color:var(--ink);border:1.5px solid var(--shadow);box-shadow:7px 7px 0 var(--shadow)}.hero-ico svg{width:44%;height:44%}}
.page-hero .where{font-size:var(--step--1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--band-muted)}
.detail{display:grid;gap:clamp(1.75rem,4vw,2.75rem)}
.detail h2{font-size:var(--step-3)}
.detail .ticks{margin-top:1.25rem;font-size:var(--step-0)}
.detail .svc-body h2{font-family:var(--body);font-size:1.05rem;font-weight:700;line-height:1.3}
.detail .svc-more{margin-top:0}
.others{grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.others h3 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.others h3 a:hover{text-decoration-thickness:2px}
.closing{display:grid;gap:1.25rem;justify-items:start}
.closing>*{max-width:44rem}
.closing h2{font-size:var(--step-3)}
.closing>p{color:var(--band-muted)}
.closing .email-line{width:100%;border-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .page-hero>*{animation:rise .6s ease backwards}
  .page-hero>:nth-child(2){animation-delay:.08s}.page-hero>:nth-child(3){animation-delay:.16s}.page-hero>:nth-child(4){animation-delay:.24s}.page-hero>:nth-child(5){animation-delay:.32s}
  .wait .page-hero>*{animation-play-state:paused}
}