/* Layout: night-sky ground, one faceted-gem butterfly in the hero; sections follow the metamorphosis from first hello to fees and contact. Dark-first. */
:root{
  --bg:#0e1430;          /* navy night */
  --bg-2:#141a3c;
  --surface:#1b2148;
  --line:#2c3366;
  --fg:#eee8f4;
  --muted:#aaa4c6;
  --eggplant:#5a2462;
  --amethyst:#b98ad0;
  --teal:#2fb0a6;
  --teal-deep:#17615f;
  --sapphire:#2c4a9a;
  --citrine:#e2b65c;
  --on-accent:#0e1430;
  --display:"Marcellus","Cinzel",Georgia,"Times New Roman",serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.7rem; --step-3:2.3rem; --step-4:clamp(2.5rem,6vw,4rem);
  --radius:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--amethyst)}
:focus-visible{outline:2px solid var(--citrine);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--citrine);font-weight:600}
.lede{color:var(--muted);max-width:62ch}
section{padding-block:clamp(56px,9vw,104px)}
.sec-head{display:grid;gap:12px;margin-bottom:40px;max-width:68ch}
.sec-head h2{font-size:var(--step-3)}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand svg{width:34px;height:28px;flex:none}
.brand-name{font-family:var(--display);font-size:1.25rem;line-height:1.05}
.brand-name small{display:block;font-family:var(--body);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:var(--fg);text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--teal)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none;font-size:.95rem;border:1px solid transparent;cursor:pointer;font-family:var(--body)}
.btn-primary{background:var(--teal);color:var(--on-accent)}
.btn-primary:hover{background:var(--amethyst);color:var(--on-accent)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:8px 12px;font:inherit;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:12px;justify-content:center}
}

/* Hero */
.hero{padding-block:clamp(40px,7vw,88px) clamp(48px,7vw,80px);background:
  radial-gradient(60% 70% at 85% 30%, color-mix(in srgb,var(--eggplant) 55%,transparent), transparent 70%),
  radial-gradient(40% 50% at 10% 90%, color-mix(in srgb,var(--teal-deep) 35%,transparent), transparent 70%),
  var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-copy{display:grid;gap:22px;min-width:0}
.hero h1{font-size:var(--step-4);letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--amethyst)}
.hero .lede{font-size:var(--step-1);color:var(--fg);opacity:.86}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:var(--step--1)}
.hero-meta span::before{content:"";display:inline-block;width:7px;height:7px;transform:rotate(45deg);background:var(--teal);margin-right:8px;vertical-align:middle}
.butterfly{width:100%;max-width:460px;justify-self:center;overflow:visible}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.butterfly{max-width:300px;order:-1}}

/* gem facets */
.f1{fill:var(--eggplant)} .f2{fill:var(--teal)} .f3{fill:var(--sapphire)} .f4{fill:var(--amethyst)} .f5{fill:var(--citrine)} .f6{fill:var(--teal-deep)}
.facets polygon{stroke:var(--bg);stroke-width:1.6;stroke-linejoin:round}
.wing-r{transform-origin:407.5px 290px;animation:flap 7s ease-in-out infinite}
.wing-l{transform-origin:407.5px 290px;animation:flap 7s ease-in-out infinite}
.glint{animation:glint 5s ease-in-out infinite}
.glint.d2{animation-delay:1.7s}.glint.d3{animation-delay:3.3s}
@keyframes flap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
@keyframes glint{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.wing-r,.wing-l,.glint{animation:none}}

/* Journey */
.journey{background:var(--bg-2)}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:phase}
.phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;gap:14px;align-content:start;min-width:0}
.phase-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.phase-num{font-family:var(--display);color:var(--citrine);font-size:1rem;letter-spacing:.12em}
.phase svg{width:72px;height:44px}
.phase h3{font-size:var(--step-2)}
.phase .sub{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);font-weight:600}
.phase p{color:var(--muted)}
.ticks{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:6px;font-size:.95rem}
.ticks li{display:flex;gap:10px}
.ticks li::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;transform:rotate(45deg);background:var(--amethyst)}
@media (max-width:860px){.phases{grid-template-columns:1fr}}

/* Protection */
.wards{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.ward{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:28px 24px 28px 0;border-bottom:1px solid var(--line);min-width:0}
.ward:nth-child(odd){border-right:1px solid var(--line)}
.ward:nth-child(even){padding-left:28px}
.ward svg{width:40px;height:48px}
.ward h3{font-size:var(--step-1);margin-bottom:6px}
.ward p{color:var(--muted)}
.ward .stone{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--citrine);margin-bottom:4px;display:block}
@media (max-width:760px){.wards{grid-template-columns:1fr}.ward:nth-child(odd){border-right:0}.ward:nth-child(even){padding-left:0}}

/* About */
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.photo{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:200px 200px var(--radius) var(--radius);overflow:hidden;background:
  conic-gradient(from 210deg at 50% 60%, var(--eggplant), var(--sapphire), var(--teal-deep), var(--eggplant));display:grid;place-items:center}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-fallback{font-family:var(--display);font-size:3rem;color:#f3ecf8;opacity:.9;text-align:center;line-height:1.1}
.photo-fallback small{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-top:10px}
.about-copy{display:grid;gap:18px;min-width:0}
.about-copy h2{font-size:var(--step-3)}
.creds{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.88rem;color:var(--fg);background:transparent}
.pull{font-family:var(--display);font-size:var(--step-2);line-height:1.3;color:var(--amethyst);border-left:2px solid var(--teal);padding-left:20px}
.about-copy p{max-width:64ch}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.photo{max-width:340px}}

/* Specialties */
.spec-featured{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
.spec{border-top:3px solid var(--teal);background:var(--surface);border-radius:0 0 var(--radius) var(--radius);padding:22px;display:grid;gap:8px;align-content:start;min-width:0}
.spec:nth-child(2){border-top-color:var(--amethyst)}
.spec:nth-child(3){border-top-color:var(--citrine)}
.spec:nth-child(4){border-top-color:var(--sapphire)}
.spec h3{font-size:var(--step-1)}
.spec p{color:var(--muted);font-size:.97rem}
.spec-all h3{font-family:var(--body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:960px){.spec-featured{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.spec-featured{grid-template-columns:1fr}}

/* Supervision */
.supervision{background:linear-gradient(160deg,var(--eggplant),color-mix(in srgb,var(--eggplant) 40%,var(--bg)) 70%);color:#f3ecf8}
.supervision .eyebrow{color:#f0cf87}
.supervision .lede{color:#e2d6ea}
.sup-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.sup-list{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.22)}
.sup-item{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.22);display:grid;gap:4px}
.sup-item strong{font-family:var(--display);font-weight:400;font-size:var(--step-1)}
.sup-item span{color:#e2d6ea}
.sup-card{background:rgba(14,20,48,.45);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:28px;display:grid;gap:14px}
.sup-card h3{font-size:var(--step-2)}
.sup-card p{color:#e2d6ea}
.sup-card .btn-primary{background:#f0cf87;color:#2a1030;justify-self:start}
.sup-card .btn-primary:hover{background:#ffffff;color:#2a1030}
@media (max-width:860px){.sup-grid{grid-template-columns:1fr}}

/* Khufu */
.khufu-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.khufu-photo{aspect-ratio:1;border-radius:50%;max-width:420px;width:100%;justify-self:center;background:
  radial-gradient(circle at 35% 30%, var(--citrine), transparent 45%), conic-gradient(from 0deg, var(--teal-deep), var(--sapphire), var(--eggplant), var(--teal-deep))}
.khufu-copy{display:grid;gap:16px;min-width:0}
.khufu-copy h2{font-size:var(--step-3)}
.khufu-copy p{color:var(--muted);max-width:60ch}
.note{border:1px dashed var(--citrine);border-radius:10px;padding:14px 16px;color:var(--fg);font-size:.95rem}
.note b{color:var(--citrine);font-weight:600}
@media (max-width:860px){.khufu-grid{grid-template-columns:1fr}.khufu-photo{max-width:280px}}

/* Fees */
.fees{background:var(--bg-2)}
.fee-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:start}
.rate{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:grid;gap:8px}
.rate .price{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.rate .unit{color:var(--muted)}
.rate hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.rate h3{font-family:var(--body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ins{columns:2;column-gap:28px;list-style:none;padding:0;margin:0 0 20px}
.ins li{padding:7px 0;border-bottom:1px solid var(--line);break-inside:avoid;font-size:.97rem}
.fee-side{display:grid;gap:20px;min-width:0}
.fee-side h3{font-size:var(--step-1)}
.gfe{font-size:.92rem;color:var(--muted)}
@media (max-width:860px){.fee-grid{grid-template-columns:1fr}}
@media (max-width:460px){.ins{columns:1}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
.contact-copy{display:grid;gap:18px;min-width:0}
.contact-copy h2{font-size:var(--step-3)}
.lines{display:grid;gap:12px}
.cline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.cline .lbl{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cline .val{font-size:var(--step-1);font-weight:500;user-select:all;overflow-wrap:anywhere}
.cline .val a{color:var(--fg);text-decoration:none}
.copy{background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:7px 14px;font:inherit;font-size:.88rem;cursor:pointer}
.copy:hover{border-color:var(--teal);color:var(--teal)}
.privacy{font-size:.92rem;color:var(--muted)}
.where{display:grid;gap:18px}
.where div{border-left:2px solid var(--amethyst);padding-left:16px}
.where h3{font-family:var(--body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.crisis{margin-top:28px;background:color-mix(in srgb,var(--teal) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--teal) 40%,var(--line));border-radius:12px;padding:18px 20px;font-size:.97rem}
.crisis b{color:var(--teal)}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:36px;color:var(--muted);font-size:.92rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.badges{display:flex;flex-wrap:wrap;gap:8px}

/* Supervision page */
.sub-hero{padding-block:clamp(48px,8vw,96px)}
.sub-hero .sec-head{margin-bottom:0}
.sub-hero h1{font-size:var(--step-4)}
.rate-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rate-row .rate{align-content:start}
.teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.teaser .sec-head{margin-bottom:0}
@media (max-width:860px){.rate-row{grid-template-columns:1fr}}

/* Multi-page additions */
main h1{font-size:var(--step-3)}
.hero h1,.sub-hero h1{font-size:var(--step-4)}
.nav a[aria-current="page"]:not(.btn){color:var(--teal)}
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.explore .spec{text-decoration:none;color:var(--fg);transition:transform .2s ease,background .2s ease}
.explore .spec:nth-child(5){border-top-color:var(--teal)}
.explore .spec:nth-child(6){border-top-color:var(--amethyst)}
.explore .spec:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--surface) 85%,var(--teal))}
.explore .more{color:var(--teal);font-weight:600;font-size:.92rem;margin-top:6px}
.cta-band{background:var(--bg-2);border-top:1px solid var(--line)}
@media (max-width:960px){.explore{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.explore{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.explore .spec{transition:none}.explore .spec:hover{transform:none}}

/* Photos */
.about-grid .photo img{object-position:50% 30%}
.khufu-photos{position:relative;width:100%;max-width:440px;justify-self:center;padding-bottom:48px}
.khufu-main{width:86%;aspect-ratio:4/5}
.khufu-main img{object-position:50% 40%}
.khufu-inset{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:1;border-radius:50%;border:5px solid var(--bg)}
.khufu-inset img{object-position:50% 35%}
@media (max-width:860px){.khufu-photos{max-width:340px}}

/* Five featured specialties */
.spec-featured{grid-template-columns:repeat(5,1fr)}
.spec-featured .spec:nth-child(5){border-top-color:var(--teal-deep)}
@media (max-width:1100px){.spec-featured{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.spec-featured{grid-template-columns:1fr}}

/* Butterfly shimmer */
.butterfly{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--amethyst) 45%,transparent)) drop-shadow(0 0 32px color-mix(in srgb,var(--teal) 30%,transparent))}
.sheen-wrap{mix-blend-mode:screen}
.sheen{transform-box:view-box;animation:sheen 6.5s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-80px);opacity:0}12%{opacity:1}55%{transform:translateX(320px);opacity:1}62%,100%{transform:translateX(320px);opacity:0}}
.aura{animation:aura 6.5s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.sheen{animation:none;opacity:0}.aura{animation:none}}
/* Specialty pop-outs */
.tip{position:relative;display:inline-flex}
.tip .chip{font:inherit;font-size:.88rem;cursor:help;transition:border-color .15s ease,color .15s ease}
.tip:hover .chip,.tip .chip:focus-visible,.tip .chip:focus{border-color:var(--teal);color:var(--teal)}
.tip-hint{color:var(--muted);font-size:.92rem;margin:-6px 0 14px}
.pop{display:none;position:absolute;z-index:20;bottom:calc(100% + 10px);left:50%;transform:translateX(calc(-50% + var(--shift,0px)));width:max-content;max-width:min(280px,calc(100vw - 24px));background:var(--surface);color:var(--fg);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:12px;padding:12px 14px;font-size:.92rem;line-height:1.5;box-shadow:0 12px 32px color-mix(in srgb,var(--bg) 70%,transparent),0 2px 6px color-mix(in srgb,#000 18%,transparent)}
.pop::after{content:"";position:absolute;top:100%;left:calc(50% - var(--shift,0px));transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--line)}
.tip:hover .pop,.tip:focus-within .pop{display:block;animation:pop-in .16s ease-out}
@keyframes pop-in{from{opacity:0;margin-bottom:-4px}to{opacity:1;margin-bottom:0}}
@media (prefers-reduced-motion: reduce){.tip:hover .pop,.tip:focus-within .pop{animation:none}}

/* Six featured specialties: two rows of three */
.spec-featured{grid-template-columns:repeat(3,1fr)}
.spec-featured .spec:nth-child(6){border-top-color:color-mix(in srgb,var(--eggplant) 55%,var(--amethyst))}
@media (max-width:900px){.spec-featured{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.spec-featured{grid-template-columns:1fr}}

/* Text for screen readers and search engines only */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Supervisor experience */
.experience{background:var(--bg-2);border-block:1px solid var(--line)}
.exp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.exp-main{display:grid;gap:18px;min-width:0}
.exp-main h2{font-size:var(--step-3)}
.exp-main p{color:var(--muted);max-width:62ch}
.exp-list{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line);min-width:0}
.exp-list li{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.exp-list strong{font-family:var(--display);font-weight:400;font-size:var(--step-1);color:var(--amethyst);line-height:1.2}
.exp-list span{color:var(--muted);font-size:.97rem}
@media (max-width:860px){.exp-grid{grid-template-columns:1fr}}
@media (max-width:480px){.exp-list li{grid-template-columns:1fr}}

/* Path to licensure */
.lic-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.lic-intro{display:grid;gap:18px;min-width:0}
.lic-intro h2{font-size:var(--step-3)}
.lic-note{display:grid;gap:12px;border:1px dashed var(--citrine);border-radius:12px;padding:16px 18px;font-size:.95rem;color:var(--fg)}
.lic-note b{color:var(--citrine);font-weight:600}
.lic-steps{list-style:none;margin:0;padding:0;counter-reset:lic;display:grid;border-top:1px solid var(--line);min-width:0}
.lic-steps li{counter-increment:lic;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--line)}
.lic-steps li::before{content:counter(lic);grid-row:1 / span 2;font-family:var(--display);font-size:2rem;line-height:1;color:var(--citrine)}
.lic-steps h3{font-size:var(--step-1);line-height:1.2}
.lic-steps p{color:var(--muted);font-size:.97rem}
.lic-source{margin-top:28px;font-size:.88rem;color:var(--muted);max-width:90ch}
.sup-link{color:#f0cf87;font-size:.95rem}
.sup-link:hover{color:#fff}
@media (max-width:860px){.lic-grid{grid-template-columns:1fr}}

/* ===== Accessibility fixes (WCAG 2.1 AA) ===== */
/* Nav button keeps dark text on teal (was overridden by .nav a) */
.nav .btn-primary,.nav .btn-primary:hover{color:var(--on-accent)}
.nav .btn-primary:hover{background:var(--amethyst)}
/* Skip link */
.skip-link{position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:calc(-60px - env(safe-area-inset-top,0px));z-index:100;background:var(--citrine);color:var(--on-accent);padding:10px 16px;border-radius:0 0 10px 10px;font-weight:600;text-decoration:none}
.skip-link:focus{top:env(safe-area-inset-top,0px);color:var(--on-accent)}
main:focus{outline:none}
/* Headings promoted from h3 to h2 keep their look */
.spec h2{font-size:var(--step-1)}
.spec-all h2{font-family:var(--body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.rate h2{font-family:var(--body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fee-side h2{font-size:var(--step-1)}
.where h2{font-family:var(--body);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
/* Pop-outs: reachable by pointer, dismissible with Esc, tap to toggle */
.pop::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.tip.open .pop{display:block}
.tip.dismissed .pop{display:none!important}
/* Butterfly pause control */
.bf-wrap{position:relative;width:100%;max-width:460px;justify-self:center}
.bf-wrap .butterfly{max-width:none;display:block}
.motion-toggle{position:absolute;right:0;bottom:-8px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 12px;font:inherit;font-size:.8rem;cursor:pointer}
.motion-toggle:hover{color:var(--fg);border-color:var(--teal)}
.bf-wrap.paused .wing-r,.bf-wrap.paused .wing-l,.bf-wrap.paused .aura{animation:none}
.bf-wrap.paused .sheen{animation:none;opacity:0}
@media (max-width:860px){.bf-wrap{order:-1;max-width:300px}}
@media (prefers-reduced-motion: reduce){.motion-toggle{display:none}}

/* ===== New logo ===== */
.brand-mark{height:32px;width:auto;flex:none;filter:drop-shadow(0 0 5px rgba(185,138,208,.45))}
.butterfly{filter:drop-shadow(0 0 8px rgba(252,243,221,.35)) drop-shadow(0 0 22px rgba(185,138,208,.45)) drop-shadow(0 0 44px rgba(47,176,166,.30))}
.bf-wrap{max-width:520px}
.sheen{animation-name:sheen-wide}
@keyframes sheen-wide{0%{transform:translateX(-260px);opacity:0}12%{opacity:1}55%{transform:translateX(1000px);opacity:1}62%,100%{transform:translateX(1000px);opacity:0}}
.foot{align-items:center}
.foot-logo{width:200px;height:auto;max-width:100%;display:block;flex:none}
@media (max-width:860px){.bf-wrap{max-width:340px}}
.foot{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;row-gap:10px;align-items:center}
.foot-logo{grid-row:span 2}
.foot .badges{justify-self:start}
@media (max-width:640px){.foot{grid-template-columns:1fr}.foot-logo{grid-row:auto}}

/* 5-second hero */
.hero h1{font-size:clamp(2.1rem,4.3vw,3.3rem);line-height:1.12}
.hero .lede{font-size:var(--step-1)}
.hero-specs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hero-specs .chip{font-size:.88rem}
.hero-more{font-size:.92rem;font-weight:600;margin-left:4px}
@media (max-width:860px){
  .hero{padding-block:20px 48px}
  .hero-grid{gap:16px}
  .bf-wrap{max-width:170px}
  .motion-toggle{right:-70px;bottom:auto;top:50%;transform:translateY(-50%);font-size:.72rem;padding:5px 10px}
  .hero .lede{font-size:var(--step-0)}
}

/* Pause control: icon + label; icon-only on narrow screens */
.motion-toggle{display:inline-flex;align-items:center;gap:8px}
.mt-icon{width:10px;height:10px;flex:none;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.motion-toggle[aria-pressed="true"] .mt-icon{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (max-width:860px){
  .motion-toggle{right:-44px;top:4px;bottom:auto;transform:none;width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
  .mt-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

.hero-specs{gap:8px;column-gap:7px}
.hero-specs .chip{white-space:nowrap;font-size:.85rem;padding:5px 11px}
.hero-more{margin:-8px 0 0;justify-self:start;width:max-content}
.hero-grid{grid-template-columns:1.25fr .75fr}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
@media (min-width:861px) and (max-width:1010px){.hero-specs{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start}}
@media (min-width:361px) and (max-width:700px){.hero-specs{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start}}
/* Pause control sits below the butterfly on wide screens, beside it on phones */
.motion-toggle{position:static;display:flex;width:max-content;margin:14px auto 0}
@media (max-width:860px){.motion-toggle{position:absolute;margin:0}}
@media (max-width:860px){.motion-toggle{width:34px;height:34px}}

/* Khufu page: single photo */
.khufu-photos{padding-bottom:0}
.khufu-main{width:100%}
/* Khufu card on the home page */
.explore .has-avatar{position:relative;padding-right:104px}
.card-avatar{position:absolute;top:18px;right:18px;width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line),0 0 18px color-mix(in srgb,var(--amethyst) 35%,transparent)}

/* Footer lockup: vector butterfly + live text (legible at small sizes) */
.foot-lockup{display:grid;justify-items:center;gap:6px;width:max-content;grid-row:span 2}
.foot-lockup img{height:46px;width:auto;filter:drop-shadow(0 0 8px rgba(185,138,208,.45)) drop-shadow(0 0 16px rgba(47,176,166,.25))}
.fl-name{font-family:var(--display);font-size:1.75rem;line-height:1;color:#fcf3dd;text-shadow:0 0 14px rgba(252,243,221,.22)}
.fl-tag{display:flex;align-items:center;gap:10px;font-size:.66rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--teal)}
.fl-tag::before,.fl-tag::after{content:"";width:22px;height:1px;background:currentColor;opacity:.8}
@media (max-width:640px){.foot-lockup{grid-row:auto;justify-self:start}}
.fl-tag::before{margin-right:.3em}

/* FAQ */
.faq{background:var(--bg-2);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.faq-grid .sec-head{margin-bottom:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px)}
.faq-list{display:grid;border-top:1px solid var(--line);min-width:0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-family:var(--display);font-size:var(--step-1);line-height:1.3;color:var(--fg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq-item summary:hover{color:var(--teal)}
.faq-a{padding:0 4px 20px;color:var(--muted);max-width:64ch}
@media (prefers-reduced-motion: reduce){.faq-item summary::after{transition:none}}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:24px}.faq-grid .sec-head{position:static}}
.explore .spec:nth-child(6){border-top-color:var(--amethyst)}