/* ============================================================
   Nicole Favarelli, shared design system
   Soft monochrome pink: everything sits between a blush paper
   background and a deep plum, never pure white or black.
============================================================ */
:root{
  --snow:#F3E7ED;
  --blush:#ECD7E1;
  --pink:#E28CBE;
  --rose:#B14C82;
  --plum:#2E1930;
  --ink:#4A2E44;
  --font:'Quicksand',sans-serif;
  --r:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--snow);color:var(--ink);
  font-family:var(--font);font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:var(--pink);color:var(--plum)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.label{font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

.media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--blush)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.rv{opacity:0;transform:translateY(26px);filter:blur(16px);transition:opacity 1.7s var(--ease),transform 1.7s var(--ease),filter 1.7s var(--ease)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.rv.d1{transition-delay:.15s}.rv.d2{transition-delay:.3s}.rv.d3{transition-delay:.45s}

/* whole-page curtain fade-in on load, see main.js */
.page-curtain{position:fixed;inset:0;z-index:9999;opacity:1;pointer-events:none;transition:opacity .9s var(--ease)}
.page-curtain.out{opacity:0}

/* nav, light, minimal, a hairline instead of a colour block.
   The bar spans edge to edge; .nav-inner shares the same
   1360px/24px frame as every other section so the logo and
   links line up with the headings below them. */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--snow);
  border-bottom:1px solid rgba(46,25,48,.08);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
nav.scrolled{box-shadow:0 6px 24px -10px rgba(46,25,48,.12);background:var(--snow)}
.nav-inner{
  max-width:1360px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;transition:padding .4s var(--ease);
}
nav.scrolled .nav-inner{padding:15px 24px}
nav .logo{font-weight:700;font-size:17px;letter-spacing:.06em;color:var(--plum)}
nav .logo em{font-style:normal;color:var(--rose)}
nav .nav-links{display:flex;gap:34px;align-items:center}
nav .nav-links a{font-weight:500;font-size:14px;color:var(--plum);position:relative;padding:4px 0}
nav .nav-links a.active{color:var(--rose)}
nav .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;border-radius:2px;background:var(--rose);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
nav .nav-links a:hover::after,nav .nav-links a.active::after{transform:scaleX(1);transform-origin:left}
nav .nav-links a:hover{color:var(--rose)}

.nav-toggle{
  display:none;width:38px;height:30px;position:relative;background:none;border:none;cursor:pointer;padding:0;z-index:70;
}
.nav-toggle span{
  position:absolute;left:0;right:0;height:2px;background:var(--plum);border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease),background .3s;
}
.nav-toggle span:nth-child(1){top:4px}
.nav-toggle span:nth-child(2){top:14px}
.nav-toggle span:nth-child(3){top:24px}
nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(10px) rotate(45deg)}
nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

@media (max-width:760px){
  .nav-toggle{display:block}
  nav .nav-links{
    position:fixed;inset:0;top:0;
    flex-direction:column;justify-content:center;align-items:center;gap:30px;
    background:var(--snow);
    transform:translateX(100%);transition:transform .45s var(--ease);
  }
  nav.menu-open .nav-links{transform:translateX(0)}
  nav .nav-links a{font-size:20px}
  body.nav-locked{overflow:hidden}
}

/* hero */
.hero{max-width:1360px;margin:0 auto;padding:170px 24px 0;text-align:center}
.hero .eyebrow{color:var(--rose);margin-bottom:22px}
.hero h1{
  font-weight:600;color:var(--plum);
  font-size:clamp(42px,6.6vw,92px);line-height:1.05;letter-spacing:-.02em;
}
.hero .tagline{
  font-weight:500;font-size:clamp(17px,1.9vw,23px);color:var(--rose);margin-top:20px;
}

/* full-bleed image hero (homepage), nav stays a separate solid bar above it */
/* aspect-ratio locked to the hero image's true pixel dimensions (2400x1020)
   so it's never cropped or stretched differently at different window
   sizes, the container always matches the image's native proportions */
.hero-full{position:relative;width:100%;margin-top:68px;aspect-ratio:2400/1020;overflow:hidden}
.hero-full > img{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(46,25,48,.82) 0%, rgba(46,25,48,.28) 38%, rgba(46,25,48,0) 62%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 60px 64px;color:var(--snow);max-width:1360px;margin:0 auto}
.hero-copy .eyebrow{color:var(--pink);margin-bottom:16px;display:block}
.hero-copy h1{font-weight:600;font-size:clamp(26px,3.6vw,54px);line-height:1.12;letter-spacing:-.02em;color:var(--snow)}
@media (min-width:700px){.hero-copy h1{white-space:nowrap}}
.hero-copy .hero-cta{display:inline-block;margin-top:26px;padding:14.5px 30px;border:1.5px solid var(--snow);border-radius:100px;color:var(--snow);font-family:inherit;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:none;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.hero-copy .hero-cta:hover{background:var(--snow);color:var(--plum)}
@media (max-width:900px){.hero-full{margin-top:60px}.hero-copy{padding:0 28px 44px}}
/* below ~680px the hero's 2400x1020 ratio becomes too short to hold the
   overlaid title/CTA legibly. Rather than crop the image (which would
   break the "always show the full frame" rule) or shrink the text past
   readability, the copy drops out of the overlay and sits in its own
   block below the image, still full width, still no cropping. */
@media (max-width:680px){
  .hero-full{margin-top:56px;height:auto;aspect-ratio:auto;display:block;overflow:visible}
  .hero-full > img{height:auto;aspect-ratio:2400/1020;object-fit:contain}
  .hero-scrim{display:none}
  .hero-copy{position:static;background:var(--plum);padding:36px 22px 46px;max-width:none;margin:0}
}

/* click-to-play video modal (used by the homepage Showreel button, and any
   future data-yt-modal trigger), a centred lightbox, not an inline embed */
.yt-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(20,12,17,.92);padding:24px}
.yt-modal.open{display:flex}
.yt-modal-inner{position:relative;width:100%;max-width:1100px;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.yt-modal-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-modal-close{position:absolute;top:-46px;right:0;width:36px;height:36px;border:1.5px solid var(--snow);border-radius:50%;background:none;color:var(--snow);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.yt-modal-close:hover{background:var(--snow);color:var(--plum)}
@media(max-width:700px){.yt-modal-close{top:-42px}}

/* image lightbox, click-to-fullsize for case study photos */
img.lb-trigger{cursor:zoom-in}
.img-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(20,12,17,.92);padding:40px}
.img-modal.open{display:flex}
.img-modal img{max-width:100%;max-height:100%;border-radius:8px;display:block;object-fit:contain}
.img-modal-close{position:fixed;top:24px;right:28px;width:40px;height:40px;border:1.5px solid var(--snow);border-radius:50%;background:none;color:var(--snow);cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:501}
.img-modal-close:hover{background:var(--snow);color:var(--plum)}
@media(max-width:700px){.img-modal{padding:20px}.img-modal-close{top:14px;right:16px}}

/* interior page hero (About / Films / Social & Ads / Press / Contact) */
.page-hero{max-width:1360px;margin:0 auto;padding:170px 24px 0}
.page-hero .eyebrow{color:var(--rose);margin-bottom:18px;display:block}
.page-hero h1{font-weight:600;color:var(--plum);font-size:clamp(30px,3.8vw,78px);letter-spacing:-.02em;line-height:1.08}
.page-hero .intro{font-size:clamp(15px,1.15vw,22px);line-height:1.75;color:var(--ink);margin-top:22px}
.back-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);
}
.back-link:hover{color:var(--plum)}

/* showreel */
.reel-wrap{max-width:1360px;margin:52px auto 0;padding:0 24px}
.reel{aspect-ratio:2.39/1;min-height:340px;cursor:pointer;transform-origin:center top;will-change:transform}
.reel:hover img{transform:scale(1.02)}
.reel .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:94px;height:94px;border-radius:50%;background:var(--snow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease),background .4s var(--ease);pointer-events:none;
}
.reel:hover .play{transform:translate(-50%,-50%) scale(1.1);background:var(--plum)}
.reel .play svg{width:26px;height:26px;fill:var(--plum);margin-left:4px;transition:fill .4s var(--ease)}
.reel:hover .play svg{fill:var(--snow)}
.reel.playing .play{opacity:0}
.reel-caption{
  max-width:1360px;margin:14px auto 0;padding:0 28px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--rose);
}

/* laurel grid - real award laurels, reveal on scroll, confetti on hover */
.laurel-grid{max-width:1360px;margin:0 auto;padding:40px 24px 0;display:grid;grid-template-columns:repeat(7,1fr);gap:26px 20px}
.laurel-item{position:relative;overflow:visible;border-radius:12px;cursor:pointer;max-width:110px;margin:0 auto}
.laurel-item img{transition:transform .4s var(--ease);pointer-events:none}
.laurel-item:hover img{transform:scale(1.02)}
.confetti-piece{
  position:absolute;width:var(--cs,13px);height:var(--cs,13px);
  pointer-events:none;z-index:40;
  opacity:0;transform:scale(0) rotate(0deg);
  transition:opacity .3s ease-out,transform .6s cubic-bezier(.34,1.76,.64,1);
}
.confetti-piece.pop{opacity:1;transform:scale(1) rotate(var(--cr,0deg))}
.confetti-inner{display:block;width:100%;height:100%;animation:confetti-tumble 1.6s ease-in-out infinite}
.confetti-piece.landed .confetti-inner{animation-play-state:paused}
@keyframes confetti-tumble{
  0%{transform:translateX(0) rotate(0deg) scaleX(1)}
  25%{transform:translateX(11px) rotate(95deg) scaleX(.35)}
  50%{transform:translateX(-5px) rotate(180deg) scaleX(1)}
  75%{transform:translateX(11px) rotate(275deg) scaleX(.35)}
  100%{transform:translateX(0) rotate(360deg) scaleX(1)}
}
@media (max-width:900px){.laurel-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:520px){.laurel-grid{grid-template-columns:repeat(4,1fr);gap:16px 12px}}

/* section head */
/* one consistent spacing rule for the gap above every homepage section
   heading, applied everywhere via .shead so the rhythm between sections
   reads the same throughout (About, laurels, films, ads, AI productions) */
.shead{max-width:1360px;margin:0 auto;padding:100px 24px 50px}
.shead h2{font-weight:600;color:var(--plum);font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em;line-height:1.08}
.shead h2 .accent{color:var(--rose)}
.shead .sub{margin-top:16px;font-size:16px;line-height:1.7;color:var(--ink);max-width:62ch}
.shead-link{display:inline-block;text-decoration:none}
.shead-link:hover h2{opacity:.75}
.shead-link h2{transition:opacity .3s var(--ease)}

/* films, A4 posters */
.films{max-width:1360px;margin:0 auto;padding:0 24px}
.film{
  display:grid;grid-template-columns:minmax(300px,460px) 1fr;
  gap:64px;align-items:center;margin-bottom:140px;
}
.poster{aspect-ratio:210/297;display:block;overflow:hidden;border-radius:var(--r);border:1px solid rgba(46,25,48,.1);transition:transform .5s var(--ease)}
.poster img{border-radius:calc(var(--r) - 1px)}
.poster:hover{transform:translateY(-6px)}
.poster:hover img{transform:scale(1.02)}
.film-info .kicker{color:var(--rose);margin-bottom:16px}
.film-info h3{font-weight:600;color:var(--plum);font-size:clamp(26px,3vw,44px);letter-spacing:-.02em;line-height:1.08;margin-bottom:14px}
.film-info .byline{font-weight:500;font-size:16px;color:var(--rose);margin-bottom:20px}
.film-info .synopsis{font-size:16px;line-height:1.75;color:var(--ink);max-width:52ch;margin-bottom:24px}

/* homepage films, posters in a row, info reveals on hover */
.films-row{max-width:1360px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.film-tile{position:relative;display:block;aspect-ratio:210/297;border-radius:var(--r);overflow:hidden}
.film-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.film-tile:hover img{transform:scale(1.05)}
.film-tile-card{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;
  background:linear-gradient(0deg, rgba(46,25,48,.94) 0%, rgba(46,25,48,.55) 55%, rgba(46,25,48,0) 100%);
  color:var(--snow);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.film-tile:hover .film-tile-card{opacity:1;transform:none}
.film-tile-card .kicker{color:var(--pink);margin-bottom:10px}
.film-tile-card h3{font-weight:600;font-size:21px;margin-bottom:10px;color:var(--snow)}
.film-tile-card p{font-size:13px;line-height:1.6;color:#EBD3E0;margin-bottom:14px}
.film-tile-card .watch-mini{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--snow)}
@media (max-width:900px){.films-row{grid-template-columns:1fr}}
.chips{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:28px}
.chip{font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);padding:0}
.watch{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);
  background:transparent;border:1.5px solid var(--plum);border-radius:100px;padding:14.5px 28px;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.watch:hover{background:var(--plum);color:var(--snow);transform:translateY(-2px)}

/* film detail page */
.film-detail{max-width:1360px;margin:0 auto;padding:60px 24px 0;display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:70px}
.film-detail .poster{width:100%}
.film-detail .fd-body h2{font-weight:600;color:var(--plum);font-size:clamp(28px,3.4vw,46px);letter-spacing:-.02em;line-height:1.08;margin-bottom:16px}
.film-detail .fd-body .tag{color:var(--rose);font-weight:500;font-size:16px;margin-bottom:22px}
.film-detail .fd-body .lede{font-weight:600;font-size:19px;line-height:1.6;color:var(--plum);margin-bottom:20px}
.film-detail .fd-body p{font-size:16px;line-height:1.8;color:var(--ink);margin-bottom:18px;max-width:62ch}
.film-detail .fd-body h4{color:var(--rose);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:30px 0 12px}
@media (max-width:900px){.film-detail{grid-template-columns:1fr}}

.video-block{max-width:1360px;margin:110px auto 0;padding:0 24px}
.video-frame{aspect-ratio:16/9;position:relative}
.video-frame video{width:100%;height:100%;object-fit:cover;border-radius:var(--r);background:#000}

.stills-grid{max-width:1360px;margin:90px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stills-grid .media{aspect-ratio:3/2}
@media (max-width:900px){.stills-grid{grid-template-columns:1fr}}

.film-nav{max-width:1360px;margin:80px auto 0;padding:32px 24px;border-top:1px solid rgba(46,25,48,.1);display:flex;justify-content:space-between;gap:20px}
.film-nav a{font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}
.film-nav a:hover{color:var(--rose)}

/* ads */
.ads{max-width:1360px;margin:0 auto;padding:0 24px}
.ads-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ad-item .media{aspect-ratio:9/16}
.ad-item:hover img{transform:scale(1.02)}
.ad-item figcaption{display:flex;justify-content:space-between;gap:14px;padding:14px 6px 0;align-items:baseline}
.ad-item .name{font-weight:600;font-size:16px;color:var(--plum)}
.ad-item .cat{color:var(--rose)}
.more-row{text-align:center;padding:52px 0 0}

/* AI Productions tiles, shared between the AI Productions landing page
   and the homepage teaser section */
.aip-row{max-width:1360px;margin:0 auto;padding:0 24px 40px;display:grid;grid-template-columns:1fr;gap:24px}
.aip-tile{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden}
.aip-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.aip-tile:hover img{transform:scale(1.04)}
.aip-tile-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;background:linear-gradient(0deg, rgba(46,25,48,.92) 0%, rgba(46,25,48,.5) 48%, rgba(46,25,48,.05) 100%);color:var(--snow)}
.aip-tile-card .kicker{margin-bottom:10px}
.aip-tile-card h3{font-size:clamp(24px,2.4vw,34px);margin:0 0 12px}
.aip-tile-card p{font-size:15px;line-height:1.6;color:rgba(243,231,237,.85);max-width:42ch;margin-bottom:16px}
@media(max-width:800px){.aip-row{grid-template-columns:1fr}}

.link-plain{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);
  border-bottom:2px solid var(--rose);padding-bottom:6px;
  transition:color .3s,gap .35s var(--ease),border-color .3s;
}
.link-plain:hover{color:var(--rose);border-color:var(--rose);gap:16px}

/* campaign case study (Social & Ads page) */
.campaign{max-width:1360px;margin:0 auto;padding:0 24px}
.case{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:150px}
.case .shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.case .shots .media{aspect-ratio:4/5}
.case .shots .media:only-child{grid-column:1/-1;aspect-ratio:16/10}
.case-info .kicker{color:var(--rose);margin-bottom:14px}
.case-info h3{font-weight:600;color:var(--plum);font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;margin-bottom:16px}
.case-info p{font-size:15.5px;line-height:1.75;color:var(--ink);margin-bottom:14px}
@media (max-width:900px){.case{grid-template-columns:1fr}.case:nth-child(even) .shots{order:2}}

/* featured case study, used for larger, single-project spotlights
   (e.g. the CatMan campaign at the top of Social & Ads) */
.feature-case{max-width:1360px;margin:0 auto 150px;padding:0 24px;display:grid;grid-template-columns:1fr .62fr;gap:56px;align-items:center}
.feature-media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;max-width:380px}
.feature-media img{width:100%;height:100%;object-fit:cover;display:block}
.feature-badge{position:absolute;top:24px;left:24px;background:rgba(10,20,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:11px 18px;border-radius:100px;display:inline-flex;align-items:center}
.feature-badge img{width:14px;height:19px;display:block}
.feature-info .kicker{color:var(--rose);margin-bottom:14px}
.feature-info h2{font-weight:600;color:var(--plum);font-size:clamp(28px,3vw,42px);letter-spacing:-.02em;margin-bottom:18px}
.feature-info p{font-size:16px;line-height:1.8;color:var(--ink);margin-bottom:16px}
.feature-cta{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:14.5px 30px;border-radius:100px;background:var(--plum);color:var(--snow);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:background .3s var(--ease),transform .3s var(--ease)}
.feature-cta:hover{background:var(--rose);transform:translateY(-2px)}
@media (max-width:900px){.feature-case{grid-template-columns:1fr;gap:26px}.feature-media{max-width:340px;margin:0 auto}}

.more-grid{max-width:1360px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.more-grid .media{aspect-ratio:4/5}
.more-grid figcaption{padding:10px 4px 0;font-weight:600;font-size:13px;color:var(--plum)}
.more-grid figcaption span{display:block;font-weight:500;color:var(--rose);font-size:12px;margin-top:2px}
@media (max-width:900px){.more-grid{grid-template-columns:repeat(2,1fr)}}

/* press */
.press{max-width:1360px;margin:0 auto;padding:0 24px}
.press-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.press-card{
  background:var(--snow);border:1px solid rgba(46,25,48,.12);border-radius:var(--r);padding:34px;
  display:flex;flex-direction:column;gap:16px;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.press-card:hover{transform:translateY(-6px);border-color:var(--rose)}
.press-card .date{color:var(--rose)}
.press-card h3{font-weight:600;font-size:21px;line-height:1.3;color:var(--plum)}
.press-card p{font-size:15px;line-height:1.65;color:var(--ink);flex:1}
.press-card .read{font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}
@media (max-width:900px){.press-list{grid-template-columns:1fr}}

/* press article detail */
.article{max-width:840px;margin:60px auto 0;padding:0 24px}
.article .date{color:var(--rose);display:block;margin-bottom:18px}
.article h1{font-weight:600;color:var(--plum);font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;line-height:1.15;margin-bottom:26px}
.article p{font-size:17px;line-height:1.85;color:var(--ink);margin-bottom:20px}
.article .byline{color:var(--rose);font-weight:600;font-size:14px;margin-bottom:36px;display:block}
.article .external{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;
  font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);
  background:transparent;border:1.5px solid var(--plum);border-radius:100px;padding:14.5px 28px;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.article .external:hover{background:var(--plum);color:var(--snow);transform:translateY(-2px)}

/* about */
.about-band{background:var(--snow);margin-top:0;padding:110px 24px}
.about{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.about-photo{aspect-ratio:4/5;background:var(--snow)}
.about-photo:hover img{transform:scale(1.02)}
.about .label{color:var(--rose);margin-bottom:18px;display:block}
.about h2{font-weight:600;color:var(--plum);font-size:clamp(26px,2.8vw,38px);letter-spacing:-.02em;line-height:1.12;margin-bottom:22px}
.about p{font-size:16px;line-height:1.75;color:var(--ink);margin-bottom:16px;max-width:52ch}

/* about detail page */
.about-detail{max-width:1360px;margin:0 auto;padding:70px 24px 0;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.about-detail .about-photo{aspect-ratio:4/5;position:sticky;top:130px}
.about-detail .ad-body p{font-size:16.5px;line-height:1.85;color:var(--ink);margin-bottom:20px;max-width:60ch}
.about-detail .ad-body h3{color:var(--plum);font-weight:600;font-size:clamp(22px,2.4vw,30px);margin-bottom:20px;letter-spacing:-.02em}
.signature{width:560px;max-width:100%;margin-top:24px;opacity:.85}
@media (max-width:900px){.about-detail{grid-template-columns:1fr}.about-detail .about-photo{position:static}}

.gallery{max-width:1360px;margin:130px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.gallery .media{aspect-ratio:3/4}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* contact */
.contact{max-width:1360px;margin:0 auto;text-align:center;padding:160px 24px 50px}
.contact .label{color:var(--rose);margin-bottom:24px;display:block}
.contact h2{
  font-weight:600;color:var(--plum);
  font-size:clamp(28px,3.6vw,50px);letter-spacing:-.02em;line-height:1.15;max-width:70%;margin:0 auto;
}
.contact h2 .accent{color:var(--rose)}
.mail{
  display:inline-block;margin-top:40px;
  font-weight:600;font-size:14px;letter-spacing:.08em;color:var(--plum);
  background:transparent;border:1.5px solid var(--plum);border-radius:100px;padding:17.5px 36px;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.mail:hover{background:var(--plum);color:var(--snow);transform:translateY(-2px)}

/* contact page - split layout with photo */
.contact-split{max-width:1360px;margin:0 auto;padding:170px 24px 0;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start}
.contact-info .eyebrow{color:var(--rose);margin-bottom:18px;display:block}
.contact-info h1{font-weight:600;color:var(--plum);font-size:clamp(28px,3.4vw,54px);letter-spacing:-.02em;line-height:1.08}
.contact-info .intro{font-size:clamp(15px,1.1vw,19px);line-height:1.75;color:var(--ink);margin-top:20px;max-width:92%}
.contact-photo{aspect-ratio:4/5;position:sticky;top:130px}
@media (max-width:900px){
  .contact-split{grid-template-columns:1fr;padding-top:140px}
  .contact-photo{position:static;max-width:420px;margin:0 auto}
}

/* contact form (Netlify) */
.contact-form-wrap{max-width:640px;margin:70px auto 0;padding:0 24px;text-align:left}
.contact-form-wrap.inline{max-width:none;margin:40px 0 0;padding:0}
.form-row{margin-bottom:20px}
.form-row label{display:block;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.form-row input,.form-row textarea,.form-row select{
  width:100%;font-family:var(--font);font-size:16px;color:var(--ink);
  background:var(--blush);border:2px solid transparent;border-radius:14px;padding:16px 18px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form-row textarea{resize:vertical;min-height:160px}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--rose);background:var(--snow)}
.form-submit{
  font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);
  background:transparent;border:1.5px solid var(--plum);border-radius:100px;padding:16.5px 40px;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.form-submit:hover{background:var(--plum);color:var(--snow);transform:translateY(-2px)}
.form-note{font-size:13px;color:var(--rose);margin-top:16px}
.honeypot{position:absolute;left:-9999px;top:-9999px}
.success-box{max-width:640px;margin:70px auto 0;padding:44px 24px;text-align:center;background:transparent;border:1px solid rgba(46,25,48,.14);border-radius:var(--r)}
.success-box h2{color:var(--plum);font-weight:600;font-size:28px;margin-bottom:12px}
.success-box p{color:var(--ink);line-height:1.7}

.contact-alt{max-width:640px;margin:36px auto 0;padding:0 24px;text-align:center;color:var(--ink);font-size:15px;line-height:1.8}
.contact-alt a{color:var(--plum);font-weight:600;border-bottom:2px solid var(--rose)}
.contact-alt.inline{max-width:none;margin:24px 0 0;padding:0;text-align:left}

footer{position:relative;z-index:45;background:var(--plum);margin-top:150px;border-top:2px solid var(--rose)}
.footer-inner{
  max-width:1360px;margin:0 auto;padding:40px 24px 48px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-weight:500;font-size:13px;color:var(--rose);
}
.footer-inner a:hover{color:var(--pink)}
.footer-social{display:inline-flex;align-items:center;justify-content:center;color:inherit;transition:color .3s var(--ease),transform .3s var(--ease)}
.footer-social:hover{color:var(--pink);transform:translateY(-2px)}
@media (max-width:600px){.footer-inner{flex-direction:column;text-align:center;gap:14px}}

@media (max-width:900px){
  .nav-inner{padding:18px 20px}
  nav.scrolled .nav-inner{padding:14px 20px}
  .hero{padding-top:140px}
  .page-hero{padding-top:140px}
  .reel{aspect-ratio:16/10;min-height:0}
  .film{grid-template-columns:1fr;gap:34px;margin-bottom:90px}
  .poster{max-width:420px;margin:0 auto}
  .ads-grid,.press-list{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:40px}
  .case .shots{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  .hero{padding-top:120px}
  .page-hero{padding-top:120px}
  .shead{padding:80px 20px 34px}
  .about-band{padding:70px 20px}
  .contact{padding:100px 20px 30px}
  .films,.ads,.press,.campaign,.about-detail,.gallery,.laurel-grid,.stills-grid,.video-block,.more-grid,.film-detail,.film-nav,.contact-form-wrap,.article{padding-left:18px;padding-right:18px}
  .case{grid-template-columns:1fr;gap:28px;margin-bottom:80px}
  .case .shots{grid-template-columns:1fr 1fr}
  .more-grid{grid-template-columns:1fr 1fr;gap:12px}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  .stills-grid{grid-template-columns:1fr;gap:14px}
  .about-detail{padding-top:50px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   FONT NOTE, when Nicole provides licensed webfont files,
   replace the Google Fonts <link> in each page's <head> with:
   @font-face{ font-family:'Arch'; src:url('/assets/fonts/Arch-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
   (repeat per weight) and change --font above to 'Arch'.
============================================================ */