/* Sub-pages: services, how-we-price and the blog.
   The page shell comes from style.css (.services, .why-vynflo, .dark-section,
   .container, .service-row, .split-layout). This file holds the pieces those
   pages need that the homepage has no equivalent of.

   Deliberate choices, so nobody reintroduces them by habit:
   - No tracked-out caps labels above headings. A heading that needs a label
     above it to be understood is the wrong heading.
   - No arrows glued to link text. The button says what it does.
   - No checkmark bullets. Rules separate the items; a tick adds nothing.
   - Rounded cards are used only where the items really are parallel choices.
     Everything else is a list with hairlines, which is what specs look like.
   - Content is visible on load. No reveal-on-scroll on these pages. */

/* Hero ------------------------------------------------------------------ */
.page-hero {
    padding: 124px 0 0;
    background: var(--light-surface);
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 40px;
    /* The illustration stands on the line where the hero ends, the way the
       homepage dashboard does, rather than floating in the middle of the
       section with air under it. */
    align-items: end;
}

.page-hero-text {
    padding-bottom: 76px;
}

/* The five service heroes have headlines of two, three and four lines, so the
   text column used to decide the height of the band and no two pages opened
   the same way: 691px on Websites against 774px on WhatsApp.
   A min-height was the wrong fix. Everything in this hero is bottom-aligned,
   so the slack all piled up at the top and left a dead band under the navbar.
   The art is a fixed height on every page now, so the honest fix is to stop
   the copy from being the tallest thing: a wider measure lets a long headline
   wrap to three lines instead of four, and then the illustration sets the
   height everywhere. */
/* Service heroes, composition.
   Three faults were tangled together here. The copy was bottom-aligned against
   an illustration taller than it, so a short headline (Websites) pushed 168px
   of nothing under the navbar. The headline ran to five lines on WhatsApp and
   two on Websites, so the band changed height from page to page. And a floor
   on the grid, which was my first attempt, only moved the dead space rather
   than removing it, because everything inside was still bottom-aligned.
   The illustration is a fixed height on every page now, so it sets the band.
   The copy is centred against it, and a smaller headline measure keeps even
   the longest one from outgrowing the picture. */
.page-hero-grid:not(.hero-panel) {
    /* The back link sits where the three four-line pages already had it, about
       175px down the page, which is the position Nived picked as correct. The
       extra top padding puts it there; the floor comes down by the same amount
       so the band does not grow, and the illustration keeps setting the
       height. */
    padding-top: 44px;
    min-height: 621px;
}

/* The longest headline nearly fills the band, which left its buttons 6px off
   the bottom line. A little less air inside the copy block buys that back
   without changing the band. */
.page-hero-grid:not(.hero-panel) .page-hero h1 {
    margin-bottom: 16px;
}

.page-hero-grid:not(.hero-panel) .page-hero-lede {
    margin-bottom: 20px;
}

/* The back link is navigation, not copy, so it is pinned to the top of the
   band and only the headline, lede and buttons are centred against the
   illustration. Centring the whole block moved the link with the length of
   the headline: five lines on WhatsApp carried it 42px up, two lines on
   Websites carried it 84px down, so it landed in a different place on every
   page. The auto margins take the slack above the headline and below the
   buttons, which centres that group and leaves the link where it was. */
.page-hero-grid:not(.hero-panel) .page-hero-text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.page-hero-grid:not(.hero-panel) .page-hero-text .back-link {
    flex: none;
}

.page-hero-grid:not(.hero-panel) .page-hero-text h1 {
    margin-top: auto;
}

.page-hero-grid:not(.hero-panel) .page-hero-text .page-hero-actions {
    margin-bottom: auto;
}

.page-hero-grid:not(.hero-panel) .page-hero h1 {
    font-size: clamp(33px, 3.3vw, 47px);
    max-width: 20ch;
}

/* The illustration is the one used on that service's own post, cut out of its
   background so it sits on the page rather than in a box. It runs past the
   container on the right, which is what stops it reading as a stock photo
   dropped into a slot. */
.page-hero-art {
    margin: 0 -10% 0 0;
    align-self: end;
}

.page-hero-art img {
    display: block;
    width: 100%;
    height: auto;
}

.page-hero h1 {
    font-size: clamp(36px, 4.2vw, 58px);
    max-width: 18ch;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.page-hero-lede {
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-muted-light);
    max-width: 58ch;
    margin-bottom: 30px;
}

.page-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Section headings on sub-pages ----------------------------------------- */
.services .section-header,
.why-vynflo .section-header {
    text-align: left;
    max-width: 46ch;
    margin: 0 0 48px;
}

.services .section-header h2,
.why-vynflo .section-header h2 {
    max-width: 26ch;
}

.service-content h2 {
    font-size: 34px;
    margin-bottom: 14px;
}

.service-row.single {
    margin-bottom: 0;
}

/* Spec lists. Hairlines carry the separation, no ticks. ------------------ */
.check-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.check-list li {
    font-size: 16.5px;
    line-height: 1.6;
    color: #3F4756;
    padding: 14px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

/* The right half of a split section: a plain spec block, not a floating card */
.spec-panel {
    border-left: 2px solid var(--primary);
    padding: 4px 0 4px 26px;
}

.spec-panel h3 {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 14px;
}

.spec-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spec-panel li {
    font-size: 16px;
    line-height: 1.55;
    color: #3F4756;
    padding: 9px 0;
}

.spec-note {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-muted-light);
}

/* Limits. A numbered spec list, because these are terms, not features. --- */
.limit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 56px;
    max-width: 960px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.limit-card {
    padding: 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.limit-card h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
}

.limit-card p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-muted-dark);
    margin: 0;
}

/* A sequence genuinely is numbered, so these keep their numerals. */
.limit-grid.steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 0 36px;
}

.step-n {
    display: block;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.22);
    line-height: 1;
    margin-bottom: 12px;
}

.limit-grid.light {
    border-top-color: rgba(15, 23, 42, 0.12);
    max-width: none;
}

.limit-grid.light:not(.steps) {
    grid-template-columns: repeat(3, 1fr);
}

.limit-grid.light .limit-card {
    border-bottom-color: rgba(15, 23, 42, 0.12);
}

.limit-grid.light .limit-card h3 {
    color: var(--text-dark);
}

.limit-grid.light .limit-card p {
    color: var(--text-muted-light);
}

.limit-grid.light .step-n {
    color: rgba(37, 99, 235, 0.35);
}

/* Hub cards. Four parallel choices, so cards are the honest form here. --- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    border-left: 1px solid rgba(15, 23, 42, 0.12);
}

.svc-card {
    display: block;
    padding: 34px 34px 32px;
    border-right: 1px solid rgba(15, 23, 42, 0.12);
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    background: var(--light-surface);
}

.svc-card:hover {
    background: #F3F7FF;
}

.svc-card h3 {
    font-family: var(--font-heading);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.svc-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted-light);
    margin-bottom: 16px;
}

.svc-more {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* Closing CTA ----------------------------------------------------------- */
.page-cta {
    max-width: 640px;
}

.page-cta .logo-small {
    margin-bottom: 22px;
}

.page-cta h2 {
    font-size: 38px;
    color: var(--text-light);
    margin-bottom: 14px;
}

.page-cta p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-muted-dark);
    margin-bottom: 26px;
}

/* Blog ------------------------------------------------------------------ */
.article-date {
    font-size: 15px;
    color: var(--text-muted-light);
}

.article-body {
    max-width: 68ch;
}

.post-grid {
    border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.post-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 32px;
    row-gap: 8px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.post-card:hover h3 {
    color: var(--primary);
}

.post-card time {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 14.5px;
    color: #8A93A6;
}

.post-card h3 {
    grid-column: 2;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.post-card p {
    grid-column: 2;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted-light);
    margin: 0;
    max-width: 62ch;
}

@media (max-width: 900px) {
    .limit-grid.steps,
    .limit-grid.light:not(.steps) {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 32px;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: 112px 0 0;
    }

    /* The desktop hero rules were pasted in here by mistake, which kept the
       two-column grid and the negative margin on phones and pushed the
       illustration off the right edge. On a narrow screen the art stacks
       under the copy and stays inside the container. */
    .page-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .page-hero-art {
        margin: 0;
        justify-self: center;
    }

    .page-hero-text {
        padding-bottom: 0;
    }

    .page-hero h1 {
        max-width: none;
    }

    .page-hero-lede {
        font-size: 17px;
    }

    .service-content h2,
    .page-cta h2 {
        font-size: 27px;
    }

    .svc-grid,
    .limit-grid,
    .limit-grid.steps,
    .limit-grid.light:not(.steps) {
        grid-template-columns: 1fr;
    }

    .svc-card {
        padding: 26px 22px 24px;
    }

    .post-card {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .post-card time,
    .post-card h3,
    .post-card p {
        grid-column: 1;
        grid-row: auto;
    }

    .spec-panel {
        padding-left: 20px;
    }
}

/* Contact page: the direct channels, before the form. Someone who already
   knows what they want should not have to fill anything in. */
.contact-channels {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    max-width: 420px;
}

.contact-channels li {
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.contact-channels a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 13px 0;
    font-size: 16.5px;
    color: var(--text-dark);
}

.contact-channels a span {
    font-size: 14px;
    color: var(--text-muted-light);
}

.contact-channels a:hover {
    color: var(--primary);
}


/* Two pages carry a panel in the hero instead of an illustration: contact
   holds the direct channels, how-we-price holds the shape of a quote. The
   columns sit closer to even, and the rules that bottom-anchor the service
   page artwork do not apply. */
.hero-panel {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    /* These two heroes carry no illustration, so nothing holds the band open
       and it read as a thin strip under the navbar. The height has to come
       from padding here instead. */
    padding-top: 28px;
    padding-bottom: 96px;
}

.hero-panel .page-hero-text {
    padding-bottom: 0;
}

.hero-panel h1 {
    font-size: clamp(40px, 5.4vw, 72px);
    max-width: 20ch;
    margin-bottom: 24px;
    /* At this size the line breaks left an orphan word on line two, so the
       browser is asked to even the lines out instead. */
    text-wrap: balance;
}

.hero-panel .page-hero-lede {
    font-size: 21px;
    max-width: 44ch;
    margin-bottom: 36px;
}

.hero-panel .spec-panel {
    justify-self: end;
    width: 100%;
    max-width: 430px;
}

.hero-panel .spec-panel h3 {
    font-size: 19px;
    margin-bottom: 18px;
}

.hero-panel .contact-channels a {
    padding: 16px 0;
    font-size: 17.5px;
}

.hero-panel .contact-channels a span {
    font-size: 14.5px;
}

.hero-panel .contact-channels {
    max-width: none;
    border-top: 0;
}

.hero-panel .contact-channels li:last-child {
    border-bottom: 0;
}

/* The spec list appears once on a dark section, where the light hairlines and
   body colour would be invisible. */
.check-list.dark {
    border-top-color: rgba(255, 255, 255, 0.16);
}

.check-list.dark li {
    color: rgba(255, 255, 255, 0.72);
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 768px) {
    .hero-panel {
        grid-template-columns: 1fr;
        padding-top: 4px;
        padding-bottom: 64px;
    }

    .hero-panel .spec-panel {
        justify-self: stretch;
        width: auto;
        max-width: none;
    }
}

/* How we price: the two bills, side by side. The point of the section is that
   they are separate and only one is ours, so they are drawn as two columns
   with a rule between rather than one merged list. No proportions are shown,
   because we do not know them until the scope exists. */
.money-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 56px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.money-col {
    padding: 28px 0 8px;
}

.money-col + .money-col {
    padding-left: 56px;
    margin-left: -56px;
    border-left: 1px solid rgba(15, 23, 42, 0.12);
}

.money-col h3 {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.money-tag {
    display: block;
    font-size: 14.5px;
    color: var(--text-muted-light);
    margin-bottom: 18px;
}

.money-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.money-col li {
    font-size: 16.5px;
    line-height: 1.5;
    color: #3F4756;
    padding: 12px 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.money-note {
    margin: 30px 0 0;
    max-width: 62ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-muted-light);
}

@media (max-width: 768px) {
    .money-split {
        grid-template-columns: 1fr;
    }

    .money-col + .money-col {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, 0.12);
    }
}

/* Contact page ----------------------------------------------------------
   The form IS the page, so it sits at the top with the direct channels
   beside it. There is deliberately nothing under it: no hero band, no steps
   section, no list of what to tell us. */
.contact-top {
    padding-top: 172px;
}

.contact-top .contact-info h1 {
    font-size: clamp(38px, 4.4vw, 58px);
    line-height: 1.08;
    margin-bottom: 20px;
    color: var(--text-light);
    text-wrap: balance;
}

.contact-top .contact-info p {
    font-size: 19px;
    line-height: 1.6;
    max-width: 36ch;
    margin-bottom: 36px;
}

.contact-top .contact-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .contact-top {
        padding-top: 124px;
        padding-bottom: 88px;
    }
}

/* Article hero ----------------------------------------------------------
   The dateline used to sit flush on the section's bottom edge, touching the
   divider, which read as a stray caption rather than as the article's date.
   And the only way back to the list was the navbar's Blog link. */
.article-hero {
    padding-bottom: 60px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 28px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted-light);
    transition: color 0.15s ease;
}

.back-link::before {
    content: "\2190";
    font-size: 17px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.back-link:hover {
    color: var(--primary);
}

.back-link:hover::before {
    transform: translateX(-3px);
}

.article-hero .article-date {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    max-width: 18ch;
}

@media (max-width: 768px) {
    .article-hero {
        padding-bottom: 44px;
    }

    .back-link {
        margin-bottom: 22px;
    }
}

/* More reading ----------------------------------------------------------
   The related list used to sit on white directly under an article body on
   #F8FAFF, a difference too small to read as a boundary, so it looked like a
   final section of the article itself. The article now holds the white
   reading surface and this band is the tinted one, with a rule above it. */
.article-section {
    background: #ffffff;
}

.more-reading {
    background: #F1F4FD;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
    padding: 88px 0 96px;
}

.more-reading .section-header {
    margin-bottom: 36px;
}

.more-reading .section-header h2 {
    font-size: 30px;
    max-width: 24ch;
}

/* Links inside a spec list. They carry the weight of the item, so they are
   underlined rather than coloured, and only pick up the brand colour on
   hover. A list of five blue phrases would read as a nav menu. */
.spec-panel li a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(37, 99, 235, 0.45);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.spec-panel li a:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

/* The contact hero is the one dark ground a back link lands on, where the
   muted light-page colour is nearly invisible. */
.contact-top .back-link {
    color: rgba(255, 255, 255, 0.6);
}

.contact-top .back-link:hover {
    color: #ffffff;
}


/* The closing banner is the last thing on every service page, so an uneven one
   makes the set look unfinished. Its copy runs from one line to three, so it
   gets a floor too and centres what it has. */
.cta-banner .page-cta {
    min-height: 300px;
    align-content: center;
}


/* Hit area only. The padding is cancelled by an equal negative margin, so the
   link sits exactly where it did while giving a thumb 43px to aim at. */
.back-link {
    padding: 10px 0;
    margin-top: -10px;
}

.page-hero-grid:not(.hero-panel) .page-hero-text .back-link {
    margin-bottom: 18px;
}