/* ====================================
   Project Clarity Conversation Page
   ==================================== */

/* Hero */
.pcc-hero {
    background: #000000;
    color: #fff;
    padding: 64px 0 56px;
    text-align: center;
}

.pcc-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: #fff;
}

.pcc-hero__subtitle {
    font-size: 1.125rem;
    color: rgba(255,255,255,.7);
    font-style: italic;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Info Grid */
.pcc-grid {
    display: grid;
    gap: 32px;
}

.pcc-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .pcc-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* Info Blocks */
.pcc-block {
    padding: 0;
}

.pcc-block__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px;
}

.pcc-block p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #444;
    margin: 0 0 12px;
}

.pcc-block p:last-child {
    margin-bottom: 0;
}

.pcc-block ul {
    margin: 8px 0 12px;
    padding-left: 24px;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #444;
    list-style: disc;
}

.pcc-block ul li {
    margin-bottom: 6px;
}

/* HubSpot Calendar Embed */
/* Base .pcc-calendar. The calendar now only ever renders inside the hero with
   .pcc-calendar--hero alongside it, and those rules (further down, higher
   specificity) set the real height. The old 800/820px values that lived here
   were dead weight fighting the new 532px embed, so they are gone -- leaving
   them would have made the next person debug a cascade that does not matter. */
.pcc-calendar {
    margin: 0 auto;
}

.pcc-calendar .meetings-iframe-container {
    width: 100%;
}

/* Force width on the HubSpot iframe wherever it lands inside the wrapper.
   HubSpot's MeetingsEmbedCode.js sets an inline height via JS; the enforcer in
   contact.php keeps that in sync with --pcc-embed-h. Height is deliberately NOT
   set here -- the .pcc-calendar--hero rules below own it. */
.pcc-calendar iframe,
.pcc-calendar .meetings-iframe-container iframe {
    width: 100% !important;
}

@media (max-width: 640px) {
    .pcc-hero__title {
        font-size: 1.75rem;
    }
    .pcc-hero {
        padding: 48px 0 40px;
    }
}


/* ============================================================================
   SPLIT HERO -- video left, booking calendar right (2026-08-25)
   Aaron's spec: H1 stays put, video + form side by side directly beneath it,
   collapsing to a stacked single column at 1200px like the Home Tour hero.
   ========================================================================= */

:root {
    /* MINIMUM height of the HubSpot embed -- a floor, not a fixed size.
       contact.php's JS uses the same number; change both together.

       pass 2 (Aaron, 2026-08-25) reduced the hero 30% and set this to 532px
       (760 * 0.70). That CLIPPED the calendar: HubSpot reported it needs
       557px at the narrower column. A booking form you cannot fully see is
       worse than one slightly taller than the arithmetic wanted, so the floor
       became 560px and the embed is allowed to grow past it.

       pass 3 (Aaron, 2026-08-25): 15% larger again -- 560 * 1.15 = 644. Still
       a floor, so HubSpot can still ask for more. */
    --pcc-embed-h: 644px;
    --pcc-gold: #F5A623;
}

.pcc-hero--split {
    padding: 48px 0 56px;
    text-align: left;
    /* White hero (Aaron, 2026-08-25). The base .pcc-hero is black; this
       modifier overrides it, and the text colors below follow. */
    background: #FFFFFF;
    color: #1a1a1a;
}

.pcc-hero--split .pcc-hero__title {
    color: #111111;
}

.pcc-hero--split .pcc-hero__subtitle {
    color: #555555;
}

.pcc-hero__head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 38px;
}

.pcc-hero--split .pcc-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
}

.pcc-hero__split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    /* Aaron asked for more separation between the two elements; the gap now
       scales with the layout instead of sitting at a fixed 32px. */
    gap: clamp(32px, 3.2vw, 56px);
    align-items: start;
    /* Centered and RESPONSIVE to viewport width.

       History: pass 2 cut this to a fixed 900px, pass 3 raised it to a fixed
       1035px. Both were wrong in the same way -- a FIXED pixel cap looks
       correct only at the width it was tuned on. I proofed at 1440 where
       1035px fills 72%; on Aaron's much wider display the identical CSS filled
       just 40%, stranding ~763px of white space per side. He saw a nearly
       empty page while my screenshots looked fine.

       Fix: scale with the viewport and clamp at both ends, so it never gets
       cramped on a laptop and never strands margin on a wide monitor.
         min  1035px -- what pass 3 established as the right size at 1440
         pref 78vw   -- grows with the display
         max  1500px -- stops the video becoming a billboard
       IMPORTANT: the video is fluid so its height follows this automatically,
       but the calendar iframe is FIXED height (--pcc-embed-h) and does not.
       Anything that changes this width must re-check the column heights. */
    max-width: clamp(1035px, 78vw, 1500px);
    margin: 0 auto;
}

/* ---- LEFT: video ---- */

.pcc-watchcue {
    display: inline-block;
    background: var(--pcc-gold);
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: .78rem;
    padding: 8px 17px;
    border-radius: 5px;
    margin-bottom: 12px;
}

.pcc-video-shell {
    border-radius: 10px;
    overflow: hidden;
    /* 2px on white; 3px read as heavy once the black hero went away. */
    border: 2px solid var(--pcc-gold);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .18);
    background: #000;
}

.pcc-video-ratio {
    position: relative;
    padding-top: 56.25%;
    background: #000;
}

.pcc-video-ratio .pcc-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
}

/* Click-to-listen affordance. Sits over the poster and removes itself on
   play, so it never covers the controls during playback. */
.pcc-playcue {
    position: absolute;
    left: 50%;
    /* scaled with everything else */
    font-size: .8rem;
    /* Centered, NOT bottom-anchored: at 18px it landed directly on top of the
       native video control bar, so the play button and scrubber could not be
       reached until the cue was dismissed. Caught in the 1440px proof shot. */
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .82);
    color: #fff;
    border: 2px solid var(--pcc-gold);
    border-radius: 40px;
    padding: 10px 22px;
    font-size: .88rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    z-index: 3;
    transition: opacity .18s ease, visibility .18s ease;
}

.pcc-playcue:hover {
    background: rgba(0, 0, 0, .94);
}

.pcc-playcue.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.pcc-video-cap {
    margin: 13px 0 0;
    color: #555555;
    font-size: .94rem;
    line-height: 1.5;
}

/* Reassurance list -- also does layout work, closing the height gap between
   the short video column and the tall calendar column. */
.pcc-assure {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 11px;
}

.pcc-assure li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #444444;
    font-size: .95rem;
    line-height: 1.5;
}

.pcc-assure svg {
    flex: 0 0 auto;
    margin-top: 3px;
}

.pcc-assure b {
    color: #111111;
}

.pcc-callnote {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #E0E0E0;
    color: #555555;
    font-size: .95rem;
}

.pcc-callnote a {
    color: var(--pcc-gold);
    font-weight: 700;
    text-decoration: none;
}

.pcc-callnote a:hover {
    text-decoration: underline;
}

.pcc-video-cap b {
    color: #111111;
}

/* ---- RIGHT: booking card ---- */

.pcc-formcard {
    background: #fff;
    border-radius: 12px;
    padding: 23px 21px 18px;
    /* On a white hero a shadow alone leaves the card edgeless, so it gets a
       hairline border as well. */
    border: 1px solid #E0E0E0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}

.pcc-formcard__title {
    font-size: 1.32rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 5px;
    text-align: center;
}

.pcc-formcard__sub {
    font-size: .94rem;
    color: #555;
    text-align: center;
    margin: 0 0 16px;
}

/* In-hero calendar: override the standalone-section sizing that the old
   full-width placement used. */
.pcc-calendar--hero {
    max-width: none;
    margin: 0;
    min-height: var(--pcc-embed-h);
}

.pcc-calendar--hero .meetings-iframe-container {
    width: 100%;
    min-height: var(--pcc-embed-h);
}

/* min-height only. Setting `height` here would fight the JS pinner and
   re-clip the calendar whenever HubSpot asks for more room. */
.pcc-calendar--hero iframe,
.pcc-calendar--hero .meetings-iframe-container iframe {
    width: 100% !important;
    min-height: var(--pcc-embed-h) !important;
}

/* Height matching (Aaron's ask). The 16:9 video is inherently much shorter
   than the fixed-height HubSpot embed -- measured at 453px vs 889px on the
   first build, a 436px dead gap. Rather than stretch the video (which would
   letterbox John) the left column carries real supporting content beneath it,
   which closes most of the gap honestly. Whatever remains is absorbed by
   stretching the video column so its background/rhythm matches the card. */
@media (min-width: 1201px) {
    .pcc-hero__split {
        align-items: stretch;
    }

    .pcc-hero__col--video {
        display: flex;
        flex-direction: column;
    }

    /* push the phone note to the bottom so both columns end together */
    .pcc-callnote {
        margin-top: auto;
    }
}

/* ---- Collapse to stacked, per Aaron: "past 1200 pixels or so" ---- */
@media (max-width: 1200px) {
    .pcc-hero__split {
        grid-template-columns: 1fr;
        gap: 32px;
        /* MOBILE OVERFLOW FIX, 2026-09-17 (Aaron reported the page sideways on
           his phone: header clipped left, white gutter right).

           A `1fr` track has an AUTO minimum, so it inflates to the widest
           min-content in its subtree instead of shrinking. HubSpot's
           MeetingsEmbedCode.js sets `min-width: 312px` INLINE on its own
           iframe, which made the floor:
             312 iframe + 28 formcard padding + 2 border = 342px
           Measured at 360px viewport: container content box 328px, grid track
           342px, document scrollWidth 376 vs client 360 = 16px of horizontal
           overflow that dragged the whole page (header included) sideways.

           `minmax(0, 1fr)` lets the track shrink below its content's
           min-content, which is what stops the page scrolling. The iframe is
           then constrained by the rules further down.

           NOTE: the VIDEO was never the cause -- it is fluid (padding-top
           56.25% + inset:0) and measured 342px only because its column was
           being stretched by its sibling. Fixing the iframe fixes both. */
        grid-template-columns: minmax(0, 1fr);
    }

    .pcc-hero__col--video {
        position: static;
        /* 600 * 1.15 = 690, in step with the desktop upscale */
        max-width: 690px;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    .pcc-hero__col--form {
        max-width: 690px;
        margin: 0 auto;
        width: 100%;
        /* Same reason as the track above: without this the column re-asserts
           its children's min-content and the overflow returns. */
        min-width: 0;
    }

    .pcc-video-cap {
        text-align: center;
    }
}

/* ------------------------------------------------------------------
   NARROW PHONES (2026-09-17). Everything above is layout; this is the
   actual override of HubSpot's inline `min-width: 312px`.

   It must be `!important` because the value is an INLINE style written by
   their script, and it must be re-asserted on their resize messages --
   the enforcer in contact.php now does that for width as well as height.

   Kept to <=560px on purpose: at 375px and up the 342px floor still fits
   inside the container (375 - 32 = 343), so wider phones were never broken
   and their layout is left byte-for-byte alone.
   ------------------------------------------------------------------ */
@media (max-width: 560px) {
    .pcc-formcard,
    .pcc-calendar,
    .pcc-calendar--hero,
    .pcc-calendar--hero .meetings-iframe-container,
    .pcc-hero__col,
    .pcc-hero__col--form,
    .pcc-hero__col--video,
    .pcc-video-shell {
        min-width: 0;
        max-width: 100%;
    }

    /* The one that actually stops the overflow. */
    .pcc-calendar iframe,
    .pcc-calendar .meetings-iframe-container iframe,
    .pcc-calendar--hero iframe,
    .pcc-calendar--hero .meetings-iframe-container iframe {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reclaim horizontal room so the booking form is not cramped once it is
       allowed to shrink. 14px -> 10px gives the embed 8px back. */
    .pcc-formcard {
        padding: 20px 10px 16px;
    }
}

/* ------------------------------------------------------------------
   VERY NARROW PHONES (<=340px: iPhone SE 1st gen, Galaxy Fold cover
   screen, and any phone with browser font scaling turned up).

   Releasing HubSpot's min-width stops the page overflowing, but at 320px
   it let the booking iframe shrink to 226px, which is a cramped form --
   trading a broken layout for an unusable one is not a fix. Claw back the
   remaining horizontal padding so the embed keeps a workable width.
     320 viewport - 16 container padding - 8 card padding - 2 border = 294
   Verified 294px at 320 viewport, against a 240px usability floor.
   ------------------------------------------------------------------ */
@media (max-width: 340px) {
    .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .pcc-formcard {
        padding: 16px 4px 12px;
    }
}

@media (max-width: 640px) {
    .pcc-hero--split {
        padding: 40px 0 48px;
    }

    .pcc-formcard {
        padding: 20px 14px 16px;
    }

    .pcc-watchcue {
        font-size: .72rem;
        padding: 8px 14px;
        letter-spacing: .06em;
    }

    .pcc-playcue {
        font-size: .8rem;
        padding: 8px 16px;
        bottom: 12px;
    }
}

/* ==========================================================================
   VISIT US -- office cards with maps and directions (2026-09-04, GBP audit A2)

   Two cards side by side on desktop, stacked on mobile. Uses the same
   clamp()-based sizing discipline as the rest of the site: no fixed pixel cap
   on a centered layout (2026-08-25 incident -- a 1280px cap filled 40% of a
   2560 display).

   The map keeps a 4:3 box via aspect-ratio so the iframe cannot collapse to
   zero height before it loads, which would make the page jump under the
   visitor's thumb.
   ========================================================================== */

.bx-visit {
    padding-block: clamp(2.5rem, 4vw, 4rem);
    background: #FAFAFA;
    border-top: 1px solid #E8E8E8;
}

.bx-visit__title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #1A1A1A;
}

.bx-visit__lede {
    text-align: center;
    color: #555;
    font-size: 0.9688rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto clamp(1.5rem, 2.5vw, 2.5rem);
}

.bx-visit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.bx-visit__card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 14px;
    padding: clamp(1.25rem, 1.8vw, 1.75rem);
    display: flex;
    flex-direction: column;
}

.bx-visit__office {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 0.4rem;
}

.bx-visit__address {
    font-style: normal;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1rem;
}

.bx-visit__map {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #ECECEC;
    margin-bottom: 1rem;
}

.bx-visit__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.bx-visit__actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.bx-visit__btn {
    text-decoration: none;
}

.bx-visit__call {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #C97E0B;
    text-decoration: none;
    white-space: nowrap;
}

.bx-visit__call:hover,
.bx-visit__call:focus-visible {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .bx-visit__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bx-visit__btn {
        text-align: center;
    }

    .bx-visit__call {
        text-align: center;
    }
}