/* Maui's Lab — shared stylesheet for index.html and products.html */
/* ============================================================
   MAUI'S LAB — tokens
   Palette follows the magnum opus: nigredo (obsidian),
   albedo (parchment), citrinitas (brass), rubedo (red).
   Change --accent and the whole page follows.
   ============================================================ */
:root{
  --ground:#EFEAE0;        /* parchment */
  --surface:#F8F5EE;
  --surface-2:#E4DDCE;
  --ink:#16130F;
  --ink-2:#544C41;
  --ink-3:#675E4E;
  --line:#D5CBB8;
  --line-strong:#B4A68B;
  --accent:#8A6316;        /* citrinitas — brass */
  --accent-bright:#A97C22;
  --accent-soft:#EFE4CC;
  --on-accent:#FCF9F2;
  --rubedo:#8E2A2A;
  --verdigris:#3F6F52;
  --shadow:0 1px 2px rgba(22,19,15,.05), 0 10px 30px -18px rgba(22,19,15,.35);
  --rail:116px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F0E0C;
    --surface:#17150F;
    --surface-2:#211D15;
    --ink:#F1EBDD;
    --ink-2:#A79C88;
    --ink-3:#8F8574;
    --line:#2B271E;
    --line-strong:#453E2E;
    --accent:#C9A227;
    --accent-bright:#DDB742;
    --accent-soft:#221C0E;
    --on-accent:#0F0E0C;
    --rubedo:#C4453F;
    --verdigris:#67A585;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 10px 30px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0F0E0C;
  --surface:#17150F;
  --surface-2:#211D15;
  --ink:#F1EBDD;
  --ink-2:#A79C88;
  --ink-3:#8F8574;
  --line:#2B271E;
  --line-strong:#453E2E;
  --accent:#C9A227;
  --accent-bright:#DDB742;
  --accent-soft:#221C0E;
  --on-accent:#0F0E0C;
  --rubedo:#C4453F;
  --verdigris:#67A585;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 10px 30px -18px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition-duration:.001ms !important;}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;border-radius:2px;}

/* ---------- type roles ---------- */
.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:-.005em;line-height:1.05;}
.m{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ink-3);margin:0;}
h1,h2,h3,h4{margin:0;text-wrap:balance;}
p{margin:0;}
.lede{color:var(--ink-2);font-size:1.06rem;max-width:58ch;}

/* ---------- shell ---------- */
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto;}
section{padding-block:clamp(3.5rem,8vw,6.5rem);border-top:1px solid var(--line);}
.sechead{display:grid;grid-template-columns:var(--rail) 1fr;gap:0 1.25rem;align-items:start;margin-bottom:2.75rem;}
.sechead .eyebrow{padding-top:.9em;}
.sechead h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;line-height:1.02;
  letter-spacing:-.01em;font-size:clamp(2.1rem,4.6vw,3.3rem);}
.sechead .sub{grid-column:2;margin-top:1rem;color:var(--ink-2);max-width:58ch;}
@media (max-width:760px){
  :root{--rail:0px;}
  .sechead{grid-template-columns:1fr;gap:.6rem;}
  .sechead .eyebrow{padding-top:0;}
  .sechead .sub{grid-column:1;}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:Archivo,Arial,sans-serif;font-weight:600;font-size:.92rem;
  padding:.85rem 1.5rem;border:1px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background-color .15s ease,border-color .15s ease,color .15s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-bright);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-block{width:100%;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.8rem;}
.brand{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;}
.brand b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.5rem;letter-spacing:-.01em;}
.brand span{font-family:"IBM Plex Mono",monospace;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.24em;color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:1.5rem;}
.nav-links a:not(.btn){font-size:.85rem;font-weight:500;text-decoration:none;color:var(--ink-2);}
.nav-links a:not(.btn):hover{color:var(--ink);}
@media (max-width:900px){.nav-links a:not(.btn){display:none;}}
.nav .btn{padding:.55rem 1rem;font-size:.83rem;}

/* ---------- hero ---------- */
.hero{border-top:none;padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,5rem);}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;line-height:.98;
  letter-spacing:-.015em;font-size:clamp(2.9rem,8vw,5.6rem);margin-top:1.1rem;}
.hero h1 em{font-style:italic;font-weight:400;color:var(--accent);}
.hero .lede{margin-top:1.6rem;}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem;}

/* transmutation dial — geometric, drawn as an instrument not an ornament */
.dial{width:100%;max-width:340px;margin-inline:auto;color:var(--accent);opacity:.85;}
@media (max-width:940px){
  .hero{position:relative;overflow:hidden;}
  .hero-grid{gap:0;}
  .hero-grid > div:last-child{height:0;}          /* collapse the dial's grid cell */
  .hero-grid > div:first-child{position:relative;z-index:1;}
  .dial{position:absolute;top:-46px;right:-74px;width:235px;max-width:none;
    opacity:.4;pointer-events:none;z-index:0;}
}
.dial .spin{transform-box:fill-box;transform-origin:center;animation:rot 42s linear infinite;}
.dial .spin-r{transform-box:fill-box;transform-origin:center;animation:rot 66s linear infinite reverse;}
@keyframes rot{to{transform:rotate(360deg);}}

/* ---------- the exchange ---------- */
.exchange{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.25rem,4vw,3rem);align-items:stretch;}
@media (max-width:820px){.exchange{grid-template-columns:1fr;}.exchange .scale{display:none;}}
.col-give,.col-get{border:1px solid var(--line);background:var(--surface);padding:1.6rem;}
.col-get{border-color:var(--accent);}
.exchange h3{font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--ink-3);font-weight:500;margin-bottom:1.1rem;}
.col-get h3{color:var(--accent);}
.exchange ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;}
.exchange li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:baseline;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.28rem;line-height:1.3;}
.exchange li::before{content:"·";font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--line-strong);}
.col-get li::before{color:var(--accent);}
.scale{display:grid;place-items:center;color:var(--ink-3);}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:820px){.svc{grid-template-columns:1fr;}}
.svc > article{background:var(--ground);padding:1.75rem;display:flex;flex-direction:column;gap:.7rem;}
.svc .tag{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);}
.svc h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.75rem;line-height:1.05;}
.svc p{color:var(--ink-2);font-size:.94rem;}
.svc .inc{list-style:none;margin:.35rem 0 0;padding:0;display:grid;gap:.4rem;}
.svc .inc li{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-3);
  display:grid;grid-template-columns:auto 1fr;gap:.6rem;line-height:1.5;}
.svc .inc li::before{content:"·";color:var(--accent);}
.guard{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);line-height:1.6;}
.guard b{display:block;margin-bottom:.3rem;color:var(--rubedo);text-transform:uppercase;
  letter-spacing:.1em;font-size:.65rem;font-weight:500;}

/* ---------- tracks (who it's for) ---------- */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
@media (max-width:900px){.tracks{grid-template-columns:1fr;}}
.track{border:1px solid var(--line);background:var(--surface);padding:1.6rem;display:flex;flex-direction:column;}
.track .who{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);}
.track h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:2rem;line-height:1;margin:.6rem 0 .9rem;}
.track p{color:var(--ink-2);font-size:.95rem;}
.track p + p{margin-top:.7rem;}
.track .note{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.73rem;color:var(--ink-3);line-height:1.6;}

/* ---------- the four stages (a real sequence — hence numbered) ---------- */
.stages{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.stage{background:var(--ground);display:grid;grid-template-columns:var(--rail) 1fr auto;gap:1.25rem;
  padding:1.5rem 1.75rem;align-items:baseline;}
@media (max-width:820px){.stage{grid-template-columns:1fr;gap:.5rem;}}
.stage .idx{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;color:var(--accent);
  text-transform:uppercase;}
.stage h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.6rem;line-height:1.1;}
.stage h3 span{font-family:Archivo,Arial,sans-serif;font-size:.78rem;font-weight:500;color:var(--ink-3);
  letter-spacing:.02em;display:block;margin-top:.2rem;}
.stage p{color:var(--ink-2);font-size:.94rem;margin-top:.55rem;max-width:62ch;}
.stage .when{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);white-space:nowrap;}
.stage-swatch{width:100%;height:4px;margin-top:.9rem;border:1px solid var(--line-strong);}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start;}
@media (max-width:900px){.tiers{grid-template-columns:1fr;}}
.tier{border:1px solid var(--line);background:var(--surface);padding:1.6rem;display:flex;flex-direction:column;height:100%;}
.tier.feature{border-color:var(--accent);box-shadow:var(--shadow);}
.tier .name{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);}
.tier.feature .name{color:var(--accent);}
.tier .amt{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:2.9rem;line-height:1;
  margin:.7rem 0 .2rem;font-variant-numeric:tabular-nums;}
.tier .per{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);}
.tier ul{list-style:none;margin:1.25rem 0 1.5rem;padding:0;display:grid;gap:.55rem;}
.tier li{display:grid;grid-template-columns:auto 1fr;gap:.65rem;font-size:.9rem;color:var(--ink-2);
  align-items:baseline;line-height:1.5;}
.tier li::before{content:"+";font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:var(--accent);}
.tier .btn{margin-top:auto;}
.tier .req{font-family:"IBM Plex Mono",monospace;font-size:.71rem;color:var(--ink-3);
  line-height:1.6;margin-top:.9rem;}

/* ---------- before / after ---------- */
.ba{border:1px solid var(--line-strong);background:var(--surface);padding:clamp(1.25rem,3vw,2rem);}
.ba-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;align-items:start;}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr 1fr;}.ba-stats{grid-column:1 / -1;}}
@media (max-width:560px){.ba-grid{grid-template-columns:1fr;}}
.shot{position:relative;aspect-ratio:3/4;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;text-align:center;padding:1rem;
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--ink-3);line-height:1.8;}
.shot .stamp{position:absolute;top:.6rem;left:.6rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--ground);padding:.2rem .5rem;}
.ba-stats{border:1px solid var(--line);padding:1.2rem;}
.ba-stats dl{margin:0;display:grid;gap:0;}
.ba-stats .row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);}
.ba-stats .row:last-child{border-bottom:none;}
.ba-stats dt{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);}
.ba-stats dd{margin:0;font-family:"IBM Plex Mono",monospace;font-size:.85rem;font-weight:500;
  font-variant-numeric:tabular-nums;}
.ba-quote{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:1.4rem;font-style:italic;line-height:1.35;
  color:var(--ink-2);max-width:60ch;}
.ba-quote cite{display:block;margin-top:.7rem;font-family:"IBM Plex Mono",monospace;font-style:normal;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}

/* ---------- intro: who runs this ---------- */
.intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,5vw,3.5rem);align-items:center;}
@media (max-width:860px){.intro{grid-template-columns:1fr;}}
.intro img{width:100%;height:auto;border:1px solid var(--line);}
.intro h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;line-height:1.03;
  letter-spacing:-.01em;font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.6rem 0 0;}
.intro .lede{margin-top:1.1rem;}
.byline{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-top:1.1rem;}

/* shared credential list */
.creds{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--line);}
.creds li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:.7rem 0;
  border-bottom:1px solid var(--line);font-size:.93rem;align-items:baseline;color:var(--ink-2);}
.creds b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}

/* ---------- full width photo band ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0;position:relative;line-height:0;}
.band img{width:100%;height:clamp(240px,38vw,460px);object-fit:cover;display:block;
  object-position:center 22%;}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.1rem clamp(1.25rem,4vw,2.5rem);
  background:linear-gradient(to top, rgba(15,14,12,.82), rgba(15,14,12,0));
  color:#F1EBDD;font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;}

/* ---------- direction ---------- */
.direction{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;}
@media (max-width:860px){.direction{grid-template-columns:1fr;}}
.direction .prose p{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.42rem;
  line-height:1.35;color:var(--ink);}
.direction .prose p + p{margin-top:1rem;}
.boundary{border-left:2px solid var(--accent);padding-left:1.2rem;}
.boundary h3{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:.7rem;}
.boundary p{color:var(--ink-2);font-size:.93rem;}
.boundary p + p{margin-top:.7rem;}

/* ---------- results note ---------- */
.ba-note{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-2);line-height:1.6;max-width:70ch;}

/* ---------- editorial to-do ---------- */
.todo{border:1px dashed var(--line-strong);background:var(--surface-2);padding:1.1rem 1.25rem;
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);line-height:1.75;margin-top:1.25rem;}
.todo b{color:var(--rubedo);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;
  display:block;margin-bottom:.45rem;}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);max-width:78ch;}
details{border-bottom:1px solid var(--line);}
summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;position:relative;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:1.35rem;line-height:1.25;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";position:absolute;right:.25rem;top:1.15rem;font-family:"IBM Plex Mono",monospace;
  color:var(--accent);font-size:1rem;}
details[open] summary::after{content:"×";}
details .ans{padding:0 0 1.3rem;color:var(--ink-2);font-size:.95rem;max-width:64ch;}
details .ans p + p{margin-top:.7rem;}

/* ---------- disclaimer ---------- */
.legal{border:1px solid var(--rubedo);padding:1.4rem 1.6rem;background:var(--surface);}
.legal h3{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rubedo);font-weight:500;margin-bottom:.8rem;}
.legal p{font-size:.87rem;color:var(--ink-2);max-width:78ch;}
.legal p + p{margin-top:.6rem;}

/* ---------- final ---------- */
.final{background:var(--ink);color:var(--ground);border-top:none;text-align:center;}
.final h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;line-height:1;
  font-size:clamp(2.2rem,6vw,4rem);}
.final h2 em{font-style:italic;font-weight:400;color:var(--accent-bright);}
.final p:not(.eyebrow){color:color-mix(in srgb,var(--ground) 65%,var(--ink));margin:1.1rem auto 0;max-width:46ch;}
.final .btn{margin-top:2rem;}

/* ---------- footer ---------- */
footer{padding-block:2.5rem;border-top:1px solid var(--line);}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:.71rem;color:var(--ink-3);}
.foot a{text-decoration:none;}
.foot a:hover{color:var(--ink);}

/* ---------- sticky mobile bar ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.75rem;align-items:center;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line-strong);}
.stickybar .sb{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);line-height:1.4;}
.stickybar .sb b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.05rem;
  font-weight:700;color:var(--ink);}
@media (max-width:900px){.stickybar{display:flex;} body{padding-bottom:76px;}}