/* ============================================================
   2T5 FILM — HOME PAGE STYLES  v3
   ============================================================ */

/* ============================================================
   HERO — full-page background video with nav arrows
   ============================================================ */
.hero {
  position:relative; width:100%; height:100svh; min-height:560px;
  overflow:hidden; background:var(--black);
  display:flex; flex-direction:column; justify-content:flex-end;
}

/* Background video layer */
.hero-video-wrap {
  position:absolute; inset:0; z-index:0;
}
/* Poster images — slide background, always visible when active */
.hero-poster {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.2s var(--ease-out);
}
.hero-poster.active { opacity:1; }
/* Videos — sit above posters, fade in only once canplay fires */
.hero-video-wrap video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease-out);
}
.hero-video-wrap video.active.ready { opacity:1; }
.hero-video-wrap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(10,9,8,.88) 0%,
    rgba(10,9,8,.35) 40%,
    rgba(10,9,8,.15) 70%,
    rgba(10,9,8,.25) 100%
  );
  z-index:1;
}

/* Grain */
.hero-grain {
  position:absolute; inset:-50%; width:200%; height:200%; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  opacity:.4; animation:grain .9s steps(2) infinite; pointer-events:none;
}
@keyframes grain {
  0%  { transform:translate(0,0); }
  25% { transform:translate(-2%,-3%); }
  50% { transform:translate(3%,1%); }
  75% { transform:translate(-1%,3%); }
  100%{ transform:translate(2%,-2%); }
}

/* Content layer */
.hero-content {
  position:relative; z-index:3;
  padding:0 60px 64px;
  display:flex; flex-direction:column;
}
@media(max-width:768px){ .hero-content{ padding:0 20px 48px; } }
@media(max-width:480px){ .hero-title{ font-size:clamp(36px,11vw,56px); } }

.hero-eyebrow {
  display:none;
}
.hero-eyebrow::before{ content:none; }

.hero-title {
  font-family:var(--ff-g); font-weight:800;
  font-size:clamp(56px,9vw,148px);
  color:var(--white); letter-spacing:-.02em; line-height:.92;
  text-transform:uppercase;
}
.hero-title em { font-style:normal; color:var(--red); }

.hero-tagline {
  margin-top:22px;
  font-family:var(--ff-g); font-size:clamp(9px,1vw,11px); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45);
}

/* Video dot indicators */
.hero-dots {
  display:flex; gap:8px; margin-top:32px; align-items:center;
}
.hero-dot {
  width:24px; height:2px; background:rgba(255,255,255,.25);
  transition:background .3s, width .3s;
  border:none; padding:0;
}
.hero-dot.active { background:var(--red); width:40px; }

/* Left / Right video nav arrows */
.hero-arrow {
  position:absolute; top:50%; z-index:4; transform:translateY(-50%);
  background:rgba(10,9,8,.35); border:1px solid rgba(255,255,255,.12);
  color:var(--white); width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s;
  font-size:18px; backdrop-filter:blur(4px);
}
.hero-arrow:hover { background:var(--red); border-color:var(--red); }
.hero-arrow-prev { left:28px; }
.hero-arrow-next { right:28px; }
@media(max-width:768px){
  .hero-arrow { width:44px; height:44px; font-size:14px; }
  .hero-arrow-prev{ left:12px; }
  .hero-arrow-next{ right:12px; }
  .hero-dot { min-width:44px; min-height:44px; display:flex; align-items:center; background-clip:content-box; padding:21px 10px; }
}

/* Scroll indicator */
.hero-scroll {
  position:absolute; bottom:60px; right:60px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:9px; opacity:.4;
  animation:scrollBounce 2.4s ease-in-out infinite;
}
@media(max-width:768px){ .hero-scroll{ display:none; } }
@keyframes scrollBounce {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(8px); }
}
.hero-scroll span {
  font-family:var(--ff-g); font-size:8px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.5); writing-mode:vertical-rl;
}
.scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent); }

/* Light variant — for dark-background sections */
.home-svc-title { color:var(--white); }
.home-svc-title:hover { color:rgba(255,255,255,.7); }

/* ── TICKER STRIP ── */
.intro-strip {
  background:var(--black); height:44px;
  display:flex; align-items:center; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.04);
}
.ticker {
  display:flex; gap:56px; white-space:nowrap;
  animation:ticker 20s linear infinite;
  font-family:var(--ff-g); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:#2e2a26;
}
.ticker b { color:var(--red); font-weight:700; }
@keyframes ticker { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

/* ============================================================
   HOME RECENT PROJECTS (just below hero) — layout only
   Core .home-recent, .hw-* styles live in main.css
   ============================================================ */
.home-recent { padding:36px 0 80px; }

/* ============================================================
   HOME ABOUT (below recent projects)
   ============================================================ */
.home-about {
  padding:100px 0; background:var(--paper);
}
.home-about-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start;
}
@media(max-width:900px){ .home-about-grid{ grid-template-columns:1fr; gap:48px; } }

.home-about-headline {
  font-family:var(--ff-g);
  font-size:clamp(30px,3.8vw,58px); font-weight:300;
  letter-spacing:-.01em; line-height:1.08; margin-bottom:22px;
}
.home-about-headline strong { font-weight:800; }
.home-about-headline em { font-style:italic; color:var(--red); }

.home-about-body {
  font-family:var(--ff-g); font-size:14px; font-weight:300; line-height:1.9; color:var(--gray-text);
}
.home-about-body strong { color:var(--black); font-weight:600; }
.home-about-cities { display:flex; gap:20px; margin-top:24px; }
.city-dot {
  display:none;
}
.city-dot::before { content:none; }

.home-about-right { border-left:1px solid var(--border); padding-left:40px; }
@media(max-width:900px){ .home-about-right{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:40px; } }

.manifesto-quote {
  font-family:var(--ff-g); font-size:clamp(17px,2vw,26px);
  font-weight:300; font-style:italic; line-height:1.5; color:var(--black); margin-bottom:20px;
}
.manifesto-sub { font-family:var(--ff-g); font-size:13px; font-weight:300; line-height:1.9; color:var(--gray-text); }

/* ============================================================
   SERVICES TEASER (on homepage — prominent)
   ============================================================ */
.services-teaser {
  background:var(--black); padding:80px 0 0;
}

.services-teaser-header {
  padding:0 60px 48px;
}
@media(max-width:768px){ .services-teaser-header{ padding:0 20px 36px; } }

/* 4-card preview grid — edge to edge */
.svc-teaser-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
}
@media(max-width:900px){ .svc-teaser-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .svc-teaser-grid{ grid-template-columns:1fr; } }

.svc-teaser-card {
  position:relative; aspect-ratio:16/9;
  overflow:hidden; display:block;
  text-decoration:none; background:#111;
}
.svc-teaser-visual {
  position:absolute; inset:0;
}
.svc-teaser-visual video,
.svc-teaser-visual img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.55) brightness(.75);
  transition:transform .65s var(--ease-out), filter .45s;
}
.svc-teaser-card:hover .svc-teaser-visual video,
.svc-teaser-card:hover .svc-teaser-visual img {
  transform:scale(1.05); filter:saturate(1) brightness(.88);
}
.svc-teaser-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.15) 55%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px;
}
.svc-teaser-label {
  font-family:var(--ff-g); font-size:8px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--red); margin-bottom:7px;
}
.svc-teaser-name {
  font-family:var(--ff-g); font-size:clamp(13px,1.3vw,18px); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--white); line-height:1.1;
}

.svc-card {
  background:#111010; padding:42px 36px; position:relative; overflow:hidden;
  transition:background .35s;
}
.svc-card:hover { background:#181614; }
.svc-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease-out);
}
.svc-card:hover::before { transform:scaleY(1); }

.svc-num {
  font-family:var(--ff-g); font-size:10px; font-weight:500; letter-spacing:.2em;
  color:#2a2620; margin-bottom:18px;
}
.svc-icon {
  width:100%; height:160px; background:#1a1714; margin-bottom:22px;
  overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.svc-icon img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.5) brightness(.7);
  transition:transform .55s var(--ease-out), filter .4s;
}
.svc-card:hover .svc-icon img { transform:scale(1.04); filter:saturate(1) brightness(.9); }
.svc-icon-placeholder {
  width:100%; height:100%; background:linear-gradient(135deg,#1a1714,#0e0d0c);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-g); font-size:9px; font-weight:500; letter-spacing:.18em;
  color:#2e2a26; text-transform:uppercase;
}
.svc-title {
  font-family:var(--ff-g); font-size:clamp(18px,2vw,26px); font-weight:600;
  color:var(--white); margin-bottom:8px; letter-spacing:.02em; text-transform:uppercase;
}
.svc-desc { font-family:var(--ff-g); font-size:12px; font-weight:300; line-height:1.75; color:var(--gray); margin-bottom:16px; }
.svc-more-btn {
  font-family:var(--ff-g); font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); background:none; border:none;
  display:inline-flex; align-items:center; gap:8px; padding:0;
  transition:gap .25s; margin-top:4px;
}
.svc-more-btn:hover { gap:14px; }
.svc-more-btn::after { content:'→'; }

/* ── ACCESSIBILITY — reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal.js-hidden { opacity: 1 !important; transform: none !important; }
}