/* PARIKH — bold homepage sections */

/* ---------- loader ---------- */
body.loading{overflow:hidden;height:100vh}
#loader{position:fixed;inset:0;z-index:300;background:#06070C;color:#EEF1F8;display:flex;flex-direction:column;justify-content:space-between;padding:var(--gut);transition:clip-path .9s var(--ease2);overflow:hidden}
#loader::before{content:"";position:absolute;width:80vw;height:80vw;left:50%;top:60%;transform:translate(-50%,-50%);border-radius:50%;background:var(--spectral);filter:blur(120px);opacity:.4;animation:halo 6s ease-in-out infinite}
#loader>*{position:relative;z-index:1}
#loader.done{clip-path:inset(0 0 100% 0)}
#loader .lt{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:flex;justify-content:space-between;color:rgba(238,241,248,.7)}
#loader .lmid{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
#loader .lword{font-family:var(--serif);font-weight:800;text-transform:uppercase;font-size:clamp(56px,16vw,240px);line-height:.8;letter-spacing:-.04em;
  background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#loader .lnum{font-family:var(--serif);font-weight:800;font-size:clamp(40px,9vw,140px);line-height:.8;color:var(--sky-1)}
#loader .lbar{height:2px;background:var(--spectral);transform-origin:left;animation:lbar 1.6s var(--ease) forwards}
@keyframes lbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(90px,14vh,150px);padding-bottom:clamp(24px,4vh,46px)}
.hero-meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.hero-meta .col{display:flex;flex-direction:column;gap:4px}
.hero-meta .mono{color:var(--ink-2)}
.hero-meta .col.r{text-align:right}
.hero-core{display:grid;grid-template-columns:1fr;gap:0;margin-block:clamp(20px,4vh,50px) 0}
.hl{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:-.045em;
  font-size:clamp(30px,7.2vw,134px);position:relative}
.hl .ln{display:block}
.hl .ln>i{display:block;font-style:normal;white-space:nowrap}
.hero.arm .hl .ln>i{opacity:0;transform:translateY(44px)}
.hero.arm.go .hl .ln>i{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.hero.arm.go .hl .ln:nth-child(2)>i{transition-delay:.1s}
.hero.arm.go .hl .ln:nth-child(3)>i{transition-delay:.2s}
.hl .hot{background:var(--spectral);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hl .out{color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.hl .mkr{position:relative;white-space:nowrap}
.hl .mkr::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.1em;height:.26em;background:var(--acid);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .9s}
.hero.go .hl .mkr::after{transform:scaleX(1)}
.hero-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(28px,5vh,56px)}
.hero-bottom .lede{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.hero.go .hero-bottom .lede{opacity:1;transform:none}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.hero-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-tag .pulse{width:9px;height:9px;border-radius:50%;background:var(--viridian);box-shadow:0 0 0 0 var(--viridian);animation:pl 2.2s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--viridian) 60%,transparent)}70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-orb{position:absolute;right:calc(var(--gut) - 10px);top:24%;width:clamp(120px,17vw,260px);aspect-ratio:1;pointer-events:auto;z-index:0;mix-blend-mode:multiply}
[data-theme="dark"] .hero-orb{mix-blend-mode:screen}
.hero-orb img{width:100%;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:920px){.hero-bottom{grid-template-columns:1fr}.hero-actions{justify-content:flex-start}.hero-orb{display:none}}

/* ---------- manifesto ---------- */
.mani{padding-block:clamp(80px,13vw,200px)}
/* "01 — The Ethos" with a connected-planet graphic on the right */
.mani-top{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,72px);align-items:center}
.mani-globe{justify-self:end;width:100%;max-width:460px}
.mani-globe .cap-net{width:100%;height:auto;display:block;overflow:visible;will-change:transform}
@media (max-width:920px){
  .mani-top{grid-template-columns:1fr}
  .mani-globe{justify-self:center;max-width:340px;margin-top:8px;order:-1}
}
.mani .ttl{margin-bottom:clamp(30px,5vw,60px)}
.mani-words{font-family:var(--serif);font-weight:500;text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;
  font-size:clamp(28px,5.4vw,84px);max-width:18ch}
.mani-words .w{color:var(--ink-3);transition:color .4s var(--ease);display:inline}
.mani-words .w.lit{color:var(--ink)}
.mani-words .w.acc{color:var(--accent)}
.mani-sub{display:flex;gap:clamp(20px,5vw,80px);margin-top:clamp(40px,6vw,80px);flex-wrap:wrap}
.mani-sub .blk{flex:1;min-width:220px;border-top:var(--bd) solid var(--line);padding-top:18px}
.mani-sub .blk .mono{color:var(--ink-3);margin-bottom:10px}
.mani-sub .blk p{color:var(--ink-2);font-size:15.5px;line-height:1.5}

/* ---------- coverage sticky stack ---------- */
.cov-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-block:clamp(40px,6vw,80px) clamp(20px,3vw,40px)}
.stack-wrap{position:relative}
.panel{position:sticky;top:0;min-height:100svh;display:flex;align-items:stretch;border-top:var(--bd) solid var(--line);overflow:hidden;color:#fff}
.panel .pin{position:absolute;inset:0;z-index:0}
.panel .pgrid{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,7vh,90px) var(--gut);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.panel .pno{font-family:var(--mono);font-size:13px;letter-spacing:.2em;opacity:.7}
.panel h2{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.03em;
  font-size:clamp(48px,8vw,140px);margin:14px 0 22px}
.panel .pdesc{font-size:clamp(17px,1.5vw,21px);line-height:1.45;max-width:46ch;opacity:.92;margin-bottom:26px}
.panel .plist{list-style:none;display:flex;flex-direction:column;gap:0}
.panel .plist li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1.5px solid rgba(255,255,255,.28);font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.panel .plist li .n{opacity:.6}
.panel .pmedia{position:relative;aspect-ratio:4/5;border:var(--bd) solid rgba(255,255,255,.5)}
.panel .pmedia image-slot{width:100%;height:100%}
.panel .pbig{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--serif);font-weight:800;font-size:42vh;line-height:.7;opacity:.08;pointer-events:none;text-transform:uppercase}
.panel.c-cap{
  background-color:#1b2347;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.17)        0 1px, transparent 1px 3px),
    radial-gradient(120% 78% at 50% 4%,  rgba(76,94,162,.5),  transparent 62%),
    radial-gradient(150% 125% at 50% 128%, rgba(7,10,24,.92), transparent 64%),
    linear-gradient(176deg,#212c57 0%,#171e40 68%,#11162e 100%);
}
.panel.c-cap .pmedia{
  background:
    radial-gradient(58% 42% at 50% 47%, rgba(16,185,129,.16), transparent 72%),
    linear-gradient(180deg,#1b2549 0%,#10152e 100%);
  border-color:rgba(255,255,255,.18);
  display:grid;place-items:center;overflow:hidden;
}
.panel.c-cap .pmedia .cap-net{width:100%;height:100%;padding:clamp(4px,1.2vw,16px)}
/* Technology + Consulting — generated isometric "innovation field" */
.pmedia-geo{display:grid;place-items:center;overflow:hidden}
.pmedia-geo .geo-net{width:100%;height:100%;display:block}
.panel.c-tech .pmedia{
  background:
    radial-gradient(62% 46% at 50% 40%, rgba(255,132,74,.20), transparent 72%),
    linear-gradient(180deg,#1b1310 0%,#0c0806 100%);
  border-color:rgba(255,255,255,.20);
}
.panel.c-consult .pmedia{
  background:
    radial-gradient(62% 46% at 50% 40%, rgba(140,110,255,.24), transparent 72%),
    linear-gradient(180deg,#141230 0%,#090815 100%);
  border-color:rgba(255,255,255,.20);
}
.panel.c-health{background:var(--viridian)}
.panel.c-tech{background:var(--flame)}
.panel.c-consult{background:var(--violet)}
@media (max-width:920px){
  .panel{position:relative;min-height:auto}
  .panel .pgrid{grid-template-columns:1fr;gap:28px;padding-block:60px}
  .panel .pmedia{aspect-ratio:3/2}
}

/* ---------- stats ---------- */
.stats{background:#090B12;color:#EFF2F8;padding-block:clamp(70px,11vw,160px);border-block:1.5px solid rgba(255,255,255,.14)}
.stats .ey{color:#EFF2F8;opacity:.7}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(36px,5vw,64px)}
.stat{padding:34px 30px;border-top:1.5px solid rgba(255,255,255,.22)}
.stat:not(:last-child){border-right:1.5px solid rgba(255,255,255,.22)}
.stat .num{font-family:var(--serif);font-weight:800;font-size:clamp(64px,10vw,150px);line-height:.82;letter-spacing:-.04em;display:flex;align-items:flex-start}
.stat .num .s{font-size:.32em;color:var(--acid);margin-left:.1em;margin-top:.4em}
.stat .lab{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:22px 0 10px;color:var(--acid)}
.stat p{font-size:15px;line-height:1.5;opacity:.78;max-width:34ch}
@media (max-width:820px){.stats-grid{grid-template-columns:1fr}.stat:not(:last-child){border-right:0}}

/* ---------- portfolio ---------- */
.pf{padding-block:clamp(70px,11vw,160px)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bd);background:var(--line);border:var(--bd) solid var(--line);margin-top:clamp(36px,5vw,60px)}
.pf-card{padding:26px;min-height:340px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pf-card .pf-media{position:absolute;inset:0;z-index:0;opacity:1;transition:transform .6s var(--ease);
  --g1:#5B6CFF;--g2:#34E2FF;--g3:#A45CFF;
  background:
    radial-gradient(120% 110% at 18% 10%, var(--g1), transparent 56%),
    radial-gradient(120% 120% at 86% 90%, var(--g3), transparent 50%),
    linear-gradient(125deg, var(--g2), var(--g1))}
.pf-card:nth-child(6n+2) .pf-media{--g1:#16C8B0;--g2:#34E2FF;--g3:#5B6CFF}
.pf-card:nth-child(6n+3) .pf-media{--g1:#A45CFF;--g2:#5B6CFF;--g3:#16C8B0}
.pf-card:nth-child(6n+4) .pf-media{--g1:#5B6CFF;--g2:#A45CFF;--g3:#34E2FF}
.pf-card:nth-child(6n+5) .pf-media{--g1:#34E2FF;--g2:#16C8B0;--g3:#5B6CFF}
.pf-card:nth-child(6n+6) .pf-media{--g1:#A45CFF;--g2:#34E2FF;--g3:#16C8B0}
.pf-card .pf-media image-slot{width:100%;height:100%}
.pf-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(175deg, rgba(6,7,12,.12) 0%, rgba(6,7,12,.34) 46%, rgba(6,7,12,.82) 100%);transition:opacity .5s var(--ease)}
.pf-card .pf-in{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;color:#fff}
.pf-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,0,0,.6)}
.pf-card:hover .pf-media{transform:scale(1.06)}
.pf-card .pf-top{display:flex;justify-content:space-between;align-items:flex-start}
.pf-card .pf-tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pf-card .pf-arw{font-size:22px;transition:transform .4s var(--ease);color:#fff}
.pf-card:hover .pf-arw{transform:translate(5px,-5px)}
.pf-card .pf-name{font-family:var(--serif);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3vw,42px);line-height:.92;margin-top:auto;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.pf-card .pf-m{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.88);margin-top:12px;max-width:30ch}
.pf-card .pf-sector{display:inline-flex;width:fit-content;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border:1.5px solid rgba(255,255,255,.38);margin-top:16px;color:rgba(255,255,255,.9)}
@media (max-width:920px){.pf-grid{grid-template-columns:1fr}}

/* ---------- criteria ---------- */
.crit{padding-block:clamp(70px,11vw,160px)}
.crit-row{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:clamp(16px,3vw,50px);align-items:center;
  padding:clamp(26px,4vw,46px) 0;border-top:var(--bd) solid var(--line);position:relative;transition:padding-left .5s var(--ease)}
.crit-row:last-child{border-bottom:var(--bd) solid var(--line)}
.crit-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);z-index:-1;transition:width .5s var(--ease)}
.crit-row:hover{padding-left:24px;color:var(--paper)}
.crit-row:hover::before{width:100%}
.crit-row .cno{font-family:var(--mono);font-size:14px;letter-spacing:.1em}
.crit-row .ch{font-family:var(--serif);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4.5vw,66px);line-height:.9;letter-spacing:-.02em}
.crit-row .cp{font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--ink-2);transition:color .4s}
.crit-row:hover .cp{color:rgba(242,236,221,.85)}
@media (max-width:760px){.crit-row{grid-template-columns:1fr;gap:12px}.crit-row:hover{padding-left:16px}}

/* ---------- cta ---------- */
.cta{padding-block:clamp(80px,14vw,220px);text-align:center;position:relative;overflow:hidden}
.cta .ch{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.035em;font-size:clamp(54px,12vw,200px)}
.cta .ch .out{color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.cta .lede{margin:30px auto 40px;text-align:center}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- subtle brand watermark in empty content areas ---------- */
.pk-wm{position:absolute;pointer-events:none;user-select:none;line-height:0;z-index:0;opacity:.05;filter:grayscale(1)}
.pk-wm svg{display:block}
.cta>*:not(.pk-wm),.disc>*:not(.pk-wm),.mani>*:not(.pk-wm){position:relative;z-index:1}
.stats>.wrap{position:relative;z-index:1}
.cta .pk-wm{top:50%;right:-6%;transform:translateY(-50%)}
/* discretion band — small mark sized to fit the short band, centred in the empty gap */
.disc{position:relative;overflow:hidden}
.disc .pk-wm{top:50%;left:50%;transform:translate(-50%,-50%);opacity:.06}
/* manifesto — mark bleeding off the right margin */
.mani{position:relative;overflow:hidden}
.mani .pk-wm{top:50%;right:-7%;transform:translateY(-50%);opacity:.045}
/* stats band is always dark → always a white mark, no inversion */
.stats{position:relative;overflow:hidden}
.stats .pk-wm{right:-4%;bottom:-30%;opacity:.06}
/* dark theme: the on-light marks (cta, disc, mani) invert to a light ghost */
html[data-theme="dark"] .cta .pk-wm,
html[data-theme="dark"] .disc .pk-wm,
html[data-theme="dark"] .mani .pk-wm{filter:grayscale(1) invert(1);opacity:.07}
@media (max-width:700px){.pk-wm{display:none}}

/* ---------- footer ---------- */
.foot{background:#090B12;color:#EFF2F8;padding-block:clamp(50px,7vw,90px) 30px;border-top:1.5px solid rgba(255,255,255,.14)}
.foot-big{font-family:var(--serif);font-weight:800;text-transform:lowercase;font-size:clamp(70px,20vw,320px);line-height:.78;letter-spacing:-.04em;padding-bottom:18px;margin-bottom:36px}
/* footer emblem — large mark, right-justified opposite the left wordmark */
.foot{position:relative;padding-top:clamp(120px,13vw,210px);overflow:hidden}
.foot-big{position:relative}
.foot-emblem{position:absolute;right:0;bottom:0;line-height:0;pointer-events:none;z-index:0}
.foot-emblem .pk-mark{display:inline-flex;line-height:0;opacity:.92}
.foot-emblem .pk-mark svg{height:clamp(150px,23vw,290px)!important;width:auto!important}
.foot-big .pk-word{position:relative;z-index:1}
.foot-grid{position:relative;z-index:1}
/* very subtle "captivating inside" — the halftone breathes almost imperceptibly */
@media (prefers-reduced-motion:no-preference){
  .foot-emblem .pk-mark svg g[clip-path]{animation:foot-mark-breathe 7.5s ease-in-out infinite}
}
@keyframes foot-mark-breathe{0%,100%{opacity:.8}50%{opacity:1}}
/* subtle light running down the vertical blue stem stripes */
.foot-emblem .pk-mark{position:relative}
.foot-emblem .pk-mark::after{content:"";position:absolute;left:20.5%;width:17.5%;top:11%;height:77.5%;
  pointer-events:none;mix-blend-mode:screen;background-repeat:no-repeat;background-size:100% 280%;
  background-image:linear-gradient(180deg,transparent 0 40%,rgba(150,196,255,.55) 50%,transparent 60% 100%)}
@media (prefers-reduced-motion:no-preference){
  .foot-emblem .pk-mark::after{animation:foot-stem-light 6s ease-in-out infinite}
}
@keyframes foot-stem-light{0%{background-position:0 130%}100%{background-position:0 -30%}}
@media (max-width:760px){.foot-emblem{display:none}}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:16px;font-weight:400}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-grid li a{opacity:.82;font-size:15px;transition:opacity .25s,padding-left .25s}
.foot-grid li a:hover{opacity:1;padding-left:6px}
.foot-grid .lede{color:#EFF2F8;opacity:.72;font-size:16px;max-width:34ch}
/* footer "Let's Connect" — chat-bubble affordance on the right (links to the form, not a live widget) */
.foot-grid .reach-chat{display:inline-flex;align-items:center;gap:9px}
.foot-grid .reach-chat .chat-ic{width:22px;height:22px;flex:none;display:inline-flex;color:#EFF2F8;transition:transform .3s var(--ease),color .3s var(--ease)}
.foot-grid .reach-chat .chat-ic svg{width:22px;height:22px;display:block}
.foot-grid .reach-chat:hover .chat-ic{transform:translateY(-2px) scale(1.06)}
.foot-mark{display:flex;justify-content:center;margin-top:clamp(38px,6vw,68px)}
.foot-mark .pk-mark-fl{display:inline-flex;line-height:0;opacity:.92}
.foot-mark .pk-mark-fl svg{display:block}
.foot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 20px;margin-top:50px;padding-top:22px;border-top:1.5px solid rgba(255,255,255,.22);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.foot-bottom>span{opacity:.6}
.foot-bottom>span:first-child{justify-self:start}
.foot-bottom>span:last-child{justify-self:end;text-align:right}
.foot-top{justify-self:center;display:inline-flex;line-height:0;cursor:pointer;opacity:.9;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s cubic-bezier(.2,.7,.2,1)}
.foot-top:hover{transform:translateY(-4px);opacity:1}
.foot-top svg{display:block}
@media (max-width:560px){.foot-bottom{grid-template-columns:1fr;justify-items:center;gap:18px}.foot-bottom>span{justify-self:center!important;text-align:center!important}}
@media (max-width:920px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* =================================================================
   SKY HERO · animated logo cluster · gradient imagery · breathing room
   ================================================================= */

/* hero grandeur + sky */
.hero{min-height:100svh;padding-top:clamp(110px,17vh,180px);padding-bottom:clamp(30px,5vh,60px)}
.hero>*{position:relative;z-index:2}
.hero-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-sky .blob{position:absolute;border-radius:50%;filter:blur(82px) saturate(1.35);opacity:.5;mix-blend-mode:screen;will-change:transform}
[data-theme="light"] .hero-sky .blob{mix-blend-mode:multiply;opacity:.36;filter:blur(96px) saturate(1.15)}
.hero-sky .b1{width:50vw;height:50vw;background:var(--sky-1);top:-16%;right:-8%;animation:dft1 24s var(--ease) infinite alternate}
.hero-sky .b2{width:44vw;height:44vw;background:var(--sky-2);top:-2%;left:8%;animation:dft2 30s var(--ease) infinite alternate}
.hero-sky .b3{width:42vw;height:42vw;background:var(--sky-3);bottom:-22%;left:-6%;animation:dft3 27s var(--ease) infinite alternate}
.hero-sky .b4{width:34vw;height:34vw;background:var(--sky-4);bottom:-12%;right:14%;animation:dft4 21s var(--ease) infinite alternate}
.hero-sky .horizon{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to top,var(--paper),transparent)}
@keyframes dft1{to{transform:translate(-8%,10%) scale(1.18)}}
@keyframes dft2{to{transform:translate(12%,8%) scale(.86)}}
@keyframes dft3{to{transform:translate(10%,-12%) scale(1.14)}}
@keyframes dft4{to{transform:translate(-12%,-8%) scale(.9)}}

/* animated logo cluster */
.logo-cluster{position:absolute;right:calc(var(--gut) - 1.5vw);top:18%;width:clamp(190px,24vw,360px);aspect-ratio:1;z-index:1;pointer-events:none}
.lc-halo{position:absolute;inset:-12%;border-radius:50%;background:var(--spectral);filter:blur(44px);opacity:.55;animation:halo 7s ease-in-out infinite}
[data-theme="light"] .lc-halo{opacity:.4;mix-blend-mode:multiply}
@keyframes halo{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.12);opacity:.6}}
.lc-orbits{position:absolute;inset:0;animation:spin 46s linear infinite}
.lc-orbits.rev{animation:spin 34s linear infinite reverse}
.lc-orbits circle,.lc-orbits line{fill:none;stroke:var(--sky-1);stroke-width:1;opacity:.5}
.lc-mark{position:absolute;inset:24%;width:52%;height:52%;object-fit:contain;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 8px 30px color-mix(in oklab,var(--sky-2) 60%,transparent))}
@keyframes bob{0%,100%{transform:translateY(-3%)}50%{transform:translateY(3%)}}
.lc-glyph{position:absolute;font-family:var(--mono);color:var(--sky-1);font-size:clamp(12px,1.3vw,18px);opacity:.85;text-shadow:0 0 12px currentColor}
.lc-glyph.g1{top:2%;left:30%;color:var(--sky-2);animation:gly 5s ease-in-out infinite}
.lc-glyph.g2{top:40%;right:-2%;color:var(--sky-3);animation:gly 6.5s ease-in-out infinite .4s}
.lc-glyph.g3{bottom:6%;left:8%;color:var(--sky-4);animation:gly 5.8s ease-in-out infinite .8s}
.lc-glyph.g4{bottom:24%;right:14%;color:var(--sky-1);animation:gly 7s ease-in-out infinite .2s}
.lc-glyph.g5{top:14%;left:0%;color:var(--sky-2);animation:gly 6s ease-in-out infinite 1s}
@keyframes gly{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(18deg)}}
@media (max-width:920px){.logo-cluster{display:none}}

/* gradient "imagery" — painted on the CONTAINER so it always shows; slot overlays transparent */
image-slot::part(frame){background:transparent}
image-slot::part(empty){color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
image-slot::part(ring){border-color:rgba(255,255,255,.4)}
.pmedia{background:
  radial-gradient(120% 110% at 16% 8%, var(--sky-1), transparent 56%),
  radial-gradient(120% 120% at 88% 92%, var(--sky-3), transparent 52%),
  linear-gradient(125deg, var(--sky-2), var(--sky-4))}

/* breathing room — lower sections were squashed */
.mani{padding-block:clamp(96px,15vw,230px)}
.stats{padding-block:clamp(84px,13vw,190px)}
.stat{padding:46px 34px}
.pf{padding-block:clamp(84px,13vw,190px)}
.pf-card{min-height:392px;padding:30px;gap:6px}
.crit{padding-block:clamp(84px,13vw,190px)}
.crit-row{padding:clamp(32px,4.6vw,58px) 0}
.cta{padding-block:clamp(100px,16vw,250px)}

/* portfolio specialty chip */
.pf-card .pf-spec{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-top:16px}
.pf-card .pf-spec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid)}

/* ---------- emblem medallion (miniaturized, bordered, magical) ---------- */
.emblem{position:relative;width:clamp(104px,12vw,152px);aspect-ratio:1;border-radius:50%;
  border:1.5px solid var(--line-soft);display:grid;place-items:center;overflow:hidden;
  background:color-mix(in oklab,var(--card) 60%,transparent);backdrop-filter:blur(8px);
  box-shadow:0 20px 50px -24px color-mix(in oklab,var(--sky-2) 70%,transparent);
  transition:transform .35s var(--ease),border-color .35s}
.emblem:hover{border-color:var(--sky-1)}
.em-glow{position:absolute;inset:-28%;border-radius:50%;background:var(--spectral);filter:blur(26px);opacity:.4;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
[data-theme="light"] .em-glow{opacity:.3;mix-blend-mode:multiply}
.em-ring{position:absolute;inset:6px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--sky-1),transparent 28%,var(--sky-3),transparent 56%,var(--sky-2),transparent 84%,var(--sky-4));
  -webkit-mask:radial-gradient(closest-side,transparent 85%,#000 87%);mask:radial-gradient(closest-side,transparent 85%,#000 87%);
  animation:spin 9s linear infinite;opacity:.9;mix-blend-mode:screen}
[data-theme="light"] .em-ring{mix-blend-mode:normal;opacity:.75}
.em-orbit{position:absolute;inset:0;width:100%;height:100%;animation:spin 15s linear infinite}
.em-orbit .er{fill:none;stroke:var(--line-soft);stroke-width:1}
.em-orbit .dot{fill:var(--sky-1);filter:drop-shadow(0 0 5px var(--sky-1))}
.em-mark{position:relative;width:50%;animation:bob 5s ease-in-out infinite;
  filter:drop-shadow(0 4px 16px color-mix(in oklab,var(--sky-2) 55%,transparent))}
@media (max-width:560px){.emblem{width:92px}}

/* ---------- emblem v2 — glorified vector effects ---------- */
.emblem{width:clamp(118px,13.5vw,176px)}
.em-orbit.rev{animation:spin 11s linear infinite reverse}
.em-orbit .pd{filter:drop-shadow(0 0 6px rgba(230,46,193,.5))}
.em-draw{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);transform:rotate(-90deg)}
.em-draw circle{stroke-width:1.8;stroke-linecap:round;stroke-dasharray:130 222;animation:emdash 6.5s linear infinite}
@keyframes emdash{to{stroke-dashoffset:-352}}
.em-mark{width:54%}
.em-spark{position:absolute;font-size:13px;line-height:1;color:#E62EC1;text-shadow:0 0 10px currentColor;animation:twk 3.6s ease-in-out infinite;z-index:3}
.em-spark.s1{top:8%;right:14%;color:#2BD9F2}
.em-spark.s2{bottom:12%;left:10%;color:#E62EC1;animation-delay:1.2s}
.em-spark.s3{top:38%;left:-4%;color:#19C79B;animation-delay:2.2s;font-size:11px}
@keyframes twk{0%,100%{opacity:.15;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(40deg)}}

/* ============================================================
   VERSION B overrides — true bone hero, brighter color blocks
   ============================================================ */
/* hero atmosphere — theme-aware blend, bolder default wash */
.hero-sky{opacity:var(--wash,.42);filter:saturate(1.18);
  /* full-bleed: escape the .wrap max-width so motion hits both viewport edges */
  inset:auto;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%)}
[data-theme="light"] .hero-sky{mix-blend-mode:multiply}
[data-theme="dark"]  .hero-sky{mix-blend-mode:screen}
.hero-sky .blob{filter:blur(110px) saturate(1.25);opacity:.6}
.hero-sky .horizon{height:55%}
/* legibility veil between motion (z0) and content (z2) — also full-bleed */
.hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:radial-gradient(125% 95% at 32% 42%, color-mix(in oklab,var(--paper) 60%, transparent), transparent 72%)}
/* emblem reads a touch bigger as the hero's color anchor */
.emblem{width:clamp(116px,13vw,168px)}

/* A/B version switcher */
.vswitch{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:140;display:flex;align-items:center;gap:2px;
  border:1.5px solid var(--line);background:color-mix(in oklab,var(--paper) 78%,transparent);backdrop-filter:blur(14px);
  padding:5px;border-radius:0;box-shadow:0 18px 40px -22px rgba(0,0,0,.5)}
.vswitch .vlbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:0 8px 0 6px}
.vswitch a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;color:var(--ink-2);transition:color .25s,background .25s,border-color .25s;border:1.5px solid transparent}
.vswitch a:hover{color:var(--ink)}
.vswitch a.on{background:var(--ink);color:var(--paper)}
@media (max-width:560px){.vswitch{bottom:14px}}

/* ---------- subpage hero ---------- */
.hero.sub{min-height:62svh;justify-content:flex-end;padding-top:clamp(120px,18vh,180px)}
.hero.sub .hl{font-size:clamp(40px,10vw,168px)}
.hero.sub .crumb{display:inline-flex;gap:10px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.hero.sub .crumb a{color:var(--ink-3);transition:color .25s}
.hero.sub .crumb a:hover{color:var(--ink)}

/* discretion band */
.disc{border-block:var(--bd) solid var(--line);background:var(--card);padding:clamp(28px,4vw,52px) 0}
.disc .big-body{max-width:34ch}
.disc .mono{color:var(--ink-3)}

/* nexus rows (portfolio page) */
.nx{display:grid;grid-template-columns:110px 1fr 1.1fr;gap:clamp(16px,3vw,44px);align-items:start;padding:clamp(24px,3.4vw,40px) 0;border-top:var(--bd) solid var(--line)}
.nx:last-child{border-bottom:var(--bd) solid var(--line)}
.nx .nxn{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--accent)}
.nx .nxs{font-family:var(--serif);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.8vw,40px);line-height:1.04;letter-spacing:-.015em}
.nx .nxm{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:12px;display:block}
.nx p{color:var(--ink-2);font-size:clamp(15px,1.3vw,17.5px);line-height:1.55}
@media (max-width:760px){.nx{grid-template-columns:1fr;gap:10px}}

/* ============================================================
   MOTION FX — full-hero, intense (Waves / Aurora / Spin / Ripple / Still)
   ============================================================ */
.mfx,.mfx-spin,.mfx-aurora{position:absolute;inset:0;width:100%;height:100%}
.mfx-spin,.mfx-aurora,.mfx-waves,.mfx-ripple{display:none}

/* WAVES — tall scrolling fronts */
.wv{will-change:transform}
.w1{fill:var(--sky-1);opacity:.62;animation:wave 11s linear infinite}
.w2{fill:var(--sky-2);opacity:.5;animation:wave 17s linear infinite reverse}
.w3{fill:var(--sky-3);opacity:.42;animation:wave 24s linear infinite}
@keyframes wave{to{transform:translateX(-960px)}}

/* AURORA — full-bleed flowing gradient sheet */
.mfx-aurora{background:linear-gradient(120deg,var(--sky-1),var(--sky-3) 34%,var(--sky-2) 64%,var(--sky-4));
  filter:blur(54px) saturate(1.3);transform-origin:center;will-change:transform;animation:auroraflow 16s ease-in-out infinite}
@keyframes auroraflow{0%{transform:translate(-12%,-8%) rotate(-9deg) scale(1.55)}50%{transform:translate(11%,7%) rotate(11deg) scale(1.9)}100%{transform:translate(-12%,-8%) rotate(-9deg) scale(1.55)}}

/* SPIN — peacock conic wheel sweeping the whole hero */
.mfx-spin{background:conic-gradient(from 0deg at 50% 42%,var(--sky-1),var(--sky-2),var(--sky-3),var(--sky-4),var(--sky-2),var(--sky-1));
  filter:blur(58px) saturate(1.28);transform-origin:50% 42%;will-change:transform;animation:spin360 22s linear infinite}
@keyframes spin360{from{transform:rotate(0) scale(1.7)}to{transform:rotate(360deg) scale(1.7)}}

/* RIPPLE — bold concentric rings from hero centre */
.rp{transform-box:fill-box;transform-origin:center;opacity:0;stroke-width:4;will-change:transform,opacity;animation:ripple 4.4s ease-out infinite}
.r2{animation-delay:1.1s}.r3{animation-delay:2.2s}.r4{animation-delay:3.3s}
@keyframes ripple{0%{transform:scale(.12);opacity:.8}80%{opacity:.12}100%{transform:scale(2.8);opacity:0}}

/* mode switching (default / no attr = drifting blobs) */
body[data-motion="waves"]  .blob{display:none}
body[data-motion="waves"]  .mfx-waves{display:block}
body[data-motion="aurora"] .blob{display:none}
body[data-motion="aurora"] .mfx-aurora{display:block}
body[data-motion="spin"]   .blob{display:none}
body[data-motion="spin"]   .mfx-spin{display:block}
body[data-motion="ripple"] .blob{display:none}
body[data-motion="ripple"] .mfx-ripple{display:block}
body[data-motion="off"]    .hero-sky *{animation-play-state:paused!important}

/* PLUME — peacock feather fans sweeping from the horizon */
.mfx-plume{position:absolute;inset:0;display:none}
.mfx-plume::before,.mfx-plume::after{content:"";position:absolute;inset:-22%;
  background:repeating-conic-gradient(from -40deg at 50% 118%,
    var(--sky-1) 0deg 11deg, transparent 11deg 24deg,
    var(--sky-2) 24deg 35deg, transparent 35deg 48deg,
    var(--sky-3) 48deg 59deg, transparent 59deg 72deg,
    var(--sky-4) 72deg 83deg, transparent 83deg 96deg);
  filter:blur(40px) saturate(1.25);transform-origin:50% 118%;will-change:transform;
  animation:plumeSweep 24s ease-in-out infinite alternate}
.mfx-plume::after{animation-duration:17s;animation-direction:alternate-reverse;opacity:.65}
@keyframes plumeSweep{from{transform:rotate(-16deg) scale(1.12)}to{transform:rotate(16deg) scale(1.3)}}
body[data-motion="plume"] .blob{display:none}
body[data-motion="plume"] .mfx-plume{display:block}

/* WEAVE — crossing silk bands drifting diagonally */
.mfx-weave{position:absolute;inset:-10%;display:none;
  background:
    repeating-linear-gradient(112deg, var(--sky-1) 0 70px, transparent 70px 210px),
    repeating-linear-gradient(-112deg, var(--sky-3) 0 70px, transparent 70px 210px),
    linear-gradient(160deg, var(--sky-2), transparent 70%);
  filter:blur(34px) saturate(1.2);will-change:background-position;
  animation:weaveShift 16s linear infinite}
@keyframes weaveShift{to{background-position:560px 0, -560px 0, 0 0}}
body[data-motion="weave"] .blob{display:none}
body[data-motion="weave"] .mfx-weave{display:block}

@media (prefers-reduced-motion:reduce){.hero-sky *{animation-play-state:paused!important}}