/*
Theme Name: Iain Macfadyen - Vancouver Mortgage Broker
Theme URI: https://yourvancouvermortgagebroker.ca
Author: Arco Media Group
Description: Custom WordPress theme for Iain Macfadyen, Vancouver Mortgage Broker. Built from approved HTML prototype.
Version: 2026.08.11.19
Text Domain: iain-theme
*/

/*
  PROTOTYPE PARITY BLOCK. Generated from the approved HTML prototype.
  Every declaration below comes verbatim from the prototype pages, so the
  WordPress site renders exactly as the HTML Iain signed off on. Where two
  prototype pages disagreed, the majority value is the base and the odd one
  out is scoped to the page it came from.

  Do not hand edit. Regenerate from the prototype instead.
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg: #f8f5f0;
  --bg2: #731212;
  --bg3: #f0ece6;
  --navy: #8B1A1A;
  --card: #ffffff;
  --border: rgba(80,10,10,0.1);
  --gold: #C9A96E;
  --gold-dim: rgba(201,169,110,0.18);
  --gold-glow: rgba(201,169,110,0.22);
  --text: #1a1a2e;
  --muted: #1a1a1a;
  --dim: rgba(80,10,10,0.35);
  --r: 14px;
  --r-lg: 22px;
}
html {
  scroll-behavior: auto;
}
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
a {
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.025;
  width: 100%;
  height: 100%;
}
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 68px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  border-bottom: 1px solid rgba(201,169,110,0.15);
  transition: transform 0.4s;
}
.nav-logo-link {
  display: flex;
  align-items: center;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s;
}
.nav-logo-img:hover {
  opacity: 0.8;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}
.nav-links a {
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 600;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--gold);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
.nav-ph {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 0.82rem;
  transition: color 0.2s;
  white-space: nowrap;
  font-weight: 700;
}
.nav-em {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 0.82rem;
  transition: color 0.2s;
  white-space: nowrap;
  font-weight: 600;
}
.nav-ph:hover {
  color: var(--gold);
}
.nav-em:hover {
  color: var(--gold);
}
.nav-cta {
  background: var(--gold) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 700 !important;
  font-size: 0.84rem;
  transition: filter 0.25s, transform 0.2s !important;
  position: relative;
}
.nav-cta:hover {
  filter: drop-shadow(0 0 14px rgba(201,169,110,0.6)) !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}
.has-drop {
  position: relative;
}
.drop-arrow {
  font-size: 0.6rem;
  opacity: 0.6;
  margin-left: 2px;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s;
}
.has-drop:hover .drop-arrow {
  transform: rotate(180deg);
}
.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #5a0f0f;
  border: 1px solid rgba(201,169,110,0.15);
  border-radius: 12px;
  padding: 0.5rem 0;
  min-width: 210px;
  list-style: none;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 400;
}
.has-drop:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown li a {
  display: block;
  padding: 0.55rem 1.2rem;
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  transition: color 0.15s, background 0.15s !important;
  border-radius: 0;
}
.dropdown li a:hover {
  color: var(--gold) !important;
  background: rgba(201,169,110,0.07);
}
.dropdown li:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
#hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 68px;
}
.hero-bg {
  position: absolute;
  inset: -15% 0 0 0;
  width: 100%;
  height: 115%;
  will-change: transform;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient( to right, rgba(18,6,6,0.72) 0%, rgba(18,6,6,0.55) 55%, rgba(18,6,6,0.30) 100% );
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 0 5%;
}
.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.hero-h1 em {
  color: var(--gold);
  font-style: italic;
}
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word {
  display: inline-block;
}
.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
html.iain-anim .hero-btns {
  opacity: 0;
  transform: translateY(20px);
}
.btn-gold {
  background: var(--gold);
  color: #ffffff;
  padding: 0.88rem 1.9rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-block;
  filter: drop-shadow(0 0 0px rgba(201,169,110,0));
  transition: filter 0.3s;
  position: relative;
  overflow: hidden;
}
.btn-gold:hover {
  filter: drop-shadow(0 0 18px rgba(201,169,110,0.45));
}
.btn-ghost {
  background: transparent;
  color: #ffffff;
  padding: 0.88rem 1.9rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
section {
  padding: 5rem 5%;
}
body.home section {
  padding: 6rem 5%;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.sec-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.55rem;
}
.sec-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem,3vw,2.6rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--text);
  margin-bottom: 0.9rem;
}
body.home .sec-h2 {
  font-size: clamp(2rem,3.5vw,2.9rem);
  line-height: 1.2;
}
.sec-p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.78;
  max-width: 540px;
}
#intro {
  background: var(--bg);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.intro-img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 560px;
  border: 1px solid var(--border);
  filter: drop-shadow(0 4px 24px rgba(10,24,40,0.1));
}
html.iain-anim .intro-img {
  opacity: 0;
  transform: translateX(-35px);
}
.intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
html.iain-anim .intro-text {
  opacity: 0;
  transform: translateX(35px);
}
.intro-text p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.85;
  margin-bottom: 1.1rem;
}
.intro-text strong {
  color: var(--text);
  font-weight: 600;
}
#services {
  background: var(--bg3);
  padding: 6rem 0;
  overflow: hidden;
}
.svc-hd {
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  gap: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.svc-swiper {
  padding: 1rem 5% 4rem !important;
  overflow: hidden !important;
  width: 100%;
  box-sizing: border-box;
}
.svc-swiper .swiper-slide {
  height: 400px;
  width: auto;
}
.svc-card {
  border: none;
  border-radius: var(--r-lg);
  padding: 2rem;
  color: #ffffff;
  display: flex;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .3s,box-shadow .3s;
  user-select: none;
  background-size: cover !important;
  background-position: center !important;
}
body.home .svc-card {
  transition: transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s,background-size .6s;
}
.svc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18,6,6,0.92) 0%, rgba(18,6,6,0.5) 50%, rgba(18,6,6,0.2) 100%);
  z-index: 1;
  transition: background 0.4s;
}
.svc-card:hover::after {
  background: linear-gradient(to top, rgba(18,6,6,0.97) 0%, rgba(18,6,6,0.6) 50%, rgba(18,6,6,0.25) 100%);
}
.svc-card>* {
  position: relative;
  z-index: 2;
}
.svc-card:hover {
  transform: translatey(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  background-size: 110% !important;
}
body.home .svc-card:hover {
  transform: translatey(-6px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.svc-n {
  font-size: 0.64rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}
.svc-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}
.svc-arr {
  color: var(--gold);
  font-size: 1.1rem;
  margin-top: 1.25rem;
  display: inline-block;
  transition: transform 0.2s;
}
.svc-card:hover .svc-arr {
  transform: translateX(5px);
}
.swiper-button-prev {
  color: var(--gold) !important;
  background: rgba(255,255,255,0.9);
  width: 42px !important;
  height: 42px !important;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(10,24,40,0.12);
  transition: background 0.2s, box-shadow 0.2s;
}
.swiper-button-next {
  color: var(--gold) !important;
  background: rgba(255,255,255,0.9);
  width: 42px !important;
  height: 42px !important;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(10,24,40,0.12);
  transition: background 0.2s, box-shadow 0.2s;
}
.swiper-button-prev:hover {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(10,24,40,0.18);
}
.swiper-button-next:hover {
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(10,24,40,0.18);
}
.swiper-button-prev::after {
  font-size: 0.9rem !important;
  font-weight: 900;
}
.swiper-button-next::after {
  font-size: 0.9rem !important;
  font-weight: 900;
}
.svc-pagination .swiper-pagination-bullet {
  background: var(--muted) !important;
  opacity: 0.4 !important;
}
.svc-pagination .swiper-pagination-bullet-active {
  background: var(--gold) !important;
  opacity: 1 !important;
}
#lenders {
  background: #ffffff;
  padding: 3.4rem 0;
}
.lenders-hd {
  text-align: center;
  margin-bottom: 2.5rem;
  padding: 0 5%;
}
.lenders-track-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.lenders-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: lenders-scroll 24s linear infinite;
}
.lenders-track-wrap:hover .lenders-track {
  animation-play-state: paused;
}
.lchip {
  background: #ffffff;
  border: 1px solid rgba(10,24,40,0.08);
  border-radius: 12px;
  height: 80px;
  width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  overflow: hidden;
}
.lchip:hover {
  border-color: rgba(201,169,110,0.45);
  box-shadow: 0 6px 24px rgba(10,24,40,0.08);
  transform: translateY(-2px);
}
.lchip img {
  max-height: 38px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lchip-fallback {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
#testimonials {
  background: var(--bg2);
  padding: 4rem 5%;
}
#testimonials .sec-h2 {
  color: #ffffff;
}
.testi-hd {
  text-align: center;
  margin-bottom: 3rem;
}
body.home .swiper {
  padding-bottom: 3rem !important;
}
.swiper-slide {
  height: auto;
}
.tcard {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  height: 100%;
  transition: border-color 0.3s, filter 0.3s;
  transform-style: preserve-3d;
}
.tcard:hover {
  border-color: var(--gold-dim);
  filter: drop-shadow(0 0 20px rgba(201,169,110,0.1));
}
.tcard-stars {
  color: var(--gold);
  letter-spacing: 3px;
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
}
.tcard-text {
  color: rgba(255,255,255,0.95);
  font-size: 0.9rem;
  line-height: 1.72;
  margin-bottom: 1.6rem;
  font-style: italic;
}
.tcard-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tcard-av {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  background: var(--gold-dim);
  flex-shrink: 0;
}
.tcard-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcard-av-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--gold);
  font-size: 0.84rem;
}
.tcard-name {
  font-weight: 600;
  color: #ffffff;
  font-size: 0.88rem;
}
.tcard-loc {
  color: rgba(255,255,255,0.9);
  font-size: 0.76rem;
  margin-top: 2px;
}
.swiper-pagination-bullet {
  background: rgba(255,255,255,0.25) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background: var(--gold) !important;
}
#blog {
  background: var(--bg);
}
.blog-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.75rem;
}
.blog-hd a {
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 600;
}
.blog-hd a:hover {
  text-decoration: underline;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.75rem;
}
body.home .blog-grid {
  grid-template-columns: repeat(4,1fr);
  gap: 1.4rem;
}
.bcard {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--text);
  display: block;
  transition: box-shadow 0.3s, transform 0.3s;
}
html.iain-anim .bcard {
  opacity: 0;
  transform: translateY(28px);
}
.bcard:hover {
  box-shadow: 0 12px 40px rgba(10,24,40,.1);
  transform: translatey(-4px);
}
body.home .bcard:hover {
  box-shadow: 0 10px 36px rgba(10,24,40,.1);
  transform: translatey(-3px);
}
.bthumb {
  height: 180px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.home .bthumb {
  height: 160px;
}
.bthumb-1 {
  background: linear-gradient(135deg, #5a0f0f 0%, #8B1A1A 100%);
}
.bthumb-2 {
  background: linear-gradient(135deg, #3d0a0a 0%, #6e1a1a 100%);
}
.bthumb-3 {
  background: linear-gradient(135deg, #4a0e0e 0%, #7a3030 100%);
}
.bthumb-4 {
  background: linear-gradient(135deg, #6e2010 0%, #9e3a1a 100%);
}
.bthumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,0.5), transparent);
}
.bthumb-pattern {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  opacity: 0.15;
}
.bp-line {
  height: 1px;
  background: var(--gold);
  width: 40px;
}
.bp-line:nth-child(1) {
  width: 60px;
}
.bp-line:nth-child(2) {
  width: 40px;
}
.bp-line:nth-child(3) {
  width: 25px;
}
.bbody {
  padding: 1.5rem;
}
body.home .bbody {
  padding: 1.35rem;
}
.bdate {
  font-size: 0.68rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
body.home .bdate {
  margin-bottom: .45rem;
}
.bcard h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.42;
  margin-bottom: .6rem;
  color: var(--text);
}
body.home .bcard h3 {
  font-size: .93rem;
  margin-bottom: .55rem;
}
.bcard p {
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.68;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.1rem;
}
body.home .bcard p {
  font-size: .83rem;
  line-height: 1.65;
}
.bcard-by {
  font-size: 0.73rem;
  color: rgba(10,24,40,0.35);
  margin-top: 0.75rem;
}
#cta {
  background: var(--bg2);
  padding: 6rem 5%;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#cta::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201,169,110,0.06), transparent 65%);
  pointer-events: none;
}
.cta-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.cta-left {
  position: relative;
}
.cta-left .sec-tag {
  display: block;
  margin-bottom: 0.6rem;
}
.cta-left h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.cta-left p {
  color: rgba(255,255,255,0.9);
  font-size: 0.97rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.cta-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.9);
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
}
.cta-contact-line a {
  color: rgba(255,255,255,0.9);
  transition: color 0.2s;
}
.cta-contact-line a:hover {
  color: var(--gold);
}
.cta-contact-line svg {
  flex-shrink: 0;
  color: var(--gold);
}
.cta-divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  opacity: 0.4;
  margin: 2rem 0;
}
.cta-response {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  line-height: 1.6;
}
.cta-response strong {
  color: var(--gold);
  font-weight: 600;
}
.cta-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}
.cta-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.75rem;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.cta-form .cf-field {
  margin-bottom: .85rem;
}
.contact-form .cf-field {
  margin-bottom: .85rem;
}
.cf-field label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.4rem;
}
.cta-form .cf-field label {
  font-size: .72rem;
  color: rgba(255,255,255,.9);
}
.contact-form .cf-field label {
  font-size: .72rem;
  color: rgba(255,255,255,.9);
}
.cf-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .8rem 1rem;
  color: var(--text);
  font-size: .92rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.cta-form .cf-field input {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: .75rem 1rem;
  color: #ffffff;
  font-size: .9rem;
  transition: border-color .2s,background .2s;
}
.contact-form .cf-field input {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: .75rem 1rem;
  color: #ffffff;
  font-size: .9rem;
  transition: border-color .2s,background .2s;
}
.cf-field select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  appearance: none;
  cursor: pointer;
}
.cf-field textarea {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  resize: vertical;
  min-height: 110px;
}
.cf-field input::placeholder {
  color: rgba(255,255,255,0.9);
}
.cf-field textarea::placeholder {
  color: rgba(255,255,255,0.9);
}
.cf-field input:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.1);
  outline: none;
}
.cf-field select:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.1);
}
.cf-field textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.1);
}
.cf-field select option {
  background: #5a0f0f;
  color: #ffffff;
}
.contact-form .cf-field textarea {
  min-height: 120px;
}
.cf-submit {
  width: 100%;
  background: var(--navy);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: .85rem 1.75rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: filter .25s;
  margin-top: 0.5rem;
}
.cta-form .cf-submit {
  background: var(--gold);
  padding: .95rem;
  font-size: .92rem;
  transition: filter .25s,transform .2s;
}
.contact-form .cf-submit {
  background: var(--gold);
  padding: .95rem;
  font-size: .92rem;
  transition: filter .25s,transform .2s;
}
.cf-submit:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.cta-form .cf-submit:hover {
  filter: drop-shadow(0 0 14px rgba(201,169,110,.5));
}
.contact-form .cf-submit:hover {
  filter: drop-shadow(0 0 14px rgba(201,169,110,.5));
}
footer {
  background: #1a0808;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 5rem 5% 2rem;
  position: relative;
  overflow: hidden;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
.footer-top {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 2.75rem;
  margin-bottom: 3rem;
}
.f-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  display: block;
  margin-bottom: 0.9rem;
}
.f-logo em {
  color: var(--gold);
  font-style: normal;
}
.f-bio {
  color: rgba(255,255,255,0.9);
  font-size: 0.84rem;
  line-height: 1.74;
  margin-bottom: 1.25rem;
}
.f-contact a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
}
.f-contact a:hover {
  color: var(--gold);
}
.f-col h4 {
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 1.1rem;
}
.f-col ul {
  list-style: none;
}
.f-col ul li {
  margin-bottom: 0.55rem;
}
.f-col ul li a {
  color: rgba(255,255,255,0.9);
  font-size: 0.83rem;
  transition: color 0.2s;
}
.f-col ul li a:hover {
  color: var(--gold);
}
.newsletter h4 {
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 1.1rem;
}
.nl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.nl-field input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 0.6rem 0.85rem;
  color: #fff;
  font-size: 0.82rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.nl-field input::placeholder {
  color: rgba(255,255,255,0.9);
}
.nl-field input:focus {
  border-color: var(--gold);
}
.nl-field {
  margin-bottom: 0.6rem;
}
.nl-submit {
  width: 100%;
  background: var(--gold);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 0.65rem;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
  font-family: 'Inter', sans-serif;
}
.nl-submit:hover {
  filter: drop-shadow(0 0 12px rgba(201,169,110,0.4));
}
.footer-bot {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bot p {
  color: rgba(255,255,255,0.9);
  font-size: 0.75rem;
}
.footer-bot a {
  color: rgba(255,255,255,0.9);
  transition: color 0.2s;
}
.footer-bot a:hover {
  color: var(--gold);
}
.hero-sub {
  color: rgba(255,255,255,0.9);
  font-size: 1.05rem;
  line-height: 1.72;
  margin-bottom: 2rem;
  max-width: 560px;
}
html.iain-anim .hero-sub {
  opacity: 0;
  transform: translateY(16px);
}
.hero-social {
  margin-top: 1.75rem;
}
html.iain-anim .hero-social {
  opacity: 0;
  transform: translateY(10px);
}
.hero-reviews {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 0.84rem;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.45rem 1rem;
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}
.hero-reviews:hover {
  border-color: var(--gold);
  color: rgba(255,255,255,0.9);
}
.hero-stars {
  color: var(--gold);
  letter-spacing: 1px;
  font-size: 0.78rem;
}
.hero-reviews strong {
  color: #ffffff;
  font-weight: 600;
}
#rates {
  background: var(--bg3);
}
.rates-hd {
  text-align: center;
  margin-bottom: 2.5rem;
}
.rates-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(201,169,110,0.12);
  border: 1px solid rgba(201,169,110,0.22);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
}
.rates-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.rates-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.rcard {
  background: #ffffff;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
html.iain-anim .rcard {
  opacity: 0;
  transform: translateY(22px);
}
.rcard:hover {
  box-shadow: 0 8px 28px rgba(10,24,40,0.08);
  transform: translateY(-3px) !important;
  border-color: rgba(201,169,110,0.4);
}
.rcard-popular {
  border-color: rgba(201,169,110,0.5);
  box-shadow: 0 4px 20px rgba(201,169,110,0.1);
}
.rcard.is-selected {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 24px rgba(201,169,110,0.22) !important;
}
.rcard-pop-tag {
  display: inline-block;
  background: var(--gold);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  align-self: flex-start;
}
.rcard-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.rcard-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.rcard-desc {
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.68;
  flex: 1;
}
.estimator {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  position: sticky;
  top: 88px;
}
.est-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.est-selected-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.est-slider-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}
.est-budget-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.65rem;
}
.est-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  outline: none;
  margin-bottom: 1.5rem;
  cursor: pointer;
  background: rgba(80,10,10,0.1);
}
.est-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(201,169,110,0.45);
}
.est-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(201,169,110,0.45);
}
.est-outputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.est-output {
  background: var(--bg3);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.est-output-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.est-output-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.est-fine {
  font-size: 0.71rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.est-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  border: 1.5px solid var(--navy);
  border-radius: 7px;
  padding: 0.7rem 1.1rem;
  transition: background 0.2s, color 0.2s;
  width: 100%;
}
.est-cta:hover {
  background: var(--navy);
  color: #ffffff;
}
.rates-disclaimer {
  text-align: center;
  color: #1a1a2e;
  font-weight: 700;
  font-size: 0.82rem;
  max-width: 640px;
  margin: 2rem auto 0;
  line-height: 1.7;
}
#process {
  background: var(--bg3);
}
.process-hd {
  text-align: center;
  margin-bottom: 3.5rem;
}
.process-hd .sec-h2 {
  margin-bottom: 0.6rem;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.pstep {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: box-shadow 0.3s, transform 0.3s;
}
html.iain-anim .pstep {
  opacity: 0;
  transform: translateY(24px);
}
.pstep:hover {
  box-shadow: 0 10px 36px rgba(10,24,40,0.08);
  transform: translatey(-4px);
}
body.home .pstep:hover {
  transform: translatey(-4px) !important;
}
.pstep-connector {
  position: absolute;
  top: 2.25rem;
  right: -1.05rem;
  z-index: 2;
  color: #1a1a1a;
  opacity: 1;
  font-size: 1.1rem;
  font-weight: 900;
  pointer-events: none;
}
.pstep:last-child .pstep-connector {
  display: none;
}
.pstep-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #1a1a1a;
  opacity: 1;
  line-height: 1;
  margin-bottom: 1.1rem;
}
.pstep h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.pstep p {
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.76;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 299;
  background: var(--navy);
  border-top: 1px solid rgba(201,169,110,0.15);
  padding: 1.25rem 5% 1.75rem;
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu a {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.mobile-menu a:last-child {
  border-bottom: none;
}
.mobile-menu a:hover {
  color: var(--gold);
}
.mobile-menu .mob-section-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 1.1rem 0 0.4rem;
  border-bottom: none;
}
.mobile-menu .mob-sub {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 0.55rem 0 0.55rem 1rem;
}
.mob-cta-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.mob-cta-row a {
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  flex: 1;
  min-width: 140px;
}
.mob-cta-row .mob-btn-gold {
  background: var(--gold);
  color: #ffffff;
}
.mob-cta-row .mob-btn-ghost {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--gold);
  border: 1px solid rgba(198,163,108,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: var(--gold);
  color: var(--maroon);
}
#back-to-top svg {
  width: 20px;
  height: 20px;
}
.page-hero {
  background: var(--bg2);
  padding: 6.5rem 5% 5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.page-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.breadcrumb {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb a {
  color: rgba(255,255,255,0.9);
  transition: color 0.2s;
}
.breadcrumb a:hover {
  color: var(--gold);
}
.page-hero h1 {
  font-family: 'Playfair Display',serif;
  font-size: clamp(2.2rem,4vw,3.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.85rem;
}
.page-hero h1 em {
  color: #ffffff;
  font-style: normal;
}
.page-hero-sub {
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  max-width: 580px;
  line-height: 1.72;
}
#bio {
  background: var(--bg);
}
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
}
.bio-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 580px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  filter: drop-shadow(0 4px 24px rgba(10,24,40,0.1));
}
.bio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.bio-text p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.85;
  margin-bottom: 1.2rem;
}
.bio-text strong {
  color: var(--text);
  font-weight: 600;
}
.bio-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  margin: 2.5rem 0;
}
.bio-stat {
  background: var(--bg3);
  border-radius: var(--r);
  padding: 1.25rem;
  text-align: center;
}
.bio-stat-num {
  font-family: 'Playfair Display',serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.bio-stat-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.35rem;
  font-weight: 500;
}
#video-section {
  background: var(--bg3);
  padding: 5rem 5%;
}
.video-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.video-inner .sec-tag {
  display: block;
  text-align: center;
  margin-bottom: 0.5rem;
}
.video-inner h2 {
  font-family: 'Playfair Display',serif;
  font-size: clamp(1.7rem,2.8vw,2.4rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 0.7rem;
}
.video-inner p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(10,24,40,0.15);
  border: 1px solid var(--border);
}
.video-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.video-thumb:hover img {
  opacity: 0.7;
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s,background 0.2s;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
.video-thumb:hover .video-play {
  transform: translate(-50%,-50%) scale(1.1);
  background: #fff;
}
.video-play svg {
  width: 28px;
  height: 28px;
  fill: var(--navy);
  margin-left: 4px;
}
#quote {
  background: var(--bg2);
  padding: 5rem 5%;
}
.quote-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.quote-mark {
  font-family: 'Playfair Display',serif;
  font-size: 5rem;
  color: var(--gold);
  opacity: 0.3;
  line-height: 0.7;
  margin-bottom: 1.5rem;
}
.quote-text {
  font-family: 'Playfair Display',serif;
  font-size: clamp(1.4rem,2.5vw,2rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 1.5rem;
}
.quote-attr {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
#values {
  background: var(--bg3);
}
.values-hd {
  margin-bottom: 3rem;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.vcard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: box-shadow 0.3s,transform 0.3s;
}
.vcard:hover {
  box-shadow: 0 10px 36px rgba(10,24,40,0.08);
  transform: translateY(-3px);
}
.vcard-icon {
  width: 44px;
  height: 44px;
  background: var(--gold-dim);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.vcard h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.vcard p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.72;
}
.mini-cta {
  background: var(--bg2);
  padding: 5rem 5%;
  position: relative;
  overflow: hidden;
}
.mini-cta::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle,rgba(201,169,110,0.07),transparent 65%);
  pointer-events: none;
}
.mini-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.mini-cta h2 {
  font-family: 'Playfair Display',serif;
  font-size: clamp(1.7rem,2.8vw,2.4rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
}
.mini-cta p {
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-top: 0.6rem;
  max-width: 500px;
}
.mini-cta-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.btn-ghost-light {
  background: transparent;
  color: #fff;
  padding: 0.88rem 1.9rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.3);
  transition: border-color 0.2s,color 0.2s;
}
.btn-ghost-light:hover {
  border-color: var(--gold);
  color: var(--gold);
}
#faq-section {
  background: var(--bg);
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.faq-sidebar {
  position: sticky;
  top: 92px;
}
.faq-sidebar h3 {
  font-family: 'Playfair Display',serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
.faq-sidebar p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.72;
  margin-bottom: 1.5rem;
}
.faq-sidebar a {
  display: block;
  background: var(--gold);
  color: #fff;
  padding: 0.82rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  transition: filter 0.2s;
  margin-bottom: 0.75rem;
}
.faq-sidebar a:hover {
  filter: drop-shadow(0 0 12px rgba(201,169,110,0.5));
}
.faq-sidebar-phone {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.faq-sidebar-phone a {
  color: var(--navy);
  font-weight: 700;
}
.faq-sidebar-phone a:hover {
  color: var(--gold);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter',sans-serif;
}
.faq-q-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s,border-color 0.2s;
}
.faq-icon svg {
  transition: transform 0.3s;
  color: var(--muted);
}
.faq-item.open .faq-icon {
  background: var(--gold);
  border-color: var(--gold);
}
.faq-item.open .faq-icon svg {
  transform: rotate(45deg);
  color: #fff;
}
.faq-a {
  display: none;
  padding: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.82;
  max-width: 680px;
}
.faq-a a {
  color: var(--navy);
  font-weight: 600;
}
.faq-a a:hover {
  color: var(--gold);
}
.faq-item.open .faq-a {
  display: block;
}
#solutions-carousel {
  background: var(--bg3);
  padding: 6rem 0;
  overflow: hidden;
}
#broker-why {
  background: var(--bg);
}
.broker-why-hd {
  margin-bottom: 3rem;
}
.broker-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.broker-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: box-shadow 0.3s, transform 0.3s;
}
.broker-card:hover {
  box-shadow: 0 10px 36px rgba(10,24,40,0.08);
  transform: translateY(-3px);
}
.broker-icon {
  width: 44px;
  height: 44px;
  background: var(--gold-dim);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.broker-icon svg {
  color: var(--gold);
}
.broker-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.broker-card p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.72;
}
#sol-process {
  background: var(--bg3);
}
.sol-process-hd {
  text-align: center;
  margin-bottom: 3.5rem;
}
.sol-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
#contact-section {
  background: var(--bg2);
  padding: 6rem 5%;
  position: relative;
  overflow: hidden;
}
#contact-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,rgba(201,169,110,0.06),transparent 65%);
  pointer-events: none;
}
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}
.contact-info .sec-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.6rem;
}
.contact-info h2 {
  font-family: 'Playfair Display',serif;
  font-size: clamp(2rem,3.5vw,2.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 1.1rem;
}
.contact-info p {
  color: rgba(255,255,255,0.92);
  font-size: 0.97rem;
  line-height: 1.8;
  margin-bottom: 2rem;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.9rem;
  margin-bottom: 0.85rem;
}
.contact-line a {
  color: #ffffff;
  transition: color 0.2s;
}
.contact-line a:hover {
  color: var(--gold);
}
.contact-line svg {
  flex-shrink: 0;
  color: var(--gold);
}
.contact-divider {
  width: 40px;
  height: 2px;
  background: var(--gold);
  opacity: 0.4;
  margin: 2rem 0;
}
.contact-hours {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin-top: 0.5rem;
}
.contact-hours p {
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
  line-height: 1.65;
  margin-bottom: 0;
}
.contact-hours strong {
  color: var(--gold);
  font-weight: 600;
}
.contact-affil {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  margin-top: 1rem;
}
.contact-affil p {
  color: rgba(255,255,255,0.9);
  font-size: 0.78rem;
  line-height: 1.65;
  margin: 0;
}
.contact-form {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}
.form-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.75rem;
}
#quick-contact {
  background: var(--bg3);
  padding: 5rem 5%;
}
.qc-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.qc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.3s,transform 0.3s;
}
.qc-card:hover {
  box-shadow: 0 10px 36px rgba(10,24,40,0.08);
  transform: translateY(-3px);
}
.qc-icon {
  width: 52px;
  height: 52px;
  background: var(--gold-dim);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
}
.qc-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.qc-card p {
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}
.qc-link {
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.qc-link:hover {
  color: var(--gold);
}
.guide-intro {
  background: var(--bg);
  padding-bottom: 0;
}
.guide-intro-text {
  max-width: 800px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.82;
}
.chapters-section {
  background: var(--bg);
  padding-top: 2rem;
}
.chapters-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.chapter-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  transition: transform 0.25s,border-color 0.25s,box-shadow 0.25s;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chapter-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139,26,26,0.08);
}
.ch-card-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.ch-card-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.ch-card-arrow {
  color: var(--gold);
  font-size: 0.85rem;
  margin-top: auto;
  transition: transform 0.2s;
}
.chapter-card:hover .ch-card-arrow {
  transform: translateX(4px);
}
#page-content {
  background: var(--bg);
}
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.content-body h3 {
  font-family: 'Playfair Display',serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 2.25rem 0 0.75rem;
  line-height: 1.3;
}
.content-body h3:first-child {
  margin-top: 0;
}
.content-body p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.82;
  margin-bottom: 1rem;
}
.content-body ul {
  margin: 0.5rem 0 1.25rem;
  padding-left: 0;
  list-style: none;
}
.content-body ol {
  margin: 0.5rem 0 1.25rem;
  padding-left: 1.5rem;
}
.content-body ul li {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.72;
  padding: 0.3rem 0 0.3rem 1.5rem;
  position: relative;
}
.content-body ul li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.85rem;
}
.content-body ol li {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.72;
  padding: 0.3rem 0;
}
.content-sidebar {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-nav-box {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.sidebar-nav-box h4 {
  font-family: 'Playfair Display',serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
.ch-nav-list {
  list-style: none;
}
.ch-nav-list li {
  margin-bottom: 0;
}
.ch-nav-list li a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-size: 0.84rem;
  border-radius: 6px;
  transition: color 0.2s,background 0.2s;
  line-height: 1.45;
}
.ch-nav-list li a:hover {
  color: var(--navy);
  background: var(--bg3);
}
.ch-nav-list li a.active {
  color: var(--navy);
  background: var(--gold-dim);
  font-weight: 600;
}
.ch-nav-list li:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.sidebar-cta {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.sidebar-cta h4 {
  font-family: 'Playfair Display',serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.7rem;
}
.sidebar-cta p {
  color: rgba(255,255,255,0.9);
  font-size: 0.85rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.sidebar-cta-btn {
  display: block;
  text-align: center;
  background: var(--gold);
  color: #fff;
  padding: 0.82rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: filter 0.2s;
  margin-bottom: 0.85rem;
}
.sidebar-cta-btn:hover {
  filter: drop-shadow(0 0 12px rgba(201,169,110,0.5));
}
.sidebar-cta-phone {
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
}
.sidebar-cta-phone a {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  transition: color 0.2s;
}
.sidebar-cta-phone a:hover {
  color: var(--gold);
}
.chapter-nav-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.ch-prev {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s;
}
.ch-next {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s;
  margin-left: auto;
}
.ch-prev:hover {
  color: var(--gold);
}
.ch-next:hover {
  color: var(--gold);
}
#posts {
  background: var(--bg);
}
.bthumb-5 {
  background: linear-gradient(135deg,#2d0808 0%,#5a1a1a 100%);
}
.bthumb-6 {
  background: linear-gradient(135deg,#580c0c 0%,#8a2020 100%);
}
.bthumb-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.bthumb-icon svg {
  width: 64px;
  height: 64px;
  opacity: 0.25;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
}
.bcard-read {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}
.bcard-read::after {
  content: '→';
  transition: transform 0.2s;
}
.bcard:hover .bcard-read {
  color: var(--gold);
}
.bcard:hover .bcard-read::after {
  transform: translateX(4px);
}
.post-hero {
  background: var(--bg2);
  padding: 6.5rem 5% 5rem;
  position: relative;
  overflow: hidden;
}
.post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.post-hero-inner {
  max-width: 780px;
  margin: 0 auto;
}
.post-meta {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.post-hero h1 {
  font-family: 'Playfair Display',serif;
  font-size: clamp(1.9rem,3.5vw,3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0;
}
#post-body {
  background: var(--bg);
}
.post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 4rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.post-content h2 {
  font-family: 'Playfair Display',serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 0.75rem;
  line-height: 1.3;
}
.post-content h2:first-child {
  margin-top: 0;
}
.post-content p {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.85;
  margin-bottom: 1.1rem;
}
.post-content strong {
  color: var(--text);
  font-weight: 600;
}
.post-content ul {
  list-style: none;
  margin: 0.5rem 0 1.25rem;
}
.post-content ul li {
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.72;
  padding: 0.3rem 0 0.3rem 1.5rem;
  position: relative;
}
.post-content ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.85rem;
}
.post-sidebar {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.sidebar-box h4 {
  font-family: 'Playfair Display',serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
body.single .sidebar-box h4 {
  font-size: 1.05rem;
  margin-bottom: .85rem;
}
.sidebar-box p {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}
body.single .sidebar-box p {
  font-size: .86rem;
  line-height: 1.72;
}
.sidebar-box a {
  display: block;
  background: var(--gold);
  color: #fff;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  transition: filter 0.2s;
}
.sidebar-box a:hover {
  filter: drop-shadow(0 0 10px rgba(201,169,110,0.5));
}
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
  transition: color 0.2s;
}
.post-back:hover {
  color: var(--gold);
}
.post-back::before {
  content: '←';
}
.sidebar-why-list {
  list-style: none;
  margin-top: 0.85rem;
}
.sidebar-why-list li {
  font-size: 0.87rem;
  color: var(--muted);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.55;
}
.sidebar-why-list li:last-child {
  border-bottom: none;
}
.sidebar-why-list li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
}
.partner-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin: 2rem 0;
}
.partner-photo {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
}
.partner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.partner-info h3 {
  font-family: 'Playfair Display',serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.partner-role {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.partner-info p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0.9rem;
}
.partner-contact {
  font-weight: 600;
}
.partner-contact a {
  color: var(--navy);
  transition: color 0.2s;
}
.partner-contact a:hover {
  color: var(--gold);
}
.guide-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}
.guide-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s,border-color 0.25s,box-shadow 0.25s;
}
.guide-card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 34px rgba(139,26,26,0.09);
}
.guide-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg3);
}
.guide-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guide-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.guide-card-body h3 {
  font-family: 'Playfair Display',serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.guide-card-body p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.78;
}
.guide-card-arrow {
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 600;
  margin-top: auto;
  transition: transform 0.2s;
  display: inline-block;
}
.guide-card:hover .guide-card-arrow {
  transform: translateX(4px);
}
.inline-form-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin: 2rem 0;
  max-width: 560px;
}
.inline-form-box .form-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.form-note {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.72;
  line-height: 1.6;
}
.content-grid.no-sidebar {
  grid-template-columns: 1fr;
  max-width: 820px;
}
.sidebar-box a.btn {
  display: block;
  background: var(--gold);
  color: #fff;
  padding: 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  transition: filter 0.2s;
}
.sidebar-box a.btn:hover {
  filter: drop-shadow(0 0 10px rgba(201,169,110,0.5));
}

@media (max-width: 1060px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
  .intro-img {
    height: 360px;
  }
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  body.home .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:960px) {
  .bio-grid {
    grid-template-columns: 1fr;
  }
  .bio-img {
    height: 380px;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mini-cta-inner {
    flex-direction: column;
  }
  .faq-layout {
    grid-template-columns: 1fr;
  }
  .faq-sidebar {
    position: static;
  }
  .chapters-grid {
    grid-template-columns: repeat(2,1fr);
  }
  .content-grid {
    grid-template-columns: 1fr;
  }
  .content-sidebar {
    position: static;
  }
  .blog-grid {
    grid-template-columns: repeat(2,1fr);
  }
  body.home .blog-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 900px) {
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .cf-row {
    grid-template-columns: 1fr;
  }
  .rates-layout {
    grid-template-columns: 1fr;
  }
  .estimator {
    position: static;
  }
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pstep-connector {
    display: none;
  }
  .broker-cards {
    grid-template-columns: 1fr 1fr;
  }
  .sol-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mini-cta-inner {
    flex-direction: column;
  }
  .svc-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

@media (max-width:900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .qc-grid {
    grid-template-columns: 1fr 1fr;
  }
  .post-layout {
    grid-template-columns: 1fr;
  }
  .post-sidebar {
    position: static;
  }
}

@media (max-width:860px) {
  .partner-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .partner-photo {
    max-width: 220px;
  }
  .guide-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width:768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .bio-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  nav {
    padding: 0 4%;
  }
  .nav-links {
    display: none;
  }
  .nav-actions .nav-ph {
    display: none;
  }
  .nav-actions .nav-em {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .mobile-menu {
    display: block;
  }
  section {
    padding: 4rem 4%;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .svc-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .rates-layout {
    grid-template-columns: 1fr;
  }
  .rates-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .estimator {
    position: static;
  }
  .rcard {
    padding: 1.1rem 1rem;
  }
  .rcard-name {
    font-size: 0.92rem;
  }
  .rcard-desc {
    font-size: 0.78rem;
  }
  .broker-cards {
    grid-template-columns: 1fr;
  }
  .sol-process-grid {
    grid-template-columns: 1fr;
  }
  body.home section {
    padding: 4rem 4%;
  }
  body.home .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
  .qc-grid {
    grid-template-columns: 1fr;
  }
  .chapters-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .rates-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* at-rules carried over from the prototype */
@keyframes lenders-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }


/* ══════════════════════════════════════════════════════════════════
   WORDPRESS LAYER

   Everything below exists because this is a live WordPress site and the
   prototype was a set of static files. Nothing here restyles the design.
   It covers the admin bar, comments, pagination, search and 404 states,
   keyboard accessibility, printing, the responsive navigation fix, and a
   guard against plugin stylesheets overriding the theme.
   ══════════════════════════════════════════════════════════════════ */
.mobile-menu {
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu.open {
  visibility: visible;
  pointer-events: auto;
}
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.wpcf7 .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-family: 'Inter', sans-serif !important;
  outline: none !important;
  width: 100% !important;
}
.wpcf7 input[type="submit"] {
  width: 100% !important;
  background: var(--gold) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.95rem !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
}
.content-body h3 {
  margin-bottom: 0.8rem;
  margin-top: 2rem;
}
.content-body ul {
  margin-bottom: 1rem;
}
.content-body ul li {
  margin-bottom: 0.4rem;
}
.sidebar-box {
  margin-bottom: 1.25rem;
}
.sidebar-box a:hover {
  color: var(--gold);
}
.sidebar-why-list {
  padding: 0;
}
.sidebar-cta {
  color: #ffffff;
}
.post-meta {
  align-items: center;
}
.post-hero h1 {
  max-width: 800px;
}
.post-back {
  font-weight: 700;
}
.post-content ul {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.post-content ul li {
  margin-bottom: 0.35rem;
}
.blog-listing .blog-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.blog-listing .bcard {
  opacity: 1;
  transform: none;
}
.blog-listing .bthumb {
  height: 180px;
}
.blog-listing .bbody {
  padding: 1.5rem;
}
.blog-listing .bcard h3 {
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.blog-listing .bcard p {
  font-size: 0.86rem;
  line-height: 1.68;
  margin-bottom: 1.1rem;
}
.guide-cover-link {
  display: block;
  max-width: 420px;
  margin: 2.5rem 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.25s,box-shadow 0.25s;
}
.guide-cover-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(139,26,26,0.12);
}
.guide-cover-link img {
  width: 100%;
  height: auto;
}
.content-body ul li {
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}
.content-body ul li::before {
  font-weight: 700;
}
.content-body ol {
  list-style: decimal;
}
.content-body ol li {
  margin-bottom: 0.6rem;
  padding-left: 0.25rem;
}
.content-body ol li::before {
  content: none;
}
.inline-form-box .wpforms-container {
  margin: 0;
}
html.iain-anim .hero-btns {
  opacity: 0;
  transform: translateY(20px);
}
html.iain-anim .hero-sub {
  opacity: 0;
  transform: translateY(16px);
}
html.iain-anim .hero-social {
  opacity: 0;
  transform: translateY(10px);
}
html.iain-anim .intro-img {
  opacity: 0;
  transform: translateX(-35px);
}
html.iain-anim .intro-text {
  opacity: 0;
  transform: translateX(35px);
}
html.iain-anim .bcard {
  opacity: 0;
  transform: translateY(28px);
}
html.iain-anim .rcard {
  opacity: 0;
  transform: translateY(22px);
}
html.iain-anim .pstep {
  opacity: 0;
  transform: translateY(24px);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--gold);
  color: #1a1a1a;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: 0.9rem;
}
.skip-link:focus {
  left: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .rcard:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.footer-top .f-contact, .footer-top .f-contact *, .footer-top .f-bio {
  color: rgba(255,255,255,0.82);
}
.footer-top .f-contact a:hover {
  color: var(--gold);
}
.newsletter input::placeholder {
  color: rgba(255,255,255,0.55);
}
.blog-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}
/* WordPress puts the class page-numbers on the list itself as well as on each
   link, so the button styling below was being applied to the whole list, which
   gave it a white box, its own border and padding, and stacked the numbers
   vertically. The list is targeted on its own here, and the button styling
   below is limited to the links and spans inside it. */
.blog-pagination ul,
.blog-pagination ul.page-numbers {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}
.blog-pagination li {
  margin: 0;
}
.blog-pagination a.page-numbers,
.blog-pagination span.page-numbers {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.9rem;
  background: #fff;
  transition: border-color 0.2s,color 0.2s;
}
.blog-pagination a.page-numbers:hover {
  border-color: var(--gold);
  color: var(--navy);
}
.blog-pagination a.page-numbers.current,
.blog-pagination span.page-numbers.current {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.blog-pagination li::before {
  content: none;
}
.form-fallback {
  padding: 1.5rem 0;
}
.form-fallback p {
  margin-bottom: 1rem;
  color: var(--muted);
}
body.admin-bar nav {
  top: 32px;
}
body.admin-bar .mobile-menu {
  top: 100px;
}
.footer-top .f-contact, .footer-top .f-contact p, .footer-top .f-bio {
  color: rgba(255,255,255,0.88) !important;
}
.footer-top .f-contact a {
  color: rgba(255,255,255,0.95);
}
.footer-top .f-contact a:hover {
  color: var(--gold);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .rcard:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: revert;
}
.content-grid.no-sidebar {
  margin-left: auto;
  margin-right: auto;
}
.sidebar-why-list {
  padding-left: 0;
}
.sidebar-why-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.sidebar-why-list li::before {
  position: absolute;
  left: 0;
}
.post-content ul {
  padding-left: 0;
}
.post-content ul li {
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}
.post-content ul li::before {
  font-weight: 700;
}
.post-comments-inner {
  max-width: 760px;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.comments-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1.5rem;
}
.comment-list {
  list-style: none;
  padding-left: 0;
}
.comment-list li {
  margin-bottom: 1.5rem;
}
.comment-list .comment-body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
}
.comment-list .comment-author {
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
}
.comment-list .comment-metadata {
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: 0.6rem;
}
.comment-list .children {
  list-style: none;
  padding-left: 1.5rem;
  margin-top: 1.5rem;
}
.comment-respond {
  margin-top: 2.5rem;
}
.comment-reply-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.comment-notes {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.comment-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Inter',sans-serif;
  font-size: 0.92rem;
  margin-bottom: 1rem;
  background: var(--bg);
}
.comment-form .submit {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.comment-list li::before {
  content: none;
}
html body .sec-h2, html body .sec-h2 .word, html body .sec-h2 em {
  color: var(--text);
}
html body .sec-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem,3vw,2.6rem);
  line-height: 1.22;
  font-weight: 600;
}
html body.home .sec-h2 {
  font-size: clamp(2rem,3.5vw,2.9rem);
  line-height: 1.2;
}
html body .page-hero h1, html body .page-hero h1 .word, html body .hero-h1, html body .hero-h1 .word {
  color: #ffffff;
}
html body .post-hero h1 {
  color: #ffffff;
}
html body .sidebar-box h4, html body .sidebar-nav-box h4 {
  color: var(--text);
}
html body .word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
html body .word {
  display: inline-block;
  line-height: inherit;
}

@media (max-width: 960px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
  .blog-listing .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .rates-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .blog-listing .blog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .chapter-nav-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .ch-next {
    margin-left: 0;
  }
}

@media (max-width: 1080px) {
  .nav-links {
    display: none;
  }
  .nav-actions .nav-ph, .nav-actions .nav-em {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
  .mobile-menu {
    display: block;
  }
}

@media screen and (max-width: 782px) {
  body.admin-bar nav {
    top: 46px;
  }
  body.admin-bar .mobile-menu {
    top: 114px;
  }
}

@media print {
  nav, .mobile-menu, .grain, #back-to-top, .mini-cta, .newsletter, .swiper-button-prev, .swiper-button-next, .swiper-pagination, .skip-link, .nav-actions {
    display: none !important;
  }
  html.iain-anim *, .faq-item .faq-a, .word, .hero-btns, .hero-sub, .hero-social, .intro-img, .intro-text, .bcard, .rcard, .pstep {
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
  .content-grid {
    display: block !important;
  }
  .content-sidebar {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html.iain-anim .intro-img, html.iain-anim .intro-text {
    transform: translateY(24px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   WPFORMS PARITY  (2026-08-10)

   The prototype's contact form is a mockup. Its inputs carry no name
   attributes and its button submits nowhere, so it could not be shipped
   as the real form. The live site uses Iain's existing WPForms form,
   which keeps his lead flow and his Google Sheets connection intact.

   WPForms brings its own default styling, which on a dark glass card
   looks nothing like the approved design. Everything below maps the
   WPForms markup onto the exact values the prototype uses for .cf-field
   and .cf-submit, so the rendered form is visually identical to the
   prototype while remaining a real, working form.

   Dark variant inside .cta-form and .contact-form, light variant inside
   .inline-form-box, matching the prototype's two form treatments.
   ══════════════════════════════════════════════════════════════════ */

/* Strip the plugin's own chrome so the theme's values are what show. */
.cta-form div.wpforms-container,
.contact-form div.wpforms-container,
.inline-form-box div.wpforms-container {
  margin: 0;
  padding: 0;
  max-width: none;
  background: none;
  border: none;
}
.cta-form div.wpforms-container .wpforms-form,
.contact-form div.wpforms-container .wpforms-form,
.inline-form-box div.wpforms-container .wpforms-form { margin: 0; padding: 0; }
.cta-form div.wpforms-container .wpforms-head-container,
.contact-form div.wpforms-container .wpforms-head-container,
.inline-form-box div.wpforms-container .wpforms-head-container { display: none; }
.cta-form div.wpforms-container .wpforms-field-container,
.contact-form div.wpforms-container .wpforms-field-container,
.inline-form-box div.wpforms-container .wpforms-field-container { display: block; }

/* One field. Matches .cf-field. */
.cta-form div.wpforms-container .wpforms-field,
.contact-form div.wpforms-container .wpforms-field {
  padding: 0;
  margin: 0 0 0.85rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: none;
}
.inline-form-box div.wpforms-container .wpforms-field {
  padding: 0;
  margin: 0 0 1.1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: none;
}

/* Label. Matches .cf-field label. */
.cta-form div.wpforms-container .wpforms-field-label,
.contact-form div.wpforms-container .wpforms-field-label,
.inline-form-box div.wpforms-container .wpforms-field-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin: 0 0 0.4rem 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
}
.cta-form div.wpforms-container .wpforms-field-label,
.contact-form div.wpforms-container .wpforms-field-label { font-size: 0.72rem; color: rgba(255,255,255,0.9); }
.inline-form-box div.wpforms-container .wpforms-field-label { font-size: 0.8rem; color: var(--text); }

/* WPForms marks required fields with a red asterisk and prints small grey
   sublabels under name and address fields. Neither exists in the design. */
.cta-form div.wpforms-container .wpforms-required-label,
.contact-form div.wpforms-container .wpforms-required-label { color: var(--gold); }
.inline-form-box div.wpforms-container .wpforms-required-label { color: var(--navy); }
.cta-form div.wpforms-container .wpforms-field-sublabel,
.contact-form div.wpforms-container .wpforms-field-sublabel,
.inline-form-box div.wpforms-container .wpforms-field-sublabel {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.25rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Inputs, selects and textareas. Matches .cf-field input / select / textarea. */
.cta-form div.wpforms-container .wpforms-form input[type=text],
.cta-form div.wpforms-container .wpforms-form input[type=email],
.cta-form div.wpforms-container .wpforms-form input[type=tel],
.cta-form div.wpforms-container .wpforms-form input[type=url],
.cta-form div.wpforms-container .wpforms-form input[type=number],
.cta-form div.wpforms-container .wpforms-form select,
.cta-form div.wpforms-container .wpforms-form textarea,
.contact-form div.wpforms-container .wpforms-form input[type=text],
.contact-form div.wpforms-container .wpforms-form input[type=email],
.contact-form div.wpforms-container .wpforms-form input[type=tel],
.contact-form div.wpforms-container .wpforms-form input[type=url],
.contact-form div.wpforms-container .wpforms-form input[type=number],
.contact-form div.wpforms-container .wpforms-form select,
.contact-form div.wpforms-container .wpforms-form textarea {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #ffffff;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  height: auto;
}
.inline-form-box div.wpforms-container .wpforms-form input[type=text],
.inline-form-box div.wpforms-container .wpforms-form input[type=email],
.inline-form-box div.wpforms-container .wpforms-form input[type=tel],
.inline-form-box div.wpforms-container .wpforms-form input[type=url],
.inline-form-box div.wpforms-container .wpforms-form input[type=number],
.inline-form-box div.wpforms-container .wpforms-form select,
.inline-form-box div.wpforms-container .wpforms-form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  color: var(--text);
  font-size: 0.92rem;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  height: auto;
}
.cta-form div.wpforms-container .wpforms-form textarea,
.contact-form div.wpforms-container .wpforms-form textarea { resize: vertical; min-height: 110px; }
.contact-form div.wpforms-container .wpforms-form textarea { min-height: 120px; }
.inline-form-box div.wpforms-container .wpforms-form textarea { resize: vertical; min-height: 120px; }

.cta-form div.wpforms-container .wpforms-form select,
.contact-form div.wpforms-container .wpforms-form select { appearance: none; cursor: pointer; }

.cta-form div.wpforms-container .wpforms-form input::placeholder,
.cta-form div.wpforms-container .wpforms-form textarea::placeholder,
.contact-form div.wpforms-container .wpforms-form input::placeholder,
.contact-form div.wpforms-container .wpforms-form textarea::placeholder { color: rgba(255,255,255,0.9); }
.inline-form-box div.wpforms-container .wpforms-form input::placeholder,
.inline-form-box div.wpforms-container .wpforms-form textarea::placeholder { color: var(--muted); opacity: 0.6; }

.cta-form div.wpforms-container .wpforms-form input:focus,
.cta-form div.wpforms-container .wpforms-form select:focus,
.cta-form div.wpforms-container .wpforms-form textarea:focus,
.contact-form div.wpforms-container .wpforms-form input:focus,
.contact-form div.wpforms-container .wpforms-form select:focus,
.contact-form div.wpforms-container .wpforms-form textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.1);
  outline: none;
}
.inline-form-box div.wpforms-container .wpforms-form input:focus,
.inline-form-box div.wpforms-container .wpforms-form select:focus,
.inline-form-box div.wpforms-container .wpforms-form textarea:focus {
  border-color: var(--gold);
  outline: none;
}

/* Submit. Matches .cf-submit. */
.cta-form div.wpforms-container .wpforms-submit-container,
.contact-form div.wpforms-container .wpforms-submit-container,
.inline-form-box div.wpforms-container .wpforms-submit-container { padding: 0; margin-top: 0.5rem; }
.cta-form div.wpforms-container .wpforms-form button[type=submit],
.contact-form div.wpforms-container .wpforms-form button[type=submit] {
  width: 100%;
  background: var(--gold);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.95rem;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: filter 0.25s, transform 0.2s;
  text-transform: none;
  letter-spacing: 0;
}
.cta-form div.wpforms-container .wpforms-form button[type=submit]:hover,
.contact-form div.wpforms-container .wpforms-form button[type=submit]:hover {
  filter: drop-shadow(0 0 14px rgba(201,169,110,0.5));
  transform: translateY(-1px);
  background: var(--gold);
}
.inline-form-box div.wpforms-container .wpforms-form button[type=submit] {
  width: 100%;
  background: var(--navy);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.85rem 1.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: filter 0.25s;
  text-transform: none;
  letter-spacing: 0;
}
.inline-form-box div.wpforms-container .wpforms-form button[type=submit]:hover { filter: brightness(1.15); background: var(--navy); }

/* Validation and confirmation states, which the prototype never showed. */
.cta-form div.wpforms-container .wpforms-error,
.contact-form div.wpforms-container .wpforms-error { color: #ffd7d7; font-size: 0.75rem; }
.inline-form-box div.wpforms-container .wpforms-error { color: #b3261e; font-size: 0.75rem; }
.cta-form div.wpforms-container .wpforms-form input.wpforms-error,
.contact-form div.wpforms-container .wpforms-form input.wpforms-error,
.cta-form div.wpforms-container .wpforms-form textarea.wpforms-error,
.contact-form div.wpforms-container .wpforms-form textarea.wpforms-error { border-color: #ffd7d7; }
.cta-form div.wpforms-container .wpforms-confirmation-container-full,
.contact-form div.wpforms-container .wpforms-confirmation-container-full {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--gold);
  color: #ffffff;
  border-radius: 8px;
  padding: 1.25rem;
}
.inline-form-box div.wpforms-container .wpforms-confirmation-container-full {
  background: var(--bg);
  border: 1px solid var(--gold);
  color: var(--text);
  border-radius: 8px;
  padding: 1.25rem;
}

/* The prototype puts Name and Phone side by side in a .cf-row. WPForms does
   that with the built in layout classes, which Iain sets per field in the form
   builder under Advanced then CSS Classes. Support them so the two column row
   matches the design if he wants it; every field stays full width if he does
   not. */
.cta-form div.wpforms-container .wpforms-form .wpforms-field-container { display: flex; flex-wrap: wrap; gap: 0 0.85rem; }
.contact-form div.wpforms-container .wpforms-form .wpforms-field-container { display: flex; flex-wrap: wrap; gap: 0 0.85rem; }
.cta-form div.wpforms-container .wpforms-form .wpforms-field,
.contact-form div.wpforms-container .wpforms-form .wpforms-field { flex: 0 0 100%; max-width: 100%; }
.cta-form div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half,
.contact-form div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half {
  flex: 0 0 calc(50% - 0.425rem);
  max-width: calc(50% - 0.425rem);
}
@media (max-width: 640px) {
  .cta-form div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half,
  .contact-form div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Text fallback for the nav logo, shown only when the image file is missing.
   Matches the footer logo treatment so the header still reads correctly. */
.nav-logo-fallback { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.nav-logo-fallback em { font-style: italic; color: var(--gold); }

/* ══════════════════════════════════════════════════════════════════
   NAVIGATION THAT SURVIVES REAL MENU LABELS  (2026-08-10)

   The prototype nav was designed around short labels: About, Rates,
   Blog, Contact. Iain's WordPress menu uses the full ones: "About Iain
   Macfadyen", "Vancouver Mortgage Rates", "First Time Home Buyers",
   "Apply Online". Those do not fit beside a logo, a phone number, an
   email address and an Apply Now button, so the bar wrapped onto two
   lines and ran over the logo.

   Two changes. Nothing in the bar is allowed to wrap, and the phone and
   email chips give up their space first. Then a small script measures
   whether the links still fit and switches to the hamburger if they do
   not, so this works for whatever labels Iain chooses later.
   ══════════════════════════════════════════════════════════════════ */
nav { flex-wrap: nowrap; gap: 1.5rem; }
.nav-logo-link { flex-shrink: 0; }
.nav-links { flex-wrap: nowrap; min-width: 0; }
.nav-links > li { white-space: nowrap; }
.nav-links > li > a { white-space: nowrap; }
.nav-actions .nav-ph, .nav-actions .nav-em { white-space: nowrap; }

/* The bar gives up space in stages, and only collapses as a last resort. The
   script in main.js measures after each stage and stops as soon as everything
   fits, so a laptop keeps its links, its dropdowns and its phone number
   instead of jumping straight to a hamburger.

   Stage 1  tighten    spacing and label size come down a little
   Stage 2  no email    the email address is by far the widest item
   Stage 3  no phone
   Stage 4  compact     hamburger, which is what a phone gets anyway */
body.iain-nav-tight nav { gap: 1rem; }
body.iain-nav-tight .nav-links { gap: 1.05rem; }
body.iain-nav-tight .nav-links > li > a { font-size: 0.78rem; }
body.iain-nav-tight .nav-actions { gap: 0.75rem; }
body.iain-nav-tight .nav-actions .nav-ph,
body.iain-nav-tight .nav-actions .nav-em { font-size: 0.74rem; }
body.iain-nav-tight .nav-cta { padding: 0.6rem 1.1rem; font-size: 0.78rem; }

body.iain-nav-noemail .nav-actions .nav-em { display: none; }
body.iain-nav-nophone .nav-actions .nav-ph { display: none; }

body.iain-nav-compact .nav-links { display: none; }
body.iain-nav-compact .nav-hamburger { display: flex; }
body.iain-nav-compact .mobile-menu { display: block; }

/* Below the real mobile breakpoint the hamburger is the design, so the chips
   go regardless of how much room there is. */
@media (max-width: 1080px) {
  .nav-actions .nav-ph, .nav-actions .nav-em { display: none; }
}

/* Long labels in the slide out menu wrap rather than overflow sideways. */
.mobile-menu a { overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════
   HEADINGS, MADE IMPOSSIBLE TO BREAK  (2026-08-10)

   Two separate belts. The colour is marked important so no plugin
   stylesheet can win it, whatever selector it uses. And the clipping
   that makes the slide up effect possible is applied by JavaScript
   only, at the moment the words are actually pushed out of view, so a
   foreign line height can never crop a heading that is sitting still.
   ══════════════════════════════════════════════════════════════════ */
html body .sec-h2,
html body .sec-h2 .word,
html body .sec-h2 em { color: var(--text) !important; }
html body #testimonials .sec-h2,
html body #testimonials .sec-h2 .word,
html body #testimonials .sec-h2 em { color: #ffffff !important; }
html body .page-hero h1,
html body .page-hero h1 .word,
html body .page-hero h1 em,
html body .hero-h1,
html body .hero-h1 .word,
html body .hero-h1 em,
html body .post-hero h1 { color: #ffffff !important; }
html body .sec-h2 { line-height: 1.22 !important; }
html body.home .sec-h2 { line-height: 1.2 !important; }
html body .page-hero h1 { line-height: 1.2 !important; font-family: 'Playfair Display', serif !important; }
html body .hero-h1 { line-height: 1.15 !important; font-family: 'Playfair Display', serif !important; }
html body .post-hero h1 { line-height: 1.25 !important; font-family: 'Playfair Display', serif !important; }
html body .sec-h2 { font-family: 'Playfair Display', serif !important; }

/* Clipping is opt in, applied by splitWords() in main.js. Without it a
   word span is a plain inline block that cannot be cropped by anything. */
html body .word-wrap { overflow: visible; }
html body .word-wrap.is-clipping { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   PAGE HEADER WITH A PICTURE  (2026-08-10)

   The pages carried images from Iain's previous site. Replacing the
   copy would have thrown them away, so each page's own image is kept
   and moved into the dark bar at the top, to the right of the heading.
   Pages with no image are unchanged and stay exactly as the design has
   them, so nothing looks lopsided where there is nothing to show.
   ══════════════════════════════════════════════════════════════════ */
.page-hero-has-img {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.page-hero-has-img .page-hero-inner {
  flex: 1 1 58%;
  min-width: 0;
}
.page-hero-media {
  position: relative;
  z-index: 2;
  flex: 0 0 38%;
  max-width: 420px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(201,169,110,0.28);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  line-height: 0;
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  /* On a phone the picture goes under the words rather than squeezing
     the heading into a column two words wide. */
  .page-hero-has-img { display: block; }
  .page-hero-media {
    max-width: 100%;
    margin-top: 1.75rem;
  }
  .page-hero-media img { max-height: 200px; }
}

/* ══════════════════════════════════════════════════════════════════
   TYPEFACE LOCK  (2026-08-10)

   Elementor's kit stylesheet styles headings as `.elementor-kit-N h2`,
   which is two classes deep and therefore beats a theme rule like
   `.contact-info h2`. On the live server that replaced the serif with a
   heavy sans on any heading the earlier guard did not name one by one.

   Rather than keep chasing them, every selector the design gives a
   typeface to is restated here, prefixed and marked important, so no
   plugin stylesheet can take a typeface off this site again. Generated
   from the rules above; do not hand edit.
   ══════════════════════════════════════════════════════════════════ */
html body .hero-h1,
html body .sec-h2,
html body .cta-left h2,
html body .cta-form-title,
html body .f-logo,
html body .rcard-name,
html body .est-selected-name,
html body .est-budget-val,
html body .est-output-val,
html body .pstep-num,
html body .page-hero h1,
html body .bio-stat-num,
html body .video-inner h2,
html body .quote-mark,
html body .quote-text,
html body .mini-cta h2,
html body .faq-sidebar h3,
html body .contact-info h2,
html body .form-title,
html body .ch-card-title,
html body .content-body h3,
html body .sidebar-nav-box h4,
html body .sidebar-cta h4,
html body .post-hero h1,
html body .post-content h2,
html body .sidebar-box h4,
html body .partner-info h3,
html body .guide-card-body h3,
html body .inline-form-box .form-title,
html body .comments-title,
html body .comment-reply-title,
html body /* Text fallback for the nav logo,
html body shown only when the image file is missing. Matches the footer logo treatment so the header still reads correctly. */ .nav-logo-fallback { font-family: 'Playfair Display', serif !important; }
html body,
html body .cf-field input,
html body .cf-field select,
html body .cf-field textarea,
html body .cf-submit,
html body .nl-field input,
html body .nl-submit,
html body .faq-q,
html body .wpcf7 input[type="text"],
html body .wpcf7 input[type="email"],
html body .wpcf7 input[type="tel"],
html body .wpcf7 select,
html body .wpcf7 textarea,
html body .wpcf7 input[type="submit"],
html body .comment-form input[type=text],
html body .comment-form input[type=email],
html body .comment-form input[type=url],
html body .comment-form textarea,
html body /* Label. Matches .cf-field label. */ .cta-form div.wpforms-container .wpforms-field-label,
html body .contact-form div.wpforms-container .wpforms-field-label,
html body .inline-form-box div.wpforms-container .wpforms-field-label,
html body /* Inputs,
html body selects and textareas. Matches .cf-field input / select / textarea. */ .cta-form div.wpforms-container .wpforms-form input[type=text],
html body .cta-form div.wpforms-container .wpforms-form input[type=email],
html body .cta-form div.wpforms-container .wpforms-form input[type=tel],
html body .cta-form div.wpforms-container .wpforms-form input[type=url],
html body .cta-form div.wpforms-container .wpforms-form input[type=number],
html body .cta-form div.wpforms-container .wpforms-form select,
html body .cta-form div.wpforms-container .wpforms-form textarea,
html body .contact-form div.wpforms-container .wpforms-form input[type=text],
html body .contact-form div.wpforms-container .wpforms-form input[type=email],
html body .contact-form div.wpforms-container .wpforms-form input[type=tel],
html body .contact-form div.wpforms-container .wpforms-form input[type=url],
html body .contact-form div.wpforms-container .wpforms-form input[type=number],
html body .contact-form div.wpforms-container .wpforms-form select,
html body .contact-form div.wpforms-container .wpforms-form textarea,
html body .inline-form-box div.wpforms-container .wpforms-form input[type=text],
html body .inline-form-box div.wpforms-container .wpforms-form input[type=email],
html body .inline-form-box div.wpforms-container .wpforms-form input[type=tel],
html body .inline-form-box div.wpforms-container .wpforms-form input[type=url],
html body .inline-form-box div.wpforms-container .wpforms-form input[type=number],
html body .inline-form-box div.wpforms-container .wpforms-form select,
html body .inline-form-box div.wpforms-container .wpforms-form textarea,
html body .cta-form div.wpforms-container .wpforms-form button[type=submit],
html body .contact-form div.wpforms-container .wpforms-form button[type=submit],
html body .inline-form-box div.wpforms-container .wpforms-form button[type=submit] { font-family: 'Inter', sans-serif !important; }

/* ══════════════════════════════════════════════════════════════════
   COMPONENT LOCK  (2026-08-11)

   Elementor's kit stylesheet is two classes deep, so it outranks a plain
   rule like `.f-col h4` or `.nl-submit`. That is how the footer headings
   came back oversized and the newsletter button came back green. Locking
   the typeface alone was not enough: size, weight, spacing, background
   and colour were being taken too.

   Below, the design's own values for the components that kept losing,
   restated at a specificity nothing else on this site reaches. Values are
   copied from the rules above, never invented, so the design is unchanged.
   Each breakpoint is restated underneath in width order, so this lock can
   never beat the responsive rules it exists to protect.
   ══════════════════════════════════════════════════════════════════ */
body:not(#arco) footer { background: #1a0808 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; padding: 5rem 5% 2rem !important; position: relative !important; overflow: hidden !important; }
body:not(#arco) .footer-top { position: relative !important; max-width: 1200px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; gap: 2.75rem !important; margin-bottom: 3rem !important; }
body:not(#arco) .f-logo { font-family: 'Playfair Display', serif !important; font-size: 1.2rem !important; font-weight: 700 !important; color: #ffffff !important; display: block !important; margin-bottom: 0.9rem !important; }
body:not(#arco) .f-logo em { color: var(--gold) !important; font-style: normal !important; }
body:not(#arco) .f-bio { color: rgba(255,255,255,0.9) !important; font-size: 0.84rem !important; line-height: 1.74 !important; margin-bottom: 1.25rem !important; }
body:not(#arco) .f-contact a { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 0.82rem !important; margin-bottom: 0.5rem !important; transition: color 0.2s !important; }
body:not(#arco) .f-col h4 { color: #ffffff !important; font-size: 0.74rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; margin-bottom: 1.1rem !important; }
body:not(#arco) .f-col ul li a { font-size: 0.83rem !important; transition: color 0.2s !important; }
body:not(#arco) .newsletter h4 { color: #ffffff !important; font-size: 0.74rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; margin-bottom: 1.1rem !important; }
body:not(#arco) .nl-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; margin-bottom: 0.6rem !important; }
body:not(#arco) .nl-field input { width: 100% !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 7px !important; padding: 0.6rem 0.85rem !important; color: #fff !important; font-size: 0.82rem !important; font-family: 'Inter', sans-serif !important; transition: border-color 0.2s !important; }
body:not(#arco) .nl-submit { width: 100% !important; background: var(--gold) !important; color: #ffffff !important; border: none !important; border-radius: 7px !important; padding: 0.65rem !important; font-size: 0.83rem !important; font-weight: 700 !important; cursor: pointer !important; transition: filter 0.2s !important; font-family: 'Inter', sans-serif !important; }
body:not(#arco) .nl-submit:hover { filter: drop-shadow(0 0 12px rgba(201,169,110,0.4)) !important; }
body:not(#arco) .footer-bot { position: relative !important; max-width: 1200px !important; margin: 0 auto !important; padding-top: 1.75rem !important; border-top: 1px solid rgba(255,255,255,0.06) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.75rem !important; }
body:not(#arco) .footer-bot p { color: rgba(255,255,255,0.9) !important; font-size: 0.75rem !important; }
body:not(#arco) .footer-bot a { transition: color 0.2s !important; }
body:not(#arco) .btn-gold { background: var(--gold) !important; color: #ffffff !important; padding: 0.88rem 1.9rem !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 0.9rem !important; display: inline-block !important; transition: filter 0.3s !important; position: relative !important; overflow: hidden !important; }
body:not(#arco) .btn-ghost { background: transparent !important; padding: 0.88rem 1.9rem !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.9rem !important; display: inline-block !important; transition: border-color 0.2s, color 0.2s !important; }
body:not(#arco) .btn-ghost-light { background: transparent !important; padding: 0.88rem 1.9rem !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.9rem !important; display: inline-block !important; transition: border-color 0.2s,color 0.2s !important; }
body:not(#arco) .nav-cta { background: var(--gold) !important; color: #ffffff !important; border: none !important; border-radius: 6px !important; font-weight: 700 !important; transition: filter 0.25s, transform 0.2s !important; position: relative !important; }
body:not(#arco) .cf-submit { width: 100% !important; background: var(--navy) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: .85rem 1.75rem !important; font-size: .9rem !important; font-weight: 700 !important; cursor: pointer !important; font-family: 'Inter', sans-serif !important; transition: filter .25s !important; margin-top: 0.5rem !important; }
body:not(#arco) .sidebar-cta-btn { display: block !important; text-align: center !important; background: var(--gold) !important; color: #fff !important; padding: 0.82rem !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 0.9rem !important; transition: filter 0.2s !important; margin-bottom: 0.85rem !important; }
body:not(#arco) .est-cta { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 0.84rem !important; font-weight: 700 !important; border: 1.5px solid var(--navy) !important; border-radius: 7px !important; padding: 0.7rem 1.1rem !important; transition: background 0.2s, color 0.2s !important; width: 100% !important; }
body:not(#arco) .process-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1.5rem !important; }
body:not(#arco) .pstep { background: #ffffff !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; padding: 2rem 1.75rem !important; position: relative !important; transition: box-shadow 0.3s, transform 0.3s !important; }
body:not(#arco) .pstep-num { font-family: 'Playfair Display', serif !important; font-size: 2.8rem !important; font-weight: 700 !important; color: #1a1a1a !important; opacity: 1 !important; line-height: 1 !important; margin-bottom: 1.1rem !important; }
body:not(#arco) .pstep p { color: var(--muted) !important; font-size: 0.87rem !important; line-height: 1.76 !important; }
body:not(#arco) .pstep-connector { position: absolute !important; top: 2.25rem !important; right: -1.05rem !important; z-index: 2 !important; color: #1a1a1a !important; opacity: 1 !important; font-size: 1.1rem !important; font-weight: 900 !important; pointer-events: none !important; }
body:not(#arco) .sec-tag { font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--gold) !important; display: block !important; margin-bottom: 0.55rem !important; }
body:not(#arco) .sec-p { color: var(--muted) !important; font-size: 0.98rem !important; line-height: 1.78 !important; max-width: 540px !important; }
body:not(#arco) .rates-note { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: rgba(201,169,110,0.12) !important; border: 1px solid rgba(201,169,110,0.22) !important; color: var(--gold) !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 0.32rem 0.9rem !important; border-radius: 100px !important; margin-bottom: 1.4rem !important; }
body:not(#arco) .svc-card { border: none !important; border-radius: var(--r-lg) !important; padding: 2rem !important; color: #ffffff !important; display: flex !important; width: 100% !important; height: 100% !important; flex-shrink: 0 !important; position: relative !important; overflow: hidden !important; flex-direction: column !important; justify-content: flex-end !important; user-select: none !important; background-position: center !important; }
body:not(#arco) .rcard { background: #ffffff !important; border-radius: var(--r-lg) !important; padding: 1.5rem 1.25rem !important; display: flex !important; flex-direction: column !important; cursor: pointer !important; transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s !important; }
body:not(#arco) .bcard { background: #ffffff !important; border-radius: var(--r-lg) !important; overflow: hidden !important; color: var(--text) !important; display: block !important; transition: box-shadow 0.3s, transform 0.3s !important; }
body:not(#arco) .chapter-card { background: #fff !important; border-radius: var(--r-lg) !important; padding: 1.75rem !important; transition: transform 0.25s,border-color 0.25s,box-shadow 0.25s !important; display: flex !important; flex-direction: column !important; gap: 0.6rem !important; }
body:not(#arco) .guide-card { background: #fff !important; border-radius: var(--r-lg) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; transition: transform 0.25s,border-color 0.25s,box-shadow 0.25s !important; }
body:not(#arco) .ch-card-num { font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--gold) !important; }
body:not(#arco) .ch-card-title { font-family: 'Playfair Display',serif !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--text) !important; line-height: 1.35 !important; }
@media (max-width: 1060px) {
  body:not(#arco) .footer-top { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 900px) {
  body:not(#arco) .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
  body:not(#arco) .pstep-connector { display: none !important; }
}
@media (max-width:768px) {
  body:not(#arco) .footer-top { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  body:not(#arco) .footer-top { grid-template-columns: 1fr !important; }
  body:not(#arco) .rcard { padding: 1.1rem 1rem !important; }
}
@media (max-width: 480px) {
  body:not(#arco) .process-grid { grid-template-columns: 1fr !important; }
}

/* Every hover, focus and selected state belonging to a locked component,
   restated at the same strength. Without these the lock, which sits at ID
   level, silently beat the theme's own states: the rate card stopped showing
   which product was selected, the estimator button turned maroon text on a
   maroon background, every footer link and every button lost its hover, and
   the newsletter fields lost their keyboard focus ring. */
body:not(#arco) .nav-cta:hover { filter: drop-shadow(0 0 14px rgba(201,169,110,0.6)) !important; transform: translateY(-1px) !important; color: #ffffff !important; }
body:not(#arco) .btn-gold:hover { filter: drop-shadow(0 0 18px rgba(201,169,110,0.45)) !important; }
body:not(#arco) .btn-ghost:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
body:not(#arco) .svc-card:hover { transform: translatey(-4px) !important; box-shadow: 0 20px 50px rgba(0,0,0,.35) !important; background-size: 110% !important; }
body:not(#arco) .bcard:hover { box-shadow: 0 12px 40px rgba(10,24,40,.1) !important; transform: translatey(-4px) !important; }
body:not(#arco) .cf-submit:hover { filter: brightness(1.15) !important; transform: translateY(-1px) !important; }
body:not(#arco) .f-contact a:hover { color: var(--gold) !important; }
body:not(#arco) .f-col ul li a:hover { color: var(--gold) !important; }
body:not(#arco) .nl-field input:focus { border-color: var(--gold) !important; }
body:not(#arco) .nl-submit:hover { filter: drop-shadow(0 0 12px rgba(201,169,110,0.4)) !important; }
body:not(#arco) .footer-bot a:hover { color: var(--gold) !important; }
body:not(#arco) .rcard:hover { box-shadow: 0 8px 28px rgba(10,24,40,0.08) !important; transform: translateY(-3px) !important; border-color: rgba(201,169,110,0.4) !important; }
body:not(#arco) .rcard.is-selected { border-color: var(--gold) !important; box-shadow: 0 4px 24px rgba(201,169,110,0.22) !important; }
body:not(#arco) .est-cta:hover { background: var(--navy) !important; color: #ffffff !important; }
body:not(#arco) .pstep:hover { box-shadow: 0 10px 36px rgba(10,24,40,0.08) !important; transform: translatey(-4px) !important; }
body:not(#arco) .btn-ghost-light:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
body:not(#arco) .chapter-card:hover { border-color: var(--gold) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 30px rgba(139,26,26,0.08) !important; }
body:not(#arco) .sidebar-cta-btn:hover { filter: drop-shadow(0 0 12px rgba(201,169,110,0.5)) !important; }
body:not(#arco) .guide-card:hover { border-color: var(--gold) !important; transform: translateY(-3px) !important; box-shadow: 0 10px 34px rgba(139,26,26,0.09) !important; }
body:not(#arco) .rcard:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px !important; border-radius: revert !important; }
body:not(#arco) .nl-field input:focus-visible,
body:not(#arco) .cf-submit:focus-visible,
body:not(#arco) .nl-submit:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px !important; }

/* The nav's tighten stage, restated so the component lock cannot stop it
   shrinking the Apply Now button. Without this the bar gives up the email
   address earlier than the design intends. */
body:not(#arco).iain-nav-tight .nav-cta { padding: 0.6rem 1.1rem !important; font-size: 0.78rem !important; }
body:not(#arco).iain-nav-tight .nav-links > li > a { font-size: 0.78rem !important; }

/* Any other <nav> WordPress itself emits, such as comment navigation, must not
   inherit the site navigation bar's fixed positioning. The bare `nav` selector
   comes from the prototype, which only ever had one. */
nav.blog-pagination,
nav.navigation,
nav.post-navigation,
nav.comment-navigation,
nav.pagination {
  position: static;
  height: auto;
  padding: 0;
  background: none;
  border-bottom: none;
  z-index: auto;
  display: flex;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════
   FORM LAYOUT, MADE INDEPENDENT OF WPFORMS  (2026-08-11)

   WPForms lays its half width fields out with floats and percentage
   margins, and gives number fields a narrower box than text fields.
   Mixed with the flex row above that produced a form where the two
   half fields stacked, indented, at different widths.

   Everything below removes WPForms' own layout from the equation so
   the row is decided by the design alone.
   ══════════════════════════════════════════════════════════════════ */
.cta-form div.wpforms-container .wpforms-form .wpforms-field,
.contact-form div.wpforms-container .wpforms-form .wpforms-field,
.inline-form-box div.wpforms-container .wpforms-form .wpforms-field {
  float: none !important;
  clear: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
}
.cta-form div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half,
.contact-form div.wpforms-container .wpforms-form .wpforms-field.wpforms-one-half {
  flex: 0 0 calc(50% - 0.425rem) !important;
  max-width: calc(50% - 0.425rem) !important;
}
/* Every control fills its field, whatever type WPForms thinks it is. */
.cta-form div.wpforms-container .wpforms-form input,
.cta-form div.wpforms-container .wpforms-form select,
.cta-form div.wpforms-container .wpforms-form textarea,
.contact-form div.wpforms-container .wpforms-form input,
.contact-form div.wpforms-container .wpforms-form select,
.contact-form div.wpforms-container .wpforms-form textarea,
.inline-form-box div.wpforms-container .wpforms-form input,
.inline-form-box div.wpforms-container .wpforms-form select,
.inline-form-box div.wpforms-container .wpforms-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* A phone number entered in a number field gets spinner arrows and drops
   leading zeros. If the field type is left as a number, at least hide the
   arrows so it does not look like a quantity box. */
.cta-form div.wpforms-container input[type=number]::-webkit-outer-spin-button,
.cta-form div.wpforms-container input[type=number]::-webkit-inner-spin-button,
.contact-form div.wpforms-container input[type=number]::-webkit-outer-spin-button,
.contact-form div.wpforms-container input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cta-form div.wpforms-container input[type=number],
.contact-form div.wpforms-container input[type=number] { -moz-appearance: textfield; }

/* The reCAPTCHA box is a fixed 302px white block that cannot be restyled.
   Centre it so it does not sit awkwardly against the left edge of a dark
   card, and let it shrink on a narrow phone rather than overflow. */
.cta-form div.wpforms-container .wpforms-field-captcha,
.contact-form div.wpforms-container .wpforms-field-captcha {
  display: flex !important;
  justify-content: center !important;
}
.cta-form div.wpforms-container .g-recaptcha,
.contact-form div.wpforms-container .g-recaptcha,
.cta-form div.wpforms-container .wpforms-recaptcha-container,
.contact-form div.wpforms-container .wpforms-recaptcha-container {
  transform-origin: center top;
  max-width: 100%;
}
@media (max-width: 420px) {
  .cta-form div.wpforms-container .g-recaptcha,
  .contact-form div.wpforms-container .g-recaptcha { transform: scale(0.86); }
}