/* Dirtcon concept 3 — "Depth".
   Dark like concept 1 and deliberately a different temperature: warm clay black
   #12100E with warm paper text, rather than the cold matte #0A0A0A. Layout
   language is a descent down a rule, editorial and asymmetric, rather than the
   card grid of concept 1. The amber is sampled from the clay in their own
   excavation photographs and is a PROPOSAL, spent on the depth scale and the
   active stage only. */
:root{
  --clay:#12100E; --clay-2:#1B1815; --raise:#241F1B; --line:#332C26;
  --paper:#F2EEE8; --quiet:#A79C90; --chrome:#C8CCD1; --steel:#6E7277;
  --amber:#C87A32;           /* proposed accent, the depth scale and active stage */
  --disp:'Bricolage Grotesque',system-ui,sans-serif; --body:'Public Sans',system-ui,sans-serif;
  --max:1200px;
  --scq-sheet:#1B1815; --scq-ink:#F2EEE8; --scq-muted:#A79C90;
  --scq-line:rgba(242,238,232,.16); --scq-bot:rgba(242,238,232,.07);
  --scq-you:#C87A32; --scq-you-ink:#12100E;
  --scq-accent:#C87A32; --scq-accent-ink:#12100E; --scq-radius:14px;
  --scq-font-display:'Bricolage Grotesque',system-ui,sans-serif; --scq-font-body:'Public Sans',system-ui,sans-serif;
  --dk-sheet:rgba(27,24,21,.9); --dk-line:rgba(242,238,232,.16); --dk-ink:#A79C90;
  --dk-ink-on:#F2EEE8; --dk-accent:#C87A32; --dk-accent-ink:#12100E;
  --dk-pill:rgba(242,238,232,.1); --dk-radius:10px; --dk-font:'Public Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--clay);color:var(--paper);font:400 17px/1.66 var(--body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.has-dock{padding-bottom:86px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.wrap-n{width:min(100% - 40px,880px)}
.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--amber);z-index:90}

/* header */
.hd{position:sticky;top:0;z-index:60;background:rgba(18,16,14,.88);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:20px;min-height:72px}
.hd-logo{display:flex;align-items:center;min-height:46px}
.hd-logo img{height:36px;width:auto}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{font-size:14px;font-weight:500;color:var(--quiet);text-decoration:none;
  display:inline-flex;align-items:center;min-height:46px;transition:color .18s}
.nav a:hover{color:var(--paper)}
.hd-cta{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;font-weight:700;
  font-size:15px;color:var(--clay);background:var(--amber);text-decoration:none;border-radius:999px}
.hd-tel,.burger{display:none}
.burger{background:none;border:1px solid var(--line);width:46px;height:46px;border-radius:12px;
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:19px;height:1.6px;background:var(--paper)}
.drawer{position:fixed;inset:72px 0 auto 0;background:var(--clay-2);border-bottom:1px solid var(--line);
  transform:translateY(-120%);transition:transform .38s cubic-bezier(.2,.9,.3,1);z-index:55;padding:10px 20px 20px;display:none}
.drawer.on{transform:none}
.drawer a{display:block;padding:14px 0;min-height:48px;border-bottom:1px solid var(--line);
  text-decoration:none;font-weight:600;font-size:16px;color:var(--paper)}
.drawer .dcall{border:0;margin-top:14px;background:var(--amber);color:var(--clay);text-align:center;
  border-radius:999px;padding:13px;font-weight:700}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;justify-content:center;padding:52px 0 0;overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(1100px 620px at 78% 12%,rgba(200,122,50,.2),transparent 62%),
             radial-gradient(760px 520px at 8% 88%,rgba(200,204,209,.09),transparent 66%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:48px;align-items:center;padding:44px 0 70px}
.hero-copy{max-width:640px}
.eyebrow{margin:0 0 16px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
h1{margin:0;font-family:var(--disp);font-weight:800;line-height:1.03;letter-spacing:-.03em;
  font-size:clamp(34px,4.9vw,62px)}
h1 span{color:var(--quiet)}
.lede{margin:22px 0 0;font-size:clamp(16px,1.8vw,19px);color:#D6CEC5;max-width:44ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;
  font-weight:700;font-size:15.5px;text-decoration:none;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s,background .18s}
.btn-1{background:var(--amber);color:var(--clay)}
.btn-2{border-color:var(--line);color:var(--paper);background:rgba(36,31,27,.7)}
.btn:hover{transform:translateY(-2px)}
.hero-note{margin:18px 0 0;font-size:13px;color:var(--quiet)}
/* real min height at every viewport so the quiz detector never skips it */
.hero-fig{min-height:470px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(36,31,27,.8),rgba(18,16,14,.4));
  background-image:url("/jimmy-media/art/contour.svg");background-size:cover;background-position:center;
  box-shadow:0 30px 80px rgba(0,0,0,.45)}
.hero-fig.is-empty{display:none}

/* sections */
.sec{padding:92px 0}
.sec-alt{background:var(--clay-2);border-block:1px solid var(--line)}
h2{margin:8px 0 0;font-family:var(--disp);font-weight:800;line-height:1.06;letter-spacing:-.028em;
  font-size:clamp(29px,4vw,52px)}
.sub{margin:16px 0 0;max-width:58ch;color:var(--quiet);font-size:16.5px}

/* the descent */
.descent{padding-bottom:40px}
.stages{position:relative;margin-top:52px}
.rule{position:absolute;left:calc(50vw - min(50vw - 20px, var(--max)/2) + 86px);top:0;bottom:0;width:2px;
  background:var(--line);z-index:0}
.rule i{position:absolute;top:0;left:0;width:2px;height:0;background:var(--amber);
  transition:height .25s linear;display:block}
.st{position:relative;z-index:1;padding:34px 0}
.st-in{display:grid;grid-template-columns:172px minmax(0,1fr) minmax(0,340px);gap:32px;align-items:center}
.st-l{display:flex;flex-direction:column;gap:4px}
.st-d{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;color:var(--amber);letter-spacing:-.03em}
.st-t{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
.st-b h3{margin:0 0 10px;font-family:var(--disp);font-weight:600;font-size:clamp(21px,2.4vw,29px);letter-spacing:-.02em}
.st-b p{margin:0;color:#CFC6BC;font-size:16px;max-width:52ch}
.st-s{margin-top:12px !important;display:inline-block;padding:7px 14px;border:1px solid var(--line);
  border-radius:999px;font-size:13.5px;font-weight:600;color:var(--chrome);background:rgba(36,31,27,.7)}
.st-f{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.st-f img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.05) saturate(1.05);
  transition:transform .7s cubic-bezier(.2,.9,.3,1)}
.st:hover .st-f img{transform:scale(1.04)}
.also{margin:34px 0 0;font-size:14.5px;color:var(--quiet)}
.also b{color:var(--paper)}

/* gallery */
.gal{margin-top:42px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-i{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--raise);
  display:flex;flex-direction:column}
.g-i img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.2,.9,.3,1)}
.g-i:hover img{transform:scale(1.05)}
.g-i figcaption{padding:14px 16px 16px}
.g-i figcaption b{display:block;font-family:var(--disp);font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.g-i figcaption span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--quiet)}
.subs{margin-top:34px;border:1px solid var(--line);border-radius:16px;padding:24px 28px;background:var(--clay)}
.subs-l{display:block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);font-weight:700}
.subs-v{margin:10px 0 0;font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.2vw,38px);
  letter-spacing:-.03em;color:var(--paper)}
.subs-v i{font-style:normal;color:var(--amber)}
.subs-n{margin:12px 0 0;font-size:13px;color:var(--quiet);max-width:66ch}

/* plant */
.plant{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pl{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--clay-2)}
.sec-alt .pl{background:var(--clay)}
.pl b{display:block;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.015em}
.pl span{display:block;margin-top:6px;font-size:14.5px;color:var(--quiet)}

/* method */
.meth{margin:40px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.meth li{display:grid;grid-template-columns:56px 1fr;gap:16px;border:1px solid var(--line);
  border-radius:14px;padding:22px 24px;background:var(--clay)}
.meth i{font-style:normal;font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;color:var(--amber)}
.meth h3{margin:0 0 6px;font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.015em}
.meth p{margin:0;font-size:15px;color:var(--quiet)}
.safety{margin-top:44px;border:1px solid var(--line);border-radius:16px;padding:28px 30px;background:var(--clay)}
.safety h3{margin:0 0 20px;font-family:var(--disp);font-weight:600;font-size:24px;letter-spacing:-.02em}
.saf-g{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.saf-g b{display:block;font-size:14.5px;font-weight:700;color:var(--chrome)}
.saf-g p{margin:6px 0 0;font-size:14px;color:var(--quiet)}

/* faq */
.faq{margin-top:34px}
.faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--clay-2);overflow:hidden}
.sec-alt .faq details{background:var(--clay)}
.faq summary{list-style:none;cursor:pointer;padding:18px 48px 18px 20px;position:relative;
  font-family:var(--disp);font-weight:600;font-size:clamp(16.5px,2vw,19px);letter-spacing:-.015em;
  min-height:46px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{margin:0 20px 20px;color:#CFC6BC;font-size:15.8px;max-width:70ch}
.proof{margin-top:32px;border:1px solid var(--amber);border-radius:16px;padding:24px 28px;
  background:rgba(200,122,50,.07)}
.proof h3{margin:0 0 8px;font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em}
.proof p{margin:0;font-size:15.5px;color:#CFC6BC}
.proof a{color:var(--amber);font-weight:600}

/* form */
.cf{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:14px;border:1px solid var(--line);
  border-radius:18px;padding:0 28px 28px;background:var(--clay);overflow:hidden}
.cf-brand{grid-column:1 / -1;display:flex;justify-content:center;padding:26px 0 20px;margin:0 -28px 8px;
  background:linear-gradient(180deg,rgba(200,122,50,.14),transparent);border-bottom:1px solid var(--line)}
.cf-brand img{height:44px;width:auto}
.fld{position:relative}
.fld-w{grid-column:1 / -1}
.fld input,.fld textarea{width:100%;min-height:56px;padding:22px 15px 8px;font:400 16px/1.4 var(--body);
  color:var(--paper);background:var(--clay-2);border:1px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .18s}
.fld textarea{min-height:94px;padding-top:26px;resize:vertical}
.fld label{position:absolute;left:15px;top:18px;font-size:15px;color:var(--quiet);pointer-events:none;
  transition:transform .18s ease,font-size .18s ease;transform-origin:left top}
.fld input:focus,.fld textarea:focus{border-color:var(--amber)}
.fld input:focus + label,.fld input:not(:placeholder-shown) + label,
.fld textarea:focus + label,.fld textarea:not(:placeholder-shown) + label{
  transform:translateY(-11px) scale(.78)}
.cf-go{grid-column:1 / -1;width:100%}
.cf-note{grid-column:1 / -1;margin:0;font-size:12.5px;color:var(--quiet)}
.cf-ok{grid-column:1 / -1;border:1px solid var(--amber);border-radius:10px;padding:14px 16px;font-size:15px;
  background:rgba(200,122,50,.1)}
.cf-ok b{color:var(--amber)}
.cf-ok[hidden]{display:none}
.ct{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ct a{border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;
  min-height:64px;display:block;background:var(--clay)}
.ct b{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.ct span{display:block;margin-top:5px;font-family:var(--disp);font-weight:600;font-size:17px;
  color:var(--paper);word-break:break-word}

/* footer */
.ft{background:var(--clay-2);border-top:1px solid var(--line);padding:58px 0 0}
.ft-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
.ft-a .mark{height:42px;width:auto;margin-bottom:16px}
.ft-a p{margin:0;font-size:14.5px;color:var(--quiet);max-width:44ch}
.ft h5{margin:0 0 10px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.ft a{display:block;padding:7px 0;min-height:34px;font-size:14.5px;color:#CFC6BC;text-decoration:none}
.ft a:hover{color:var(--paper)}
.ft-p{margin:10px 0 0;font-size:14px;color:var(--quiet)}
.ft-bot{margin-top:42px;padding:18px 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.ft-bot small{font-size:13px;color:var(--quiet)}
.byscalus{font-size:13px;color:var(--quiet)}
.byscalus a{display:inline;padding:0;min-height:0;color:var(--amber);font-weight:700;text-decoration:none}
.disc{background:var(--clay);border-top:1px solid var(--line);padding:20px 0 30px}
.disc .wrap{font-size:13px;line-height:1.65;color:var(--quiet)}
.disc b{color:#CFC6BC}

/* motion */
.reveal{opacity:0;transform:translateY(16px);filter:blur(5px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1),filter .7s ease}
.reveal.in{opacity:1;transform:none;filter:none}
html.noanim .reveal{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none}}

/* responsive */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .hero-fig{min-height:300px}
  .st-in{grid-template-columns:132px minmax(0,1fr);gap:24px}
  .st-f{grid-column:1 / -1;margin-top:16px}
  .rule{left:20px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .plant{grid-template-columns:repeat(2,1fr)}
  .saf-g{grid-template-columns:repeat(2,1fr)}
  .ft-in{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .nav,.hd-cta{display:none}
  .hd-tel{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
    margin-left:auto;border:1px solid var(--line);border-radius:12px;color:var(--paper)}
  .hd-tel svg{width:19px;height:19px}
  .burger{display:flex}
  .drawer{display:block}
  .meth{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap,.wrap-n{width:calc(100% - 32px)}
  .sec{padding:58px 0}
  .hero{padding-top:16px}
  .hero-grid{padding:26px 0 42px;gap:24px}
  .hero-fig{min-height:220px}
  .hero-cta .btn{width:100%}
  .stages{margin-top:34px}
  .rule{left:16px}
  .st{padding:22px 0}
  .st-in{grid-template-columns:1fr;gap:12px;padding-left:34px}
  .st-l{flex-direction:row;align-items:baseline;gap:12px}
  .st-d{font-size:26px}
  .st-f{margin-top:12px}
  /* two up on a phone: one up made the page 21.5 screens tall (the Eleet lesson) */
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .g-i figcaption{padding:10px 11px 12px}
  .g-i figcaption b{font-size:14.5px}
  .g-i figcaption span{font-size:12.5px;line-height:1.45}
  .plant{grid-template-columns:1fr}
  .saf-g{grid-template-columns:1fr;gap:18px}
  .safety{padding:22px}
  .cf{grid-template-columns:1fr;padding:0 18px 22px}
  .cf-brand{margin-inline:-18px}
  .ct{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr;gap:24px}
  .subs{padding:20px}
  /* phone standard: nothing a visitor reads goes under 12px */
  .eyebrow,.hero-note,.st-t,.subs-l,.subs-n,.cf-note,.ct b,.ft h5,.ft-bot small,.byscalus,
  .disc .wrap,.also,.g-i figcaption span{font-size:12.5px}
  .hd-logo img{height:30px}
}