/* ============================================================
   Oh Wow Cloud — 2026 Redesign ("OH, WOW.")
   Loads AFTER legacy CSS. All classes prefixed owc- to avoid
   collisions with inner pages still on the old system.
   ============================================================ */

:root{
  --owc-void:#08080B;
  --owc-void-2:#0E0E14;
  --owc-ivory:#F1EFE9;
  --owc-cobalt:#3644FF;
  --owc-lilac:#C9C4F4;
  --owc-dim:rgba(241,239,233,.55);
  --owc-line:rgba(241,239,233,.13);
  --owc-pad:clamp(20px,4vw,72px);
  --owc-ease:cubic-bezier(.76,0,.24,1);
  --owc-ease-out:cubic-bezier(.16,1,.3,1);
}

body.owc{background:var(--owc-void);color:var(--owc-ivory);font-family:'Archivo',sans-serif;overflow-x:hidden}
body.owc.loading{overflow:hidden}
body.owc ::selection{background:var(--owc-cobalt);color:var(--owc-ivory)}
.owc-mono{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.owc-si{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
body.owc a:focus-visible,body.owc button:focus-visible{outline:2px solid var(--owc-cobalt);outline-offset:4px;border-radius:2px}

/* ---------- grain ---------- */
.owc-grain{position:fixed;inset:-100%;z-index:200;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:owcGrain 8s steps(10) infinite}
@keyframes owcGrain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,3%)}30%{transform:translate(6%,-10%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-10%,4%)}60%{transform:translate(10%,0)}70%{transform:translate(0,10%)}80%{transform:translate(-12%,0)}90%{transform:translate(8%,4%)}}

/* ---------- preloader ---------- */
.owc-loader{position:fixed;inset:0;z-index:999;background:var(--owc-void);display:flex;align-items:flex-end;justify-content:space-between;padding:var(--owc-pad);transition:clip-path 1.1s var(--owc-ease);clip-path:inset(0 0 0 0)}
.owc-loader.done{clip-path:inset(0 0 100% 0)}
.owc-loader .count{font-weight:900;font-variation-settings:'wdth' 125;letter-spacing:-.04em;font-size:clamp(90px,20vw,280px);line-height:.8;font-variant-numeric:tabular-nums;color:var(--owc-ivory)}
.owc-loader .count i{font-style:normal;color:var(--owc-cobalt)}
.owc-loader .word{max-width:210px;color:var(--owc-dim);font-size:13px;text-align:right}

/* ---------- cursor ---------- */
.owc-cursor{position:fixed;top:0;left:0;z-index:250;pointer-events:none;width:12px;height:12px;border-radius:50%;background:var(--owc-ivory);transform:translate(-50%,-50%);mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;transition:width .35s var(--owc-ease),height .35s var(--owc-ease)}
.owc-cursor span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;color:#000;opacity:0;transition:opacity .15s;white-space:nowrap}
.owc-cursor.grow{width:92px;height:92px}
.owc-cursor.grow span{opacity:1;transition-delay:.12s}
@media(pointer:coarse){.owc-cursor{display:none}}
@media(pointer:fine){body.owc,body.owc a,body.owc button{cursor:none}}

/* ---------- nav ---------- */
.owc-nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;width:calc(100% - 2*var(--owc-pad));max-width:1600px;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-radius:999px;border:1px solid transparent;transition:background .4s,border-color .4s,opacity .8s ease .2s;opacity:0}
body.owc.ready .owc-nav,body.owc:not(.loading) .owc-nav{opacity:1}
.owc-nav.solid{background:rgba(8,8,11,.82);border-color:var(--owc-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.owc-nav .logo{font-weight:850;font-variation-settings:'wdth' 120;letter-spacing:-.02em;font-size:15px;text-transform:uppercase;color:var(--owc-ivory)}
.owc-nav .logo sup{font-size:8px;color:var(--owc-cobalt)}
.owc-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.owc-nav ul a{font-size:13px;position:relative;overflow:hidden;display:inline-block;line-height:1.3;color:var(--owc-ivory)}
.owc-nav ul a i{font-style:normal;display:inline-block;transition:transform .4s var(--owc-ease)}
.owc-nav ul a::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--owc-lilac);transition:transform .4s var(--owc-ease)}
.owc-nav ul a:hover i,.owc-nav ul a:hover::after{transform:translateY(-100%)}
.owc-nav .clock{color:var(--owc-dim)}
.owc-nav .burger{display:none;background:none;border:1px solid var(--owc-line);border-radius:999px;color:var(--owc-ivory);padding:8px 16px;font-size:12px}
@media(max-width:860px){.owc-nav ul,.owc-nav .clock{display:none}.owc-nav .burger{display:block}}
.owc-mobile{position:fixed;inset:0;z-index:99;background:var(--owc-void);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--owc-pad);transform:translateY(-100%);transition:transform .6s var(--owc-ease)}
.owc-mobile.open{transform:none}
.owc-mobile a{font-weight:900;font-variation-settings:'wdth' 122;text-transform:uppercase;font-size:clamp(38px,10vw,64px);letter-spacing:-.02em;color:var(--owc-ivory);line-height:1.05}
.owc-mobile a:hover{color:var(--owc-cobalt)}

/* ---------- hero ---------- */
.owc-hero{min-height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--owc-pad) 4.5vh;isolation:isolate}
#owc-mesh{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.owc-hero::after{content:'';position:absolute;inset:auto 0 0 0;height:30vh;z-index:-1;background:linear-gradient(to bottom,transparent,var(--owc-void))}
.owc-hero .top-meta{position:absolute;top:96px;left:var(--owc-pad);right:var(--owc-pad);display:flex;justify-content:space-between;color:var(--owc-dim);gap:16px}
.owc-hero .top-meta span:nth-child(2){text-align:center}
.owc-hero .top-meta span:last-child{text-align:right}
@media(max-width:640px){.owc-hero .top-meta span:nth-child(2){display:none}}
.owc-hero h1{font-weight:900;font-variation-settings:'wdth' 125,'wght' 900;text-transform:uppercase;letter-spacing:-.035em;line-height:.82;font-size:clamp(86px,21vw,372px);user-select:none;margin:0;color:var(--owc-ivory)}
.owc-hero h1 .row{display:block;overflow:hidden;padding-top:.07em}
.owc-hero h1 .ch{display:inline-block;transform:translateY(115%) rotate(6deg);transform-origin:0 100%;font-variation-settings:'wdth' var(--w,125),'wght' var(--g,900)}
body.owc.ready .owc-hero h1 .ch{animation:owcChIn 1.1s var(--owc-ease) forwards;animation-delay:calc(var(--i)*45ms + .1s)}
@keyframes owcChIn{to{transform:translateY(0) rotate(0)}}
.owc-hero h1 .wow .ch{color:transparent;-webkit-text-stroke:2.5px var(--owc-ivory)}
.owc-hero h1 .punct{color:var(--owc-cobalt)!important;-webkit-text-stroke:0!important}
.owc-hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:5vh;opacity:0;transform:translateY(20px);transition:opacity 1s ease 1.15s,transform 1s var(--owc-ease-out) 1.15s}
body.owc.ready .owc-hero-sub{opacity:1;transform:none}
.owc-hero-sub p{max-width:410px;color:var(--owc-dim);font-size:clamp(15px,1.3vw,19px);margin:0}
.owc-hero-sub p strong{color:var(--owc-ivory);font-weight:650}
.owc-hero-sub .hint{color:var(--owc-dim);display:flex;align-items:center;gap:10px}
.owc-hero-sub .hint b{display:inline-block;width:1px;height:34px;background:var(--owc-dim);animation:owcDrip 1.8s var(--owc-ease) infinite}
@keyframes owcDrip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- ticker ---------- */
.owc-ticker{border-top:1px solid var(--owc-line);border-bottom:1px solid var(--owc-line);overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.2deg) scale(1.03);background:var(--owc-void);position:relative;z-index:2}
.owc-ticker .track{display:inline-flex;animation:owcTick 26s linear infinite}
.owc-ticker span{font-weight:850;font-variation-settings:'wdth' 122;text-transform:uppercase;font-size:clamp(17px,2vw,27px);letter-spacing:-.01em;padding-right:.9em;color:var(--owc-ivory)}
.owc-ticker .owc-si{color:var(--owc-cobalt);text-transform:none;font-size:1.15em}
@keyframes owcTick{to{transform:translateX(-50%)}}

/* ---------- manifesto ---------- */
.owc-manifesto{padding:clamp(120px,16vw,240px) var(--owc-pad) clamp(90px,11vw,170px)}
.owc-manifesto .owc-mono{color:var(--owc-dim);display:block;margin-bottom:38px}
.owc-manifesto p{font-weight:700;font-variation-settings:'wdth' 110;font-size:clamp(28px,4.6vw,64px);line-height:1.14;letter-spacing:-.02em;max-width:1150px;margin:0;color:var(--owc-ivory)}
.owc-manifesto .w{color:rgba(241,239,233,.14);transition:color .3s ease}
.owc-manifesto .w.lit{color:var(--owc-ivory)}
.owc-manifesto .w.accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:1.08em}
.owc-manifesto .w.accent.lit{color:var(--owc-cobalt)}

/* ---------- section heads ---------- */
.owc-h2{font-weight:900;font-variation-settings:'wdth' 122;text-transform:uppercase;letter-spacing:-.03em;line-height:.88;font-size:clamp(44px,8vw,128px);margin:0;color:var(--owc-ivory)}
.owc-h2 .owc-si{color:var(--owc-cobalt);text-transform:none}
.owc-sec-head{padding:0 var(--owc-pad) clamp(40px,5vw,84px);display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.owc-sec-head .owc-mono{color:var(--owc-dim)}

/* ---------- work panels ---------- */
.owc-panels{position:relative}
.owc-panel{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;border-top:1px solid var(--owc-line);overflow:hidden;padding:12vh var(--owc-pad);background:var(--owc-void)}
.owc-panel .aura{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.55;background:radial-gradient(circle,var(--aura,rgba(54,68,255,.4)),transparent 62%)}
.owc-panel:nth-child(odd) .aura{top:-20vmax;right:-15vmax}
.owc-panel:nth-child(even) .aura{bottom:-20vmax;left:-14vmax}
.owc-panel .inner{position:relative;width:100%;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,90px);align-items:center}
@media(max-width:900px){.owc-panel .inner{grid-template-columns:1fr;gap:36px}}
.owc-panel .idx{color:var(--owc-dim);display:block;margin-bottom:22px}
.owc-panel h3{font-weight:900;font-variation-settings:'wdth' 122;text-transform:uppercase;letter-spacing:-.03em;line-height:.86;font-size:clamp(42px,6vw,100px);margin:0;color:var(--owc-ivory)}
.owc-panel .meta{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 0;padding:0;list-style:none}
.owc-panel .meta li{border:1px solid rgba(241,239,233,.3);border-radius:999px;padding:6px 15px;font-size:12.5px;letter-spacing:.03em;color:rgba(241,239,233,.85)}
.owc-panel .result{margin:24px 0 0;color:var(--owc-dim);max-width:430px;font-size:15.5px}
.owc-panel .result strong{color:var(--owc-ivory)}
.owc-panel .link{display:inline-flex;align-items:center;gap:12px;margin-top:30px;font-weight:700;font-size:15px;color:var(--owc-ivory)}
.owc-panel .link .arr{width:42px;height:42px;border:1px solid rgba(241,239,233,.4);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s,transform .35s var(--owc-ease)}
.owc-panel .link:hover .arr{background:var(--owc-cobalt);border-color:var(--owc-cobalt);transform:rotate(-45deg)}

/* browser frame w/ photo */
.owc-shot{perspective:1200px}
.owc-browser{border-radius:14px;overflow:hidden;border:1px solid rgba(241,239,233,.16);box-shadow:0 40px 90px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.4);transform:rotateY(-6deg) rotateX(2deg);transition:transform .8s var(--owc-ease-out);will-change:transform;background:#0D0D12}
.owc-panel:hover .owc-browser{transform:rotateY(0) rotateX(0)}
.owc-browser .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(241,239,233,.1)}
.owc-browser .bar b{width:9px;height:9px;border-radius:50%}
.owc-browser .bar b:nth-child(1){background:#FF5F57}.owc-browser .bar b:nth-child(2){background:#FEBC2E}.owc-browser .bar b:nth-child(3){background:#28C840}
.owc-browser .bar .url{flex:1;margin-left:8px;background:rgba(0,0,0,.3);border-radius:6px;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--owc-dim);padding:5px 12px}
.owc-browser .view{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(140deg,#12121C,#08080C)}
.owc-browser .view img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.2s var(--owc-ease-out)}
.owc-panel:hover .owc-browser .view img{transform:scale(1.0)}
.owc-browser .view .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,11,.35),transparent 45%)}

/* ---------- voices ---------- */
.owc-voices{padding:clamp(100px,13vw,190px) 0;overflow:hidden}
.owc-vtrack{display:flex;gap:22px;width:max-content;animation:owcTick 40s linear infinite;padding:0 11px}
.owc-voices:hover .owc-vtrack{animation-play-state:paused}
.owc-vcard{width:min(420px,82vw);border:1px solid var(--owc-line);border-radius:18px;padding:30px 30px 26px;background:var(--owc-void-2);display:flex;flex-direction:column;gap:20px;flex-shrink:0}
.owc-vcard q{quotes:'“' '”';font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(19px,1.8vw,24px);line-height:1.3;color:var(--owc-ivory)}
.owc-vcard q b{color:var(--owc-cobalt);font-weight:400}
.owc-vcard .who{display:flex;justify-content:space-between;align-items:center;color:var(--owc-dim);font-size:13px}

/* ---------- numbers ---------- */
.owc-numbers{padding:clamp(90px,12vw,180px) var(--owc-pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);border-top:1px solid var(--owc-line)}
@media(max-width:820px){.owc-numbers{grid-template-columns:1fr}}
.owc-num{border-top:1px solid var(--owc-line);padding-top:22px}
.owc-num .big{font-weight:900;font-variation-settings:'wdth' 124;letter-spacing:-.04em;font-size:clamp(70px,9vw,150px);line-height:.9;font-variant-numeric:tabular-nums;color:var(--owc-ivory)}
.owc-num .big em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--owc-cobalt);font-size:.85em}
.owc-num p{margin:12px 0 0;color:var(--owc-dim);font-size:14.5px;max-width:30ch}

/* ---------- process ---------- */
.owc-process{background:var(--owc-ivory);color:var(--owc-void);border-radius:34px 34px 0 0;padding:clamp(100px,13vw,200px) 0 clamp(90px,11vw,160px)}
.owc-process .owc-h2{color:var(--owc-void)}
.owc-process .owc-sec-head .owc-mono{color:rgba(8,8,11,.55)}
.owc-proc-list{margin:0 var(--owc-pad);border-top:1.5px solid var(--owc-void)}
.owc-proc{border-bottom:1.5px solid var(--owc-void);display:grid;grid-template-columns:110px 1fr 1.1fr;gap:clamp(16px,4vw,64px);padding:clamp(24px,3vw,42px) 0;align-items:baseline}
@media(max-width:820px){.owc-proc{grid-template-columns:1fr;gap:8px}}
.owc-proc .wk{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.1em;color:var(--owc-cobalt)}
.owc-proc h3{font-weight:850;font-variation-settings:'wdth' 118;text-transform:uppercase;font-size:clamp(26px,3.2vw,44px);letter-spacing:-.02em;line-height:.95;margin:0;transition:transform .45s var(--owc-ease),color .3s;color:var(--owc-void)}
.owc-proc:hover h3{transform:translateX(clamp(6px,1.2vw,18px));color:var(--owc-cobalt)}
.owc-proc p{color:rgba(8,8,11,.7);max-width:52ch;font-size:15.5px;margin:0}

/* ---------- CTA / footer ---------- */
.owc-cta{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;padding-top:clamp(90px,12vw,170px);background:var(--owc-void)}
#owc-mesh2{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.75}
.owc-cta .core{position:relative;z-index:1;text-align:center;padding:0 var(--owc-pad)}
.owc-cta .core .owc-mono{color:var(--owc-dim)}
.owc-cta .owc-h2{font-size:clamp(52px,11.5vw,200px);margin-top:22px}
.owc-cta .owc-h2 .owc-si{color:var(--owc-lilac)}
.owc-mail{position:relative;z-index:1;display:block;text-align:center;margin-top:clamp(36px,6vh,80px);font-weight:800;font-variation-settings:'wdth' 112;letter-spacing:-.02em;font-size:clamp(20px,4.6vw,68px);color:var(--owc-ivory)}
.owc-mail em{font-style:normal;background-image:linear-gradient(var(--owc-cobalt),var(--owc-cobalt));background-repeat:no-repeat;background-size:100% 0%;background-position:0 100%;transition:background-size .45s var(--owc-ease);padding:0 .18em;border-radius:8px;box-decoration-break:clone}
.owc-mail:hover em{background-size:100% 100%}
.owc-mail .owc-mono{display:block;margin-top:16px;color:var(--owc-dim)}
.owc-wow-row{position:relative;z-index:1;overflow:hidden;white-space:nowrap;border-top:1px solid var(--owc-line);margin-top:clamp(50px,8vh,100px);padding:10px 0 0;user-select:none}
.owc-wow-row .track{display:inline-flex;animation:owcTick 18s linear infinite}
.owc-wow-row span{font-weight:900;font-variation-settings:'wdth' 125;text-transform:uppercase;font-size:clamp(80px,14vw,220px);line-height:.95;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px rgba(241,239,233,.28);padding-right:.35em;transition:color .3s}
.owc-wow-row:hover span{color:var(--owc-cobalt);-webkit-text-stroke:0}
.owc-footer{position:relative;z-index:1;border-top:1px solid var(--owc-line);padding:26px var(--owc-pad);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--owc-dim);font-size:13px;background:var(--owc-void)}
.owc-footer .links{display:flex;gap:24px}
.owc-footer a{color:var(--owc-dim)}
.owc-footer a:hover{color:var(--owc-ivory)}

.owc-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s var(--owc-ease-out)}
.owc-reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  body.owc *,body.owc *::before,body.owc *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .owc-hero h1 .ch{transform:none}
  .owc-hero-sub,.owc-reveal{opacity:1;transform:none}
  .owc-loader{display:none}
  body.owc.loading{overflow:auto}
  .owc-manifesto .w{color:var(--owc-ivory)}
  .owc-manifesto .w.accent{color:var(--owc-cobalt)}
  .owc-panel{position:relative;min-height:auto}
  .owc-browser{transform:none}
}

/* ============================================================
   Light-section color fortress — guarantees readable text inside
   ivory sections regardless of global reskin rules.
   ============================================================ */
body.owc .owc-process,
body.owc .owc-process p,
body.owc .owc-process li{color:rgba(8,8,11,.7)}
body.owc .owc-process h1,
body.owc .owc-process h2,
body.owc .owc-process h3,
body.owc .owc-process h4,
body.owc .owc-process .owc-h2{color:var(--owc-void)}
body.owc .owc-process .owc-h2 .owc-si{color:var(--owc-cobalt)}
body.owc .owc-process .owc-sec-head .owc-mono{color:rgba(8,8,11,.55)}
body.owc .owc-process .wk{color:var(--owc-cobalt)}

/* ============================================================
   Mobile horizontal-scroll lock — iOS Safari ignores
   overflow-x:hidden on body, but honors overflow:clip on html.
   ============================================================ */
html{overflow-x:clip}
body.owc{overflow-x:clip;max-width:100%}
@supports not (overflow:clip){
  html{overflow-x:hidden}
  body.owc{overflow-x:hidden;position:relative}
}
/* Keep the tilted ticker's intentional overspill from creating width */
.owc-ticker{max-width:100vw}
/* Tighter hero scale on small screens so WOW. always fits the viewport */
@media(max-width:640px){
  .owc-hero h1{font-size:clamp(54px,19.5vw,120px)}
}

/* ============================================================
   Ambient background video layers (cloud loops)
   Sits above the canvas mesh fallback, below content.
   ============================================================ */
.owc-video-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.owc-hero .owc-video-bg{z-index:-1}
.owc-cta .owc-video-bg{z-index:0}
.owc-video-bg video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.owc-video-bg video.on{opacity:1}
.owc-video-bg .veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,11,.35),rgba(8,8,11,.15) 40%,rgba(8,8,11,.55))}
@media (prefers-reduced-motion:reduce){
  .owc-video-bg{display:none}
}