:root{
  /* Brand colours sampled from the practice logo */
  --cyan:#03AED1;          /* logo cyan        */
  --brand:#67429E;         /* logo deep purple */
  --brand-deep:#4B2F76;    /* darker, for text and hovers */
  --brand-lite:#A083C6;    /* logo light purple */
  --accent:#BE03BB;        /* logo magenta - used sparingly */
  --accent-deep:#96038F;
  --accent-soft:#FBE9FA;
  --cyan-deep:#0280A0;     /* readable cyan for text */

  /* Neutrals, biased violet so they sit under the brand */
  --ink:#1A1430;
  --ink-soft:#3D3357;
  --muted:#6B6382;
  --line:#E6E0D4;
  --line-soft:#F1ECE1;
  --paper:#FFFDFA;
  --wash:#F4EFE3;        /* warm cream band, carried over from the original site */
  --wash-violet:#F4F0FA;

  --amber:#9A6414;         /* semantic: notices only */
  --amber-bg:#FBF3E4;

  /* Type - Archivo echoes the squared Bank Gothic logo,
     Michroma is the direct logo callback at label sizes,
     body runs on Segoe UI so it matches his letterhead on Windows */
  --display:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --label:"Archivo","Segoe UI",system-ui,sans-serif;
  --logo:"Michroma","Archivo","Segoe UI",sans-serif;

  --gut:clamp(20px,5vw,40px);
  --max:1200px;
  --narrow:760px;

  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-lite);outline-offset:3px;border-radius:2px}
::selection{background:var(--wash);color:var(--ink)}

/* ---------- Type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.025em}
h1{font-size:clamp(2.2rem,4.9vw,3.7rem);line-height:1.06}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.12}
h3{font-size:clamp(1.18rem,2vw,1.5rem);line-height:1.25;letter-spacing:-.015em}
h4{font-size:1.08rem;line-height:1.3}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.12rem,1.8vw,1.38rem);line-height:1.55;color:var(--ink-soft);max-width:60ch}
.measure{max-width:64ch}
.small{font-size:.92rem;color:var(--muted)}
.tiny{font-size:.8rem;color:var(--muted);line-height:1.55}
strong{font-weight:600}
.num{font-variant-numeric:tabular-nums}

.eyebrow{
  font-family:var(--logo);font-size:.8rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
  display:flex;align-items:center;gap:.8em;margin:0 0 1.3rem;line-height:1.5;
}
.eyebrow::before{content:"";width:36px;height:2px;background:var(--brand);flex:none;opacity:.75}
.eyebrow--plain::before{display:none}

/* ---------- Layout ---------- */
.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,8.5vw,118px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--wash{background:var(--wash)}
.section--wash .card{background:#FFFDFA;border-color:#E6DFD0}
.section--wash .tag{background:#FFFDFA}
.section--ink{background:var(--ink);color:#EFEAF7}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--ink .lede,.section--ink p{color:#CFC6E2}
.section--ink .eyebrow{color:#B9A3DC}
.section--ink .eyebrow::before{background:#B9A3DC}
.hr{height:1px;background:var(--line);border:0;margin:0}
/* One alignment rule for the whole site, as agreed:
   body copy is never justified (justification hurts reading speed, and
   this site is read by people with attention difficulties); interior
   page heads are centred; everything else is flush left. */
/* nothing on this site is justified; text simply follows its container */

.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,76px);align-items:center}
.split--rev>*:first-child{order:2}
.split--top{align-items:start}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:14px 22px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;border-radius:2px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn span{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(26,20,48,.6)}
.btn:active{transform:translateY(0)}
.btn--brand{--bg:var(--brand);--bd:var(--brand)}
.btn--brand:hover{--bg:var(--brand-deep);--bd:var(--brand-deep)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)}
.btn--ghost:hover{--bd:var(--ink);--bg:transparent}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--sm{padding:11px 18px;font-size:.86rem}
.btn .arw{transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(4px)}

.textlink{
  display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.95rem;
  text-decoration:none;color:var(--brand);padding-bottom:2px;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .4s cubic-bezier(.2,.7,.3,1);
}
.textlink:hover{background-size:100% 1px}
.textlink .arw{transition:transform .3s ease}
.textlink:hover .arw{transform:translateX(3px)}

/* ---------- Top bar + header ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--brand-lite);z-index:60}
.announce{background:var(--ink);color:#C6BBDF;font-family:var(--label);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;text-align:center;padding:9px var(--gut)}
.announce b{color:#fff;font-weight:500}

.header{position:sticky;top:0;z-index:50;background:rgba(252,253,253,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -20px rgba(26,20,48,.6)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:124px;transition:height .32s ease}
.header.is-stuck .header__in{height:84px}
.header__right{display:flex;align-items:center;gap:18px}
.hdr-phone{text-decoration:none;text-align:right;line-height:1.15;display:block}
.hdr-phone span{display:block;font-family:var(--logo);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hdr-phone b{font-family:var(--display);font-size:1.04rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.hdr-phone:hover b{color:var(--brand)}
.header__navbar{border-top:1px solid var(--line);background:rgba(255,253,250,.7)}
.header.is-stuck .header__navbar{background:transparent}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand__logo{height:78px!important;width:auto!important;max-width:min(70vw,540px);transition:height .32s ease}
.header.is-stuck .brand__logo{height:56px!important}
@media (max-width:1240px){.brand__logo{height:66px!important}.nav{gap:22px}.nav a{font-size:.88rem}}
.footer__logo{height:52px!important;width:auto!important;max-width:300px;margin-bottom:16px}

.nav{display:flex;align-items:center;justify-content:center;gap:34px;height:52px;transition:height .32s ease}
.header.is-stuck .nav{height:46px}
.nav a{
  text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-soft);position:relative;padding:4px 0;white-space:nowrap;
  transition:color .25s ease;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:100% 50%;transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.nav a[aria-current="page"]{color:var(--ink)}

.hide-sm{display:inline-flex}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:2px;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:26px}
.burger.is-open i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,380px);background:var(--paper);border-left:1px solid var(--line);z-index:55;transform:translateX(100%);transition:transform .45s cubic-bezier(.3,.8,.25,1);padding:96px var(--gut) 40px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.drawer.is-open{transform:translateX(0)}
.drawer a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.45rem;padding:14px 0;border-bottom:1px solid var(--line-soft);opacity:0;transform:translateX(18px);transition:opacity .4s ease,transform .4s ease}
.drawer.is-open a{opacity:1;transform:none}
.drawer.is-open a:nth-child(1){transition-delay:.08s}
.drawer.is-open a:nth-child(2){transition-delay:.14s}
.drawer.is-open a:nth-child(3){transition-delay:.20s}
.drawer.is-open a:nth-child(4){transition-delay:.26s}
.drawer.is-open a:nth-child(5){transition-delay:.32s}
.drawer .btn{margin-top:20px;opacity:1;transform:none;border-bottom:0}
.scrim{position:fixed;inset:0;background:rgba(26,20,48,.42);opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:54}
.scrim.is-on{opacity:1;pointer-events:auto}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(52px,7vw,96px) clamp(40px,5vw,64px);overflow:hidden}
.hero::after{content:"";position:absolute;right:-14%;top:-22%;width:62vw;height:62vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(138,99,196,.13),rgba(138,99,196,0) 62%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(30px,5vw,68px);align-items:center;position:relative;z-index:1}
.hero h1{margin-bottom:20px;max-width:14ch}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.hero h1 .ln>span{display:block;transform:translateY(102%);animation:riseIn .95s cubic-bezier(.2,.75,.25,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.1s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.2s}
.hero h1 em{font-style:normal;color:var(--brand)}
@keyframes riseIn{to{transform:translateY(0)}}
.fade-up{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.3s}.d2{animation-delay:.42s}.d3{animation-delay:.54s}.d4{animation-delay:.66s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero__media{position:relative}
.hero__frame{position:relative;border-radius:3px;overflow:hidden;background:var(--wash);aspect-ratio:4/5;box-shadow:0 40px 80px -56px rgba(26,20,48,.6)}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(190deg,rgba(26,20,48,0) 52%,rgba(26,20,48,.30));pointer-events:none}
.hero__badge{position:absolute;left:-22px;bottom:34px;background:#fff;border:1px solid var(--line);border-radius:2px;padding:16px 20px;box-shadow:0 22px 48px -30px rgba(26,20,48,.55);max-width:250px}
.hero__badge b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.3}
.hero__badge span{font-family:var(--label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}

/* placeholder art when no photo uploaded yet */
.ph{display:grid;place-content:center;text-align:center;height:100%;padding:26px;background:
  linear-gradient(135deg,var(--wash),#E9E1F6);color:var(--muted);font-family:var(--label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;line-height:2}

/* ---------- Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(40px,5vw,66px)}
.stats>div{padding:26px 24px 26px 0;border-right:1px solid var(--line);position:relative;transition:background .45s ease}
.stats>div+div{padding-left:24px}
.stats>div:last-child{border-right:0;padding-right:0}
.stats>div:hover{background:linear-gradient(180deg,rgba(138,99,196,.055),rgba(138,99,196,0))}
.stats>div>b{display:block;font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.85rem);font-weight:700;line-height:1.12;margin-bottom:5px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stats>div>span{font-size:.85rem;color:var(--muted);line-height:1.45;display:block}
.stats>div>b span{font:inherit;color:inherit;display:inline;letter-spacing:inherit}
.stats .stat-num{display:inline;font-family:var(--body);font-size:inherit;line-height:inherit;font-weight:700;color:var(--brand);margin:0;letter-spacing:0}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:3px;padding:clamp(24px,2.6vw,34px);position:relative;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 26px 54px -38px rgba(26,20,48,.5);border-color:#D6CDE8}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card__ico{width:40px;height:40px;margin-bottom:18px;color:var(--brand)}
.card--feature{border-color:var(--brand);border-width:2px;box-shadow:0 26px 60px -40px rgba(103,66,158,.6)}
.card--feature::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(103,66,158,.045),rgba(103,66,158,0) 60%);pointer-events:none;border-radius:inherit}
.card--feature>*{position:relative;z-index:1}

/* the fragmented route, deliberately dimmed */
.card--dim{background:#F2F1EE;border-color:#E2DFD8;color:#6F6B63}
.card--dim::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(120,114,104,.07) 0 2px,rgba(120,114,104,0) 2px 11px)}
.card--dim>*{position:relative;z-index:1}
.card--dim h3{color:#4F4B44}
.card--dim .tag{background:#E7E4DD;color:#6F6B63}
.card--dim .path li::before{border-color:#CFCBC2;color:#8B867D}
.card--dim:hover{transform:none;box-shadow:none;border-color:#E2DFD8}
.card--dim::after{display:none}
.section--wash .card--dim{background:#EFEDE7}

/* the time / cost / provider comparison rows */
.cmp{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:11px}
.cmp>div{display:block;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.cmp>div:last-child{border-bottom:0;padding-bottom:0}
.cmp dt{font-family:var(--logo);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;white-space:nowrap}
.cmp dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.3;letter-spacing:-.015em}
.card--dim .cmp{border-top-color:#DEDBD3}
.card--dim .cmp>div{border-bottom-color:#E4E1DA}
.card--dim .cmp dd{color:#5E5A53;font-weight:600}
.card--feature .cmp dd{color:var(--brand-deep)}
.card--flat{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0}
.card--flat:hover{transform:none;box-shadow:none}

.tag{display:inline-block;font-family:var(--label);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:var(--wash);border-radius:2px;padding:5px 9px;margin-bottom:14px}
.tag--ink{background:var(--ink);color:#fff}

/* ---------- Comparison path ---------- */
.path{list-style:none;margin:20px 0 0;padding:0;counter-reset:s}
.path li{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:.97rem;align-items:flex-start}
.path li:last-child{border-bottom:0}
.path li::before{
  counter-increment:s;content:counter(s);flex:none;width:23px;height:23px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;font-family:var(--label);font-size:.7rem;color:var(--muted);margin-top:1px;
}
.path--ours li::before{border-color:var(--brand);background:var(--brand);color:#fff}

.price-lg{font-family:var(--display);font-size:clamp(2.6rem,5vw,3.6rem);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-lg sup{font-size:.46em;top:-.58em;position:relative;margin-right:.04em}

/* ---------- Fee table ---------- */
.fees{border-top:1px solid var(--ink)}
.fee{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
.fee h3{margin-bottom:6px}
.fee .amt{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.fee .mins{font-family:var(--label);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;text-align:right;margin-top:8px}

/* ---------- Credentials list ---------- */
.creds{list-style:none;margin:0;padding:0;display:grid;gap:0}
.creds li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.creds .yr{font-family:var(--label);font-size:.76rem;color:var(--brand);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.creds b{font-weight:600;display:block}
.creds span.sub{color:var(--muted);font-size:.92rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ink)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  background:none;border:0;padding:24px 0;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.26rem);font-weight:600;color:var(--ink);line-height:1.35;
}
.faq__q .pm{flex:none;width:22px;height:22px;position:relative;margin-top:5px}
.faq__q .pm::before,.faq__q .pm::after{content:"";position:absolute;background:var(--brand);transition:transform .38s cubic-bezier(.2,.7,.3,1),opacity .3s ease}
.faq__q .pm::before{left:0;right:0;top:10.5px;height:1.5px}
.faq__q .pm::after{top:0;bottom:0;left:10.5px;width:1.5px}
.faq__item.is-open .pm::after{transform:rotate(90deg);opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .42s cubic-bezier(.3,.8,.25,1)}
.faq__a>div{padding:0 0 26px;max-width:66ch;color:var(--ink-soft)}
.faq__a p:last-child{margin-bottom:0}

/* ---------- Notice bands ---------- */
.notice{border:1px solid var(--line);border-left:3px solid var(--amber);background:var(--amber-bg);padding:20px 24px;border-radius:2px}
.notice b{color:var(--amber)}
.notice p:last-child{margin-bottom:0}
.notice--calm{background:var(--wash);border-left-color:var(--brand)}
.notice--calm b{color:var(--brand-deep)}

/* ---------- Form ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-family:var(--label);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.field .req{color:var(--brand)}
.input,select,textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:2px;padding:14px 15px;width:100%;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(138,99,196,.13)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft)}
.consent input{margin-top:5px;accent-color:var(--brand);width:16px;height:16px;flex:none}
.formnote{font-size:.84rem;color:var(--muted)}
.formmsg{display:none;padding:16px 18px;border-radius:2px;font-size:.94rem}
.formmsg.ok{display:block;background:var(--wash);border:1px solid #D3C4EC;color:var(--brand-deep)}
.formmsg.err{display:block;background:#FBEEEA;border:1px solid #E7C6BC;color:#8A3B22}

/* ---------- Contact rail ---------- */
.rail{display:grid;gap:22px}
.rail .item{border-top:1px solid var(--line);padding-top:16px}
.rail .item span{font-family:var(--label);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
.rail .item b{font-family:var(--display);font-size:1.2rem;font-weight:500}
.rail .item a{text-decoration:none}
.rail .item a:hover{color:var(--brand)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#B5ACCB;padding-block:clamp(52px,6vw,78px) 30px;font-size:.92rem}
.footer a{color:#E3DCF2;text-decoration:none;transition:color .25s ease}
.footer a:hover{color:#fff}
.footer h4{color:#fff;font-family:var(--logo);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin-bottom:16px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.footer__brand b{font-family:var(--display);color:#fff;font-size:1.3rem;font-weight:700;display:block;letter-spacing:-.015em}
.footer__brand span{font-family:var(--logo);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#B9A3DC}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer__bot{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-top:22px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:.8rem;color:#8E85A8}

/* ---------- Mobile sticky CTA ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);background:#fff;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -6px 24px -18px rgba(26,20,48,.7)}
.mbar a{padding:16px 8px;text-align:center;text-decoration:none;font-size:.88rem;font-weight:600;letter-spacing:.01em}
.mbar a:first-child{background:var(--ink);color:#fff}
.mbar a:last-child{color:var(--ink)}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.draw path,.draw circle,.draw line,.draw rect,.draw polyline{
  stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset 1.1s cubic-bezier(.3,.8,.25,1) .15s;
}
.is-in .draw path,.is-in .draw circle,.is-in .draw line,.is-in .draw rect,.is-in .draw polyline{stroke-dashoffset:0}

/* ---------- Page head (interior) ---------- */
.phead{padding-block:clamp(48px,6vw,86px) clamp(32px,4vw,52px);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-10%;top:-40%;width:46vw;height:46vw;max-width:560px;max-height:560px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(138,99,196,.1),rgba(138,99,196,0) 65%)}
.phead .container{text-align:center}
.phead .eyebrow{justify-content:center}
.phead h1{margin-inline:auto;max-width:22ch;text-wrap:balance}
.phead .lede{margin-inline:auto;max-width:58ch;text-wrap:pretty}
.crumb{font-family:var(--label);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--brand)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .nav,.header__navbar{display:none}
  .hide-sm{display:none}
  .header__in{height:84px}
  .header.is-stuck .header__in{height:84px}
  .brand__logo{height:48px!important;max-width:58vw}
  .header.is-stuck .brand__logo{height:42px!important}
  .hdr-phone{display:none}
  .burger{display:block}
  .hero__grid,.split{grid-template-columns:1fr}
  .split--rev>*:first-child{order:0}
  .hero__media{max-width:440px;margin-inline:auto;width:100%}
  .hero__badge{left:0}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px;padding-bottom:58px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats div{padding:20px 18px 20px 0}
  .stats div:nth-child(2){border-right:0;padding-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .mbar{display:grid}
  .hero::after{display:none}
  .fee{grid-template-columns:1fr;gap:10px}
  .fee .amt{font-size:2rem}
  .fee .mins{text-align:left}
  .footer__grid{grid-template-columns:1fr;gap:30px}
  .hero__badge{position:static;margin-top:16px;max-width:none;box-shadow:none}
}
@media (max-width:440px){
  .stats{grid-template-columns:1fr}
  .stats div{border-right:0;padding-right:0;border-bottom:1px solid var(--line)}
  .grid-4{grid-template-columns:1fr}
  .btn{width:100%}
  .row .btn{width:auto;flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero h1 .ln>span{transform:none}
  .fade-up{opacity:1}
}

@media print{
  .header,.mbar,.drawer,.scrim,.progress,.announce{display:none!important}
  body{font-size:11pt}
}

/* ============================================================
   MOTION & POLISH LAYER
   Slow, continuous ambience in the hero; short, purposeful
   responses on hover. Everything here is disabled wholesale by
   the reduced-motion block at the end of this file.
   ============================================================ */

/* ---- hero ambience: two blobs drifting at different speeds ---- */
.hero::before{
  content:"";position:absolute;left:-20%;bottom:-34%;width:54vw;height:54vw;
  max-width:700px;max-height:700px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(192,138,74,.13),rgba(192,138,74,0) 64%);
  animation:drift 26s ease-in-out infinite alternate;
}
.hero::after{animation:drift2 21s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-46px) scale(1.14)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-56px,52px) scale(1.09)}}

/* ---- portrait: wipe in, then a very slow ken-burns ---- */
.hero .hero__frame{clip-path:inset(0 0 100% 0);animation:wipeUp 1.15s .3s cubic-bezier(.3,.85,.25,1) forwards}
@keyframes wipeUp{to{clip-path:inset(0 0 0 0)}}
.hero .hero__frame img{animation:kenburns 24s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.hero__media{transition:transform .6s cubic-bezier(.2,.7,.3,1)}

/* ---- award badge: lands, then floats ---- */
.hero__badge{
  border-top:2px solid var(--accent);
  animation:badgeIn .95s .9s cubic-bezier(.2,.8,.25,1) both,
            floatY 7s 2s ease-in-out infinite;
}
.hero__badge span{color:var(--accent)}
.hero__badge .star{width:13px;height:13px;vertical-align:-1px;margin-right:6px;color:var(--accent)}
@keyframes badgeIn{from{opacity:0;transform:translateY(22px) scale(.95)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---- stat strip: hairlines draw themselves in sequence ---- */
.stats>div::before{
  content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--brand);
  animation:lineGrow .85s cubic-bezier(.2,.7,.3,1) forwards;
}
.stats>div:nth-child(1)::before{animation-delay:.75s}
.stats>div:nth-child(2)::before{animation-delay:.87s}
.stats>div:nth-child(3)::before{animation-delay:.99s}
.stats>div:nth-child(4)::before{animation-delay:1.11s}
@keyframes lineGrow{to{width:100%}}
.stats>div:nth-child(3)::before{background:var(--accent)}

/* ---- eyebrow rule grows when its section arrives ---- */
.eyebrow.reveal::before{width:0;transition:width .75s cubic-bezier(.2,.7,.3,1) .12s}
.eyebrow.reveal.is-in::before{width:36px}

/* ---- buttons: light sweep, and ghost fills from the base up ---- */
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .75s cubic-bezier(.3,.8,.25,1);
}
.btn:hover::before{transform:translateX(130%)}
.btn--ghost::before{background:linear-gradient(115deg,transparent 32%,rgba(103,66,158,.14) 50%,transparent 68%)}
.btn--ghost::after{
  content:"";position:absolute;inset:0;z-index:0;background:var(--ink);
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.3,.85,.25,1);
}
.btn--ghost:hover{--fg:#fff;--bd:var(--ink)}
.btn--ghost:hover::after{transform:scaleY(1)}
.btn--light:hover{--bg:var(--accent-soft);--bd:var(--accent-soft)}

/* ---- cards: an accent hairline draws across the top ---- */
.card::after{
  content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--brand);
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover::after{width:100%}
.card--feature::after{background:var(--accent)}
.card__ico{transition:transform .55s cubic-bezier(.2,.75,.25,1),color .4s ease}
.card:hover .card__ico{transform:translateY(-4px) scale(1.07);color:var(--brand-lite)}

/* ---- numbered steps light up on hover ---- */
.path li{transition:padding-left .4s cubic-bezier(.2,.7,.3,1)}
.path li::before{transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.card:hover .path li:hover{padding-left:6px}
.path li:hover::before{transform:scale(1.12)}

/* ---- fee rows ---- */
.fee{transition:background .4s ease,padding-left .4s cubic-bezier(.2,.7,.3,1)}
.fee:hover{background:linear-gradient(90deg,rgba(138,99,196,.045),transparent);padding-left:14px}

/* ---- credential rows ---- */
.creds li{transition:border-color .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.creds li:hover{border-bottom-color:var(--brand);transform:translateX(4px)}


/* ---- FAQ rows tint as you move down them ---- */
.faq__q{transition:color .3s ease,padding-left .4s cubic-bezier(.2,.7,.3,1)}
.faq__q:hover{color:var(--brand-deep)}
.faq__item.is-open .faq__q{color:var(--brand-deep)}

/* ---- mobile action bar rises once you start reading ---- */
.mbar{transform:translateY(105%);transition:transform .5s cubic-bezier(.3,.85,.25,1)}
.mbar.is-on{transform:none}

/* ---- portraits elsewhere wipe in on scroll ---- */
.reveal .hero__frame,.hero__frame.reveal{overflow:hidden}
.hero__frame.reveal{opacity:1;transform:none}
.hero__frame.reveal img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.3,.85,.25,1)}
.hero__frame.reveal.is-in img{clip-path:inset(0 0 0 0)}

/* ---- section tint bands fade their edge ---- */
.section--wash{position:relative}
.section--wash::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,66,158,.28),transparent)}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.hero .hero__frame,.hero .hero__frame img,.hero__badge,.stats>div::before{animation:none!important}
  .hero .hero__frame{clip-path:none!important}
  .hero__frame.reveal img{clip-path:none!important}
  .stats>div::before{width:100%}
  .mbar{transform:none}
}


/* ---- How it works: the four-step journey ---- */
.steps-grid{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:step}
.step{background:#FFFDFA;border:1px solid #E6DFD0;border-radius:3px;padding:clamp(22px,2.4vw,30px);
  position:relative;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .45s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 26px 54px -38px rgba(26,20,48,.45);border-color:#D8CFE8}
.step::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--brand);
  transition:width .6s cubic-bezier(.2,.7,.3,1)}
.step:hover::after{width:100%}
.step__n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--brand);color:#fff;font-family:var(--display);font-weight:700;font-size:1.1rem;
  margin-bottom:18px;transition:transform .5s cubic-bezier(.2,.75,.25,1)}
.step:hover .step__n{transform:scale(1.08)}
.step:nth-child(4) .step__n{background:var(--accent)}
.step h3{margin-bottom:9px;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.step p{margin:0;font-size:.94rem;color:var(--ink-soft)}
@media (max-width:1000px){.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps-grid{grid-template-columns:1fr}}


/* step meta line - the figure that matters, under each step heading */
.step__meta{font-family:var(--logo);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);margin:0 0 9px!important}
.step:nth-child(4) .step__meta{color:var(--accent-deep)}


/* ---- Section headings -------------------------------------------------
   One rule, tied to layout rather than taste: a heading that introduces a
   whole section is centred above it; a heading that sits beside content
   in a two-column block stays flush left with the column it belongs to. */
.sec-intro{max-width:var(--narrow);margin-inline:auto;text-align:center}
.sec-intro .eyebrow{justify-content:center}
.sec-intro .lede,.sec-intro p{margin-inline:auto}
.sec-intro h2{margin-inline:auto;max-width:24ch;text-wrap:balance}


/* a card that spans the row, so a grid never ends on an orphan */
.card--wide{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.card--wide .card__ico{margin-bottom:0}
.card--wide h3{margin-bottom:5px}
.card--wide p{margin:0;max-width:72ch}
@media (max-width:620px){.card--wide{grid-template-columns:1fr;gap:14px}.card--wide .card__ico{margin-bottom:4px}}


/* ---- larger "next step" label on the closing CTAs ---- */
.eyebrow--lg{font-size:.92rem;letter-spacing:.12em}

/* ---- section head with the label on the same line ---- */
.head-inline{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 18px}
.head-inline .eyebrow{margin:0}
.head-inline h2{margin:0}

/* ---- wide banner image ---- */
.banner{margin:0;border-radius:3px;overflow:hidden;background:var(--wash);aspect-ratio:16/5.4}
.banner img{width:100%;height:100%;object-fit:cover;display:block}
.banner.is-empty{display:none}
.banner img{object-position:center 32%}

/* a portrait slot with no photograph yet removes itself and lets the
   text take the full width, rather than leaving a void beside it */
.is-empty{display:none!important}
.split.is-solo,.hero__grid.is-solo{grid-template-columns:minmax(0,1fr)}
.split.is-solo .measure,.split.is-solo p{max-width:72ch}
.hero__grid.is-solo{max-width:var(--narrow)}

/* ---- the two real booking routes ---- */
.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  text-decoration:none;background:#FFFDFA;border:1.5px solid var(--brand);border-radius:3px;
  padding:clamp(20px,2.2vw,26px);transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease,background .3s ease}
.route:hover{transform:translateY(-3px);box-shadow:0 24px 50px -36px rgba(103,66,158,.55);background:#FFF}
.route__n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);
  color:#fff;font-family:var(--display);font-weight:700;font-size:1rem}
.route b{display:block;font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:-.015em;margin-bottom:3px}
.route em{font-style:normal;font-size:.92rem;color:var(--ink-soft)}
.route .arw{color:var(--brand);font-size:1.2rem;transition:transform .35s ease}
.route:hover .arw{transform:translateX(4px)}
.route--alt{border-color:var(--accent)}
.route--alt .route__n{background:var(--accent)}
.route--alt .arw{color:var(--accent-deep)}
@media (max-width:760px){.route-grid{grid-template-columns:1fr}}