/* Self-hosted. No third-party request, no visitor IP sent elsewhere. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


:root {
  --ink: #011d44;
  --ink-2: #011d44;
  --blue: #245b8f;
  --mist: #e8f1f7;
  --gold: #c3a47c;
  --gold-soft: #e4d5c2;
  --pearl: #fcfcf9;
  --paper: #f6f6f1;
  --grey: #647386;
  --line: rgba(7, 26, 53, 0.13);
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
img { max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 112px;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: 194px 1fr auto;
  align-items: center;
  gap: 36px;
  background: rgba(252, 252, 249, 0.96);
  border-bottom: 1px solid rgba(7, 26, 53, 0.08);
  backdrop-filter: blur(18px);
}
.brand {
  align-self: stretch;
  width: 182px;
  overflow: hidden;
  display: block;
  background: var(--ink);
}
.brand img { width: 100%; height: 100%; object-fit: cover; }
.desktop-nav { display: flex; justify-content: flex-end; gap: clamp(14px, 1.6vw, 28px); font-size: 14px; }
.desktop-nav a { position: relative; padding: 20px 0; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 1px; background: var(--gold); transition: right 220ms ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.mobile-menu { display: none; }

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  padding: 0 24px;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button--nav { color: var(--gold); background: var(--ink); }
.button--nav:hover { color: white; background: var(--blue); }
.button--gold { color: var(--ink); background: var(--gold); }
.button--gold:hover { background: #d4b994; }

.welcome-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  min-height: 100dvh;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
  color: white;
}
.welcome-intro::before,
.welcome-intro::after {
  content: "";
  position: absolute;
  width: min(72vw, 780px);
  aspect-ratio: 1;
  border: 1px solid rgba(195,164,124,0.2);
  border-radius: 50%;
  pointer-events: none;
}
.welcome-intro::before { transform: scale(1); }
.welcome-intro::after { transform: scale(1.22); opacity: 0.55; }
.welcome-intro__inner {
  width: min(920px, 100%);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vh, 42px);
}
.welcome-intro__button {
  min-width: 180px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}
.welcome-intro__button span { margin-left: 10px; font-size: 17px; }
.welcome-intro__button:hover,
.welcome-intro__button:focus-visible {
  transform: translateY(-2px);
  background: transparent;
  color: var(--gold);
  outline: none;
}

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 48% 52%;
  background: var(--ink);
  color: white;
  overflow: hidden;
}
.hero__copy { padding: 96px 5vw 82px; position: relative; isolation: isolate; }
.hero__copy::before, .hero__copy::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(221, 182, 99, 0.3); transform: rotate(30deg) skew(-12deg); }
.hero__copy::before { width: 430px; height: 290px; right: -92px; top: 145px; }
.hero__copy::after { width: 360px; height: 230px; right: -40px; top: 220px; }
.eyebrow { margin: 0 0 28px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.23em; line-height: 1.5; text-transform: uppercase; }
.eyebrow--blue { color: var(--blue); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { max-width: 660px; margin: 0; font-family: var(--serif); font-size: clamp(56px, 5.5vw, 88px); line-height: 0.98; font-weight: 400; letter-spacing: -0.04em; }
h1 em, h2 em, .hero__promise em, .footer__statement em { color: var(--gold); font-weight: 400; }
.hero__intro { max-width: 520px; margin: 34px 0 0; color: rgba(255,255,255,0.76); font-size: 20px; line-height: 1.55; }
.hero__actions { margin-top: 40px; display: flex; align-items: center; gap: 34px; }
.text-link { padding-bottom: 5px; border-bottom: 1px solid var(--gold); font-size: 15px; }
.text-link span { display: inline-block; margin-left: 8px; transition: transform 180ms ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link--dark { color: var(--ink); }

.hero__visual { min-height: 680px; position: relative; background: var(--mist); }
.hero__visual > img { object-fit: cover; object-position: center; }
.hero__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1,29,68,0.12), transparent 50%); pointer-events: none; }
.hero__promise { max-width: 460px; margin-top: 58px; padding: 22px 0 4px 26px; border-left: 3px solid var(--gold); }
.hero__promise > span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 0.18em; }
.hero__promise p { margin: 10px 0 0; font-family: var(--serif); font-size: 25px; line-height: 1.25; }

.trust-strip { min-height: 104px; padding: 0 5vw; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: var(--ink-2); color: white; border-top: 1px solid var(--gold); }
.trust-strip p { min-height: 104px; margin: 0; padding: 18px 30px; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 15px; text-align: left; border-right: 1px solid rgba(195,164,124,0.5); }
.trust-strip p:last-child { border-right: 0; }
.trust-icon { width: 44px; height: 44px; flex: 0 0 44px; display: block; background: var(--gold); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.trust-icon--advice { -webkit-mask-image: url("/assets/img/trust-advice.png"); mask-image: url("/assets/img/trust-advice.png"); }
.trust-icon--communication { -webkit-mask-image: url("/assets/img/trust-communication.png"); mask-image: url("/assets/img/trust-communication.png"); }
.trust-icon--protection { -webkit-mask-image: url("/assets/img/trust-protection.png"); mask-image: url("/assets/img/trust-protection.png"); }

.section { padding: 120px 5vw; }
.section-heading { max-width: 1440px; margin: 0 auto 66px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.65fr); gap: 8vw; align-items: end; }
.section-heading h2, .about h2, .journey h2, .faq h2, .contact h2, .protection h2 { margin: 0; font-family: var(--serif); font-size: clamp(45px, 4.6vw, 72px); line-height: 1.04; font-weight: 400; letter-spacing: -0.035em; }
.section-heading > p { margin: 0; color: var(--grey); font-size: 17px; line-height: 1.75; }
.section-heading--light > p { color: rgba(255,255,255,0.65); }

.services { background: var(--pearl); }
.service-grid { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { min-height: 360px; padding: 34px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 220ms ease, transform 220ms ease; }
.service-card:hover { background: var(--mist); transform: translateY(-4px); }
.service-card__number { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.service-card h3 { margin: 72px 0 20px; font-family: var(--serif); font-size: 31px; line-height: 1.08; font-weight: 400; }
.service-card p { margin: 0 0 28px; color: var(--grey); line-height: 1.65; }
.service-card a { margin-top: auto; font-size: 13px; font-weight: 800; }
.service-card a span { float: right; color: var(--gold); font-size: 20px; font-weight: 400; }
.service-feature { max-width: 1440px; margin: 64px auto 0; display: grid; grid-template-columns: 1.05fr 0.95fr; overflow: hidden; background: var(--mist); }
.service-feature__image { min-height: 480px; position: relative; }
.service-feature__image img { object-fit: cover; }
.service-feature__copy { padding: clamp(42px, 6vw, 86px); display: flex; flex-direction: column; justify-content: center; }
.service-feature__copy h3 { margin: 0; font-family: var(--serif); font-size: clamp(38px, 4vw, 60px); line-height: 1.05; font-weight: 400; letter-spacing: -0.035em; }
.service-feature__copy > p:not(.eyebrow) { margin: 28px 0 0; color: var(--grey); font-size: 17px; line-height: 1.7; }
.service-feature__points { margin-top: 38px; padding-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 1px solid var(--line); color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }

.protection { display: grid; grid-template-columns: 1.15fr 0.85fr; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.protection__statement { min-height: 640px; padding: 100px 6vw; display: flex; flex-direction: column; justify-content: flex-end; color: white; background: var(--blue); position: relative; overflow: hidden; }
.protection__statement > img { object-fit: cover; }
.protection__statement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1,29,68,0.94) 0%, rgba(1,29,68,0.55) 48%, rgba(36,91,143,0.14) 100%); }
.protection__statement-copy { position: relative; z-index: 2; }
.protection__content { padding: 105px 7vw; display: flex; flex-direction: column; justify-content: center; }
.protection__content > p { margin: 0; color: var(--grey); font-size: 18px; line-height: 1.75; }
.protection__content ul { list-style: none; margin: 46px 0 42px; padding: 0; border-top: 1px solid var(--line); }
.protection__content li { padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); white-space: nowrap; }
.protection__content li span { display: inline-block; width: 54px; color: var(--gold); font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; }
.protection__content .text-link { align-self: flex-start; }

.about { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 10vw; }
.about__intro { position: sticky; top: 170px; align-self: start; }
.about__intro h2 em { color: var(--gold); }
.founder-profile { width: 100%; margin-top: 44px; overflow: hidden; background: var(--ink); border: 1px solid rgba(195,164,124,0.42); box-shadow: 0 26px 75px rgba(1,29,68,0.18); }
.founder-portrait { width: 100%; aspect-ratio: 1 / 1.1; position: relative; overflow: hidden; background: var(--ink); }
.founder-portrait::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -70px 70px rgba(1,29,68,0.18); pointer-events: none; }
.founder-portrait img { object-fit: cover; object-position: center 18%; mix-blend-mode: lighten; }
.founder-card { width: 100%; padding: 26px 30px 28px; border-top: 1px solid rgba(195,164,124,0.56); background: var(--ink); color: white; }
.founder-card p { margin: 0; }
.founder-card__name { font-family: var(--serif); font-size: clamp(21px, 2vw, 27px); line-height: 1.25; }
.founder-card__name span { color: var(--gold); }
.founder-card__credentials { margin-top: 10px !important; color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.founder-card__company { margin-top: 8px !important; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.about__story { padding-top: 12px; }
.about__story > p { max-width: 760px; color: var(--grey); font-size: 18px; line-height: 1.75; }
.about__story > p strong { color: var(--gold); font-weight: 800; }
.about__story .lead { margin-top: 0; color: var(--ink); font-family: inherit; font-size: clamp(29px, 2.6vw, 42px); line-height: 1.3; }
.about__story blockquote { max-width: 760px; margin: 42px 0; padding: 30px 36px 30px 40px; position: relative; border: 0; border-left: 3px solid var(--gold); background: var(--mist); }
.about__story blockquote::before { content: "“"; position: absolute; top: 5px; right: 24px; color: rgba(36,91,143,0.17); font-family: var(--serif); font-size: 88px; line-height: 1; }
.about__story blockquote p { max-width: 650px; margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.45; }
.signature-line { width: 260px; margin: 30px 0 42px; padding-top: 20px; display: grid; justify-items: center; gap: 4px; border-top: 1px solid var(--line); }
.signature-mark { width: 260px; height: 120px; position: relative; overflow: hidden; background: var(--pearl); }
.signature-mark img { object-fit: cover; object-position: center 48%; mix-blend-mode: multiply; }
.signature-line strong { display: block; margin-top: -4px; font-family: var(--serif); font-size: 18px; font-weight: 400; text-align: center; }

.journey { padding: 120px 5vw; background: var(--ink); color: white; }
.journey .section-heading { margin-bottom: 84px; }
.journey__media { max-width: 1440px; height: clamp(300px, 37vw, 510px); margin: 0 auto 70px; position: relative; overflow: hidden; }
.journey__media img { object-fit: cover; object-position: center 57%; }
.journey__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,29,68,0.08), transparent 60%), linear-gradient(0deg, rgba(1,29,68,0.82), transparent 52%); }
.journey__media figcaption { position: absolute; left: clamp(24px, 4vw, 58px); bottom: clamp(22px, 4vw, 50px); z-index: 2; max-width: 650px; color: white; font-family: var(--serif); font-size: clamp(26px, 3vw, 46px); line-height: 1.12; }
.journey__steps { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(195,164,124,0.45); }
.journey__steps article { min-height: 315px; padding: 32px 34px; border-right: 1px solid rgba(255,255,255,0.13); }
.journey__steps article:last-child { border-right: 0; }
.journey__steps span { color: var(--gold); font-size: 10px; letter-spacing: 0.2em; }
.journey__steps h3 { margin: 78px 0 20px; font-family: var(--serif); font-size: 33px; font-weight: 400; }
.journey__steps p { margin: 0; color: rgba(255,255,255,0.62); line-height: 1.7; }

.faq { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 10vw; }
.faq__heading > p:last-child { max-width: 400px; margin: 28px 0 0; color: var(--grey); line-height: 1.7; }
.faq__image { min-height: 320px; margin-top: 42px; position: relative; overflow: hidden; border-bottom: 3px solid var(--gold); }
.faq__image img { object-fit: cover; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; padding: 27px 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; font-family: var(--serif); font-size: 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--gold); border-radius: 50%; color: var(--blue); font-family: Arial, Helvetica, sans-serif; transition: transform 180ms ease; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details > p { max-width: 720px; margin: -4px 50px 28px 0; color: var(--grey); line-height: 1.75; }

.contact { padding: 120px 7vw; display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 9vw; background: var(--mist); }
.contact__copy { padding-top: 18px; }
.contact__copy > p:not(.eyebrow) { max-width: 480px; margin: 30px 0 0; color: var(--grey); font-size: 17px; line-height: 1.75; }
.contact__image { max-width: 560px; min-height: 280px; margin-top: 42px; position: relative; overflow: hidden; border-bottom: 3px solid var(--gold); box-shadow: 0 20px 55px rgba(1,29,68,0.12); }
.contact__image img { object-fit: cover; }
.contact__note { margin-top: 38px; display: flex; align-items: center; gap: 22px; }
.contact__note span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold); font-family: var(--serif); font-size: 24px; }
.contact__note p { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.35; }
.contact-form { padding: clamp(28px, 4vw, 56px); background: var(--pearl); box-shadow: 0 28px 80px rgba(1,29,68,0.08); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-form label { display: block; margin-bottom: 22px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-top: 10px; padding: 14px 0; border: 0; border-bottom: 1px solid rgba(1,29,68,0.24); border-radius: 0; outline: none; background: transparent; color: var(--ink); font-size: 16px; font-weight: 400; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.contact-form .button { width: 100%; margin-top: 8px; }
.form-disclaimer { margin: 15px 0 0; color: var(--grey); font-size: 11px; line-height: 1.5; text-align: center; }
.form-success { margin: 18px 0 0; padding: 14px; background: rgba(36,91,143,0.09); color: var(--blue); font-size: 13px; line-height: 1.5; }

.page-hero { min-height: 470px; padding: 96px 7vw; display: flex; align-items: center; overflow: hidden; position: relative; background: var(--ink); color: white; }
.page-hero::after { content: ""; position: absolute; width: 500px; height: 500px; right: -120px; bottom: -300px; border: 1px solid rgba(195,164,124,0.25); border-radius: 50%; box-shadow: 0 0 0 70px rgba(195,164,124,0.04), 0 0 0 140px rgba(195,164,124,0.025); }
.page-hero > div { width: min(920px, 100%); position: relative; z-index: 1; }
.page-hero h1 { max-width: 920px; margin: 18px 0 24px; font-size: clamp(50px, 6.2vw, 92px); }
.page-hero > div > p:last-child { max-width: 680px; margin: 0; color: rgba(255,255,255,0.72); font-size: 18px; line-height: 1.75; }

.calculator-section { padding: 110px 7vw; background: var(--paper); }
.calculator-shell { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr); background: var(--pearl); box-shadow: 0 30px 90px rgba(1,29,68,0.1); }
.calculator-inputs { padding: clamp(36px, 6vw, 78px); }
.calculator-heading { margin-bottom: 50px; }
.calculator-heading h2 { margin-top: 16px; }
.calculator-control { margin-top: 38px; display: block; }
.calculator-control > span { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.calculator-control > span strong { color: var(--ink); font-size: 14px; letter-spacing: 0.03em; }
.calculator-control output { color: var(--ink); font-family: var(--serif); font-size: 28px; }
.calculator-control input[type="range"] { width: 100%; height: 4px; margin: 24px 0 12px; appearance: none; border-radius: 2px; outline: none; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); accent-color: var(--gold); }
.calculator-control input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; appearance: none; border: 5px solid var(--ink); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--pearl); }
.calculator-control input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 5px solid var(--ink); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--pearl); }
.calculator-number { width: 170px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: white; color: var(--ink); font-weight: 700; }
.calculator-number:focus { border-color: var(--gold); outline: 2px solid rgba(195,164,124,0.24); }
.calculator-control small { margin-top: 9px; display: flex; justify-content: space-between; color: var(--grey); font-size: 11px; }
.calculator-results { padding: clamp(38px, 5vw, 66px); display: flex; flex-direction: column; background: var(--ink); color: white; border-top: 4px solid var(--gold); }
.result-primary { margin: 50px 0 42px; padding-bottom: 38px; border-bottom: 1px solid rgba(195,164,124,0.35); }
.result-primary span, .result-primary small { display: block; color: rgba(255,255,255,0.62); font-size: 12px; }
.result-primary strong { display: block; margin: 12px 0 6px; color: var(--gold); font-family: var(--serif); font-size: clamp(48px, 5vw, 72px); font-weight: 400; line-height: 1; }
.result-row { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.result-row span { color: rgba(255,255,255,0.65); font-size: 13px; }
.result-row strong { font-family: var(--serif); font-size: 22px; font-weight: 400; }
.calculator-results .button { margin-top: auto; padding-top: 16px; padding-bottom: 16px; }
.calculator-note { max-width: 1320px; margin: 30px auto 0; padding: 24px 28px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--ink); font-size: 12px; line-height: 1.65; }
.calculator-note p { margin: 0 0 8px; }
.calculator-note p:last-child { margin-bottom: 0; font-weight: 800; }
.page-cta { padding: 100px 7vw; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; background: var(--blue); color: white; }
.page-cta h2 { margin-top: 16px; }
.page-cta > div:last-child { align-self: end; }
.page-cta > div:last-child p { max-width: 620px; color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.75; }
.page-cta .text-link { margin-top: 22px; }

.contact-page { padding: 110px 7vw; display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(520px, 1.2fr); gap: 8vw; background: var(--mist); }
.contact-page__intro > p:not(.eyebrow) { max-width: 520px; color: var(--grey); font-size: 17px; line-height: 1.75; }
.contact-page__image { min-height: 360px; margin-top: 38px; position: relative; overflow: hidden; border-bottom: 4px solid var(--gold); box-shadow: 0 24px 65px rgba(1,29,68,0.12); }
.contact-page__image img { object-fit: cover; }
.whatsapp-button { width: 100%; margin-top: 20px; background: var(--ink); color: var(--gold); }
.whatsapp-button:hover, .whatsapp-button:focus-visible { background: #0a315f; color: white; }
.whatsapp-mark { width: 28px; height: 28px; margin-right: 10px; display: inline-grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-size: 15px; line-height: 1; transform: rotate(-14deg); }
.contact-page__main { display: flex; flex-direction: column; gap: 34px; }
.contact-details-card { padding: clamp(28px, 4vw, 40px); display: grid; grid-template-columns: minmax(190px, 0.72fr) minmax(270px, 1.28fr); align-items: center; gap: clamp(28px, 4vw, 48px); background: var(--ink); color: white; border: 1px solid rgba(195,164,124,0.4); border-top: 3px solid var(--gold); box-shadow: 0 24px 65px rgba(1,29,68,0.16); }
.contact-details-card > img { width: 100%; height: auto; display: block; mix-blend-mode: lighten; }
.contact-details-card > div { padding-left: 30px; border-left: 1px solid rgba(195,164,124,0.42); }
.contact-details-card p { margin: 0 0 17px; color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.45; }
.contact-details-card p:last-child { margin-bottom: 0; }
.contact-details-card span { display: block; margin-bottom: 3px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
.contact-details-card a:hover, .contact-details-card a:focus-visible { color: var(--gold-soft); }
.contact-form--page h2 { margin: 12px 0 34px; font-size: clamp(38px, 4vw, 56px); }

.policy-hero { min-height: 430px; }
.policy-page { max-width: 1180px; margin: 0 auto; padding: 100px 7vw 120px; }
.policy-lead { max-width: 850px; margin-bottom: 78px; padding-bottom: 58px; border-bottom: 1px solid var(--line); }
.policy-lead h2 { margin-top: 18px; }
.policy-lead > p:last-child { max-width: 760px; color: var(--grey); font-size: 19px; line-height: 1.75; }
.policy-section { margin-top: 70px; }
.policy-section h2 { margin: 0 0 24px; font-size: clamp(34px, 4vw, 52px); }
.policy-section h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 25px; font-weight: 400; }
.policy-section > p { color: var(--grey); font-size: 16px; line-height: 1.8; }
.policy-section a { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.policy-section ul { margin: 0; padding-left: 22px; color: var(--grey); }
.policy-section li { margin-bottom: 13px; padding-left: 5px; line-height: 1.7; }
.policy-section li::marker { color: var(--gold); }
.policy-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.policy-contact-grid { margin: 32px 0; display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; border: 1px solid var(--line); background: var(--paper); }
.policy-contact-grid p { margin: 0; padding: 28px; color: var(--ink); line-height: 1.65; border-right: 1px solid var(--line); }
.policy-contact-grid p:last-child { border-right: 0; }
.policy-contact-grid span { display: block; margin-bottom: 9px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.complaints-timeline { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.complaints-timeline > div { min-height: 250px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--pearl); }
.complaints-timeline > div > span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; }
.complaints-timeline h3 { margin-top: 46px; }
.complaints-timeline p { margin: 0; color: var(--grey); line-height: 1.7; }
.policy-note { padding: 24px 28px; border-left: 3px solid var(--gold); background: var(--gold-soft); color: var(--ink) !important; }
.policy-highlight { padding: clamp(34px, 5vw, 58px); background: var(--ink); color: white; border-top: 4px solid var(--gold); }
.policy-highlight .eyebrow { color: var(--gold); }
.policy-highlight h2 { color: white; }
.policy-highlight > p { color: rgba(255,255,255,0.75); }
.policy-highlight a { color: var(--gold-soft); }
.controller-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.controller-grid > div { padding: clamp(30px, 4vw, 46px); background: var(--paper); }
.controller-grid > div + div { border-left: 1px solid var(--line); }
.controller-grid p { color: var(--grey); line-height: 1.7; }

footer { padding: 80px 5vw 36px; background: var(--ink); color: white; }
.footer__top { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px 1fr 1fr 1.2fr; gap: 7vw; }
.footer__brand { width: 230px; height: 180px; display: block; overflow: hidden; }
.footer__brand img { width: 100%; height: 100%; object-fit: cover; }
.footer__top > div { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; color: rgba(255,255,255,0.64); font-size: 14px; }
.footer__label { margin: 0 0 10px; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.footer__top a:hover { color: white; }
.footer__statement { margin: 0; justify-self: end; font-family: var(--serif); font-size: clamp(28px, 3vw, 43px); line-height: 1.18; }
.footer__legal { max-width: 1440px; margin: 64px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.48); font-size: 11px; line-height: 1.65; }
.footer__legal p { margin: 8px 0; }
.footer__legal strong { color: var(--gold-soft); }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 170px 1fr auto; gap: 24px; }
  .brand { width: 158px; }
  .desktop-nav { gap: 20px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .journey__steps { grid-template-columns: repeat(2, 1fr); }
  .journey__steps article:nth-child(2) { border-right: 0; }
  .journey__steps article { border-bottom: 1px solid rgba(255,255,255,0.13); }
  .footer__top { grid-template-columns: 230px 1fr 1fr; }
  .footer__statement { grid-column: 1 / -1; justify-self: start; margin-top: 24px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 90px; }
  .site-header { height: 90px; grid-template-columns: 148px 1fr auto; padding: 0 24px; }
  .brand { width: 142px; }
  .desktop-nav { display: none; }
  .mobile-menu { display: block; justify-self: end; position: relative; }
  .mobile-menu summary { width: 46px; height: 46px; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; list-style: none; background: var(--ink); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { width: 100%; height: 1px; background: var(--gold); }
  .mobile-menu nav { position: absolute; top: 58px; right: 0; width: 240px; padding: 18px; display: flex; flex-direction: column; background: var(--ink); color: white; box-shadow: 0 20px 50px rgba(1,29,68,0.24); }
  .mobile-menu nav a { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .hero { grid-template-columns: 1fr; }
  .hero__copy { padding: 82px 7vw 70px; }
  .hero__visual { min-height: 500px; }
  .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 4vw; }
  .trust-strip p { min-height: 112px; padding: 16px 10px; flex-direction: column; gap: 10px; border-right: 1px solid rgba(195,164,124,0.34); text-align: center; }
  .trust-strip p:last-child { border-right: 0; }
  .trust-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .section-heading, .about, .faq { grid-template-columns: 1fr; gap: 52px; }
  .about__intro { position: static; }
  .founder-profile { max-width: 620px; }
  .service-feature { grid-template-columns: 1fr; }
  .service-feature__image { min-height: 420px; }
  .protection { grid-template-columns: 1fr; }
  .protection__statement { min-height: 500px; }
  .protection__content { padding: 80px 7vw; }
  .contact { grid-template-columns: 1fr; }
  .calculator-shell, .contact-page, .page-cta { grid-template-columns: 1fr; }
  .policy-columns { grid-template-columns: 1fr; gap: 36px; }
  .policy-contact-grid { grid-template-columns: 1fr; }
  .policy-contact-grid p { border-right: 0; border-bottom: 1px solid var(--line); }
  .policy-contact-grid p:last-child { border-bottom: 0; }
  .calculator-results .button { margin-top: 40px; }
  .contact-page { gap: 60px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .welcome-intro { padding: 24px; }
    .welcome-intro__button { width: min(260px, 100%); }
  .site-header { grid-template-columns: 120px 1fr auto; padding: 0 16px; }
  .brand { width: 114px; }
  .button--nav { min-height: 44px; padding: 0 13px; font-size: 12px; }
  .hero__copy { padding: 64px 24px 58px; }
  h1 { font-size: clamp(50px, 15vw, 68px); }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero__visual { min-height: 390px; }
  .hero__promise { margin-top: 42px; }
  .trust-strip { padding-inline: 10px; }
  .trust-strip p { min-height: 106px; padding-inline: 7px; font-size: 11px; line-height: 1.35; }
  .trust-icon { width: 34px; height: 34px; flex-basis: 34px; }
  .section, .journey, .contact { padding: 82px 24px; }
  .section-heading { margin-bottom: 44px; }
  .service-grid, .journey__steps { grid-template-columns: 1fr; }
  .service-card { min-height: 320px; }
  .service-feature { margin-top: 42px; }
  .service-feature__image { min-height: 310px; }
  .service-feature__copy { padding: 40px 26px; }
  .service-feature__points { grid-template-columns: 1fr; }
  .journey__steps article { border-right: 0; }
  .journey__media { margin-bottom: 48px; }
  .protection__statement, .protection__content { padding: 78px 24px; }
  .protection__statement { min-height: 460px; }
  .page-hero { min-height: 410px; padding: 72px 24px; }
  .page-hero h1 { font-size: clamp(45px, 13vw, 62px); }
  .calculator-section, .contact-page, .page-cta { padding: 78px 24px; }
  .policy-page { padding: 78px 24px 92px; }
  .policy-lead { margin-bottom: 56px; padding-bottom: 42px; }
  .policy-section { margin-top: 54px; }
  .complaints-timeline, .controller-grid { grid-template-columns: 1fr; }
  .controller-grid > div + div { border-left: 0; border-top: 1px solid var(--line); }
          .calculator-inputs, .calculator-results, .contact-form { padding: 32px 24px; }
  .calculator-control > span { align-items: flex-start; flex-direction: column; gap: 8px; }
  .contact-details-card { grid-template-columns: 1fr; }
  .contact-details-card > img { max-width: 300px; }
  .contact-details-card > div { padding: 26px 0 0; border-left: 0; border-top: 1px solid rgba(195,164,124,0.42); }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
  footer { padding: 64px 24px 32px; }
  .footer__top { grid-template-columns: 1fr; gap: 36px; }
  .footer__brand { width: 190px; height: 150px; }
  .footer__statement { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

.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; }

/* ==========================================================================
   ADDITIONS — everything above this line is the original site stylesheet,
   carried over unchanged apart from asset paths.
   ========================================================================== */

/* --- images -------------------------------------------------------------
   The original used Next.js <Image fill>, which absolutely positions the
   image inside its parent. This reproduces that without the framework. */
.fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: top 160ms ease;
}
.skip-link:focus { top: 16px; }

/* --- visible focus ------------------------------------------------------
   The original removed outlines in several places, which left keyboard
   users with nothing to follow. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.policy-highlight :focus-visible,
.calculator-results :focus-visible,
.contact-details-card :focus-visible,
footer :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible { outline-color: var(--gold-soft); }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible { outline-offset: 4px; }

/* --- current page in the nav -------------------------------------------
   Replaces the old rule that permanently underlined the first item. */
.desktop-nav a[aria-current="page"]::after { right: 0; }
.mobile-menu nav a[aria-current="page"] { color: var(--gold); }

/* --- cookie table ------------------------------------------------------
   Now a real <table>, so screen readers announce it as one. */
.cookie-table {
  width: 100%;
  margin-top: 34px;
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--pearl);
  text-align: left;
}
.cookie-table th,
.cookie-table td {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-size: 15px;
  line-height: 1.6;
  vertical-align: top;
}
.cookie-table th:last-child,
.cookie-table td:last-child { border-right: 0; }
.cookie-table tbody tr:last-child td { border-bottom: 0; }
.cookie-table thead th {
  background: var(--ink);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cookie-table td:first-child { width: 15%; color: var(--ink); font-weight: 700; }
.cookie-table td:nth-child(2) { width: 20%; }

/* --- contact form feedback ---------------------------------------------- */
.form-error {
  margin: 14px 0 0;
  padding: 13px 16px;
  border-left: 3px solid #b3402f;
  background: rgba(179, 64, 47, 0.07);
  color: #8c2f21;
  font-size: 13px;
  line-height: 1.55;
}
.form-fallback {
  margin: 16px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
}
.form-fallback a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.form-fallback[hidden] { display: none; }

/* ==========================================================================
   WELCOME SCREEN — the animated lockup replaces the looping video
   ========================================================================== */

.welcome-intro[hidden] { display: none; }

.welcome-stage {
  position: relative;
  width: min(560px, 84vw);
  aspect-ratio: 1000 / 398;   /* the artwork's own proportions */
  margin: 0 auto;
}
.welcome-stage img {
  position: absolute;
  display: block;
  border: 0;
  max-width: none;
}
/* each piece placed as a % of the stage, so it holds together at any size */
.welcome-stage .wl-roof { left: 3.00%;  top: 0;      width: 51.20%; height: 23.37%; }
.welcome-stage .wl-jkp  { left: 0;      top: 26.13%; width: 56.00%; height: 61.56%; }
.welcome-stage .wl-key  { left: 0;      top: 63.32%; width: 55.70%; height: 23.62%; }
.welcome-stage .wl-fin  { left: 58.20%; top: 61.31%; width: 41.80%; height: 10.55%; }
.welcome-stage .wl-tag  { left: 14.80%; top: 90.70%; width: 77.40%; height: 9.30%;  }

.welcome-stage .wl-drop {          /* thread of light dropping through the beam */
  position: absolute;
  left: 28.44%;
  top: 19.60%;
  width: 1px;
  height: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(227,196,137,0.85), rgba(227,196,137,0));
}
.welcome-stage .wl-ping {          /* the apex catching light */
  position: absolute;
  left: 28.44%;
  top: 2.8%;
  width: 9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: radial-gradient(circle, rgba(255,236,200,0.95) 0%, rgba(227,196,137,0.4) 34%, rgba(227,196,137,0) 68%);
}

/* Armed = JavaScript is running and motion is allowed, so the pieces start
   hidden. Without JavaScript the class is never set and the whole lockup
   simply shows, fully drawn. */
.jkp-armed .welcome-stage img,
.jkp-armed .welcome-intro__button { opacity: 0; }

.is-playing .wl-roof { animation: wlRoof    900ms cubic-bezier(.16,1,.3,1)  0ms    both; }
.is-playing .wl-ping { animation: wlPing    900ms cubic-bezier(.33,.9,.3,1) 620ms  both; }
.is-playing .wl-drop { animation: wlDrop    800ms cubic-bezier(.16,1,.3,1)  700ms  both; }
.is-playing .wl-jkp  { animation: wlDescend 950ms cubic-bezier(.16,1,.3,1)  900ms  both; }
.is-playing .wl-key  { animation: wlDraw    950ms cubic-bezier(.33,.9,.3,1) 1350ms both; }
.is-playing .wl-fin  { animation: wlTrack   900ms cubic-bezier(.16,1,.3,1)  1750ms both; }
.is-playing .wl-tag  { animation: wlRise    800ms cubic-bezier(.16,1,.3,1)  2200ms both; }
.is-playing .welcome-intro__button { animation: wlRise 900ms cubic-bezier(.16,1,.3,1) 3150ms both; }

.is-playing .wl-key {
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, rgba(0,0,0,0) 62% 100%);
          mask-image: linear-gradient(90deg, #000 0 40%, rgba(0,0,0,0) 62% 100%);
  -webkit-mask-size: 260% 100%;   mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.is-playing .wl-fin { transform-origin: left center; }

@keyframes wlRoof {
  from { opacity: 0; clip-path: inset(0 50% 0 50%); }
  22%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes wlPing {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  40%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}
@keyframes wlDrop {
  0%   { opacity: 1; height: 0; }
  60%  { opacity: 1; height: 68.1%; }
  100% { opacity: 0; height: 68.1%; }
}
@keyframes wlDescend {
  from { opacity: 0; clip-path: inset(0 0 100% 0); filter: blur(4px); transform: translateY(-1.6%); }
  30%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); transform: none; }
}
@keyframes wlDraw {
  from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { opacity: 1; -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes wlTrack {
  from { opacity: 0; transform: scaleX(1.12); filter: blur(1.5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wlRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* skip the intro without waiting for the sequence to finish */
.welcome-skip {
  position: absolute;
  right: clamp(20px, 4vw, 44px);
  top: clamp(20px, 4vw, 40px);
  z-index: 2;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.welcome-skip:hover, .welcome-skip:focus-visible { color: var(--gold); }

@media (max-width: 620px) {
  .welcome-stage { width: min(430px, 88vw); }
  .welcome-intro__button { width: min(260px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .is-playing * {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .is-playing .wl-drop,
  .is-playing .wl-ping { opacity: 0 !important; }
}

@media (max-width: 620px) {
  /* stack the cookie table into readable blocks rather than crushing columns */
  .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table td { display: block; width: 100%; }
  .cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cookie-table tr { border-bottom: 1px solid var(--line); }
  .cookie-table tr:last-child { border-bottom: 0; }
  .cookie-table td { border-right: 0; border-bottom: 0; padding: 6px 20px; }
  .cookie-table td:first-child { width: auto; padding-top: 20px; font-size: 16px; }
  .cookie-table td:nth-child(2) { width: auto; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
  .cookie-table td:last-child { padding-bottom: 20px; }
}

/* a repeat visitor in the same session never sees the intro at all */
.welcome-seen .welcome-intro { display: none; }

/* honeypot: a field only an automated bot would fill in */
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-success[hidden] { display: none; }
.form-success {
  border-left: 3px solid var(--blue);
  padding: 14px 16px;
}
.form-success:focus-visible { outline-offset: 2px; }
.contact-form .button[disabled] { opacity: 0.65; cursor: default; transform: none; }

/* ==========================================================================
   FIXES — defects found while reviewing, as distinct from taste
   ========================================================================== */

/* The sticky header is 112px tall but anchors were offset by 108px, so
   jumping to #about landed the heading 4px underneath it. */
html { scroll-padding-top: 120px; }
@media (max-width: 900px) { html { scroll-padding-top: 98px; } }

/* "Critical illness cover" plus its number could not fit on a narrow phone,
   and nowrap pushed it off the side of the screen instead of wrapping. */
.protection__content li { white-space: normal; }
.protection__content li span { vertical-align: baseline; }

/* Between roughly 900px and 1000px wide, the two columns had minimum widths
   totalling more than the viewport, which forced a horizontal scrollbar. */
.contact-page { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

/* Three columns of text in a 320px viewport left about 90px each. */
@media (max-width: 420px) {
  .trust-strip { grid-template-columns: 1fr; padding: 8px 20px; }
  .trust-strip p {
    min-height: 0;
    padding: 18px 4px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    font-size: 14px;
    text-align: left;
    border-right: 0;
    border-bottom: 1px solid rgba(195,164,124,0.34);
  }
  .trust-strip p:last-child { border-bottom: 0; }
}

/* The regulatory disclosures were 11px at 48% opacity — the least readable
   text on the site, and the part a regulator would look at first. */
.footer__legal { color: rgba(255,255,255,0.66); font-size: 12.5px; line-height: 1.7; }
.footer__legal p { margin: 10px 0; }

/* Nudge the smallest labels up to a readable floor. */
.hero__promise > span,
.contact-details-card span { font-size: 10.5px; }
.founder-card__company { font-size: 11px; }
.form-disclaimer { font-size: 12px; }

/* Animating `right` makes the browser recalculate layout on every frame;
   a transform is handed straight to the compositor. */
.desktop-nav a::after { right: 0; transform: scaleX(0); transform-origin: left center; transition: transform 220ms ease; }
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ==========================================================================
   TYPOGRAPHY — Fraunces (display) with Inter Tight (text)
   Every heading in this stylesheet already routes through var(--serif), so
   swapping the two families here changes the whole site.
   ========================================================================== */
:root {
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fraunces carries an optical-size axis: it thickens its hairlines at small
   sizes and refines them at display sizes, on its own. */
h1, h2, h3, .footer__statement, .journey__media figcaption, blockquote p {
  font-optical-sizing: auto;
}

/* Georgia wanted tight tracking. Fraunces is already narrower, so the same
   values would jam the letters together. */
h1 { letter-spacing: -0.028em; }
.section-heading h2, .about h2, .journey h2, .faq h2, .contact h2, .protection h2,
.service-feature__copy h3 { letter-spacing: -0.025em; }
.page-hero h1, .policy-hero h1 { letter-spacing: -0.026em; }
.footer__statement { letter-spacing: -0.022em; }

/* two places that named Arial directly rather than going through a variable */
.protection__content li span,
.faq summary span { font-family: var(--sans); }

/* Inter Tight has a taller x-height than Arial, so the small uppercase
   labels read heavier at the same size. Easing the weight keeps them quiet. */
.eyebrow, .footer__label, .card__number, .service-card__number,
.hero__promise > span, .journey__steps span { font-weight: 700; }

/* ==========================================================================
   SUCCESS STORIES — not currently used.
   The section was removed from index.html until real reviews are available.
   These rules are left in place so it can be dropped back in unchanged.
   ========================================================================== */
.stories { padding: 110px clamp(24px, 5vw, 80px); background: var(--paper); }
.stories__inner { max-width: 1440px; margin: 0 auto; }

.stories__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.7fr);
  gap: 6vw;
  align-items: end;
  margin-bottom: 54px;
}
.stories__head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 4.4vw, 66px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.stories__head h2 em { color: var(--gold); }

.stories__rating { display: flex; flex-direction: column; gap: 10px; }
.stories__rating .stars { display: flex; gap: 4px; }
.stories__rating p { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.6; }
.stories__rating strong { color: var(--ink); font-weight: 600; }

.star { width: 17px; height: 17px; flex: 0 0 auto; fill: var(--gold); }

.stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.story {
  display: flex;
  flex-direction: column;
  padding: 36px 34px 34px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--pearl);
}
.story__mark {
  color: var(--gold-soft);
  font-family: var(--serif);
  font-size: 62px;
  line-height: 0.6;
  height: 28px;
}
.story .stars { display: flex; gap: 3px; margin: 22px 0 18px; }
.story blockquote {
  margin: 0 0 26px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.72;
}
.story blockquote p { margin: 0 0 14px; }
.story blockquote p:last-child { margin-bottom: 0; }
.story__who {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.story__who strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.story__who span {
  display: block;
  margin-top: 4px;
  color: var(--grey);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.stories__note {
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--gold-soft);
  color: var(--grey);
  font-size: 13px;
  line-height: 1.7;
  max-width: 74ch;
}

@media (max-width: 1000px) {
  .stories__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .stories__head { grid-template-columns: 1fr; gap: 30px; align-items: start; }
}
@media (max-width: 620px) {
  .stories { padding: 78px 24px; }
  .stories__grid { grid-template-columns: 1fr; }
  .story { padding: 30px 26px; }
}

/* ==========================================================================
   HEADER — proportioned lockup and a tap-to-call
   ========================================================================== */

/* The old logo was a 512x512 square cropped into a 182x112 box, which cut the
   lockup off at both sides. This one is the real proportions, so it fits. */
.brand {
  width: 214px;
  padding: 0 18px;
  display: grid;
  place-items: center;
}
.brand img { width: 100%; height: auto; object-fit: contain; }
.site-header { grid-template-columns: 214px 1fr auto; }

.header-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms ease;
}
.header-call svg { width: 17px; height: 17px; flex: 0 0 auto; fill: var(--gold); }
.header-call:hover { color: var(--blue); }
.header-call:hover svg { fill: var(--blue); }

@media (max-width: 1120px) {
  /* the number itself is the first thing to go when space runs out */
  .header-call span { display: none; }
  .header-call {
    width: 48px;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(195,164,124,0.55);
    border-radius: 4px;
  }
  .header-call svg { width: 19px; height: 19px; }
}
@media (max-width: 900px) {
  .site-header { grid-template-columns: 178px 1fr auto; }
  .brand { width: 178px; padding: 0 14px; }
}
@media (max-width: 620px) {
  /* On a phone, calling beats a form. The menu still holds "Get in touch",
     so nothing is lost by dropping the button here. */
  .header-actions .button--nav { display: none; }
  .site-header { grid-template-columns: 150px 1fr auto; gap: 10px; }
  .brand { width: 150px; padding: 0 10px; }
  .header-actions { gap: 8px; }
  .header-call { width: 46px; height: 46px; }
}

/* ==========================================================================
   HERO — the regulatory position, stated up front
   ========================================================================== */
.hero__regulated {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 480px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.6;
}
.hero__regulated svg { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; fill: var(--gold); }
.hero__regulated strong { color: rgba(255, 255, 255, 0.9); font-weight: 600; }

@media (max-width: 900px) {
  .hero__regulated { max-width: none; }
}

/* the footer mark was cropping the same square logo — same fix as the header */
.footer__brand { width: 230px; height: auto; display: block; }
.footer__brand img { width: 100%; height: auto; object-fit: contain; }
@media (max-width: 620px) { .footer__brand { width: 190px; height: auto; } }

/* ==========================================================================
   BUY-TO-LET CALCULATOR
   ========================================================================== */
.btl-shell {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: start;
}

.btl-field { display: block; margin-bottom: 26px; }
.btl-field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.btl-field strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.btl-field em {
  color: var(--grey);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}
.btl-input {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--pearl);
}
.btl-input span {
  padding: 0 4px 0 16px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 600;
}
.btl-input input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px 0 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
}
.btl-input input:focus { outline: none; }
.btl-input:focus-within { border-color: var(--gold); }

.btl-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 30px 0 0;
  padding: 18px 20px;
  background: var(--mist);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}
.btl-toggle input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--blue); flex: 0 0 auto; }

.btl-results { display: grid; gap: 20px; }
.btl-card { padding: 30px 32px; background: var(--ink); color: white; }
.btl-card--alt { background: var(--blue); }
.btl-card h3 {
  margin: 0 0 22px;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.btl-card--alt h3 { color: var(--gold-soft); }
.btl-headline { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.btl-headline span { display: block; color: rgba(255,255,255,0.7); font-size: 13px; }
.btl-headline strong {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(38px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1;
}
.btl-card--alt .btl-headline strong { color: white; }
.btl-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 14px;
}
.btl-line span { color: rgba(255,255,255,0.7); }
.btl-line strong { font-family: var(--serif); font-size: 20px; font-weight: 400; white-space: nowrap; }
.btl-limit {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .btl-shell { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .btl-card { padding: 26px 24px; }
}

/* the cover-ratio dropdown, styled to match the number fields beside it */
.btl-input--select { padding-right: 14px; }
.btl-input--select::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: -22px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateY(-3px) rotate(45deg);
  pointer-events: none;
}
.btl-input select {
  width: 100%;
  min-height: 54px;
  padding: 0 30px 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.btl-input select:focus { outline: none; }
@media (max-width: 620px) { .btl-input select { font-size: 14px; } }

/* ==========================================================================
   SECTION RHYTHM after reordering
   About now sits directly above Mortgages, and Protection directly above
   the Journey. Without these two adjustments each pair would read as one
   long undifferentiated band.
   ========================================================================== */
.services { background: var(--paper); }
.journey { border-top: 1px solid rgba(195, 164, 124, 0.28); }

/* ==========================================================================
   ABOUT — signature block
   The signature sat in a fixed 260x120 box cropped with object-fit: cover,
   so the ink drifted off-centre and the name below never lined up with it.
   ========================================================================== */
.signature-line {
  width: 260px;
  margin: 30px 0 42px;
  padding-top: 20px;
  display: block;
  border-top: 1px solid var(--line);
}
/* Cropped tight to the ink and transparent, so it sits flush against the
   name with no box, no background and no invisible padding. */
.signature-mark {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 -6px;      /* the descender of the flourish overlaps slightly */
}
.signature-line strong {
  display: block;
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}
.signature-line strong span {
  display: block;
  margin-top: 2px;
  color: var(--grey);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   PROTECTION — label lifted clear of the photograph
   ========================================================================== */
.protection__statement { justify-content: space-between; }
.protection__label {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--gold);
}
.protection__statement-copy { margin-top: auto; }
.protection__content li { display: flex; align-items: baseline; gap: 14px; }

/* ==========================================================================
   JOURNEY — arrows between the stages, a tick on the last
   ========================================================================== */
.journey__mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(195, 164, 124, 0.5);
  border-radius: 50%;
  color: var(--gold);
}
.journey__mark svg { width: 20px; height: 20px; }
.journey__mark--done {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}
.journey__steps h3 { margin: 54px 0 20px; }

/* ==========================================================================
   CHAT WIDGET — composes a message and hands it to WhatsApp
   ========================================================================== */
.chat {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 900;                 /* below the welcome overlay */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.chat__launcher {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border: 1px solid rgba(195, 164, 124, 0.5);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(1, 29, 68, 0.28);
  transition: transform 260ms cubic-bezier(.16,1,.3,1), background 260ms ease;
}
.chat__launcher img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat__launcher:hover { transform: translateY(-2px); background: #0a315f; }
.chat__hello { white-space: nowrap; }

.chat__panel {
  width: min(340px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--pearl);
  box-shadow: 0 24px 60px rgba(1, 29, 68, 0.3);
  animation: chatIn 320ms cubic-bezier(.16,1,.3,1) both;
}
.chat__panel[hidden] { display: none; }
@keyframes chatIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--ink);
  color: white;
}
.chat__head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.chat__head strong { display: block; font-size: 15px; font-weight: 600; }
.chat__head span { display: block; margin-top: 2px; color: rgba(255,255,255,0.66); font-size: 11.5px; }
.chat__close {
  margin-left: auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.chat__close:hover { color: white; }

.chat__body { padding: 18px; }
.chat__bubble {
  margin: 0 0 14px;
  padding: 13px 15px;
  border-radius: 3px 12px 12px 12px;
  background: var(--mist);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.chat__body textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.chat__body textarea:focus { outline: none; border-color: var(--gold); }
.chat__send {
  width: 100%;
  margin-top: 12px;
  gap: 10px;
  background: #25d366;
  color: #04331a;
}
.chat__send:hover { background: #1fbb59; color: #04331a; }
.chat__send svg { width: 19px; height: 19px; fill: currentColor; }
.chat__note { margin: 12px 0 0; color: var(--grey); font-size: 11.5px; line-height: 1.6; }
.chat__note a { color: var(--blue); font-weight: 600; }

.whatsapp-mark { width: 26px; height: 26px; margin-right: 10px; fill: currentColor; }

@media (max-width: 620px) {
  /* only the avatar on a phone, so it never sits on top of the content */
  .chat__hello { display: none; }
  .chat__launcher { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat__panel { animation: none; }
  .chat__launcher:hover { transform: none; }
}

/* ==========================================================================
   ABOUT — founder portrait
   The original applied mix-blend-mode: lighten, which takes the lighter of
   the photo and the navy panel for every pixel. Around 80% of the photograph
   is darker than that navy, so the whole suit was being replaced by the
   panel colour and the silhouette dissolved into the background.
   The photograph is already shot on navy, so it needs no blending at all.
   ========================================================================== */
.founder-portrait { background: #001740; }
.founder-portrait img { mix-blend-mode: normal; }
.founder-portrait::after { box-shadow: inset 0 -70px 70px rgba(1, 29, 68, 0.12); }

/* ==========================================================================
   RISK WARNINGS — required by the network to be prominent
   ========================================================================== */
.risk-warning {
  max-width: 1440px;
  margin: 0 auto 40px;
  padding: 16px 20px;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.risk-warning--card {
  max-width: none;
  margin: 0 0 22px;
  padding: 12px 0 0;
  border-top: 1px solid var(--gold);
  border-bottom: 0;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* the four "your commitment to us" items */
.commitment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 40px;
  margin-top: 30px;
}
.commitment-grid h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
}
.commitment-grid p { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.7; }
@media (max-width: 720px) { .commitment-grid { grid-template-columns: 1fr; gap: 26px; } }

@media (max-width: 620px) {
  .risk-warning { margin-bottom: 30px; padding: 14px 0; font-size: 12px; }
}

/* The Ombudsman contact grid sits inside the navy highlight panel, where
   .policy-highlight a turned its links pale gold. The grid itself has a light
   background, so its links should match the "How to Complain" grid below. */
.policy-highlight .policy-contact-grid a { color: var(--blue); }
.policy-highlight .policy-contact-grid a:hover { color: var(--ink); }