/* SwiftForge Web — site look v2 (2026-11-03, owner picked "idea 1": calm, warm, editorial).
   Loaded on EVERY page after style.css + rebuild.css (inc/header.php).
   Part 1 fonts + colours. Part 2 re-skins the older shared pieces (cards, tables, offer,
   FAQ, report form, buttons) so tools, legal pages and the blog match.
   Part 3 the page building blocks (.pg-*) used by the rewritten pages, inside <div class="pg">.
   Pages built from part 3 set $BODY_EXTRA = 'sfw-pg' (removes the old side padding so bands
   can run full width). */

@font-face { font-family: "Fraunces"; src: url(/assets/fonts/fraunces-var-latin-20261103.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(/assets/fonts/dmsans-var-latin-20261103.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

:root { --ink: #14181f; --muted: #5a6370; --body: #3b434e; --gold: #b39535; --gold-soft: #e2c977; --teal: #4f8189; --warm: #faf7f1; --line: #ebe6dc; --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- Part 1: base ---------- */
body { font-family: var(--sans); color: var(--ink); background: #fff; }
.site.grid-container, .inside-article, .site-content, .separate-containers .inside-article { background: #fff; }
.entry-content { font-size: 17.5px; line-height: 1.68; color: var(--body); }
.entry-content :is(h1, h2, h3) { font-family: var(--serif); color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.entry-content h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.1; }
.entry-content h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.18; }
.entry-content h3 { font-size: 1.25rem; line-height: 1.3; }
.entry-content h4 { font-family: var(--sans); font-weight: 700; color: var(--ink); }
.entry-content a { color: #000; }
.entry-content strong { color: var(--ink); }
.sfw-lead { font-size: 1.2rem; color: var(--muted); }

/* ---------- Part 2: older shared pieces, new skin ---------- */
.wp-block-button__link, .entry-content .button, .sfw-rf-btn.button {
  border-radius: 999px !important; background: var(--ink) !important; color: #fff !important;
  padding: 14px 26px !important; font-weight: 600; font-family: var(--sans); text-decoration: none !important; border: 0; }
.wp-block-button__link:hover, .entry-content .button:hover, .sfw-rf-btn.button:hover { background: #2a313b !important; color: #fff !important; }
.hover_yellow a:hover { background-color: #2a313b !important; }

.sfw-cards .sfw-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.sfw-cards .sfw-card strong { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin-bottom: .4rem; }

.sfw-offer { border: 1px solid var(--line); border-radius: 18px; padding: 12px; gap: 0; background: var(--warm); }
.sfw-offer-row { background: #fff; border-radius: 14px; padding: 22px 22px; margin: 6px; }
.sfw-offer-row + .sfw-offer-row { border-left: 0; }
.sfw-offer .sfw-stage { color: var(--gold); font-weight: 700; letter-spacing: .12em; }
.sfw-offer .sfw-price { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; }
.sfw-offer h3 { font-size: 1.2rem; }
.sfw-offer p, .sfw-offer ul { font-size: .95rem; color: var(--muted); }
@media (max-width: 820px) { .sfw-offer-row + .sfw-offer-row { border-top: 0; } }

.sfw-guarantee { border-left: 0; background: var(--warm); border-radius: 18px; padding: 24px 28px; }
.sfw-guarantee summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.sfw-guarantee details p { font-size: .95rem; color: var(--muted); }

.sfw-table { font-size: .95rem; }
.sfw-table thead th { background: var(--ink); font-weight: 600; }
.sfw-table thead th:first-child { border-top-left-radius: 12px; }
.sfw-table thead th:last-child { border-top-right-radius: 12px; }
.sfw-table th, .sfw-table td { border-bottom: 1px solid var(--line); padding: .75rem .9rem; }
.sfw-table tbody tr:nth-child(even) { background: var(--warm); }
.sfw-tablewrap .sfw-table td:first-child { color: var(--ink); }

.sfw-faq details { border-bottom: 1px solid var(--line); padding: 0; }
.sfw-faq summary { list-style: none; padding: 20px 40px 20px 0; position: relative; color: var(--ink); font-size: 1.08rem; }
.sfw-faq summary::-webkit-details-marker { display: none; }
.sfw-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--gold); transition: transform .2s; }
.sfw-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sfw-faq details p { margin: 0 0 1.1rem; color: var(--muted); }

.sfw-author { background: var(--warm); border-radius: 16px; padding: 20px; }

.sfw-rf { border: 0; background: var(--warm); border-radius: 20px; padding: 32px 32px 26px; }
.sfw-rf-h { font-family: var(--serif); color: var(--ink); }
.sfw-rf-field input { border: 1px solid #d9d2c3; border-radius: 10px; padding: .75rem .9rem; font-family: var(--sans); }
.sfw-rf-field input:focus-visible { outline: 3px solid var(--gold-soft); border-color: var(--gold); }
.sfw-rf-btn.button { padding: 14px 26px !important; }
.sfw-rf-what, .sfw-rf-alt { color: var(--muted); }

/* ---------- Part 3: page building blocks ---------- */
body.sfw-pg #content.site-content { padding: 0 !important; }
.sfw-pg .entry-content { margin: 0; }
.pg { font-family: var(--sans); color: var(--ink); font-size: 18px; line-height: 1.65; }
body.sfw-pg { overflow-x: clip; }
.pg h1, .pg h2, .pg h3 { font-family: var(--serif); color: var(--ink); text-align: left; margin: 0; padding: 0; max-width: none; letter-spacing: -.01em; font-weight: 600; }
.pg h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.08; }
.pg h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; margin-bottom: .6rem; }
.pg h3 { font-size: 1.3rem; line-height: 1.3; margin: .4rem 0 .5rem; }
.pg p { margin: 0 0 1rem; }
.pg ul, .pg ol { margin: 0 0 1rem 1.2em; }
.pg li { margin: 0 0 .4rem; }
.pg a { color: #000; }
.pg .sfw-rf { margin: 2rem 0 0; }
.pg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.pg-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem !important; }
.pg-sub { color: var(--muted); font-size: 1.1rem; max-width: 46em; }
.pg-small { font-size: .95rem; color: var(--muted); max-width: 34em; }
.pg-more a { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }

/* buttons */
.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0 1.6rem; }
.pg-btn { display: inline-block; padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .15s, background .15s; }
.pg .pg-btn--dark { background: var(--ink); color: #fff; }
.pg .pg-btn--dark:hover { background: #2a313b; transform: translateY(-1px); }
.pg .pg-btn--line { border: 1.5px solid var(--ink); color: var(--ink); }
.pg .pg-btn--line:hover { background: var(--ink); color: #fff; }
.pg .pg-band--dark .pg-btn--dark { background: #fff; color: var(--ink); }
.pg .pg-band--dark .pg-btn--line { border-color: #fff; color: #fff; }

/* hero with photo (home) */
.pg-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 72px 24px 88px; }
.pg-lead { font-size: 1.25rem; color: var(--muted); margin-top: 1.4rem !important; max-width: 34em; }
.pg-hero-photo { position: relative; }
.pg-hero-photo img { width: 100%; height: auto; border-radius: 20px; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.pg-photo-note { position: absolute; left: -32px; bottom: 32px; background: #fff; border-radius: 14px; padding: 16px 20px; box-shadow: 0 18px 40px rgba(20,24,31,.16); max-width: 250px; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.pg-photo-name { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* text-only page opening (every other page) */
.pg-intro { max-width: 1120px; margin: 0 auto; padding: 72px 24px 64px; }
.pg-intro > * { max-width: 800px; }
.pg-intro .pg-lead { max-width: 40em; }
.pg-intro--warm { max-width: none; background: var(--warm); }
.pg-intro--warm > .pg-wrap > * { max-width: 800px; }

/* bands (full width) */
.pg-band { width: 100vw; margin-left: calc(50% - 50vw); padding: 88px 0; }
.pg-band--warm { background: var(--warm); }
.pg-band--dark { background: var(--ink); color: #d9dde3; }
.pg-band--dark h2, .pg-band--dark h3, .pg-band--dark .pg-statement, .pg-band--dark strong { color: #fff; }
.pg-band--dark a { color: var(--gold-soft); }
.pg-band--dark .pg-sub, .pg-band--dark p, .pg-band--dark li { color: #c9ced6; }

/* sections */
.pg-section { max-width: 1120px; margin: 0 auto; padding: 96px 24px; }
.pg-section--tight { padding-top: 0; }
.pg-story { max-width: 760px; }
.pg-story p, .pg-story li { font-size: 1.12rem; color: var(--body); }
.pg-story h2 { margin-bottom: 1.4rem; }
.pg-story h3 { margin-top: 2rem; }
.pg-band--dark .pg-story p { color: #c9ced6; }

/* numbered steps / cards */
.pg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 2.6rem 0 1.6rem; }
.pg-steps--2 { grid-template-columns: repeat(2, 1fr); }
.pg-steps--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pg-step { border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; background: #fff; }
.pg-step p, .pg-step li { color: var(--muted); font-size: 1rem; }
.pg-step ul { margin-left: 1.1em; }
.pg-step-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--warm); color: var(--gold); font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.pg-band--warm .pg-step-n { background: #fff; }
.pg .pg-meta { color: var(--ink); font-weight: 600; font-size: .95rem; margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.pg-step--feature { border: 2px solid var(--ink); }

/* items with a gold rule on top (lists of things, 2 or 3 across) */
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; margin-top: 2.6rem; }
.pg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pg-item { padding-top: 18px; border-top: 2px solid var(--gold); }
.pg-item h3 { font-size: 1.15rem; }
.pg-item p { color: var(--muted); font-size: 1rem; margin: 0; }

/* prices */
.pg-price { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1.1; font-weight: 600; color: var(--ink); margin: .6rem 0 .3rem; }
.pg-price small { font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--muted); }

/* checklist */
.pg-check { list-style: none; margin: 1.2rem 0 1.4rem !important; padding: 0; }
.pg-check li { position: relative; padding-left: 30px; margin: 0 0 .7rem; }
.pg-check li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.pg-check--no li::before { width: 14px; height: 0; border-left: 0; border-bottom: 2px solid #b5aea0; transform: none; top: .8em; }

/* stated promise */
.pg-guarantee { text-align: center; max-width: 760px; }
.pg-guarantee h2 { text-align: center; }
.pg .pg-statement { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.12; font-weight: 600; margin-bottom: 1.4rem !important; }
.pg-fine { text-align: left; margin: 1.6rem auto 0; max-width: 680px; }
.pg-fine summary { cursor: pointer; font-weight: 600; color: #fff; text-align: center; list-style: none; }
.pg-fine summary::-webkit-details-marker { display: none; }
.pg-fine p { font-size: .95rem; margin-top: 1rem; }

/* cases */
.pg-cases { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; margin: 2.2rem 0 1.6rem; }
.pg-case { background: #fff; border-radius: 18px; padding: 32px; }
.pg-case p { color: var(--muted); font-size: 1rem; }
.pg .pg-case-links { margin: 0; font-weight: 600; font-size: .95rem; }
.pg-figure { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 1.4rem 0; }
.pg-figure > div { background: var(--warm); border-radius: 14px; padding: 18px 20px; }
.pg-figure strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1.1; font-weight: 600; color: var(--ink); }
.pg-figure span { color: var(--muted); font-size: .92rem; }

/* team */
.pg-team { display: flex; flex-wrap: wrap; gap: 48px; margin: 2.4rem 0 2rem; }
.pg-team > div { display: grid; justify-items: start; gap: 4px; max-width: 220px; }
.pg-team img { width: 132px; height: 132px; border-radius: 16px; object-fit: cover; margin-bottom: 10px; }
.pg-team strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.pg-team strong a { color: var(--ink); text-decoration: none; }
.pg-team span { color: var(--muted); font-size: .95rem; }
.pg-team-note { color: var(--muted); }

/* quote / aside */
.pg-quote { font-family: var(--serif); font-size: 1.45rem; line-height: 1.4; color: var(--ink); border-left: 3px solid var(--gold); padding: 4px 0 4px 24px; margin: 2rem 0; }
.pg-note { background: var(--warm); border-radius: 16px; padding: 22px 26px; color: var(--body); }
.pg-band--warm .pg-note { background: #fff; }

/* tables inside new pages */
.pg .sfw-tablewrap { margin: 2rem 0 1.4rem; }

/* faq */
.pg-faq { max-width: 820px; }
.pg-faq h2 { margin-bottom: 1.4rem; }
.pg-faq details { border-bottom: 1px solid var(--line); }
.pg-faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-weight: 600; font-size: 1.1rem; position: relative; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--gold); transition: transform .2s; }
.pg-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pg-faq details p { color: var(--muted); padding-bottom: 12px; }

/* closing call to action */
.pg-cta { text-align: center; }
.pg-cta h2 { text-align: center; }
.pg-cta > p { color: var(--muted); margin-bottom: 1.8rem; }
.pg-cta .pg-actions { justify-content: center; }
.pg-cta .sfw-rf { text-align: left; max-width: 860px; margin: 2rem auto 0; background: #fff; }

@media (max-width: 960px) {
  .pg-steps--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .pg { font-size: 17px; }
  .pg-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px 64px; }
  .pg-hero-photo { max-width: 420px; }
  .pg-photo-note { left: 16px; bottom: 16px; }
  .pg-intro { padding: 44px 20px 44px; }
  .pg-steps, .pg-steps--2, .pg-cases, .pg-grid, .pg-grid--2 { grid-template-columns: 1fr; gap: 24px; }
  .pg-section { padding: 64px 20px; }
  .pg-section--tight { padding-top: 0; }
  .pg-band { padding: 64px 0; }
  .pg-wrap { padding: 0 20px; }
  .pg-team { gap: 28px; }
  .pg-team img { width: 104px; height: 104px; }
  .sfw-rf { padding: 24px 20px 20px; }
}
@media (max-width: 560px) {
  .pg-steps--4 { grid-template-columns: 1fr; }
  .pg-btn { width: 100%; text-align: center; }
  .pg-figure { grid-template-columns: 1fr; }
}

/* Blog (rendered by the CRM, outside .entry-content): same headings and colours. */
.cms-blog :is(h1, h2, h3), .cms-post :is(h1, h2, h3), .cms-article :is(h1, h2, h3) { font-family: var(--serif); color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.cms-blog h1 { font-size: clamp(2.1rem, 4vw, 3rem); }
.cms-card h2 { font-size: 1.3rem; line-height: 1.3; }
.cms-card h2 a { color: var(--ink); text-decoration: none; }
.cms-card h2 a:hover { color: var(--teal); }
.cms-blog, .cms-post, .cms-article { font-family: var(--sans); color: var(--body); }

/* Contact / booking forms (.sfw-form): every field type, new colours. */
.sfw-form input[type=text], .sfw-form input[type=email], .sfw-form input[type=url], .sfw-form input[type=tel], .sfw-form select, .sfw-form textarea {
  width: 100%; border: 1px solid #d9d2c3; border-radius: 10px; padding: .75rem .9rem; font-family: var(--sans); font-size: 1rem; background: #fff; color: var(--ink); }
.sfw-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--gold-soft); border-color: var(--gold); }
.sfw-form button[type=submit] { background: var(--ink); border-radius: 999px; font-family: var(--sans); }
.sfw-form button[type=submit]:hover { background: #2a313b; }
.pg .sfw-tablewrap + h3, .pg .sfw-tablewrap + h2 { margin-top: 2.6rem; }

/* 2026-11-04 (owner: "change the link color to black, this blue is not contrast enough"): text links are black
   and underlined so they still stand out from the grey body text. :where() keeps this at the lowest weight, so
   buttons, "More →" links (own border line) and links on dark bands keep their own look. */
:where(.entry-content, .pg, .cms-content) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(.entry-content, .pg, .cms-content) a:hover { text-decoration-thickness: 2px; }
/* the blog's post text, pager and links under a post (blog.css loads after this file, so one step heavier) */
body .cms-content a, body .cms-pager a, body .cms-post-foot a, body .sfw-related-service a { color: #000; }
/* the page you are on, in the top menu: black + underline instead of the light teal */
body .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: #000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }