:root {
  --orange: #ff5a00;
  --orange-deep: #d94700;
  --black: #050505;
  --charcoal: #111111;
  --white: #ffffff;
  --off-white: #f3f3f3;
  --gray: #b8b8b8;
  --border: rgba(255,255,255,.13);
  --max-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--white);
  background: var(--black);
  line-height: 1.55;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(var(--max-width), calc(100% - 40px)); margin-inline: auto; }

h1,h2,h3,.brand-name,.site-nav,.btn,.section-kicker,.work-card p,.result strong {
  font-family: "Barlow Condensed", Impact, sans-serif;
  text-transform: uppercase;
}
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(3.3rem, 8vw, 6.6rem); line-height: .88; margin-bottom: 24px; }
h1 span { color: var(--orange); }
h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: .95; margin-bottom: 18px; }
h3 { line-height: 1; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(0,0,0,.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.nav-wrap { height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex-direction: column; min-width: max-content; }
.brand-name { font-size: 1.55rem; letter-spacing: .02em; line-height: 1; }
.brand-name strong { color: var(--orange); }
.brand-tagline { font-size: .48rem; letter-spacing: .12em; color: #c8c8c8; margin-top: 5px; }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-weight: 700; }
.site-nav a { font-size: .92rem; position: relative; padding-block: 26px; }
.site-nav a::after { content:""; position:absolute; left:0; right:0; bottom:15px; height:2px; background:var(--orange); transform:scaleX(0); transition:.25s; }
.site-nav a:hover::after,.site-nav a.active::after { transform:scaleX(1); }
.menu-toggle { display:none; margin-left:auto; border:0; background:transparent; padding:8px; }
.menu-toggle span { width:25px; height:2px; display:block; background:white; margin:5px 0; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:13px 20px 11px; font-weight:800; letter-spacing:.02em; border:2px solid transparent; transition:.2s ease; cursor:pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-orange { background:var(--orange); color:#fff; }
.btn-orange:hover { background:#ff6a18; }
.btn-outline-light { border-color:#fff; color:#fff; background:transparent; }
.btn-outline-light:hover { background:#fff; color:#000; }
.btn-outline-orange { border-color:var(--orange); color:#111; }
.btn-outline-orange:hover { background:var(--orange); color:#fff; }
.btn-dark { background:#080808; color:#fff; }
.desktop-cta { padding-inline:18px; }

.hero { min-height: 640px; position:relative; display:grid; align-items:center; overflow:hidden; background: linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 35%,rgba(0,0,0,.25) 67%,rgba(0,0,0,.55) 100%), url('assets/hero-placeholder.svg') center/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:120px; background:linear-gradient(transparent,#000); }
.hero-overlay { position:absolute; inset:0; background:radial-gradient(circle at 70% 42%,rgba(255,90,0,.18),transparent 30%); }
.hero-content { position:relative; z-index:2; padding-block:90px; max-width:1180px; }
.hero-content > * { max-width:620px; }
.eyebrow { color:#ddd; text-transform:uppercase; font-size:.78rem; letter-spacing:.18em; font-weight:700; }
.hero-copy { max-width:540px!important; color:#eee; font-size:1rem; margin-bottom:28px; }

.section-light { background:var(--off-white); color:#111; }
.section-dark { background:#070707; color:#fff; }
.about-section,.work-section,.services-section,.process-section,.results-section,.ai-section { padding:78px 0; }
.split-grid { display:grid; grid-template-columns: .9fr 1.5fr; gap:55px; align-items:center; }
.image-frame { border:1px solid #ccc; box-shadow:0 18px 40px rgba(0,0,0,.15); }
.section-kicker { color:var(--orange); font-weight:800; font-size:.95rem; margin-bottom:8px; }
.about-copy p { max-width:740px; }
.section-heading.centered { text-align:center; margin-bottom:34px; }
.section-heading.centered h2 { margin-bottom:0; }

.work-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.work-card { background:#0e0e0e; border:1px solid var(--border); min-width:0; transition:.25s; }
.work-card:hover { transform:translateY(-7px); border-color:rgba(255,90,0,.6); }
.work-card img { aspect-ratio: .78; object-fit:cover; }
.work-card-body { padding:18px 14px 16px; }
.work-card h3 { font-size:1.3rem; margin-bottom:6px; }
.work-card p { color:var(--orange); font-size:.82rem; margin-bottom:12px; }
.work-card a,.text-link { font-family:"Barlow Condensed"; text-transform:uppercase; font-weight:800; font-size:.9rem; }
.work-card a span,.text-link span { color:var(--orange); margin-left:8px; }

.services-grid { display:grid; grid-template-columns:repeat(8,1fr); margin-top:30px; }
.service-item { text-align:center; padding:12px 10px; border-right:1px solid #d5d5d5; }
.service-item:last-child { border-right:0; }
.service-item span { display:block; color:var(--orange); font-size:2.3rem; min-height:48px; }
.service-item h3 { font-size:1.05rem; margin:8px 0 0; }

.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:30px; }
.process-step { position:relative; padding-left:53px; }
.step-number { position:absolute; left:0; top:-7px; color:var(--orange); font-family:"Barlow Condensed"; font-size:1.8rem; font-weight:800; }
.process-step h3 { font-size:1.4rem; margin-bottom:10px; }
.process-step p { color:#c0c0c0; font-size:.9rem; }

.video-strip { background:#111; }
.video-grid { display:grid; grid-template-columns:.75fr 1.5fr; min-height:320px; }
.video-copy { padding:55px 35px 45px 0; display:flex; flex-direction:column; justify-content:center; }
.text-link { border:0; background:transparent; color:white; text-align:left; padding:0; cursor:pointer; width:max-content; }
.video-thumb { position:relative; cursor:pointer; min-height:320px; overflow:hidden; }
.video-thumb img { height:100%; object-fit:cover; opacity:.78; transition:.3s; }
.video-thumb:hover img { transform:scale(1.03); opacity:.92; }
.play-button { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:82px; height:82px; border:3px solid white; border-radius:50%; display:grid; place-items:center; font-size:1.7rem; padding-left:5px; background:rgba(0,0,0,.38); }

.results-grid { display:grid; grid-template-columns:repeat(5,1fr); margin-top:35px; }
.result { text-align:center; border-right:1px solid #ccc; padding:12px 16px; }
.result:last-child { border-right:0; }
.result strong { display:block; font-size:2.4rem; line-height:1; }
.result span { font-family:"Barlow Condensed"; text-transform:uppercase; font-weight:700; font-size:.9rem; }

.ai-grid { display:grid; grid-template-columns:.75fr 1.6fr; gap:50px; align-items:center; }
.ai-copy p { color:#c7c7c7; }
.ai-steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:center; }
.ai-steps figure { margin:0; }
.ai-steps figcaption { margin-top:8px; font-family:"Barlow Condensed"; font-weight:800; text-transform:uppercase; }
.ai-steps > span { color:var(--orange); font-size:1.6rem; }

.cta-section { background:var(--orange); padding:32px 0; }
.cta-wrap { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.cta-wrap h2 { font-size:2.3rem; margin-bottom:4px; }
.cta-wrap p { margin-bottom:0; }
.cta-actions { display:flex; gap:12px; min-width:max-content; }

.site-footer { background:#030303; padding:30px 0 18px; }
.footer-grid { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:40px; }
.footer-nav { display:flex; gap:24px; font-family:"Barlow Condensed"; text-transform:uppercase; font-weight:700; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:30px; height:30px; display:grid; place-items:center; background:#fff; color:#000; font-weight:800; }
.copyright { grid-column:1/-1; text-align:center; color:#777; font-size:.75rem; margin:8px 0 0; }

.modal { position:fixed; inset:0; z-index:2000; display:none; place-items:center; padding:20px; }
.modal.open { display:grid; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.82); }
.modal-content { position:relative; width:min(900px,100%); background:#111; border:1px solid #333; padding:20px; }
.modal-close { position:absolute; right:8px; top:2px; z-index:2; background:none; border:0; color:white; font-size:2rem; cursor:pointer; }
.video-placeholder-modal { aspect-ratio:16/9; display:grid; place-content:center; text-align:center; background:linear-gradient(135deg,#1d1d1d,#080808); }
.video-placeholder-modal h2 { margin-bottom:10px; }
.video-placeholder-modal p { color:#bbb; }

.reveal,.reveal-left,.reveal-right { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left { transform:translateX(-30px); }
.reveal-right { transform:translateX(30px); }
.in-view { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .desktop-cta { display:none; }
  .work-grid { grid-template-columns:repeat(3,1fr); gap:16px; }
  .services-grid { grid-template-columns:repeat(4,1fr); row-gap:25px; }
  .service-item:nth-child(4) { border-right:0; }
  .results-grid { grid-template-columns:repeat(3,1fr); row-gap:25px; }
  .result:nth-child(3) { border-right:0; }
  .result:nth-child(4),.result:nth-child(5) { grid-column:auto; }
}

@media (max-width: 820px) {
  .nav-wrap { height:68px; }
  .menu-toggle { display:block; }
  .site-nav { position:absolute; top:68px; left:0; right:0; display:none; flex-direction:column; gap:0; padding:10px 20px 20px; background:#050505; border-bottom:1px solid #222; }
  .site-nav.open { display:flex; }
  .site-nav a { width:100%; padding:13px 0; }
  .site-nav a::after { bottom:7px; }
  .hero { min-height:560px; background-position:65% center; }
  .hero-content { padding-block:70px; }
  .hero-copy { max-width:500px!important; }
  .split-grid,.ai-grid,.video-grid { grid-template-columns:1fr; }
  .image-frame { max-width:520px; }
  .video-copy { padding:48px 0 30px; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .ai-steps { margin-top:10px; }
  .cta-wrap { flex-direction:column; align-items:flex-start; }
  .footer-grid { grid-template-columns:1fr; text-align:center; justify-items:center; gap:22px; }
}

@media (max-width: 580px) {
  .container { width:min(100% - 28px,var(--max-width)); }
  h1 { font-size:3.35rem; }
  h2 { font-size:2.35rem; }
  .about-section,.work-section,.services-section,.process-section,.results-section,.ai-section { padding:58px 0; }
  .hero { min-height:610px; background-position:70% center; }
  .hero::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.28); }
  .work-grid { grid-template-columns:repeat(2,1fr); }
  .work-card-body { padding:13px 10px; }
  .work-card h3 { font-size:1.1rem; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .service-item:nth-child(even) { border-right:0; }
  .process-grid { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr 1fr; }
  .result { border-right:1px solid #ccc!important; }
  .result:nth-child(even) { border-right:0!important; }
  .result:last-child { grid-column:1/-1; border-right:0!important; }
  .ai-steps { grid-template-columns:1fr; }
  .ai-steps > span { transform:rotate(90deg); text-align:center; }
  .cta-actions { width:100%; flex-direction:column; min-width:0; }
  .cta-actions .btn { width:100%; }
  .footer-nav { flex-wrap:wrap; justify-content:center; }
}
