/*
Theme Name: Fiber Specialties
Theme URI: https://fiberspecialties.com
Author: Andy Fackrell — Growth Partner
Description: Clean-bright, performance-first FSE block theme for Fiber Specialties Fine Rug Cleaning Company (Boise, ID). Hybrid design system (Atelier × Modern Heritage). Local-SEO / AIO / GEO / Voice optimized.
Version: 0.2.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.1
Text Domain: fiber-specialties
*/

/* ============================ Self-hosted fonts ============================ */
@font-face { font-family:"Fraunces"; src:url(assets/fonts/fraunces.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url(assets/fonts/inter.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:optional; }
/* Cormorant Garamond — display face for the cinematic hero + crest (HERO-HEADER-REDESIGN §Fonts).
   Self-hosted variable woff2 (latin), font-display:swap. Metrics-matched Georgia fallback below
   keeps the swap zero-CLS (hero box + crest are fixed-size, content centered). Scoped to the hero
   + crest + mobile menu — the rest of the site keeps Fraunces for display. */
@font-face { font-family:"Cormorant Garamond"; src:url(assets/fonts/cormorant-normal.woff2) format("woff2"); font-weight:400 600; font-style:normal; font-display:optional;
	size-adjust:107%; ascent-override:88%; descent-override:22%; line-gap-override:0%; }
@font-face { font-family:"Cormorant Garamond"; src:url(assets/fonts/cormorant-italic.woff2) format("woff2"); font-weight:400 500; font-style:italic; font-display:optional;
	size-adjust:107%; ascent-override:88%; descent-override:22%; line-gap-override:0%; }
/* Italic accent words use CSS-synthesized italic (browser slants Fraunces) — no 80KB italic
   font file on the critical path. Only ~5 accent words use it, so synthesis is acceptable. */

/* ============================ Tokens (mirror theme.json) ============================ */
:root {
	/* ===== v1.5.1 §13.0 — NAVY + POWDER + GOLD (persian red RETIRED site-wide) ===== */
	/* Canonical palette */
	--navy:#010F62;            /* deep fields: hero, footer, dark chapters, focus ring */
	--powder:#D5E4F5;          /* light tints, frosted-glass tint, chips */
	--gold:#B08D4A;            /* the ONE accent — CTA fills + metallic detail ONLY (never text on light) */
	--gold-hover:#C6A04E;
	--gold-pressed:#8A6E34;
	/* Gold as TEXT on a light surface. --gold is 2.95:1 and --gold-lt is 1.5:1 there, so neither
	   may ever be used for text on paper, paper-warm, or the powder-glass. This is the only
	   gold permitted for that: 5.77:1 on paper, 5.41:1 on paper-warm, 4.70:1 on glass.
	   Gold FILLS (buttons) and gold text on navy are unaffected and keep --gold. */
	--gold-text:#795E2C;
	--ink:#0B1330;             /* navy-tinted near-black body text */
	--ink-soft:#454C5E;        /* secondary text (navy-tinted) */
	--on-navy:#EAF1FA;         /* text on navy */
	--error:#A33B2E;           /* FUNCTIONAL only — distinct from brand */
	--success:#4A6B4F;

	/* HERO-HEADER-REDESIGN extensions (added, not forked): deep navy field, warm cream text,
	   light gold accent, Cormorant display face for the cinematic hero + crest. */
	--navy-deep:#01072e;       /* darkest navy — hero video-well + scrim base */
	--cream:#F5EFE1;           /* warm cream — hero headline/wordmark text on the dark video */
	--gold-lt:#E4CB8B;         /* light gold — eyebrow, filigree, crest tag, ghost-CTA hairline */
	--serif-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;

	/* Canvas — cool near-white vertical gradient (never pure #FFF) */
	--paper:#F7F9FC;           /* base surface */
	--paper-warm:#EDF2FA;      /* alternating cool-tint sections */
	--canvas:linear-gradient(180deg,#F7F9FC 0%,#EDF2FA 100%);

	/* Radii — floor 8px, never 0 (§13.1); component application is A1 */
	--radius-input:10px; --radius-card:18px; --radius-card-lg:24px; --radius-pill:999px; --radius-img:14px;

	/* Formal 3-step shadow set, tinted toward ink (#0B1330) not black (§13.6) */
	--shadow-sm:0 1px 2px rgba(11,19,48,.06);
	--shadow-md:0 8px 24px rgba(11,19,48,.10);
	--shadow-lg:0 20px 50px rgba(11,19,48,.16);
	--shadow-glow:0 0 30px rgba(176,141,74,.30);   /* gold — ONE glass/CTA hero moment per view only */

	/* One signature easing everywhere */
	--ease:cubic-bezier(.22,.61,.36,1);

	/* Hairline — navy-tinted */
	--line:#CBD8EC;
	--hairline:1px solid rgba(11,19,48,.12);

	/* ===== Legacy aliases (component names retire in A1) → mapped to canonical ===== */
	--brass:var(--gold);
	--indigo:var(--navy);
	--ink-deep:var(--navy);
	--wool-white:var(--on-navy);
	--gold-thread:var(--gold-hover);
	--focus-ring:var(--navy);
}

body { background:var(--paper); background-image:var(--canvas); background-repeat:no-repeat; color:var(--ink); font-optical-sizing:auto; }

/* Section rhythm — sections breathe */
.fs-section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
/* Heavy home page: skip rendering below-fold sections until near the viewport so the
   above-fold LCP paints fast under CPU throttle. contain-intrinsic-size holds layout (CLS 0). */
.fs-section { content-visibility:auto; contain-intrinsic-size:auto 620px; }
.fs-section--warm { background:var(--paper-warm); position:relative; }
.fs-section--indigo { background:var(--indigo); color:var(--wool-white); position:relative; }
.fs-section--indigo :is(h2,h3){ color:var(--wool-white); }
.fs-section--warm > *, .fs-section--indigo > * { position:relative; z-index:1; }

/* Staged AI textures (DESIGN-SYSTEM-SPEC §7): subtle, decorative, behind content. */
.fs-section--indigo::before {
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:url(assets/tex/dark-dye-swirl.webp) center/cover no-repeat; opacity:.16;
}
.fs-section--warm::before {
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:url(assets/tex/wool-weave-paper.webp) center/cover no-repeat; opacity:.30; mix-blend-mode:multiply;
}

/* ============================ Buttons ============================ */
.fs-btn {
	display:inline-flex; align-items:center; justify-content:center;
	padding:.85rem 1.5rem; border-radius:2px; font-weight:600; letter-spacing:.01em;
	text-decoration:none; line-height:1.1; min-height:46px; font-family:"Inter",system-ui,sans-serif;
	/* <button> does not inherit type styles the way <a> does — without this the schedule-pickup
	   submit rendered at the 13.33px UA default while every other CTA sat at 17px. */
	font-size:inherit;
	transition:background .18s ease, color .18s ease, border-color .18s ease, transform .1s var(--ease);
}
/* Press feedback (Emil): pressable elements must feel responsive to touch/click. */
.fs-btn:active { transform:scale(.97); }
/* Gold is the ONE accent — primary CTA = solid gold fill + NAVY text (§13.0 contrast trap: navy on gold ~5.1:1 AA) */
.fs-btn--primary { background:var(--gold); color:var(--ink); }
.fs-btn--primary:hover { background:var(--gold-hover); color:var(--ink); }
/* Ghost = navy outline + navy text on light (NEVER gold text on light — fails contrast) */
.fs-btn--ghost { background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.fs-btn--ghost:hover { background:var(--navy); color:var(--on-navy); }
/* .fs-404--art belongs in this dark-surface list: the base ghost button is navy-on-transparent,
   and the 404 art panel is rgb(1,7,46), so without the override "Schedule free pickup" rendered
   navy-on-navy at ~1.4:1 — effectively invisible. */
.fs-section--indigo .fs-btn--ghost, .fs-hero .fs-btn--ghost, .fs-404--art .fs-btn--ghost { color:var(--on-navy); border-color:rgba(234,241,250,.5); }
.fs-section--indigo .fs-btn--ghost:hover, .fs-hero .fs-btn--ghost:hover, .fs-404--art .fs-btn--ghost:hover { background:var(--on-navy); color:var(--ink); }

/* Focus ring — 2px indigo, everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
	outline:2px solid var(--indigo); outline-offset:2px;
}

/* ============================ Answer-first block ============================ */
.fs-answer {
	font-size:1.1875rem; line-height:1.65; color:var(--ink); max-width:62ch;
	background:var(--paper-warm); border-left:3px solid var(--navy);
	padding:1.15rem 1.4rem; border-radius:2px; margin:0 0 1.75rem;
}
.fs-section--indigo .fs-answer, .fs-hero .fs-answer { background:transparent; border-left-color:var(--brass); color:var(--wool-white); }

.fs-eyebrow { font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--navy); margin:0 0 .6rem; }
/* Lighter gold on dark backgrounds for AA contrast (brass fails on indigo). */
.fs-hero .fs-eyebrow, .fs-section--indigo .fs-eyebrow { color:#D9B877; }
.fs-lede { font-size:1.1875rem; color:var(--ink-soft); max-width:62ch; }

/* ============================ Trust strip (badges + brass numerals) ============================ */
/* Trust bar: block flow so the full-bleed cert carousel and the rating line stack cleanly
   (the old flex layout fought the 100vw breakout inside constrained interior content). */
.fs-trust {
	display:block; text-align:center; margin:1.25rem 0 1.75rem; padding:0; border:0;
}
.fs-trust__stats { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35rem 1.1rem; font-size:.95rem; color:var(--ink-soft); margin-top:1.1rem; }
.fs-trust__stats b { color:var(--ink); }
/* AA: --brass/--gold is 2.95:1 on the light canvas, and the token itself says "never text on
   light". The stars and the bullet separators were the two places that broke that rule, on every
   page carrying [fs_trust]. --gold-pressed is the same hue at 4.61:1, so it clears AA without
   changing the palette. On navy the bright brass already clears AA (5.42:1) and stays. */
.fs-trust__stars { color:var(--gold-text); letter-spacing:.05em; }
.fs-trust__sep { color:var(--gold-text); }
.fs-hero .fs-trust, .fs-section--indigo .fs-trust { border-color:rgba(237,230,214,.18); }
.fs-hero .fs-trust__stats, .fs-section--indigo .fs-trust__stats { color:var(--wool-white); }
.fs-hero .fs-trust__stars, .fs-section--indigo .fs-trust__stars, .site-footer .fs-trust__stars,
.fs-hero .fs-trust__sep, .fs-section--indigo .fs-trust__sep, .site-footer .fs-trust__sep { color:var(--brass); }
.fs-hero .fs-trust__stats b { color:#fff; }
.fs-hero .fs-trust__badges img { filter:grayscale(1) brightness(1.6); }

/* ============================ CTA band ============================ */
.fs-cta {
	display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between;
	background:var(--paper-warm); border:var(--hairline); border-radius:4px;
	padding:1.6rem 1.8rem; margin:2.5rem 0; position:relative; overflow:hidden;
}
.fs-cta::before {
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:url(assets/tex/wool-weave-paper.webp) center/cover no-repeat; opacity:.28; mix-blend-mode:multiply;
}
.fs-cta > * { position:relative; z-index:1; }
.fs-cta__head { font-family:"Fraunces",serif; font-weight:600; font-size:1.5rem; line-height:1.1; margin:0 0 .25rem; }
.fs-cta__sub { margin:0; color:var(--ink-soft); }
.fs-cta__actions { display:flex; flex-wrap:wrap; gap:.75rem; }

/* ============================ FAQ (medallion toggle) ============================ */
.fs-faq { margin:2.5rem 0 1rem; }
.fs-faq__item { border-bottom:var(--hairline); }
.fs-faq__q { cursor:pointer; font-weight:600; font-size:1.0625rem; padding:1rem 0 1rem 2rem; list-style:none; position:relative; }
.fs-faq__q::-webkit-details-marker { display:none; }
.fs-faq__q::before {
	content:""; position:absolute; left:0; top:1.05rem; width:1.1rem; height:1.1rem;
	background:no-repeat center/contain;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3z' fill='none' stroke='%23B08D4A' stroke-width='1.5'/%3E%3C/svg%3E");
	transition:transform .24s var(--ease);
}
details[open] .fs-faq__q::before { transform:rotate(45deg); }
.fs-faq__a { padding:0 0 1.1rem; color:var(--ink-soft); max-width:68ch; }

/* ============================ Grid + service cards ============================ */
.fs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; margin:1.75rem 0; }
.fs-card { background:var(--paper); border:var(--hairline); border-radius:4px; overflow:hidden; }
.fs-card__media { aspect-ratio:4/3; overflow:hidden; }
.fs-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
@media (hover:hover) and (pointer:fine){ .fs-card:hover .fs-card__media img { transform:scale(1.04); } }
.fs-card__body { padding:1.15rem 1.3rem; }
.fs-card h3 { margin:0 0 .4rem; }
.fs-card p { margin:0 0 .6rem; color:var(--ink-soft); }
.fs-card__link { font-weight:600; text-decoration:none; color:var(--navy); border-bottom:1px solid transparent; }
.fs-card:hover .fs-card__link { border-bottom-color:var(--navy); }
.fs-numeral { font-family:"Fraunces",serif; font-size:2.75rem; color:var(--gold-text); line-height:1; }
/* The step numerals only render inside the indigo process section today, where the bright
   brass is correct (--gold-text drops to 2.77:1 on navy). Scoped rather than exempted, so
   the bare .fs-numeral above stays safe if it is ever used on the light canvas. */
.fs-section--indigo .fs-numeral { color:var(--brass); }

/* Editorial offset media */
.fs-media { border:var(--hairline); border-radius:2px; overflow:hidden; }
.fs-media img { display:block; width:100%; height:auto; }

/* Silo links */
.fs-silo-links { margin:1.75rem 0; padding:1.15rem 1.35rem; background:var(--paper-warm); border-radius:4px; border:var(--hairline); }
.fs-silo-links ul { margin:.4rem 0 0; padding-left:1.1rem; }

/* ============================ Pattern dividers ============================ */
.fs-divider { display:flex; align-items:center; justify-content:center; gap:1rem; margin:0; color:var(--brass); }
.fs-divider svg { display:block; }
.fs-divider__line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(176,141,74,.55),transparent); max-width:340px; }

/* ============================ Hero (dark, woven) ============================ */
.fs-hero { position:relative; background:var(--ink-deep) url(assets/tex/dark-gold-threads.webp) center/cover no-repeat; color:var(--wool-white); overflow:hidden; padding-block:clamp(3.5rem,9vw,7rem); }
.fs-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,16,20,.92) 0%, rgba(16,16,20,.72) 55%, rgba(16,16,20,.35) 100%); pointer-events:none; }
.fs-hero__weave { position:absolute; inset:0; width:100%; height:100%; opacity:.35; pointer-events:none; }
.fs-hero__inner { position:relative; z-index:1; max-width:820px; }
.fs-hero h1 { color:var(--wool-white); margin:.2rem 0 1rem; }
.fs-hero__ctas { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0 2rem; }

/* ============================ Header ============================ */
.site-header { border-bottom:var(--hairline); position:sticky; top:0; z-index:50; background:var(--paper); }
.site-header a { text-decoration:none; }
.fs-logo img { height:56px; width:auto; display:block; }
.fs-header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }
.fs-nav { display:flex; flex-wrap:wrap; gap:1.15rem; align-items:center; }
.fs-nav__item { position:relative; }
.fs-nav__btn, .fs-nav__link { color:var(--ink); font-weight:500; font-size:.98rem; background:none; border:0; cursor:pointer; font-family:inherit; padding:.3rem 0; text-decoration:none; display:inline-flex; align-items:center; gap:.3rem; }
.fs-nav__btn:hover, .fs-nav__link:hover { color:var(--navy); }
.fs-nav__caret { font-size:.7em; color:var(--brass); transition:transform .2s var(--ease); }
.fs-nav__sub { list-style:none; margin:0; padding:0; }
.fs-nav__sub a { display:block; color:var(--ink); text-decoration:none; font-size:.95rem; }
.fs-nav__sub a:hover { color:var(--navy); }
.fs-header-phone { color:var(--ink); font-weight:600; text-decoration:none; }
.fs-nav-toggle { display:none; background:none; border:0; padding:.4rem; cursor:pointer; line-height:0; min-height:44px; min-width:44px; }

/* Desktop: dropdown panels on hover / focus-within / click */
@media (min-width:901px){
	.fs-nav__sub {
		position:absolute; top:100%; left:0; min-width:236px; background:var(--paper);
		border:var(--hairline); border-radius:4px; box-shadow:0 12px 32px rgba(16,16,20,.12);
		padding:.5rem; opacity:0; visibility:hidden; transform-origin:top center; transform:scale(.97);
		transition:opacity .16s ease-out, transform .18s var(--ease), visibility .18s; z-index:60;
	}
	.fs-nav__item:hover > .fs-nav__sub, .fs-nav__item:focus-within > .fs-nav__sub, .fs-nav__item.is-open > .fs-nav__sub { opacity:1; visibility:visible; transform:none; }
	.fs-nav__item:hover .fs-nav__caret, .fs-nav__item.is-open .fs-nav__caret { transform:rotate(180deg); }
	.fs-nav__sub a { padding:.5rem .7rem; border-radius:2px; }
	.fs-nav__sub a:hover { background:var(--paper-warm); color:var(--navy); }
}

/* Mobile: hamburger panel with accordion sub-menus */
@media (max-width:900px){
	.fs-nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
	.fs-header-actions {
		display:none; position:absolute; left:0; right:0; top:100%;
		flex-direction:column; align-items:stretch; gap:.25rem;
		background:var(--paper); border-bottom:var(--hairline); box-shadow:0 8px 24px rgba(0,0,0,.08);
		padding:1rem 1.5rem 1.5rem; max-height:80vh; overflow-y:auto;
	}
	.site-header.is-nav-open .fs-header-actions { display:flex; }
	.fs-header-inner { position:relative; }
	.fs-nav { flex-direction:column; align-items:stretch; gap:0; }
	.fs-nav__item, .fs-nav__link { border-bottom:var(--hairline); }
	.fs-nav__btn { width:100%; justify-content:space-between; padding:.8rem 0; font-size:1.05rem; }
	.fs-nav__sub { display:none; padding:.1rem 0 .6rem .9rem; }
	.fs-nav__item.is-open .fs-nav__sub { display:block; }
	.fs-nav__sub a { padding:.55rem 0; }
	.fs-nav__link { padding:.8rem 0; font-size:1.05rem; }
	.fs-header-phone { padding:.8rem 0; }
	.fs-header-actions .fs-btn { margin-top:.6rem; }
	.fs-logo img{ height:44px; }
}

/* ============================ Footer (dark) ============================ */
.site-footer { background:var(--ink-deep); color:var(--wool-white); }
.site-footer .fs-divider__line { max-width:none; }
/* (legacy 4-column footer rules removed: the composed .fs-foot footer owns its layout) */

/* ============================ Sticky mobile action bar (3 targets) ============================ */
.fs-mobilebar { display:none; }
@media (max-width:640px){
	.fs-mobilebar {
		display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:60;
		background:var(--ink-deep); box-shadow:0 -2px 12px rgba(0,0,0,.25);
	}
	.fs-mobilebar a { color:var(--wool-white); text-decoration:none; text-align:center; padding:.7rem .4rem; font-size:.8rem; font-weight:600; border-right:1px solid rgba(237,230,214,.12); }
	.fs-mobilebar a:last-child { border-right:0; }
	.fs-mobilebar .ic { display:block; color:var(--brass); font-size:1.1rem; line-height:1.4; }
	body { padding-bottom:3.4rem; }
	.fs-cta { flex-direction:column; align-items:flex-start; }
}

/* Map + form */
.fs-map { margin:1.5rem 0; }
.fs-form label { display:block; font-weight:600; font-size:.95rem; margin-bottom:.2rem; }
.fs-form input, .fs-form textarea { width:100%; padding:.65rem .75rem; border:var(--hairline); border-radius:2px; font:inherit; background:var(--paper); }

/* ============================ §10 v1.2 — Cinematic hero ============================ */
/* §12 — the hero IS the viewport. The Prisma frame = viewport minus a thin side inset,
   flush to the top edge under the floating nav; the 1280 container no longer caps it. */
.fs-hero-cine { background:var(--paper); padding:0 0 clamp(2.5rem,6vw,4rem); }
.fs-hero-cine > .fs-container { max-width:none; padding:0; }
.fs-hero-cine__frame {
	position:relative; overflow:hidden; isolation:isolate;
	min-height:92svh; margin:0 clamp(16px,2vw,32px);
	border-radius:0 0 20px 20px; box-shadow:0 24px 60px rgba(16,16,20,.18);
}
@media (max-width:640px){ .fs-hero-cine__frame { min-height:0; aspect-ratio:4/5; border-radius:14px; } }
.fs-hero-cine__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.fs-hero-cine__weave { position:absolute; inset:0; width:100%; height:100%; opacity:.22; z-index:1; pointer-events:none; }
@media (max-width:640px){ .fs-hero-cine__weave { display:none; } } /* decorative; drop on mobile to free the LCP paint */
/* Dark grade for legibility — strongest at lower-left where the H1 sits. */
.fs-hero-cine__grade { position:absolute; inset:0; z-index:2; pointer-events:none;
	background:linear-gradient(115deg, rgba(16,16,20,.86) 0%, rgba(16,16,20,.55) 38%, rgba(16,16,20,.12) 66%, rgba(16,16,20,.35) 100%); }

.fs-hero-cine__chips { position:absolute; top:clamp(1.1rem,3vw,2rem); left:clamp(1.2rem,3vw,2.4rem); z-index:4;
	margin:0; color:rgba(237,230,214,.82); font-size:.8125rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.fs-hero-cine__chips .sep { color:var(--brass); margin:0 .5rem; }
.fs-hero-cine__chips .fs-hero-cine__star { color:var(--brass); }

.fs-hero-cine__h1 { position:absolute; left:clamp(1.2rem,3vw,2.6rem); bottom:clamp(1.4rem,4vw,2.8rem); z-index:4;
	margin:0; max-width:16ch; color:var(--wool-white);
	font-family:"Fraunces",Georgia,serif; font-weight:600; line-height:1.02; letter-spacing:-.02em;
	font-size:clamp(2.5rem,7vw,5.5rem); text-shadow:0 2px 24px rgba(16,16,20,.55); }
.fs-hero-cine__h1 em { font-style:italic; }

/* Corner stat callouts with 1px brass connector (desktop only). */
.fs-hero-cine__stat { position:absolute; z-index:4; color:var(--wool-white); font-size:.9rem; font-weight:600;
	background:rgba(16,16,20,.42); backdrop-filter:blur(2px); padding:.5rem .8rem; border:1px solid rgba(176,141,74,.5); border-radius:2px; }
.fs-hero-cine__stat b { color:var(--brass); }
.fs-hero-cine__stat--tr { top:clamp(1.1rem,3vw,2rem); right:clamp(1.2rem,3vw,2.4rem); }
.fs-hero-cine__stat--br { bottom:clamp(1.4rem,4vw,2.8rem); right:clamp(1.2rem,3vw,2.4rem); }
.fs-hero-cine__stat::before { content:""; position:absolute; height:1px; width:2.5rem; background:rgba(176,141,74,.6); top:50%; }
.fs-hero-cine__stat--tr::before, .fs-hero-cine__stat--br::before { right:100%; }
@media (max-width:1024px){ .fs-hero-cine__stat { display:none; } }

.fs-hero-cine__below { max-width:820px; margin-top:clamp(1.5rem,4vw,2.5rem); }
.fs-hero-cine__tagline { font-family:"Fraunces",serif; font-size:clamp(1.4rem,3vw,2rem); font-weight:500; line-height:1.2; margin:0 0 1.25rem; color:var(--ink); }
.fs-hero-cine__tagline em { font-style:italic; color:var(--navy); }
.fs-hero-cine__est { margin:1.5rem 0 0; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.fs-hero-cine__stage { position:relative; }
.fs-hero-cine__mobileimg { display:none; }
/* Mobile: text-led hero (LCP = H1/answer text, like interiors) — the big cinematic image
   is demoted to a lazy below-fold band so it never becomes the throttled-mobile LCP. */
@media (max-width:640px){
	.fs-hero-cine__frame { display:none; }
	.fs-hero-cine__h1 { position:static; color:var(--ink); text-shadow:none; max-width:none;
		font-size:clamp(2.1rem,8.5vw,2.9rem); margin:0 0 1.1rem; }
	.fs-hero-cine__below { margin-top:0; }
	/* Hero image is desktop/tablet-only (perf gate); mobile hero is text-led.
	   A slim image accent sits below the fold so it never becomes the mobile LCP. */
	.fs-hero-cine__mobileimg { display:block; width:100%; height:auto; aspect-ratio:24/7; object-fit:cover;
		border-radius:12px; margin:1.75rem 0 0; }
}

/* Full-bleed sections + inner container (home) */
.fs-full > .wp-block-post-content > * { }
/* §12: editorial content max 1600; media breaks out to 1760 / full-bleed. Blog bodies keep 1280 (theme.json wideSize, untouched). */
.fs-container { max-width:1600px; margin-inline:auto; padding-inline:clamp(1.5rem,4vw,3rem); }
.fs-section > .fs-container { width:100%; }
/* Prose stays readable regardless of the wider shell. */
.fs-container .fs-answer, .fs-container .fs-lede, .fs-container p:not([class]) { max-width:72ch; }
/* Image-moment breakout: media runs wider than the editorial column. */
.fs-bleed-1760 { width:min(1760px,100vw); margin-inline:calc(50% - min(880px,50vw)); max-width:none; }
.fs-bleed-full { width:100vw; margin-inline:calc(50% - 50vw); max-width:none; border-radius:0; }
.home .wp-block-post-content { display:flex; flex-direction:column; }

/* Woven hero SVG */
.fs-hero__weave line { stroke:var(--gold-thread); }

/* Review ticker (homepage, MaestroClass-style) */
.fs-ticker { overflow:hidden; overflow-x:clip; border-block:var(--hairline); padding:1rem 0; }
.fs-ticker__track { display:flex; gap:3rem; white-space:nowrap; animation:fs-marquee 38s linear infinite; }
.fs-ticker__track span { font-family:"Fraunces",serif; font-style:italic; color:var(--ink-soft); }
.fs-ticker__track b { color:var(--navy); font-style:normal; }
/* §10.7 — medallion glyph as ticker item separator */
/* .fs-ticker sets no background, so this glyph lands on the light canvas: --gold-text, not brass. */
.fs-ticker__track span:not(:last-child)::after { content:"\2726"; font-style:normal; color:var(--gold-text); margin-left:3rem; }
@keyframes fs-marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* Let a reader stop a passing review (hover-capable pointers only). */
@media (hover:hover) and (pointer:fine){ .fs-ticker:hover .fs-ticker__track{ animation-play-state:paused; } }
@media (prefers-reduced-motion:reduce){ .fs-ticker__track{ animation:none; white-space:normal; flex-wrap:wrap; gap:1rem 2rem; } }

/* Offset editorial media pairing */
.fs-split { display:grid; grid-template-columns:1.1fr 1fr; gap:2.5rem; align-items:center; }
@media (max-width:820px){ .fs-split{ grid-template-columns:1fr; gap:1.5rem; } }

/* ---- Before/after comparison slider (§5.7) ---- */
.fs-ba { --pos:50%; position:relative; aspect-ratio:3/2; overflow:hidden; border:var(--hairline); border-radius:2px; user-select:none; }
.fs-ba__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fs-ba__before { clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.fs-ba.is-settling .fs-ba__before { transition:clip-path .22s cubic-bezier(.34,1.56,.64,1); }
.fs-ba__handle { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--brass); transform:translateX(-1px); pointer-events:none; }
.fs-ba__handle span { position:absolute; top:50%; left:50%; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; background:var(--wool-white); border:2px solid var(--brass); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.fs-ba__handle span::before, .fs-ba__handle span::after { content:""; position:absolute; top:50%; width:0; height:0; border:5px solid transparent; }
.fs-ba__handle span::before { left:7px; border-right-color:var(--navy); margin-top:-5px; }
.fs-ba__handle span::after { right:7px; border-left-color:var(--navy); margin-top:-5px; }
.fs-ba__range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.fs-ba__range:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; }
.fs-ba__label { position:absolute; bottom:.6rem; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--wool-white); background:rgba(16,16,20,.6); padding:.2rem .5rem; border-radius:2px; }
.fs-ba__label--b { left:.6rem; } .fs-ba__label--a { right:.6rem; }
.fs-ba__caption { margin:.6rem 0 0; font-size:.9rem; color:var(--ink-soft); }

/* Sticky-scroll process chapter (§9): intro pins while steps scroll */
.fs-process__step { padding:1.75rem 0; border-top:1px solid rgba(237,230,214,.18); }
.fs-process__step:first-child { border-top:0; }
.fs-process__step h3 { margin:.3rem 0 .4rem; color:var(--wool-white); }
.fs-process__step p { color:var(--wool-white); opacity:.85; margin:0; }
@media (min-width:861px) {
	.fs-process { display:grid; grid-template-columns:0.85fr 1.15fr; gap:2.5rem 3rem; align-items:start; }
	.fs-process__intro { position:sticky; top:5.5rem; }
}

/* Related guides */
.fs-related { margin:2.5rem 0 1rem; padding-top:1.5rem; border-top:var(--hairline); }
.fs-related__list { margin:.5rem 0 0; padding-left:1.1rem; }
.fs-related__list li { margin:.4rem 0; }

/* ============================ Motion utilities (§4 — reusable, opt-in) ============================ */
/* Space is always reserved (elements keep normal flow height); only transform+opacity
   animate, so applying these must never shift layout — CLS stays 0. JS adds .is-in
   when the element scrolls into view (see assets/js/fs-motion.js). */

/* .fs-reveal — subtle 14px rise, once. 300ms. Retuned 2026-09 (walkthrough round 2):
   content is NEVER hidden while waiting for the observer; only a small translate
   settles, so a normal-speed scroll can never meet a blank viewport. */
html.js .fs-reveal {
	opacity:1; transform:translateY(14px);
	transition:transform .3s var(--ease);
	will-change:transform;
}
html.js .fs-reveal.is-in { opacity:1; transform:none; }

/* .fs-draw — SVG stroke draws itself on reveal. 900ms. Apply to an <svg>/<path>
   whose stroke-dasharray = its path length; JS toggles .is-in on the wrapper. */
html.js .fs-draw path, html.js .fs-draw line, html.js .fs-draw polyline {
	stroke-dashoffset:1; stroke-dasharray:1;
	transition:stroke-dashoffset .9s var(--ease);
}
html.js .fs-draw.is-in path, html.js .fs-draw.is-in line, html.js .fs-draw.is-in polyline { stroke-dashoffset:0; }

/* .fs-tilt — restrained perspective tilt on hover (<=4 deg), spring return.
   Also applied to service cards (SPEC §9). */
.fs-tilt, .fs-card {
	transition:transform .18s cubic-bezier(.34,1.56,.64,1);
	transform-origin:center;
	will-change:transform;
}
@media (hover:hover) and (pointer:fine){
	.fs-tilt:hover, .fs-tilt:focus-within,
	.fs-card:hover, .fs-card:focus-within {
		transform:perspective(900px) rotateX(3deg) rotateY(-3deg);
	}
}

/* Reduced-motion: every utility becomes a no-op — content visible, no transform/anim. */
@media (prefers-reduced-motion:reduce){
	.fs-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
	.fs-draw path, .fs-draw line, .fs-draw polyline { stroke-dashoffset:0 !important; stroke-dasharray:none !important; transition:none !important; }
	.fs-tilt, .fs-tilt:hover, .fs-tilt:focus-within,
	.fs-card, .fs-card:hover, .fs-card:focus-within { transform:none !important; transition:none !important; }
}

/* Motion */
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* Authoritative sources block (AIO/GEO citations) */
.fs-sources { margin:2.5rem 0 1rem; padding-top:1.5rem; border-top:var(--hairline); }
.fs-sources__list { margin:.5rem 0 0; padding-left:1.1rem; color:var(--ink-soft); font-size:.95rem; }
.fs-sources__list li { margin:.45rem 0; }
/* Cost / comparison tables */
.fs-table-wrap { overflow-x:auto; margin:1.75rem 0; }
.fs-table { width:100%; border-collapse:collapse; font-size:.98rem; }
.fs-table th, .fs-table td { text-align:left; padding:.7rem .9rem; border-bottom:var(--hairline); }
.fs-table th { background:var(--paper-warm); font-weight:600; }
.fs-updated { font-size:.85rem; color:var(--ink-soft); font-style:italic; margin:.5rem 0 0; }

/* ============================================================================
   §12 v1.4 — FULL-BLEED PASS (viewport-native layout). Overrides earlier boxed values.
   ============================================================================ */

/* Hero-cine below-block re-inset now that its container is uncapped. */
.fs-hero-cine__below { max-width:1600px; margin-inline:auto; padding-inline:clamp(1.5rem,4vw,3rem); }
.fs-hero-cine__below .fs-hero-cine__tagline { max-width:32ch; }
/* Floating nav owns the top band — retire the hero chips + top-right stat that collided with it. */
.fs-hero-cine__chips { display:none; }
@media (min-width:1025px){ .fs-hero-cine__stat--tr { display:none; } }
/* Hero H1 → display-xl viewport scale (type on the image). */
.fs-hero-cine__h1 { font-size:clamp(72px,7.5vw,152px); max-width:14ch; }
@media (max-width:640px){ .fs-hero-cine__h1 { font-size:clamp(34px,8.5vw,46px); } }

/* ---- Header floats over the hero (§12.2) ---- */
.site-header {
	position:sticky; top:0; left:0; right:0; z-index:100;
	border-bottom:1px solid transparent; background:var(--paper);
	transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, padding .25s ease;
}

@media (min-width:641px){
	/* Desktop: the nav floats over the hero (out of flow). Mobile keeps it sticky/in-flow
	   so a solid bar never overlaps the text-led mobile hero (and adds no CLS). */
	.site-header { position:fixed; }
	/* Non-hero desktop routes (blog index, archives, 404, search) offset for the fixed bar. */
	body:not(.fs-has-hero) main { padding-top:clamp(70px,8vh,90px); }
	/* Over a dark hero: transparent, wool-white, floating. */
	body.fs-has-hero .site-header:not(.is-scrolled) {
		background:transparent; border-bottom-color:transparent; padding-block:clamp(1rem,2.4vw,1.75rem);
	}
	/* Top scrim so wool-white nav always reads on the image. */
	body.fs-has-hero .site-header:not(.is-scrolled)::before {
		content:""; position:absolute; inset:0 0 auto; height:200%; pointer-events:none; z-index:-1;
		background:linear-gradient(to bottom, rgba(16,16,20,.42), rgba(16,16,20,0));
	}
	body.fs-has-hero .site-header:not(.is-scrolled) :is(.fs-nav__btn,.fs-nav__link,.fs-header-phone) {
		color:var(--wool-white);
	}
	body.fs-has-hero .site-header:not(.is-scrolled) .fs-logo img {
		filter:brightness(0) invert(.94);
	}
	/* Scrolled state = the existing compact solid paper bar. */
	.site-header.is-scrolled { background:var(--paper); border-bottom-color:rgba(26,27,30,.12); box-shadow:0 6px 24px rgba(16,16,20,.08); padding-block:.55rem; }
}

/* ---- Interior / pillar / blog full-bleed dark hero (§12.1) ---- */
.fs-page-hero {
	position:relative;
	/* Swappable hero: set --fs-hero-img on the hero or a body/silo class to drop in a real
	   pro-shoot photo per page/type later; defaults to the navy woven-gold texture. */
	background-color:var(--navy);
	/* Texture-fallback pages (no per-page AI hero) get a navy veil UNDER the charcoal
	   scrim: the raw gold-thread texture is near-black and read off-brand. Pages with a
	   real --fs-hero-img are untouched (the veil lives inside the fallback value only). */
	background-image:var(--fs-hero-img, linear-gradient(rgba(1,15,98,.82), rgba(1,15,98,.82)), url(assets/tex/dark-gold-threads.webp));
	background-position:center; background-size:cover; background-repeat:no-repeat;
	color:var(--on-navy); overflow:hidden;
	min-height:72svh; display:flex; align-items:flex-end;
	/* Top padding can never be less than the fixed two-tier header plus a 40px gap, so hero
	   content clears the taller header at every viewport (content is bottom-aligned, but short
	   viewports could otherwise push it up under the nav). */
	padding:max(clamp(6rem,12vh,9rem), calc(var(--fs-header-h) + 40px)) 0 clamp(2.5rem,6vw,4rem);
}
.fs-page-hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
	background:linear-gradient(105deg, rgba(16,16,20,.92) 0%, rgba(16,16,20,.7) 52%, rgba(16,16,20,.4) 100%); }
.fs-page-hero > * { position:relative; z-index:2; width:100%; max-width:1600px; margin-inline:auto; padding-inline:clamp(1.5rem,4vw,3rem); }
/* ambient hero background video — sits above the poster still, below the scrim; fades in on play */
.fs-page-hero__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity .7s var(--ease); }
.fs-page-hero__vid.is-playing{ opacity:1; }
.fs-page-hero--vid .wp-block-post-title{ text-shadow:0 2px 26px rgba(1,7,46,.7), 0 1px 2px rgba(1,7,46,.55); }
/* hero-bg-wool is a BRIGHT clip → heavier navy scrim so the H1 clears AA over its brightest frames */
.fs-page-hero--bright::before{ background:linear-gradient(105deg, rgba(1,7,46,.95) 0%, rgba(1,7,46,.86) 46%, rgba(1,7,46,.66) 100%); }
/* Post lead images come from the topic->image fallback (arbitrary brightness), so single posts get
   the heavier scrim too — guarantees the cream H1 clears AA over any of them. */
.single-post .fs-page-hero::before{ background:linear-gradient(105deg, rgba(1,7,46,.95) 0%, rgba(1,7,46,.84) 48%, rgba(1,7,46,.62) 100%); }
.fs-page-hero .wp-block-post-title { color:var(--wool-white); margin:0; max-width:18ch; font-size:clamp(56px,5.5vw,96px); }
@media (max-width:640px){ .fs-page-hero { min-height:56svh; } }

/* ---- Image moments run to the edge (§12.5) ---- */
/* Home main clips any full-bleed breakout so 100vw can never spawn a horizontal scrollbar. */
.fs-full { overflow-x:clip; }
/* Contain full-bleed 100vw breakouts (bands, marquee, section pseudo-backgrounds) so the vertical
   scrollbar's width can never spawn a horizontal scrollbar. `clip` (not hidden) creates no scroll
   container, so the fixed header + sticky elements are unaffected. */
.wp-site-blocks { overflow-x:clip; }
/* The editor's default block-gap sets margin-block-start:24px on <main>, but the fixed overlay
   header is out of flow — so the full-bleed navy hero started 24px down and the light canvas
   (#F7F9FC) showed through as a strip at the very top. Pull the full-bleed homepage main flush
   under the fixed header. (Interior mains are NOT .fs-full, so they keep their normal top offset.) */
.wp-site-blocks > main.fs-full { margin-block-start: 0 !important; }
/* Same for interior full-bleed dark heroes: they sit flush under the fixed header, so the light
   canvas never shows as a strip above them. The first heading still clears the ~97px header via
   the .fs-page-hero's own top padding (H1 renders ~420px down), so nothing is hidden. Non-hero
   routes (body:not(.fs-has-hero)) are unaffected and keep their padding-top offset. */
body.fs-has-hero .wp-site-blocks > main { margin-block-start: 0 !important; }
.fs-ticker { border-block:var(--hairline); width:100vw; margin-inline:calc(50% - 50vw); max-width:100vw; }
@media (min-width:821px){
	.fs-split .fs-media, .fs-split figure, .fs-split img { border-radius:4px; }
	.fs-section--indigo .fs-process { max-width:1760px; }
}

/* ---- Footer = full-bleed dark chapter (§12.6); layout lives in the .fs-foot block ---- */
.site-footer { background:var(--ink-deep); color:var(--wool-white); }
.site-footer a { color:var(--wool-white); }

/* ============================ Video loops (v1.3) ============================ */
/* Poster still always paints; the muted autoplay loop fades in on desktop only,
   lazy + preload:none. Mobile and prefers-reduced-motion never load the video
   (poster-only) — keeps the mobile LCP/byte budget intact and honors reduced-motion. */
.fs-video { position:relative; overflow:hidden; background:var(--ink-deep); border-radius:2px; }
.fs-video__poster, .fs-video__vid { display:block; width:100%; height:100%; object-fit:cover; }
.fs-video__vid { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.fs-video.is-playing .fs-video__vid { opacity:1; }
@media (prefers-reduced-motion:reduce){ .fs-video__vid { display:none !important; } }

/* ============================================================================
   WAVE 2 — v1.5.1 §13 RE-SKIN COMPONENTS (A1 pills/cards/glass · A2 hero furniture
   · A3 medallion/dividers). Appended overrides; later rules win. Kills every sharp corner.
   ============================================================================ */

/* ---- A1: Pills with circular-arrow badge (§13.2) — kill rectangular buttons ---- */
.fs-btn {
	border-radius:var(--radius-pill);
	padding:.8rem 1.1rem .8rem 1.6rem; gap:.65rem;
	transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .2s var(--ease), transform .18s var(--ease);
}
.fs-btn::after {
	content:""; flex:0 0 auto; width:1.5em; height:1.5em; border-radius:var(--radius-pill);
	background-color:var(--navy);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6' stroke='%23EAF1FA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:center; background-size:.85em;
	transition:transform .2s var(--ease);
}
@media (hover:hover) and (pointer:fine){
	.fs-btn:hover { transform:scale(1.02); }
	.fs-btn:hover::after { transform:translateX(4px); }
}
.fs-btn:active { transform:scale(.97); }
/* Ghost badge: navy-outlined circle + navy arrow on light */
.fs-btn--ghost::after {
	background-color:transparent; box-sizing:border-box; border:1.5px solid var(--navy);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6' stroke='%23010F62' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* On dark: ghost badge outline + arrow go on-navy (light) */
.fs-hero .fs-btn--ghost::after, .fs-section--indigo .fs-btn--ghost::after, .fs-page-hero .fs-btn--ghost::after, .fs-404--art .fs-btn--ghost::after {
	border-color:rgba(234,241,250,.55);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6' stroke='%23EAF1FA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- A1: Rounded radii everywhere (floor 8px, never 0) + soft shadows ---- */
.fs-card { border-radius:var(--radius-card); box-shadow:var(--shadow-sm); border-color:transparent; }
@media (hover:hover) and (pointer:fine){ .fs-card:hover { box-shadow:var(--shadow-md); } }
.fs-answer { border-radius:var(--radius-card); }
.fs-cta { border-radius:var(--radius-card-lg); box-shadow:var(--shadow-sm); border-color:transparent; }
.fs-silo-links, .fs-related { border-radius:var(--radius-card); }
.fs-media, .fs-split .fs-media, .fs-split figure, .fs-split img { border-radius:var(--radius-img); }
.fs-form input, .fs-form textarea { border-radius:var(--radius-input); }
.fs-ba, .fs-video { border-radius:var(--radius-card-lg); }
.fs-ba__label { border-radius:var(--radius-pill); }
.fs-hero-cine__stat { border-radius:var(--radius-pill); background:rgba(1,15,98,.5); border-color:rgba(176,141,74,.55); }
.fs-nav__sub { border-radius:var(--radius-card); box-shadow:var(--shadow-md); }
/* overflow-x MUST stay auto: the `overflow:hidden` shorthand that used to live here silently
   overrode the `overflow-x:auto` set above, so the 5-column fiber table was cut off at 390px
   with no way to scroll to it (the whole Viscose column was unreachable). */
.fs-table-wrap { border-radius:var(--radius-card); overflow-x:auto; overflow-y:hidden; border:var(--hairline); }
.fs-hero-cine__frame { border-radius:0 0 var(--radius-card-lg) var(--radius-card-lg); box-shadow:var(--shadow-lg); }
@media (max-width:900px){ .fs-header-actions { border-radius:0 0 var(--radius-card) var(--radius-card); } }

/* ---- A1: ONE frosted-glass feature card per view (§13.3) ---- */
.fs-glass {
	background:rgba(213,228,245,.55);           /* powder-tinted (light surface) */
	backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1);
	border:1px solid rgba(1,15,98,.12); border-radius:var(--radius-card-lg);
	box-shadow:var(--shadow-lg); padding:1.4rem 1.5rem; color:var(--ink);
}
.fs-glass--dark { background:rgba(1,15,98,.45); border-color:rgba(234,241,250,.25); color:var(--on-navy); box-shadow:var(--shadow-lg), var(--shadow-glow); }
.fs-glass--dark :is(b,strong){ color:#fff; }
.fs-glass__stars { color:var(--gold-text); letter-spacing:.06em; font-size:1.05rem; }
.fs-glass__row { display:flex; align-items:center; gap:.7rem 1rem; flex-wrap:wrap; }
.fs-glass__big { font-family:"Fraunces",serif; font-weight:600; font-size:2.4rem; line-height:1; color:var(--navy); }
.fs-glass--dark .fs-glass__big { color:var(--on-navy); }
.fs-glass__thumb { width:64px; height:64px; border-radius:var(--radius-card); object-fit:cover; }
/* Solid warm fallback where backdrop-filter is unsupported / undesirable (§13.3 a11y) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
	.fs-glass { background:var(--powder); }
	.fs-glass--dark { background:#0a1a5a; }
}
@media (prefers-reduced-transparency:reduce){
	.fs-glass { background:var(--powder); backdrop-filter:none; -webkit-backdrop-filter:none; }
	.fs-glass--dark { background:#0a1a5a; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ---- A2: Accent-word serif headline (gold italic on dark hero) ---- */
.fs-hero-cine__h1 em, .fs-page-hero .wp-block-post-title em { font-style:italic; color:var(--gold); }

/* ---- A2: Cinematic slide counter "01 — 04" (gold numerals) ---- */
.fs-hero-cine .fs-slidecount { display:inline-flex; align-items:baseline; gap:.5rem; font-family:"Fraunces",serif; color:var(--gold); font-size:1.05rem; letter-spacing:.04em; }
.fs-hero-cine .fs-slidecount .cur { font-size:1.6rem; font-weight:600; }
.fs-hero-cine .fs-slidecount .tot { opacity:.7; }
.fs-hero-cine .fs-slidecount .bar { width:2.2rem; height:1px; background:var(--gold); opacity:.6; align-self:center; }

/* ---- A2: Circular scroll cue (thin rotating ring + chevron), reduced-motion safe ---- */
.fs-scrollcue { position:absolute; left:50%; bottom:1.3rem; transform:translateX(-50%); z-index:5; width:60px; height:60px; display:grid; place-items:center; pointer-events:none; }
.fs-scrollcue__ring { position:absolute; inset:0; border-radius:var(--radius-pill); border:1px solid rgba(234,241,250,.45); border-top-color:var(--gold); animation:fs-spin 6s linear infinite; }
.fs-scrollcue__chev { width:14px; height:14px; }
.fs-scrollcue__chev path { stroke:var(--on-navy); }
@keyframes fs-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .fs-scrollcue__ring { animation:none; } }

/* ---- A2/A3: Navy cohesion grade — harmonize every real photo with the palette ---- */
.fs-hero-cine__grade { background:linear-gradient(115deg, rgba(1,15,98,.88) 0%, rgba(1,15,98,.55) 38%, rgba(1,15,98,.12) 66%, rgba(1,15,98,.38) 100%); }
.fs-hero::before { background:linear-gradient(90deg, rgba(1,15,98,.94) 0%, rgba(1,15,98,.74) 55%, rgba(1,15,98,.38) 100%); }
.fs-page-hero::before { background:linear-gradient(105deg, rgba(1,15,98,.93) 0%, rgba(1,15,98,.72) 52%, rgba(1,15,98,.42) 100%); }
.fs-ba__label { background:rgba(1,15,98,.62); }
.fs-hero-cine__weave path, .fs-hero__weave line { stroke:var(--gold-hover); }

/* ---- A1: trust strip hairline + glass proof placement helpers ---- */
.fs-hero .fs-trust, .fs-section--indigo .fs-trust { border-color:rgba(234,241,250,.18); }
.fs-hero-cine__glass { position:absolute; z-index:5; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1.4rem,4vw,2.6rem); max-width:min(340px,72vw); }
@media (max-width:640px){ .fs-hero-cine__glass { position:static; max-width:none; margin:1.25rem 0 0; } }
/* The glass proof card supersedes the older floating text stats (§13.3 one proof moment). */
.fs-hero-cine__stat { display:none; }

/* ---- A3: 404 art block ---- */
.fs-404 { text-align:center; padding:clamp(4rem,10vh,8rem) 1.5rem; }
.fs-404 svg { width:96px; height:96px; margin:0 auto 1.5rem; display:block; }
.fs-404__code { font-family:"Fraunces",serif; font-size:clamp(3rem,9vw,6rem); color:var(--navy); line-height:1; margin:0; }
.fs-404__code em { font-style:italic; color:var(--gold); }

/* ============================================================================
   WAVE 3.1 — checkpoint fixes: box-sizing, navy hero swap grade, §14.1 process
   photo cards, §14.2 fanned gallery, scroll-reveal tilt ("unfold").
   ============================================================================ */

/* FIX 1 — box-sizing reset. `.fs-section > .fs-container{width:100%}` + content-box +
   padding was computing to 100%+96px → sections overflowed the viewport and clipped
   right-edge text (the full-immersion H2). border-box makes width:100% include padding. */
*, *::before, *::after { box-sizing:border-box; }

/* FIX 2 — the hero is now a real NAVY+GOLD rug; drop the heavy grade that muddied the old
   red rug to purple. Light navy scrim, weighted to bottom-left for H1 legibility only. */
.fs-hero-cine__grade {
	background:
		linear-gradient(to top, rgba(1,15,98,.80) 0%, rgba(1,15,98,.30) 30%, rgba(1,15,98,.04) 58%, rgba(1,15,98,0) 100%),
		linear-gradient(105deg, rgba(1,15,98,.62) 0%, rgba(1,15,98,.14) 34%, rgba(1,15,98,0) 55%);
}

/* §14.1 — process chapter: numbered PHOTO cards (real process shots) instead of text rows */
.fs-pcard {
	display:grid; grid-template-columns:104px 1fr; gap:1.15rem; align-items:center;
	background:rgba(234,241,250,.06); border:1px solid rgba(234,241,250,.14);
	border-radius:var(--radius-card); padding:.9rem; margin:0;
}
.fs-pcard__media { border-radius:var(--radius-img); overflow:hidden; aspect-ratio:1; }
.fs-pcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.fs-pcard__body { min-width:0; }
.fs-pcard__body .fs-numeral { display:block; font-size:1.9rem; line-height:1; margin-bottom:.15rem; }
.fs-pcard__body h3 { margin:0 0 .3rem; color:var(--on-navy); }
.fs-pcard__body p { margin:0; color:var(--on-navy); opacity:.85; }
.fs-process__steps { display:grid; gap:1.1rem; }
@media (max-width:520px){ .fs-pcard { grid-template-columns:84px 1fr; } }

/* §14.2 — fanned aspirational gallery (navy+gold rug art; NOT proof — real photos own proof) */
.fs-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2rem; }
.fs-gallery__item { margin:0; position:relative; border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-md); }
.fs-gallery__item img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.fs-gallery__item figcaption {
	position:absolute; left:0; right:0; bottom:0; padding:1.3rem .9rem .7rem;
	font-size:.85rem; font-weight:600; color:var(--on-navy);
	background:linear-gradient(to top, rgba(1,15,98,.82), rgba(1,15,98,0));
}
@media (max-width:820px){ .fs-gallery { grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .fs-gallery { grid-template-columns:1fr; } }

/* FIX 3 / §14.1-2 — scroll-reveal TILT ("unfold"): cards rest tilted ±2.5°, un-tilt to 0
   as they enter view (MaestroClass feel). fs-motion.js adds .is-in per element. */
html.js .fs-tilt-reveal {
	/* Retuned 2026-09: cards stay fully visible (opacity 1) and only the tilt settles,
	   in 350ms, so card grids can never render as a blank wall mid-scroll. */
	opacity:1; transform:perspective(1200px) rotateY(3deg) rotateX(2deg) translateY(14px);
	transform-origin:center bottom;
	transition:transform .35s var(--ease);
	will-change:transform;
}
html.js .fs-tilt-reveal:nth-child(even) { transform:perspective(1200px) rotateY(-3deg) rotateX(2deg) translateY(14px); }
html.js .fs-tilt-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
	.fs-tilt-reveal, html.js .fs-tilt-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================================
   WAVE 5 — C2/C3 AWARD-CRAFT: branded cursor, magnetic (JS), word-stagger,
   View-Transitions page nav. All progressive-enhancement + reduced-motion safe.
   ============================================================================ */

/* ---- C2: View-Transitions page nav (cross-document; progressive enhancement) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
	animation-duration:.35s; animation-timing-function:var(--ease);
}
@media (prefers-reduced-motion:reduce){
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}


/* ---- C3: Kinetic hero word-stagger (homepage H1). Gated by html.js; each word eases up. ---- */
html.js .fs-words .fs-word { display:inline-block; opacity:0; transform:translateY(.42em);
	transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js .fs-words.is-in .fs-word { opacity:1; transform:none; }
.fs-words .fs-word em, .fs-hero-cine__h1 em.fs-word { font-style:italic; color:var(--gold); }
@media (prefers-reduced-motion:reduce){ .fs-words .fs-word { opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---- C3: narrative triad "entrusted · restored · returned" (the rug's journey) ---- */
.fs-journey { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem 1.1rem;
	font-family:"Fraunces",serif; font-style:italic; font-size:clamp(1.1rem,2.2vw,1.6rem); color:var(--gold); margin:0; }
.fs-journey .sep { width:26px; height:1px; background:var(--gold); opacity:.55; }

/* ============================================================================
   WAVE 6 — C1 SIGNATURE MOMENT: scroll-LINKED zoom into the hero rug ("Step Into
   Wonder"). CSS scroll-driven animation = compositor-only, ZERO JS, ZERO WebGL
   budget. Desktop/tablet only (mobile hero frame is display:none → floor untouched).
   Progressive enhancement: no animation-timeline support OR reduced-motion → static.
   ============================================================================ */
@supports (animation-timeline: scroll()) {
	@media (min-width:641px) and (prefers-reduced-motion:no-preference) {
		.fs-hero-cine__media {
			transform-origin:58% 44%;            /* zoom toward the gold medallion */
			animation:fs-hero-zoom linear both;
			animation-timeline:scroll(root);
			animation-range:0 92vh;              /* linked across the hero's height only */
			will-change:transform;
		}
		/* The dark grade deepens slightly as you descend, adding cinematic depth. */
		.fs-hero-cine__grade {
			animation:fs-hero-deepen linear both;
			animation-timeline:scroll(root);
			animation-range:0 92vh;
		}
	}
}
@keyframes fs-hero-zoom { to { transform:scale(1.16); } }
@keyframes fs-hero-deepen { to { opacity:1.35; } }

/* ============================================================================
   WAVE 7 — DESIGN-JUDGE BLOCKER FIXES (WCAG contrast + tablet hero collision)
   ============================================================================ */
/* B2 (contrast, phones): the mobile hero is text-led on the LIGHT canvas, so the accent word
   must be NAVY not gold — gold "Master" on #F7F9FC was 2.95:1 (fails AA-large + our own rule). */
@media (max-width:640px){ .fs-hero-cine__h1 em, .fs-hero-cine__h1 em.fs-word, .fs-words .fs-word em { color:var(--navy); } }

/* B3 (contrast, footer): the footer's generic link color (on-navy) was overriding the gold CTA's
   navy text → 2.73:1. Restore ink (#0B1330 on gold = 5.87:1), matching the header pills. */
.site-footer .fs-btn--primary, .site-footer .fs-btn--primary:hover { color:var(--ink); }

/* B1 (responsiveness, tablet portrait 641–900): the floating glass proof card collided with the
   bottom-left H1 and hid the 5.0. Move it clear to the top-right (below the floating nav). */
@media (min-width:641px) and (max-width:900px){
	.fs-hero-cine__glass { top:5.6rem; bottom:auto; right:clamp(1rem,2.5vw,1.5rem); max-width:min(300px,58vw); }
}

/* A11y polish: light focus ring on dark surfaces (navy-on-navy ring was low-contrast on the hero
   header); deliberate ::selection; larger tap targets for card link-CTAs. */
.fs-hero :is(a,button):focus-visible, .fs-page-hero :is(a,button):focus-visible,
.site-footer :is(a,button):focus-visible, .fs-section--indigo :is(a,button):focus-visible,
body.fs-has-hero .site-header:not(.is-scrolled) :is(a,button):focus-visible {
	outline:2px solid var(--gold); outline-offset:2px;
}
::selection { background:rgba(176,141,74,.28); color:var(--ink); }
.fs-card__link { display:inline-flex; align-items:center; min-height:44px; }

/* =========================================================================
   CREST HEADER — HERO-HEADER-REDESIGN. 3-column grid (nav · crest · nav),
   transparent over the hero → solid navy compact bar on scroll, full-screen
   navy mobile overlay. Scoped under .fs-header--crest so it beats the earlier
   paper-bar rules by specificity + source order. Position:fixed = out of flow
   = zero CLS on the transparent→solid swap.
   ========================================================================= */
/* Header-height tokens: the fixed two-tier header overlays every hero top, so anything that must
   clear it (the hero corner frame) reads these instead of a magic number. Utility bar: 41px
   (min-height 41 incl border; 38+1 under 640px). Nav row: 16px padding x2 + crest (64px desktop,
   52px mobile) + 1px border. */
:root{ --fs-utility-h:41px; --fs-navrow-h:97px; --fs-header-h:calc(var(--fs-utility-h) + var(--fs-navrow-h)); }
@media (max-width:1024px){ :root{ --fs-navrow-h:85px; } }
@media (max-width:640px){ :root{ --fs-utility-h:39px; } }
.site-header.fs-header--crest{ position:fixed; top:0; left:0; right:0; z-index:100;
	background:var(--navy); border-bottom:1px solid rgba(228,203,139,.20); box-shadow:none;
	/* background is NOT in the transition list on purpose: the transparent-over-hero bar snaps to
	   solid navy on the first pixel of scroll, so hero buttons and the logo never read through a
	   half-faded bar. (No backdrop-filter here either: it would turn the header into the containing
	   block for the fixed full-screen mobile menu inside it.) Border + shadow still ease in. */
	transition:border-color .18s var(--ease), box-shadow .25s var(--ease); }
/* WP flow-layout block gap puts margin-block-start:24px on every later child of the header group
   (the low-specificity :where rule). That opened a phantom gap between the utility strip and the
   nav row, and pushed the fixed mobile overlay 24px down. The header tiers manage their own
   spacing, so zero it here. */
.site-header.fs-header--crest > *{ margin-block-start:0; }
.fs-header--crest .fs-header-inner{
	/* minmax(0,1fr) pins the two rail tracks EQUAL even when one rail's content is wider,
	   so the crest sits on the true center line (a plain 1fr grows to fit content and had
	   the crest drifting left of center once the truck CTA joined the right rail). */
	display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(14px,2.2vw,38px);
	max-width:1360px; margin:0 auto; padding:16px clamp(20px,5vw,64px);
	transition:padding .3s var(--ease); }

/* ===== Tier 1: local-SEO utility bar, the slim top tier of the fixed header on every page.
   Two clusters on one deep-navy line: near-me directions link + weekday hours + Google reviews
   on the left; click-to-call, mailto, and the four social profiles on the right. On scroll it
   collapses so only the tier 2 nav sticks; it returns at the top of the page. The header is
   position:fixed (out of flow), so the collapse never shifts page content: CLS 0. ===== */
.fs-utility{ display:flex; align-items:center; justify-content:space-between; gap:clamp(.8rem,2vw,2rem);
	min-height:41px; max-height:64px; padding:4px clamp(14px,2.6vw,40px); background:var(--navy-deep);
	border-bottom:1px solid rgba(228,203,139,.28); overflow:hidden;
	transition:min-height .25s var(--ease), max-height .25s var(--ease), padding .25s var(--ease); }
.fs-header--crest.is-scrolled .fs-utility{ max-height:0; min-height:0; padding-block:0; border-bottom-width:0; }
.fs-utility__cluster{ display:flex; align-items:center; gap:clamp(.5rem,.9vw,.9rem); min-width:0; }
.fs-utility__item{ display:inline-flex; align-items:center; gap:.42rem; min-height:30px;
	color:var(--powder); text-decoration:none; font-family:"Inter",system-ui,sans-serif;
	font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
a.fs-utility__item{ transition:color .25s; }
/* gold text in the bar is scoped under .fs-header--crest: the bar is always the deep-navy surface */
.fs-header--crest a.fs-utility__item:hover{ color:var(--gold-lt); }
.fs-utility__nearme{ color:var(--cream); }
.fs-header--crest .fs-utility__phonelink{ color:var(--gold-lt); font-weight:600; }
.fs-header--crest a.fs-utility__item.fs-utility__phonelink:hover{ color:var(--cream); }
.fs-utility__email span{ text-transform:none; letter-spacing:.03em; font-size:11px; }
.fs-utility .fs-ico{ stroke:var(--gold-lt); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.fs-utility .fs-ico--fill{ fill:var(--gold-lt); stroke:none; }
.fs-utility__arrow{ transition:transform .25s var(--ease); }
.fs-utility__nearme:hover .fs-utility__arrow{ transform:translateX(3px); }
.fs-utility__sep{ width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.75; flex:0 0 auto; }
.fs-utility__social{ display:inline-flex; align-items:center; gap:.15rem; }
.fs-utility__soc{ display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px;
	border-radius:50%; color:var(--powder); transition:color .25s, background .25s; }
.fs-utility__soc svg{ display:block; } /* glyphs are self-contained SVGs shared with the footer */
.fs-header--crest .fs-utility__soc:hover{ color:var(--gold-lt); background:rgba(228,203,139,.10); }
.fs-utility :is(a):focus-visible{ outline:2px solid var(--gold-lt); outline-offset:2px; border-radius:3px; }

/* Progressive collapse so the bar never wraps: drop hours, then email, then reviews + socials,
   until phones keep only the near-me link and the tap-to-call number. */
@media (max-width:1330px){ .fs-utility__hours,.fs-utility__sep--hours{ display:none; } }
@media (max-width:1120px){ .fs-utility__email,.fs-utility__sep--mail{ display:none; } }
@media (max-width:900px){ .fs-utility__reviews,.fs-utility__sep--rev,.fs-utility__social,.fs-utility__sep--soc{ display:none; } }
@media (max-width:640px){
	.fs-utility__item{ font-size:10px; letter-spacing:.06em; gap:.35rem; }
	.fs-utility{ min-height:38px; }
}

/* ===== Tier 2 nav CTA: the animated pickup-and-deliver truck (replaces the old gold pill).
   Ghost-gold pill, cream line-art truck with light-gold accents. Motion is transform-only
   (zero CLS): a one-time drive-in from the left on load, then a slow idle drift with the
   wheels rolling. prefers-reduced-motion freezes it to a static truck. ===== */
.fs-truck-cta{ display:inline-flex; align-items:center; gap:.55rem;
	padding:.44rem 1.05rem .44rem .85rem; border:1px solid rgba(228,203,139,.5); border-radius:100px;
	text-decoration:none; font-family:"Inter",system-ui,sans-serif; font-size:11px; font-weight:500;
	letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
	transition:border-color .25s, background .25s; }
.fs-header--crest .fs-truck-cta{ color:var(--gold-lt); }
.fs-header--crest .fs-truck-cta:hover{ border-color:var(--gold-lt); background:rgba(228,203,139,.09); }
.fs-truck-cta__label--short{ display:none; }
.fs-truck{ display:inline-block; line-height:0; animation:fs-truck-in .9s cubic-bezier(.22,.61,.36,1) both; }
.fs-truck__svg{ display:block; overflow:visible; animation:fs-truck-idle 5.5s ease-in-out 1.2s infinite; }
.fs-truck__body{ stroke:var(--cream); stroke-width:1.5; stroke-linejoin:round; }
.fs-truck__accent{ stroke:var(--gold-lt); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.fs-truck__speed{ opacity:.55; }
.fs-truck__wheel{ transform-box:fill-box; transform-origin:center; animation:fs-truck-roll 5s linear infinite; }
@keyframes fs-truck-in{ from{ transform:translateX(-22px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes fs-truck-idle{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px) translateY(-.5px); } }
@keyframes fs-truck-roll{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
	.fs-truck,.fs-truck__svg,.fs-truck__wheel{ animation:none!important; }
	.fs-utility,.fs-utility__arrow{ transition:none!important; }
}
/* non-hero routes clear the fixed bar */
/* Non-hero routes (blog index, search, archives, 404) have no full-bleed hero to sit under the
   fixed ~97px header, and the block template puts an inline padding-top:24px on <main> that would
   otherwise win, so the first heading hid behind the header. Force a header-clearing offset.
   (The 40px pickup utility strip is part of the fixed header now, so the offset includes it.) */
body:not(.fs-has-hero) main{ padding-top:clamp(136px,calc(11vh + 40px),160px) !important; }

/* ===== Certification trust bar — 5-at-a-time cycling carousel =====
   Lives in [fs_trust] right after the page intro. The 8 unique badges are rendered ONCE; a viewport
   shows N (5 desktop / 3 tablet / 2 mobile) and fs-cert-carousel.js advances one every ~3s, recycling
   the first slot to the end for a seamless loop (no duplicated track → no badge on screen twice).
   Row height is reserved → CLS 0. */
.fs-cert-band{ width:100%; background:var(--paper-warm,#EDF2FA); border-block:1px solid rgba(1,15,98,.14);
	padding:clamp(1.3rem,3vw,2.1rem) 0; }
.fs-cert-band__label{ text-align:center; margin:0 0 1.05rem; font-size:.72rem; letter-spacing:.22em;
	text-transform:uppercase; color:#7A5C28; font-weight:700; }
/* full-bleed when it sits inside the trust strip (block flow — breaks out of constrained content) */
.fs-trust .fs-cert-band{ display:block; width:100vw; margin-inline:calc(50% - 50vw); }
.fs-cert-carousel{ --cert-shown:5; }
.fs-cert-carousel__viewport{ overflow:hidden; max-width:min(1080px,92vw); margin-inline:auto; }
.fs-cert-carousel__track{ display:flex; margin:0; padding:0; list-style:none; will-change:transform; }
.fs-cert-slot{ flex:0 0 calc(100% / var(--cert-shown)); display:flex; align-items:center; justify-content:center; min-height:100px; margin:0; }
.fs-cert-slot img{ height:74px; width:auto; display:block; }
.fs-cert__item{ display:block; }
.fs-cert__item:focus-visible{ outline:2px solid var(--gold); outline-offset:5px; border-radius:6px; }
@media (max-width:1024px){ .fs-cert-carousel{ --cert-shown:3; } }
@media (max-width:640px){ .fs-cert-carousel{ --cert-shown:2; } .fs-cert-slot{ min-height:84px; } .fs-cert-slot img{ height:58px; } }
/* reduced-motion: no cycling — show every badge in a static wrapped row so nothing is ever hidden */
@media (prefers-reduced-motion:reduce){
	.fs-cert-carousel__viewport{ overflow:visible; max-width:none; }
	.fs-cert-carousel__track{ flex-wrap:wrap; justify-content:center; gap:1rem clamp(1.5rem,4vw,3rem); }
	.fs-cert-slot{ flex:0 0 auto; min-height:0; }
}

/* =========================================================================
   INTERIOR PAGE BODIES — full-width designed sections (not a 760px document).
   The post-content stays a constrained 760px layout so bare prose keeps a
   readable measure, but designed section wrappers break out to wide/full like
   the homepage: two-column media rows, card grids, and full-bleed bands.
   ========================================================================= */
/* Widen designed blocks beyond the 760 prose measure (up to wideSize 1280). */
.entry-content.is-layout-constrained > :is(.fs-split,.fs-grid,.fs-cards,.fs-proof-grid,.fs-photo-strip,.fs-ba-wrap,.fs-map,.fs-video){
	max-width:var(--wp--style--global--wide-size,1280px); }
/* Full-bleed bands + intentionally full sections break the padding entirely.
   The margin-inline:calc(50% - 50vw) breakout used here previously did NOT work: WP pins the
   auto side-margins on a constrained column, so the negative margin was ignored and the band
   sat at the column's left edge (16px inset) while its 100vw width overhung the right by
   ~31px — clipping the band copy mid-word at 390px. Use the same left:50% + translateX(-50%)
   centring that .fs-faq/.fs-cta already proved robust across both templates.
   .fs-section is included because /reviews/ and /recent-projects/ place one directly in a
   constrained entry-content, where it was stranding at the 1080 prose measure with ~170-220px
   of dead gutter down both sides. (Home is is-layout-FLOW, so this selector never hits it.) */
.entry-content.is-layout-constrained > :is(.fs-band,.fs-section--bleed,.fs-section){
	max-width:none; width:100vw;
	position:relative; left:50%; transform:translateX(-50%);
	margin-inline:0; }

/* Interior two-column rows: bigger media, rounded, alternating direction. */
.entry-content .fs-split{ margin-block:clamp(2.5rem,5vw,4rem); }
.entry-content .fs-split .fs-media{ border:0; border-radius:16px; box-shadow:0 10px 34px rgba(1,15,98,.12); }
.entry-content .fs-split .fs-media img{ border-radius:16px; }
.fs-split--reverse .fs-media{ order:-1; }
.entry-content .fs-split > div:not(.fs-media) > h2{ margin-top:0; }

/* Full-bleed band — navy pull-quote / stat break between content blocks. */
.fs-band{ background:var(--navy-deep); color:var(--on-navy); position:relative; isolation:isolate;
	/* margin-block tightened 2026-09 (rhythm audit): bands are breathers, not destinations. */
	padding:clamp(3.25rem,7vw,5.5rem) clamp(1.5rem,5vw,3rem); text-align:center; margin-block:clamp(1.75rem,3.5vw,2.75rem); }
.fs-band__inner{ max-width:920px; margin-inline:auto; position:relative; z-index:1; }
.fs-band__eyebrow{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-lt); margin:0 0 1rem; font-weight:600; }
.fs-band__quote{ font-family:var(--serif-display); font-weight:500; font-size:clamp(1.55rem,3.4vw,2.5rem); line-height:1.25; color:var(--cream); margin:0; }
.fs-band__quote em{ color:var(--gold-lt); font-style:italic; }
.fs-band__stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,5vw,4rem); margin-top:1.75rem; }
.fs-band__stat b{ display:block; font-family:var(--serif-display); font-size:clamp(1.8rem,4vw,2.8rem); color:var(--gold-lt); line-height:1; }
.fs-band__stat span{ font-size:.85rem; letter-spacing:.06em; color:var(--powder); text-transform:uppercase; }
.fs-band::after{ content:""; position:absolute; inset:0; z-index:0; opacity:.10; pointer-events:none;
	background:url(assets/img/ai/band-weave-geometric-1600.webp) center/cover no-repeat; mix-blend-mode:soft-light; }
@media (max-width:800px){ .fs-band::after{ background-image:url(assets/img/ai/band-weave-geometric-800.webp); } }
@media (prefers-reduced-motion:reduce){ .fs-band:not(.fs-band--video)::after{ display:none; } }

/* Ambient video breather band — background video behind a pull-quote (decoration only, never the sole
   content). The -poster.webp is a CSS bg (the still that shows on mobile/reduced-motion + before play);
   the <video> fades in over it when the shared manager plays it. ::after is repurposed as the AA scrim. */
.fs-band--video{ background-color:var(--navy-deep); background-size:cover; background-position:center; }
.fs-band__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity .7s var(--ease); }
.fs-band__vid.is-playing{ opacity:1; }
.fs-band--video::after{ z-index:1; opacity:1; mix-blend-mode:normal; background:radial-gradient(120% 120% at 50% 45%, rgba(1,7,46,.58) 0%, rgba(1,7,46,.72) 55%, rgba(1,7,46,.86) 100%); }
.fs-band--video .fs-band__inner{ z-index:2; }
.fs-band--video .fs-band__quote{ text-shadow:0 2px 22px rgba(1,7,46,.6), 0 1px 2px rgba(1,7,46,.5); }
/* band-light-reveal is the brightest clip → heavier scrim so the cream/gold quote clears AA. */
.fs-band--bright::after{ background:radial-gradient(120% 120% at 50% 45%, rgba(1,7,46,.72) 0%, rgba(1,7,46,.82) 55%, rgba(1,7,46,.92) 100%); }

/* --- No lone 760px columns on interior pages: every remaining section is full-width-designed,
       with a readable measure kept INSIDE (raw prose is never stretched). --- */

/* FAQ → full-bleed warm band, centred heading, 2-column accordion (readable). */
.entry-content.is-layout-constrained > .fs-faq{
	max-width:none; width:100vw;
	/* Centre the 100vw band on the viewport. On posts the entry-content is a 760px constrained
	   column whose auto side-margins WP pins, so a margin breakout is ignored and the band stayed
	   pinned to the column (clipping the 2nd accordion column off the right). left+translateX is not
	   pinned and centres on the viewport for both the post column and the full-width service layout. */
	position:relative; left:50%; transform:translateX(-50%);
	background:var(--paper-warm); border-block:1px solid rgba(1,15,98,.10);
	padding-block:clamp(3rem,6vw,5rem); margin-block:clamp(2.5rem,5vw,4rem); }
/* fs-reveal toggles `transform` (translateY 24px -> none) to animate the rise; that would overwrite
   our translateX and knock the band off-centre. Own the transform so the band stays centred — the
   FAQ still fades in via opacity, it just forgoes the vertical rise. Wins over the reduced-motion
   `transform:none !important` too, so centring holds there as well. */
html.js .entry-content.is-layout-constrained > .fs-faq.fs-reveal{ transform:translateX(-50%) !important; }
.entry-content .fs-faq > h2{ text-align:center; max-width:var(--wp--style--global--wide-size,1280px);
	margin:0 auto 1.9rem; padding-inline:clamp(1.5rem,4vw,3rem); }
.entry-content .fs-faq__list{ max-width:var(--wp--style--global--wide-size,1280px); margin-inline:auto;
	padding-inline:clamp(1.5rem,4vw,3rem); columns:2; column-gap:3.5rem; }
.entry-content .fs-faq__item{ break-inside:avoid; border-bottom:1px solid rgba(1,15,98,.14); }
@media (max-width:720px){ .entry-content .fs-faq__list{ columns:1; } }

/* Pricing table + CTA card → full-bleed seated bands (match the FAQ), so neither floats as a
   narrow column on empty canvas. Inner content stays at a readable measure, centred. Reuse the
   warm-band palette the CTA/buttons already read against — no contrast regressions. */
.entry-content.is-layout-constrained > .fs-cost-band,
.entry-content.is-layout-constrained > .fs-cta{
	max-width:none; width:100vw;
	/* Full-bleed that is robust across templates (posts use a 760px centred column; service pages
	   use a full-width entry-content). WP pins auto side-margins so a negative-margin breakout is
	   ignored — instead centre the 100vw box on the viewport. entry-content is always centred in the
	   viewport, so left:50% + translateX(-50%) lands the box at x:0 regardless of column width. */
	position:relative; left:50%; transform:translateX(-50%);
	margin-block:clamp(2.5rem,5vw,4rem);
	background:var(--paper-warm); border-block:1px solid rgba(1,15,98,.10);
	padding-block:clamp(3rem,6vw,5rem); }
/* Centre inner content via padding (robust under WP has-global-padding, unlike margin:auto). */
.entry-content.is-layout-constrained > .fs-cost-band{
	padding-inline:max(clamp(1.5rem,4vw,3rem), calc(50vw - 450px)); }
.fs-cost-band__inner{ margin:0; }
.fs-cost-band .fs-table-wrap{ margin:0; }
.fs-cost-band .fs-cost-band__inner > .fs-updated{ text-align:center; margin-top:1rem; }
/* CTA stays a flex row; centre its content to a comfortable measure via padding, keeping the
   existing dark-on-warm head/sub/buttons (no restyle, no contrast risk). */
.entry-content.is-layout-constrained > .fs-cta{
	border:0; border-block:1px solid rgba(1,15,98,.10); border-radius:0; box-shadow:none;
	padding-inline:max(clamp(1.5rem,4vw,3rem), calc(50vw - 560px)); }
@media (max-width:720px){
	.entry-content.is-layout-constrained > .fs-cost-band .fs-cost-band__inner{ padding-inline:1.25rem; }
	.entry-content.is-layout-constrained > .fs-cta{ padding-inline:1.25rem; } }

/* Lede paragraphs in the article flow fill the content measure (they carry a 62ch cap for hero/
   section use); otherwise they float as a narrow column on the wide interior canvas. */
/* Lede escapes the 62ch prose cap but must still land on the same left edge as the h2/p
   siblings around it. `max-width:none` ran it to the full 1393px at left:16 — a third left
   edge in a single column, at ~175 characters per line. */
.entry-content.is-layout-constrained > .fs-lede{
	max-width:var(--wp--style--global--content-size,1080px); }

/* Intro answer → full-bleed light band (pseudo), text kept readable (~68ch, centred). */
.entry-content.is-layout-constrained > .fs-answer{ position:relative; z-index:0;
	max-width:70ch; margin-block:clamp(2rem,4.5vw,3.25rem); padding-block:clamp(2rem,4vw,3rem);
	border-left:0; border-radius:0; background:transparent; }
.entry-content.is-layout-constrained > .fs-answer::before{ content:""; position:absolute; z-index:-1;
	top:0; bottom:0; left:calc(50% - 50vw); width:100vw; background:var(--paper-warm); border-block:1px solid rgba(1,15,98,.10); }

/* Silo links → full-width card grid, not a 760px list. */
.entry-content.is-layout-constrained > .fs-silo-links{ max-width:var(--wp--style--global--wide-size,1280px);
	background:transparent; border:0; padding:0; margin-block:clamp(2.5rem,5vw,4rem); }
/* Silo-links: ONE designed component sitewide. Gold small-caps eyebrow labels (the
   AA-safe --gold-text token on the light canvas), uniform equal-height cards on an
   auto-FILL grid (a lone card keeps one track's width instead of stretching full
   width), arrow affordance, gold hover. Transform/opacity hovers only (CLS 0). */
.entry-content .fs-silo-links > p{ font-family:"Inter",system-ui,sans-serif; font-weight:600; font-size:11px;
	letter-spacing:.18em; text-transform:uppercase; color:var(--gold-text); margin:0 0 .9rem; }
.entry-content .fs-silo-links ul{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:1rem; list-style:none; margin:0 0 1.5rem; padding:0; }
.entry-content .fs-silo-links li{ margin:0; }
.entry-content .fs-silo-links li a{ display:flex; align-items:center; justify-content:space-between; gap:.8rem;
	height:100%; padding:1rem 1.25rem; background:#fff; border:var(--hairline);
	border-radius:12px; box-shadow:0 2px 10px rgba(1,15,98,.05); font-weight:500; color:var(--navy);
	text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.entry-content .fs-silo-links li a::after{ content:"\2192"; flex:0 0 auto; color:var(--gold-text);
	transition:transform .2s var(--ease); }
@media (hover:hover){
	.entry-content .fs-silo-links li a:hover{ transform:translateY(-2px); border-color:var(--gold);
		box-shadow:0 8px 22px rgba(1,15,98,.10); }
	.entry-content .fs-silo-links li a:hover::after{ transform:translateX(3px); }
}

/* Review card → seated inside a full-bleed band so there's no empty-sides gap. */
.entry-content.is-layout-constrained > .fs-glass.fs-proof{ position:relative; z-index:0;
	margin-block:clamp(2.5rem,5vw,4rem)!important; padding-block:clamp(2.5rem,5vw,3.5rem); margin-inline:auto; }
.entry-content.is-layout-constrained > .fs-glass.fs-proof::after{ content:""; position:absolute; z-index:-1;
	top:0; bottom:0; left:calc(50% - 50vw); width:100vw; background:linear-gradient(180deg,var(--powder),var(--paper)); }
@media (prefers-reduced-motion:reduce){
	.entry-content .fs-silo-links li a, .entry-content .fs-silo-links li a::after{ transition:none; }
	.entry-content .fs-silo-links li a:hover{ transform:none; }
	.entry-content .fs-silo-links li a:hover::after{ transform:none; }
}

/* transparent while it floats over a hero */
body.fs-has-hero .site-header.fs-header--crest:not(.is-scrolled){ background:transparent; border-bottom-color:transparent; box-shadow:none; }
body.fs-has-hero .site-header.fs-header--crest:not(.is-scrolled)::before{ content:none; }
/* solid navy compact bar once scrolled; the background swap is instant (see base rule above) */
.site-header.fs-header--crest.is-scrolled{ background:var(--navy); border-bottom-color:rgba(228,203,139,.22); box-shadow:0 8px 30px rgba(1,7,46,.42); }
.fs-header--crest.is-scrolled .fs-header-inner{ padding-top:9px; padding-bottom:9px; }

/* nav rails */
/* Tracking/gap sized so the right rail's FOUR items (About, Contact, Rug Care Guides, truck
   CTA) clear the centered crest at every desktop width; the old 12px/.19em fit only three. */
.fs-header--crest .fs-nav{ display:flex; align-items:center; gap:clamp(13px,1.4vw,22px); flex-wrap:nowrap; }
.fs-header--crest .fs-nav--right{ justify-content:flex-end; }
.fs-header--crest .fs-nav__btn,
.fs-header--crest .fs-nav__link{
	/* line-height:normal explicitly: <button> defaults to it but <a> would inherit the nav's
	   1.7, which floated the anchor-based Contact item ~4px above its button siblings. */
	font-family:"Inter",system-ui,sans-serif; font-weight:400; font-size:11px; letter-spacing:.13em; line-height:normal;
	text-transform:uppercase; color:var(--powder); background:none; border:0; padding:6px 0; cursor:pointer;
	position:relative; white-space:nowrap; display:inline-flex; align-items:center; gap:.35em; transition:color .3s; }
.fs-header--crest .fs-nav__btn:hover,.fs-header--crest .fs-nav__link:hover{ color:var(--gold-lt); }
.fs-header--crest .fs-nav__caret{ font-size:.62em; color:var(--gold-lt); opacity:.8; }
.fs-header--crest .fs-nav__btn::after,.fs-header--crest .fs-nav__link::after{
	content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--gold-lt); transition:width .3s var(--ease); }
.fs-header--crest .fs-nav__btn:hover::after,.fs-header--crest .fs-nav__link:hover::after,
.fs-header--crest .fs-nav__item.is-open .fs-nav__btn::after{ width:100%; }
/* right-side dropdowns open right-aligned so they never overflow the viewport edge */
@media (min-width:1025px){ .fs-header--crest .fs-nav--right .fs-nav__sub{ left:auto; right:0; } }
/* the header is a navy (or navy-over-dark-hero) surface in every state: light-gold focus ring */
.site-header.fs-header--crest :is(a,button):focus-visible{ outline:2px solid var(--gold-lt); outline-offset:2px; }

/* crest (real company coat-of-arms, white version) */
.fs-header--crest .fs-crest{ grid-column:2; display:block; line-height:0; }
.fs-header--crest .fs-crest__img{ height:64px; width:auto; display:block; transition:height .3s var(--ease); }
.fs-header--crest.is-scrolled .fs-crest__img{ height:46px; }

/* Narrow desktop band: tighten type and gaps so 4 + crest + 2 + CTA still clears, and drop
   the CTA to its short label. */
@media (min-width:1025px) and (max-width:1439px){
	.fs-header--crest .fs-nav{ gap:14px; }
	.fs-header--crest .fs-nav__btn,.fs-header--crest .fs-nav__link{ font-size:11px; letter-spacing:.12em; }
	.fs-truck-cta__label--full{ display:none; }
	.fs-truck-cta__label--short{ display:inline; }
	.fs-truck-cta{ padding:.4rem .85rem .4rem .7rem; gap:.45rem; }
}

/* Scrolled desktop: the centered-crest ceremony becomes the standard compact bar, logo LEFT,
   the six nav items grouped right of it, truck CTA on the far right. This reads balanced where
   the old centered-logo-plus-pill did not. */
@media (min-width:1025px){
	.fs-header--crest.is-scrolled .fs-header-inner{ grid-template-columns:auto 1fr auto; column-gap:clamp(16px,1.9vw,32px); }
	.fs-header--crest.is-scrolled .fs-crest{ grid-column:1; grid-row:1; justify-self:start; }
	.fs-header--crest.is-scrolled .fs-nav--left{ grid-column:2; grid-row:1; justify-content:flex-end; }
	.fs-header--crest.is-scrolled .fs-nav--right{ grid-column:3; grid-row:1; }
}

/* The old scrolled-in "Schedule Pickup" pill is retired: the pickup CTA lives in the always-visible
   utility strip, and the nav row stays a symmetric 3 + crest + 3 around the centered crest. */
.fs-header--crest .fs-header-cta{ display:none; }

/* hamburger */
.fs-header--crest .fs-nav-toggle{ display:none; grid-column:3; justify-self:end; background:none; border:0; padding:8px; cursor:pointer; min-width:44px; min-height:44px; }
.fs-header--crest .fs-nav-toggle__bars{ display:flex; flex-direction:column; gap:5px; }
.fs-header--crest .fs-nav-toggle__bars span{ display:block; width:26px; height:1.5px; background:var(--cream); transition:transform .3s var(--ease),opacity .3s; }

/* mobile (<=1024px): crest left, truck CTA center-right, hamburger right. The right rail stays
   in the grid but hides its dropdown items, so the single truck CTA inside it survives without
   duplicating the link in the DOM. */
@media (max-width:1024px){
	.fs-header--crest .fs-header-inner{ grid-template-columns:auto 1fr auto; }
	.fs-header--crest .fs-nav--left{ display:none; }
	.fs-header--crest .fs-nav--right{ grid-column:2; grid-row:1; justify-self:end; }
	.fs-header--crest .fs-nav--right .fs-nav__item{ display:none; }
	.fs-header--crest .fs-crest{ grid-column:1; justify-self:start; }
	.fs-header--crest .fs-crest__img{ height:52px; }
	.fs-header--crest.is-scrolled .fs-crest__img{ height:44px; }
	.fs-header--crest .fs-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; grid-column:3; grid-row:1; }
	.fs-truck-cta{ padding:.4rem .85rem .4rem .7rem; gap:.45rem; }
	.fs-truck-cta__label--full{ display:none; }
	.fs-truck-cta__label--short{ display:inline; }
}

/* full-screen navy overlay menu */
.fs-mobile-menu{ position:fixed; inset:0; z-index:120;
	background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
	display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .35s var(--ease); }
.fs-mobile-menu[hidden]{ display:none; }
.fs-mobile-menu.is-open{ opacity:1; }
.fs-mobile-menu__nav{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; text-align:center; padding:2rem; }
.fs-mobile-menu__nav a{ font-family:var(--serif-display); font-weight:500; font-size:clamp(1.5rem,7vw,2.15rem);
	color:var(--cream); text-decoration:none; letter-spacing:.015em; line-height:1; transition:color .25s; }
.fs-mobile-menu__nav a:hover,.fs-mobile-menu__nav a:focus-visible{ color:var(--gold-lt); }
.fs-mobile-menu__cta{ margin-top:.8rem; font-family:"Inter",system-ui,sans-serif!important; font-size:.82rem!important;
	letter-spacing:.14em; text-transform:uppercase; background:linear-gradient(135deg,var(--gold-lt),var(--gold));
	color:#2A1E06!important; padding:.9rem 2.1rem; border-radius:100px; }
.fs-mobile-menu__phone{ font-family:"Inter",system-ui,sans-serif!important; font-size:1rem!important; letter-spacing:.08em; color:var(--powder)!important; }
body.fs-menu-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
	.fs-header--crest .fs-header-inner,.fs-header--crest .fs-crest__img,
	.fs-header--crest .fs-nav__btn,.fs-header--crest .fs-nav__link,
	.fs-header--crest .fs-nav__btn::after,.fs-header--crest .fs-nav__link::after,
	.site-header.fs-header--crest,.fs-mobile-menu,.fs-nav-toggle__bars span{ transition:none!important; }
}

/* =========================================================================
   CINEMATIC HERO REEL — HERO-HEADER-REDESIGN. Full-viewport video hero with a
   navy scrim, gold frame + corner filigree, centered Cormorant headline, and a
   pinned trust row. Poster is the LCP; the video (preload="none") is hydrated
   after idle by fs-hero.js. Values mirror hero-mockup-reel.html.
   ========================================================================= */
.fs-hero-reel{ position:relative; height:100vh; height:100svh; width:100%; overflow:hidden; isolation:isolate;
	display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--navy-deep);
	/* Center the content in the area BELOW the fixed header (border-box, so height stays 100svh
	   and the absolute-positioned frame/corners/trust row are untouched): the centered copy can
	   never ride up under the nav on short viewports. */
	padding-top:var(--fs-header-h);
	margin:0; content-visibility:visible; }
.fs-hero-reel__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-4; background:var(--navy-deep); }
/* video sits above the poster and fades in when the shared manager plays it (fs-bgvideo.js) */
.fs-hero-reel__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; background:transparent; opacity:0; transition:opacity .7s var(--ease); }
.fs-hero-reel__video.is-playing{ opacity:1; }
/* lift the video so it reads under the lighter scrim */
.fs-hero-reel video{ filter:brightness(1.08) saturate(1.05); }
.fs-hero-reel__scrim{ position:absolute; inset:0; z-index:-2;
	/* Darkness concentrated behind the centred headline only: a FLAT navy pool over the whole text
	   block (0->34% radius) so even the gold eyebrow clears AA on the brightest video frames, then a
	   quick falloff to a light edge (0.22) so the video stays clearly visible around it. */
	background-image:
		radial-gradient(90% 66% at 50% 50%,
			rgba(1,7,46,0.68) 0%, rgba(1,7,46,0.68) 34%, rgba(1,7,46,0.22) 100%),
		linear-gradient(180deg,
			rgba(1,7,46,0.24) 0%, rgba(1,7,46,0.14) 45%, rgba(1,7,46,0.50) 100%); }
.fs-hero-reel__grain{ position:absolute; inset:0; z-index:-1; opacity:.05; pointer-events:none;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
/* The frame's TOP inset clears the fixed two-tier header (via the --fs-header-h tokens) plus a
   14px breathing gap, so both top corners show their full curl in clear navy below the nav.
   Left, right, and bottom insets are untouched: the bottom corners do not move. */
.fs-hero-reel__frame{ position:absolute; inset:calc(var(--fs-header-h) + 20px) 22px 22px; border:1px solid rgba(228,203,139,.35); z-index:2; pointer-events:none; }
.fs-hero-reel__frame::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(228,203,139,.14); }
.fs-hero-reel__corner{ position:absolute; width:150px; height:150px; z-index:3; color:var(--gold-lt); opacity:.9; pointer-events:none; }
.fs-hero-reel__corner svg{ width:100%; height:100%; display:block; }
.fs-hero-reel__corner--tl{ top:calc(var(--fs-header-h) + 12px); left:14px; }
.fs-hero-reel__corner--tr{ top:calc(var(--fs-header-h) + 12px); right:14px; transform:scaleX(-1); }
.fs-hero-reel__corner--bl{ bottom:14px; left:14px; transform:scaleY(-1); }
.fs-hero-reel__corner--br{ bottom:14px; right:14px; transform:scale(-1,-1); }

.fs-hero-reel__content{ position:relative; z-index:5; text-align:center; padding:0 24px; max-width:840px; }
.fs-hero-reel__eyebrow{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 26px;
	font-family:"Inter",system-ui,sans-serif; font-weight:400; font-size:clamp(10px,1.1vw,12px);
	letter-spacing:.4em; text-transform:uppercase; color:var(--gold-lt);
	text-shadow:0 2px 30px rgba(1,7,46,.85), 0 1px 2px rgba(1,7,46,.6); }
.fs-hero-reel__eyebrow::before,.fs-hero-reel__eyebrow::after{ content:""; width:clamp(22px,4vw,44px); height:1px; background:linear-gradient(90deg,transparent,var(--gold-lt)); }
.fs-hero-reel__eyebrow::after{ transform:scaleX(-1); }
.fs-hero-reel__eyebrow span{ opacity:.7; }
.fs-hero-reel__h1{ font-family:var(--serif-display); font-weight:500; color:var(--cream); margin:0;
	font-size:clamp(2.6rem,6.6vw,5.6rem); line-height:1.03; letter-spacing:.01em;
	text-shadow:0 2px 30px rgba(1,7,46,.85), 0 1px 2px rgba(1,7,46,.6); }
.fs-hero-reel__h1 em{ font-style:italic; font-weight:400; color:var(--gold-lt); }
.fs-hero-reel__sub{ margin:28px auto 0; max-width:600px; font-family:"Inter",system-ui,sans-serif; font-weight:400;
	font-size:clamp(14px,1.3vw,16.5px); line-height:1.8; color:var(--powder);
	text-shadow:0 2px 30px rgba(1,7,46,.85), 0 1px 2px rgba(1,7,46,.6); }
.fs-hero-reel__cta{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; justify-content:center; }
/* hero CTA look (mockup): gold gradient pill + cream ghost — reuse .fs-btn, hero-scoped */
.fs-hero-reel .fs-btn{ letter-spacing:.14em; text-transform:uppercase; font-size:13px; padding:16px 34px; border-radius:100px; }
.fs-hero-reel .fs-btn--primary{ background:linear-gradient(135deg,var(--gold-lt),var(--gold)); color:#2A1E06; box-shadow:0 10px 30px rgba(176,141,74,.35); border:0; }
.fs-hero-reel .fs-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(176,141,74,.5); color:#2A1E06; }
.fs-hero-reel .fs-btn--ghost{ background:rgba(228,203,139,.02); border:1px solid rgba(228,203,139,.5); color:var(--cream); }
.fs-hero-reel .fs-btn--ghost:hover{ border-color:var(--gold-lt); background:rgba(228,203,139,.08); color:var(--cream); }
.fs-hero-reel .fs-btn::after{ content:none; } /* suppress the inherited arrow glyph */

.fs-hero-reel__trust{ position:absolute; bottom:clamp(44px,7vh,64px); left:0; right:0; z-index:5; margin:0;
	display:flex; justify-content:center; align-items:center; gap:clamp(10px,2vw,22px); flex-wrap:wrap; padding:0 20px;
	font-family:"Inter",system-ui,sans-serif; font-weight:400; font-size:clamp(10px,1.1vw,12px); letter-spacing:.14em; text-transform:uppercase; color:var(--powder); }
.fs-hero-reel__stars{ color:var(--gold-lt); letter-spacing:.12em; }
.fs-hero-reel__dot{ width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.7; }
/* scroll cue: kept in the DOM (focusable skip-to-content link) but hidden — the mockup omits it
   and the trust row already anchors the hero base. Visible only to keyboard focus. */
.fs-hero-reel__scrollcue{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fs-hero-reel__scrollcue:focus-visible{ position:absolute; width:auto; height:auto; clip:auto; bottom:16px; left:50%; transform:translateX(-50%); z-index:6;
	font-family:"Inter",system-ui,sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--navy);
	background:var(--gold-lt); padding:.5rem .9rem; border-radius:100px; text-decoration:none; }

@media (max-width:860px){
	.fs-hero-reel__frame{ inset:calc(var(--fs-header-h) + 12px) 12px 12px; }
	.fs-hero-reel__corner{ width:76px; height:76px; }
	.fs-hero-reel__corner--tl,.fs-hero-reel__corner--tr{ top:calc(var(--fs-header-h) + 10px); }
	.fs-hero-reel__corner--tl,.fs-hero-reel__corner--bl{ left:10px; }
	.fs-hero-reel__corner--tr,.fs-hero-reel__corner--br{ right:10px; }
	.fs-hero-reel__corner--bl,.fs-hero-reel__corner--br{ bottom:10px; }
}
/* Mobile has a fixed Call/Text/Schedule action bar at the base — hide the hero trust row there so
   they never collide; the same proof (5.0 · 303 reviews) renders in the [fs_trust] intro just below. */
@media (max-width:640px){
	.fs-hero-reel__trust{ display:none; }
}
@media (prefers-reduced-motion:reduce){
	.fs-hero-reel__scrollcue,.fs-hero-reel .fs-btn{ transition:none!important; }
}

/* intro section — preserves the SEO/AIO answer + brand tagline formerly below the hero */
/* Post-hero intro: denser + seated (heading -> 2-col intro+visual -> trust carousel -> rating).
   Padding cut ~half so it no longer reads as empty canvas. */
.fs-home-intro{ text-align:center; padding-block:clamp(2.75rem,4vw,3.75rem); }
.fs-home-intro__tagline{ font-family:var(--serif-display); font-size:clamp(1.7rem,3.6vw,2.6rem); color:var(--navy); margin:0 0 1.6rem; font-weight:500; }
.fs-home-intro__tagline em{ color:var(--gold-text); font-style:italic; }
/* two-column intro so the answer no longer floats on empty white */
.fs-home-intro__row{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.75rem,4vw,3.25rem);
	align-items:center; text-align:left; margin:0 0 1.75rem; }
.fs-home-intro__text .fs-answer{ max-width:52ch; margin:0; font-size:1.05rem; }
/* real wash-floor proof, height-capped to the text column and cover-cropped (never stretched) */
.fs-home-intro__media img{ display:block; width:100%; height:clamp(320px,38vw,420px); object-fit:cover;
	border-radius:18px; box-shadow:0 18px 44px rgba(1,15,98,.18); }
@media (max-width:860px){
	.fs-home-intro__row{ grid-template-columns:1fr; gap:1.5rem; text-align:center; }
	.fs-home-intro__text .fs-answer{ margin-inline:auto; }
	.fs-home-intro__media{ max-width:400px; margin-inline:auto; }
}
/* the trust carousel + rating sit right below the intro, filling the section */
.fs-home-intro .fs-trust{ margin-top:.5rem; }

/* ===== Google Reviews section — custom navy+gold, data-driven (fs-reviews.php) ===== */
.fs-reviews .fs-eyebrow{ text-align:center; color:var(--gold-lt); }
.fs-reviews__h{ font-family:var(--serif-display); text-align:center; color:var(--cream); font-weight:500;
	font-size:clamp(1.9rem,4vw,3rem); line-height:1.1; margin:.3rem 0 0; }
.fs-reviews__grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.5rem,3vw,2.75rem); align-items:stretch; margin-top:clamp(1.75rem,3vw,2.75rem); }
@media (max-width:900px){ .fs-reviews__grid{ grid-template-columns:1fr; } }

/* left summary card */
.fs-reviews__summary{ text-align:center; padding:clamp(1.75rem,3vw,2.5rem) 1.5rem; border-radius:20px; display:flex; flex-direction:column; align-items:center; }
.fs-reviews__gline{ display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--on-navy); font-size:.95rem; }
.fs-reviews__biz{ font-size:.88rem; color:var(--powder); margin:.5rem 0 1.1rem; max-width:22ch; }
.fs-reviews__big{ font-family:var(--serif-display); font-size:clamp(3rem,6vw,4.25rem); line-height:1; color:var(--gold-lt); font-weight:600; margin-bottom:.35rem; }
.fs-rev-stars{ color:var(--gold-text); font-size:1.4rem; letter-spacing:.12em; line-height:1; display:inline-flex; }
.fs-reviews__summary .fs-rev-stars{ font-size:1.55rem;
	/* .fs-reviews__summary is .fs-glass--dark, so this one needs the LIGHT gold: --gold-text
	   is tuned for light surfaces and drops to 2.98:1 here. */
	color:var(--gold-lt); }
.fs-reviews__count{ margin:.65rem 0 1.4rem; color:var(--on-navy); font-size:.98rem; }
.fs-reviews__count b{ color:#fff; }
.fs-reviews__cta{ width:100%; max-width:280px; }
.fs-reviews__readall{ display:inline-block; margin-top:1rem; color:var(--gold-lt); font-size:.9rem; text-decoration:underline; }
.fs-reviews__readall:hover{ color:var(--cream); }
.fs-reviews__powered{ margin-top:1.1rem; font-size:.7rem; letter-spacing:.1em; color:rgba(234,241,250,.5); text-transform:uppercase; }

/* right carousel */
.fs-reviews__carousel{ --rev-shown:3; position:relative; min-width:0; }
.fs-reviews__viewport{ overflow:hidden; }
.fs-reviews__track{ display:flex; gap:1rem; margin:0; padding:0; list-style:none; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.fs-review-card{ flex:0 0 calc((100% - (var(--rev-shown) - 1) * 1rem) / var(--rev-shown)); box-sizing:border-box;
	background:var(--paper); color:var(--ink); border-radius:16px; padding:1.4rem; margin:0;
	display:flex; flex-direction:column; gap:.65rem; min-height:290px; box-shadow:0 12px 30px rgba(1,7,46,.28); }
.fs-review-card__head{ display:flex; align-items:center; gap:.7rem; }
.fs-review-card__avatar{ width:44px; height:44px; border-radius:50%; flex:0 0 44px; object-fit:cover; }
.fs-review-card__avatar--initials{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy),#12235f); color:var(--gold-lt); font-weight:700; font-size:1.02rem; letter-spacing:.02em; }
.fs-review-card__who{ flex:1; min-width:0; }
.fs-review-card__name{ font-weight:600; color:var(--navy); margin:0; line-height:1.2; }
.fs-review-card__meta{ font-size:.78rem; color:var(--ink-soft); margin:.1rem 0 0; }
.fs-review-card .fs-rev-stars{ font-size:1.05rem; color:var(--gold-text); }
.fs-review-card__body{ display:flex; flex-direction:column; gap:.4rem; }
.fs-review-card__text{ font-size:.92rem; line-height:1.55; color:var(--ink); margin:0; }
.fs-review-card__text.is-clamped{ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.fs-review-card__more{ align-self:flex-start; background:none; border:0; color:var(--navy); font-weight:600; font-size:.82rem; cursor:pointer; padding:0; text-decoration:underline; }
.fs-review-card__response{ margin-top:.3rem; padding:.7rem .9rem; background:var(--paper-warm); border-radius:10px; }
.fs-review-card__response-label{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--navy); }
.fs-review-card__response p{ margin:.25rem 0 0; font-size:.86rem; color:var(--ink-soft); }

.fs-reviews__controls{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.4rem; }
.fs-reviews__arrow{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(234,241,250,.35); background:transparent; color:var(--on-navy); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,border-color .2s; }
.fs-reviews__arrow:hover{ background:rgba(234,241,250,.12); border-color:var(--gold-lt); }
.fs-reviews__arrow:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:2px; }
.fs-reviews__dots{ display:flex; gap:.5rem; }
.fs-reviews__dots button{ width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgba(234,241,250,.3); cursor:pointer; transition:background .2s,transform .2s; }
.fs-reviews__dots button[aria-current="true"]{ background:var(--gold-lt); transform:scale(1.25); }
.fs-rev-g{ flex:0 0 auto; }
@media (max-width:900px){ .fs-reviews__carousel{ --rev-shown:1; } }
@media (prefers-reduced-motion:reduce){ .fs-reviews__track{ transition:none; } }

/* ===== Rug Care Guides — blog index (designed post-card grid + hero) ===== */
.fs-blog-hero{ position:relative; background:var(--navy-deep); color:var(--on-navy); overflow:hidden;
	background-image:var(--fs-hero-img); background-size:cover; background-position:center;
	/* clamp() alone tuned for the old short header put the H1 ~99px down, 1px under the new
	   two-tier nav; the max() guarantees header height + 32px of air at every viewport. */
	padding:max(clamp(5rem,11vh,8rem), calc(var(--fs-header-h) + 32px)) 0 clamp(3rem,6vw,4.5rem); text-align:center; }
.fs-blog-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(180deg, rgba(1,7,46,.74) 0%, rgba(1,7,46,.80) 50%, rgba(1,7,46,.88) 100%); }
.fs-blog-hero__inner{ position:relative; z-index:1; max-width:900px; margin-inline:auto; padding-inline:clamp(1.5rem,4vw,3rem); }
.fs-blog-hero h1{ font-family:var(--serif-display); font-weight:600; color:var(--cream); line-height:1.05;
	font-size:clamp(40px,5vw,72px); margin:0 0 1.1rem; text-shadow:0 2px 24px rgba(1,7,46,.55); }
.fs-blog-hero .fs-answer{ color:var(--powder); background:transparent; border:0; padding:0; margin-inline:auto;
	max-width:64ch; font-size:1.05rem; line-height:1.65; }

.fs-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.4vw,2rem); margin:clamp(2rem,4vw,3rem) 0; }
@media (max-width:1000px){ .fs-blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .fs-blog-grid{ grid-template-columns:1fr; } }
.fs-blog-card{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:var(--hairline);
	border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(1,15,98,.06); cursor:pointer;
	transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.fs-blog-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(1,15,98,.14); }
/* Whole-card link: the title anchor is the single real link (accessible name = post title); its
   ::after stretches over the whole .fs-blog-card so a click anywhere — image, excerpt, "Read guide"
   — navigates. Only .fs-blog-card is positioned, so the overlay spans the entire card. */
.fs-blog-card__title a::after{ content:""; position:absolute; inset:0; z-index:1; }
.fs-blog-card:hover .fs-blog-card__title a{ color:var(--gold-text); }
.fs-blog-card:focus-within{ outline:2px solid var(--gold); outline-offset:2px; }
.fs-blog-card__title a:focus-visible{ outline:none; }
.fs-blog-card__media{ display:block; overflow:hidden; }
.fs-blog-card__img{ display:block; width:100%; height:210px; object-fit:cover; background:var(--powder);
	transition:transform .5s var(--ease); }
.fs-blog-card:hover .fs-blog-card__img{ transform:scale(1.04); }
.fs-blog-card__body{ display:flex; flex-direction:column; gap:.55rem; padding:1.1rem 1.25rem 1.35rem; flex:1; }
.fs-blog-card__meta{ margin:0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink-soft); display:flex; gap:.6rem; align-items:center; }
.fs-blog-card__cat{ color:var(--gold-text); font-weight:700; }
.fs-blog-card__title{ font-family:var(--serif-display); font-weight:600; font-size:1.3rem; line-height:1.22; margin:0;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fs-blog-card__title a{ color:var(--navy); text-decoration:none; }
.fs-blog-card__title a:hover{ color:var(--gold-text); }
.fs-blog-card__excerpt{ margin:0; font-size:.94rem; line-height:1.55; color:var(--ink);
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fs-blog-card__more{ margin-top:auto; padding-top:.35rem; font-size:.82rem; font-weight:600; color:var(--gold-text); letter-spacing:.02em; }
@media (prefers-reduced-motion:reduce){ .fs-blog-card, .fs-blog-card__img{ transition:none; } .fs-blog-card:hover{ transform:none; } .fs-blog-card:hover .fs-blog-card__img{ transform:none; } }

/* ===== Real-photo proof gallery (Recent Projects / case studies — REAL images only) ===== */
.fs-proof-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; margin:2rem 0; }
.fs-proof-grid figure{ margin:0; background:var(--paper); border:var(--hairline); border-radius:var(--radius-card,14px); overflow:hidden; box-shadow:var(--shadow-sm,0 2px 10px rgba(1,15,98,.06)); }
.fs-proof-grid img{ display:block; width:100%; height:240px; object-fit:cover; background:var(--powder); }
.fs-proof-grid figcaption{ padding:.85rem 1rem 1rem; font-size:.92rem; line-height:1.5; color:var(--ink); }
.fs-proof-grid figcaption b{ color:var(--navy); font-weight:600; }
@media (max-width:640px){ .fs-proof-grid img{ height:200px; } }
/* real photo band inside content (process strips) */
.fs-photo-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.75rem 0; }
.fs-photo-strip figure{ margin:0; }
.fs-photo-strip img{ display:block; width:100%; height:170px; object-fit:cover; border-radius:12px; background:var(--powder); }
.fs-photo-strip figcaption{ margin-top:.5rem; font-size:.82rem; color:var(--ink); opacity:.85; text-align:center; }

/* ===== 404 cinematic backdrop (AI art-404, decorative) ===== */
.fs-404--art{ position:relative; isolation:isolate; color:var(--on-navy);
	background:var(--navy-deep) center/cover no-repeat;
	background-image:image-set(url(assets/img/ai/art-404-1200.webp) 1x);
	border-radius:0; padding:clamp(4rem,10vh,7rem) 1.5rem; overflow:hidden; }
.fs-404--art::before{ content:""; position:absolute; inset:0; z-index:-1;
	background:radial-gradient(120% 90% at 50% 40%, rgba(1,7,46,.62), rgba(1,7,46,.9)); }
.fs-404--art .fs-404__code{ color:var(--gold-lt); }
.fs-404--art .fs-eyebrow{ color:var(--gold-lt); }
.fs-404--art h1{ color:var(--cream); }
.fs-404--art .fs-lede{ color:var(--powder); }
@media(max-width:640px){ .fs-404--art{ background-image:image-set(url(assets/img/ai/art-404-800.webp) 1x); } }

/* Build-time marker: a proof slot that needs a REAL photo the owner must supply (never fill with AI). */
.fs-photo-needed{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
	min-height:220px; margin:1.75rem 0; padding:1.5rem; gap:.5rem;
	border:2px dashed var(--gold); border-radius:14px; background:rgba(176,141,74,.06); color:var(--ink); }
.fs-photo-needed b{ color:var(--navy); letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; }
.fs-photo-needed span{ font-size:.85rem; opacity:.8; max-width:44ch; }

/* AI section band — quiet woven-geometric texture behind the indigo process chapter (atmosphere only). */
.fs-section--indigo::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	opacity:.12; mix-blend-mode:soft-light;
	background:url(assets/img/ai/band-weave-geometric-1600.webp) center/cover no-repeat; }
@media (max-width:800px){ .fs-section--indigo::after{ background-image:url(assets/img/ai/band-weave-geometric-800.webp); } }

/* =========================================================================
   FALLBACK ARCHIVES — search results, category/author archives (index.html,
   search.html). These previously rendered through a bare, undesigned template:
   no hero, no H1, no bands. They now reuse the interior page-hero + section
   system. Selectors are scoped to blocks that exist ONLY on those templates,
   so nothing on the canonical page/post set is affected.
   ========================================================================= */
.fs-page-hero .wp-block-query-title {
	color:var(--wool-white); margin:0; max-width:18ch; font-size:clamp(56px,5.5vw,96px);
	font-family:var(--serif-display); font-weight:600; line-height:1.02;
}
.fs-page-hero .fs-archive-sub { color:var(--powder); margin:.9rem 0 0; max-width:56ch; }

/* Archive card grid — mirrors .fs-blog-grid rhythm using core query-loop markup. */
.fs-archive-grid { display:grid; grid-template-columns:repeat(3,1fr);
	gap:clamp(1.25rem,2.4vw,2rem); margin:clamp(2rem,4vw,3rem) 0; padding:0; list-style:none; }
@media (max-width:1000px){ .fs-archive-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .fs-archive-grid{ grid-template-columns:1fr; } }
.fs-archive-grid > li { display:flex; flex-direction:column; background:var(--paper);
	border:var(--hairline); border-radius:var(--radius-card); overflow:hidden;
	transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.fs-archive-grid > li:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(1,15,98,.14); }
/* Cards are text-only on purpose: only 2 of the 27 posts carry a featured image, so a
   media slot would render a lopsided grid of mostly-empty cards. A gold rule stands in
   for the image moment and keeps every card identical. */
.fs-archive-grid > li { border-top:3px solid var(--brass); padding-top:.35rem; }
.fs-archive-grid .wp-block-post-title { margin:1.1rem 1.25rem .4rem; font-size:1.15rem; line-height:1.25; }
.fs-archive-grid .wp-block-post-title a { text-decoration:none; color:var(--navy); }
.fs-archive-grid .wp-block-post-title a:hover { color:var(--gold-text); }
.fs-archive-grid .wp-block-post-excerpt { margin:0 1.25rem 1.25rem; color:var(--ink-soft); font-size:.95rem; }

/* Pagination + empty state */
.fs-archive-pagination { display:flex; gap:.75rem; justify-content:center;
	margin:clamp(2rem,4vw,3rem) 0 0; flex-wrap:wrap; }
.fs-archive-empty { max-width:62ch; margin:clamp(2rem,4vw,3rem) auto; text-align:center; }

/* =========================================================================
   FORM PANEL — the pickup/contact form previously sat as a bare <form> on the
   flat page background with no card, on what is the site's primary conversion
   page. Seat it in the same paper card the rest of the system uses.
   ========================================================================= */
.fs-form-panel{ background:var(--paper); border:var(--hairline); border-radius:var(--radius-card);
	padding:clamp(1.5rem,3.5vw,2.75rem); margin-block:clamp(2rem,4vw,3rem);
	box-shadow:var(--shadow-sm); }
.fs-form-panel > h2{ margin-top:0; }
.fs-form-panel .fs-lede{ max-width:64ch; }
.entry-content.is-layout-constrained > .fs-form-panel{
	max-width:var(--wp--style--global--wide-size,1320px); }

/* Bare .fs-card (content directly inside, no .fs-card__body wrapper) had NO padding — the
   padding only ever lived on .fs-card__body, so hand-authored cards rendered their text
   flush against the border. Give those cards the same inset; cards that DO use __body are
   excluded so their padding is never doubled. */
.fs-card:not(:has(.fs-card__body)):not(:has(.fs-card__media)) { padding:1.15rem 1.3rem; }

/* =========================================================================
   RUGS WE'VE CLEANED: filterable REAL before/after gallery on the homepage.
   Rendered by [fs_rug_gallery] from wp-content/mu-plugins/fs-gallery-data.php
   (real photos only; the sliders reuse the .fs-ba component). Chips are real
   buttons that filter the grid; chips whose rug type has a service page carry
   an attached arrow link to it (crawlable hub-to-spoke internal links).
   ========================================================================= */
.fs-rgal__chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem .6rem; margin:1.7rem 0 2.1rem; }
.fs-rgal__chipwrap{ display:inline-flex; align-items:stretch; }
.fs-rgal__chip{ font-family:inherit; font-size:.82rem; font-weight:600; letter-spacing:.04em; line-height:1;
	color:var(--ink); background:#fff; border:1px solid rgba(1,15,98,.3); border-radius:100px;
	padding:.62rem 1.05rem; cursor:pointer; min-height:38px; transition:background .2s, color .2s, border-color .2s; }
.fs-rgal__chipwrap.has-link .fs-rgal__chip{ border-radius:100px 0 0 100px; border-right:0; padding-right:.8rem; }
.fs-rgal__chiplink{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:38px;
	border:1px solid rgba(1,15,98,.3); border-left:1px solid rgba(1,15,98,.16); border-radius:0 100px 100px 0;
	background:#fff; color:var(--navy); transition:background .2s, color .2s, border-color .2s; }
.fs-rgal__chip:hover,.fs-rgal__chiplink:hover{ border-color:var(--navy); }
.fs-rgal__chiplink:hover{ background:var(--powder); }
/* active chip: gold fill with the dark-bronze text the gold CTAs use (AA on gold; never gold text) */
.fs-rgal__chip.is-on{ background:linear-gradient(135deg,var(--gold-lt),var(--gold)); border-color:var(--gold); color:#2A1E06; }
.fs-rgal__chip:focus-visible,.fs-rgal__chiplink:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* Gallery wall: 3-up desktop, 2-up tablet, 1-up phones. Uniform 4/3 media reserves every
   card's height up front (CLS 0): portrait photos center-crop via cover, the slider layers
   already cover-fit any box. */
.fs-rgal__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.2vw,1.75rem); align-items:start; }
@media (max-width:1023px){ .fs-rgal__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px){ .fs-rgal__grid{ grid-template-columns:1fr; } }
.fs-rgal__item{ position:relative; margin:0; min-width:0; }
.fs-rgal__item .fs-ba-wrap{ margin:0; }
.fs-rgal__card{ background:#fff; border:var(--hairline); border-radius:var(--radius-card-lg); overflow:hidden;
	box-shadow:0 2px 12px rgba(1,15,98,.06); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover:hover){
	.fs-rgal__card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(1,15,98,.13); }
	.fs-rgal__card:hover .fs-rgal__media img{ transform:scale(1.04); }
}
.fs-rgal__media{ display:block; aspect-ratio:4/3; overflow:hidden; }
.fs-rgal__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--ease); }
.fs-rgal__card .fs-ba{ aspect-ratio:4/3; border:0; border-radius:0; }
.fs-rgal__card .fs-ba-wrap{ border-radius:0; }
/* category eyebrow tag, top-left over the media (cream on navy scrim, same family as the
   BEFORE/AFTER badges; sits above the slider layers but never intercepts its pointer) */
.fs-rgal__cat{ position:absolute; top:.6rem; left:.6rem; z-index:3; pointer-events:none;
	font-family:"Inter",system-ui,sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.16em;
	text-transform:uppercase; color:var(--cream); background:rgba(1,15,98,.68); padding:.28rem .55rem;
	border-radius:var(--radius-pill); }
/* refined caption inside the card body */
.fs-rgal__card .fs-ba__caption{ margin:0; padding:.75rem .95rem .85rem; font-size:.86rem; line-height:1.5; color:var(--ink-soft); }

/* Branded placeholder tile: navy field, decorative navy-and-gold art at low opacity under a
   navy veil, the rug type in the display serif, and an unmissable "Photos coming soon" tag,
   so it can never read as a photographed customer rug. Cream text only (no gold text). */
.fs-rgal__ph{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
	aspect-ratio:4/3; border-radius:var(--radius-card-lg); overflow:hidden; text-decoration:none;
	background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); border:1px solid rgba(228,203,139,.35);
	box-shadow:0 2px 12px rgba(1,15,98,.08); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover:hover){ .fs-rgal__ph:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(1,15,98,.16); } }
.fs-rgal__ph-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; }
.fs-rgal__ph-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(1,7,46,.5) 0%,rgba(1,7,46,.78) 100%); }
.fs-rgal__ph-body{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:1rem; }
.fs-rgal__ph-name{ font-family:var(--serif-display); font-weight:600; font-size:clamp(1.35rem,1.8vw,1.7rem); line-height:1.15; color:var(--cream); }
.fs-rgal__ph-tag{ font-family:"Inter",system-ui,sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.16em;
	text-transform:uppercase; color:var(--cream); border:1px solid rgba(228,203,139,.55); border-radius:var(--radius-pill);
	padding:.34rem .75rem; }
.fs-rgal__ph:hover .fs-rgal__ph-tag{ border-color:var(--gold-lt); }
.fs-rgal__ph:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

.fs-rgal__empty{ max-width:640px; margin:0 auto; text-align:center; padding:2.4rem 1.4rem;
	background:var(--paper-warm); border:1px dashed rgba(1,15,98,.3); border-radius:var(--radius-card-lg);
	color:var(--ink-soft); font-size:1rem; line-height:1.6; }
.fs-rgal__empty a{ color:var(--navy); font-weight:600; }
@media (prefers-reduced-motion:reduce){
	.fs-rgal__chip,.fs-rgal__chiplink,.fs-rgal__card,.fs-rgal__ph,.fs-rgal__media img{ transition:none; }
	.fs-rgal__card:hover,.fs-rgal__ph:hover{ transform:none; }
	.fs-rgal__card:hover .fs-rgal__media img{ transform:none; }
}

/* Accurate reserve for the gallery section: the global .fs-section placeholder is 620px, and
   this section renders ~1860px at desktop and ~2740px at 390, so the first scroll-past would
   shift a frame. A close estimate keeps the reveal shift at ~0 (auto remembers the real size
   after first render). Re-tune if the item count changes a lot. */
#fs-rgal{ contain-intrinsic-size:auto 2100px; }
@media (max-width:640px){ #fs-rgal{ contain-intrinsic-size:auto 4090px; } }

/* ---- FAQ open/H2 mode (contact page): question-H2s with the answer visible beneath ---- */
.fs-faq--h2 .fs-faq__q h2{ display:inline; margin:0; font-size:1.3rem; line-height:1.35;
	font-weight:600; color:var(--navy); }
/* One column: open answers in two CSS columns would break mid-answer. */
.entry-content .fs-faq--h2 .fs-faq__list{ columns:1; max-width:820px; }
.fs-faq--h2 .fs-faq__a{ max-width:72ch; }

/* ---- Intent-switch callout (ship <-> pickup cross-links) ---- */
/* One line near the top of each transactional page routing the other intent to its page.
   Navy text/link on the warm paper surface, both far clear of AA. */
.fs-intent-switch{ background:var(--paper-warm); border:var(--hairline); border-radius:12px;
	padding:.85rem 1.15rem; font-weight:500; max-width:70ch; }
.fs-intent-switch a{ color:var(--navy); font-weight:600; }

/* ============================ Heritage estate footer (.fs-foot) ============================ */
/* One composed unit on the navy field: masthead (crest + signature + trust), badge row, gold
   hairlines, functional grid with eyebrow headings, framed map card, legal bar. Cream carries
   an opacity hierarchy (headings brightest, links muted, hover to full cream or gold); gold is
   accent only. Cream at .72 on navy still clears 9:1, gold #B08D4A on navy is 5.7:1, gold-lt
   is ~13:1, all past AA. Hovers are transform/opacity/color only (CLS 0) and switch off under
   prefers-reduced-motion. The crest watermark is a 5%-opacity brand ghost, never content. */
.fs-foot{ position:relative; overflow:hidden; padding:clamp(3.5rem,6vw,5.5rem) 0 0; }
.fs-foot__inner{ position:relative; z-index:1; max-width:1480px; margin:0 auto;
	padding-inline:clamp(1.5rem,4vw,3rem); }
/* Centered woven ghost: large, horizontally centered, vertically centered behind the
   middle tiers, fully contained (the old corner placement overhung the footer edge and
   read as accidentally cropped). The source is already the white high-res crest. */
.fs-foot__watermark{ position:absolute; z-index:0; left:50%; top:50%;
	transform:translate(-50%,-50%); width:min(820px,86vw); height:auto;
	opacity:.05; pointer-events:none; user-select:none; }

/* ---- tier 1: masthead ---- */
.fs-foot__mast{ display:flex; align-items:flex-end; justify-content:space-between;
	gap:2rem 3rem; flex-wrap:wrap; }
.fs-foot__brand{ display:flex; flex-direction:column; gap:.8rem; }
/* align-self:flex-start keeps the column-flex parent from stretching the img to the
   brand block's width (that stretch + the fixed height was literally distorting the
   crest to ~4.9:1 against the art's 1.34:1). Never pin both dimensions here. */
.fs-foot__crest{ height:80px; width:auto; align-self:flex-start; filter:brightness(0) invert(0.94); }
.fs-foot__sig{ margin:0; font-family:"Cormorant Garamond","Fraunces",serif; font-weight:500;
	font-size:clamp(1.7rem,2.4vw,2.25rem); line-height:1.15; letter-spacing:.005em; color:var(--cream); }
.site-footer .fs-foot__sig em{ font-style:italic; color:var(--gold-lt); }
.fs-foot__trust{ text-align:right; display:flex; flex-direction:column; gap:.45rem; }
.fs-foot__trust p{ margin:0; font-size:.9rem; color:var(--cream); opacity:.78; }
.site-footer a.fs-foot__rating{ display:inline-flex; align-items:baseline; gap:.45rem;
	justify-content:flex-end; text-decoration:none; font-weight:600; font-size:1.02rem;
	color:var(--cream); transition:color .25s; }
.site-footer a.fs-foot__rating:hover{ color:var(--gold-lt); }
.site-footer .fs-foot__stars{ color:var(--gold-lt); letter-spacing:.12em; font-size:.92rem; }
.fs-foot__ratingsub{ font-weight:400; font-size:.88rem; opacity:.78; }

/* ---- badge row ---- */
.fs-foot__badges{ list-style:none; display:flex; flex-wrap:wrap; align-items:center;
	gap:.9rem; margin:2.25rem 0 0; padding:0; }
.fs-foot__badges a{ display:flex; align-items:center; justify-content:center; width:58px; height:58px;
	background:rgba(245,239,225,.94); border:1px solid rgba(176,141,74,.35); border-radius:12px;
	padding:6px; transition:transform .25s var(--ease), border-color .25s; }
.fs-foot__badges img{ width:100%; height:100%; object-fit:contain; display:block; }
.fs-foot__badges a:hover{ transform:translateY(-3px); border-color:var(--gold-lt); }

/* ---- gold hairline rules ---- */
.fs-foot__rule{ height:1px; margin:2.5rem 0;
	background:linear-gradient(90deg, transparent, rgba(176,141,74,.5) 18%, rgba(176,141,74,.5) 82%, transparent); }

/* ---- tier 2: functional grid ---- */
.fs-foot__grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:2.5rem 2.75rem; }
.site-footer .fs-foot__eyebrow{ margin:0 0 1.1rem; font-family:"Inter",system-ui,sans-serif; font-weight:600;
	font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); }
.fs-foot__col ul{ list-style:none; margin:0; padding:0; }
.fs-foot__col li{ margin:.55rem 0; }
.site-footer .fs-foot__col a:not(.fs-btn){ position:relative; display:inline-block; text-decoration:none;
	color:var(--cream); opacity:.75; transition:opacity .25s, color .25s; }
.site-footer .fs-foot__col a:not(.fs-btn)::after{ content:""; position:absolute; left:0; bottom:-2px;
	width:100%; height:1px; background:var(--gold-lt); transform:scaleX(0); transform-origin:left;
	transition:transform .3s var(--ease); }
.site-footer .fs-foot__col a:not(.fs-btn):hover{ opacity:1; color:var(--gold-lt); }
.site-footer .fs-foot__col a:not(.fs-btn):hover::after{ transform:scaleX(1); }
.fs-foot__col + .fs-foot__col{ border-left:1px solid rgba(176,141,74,.16); padding-left:2.5rem; }
.fs-foot__addr{ margin:0 0 1rem; line-height:1.65; color:var(--cream); opacity:.92; }
.fs-foot__phone{ margin:0 0 .5rem; }
.site-footer .fs-foot__phone a{ font-family:"Cormorant Garamond","Fraunces",serif; font-weight:600;
	font-size:1.85rem; letter-spacing:.01em; text-decoration:none; color:var(--cream); transition:color .25s; }
.site-footer .fs-foot__phone a:hover{ color:var(--gold-lt); }
.fs-foot__line{ margin:.4rem 0; font-size:.95rem; }
.fs-foot__hours{ color:var(--cream); opacity:.78; }
.fs-foot__cta{ margin:1.4rem 0 0; }
.fs-foot__cta .fs-btn{ white-space:nowrap; padding-inline:1.3rem; }
.fs-foot__social{ display:flex; gap:.875rem; margin-top:1.3rem; }
/* selectors carry .fs-foot__grid so they outrank the column-link rule
   (.site-footer .fs-foot__col a:not(.fs-btn)), which otherwise forces
   display:inline-block and its underline onto the rings, breaking centering */
.site-footer .fs-foot__grid .fs-foot__social a{ display:inline-flex; align-items:center; justify-content:center;
	width:46px; height:46px; border:1px solid rgba(245,239,225,.3); border-radius:50%;
	color:var(--cream); opacity:.92; transition:transform .25s var(--ease), border-color .25s, color .25s, opacity .25s; }
.site-footer .fs-foot__grid .fs-foot__social a::after{ content:none; }
/* glyphs carry their own fill/stroke attributes (shared with the utility bar) */
.fs-foot__social svg{ display:block; }
.site-footer .fs-foot__grid .fs-foot__social a:hover{ transform:translateY(-2px); border-color:var(--gold-lt);
	color:var(--gold-lt); opacity:1; }

/* ---- tier 3: framed map card ---- */
.fs-foot__mapcard{ display:grid; grid-template-columns:1.15fr 1fr; margin-top:2.5rem;
	border:1px solid rgba(176,141,74,.35); border-radius:12px; overflow:hidden;
	background:rgba(245,239,225,.04); }
.fs-foot__mapembed{ aspect-ratio:16/9; min-height:100%; }
.fs-foot__mapembed iframe{ display:block; width:100%; height:100%; border:0; }
.fs-foot__mapinfo{ padding:clamp(1.5rem,2.5vw,2.5rem); display:flex; flex-direction:column;
	justify-content:center; gap:.4rem; }
.fs-foot__mapline{ margin:0 0 .9rem; color:var(--cream); opacity:.8; max-width:34ch; }
.fs-foot__maplinks{ list-style:none; margin:0; padding:0; }
.fs-foot__maplinks li{ margin:.65rem 0; }
.site-footer .fs-foot__maplinks a{ display:inline-flex; align-items:center; gap:.55rem;
	text-decoration:none; font-weight:600; color:var(--gold-lt); transition:color .25s; }
.site-footer .fs-foot__maplinks a:hover{ color:var(--cream); }
.fs-foot__maplinks svg{ flex:0 0 auto; stroke:currentColor; stroke-width:1.7;
	stroke-linecap:round; stroke-linejoin:round; }

/* ---- tier 4: legal bar ---- */
.fs-foot__legal{ display:flex; align-items:center; justify-content:space-between; gap:.75rem 2rem;
	flex-wrap:wrap; margin-top:2.5rem; padding:1.4rem 0 1.6rem;
	border-top:1px solid rgba(176,141,74,.22); }
.fs-foot__legal p{ margin:0; font-size:.8125rem; color:var(--cream); opacity:.6; }
.fs-foot__legal-links{ display:flex; gap:1.4rem; }
.site-footer .fs-foot__legal-links a{ color:inherit; text-decoration:none; transition:color .25s; }
.site-footer .fs-foot__legal-links a:hover{ color:var(--gold-lt); }
.site-footer .fs-foot__legal a:focus-visible{ opacity:1; }

/* ---- responsive ---- */
@media (max-width:1080px){
	.fs-foot__grid{ grid-template-columns:1fr 1fr; }
	.fs-foot__col + .fs-foot__col{ border-left:0; padding-left:0; }
	.fs-foot__col--visit{ grid-column:1 / -1; }
	.fs-foot__mapcard{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
	.fs-foot__mast{ flex-direction:column; align-items:center; text-align:center; }
	.fs-foot__trust{ text-align:center; align-items:center; }
	.fs-foot__badges{ justify-content:center; }
	.fs-foot__badges a{ width:52px; height:52px; }
	.fs-foot__grid{ grid-template-columns:1fr; gap:2.25rem; }
	.fs-foot__brand{ align-items:center; }
	.fs-foot__crest{ align-self:center; }
	.fs-foot__mapcard{ grid-template-columns:1fr; }
	.fs-foot__mapembed{ aspect-ratio:16/10; min-height:0; }
	.fs-foot__legal{ flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
	.fs-foot__badges a, .site-footer .fs-foot__social a, .site-footer .fs-foot__col a:not(.fs-btn),
	.site-footer .fs-foot__col a:not(.fs-btn)::after, .site-footer .fs-foot__maplinks a,
	.site-footer .fs-foot__phone a, .site-footer a.fs-foot__rating, .site-footer .fs-foot__legal-links a{ transition:none; }
	.fs-foot__badges a:hover, .site-footer .fs-foot__social a:hover{ transform:none; }
}

/* ============================ Team grid (About) ============================ */
/* Six equal cards, real filename-matched headshots at 4:5, name + gold-text nickname
   (the AA-safe --gold-text token, never raw gold on the white card), small-caps role,
   condensed bio. The Floyd card keeps the identical layout with a navy crest placeholder
   in the photo slot, so his headshot drops in later with zero layout change. */
.fs-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:2.5rem 0; }
.fs-team__card{ background:#fff; border:var(--hairline); border-radius:var(--radius-card);
	overflow:hidden; box-shadow:0 2px 10px rgba(1,15,98,.05); }
.fs-team__photo{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.fs-team__photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.fs-team__ph{ display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:1.1rem; background:linear-gradient(180deg,var(--navy),var(--navy-deep)); }
.fs-team__ph img{ width:44%; height:auto; filter:brightness(0) invert(0.92); opacity:.85; object-fit:contain; }
.fs-team__ph-tag{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
	color:var(--cream); border:1px solid rgba(228,203,139,.5); border-radius:999px; padding:.32rem .85rem; }
.fs-team__body{ padding:1.35rem 1.5rem 1.6rem; }
.fs-team__name{ margin:0; font-size:1.08rem; }
.fs-team__nick{ margin:.15rem 0 .35rem; font-family:"Cormorant Garamond","Fraunces",serif;
	font-style:italic; font-weight:500; font-size:1.35rem; color:var(--gold-text); }
.fs-team__role{ margin:0; font-size:11px; font-weight:600; letter-spacing:.16em;
	text-transform:uppercase; color:var(--ink-soft); }
.fs-team__bio{ margin:.85rem 0 0; font-size:.95rem; line-height:1.65; color:var(--ink-soft); }
.fs-team-band{ margin:clamp(2rem,4vw,3rem) 0 1rem; }
.fs-team-band img{ width:100%; height:auto; border-radius:var(--radius-img); display:block; }
.fs-team-band figcaption{ margin-top:.6rem; }
@media (max-width:1080px){ .fs-team{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .fs-team{ grid-template-columns:1fr; } }

/* ============================ Header: equal gaps flanking the crest ============================ */
/* Top state only. The row is grid 1fr auto 1fr; the left rail used to align flex-start, so
   its leftover track space piled up between Service Areas and the logo (134px) while the
   packed right rail hugged it (34px). Both rails now hug the logo column and the crest
   carries identical side margins, so gap-left == gap-right (grid gap + 14px each side, about
   46px at 1440). The crest sits a touch off true viewport center because the groups differ
   in width; equal breathing room wins over mathematical centering. Within-group gaps, fonts,
   carets, the truck CTA position, and the scrolled left-logo compact bar are untouched. */
@media (min-width:1025px){
	.fs-header--crest:not(.is-scrolled) .fs-nav--left{ justify-self:end; justify-content:flex-end; }
	.fs-header--crest:not(.is-scrolled) .fs-nav--right{ justify-self:start; justify-content:flex-start; }
	.fs-header--crest:not(.is-scrolled) .fs-crest{ margin-inline:14px; }
}

/* ---- Housecall Pro chat bubble vs the sticky mobile action bar ---- */
/* proChat pins its container to bottom:0 inline; at phone widths that covers the
   Schedule button on the fixed action bar, so lift the bubble above it. */
@media (max-width:640px){
	#proChatIframeContainer{ bottom:76px !important; }
}

/* ============================ Certifications: framed certificate documents ============================ */
/* Real scanned certificates displayed as documents, not badges: a paper mat inside a hairline
   frame, soft shadow, caption below. The whole image links to the 1200px original (keyboard
   operable, opens in a new tab); the focus ring uses the sitewide navy token. */
.fs-certdoc-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; margin:1.75rem 0; }
.fs-certdoc{ margin:0; background:var(--paper); border:var(--hairline); border-radius:var(--radius-img);
	padding:.9rem; box-shadow:0 10px 28px rgba(1,15,98,.07); }
.fs-certdoc__zoom{ display:block; border-radius:6px; }
.fs-certdoc__zoom:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.fs-certdoc img{ display:block; width:100%; height:auto; border:1px solid var(--powder); border-radius:4px; background:#fff; }
.fs-certdoc figcaption{ margin-top:.65rem; font-size:.85rem; color:var(--ink-soft); text-align:center; line-height:1.45; }
.fs-verify{ background:var(--paper-warm); border-left:3px solid var(--navy); border-radius:0 10px 10px 0;
	padding:.8rem 1.1rem; max-width:62ch; }
.fs-checklist{ padding-left:1.2rem; }
.fs-checklist li{ margin:.45rem 0; color:var(--ink); line-height:1.65; }
/* "View our certifications" line under the cert-badge carousel label (links to /certifications/). */
.fs-cert-band__more{ margin:.55rem 0 0; text-align:center; font-size:.85rem; }
.fs-cert-band__more a{ color:var(--navy); }

/* ============================ Multi-step quote form (/get-a-quote/) ============================ */
/* Progressive enhancement: with no JS the form is one long labeled document (all steps
   visible, progress bar hidden, single submit). The parse-time fs-qf--js class hides
   steps 2 to 5 before first paint (zero CLS), and is-ready hands control to the stepper. */
.fs-qf{ background:var(--paper); border:var(--hairline); border-radius:var(--radius-card);
	padding:clamp(1.2rem,3vw,2rem); margin:1.75rem 0; }
.fs-qf__hp{ position:absolute; left:-9999px; }
.fs-qf [hidden]{ display:none !important; }

.fs-qf__progress{ display:none; }
.fs-qf--js .fs-qf__progress{ display:block; margin:0 0 1.4rem; }
.fs-qf__count{ margin:0 0 .6rem; font-size:.9rem; color:var(--ink-soft); }
.fs-qf__count b{ color:var(--ink); }
.fs-qf__dots{ list-style:none; display:flex; gap:.4rem; margin:0; padding:0; }
.fs-qf__dots li{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem;
	padding-top:.55rem; border-top:3px solid var(--powder); color:var(--ink-soft); font-size:.78rem; }
.fs-qf__dots li[aria-current="step"]{ border-top-color:var(--navy); color:var(--ink); font-weight:600; }
.fs-qf__dots li.is-done{ border-top-color:var(--gold); }
.fs-qf__dotnum{ display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%;
	border:1.5px solid currentColor; font-size:.72rem; }
@media (max-width:640px){ .fs-qf__dotlabel{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }

.fs-qf__step{ border:0; padding:0; margin:0 0 2.2rem; min-inline-size:0; }
.fs-qf__step legend{ font-family:'Fraunces',serif; font-size:clamp(1.25rem,2.4vw,1.55rem);
	color:var(--navy); padding:0; margin:0 0 .5rem; }
.fs-qf__step legend:focus{ outline:none; }
.fs-qf__stepno{ display:block; font-family:inherit; font-size:.78rem; letter-spacing:.08em;
	text-transform:uppercase; color:var(--gold-text); font-weight:600; margin-bottom:.15rem; }
.fs-qf--js .fs-qf__step{ margin-bottom:0; }
.fs-qf--js .fs-qf__step:not([data-step="1"]){ display:none; }
.fs-qf--js.is-ready .fs-qf__step{ display:none; }
.fs-qf--js.is-ready .fs-qf__step.is-active{ display:block; animation:fs-qf-in .28s ease; }
@keyframes fs-qf-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .fs-qf--js.is-ready .fs-qf__step.is-active{ animation:none; } }
.fs-qf--js:not(.is-ready) .fs-qf__rug:not([data-rug="1"]){ display:none; }
.fs-qf--js:not(.is-ready) .fs-qf__damage{ display:none; }

.fs-qf__hint{ color:var(--ink-soft); max-width:64ch; margin:.2rem 0 1.1rem; }
.fs-qf__opt{ font-size:.85em; font-weight:400; color:var(--ink-soft); }
.fs-qf__rug{ border-top:var(--hairline); padding-top:1rem; margin-top:1rem; }
.fs-qf__rughead{ margin:0 0 .7rem; font-size:1.02rem; }
.fs-qf__row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:flex-end; margin:0 0 .9rem; }
.fs-qf__field{ display:block; flex:1 1 220px; font-size:.95rem; color:var(--ink); }
.fs-qf__field--narrow{ flex:0 1 150px; }
.fs-qf__field input, .fs-qf__field select, .fs-qf__field textarea{
	display:block; width:100%; margin-top:.35rem; padding:.6rem .7rem;
	border:1.5px solid var(--powder); border-radius:var(--radius-input);
	font:inherit; color:var(--ink); background:#fff; }
.fs-qf__field input:focus-visible, .fs-qf__field select:focus-visible, .fs-qf__field textarea:focus-visible,
.fs-qf__check input:focus-visible, .fs-qf__card input:focus-visible{
	outline:3px solid var(--focus-ring); outline-offset:2px; }
.fs-qf__x{ padding-bottom:.7rem; color:var(--ink-soft); }
.fs-qf__check{ display:inline-flex; gap:.45rem; align-items:center; padding-bottom:.55rem; font-size:.95rem; }
.fs-qf__req{ color:var(--gold-text); margin-left:.15rem; }

.fs-qf__cards{ list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
	gap:.6rem; margin:0 0 1rem; padding:0; }
.fs-qf__cards--sm{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.fs-qf__cards--stack{ grid-template-columns:1fr; max-width:640px; }
.fs-qf__card{ display:flex; gap:.6rem; align-items:flex-start; padding:.7rem .8rem; cursor:pointer;
	border:1.5px solid var(--powder); border-radius:10px; background:#fff; font-size:.93rem;
	line-height:1.45; transition:border-color .15s ease, background .15s ease; }
.fs-qf__card:hover{ border-color:var(--navy); }
.fs-qf__card input{ margin-top:.18rem; accent-color:var(--navy); flex:none; }
.fs-qf__card:has(input:checked){ border-color:var(--navy); background:var(--paper-warm); }
@media (prefers-reduced-motion:reduce){ .fs-qf__card{ transition:none; } }
.fs-qf__sublabel{ margin:.2rem 0 .5rem; font-weight:600; font-size:.92rem; }
.fs-qf__damage{ border-left:3px solid var(--powder); padding-left:1rem; margin:.4rem 0 .6rem; }

.fs-qf__previews{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin:.6rem 0 0;
	padding:0; min-height:8px; }
.fs-qf__previews li{ display:flex; gap:.5rem; align-items:center; font-size:.8rem; color:var(--ink-soft);
	border:var(--hairline); border-radius:8px; padding:.35rem .55rem .35rem .35rem; max-width:230px; }
.fs-qf__previews li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fs-qf__previews img{ width:72px; height:72px; object-fit:cover; border-radius:6px; flex:none; }
.fs-qf__previews li.is-too-big{ border-color:#E04E2C; color:#8C2F16; padding:.5rem .7rem; }

.fs-qf__err{ color:#8C2F16; background:#FBEAE4; border-radius:8px; padding:.6rem .8rem; margin:.6rem 0 0; }
.fs-qf__privacy{ font-size:.85rem; color:var(--ink-soft); margin:.9rem 0 .4rem; }
.fs-qf__nav{ display:none; }
.fs-qf--js .fs-qf__nav{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:1.2rem; }
.fs-qf__nav--last{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:1.2rem; }
.fs-qf__or{ font-size:.92rem; color:var(--ink-soft); }
.entry-content.is-layout-constrained > .fs-qf{ max-width:860px; }

/* Gallery fiber line: material links under the chip row (Wool/Silk/Antique chips retired
   2026-09; their service-page links live here instead). */
.fs-rgal__fiberline{ text-align:center; font-size:.9rem; color:var(--ink-soft); margin:.9rem auto 0; max-width:62ch; }
.fs-rgal__fiberline a{ color:var(--navy); }

/* Process cards: curated-subset step chips ("Step 4 of 10") so the visible 6-of-10
   numbering reads intentional, never like missing steps. Base color is the AA-on-light
   gold token; the indigo process section (the only place chips render today) upgrades
   to the bright gold that is AA on navy, same scoping pattern as .fs-numeral above. */
.fs-pcard__body .fs-numeral--chip{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
	font-weight:600; font-family:"Inter",system-ui,sans-serif; color:var(--gold-text); margin-bottom:.45rem; }
.fs-section--indigo .fs-pcard__body .fs-numeral--chip{ color:var(--gold-lt); }

/* ============================ Lazy-load skeleton (no more bare-white boxes) ============================ */
/* While a lazy photo is still fetching, its reserved box shows a soft navy-tinted shimmer
   instead of blank white. Scoped to opaque photo slots only (never badge/logo images with
   transparency). Photos paint over the tint, so nothing shows once loaded. */
.fs-rgal__media, .fs-card__media, .fs-pcard__media,
.fs-photo-strip figure img, .fs-media img, .fs-ba__img,
.fs-rgal__media img, .fs-card__media img, .fs-pcard__media img{
	background-color:var(--paper-warm);
	background-image:linear-gradient(100deg, rgba(213,228,245,0) 38%, rgba(213,228,245,.85) 50%, rgba(213,228,245,0) 62%);
	background-size:220% 100%;
	animation:fs-skeleton 1.6s linear infinite;
}
@keyframes fs-skeleton{ from{ background-position:130% 0; } to{ background-position:-90% 0; } }
@media (prefers-reduced-motion:reduce){
	.fs-rgal__media, .fs-card__media, .fs-pcard__media,
	.fs-photo-strip figure img, .fs-media img, .fs-ba__img,
	.fs-rgal__media img, .fs-card__media img, .fs-pcard__media img{ animation:none; background-image:none; }
}

/* ============================ Rhythm: band-to-section seam ============================ */
/* A full-bleed band followed by a section used to stack the band's 64px margin, a stray
   wpautop empty <p>, and the section's full 104px top padding (~190px of dead white).
   Collapse the stray paragraph and halve the following section's lead-in. */
.fs-band + p:empty{ display:none; margin:0; }
.fs-band + .fs-section, .fs-band + p:empty + .fs-section{ padding-block-start:clamp(2rem,4vw,3rem); }

/* Skeleton coverage extension (walkthrough round 2): certificate frames, team photos,
   and quote-form previews shimmer while loading like every other photo slot. */
.fs-certdoc img, .fs-team__photo img, .fs-qf__previews img{
	background-color:var(--paper-warm);
	background-image:linear-gradient(100deg, rgba(213,228,245,0) 38%, rgba(213,228,245,.85) 50%, rgba(213,228,245,0) 62%);
	background-size:220% 100%;
	animation:fs-skeleton 1.6s linear infinite;
}
@media (prefers-reduced-motion:reduce){
	.fs-certdoc img, .fs-team__photo img, .fs-qf__previews img{ animation:none; background-image:none; }
}

/* Hero brand line: the company name as the masthead of the page, between the eyebrow
   and the H1. Cormorant display serif in the on-navy gold token, sized to sit clearly
   under the H1 in hierarchy (a brand mark, not a second headline). The hero is a fixed
   100svh overlay, so this line cannot shift layout (CLS 0), and it is plain text with
   no reveal animation (visible from first paint). */
.fs-hero-reel__brand{ font-family:"Cormorant Garamond","Georgia",serif; font-weight:500;
	font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.1; letter-spacing:.12em;
	color:var(--gold-lt); margin:0 0 10px; text-align:center; }
/* Name sits ABOVE the eyebrow (owner call): tight 10px name-to-eyebrow gap so the
   eyebrow reads as the name's subtitle; the eyebrow keeps its original 26px gap to
   the H1 from the base rule above. */