/* Monogram & Muse — site styles. Emerald Deco. Static, no build step. */

/* ---------- Fonts (self-hosted, Google Fonts OFL) ---------- */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/marcellus-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/outfit-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-latin-600-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --ivory:#F4EDE0; --emerald:#0F4D3F; --jade:#0A3329; --onyx:#151515;
  --brass:#B9924F; --champagne:#E3CFA6; --cognac:#9A5B2E; --clay:#D9A58F;
  --ink-2:#3b3a36;               /* onyx tint, 9.7:1 on ivory */
  --field-edge:#6b6a63;          /* 4.6:1 on ivory */
  --display:"Marcellus","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:16px; --max:1200px; --hh:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Grain: fine noise from an inline SVG filter, tiled */
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .42 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .88 0 0 0 .42 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
@media (min-width:640px){:root{--gutter:24px}}
@media (min-width:900px){:root{--gutter:40px;--hh:76px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ivory) var(--grain-dark);color:var(--onyx);font:400 1.0625rem/1.65 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body.nav-open{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;margin:0 0 .55em;letter-spacing:.005em;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,5rem);line-height:1.04}
h2{font-size:clamp(1.9rem,1.3rem + 2.5vw,3.25rem)}
h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);line-height:1.2}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{margin:0 0 1.2em}
a{color:inherit;text-decoration-color:var(--brass);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--focus,var(--emerald));outline-offset:3px}
::selection{background:var(--champagne);color:var(--jade)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-100px;z-index:200;background:var(--emerald);color:var(--ivory);padding:.7em 1.1em;text-decoration:none;font-weight:500}
.skip:focus{top:12px;outline:2px solid var(--champagne)}
.ph{font-family:var(--text);font-weight:500;letter-spacing:.02em}

/* ---------- Layout & themes ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
.section{--ground:var(--bg);position:relative;padding-block:clamp(64px,9vw,120px);background-color:var(--bg);background-image:var(--grain);color:var(--fg)}
.theme-ivory{--bg:var(--ivory);--grain:var(--grain-dark);--fg:var(--onyx);--fg-2:var(--ink-2);--eyebrow:var(--emerald);--surface:var(--ivory);--focus:var(--emerald);--btn-bg:var(--emerald);--btn-fg:var(--ivory);--btn-edge:var(--emerald);--ghost-fg:var(--emerald);--ghost-edge:var(--emerald)}
.theme-emerald{--bg:var(--emerald);--grain:var(--grain-light);--fg:var(--ivory);--fg-2:var(--champagne);--eyebrow:var(--champagne);--surface:var(--jade);--focus:var(--champagne);--btn-bg:var(--ivory);--btn-fg:var(--emerald);--btn-edge:var(--ivory);--ghost-fg:var(--ivory);--ghost-edge:var(--brass)}
.theme-jade{--bg:var(--jade);--grain:var(--grain-light);--fg:var(--ivory);--fg-2:var(--champagne);--eyebrow:var(--champagne);--surface:var(--emerald);--focus:var(--champagne);--btn-bg:var(--ivory);--btn-fg:var(--emerald);--btn-edge:var(--ivory);--ghost-fg:var(--ivory);--ghost-edge:var(--brass)}
.card--feature{--surface:var(--emerald);--fg:var(--ivory);--fg-2:var(--champagne);--eyebrow:var(--champagne);--focus:var(--champagne);--btn-bg:var(--ivory);--btn-fg:var(--emerald);--btn-edge:var(--ivory);--ghost-fg:var(--ivory);--ghost-edge:var(--brass);color:var(--ivory)}
.card--paper{--surface:var(--ivory);--fg:var(--onyx);--fg-2:var(--ink-2);--eyebrow:var(--emerald);--focus:var(--emerald);--btn-bg:var(--emerald);--btn-fg:var(--ivory);--btn-edge:var(--emerald);--ghost-fg:var(--emerald);--ghost-edge:var(--emerald);color:var(--onyx)}
.muted{color:var(--fg-2)}

/* ---------- Type helpers ---------- */
.eyebrow{display:flex;align-items:center;gap:.85em;margin:0 0 1.1em;font:400 .875rem/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow,var(--emerald))}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;background:var(--brass);transform:rotate(45deg)}
.lead{font-size:clamp(1.125rem,1.02rem + .5vw,1.3125rem);line-height:1.6;color:var(--fg-2);max-width:60ch}
.head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow{justify-content:center}
.head--center .lead{margin-inline:auto}
.label{font:400 .8125rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}

/* ---------- Ornaments ---------- */
.triple{height:8px;background:linear-gradient(var(--brass),var(--brass)) 0 0/100% 2px no-repeat,linear-gradient(var(--brass),var(--brass)) 0 4px/100% 1px no-repeat,linear-gradient(var(--brass),var(--brass)) 0 7px/100% 1px no-repeat}
.horizon{position:relative;height:56px;margin:0 auto;max-width:var(--max);background:url(/assets/sunburst.svg) center bottom/auto 100% no-repeat}
.dlist{list-style:none;padding:0;margin:0 0 1.5em}
.dlist li{position:relative;padding-left:1.5em;margin:0 0 .6em}
.dlist li::before{content:"";position:absolute;left:.15em;top:.7em;width:6px;height:6px;background:var(--brass);transform:rotate(45deg)}
/* Octagon frame: hairline edge + fill drawn by pseudo-elements so outlines stay visible */
.octo,.btn{--c:14px;--bw:1px;--edge:var(--brass);--fill:var(--surface);position:relative;isolation:isolate}
.octo{--ground:var(--surface)}
.octo::before,.btn::before,.octo::after,.btn::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.octo::before,.btn::before{inset:0;background:var(--edge);clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.octo::after,.btn::after{inset:var(--bw);background:var(--fill);--ci:calc(var(--c) - var(--bw) * .586);clip-path:polygon(var(--ci) 0,calc(100% - var(--ci)) 0,100% var(--ci),100% calc(100% - var(--ci)),calc(100% - var(--ci)) 100%,var(--ci) 100%,0 calc(100% - var(--ci)),0 var(--ci))}
.card{--c:26px;padding:clamp(24px,3vw,40px)}
.card>:last-child{margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{--c:9px;--bw:0px;--edge:var(--btn-edge);--fill:var(--btn-bg);display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:50px;padding:.85em 1.7em;font:500 .8125rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--btn-fg);cursor:pointer;border:0;background:none;text-align:center}
.btn:hover{--edge:var(--jade);--fill:var(--jade);color:var(--ivory)}
.theme-emerald .btn:hover,.theme-jade .btn:hover,.card--feature .btn:hover{--edge:var(--champagne);--fill:var(--champagne);color:var(--jade)}
.btn--ghost{--bw:1px;--edge:var(--ghost-edge);--fill:var(--ground);color:var(--ghost-fg)}
.btn--ghost:hover,.theme-emerald .btn--ghost:hover,.theme-jade .btn--ghost:hover,.card--feature .btn--ghost:hover{--edge:var(--brass);--fill:color-mix(in srgb,var(--brass) 24%,var(--ground));color:var(--ghost-fg)}
.btn svg{width:14px;height:14px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:479px){.btn-row .btn{width:100%}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--ivory) var(--grain-dark);border-bottom:1px solid var(--brass)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--hh)}
.brand{display:block;flex:none;line-height:0}
.brand img{height:40px;width:auto}
@media (min-width:900px){.brand img{height:54px}}
.nav{display:none}
.nav ul{display:flex;align-items:center;gap:clamp(20px,2.6vw,36px);list-style:none;margin:0;padding:0}
.nav a{position:relative;display:inline-block;padding:.5em 0;font:500 .8125rem/1 var(--text);letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--onyx)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15em;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--emerald)}
.header-cta{display:none}
@media (min-width:900px){.nav,.header-cta{display:flex;align-items:center}.nav-toggle{display:none!important}.header-cta .btn{min-height:44px;padding:.7em 1.3em}}
.nav-toggle{display:inline-flex;align-items:center;gap:.7em;min-height:44px;padding:0 4px;background:none;border:0;color:var(--emerald);font:500 .8125rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.nav-toggle__bars{position:relative;width:22px;height:12px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.nav-toggle__bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.mobile-nav{position:fixed;inset:var(--hh) 0 0 0;z-index:59;overflow-y:auto;background:var(--jade) var(--grain-light);color:var(--ivory);padding:32px var(--gutter) 48px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;--focus:var(--champagne)}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mobile-nav ul{list-style:none;margin:0 0 32px;padding:0}
.mobile-nav li{border-bottom:1px solid color-mix(in srgb,var(--brass) 55%,transparent)}
.mobile-nav li a{display:block;padding:18px 0;font:400 1.75rem/1.2 var(--display);text-decoration:none}
.mobile-nav li a[aria-current="page"]{color:var(--champagne)}
.mobile-nav .btn{--btn-bg:var(--ivory);--btn-fg:var(--emerald);--btn-edge:var(--ivory);width:100%}
@media (min-width:900px){.mobile-nav{display:none}}

/* ---------- Home hero + 3D medallion ---------- */
.hero{overflow:clip;padding-block:clamp(28px,5vw,88px) clamp(56px,8vw,112px)}
.hero__grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:1.02fr .98fr;gap:56px}}
.hero__art{order:-1}
@media (min-width:900px){.hero__art{order:0}}
.hero h1{margin-bottom:.4em;max-width:11ch}
.hero .lead{margin-bottom:1.8em}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;margin:36px 0 0;padding:0;font:400 .8125rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--champagne)}
.hero__facts li{display:flex;align-items:center;gap:.8em}
.hero__facts li::before{content:"";width:6px;height:6px;background:var(--brass);transform:rotate(45deg);flex:none}
.hero3d{position:relative;width:min(70vw,290px);aspect-ratio:1;margin-inline:auto}
@media (min-width:640px){.hero3d{width:min(56vw,400px)}}
@media (min-width:900px){.hero3d{width:min(100%,540px)}}
.hero3d::before{content:"";position:absolute;left:50%;bottom:27%;width:190%;aspect-ratio:2/1;transform:translateX(-50%);background:url(/assets/sunburst.svg) center bottom/100% 100% no-repeat;opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 34%,#000 66%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 34%,#000 66%,transparent 96%)}
.hero3d__fallback,.hero3d canvas{position:absolute;inset:0;width:100%;height:100%}
.hero3d__fallback{object-fit:contain;transition:opacity .9s var(--ease)}
.hero3d canvas{opacity:0;transition:opacity .9s var(--ease);touch-action:pan-y}
.hero3d.is-live canvas{opacity:1}
.hero3d.is-live .hero3d__fallback{opacity:0}

/* ---------- Interior page hero ---------- */
.phero{overflow:clip;padding-block:clamp(56px,8vw,112px) clamp(56px,7vw,96px)}
.phero::after{content:"";position:absolute;right:-8%;bottom:0;width:min(120%,900px);aspect-ratio:2/1;background:url(/assets/sunburst.svg) center bottom/100% 100% no-repeat;opacity:.3;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 12%,#000 48%);mask-image:linear-gradient(90deg,transparent 12%,#000 48%)}
@media (min-width:900px){.phero::after{right:-4%;width:820px}}
.phero .wrap{position:relative;z-index:1}
.phero h1{max-width:15ch}
.phero .lead{max-width:56ch}

/* ---------- Grids ---------- */
.cols{display:grid;gap:20px}
@media (min-width:720px){.cols-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.cols-3{grid-template-columns:repeat(3,1fr)}.cols-3.tight{gap:24px}}
@media (min-width:720px) and (max-width:899px){.cols-3{grid-template-columns:repeat(2,1fr)}}
.cols{align-items:stretch}

/* ---------- Idea (mark + muse) ---------- */
.idea__card h3{margin:.2em 0 .5em}
.idea__card .glyph{width:44px;height:44px;margin-bottom:20px}

/* ---------- Pillars ---------- */
.pillars{list-style:none;margin:0;padding:0;border-top:1px solid var(--brass)}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:baseline;padding:26px 0;border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}
.pillar__n{font:400 2.25rem/1 var(--display);color:var(--brass);min-width:1.6em}
.pillar h3{margin:0 0 .25em}
.pillar p{margin:0;color:var(--fg-2);max-width:58ch}
@media (min-width:900px){.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}.split .head{position:sticky;top:calc(var(--hh) + 32px)}.pillar{padding:32px 0}.pillar__n{font-size:2.75rem}}

/* ---------- Q&A ---------- */
.qa h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem);margin-bottom:.5em}
.qa p{color:var(--fg-2)}
.qa--cta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* ---------- Packages ---------- */
.pkg{display:flex;flex-direction:column}
.pkg__tier{margin:0 0 .4em}
.pkg__price{margin:0;font:400 clamp(2.6rem,2.2rem + 1.6vw,3.5rem)/1 var(--display)}
.pkg__price small{font-size:.4em;letter-spacing:.06em;margin-left:.25em;color:var(--fg-2)}
.pkg__time{margin:.5em 0 1.4em;font:500 .9375rem/1.3 var(--text);letter-spacing:.04em;color:var(--eyebrow)}
.pkg__sum{color:var(--fg-2)}
.pkg .dlist{flex:1}
.pkg__plus{margin:0 0 .8em;font-weight:500;color:var(--fg)}
.pkg .btn{align-self:flex-start;margin-top:.4em}
.terms{display:flex;flex-wrap:wrap;gap:10px 32px;list-style:none;padding:0;margin:clamp(28px,4vw,44px) 0 0;font:400 .875rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase}
.terms li{display:flex;align-items:center;gap:.8em}
.terms li::before{content:"";width:6px;height:6px;background:var(--brass);transform:rotate(45deg);flex:none}
.center{text-align:center}
.center .terms{justify-content:center}

/* ---------- Local market band ---------- */
.band{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.band{grid-template-columns:.9fr 1.1fr;gap:72px}}
.band__art{display:flex;justify-content:center}
.seal{--c:44px;width:min(100%,340px);padding:clamp(16px,2.4vw,28px)}
.seal img{width:100%;height:auto}

/* ---------- Process strip (home) ---------- */
.strip{list-style:none;margin:0 0 clamp(28px,4vw,44px);padding:0;display:grid;gap:0;counter-reset:s;border-top:1px solid var(--brass)}
.strip li{display:grid;grid-template-columns:auto 1fr;gap:2px 20px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent);align-items:baseline}
.strip .n{font:400 1.5rem/1 var(--display);color:var(--brass);min-width:1.7em}
.strip h3{margin:0;font-size:1.3rem}
.strip p{margin:0;color:var(--fg-2);grid-column:2;font-size:.9688rem;line-height:1.5}
@media (min-width:900px){.strip{grid-template-columns:repeat(5,1fr);gap:28px;border-top:0}.strip li{display:block;padding:24px 0 0;border-bottom:0;border-top:1px solid var(--brass)}.strip .n{display:block;margin-bottom:14px;font-size:2rem}.strip h3{margin-bottom:.4em}}

/* ---------- CTA ---------- */
.cta{--c:34px;text-align:center;padding:clamp(40px,7vw,88px) clamp(20px,5vw,72px) clamp(130px,15vw,190px);overflow:hidden}
.cta h2{max-width:16ch;margin-inline:auto}
.cta .lead{margin-inline:auto;margin-bottom:1.8em}
.cta .btn-row{justify-content:center}
.cta>*:not(.cta__sun){position:relative}
.cta__sun{position:absolute;left:50%;bottom:0;width:min(70%,340px);aspect-ratio:2/1;transform:translateX(-50%);background:url(/assets/sunburst.svg) center bottom/100% 100% no-repeat;opacity:.9;pointer-events:none;-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}

/* ---------- Services ---------- */
.dgrid{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--brass)}
@media (min-width:720px){.dgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.dgrid{grid-template-columns:repeat(3,1fr)}}
.dgrid li{padding:26px 0;border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}
.dgrid h3{display:flex;align-items:center;gap:.7em;margin:0 0 .4em;font-size:1.35rem}
.dgrid h3::before{content:"";flex:none;width:7px;height:7px;background:var(--brass);transform:rotate(45deg)}
.dgrid p{margin:0;color:var(--fg-2);font-size:1rem;line-height:1.6}
.addons{list-style:none;margin:0;padding:0;border-top:1px solid var(--brass)}
.addon{display:grid;grid-template-columns:1fr auto;gap:2px 20px;align-items:baseline;padding:22px 0;border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}
.addon h3{margin:0;font-size:1.4rem}
.addon p{grid-column:1;margin:0;color:var(--fg-2);font-size:1rem}
.addon__price{grid-column:2;grid-row:1;font:400 1.6rem/1 var(--display);white-space:nowrap;text-align:right}
.addon__price small{font:400 .875rem var(--text);color:var(--fg-2);letter-spacing:.04em}
.faq{border-top:1px solid var(--brass);margin:0}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;list-style:none;cursor:pointer;font:400 clamp(1.15rem,1.05rem + .5vw,1.4rem)/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 40px 22px 0;margin:0;color:var(--fg-2);max-width:64ch}

/* ---------- Process ---------- */
.steps{list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:0 20px;padding-bottom:44px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:27px;top:64px;bottom:8px;width:1px;background:var(--brass)}
.step:last-child::before{display:none}
.badge{--c:15px;--fill:var(--emerald);width:56px;height:56px;display:grid;place-items:center;font:400 1.4rem/1 var(--display);color:var(--ivory)}
.theme-emerald .badge{--fill:var(--jade)}
.step__body h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);margin:.1em 0 .4em}
.step__body p{color:var(--fg-2);max-width:62ch}
.step__meta{display:grid;gap:14px;margin-top:20px}
.step__meta h3{margin:0 0 .3em;font:400 .8125rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}
.step__meta p{margin:0;font-size:1rem;color:var(--fg)}
@media (min-width:900px){.step{grid-template-columns:72px 1fr;gap:0 40px;padding-bottom:64px}.badge{width:72px;height:72px;--c:19px;font-size:1.8rem}.step::before{left:35px;top:82px}.step__meta{grid-template-columns:1fr 1fr;gap:40px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}}
.bars{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.bar{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center}
.bar__label{font:400 1.2rem/1.2 var(--display)}
.bar__days{font:500 .9375rem/1 var(--text);letter-spacing:.06em;color:var(--fg-2)}
.bar__track{grid-column:1/-1;position:relative;height:12px;border:1px solid var(--brass)}
.bar__track i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--champagne)}
.note{--c:22px;padding:clamp(24px,3vw,36px);display:flex;gap:20px;align-items:flex-start}
.note p{margin:0}
.note svg{flex:none;width:36px;height:36px}

/* ---------- About ---------- */
.founder{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.founder{grid-template-columns:.7fr 1.3fr;gap:72px}}
.founder__seal{display:flex;justify-content:center}
.principles{list-style:none;margin:0;padding:0;border-top:1px solid var(--brass)}
.principles li{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;padding:22px 0;border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}
.principles .n{font:400 1.8rem/1 var(--display);color:var(--brass);min-width:1.6em}
.principles h3{margin:0 0 .2em}
.principles p{margin:0;color:var(--fg-2);max-width:60ch}
.never{list-style:none;padding:0;margin:0}
.never li{position:relative;padding:14px 0 14px 2em;border-bottom:1px solid color-mix(in srgb,var(--brass) 65%,transparent)}
.never li::before{content:"";position:absolute;left:.1em;top:1.35em;width:10px;height:1.5px;background:var(--brass)}

/* ---------- Contact ---------- */
.contact{display:grid;gap:40px}
@media (min-width:960px){.contact{grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}}
.next{list-style:none;margin:0 0 32px;padding:0;counter-reset:n}
.next li{position:relative;padding:0 0 18px 48px;counter-increment:n}
.next li::before{content:counter(n);position:absolute;left:0;top:-2px;width:32px;height:32px;display:grid;place-items:center;font:400 1rem/1 var(--display);color:var(--ivory);background:var(--emerald);clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}
.details{margin:0;padding:22px 0 0;border-top:1px solid var(--brass);display:grid;gap:14px}
.details div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}
.details dt{font:400 .8125rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}
.details dd{margin:0}
.form{--c:30px;padding:clamp(22px,4vw,48px)}
.form__row{display:grid;gap:18px}
@media (min-width:640px){.form__row--2{grid-template-columns:1fr 1fr}}
.field{margin-bottom:18px}
.field label,.field .legend{display:block;margin-bottom:6px;font:500 .875rem/1.3 var(--text);letter-spacing:.03em;color:var(--onyx)}
.req{color:var(--cognac)}
.opt{font-weight:400;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:.75em .9em;font:400 1rem/1.4 var(--text);color:var(--onyx);background:#FAF6ED;border:1px solid var(--field-edge);border-radius:0;appearance:none;-webkit-appearance:none}
.field textarea{min-height:150px;resize:vertical}
.field select{padding-right:2.6em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F4D3F' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--emerald);outline-offset:1px;border-color:var(--emerald)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#9b2c1a}
.consent{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;margin:8px 0 24px}
.consent input{width:22px;height:22px;min-height:0;margin:2px 0 0;accent-color:var(--emerald)}
.consent label{margin:0;font:400 .9375rem/1.55 var(--text);letter-spacing:0;color:var(--ink-2)}
.form__status{min-height:1.5em;margin:18px 0 0;font-weight:500;color:var(--emerald)}
.form__status.is-error{color:#9b2c1a}
.form__hint{margin:0 0 22px;font-size:.9375rem;color:var(--ink-2)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - var(--hh));display:flex;align-items:center;overflow:clip}
.lost h1{max-width:12ch}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--jade) var(--grain-light);color:var(--ivory);--focus:var(--champagne);--fg-2:var(--champagne);--eyebrow:var(--champagne)}
.site-footer__top{padding-top:clamp(20px,3vw,40px)}
.site-footer .horizon{height:64px;margin-bottom:8px}
.site-footer__grid{display:grid;gap:40px;padding-block:clamp(36px,5vw,64px) clamp(36px,5vw,56px)}
@media (min-width:720px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.site-footer__grid{grid-template-columns:1.5fr .9fr 1.1fr 1.1fr;gap:48px}}
.site-footer__brand img{width:min(100%,260px);height:auto;margin-bottom:20px}
.site-footer__brand p{max-width:34ch;color:var(--champagne)}
.site-footer h2{margin:0 0 1em;font:400 .875rem/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--champagne)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 .55em}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:.25em}
.site-footer .price{color:var(--champagne)}
.site-footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px 28px;border-top:1px solid color-mix(in srgb,var(--brass) 60%,transparent);font-size:.875rem;color:var(--champagne)}
.site-footer__base p{margin:0}

/* ---------- Scroll reveal ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease) var(--delay,0s),transform .9s var(--ease) var(--delay,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.site-header,.mobile-nav,.hero3d::before,.phero::after{display:none}}
.narrow-steps{max-width:var(--max)}

/* ---------- Header: six links at laptop widths ---------- */
.nav ul{gap:clamp(16px,1.9vw,30px)}
@media (min-width:900px) and (max-width:1099px){.header-cta{display:none}.brand img{height:46px}}

/* ---------- Tags, work cards, kit band ---------- */
.theme-ivory,.card--paper{--tag:var(--cognac)}
.theme-emerald,.theme-jade,.card--feature{--tag:var(--champagne)}
.tag{display:inline-flex;align-items:center;gap:.6em;margin:0;padding:.34em .8em;font:400 .75rem/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--tag,var(--cognac));border:1px dashed currentColor}
.tag--own{color:var(--surface,var(--ivory));background:var(--eyebrow,var(--emerald));border:1px solid var(--eyebrow,var(--emerald))}
.wgrid{display:grid;gap:20px}
@media (min-width:720px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.wgrid--3{grid-template-columns:repeat(3,1fr)}}
.wcard{--c:24px;display:flex;flex-direction:column;padding:14px}
.wcard__img{overflow:hidden;background:var(--jade);aspect-ratio:8/5}
.wcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wcard__body{display:flex;flex-direction:column;flex:1;padding:18px 8px 8px}
.wcard__body .tag{align-self:flex-start;margin-bottom:14px}
.wcard h3{margin:0 0 .2em;font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.wcard h3 a{color:inherit;text-decoration:none}
.wcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.wcard h3 a:focus-visible{outline:0}
.wcard h3 a:focus-visible::after{outline:2px solid var(--focus,var(--emerald));outline-offset:4px}
.wcard__meta{margin:0 0 .8em;font:500 .8125rem/1.4 var(--text);letter-spacing:.06em;color:var(--eyebrow)}
.wcard__sum{flex:1;margin:0 0 1.1em;color:var(--fg-2)}
.wcard__more{display:inline-flex;align-items:center;gap:.6em;font:500 .8125rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}
.wcard__more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.band--flip .band__art{order:2}
.kitpeek{display:flex;justify-content:center}
.kitpeek__frame{--c:34px;--surface:var(--jade);display:block;width:min(100%,560px);padding:12px;line-height:0}
.kitpeek__frame img{width:100%;height:auto}
@media (min-width:900px){.band--flip{grid-template-columns:1.05fr .95fr}}

/* Hover lift and gentle image zoom. `translate` is separate from the reveal's transform, so both work. */
.wcard,.pkg,.idea__card,.qa{transition:translate .45s var(--ease)}
.js .wcard.reveal,.js .pkg.reveal,.js .idea__card.reveal,.js .qa.reveal{transition:opacity .9s var(--ease) var(--delay,0s),transform .9s var(--ease) var(--delay,0s),translate .45s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .wcard:hover,.pkg:hover,.idea__card:hover,.qa:hover{translate:0 -4px}
  .wcard:hover .wcard__img img,.kitpeek:hover img{transform:scale(1.04)}
  .wcard:hover .wcard__more svg{transform:translateX(4px)}
  .kitpeek img{transition:transform .9s var(--ease)}
  .kitpeek__frame{overflow:hidden}
}