/* ============================================================
   THE VANTAGE MEDIA — Creative Studio · public site styles
   Brand: Editorial Red #B32025 · Brand Blue #6EA0DB · Warm Ivory #F5F1E8
   Type:  Playfair Display (display) · Great Vibes (script) · Montserrat (UI)
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-Italic.ttf');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-Bold.ttf');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-BoldItalic.ttf');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../assets/fonts/PlayfairDisplay-Black.ttf');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('../assets/fonts/GreatVibes-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../assets/fonts/Montserrat-Light.ttf');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../assets/fonts/Montserrat-Regular.ttf');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../assets/fonts/Montserrat-Italic.ttf');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../assets/fonts/Montserrat-Medium.ttf');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../assets/fonts/Montserrat-SemiBold.ttf');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../assets/fonts/Montserrat-Bold.ttf');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --red:#B32025; --red-deep:#8E181C;
  --blue:#6EA0DB; --blue-ink:#41618A; --blue-band:#6E88AC; --blue-pale:#E7EFF8;
  --ivory:#F5F1E8; --white:#FCFAF7; --charcoal:#171717; --ink:#2A2A2A;
  --muted:#6A6A6A; --line:rgba(23,23,23,0.12); --line-red:rgba(179,32,37,0.28);
  --serif:'Playfair Display',Georgia,serif;
  --script:'Great Vibes',cursive;
  --sans:'Montserrat',system-ui,sans-serif;
  --max:1200px; --pad:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--sans);background:var(--ivory);color:var(--charcoal);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;object-position:top}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
::selection{background:var(--red);color:var(--ivory)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-999px;top:0;z-index:500;background:var(--red);color:#fff;padding:12px 20px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0}

/* ---------- Type helpers ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;color:var(--blue-ink);letter-spacing:.005em}
.display{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.2rem)}
.script{font-family:var(--script);color:var(--red);font-weight:400;line-height:.9}
.em{font-style:italic;color:var(--red)}
.rd{color:var(--red)}.bl{color:var(--blue-ink)}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:600}
.eyebrow.blue{color:var(--blue-ink)}
.lead{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--charcoal);line-height:1.4}
.body-sm{font-size:.9rem;color:var(--ink)}
p{font-size:.98rem;color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:15px 30px;border-radius:3px;cursor:pointer;border:1.5px solid transparent;transition:all .25s ease}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-ink)}
.btn-outline{background:transparent;border-color:var(--blue);color:var(--blue-ink)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-outline-w{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-w:hover{background:#fff;color:var(--blue-ink)}
.link-arrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--red);display:inline-flex;align-items:center;gap:8px;position:relative}
.link-arrow::after{content:'→';transition:transform .25s}
.link-arrow:hover::after{transform:translateX(5px)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:200;background:rgba(245,241,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:14px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-left,.nav-right{display:flex;align-items:center;gap:26px}
.nav-right{justify-content:flex-end}
.nav a.navlink{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--charcoal);transition:color .2s}
.nav a.navlink:hover,.nav a.navlink.active{color:var(--red)}
.nav a.navlink.active{border-bottom:1.5px solid var(--red);padding-bottom:3px}
.nav-logo{text-align:center;font-family:var(--serif);font-size:1.5rem;color:var(--red);line-height:1;letter-spacing:.02em}
.nav-logo .v{font-family:var(--script);font-size:1.9rem}
.nav-logo small{display:block;font-family:var(--sans);font-size:.52rem;letter-spacing:.35em;color:var(--blue-ink);margin-top:2px;text-transform:uppercase;font-weight:500}
.nav .book{font-family:var(--script);font-size:1.5rem;color:var(--red);text-transform:none;letter-spacing:0}
.nav{transition:box-shadow .3s ease,background .3s ease}
.nav.scrolled{box-shadow:0 8px 30px rgba(23,23,23,.07)}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px;width:34px;height:30px;justify-content:center}
.nav-burger span{width:22px;height:2px;background:var(--charcoal);transition:transform .3s ease,opacity .25s ease;display:block}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-left{display:none}
  .nav-in{grid-template-columns:1fr auto}
  .nav-right{gap:18px}
  .nav-right .navlink{display:none}
  .nav-burger{display:flex}
}
/* mobile menu drawer */
.mobile-menu{position:fixed;inset:0;z-index:190;background:var(--ivory);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .35s ease,transform .35s ease}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto;transform:none}
.mobile-menu a{font-family:var(--serif);font-size:2rem;color:var(--blue-ink);padding:8px 0;transition:color .2s}
.mobile-menu a:hover{color:var(--red)}
.mobile-menu .mm-book{font-family:var(--script);color:var(--red);font-size:2.4rem;margin-top:14px}
@media(min-width:901px){.mobile-menu{display:none}}

/* ---------- Sections ---------- */
section{padding:clamp(60px,9vw,120px) 0}
.section-tight{padding:clamp(40px,6vw,80px) 0}
.bg-ivory{background:var(--ivory)}
.bg-white{background:var(--white)}
.bg-pale{background:var(--blue-pale)}
.center{text-align:center}

/* split hero (image + text) */
.hero{padding:0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:82vh}
.hero-copy{padding:60px var(--pad)}
.hero-copy .display{margin:16px 0 20px}
.hero-copy p{max-width:440px;margin-bottom:30px}
.hero-cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero-media{height:100%;min-height:60vh;position:relative;background:var(--blue-pale)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media.cutout{background:linear-gradient(160deg,var(--blue-pale),var(--ivory))}
.hero-media.cutout img{object-fit:contain;object-position:bottom}
.hero-badge{position:absolute;right:24px;top:24px;width:120px;opacity:.95}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-media{min-height:52vh;order:-1}}

/* editorial two-col story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.story.rev{grid-template-columns:1.1fr 1fr}
.story-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.story-imgs img{width:100%;height:340px;object-fit:cover;border-radius:2px}
.story-imgs .tall{height:100%;grid-row:span 2}
@media(max-width:820px){.story,.story.rev{grid-template-columns:1fr}.story-imgs img{height:240px}}

/* numbered approach row */
.approach{display:grid;grid-template-columns:0.8fr 1fr 1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.approach .lead{grid-column:auto}
.num-item .n{font-family:var(--serif);font-size:2.4rem;color:var(--blue);line-height:1}
.num-item h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);font-family:var(--sans);font-weight:700;margin:12px 0 8px}
.num-item p{font-size:.86rem;color:var(--muted)}
.num-item{border-top:1px solid var(--line);padding-top:18px}
@media(max-width:900px){.approach{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.approach{grid-template-columns:1fr}}

/* offer card */
.offer-card{background:var(--blue-pale);border-radius:6px;padding:clamp(28px,4vw,52px);display:grid;grid-template-columns:auto 1.4fr .8fr;gap:clamp(24px,4vw,48px);align-items:center}
.offer-card .oc-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:600}
.offer-card .oc-figure img{width:210px;border-radius:3px}
.offer-card h3{font-size:2rem}
.oc-list{list-style:none;columns:2;column-gap:24px;margin:16px 0}
.oc-list li{font-size:.86rem;color:var(--ink);padding:5px 0 5px 22px;position:relative;break-inside:avoid}
.oc-list li::before{content:'✓';position:absolute;left:0;color:var(--red);font-weight:700}
.oc-price{text-align:center;border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}
.oc-price .amt{font-family:var(--serif);font-size:3rem;color:var(--blue-ink)}
.oc-price .amt s{display:block;font-size:1.1rem;color:var(--muted)}
.oc-price .free{color:var(--red);font-weight:700;font-size:.85rem;margin:10px 0 18px}
@media(max-width:900px){.offer-card{grid-template-columns:1fr}.offer-card .oc-label{writing-mode:horizontal-tb;transform:none}.oc-price{border-left:none;border-top:1px solid var(--line);padding:20px 0 0}.oc-list{columns:1}.offer-card .oc-figure{display:none}}

/* 3-benefit row */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,54px)}
.benefit .n{font-family:var(--serif);font-size:2rem;color:var(--blue)}
.benefit h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin:8px 0;color:var(--charcoal)}
.benefit p{font-size:.86rem;color:var(--muted)}
@media(max-width:760px){.benefits{grid-template-columns:1fr}}

/* work grid */
.work-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.work-feature img{width:100%;border-radius:2px;object-fit:cover;max-height:460px}
@media(max-width:820px){.work-feature{grid-template-columns:1fr}}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:56px}
.work-card img{width:100%;height:300px;object-fit:cover;border-radius:2px;transition:transform .5s ease}
.work-card:hover img{transform:scale(1.03)}
.work-card h4{font-size:1.35rem;margin:16px 0 4px}
.work-card .loc{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600}
.work-card p{font-size:.86rem;color:var(--muted);margin:8px 0 10px}
@media(max-width:820px){.work-grid{grid-template-columns:1fr}}

/* made-for tags */
.madefor{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,50px);align-items:center}
.tag-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 30px}
.tag-cols span{font-size:.85rem;color:var(--ink);padding-left:18px;position:relative}
.tag-cols span::before{content:'✦';position:absolute;left:0;color:var(--red);font-size:.7rem}
.madefor > img{width:220px;border-radius:2px}
@media(max-width:820px){.madefor{grid-template-columns:1fr}.madefor > img{display:none}.tag-cols{grid-template-columns:1fr 1fr}}

/* testimonial band */
.testi{background:var(--blue-band);color:#fff;border-radius:2px;padding:clamp(30px,5vw,60px);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.testi .q{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.7rem);font-style:italic;max-width:720px;line-height:1.4}
.testi .q .mark{font-family:var(--serif);color:rgba(255,255,255,.5);font-size:2.4rem;line-height:0;vertical-align:-.4em;margin-right:6px}
.testi .who{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.testi .nav-dots{display:flex;gap:8px;margin-top:14px}
.testi .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4)}
.testi .dot.on{background:var(--red)}

/* steps path */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);text-align:left}
.step .n{font-family:var(--serif);font-size:2.6rem;color:var(--blue-ink)}
.step h4{font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:6px 0 8px}
.step p{font-size:.86rem;color:var(--muted)}
@media(max-width:760px){.steps3{grid-template-columns:1fr}}

/* big CTA band */
.cta-band{background:var(--blue-band);color:#fff;position:relative;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:1.1fr 1fr auto;gap:clamp(24px,4vw,50px);align-items:center}
.cta-grid h2{color:#fff}
.cta-grid h2 .script{color:#fff}
.cta-grid p{color:rgba(255,255,255,.9);font-size:.92rem}
.cta-badge{width:120px;opacity:.85}
.cta-list{list-style:none;font-size:.78rem;letter-spacing:.04em}
.cta-list li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.18);display:flex;gap:10px;align-items:center}
@media(max-width:820px){.cta-grid{grid-template-columns:1fr}.cta-badge{display:none}}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field.full{grid-column:1/-1}
label{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.8)}
.form-dark input,.form-dark select,.form-dark textarea{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:12px 14px;color:#fff;font-family:var(--sans);font-size:.9rem;width:100%}
.form-dark input::placeholder,.form-dark textarea::placeholder{color:rgba(255,255,255,.5)}
.form-dark input:focus,.form-dark select:focus,.form-dark textarea:focus{outline:none;border-color:#fff}
.form-dark option{color:#111}

/* blog */
.blog-hero-grid{display:grid;grid-template-columns:1fr auto auto;gap:0;align-items:stretch;min-height:46vh}
.blog-tabs{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.blog-tabs a{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--charcoal)}
.blog-tabs a.on,.blog-tabs a:hover{color:var(--red)}
.feat-post{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);align-items:center;background:var(--white);border-radius:2px;overflow:hidden}
.feat-post img{width:100%;height:100%;object-fit:cover;min-height:320px}
.feat-post .fp-body{padding:clamp(24px,3vw,44px)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:44px}
.post-card img{width:100%;height:230px;object-fit:cover;border-radius:2px}
.post-card .cat{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);font-weight:600;margin:14px 0 6px}
.post-card h4{font-size:1.25rem;line-height:1.2}
.post-card .meta{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}
@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}.feat-post{grid-template-columns:1fr}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}

/* article */
.article{display:grid;grid-template-columns:1fr 300px;gap:clamp(30px,5vw,64px);align-items:start}
.article-body p{font-size:1rem;line-height:1.85;margin-bottom:18px;color:var(--ink)}
.article-body .dropcap::first-letter{font-family:var(--serif);font-size:3.4rem;float:left;line-height:.8;color:var(--red);padding:6px 10px 0 0}
.article-step{display:grid;grid-template-columns:auto 150px 1fr;gap:22px;align-items:start;margin:28px 0;padding-top:22px;border-top:1px solid var(--line)}
.article-step .n{font-family:var(--serif);font-size:2.4rem;color:var(--blue);border-bottom:2px solid var(--red);display:inline-block;line-height:1;padding-bottom:4px}
.article-step img{width:100%;height:120px;object-fit:cover;border-radius:2px}
.article-step h4{font-size:1.3rem}
.sidebar-card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:22px;margin-bottom:22px}
.sidebar-card h5{font-family:var(--script);color:var(--red);font-size:1.5rem;margin-bottom:10px}
.sidebar-card ul{list-style:none}
.sidebar-card li{padding:7px 0;border-bottom:1px solid var(--line);font-size:.82rem}
@media(max-width:860px){.article{grid-template-columns:1fr}.article-step{grid-template-columns:auto 1fr}.article-step img{display:none}}

/* footer */
.footer{background:var(--ivory);border-top:1px solid var(--line);padding:40px 0}
.footer-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-logo{font-family:var(--serif);color:var(--red);font-size:1.4rem}
.footer-logo .v{font-family:var(--script);font-size:1.7rem}
.footer-logo small{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.3em;color:var(--blue-ink);text-transform:uppercase}
.footer-nav{display:flex;gap:22px}
.footer-nav a{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.footer-nav a:hover{color:var(--red)}
.footer-social{display:flex;gap:14px;color:var(--red)}
.footer-legal{text-align:center;font-size:.72rem;color:var(--muted);margin-top:22px}

/* marquee ribbon */
.ribbon{background:var(--red);color:var(--ivory);overflow:hidden;white-space:nowrap;padding:12px 0}
.ribbon .track{display:inline-block;animation:marq 26s linear infinite}
.ribbon span{font-family:var(--serif);font-style:italic;font-size:1.05rem;margin:0 26px;letter-spacing:.02em}
.ribbon span::after{content:'✦';margin-left:26px;color:rgba(245,241,232,.6);font-style:normal}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* modal */
.modal-back{position:fixed;inset:0;background:rgba(23,23,23,.5);backdrop-filter:blur(3px);z-index:400;display:none;align-items:center;justify-content:center;padding:20px}
.modal-back.open{display:flex}
.modal-box{background:var(--white);border-radius:4px;max-width:820px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.4);position:relative}
.modal-box .m-copy{padding:clamp(26px,3vw,44px)}
.modal-box h3{font-size:2rem;line-height:1.1;margin:10px 0 14px}
.modal-box .m-media{position:relative;background:var(--blue-pale)}
.modal-box .m-media img{width:100%;height:100%;object-fit:cover}
.m-seal{position:absolute;right:16px;top:16px;width:90px;height:90px;border-radius:50%;background:var(--blue-band);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:12px;line-height:1.3}
.modal-close{position:absolute;right:14px;top:14px;z-index:2;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--charcoal)}
.modal-box input{width:100%;background:var(--ivory);border:1px solid var(--line);border-radius:3px;padding:13px 15px;font-family:var(--sans);font-size:.9rem;margin-bottom:12px}
@media(max-width:700px){.modal-box{grid-template-columns:1fr}.modal-box .m-media{display:none}}

/* ============ PROJECT DETAIL ============ */
.back-link{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--red);display:inline-flex;gap:8px;align-items:center}
.back-link::before{content:'←'}
.proj-hero{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,4vw,64px);align-items:center}
.proj-hero .ph-title{font-size:clamp(3rem,7vw,5.6rem);line-height:.98;letter-spacing:.01em;color:var(--blue-ink);text-transform:uppercase}
.proj-hero .ph-loc{font-family:var(--script);color:var(--red);font-size:clamp(1.6rem,3vw,2.4rem);margin:6px 0 22px}
.proj-hero p{color:var(--ink);max-width:420px}
.proj-meta{margin-top:26px;display:grid;gap:16px}
.proj-meta .m-row .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:2px}
.proj-meta .m-row .val{font-size:.95rem;color:var(--charcoal)}
.proj-hero .ph-media{position:relative}
.proj-hero .ph-media img{width:100%;height:100%;max-height:640px;object-fit:cover;border-radius:2px}
.seal-overlay{position:absolute;right:-26px;bottom:26px;width:120px;height:120px;border-radius:50%;background:var(--ivory);padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
@media(max-width:860px){.proj-hero{grid-template-columns:1fr}.seal-overlay{right:16px;width:90px;height:90px}}

/* results + device band */
.proj-band{background:#EDE8DD;border-radius:2px;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(26px,4vw,56px);align-items:center;padding:clamp(28px,4vw,56px)}
.device-stage{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center}
.device-stage .pc{width:88%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.18))}
.device-stage .phone{position:absolute;right:2%;bottom:-6%;width:26%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.25))}
.proj-band .rb .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:8px}
.proj-band .rb p{color:var(--ink);font-size:.92rem;margin-bottom:20px}
.proj-band .rb ul{list-style:none;margin:10px 0 24px}
.proj-band .rb li{font-size:.9rem;padding:5px 0 5px 20px;position:relative}
.proj-band .rb li::before{content:'•';position:absolute;left:4px;color:var(--red)}
@media(max-width:860px){.proj-band{grid-template-columns:1fr}}

/* photoshoot gallery */
.shoot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shoot-grid img{width:100%;height:300px;object-fit:cover;border-radius:2px;transition:transform .5s}
.shoot-grid img:hover{transform:scale(1.03)}
@media(max-width:820px){.shoot-grid{grid-template-columns:1fr 1fr}.shoot-grid img{height:220px}}

/* more projects */
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.more-card{background:var(--white);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.more-card .mc-img{height:200px;background:#EDE8DD;display:flex;align-items:center;justify-content:center;overflow:hidden}
.more-card .mc-img img{width:100%;height:100%;object-fit:cover}
.more-card .mc-body{padding:20px}
.more-card h4{font-size:1.3rem;color:var(--blue-ink)}
.more-card .sub{font-size:.8rem;color:var(--muted);margin:4px 0 12px}
@media(max-width:820px){.more-grid{grid-template-columns:1fr}}

/* ============ SHOWROOM (work index) ============ */
.showroom{display:grid;grid-template-columns:1fr 1.2fr auto;gap:clamp(24px,4vw,50px);align-items:center}
.showroom .sr-copy .display{font-size:clamp(2.6rem,6vw,4.6rem);text-transform:uppercase;line-height:.98}
.showroom .sr-copy .display .script{text-transform:none;display:block;font-size:.72em}
.sr-browser{position:relative}
.sr-browser .frame{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.14)}
.sr-browser .bar{height:30px;background:var(--ivory);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.sr-browser .bar span{width:9px;height:9px;border-radius:50%;background:#cfc9bb}
.sr-browser .frame img{width:100%;display:block}
.sr-browser .float{position:absolute;right:-16px;bottom:-24px;width:34%;border-radius:6px;border:4px solid var(--ivory);box-shadow:0 16px 34px rgba(0,0,0,.2)}
.sr-list{list-style:none;display:grid;gap:12px;min-width:210px}
.sr-list li{display:flex;gap:14px;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--line)}
.sr-list .n{font-family:var(--serif);font-size:1.5rem;color:var(--blue)}
.sr-list a:hover .n{color:var(--red)}
.sr-list .t{font-family:var(--serif);font-size:1.05rem;color:var(--blue-ink)}
.sr-list .s{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:1000px){.showroom{grid-template-columns:1fr}.sr-list{grid-template-columns:1fr 1fr;display:grid}}
@media(max-width:560px){.sr-list{grid-template-columns:1fr}}

.thumb-strip{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:18px;display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:34px}
.thumb-strip figure{text-align:center}
.thumb-strip img{width:100%;height:80px;object-fit:cover;border-radius:3px}
.thumb-strip figcaption{font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:900px){.thumb-strip{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.thumb-strip{grid-template-columns:repeat(2,1fr)}}

.open-proj{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(26px,4vw,56px);align-items:center}
.open-proj .op-title{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--blue-ink)}
.open-proj .op-sub{font-family:var(--script);color:var(--red);font-size:1.7rem;margin:2px 0 16px}
.op-stage{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center}
.op-stage .big{width:74%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.16))}
.op-stage .sm{position:absolute;right:6%;top:8%;width:24%;filter:drop-shadow(0 16px 30px rgba(0,0,0,.22))}
.op-quote{background:var(--blue-pale);border-radius:6px;padding:24px;margin-top:20px;font-family:var(--serif);font-style:italic;color:var(--blue-ink);font-size:1rem;line-height:1.5}
.op-quote .who{font-family:var(--sans);font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px}
@media(max-width:860px){.open-proj{grid-template-columns:1fr}}
.inquire-band{background:var(--blue-pale);border-radius:8px;padding:26px clamp(24px,4vw,44px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.inquire-band h3{font-size:1.6rem;color:var(--blue-ink)}

/* device scene (single combined PNG — never overflows) */
.device-scene{width:100%}
.device-scene img{width:100%;height:auto;display:block}
.op-scene img{width:100%;height:auto;display:block}

/* ============ OWNER HERO COLLAGE (home) ============ */
.hero-collage{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px;height:100%;min-height:78vh;padding:14px}
.hero-collage img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.hero-collage .t2{grid-row:span 2}
@media(max-width:900px){.hero-collage{min-height:60vh;grid-template-columns:repeat(3,1fr)}.hero-collage .hide-sm{display:none}}
@media(max-width:560px){.hero-collage{grid-template-columns:repeat(2,1fr);min-height:auto}}

/* ============ PROJECT HERO — LEKTOV editorial ============ */
.ld-hero{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,56px);align-items:stretch;min-height:74vh}
.ld-left{display:flex;flex-direction:column;position:relative;padding:6px 0}
.ld-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.ld-thumb{width:clamp(120px,13vw,175px);border-radius:2px;box-shadow:0 16px 34px rgba(23,23,23,.16)}
.ld-pill{font-family:var(--serif);font-style:italic;color:var(--red);font-size:1rem;border:1px solid var(--line-red);border-radius:99px;padding:8px 20px;margin-top:30px;align-self:flex-start}
.ld-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7.4vw,6.4rem);line-height:.94;text-transform:uppercase;color:var(--blue-ink);letter-spacing:.005em;margin-top:auto}
.ld-title .it{font-style:italic;color:var(--red)}
.ld-addr{font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:22px;line-height:1.8}
.ld-right{position:relative}
.ld-right img{width:100%;height:100%;min-height:60vh;object-fit:cover;border-radius:2px}
@media(max-width:860px){.ld-hero{grid-template-columns:1fr;min-height:0}.ld-right img{min-height:52vh}.ld-title{margin-top:24px}}

/* thin credit bar under hero */
.proj-credits{display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,60px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-top:30px}
.proj-credits .c-item .k{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:3px}
.proj-credits .c-item .v{font-size:.9rem;color:var(--charcoal)}

/* ============ "KNOWN FOR" strip (Fitzgerald about) ============ */
.kf-statement{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.3rem);text-align:center;max-width:900px;margin:0 auto;line-height:1.36;color:var(--charcoal)}
.kf-statement .it{font-style:italic;color:var(--red)}
.kf-sub{text-align:center;color:var(--muted);font-size:.84rem;max-width:600px;margin:18px auto 0;line-height:1.7}
.kf-eyebrow{text-align:center;margin:54px 0 0}
.kf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,46px);margin-top:34px;align-items:start}
.kf-col img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;box-shadow:0 14px 34px rgba(23,23,23,.1)}
.kf-col:nth-child(2){margin-top:38px}
.kf-col:nth-child(3){margin-top:76px}
.kf-col h4{font-family:var(--serif);font-size:1.35rem;color:var(--blue-ink);margin:16px 0 6px}
.kf-col p{font-size:.84rem;color:var(--muted)}
@media(max-width:760px){.kf-grid{grid-template-columns:1fr;gap:34px}.kf-col:nth-child(2),.kf-col:nth-child(3){margin-top:0}}
.kf-quote{text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,2rem);margin-top:64px;color:var(--charcoal);line-height:1.35;max-width:800px;margin-left:auto;margin-right:auto}
.kf-quote .up{font-style:normal}
.kf-quote .who{display:block;font-family:var(--sans);font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:16px}

/* ============ PROJECT — numbered showcase strip (Fitzgerald) ============ */
.proj-strip{display:grid;gap:34px}
.strip-row{display:grid;grid-template-columns:90px 1.1fr 1fr;gap:clamp(18px,3vw,44px);align-items:center;border-top:1px solid var(--line);padding-top:26px}
.strip-row.rev{grid-template-columns:1fr 1.1fr 90px}
.strip-row.rev .sr-num{order:3}.strip-row.rev .sr-text{order:2}.strip-row.rev .sr-img{order:1}
.strip-row .sr-num{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--blue)}
.strip-row .sr-text h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);font-weight:700;margin-bottom:8px}
.strip-row .sr-text .em{font-family:var(--serif);font-style:italic;text-transform:none;font-size:1.4rem;color:var(--red);display:block;margin-bottom:8px;letter-spacing:0}
.strip-row .sr-text p{font-size:.88rem;color:var(--muted)}
.strip-row .sr-img img{width:100%;height:230px;object-fit:cover;border-radius:2px}
@media(max-width:760px){.strip-row,.strip-row.rev{grid-template-columns:1fr}.strip-row .sr-img{order:0!important}.strip-row .sr-num{order:0!important}.strip-row .sr-text{order:0!important}}

/* masonry-ish gallery */
.masonry{columns:3;column-gap:14px}
.masonry img{width:100%;margin-bottom:14px;border-radius:2px;break-inside:avoid;display:block}
@media(max-width:820px){.masonry{columns:2}}
@media(max-width:520px){.masonry{columns:1}}

/* editorial hero (LEKTOV) tweaks */
.ph-thumb{width:170px;border-radius:2px;margin-bottom:18px;box-shadow:0 14px 30px rgba(23,23,23,.14)}
.book-pill{display:inline-block;font-family:var(--serif);font-style:italic;color:var(--red);font-size:1rem;border:1px solid var(--line-red);border-radius:99px;padding:8px 18px;margin-bottom:14px}

/* ============ FITZGERALD PORTFOLIO ============ */
.pf-dark{background:var(--red);color:var(--ivory)}
.pf-dark h1,.pf-dark h2,.pf-dark h3{color:var(--ivory)}
.pf-hero{text-align:center;padding-top:20px}
.pf-hero .pf-word{font-family:var(--serif);font-weight:700;font-size:clamp(3.4rem,11vw,9rem);letter-spacing:.06em;line-height:.92;color:#FCF8EF;text-shadow:0 3px 26px rgba(90,10,12,.45)}
.pf-hero .pf-frame{width:min(300px,64vw);margin:14px auto 0;position:relative;z-index:2}
.pf-hero .pf-frame img{width:100%;border-radius:2px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.pf-hero .pf-sides{display:flex;justify-content:space-between;max-width:520px;margin:22px auto 0;font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,241,232,.7);position:relative;z-index:3}
@media(max-width:700px){.pf-hero .pf-sides{display:none}}
.pf-tag{font-family:var(--serif);text-align:center;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.25;max-width:760px;margin:44px auto 10px;text-transform:uppercase;letter-spacing:.02em}
.pf-tag .em{color:var(--blue);text-transform:none}
.pf-tag .script{color:var(--red);text-transform:none;font-size:1.2em}
.pf-sub{text-align:center;color:rgba(245,241,232,.6);font-size:.85rem;max-width:460px;margin:0 auto}
.pf-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:center;margin-top:56px}
.pf-gallery img{width:100%;object-fit:cover;border-radius:2px}
.pf-gallery .g-tall{height:230px}.pf-gallery .g-mid{height:200px}.pf-gallery .g-wide{height:180px}
.pf-gallery .col-b{margin-top:30px}.pf-gallery .col-d{margin-top:30px}
@media(max-width:820px){.pf-gallery{grid-template-columns:repeat(2,1fr)}.pf-gallery img{height:200px!important}.pf-gallery .col-b,.pf-gallery .col-d{margin-top:0}}
.pf-highlights{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:52px;border-top:1px solid rgba(245,241,232,.16);padding-top:22px}
.pf-highlights .hl-k{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.pf-highlights p{color:rgba(245,241,232,.6);font-size:.82rem;max-width:420px;margin-top:8px}
.pf-arrows{display:flex;gap:16px;color:var(--ivory);font-size:1.3rem}

/* light projects section */
.pf-projects .pf-cat{text-align:center;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:30px}
.pf-duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pf-duo a{display:block;position:relative;overflow:hidden;border-radius:2px}
.pf-duo img{width:100%;height:440px;object-fit:cover;transition:transform .6s}
.pf-duo a:hover img{transform:scale(1.04)}
.pf-duo .cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(23,23,23,.72));color:#fff}
.pf-duo .cap h4{color:#fff;font-size:1.4rem}
.pf-duo .cap .s{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
@media(max-width:760px){.pf-duo{grid-template-columns:1fr}.pf-duo img{height:320px}}

/* ============ BROWSER FRAME (crops tall screenshots cleanly) ============ */
.webframe{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:0 26px 60px rgba(23,23,23,.16);background:#fff}
.webframe .bar{height:32px;background:var(--ivory);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px}
.webframe .bar span{width:9px;height:9px;border-radius:50%;background:#cfc9bb}
.webframe .shot{height:clamp(300px,44vh,500px);overflow:hidden}
.webframe .shot img{width:100%;object-fit:cover;object-position:top;height:100%}

/* hero with a single browser frame */
.hero-web{display:grid;grid-template-columns:1.02fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;min-height:72vh;padding:clamp(40px,6vw,70px) 0}
.hero-web .hw-media{display:grid;gap:16px}
.hero-web .hw-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-web .hw-photos img{width:100%;height:190px;object-fit:cover;object-position:center;border-radius:6px}
@media(max-width:900px){.hero-web{grid-template-columns:1fr}}

/* CTA band with a background image */
.cta-photo{position:relative;overflow:hidden}
.cta-photo::before{content:'';position:absolute;inset:0;background:var(--img) center/cover;opacity:.16;z-index:0}
.cta-photo > *{position:relative;z-index:1}

/* step + benefit images crop centered (portraits still favor top globally) */
.step .s-img,.benefit .b-img{object-position:center}

/* ============ DESIGN-BIBLE SYSTEM (bold editorial grid) ============ */
.paren{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.paren::before{content:'( '}.paren::after{content:' )'}
.pill{display:inline-flex;align-items:center;gap:12px;background:var(--charcoal);color:#fff;border-radius:99px;padding:13px 14px 13px 26px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:all .25s}
.pill .arw{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--charcoal);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:transform .25s}
.pill:hover .arw{transform:translate(2px,-2px)}
.pill.red{background:var(--red)} .pill.red .arw{color:var(--red)}
.pill.ghost{background:transparent;color:var(--charcoal);border:1.5px solid var(--charcoal)} .pill.ghost .arw{background:var(--charcoal);color:#fff}

/* hero: centered name + flanked portrait */
.ks-hero{background:var(--ivory);padding:clamp(24px,3.5vw,44px) 0 clamp(40px,6vw,72px)}
.ks-toprow{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:clamp(18px,3vw,34px)}
.ks-name{text-align:center;font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,8.4vw,6.4rem);line-height:.9;color:var(--charcoal);letter-spacing:.005em}
.ks-bracket{text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,3vw,2.2rem);color:var(--blue-ink);margin-top:8px}
.ks-bracket::before{content:'[ '}.ks-bracket::after{content:' ]'}
.ks-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,44px);align-items:center;margin-top:clamp(20px,3vw,38px)}
.ks-portrait{width:clamp(230px,30vw,380px);height:clamp(320px,42vw,510px);object-fit:cover;object-position:top}
.ks-flank .ks-eyebrow{color:var(--red);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.ks-flank p{font-size:.78rem;color:var(--charcoal);text-transform:uppercase;letter-spacing:.04em;line-height:1.9}
.ks-left{text-align:right}.ks-right{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ks-clients b{color:var(--red)}
@media(max-width:860px){.ks-stage{grid-template-columns:1fr;gap:24px}.ks-left,.ks-right{text-align:center;align-items:center}.ks-portrait{margin:0 auto;order:-1}}

/* tight work grid (dark) */
.ks-work{background:var(--charcoal);color:#fff;padding:clamp(50px,7vw,96px) 0}
.ks-work-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:clamp(24px,3vw,40px)}
.ks-work-head h2{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5.2vw,3.8rem);color:#fff;line-height:1}
.ks-work-head h2 .rd{color:var(--red)}
.ks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ks-tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#1b1b1b;display:block}
.ks-tile img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease}
.ks-tile:hover img{transform:scale(1.05)}
.ks-tile.text{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2vw,30px)}
.ks-tile.text .wnum{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.ks-tile.text h4{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);text-transform:uppercase;line-height:1.05;color:#fff;margin-bottom:10px}
.ks-tile.text p{font-size:.82rem;color:rgba(255,255,255,.68);line-height:1.6}
.ks-tile.text .rcs{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);font-weight:700}
@media(max-width:760px){.ks-grid{grid-template-columns:1fr 1fr}.ks-tile.text{aspect-ratio:auto;min-height:220px}}

/* full-bleed filled band: edge-to-edge image + text (no empty bg) */
.fb{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(380px,46vw,580px)}
.fb .fb-img{overflow:hidden}
.fb .fb-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.fb .fb-txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,74px)}
.fb.rev .fb-img{order:2}
.fb.dark{background:var(--charcoal);color:#fff}.fb.dark h2,.fb.dark h3{color:#fff}
.fb.ivory{background:var(--ivory)}
.fb .lbl{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:16px}
.fb h2{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.02;margin-bottom:18px}
.fb h2 .rd{color:var(--red)}
.fb p{color:var(--muted);line-height:1.75;margin-bottom:14px;max-width:46ch}
.fb.dark p{color:rgba(255,255,255,.72)}
@media(max-width:760px){.fb{grid-template-columns:1fr}.fb.rev .fb-img{order:0}.fb .fb-img{min-height:320px}}

/* editorial section header (centered, paren accent) */
.sec-lbl{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700;text-align:center;display:block;margin-bottom:14px}
.sec-h{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.04;text-align:center;color:var(--charcoal);margin-bottom:clamp(28px,3.5vw,46px)}
.sec-h .rd{color:var(--red)}

/* filled portrait duo (no empty bg) */
.ks-duo{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ks-duo figure{margin:0}
.ks-duo .ph{aspect-ratio:3/4;overflow:hidden}
.ks-duo .ph img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .6s}
.ks-duo figure:hover .ph img{transform:scale(1.04)}
.ks-duo figcaption{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px;text-align:center}

/* ============ REFERENCE HERO (name-over-image) ============ */
.hero-ref{display:grid;grid-template-columns:.9fr 1.1fr;min-height:86vh;background:var(--ivory)}
.hr-left{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:clamp(70px,9vw,110px) clamp(24px,5vw,60px)}
.hr-left .hr-eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);font-weight:600}
.hr-lead{font-family:var(--serif);font-size:clamp(2rem,3.7vw,3.3rem);line-height:1.08;color:var(--blue-ink)}
.hr-lead .em{font-style:italic;color:var(--red)}
.hr-left .hr-sub{color:var(--muted);max-width:400px;font-size:1rem}
.hr-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.hr-right{position:relative;overflow:hidden;min-height:64vh;background:linear-gradient(160deg,#efeae0,#e3dccd);display:flex;align-items:flex-end;justify-content:center}
.hr-right img{width:100%;height:100%;object-fit:contain;object-position:bottom;position:relative;z-index:2;filter:drop-shadow(0 18px 34px rgba(23,23,23,.16))}
.hr-name{position:absolute;left:clamp(12px,2vw,30px);bottom:clamp(16px,4vw,42px);font-family:var(--serif);color:var(--red);line-height:.8;letter-spacing:.012em;white-space:nowrap;z-index:1;opacity:.92}
.hr-name span{display:block;font-size:clamp(3.2rem,8.6vw,7.6rem);font-weight:400}
/* floating cutout photos (bg removed) on subtle panels */
.cutwrap{background:linear-gradient(160deg,#f1ece2,#e7e0d2);border-radius:4px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.cutwrap img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.js .hr-name span{opacity:0;animation:nameRise 1s cubic-bezier(.2,.7,.2,1) forwards}
.js .hr-name span:nth-child(1){animation-delay:.35s}
.js .hr-name span:nth-child(2){animation-delay:.5s}
@keyframes nameRise{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js .hr-name span{opacity:1;animation:none}}
@media(max-width:900px){.hero-ref{grid-template-columns:1fr}.hr-right{min-height:66vh}.hr-left{text-align:center;align-items:center}.hr-cta{justify-content:center}}

/* ============ EDITORIAL DARK HERO (basic.PNG) ============ */
.hero-editorial{background:linear-gradient(120deg,#171717,#1e1e1f 52%,#101011);color:var(--ivory);position:relative;overflow:hidden}
.he-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,4vw,54px);align-items:center;max-width:var(--max);margin:0 auto;padding:clamp(90px,12vw,130px) var(--pad) clamp(40px,6vw,70px);position:relative;z-index:2;min-height:88vh}
.he-eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:#C9A98A;font-weight:600;margin-bottom:20px}
.he-copy h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.02;color:var(--ivory);letter-spacing:.005em}
.he-copy h1 .it{font-style:italic;color:#E0876B}
.he-copy h1 .script{font-family:var(--script);color:#E4B98B;font-size:1.15em;font-style:normal}
.he-sub{color:rgba(245,241,232,.72);max-width:450px;margin:24px 0 30px;font-size:1.02rem}
.he-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.he-trust{margin-top:26px;font-size:.82rem;letter-spacing:.03em;color:rgba(245,241,232,.5)}
.he-trust b{color:#E4B98B;font-weight:600}
.he-media{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;min-height:60vh}
.he-media img{width:100%;height:100%;max-height:86vh;object-fit:contain;object-position:center bottom;filter:contrast(1.04)}
.he-tag{position:absolute;top:6%;right:2%;background:var(--red);color:#fff;font-family:var(--serif);font-size:1.15rem;padding:12px 20px;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.4);text-align:center;line-height:1.05;z-index:3}
.he-tag small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;font-weight:600}
.he-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;background-image:radial-gradient(circle at 20% 15%,rgba(228,185,139,.06),transparent 40%),radial-gradient(circle at 85% 80%,rgba(179,32,37,.06),transparent 45%)}
@media(max-width:900px){.he-grid{grid-template-columns:1fr;min-height:0;text-align:center}.he-cta{justify-content:center}.he-sub{margin-left:auto;margin-right:auto}.he-media{min-height:auto;margin-top:20px}.he-media img{max-height:70vh}.he-tag{top:2%;right:4%;font-size:1rem}}

/* scroll progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--blue));z-index:400;transition:width .08s linear}

/* animated stat band */
.stat-band{background:var(--blue-band);color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);text-align:center}
.stat-b{position:relative}
.stat-b .num{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;color:#fff}
.stat-b .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-top:10px;display:block}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr;gap:30px}}

/* elegant star divider */
.divider{display:flex;align-items:center;gap:20px;max-width:var(--max);margin:0 auto;padding:clamp(30px,5vw,56px) var(--pad)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.divider .d-star{color:var(--red);font-size:.9rem;letter-spacing:.4em}

/* ============ SLIM CAMERA-SHOT HERO ============ */
.hero-media.cut{background:radial-gradient(120% 90% at 70% 100%,var(--blue-pale),var(--ivory));display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden}
.hero-media.cut img{width:100%;max-width:520px;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 40px rgba(23,23,23,.18))}
.hero-tag{position:absolute;top:32px;right:32px;background:var(--red);color:#fff;font-family:var(--serif);font-size:1.15rem;padding:12px 20px;border-radius:8px;box-shadow:0 12px 30px rgba(179,32,37,.3);z-index:2;text-align:center;line-height:1.1}
.hero-tag small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;font-weight:600}
@media(max-width:900px){.hero-media.cut{min-height:52vh}.hero-tag{top:16px;right:16px;font-size:1rem;padding:10px 16px}}

/* testimonial with client photo */
.testi.with-img{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,44px);align-items:center}
.testi.with-img .t-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.35);flex-shrink:0}
@media(max-width:760px){.testi.with-img{grid-template-columns:1fr;text-align:center}.testi.with-img .t-photo{margin:0 auto}}

/* benefit / step image thumbnails */
.benefit .b-img,.step .s-img{width:100%;height:180px;object-fit:cover;border-radius:2px;margin-bottom:18px}
.step .s-img{height:200px}

/* ============ BOOKING PAGE ============ */
.book-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(max-width:800px){.book-grid{grid-template-columns:1fr}}
.book-work{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.book-work a{position:relative;display:block;border-radius:2px;overflow:hidden}
.book-work img{width:100%;height:240px;object-fit:cover;transition:transform .5s}
.book-work a:hover img{transform:scale(1.05)}
.book-work span{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(23,23,23,.72));color:#fff;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
@media(max-width:820px){.book-work{grid-template-columns:1fr 1fr}.book-work img{height:200px}}

/* ============ ANIMATIONS ============ */
/* Initial hidden states are gated behind html.js so content is fully visible
   if JavaScript is disabled or fails to load. */
/* base fade-up */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none}

/* image reveal: gentle zoom-out + fade */
.reveal-img{transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
.js .reveal-img{opacity:0;transform:scale(1.08)}
.reveal-img.in{opacity:1;transform:scale(1)}
/* image wipe (for framed/editorial images) */
.wipe{transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
.js .wipe{clip-path:inset(0 0 100% 0)}
.wipe.in{clip-path:inset(0 0 0 0)}

/* word / line stagger — children rise in sequence */
.stagger > *{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .stagger > *{opacity:0;transform:translateY(20px)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.15s}
.stagger.in > *:nth-child(3){transition-delay:.25s}
.stagger.in > *:nth-child(4){transition-delay:.35s}
.stagger.in > *:nth-child(5){transition-delay:.45s}
.stagger.in > *:nth-child(6){transition-delay:.55s}
.stagger.in > *:nth-child(7){transition-delay:.65s}
.stagger.in > *:nth-child(8){transition-delay:.75s}

/* headline word rise */
.words .w{display:inline-block;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .words .w{opacity:0;transform:translateY(0.5em) rotate(2deg)}
.words.in .w{opacity:1;transform:none}
.words.in .w:nth-child(1){transition-delay:.04s}.words.in .w:nth-child(2){transition-delay:.12s}
.words.in .w:nth-child(3){transition-delay:.20s}.words.in .w:nth-child(4){transition-delay:.28s}
.words.in .w:nth-child(5){transition-delay:.36s}.words.in .w:nth-child(6){transition-delay:.44s}
.words.in .w:nth-child(7){transition-delay:.52s}.words.in .w:nth-child(8){transition-delay:.60s}

/* hover lift for cards/images */
.lift{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.lift:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(23,23,23,.14)}
/* nav underline sweep */
.nav a.navlink{position:relative}
.nav a.navlink::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:currentColor;transition:right .3s ease;opacity:.7}
.nav a.navlink:hover::after{right:0}
.nav a.navlink.active::after{right:0}

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-img,.stagger>*,.words .w{opacity:1!important;transform:none!important;transition:none!important}
  .wipe{clip-path:none!important;transition:none!important}
  .ribbon .track{animation:none}
}

/* ============================================================
   REBRAND V2 — reference-matched system (Home / About / Services)
   ============================================================ */
.rwrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.r-sec{padding:clamp(48px,7vw,92px) 0}
.r-sec.tight{padding:clamp(34px,5vw,60px) 0}
.bg-cream{background:var(--ivory)}.bg-wht{background:#fff}

/* labels + headings */
.r-lbl{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-ink);font-weight:600;display:inline-block}
.r-lbl.red{color:var(--red)}
.r-lbl.c{display:block;text-align:center}
.r-h{font-family:var(--serif);color:var(--red);font-weight:700;line-height:1.04;letter-spacing:.004em}
.r-h.xl{font-size:clamp(2.7rem,6.2vw,4.7rem);line-height:1.0}
.r-h.lg{font-size:clamp(2rem,4.4vw,3.3rem)}
.r-h.md{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.r-h.c{text-align:center}
.scr{font-family:var(--script);font-weight:400;color:var(--red);font-size:1.18em;line-height:.8;display:inline-block}
.r-body{font-size:.96rem;color:var(--ink);line-height:1.75;max-width:52ch}
.r-divscr{display:block;text-align:center;color:var(--blue-ink);opacity:.5;font-size:1rem;letter-spacing:.3em;margin:8px 0 22px}

/* buttons */
.r-btn{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:15px 30px;border-radius:4px;border:1.5px solid var(--red);transition:all .22s}
.r-btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.r-btn.blue{background:var(--blue-ink);border-color:var(--blue-ink)}.r-btn.blue:hover{filter:brightness(.92)}
.r-btn.wht{background:#fff;color:var(--red);border-color:#fff}
.r-link{display:inline-flex;align-items:center;gap:8px;color:var(--blue-ink);font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.r-link .a{transition:transform .22s}.r-link:hover .a{transform:translateX(4px)}
.r-cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px}

/* NAV */
.rnav{position:sticky;top:0;z-index:120;background:rgba(245,241,232,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.rnav-in{max-width:1180px;margin:0 auto;padding:14px clamp(20px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:18px}
.rlogo{display:flex;flex-direction:column;line-height:1}
.rlogo .l1{font-family:var(--serif);font-size:1.5rem;color:var(--charcoal);font-weight:500}
.rlogo .l1 .s{font-family:var(--script);font-size:1.35em;color:var(--charcoal);font-weight:400}
.rlogo small{font-family:var(--sans);font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:var(--blue-ink);margin-top:3px}
.rnav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.rnav-links a{font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--charcoal);padding:4px 0;transition:color .2s}
.rnav-links a:hover{color:var(--red)}
.rnav-links a.active{color:var(--red);border-bottom:2px solid var(--red)}
.rnav-cta{background:var(--red);color:#fff;font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:12px 22px;border-radius:4px;transition:background .2s}
.rnav-cta:hover{background:var(--red-deep)}
.rnav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.rnav-burger span{width:24px;height:2px;background:var(--charcoal);display:block}
@media(max-width:900px){.rnav-links{display:none}.rnav-burger{display:flex}}

/* HERO (home) */
.rhero{background:var(--ivory);padding:clamp(28px,4vw,58px) 0 clamp(40px,6vw,72px)}
.rhero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,64px);align-items:center}
.rhero h1{font-family:var(--serif);color:var(--red);font-weight:700;font-size:clamp(2.7rem,6.4vw,5rem);line-height:1.0;margin:16px 0 22px}
.rhero .r-body{margin-bottom:6px}
.arch{border-radius:clamp(120px,20vw,230px) clamp(120px,20vw,230px) 12px 12px;overflow:hidden;aspect-ratio:4/4.6}
.arch img{width:100%;height:100%;object-fit:cover;object-position:top}
.rimg{border-radius:12px;overflow:hidden}
.rimg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(max-width:820px){.rhero-in{grid-template-columns:1fr;gap:30px}.arch{aspect-ratio:4/4.2;max-width:460px;margin:0 auto}}

/* intro split (We're The Vantage / strategy meets conversion) */
.r-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
.r-split.rev .r-split-media{order:2}
.r-split-media{border-radius:12px;overflow:hidden;aspect-ratio:3/2}
.r-split-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.r-sig{font-family:var(--script);color:var(--red);font-size:2rem;margin-top:14px}
@media(max-width:820px){.r-split{grid-template-columns:1fr;gap:26px}.r-split.rev .r-split-media{order:0}}

/* SERVICE CARDS (4) */
.r-serv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.r-scard{border:1px solid var(--line);border-radius:8px;padding:30px 22px;text-align:center;background:#fff;transition:transform .25s,box-shadow .25s}
.r-scard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(23,23,23,.08)}
.r-scard .ic{color:var(--blue-ink);height:34px;margin-bottom:14px;display:flex;justify-content:center}
.r-scard .ic svg{width:32px;height:32px}
.r-scard h4{font-family:var(--serif);color:var(--red);font-size:1.3rem;margin-bottom:10px;font-weight:700}
.r-scard p{font-size:.83rem;color:var(--muted);line-height:1.6;margin-bottom:16px}
@media(max-width:820px){.r-serv{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.r-serv{grid-template-columns:1fr}}

/* OFFER STRIP */
.r-offer{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.r-offer .oimg{border-radius:10px;overflow:hidden;aspect-ratio:3/4}
.r-offer .oimg img{width:100%;height:100%;object-fit:cover;object-position:top}
.r-offer .omid{text-align:center}
.r-offer .omid h3{font-family:var(--serif);color:var(--red);font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12;margin:8px 0 14px}
.r-offer .olap{border-radius:10px;overflow:hidden}
.r-offer .olap img{width:100%;height:auto;display:block}
@media(max-width:900px){.r-offer{grid-template-columns:1fr}.r-offer .oimg{max-width:340px;margin:0 auto;aspect-ratio:16/10}}

/* RECENT PROJECTS strip */
.r-projs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.r-pcard{position:relative;aspect-ratio:3/4;overflow:hidden;display:block}
.r-pcard img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.r-pcard:hover img{transform:scale(1.05)}
.r-pcard::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 55%)}
.r-pcard .cap{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff}
.r-pcard .cap h4{font-family:var(--serif);color:#fff;font-size:1.15rem;font-weight:600;line-height:1.1}
.r-pcard .cap span{font-family:var(--sans);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
@media(max-width:820px){.r-projs{grid-template-columns:1fr 1fr}}

/* TESTIMONIAL centered */
.r-testi{text-align:center;max-width:720px;margin:0 auto;position:relative}
.r-testi .qm{color:var(--blue);font-family:var(--serif);font-size:2rem;line-height:0}
.r-testi p{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2.3vw,1.6rem);color:var(--charcoal);line-height:1.5;margin:18px 0}

/* FOUNDERS */
.r-founders{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:960px;margin:0 auto}
.r-fcard{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:start;padding:0 34px}
.r-fcard:first-child{border-right:1px solid var(--line)}
.r-fcard .fph{border-radius:8px;overflow:hidden;aspect-ratio:5/6}
.r-fcard .fph img{width:100%;height:100%;object-fit:cover;object-position:top}
.r-fcard h3{font-family:var(--serif);color:var(--red);font-size:1.55rem;font-weight:700}
.r-fcard .role{font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);font-weight:600;margin:5px 0 12px}
.r-fcard p{font-size:.84rem;color:var(--muted);line-height:1.6}
.r-fcard .sig{font-family:var(--script);color:var(--red);font-size:1.7rem;margin-top:12px}
@media(max-width:760px){.r-founders{grid-template-columns:1fr;gap:34px}.r-fcard{padding:0}.r-fcard:first-child{border-right:0;border-bottom:1px solid var(--line);padding-bottom:34px}}

/* VALUES 3-col */
.r-values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center}
.r-vitem{padding:0 clamp(18px,3vw,40px)}
.r-vitem+.r-vitem{border-left:1px solid var(--line)}
.r-vitem .ic{color:var(--red);height:40px;margin-bottom:14px;display:flex;justify-content:center}
.r-vitem .ic svg{width:38px;height:38px}
.r-vitem h4{font-family:var(--serif);color:var(--red);font-size:1.3rem;font-weight:700;margin-bottom:8px}
.r-vitem p{font-size:.84rem;color:var(--muted);line-height:1.6}
@media(max-width:760px){.r-values{grid-template-columns:1fr;gap:30px}.r-vitem+.r-vitem{border-left:0}}

/* BENTO */
.r-bento{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-auto-rows:1fr;gap:14px;min-height:440px}
.r-bento>*{border-radius:8px;overflow:hidden}
.r-bento .tall{grid-row:span 2}
.r-bento .imgc{position:relative}
.r-bento .imgc img{width:100%;height:100%;object-fit:cover;object-position:top;min-height:150px}
.r-bento .txtc{background:#fff;border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;justify-content:center}
.r-bento .k{color:var(--blue-ink);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.r-bento .txtc p{font-size:.82rem;color:var(--muted);line-height:1.55;margin-bottom:12px}
.r-bento .lblover{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.r-bento .lblover .k{color:#fff}.r-bento .lblover .r-link{color:#fff}
@media(max-width:760px){.r-bento{grid-template-columns:1fr 1fr}.r-bento .tall{grid-row:span 1;grid-column:span 2;min-height:260px}}

/* CTA card */
.r-ctacard{background:var(--ivory);border:1px solid var(--line);border-radius:14px;padding:clamp(30px,4vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.r-ctacard.red{background:var(--red);border-color:var(--red)}
.r-ctacard.red h2,.r-ctacard.red .scr{color:#fff}
.r-ctacard.red p{color:rgba(255,255,255,.85)}
.r-ctacard.red .r-link{color:#fff}
@media(max-width:760px){.r-ctacard{grid-template-columns:1fr;gap:18px}}

/* SERVICES full-bleed hero */
.r-shero{position:relative;min-height:clamp(360px,44vw,540px);overflow:hidden;background:#bfc3c7;display:flex;align-items:flex-end}
.r-shero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.r-shero .top{position:absolute;top:clamp(24px,5vw,60px);left:0;right:0;text-align:center;color:#fff;font-family:var(--sans);font-size:clamp(.72rem,1.4vw,.9rem);letter-spacing:.16em;text-transform:uppercase;line-height:1.7;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.r-shero .wm{position:relative;width:100%;text-align:center;font-family:var(--script);color:#fff;font-size:clamp(4.5rem,19vw,15rem);line-height:.72;z-index:2;padding-bottom:.05em;text-shadow:0 6px 30px rgba(0,0,0,.35)}

/* RED band with polaroids */
.r-redband{position:relative;background:var(--red);color:#fff;text-align:center;padding:clamp(64px,9vw,128px) 0;overflow:hidden}
.r-redband .in{position:relative;z-index:3;max-width:640px;margin:0 auto}
.r-redband h2{color:#fff;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;margin:14px 0 24px}
.r-redband h2 .scr{color:#fff}
.r-redband .lbl{color:rgba(255,255,255,.85);font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.polaroid{position:absolute;background:#fff;padding:8px 8px 24px;border-radius:2px;box-shadow:0 14px 34px rgba(0,0,0,.28);width:clamp(110px,12vw,164px);z-index:2}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;display:block}
.polaroid.p1{top:9%;left:5%;transform:rotate(-8deg)}
.polaroid.p2{bottom:8%;left:8%;transform:rotate(7deg)}
.polaroid.p3{top:10%;right:6%;transform:rotate(8deg)}
.polaroid.p4{bottom:9%;right:5%;transform:rotate(-7deg)}
@media(max-width:820px){.polaroid.p1,.polaroid.p2,.polaroid.p3,.polaroid.p4{display:none}}

/* PROCESS steps */
.r-steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.r-step{padding:0 6px}
.r-step .no{font-family:var(--serif);color:var(--blue-ink);opacity:.55;font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;line-height:1}
.r-step h4{font-family:var(--serif);color:var(--red);font-size:1.25rem;font-weight:700;margin:2px 0 8px}
.r-step p{font-size:.85rem;color:var(--muted);line-height:1.6}
.r-steps-head{text-align:center;margin-bottom:clamp(28px,4vw,50px)}

/* FOOTER + ribbon */
.r-foot{background:var(--ivory);border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0 0}
.r-foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:24px;padding-bottom:34px}
.r-foot-col h5{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);font-weight:600;margin-bottom:14px}
.r-foot-col a{display:block;font-size:.85rem;color:var(--ink);margin-bottom:9px}
.r-foot-col a:hover{color:var(--red)}
.r-foot .rlogo{margin-bottom:10px}
.r-social{display:flex;gap:12px;margin-top:4px}
.r-social a{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--blue-ink)}
.r-social a:hover{border-color:var(--red);color:var(--red)}
.r-social svg{width:16px;height:16px}
.r-foot-legal{border-top:1px solid var(--line);padding:16px 0;font-size:.72rem;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.r-ribbon{background:var(--ivory);border-top:1px solid var(--line);text-align:center;padding:16px;font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-ink)}
.r-ribbon b{color:var(--red);font-weight:600;margin:0 6px}

/* mobile menu reuse */
@media(max-width:900px){.r-serv,.r-offer{gap:14px}}

/* ---- portfolio red hero: keep all text visible on red ---- */
.pf-dark .pf-tag .script{color:#FCF8EF!important}
.pf-dark .pf-tag .em{color:#DCE7F6!important}
.pf-dark .pf-sides,.pf-dark .pf-sub,.pf-dark .pf-highlights p{color:rgba(245,241,232,.82)!important}
.pf-dark .pf-highlights .hl-k{color:#F3D9A6!important}
.pf-hero .pf-frame img{border-radius:4px}

/* ============ ANIMATIONS (site-wide) ============ */
.r-btn,.rnav-cta{transition:transform .22s ease,background .22s ease,filter .22s ease,box-shadow .22s ease}
.r-btn:hover,.rnav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(179,32,37,.25)}
.r-btn.wht:hover{box-shadow:0 10px 24px rgba(0,0,0,.18)}
.r-scard .ic svg,.r-vitem .ic svg{transition:transform .3s ease}
.r-scard:hover .ic svg{transform:translateY(-3px) scale(1.08)}
.r-vitem:hover .ic svg{transform:scale(1.1) rotate(-4deg)}
.r-sig{transition:transform .3s ease}
/* animated nav underline */
.rnav-links a{position:relative}
.rnav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);transition:right .28s ease}
.rnav-links a:hover::after{right:0}
.rnav-links a.active::after{right:0}
/* hero image reveal: gentle zoom-settle */
.arch img,.rimg img,.r-split-media img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.arch:hover img,.rimg:hover img,.r-split-media:hover img{transform:scale(1.03)}
/* floating polaroids */
.polaroid.p1{animation:flp1 6.5s ease-in-out infinite}
.polaroid.p2{animation:flp2 7.5s ease-in-out infinite}
.polaroid.p3{animation:flp3 7s ease-in-out infinite}
.polaroid.p4{animation:flp4 8s ease-in-out infinite}
@keyframes flp1{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-12px)}}
@keyframes flp2{0%,100%{transform:rotate(7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-10px)}}
@keyframes flp3{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-11px)}}
@keyframes flp4{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-9px)}}
/* services wordmark subtle float */
.r-shero .wm{animation:wmfloat 8s ease-in-out infinite}
@keyframes wmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* portfolio hero word shimmer-in */
.pf-word{animation:pfpop 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes pfpop{0%{opacity:0;transform:translateY(24px) scale(.96);letter-spacing:.16em}100%{opacity:1;transform:none}}
.pf-frame{animation:pffade 1.1s ease .2s both}
@keyframes pffade{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:none}}
/* marquee ribbon */
.pf-marquee{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(245,241,232,.16);border-bottom:1px solid rgba(245,241,232,.16);padding:14px 0;margin-top:40px}
.pf-marquee .mtrack{display:inline-block;animation:mscroll 24s linear infinite;font-family:var(--sans);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,241,232,.75)}
.pf-marquee .mtrack span{margin:0 26px}
@keyframes mscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.polaroid,.r-shero .wm,.pf-word,.pf-frame,.pf-marquee .mtrack{animation:none!important}}

/* ============ CINEMATIC SCROLL STORY (clean, full-page) ============ */
.cine{position:relative;background:var(--white)}
.cine-track{position:relative;height:6400px}
.cine-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--white)}
.cine-head{position:absolute;top:clamp(22px,5vh,58px);left:0;right:0;text-align:center;z-index:6;opacity:0;transition:opacity .6s ease}
.cine-head.show{opacity:1}
.cine-head .r-lbl{color:var(--blue-ink)}
/* stage — no frame, figures float on the page */
.cine-stage{position:relative;z-index:3;height:88vh;aspect-ratio:9/16;max-width:92vw}
.cine-canvas{width:100%;height:100%;display:block;background:transparent}
/* captions — clean brand type, no panels */
.cine-cap{position:absolute;z-index:6;max-width:min(340px,34vw);opacity:0;filter:blur(8px);transition:opacity .55s ease,filter .55s ease,transform .55s ease;pointer-events:none}
.cine-cap.left{left:clamp(20px,7vw,120px);top:50%;transform:translateY(-50%) translateY(26px)}
.cine-cap.left.show{transform:translateY(-50%)}
.cine-cap.right{right:clamp(20px,7vw,120px);top:50%;text-align:right;transform:translateY(-50%) translateY(26px)}
.cine-cap.right.show{transform:translateY(-50%)}
.cine-cap.show{opacity:1;filter:blur(0)}
.cine-cap .k{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-ink);display:block;margin-bottom:12px}
.cine-cap h3{font-family:var(--serif);color:var(--charcoal);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.1}
.cine-cap h3 .scr{color:var(--red);font-size:1.12em}
.cine-cap p{color:var(--muted);font-size:.9rem;margin-top:12px;line-height:1.6;max-width:34ch}
/* branded loader */
.cine-loader{position:absolute;inset:0;z-index:20;background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .6s ease}
.cine-loader.hide{opacity:0;pointer-events:none}
.cine-spin{width:46px;height:46px;border-radius:50%;border:3px solid rgba(179,32,37,.16);border-top-color:var(--red);animation:cspin .9s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
.cine-loader .lt{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-ink)}
.cine-loader .lp{font-family:var(--serif);color:var(--red);font-size:1.2rem;font-weight:700}
@media(max-width:760px){
  .cine-track{height:5200px}
  .cine-stage{height:62vh;max-width:84vw}
  .cine-cap{max-width:none;left:18px!important;right:18px!important;top:auto!important;bottom:6vh;transform:translateY(20px)!important;text-align:center!important}
  .cine-cap p{max-width:none;margin-left:auto;margin-right:auto}
  .cine-cap.show{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .cine-track{height:auto;min-height:100vh}
  .cine-sticky{position:relative;height:auto;padding:60px 0}
  .cine-cap{position:static;opacity:1;filter:none;transform:none!important;max-width:520px;margin:14px auto;text-align:center}
}