/* Vin Chee — dark editorial (studio.markkwan.com/vchee): near-black sections, full-colour images, pops of red throughout */
:root{
  --ink:#0d0d0c;
  --ink-soft:#1a1a18;
  --paper:#f4f2ee;
  --white:#fff;
  --grey:#bdbab3;
  --red:#e4462f;
  --line:rgba(13,13,12,.18);
  --line-light:rgba(255,255,255,.2);
  --display:"Cormorant",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:"DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
cite{font-style:italic}

/* Header */
.site-header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line-light);position:absolute;z-index:10;width:100%;color:var(--white)}
.brand{font:600 24px var(--display);letter-spacing:.14em}
.nav{display:flex;align-items:center;gap:28px;font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.nav a{opacity:.8;transition:opacity .25s}
.nav a:hover{opacity:1}
.nav-cta{border:1px solid var(--red);color:var(--red);padding:11px 15px;opacity:1}
.nav-cta:hover{background:var(--red);color:var(--white)}
.menu-button{display:none;background:none;border:0;color:inherit;font:inherit}

/* Hero */
.hero{position:relative;min-height:100vh;overflow:hidden;background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;padding:120px 5vw 42px}
.hero-image{position:absolute;inset:0;height:100%;object-fit:cover;object-position:50% 30%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,12,.55) 0%,rgba(13,13,12,.05) 30%,rgba(13,13,12,.25) 55%,rgba(13,13,12,.92) 100%)}
.hero-name{position:relative;z-index:1;margin:0 0 18px;text-transform:uppercase;
  font:600 clamp(64px,15vw,250px)/.82 var(--display);letter-spacing:.02em;text-shadow:0 4px 50px rgba(0,0,0,.5)}
.hero-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;border-top:1px solid var(--line-light);padding-top:26px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:600;margin:0}
.hero-tagline{font:500 clamp(24px,2.6vw,38px)/1.15 var(--display);margin:14px 0 0}
.hero-tagline em{font-style:italic;color:var(--red)}
.eyebrow i{font-style:normal;color:var(--red);margin:0 6px}
.hero-actions{display:flex;align-items:center;gap:26px}
.button{display:inline-flex;align-items:center;gap:26px;background:var(--white);color:var(--ink);padding:16px 20px;text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:.1em;white-space:nowrap;transition:background .25s,color .25s}
.button:hover{background:var(--red);color:var(--white)}
.button-light{background:var(--paper);color:var(--ink)}
.button-dark{background:var(--ink);color:var(--white)}
.button-dark:hover{background:#2a2a27}
.text-link:hover{color:var(--red)}
.text-link{font-size:12px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid;padding-bottom:5px;white-space:nowrap}

/* Marquee */
.marquee{overflow:hidden;background:var(--red);color:var(--white);padding:15px 0;white-space:nowrap}
.marquee div{display:flex;width:max-content;font-size:11px;letter-spacing:.18em;font-weight:600;animation:marquee-scroll 34s linear infinite}
.marquee:hover div{animation-play-state:paused}
.marquee i{font-style:normal;margin:0 24px}
.marquee span{display:inline-block}
@keyframes marquee-scroll{to{transform:translateX(-50%)}}

/* Witnessed by */
.witnessed{background:var(--ink);color:var(--white);padding:80px 5vw 70px}
.witnessed>.eyebrow{margin-bottom:34px;color:var(--red)}
.witness-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.witness-grid figure{margin:0}
.witness-grid h3{font:500 clamp(24px,2.6vw,38px)/1 var(--display);margin:0 0 14px}
.witness-grid img{aspect-ratio:1;object-position:50% 25%;height:100%;object-fit:cover;transition:transform .5s}
.witness-grid figure:hover img{transform:scale(1.02)}
.witness-video{position:relative;display:block;overflow:hidden}
.witness-video .play{position:absolute;left:18px;bottom:18px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--red);color:var(--white);font-size:14px;padding-left:3px}

/* Sections */
.section{padding:110px 6vw}
.section-kicker{display:grid;grid-template-columns:60px auto;align-items:center;border-bottom:1px solid var(--line-light);padding-bottom:15px}
.section-kicker span,.section-kicker p{font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin:0}
.section-kicker span{color:var(--red)}
.section h2,.story h2,.booking h2,.testimonials-title{font-family:var(--display);font-weight:500;letter-spacing:-.02em}
.section h2 em,.story h2 em{font-style:italic;font-weight:400;color:var(--red)}

/* Experience */
.experience{background:var(--ink-soft);color:var(--white)}
.experience-intro{margin-top:60px;max-width:1100px}
.experience-intro h2{font-size:clamp(58px,8vw,124px);line-height:.9;margin:0}
.experience-sub{font:500 clamp(22px,2.4vw,34px)/1.2 var(--display);margin:18px 0 0}
.experience-lead{font:400 clamp(26px,3vw,44px)/1.28 var(--display);margin:50px 0 0}
.experience-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-light);margin-top:80px}
.experience-card{padding:38px;min-height:390px;display:flex;flex-direction:column}
.experience-card+article{border-left:1px solid var(--line-light)}
.experience-card>span{font-size:10px;letter-spacing:.14em;color:var(--red)}
.experience-card h3{font:500 44px/1 var(--display);margin:70px 0 18px}
.experience-card p{font-size:14px;line-height:1.7}
.experience-card a:hover{color:var(--red)}
.experience-card a{margin-top:auto;font-size:10px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid;padding-bottom:4px;align-self:flex-start}
.experience-card.feature{background:var(--ink);color:var(--white)}
.experience-card.feature a{color:var(--red)}

/* Testimonials */
.testimonials{background:var(--ink);color:var(--white);text-align:center;padding:110px 6vw}
.testimonials-title{font-size:clamp(64px,10vw,160px);line-height:.9;margin:0 0 60px;color:var(--white)}
.testimonials-title:after{content:"";display:block;width:64px;height:2px;background:var(--red);margin:26px auto 0}
.reaction-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 34px;margin-bottom:70px}
.reaction{margin:0;font:500 clamp(20px,2vw,28px)/1.3 var(--display);border:1px solid rgba(228,70,47,.55);padding:14px 22px}
.reaction:nth-child(1){transform:rotate(-1.5deg)}
.reaction:nth-child(2){transform:rotate(1deg)}
.reaction:nth-child(3){transform:rotate(-.5deg)}
.testimonials blockquote{font:500 clamp(36px,5vw,76px)/1.05 var(--display);margin:0 auto;max-width:18ch}
.testimonials blockquote em{font-style:italic;font-weight:400;color:var(--red)}
.attribution{font:600 clamp(20px,1.8vw,26px)/1 var(--display);text-transform:uppercase;letter-spacing:.14em;color:var(--white);margin:26px 0 0}
.press-list{margin-top:80px;border-top:1px solid var(--line-light);padding-top:26px}
.press-list>p{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--grey);margin:0 0 18px}
.logo-float{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-float:hover .logo-track{animation-play-state:paused}
.logo-track{display:flex;align-items:center;gap:22px;margin:0;padding:14px 11px;list-style:none;flex-shrink:0;animation:logo-scroll 38s linear infinite}
.logo-track li{flex-shrink:0;width:190px;height:96px;display:grid;place-items:center;background:var(--white);border-radius:6px;padding:14px 20px;animation:logo-bob 5s ease-in-out infinite}
.logo-track li:nth-child(even){animation-delay:-2.5s}
.logo-track li:nth-child(3n){animation-delay:-1.2s}
.logo-track img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
@keyframes logo-scroll{to{transform:translateX(-100%)}}
@keyframes logo-bob{50%{transform:translateY(-8px)}}

/* About */
.story{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--white)}
.story-image{position:relative;min-height:760px}
.story-image img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:68% 40%}
.story-copy{padding:110px 7vw;display:flex;flex-direction:column;justify-content:center}
.story-copy h2{font-size:clamp(54px,6vw,96px);line-height:.92;margin:22px 0 30px}
.story-copy>.eyebrow{color:var(--grey)}
.story-copy>p{color:#cfccc4;line-height:1.75;margin:0 0 16px}
.story-copy .lead{font:500 clamp(22px,2vw,28px)/1.35 var(--display);color:var(--white)}
.story-copy .button{align-self:flex-start;margin-top:20px}

/* Press: FOX 11 photo above theSun clipping */
.press{background:var(--ink-soft);color:var(--white)}
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:60px}
.press-grid figure{aspect-ratio:4/3}
.press-grid figure{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.press-grid img{height:100%;object-fit:cover}
.press-photo img{object-position:50% 22%}
.press-clip img{object-fit:contain}
figcaption{position:absolute;left:12px;bottom:12px;background:var(--red);color:var(--white);padding:8px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.1em}

/* Gallery */
.gallery{background:var(--ink)}
.gallery-heading{margin:60px 0}
.gallery-heading h2{font-size:clamp(58px,8vw,124px);line-height:.9;margin:0}
.gallery-grid{columns:3 280px;column-gap:18px}
.gallery-item{display:block;margin:0 0 18px;overflow:hidden;break-inside:avoid;cursor:zoom-in}
.gallery-item img{transition:transform .5s}
.gallery-item:hover img{transform:scale(1.03)}
.lightbox{max-width:92vw;max-height:92vh;padding:0;border:0;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{max-width:92vw;max-height:88vh;width:auto;height:auto}
.lightbox-close{position:absolute;top:-44px;right:0;background:none;border:0;color:var(--white);font-size:34px;line-height:1;cursor:pointer}

/* Inquiries — the red finale */
.booking{background:var(--red);color:var(--white);padding:110px 6vw 120px;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.booking h2{font-size:clamp(64px,9vw,150px);line-height:.85;margin:0 0 26px}
.booking-lede{font:500 clamp(48px,5.6vw,92px)/1 var(--display);letter-spacing:-.02em;max-width:13ch;margin:0}
.booking-lede em{font-style:italic;color:var(--ink)}
.booking-meta{font-size:10px;text-transform:uppercase;letter-spacing:.16em;margin-top:30px}
.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.booking-form .span-2{grid-column:1/-1}
.booking-form label{display:grid;gap:7px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.booking-form input,.booking-form textarea{font:15px/1.5 "DM Sans",sans-serif;color:var(--white);background:rgba(0,0,0,.12);border:0;border-bottom:1px solid rgba(255,255,255,.5);padding:13px 8px;width:100%;resize:vertical;border-radius:0}
.booking-form input::placeholder,.booking-form textarea::placeholder{color:rgba(255,255,255,.7)}
.booking-form input:focus,.booking-form textarea:focus{outline:0;border-bottom-color:var(--ink)}
.booking-form input[aria-invalid=true],.booking-form textarea[aria-invalid=true]{border-bottom:2px solid var(--ink);background:rgba(0,0,0,.22)}
.booking-form button[type=submit]{justify-content:space-between;border:0;border-radius:0;appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;text-align:left;margin-top:6px}
.booking-form button[disabled]{opacity:.55;cursor:not-allowed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:13px;line-height:1.6;margin:0;min-height:1em}
.form-status.error{color:var(--ink);font-weight:600}
.form-status.success{color:var(--white);font-weight:600}

/* Footer */
footer{background:var(--ink);color:var(--white);border-top:1px solid var(--line-light);padding:46px 5vw;display:grid;grid-template-columns:1fr 1fr auto;gap:25px;align-items:center}
footer p,footer small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin:0}
footer div{display:flex;gap:20px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
footer small{grid-column:1/-1;color:#8e8b84}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  .menu-button{display:block;text-transform:uppercase;font-size:11px;letter-spacing:.1em}
  .nav{display:none;position:absolute;top:78px;left:0;right:0;padding:25px 4vw;background:var(--ink);flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}
  .marquee div{animation-duration:22s}
  .hero{min-height:88vh}
  .hero-image{object-position:58% 30%}
  .witness-grid{grid-template-columns:1fr 1fr}
  .witness-grid figure:last-child{grid-column:1/-1}
  .story,.booking,.press-grid{grid-template-columns:1fr}
  .story-image{min-height:460px}
  .experience-grid{grid-template-columns:1fr}
  .experience-card+article{border-left:0;border-top:1px solid var(--line-light)}
  footer{grid-template-columns:1fr auto}
}
@media(max-width:600px){
  .section{padding:80px 20px}
  .hero{padding:110px 20px 34px}
  .witnessed,.testimonials,.booking{padding-left:20px;padding-right:20px}
  .story-copy{padding:75px 20px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .witness-grid{grid-template-columns:1fr}
  .witness-grid figure:last-child{grid-column:auto}
  .experience-card{min-height:330px;padding:28px}
  .booking-form{grid-template-columns:1fr}
  .booking-form .span-2{grid-column:auto}
  footer{grid-template-columns:1fr}
  footer div{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.marquee div,.logo-track,.logo-track li{animation:none}.reveal{opacity:1;transform:none}}