@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f1ede5;--ink:#10100f;--muted:#6d675f;--orange:#ff5b24;--line:rgba(16,16,15,.18);--white:#faf8f3}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Geist",Arial,sans-serif}a{color:inherit;text-decoration:none}
.nav{position:fixed;z-index:50;top:0;left:0;width:100%;padding:22px 30px;display:flex;justify-content:space-between;mix-blend-mode:difference;color:#fff;font-size:11px;letter-spacing:.15em;text-transform:uppercase}.nav div{display:flex;gap:24px}
.hero{min-height:96vh;padding:125px 30px 30px;display:flex;flex-direction:column;justify-content:space-between}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase}.hero h1,.mega{font-size:clamp(65px,10.5vw,164px);line-height:.78;letter-spacing:-.075em;margin:0;font-weight:600}.serif{font-family:"Instrument Serif";font-weight:400;font-style:italic}.hero-foot{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;align-items:end}.hero-foot p{max-width:470px;font-size:15px;line-height:1.5;margin:0}
.work{padding:120px 30px}.work-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:48px}.work-head h2{font-size:clamp(55px,8vw,120px);line-height:.82;letter-spacing:-.065em;margin:0}
.card{display:block;border-top:1px solid var(--line);padding:24px 0 95px}.meta{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:20px}.visual{position:relative;height:min(72vh,760px);overflow:hidden;background:#d8d0c5}.visual img{width:100%;height:100%;object-fit:cover;object-position:50% 5%;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .7s}.card:hover .visual img{transform:scale(1.035)}
.project-title{font-size:clamp(48px,7vw,105px);letter-spacing:-.06em;line-height:.86;margin:22px 0 0;display:flex;justify-content:space-between;align-items:end}.project-title span:last-child{font-size:13px;letter-spacing:0;color:var(--muted);font-weight:400}
.placeholder{height:min(65vh,650px);position:relative;overflow:hidden;background:#161616;color:#fff;display:flex;align-items:center;justify-content:center}.placeholder:before{content:"";position:absolute;width:45vw;height:45vw;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:translate(-25%,-5%)}.placeholder:after{content:"";position:absolute;width:28vw;height:28vw;border:1px solid rgba(255,255,255,.18);transform:rotate(35deg) translate(45%,5%)}.placeholder.light{background:#d9d0c4;color:#111}.placeholder.orange{background:#e8612a}.placeholder.green{background:#4c9e85}.placeholder .pmark{position:relative;z-index:2;text-align:center}.pmark b{font-size:clamp(54px,9vw,130px);letter-spacing:-.07em}.pmark small{display:block;margin-top:12px;text-transform:uppercase;letter-spacing:.16em}
.about{padding:140px 30px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:8vw}.about h2{font-size:clamp(58px,8vw,115px);line-height:.82;letter-spacing:-.065em;margin:0}.about p{font-size:20px;line-height:1.5;max-width:600px}.caps{font-size:12px;text-transform:uppercase;letter-spacing:.13em;line-height:2}
.contact{min-height:80vh;background:#111;color:#f7f3eb;padding:100px 30px 30px;display:flex;flex-direction:column;justify-content:space-between}.contact h2{font-size:clamp(70px,11vw,170px);line-height:.77;letter-spacing:-.075em;margin:0}.contact-foot{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.25);padding-top:18px;font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.reveal{opacity:0;transform:translateY(45px);transition:.9s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}
.casehero{min-height:100vh;padding:120px 30px 40px;display:flex;flex-direction:column;justify-content:space-between}.casehero h1{font-size:clamp(68px,10vw,155px);line-height:.8;letter-spacing:-.075em;margin:0}.caseintro{padding:140px 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:8vw}.caseintro h2{font-size:clamp(58px,7.5vw,112px);line-height:.86;letter-spacing:-.06em;margin:0}.caseintro p{font-size:18px;line-height:1.55}.statement{padding:150px 30px}.statement h2{font-size:clamp(65px,9vw,145px);line-height:.83;letter-spacing:-.07em;margin:0}
.exp{padding:45px 30px 100px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.35fr .65fr;gap:36px;align-items:center}.screen{height:75vh;overflow:hidden}.screen img{width:100%;height:100%;object-fit:cover;object-position:50% 5%}.exp h3{font-size:clamp(42px,5vw,76px);line-height:.92;letter-spacing:-.05em;margin:18px 0}.exp p{font-size:16px;line-height:1.55;color:var(--muted)}
.dark{background:#111;color:#f7f3eb;padding:150px 30px}.dark h2{font-size:clamp(65px,9vw,145px);line-height:.82;letter-spacing:-.07em}.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid rgba(255,255,255,.25);padding-top:28px}.impact b{color:#ff7040;font-size:11px;letter-spacing:.14em;text-transform:uppercase}.impact p{line-height:1.5;color:#d6d0c7}
@media(max-width:800px){.nav{padding:18px}.hero,.work,.about,.contact,.casehero,.caseintro,.statement,.exp,.dark{padding-left:18px;padding-right:18px}.hero h1{font-size:20vw}.hero-foot,.about,.caseintro,.exp{display:block}.hero-foot p{margin-bottom:18px}.visual,.placeholder{height:58vh}.project-title{display:block}.project-title span:last-child{display:block;margin-top:15px}.impact{grid-template-columns:1fr}.screen{height:60vh}.about p{margin-top:45px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* V3 project index — inspired by the user's card reference */
.project-index{padding:115px 30px 145px;background:#c9e5ea}
.project-index-head{margin-bottom:52px}
.project-index-head h2{font-size:clamp(70px,10vw,150px);line-height:.78;letter-spacing:-.075em;margin:12px 0 30px;font-weight:500}
.project-index-head p{max-width:560px;font-size:15px;line-height:1.5;margin:0}
.project-card-grid{display:grid;grid-template-columns:repeat(5,minmax(260px,1fr));gap:20px;overflow-x:auto;padding-bottom:20px;scroll-snap-type:x mandatory}
.index-card{background:#f7f5f1;border-radius:14px;padding:22px;min-height:600px;display:flex;flex-direction:column;scroll-snap-align:start;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.index-card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.index-card-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:#666;text-transform:uppercase}
.index-card h3{font-size:clamp(38px,3.2vw,58px);line-height:.9;letter-spacing:-.055em;margin:24px 0 18px;font-weight:500}
.index-card p{font-size:13px;line-height:1.45;color:#625d56;margin:0 0 22px}
.index-thumb{margin-top:auto;height:330px;overflow:hidden;background:#ddd}
.index-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 4%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.index-card:hover .index-thumb img{transform:scale(1.045)}
.placeholder-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.placeholder-thumb:before{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(0,0,0,.14);border-radius:50%;transform:translate(-35%,-20%)}
.placeholder-thumb b{font-size:76px;letter-spacing:-.07em;position:relative}
.placeholder-thumb small{font-size:10px;letter-spacing:.16em;margin-top:8px;position:relative}
.p2{background:#ddd2c6}.p3{background:#ef6b39}.p4{background:#62a78e}.p5{background:#191919;color:white}.p5:before{border-color:rgba(255,255,255,.2)}
@media(max-width:1100px){.project-card-grid{grid-template-columns:repeat(5,340px)}}
@media(max-width:800px){.project-index{padding:90px 18px 110px}.project-card-grid{grid-template-columns:repeat(5,82vw);gap:14px}.index-card{min-height:540px}.index-thumb{height:285px}}

/* V4 — 3-up editorial project grid */
.project-index{
  background:#e8e2d8;
  padding:120px 30px 150px;
}
.project-index-head{
  display:grid;
  grid-template-columns:1fr .65fr;
  align-items:end;
  gap:7vw;
  margin-bottom:55px;
}
.project-index-head h2{
  font-size:clamp(70px,9.5vw,145px);
  line-height:.78;
  letter-spacing:-.075em;
  margin:12px 0 0;
  font-weight:500;
}
.project-index-head p{
  max-width:470px;
  font-size:15px;
  line-height:1.55;
  margin:0 0 8px;
  color:#5f5951;
}
.project-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  overflow:visible;
  padding:0;
}
.index-card{
  background:#f8f6f1;
  border-radius:18px;
  padding:20px;
  min-height:620px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(16,16,15,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,background .45s;
}
.index-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 55px rgba(33,27,20,.10);
  background:#fffdf9;
}
.index-card-top{font-size:10px;color:#706a61}
.index-card h3{
  font-size:clamp(43px,4.4vw,68px);
  line-height:.88;
  letter-spacing:-.06em;
  margin:28px 0 18px;
}
.index-card p{
  font-size:12px;
  letter-spacing:.02em;
  color:#6b655d;
  margin-bottom:22px;
}
.index-thumb{
  height:350px;
  border-radius:11px;
}
.project-card-grid .index-card:nth-child(4),
.project-card-grid .index-card:nth-child(5){
  margin-top:8px;
}
.project-card-grid .index-card:nth-child(4){grid-column:1 / 2}
.project-card-grid .index-card:nth-child(5){grid-column:2 / 3}

/* Subtle contemporary tonal accents rather than a bright SaaS palette */
.p2{background:#d9d1c7}
.p3{background:#c95e38;color:#171411}
.p4{background:#8fae9e}
.p5{background:#23211f;color:#f8f5ef}

@media(max-width:1050px){
  .project-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-card-grid .index-card:nth-child(4),
  .project-card-grid .index-card:nth-child(5){grid-column:auto;margin-top:0}
  .project-index-head{grid-template-columns:1fr}
}
@media(max-width:680px){
  .project-index{padding:90px 18px 110px}
  .project-card-grid{grid-template-columns:1fr}
  .index-card{min-height:540px}
  .index-thumb{height:300px}
}

/* V5 animated capabilities band */
.capability-band{
  overflow:hidden;
  background:#11100f;
  color:#f4efe6;
  border-top:1px solid #11100f;
  border-bottom:1px solid #11100f;
  padding:19px 0 18px;
}
.capability-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:24px;
  white-space:nowrap;
  animation:capability-marquee 34s linear infinite;
  will-change:transform;
}
.capability-track span{
  font-size:13px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:500;
}
.capability-track i{
  color:#ff6b35;
  font-style:normal;
  font-size:13px;
}
.capability-band:hover .capability-track{animation-play-state:paused}
@keyframes capability-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .capability-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding:0 18px}
}

/* V6 typography — Geist + Instrument Serif */
body{
  font-family:"Geist",Arial,sans-serif;
  font-optical-sizing:auto;
}
.hero h1,.mega,.work-head h2,.project-index-head h2,.about h2,.contact h2,
.casehero h1,.caseintro h2,.statement h2,.dark h2,.project-title,.index-card h3,.exp h3{
  font-family:"Geist",Arial,sans-serif;
  font-weight:500;
}
.serif{
  font-family:"Instrument Serif",Georgia,serif!important;
  font-weight:400!important;
  font-style:italic;
  letter-spacing:-.035em;
}
.eyebrow,.meta,.index-card-top,.caps,.contact-foot,.capability-track span{
  font-family:"Geist Mono","Courier New",monospace;
  letter-spacing:.09em;
}
.hero h1,.project-index-head h2,.contact h2,.casehero h1,.statement h2,.dark h2{
  letter-spacing:-.072em;
}
.index-card h3{
  letter-spacing:-.055em;
}
.hero-foot p,.project-index-head p,.about p,.caseintro p,.exp p,.impact p{
  letter-spacing:-.012em;
}

/* V7 — unified type hierarchy */
:root{
  --display:"Geist",Arial,sans-serif;
  --accent:"Instrument Serif",Georgia,serif;
  --body:"Geist",Arial,sans-serif;
  --meta:"Geist Mono","Courier New",monospace;
  --display-xl:clamp(68px,10vw,156px);
  --display-lg:clamp(58px,8vw,122px);
  --project-title:clamp(43px,4.4vw,68px);
  --body-lg:20px;
  --body-size:16px;
  --small:13px;
  --label:11px;
}
body{font-family:var(--body);font-size:var(--body-size);line-height:1.55}
.hero h1,.project-index-head h2,.contact h2,.casehero h1,.statement h2,.dark h2{
  font-family:var(--display);font-size:var(--display-xl);font-weight:500;line-height:.80;letter-spacing:-.072em
}
.about h2,.caseintro h2,.work-head h2{
  font-family:var(--display);font-size:var(--display-lg);font-weight:500;line-height:.84;letter-spacing:-.065em
}
.index-card h3,.project-title,.exp h3{
  font-family:var(--display);font-size:var(--project-title);font-weight:500;line-height:.9;letter-spacing:-.055em
}
.serif{font-family:var(--accent)!important;font-weight:400!important;font-style:italic;letter-spacing:-.035em}
.hero-foot p,.project-index-head p,.caseintro p,.exp p,.impact p{
  font-family:var(--body);font-size:var(--body-size);font-weight:400;line-height:1.55;letter-spacing:-.012em
}
.about p{font-family:var(--body);font-size:var(--body-lg);font-weight:400;line-height:1.5;letter-spacing:-.018em}
.index-card p{font-family:var(--body);font-size:var(--small);font-weight:400;line-height:1.45;letter-spacing:-.005em}
.nav,.eyebrow,.meta,.index-card-top,.caps,.contact-foot,.capability-track span{
  font-family:var(--meta);font-size:var(--label);font-weight:500;line-height:1.35;letter-spacing:.09em;text-transform:uppercase
}
.capability-track span{font-size:12px;letter-spacing:.1em}
@media(max-width:680px){
  :root{--body-lg:18px;--body-size:15px;--small:12px;--label:10px}
}

/* V8 — color + motion system */
:root{
 --tone-blue:#c6dfe3; --tone-sand:#ddd1c1; --tone-orange:#d9663f;
 --tone-sage:#9fb5a5; --tone-burgundy:#6d303b;
}
.hero h1{overflow:visible}
.hero h1.reveal{clip-path:inset(0 0 100% 0);transform:none;opacity:1;transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.hero h1.reveal.in{clip-path:inset(0 0 0 0)}

.ticker-accent{
 font-family:var(--accent)!important;font-style:italic;font-size:18px!important;
 letter-spacing:-.01em!important;text-transform:none!important;color:#ff7040
}

/* project cards now have their own restrained identities */
.index-card[data-tone="blue"]:hover{background:var(--tone-blue)}
.index-card[data-tone="sand"]:hover{background:var(--tone-sand)}
.index-card[data-tone="orange"]:hover{background:var(--tone-orange)}
.index-card[data-tone="sage"]:hover{background:var(--tone-sage)}
.index-card[data-tone="burgundy"]:hover{background:var(--tone-burgundy);color:#fff}
.index-card[data-tone="burgundy"]:hover p,.index-card[data-tone="burgundy"]:hover .index-card-top{color:#f3e9e5}

.index-thumb{position:relative}
.index-thumb:after{
 content:"VIEW PROJECT ↗";position:absolute;right:14px;bottom:14px;
 padding:9px 11px;border-radius:999px;background:rgba(248,246,241,.9);
 color:#111;font:500 9px/1 var(--meta);letter-spacing:.08em;
 transform:translateY(10px);opacity:0;transition:.35s ease
}
.index-card:hover .index-thumb:after{opacity:1;transform:none}
.index-card:hover .index-thumb img{transform:scale(1.055) translateY(-1.5%)}

/* tiny human annotation */
.project-index-head:after{
 content:"↘ five selected pieces";display:block;margin-top:18px;
 font-family:var(--accent);font-style:italic;font-size:18px;
 transform:rotate(-2deg);transform-origin:left;color:#7c4034
}

/* ambient color transition driven by JS */
.project-index{transition:background-color 1.1s cubic-bezier(.2,.8,.2,1)}
.project-index.tone-blue{background:#d8e8e8}
.project-index.tone-sand{background:#e8e2d8}
.project-index.tone-orange{background:#ead7cd}
.project-index.tone-sage{background:#dbe2d8}
.project-index.tone-burgundy{background:#dfd3d4}

/* case-study image motion */
.screen img,.visual img{will-change:transform}
.exp .screen{clip-path:inset(0 0 8% 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}
.exp.in .screen{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){
 .hero h1.reveal{clip-path:none}.exp .screen{clip-path:none}
 .project-index{transition:none}
}

/* V9 — FINAL TYPOGRAPHIC HIERARCHY + HERO VISIBILITY FIX */
:root{
  --font-display:"Geist",Arial,sans-serif;
  --font-body:"Geist",Arial,sans-serif;
  --font-editorial:"Instrument Serif",Georgia,serif;
  --font-ui:"Geist Mono","Courier New",monospace;

  --size-hero:clamp(68px,10vw,156px);
  --size-section:clamp(56px,7.5vw,116px);
  --size-project:clamp(42px,4.2vw,66px);
  --size-body-lg:20px;
  --size-body:16px;
  --size-small:13px;
  --size-ui:11px;

  --leading-hero:.80;
  --leading-section:.84;
  --leading-project:.92;
  --leading-body:1.55;
  --leading-ui:1.35;
}

/* 1 — Identity / hero headlines */
.hero h1,.casehero h1,.contact h2{
  font-family:var(--font-display)!important;
  font-size:var(--size-hero)!important;
  font-weight:500!important;
  line-height:var(--leading-hero)!important;
  letter-spacing:-.072em!important;
}

/* restore all hero text and use a safe reveal */
.hero h1.reveal{
  opacity:0;
  transform:translateY(28px);
  clip-path:none!important;
  transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)!important;
}
.hero h1.reveal.in{opacity:1;transform:none}

/* 2 — Section headers */
.project-index-head h2,.about h2,.caseintro h2,.statement h2,.dark h2,.work-head h2{
  font-family:var(--font-display)!important;
  font-size:var(--size-section)!important;
  font-weight:500!important;
  line-height:var(--leading-section)!important;
  letter-spacing:-.062em!important;
}

/* 3 — Project titles */
.index-card h3,.project-title,.exp h3{
  font-family:var(--font-display)!important;
  font-size:var(--size-project)!important;
  font-weight:500!important;
  line-height:var(--leading-project)!important;
  letter-spacing:-.052em!important;
}

/* 4 — Editorial emphasis only */
.serif{
  font-family:var(--font-editorial)!important;
  font-weight:400!important;
  font-style:italic!important;
  letter-spacing:-.035em!important;
}

/* 5 — Paragraphs */
.hero-foot p,.project-index-head p,.caseintro p,.exp p,.impact p,.about p{
  font-family:var(--font-body)!important;
  font-size:var(--size-body)!important;
  font-weight:400!important;
  line-height:var(--leading-body)!important;
  letter-spacing:-.01em!important;
  margin-top:0;
}
.about p{font-size:var(--size-body-lg)!important}
.index-card p{
  font-family:var(--font-body)!important;
  font-size:var(--size-small)!important;
  font-weight:400!important;
  line-height:var(--leading-body)!important;
  letter-spacing:0!important;
}

/* 6 — Navigation, numbers, labels, categories */
.nav,.eyebrow,.meta,.index-card-top,.caps,.contact-foot{
  font-family:var(--font-ui)!important;
  font-size:var(--size-ui)!important;
  font-weight:500!important;
  line-height:var(--leading-ui)!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

/* 7 — What I Do ticker: ONE font, ONE size, ONE color */
.capability-track span,
.capability-track span.ticker-accent{
  font-family:var(--font-ui)!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  color:#f4efe6!important;
}
.capability-track i{
  color:#f4efe6!important;
  font-size:11px!important;
}

/* spacing rhythm */
.project-index-head{margin-bottom:56px}
.index-card h3{margin:26px 0 16px}
.index-card p{margin:0 0 22px}
.caseintro p,.exp p,.impact p{margin-bottom:0}

@media(max-width:680px){
 :root{
   --size-body-lg:18px;
   --size-body:15px;
   --size-small:12px;
   --size-ui:10px;
 }
}
@media(prefers-reduced-motion:reduce){
 .hero h1.reveal{opacity:1;transform:none}
}

/* V10 — UX/UI refinement layer */
.project-index-head:after{content:none!important}

/* Clear keyboard access */
.skip-link{
 position:fixed;left:18px;top:12px;z-index:1000;
 transform:translateY(-150%);
 background:#111;color:#fff;padding:10px 14px;border-radius:6px;
 font:500 11px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{transform:none}
a:focus-visible{
 outline:2px solid #111;
 outline-offset:5px;
 border-radius:3px;
}
.contact a:focus-visible,.nav a:focus-visible{outline-color:currentColor}

/* Art direction without "UI card" heaviness */
.index-card{
 border-radius:8px!important;
 box-shadow:none!important;
 border:1px solid rgba(16,16,15,.10)!important;
}
.index-card:hover{box-shadow:none!important;transform:translateY(-4px)!important}
.index-thumb{border-radius:4px!important}
.index-card.is-placeholder{cursor:default}
.index-card.is-placeholder:hover{transform:none!important}
.index-card.is-placeholder .index-thumb:after{display:none}

/* Readability / measure */
.hero-foot p,.project-index-head p,.caseintro p,.exp p,.impact p,.about p{
 max-width:62ch;
}
.caseintro p,.exp p{max-width:54ch}

/* Comfortable interactive targets */
.nav a,.contact a{min-height:44px;display:inline-flex;align-items:center}

/* More consistent image behavior */
.index-thumb img,.screen img,.visual img{
 backface-visibility:hidden;
 transform-origin:center center;
}

/* mobile is composed, not just scaled */
@media(max-width:680px){
 .nav div{gap:14px}
 .hero{min-height:88svh}
 .project-index-head{margin-bottom:38px}
 .index-card{min-height:auto!important}
 .index-thumb{height:58vw!important;min-height:260px}
 .about{gap:0}
 .capability-band{padding:16px 0 15px}
}

/* V11 — project art direction + stronger case-study storytelling */
.project-coh{background:#edf2f0}
.project-coh .casehero{background:#c6dfe3}
.project-coh .case-cover{background:#c6dfe3}
.project-facts{
 display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
 background:rgba(16,16,15,.15);border-top:1px solid rgba(16,16,15,.15);
 border-bottom:1px solid rgba(16,16,15,.15)
}
.project-facts div{background:#edf2f0;padding:24px 30px;min-height:110px}
.project-facts span{
 display:block;font:500 10px/1.3 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;
 color:#6d675f;margin-bottom:14px
}
.project-facts strong{font:500 14px/1.4 var(--font-body)}

.project-coh .caseintro{background:#edf2f0}
.project-coh .statement{background:#111;color:#f6f2ea}
.project-coh .statement .eyebrow{color:#c6dfe3}

/* deliberately vary project compositions rather than repeating one module */
.project-coh .exp{min-height:92vh;padding-top:90px;padding-bottom:90px}
.project-coh .exp-watch{grid-template-columns:1.45fr .55fr;background:#edf2f0}
.project-coh .exp-explore{grid-template-columns:.62fr 1.38fr;background:#ded9cf}
.project-coh .exp-explore .screen{order:2}
.project-coh .exp-explore>div:last-child{order:1}
.project-coh .exp-read{grid-template-columns:1.05fr .95fr;background:#c6dfe3}
.project-coh .exp-shop{grid-template-columns:.72fr 1.28fr;background:#f1e8dc}
.project-coh .exp-shop .screen{order:2}
.project-coh .exp-shop>div:last-child{order:1}

.project-coh .screen{height:78vh;max-height:880px}
.project-coh .exp-explore .screen,.project-coh .exp-shop .screen{height:86vh}
.project-coh .exp h3{max-width:8ch}
.project-coh .exp p{max-width:38ch}

.ownership-statement{
 padding:150px 30px;background:#6d303b;color:#f8f3ec;
 display:grid;grid-template-columns:.42fr 1.15fr .65fr;gap:4vw;align-items:start
}
.ownership-statement h2{
 font-family:var(--font-display);font-size:var(--size-section);font-weight:500;
 line-height:var(--leading-section);letter-spacing:-.062em;margin:0
}
.ownership-statement p{
 font-family:var(--font-body);font-size:var(--size-body);line-height:var(--leading-body);
 max-width:42ch;margin:7px 0 0
}
.ownership-statement .serif{color:#f1c9ba}

/* desktop project affordance */
@media(pointer:fine){
 .index-card[href]{cursor:pointer}
 .index-card[href] .index-thumb:after{content:"VIEW ↗"}
}
@media(max-width:800px){
 .project-facts{grid-template-columns:1fr 1fr}
 .project-facts div{padding:20px 18px}
 .project-coh .exp,.project-coh .exp-watch,.project-coh .exp-explore,.project-coh .exp-read,.project-coh .exp-shop{
   display:flex;flex-direction:column;min-height:auto;padding-top:70px;padding-bottom:70px
 }
 .project-coh .exp .screen{order:1;height:65vh}
 .project-coh .exp>div:last-child{order:2;margin-top:28px}
 .ownership-statement{grid-template-columns:1fr;gap:24px;padding:100px 18px}
}

/* V12 — project-card contrast system
   Never rely on inherited gray text over changing hover colors. */
.index-card,
.index-card .index-card-top,
.index-card p,
.index-card h3{
  transition:color .3s ease, background-color .45s ease;
}

/* Light hover surfaces use near-black for every text level */
.index-card[data-tone="blue"]:hover,
.index-card[data-tone="sand"]:hover,
.index-card[data-tone="orange"]:hover,
.index-card[data-tone="sage"]:hover{
  color:#11110f!important;
}
.index-card[data-tone="blue"]:hover .index-card-top,
.index-card[data-tone="blue"]:hover p,
.index-card[data-tone="sand"]:hover .index-card-top,
.index-card[data-tone="sand"]:hover p,
.index-card[data-tone="orange"]:hover .index-card-top,
.index-card[data-tone="orange"]:hover p,
.index-card[data-tone="sage"]:hover .index-card-top,
.index-card[data-tone="sage"]:hover p{
  color:#292622!important;
}

/* Dark burgundy uses warm white throughout */
.index-card[data-tone="burgundy"]:hover,
.index-card[data-tone="burgundy"]:hover h3,
.index-card[data-tone="burgundy"]:hover .index-card-top,
.index-card[data-tone="burgundy"]:hover p{
  color:#fffaf3!important;
}

/* Default state also gets slightly stronger metadata contrast */
.index-card .index-card-top{color:#4f4a44!important}
.index-card p{color:#514c45!important}

/* Restore correct dark-hover values after default specificity */
.index-card[data-tone="burgundy"]:hover .index-card-top,
.index-card[data-tone="burgundy"]:hover p{color:#fffaf3!important}

/* V13 — use Ulyana's original Cheap Old Houses mobile mockup on Project 01 */
.index-card[data-tone="blue"] .index-thumb{
  background:#000;
  overflow:hidden;
}
.index-card[data-tone="blue"] .index-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
}
@media(pointer:fine){
  .index-card[data-tone="blue"]:hover .index-thumb img{
    transform:scale(1.04);
  }
}
@media(max-width:680px){
  .index-card[data-tone="blue"] .index-thumb img{
    object-position:center;
    transform:scale(1.01);
  }
}

/* V14 — preserve the original transparent COH mockup */
.index-card[data-tone="blue"] .index-thumb{
  background:transparent!important;
}
.index-card[data-tone="blue"] .index-thumb img{
  object-fit:contain!important;
  object-position:center!important;
}

/* V15 — Cheap Old Houses UX/UI case study */
.coh-v15{background:#f3efe7;color:#11110f}
.coh-v15 .nav{background:#f3efe7}
.coh-hero{padding:150px 30px 70px;min-height:78vh;display:flex;flex-direction:column;justify-content:flex-end}
.coh-hero h1,.coh-copy-section h2,.coh-journey h2,.coh-feature h2,.coh-system h2,.coh-discover h2,.coh-duo h2,.coh-visual-system h2,.coh-role h2,.coh-outcome h2{
 font-family:var(--font-display);font-weight:500;letter-spacing:-.065em;line-height:.88;margin:0
}
.coh-hero h1{font-size:clamp(64px,10vw,156px);max-width:12ch}
.coh-hero>p{font:400 clamp(17px,1.55vw,22px)/1.55 var(--font-body);max-width:58ch;margin:42px 0 0 50%}
.coh-v15 .serif{font-family:var(--font-serif);font-style:italic;font-weight:400}
.coh-hero-visual{height:min(82vw,980px);background:#c6dfe3;overflow:hidden;display:flex;align-items:center;justify-content:center}
.coh-hero-visual img{width:92%;height:92%;object-fit:contain}
.coh-facts{display:grid;grid-template-columns:.8fr 1.2fr 1.35fr .65fr;border-bottom:1px solid #aaa39a}
.coh-facts div{padding:28px 30px;border-right:1px solid #aaa39a}
.coh-facts span,.coh-v15 .eyebrow{display:block;font:500 10px/1.2 var(--font-ui);letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px}
.coh-facts strong{font:500 14px/1.45 var(--font-body)}
.coh-copy-section{display:grid;grid-template-columns:.33fr 1fr;gap:6vw;padding:150px 30px}
.coh-copy-section h2,.coh-journey h2,.coh-discover h2,.coh-visual-system h2,.coh-outcome h2{font-size:clamp(55px,7.4vw,116px)}
.coh-copy-section p,.coh-discover p,.coh-visual-system>.intro,.coh-outcome p{font:400 18px/1.6 var(--font-body);max-width:55ch}
.coh-callout{font-size:25px!important;line-height:1.35!important;margin-top:55px!important;max-width:42ch!important}
.coh-journey{padding:130px 30px;background:#11110f;color:#f7f1e7}
.journey-row{display:grid;grid-template-columns:repeat(5,1fr);margin-top:75px;border-top:1px solid #5a5650}
.journey-row>div{padding:25px 20px 50px 0;border-right:1px solid #5a5650}
.journey-row b{font:500 10px var(--font-ui);display:block;margin-bottom:45px}
.journey-row span{font:500 14px var(--font-ui);letter-spacing:.08em}
.journey-row p{font:400 14px/1.5 var(--font-body);max-width:17ch}
.coh-feature,.coh-system{display:grid;grid-template-columns:.42fr .58fr;min-height:100vh}
.feature-copy,.system-copy{padding:110px 30px;display:flex;flex-direction:column;justify-content:center}
.feature-copy h2,.system-copy h2,.coh-duo h2{font-size:clamp(48px,5.5vw,88px)}
.feature-copy p,.system-copy p,.duo-copy p,.coh-role p{font:400 16px/1.6 var(--font-body);max-width:43ch}
.feature-image,.system-image{overflow:hidden;background:#c6dfe3;min-height:850px}
.feature-image img,.system-image img{width:100%;height:100%;object-fit:cover;object-position:top}
.coh-system{grid-template-columns:.58fr .42fr;background:#ded9cf}
.system-image{order:1;background:#ded9cf}
.system-copy{order:2}
.system-flow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:45px;font:500 10px/1.3 var(--font-ui);letter-spacing:.08em}
.system-flow span{border:1px solid #111;padding:10px 12px}
.coh-discover{padding:150px 30px;background:#c6dfe3}
.coh-discover p{margin:55px 0 0 50%}
.coh-duo{display:grid;grid-template-columns:1fr 1fr}
.duo-card{min-width:0}
.duo-card.shop{background:#d8dfc7}.duo-card.read{background:#f0c5b6}
.duo-copy{padding:80px 30px;min-height:430px}
.duo-image{height:800px;overflow:hidden}
.duo-image img{width:100%;height:100%;object-fit:cover;object-position:top}
.coh-visual-system{padding:150px 30px 0}
.coh-visual-system>.intro{margin:50px 0 80px 50%}
.principles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #aaa39a}
.principles>div{padding:25px 24px 55px 0;border-right:1px solid #aaa39a}
.principles b{font:500 10px var(--font-ui)}
.principles h3{font:500 15px var(--font-ui);letter-spacing:.07em;margin-top:40px}
.principles p{font:400 14px/1.55 var(--font-body);max-width:25ch}
.responsive-visual{height:850px;background:#e6dfd3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.responsive-visual img{width:90%;height:90%;object-fit:contain}
.coh-role{background:#6d303b;color:#fff8ee;padding:150px 30px}
.coh-role h2{font-size:clamp(76px,12vw,180px)}
.coh-role p{margin:55px 0 0 55%;font-size:18px;max-width:48ch}
.role-line,.outcome-path{margin-top:100px;padding-top:20px;border-top:1px solid currentColor;font:500 11px var(--font-ui);letter-spacing:.08em;display:flex;gap:18px;flex-wrap:wrap}
.coh-outcome{padding:150px 30px;background:#11110f;color:#f7f1e7}
.coh-outcome p{margin:55px 0 0 50%}
.coh-final-image{height:95vh;overflow:hidden;background:#f3efe7;display:flex;justify-content:center}
.coh-final-image img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:top}
.next-project{display:flex;justify-content:space-between;align-items:center;padding:45px 30px;background:#f3efe7;color:#111;text-decoration:none;font:500 12px var(--font-ui);letter-spacing:.08em}
.next-project strong{font-size:18px}
@media(max-width:800px){
 .coh-hero{padding:120px 18px 55px;min-height:70vh}
 .coh-hero>p,.coh-discover p,.coh-visual-system>.intro,.coh-role p,.coh-outcome p{margin-left:0}
 .coh-facts{grid-template-columns:1fr 1fr}.coh-facts div{padding:20px 18px}
 .coh-copy-section{grid-template-columns:1fr;padding:95px 18px}
 .coh-journey,.coh-discover,.coh-visual-system,.coh-role,.coh-outcome{padding:95px 18px}
 .journey-row{grid-template-columns:1fr}.journey-row>div{border-right:0;border-bottom:1px solid #5a5650;padding:22px 0}.journey-row b{margin-bottom:15px}
 .coh-feature,.coh-system{grid-template-columns:1fr}.feature-copy,.system-copy{padding:80px 18px}.feature-image,.system-image{min-height:620px}
 .system-image{order:2}.system-copy{order:1}
 .coh-duo{grid-template-columns:1fr}.duo-copy{padding:70px 18px}.duo-image{height:650px}
 .principles{grid-template-columns:1fr 1fr}.responsive-visual{height:600px}
 .coh-role p{margin-top:35px}.role-line,.outcome-path{margin-top:60px}
}

/* V16 — Senior UX case-study structure, image placeholders only */
.coh-v16{background:#f3efe7;color:#11110f}
.coh-v16 .nav{background:#f3efe7}
.coh-v16 .eyebrow{font:500 10px/1.2 var(--font-ui);letter-spacing:.11em;text-transform:uppercase;margin-bottom:24px}
.coh-v16 .serif{font-family:var(--font-serif);font-style:italic;font-weight:400}
.v16-hero{padding:155px 30px 90px}
.v16-hero h1,.coh-v16 h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.065em;line-height:.89;margin:0}
.v16-hero h1{font-size:clamp(64px,10vw,154px);max-width:12ch}
.v16-intro{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin:65px 0 0 42%}
.v16-intro p,.split p,.v16-question p,.ia-copy p,.section-lede,.v16-role>p,.v16-outcome>p{font:400 17px/1.6 var(--font-body);max-width:52ch}
.v16-facts{display:grid;grid-template-columns:.7fr .7fr 1.5fr .6fr;border-top:1px solid #aaa39a;border-bottom:1px solid #aaa39a}
.v16-facts>div{padding:26px 30px;border-right:1px solid #aaa39a}.v16-facts span{display:block;font:500 10px var(--font-ui);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}.v16-facts strong{font:500 14px/1.4 var(--font-body)}
.split{display:grid;grid-template-columns:.3fr 1fr;gap:6vw;padding:145px 30px}.split h2,.v16-question h2,.v16-ia h2,.v16-decisions>h2,.v16-expand>h2,.v16-ui>h2,.v16-outcome h2{font-size:clamp(54px,7.2vw,112px)}
.split p{margin-top:38px}
.dark{background:#11110f;color:#f7f1e7}
.v16-journey{padding:135px 30px}.v16-journey h2{font-size:clamp(55px,7.5vw,116px)}.section-lede{margin:38px 0 70px;max-width:50ch}
.primary-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;border-top:1px solid #57534e;border-bottom:1px solid #57534e}
.primary-flow>div{padding:25px 12px 35px}.primary-flow>b{}.primary-flow i{align-self:center;font-style:normal;color:#8f8980}.primary-flow b{display:block;font:500 9px var(--font-ui);margin-bottom:32px}.primary-flow strong{display:block;font:500 11px/1.3 var(--font-ui);letter-spacing:.05em}.primary-flow span{display:block;font:400 12px/1.45 var(--font-body);margin-top:13px;color:#bbb5ac}
.secondary-flow{margin-top:65px;padding-left:50%}.secondary-flow>span{font:500 9px var(--font-ui);letter-spacing:.09em}.secondary-flow>div{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font:500 11px var(--font-ui)}.secondary-flow i{font-style:normal}
.v16-question{padding:160px 30px;background:#c6dfe3}.v16-question p{margin:55px 0 0 50%;font-size:20px}
.v16-ia{padding:145px 30px}.ia-copy{display:grid;grid-template-columns:.3fr 1fr;column-gap:6vw}.ia-copy .eyebrow{grid-column:1}.ia-copy h2,.ia-copy p{grid-column:2}.ia-copy p{margin-top:42px}
.architecture{display:grid;grid-template-columns:.32fr auto .68fr;gap:30px;align-items:center;margin-top:100px}.before,.after{border:1px solid #999188;padding:32px}.before span,.after>span{font:500 9px var(--font-ui);letter-spacing:.1em}.before strong{display:block;font:500 16px var(--font-ui);margin:60px 0 10px}.before p{font:400 14px var(--font-body)}.architecture-arrow{font:400 30px var(--font-body)}
.after ol{list-style:none;padding:0;margin:40px 0 0}.after li{display:flex;gap:25px;padding:17px 0;border-top:1px solid #aaa39a}.after li b{font:500 9px var(--font-ui)}.after li strong{font:500 13px var(--font-ui);letter-spacing:.05em}
.v16-decisions{padding:145px 30px;background:#ded9cf}.decision-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#9f9990;margin-top:80px;border:1px solid #9f9990}.decision-grid article{background:#ded9cf;padding:30px}.decision-grid article>b,.ui-grid b{font:500 9px var(--font-ui)}.decision-grid h3,.expand-grid h3,.ui-grid h3{font:500 14px var(--font-ui);letter-spacing:.07em;margin:30px 0 15px}.decision-grid p,.expand-grid p,.ui-grid p{font:400 14px/1.55 var(--font-body);max-width:42ch}
.shot-placeholder{aspect-ratio:8/5;border:1px dashed #79736c;margin-top:45px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(255,255,255,.15)}.shot-placeholder span{font:500 9px var(--font-ui);letter-spacing:.1em}.shot-placeholder strong{font:500 17px var(--font-ui);margin:12px 0}.shot-placeholder small{font:400 12px/1.5 var(--font-body)}.shot-placeholder.priority{border-style:solid;background:#c6dfe3}
.v16-expand{padding:145px 30px}.expand-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:70px}.expand-grid article{padding:30px;border:1px solid #aaa39a}.expand-grid article>span{font:500 9px var(--font-ui);letter-spacing:.1em}
.v16-ui{padding:145px 30px;background:#e6dfd3}.ui-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:75px;border-top:1px solid #aaa39a}.ui-grid>div{padding:25px 22px 45px 0;border-right:1px solid #aaa39a}.mobile-request{margin-top:80px;border:1px dashed #8e877e;padding:50px;text-align:center}.mobile-request span{font:500 9px var(--font-ui);letter-spacing:.1em;display:block}.mobile-request strong{font:500 clamp(28px,4vw,58px) var(--font-display);letter-spacing:-.04em;display:block;margin:18px}.mobile-request p{font:500 13px var(--font-ui)}.mobile-request small{font:400 12px var(--font-body)}
.burgundy{background:#6d303b;color:#fff8ee}.v16-role{padding:145px 30px}.v16-role h2{font-size:clamp(75px,12vw,178px)}.v16-role>p{margin:55px 0 0 55%;font-size:18px}.role-flow,.outcome-summary{display:flex;gap:18px;flex-wrap:wrap;margin-top:90px;padding-top:20px;border-top:1px solid currentColor;font:500 10px var(--font-ui);letter-spacing:.08em}.role-flow i,.outcome-summary i{font-style:normal}
.v16-outcome{padding:145px 30px}.v16-outcome>p{margin:55px 0 0 50%;font-size:18px}
@media(max-width:800px){
 .v16-hero{padding:120px 18px 70px}.v16-intro{grid-template-columns:1fr;margin:45px 0 0}
 .v16-facts{grid-template-columns:1fr 1fr}.v16-facts>div{padding:20px 18px}
 .split,.ia-copy{grid-template-columns:1fr}.split,.v16-journey,.v16-question,.v16-ia,.v16-decisions,.v16-expand,.v16-ui,.v16-role,.v16-outcome{padding:90px 18px}
 .ia-copy .eyebrow,.ia-copy h2,.ia-copy p{grid-column:1}
 .primary-flow{grid-template-columns:1fr}.primary-flow i{transform:rotate(90deg);justify-self:center}.primary-flow>div{padding:22px 0}.primary-flow b{margin-bottom:12px}
 .secondary-flow,.v16-question p,.v16-role>p,.v16-outcome>p{padding-left:0;margin-left:0}
 .architecture{grid-template-columns:1fr}.architecture-arrow{transform:rotate(90deg);justify-self:center}
 .decision-grid,.expand-grid,.ui-grid{grid-template-columns:1fr}.mobile-request{padding:35px 18px}
}

/* V17 — simplified case study + cohesive editorial IA */
.coh-v17{background:#f3efe7;color:#11110f}.coh-v17 .nav{background:#f3efe7}
.coh-v17 .eyebrow{font:500 10px/1.2 var(--font-ui);letter-spacing:.11em;text-transform:uppercase;margin:0}.coh-v17 .serif{font-family:var(--font-serif);font-style:italic;font-weight:400}
.coh-v17 h1,.coh-v17 h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.065em;line-height:.89;margin:0}
.v17-hero{padding:155px 30px 80px;min-height:90vh;display:flex;flex-direction:column;justify-content:space-between}.v17-hero h1{font-size:clamp(65px,10vw,154px);max-width:12ch;margin-top:80px}.hero-bottom{display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;margin-top:80px}.hero-bottom>p,.lede,.finish-copy p{font:400 17px/1.6 var(--font-body);max-width:54ch;margin:0}
.facts{display:grid;grid-template-columns:.75fr .75fr 1.5fr .55fr;border-top:1px solid #aaa39a}.facts>div{padding:18px 18px 0 0}.facts span{display:block;font:500 9px var(--font-ui);letter-spacing:.1em;margin-bottom:8px}.facts strong{font:500 12px/1.45 var(--font-body)}
.v17-story,.v17-system,.v17-decisions,.v17-scale,.v17-finish{display:grid;grid-template-columns:22% 78%;border-top:1px solid #aaa39a}.v17-story>aside,.v17-system>aside,.v17-decisions>aside,.v17-scale>aside,.v17-finish>aside{padding:35px 30px;border-right:1px solid #aaa39a}.story-main,.system-main,.decisions-main,.scale-main,.finish-main{padding:115px 30px}
.coh-v17 h2{font-size:clamp(52px,6.7vw,105px)}.story-main>.lede,.system-main>.lede,.scale-main>.lede{margin:45px 0 75px;max-width:57ch}
.journey{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.25fr;align-items:stretch;border-top:1px solid #999188;border-bottom:1px solid #999188}.journey>div{padding:25px 18px}.journey i{align-self:center;font-style:normal}.journey b{display:block;font:500 9px var(--font-ui);margin-bottom:35px}.journey strong{display:block;font:500 13px var(--font-ui);letter-spacing:.05em}.journey span{display:block;font:400 13px var(--font-body);margin-top:10px}.journey-focus{background:#c6dfe3}
.branches{margin:55px 0 0 45%;border-top:1px solid #aaa39a;padding-top:18px}.branches>span{font:500 9px var(--font-ui);letter-spacing:.09em}.branches>div{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font:500 10px var(--font-ui)}.branches i{font-style:normal}
.v17-system{background:#11110f;color:#f7f1e7}.v17-system>aside{border-color:#56514b}.ia-map{margin-top:85px;max-width:920px}.ia-root{width:48%;margin:auto;border:1px solid #68625b;padding:22px}.ia-root span,.episode-title span{display:block;font:500 8px var(--font-ui);letter-spacing:.1em;color:#aaa39a}.ia-root strong,.episode-title strong{display:block;font:500 14px var(--font-ui);letter-spacing:.05em;margin:12px 0 5px}.ia-root small,.episode-content small{font:400 12px/1.4 var(--font-body);color:#bdb6ad}.connector.vertical{height:38px;width:1px;background:#68625b;margin:auto}
.episode-shell{border:1px solid #68625b}.episode-title{padding:22px;border-bottom:1px solid #68625b}.episode-content{display:grid;grid-template-columns:.8fr 1fr 1.6fr}.episode-content>div{padding:25px;border-right:1px solid #68625b;min-height:155px}.episode-content b{display:block;font:500 8px var(--font-ui);margin-bottom:35px}.episode-content strong{display:block;font:500 11px/1.35 var(--font-ui);letter-spacing:.04em;margin-bottom:10px}.episode-content .highlight{background:#c6dfe3;color:#11110f}.episode-content .highlight small{color:#383838}
.v17-decisions{background:#f3efe7}.decision{display:grid;grid-template-columns:.42fr .58fr;gap:45px;padding:65px 0;border-top:1px solid #aaa39a}.decision:first-of-type{margin-top:70px}.decision.reverse{grid-template-columns:.42fr .58fr}.decision-copy{padding-right:25px}.decision-copy>b{font:500 9px var(--font-ui)}.decision-copy h3{font:500 clamp(25px,3vw,42px)/1 var(--font-display);letter-spacing:-.04em;margin:35px 0 20px}.decision-copy p{font:400 14px/1.6 var(--font-body);max-width:38ch}
.screen-slot{aspect-ratio:8/5;border:1px dashed #8f887f;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;background:#eee8de}.screen-slot span{font:500 8px var(--font-ui);letter-spacing:.1em}.screen-slot strong{font:500 14px var(--font-ui);margin:12px}.screen-slot small{font:400 11px var(--font-body)}.screen-slot.priority{background:#c6dfe3;border-style:solid}
.v17-scale{background:#ded9cf}.scale-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.scale-grid article{border:1px solid #a29b92;padding:28px}.scale-grid article>span{font:500 8px var(--font-ui);letter-spacing:.1em}.scale-grid h3{font:500 26px var(--font-display);letter-spacing:-.04em;margin:30px 0 12px}.scale-grid p{font:400 14px/1.55 var(--font-body);max-width:36ch}.mini-slot{aspect-ratio:4/3;border:1px dashed #928b82;margin-top:35px;display:grid;place-items:center;font:500 9px var(--font-ui);letter-spacing:.08em}.system-card{grid-column:1/-1}.tokens{display:grid;grid-template-columns:repeat(4,1fr);margin-top:45px;border-top:1px solid #a29b92}.tokens i{font:500 9px var(--font-ui);font-style:normal;padding:20px 10px 0 0}
.v17-finish{background:#6d303b;color:#fff8ee;border-color:#8e5962}.v17-finish>aside{border-color:#8e5962}.v17-finish h2{font-size:clamp(70px,10vw,150px)}.finish-copy{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:65px}.role-flow{display:flex;gap:18px;flex-wrap:wrap;margin-top:75px;padding-top:18px;border-top:1px solid currentColor;font:500 9px var(--font-ui);letter-spacing:.08em}.role-flow i{font-style:normal}
@media(max-width:800px){
 .v17-hero{padding:120px 18px 65px}.hero-bottom{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}
 .v17-story,.v17-system,.v17-decisions,.v17-scale,.v17-finish{grid-template-columns:1fr}.v17-story>aside,.v17-system>aside,.v17-decisions>aside,.v17-scale>aside,.v17-finish>aside{border-right:0;border-bottom:1px solid #aaa39a;padding:25px 18px}.story-main,.system-main,.decisions-main,.scale-main,.finish-main{padding:75px 18px}
 .journey{grid-template-columns:1fr}.journey i{transform:rotate(90deg);justify-self:center}.branches{margin-left:0}
 .ia-root{width:auto}.episode-content{grid-template-columns:1fr}.episode-content>div{border-right:0;border-bottom:1px solid #68625b}
 .decision,.decision.reverse{grid-template-columns:1fr;gap:25px}.scale-grid{grid-template-columns:1fr}.system-card{grid-column:auto}.tokens{grid-template-columns:1fr 1fr}.finish-copy{grid-template-columns:1fr}
}

/* V18 — final simplification pass */
.coh-v17 .story-main,.coh-v17 .system-main,.coh-v17 .decisions-main,.coh-v17 .scale-main,.coh-v17 .finish-main{max-width:1400px}
.coh-v17 .story-main>.lede,.coh-v17 .system-main>.lede,.coh-v17 .scale-main>.lede{font-size:16px;max-width:52ch}
.coh-v17 .decision{padding:52px 0}
.coh-v17 .decision:first-of-type{margin-top:55px}
.coh-v17 .decision-copy p{max-width:34ch}
.coh-v17 .screen-slot{max-height:520px}
.coh-v17 .scale-grid{margin-top:55px}
.coh-v17 .finish-copy{max-width:980px}
.coh-v17 .ia-map{margin-left:auto;margin-right:auto}
@media (min-width:1100px){
 .coh-v17 .story-main,.coh-v17 .system-main,.coh-v17 .decisions-main,.coh-v17 .scale-main,.coh-v17 .finish-main{padding-right:6vw}
}

/* V19 — editorial ecosystem refinement */
.coh-v19{background:#f3efe7;color:#11110f}.coh-v19 .nav{background:#f3efe7}
.coh-v19 .eyebrow,.close-label{font:500 10px/1.2 var(--font-ui);letter-spacing:.11em;text-transform:uppercase}
.coh-v19 .serif{font-family:var(--font-serif);font-style:italic;font-weight:400}
.coh-v19 h1,.coh-v19 h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.065em;line-height:.89;margin:0}
.v19-hero{padding:155px 30px 85px;min-height:88vh;display:flex;flex-direction:column;justify-content:space-between}
.v19-hero h1{font-size:clamp(64px,10vw,154px);max-width:12ch;margin:80px 0}
.hero-meta{display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw}.hero-meta>p,.lede,.decision-copy p,.expansion-work p,.close-copy p{font:400 16px/1.6 var(--font-body);max-width:53ch;margin:0}
.facts{display:grid;grid-template-columns:.65fr .7fr 1.35fr 1fr;border-top:1px solid #aaa39a}.facts>div{padding:18px 15px 0 0}.facts span{display:block;font:500 8px var(--font-ui);letter-spacing:.1em;margin-bottom:8px}.facts strong{font:500 12px/1.45 var(--font-body)}
.v19-section{display:grid;grid-template-columns:20% 80%;border-top:1px solid #aaa39a}.v19-section>aside{padding:32px 30px;border-right:1px solid #aaa39a}.section-main{padding:110px 5vw 125px 30px;max-width:1500px}
.coh-v19 h2{font-size:clamp(52px,6.6vw,104px)}.section-main>.lede{margin:42px 0 72px;max-width:54ch}
.journey-line{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.35fr;align-items:stretch;border-top:1px solid #9d968d;border-bottom:1px solid #9d968d}
.journey-line>div{padding:24px 18px}.journey-line i{align-self:center;font-style:normal;color:#716b64}.journey-line b{display:block;font:500 8px var(--font-ui);margin-bottom:34px}.journey-line strong{display:block;font:500 13px var(--font-ui);letter-spacing:.05em}.journey-line span{display:block;font:400 12px var(--font-body);margin-top:9px}.journey-line .focus{background:#c6dfe3}
.architecture-section{background:#11110f;color:#f7f1e7}.architecture-section>aside{border-color:#4d4944}.content-model{margin:80px 0 0;max-width:980px}
.model-row{display:grid;grid-template-columns:55px 1fr;align-items:start;border-top:1px solid #5c5751;padding:20px 0}.model-no{font:500 8px var(--font-ui);color:#aaa39a}.model-row strong,.episode-heading strong{display:block;font:500 16px var(--font-ui);letter-spacing:.04em}.model-row small,.episode-heading small{display:block;font:400 12px var(--font-body);color:#aaa39a;margin-top:6px}.model-arrow{font:400 20px var(--font-body);padding:8px 0 8px 24px;color:#8d867e}
.episode-model{margin-top:8px;border-top:1px solid #f7f1e7}.episode-heading{display:grid;grid-template-columns:55px 1fr;padding:22px 0 28px}.episode-parts{display:grid;grid-template-columns:.7fr 1fr 1.65fr;border-top:1px solid #5c5751;border-bottom:1px solid #5c5751}.episode-parts>div{padding:24px 20px 32px 0}.episode-parts b{display:block;font:500 8px var(--font-ui);margin-bottom:30px}.episode-parts strong{display:block;font:500 11px/1.35 var(--font-ui);letter-spacing:.04em}.episode-parts span{display:block;font:400 12px/1.45 var(--font-body);color:#aaa39a;margin-top:10px}.episode-parts .accent{background:#c6dfe3;color:#11110f;padding-left:22px}.episode-parts .accent span{color:#3c3c3a}
.decisions-section{background:#f3efe7}.decision-layout{display:grid;gap:5vw;align-items:center;padding:72px 0;border-top:1px solid #aaa39a}.decision-layout:first-of-type{margin-top:70px}.decision-a,.decision-c{grid-template-columns:.34fr .66fr}.decision-b{grid-template-columns:.6fr .4fr}.decision-copy>span{font:500 8px var(--font-ui);letter-spacing:.1em}.decision-copy h3{font:500 clamp(28px,3.3vw,48px)/.98 var(--font-display);letter-spacing:-.045em;margin:30px 0 18px}.decision-copy p{max-width:34ch}
.screen-frame,.detail-frame{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#ece6dc;border:1px dashed #918a81;padding:20px}.screen-frame{aspect-ratio:8/5}.screen-frame.editorial{aspect-ratio:4/3}.detail-frame{aspect-ratio:1.55;background:#c6dfe3;border-style:solid}.screen-frame span,.detail-frame span{font:500 8px var(--font-ui);letter-spacing:.1em}.screen-frame strong,.detail-frame strong{font:500 14px var(--font-ui);margin:12px}.screen-frame small,.detail-frame small{font:400 11px var(--font-body)}
.expansion-section{background:#ded9cf}.platform-strip{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #9d968d;border-bottom:1px solid #9d968d;margin-bottom:70px}.platform-strip>div{padding:22px 25px 22px 0}.platform-strip>div+div{border-left:1px solid #9d968d;padding-left:25px}.platform-strip span{display:block;font:500 8px var(--font-ui);letter-spacing:.1em;margin-bottom:12px}.platform-strip strong{font:500 11px/1.45 var(--font-ui);letter-spacing:.04em}
.expansion-work{display:grid;grid-template-columns:1fr 1fr;gap:24px}.expansion-work article{padding-bottom:35px}.screen-frame.commerce{aspect-ratio:4/3}.expansion-work h3{font:500 13px var(--font-ui);letter-spacing:.08em;margin:24px 0 12px}.expansion-work p{font-size:14px;max-width:36ch}
.system-line{margin-top:55px;padding-top:20px;border-top:1px solid #9d968d;display:grid;grid-template-columns:.35fr .65fr;gap:25px}.system-line span{font:500 8px var(--font-ui);letter-spacing:.1em}.system-line div{font:500 10px/1.5 var(--font-ui);letter-spacing:.06em}.system-line i{font-style:normal;margin:0 10px;color:#777169}
.v19-close{background:#6d303b;color:#fff8ee;padding:110px 30px 95px}.close-label{margin-bottom:70px}.close-main{display:grid;grid-template-columns:1.2fr .8fr;gap:7vw}.v19-close h2{font-size:clamp(58px,7.5vw,116px)}.close-copy{padding-top:8px}.close-copy p{margin-bottom:25px}.close-copy p:first-child{font:500 11px/1.5 var(--font-ui);letter-spacing:.05em;text-transform:uppercase}
@media(max-width:800px){
 .v19-hero{padding:120px 18px 65px;min-height:auto}.hero-meta{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}
 .v19-section{grid-template-columns:1fr}.v19-section>aside{padding:24px 18px;border-right:0;border-bottom:1px solid #aaa39a}.section-main{padding:75px 18px 85px}
 .journey-line{grid-template-columns:1fr}.journey-line i{transform:rotate(90deg);justify-self:center}.episode-parts{grid-template-columns:1fr}.episode-parts>div{border-bottom:1px solid #5c5751}
 .decision-a,.decision-b,.decision-c{grid-template-columns:1fr}.decision-b .screen-frame{order:2}.decision-b .decision-copy{order:1}
 .platform-strip,.expansion-work,.system-line,.close-main{grid-template-columns:1fr}.platform-strip>div+div{border-left:0;border-top:1px solid #9d968d;padding-left:0}.v19-close{padding:80px 18px}
}

/* V20 — visual refinement: quieter palette, fewer containers, stronger IA hierarchy */
.coh-v19{--coh-paper:#f3efe7;--coh-ink:#11110f;--coh-rule:#b6afa5;--coh-blue:#c6dfe3;--coh-wine:#6d303b;background:var(--coh-paper)}
/* Keep the page predominantly on one warm editorial canvas */
.expansion-section{background:var(--coh-paper)}
/* Lighter chapter furniture */
.v19-section{border-top-color:var(--coh-rule)}
.v19-section>aside{border-right-color:var(--coh-rule)}
.coh-v19 .eyebrow,.close-label{opacity:.72}
/* Journey: blue appears once, as a deliberate destination cue */
.journey-line{border-color:var(--coh-rule)}
.journey-line .focus{background:var(--coh-blue)}
/* IA: make setup quiet and Episode Detail the focal system */
.content-model{max-width:1040px;margin-top:90px}
.model-row{grid-template-columns:48px 1fr;padding:15px 0;border-top-color:#494641;opacity:.66}
.model-row strong{font-size:12px}
.model-row small{font-size:11px}
.model-arrow{height:25px;padding:3px 0 3px 20px;font-size:15px;opacity:.55}
.episode-model{margin-top:18px;border-top:1px solid #f7f1e7;padding-top:8px}
.episode-heading{padding:25px 0 35px}
.episode-heading strong{font-size:22px;letter-spacing:.025em}
.episode-heading small{font-size:12px;margin-top:8px}
.episode-parts{border-top:1px solid #5c5751;border-bottom:0;gap:0}
.episode-parts>div{padding:26px 24px 30px 0}
.episode-parts>div+div{border-left:1px solid #4f4b46;padding-left:24px}
.episode-parts .accent{background:transparent;color:#f7f1e7;border-left:1px solid var(--coh-blue);position:relative}
.episode-parts .accent:before{content:"";position:absolute;left:-1px;top:0;width:3px;height:100%;background:var(--coh-blue)}
.episode-parts .accent strong{color:var(--coh-blue)}
.episode-parts .accent span{color:#c5beb5}
/* Design section: placeholders behave like image fields, not UI cards */
.screen-frame,.detail-frame{background:transparent;border:1px dashed #aaa298}
.detail-frame{border-color:#9daeb0}
.screen-frame strong,.detail-frame strong{font-size:12px}
.screen-frame span,.detail-frame span{opacity:.72}
/* Once screenshots replace these, the image can sit directly on the paper */
.decision-layout{border-top-color:var(--coh-rule);gap:6vw}
.decision-copy>span{opacity:.65}
/* Platform architecture: whitespace and type instead of boxed columns */
.platform-strip{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin:15px 0 80px;padding:0}
.platform-strip>div{padding:24px 0;border-top:1px solid var(--coh-rule)}
.platform-strip>div+div{border-left:0;padding-left:0}
.platform-strip span{opacity:.65}
.platform-strip strong{max-width:42ch;display:block}
/* Shop + Book: no card treatment */
.expansion-work{gap:5vw}
.expansion-work article{padding:0 0 25px}
.screen-frame.commerce{background:transparent;border-color:#aaa298}
.system-line{border-top-color:var(--coh-rule);margin-top:65px}
.system-line span{opacity:.65}
/* Closing burgundy remains the sole large chromatic finale */
.v19-close{background:var(--coh-wine)}
/* Slightly more breathing room between major editorial moments */
.section-main{padding-top:125px;padding-bottom:145px}
@media(max-width:800px){
 .section-main{padding-top:80px;padding-bottom:95px}
 .platform-strip{grid-template-columns:1fr;gap:12px}
 .platform-strip>div+div{border-top:1px solid var(--coh-rule)}
 .episode-parts>div+div{border-left:0;padding-left:0}
 .episode-parts .accent{padding-left:18px;border-left:1px solid var(--coh-blue)}
}

/* V21 — UX/UI polish: neutral palette, stronger hierarchy, responsive clarity */
.coh-v19{
  --coh-paper:#f3efe7;
  --coh-ink:#11110f;
  --coh-rule:#b6afa5;
  --coh-wine:#6d303b;
  --coh-muted:#746e67;
}
/* Remove project-page blue entirely */
.journey-line .focus{background:transparent;position:relative}
.journey-line .focus:before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--coh-ink)}
.episode-parts .accent{background:transparent;color:#f7f1e7;border-left:1px solid #5c5751}
.episode-parts .accent:before{display:none}
.episode-parts .accent strong{color:#f7f1e7}
.episode-parts .accent span{color:#aaa39a}
.detail-frame{background:transparent;border-color:#918a81}

/* Journey hierarchy: action first, supporting context second */
.journey-line>div{padding:26px 18px 30px}
.journey-line b{color:var(--coh-muted);margin-bottom:28px}
.journey-line strong{font-size:15px;letter-spacing:.04em}
.journey-line span{font-size:11px;color:var(--coh-muted);margin-top:7px}
.journey-line .focus strong{font-size:17px}
.journey-line .focus span{color:#49443f}

/* Editorial scale: hero and major conceptual moments stay large;
   supporting chapters step down slightly */
.journey-section h2,.architecture-section h2{font-size:clamp(52px,6.4vw,100px)}
.decisions-section h2,.expansion-section h2{font-size:clamp(48px,5.6vw,88px)}
.v19-close h2{font-size:clamp(54px,6.6vw,102px)}

/* IA: hierarchy through scale and spacing, not accent color */
.model-row{opacity:.58}
.episode-model{margin-top:24px;padding-top:12px;border-top-width:2px}
.episode-heading strong{font-size:25px}
.episode-parts>div{min-height:160px}
.episode-parts .accent strong{font-size:12px}
.episode-parts .accent{padding-left:28px}
.episode-parts .accent b{color:#c9c2b9}

/* Reading comfort and spacing */
.section-main>.lede{max-width:50ch;line-height:1.65}
.decision-copy p,.expansion-work p,.close-copy p{line-height:1.65}
.decision-layout{padding:82px 0}
.decisions-section .section-main{padding-bottom:120px}
.expansion-section .section-main{padding-top:115px}

/* Keep screenshot evidence visually subordinate until real work is inserted */
.screen-frame,.detail-frame{border-color:#aaa298}
.screen-frame span,.detail-frame span,
.screen-frame small,.detail-frame small{color:var(--coh-muted)}

/* Keyboard accessibility */
.coh-v19 a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}
.coh-v19 .next-project:focus-visible{outline-offset:-6px}

/* Mobile is recomposed rather than shrunk */
@media(max-width:800px){
  .journey-line>div{padding:20px 4px}
  .journey-line i{margin:6px 0;color:var(--coh-muted)}
  .journey-line .focus{padding-top:25px}
  .journey-line .focus:before{left:0;right:0}
  .episode-heading{grid-template-columns:38px 1fr}
  .episode-parts>div{min-height:auto;padding:22px 0 26px}
  .episode-parts .accent{padding-left:16px;border-left:2px solid #77716a}
  .decision-layout{padding:58px 0}
  .journey-section h2,.architecture-section h2,
  .decisions-section h2,.expansion-section h2{font-size:clamp(44px,13vw,68px)}
}
/* Respect reduced-motion preference for inherited portfolio interactions */
@media(prefers-reduced-motion:reduce){
  .coh-v19 *, .coh-v19 *::before, .coh-v19 *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* V22 — Screen 01 actual work */
.screen-actual{margin:0;min-width:0}
.screen-actual img{display:block;width:100%;height:auto}
.screen-actual-entry{
  background:transparent;
  overflow:visible;
}
.screen-actual-entry img{
  object-fit:contain;
  filter:none;
  box-shadow:none;
  border:0;
}
@media(max-width:800px){
  .screen-actual-entry{width:100%}
}

/* V23 — Entry → episode discovery → episode hierarchy */
.entry-sequence{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
  min-width:0;
}
.screen-actual-episodes{
  width:86%;
  margin-left:auto;
  background:transparent;
}
.screen-actual-episodes img,
.screen-actual-after img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  box-shadow:none;
  filter:none;
}
.screen-actual-after{
  width:88%;
  margin:0 auto 0 0;
  background:transparent;
  overflow:hidden;
}
.decision-b{
  align-items:center;
}
@media(max-width:800px){
  .screen-actual-episodes,
  .screen-actual-after{width:100%;margin:0}
  .entry-sequence{gap:16px}
}

/* V24 — Screen 01 reads as one continuous page, at a quieter editorial scale */
.screen-actual-entry-combined{
  width:72%;
  margin:0 auto;
  background:transparent;
}
.screen-actual-entry-combined img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  box-shadow:none;
  filter:none;
}
@media(max-width:1000px){
  .screen-actual-entry-combined{width:84%}
}
@media(max-width:800px){
  .screen-actual-entry-combined{width:100%;margin:0}
}

/* V25 — episode recap is one long-form destination */
.recap-parts{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.recap-parts>div{
  min-height:170px;
}
.recap-parts>div+div{
  border-left:1px solid #4f4b46;
  padding-left:22px;
}
.recap-parts strong{
  max-width:18ch;
}
@media(max-width:1000px){
  .recap-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recap-parts>div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid #4f4b46}
  .recap-parts>div:nth-child(4){border-top:1px solid #4f4b46}
}
@media(max-width:800px){
  .recap-parts{grid-template-columns:1fr}
  .recap-parts>div+div{
    border-left:0;
    border-top:1px solid #4f4b46;
    padding-left:0;
  }
}

/* V26 — high-resolution PDF crops for Screens 02 + 03 */
.screen-actual-recap{width:88%;margin:0 auto 0 0;background:transparent}
.screen-actual-partners{width:82%;margin:0 0 0 auto;background:transparent}
.screen-actual-recap img,.screen-actual-partners img{display:block;width:100%;height:auto;border:0;box-shadow:none;filter:none}
@media(max-width:800px){.screen-actual-recap,.screen-actual-partners{width:100%;margin:0}}

/* V27 — sharper room-story evidence; Screen 03 becomes a concise relationship note */
.screen-actual-after{
  width:92%;
  margin:0 auto 0 0;
}
.screen-actual-after img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.decision-c-textual{
  align-items:center;
  min-height:430px;
}
.partner-note{
  border-top:1px solid var(--coh-rule);
  border-bottom:1px solid var(--coh-rule);
  padding:28px 0 32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.partner-note span{
  font-family:"Geist Mono",monospace;
  font-size:10px;
  letter-spacing:.08em;
  opacity:.62;
}
.partner-note strong{
  font-family:"Geist",sans-serif;
  font-size:clamp(18px,2vw,28px);
  line-height:1.25;
  font-weight:500;
  max-width:22ch;
}
.partner-note i{
  font-family:"Instrument Serif",serif;
  font-weight:400;
  padding:0 .16em;
}
@media(max-width:800px){
  .screen-actual-after{width:100%;margin:0}
  .decision-c-textual{min-height:0}
}

/* V29 — actual Shop + Book work, editorial rather than card-like */
.expansion-work{
  align-items:start;
  gap:5.5vw;
}
.expansion-work article{
  display:flex;
  flex-direction:column;
}
.expansion-screen{
  background:transparent;
  overflow:visible;
  margin:0;
}
.expansion-screen img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  box-shadow:none;
  filter:none;
}
.expansion-shop{
  width:100%;
}
.expansion-book{
  width:88%;
  margin-left:auto;
}
.expansion-work article:nth-child(1) .work-label{
  max-width:90%;
}
.expansion-work article:nth-child(2) .work-label{
  width:88%;
  margin-left:auto;
}
@media(max-width:800px){
  .expansion-book,
  .expansion-work article:nth-child(2) .work-label{
    width:100%;
    margin-left:0;
  }
}

/* V30 — final composition pass */

/* Screen hierarchy: core episode experience gets the strongest visual weight */
.screen-actual-entry-combined{
  width:66%;
  margin-left:auto;
  margin-right:auto;
}
.screen-actual-after{
  width:100%;
  margin:0;
}
.decision-b{
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.55fr);
  gap:5.5vw;
}
.decision-b .decision-copy{
  align-self:center;
}

/* Connection becomes an editorial annotation, not another full case-study chapter */
.decision-c-textual{
  min-height:0;
  padding:54px 0 62px;
  grid-template-columns:minmax(240px,.85fr) minmax(0,1.15fr);
  gap:7vw;
  border-bottom:1px solid var(--coh-rule);
}
.decision-c-textual .decision-copy h3{
  font-size:clamp(30px,3.25vw,52px);
  line-height:.98;
  margin:13px 0 18px;
}
.decision-c-textual .decision-copy h3 em{
  font-family:"Instrument Serif",serif;
  font-weight:400;
}
.decision-c-textual .decision-copy p{
  max-width:42ch;
  margin-bottom:0;
}
.partner-note{
  padding:22px 0 25px;
}
.partner-note strong{
  font-size:clamp(16px,1.6vw,23px);
  max-width:none;
  letter-spacing:-.015em;
}

/* Give the core design chapter breathing room without making every screen huge */
.decision-layout{
  padding-top:72px;
  padding-bottom:72px;
}
.decision-a{
  padding-bottom:88px;
}
.decision-b{
  padding-top:88px;
  padding-bottom:88px;
}

/* Expansion is supporting evidence: Shop leads, Book follows at quieter scale */
.expansion-work{
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:5vw;
  align-items:start;
}
.expansion-shop{
  width:94%;
}
.expansion-book{
  width:80%;
  margin-left:auto;
}
.expansion-work article:nth-child(1) .work-label{
  width:94%;
}
.expansion-work article:nth-child(2) .work-label{
  width:80%;
  margin-left:auto;
}
.expansion-work .work-label{
  margin-top:22px;
}
.system-line{
  margin-top:54px;
}

/* Slightly tighten the Expansion chapter so it doesn't overpower the episode work */
.expansion-section .section-main{
  padding-top:105px;
  padding-bottom:120px;
}
.platform-strip{
  margin-bottom:62px;
}

/* Consistent readable measures */
.decision-copy p,
.expansion-work p{
  max-width:46ch;
}

/* Mobile: preserve sequence and readability, not desktop proportions */
@media(max-width:1000px){
  .screen-actual-entry-combined{width:78%}
  .decision-b,
  .decision-c-textual{
    grid-template-columns:1fr;
  }
  .decision-b{gap:38px}
  .decision-c-textual{gap:30px}
}
@media(max-width:800px){
  .screen-actual-entry-combined,
  .screen-actual-after,
  .expansion-shop,
  .expansion-book,
  .expansion-work article:nth-child(1) .work-label,
  .expansion-work article:nth-child(2) .work-label{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .decision-layout{
    padding-top:52px;
    padding-bottom:52px;
  }
  .decision-a,.decision-b{
    padding-top:58px;
    padding-bottom:58px;
  }
  .decision-c-textual{
    padding-top:44px;
    padding-bottom:48px;
  }
  .expansion-work{
    grid-template-columns:1fr;
    gap:58px;
  }
}

/* V31 — final polish: equal Shop/Book weight + quieter supporting UX */

/* Shop and Book are parallel extensions of the same ecosystem */
.expansion-work{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4.5vw;
  align-items:start;
}
.expansion-shop,
.expansion-book,
.expansion-work article:nth-child(1) .work-label,
.expansion-work article:nth-child(2) .work-label{
  width:100%;
  margin-left:0;
  margin-right:0;
}
.expansion-screen{
  display:flex;
  align-items:flex-start;
}
.expansion-screen img{
  width:100%;
  height:auto;
}

/* Connection remains intentionally text-led: no featured partner screenshot */
.decision-c-textual{
  padding-top:46px;
  padding-bottom:50px;
}
.decision-c-textual .decision-copy p{
  max-width:38ch;
}
.partner-note{
  border-top:1px solid var(--coh-rule);
  border-bottom:0;
  padding:20px 0 0;
}
.partner-note span{opacity:.55}
.partner-note strong{
  font-size:clamp(15px,1.45vw,21px);
  font-weight:500;
}

/* Give the black IA chapter a deliberate entrance/exit */
.architecture-section .section-main{
  padding-top:145px;
  padding-bottom:155px;
}
.architecture-section + .decisions-section .section-main{
  padding-top:135px;
}

/* Keep implementation context useful but subordinate */
.platform-strip{
  opacity:.84;
}
.platform-strip span{
  font-size:9px;
}
.platform-strip strong{
  font-size:12px;
  line-height:1.55;
  font-weight:500;
}

/* Final rhythm adjustments */
.decision-a{padding-top:64px}
.decision-b{padding-top:96px;padding-bottom:96px}
.system-line{margin-top:48px}
.v19-close .section-main{padding-top:120px;padding-bottom:125px}

@media(max-width:800px){
  .expansion-work{grid-template-columns:1fr;gap:54px}
  .architecture-section .section-main{
    padding-top:92px;
    padding-bottom:100px;
  }
  .architecture-section + .decisions-section .section-main{
    padding-top:88px;
  }
  .decision-c-textual{
    padding-top:38px;
    padding-bottom:42px;
  }
}

/* V33 — final browser QA / rhythm pass */

/* Keep supporting copy visually secondary to the work */
.decision-copy p,
.expansion-work p{
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.6;
}
.decision-copy h3{
  text-wrap:balance;
}

/* Screen 01: deliberate medium scale */
.screen-actual-entry-combined{
  width:min(68%,980px);
}

/* Screen 02: centerpiece, but prevent it from feeling edge-to-edge */
.screen-actual-recap{
  width:min(100%,1180px);
  justify-self:end;
}
.screen-actual-recap img{
  width:100%;
  height:auto;
}

/* Connection: compact annotation between visual chapters */
.decision-c-textual{
  margin-top:4px;
  padding-top:42px;
  padding-bottom:46px;
}
.partner-note{
  align-self:center;
}
.partner-note strong{
  display:block;
  margin-top:10px;
  line-height:1.35;
}
.partner-note i{
  font-style:normal;
  opacity:.45;
  padding:0 .35em;
}

/* Shop + Book: equal treatment and aligned labels */
.expansion-work{
  gap:clamp(28px,4vw,68px);
}
.expansion-work article{
  display:flex;
  flex-direction:column;
}
.expansion-screen{
  width:100%;
  margin:0;
}
.work-label{
  width:100% !important;
  margin:22px 0 0 !important;
}
.work-label span{
  display:block;
  font-family:"Geist Mono",monospace;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.58;
  margin-bottom:10px;
}
.work-label h3{
  margin:0 0 8px;
}

/* More intentional transition into final outcome */
.system-line{
  margin-top:56px;
  padding-top:26px;
}
.v19-close{
  margin-top:0;
}

/* Tablet/mobile recomposition */
@media(max-width:1000px){
  .screen-actual-entry-combined{width:min(80%,820px)}
  .screen-actual-recap{width:100%}
}
@media(max-width:800px){
  .screen-actual-entry-combined{width:100%}
  .decision-copy p,
  .expansion-work p{font-size:14px}
  .work-label{margin-top:18px !important}
  .system-line{margin-top:44px}
}
/* V34 — NextStopNY integrated brand case study */
.project-nsny{--nsny-paper:#f3efe7;--nsny-ink:#11110f;--nsny-blue:#1268b3;--nsny-deep:#123a63;--nsny-rule:#b6afa5;background:var(--nsny-paper);color:var(--nsny-ink)}
.project-nsny .nav{background:var(--nsny-paper)}.nsny-hero h1{max-width:13ch}.nsny-hero .facts{grid-template-columns:.6fr 1.15fr 1.35fr .8fr}
.nsny-opening-collage{min-height:100vh;padding:7vw 6vw;display:grid;grid-template-columns:1.25fr .52fr .75fr;gap:2vw;align-items:center;background:#e5e0d7;overflow:hidden}.nsny-opening-collage figure{margin:0;overflow:hidden}.nsny-opening-collage img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.collage-web{height:68vh}.collage-market{height:78vh;transform:translateY(6vh)}.collage-tour{height:58vh;transform:translateY(-6vh)}
.nsny-system .section-main{padding-bottom:105px}.nsny-channel-line{border-top:1px solid var(--nsny-rule);border-bottom:1px solid var(--nsny-rule);display:flex;flex-wrap:wrap;gap:0;margin-top:75px}.nsny-channel-line span{font:500 clamp(17px,2vw,31px)/1 var(--font-display);letter-spacing:-.035em;padding:24px 30px 24px 0;margin-right:30px}
.nsny-digital{background:#11110f;color:#f7f1e7}.nsny-digital>aside{border-color:#4d4944}.nsny-web-layout{display:grid;grid-template-columns:1.1fr .72fr;gap:3vw;align-items:start}.nsny-web-layout figure{margin:0}.nsny-web-layout .web-primary{grid-row:span 2}.nsny-web-layout img{width:100%;display:block;max-height:800px;object-fit:cover;object-position:top}.nsny-web-layout .web-primary img{max-height:1120px}.project-nsny figcaption{font:500 9px/1.2 var(--font-ui);letter-spacing:.1em;margin-top:14px;opacity:.7}
.nsny-market-section{background:var(--nsny-paper)}.market-composition{display:grid;grid-template-columns:.47fr .53fr;gap:6vw;align-items:center}.market-report{margin:0;max-height:980px;overflow:hidden}.market-report img{width:100%;display:block;object-position:top}.market-detail{align-self:center}.market-detail>span,.language-grid span{display:block;font:500 9px var(--font-ui);letter-spacing:.11em;margin-bottom:24px}.market-detail>strong{display:block;font:500 clamp(24px,3vw,46px)/1.08 var(--font-display);letter-spacing:-.04em;max-width:16ch}.market-detail img{width:76%;display:block;margin:60px 0 0 auto}
.nsny-property{background:#ded9cf}.property-grid{display:grid;grid-template-columns:1.15fr .55fr .45fr;gap:3vw;align-items:start}.property-grid figure{margin:0}.property-grid img{width:100%;display:block;object-fit:cover;object-position:top;max-height:830px}.property-grid .property-hero img{max-height:none}.property-grid figure:nth-child(2){margin-top:10vw}.property-grid figure:nth-child(3){margin-top:3vw}
.comms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2vw;align-items:start}.comms-grid figure{margin:0}.comms-grid img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover;object-position:top}.comms-grid figure:nth-child(3) img,.comms-grid figure:nth-child(4) img{aspect-ratio:1/1}.comms-grid figure:nth-child(even){margin-top:5vw}
.nsny-language{background:#11110f;color:#f7f1e7}.nsny-language>aside{border-color:#4d4944}.language-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:80px;border-top:1px solid #514d48}.language-grid>div{padding:32px 5vw 50px 0;border-bottom:1px solid #514d48}.language-grid>div:nth-child(even){padding-left:4vw;border-left:1px solid #514d48}.language-grid strong{font:500 clamp(18px,2vw,30px)/1.15 var(--font-display);letter-spacing:-.03em;max-width:20ch;display:block}.nsny-channel-footer{font:500 11px/1.5 var(--font-ui);letter-spacing:.08em;margin-top:60px}.nsny-close{background:var(--nsny-deep)}
@media(max-width:800px){.nsny-hero .facts{grid-template-columns:1fr 1fr}.nsny-opening-collage{min-height:auto;padding:60px 18px;grid-template-columns:1fr 1fr}.collage-web{grid-column:1/-1;height:58vh}.collage-market,.collage-tour{height:48vh;transform:none}.nsny-web-layout,.market-composition,.property-grid{grid-template-columns:1fr}.nsny-web-layout .web-primary{grid-row:auto}.nsny-web-layout img,.nsny-web-layout .web-primary img{max-height:680px}.market-detail img{width:100%;margin-top:40px}.property-grid figure:nth-child(2),.property-grid figure:nth-child(3){margin-top:30px}.comms-grid{grid-template-columns:1fr 1fr}.comms-grid figure:nth-child(even){margin-top:0}.language-grid{grid-template-columns:1fr}.language-grid>div:nth-child(even){padding-left:0;border-left:0}.nsny-channel-line span{font-size:18px;padding:18px 18px 18px 0;margin-right:10px}}
.nsny-index-thumb{overflow:hidden}.nsny-index-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .55s ease}.index-card:hover .nsny-index-thumb img{transform:scale(1.025)}
/* V35 — exact-artwork pitchbook presentation */
.nsny-pitchbook{background:#eee9e0}.nsny-pitchbook .section-main{overflow:hidden}.pitchbook-hero{margin:35px -4vw 10px -2vw}.pitchbook-hero img{display:block;width:112%;height:auto}.pitchbook-support{display:grid;grid-template-columns:1fr 1fr;gap:3vw;align-items:start;margin-top:40px}.pitchbook-support figure{margin:0}.pitchbook-support img{display:block;width:100%;height:auto}.pitchbook-support figure:nth-child(2){margin-top:8vw}.pitchbook-support figcaption{margin-top:14px}
@media(max-width:800px){.pitchbook-hero{margin:25px -20px 10px}.pitchbook-hero img{width:110%;margin-left:-5%}.pitchbook-support{grid-template-columns:1fr;gap:30px}.pitchbook-support figure:nth-child(2){margin-top:0}}

/* V37 — near-overhead pitchbook flat-lay: full object visible, no CSS zoom */
.nsny-pitchbook .section-main{overflow:visible}
.pitchbook-hero{
  margin:48px 0 28px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible;
}
.pitchbook-hero img{
  display:block;
  width:min(72%, 980px);
  max-width:980px;
  height:auto;
  object-fit:contain;
}
@media(max-width:800px){
  .pitchbook-hero{margin:30px 0 18px}
  .pitchbook-hero img{width:94%;max-width:none;margin:0}
}

/* V38 — pitchbook scale refinement */
.pitchbook-hero img{
  width:min(88%, 1240px);
  max-width:1240px;
}
@media(max-width:800px){
  .pitchbook-hero img{width:98%;max-width:none}
}

/* V39 — pitchbook scale + section flow */
.nsny-pitchbook{
  padding-bottom:clamp(110px,12vw,190px);
}
.nsny-pitchbook .section-main{
  overflow:visible;
}
.pitchbook-intro{
  max-width:920px;
}
.pitchbook-intro .lede{
  max-width:690px;
}
.pitchbook-hero{
  margin:clamp(38px,5vw,72px) 0 22px;
  width:100%;
  display:block;
  overflow:visible;
}
.pitchbook-hero img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  object-fit:contain;
}
.pitchbook-sequence{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  gap:18px;
  align-items:center;
  margin:18px 0 clamp(64px,8vw,118px);
  font:500 9px/1.2 var(--font-ui);
  letter-spacing:.12em;
  opacity:.72;
}
.pitchbook-sequence i{
  display:block;
  height:1px;
  background:var(--nsny-rule);
}
.pitchbook-support{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.72fr);
  gap:clamp(34px,5vw,78px);
  align-items:start;
  margin-top:0;
}
.pitchbook-support figure{
  margin:0;
}
.pitchbook-support img{
  display:block;
  width:100%;
  height:auto;
}
.pitchbook-support-secondary{
  margin-top:clamp(90px,10vw,160px) !important;
}
.pitchbook-support figcaption{
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid var(--nsny-rule);
}
.pitchbook-support figcaption span{
  font:500 9px/1 var(--font-ui);
  letter-spacing:.1em;
  opacity:.55;
}
@media(max-width:800px){
  .nsny-pitchbook{padding-bottom:90px}
  .pitchbook-hero{margin:34px 0 18px}
  .pitchbook-hero img{width:100%;max-width:none}
  .pitchbook-sequence{
    grid-template-columns:1fr;
    gap:8px;
    margin:14px 0 55px;
  }
  .pitchbook-sequence i{display:none}
  .pitchbook-support{grid-template-columns:1fr;gap:42px}
  .pitchbook-support-secondary{margin-top:0 !important}
}

/* V40 — keep V39 hero scale; straighten book; restore V38 supporting-page treatment */
.pitchbook-hero{
  margin:clamp(38px,5vw,72px) 0 clamp(58px,7vw,96px);
}
.pitchbook-hero img{
  width:100%;
  max-width:none;
  height:auto;
}
.pitchbook-sequence{display:none !important}
.pitchbook-support{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
  margin-top:0;
}
.pitchbook-support figure,
.pitchbook-support-secondary{
  margin:0 !important;
}
.pitchbook-support img{
  display:block;
  width:100%;
  height:auto;
}
.pitchbook-support figcaption{
  display:block;
  margin-top:12px;
  padding-top:0;
  border-top:0;
}
@media(max-width:800px){
  .pitchbook-hero{margin:34px 0 52px}
  .pitchbook-support{grid-template-columns:1fr;gap:34px}
}

/* V41 — NextStopNY website ecosystem */
.nsny-digital{
  padding-top:clamp(100px,10vw,160px);
  padding-bottom:clamp(120px,12vw,190px);
}
.nsny-web-intro{max-width:920px}
.nsny-web-intro .lede{max-width:720px}

.nsny-desktop-feature{
  margin:clamp(54px,7vw,96px) 0 clamp(90px,10vw,150px);
}
.desktop-monitor{
  position:relative;
  width:min(100%,1100px);
  margin:0 auto;
  padding-bottom:14%;
}
.desktop-screen{
  position:relative;
  z-index:3;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#111;
  border:12px solid #1d1d1d;
  border-radius:10px;
  box-shadow:0 18px 38px rgba(0,0,0,.12);
}
.desktop-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.desktop-chin{
  position:absolute;
  z-index:4;
  left:1.1%;
  top:calc((100% - 14%) * .88);
  width:97.8%;
  height:9%;
  background:#e8e8e6;
  border-radius:0 0 8px 8px;
  box-shadow:0 6px 10px rgba(0,0,0,.08);
}
.desktop-neck{
  position:absolute;
  z-index:2;
  left:45.5%;
  bottom:4.7%;
  width:9%;
  height:16%;
  background:linear-gradient(90deg,#d0d0ce,#f0f0ee 52%,#c9c9c7);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
}
.desktop-base{
  position:absolute;
  z-index:2;
  left:38%;
  bottom:2%;
  width:24%;
  height:3.8%;
  background:#d9d9d7;
  border-radius:50%;
  box-shadow:0 5px 9px rgba(0,0,0,.10);
}
.nsny-desktop-feature figcaption,
.web-screen figcaption{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  margin-top:18px;
  font-family:var(--font-ui);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nsny-desktop-feature figcaption span,
.web-screen figcaption span{font-size:9px;opacity:.48}
.nsny-desktop-feature figcaption strong,
.web-screen figcaption strong{font-size:10px;font-weight:500}
.nsny-desktop-feature figcaption em,
.web-screen figcaption em{font-size:9px;font-style:normal;opacity:.48}

.nsny-web-screens{
  display:grid;
  grid-template-columns:1.45fr .82fr;
  column-gap:clamp(28px,4vw,60px);
  row-gap:clamp(72px,8vw,125px);
  align-items:start;
}
.web-screen{margin:0}
.web-crop{
  overflow:hidden;
  background:#f7f7f5;
  border:1px solid rgba(20,20,20,.10);
  border-radius:18px;
}
.web-crop img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.web-article .web-crop{aspect-ratio:1.22/1}
.web-article .web-crop img{object-position:center 4%}
.web-agents{margin-top:clamp(80px,9vw,140px)}
.web-agents .web-crop{aspect-ratio:.82/1}
.web-agents .web-crop img{object-position:center top}
.web-profile{
  grid-column:1/-1;
  width:82%;
  margin-left:auto;
}
.web-profile .web-crop{aspect-ratio:1.72/1}
.web-profile .web-crop img{object-position:center 5%}

@media(max-width:800px){
  .nsny-desktop-feature{margin:42px 0 76px}
  .desktop-screen{border-width:7px;border-radius:7px}
  .nsny-web-screens{grid-template-columns:1fr;row-gap:54px}
  .web-agents{margin-top:0}
  .web-profile{grid-column:auto;width:100%;margin-left:0}
  .web-article .web-crop,
  .web-agents .web-crop,
  .web-profile .web-crop{aspect-ratio:1.05/1}
  .nsny-desktop-feature figcaption,
  .web-screen figcaption{grid-template-columns:auto 1fr}
  .nsny-desktop-feature figcaption em,
  .web-screen figcaption em{grid-column:2}
}

/* V42 — tighter website edit: featured blog system + two supporting screens */
.desktop-screen img{
  object-fit:cover;
  object-position:center top;
}

/* Use the Our Agents treatment as the visual language for both supporting screens. */
.nsny-web-screens{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(38px,5vw,72px);
  align-items:start;
}
.web-article,
.web-agents{
  margin:0 !important;
}
.web-article .web-crop,
.web-agents .web-crop{
  aspect-ratio:.86/1;
  border-radius:18px;
  overflow:hidden;
  background:#f7f7f5;
  border:1px solid rgba(20,20,20,.10);
}
.web-article .web-crop img,
.web-agents .web-crop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.web-article .web-crop img{
  object-position:center 3%;
}
.web-profile{display:none!important}

@media(max-width:800px){
  .nsny-web-screens{grid-template-columns:1fr;gap:48px}
  .web-article .web-crop,
  .web-agents .web-crop{aspect-ratio:1/1.08}
}

/* V43 — Screen 2 begins at the NextStopNY Blog content */
.web-article .web-crop img{
  object-position:center top !important;
}

/* V44 — refined desktop mockup only */
.desktop-monitor{
  width:min(100%,1160px);
  padding-bottom:12%;
}
.desktop-screen{
  aspect-ratio:16/9;
  border:6px solid #202020;
  border-radius:7px;
  box-shadow:0 13px 26px rgba(0,0,0,.075);
  background:#111;
}
.desktop-chin{
  left:.5%;
  top:calc((100% - 12%) * .905);
  width:99%;
  height:6.8%;
  background:#ececea;
  border-radius:0 0 6px 6px;
  box-shadow:0 4px 7px rgba(0,0,0,.055);
}
.desktop-neck{
  left:46.4%;
  bottom:3.9%;
  width:7.2%;
  height:13.5%;
  background:linear-gradient(90deg,#d6d6d4,#f2f2f0 50%,#d0d0ce);
  clip-path:polygon(22% 0,78% 0,92% 100%,8% 100%);
}
.desktop-base{
  left:40%;
  bottom:1.8%;
  width:20%;
  height:2.8%;
  background:#dededc;
  border-radius:50%;
  box-shadow:0 3px 6px rgba(0,0,0,.07);
}

/* Keep the website itself visually dominant. */
.nsny-desktop-feature{
  margin-top:clamp(52px,6vw,82px);
}

/* V45 — UX/UI hierarchy refinement */

/* Desktop is context, not the dominant artifact. Reduce it ~12%. */
.desktop-monitor{
  width:min(88%,1020px);
}
.nsny-desktop-feature{
  margin-top:clamp(48px,5.5vw,74px);
  margin-bottom:clamp(105px,11vw,165px);
}

/* Supporting screens are the interface inspection layer: same scale + same framing. */
.nsny-web-screens{
  grid-template-columns:1fr 1fr;
  gap:clamp(42px,5vw,70px);
  align-items:start;
}
.web-article,
.web-agents{
  width:100%;
  margin:0 !important;
}
.web-article .web-crop,
.web-agents .web-crop{
  aspect-ratio:.86/1;
  border-radius:12px;
  border:1px solid rgba(20,20,20,.09);
  background:#f7f7f5;
}

/* Screen 2 begins precisely from the prepared NEXTSTOPNY BLOG source crop. */
.web-article .web-crop img{
  object-position:center top !important;
}

/* Agent directory crop prioritizes heading + enough grid to establish the pattern. */
.web-agents .web-crop img{
  object-position:center top !important;
}

/* Captions function as page-system labels. */
.nsny-desktop-feature figcaption,
.web-screen figcaption{
  margin-top:15px;
  padding-top:0;
}
.nsny-desktop-feature figcaption strong,
.web-screen figcaption strong{
  font-size:10px;
  letter-spacing:.09em;
}
.nsny-desktop-feature figcaption em,
.web-screen figcaption em{
  font-size:9px;
  opacity:.46;
}

/* Slightly more separation before the close of the website section. */
.nsny-web-screens{
  margin-bottom:clamp(24px,3vw,48px);
}

@media(max-width:800px){
  .desktop-monitor{width:94%}
  .nsny-desktop-feature{margin-bottom:78px}
  .nsny-web-screens{grid-template-columns:1fr;gap:52px}
  .web-article .web-crop,
  .web-agents .web-crop{aspect-ratio:1/1.08}
}

/* V46 — Screen 2: no top image/hero; begin at THE NEXTSTOPNY BLOG */
.web-article .web-crop img{
  object-position:center top !important;
}

/* V47 — Screen 2 begins with the full blue THE NEXTSTOPNY BLOG bar */
.web-article .web-crop img{
  object-position:center top !important;
}

/* V48 — Screen 2 as a deliberate editorial viewport */
.web-article .web-crop{
  aspect-ratio:1.34/1;
  border-radius:12px;
  overflow:hidden;
}
.web-article .web-crop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top !important;
}
@media(max-width:800px){
  .web-article .web-crop{aspect-ratio:1.12/1}
}

/* V49 — Screen 2 restored to the page from its actual beginning */
.web-article .web-crop{
  aspect-ratio:.86/1;
}
.web-article .web-crop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top !important;
}
@media(max-width:800px){
  .web-article .web-crop{aspect-ratio:1/1.08}
}

/* V50 — Market Communications / Instagram carousel */
.market-composition{grid-template-columns:minmax(0,.56fr) minmax(320px,.44fr);gap:7vw;align-items:start}
.market-report{max-height:none}
.market-detail{padding-top:7vh}
.market-detail>strong{max-width:17ch}
.ig-post{width:min(100%,480px);margin:52px 0 0 auto;background:#fff;border:1px solid rgba(0,0,0,.16);border-radius:10px;overflow:hidden;color:#111}
.ig-head{height:52px;padding:0 14px;display:flex;align-items:center;gap:10px;font:500 12px var(--font-ui)}
.ig-avatar{width:27px;height:27px;border:1px solid rgba(0,0,0,.18);border-radius:50%;display:grid;place-items:center;font-size:10px}
.ig-user{letter-spacing:.01em}.ig-more{margin-left:auto;letter-spacing:.12em}
.ig-stage{position:relative;aspect-ratio:1/1;background:#f5f5f5;overflow:hidden}
.ig-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .22s ease}
.ig-slide.is-active{opacity:1}
.ig-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:#111;font:400 22px/1 Arial;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.16)}
.ig-prev{left:10px}.ig-next{right:10px}
.ig-count{position:absolute;right:10px;top:10px;padding:5px 7px;border-radius:12px;background:rgba(0,0,0,.62);color:#fff;font:500 9px var(--font-ui);letter-spacing:.04em}
.ig-actions{height:44px;padding:0 14px;display:flex;align-items:center;gap:14px;font:400 24px/1 Arial}.ig-save{margin-left:auto}
.ig-dots{display:flex;justify-content:center;gap:5px;padding:0 0 13px}
.ig-dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:#c7c7c7;cursor:pointer}
.ig-dots button.is-active{background:#111}
@media(max-width:800px){
  .market-composition{grid-template-columns:1fr;gap:48px}
  .market-detail{padding-top:0}
  .ig-post{margin:38px auto 0}
}
@media(prefers-reduced-motion:reduce){.ig-slide{transition:none}}

/* V51 — clean social carousel: artwork fills the available screen */
.ig-post{
  width:min(100%,520px);
  border-radius:8px;
}
.ig-head,.ig-actions{display:none!important}
.ig-stage{
  width:100%;
  aspect-ratio:1/1;
  background:#fff;
}
.ig-slide{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.ig-dots{
  padding:12px 0 13px;
}

/* V52 — exact 1:1, full-bleed social artwork */
.ig-post{
  width:min(100%,520px);
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.ig-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  background:transparent;
  overflow:hidden;
}
.ig-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover; /* source files are 1:1, so this fills edge-to-edge without cropping */
  object-position:center;
  display:block;
}
.ig-dots{
  padding:10px 0 0;
}

/* V53 — identical carousel geometry; never crop artwork */
.ig-post{
  width:min(100%,520px);
  margin-left:auto;
  background:transparent;
  border:0;
  border-radius:0;
}
.ig-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  overflow:hidden;
  background:transparent;
}
.ig-slide{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.ig-dots{padding:10px 0 0}

/* V54 — Market information system */
.market-system{margin-top:64px}
.market-subnav{
  position:sticky;top:18px;z-index:8;
  width:max-content;max-width:100%;
  margin:0 auto 100px;padding:10px 16px;
  display:flex;gap:12px;align-items:center;
  background:rgba(246,243,237,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.12);border-radius:999px;
  font:500 10px var(--font-mono);letter-spacing:.08em;
}
.market-subnav a{text-decoration:none;color:inherit}
.market-chapter{scroll-margin-top:90px;margin:0 0 150px}
.market-chapter-head{
  display:grid;grid-template-columns:minmax(160px,.28fr) minmax(0,.72fr);
  gap:40px;align-items:start;margin-bottom:46px;
}
.market-chapter-head span{font:500 11px var(--font-mono);letter-spacing:.08em}
.market-chapter-head p{margin:0;max-width:620px;font-size:18px;line-height:1.45}
.market-overview-art{width:min(78%,920px);margin:0 auto}
.market-overview-art img{width:100%;height:auto;display:block}
.market-data-stack{display:grid;gap:54px}
.market-data-stack figure{margin:0;width:100%;overflow:hidden}
.market-data-stack img{width:100%;height:auto;display:block}
.market-social .ig-post{width:min(48vw,540px);margin:0 auto}
.market-social .ig-stage{aspect-ratio:1/1}
.market-social .ig-slide{object-fit:contain!important}
@media(max-width:800px){
  .market-subnav{top:10px;margin-bottom:64px;gap:8px;padding:9px 12px;font-size:9px}
  .market-chapter{margin-bottom:100px}
  .market-chapter-head{grid-template-columns:1fr;gap:14px;margin-bottom:30px}
  .market-chapter-head p{font-size:16px}
  .market-overview-art{width:100%}
  .market-data-stack{gap:30px}
  .market-social .ig-post{width:100%}
}

/* V55 — Overview + Market Data as a compact two-column editorial spread */
.market-two-col{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(44px,6vw,96px);
  align-items:start;
  margin-bottom:150px;
}
.market-two-col .market-chapter{
  margin-bottom:0;
}
.market-two-col .market-chapter-head{
  display:block;
  margin-bottom:28px;
}
.market-two-col .market-chapter-head span{
  display:block;
  margin-bottom:14px;
}
.market-two-col .market-chapter-head p{
  max-width:36ch;
  font-size:15px;
  line-height:1.5;
}
.market-two-col .market-overview-art{
  width:100%;
  margin:0;
}
.market-two-col .market-data-stack{
  gap:22px;
}
.market-two-col .market-data-stack figure{
  width:100%;
}
.market-two-col .market-data-stack img{
  width:100%;
  height:auto;
  display:block;
}
.market-social{
  padding-top:0;
}
@media(max-width:900px){
  .market-two-col{
    grid-template-columns:1fr;
    gap:80px;
    margin-bottom:100px;
  }
  .market-two-col .market-chapter-head p{
    max-width:620px;
    font-size:16px;
  }
}

/* V56 — equal visual scale for Market Overview + Weekly Market Data */
.market-two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.market-two-col .market-overview-art,
.market-two-col .market-data-feature{
  width:100%;
  margin:0;
  aspect-ratio:0.74 / 1;
  overflow:hidden;
  background:#fff;
}
.market-two-col .market-overview-art img,
.market-two-col .market-data-feature img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
}
.market-two-col .market-data-feature img{
  image-rendering:auto;
}
@media(max-width:900px){
  .market-two-col{grid-template-columns:1fr}
}

/* V57 — restore V55 Market Overview; only Weekly Market Data uses the matched crop */
.market-two-col{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
}
.market-two-col .market-overview-art{
  width:100%;
  margin:0;
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
}
.market-two-col .market-overview-art img{
  width:100%;
  height:auto;
  display:block;
  object-fit:initial;
  object-position:initial;
}
.market-two-col .market-data-feature{
  width:100%;
  margin:0;
  aspect-ratio:auto;
  overflow:hidden;
  background:#fff;
}
.market-two-col .market-data-feature img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:top center;
}
@media(max-width:900px){
  .market-two-col{grid-template-columns:1fr}
}

/* V58 — balanced Market Communications proportions */
.market-system{
  max-width:1280px;
  margin:64px auto 0;
}
.market-two-col{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(36px,4.5vw,72px);
  align-items:start;
  margin-bottom:clamp(110px,10vw,150px);
}
.market-two-col .market-chapter-head{
  min-height:116px;
  margin-bottom:26px;
}
.market-two-col .market-chapter-head p{
  max-width:40ch;
  font-size:15px;
  line-height:1.5;
}
.market-two-col .market-overview-art{
  width:100%;
  max-width:500px;
  margin:0;
  aspect-ratio:auto;
  overflow:visible;
}
.market-two-col .market-overview-art img{
  width:100%;
  height:auto;
  display:block;
}
.market-two-col .market-data-feature{
  width:100%;
  max-width:660px;
  margin:0;
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
}
.market-two-col .market-data-feature img{
  width:100%;
  height:auto;
  display:block;
  object-fit:initial;
  image-rendering:auto;
}
.market-social{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.market-social .market-chapter-head{
  grid-template-columns:minmax(150px,.3fr) minmax(0,.7fr);
}
.market-social .ig-post{
  width:min(100%,520px);
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:900px){
  .market-system{max-width:none}
  .market-two-col{grid-template-columns:1fr;gap:72px}
  .market-two-col .market-chapter-head{min-height:0}
  .market-two-col .market-overview-art,
  .market-two-col .market-data-feature{max-width:none}
  .market-social .market-chapter-head{grid-template-columns:1fr}
}

/* V59 — equal visual weight for Overview and Weekly Market Data */
.market-two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,4.5vw,68px);
  align-items:start;
}
.market-two-col .market-overview-art,
.market-two-col .market-data-feature{
  width:100%;
  max-width:none;
  margin:0;
}
/* Keep the Overview exactly in its natural V55-style presentation. */
.market-two-col .market-overview-art{
  aspect-ratio:auto;
  overflow:visible;
}
.market-two-col .market-overview-art img{
  width:100%;
  height:auto;
  display:block;
}
/* Weekly Data gets the same COLUMN SIZE, using a tighter readable crop. */
.market-two-col .market-data-feature{
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
}
.market-two-col .market-data-feature img{
  width:100%;
  height:auto;
  display:block;
  object-fit:initial;
  image-rendering:auto;
}
@media(max-width:900px){
  .market-two-col{grid-template-columns:1fr}
}

/* V60 — no market subnav; show the complete Weekly Market Data artwork */
.market-subnav{display:none!important}
.market-system{margin-top:64px}
.market-two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,4.5vw,68px);
  align-items:start;
}
.market-two-col .market-data-feature{
  width:100%;
  max-width:none;
  margin:0;
  aspect-ratio:auto;
  overflow:visible;
}
.market-two-col .market-data-feature img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:top center;
  image-rendering:auto;
}
@media(max-width:900px){
  .market-two-col{grid-template-columns:1fr}
}

/* V61 — equal two-panel editorial spread */
.market-two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(36px,4.5vw,68px);
  align-items:stretch;
  margin-bottom:clamp(150px,13vw,210px);
}
.market-two-col .market-chapter{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.market-two-col .market-chapter-head{
  min-height:118px;
  margin-bottom:28px;
}
.market-two-col .market-overview-art,
.market-two-col .market-data-feature{
  flex:1;
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
  background:#fff;
}
/* Both panels occupy the same visual footprint. */
.market-two-col .market-overview-art,
.market-two-col .market-data-feature{
  aspect-ratio:0.475 / 1;
}
.market-two-col .market-overview-art img,
.market-two-col .market-data-feature img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
}
/* The two source pieces are both long-form; crop only at the bottom if needed,
   never stretch them. */
.market-social{
  margin-top:0;
}
@media(max-width:900px){
  .market-two-col{
    grid-template-columns:1fr;
    gap:80px;
    margin-bottom:110px;
  }
  .market-two-col .market-chapter-head{min-height:0}
  .market-two-col .market-overview-art,
  .market-two-col .market-data-feature{
    aspect-ratio:auto;
    overflow:visible;
  }
  .market-two-col .market-overview-art img,
  .market-two-col .market-data-feature img{
    height:auto;
    object-fit:initial;
  }
}

/* V62 — final Market Communications UX/UI polish */
.market-two-col{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(38px,4.8vw,72px);
  align-items:start;
  margin-bottom:clamp(170px,15vw,230px);
}
.market-two-col .market-chapter{
  display:block;
}
.market-two-col .market-chapter-head{
  min-height:0;
  margin-bottom:26px;
}
.market-two-col .market-chapter-head p{
  max-width:38ch;
  font-size:15px;
  line-height:1.5;
}
/* Equal-width, top-aligned artwork — natural proportions instead of forced card heights. */
.market-two-col .market-overview-art,
.market-two-col .market-data-feature{
  width:100%;
  max-width:none;
  margin:0;
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
}
.market-two-col .market-overview-art img,
.market-two-col .market-data-feature img{
  width:100%;
  height:auto;
  display:block;
  object-fit:initial;
  object-position:initial;
}
/* Social is a distinct second beat, not a third grid card. */
.market-social{
  max-width:760px;
  margin:0 auto;
}
.market-social .market-chapter-head{
  margin-bottom:30px;
}
.market-social .market-chapter-head p{
  max-width:38ch;
}
.market-social .ig-post{
  margin-top:0;
}
@media(max-width:900px){
  .market-two-col{
    grid-template-columns:1fr;
    gap:80px;
    margin-bottom:120px;
  }
  .market-social{max-width:none}
}

/* V63 — compress Market Communications without changing the story */
.market-system{
  margin-top:clamp(48px,5vw,72px);
}
.market-two-col{
  gap:clamp(32px,4vw,60px);
  margin-bottom:clamp(105px,9vw,145px);
}
.market-two-col .market-chapter-head{
  margin-bottom:22px;
}
.market-two-col .market-overview-art,
.market-two-col .market-data-feature{
  height:clamp(680px,58vw,820px);
  overflow:hidden;
}
.market-two-col .market-overview-art img,
.market-two-col .market-data-feature img{
  width:100%;
  height:auto;
  display:block;
  object-fit:initial;
  object-position:top center;
}
/* Intentional bottom crop: enough content to communicate the system
   without turning this into a case study inside the case study. */
.market-social .market-chapter-head{
  margin-bottom:24px;
}
.market-social{
  max-width:720px;
}
@media(max-width:900px){
  .market-two-col{
    gap:68px;
    margin-bottom:90px;
  }
  .market-two-col .market-overview-art,
  .market-two-col .market-data-feature{
    height:auto;
    max-height:760px;
    overflow:hidden;
  }
  .market-social{max-width:none}
}

/* V64 — From Listing to Campaign */
.nsny-property-v64 .property-intro{max-width:850px;margin-bottom:clamp(54px,7vw,92px)}
.nsny-property-v64 .property-intro .lede{max-width:620px}
.postcard-feature{margin-bottom:clamp(90px,10vw,150px)}
.postcard-stage{
  position:relative;
  min-height:clamp(420px,52vw,720px);
  background:#f1eee8;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.postcard-card{
  position:absolute;
  width:min(58%,760px);
  margin:0;
  background:white;
  box-shadow:0 18px 45px rgba(20,20,20,.10);
}
.postcard-card img{width:100%;height:auto;display:block}
.postcard-front{transform:translate(-16%,-7%) rotate(-2.2deg);z-index:2}
.postcard-back{transform:translate(18%,12%) rotate(1.7deg);z-index:1}
.property-label,
.property-support-v64 figcaption{
  display:flex;justify-content:space-between;gap:24px;
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(20,20,20,.18)
}
.property-label span,.property-support-v64 figcaption span{
  font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:.04em
}
.property-label p,.property-support-v64 figcaption p{margin:0;max-width:330px;font-size:14px;line-height:1.45}
.property-support-v64{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,74px);align-items:start
}
.property-support-item{margin:0}
.property-support-media{overflow:hidden;background:#f4f2ed}
.property-support-media img{width:100%;display:block}
.broker-media{aspect-ratio:1/1.12}
.broker-media img{height:100%;object-fit:cover;object-position:center top}
.email-crop{height:clamp(500px,53vw,720px)}
.email-crop img{height:auto;min-height:100%;object-fit:cover;object-position:top center}
@media(max-width:900px){
  .postcard-stage{min-height:440px}
  .postcard-card{width:76%}
  .postcard-front{transform:translate(-9%,-8%) rotate(-1.5deg)}
  .postcard-back{transform:translate(10%,12%) rotate(1deg)}
  .property-support-v64{grid-template-columns:1fr;gap:72px}
  .email-crop{height:620px}
}

/* V65 — refine Listing to Campaign */
.postcard-stage{
  background:transparent!important;
  overflow:visible;
  min-height:clamp(430px,50vw,690px);
}
/* Keep both actual postcard sides clearly visible; no white stage/card surround. */
.postcard-card{
  width:min(54%,720px);
  background:transparent!important;
  box-shadow:0 14px 34px rgba(20,20,20,.09);
}
.postcard-front{
  transform:translate(-20%,-7%) rotate(-1.4deg);
  z-index:2;
}
.postcard-back{
  transform:translate(21%,11%) rotate(1.1deg);
  z-index:1;
}
/* New Thunderbird email: crop the long send while preserving its key hierarchy. */
.email-crop{
  height:clamp(520px,48vw,690px);
  overflow:hidden;
  background:transparent;
}
.email-crop img{
  width:100%;
  height:auto;
  min-height:0;
  display:block;
  object-fit:initial;
  object-position:top center;
}
@media(max-width:900px){
  .postcard-stage{min-height:420px}
  .postcard-card{width:72%}
  .postcard-front{transform:translate(-12%,-8%) rotate(-1deg)}
  .postcard-back{transform:translate(13%,12%) rotate(.8deg)}
  .email-crop{height:600px}
}

/* V66 — campaign ecosystem: hero direct mail + asymmetrical channel row */
.nsny-property-v66 .property-intro{
  max-width:820px;
  margin-bottom:clamp(58px,7vw,96px);
}
.nsny-property-v66 .property-intro .lede{max-width:520px}

.campaign-hero{margin-bottom:clamp(110px,12vw,170px)}
.campaign-postcard-stage{
  position:relative;
  min-height:clamp(430px,48vw,690px);
  overflow:visible;
}
.campaign-postcard-front,
.campaign-postcard-back{
  position:absolute;
  margin:0;
  background:transparent;
}
.campaign-postcard-front{
  width:min(69%,900px);
  left:5%;
  top:4%;
  z-index:2;
  transform:rotate(-.45deg);
  filter:drop-shadow(0 18px 28px rgba(20,20,20,.10));
}
.campaign-postcard-back{
  width:min(50%,650px);
  right:4%;
  bottom:1%;
  z-index:1;
  transform:rotate(1.1deg);
  filter:drop-shadow(0 14px 24px rgba(20,20,20,.08));
}
.campaign-postcard-front img,
.campaign-postcard-back img{width:100%;height:auto;display:block}

.campaign-caption,
.campaign-support figcaption{
  display:grid;
  grid-template-columns:minmax(130px,.45fr) 1fr;
  gap:24px;
  border-top:1px solid rgba(20,20,20,.18);
  padding-top:14px;
  margin-top:18px;
}
.campaign-caption span,
.campaign-support figcaption span{
  font-family:"Geist Mono",monospace;
  font-size:12px;
  letter-spacing:.05em;
}
.campaign-caption p,
.campaign-support figcaption p{
  margin:0;
  max-width:360px;
  font-size:14px;
  line-height:1.45;
}

.campaign-support{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(42px,6vw,88px);
  align-items:start;
}
.campaign-support-item{margin:0}
.campaign-media{overflow:hidden;background:transparent}
.broker-context{
  aspect-ratio:4/5;
  max-width:470px;
}
.broker-context img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center top;
}
.email-editorial-crop{
  height:clamp(570px,58vw,800px);
  overflow:hidden;
}
.email-editorial-crop img{
  width:100%;height:auto;display:block;
  object-fit:initial;object-position:top center;
}
.campaign-email{padding-top:clamp(0px,2vw,24px)}

@media(max-width:900px){
  .campaign-hero{margin-bottom:90px}
  .campaign-postcard-stage{min-height:430px}
  .campaign-postcard-front{width:78%;left:0;top:2%}
  .campaign-postcard-back{width:58%;right:0;bottom:3%}
  .campaign-support{grid-template-columns:1fr;gap:78px}
  .broker-context{max-width:none;aspect-ratio:auto}
  .broker-context img{height:auto;object-fit:initial}
  .email-editorial-crop{height:650px}
}

/* V67 — display refinement based on review */
/* Postcard: smaller overall, with both designed sides clearly readable. */
.campaign-postcard-stage{
  min-height:clamp(360px,40vw,560px);
  max-width:1080px;
  margin:0 auto;
}
.campaign-postcard-front{
  width:min(55%,700px);
  left:3%;
  top:3%;
  transform:rotate(-.35deg);
}
.campaign-postcard-back{
  width:min(55%,700px);
  right:3%;
  bottom:2%;
  transform:rotate(.55deg);
  z-index:1;
}
/* Reduce overlap so the reverse design is genuinely visible rather than decorative. */
.campaign-postcard-front{z-index:2}
.campaign-caption{max-width:1080px;margin-left:auto;margin-right:auto}

/* Supporting row: show the Broker Outreach piece in full — no cut-off text. */
.campaign-support{
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(42px,5.5vw,82px);
}
.broker-context{
  aspect-ratio:auto;
  max-width:none;
  overflow:visible;
}
.broker-context img{
  width:100%;
  height:auto;
  display:block;
  object-fit:initial;
  object-position:initial;
}

/* Email: preserve native aspect ratio and show substantially more of the send.
   A light mail-client-like context makes the medium obvious without modifying artwork. */
.email-context{
  border:1px solid rgba(20,20,20,.16);
  background:#fff;
}
.email-context-bar{
  height:44px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid rgba(20,20,20,.13);
  font-family:"Geist Mono",monospace;
  font-size:10px;
  letter-spacing:.06em;
  color:rgba(20,20,20,.62);
}
.email-editorial-crop{
  height:auto;
  max-height:980px;
  overflow:hidden;
  background:#fff;
}
.email-editorial-crop img{
  width:100%;
  height:auto;
  display:block;
  min-height:0;
  object-fit:initial;
  object-position:top center;
}
.campaign-email{padding-top:0}

@media(max-width:900px){
  .campaign-postcard-stage{min-height:390px}
  .campaign-postcard-front{width:68%;left:0;top:0}
  .campaign-postcard-back{width:68%;right:0;bottom:0}
  .campaign-support{grid-template-columns:1fr}
  .email-editorial-crop{max-height:900px}
}

/* V68 — rebuild Property Marketing as three editorial campaign moments */
.nsny-property-v68 .property-intro{
  max-width:820px;
  margin-bottom:clamp(72px,8vw,112px);
}
.nsny-property-v68 .property-intro .lede{max-width:520px}

.campaign-moment{
  border-top:1px solid rgba(20,20,20,.18);
  padding-top:22px;
}
.moment-head{
  display:grid;
  grid-template-columns:180px minmax(0,430px);
  gap:30px;
  margin-bottom:clamp(48px,5vw,70px);
}
.moment-head span,.moment-copy>span{
  font-family:"Geist Mono",monospace;
  font-size:12px;
  letter-spacing:.05em;
}
.moment-head p,.moment-copy p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  max-width:390px;
}

/* Direct mail: straight, equal-scale, fully visible front + back. */
.campaign-direct{margin-bottom:clamp(130px,14vw,200px)}
.postcard-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  width:min(84%,1080px);
  margin:0 auto;
  align-items:start;
}
.postcard-pair figure{margin:0}
.postcard-pair img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 12px 22px rgba(20,20,20,.07));
}

/* Supporting moments: independent horizontal editorial rows. */
.campaign-broker-row,
.campaign-email-row{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:clamp(60px,8vw,120px);
  align-items:start;
  margin-bottom:clamp(135px,14vw,210px);
}
.moment-copy{
  position:sticky;
  top:110px;
  padding-top:4px;
}
.moment-copy h3{
  font-family:"Geist",sans-serif;
  font-weight:500;
  font-size:clamp(28px,3vw,44px);
  line-height:1.04;
  letter-spacing:-.035em;
  margin:34px 0 20px;
}
.broker-full{
  margin:0;
  width:min(100%,650px);
  justify-self:end;
}
.broker-full img{width:100%;height:auto;display:block}

/* Reverse the rhythm for digital: artwork left, copy right. */
.campaign-email-row{
  grid-template-columns:minmax(0,1.28fr) minmax(220px,.72fr);
  margin-bottom:0;
}
.email-full{
  margin:0;
  width:min(100%,700px);
}
.email-full img{
  width:100%;
  height:auto;
  display:block;
}
/* No fake email-client chrome and no forced crop. */

@media(max-width:900px){
  .moment-head{grid-template-columns:1fr;gap:14px}
  .postcard-pair{width:100%;gap:20px}
  .campaign-direct{margin-bottom:100px}
  .campaign-broker-row,.campaign-email-row{
    grid-template-columns:1fr;
    gap:42px;
    margin-bottom:105px;
  }
  .campaign-email-row .email-full{order:2}
  .campaign-email-row .moment-copy{order:1}
  .moment-copy{position:static}
  .broker-full,.email-full{width:100%;justify-self:auto}
}

/* V69 — reduce Broker Outreach artwork so it reads as a supporting campaign asset */
.nsny-property-v68 .broker-full{
  width:min(76%,500px);
  justify-self:center;
}
@media(max-width:900px){
  .nsny-property-v68 .broker-full{
    width:min(82%,500px);
    justify-self:center;
  }
}

/* V70 — scale the email down so the full piece reads comfortably in the section */
.nsny-property-v68 .email-full{
  width:min(76%,540px);
  justify-self:center;
}
@media(max-width:900px){
  .nsny-property-v68 .email-full{
    width:min(82%,540px);
    justify-self:center;
  }
}

/* V71 — newly supplied higher-quality Thunderbird email; preserve native detail */
.nsny-property-v68 .email-full{
  width:min(76%,540px);
}
.nsny-property-v68 .email-full img{
  width:100%;
  max-width:561px;
  height:auto;
  display:block;
}

/* V72 — intentional editorial crop: retain the strongest email content,
   ending before the repeated lower CTA/contact area. */
.nsny-property-v68 .email-full{
  width:min(76%,540px);
  justify-self:center;
  overflow:hidden;
  /* Source is 561 × 2048. This window shows roughly the upper 69%. */
  max-height:1415px;
}
.nsny-property-v68 .email-full img{
  width:100%;
  max-width:561px;
  height:auto;
  display:block;
  object-position:top center;
}

@media(max-width:900px){
  .nsny-property-v68 .email-full{
    width:min(82%,540px);
    /* preserve approximately the same crop proportion as width changes */
    max-height:none;
    aspect-ratio:561 / 1415;
    overflow:hidden;
  }
  .nsny-property-v68 .email-full img{
    width:100%;
    max-width:none;
  }
}

/* V73 — final Property Marketing polish */

/* Tighten the section rhythm so the three channels read as one campaign system. */
.nsny-property-v68 .campaign-direct{
  margin-bottom:clamp(105px,11vw,160px);
}
.nsny-property-v68 .campaign-broker-row,
.nsny-property-v68 .campaign-email-row{
  margin-bottom:clamp(108px,11vw,165px);
}

/* Front/back should read immediately as two sides of the same mail piece. */
.nsny-property-v68 .postcard-pair{
  gap:clamp(16px,2.2vw,30px);
  width:min(82%,1040px);
}

/* Simplify supporting hierarchy: channel → concise descriptor → artwork. */
.nsny-property-v68 .moment-copy{
  position:static;
  padding-top:2px;
}
.nsny-property-v68 .moment-copy h3{
  display:none;
}
.nsny-property-v68 .moment-copy p{
  margin-top:14px;
  max-width:280px;
  font-size:14px;
  line-height:1.5;
}

/* Keep labels perceptually attached to their corresponding visual. */
.nsny-property-v68 .campaign-broker-row,
.nsny-property-v68 .campaign-email-row{
  gap:clamp(36px,5vw,72px);
}
.nsny-property-v68 .campaign-broker-row{
  grid-template-columns:minmax(190px,.55fr) minmax(0,1.45fr);
}
.nsny-property-v68 .campaign-email-row{
  grid-template-columns:minmax(0,1.45fr) minmax(190px,.55fr);
}

/* Preserve the approved supporting-asset scale. */
.nsny-property-v68 .broker-full{
  width:min(76%,500px);
  justify-self:center;
}
.nsny-property-v68 .email-full{
  width:min(76%,540px);
  justify-self:center;
}

/* Slightly tighter lead-in to the first campaign moment. */
.nsny-property-v68 .property-intro{
  margin-bottom:clamp(62px,7vw,92px);
}

@media(max-width:900px){
  .nsny-property-v68 .campaign-direct{
    margin-bottom:82px;
  }
  .nsny-property-v68 .campaign-broker-row,
  .nsny-property-v68 .campaign-email-row{
    grid-template-columns:1fr;
    gap:26px;
    margin-bottom:88px;
  }
  .nsny-property-v68 .campaign-broker-row .moment-copy,
  .nsny-property-v68 .campaign-email-row .moment-copy{
    margin-bottom:4px;
  }
  .nsny-property-v68 .postcard-pair{
    width:100%;
    gap:12px;
  }
}

/* V74 — Everyday Moments: recurring communications + operational touchpoints */
.nsny-everyday-v74 .everyday-intro{
  max-width:880px;
  margin-bottom:clamp(72px,8vw,110px);
}
.nsny-everyday-v74 .everyday-intro .lede{max-width:600px}

.everyday-group{
  border-top:1px solid rgba(20,20,20,.18);
  padding-top:20px;
}
.everyday-label{
  display:grid;
  grid-template-columns:210px minmax(0,430px);
  gap:28px;
  margin-bottom:clamp(44px,5vw,68px);
}
.everyday-label span,
.agent-pair figcaption,
.operations-pair figcaption{
  font-family:"Geist Mono",monospace;
  font-size:11px;
  letter-spacing:.055em;
}
.everyday-label p{
  margin:0;
  font-size:14px;
  line-height:1.5;
  max-width:400px;
}

.agent-comms{margin-bottom:clamp(110px,12vw,165px)}
.agent-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  width:min(82%,960px);
  margin:0 auto;
  align-items:start;
}
.agent-pair figure,
.operations-pair figure{margin:0}
.agent-pair img{
  display:block;
  width:100%;
  height:auto;
}
.agent-pair figcaption,
.operations-pair figcaption{
  margin-top:14px;
  color:rgba(20,20,20,.68);
}

.operations{margin-bottom:0}
.operations-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,5vw,72px);
  width:min(72%,820px);
  margin:0 auto;
  align-items:start;
}
.document-frame{
  background:#fff;
  border:1px solid rgba(20,20,20,.12);
  overflow:hidden;
}
.document-frame img{
  display:block;
  width:100%;
  height:auto;
}

@media(max-width:900px){
  .everyday-label{grid-template-columns:1fr;gap:12px}
  .agent-pair{width:100%;gap:18px}
  .operations-pair{width:88%;gap:20px}
  .agent-comms{margin-bottom:88px}
}
@media(max-width:620px){
  .agent-pair,.operations-pair{grid-template-columns:1fr;width:100%;gap:46px}
}

/* V75 — Everyday Moments editorial hierarchy */
.nsny-everyday-v75 .everyday-intro-v75{
  max-width:880px;
  margin-bottom:clamp(68px,7vw,96px);
}
.nsny-everyday-v75 .everyday-intro-v75 .lede{max-width:590px}

.everyday-agent-v75,
.everyday-ops-v75{
  border-top:1px solid rgba(20,20,20,.18);
  padding-top:18px;
}
.everyday-minihead{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  align-items:start;
}
.everyday-minihead span{
  font-family:"Geist Mono",monospace;
  font-size:11px;
  letter-spacing:.055em;
}
.everyday-minihead p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:rgba(20,20,20,.68);
}

/* Agent communications: intentionally asymmetrical hierarchy */
.everyday-agent-v75{
  margin-bottom:clamp(105px,11vw,155px);
}
.agent-editorial-v75{
  position:relative;
  min-height:clamp(610px,63vw,860px);
  margin-top:clamp(46px,5vw,68px);
}
.agent-editorial-v75 figure{margin:0}
.agent-primary-v75{
  position:absolute;
  left:5%;
  top:0;
  width:min(53%,560px);
}
.agent-secondary-v75{
  position:absolute;
  right:7%;
  bottom:0;
  width:min(39%,420px);
}
.agent-primary-v75 img,
.agent-secondary-v75 img{
  display:block;
  width:100%;
  height:auto;
}

/* Operational materials: quieter, smaller and treated as supporting evidence */
.everyday-ops-v75{
  min-height:clamp(500px,48vw,650px);
}
.ops-head-v75{
  width:min(100%,720px);
  margin-left:auto;
}
.ops-editorial-v75{
  position:relative;
  width:min(72%,760px);
  min-height:clamp(390px,39vw,520px);
  margin:clamp(48px,5vw,66px) auto 0;
}
.ops-editorial-v75 figure{
  position:absolute;
  margin:0;
  background:transparent;
}
.ops-editorial-v75 img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(20,20,20,.055));
}
.ops-signin-v75{
  width:min(43%,310px);
  left:17%;
  top:0;
  z-index:2;
  transform:rotate(-.45deg);
}
.ops-offer-v75{
  width:min(43%,310px);
  right:16%;
  top:48px;
  z-index:1;
  transform:rotate(.55deg);
}

/* No catalog-style individual captions or extra card frames. */
.nsny-everyday-v75 figcaption{display:none}

@media(max-width:900px){
  .everyday-minihead{grid-template-columns:1fr;gap:8px}
  .agent-editorial-v75{
    min-height:clamp(500px,95vw,720px);
  }
  .agent-primary-v75{left:0;width:62%}
  .agent-secondary-v75{right:0;width:46%}
  .ops-head-v75{width:100%;margin-left:0}
  .ops-editorial-v75{width:88%}
}
@media(max-width:620px){
  .agent-editorial-v75{
    position:static;
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
  }
  .agent-primary-v75,.agent-secondary-v75{
    position:static;
    width:82%;
  }
  .agent-secondary-v75{margin-left:auto}
  .everyday-agent-v75{margin-bottom:84px}
  .everyday-ops-v75{min-height:440px}
  .ops-editorial-v75{width:100%;min-height:360px}
  .ops-signin-v75{width:48%;left:8%}
  .ops-offer-v75{width:48%;right:8%;top:42px}
}

/* V76 — make Agent Communications use the same compact editorial language
   as the approved Operational Touchpoints composition. */

.nsny-everyday-v75 .everyday-agent-v75{
  min-height:clamp(500px,48vw,650px);
  margin-bottom:clamp(95px,10vw,140px);
}

/* Match the narrower/right-aligned heading treatment used below. */
.nsny-everyday-v75 .everyday-agent-v75 .everyday-minihead{
  width:min(100%,720px);
  margin-left:auto;
}

/* Match the compact overlapping/offset document composition. */
.nsny-everyday-v75 .agent-editorial-v75{
  position:relative;
  width:min(72%,760px);
  min-height:clamp(390px,39vw,520px);
  margin:clamp(48px,5vw,66px) auto 0;
}

.nsny-everyday-v75 .agent-primary-v75,
.nsny-everyday-v75 .agent-secondary-v75{
  position:absolute;
  margin:0;
  background:transparent;
}

.nsny-everyday-v75 .agent-primary-v75{
  width:min(48%,350px);
  left:13%;
  top:0;
  z-index:2;
}

.nsny-everyday-v75 .agent-secondary-v75{
  width:min(43%,315px);
  right:12%;
  bottom:auto;
  top:52px;
  z-index:1;
}

.nsny-everyday-v75 .agent-primary-v75 img,
.nsny-everyday-v75 .agent-secondary-v75 img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 10px 20px rgba(20,20,20,.045));
}

@media(max-width:900px){
  .nsny-everyday-v75 .everyday-agent-v75 .everyday-minihead{
    width:100%;
    margin-left:0;
  }
  .nsny-everyday-v75 .agent-editorial-v75{
    width:88%;
    min-height:430px;
  }
  .nsny-everyday-v75 .agent-primary-v75{
    width:50%;
    left:7%;
  }
  .nsny-everyday-v75 .agent-secondary-v75{
    width:45%;
    right:7%;
    top:44px;
  }
}

@media(max-width:620px){
  .nsny-everyday-v75 .agent-editorial-v75{
    position:relative;
    display:block;
    width:100%;
    min-height:360px;
  }
  .nsny-everyday-v75 .agent-primary-v75{
    position:absolute;
    width:49%;
    left:7%;
    top:0;
  }
  .nsny-everyday-v75 .agent-secondary-v75{
    position:absolute;
    width:45%;
    right:7%;
    top:40px;
    margin:0;
  }
}

/* V77 — use the preferred clean side-by-side layout; no overlaps.
   Operational Touchpoints keeps the approved screenshot-like composition,
   and Agent Communications now follows the same visual logic. */

/* Remove overlapping treatment from both subsections. */
.nsny-everyday-v75 .agent-editorial-v75,
.nsny-everyday-v75 .ops-editorial-v75{
  position:static;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  width:min(82%,980px);
  min-height:0;
  margin:clamp(48px,5vw,66px) auto 0;
  gap:clamp(54px,7vw,92px);
}

.nsny-everyday-v75 .agent-primary-v75,
.nsny-everyday-v75 .agent-secondary-v75,
.nsny-everyday-v75 .ops-signin-v75,
.nsny-everyday-v75 .ops-offer-v75{
  position:static;
  width:100%;
  margin:0;
  transform:none;
  z-index:auto;
}

/* Keep the operational documents clean and flat like the preferred version. */
.nsny-everyday-v75 .ops-editorial-v75{
  width:min(78%,900px);
}
.nsny-everyday-v75 .ops-editorial-v75 img{
  width:100%;
  height:auto;
  display:block;
  filter:none;
}

/* Agent communications: same side-by-side system, with equal visual footing. */
.nsny-everyday-v75 .agent-editorial-v75{
  width:min(78%,900px);
}
.nsny-everyday-v75 .agent-primary-v75 img,
.nsny-everyday-v75 .agent-secondary-v75 img{
  width:100%;
  height:auto;
  display:block;
  filter:none;
}

/* Make the two subsection headers follow the same alignment. */
.nsny-everyday-v75 .everyday-agent-v75 .everyday-minihead,
.nsny-everyday-v75 .ops-head-v75{
  width:100%;
  margin-left:0;
}

/* Remove duplicate-looking excess height from prior overlapping layouts. */
.nsny-everyday-v75 .everyday-agent-v75,
.nsny-everyday-v75 .everyday-ops-v75{
  min-height:0;
}
.nsny-everyday-v75 .everyday-agent-v75{
  margin-bottom:clamp(100px,10vw,145px);
}
.nsny-everyday-v75 .everyday-ops-v75{
  padding-bottom:clamp(30px,4vw,60px);
}

@media(max-width:900px){
  .nsny-everyday-v75 .agent-editorial-v75,
  .nsny-everyday-v75 .ops-editorial-v75{
    width:92%;
    gap:28px;
  }
}
@media(max-width:620px){
  .nsny-everyday-v75 .agent-editorial-v75,
  .nsny-everyday-v75 .ops-editorial-v75{
    grid-template-columns:1fr;
    width:88%;
    gap:42px;
  }
}

/* V79 — integrated brand opening composition.
   Uses actual work only; transparent portfolio canvas, no environmental background. */
.nsny-opening-system-v79{
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px) clamp(72px,8vw,112px);
  overflow:hidden;
}
.opening-system-canvas{
  position:relative;
  width:min(100%,1320px);
  height:clamp(560px,56vw,790px);
  margin:0 auto;
}
.opening-system-canvas figure{position:absolute;margin:0;background:transparent}
.opening-system-canvas img{display:block;width:100%;height:auto}

/* Website is the central digital anchor. */
.opening-web-v79{
  width:50%;
  left:25%;
  top:2%;
  z-index:2;
}
.opening-monitor-v79{position:relative;width:100%}
.opening-screen-v79{
  aspect-ratio:16/10;
  overflow:hidden;
  border:8px solid #202020;
  border-bottom-width:12px;
  border-radius:12px 12px 5px 5px;
  background:#fff;
}
.opening-screen-v79 img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
.opening-monitor-chin-v79{
  height:18px;background:#d9d9d6;border-radius:0 0 8px 8px;
}
.opening-monitor-neck-v79{
  width:10%;height:44px;margin:0 auto;background:#c9c9c6;
}
.opening-monitor-base-v79{
  width:32%;height:8px;margin:0 auto;background:#bdbdb9;border-radius:8px;
}

/* Physical/direct-mail piece: lower left. */
.opening-postcard-v79{
  width:34%;
  left:2%;
  bottom:4%;
  z-index:4;
  transform:rotate(-2.2deg);
  filter:drop-shadow(0 16px 26px rgba(20,20,20,.10));
}

/* Printed presentation page: upper right, clean and flat. */
.opening-print-v79{
  width:25%;
  right:2%;
  top:10%;
  z-index:3;
  transform:rotate(1.4deg);
  filter:drop-shadow(0 14px 24px rgba(20,20,20,.08));
}

/* Email: narrow vertical artifact, deliberately cropped at bottom for composition. */
.opening-email-v79{
  width:21%;
  right:10%;
  bottom:1%;
  z-index:5;
}
.opening-email-window-v79{
  max-height:clamp(300px,31vw,440px);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,20,20,.10);
  filter:drop-shadow(0 14px 24px rgba(20,20,20,.08));
}
.opening-email-window-v79 img{width:100%;height:auto}

/* Tiny channel key supports fast scanning without captioning every object. */
.opening-system-key-v79{
  width:min(100%,1320px);
  margin:28px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(20,20,20,.16);
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  font-family:"Geist Mono",monospace;
  font-size:10px;
  letter-spacing:.06em;
  color:rgba(20,20,20,.62);
}

@media(max-width:900px){
  .opening-system-canvas{height:650px}
  .opening-web-v79{width:64%;left:18%}
  .opening-postcard-v79{width:44%;left:0;bottom:6%}
  .opening-print-v79{width:30%;right:0;top:25%}
  .opening-email-v79{width:26%;right:8%;bottom:0}
}
@media(max-width:620px){
  .nsny-opening-system-v79{padding-left:18px;padding-right:18px}
  .opening-system-canvas{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }
  .opening-system-canvas figure{
    position:static;
    width:auto;
    transform:none;
  }
  .opening-web-v79{grid-column:1/-1}
  .opening-email-window-v79{max-height:310px}
}

/* V80 — senior brand-system board: flat, architectural, asymmetrical but grid-based */
.nsny-opening-system-v80{
  padding:clamp(42px,5vw,72px) clamp(24px,4vw,64px) clamp(88px,9vw,128px);
  overflow:hidden;
}
.brand-board-v80{
  position:relative;
  width:min(100%,1320px);
  height:clamp(650px,62vw,880px);
  margin:0 auto;
}
.brand-board-v80 figure{
  position:absolute;
  margin:0;
  background:transparent;
}
.brand-board-v80 img{
  display:block;
  width:100%;
  height:auto;
}

/* Dominant digital plane — no device hardware. */
.board-web-v80{
  left:3%;
  top:2%;
  width:56%;
  z-index:1;
}
.board-web-v80 img{
  border:1px solid rgba(20,20,20,.10);
}

/* Presentation establishes the upper-right vertical. */
.board-presentation-v80{
  right:3%;
  top:3%;
  width:24%;
  z-index:2;
}
.board-presentation-v80 img{
  filter:drop-shadow(0 12px 20px rgba(20,20,20,.06));
}

/* Physical direct mail is the only slightly rotated object. */
.board-mail-v80{
  left:7%;
  bottom:5%;
  width:31%;
  z-index:4;
  transform:rotate(-1.35deg);
}
.board-mail-v80 img{
  filter:drop-shadow(0 14px 24px rgba(20,20,20,.09));
}

/* Market communication forms the central lower plane. */
.board-market-v80{
  left:42%;
  bottom:3%;
  width:27%;
  z-index:3;
}
.board-market-window-v80{
  height:clamp(250px,25vw,350px);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,20,20,.09);
}
.board-market-window-v80 img{
  width:100%;
  height:auto;
}

/* Email is a narrow vertical counterpoint on the right. */
.board-email-v80{
  right:5%;
  bottom:2%;
  width:18%;
  z-index:5;
}
.board-email-window-v80{
  height:clamp(300px,31vw,430px);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,20,20,.09);
}
.board-email-window-v80 img{
  width:100%;
  height:auto;
}

/* No legend: the formats should read from the work itself. */

@media(max-width:900px){
  .brand-board-v80{height:720px}
  .board-web-v80{width:64%;left:0}
  .board-presentation-v80{width:28%;right:0}
  .board-mail-v80{width:38%;left:1%;bottom:4%}
  .board-market-v80{width:29%;left:39%;bottom:3%}
  .board-email-v80{width:23%;right:1%;bottom:2%}
}
@media(max-width:620px){
  .brand-board-v80{
    height:auto;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px;
  }
  .brand-board-v80 figure{
    position:static;
    width:auto;
    transform:none;
  }
  .board-web-v80{grid-column:1/-1}
  .board-mail-v80{grid-column:1/-1}
  .board-market-window-v80,
  .board-email-window-v80{height:280px}
}

/* V81 — clean studio-style integrated brand mockup.
   Four hero applications only: screen, postcard, email, Instagram.
   No environmental background and no scattered collage treatment. */
.nsny-opening-system-v81{
  padding:clamp(46px,5vw,72px) clamp(28px,5vw,76px) clamp(92px,9vw,132px);
}
.brand-mockup-v81{
  position:relative;
  width:min(100%,1240px);
  height:clamp(600px,58vw,790px);
  margin:0 auto;
}

/* Soft common grounding plane, not a photo/background. */
.brand-mockup-v81:after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:4%;
  height:2px;
  background:rgba(20,20,20,.06);
  z-index:0;
}
.brand-mockup-v81 figure{
  position:absolute;
  margin:0;
}

/* Central screen = digital anchor */
.mock-screen-v81{
  width:46%;
  left:27%;
  top:1%;
  z-index:2;
}
.screen-shell-v81{
  position:relative;
  width:100%;
}
.screen-display-v81{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#fff;
  border:8px solid #242424;
  border-radius:11px 11px 5px 5px;
  box-shadow:0 20px 35px rgba(20,20,20,.10);
}
.screen-display-v81 img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
}
.screen-camera-v81{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:#555;
  left:50%;top:4px;z-index:3;
}
.screen-base-v81{
  width:32%;
  height:7px;
  margin:0 auto;
  background:#bdbdb9;
  border-radius:0 0 10px 10px;
  box-shadow:0 8px 12px rgba(20,20,20,.06);
}

/* Printed postcard = lower-left physical anchor */
.mock-postcard-v81{
  width:33%;
  left:4%;
  bottom:6%;
  z-index:4;
  transform:rotate(-1deg);
}
.mock-postcard-v81 img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:0 18px 30px rgba(20,20,20,.11);
}

/* Email = narrow printed/digital sheet, clean and tall */
.mock-email-v81{
  width:20%;
  right:6%;
  bottom:5%;
  z-index:5;
}
.email-paper-v81{
  height:clamp(340px,34vw,465px);
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,20,20,.10);
  box-shadow:0 18px 30px rgba(20,20,20,.10);
}
.email-paper-v81 img{
  width:100%;
  height:auto;
  display:block;
}

/* Instagram = square supporting object */
.mock-social-v81{
  width:20%;
  right:3%;
  top:8%;
  z-index:3;
}
.social-card-v81{
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 28px rgba(20,20,20,.09);
}
.social-card-v81 img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Keep the composition calm: no labels, no extra cards, no decorative clutter. */
@media(max-width:900px){
  .brand-mockup-v81{height:670px}
  .mock-screen-v81{width:56%;left:22%}
  .mock-postcard-v81{width:39%;left:0}
  .mock-email-v81{width:24%;right:5%}
  .mock-social-v81{width:23%;right:0;top:11%}
}
@media(max-width:620px){
  .brand-mockup-v81{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:start;
  }
  .brand-mockup-v81:after{display:none}
  .brand-mockup-v81 figure{
    position:static;
    width:auto;
    transform:none;
  }
  .mock-screen-v81{grid-column:1/-1}
  .mock-postcard-v81{grid-column:1/-1}
  .email-paper-v81{height:310px}
}

/* V82 — transparent brand mockup canvas */
.nsny-opening-system-v81,
.nsny-opening-system-v81 .brand-mockup-v81{
  background:transparent !important;
}

/* Remove the grounding line/plane so the four mockup objects float directly
   on the portfolio page background. */
.nsny-opening-system-v81 .brand-mockup-v81:after{
  display:none !important;
}

/* No artificial backing panels behind the individual applications. */
.nsny-opening-system-v81 .mock-screen-v81,
.nsny-opening-system-v81 .mock-postcard-v81,
.nsny-opening-system-v81 .mock-email-v81,
.nsny-opening-system-v81 .mock-social-v81{
  background:transparent !important;
}

/* V83 — transparent studio flat lay inspired by the supplied reference.
   One controlled composition: laptop/web, tablet/email, phone/social,
   offer-form paper and two-sided postcard. No environmental background. */
.nsny-flatlay-v83{
  background:transparent;
  padding:clamp(48px,5vw,76px) clamp(26px,5vw,72px) clamp(96px,9vw,138px);
  overflow:hidden;
}
.flatlay-canvas-v83{
  position:relative;
  width:min(100%,1280px);
  height:clamp(620px,61vw,830px);
  margin:0 auto;
  background:transparent;
}
.flatlay-canvas-v83 figure{
  position:absolute;
  margin:0;
  background:transparent;
}
.flatlay-canvas-v83 img{display:block;width:100%;height:auto}

/* Laptop / website — primary anchor, viewed from above. */
.flatlay-laptop-v83{
  width:43%;
  left:29%;
  top:2%;
  z-index:4;
}
.laptop-screen-v83{
  aspect-ratio:16/10;
  overflow:hidden;
  border:9px solid #252525;
  border-bottom-width:13px;
  border-radius:10px 10px 4px 4px;
  background:#fff;
  box-shadow:0 18px 28px rgba(20,20,20,.10);
}
.laptop-screen-v83 img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
.laptop-base-v83{
  width:108%;
  height:26px;
  margin-left:-4%;
  background:linear-gradient(#d9d9d6,#bfbfbc);
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  border-radius:0 0 8px 8px;
  box-shadow:0 12px 18px rgba(20,20,20,.07);
}

/* Tablet / email — right side. */
.flatlay-tablet-v83{
  width:22%;
  right:4%;
  top:18%;
  z-index:5;
}
.tablet-shell-v83{
  padding:8px;
  background:#252525;
  border-radius:17px;
  box-shadow:0 16px 25px rgba(20,20,20,.10);
}
.tablet-screen-v83{
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.tablet-screen-v83 img{
  width:100%;height:auto;display:block;
}

/* Phone / Instagram — lower center. */
.flatlay-phone-v83{
  width:10.5%;
  left:49%;
  bottom:2%;
  z-index:7;
}
.phone-shell-v83{
  position:relative;
  padding:8px 6px 9px;
  background:#222;
  border-radius:20px;
  box-shadow:0 14px 22px rgba(20,20,20,.11);
}
.phone-speaker-v83{
  width:28%;height:3px;border-radius:3px;background:#666;
  margin:0 auto 6px;
}
.phone-screen-v83{
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:flex-start;
}
.phone-screen-v83 img{
  width:100%;height:auto;display:block;
}

/* Offer form = paper sheet, lower-left. */
.flatlay-offer-v83{
  width:25%;
  left:7%;
  bottom:5%;
  z-index:2;
  transform:rotate(-.8deg);
}
.flatlay-offer-v83 img{
  box-shadow:0 14px 24px rgba(20,20,20,.08);
}

/* Two postcard sides read as one mailed piece. */
.flatlay-postcard-front-v83{
  width:27%;
  left:3%;
  top:16%;
  z-index:3;
  transform:rotate(-1.2deg);
}
.flatlay-postcard-back-v83{
  width:25%;
  left:14%;
  top:32%;
  z-index:6;
  transform:rotate(.7deg);
}
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img{
  box-shadow:0 15px 25px rgba(20,20,20,.09);
}

@media(max-width:900px){
  .flatlay-canvas-v83{height:700px}
  .flatlay-laptop-v83{width:48%;left:27%}
  .flatlay-tablet-v83{width:24%;right:1%}
  .flatlay-postcard-front-v83{width:30%;left:0}
  .flatlay-postcard-back-v83{width:28%;left:10%;top:34%}
  .flatlay-offer-v83{width:28%;left:5%}
  .flatlay-phone-v83{width:12%;left:50%}
}
@media(max-width:620px){
  .flatlay-canvas-v83{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:start;
  }
  .flatlay-canvas-v83 figure{
    position:static;
    width:auto;
    transform:none;
  }
  .flatlay-laptop-v83{grid-column:1/-1}
  .flatlay-postcard-front-v83,
  .flatlay-postcard-back-v83{grid-column:auto}
  .flatlay-offer-v83{grid-column:1/-1;width:64%;justify-self:center}
  .flatlay-phone-v83{width:48%;justify-self:center}
}

/* V84 — composition revised to follow the supplied flat-lay inspiration more closely:
   paper/mail on the left, laptop upper-center, tablet upper-right,
   phone lower-center. Transparent background retained. */

.flatlay-canvas-v83{
  width:min(100%,1280px);
  height:clamp(640px,61vw,830px);
}

/* Laptop moves higher and slightly right, matching the inspiration's main anchor. */
.flatlay-laptop-v83{
  width:40%;
  left:34%;
  top:2%;
  z-index:4;
}

/* Tablet sits clearly to the right of the laptop. */
.flatlay-tablet-v83{
  width:20%;
  right:3%;
  top:18%;
  z-index:5;
}

/* Offer-form paper becomes the tall lower-left paper object. */
.flatlay-offer-v83{
  width:23%;
  left:12%;
  bottom:3%;
  z-index:3;
  transform:rotate(-.35deg);
}

/* Postcard front/back cluster on the left like the reference's stationery stack. */
.flatlay-postcard-front-v83{
  width:28%;
  left:3%;
  top:18%;
  z-index:2;
  transform:rotate(-.8deg);
}
.flatlay-postcard-back-v83{
  width:25%;
  left:4%;
  top:39%;
  z-index:6;
  transform:rotate(.25deg);
}

/* Phone moves below the laptop, centered like the reference. */
.flatlay-phone-v83{
  width:11.5%;
  left:51%;
  bottom:1%;
  z-index:7;
}

/* Make the square IG artwork fully visible on the tall phone screen.
   No cropping: the entire 1:1 post sits inside the device with breathing room. */
.phone-screen-v83{
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:12px;
  background:#f4f4f2;
  display:flex;
  align-items:center;
  justify-content:center;
}
.phone-screen-v83 img{
  width:100%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}

/* Keep email readable within tablet without distorting it. */
.tablet-screen-v83{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#fff;
}
.tablet-screen-v83 img{
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:top center;
}

/* Slightly more restrained shadows for a cleaner senior presentation. */
.laptop-screen-v83,
.tablet-shell-v83,
.phone-shell-v83,
.flatlay-offer-v83 img,
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img{
  box-shadow:0 13px 22px rgba(20,20,20,.075);
}

@media(max-width:900px){
  .flatlay-laptop-v83{width:45%;left:31%}
  .flatlay-tablet-v83{width:22%;right:0;top:19%}
  .flatlay-postcard-front-v83{width:31%;left:0}
  .flatlay-postcard-back-v83{width:28%;left:1%;top:40%}
  .flatlay-offer-v83{width:26%;left:10%}
  .flatlay-phone-v83{width:13%;left:51%}
}

/* V85 — postcard pieces separated; phone becomes a real scrolling social viewport. */

/* Separate the two postcard sides completely. */
.flatlay-postcard-front-v83{
  width:25%;
  left:1%;
  top:16%;
  transform:none;
  z-index:3;
}
.flatlay-postcard-back-v83{
  width:23%;
  left:3%;
  top:43%;
  transform:none;
  z-index:3;
}

/* Shift the offer-form paper slightly right/down so the left stationery group
   stays organized without collisions. */
.flatlay-offer-v83{
  width:22%;
  left:17%;
  bottom:1%;
  transform:none;
  z-index:2;
}

/* Phone: tall viewport with a scrollable social feed.
   The first IG post is fully visible; scrolling reveals repeated feed content
   rather than cropping the square artwork. */
.phone-screen-v83{
  aspect-ratio:9/16;
  overflow-y:auto;
  overflow-x:hidden;
  display:block;
  background:#fff;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.phone-screen-v83::-webkit-scrollbar{display:none}
.phone-screen-v83 img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  display:block;
}

/* Slightly larger phone so the social content reads as an intentional device,
   while staying secondary to the laptop. */
.flatlay-phone-v83{
  width:12.5%;
  left:50%;
  bottom:1%;
}

@media(max-width:900px){
  .flatlay-postcard-front-v83{width:27%;left:0;top:17%}
  .flatlay-postcard-back-v83{width:25%;left:1%;top:45%}
  .flatlay-offer-v83{width:24%;left:17%;bottom:0}
  .flatlay-phone-v83{width:14%;left:50%}
}

/* V86 — cohesive flat-lay re-balance.
   Clear zones: paper/offer form left, laptop center, tablet + postcard right,
   phone/social lower-center. No asset collisions. */

.flatlay-canvas-v83{
  width:min(100%,1260px);
  height:clamp(650px,61vw,830px);
}

/* Main digital anchor */
.flatlay-laptop-v83{
  width:42%;
  left:29%;
  top:2%;
  z-index:4;
}

/* Left = one clean paper object */
.flatlay-offer-v83{
  width:23%;
  left:3%;
  bottom:8%;
  transform:none;
  z-index:2;
}

/* Right column = tablet, then the two postcard sides underneath it */
.flatlay-tablet-v83{
  width:20%;
  right:4%;
  top:9%;
  z-index:5;
}

.flatlay-postcard-front-v83{
  width:21%;
  right:3%;
  left:auto;
  top:51%;
  transform:none;
  z-index:3;
}

.flatlay-postcard-back-v83{
  width:21%;
  right:3%;
  left:auto;
  top:72%;
  transform:none;
  z-index:3;
}

/* Social phone sits beneath the laptop, visually linking the digital formats */
.flatlay-phone-v83{
  width:12%;
  left:48%;
  bottom:1%;
  z-index:7;
}

/* More consistent depth across all physical/device objects */
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img,
.flatlay-offer-v83 img{
  box-shadow:0 12px 20px rgba(20,20,20,.07);
}

/* Ensure the right-side postcard stack never collides with tablet content. */
.flatlay-tablet-v83,
.flatlay-postcard-front-v83,
.flatlay-postcard-back-v83{
  margin:0;
}

@media(max-width:900px){
  .flatlay-canvas-v83{height:720px}
  .flatlay-laptop-v83{width:46%;left:27%}
  .flatlay-offer-v83{width:25%;left:1%;bottom:7%}
  .flatlay-tablet-v83{width:22%;right:1%;top:10%}
  .flatlay-postcard-front-v83{width:23%;right:0;left:auto;top:52%}
  .flatlay-postcard-back-v83{width:23%;right:0;left:auto;top:74%}
  .flatlay-phone-v83{width:13.5%;left:47.5%;bottom:0}
}

/* V87 — rebalanced flat lay:
   phone moves up; postcard front stays as the upper printed piece;
   postcard back sits beneath the tablet. */

.flatlay-phone-v83{
  width:12%;
  left:48%;
  bottom:8%;
  z-index:7;
}

/* Front remains the upper postcard element. */
.flatlay-postcard-front-v83{
  width:21%;
  right:3%;
  left:auto;
  top:49%;
  transform:none;
  z-index:3;
}

/* Back becomes the lower piece directly beneath the tablet. */
.flatlay-postcard-back-v83{
  width:21%;
  right:3%;
  left:auto;
  top:70%;
  transform:none;
  z-index:3;
}

@media(max-width:900px){
  .flatlay-phone-v83{
    width:13.5%;
    left:47.5%;
    bottom:7%;
  }
  .flatlay-postcard-front-v83{
    width:23%;
    right:0;
    left:auto;
    top:50%;
  }
  .flatlay-postcard-back-v83{
    width:23%;
    right:0;
    left:auto;
    top:72%;
  }
}

/* V88 — full composition reset.
   Designed as one editorial flat lay, not independent objects:
   postcard front upper-left, laptop upper-center, tablet upper-right,
   offer form lower-left, phone lower-center, postcard back lower-right.
   No overlaps; spacing follows a consistent visual grid. */

.flatlay-canvas-v83{
  width:min(100%,1240px);
  height:clamp(650px,58vw,790px);
  margin:0 auto;
}

/* Website = dominant hero object */
.flatlay-laptop-v83{
  width:41%;
  left:29.5%;
  top:1%;
  z-index:4;
}

/* Upper-left printed counterweight */
.flatlay-postcard-front-v83{
  width:22%;
  left:2%;
  right:auto;
  top:13%;
  transform:none;
  z-index:3;
}

/* Upper-right digital counterweight */
.flatlay-tablet-v83{
  width:19%;
  right:2%;
  top:11%;
  z-index:5;
}

/* Lower-left vertical paper */
.flatlay-offer-v83{
  width:20%;
  left:8%;
  bottom:1%;
  transform:none;
  z-index:2;
}

/* Phone rises into the negative space under the laptop */
.flatlay-phone-v83{
  width:11.5%;
  left:44.25%;
  bottom:5%;
  z-index:7;
}

/* Postcard back becomes the lower-right printed counterweight */
.flatlay-postcard-back-v83{
  width:22%;
  right:5%;
  left:auto;
  top:auto;
  bottom:5%;
  transform:none;
  z-index:3;
}

/* Unified depth treatment */
.laptop-screen-v83,
.tablet-shell-v83,
.phone-shell-v83,
.flatlay-offer-v83 img,
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img{
  box-shadow:0 11px 22px rgba(20,20,20,.07);
}

@media(max-width:900px){
  .flatlay-canvas-v83{height:700px}
  .flatlay-laptop-v83{width:44%;left:28%;top:2%}
  .flatlay-postcard-front-v83{width:23%;left:0;top:15%}
  .flatlay-tablet-v83{width:21%;right:0;top:13%}
  .flatlay-offer-v83{width:22%;left:5%;bottom:2%}
  .flatlay-phone-v83{width:13%;left:43.5%;bottom:5%}
  .flatlay-postcard-back-v83{width:23%;right:2%;bottom:5%;top:auto}
}

/* V89 — preserve V88 composition; only requested positional changes. */

/* Move Instagram phone up slightly, preserving size and horizontal position. */
.flatlay-phone-v83{
  width:11.5%;
  left:44.25%;
  bottom:11%;
}

/* Move postcard back ("Luxury Living with Exceptional Outdoor Space")
   to the right side directly beneath the tablet. */
.flatlay-postcard-back-v83{
  width:19%;
  right:2%;
  left:auto;
  top:54%;
  bottom:auto;
  transform:none;
  z-index:3;
}

@media(max-width:900px){
  .flatlay-phone-v83{
    width:13%;
    left:43.5%;
    bottom:11%;
  }
  .flatlay-postcard-back-v83{
    width:21%;
    right:0;
    left:auto;
    top:55%;
    bottom:auto;
  }
}

/* V90 — same approved composition, refined scale hierarchy + realistic soft shadows.
   No layout concept changes. */

.flatlay-laptop-v83{
  width:43%;
  left:28.5%;
  top:1%;
}
.flatlay-tablet-v83{
  width:20%;
  right:2%;
  top:11%;
}
.flatlay-postcard-front-v83{
  width:23%;
  left:2%;
  top:13%;
}
.flatlay-offer-v83{
  width:19%;
  left:9%;
  bottom:2%;
}
.flatlay-phone-v83{
  width:10.5%;
  left:44.75%;
  bottom:12%;
}
.flatlay-postcard-back-v83{
  width:18.5%;
  right:2.75%;
  top:55%;
}

/* Soft, consistent studio shadows: enough depth to read as physical mockups,
   without making the composition look like floating cards. */
.laptop-screen-v83{
  box-shadow:
    0 18px 30px rgba(20,20,20,.11),
    0 5px 10px rgba(20,20,20,.06);
}
.laptop-base-v83{
  box-shadow:0 14px 22px rgba(20,20,20,.09);
}
.tablet-shell-v83{
  box-shadow:
    0 18px 30px rgba(20,20,20,.12),
    0 5px 10px rgba(20,20,20,.06);
}
.phone-shell-v83{
  box-shadow:
    0 16px 25px rgba(20,20,20,.13),
    0 4px 8px rgba(20,20,20,.06);
}
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img,
.flatlay-offer-v83 img{
  box-shadow:
    0 17px 27px rgba(20,20,20,.10),
    0 4px 8px rgba(20,20,20,.045);
}

@media(max-width:900px){
  .flatlay-laptop-v83{width:46%;left:27%}
  .flatlay-tablet-v83{width:21%;right:0}
  .flatlay-postcard-front-v83{width:24%;left:0}
  .flatlay-offer-v83{width:20%;left:7%}
  .flatlay-phone-v83{width:12%;left:44%;bottom:12%}
  .flatlay-postcard-back-v83{width:20%;right:.5%;top:56%}
}

/* V91 — final balance pass.
   Preserve the established composition while improving proportion,
   spacing and the lower-right visual weight. */

.flatlay-canvas-v83{
  width:min(100%,1240px);
  height:clamp(670px,60vw,810px);
}

/* Primary anchor */
.flatlay-laptop-v83{
  width:42%;
  left:29%;
  top:1%;
}

/* Upper side pieces balanced against each other */
.flatlay-postcard-front-v83{
  width:22.5%;
  left:2%;
  top:14%;
}
.flatlay-tablet-v83{
  width:19.5%;
  right:2.5%;
  top:12%;
}

/* Lower-left paper remains quieter */
.flatlay-offer-v83{
  width:19%;
  left:8%;
  bottom:1%;
}

/* Phone tucked upward into the center negative space */
.flatlay-phone-v83{
  width:10.75%;
  left:44.6%;
  bottom:13%;
}

/* Requested change: make postcard back substantially larger and lower.
   It now anchors the lower-right instead of feeling like a small floating piece. */
.flatlay-postcard-back-v83{
  width:23%;
  right:2.5%;
  left:auto;
  top:auto;
  bottom:0%;
  transform:none;
  z-index:3;
}

/* Harmonize shadow direction/softness across the set. */
.laptop-screen-v83,
.tablet-shell-v83,
.phone-shell-v83{
  box-shadow:
    0 20px 34px rgba(20,20,20,.105),
    0 5px 11px rgba(20,20,20,.05);
}
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img,
.flatlay-offer-v83 img{
  box-shadow:
    0 18px 30px rgba(20,20,20,.09),
    0 4px 9px rgba(20,20,20,.04);
}

@media(max-width:900px){
  .flatlay-canvas-v83{height:720px}
  .flatlay-laptop-v83{width:45%;left:27.5%}
  .flatlay-postcard-front-v83{width:24%;left:0}
  .flatlay-tablet-v83{width:21%;right:0}
  .flatlay-offer-v83{width:20%;left:6%}
  .flatlay-phone-v83{width:12%;left:44%;bottom:13%}
  .flatlay-postcard-back-v83{
    width:25%;
    right:0;
    top:auto;
    bottom:0;
  }
}

/* V92 — final micro-polish only.
   Preserve V91 composition; refine optical scale, rhythm and depth. */

/* Slightly tighten the overall stage so the flat lay reads as one group. */
.flatlay-canvas-v83{
  width:min(100%,1220px);
  height:clamp(660px,59vw,800px);
}

/* Keep laptop dominant, but reduce its visual isolation from surrounding pieces. */
.flatlay-laptop-v83{
  width:42%;
  left:29%;
  top:2%;
}

/* Upper-left postcard: tiny scale reduction for more breathing room. */
.flatlay-postcard-front-v83{
  width:22%;
  left:2.5%;
  top:15%;
}

/* Tablet: optically align its top with the postcard/laptop grouping. */
.flatlay-tablet-v83{
  width:19.5%;
  right:2.5%;
  top:13%;
}

/* Offer form: slightly larger so the lower-left does not feel underweighted. */
.flatlay-offer-v83{
  width:19.5%;
  left:7.5%;
  bottom:1%;
}

/* Phone: slightly larger and a touch higher; still clearly secondary. */
.flatlay-phone-v83{
  width:11.5%;
  left:44.25%;
  bottom:14%;
}

/* Bottom postcard remains the strong lower-right anchor. */
.flatlay-postcard-back-v83{
  width:23.5%;
  right:2%;
  left:auto;
  top:auto;
  bottom:0;
}

/* One coherent lighting model: soft downward studio shadow.
   Devices carry slightly more depth than paper. */
.laptop-screen-v83{
  box-shadow:
    0 22px 38px rgba(20,20,20,.10),
    0 7px 14px rgba(20,20,20,.045);
}
.laptop-base-v83{
  box-shadow:0 15px 24px rgba(20,20,20,.075);
}
.tablet-shell-v83{
  box-shadow:
    0 20px 34px rgba(20,20,20,.105),
    0 6px 12px rgba(20,20,20,.045);
}
.phone-shell-v83{
  box-shadow:
    0 18px 30px rgba(20,20,20,.11),
    0 5px 10px rgba(20,20,20,.045);
}
.flatlay-postcard-front-v83 img,
.flatlay-postcard-back-v83 img,
.flatlay-offer-v83 img{
  box-shadow:
    0 16px 27px rgba(20,20,20,.075),
    0 4px 8px rgba(20,20,20,.035);
}

/* Preserve the transparent studio-board treatment. */
.nsny-flatlay-v83,
.flatlay-canvas-v83,
.flatlay-canvas-v83 figure{
  background:transparent!important;
}

@media(max-width:900px){
  .flatlay-canvas-v83{height:710px}
  .flatlay-laptop-v83{width:45%;left:27.5%;top:2%}
  .flatlay-postcard-front-v83{width:23.5%;left:0;top:16%}
  .flatlay-tablet-v83{width:21%;right:0;top:14%}
  .flatlay-offer-v83{width:21%;left:5%;bottom:1%}
  .flatlay-phone-v83{width:12.75%;left:43.6%;bottom:14%}
  .flatlay-postcard-back-v83{width:25%;right:0;bottom:0;top:auto}
}

/* V93 — homepage Project 02 uses the same polished NextStopNY flat-lay language. */
.nsny-flatlay-home-v93{
  position:relative;
  overflow:hidden;
  background:transparent;
}
.home-flatlay-stage-v93{
  position:absolute;
  inset:7% 4%;
  background:transparent;
}
.home-flatlay-stage-v93 img{display:block;max-width:none}

.home-laptop-v93{
  position:absolute;width:45%;left:27.5%;top:2%;z-index:4;
}
.home-laptop-screen-v93{
  aspect-ratio:16/10;overflow:hidden;border:4px solid #252525;border-bottom-width:6px;
  border-radius:5px 5px 2px 2px;background:#fff;
  box-shadow:0 9px 16px rgba(20,20,20,.10);
}
.home-laptop-screen-v93 img{width:100%;height:100%;object-fit:cover;object-position:top center}
.home-laptop-base-v93{
  width:108%;height:9px;margin-left:-4%;
  background:linear-gradient(#d9d9d6,#bfbfbc);
  clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);
  border-radius:0 0 4px 4px;
  box-shadow:0 6px 9px rgba(20,20,20,.07);
}

.home-tablet-v93{
  position:absolute;width:19%;right:1%;top:13%;height:42%;object-fit:cover;object-position:top;
  padding:4px;background:#252525;border-radius:7px;z-index:5;
  box-shadow:0 9px 15px rgba(20,20,20,.10);
}
.home-phone-v93{
  position:absolute;width:11%;left:44.5%;bottom:11%;height:34%;object-fit:contain;
  padding:4px 3px;background:#222;border-radius:8px;z-index:7;
  box-shadow:0 8px 13px rgba(20,20,20,.11);
}
.home-post-front-v93{
  position:absolute;width:23%;left:0;top:16%;z-index:3;
  box-shadow:0 8px 13px rgba(20,20,20,.075);
}
.home-offer-v93{
  position:absolute;width:20%;left:6%;bottom:0;z-index:2;
  box-shadow:0 8px 13px rgba(20,20,20,.075);
}
.home-post-back-v93{
  position:absolute;width:24%;right:0;bottom:0;z-index:3;
  box-shadow:0 8px 13px rgba(20,20,20,.075);
}

/* V94 — editorial pacing + motion chapter */
.nsny-pitchbook{padding-top:clamp(96px,11vw,170px);padding-bottom:clamp(110px,13vw,190px)}
.nsny-digital{padding-top:clamp(90px,10vw,150px);padding-bottom:clamp(110px,12vw,180px)}
.nsny-market-section{padding-top:clamp(92px,10vw,155px);padding-bottom:clamp(105px,12vw,175px)}
.nsny-property{padding-top:clamp(105px,12vw,180px);padding-bottom:clamp(120px,13vw,195px)}
.nsny-brand-comms{padding-top:clamp(88px,9vw,140px);padding-bottom:clamp(105px,11vw,165px)}

.nsny-motion-v94{padding-top:clamp(110px,12vw,185px);padding-bottom:clamp(120px,14vw,210px)}
.motion-intro-v94{max-width:780px;margin-bottom:clamp(54px,6vw,90px)}
.motion-intro-v94 p{max-width:560px;margin-top:22px}
.tv-stage-v94{width:min(100%,1040px);margin:0 auto;text-align:center}
.tv-frame-v94{
  position:relative;
  padding:12px;
  background:#202020;
  border-radius:8px;
  box-shadow:0 28px 50px rgba(20,20,20,.13),0 7px 15px rgba(20,20,20,.06);
}
.tv-frame-v94:after{
  content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:#555;
}
.tv-frame-v94 video{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;border-radius:2px;
}
.tv-stand-v94{
  width:22%;height:34px;margin:0 auto;
  background:linear-gradient(#bababa,#dedede);
  clip-path:polygon(42% 0,58% 0,70% 75%,100% 100%,0 100%,30% 75%);
  filter:drop-shadow(0 9px 7px rgba(20,20,20,.08));
}
@media(max-width:700px){
  .tv-frame-v94{padding:7px;border-radius:5px}
  .tv-stand-v94{height:23px;width:28%}
}

/* V95 — homepage uses the EXACT case-study flat-lay component.
   The composition itself is untouched: same objects, proportions and positions.
   The whole finished composition is only fitted as one unit into the project card. */
.nsny-home-exact-v95{position:relative;overflow:hidden}
.nsny-home-flatlay-window-v95{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.nsny-home-flatlay-scale-v95{
  position:relative;
  width:1220px;
  height:800px;
  flex:0 0 1220px;
  transform:scale(.43);
  transform-origin:center center;
}
.nsny-home-flatlay-scale-v95 > .flatlay-canvas-v83{
  width:1220px!important;
  height:800px!important;
  margin:0!important;
}
@media(max-width:900px){
  .nsny-home-flatlay-scale-v95{
    transform:scale(.34);
  }
}

/* V96 — homepage Real Estate preview:
   keep the exact case-study composition, but give it more breathing room
   and remove any card/thumb backdrop so the flat lay reads transparently. */
.index-card[href="nextstopny.html"] .nsny-index-thumb,
.index-card[href="nextstopny.html"] .nsny-home-flatlay-window-v95,
.index-card[href="nextstopny.html"] .nsny-home-flatlay-scale-v95,
.index-card[href="nextstopny.html"] .flatlay-canvas-v83,
.index-card[href="nextstopny.html"] .flatlay-canvas-v83 figure{
  background:transparent!important;
}
.index-card[href="nextstopny.html"] .nsny-index-thumb{
  box-shadow:none!important;
}
.nsny-home-flatlay-scale-v95{
  transform:scale(.34);
}
@media(max-width:900px){
  .nsny-home-flatlay-scale-v95{transform:scale(.285)}
}

/* V97 — Property Marketing: postcard remains the hero; broker + email become
   one paired secondary composition rather than two consecutive mini-sections. */
.nsny-property-v97 .campaign-direct{
  margin-bottom:clamp(90px,10vw,150px);
}
.campaign-channel-pair-v97{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(42px,6vw,88px);
  align-items:start;
  padding:0;
  margin:0;
}
.channel-item-v97{
  min-width:0;
}
.channel-head-v97{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:baseline;
  padding-bottom:18px;
  border-bottom:1px solid rgba(20,20,20,.18);
  margin-bottom:28px;
}
.channel-head-v97 span{
  font-family:"Geist Mono",monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.channel-head-v97 p{
  margin:0;
  font-size:13px;
  line-height:1.45;
  opacity:.68;
  text-align:right;
}
.broker-art-v97{
  width:82%;
  margin:0 auto;
}
.broker-art-v97 img{
  display:block;
  width:100%;
  height:auto;
  box-shadow:0 18px 30px rgba(20,20,20,.075);
}
.email-window-v97{
  margin:0;
  width:88%;
  margin-left:auto;
  border:1px solid rgba(20,20,20,.14);
  border-radius:4px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 32px rgba(20,20,20,.07);
}
.email-window-bar-v97{
  height:26px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  background:#f1f1ef;
  border-bottom:1px solid rgba(20,20,20,.1);
}
.email-window-bar-v97 i{
  width:5px;height:5px;border-radius:50%;
  background:rgba(20,20,20,.28);
  display:block;
}
.email-window-content-v97{
  height:clamp(390px,43vw,590px);
  overflow:hidden;
  background:#fff;
}
.email-window-content-v97 img{
  display:block;
  width:100%;
  height:auto;
}

/* Keep the paired assets visually subordinate to the direct-mail hero. */
.campaign-channel-pair-v97 + *{margin-top:0}

@media(max-width:760px){
  .campaign-channel-pair-v97{
    grid-template-columns:1fr;
    gap:70px;
  }
  .channel-head-v97{
    grid-template-columns:1fr;
    gap:8px;
  }
  .channel-head-v97 p{text-align:left}
  .broker-art-v97{width:72%}
  .email-window-v97{width:82%;margin:0 auto}
  .email-window-content-v97{height:500px}
}

/* V98 — show substantially more of the exclusive-rental email.
   Keep the paired Broker Outreach / Digital Promotion composition intact. */
.email-window-v97{
  width:92%;
}
.email-window-content-v97{
  /* Taller viewport reveals the property information/details and more of the
     campaign body while still avoiding the repetitive lower contact/CTA area. */
  height:clamp(560px,61vw,820px);
  overflow:hidden;
}
.email-window-content-v97 img{
  width:100%;
  height:auto;
  display:block;
  object-position:top center;
}

@media(max-width:760px){
  .email-window-v97{width:90%}
  .email-window-content-v97{height:720px}
}

/* V99 — email detail refinement:
   zoom the actual email artwork out inside the same digital viewport
   instead of making the viewport itself excessively tall. */
.email-window-v97{
  width:92%;
}
.email-window-content-v97{
  height:clamp(500px,52vw,700px);
  overflow:hidden;
  background:#fff;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.email-window-content-v97 img{
  width:82%;
  height:auto;
  max-width:none;
  display:block;
  object-position:top center;
}

@media(max-width:760px){
  .email-window-v97{width:90%}
  .email-window-content-v97{height:610px}
  .email-window-content-v97 img{width:84%}
}

/* V100 — make the email itself smaller so substantially more of the actual
   campaign is visible, while keeping the broker/email pair balanced. */
.email-window-v97{
  width:78%;
  margin-left:auto;
  margin-right:auto;
}
.email-window-content-v97{
  height:clamp(560px,58vw,780px);
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#fff;
}
.email-window-content-v97 img{
  width:68%;
  height:auto;
  max-width:none;
  display:block;
  object-position:top center;
}

@media(max-width:760px){
  .email-window-v97{width:78%}
  .email-window-content-v97{height:650px}
  .email-window-content-v97 img{width:72%}
}

/* V103 — recruiter submission homepage */
.nav-no-brand-v103{justify-content:flex-end}
.nav-no-brand-v103 > div{margin-left:auto}
.about .reveal > p{max-width:760px}