:root {
  --ink: #0b1217;
  --navy: #16385d;
  --blue: #3e67b1;
  --aqua: #72cdd0;
  --mint: #dff0ed;
  --paper: #f3f5f1;
  --white: #fff;
  --line: rgba(11, 18, 23, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.cursor-glow {
  position: fixed; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(114,205,208,.13), transparent 68%);
  transform: translate(-50%,-50%); pointer-events: none; z-index: 20;
}
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 88px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4vw; color: white; transition: .35s ease;
}
.site-header.scrolled {
  height: 70px; color: var(--ink); background: rgba(243,245,241,.92);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.logo { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.15; }
.logo small { display: block; margin-top: 4px; font-size: 7px; letter-spacing: .16em; font-weight: 500; opacity: .7; }
.logo-mark {
  display: grid; place-items: center; width: 38px; aspect-ratio: 1;
  border: 1px solid currentColor; font: 600 20px Georgia, serif;
}
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 13px; }
.site-nav a { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px;
  height: 1px; background: currentColor; transition: .25s;
}
.site-nav a:hover::after { right: 0; }
.nav-cta { border: 1px solid currentColor; padding: 12px 20px; }
.menu-toggle { display: none; background: none; border: 0; }

.hero { min-height: 100vh; display: grid; grid-template-columns: 59% 41%; position: relative; background: #071018; color: white; overflow: hidden; }
.hero-copy { align-self: center; padding: 120px 7vw 100px; position: relative; z-index: 2; }
.eyebrow { font-size: 11px; letter-spacing: .22em; font-weight: 600; color: var(--blue); margin: 0 0 26px; }
.hero .eyebrow { color: var(--aqua); }
h1, h2, h3, p { margin-top: 0; }
h1 { font: 300 clamp(48px, 6vw, 92px)/1.08 "Noto Sans SC", sans-serif; letter-spacing: -.05em; margin: 0; }
h1 span, h2 span { color: var(--aqua); }
.hero-intro { max-width: 560px; margin: 34px 0 40px; color: rgba(255,255,255,.64); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 38px; }
.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 44px;
  min-width: 220px; padding: 18px 22px; font-size: 13px; border: 1px solid transparent;
  transition: transform .25s, background .25s, color .25s;
}
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--aqua); color: var(--ink); }
.text-link { font-size: 13px; color: rgba(255,255,255,.74); }
.text-link span { margin-left: 10px; }
.hero-visual {
  background: linear-gradient(180deg, transparent 30%, rgba(7,16,24,.55)), url("assets/hero-city.jpg") center/cover;
  position: relative; clip-path: polygon(13% 0,100% 0,100% 100%,0 100%);
}
.hero-label { position: absolute; top: 120px; right: 4vw; font-size: 9px; letter-spacing: .2em; writing-mode: vertical-rl; }
.hero-orbit { width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; position: absolute; top: 45%; left: -20px; }
.hero-orbit::before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--aqua); top:20px; left:26px; box-shadow: 0 0 20px var(--aqua); }
.hero-index { position:absolute; bottom:-40px; right:37%; font-size:220px; font-weight:700; color:rgba(255,255,255,.025); }
.scroll-cue { position:absolute; bottom:38px; left:7vw; font-size:8px; letter-spacing:.2em; color:rgba(255,255,255,.4); display:flex; align-items:center; gap:12px; }
.scroll-cue span { width:42px; height:1px; background:var(--aqua); }

.section { padding: 130px 7vw; }
.statement { display:grid; grid-template-columns:16% 52% 32%; gap:0; align-items:start; background:var(--paper); }
.section-number { font-size:10px; letter-spacing:.18em; color:#738087; padding-top:9px; }
.statement h2, .section-heading h2, .difference h2, .team h2, .contact h2 {
  font: 300 clamp(40px,5vw,72px)/1.18 "Noto Sans SC", sans-serif; letter-spacing:-.045em; margin:0;
}
.statement-aside { padding:62px 0 0 50px; border-left:1px solid var(--line); }
.statement-aside p { font-size:14px; line-height:1.9; color:#59646a; margin-bottom:22px; }
.metrics { background:var(--white); display:grid; grid-template-columns:repeat(4,1fr); padding:70px 7vw; }
.metric { padding:20px 28px; border-left:1px solid var(--line); }
.metric:first-child { border-left:0; }
.metric strong { font-size:clamp(44px,5vw,72px); font-weight:400; letter-spacing:-.06em; }
.metric sup { color:var(--aqua); font-size:28px; }
.metric span { display:block; margin-top:10px; color:#6c767b; font-size:12px; }

.services { background:#e9eeea; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:70px; }
.section-heading h2 { font-size:clamp(44px,5vw,70px); }
.section-heading > p { width:38%; color:#627077; font-size:14px; line-height:1.9; margin:0; }
.service-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.service-card { position:relative; min-height:560px; padding:48px 40px; border-right:1px solid var(--line); transition:.35s; }
.service-card:last-child { border:0; }
.service-card:hover { background:var(--white); transform:translateY(-8px); box-shadow:0 24px 50px rgba(15,40,45,.08); }
.service-num { font-size:11px; color:#758087; }
.service-icon { margin:48px 0 38px; font-size:48px; color:var(--blue); font-weight:300; }
.service-card h3 { font-size:25px; font-weight:500; }
.service-card p { color:#69757a; font-size:13px; line-height:1.8; min-height:92px; }
.service-card ul { padding:25px 0 0; margin:0; list-style:none; border-top:1px solid var(--line); color:#3d4b51; font-size:12px; line-height:2.05; }

.difference { display:grid; grid-template-columns:43% 57%; min-height:900px; background:#0b1720; color:white; }
.difference-image { background:linear-gradient(rgba(10,24,33,.15),rgba(10,24,33,.5)),url("assets/digital.jpg") center/cover; display:flex; align-items:flex-end; padding:60px 5vw; }
.difference-image span { font-size:11px; letter-spacing:.24em; line-height:2.1; color:rgba(255,255,255,.7); }
.difference-copy { padding:115px 7vw; }
.difference-copy h2 { font-size:clamp(42px,4.5vw,68px); margin-bottom:70px; }
.difference-row { display:grid; grid-template-columns:55px 180px 1fr; gap:25px; border-top:1px solid rgba(255,255,255,.14); padding:28px 0; align-items:start; }
.difference-row b { color:var(--aqua); font-size:11px; }
.difference-row h3 { font-size:16px; font-weight:500; line-height:1.55; }
.difference-row p { font-size:12px; line-height:1.8; color:rgba(255,255,255,.5); }

.cases { background:#112d4e; color:white; }
.section-heading.light > p { color:rgba(255,255,255,.55); }
.cases .eyebrow { color:var(--aqua); }
.case-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:18px; }
.case { min-height:440px; padding:34px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.case::before { content:""; position:absolute; inset:0; transition:transform .6s; }
.case:hover::before { transform:scale(1.04); }
.case > * { position:relative; z-index:1; }
.case-featured::before {
  background-image: linear-gradient(145deg,rgba(19,60,92,.25),rgba(9,24,38,.88)),url("assets/water.jpg");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: auto, 118% auto;
}
.case-film::before { background:linear-gradient(145deg,rgba(15,50,70,.3),rgba(9,24,38,.92)),url("assets/hero-city.jpg") center/cover; }
.case-crisis::before { background:linear-gradient(145deg,rgba(34,74,103,.2),rgba(7,20,32,.94)),url("assets/digital.jpg") center/cover; }
.case-tag { width:max-content; padding:8px 12px; border:1px solid rgba(255,255,255,.4); font-size:10px; }
.case p { font-size:11px; color:var(--aqua); letter-spacing:.1em; }
.case h3 { font-size:27px; line-height:1.45; font-weight:400; }
.case > span { font-size:10px; color:rgba(255,255,255,.55); }
.team { background:#e5eeea; }
.team-heading { max-width:720px; margin-bottom:58px; }
.team-heading h2 { font-size:clamp(42px,5vw,68px); margin-bottom:20px; }
.team-heading > p:not(.eyebrow) { color:#657277; font-size:14px; line-height:1.9; }
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.team-card { display:grid; grid-template-columns:42% minmax(0,1fr); gap:34px; align-items:stretch; padding:26px; background:rgba(255,255,255,.72); border:1px solid rgba(11,18,23,.08); box-shadow:0 24px 60px rgba(23,49,54,.06); }
.team-photo { position:relative; background:white; padding:14px; min-height:430px; }
.team-photo::before { content:""; position:absolute; inset:34px -18px -18px 34px; border:1px solid var(--aqua); pointer-events:none; }
.team-photo img { display:block; width:100%; height:100%; object-fit:cover; position:relative; filter:saturate(.82); }
.team-photo-founder img { object-position: center; }
.team-copy { position:relative; z-index:1; padding:28px 8px 16px; }
.team-copy h3 { display:flex; align-items:baseline; gap:16px; font-size:clamp(34px,4vw,56px); line-height:1.1; font-weight:300; letter-spacing:-.05em; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.team-copy h3 small { font-size:12px; letter-spacing:.12em; color:#8a969b; white-space:nowrap; }
.team-lead { font-size:17px; line-height:1.8; font-weight:500; }
.team-copy > p:not(.eyebrow,.team-lead) { color:#657277; font-size:13px; line-height:2; }
.expertise { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.expertise span { padding:10px 14px; background:rgba(255,255,255,.78); font-size:11px; }

.contact { min-height:650px; background:#0a141c; color:white; padding:110px 7vw; display:grid; grid-template-columns:62% 38%; }
.contact h2 { font-size:clamp(46px,5.5vw,78px); margin-bottom:35px; }
.contact-copy > p:not(.eyebrow) { color:rgba(255,255,255,.54); font-size:14px; line-height:1.9; max-width:620px; }
.button-light { margin-top:25px; background:var(--aqua); color:var(--ink); }
.contact-details { padding:40px 0 0 70px; border-left:1px solid rgba(255,255,255,.14); }
.contact-details div { padding:0 0 25px; margin-bottom:25px; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-details span { display:block; color:var(--aqua); font-size:9px; letter-spacing:.2em; margin-bottom:9px; }
.contact-details a,.contact-details p { font-size:14px; margin:0; color:rgba(255,255,255,.8); }
footer { display:flex; align-items:center; justify-content:space-between; padding:35px 4vw; background:#060d12; color:rgba(255,255,255,.45); font-size:9px; letter-spacing:.08em; }
.logo-footer { color:white; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s ease,transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .cursor-glow { display:none; }
  .site-header { height:70px; }
  .menu-toggle { display:block; width:36px; height:36px; position:relative; z-index:2; }
  .menu-toggle span { position:absolute; width:22px; height:1px; background:currentColor; left:7px; transition:.3s; }
  .menu-toggle span:first-child { top:13px; }.menu-toggle span:last-child { top:21px; }
  .menu-toggle.active span:first-child { top:17px; transform:rotate(45deg); }.menu-toggle.active span:last-child { top:17px; transform:rotate(-45deg); }
  .site-nav { position:fixed; inset:0; background:#0a141c; color:white; flex-direction:column; justify-content:center; font-size:22px; transform:translateX(100%); transition:.35s; }
  .site-nav.open { transform:none; }
  .nav-cta { margin-top:20px; }
  .hero { grid-template-columns:1fr; min-height:820px; }
  .hero-copy { padding:150px 7vw 120px; background:linear-gradient(90deg,#071018 0%,rgba(7,16,24,.93) 65%,rgba(7,16,24,.5)); }
  .hero-visual { position:absolute; inset:0; clip-path:none; opacity:.45; }
  h1 { font-size:clamp(48px,12vw,76px); }
  .statement { grid-template-columns:1fr; gap:40px; }
  .statement-aside { padding:0; border:0; }
  .metrics { grid-template-columns:1fr 1fr; }
  .metric:nth-child(3) { border-left:0; border-top:1px solid var(--line); }.metric:nth-child(4) { border-top:1px solid var(--line); }
  .section-heading { align-items:start; gap:40px; }
  .section-heading > p { width:45%; }
  .service-list { grid-template-columns:1fr; }
  .service-card { min-height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .difference { grid-template-columns:1fr; }
  .difference-image { min-height:550px; }
  .case-grid { grid-template-columns:1fr; }
  .case { min-height:400px; }
  .team-grid { grid-template-columns:1fr; }
  .team-card { grid-template-columns:40% minmax(0,1fr); }
  .contact { grid-template-columns:1fr; gap:60px; }
  .contact-details { padding:0; border-left:0; }
}

@media (max-width: 620px) {
  .section { padding:90px 6vw; }
  .logo small { display:none; }
  .hero-copy { padding-left:6vw; padding-right:6vw; }
  h1 { font-size:46px; }
  .hero-intro { font-size:14px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:24px; }
  .statement h2,.section-heading h2,.difference h2,.team h2,.contact h2 { font-size:40px; }
  .metrics { grid-template-columns:1fr; padding:45px 6vw; }
  .metric,.metric:nth-child(3) { border-left:0; border-top:1px solid var(--line); padding:25px 0; }
  .metric:first-child { border-top:0; }
  .section-heading { display:block; margin-bottom:45px; }
  .section-heading > p { width:100%; margin-top:24px; }
  .service-card { padding:40px 20px; }
  .service-icon { margin:35px 0; }
  .difference-image { min-height:420px; }
  .difference-copy { padding:80px 6vw; }
  .difference-row { grid-template-columns:35px 1fr; }
  .difference-row p { grid-column:2; }
  .team-card { grid-template-columns:1fr; padding:18px; }
  .team-photo { min-height:420px; }
  .team-copy { padding:24px 4px 10px; }
  .team-copy h3 { display:block; font-size:42px; }
  .team-copy h3 small { display:block; margin-top:8px; }
  .contact { padding:90px 6vw; }
  footer { flex-direction:column; gap:25px; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}