/* Lithiq Labs marketing site: layout and components.
   Brand colours, fonts and logo files live in brand.css (load it first). Nothing here names a brand
   value; everything reads the surface tokens (--bg, --text, --link …), so a section changes ground by class.
   The lithology / alteration / assay colours below are fixed geological colours for the illustrations,
   not brand values, and do not change with the brand. */

/* Handwritten field-note numbers on the background maps (illustration only). */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap");

:root{
  --lith-and:#9AA19C; --lith-lst:#D3CDBC; --lith-tuf:#C2B08C;
  --alt-chl:#6F8A80; --alt-sil:#B9C3CF; --alt-arg:#C8782F; --au:#D4A23A;
  --measure:62ch;
  --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink-deep)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
section,.hero-band,.surface-cream,.surface-dark{background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration-color:color-mix(in srgb, var(--accent-mark) 70%, transparent);
  text-decoration-thickness:1.5px;text-underline-offset:.2em;transition:color .15s}
a:hover{color:var(--link-hover);text-decoration-color:var(--accent-mark)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--font-heading);line-height:1.1;margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:700;letter-spacing:-.03em;max-width:16ch;line-height:1.06}
h2{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:700;max-width:22ch}
h2 + p{margin-top:20px}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:var(--measure)}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,min(4vw,40px),env(safe-area-inset-left,0px));padding-right:max(16px,min(4vw,40px),env(safe-area-inset-right,0px))}
section{padding-block:clamp(64px,9vw,112px);border-top:1px solid var(--rule)}
/* A cream band after a cream band (or dark after dark) keeps its hairline; a change of ground needs none. */
.option-b .band-alt,.option-b .band-alt + section{border-top-color:transparent}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:block;flex:none;text-decoration:none;border-radius:6px}
.logo{display:block;height:clamp(52px,7vw,78px);aspect-ratio:var(--logo-ratio);max-width:100%;
  background:var(--logo) no-repeat left center/contain}
.top nav{display:flex;align-items:center;gap:clamp(14px,3vw,30px);font:600 .94rem var(--font-heading)}
.top nav a{color:var(--text);text-decoration:none}
.top nav a:hover{color:var(--link)}
.top nav .nav-keep{color:var(--text-muted);font-weight:500}
.top nav .nav-cta{color:var(--link);padding:.45em .9em;border:1.5px solid currentColor;border-radius:var(--radius)}
.top nav .nav-cta:hover{color:var(--btn-text);background:var(--btn-bg);border-color:var(--btn-bg)}
@media (max-width:640px){.top nav a:not(.nav-cta):not(.nav-keep){display:none}}

/* buttons */
.btn{display:inline-block;font:600 1rem var(--font-heading);letter-spacing:.005em;padding:.85em 1.4em;border-radius:var(--radius);
  text-decoration:none;border:1.5px solid transparent;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.btn-primary:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-text)}
.btn-quiet{color:var(--text);background:transparent;border-color:var(--btn-quiet-border)}
.btn-quiet:hover{background:var(--btn-quiet-hover);color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* background art: contours and drillhole traces (invented terrain) */
.hero-band{position:relative;overflow:hidden}
.hero-band > .wrap{position:relative}
.topo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:var(--art-opacity)}
.topo-hero{-webkit-mask-image:linear-gradient(100deg,transparent 22%,#000 66%);mask-image:linear-gradient(100deg,transparent 22%,#000 66%)}
.topo .c{fill:none;stroke:var(--art-line);stroke-width:1;opacity:.12}
.topo .c-idx{fill:none;stroke:var(--art-line);stroke-width:1.7;opacity:.2}
.topo .dh{stroke:var(--accent-mark);stroke-width:2.2;stroke-linecap:round;opacity:.65}
.topo .collar{fill:var(--bg);stroke:var(--accent-mark);stroke-width:2.2}
.topo-dark{-webkit-mask-image:linear-gradient(100deg,transparent 25%,#000 75%);mask-image:linear-gradient(100deg,transparent 25%,#000 75%)}
@media (max-width:860px){.topo-hero{opacity:calc(var(--art-opacity) * .5)}}
.has-map{position:relative;overflow:hidden}
.has-map > .wrap{position:relative}
.geomap{opacity:calc(var(--art-opacity) * .5);-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 80%);mask-image:linear-gradient(100deg,transparent 30%,#000 80%)}
.geomap .unit{opacity:.32}
.geomap .contact{fill:none;stroke:var(--art-line);stroke-width:1;opacity:.22}
.geomap .fault{stroke:var(--art-line);stroke-width:2.4;opacity:.32}
.geomap .sd{stroke:var(--art-line);stroke-width:2;opacity:.55}
.geomap .sd-t{font:600 13px var(--font-heading);fill:var(--art-line);opacity:.6}
.geomap .grab{stroke:var(--accent-mark);stroke-width:2.4;stroke-linecap:round}
.geomap .grab-t{font:600 26px "Caveat",cursive;fill:var(--accent-mark)}
@media (max-width:860px){.geomap{opacity:calc(var(--art-opacity) * .35)}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px);align-items:center;padding-block:clamp(36px,6vw,80px) clamp(64px,9vw,112px)}
.hero .lede{font-size:1.22rem;color:var(--text-muted);margin-top:24px}
/* The strip log sits on a cream sheet in every option: its geological colours are made for a light ground. */
.core-tray{border:1px solid var(--rule);padding:18px 14px 10px;border-radius:var(--radius);
  box-shadow:0 24px 60px -24px color-mix(in srgb, var(--ink-deep) 80%, transparent)}
.striplog{width:100%;height:auto;display:block}
.sl-h{font:600 11px var(--font-heading);fill:var(--text-muted)}
.sl-depth{font:500 11px var(--font-heading);fill:var(--text-muted)}
.sl-tick{stroke:var(--text-muted);stroke-width:1}
.sl-axis{stroke:var(--text-muted);stroke-width:1}
.sl-cell{stroke:var(--bg);stroke-width:1}
.sl-struct{stroke:var(--text);stroke-width:1.6;stroke-linecap:round}
.sl-sample{fill:var(--bg-raised);stroke:var(--rule);stroke-width:1}
.sl-au{fill:var(--au);opacity:.75}
.sl-id{font:500 10px var(--font-body);fill:var(--text)}
.sl-val{font:600 10px var(--font-body);fill:var(--text)}
.tray-note{font:400 .8rem var(--font-body);color:var(--text-muted);margin:8px 2px 0}
@media (max-width:860px){.hero{grid-template-columns:1fr}.core-tray{max-width:420px}}

/* products */
.products{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,48px);margin-top:44px}
.product{position:relative;padding-top:26px;border-top:1px solid var(--rule-strong);min-width:0}
.product::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:4px;background:var(--core-bands)}
.product.later{border-top-color:var(--rule)}
.product.later::before{display:none}
.product-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.product-head svg{flex:none}
.pm-core{fill:var(--bg-raised);stroke:var(--rule-strong);stroke-width:2}
.pm-b1{fill:var(--band-1)}.pm-b2{fill:var(--band-2)}.pm-b3{fill:var(--band-3)}
.pm-tick{stroke:var(--text-muted);stroke-width:5;stroke-linecap:round}
.pm-bar{fill:var(--text-muted)}
.pm-bar-on{fill:var(--accent-mark)}
.product p{color:var(--text-muted)}
.status,.soon{font:600 .78rem var(--font-heading);letter-spacing:.14em;text-transform:uppercase}
.status{color:var(--accent-text);margin-bottom:12px;display:block}
.product.later .status{color:var(--text-muted)}
.soon{display:block;margin-top:.8em;color:var(--accent-text);letter-spacing:.06em;text-transform:none;font-size:.9rem;line-height:1.5}
@media (max-width:760px){.products{grid-template-columns:1fr}}

/* feature list */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(28px,5vw,64px);margin-top:48px}
.features > div{border-top:1px solid var(--rule);padding-top:20px;min-width:0}
.features h3{margin-bottom:8px}
.features p{color:var(--text-muted);font-size:1rem}
@media (max-width:760px){.features{grid-template-columns:1fr}}

.intro{font-size:1.18rem;margin-top:20px}

/* principles */
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:44px}
.principles > div{min-width:0}
.principles h3{margin-bottom:8px}
.principles p{font-size:.98rem;color:var(--text-muted)}
@media (max-width:960px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.principles{grid-template-columns:1fr}}

/* pricing */
.price{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,6vw,72px);align-items:start;margin-top:40px}
.figure{font-family:var(--font-heading);font-weight:800;letter-spacing:-.05em;font-size:clamp(4.2rem,10vw,7.2rem);line-height:.9;color:var(--text);font-variant-numeric:tabular-nums}
.figure .dol{color:var(--accent-text);font-weight:600;font-size:.6em;vertical-align:.55em;margin-right:.04em}
.figure small{display:block;font:600 .8rem var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-top:14px;line-height:1.3}
.price ul{margin:0;padding:0;list-style:none;max-width:var(--measure);min-width:0}
.price li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--rule)}
.price li::before{content:"";position:absolute;left:0;top:calc(12px + .62em);width:16px;height:5px;background:var(--core-bands)}
.price li:first-child{padding-top:0}
.price li:first-child::before{top:.62em}
.compare{margin-top:20px;color:var(--text-muted)}
@media (max-width:640px){.price{grid-template-columns:1fr}}

/* contact and footer: the deepest ground, in every option */
.contact,footer{--bg:var(--ink-deep)}
.contact{position:relative;overflow:hidden;border-top:0}
.contact > .wrap{position:relative}
.contact h2{max-width:20ch}
.contact p{color:var(--text-muted)}
.contact a.mail{color:var(--text)}
.contact a.mail:hover{color:var(--link)}
footer{background:var(--bg);color:var(--text-muted);font:400 .88rem var(--font-body);padding-block:28px 40px;border-top:1px solid var(--rule)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-icon{display:block;width:32px;height:32px;background:var(--icon) no-repeat center/contain;border-radius:7px;
  box-shadow:0 0 0 1px var(--rule)}