/* ==========================================================================
   LeapWise site additions. style.css holds the original design.
   This file adds self-hosted fonts, accessibility and the new components.
   ========================================================================== */

/* ---------- Self-hosted fonts (no Google requests) ---------- */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:8px; z-index:2000;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:var(--radius); font-weight:600;
}
.skip-link:focus{ left:12px; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}
/* Current page in the menu (replaces the old script that coloured the link) */
.nav__links a[aria-current="page"]{ color:var(--accent); }

/* ---------- Home: two-audience cards ---------- */
.audience-card{ display:block; padding:34px; text-decoration:none; }
.audience-card:hover{ text-decoration:none; }
.audience-card__label{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.audience-card h3{ font-size:1.35rem; }
.audience-card p{ font-size:1rem; }

/* ---------- Contact form ---------- */
.contact-form{ padding:34px; position:relative; }
.contact-form:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--line); }
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:0.85rem; font-weight:600; color:var(--navy); margin-bottom:6px; }
.form-optional{ font-weight:400; color:var(--charcoal-soft); }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid #C9D2DF; border-radius:3px;
  font-family:var(--sans); font-size:1rem; background:#fff; color:var(--charcoal);
}
.form-row textarea{ resize:vertical; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; }
.contact-form__status{ font-size:0.9rem; margin:14px 0 0; display:none; }
.contact-form__status.is-ok{ display:block; color:#1E7E34; }
.contact-form__status.is-error{ display:block; color:var(--danger); }
.contact-form__note{ font-size:0.8rem; margin:14px 0 0; color:var(--charcoal-soft); }
.contact-form__submit[disabled]{ opacity:0.7; cursor:wait; }

/* ---------- Legal pages: tables ---------- */
.legal table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:0.93rem; }
.legal th, .legal td{ text-align:left; padding:12px 14px; border:1px solid var(--line); vertical-align:top; }
.legal th{ background:var(--mist); color:var(--navy); }

/* ---------- Small-screen fixes ---------- */
.svc-layout > *, .split > *, .hero__grid > *{ min-width:0; }
@media (max-width: 560px){
  .btn{ white-space:normal; }
  /* Stack Company and Get in Touch so the longer menu text never forces sideways scrolling */
  .footer__pair{ grid-template-columns:1fr; gap:24px; }
}

/* =====================================================================
   Modern refresh (stage 1): one typeface, calmer weight, slimmer header,
   rebuilt footer. These rules override the original theme in style.css.
   ===================================================================== */
:root{
  --serif: var(--sans);   /* every heading now uses Inter */
  --radius: 8px;
}
body{ font-size:17px; line-height:1.7; }
h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.022em; line-height:1.15; }
h1{ font-weight:600; letter-spacing:-0.03em; line-height:1.08; }
h3{ letter-spacing:-0.015em; }
.lede, .prose p{ max-width:65ch; }
.eyebrow{ font-size:0.75rem; letter-spacing:0.1em; font-weight:600; }
.eyebrow::before{ display:none; }
.hero__kicker{ letter-spacing:0.1em; font-weight:600; }
.btn{ border-radius:10px; font-weight:600; padding:14px 28px; }
.btn--sm{ padding:10px 20px; }

/* Header: slimmer, lighter menu */
.nav{ height:84px; }
.nav__logo img{ height:64px; width:auto; }
.nav__links{ gap:30px; }
.nav__links > li > a{ font-size:0.94rem; font-weight:500; }
.nav__links.is-open{ top:84px; }

/* Footer */
.site-footer{ padding:72px 0 0; }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:48px;
  padding-bottom:48px;
}
.footer__brand{ max-width:320px; }
.footer__brand img{ height:112px; width:auto; max-width:none; margin-bottom:20px; }
.footer__brand p.footer__tagline{
  color:#C7D4E6 !important; font-family:var(--sans); font-style:normal;
  font-size:0.95rem !important; line-height:1.55; margin:0 !important; max-width:26ch;
}
.footer h5{ font-size:0.72rem; letter-spacing:0.1em; margin-bottom:16px; }
.footer__col a{ font-size:0.95rem; padding:6px 0; }
.footer__hours{ color:#8FA1BC; font-size:0.88rem; margin:10px 0 0 !important; padding-left:27px; }

.footer__company{
  display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:20px 56px;
  margin:0; padding:28px 0; border-top:1px solid rgba(255,255,255,0.1);
}
.footer__company dt{
  font-size:0.7rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:#7C8FAC; margin-bottom:6px;
}
.footer__company dd{ margin:0; color:#C7D4E6; font-size:0.88rem; line-height:1.5; }
.footer__bottom{ font-size:0.82rem; padding:22px 0 26px; }

@media (max-width: 980px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:40px 32px; }
  .footer__brand{ grid-column:1 / -1; max-width:none; }
  .footer__company{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width: 760px){
  .nav{ height:72px; }
  .nav__logo img{ height:52px; }
  .nav__links.is-open{ top:72px; }
  body{ font-size:16.5px; }
  .site-footer{ padding-top:56px; }
  .footer__bottom{ justify-content:flex-start; text-align:left; }
}
@media (max-width: 560px){
  .footer__top{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width: 760px){ .site-footer{ padding-bottom:64px; } }

/* =====================================================================
   Stage 2: heading font, quiet hero, grouped services
   ===================================================================== */
@font-face{ font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
:root{ --serif: "Plus Jakarta Sans", var(--sans); }
h1, h2{ font-weight:700; }
h3, h4{ font-weight:600; }
h1{ letter-spacing:-0.02em; }
h2{ letter-spacing:-0.012em; }
h3, h4{ letter-spacing:-0.005em; }

/* Hero: one column, one main action */
.hero--clean{ background:#fff; padding:112px 0 72px; }
.hero--clean h1{ max-width:19ch; font-size:clamp(2.5rem, 5.4vw, 4.4rem); line-height:1.04; margin-bottom:26px; }
.hero--clean .lede{ font-size:1.22rem; max-width:34em; margin-bottom:0; }
.hero--clean .hero__actions{ align-items:center; gap:28px; margin-top:38px; }
.link-quiet{ font-weight:600; color:var(--navy); }
.link-quiet:hover{ color:var(--accent); text-decoration:none; }
.proof{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px 40px;
  margin-top:72px; padding-top:28px; border-top:1px solid var(--line);
}
.proof li{ display:flex; gap:12px; align-items:flex-start; color:var(--charcoal); font-size:0.98rem; line-height:1.45; font-weight:500; }
.proof__tick{ color:var(--accent); flex-shrink:0; margin-top:1px; }
.proof__tick svg{ display:block; }

/* Services in three groups */
.svc-groups{ display:grid; grid-template-columns:repeat(3, 1fr); gap:56px 48px; }
.svc-group__title{
  font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  color:var(--accent); font-family:var(--sans); padding-bottom:14px; margin-bottom:6px;
  border-bottom:2px solid var(--navy);
}
.svc-group li{ border-bottom:1px solid var(--line); }
.svc-link{ display:block; padding:18px 0; color:inherit; }
.svc-link:hover{ text-decoration:none; }
.svc-link__title{ display:block; font-weight:600; color:var(--navy); font-size:1.02rem; line-height:1.35; }
.svc-link__title span{ color:var(--accent); display:inline-block; transition:transform .15s ease; }
.svc-link:hover .svc-link__title{ color:var(--accent); }
.svc-link:hover .svc-link__title span{ transform:translateX(4px); }
.svc-link__text{ display:block; color:var(--charcoal-soft); font-size:0.9rem; line-height:1.55; margin-top:6px; }

/* Approach: single calm column */
.approach{ max-width:720px; margin:0 auto; }
.approach h2{ margin-bottom:22px; }
.approach .link-quiet{ display:inline-block; margin-top:8px; }

/* Calmer cards: no lift on hover */
.card:hover, .service-card:hover{ transform:none; box-shadow:var(--shadow-sm); }
.step__num{ -webkit-text-stroke:0; color:var(--accent); opacity:0.35; }

@media (max-width: 980px){
  .svc-groups{ grid-template-columns:1fr; gap:40px; }
  .proof{ grid-template-columns:1fr; gap:16px; margin-top:48px; }
}
@media (max-width: 760px){
  .hero--clean{ padding:56px 0 48px; }
  .hero--clean .hero__actions{ gap:18px; }
}

/* =====================================================================
   Stage 3 and 4: logo sizes, quiet page headers, one button colour,
   stronger audience cards, hero shape, form, WhatsApp, grouped menu
   ===================================================================== */

/* Logo sizes (SVG logo has no built-in padding) */
.nav{ height:88px; }
.nav__logo img{ height:68px; width:auto; }
.nav__links.is-open{ top:88px; }
.footer__brand img{ height:88px; width:auto; margin-bottom:22px; }
@media (max-width: 760px){
  .nav{ height:76px; }
  .nav__logo img{ height:56px; }
  .nav__links.is-open{ top:76px; }
}

/* One main button colour: blue. Navy is for headings and dark bands. */
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:#164C89; }

/* Quiet page headers on inner pages */
.page-hero{ background:#fff; padding:72px 0 52px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing:-0.02em; max-width:18em; }
.page-hero__kicker{ letter-spacing:0.1em; font-weight:600; }
.page-hero__lede{ font-size:1.15rem; max-width:36em; margin-top:20px; }
@media (max-width: 760px){ .page-hero{ padding:48px 0 36px; } }

/* Audience cards: the main choice on the home page */
.audience-card{
  display:flex; flex-direction:column; padding:44px 40px; border-radius:14px;
  border:1px solid var(--line); border-top:4px solid var(--accent); box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.audience-card:hover{ box-shadow:var(--shadow-md); border-color:var(--accent); }
.audience-card h3{ font-size:1.5rem; margin-bottom:14px; }
.audience-card p{ font-size:1.02rem; margin-bottom:26px; }
.audience-card .card__link{ margin-top:auto; font-size:1rem; }
.audience-card:hover .card__link{ text-decoration:underline; }
.proof{ margin-top:56px; }
@media (max-width: 760px){ .audience-card{ padding:32px 26px; } }

/* Faint arrow mark behind the hero */
.hero--clean{ position:relative; overflow:hidden; }
.hero--clean .container{ position:relative; z-index:1; }
.hero--clean::after{
  content:""; position:absolute; right:max(24px, calc((100vw - 1200px) / 2)); top:50%;
  width:min(40vw, 460px); aspect-ratio:469 / 328; transform:translateY(-58%);
  background:url("/assets/images/mark.svg") no-repeat center / contain;
  opacity:0.06; pointer-events:none;
}
@media (max-width: 980px){ .hero--clean::after{ display:none; } }

/* Softer icon badges on the About page */
.expertise-card__icon{ width:64px; height:64px; margin-bottom:22px; background:var(--accent-light); color:var(--navy); box-shadow:none; }
.expertise-card{ border-radius:14px; }
.reach-card, .contact-line, .svc-sidebar__card, .svc-sidebar__contact, .card{ border-radius:12px; }

/* Services menu with group labels */
.nav__dropdown-panel{ width:340px; padding:10px 14px 14px; border-radius:12px; }
.nav__group{
  display:block; padding:12px 12px 4px; font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal-soft);
}
.nav__dropdown-all + .nav__group{ margin-top:4px; }

/* Contact form */
.contact-form{ border-radius:14px; padding:38px; }
.form-row input, .form-row select, .form-row textarea{
  padding:14px 16px; border:1px solid #C9D2DF; border-radius:10px; font-size:1rem; line-height:1.4;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,99,176,0.18);
}
.form-row label{ font-size:0.9rem; margin-bottom:8px; }
.contact-form .btn{ width:100%; justify-content:center; padding:16px 28px; }

/* WhatsApp button: recognisable, smaller, shows after scrolling */
.wa-float{
  background:#1EA952; width:52px; height:52px; right:20px; bottom:20px;
  box-shadow:0 6px 18px rgba(0,0,0,0.2);
  transition:transform .18s ease, opacity .2s ease, visibility .2s ease;
}
.wa-float svg{ width:28px; height:28px; }
.js .wa-float{ opacity:0; visibility:hidden; transform:translateY(8px); }
.js .wa-float.is-visible{ opacity:1; visibility:visible; transform:none; }
.js .wa-float.is-visible:hover{ transform:scale(1.06); }
@media (max-width: 760px){ .wa-float{ right:16px; bottom:16px; } }
.nav__links.is-open{ align-items:stretch; }
.nav__links.is-open > li > a{ display:block; }

.reach-grid{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); max-width:980px; margin:0 auto; }

/* ---------- Technical audit fixes ---------- */
button, input, select, textarea{ font-family:inherit; }
.footer__heading{
  color:#fff; font-family:var(--sans); font-size:0.72rem; font-weight:700; line-height:1.3;
  letter-spacing:0.1em; text-transform:uppercase; margin:0 0 16px;
}
.step h3{ margin-bottom:8px; font-size:1rem; }
.svc-sidebar h3{ font-size:1.05rem; }
.step__num{ color:#4F86C6; opacity:1; }
.legal p a, .legal li a, .contact-form__note a, .prose p a:not(.btn){ text-decoration:underline; text-underline-offset:2px; }