/* ---------- Fonts ----------
   Self-hosted so the browser never has to reach fonts.googleapis.com and
   fonts.gstatic.com before it can paint. Subset to Latin-1 + Latin Extended-A
   plus the punctuation and symbols the site uses; Fraunces and Inter are
   variable, so one file each covers every weight. Rebuild with
   tools/build_fonts.py if the character set ever needs widening. */
@font-face{
  font-family:'Fraunces';
  src:url(fonts/fraunces-var.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url(fonts/fraunces-var-italic.woff2) format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url(fonts/inter-var.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url(fonts/ibm-plex-mono-500.woff2) format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
    --ink:#3B3152;
    --ink-deep:#201A2E;
    --ink-soft:#6E6580;
    --paper:#F7F5F9;
    --card:#FFFFFF;
    --accent:#F1914E;
    --accent-deep:#DA7830;
    --line:#E3DEEC;
    --line-dark:rgba(255,255,255,.14);
    --on-dark:#F4F2F8;
    --on-dark-soft:#B7AECB;
    --radius:14px;
    --wrap:1180px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.08;
    margin:0;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  p{margin:0;}
  a{color:inherit;}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--accent-deep);
  }
  .eyebrow.on-dark{color:var(--accent);}
  .mono{font-family:'IBM Plex Mono',monospace;}

  a.skip-link{
    position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
    padding:12px 18px; z-index:200; border-radius:0 0 8px 0; font-weight:600;
  }
  a.skip-link:focus{left:0;}

  :focus-visible{outline:2.5px solid var(--accent-deep); outline-offset:3px; border-radius:3px;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
    padding:13px 24px; border-radius:999px; border:1.5px solid transparent;
    cursor:pointer; text-decoration:none; transition:transform .15s ease, background .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--accent); color:var(--ink-deep);}
  .btn-primary:hover{background:var(--accent-deep); color:#fff;}
  .btn-ghost{background:transparent; border-color:var(--line-dark); color:var(--on-dark);}
  .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
  .btn-ghost.light{border-color:var(--line); color:var(--ink);}
  .btn-ghost.light:hover{border-color:var(--ink); }
  .btn-outline-dark{background:transparent;border-color:var(--ink); color:var(--ink);}
  .btn-outline-dark:hover{background:var(--ink); color:#fff;}

  /* ---------- Nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:100; background:rgba(247,245,249,.92);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
    transition:box-shadow .2s ease;
  }
  header.nav.scrolled{box-shadow:0 6px 18px -12px rgba(32,26,46,.35);}
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:110px; gap:24px;}
  .logo-mark{height:90px; width:auto; display:block;}
  .nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
  .nav-links a{
    font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink);
    position:relative; padding:6px 0;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
    transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
  }
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .nav-phone{font-size:14px; font-weight:600; text-decoration:none; display:none;}
  .menu-btn{display:none; background:none; border:none; cursor:pointer; padding:8px;}
  .menu-btn span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .2s ease, opacity .2s ease;}

  .mobile-panel{
    position:fixed; inset:0; background:var(--ink-deep); z-index:150;
    display:flex; flex-direction:column; padding:26px 28px;
    transform:translateY(-100%); transition:transform .28s ease;
  }
  .mobile-panel.open{transform:translateY(0);}
  .mobile-panel-top{display:flex; justify-content:space-between; align-items:center;}
  /* The element is a <button>; the old selector said a.close-btn and never matched,
     so this rendered as a default white pill on the dark panel. */
  .mobile-panel .close-btn{background:none;border:none;color:var(--on-dark);font-size:28px;cursor:pointer;line-height:1;padding:6px;}
  .mobile-panel ul{list-style:none; padding:0; margin:44px 0 0; display:flex; flex-direction:column; gap:26px;}
  .mobile-panel ul a{color:var(--on-dark); text-decoration:none; font-family:'Fraunces',serif; font-size:30px; font-weight:600;}
  .mobile-panel .btn{margin-top:38px; align-self:flex-start;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    background-color:var(--ink-deep);
    background-image:
      radial-gradient(620px circle at 82% 8%, rgba(241,145,78,.22), transparent 60%),
      radial-gradient(900px circle at -10% 100%, rgba(241,145,78,.08), transparent 55%);
    padding:96px 0 96px;
  }
  .hero::before{
    content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:24px 24px;
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
    mask-image:linear-gradient(to bottom, black, transparent 85%);
  }
  .hero-grid{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  }
  .hero-copy h1{
    font-size:clamp(34px, 4.4vw, 54px); color:var(--on-dark); margin-top:18px;
  }
  .hero-copy h1 em{font-style:italic; color:var(--accent);}
  .hero-copy p.lede{
    color:var(--on-dark-soft); font-size:18px; max-width:46ch; margin-top:20px; line-height:1.6;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .trust-row{
    display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:44px; padding-top:26px;
    border-top:1px solid var(--line-dark);
  }
  .trust-item{display:flex; align-items:center; gap:8px; color:var(--on-dark-soft); font-size:13.5px; font-weight:500;}
  .trust-item .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;}

  /* ---------- Calculator card ---------- */
  .calc-card{
    background:var(--card); border-radius:20px; padding:30px 30px 26px;
    box-shadow:0 40px 70px -30px rgba(10,7,20,.55);
    border:1px solid rgba(255,255,255,.6);
  }
  .calc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px;}
  .calc-title{font-family:'Fraunces',serif; font-size:19px; font-weight:600;}
  .live-tag{
    display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace;
    font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase;
  }
  .live-dot{width:7px; height:7px; border-radius:50%; background:#3EA36B; position:relative;}
  .live-dot::after{
    content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #3EA36B; opacity:.6;
    animation:pulse 2.2s ease-out infinite;
  }
  @keyframes pulse{0%{transform:scale(.6); opacity:.7;} 100%{transform:scale(1.9); opacity:0;}}

  .field{margin-top:20px;}
  .field-label{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px;}
  .field-label span:first-child{font-size:13.5px; font-weight:600; color:var(--ink-soft);}
  .field-label span:last-child{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.02em;}

  input[type=range]{-webkit-appearance:none; appearance:none; width:100%; background:transparent; height:20px;}
  input[type=range]::-webkit-slider-runnable-track{height:4px; background:var(--line); border-radius:3px;}
  input[type=range]::-moz-range-track{height:4px; background:var(--line); border-radius:3px;}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; margin-top:-8px; width:20px; height:20px; border-radius:50%;
    background:var(--accent); border:3px solid #fff; box-shadow:0 2px 6px rgba(59,49,82,.35); cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{
    width:20px; height:20px; border-radius:50%; background:var(--accent); border:3px solid #fff;
    box-shadow:0 2px 6px rgba(59,49,82,.35); cursor:pointer;
  }

  .result-block{
    margin-top:26px; padding:22px 22px; background:var(--paper); border-radius:14px; border:1px solid var(--line);
  }
  .result-label{font-size:13px; font-weight:600; color:var(--ink-soft);}
  .result-value{font-family:'IBM Plex Mono',monospace; font-size:clamp(32px,4vw,42px); font-weight:600; color:var(--ink); margin-top:4px; letter-spacing:-0.035em;}
  .result-value span{font-size:16px; font-weight:500; color:var(--ink-soft);}
  .result-sub{display:flex; gap:22px; margin-top:14px; flex-wrap:wrap;}
  .result-sub div{font-size:13px; color:var(--ink-soft);}
  .result-sub strong{display:block; font-family:'IBM Plex Mono',monospace; color:var(--ink); font-size:15px; font-weight:600; letter-spacing:-0.02em;}
  .calc-fine{font-size:12px; color:var(--ink-soft); margin-top:16px; line-height:1.55;}

  /* ---------- Sections shared ---------- */
  section{padding:100px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head h2{font-size:clamp(28px,3.2vw,38px); margin-top:14px;}
  .section-head p{color:var(--ink-soft); font-size:17px; margin-top:14px; max-width:52ch;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.is-in{opacity:1; transform:none;}

  /* ---------- Services ---------- */
  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .service-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 24px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .service-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 20px 34px -24px rgba(59,49,82,.35);}
  .service-icon{
    width:44px; height:44px; border-radius:11px; background:var(--paper); color:var(--ink);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .service-icon svg{width:22px; height:22px;}
  .service-card h3{font-size:18px; font-weight:600; margin-bottom:8px;}
  .service-card p{color:var(--ink-soft); font-size:14.5px; line-height:1.55;}
  .service-card .link{
    display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600;
    color:var(--accent-deep); text-decoration:none;
  }

  /* ---------- Process ---------- */
  .process{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .process-grid{display:grid; grid-template-columns:repeat(4,1fr); column-gap:48px; row-gap:48px;}
  .process-step{padding:0; position:relative;}
  .process-step:not(:last-child)::after{
    content:''; position:absolute; top:6px; right:-24px; width:1px; height:calc(100% - 12px); background:var(--line);
  }
  /* no divider on the last step of a row */
  .process-step:nth-child(4n)::after{display:none;}
  .process-grid.cols-3 .process-step:nth-child(3n)::after{display:none;}
  .step-num{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; color:var(--accent-deep);}
  .process-step h3{font-size:17.5px; margin:14px 0 10px;}
  .process-step p{color:var(--ink-soft); font-size:14.5px; line-height:1.6;}

  /* ---------- Protection (dark) ---------- */
  .protection{
    background:var(--ink-deep); color:var(--on-dark); position:relative; overflow:hidden;
  }
  .protection::before{
    content:''; position:absolute; width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle, rgba(241,145,78,.16), transparent 70%);
    top:-180px; right:-140px; pointer-events:none;
  }
  .protection-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1;}
  .protection h2{color:var(--on-dark); font-size:clamp(28px,3.2vw,38px); margin-top:14px;}
  .protection > .wrap > .protection-grid > div:first-child p{color:var(--on-dark-soft); font-size:17px; margin-top:18px; max-width:48ch; line-height:1.65;}
  .protection-list{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .protection-list li{display:flex; gap:12px; align-items:flex-start; color:var(--on-dark-soft); font-size:15px;}
  .protection-list svg{flex:none; width:20px; height:20px; color:var(--accent); margin-top:2px;}
  .protection-list b{color:var(--on-dark); font-weight:600;}
  .protection-card{
    background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:16px; padding:34px;
    backdrop-filter:blur(6px);
  }
  .protection-card .big-stat{font-family:'IBM Plex Mono',monospace; font-size:44px; font-weight:600; color:var(--accent); letter-spacing:-0.035em;}
  .protection-card .big-stat + p{color:var(--on-dark-soft); margin-top:8px; font-size:14.5px; line-height:1.6;}
  .protection-card hr{border:none; border-top:1px solid var(--line-dark); margin:26px 0;}
  .protection-card p{color:var(--on-dark-soft); font-size:14.5px; line-height:1.65;}
  .protection-card .btn{margin-top:24px;}
  /* FAQ list: question on its own line, answers aligned to one left edge */
  .faq-list{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:22px;}
  .faq-list li{color:var(--on-dark-soft); font-size:15px; line-height:1.65; padding-left:18px; border-left:2px solid rgba(241,145,78,.4);}
  .faq-list b{display:block; color:var(--on-dark); font-weight:600; font-size:15.5px; margin-bottom:6px;}
  /* breathing room where a dark section runs straight into the orange band */
  .cta-wrap{padding-top:96px;}
  .mini-stat-row{display:flex; justify-content:space-between; margin-top:14px;}
  .mini-stat-row div span{display:block;}
  .mini-stat-row .n{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:20px; color:var(--on-dark); letter-spacing:-0.025em;}
  .mini-stat-row .l{font-size:12.5px; color:var(--on-dark-soft); margin-top:2px;}

  /* ---------- Trust / testimonials ---------- */
  .stat-strip{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:64px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0;
  }
  .stat-strip div{text-align:center;}
  .stat-strip .n{font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600; color:var(--ink); letter-spacing:-0.035em;}
  .stat-strip .l{font-size:13px; color:var(--ink-soft); margin-top:6px;}
  .testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .testimonial{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
  .stars{color:var(--accent); font-size:15px; letter-spacing:2px;}
  .testimonial p.quote{margin-top:16px; font-size:15px; line-height:1.65; color:var(--ink);}
  .testimonial .who{margin-top:18px; font-size:13.5px; font-weight:600; color:var(--ink-soft);}

  /* ---------- CTA band ---------- */
  .cta-band{
    background:var(--accent); border-radius:24px; margin:0 28px; padding:64px 48px;
    display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  }
  .cta-band h2{font-size:clamp(26px,3vw,34px); color:var(--ink-deep);}
  .cta-band p{color:rgba(32,26,46,.75); margin-top:10px; font-size:15.5px;}
  .cta-band .btn-outline-dark{border-color:var(--ink-deep); color:var(--ink-deep);}
  .cta-band .btn-outline-dark:hover{background:var(--ink-deep); color:#fff;}
  .cta-actions{display:flex; gap:14px; flex-wrap:wrap;}

  /* ---------- Footer ---------- */
  footer{background:var(--ink-deep); color:var(--on-dark-soft); padding:70px 0 30px; margin-top:110px;}
  .footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line-dark);}
  .footer-logo{height:90px; filter:brightness(0) invert(1); opacity:.92;}
  .footer-top p.tag{margin-top:16px; font-size:14px; max-width:32ch; line-height:1.6;}
    /* Was an h4, moved to h2 so the footer does not skip a heading level. The site's
     h1,h2,h3 rule zeroes margins and tightens line-height, so both are restored
     here to the values the h4 rendered with. */
  .footer-col h2{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark); font-weight:600; line-height:1.6; margin:1.33em 0 16px;}
  .footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
  .footer-col a{color:var(--on-dark-soft); text-decoration:none; font-size:14px;}
  .footer-col a:hover{color:var(--accent);}
  .footer-legal{padding-top:30px; font-size:12px; line-height:1.75; color:rgba(183,174,203,.75);}
  .footer-legal p + p{margin-top:10px;}
  .footer-bottom{display:flex; justify-content:space-between; margin-top:26px; font-size:12.5px; flex-wrap:wrap; gap:10px;}
  .footer-bottom a{color:var(--on-dark-soft); text-decoration:none; border-bottom:1px solid var(--line-dark);}
  .footer-bottom a:hover{color:var(--accent); border-bottom-color:var(--accent);}

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .nav-links, .nav-phone{display:none;}
    .menu-btn{display:block;}
    .hero-grid{grid-template-columns:1fr;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .process-grid{grid-template-columns:repeat(2,1fr); row-gap:40px;}
    .process-step:nth-child(4n)::after{display:block;}
    .process-step:nth-child(2n)::after{display:none;}
    .process-step:last-child::after{display:none;}
    .protection-grid{grid-template-columns:1fr; gap:36px;}
    .stat-strip{grid-template-columns:repeat(2,1fr); row-gap:24px;}
    .testimonial-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    section{padding:64px 0;}
    .nav-row{height:84px;}
    .logo-mark{height:66px;}
    .hero{padding-top:72px;}
    .services-grid{grid-template-columns:1fr;}
    .process-grid{grid-template-columns:1fr; row-gap:34px;}
    .process-step{padding-right:0;}
    .process-step::after{display:none !important;}
    .cta-band{margin:0 16px; padding:44px 26px;}
    .footer-top{grid-template-columns:1fr;}
    .wrap{padding:0 20px;}
  }

.has-dropdown {
  position:relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 180px;
  z-index: 200;
}

.dropdown li {
  margin: 0;
}

.dropdown a {
  display:block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown a:hover {
  background: #f5f5f5;
}

.has-dropdown:hover .dropdown {
  display: block;
}

/* ================= Product pages: shared additions ================= */

/* Dropdown: keyboard + touch accessible, grouped */
.has-dropdown > a::after{content:'\25BE'; font-size:9px; margin-left:6px; opacity:.65;}
.has-dropdown:focus-within .dropdown{display:block;}
.dropdown{padding:12px 0; border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(32,26,46,.45);}
.dropdown a{font-size:14.5px; color:var(--ink);}
.dropdown a:hover, .dropdown a:focus-visible{background:var(--paper); color:var(--accent-deep);}
.dropdown .dd-group{
  margin-top:8px; padding:10px 20px 8px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep);
  display:flex; align-items:center; gap:9px;
}
.dropdown .dd-group::before{
  content:''; width:14px; height:2px; border-radius:2px; background:var(--accent); flex:none;
}
.dropdown .dd-group:first-child{margin-top:-12px; border-top-width:0;}
.dropdown .dd-group + li a{padding-top:12px;}
.dropdown .dd-group a{padding:0; color:inherit; font:inherit; letter-spacing:inherit;}
.dropdown .dd-group a:hover{background:none; text-decoration:underline;}
.dropdown hr{border:none; border-top:1px solid var(--line); margin:8px 0;}
.dropdown a[aria-current="page"]{color:var(--accent-deep); font-weight:600;}

/* Mobile panel: nested product links */
.mobile-panel ul ul{margin:14px 0 0; gap:12px; padding-left:2px;}
.mobile-panel ul ul a{font-family:'Inter',sans-serif; font-size:16px; font-weight:500; color:var(--on-dark-soft);}
/* Top-level dropdown (Mortgages, Protection): reads as a peer of the plain
   links either side of it, so the only visible difference is the chevron. */
.mobile-panel .mob-top{
  font-family:'Fraunces',serif; font-size:30px; font-weight:600; color:var(--on-dark);
  display:flex; align-items:center; justify-content:center; gap:12px;
  cursor:pointer; list-style:none;
}
/* Suppress the browser's default disclosure triangle; we draw our own chevron. */
.mobile-panel .mob-top::-webkit-details-marker{display:none;}
.mobile-panel .mob-top::after{
  content:''; flex:none; width:11px; height:11px;
  border-right:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:translateY(-4px) rotate(45deg); transition:transform .2s ease;
}
.mobile-panel details[open] > .mob-top::after{transform:translateY(2px) rotate(-135deg);}

/* Band label inside a dropdown. Purely a heading now, not a control. */
.mobile-panel .mob-group{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
  display:flex; align-items:center; gap:10px;
  padding-top:20px; border-top:1px solid var(--line-dark);
}
.mobile-panel .mob-group::before{
  content:''; width:16px; height:2px; border-radius:2px; background:var(--accent); flex:none;
}
.mobile-panel .mob-all{padding-top:20px; border-top:1px solid var(--line-dark);}
.mobile-panel .mob-all a{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em;
  color:var(--accent); font-weight:600;
}
.mobile-panel .mob-section{display:block;}
.mobile-panel{overflow-y:auto;}

/* Breadcrumb */
.crumb{font-size:13px; color:var(--on-dark-soft); margin-bottom:18px;}
.crumb a{color:var(--on-dark-soft); text-decoration:none;}
.crumb a:hover{color:var(--accent);}
.crumb span{opacity:.5; margin:0 7px;}

/* At a glance */
.fact-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:44px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.fact-grid div{background:var(--card); padding:22px 20px;}
.fact-grid dt{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.fact-grid dd{margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink); font-weight:500;}

/* Plain point list */
.point-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.point-list li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.6; color:var(--ink-soft);}
.point-list svg{flex:none; width:19px; height:19px; color:var(--accent-deep); margin-top:3px;}
.point-list b{color:var(--ink); font-weight:600;}

/* Caveat / risk note */
.note{
  margin-top:38px; padding:20px 22px; border-radius:12px;
  background:rgba(241,145,78,.08); border:1px solid rgba(241,145,78,.32);
  font-size:13.5px; line-height:1.65; color:var(--ink-soft);
}
.note b{color:var(--ink); display:block; margin-bottom:5px; font-size:14px;}

/* Related products */
/* auto-fit so a page can carry a fourth related link without the row breaking;
   three items still lay out as three columns on desktop. */
.related-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px; margin-top:16px;}
.related-card{
  display:block; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px 22px; transition:border-color .2s ease, transform .2s ease;
}
.related-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.related-card h3{font-size:16.5px; margin-bottom:7px;}
.related-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}

@media (max-width:900px){
  .fact-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .fact-grid{grid-template-columns:1fr;}
}

.services-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){ .services-grid.cols-3{grid-template-columns:1fr;} }

/* ---------- Per-page referral form ---------- */
.referral-section{background:var(--paper); padding-top:0;}
.referral-panel{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:44px 44px; box-shadow:0 40px 70px -50px rgba(10,7,20,.45);
}
.referral-intro h2{font-size:clamp(24px,2.6vw,30px); margin-top:12px;}
.referral-intro > p{color:var(--ink-soft); font-size:15.5px; line-height:1.65; margin-top:14px;}
.referral-intro .point-list{margin-top:24px;}
.referral-intro .point-list li{font-size:14.5px;}
.rf-alt{margin-top:26px; font-size:14px; color:var(--ink-soft);}
.rf-alt a{color:var(--accent-deep); font-weight:600;}
.rf-privacy{margin-top:14px; font-size:12px; color:var(--ink-soft); line-height:1.55;}
/* ---------- Enquiry form ----------
   These rules used to live in a <style> block inside index.html, so only the
   homepage had them. Every generated page linked styles.css alone and rendered
   the form unstyled: labels beside inputs, default browser controls, and a
   status message that appeared as bare text after submitting. Shared here so
   all pages get the same form. The calculator-only rules (.referral,
   .rf-intro, .rf-summary) remain in index.html because nothing else uses them. */
.rf-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rf-field{display:flex; flex-direction:column; gap:6px; margin-top:14px;}
.rf-field.full{grid-column:1 / -1;}
.rf-field label{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.rf-field label .req{color:var(--accent-deep);}
.rf-field input,
.rf-field select,
.rf-field textarea{
  font-family:'Inter',sans-serif; font-size:15px; line-height:1.4; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px; width:100%; transition:border-color .18s ease;
}
.rf-field textarea{resize:vertical; min-height:84px;}
.rf-field input:hover, .rf-field select:hover, .rf-field textarea:hover{border-color:#CFC7DF;}
.rf-field input:focus, .rf-field select:focus, .rf-field textarea:focus{border-color:var(--accent); outline-offset:1px;}
.rf-field select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:38px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.rf-field select optgroup{font-family:'Inter',sans-serif; font-weight:600; color:var(--ink);}
.rf-field select option{font-weight:400; color:var(--ink);}

.rf-consent{display:flex; gap:10px; align-items:flex-start; margin-top:18px;}
.rf-consent input{flex:none; width:17px; height:17px; margin-top:2px; accent-color:var(--accent-deep); cursor:pointer;}
.rf-consent label{font-size:12.5px; color:var(--ink-soft); line-height:1.55;}

.rf-submit{margin-top:18px; width:100%;}
.rf-submit[disabled]{opacity:.6; cursor:progress; transform:none;}

.rf-status{margin-top:14px; font-size:13.5px; line-height:1.55; display:none;}
.rf-status.show{display:block;}
.rf-status.ok{color:#2F7D52;}
.rf-status.err{color:#B4452F;}

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

.referral-form .rf-field:first-child,
.referral-form .rf-grid > .rf-field:nth-child(-n+2){margin-top:0;}

@media (max-width:900px){
  .referral-panel{grid-template-columns:1fr; gap:32px; padding:32px 26px;}
}

/* ---------- Prose (About, blog posts) ---------- */
.prose{max-width:760px;}
.prose p{font-size:17px; line-height:1.75; color:var(--ink-soft); margin-top:18px;}
.prose p:first-child{margin-top:0;}
.prose.on-dark p{color:var(--on-dark-soft);}
.article h2{
  font-family:'Fraunces',serif; font-size:clamp(21px,2.2vw,26px); font-weight:600;
  color:var(--ink); margin-top:44px; line-height:1.2;
}
.article h2:first-child{margin-top:0;}
/* Blog-post FAQ questions. Without a rule here they inherit margin:0 from the
   global h1,h2,h3 declaration and sit flush against the answer above, which is
   what made the Q&A block read as one unbroken wall of text. */
.article h3{
  font-family:'Fraunces',serif; font-size:18.5px; font-weight:600;
  color:var(--ink); line-height:1.35; margin:34px 0 0;
}
.article h2 + h3{margin-top:20px;}   /* first question under its section heading */
.article h3 + p{margin-top:9px;}     /* an answer belongs to the question above it */
.article .note{margin-top:44px;}

/* ---------- Blog index ---------- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.post-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 26px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 20px 34px -24px rgba(59,49,82,.35);}
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.post-cat{color:var(--accent-deep); font-weight:600;}
.post-card h2{font-size:19px; line-height:1.25; margin-bottom:10px;}
.post-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.6; flex:1;}
.post-card .link{margin-top:16px;}

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

/* ---------- Calculator pages ----------
   The tool pages reuse .calc-card from the homepage calculator and add their
   own inputs, a limits panel and the hub grid. */
.calc-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start;}
.ci-field{display:flex; flex-direction:column; gap:6px; margin-top:20px;}
.ci-field:first-of-type{margin-top:0;}
.ci-field label{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
}
.ci-value{font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.02em;}
.ci-hint{font-size:12px; color:var(--ink-soft); line-height:1.5; margin:-2px 0 2px;}
.ci-field select{
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; width:100%;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.ci-field input[type="range"]{width:100%; accent-color:var(--accent-deep); cursor:pointer;}
.calc-live{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-deep);
}
/* Tool results are longer than the homepage calculator's single figure: a
   borrowing range, or a sentence like "The rent covers it". Sized to fit those
   rather than wrapping. The homepage keeps its larger number. */
.calc-wrap .result-value{font-size:clamp(24px,2.6vw,30px); line-height:1.25;}
.calc-wrap .result-sub{gap:26px;}
.result-value.is-pass{color:#2F7D52;}
.result-value.is-fail{color:#B4452F;}

.calc-limits{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 32px;}
.calc-limits h2{font-size:19px; margin-bottom:6px;}
.calc-limits ul{list-style:none; padding:0; margin:14px 0 0;}
.calc-limits li{
  position:relative; padding-left:20px; margin-top:14px;
  font-size:14.5px; line-height:1.65; color:var(--ink-soft);
}
.calc-limits li::before{
  content:''; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.cl-foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft);}
.cl-foot a{color:var(--accent-deep); font-weight:600;}

.tool-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.tool-card{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px 26px; text-decoration:none; color:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.tool-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.tool-card h2{font-size:17px; margin-bottom:8px;}
.tool-card p{font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:14px;}
.tool-note{margin-top:26px; font-size:13px; color:var(--ink-soft); line-height:1.6;}

@media (max-width:900px){
  .calc-wrap{grid-template-columns:1fr;}
}

/* ---------- Google reviews ----------
   Rendered by reviews.js from the live listing. The page ships with none of
   its own, so if the API is unreachable the fallback below is what shows. */
#reviewsSummary{margin-top:12px; font-size:15px; color:var(--ink-soft); line-height:1.6;}
.gr-rating{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink); font-size:17px; letter-spacing:-0.02em;}
#reviewsSummary a{color:var(--accent-deep); font-weight:600;}
.gr-note{display:block; margin-top:6px; font-size:12.5px; color:var(--ink-soft);}
.gr-card{display:flex; flex-direction:column;}
.gr-card .quote{margin:0; font-style:normal;}
.gr-by{display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:16px;}
.gr-avatar{width:40px; height:40px; border-radius:50%; flex:none; object-fit:cover;}
.gr-avatar-blank{
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink-soft); font-weight:600; text-transform:uppercase;
}
.gr-meta{display:flex; flex-direction:column; gap:2px; min-width:0;}
.gr-meta .who{font-size:14px; font-weight:600; color:var(--ink);}
.gr-meta .who a{color:inherit; text-decoration:none;}
.gr-meta .who a:hover{text-decoration:underline;}
.gr-when{font-size:12.5px; color:var(--ink-soft);}
.gr-fallback{margin-top:22px; font-size:15px; color:var(--ink-soft); line-height:1.65;}
.gr-fallback a{color:var(--accent-deep); font-weight:600;}

/* Reviews marquee.
   A transform animation over a duplicated set rather than a scrolling
   container: transforms are composited, so this glides smoothly, and it avoids
   scroll-behaviour entirely, which would not reliably move this element. The
   track shifts left by exactly half its width, at which point the second copy
   sits where the first began, so the restart cannot be seen. */
.gr-marquee{
  position:relative; overflow:hidden; margin-top:20px;
  /* Fade the two edges so cards enter and leave rather than being cut off. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gr-track{
  display:flex; gap:18px; width:max-content; padding:4px 0 10px;
  animation:gr-scroll 60s linear infinite;
}
@keyframes gr-scroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
/* Stop so it can be read, and so links can be reached. */
.gr-marquee:hover .gr-track,
.gr-marquee:focus-within .gr-track{animation-play-state:paused;}
.gr-track > .gr-card{
  flex:0 0 clamp(258px, 26vw, 340px);
  margin:0; white-space:normal;
}
@media (prefers-reduced-motion: reduce){
  /* Hold it still and let it be scrolled by hand instead. */
  .gr-track{animation:none;}
  .gr-marquee{overflow-x:auto;}
}

}

/* The prompt sits inside the calculator, next to the figures it refers to,
   rather than in a band further down the page. */
.calc-cta{margin-top:22px; padding-top:20px; border-top:1px solid var(--line);}
.cc-head{font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--ink);}
.cc-sub{margin-top:6px; font-size:14px; line-height:1.6; color:var(--ink-soft);}
.cc-btn{margin-top:16px;}