@font-face { font-family:"Barlow Condensed"; src:url("assets/barlow-condensed-400.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Barlow Condensed"; src:url("assets/barlow-condensed-700.ttf") format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Bebas Neue"; src:url("assets/bebas-neue-400.ttf") format("truetype"); font-weight:400; font-display:swap; }
:root { --navy:#0c2348; --ink:#102444; --ivory:#f2e7d3; --paper:#fbf8f1; --gold:#b78b45; --line:rgba(12,35,72,.2); --sans:Arial,Helvetica,sans-serif; --condensed:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --display:"Bebas Neue","Arial Narrow",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } body::before { content:""; position:fixed; inset:0; z-index:10; opacity:.16; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); } a { color:inherit; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:1rem; top:1rem; z-index:50; padding:.75rem 1rem; color:#fff; background:var(--navy); }
.site-header { position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:106px; padding:20px clamp(24px,4vw,70px); color:#fff; background:var(--navy); } .brand { display:inline-flex; width:148px; height:68px; overflow:hidden; } .brand img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) invert(1) contrast(1.7); mix-blend-mode:screen; } nav { display:flex; align-items:center; gap:clamp(22px,3vw,52px); font:700 1.1rem var(--condensed); letter-spacing:.16em; text-transform:uppercase; } nav a { text-decoration:none; } nav a:not(.nav-cta):hover { color:#e6c27f; } .nav-cta { padding:17px 21px; border:1px solid rgba(242,231,211,.8); } .nav-cta:hover { color:var(--navy); background:var(--ivory); } .menu-toggle { display:none; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:660px; background:var(--ivory); } .hero-copy { align-self:center; padding:clamp(65px,8vw,130px) clamp(30px,4.4vw,80px) 48px; } .eyebrow { margin:0 0 18px; font:700 .93rem var(--condensed); letter-spacing:.17em; text-transform:uppercase; } .hero h1,h2,h3 { margin:0; } .hero h1 { max-width:770px; font:400 clamp(4.4rem,7.5vw,8.7rem)/.78 var(--display); letter-spacing:.005em; text-transform:uppercase; } .hero-intro { max-width:580px; margin:32px 0; font-size:1.18rem; line-height:1.5; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:28px; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:58px; gap:24px; padding:19px 24px; border:1px solid transparent; font:700 1rem var(--condensed); letter-spacing:.13em; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:transform .2s,background-color .2s; } .button:hover { transform:translateY(-2px); } .button-dark { color:var(--ivory); background:var(--navy); } .button-light { color:var(--navy); background:var(--ivory); } .text-link { padding-bottom:5px; border-bottom:1px solid var(--ink); font:700 1rem var(--condensed); letter-spacing:.1em; text-decoration:none; text-transform:uppercase; } .hero-image { position:relative; min-height:540px; margin:0; overflow:hidden; background:#571d08; } .hero-image video { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(1.02); transition:transform .8s ease; } .hero-image:hover video { transform:scale(1.06); } .hero-image figcaption { position:absolute; bottom:13%; left:-22px; padding:28px 30px; border:1px solid var(--gold); color:var(--navy); background:var(--ivory); font:1.35rem/1.25 Georgia,serif; text-align:center; }
.signal-strip { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); background:var(--paper); } .signal-strip div { padding:26px clamp(18px,3vw,60px); border-right:1px solid var(--line); font:700 1.1rem var(--condensed); letter-spacing:.12em; text-transform:uppercase; } .signal-strip div:last-child { border:0; } .signal-strip span { display:inline-block; margin-right:13px; color:var(--gold); font-size:.75rem; vertical-align:middle; }
.hero-reel { background:linear-gradient(145deg,#092346,#071932); } .hero-reel-stage { position:absolute; inset:0; display:grid; place-items:center; perspective:1100px; background:radial-gradient(circle at 50% 52%,rgba(70,125,162,.4),transparent 52%); } .hero-reel-card { position:absolute; width:min(32vw,300px); aspect-ratio:9/14; padding:0; overflow:hidden; border:0; border-radius:4px; background:#06162d; box-shadow:0 24px 50px rgba(0,0,0,.42); cursor:pointer; transition:transform .6s cubic-bezier(.2,.75,.2,1),opacity .45s,filter .45s; } .hero-reel-card video { display:block; width:100%; height:100%; object-fit:cover; } .hero-reel-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,16,35,.15),rgba(3,16,35,.5)); } .hero-reel-card span { position:absolute; z-index:1; right:16px; bottom:18px; left:16px; color:#fff; font:700 .83rem var(--condensed); letter-spacing:.12em; text-align:center; text-transform:uppercase; } .hero-reel-card.is-active { z-index:3; transform:translateX(0) translateZ(70px); } .hero-reel-card.is-left { z-index:2; opacity:.78; filter:saturate(.75) brightness(.78); transform:translateX(-78%) rotateY(28deg) rotateZ(-4deg) scale(.83); } .hero-reel-card.is-right { z-index:2; opacity:.78; filter:saturate(.75) brightness(.78); transform:translateX(78%) rotateY(-28deg) rotateZ(4deg) scale(.83); } .hero-reel-card:focus-visible { outline:3px solid var(--gold); outline-offset:5px; } .hero-reel-control { position:absolute; z-index:5; top:50%; display:grid; width:46px; height:46px; place-items:center; padding:0; border:1px solid rgba(255,255,255,.7); color:#fff; background:rgba(7,25,50,.48); font-size:1.4rem; cursor:pointer; transform:translateY(-50%); } .hero-reel-control:hover { color:var(--navy); background:var(--ivory); } .hero-reel-prev { left:6%; } .hero-reel-next { right:6%; } .hero-reel figcaption { z-index:6; }
.site-header .brand { width:182px; height:76px; } .client-list { justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; } .client-list::-webkit-scrollbar { display:none; } .client-list img { flex:0 0 clamp(128px,11vw,178px); width:clamp(128px,11vw,178px); max-width:none; max-height:72px; height:72px; padding:0; filter:none; object-fit:cover; } .client-list img[src$="kahani.svg"] { padding:5px; filter:grayscale(1) contrast(1.25); object-fit:contain; }
.client-marquee { margin:62px 0 42px; padding:20px 0; overflow:hidden; border-block:1px solid var(--line); -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent); } .client-marquee .client-list { width:max-content; margin:0; padding:0; border:0; gap:48px; overflow:visible; animation:client-marquee 42s linear infinite; } .client-marquee:hover .client-list,.client-marquee:focus-within .client-list { animation-play-state:paused; } @keyframes client-marquee { to { transform:translateX(-50%); } }
.section-pad { padding:clamp(74px,11vw,165px) clamp(24px,6vw,110px); } .statement { background:var(--ivory); } .statement-grid { display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:clamp(45px,8vw,160px); } h2 { font:400 clamp(3.8rem,7vw,7.8rem)/.8 var(--display); letter-spacing:.005em; text-transform:uppercase; } .statement-copy { font-size:1.18rem; line-height:1.55; } .statement-copy p { margin-top:0; } .statement-copy ul { margin:28px 0 0; padding:20px 0 0; border-top:1px solid var(--line); list-style:none; } .statement-copy li { padding:11px 0; border-bottom:1px solid var(--line); } .statement-copy li::before { content:"—"; margin-right:16px; color:var(--gold); }
.leaks { background:var(--paper); } .section-heading { max-width:900px; } .section-heading h2 { font-size:clamp(3.7rem,6.5vw,7rem); } .leak-list { margin-top:68px; border-top:1px solid var(--line); } .leak { display:grid; grid-template-columns:90px minmax(180px,.8fr) minmax(280px,1.7fr); gap:20px; align-items:baseline; padding:31px 0; border-bottom:1px solid var(--line); } .leak span,.system-steps span { color:var(--gold); font-family:var(--condensed); font-weight:bold; letter-spacing:.12em; } .leak h3 { font:400 clamp(2.5rem,3.4vw,3.8rem)/.84 var(--display); text-transform:uppercase; } .leak p { max-width:620px; margin:0; font-size:1.08rem; line-height:1.5; }
.system { color:var(--ivory); background:var(--navy); } .system-heading { max-width:880px; } .system-steps { margin:76px 0 0; padding:0; border-top:1px solid rgba(242,231,211,.35); list-style:none; } .system-steps li { display:grid; grid-template-columns:110px 1fr; gap:30px; padding:30px 0; border-bottom:1px solid rgba(242,231,211,.35); } .system-steps h3 { font:400 clamp(2.8rem,4.2vw,4.7rem)/.84 var(--display); text-transform:uppercase; } .system-steps p { max-width:600px; margin:10px 0 0; color:#e8dfcf; font-size:1.1rem; line-height:1.5; }
.work { overflow:hidden; background:var(--ivory); } .client-list { display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,60px); margin:62px 0 42px; padding:20px 0; border-block:1px solid var(--line); } .client-list img { display:block; max-width:130px; max-height:46px; object-fit:contain; filter:grayscale(1) contrast(1.3); } .client-list span { font:700 1.2rem var(--condensed); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; } .work-rail { display:flex; gap:22px; width:100%; max-width:100%; padding:4px 8vw 30px 0; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scroll-snap-type:x mandatory; cursor:grab; will-change:scroll-position; } .work-rail::-webkit-scrollbar { display:none; } .work-rail.is-dragging { cursor:grabbing; user-select:none; } .video-card { width:min(28vw,360px); min-width:280px; scroll-snap-align:start; } .video-card-button { position:relative; width:100%; aspect-ratio:9/14; padding:0; overflow:hidden; border:0; color:#fff; background:var(--navy); text-align:left; cursor:pointer; } .video-card-button video { width:100%; height:100%; object-fit:cover; transition:transform .5s ease,filter .4s ease; } .video-card-button::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(7,25,50,.06) 35%,rgba(7,25,50,.82)); } .video-card-button:hover video,.video-card-button:focus-visible video { filter:saturate(1.1); transform:scale(1.04); } .video-card-button:focus-visible { outline:3px solid var(--gold); outline-offset:4px; } .video-card-overlay { position:absolute; z-index:1; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:23px; font-family:var(--condensed); font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .video-card-overlay span { font-size:.78rem; } .video-card-overlay strong { display:flex; align-items:center; justify-content:space-between; font-size:1.2rem; } .video-card-overlay b { display:grid; width:36px; height:36px; place-items:center; border:1px solid rgba(255,255,255,.75); border-radius:50%; font-size:1rem; } .dark-link { display:inline-block; margin-top:8px; }
.video-dialog { width:min(94vw,560px); max-height:94vh; padding:0; border:1px solid rgba(242,231,211,.5); color:var(--ivory); background:var(--navy); } .video-dialog::backdrop { background:rgba(4,13,28,.88); backdrop-filter:blur(5px); } .video-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 18px; } .video-dialog-bar p { margin:0; font:700 1rem var(--condensed); letter-spacing:.1em; text-transform:uppercase; } .dialog-close { padding:8px; border:0; color:var(--ivory); background:transparent; font:700 .9rem var(--condensed); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; } .dialog-close:focus-visible { outline:2px solid var(--gold); } .dialog-video { display:block; width:auto; max-width:100%; height:min(72vh,760px); margin:auto; background:#000; } .video-dialog > p { margin:0; padding:13px 18px 18px; color:#e8dfcf; font-size:.88rem; }
.audit { display:grid; grid-template-columns:1fr 1fr; min-height:620px; color:var(--ivory); background:var(--navy); } .audit-copy { padding:clamp(70px,9vw,150px) clamp(25px,6vw,110px); } .audit-copy h2 { font-size:clamp(4rem,6.5vw,7rem); } .audit-copy > p:not(.eyebrow) { max-width:590px; margin:30px 0 0; color:#e8dfcf; font-size:1.15rem; line-height:1.55; } .audit-copy .fine-print { color:#e6c27f; font-size:.95rem; } .audit-form { display:grid; align-content:center; gap:20px; padding:clamp(55px,8vw,110px) clamp(25px,6vw,100px); background:#102c58; } .audit-form label { display:grid; gap:8px; font:700 .95rem var(--condensed); letter-spacing:.13em; text-transform:uppercase; } input,select,textarea { width:100%; min-height:48px; padding:12px; border:1px solid rgba(242,231,211,.62); border-radius:0; color:var(--ivory); background:transparent; font:16px var(--sans); } option { color:var(--ink); } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { outline:2px solid #e6c27f; outline-offset:2px; } .form-note { margin:0; color:#d3c7b1; font-size:.85rem; line-height:1.45; }
.honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.site-footer { display:grid; grid-template-columns:1.2fr 1fr auto auto; align-items:end; gap:30px; padding:46px clamp(24px,4vw,70px); color:var(--ivory); background:#071932; } .site-footer p { margin:0; line-height:1.5; } .site-footer > a:not(.brand) { font-family:var(--condensed); font-weight:bold; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.privacy-page { max-width:820px; min-height:100vh; margin:0 auto; padding:72px 28px; } .privacy-page .text-link { display:inline-block; margin-bottom:72px; } .privacy-page h1 { margin-bottom:28px; font:400 clamp(4rem,9vw,7rem)/.8 var(--display); text-transform:uppercase; } .privacy-page h2 { margin-top:54px; font-size:clamp(2.5rem,5vw,4rem); } .privacy-page p { max-width:700px; font-size:1.1rem; line-height:1.65; } .privacy-page a { color:inherit; } .privacy-updated { margin-top:56px; color:rgba(16,36,68,.68); font-size:.9rem!important; }
.reveal { animation:rise .7s both; } @keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:800px) { .site-header { min-height:80px; padding:14px 22px; } .brand { width:120px; } .menu-toggle { display:block; border:0; color:var(--ivory); background:transparent; font:700 .95rem var(--condensed); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; } nav { position:absolute; top:80px; right:0; left:0; display:none; align-items:flex-start; padding:25px 22px; border-top:1px solid rgba(242,231,211,.25); background:var(--navy); } nav.is-open { display:flex; flex-direction:column; } .nav-cta { width:100%; text-align:center; } .hero { grid-template-columns:1fr; } .hero-copy { padding-top:70px; } .hero h1 { font-size:clamp(5rem,21vw,7.8rem); } .hero-image { min-height:470px; } .hero-image figcaption { bottom:20px; left:18px; padding:19px 22px; font-size:1.1rem; } .signal-strip { grid-template-columns:repeat(2,1fr); } .signal-strip div:nth-child(2) { border-right:0; } .signal-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); } .statement-grid,.audit { grid-template-columns:1fr; } .statement-grid { gap:38px; } .leak { grid-template-columns:48px 1fr; } .leak p { grid-column:2; } .system-steps li { grid-template-columns:54px 1fr; } .client-list { justify-content:flex-start; overflow:auto; padding-block:16px; } .client-list img { max-width:110px; } .work-rail { overflow-x:auto; width:calc(100% + 40px); margin-right:-40px; padding-right:40px; scroll-snap-type:x mandatory; scrollbar-width:none; transform:none!important; } .work-rail::-webkit-scrollbar { display:none; } .video-card { width:74vw; min-width:74vw; scroll-snap-align:start; } .site-footer { grid-template-columns:1fr 1fr; align-items:start; } .site-footer .brand { grid-column:1/-1; } }
@media (max-width:480px) { .section-pad { padding-inline:20px; } .hero-copy { padding-inline:22px; } .hero-actions { gap:20px; } .button { width:100%; } .signal-strip div { padding:20px; font-size:.92rem; } .work-intro { margin-top:10px; } .video-card { width:78vw; min-width:78vw; } .site-footer { grid-template-columns:1fr; } }
@media (max-width:800px) { .hero-reel-card { width:min(50vw,260px); } .hero-reel-card.is-left { transform:translateX(-68%) rotateY(28deg) rotateZ(-4deg) scale(.78); } .hero-reel-card.is-right { transform:translateX(68%) rotateY(-28deg) rotateZ(4deg) scale(.78); } .hero-reel-prev { left:4%; } .hero-reel-next { right:4%; } }
@media (max-width:800px) { .site-header .brand { width:140px; height:68px; } .client-marquee { margin:44px 0 34px; } .client-marquee .client-list { gap:34px; overflow:visible; animation-duration:34s; } .client-marquee .client-list img { flex-basis:132px; width:132px; height:64px; } }

.client-marquee { padding:28px 0; }
.client-marquee .client-list { gap:28px; }
.client-marquee .client-list img,
.client-marquee .client-list img[src$="kahani.svg"] { flex:0 0 176px; width:176px; height:98px; max-height:none; padding:12px; border:1px solid rgba(12,35,72,.14); background:#fff; box-shadow:0 10px 22px rgba(12,35,72,.08); filter:none!important; object-fit:contain; }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:4px 0 64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.proof-card { min-height:280px; padding:34px clamp(22px,3vw,42px); border-right:1px solid var(--line); }
.proof-card:last-child { border-right:0; }
.proof-client { margin:0 0 28px; color:var(--gold); font:700 .9rem var(--condensed); letter-spacing:.14em; text-transform:uppercase; }
.proof-card h3 { margin-bottom:22px; font:400 clamp(2.4rem,3.4vw,3.6rem)/.85 var(--display); text-transform:uppercase; }
.proof-card p:not(.proof-client) { margin:0 0 14px; font-size:1rem; line-height:1.5; }
.proof-card strong { color:var(--navy); }
.operator { background:#e8dcc7; }
.operator-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(48px,9vw,160px); align-items:end; }
.operator-grid > div { max-width:590px; font-size:1.18rem; line-height:1.58; }
.operator-grid > div p:first-child { margin-top:0; }
.operator-grid > div p:last-child { margin-bottom:0; color:var(--navy); }
@media (max-width:800px) {
  .client-marquee { margin-top:38px; padding:22px 0; }
  .client-marquee .client-list { gap:20px; }
  .client-marquee .client-list img,
  .client-marquee .client-list img[src$="kahani.svg"] { flex-basis:148px; width:148px; height:84px; padding:10px; }
  .proof-grid { grid-template-columns:1fr; margin-bottom:46px; }
  .proof-card { min-height:0; padding:30px 0; border-right:0; border-bottom:1px solid var(--line); }
  .proof-card:last-child { border-bottom:0; }
  .operator-grid { grid-template-columns:1fr; gap:38px; }
}