:root{
    --bg:#0c0c0e;
    --bg-2:#161618;
    --bg-3:#1f1f22;
    --maroon:#2a0705;
    --maroon-hi:#3a0c09;
    --red:#e30613;
    --red-hi:#ff2430;
    --red-deep:#a10d0d;
    --ink:#ffffff;
    --ink-muted:#aeaeb2;
    --light-bg:#f4f3f1;
    --card-bg:#ffffff;
    --card-border:#e6e4df;
    --on-light:#141414;
    --on-light-muted:#68686c;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1280px; margin:0 auto; padding:0 18px;}
  @media(min-width:768px){ .wrap{padding:0 48px;} }
  .cond{font-family:'Oswald',sans-serif; letter-spacing:0.01em;}

  .reveal{opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
  .reveal.in-view{opacity:1; transform:translateY(0);}
  @keyframes fadeInUp{ to{opacity:1; transform:translateY(0);} }
  .hero-anim{opacity:0; transform:translateY(18px); animation:fadeInUp .9s cubic-bezier(.16,1,.3,1) forwards;}
  .d1{animation-delay:.15s;} .d2{animation-delay:.3s;} .d3{animation-delay:.45s;}

  /* ---------- nav ---------- */
  nav{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(12,12,14,0.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.08);}
  .nav-inner{max-width:1280px; margin:0 auto; padding:0 18px; height:96px; display:flex; align-items:center; justify-content:space-between;}
  @media(min-width:768px){ .nav-inner{padding:0 48px;} }
  .nav-logo{display:flex; align-items:center; height:100%; padding:14px 0;}
  .nav-logo img{height:100%; max-height:68px; width:auto; display:block;}
  @media(max-width:600px){ .nav-inner{height:80px;} .nav-logo img{max-height:52px;} }
  .brand{font-family:'Oswald'; font-weight:700; font-size:21px; letter-spacing:0.01em;}
  .brand .hi{color:var(--red);}
  .navlinks{display:none; gap:26px;}
  @media(min-width:960px){ .navlinks{display:flex;} }
  .navlinks a{font-family:'Oswald'; font-weight:500; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-muted); transition:color .2s; position:relative; padding-bottom:4px;}
  .navlinks a:hover, .navlinks a.active{color:var(--ink);}
  .navlinks a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red);}
  .nav-cta{background:var(--red); color:#fff; font-family:'Oswald'; font-weight:600; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; padding:11px 22px; border-radius:4px; border:none; cursor:pointer; display:none;}
  @media(min-width:960px){ .nav-cta{display:inline-block;} }
  .nav-cta:hover{background:var(--red-hi); box-shadow:0 0 24px rgba(227,6,19,0.5);}
  .burger{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
  @media(min-width:960px){ .burger{display:none;} }
  .burger span{width:24px; height:2px; background:var(--ink); transition:transform .25s, opacity .25s;}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-menu{max-height:0; overflow:hidden; background:var(--bg-2); transition:max-height .35s ease;}
  .mobile-menu.open{max-height:360px;}
  .mobile-menu-inner{padding:12px 18px 24px; display:flex; flex-direction:column; gap:2px;}
  .mobile-menu a{padding:12px 4px; font-family:'Oswald'; font-weight:500; font-size:13px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-muted); border-bottom:1px solid rgba(255,255,255,0.08);}
  .mobile-menu .nav-cta{display:block; text-align:center; margin-top:14px;}

  /* ---------- hero ---------- */
  .hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;}
  .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.25) contrast(1.15); opacity:0.5;}
  .hero-overlay{position:absolute; inset:0; background:linear-gradient(100deg, rgba(12,12,14,0.94) 0%, rgba(12,12,14,0.75) 45%, rgba(12,12,14,0.35) 75%, rgba(12,12,14,0.55) 100%);}
  .beam{position:absolute; top:-5%; bottom:-5%; width:3px; background:linear-gradient(to bottom, transparent, var(--red) 20%, var(--red-hi) 50%, var(--red) 80%, transparent); opacity:0.55; filter:blur(0.5px);}
  .beam.b1{right:14%; transform:rotate(6deg);}
  .beam.b2{right:24%; transform:rotate(6deg); opacity:0.3;}
  .beam.b3{right:6%; transform:rotate(6deg); opacity:0.35;}
  @media(max-width:760px){ .beam{display:none;} }
  .hero-content{position:relative; z-index:5; max-width:640px; padding:100px 20px 60px;}
  .hero-eyebrow{font-family:'Oswald'; font-size:12.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:16px;}
  h1.hero-h1{font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:clamp(32px,6vw,54px); line-height:1.08; letter-spacing:0.005em;}
  h1.hero-h1 .accent{color:var(--red);}
  .hero-tags{font-family:'Oswald'; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); margin-top:20px;}
  .hero-tags span{color:var(--ink-muted);}
  .hero-tags .sep{color:var(--red); margin:0 8px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
  .btn{font-family:'Oswald'; font-weight:600; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; padding:15px 28px; border-radius:4px; cursor:pointer; border:none; transition:all .25s ease;}
  .btn-primary{background:var(--red); color:#fff;}
  .btn-primary:hover{background:var(--red-hi); box-shadow:0 0 26px rgba(227,6,19,0.5); transform:translateY(-2px);}
  .btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.35);}
  .btn-outline:hover{border-color:#fff; background:rgba(255,255,255,0.06);}

  /* ---------- trust strip ---------- */
  .trust-strip{background:var(--maroon); border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06);}
  .trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:30px 0;}
  @media(min-width:760px){ .trust-grid{grid-template-columns:repeat(4,1fr);} }
  .trust-item{display:flex; align-items:center; gap:12px;}
  .trust-icon{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center; flex:none;}
  .trust-icon svg{width:19px; height:19px; stroke:var(--red); fill:none; stroke-width:1.7;}
  .trust-item h4{font-family:'Oswald'; font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:2px;}
  .trust-item p{font-size:12px; color:var(--ink-muted);}

  /* ---------- services (light section) ---------- */
  .services-sec{background:var(--light-bg); padding:88px 0; color:var(--on-light);}
  .services-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:42px; flex-wrap:wrap; gap:16px;}
  .services-head h2{font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:clamp(24px,3vw,32px); letter-spacing:0.01em;}
  .services-head h2 .accent{color:var(--red);}
  .view-all{font-family:'Oswald'; font-size:12.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--red); border-bottom:1.5px solid var(--red); padding-bottom:2px; white-space:nowrap;}
  .services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
  @media(min-width:700px){ .services-grid{grid-template-columns:repeat(3,1fr);} }
  @media(min-width:1040px){ .services-grid{grid-template-columns:repeat(6,1fr);} }
  .service-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px; padding:22px 16px; text-align:center; transition:transform .3s, box-shadow .3s, border-color .3s;}
  .service-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.08); border-color:var(--red);}
  .service-icon{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
  .service-icon svg{width:20px; height:20px; stroke:var(--red); fill:none; stroke-width:1.7;}
  .service-card h4{font-family:'Oswald'; font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; margin-bottom:6px;}
  .service-card p{font-size:11.5px; color:var(--on-light-muted); line-height:1.5;}

  /* ---------- reviews (dark) ---------- */
  .reviews-sec{background:var(--bg); padding:88px 0;}
  .section-head{max-width:620px; margin-bottom:44px;}
  .section-head .label{font-family:'Oswald'; font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); margin-bottom:12px; display:block;}
  .section-head h2{font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:clamp(24px,3vw,32px);}
  .section-head p{color:var(--ink-muted); font-size:14.5px; margin-top:12px;}
  .rating-banner{display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--bg-2); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:24px 28px; margin-bottom:30px;}
  .rating-num{font-family:'Oswald'; font-weight:700; font-size:40px; color:var(--red); line-height:1;}
  .stars{color:var(--red); font-size:16px; letter-spacing:2px;}
  .stars.small{font-size:13px; margin:4px 0 10px;}
  .rating-sub{font-size:12.5px; color:var(--ink-muted); margin-top:3px;}
  .tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto;}
  .rtag{font-family:'Oswald'; font-size:11px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:#fff; background:rgba(227,6,19,0.15); border:1px solid rgba(227,6,19,0.4); padding:6px 12px; border-radius:999px;}
  .review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media(max-width:860px){ .review-grid{grid-template-columns:1fr;} }
  .review-card{background:var(--bg-2); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:24px;}
  .review-top{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
  .review-avatar{width:36px; height:36px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; font-family:'Oswald';}
  .review-name{font-family:'Oswald'; font-weight:600; font-size:14px;}
  .review-meta{font-size:11.5px; color:var(--ink-muted);}
  .review-card p{font-size:13.5px; color:var(--ink-muted);}

  /* ---------- footer ---------- */
  footer{background:linear-gradient(180deg, var(--maroon-hi), var(--maroon)); padding:56px 0 0;}
  .foot-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; padding-bottom:40px;}
  @media(min-width:760px){ .foot-grid{grid-template-columns:repeat(4,1fr);} }
  .foot-col .label{font-family:'Oswald'; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--red-hi); margin-bottom:12px; display:block;}
  .foot-col p, .foot-col a{font-size:13.5px; color:#e8dcdb; display:block; margin-bottom:4px;}
  .foot-social{display:flex; gap:12px; margin-top:6px;}
  .foot-social a{width:34px; height:34px; border:1px solid rgba(255,255,255,0.25); border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .foot-social svg{width:15px; height:15px; stroke:#fff; fill:none; stroke-width:1.7;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,0.12); padding:20px 0; text-align:center; font-size:12px; color:#c9a9a7;}

/* ---------- shared sub-page components ---------- */
.subhero{position:relative; padding:150px 0 70px; background:var(--bg); overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.08);}
.subhero .beam{position:absolute; top:-10%; bottom:-10%; width:2px; background:linear-gradient(to bottom, transparent, var(--red) 30%, var(--red-hi) 50%, var(--red) 70%, transparent); opacity:0.28;}
.subhero .beam.sb1{right:10%; transform:rotate(8deg);}
.subhero .beam.sb2{right:22%; transform:rotate(8deg); opacity:0.16;}
@media(max-width:760px){ .subhero .beam{display:none;} }
.crumb{font-family:'Oswald'; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:14px; position:relative; z-index:2;}
.crumb a{color:var(--ink-muted); border-bottom:1px solid transparent;}
.crumb a:hover{color:var(--red-hi);}
.subhero h1{font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:clamp(30px,5vw,48px); position:relative; z-index:2; max-width:16ch;}
.subhero h1 .accent{color:var(--red);}
.subhero p{color:var(--ink-muted); font-size:15.5px; max-width:52ch; margin-top:16px; position:relative; z-index:2;}

/* content section (light) */
.content-sec{background:var(--light-bg); color:var(--on-light); padding:80px 0;}
.content-sec.dark{background:var(--bg); color:var(--ink);}
.content-sec.dark p{color:var(--ink-muted);}
.two-col{display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:start;}
@media(max-width:860px){ .two-col{grid-template-columns:1fr; gap:34px;} }
.content-sec h2{font-family:'Oswald'; font-weight:700; text-transform:uppercase; font-size:clamp(24px,3vw,32px); margin-bottom:18px;}
.content-sec h2 .accent{color:var(--red);}
.content-sec p{font-size:15px; color:var(--on-light-muted); margin-bottom:14px; line-height:1.7;}
.stat-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px;}
.stat-box{background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px; padding:20px; text-align:center;}
.stat-box b{font-family:'Oswald'; font-size:28px; color:var(--red); display:block;}
.stat-box span{font-size:12px; color:var(--on-light-muted); text-transform:uppercase; letter-spacing:0.03em;}

/* value list */
.value-list{display:flex; flex-direction:column; gap:20px; margin-top:10px;}
.value-item{display:flex; gap:16px; align-items:flex-start;}
.value-num{font-family:'Oswald'; font-weight:700; font-size:20px; color:var(--red); flex:none; width:34px;}
.value-item h4{font-family:'Oswald'; font-size:15.5px; font-weight:600; text-transform:uppercase; margin-bottom:4px;}
.value-item p{font-size:14px; margin-bottom:0;}

/* contact page */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px;}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:32px;}
.contact-line{display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--card-border); font-size:14.5px;}
.contact-line:last-child{border-bottom:none;}
.contact-line .ci{width:20px; color:var(--red); flex:none;}
.contact-line b{display:block; font-family:'Oswald'; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-light-muted); margin-bottom:3px;}
.map-embed{width:100%; height:340px; border:0; border-radius:8px; margin-top:24px; filter:grayscale(0.15);}
.form-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:32px;}
.form-row{margin-bottom:18px;}
.form-row label{display:block; font-family:'Oswald'; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-light-muted); margin-bottom:7px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--card-border); border-radius:5px; font-family:'Inter'; font-size:14.5px;
  background:#fff; color:var(--on-light);
}
.form-row textarea{resize:vertical; min-height:100px;}
.form-note{font-size:12.5px; color:var(--on-light-muted); margin-top:6px;}

/* service list page */
.service-detail-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media(min-width:900px){ .service-detail-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){ .service-detail-grid{grid-template-columns:1fr;} }
.service-detail-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; padding:28px; transition:transform .3s, box-shadow .3s, border-color .3s;}
.service-detail-card:hover{transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,0.08); border-color:var(--red);}
.service-detail-card .service-icon{margin:0 0 16px;}
.service-detail-card h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; font-size:16px; margin-bottom:10px;}
.service-detail-card ul{list-style:none; margin:12px 0 16px;}
.service-detail-card li{font-size:13.5px; color:var(--on-light-muted); padding:5px 0 5px 18px; position:relative;}
.service-detail-card li::before{content:"—"; position:absolute; left:0; color:var(--red);}
.service-detail-card .sd-link{font-family:'Oswald'; font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--red); border-bottom:1.5px solid var(--red); padding-bottom:2px;}

/* ---------- service detail pages ---------- */
.service-hero-icon{width:64px; height:64px; border-radius:14px; border:1.5px solid var(--red); display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; z-index:2;}
.service-hero-icon svg{width:30px; height:30px; stroke:var(--red); fill:none; stroke-width:1.6;}
.included-list{list-style:none; margin-top:8px;}
.included-list li{font-size:14.5px; color:var(--on-light-muted); padding:9px 0 9px 26px; border-bottom:1px solid var(--card-border); position:relative;}
.included-list li:last-child{border-bottom:none;}
.included-list li::before{content:"✓"; position:absolute; left:0; color:var(--red); font-weight:700;}
.faq-item{border-bottom:1px solid var(--card-border); padding:18px 0;}
.faq-item summary{font-family:'Oswald'; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:0.01em; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:20px; color:var(--red); font-weight:400;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin-top:12px; font-size:14.5px; color:var(--on-light-muted);}
.related-strip{display:flex; gap:14px; flex-wrap:wrap; margin-top:16px;}
.related-chip{font-family:'Oswald'; font-size:12px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; color:var(--on-light); background:var(--card-bg); border:1px solid var(--card-border); padding:9px 16px; border-radius:999px; transition:border-color .2s, color .2s;}
.related-chip:hover{border-color:var(--red); color:var(--red);}

/* ---------- our work: filter pills ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:38px;}
.filter-pill{font-family:'Oswald'; font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:10px 18px; border-radius:999px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--on-light-muted); cursor:pointer; transition:all .2s;}
.filter-pill:hover{border-color:var(--red); color:var(--red);}
.filter-pill.active{background:var(--red); border-color:var(--red); color:#fff;}

/* ---------- before/after compare slider ---------- */
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
@media(max-width:820px){ .work-grid{grid-template-columns:1fr;} }
.work-item{display:none;}
.work-item.show{display:block;}
.compare{position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; --pos:50%; box-shadow:0 10px 26px rgba(0,0,0,0.08); border:1px solid var(--card-border);}
.compare .layer{position:absolute; inset:0; background-size:cover; background-position:center;}
.compare .after-layer{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.compare .tag{position:absolute; top:14px; font-family:'Oswald'; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 12px; border-radius:4px; z-index:3; color:#fff;}
.compare .tag.before-tag{left:14px; background:rgba(0,0,0,0.55);}
.compare .tag.after-tag{right:14px; background:var(--red);}
.compare .handle-line{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 10px rgba(0,0,0,0.4); z-index:2; pointer-events:none;}
.compare .handle-knob{position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,0.35);}
.compare .handle-knob svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.4;}
.compare-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; -webkit-appearance:none;}
.work-caption{margin-top:12px; display:flex; justify-content:space-between; align-items:baseline;}
.work-caption h4{font-family:'Oswald'; font-size:14.5px; font-weight:600; text-transform:uppercase; color:var(--on-light);}
.work-caption span{font-size:11.5px; color:var(--on-light-muted); text-transform:uppercase; letter-spacing:0.03em;}

/* ---------- instagram placeholder grid ---------- */
.reel-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(min-width:640px){ .reel-grid{grid-template-columns:repeat(4,1fr);} }
.reel-card{position:relative; aspect-ratio:9/16; border-radius:10px; overflow:hidden; background:linear-gradient(155deg, var(--bg-3), var(--bg-2)); border:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;}
.reel-card::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 22px);}
.reel-play{width:46px; height:46px; border-radius:50%; background:rgba(227,6,19,0.9); display:flex; align-items:center; justify-content:center; position:relative; z-index:2;}
.reel-play svg{width:18px; height:18px; fill:#fff; margin-left:2px;}
.reel-label{position:absolute; bottom:12px; left:0; right:0; text-align:center; font-family:'Oswald'; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-muted); z-index:2;}
.reel-note{text-align:center; font-size:13px; color:var(--ink-muted); margin-top:24px;}

/* ---------- blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
@media(min-width:900px){ .blog-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{background:var(--card-bg); border:1px solid var(--card-border); border-radius:8px; overflow:hidden; transition:transform .3s, box-shadow .3s;}
.blog-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,0.08);}
.blog-thumb{aspect-ratio:16/10; position:relative; overflow:hidden;}
.blog-thumb::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 24px);}
.blog-thumb .b-icon{position:absolute; bottom:14px; left:16px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.15); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:2;}
.blog-thumb .b-icon svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.8;}
.blog-body-card{padding:20px 20px 22px;}
.blog-tag{font-family:'Oswald'; font-size:10.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--red); margin-bottom:8px; display:block;}
.blog-card h3{font-family:'Oswald'; font-size:16px; font-weight:600; margin-bottom:8px; line-height:1.35;}
.blog-card p{font-size:13.5px; color:var(--on-light-muted); margin-bottom:12px;}
.blog-meta{font-size:11.5px; color:var(--surface-variant-txt, #9a9a9d); display:flex; gap:10px;}

/* article page */
.article-hero-img{aspect-ratio:21/9; border-radius:8px; position:relative; overflow:hidden; margin-bottom:8px;}
.article-hero-img::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px);}
.article-hero-img .ph-label{position:absolute; bottom:16px; left:20px; font-family:'Oswald'; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.75); z-index:2;}
.article-meta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:18px 0 8px; font-family:'Oswald'; font-size:12px; letter-spacing:0.03em; text-transform:uppercase; color:var(--on-light-muted);}
.article-meta-row .dot{width:4px; height:4px; border-radius:50%; background:var(--on-light-muted);}
.article-body{max-width:740px; margin:0 auto;}
.article-body p{font-size:15.5px; color:var(--on-light-muted); line-height:1.8; margin-bottom:20px;}
.article-body h2{font-family:'Oswald'; font-weight:600; text-transform:none; font-size:22px; color:var(--on-light); margin:36px 0 14px;}
.article-body ul{padding-left:20px; margin-bottom:20px;}
.article-body li{font-size:15px; color:var(--on-light-muted); margin-bottom:10px; line-height:1.6;}
.article-body strong{color:var(--on-light); font-weight:600;}
.article-inline-img{aspect-ratio:16/8; border-radius:8px; margin:30px 0; position:relative; overflow:hidden;}
.article-inline-img::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px);}
.article-cta-box{background:var(--bg); color:#fff; border-radius:8px; padding:32px; text-align:center; margin:40px 0;}
.article-cta-box h3{font-family:'Oswald'; font-weight:600; text-transform:uppercase; font-size:19px; margin-bottom:10px;}
.article-cta-box p{color:var(--ink-muted); margin-bottom:20px; font-size:14.5px;}
.author-box{display:flex; gap:14px; align-items:center; border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border); padding:20px 0; margin:34px 0;}
.author-avatar{width:44px; height:44px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Oswald'; font-weight:700; flex:none;}
.author-box .an{font-family:'Oswald'; font-weight:600; font-size:14px;}
.author-box .ar{font-size:12.5px; color:var(--on-light-muted);}