@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

@custom-variant dark (&:is(.dark *));
@theme inline {
  --color-background: var(--background); --color-foreground: var(--foreground);
  --color-card: var(--card); --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring);
  --font-sans: var(--font-archivo); --font-heading: var(--font-barlow);
  --radius-sm: .2rem; --radius-md: .35rem; --radius-lg: .5rem; --radius-xl: .7rem;
}

:root {
  --red: #f52222; --ink: #090909; --paper: #f2f0eb; --white: #fff;
  --background: #f2f0eb; --foreground: #090909; --card: #fff; --card-foreground: #090909;
  --primary: #f52222; --primary-foreground: #fff; --secondary: #171717; --secondary-foreground: #fff;
  --muted: #e2dfd8; --muted-foreground: #64615b; --accent: #f52222; --accent-foreground: #fff;
  --border: #bdb9b0; --input: #8c8880; --ring: #f52222; --radius: .4rem;
}
.dark { --background: #090909; --foreground: #fff; --card: #171717; --card-foreground: #fff; --primary: #f52222; --primary-foreground: #fff; --secondary: #252525; --secondary-foreground: #fff; --muted: #252525; --muted-foreground: #aaa; --accent: #f52222; --accent-foreground: #fff; --border: #393939; --input: #555; --ring: #f52222; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-archivo), sans-serif; }
a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; }

.brand-logo { display: block; width: 340px; height: auto; object-fit: contain; }
.footer-logo { width: 270px; }
.site-header { position: absolute; z-index: 20; inset: 0 0 auto; height: 162px; padding: 0 clamp(24px, 6vw, 96px); color: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #ffffff2b; }
.nav { display: flex; gap: 48px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.nav a { opacity: .72; transition: opacity .2s; } .nav a:hover { opacity: 1; }
.nav-quote { justify-self: end; display: flex; align-items: center; gap: 13px; padding: 17px 22px; border: 1px solid #ffffff55; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.nav-quote svg { width: 16px; } .menu-button { display: none; color: #fff; border: 0; background: none; }

.hero { min-height: 880px; height: 100svh; position: relative; overflow: hidden; padding: 218px clamp(24px, 7vw, 112px) 100px; background: var(--ink); color: #fff; display: grid; grid-template-columns: 58% 42%; }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero-copy { position: relative; z-index: 2; align-self: center; }
.kicker { display: flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.kicker span { display: inline-block; width: 30px; height: 2px; background: var(--red); } .kicker.dark span { background: var(--ink); }
.hero h1, .section-intro h2, .about-section h2, .quote-copy h2 { margin: 28px 0; font: 800 clamp(48px, 5vw, 84px)/.88 var(--font-barlow), sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.hero h1 em { color: var(--red); font-style: normal; -webkit-text-stroke: 1px #ff7777; }
.intro { max-width: 610px; color: #b9b6b1; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.primary-button { display: inline-flex; align-items: center; gap: 42px; padding: 17px 20px; color: #fff; background: var(--red); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; transition: transform .2s; }
.primary-button:hover { transform: translateY(-3px); } .primary-button svg, .secondary-link svg { width: 17px; }
.secondary-link { display: flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid #ffffff66; font-size: 12px; }
.hero-visual { position: relative; place-self: center; width: min(40vw, 620px); height: min(40vw, 620px); margin-left: -4vw; overflow: hidden; border: 1px solid #ffffff24; box-shadow: 35px 35px 90px #000; }
.hero-visual::before { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, #090909 0%, #090909dc 7%, #09090978 19%, transparent 42%); }
.hero-visual::after { content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 48%, #090909d0 100%); }
.hero-collage { width: 100%; height: 100%; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; background: #080808; }
.hero-photo { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; filter: saturate(.9) contrast(1.08); }
.hero-collage .hero-photo:nth-child(1) { object-position: 47% center; }
.hero-collage .hero-photo:nth-child(2) { object-position: 55% center; }
.hero-collage .hero-photo:nth-child(3), .hero-collage .hero-photo:nth-child(4) { object-position: center; }
.stage-light { position: absolute; top: -10%; width: 90px; height: 120%; filter: blur(8px); opacity: .13; background: linear-gradient(#f52222, transparent 75%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: top; }
.light-one { left: 20%; transform: rotate(-13deg); } .light-two { right: 15%; transform: rotate(14deg); }
.speaker-stack { position: absolute; inset: auto 17% 8%; height: 62%; background: linear-gradient(145deg, #292929, #111); border: 1px solid #444; display: grid; padding: 11%; gap: 8%; transform: perspective(900px) rotateY(-9deg); box-shadow: 30px 25px 70px #000; }
.speaker-stack span { display: block; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #050505 0 10%, #171717 11% 20%, #060606 21% 27%); border: 1px solid #383838; }
.sound-lines { position: absolute; z-index: 2; inset: 38% 0 25%; display: flex; justify-content: space-between; align-items: center; }
.sound-lines i { display: block; width: 3px; background: #ffffff9e; animation: beat 1.5s ease-in-out infinite alternate; } .sound-lines i:nth-child(3n) { background: var(--red); }
.hero-visual p { position: absolute; z-index: 3; right: 24px; bottom: 20px; color: #fff; font-size: 9px; line-height: 1.8; letter-spacing: .16em; text-align: right; text-transform: uppercase; }
.hero-foot { position: absolute; bottom: 35px; left: clamp(24px, 7vw, 112px); right: clamp(24px, 7vw, 112px); display: flex; justify-content: space-between; color: #797671; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.hero-foot span:last-child { display: flex; align-items: center; gap: 7px; } .hero-foot svg { width: 14px; }
@keyframes beat { to { transform: scaleY(.7); opacity: .55; } }

.services-section { padding: 125px clamp(24px, 7vw, 112px); }
.section-intro { display: grid; grid-template-columns: .8fr 2fr 1fr; gap: 42px; align-items: end; margin-bottom: 70px; }
.section-intro h2 { margin: 0; font-size: clamp(52px, 6.2vw, 96px); }
.section-intro h2 em { color: var(--red); font-style: normal; }
.section-intro > p:last-child { margin: 0; max-width: 360px; color: #68645e; font-size: 14px; line-height: 1.75; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #aaa59a; border-left: 1px solid #aaa59a; }
.service-card { position: relative; isolation: isolate; min-height: 360px; padding: 25px; overflow: hidden; color: #fff; border-right: 1px solid #aaa59a; border-bottom: 1px solid #aaa59a; display: flex; flex-direction: column; background-color: #111; background-position: center; background-size: cover; transition: transform .25s; }
.service-card::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #07070770 0%, #070707dc 58%, #070707f7 100%); transition: background .3s; }
.service-card:hover { color: #fff; transform: translateY(-5px); }
.service-card:hover::before { background: linear-gradient(180deg, #0909094a 0%, #090909c7 52%, #090909f3 100%); }
.service-card:nth-child(1) { background-image: url('../public/images/outdoor-concert.jpg'); }
.service-card:nth-child(2) { background-image: url('../public/images/theatre-stage.jpg'); }
.service-card:nth-child(3) { background-image: url('../public/images/corporate-av.jpg'); }
.service-card:nth-child(4) { background-image: url('../public/images/festival-production.jpg'); }
.service-card:nth-child(5) { background-image: url('../public/images/live-video-production.jpg'); }
.service-card:nth-child(6) { background-image: url('../public/images/outdoor-stage-crowd.jpg'); }
.service-card:nth-child(7) { background-image: url('../public/images/banquet-production.jpg'); }
.service-card:nth-child(8) { background-image: url('../public/images/indoor-concert.jpg'); }
.card-top { display: flex; justify-content: flex-end; color: #fff; font-size: 10px; text-shadow: 0 1px 5px #000; } .card-top > span { display: none; } .card-top svg { width: 25px; color: var(--red); stroke-width: 1.5; }
.service-card h3 { margin: auto 0 14px; font: 800 33px/.95 var(--font-barlow), sans-serif; text-transform: uppercase; }
.service-card p { min-height: 82px; margin: 0; color: #ddd; font-size: 12px; line-height: 1.7; text-shadow: 0 1px 5px #000; } .service-card:hover p { color: #fff; }
.service-card a { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 15px; border-top: 1px solid currentColor; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; } .service-card a svg { width: 15px; }

.work-section { padding: 125px clamp(24px, 7vw, 112px); color: #fff; background: #111; }
.work-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 8vw; align-items: end; margin-bottom: 55px; }
.work-heading h2 { margin: 24px 0 0; font: 800 clamp(58px, 7vw, 108px)/.84 var(--font-barlow), sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.work-heading h2 em { color: var(--red); font-style: normal; }
.work-heading > p { margin: 0; color: #aaa6a0; font-size: 14px; line-height: 1.8; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 12px; }
.work-grid figure { position: relative; overflow: hidden; margin: 0; background: #222; }
.work-grid .work-wide { grid-column: span 2; }
.work-grid .work-tall { grid-row: span 2; }
.work-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .55s ease; }
.work-grid figure:hover img { transform: scale(1.045); filter: brightness(.75); }
.work-grid figcaption { position: absolute; inset: auto 0 0; padding: 42px 18px 16px; color: #fff; background: linear-gradient(transparent, #000c); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.about-section { padding: 115px clamp(24px, 9vw, 150px); color: #fff; background: var(--red); display: grid; grid-template-columns: 1.5fr 1fr; gap: 12vw; align-items: center; }
.about-section h2 { margin-bottom: 0; font-size: clamp(64px, 7vw, 106px); }
.about-copy > p { font-size: 17px; line-height: 1.8; } .about-copy ul { list-style: none; margin: 35px 0 0; padding: 0; }
.about-copy .about-tagline { margin: 32px 0 0; padding-top: 25px; border-top: 1px solid #ffffff55; font: 800 27px/1.08 var(--font-barlow), sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.about-copy li { display: flex; gap: 11px; align-items: center; padding: 15px 0; border-top: 1px solid #ffffff55; font-size: 12px; font-weight: 700; } .about-copy svg { width: 16px; }

.quote-section { padding: 125px clamp(24px, 10vw, 170px); color: #fff; background: var(--ink); display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; }
.quote-copy h2 { font-size: clamp(64px, 7vw, 105px); } .quote-copy > p:not(.kicker) { max-width: 460px; color: #a8a5a0; font-size: 17px; line-height: 1.75; }
.direct-contact { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; } .direct-contact a { display: flex; gap: 12px; align-items: center; color: #d5d2cc; font-size: 15px; } .direct-contact svg { width: 18px; color: var(--red); }
.quote-form { display: flex; flex-direction: column; gap: 23px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.quote-form label { display: flex; flex-direction: column; gap: 10px; color: #c1beb8; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.quote-form input, .quote-form textarea, .quote-form select { width: 100%; height: 54px; padding: 0; color: #fff; border: 0; border-bottom: 1px solid #ffffff4d; border-radius: 0; outline: 0; background: transparent; box-shadow: none; font-size: 16px; }
.quote-form textarea { height: 112px; padding-top: 12px; resize: vertical; } .quote-form select { appearance: auto; color-scheme: light; } .quote-form option { color: #111; background: #fff; }
.date-picker { cursor: pointer; color-scheme: light; }
.date-picker::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(1); opacity: .8; }
.quote-form input:focus, .quote-form textarea:focus, .quote-form select:focus { border-color: var(--red); box-shadow: none; }
.submit-button { align-self: flex-start; height: 60px; padding: 0 26px; gap: 40px; color: #fff; border-radius: 0; background: var(--red); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; } .submit-button:hover { background: #ff4141; }
.success { display: flex; gap: 8px; color: #ff6767; font-size: 14px; line-height: 1.5; } .success svg { width: 16px; flex: none; }
.success.error { color: #ff9b9b; }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.submit-button:disabled { cursor: wait; opacity: .65; }

footer { min-height: 315px; padding: 60px clamp(24px, 7vw, 112px) 38px; color: #fff; background: #050505; border-top: 1px solid #ffffff26; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 55px; font-size: 15px; line-height: 1.75; }
.footer-column { display: flex; flex-direction: column; gap: 10px; }
.footer-label { margin: 0 0 8px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.footer-details address { color: #e5e2dc; font-style: normal; }
.footer-details a { color: #fff; font-weight: 700; }
.footer-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-center .footer-logo { margin-bottom: 12px; }
.footer-phone { color: #fff; font-size: 17px; font-weight: 800; }
.footer-center > p { margin: 18px 0 0; color: #827f79; font-size: 10px; letter-spacing: .04em; }
.footer-follow { align-items: flex-end; text-align: right; }
.social-icons { display: flex; gap: 18px; margin: 4px 0 14px; }
.social-icons span { width: 48px; height: 48px; color: #fff; border: 1px solid #ffffff4d; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.social-icons span:nth-child(2) { font-size: 15px; }
.footer-quote-link { padding-bottom: 4px; border-bottom: 1px solid #ffffff80; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); } .section-intro { grid-template-columns: 1fr; }
  .brand-logo { width: 275px; } .site-header { height: 138px; grid-template-columns: 1fr auto; } .nav-quote { display: none; } .menu-button { display: block; }
  .nav { display: none; position: absolute; top: 138px; left: 0; right: 0; padding: 28px; background: #090909; flex-direction: column; align-items: flex-start; } .nav-open { display: flex; }
  .hero { grid-template-columns: 1fr; height: auto; min-height: 850px; } .hero-visual { position: absolute; width: 430px; margin-left: 0; opacity: .4; right: -80px; top: 160px; } .hero-copy { z-index: 3; }
  .work-grid { grid-template-columns: repeat(2, 1fr); } .work-heading { grid-template-columns: 1fr; }
  .about-section, .quote-section { grid-template-columns: 1fr; gap: 65px; } footer { grid-template-columns: 1fr 1fr; } .footer-center { grid-column: 1 / -1; grid-row: 1; } .footer-details { grid-column: 1; } .footer-follow { grid-column: 2; }
}
@media (max-width: 600px) {
  .brand-logo { width: 225px; } .site-header { height: 112px; } .nav { top: 112px; } .hero { padding-top: 158px; }
  .hero h1 { font-size: clamp(44px, 12.5vw, 62px); } .hero-actions { align-items: flex-start; flex-direction: column; } .hero-foot { display: none; }
  .services-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } footer { grid-template-columns: 1fr; gap: 42px; text-align: center; } .footer-center, .footer-details, .footer-follow { grid-column: 1; align-items: center; text-align: center; } .footer-center { grid-row: auto; } .footer-details { grid-row: auto; } .footer-follow { grid-row: auto; }
  .work-grid { grid-template-columns: 1fr; grid-auto-rows: 245px; } .work-grid .work-wide { grid-column: auto; } .work-grid .work-tall { grid-row: auto; }
  .services-section, .work-section, .about-section, .quote-section { padding-top: 85px; padding-bottom: 85px; } .service-card { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sound-lines i { animation: none; } }