/* ============================================================
   T.Finch — PREVIEW home page only (loaded by index_preview.html).
   Scoped under .pv-home so it can never touch the live home.
   Reuses --font-serif (DM Serif Display) / --font-primary (Inter)
   from style.css :root.
   ============================================================ */

.pv-home {
    --pv-cream:  #F7F4ED;
    --pv-ink:    #001F26;
    --pv-ink-2:  #3D5257;
    --pv-teal:   #006D78;
    --pv-cyan:   #00ADBB;
    --pv-amber:  #F4A34B;
    --pv-line:   rgba(0, 31, 38, 0.13);
    /* match the other pages' main-header serif (Playfair Display) */
    --pv-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- Hero: one serif font, only the accent is italic+amber ---------- */
.pv-home .hero-cinematic-title {
    font-family: var(--pv-serif);
    font-weight: 400;
    color: #F5EDE4;
    font-size: clamp(38px, 5.2vw, 66px);
    line-height: 1.16;
    letter-spacing: 0;
}
.pv-home .hero-cinematic-title em.pv-accent {
    font-family: var(--pv-serif);
    font-style: italic;
    font-weight: 400;
    color: #FBB454;
    animation: none;            /* kill the inherited pulse */
    text-decoration: none;
}

/* ---------- Section headings: Playfair, larger, single row ---------- */
.pv-home .section-title {
    font-family: var(--pv-serif);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--pv-ink);
}

/* ---------- "Who we are" — underline CTA that shortens on hover ---------- */
.pv-home .pv-textlink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: relative;
    margin-top: 28px;
    padding-bottom: 7px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pv-ink);
}
.pv-home .pv-textlink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--pv-amber);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pv-home .pv-textlink:hover::after { width: 36%; }
.pv-home .pv-textlink .arrow { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.pv-home .pv-textlink:hover .arrow { transform: translateX(5px); }

/* Larger breathing room top & bottom on every home section. */
.pv-home .section { padding-top: clamp(104px, 13vw, 184px); padding-bottom: clamp(104px, 13vw, 184px); }

/* ---------- New section: "Who we work best with" ---------- */
.pv-home .pv-bestwith { background: var(--pv-cream); }
.pv-home .pv-bestwith-head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto clamp(44px, 5vw, 64px);
}
.pv-home .pv-bestwith-title {
    font-family: var(--pv-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--pv-ink);
    margin-bottom: 18px;
}
.pv-home .pv-bestwith-sub {
    font-family: var(--pv-serif);
    font-weight: 400;
    font-size: clamp(20px, 2.3vw, 30px);
    line-height: 1.3;
    color: var(--pv-ink);
    max-width: 22ch;
    margin: 0 auto;
}
.pv-home .pv-amber { color: var(--pv-amber); }

.pv-home .pv-challenge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.pv-home .pv-challenge {
    --acc: var(--pv-cyan);
    background: #fff;
    border: 1px solid var(--pv-line);
    border-radius: 14px;
    padding: clamp(28px, 2.6vw, 38px);
}
.pv-home .pv-challenge:nth-child(1) { --acc: #D98A2B; }
.pv-home .pv-challenge:nth-child(2) { --acc: var(--pv-cyan); }
.pv-home .pv-challenge:nth-child(3) { --acc: var(--pv-teal); }

.pv-home .pv-challenge-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--acc);
    background: color-mix(in srgb, var(--acc) 13%, #fff);
    margin-bottom: 24px;
}
/* color-mix fallback tints */
@supports not (background: color-mix(in srgb, red, blue)) {
    .pv-home .pv-challenge:nth-child(1) .pv-challenge-icon { background: rgba(217,138,43,0.13); }
    .pv-home .pv-challenge:nth-child(2) .pv-challenge-icon { background: rgba(0,173,187,0.13); }
    .pv-home .pv-challenge:nth-child(3) .pv-challenge-icon { background: rgba(0,109,120,0.12); }
}
.pv-home .pv-challenge-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pv-ink);
    margin-bottom: 12px;
}
.pv-home .pv-challenge-rule {
    width: 38px;
    height: 2px;
    background: var(--acc);
    margin-bottom: 22px;
}
.pv-home .pv-challenge-list { display: grid; gap: 14px; }
.pv-home .pv-challenge-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--pv-ink-2);
}
.pv-home .pv-challenge-list .bi {
    color: var(--acc);
    font-size: 16px;
    line-height: 1.4;
    flex-shrink: 0;
}

.pv-home .pv-bestwith-cta { text-align: center; margin-top: clamp(40px, 4vw, 56px); }
.pv-home .pv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 100px;
    background: var(--pv-teal);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.25s ease, transform 0.25s ease;
}
.pv-home .pv-btn:hover { background: var(--pv-ink); }
.pv-home .pv-btn span { transition: transform 0.25s ease; }
.pv-home .pv-btn:hover span { transform: translateX(4px); }

/* ============================================================
   "What we deliver" — 2x2 quadrant grid on a hairline frame.
   Each quadrant holds a serif title, description, a "View
   services" text link, and a large faded watermark numeral
   bleeding out of the bottom-right corner.
   ============================================================ */

/* ---------- Header: serif title (left) + short intro (right) ---------- */
.pv-home .services-section .pv-svc-head {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    gap: clamp(24px, 5vw, 80px);
    margin-bottom: clamp(48px, 6vw, 84px);
}
.pv-home .pv-svc-head-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pv-home .pv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pv-teal);
    margin-bottom: clamp(16px, 1.6vw, 22px);
}
.pv-home .pv-eyebrow::before {
    content: '';
    width: 36px;
    height: 1px;
    background: var(--pv-teal);
}
.pv-home .pv-svc-dot { color: var(--pv-teal); }
.pv-home .pv-svc-head-intro {
    max-width: 34ch;
    margin: 0;
    padding-top: 8px;
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.55;
    color: var(--pv-ink-2);
    justify-self: end;
}

/* ---------- 2x2 quadrant grid with hairline dividers ---------- */
/* Container draws the top + left edges; each cell draws its right +
   bottom edge, so the four cells share a single crisp cross + frame. */
.pv-home .pv-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;          /* clear style.css's fixed 280px 280px rows */
    grid-auto-rows: auto;
    gap: 0;
    border-top: 1px solid var(--pv-line);
    border-left: 1px solid var(--pv-line);
}

/* Drop the inherited bento image/pseudo layers. */
.pv-home .pv-bento .services-bento-tile-image,
.pv-home .pv-bento .services-bento-tile::before,
.pv-home .pv-bento .services-bento-tile::after { display: none; }

/* Each quadrant: top-aligned content, hairline right + bottom edge,
   and a large watermark numeral bleeding out of the bottom corner. */
.pv-home .pv-bento .services-bento-tile {
    position: relative;
    grid-column: auto;                 /* reset style.css's nth-child(2/3/4) 12-col placement */
    grid-row: auto;
    justify-content: flex-start;
    gap: clamp(16px, 1.4vw, 22px);
    min-height: clamp(360px, 30vw, 460px);
    padding: clamp(40px, 4.4vw, 76px);
    background: var(--pv-cream);
    border: 0;
    border-right: 1px solid var(--pv-line);
    border-bottom: 1px solid var(--pv-line);
    border-radius: 0;
    overflow: hidden;
    transition: background 0.4s ease;
}
.pv-home .pv-bento .services-bento-tile:hover { background: color-mix(in srgb, var(--pv-ink) 6%, var(--pv-cream)); }
@supports not (background: color-mix(in srgb, red, blue)) {
    .pv-home .pv-bento .services-bento-tile:hover { background: #ECE7DA; }
}

/* Faint oversized serif numeral anchored in the bottom-right of the cell. */
.pv-home .pv-svc-figure {
    position: absolute;
    right: clamp(10px, 1.6vw, 30px);
    bottom: clamp(8px, 1vw, 20px);
    z-index: 0;
    font-family: var(--pv-serif);
    font-weight: 500;
    font-size: clamp(120px, 13vw, 210px);
    line-height: 0.8;
    color: rgba(0, 31, 38, 0.07);
    pointer-events: none;
    user-select: none;
    transition: color 0.4s ease;
}
.pv-home .pv-bento .services-bento-tile:hover .pv-svc-figure { color: rgba(0, 109, 120, 0.11); }

/* Title + description sit above the watermark. */
.pv-home .pv-bento .services-bento-title {
    position: relative;
    z-index: 1;
    font-family: var(--pv-serif);
    font-weight: 600;
    color: var(--pv-ink);
    font-size: clamp(26px, 2.2vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.pv-home .pv-bento .services-bento-desc {
    position: relative;
    z-index: 1;
    color: var(--pv-ink-2);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.62;
    max-width: 42ch;
    margin: 0;
}

/* "View services" — plain uppercase text link with a sliding arrow. */
.pv-home .pv-bento .services-bento-cta {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(6px, 1vw, 14px);
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--pv-ink);
    font-family: var(--font-primary, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pv-home .pv-bento .services-bento-cta i {
    font-size: 15px;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pv-home .pv-bento .services-bento-tile:hover .services-bento-cta i { transform: translateX(6px); }

/* No scroll-trace borders. */
.pv-home .pv-bento .svc-trace { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
    .pv-home .services-section .pv-svc-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pv-home .pv-svc-head-intro { justify-self: start; padding-top: 0; }
}
@media (max-width: 600px) {
    .pv-home .pv-bento { grid-template-columns: 1fr; }
    .pv-home .pv-bento .services-bento-tile {
        min-height: 0;
        padding: clamp(32px, 9vw, 44px);
    }
    .pv-home .pv-svc-figure { font-size: clamp(110px, 30vw, 160px); }
}

@media (max-width: 980px) {
    .pv-home .pv-challenge-grid { grid-template-columns: 1fr; }
}

/* ---------- "A glimpse of what we've delivered" — featured works teaser ---------- */
.pv-home .pv-work-section .section-title em { font-style: italic; }
.pv-home .pv-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.6vw, 36px);
    margin-top: clamp(28px, 4vw, 48px);
}
.pv-home .pv-work-card { display: block; text-decoration: none; color: inherit; }
.pv-home .pv-work-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 2px;
    margin-bottom: 18px;
}
.pv-home .pv-work-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pv-home .pv-work-card:hover .pv-work-media img { transform: scale(1.05); }
.pv-home .pv-work-cat {
    display: block;
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pv-amber);
    margin-bottom: 10px;
}
.pv-home .pv-work-desc {
    font-family: var(--font-serif);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.35;
    color: var(--pv-ink);
    margin: 0;
}
.pv-home .pv-work-more {
    display: flex;
    justify-content: center;
    margin-top: clamp(36px, 5vw, 60px);
}

@media (max-width: 860px) {
    .pv-home .pv-work-grid { grid-template-columns: 1fr; gap: 28px; }
}