/* =========================================================
   WEBSITE PAGE — section-scoped styles only
   All selectors prefixed with .web-* (per CLAUDE.md no-cross-section rule).
   The wins testimonial reuses .cmo-wins from cmo.css verbatim.
   ========================================================= */

/* ===== HEADER (page-scoped — light variant) ===== */
.website-page .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }

/* ===== Shared text underlines — colored emphasis used throughout the page.
   Lavender-blue is the default; red and blue variants for callouts. */
.web-underline,
.web-underline-red,
.web-underline-blue,
.web-underline-yellow {
    text-decoration: underline;
    text-decoration-thickness: 6px;
    text-underline-offset: 1px;
    text-decoration-skip-ink: none;
}
.web-underline         { text-decoration-color: #b2baff; }
.web-underline-red     { text-decoration-color: var(--clr-red); }
.web-underline-blue    { text-decoration-color: var(--clr-blue); }
.web-underline-yellow  { text-decoration-color: var(--clr-yellow); }

/* ===== HERO =====
   Full-bleed photo bg (Kathy at laptop). No veil — photo's natural white wall
   gives plenty of contrast for the headline on the left. */
.web-hero {
    position: relative;
    background-color: var(--clr-cream);
    background-repeat: no-repeat;
    background-size: 185% auto;
    background-position: 76% center;
    overflow: hidden;
    padding: 200px 0 160px;
    min-height: 840px;
}

.web-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 clamp(24px, 6vw, 80px);
}

.web-hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 4.3vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--clr-navy);
    margin: 0 0 22px;
    max-width: 720px;
}
.web-hero-title .line { display: block; }

/* "business's evolution" reads heavier than the lines around it */
.web-hero-bold { font-weight: 700; }

/* Hand-drawn red circle around "needs" */
.web-hero-circle {
    position: relative;
    display: inline-block;
    padding: 0 0.25em;
}
.web-hero-circle::after {
    content: "";
    position: absolute;
    left: -0.06em;
    right: -0.06em;
    top: -0.16em;
    bottom: -0.16em;
    border: 4px solid var(--clr-red);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    transform: rotate(-2deg);
    pointer-events: none;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.web-hero-lede {
    max-width: 620px;
    margin: 0 0 36px;
}

/* "—all in one powerful online presence." — brand bold (weight 500). */
.web-hero-lede-serif {
    font-family: inherit;
    font-weight: 500;
}

.web-hero-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.web-hero-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin-bottom: 12px;
    letter-spacing: 0.4px;
}
.web-hero-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ===== IN-HOUSE TEAM ===== */
.web-team {
    background: #ebeefc;
    padding: var(--section-py-lg) 0;
    position: relative;
    overflow: hidden;
}

.web-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.web-team-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 32px;
}
.web-team-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.web-team-content { max-width: none; }

/* Title fills its column at a generous size so "in-house team" lands at
   the end of line 1 with the natural 7-line wrap from the design. */
.web-team-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.3rem, 3.8vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 28px;
    max-width: none;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.web-team-lede {
    margin-bottom: 32px;
    max-width: 540px;
}

/* CTA text white on the yellow pill */
.web-team-cta { color: #fff; }
.web-team-cta:hover { color: #fff; }

/* ===== OUR WORK ===== */
.web-work {
    background: #fff;
    padding: var(--section-py-lg) 0 var(--section-py);
}

.web-work-container { text-align: center; }

.web-work-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--clr-navy);
    margin-bottom: 8px;
}

.web-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 36px 0 56px;
}

.web-work-card {
    display: block;
    aspect-ratio: 16 / 10;
    background: #fff;
    border: 5px solid var(--clr-navy);
    border-radius: 14px;
    box-shadow: 6px 6px 0 rgba(26, 31, 54, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.web-work-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(26, 31, 54, 0.22);
}

/* Solid blue CTA — matches the brand blue */
.web-work-btn {
    background: #0152f5;
    color: #fff;
    border: 0;
}
.web-work-btn:hover { background: #0145cd; color: #fff; }

/* ===== YOUR BUSINESS HAS EVOLVED =====
   Cream band with a horizontal scribble divider at the bottom only. */
.web-evolved {
    background: var(--clr-cream);
    padding: var(--section-py-lg) 0;
    position: relative;
}

.web-evolved::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 36px;
    background-image: url('../assets/images/SVG/scribble-divider.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.web-evolved-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
}

.web-evolved-headline-col { max-width: 560px; }

.web-evolved-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 56px;
}
.web-evolved-title .line { display: block; }

/* Typography from .section-sublede (style.css). Layout only here. */
.web-evolved-eyebrow {
    max-width: 460px;
}

.web-evolved-text-col { max-width: 600px; padding-top: 8px; }

.web-evolved-text-col p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}

.web-evolved-text-col p:last-child { margin-bottom: 0; }

.web-evolved-question {
    margin-top: 4px;
    margin-bottom: 18px !important;
}

.web-evolved-text-col strong { font-weight: 600; }

/* ===== DESIGNED + DEVELOPED ===== */
.web-designed {
    background: #fff;
    padding: var(--section-py-lg) 0;
}

.web-designed-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.web-designed-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 32px;
}
.web-designed-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.web-designed-content { max-width: 760px; }

.web-designed-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 3.7vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--clr-navy);
    margin: 0 0 36px;
}
.web-designed-title .line { display: block; }

.web-designed-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}
.web-designed-content p:last-child { margin-bottom: 0; }

/* ===== CLARITY WEBSITE PRICING =====
   Soft blue → white gradient band. iPhone SVG on the left overlaps the
   right-column tier cards via grid + z-index. */
.web-pricing {
    background: linear-gradient(180deg, #d8dcff 0%, #d8dcff 70%, #ffffff 100%);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* Single relative container, narrower max-width so the entire phone +
   content composition sits visually centered in the section. */
.web-pricing-grid {
    position: relative;
    min-height: 720px;
    max-width: 1080px;
    margin: 0 auto;
}

.web-pricing-mockup {
    position: absolute;
    left: clamp(60px, 7vw, 100px);
    top: 50%;
    transform: translateY(calc(-50% + 28px));
    width: clamp(280px, 30vw, 360px);
    z-index: 2;
    pointer-events: none;
}
.web-pricing-phone {
    width: 100%;
    height: auto;
    display: block;
}

/* Right-side content — left padding NOT applied to the container so tier
   cards can stretch full width. Each child element gets its own clearance. */
.web-pricing-content {
    max-width: none;
    position: relative;
    z-index: 1;
}
/* Head and foot wrappers sit to the right of the phone, left-aligned. */
.web-pricing-head,
.web-pricing-foot {
    margin-left: clamp(420px, 46vw, 540px);
    text-align: left;
}
.web-pricing-foot { margin-top: 0; }

.web-pricing-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1;
    color: var(--clr-navy);
    margin-top: 0;
    margin-bottom: 8px;
}
/* Typography from .section-sublede (style.css). Layout only here. */
.web-pricing-sub {
    margin-bottom: 18px;
}
.web-pricing-price {
    margin-bottom: 28px;
    text-align: left;
}
/* Pricing pill — white pill with 1px red outline; amount in mono font */
.web-pricing-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--clr-red);
    border-radius: 999px;
    padding: 12px 26px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
}
.web-pricing-pill-amount {
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.04em;
}

.web-pricing-eyebrow {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 600;
    color: var(--clr-navy);
    margin-bottom: 18px;
    letter-spacing: 0.3px;
}

/* Tier cards extend behind the phone on the left and end with a right
   margin so they don't run all the way to the section edge. PHASE circle
   sits just past the phone's right edge in its own slot, then text. */
.web-pricing-tiers {
    list-style: none;
    padding: 0;
    margin: 0 0 36px clamp(360px, 38vw, 440px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.web-pricing-tiers > li {
    background: var(--clr-cream);
    border-radius: 0 36px 36px 0; /* left edge straight where phone intersects */
    padding: 18px 32px 18px 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
}
img.web-pricing-num {
    width: 73px;
    height: 73px;
    flex-shrink: 0;
    display: block;
}
.web-pricing-tier-body h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--clr-navy);
    margin: 0 0 2px;
}
.web-pricing-tier-body p {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.3px;
}
.web-pricing-tier-body ul {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}
.web-pricing-tier-body ul li {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
    margin: 0;
}

/* ===== BRING YOUR WEBSITE TO LIFE — Photo + Video =====
   Full-bleed section: the photo (Kathy with yellow phone) is the section
   background. Photo's natural white wall extends to the right and gives
   the content column its own clean canvas. Image is set inline via
   `style="background-image: url(...)"` so paths resolve from the document
   (per CLAUDE.md gotcha noted in the rebranded section). */
.web-photo-video {
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: auto 101%;
    background-position: calc(61% + 30px) center;
    padding: var(--section-py-lg) 0;
}

.web-photo-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
    min-height: 660px;
}

.web-photo-video-content {
    max-width: 560px;
    grid-column: 2;
}

.web-photo-video-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 28px;
}
.web-photo-video-title .line { display: block; }

.web-photo-video-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 14px;
    letter-spacing: 0.4px;
}

.web-photo-video-lede {
    margin-bottom: 22px;
}
.web-photo-video-lede strong {
    font-weight: 500;
}

/* Hand-drawn circle highlights — SVG assets, organic stroke.
   Inline-block + relative padding lets the SVG hug the word at any size. */
.web-circle-red,
.web-circle-blue {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background-repeat: no-repeat;
    background-position: center 52%;
    background-size: 100% 105%;
}
.web-circle-red  { background-image: url('../assets/images/red-circle-scribble.svg'); }
.web-circle-blue {
    position: relative;
    z-index: 0;
    padding: 0 18px;
    background-image: none;
    isolation: isolate;
}
.web-circle-blue-svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 118%;
    height: 150%;
    pointer-events: none;
    z-index: -1;
}

/* Layout-only: extra breathing room above the CTA. Visual styling comes from
   canonical .btn .btn-blue .btn-lg in style.css. */
.web-photo-video-cta { margin-top: 28px; }

/* ===== TRUST / GETTING THE WEBSITE ===== */
.web-trust {
    background: var(--clr-cream);
    padding: var(--section-py-lg) 0;
}

.web-trust-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: center;
}

.web-trust-content { max-width: 580px; }

.web-trust-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.05;
    color: var(--clr-navy);
    margin: 0 0 24px;
}
.web-trust-title .line { display: block; }

.web-trust-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin-bottom: 16px;
    letter-spacing: 0.4px;
}

.web-trust-lede { margin-bottom: 22px; }
.web-trust-lede strong { font-weight: 500; }

.web-trust-content .btn { margin-top: 16px; }

/* iMac mockup graphic (SVG asset). Right-column visual for the trust section. */
.web-trust-mockup {
    position: relative;
    text-align: center;
}
.web-trust-imac {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0 auto;
}

/* ===== FAQ ===== */
.web-faq {
    background: #fff;
    padding: var(--section-py-lg) 0 var(--section-py);
}

.web-faq-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
}

.web-faq-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.web-faq-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    line-height: 0.95;
    color: var(--clr-navy);
    margin: 0;
}

.web-faq-mark {
    width: clamp(38px, 4vw, 56px);
    height: auto;
    align-self: flex-start;
    margin-top: 8px;
}

/* Accordion list — each item is a rounded-pill outlined row.
   The outline disappears on the open item, freeing the answer to hang
   below the question with no border. */
.web-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}

/* Pill outline lives on the summary (Q row) so it stays a perfect pill
   regardless of open/closed state. The answer hangs below the pill. */
.web-faq-item {
    border: none;
    background: transparent;
}

.web-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
    border: 1.5px solid #d8d8ea;
    border-radius: 999px;
    background: #fff;
}
.web-faq-item summary:hover { border-color: #b8b8d4; }
.web-faq-item summary::-webkit-details-marker,
.web-faq-item summary::marker { display: none; }

/* Q: / A: labels — serif, slightly larger than body, fixed-width column
   so the question text and answer text align on the same left edge. */
.web-faq-label {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--clr-navy);
    flex-shrink: 0;
    min-width: 28px;
}
.web-faq-label--a {
    align-self: flex-start;
    line-height: 1.6;
}

.web-faq-q {
    flex: 1;
}

.web-faq-item[open] summary { cursor: default; }

.web-faq-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 28px 6px;
}
.web-faq-body p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--clr-navy);
    letter-spacing: 0.4px;
    margin: 0;
    max-width: 640px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    /* Hero — at tablet/phone the photo's natural cover crop puts Kathy on top
       of the headline. Fade a translucent-white veil from the left so the text
       column stays readable, and shift the bg-position right so Kathy sits on
       the right edge instead of dead-center. */
    .web-hero {
        padding: 160px 0 80px;
        min-height: 560px;
        background-size: cover;
        background-position: 92% 30%;
    }
    .web-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to right,
            rgba(241, 236, 225, 0.97) 0%,
            rgba(241, 236, 225, 0.93) 50%,
            rgba(241, 236, 225, 0.55) 78%,
            rgba(241, 236, 225, 0.1) 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    .web-team-grid,
    .web-evolved-grid,
    .web-designed-grid,
    .web-pricing-grid,
    .web-photo-video-grid,
    .web-trust-grid,
    .web-faq-grid {
        grid-template-columns: 1fr;
    }
    .web-team-image,
    .web-designed-image { order: -1; }
    .web-team-image,
    .web-designed-image { aspect-ratio: 5 / 4; max-width: 520px; margin: 0 auto; }

    /* Photo-video: photo is the section bg. On tablet/phone, push it up as a
       top banner via tall top padding + top-positioned bg, content underneath.
       Native photo aspect is ~3:2, so padding-top ≈ 67vw keeps text below it. */
    .web-photo-video {
        background-size: 100% auto;
        background-position: center top;
        padding: 70vw 24px var(--section-py-sm);
    }
    .web-photo-video-grid { min-height: 0; }
    .web-photo-video-content { grid-column: 1; max-width: none; margin: 0 auto; }

    .web-work-grid { grid-template-columns: repeat(2, 1fr); }

    .web-trust-mockup { margin-top: 32px; }

    /* Pricing — phone stacks above content; cancel desktop overlap */
    .web-pricing-grid { min-height: 0; }
    .web-pricing-mockup {
        position: static;
        transform: none;
        width: 100%;
        max-width: 280px;
        margin: 0 auto 32px;
    }
    .web-pricing-head,
    .web-pricing-foot { margin-left: 0; margin-right: 0; }
    .web-pricing-tiers { margin-left: 0; margin-right: 0; gap: 12px; }
    .web-pricing-tiers > li {
        padding: 16px 24px;
        border-radius: 24px;
        gap: 18px;
    }
    .web-pricing-tier-body ul { padding-left: 16px; }
    .web-pricing-tier-body ul li { margin-bottom: 4px; }
    .web-pricing-tier-body ul li:last-child { margin-bottom: 0; }
}

@media (max-width: 768px) {
    .web-hero { padding: 120px 0 64px; min-height: 480px; }
    .web-hero-title  { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .web-hero-lede   { font-size: 1.05rem; }
    .web-hero-checklist li { font-size: 0.95rem; }

    .web-team-title,
    .web-evolved-title,
    .web-designed-title,
    .web-photo-video-title,
    .web-trust-title { font-size: clamp(1.6rem, 6vw, 2.1rem); }

    .web-pricing-title { font-size: clamp(2rem, 7vw, 2.6rem); }

    .web-work-grid { grid-template-columns: 1fr; }

    .web-pricing-phone { max-width: 260px; }

    /* Evolved — when stacked, drop the per-column max-widths so the headline
       and body fill the section width instead of leaving empty space right. */
    .web-evolved-headline-col,
    .web-evolved-text-col { max-width: none; }

    .web-faq-heading { gap: 8px; }
    .web-faq-item summary { font-size: 1rem; padding: 14px 22px; }
    .web-faq-body { padding: 12px 22px 6px; }
}

@media (max-width: 480px) {
    .web-hero { padding: 110px 0 56px; min-height: 440px; }
    .web-hero-title { font-size: clamp(1.7rem, 8vw, 2.1rem); }

    /* On phones the photo fully fills the section, so push the veil further
       right and bump opacity so the headline + checklist read cleanly. */
    .web-hero::before {
        background: linear-gradient(
            to right,
            rgba(241, 236, 225, 0.98) 0%,
            rgba(241, 236, 225, 0.94) 60%,
            rgba(241, 236, 225, 0.6) 88%,
            rgba(241, 236, 225, 0.2) 100%
        );
    }

    /* Pricing tiers — phone: tighten card padding, gap, and bullet indent
       so the cards read as a compact set rather than a sparse list. */
    .web-pricing-tiers { gap: 10px; }
    .web-pricing-tiers > li {
        padding: 12px 18px 12px 12px;
        gap: 12px;
        border-radius: 22px;
    }
    img.web-pricing-num { width: 57px; height: 57px; }
    .web-pricing-tier-body ul { padding-left: 14px; }
    .web-pricing-tier-body ul li { margin-bottom: 2px; }
}