/*
 * Small, additive overrides that must NOT be made in netsera-styles.css
 * (that file is a verbatim copy of the client-provided design and must
 * never be edited directly). Keep this file short — one rule per fix.
 */

/* Contact form submit button: the icon wrapper span is not itself a flex
   container, so the global `svg { display: block }` rule breaks it onto
   its own line below the label text. Match the flex/gap pattern already
   used on .btn itself so the icon sits inline next to the label. */
.btn-text {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Real brand wordmark swapped in for the placeholder hexagon-mark + text. */
.brand-logo .brand-wordmark {
    height: 34px;
    width: auto;
}

/* The header nav is transparent-on-dark until scrolled, when it gets a
   near-white background (see .navbar.scrolled in netsera-styles.css) — the
   white wordmark would disappear against it, so swap to the black one once
   scrolled. Mobile drawer/footer/admin have a single fixed background each,
   so they only ever need one variant and aren't touched here.
   `.on-dark` (see nav.blade.php) is only applied on the homepage, where a
   dark full-bleed hero sits directly under the transparent nav — every
   other page (blog, legal, etc.) has a light background right at the top,
   so it never gets `.on-dark` and must show the dark wordmark from the
   start, not the white one. */
.navbar.on-dark .brand-logo .brand-wordmark--dark {
    display: none;
}
.navbar.on-dark.scrolled .brand-logo .brand-wordmark--light {
    display: none;
}
.navbar.on-dark.scrolled .brand-logo .brand-wordmark--dark {
    display: block;
}
.navbar:not(.on-dark) .brand-logo .brand-wordmark--light {
    display: none;
}

/* Small tagline line added under the hero's lead paragraph — sized between
   .lead and .trust-row, same centered treatment as the rest of the hero. */
.hero .hero-tagline {
    color: rgba(255,255,255,.6);
    font-size: var(--text-sm);
    letter-spacing: .04em;
    margin-top: var(--space-4);
    text-align: center;
}

/* The finalized headline is two full sentences, much longer than the short
   "Websites that win you more business." placeholder netsera-styles.css's
   .hero h1 clamp()/max-width/nowrap were tuned for. At the original sizing
   it read oversized, and .accent's white-space:nowrap forced the whole
   second sentence onto one long unbroken line. Scale the font down, widen
   the wrap measure, and let .accent wrap like normal text again. */
.hero h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    max-width: 32ch;
    text-align: center;
}
.hero h1 .accent {
    white-space: normal;
}
.hero h1 .accent::after {
    display: none;
}

/* Hero lead paragraph: the finalized subtitle is a full sentence longer than
   the placeholder copy — widen its measure so it reads as paragraph copy
   instead of wrapping tightly at the original 600px. */
.hero p.lead {
    max-width: 820px;
}

/* Footer bottom row gained a middle "legal links" group (Privacy/Terms/
   Refund) alongside the existing copyright + tagline — .bottom is already
   flex/wrap/space-between. Its inherited color (45%-opacity white, text-xs)
   is tuned for static copyright text; left as-is, the links were visually
   indistinguishable from that text and easy to miss entirely, so brighten
   and underline them to read as clickable links. */
.footer .f-legal {
    display: flex;
    gap: var(--space-5);
}
.footer .f-legal a {
    color: rgba(240,244,255,.75);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer .f-legal a:hover {
    color: #fff;
}

/* New homepage sections (business-stage cards, team, pricing) reuse
   existing .card/.svc-card/.usp/.why-grid components — the stage cards are
   the only genuinely new layout, a 3-up grid where .svc-grid is 2-up. */
.stages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
@media (max-width: 767px) {
    .stages-grid { grid-template-columns: 1fr; }
}

/* "Our Experience" label+caption grid in the new Team section, wrapped in a
   plain .card — each item is a short label (e.g. "4+ Years") with a small
   muted caption underneath (e.g. "Digital Experience"). */
.experience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}
@media (max-width: 479px) {
    .experience-grid { grid-template-columns: 1fr; }
}
.experience-item { display: flex; flex-direction: column; gap: 2px; }
.experience-item strong { font-size: var(--text-base); font-weight: 700; }
.experience-item span { font-size: var(--text-xs); color: var(--color-text-muted); }