:root {
  --cream: #F6F1E7;
  --paper: #FBF8F0;
  --ink: #2B2723;
  --ink-soft: #6B6259;
  --terracotta: #D97757;
  --terra-dark: #B9583E;
  --stone: #EFE6D8;
  --sage: #E7ECDF;
  --blush: #D8B7AD;
  --lavender: #C3B8CF;
  --line: rgba(74, 61, 49, .15);
  --shadow: 0 18px 45px rgba(66, 48, 35, .14), 0 4px 12px rgba(66, 48, 35, .08);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(217,119,87,.06), transparent 28%),
    radial-gradient(circle at 92% 23%, rgba(195,184,207,.07), transparent 22%),
    var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
html.is-scrolling * { scroll-behavior: auto !important; }
body.project-open { overscroll-behavior: contain; }
.shell { width: min(1440px, calc(100% - 8vw)); margin-inline: auto; }

.site-header {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 20;
}
.brand { font-family: var(--serif); font-style: italic; font-size: 29px; text-decoration: none; letter-spacing: -.03em; }
.brand-note { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8C7F72; }
.desktop-nav { justify-self: end; display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 500; }
.desktop-nav a { text-decoration: none; }
.desktop-nav > a:not(.button)::after { content:""; display:block; width:0; height:1px; background:var(--terracotta); margin-top:5px; transition:width .25s ease; }
.desktop-nav > a:not(.button):hover::after { width:100%; }
.menu-button { display:none; border:0; background:transparent; color:var(--ink); font:500 13px var(--sans); text-transform:uppercase; letter-spacing:.08em; }

.button { display:inline-flex; align-items:center; gap:10px; background:var(--terracotta); color:#fff; text-decoration:none; border-radius:999px; padding:15px 24px; font-weight:600; font-size:14px; box-shadow:0 10px 24px rgba(217,119,87,.18); transition:transform .22s ease, background .22s ease, box-shadow .22s ease; }
.button:hover { transform:translateY(-2px); background:var(--terra-dark); box-shadow:0 13px 28px rgba(217,119,87,.25); }
.button-small { padding:12px 19px; }
.text-link { font-size:15px; font-weight:600; text-decoration:none; border-bottom:1px solid var(--terracotta); padding-bottom:4px; }

.hero {
  min-height: 720px;
  display:grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 50px;
  align-items:center;
  padding: 46px 0 60px;
}
.hero-copy { position:relative; z-index:4; padding-left:12px; }
.eyebrow { margin:0 0 20px; color:var(--terracotta); text-transform:uppercase; font-size:13px; font-weight:600; letter-spacing:.12em; }
.hero h1 { margin:0; font-family:var(--serif); font-size:clamp(62px, 5.75vw, 102px); line-height:.985; font-weight:400; letter-spacing:-.05em; max-width:780px; text-wrap:balance; overflow:visible; }
.hero h1 em { color:var(--terracotta); font-weight:400; }
.lede { max-width:670px; margin:30px 0 0; font-size:clamp(17px,1.5vw,22px); line-height:1.5; color:var(--ink-soft); letter-spacing:.005em; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:34px; }
.service-line { display:flex; flex-wrap:wrap; gap:0; margin-top:44px; color:#877A6D; font-size:10px; text-transform:uppercase; letter-spacing:.11em; }
.service-line span:not(:last-child)::after { content:"·"; margin:0 11px; color:#BAAEA1; }

.hero-board { height:580px; position:relative; perspective:1200px; }
.monogram { position:absolute; right:-9%; top:7%; font:italic 360px/.8 var(--serif); color:var(--terracotta); opacity:.88; z-index:-1; user-select:none; }
.paper-card { position:absolute; background:var(--paper); box-shadow:var(--shadow); transform-origin:center; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; will-change:transform; }
.paper-card::after { content:""; position:absolute; inset:0; pointer-events:none; border:1px solid rgba(86,70,57,.05); }
.paper-card:hover { box-shadow:0 22px 55px rgba(66,48,35,.2), 0 6px 14px rgba(66,48,35,.1); z-index:9; }
.project-art { overflow:hidden; position:relative; }
.card-caption { padding:20px 20px 22px; }
.card-caption.compact { padding:12px 14px 15px; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card-title-row h2, .card-title-row h3 { font-family:var(--serif); font-weight:400; margin:0; letter-spacing:-.025em; }
.card-title-row h2 { font-size:27px; }
.card-title-row h3 { font-size:23px; }
.card-caption p { margin:7px 0 0; color:#5C534B; line-height:1.42; font-size:13px; }
.stamp { display:inline-flex; align-items:center; justify-content:center; padding:5px 9px 4px; border-radius:999px; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.stamp.live { border:1px solid var(--terracotta); color:#A34E36; background:rgba(246,241,231,.62); }
.stamp.concept { background:var(--terracotta); color:#fff; }
.tape { position:absolute; width:70px; height:22px; top:-10px; left:44%; z-index:5; opacity:.8; transform:rotate(-2deg); }
.tape-peach { background:rgba(217,119,87,.58); }
.pin { width:13px; height:13px; border-radius:50%; position:absolute; top:-6px; left:50%; z-index:6; box-shadow:0 2px 5px rgba(0,0,0,.25); }
.pin-terra{background:var(--terracotta)} .pin-purple{background:#6C5A79} .pin-stone{background:#BEA37B}
.hand-note { position:absolute; font:italic 17px var(--serif); color:#A85D45; z-index:7; transform:rotate(-8deg); }
.note-peppy { top:-34px; left:-54px; } .note-client{top:-34px; right:18px; transform:rotate(5deg)}

.project-peppy { width:360px; left:1%; top:30px; }
.project-clientquest { width:380px; left:41%; top:86px; }
.project-maison { width:215px; right:2%; top:2px; }
.project-north { width:220px; right:2%; bottom:24px; }
.project-peppy .project-art { height:320px; background:linear-gradient(135deg,#F4D9CF,#EADFD0 56%,#D8E2D1); }
.project-clientquest .project-art { height:300px; background:linear-gradient(145deg,#DBCFE4,#E7DCCD 65%,#C7B9A6); padding:38px 28px; }
.project-maison .project-art { height:160px; background:radial-gradient(circle at 38% 30%,#F6E2C7 0 12%,transparent 13%),linear-gradient(135deg,#E3C3A0,#8D6547); }
.project-north .project-art { height:155px; background:linear-gradient(#BBC5CB 0 45%,#58666C 45% 100%); }

.phone { width:170px; height:280px; border-radius:32px; background:#222; padding:8px; position:absolute; left:42px; top:28px; transform:rotate(-2deg); box-shadow:0 18px 30px rgba(40,30,24,.25); }
.phone.small { width:118px; height:215px; left:24px; top:20px; border-radius:24px; padding:6px; }
.phone-notch { width:55px; height:14px; background:#111; border-radius:0 0 12px 12px; position:absolute; top:7px; left:50%; transform:translateX(-50%); z-index:3; }
.phone-screen { background:#EEF2E8; width:100%; height:100%; border-radius:26px; padding:30px 13px 14px; font-family:var(--sans); color:#30352E; }
.phone.small .phone-screen { border-radius:20px; padding:25px 9px 10px; }
.mini-kicker { font-size:8px; margin-bottom:12px; } .mini-title{font-size:17px;font-weight:600;margin-bottom:7px}.dose-row{display:flex;justify-content:space-between;font-size:7px;color:#66705F}.mini-button{background:#2B2B29;color:#fff;text-align:center;border-radius:7px;padding:8px 4px;margin:11px 0;font-size:8px}.mini-panel{background:#F8FAF5;border-radius:10px;padding:9px;display:grid;gap:6px;font-size:7px}.mini-panel strong{font-size:8px}
.mini-progress { position:absolute; right:28px; top:44px; width:118px; height:112px; background:rgba(248,247,242,.92); border-radius:14px; padding:12px; box-shadow:0 12px 26px rgba(40,30,24,.12); color:#444; }
.mini-progress span{font-size:7px}.mini-progress strong{display:block;font-size:15px;margin-top:6px}.spark{height:36px;margin-top:8px;background:linear-gradient(170deg,transparent 0 35%,#B0B7A7 36% 39%,transparent 40% 50%,#8D9D84 51% 54%,transparent 55%);}
.quest-window { width:100%; height:100%; border-radius:10px; background:#F7F4F0; display:grid; grid-template-columns:58px 1fr; overflow:hidden; box-shadow:0 14px 28px rgba(45,30,38,.18); }
.quest-sidebar{background:#2D202C;padding:18px 13px;display:grid;align-content:start;gap:12px}.quest-sidebar span{height:7px;border-radius:4px;background:#856678}.quest-main{padding:18px}.quest-top{display:flex;gap:8px;margin-bottom:18px}.quest-top span{height:9px;width:72px;background:#E8E0E5;border-radius:4px}.quest-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quest-grid div{height:68px;border-radius:8px;background:#FFF;border:1px solid #E6DFE3}.bottle{width:58px;height:86px;border:1px solid rgba(72,50,31,.7);background:linear-gradient(90deg,rgba(142,95,47,.9),rgba(231,195,135,.9),rgba(116,76,37,.95));position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);box-shadow:0 15px 26px rgba(64,39,24,.25)}.bottle::before{content:"";position:absolute;width:29px;height:17px;border:1px solid #5D472E;left:14px;top:-18px;background:#89633E}.bottle span{position:absolute;inset:34px 13px;border-top:1px solid rgba(255,255,255,.6);border-bottom:1px solid rgba(60,35,20,.25)}
.mountain{position:absolute;bottom:0;clip-path:polygon(50% 0,100% 100%,0 100%)}.mountain-a{left:-10px;width:170px;height:120px;background:#29383D}.mountain-b{right:-10px;width:150px;height:100px;background:#56656B}.repurpose-chip{position:absolute;right:16px;bottom:14px;background:rgba(246,241,231,.95);padding:8px 10px;border-radius:5px;font:500 9px/1.3 var(--sans);box-shadow:0 8px 18px rgba(0,0,0,.12)}

.section-rule { border-top:1px solid var(--line); }
.work { padding:54px 0 70px; }
.section-heading { display:grid; grid-template-columns:1fr 1fr auto; align-items:start; gap:40px; margin-bottom:34px; }
.section-heading h2, .capability-intro h2, .studio-copy h2, .contact h2 { margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.035em; }
.section-heading h2 { font-size:54px; font-style:italic; }
.section-heading p { max-width:420px; margin:8px 0 0; color:#7A6F63; font-size:13px; line-height:1.45; }
.pager { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; }
.pager button { width:38px; height:38px; border-radius:50%; border:1px solid rgba(217,119,87,.28); background:transparent; color:#C96B4D; cursor:pointer; }
.pager .pager-active { background:var(--terracotta); color:#fff; }
.work-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.paper { box-shadow:0 14px 26px rgba(58,43,32,.1); }
.work-card { position:relative; min-height:250px; display:grid; grid-template-columns:1fr .86fr; overflow:visible; transition:transform .3s ease, box-shadow .3s ease; }
.work-card:hover { transform:rotate(0deg) translateY(-5px); box-shadow:0 18px 32px rgba(58,43,32,.15); }
.work-copy{padding:42px 20px 18px;display:flex;flex-direction:column}.work-number{position:absolute;left:20px;top:18px;font:italic 13px var(--serif);color:#8C6E63}.work-copy p{font-size:12px;line-height:1.45;color:#5F564E}.work-copy a{font-size:11px;margin-top:auto;text-decoration:none;border-bottom:1px solid var(--terracotta);width:max-content}.work-visual{position:relative;overflow:hidden}.blush-card{background:#E4C3B9}.lavender-card{background:#D4CADE}.stone-card{background:#EFE6D8}.north-card{background:#D9D2DD}.tilt-left{transform:rotate(-1.4deg)}.tilt-right{transform:rotate(1.2deg)}.tilt-soft{transform:rotate(-.6deg)}.tilt-right-soft{transform:rotate(.7deg)}
.peppy-mini{background:linear-gradient(140deg,#E7DCD0,#D4E0D0)}.quest-mini{padding:28px 18px;background:linear-gradient(145deg,#D6C9DD,#E0D5C7)}.perfume-mini{background:linear-gradient(135deg,#EBCFB0,#967053)}.north-mini{background:linear-gradient(#B9C5CB 0 45%,#67747A 45% 100%)}

.capabilities { padding:58px 0 90px; }
.capability-intro { display:grid; grid-template-columns:.75fr 1fr; gap:70px; align-items:end; margin-bottom:34px; }
.capability-intro h2 { font-size:52px; line-height:.96; }
.capability-intro h2 em { color:var(--terracotta); font-weight:400; }
.capability-intro p { max-width:430px; color:#776B60; line-height:1.5; font-size:13px; }
.capability-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.index-card { position:relative; min-height:160px; padding:27px 22px 22px; box-shadow:0 8px 18px rgba(59,44,34,.07); transition:transform .25s ease, box-shadow .25s ease; }
.index-card:hover { transform:translateY(-4px) rotate(-.35deg); box-shadow:0 12px 24px rgba(59,44,34,.12); }
.index-card h3 { font-size:14px; margin:23px 0 8px; }
.index-card p { margin:0; color:#645B52; font-size:11px; line-height:1.45; }
.index-number { position:absolute; top:19px; left:22px; font:italic 12px var(--serif); color:#9A7769; }
.index-card .corner { position:absolute; top:0; right:0; border-style:solid; border-width:0 24px 24px 0; border-color:transparent rgba(122,100,82,.08) transparent transparent; }
.index-card.stone{background:var(--stone)} .index-card.sage{background:var(--sage)} .index-card.blush{background:#E1C2B9}.index-card.lavender{background:#D3C8DB}.index-card.terracotta{background:var(--terracotta);color:#fff}.index-card.terracotta p,.index-card.terracotta .index-number{color:#FFF3EC}.index-card.terracotta .corner{border-color:transparent rgba(132,52,33,.18) transparent transparent}

.studio { padding:82px 0; display:grid; grid-template-columns:.52fr 1.35fr .65fr; gap:60px; align-items:center; }
.studio-mark{font:italic 150px/.8 var(--serif);color:rgba(217,119,87,.28);letter-spacing:-.1em}.studio-copy h2{font-size:48px;line-height:1.02;margin-bottom:22px}.studio-copy>p:last-child{color:#70655A;line-height:1.6;max-width:700px}.studio-proof{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:7px}.studio-proof span{font:500 29px var(--serif);color:var(--terracotta)}.studio-proof small{align-self:center;color:#766A5F;font-size:10px;line-height:1.35}
.contact { padding:96px 0 110px; text-align:center; }
.contact h2 { font-size:clamp(52px,6vw,88px); line-height:.95; max-width:1000px; margin:0 auto 36px; }
.contact-note{font-size:12px;color:#897B6E;margin-top:25px}
.site-footer { border-top:1px solid var(--line); min-height:100px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#887B70; }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
.floating { animation:drift 6s ease-in-out infinite alternate; }
.project-clientquest{animation-delay:-1.6s}.project-maison{animation-delay:-3.1s}.project-north{animation-delay:-4.4s}
@keyframes drift { from { translate:0 0; } to { translate:0 -4px; } }

@media (max-width: 1120px) {
  .hero{grid-template-columns:1fr;gap:20px;padding-top:25px}.hero-copy{max-width:850px}.hero-board{height:560px;margin-top:16px}.project-peppy{left:5%}.project-clientquest{left:40%}.project-maison{right:4%}.project-north{right:5%}.work-grid{grid-template-columns:repeat(2,1fr);gap:24px}.capability-grid{grid-template-columns:repeat(3,1fr)}.studio{grid-template-columns:.5fr 1.5fr}.studio-proof{grid-column:2}
}

@media (max-width: 760px) {
  .shell{width:min(100% - 40px, 640px)}
  .site-header{min-height:70px;grid-template-columns:auto 1fr auto;gap:12px}.brand{font-size:23px}.brand-note{font-size:8px}.desktop-nav{display:none}.menu-button{display:block}
  .hero{min-height:auto;padding:48px 0 42px;display:block}.hero-copy{padding-left:0}.hero h1{font-size:clamp(54px,16.5vw,76px);line-height:.99}.lede{font-size:16px;max-width:540px}.hero-actions{gap:18px;flex-wrap:wrap}.button{padding:14px 20px}.service-line{margin-top:32px;font-size:9px;line-height:1.9}.service-line span:not(:last-child)::after{margin:0 7px}
  .hero-board{height:780px;margin:44px 0 0;perspective:none}.monogram{font-size:270px;right:-33%;top:24%}.paper-card{animation:none!important}.project-peppy{width:72%;left:0;top:40px}.project-clientquest{width:70%;left:auto;right:0;top:345px}.project-maison{width:44%;right:0;top:35px}.project-north{width:46%;left:2%;right:auto;bottom:0}.project-peppy .project-art{height:270px}.project-clientquest .project-art{height:230px;padding:27px 18px}.project-maison .project-art{height:125px}.project-north .project-art{height:125px}.project-peppy .mini-progress{display:none}.project-peppy .phone{left:50%;transform:translateX(-50%) rotate(-2deg)}.hand-note{font-size:14px}.note-peppy{left:0}.note-client{right:0}
  .section-heading{grid-template-columns:1fr;gap:12px}.section-heading h2{font-size:48px}.pager{justify-self:start;margin-top:8px}.work-grid{grid-template-columns:1fr;gap:28px}.work-card{min-height:260px}.work-copy{padding-right:18px}.capability-intro{grid-template-columns:1fr;gap:18px}.capability-intro h2{font-size:47px}.capability-grid{grid-template-columns:1fr 1fr}.index-card{min-height:150px}.studio{grid-template-columns:1fr;gap:28px}.studio-mark{font-size:110px}.studio-copy h2{font-size:42px}.studio-proof{grid-column:auto}.contact{padding:72px 0 85px}.contact h2{font-size:54px}.site-footer{min-height:120px;align-items:flex-start;justify-content:center;flex-direction:column;gap:12px}
}

@media (max-width: 430px) {
  .shell{width:calc(100% - 32px)}.brand-note{display:none}.hero h1{font-size:58px;line-height:1.01}.hero-board{height:735px}.project-peppy{width:78%}.project-clientquest{width:77%;top:335px}.project-maison{width:47%}.project-north{width:49%}.card-title-row h2{font-size:23px}.card-caption p{font-size:11px}.work-card{grid-template-columns:1fr .72fr}.work-copy{padding:40px 15px 14px}.work-copy p{font-size:11px}.card-title-row h3{font-size:20px}.capability-grid{grid-template-columns:1fr}.index-card{min-height:125px}.studio-copy h2{font-size:38px}.contact h2{font-size:48px}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}.floating{animation:none}.reveal{opacity:1;transform:none;transition:none}.paper-card,.work-card,.index-card,.button{transition:none!important}
}

/* --- Motion polish v2 ---------------------------------------------------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  transform-origin: left center;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.hero-line {
  display: block;
  overflow: visible;
  padding: .055em .02em .12em;
  margin: -.055em -.02em -.12em;
  transform: translate3d(0,.72em,0);
  opacity: 0;
  filter: blur(2px);
  will-change: transform, opacity, filter;
}
.page-ready .hero-line {
  animation: heroLineIn .95s cubic-bezier(.16,1,.3,1) forwards;
}
.page-ready .hero-line:nth-child(2) { animation-delay: .13s; }
.page-ready .hero .eyebrow,
.page-ready .hero .lede,
.page-ready .hero-actions,
.page-ready .service-line {
  animation: heroFadeIn .75s cubic-bezier(.16,1,.3,1) both;
}
.page-ready .hero .eyebrow { animation-delay: .04s; }
.page-ready .hero .lede { animation-delay: .28s; }
.page-ready .hero-actions { animation-delay: .38s; }
.page-ready .service-line { animation-delay: .49s; }
@keyframes heroLineIn { to { transform: translate3d(0,0,0); opacity: 1; filter: blur(0); } }
@keyframes heroFadeIn { from { opacity: 0; transform: translate3d(0,14px,0); filter:blur(2px); } to { opacity: 1; transform: translate3d(0,0,0); filter:blur(0); } }

/* Pointer motion now comes from the single RAF loop in script.js. */
.floating { animation: none !important; }
.paper-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  contain: paint;
  transition: box-shadow .35s ease, filter .35s ease;
}
.paper-card:hover {
  transform: none;
  filter: saturate(1.015);
  box-shadow: 0 26px 68px rgba(66,48,35,.18), 0 8px 18px rgba(66,48,35,.10);
}

/* More tactile, premium hover on links and buttons. */
.button span,
.text-link span,
.work-copy a { transition: transform .28s cubic-bezier(.16,1,.3,1); }
.button:hover span,
.text-link:hover span { transform: translateX(4px); }
.text-link { transition: color .22s ease, border-color .22s ease; }
.text-link:hover { color: var(--terracotta); }

/* Editorial scroll statement between hero and work. */
.manifesto {
  padding: 58px 0 84px;
  position: relative;
}
.manifesto-rule {
  height: 1px;
  background: var(--line);
  margin-bottom: 54px;
  transform: scaleX(.12);
  transform-origin: left;
  transition: transform 1.15s cubic-bezier(.16,1,.3,1);
}
.manifesto:has(.words-visible) .manifesto-rule { transform: scaleX(1); }
.manifesto-kicker {
  margin: 0 0 24px;
  color: #8B7D70;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.manifesto-copy {
  max-width: 1160px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 400;
}
.manifesto-copy em { color: var(--terracotta); font-weight: 400; }
.manifesto-copy .word {
  display: inline-block;
  opacity: .12;
  transform: translateY(.26em);
  filter: blur(3px);
  transition:
    opacity .72s cubic-bezier(.16,1,.3,1),
    transform .72s cubic-bezier(.16,1,.3,1),
    filter .72s ease;
  transition-delay: calc(var(--word-i) * 34ms);
}
.manifesto-copy.words-visible .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.manifesto-note {
  margin: 34px 0 0 auto;
  width: min(360px, 100%);
  padding-left: 18px;
  border-left: 2px solid var(--terracotta);
  font: italic 19px/1.35 var(--serif);
  color: #6D6055;
}

/* Stagger reveals and give text a clipped editorial feel. */
.reveal {
  transition-delay: var(--reveal-delay, 0ms);
  transition-duration: .82s;
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}
.section-heading h2,
.capability-intro h2,
.studio-copy h2,
.contact h2 {
  text-wrap: balance;
}

/* Work cards enter with a touch more depth. */
.work-card.reveal,
.index-card.reveal {
  transform: translateY(26px) rotate(.35deg) scale(.985);
}
.work-card.reveal.is-visible,
.index-card.reveal.is-visible {
  transform: translateY(0) rotate(0) scale(1);
}
.work-card:hover {
  transform: translateY(-7px) rotate(0deg) scale(1.006);
}
.index-card:hover {
  transform: translateY(-6px) rotate(-.45deg) scale(1.012);
}

/* Subtle image/graphic motion on project hover. */
.project-art { transition: transform .72s cubic-bezier(.22,1,.36,1), filter .45s ease; }
.work-visual { transition: filter .45s ease; }
.paper-card:hover .project-art { transform: scale(1.016); }

/* Header settles in as the page enters. */
.site-header { opacity: 0; transform: translateY(-8px); }
.page-ready .site-header { animation: headerIn .65s .05s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes headerIn { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .manifesto { padding: 44px 0 64px; }
  .manifesto-rule { margin-bottom: 40px; }
  .manifesto-copy { font-size: clamp(42px, 13vw, 64px); }
  .manifesto-note { margin-top: 26px; font-size: 17px; }
  .hero-copy { transform: none !important; opacity: 1 !important; }
  .monogram { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero-line,
  .site-header,
  .page-ready .hero .eyebrow,
  .page-ready .hero .lede,
  .page-ready .hero-actions,
  .page-ready .service-line,
  .manifesto-copy .word {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .manifesto-rule { transform: scaleX(1); transition: none; }
}

/* --- Signature motion v3 ------------------------------------------------ */
.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--cream);
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translateY(0);
}
.intro-curtain span {
  font: italic clamp(120px, 24vw, 360px)/.8 var(--serif);
  color: var(--terracotta);
  transform: scale(.82) rotate(-8deg);
  opacity: .92;
}
.page-ready .intro-curtain {
  animation: curtainUp 1.15s .42s cubic-bezier(.76,0,.24,1) forwards;
}
.page-ready .intro-curtain span {
  animation: curtainMark 1s .08s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes curtainUp { to { transform: translateY(-102%); } }
@keyframes curtainMark { to { transform: scale(1.06) rotate(0); opacity: 1; } }

.project-trigger { cursor: pointer; }
.project-trigger:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 7px;
}

.project-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  z-index: 180;
  pointer-events: none;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: 0;
  transform: translate3d(-50%,-50%,0) scale(.72);
  transition: opacity .2s ease;
  box-shadow: 0 12px 30px rgba(185,88,62,.28);
}
.project-cursor b { font-size: 15px; line-height: 1; margin-top: 1px; font-weight: 400; }
.project-cursor.is-active { opacity: 1; }

.signature-transition {
  position: relative;
  min-height: 185vh;
  margin: 2vh 0 5vh;
}
.signature-sticky {
  min-height: 100vh;
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.signature-lockup {
  position: relative;
  width: 100%;
  height: min(68vh, 720px);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.signature-word {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  font: 500 clamp(60px, 8.8vw, 150px)/.82 var(--sans);
  letter-spacing: -.075em;
  color: var(--ink);
  opacity: .94;
  will-change: transform, opacity;
}
.signature-make { left: 6%; }
.signature-move { right: 6%; }
.signature-amp {
  font: italic clamp(230px, 33vw, 520px)/.72 var(--serif);
  color: var(--terracotta);
  display: block;
  transform: rotate(-12deg) scale(.72);
  transform-origin: center;
  will-change: transform, opacity;
}
.signature-copy {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  margin: 0;
  width: min(720px, 88vw);
  text-align: center;
  font: 400 clamp(22px, 2.3vw, 34px)/1.25 var(--serif);
  color: #665A50;
  opacity: 0;
  will-change: transform, opacity;
}
.signature-copy em { color: var(--terracotta); font-weight: 400; }

/* Selected work gets a subtle editorial depth treatment while scrolling. */
.work-card { --copy-shift: 0px; --visual-shift: 0px; --visual-scale: 1; }
.work-copy {
  transform: translate3d(0,var(--copy-shift),0);
  will-change: transform;
}
.work-visual {
  transform: translate3d(0,var(--visual-shift),0) scale(var(--visual-scale));
  transform-origin: center;
  will-change: transform;
}
.work-card:hover .work-visual { transform: translate3d(0,var(--visual-shift),0) scale(var(--visual-scale)); }

/* Full-screen paper expansion for project previews. */
.project-layer {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  visibility: hidden;
}
.project-layer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.project-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43,39,35,.34);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .58s cubic-bezier(.22,1,.36,1);
}
.project-layer.is-open .project-backdrop { opacity: 1; }
.project-sheet {
  position: fixed;
  margin: 0;
  background: var(--paper);
  box-shadow: 0 35px 90px rgba(55,38,28,.28);
  overflow: hidden;
  border: 1px solid rgba(86,70,57,.08);
  z-index: 2;
  transform-origin: top left;
  will-change: transform, border-radius, opacity;
}
.project-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
.project-sheet-inner {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  min-height: 100%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .52s .24s cubic-bezier(.22,1,.36,1), transform .72s .20s cubic-bezier(.22,1,.36,1);
  position: relative;
  z-index: 1;
}
.project-layer.content-visible .project-sheet-inner { opacity: 1; transform: translateY(0); }
.project-sheet-visual {
  min-height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--stone);
  display: grid;
  place-items: center;
  padding: clamp(28px,4vw,62px);
}
.project-sheet-visual > * { max-width: 100%; }
.project-sheet-copy {
  padding: clamp(64px,7vw,110px) clamp(34px,5vw,78px) 42px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.project-sheet-copy h2 {
  font: 400 clamp(52px,6vw,94px)/.9 var(--serif);
  letter-spacing: -.055em;
  margin: 0 0 28px;
}
.project-sheet-summary {
  font-size: clamp(17px,1.4vw,21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 540px;
}
.project-sheet-meta {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid var(--line);
}
.project-meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.project-meta-row span:first-child { color: #8C7F72; text-transform: uppercase; letter-spacing: .11em; font-size: 9px; }
.project-sheet-footer {
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  justify-content: space-between;
  color: #8C7F72;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .12em;
}
.project-close {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 5;
  border: 0;
  background: rgba(246,241,231,.88);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 13px 10px 16px;
  font: 500 10px var(--sans);
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(45,34,28,.09);
}
.project-close span { font-size: 16px; margin-left: 6px; vertical-align: -1px; }
body.project-open { overflow: hidden; }

/* Give the contact close a stronger scroll payoff. */
.contact .button { position: relative; overflow: hidden; }
.contact .button::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(105deg,transparent 18%,rgba(255,255,255,.26) 46%,transparent 72%);
  transform: translateX(-130%);
}
.contact .button:hover::before { animation: buttonSheen .85s cubic-bezier(.16,1,.3,1); }
@keyframes buttonSheen { to { transform: translateX(130%); } }

@media (max-width: 760px) {
  .intro-curtain span { font-size: 44vw; }
  .project-cursor { display: none; }
  .signature-transition { min-height: auto; margin: 10px 0 70px; }
  .signature-sticky { min-height: 330px; position: relative; }
  .signature-lockup { height: 260px; }
  .signature-word { font-size: clamp(44px,15vw,68px); top: 48%; }
  .signature-make { left: 0; }
  .signature-move { right: 0; }
  .signature-amp { font-size: clamp(180px,58vw,270px); transform: rotate(-8deg) scale(.86); }
  .signature-copy { bottom: 4%; font-size: 20px; opacity: 1; }
  .project-sheet-inner { grid-template-columns: 1fr; overflow: auto; }
  .project-sheet-visual { min-height: 42vh; }
  .project-sheet-copy { padding: 38px 24px 28px; }
  .project-sheet-copy h2 { font-size: clamp(48px,15vw,72px); }
  .project-meta-row { grid-template-columns: 92px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-curtain { display: none; }
  .project-cursor { display: none; }
  .signature-transition { min-height: auto; }
  .signature-sticky { min-height: 420px; position: relative; }
  .signature-amp, .signature-word, .signature-copy { transform: none !important; opacity: 1 !important; }
  .project-sheet-inner { transition: none; opacity: 1; transform: none; }
}
.project-sheet-visual .project-art,
.project-sheet-visual .work-visual {
  position: relative;
  width: min(600px, 92%);
  height: min(58vh, 520px) !important;
  min-height: 360px;
  box-shadow: 0 24px 52px rgba(50,37,28,.16);
  overflow: hidden;
  transform: rotate(-1.2deg);
}
.project-sheet-visual[data-project="peppy"] { background: #EBD8D1; }
.project-sheet-visual[data-project="peppy"] .project-art,
.project-sheet-visual[data-project="peppy"] .work-visual { background: linear-gradient(135deg,#F4D9CF,#EADFD0 56%,#D8E2D1); }
.project-sheet-visual[data-project="clientquest"] { background: #D8CDDE; }
.project-sheet-visual[data-project="clientquest"] .project-art,
.project-sheet-visual[data-project="clientquest"] .work-visual { background: linear-gradient(145deg,#DBCFE4,#E7DCCD 65%,#C7B9A6); padding: 54px 44px; }
.project-sheet-visual[data-project="maison"] { background: #E8D7C3; }
.project-sheet-visual[data-project="maison"] .project-art,
.project-sheet-visual[data-project="maison"] .work-visual { background: linear-gradient(135deg,#E3C3A0,#8D6547); }
.project-sheet-visual[data-project="northstar"] { background: #D6D3DB; }
.project-sheet-visual[data-project="northstar"] .project-art,
.project-sheet-visual[data-project="northstar"] .work-visual { background: linear-gradient(#BBC5CB 0 45%,#58666C 45% 100%); }
.project-sheet-visual .phone { left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-2deg); }
.project-sheet-visual[data-project="peppy"] .mini-progress { right: 11%; top: 15%; }
.project-sheet-visual .quest-window { max-width: 620px; max-height: 420px; margin: auto; }

@media (max-width: 760px) {
  .project-sheet-visual .project-art,
  .project-sheet-visual .work-visual { width: 92%; min-height: 300px; height: 36vh !important; }
  .project-sheet-visual[data-project="clientquest"] .project-art,
  .project-sheet-visual[data-project="clientquest"] .work-visual { padding: 28px 20px; }
  .project-sheet-visual[data-project="peppy"] .mini-progress { display: none; }
}

/* ----------------------------------------------------------------------
   V5: real client work + selected Rae & Riel identity
   ---------------------------------------------------------------------- */
.brand-image{display:block;width:118px;height:40px;overflow:hidden}
.brand-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.intro-curtain img{width:min(52vw,520px);height:auto;opacity:.96;filter:drop-shadow(0 14px 34px rgba(58,43,32,.12));transform:scale(.88);transition:transform 1.15s cubic-bezier(.22,1,.36,1),opacity .75s ease}
.page-ready .intro-curtain img{transform:scale(1.05);opacity:0}
.monogram-image{position:absolute;right:-8%;top:8%;width:380px;height:380px;object-fit:contain;opacity:.20;z-index:-1;pointer-events:none;will-change:transform}
.signature-amp-image{position:absolute;left:50%;top:50%;width:min(34vw,470px);height:min(34vw,470px);object-fit:contain;transform:translate(-50%,-50%);opacity:.72;filter:saturate(.92);will-change:transform,opacity,filter}

.project-zeedz{width:385px;left:0;top:28px}
.project-streamiverse{width:360px;left:42%;top:90px}
.project-community{width:225px;right:1%;top:6px}
.project-peppy-small{width:225px;right:2%;bottom:20px}
.project-zeedz .project-art{height:305px;background:#1d242d}
.project-streamiverse .project-art{height:278px}
.project-community .project-art{height:158px;background:#202834}
.project-peppy-small .project-art{height:150px;background:linear-gradient(135deg,#F4D9CF,#EADFD0 56%,#D8E2D1)}
.note-zeedz{left:-3px;top:-24px}
.note-stream{right:-4px;top:-22px}
.image-art{padding:0!important}
.image-art img{display:block;width:100%;height:100%;object-fit:cover}
.zeedz-art img{object-position:center 38%}
.community-art img{object-position:center 18%}
.editorial-art{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:34px!important;background:linear-gradient(145deg,#D6CBDC,#E9DFD2 58%,#C5B6A4)!important;color:var(--ink);overflow:hidden}
.editorial-art:after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(217,119,87,.6);border-radius:50%;top:-74px;right:-76px}
.editorial-art .editorial-kicker{font-size:9px;letter-spacing:.18em;color:#6F6258;margin-bottom:auto}
.editorial-art strong{font:500 42px/.9 var(--serif);letter-spacing:-.04em}
.editorial-art small{max-width:230px;font-size:11px;line-height:1.45;color:#665B52;margin-top:12px}
.editorial-art i{font:400 28px var(--serif);color:var(--terracotta);position:absolute;right:24px;bottom:22px}
.compact-product-art .phone{transform:scale(.72) rotate(-3deg);left:31px;top:-12px}

.image-work-visual{padding:0!important;overflow:hidden;background:#241f20}
.image-work-visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.work-card:hover .image-work-visual img{transform:scale(1.035)}
.editorial-work-visual{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:24px!important;background:linear-gradient(150deg,#CFC2D8,#EFE2D7);overflow:hidden}
.editorial-work-visual:before{content:"";position:absolute;inset:18px;border:1px solid rgba(217,119,87,.55)}
.editorial-work-visual span{font-size:8px;letter-spacing:.16em;color:#6F6258;margin-bottom:auto}
.editorial-work-visual strong{font:500 30px/.95 var(--serif);letter-spacing:-.03em}
.editorial-work-visual small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-top:12px;color:#796B60}

.featured-case{padding:110px 0 90px}
.featured-case-heading{display:grid;grid-template-columns:.55fr 1.25fr;gap:46px;align-items:end;margin-bottom:54px}
.featured-case-heading .eyebrow{grid-column:1/-1;margin:0}
.featured-case-heading h2{font:500 84px/.92 var(--serif);letter-spacing:-.055em}
.featured-case-lede{font-size:18px;line-height:1.55;color:#685D53;max-width:760px;margin:0}
.featured-case-lede strong{color:var(--terracotta);font-weight:600}
.featured-case-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:68px;align-items:start}
.case-copy{padding-top:18px}
.case-stat{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:32px}
.case-stat strong{font:500 76px/.9 var(--serif);color:var(--terracotta);letter-spacing:-.04em}
.case-stat span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#786C61;margin-top:8px}
.case-block{padding:20px 0;border-bottom:1px solid var(--line)}
.case-label{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.case-block p{margin:9px 0 0;color:#6B6056;line-height:1.6;font-size:13px}
.case-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px}
.case-board{position:relative;min-height:700px}
.case-paper{position:absolute;margin:0;padding:14px 14px 46px;background:#FBF7EF;box-shadow:0 28px 52px rgba(57,42,31,.14);border:1px solid rgba(91,74,60,.12);transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1)}
.case-paper img{width:100%;display:block}
.case-paper figcaption{font:italic 17px var(--serif);color:#4D433B;margin-top:14px}
.case-paper-one{width:66%;left:0;top:26px;transform:rotate(-3.4deg)}
.case-paper-two{width:56%;right:0;bottom:22px;transform:rotate(4.1deg)}
.case-board:hover .case-paper-one{transform:rotate(-1.5deg) translateY(-6px)}
.case-board:hover .case-paper-two{transform:rotate(2deg) translateY(-8px)}
.case-pin{position:absolute;right:12%;top:4%;z-index:4}

.more-work{padding:56px 0 110px}
.more-work-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:48px;margin-bottom:34px}
.more-work-heading h2{font:500 45px/.98 var(--serif);letter-spacing:-.035em;max-width:600px}
.more-work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.more-work-card{position:relative;min-height:245px;padding:28px;background:rgba(251,247,239,.72);border:1px solid var(--line);transition:transform .55s cubic-bezier(.22,1,.36,1),background-color .45s ease,box-shadow .55s ease}
.more-work-card:nth-child(2){background:#E7ECDF}
.more-work-card:nth-child(3){background:#E6DDE9}
.more-work-card:hover{transform:translateY(-7px) rotate(-.3deg);box-shadow:0 18px 38px rgba(58,43,32,.10)}
.more-work-card>span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.more-work-card h3{font:500 29px/1 var(--serif);margin:58px 0 12px;letter-spacing:-.03em}
.more-work-card p{font-size:12px;line-height:1.55;color:#6B6056;max-width:300px}
.more-work-card a{position:absolute;left:28px;bottom:24px;color:var(--ink);font-size:11px;text-underline-offset:4px;text-decoration-color:var(--terracotta)}
.studio-logo-mark{width:190px;height:190px;display:flex;align-items:center;justify-content:center}
.studio-logo-mark img{max-width:100%;max-height:100%;object-fit:contain;opacity:.4}

.project-sheet-visual[data-project="zeedz"]{background:#D8B7AD}
.project-sheet-visual[data-project="zeedz"] .project-art,.project-sheet-visual[data-project="zeedz"] .work-visual{padding:0;background:#202834}
.project-sheet-visual[data-project="zeedz"] img{width:100%;height:100%;object-fit:cover}
.project-sheet-visual[data-project="streamiverse"]{background:#D8CCDF}
.project-sheet-visual[data-project="streamiverse"] .project-art,.project-sheet-visual[data-project="streamiverse"] .work-visual{background:linear-gradient(145deg,#D6CBDC,#E9DFD2 58%,#C5B6A4);padding:44px}
.project-sheet-visual[data-project="community"]{background:#EFE6D8}
.project-sheet-visual[data-project="community"] .project-art,.project-sheet-visual[data-project="community"] .work-visual{padding:0;background:#202834}
.project-sheet-visual[data-project="community"] img{width:100%;height:100%;object-fit:cover}

@media(max-width:1100px){
  .project-zeedz{width:345px;left:2%}.project-streamiverse{width:330px;left:43%}.project-community{right:3%}.project-peppy-small{right:4%}
  .featured-case-grid{gap:40px}.case-board{min-height:620px}
}
@media(max-width:760px){
  .brand-image{width:102px;height:34px}.brand-note{display:none}
  .monogram-image{width:280px;height:280px;right:-30%;top:24%}
  .hero-board{height:820px}
  .project-zeedz{width:76%;left:0;top:40px}.project-streamiverse{width:72%;right:0;left:auto;top:365px}.project-community{width:48%;right:0;top:42px}.project-peppy-small{width:49%;left:1%;right:auto;bottom:4px}
  .project-zeedz .project-art{height:250px}.project-streamiverse .project-art{height:220px}.project-community .project-art,.project-peppy-small .project-art{height:124px}
  .editorial-art{padding:24px!important}.editorial-art strong{font-size:34px}
  .signature-amp-image{width:58vw;height:58vw}
  .featured-case{padding:78px 0 65px}.featured-case-heading{grid-template-columns:1fr;gap:18px;margin-bottom:34px}.featured-case-heading .eyebrow{grid-column:auto}.featured-case-heading h2{font-size:62px}.featured-case-lede{font-size:15px}
  .featured-case-grid{grid-template-columns:1fr;gap:30px}.case-board{min-height:560px}.case-paper-one{width:82%}.case-paper-two{width:72%}.case-stat strong{font-size:62px}
  .more-work{padding-bottom:80px}.more-work-heading{display:block}.more-work-heading h2{font-size:38px;margin-top:12px}.more-work-grid{grid-template-columns:1fr}
  .studio-logo-mark{width:145px;height:145px}
}
@media(max-width:430px){
  .hero-board{height:770px}.project-zeedz{width:79%}.project-streamiverse{width:77%;top:342px}.project-community{width:50%}.project-peppy-small{width:52%}
  .case-board{min-height:500px}.case-paper figcaption{font-size:14px}.case-paper{padding:10px 10px 38px}.case-paper-one{width:86%}.case-paper-two{width:76%}
}
.more-work-status{position:absolute;left:28px;bottom:24px;font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase;color:#776A60!important}
@media (prefers-reduced-motion: reduce){.signature-amp-image{transform:translate(-50%,-50%)!important}}

/* --- V6: scrollable selected work + animated paper fasteners ------------ */
.work-scroll-hint{
  margin:-22px 0 18px auto;
  width:max-content;
  font-size:10px;
  letter-spacing:.06em;
  color:#8a7d72;
}
.work-scroll-hint span{color:var(--terracotta);display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.work:hover .work-scroll-hint span{transform:translateX(4px)}
.work-track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  overflow-y:visible;
  padding:18px 14px 40px 10px;
  margin:0 -10px;
  scroll-snap-type:x mandatory;
  scroll-padding-left:10px;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.work-track::-webkit-scrollbar{display:none}
.work-track:focus-visible{outline:1px solid rgba(217,119,87,.42);outline-offset:8px;border-radius:4px}
.work-track .work-card{
  flex:0 0 clamp(360px,32vw,470px);
  min-height:286px;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
.work-track .work-card:hover{z-index:4}

/* The screenshot is framed, not cropped, so portrait/chat proof can live in a landscape card. */
.proof-cover{
  display:grid;
  place-items:center;
  padding:18px!important;
  overflow:hidden!important;
  isolation:isolate;
}
.proof-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.03)), radial-gradient(circle at 80% 10%,rgba(217,119,87,.18),transparent 45%);
  z-index:-1;
}
.zeedz-proof-cover{background:#20262d}
.community-proof-cover{background:#273039}
.proof-cover img{
  width:90%;
  height:84%;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 16px 30px rgba(24,20,18,.22);
  transform:rotate(.7deg) scale(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1),box-shadow .9s cubic-bezier(.22,1,.36,1);
}
.work-card:hover .proof-cover img{transform:rotate(0deg) scale(1.025);box-shadow:0 20px 36px rgba(24,20,18,.28)}

.sage-work-card{background:#DDE5D6}
.blush-soft-card{background:#E6CEC6}
.clientquest-card{background:#E7DFD4}
.crystale-cover{background:#0f1d19!important}
.breadcrumbs-cover{background:linear-gradient(145deg,#ECD6CE,#F4EEE5)!important}
.clientquest-cover{background:linear-gradient(145deg,#D9CCDE,#EFE4D8)!important}

/* Paper hardware is part of the object, not a static decoration. */
.work-fastener,.work-tape{
  --fastener-shift:0px;
  --fastener-rot:0deg;
  will-change:transform;
  transition:filter .35s ease,box-shadow .35s ease;
}
.work-fastener{
  transform:translate3d(0,var(--fastener-shift),0) rotate(var(--fastener-rot));
}
.work-tape{
  position:absolute;
  top:-11px;
  left:50%;
  width:72px;
  height:24px;
  z-index:8;
  opacity:.8;
  transform:translate3d(-50%,var(--fastener-shift),0) rotate(calc(-2deg + var(--fastener-rot)));
  box-shadow:0 3px 7px rgba(50,38,30,.08);
  backdrop-filter:blur(.5px);
}
.work-tape::after{content:"";position:absolute;inset:0;border-left:1px solid rgba(255,255,255,.28);border-right:1px solid rgba(100,80,60,.05)}
.tape-terra{background:rgba(217,119,87,.58)}
.tape-terra-soft{background:rgba(217,119,87,.36)}
.tape-cream{background:rgba(239,230,216,.88)}
.tape-blush{background:rgba(216,183,173,.72)}
.work-card:hover .work-tape{filter:saturate(1.05);box-shadow:0 5px 10px rgba(50,38,30,.12)}

/* Make & Move uses the standalone brand ampersand so it cannot read as “Make R&R Move.” */
.signature-amp-image{width:min(25vw,360px);height:min(32vw,430px)}

@media (max-width:1020px){
  .work-track .work-card{flex-basis:min(68vw,520px)}
  .work-scroll-hint{margin-top:0}
}
@media (max-width:760px){
  .work-track{gap:16px;padding:16px 9vw 34px 4px;margin-right:calc((100vw - 100%)/-2)}
  .work-track .work-card{flex-basis:84vw;min-height:270px}
  .work-scroll-hint{display:none}
  .signature-amp-image{width:42vw;height:48vw}
}
@media (max-width:430px){
  .work-track .work-card{flex-basis:88vw}
}

/* V7 evidence sections: real client work replaces placeholders. */
.evidence-section{margin-top:70px;padding-top:42px;border-top:1px solid rgba(43,39,35,.14)}
.evidence-heading{max-width:720px;margin-bottom:28px}
.evidence-heading h3{font-family:var(--serif);font-size:clamp(38px,4vw,66px);line-height:.98;font-weight:400;margin:8px 0 14px}
.evidence-heading p:last-child{max-width:680px;color:var(--muted);line-height:1.65}
.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.evidence-grid-calendar{grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr)}
.evidence-card{position:relative;background:#F8F2E9;padding:14px 14px 12px;box-shadow:0 18px 44px rgba(43,39,35,.10);border:1px solid rgba(43,39,35,.08);transform:rotate(.4deg);overflow:visible}
.evidence-card:nth-child(even){transform:rotate(-.5deg)}
.evidence-card img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#fff}
.evidence-card figcaption{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.evidence-card .work-tape{top:-8px}
.evidence-card .work-fastener{position:absolute;top:-8px;left:50%;z-index:8}
.evidence-feature{grid-column:1 / -1}
.streamiverse-case{padding-top:86px}
.streamiverse-grid{grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr)}
.streamiverse-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.streamiverse-gallery .evidence-feature{grid-column:1 / -1}
.streamiverse-gallery .evidence-feature img{max-height:540px;object-fit:cover;object-position:center}
.streamiverse-gallery .evidence-card:not(.evidence-feature) img{aspect-ratio:1/1;object-fit:cover}
.stream-cover{background:#17121c}
.stream-cover img{width:100%;height:100%;object-fit:cover;object-position:center}

@media (max-width:900px){
  .evidence-grid,.evidence-grid-calendar,.streamiverse-grid{grid-template-columns:1fr}
  .streamiverse-gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .evidence-section{margin-top:46px;padding-top:30px}
  .streamiverse-gallery{grid-template-columns:1fr}
  .streamiverse-gallery .evidence-feature{grid-column:auto}
  .evidence-card img{max-height:none}
}

/* V8 Zeedz teaser refinement */
.case-system-teaser{display:grid;grid-template-columns:.7fr 1.3fr;gap:42px;align-items:start}
.case-system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.case-system-grid article{background:var(--paper);border:1px solid rgba(81,67,54,.08);padding:22px 20px 24px;min-height:155px;box-shadow:0 10px 28px rgba(66,48,35,.05)}
.case-system-grid article span{font:italic 12px var(--serif);color:var(--terracotta)}
.case-system-grid article h4{font:500 16px var(--sans);margin:24px 0 8px}
.case-system-grid article p{font-size:12px;line-height:1.5;color:#6B6259;margin:0}
@media(max-width:900px){.case-system-teaser{grid-template-columns:1fr}.case-system-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.case-system-grid{grid-template-columns:1fr}}

/* V9 polish: clearer project CTA, less cropping, tighter real-work galleries */
.project-sheet-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:max-content;
  margin-top:22px;
  padding:14px 20px;
  border-radius:999px;
  background:var(--terracotta);
  color:#fff;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  box-shadow:0 12px 28px rgba(217,119,87,.2);
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease;
}
.project-sheet-cta:hover{transform:translateY(-2px);background:#bf6247;box-shadow:0 16px 34px rgba(217,119,87,.26)}
.project-sheet-cta[hidden]{display:none!important}
.project-sheet-visual[data-project="zeedz"]{padding:42px;background:#D8B7AD}
.project-sheet-visual[data-project="zeedz"] .project-art,
.project-sheet-visual[data-project="zeedz"] .work-visual{background:transparent!important;padding:0!important;width:min(92%,700px);height:auto!important;min-height:0!important;overflow:visible;margin:auto}
.project-sheet-visual[data-project="zeedz"] img{width:100%!important;height:auto!important;object-fit:contain!important;box-shadow:0 22px 50px rgba(43,39,35,.16)}
.project-sheet-visual[data-project="streamiverse"] .project-art,
.project-sheet-visual[data-project="streamiverse"] .work-visual{padding:24px!important}
.project-sheet-visual[data-project="streamiverse"] img,
.project-sheet-visual[data-project="community"] img{object-fit:contain!important}
.streamiverse-gallery{gap:10px}
.streamiverse-gallery .evidence-card{padding:9px 9px 10px}
.streamiverse-gallery .evidence-feature img{object-fit:contain;background:#fff}
.streamiverse-gallery .evidence-card:not(.evidence-feature) img{object-fit:contain;background:#fff}

@media(max-width:760px){
  .project-sheet-visual[data-project="zeedz"]{padding:24px 16px}
  .project-sheet-cta{width:100%;justify-content:center}
  .streamiverse-gallery{gap:8px}
}

/* ----------------------------------------------------------------------
   V10: unclipped paper hardware + clearer kinetic studio transition
   ---------------------------------------------------------------------- */
.paper-card{
  contain:none;
  overflow:visible;
}
.hero-board{padding-top:22px}
.hero-fastener{
  --hero-fastener-shift:0px;
  --hero-fastener-rot:0deg;
  will-change:transform;
  pointer-events:none;
}
.tape.hero-fastener{
  top:-9px;
  transform:translate3d(0,var(--hero-fastener-shift),0) rotate(calc(-2deg + var(--hero-fastener-rot)));
  box-shadow:0 4px 10px rgba(64,47,37,.10);
}
.pin.hero-fastener{
  top:-6px;
  transform:translate3d(0,var(--hero-fastener-shift),0) rotate(var(--hero-fastener-rot));
}
.project-zeedz .project-art{height:217px;background:#1d242d}
.zeedz-art img{object-fit:cover;object-position:center center}

/* Give fasteners breathing room in the horizontal work rail. */
.work-track{padding-top:34px}

/* Replace the decorative MAKE & MOVE interlude with useful scrollytelling. */
.signature-transition{position:relative;min-height:205vh;margin:2vh 0 5vh}
.signature-sticky{min-height:100vh;position:sticky;top:0;display:grid;align-content:center;overflow:hidden;padding-top:7vh;padding-bottom:7vh}
.kinetic-eyebrow{margin:0 0 34px;font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--terracotta);font-weight:600;position:relative;z-index:3}
.kinetic-stack{position:relative;z-index:2;display:grid;gap:2px;width:100%}
.kinetic-row{display:grid;grid-template-columns:52px minmax(0,1fr) 230px;align-items:baseline;border-top:1px solid var(--line);padding:12px 0 8px;will-change:transform,opacity,filter}
.kinetic-row:last-child{border-bottom:1px solid var(--line)}
.kinetic-row>span{font:italic 13px var(--serif);color:var(--terracotta)}
.kinetic-row>strong{font:500 clamp(72px,10.5vw,176px)/.82 var(--sans);letter-spacing:-.075em;color:var(--ink)}
.kinetic-row>small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7A6E63;text-align:right}
.kinetic-amp{position:absolute;right:4%;top:49%;width:min(31vw,430px);height:min(36vw,500px);object-fit:contain;opacity:.10;transform:translateY(-50%) rotate(-8deg) scale(.86);will-change:transform,opacity;pointer-events:none;z-index:1}
.kinetic-copy{position:relative;z-index:3;margin:28px 0 0 auto;width:min(620px,58vw);font:400 clamp(21px,2.1vw,31px)/1.3 var(--serif);color:#665A50;text-align:right;will-change:transform,opacity}

@media(max-width:760px){
  .hero-board{padding-top:30px}
  .project-zeedz .project-art{height:190px}
  .signature-transition{min-height:auto;margin:18px 0 74px}
  .signature-sticky{min-height:auto;position:relative;padding:74px 0;overflow:hidden}
  .kinetic-eyebrow{margin-bottom:26px}
  .kinetic-stack{gap:0}
  .kinetic-row{grid-template-columns:32px 1fr;padding:14px 0 12px}
  .kinetic-row>strong{font-size:clamp(48px,15vw,72px)}
  .kinetic-row>small{grid-column:2;text-align:left;margin-top:4px;font-size:9px}
  .kinetic-amp{right:-18%;width:62vw;height:68vw;opacity:.08}
  .kinetic-copy{width:86%;margin:28px 0 0;font-size:21px;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .kinetic-row,.kinetic-amp,.kinetic-copy{transform:none!important;opacity:1!important;filter:none!important}
}


/* Mobile overflow fixes: keep long words and status chips inside their cards */
@media(max-width:640px){
  .featured-case-heading{grid-template-columns:minmax(0,1fr)}
  .featured-case-heading h2{font-size:min(62px,calc((100vw - 32px)/5.4))}
  .featured-case-grid{grid-template-columns:minmax(0,1fr)}
  .card-caption.compact .card-title-row{flex-wrap:wrap;row-gap:6px}
  .site-header .brand{display:inline-flex;align-items:center;min-height:44px}
  .hero .button,.contact .button{min-height:44px}
}

/* ----------------------------------------------------------------------
   Brand assets, studio mark and Streamiverse homepage section balance
   ---------------------------------------------------------------------- */
/* Studio: real monogram, faded into the cream rather than a font ampersand */
.studio-logo-mark{width:230px;height:230px}
.studio-logo-mark img{width:100%;height:100%;object-fit:contain;opacity:.2;mix-blend-mode:multiply}
@media(max-width:760px){.studio-logo-mark{width:130px;height:130px}}

/* Streamiverse artwork is square: every frame keeps the art 1:1 with even matte, no letterbox bars */
.streamiverse-gallery .evidence-card img,
.streamiverse-gallery .evidence-feature img{width:100%;height:auto;max-height:none;aspect-ratio:1/1;object-fit:contain;object-position:center;background:#fff}

@media(min-width:901px){
  /* Left column: scope, link and external links. Right column: artwork. Centred on each other. */
  .streamiverse-grid{grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);gap:56px;align-items:center}
  .streamiverse-grid .case-copy{padding-top:0}
  .streamiverse-grid .case-links{flex-direction:column;align-items:flex-start;gap:14px;margin-top:8px}
  /* 4-column gallery: feature art fills a 2x2 block, four supporting squares fill the other 2x2 */
  .streamiverse-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
  .streamiverse-gallery .evidence-feature{grid-column:1 / span 2;grid-row:1 / span 2}
}
@media(max-width:900px){
  .streamiverse-gallery .evidence-feature{max-width:560px;justify-self:center;width:100%}
}
@media(max-width:640px){
  .streamiverse-gallery .evidence-feature{max-width:none}
}

/* decorative monogram / parallax pieces bleed off the right edge by design; clip at the viewport, not the page */
main{overflow-x:clip}