:root {
  --ink: #11110f;
  --paper: #f4f0e8;
  --paper-2: #ebe5d9;
  --cobalt: #3159ff;
  --cobalt-dark: #1735bd;
  --tomato: #ff5d45;
  --butter: #f5dfa0;
  --purple: #4d2d62;
  --line: rgba(17,17,15,.14);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --shadow: 0 24px 80px rgba(28, 22, 12, .16);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--cobalt); color: #fff; }

.shell { width: min(1380px, calc(100% - 72px)); margin-inline: auto; }
.section-pad { padding: 130px 0; }
.skip-link { position: fixed; left: 12px; top: -70px; background: #fff; z-index: 999; padding: 12px 18px; border-radius: 999px; }
.skip-link:focus { top: 12px; }

.section-label {
  margin: 0 0 24px;
  color: var(--cobalt);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-label.light { color: #b6c4ff; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: var(--serif); }
em { font-weight: 400; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(244,240,232,.84);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px);
  transition: border-color .25s ease, background .25s ease;
}
.site-header.scrolled { border-color: var(--line); background: rgba(244,240,232,.94); }
.nav-shell { min-height: 86px; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .065em; }
.brand-tagline { color: var(--cobalt); font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-top: 4px; }
.desktop-nav { display: flex; gap: 34px; margin-left: auto; }
.desktop-nav a { font-size: 12px; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; position: relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:var(--ink); transition:right .2s ease; }
.desktop-nav a:hover::after { right:0; }
.desktop-nav a.active, .mobile-menu a.active { color: var(--cobalt); }
.desktop-nav a.active::after { right:0; background:var(--cobalt); }

.pill { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:15px 23px; font-size:13px; font-weight:700; letter-spacing:.025em; transition:transform .2s ease, background .2s ease; }
.pill:hover { transform: translateY(-2px); }
.pill span { transition: transform .2s ease; }
.pill:hover span { transform: translate(2px,-2px); }
.pill-primary { background: var(--cobalt); color:#fff; }
.pill-primary:hover { background: var(--cobalt-dark); }
.pill-light { background:#fff; color:var(--ink); }
.nav-cta { margin-left: 6px; }
.text-link { display:inline-flex; align-items:center; gap:10px; color:var(--cobalt); text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:12px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-link.light { color:#fff; }

.menu-toggle { display:none; margin-left:auto; width:44px; height:44px; border:0; border-radius:50%; background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:6px; }
.menu-toggle span { width:22px; height:2px; background:var(--ink); transition:transform .2s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }
.mobile-menu { display:none; padding:12px 36px 30px; border-top:1px solid var(--line); }
.mobile-menu.open { display:flex; flex-direction:column; }
.mobile-menu > a:not(.pill) { padding:16px 0; border-bottom:1px solid var(--line); font-size:18px; }
.mobile-menu .pill { margin-top:20px; }

.hero { position:relative; padding:175px 0 48px; min-height: 880px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:74px; position:relative; z-index:2; }
.hero-copy h1 { font-size:clamp(58px,6.7vw,105px); line-height:1.03; letter-spacing:-.045em; font-weight:500; margin-bottom:34px; max-width:760px; }
.hero-copy h1 em { display:block; color:var(--cobalt); }
.kicker { display:flex; align-items:center; gap:12px; margin-bottom:28px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; }
.kicker span { width:38px; height:2px; background:var(--cobalt); }
.hero-lede { max-width:610px; font-size:18px; line-height:1.65; color:#3d3b36; }
.hero-actions { display:flex; gap:28px; align-items:center; margin-top:34px; }
.hero-proof { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:45px; font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#66625b; }
.hero-proof i { width:3px; height:3px; border-radius:50%; background:var(--tomato); }
.hero-scene { position:relative; min-height:630px; }
.hero-frame { position:absolute; inset:25px 0 30px 40px; border-radius:320px 320px 34px 34px; overflow:hidden; box-shadow:var(--shadow); }
.hero-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(19,18,16,.16)); }
.hero-frame img { width:100%; height:100%; object-fit:cover; }
.floating-note { position:absolute; background:#fffdf8; box-shadow:0 16px 50px rgba(31,24,13,.18); z-index:2; }
.note-one { left:0; bottom:77px; width:210px; padding:24px 26px 26px; transform:rotate(-4deg); }
.note-one .scribble { color:var(--tomato); font-family:'Caveat',var(--serif); font-weight:600; font-size:28px; }
.note-one strong { display:block; font-family:var(--serif); font-size:23px; line-height:1.08; margin-top:5px; font-weight:500; }
.note-two { right:-22px; top:48px; width:195px; padding:22px; background:var(--butter); transform:rotate(3deg); }
.note-two small { display:block; letter-spacing:.13em; font-size:9px; font-weight:700; margin-bottom:13px; }
.note-two strong { font-family:var(--serif); font-size:20px; line-height:1.18; font-weight:500; }
.studio-stamp { position:absolute; right:6px; bottom:8px; width:126px; height:126px; color:var(--cobalt); z-index:3; }
.studio-stamp svg { width:100%; height:100%; animation:spin 20s linear infinite; fill:currentColor; }
.studio-stamp text { font:700 8px var(--sans); letter-spacing:2.1px; }
.stamp-center { position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:22px; font-weight:700; line-height:.85; }
.stamp-center span { font-size:9px; letter-spacing:.12em; }
@keyframes spin { to { transform:rotate(360deg); } }
.hero-orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.8; }
.orb-one { width:420px; height:420px; background:#dfe5ff; left:-160px; top:120px; }
.orb-two { width:300px; height:300px; background:#ffe0d7; right:-120px; bottom:100px; }
.hero-marquee { margin-top:100px; overflow:hidden; border-block:1px solid var(--line); }
.marquee-track { min-width:max-content; display:flex; gap:25px; align-items:center; padding:17px 0; animation:marquee 30s linear infinite; font-size:11px; text-transform:uppercase; letter-spacing:.15em; font-weight:700; }
.marquee-track b { color:var(--cobalt); }
@keyframes marquee { to { transform:translateX(-50%); } }

.manifesto { background:var(--ink); color:var(--paper); }
.manifesto-grid { display:grid; grid-template-columns:250px 1fr; gap:80px; }
.manifesto-copy { max-width:940px; }
.manifesto h2 { font-size:clamp(52px,6vw,94px); font-weight:400; line-height:1.04; letter-spacing:-.035em; margin-bottom:42px; }
.manifesto h2 em { font-style:italic; font-weight:600; color:var(--cobalt); }
.manifesto-copy > p { font-size:clamp(22px,2.5vw,34px); line-height:1.38; color:#cfcac0; max-width:900px; }
.manifesto-copy .manifesto-strong { color:#fff; font-family:var(--serif); font-style:italic; font-size:clamp(34px,4vw,60px); margin:42px 0 0; }

.projects { padding:140px 0; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:end; margin-bottom:80px; }
.section-heading h2,.studio-heading h2,.founder-title h2 { font-size:clamp(48px,5.2vw,78px); line-height:1; letter-spacing:-.035em; font-weight:500; margin:0; }
.section-heading h2 em,.studio-heading h2 em,.founder-title h2 em { color:var(--cobalt); }
.section-intro { font-size:17px; line-height:1.65; color:#57534c; max-width:500px; }
.project { width:min(1510px, calc(100% - 36px)); margin:0 auto 34px; min-height:760px; border-radius:38px; display:grid; grid-template-columns:.8fr 1.2fr; overflow:hidden; }
.project-copy { padding:86px 68px; display:flex; flex-direction:column; justify-content:center; }
.project-index { font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; opacity:.75; margin-bottom:34px; font-family:var(--sans); }
.project h3 { font-size:clamp(42px,4vw,68px); line-height:1; letter-spacing:-.03em; font-weight:500; margin-bottom:28px; }
.project-copy > p:not(.project-index) { font-size:17px; line-height:1.62; max-width:540px; opacity:.82; }
.project-tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:28px 0 38px; }
.project-tags li { border:1px solid currentColor; border-radius:999px; padding:8px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; opacity:.75; }
.project-visual { min-width:0; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.project-threadline { background:#11152a; color:#fff; }
.threadline-visual { background:radial-gradient(circle at 50% 50%,#5864ff 0,#24284c 38%,#0b0e1c 76%); padding:50px; }
.threadline-visual img { width:100%; max-height:670px; object-fit:contain; border-radius:18px; box-shadow:0 28px 70px rgba(0,0,0,.42); }
.project-kindred { background:#f2e8df; color:#402b47; }
.kindred-visual { background:linear-gradient(135deg,#f9f3ea,#eadbd2); flex-direction:column; gap:24px; padding:60px; }
.kindred-visual img { max-width:540px; width:84%; border-radius:28px; box-shadow:0 25px 80px rgba(73,45,55,.16); }
.kindred-caption { letter-spacing:.2em; font-size:11px; color:#b97c68; font-weight:700; }
.project-sportpharm { background:#081c36; color:#fff; }
.sportpharm-visual { background:radial-gradient(circle at 70% 30%,rgba(55,123,255,.45),transparent 35%),linear-gradient(145deg,#06162b,#0f2b53); align-content:center; flex-direction:column; padding:50px; }
.sportpharm-visual img { width:100%; max-width:560px; border-radius:18px; box-shadow:0 28px 70px rgba(0,0,0,.5); }
.project-pippin { background:#fbf1df; color:#56371f; }
.pippin-visual { padding:38px; background:linear-gradient(150deg,#fff8eb,#f0dbc0); }
.pippin-visual img { width:100%; max-height:680px; object-fit:contain; border-radius:24px; box-shadow:0 24px 70px rgba(90,56,30,.18); }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:34px; }
.mini-project { min-height:390px; border-radius:28px; padding:36px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease; overflow:hidden; }
.mini-project:hover { transform:translateY(-6px); }
.mini-project img { width:100%; max-height:150px; object-fit:contain; object-position:left center; }
.mini-project p { margin-bottom:8px; text-transform:uppercase; font-size:10px; letter-spacing:.14em; font-weight:700; }
.mini-project h3 { margin-bottom:10px; font-size:31px; font-weight:500; }
.mini-project span { font-size:14px; line-height:1.45; }
.mini-num { font:italic 70px var(--serif)!important; opacity:.25; }
.mini-blue { background:var(--cobalt); color:#fff; }
.mini-cyan { background:#d7f6ff; color:#043a4c; }
.mini-navy { background:#e8eefb; color:#071d49; }
.mini-purple { background:var(--purple); color:#f3e9fb; }
.mini-amber { background:#fbead0; color:#5c3a12; }
.mini-teal { background:#dcf3ea; color:#0b3d2c; }

.process { background:var(--paper-2); }
.process-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:110px; }
.process-sticky { position:sticky; top:145px; align-self:start; }
.process-sticky h2 { font-size:clamp(48px,5vw,76px); line-height:1; font-weight:500; letter-spacing:-.035em; }
.process-sticky h2 em { color:var(--cobalt); }
.process-sticky > p:not(.section-label) { font-size:17px; line-height:1.65; color:#57534c; max-width:470px; }
.hand-arrow { width:130px; opacity:.5; margin:35px 0 0 60px; }
.process-list { list-style:none; margin:0; padding:0; }
.process-list li { display:grid; grid-template-columns:70px 1fr; gap:35px; padding:46px 0; border-top:1px solid var(--line); }
.process-list li:last-child { border-bottom:1px solid var(--line); }
.process-list > li > span { width:54px; height:54px; border:1px solid var(--cobalt); border-radius:50%; display:grid; place-items:center; color:var(--cobalt); font:italic 15px var(--serif); }
.process-list li div > p:first-child { text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; color:var(--cobalt); }
.process-list h3 { font-size:37px; line-height:1.1; font-weight:500; margin-bottom:13px; }
.process-list li div > p:last-child { font-size:16px; line-height:1.6; color:#57534c; max-width:610px; }

/* ---------- Featured work (homepage compact grid) ---------- */
.featured { padding:110px 0 130px; }
.featured-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.featured-card { background:rgba(255,255,255,.4); border-left:1px solid var(--line); position:relative; display:block; transition:background .25s ease; }
.featured-card:last-child { border-right:1px solid var(--line); }
.featured-card:hover { background:#fff; }
.featured-image { aspect-ratio:1.1; overflow:hidden; }
.featured-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.featured-card:hover .featured-image img { transform:scale(1.03); }
.featured-meta { min-height:200px; padding:26px 24px 60px; position:relative; }
.featured-tag { color:var(--cobalt); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.featured-meta h3 { font-family:var(--serif); font-size:24px; font-weight:500; margin-bottom:10px; }
.featured-meta p { color:#5b5b57; font-size:13px; line-height:1.6; max-width:230px; }
.circle-arrow { align-items:center; border:1px solid var(--line); border-radius:50%; bottom:22px; display:flex; height:34px; justify-content:center; position:absolute; right:20px; width:34px; font-size:14px; transition:background .2s ease,color .2s ease; }
.featured-card:hover .circle-arrow { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Services ---------- */
.services { background:var(--paper-2); }
.services-intro { color:#57534c; font-size:14px; line-height:1.7; max-width:320px; margin-bottom:4px; }
.service-grid { display:grid; gap:22px; grid-template-columns:repeat(3,1fr); }
.service-card { background:var(--paper); border-radius:var(--radius); padding-bottom:32px; position:relative; }
.service-image { aspect-ratio:1.45; margin-bottom:24px; overflow:hidden; position:relative; border-radius:var(--radius) var(--radius) 0 0; }
.service-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.service-card:hover .service-image img { transform:scale(1.03); }
.service-num { background:var(--ink); bottom:0; color:#fff; font-size:10px; font-weight:700; left:0; letter-spacing:.1em; padding:8px 12px; position:absolute; }
.service-card h3 { font-family:var(--serif); font-size:22px; font-weight:500; margin:0 26px 10px; }
.service-card > p { color:#57534c; font-size:13.5px; line-height:1.6; margin:0 26px 10px; max-width:260px; }
.service-card > a { bottom:26px; color:var(--ink); font-size:18px; position:absolute; right:26px; transition:transform .2s ease; }
.service-card > a:hover { transform:translate(2px,-2px); }

.studio-heading { max-width:900px; margin-bottom:70px; }
.studio-collage { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:auto auto; gap:26px; align-items:start; }
.studio-image { margin:0; border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }
.studio-image img { width:100%; height:100%; object-fit:cover; }
.studio-image-large { grid-row:span 2; height:750px; }
.studio-image-small { height:360px; }
.studio-note { background:var(--butter); padding:42px; min-height:364px; display:flex; flex-direction:column; justify-content:center; transform:rotate(1deg); }
.studio-note .scribble { color:var(--tomato); font:600 30px 'Caveat',var(--serif); margin-bottom:12px; }
.studio-note h3 { font-size:35px; line-height:1.08; font-weight:500; margin-bottom:28px; }
.studio-note span { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

.founder { background:#fffdf7; }
.founder-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.founder-visual img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
.founder-text { display:flex; flex-direction:column; gap:30px; }
.founder-copy { font-size:21px; line-height:1.62; color:#47433d; }
.founder-copy p { margin-bottom:22px; }
.founder-signoff { display:flex; flex-direction:column; padding-top:24px; margin-top:34px; border-top:1px solid var(--line); }
.founder-signoff strong { font:italic 28px var(--serif); color:var(--ink); }
.founder-signoff span { text-transform:uppercase; letter-spacing:.12em; color:var(--cobalt); font-size:10px; font-weight:700; margin-top:5px; }

/* ---------- Sub-page hero (Work / Experience) ---------- */
.page-hero { padding:175px 0 90px; text-align:center; }
.page-hero .shell { max-width:820px; }
.page-hero h1 { font-size:clamp(46px,6vw,84px); font-weight:500; line-height:1.02; letter-spacing:-.04em; margin-bottom:24px; }
.page-hero h1 em { color:var(--cobalt); font-style:italic; font-weight:400; }
.page-hero h1 .lead-out { display:block; font-size:.5em; line-height:1.2; margin-top:.25em; }
.page-hero p { color:#43484b; font-size:17px; line-height:1.65; max-width:560px; margin:0 auto; }

/* ---------- Experience: logo cloud + proof ---------- */
.experience-band { background:#0c1114; color:#f8f5ef; padding:90px 0; position:relative; }
.experience-band::before { background:radial-gradient(rgba(255,255,255,.07) .7px, transparent .8px) 0 0/5px 5px; content:""; inset:0; opacity:.35; pointer-events:none; position:absolute; }
.experience-band-inner { position:relative; }
.logo-cloud { align-items:center; display:grid; gap:40px 60px; grid-template-columns:repeat(3,1fr); margin-bottom:60px; }
.company-logo { align-items:center; color:#fff; display:grid; font-size:20px; font-weight:700; grid-template-columns:auto 1fr; letter-spacing:.06em; line-height:1.05; }
.company-logo b { font-size:32px; font-weight:400; grid-row:span 2; margin-right:12px; color:var(--cobalt); }
.company-logo small { color:#aeb5b7; font-size:8px; font-weight:600; grid-column:2; letter-spacing:.08em; margin-top:5px; text-transform:uppercase; }
.proof-grid { border-top:1px solid rgba(255,255,255,.2); display:grid; grid-template-columns:repeat(3,1fr); padding-top:40px; }
.proof { align-items:center; border-right:1px solid rgba(255,255,255,.17); display:flex; gap:20px; justify-content:center; padding:0 24px; text-align:left; }
.proof:last-child { border:0; }
.proof-icon { color:var(--tomato); font-family:var(--serif); font-size:42px; font-style:italic; }
.proof p { font-size:13px; margin:0; color:#c5c2ba; }
.proof strong { display:block; font-family:var(--serif); font-size:19px; font-weight:400; color:#fff; }

/* ---------- Experience: career timeline ---------- */
.career-timeline { padding:110px 0 20px; }
.career-entry { border-top:1px solid var(--line); display:grid; gap:36px; grid-template-columns:120px 1fr; padding:56px 0; position:relative; }
.career-entry:first-child { border-top:none; }
.career-marker { color:var(--cobalt); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.career-marker i { background:var(--cobalt); border-radius:50%; display:block; height:11px; margin-top:14px; width:11px; }
.career-main h3 { font-family:var(--serif); font-size:clamp(28px,3vw,40px); font-weight:500; margin-bottom:8px; }
.career-role { color:var(--cobalt); font-size:13px; font-weight:700; letter-spacing:.04em; margin-bottom:16px; display:block; }
.career-summary { color:#57534c; font-size:15px; line-height:1.65; max-width:720px; margin-bottom:30px; }
.career-columns { border-top:1px solid var(--line); display:grid; gap:30px; grid-template-columns:repeat(3,1fr); padding-top:26px; }
.career-columns > div { border-right:1px solid var(--line); padding-right:22px; }
.career-columns > div:last-child { border:0; padding-right:0; }
.career-columns strong { display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }
.career-columns p { color:#57534c; font-size:13px; line-height:1.85; margin:0; }

/* ---------- Experience: case studies ---------- */
.case-studies { padding:60px 0 120px; }
.case-study { border-top:1px solid var(--line); display:grid; gap:40px; grid-template-columns:.7fr 1.3fr; padding:60px 0; }
.case-study:last-child { border-bottom:1px solid var(--line); }
.case-study-head .eyebrow-tag { color:var(--cobalt); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; display:block; }
.case-study-head h3 { font-family:var(--serif); font-size:clamp(26px,2.6vw,36px); font-weight:500; margin-bottom:14px; }
.case-study-head p { color:#57534c; font-size:15px; line-height:1.6; }
.case-feature-list { display:flex; flex-direction:column; gap:26px; }
.case-feature { border-left:2px solid var(--line); padding-left:22px; }
.case-feature h4 { font-family:var(--serif); font-size:18px; font-weight:500; margin-bottom:6px; }
.case-feature p { color:#57534c; font-size:14px; line-height:1.6; margin-bottom:8px; }
.case-feature a { color:var(--cobalt); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.case-feature a:hover { text-decoration:underline; text-underline-offset:4px; }

.contact { position:relative; background:var(--ink); color:#fff; padding:160px 0 120px; overflow:hidden; }
.contact-noise { position:absolute; inset:0; opacity:.35; background:radial-gradient(circle at 20% 20%,rgba(49,89,255,.7),transparent 27%),radial-gradient(circle at 80% 70%,rgba(255,93,69,.35),transparent 25%); }
.contact-inner { position:relative; text-align:center; max-width:1000px; }
.contact h2 { font-size:clamp(60px,7.5vw,118px); line-height:1.02; letter-spacing:-.045em; font-weight:500; margin-bottom:32px; }
.contact-inner > p:not(.section-label) { max-width:630px; margin:0 auto 38px; font-size:18px; line-height:1.6; color:#cbc8c1; }
.contact-email { margin-top:30px; text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:#aaa69e; }

.site-footer { background:#0b0b0a; color:#fff; border-top:1px solid rgba(255,255,255,.1); padding:70px 0 35px; }
.footer-grid { display:grid; grid-template-columns:1.5fr .7fr .7fr 1.1fr; gap:50px; }
.footer-brand .brand-tagline { color:#8ea2ff; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:9px; }
.footer-grid p { color:#777; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:700; margin-bottom:10px; }
.footer-grid a { font-size:14px; color:#dedbd4; }
.footer-grid a:hover { color:#fff; }
.footer-last { justify-content:flex-end; align-items:flex-end; color:#777; font-size:11px; text-align:right; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.12s; }
.reveal-delay-2 { transition-delay:.24s; }

/* ---------- Image placeholders (assets pending) ---------- */
.img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, rgba(17,17,15,.06), rgba(17,17,15,.12));
}
.img-placeholder span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(17,17,15,.4);
}
.visual-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
}

@media (max-width: 1100px) {
  .shell { width:min(100% - 48px, 1320px); }
  .desktop-nav,.nav-cta { display:none; }
  .menu-toggle { display:flex; }
  .hero { padding-top:140px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:840px; }
  .hero-scene { min-height:650px; }
  .hero-frame { inset:30px 40px 30px 90px; }
  .project { grid-template-columns:1fr; }
  .project-copy { padding:70px 58px; }
  .project-visual { min-height:650px; }
  .project-grid { grid-template-columns:1fr 1fr; }
  .process-grid { gap:60px; }
  .founder-grid { gap:60px; }
  .featured-grid, .service-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 780px) {
  .shell { width:min(100% - 32px, 1320px); }
  .section-pad { padding:88px 0; }
  .nav-shell { min-height:74px; }
  .brand-name { font-size:13px; }
  .hero { padding-top:120px; min-height:auto; }
  .hero-copy h1 { font-size:clamp(52px,15vw,78px); }
  .hero-lede { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .hero-proof { line-height:2; }
  .hero-scene { min-height:520px; margin-top:20px; }
  .hero-frame { inset:25px 5px 35px 35px; border-radius:240px 240px 28px 28px; }
  .note-one { width:175px; left:-4px; bottom:52px; padding:18px; }
  .note-one strong { font-size:18px; }
  .note-two { width:156px; right:-4px; top:28px; padding:16px; }
  .note-two strong { font-size:16px; }
  .studio-stamp { width:96px; height:96px; }
  .hero-marquee { margin-top:65px; }
  .manifesto-grid,.section-heading,.process-grid,.founder-grid { grid-template-columns:1fr; gap:38px; }
  .manifesto h2 { font-size:50px; }
  .projects { padding:90px 0; }
  .section-heading h2,.studio-heading h2,.founder-title h2 { font-size:49px; }
  .project { width:calc(100% - 18px); border-radius:28px; min-height:0; }
  .project-copy { padding:48px 28px; }
  .project h3 { font-size:44px; }
  .project-visual { min-height:420px; padding:24px; }
  .project-grid { grid-template-columns:1fr; }
  .mini-project { min-height:330px; }
  .featured-grid, .service-grid { grid-template-columns:1fr; }
  .service-card > a { position:static; margin:14px 26px 0; display:inline-block; }
  .process-sticky { position:relative; top:auto; }
  .hand-arrow { display:none; }
  .process-list li { grid-template-columns:50px 1fr; gap:20px; padding:34px 0; }
  .process-list > li > span { width:44px; height:44px; }
  .process-list h3 { font-size:30px; }
  .studio-collage { grid-template-columns:1fr; grid-template-rows:auto; }
  .studio-image-large,.studio-image-small { height:430px; grid-row:auto; }
  .studio-note { min-height:300px; }
  .founder-copy { font-size:18px; }
  .contact { padding:110px 0 90px; }
  .contact h2 { font-size:58px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-last { align-items:flex-start; text-align:left; }
  .page-hero { padding:130px 0 60px; }
  .logo-cloud { grid-template-columns:1fr; gap:28px; justify-items:center; text-align:left; }
  .proof-grid { grid-template-columns:1fr; }
  .proof { border-right:0; border-bottom:1px solid rgba(255,255,255,.17); padding:18px 5px; justify-content:flex-start; }
  .case-study { grid-template-columns:1fr; gap:24px; }
  .career-entry { grid-template-columns:1fr; gap:14px; }
  .career-columns { grid-template-columns:1fr; gap:16px; }
  .career-columns > div { border-right:0; border-bottom:1px solid var(--line); padding:0 0 16px; }
  .career-columns > div:last-child { border-bottom:0; }
}

@media (max-width: 470px) {
  .hero-scene { min-height:450px; }
  .hero-frame { inset:20px 0 45px 15px; }
  .note-two { display:none; }
  .studio-stamp { right:-8px; }
  .project h3 { font-size:38px; }
  .project-visual { min-height:350px; }
  .kindred-caption { font-size:8px; }
  .footer-grid { grid-template-columns:1fr; }
}