/* Day theme polish (owner 22/10): every rule here applies only under :root[data-theme=light]. Loaded after the inline styles.
   Bithrah v5 on paper: warm off-white base, tonal bands (raised = proof, sunken = method), hairlines from ink at .13/.065/.035,
   layered tinted shadows, deep teal #00705F for any coloured text, deep gold #8A5A12 for proof text, no letter-spacing. */

/* ---------- 1. tokens ---------- */
:root[data-theme=light]{
  --bg:#f2f4ef; --bgrgb:242,244,239;
  --ink:#0f1513; --inkrgb:16,22,20;
  --soft:#2b3430; --dim:#454f4a; --mut:#59625d;
  --rule:rgba(16,22,20,.13); --rule2:rgba(16,22,20,.065); --rule3:rgba(16,22,20,.035);
  --turq:#00705f; --grape:#6a35b0; --gold:#8a5a12; --onacc:#ffffff;
  /* text-safe accents: the section accent (set by the page loop) pulled toward ink so it never drops under 6:1 */
  --d-teal:#00705f; --d-gold:#8a5a12; --d-goldfill:#b5822a;
  --d-acx:color-mix(in srgb,rgb(var(--acR),var(--acG),var(--acB)) 76%,#04120e);
  /* tonal bands over the base: raised = proof (clients, numbers, ticker, LEAP strip), sunken = method (LEAP board, philosophy, assets, footer) */
  --d-raised:rgba(255,255,255,.52); --d-sunk:rgba(16,22,20,.026);
  /* shadows are always: hairline ring + 1-2px contact + long soft drop tinted toward green-ink (16,40,34) or the item colour */
}
/* Resolve the exact same drifting accent locally instead of inheriting a
   changing root alias through every offscreen node. */
:root.full-motion[data-theme=light] [data-accent-scope]{--d-acx:color-mix(in srgb,rgb(var(--acR),var(--acG),var(--acB)) 76%,#04120e)}
:root[data-theme=light] ::selection{background:rgba(0,112,95,.16);color:#0f1513}

/* focus: one deep-teal ring everywhere on paper (the services overlay keeps its own, see section 14) */
:root[data-theme=light] :is(a,button,summary,[tabindex]):focus-visible{outline-color:#00705f}
:root[data-theme=light] :is(.nav a,.hcta,.hcta2,.clink,.clsite,.wabtn,.mailbtn,.phmore,.pfbtn,.fsoc a,.numpf,.pod-yt,.st-open,.rbcta,summary):focus-visible{outline:2px solid #00705f;outline-offset:4px}

/* brand: Arabic is never letter-spaced (it breaks the joins) */
:root[data-theme=light] :is(#hero .heye,.caps .capl,#assets .as .asfrom,.fsoc .fsl,.tm-no,#clients .cl .clsite){letter-spacing:0}

/* ---------- 2. page ground ---------- */
:root[data-theme=light] #ambient{opacity:.55}
:root[data-theme=light] .grain{opacity:.035}
/* the code field draws behind everything; on paper its strokes must stay a texture, never a second layer over text */
:root[data-theme=light] .code-field{opacity:.5}

/* ---------- 3. nav ---------- */
:root[data-theme=light] .nav.on{background:rgba(246,247,243,.88);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border-color:rgba(16,22,20,.08);box-shadow:inset 0 -1px 0 rgba(255,255,255,.6),0 12px 32px -22px rgba(16,40,34,.3)}
:root[data-theme=light] .nav .langs a,:root[data-theme=light] .nav.on .langs a{color:var(--mut)}
:root[data-theme=light] .nav .langs a:hover{color:var(--ink)}
:root[data-theme=light] .nav .langs a.on,:root[data-theme=light] .nav.on .langs a.on{color:var(--d-teal)}
:root[data-theme=light] .nav .cta::after{background:var(--d-teal)}
:root[data-theme=light] .theme-tg{background:rgba(255,255,255,.6);border-color:rgba(16,22,20,.12);box-shadow:0 1px 2px rgba(16,22,20,.05)}
:root[data-theme=light] .theme-tg:hover,:root[data-theme=light] .theme-tg:focus-visible{background:#fff;border-color:rgba(0,112,95,.45)}
:root[data-theme=light] .svc-tg{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(0,112,95,.3),0 1px 2px rgba(16,22,20,.05)}
:root[data-theme=light] .svc-tg:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(0,112,95,.55),0 8px 20px -10px rgba(0,112,95,.45)}
:root[data-theme=light] .svc-tg i{background:#00a38f;box-shadow:0 0 0 3px rgba(0,163,143,.16);animation-name:dayPulse}
@keyframes dayPulse{50%{opacity:.45;box-shadow:0 0 0 5px rgba(0,163,143,0)}}
@media (prefers-reduced-motion:reduce){:root:not(.full-motion)[data-theme=light] .svc-tg i{animation:none}}

/* ---------- 4. hero ---------- */
:root[data-theme=light] #hero .heye{color:var(--d-teal);border-color:rgba(0,112,95,.24);background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(16,22,20,.05)}
:root[data-theme=light] #hero .heye i{color:var(--mut)}
/* the single gradient element of the page, on paper: deep teal into grape, no pale mint in the middle */
:root[data-theme=light] #hero h1 .w.key{background-image:linear-gradient(100deg,#00705f,#00866f 48%,#6a35b0)}
:root[data-theme=light] #hero .hsub{color:var(--soft)}
/* primary action: a fixed deep teal (the section accent drifts with scroll and fell to 4.4:1 under white text) */
:root[data-theme=light] #hero .hcta,:root[data-theme=light] #contact .wabtn{background:#00705f;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,48,40,.24),0 12px 26px -12px rgba(0,112,95,.6);transition:background .25s,box-shadow .3s,transform .3s}
:root[data-theme=light] #hero .hcta:hover,:root[data-theme=light] #contact .wabtn:hover{filter:none;background:#005f52;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(0,48,40,.24),0 18px 36px -14px rgba(0,112,95,.62)}
:root[data-theme=light] #hero .hcta:active,:root[data-theme=light] #contact .wabtn:active{transform:translateY(1px)}
:root[data-theme=light] #hero .hcta2{color:var(--soft);border-color:rgba(16,22,20,.2)}
:root[data-theme=light] #hero .hcta2:hover{color:var(--d-teal);border-color:var(--d-teal)}
:root[data-theme=light] .st-glow{opacity:calc(var(--gl,.55) * .7)}
:root[data-theme=light] #hero .currents{opacity:.3}
/* the film frame: a real bezel (hairline, white rim, outer hairline) and a two-step tinted shadow instead of a grey smudge */
:root[data-theme=light] .st-dev,:root[data-theme=light] .st-dev.st-film{
  box-shadow:0 0 0 1px rgba(16,22,20,.12),0 0 0 7px rgba(255,255,255,.88),0 0 0 8px rgba(16,22,20,.07),
    0 2px 6px rgba(16,40,34,.08),0 30px 64px -24px rgba(16,40,34,.34),0 80px 160px -60px rgba(0,112,95,.42)}
:root[data-theme=light] .st-dev::after{background:linear-gradient(90deg,transparent,#00a896 30%,#4fd3c2 50%,#00a896 70%,transparent);
  box-shadow:0 0 34px 6px rgba(0,168,150,.24),0 0 100px 24px rgba(0,168,150,.1)}
:root[data-theme=light] .st-dev.full{box-shadow:none}
:root[data-theme=light] .st-id i{color:var(--d-teal);border-color:rgba(0,112,95,.28);background:rgba(255,255,255,.7)}
:root[data-theme=light] .st-try{box-shadow:inset 0 0 0 1px rgba(0,72,62,.16),0 1px 2px rgba(0,60,50,.2),0 14px 30px -12px rgba(0,168,150,.6)}
:root[data-theme=light] .st-try:hover{box-shadow:inset 0 0 0 1px rgba(0,72,62,.2),0 1px 2px rgba(0,60,50,.2),0 20px 40px -14px rgba(0,168,150,.62)}
:root[data-theme=light] .st-try:focus-visible,:root[data-theme=light] .st-hit:focus-visible,:root[data-theme=light] .st-dev.st-film:focus-visible{outline-color:#00705f}
:root[data-theme=light] .st-open{color:var(--soft);border-color:rgba(16,22,20,.2)}
:root[data-theme=light] .st-open:hover{color:var(--d-teal);border-color:var(--d-teal)}

/* ---------- 5. ticker: a raised paper band with crisp hairlines ---------- */
:root[data-theme=light] .ticker{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6));border-color:rgba(16,22,20,.08);
  box-shadow:inset 0 1px 0 #fff}
:root[data-theme=light] .ticker span{color:var(--dim)}
:root[data-theme=light] .ticker b{color:var(--d-acx)}
:root[data-theme=light] .sep{background:var(--d-acx);box-shadow:none;opacity:.8}

/* ---------- 6. eyebrows, kickers and accent text: never mint on paper ---------- */
/* two lists on purpose: :is() takes the weight of its heaviest argument, and the class-only list must stay light enough for #svc to win */
:root[data-theme=light] :is(.eyebrow,.tier .teye,.pheye,.phloh,.need-lbl,.jr-steps b,.ct .no,.ct .star,.chrail .cur b,.hneeds a i){color:var(--d-acx)}
:root[data-theme=light] :is(#assets .aseye,#services .sveye,#numbers .neye,#services .sv .sno,#assets .as h3 i,#clients .cl h3 i){color:var(--d-acx)}
:root[data-theme=light] .ploop li::before{color:var(--d-acx)}
:root[data-theme=light] .eyebrow::before{background:var(--d-acx)}
:root[data-theme=light] .tier .tsep{background:var(--d-acx);opacity:.8}

/* ---------- 7. client chapters (v5 stacked cards; --chac is each client's colour, set by the page) ---------- */
/* text-safe client colour: the brand colour pulled to ink, so a pale gold or coral client never prints under 5:1 on paper */
:root[data-theme=light] .ch{--d-chx:color-mix(in srgb,rgb(var(--chac,53,217,160)) 50%,#04120e)}
/* the card underneath steps back with brightness(.42) set inline by the scroll scrub: on paper that is a grey slab, so day mode
   keeps the scale and the overlap shadow and drops the darkening */
:root[data-theme=light] .chstack .ch .stage{filter:none!important}
:root[data-theme=light] .ch .stage{border-top-color:rgba(var(--chac,53,217,160),.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 -1px 0 rgba(16,22,20,.05),0 -26px 60px -18px rgba(16,40,34,.16)}
:root[data-theme=light] .ch .cidx{color:var(--d-chx)}
:root[data-theme=light] .ch .clat{color:var(--mut)}
:root[data-theme=light] .ch .cinfo .cdesc{color:var(--soft)}
:root[data-theme=light] .ch .cinfo .cbadge{background:color-mix(in srgb,rgb(var(--chac,53,217,160)) 9%,#fff);color:var(--d-chx);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--chac,53,217,160)) 42%,transparent),0 1px 2px rgba(16,22,20,.05)}
:root[data-theme=light] .ch .cinfo .clink{color:var(--d-chx);border-color:color-mix(in srgb,rgb(var(--chac,53,217,160)) 45%,transparent)}
:root[data-theme=light] .ch .cinfo .clink:hover{border-color:var(--d-chx)}
:root[data-theme=light] .ch .ccard .frame{border-color:rgba(16,22,20,.1);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 2px 4px rgba(16,22,20,.06),0 24px 52px -20px rgba(16,40,34,.32),0 70px 140px -56px rgba(var(--chac,53,217,160),.55)}
:root[data-theme=light] .chrail{color:var(--mut)}
:root[data-theme=light] .chrail a:hover{color:var(--d-chx)}
/* legacy chapter parts (giant title, viewfinder) if they come back: a watermark, not a second layer over the copy */
:root[data-theme=light] .ct .en{color:rgba(16,22,20,.14)}
:root[data-theme=light] .vf i{border-color:rgba(16,22,20,.2)}

/* products v5 index: each product's colour (--pac) pulled to ink for text */
:root[data-theme=light] .pi{--d-pcx:color-mix(in srgb,rgb(var(--pac,53,217,160)) 50%,#04120e);border-color:rgba(16,22,20,.08)}
:root[data-theme=light] .pi:first-child{border-top-color:rgba(16,22,20,.08)}
:root[data-theme=light] .pi-nm b{color:rgba(16,22,20,.84)}
:root[data-theme=light] .pi-badge{color:var(--d-pcx);background:color-mix(in srgb,rgb(var(--pac,53,217,160)) 8%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgb(var(--pac,53,217,160)) 42%,transparent)}
:root[data-theme=light] .pi-row:hover .pi-no,:root[data-theme=light] .pi.open .pi-no{color:var(--d-pcx)}
:root[data-theme=light] .pi.open .pi-plus::before,:root[data-theme=light] .pi.open .pi-plus::after{background:var(--d-pcx)}
:root[data-theme=light] .pi-row:focus-visible{outline-color:var(--d-pcx)}
:root[data-theme=light] .pi-link{color:var(--d-pcx);border-color:color-mix(in srgb,rgb(var(--pac,53,217,160)) 45%,transparent)}
:root[data-theme=light] .pi-img{border-color:rgba(16,22,20,.1);
  box-shadow:0 2px 4px rgba(16,22,20,.06),0 22px 48px -20px rgba(16,40,34,.3),0 60px 120px -50px rgba(var(--pac,53,217,160),.45)}
:root[data-theme=light] .pprev{box-shadow:0 0 0 1px rgba(16,22,20,.1),0 24px 56px -18px rgba(16,40,34,.36)}

/* a paper halo behind the lab copy knocks the code field back where the reader is reading */
:root[data-theme=light] .lab-meta{position:relative}
:root[data-theme=light] .lab-meta::before{content:"";position:absolute;inset:-34px -40px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,244,239,.94),rgba(242,244,239,.8) 55%,rgba(242,244,239,0))}

/* ---------- 8. tier headings + clients grid (raised band: it is proof) ---------- */
:root[data-theme=light] .tier .tl{color:var(--dim)}
:root[data-theme=light] #clients{background:var(--d-raised);border-top-color:rgba(16,22,20,.07);border-bottom:1px solid rgba(16,22,20,.07)}
:root[data-theme=light] #clients .cl{border-top-color:rgba(16,22,20,.13)}
:root[data-theme=light] #clients .cl p{color:var(--dim)}
:root[data-theme=light] #clients .cl .clsite{border-color:rgba(16,22,20,.18)}
:root[data-theme=light] #clients .cl .clsite:hover{color:var(--d-teal);border-color:var(--d-teal)}
:root[data-theme=light] #clients .cllogo.sbaik{box-shadow:0 0 0 1px rgba(16,22,20,.1),0 8px 18px -10px rgba(16,22,20,.45)}

/* ---------- 9. lab (prototype library) ---------- */
:root[data-theme=light] .lab-media{background:#e6e9e3;
  box-shadow:0 0 0 1px rgba(16,22,20,.08),0 2px 4px rgba(16,22,20,.05),0 26px 52px -20px rgba(16,40,34,.3),0 70px 140px -60px rgba(var(--lr),var(--lg),var(--lb),.5)}
:root[data-theme=light] .lab-item:hover .lab-media,:root[data-theme=light] .lab-item:focus-visible .lab-media{
  box-shadow:0 0 0 1px rgba(var(--lr),var(--lg),var(--lb),.7),0 2px 4px rgba(16,22,20,.05),0 32px 64px -22px rgba(16,40,34,.34),0 80px 160px -60px rgba(var(--lr),var(--lg),var(--lb),.6)}
:root[data-theme=light] .lab-k{color:var(--mut)}
:root[data-theme=light] .lab-d{color:var(--dim)}
:root[data-theme=light] .lab-tags i{color:var(--soft);border-color:rgba(16,22,20,.1);background:rgba(255,255,255,.72)}
/* the live tag keeps its product colour, pulled to ink for text (was 1.73:1) */
:root[data-theme=light] .lab-tags i:first-child{color:color-mix(in srgb,rgb(var(--lr),var(--lg),var(--lb)) 50%,#04120e);
  border-color:color-mix(in srgb,rgb(var(--lr),var(--lg),var(--lb)) 45%,transparent);background:color-mix(in srgb,rgb(var(--lr),var(--lg),var(--lb)) 8%,#fff)}
/* try buttons: ink pills carrying the product colour as a live dot (product fills under dark text fell to 3.6:1) */
:root[data-theme=light] .lab-meta .lab-go{color:#fff;background:#0f1513;box-shadow:0 1px 2px rgba(16,22,20,.2),0 12px 24px -12px rgba(16,22,20,.5)}
:root[data-theme=light] .lab-go::before{background:rgb(var(--lr),var(--lg),var(--lb));box-shadow:0 0 0 3px rgba(var(--lr),var(--lg),var(--lb),.28)}
:root[data-theme=light] .lab-item:hover .lab-go{filter:none;background:#1d2724}

/* ---------- 10. journey ---------- */
:root[data-theme=light] .jr-ghost{stroke:rgba(16,22,20,.16)}
:root[data-theme=light] .jr-line{filter:drop-shadow(0 0 6px rgba(var(--acR),var(--acG),var(--acB),.35))}
:root[data-theme=light] .jr-steps p{color:var(--dim)}

/* ---------- 11. numbers (raised band: proof) ---------- */
:root[data-theme=light] #numbers{background:rgba(255,255,255,.58);border-color:rgba(16,22,20,.07)}
:root[data-theme=light] #numbers .nb b{color:var(--d-acx)}
:root[data-theme=light] #numbers .u{opacity:.85}
:root[data-theme=light] #numbers .nb span,:root[data-theme=light] #numbers .nmeta{color:var(--dim)}
:root[data-theme=light] #numbers .nb::before{background:repeating-linear-gradient(90deg,rgba(16,22,20,.2) 0 1px,transparent 1px 7px)}
:root[data-theme=light] #numbers .nb::after{background:var(--d-goldfill);box-shadow:0 0 0 3px rgba(181,130,42,.16)}
:root[data-theme=light] .rat{border-color:rgba(16,22,20,.08)}
:root[data-theme=light] .rat .rnum{background-image:linear-gradient(100deg,#7a5214,#a06c1c)}
:root[data-theme=light] .rat .stars .fillwrap g{fill:var(--d-goldfill)}
:root[data-theme=light] .rat .stars>svg g{stroke:rgba(138,90,18,.38)}
:root[data-theme=light] .rat .rcap{color:var(--dim)}
:root[data-theme=light] .rat .rcap a,:root[data-theme=light] #numbers .numpf{color:var(--d-gold);border-color:rgba(138,90,18,.35)}
:root[data-theme=light] #numbers .numpf:hover{border-color:var(--d-gold)}

/* ---------- 12. products toggle ---------- */
:root[data-theme=light] .prod-toggle{border-color:rgba(0,112,95,.32);background:rgba(255,255,255,.72);
  box-shadow:0 1px 2px rgba(16,22,20,.05),0 12px 26px -16px rgba(0,112,95,.45)}
:root[data-theme=light] .prod-toggle:hover{background:#fff;border-color:rgba(0,112,95,.55);box-shadow:0 1px 2px rgba(16,22,20,.05),0 18px 34px -16px rgba(0,112,95,.5)}
:root[data-theme=light] .prod-toggle:focus-visible{outline-color:#00705f}

/* ---------- 13. LEAP outcome: board + strip (was mint #35d9a0 at 1.64:1) ---------- */
:root[data-theme=light] #runboard{background:var(--d-sunk)}
:root[data-theme=light] #runboard .rk,:root[data-theme=light] #runboard .ru.lead b,:root[data-theme=light] #runboard .rc b,:root[data-theme=light] #runboard .rstage{color:var(--d-teal)}
:root[data-theme=light] #runboard .rc.gold b,:root[data-theme=light] #runboard .rline[data-stage="SHIPPED"] .rstage{color:var(--d-gold)}
:root[data-theme=light] #runboard .rline[data-stage="SELECTED"] .rstage{color:var(--mut)}
:root[data-theme=light] #runboard .rtrack i{background:rgba(16,22,20,.08)}
:root[data-theme=light] #runboard .rtrack i::after{background:#00a38f}
:root[data-theme=light] #runboard .rline[data-stage="SHIPPED"] .rtrack i.on::after{background:var(--d-goldfill)}
:root[data-theme=light] #runboard .rby{color:var(--grape)}
:root[data-theme=light] .runarchive summary{color:var(--soft)}
:root[data-theme=light] .runarchive summary:hover{color:var(--d-teal)}
:root[data-theme=light] #runbar{background:rgba(255,255,255,.6)!important;border-color:rgba(16,22,20,.08);box-shadow:inset 0 1px 0 #fff}
:root[data-theme=light] #runbar .rbdot{background:#00a38f}
:root[data-theme=light] #runbar .rbdot.done{background:var(--d-goldfill)}
:root[data-theme=light] #runbar #rbtext{color:var(--soft)}
:root[data-theme=light] #runbar a.rbcta{color:var(--d-teal)}

/* ---------- 14. services overlay stays dark by design: undo the paper rules that would reach inside it ---------- */
/* (#svc carries the id so these beat the id-weighted :is() lists above) */
:root[data-theme=light] #svc .eyebrow{color:#00f5e0}
:root[data-theme=light] #svc .eyebrow::before{background:#00f5e0}
:root[data-theme=light] #svc :is(a,button,summary,[tabindex]):focus-visible{outline-color:#00f5e0}

/* ---------- 15. team ---------- */
:root[data-theme=light] .tm-list{border-top-color:rgba(16,22,20,.1)}
:root[data-theme=light] .tm-row{border-bottom-color:rgba(16,22,20,.08)}
:root[data-theme=light] .tm-row b{background-image:linear-gradient(100deg,#00705f,#00866f 50%,#6a35b0),linear-gradient(rgba(16,22,20,.6),rgba(16,22,20,.6))}
:root[data-theme=light] .tm-row::after{background:linear-gradient(90deg,#6a35b0,#00866f 50%,#00705f)}
:root[data-theme=light] .tm-role{opacity:.82}
:root[data-theme=light] .tm-row.on .tm-role{opacity:1}
:root[data-theme=light] .tm-row.on .tm-no{color:var(--d-teal)}
:root[data-theme=light] .tm-row:focus-visible{outline-color:#00705f}

/* ---------- 16. podcast ---------- */
:root[data-theme=light] .pod-media{background:#e6e9e3;
  box-shadow:0 0 0 1px rgba(138,90,18,.22),0 2px 4px rgba(16,22,20,.05),0 26px 52px -20px rgba(16,40,34,.3),0 70px 140px -60px rgba(122,82,20,.38)}
:root[data-theme=light] .pod-play{box-shadow:inset 0 0 0 1px rgba(122,82,20,.22),0 1px 2px rgba(16,22,20,.18),0 12px 28px -10px rgba(16,22,20,.42)}
:root[data-theme=light] .pod-play:focus-visible{outline-color:#8a5a12}
:root[data-theme=light] .pod-by{color:var(--soft)}
:root[data-theme=light] .pod-line,:root[data-theme=light] .pod-yt{color:var(--dim)}
:root[data-theme=light] .pod-yt{border-color:rgba(16,22,20,.18)}
:root[data-theme=light] .pod-yt:hover{color:var(--ink);border-color:var(--d-gold)}

/* ---------- 17. philosophy + assets (sunken band: the method) ---------- */
:root[data-theme=light] #philosophy,:root[data-theme=light] #assets{background:var(--d-sunk)}
:root[data-theme=light] #assets{border-top-color:rgba(16,22,20,.05)}
:root[data-theme=light] .ploop li{border-top-color:rgba(16,22,20,.14)}
:root[data-theme=light] .ploop li:not(:last-child)::after{background:var(--d-acx);box-shadow:0 0 0 3px rgba(0,112,95,.12)}
:root[data-theme=light] .phloopend{border-inline-start-color:rgba(0,112,95,.45);color:var(--dim)}
:root[data-theme=light] .phmore,:root[data-theme=light] #profile .pfbtn,:root[data-theme=light] #contact .mailbtn{background:rgba(255,255,255,.74);border-color:rgba(16,22,20,.13);
  box-shadow:0 1px 2px rgba(16,22,20,.05),inset 0 1px 0 #fff;transition:border-color .3s,color .3s,background .3s,box-shadow .3s}
:root[data-theme=light] .phmore:hover,:root[data-theme=light] #contact .mailbtn:hover{background:#fff;border-color:rgba(0,112,95,.45);color:var(--d-teal);
  box-shadow:0 1px 2px rgba(16,22,20,.05),0 12px 26px -16px rgba(0,112,95,.45)}
:root[data-theme=light] #assets .as{border-top-color:rgba(16,22,20,.14)}
:root[data-theme=light] #assets .as p,:root[data-theme=light] #services .sv p{color:var(--dim)}
:root[data-theme=light] .caps .cap{background:rgba(255,255,255,.6);border-color:rgba(16,22,20,.12)}

/* ---------- 18. company profile (gold = proof) ---------- */
:root[data-theme=light] #profile .pfeye{color:var(--d-gold)}
:root[data-theme=light] #profile .pfpages img{opacity:1;border-color:rgba(16,22,20,.08);
  box-shadow:0 1px 2px rgba(16,22,20,.06),0 20px 44px -20px rgba(16,40,34,.34)}
:root[data-theme=light] #profile .pfpages:hover img{border-color:rgba(138,90,18,.42)}
:root[data-theme=light] #profile .pfbtn:hover{background:#fff;border-color:rgba(138,90,18,.45);color:var(--d-gold);box-shadow:0 1px 2px rgba(16,22,20,.05),0 12px 26px -16px rgba(122,82,20,.42)}
:root[data-theme=light] #profile .pfbtn.alt{color:var(--dim)}

/* ---------- 19. contact + footer ---------- */
:root[data-theme=light] #contact .csub{color:var(--dim)}
:root[data-theme=light] #contact .startbtn{box-shadow:inset 0 0 0 1px rgba(0,72,62,.16),0 1px 2px rgba(0,60,50,.2),0 14px 30px -12px rgba(0,168,150,.6)}
:root[data-theme=light] #contact .startbtn svg{fill:none}
:root[data-theme=light] #contact .avail b{color:var(--soft)}
:root[data-theme=light] .gseed img{filter:drop-shadow(0 12px 22px rgba(0,112,95,.2)) drop-shadow(0 0 60px rgba(106,53,176,.12))}
:root[data-theme=light] .gseed .gline{color:var(--dim);position:relative}
/* the seed is drawn by the code field right over the motto line; a paper halo keeps the line clean */
:root[data-theme=light] .gseed .gline::before{content:"";position:absolute;inset:-22px -48px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(242,244,239,.95),rgba(242,244,239,.8) 55%,rgba(242,244,239,0))}
/* the footer is the one sunken band that runs edge to edge: it grounds the page */
:root[data-theme=light] .fsoc,:root[data-theme=light] .fmeta{background:rgba(16,22,20,.03)}
:root[data-theme=light] .fsoc{border-top-color:rgba(16,22,20,.08)}
:root[data-theme=light] .fsoc + .fmeta{margin-top:0;padding-top:44px}
:root[data-theme=light] .fsoc a{background:rgba(255,255,255,.7);border-color:rgba(16,22,20,.1);color:var(--soft);box-shadow:0 1px 2px rgba(16,22,20,.04)}
:root[data-theme=light] .fsoc a:hover{color:var(--d-gold);border-color:rgba(138,90,18,.4);background:#fff}
:root[data-theme=light] .fmeta b{color:var(--soft)}

/* ---------- 20. try layer: open onto paper, not a black flash ---------- */
:root[data-theme=light] .try-layer{background:#e9ece6}
:root[data-theme=light] .try-frame{background:#eceeea}