/* ============================================================================
   SwiftForge Web — rebuild components (loaded after style.css).
   Reuses the live GeneratePress palette via CSS vars, hex fallbacks inline.
   accent #80a9af · gold #bfa44b · dark #11151B · warm #FAF8F4 · base-2 #f7f8f9
   ============================================================================ */

.entry-content > h2 { margin-top: 1.6em; }
.entry-content p { line-height: 1.7; }
.sfw-lead { font-size: 1.15rem; }
.sfw-cta-wrap { margin: 1.5em 0; }
.sfw-inline-links { margin: 1em 0; }
.sfw-muted { color: #5b6470; }

/* --- Hero: text left, photo right (§4.1) --- */
.sfw-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; margin: 1rem 0 2rem; }
.sfw-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; margin-top: 0; }
.sfw-hero .sfw-hero-photo img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(17,21,27,.18); }
.sfw-signature { font-weight: 600; }
@media (max-width: 768px) { .sfw-hero { grid-template-columns: 1fr; } .sfw-hero .sfw-hero-photo { order: -1; max-width: 320px; }
    /* Mobile is served a SQUARE crop, but the <img> tag still carries the desktop
       portrait's 920x1150. Without this the browser reserves 400px, paints a 320px
       square, and the headline jumps upward mid-load. */
    .sfw-hero .sfw-hero-photo img { aspect-ratio: 1 / 1; } }

/* --- Home hero polish (2026-09-10) ---------------------------------------
   Scoped to .sfw-hero--home. /about/ reuses .sfw-hero (as --nophoto) and is
   deliberately left exactly as it was.

   1. TOP MARGIN. .sfw-hero already asked for `margin: 1rem 0 2rem`, but
      style.css:132 has `.entry-content > :first-child { margin-top: 0 }` — and
      the hero IS the first child — so the headline computed to 0px and sat
      flush against the header bar. That global rule is load-bearing for every
      other page's first block, so it is not touched: this selector is the same
      specificity (0,2,0) and rebuild.css loads afterwards, so it simply wins.

   2. TYPE SCALE. The h1 was clamp(1.9rem, 4vw, 2.9rem) = 46.4px at 1280 and
      shouted over the rest of the column. The new curve caps at 2.5rem (40px)
      and, because the slope is gentler, it reaches its 1.75rem floor sooner —
      which keeps the phone size near where it already was (29.6px at 768,
      28px at 375) instead of collapsing the hook on small screens.
   -------------------------------------------------------------------- */
.entry-content > .sfw-hero--home { margin-top: 2.5rem; }
.sfw-hero--home h1 { font-size: clamp(1.75rem, 2.6vw + .6rem, 2.5rem); }

/* The hero's CTA row: primary button + secondary link, left edge flush with the
   h1. The inherited rules below have to be undone, and they are undone HERE
   rather than at source, because sfw_cta() is also called standalone on
   /pricing/, /managed/, /what-we-do/, /store-rescue/, /prestashop/,
   /woocommerce/, /terms/ and at the foot of this page, where centred is right:
     · style.css  .wp-block-buttons { justify-content: center; margin: 2rem 0 }
     · rebuild.css .sfw-cta-wrap  { margin: 1.5em 0 }
     · style.css  .wp-block-button__link { margin-bottom: 40px }  <- this one was
       invisible dead space that pushed the link 65px below the button.
   What actually holds the button on the left is the flex row itself: as a flex
   item .sfw-cta-wrap is shrink-to-fit, so there is no free space left for
   style.css's justify-content:center to distribute. The flex-start below is
   therefore belt-and-braces — it only bites if this row ever falls back to
   block layout, where the wrap goes full width and the centring returns.
   (Confirmed by perturbation: re-centring the wrap alone does not move the
   button; forcing the row back to display:block does, by 253px.)
   flex-wrap means the link drops under the button on a phone instead of
   overflowing; align-items centres them on their shared row. */
.sfw-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem; margin: 1.75rem 0 0; }
.sfw-hero-actions .sfw-cta-wrap { justify-content: flex-start; margin: 0; }
.sfw-hero-actions .sfw-inline-links { margin: 0; }
.sfw-hero-actions .wp-block-button__link { margin-bottom: 0; }

/* --- Proof bar (§4.1) --- */
.sfw-proofbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 2rem 0;
    padding: 1.25rem; background: var(--base-2, #f7f8f9); border-radius: 10px; }
.sfw-proofbar > div { font-size: .98rem; }
@media (max-width: 768px) { .sfw-proofbar { grid-template-columns: 1fr; } }

/* --- Feature grid (what a rescue includes / what I do) --- */
.sfw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.5rem 0; }
.sfw-cards .sfw-card { padding: 1.1rem 1.2rem; background: #fff; border: 1px solid #e7e9ec; border-radius: 10px; }
.sfw-cards .sfw-card strong { display: block; margin-bottom: .35rem; color: var(--contrast-2, #11151B); }
@media (max-width: 900px) { .sfw-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sfw-cards { grid-template-columns: 1fr; } }

/* --- The offer block (§1.2) --- */
.sfw-offer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0;
    border: 2px solid var(--accent, #80a9af); border-radius: 12px; padding: 1.25rem; background: #fff; }
.sfw-offer-row { padding: .5rem .75rem; }
.sfw-offer-row + .sfw-offer-row { border-left: 1px solid #e7e9ec; }
.sfw-offer-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sfw-offer .sfw-stage { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: #5b6470; }
.sfw-offer .sfw-price { font-size: 1.5rem; font-weight: 800; color: var(--contrast-2, #11151B); }
.sfw-offer h3 { margin: .35rem 0 .5rem; font-size: 1.1rem; }
.sfw-offer p { font-size: .92rem; line-height: 1.55; margin: 0; color: #444b54; }
@media (max-width: 820px) { .sfw-offer { grid-template-columns: 1fr; } .sfw-offer-row + .sfw-offer-row { border-left: 0; border-top: 1px solid #e7e9ec; } }

/* --- Guarantee (§1.3) --- */
.sfw-guarantee { border-left: 5px solid var(--gold, #bfa44b); background: #FAF8F4; margin: 1.5rem 0;
    padding: 1.1rem 1.4rem; border-radius: 0 10px 10px 0; }
.sfw-guarantee p { margin: .6rem 0; }
.sfw-guarantee .sfw-metrics { font-size: 1.05rem; }

/* --- Author box --- */
.sfw-author { display: flex; gap: 1rem; align-items: flex-start; margin: 2rem 0;
    padding: 1.1rem; background: var(--base-2, #f7f8f9); border-radius: 10px; }
.sfw-author img { border-radius: 50%; flex: 0 0 auto; }
.sfw-author-body p { margin: .2rem 0; font-size: .95rem; }
.sfw-author-name { font-size: 1.05rem; }

/* --- Tables (version status, measured) --- */
.sfw-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .96rem; }
.sfw-table th, .sfw-table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid #e7e9ec; vertical-align: top; }
.sfw-table thead th { background: var(--contrast-2, #11151B); color: #fff; }
.sfw-table tbody tr:nth-child(even) { background: #fafbfc; }
.sfw-table .sfw-warn { color: #8a2020; font-weight: 600; }

/* --- FAQ --- */
.sfw-faq { margin: 1.5rem 0; }
.sfw-faq details { border-bottom: 1px solid #e7e9ec; padding: .75rem 0; }
.sfw-faq summary { font-weight: 600; cursor: pointer; font-size: 1.05rem; }
.sfw-faq details p { margin: .6rem 0 0; }

/* --- Booking iframe (§4.8) — embeddable now the CRM allow-lists this origin --- */
.sfw-book-embed-lead { font-size: 1.2rem; margin: 1rem 0 .75rem; }
.sfw-booking { position: relative; width: 100%; border: 1px solid #e7e9ec; border-radius: 10px; overflow: hidden; margin: .25rem 0 1rem; background: var(--base-2, #f7f8f9); }
.sfw-booking iframe { width: 100%; height: 760px; border: 0; display: block; }
.sfw-book-alt { font-size: 1.02rem; margin: .5rem 0 2rem; }
.entry-content a.sfw-book-btn-link { font-weight: 700; color: var(--accent, #80a9af); }

/* --- Footer (§5.3) --- */
.sfw-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.5rem; }
.sfw-footer-grid h3 { font-size: 1rem; margin: 0 0 .6rem; }
.sfw-footer-menu { list-style: none; margin: 0; padding: 0; }
.sfw-footer-menu li { margin: .3rem 0; }
.sfw-siteinfo { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sfw-smallprint { font-size: .82rem; color: #6b7480; margin: 0; }
@media (max-width: 820px) { .sfw-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sfw-footer-grid { grid-template-columns: 1fr; } }

/* --- Form notes --- */
.sfw-note { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; }
.sfw-note.ok { background: #e8f5ec; border: 1px solid #b6ddc2; }
.sfw-note.err { background: #fbeaea; border: 1px solid #e6b8b8; }
.sfw-fielderr { color: #8a2020; font-size: .85rem; }
.sfw-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* --- Won't-do / lists --- */
.sfw-wontdo li { margin: .5rem 0; }

/* --- Blog --- */
.sfw-byline { color: #6b7480; font-size: .95rem; margin-top: -.4rem; }
.sfw-post .wp-block-list li { margin: .35rem 0; }
.sfw-post-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.sfw-post-item { padding: 1rem 0; border-bottom: 1px solid #e7e9ec; }
.sfw-post-item h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.sfw-post-item p { margin: .2rem 0; }

/* About: founder photo caption */
.sfw-photo-caption { text-align: center; font-size: .9rem; color: #6b7480; margin: .5rem 0 0; }

/* --- About: the team row ---
   Every member gets the identical frame, so a real photo and the initials monogram
   are interchangeable: only the img src ever changes.

   The row is deliberately CONSTRAINED and centred rather than stretched across the
   full text column. Three 1fr columns over ~1100px pushed the faces so far apart
   that they read as three unrelated items instead of one team, which is the whole
   point of the section.

   The two hairlines are the only "chrome" here. They bracket the row and the
   external-specialists line into one block so the section has structure without a
   card, a tint or a border box — this page is an enterprise about page, not a
   product landing page.

   The matching of the three circles is done in the IMAGES, not here: each avatar is
   cropped to the same head height and the same eye-line and graded to one shared
   exposure/white balance (see _source-photos/regenerate-team-avatars.php). CSS only
   has to draw identical frames. */
.sfw-team-block { border-top: 1px solid #e9ebee; border-bottom: 1px solid #e9ebee;
    padding: 2.1rem 0 1.9rem; margin: 1.9rem 0 2.1rem; }
.sfw-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2rem; list-style: none; padding: 0;
    max-width: 690px; margin: 0 auto 1.4rem; }
.sfw-team .sfw-team-member { text-align: center; margin: 0; }
.sfw-team .sfw-avatar { display: block; margin: 0 auto .95rem; width: 132px; height: 132px;
    border-radius: 50%; object-fit: cover; object-position: center;
    background: #eceae6;
    /* A hairline + one soft shadow. The old teal ring was louder than the faces and,
       because the monogram was also teal, it made the placeholder the loudest thing
       in the row. Neutral hairline lets the three photos carry the section. */
    box-shadow: 0 0 0 1px rgba(17,21,27,.12), 0 3px 12px rgba(17,21,27,.08);
    transition: box-shadow .18s ease; }
/* The name is a link, but default underlined link-blue made the row look like a
   list of references rather than a team. Inherit the body colour; the brand gold
   underline appears on hover/focus so the affordance is still obvious. */
.sfw-team-name { display: block; font-weight: 700; font-size: 1.04rem; line-height: 1.3;
    letter-spacing: -.005em; }
.sfw-team-name a { color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent; padding-bottom: 2px; }
.sfw-team-name a:hover, .sfw-team-name a:focus { border-bottom-color: #bfa44b; }
.sfw-team-name a:focus-visible { outline: 2px solid var(--accent, #80a9af); outline-offset: 3px; }
/* Hovering the name is really hovering the person, so the portrait answers too. */
.sfw-team-member:has(a:hover) .sfw-avatar,
.sfw-team-member:has(a:focus-visible) .sfw-avatar {
    box-shadow: 0 0 0 1px rgba(191,164,75,.9), 0 5px 16px rgba(17,21,27,.13); }
/* #7a828c was 3.9:1 on white — under AA for text this small. #676f79 is 5.1:1. */
.sfw-team-role { display: block; margin-top: .45rem; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .1em; color: #676f79; }
/* Two classes, because `.entry-content p { margin-bottom: var(--space-sm) }` is
   (0,1,1) and would otherwise leave a stray 16px above the closing hairline. */
.sfw-team-block .sfw-team-extra { font-size: .95rem; text-align: center; color: #4a525c; margin: 0; }
@media (prefers-reduced-motion: reduce) { .sfw-team .sfw-avatar { transition: none; } }
/* Narrow screens: one per row, avatar beside the name, so nothing has to shrink
   below a legible size or overflow the gutter. */
@media (max-width: 600px) {
    .sfw-team-block { padding: 1.5rem 0 1.45rem; margin: 1.5rem 0 1.7rem; }
    .sfw-team { grid-template-columns: 1fr; gap: 0; max-width: none; margin: 0 0 1.1rem; }
    .sfw-team .sfw-team-member { display: flex; align-items: center; gap: 1.05rem;
        text-align: left; padding: .85rem 0; }
    /* The block's own padding sets the outer rhythm; the rows only space each other. */
    .sfw-team .sfw-team-member:first-child { padding-top: 0; }
    .sfw-team .sfw-team-member:last-child { padding-bottom: 0; }
    .sfw-team .sfw-team-member + .sfw-team-member { border-top: 1px solid #f0f2f4; }
    .sfw-team .sfw-team-body { min-width: 0; }
    .sfw-team .sfw-avatar { flex: 0 0 auto; width: 72px; height: 72px; margin: 0; }
    .sfw-team-name { font-size: 1.02rem; }
    .sfw-team-role { margin-top: .3rem; }
    .sfw-team-block .sfw-team-extra { text-align: left; }
}

/* About hero without the founder portrait: the copy column should not stay stuck in
   a half-width grid track with nothing beside it. */
/*
 * About hero with no portrait beside it.
 *
 * Removing the founder photo left the copy pinned to the LEFT edge at a 62ch
 * measure inside a 1136px container — 465px of dead space down the right, so the
 * paragraph looked like it stopped mid-page. A readable line length is still
 * right; what was wrong was spending all the leftover width on one side.
 *
 * So: keep the measure, centre the BLOCK (margin-inline auto) and keep the TEXT
 * left-aligned — centred body copy is harder to read and 400 characters of it
 * would be worse than the problem being fixed. Whitespace is now symmetric, and
 * the block lines up with the .sfw-team grid below it, which is also centred.
 */
.sfw-hero--nophoto { display: block; }
.sfw-hero--nophoto .sfw-hero-copy {
    /*
     * Full width, left-aligned — the same as every other block on this page.
     *
     * Two earlier attempts were both wrong for the same reason: they treated the
     * intro as a special case. Capping it at 62ch left 465px of dead space down
     * the right, so the paragraph looked like it stopped mid-page. Centring the
     * block fixed the dead space but then the intro sat centred while "The team"
     * below started at the left margin — two competing centre lines, which reads
     * as a mistake rather than a choice.
     *
     * The page's own convention is a single left-aligned column at container
     * width; the team intro paragraph right below does exactly this. Matching it
     * is what makes the section look deliberate.
     */
    max-width: none;
    margin-inline: 0;
    text-align: left;
}