
:root{
 --ink:#101114; --paper:#f4f1eb; --muted:#66635e; --accent:#b33a2f;
 --line:#d7d1c8; --white:#fff; --dark:#17181b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65}
a{color:inherit}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 5vw;background:rgba(10,10,10,.98);border-bottom:1px solid #343434;backdrop-filter:blur(8px)}
.brand{display:block;flex:0 0 auto;text-decoration:none;line-height:0}.brand-logo{display:block;width:auto;height:64px;max-width:38vw;object-fit:contain}
.links{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.links a{text-decoration:none;font-size:.86rem;color:#f4f1eb}.links a:hover{color:#ff3434}.links .cta{background:#c90018;color:#fff;padding:9px 15px}
.hero{min-height:78vh;display:grid;place-items:center;padding:9vw 8vw;background:var(--dark);color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:55vw;height:55vw;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-18vw;top:-15vw}
.hero-inner{max-width:1000px;position:relative;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.76rem;color:#d9b2ac;font-weight:700}
h1{font-size:clamp(3rem,8vw,7rem);line-height:.95;margin:18px 0 28px;letter-spacing:-.045em}
h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 22px}
h3{font-size:1.2rem;margin-top:30px}
.lead{font-size:1.25rem;max-width:760px;color:#d9d8d4}
.btn{display:inline-block;margin-top:20px;padding:13px 21px;text-decoration:none;background:var(--accent);color:#fff;font-weight:700;margin-right:10px}.btn.alt{background:transparent;border:1px solid #aaa}
.section{padding:90px 8vw}.section.narrow{max-width:1000px;margin:auto}.dark{background:var(--dark);color:#fff}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.card{border-top:3px solid var(--ink);padding:24px 0}.dark .card{border-color:#777}
.pagehead{padding:90px 8vw 55px;background:var(--dark);color:#fff}.pagehead h1{font-size:clamp(3rem,6vw,5.5rem);margin-bottom:0}
.prose{max-width:900px;font-size:1.08rem}.prose p{margin:0 0 1.35em}.prose strong{color:var(--accent)}
.quote{border-left:4px solid var(--accent);padding:22px 28px;margin:30px 0;background:#ebe7df;font-size:1.08rem}.quote cite{display:block;margin-top:12px;font-style:normal;font-weight:700;font-size:.9rem}
.columns{columns:3;column-gap:45px}.columns div{break-inside:avoid;padding:3px 0}
.contact-box{display:grid;grid-template-columns:1fr 1fr;gap:50px}.contact-box a{color:var(--accent)}
footer{padding:55px 8vw;background:#0e0f11;color:#ddd;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;font-size:.9rem}footer a{color:#fff}
.smallcaps{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:var(--muted)}
@media(max-width:900px){.links{gap:10px}.grid{grid-template-columns:1fr}.columns{columns:2}.contact-box{grid-template-columns:1fr}footer{grid-template-columns:1fr}}
@media(max-width:650px){.brand-logo{height:54px;max-width:88vw}.nav{align-items:flex-start;gap:12px;flex-direction:column}.links{justify-content:flex-start}.columns{columns:1}.section{padding:65px 6vw}.pagehead{padding:65px 6vw 40px}}

/* Updated Maelstrom PR and Marketing brand treatments */
.brand-logo{height:64px;max-width:30vw}
.footer-brand{display:flex;align-items:flex-start}
.footer-logo{display:block;width:100%;max-width:300px;height:auto;object-fit:contain}
.links a.clients-link{font-size:.72rem;max-width:155px;line-height:1.25;text-align:center}
.welcome-heading{font-size:clamp(1.8rem,3.3vw,3.2rem);line-height:1.08;letter-spacing:-.02em;max-width:900px}
.about-pagehead{padding:21px 8vw 14px}
.about-pagehead h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0}
.about-pagehead + .section .prose{font-size:1.28rem}
.about-pagehead + .section .prose h2{font-size:1.25rem;line-height:1.2;letter-spacing:-.01em;margin-top:1.5em;margin-bottom:.65em}
@media(max-width:900px){.links a.clients-link{max-width:135px;font-size:.68rem}.brand-logo{max-width:40vw}}
@media(max-width:650px){.brand-logo{max-width:88vw}.footer-logo{max-width:250px}.about-pagehead{padding:16px 6vw 10px}.about-pagehead + .section .prose{font-size:1.16rem}.about-pagehead + .section .prose h2{font-size:1.12rem}}

/* October 29 refinements */
.nav{padding-top:17px;padding-bottom:17px}
.brand-logo{height:88px;max-width:34vw}
.links a.clients-link{font-size:.76rem;max-width:130px}
/* Keep all inner-page black title bands consistent with About Us. */
.pagehead{padding:21px 8vw 14px}
.pagehead h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0;line-height:1.1;letter-spacing:-.02em}
.welcome-heading{font-size:clamp(3.6rem,6.6vw,6.4rem);line-height:1.02;letter-spacing:-.025em;max-width:1000px}
.footer-social{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.contact-social .contact-email{font-size:1rem;margin:0 0 1.5em}
.contact-social .contact-email a{font-size:1rem}
.contact-social p{margin:.45em 0;font-size:1rem}
@media(max-width:900px){.brand-logo{max-width:45vw;height:78px}}
@media(max-width:650px){.brand-logo{max-width:88vw;height:66px}.nav{padding-top:12px;padding-bottom:12px}.pagehead{padding:16px 6vw 10px}.pagehead h1{font-size:clamp(1.8rem,5vw,2.4rem)}.welcome-heading{font-size:clamp(3rem,10vw,4.5rem)}}

/* Latest content and typography refinements */
.hero{min-height:48vh;padding:5vw 8vw}
.welcome-heading{font-size:clamp(2.5rem,5vw,4.5rem)}
.strategy-copy{max-width:1000px}
.strategy-copy p{font-size:1.2rem;line-height:1.8}
.contact-box{font-size:1.18rem}
.contact-box h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.contact-box p{font-size:1.15rem}
.prose strong{font-weight:400;color:inherit}
.prose h2{font-size:1.25rem;line-height:1.2;letter-spacing:-.01em;margin-top:1.5em;margin-bottom:.65em}
.testimonial-intro{font-size:1.25rem!important;line-height:1.2;letter-spacing:-.01em;margin:0 0 1.2em}
@media(max-width:650px){.hero{min-height:42vh;padding:10vw 6vw}.welcome-heading{font-size:clamp(2.4rem,9vw,3.8rem)}.contact-box{font-size:1.08rem}}


/* Concert photograph background for the home-page Welcome to the Maelstrom hero. */
.hero{background-image:linear-gradient(rgba(8,9,11,.52),rgba(8,9,11,.62)),url("hero-concert-background.jpg");background-position:center center;background-size:cover;background-repeat:no-repeat}
.hero:after{display:none}
.hero-inner{max-width:1000px}
