:root{
  --paper: oklch(0.98 0.004 80);
  --paper-alt: oklch(0.95 0.005 80);
  --ink: oklch(0.16 0.006 80);
  --line: oklch(0.87 0.006 80);
  --red: oklch(0.53 0.21 25);
  --red-hover: oklch(0.45 0.21 25);
  --white: oklch(0.99 0.003 80);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
}
a{color:var(--red); text-decoration:none;}
a:hover{color:var(--red-hover);}
::selection{background:var(--red); color:var(--white);}

.display{font-family:'Space Grotesk', sans-serif; font-weight:700; letter-spacing:-0.02em;}

@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

.wrap{max-width:1400px; margin:0 auto; padding:0 64px;}

/* ---------- NAV ---------- */
.site-header{border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 64px; flex-wrap:wrap; position:relative;}
.nav-brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.nav-brand img{width:38px; height:38px; border-radius:8px; object-fit:cover; display:block;}
.nav-brand span{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:17px; letter-spacing:0.01em; white-space:nowrap;}
.nav-toggle{display:none; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink); flex-shrink:0;}
.nav-toggle svg{width:26px; height:26px;}
.navlinks{display:flex; align-items:center; gap:40px; font-size:14px; color:oklch(0.4 0.008 80); list-style:none; margin:0; padding:0;}
.navlinks a{color:inherit;}
.navlinks a:hover{color:var(--ink);}
.navlinks ul{list-style:none; display:flex; align-items:center; gap:40px; margin:0; padding:0;}
.navlinks li{display:inline-flex;}
.nav-right{display:flex; align-items:center; gap:24px; flex-shrink:0;}
.nav-location{display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:0.12em; color:oklch(0.5 0.008 80); text-transform:uppercase; white-space:nowrap;}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:14px; padding:11px 22px; border-radius:4px; white-space:nowrap; font-family:inherit; border:none; cursor:pointer;}
.btn-red{background:var(--red); color:var(--white);}
.btn-red:hover{background:var(--red-hover); color:var(--white);}
.btn-outline{border:1px solid var(--white); color:var(--white); background:transparent; font-weight:500;}
.btn-outline:hover{background:var(--white); color:var(--ink);}

/* ---------- HERO ---------- */
.hero{
  padding:120px 64px 100px;
  position:relative;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg, oklch(0.12 0.006 260 / 0.88), oklch(0.12 0.006 260 / 0.55) 60%, oklch(0.12 0.006 260 / 0.3)),
    var(--hero-image, none);
  background-size:cover;
  background-position:center;
}
.hero-flag{display:flex; align-items:center; gap:10px; margin-bottom:36px;}
.hero-flag .dot{width:9px; height:9px; border-radius:50%; background:oklch(0.7 0.19 30); animation:pulse 1.6s ease-in-out infinite; display:inline-block;}
.hero-flag span{font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:oklch(0.7 0.19 30); font-weight:600;}
.hero h1{font-size:108px; line-height:0.98; letter-spacing:-0.03em; margin:0 0 32px; max-width:900px; color:var(--white);}
.hero .lead{font-size:20px; line-height:1.6; color:oklch(0.88 0.006 80); max-width:620px; margin:0 0 48px;}
.hero-ctas{display:flex; align-items:center; gap:20px; margin-bottom:88px; flex-wrap:wrap;}
.hero-ctas .btn-red{padding:16px 30px; font-size:15px;}
.hero-ctas .btn-outline{padding:15px 30px; font-size:15px;}
.hero-stats{display:flex; align-items:center; gap:48px; flex-wrap:wrap;}
.hero-stats .stat-num{font-family:'Space Grotesk', sans-serif; font-size:32px; font-weight:600; color:var(--white);}
.hero-stats .stat-lbl{font-size:13px; color:oklch(0.8 0.01 80); margin-top:4px;}
.hero-stats .stat-div{width:1px; height:40px; background:oklch(1 0 0 / 0.25);}

/* ---------- SECTION HEAD (shared) ---------- */
.section{padding:100px 64px; border-bottom:1px solid var(--line);}
.section-alt{background:var(--paper-alt);}
.kicker{font-size:13px; letter-spacing:0.15em; text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:16px;}
.section h2{font-size:44px; margin:0 0 20px; max-width:700px;}
.section .lede{font-size:17px; color:oklch(0.45 0.008 80); max-width:560px; margin:0 0 64px; line-height:1.6;}

/* ---------- SERVICES ---------- */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.service-card{background:var(--paper); padding:48px; display:flex; flex-direction:column;}
.service-card .head{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.service-card svg{flex-shrink:0;}
.service-card h3{font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; margin:0; text-transform:uppercase;}
.service-card .body{margin-bottom:28px;}
.service-card .body p{font-size:15px; line-height:1.7; color:oklch(0.4 0.008 80); margin:0 0 14px;}
.service-card .body p:last-child{margin-bottom:0;}
.service-card .learn-more{font-size:14px; font-weight:600; margin-top:auto;}

/* ---------- REEL ---------- */
.reel-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px;}
.reel-item{position:relative; width:100%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; cursor:pointer; display:block; border:none; padding:0; background:none; appearance:none; -webkit-appearance:none; font:inherit;}
.reel-item img{width:100%; height:100%; object-fit:cover; display:block;}
.reel-item .shade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, oklch(0.1 0.006 260 / 0.85), transparent 40%);}
.reel-item .tag{position:absolute; top:14px; left:14px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper); pointer-events:none;}
.reel-item .tc{position:absolute; bottom:14px; left:14px; font-family:'Space Grotesk', sans-serif; font-size:13px; color:oklch(0.68 0.19 30); pointer-events:none;}
.reel-item .play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:oklch(0.98 0.004 80 / 0.9); display:flex; align-items:center; justify-content:center; pointer-events:none;}

/* ---------- ABOUT ---------- */
.about{display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:center;}
.about-photo{width:100%; aspect-ratio:4/5; border-radius:4px; overflow:hidden;}
.about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.about-copy p{font-size:17px; line-height:1.7; color:oklch(0.38 0.008 80); margin:0 0 20px;}
.about-copy .sig{border-left:2px solid var(--red); padding-left:20px; font-size:16px; font-style:italic; color:oklch(0.25 0.006 80); margin-top:16px;}

/* ---------- PROCESS ---------- */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative;}
.process-line{position:absolute; top:11px; left:5%; right:5%; height:1px; background:var(--line);}
.process-step{position:relative;}
.process-step .marker{width:22px; height:22px; border-radius:50%; background:var(--red); margin-bottom:28px;}
.process-step h3{font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:600; margin:0 0 12px;}
.process-step p{font-size:15px; line-height:1.65; color:oklch(0.45 0.008 80); margin:0;}

/* ---------- CONTACT ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:80px;}
.contact-intro h2{max-width:480px;}
.contact-intro p{font-size:17px; line-height:1.7; color:oklch(0.4 0.008 80); max-width:440px;}
.contact-form{display:flex; flex-direction:column; gap:18px;}
.contact-form label{display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:oklch(0.5 0.008 80); margin-bottom:8px;}
.contact-form input, .contact-form textarea{width:100%; border:1px solid oklch(0.82 0.006 80); border-radius:4px; padding:14px 16px; background:var(--paper); font-size:15px; font-family:inherit; color:var(--ink);}
.contact-form textarea{min-height:76px; resize:vertical;}
.contact-form button{align-self:flex-start; margin-top:8px; padding:15px 32px; font-size:15px;}
.ltl-hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}
.form-notice{padding:14px 18px; border-radius:4px; font-size:14px; margin:0 0 8px;}
.form-notice-success{background:oklch(0.53 0.21 25 / 0.12); border:1px solid var(--red); color:var(--ink);}
.form-notice-error{background:oklch(0.85 0.01 80); border:1px solid oklch(0.7 0.01 80); color:var(--ink);}

/* ---------- FOOTER ---------- */
.site-footer{padding:48px 64px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.site-footer .billing-block{font-size:14px; color:oklch(0.5 0.008 80); margin:0; max-width:720px; line-height:1.6;}
.site-footer .billing-block strong{color:oklch(0.25 0.006 80); font-weight:600;}
.site-footer .copyright{font-size:13px; color:oklch(0.58 0.008 80); margin:0; white-space:nowrap;}

/* ---------- VIDEO MODAL ---------- */
.video-modal{display:none; position:fixed; inset:0; background:oklch(0.1 0.006 260 / 0.9); z-index:200; align-items:center; justify-content:center; padding:50px 20px 20px;}
.video-modal.active{display:flex;}
.video-modal-inner{position:relative; width:100%; max-width:960px; aspect-ratio:16/9; background:#000;}
.video-modal-inner iframe{width:100%; height:100%; border:0; display:block;}
.video-modal-close{position:absolute; top:-42px; right:0; background:none; border:none; color:var(--white); font-size:32px; line-height:1; cursor:pointer;}

/* ---------- GENERIC PAGE / POST CONTENT (fallback templates) ---------- */
.page-content{font-size:16px; color:var(--ink);}
.page-content p{margin-bottom:18px;}
.page-content h2, .page-content h3{font-family:'Space Grotesk', sans-serif; margin:32px 0 14px;}
.page-content a{text-decoration:underline;}
.page-content ul, .page-content ol{margin:0 0 18px 22px;}
.page-content img{max-width:100%; height:auto;}

.post-list{display:flex; flex-direction:column; gap:0;}
.post-list-item{padding:32px 0; border-bottom:1px solid var(--line);}
.post-list-item:first-child{padding-top:0;}
.post-list-item h3{font-family:'Space Grotesk', sans-serif; font-size:24px; font-weight:600; margin:0 0 10px;}
.post-list-item p{color:oklch(0.4 0.008 80); font-size:15px; line-height:1.7; margin:0 0 12px;}
.post-list-item .learn-more{font-size:14px; font-weight:600;}

/* =======================================================
   RESPONSIVE
   ======================================================= */

/* Nav collapse (hamburger menu) */
@media (max-width:1200px){
  .navlinks, .nav-right{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    width:100%;
    padding-top:20px;
    margin-top:20px;
    border-top:1px solid var(--line);
  }
  .nav-toggle{display:inline-flex;}
  .nav.menu-open .navlinks,
  .nav.menu-open .nav-right{
    display:flex;
  }
  .nav-right{flex-direction:row; align-items:center; justify-content:space-between;}
}

/* Tablet */
@media (max-width:1024px){
  .wrap{padding:0 40px;}
  .nav{padding:24px 40px;}
  .hero{padding:100px 40px 80px;}
  .hero h1{font-size:76px;}
  .section{padding:80px 40px;}
  .services-grid{grid-template-columns:1fr;}
  .reel-grid{grid-template-columns:1fr; gap:24px;}
  .about{grid-template-columns:1fr; gap:40px;}
  .about-photo{max-width:420px; margin:0 auto;}
  .process-grid{grid-template-columns:repeat(2,1fr); row-gap:48px;}
  .process-line{display:none;}
  .contact{grid-template-columns:1fr; gap:48px;}
  .site-footer{padding:40px;}
}

/* Mobile */
@media (max-width:680px){
  .wrap{padding:0 22px;}
  .nav{padding:18px 22px;}
  .navlinks{font-size:14px;}
  .nav-right{flex-direction:column; align-items:flex-start; gap:14px;}
  .nav-brand span{font-size:15px;}

  .hero{padding:64px 22px 56px;}
  .hero h1{font-size:44px; letter-spacing:-0.02em;}
  .hero .lead{font-size:16px; margin-bottom:34px;}
  .hero-ctas{gap:12px; margin-bottom:56px;}
  .hero-ctas .btn{padding:13px 22px; font-size:14px;}
  .hero-stats{gap:24px;}
  .hero-stats .stat-num{font-size:24px;}
  .hero-stats .stat-div{height:30px;}

  .section{padding:56px 22px;}
  .section h2{font-size:30px;}
  .section .lede{margin-bottom:40px;}

  .service-card{padding:30px;}
  .service-card h3{font-size:19px;}

  .about{gap:28px;}
  .about-photo{max-width:280px;}
  .about-copy h2{font-size:30px;}
  .about-copy p{font-size:15px;}

  .process-grid{grid-template-columns:1fr; gap:32px;}
  .process-line{
    display:block;
    top:2px;
    bottom:2px;
    left:11px;
    right:auto;
    width:2px;
    height:auto;
    background:var(--line);
  }
  .process-step{
    display:grid;
    grid-template-columns:22px 1fr;
    column-gap:16px;
    row-gap:4px;
    align-items:start;
    position:relative;
  }
  .process-step .marker{grid-column:1; grid-row:1 / span 2; margin-bottom:0; margin-top:2px;}
  .process-step h3{grid-column:2; grid-row:1; margin:0;}
  .process-step p{grid-column:2; grid-row:2;}

  .contact-form button{align-self:center; width:100%;}

  .site-footer{flex-direction:column; align-items:flex-start; gap:14px; text-align:left; padding:36px 22px;}
  .site-footer .copyright{white-space:normal;}
}