/* ==========================================================================
   FN Building Projects: "Level" skin for inner pages (v2.4.145)
   Loaded after style.css on every page except the front page. It carries the
   homepage's look (home-level/level.css) onto the existing templates without
   changing their content: palette, buttons, kickers, the light hero with the
   photo beside the words, the review/credentials strip, forest bands, the
   ground line and footer, and the light thumb bar on phones.
   ========================================================================== */

/* ------------------------------------------------------------- palette -- */
:root{
  --navy:#1F2622; --navy-700:#2A322D; --navy-600:#3A423C;
  --paper:#F5F1EA; --mist:#ECE6DB; --accent-tint:#ECE6DB;
  --ink:#1F2420; --steel:#565A51;
  --line:#D8D1C4;
  --accent-light:#EAA07A;
  --on-navy:#F3EFE7; --on-navy-dim:#C3C6BC; --on-accent:#C3C6BC;
  --laser:#E2542A; --mark:#F2D6C4;
  --lv-gutter:clamp(20px,5vw,72px);
  --lv-shadow:0 1px 2px rgba(58,45,37,.12),0 14px 30px -22px rgba(58,45,37,.45);
}
body{background:var(--paper)}

/* ---------------------------------------------------------------- type -- */
.lede{color:#2A2F2A}
.hl{color:var(--accent)}
.on-dark .hl,.bg-navy .hl,.bg-charcoal .hl{color:var(--accent-light)}
.eyebrow,.mono-label{font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);gap:0}
.eyebrow .tick{display:none}
.on-dark .eyebrow,.bg-navy .eyebrow,.bg-charcoal .eyebrow{color:var(--accent-light)}

/* ------------------------------------------------------------- buttons -- */
.btn{font-family:var(--font-body);font-weight:600;font-size:15.5px;line-height:1.1;letter-spacing:0;border-radius:4px;border:1.5px solid transparent;padding:14px 22px;min-height:48px;transition:background-color .16s,color .16s,border-color .16s,transform .12s}
.btn:hover{transform:none;box-shadow:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:10px 16px;min-height:44px;font-size:14.5px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(58,45,37,.25),0 6px 16px -8px rgba(130,48,20,.55)}
.btn-primary:hover{background:#8E3719;box-shadow:0 1px 2px rgba(58,45,37,.25),0 6px 16px -8px rgba(130,48,20,.55)}
.btn-ghost{background:transparent;color:var(--on-navy);border-color:rgba(243,239,231,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:var(--on-navy)}
.btn-ghost-light{background:rgba(245,241,234,.9);color:var(--ink);border-color:rgba(31,36,32,.35)}
.btn-ghost-light:hover{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn-white{background:var(--on-navy);color:var(--navy)}
.btn-white:hover{background:#fff;color:var(--navy)}
@media (max-width:760px){.btn{font-size:15px}}

/* ---------------------------------------------------------- dark bands -- */
.bg-navy,.bg-charcoal,.bg-accent{background:var(--navy)}
.dotgrid::before{display:none}

/* ---------------------------------------------------------------- cards -- */
.card{background:#FBF8F3;border:0;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--lv-shadow)}
.card:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(58,45,37,.14),0 18px 34px -22px rgba(58,45,37,.55)}
.card .icon{background:var(--navy);border-radius:4px}
.card-media{border-radius:6px 6px 0 0}

@supports selector(:has(a)){
/* ----------------------------------------------------------------- hero --
   Homepage: words on light paper, the picture beside them. The old hero put
   white words over a darkened photo. With a photo present the hero becomes two
   columns (words | photo); without one it is a plain paper band. */
.hero-photo{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.hero-photo::before,.hero-photo::after{display:none}
.hero-photo h1,.hero-photo h2,.hero-photo p,.hero-photo li,.hero-photo strong{color:var(--ink)!important}
.hero-photo .lede,.hero-photo .lede *{color:#2A2F2A!important}
.hero-photo .hl{color:var(--accent)!important}
.hero-photo .eyebrow{color:var(--accent)!important}
.hero-photo .btn-ghost{background:rgba(245,241,234,.9);color:var(--ink);border-color:rgba(31,36,32,.35)}
.hero-photo .btn-ghost:hover{background:#fff;border-color:var(--ink)}
.hero-photo .cta-trust,.hero-photo .cta-trust span{color:var(--steel)!important}
.hero-photo .advice-crumb a,.hero-photo .advice-crumb span{color:var(--steel)!important}
.hero-photo .advice-crumb a:hover{color:var(--accent)!important}
.hero-photo :focus-visible{outline-color:var(--accent)}
.hero-photo .hero-stats{background:#FBF8F3;color:var(--ink);box-shadow:var(--lv-shadow)}
.hero-photo .hero-stats *{color:var(--ink)!important}
.hero-photo h1{font-size:clamp(34px,1.4rem + 2.6vw,58px);line-height:1.04}

.hero-photo:has(> picture, > img.hero-media){
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  min-height:min(62vh,580px);
}
.hero-photo:has(> picture, > img.hero-media) > picture,
.hero-photo:has(> picture, > img.hero-media) > img.hero-media{grid-column:2;grid-row:1 / span 3;position:relative;display:block;min-height:100%;overflow:hidden}
.hero-photo > picture > img.hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero-photo > img.hero-media{position:relative;inset:auto;z-index:0;width:100%;height:100%;object-fit:cover}
@media (min-width:861px){.hero-photo > img.hero-media{height:min(70vh,640px)}} /* v2.4.148: a portrait featured photo no longer stretches the top section to its full height */
.hero-photo:has(> picture, > img.hero-media) > .wrap{grid-column:1;grid-row:1;align-self:center;max-width:none;width:100%;margin:0;padding-left:var(--lv-gutter)!important;padding-right:clamp(24px,4vw,64px)!important;padding-top:clamp(40px,6vw,88px)!important;padding-bottom:clamp(40px,6vw,88px)!important}
.hero-photo:has(> picture, > img.hero-media) > :not(picture):not(.hero-media):not(.wrap){grid-column:1}
@media (max-width:860px){
  .hero-photo--text-mobile > picture,.hero-photo--text-mobile > img.hero-media{display:none!important}
  .hero-photo:has(> picture, > img.hero-media){display:flex;flex-direction:column;min-height:0}
  .hero-photo:has(> picture, > img.hero-media) > .wrap{order:1;padding:28px var(--lv-gutter) 24px!important}
  .hero-photo:has(> picture, > img.hero-media) > picture,
  .hero-photo:has(> picture, > img.hero-media) > img.hero-media{order:2;aspect-ratio:4/3;min-height:0;height:auto}
  .hero-photo:has(> picture, > img.hero-media) > :not(picture):not(.hero-media):not(.wrap){order:3}
  .hero-photo h1{font-size:clamp(32px,8.6vw,42px);line-height:1.06}
}

/* ------------------------------------------------ first-section heroes --
   Pages whose opening band is a dark section (Planning & Advice, Quotation
   terms, Contact intro) get the same light paper opening. */
#main > section.bg-navy:not(.dotgrid):first-child{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
#main > section.bg-navy:not(.dotgrid):first-child :is(h1,h2,p,li){color:var(--ink)}
#main > section.bg-navy:not(.dotgrid):first-child .lede{color:#2A2F2A}
#main > section.bg-navy:not(.dotgrid):first-child .btn-ghost{background:rgba(245,241,234,.9);color:var(--ink);border-color:rgba(31,36,32,.35)}
#main > section.bg-navy:not(.dotgrid):first-child .eyebrow{color:var(--accent)}
#main > section.bg-navy:not(.dotgrid):first-child :focus-visible{outline-color:var(--accent)}
.fn-contact-intro{background:var(--paper);border-bottom:1px solid var(--line)}

}

/* --------------------------------------------------------- proof strip -- */
/* Aligns with the page column (.wrap); under a split hero it aligns with the hero words instead. */
.hero-photo:has(> picture, > img.hero-media) + .lv-proof{padding-inline:var(--lv-gutter)}
.lv-proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 32px;padding:12px max(24px,calc((100vw - 1200px) / 2 + 24px));background:var(--paper);border-bottom:1px solid var(--line)}
.lv-proof__review{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;min-height:44px;padding:4px 0;color:var(--ink);text-decoration:none}
.lv-proof__review .lv-stars{grid-row:span 2}
.lv-proof__quote{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:17px;line-height:1.25}
.lv-proof__who{font-size:13.5px;color:var(--steel)}
.lv-proof__creds{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;padding:0;list-style:none}
.lv-proof__creds li{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:14.5px;font-weight:600;color:var(--ink)}
.lv-proof__creds li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.lv-stars{display:inline-flex;gap:2px}
.lv-stars i{width:16px;height:16px;background:#C8641E;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:860px){
  .lv-proof{padding-block:10px;gap:2px 16px}
  .lv-proof__quote{font-size:15.5px}
  .lv-proof__creds{gap:0 16px}
  .lv-proof__creds li{font-size:13px;min-height:30px}
  .lv-proof__creds li:last-child{display:none}
}

/* --------------------------------------------------- ground + footer -- */
.footer{background:var(--navy);border-top:0;color:var(--on-navy-dim)}
.footer .ground{padding-top:clamp(36px,5vw,64px)}
.footer .ground-line{display:block;height:2px;background:var(--laser)}
.footer .ground-read{display:inline-block;margin-top:8px;font-size:12.8px;font-weight:600;letter-spacing:.06em;color:var(--accent-light);font-variant-numeric:tabular-nums}
.footer-grid{padding-top:clamp(40px,5vw,64px)}
.footer h2{font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.1em;color:var(--accent-light)}
.footer a{color:var(--on-navy)}
.footer .contact-item svg{color:var(--accent-light)}
.footer-bar{border-top-color:rgba(243,239,231,.16);color:var(--on-navy-dim)}

/* -------------------------------------------------- thumb bar (phones) -- */
@media (max-width:1099px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .mobile-bar{grid-template-columns:64px 64px 1fr;gap:8px;padding:10px var(--lv-gutter) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(245,241,234,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(58,45,37,.55)}
  .mobile-bar a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:0;border-radius:4px;border:1.5px solid rgba(31,36,32,.22);background:transparent;color:var(--ink);font-weight:600;font-size:11.5px;white-space:nowrap}
  .mobile-bar a svg{width:20px;height:20px;color:var(--accent);flex:none}
  .mobile-bar a.go{flex-direction:row;background:var(--accent);border-color:var(--accent);color:#fff;font-size:15.5px;white-space:normal;text-align:center;line-height:1.15;padding:0 8px}
  @media (max-width:359px){.mobile-bar a.go{font-size:14px}}
  .mobile-bar :focus-visible{outline-color:var(--accent)}
}

/* ------------------------------------------------ buttons: no arrows --
   Homepage buttons carry no trailing arrow; the templates add one via
   fn_icon_arrow(). Hidden here rather than removed from 50 call sites. */
.btn>svg:last-child:has(path[d^="M5 12h14"]){display:none}
.cta-trust{font-family:var(--font-body);font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;gap:6px 18px}
.cta-trust svg{color:var(--accent)}

/* --------------------------------------------------- steps (timeline) --
   The homepage process reads as a ruled sequence, not a row of boxed cards. */
.steps{position:relative;gap:clamp(20px,2.5vw,36px)}
.steps li{background:none;border:0;border-radius:0;padding:0;border-top:2px solid var(--accent)}
.steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-19px 0 16px;border-radius:50%;background:var(--paper);border:2px solid var(--accent);font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:0;color:var(--accent)}
.bg-mist .steps li::before{background:var(--mist)}
.steps h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.steps p{font-size:15px;color:var(--steel)}

/* -------------------------------------------------------- review cards -- */
.quote-card{background:#FBF8F3;border:0;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--lv-shadow)}
.quote-card blockquote{font-size:16.5px;line-height:1.6;color:#2A2F2A}
.quote-card cite{padding-top:14px;border-top:1px solid var(--line)}
.quote-card .mono-label{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:400;font-size:14px;color:var(--steel)}

/* ---------------------------------------------------------- form sheet -- */
.wpcf7{background:#FBF8F3;border-radius:6px;padding:clamp(20px,2.4vw,36px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--lv-shadow)}
@media (max-width:600px){.wpcf7{padding:18px 16px}}
@media (max-width:1099px){.wpcf7-form{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}

/* -------------------------------------------------- credentials only -- */
.lv-proof--creds{justify-content:flex-start}

/* ------------------------------------------- menu button (as homepage) -- */
.fn-burger{background:var(--ink);border:0;border-radius:4px}
.fn-burger span{background:var(--paper);height:1.5px;width:18px}
.fn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.fn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.fn-burger:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.nav .nav-links a{position:relative}
@media (hover:hover) and (pointer:fine){.nav-links a:not([aria-current]):hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.35em;text-decoration-thickness:1.5px}}
.mobile-bar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#F5F1EA!important}