/* ===========================================================
   Foxline Solutions — shared site styles
   Brand: Burnt Sienna #A0522D · Warm Gold #D4A574 · Charcoal #1A1A1A
          Cream #F5F1E8 · Stone #8A7B6B
   Fonts: Space Grotesk (headings) · Inter (body)
   Edit tokens in :root once and the whole site follows.
   =========================================================== */
:root{
  --sienna:#A0522D; --sienna-dark:#824025; --gold:#D4A574;
  --charcoal:#1A1A1A; --cream:#F5F1E8; --stone:#8A7B6B;
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--charcoal);background:var(--cream);line-height:1.65}
h1,h2,h3,.logo,.btn,.nav a.cta{font-family:'Space Grotesk',system-ui,sans-serif}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
a{color:var(--sienna)}
img{max-width:100%;display:block}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--sienna);color:var(--cream);text-decoration:none;padding:15px 30px;border-radius:10px;font-weight:700;font-size:1.02rem;border:none;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 10px 24px rgba(160,82,45,.22)}
.btn:hover{background:var(--sienna-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(160,82,45,.30)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--sienna);box-shadow:none;border:2px solid var(--sienna);padding:13px 26px}
.btn.ghost:hover{background:var(--sienna);color:var(--cream)}
.btn.gold{background:var(--gold);color:var(--charcoal);box-shadow:0 10px 24px rgba(212,165,116,.30)}
.btn.gold:hover{background:#c4925f}

/* ---------- header / nav ---------- */
header{padding:18px 0;position:sticky;top:0;z-index:30;background:rgba(245,241,232,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(138,123,107,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--charcoal);font-size:1.2rem;text-decoration:none}
.logo .word{line-height:1}
.logo .word b{display:block;font-size:1.2rem;letter-spacing:1px;color:var(--charcoal)}
.logo .word span{display:block;font-family:'Inter';font-size:.6rem;letter-spacing:3px;color:var(--stone);font-weight:600}
.menu{display:flex;align-items:center;gap:8px}
.menu a{font-family:'Space Grotesk';font-weight:600;font-size:.95rem;color:var(--charcoal);text-decoration:none;padding:8px 12px;border-radius:8px;transition:color .15s ease,background .15s ease}
.menu a:hover{color:var(--sienna);background:rgba(160,82,45,.07)}
.menu a.active{color:var(--sienna)}
.nav a.cta{background:var(--sienna);color:var(--cream);text-decoration:none;padding:11px 20px;border-radius:9px;font-weight:700;font-size:.92rem;transition:background .15s ease;margin-left:6px}
.nav a.cta:hover{background:var(--sienna-dark)}

/* ---------- page hero (interior pages) ---------- */
.page-hero{padding:64px 0 40px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-160px;right:-110px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(212,165,116,.20),transparent 65%);z-index:0}
.page-hero .inner{position:relative;z-index:1;max-width:64ch}
.page-hero .eyebrow{display:inline-block;color:var(--sienna);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin-bottom:16px;background:rgba(160,82,45,.08);padding:6px 12px;border-radius:20px}
.page-hero h1{font-size:2.6rem;line-height:1.12;letter-spacing:-.02em;margin-bottom:16px}
.page-hero h1 .hl{color:var(--sienna)}
.page-hero p.sub{font-size:1.16rem;color:#33302c;max-width:54ch}

/* ---------- home hero (split) ---------- */
.hero{padding:70px 0 58px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-180px;right:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(212,165,116,.22),transparent 65%);z-index:0}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;position:relative;z-index:1}
.eyebrow{display:inline-block;color:var(--sienna);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin-bottom:16px;background:rgba(160,82,45,.08);padding:6px 12px;border-radius:20px}
.hero h1{font-size:2.85rem;line-height:1.1;color:var(--charcoal);font-weight:700;margin-bottom:20px;letter-spacing:-.02em}
.hero h1 .hl{color:var(--sienna)}
.hero p.sub{font-size:1.18rem;max-width:36ch;margin-bottom:30px;color:#33302c}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .reassure{margin-top:18px;font-size:.92rem;color:var(--stone)}
.hero-card{background:var(--white);border-radius:18px;padding:32px;box-shadow:0 22px 60px rgba(26,26,26,.12);border:1px solid rgba(138,123,107,.14)}
.hero-card h3{color:var(--charcoal);font-size:1.05rem;margin-bottom:18px}
.hero-card ul{list-style:none}
.hero-card li{padding-left:32px;position:relative;margin-bottom:14px;font-size:.98rem}
.hero-card li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:6px;background:var(--sienna)}
.hero-card li::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border-right:2px solid var(--cream);border-bottom:2px solid var(--cream);transform:rotate(40deg)}

/* ---------- generic content band ---------- */
section.band{background:var(--white);padding:66px 0}
section.band.cream{background:var(--cream)}
.band h2{color:var(--charcoal);font-size:1.95rem;margin-bottom:12px;letter-spacing:-.02em}
.band h2.center{text-align:center}
.lead{font-size:1.12rem;max-width:62ch;margin-bottom:40px;color:#33302c}
.lead.center{margin-left:auto;margin-right:auto;text-align:center}

/* three-up cards */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.col{background:var(--cream);border-radius:14px;padding:26px;border:1px solid rgba(138,123,107,.14)}
section.band.cream .col{background:var(--white)}
.col h3{color:var(--sienna);font-size:1.12rem;margin:16px 0 8px}
.col p{font-size:.97rem;color:#3a352f}
.icon{width:46px;height:46px;border-radius:12px;background:var(--sienna);display:flex;align-items:center;justify-content:center;color:var(--cream);font-family:'Space Grotesk';font-weight:700;font-size:1.1rem}

/* ---------- dark "why" box ---------- */
.why{padding:60px 0}
.why-box{background:var(--charcoal);color:var(--cream);border-radius:20px;padding:48px}
.why-box h2{color:var(--white);font-size:1.7rem;margin-bottom:14px;letter-spacing:-.02em}
.why-box h2 .gold{color:var(--gold)}
.why-box p.intro{max-width:64ch;color:#e7e0d2}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
.why-grid h3{color:var(--gold);font-size:1.05rem;margin-bottom:6px}
.why-grid p{font-size:.96rem;color:#e7e0d2;line-height:1.6}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}
.stat .num{font-family:'Space Grotesk';font-weight:700;font-size:2.3rem;color:var(--sienna);line-height:1}
.stat .lbl{font-size:.95rem;color:#3a352f;margin-top:8px}

/* ---------- offers / plans ---------- */
.offers{padding:66px 0}
.offers .head{text-align:center;margin-bottom:14px}
.offers h2{color:var(--charcoal);font-size:1.95rem;letter-spacing:-.02em}
.sale{display:inline-block;margin:14px auto 36px;background:rgba(160,82,45,.10);color:var(--sienna);font-weight:600;font-size:.92rem;padding:8px 16px;border-radius:22px}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{background:var(--white);border-radius:16px;padding:30px;border:1px solid rgba(138,123,107,.20);display:flex;flex-direction:column;position:relative}
.plan.featured{border:2px solid var(--sienna);box-shadow:0 18px 44px rgba(160,82,45,.16)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--sienna);color:var(--cream);font-family:'Space Grotesk';font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:20px}
.plan h3{font-size:1.25rem;color:var(--charcoal);margin-bottom:6px}
.plan .blurb{font-size:.92rem;color:var(--stone);margin-bottom:16px;min-height:38px}
.plan .price{font-family:'Space Grotesk';font-weight:700;font-size:1.7rem;color:var(--sienna);line-height:1.1}
.plan .price span{font-size:1rem}
.plan .price small{display:block;font-family:'Inter';font-weight:400;font-size:.82rem;color:var(--stone);margin-top:6px}
.plan .was{font-size:.82rem;color:var(--stone);text-decoration:line-through;margin-top:8px}
.plan ul{list-style:none;margin:18px 0 24px;flex:1}
.plan li{padding-left:24px;position:relative;margin-bottom:10px;font-size:.94rem}
.plan li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.plan .btn{width:100%;text-align:center}
.plan.featured .btn{background:var(--sienna)}
.alacarte{text-align:center;margin-top:26px;font-size:.95rem;color:var(--stone)}
.alacarte a{font-weight:600}
.plan .ship{font-family:'Space Grotesk';font-weight:600;font-size:.84rem;color:var(--sienna);margin:-6px 0 14px}
.plan .bestfor{margin-top:16px;padding-top:14px;border-top:1px solid rgba(138,123,107,.20);font-size:.86rem;color:#4a443d;line-height:1.5}
.plan .bestfor b{font-family:'Space Grotesk';color:var(--charcoal)}

/* ---------- comparison table ---------- */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid rgba(138,123,107,.18)}
.compare{width:100%;border-collapse:collapse;background:var(--white);min-width:640px}
.compare th,.compare td{padding:13px 16px;text-align:center;font-size:.92rem;border-bottom:1px solid rgba(138,123,107,.16)}
.compare thead th{background:var(--charcoal);color:var(--cream);font-family:'Space Grotesk';font-weight:700;font-size:.96rem}
.compare thead th.hot{background:var(--sienna)}
.compare th.feat,.compare td.feat{text-align:left;font-weight:600;color:var(--charcoal);font-family:'Space Grotesk'}
.compare tbody td{color:var(--sienna);font-weight:700}
.compare tbody td.feat{color:var(--charcoal);font-weight:600}
.compare tbody td.hot{background:rgba(160,82,45,.06)}
.compare tbody td.no{color:var(--stone);font-weight:400}
.compare .cnote{display:block;font-family:'Inter';font-weight:400;font-size:.74rem;color:var(--stone);margin-top:2px}
.compare tbody tr:nth-child(even) td{background:rgba(245,241,232,.55)}
.compare tbody tr:nth-child(even) td.hot{background:rgba(160,82,45,.09)}
.compare tr.price-row td{font-size:.96rem;border-top:2px solid rgba(138,123,107,.30)}
.compare tr.price-row td:not(.feat){color:var(--charcoal)}

/* ---------- dark "glow" pricing treatment ---------- */
.offers.dark{position:relative;background:#141110;color:var(--cream);overflow:hidden;padding:84px 0 76px}
.offers.dark::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(to right,rgba(245,241,232,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(245,241,232,.04) 1px,transparent 1px);
  background-size:70px 80px;
  -webkit-mask-image:radial-gradient(62% 52% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(62% 52% at 50% 0%,#000,transparent 75%)}
.offers.dark .glow{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:780px;max-width:120%;height:440px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(160,82,45,.50),rgba(212,165,116,.14) 45%,transparent 70%);filter:blur(64px)}
.offers.dark canvas.sparkles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 0%,#000,transparent 82%);
  mask-image:radial-gradient(60% 60% at 50% 0%,#000,transparent 82%)}
.offers.dark .wrap{position:relative;z-index:2}
.offers.dark h2{color:var(--white)}
.offers.dark .sale{background:rgba(212,165,116,.14);color:var(--gold)}

.offers.dark .plan{background:linear-gradient(160deg,#231d19,#16110f);border:1px solid rgba(245,241,232,.10);color:var(--cream)}
.offers.dark .plan h3{color:var(--cream)}
.offers.dark .plan .blurb{color:#bcae9c}
.offers.dark .plan .price{color:var(--gold)}
.offers.dark .plan .price small,.offers.dark .plan .price span{color:#bcae9c}
.offers.dark .plan .was{color:#8a7b6b}
.offers.dark .plan .ship{color:var(--gold)}
.offers.dark .plan li{color:#e7ddcd}
.offers.dark .plan li::before{background:var(--gold)}
.offers.dark .plan .bestfor{border-top-color:rgba(245,241,232,.12);color:#cbbfae}
.offers.dark .plan .bestfor b{color:var(--cream)}
.offers.dark .alacarte{color:#bcae9c}
.offers.dark .alacarte a{color:var(--gold)}

.offers.dark .plan.featured{border:1px solid rgba(160,82,45,.55);background:linear-gradient(160deg,#2c221b,#1a1310);
  box-shadow:0 -12px 130px rgba(160,82,45,.42),0 22px 60px rgba(0,0,0,.55)}
.offers.dark .plan.featured .tag{background:linear-gradient(to top,var(--sienna),#c46b3d);box-shadow:0 6px 20px rgba(160,82,45,.5)}

.offers.dark .plan .btn,.offers.dark .plan .btn.ghost{background:linear-gradient(to top,#1f1a17,#3a322c);border:1px solid rgba(245,241,232,.13);color:var(--cream);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.offers.dark .plan .btn:hover,.offers.dark .plan .btn.ghost:hover{background:linear-gradient(to top,#272019,#473d36);color:var(--cream);transform:translateY(-2px)}
.offers.dark .plan.featured .btn{background:linear-gradient(to top,var(--sienna),#c46b3d);border:1px solid rgba(212,165,116,.5);box-shadow:0 10px 30px rgba(160,82,45,.5);color:var(--cream)}
.offers.dark .plan.featured .btn:hover{background:linear-gradient(to top,#8f4827,var(--sienna))}

/* scroll reveal (only hides when JS is active, so no-JS still sees content).
   GPU-friendly: animates only opacity + transform, no blur, to stay smooth. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- detailed service rows ---------- */
.service{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;padding:40px 0;border-bottom:1px solid rgba(138,123,107,.18)}
.service:last-child{border-bottom:none}
.service.flip .svc-art{order:2}
.service .svc-num{font-family:'Space Grotesk';font-weight:700;color:var(--gold);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.service h3{font-size:1.5rem;color:var(--charcoal);margin-bottom:12px;letter-spacing:-.01em}
.service p{font-size:1.02rem;color:#33302c;margin-bottom:14px}
.service ul{list-style:none}
.service li{padding-left:26px;position:relative;margin-bottom:9px;font-size:.97rem}
.service li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:13px;border-radius:50%;background:var(--sienna)}
.svc-art{background:var(--cream);border:1px solid rgba(138,123,107,.16);border-radius:18px;min-height:200px;display:flex;align-items:center;justify-content:center;padding:30px}
.svc-art .mark{width:96px;height:88px}
.service.flip .svc-art{background:var(--charcoal)}

/* ---------- story / about ---------- */
.story{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.story h2{margin-bottom:14px}
.story p{font-size:1.06rem;color:#33302c;margin-bottom:16px}
.story-card{background:var(--charcoal);color:var(--cream);border-radius:18px;padding:32px}
.story-card h3{color:var(--gold);font-size:1.1rem;margin-bottom:14px}
.story-card li{list-style:none;padding-left:26px;position:relative;margin-bottom:13px;font-size:.98rem;color:#ece5d7}
.story-card li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--gold)}

/* values */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value{background:var(--white);border-radius:14px;padding:26px;border:1px solid rgba(138,123,107,.16)}
.value h3{color:var(--sienna);font-size:1.1rem;margin-bottom:8px}
.value p{font-size:.96rem;color:#3a352f}

/* ---------- CTA banner ---------- */
.cta-banner{padding:60px 0}
.cta-inner{background:var(--sienna);color:var(--cream);border-radius:20px;padding:48px;text-align:center}
.cta-inner h2{color:var(--white);font-size:1.85rem;margin-bottom:10px;letter-spacing:-.02em}
.cta-inner p{max-width:54ch;margin:0 auto 26px;color:#fbeede}
.cta-inner .btn.gold{box-shadow:0 12px 30px rgba(26,26,26,.22)}

/* ---------- booking + form (contact) ---------- */
.book{padding:24px 0 72px}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.book-panel{background:var(--white);border-radius:18px;padding:36px;box-shadow:0 16px 44px rgba(26,26,26,.09);border:1px solid rgba(138,123,107,.14);display:flex;flex-direction:column}
.book-panel h2{color:var(--charcoal);font-size:1.45rem;margin-bottom:6px}
.book-panel p.psub{font-size:.97rem;color:var(--stone);margin-bottom:22px}
.book-panel.calendar{background:var(--charcoal);color:var(--cream)}
.book-panel.calendar h2{color:var(--white)}
.book-panel.calendar p.psub{color:#cabfad}
.book-panel.calendar .clock{font-size:2.6rem;margin-bottom:8px}
.book-panel.calendar ul{list-style:none;margin:8px 0 26px}
.book-panel.calendar li{padding-left:26px;position:relative;margin-bottom:12px;font-size:.98rem;color:#ece5d7}
.book-panel.calendar li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--gold)}
.book-panel.calendar .spacer{flex:1}
.field{margin-bottom:16px}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--charcoal);font-family:'Space Grotesk'}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid #ddd4c6;border-radius:9px;font-size:1rem;font-family:inherit;background:var(--cream);color:var(--charcoal)}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sienna);box-shadow:0 0 0 3px rgba(160,82,45,.14)}
form .btn{width:100%;margin-top:6px}
.formnote{font-size:.82rem;color:var(--stone);margin-top:14px;text-align:center}
.thanks{display:none;text-align:center;padding:24px 8px}
.thanks.show{display:flex;flex-direction:column;justify-content:center;flex:1}
.thanks h2{color:var(--sienna);margin-bottom:10px}

/* contact details row */
.contact-row{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-top:8px;text-align:center}
.contact-row .item{min-width:180px}
.contact-row .item .k{font-family:'Space Grotesk';font-weight:600;color:var(--sienna);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.contact-row .item a{color:var(--charcoal);text-decoration:none;font-size:1.02rem}
.contact-row .item a:hover{color:var(--sienna)}

/* ---------- footer ---------- */
footer{background:var(--charcoal);color:var(--cream);padding:48px 0 38px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;align-items:start;margin-bottom:28px}
footer .logo .word b{color:var(--cream)}
footer .tagline{font-family:'Space Grotesk';font-weight:700;color:var(--gold);font-size:1.1rem;margin:14px 0 10px}
footer .fnote{font-size:.9rem;color:#ddd5c6;max-width:36ch}
footer .fcol h4{font-family:'Space Grotesk';color:var(--cream);font-size:.95rem;margin-bottom:12px}
footer .fcol a{display:block;color:#cabfad;text-decoration:none;font-size:.92rem;margin-bottom:9px}
footer .fcol a:hover{color:var(--gold)}
footer .fbar{border-top:1px solid rgba(245,241,232,.12);padding-top:18px;text-align:center;font-size:.82rem;color:var(--stone)}

/* ===========================================================
   Multi-step intake form ("Start your project")
   =========================================================== */
.wizard{max-width:620px;margin:0 auto;padding:8px 0 72px}
.progress{margin-bottom:26px}
.dots{display:flex;justify-content:space-between;margin-bottom:14px}
.dot{display:flex;flex-direction:column;align-items:center;flex:1;gap:7px}
.dot .bead{width:16px;height:16px;border-radius:50%;background:rgba(138,123,107,.35);transition:background .3s ease,box-shadow .3s ease;cursor:pointer}
.dot.done .bead{background:var(--sienna)}
.dot.current .bead{background:var(--sienna);box-shadow:0 0 0 5px rgba(160,82,45,.18)}
.dot .dlabel{font-family:'Space Grotesk';font-size:.72rem;font-weight:600;color:var(--stone);text-align:center}
.dot.current .dlabel{color:var(--sienna)}
@media(max-width:620px){.dot .dlabel{display:none}}
.pbar{height:6px;border-radius:6px;background:rgba(138,123,107,.22);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--sienna);width:0;transition:width .35s ease}

.wcard{background:var(--white);border-radius:20px;border:1px solid rgba(138,123,107,.16);box-shadow:0 18px 50px rgba(26,26,26,.10);padding:34px;overflow:hidden}
.step{display:none}
.step.active{display:block;animation:stepIn .32s ease both}
@keyframes stepIn{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
.step h2{font-size:1.4rem;color:var(--charcoal);margin-bottom:4px;letter-spacing:-.01em}
.step .shint{color:var(--stone);font-size:.96rem;margin-bottom:22px}
.wfield{margin-bottom:18px}
.wfield label{display:block;font-family:'Space Grotesk';font-weight:600;font-size:.9rem;color:var(--charcoal);margin-bottom:7px}

/* selectable option rows (radio / checkbox feel) */
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid rgba(138,123,107,.30);border-radius:11px;padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .12s ease;background:var(--cream)}
.opt:hover{border-color:var(--sienna);transform:translateY(-1px)}
.opt.sel{border-color:var(--sienna);background:rgba(160,82,45,.07)}
.opt .box{width:20px;height:20px;border-radius:50%;border:2px solid var(--stone);flex:none;position:relative;transition:border-color .18s ease}
.opt.check .box{border-radius:6px}
.opt.sel .box{border-color:var(--sienna);background:var(--sienna)}
.opt.sel .box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border-right:2px solid var(--cream);border-bottom:2px solid var(--cream);transform:rotate(40deg)}
.opt .otext{font-size:.98rem;color:var(--charcoal)}

.wnav{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.wnav .step-count{font-size:.86rem;color:var(--stone);font-family:'Space Grotesk'}
.wnav .btns{display:flex;gap:10px}
.btn.sm{padding:11px 22px;font-size:.95rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.wthanks{display:none;text-align:center;padding:30px 10px}
.wthanks.show{display:block;animation:stepIn .32s ease both}
.wthanks .big{font-size:2.6rem;margin-bottom:10px}
.wthanks h2{color:var(--sienna);margin-bottom:10px}
.wthanks p{color:#33302c;max-width:46ch;margin:0 auto}

@media(max-width:820px){
  .nav{flex-wrap:wrap;justify-content:space-between;row-gap:8px}
  .menu{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:2px;border-top:1px solid rgba(138,123,107,.18);padding-top:10px}
  .menu a{padding:7px 11px;font-size:.92rem}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:2.2rem}
  .hero p.sub{max-width:none}
  .page-hero h1{font-size:2rem}
  .cols,.why-grid,.plan-grid,.book-grid,.stats,.story,.values,.footer-grid{grid-template-columns:1fr;gap:18px}
  .why-box,.book-panel,.cta-inner,.story-card{padding:30px}
  .plan.featured{order:-1}
  .service{grid-template-columns:1fr;gap:20px;padding:30px 0}
  .service.flip .svc-art{order:0}
  .wcard{padding:24px}
}