/* ═══════════════════════════════════
   HOME PAGE
═══════════════════════════════════ */

/* ── SCROLL REVEAL ── */
.rv{opacity:0;transform:translateY(32px);transition:opacity 0.7s ease,transform 0.7s ease}
.rv.in{opacity:1;transform:none}
.rv-delay-1{transition-delay:0.1s}
.rv-delay-2{transition-delay:0.2s}
.rv-delay-3{transition-delay:0.3s}

/* ── HERO ── */
.hero{position:relative;width:100%;min-height:100vh;overflow:hidden;background:var(--red);display:flex;align-items:flex-end}

/* Dark backdrop — same treatment as the Case Studies hero (base.css --black + grid + red spotlight) */
.hero-brand-section{background:var(--black,#1c1917)}
.hero-bg-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
}
.hero-bg-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 60% at 50% 42%, rgba(234,37,44,.28), rgba(234,37,44,.08) 45%, transparent 75%);
  animation:cs-glow-pulse 6s ease-in-out infinite;
}
@keyframes cs-glow-pulse{0%,100%{opacity:.65}50%{opacity:1}}

/* Giant transparent wordmark — EDITABLE: text is set in index.html markup */
.hero-bg-text{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 0 0 clamp(24px,6vw,100px);
  pointer-events:none;user-select:none;
  padding-left: 400px;
}
.hero-bg-text span{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(48px,9.5vw,150px);line-height:.94;
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
  color:var(--red,#ea252c);opacity:.14;
}

/* Floating tool logos — EDITABLE: positions/sizes/timing are set inline per-icon in index.html via CSS custom properties */
.hero-float-icons{position:absolute;inset:0;z-index:2;pointer-events:none}
.hfi{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.hfi-inner{
  opacity:0;
  animation:hfiFadeIn .9s var(--ease,cubic-bezier(.16,1,.3,1)) var(--delay,0s) 1 forwards;
}
.hfi-img{
  display:block;width:var(--size,64px);height:var(--size,64px);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5));
  animation:hfiFloat var(--dur,7s) ease-in-out var(--delay,0s) infinite;
}
@keyframes hfiFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes hfiFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
@media(max-width:1100px){
  .hero-float-icons{display:none}
}

/* Portrait cutout — EDITABLE: change images/hero-portrait-cutout.png to swap the hero visual */
.hero-brand-frame{
  position:absolute;inset:0;z-index:2;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;
}
.hero-brand-img{
  height:92%;width:auto;max-width:none;object-fit:contain;
  filter:drop-shadow(0 40px 50px rgba(0,0,0,.55));
  opacity:0;transform:translateY(24px);
  animation:heroImgIn 1.1s var(--ease,cubic-bezier(.16,1,.3,1)) .15s 1 both;
}
@keyframes heroImgIn{
  0%{opacity:0;transform:translateY(24px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Gold name lockup beside the portrait */
.hero-name-side{
  position:absolute;z-index:1;
  top:44%;left:calc(36% + clamp(120px,17vw,300px));
  font-family:'Poppins',sans-serif;font-weight:700;
  font-size:clamp(53px,3.4vw,48px);line-height:1.18;
  letter-spacing:.01em;text-transform:uppercase;
  color:#ddb96b;
}

.hero-content{position:relative;z-index:3;left:0;top:0;padding-left:100px;max-width:640px}
.hero-content-brand{
  width:100%;max-width:none;padding:0 100px 56px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.hero-name{
  font-family:'Permanent Marker',cursive;
  font-size:clamp(46px,6.4vw,86px);
  color:#ea252c;text-transform:uppercase;
  line-height:.98;letter-spacing:.01em;margin-bottom:14px;
}
.hero-role{
  font-family:'Kalam',cursive;font-weight:700;
  font-size:22px;color:#1c1917;letter-spacing:.02em;
  text-transform:uppercase;
}
.hero-status{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;padding:8px 16px;
  border:1px solid #d9d9d9;border-radius:30px;
  font-size:11px;font-weight:600;color:#1c1917;
  letter-spacing:.04em;text-transform:uppercase;
}
.hero-status-dot{width:7px;height:7px;border-radius:50%;background:#2e9e5b;flex-shrink:0;box-shadow:0 0 0 3px rgba(46,158,91,.15)}
/* Status badge sits over the photo — needs light text/border, not the default dark ones above */
.hero-content-brand .hero-status{
  margin-top:0;color:#fff;border-color:rgba(255,255,255,.4);
  background:rgba(0,0,0,.25);backdrop-filter:blur(4px);
}
.hero-content-brand .hero-cta{margin-top:0}
.hero-content-brand .hero-btn-text{color:#fff}
.hero-content-brand .hero-btn-text:hover{color:#ffd166}
.hero-scroll-hint{position:absolute;right:100px;bottom:80px;font-size:8px;font-weight:300;color:#9b958f;letter-spacing:2px;text-transform:uppercase;z-index:3}
.hero-divider{position:absolute;bottom:0;left:100px;right:100px;height:1px;background:#d9d9d9;z-index:2}
@media(max-width:1100px){
  .hero-content-brand{padding:0 40px 40px}
  .hero-name-side{left:calc(50% + 90px);top:22%}
}
@media(max-width:820px){
  .hero-content{padding-left:24px}
  .hero-content-brand{padding:0 24px 32px;justify-content:flex-start}
  .hero-cta{flex-wrap:wrap;gap:16px}
  .hero-scroll-hint,.hero-divider{display:none}
  .hero-brand-img{height:62%}
  .hero-bg-text span{font-size:clamp(38px,13vw,64px)}
  .hero-name-side{
    left:50%;top:auto;bottom:34%;transform:translateX(-50%);
    text-align:center;font-size:clamp(18px,5vw,26px);
  }
}

/* ── BIO ── */
.section-bio{padding:100px 100px 100px}
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.bio-eyebrow{font-size:12px;font-weight:500;color:#ea252c;margin-bottom:16px}
.bio-eyebrow span{letter-spacing:4.8px;text-transform:uppercase}
.bio-quote{font-size:12px;color:#828282;font-style:italic}
.bio-heading{font-size:32px;font-weight:700;color:#000;line-height:1.4;margin-bottom:24px}
.bio-heading em{color:#e50b1c;font-style:normal}
.bio-body{font-size:16px;color:#828282;line-height:1.7;margin-bottom:32px}
.bio-cta{font-size:12px;font-weight:700;color:#000;letter-spacing:3.6px;text-transform:uppercase;text-decoration:none}
.bio-divider{height:1px;background:#d9d9d9;margin:0 100px}

/* ── SERVICES ── */
.section-services{padding:100px 100px 80px}
.section-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px}
.section-eyebrow{font-size:12px;font-weight:500;color:#ea252c}
.section-eyebrow span{letter-spacing:4.8px;text-transform:uppercase}
.section-title{font-size:32px;font-weight:700;color:#000;margin-top:8px}
.section-subtitle-right{font-size:10px;color:#828282;letter-spacing:2px;text-transform:uppercase;text-align:right}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid #e8e6e3}
.svc-card{padding:40px 32px;border-right:1px solid #e8e6e3;border-bottom:1px solid #e8e6e3;transition:background 0.3s}
.svc-card:hover{background:#fafaf9}
.svc-card:nth-child(3n){border-right:none}
.svc-card:nth-child(n+4){border-bottom:none}
.svc-card-num{font-size:10px;color:#ea252c;letter-spacing:3px;font-weight:500;margin-bottom:24px}
.svc-card-title{font-size:16px;font-weight:600;color:#1c1917;margin-bottom:12px;line-height:1.3}
.svc-card-body{font-size:13px;color:#828282;line-height:1.7}
.svc-card-tag{display:inline-block;margin-top:16px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#ea252c;border:1px solid rgba(234,37,44,0.3);padding:4px 10px;border-radius:20px}
.svc-divider{height:1px;background:#d9d9d9;margin:0 100px}

/* ── AI & DESIGN TOOLKIT ── */
.section-toolkit{padding:80px 100px}
.toolkit-row{display:flex;flex-wrap:wrap;gap:16px}
.toolkit-badge{
  display:flex;align-items:center;gap:14px;
  padding:14px 22px 14px 14px;
  border:1px solid #e8e6e3;border-radius:14px;
  transition:border-color .2s,background .2s;
}
.toolkit-badge:hover{border-color:var(--red);background:#fafaf9}
.toolkit-icon{
  width:40px;height:40px;border-radius:10px;
  background:var(--black);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  flex-shrink:0;
}
.toolkit-name{font-size:13px;font-weight:600;color:#1c1917}
@media(max-width:700px){
  .section-toolkit{padding:56px 24px}
  .toolkit-row{gap:12px}
  .toolkit-badge{flex:1 1 45%}
}

/* ── TOOLS I'VE WORKED WITH (marquee, same pattern as clients) ── */

/* ── FAQ ── */
.section-faq{padding:100px 100px}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid #e8e6e3}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:24px 4px;
  font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;color:#1c1917;
}
.faq-icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1px solid #d9d9d9;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:400;color:#828282;transition:transform .25s,background .2s,color .2s,border-color .2s;
}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--black);color:#fff;border-color:var(--black)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{font-size:14px;color:#666;line-height:1.75;padding:0 4px 24px;max-width:680px}
.faq-a a{color:var(--red);text-decoration:underline}
.faq-item.open .faq-a{max-height:200px}
@media(max-width:700px){
  .section-faq{padding:64px 24px}
  .faq-q{font-size:14px;padding:18px 2px}
}
.section-clients{padding:100px 0 0}
.clients-header{padding:0 100px;margin-bottom:40px;display:flex;justify-content:center}
.clients-eyebrow{font-size:12px;font-weight:500;color:#ea252c;text-align:center}
.clients-eyebrow span{letter-spacing:4.8px;text-transform:uppercase}
.clients-marquee-wrap{overflow:hidden;width:100%}
.clients-marquee{display:flex;gap:80px;animation:marquee 20s linear infinite;white-space:nowrap;padding:0 40px}
.clients-marquee:hover{animation-play-state:paused}
.client-name{font-size:16px;font-weight:500;color:#1c1917;letter-spacing:1.6px;text-transform:uppercase;cursor:pointer;transition:color 0.2s;white-space:nowrap}
.client-name:hover{color:#ea252c}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── HOME: TESTIMONIALS ──────────────────── */
.section-testi{padding:150px 100px 100px}
.testi-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px}

/* GRID OF TESTIMONIAL CARDS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.testi-gcard{
  background:#fff;border:1px solid #ecebe8;border-radius:16px;
  padding:28px 26px 26px;display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;
}
.testi-gcard:hover{border-color:#ddd9d3;transform:translateY(-2px)}
.testi-gtag{
  display:inline-flex;align-self:flex-start;
  background:#fdeceb;color:var(--red,#ea252c);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:6px 14px;border-radius:20px;margin-bottom:18px;
}
.testi-gquote{font-size:14px;line-height:1.7;color:#1c1917;margin-bottom:24px;flex:1}
.testi-gauthor{display:flex;align-items:center;gap:12px}
.testi-gavatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:#fdeceb;color:var(--red,#ea252c);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.testi-gname{font-size:13.5px;font-weight:700;color:#010101}
.testi-grole{font-size:11.5px;color:#828282;margin-top:1px}

.testi-gcard-cta{
  background:#fdeceb;border:1px solid #fbdad8;
  align-items:center;justify-content:center;text-align:center;
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s;
}
.testi-gcard-cta:hover{background:#fbe0de;border-color:var(--red,#ea252c);transform:translateY(-2px)}
.testi-gcta-plus{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--red,#ea252c);color:var(--red,#ea252c);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;margin-bottom:14px;
}
.testi-gcta-title{font-size:15px;font-weight:700;color:#010101;margin-bottom:4px}
.testi-gcta-sub{font-size:11.5px;color:#828282}

@media(min-width:901px) and (max-width:1200px){
  .testi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .testi-grid{grid-template-columns:1fr}
}

/* ── HOME: CASE STUDIES ─────────────────── */
.section-cases{padding:100px 100px 100px}
.cases-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px}
.cases-grid{display:flex;flex-direction:column;gap:40px}
.case-item{border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:#f5f4f2}
.case-item-img{width:100%;display:block;transition:transform 0.5s}
.case-item:hover .case-item-img{transform:scale(1.02)}
.case-overlay{padding:28px 32px;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px}
.case-meta{}
.case-tags{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.case-tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#828282;border:1px solid #d9d9d9;padding:4px 10px;border-radius:20px}
.case-title{font-size:22px;font-weight:700;color:#1c1917;margin-bottom:6px}
.case-desc{font-size:13px;color:#828282;line-height:1.5;max-width:600px}
.case-arrow{font-size:18px;color:#ea252c;font-weight:700;flex-shrink:0}
.cases-divider{height:1px;background:#d9d9d9;margin:0 100px}


/* ── HOME: CTA ───────────────────────────── */
.section-cta{padding:80px 100px 100px;display:flex;justify-content:center}
.cta-box{background:#1c1917;border-radius:20px;box-shadow:0 0 30px 10px rgba(0,0,0,0.15);padding:80px 60px;max-width:1100px;width:100%;text-align:center}
.cta-eyebrow{font-size:16px;font-weight:700;color:#ea252c;letter-spacing:4.8px;margin-bottom:32px}
.cta-heading{font-size:32px;font-weight:700;color:#fff;line-height:1.55;max-width:654px;margin:0 auto 24px}
.cta-body{font-size:18px;color:#fff;opacity:0.85;line-height:1.5;max-width:654px;margin:0 auto 48px}
.cta-btn{display:inline-block;background:#ea252c;color:#fff;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:12px 36px;border-radius:30px;border:none;cursor:pointer;text-decoration:none}

/* ════════════════════════════════════════
   HERO CTA BUTTONS (Change 1)
════════════════════════════════════════ */
.hero-cta{
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:40px;
}
.hero-btn-primary{
  display:inline-block;
  background:#1c1917;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 32px;
  border-radius:40px;
  transition:background .2s,transform .2s;
  white-space:nowrap;
}
.hero-btn-primary:hover{background:#ea252c;transform:scale(1.03)}
.hero-btn-text{
  font-family:'Poppins',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#1c1917;
  text-decoration:none;
  transition:color .2s;
  white-space:nowrap;
}
.hero-btn-text:hover{color:#ea252c}

/* ════════════════════════════════════════
   FEATURED CASE STUDIES — NEW LAYOUT (Change 2)
   Top row: large featured card + cream card (60/40)
   Bottom row: two equal dark cards
════════════════════════════════════════ */
.cs-layout{display:flex;flex-direction:column;gap:20px}

/* Top row */
.cs-top-row{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:stretch}
/* Bottom row */
.cs-bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}

/* Base card */
.cs-card{
  border-radius:16px;
  padding:40px 40px 32px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:340px;
  transition:transform .3s ease,box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 24px 56px rgba(0,0,0,0.18)}

/* Card variants */
.cs-card--featured{
  /* Dark warm brown gradient — top-left card */
  background:linear-gradient(145deg,#3b2410 0%,#7a4a1e 40%,#c4804a 100%);
  min-height:380px;
}
.cs-card--cream{
  /* Cream / warm beige — top-right card */
  background:#f0e8d8;
}
.cs-card--dark-red{
  /* Very dark warm brown, red tag */
  background:linear-gradient(145deg,#1a0e08 0%,#2d1a10 100%);
}
.cs-card--dark{
  /* Dark charcoal-brown */
  background:linear-gradient(145deg,#111008 0%,#201c10 100%);
}

/* Card internals */
.cs-card-tag{
  font-family:'Poppins',sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:20px;
}
/* Light tag on dark cards */
.cs-card--featured .cs-card-tag,
.cs-card--dark-red .cs-card-tag,
.cs-card--dark    .cs-card-tag{color:rgba(255,255,255,0.55)}
/* Dark tag on cream card */
.cs-card--cream   .cs-card-tag{color:#6b5a3e}
/* Red accent tag */
.cs-card-tag--red{color:#ea252c !important}

.cs-card-title{
  font-family:'Poppins',sans-serif;
  font-size:22px;
  font-weight:700;
  line-height:1.25;
  margin-bottom:14px;
}
.cs-card--featured .cs-card-title,
.cs-card--dark-red .cs-card-title,
.cs-card--dark    .cs-card-title{color:#fff}
.cs-card--cream   .cs-card-title{color:#1c1917}

.cs-card-desc{
  font-family:'Poppins',sans-serif;
  font-size:12px;
  line-height:1.7;
  margin-bottom:28px;
  flex:1;
}
.cs-card--featured .cs-card-desc,
.cs-card--dark-red .cs-card-desc,
.cs-card--dark    .cs-card-desc{color:rgba(255,255,255,0.6)}
.cs-card--cream   .cs-card-desc{color:#6b5a3e}

.cs-card-rule{
  border:none;
  border-top:1px solid rgba(255,255,255,0.2);
  margin:0 0 20px;
}
.cs-card--cream   .cs-card-rule{border-color:rgba(0,0,0,0.15)}
.cs-card-rule--red{border-color:#ea252c !important}

.cs-card-cta{
  font-family:'Poppins',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.cs-card--featured .cs-card-cta,
.cs-card--dark-red .cs-card-cta,
.cs-card--dark    .cs-card-cta{color:rgba(255,255,255,0.7)}
.cs-card--cream   .cs-card-cta{color:#6b5a3e}