:root {
  --bg: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #86868b;
  --line: rgba(29,29,31,.12);
  --dark: #050505;
  --white: #f5f5f7;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.site-header {
  position: fixed; inset: 0 0 auto; height: 72px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px,4vw,64px);
  background: rgba(245,245,247,.72); backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(29,29,31,.06);
}
.brand { font-size: 18px; letter-spacing: -.03em; font-weight: 500; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.desktop-nav a { opacity: .78; transition: opacity .3s ease, transform .3s var(--ease); }
.desktop-nav a:hover { opacity: 1; transform: translateY(-1px); }
.nav-cta { background: var(--ink); color: white; padding: 11px 16px; border-radius: 999px; opacity: 1 !important; }
.nav-cta span { margin-left: 8px; }
.menu-toggle { display:none; border:0; background:none; width:42px; height:42px; position:relative; }
.menu-toggle span { position:absolute; left:10px; width:22px; height:1.5px; background:var(--ink); transition:.35s var(--ease); }
.menu-toggle span:first-child { top:17px; }
.menu-toggle span:last-child { top:25px; }

.scroll-progress { position:fixed; top:0; left:0; width:100%; height:2px; z-index:100; transform-origin:left; background:var(--ink); scale: var(--progress,0) 1; }

.hero {
  min-height: 100svh; position:relative; display:grid; place-items:center; overflow:hidden;
  isolation:isolate;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 47%, rgba(255,255,255,.95), rgba(245,245,247,0) 48%);
  z-index:-1;
}
.orb {
  position:absolute; width:min(72vw,720px); aspect-ratio:1; border-radius:50%;
  left:50%; top:52%; transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0 7%, rgba(255,255,255,.15) 18%, transparent 34%),
    radial-gradient(circle at 65% 68%, rgba(220,225,230,.7), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.65), rgba(200,205,210,.12) 60%, rgba(255,255,255,.8) 100%);
  box-shadow: inset -35px -50px 100px rgba(120,125,135,.14), inset 30px 25px 70px rgba(255,255,255,.95), 0 30px 100px rgba(100,100,100,.08);
  filter: blur(.1px);
  animation: orbFloat 8s ease-in-out infinite alternate;
  z-index:-1;
}
.orb::before {
  content:""; position:absolute; inset:8%; border-radius:50%;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 0 35px rgba(255,255,255,.8);
}
.orb::after {
  content:""; position:absolute; width:70%; height:18%; left:15%; top:45%;
  border-radius:50%; border:2px solid rgba(255,255,255,.7);
  transform:rotate(-28deg); filter:blur(1px);
}
.orb-glow { position:absolute; inset:-10%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.7), transparent 65%); filter:blur(30px); }
.orb-highlight { position:absolute; width:28%; height:12%; left:20%; top:18%; border-radius:50%; background:white; filter:blur(16px); transform:rotate(-28deg); opacity:.8; }
.orb-ring { position:absolute; inset:3%; border-radius:50%; border:1px solid rgba(180,185,190,.22); }

.hero-copy { text-align:center; position:relative; z-index:2; padding-top:70px; }
.eyebrow { font-size:11px; letter-spacing:.18em; font-weight:600; color:var(--muted); margin:0 0 24px; }
.hero h1 {
  font-size:clamp(58px,8.4vw,128px); line-height:.88; letter-spacing:-.065em;
  margin:0; font-weight:650;
}
.hero h1 em { font-style:normal; font-weight:400; }
.hero-sub { font-size:clamp(18px,2vw,25px); line-height:1.35; color:var(--muted); margin:32px 0 34px; letter-spacing:-.025em; }
.pill-button, .contact-button {
  display:inline-flex; align-items:center; gap:14px; padding:16px 24px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:16px; transition:transform .5s var(--ease), box-shadow .5s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.pill-button:hover, .contact-button:hover { transform:translateY(-4px) scale(1.015); box-shadow:0 18px 40px rgba(0,0,0,.18); }
.pill-button span, .contact-button span { transition:transform .5s var(--ease); }
.pill-button:hover span, .contact-button:hover span { transform:translateX(5px); }
.hero-meta { position:absolute; left:clamp(20px,4vw,64px); right:clamp(20px,4vw,64px); bottom:28px; display:flex; justify-content:space-between; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }

.section-inner { width:min(1240px, calc(100% - 48px)); margin:auto; padding:clamp(100px,13vw,190px) 0; }
.section-dark { background:var(--dark); color:var(--white); }
.statement { min-height:100svh; display:flex; align-items:center; }
.statement .section-inner { padding-top:18vh; padding-bottom:18vh; }
.statement-title, .section-heading h2, .approach h2, .contact h2 {
  font-size:clamp(52px,7.4vw,112px); line-height:.92; letter-spacing:-.065em; font-weight:550; margin:0;
}
.statement-title span, .section-heading h2 span, .approach h2 span, .contact h2 span { color:#7d7d82; }
.statement-copy { max-width:520px; font-size:clamp(18px,2vw,25px); line-height:1.4; color:#9a9a9f; margin:60px 0 0 auto; letter-spacing:-.02em; }

.services { background:var(--bg); }
.section-heading { margin-bottom:100px; }
.section-heading h2 { max-width:900px; }
.service-stack { border-top:1px solid var(--line); }
.service-card {
  display:grid; grid-template-columns:80px 1fr 50px; gap:30px; align-items:start;
  padding:44px 0; border-bottom:1px solid var(--line); transition:padding .6s var(--ease);
}
.service-card:hover { padding-left:18px; padding-right:18px; }
.service-number, .service-arrow { color:var(--muted); font-size:13px; }
.service-card h3 { font-size:clamp(30px,4vw,56px); letter-spacing:-.045em; margin:0 0 14px; font-weight:500; }
.service-card p { color:var(--muted); max-width:640px; font-size:18px; line-height:1.5; margin:0; }
.service-arrow { text-align:right; font-size:22px; transition:transform .5s var(--ease); }
.service-card:hover .service-arrow { transform:translate(5px,-5px); }

.work-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }
.work-card { min-height:520px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border-radius:28px; }
.work-card:nth-child(3) { grid-column:1/-1; min-height:430px; }
.work-visual { flex:1; padding:34px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; font-size:12px; letter-spacing:.1em; }
.work-visual strong { font-size:clamp(34px,5vw,76px); line-height:.9; letter-spacing:-.055em; font-weight:500; }
.work-a .work-visual { background:radial-gradient(circle at 70% 20%, #8d8d8d, #1d1d1d 58%, #050505); }
.work-b .work-visual { background:radial-gradient(circle at 25% 35%, #e9e9e9, #858585 45%, #202020); color:#111; }
.work-c .work-visual { background:linear-gradient(135deg, #f2f2f2, #777 45%, #101010); }
.work-info { background:#101010; padding:25px 30px 30px; }
.work-info span { color:#85858a; font-size:12px; }
.work-info h3 { margin:10px 0 0; font-size:22px; font-weight:450; letter-spacing:-.03em; }

.approach-grid { display:grid; grid-template-columns:.85fr 1fr; gap:12vw; }
.sticky-title { position:sticky; top:140px; align-self:start; }
.approach-steps { border-top:1px solid var(--line); }
.step { display:grid; grid-template-columns:70px 1fr; gap:25px; padding:48px 0; border-bottom:1px solid var(--line); }
.step > span { color:var(--muted); font-size:12px; }
.step h3 { font-size:38px; letter-spacing:-.04em; margin:0 0 12px; font-weight:500; }
.step p { max-width:520px; margin:0; color:var(--muted); font-size:18px; line-height:1.5; }

.big-type { padding:16vh 4vw; overflow:hidden; }
.big-type-line { font-size:clamp(60px,12vw,190px); line-height:.83; letter-spacing:-.075em; font-weight:550; white-space:nowrap; }
.big-type-line.right { text-align:right; color:#7d7d82; }

.contact { background:var(--bg); min-height:90svh; display:flex; align-items:center; }
.contact-inner { text-align:center; }
.contact h2 { margin-bottom:60px; }
.contact-button { font-size:clamp(16px,2vw,22px); padding:20px 28px; }
.contact-note { color:var(--muted); max-width:440px; margin:30px auto 0; line-height:1.5; }

.site-footer { padding:30px clamp(20px,4vw,64px); display:flex; justify-content:space-between; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border-top:1px solid var(--line); }

.reveal { opacity:0; transform:translateY(50px) scale(.985); filter:blur(5px); transition:opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); }
.reveal.visible { opacity:1; transform:none; filter:none; }

@keyframes orbFloat {
  from { transform:translate(-50%,-50%) rotate(-2deg) scale(.98); }
  to { transform:translate(-50%,-52%) rotate(2deg) scale(1.02); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-progress { animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { from { scale:0 1; } to { scale:1 1; } }
  }
}

@media (max-width: 800px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .hero { min-height:92svh; }
  .orb { width:112vw; top:52%; }
  .hero h1 { font-size:clamp(54px,14vw,90px); }
  .hero-meta { bottom:18px; }
  .section-inner { width:min(100% - 32px, 1240px); padding:100px 0; }
  .statement-title, .section-heading h2, .approach h2, .contact h2 { font-size:clamp(48px,13vw,78px); }
  .statement-copy { margin-left:0; margin-top:40px; }
  .service-card { grid-template-columns:40px 1fr 25px; gap:12px; padding:34px 0; }
  .service-card p { font-size:16px; }
  .work-grid { grid-template-columns:1fr; }
  .work-card, .work-card:nth-child(3) { min-height:460px; grid-column:auto; }
  .approach-grid { grid-template-columns:1fr; gap:70px; }
  .sticky-title { position:static; }
  .big-type { padding:100px 16px; }
  .big-type-line { white-space:normal; font-size:18vw; }
  .site-footer { flex-direction:column; gap:10px; }
  .mobile-menu {
    position:fixed; inset:72px 0 0; z-index:45; background:rgba(245,245,247,.96);
    backdrop-filter:blur(24px); display:flex; flex-direction:column; padding:30px 24px;
    transform:translateY(-110%); transition:transform .6s var(--ease);
  }
  .mobile-menu.open { transform:none; }
  .mobile-menu a { font-size:40px; letter-spacing:-.05em; padding:18px 0; border-bottom:1px solid var(--line); }
}


.contact-email {
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 14px;
}
.contact-email a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.noscript-booking {
  position: fixed;
  inset: auto 20px 20px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 14px 18px;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
}
.noscript-booking a {
  text-decoration: underline;
  text-underline-offset: 3px;
}