/* ============================================================
   Fred's Painting — independent visual identity
   "Slate & Brass".  Content untouched; presentation only.
   Loaded last so it overrides the compiled utility CSS.
   ============================================================ */

/* fix: compiled Tailwind CSS is missing overflow/display/box-orient for
   line-clamp-7 (only line-clamp-1/2/3/5/6 got the full rule from purge),
   so review text never actually clamps and "See more" never appears */
.line-clamp-7{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}

/* ---------- 1. TYPE ---------- */
@font-face{font-family:'FP Display';src:url('assets/fonts/Fraunces-var.woff2') format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'FP Sans';src:url('assets/fonts/Inter-var.woff2') format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}

/* ---------- 2. PALETTE ---------- */
:root{
  /* slate replaces navy */
  --color-primary-h:203; --color-primary-s:26%; --color-primary-l:18%;
  /* brass replaces orange */
  --color-secondary-h:38; --color-secondary-s:78%; --color-secondary-l:47%;

  --fp-ink:#14191E;
  --fp-cream:#F5F1E9;
  --fp-cream-2:#EDE7DB;
  --fp-brass:#D4991F;
  --fp-brass-dk:#A9760F;
  --fp-slate:#232E38;
  --fp-slate-dk:#161E25;
  --fp-line:rgba(20,25,30,.14);
  --fp-line-light:rgba(255,255,255,.16);
}

body{font-family:'FP Sans',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--fp-cream);color:var(--fp-ink)}

h1,h2,h3,.font-extrabold{font-family:'FP Display',Georgia,'Times New Roman',serif !important;
  font-variation-settings:'opsz' 80,'SOFT' 0,'WONK' 0;letter-spacing:-.015em;font-weight:700}
h1{line-height:1.05}
h2{line-height:1.12}

/* ---------- 3. HEADER — flat cream bar, fixed height ---------- */
#nav-bar{background:var(--fp-cream) !important;border-bottom:1px solid var(--fp-line);
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 10px 30px -22px rgba(0,0,0,.35)}
#nav-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--fp-brass) 0%,var(--fp-brass) 38%,var(--fp-slate) 38%,var(--fp-slate) 100%)}
/* one constant height instead of the 160px -> 92px shrink */
#nav-bar > div{height:84px !important;transition:none !important;box-shadow:none !important}
#nav-bar > div > div{border-bottom:0 !important}
#nav-bar > div > div > div{align-items:center !important}
#nav-bar a[href=" ./"], #nav-bar > div > div > div > a:first-child{
  height:56px !important;display:flex !important;align-items:center}
#nav-bar picture,#nav-bar picture img{height:100% !important;width:auto !important;object-fit:contain}

/* nav links: uppercase, tracked, brass underline */
#nav-bar a,#nav-bar button{color:var(--fp-ink) !important}
#nav-bar nav a,#nav-bar ul a,#nav-bar li a{
  position:relative;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px !important;
  font-weight:600 !important;padding-bottom:3px}
#nav-bar nav a::after,#nav-bar ul a::after,#nav-bar li a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--fp-brass);transition:right .25s ease}
#nav-bar nav a:hover::after,#nav-bar ul a:hover::after,#nav-bar li a:hover::after{right:0}
/* kill the orange "active" pill */
#nav-bar .bg-secondary:not(button):not(a[role=button]){background:transparent !important;
  color:var(--fp-ink) !important;box-shadow:inset 0 -2px 0 var(--fp-brass)}

@media (max-width:1279px){ #nav-bar > div{height:64px !important} 
  #nav-bar a[href=" ./"], #nav-bar > div > div > div > a:first-child{height:44px !important} }

/* push page content below the now-opaque bar */
body{padding-top:84px !important}
@media (max-width:1279px){ body{padding-top:64px !important} }

/* ---------- 4. BUTTONS — square, flat, brass ---------- */
button,a[role="button"],.btn,
button[class*="rounded"],a[class*="rounded-tl-2xl"]{
  border-radius:3px !important}
/* remove the template's asymmetric corner signature everywhere */
[class*="rounded-tl-2xl"],[class*="rounded-br-2xl"],[class*="rounded-tr-2xl"],[class*="rounded-bl-2xl"]{
  border-radius:3px !important}

button.bg-secondary,a.bg-secondary,.bg-secondary button,
button[class*="bg-secondary"],a[class*="bg-secondary"]{
  background:var(--fp-brass) !important;
  color:var(--fp-ink) !important;
  border:1px solid var(--fp-brass-dk) !important;
  box-shadow:none !important;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700 !important;font-size:13px !important;
  transition:background .18s ease,transform .18s ease}
button[class*="bg-secondary"]:hover,a[class*="bg-secondary"]:hover{
  background:var(--fp-brass-dk) !important;color:#fff !important;transform:translateY(-1px);
  background-image:none !important;--tw-ring-shadow:0 0 #0000 !important}
button[class*="bg-secondary"] *,a[class*="bg-secondary"] *{color:inherit !important}

/* white/outline buttons -> slate outline */
button.bg-white,a.bg-white,button[class*="bg-white"][class*="text-black"]{
  background:transparent !important;color:var(--fp-ink) !important;
  border:1.5px solid var(--fp-slate) !important;box-shadow:none !important;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700 !important;font-size:13px !important}
button[class*="bg-white"][class*="text-black"]:hover{
  background:var(--fp-slate) !important;color:#fff !important}

/* the offset-shadow block behind the header CTA */
#nav-bar [class*="bg-secondary"][class*="absolute"],
#nav-bar [class*="translate"][class*="bg-secondary"]{display:none !important}

/* ---------- 5. FLATTEN THE ARCS ---------- */
/* sweeping ellipse dividers between sections */
[class*="h-[350px]"][class*="clip-path:ellipse"]{display:none !important}
/* dome-topped image frames -> clean rectangles */
[class*="rounded-tr-[479px]"],[class*="rounded-tl-[479px]"],
[class*="rounded-t-[160px]"],[class*="rounded-t-[116px]"],
[class*="rounded-t-[182px]"],[class*="rounded-t-[180px]"],
[class*="rounded-b-[560px]"]{border-radius:4px !important}

/* the about-us photo frame: swap the fat translucent ring for an offset brass rule */
[class*="rounded-tr-[479px]"][class*="border-[16px]"]{
  border:0 !important;inset:0 !important;
  box-shadow:0 0 0 1px var(--fp-line), 18px 18px 0 -1px var(--fp-brass) !important}

/* ---------- 6. SECTIONS ---------- */
.bg-white{background-color:var(--fp-cream) !important}
section{position:relative}
/* hairline rule between stacked light sections */
section + section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1180px,88%);height:1px;background:var(--fp-line)}
.bg-primary + section::before,section:has(.bg-primary)::before{display:none}

/* section headings get an eyebrow rule */
h2{position:relative}
h2.text-center{padding-bottom:.2em}

/* service / gallery cards: flat with border instead of shadow */
[class*="shadow-magical"],[class*="shadow-lg"],[class*="shadow-xl"]{
  box-shadow:0 1px 2px rgba(20,25,30,.05) !important}

/* star colour */
.star-pulse,[class*="text-yellow"]{color:var(--fp-brass) !important}

/* social circles: brass -> slate ring */
a[class*="rounded-full"][class*="bg-secondary"],
div[class*="rounded-full"][class*="bg-secondary"]{
  background:transparent !important;border:1.5px solid var(--fp-brass) !important;
  color:var(--fp-brass) !important}

/* ---------- 7. FOOTER ---------- */
footer.bg-gray-900{background:var(--fp-slate-dk) !important;
  border-top:3px solid var(--fp-brass);position:relative}
footer.bg-gray-900 h3,footer.bg-gray-900 h4,
footer.bg-gray-900 [class*="font-bold"]:not(a){
  font-family:'FP Sans',sans-serif !important;text-transform:uppercase;
  letter-spacing:.14em;font-size:11.5px !important;font-weight:700 !important;
  color:var(--fp-brass) !important;padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid var(--fp-line-light)}
footer.bg-gray-900 a:hover{color:var(--fp-brass) !important}
/* the white contact card -> cream, squared */
footer.bg-gray-900 [class*="bg-white"]{
  background:var(--fp-cream) !important;border-radius:4px !important;
  border:1px solid rgba(0,0,0,.08)}

/* ---------- 8. MISC ---------- */
::selection{background:var(--fp-brass);color:var(--fp-ink)}
[class*="focus:ring-secondary"]:focus,input:focus,textarea:focus,select:focus{
  outline:2px solid var(--fp-brass) !important;outline-offset:1px}
input,textarea,select{border-radius:3px !important}

/* ============================================================
   PASS 2 — header refinements
   ============================================================ */
/* single brass hairline instead of the two-tone strip */
#nav-bar::before{background:var(--fp-brass) !important;height:3px}

/* active-page chip: bg-secondary/60 is a distinct class token */
#nav-bar span[class*="bg-secondary"]{
  background:transparent !important;color:var(--fp-ink) !important;
  box-shadow:inset 0 -2px 0 var(--fp-brass);border-radius:0 !important;
  font-weight:700 !important}

/* stop the CTA cluster stretching to full bar height */
#nav-bar .cta_text_button,#nav-bar .cta_call_button,
#nav-bar [class*="cta_"],#nav-bar [class*="cta_"] > div{
  align-self:center !important;height:auto !important}
#nav-bar button{
  height:42px !important;min-height:0 !important;
  padding-top:0 !important;padding-bottom:0 !important;
  align-items:center !important;line-height:1 !important;white-space:nowrap}
#nav-bar .flex.items-center,#nav-bar [class*="gap-4"][class*="items-center"]{align-items:center !important}
#nav-bar button[class*="bg-white"]{border-width:1.5px !important}

/* ---------- service / gallery cards ---------- */
[class*="splide__slide"] figure,[class*="splide__slide"] > div{border-radius:4px !important}
[class*="splide__slide"] img{border-radius:4px 4px 0 0 !important}

/* ---------- review cards: flat, bordered ----------
   NB: [class*="p-"] also matches "-top-[28px]" etc, so be explicit. */
[class*="bg-white"][class*="rounded-lg"]:not([class*="rounded-full"]):not(.cw-review-card),
[class*="bg-white"][class*="rounded-xl"]:not([class*="rounded-full"]):not(.cw-review-card),
[class*="bg-white"][class*="rounded-2xl"]:not([class*="rounded-full"]):not(.cw-review-card){
  border:1px solid var(--fp-line) !important;box-shadow:none !important;border-radius:4px !important}

/* ---------- trust strip ---------- */
[class*="bg-primary"] [class*="uppercase"]{letter-spacing:.1em}

/* ============================================================
   PASS 3 — keep circles circular, tidy the nav
   ============================================================ */
/* the blanket button-squaring must never hit pills/circles */
[class*="rounded-full"],
button[class*="rounded-full"],a[class*="rounded-full"],div[class*="rounded-full"]{
  border-radius:9999px !important}

/* numbered step badges + social icons: filled brass, dark glyph */
a[class*="rounded-full"][class*="bg-secondary"]:not([class*="bg-secondary/"]),
div[class*="rounded-full"][class*="bg-secondary"]:not([class*="bg-secondary/"]),
button[class*="rounded-full"][class*="bg-secondary"]:not([class*="bg-secondary/"]){
  background:var(--fp-brass) !important;border:0 !important;color:var(--fp-ink) !important}
[class*="rounded-full"][class*="bg-secondary"] svg{fill:var(--fp-ink) !important;color:var(--fp-ink) !important}

/* nav: keep every label on one line */
#nav-bar a,#nav-bar span,#nav-bar button{white-space:nowrap}
#nav-bar [class*="gap-"]{column-gap:22px !important}

/* outlined CALL NOW: match the brass button's size */
#nav-bar button[class*="bg-white"]{
  height:42px !important;padding:0 18px !important;border-radius:3px !important}

/* ============================================================
   PASS 4 — fit the nav on one line, guarantee circles
   ============================================================ */
html [class*="rounded-full"]{border-radius:9999px !important}

#nav-bar nav a,#nav-bar ul a,#nav-bar li a,#nav-bar span[class*="bg-secondary"]{
  font-size:15px !important;letter-spacing:.05em}
#nav-bar [class*="gap-"]{column-gap:14px !important}
#nav-bar button{font-size:15px !important;padding:0 14px !important;height:40px !important}
#nav-bar > div > div{padding-left:16px !important;padding-right:16px !important}

/* ============================================================
   PASS 5 — decorative shapes
   ============================================================ */
/* never repaint the translucent tint blobs (bg-secondary/10 etc).
   The slash-opacity variants are separate class tokens. */
html [class*="bg-secondary/"]:not(span){background-color:hsla(var(--color-secondary-h),
   var(--color-secondary-s),var(--color-secondary-l),.10) !important}
a[class*="bg-secondary/"],button[class*="bg-secondary/"],
div[class*="rounded-full"][class*="bg-secondary/"]{border:0 !important}
/* the header chip keeps its own treatment */
#nav-bar span[class*="bg-secondary"]{background-color:transparent !important}

/* empty arch-shaped decorations read as stray blocks once squared — retire them */
div:empty[class*="absolute"][class*="rounded-t-["],
div:empty[class*="absolute"][class*="rounded-b-["]{display:none !important}

/* floating quote button: match the brass button language */
[class*="fixed"][class*="bottom-"] button,[class*="fixed"][class*="bottom-"] a{
  text-transform:uppercase;letter-spacing:.08em;font-weight:700 !important;font-size:12px !important}

/* ============================================================
   PASS 6 — retire the hard offset-shadow motif
   ============================================================ */
[class*="shadow-[5px_5px_0px_0px]"]{box-shadow:0 1px 2px rgba(20,25,30,.06) !important}

/* mobile MENU control: flat outlined */
#nav-bar [class*="shadow-[5px_5px_0px_0px]"]{
  box-shadow:none !important;background:transparent !important;
  border:1.5px solid var(--fp-slate) !important;border-radius:3px !important}
#nav-bar [class*="shadow-[5px_5px_0px_0px]"] *{color:var(--fp-ink) !important}
#nav-bar [class*="shadow-[5px_5px_0px_0px]"] svg,
#nav-bar [class*="shadow-[5px_5px_0px_0px]"] svg *{stroke:var(--fp-ink) !important}

/* ============================================================
   PASS 7 — new logo lockup (1600x983, transparent)
   taller/narrower than the old mark, so give it more height
   ============================================================ */
#nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{
  height:66px !important;padding:2px 0}
#nav-bar picture,#nav-bar picture img{height:100% !important;width:auto !important;
  object-fit:contain;object-position:left center}
@media (max-width:1279px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:48px !important} }

/* ---- horizontal lockup in the nav (4:1) needs less height ---- */
#nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:46px !important}
@media (max-width:1279px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:34px !important} }

/* ============================================================
   PASS 8 — header sizing per breakpoint
   The nav carries 8 links + 2 CTAs; at 1280-1439 it overflowed
   and pushed CALL NOW off-screen. Tighten there, and give the
   logo more room on wide screens.
   ============================================================ */
@media (min-width:1440px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:60px !important}
  #nav-bar [class*="gap-"]{column-gap:11px !important}
  #nav-bar button{padding:0 13px !important}
}
@media (min-width:1280px) and (max-width:1439px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:54px !important}
  #nav-bar [class*="gap-"]{column-gap:6px !important}
  #nav-bar nav a,#nav-bar ul a,#nav-bar li a,#nav-bar span[class*="bg-secondary"]{
    font-size:9.5px !important;letter-spacing:.03em}
  #nav-bar button{font-size:9.5px !important;padding:0 9px !important;height:34px !important}
  #nav-bar > div > div{padding-left:10px !important;padding-right:10px !important}
}
/* compact header (<1280) has only the logo + MENU, so go bigger */
@media (max-width:1279px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:52px !important}
}

/* ============================================================
   PASS 9 — icon-forward lockup
   The nav <img> has an inherited max-width:160px; raise it so the
   icon can grow, and claw back the width from gaps/padding.
   ============================================================ */
@media (min-width:1440px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:66px !important}
  #nav-bar picture img{max-width:180px !important}
  #nav-bar [class*="gap-"]{column-gap:8px !important}
  #nav-bar button{padding:0 11px !important}
}
@media (min-width:1280px) and (max-width:1439px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:56px !important}
  #nav-bar picture img{max-width:160px !important}
}
@media (max-width:1279px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:56px !important}
  #nav-bar picture img{max-width:180px !important}
}

/* ============================================================
   PASS 10 — taller bar so the icon can actually grow
   The icon's height == the logo's drawn height, which was capped
   by the 84px bar. Bar -> 96px (76px compact) and lift the caps.
   ============================================================ */
@media (min-width:1280px){
  #nav-bar > div{height:96px !important}
  body{padding-top:96px !important}
}
@media (min-width:1440px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:80px !important}
  #nav-bar picture img{max-width:200px !important}
  #nav-bar [class*="gap-"]{column-gap:7px !important}
  #nav-bar button{padding:0 10px !important}
}
@media (min-width:1280px) and (max-width:1439px){
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:72px !important}
  #nav-bar picture img{max-width:180px !important}
}
@media (max-width:1279px){
  #nav-bar > div{height:76px !important}
  body{padding-top:76px !important}
  #nav-bar a[href=" ./"],#nav-bar > div > div > div > a:first-child{height:60px !important}
  #nav-bar picture img{max-width:160px !important}
}

/* ============================================================
   PASS 11 — nav typography consistency
   Earlier rules used "#nav-bar nav a / ul a / li a", which match
   nothing here, so plain links kept 16px while the HOME chip and
   the SERVICES/GALLERIES dropdown <button>s were shrunk to 11px.
   Every label is really a span.px-2.py-1 — target that instead.
   ============================================================ */
#nav-bar span[class*="px-2"][class*="py-1"]{
  font-size:13px !important;font-weight:700 !important;
  letter-spacing:.07em !important;text-transform:uppercase}

/* dropdown triggers are <button> but are nav links, not CTAs */
#nav-bar button[class*="pl-1.5"]{
  height:auto !important;min-height:0 !important;padding:0 2px !important;
  font-size:15px !important}

/* only the real CTAs keep the compact button treatment */
#nav-bar button[class*="px-6"]{
  font-size:15px !important;height:40px !important;padding:0 12px !important}

@media (min-width:1280px) and (max-width:1439px){
  #nav-bar span[class*="px-2"][class*="py-1"]{font-size:14px !important;letter-spacing:.03em !important}
  #nav-bar button[class*="pl-1.5"]{font-size:14px !important}
  #nav-bar button[class*="px-6"]{font-size:13px !important;height:34px !important;padding:0 9px !important}
}

/* ============================================================
   PASS 12 — breathing room at the header edges
   ============================================================ */
@media (min-width:1600px){
  #nav-bar > div > div{padding-left:48px !important;padding-right:48px !important}
}
@media (min-width:1440px) and (max-width:1599px){
  #nav-bar > div > div{padding-left:32px !important;padding-right:32px !important}
}
@media (min-width:1280px) and (max-width:1439px){
  #nav-bar > div > div{padding-left:20px !important;padding-right:20px !important}
}
@media (max-width:1279px){
  #nav-bar > div > div{padding-left:22px !important;padding-right:22px !important}
}

/* ============================================================
   PASS 13 — CALL NOW hover + larger menu text on ~1366 screens
   The colour rule on line 53 is ID-scoped (1,0,1), so any hover
   override must also be ID-scoped or it silently loses.
   ============================================================ */
#nav-bar .cta_call_button:hover button:not(.header-phone-display),
#nav-bar button[class*="bg-white"]:hover,
#nav-bar button.cta_call_conversion:hover{
  background:var(--fp-slate) !important;
  color:#fff !important;
  border-color:var(--fp-slate) !important}
/* the border lives on the wrapper; Tailwind's hover:border-white
   would vanish against the cream bar */
#nav-bar .cta_call_button:hover{
  border-color:var(--fp-slate) !important;
  --tw-ring-color:var(--fp-slate) !important}
#nav-bar .cta_call_button{transition:border-color .18s ease}
#nav-bar .cta_call_button button:not(.header-phone-display){transition:background .18s ease,color .18s ease}

/* ~1280-1439 (e.g. 1366x768 laptops): 10.5px was too small.
   Buy the width back from the gaps instead. */
@media (min-width:1280px) and (max-width:1439px){
  #nav-bar span[class*="px-2"][class*="py-1"]{font-size:14px !important;letter-spacing:.04em !important}
  #nav-bar button[class*="pl-1.5"]{font-size:14px !important}
  #nav-bar [class*="gap-"]{column-gap:3px !important}
  #nav-bar span[class*="px-2"]{padding-left:5px !important;padding-right:5px !important}
  #nav-bar button[class*="px-6"]{font-size:13px !important;padding:0 8px !important}
  #nav-bar > div > div{padding-left:14px !important;padding-right:14px !important}
}

/* ============================================================
   PASS 14 — FAQ section rebuild
   Was: two floating cropped photos with a hole in the middle,
   and a 480px list stranded in a 1440px section.
   Now: one seamless banner with the heading over it, and a
   comfortable two-column list.
   ============================================================ */
:root{--fq-max:1120px}

/* ---- banner: close the gap, unify the two photos ----
   NB: #faq-band IS the flex container, not its parent. ---- */
#faq-band{gap:0 !important;position:relative;overflow:hidden;
  margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)}
#faq-band > div[class*="w-[50%]"]{
  width:50% !important;max-width:50% !important;flex:0 0 50% !important;position:relative}
#faq-band img[alt="FAQ image"]{
  height:320px !important;width:100% !important;object-fit:cover;display:block}
/* one scrim across the whole strip so the pair reads as a single banner */
#faq-band::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
     var(--fp-slate-dk) 0%, rgba(22,30,37,.86) 26%, rgba(22,30,37,.90) 50%,
     rgba(22,30,37,.86) 74%, var(--fp-slate-dk) 100%)}
/* feather the top and bottom into the section colour */
#faq-band::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,var(--fp-slate-dk) 0%,transparent 22%,
     transparent 78%,var(--fp-slate-dk) 100%)}
/* kill the per-photo mobile overlays now that one scrim covers everything */
#faq-band div[class*="bg-primary/60"]{display:none !important}

/* heading centred over the full banner instead of a 33% column */
#faq-band > div[class*="absolute"][class*="z-10"]{
  position:absolute !important;inset:0 !important;
  width:100% !important;max-width:100% !important;
  z-index:4 !important;display:flex !important;
  align-items:center !important;justify-content:center !important;
  padding:0 24px !important}
#faq-band h2{
  text-align:center !important;color:#fff !important;margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.7),0 0 40px rgba(0,0,0,.5)}
#faq-band h2::after{
  content:"";display:block;width:64px;height:3px;background:var(--fp-brass);
  margin:18px auto 0;border-radius:2px}

/* ---- the list: wider, two columns, card-like rows ---- */
#faq-list{max-width:var(--fq-max) !important;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px}
#faq-list > dl{
  width:100% !important;margin-top:44px !important;
  column-count:2;column-gap:40px}
#faq-list > dl > div{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;
  border-bottom:0 !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:6px;background:rgba(255,255,255,.035);
  padding:16px 18px !important;margin-bottom:14px;
  transition:border-color .18s ease,background .18s ease}
#faq-list > dl > div:hover{
  border-color:rgba(212,153,31,.55) !important;background:rgba(255,255,255,.06)}
#faq-list dt span{font-size:15px !important;line-height:1.45 !important}
#faq-list dd p{color:#c9d2d9 !important;font-size:14.5px !important;line-height:1.65}

/* chevron: flat brass square -> subtle circle that matches the redesign */
#faq-list dt [class*="bg-secondary"]{
  background:transparent !important;border:1.5px solid var(--fp-brass) !important;
  border-radius:9999px !important;width:28px !important;height:28px !important;
  flex:none;transition:background .18s ease}
#faq-list dt [class*="bg-four-corners-secondary"]{
  background:transparent !important;padding:0 !important;margin-left:14px !important}
#faq-list > dl > div:hover dt [class*="bg-secondary"]{background:rgba(212,153,31,.18) !important}
#faq-list dt svg path{stroke:var(--fp-brass) !important;opacity:1 !important}

@media (max-width:900px){
  #faq-list > dl{column-count:1}
  #faq-band img[alt="FAQ image"]{height:220px !important}
}

/* ============================================================
   PASS 15 — drop the Google Map, give the space to showcases
   The map key is invalid on this domain, so it only ever
   rendered Google's "Oops! Something went wrong." panel.
   ============================================================ */
/* NB: the showcase panel lives INSIDE .map-outer-container,
   so only the map column itself may be hidden. */
.map-inner-container,#map,
.gm-err-container,.gm-err-content{display:none !important}
.map-outer-container{
  display:block !important;height:auto !important;width:100% !important}

/* the section was a cramped left rail + a huge map column */
section.showcases-container{background:var(--fp-cream) !important;padding:0 0 8px}
section.showcases-container > div[class*="hidden"]{width:100% !important}
section.showcases-container > div:not([class*="sm:hidden"]){
  width:100% !important;max-width:100% !important}

/* service-area intro spans the full width now */
section.showcases-container .text-primary.text-2xl,
section.showcases-container [class*="text-2xl"][class*="font-extrabold"]{
  max-width:1120px;margin:0 auto;padding:0 24px}

/* the showcase panel takes the space the map used to occupy */
#showcase-panel{
  display:flex !important;width:100% !important;max-width:1400px !important;
  margin:8px auto 40px !important;box-sizing:border-box;
  background:var(--fp-slate-dk) !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px !important;padding:34px 28px !important}
#showcase-panel > div:first-child{
  width:auto !important;max-width:none !important;
  font-size:30px !important;line-height:1.2 !important;margin-bottom:6px}
/* the slider row fills the panel */
#showcase-panel > div:nth-child(2){width:100% !important;justify-content:center !important}
/* let more than one card show at a time */
#showcase-panel [id^="showcase-"]{width:20rem !important}
#showcase-panel .rounded-xl{border-radius:6px !important}
/* arrows as outlined brass circles, matching the FAQ */
#showcase-panel #prev-button,#showcase-panel #next-button{
  width:40px !important;height:40px !important;flex:none;border-radius:9999px;
  border:1.5px solid var(--fp-brass);transition:background .18s ease;
  align-self:center;position:relative;top:12px}
#showcase-panel #prev-button:hover,#showcase-panel #next-button:hover{
  background:rgba(212,153,31,.18)}
#showcase-panel #prev-button svg,#showcase-panel #next-button svg{
  color:var(--fp-brass) !important;fill:var(--fp-brass) !important}
#showcase-panel a[href="showcases"] div{color:var(--fp-brass) !important}

@media (max-width:900px){
  #showcase-panel{padding:24px 14px !important;margin:8px 16px 32px !important;
    width:calc(100% - 32px) !important}
  #showcase-panel > div:first-child{font-size:24px !important}
}

/* the left rail was sized for a map beside it (sm:w-96 = 384px).
   With the map gone it must span the section. */
.map-outer-container > div[class*="sm:w-96"],
.map-outer-container > div[class*="sm:flex-shrink-0"]{
  width:100% !important;max-width:100% !important;flex:1 1 100% !important;
  border:0 !important;overflow:visible !important;
  padding-left:24px !important;padding-right:24px !important}
.map-outer-container{display:flex !important;flex-direction:column !important}
.map-outer-container > div[class*="sm:w-96"] > div:first-child{
  max-width:1180px;width:100%;margin:0 auto}

/* ---- tidy: centre the service-area intro, show 3 cards ---- */
.map-outer-container > div[class*="sm:w-96"] > div.flex.flex-col.gap-4{
  max-width:1180px;width:100%;margin:0 auto;text-align:center}
.map-outer-container > div[class*="sm:w-96"] > div.flex.flex-col.gap-4 > div{
  max-width:900px;margin-left:auto;margin-right:auto}

/* the carousel row: let several cards sit side by side */
#showcase-panel > div:nth-child(2){
  gap:16px !important;max-width:100%;margin:0 auto;
  align-items:stretch !important;flex-wrap:nowrap !important}
#showcase-panel [id^="showcase-"]{
  width:auto !important;flex:1 1 0 !important;min-width:0 !important;
  max-width:26rem !important;margin-top:0 !important;align-self:stretch}
#showcase-panel [id^="showcase-"].hidden{display:none !important}

/* ---- mobile: the rail is `hidden sm:flex`, so the showcase never
   appeared there (the broken map filled that slot instead).
   Reveal the rail but suppress its duplicate heading/areas block. ---- */
@media (max-width:639px){
  .map-outer-container > div[class*="sm:w-96"]{
    display:flex !important;padding-left:0 !important;padding-right:0 !important;
    padding-top:0 !important}
  .map-outer-container > div[class*="sm:w-96"] > div.flex.flex-col.gap-4{display:none !important}
  #showcase-panel{margin:0 16px 28px !important}
}

/* mobile: keep the carousel arrows inside the panel */
@media (max-width:639px){
  #showcase-panel > div:nth-child(2){
    gap:6px !important;padding:0 4px;flex-wrap:nowrap !important}
  #showcase-panel #prev-button,#showcase-panel #next-button{
    width:34px !important;height:34px !important}
  #showcase-panel [id^="showcase-"]{
    width:auto !important;flex:1 1 auto !important;min-width:0 !important;max-width:100% !important}
  #showcase-panel [id^="showcase-"] img{height:150px !important}
}

/* ============================================================
   PASS 16 — three showcases at once, wider panel
   ============================================================ */
#showcase-panel{max-width:1340px !important;padding:38px 30px !important}
.map-outer-container > div[class*="sm:w-96"] > div.flex.flex-col.gap-4,
.map-outer-container > div[class*="sm:w-96"] > div:first-child{max-width:1340px}

#showcase-panel > div:nth-child(2){
  max-width:none !important;gap:20px !important;
  align-items:stretch !important;flex-wrap:nowrap !important}
/* cards share the row evenly and match heights */
#showcase-panel [id^="showcase-"]{
  width:auto !important;flex:1 1 0 !important;min-width:0 !important;
  max-width:380px !important;margin-top:0 !important;
  display:flex !important;flex-direction:column}
#showcase-panel [id^="showcase-"].hidden{display:none !important}
#showcase-panel [id^="showcase-"] img{height:170px !important}
/* keep the arrows from shrinking */
#showcase-panel #prev-button,#showcase-panel #next-button{flex:0 0 40px !important}

@media (max-width:1279px){
  #showcase-panel{max-width:96% !important}
  #showcase-panel [id^="showcase-"]{max-width:360px !important}
}

/* ---- 3-up showcase row ---- */
.map-outer-container > div[class*="sm:w-96"]{padding-left:16px !important;padding-right:16px !important}
#showcase-panel > div:nth-child(2){width:100% !important}
/* keep the cards equal height and tidy */
#showcase-panel [id^="showcase-"]{display:flex !important;flex-direction:column !important}
#showcase-panel [id^="showcase-"] > div:last-child{flex:1 1 auto;display:flex;flex-direction:column}
#showcase-panel [id^="showcase-"] img{height:170px !important;width:100% !important;object-fit:cover}
/* the review block sits at the bottom of every card */
#showcase-panel [id^="showcase-"] .border.border-gray-200{margin-top:auto !important}

@media (min-width:820px) and (max-width:1279px){
  #showcase-panel [id^="showcase-"]{max-width:24rem !important}
}

/* ============================================================
   PASS 16 — showcase cards lift + glow on hover
   The panel is dark, so a soft white halo reads as light coming
   off the card. Sits on top of its neighbours while raised.
   ============================================================ */
#showcase-panel [id^="showcase-"]{
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease,
             border-color .22s ease !important;
  will-change:transform;
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  position:relative;z-index:1}

#showcase-panel [id^="showcase-"]:hover{
  transform:translateY(-8px);
  z-index:3;
  border-color:rgba(255,255,255,.55) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.35),
    0 10px 26px -6px rgba(255,255,255,.30),
    0 22px 48px -12px rgba(0,0,0,.55) !important}

/* nudge the image so the lift feels like one object */
#showcase-panel [id^="showcase-"] img{transition:transform .35s ease}
#showcase-panel [id^="showcase-"]:hover img{transform:scale(1.03)}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  #showcase-panel [id^="showcase-"],
  #showcase-panel [id^="showcase-"] img{transition:none !important}
  #showcase-panel [id^="showcase-"]:hover{transform:none}
}


/* ============================================================
   PASS 17 — wider reviews track on desktop
   #reviews-content is `lg:w-2/3`, so the slider only used 960 of
   1440px. Give the rail a fixed narrow column and hand the rest
   of the row to the track.
   ============================================================ */
@media (min-width:1024px){
  /* the row: rail + slider */
  #reviews .relative.flex.lg\:flex-row{align-items:flex-start !important}
  /* slider column takes everything the rail does not need */
  #reviews-content{
    width:auto !important;max-width:none !important;
    flex:1 1 auto !important;min-width:0 !important}
  /* the "Reviews / leave us a review" rail stops hogging a third */
  #reviews .relative.flex.lg\:flex-row > div:not(#reviews-content){
    flex:0 0 300px !important;width:300px !important;max-width:300px !important}
  /* let the track run to the right edge of the viewport */
  #reviews-slider,#reviews-slider-track{width:100% !important;max-width:none !important}
}
@media (min-width:1440px){
  #reviews .relative.flex.lg\:flex-row > div:not(#reviews-content){
    flex:0 0 340px !important;width:340px !important;max-width:340px !important}
}

/* ============================================================
   PASS 18 — "Our partners" as real cards
   Was: bare logos on the page background, no card, no shadow,
   square images, uneven heights. Now a tidy 3-up card row.
   ============================================================ */
#our-partners ul{
  gap:28px !important;align-items:stretch !important}
/* equal card heights even when one caption wraps to two lines */
#our-partners ul li{align-self:stretch !important}

#our-partners ul li{
  background:#fff !important;
  border:1px solid rgba(20,25,30,.09) !important;
  border-radius:14px !important;
  padding:26px 22px 24px !important;
  flex:1 1 280px;width:auto;max-width:360px;min-width:0;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(20,25,30,.05),0 10px 24px -18px rgba(20,25,30,.35);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease, border-color .22s ease;
  will-change:transform;position:relative;overflow:hidden}

/* brass hairline that wipes in on hover */
#our-partners ul li::before{
  content:"";position:absolute;top:0;left:0;right:100%;height:3px;
  background:var(--fp-brass);transition:right .3s ease;z-index:2}
#our-partners ul li:hover::before{right:0}

#our-partners ul li:hover{
  transform:translateY(-8px);
  border-color:rgba(212,153,31,.45) !important;
  box-shadow:0 1px 2px rgba(20,25,30,.06),
             0 18px 38px -14px rgba(20,25,30,.38),
             0 0 0 1px rgba(212,153,31,.18)}

#our-partners ul li > a{
  gap:18px !important;height:100%;width:100%;
  justify-content:flex-start;display:flex !important}
/* fixed logo slot so every caption starts on the same line */
#our-partners ul li picture{flex:0 0 auto}
#our-partners ul li > a > div{flex:1 1 auto}

/* rounded logo tile — the source logos are already on white,
   so the tile is white too (a cream tile double-framed them) */
#our-partners ul li picture{
  display:flex;align-items:center;justify-content:center;
  width:100%;border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid rgba(20,25,30,.08)}
#our-partners ul li img{
  width:100% !important;height:190px !important;
  object-fit:contain !important;
  border-radius:10px !important;
  padding:20px 24px;
  transition:transform .35s ease;background:#fff}
#our-partners ul li:hover img{transform:scale(1.04)}

/* copy block — fixed slot so all three captions align */
#our-partners ul li > a > div{
  width:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  min-height:72px}
#our-partners ul li h4{
  font-family:'FP Sans',sans-serif !important;
  font-size:13px !important;letter-spacing:.12em !important;
  font-weight:700 !important;color:var(--fp-ink) !important;margin-bottom:6px}
#our-partners ul li p{
  color:#5c6873 !important;font-size:14.5px !important;line-height:1.5}

/* a quiet "explore" affordance */
#our-partners ul li p::after{
  content:" →";color:var(--fp-brass);font-weight:700;
  opacity:0;transition:opacity .2s ease,margin-left .2s ease;margin-left:-4px}
#our-partners ul li:hover p::after{opacity:1;margin-left:0}

/* heading gets the same brass rule as the other sections */
#our-partners h2::after{
  content:"";display:block;width:64px;height:3px;background:var(--fp-brass);
  margin:16px auto 0;border-radius:2px}

@media (max-width:900px){
  #our-partners ul li{flex:1 1 100%;width:100%;max-width:420px;padding:20px 18px}
  #our-partners ul li img{height:150px !important}
}
@media (prefers-reduced-motion:reduce){
  #our-partners ul li,#our-partners ul li img{transition:none !important}
  #our-partners ul li:hover{transform:none}
}

/* ============================================================
   PASS 19 — final-CTA cover photo: rounded, white edge, shadow
   The frame div clips at 4px, so the radius has to go on the
   frame too or the image's own corners get cut square.
   ============================================================ */
img[src*="8308af4ac8a5d14e"]{
  border-radius:16px !important;
  border:3px solid #fff !important;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55),
             0 2px 6px rgba(0,0,0,.25) !important;
  display:block}

/* the wrapper clips the image — match its radius and let the
   shadow escape, and drop the template's translucent white slab */
img[src*="8308af4ac8a5d14e"]{position:relative;z-index:2}
:has(> picture > img[src*="8308af4ac8a5d14e"]),
div:has(picture > img[src*="8308af4ac8a5d14e"]){
  border-radius:16px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  inset:0 !important}

/* gentle lift on hover, matching the other cards */
img[src*="8308af4ac8a5d14e"]{
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease}
img[src*="8308af4ac8a5d14e"]:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 54px -14px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.35),
             0 2px 6px rgba(0,0,0,.25) !important}

@media (prefers-reduced-motion:reduce){
  img[src*="8308af4ac8a5d14e"]{transition:none !important}
  img[src*="8308af4ac8a5d14e"]:hover{transform:none}
}

/* ============================================================
   PASS 20 — space between the "Reviews" rail and the slider
   They were flush (0px gap) once the rail became a fixed column.
   Padding (not margin) so it does not fight the flex sizing.
   ============================================================ */
@media (min-width:1024px){
  #reviews-content{padding-left:48px !important}
}
@media (min-width:1440px){
  #reviews-content{padding-left:64px !important}
}

/* ============================================================
   PASS 21 — footer: 5th column (Team) sits beside Services
   The row is CSS grid with md:grid-cols-4, fixed for exactly 4
   columns, so a 5th child always wraps to a new grid row
   regardless of available width. Force 5 columns instead.
   ============================================================ */
@media (min-width:768px){
  footer [class*="grid-cols-2"][class*="md:grid-cols-4"]{
    grid-template-columns:repeat(5,minmax(140px,1fr)) !important}
}

/* ============================================================
   PASS 22 — "Our Best Work" gallery: CSS-only continuous scroll
   Replaces splide-extension-auto-scroll (1.7s CPU/frame-by-frame
   JS repositioning) with a single GPU-composited @keyframes loop.
   Zero JavaScript runs for the motion itself.
   ============================================================ */
.cw-gallery{align-items:stretch}
.cw-col{position:relative}
.cw-viewport{
  height:920px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
@media (max-width:1023px){ .cw-viewport{height:600px} }

.cw-track{
  display:flex;flex-direction:column;gap:12px;
  width:100%;will-change:transform;
  animation:cw-scroll-down var(--cw-duration,20s) linear infinite}
.cw-up .cw-track{animation-name:cw-scroll-up}

/* each duplicated list is identical, so translating by exactly
   -50% of the doubled track loops with no visible seam */
@keyframes cw-scroll-down{
  from{transform:translateY(-50%)}
  to{transform:translateY(0%)}
}
@keyframes cw-scroll-up{
  from{transform:translateY(0%)}
  to{transform:translateY(-50%)}
}

.cw-slide{
  cursor:zoom-in;flex:0 0 auto;
  border-radius:4px;overflow:hidden}
.cw-slide img{display:block;width:100%;height:100%;object-fit:cover}

/* pause on hover so a visitor can actually look at one / click it */
.cw-viewport:hover .cw-track{animation-play-state:paused}

/* let the column define its own tile height via aspect ratio
   instead of Splide's JS-measured autoHeight */
.cw-slide{aspect-ratio:1/1}
@media (min-width:1024px){ .cw-slide{aspect-ratio:4/3} }

@media (prefers-reduced-motion:reduce){
  .cw-track{animation:none}
}

/* ============================================================
   PASS 23 — reviews slider: CSS-only continuous horizontal scroll
   Replaces Splide + the auto-scroll extension with a single
   GPU-composited @keyframes loop, same technique as the
   "Our Best Work" gallery rebuild. Zero JS runs for the motion.
   ============================================================ */
.cw-reviews{position:relative}
.cw-reviews-viewport{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%)}

.cw-reviews-track{
  display:flex;flex-direction:row;gap:40px;
  list-style:none;margin:0;padding:0;
  width:max-content;will-change:transform;
  animation:cw-reviews-scroll 790s linear infinite}

@keyframes cw-reviews-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.cw-review-card.cw-review-card{
  flex:0 0 auto;
  /* double class = higher specificity than [class*="bg-white"][class*="rounded-lg"]
     (0,0,2,0), which otherwise clobbers this since it comes later in the file.
     Restores the card's original template look exactly as it was before this
     rebuild -- white bg, primary-colour border, hard brass drop shadow. */
  background-color:#fff !important;
  border-color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l)) !important;
  box-shadow:0px 7px 0px 0px hsla(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l),.3) !important;
  border-radius:0.5rem !important}

/* pause on hover so a visitor can actually read one / click "See more" */
.cw-reviews-viewport:hover .cw-reviews-track{animation-play-state:paused}

/* simple drag-to-scroll: pause the animation while dragging,
   and let native horizontal scroll take over via touch/trackpad */
.cw-reviews-viewport{cursor:grab}
.cw-reviews-viewport.cw-dragging{cursor:grabbing}
.cw-reviews-viewport.cw-dragging .cw-reviews-track{animation-play-state:paused}

@media (max-width:1023px){
  .cw-reviews-viewport{-webkit-mask-image:none;mask-image:none}
}
@media (prefers-reduced-motion:reduce){
  .cw-reviews-track{animation:none}
}

/* services carousel cards sized up ~15% from the original 320x410 */
.cw-service-slide{width:368px !important;height:472px !important}
.cw-service-link{height:429px !important}
.cw-service-slide:hover .cw-service-link{height:472px !important}
/* widen the carousel so all 4 bigger cards still fit on one row */
.cw-service-splide{max-width:1700px !important}

/* phone number shown under the header Call Now button, absolutely
   positioned so it never affects the button's own layout/position */
.header-phone-display{
  position:absolute; top:100%; left:0; right:0; margin-top:4px;
  transform:translate(-10px, -4px);
  background:none; border:none; padding:0; text-align:center; cursor:pointer;
  color:rgba(255,255,255,.75); white-space:nowrap;
}

/* ============================================================
   BLOG HEADER (/blog)
   blog/blog-header.php deliberately mirrors the homepage nav's DOM
   shape and class tokens, so every #nav-bar rule above (cream bar,
   brass top strip, edge padding per breakpoint, logo height, link
   sizing/underline, CTA buttons) already applies to it as-is. Only
   the genuinely blog-specific bits live here.
   ============================================================ */
/* The homepage nav is position:fixed, so redesign.css pads <body> to
   compensate. The blog nav is position:sticky (still in flow, reserves
   its own space), so that padding would leave an empty gap on top. */
body.fp-blog-page{padding-top:0 !important}

/* Alpine teleports the homepage's mobile drawer to <body>, so it gets
   no #nav-bar styling; the blog's inline drawer needs its own. */
.fp-blog-nav-mobile{background:var(--fp-slate) !important}
.fp-blog-nav-mobile a,.fp-blog-nav-mobile button{color:#fff !important}
.fp-blog-nav-mobile-link{border-color:rgba(255,255,255,.15) !important}
#fp-nav-mobile-menu a.bg-secondary{background:var(--fp-brass) !important;border-radius:3px}
#fp-nav-mobile-menu a.bg-white{background:#fff !important;color:var(--fp-ink) !important;border-radius:3px}

/* Dropdown panels: Alpine handles these on the homepage via x-show. */
.fp-nav-dropdown-menu{margin-top:2px}
#nav-bar .fp-nav-dropdown-menu a{color:var(--fp-ink) !important}
#nav-bar .fp-nav-dropdown-menu a:hover{background:var(--fp-slate)}
#nav-bar .fp-nav-dropdown-menu a:hover p{color:#fff !important}