@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy9:#062A1A; --navy:#038141; --navy7:#0A6B39; --navy6:#12904C;
  --gold:#AA9755; --gold4:#BBA96E; --gold3:#CDBE8C; --gold1:#F3EDDD;
  --ink:#10271C; --ink7:#3E4A43; --ink5:#6E7A73;
  --paper:#FBF9F3; --paper2:#F1ECDD; --line:#E4DECA;
  --white:#fff;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --gutter:clamp(24px,6vw,96px);
  --section-y:clamp(88px,12vw,176px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;margin:0;color:var(--navy9)}
em{font-style:italic;color:var(--navy)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:block}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);letter-spacing:.03em;text-decoration:none;padding:17px 30px;border-radius:2px;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.btn-gold{background:var(--gold);color:var(--navy9)}
.btn-gold:hover{background:var(--gold4);transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost.dark{border-color:var(--navy9);color:var(--navy9)}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* ---- NAV ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);transition:background .4s,padding .4s,box-shadow .4s}
.nav.scrolled{background:rgba(251,249,243,.92);backdrop-filter:blur(10px);padding:14px var(--gutter);box-shadow:0 1px 0 var(--line)}
.nav .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav .logo img{height:40px;width:auto;transition:filter .4s}
.nav.scrolled .logo img{filter:none}
.nav:not(.scrolled) .logo img{filter:brightness(0) invert(1)}
.nav ul{display:flex;gap:40px;list-style:none;margin:0;padding:0}
.nav a.link{font:500 14px/1 var(--sans);text-decoration:none;color:#fff;transition:color .3s;letter-spacing:.01em}
.nav.scrolled a.link{color:var(--ink7)}
.nav a.link:hover{color:var(--gold)}
.nav .cta{display:none}
@media (max-width:860px){.nav ul{display:none}}

/* ---- HERO ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--navy9);overflow:hidden;padding-bottom:clamp(56px,8vw,110px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,42,26,.15) 0%,rgba(6,42,26,.55) 78%,rgba(6,42,26,.85) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:#fff;font-size:clamp(40px,6.4vw,92px);line-height:1.05;max-width:16ch}
.hero .lede{color:rgba(255,255,255,.78);font-size:clamp(16px,1.3vw,19px);max-width:46ch;margin:28px 0 0}
.hero .ctas{display:flex;gap:18px;margin-top:44px;flex-wrap:wrap}
.hero .scrolldown{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.6);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.hero .scrolldown .line{width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero .scrolldown .line{animation:none}}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-1{transition-delay:.1s}.reveal-2{transition-delay:.22s}.reveal-3{transition-delay:.34s}.reveal-4{transition-delay:.46s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- STATEMENT ---- */
.statement{padding:var(--section-y) 0;background:var(--paper)}
.statement .wrap{max-width:980px;text-align:center}
.statement p.big{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(26px,3.4vw,42px);line-height:1.42;color:var(--navy9)}
.statement .attr{margin-top:36px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink5)}

/* ---- SCALE / stats ---- */
.scale{padding:var(--section-y) 0;background:var(--navy9);color:#fff}
.scale .head{max-width:640px;margin-bottom:80px}
.scale .head h2{color:#fff;font-size:clamp(30px,3.6vw,48px)}
.scale .asof{margin-top:20px;font:500 13px/1.4 var(--sans);color:rgba(255,255,255,.45)}
.scalegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 40px}
@media (max-width:760px){.scalegrid{grid-template-columns:repeat(2,1fr);gap:48px 28px}}
.scalegrid .stat .v{font-family:var(--serif);font-size:clamp(34px,4.4vw,58px);color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.scalegrid .stat .v .unit{font-size:.42em;font-family:var(--sans);color:var(--gold3);margin-left:6px}
.scalegrid .stat .k{margin-top:14px;font:500 13px/1.5 var(--sans);color:rgba(255,255,255,.6);letter-spacing:.01em}

/* ---- TRAJECTORY ---- */
.traj{padding:var(--section-y) 0;background:var(--paper2)}
.traj .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media (max-width:900px){.traj .grid{grid-template-columns:1fr;gap:56px}}
.traj h2{font-size:clamp(28px,3.4vw,44px);max-width:14ch}
.traj p.copy{margin-top:26px;color:var(--ink7);font-size:17px;line-height:1.75;max-width:52ch}
.traj .chart{display:flex;flex-direction:column;gap:26px}
.traj .bar-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:18px}
.traj .bar-row .lbl{font:600 12px/1.3 var(--sans);letter-spacing:.04em;color:var(--ink7)}
.traj .bar-track{position:relative;height:30px}
.traj .bar-bg{position:absolute;inset:0;background:var(--line);border-radius:2px}
.traj .bar-fill{position:absolute;top:0;left:0;bottom:0;width:0;background:linear-gradient(90deg,var(--navy7),var(--navy));border-radius:2px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.traj .bar-fill.in{width:var(--w)}
.traj .bar-row .val{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:700 12px/1 var(--sans);color:#fff;letter-spacing:.02em}
.traj .bar-row.y24 .bar-fill{background:linear-gradient(90deg,var(--gold4),var(--gold))}
.traj .bar-row.y24 .val{color:var(--navy9)}
.traj .legend{display:flex;gap:24px;margin-top:6px;font:500 12px/1 var(--sans);color:var(--ink5)}
.traj .legend span{display:inline-flex;align-items:center;gap:8px}
.traj .legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.traj .legend .l24 i{background:var(--gold)}
.traj .legend .l25 i{background:var(--navy)}

/* ---- PLATFORMS ---- */
.platforms{background:var(--paper)}
.platforms .intro{padding:var(--section-y) 0 0;text-align:center}
.platforms .intro h2{font-size:clamp(30px,3.8vw,50px);max-width:16ch;margin:0 auto}
.platform-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;border-top:1px solid var(--line)}
.platform-row:last-child{border-bottom:1px solid var(--line)}
@media (max-width:860px){.platform-row{grid-template-columns:1fr}}
.platform-row .art{position:relative;aspect-ratio:4/3;overflow:hidden}
.platform-row .art canvas{position:absolute;inset:0;width:100%;height:100%}
.platform-row .txt{padding:clamp(40px,5vw,90px)}
.platform-row .num{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.06em}
.platform-row h3{font-size:clamp(24px,2.6vw,34px);margin:18px 0 18px}
.platform-row p{color:var(--ink7);font-size:16px;line-height:1.75;max-width:44ch}
.platform-row .meta{display:flex;gap:28px;margin:28px 0 30px}
.platform-row .meta div{font:600 13px/1 var(--sans);color:var(--ink5)}
.platform-row .meta b{display:block;font-family:var(--serif);font-size:24px;color:var(--navy9);margin-bottom:6px}
.platform-row.rev .txt{order:2}
.platform-row.rev .art{order:1}
@media (max-width:860px){.platform-row.rev .txt,.platform-row.rev .art{order:0}}
.platform-row .link{font:600 13px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.platform-row .link:hover{color:var(--gold)}

/* ---- CASE STUDY (Tamweely) ---- */
.case{padding:var(--section-y) 0;background:var(--navy9);color:#fff;position:relative;overflow:hidden}
.case .glow{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(170,151,85,.14),transparent 65%);top:-380px;right:-320px;pointer-events:none}
.case .top{display:flex;align-items:center;gap:22px;margin-bottom:34px}
.case .top img{height:34px;width:auto;background:#fff;padding:8px 14px;border-radius:2px}
.case h2{color:#fff;font-size:clamp(28px,3.6vw,46px);max-width:18ch}
.case p.copy{margin-top:24px;max-width:66ch;color:rgba(255,255,255,.72);font-size:17px;line-height:1.8}
.case .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:64px}
@media (max-width:760px){.case .metrics{grid-template-columns:repeat(2,1fr);gap:36px 24px}}
.case .metrics .v{font-family:var(--serif);font-size:clamp(28px,3.2vw,42px);color:var(--gold3);font-variant-numeric:tabular-nums}
.case .metrics .k{margin-top:10px;font:500 12.5px/1.5 var(--sans);color:rgba(255,255,255,.6)}

/* ---- CTA ---- */
.cta{padding:var(--section-y) 0;background:var(--paper);text-align:center}
.cta h2{font-size:clamp(30px,4vw,54px);max-width:18ch;margin:0 auto}
.cta p{margin:24px auto 0;max-width:50ch;color:var(--ink7);font-size:17px}
.cta .btns{margin-top:44px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.cta .btn-gold{color:var(--navy9)}

/* ---- FOOTER ---- */
footer{background:var(--navy9);color:rgba(255,255,255,.55);padding:56px 0 30px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
footer .brand{color:#fff;font-family:var(--serif);font-size:18px}
footer .addr{font:500 13px/1.6 var(--sans);color:rgba(255,255,255,.5)}
footer .bar{margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font:500 12px/1 var(--sans);color:rgba(255,255,255,.4)}