/* Home v3 (lab): same structure and content as the live home, restyled from references */

/* ── Hero: Significa-style big statement, content unchanged ── */
body.v3 .hero-content { text-align: left !important; align-items: flex-start !important; max-width: 1640px; margin: 0 auto; padding: 110px 40px 0 !important; }
body.v3 .hero-badge { font-family: var(--font-mono); font-weight: 500 !important; font-size: 13px !important; letter-spacing: 2px !important; color: var(--text-primary) !important; margin-bottom: 28px !important; }
body.v3 .hero-title { font-family: var(--font-serif) !important; font-weight: 700 !important; font-size: clamp(56px, 7.4vw, 132px) !important; line-height: .98 !important; letter-spacing: -0.035em !important; text-align: left !important; }
body.v3 .hero-title br { display: block; }
body.v3 .hero-title .accent-text { color: rgba(26,13,3,.28) !important; }
body.v3 .hero-subtext { text-align: left !important; font-size: 22px !important; line-height: 1.45 !important; color: #6b5f57 !important; margin-left: 0 !important; }
body.v3 .hero-carousel-tags { justify-content: flex-start !important; max-width: 1640px; margin: 36px auto 40px !important; padding: 0 40px; }

/* ── Section titles: one style everywhere ── */
body.v3 .sec-title, body.v3 .clients-title, body.v3 .carousel-title, body.v3 .hp-packages-title, body.v3 .domains-title, body.v3 .faq-title, body.v3 .testimonial-quote { letter-spacing: -0.025em !important; }

/* ── Services: Nacar list ── */
.svc-list { max-width: 1640px; margin: 0 auto; padding: 140px 40px 80px; }
.svc-list-top { display: flex; justify-content: space-between; border-top: 1px solid var(--text-primary); padding-top: 20px; margin-bottom: 96px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.svc-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--text-primary); }
.svc-row h3 { font-family: var(--font-sans); font-weight: 400; font-size: clamp(44px, 6vw, 104px); line-height: 1; letter-spacing: -0.035em; margin: 0; color: var(--text-primary); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.svc-row p { max-width: 560px; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #6b5f57; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; }
.svc-row-meta { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 13px; color: #D9733F; }
.svc-row:hover h3 { transform: translateX(16px); }
.svc-row:hover p { max-height: 140px; opacity: 1; }
.svc-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.svc-pills span { border: 1px solid var(--text-primary); border-radius: 999px; padding: 12px 22px; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.svc-peek { position: absolute; right: 40%; top: 50%; width: 280px; height: 196px; object-fit: cover; transform: translateY(-50%) rotate(-3deg) scale(.92); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .45s ease; z-index: 2; }
.svc-row:hover .svc-peek { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
.svc-list .deliver-cta { padding-top: 56px; justify-content: flex-start; }

/* ── Packages: NinjaPromo pricing ── */
body.v3 .hp-packages-section { background: #1A0D03; border-radius: 48px; max-width: 1720px; margin: 40px auto; padding: 120px 40px !important; }
body.v3 .hp-packages-section .badge { color: #F0743A; }
body.v3 .hp-packages-title { color: #FFFAF6 !important; }
body.v3 .hp-packages-title .accent-text { color: #FFFAF6 !important; }
body.v3 .hp-packages-subtitle { color: rgba(255,250,246,.65) !important; }
body.v3 .hp-packages-grid { gap: 20px !important; max-width: 1400px; margin: 56px auto 0; }
body.v3 .hp-package-card { background: #22140a !important; border: 1px solid rgba(255,250,246,.14) !important; color: #FFFAF6; border-radius: 24px !important; box-shadow: none !important; padding: 40px 34px !important; }
body.v3 .hp-package-card:hover { transform: none !important; }
body.v3 .hp-package-label { color: #F0743A !important; }
body.v3 .hp-package-title { color: #FFFAF6 !important; font-weight: 500 !important; font-size: 30px !important; }
body.v3 .hp-package-price { font-family: var(--font-serif) !important; font-weight: 700 !important; font-size: 52px !important; letter-spacing: -0.02em; color: #FFFAF6 !important; text-align: center; padding: 22px 0; margin: 18px 0 22px !important; border-top: 1px solid rgba(255,250,246,.14); border-bottom: 1px solid rgba(255,250,246,.14); }
body.v3 .hp-package-desc { color: rgba(255,250,246,.7) !important; }
body.v3 .hp-package-list li { color: #FFFAF6 !important; padding-left: 30px !important; }
body.v3 .hp-package-list li::before { content: '\2713' !important; width: auto !important; height: auto !important; background: none !important; color: #F0743A; opacity: 1 !important; top: 0 !important; font-weight: 700; }
body.v3 .hp-package-cta { border-radius: 999px !important; height: 60px; display: flex !important; align-items: center; justify-content: center; }
body.v3 .hp-package-card .cta-btn--outline { background: transparent !important; color: #FFFAF6 !important; border: 1px solid rgba(255,250,246,.3) !important; }
body.v3 .hp-package-card .cta-btn--outline:hover { background: #FFFAF6 !important; color: #1A0D03 !important; }
body.v3 .hp-package-card--featured { background: #FFFAF6 !important; color: #1A0D03; border-color: #FFFAF6 !important; }
body.v3 .hp-package-card--featured::before { background: #F0743A !important; color: #1A0D03 !important; }
body.v3 .hp-package-card--featured .hp-package-title, body.v3 .hp-package-card--featured .hp-package-price, body.v3 .hp-package-card--featured .hp-package-list li { color: #1A0D03 !important; }
body.v3 .hp-package-card--featured .hp-package-price { border-color: rgba(26,13,3,.12); }
body.v3 .hp-package-card--featured .hp-package-desc { color: #6b5f57 !important; }

/* ── Domains: Nacar outline pills ── */
body.v3 .domain-pill { background: transparent !important; border: 1px solid #1A0D03 !important; text-transform: uppercase; font-size: 13px !important; padding: 14px 24px !important; }
body.v3 .domain-pill:hover { background: #1A0D03 !important; color: #FFFAF6 !important; }

/* ── Final CTA: Crafton "Tell us about your project" ── */
.talk { padding: 120px 0 0; }
.talk-grid { max-width: 1640px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; }
.talk-text { padding-bottom: 110px; }
.talk h2 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(56px, 7vw, 124px); line-height: .98; letter-spacing: -0.035em; margin: 0; color: var(--text-primary); }
.talk h2 em { font-style: normal; font-family: var(--font-sans); font-weight: 300; }
.talk p { font-size: 22px; color: #6b5f57; margin: 32px 0 30px; }
.talk .cta-buttons { justify-content: flex-start; }
.talk .cta-availability { justify-content: flex-start; margin-top: 22px; }
.talk-photo { position: relative; justify-self: end; }
.talk-photo img { width: min(520px, 100%); display: block; }
.talk-sign { position: absolute; right: 0; bottom: 48px; text-align: right; background: var(--bg-color); padding: 12px 16px; }
.talk-sign b { display: block; font-size: 20px; }
.talk-sign span { color: #6b5f57; }
.foot-links { background: #1A0D03; color: #FFFAF6; display: grid; grid-template-columns: repeat(3, 1fr); }
.fl { padding: 56px 40px 64px; text-decoration: none; color: inherit; display: flex; justify-content: space-between; align-items: flex-end; border-right: 1px solid rgba(255,250,246,.1); transition: background .3s; }
.fl:hover { background: #2a1a10; }
.fl small { display: block; font-size: 18px; opacity: .75; margin-bottom: 10px; }
.fl b { font-family: var(--font-serif); font-weight: 700; font-size: clamp(32px, 3.2vw, 54px); letter-spacing: -0.02em; }
.fl i { font-size: 54px; color: rgba(255,250,246,.25); transition: color .3s, transform .3s; }
.fl:hover i { color: #F0743A; transform: translate(4px, 4px); }

.lab-note { position: fixed; left: 16px; bottom: 16px; z-index: 9999; background: #1A0D03; color: #fff; font-family: var(--font-mono); font-size: 12px; padding: 8px 12px; }

@media (max-width: 1000px) {
    body.v3 .hero-content, body.v3 .hero-carousel-tags { padding-left: 18px !important; padding-right: 18px !important; }
    body.v3 .hero-content { padding-top: 56px !important; }
    .svc-list { padding: 72px 18px 48px; }
    .svc-list-top { margin-bottom: 40px; }
    .svc-row { grid-template-columns: 1fr; }
    .svc-row p { max-height: none; opacity: 1; }
    .svc-pills { justify-content: flex-start; }
    .svc-pills span { padding: 9px 14px; font-size: 11px; }
    .svc-peek { display: none; }
    body.v3 .hp-packages-section { border-radius: 28px; padding: 72px 18px !important; margin: 20px 10px; }
    .talk-grid, .foot-links { grid-template-columns: 1fr; padding: 0 18px; }
    .foot-links { padding: 0; }
    .talk-text { padding-bottom: 32px; }
    .talk-photo { justify-self: start; }
    .fl { padding: 36px 18px; border-right: none; border-bottom: 1px solid rgba(255,250,246,.1); }
}

/* hero width fixes */
body.v3 { overflow-x: hidden; }
body.v3 .hero { display: block !important; }
body.v3 .hero-content { width: 100% !important; max-width: 1640px !important; box-sizing: border-box; display: block !important; }
body.v3 .hero-title { max-width: 1400px !important; width: 100% !important; font-size: clamp(52px, 6.2vw, 112px) !important; }
body.v3 .hero-subtext { max-width: 720px !important; margin-top: 32px !important; }
@media (max-width: 600px) { body.v3 .hero-title { font-size: 42px !important; } }

/* ===== v4 ===== */
.v4-btn { display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 28px; background: #1A0D03; color: #fff; text-decoration: none; font: 500 17px var(--font-sans); border: 1px solid #1A0D03; cursor: pointer; transition: background .2s, color .2s; }
.v4-btn:hover { background: #F0743A; border-color: #F0743A; color: #1A0D03; }
.v4-btn--ghost { background: transparent; color: #1A0D03; }
.v4-btn--light { background: #FFFAF6; border-color: #FFFAF6; color: #1A0D03; }
.v4-btn--sm { height: 48px; padding: 0 20px; font-size: 15px; }
.v4-btn i { transition: transform .2s; } .v4-btn:hover i { transform: translateX(3px); }

/* hero v2 statement with our lead */
body.v3 .hero-content { padding-top: 120px !important; }
.hero-big { font-family: var(--font-serif); font-weight: 700; font-size: clamp(60px, 8.4vw, 150px); line-height: .96; letter-spacing: -0.035em; margin: 0; color: #1A0D03; text-align: left; }
.hero-big span { color: rgba(26,13,3,.28); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 44px; }
.hero-lead { font-size: 24px; line-height: 1.4; color: #6b5f57; margin: 0; text-align: left; }
.hero-lead b { color: #1A0D03; font-weight: 500; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* carousels +20% */
.hero-carousel-slide, .case-carousel-slide { height: 432px !important; }
@media (max-width: 768px) { .hero-carousel-slide, .case-carousel-slide { height: 360px !important; } }
@media (max-width: 480px) { .hero-carousel-slide, .case-carousel-slide { height: 270px !important; } }

/* vertical reel cards with actions */
.reel4 { display: grid; grid-template-columns: repeat(4, 1fr); height: min(80vh, 780px); margin-top: 24px; }
.reel4-p { position: relative; overflow: hidden; }
.reel4-p img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.reel4-p:hover img { transform: scale(1.05); }
.reel4-lbl { position: absolute; left: 24px; top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #FFFAF6; background: rgba(26,13,3,.55); padding: 6px 10px; }
.reel4-act { position: absolute; left: 24px; bottom: 24px; right: 24px; display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.reel4-p:hover .reel4-act, .reel4-p:focus-within .reel4-act { opacity: 1; transform: none; }
@media (hover: none) { .reel4-act { opacity: 1; transform: none; } }

/* dark blocks full width */
body.v3 .hp-packages-section { border-radius: 0 !important; max-width: none !important; margin: 0 !important; width: 100% !important; }

@media (max-width: 1000px) {
    .hero-row { flex-direction: column; align-items: flex-start; }
    .hero-lead { font-size: 19px; }
    .reel4 { grid-template-columns: 1fr 1fr; height: auto; }
    .reel4-p { aspect-ratio: 3 / 4; }
    .reel4-lbl { left: 12px; top: 12px; font-size: 10px; }
    .reel4-act { left: 12px; right: 12px; bottom: 12px; }
}
@media (max-width: 600px) { .hero-big { font-size: 44px; } }
body.v3 .hp-package-price { font-size: clamp(34px, 3vw, 46px) !important; white-space: nowrap; }

/* ===== v4.1 ===== */
/* hero aligned to the header grid, closer to the header */
body.v3 .hero-content { max-width: 1280px !important; padding: 72px 0 0 !important; margin: 0 auto !important; }
.hero-big { font-size: clamp(56px, 8vw, 128px); }
body.v3 .hero-carousel-container { margin-top: 64px; }
@media (max-width: 1360px) { body.v3 .hero-content { padding-left: 40px !important; padding-right: 40px !important; } }

/* Our work as vertical cards, on the same grid */
.our-work--reel { max-width: 1280px !important; padding: 120px 0 40px !important; margin: 0 auto; }
@media (max-width: 1360px) { .our-work--reel { padding-left: 40px !important; padding-right: 40px !important; } }
.our-work--reel .reel4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; height: auto; margin-top: 8px; }
.our-work--reel .reel4-p { overflow: visible; }
.reel4-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #1A0D03; }
.reel4-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.reel4-p:hover .reel4-media img { transform: scale(1.04); }
.reel4-name { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 16px 0 0; color: #1A0D03; }
.reel4-p:hover .reel4-act { opacity: 1; transform: none; }
.reel4-act { left: 16px; right: 16px; bottom: 16px; }
.reel4-lbl { left: 16px; top: 16px; }
@media (max-width: 1000px) {
    body.v3 .hero-content { padding: 48px 18px 0 !important; }
    .our-work--reel { padding: 72px 18px 24px !important; }
    .our-work--reel .reel4 { grid-template-columns: 1fr 1fr; gap: 12px; }
    .reel4-p { aspect-ratio: auto !important; }
    .reel4-name { font-size: 15px; }
}
.reel4-meta { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: #D9733F; }
.reel4-meta + .reel4-name { margin-top: 6px; }

/* ===== v4.2 ===== */
.hero-big span { color: #F0743A !important; }
.hero-big { font-size: clamp(52px, 7.2vw, 104px) !important; }
body.v3 .hero-content { padding-top: 28px !important; }
body.v3 .hero-carousel-container { margin-top: 48px; }

/* tall work cards, text on the card on hover */
.reel4-media { aspect-ratio: 3 / 5 !important; }
.reel4-over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: linear-gradient(180deg, rgba(20,10,3,0) 30%, rgba(20,10,3,.88) 100%); opacity: 0; transition: opacity .35s ease; }
.reel4-p:hover .reel4-over, .reel4-p:focus-within .reel4-over { opacity: 1; }
.reel4-over .reel4-meta { margin: 0 0 8px; color: #F0743A; }
.reel4-over .reel4-name { color: #FFFAF6; font-size: 22px; line-height: 1.2; margin: 0 0 18px; }
.reel4-over .reel4-act { position: static; opacity: 1; transform: none; }
.reel4-p:hover .reel4-media img { transform: scale(1.05); }
@media (hover: none) { .reel4-over { opacity: 1; } }
@media (max-width: 1000px) { .reel4-over { padding: 12px; } .reel4-over .reel4-name { font-size: 15px; margin-bottom: 10px; } .reel4-over .v4-btn--sm { height: 38px; padding: 0 12px; font-size: 13px; } }
.sec-lead-wrap { align-self: end; }
.sec-lead-btn { margin-top: 20px; }
.sec-lead-btn:hover i { transform: translateY(3px); }
.reel4-over { background: linear-gradient(180deg, rgba(20,10,3,.55) 0%, rgba(20,10,3,.7) 50%, rgba(20,10,3,.92) 100%) !important; }

/* View all work: plain link, no container */
.sec-lead-btn, .sec-lead-btn:hover { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; color: #1A0D03 !important; font-size: 17px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.sec-lead-btn:hover { color: #F0743A !important; }
.sec-lead-btn:hover i { transform: translateY(3px) !important; }

/* Double carousel */
body.v3 .carousel-header { margin-bottom: 56px; }
.carousel-wrapper + .carousel-wrapper { margin-top: 10px; }

/* Section kicker = site badge style */
.sec-kicker { font-family: var(--font-sans) !important; font-weight: 900 !important; font-size: 14px !important; letter-spacing: 2px !important; text-transform: uppercase; color: var(--accent-text) !important; margin-bottom: 20px !important; }

/* Black buttons: clean hover, no shadow */
.btn-primary:hover, .nav-cta.btn-primary:hover, .mobile-nav-cta--primary:hover, .hero-cta-btn--primary:hover, .cta-btn--primary:hover {
  background: #F0743A !important; background-color: #F0743A !important; border-color: #F0743A !important; color: #1A0D03 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important;
}
.btn-primary, .cta-btn, .hero-cta-btn { transition: background-color .2s, color .2s, border-color .2s !important; }
.v4-btn:hover { background: #F0743A; border-color: #F0743A; color: #1A0D03; }

/* View all work v2: one continuous line, calm hover */
.sec-lead-btn, .sec-lead-btn:hover { text-decoration: none !important; color: #1A0D03 !important; display: inline-flex !important; gap: 12px !important; padding: 0 0 8px !important; border-bottom: 1px solid #1A0D03 !important; font-weight: 500; }
.sec-lead-btn i { transition: transform .25s ease !important; }
.sec-lead-btn:hover i { transform: translateY(4px) !important; }

/* Packages: full-bleed background */
body.v3 .hp-packages-section { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; box-sizing: border-box; }
@media (max-width: 768px) { body.v3 .hp-packages-section { border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } }

/* ===== Consistency pass ===== */
/* one accent for kickers and accent words */
body.v3 .badge, body.v3 .sec-kicker, body.v3 .case-badge, body.v3 .carousel-badge, body.v3 .clients-badge { color: #F0743A !important; font-family: var(--font-sans) !important; font-weight: 900 !important; font-size: 14px !important; letter-spacing: 2px !important; }
body.v3 .accent-text { color: #F0743A !important; }
body.v3 .hp-packages-title .accent-text { color: #F0743A !important; }
/* section headers: left-aligned on the 1280 grid, same title style */
body.v3 .clients-header, body.v3 .hp-packages-header, body.v3 .cta-content, body.v3 .domains-header { text-align: left !important; align-items: flex-start !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
body.v3 .clients-title, body.v3 .hp-packages-title, body.v3 .cta-title, body.v3 .domains-title, body.v3 .sec-title, body.v3 .carousel-title { font-family: var(--font-sans) !important; font-weight: 400 !important; font-size: clamp(36px, 4.6vw, 66px) !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; text-align: left !important; }
body.v3 .hp-packages-subtitle, body.v3 .cta-subtext, body.v3 .domains-subtitle { text-align: left !important; margin-left: 0 !important; max-width: 620px; }
body.v3 .cta-buttons, body.v3 .domains-pills, body.v3 .domains-grid { justify-content: flex-start !important; }

/* services aligned to grid */
.svc-list { max-width: 1280px !important; padding: 140px 0 80px !important; }
.svc-head { margin-bottom: 64px; }
@media (max-width: 1360px) { .svc-list { padding-left: 40px !important; padding-right: 40px !important; } }
@media (max-width: 768px) { .svc-list { padding: 72px 18px 48px !important; } }
/* case titles same family/weight as section titles */
body.v3 .case-title { font-weight: 400 !important; letter-spacing: -0.02em !important; }
.svc-head { display: block !important; }
body.v3 .domains-content { text-align: left !important; align-items: flex-start !important; max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; }
body.v3 .clients-header, body.v3 .cta-content, body.v3 .hp-packages-header { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
body.v3 .domains-section, body.v3 .cta-section, body.v3 .case-header { padding-left: 0 !important; padding-right: 0 !important; }
body.v3 .hp-packages-header { max-width: 1280px !important; margin: 0 auto 64px !important; }
.sec-lead-btn, .sec-lead-btn:hover { border-bottom: 0 !important; padding-bottom: 0 !important; text-decoration: none !important; }

/* sharp corners everywhere, like the work cards */
body.v3 .hp-package-card, body.v3 .cta-btn, body.v3 .hp-package-btn, body.v3 .hp-package-card a, body.v3 .testimonial-card, body.v3 .testimonial-section > div, body.v3 .case-carousel-slide, body.v3 .case-carousel-slide img, body.v3 .hp-package-card--featured::before { border-radius: 0 !important; }
@media (min-width: 1361px) { body.v3 .talk-grid { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } }
body.v3 .hp-packages-grid { max-width: 1280px !important; margin: 0 auto !important; }

/* Our Work head: lead on the title's last baseline, link below */
.our-work .sec-head { align-items: last baseline !important; margin-bottom: 104px !important; }
.our-work .sec-lead-wrap { position: relative; }
.our-work .sec-lead { margin: 0 !important; }
.our-work .sec-lead-btn { position: absolute !important; left: 0; top: 100%; margin-top: 36px !important; }
@media (max-width: 900px) { .our-work .sec-head { margin-bottom: 72px !important; } .our-work .sec-lead-btn { margin-top: 20px !important; } }
/* more air between hero text row and hero carousel */
body.v3 .hero-carousel-container { margin-top: 112px !important; }
@media (max-width: 768px) { body.v3 .hero-carousel-container { margin-top: 56px !important; } }

/* Services v2: same layout language as the case sections */
.svc-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 48px !important; align-items: start !important; padding: 44px 0 !important; border-bottom: 1px solid rgba(26,13,3,.14) !important; }
#svc-01 { border-top: 1px solid rgba(26,13,3,.14); }
.svc-row h3 { font-family: var(--font-sans) !important; font-weight: 400 !important; font-size: clamp(30px, 3.2vw, 46px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; transform: none !important; margin: 0 0 20px !important; }
.svc-row:hover h3 { transform: none !important; color: #F0743A; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-tags .hero-tag { font-size: 14px; height: 32px; }

.svc-right p { max-height: none !important; opacity: 1 !important; overflow: visible !important; margin: 6px 0 0 !important; font-size: 18px !important; line-height: 1.55 !important; color: #6b5f57 !important; max-width: 560px; }
.svc-right .svc-row-meta { display: block; margin-top: 14px; font-family: var(--font-sans); font-size: 14px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #F0743A; }
.svc-peek, .svc-pills { display: none !important; }
@media (max-width: 768px) { .svc-row { grid-template-columns: 1fr !important; gap: 16px !important; padding: 32px 0 !important; } }

/* ===== Reels ===== */
.reels-sec { max-width: 1280px; margin: 0 auto; padding: 120px 0 40px; }
.reels-sec .sec-head { display: flex !important; justify-content: space-between; align-items: flex-end; margin-bottom: 48px !important; }
.rl-nav { display: flex; gap: 10px; }
.rl-arrow { width: 56px; height: 56px; border: 1px solid #1A0D03; background: transparent; color: #1A0D03; font-size: 22px; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s; }
.rl-arrow:hover { background: #F0743A; border-color: #F0743A; }
.rl-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rl-track::-webkit-scrollbar { display: none; }
.rl-card { position: relative; flex: 0 0 calc((100% - 60px) / 4); aspect-ratio: 9 / 16; background: #1A0D03; overflow: hidden; scroll-snap-align: start; }
.rl-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-top { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.rl-top img { width: 34px; height: 34px; border-radius: 50%; background: #FFFAF6; padding: 3px; box-sizing: border-box; }
.rl-plaque { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: #FFFAF6; color: #1A0D03; text-decoration: none; transform: translateY(8px); opacity: .96; transition: transform .3s ease, opacity .3s; }
.rl-card:hover .rl-plaque { transform: translateY(0); opacity: 1; }
.rl-thumb { flex: 0 0 48px; height: 48px; background-size: cover; background-position: center; }
.rl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rl-txt b { font-weight: 500; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-txt small { font-size: 13px; color: #8a7d74; margin-top: 2px; }
.rl-plaque i { font-size: 20px; transition: transform .2s; }
.rl-plaque:hover i { transform: translateX(3px); color: #F0743A; }
@media (max-width: 1360px) { .reels-sec { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 900px) { .rl-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .reels-sec { padding: 72px 18px 24px; } .rl-card { flex-basis: 72%; } .rl-nav { display: none; } }

/* ===== One left edge for every block (= page container edge) ===== */
:root { --gut: max(16px, calc((100vw - 1280px) / 2)); }
body.v3 .hero-content, body.v3 .our-work, body.v3 .reels-sec { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: auto !important; }
body.v3 .hp-packages-section, body.v3 .carousel-header, body.v3 .case-header { padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
body.v3 .carousel-header, body.v3 .case-header { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; width: 100% !important; }
body.v3 .hp-packages-header, body.v3 .hp-packages-grid { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Services: full-bleed white band, content on the same edge */
.svc-list { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 140px var(--gut) 100px !important; box-sizing: border-box; background: #FFFFFF; }
@media (max-width: 768px) { .svc-list { padding: 72px var(--gut) 56px !important; } }
.svc-tags .hero-tag { background: #FFFAF6; border-color: #F3E6DA; }
body.v3 .talk, body.v3 .talk-grid { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }

/* ===== Consistency pass 2 ===== */
/* kickers spacing */
body.v3 .badge, body.v3 .sec-kicker { margin-bottom: 20px !important; display: inline-flex; }
/* leads: one style */
body.v3 .sec-lead, body.v3 .hp-packages-subtitle, body.v3 .cta-subtext, body.v3 .domains-subtitle, body.v3 .talk p { font-family: var(--font-sans) !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.5 !important; color: #6b5f57 !important; letter-spacing: 0 !important; }
body.v3 .hp-packages-subtitle { color: rgba(255,250,246,.65) !important; }
body.v3 .case-desc, body.v3 .svc-right p { font-size: 18px !important; font-weight: 400 !important; line-height: 1.55 !important; color: #6b5f57 !important; }
/* service names = case titles */
.svc-row h3 { font-size: 52px !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
@media (max-width: 900px) { .svc-row h3 { font-size: 36px !important; } }
/* buttons: one spec (v4-btn) */
body.v3 .cta-btn, body.v3 .hp-package-cta { height: 60px !important; padding: 0 28px !important; font-family: var(--font-sans) !important; font-size: 17px !important; font-weight: 500 !important; border-radius: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: none !important; transform: none !important; }
body.v3 .cta-btn--outline { border: 1px solid #1A0D03 !important; color: #1A0D03 !important; background: transparent !important; }
body.v3 .cta-btn--outline:hover { background: #F0743A !important; border-color: #F0743A !important; color: #1A0D03 !important; }
body.v3 .hp-package-card:not(.hp-package-card--featured) .cta-btn--outline { border-color: rgba(255,250,246,.6) !important; color: #FFFAF6 !important; }
body.v3 .hp-package-card:not(.hp-package-card--featured) .cta-btn--outline:hover { background: #F0743A !important; border-color: #F0743A !important; color: #1A0D03 !important; }
/* tags: one spec (case tags) */
.svc-tags .hero-tag { font-size: 16px !important; height: 36px !important; }
body.v3 .domain-pill { font-family: 'Geist Mono', monospace !important; font-size: 16px !important; font-weight: 500 !important; height: 36px !important; padding: 0 15px !important; border-radius: 2px !important; background: #FFFFFF !important; border: 1px solid #FDF1E7 !important; color: #887C76 !important; text-transform: none !important; letter-spacing: 0 !important; display: inline-flex !important; align-items: center; }
body.v3 .domain-pill:hover { color: #1A0D03 !important; border-color: #F0743A !important; }
body.v3 .domains-grid { gap: 8px !important; margin-top: 40px !important; }
/* cards: no lift, no radius */
body.v3 .hp-package-card { border-radius: 0 !important; }
body.v3 .hp-package-card:hover { transform: none !important; box-shadow: none !important; }
/* vertical rhythm: 120 between blocks */
body.v3 .our-work, body.v3 .reels-sec, body.v3 .clients, body.v3 .carousel-section, body.v3 .cta-section, body.v3 .case-section, body.v3 .domains-section, body.v3 .faq-section, body.v3 .talk { padding-top: 120px !important; padding-bottom: 0 !important; }
body.v3 .svc-list, body.v3 .hp-packages-section { margin-top: 120px !important; margin-bottom: 0 !important; padding-top: 120px !important; padding-bottom: 120px !important; }
body.v3 .svc-list + .hp-packages-section { margin-top: 0 !important; }
body.v3 .testimonial-section { margin: 120px 0 0 !important; }
body.v3 .carousel-header, body.v3 .clients-header { margin-bottom: 56px !important; }
@media (max-width: 768px) {
  body.v3 .our-work, body.v3 .reels-sec, body.v3 .clients, body.v3 .carousel-section, body.v3 .cta-section, body.v3 .case-section, body.v3 .domains-section, body.v3 .faq-section, body.v3 .talk { padding-top: 72px !important; }
  body.v3 .svc-list, body.v3 .hp-packages-section { margin-top: 72px !important; padding-top: 72px !important; padding-bottom: 72px !important; }
  body.v3 .testimonial-section { margin-top: 72px !important; }
}
body.v3 .hp-packages-section { margin-top: 0 !important; }
body.v3 .hero { padding-bottom: 0 !important; }
.svc-row { grid-template-columns: 1.25fr 1fr !important; }
@media (max-width: 600px) { .svc-tags .hero-tag, body.v3 .domain-pill { font-size: 13px !important; height: 30px !important; padding: 0 10px !important; } }
.our-work .sec-lead-btn { margin-top: 22px !important; gap: 8px !important; transition: color .2s ease !important; }
.our-work .sec-lead-btn:hover, .our-work .sec-lead-btn:hover i { color: #F0743A !important; }

/* Header CTA square */
body.v3 .nav-cta, body.v3 .nav-cta.btn-primary, body.v3 .mobile-nav-cta { border-radius: 0 !important; }
/* Hero tighter so the site carousel shows on first screen */
body.v3 .hero { padding-top: 0 !important; }
body.v3 .hero-content { padding-top: clamp(16px, 4vh, 48px) !important; }
.hero-big { font-size: clamp(44px, min(7.2vw, 11vh), 104px) !important; }
body.v3 .hero-row { margin-top: clamp(20px, 3.5vh, 40px) !important; }
body.v3 .hero-carousel-container { margin-top: clamp(32px, 6vh, 72px) !important; }
/* hero buttons: label baseline = last line of the lead */
@media (min-width: 1001px) { body.v3 .hero-row { align-items: last baseline !important; } body.v3 .hero-lead { margin-bottom: 0 !important; } body.v3 .hero-btns { display: flex; align-items: baseline; } }

/* Reels as auto-scrolling marquee (like the banner carousel) */
.rl-wrap { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y; padding: 0 16px; box-sizing: border-box; }
.rl-wrap:active { cursor: grabbing; }
.rl-track { display: flex !important; gap: 0 !important; overflow: visible !important; width: max-content; will-change: transform; scroll-snap-type: none !important; }
.rl-card { flex: 0 0 300px !important; width: 300px; margin-right: 10px; scroll-snap-align: none; }
.rl-card video { pointer-events: none; }
@media (max-width: 600px) { .rl-card { flex-basis: 220px !important; width: 220px; } }
/* client logos +20% */
body.v3 .client-card .logo-default { transform: scale(1.2); transform-origin: center; }

/* Our Work: 3 cases bento (4:3 wide + two 27:40 tall), equal height */
.our-work--reel .reel4 { grid-template-columns: 1.3333fr 0.675fr 0.675fr !important; gap: 20px !important; }
.our-work--reel .reel4-p--wide .reel4-media { aspect-ratio: 4 / 3 !important; }
.our-work--reel .reel4-p:not(.reel4-p--wide) .reel4-media { aspect-ratio: 27 / 40 !important; }
.our-work--reel .reel4-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .our-work--reel .reel4 { grid-template-columns: 1fr 1fr !important; } .our-work--reel .reel4-p--wide { grid-column: 1 / -1; } }
/* a bit more air under the header */
body.v3 .hero-content { padding-top: clamp(32px, 7vh, 80px) !important; }

/* Industries: centered block, fixed pill hover */
body.v3 .domains-content { text-align: center !important; align-items: center !important; display: flex !important; flex-direction: column; }
body.v3 .domains-title, body.v3 .domains-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
body.v3 .domains-grid { justify-content: center !important; max-width: 1100px; margin-left: auto !important; margin-right: auto !important; }
body.v3 .domain-pill { transition: background-color .2s, color .2s, border-color .2s !important; cursor: default; }
body.v3 .domain-pill:hover { background: #F0743A !important; border-color: #F0743A !important; color: #1A0D03 !important; }
body.v3 .domains-subtitle { margin-bottom: 0 !important; }
/* more air between hero carousel and Our Work */
body.v3 .our-work { padding-top: 176px !important; }
@media (max-width: 768px) { body.v3 .our-work { padding-top: 96px !important; } }
/* Our Work: square + two 1:2 */
.our-work--reel .reel4 { grid-template-columns: 2fr 1fr 1fr !important; }
.our-work--reel .reel4-p--wide .reel4-media { aspect-ratio: 1 / 1 !important; }
.our-work--reel .reel4-p:not(.reel4-p--wide) .reel4-media { aspect-ratio: 1 / 2 !important; }
/* Our Work v3 covers: 2800x3200 + two 1080x3200, equal height */
.our-work--reel .reel4 { grid-template-columns: 2.5926fr 1fr 1fr !important; }
.our-work--reel .reel4-p--wide .reel4-media { aspect-ratio: 2800 / 3200 !important; }
.our-work--reel .reel4-p:not(.reel4-p--wide) .reel4-media { aspect-ratio: 1080 / 3200 !important; }
@media (max-width: 900px) { .our-work--reel .reel4 { grid-template-columns: 1fr 1fr !important; } .our-work--reel .reel4-p:not(.reel4-p--wide) .reel4-media { aspect-ratio: 1080 / 2400 !important; } }
/* Packages (dark): accents in our light background colour instead of orange */
body.v3 .hp-packages-title .accent-text, body.v3 .hp-packages-section .badge { color: #FFFAF6 !important; }
/* Our Work v4: OCParts tall left (2 rows) + Oscar/Dnipro landscape stacked right */
.our-work--reel .reel4 { grid-template-columns: 2800fr 2180fr !important; grid-auto-rows: auto; }
.our-work--reel .reel4-p--wide { grid-row: span 2; }
.our-work--reel .reel4-p--wide, .our-work--reel .reel4-p--wide .reel4-media { height: 100%; }
.our-work--reel .reel4-p--wide .reel4-media { aspect-ratio: auto !important; }
.our-work--reel .reel4-p:not(.reel4-p--wide) .reel4-media { aspect-ratio: 2180 / 1600 !important; }
@media (max-width: 900px) { .our-work--reel .reel4 { grid-template-columns: 1fr !important; } .our-work--reel .reel4-p--wide { grid-row: auto; } .our-work--reel .reel4-p--wide .reel4-media { aspect-ratio: 2800 / 3200 !important; } }

/* ===== Packages v2: calm, light, equal cards (Manychat-like) ===== */
body.v3 .hp-packages-section { background: #F4EFE9 !important; color: #1A0D03; margin-top: 0 !important; }
body.v3 .hp-packages-title { color: #1A0D03 !important; }
body.v3 .hp-packages-title .accent-text { color: #F0743A !important; }
body.v3 .hp-packages-section .badge { color: #F0743A !important; }
body.v3 .hp-packages-subtitle { color: #6b5f57 !important; }
body.v3 .hp-packages-grid { gap: 20px !important; margin-top: 56px !important; }
body.v3 .hp-package-card, body.v3 .hp-package-card--featured { background: #FFFFFF !important; border: 1px solid #EDE4DA !important; box-shadow: none !important; transform: none !important; padding: 40px 36px !important; color: #1A0D03 !important; }
body.v3 .hp-package-card--featured::before { content: none !important; display: none !important; }
body.v3 .hp-package-card * { color: inherit; }
body.v3 .hp-package-label { font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 2px !important; color: #9A8B80 !important; margin-bottom: 14px !important; }
body.v3 .hp-package-title { font-weight: 500 !important; font-size: 26px !important; color: #1A0D03 !important; margin-bottom: 8px !important; }
body.v3 .hp-package-desc { order: 2; font-size: 16px !important; color: #6b5f57 !important; margin: 0 0 28px !important; min-height: 52px; }
body.v3 .hp-package-price { order: 3; font-family: var(--font-sans) !important; font-size: 34px !important; font-weight: 600 !important; letter-spacing: -0.02em; color: #1A0D03 !important; margin: 0 0 28px !important; }
body.v3 .hp-package-cta { order: 4; margin: 0 0 32px !important; }
body.v3 .hp-package-list { order: 5; margin: 0 !important; gap: 14px !important; }
body.v3 .hp-package-label { order: 0; } body.v3 .hp-package-title { order: 1; }
body.v3 .hp-package-list li { color: #3a2f28 !important; font-size: 15px !important; padding-left: 26px !important; }
body.v3 .hp-package-list li::before { content: '\2713' !important; background: none !important; width: auto !important; height: auto !important; top: 0 !important; color: #9A8B80 !important; opacity: 1 !important; font-weight: 600; }
body.v3 .hp-package-card .cta-btn, body.v3 .hp-package-card .cta-btn--primary, body.v3 .hp-package-card .cta-btn--outline { background: #1A0D03 !important; border: 1px solid #1A0D03 !important; color: #FFFAF6 !important; }
body.v3 .hp-package-card .cta-btn:hover { background: #F0743A !important; border-color: #F0743A !important; color: #1A0D03 !important; }
body.v3 .hp-package-price { text-align: left !important; border: 0 !important; padding: 0 !important; background: none !important; }
body.v3 .hp-package-card .cta-btn { width: 100% !important; }

/* Teardown modal on home */
.td-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
.td-modal.open { display: flex; }
.td-backdrop { position: absolute; inset: 0; background: rgba(26,13,3,.55); }
.td-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; background: #FFFAF6; padding: 44px 40px 36px; }
.td-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 24px; cursor: pointer; color: #1A0D03; }
.td-close:hover { color: #F0743A; }
.td-box .badge { color: #F0743A !important; margin-bottom: 14px !important; }
.td-title { font-family: var(--font-sans); font-weight: 400; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 10px; color: #1A0D03; }
.td-text { font-size: 16px; line-height: 1.55; color: #6b5f57; margin: 0 0 24px; }
.td-form { display: flex; flex-direction: column; gap: 14px; }
.td-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: #1A0D03; }
.td-form input, .td-form textarea { font: 400 16px var(--font-sans); padding: 13px 14px; border: 1px solid #E2D6CA; background: #fff; color: #1A0D03; border-radius: 0; outline: none; }
.td-form input:focus, .td-form textarea:focus { border-color: #1A0D03; }
.td-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.td-submit { width: 100%; justify-content: center; margin-top: 6px; }
.td-status { min-height: 20px; margin: 0; font-size: 14px; color: #6b5f57; }
.td-status.is-ok { color: #2f7a3e; } .td-status.is-err { color: #c0392b; }
@media (max-width: 600px) { .td-box { padding: 36px 20px 24px; } .td-title { font-size: 26px; } }
/* Hero + header on the same warm background as pricing (full-bleed) */
body.v3 .navbar, body.v3 .hero { background: #F4EFE9; box-shadow: 0 0 0 100vmax #F4EFE9; clip-path: inset(0 -100vmax); }
body.v3 .hero { padding-bottom: 72px !important; }
body.v3 .our-work { padding-top: 120px !important; }

/* ===== Hover v05 "arrow only" for every button: box stays still, arrow travels ===== */
body.v3 .v4-btn:hover, body.v3 .v4-btn:not(.v4-btn--ghost):not(.v4-btn--light):hover { background: #1A0D03 !important; border-color: #1A0D03 !important; color: #FFFAF6 !important; }
body.v3 .v4-btn--ghost:hover { background: transparent !important; color: #1A0D03 !important; border-color: #1A0D03 !important; }
body.v3 .v4-btn--light:hover { background: #FFFAF6 !important; border-color: #FFFAF6 !important; color: #1A0D03 !important; }
body.v3 .cta-btn--primary:hover, body.v3 .btn-primary:hover, body.v3 .nav-cta.btn-primary:hover, body.v3 .mobile-nav-cta--primary:hover, body.v3 .hp-package-card .cta-btn:hover { background: #1A0D03 !important; border-color: #1A0D03 !important; color: #FFFAF6 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; }
body.v3 .cta-btn--outline:hover { background: transparent !important; border-color: #1A0D03 !important; color: #1A0D03 !important; }
body.v3 .sec-lead-btn:hover, .our-work .sec-lead-btn:hover, .our-work .sec-lead-btn:hover i { color: #1A0D03 !important; }
body.v3 .v4-btn:hover i, body.v3 .sec-lead-btn:hover i, .our-work .sec-lead-btn:hover i { transform: none !important; }
.arw { position: relative; display: inline-block; width: 1em; height: 1em; overflow: hidden; vertical-align: -0.12em; flex: 0 0 auto; }
.arw i { position: absolute !important; inset: 0; display: flex; align-items: center; justify-content: center; font-style: normal; transition: transform .38s cubic-bezier(.7,0,.2,1), color .38s ease !important; }
.arw i + i { transform: translateX(-130%) !important; }
a:hover > .arw i:first-child, button:hover > .arw i:first-child { transform: translateX(130%) !important; }
a:hover > .arw i + i, button:hover > .arw i + i { transform: translateX(0) !important; color: #F0743A !important; }
.arw--down i + i { transform: translateY(-130%) !important; }
a:hover > .arw--down i:first-child, button:hover > .arw--down i:first-child { transform: translateY(130%) !important; }
a:hover > .arw--down i + i, button:hover > .arw--down i + i { transform: translateY(0) !important; }
/* warm hero tint that keeps the dot pattern visible */
body.v3 .navbar, body.v3 .hero { background: transparent !important; box-shadow: none !important; clip-path: none !important; position: relative; }
body.v3 .navbar::before, body.v3 .hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: #F4EFE9; mix-blend-mode: multiply; z-index: -1; pointer-events: none; }
/* more air between clients grid and the banner carousel */
body.v3 .carousel-section { padding-top: 200px !important; }
@media (max-width: 768px) { body.v3 .carousel-section { padding-top: 104px !important; } }
/* Testimonials: full grid width, square photo, even inner padding */
body.v3 .testimonial-card { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; width: 100% !important; padding: 56px !important; gap: 56px !important; box-sizing: border-box; }
body.v3 .testimonial-content { max-width: none !important; flex: 1 1 auto; }
body.v3 .testimonial-image, body.v3 .testimonial-image img { border-radius: 0 !important; }
@media (max-width: 768px) { body.v3 .testimonial-card { padding: 28px 20px !important; gap: 28px !important; } }
body.v3 .testimonial-card { height: auto !important; min-height: 0 !important; align-items: stretch !important; }
body.v3 .testimonial-image { height: auto !important; align-self: stretch; min-height: 420px; }
body.v3 .testimonial-image img { height: 100% !important; object-fit: cover; }
body.v3 .testimonial-section, body.v3 .testimonial-section--jack { height: auto !important; }
/* Industries: more air above and below */
body.v3 .domains-section { padding-top: 176px !important; padding-bottom: 56px !important; }
@media (max-width: 768px) { body.v3 .domains-section { padding-top: 96px !important; padding-bottom: 24px !important; } }
/* Dima photo: clean cut-out, no frame, no pattern */
.talk-photo img { width: min(560px, 100%) !important; border: 0 !important; box-shadow: none !important; background: none !important; }
.talk-photo::before, .talk-photo::after { content: none !important; }
/* footer link that scrolls up */
.fl--up:hover i { transform: translateY(-6px) !important; }
/* hero tint ends mid-carousel so the sites straddle the colour change */
body.v3 .hero { padding-bottom: 0 !important; }
body.v3 .hero::before { bottom: 216px !important; }
@media (max-width: 768px) { body.v3 .hero::before { bottom: 180px !important; } }
@media (max-width: 480px) { body.v3 .hero::before { bottom: 135px !important; } }
body.v3 .our-work { padding-top: 160px !important; }

/* Sticky bar with logo + compact hero CTAs */
.stick-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: rgba(255,250,246,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #EDE4DA; transform: translateY(-100%); transition: transform .35s cubic-bezier(.7,0,.2,1); }
.stick-bar.on { transform: translateY(0); }
.stick-inner { max-width: 1280px; margin: 0 auto; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
@media (max-width: 1360px) { .stick-inner { padding-left: 16px; padding-right: 16px; } }
.stick-inner .logo svg { height: 30px; width: auto; display: block; }
.stick-btns { display: flex; gap: 10px; }
.stick-btns .v4-btn { height: 44px !important; padding: 0 18px !important; font-size: 15px !important; }
@media (max-width: 600px) { .stick-btns .v4-btn--ghost { display: none; } .stick-inner .logo svg { height: 26px; } }
/* hero back to the plain page background */
body.v3 .navbar::before, body.v3 .hero::before { content: none !important; display: none !important; }
body.v3 .hero { padding-bottom: 0 !important; }
body.v3 .our-work { padding-top: 176px !important; }

/* Fixed header v2: translucent, blurred, no border/shadow */
.stick-bar { transform: none !important; background: rgba(255,250,246,.72) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 0 !important; box-shadow: none !important; }
.stick-inner { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 14px !important; padding-bottom: 14px !important; }
.stick-inner .logo { justify-self: start; }
.stick-inner .nav-links { justify-self: center; display: flex; }
.stick-inner .stick-btns { justify-self: end; grid-column: 3; grid-row: 1; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.stick-bar.cta-on .stick-btns { opacity: 1; visibility: visible; transform: none; }
.stick-inner .mobile-menu-btn, .stick-inner [id="mobileMenuBtn"] { justify-self: end; grid-column: 3; grid-row: 1; }
.stick-inner .logo svg { height: 36px !important; }
@media (max-width: 1024px) { .stick-inner { grid-template-columns: auto 1fr auto; } .stick-inner .stick-btns { grid-column: 2; justify-self: end; margin-right: 12px; } }
.stick-btns .v4-btn { white-space: nowrap; }
@media (max-width: 600px) { .stick-btns .v4-btn { height: 38px !important; padding: 0 12px !important; font-size: 14px !important; } .stick-inner .logo svg { height: 28px !important; } }
/* soft fade from page background into the white services band */
.svc-list { background: linear-gradient(180deg, #FFFAF6 0, #FFFFFF 280px) !important; }
body.v3 .svc-list { margin-top: 0 !important; padding-top: 200px !important; }
/* smaller service tags */
.svc-tags { gap: 6px !important; }
.svc-tags .hero-tag { font-size: 13px !important; height: 30px !important; padding: 0 10px 0 9px !important; gap: 6px !important; }
.svc-tags .hero-dot { width: 6px !important; height: 6px !important; }
/* email under the contact headline */
.talk-mail { display: inline-block; margin: 28px 0 0; font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--font-sans); letter-spacing: -0.01em; color: #1A0D03; text-decoration: none; border-bottom: 1px solid rgba(26,13,3,.25); padding-bottom: 4px; transition: color .25s, border-color .25s; }
.talk-mail:hover { color: #F0743A; border-color: #F0743A; }
.talk-text .cta-availability { margin-top: 20px; }
.talk-mail { display: block !important; width: fit-content; }
.talk-text .cta-availability { display: flex !important; align-items: center; gap: 8px; }
@media (min-width: 1001px) { body.v3 .hero-lead { white-space: nowrap; max-width: none !important; } }
/* Watch buttons: same "icon only" hover language, play icon turns orange and pops */
.ow-btn--watch i { display: inline-block; transition: transform .35s cubic-bezier(.7,0,.2,1), color .35s ease !important; }
body.v3 .ow-btn--watch:hover i { color: #F0743A !important; transform: scale(1.25) !important; }
/* hero buttons sit lower than the lead */
@media (min-width: 1001px) { body.v3 .hero-btns { position: relative; top: 40px; } body.v3 .hero-carousel-container { margin-top: clamp(72px, 9vh, 112px) !important; } }
/* bigger 3-line hero headline */
.hero-big { font-size: clamp(52px, 10.2vw, 146px) !important; line-height: .95 !important; }
.foot-links { grid-template-columns: 1fr 1fr !important; }
@media (max-width: 900px) { .foot-links { grid-template-columns: 1fr !important; } }
body.v3 .hero-lead b { font-weight: 700 !important; color: #1A0D03 !important; }
.foot-links { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 900px) { .foot-links { grid-template-columns: 1fr !important; } }
/* "View all work": arrow turns orange on hover like other buttons */
.our-work .sec-lead-btn:hover .arw i + i, body.v3 .sec-lead-btn:hover .arw i + i { color: #F0743A !important; }
/* case tags: compact, max two rows */
body.v3 .case-tags { max-width: 560px !important; gap: 6px !important; }
body.v3 .case-left { max-width: 600px; }
body.v3 .case-tags .hero-tag { font-size: 13px !important; height: 30px !important; padding: 0 10px 0 9px !important; gap: 6px !important; }
body.v3 .case-tags .hero-dot { width: 6px !important; height: 6px !important; }
/* case card meta on dark overlay: warm beige instead of orange */
.reel4-over .reel4-meta { color: #E3CDB2 !important; }
/* package buttons: stay black on hover, only the arrow moves (v05) */
body.v3 .hp-package-card:not(.hp-package-card--featured) .cta-btn:hover,
body.v3 .hp-package-card.hp-package-card--featured .cta-btn:hover,
body.v3 .hp-package-card .cta-btn--outline:hover,
body.v3 .hp-package-card .cta-btn:hover { background: #1A0D03 !important; border-color: #1A0D03 !important; color: #FFFAF6 !important; }
body.v3 .hp-package-list li::before { color: #F0743A !important; }

/* Teardown block: copy left, OCParts before/after slider right */
@media (min-width: 1001px) { body.v3 .cta-section { display: grid !important; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; } }
.ba { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1A0D03; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #FFFAF6; transform: translateX(-1px); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: #FFFAF6; color: #1A0D03; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-tag { position: absolute; top: 14px; font: 900 12px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; padding: 8px 10px; background: rgba(26,13,3,.75); color: #FFFAF6; pointer-events: none; }
.ba-tag--l { left: 14px; } .ba-tag--r { right: 14px; }
.ba-note { position: absolute; left: 14px; bottom: 14px; background: #FFFAF6; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.ba-note b { font: 900 12px/1.2 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; color: #F0743A; }
.ba-note span { font: 500 18px/1.2 var(--font-sans); color: #1A0D03; }
@media (max-width: 1000px) { .ba { margin-top: 40px; } }

/* before/after v2: browser mockup, 4:3 shots, price-style labels */
.ba-browser { background: #FFFFFF; border: 1px solid #E8DDD2; box-shadow: 0 30px 60px -30px rgba(26,13,3,.35); }
.ba-bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #F4EFE9; border-bottom: 1px solid #E8DDD2; position: relative; }
.ba-bar i { width: 10px; height: 10px; border-radius: 50% !important; display: block; }
.ba-bar i:nth-child(1){background:#F0743A} .ba-bar i:nth-child(2){background:#E3CDB2} .ba-bar i:nth-child(3){background:#D9CFC4}
.ba-bar span { position: absolute; left: 50%; transform: translateX(-50%); font: 500 12px/1 var(--font-sans); color: #6b5f57; background: #FFFAF6; padding: 6px 40px; }
.ba { aspect-ratio: 4 / 3 !important; }
.ba-tag { top: 22px !important; padding: 10px 18px !important; background: #EFEDEA !important; color: #1A0D03 !important; font: 500 16px/1 var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.ba-tag--l { left: 0 !important; } .ba-tag--r { right: 0 !important; left: auto !important; }
.ba-note { left: 0 !important; bottom: 22px !important; background: #EFEDEA !important; padding: 12px 18px !important; }
.ba { aspect-ratio: 1440 / 1696 !important; }
.ba { aspect-ratio: 1440 / 1960 !important; }
/* before/after teaser: handle pulses while it sweeps */
.ba.ba-hint .ba-handle span { animation: baPulse 1.1s ease-in-out infinite; }
@keyframes baPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,116,58,.55); } 50% { box-shadow: 0 0 0 10px rgba(240,116,58,0); } }

/* EXPERIMENT: accent words in section titles black (hero keeps orange) */
body.v3 h2 .accent-text, body.v3 h2 .accent-text *, body.v3 .sec-title .accent-text, body.v3 .hp-packages-title .accent-text, body.v3 .cta-title .accent-text, body.v3 .domains-title .accent-text, body.v3 .faq-title .accent-text, body.v3 .carousel-title .accent-text { color: #1A0D03 !important; }
/* decorative serif in section titles: one step lighter (800 -> 700) */
body.v3 h2 .accent-text, body.v3 .talk h2 { font-weight: 700 !important; }

/* typewriter */
.tw-ch { opacity: 0; }
.tw-ch.tw-in { opacity: 1; }
.tw-caret { display: inline-block; width: .06em; height: .9em; margin-left: .04em; background: currentColor; vertical-align: -0.06em; animation: twBlink .8s steps(1) infinite; }
@keyframes twBlink { 50% { opacity: 0; } }
/* typewriter v2: softer fade per letter, orange caret that fades out */
.tw-ch { opacity: 0; filter: blur(3px); transform: translateY(.08em); display: inline-block; white-space: pre; transition: opacity .28s ease, filter .28s ease, transform .28s ease; }
.tw-ch.tw-in { opacity: 1; filter: none; transform: none; }
.tw-caret { background: #F0743A !important; transition: opacity .35s ease; }
.tw-caret--out { opacity: 0 !important; animation: none !important; }
/* Our clients: centered header */
body.v3 .clients-header { text-align: center !important; align-items: center !important; display: flex !important; flex-direction: column; }
body.v3 .clients-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
/* chat widget: fully rounded pill */
.chatbot-pill { border-radius: 999px !important; padding-left: 18px !important; }
.chatbot-btn-open { border-radius: 999px !important; padding-left: 18px !important; padding-right: 18px !important; }
.chatbot-text { white-space: nowrap !important; }

/* chat pill: wide enough for one line */
.chatbot-pill { width: auto !important; min-width: 300px !important; max-width: none !important; }
.chatbot-pill-content, .chatbot-text { white-space: nowrap !important; flex-wrap: nowrap !important; }

/* case cards: round play button in the centre, Read case stays bottom-left */
.reel4-over .ow-btn--watch { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; width: 88px !important; height: 88px !important; padding: 0 !important; border-radius: 50% !important; background: rgba(255,250,246,.94) !important; border: 0 !important; color: #1A0D03 !important; font-size: 0 !important; gap: 0 !important; display: flex !important; align-items: center; justify-content: center; }
.reel4-over .ow-btn--watch i { font-size: 34px !important; margin-left: 4px; color: #1A0D03; }
body.v3 .reel4-over .ow-btn--watch:hover { background: #FFFAF6 !important; color: #1A0D03 !important; }
body.v3 .reel4-over .ow-btn--watch:hover i { color: #F0743A !important; transform: scale(1.15) !important; }
body.v3 .reel4 .reel4-over .ow-btn--watch.ow-btn--watch.ow-btn--watch:not(.x):not(.y), body.v3 .reel4 .reel4-over .ow-btn--watch.ow-btn--watch.ow-btn--watch:not(.x):not(.y):hover { background: rgba(255,250,246,.94) !important; border-color: transparent !important; color: #1A0D03 !important; }
/* chat pill: hug content */
.chatbot-pill { min-width: 0 !important; width: max-content !important; gap: 14px !important; justify-content: flex-start !important; padding-right: 6px !important; }

/* ---- responsive pass ---- */
@media (max-width: 1000px) {
  body.v3 .cta-section { flex-direction: column !important; align-items: stretch !important; }
  body.v3 .cta-section .cta-content { max-width: none !important; width: 100%; }
  body.v3 .ba-browser { width: 100%; margin-top: 48px; }
}
@media (max-width: 768px) {
  body.v3 .svc-row { grid-template-columns: 1fr !important; gap: 16px !important; padding: 32px 0 !important; }
  body.v3 .svc-row h3 br { display: none; }
  body.v3 .hero-btns { flex-direction: column; align-items: stretch; width: 100%; }
  body.v3 .hero-btns > a { justify-content: center; width: 100%; }
  body.v3 .cta-buttons { flex-direction: column; align-items: stretch; }
  body.v3 .cta-title br { display: none; }
}
@media (max-width: 640px) { .stick-bar .stick-btns { display: none !important; } }
@media (max-width: 1024px) { body.v3 .testimonial-card { flex-direction: column !important; } body.v3 .testimonial-image { width: 100% !important; min-height: 0 !important; height: auto !important; aspect-ratio: 4 / 3; max-height: 560px; } }
body.v3 .testimonial-image img { object-position: 50% 22%; }
@media (min-width: 1025px) and (max-width: 1180px) { .stick-bar .stick-btns .v4-btn--ghost { display: none !important; } }

/* ---- mobile pass 2 ---- */
@media (max-width: 768px) {
  /* full-width buttons on the mobile grid */
  body.v3 main .cta-btn, body.v3 main .hp-package-btn, body.v3 main .hero-btns > a, body.v3 main .svc-cta a, body.v3 main .talk a.cta-btn,
  body.v3 main .v4-btn:not(.v4-btn--sm) { width: 100% !important; max-width: none !important; justify-content: center !important; box-sizing: border-box; }
  body.v3 main .cta-buttons, body.v3 main .svc-cta, body.v3 main .talk-btns, body.v3 main .hero-btns { width: 100% !important; max-width: none !important; display: flex; flex-direction: column; align-items: stretch !important; }
  /* section titles a step above the items inside them */
  body.v3 .sec-title, body.v3 .clients-title, body.v3 .carousel-title, body.v3 .hp-packages-title, body.v3 .cta-title, body.v3 .domains-title,
  body.v3 .faq-title, body.v3 .mfr-who-title, body.v3 .mfr-why-title, body.v3 .svc-showcase-title { font-size: 44px !important; line-height: 1.08 !important; }
  body.v3 .svc-row h3 { font-size: 30px !important; }
}
/* testimonials: small portrait + name on one row, quote below */
@media (max-width: 1024px) {
  body.v3 .testimonial-card { display: grid !important; grid-template-columns: 96px 1fr; column-gap: 20px !important; row-gap: 24px !important; align-items: center !important; padding: 28px 24px !important; }
  body.v3 .testimonial-content { display: contents !important; }
  body.v3 .testimonial-image { grid-column: 1; grid-row: 1; width: 96px !important; height: 124px !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important; align-self: center !important; }
  body.v3 .testimonial-image img { height: 100% !important; width: 100% !important; object-fit: cover; object-position: 50% 20%; }
  body.v3 .testimonial-author { grid-column: 2; grid-row: 1; margin: 0 !important; display: flex; flex-direction: column; gap: 4px; }
  body.v3 .testimonial-quote-icon { display: none !important; }
  body.v3 .testimonial-quote { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; }
}
/* mobile menu sits above the chat pill */
body:has(.mobile-nav-overlay.open) #chatbotMinimized, body:has(.mobile-nav-overlay.open) #backToTop { display: none !important; }
.mobile-nav-overlay { z-index: 100000 !important; }

/* before/after: each label lives on its own side of the slider */
.ba-tagclip { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ba-tagclip--l { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-tagclip--r { clip-path: inset(0 0 0 var(--x)); }

/* tags: no container, just the coloured dot and the label */
.svc-tags .hero-tag, body.v3 .case-tags .hero-tag { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; }
.svc-tags, body.v3 .case-tags { column-gap: 18px !important; row-gap: 8px !important; }

.fl b { display: block; line-height: 1.02 !important; }
@media (max-width: 640px) {
  body.v3 .cta-availability, body.v3 .talk-avail, body.v3 [class*="availability"] { font-size: 12px !important; letter-spacing: -0.02em; align-items: center !important; white-space: nowrap; }
  body.v3 .cta-availability .cta-dot { flex: 0 0 auto; }
}
/* before/after: no gap between the browser bar and the screenshot */
.ba-browser .ba { margin-top: 0 !important; }
/* mobile: centred headers for packages and the teardown block */
@media (max-width: 768px) {
  body.v3 .hp-packages-section .badge, body.v3 .hp-packages-title, body.v3 .hp-packages-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  body.v3 .hp-packages-header, body.v3 .hp-packages-head { align-items: center !important; text-align: center !important; }
  body.v3 .cta-section:has(.ba-browser) .cta-content { text-align: center !important; }
  body.v3 .cta-section:has(.ba-browser) .cta-content > * { margin-left: auto !important; margin-right: auto !important; }
  body.v3 .cta-section:has(.ba-browser) .cta-availability { justify-content: center !important; }
}
@media (max-width: 768px) {
  body.v3 .cta-section:has(.ba-browser) .cta-title, body.v3 .cta-section:has(.ba-browser) .cta-subtext, body.v3 .cta-section:has(.ba-browser) .badge { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* case videos under the carousels, on the site grid */
body.v3 .case-video { max-width: 1280px; margin: 80px auto 0; aspect-ratio: 16 / 9; background: #1A0D03; position: relative; overflow: hidden; }
body.v3 .case-video video, body.v3 .case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
@media (max-width: 1360px) { body.v3 .case-video { margin-left: 16px; margin-right: 16px; } }
body.v3 .case-video { cursor: pointer; }
body.v3 .case-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.v3 .cv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; display: flex; align-items: center; gap: 8px; padding: 22px 28px 22px 22px; background: #1A0D03; color: #FFFFFF; border: 0; border-radius: 0; cursor: pointer; font: 700 18px/22px var(--font-sans); letter-spacing: 1px; white-space: nowrap; transition: opacity .25s ease; }
body.v3 .cv-play i { font-size: 24px; line-height: 1; }
body.v3 .cv-play:hover { opacity: .85; }
body.v3 .case-video.playing .cv-play, body.v3 .case-video.playing .case-video-poster { display: none; }
@media (max-width: 640px) { body.v3 .cv-play { padding: 14px 18px 14px 14px; font-size: 14px; } body.v3 .cv-play i { font-size: 20px; } }
@media (max-width: 640px) { body.v3 .case-video { margin-top: 48px; } }
/* video previews: presentation image, slightly dimmed */
body.v3 .case-video::after { content: ''; position: absolute; inset: 0; background: rgba(26,13,3,.38); z-index: 1; pointer-events: none; transition: opacity .3s ease; }
body.v3 .case-video:hover::after { opacity: .7; }
body.v3 .case-video.playing::after { display: none; }
/* mobile: Read + Watch buttons instead of the embedded case videos */
body.v3 .case-mbtns { display: none; }
@media (max-width: 768px) {
  body.v3 .case-video { display: none !important; }
  body.v3 .case-mbtns { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; width: 100%; }
  body.v3 .case-mbtns .v4-btn { width: 100% !important; justify-content: center !important; height: 52px; }
  body.v3 .case-section:has(.case-mbtns) .case-read-link { display: none !important; }
}
@media (max-width: 768px) { body.v3 .case-mbtns { order: 9; } }
body.v3 .case-mbtns .cv-mwatch { border-radius: 0 !important; width: 100% !important; height: 52px !important; position: static !important; transform: none !important; padding: 0 28px !important; }
/* Watch buttons on case videos: same type as .v4-btn (Albert Sans 500 17px) */
body.v3 .cv-play { height: 60px; padding: 0 28px; gap: 10px; font: 500 17px/1 var(--font-sans); letter-spacing: normal; }
body.v3 .cv-play i { font-size: 18px; }
@media (max-width: 640px) { body.v3 .cv-play { height: 52px; padding: 0 22px; font-size: 16px; } }