@font-face { font-family: Anton; src: url('assets/fonts/Anton-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Cormorant; src: url('assets/fonts/CormorantGaramond-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Cormorant; src: url('assets/fonts/CormorantGaramond-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: Cormorant; src: url('assets/fonts/CormorantGaramond-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }

/* Studio foundations. Motion belongs to the reel; the page stays readable. */
:root { --signal:#E63327; --paper:#F4ECDA; --ink:#141414; --bone:#C9BFA8; --well:#0D0D0D; --pad:clamp(20px,5vw,80px); --ease:cubic-bezier(.2,.75,.2,1); }
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--ink); scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font:400 20px/1.5 Cormorant,Georgia,serif; }
h1,h2,h3,.bar-mark { font-family:Anton,Impact,sans-serif; font-weight:400; line-height:1.05; }
h2 { font-size:clamp(36px,4.8vw,68px); letter-spacing:-.015em; }
h3 { font-size:clamp(24px,2.4vw,32px); }
button,input,select { font:inherit; }
a { color:inherit; text-underline-offset:5px; }
:focus-visible { outline:3px solid var(--signal); outline-offset:5px; }
section[id],footer[id] { scroll-margin-top:84px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { position:fixed; left:16px; top:16px; z-index:199; padding:12px 20px; background:var(--paper); }
.bar { position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px var(--pad); color:var(--paper); background:#141414f5; border-bottom:1px solid #f4ecda26; transition:background .2s,color .2s; }
.bar.on-light { color:var(--ink); background:#f4ecdaf5; border-bottom-color:#14141420; }
.bar-mark { font-size:15px; letter-spacing:.22em; text-decoration:none; }
.bar-nav { display:flex; align-items:center; gap:28px; }
.bar-nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font:12px/1.4 Arial,sans-serif; }
.bar-nav a:hover { text-decoration:underline; }
.bar-cta { border:1px solid currentColor; padding:10px 16px; }
.bar-cta:hover { background:var(--ink); color:var(--paper); text-decoration:none!important; }
.scroll-progress { position:fixed; inset:0 0 auto; height:2px; z-index:95; pointer-events:none; }
.scroll-progress i { display:block; height:100%; width:0; background:var(--signal); }
.section-label { font:12px/1.5 Arial,sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.section-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:40px; margin:28px 0 36px; }
.section-heading>p { max-width:40ch; font-size:23px; }
.approach { padding:64px var(--pad); background:var(--ink); color:var(--paper); }
.approach .section-label { color:var(--bone); }
.approach-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.approach-steps li { border-top:1px solid #f4ecda4d; padding-top:20px; }
.approach-steps b { display:block; font:12px Arial,sans-serif; color:var(--bone); margin-bottom:18px; }
.approach-steps h3 { margin-bottom:12px; }
.approach-steps p { color:var(--bone); font-size:20px; max-width:38ch; }
.strategy-details { margin-top:32px; border-top:1px solid #f4ecda4d; padding-top:8px; }
.strategy-details summary { cursor:pointer; padding:14px 0; font:12px/1.6 Arial,sans-serif; letter-spacing:.025em; }
.strategy-details>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:12px 0 4px; }
.strategy-details p { font-size:19px; color:var(--bone); }
.strategy-details strong { display:block; color:var(--paper); font-weight:500; margin-bottom:6px; }
.proof { padding:64px var(--pad); background:var(--paper); color:var(--ink); }
.proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; list-style:none; }
.proof-grid li { border-top:1px solid #14141466; padding-top:20px; }
.proof-value { font:400 clamp(38px,4vw,60px)/1 Anton,Impact,sans-serif; margin-bottom:16px; }
.proof-grid h3 { font:500 24px/1.2 Cormorant,Georgia,serif; margin-bottom:12px; }
.proof-grid li>p:last-child { font-size:19px; color:#555148; }
.proof-details { margin-top:30px; border-top:1px solid #14141440; padding-top:8px; }
.proof-details summary { cursor:pointer; padding:14px 0; font:12px/1.6 Arial,sans-serif; }
.proof-details p { padding:8px 0; font-size:18px; max-width:85ch; color:#555148; }
@media(max-width:820px) {
 .bar-nav { gap:18px; }
 .section-heading { grid-template-columns:1fr; gap:20px; }
 .section-heading>p { font-size:21px; }
 .approach-steps,.proof-grid { gap:20px; }
 .approach-steps p,.proof-grid li>p:last-child { font-size:18px; }
}
@media(max-width:640px) {
 .bar { padding:12px 20px; }
 .bar-mark { font-size:13px; letter-spacing:.18em; }
 .bar-nav { gap:16px; }
 .bar-nav a[href='#method'],.bar-nav a[href='#number'] { display:none; }
 .bar-nav a { font-size:12px; }
 .bar-cta { padding:8px 12px; }
 .approach,.proof { padding:44px 20px; }
 .section-heading { margin:20px 0 28px; }
 .section-label { font-size:11px; }
 .approach-steps,.proof-grid,.strategy-details>div { grid-template-columns:1fr; gap:24px; }
 .approach-steps li { display:grid; grid-template-columns:28px 1fr; column-gap:16px; padding-top:16px; }
 .approach-steps b { grid-row:1/3; margin-top:8px; }
 .approach-steps p { max-width:none; }
 .approach-steps h3 { font-size:25px; margin-bottom:8px; }
 .proof-grid li { display:grid; grid-template-columns:100px 1fr; gap:8px 20px; padding-top:16px; }
 .proof-value { grid-row:1/3; margin:0; font-size:36px; }
 .proof-grid h3 { margin:0; font-size:23px; }
 .proof-note { font-size:16px; }
}
/* ---------- the closing frame ---------- */
.studio-footer { position: relative; background: var(--ink); color: var(--paper); padding: 34px var(--pad) 24px; scroll-margin-top: 70px; border-top: 5px solid var(--signal); }
.footer-overline, .footer-project-label, .footer-project-action, .footer-nav, .footer-bottom { font: 11px/1.5 Arial,sans-serif; letter-spacing: .065em; text-transform: uppercase; }
.footer-overline { display: flex; justify-content: space-between; gap: 24px; color: var(--bone); }
.footer-overline i { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--signal); }
.footer-invitation { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: clamp(56px, 7vw, 112px) 0 56px; }
.studio-footer h2 { font-size: clamp(4.2rem, 9vw, 9.5rem); line-height: .98; letter-spacing: -.025em; text-transform: uppercase; }
.studio-footer h2 em { font-family: Cormorant,Georgia,serif; font-weight: 500; text-transform: none; color: var(--paper); }
.footer-brief { margin-top: 28px; color: var(--bone); font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.4; }
.footer-project { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: clamp(200px, 21vw, 300px); aspect-ratio: 1; border-radius: 50%; padding: 34px 20px; background: var(--paper); color: var(--ink); text-decoration: none; transform: rotate(-8deg); transition: transform .5s var(--ease), background .3s; }
.footer-project-arrow { font: 300 clamp(80px, 9vw, 140px)/.9 Arial,sans-serif; transition: transform .5s var(--ease); }
.footer-project-action { display: flex; align-items: center; gap: 20px; }
.footer-project-action > span { font-size: 20px; }
.footer-project:hover, .footer-project:focus-visible { background: #ef6c50; transform: rotate(0deg); }
.footer-project:hover .footer-project-arrow { transform: translate(5px,-5px); }
.footer-connect { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 0; border-top: 1px solid #f4ecda40; border-bottom: 1px solid #f4ecda40; }
.footer-email { display: inline-flex; align-items: center; gap: 28px; color: inherit; font: 500 clamp(1.5rem, 2.8vw, 3rem)/1.2 Cormorant,Georgia,serif; text-decoration: none; }
.footer-email > span { font: 24px/1 Arial,sans-serif; color: #ef6c50; transition: transform .3s; }
.footer-email:hover > span { transform: translate(4px,-4px); }
.footer-email:hover { text-decoration: underline; text-underline-offset: 7px; }
.footer-nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); font-size: 12px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; color: var(--paper); text-decoration: none; }
.footer-nav a:hover { color: #ef6c50; }
.footer-wordmark { position: relative; font: 400 clamp(48px, 7vw, 112px)/.95 Anton,Impact,sans-serif; letter-spacing: -.045em; white-space: nowrap; padding: 30px 0; }
.footer-wordmark > span { position: relative; display: inline-block; padding-right: .25em; }
.footer-eight { color: var(--signal); }
.footer-star { position: absolute; top: 0; right: 0; color: var(--signal); font: 300 .2em/1 Georgia,serif; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid #f4ecda40; font-size: 10px; color: var(--bone); }
@media(max-width: 820px) {
  .footer-overline { font-size: 9px; }
  .footer-connect { align-items: flex-start; flex-direction: column; gap: 16px; }
  .footer-nav { width: 100%; justify-content: space-between; }
  .footer-project { width: 190px; padding: 25px 15px; }
  .footer-project-label, .footer-project-action { font-size: 9px; }
  .footer-project-arrow { font-size: 90px; }
}
@media(max-width: 540px) {
  .studio-footer { padding: 24px 20px 22px; }
  .footer-overline { flex-direction: column; gap: 8px; font-size: 9px; }
  .footer-overline > span:last-child { padding-left: 17px; }
  .footer-invitation { display: block; padding: 44px 0 32px; }
  .studio-footer h2 { font-size: clamp(3.7rem, 17vw, 5.7rem); }
  .footer-brief { margin-top: 20px; font-size: 1.15rem; }
  .footer-project { width: 155px; padding: 21px 12px; margin: 34px 8px 6px auto; }
  .footer-project-label, .footer-project-action { font-size: 8px; letter-spacing: .015em; }
  .footer-project-arrow { font-size: 70px; }
  .footer-project-action { gap: 10px; }
  .footer-project-action > span { font-size: 15px; }
  .footer-connect { padding: 24px 0 16px; }
  .footer-email { width: 100%; justify-content: space-between; gap: 10px; font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
  .footer-nav { font-size: 11px; gap: 12px; }
  .footer-wordmark { font-size: clamp(32px, 8.8vw, 44px); padding: 24px 0; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 18px; font-size: 10px; }
  .footer-bottom > span:last-child { width: 100%; }
}

/* A single primary contact action, with quiet supporting navigation. */
.footer-invitation { padding:52px 0 36px; grid-template-columns:1.2fr 1fr; }
.studio-footer h2 { font-size:clamp(48px,6.4vw,92px); }
.footer-brief { margin-top:20px; font-size:21px; }
.footer-project-panel { justify-self:end; width:min(100%,360px); }
.footer-project-panel>p { font:12px/1.6 Arial,sans-serif; color:var(--bone); margin-bottom:18px; }
.footer-project { display:flex; flex-direction:row; justify-content:space-between; width:100%; aspect-ratio:auto; padding:22px 24px; border-radius:0; transform:none; margin:0; font:14px/1.5 Arial,sans-serif; text-transform:uppercase; }
.footer-project:hover,.footer-project:focus-visible { transform:none; }
.footer-project-arrow { font:28px/1 Arial,sans-serif; }
.footer-project-panel .footer-email { font-size:25px; margin-top:22px; gap:16px; }
.footer-location { font-size:18px; color:var(--bone); }
.footer-overline,.footer-project-label,.footer-bottom { font-size:11px; }
.footer-nav { font-size:12px; }
.footer-bottom { letter-spacing:.025em; }
@media(max-width:640px) {
 .footer-invitation { display:block; padding:32px 0; }
 .studio-footer h2 { font-size:clamp(48px,14vw,72px); }
 .footer-brief { font-size:19px; }
 .footer-project-panel { width:100%; margin-top:28px; }
 .footer-project-panel>p { font-size:12px; margin-bottom:12px; }
 .footer-project { padding:17px 20px; min-height:58px; }
 .footer-project-panel .footer-email { font-size:24px; margin-top:16px; }
 .footer-connect { gap:10px; padding:18px 0 12px; }
 .footer-overline { font-size:11px; }
 .footer-overline>span:last-child { padding-left:0; }
 .footer-nav { font-size:11px; }
 .footer-bottom { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }