/* =========================================================
   Wellbeing Investments — stylesheet
   ========================================================= */

:root{
  --green-900:#0f3d20;
  --green-800:#14471f;
  --green-700:#1a5228;
  --gold:#e8b157;          /* brand gold, taken from the official icon SVGs */
  --gold-dark:#cf9639;
  --cream:#f7f5ef;
  --paper:#fbfaf6;
  --ink:#242424;       /* darkened for contrast */
  --ink-soft:#4a4a4a;  /* was #5b5b5b — now 8.4:1 on paper */
  --ink-muted:#6a6a6a; /* smallest supporting text, still ≥4.5:1 */
  --footer:#3b3b3b;
  --maxw:1180px;
  --radius-pill:999px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block;}

a{color:inherit;}

h1,h2,h3{margin:0 0 .6em;line-height:1.25;font-weight:600;}

p{margin:0 0 1.1em;}

ul,ol{margin:0;padding:0;list-style:none;}

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

.center{text-align:center;}

.section{padding:88px 0;}

.section-dark{
  padding:88px 0;
  background:var(--green-900);
  color:#fff;
}

.section-title{
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  font-weight:600;
  margin-bottom:.55em;
}
.section-title.gold{color:var(--gold);}
.section-title.dark{color:var(--green-900);}

.section-lead{
  max-width:660px;
  margin-inline:auto;
  color:var(--ink-soft);
  font-size:.95rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:inherit;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  background:none;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.btn-pill{
  border-radius:var(--radius-pill);
  padding:13px 34px;
}
.btn-outline-gold{
  color:var(--gold);
  border-color:var(--gold);
}
.btn-outline-gold:hover,.btn-outline-gold:focus-visible{
  background:var(--gold);
  color:var(--green-900);
}
.btn-outline-dark{
  color:var(--ink);
  border-color:#2f2f2f;
}
.btn-outline-dark:hover,.btn-outline-dark:focus-visible{
  background:#2f2f2f;
  color:#fff;
}
.btn-gold{
  background:var(--gold);
  color:var(--green-900);
  border-color:var(--gold);
  font-weight:600;
}
.btn-gold:hover,.btn-gold:focus-visible{
  background:var(--gold-dark);
  border-color:var(--gold-dark);
}
.btn-book{
  color:var(--green-900);
  background:var(--gold);
  border-color:var(--gold);
  padding:9px 26px;
  font-size:.78rem;
  font-weight:600;
  white-space:nowrap;
}
.btn-book:hover,.btn-book:focus-visible{background:var(--gold-dark);border-color:var(--gold-dark);}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  padding:14px 0;
  transition:background-color .3s ease,box-shadow .3s ease,padding .3s ease;
}
.site-header.scrolled{
  background:var(--green-900);
  box-shadow:0 2px 18px rgba(0,0,0,.25);
  padding:8px 0;
}
.site-header.nav-open{background:var(--green-900);}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo{
  display:block;
  flex:none;
  text-decoration:none;
}
.logo img{
  width:auto;
  height:68px;
  transition:height .3s ease;
}
.site-header.scrolled .logo img{height:50px;}

.header-right{display:flex;align-items:center;gap:16px;}

.nav-toggle{
  width:34px;height:26px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0;border:0;background:none;cursor:pointer;
}
.nav-toggle span{
  display:block;height:2.5px;width:100%;
  background:var(--gold);border-radius:2px;
  transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(11.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-11.5px) rotate(-45deg);}

/* Dropdown panel: right-aligned, gold rule on top, sitting under the header
   on the right-hand side — as on the live site. */
.main-nav{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.main-nav ul{box-sizing:border-box;}
.main-nav.open{max-height:460px;}
.main-nav ul{
  width:min(760px,72vw);
  margin-left:auto;
  margin-right:max(24px,calc(50vw - var(--maxw)/2));
  background:rgba(20,71,31,.94);
  border-top:2px solid var(--gold);
  padding:18px 0 26px;
}
.main-nav a{
  display:block;
  padding:15px 34px 15px 24px;
  text-align:right;
  color:var(--gold);
  text-decoration:none;
  font-size:.98rem;
  font-weight:600;
  letter-spacing:.02em;
  transition:color .2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible{color:#fff;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:min(88vh,760px);
  display:flex;
  align-items:center;
  background:
    url("../images/background_developers.webp") center/cover no-repeat,
    var(--green-900);
  color:#fff;
  padding:150px 0 90px;
  overflow:hidden;
}
/* The hero WebP already carries the green tint, so this scrim only deepens the
   left side enough to keep the headline legible over the skyline. */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    100deg,
    rgba(15,61,32,.88) 0%,
    rgba(15,61,32,.70) 34%,
    rgba(15,61,32,.34) 62%,
    rgba(15,61,32,.12) 100%);
}
.hero-inner{position:relative;z-index:1;}
.hero-title{
  font-size:clamp(2.1rem,5vw,3.3rem);
  font-weight:600;
  color:var(--gold);
  margin-bottom:.5em;
}
.hero-sub{
  max-width:430px;
  font-size:.98rem;
  color:rgba(255,255,255,.94);
  margin-bottom:2em;
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--cream);}
.services .section-title{margin-bottom:.5em;}

.services-kicker{
  margin:44px 0 26px;
  font-weight:600;
  font-size:.9rem;
  color:var(--ink);
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 40px;
  max-width:1000px;
  margin:0 auto 48px;
}
.services-grid li{
  position:relative;
  padding-left:28px;
  font-size:.82rem;
  line-height:1.5;
  color:var(--ink);
}
.services-grid li::before{
  content:"";
  position:absolute;
  left:0;top:.3em;
  width:16px;height:16px;
  background:url("../images/bullet-point_wellbeing-investments.svg") no-repeat center/contain;
}

/* =========================================================
   BUSINESS LOANS
   ========================================================= */
.business-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.business-left .section-title{margin-bottom:1em;}
.business-image{
  position:relative;
  border:2px solid var(--gold);
  border-radius:4px;
  padding:16px 0 0 16px;
  max-width:520px;
}
.business-image img{
  border-radius:2px;
  transform:translate(-28px,22px);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.business-right{padding-top:8px;}
.business-right p{
  font-size:.9rem;
  color:rgba(255,255,255,.9);
}
.business-right .btn{margin-top:14px;}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how{
  background:#fff;
  position:relative;
  overflow:hidden;
}
/* Real decorative graphic from the live site. */
.how::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../images/Wellbeing-Investments_background_graphics.webp") center/cover no-repeat;
  opacity:.55;
  pointer-events:none;
}
.how-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(240px,320px) 1fr;
  gap:60px;
  align-items:start;
}
.how-lead{
  font-weight:600;
  font-size:1.02rem;
  color:var(--ink);
  max-width:270px;
}

.how-steps{display:flex;flex-direction:column;}
/* Number stacked above its title on the left, description on the right
   under a dotted rule — matching the live layout. */
.how-step{
  display:grid;
  grid-template-columns:minmax(180px,230px) 1fr;
  column-gap:56px;
  align-items:start;
  padding-bottom:34px;
}
.step-num{
  grid-column:1;
  font-size:3.6rem;
  font-weight:700;
  color:var(--gold);
  line-height:1;
  letter-spacing:-.02em;
}
.step-title{
  grid-column:1;
  font-size:1.16rem;
  font-weight:600;
  color:var(--ink);
  margin:0;
  padding-top:14px;
}
.step-text{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:start;
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink);
  margin:0;
  padding-top:34px;
  border-top:2px dotted rgba(0,0,0,.30);
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--green-900);
  color:#fff;
}
.cta-image{position:relative;min-height:380px;}
.cta-image img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.cta-content{
  display:flex;
  align-items:center;
  padding:72px 6vw;
}
.cta-inner{max-width:440px;}
.cta-inner p{
  font-size:.94rem;
  color:rgba(255,255,255,.92);
  margin-bottom:1.8em;
}

/* =========================================================
   WHO WE ARE
   ========================================================= */
.about{background:var(--paper);overflow:hidden;}
.about-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:48px;
  align-items:start;
}
.about-text p{
  font-size:.85rem;
  color:var(--ink-soft);
}

.about-team{
  position:relative;
  padding:26px;
}
.about-team::before{
  content:"";
  position:absolute;
  inset:0 -60px 30% 30%;
  background:var(--gold);
  z-index:0;
}
.team-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 24px;
  background:#fff;
  padding:34px 28px;
  box-shadow:0 10px 34px rgba(0,0,0,.10);
}
.team-member{text-align:center;}
.team-member img{
  width:min(172px,80%);
  aspect-ratio:1;
  height:auto;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 14px;
}
.member-name{
  font-size:1.05rem;
  font-weight:600;
  margin:0 0 4px;
  color:var(--ink);
}
.member-role{
  font-size:.8rem;
  line-height:1.45;
  color:var(--ink-soft);
  margin:0;
}

/* =========================================================
   PORTUGAL
   ========================================================= */
.portugal{background:var(--cream);overflow:hidden;}
.portugal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
/* image bleeds off the left edge of the viewport, as in the original */
.portugal-image{margin-left:calc(50% - 50vw);}
.portugal-image img{
  width:100%;
  height:clamp(300px,34vw,430px);
  object-fit:cover;
}
.portugal-text p{
  font-size:.88rem;
  color:var(--ink-soft);
  max-width:430px;
}

/* =========================================================
   LEAFLET
   ========================================================= */
/* Real decorative band background from the live site. */
.leaflet{
  position:relative;
  border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);
  overflow:hidden;
  background:
    url("../images/CtA_Background_01.jpg") center/cover no-repeat,
    var(--green-900);
}
.leaflet .container{position:relative;z-index:1;}
.leaflet-title{
  font-size:clamp(1.5rem,3vw,2.1rem);
  color:#fff;
  max-width:640px;
  margin:0 auto 2em;
}
.leaflet-actions{
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--paper);}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(240px,300px) 1fr;
  gap:70px;
  align-items:start;
}
.contact-info p{
  font-size:.82rem;
  color:var(--ink-soft);
}

.contact-list{margin:26px 0 22px;}
.contact-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:.8rem;
}
.contact-list a{
  color:var(--green-800);
  text-decoration:none;
  word-break:break-word;
}
.contact-list a:hover{text-decoration:underline;}
.contact-icon{
  width:17px;
  height:auto;
  flex:none;
  display:block;
}
.contact-icon-link{
  display:block;
  flex:none;
  line-height:0;
  transition:opacity .2s ease;
}
.contact-icon-link:hover{opacity:.7;}

/* WhatsApp now lives in the .socials row with the other platform icons. */

.socials{display:flex;gap:11px;}
.social{
  width:31px;height:31px;
  display:grid;place-items:center;
  border-radius:7px;
  color:#fff;
  transition:transform .2s ease,opacity .2s ease;
}
.social svg{width:16px;height:16px;fill:currentColor;}
.social:hover{transform:translateY(-2px);opacity:.9;}
.social-wa{background:#25d366;}
.social-ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);}
.social-li{background:#0a66c2;}
.social-yt{background:#ff0000;}
.social-fb{background:#1877f2;}

/* --- form --- */
.contact-form{max-width:620px;}
.form-row{margin-bottom:22px;}
.form-row.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
}
.field{display:flex;flex-direction:column;position:relative;}
.field-icon input{padding-right:26px;}
.input-icon{
  position:absolute;
  right:2px;
  bottom:26px;
  width:14px;
  height:auto;
  opacity:.55;
  pointer-events:none;
}
.field-spacer{border:0;}
.field label{
  font-size:.8rem;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.field input,
.field textarea{
  font-family:inherit;
  font-size:.88rem;
  color:var(--ink);
  padding:6px 2px;
  border:0;
  border-bottom:1px solid #c9c9c9;
  background:transparent;
  transition:border-color .2s ease;
}
.field textarea{resize:vertical;min-height:76px;}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.field.invalid input,
.field.invalid textarea{border-bottom-color:#c0392b;}
.field-error{
  font-size:.7rem;
  color:#c0392b;
  min-height:1em;
  margin-top:3px;
}
.form-status{
  font-size:.8rem;
  min-height:1.2em;
  margin:0 0 8px;
}
.form-status.success{color:#1a7a3c;}
.form-status.error{color:#c0392b;}
.form-actions{display:flex;justify-content:flex-end;}

.complaints{
  margin-top:64px;
  font-size:.62rem;
  line-height:1.9;
  color:var(--ink-soft);
}
.complaints a{color:var(--gold-dark);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--footer);
  color:rgba(255,255,255,.82);
  padding:46px 0 30px;
}
.footer-inner{
  display:flex;
  align-items:center;
  gap:38px;
  flex-wrap:wrap;
  padding-bottom:28px;
}
.footer-brand{flex:none;}
.footer-brand img{width:auto;height:44px;}
.footer-addr-line{
  font-size:.84rem;
  font-weight:500;
  color:#fff;
  margin:0 0 2px;
}
.footer-addr-sub{
  font-size:.7rem;
  color:rgba(255,255,255,.66);
  margin:0;
}

.footer-legal{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:26px;
}
.footer-legal p{
  font-size:.6rem;
  line-height:1.95;
  color:rgba(255,255,255,.62);
  margin-bottom:1.5em;
}
.footer-legal a{color:rgba(255,255,255,.82);}

.footer-bottom{padding-top:12px;}
.privacy-link{
  font-size:.62rem;
  color:rgba(255,255,255,.55);
  text-decoration:none;
}
.privacy-link:hover{color:var(--gold);}

/* =========================================================
   LEGAL / PRIVACY PAGE
   ========================================================= */
.legal-page{
  background:var(--paper);
  padding:150px 0 90px;
}
.legal-title{
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  color:var(--green-900);
  margin-bottom:1em;
}
.legal-body{max-width:780px;}
.legal-body h2{
  font-size:1.12rem;
  color:var(--green-900);
  margin:2em 0 .6em;
}
.legal-body p,
.legal-body li{
  font-size:.9rem;
  line-height:1.75;
  color:var(--ink-soft);
  overflow-wrap:break-word;
}
.legal-body ul{
  margin:0 0 1.1em;
  padding-left:22px;
  list-style:disc;
}
.legal-body li{margin-bottom:.4em;}
.legal-back{margin-top:48px;}
.legal-back a{
  color:var(--gold-dark);
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
}
.legal-back a:hover{text-decoration:underline;}

/* =========================================================
   HONEYPOT (spam trap)
   Off-screen rather than display:none — some bots skip hidden
   fields, but will happily fill one that is technically rendered.
   ========================================================= */
.hp-field{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  pointer-events:none;
}
.hp-field input{width:1px;}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .business-grid,
  .about-grid,
  .portugal-grid{gap:44px;}
  .contact-grid{gap:48px;}
}

/* The live site swaps to a portrait-cropped hero at this width. */
@media (max-width:980px){
  .hero{
    background:
      url("../images/background_developers_mobile.webp") center/cover no-repeat,
      var(--green-900);
  }
}

@media (max-width:860px){
  .section,.section-dark{padding:66px 0;}
  .logo img{height:56px;}

  .business-grid,
  .about-grid,
  .portugal-grid,
  .cta-band,
  .contact-grid,
  .how-grid{grid-template-columns:1fr;}

  .business-image{max-width:100%;padding:12px 0 0 12px;}
  .business-image img{transform:translate(-16px,14px);}

  .how-grid{gap:34px;}
  .how-lead{max-width:none;}
  /* stack number → title → description in one column */
  .how-step{
    grid-template-columns:1fr;
    column-gap:0;
    padding-bottom:26px;
  }
  .step-num{grid-column:1;font-size:2.6rem;}
  .step-title{grid-column:1;padding-top:6px;}
  .step-text{
    grid-column:1;
    grid-row:auto;
    padding-top:16px;
    margin-top:16px;
  }

  .cta-image{min-height:260px;}
  .cta-content{padding:56px 24px;}

  .about-team{padding:0;}
  .about-team::before{display:none;}

  .portugal-image{order:-1;margin-left:0;}

  .contact-form{max-width:none;}
  .complaints{margin-top:44px;}

  .footer-inner{gap:20px;}
}

@media (max-width:560px){
  .services-grid{grid-template-columns:1fr;gap:11px;}
  .form-row.two{grid-template-columns:1fr;gap:22px;}
  .field-spacer{display:none;}
  .team-grid{gap:22px 14px;padding:20px 14px;}
  .leaflet-actions{flex-direction:column;align-items:center;}
  .leaflet-actions .btn{width:100%;max-width:280px;}
  .form-actions{justify-content:stretch;}
  .form-actions .btn{width:100%;}
  .hero{padding:130px 0 70px;}
  .btn-book{padding:8px 16px;font-size:.72rem;}
  .logo img{height:46px;}
  .site-header.scrolled .logo img{height:40px;}
  .header-right{gap:10px;}
}

/* =========================================================
   NEW CUSTOMER FORM (multi-step)
   ========================================================= */
.form-page{
  background:var(--cream);
  padding:140px 24px 90px;
  min-height:70vh;
}
.form-shell{
  width:100%;
  max-width:820px;
  margin-inline:auto;
  background:#fff;
  border-radius:14px;
  border-top:5px solid var(--gold);
  box-shadow:0 18px 50px rgba(0,0,0,.10);
  padding:clamp(26px,4.5vw,52px);
}

.form-head{text-align:center;margin-bottom:30px;}
.form-title{
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  color:var(--green-900);
  margin-bottom:.35em;
}
.form-sub{
  font-size:.92rem;
  color:var(--ink-soft);
  margin:0;
  max-width:460px;
  margin-inline:auto;
}

/* ---------- progress ---------- */
.progress{margin-bottom:36px;}
.progress-track{
  height:6px;
  border-radius:99px;
  background:#e8e6df;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:33.33%;
  border-radius:99px;
  background:var(--green-700);
  transition:width .35s ease;
}
.progress-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:14px;
}
.progress-step{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.82rem;
  color:#9b9b9b;
  transition:color .25s ease;
}
.progress-dot{
  width:26px;height:26px;
  flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  border:2px solid #d8d6cf;
  background:#fff;
  font-size:.74rem;
  font-weight:600;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.progress-step.is-current{color:var(--green-900);font-weight:600;}
.progress-step.is-current .progress-dot{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--green-900);
}
.progress-step.is-done{color:var(--green-700);}
.progress-step.is-done .progress-dot{
  border-color:var(--green-700);
  background:var(--green-700);
  color:#fff;
}
.progress-count{
  margin:12px 0 0;
  font-size:.76rem;
  color:var(--ink-soft);
}

/* ---------- steps ---------- */
.cstep{animation:cstep-in .3s ease;}
.cstep[hidden]{display:none;}
@keyframes cstep-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.cstep-title{
  font-size:1.15rem;
  color:var(--green-900);
  padding-bottom:12px;
  margin-bottom:24px;
  border-bottom:1px solid #ececec;
}

.cgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 24px;
}
.cfield{display:flex;flex-direction:column;min-width:0;}
.cfield-full{grid-column:1 / -1;}

.cfield label,
.cradio-group legend{
  font-size:.85rem;
  font-weight:500;
  color:var(--green-900);
  margin-bottom:7px;
}
.req{color:#c0392b;margin-left:1px;}

.cfield input,
.cfield select{
  font-family:inherit;
  font-size:.92rem;
  color:var(--ink);
  padding:12px 14px;
  border:1.5px solid #dcdad3;
  border-radius:8px;
  background:#fff;
  width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.cfield select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:17px;
  padding-right:38px;
}
.cfield input:focus,
.cfield select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,177,87,.22);
}
.cfield input[readonly]{background:#f6f5f1;color:var(--ink-soft);}

/* .cinput-prefix — see the FORM FIELD FIXES block near the end. */

.chint{font-size:.72rem;color:#8b8b8b;margin-top:5px;}
.cerror{
  font-size:.74rem;
  color:#c0392b;
  margin-top:5px;
  min-height:0;
}
.cfield.invalid input,
.cfield.invalid select,
.cradio-group.invalid .cradios{
  border-color:#c0392b;
}
.cfield.invalid input:focus,
.cfield.invalid select:focus{box-shadow:0 0 0 3px rgba(192,57,43,.15);}

/* ---------- radios ---------- */
.cradio-group{
  border:0;
  padding:0;
  margin:0 0 24px;
}
.cradio-group legend{padding:0;}
.cradios{display:flex;gap:12px;flex-wrap:wrap;border-radius:8px;}
.cradio{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px;
  border:1.5px solid #dcdad3;
  border-radius:8px;
  font-size:.9rem;
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease;
  min-width:104px;
}
.cradio:hover{border-color:var(--gold);}
.cradio input{accent-color:var(--green-700);width:17px;height:17px;margin:0;}
.cradio:has(input:checked){
  border-color:var(--green-700);
  background:rgba(26,82,40,.05);
  font-weight:500;
}
.cradio:has(input:focus-visible){box-shadow:0 0 0 3px rgba(232,177,87,.28);}

/* ---------- conditional blocks ---------- */
.cconditional{
  margin:-8px 0 24px;
  padding:16px 18px;
  border-left:3px solid var(--gold);
  background:#fdf9f1;
  border-radius:0 8px 8px 0;
}
.cconditional[hidden]{display:none;}

.cnote{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:-8px 0 26px;
  padding:15px 18px;
  border-left:3px solid var(--green-700);
  background:#f2f7f3;
  border-radius:0 8px 8px 0;
}
.cnote[hidden]{display:none;}
.cnote-icon{width:19px;height:19px;flex:none;fill:var(--green-700);margin-top:1px;}
.cnote p{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink);}
.cnote a{color:var(--green-800);font-weight:500;}

/* ---------- consent ---------- */
.cconsent{margin-top:26px;}
.ccheck{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:.84rem;
  line-height:1.55;
  color:var(--ink-soft);
  font-weight:400;
  cursor:pointer;
}
.ccheck input{
  width:18px;height:18px;
  flex:none;
  margin-top:1px;
  accent-color:var(--green-700);
}
.ccheck a{color:var(--gold-dark);}

/* ---------- status + actions ---------- */
.cstatus{
  font-size:.86rem;
  margin:22px 0 0;
  min-height:0;
}
.cstatus.error{color:#c0392b;}
.cstatus.success{color:#1a7a3c;}

.cactions{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid #ececec;
}
.cactions button[hidden]{display:none;}
#nextBtn,#submitBtn{margin-left:auto;}

/* ---------- success panel ---------- */
.cdone{text-align:center;padding:22px 0 10px;}
.cdone[hidden]{display:none;}
.cdone-mark{
  width:66px;height:66px;
  margin:0 auto 22px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(26,82,40,.10);
  color:var(--green-700);
}
.cdone-mark svg{width:32px;height:32px;}
.cdone h2{font-size:1.4rem;color:var(--green-900);margin-bottom:.5em;}
.cdone p{font-size:.92rem;color:var(--ink-soft);margin-bottom:2em;}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .form-page{padding:120px 16px 70px;}
  .cgrid{grid-template-columns:1fr;gap:18px;}
  .progress-name{display:none;}
  .progress-steps{grid-template-columns:repeat(3,auto);justify-content:start;gap:14px;}
  .cactions{flex-direction:column-reverse;}
  .cactions .btn{width:100%;}
  #nextBtn,#submitBtn{margin-left:0;}
  .cradio{flex:1 1 0;min-width:0;justify-content:center;}
}

/* =========================================================
   NEW CUSTOMER FORM — compact fit
   Keeps the whole step (and its Next button) inside the fold on a
   ~720px-tall viewport, so users don't scroll to advance.
   ========================================================= */
.form-page{padding:104px 24px 48px;}
.form-shell{padding:26px clamp(22px,3.4vw,40px) 22px;}

.form-head{margin-bottom:18px;}
.form-title{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:.25em;}
.form-sub{font-size:.85rem;line-height:1.5;}

.progress{margin-bottom:20px;}
.progress-steps{margin-top:10px;}
.progress-count{margin-top:8px;}

.cstep-title{
  font-size:1.02rem;
  padding-bottom:9px;
  margin-bottom:16px;
}

.cgrid{gap:13px 22px;}
.cfield label,
.cradio-group legend{font-size:.8rem;margin-bottom:5px;}
.cfield input,
.cfield select{padding:9px 12px;font-size:.88rem;}
.cfield select{background-size:15px;}

/* Hints sit under the input without adding to the row height. */
.cfield{position:relative;padding-bottom:14px;}
.chint,
.cerror{
  position:absolute;
  left:0;
  bottom:0;
  margin-top:0;
  line-height:1.25;
}
.chint{font-size:.68rem;}
.cerror{font-size:.7rem;}
/* When an error is showing it replaces the hint, so they never stack. */
.cfield.invalid .chint{visibility:hidden;}

.cradio-group{margin-bottom:14px;}
.cradio{padding:8px 16px;font-size:.86rem;min-width:92px;}
.cradio input{width:15px;height:15px;}

.cconditional{margin:-4px 0 14px;padding:12px 14px;}
.cnote{margin:-4px 0 16px;padding:11px 14px;}
.cnote p{font-size:.82rem;}

.cconsent{margin-top:16px;}
.ccheck{font-size:.8rem;}

.cactions{margin-top:18px;padding-top:16px;}
.cactions .btn{padding:10px 30px;}

.cstatus{margin-top:14px;font-size:.82rem;}

/* Short viewports (laptops): squeeze a little further. */
@media (min-width:641px) and (max-height:820px){
  .form-page{padding:88px 24px 30px;}
  .form-head{margin-bottom:12px;}
  .form-sub{display:none;}
  .progress{margin-bottom:14px;}
  /* Visually hidden, but still announced by screen readers via aria-live. */
  .progress-count{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .cgrid{gap:9px 22px;}
  .cstep-title{padding-bottom:7px;margin-bottom:11px;}
  .cactions{margin-top:14px;padding-top:12px;}
}

@media (max-width:640px){
  .form-page{padding:96px 14px 40px;}
  .form-shell{padding:22px 18px 18px;}
  .cgrid{gap:12px;}
}

/* Step 3 has five radio groups; pair them into two columns so the step fits
   without scrolling. The conditional blocks stay full-width. */
@media (min-width:641px){
  .cstep[data-step="3"]:not([hidden]){
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:22px;
    align-items:start;
  }
  .cstep[data-step="3"] > .cstep-title,
  .cstep[data-step="3"] > .cconditional,
  .cstep[data-step="3"] > .cnote,
  .cstep[data-step="3"] > .cconsent{grid-column:1 / -1;}
}

/* On short/narrow screens 7 stacked fields simply cannot fit a viewport, so
   pin the actions bar to the bottom instead — Next is always reachable
   without scrolling, and the fields scroll behind it. */
@media (max-width:640px), (max-height:700px){
  .cactions{
    position:sticky;
    bottom:0;
    z-index:5;
    margin-top:14px;
    padding:12px 0 10px;
    background:#fff;
    box-shadow:0 -8px 18px -10px rgba(0,0,0,.28);
  }
}

/* When a step expands past the fold — e.g. both step-3 conditionals open —
   JS adds .is-tall so the buttons pin to the bottom instead of scrolling
   out of reach. */
.cform.is-tall .cactions{
  position:sticky;
  bottom:0;
  z-index:5;
  padding:12px 0 10px;
  background:#fff;
  box-shadow:0 -8px 18px -10px rgba(0,0,0,.28);
}

/* =========================================================
   READABILITY PASS
   Raises the smallest / lightest text so everything clears
   WCAG AA (4.5:1) and is comfortable at arm's length.
   ========================================================= */

/* Body copy: was .82–.9rem, often at 300 weight. */
body{font-weight:400;}

.section-lead{font-size:1rem;color:var(--ink-soft);}
.services-grid li{font-size:.92rem;color:var(--ink);}
.services-kicker{font-size:.98rem;color:var(--ink);}

.business-right p{font-size:.97rem;color:rgba(255,255,255,.96);}
.cta-inner p{font-size:1rem;color:rgba(255,255,255,.96);}

.about-text p{font-size:.95rem;color:var(--ink-soft);}
.member-role{font-size:.84rem;color:var(--ink-soft);}
.portugal-text p{font-size:.97rem;color:var(--ink-soft);}

.step-text{font-size:1rem;color:var(--ink);}
.how-lead{font-size:1.06rem;color:var(--ink);}

.contact-info p{font-size:.92rem;color:var(--ink-soft);}
.field label{font-size:.86rem;color:var(--ink-soft);}
.field input,.field textarea{font-size:.95rem;color:var(--ink);}

/* Fine print — small by nature, so give it contrast and line-height. */
.complaints{font-size:.76rem;line-height:1.85;color:var(--ink-muted);}
.complaints a{color:var(--gold-dark);text-decoration:underline;}

.footer-legal p{
  font-size:.75rem;
  line-height:1.8;
  color:rgba(255,255,255,.88);   /* was .62 — failed AA */
}
.footer-legal a{color:#fff;text-decoration:underline;}
.footer-addr-sub{font-size:.8rem;color:rgba(255,255,255,.86);}
.privacy-link{font-size:.78rem;color:rgba(255,255,255,.86);}

/* Legal / privacy page */
.legal-body p,
.legal-body li{font-size:.95rem;color:var(--ink-soft);}

/* Customer form supporting text */
.chint{color:var(--ink-muted);font-size:.72rem;}
.form-sub{font-size:.9rem;color:var(--ink-soft);}
.progress-step{color:#767676;}
.progress-count{color:var(--ink-soft);}
.ccheck{font-size:.85rem;color:var(--ink-soft);}
.cnote p{color:var(--ink);}

/* =========================================================
   CONTACT SECTION — stronger contrast
   Bold field labels and black underlines, as requested.
   ========================================================= */
.contact .field label{
  font-weight:600;
  color:#111;
  font-size:.88rem;
}
.contact .field input,
.contact .field textarea{
  border-bottom:2px solid #111;
  color:#111;
  font-size:.96rem;
}
.contact .field input::placeholder,
.contact .field textarea::placeholder{color:#6a6a6a;}
.contact .field input:focus,
.contact .field textarea:focus{
  border-bottom-color:var(--gold-dark);
  box-shadow:0 2px 0 -1px var(--gold-dark);
}
.contact .field.invalid input,
.contact .field.invalid textarea{border-bottom-color:#b02a1b;}

/* Contact details list: bolder, darker */
.contact-list li{font-size:.9rem;font-weight:500;}
.contact-list a{
  color:#111;
  font-weight:600;
  text-decoration:none;
}
.contact-list a:hover{text-decoration:underline;}

.contact-info .section-title{color:var(--gold-dark);}
.contact-info p{color:#333;}

/* Send button: solid, high contrast */
.contact .form-actions .btn{
  background:#111;
  border-color:#111;
  color:#fff;
  font-weight:600;
}
.contact .form-actions .btn:hover,
.contact .form-actions .btn:focus-visible{
  background:var(--gold-dark);
  border-color:var(--gold-dark);
  color:#111;
}

/* Step 2 gains a conditional field for self-employed applicants; keep the
   whole step inside the fold when it appears. */
.cstep[data-step="2"] .cconditional{
  margin:0;
  padding:10px 12px;
  align-self:start;
}
@media (min-width:641px) and (max-height:820px){
  .cstep[data-step="2"] .cgrid{gap:8px 20px;}
  .cstep[data-step="2"] .cconditional{padding:8px 10px;}
  .cstep[data-step="2"] .chint{display:none;}
}
/* Shortest laptops: trim the step heading too. */
@media (min-width:641px) and (max-height:740px){
  .form-page{padding:82px 24px 24px;}
  .cstep-title{font-size:.96rem;padding-bottom:6px;margin-bottom:9px;}
  .cgrid{gap:7px 20px;}
  .cfield input,.cfield select{padding:8px 11px;}
  .cactions{margin-top:12px;padding-top:10px;}
}

/* =========================================================
   FORM FIELD FIXES
   ========================================================= */

/* The compact rules reset input padding, which clobbered the room
   reserved for the £ prefix — text was rendering on top of it. */
/* Currency prefix: the £ occupies its own flex cell rather than floating
   over the input, so typed text can never overlap it regardless of padding
   rules elsewhere. The wrapper carries the border; the input is bare. */
.cinput-prefix{
  display:flex;
  align-items:stretch;
  border:1.5px solid #dcdad3;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.cprefix{
  display:flex;
  align-items:center;
  padding:0 2px 0 12px;
  font-size:.9rem;
  color:var(--ink-soft);
  background:#fff;
  user-select:none;
  flex:none;
}
.cinput-prefix input,
.cstep .cinput-prefix input{
  border:0;
  border-radius:0;
  background:transparent;
  flex:1 1 auto;
  min-width:0;
  padding-left:4px;
}
.cinput-prefix input:focus,
.cstep .cinput-prefix input:focus{
  outline:none;
  box-shadow:none;
}
.cinput-prefix:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(232,177,87,.22);
}
.cfield.invalid .cinput-prefix{border-color:#c0392b;}
.cfield.invalid .cinput-prefix:focus-within{box-shadow:0 0 0 3px rgba(192,57,43,.15);}

/* Hide the number spinner — it crowds the field and isn't useful for salary. */
.cinput-prefix input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
.cinput-prefix input[type="number"]::-webkit-outer-spin-button,
.cinput-prefix input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

/* Hints can wrap to two lines; absolute positioning made them overlap the
   next field. Put them back in flow and reserve height only when present. */
.cfield{padding-bottom:0;}
.chint,
.cerror{
  position:static;
  display:block;
  margin-top:4px;
  line-height:1.35;
}
.cerror:empty{display:none;}
.cfield.invalid .chint{display:none;}   /* error replaces hint, never both */