/* ==========================================================================
   HOME PAGE — hero, about preview, stats, services teaser, before/after,
   why-choose grid, faq, recent work carousel.
   ========================================================================== */

/* Hero */
.tpa-home-hero{ position:relative; min-height:clamp(560px,80vh,820px); display:flex; align-items:center; overflow:hidden; }
.tpa-home-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tpa-home-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.7) 10%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.12) 100%),
             linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
}
.tpa-home-hero-inner{ position:relative; max-width:1240px; margin:0 auto; width:100%; padding:0 clamp(16px,4vw,48px); display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.tpa-home-hero-copy{ max-width:640px; }
.tpa-home-hero-copy h1{ font-family:var(--font-head); font-weight:800; font-size:clamp(40px,6vw,72px); line-height:1.02; color:#fff; text-transform:uppercase; margin:0 0 20px; }
.tpa-home-hero-copy h1 span{ color:var(--color-red); }
.tpa-home-hero-copy p{ color:#c7c7c7; font-size:clamp(16px,1.6vw,18px); line-height:1.6; max-width:460px; margin:0 0 32px; }
.tpa-home-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.tpa-home-hero-card{ background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); padding:22px 26px; max-width:220px; backdrop-filter:blur(2px); }
.tpa-home-hero-card strong{ display:block; color:#fff; font-family:var(--font-head); font-weight:700; font-size:16px; text-transform:uppercase; margin-bottom:10px; }
.tpa-home-hero-card span{ color:var(--color-text-faint); font-size:13px; line-height:1.6; }

/* About preview */
.tpa-about-preview{ background:var(--color-bg); padding:clamp(60px,8vw,120px) clamp(16px,4vw,48px); }
.tpa-about-preview-inner{ max-width:1240px; margin:0 auto; display:flex; gap:clamp(32px,5vw,72px); align-items:center; flex-wrap:wrap; }
.tpa-about-collage{ position:relative; flex:1 1 380px; min-width:300px; height:460px; }
.tpa-about-collage img{ position:absolute; border-radius:14px; box-shadow:0 24px 50px rgba(0,0,0,.5); object-fit:cover; }
.tpa-about-collage img:nth-of-type(1){ left:0; top:0; width:78%; height:82%; }
.tpa-about-collage img:nth-of-type(2){ right:0; bottom:0; width:50%; height:48%; border:5px solid var(--color-bg); box-shadow:0 18px 40px rgba(0,0,0,.6); }
.tpa-about-collage-accent{ position:absolute; left:-10px; bottom:22%; width:32px; height:32px; background:var(--color-red); border-radius:8px; z-index:2; }
.tpa-about-preview-copy{ flex:1 1 420px; min-width:300px; }
.tpa-about-preview-copy h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1.1; color:#fff; text-transform:uppercase; margin:0 0 18px; }
.tpa-about-preview-copy p{ color:var(--color-text-muted); font-size:16px; line-height:1.75; max-width:480px; margin:0 0 28px; }
.tpa-link-underline{ color:#fff; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid var(--color-red); padding-bottom:4px; }

/* Stats */
.tpa-stats{ background:var(--color-bg); padding:0 clamp(16px,4vw,48px) clamp(60px,7vw,100px); }
.tpa-stats-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px; border-top:1px solid rgba(255,255,255,.08); padding-top:48px; }
.tpa-stat-card{ position:relative; background:var(--color-bg-alt2); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:30px 22px; overflow:hidden; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.tpa-stat-card:hover{ transform:translateY(-6px); border-color:rgba(209,1,19,.5); box-shadow:0 16px 30px rgba(0,0,0,.4); }
.tpa-stat-ring{ position:absolute; top:-14px; right:-14px; width:64px; height:64px; border:1px solid rgba(209,1,19,.18); border-radius:50%; }
.tpa-stat-card svg{ color:var(--color-red); }
.tpa-stat-value{ font-family:var(--font-head); font-weight:800; font-size:22px; color:#fff; text-transform:uppercase; margin-top:16px; }
.tpa-stat-label{ color:var(--color-text-faint); font-size:13px; margin-top:6px; }

/* Services teaser (white section) */
.tpa-services-teaser{ background:#fff; padding:clamp(60px,8vw,120px) clamp(16px,4vw,48px); position:relative; overflow:hidden; }
.tpa-bubble{ position:absolute; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(209,1,19,.08), rgba(209,1,19,.02) 60%, transparent 70%); border:1px solid rgba(209,1,19,.12); pointer-events:none; animation:tpaFloat 9s ease-in-out infinite; }
@keyframes tpaFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.tpa-services-teaser-head{ text-align:center; max-width:640px; margin:0 auto 56px; position:relative; }
.tpa-services-teaser-head h2{ color:#0a0a0a; }
.tpa-services-teaser-head h2 span{ color:var(--color-red); }
.tpa-services-teaser-head p{ color:#5c5c5c; font-size:16px; line-height:1.7; }
.tpa-services-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr minmax(260px,340px) 1fr; gap:28px; align-items:center; position:relative; }
.tpa-services-grid-col{ display:flex; flex-direction:column; gap:16px; }
.tpa-svc-teaser-card{ position:relative; display:block; text-decoration:none; background:#f7f7f7; border:1px solid #ececec; border-radius:12px; padding:22px 20px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; overflow:hidden; }
.tpa-svc-teaser-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.08); border-color:var(--color-red); }
.tpa-svc-teaser-top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.tpa-svc-teaser-top svg{ color:var(--color-red); }
.tpa-svc-teaser-num{ color:var(--color-red); font-family:var(--font-head); font-weight:800; font-size:20px; }
.tpa-svc-teaser-card h3{ color:#0a0a0a; font-family:var(--font-head); font-weight:700; font-size:17px; text-transform:uppercase; margin:0 0 6px; }
.tpa-svc-teaser-card p{ color:#6b6b6b; font-size:13.5px; line-height:1.55; margin:0; }
.tpa-svc-teaser-underline{ position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--color-red); transition:width .35s ease; }
.tpa-svc-teaser-card:hover .tpa-svc-teaser-underline{ width:100%; }
.tpa-services-center img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:16px; box-shadow:0 30px 60px rgba(0,0,0,.15); }
.tpa-services-center-actions{ display:flex; flex-direction:column; align-items:center; gap:20px; }

/* Before / after slider */
.tpa-before-after{ background:var(--color-bg); padding:clamp(60px,8vw,120px) clamp(16px,4vw,48px); }
.tpa-before-after-inner{ max-width:1240px; margin:0 auto; display:flex; gap:clamp(32px,5vw,72px); align-items:center; flex-wrap:wrap; }
.tpa-ba-copy{ flex:1 1 380px; min-width:280px; }
.tpa-ba-copy h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1.1; color:#fff; text-transform:uppercase; margin:0 0 18px; }
.tpa-ba-copy p{ color:var(--color-text-muted); font-size:16px; line-height:1.75; max-width:440px; margin:0 0 26px; }
.tpa-ba-slider{ flex:1 1 420px; min-width:300px; position:relative; aspect-ratio:4/3; overflow:hidden; touch-action:pan-y; }
.tpa-ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tpa-ba-before-wrap{ position:absolute; inset:0; overflow:hidden; }
.tpa-ba-handle-line{ position:absolute; top:0; bottom:0; width:3px; background:var(--color-red); pointer-events:none; }
.tpa-ba-handle-dot{ position:absolute; top:50%; width:36px; height:36px; border-radius:50%; background:var(--color-red); transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; pointer-events:none; color:#fff; font-size:14px; }
.tpa-ba-slider input[type="range"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }

/* Why choose (full-bleed, white) */
.tpa-why{ background:#fff; padding:clamp(60px,8vw,120px) 0 0; }
.tpa-why-head{ max-width:620px; margin:0 auto 52px; padding:0 clamp(16px,4vw,48px); text-align:center; }
.tpa-why-head h2{ color:#0a0a0a; }
.tpa-why-head p{ color:#555; font-size:16px; line-height:1.7; }
.tpa-why-title,.tpa-why-desc{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.js-reveal-ready .reveal.is-visible .tpa-why-title{ opacity:1; transform:translateY(0); }
.js-reveal-ready .reveal.is-visible .tpa-why-desc{ opacity:1; transform:translateY(0); transition-delay:.12s; }
.tpa-why-grid{ width:100%; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.tpa-why-cell{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell{ opacity:1; transform:translateY(0); }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(1){ transition-delay:0s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(2){ transition-delay:.06s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(3){ transition-delay:.12s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(4){ transition-delay:.18s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(5){ transition-delay:.24s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(6){ transition-delay:.3s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(7){ transition-delay:.36s; }
.js-reveal-ready .reveal.is-visible .tpa-why-cell:nth-child(8){ transition-delay:.42s; }
.tpa-why-img-wrap{ position:relative; aspect-ratio:1/0.9; overflow:hidden; }
.tpa-why-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.tpa-why-img-wrap:hover img{ transform:scale(1.06); }
.tpa-why-text{ aspect-ratio:1/0.9; display:flex; flex-direction:column; justify-content:center; padding:26px 22px; transition:transform .35s ease; }
.tpa-why-text:hover{ transform:translateY(-4px); }
.tpa-why-num{ font-family:var(--font-head); font-weight:800; font-size:14px; letter-spacing:.1em; margin-bottom:10px; transition:text-shadow .3s ease; }
.tpa-why-text:hover .tpa-why-num{ text-shadow:0 0 10px rgba(209,1,19,.6); }
.tpa-why-text h3{ font-family:var(--font-head); font-weight:700; font-size:18px; text-transform:uppercase; margin:0 0 8px; }
.tpa-why-text p{ font-size:13.5px; line-height:1.6; margin:0; }
@media (max-width:900px){ .tpa-why-grid{ grid-template-columns:repeat(2,1fr); } }

/* FAQ */
.tpa-faq{ background:var(--color-bg); padding:clamp(60px,8vw,120px) clamp(16px,4vw,48px); }
.tpa-faq-inner{ max-width:1240px; margin:0 auto; display:flex; gap:clamp(32px,5vw,72px); flex-wrap:wrap; }
.tpa-faq-head{ flex:1 1 320px; min-width:260px; }
.tpa-faq-head h2{ font-family:var(--font-head); font-weight:800; font-size:clamp(30px,4vw,44px); line-height:1.1; color:#fff; text-transform:uppercase; margin:0 0 24px; }
.tpa-faq-list{ flex:2 1 420px; min-width:300px; }
.tpa-faq-item{ border-bottom:1px solid rgba(255,255,255,.1); }
.tpa-faq-question{ width:100%; background:none; border:none; padding:20px 0; display:flex; justify-content:space-between; align-items:center; text-align:left; color:#fff; font-size:16px; font-weight:600; }
.tpa-faq-question .tpa-faq-symbol{ color:var(--color-red); font-size:20px; flex-shrink:0; margin-left:16px; }
.tpa-faq-answer{ color:var(--color-text-faint); font-size:14.5px; line-height:1.7; padding:0 0 20px; margin:0; max-width:520px; display:none; }
.tpa-faq-item.is-open .tpa-faq-answer{ display:block; }

/* Recent work carousel */
.tpa-recent{ background:var(--color-bg-alt); padding:clamp(48px,6vw,72px) 0; position:relative; overflow:hidden; }
.tpa-recent-heading{ text-align:center; color:#fff; font-family:var(--font-head); font-weight:700; font-size:clamp(22px,3vw,28px); text-transform:uppercase; letter-spacing:.04em; margin-bottom:32px; position:relative; }
.tpa-recent-wrap{ position:relative; }
.tpa-recent-track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 clamp(16px,4vw,48px); scrollbar-width:none; -ms-overflow-style:none; }
.tpa-recent-track::-webkit-scrollbar{ display:none; }
.tpa-recent-item{ position:relative; flex:0 0 clamp(190px,25vw,290px); aspect-ratio:1/1; overflow:hidden; scroll-snap-align:start; cursor:zoom-in; border-radius:6px; }
.tpa-recent-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.tpa-recent-item:hover img{ transform:scale(1.12); }
.tpa-recent-glow{ position:absolute; inset:0; border:2px solid transparent; transition:border-color .35s ease, box-shadow .35s ease; pointer-events:none; }
.tpa-recent-item:hover .tpa-recent-glow, .tpa-recent-item:active .tpa-recent-glow{ border-color:rgba(209,1,19,.55); box-shadow:0 0 24px rgba(209,1,19,.2) inset; }
.tpa-recent-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:18px; }
.tpa-recent-arrow-prev{ left:6px; }
.tpa-recent-arrow-next{ right:6px; }
.tpa-recent-footer{ text-align:center; margin-top:32px; position:relative; }
@media (max-width:640px){
  .tpa-recent-item{ flex-basis:80vw; }
  .tpa-recent-track{ padding-left:10vw; padding-right:10vw; }
  .tpa-recent-arrow{ width:38px; height:38px; }
  .tpa-recent-arrow-prev{ left:2px; }
  .tpa-recent-arrow-next{ right:2px; }
}

/* Lightbox (shared visual pattern, used on Home + Portfolio) */
.tpa-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:998; display:none; align-items:center; justify-content:center; padding:40px; }
.tpa-lightbox.is-open{ display:flex; }
.tpa-lightbox img{ max-width:90vw; max-height:85vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.tpa-lightbox-btn{ position:absolute; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:20px; z-index:1000; }
.tpa-lightbox-close{ top:24px; right:24px; }
.tpa-lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:22px; }
.tpa-lightbox-next{ right:24px; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:22px; }

@media (max-width:900px){ .tpa-services-grid{ grid-template-columns:1fr; } .tpa-services-center{ order:99; margin:8px 0 4px; } }
@media (max-width:680px){
  .tpa-about-collage{ height:520px; }
  .tpa-about-collage img:nth-of-type(1){ width:100%; height:60%; }
  .tpa-about-collage img:nth-of-type(2){ width:68%; height:42%; }
}