/* ===== home v3: hero · tracks · latest · tools ===== */
.hero{position:relative;padding:40px 0 48px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:820px;max-height:820px;background:radial-gradient(closest-side,color-mix(in srgb,var(--amber) 14%,transparent),transparent);pointer-events:none}
.hero-in{display:grid;gap:40px;align-items:center}
.hero-tx{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--amber-tx);margin:0 0 16px;padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--amber) 11%,transparent)}
.hero h1{font-size:clamp(34px,7.6vw,58px);font-weight:900;line-height:1.18;letter-spacing:-.005em}
.h1-2{display:block;margin-top:12px;font-size:.6em;font-weight:700;line-height:1.35;color:var(--amber-tx)}
.hero .sub{font-size:18px;line-height:1.85;color:var(--muted);max-width:34em;margin:24px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.counters{list-style:none;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:24px 40px}
.counters li{display:flex;flex-direction:column;gap:0;min-width:64px}
.counters li[hidden]{display:none}
.counters b{font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;color:var(--ink)}
.counters span{font-size:14px;color:var(--muted)}
.hero-well{margin:0;justify-self:center;width:min(100%,360px)}
.hw-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:16px 8px 8px;box-shadow:0 24px 60px -30px rgba(0,0,0,.55)}
.hero-well figcaption{font-size:13px;color:var(--faint);text-align:center;margin-top:8px}
@media (min-width:900px){
  .hero{padding:72px 0 64px}
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px}
  .hero-well{justify-self:end}
}
/* well cross-section colours (both themes) */
.well{display:block;width:100%;height:auto;
  --f1:#13212D;--f2:#172736;--f3:#1C2D3D;--f4:#0E1922;--f5:#152230;--res:#3B2B10;--dot:#B07A22;--bore:#07101A;--cem:#4C5661;--cemL:#6A747F;
  --steel:#8EA4B8;--steel2:#C8D5E1;--tbore:#0A131D;--wh:#24364A;--wh2:#33495F;--lb:#8DA5B9;--lead:#3B5670;--ground:#5C778C;--oil:#F5A524;--packer:#F5A524;--perf:#F5A524}
[data-theme=light] .well{--f1:#EFE8DC;--f2:#E7DFD0;--f3:#DED5C5;--f4:#CEC5B5;--f5:#E5DDCF;--res:#F4DDAE;--dot:#B47A27;--bore:#FAFCFE;--cem:#B9C0C7;--cemL:#98A0A9;
  --steel:#4C6177;--steel2:#2C3F53;--tbore:#EEF2F6;--wh:#DCE3EA;--wh2:#C7D1DB;--lb:#3F5468;--lead:#9AAABA;--ground:#6B7F92;--oil:#E08A00;--packer:#D07E00;--perf:#C56F00}
[data-theme=light] .hw-card{box-shadow:0 20px 50px -30px rgba(11,26,42,.35)}
.hw-f1{fill:var(--f1)}.hw-f2{fill:var(--f2)}.hw-f3{fill:var(--f3)}.hw-f4{fill:var(--f4)}.hw-f5{fill:var(--f5)}.hw-res{fill:var(--res)}
.hw-dot{fill:var(--dot)}
.hw-bore{fill:var(--bore)}
.hw-cem{fill:var(--cem)}.hw-cem-l{stroke:var(--cemL);stroke-width:1}
.hw-steel{fill:var(--steel)}.hw-steel2{fill:var(--steel2)}.hw-tbore{fill:var(--tbore)}
.hw-packer{fill:var(--packer)}
.hw-wh{fill:var(--wh);stroke:var(--steel);stroke-width:1.2}.hw-wh2{fill:var(--wh2);stroke:var(--steel);stroke-width:1.2}
.hw-vs{fill:none;stroke:var(--steel);stroke-width:1.4}
.hw-flowline{stroke:var(--steel);stroke-width:8;fill:none}
.hw-oil{fill:var(--oil)}.hw-oil-l{stroke:var(--oil);stroke-width:4;fill:none;stroke-dasharray:200;stroke-dashoffset:0}
.hw-perf{stroke:var(--perf);stroke-width:2;stroke-linecap:round}
.hw-ground{stroke:var(--ground);stroke-width:1.5}
.hw-lead{stroke:var(--lead);stroke-width:.8;fill:none}
.hw-lb,.hw-lb-r{fill:var(--lb);font-family:"Segoe UI",system-ui,sans-serif;font-size:11px}
.hw-lb b,.hw-lb .d{fill:var(--faint)}
.hw-anim .L{opacity:0;transform:translateY(-6px);transition:opacity .55s ease,transform .55s ease}
.hw-anim .L.on{opacity:1;transform:none}
#hw-fl,#hw-sump{transform-box:fill-box;transform-origin:50% 100%}
.hw-anim #hw-fl,.hw-anim #hw-sump{transition:transform .3s linear}
.hw-anim #hw-fx{transition:stroke-dashoffset .3s linear}

/* resume (slim) */
#resume-slot:not(.has){display:none}
#resume-slot{margin-bottom:8px}
#resume-slot .resume{margin:0;padding:10px 16px}

/* sections */
.hero~section.blk{padding:48px 0}
.hero~section.blk .sec-h{margin-bottom:24px}
.hero~section.blk .sec-h h2{font-size:clamp(22px,3vw,28px)}
.sec-sub{margin:4px 0 0;color:var(--muted);font-size:15px}

/* latest four */
.g-latest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:899px){.g-latest{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(240px,46%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}}
@media (max-width:520px){.g-latest{grid-auto-columns:76%}}
.g-latest>*{scroll-snap-align:start;min-width:0}
.latest .sec-h h2{display:flex;align-items:center;gap:12px}
.live{width:10px;height:10px;border-radius:50%;background:#E62117;animation:livep 1.6s infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 rgba(230,33,23,.6)}70%{box-shadow:0 0 0 10px rgba(230,33,23,0)}100%{box-shadow:0 0 0 0 rgba(230,33,23,0)}}
.ycard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-align:start;display:flex;flex-direction:column;transition:border-color .2s,transform .25s,box-shadow .25s}
.ycard:hover,.ycard:focus-visible{border-color:color-mix(in srgb,var(--amber) 60%,var(--line));transform:translateY(-3px);box-shadow:var(--glow)}
.ycard .cover{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--card2)}
.ycard .cover img{width:100%;height:100%;object-fit:cover}
.ycard .b{padding:12px 16px 16px;display:flex;flex-direction:column;gap:4px}
.ycard h3{font-size:15px;font-weight:700;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ycard .when{font-size:12.5px;color:var(--faint)}
.ycard .new{position:absolute;top:8px;right:8px;background:var(--amber);color:var(--amber-ink);font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px}

/* tools strip */
.tstrip{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.tstrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.tstrip a{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--r2,16px);background:var(--card);border:1px solid var(--line);transition:border-color .2s,transform .25s,box-shadow .25s}
.tstrip a:hover,.tstrip a:focus-visible{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));transform:translateY(-2px);box-shadow:var(--glow)}
.tstrip .ti{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:var(--amber-tx);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.tstrip .ti svg{width:26px;height:26px}
.tstrip b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.tstrip small{display:block;font-size:13.5px;color:var(--muted);line-height:1.6}
@media (prefers-reduced-motion:reduce){.live{animation:none}.ycard,.tstrip a{transition:none}.ycard:hover,.tstrip a:hover{transform:none}}
/* ===== v3 extras: hero photo · tools strip · market ===== */
.hero.has-bg{background:#0B1828;padding-bottom:var(--s5,40px)}
.hero.has-bg::before{display:none}
.hero-bg{position:absolute;inset:0;z-index:-2;margin:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.hero.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(8,20,36,.96) 0,rgba(8,20,36,.88) 45%,rgba(8,20,36,.62) 100%),linear-gradient(0deg,rgba(8,20,36,.9),transparent 40%)}
.hero.has-bg .hero-tx{--ink:#F2F6FA;--muted:#CBD8E4;--faint:#A9BBCC;--line:rgba(255,255,255,.18);--card:rgba(255,255,255,.08);--amber-tx:#FFB547;color:var(--ink)}
.hero.has-bg .btn:not(.primary){color:#F2F6FA;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.hero.has-bg .btn:not(.primary):hover{border-color:#FFB547}
.hero-credit{position:relative;margin:var(--s3,24px) 0 0;font-size:11.5px;color:#9FB2C4}
.hero-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:899px){.hero.has-bg::after{background:linear-gradient(0deg,rgba(8,20,36,.97) 30%,rgba(8,20,36,.80))}}
@media (min-width:700px){.tstrip{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
/* SVG labels use start/end anchors: keep the drawing LTR so RTL does not flip them off-canvas */
.well{direction:ltr}
@media (min-width:700px){.tstrip{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.hero.has-bg .hero-credit{color:#D5E0EA}