@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --paper: #f4f1eb;
  --paper-2: #e9e4dc;
  --ink: #111318;
  --muted: #77736d;
  --burgundy: #9b1b2e;
  --burgundy-dark: #6e1020;
  --burgundy-bright: #c32d43;
  --line: rgba(17, 19, 24, .16);
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--paper); background: var(--burgundy); }

.noise {
  position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-dot, .cursor-ring { position: fixed; z-index: 120; pointer-events: none; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor-dot { width: 5px; height: 5px; background: var(--burgundy-bright); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(155,27,46,.7); transition: width .2s, height .2s, border-color .2s; }
.cursor-ring.active { width: 56px; height: 56px; border-color: var(--burgundy-bright); }

.site-header {
  position: fixed; z-index: 80; top: 0; left: 0; width: 100%; height: 88px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4vw;
  color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background .35s, color .35s, height .35s, border-color .35s;
}
.site-header.scrolled { height: 72px; color: var(--ink); background: rgba(244,241,235,.9); backdrop-filter: blur(16px); border-color: var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 34px; color: var(--burgundy-bright); }
.brand-type { display: flex; flex-direction: column; line-height: .85; font-family: "Space Grotesk", sans-serif; }
.brand-type b { font-size: 21px; letter-spacing: .04em; }
.brand-type small { margin-top: 6px; color: var(--burgundy-bright); font-size: 7px; letter-spacing: .48em; padding-left: .25em; }
.nav { display: flex; gap: 34px; font-size: 13px; font-weight: 600; }
.nav a { position: relative; }
.nav a::after { content:""; position:absolute; left:0; bottom:-7px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease); }
.nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.header-cta { display: flex; align-items: center; gap: 18px; border: 1px solid currentColor; border-radius: 999px; padding: 12px 17px; font-size: 12px; font-weight: 700; }
.header-cta span { color: var(--burgundy-bright); }

.hero { position: relative; min-height: 100svh; overflow: hidden; color: var(--paper); background: var(--ink); }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 48%, transparent 0 20%, rgba(17,19,24,.12) 48%, rgba(17,19,24,.62) 85%); pointer-events:none; }
.hero-grid { position:absolute; inset:0; opacity:.17; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:8vw 8vw; mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 75%,transparent); }
.hero-content { position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:130px 8vw 60px; }
.eyebrow, .section-kicker { display:flex; align-items:center; gap:13px; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:700; }
.eyebrow > span { width:38px; height:2px; background:var(--burgundy-bright); }
.hero-title { margin:38px 0 42px; max-width:1100px; font-family:"Space Grotesk",sans-serif; font-size:clamp(72px,11vw,176px); font-weight:500; letter-spacing:-.075em; line-height:.78; }
.hero-title .line { display:block; overflow:hidden; padding: .08em 0; }
.hero-title .line > span { display:block; transform:translateY(112%); animation:heroIn 1s .2s var(--ease) forwards; }
.hero-title .line:nth-child(2)>span { animation-delay:.35s; }
.accent-line { color:var(--burgundy-bright); font-style:italic; padding-left:9vw!important; }
@keyframes heroIn { to { transform:translateY(0); } }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; max-width:840px; margin-left:9vw; }
.hero-bottom p { width:min(470px,70vw); margin:0; color:#c8c6c1; font-size:clamp(16px,1.4vw,21px); line-height:1.55; }
.hero-bottom strong { color:#fff; }
.round-link { width:108px; aspect-ratio:1; border:1px solid rgba(255,255,255,.38); border-radius:50%; display:grid; place-content:center; text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.14em; transition:background .3s,color .3s,transform .3s; }
.round-link i { color:var(--burgundy-bright); font-style:normal; font-size:22px; margin-top:5px; }
.round-link:hover { background:var(--paper); color:var(--ink); transform:scale(1.08); }
.orbit-label { position:absolute; z-index:2; padding:8px 13px; border:1px solid rgba(255,255,255,.2); border-radius:999px; color:rgba(255,255,255,.55); font-size:9px; letter-spacing:.16em; backdrop-filter:blur(8px); }
.orbit-label-a { right:9%; top:30%; animation:floatA 6s ease-in-out infinite; }
.orbit-label-b { right:31%; bottom:17%; animation:floatA 7s 1s ease-in-out infinite reverse; }
@keyframes floatA { 50% { transform:translate3d(12px,-18px,0); } }
.scroll-note { position:absolute; z-index:3; right:4vw; bottom:48px; writing-mode:vertical-rl; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.42); font-size:8px; letter-spacing:.24em; }
.scroll-note span { width:1px; height:52px; background:linear-gradient(var(--burgundy-bright),transparent); }

.section-light { background:var(--paper); }
.section-ink { color:var(--paper); background:#17191f; }
.section-burgundy { color:var(--paper); background:var(--burgundy); }
.statement { min-height:92svh; padding:100px 8vw 120px; display:flex; flex-direction:column; justify-content:center; }
.section-kicker { color:#514e49; }
.section-kicker span { color:var(--burgundy); }
.section-kicker.light { color:#aaa7a0; }
.section-kicker.light span { color:var(--burgundy-bright); }
.statement-wrap { display:grid; grid-template-columns:1fr minmax(240px,25%); align-items:end; gap:8vw; margin-top:10vh; }
.statement-copy { max-width:1060px; margin:0; font-family:"Space Grotesk",sans-serif; font-size:clamp(42px,6.5vw,104px); line-height:1.02; letter-spacing:-.055em; }
.statement-copy .word { display:inline-block; overflow:hidden; margin-right:.18em; }
.statement-copy .word > span { display:inline-block; transform:translateY(105%); transition:transform .8s var(--ease); }
.statement-copy.visible .word > span { transform:translateY(0); }
.statement-note { border-top:1px solid var(--line); padding-top:20px; }
.statement-note p { color:#5e5b56; line-height:1.6; font-size:14px; }
.mini-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#fff; background:var(--burgundy); font-family:"Space Grotesk"; font-weight:700; }

.services { padding:110px 6vw 130px; }
.services-head { display:grid; grid-template-columns:1fr 1.5fr .7fr; align-items:end; gap:4vw; margin-bottom:90px; }
.section-title { margin:0; font-family:"Space Grotesk",sans-serif; font-size:clamp(62px,8vw,126px); font-weight:500; letter-spacing:-.07em; line-height:.83; }
.section-title em { color:var(--burgundy-bright); font-family:Georgia,serif; font-weight:400; }
.section-title.dark { color:var(--ink); }
.services-intro { max-width:240px; color:#9f9d98; line-height:1.6; }
.service-stack { perspective:1400px; }
.service-card { min-height:310px; display:grid; grid-template-columns:70px 150px 1fr .8fr; gap:3vw; align-items:center; padding:35px 25px; border-top:1px solid rgba(255,255,255,.15); transform-style:preserve-3d; transition:background .35s,border-color .35s; }
.service-card:last-child { border-bottom:1px solid rgba(255,255,255,.15); }
.service-card:hover { background:var(--burgundy); border-color:transparent; }
.service-no { align-self:start; color:#777; font:11px "Space Grotesk"; }
.service-icon { width:120px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:50%; transition:transform .45s var(--ease),background .35s; }
.service-card:hover .service-icon { transform:rotate(12deg) scale(1.08); background:rgba(255,255,255,.08); }
.service-icon svg { width:62%; fill:none; stroke:currentColor; stroke-width:1.5; }
.service-body h3 { margin:0 0 22px; font:500 clamp(34px,4.4vw,70px)/.95 "Space Grotesk"; letter-spacing:-.055em; }
.service-body p { max-width:500px; color:#aaa8a2; line-height:1.6; transition:color .3s; }
.service-card:hover .service-body p { color:#f4e9e9; }
.service-tags { display:flex; flex-wrap:wrap; gap:8px; align-self:end; justify-content:flex-end; }
.service-tags span { padding:8px 11px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#aaa8a2; font-size:10px; text-transform:uppercase; letter-spacing:.08em; transition:color .3s,border-color .3s; }
.service-card:hover .service-tags span { color:#fff; border-color:rgba(255,255,255,.38); }

.process { padding:120px 8vw 150px; }
.process-layout { display:grid; grid-template-columns:1fr 1fr; gap:10vw; margin-top:100px; }
.process-title-wrap { position:sticky; top:150px; align-self:start; }
.process-title-wrap > p { max-width:350px; margin-top:42px; color:var(--muted); line-height:1.7; }
.process-list { list-style:none; margin:0; padding:0; }
.process-list li { display:grid; grid-template-columns:60px 1fr; gap:25px; padding:34px 0; border-top:1px solid var(--line); }
.process-list li:last-child { border-bottom:1px solid var(--line); }
.process-list li > span { color:var(--burgundy); font:11px "Space Grotesk"; }
.process-list h3 { margin:0 0 10px; font:500 clamp(30px,4vw,56px) "Space Grotesk"; letter-spacing:-.05em; }
.process-list p { margin:0; color:var(--muted); }

.manifesto { min-height:80svh; position:relative; display:grid; place-items:center; overflow:hidden; color:var(--paper); background:var(--ink); }
.manifesto::before { content:""; position:absolute; width:70vw; aspect-ratio:1; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.manifesto::after { content:""; position:absolute; width:42vw; aspect-ratio:1; border:1px solid rgba(155,27,46,.35); border-radius:50%; }
.marquee { position:absolute; top:80%; left:0; z-index:1; width:max-content; display:flex; transform:rotate(-3deg); transform-origin:left center; background:var(--paper); color:var(--ink); }
.marquee > div { display:flex; gap:35px; align-items:center; white-space:nowrap; padding:16px 18px; animation:marquee 22s linear infinite; font:600 clamp(18px,2.2vw,34px) "Space Grotesk"; letter-spacing:.08em; }
.marquee i { color:var(--burgundy); font-style:normal; }
@keyframes marquee { to { transform:translateX(-100%); } }
.manifesto-center { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; }
.giant-mark { width:120px; color:var(--paper); filter:drop-shadow(0 20px 70px rgba(155,27,46,.6)); }
.manifesto-center p { margin:35px 0 0; font:400 clamp(38px,5vw,78px)/1 "Space Grotesk"; letter-spacing:-.05em; }
.manifesto-center strong { color:var(--burgundy-bright); font-family:Georgia,serif; font-style:italic; font-weight:400; }

.contact { min-height:100svh; padding:100px 6vw 38px; display:flex; flex-direction:column; }
.contact .section-kicker.light, .contact .section-kicker.light span { color:#f0cbd1; }
.contact-top { display:flex; align-items:center; justify-content:space-between; }
.social-pill { border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:11px 16px; font-size:12px; }
.social-pill span { margin-left:14px; }
.contact-title { margin:auto 0 70px; font:500 clamp(56px,9vw,144px)/.86 "Space Grotesk"; letter-spacing:-.075em; }
.contact-title em { color:#efb9c2; font-family:Georgia,serif; font-weight:400; }
.contact-actions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.35); }
.contact-link { min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; padding:30px 0; }
.contact-link + .contact-link { border-left:1px solid rgba(255,255,255,.35); padding-left:4vw; }
.contact-label { font-size:9px; letter-spacing:.18em; color:#efb9c2; }
.contact-link b { overflow:hidden; text-overflow:ellipsis; font:500 clamp(15px,1.6vw,23px) "Space Grotesk"; }
.contact-link i { width:42px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:50%; font-style:normal; transition:transform .3s,background .3s,color .3s; }
.contact-link:hover i { transform:rotate(45deg); background:#fff; color:var(--burgundy); }
footer { display:flex; align-items:end; justify-content:space-between; margin-top:55px; color:#efc5cc; font-size:11px; }
.footer-brand { color:#fff; }
.footer-brand .brand-mark { color:#fff; }
.footer-brand .brand-type small { color:#efc5cc; }
.back-top { text-transform:uppercase; letter-spacing:.12em; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .cursor-dot,.cursor-ring { display:none; }
  .site-header { height:72px; padding:0 20px; }
  .nav { display:none; }
  .header-cta { padding:10px 13px; font-size:10px; }
  .brand-type b { font-size:18px; }
  .hero-content { padding:120px 22px 55px; }
  .hero-title { font-size:clamp(68px,20vw,112px); line-height:.82; }
  .accent-line { padding-left:0!important; }
  .hero-bottom { margin-left:0; align-items:center; }
  .hero-bottom p { width:calc(100% - 100px); font-size:15px; }
  .round-link { width:84px; }
  .orbit-label-a { right:4%; top:25%; }
  .orbit-label-b { display:none; }
  .statement { padding:90px 22px; }
  .statement-wrap { grid-template-columns:1fr; margin-top:65px; }
  .statement-note { max-width:340px; margin-top:30px; }
  .services { padding:90px 22px; }
  .services-head { grid-template-columns:1fr; gap:36px; margin-bottom:65px; }
  .services-intro { max-width:330px; }
  .service-card { min-height:0; grid-template-columns:40px 74px 1fr; gap:18px; padding:30px 0; }
  .service-icon { width:70px; }
  .service-body h3 { font-size:32px; }
  .service-body p { font-size:13px; }
  .service-tags { grid-column:3; justify-content:flex-start; }
  .process { padding:90px 22px 110px; }
  .process-layout { grid-template-columns:1fr; margin-top:65px; }
  .process-title-wrap { position:static; }
  .process-list li { padding:26px 0; }
  .manifesto { min-height:68svh; }
  .marquee { top:82%; transform:rotate(-2deg); }
  .giant-mark { width:82px; }
  .contact { padding:80px 22px 30px; }
  .contact-title { margin:18vh 0 60px; font-size:clamp(52px,16vw,86px); }
  .contact-actions { grid-template-columns:1fr; }
  .contact-link + .contact-link { border-left:0; border-top:1px solid rgba(255,255,255,.35); padding-left:0; }
  footer { flex-wrap:wrap; gap:26px; }
  footer p { order:3; width:100%; }
}

@media (max-width: 520px) {
  .header-cta { font-size:0; gap:0; width:40px; height:40px; justify-content:center; padding:0; }
  .header-cta span { font-size:18px; }
  .hero-title { font-size:19vw; }
  .scroll-note { display:none; }
  .service-card { grid-template-columns:32px 1fr; }
  .service-icon { grid-column:2; width:68px; }
  .service-body { grid-column:2; }
  .service-tags { grid-column:2; }
  .contact-link { grid-template-columns:auto 1fr auto; gap:12px; }
  .contact-link b { font-size:13px; }
  .contact-link i { width:34px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .hero-title .line>span,.reveal,.statement-copy .word>span { transform:none; opacity:1; }
}