/* ============================================================
   TIDY TOUCH BY NICOLE: design system + components
   Palette derived from the real logo. UK English. Single stylesheet.
   ============================================================ */

:root{
  /* ---- BRAND COLOURS ---------------------------------------- */
  --navy:#163a5f; --navy-deep:#102a45;
  --blue:#2f72a8; --blue-bright:#3d8bc4;
  --sky:#bfe0f2; --sky-tint:#eaf4fb;
  --cream:#efe6d3; --sand:#e4d8bd;
  --gold:#c6a667;
  /* ---- NEUTRALS --------------------------------------------- */
  --ink:#13233a; --bg:#ffffff; --bg-soft:#f5f9fc; --bg-cream:#faf6ee;
  --line:#e6edf3; --muted:#5b6b7d;
  /* ---- STATE ------------------------------------------------- */
  --blue-hover:#2a679a; --blue-active:#245a87; --blue-soft:#d8ecf8;
  --navy-hover:#1d4670; --navy-active:#122f4d;
  --gold-hover:#b8964f; --gold-soft:#f0e6cf; --gold-text:#806326; --sky-hover:#a9d4ec;
  --link:var(--blue); --link-hover:var(--blue-bright);
  --success:#2f8f6b; --success-soft:#e3f3ec; --success-text:#1f7050; --error:#c0492f; --error-soft:#fbe9e4; --error-text:#a13522;
  --focus-ring:#3d8bc4;
  --surface-dark:var(--navy-deep); --on-dark:#eaf4fb; --on-dark-muted:#a9c2d8;
  --overlay:rgba(16,42,69,.55);
  /* ---- TYPE SCALE (fluid) ----------------------------------- */
  --fs-eyebrow:clamp(.75rem,.72rem + .15vw,.8125rem);
  --fs-xs:clamp(.8125rem,.79rem + .12vw,.875rem);
  --fs-sm:clamp(.875rem,.85rem + .15vw,.9375rem);
  --fs-base:clamp(1rem,.97rem + .18vw,1.0625rem);
  --fs-md:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --fs-lg:clamp(1.1875rem,1.1rem + .45vw,1.375rem);
  --fs-h6:clamp(1rem,.95rem + .3vw,1.125rem);
  --fs-h5:clamp(1.125rem,1.05rem + .45vw,1.3125rem);
  --fs-h4:clamp(1.375rem,1.25rem + .7vw,1.75rem);
  --fs-h3:clamp(1.625rem,1.4rem + 1.1vw,2.25rem);
  --fs-h2:clamp(2rem,1.6rem + 1.9vw,3rem);
  --fs-h1:clamp(2.5rem,1.9rem + 2.9vw,4rem);
  --fs-display:clamp(3rem,2.1rem + 4.3vw,5rem);
  --font-display:"Fraunces","Georgia","Times New Roman",serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --lh-tight:1.08; --lh-heading:1.18; --lh-snug:1.35; --lh-body:1.65; --lh-relaxed:1.8;
  --ls-eyebrow:.14em; --ls-tight:-.02em; --ls-snug:-.01em; --ls-wide:.02em;
  /* ---- SPACING ---------------------------------------------- */
  --space-3xs:.25rem; --space-2xs:.5rem; --space-xs:.75rem; --space-sm:1rem;
  --space-md:1.5rem; --space-lg:2rem; --space-xl:3rem; --space-2xl:4rem; --space-3xl:6rem;
  --section-y:clamp(3.5rem,2.2rem + 6vw,7rem);
  --section-y-sm:clamp(2.5rem,1.8rem + 3.2vw,4.5rem);
  --gutter:clamp(1.25rem,.8rem + 2.2vw,2.5rem);
  /* ---- RADII ------------------------------------------------- */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-2xl:36px;
  --r-pill:999px; --r-round:50%;
  /* ---- SHADOWS ---------------------------------------------- */
  --shadow-xs:0 1px 2px rgba(16,42,69,.06);
  --shadow-sm:0 2px 8px rgba(16,42,69,.07);
  --shadow-md:0 8px 24px rgba(16,42,69,.10);
  --shadow-lg:0 16px 40px rgba(16,42,69,.13);
  --shadow-xl:0 28px 64px rgba(16,42,69,.18);
  --shadow-card-hover:0 18px 44px rgba(16,42,69,.16);
  --shadow-blue:0 10px 28px rgba(47,114,168,.30);
  --shadow-blue-hover:0 14px 34px rgba(47,114,168,.38);
  --shadow-gold:0 8px 22px rgba(198,166,103,.30);
  --shadow-focus:0 0 0 3px rgba(61,139,196,.45);
  /* ---- LAYOUT ----------------------------------------------- */
  --container:1200px; --container-wide:1360px; --container-narrow:760px; --container-xnarrow:560px;
  --content-measure:68ch;
  /* ---- Z-INDEX ---------------------------------------------- */
  --z-sticky-cta:60; --z-header:80; --z-overlay:85; --z-drawer:90; --z-toast:100; --z-loader:9999;
  /* ---- MOTION ----------------------------------------------- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --tt-spring:linear(0,.0233,.0843,.1711,.2735,.3832,.4935,.5993,.697,.7843,.8598,.9231,.9743,1.0141,1.0436,1.0639,1.0764,1.0824,1.0833,1.0803,1.0744,1.0667,1.0579,1.0487,1.0395,1.0309,1.023,1.016,1.01,1.005,1.001,.998,.9958,.9943,.9934,.993,.9931,.9934,.994,.9946,.9954,.9962,.9969,.9976,.9983,.9988,1);
  --dur-fast:140ms; --dur:240ms; --dur-slow:400ms; --dur-slower:640ms;
  --header-h:76px; --header-h-sm:64px; --sticky-cta-h:64px; --btn-h:52px; --btn-h-sm:42px;
}

/* ============================================================ RESET / BASE */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:var(--fs-base);font-weight:var(--fw-regular);
  line-height:var(--lh-body);color:var(--ink);background:var(--bg);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}
ul,ol{list-style:none;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--fw-semibold);color:var(--navy);
  line-height:var(--lh-heading);letter-spacing:var(--ls-snug);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)}
h5{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-h5);color:var(--navy);line-height:var(--lh-snug)}
h6{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-h6);color:var(--navy)}
p{max-width:var(--content-measure);text-wrap:pretty}
strong,b{font-weight:var(--fw-bold)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
::selection{background:var(--sky);color:var(--navy-deep)}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:calc(var(--z-loader) + 1);
  background:var(--navy);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip-link:focus{left:0}

/* ============================================================ LAYOUT */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:var(--container-narrow)}
.container--xnarrow{max-width:var(--container-xnarrow)}
.section{padding-block:var(--section-y);position:relative}
section[id]{scroll-margin-top:90px}
.section--sm{padding-block:var(--section-y-sm)}
.section--soft{background:var(--bg-soft)}
.section--cream{background:var(--bg-cream)}
.section--sky{background:var(--sky-tint)}
.section--dark{background:var(--surface-dark);color:var(--on-dark)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:var(--on-dark-muted)}

.section-head{max-width:var(--container-narrow);margin-inline:auto;text-align:center;margin-bottom:var(--space-xl)}
.section-head--left{margin-inline:0;text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);
  font-weight:var(--fw-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--blue);margin-bottom:var(--space-sm)}
.eyebrow .sparkle{color:var(--blue-bright)}
.section-head__intro,.lead{font-size:var(--fs-md);line-height:var(--lh-snug);color:var(--muted);max-width:60ch}
.section-head .lead{margin-inline:auto}
.section-head--left .lead{margin-inline:0}

/* sparkle motif */
.sparkle{display:inline-block;width:1em;height:1em;color:var(--blue-bright);flex:none}
.sparkle svg{width:100%;height:100%;display:block}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-base);
  letter-spacing:var(--ls-wide);line-height:1;min-height:var(--btn-h);padding:0 1.5rem;
  border-radius:var(--r-pill);border:2px solid transparent;cursor:pointer;
  transition:background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);white-space:nowrap}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform var(--dur) var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn__icon{width:1.15em;height:1.15em;flex:none}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:var(--blue-hover);color:#fff;box-shadow:var(--shadow-blue-hover);transform:translateY(-2px)}
.btn--primary:active{background:var(--blue-active)}
.btn--secondary{background:var(--navy);color:#fff}
.btn--secondary:hover{background:var(--navy-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--secondary:active{background:var(--navy-active)}
.btn--ghost{border-color:var(--blue);color:var(--blue);background:transparent}
.btn--ghost:hover{background:var(--blue-soft);border-color:var(--blue-bright);color:var(--blue-hover)}
.btn--gold{background:var(--gold);color:var(--navy-deep);box-shadow:var(--shadow-gold)}
.btn--gold:hover{background:var(--gold-hover);color:var(--navy-deep);transform:translateY(-2px)}
.btn--on-dark{background:#fff;color:var(--navy-deep)}
.btn--on-dark:hover{background:var(--sky-tint);color:var(--navy-deep);transform:translateY(-2px)}
.btn--quiet{color:var(--navy);padding:0 .25rem}
.btn--quiet:hover{color:var(--blue)}
.btn--lg{min-height:60px;font-size:var(--fs-md);padding:0 2rem}
.btn--sm{min-height:var(--btn-h-sm);font-size:var(--fs-sm);padding:0 1.1rem}
.btn--block{display:flex;width:100%}
.btn:disabled,.btn.is-loading{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}

/* ============================================================ HEADER / NAV */
.site-header{position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid transparent;transition:background var(--dur) ease,box-shadow var(--dur) ease,border-color var(--dur) ease}
.site-header.is-scrolled{background:rgba(255,255,255,.94);box-shadow:var(--shadow-sm);border-bottom-color:var(--line)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.site-header__logo{display:flex;align-items:center}
.site-header__logo img{height:48px;width:auto}
.nav__list{display:flex;align-items:center;gap:clamp(.5rem,1.5vw,1.4rem)}
.nav__link{position:relative;color:var(--navy);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:.5rem .15rem;display:inline-flex;align-items:center;gap:.3em}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:2px;background:var(--blue);border-radius:2px;transition:right var(--dur) var(--ease-out)}
.nav__link:hover{color:var(--blue)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{right:0}
.nav__item{position:relative}
.nav__item--has-menu>.nav__link .chev{width:.7em;height:.7em;transition:transform var(--dur) ease}
.nav__item--has-menu:hover>.nav__link .chev,.nav__item--has-menu:focus-within>.nav__link .chev{transform:rotate(180deg)}
.nav__dropdown{position:absolute;top:calc(100% + .4rem);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);
  padding:.5rem;opacity:0;visibility:hidden;transition:opacity var(--dur) ease,transform var(--dur) ease;z-index:5}
.nav__item--has-menu:hover .nav__dropdown,.nav__item--has-menu:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__dropdown a{display:block;padding:.6rem .8rem;border-radius:var(--r-sm);color:var(--navy);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.nav__dropdown a:hover{background:var(--sky-tint);color:var(--blue)}
.nav__actions{display:flex;align-items:center;gap:.75rem}
.nav-toggle{display:none;width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none;
  transition:background var(--dur) ease,border-color var(--dur) ease}
.nav-toggle:hover{background:var(--bg-soft);border-color:var(--sky-hover)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;transition:transform var(--dur) ease,opacity var(--dur) ease}
body.drawer-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.drawer-open .nav-toggle span:nth-child(2){opacity:0}
body.drawer-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(86vw,360px);background:var(--bg);
  z-index:var(--z-drawer);box-shadow:var(--shadow-xl);transform:translateX(100%);
  transition:transform var(--dur-slow) var(--ease-out);display:flex;flex-direction:column;
  padding:var(--space-lg) var(--space-md) var(--space-2xl);overflow-y:auto}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}
.drawer__close{width:44px;height:44px;border-radius:var(--r-sm);font-size:1.5rem;color:var(--navy);display:grid;place-items:center}
.drawer__close:hover{background:var(--bg-soft)}
.drawer__links{display:flex;flex-direction:column;gap:.15rem;margin-bottom:var(--space-md)}
.drawer__links a{display:block;padding:.85rem .5rem;border-radius:var(--r-sm);color:var(--navy);font-weight:var(--fw-semibold);font-size:var(--fs-md);border-bottom:1px solid var(--line)}
.drawer__links a:hover{background:var(--sky-tint);color:var(--blue)}
.drawer__actions{display:flex;flex-direction:column;gap:.6rem;margin-top:auto;padding-top:var(--space-md)}
.scrim{position:fixed;inset:0;background:var(--overlay);z-index:var(--z-overlay);opacity:0;visibility:hidden;transition:opacity var(--dur) ease}
.scrim.is-open{opacity:1;visibility:visible}
body.drawer-open{overflow:hidden}

/* ============================================================ HERO */
.hero{position:relative;padding-block:clamp(2.5rem,2rem + 5vw,5rem) var(--section-y);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero__eyebrow{margin-bottom:var(--space-md)}
.hero h1{margin-bottom:var(--space-md)}
.hero__lead{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--space-lg);max-width:36ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:var(--space-lg)}
.hero__trust{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:var(--fs-sm);color:var(--muted)}
.hero__trust li{display:flex;align-items:center;gap:.4em}
.hero__trust .sparkle{width:.85em;height:.85em;color:var(--blue)}
.hero__media{position:relative}
.hero__decor{position:absolute;border-radius:var(--r-round);filter:blur(2px);opacity:.5;z-index:0}
.hero__decor--1{width:60%;height:60%;background:radial-gradient(circle,var(--sky-tint),transparent 70%);top:-10%;right:-10%}

/* ============================================================ CARDS / GRIDS */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--space-lg);position:relative}
.card--soft{background:var(--bg-soft)} .card--cream{background:var(--bg-cream)} .card--sky{background:var(--sky-tint)}
.card--link{transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.card--link:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px);border-color:var(--blue-soft)}
.card__media{border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--space-md)}
.card__media img{width:100%;height:100%;object-fit:cover}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.service-card{display:flex;flex-direction:column;gap:var(--space-sm)}
.service-card__icon{width:56px;height:56px;border-radius:var(--r-md);background:var(--sky-tint);display:grid;place-items:center;color:var(--blue);transition:background var(--dur) ease,color var(--dur) ease}
.service-card__icon svg{width:28px;height:28px}
.service-card:hover .service-card__icon{background:var(--blue-soft);color:var(--blue-bright)}
.service-card__title{font-size:var(--fs-h4)}
.service-card__text{color:var(--muted);font-size:var(--fs-sm);flex:1}
.service-card__link{display:inline-flex;align-items:center;gap:.4em;color:var(--blue);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.service-card__link .arr{transition:transform var(--dur) ease}
.service-card:hover .service-card__link .arr{transform:translateX(4px)}
.service-card.is-featured{border-color:var(--gold);box-shadow:var(--shadow-gold)}
/* stretched link for whole-card click */
.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}

.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.area-card{display:flex;flex-direction:column;gap:.35rem}
.area-card__name{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h5);color:var(--navy);display:flex;align-items:center;gap:.45em}
.area-card__pin{width:1em;height:1em;color:var(--blue)}
.area-card__meta{color:var(--muted);font-size:var(--fs-sm)}
.area-card__cta{color:var(--blue);font-weight:var(--fw-bold);font-size:var(--fs-sm);margin-top:.35rem}
.area-card--soft{border-style:dashed;background:var(--bg-soft);align-items:flex-start;justify-content:center}

/* ============================================================ BEFORE / AFTER SWIPE SLIDER */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
.ba-slider{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);
  aspect-ratio:3/4;background:var(--bg-soft);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;isolation:isolate}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);z-index:2}
.ba-after{z-index:1}
.ba-label{position:absolute;top:.7rem;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);
  text-transform:uppercase;padding:.25rem .65rem;border-radius:var(--r-pill);z-index:3;pointer-events:none}
.ba-label--before{left:.7rem;background:rgba(16,42,69,.82);color:#fff}
.ba-label--after{right:.7rem;background:rgba(255,255,255,.92);color:var(--blue)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 0 1px rgba(16,42,69,.18);z-index:4}
.ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:var(--r-round);
  background:#fff;border:none;box-shadow:var(--shadow-md);display:grid;place-items:center;color:var(--blue);cursor:ew-resize}
.ba-handle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.ba-handle svg{width:26px;height:26px}
.ba-cap{margin-top:.6rem;font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:var(--ls-wide);color:var(--muted);text-align:center}

/* ============================================================ PILLS / BADGES */
.pill{display:inline-flex;align-items:center;gap:.4em;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);padding:.4rem 1rem;border:1px solid transparent}
.pill--sky{background:var(--sky-tint);color:var(--navy)}
.pill--blue{background:var(--blue);color:#fff}
.pill--gold{background:var(--gold-soft);color:var(--navy-deep)}
.pill--outline{border-color:var(--line);color:var(--navy);background:#fff}
.pill--confirm{border:1px dashed var(--muted);color:var(--muted);background:transparent;font-style:italic}

/* ============================================================ TRUST / PROOF */
.proof-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-sm) var(--space-lg);
  padding:var(--space-md) var(--space-lg);background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.proof-strip__item{display:flex;align-items:center;gap:.55em;font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--navy)}
.proof-strip__item .sparkle,.proof-strip__item svg{width:1.1em;height:1.1em;color:var(--blue);flex:none}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-md)}
.trust-card{display:flex;flex-direction:column;gap:.6rem}
.trust-card__icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--sky-tint);display:grid;place-items:center;color:var(--blue)}
.trust-card__icon svg{width:24px;height:24px}
.trust-card h3{font-size:var(--fs-h5)}
.trust-card p{color:var(--muted);font-size:var(--fs-sm)}
.owner-quote{font-family:var(--font-display);font-style:italic;font-weight:var(--fw-medium);font-size:var(--fs-lg);
  line-height:var(--lh-snug);color:var(--navy);border-left:3px solid var(--gold);padding-left:var(--space-md)}
.owner-quote cite{display:block;font-style:normal;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--muted);font-weight:var(--fw-bold);margin-top:.5rem}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);counter-reset:step}
.step{position:relative;padding-top:.5rem}
.step__num{width:48px;height:48px;border-radius:var(--r-round);background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.3rem;margin-bottom:var(--space-sm)}
.step h3{font-size:var(--fs-h5)} .step p{color:var(--muted);font-size:var(--fs-sm)}

/* ============================================================ FORMS */
.form{max-width:var(--container-xnarrow);width:100%}
.form--wide{max-width:100%}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-md)}
.field__label{font-weight:var(--fw-semibold);color:var(--navy);font-size:var(--fs-sm)}
.field__label .req{color:var(--blue)}
.field__hint{font-size:var(--fs-xs);color:var(--muted)}
.input,.select,.textarea{width:100%;min-height:var(--btn-h);border-radius:var(--r-md);border:1.5px solid var(--line);
  background:#fff;padding:.7rem .9rem;font-size:var(--fs-base);transition:border-color var(--dur) ease,box-shadow var(--dur) ease}
.textarea{min-height:120px;resize:vertical}
.input:hover,.select:hover,.textarea:hover{border-color:var(--sky-hover)}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--shadow-focus)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f72a8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.field.is-error .input,.field.is-error .select,.field.is-error .textarea{border-color:var(--error)}
.field__error{color:var(--error);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.check-pill{position:relative}
.check-pill input{position:absolute;opacity:0;width:0;height:0}
.check-pill label{display:flex;align-items:center;gap:.5em;padding:.65rem .9rem;border:1.5px solid var(--line);
  border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--dur) ease}
.check-pill label:hover{border-color:var(--sky-hover);background:var(--sky-tint)}
.check-pill input:checked+label{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-hover)}
.check-pill input:focus-visible+label{box-shadow:var(--shadow-focus)}
.form__actions{display:flex;flex-direction:column;gap:.75rem;margin-top:var(--space-md)}
.form__consent{font-size:var(--fs-xs);color:var(--muted)}
.form-status{font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:.85rem 1rem;border-radius:var(--r-md);display:none}
.form-status.show{display:block}
.form-status.is-success{background:var(--success-soft);color:var(--success-text)}
.form-status.is-error{background:var(--error-soft);color:var(--error-text)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================ ACCORDION / FAQ */
.accordion{max-width:var(--container-narrow);margin-inline:auto}
.accordion__item{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.75rem;background:#fff;overflow:hidden}
.accordion__item summary{list-style:none;cursor:pointer;padding:var(--space-md);display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-h6);color:var(--navy)}
.accordion__item summary::-webkit-details-marker{display:none}
.accordion__item summary:hover{background:var(--bg-soft)}
.accordion__icon{width:1.2em;height:1.2em;flex:none;color:var(--blue);transition:transform var(--dur) ease}
.accordion__item[open] summary{color:var(--blue)}
.accordion__item[open] .accordion__icon{transform:rotate(45deg)}
.accordion__body{padding:0 var(--space-md) var(--space-md);color:var(--muted);line-height:var(--lh-body)}
.accordion__body p{max-width:var(--content-measure)}

/* ============================================================ STICKY MOBILE CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky-cta);display:none;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(16,42,69,.12);
  padding-bottom:env(safe-area-inset-bottom)}
.sticky-cta__row{display:grid;grid-template-columns:repeat(3,1fr);height:var(--sticky-cta-h)}
.sticky-cta__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--navy);border-right:1px solid var(--line)}
.sticky-cta__btn:last-child{border-right:0}
.sticky-cta__btn svg{width:20px;height:20px}
.sticky-cta__btn--quote{color:var(--blue)} .sticky-cta__btn--call{color:var(--gold-text)}

/* ============================================================ BREADCRUMBS */
.breadcrumb{padding-block:var(--space-md) 0}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.4rem;font-size:var(--fs-sm);color:var(--muted)}
.breadcrumb li{display:flex;align-items:center;gap:.4rem}
.breadcrumb li+li::before{content:"›";color:var(--line)}
.breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--blue)}
.breadcrumb [aria-current="page"]{color:var(--navy);font-weight:var(--fw-semibold)}

/* ============================================================ FOOTER */
.site-footer{background:var(--surface-dark);color:var(--on-dark);padding-block:var(--space-3xl) var(--space-xl)}
.site-footer__cta{text-align:center;max-width:var(--container-narrow);margin:0 auto var(--space-3xl)}
.site-footer__cta h2{color:#fff;margin-bottom:var(--space-sm)}
.site-footer__cta p{color:var(--on-dark-muted);margin:0 auto var(--space-lg)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-lg);margin-bottom:var(--space-xl)}
.site-footer__brand img{height:58px;width:auto;margin-bottom:var(--space-sm)}
.site-footer__brand p{color:var(--on-dark-muted);font-size:var(--fs-sm)}
.site-footer h3{color:#fff;font-family:var(--font-body);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  letter-spacing:var(--ls-wide);text-transform:uppercase;margin-bottom:var(--space-sm)}
.site-footer__col a{display:block;color:var(--on-dark-muted);padding:.3rem 0;font-size:var(--fs-sm)}
.site-footer__col a:hover{color:var(--sky)}
.site-footer__social{display:flex;gap:.6rem;margin-top:var(--space-sm)}
.site-footer__social a{width:42px;height:42px;border-radius:var(--r-round);background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.site-footer__social a:hover{background:var(--blue)}
.site-footer__social svg{width:20px;height:20px}
.site-footer__legal{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-md);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;color:var(--on-dark-muted);font-size:var(--fs-sm)}
.site-footer__legal a{color:var(--on-dark-muted)} .site-footer__legal a:hover{color:var(--sky)}

/* ============================================================ PROSE (about/area/privacy/faq long-form) */
.prose{max-width:var(--container-narrow);margin-inline:auto}
.prose h2{margin-top:var(--space-xl);margin-bottom:var(--space-sm)}
.prose h3{margin-top:var(--space-lg);margin-bottom:var(--space-xs);font-size:var(--fs-h4)}
.prose p{margin-bottom:var(--space-md);max-width:none}
.prose ul{margin:0 0 var(--space-md);display:flex;flex-direction:column;gap:.5rem}
.prose ul li{position:relative;padding-left:1.8rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;background:var(--blue);
  border-radius:2px;transform:rotate(45deg)}
.checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.5rem 1.5rem}
.checklist li{position:relative;padding-left:2rem;list-style:none}
.checklist li::before{content:"";position:absolute;left:0;top:.05em;width:1.3rem;height:1.3rem;border-radius:var(--r-round);
  background:var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f8f6b' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}

/* split feature row (image + text) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.feature--reverse .feature__media{order:2}
.feature__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.feature__media img{width:100%;height:100%;object-fit:cover}

/* ============================================================ REVEAL */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slower) var(--ease-out),transform var(--dur-slower) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================ INTRO LOADER */
#tt-loader{position:fixed;inset:0;z-index:var(--z-loader);background:linear-gradient(160deg,#fbfdff,#eef6fc);
  display:grid;place-items:center;overflow:hidden;transition:opacity .5s ease}
html.tt-seen #tt-loader{display:none}
#tt-loader.is-done{opacity:0;pointer-events:none}
.tt-loader__logo{position:relative;width:min(60vmin,330px);aspect-ratio:360/395}
.tt-logo-img{width:100%;height:100%;object-fit:contain;opacity:0;will-change:transform,opacity;transform-origin:center bottom}
#tt-loader.play .tt-logo-img{animation:ttLogoIn .85s .1s var(--ease-spring) both}
.tt-sparkle{position:absolute;opacity:0;z-index:5;will-change:transform,opacity;transform-origin:center}
.tt-sparkle svg,.tt-sparkle use{width:100%;height:100%;display:block}
.tt-sparkle--a{left:70%;top:0%;width:9%;color:var(--blue-bright)}
.tt-sparkle--b{left:85%;top:17%;width:6%;color:var(--gold)}
.tt-sparkle--c{left:3%;top:36%;width:5.5%;color:var(--blue)}
#tt-loader.play .tt-sparkle--a{animation:ttSparkle 1s .9s ease-in-out both}
#tt-loader.play .tt-sparkle--b{animation:ttSparkle 1s 1.05s ease-in-out both}
#tt-loader.play .tt-sparkle--c{animation:ttSparkle 1s 1.2s ease-in-out both}
.tt-loader__shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);
  transform:translateX(-120%);z-index:4;pointer-events:none}
#tt-loader.play .tt-loader__shine{animation:ttShine .7s 1s ease-out both}
@keyframes ttLogoIn{0%{opacity:0;transform:scale(.84) translateY(12px)}55%{opacity:1;transform:scale(1.04) translateY(0)}78%{transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
@keyframes ttSparkle{0%{opacity:0;transform:scale(0) rotate(-25deg)}24%{opacity:1;transform:scale(1.2) rotate(6deg)}46%{opacity:.5;transform:scale(.9) rotate(0)}66%{opacity:1;transform:scale(1.1)}100%{opacity:.95;transform:scale(1) rotate(0)}}
@keyframes ttShine{to{transform:translateX(120%)}}

/* ============================================================ UTILITIES */
.center{text-align:center}
.mt-lg{margin-top:var(--space-lg)} .mt-xl{margin-top:var(--space-xl)}
.flex-cta{display:flex;flex-wrap:wrap;gap:.85rem}
.flex-cta--center{justify-content:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tt-call-unset{display:none!important}

/* ============================================================ RESPONSIVE */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:var(--space-xl)}
  .hero__media{max-width:460px;margin-inline:auto}
  .feature,.feature--reverse{grid-template-columns:1fr}
  .feature--reverse .feature__media{order:0}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .service-grid,.area-grid,.ba-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;max-width:480px;margin-inline:auto;gap:var(--space-md)}
}
@media (max-width:860px){
  .nav__list,.nav__actions .btn{display:none}
  .nav-toggle{display:flex}
  .sticky-cta{display:block}
  body{padding-bottom:var(--sticky-cta-h)}
  .site-header{height:var(--header-h-sm)}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .site-footer__legal{justify-content:center;text-align:center}
  .service-grid,.area-grid{grid-template-columns:1fr}
  .ba-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto}
}

/* desktop: balance the contact form vs. the contact panel column */
@media (min-width:981px){ #contact .feature{grid-template-columns:1.4fr 1fr} }
/* small screens: drop the overlapping hero before/after thumbnail (proof has its own section) */
@media (max-width:560px){ .hero__proof{display:none} }

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  #tt-loader{display:none!important}
}