/*
Theme Name: IamOwino — Animated
Theme URI: https://iamowino.com
Author: George Owino
Author URI: https://iamowino.com
Description: Executive brand strategist site for George Owino (IamOwino). Dark editorial design with a dependency-free animation layer: animated preloader and hero, masked reveals, a moving services strip, animated stats, and a logo wall. Front-page theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iamowino-animated
*/

:root{
  --ink:#0A0A0A; --surface:#111111; --surface-2:#181818; --surface-3:#1F1F1F;
  --text:#F0EBE1; --text-muted:#8A8078;
  --accent:#C8381A; --accent-deep:#A02A10;
  --gold:#B8973E; --gold-light:#D4B05A;
  --rule:rgba(255,255,255,0.07); --rule-warm:rgba(184,151,62,0.25);
  --nav-h:72px; --max-w:1200px;
  --ff-display:'Cormorant Garamond',Georgia,serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-label:'Barlow Condensed','Inter',sans-serif;
  --pad-x:clamp(20px,5vw,80px);
  --sec-y:clamp(28px,4vw,54px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ background:var(--ink); color:var(--text); font-family:var(--ff-body); font-weight:400;
  font-size:clamp(1rem,1.05vw,1.075rem); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
body.is-locked{ overflow:hidden; height:100vh; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }
main [id], section[id]{ scroll-margin-top:90px; }
.wrap{ max-width:var(--max-w); margin-inline:auto; padding-inline:var(--pad-x); }

.label{ font-family:var(--ff-label); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--gold); }
.eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(16px,2.4vw,28px); }
.eyebrow .rule{ height:1px; flex:1; max-width:230px; background:var(--rule-warm); transform-origin:left; }
.eyebrow.rust .label{ color:var(--accent); }
.acc{ color:var(--accent); }

/* CURSOR */
.cur,.cur-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; }
.cur{ width:6px; height:6px; background:var(--text); transform:translate(-50%,-50%); }
.cur-ring{ width:38px; height:38px; border:1px solid rgba(200,56,26,.55); transform:translate(-50%,-50%); display:grid; place-items:center; transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s; }
.cur-ring .cl{ font-family:var(--ff-label); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.56rem; color:#fff; opacity:0; transition:opacity .25s; white-space:nowrap; }
body.cur-on .cur-ring{ width:74px; height:74px; background:var(--accent); border-color:transparent; }
body.cur-on .cur{ opacity:0; }
body.cur-on .cur-ring .cl{ opacity:1; }
@media (hover:none),(pointer:coarse){ .cur,.cur-ring{ display:none; } }

/* PRELOADER */
.loader{ position:fixed; inset:0; z-index:1000; background:var(--ink); display:grid; place-items:center; transition:transform .9s var(--ease); }
.loader.done{ transform:translateY(-100%); }
.loader__in{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.loader__mark{ width:54px; height:54px; opacity:0; transform:scale(.8); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.loader.reveal .loader__mark{ opacity:1; transform:scale(1); }
.loader__label{ overflow:hidden; }
.loader__label span{ display:inline-block; font-family:var(--ff-label); font-weight:600; text-transform:uppercase; letter-spacing:.42em; font-size:.74rem; color:var(--gold); transform:translateY(120%); transition:transform .7s var(--ease) .15s; padding-left:.42em; }
.loader.reveal .loader__label span{ transform:translateY(0); }
.loader__bar{ position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .2s linear; }
.loader__pct{ position:absolute; right:var(--pad-x); bottom:clamp(18px,4vw,40px); font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(2rem,7vw,4.5rem); color:#26211c; line-height:.8; }

/* HEADER */
.head{ position:fixed; top:0; left:0; width:100%; z-index:500; height:var(--nav-h); display:flex; align-items:center; transition:background .5s var(--ease),border-color .5s; border-bottom:1px solid transparent; }
.head::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,var(--accent),transparent 60%); opacity:.9; }
.head.scrolled{ background:rgba(10,10,10,.86); backdrop-filter:blur(10px); border-bottom-color:var(--rule); }
.head__in{ max-width:var(--max-w); margin-inline:auto; padding-inline:var(--pad-x); width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:40px; height:40px; flex:none; }
.brand__txt strong{ display:block; font-family:var(--ff-display); font-weight:700; font-size:1.18rem; letter-spacing:.01em; line-height:1.05; }
.brand__txt span{ display:block; font-size:.82rem; color:var(--text); font-weight:400; letter-spacing:.02em; }
.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,36px); }
.nav a{ font-family:var(--ff-label); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--text); position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.btn{ font-family:var(--ff-label); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; display:inline-flex; align-items:center; gap:.6em; padding:.85em 1.4em; position:relative; overflow:hidden; will-change:transform; }
.btn--fill{ background:var(--accent); color:#fff; }
.btn--fill::before{ content:""; position:absolute; inset:0; background:var(--accent-deep); transform:translateY(101%); transition:transform .45s var(--ease); }
.btn--fill span{ position:relative; z-index:2; }
.btn--fill:hover::before{ transform:translateY(0); }
.btn--out{ border:1px solid var(--rule); color:var(--text); }
.btn--out span{ position:relative; z-index:2; transition:color .4s; }
.btn--out::before{ content:""; position:absolute; inset:0; background:var(--text); transform:translateY(101%); transition:transform .45s var(--ease); }
.btn--out:hover span{ color:var(--ink); }
.btn--out:hover::before{ transform:translateY(0); }
.burger{ display:none; flex-direction:column; gap:5px; width:28px; }
.burger span{ height:1.6px; width:100%; background:var(--text); transition:transform .4s var(--ease),opacity .3s; }
.burger.on span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* HERO */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(30px,6vw,70px)); padding-bottom:clamp(40px,6vw,80px); min-height:100svh; display:flex; align-items:center; }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,50px); align-items:center; width:100%; }
@media(min-width:940px){ .hero__grid{ grid-template-columns:1.15fr .85fr; } }
.hero__eyebrow{ display:flex; align-items:center; gap:.9rem; margin-bottom:clamp(20px,3vw,34px); }
.hero__eyebrow .rule{ width:46px; height:1px; background:var(--accent); }
.hero__eyebrow .label{ color:var(--accent); }
.hero h1{ font-family:var(--ff-display); font-style:italic; font-weight:700; letter-spacing:-.02em; line-height:.94; font-size:clamp(3.3rem,9.2vw,6.6rem); }
.hero__lead{ margin-top:clamp(22px,3vw,34px); max-width:44ch; color:var(--text-muted); font-weight:300; font-size:clamp(1rem,1.2vw,1.14rem); line-height:1.7; }
.hero__cta{ margin-top:clamp(26px,3.4vw,40px); display:flex; flex-wrap:wrap; gap:14px; }
.hero__stats{ margin-top:clamp(34px,5vw,58px); display:flex; flex-wrap:wrap; gap:clamp(26px,4vw,54px); }
.stat .n{ font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(2.2rem,3.6vw,3.1rem); line-height:1; color:var(--text); }
.stat .n .suf{ color:var(--accent); }
.stat .l{ font-family:var(--ff-label); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--text-muted); margin-top:.5em; }
.hero__portrait{ position:relative; justify-self:center; width:100%; max-width:440px; }
.hero__ghost{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:34rem; line-height:1; color:rgba(200,56,26,.06); z-index:0; pointer-events:none; transform:translateX(18%); will-change:transform; }
.hero__frame{ position:relative; z-index:1; aspect-ratio:4/5; overflow:hidden; clip-path:polygon(0 0, 88% 0, 100% 14%, 100% 100%, 12% 100%, 0 86%); background:var(--surface-2); }
.hero__frame img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); will-change:transform; }
.hero__cap{ margin-top:16px; font-family:var(--ff-label); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--text-muted); text-align:center; }
.hero__scroll{ position:absolute; left:var(--pad-x); bottom:clamp(16px,3vw,30px); display:flex; align-items:center; gap:.7em; font-family:var(--ff-label); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--text-muted); }
.hero__scroll .ln{ width:40px; height:1px; background:var(--text-muted); transform-origin:left; animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:scaleX(.3); opacity:.4 } 50%{ transform:scaleX(1); opacity:1 } }

/* MARQUEE */
.marquee{ border-block:1px solid var(--rule); padding-block:clamp(16px,2vw,26px); overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; will-change:transform; }
.marquee__track span{ font-family:var(--ff-display); font-style:italic; font-weight:600; font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--text); padding-inline:1.1em; display:inline-flex; align-items:center; gap:1.1em; }
.marquee__track span::before{ content:"✦"; color:var(--accent); font-style:normal; font-size:.5em; }

/* SECTION */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec__head{ display:grid; grid-template-columns:1fr; gap:20px; align-items:end; }
@media(min-width:820px){ .sec__head{ grid-template-columns:1.1fr .9fr; } }
.sec__head h2{ font-family:var(--ff-display); font-style:italic; font-weight:700; letter-spacing:-.015em; line-height:1.02; font-size:clamp(2.2rem,5vw,3.6rem); }
.sec__head p{ color:var(--text-muted); font-weight:300; max-width:46ch; justify-self:start; }
@media(min-width:820px){ .sec__head p{ justify-self:end; text-align:right; } }
.hr{ height:1px; background:var(--rule); margin-top:clamp(18px,2.6vw,32px); transform-origin:left; }

/* mask reveal words */
.rw{ display:inline-block; overflow:hidden; padding:.1em .03em; margin:-.1em -.03em; vertical-align:top; }
.rw > i{ display:inline-block; font-style:inherit; }
.fx{ will-change:transform,opacity; }

/* CORE */
.core{ position:relative; margin-top:clamp(26px,3.5vw,44px); background:var(--surface-2); border-radius:3px; overflow:hidden; display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,50px); padding:clamp(30px,4.5vw,56px) clamp(26px,4vw,54px); }
@media(min-width:860px){ .core{ grid-template-columns:1.05fr .95fr; } }
.core::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .9s var(--ease); }
.core.in::before{ transform:scaleY(1); }
.core::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 100% 0%, rgba(200,56,26,.10), transparent 60%); pointer-events:none; }
.core__body{ position:relative; z-index:1; }
.core h3{ font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.05; margin:.5em 0 .7em; }
.core p{ color:var(--text-muted); font-weight:300; max-width:42ch; }
.core .btn{ margin-top:clamp(22px,3vw,34px); }
.core__tags{ position:relative; z-index:1; align-self:center; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.core__tags .t{ display:flex; align-items:center; gap:.7em; padding:1em 0; border-bottom:1px solid var(--rule); font-size:.98rem; color:var(--text); }
.core__tags .t::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* CAPS */
.caps__label{ margin-top:clamp(28px,4vw,52px); margin-bottom:clamp(16px,2vw,24px); }
.caps{ display:grid; grid-template-columns:1fr; border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
@media(min-width:640px){ .caps{ grid-template-columns:1fr 1fr; } }
@media(min-width:1040px){ .caps{ grid-template-columns:repeat(5,1fr); } }
.cap{ padding:clamp(24px,2.2vw,30px); border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); transition:background .4s; }
.cap:hover{ background:var(--surface); }
.cap .num{ font-family:var(--ff-label); font-weight:600; letter-spacing:.1em; color:var(--accent); font-size:.86rem; }
.cap h4{ font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(1.2rem,1.6vw,1.4rem); line-height:1.12; margin:.7em 0 .55em; }
.cap p{ color:var(--text-muted); font-weight:300; font-size:.92rem; line-height:1.6; }

/* DIVIDER */
.divider{ display:flex; align-items:center; gap:20px; padding-block:clamp(16px,2.6vw,34px); }
.divider .ln{ height:1px; flex:1; background:var(--rule); }
.divider .dia{ width:12px; height:12px; border:1px solid var(--gold); transform:rotate(45deg); will-change:transform; }

/* APPROACH */
.approach{ position:relative; overflow:hidden; }
.approach__ghost{ position:absolute; right:-2%; top:32%; font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(6rem,18vw,16rem); color:rgba(255,255,255,.018); pointer-events:none; z-index:0; white-space:nowrap; will-change:transform; }
.steps{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:clamp(26px,2.6vw,40px); margin-top:clamp(26px,3.5vw,48px); }
@media(min-width:680px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(min-width:1040px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding-top:clamp(20px,2vw,26px); border-top:1px solid var(--rule-warm); }
.step .rn{ font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--accent); line-height:1; }
.step h4{ font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(1.4rem,2vw,1.7rem); margin:.35em 0 .7em; }
.step p{ color:var(--text-muted); font-weight:300; font-size:.94rem; line-height:1.62; }

/* QUOTE */
.quote{ padding-block:clamp(70px,11vw,150px); text-align:center; position:relative; }
.quote__mark{ position:absolute; left:6%; top:12%; font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:16rem; color:rgba(255,255,255,.02); line-height:.7; pointer-events:none; }
.quote blockquote{ font-family:var(--ff-display); font-style:italic; font-weight:600; letter-spacing:-.01em; line-height:1.24; font-size:clamp(1.7rem,4vw,3.1rem); max-width:20ch; margin-inline:auto; color:var(--text); }

/* TRUSTED BY — LOGO WALL */
.logos{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,18px); margin-top:clamp(26px,3.5vw,44px); }
@media(min-width:480px){ .logos{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:720px){ .logos{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1000px){ .logos{ grid-template-columns:repeat(6,1fr); } }
.logo{ background:#fff; border-radius:10px; aspect-ratio:16/10; display:grid; place-items:center; padding:clamp(16px,2vw,26px); transition:transform .5s var(--ease),box-shadow .5s var(--ease); }
.logo img{ max-height:54px; max-width:100%; width:auto; object-fit:contain; }
.logo:hover{ transform:translateY(-5px); box-shadow:0 20px 45px rgba(0,0,0,.45); }

/* CONTACT */
.contact__grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,60px); align-items:center; }
@media(min-width:860px){ .contact__grid{ grid-template-columns:1.05fr .95fr; } }
.contact h2{ font-family:var(--ff-display); font-style:italic; font-weight:700; letter-spacing:-.015em; line-height:1.0; font-size:clamp(2.6rem,6vw,4.6rem); margin-top:clamp(10px,2vw,20px); }
.contact__cards{ display:grid; gap:0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.ccard{ display:flex; align-items:center; gap:20px; padding:clamp(22px,3vw,30px); border-bottom:1px solid var(--rule); transition:background .4s; }
.ccard:last-child{ border-bottom:none; }
.ccard:hover{ background:var(--surface-2); }
.ccard .ic{ width:46px; height:46px; flex:none; display:grid; place-items:center; border:1px solid var(--accent); color:var(--accent); border-radius:2px; }
.ccard .lab{ font-family:var(--ff-label); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--text-muted); }
.ccard .val{ font-family:var(--ff-display); font-style:italic; font-weight:600; font-size:clamp(1.15rem,1.8vw,1.5rem); color:var(--text); margin-top:.2em; }

/* FOOTER */
.foot{ border-top:1px solid var(--rule); }
.foot__in{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-block:clamp(24px,3vw,34px); }
.foot__cp{ font-family:var(--ff-label); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--text-muted); }
.foot__logo{ font-family:var(--ff-display); font-style:italic; font-weight:700; color:var(--accent); font-size:1.1rem; }
.foot__nav{ display:flex; gap:24px; }
.foot__nav a{ font-family:var(--ff-label); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--text-muted); transition:color .3s; }
.foot__nav a:hover{ color:var(--text); }

/* MOBILE MENU */
.overlay{ position:fixed; inset:0; z-index:480; background:var(--surface); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease); display:flex; flex-direction:column; padding:calc(var(--nav-h) + 40px) var(--pad-x) 40px; }
.overlay.open{ clip-path:inset(0 0 0 0); }
.overlay a{ font-family:var(--ff-display); font-style:italic; font-weight:700; font-size:clamp(2.2rem,9vw,3.6rem); line-height:1.4; overflow:hidden; }
.overlay a i{ display:inline-block; font-style:italic; transform:translateY(110%); transition:transform .6s var(--ease); }
.overlay.open a i{ transform:translateY(0); }
.overlay__foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:space-between; color:var(--text-muted); }

@media(max-width:900px){
  .nav,.head .btn--fill{ display:none; }
  .burger{ display:flex; }
  .hero__ghost{ font-size:22rem; }
}

/* JS-ENHANCED REVEALS (only when JS is on; otherwise content shows normally) */
.js .fx{ opacity:0; transform:translateY(42px); transition:opacity .85s var(--ease),transform .85s var(--ease); }
.js .fx.in{ opacity:1; transform:none; }
.js .rw > i{ transform:translateY(115%); transition:transform .85s var(--ease); }
.js .rw.in > i{ transform:translateY(0); }
.js .eyebrow .rule, .js .hr{ transform:scaleX(0); }
.js .eyebrow .rule.in, .js .hr.in{ transform:scaleX(1); transition:transform .9s var(--ease); }

/* livelier, differentiated entrances */
.js .logo.fx{ transform:translateY(28px) scale(.9); }
.js .logo.fx.in{ transform:none; }
.js .cap.fx, .js .step.fx{ transform:translateY(40px); }
.js .cap.fx.in, .js .step.fx.in{ transform:none; }
.js .step .rn{ opacity:.12; transform:scale(.5); transform-origin:left bottom; transition:opacity .8s var(--ease) .05s, transform .8s var(--ease) .05s; }
.js .step.in .rn{ opacity:1; transform:none; }
.js .cap .num{ opacity:0; transform:translateX(-14px); transition:opacity .7s var(--ease) .18s, transform .7s var(--ease) .18s; }
.js .cap.in .num{ opacity:1; transform:none; }
.js .core__tags .t{ transform:translateX(-16px); }
.js .core__tags .t.in{ transform:none; }
.js .core.in::after{ opacity:1; }
.js .core::after{ opacity:0; transition:opacity 1.1s var(--ease) .2s; }

a:focus-visible,button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }