:root{
  --blush:#F8E7E4;
  --paper:#FFF8F5;
  --ink:#2A1A2B;
  --ink-soft:#5B4A5C;
  --berry:#B8304F;
  --butter:#F4D468;
  --sage:#B9C7AE;
  --radius:28px;
  --display:"Caprasimo","Cooper Black",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --edge:max(var(--gutter),calc((100vw - 1240px)/2));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--blush);color:var(--ink);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-size:1.5rem;margin:2rem 0 .6rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--berry);outline-offset:3px;border-radius:6px}
.berry :focus-visible{outline-color:var(--butter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:50}
.skip:focus{left:8px}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--edge);background:color-mix(in srgb,var(--blush) 88%,transparent);backdrop-filter:blur(10px)}
.wordmark{font-family:var(--display);font-size:1.4rem;text-decoration:none;margin-right:auto;color:var(--berry)}
.top nav{display:flex;gap:26px}
.top nav a{text-decoration:none;font-weight:500;font-size:.98rem}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font:600 1rem var(--body);padding:14px 26px;border-radius:999px;text-decoration:none;border:2px solid var(--ink);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--berry);border-color:var(--berry)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-small{padding:9px 20px;font-size:.95rem}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(28px,5vw,64px) var(--edge) clamp(56px,8vw,110px)}
.pill{display:inline-block;background:var(--butter);padding:6px 16px;border-radius:999px;font-weight:600;font-size:.95rem;margin-bottom:22px}
.hero h1{font-size:clamp(2.6rem,6.2vw,5.4rem);margin-bottom:24px}
.lede{font-size:1.25rem;max-width:34em;color:var(--ink-soft)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 40px}
.brands{font-size:.98rem;color:var(--ink-soft);max-width:32em;margin:0}
.brands span{font-family:var(--display);color:var(--ink);margin-right:6px}

.rainbow{position:relative;width:min(100%,460px);aspect-ratio:3/4;margin-inline:auto}
.arch{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:999px 999px 0 0}
.a1{width:112%;height:96%;background:var(--berry)}
.a2{width:100%;height:92%;background:var(--butter);bottom:0}
.a3{width:88%;height:88%;background:var(--sage)}
.a4{width:76%;height:84%;object-fit:cover;background:var(--paper)}
.sticker{position:absolute;right:-4%;bottom:7%;margin:0;background:var(--paper);padding:14px 18px;border-radius:20px;font-weight:600;font-size:.92rem;line-height:1.35;transform:rotate(4deg);box-shadow:0 8px 22px rgba(42,26,43,.14)}

@media (prefers-reduced-motion:no-preference){
  .arch{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .a1{animation-delay:.05s}.a2{animation-delay:.18s}.a3{animation-delay:.3s}.a4{animation-delay:.42s}
  @keyframes rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* blocks */
.block{padding:clamp(56px,8vw,104px) var(--edge)}
.block>*{max-width:1240px}
.block-head{width:100%;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:40px}
.block-head p{margin:0;max-width:30em;color:var(--ink-soft)}
.paper{background:var(--paper)}

/* video reel */
.reel{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.clip{margin:0}
.frame{position:relative;aspect-ratio:9/16;border-radius:999px 999px 22px 22px;overflow:hidden;background:var(--ink);box-shadow:0 0 0 6px var(--paper)}
.frame video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;border:0;background:linear-gradient(transparent 55%,rgba(42,26,43,.45));cursor:pointer;display:grid;place-items:end center;padding-bottom:9%}
.play::after{content:"";width:64px;height:64px;border-radius:50%;background:var(--butter) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%232A1A2B'/%3E%3C/svg%3E") center/34px no-repeat;transition:transform .2s}
.play:hover::after{transform:scale(1.1)}
.frame.playing .play{display:none}
.clip figcaption{margin-top:16px;font-weight:600;font-size:.98rem;line-height:1.35}

/* results */
.big-sentence{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.9rem);line-height:1.2;margin-bottom:48px;text-wrap:balance}
.big-sentence strong{font-weight:400;background:linear-gradient(transparent 58%,var(--butter) 58%);padding:0 .1em}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.proof .col{display:grid;gap:24px}
.proof .col:last-child{display:contents}
.shot{margin:0}
.shot img{width:100%;height:auto;border-radius:20px;border:1px solid rgba(42,26,43,.12)}
.shot figcaption{margin-top:12px;font-size:.95rem;font-weight:500;color:var(--ink-soft)}

/* gallery carousel */
.carousel{--per:4;--gap:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
.track{list-style:none;margin:0;padding:0;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}
.track::-webkit-scrollbar{display:none}
.track li{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start}
.track button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--radius);overflow:hidden}
.track img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);transition:transform .35s}
.track button:hover img{transform:scale(1.03)}
.car-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.car-btn svg{width:24px;height:24px}
.car-btn:hover{background:var(--berry);transform:scale(1.06)}

/* quotes */
.berry{background:var(--berry);color:#fff}
.berry .block-head p{color:#FFE3E8}
blockquote{margin:0}
blockquote footer{font-weight:700;margin-top:16px}
.quote-lead{margin-bottom:56px!important}
.quote-lead p{font-family:var(--display);font-size:clamp(1.7rem,3.8vw,3.1rem);line-height:1.18;max-width:20em;margin-bottom:0}
.quote-lead footer{color:var(--butter);font-size:1.1rem}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.quotes blockquote{background:var(--paper);color:var(--ink);padding:30px;border-radius:var(--radius)}
.quotes blockquote:nth-child(odd){border-radius:var(--radius) var(--radius) var(--radius) 4px}
.quotes blockquote:nth-child(even){border-radius:var(--radius) var(--radius) 4px var(--radius)}
.quotes p{margin:0;font-size:1.08rem}
.quotes footer{color:var(--berry)}

/* meet */
.meet{text-align:center}
.meet h2{margin:0 auto}
.meet .rainbow{margin:36px auto 0}
.meet .rainbow .frame.a4{position:absolute;aspect-ratio:auto;box-shadow:none;border-radius:999px 999px 0 0}
.meet .rainbow .frame.a4 video{height:100%}
.meet-cap{margin:20px auto 0;font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .js .meet .rainbow .arch{animation:none;clip-path:inset(100% 0 0 0)}
  .js .meet .rainbow.in .arch{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .js .meet .rainbow.in .a1{animation-delay:.05s}
  .js .meet .rainbow.in .a2{animation-delay:.18s}
  .js .meet .rainbow.in .a3{animation-delay:.3s}
  .js .meet .rainbow.in .a4{animation-delay:.42s}
}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px)}
.contact>*{max-width:560px;margin:0}
.contact-copy h2{margin-bottom:16px}
.details{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:28px 0 0}
.details dt{font-weight:700}
.details dd{margin:0}
.form{background:var(--blush);padding:clamp(22px,3vw,36px);border-radius:var(--radius)}
.form label{display:block;font-weight:600;margin-bottom:18px}
.form input,.form textarea{display:block;width:100%;margin-top:6px;padding:13px 16px;border:2px solid rgba(42,26,43,.2);border-radius:14px;background:#fff;font:400 1rem var(--body);color:var(--ink)}
.form input:focus,.form textarea:focus{border-color:var(--berry);outline:none;box-shadow:0 0 0 3px rgba(184,48,79,.25)}
.form .invalid{border-color:var(--berry)}
.form-note{margin:14px 0 0;font-size:.92rem;color:var(--ink-soft)}
.form-note.error{color:var(--berry);font-weight:600}

.foot{display:grid;gap:22px;padding:28px var(--edge) 34px;font-size:.95rem}
.foot p{margin:0}
.foot-row{display:flex;justify-content:space-between;gap:20px}
.credit{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;font-size:.9rem;color:var(--ink-soft)}
.credit img{display:block;height:30px;width:auto}
.credit-url{text-decoration:none}
.credit-url:hover{text-decoration:underline;text-underline-offset:4px}

/* lightbox */
dialog#lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
dialog#lightbox::backdrop{background:rgba(42,26,43,.92)}
dialog#lightbox[open]{display:grid;place-items:center}
#lb-img{max-width:min(92vw,900px);max-height:86vh;border-radius:var(--radius);object-fit:contain}
.lb-close,.lb-nav{position:absolute;background:var(--paper);color:var(--ink);border:0;border-radius:999px;padding:10px 20px;font:600 .95rem var(--body);cursor:pointer}
.lb-close{top:20px;right:20px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:16px}.lb-next{right:16px}

/* responsive */
@media (max-width:1000px){
  .proof{grid-template-columns:1fr 1fr}
  .proof .col{align-content:start}
  .proof .col:last-child{display:grid}
  .reel{grid-template-columns:repeat(3,1fr)}
  .carousel{--per:3}
  .top nav{display:none}
}
@media (max-width:820px){
  .hero,.contact{grid-template-columns:1fr}
  .rainbow{width:min(86%,400px);order:-1;margin-bottom:12px}
  .reel{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .quotes{grid-template-columns:1fr}
  .proof{grid-template-columns:1fr}
  .carousel{--per:2;--gap:12px;grid-template-columns:minmax(0,1fr);position:relative}
  .car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;background:rgba(42,26,43,.78)}
  .car-btn:hover{transform:translateY(-50%)}
  .car-btn.prev{left:8px}.car-btn.next{right:8px}
  .lb-nav{top:auto;bottom:20px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}