/* theme.css — PREMIUM FROSTED (green + gold bokeh) */

:root{
  --max:1120px;
  --radius:22px;
  --radius2:28px;

  /* Palette */
  --ink:#0f172a;
  --muted:#3f4b5a;

  --green:#0b6b3a;
  --green2:#064e2a;
  --greenSoft:rgba(11,107,58,.14);

  --gold:#d6b46c;
  --gold2:#f2d28a;
  --goldSoft:rgba(214,180,108,.22);

  /* Glass / lines */
  --glass: rgba(255,255,255,.62);
  --glass2: rgba(255,255,255,.50);
  --line: rgba(15,23,42,.10);
  --line2: rgba(255,255,255,.55);

  /* Shadows */
  --shadow: 0 20px 55px rgba(2,8,23,.14);
  --shadow2: 0 14px 36px rgba(2,8,23,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

/* Base background so the fixed overlay can sit above it without washing out */
html{
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(34,197,94,.22), transparent 62%),
    radial-gradient(1000px 650px at 86% 20%, rgba(214,180,108,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(242,250,246,1));
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  line-height:1.6;
  letter-spacing:.1px;
  overflow-x:hidden;
  position:relative;

  /* Background image lives on body::before (fixed) so it stays static on mobile */
  background: transparent;
}
/* BOKEH / SPARKLE overlay (this is what your mock has) */
body::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* fallback */
  pointer-events: none;
  z-index: -1;

  /* Keep the background COMPLETELY static on mobile (avoid iOS scroll jitter) */
  transform: translate3d(0,0,0);
  will-change: transform;

  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.02)),
    url("premium-bg.png") center / cover no-repeat,
    radial-gradient(1200px 700px at 15% 10%, rgba(34,197,94,.22), transparent 62%),
    radial-gradient(1000px 650px at 86% 20%, rgba(214,180,108,.22), transparent 60%),

    radial-gradient(10px 10px at 12% 22%, rgba(214,180,108,.30), transparent 60%),
    radial-gradient(14px 14px at 18% 28%, rgba(34,197,94,.22), transparent 62%),
    radial-gradient(22px 22px at 24% 18%, rgba(255,255,255,.35), transparent 65%),
    radial-gradient(16px 16px at 28% 34%, rgba(214,180,108,.22), transparent 62%),

    radial-gradient(18px 18px at 72% 18%, rgba(214,180,108,.26), transparent 62%),
    radial-gradient(26px 26px at 78% 28%, rgba(34,197,94,.20), transparent 64%),
    radial-gradient(14px 14px at 84% 22%, rgba(255,255,255,.36), transparent 62%),
    radial-gradient(20px 20px at 88% 34%, rgba(214,180,108,.20), transparent 62%),

    radial-gradient(22px 22px at 35% 70%, rgba(34,197,94,.18), transparent 64%),
    radial-gradient(18px 18px at 55% 78%, rgba(214,180,108,.20), transparent 64%),
    radial-gradient(28px 28px at 80% 72%, rgba(34,197,94,.14), transparent 66%),

    /* soft haze */
    radial-gradient(900px 520px at 18% 65%, rgba(11,107,58,.18), transparent 62%),
    radial-gradient(900px 520px at 82% 68%, rgba(214,180,108,.16), transparent 62%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

@supports (height: 100svh) {
  body::before{ height: 100svh; }
}


/* subtle grain like the mock (very light) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.018),
      rgba(0,0,0,.018) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity:.10;
  mix-blend-mode: soft-light;
}

/* Links */
a{ color:inherit; text-decoration:none; }
a:focus{ outline:3px solid rgba(34,197,94,.28); outline-offset:2px; border-radius:12px; }

/* Layout */
.wrap{ max-width:var(--max); margin:0 auto; padding:24px; }
@media (max-width: 900px){ .wrap{ padding:16px; } }

.grid{ display:grid; gap:18px; }
.section{ padding:34px 0; }
.muted{ color:var(--muted); }
.hint{ font-size:12.5px; color: rgba(63,75,90,.92); }
.fineprint{ font-size:13px; color: rgba(63,75,90,.92); margin-top:12px; }

h1,h2,h3{ letter-spacing:-.35px; margin:0 0 10px; }
h1{ font-size: clamp(30px, 4vw, 46px); line-height:1.06; }
h2{ font-size:22px; }
h3{ font-size:16px; }

/* NAV (glass) */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.70);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(2,8,23,.06);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-width:0;
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand-name{
  font-weight:1000;
  font-size:18px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

.logo-box{
  width:152px; height:58px;
  border-radius:18px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(214,180,108,.28);
  box-shadow:
    0 14px 30px rgba(2,8,23,.08),
    0 0 0 1px rgba(255,255,255,.55) inset;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.logo-box img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  padding: 6px;
}

/* Right side */
.nav-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0; }

/* Menu */
.menu{ position:relative; display:inline-block; }
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.72);
  font-weight:950;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  gap:10px;
}
.menu-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 22px rgba(2,8,23,.08);
}
.chev{
  width:10px; height:10px;
  border-right:2px solid rgba(15,23,42,.65);
  border-bottom:2px solid rgba(15,23,42,.65);
  transform: rotate(45deg);
  margin-top:-2px;
}
.menu-panel{
  position:absolute; right:0;
  top: calc(100% + 10px);
  width: min(340px, 86vw);
  border-radius:18px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  border:1px solid rgba(214,180,108,.20);
  box-shadow: 0 22px 80px rgba(2,8,23,.18);
  padding:10px;
  display:none;
}
.menu.open .menu-panel{ display:block; }
.menu-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.menu-grid a{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.88);
  font-weight:950;
  font-size:13px;
}
.menu-grid a:hover{
  background: rgba(34,197,94,.10);
  border-color: rgba(214,180,108,.24);
}

/* Buttons (bevel + gold sheen like the mock) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-weight:950;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  gap:10px;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(2,8,23,.10); background: rgba(255,255,255,.88); }

.btn.primary{
  border:1px solid rgba(214,180,108,.28);
  color:#fff;
  background: linear-gradient(135deg, var(--green), var(--green2));
  box-shadow:
    0 18px 35px rgba(11,107,58,.22),
    0 0 0 1px rgba(255,255,255,.20) inset;
  position:relative;
  overflow:hidden;
}
.btn.primary::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg,
    transparent 38%,
    rgba(242,210,138,.30) 50%,
    transparent 62%
  );
  transform: translateX(-30%);
  opacity:.8;
}
.btn.primary:hover::after{ transform: translateX(30%); transition: transform .35s ease; }

.btn.link{
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.64);
  font-weight:900;
}

/* Icon bubbles */
.ib{
  width:28px; height:28px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.65);
  box-shadow: 0 10px 18px rgba(2,8,23,.08);
}
.ib svg{ width:16px; height:16px; color:#fff; }
.ib.fb{ background: linear-gradient(135deg, rgba(24,119,242,.98), rgba(24,119,242,.70)); }
.ib.msg{ background: linear-gradient(135deg, rgba(0,198,255,.96), rgba(138,63,252,.82)); }
.ib.mail{ background: linear-gradient(135deg, rgba(242,210,138,.96), rgba(34,197,94,.40)); }
.ib.wa{ background: linear-gradient(135deg, rgba(37,211,102,.96), rgba(18,140,126,.85)); }

/* HERO */
.hero{ padding:22px 0 8px; }
.hero-grid{ grid-template-columns: 1.15fr .85fr; align-items:stretch; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-card{ padding:34px; }

/* Frosted glass cards like the mock */
.card{
  background: var(--glass);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  position:relative;
}
.card.soft{
  background: var(--glass2);
  box-shadow: var(--shadow2);
}

/* Gold rim + green tint glow (this is the “exact mock” cue) */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  border: 1px solid rgba(214,180,108,.32);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 0 0 10px rgba(34,197,94,.045);
  opacity:.75;
}

/* Pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  color: rgba(6,78,42,.95);
  background: rgba(255,255,255,.55);
  border:1px solid rgba(214,180,108,.28);
  box-shadow:
    0 12px 26px rgba(2,8,23,.08),
    0 0 0 1px rgba(255,255,255,.50) inset;
  padding:10px 12px;
  border-radius:999px;
  font-size:14px;
}

.lede{
  margin:0 0 18px;
  color: rgba(63,75,90,.92);
  font-size:15.5px;
  max-width: 70ch;
}

/* Trust strip + items */
.trust-strip{
  margin-top:18px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(214,180,108,.22);
  background: rgba(255,255,255,.48);
  backdrop-filter: blur(14px);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:10px;
}
.trust-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(10px);
  min-height:56px;
  min-width:0;
}
.tick{
  width:22px; height:22px;
  border-radius:10px;
  display:grid; place-items:center;
  background: rgba(214,180,108,.14);
  border:1px solid rgba(214,180,108,.28);
  color: var(--green2);
  flex:0 0 auto;
  font-weight:1000;
  line-height:1;
  margin-top:1px;
}
.trust-item strong{ font-weight:1000; font-size:13.5px; line-height:1.2; display:block; }
.trust-item span{ display:block; font-size:12.8px; color: rgba(63,75,90,.92); line-height:1.25; margin-top:2px; }

/* Media frame */
.img-frame{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.40);
  height: 340px;
  box-shadow: 0 18px 40px rgba(2,8,23,.10);
}
@media (max-width: 980px){ .img-frame{ height: 280px; } }
.img-frame img{
  position:absolute; inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* Lists */
.list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:10px;
}
.list li{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(10px);
}
.list strong{ font-weight:1000; }
.list span{ display:block; font-size:13px; color: rgba(63,75,90,.92); }

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){ .pricing-grid{ grid-template-columns:1fr; } }

.price-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.50);
  overflow:hidden;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
}
.price-head{
  padding:16px 16px 14px;
  background: rgba(255,255,255,.55);
  border-bottom:1px solid rgba(255,255,255,.60);
}
.price-head strong{ display:block; font-size:16px; font-weight:1000; }
.price-head span{ display:block; font-size:13px; color: rgba(63,75,90,.92); margin-top:4px; }
.price-body{ padding:14px 16px 16px; }
.price-line{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.55);
}
.price-line:last-child{ border-bottom:none; }
.price-line b{ font-weight:1000; }
.money{ font-weight:1100; color: var(--green2); }
.included{ font-weight:1000; color: rgba(6,78,42,.92); }

/* Gold badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.35px;
  color:#0b140f;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  padding:8px 10px;
  border-radius: 999px;
  box-shadow: 0 16px 26px rgba(214,180,108,.20);
  border: 1px solid rgba(214,180,108,.28);
}

/* FAQ */
.faq details{
  border:1px solid rgba(255,255,255,.60);
  border-radius:18px;
  padding:14px;
  background: rgba(255,255,255,.50);
  backdrop-filter: blur(12px);
}
.faq summary{ cursor:pointer; font-weight:1000; }
.faq p{ margin:10px 0 0; color: var(--muted); }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1.08fr .92fr; gap:18px; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:13px; color: var(--muted); margin:10px 0 6px; font-weight:1000; }

input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.70);
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(10px);
  color: var(--ink);
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(214,180,108,.45);
  box-shadow: 0 0 0 3px rgba(214,180,108,.18);
}
textarea{ min-height: 120px; resize: vertical; }

.checkrow{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(12px);
  padding:12px 12px;
  border-radius:14px;
  margin-top:10px;
}
.checkrow input{ width:auto; margin-top:3px; }

.map-wrap{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.45);
  height: 260px;
  margin-top: 12px;
}
.map-wrap iframe{ width:100%; height:100%; border:0; }



/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background: rgba(2,8,23,.70);
  z-index:9999;
  padding:22px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  position:relative;
  width:min(1100px, 96vw);
  height:min(80vh, 720px);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 80px rgba(0,0,0,.30);
}
.lightbox-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.lightbox-close{
  position:absolute; top:10px; right:10px;
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.24);
  background: rgba(2,8,23,.35);
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  z-index:2;
}

/* Footer */
footer{ padding:22px 0 40px; color: rgba(63,75,90,.92); font-size:13px; }
.foot{
  border-top:1px solid rgba(255,255,255,.55);
  padding-top:16px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  align-items:center;
}
.foot a{ color: var(--green2); font-weight: 950; }
.foot a:hover{ text-decoration: underline; }

/* Small screens */
@media (max-width: 700px){
  .brand-name{ display:none; }
  .logo-box{ width:130px; height:52px; }
  .nav-inner{ padding:8px 16px; }
}
/* =========================
   EXTRAS: greener ticks, step numbers, bigger arrows + quick response panel
   Paste at END of theme.css
========================= */

/* If your theme.css doesn't already have these, this guarantees they exist */
:root{
  --brand: #0b6b3a;
  --brand2:#064e2a;
  --brandSoft: rgba(11,107,58,.12);

  --gold: #d6b46c;
  --gold2:#f2d28a;
  --goldSoft: rgba(214,180,108,.22);
}

/* Make ALL ticks a strong green (trust strip + lists + formats etc) */
.tick{
  background: linear-gradient(135deg, rgba(11,107,58,.18), rgba(11,107,58,.10));
  border: 1px solid rgba(11,107,58,.35);
  color: var(--brand2);
}

/* If you want the tick itself to look more “badge-like” */
.trust-item .tick,
.list .tick{
  background: linear-gradient(135deg, rgba(11,107,58,.22), rgba(11,107,58,.10));
  box-shadow: 0 10px 18px rgba(11,107,58,.10);
}

/* Step number badges (replaces inline look with stronger green) */
.step-num{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-weight:1100;
  font-size:24px;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 1px solid rgba(214,180,108,.30);
  box-shadow:
    0 16px 28px rgba(11,107,58,.18),
    0 0 0 1px rgba(255,255,255,.35) inset;
  flex:0 0 auto;
}

/* BIG stylised arrows between steps */
.flow-arrow{
  display:grid;
  place-items:center;
  height:72px;
  margin: 4px 0;
}
.flow-arrow svg{
  width:86px;
  height:86px;
  filter:
    drop-shadow(0 14px 18px rgba(11,107,58,.18))
    drop-shadow(0 10px 22px rgba(214,180,108,.12));
}
.flow-arrow .arrow-core{
  fill: rgba(160,120,28,.95);
}
.flow-arrow .arrow-glow{
  fill: rgba(214,180,108,.55);
}

/* Quick response panel in hero */
.quick-response{
  margin-top:16px;
  padding:16px;
  border-radius:18px;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(214,180,108,.26);
  box-shadow:
    0 18px 36px rgba(2,8,23,.10),
    0 0 0 1px rgba(255,255,255,.50) inset;
  backdrop-filter: blur(14px);
}
.quick-response h4{
  margin:0 0 6px;
  font-size:15px;
  font-weight:1000;
  letter-spacing:-.2px;
}
.quick-response p{
  margin:0 0 12px;
  color: rgba(63,75,90,.92);
  font-size:13.5px;
}
.quick-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* WhatsApp icon bubble to match the others */
.ib.wa{
  background: linear-gradient(135deg, rgba(37,211,102,.96), rgba(18,140,126,.85));
}
/* Compact one-line sticky footer */
.sticky-iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(214,180,108,.20);
  box-shadow: 0 10px 18px rgba(2,8,23,.10);
  backdrop-filter: blur(10px);
}

.sticky-iconbtn .ib{
  width:28px;
  height:28px;
  border-radius:12px;
  border:0;
  box-shadow:none;
}

/* If super tiny screens, shorten even more */
@media (max-width: 360px){
  .sticky-text{display:none;}    /* hide label on very small phones */
}

/* UK-wide / Postal section */
.ukwide-wrap{ display:flex; justify-content:center; }
.ukwide-card{
  width:min(980px, 100%);
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(214,180,108,.18); /* subtle gold */
  background: rgba(255,255,255,.70);
  box-shadow: 0 24px 70px rgba(2,8,23,.12);
  position:relative;
  overflow:hidden;
}

/* soft glow accents: green + gold */
.ukwide-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(700px 380px at 12% 10%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(680px 420px at 88% 18%, rgba(214,180,108,.16), transparent 62%);
  pointer-events:none;
  z-index:0;
}
.ukwide-card > *{ position:relative; z-index:1; }

.ukwide-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.ukwide-icon{
  width:46px; height:46px;
  border-radius:16px;
  display:grid; place-items:center;
  background: rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.22);
  font-size:20px;
  flex:0 0 auto;
}

.ukwide-title{
  margin:0;
  font-size:22px;
  letter-spacing:-.2px;
}
.ukwide-sub{
  margin:6px 0 0;
  color: rgba(15,23,42,.72);
  font-weight:700;
}

.ukwide-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  margin-top:12px;
}
@media (max-width: 900px){
  .ukwide-grid{ grid-template-columns: 1fr; }
}

.ukwide-panel{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  padding:16px;
}

.ukwide-h3{
  margin:0 0 10px;
  font-size:15px;
  font-weight:1000;
  color: rgba(15,23,42,.90);
}

.ukwide-steps{
  margin:0;
  padding-left:18px;
  color: rgba(15,23,42,.78);
}
.ukwide-steps li{ margin:8px 0; }
.ukwide-steps strong{ color: rgba(15,23,42,.92); }

.ukwide-note{
  margin:12px 0 0;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(34,197,94,.18);
  background: rgba(34,197,94,.06);
  color: rgba(15,23,42,.78);
  font-weight:700;
}

.ukwide-fine{
  margin:10px 0 0;
  color: rgba(15,23,42,.70);
  font-size:13.5px;
}

.ukwide-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.ukwide-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
}

.ukwide-tick{
  width:26px; height:26px;
  border-radius:999px;
  display:grid; place-items:center;
  color:#0b6b3a;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.26);
  font-weight:1100;
  flex:0 0 auto;
  margin-top:1px;
}

.ukwide-list strong{
  display:block;
  font-weight:1000;
  color: rgba(15,23,42,.92);
}
.ukwide-list span{
  display:block;
  font-size:13px;
  color: rgba(15,23,42,.70);
  margin-top:2px;
}

.ukwide-cta{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* =========================================
   HERO IMAGE FIX – MOBILE FIT
   ========================================= */

.img-frame{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

/* Desktop height */
@media (min-width: 981px){
  .img-frame{ height: 340px; }
}

/* Mobile: controlled aspect ratio */
@media (max-width: 980px){
  .img-frame{
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

.img-frame img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================================
   HERO IMAGE FIX – MOBILE FIT
   ========================================= */

.img-frame{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

/* Desktop height */
@media (min-width: 981px){
  .img-frame{ height: 340px; }
}

/* Mobile: controlled aspect ratio */
@media (max-width: 980px){
  .img-frame{
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

.img-frame img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================================
   Supported formats — tick left, content right
   (targets each format card only)
   ========================================= */

/* Each individual format card becomes a 2-column layout */
#formats .format-card{
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center;
  gap: 12px;
}

/* Tick stays fixed size */
#formats .format-tick,
#formats .tick{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

/* Ensure the content (logo + label) sits to the right */
#formats .format-card > div:last-child{
  min-width: 0;
}

/* Keep logos tidy */
#formats .format-logo,
#formats .format-card img{
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  margin: 0 0 4px 0;
}

/* Label spacing */
#formats .format-label{
  margin: 0;
}

/* =========================================
   Supported formats — tick left, content right
   (targets your current list-style cards)
   ========================================= */

#formats .list li{
  display: flex;
  align-items: center;          /* vertical align */
  gap: 14px;
}

/* tick stays fixed size and doesn't stretch */
#formats .list li .tick{
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* everything after the tick sits to the right */
#formats .list li > div:last-child{
  flex: 1 1 auto;
  min-width: 0;
}

/* make the logo + label behave nicely */
#formats .list li img{
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  margin: 0 0 4px 0;
}

/* stop the label pushing down awkwardly */
#formats .list li span,
#formats .list li .hint{
  margin: 0;
}

/* =========================================
   Supported formats: tick LEFT, content RIGHT
   ========================================= */

/* Make sure the formats grid itself stays as a grid */
#formats .formats-logo-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

@media (max-width: 520px){
  #formats .formats-logo-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Each card: 2 columns (tick + content) */
#formats .format-card{
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Tick fixed size */
#formats .format-tick{
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}

/* Content area (logo + label) */
#formats .format-card > div:last-child{
  min-width: 0 !important;
}

/* Logo tidy */
#formats .format-logo{
  height: 28px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 0 4px 0 !important;
}

/* Label spacing */
#formats .format-label{
  margin: 0 !important;
}

/* =========================================
   FINAL Supported Formats Fix
   Tick LEFT, content RIGHT
   ========================================= */

.formats-logo-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}

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

.format-card{
  display:grid !important;
  grid-template-columns:44px 1fr !important;
  align-items:center !important;
  gap:14px !important;
}

.format-tick{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.format-logo{
  height:28px;
  width:auto;
  display:block;
  object-fit:contain;
  margin-bottom:4px;
}

.format-label{
  margin:0;
}

/* Formats (fix mobile tick alignment) */
.formats-wrap{ padding:20px; }
.formats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 720px){
  .formats-grid{ grid-template-columns: 1fr; }
}
.format-card{ padding:14px; border-radius:16px; }
.format-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.format-tick{
  width:34px;
  height:34px;
  border-radius:999px;
  font-size:18px;
  flex:0 0 auto;
  margin-top:2px;
}
.format-logo{
  height:28px;
  width:auto;
  object-fit:contain;
  display:block;
}

/* UK-wide icons (icon-only buttons) */
.ukwide-cta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.ukwide-icons{ display:flex; gap:8px; align-items:center; }
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(255,255,255,.64);
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 12px 26px rgba(2,8,23,.10);
}
.icon-btn:hover{ transform: translateY(-1px); }
.icon-btn .ib{
  width:30px;
  height:30px;
  border-radius:12px;
  border:0;
  box-shadow:none;
}

/* Reduce gap between Reviews and FAQs */
#reviews.section{ padding-bottom:18px; }
#faq.section{ padding-top:18px; }



/* --- Sticky footer (mobile): smaller + icons only --- */
@media (max-width: 720px){
  body{ padding-bottom: 58px; } /* reduced from 78px */
  .sticky-iconbtn{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .sticky-iconbtn .ib{
    width: 24px;
    height: 24px;
    border-radius: 10px;
  }
  .sticky-iconbtn .ib svg{
    width: 14px;
    height: 14px;
  }
}


/* =========================
   MOBILE FIXES (sticky footer slimmer + menu panel + arrow image)
========================= */

/* Use arrow.png in How it works */
.flow-arrow{ height:64px; margin: 2px 0; }
.flow-arrow-img{
  width:78px;
  height:78px;
  display:block;
  filter: drop-shadow(0 12px 16px rgba(11,107,58,.14)) drop-shadow(0 10px 22px rgba(214,180,108,.12));
}

@media (max-width: 720px){
  /* Sticky footer: slimmer and text on left (slightly inset) */
  .sticky-iconbtn{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .sticky-iconbtn .ib{
    width:26px;
    height:26px;
    border-radius:11px;
  }

  /* Mobile menu: full-width dropdown that doesn't overlap weirdly */
  .menu{ position:static; }
  .menu-panel{
    position:fixed;
    left:12px;
    right:12px;
    top:74px;
    width:auto;
    z-index:999;
    max-height: calc(100vh - 90px);
    overflow:auto;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(214,180,108,.24);
  }
  .menu-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================
   Subtle bokeh tint for header, footer, and menu (mobile framing fix)
   ========================= */

/* Header bokeh tint (kept very light so it stays brighter than the page) */
.nav{
  background-color: rgba(255,255,255,.72);
  background-image:
    radial-gradient(16px 16px at 18% 38%, rgba(34,197,94,.10), transparent 62%),
    radial-gradient(20px 20px at 82% 30%, rgba(214,180,108,.12), transparent 64%),
    radial-gradient(12px 12px at 64% 70%, rgba(255,255,255,.35), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.70));
  background-blend-mode: normal;
}

/* Sticky footer bokeh tint (very subtle) */
/* Menu dropdown gets a hint of the same bokeh so it doesn't feel "flat" */
.menu-panel{
  background-color: rgba(255,255,255,.88);
  background-image:
    radial-gradient(16px 16px at 16% 22%, rgba(34,197,94,.11), transparent 62%),
    radial-gradient(20px 20px at 84% 26%, rgba(214,180,108,.12), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
}

/* MOBILE: fix menu framing + layout */
@media (max-width: 720px){
  /* Center the panel so it frames evenly on both sides */
  .menu-panel{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(560px, 92vw);
    padding: 12px;
  }

  /* Single column buttons on mobile */
  .menu-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .menu-grid a{
    padding: 14px 12px;
    font-size: 14px;
    border-radius: 16px;
  }
}


/* === Subtle bokeh enhancement for header, dropdown menu & footer === */

/* Header */
.nav{
  background:
    radial-gradient(600px 200px at 10% 0%, rgba(214,180,108,.18), transparent 60%),
    radial-gradient(600px 220px at 90% 0%, rgba(34,197,94,.16), transparent 60%),
    rgba(255,255,255,.78);
}

/* Dropdown menu */
.menu-panel{
  background:
    radial-gradient(400px 180px at 20% 0%, rgba(214,180,108,.16), transparent 65%),
    radial-gradient(420px 200px at 80% 0%, rgba(34,197,94,.14), transparent 65%),
    rgba(255,255,255,.92);
}

/* Footer */
footer{
  background:
    radial-gradient(700px 240px at 10% 100%, rgba(34,197,94,.12), transparent 70%),
    radial-gradient(700px 260px at 90% 100%, rgba(214,180,108,.14), transparent 70%),
    transparent;
}

/* Keep supported formats text on one line */
#formats .hint,
#formats .format-body .hint {
  white-space: nowrap;
}

/* Mobile header clipping fix */
@media (max-width: 900px){
  .nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateZ(0);
    will-change: transform;
  }

  body{
    padding-top: calc(78px + env(safe-area-inset-top, 0px));
  }
}



/* =========================
   UK-wide section upgrades
   ========================= */
.ukwide-card{ position:relative; overflow:hidden; }
.ukwide-watermark{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.18;
  filter: blur(.2px);
}
.ukwide-watermark .wm-1{
  position:absolute;
  font-size:140px;
  left:-10px;
  top:-18px;
  transform: rotate(-10deg);
}
.ukwide-watermark .wm-2{
  position:absolute;
  font-size:120px;
  right:-18px;
  bottom:-22px;
  transform: rotate(10deg);
}
.ukwide-card > *{ position:relative; z-index:1; }

/* Prominent mail icon */
.ukwide-icon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(214,180,108,.14));
  border:1px solid rgba(214,180,108,.28);
  box-shadow:
    0 18px 34px rgba(2,8,23,.10),
    0 0 0 1px rgba(255,255,255,.55) inset;
  flex:0 0 auto;
}
.ukwide-icon-inner{
  font-size:32px;
  line-height:1;
}

/* Head badges */
.ukwide-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.ukwide-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.2px;
  background: rgba(255,255,255,.68);
  border:1px solid rgba(214,180,108,.22);
  color: rgba(15,23,42,.86);
  box-shadow: 0 10px 18px rgba(2,8,23,.06);
}

/* Visual flow */
.ukwide-flow{
  margin:14px 0 10px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(214,180,108,.18);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow:auto;
}
.flow-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 150px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.60);
  background: rgba(255,255,255,.64);
  flex:0 0 auto;
}
.flow-emoji{ font-size:22px; }
.flow-label strong{ display:block; font-weight:1000; font-size:13.5px; line-height:1.1; }
.flow-label span{ display:block; font-size:12.5px; color: rgba(63,75,90,.90); margin-top:2px; }
.ukwide-flow .flow-arrow{
  font-weight:1100;
  color: rgba(15,23,42,.55);
  flex:0 0 auto;
}

/* Secondary CTA */
.ukwide-secondary{
  border-color: rgba(214,180,108,.26);
  background: rgba(255,255,255,.62);
}

/* Mobile tidy */
@media (max-width: 700px){
  .ukwide-icon{ width:64px; height:64px; border-radius:22px; }
  .ukwide-icon-inner{ font-size:30px; }
  .ukwide-watermark .wm-1{ font-size:120px; }
  .ukwide-watermark .wm-2{ font-size:105px; }
}



/* =========================
   UK-wide flow icons + mobile layout fix
   (image-driven, no emojis)
   ========================= */

/* Prominent mail icon image */
.ukwide-icon-img{
  width: 40px;
  height: 40px;
  display:block;
}

/* Watermark uses images instead of emojis */
.ukwide-watermark .wm-1,
.ukwide-watermark .wm-2{
  display:block;
  position:absolute;
  background-repeat:no-repeat;
  background-size:contain;
  opacity: .98;
}
.ukwide-watermark .wm-1{
  width:170px;
  height:170px;
  left:-24px;
  top:-26px;
  transform: rotate(-10deg);
  background-image:url("uk-mail.png");
}
.ukwide-watermark .wm-2{
  width:150px;
  height:150px;
  right:-26px;
  bottom:-28px;
  transform: rotate(10deg);
  background-image:url("uk-box.png");
}

/* Flow container: grid on mobile, row on desktop */
.ukwide-flow{
  overflow: visible; /* remove horizontal scroll */
  display:flex;
  flex-wrap:nowrap;
}
.flow-emoji{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
}
.flow-icon{
  width:44px;
  height:44px;
  display:block;
}

/* Make arrows align nicely */
.ukwide-flow .flow-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
}
.flow-arrow-char{
  font-size:18px;
  font-weight:1100;
  color: rgba(15,23,42,.45);
}

/* Mobile: switch to 2x2 grid, hide arrows */
@media (max-width: 700px){
  .ukwide-flow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    padding:12px;
  }
  .ukwide-flow .flow-arrow{ display:none; }

  .flow-item{
    min-width:0;
    width:100%;
    justify-content:flex-start;
  }
  .flow-emoji{ width:40px; height:40px; }
  .flow-icon{ width:40px; height:40px; }
}

/* Very small screens: single column */
@media (max-width: 420px){
  .ukwide-flow{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HERO LOGO (logo replaces visible H1, while H1 stays for SEO/accessibility)
   ========================================================= */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.hero-logo-wrap{
  max-width:420px;
  width:100%;
  margin:10px auto 16px auto; /* centre the logo wrapper on desktop */
}

.hero-logo{
  width:100%;
  height:auto;
  padding:0;          /* override global img padding */
  object-fit:contain; /* override global img rules */
  display:block;
  animation: heroLogoIn .55s ease-out both;
}

@keyframes heroLogoIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-logo{ animation:none; }
}

/* Make the hero feel tidy on mobile without altering desktop layout */
@media (max-width: 980px){
  .hero-card{ text-align:center; }
  .hero-logo-wrap{ margin:10px auto 14px auto; max-width:320px; }
}

/* =========================================================
   FIX: Mobile horizontal scrolling (horizontal overflow)
   (prevents any component pushing wider than the viewport)
   ========================================================= */
html, body{ overflow-x: hidden; }

img, svg, video, iframe{ max-width: 100%; }

/* UK-wide flow: allow wrapping on narrower screens to prevent overflow */
@media (max-width: 980px){
  .ukwide-flow{
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
  }
  .flow-item{ min-width: 0; }
}

/* =========================================================
   Section heading alignment
   ========================================================= */
.section-heading{
  text-align: center;
}

#formats > h2,
#faq > h2,
#contact > h2{
  text-align: center;
}


/* ===== FIX HERO TRUST STRIP ALIGNMENT (locked 2-col grid per item) ===== */
.trust-strip{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.trust-item{
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  text-align: left !important;
}

/* keep tick fixed + aligned */
.trust-item .tick{
  width: 28px !important;
  height: 28px !important;
  margin-top: 1px !important;
  justify-self: start !important;
}

/* stop the text block doing anything weird */
.trust-item > div:last-child{
  min-width: 0 !important;
  text-align: left !important;
}

.trust-item strong,
.trust-item span{
  text-align: left !important;
}

/* Mobile = stack cleanly */
@media (max-width: 640px){
  .trust-strip{
    grid-template-columns: 1fr !important;
  }
}
/* ===== MOBILE: STOP BACKGROUND JITTER ===== */
html, body{
  height: 100%;
}

body{
  min-height: 100dvh;           /* dynamic viewport (prevents jump) */
  background-attachment: scroll; /* avoid iOS fixed background jitter */
}

/* If you have any fixed background layers, disable on mobile */
@media (max-width: 980px){
  *{
    background-attachment: scroll !important;
  }
}

/* ===== ESTIMATOR (Pricing calculator) ===== */
.estimator-row{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  max-width: 420px;
}
.estimator-label{
  font-weight: 950;
}
.estimator-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.16);
  background: rgba(255,255,255,.72);
  font-size: 16px; /* avoids iOS zoom */
}
.estimator-result{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
}
.estimator-total{
  font-weight: 1000;
  font-size: 18px;
  color: var(--green2, var(--brand, #0b6b3a));
  margin-bottom: 6px;
}
.estimator-breakdown{
  color: rgba(15,23,42,.80);
  font-size: 14px;
}



/* =========================================
   HERO: centre logo + intro text on desktop
   ========================================= */
.hero-logo-wrap{
  display:flex;
  justify-content:center;
}

.hero-logo{
  width:min(520px, 100%);
  height:auto;
  display:block;
}

.hero-card .lede{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}

.memory-note{
  margin: 10px 0 16px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,180,108,.22);
  background: rgba(255,255,255,.48);
  backdrop-filter: blur(14px);
  text-align:center;
}
.memory-note strong{
  display:block;
  font-weight:1000;
  margin-bottom:4px;
}
.memory-note span{
  display:block;
  font-size:13.5px;
  color: rgba(63,75,90,.92);
}

/* Mobile Safari: prevent “rubber-band” background dragging */
@supports (-webkit-touch-callout: none){
  body{ background-attachment: scroll; }
}


/* Supported formats: "not supported" callout */
.formats-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(220, 38, 38, .22);
  background: rgba(255, 255, 255, .70);
  backdrop-filter: blur(10px);
}
.formats-cross{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 1000;
  color: rgba(220, 38, 38, .92);
  border: 1px solid rgba(220, 38, 38, .22);
  background: rgba(220, 38, 38, .08);
  flex: 0 0 auto;
  line-height: 1;
}
.formats-note-text strong{
  display: block;
  font-weight: 1000;
}
.formats-note-text span{
  display: block;
  font-size: 13px;
  color: rgba(63,75,90,.92);
  margin-top: 2px;
}


/* Formats: nudge VHS-C logo to visually match others (image has extra padding) */
#formats img[src*="vhsc-svhsc"],
#formats img[alt*="VHS-C"]{
  transform: scale(1.15);
  transform-origin: left center;
}

/* Slightly lighter overall tone tweak */
body::before{
  filter: brightness(1.06) saturate(.95);
}


/* ===== Luxury softer background refinement ===== */
body::before{
  filter: brightness(1.08) saturate(.85) contrast(.92);
}

/* soften glass cards slightly for premium feel */
.card.soft{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(214,180,108,.18);
  box-shadow: 0 16px 36px rgba(2,8,23,.08);
}


/* ===== Premium cinematic look ===== */
/* A fixed vignette + soft light gradients to add depth without making it darker overall */
.cinematic-bg{
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 20% 15%, rgba(214,180,108,.22), transparent 62%),
    radial-gradient(1100px 720px at 80% 18%, rgba(11,107,58,.18), transparent 60%),
    radial-gradient(900px 600px at 55% 78%, rgba(2,8,23,.10), transparent 60%),
    /* vignette */
    radial-gradient(1400px 900px at 50% 40%, transparent 58%, rgba(2,8,23,.18) 100%);
  opacity: .55;
  transform: translateZ(0);
  will-change: transform;
}

/* Keep the photo bokeh background elegant + slightly richer */
body::before{
  filter: brightness(1.04) saturate(.82) contrast(.96);
  opacity: .90;
}

/* Slightly more “cinema glass” */
.card.soft{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(214,180,108,.16);
  box-shadow:
    0 18px 44px rgba(2,8,23,.09),
    0 0 0 1px rgba(255,255,255,.35) inset;
}

/* Headings get a touch more presence */
h1,h2,h3{
  text-shadow: 0 10px 30px rgba(2,8,23,.08);
}

/* Buttons: tiny boost to “premium” glow without being flashy */
.btn.primary{
  box-shadow:
    0 20px 44px rgba(11,107,58,.22),
    0 0 0 1px rgba(255,255,255,.20) inset,
    0 8px 30px rgba(214,180,108,.14);
}


/* =========================================================
   UK-WIDE SECTION REFRESH
   ========================================================= */
#ukwide{ padding-top: 28px; }
.ukwide2-shell{
  width:min(980px,100%);
  margin:0 auto;
  padding:26px;
  border-radius:28px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 28px 70px rgba(2,8,23,.12);
  overflow:hidden;
}
.ukwide2-topicon{
  width:72px; height:72px; margin:0 auto 18px;
  border-radius:22px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(230,244,234,.98), rgba(255,255,255,.82));
  border:1px solid rgba(214,180,108,.28);
  box-shadow: 0 16px 34px rgba(2,8,23,.10), 0 0 0 1px rgba(255,255,255,.55) inset;
}
.ukwide2-topicon span{
  font-size:11px; font-weight:1000; letter-spacing:.8px; color:var(--green2);
}
.ukwide2-headline{ text-align:center; max-width:760px; margin:0 auto 18px; }
.ukwide2-title{ font-size: clamp(34px, 5vw, 56px); line-height:1.04; margin:0 0 8px; }
.ukwide2-subtitle{ font-size: clamp(22px, 3.2vw, 30px); line-height:1.15; color:var(--green2); font-weight:900; margin:0 0 12px; }
.ukwide2-proof{ margin:0 0 14px; color:rgba(63,75,90,.92); font-size: clamp(19px, 2.4vw, 23px); font-weight:700; position:relative; display:inline-flex; align-items:center; gap:18px; }
.ukwide2-proof::before,.ukwide2-proof::after{ content:""; width:120px; max-width:18vw; height:1px; background:rgba(15,23,42,.16); display:block; }
.ukwide2-urgency{ margin:0; font-size: clamp(18px, 2.2vw, 22px); color:rgba(6,78,42,.88); font-style:italic; }

.ukwide2-highlight{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch;
  margin:28px 0 24px; border-radius:28px; overflow:hidden;
  background: linear-gradient(135deg, rgba(11,107,58,.96), rgba(6,78,42,.93));
  color:#fff; box-shadow: 0 24px 60px rgba(11,107,58,.22);
}
.ukwide2-highlight-copy{ padding:24px 24px 20px; }
.ukwide2-highlight-title{ font-size: clamp(28px, 3.6vw, 40px); line-height:1.05; font-weight:1000; margin-bottom:8px; }
.ukwide2-highlight-sub{ margin:0 0 16px; font-size: clamp(18px, 2vw, 22px); color: rgba(255,255,255,.96); }
.ukwide2-checks{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ukwide2-checks li{ position:relative; padding-left:34px; font-size: clamp(17px, 1.9vw, 21px); line-height:1.35; }
.ukwide2-checks li::before{ content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.18); color:#dff7ea; font-weight:1000; border:1px solid rgba(255,255,255,.28); }
.ukwide2-mini-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.ukwide2-mini-badges span{ padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); font-weight:850; font-size:14px; }
.ukwide2-highlight-note{ margin:16px 0 0; font-size:15px; color:rgba(255,255,255,.95); font-weight:700; }
.ukwide2-highlight-visual{
  position:relative; min-height:320px;
  background:
    radial-gradient(340px 220px at 76% 22%, rgba(242,210,138,.34), transparent 60%),
    radial-gradient(280px 220px at 20% 80%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(135deg, rgba(214,180,108,.20), rgba(255,255,255,.02));
}
.ukwide2-box{
  position:absolute; right:62px; top:58px; width:185px; height:126px;
  background: linear-gradient(135deg, #d6b07b, #bf9258);
  border-radius:10px; box-shadow: 0 18px 34px rgba(2,8,23,.20);
}
.ukwide2-box::before,.ukwide2-box::after{ content:""; position:absolute; top:-24px; width:92px; height:36px; background: linear-gradient(135deg, #edd4aa, #d5af75); }
.ukwide2-box::before{ left:0; transform:skewX(-18deg); border-radius:8px 0 0 0; }
.ukwide2-box::after{ right:0; transform:skewX(18deg); border-radius:0 8px 0 0; }
.ukwide2-qr-card{
  position:absolute; left:44px; bottom:34px; width:150px; padding:12px; border-radius:16px;
  background: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(2,8,23,.22); transform: rotate(-10deg);
}
.ukwide2-qr{ aspect-ratio:1; border-radius:8px; background:
    linear-gradient(90deg, #111 10px, transparent 10px) 0 0/22px 22px,
    linear-gradient(#111 10px, transparent 10px) 0 0/22px 22px,
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 50%, #111 50%, #111 75%, transparent 75%, transparent) 0 0/18px 18px,
    #fff; border:8px solid #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}
.ukwide2-label{ height:22px; border-radius:8px; margin-top:10px; background: linear-gradient(135deg, #c24637, #e26952); }
.ukwide2-phone{
  position:absolute; right:30px; bottom:30px; width:118px; height:220px; padding:14px 10px;
  border-radius:28px; background: linear-gradient(180deg, #1f2937, #0f172a); box-shadow: 0 20px 40px rgba(2,8,23,.28);
}
.ukwide2-phone::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:46px; height:5px; border-radius:999px; background:rgba(255,255,255,.18); }
.ukwide2-phone-screen{ width:100%; height:100%; border-radius:18px; background: linear-gradient(180deg, #f7fafc, #e8eef5); display:grid; place-items:center; }
.ukwide2-phone-qr{ width:72px; height:72px; border-radius:8px; background:
    linear-gradient(90deg, #111 9px, transparent 9px) 0 0/18px 18px,
    linear-gradient(#111 9px, transparent 9px) 0 0/18px 18px,
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 50%, #111 50%, #111 75%, transparent 75%, transparent) 0 0/14px 14px,
    #fff; box-shadow: inset 0 0 0 6px #fff; }

.ukwide2-flow{
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap:14px; align-items:center; margin-bottom:24px;
}
.ukwide2-flow-item{
  min-height:164px; padding:18px; border-radius:22px; background: rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.68); box-shadow: 0 16px 34px rgba(2,8,23,.08);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
}
.ukwide2-flow-icon{
  width:62px; height:62px; border-radius:18px; display:grid; place-items:center; font-size:28px;
  background: linear-gradient(135deg, rgba(230,244,234,.96), rgba(255,255,255,.82));
  border:1px solid rgba(214,180,108,.24); box-shadow: 0 12px 24px rgba(2,8,23,.08); margin-bottom:14px;
}
.ukwide2-flow-item strong{ font-size:27px; line-height:1.1; margin-bottom:8px; }
.ukwide2-flow-item span{ font-size:18px; line-height:1.35; color:rgba(63,75,90,.92); }
.ukwide2-flow-arrow{ font-size:58px; line-height:1; color:rgba(11,107,58,.55); font-weight:300; }

.ukwide2-bottom{ display:grid; gap:20px; }
.ukwide2-why{ padding:26px; border-radius:24px; background: rgba(255,255,255,.62); }
.ukwide2-why h3{ text-align:center; font-size: clamp(28px, 3vw, 38px); line-height:1.12; margin:0 0 18px; color:var(--green2); }
.ukwide2-reassurance{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.ukwide2-reassurance li{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.76); border:1px solid rgba(255,255,255,.74); }
.ukwide2-reassurance strong{ display:block; font-size:20px; line-height:1.15; margin-bottom:3px; }
.ukwide2-reassurance span:last-child{ display:block; color:rgba(63,75,90,.92); font-size:16px; line-height:1.35; }
.ukwide2-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.ukwide2-actions .btn{ min-width:260px; font-size:18px; padding:16px 22px; border-radius:18px; }

@media (max-width: 980px){
  .ukwide2-shell{ padding:20px; }
  .ukwide2-highlight{ grid-template-columns:1fr; }
  .ukwide2-highlight-visual{ min-height:250px; }
  .ukwide2-flow{ grid-template-columns:1fr; }
  .ukwide2-flow-arrow{ display:none; }
  .ukwide2-flow-item strong{ font-size:24px; }
  .ukwide2-flow-item span{ font-size:17px; }
  .ukwide2-proof::before,.ukwide2-proof::after{ display:none; }
}
@media (max-width: 640px){
  .ukwide2-shell{ padding:16px; border-radius:24px; }
  .ukwide2-topicon{ width:60px; height:60px; margin-bottom:14px; }
  .ukwide2-title{ font-size: clamp(28px, 9vw, 42px); }
  .ukwide2-subtitle{ font-size: clamp(18px, 6vw, 26px); }
  .ukwide2-proof{ font-size:18px; }
  .ukwide2-urgency{ font-size:17px; }
  .ukwide2-highlight-copy{ padding:18px 18px 16px; }
  .ukwide2-highlight-title{ font-size:28px; }
  .ukwide2-highlight-sub{ font-size:18px; }
  .ukwide2-checks li{ font-size:17px; }
  .ukwide2-highlight-visual{ min-height:220px; }
  .ukwide2-box{ width:132px; height:88px; right:30px; top:50px; }
  .ukwide2-box::before,.ukwide2-box::after{ width:66px; height:24px; top:-16px; }
  .ukwide2-qr-card{ width:108px; left:20px; bottom:24px; }
  .ukwide2-phone{ width:90px; height:166px; right:18px; bottom:20px; }
  .ukwide2-phone-qr{ width:52px; height:52px; }
  .ukwide2-flow-item{ min-height:auto; }
  .ukwide2-flow-item strong{ font-size:21px; }
  .ukwide2-flow-item span{ font-size:16px; }
  .ukwide2-why{ padding:18px; }
  .ukwide2-why h3{ font-size:24px; }
  .ukwide2-reassurance strong{ font-size:18px; }
  .ukwide2-reassurance span:last-child{ font-size:15px; }
  .ukwide2-actions .btn{ width:100%; min-width:0; font-size:17px; }
}


/* =========================================================
   HOW IT WORKS REFRESH
   ========================================================= */
.how-shell{ display:flex; justify-content:center; }
.how-stack{ width:min(820px, 100%); display:grid; gap:12px; }
.how-card{ padding:18px; border-radius:18px; }
.how-row{ display:flex; gap:14px; align-items:flex-start; }
.how-connector{
  width:2px; height:34px; margin:0 auto;
  background: linear-gradient(180deg, rgba(214,180,108,.18), rgba(214,180,108,.92), rgba(214,180,108,.18));
  border-radius:999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 10px 18px rgba(214,180,108,.18);
}
.how-cta{ display:grid; justify-items:center; gap:10px; padding-top:8px; }
.how-cta-copy{ font-weight:900; color:var(--green2); font-size:18px; }

/* polish existing flow cards */
.ukwide2-flow-item{ align-items:center; text-align:center; }
.ukwide2-flow-thumb{
  width:min(112px, 100%); height:auto; display:block; margin:0 auto 14px;
  filter: drop-shadow(0 14px 20px rgba(2,8,23,.10));
}
.ukwide2-flow-arrow{
  width:24px; height:2px; border-radius:999px; background: linear-gradient(90deg, rgba(214,180,108,.18), rgba(214,180,108,.95), rgba(214,180,108,.18));
  box-shadow: 0 0 0 1px rgba(255,255,255,.24);
}
@media (max-width: 980px){
  .how-stack{ gap:10px; }
  .how-connector{ height:24px; }
  .ukwide2-flow-thumb{ width:96px; }
}


/* UK-wide section final fixes */
.ukwide2-topicon{display:none!important;}
.ukwide2-highlight-visual{display:flex;align-items:center;justify-content:center;padding:18px;min-height:320px;background:radial-gradient(ellipse at center, rgba(255,255,255,.10), rgba(255,255,255,0) 70%);}
.ukwide2-highlight-img{display:block;max-width:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(2,8,23,.18));}
.ukwide2-box,.ukwide2-qr-card,.ukwide2-phone{display:none!important;}
@media (max-width:700px){.ukwide2-highlight-visual{min-height:230px;padding:14px;}.ukwide2-highlight-img{max-height:210px;}}


/* ===== 2026-03 pricing + hero refinements ===== */

/* Hero image: fit fully inside frame, never crop */
.hero aside .img-frame{
  height: auto;
  min-height: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero aside .img-frame img{
  position: static;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
}

.quick-message{
  font-size: 17px;
  line-height: 1.55;
  color: rgba(15,23,42,.82);
}
.quick-message strong{
  color: var(--ink);
}

.side-pricing-callout{
  margin-top:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
}
.side-pricing-main{
  font-weight:1000;
  color: var(--brand);
  font-size:18px;
}

/* Pricing section redesign */
.pricing-shell{
  padding:22px;
}
.pricing-intro{
  margin:0 0 14px;
  text-align:center;
  font-size:17px;
  color: rgba(15,23,42,.82);
}
.pricing-grid--new{
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  margin-top: 0;
}
@media (max-width: 900px){
  .pricing-grid--new{
    grid-template-columns: 1fr;
  }
}
.price-card--standard,
.price-card--bulk{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.58);
  box-shadow: var(--shadow2);
}
.price-card--bulk{
  border-color: rgba(214,180,108,.42);
  box-shadow:
    0 18px 36px rgba(214,180,108,.14),
    var(--shadow2);
}
.price-head--split{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.pricing-table-card{
  margin-top:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.68);
  background: rgba(255,255,255,.58);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.pricing-table-title{
  text-align:center;
  font-size:18px;
  font-weight:1000;
  padding:16px 18px 10px;
}
.pricing-table-wrap{
  overflow-x:auto;
  padding: 0 14px 8px;
}
.pricing-table{
  width:100%;
  border-collapse: collapse;
  min-width: 320px;
}
.pricing-table th,
.pricing-table td{
  padding:12px 14px;
  text-align:center;
  border-top:1px solid rgba(15,23,42,.08);
}
.pricing-table th{
  font-size:14px;
  font-weight:1000;
  color: rgba(15,23,42,.82);
  background: rgba(255,255,255,.26);
}
.pricing-table td{
  font-size:17px;
}
.pricing-table-highlight td{
  font-weight:1000;
  color: var(--green2);
  background: rgba(214,180,108,.14);
}
.pricing-note{
  margin: 2px 16px 16px;
  padding: 12px 14px;
  border-top:1px solid rgba(15,23,42,.08);
  font-size:15px;
  color: rgba(15,23,42,.82);
}
.pricing-footnote{
  margin: 12px 0 0;
}
.pricing-estimator{
  margin-top:16px;
  padding:18px;
}
.estimator-breakdown{
  color: rgba(15,23,42,.82);
}

/* Slightly tighter mobile copy under hero image */
@media (max-width: 700px){
  .quick-message{
    font-size: 16px;
  }
  .hero aside .img-frame{
    padding: 10px;
  }
}


/* ===== Hero image: always preserve original aspect ratio ===== */
.hero-media-frame,
.img-frame.hero-media-frame{
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.40);
}

.hero-media-frame img,
.img-frame.hero-media-frame img{
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 980px){
  .hero-media-frame,
  .img-frame.hero-media-frame{
    height: auto !important;
    aspect-ratio: auto !important;
  }

  .hero-media-frame img,
  .img-frame.hero-media-frame img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* ===== Hero media frame: preserve full image, no crop ===== */
.hero-media-frame,
.img-frame.hero-media-frame{
  position: relative !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

.hero-media-frame img,
.img-frame.hero-media-frame img{
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ===== Reviews directly under hero image ===== */
.hero-reviews-block{
  margin: 16px 0 18px;
  position: relative;
  z-index: 2;
}

.reviews-row--hero{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

.reviews-row--hero .review-widget{
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.reviews-row--hero .review-widget > div,
.reviews-row--hero [class*="elfsight-app-"]{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* prevent weird overlap / spill from widget internals */
.reviews-row--hero iframe,
.reviews-row--hero [class*="eapps-widget"],
.reviews-row--hero [class*="eapps-google-reviews"],
.reviews-row--hero [class*="eapps-facebook-reviews"]{
  max-width: 100% !important;
}

/* mobile: stack cleanly */
@media (max-width: 900px){
  .reviews-row--hero{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* Pricing section premium additions */
.pricing-premium-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.pricing-copy-card,
.pricing-trust-card{
  padding:18px;
}
.pricing-copy-card--accent{
  border-color: rgba(214,180,108,.24);
}
.pricing-trust-card{
  margin-top:14px;
}
@media (max-width: 900px){
  .pricing-premium-grid{ grid-template-columns:1fr; }
}

/* ===== Final about layout override (stacked) ===== */
.about-section{ padding-top:28px; }
.about-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:20px; align-items:stretch; }
.about-story-card,.about-widget-card{ padding:24px; }
.about-story-card{ background: rgba(246,248,244,.72) !important; }
.about-story-badge{ display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:999px; background:linear-gradient(135deg, rgba(214,180,108,.96), rgba(226,195,115,.92)); color:var(--ink); font-weight:1000; font-size:13px; margin-bottom:18px; }
.about-story-title{ font-size:clamp(22px,2.6vw,32px); line-height:1.14; letter-spacing:-.6px; margin:0 0 14px; }
.about-story-copy{ font-size:clamp(14px,1.08vw,17px); line-height:1.65; color:#455468; margin:0 0 20px; max-width:34em; }
.about-profile-card{ display:block !important; border-radius:28px; border:1px solid rgba(214,180,108,.18); background:rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); overflow:hidden; }
.about-profile-media{ padding:24px 24px 12px !important; background:rgba(255,255,255,.20) !important; display:flex; justify-content:center; }
.about-profile-media img{ width:min(270px,100%) !important; max-width:100% !important; aspect-ratio:1/1; object-fit:cover; object-position:center; display:block !important; margin:0 auto !important; border-radius:26px; box-shadow:0 12px 26px rgba(2,8,23,.08); }
.about-profile-copy{ padding:0 24px 10px !important; }
.about-profile-copy h3{ font-size:clamp(20px,2vw,28px) !important; line-height:1.12 !important; margin:0 0 10px !important; font-weight:1000; }
.about-profile-copy p{ margin:0 !important; color:#455468; font-size:clamp(14px,.98vw,16px) !important; line-height:1.65 !important; }
.about-profile-trust{ padding:2px 24px 24px !important; border-left:0 !important; border-top:0 !important; background:transparent !important; }
.about-trust-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.about-trust-list li{ display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start; color:var(--ink); font-weight:900; font-size:clamp(13px,1vw,16px) !important; line-height:1.45; }
.about-check{ width:26px; height:26px; display:grid; place-items:center; border-radius:999px; background:rgba(34,197,94,.08); border:1px solid rgba(11,107,58,.28); color:var(--green); box-shadow:0 6px 14px rgba(2,8,23,.05); font-size:18px; line-height:1; }
.about-rating{ margin:16px 0 14px; color:var(--green); font-size:clamp(14px,1vw,17px); font-weight:1000; }
.about-quote-btn{ width:auto !important; min-width:0 !important; min-height:48px !important; border-radius:16px; font-size:clamp(14px,1vw,16px) !important; padding:11px 18px !important; }
.about-widget-card{ background:rgba(255,255,255,.16) !important; }
.about-widget-intro{ margin:6px 0 14px; }
.about-widget-stack{ display:grid; gap:16px; }
.about-widget-panel{ width:100%; min-width:0; }
.about-widget-panel [class*="elfsight-app-"]{ width:100%; max-width:100%; }
#reviews.section{ padding-top:26px; padding-bottom:18px; }
.reviews-section-head{ display:grid; justify-items:center; text-align:center; gap:8px; margin-bottom:18px; }
.reviews-intro{ max-width:700px; margin:0 auto; }
.reviews-section-grid{ display:grid; grid-template-columns:1fr; gap:20px; width:min(100%,1040px); margin:0 auto; }
.reviews-section-card{ padding:16px; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 28px rgba(2,8,23,.05); backdrop-filter:blur(6px) !important; }
.reviews-section-card [class*="elfsight-app-"]{ width:100%; max-width:100%; }
.how-shell{ display:flex; justify-content:center; }
.how-stack{ width:min(1120px,100%); display:grid; gap:18px; }
.how-card{ padding:28px; border-radius:28px; }
.how-row{ display:flex; gap:22px; align-items:flex-start; }
.how-connector{ width:2px; height:54px; margin:0 auto; border-radius:999px; background:linear-gradient(180deg, rgba(214,180,108,.24), rgba(214,180,108,.46), rgba(214,180,108,.24)); box-shadow:0 0 0 1px rgba(255,255,255,.22); }
@media (max-width:1180px){ .about-grid{ grid-template-columns:1fr; } }
@media (max-width:900px){ .about-story-card,.about-widget-card{ padding:18px; } .about-story-title{ font-size:clamp(18px,6vw,28px); } .about-story-copy{ font-size:15px; line-height:1.65; max-width:none; } .about-profile-media{ padding:18px 18px 12px !important; } .about-profile-copy{ padding:0 18px 10px !important; } .about-profile-copy h3{ font-size:clamp(22px,6.8vw,26px) !important; } .about-profile-copy p,.about-trust-list li{ font-size:15px !important; } .about-profile-trust{ padding:2px 18px 18px !important; } .about-check{ width:26px; height:26px; font-size:18px; } .about-rating{ font-size:15px; } .about-quote-btn{ width:100% !important; font-size:15px !important; } }


/* ===== 2026-03 hero conversion refresh ===== */
.hero-headline{
  margin: 6px auto 12px;
  max-width: 16ch;
  text-align: center;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -.7px;
  color: var(--ink);
}
.hero-lede-tight{
  max-width: 58ch !important;
  font-size: 15.25px;
  line-height: 1.72;
}
.hero-usp{
  margin: 0 auto 14px;
  max-width: 58ch;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(214,180,108,.24);
  background: rgba(255,255,255,.54);
  backdrop-filter: blur(14px);
  text-align: center;
  box-shadow: 0 14px 30px rgba(2,8,23,.06);
}
.hero-usp strong{
  display:block;
  margin-bottom:4px;
  font-size: 15px;
  font-weight: 1000;
}
.hero-usp span{
  display:block;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(63,75,90,.94);
}
.memory-note{
  margin-top: 0;
}
.memory-note strong{
  font-size: 15px;
}
.memory-note span{
  max-width: 54ch;
  margin: 0 auto;
  line-height: 1.6;
}
.quick-response h4{
  font-size: 17px;
}
.quick-response p{
  font-size: 13.75px;
}
.hero aside.card.soft{
  padding: 20px !important;
}
.hero-media-frame img,
.img-frame.hero-media-frame img{
  width: 94% !important;
  margin: 0 auto !important;
}
.hero-reviews-block{
  margin-top: 14px;
}
.quick-message{
  font-size: 16px;
  line-height: 1.6;
}
.hero .list strong{
  font-size: 14px;
}
.hero .list span{
  font-size: 12.75px;
  line-height: 1.45;
}
@media (max-width: 900px){
  .hero-headline{
    max-width: none;
    font-size: clamp(24px, 7vw, 34px);
  }
  .hero-lede-tight{
    font-size: 15px;
    line-height: 1.68;
  }
  .hero-usp{
    padding: 13px 14px;
  }
  .hero-usp strong{
    font-size: 14.5px;
  }
  .hero-media-frame img,
  .img-frame.hero-media-frame img{
    width: 100% !important;
  }
}


/* ===== 2026-03 how section conversion refresh ===== */
.how-stack{ gap: 16px; }
.how-card{
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(214,180,108,.18);
  box-shadow: 0 18px 42px rgba(2,8,23,.08);
}
.how-copy{ min-width: 0; }
.how-copy h3{
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -.35px;
}
.how-copy p{
  font-size: 17px;
  line-height: 1.65;
  max-width: 60ch;
}
.how-connector{
  height: 64px;
  width: 3px;
  background: linear-gradient(180deg, rgba(214,180,108,.14), rgba(214,180,108,.55), rgba(214,180,108,.14));
  box-shadow: 0 0 0 1px rgba(255,255,255,.24);
}
.how-trust-bar{
  width: min(860px, 100%);
  margin: 2px auto 0;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(214,180,108,.22);
  background: rgba(255,255,255,.58);
  box-shadow: 0 16px 34px rgba(2,8,23,.07);
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.45;
  color: var(--green2);
}
.how-cta{
  gap: 12px;
  padding-top: 6px;
}
.how-cta-copy{
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -.45px;
  text-align: center;
}
#how .btn.primary{
  min-width: 154px;
}
@media (max-width: 900px){
  .how-card{ padding: 22px; border-radius: 24px; }
  .how-row{ gap: 16px; }
  .how-copy h3{ font-size: 22px; }
  .how-copy p{ font-size: 16px; }
  .how-trust-bar{ font-size: 16px; padding: 14px 16px; }
  .how-cta-copy{ font-size: 22px; }
}
@media (max-width: 640px){
  .how-card{ padding: 18px; }
  .how-row{ gap: 14px; }
  .step-num{ width: 50px; height: 50px; font-size: 22px; border-radius: 16px; }
  .how-copy h3{ font-size: 19px; }
  .how-copy p{ font-size: 15px; line-height: 1.6; }
  .how-connector{ height: 38px; }
  .how-trust-bar{ font-size: 15px; line-height: 1.5; }
  .how-cta-copy{ font-size: 20px; }
}


/* ===== 2026-03 how section premium layout refresh v2 ===== */
#how.how-section-premium .how-stack{
  width:min(980px, 100%);
  margin:0 auto;
  display:grid;
  gap:10px;
}
#how.how-section-premium .how-card{
  padding:24px 28px;
  border-radius:28px;
  background: rgba(255,255,255,.78) !important;
  border:1px solid rgba(214,180,108,.20);
  box-shadow: 0 20px 46px rgba(2,8,23,.08);
  text-align:center;
}
#how.how-section-premium .how-step-badge{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
#how.how-section-premium .step-num{
  width:58px;
  height:58px;
  border-radius:18px;
  font-size:28px;
}
#how.how-section-premium .how-copy{
  max-width: 760px;
  margin: 0 auto;
}
#how.how-section-premium .how-copy h3{
  margin:0 0 8px;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height:1.18;
  text-align:center;
}
#how.how-section-premium .how-copy p{
  margin:0;
  font-size:18px;
  line-height:1.65;
  text-align:center;
}
#how.how-section-premium .how-connector{
  width:4px;
  height:34px;
  margin:0 auto;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(214,180,108,.22), rgba(214,180,108,.9), rgba(214,180,108,.22));
  box-shadow: 0 0 0 1px rgba(255,255,255,.30), 0 0 18px rgba(214,180,108,.22);
}
#how.how-section-premium .how-trust-bar{
  width:min(940px,100%);
  margin:6px auto 0;
  padding:16px 22px;
  border-radius:18px;
  border:1px solid rgba(214,180,108,.22);
  background: rgba(255,255,255,.62);
  text-align:center;
  font-weight:900;
  font-size:18px;
  line-height:1.45;
  color:var(--green2);
  box-shadow: 0 14px 30px rgba(2,8,23,.06);
}
#how.how-section-premium .how-cta{
  display:grid;
  justify-items:center;
  gap:12px;
  padding-top:8px;
}
#how.how-section-premium .how-cta-copy{
  font-size: clamp(26px, 2.5vw, 40px);
  line-height:1.1;
  letter-spacing:-.45px;
  text-align:center;
  color:var(--green2);
}
@media (max-width: 900px){
  #how.how-section-premium .how-card{ padding:22px 22px; border-radius:24px; }
  #how.how-section-premium .how-copy h3{ font-size:24px; }
  #how.how-section-premium .how-copy p{ font-size:16px; }
  #how.how-section-premium .how-trust-bar{ font-size:16px; }
}
@media (max-width: 640px){
  #how.how-section-premium .how-stack{ gap:8px; }
  #how.how-section-premium .how-card{ padding:18px 16px; border-radius:22px; }
  #how.how-section-premium .step-num{ width:50px; height:50px; font-size:24px; border-radius:16px; }
  #how.how-section-premium .how-copy h3{ font-size:20px; }
  #how.how-section-premium .how-copy p{ font-size:15px; line-height:1.6; }
  #how.how-section-premium .how-connector{ height:24px; }
  #how.how-section-premium .how-trust-bar{ font-size:15px; padding:14px 14px; }
  #how.how-section-premium .how-cta-copy{ font-size:22px; }
}


/* ===== 2026-03 how section text alignment polish v3 ===== */
#how.how-section-premium .how-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#how.how-section-premium .how-copy{
  width:100%;
  max-width: 820px;
  margin: 0 auto;
  display:grid;
  justify-items:center;
}
#how.how-section-premium .how-copy h3,
#how.how-section-premium .how-copy p{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
#how.how-section-premium .how-copy h3{
  max-width: 760px;
  text-wrap: balance;
}
#how.how-section-premium .how-copy p{
  max-width: 700px;
  text-wrap: pretty;
}
@media (max-width: 640px){
  #how.how-section-premium .how-copy{
    max-width: 100%;
  }
  #how.how-section-premium .how-copy h3,
  #how.how-section-premium .how-copy p{
    max-width: 100%;
  }
}


/* ===== CTA integration + simplified contact form ===== */
.how-cta-actions,
.pricing-cta-row,
.contact-actions,
.contact-side-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.pricing-cta-row{ margin-top:12px; }

.contact-form-card,
.contact-side-card{
  padding:22px;
}
.contact-intro{
  margin:0 0 14px;
}
.form-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.quote-form textarea{
  min-height:110px;
}
.checkrow--compact{
  margin-top:12px;
  padding:10px 12px;
}
.contact-quick-reply{
  margin-top:12px;
  font-size:13px;
  color: rgba(63,75,90,.92);
  font-weight:700;
}
.contact-actions{
  margin-top:12px;
}
.contact-terms-note{
  margin:12px 0 0;
  font-size:12.5px;
  color: rgba(63,75,90,.92);
}
.contact-terms-note a{
  color: var(--green2);
  font-weight:950;
}
.contact-side-actions{
  margin-top:14px;
}

@media (max-width: 720px){
  .form-grid-2{
    grid-template-columns:1fr;
  }
}