/* ===============================================================
   LOCAL BUSINESS GUIDE  ·  main.css
   ---------------------------------------------------------------
   Every colour, font, gap, radius and speed lives in the :root
   block of this file. There is no second place.
   Never hardcode hex values in component files.

   1. TOKEN
   2. RESET
   3. FONT
   4. TYPE SCALE
   5. LAYOUT: container, section, grid
   6. COMPONENT: button, card, eyebrow, list, icon, form
   7. UTILITY
   =============================================================== */


/* ===============================================================
   1. TOKEN
   =============================================================== */
:root{

  /* --- Brand: Pexnet Teal --- */
  --teal-900:#072A2F;   /* deepest surface, text on gold */
  --teal-800:#0A353B;   /* footer, teal button pressed */
  --teal-700:#0F4C55;   /* PRIMARY. header, hero, CTA, all headings */
  --teal-600:#1A6470;   /* raised panel on teal, teal button hover */
  --teal-500:#2D7480;   /* borders and dividers on dark surfaces */
  --teal-tint:#E3EFF0;  /* info blocks and icon tiles on light */

  /* --- Action accent: Signal Orange --- */
  --orange-500:#C98F22; /* BRAND. display heading, 19px+ button */
  --orange-600:#C98F22; /* default button fill. White text 4.50:1 */
  --orange-700:#8A5A06; /* orange TEXT on light. 5.31:1 */
  --orange-800:#6F4805; /* button active */
  --orange-tint:#FBF1DC;

  /* --- Value accent: Warm Gold --- */
  --gold-400:#E3A835;   /* BRAND. proof line, header button, subscribe */
  --gold-500:#C98F22;   /* gold button hover */
  --gold-700:#8A5A06;   /* gold TEXT on light. star rating */
  --gold-tint:#FBF1DC;

  /* --- Warm neutral --- */
  --white:#FFFFFF;
  --neutral-50:#F5F9F9;   /* page background. NOT pure white */
  --neutral-100:#EDF4F4;  /* Sand. alternate section, body text on teal */
  --neutral-200:#D3E3E5;  /* decorative border, divider */
  --neutral-300:#A9C8CC;  /* Mist. muted text on teal */
  --neutral-450:#7C9396;  /* Steel. input and control borders */
  --neutral-500:#56676C;  /* caption, meta, placeholder */
  --neutral-600:#3F4F54;  /* DEFAULT paragraph */
  --neutral-900:#1F2A2E;  /* Ink. article body, table */

  /* --- Semantic --- */
  --success:var(--teal-700);      --success-bg:var(--teal-tint);
  --warning:var(--gold-400);      --warning-bg:var(--gold-tint);  --warning-text:#5A3A00;
  --excluded:var(--orange-700);   --excluded-bg:var(--orange-tint);
  --error:#A31133;                --error-dark:#8C0E2C;           --error-bg:#FFF1F4;

  /* --- Surface aliases. Use THESE in components --- */
  --surface-page:var(--neutral-50);
  --surface-alt:var(--neutral-100);
  --surface-card:var(--white);
  --surface-inverse:var(--teal-700);
  --surface-deep:var(--teal-800);

  --text-heading:var(--teal-700);
  --text-body:var(--neutral-600);
  --text-muted:var(--neutral-500);
  --text-strong:var(--neutral-900);
  --text-accent:var(--orange-700);
  --text-emphasis:var(--orange-500);
  --text-on-dark:var(--white);
  --text-on-dark-body:#D7E8EA;
  --text-on-gold:var(--teal-900);

  --border-subtle:var(--neutral-200);
  --border-interactive:var(--neutral-450);
  --border-inverse:var(--teal-500);

  --action-primary:var(--gold-400);
  --action-primary-lg:var(--gold-400);
  --action-secondary:var(--teal-700);
  --action-value:var(--gold-400);
  /* Primary button text and hover (v2.3). For a brand like yellow
     button + black text, change only these. */
  --on-action:var(--teal-900);
  --action-primary-hover:#F2C566;
  --action-primary-active:var(--gold-500);
  --action-primary-lg-hover:#F2C566;
  /* Heading letter-spacing (use 0 for narrow fonts) */
  --heading-ls:-.015em;
  --heading-case:none;

  --focus-ring:var(--teal-700);
  --focus-ring-inverse:var(--gold-400);

  /* --- Font --- */
  --font-heading:'Montserrat','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;

  /* --- Radius, shadow, motion --- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --shadow-card:0 10px 30px rgba(10,53,59,.10);
  --shadow-drop:0 28px 70px rgba(10,53,59,.20);
  --ease:cubic-bezier(.4,0,.2,1); --dur-fast:150ms; --dur:200ms;

  /* ===========================================================
     HEADER + FOOTER CONTROL PANEL
     -----------------------------------------------------------
     Header and footer colours, height and spacing live ONLY here.
     Change these lines to restyle both; no need to open
     parts/header.css or parts/footer.css.
     =========================================================== */
  --head-bg:var(--teal-700);            /* header background */
  --head-bg-stuck:rgba(10,53,59,.96);    /* after scrolling */
  --head-text:var(--white);             /* nav link colour */
  --head-text-hover:var(--gold-400);    /* hover and active */
  --head-border:rgba(255,255,255,.12);  /* bottom line, after scrolling */
  --head-mark-bg:var(--orange-500);     /* logo mark box */

  --mega-bg:var(--surface-page);        /* mega menu panel */
  --mega-side-bg:var(--teal-800);       /* mega menu promo box */

  --foot-bg:var(--teal-900);            /* footer background */
  --foot-head:var(--white);             /* column heading */
  --foot-text:var(--neutral-100);       /* footer text */
  --foot-link:var(--neutral-300);       /* footer link */
  --foot-link-hover:var(--gold-400);
  --foot-line:rgba(255,255,255,.18);    /* divider */
  --foot-pad:56px;                      /* top and bottom padding */
  --foot-gap:40px;                      /* gap between columns */

  /* --- Layout --- */
  --headH:64px;          /* header height. The hero is sized from this */
  --vh:100vh;            /* actual visible screen height */
  --gap:20px;
  --sec-pad:60px;        /* section top and bottom padding */
}
@supports (height:100dvh){ :root{ --vh:100dvh } }

@media (min-width:768px){  :root{ --headH:72px; --gap:24px; --sec-pad:80px; --foot-pad:72px } }
@media (min-width:1280px){ :root{ --headH:80px; --sec-pad:104px } }
@media (max-height:700px){ :root{ --headH:56px } }


/* ===============================================================
   2. RESET
   =============================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Sticky footer: on short pages the footer still sits at the bottom
   of the screen, with no large empty gap below it. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
#main{flex:1 0 auto;display:block}
.site-foot{flex:none}
.site-head{flex:none}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
:where(h1,h2,h3,h4){font-family:var(--font-heading);color:var(--text-heading)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--white);color:var(--teal-700);padding:12px 18px;border-radius:var(--radius-sm)}


/* ===============================================================
   3. FONT  (self hosted woff2, assets/fonts/)
   =============================================================== */
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/montserrat-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:optional}
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}


/* ===============================================================
   4. TYPE SCALE   (1.25 major third. Mobile values set by hand.)
   =============================================================== */
.h-hero{font-family:var(--font-heading);font-weight:800;font-size:33px;line-height:1.08;letter-spacing:var(--heading-ls);text-transform:var(--heading-case);color:var(--text-heading)}
.h-sec {font-family:var(--font-heading);font-weight:800;font-size:27px;line-height:1.14;letter-spacing:var(--heading-ls);text-transform:var(--heading-case);color:var(--text-heading)}
.h-card{font-family:var(--font-heading);font-weight:700;font-size:21px;line-height:1.24;letter-spacing:-.02em;color:var(--text-heading)}
.h-sm  {font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.34;letter-spacing:-.01em;color:var(--text-heading)}

.lead{font-size:17px;line-height:1.6;color:var(--text-muted);max-width:620px;margin-top:14px}
.txt {font-size:16px;line-height:1.7;color:var(--text-body);margin-top:12px;max-width:70ch}
.txt-sm{font-size:14px;line-height:1.6;color:var(--text-body)}
.cap{font-size:12px;line-height:1.5;letter-spacing:.01em;color:var(--text-muted);font-weight:500}
.stat-num{font-family:var(--font-heading);font-weight:800;font-size:32px;line-height:1;letter-spacing:-.03em;color:var(--text-heading)}

@media (min-width:768px){
  .h-hero{font-size:50px}
  .h-sec {font-size:38px}
  .h-card{font-size:27px}
  .h-sm  {font-size:20px}
  .lead{font-size:19px}
  .txt {font-size:17px}
  .txt-sm{font-size:15px}
  .cap{font-size:13px}
  .stat-num{font-size:44px}
}

/* One word in a heading. Only safe on 27px+ headings. */
.emph{color:var(--text-emphasis)}

/* Eyebrow: uppercase, always paired with a heading */
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);font-weight:700;
  font-size:11px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-accent);
  margin-bottom:10px;
}
@media (min-width:768px){ .eyebrow{font-size:12px} }

/* On dark surfaces */
.sec.dark .h-hero,.sec.dark .h-sec,.sec.dark .h-card,.sec.dark .h-sm,
.sec.deep .h-hero,.sec.deep .h-sec,.sec.deep .h-card,.sec.deep .h-sm{color:var(--text-on-dark)}
.sec.dark .lead,.sec.dark .txt,.sec.dark .txt-sm,
.sec.deep .lead,.sec.deep .txt,.sec.deep .txt-sm{color:var(--text-on-dark-body)}
.sec.dark .cap,.sec.deep .cap{color:var(--neutral-300)}
.sec.dark .eyebrow,.sec.deep .eyebrow{color:var(--gold-400)}
.sec.dark .emph,.sec.deep .emph{color:var(--gold-400)} /* orange on teal is 2.91:1, so gold */
.sec.dark .stat-num,.sec.deep .stat-num{color:var(--gold-400)}


/* ===============================================================
   5. LAYOUT
   =============================================================== */

/* --- Container. One width on every device. --- */
.container{width:100%;max-width:1320px;margin:0 auto;padding:0 20px}
@media (min-width:768px){  .container{padding:0 40px} }
@media (min-width:1280px){ .container{padding:0 56px} }
@media (min-width:1700px){ .container{max-width:1560px} }

/* --- Section. Surface map. --- */
.sec{position:relative;padding:var(--sec-pad) 0;background:var(--surface-page)}
.sec.alt {background:var(--surface-alt)}
.sec.white{background:var(--white)}
.sec.tint {background:var(--teal-tint)}
.sec.dark{background:var(--surface-inverse);color:var(--text-on-dark-body)}
.sec.deep{background:var(--surface-deep);color:var(--text-on-dark-body)}

/* --- Section head block --- */
.sechead{max-width:720px;margin-bottom:34px}
.sechead--center{margin-left:auto;margin-right:auto;text-align:center}
.sechead--center .lead{margin-left:auto;margin-right:auto}
@media (min-width:768px){ .sechead{margin-bottom:44px} }

/* --- Grid --- */
.grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
.grid.m2{grid-template-columns:1fr 1fr;gap:12px}
.grid.m3{grid-template-columns:repeat(3,1fr);gap:10px}

@media (min-width:768px){
  .grid.cols2{grid-template-columns:repeat(2,1fr)}
  .grid.cols3{grid-template-columns:repeat(2,1fr)}
  .grid.cols4{grid-template-columns:repeat(2,1fr)}
  .grid.cols6{grid-template-columns:repeat(3,1fr)}
  .grid.m2,.grid.m3{gap:var(--gap)}
}
@media (min-width:1280px){
  .grid.cols3{grid-template-columns:repeat(3,1fr)}
  .grid.cols4{grid-template-columns:repeat(4,1fr)}
  .grid.cols6{grid-template-columns:repeat(6,1fr)}
}

/* --- Split: text on one side, visual on the other --- */
.split{display:grid;gap:32px;grid-template-columns:1fr;align-items:center}
@media (min-width:1024px){
  .split{grid-template-columns:1fr 1fr;gap:56px}
  .split--wide{grid-template-columns:1.05fr .95fr}
}
/* .split--flip: image on the left on desktop, always on top on phone */
.split--flip .split__media{order:-1}
@media (min-width:1024px){ .split--flip .split__media{order:0;grid-column:1;grid-row:1} .split--flip .split__copy{grid-column:2;grid-row:1} }

/* --- Media panel --- */
.media{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--teal-tint);
  border:1px solid var(--border-subtle);
}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:240px;color:var(--text-muted);text-align:center;padding:20px}
.sec.dark .media,.sec.deep .media{background:var(--teal-600);border-color:var(--border-inverse)}
.sec.dark .media--ph,.sec.deep .media--ph{color:var(--neutral-300)}
@media (min-width:768px){ .media--ph{min-height:320px} }


/* ===============================================================
   6. COMPONENT
   =============================================================== */

/* --- 6.1 Button. Orange > gold > teal. --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:.01em;
  text-align:center;cursor:pointer;
  background:var(--action-primary);color:var(--on-action);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
@media (min-width:768px){ .btn{min-height:48px;font-size:16px} }
@media (hover:hover){ .btn:hover{background:var(--action-primary-hover);color:var(--on-action)} }
.btn:active{background:var(--action-primary-active);transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.btn[disabled],.btn.is-disabled{background:var(--neutral-100);color:var(--neutral-450);cursor:not-allowed;transform:none}

/* Hero size. A 19px label passes the large-text threshold, so Orange 500 is safe. */
.btn.lg{font-size:19px;min-height:60px;padding:0 32px;background:var(--action-primary-lg)}
@media (hover:hover){ .btn.lg:hover{background:var(--action-primary-lg-hover)} }

.btn.secondary{background:var(--action-secondary);color:var(--white)}
@media (hover:hover){ .btn.secondary:hover{background:var(--teal-600)} }
.btn.secondary:active{background:var(--teal-900)}

.btn.gold{background:var(--action-value);color:var(--text-on-gold)}
@media (hover:hover){ .btn.gold:hover{background:var(--gold-500);color:var(--text-on-gold)} }

.btn.ghost{background:transparent;color:var(--teal-700);border-color:var(--border-interactive)}
@media (hover:hover){ .btn.ghost:hover{border-color:var(--teal-700);background:var(--teal-tint)} }

.btn.text{
  background:none;border:0;padding:0;min-height:44px;color:var(--text-accent);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
}
@media (hover:hover){ .btn.text:hover{background:none;color:var(--orange-800);text-decoration-thickness:2.5px} }
.btn.wide{width:100%}

/* Inside dark surfaces */
.sec.dark .btn.secondary,.sec.deep .btn.secondary{background:var(--white);color:var(--teal-700)}
@media (hover:hover){ .sec.dark .btn.secondary:hover,.sec.deep .btn.secondary:hover{background:var(--neutral-100)} }
.sec.dark .btn.ghost,.sec.deep .btn.ghost{color:var(--white);border-color:rgba(255,255,255,.55);background:transparent}
@media (hover:hover){ .sec.dark .btn.ghost:hover,.sec.deep .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:var(--white)} }
.sec.dark .btn:focus-visible,.sec.deep .btn:focus-visible{outline-color:var(--focus-ring-inverse)}

.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btnrow--center{justify-content:center}
@media (max-width:520px){ .btnrow .btn{flex:1 1 auto;padding:0 16px} }

/* --- 6.2 Link --- */
.link{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:700;font-size:15px;color:var(--text-accent);
  min-height:44px;
}
.link .ico{transition:transform var(--dur-fast) var(--ease)}
@media (hover:hover){ .link:hover{color:var(--orange-800)} .link:hover .ico{transform:translateX(3px)} }
.link:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.sec.dark .link,.sec.deep .link{color:var(--gold-400)}
@media (hover:hover){ .sec.dark .link:hover,.sec.deep .link:hover{color:var(--white)} }

/* --- 6.3 Card. Always white, on both Off White and Sand. --- */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:20px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
@media (min-width:768px){ .card{padding:28px} }
.card.pad0{padding:0;overflow:hidden}
.card--link{display:block}
@media (hover:hover){ .card--link:hover{border-color:var(--teal-700);box-shadow:var(--shadow-card);transform:translateY(-2px)} }
.card--link:focus-within{outline:3px solid var(--focus-ring);outline-offset:2px}
.card.hi{border:2px solid var(--orange-500)}

/* Dark card */
.sec.dark .card,.sec.deep .card{background:var(--teal-600);border-color:var(--border-inverse)}
@media (hover:hover){ .sec.dark .card--link:hover,.sec.deep .card--link:hover{border-color:var(--gold-400);box-shadow:none} }
.sec.dark .card--link:focus-within,.sec.deep .card--link:focus-within{outline-color:var(--focus-ring-inverse)}

.card__body{padding:20px}
@media (min-width:768px){ .card__body{padding:24px} }

/* --- 6.4 Pill / badge --- */
.pill{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--teal-900);background:var(--gold-400);
  border-radius:999px;padding:4px 10px;
}
.pill.quiet{background:var(--teal-tint);color:var(--teal-700)}

/* --- 6.5 Icon --- */
.ico{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icotile{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md);flex:none;
  background:var(--orange-tint);color:var(--orange-700);
}
.icotile--info{background:var(--teal-tint);color:var(--teal-700)}
.sec.dark .icotile,.sec.deep .icotile{background:rgba(255,255,255,.1);color:var(--gold-400)}
.sec.dark .icotile--info,.sec.deep .icotile--info{background:var(--teal-600);color:var(--white)}

/* --- 6.6 Tick / cross list --- */
.ticks{display:grid;gap:12px;margin-top:20px}
.ticks li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.6;color:var(--text-body)}
.ticks li b{color:var(--text-strong);font-weight:600}
.tick,.cross{flex:none;margin-top:2px}
.tick{color:var(--teal-700)}
.cross{color:var(--orange-700)}
.sec.dark .ticks li,.sec.deep .ticks li{color:var(--text-on-dark-body)}
.sec.dark .ticks li b,.sec.deep .ticks li b{color:var(--white)}
.sec.dark .tick,.sec.deep .tick{color:var(--gold-400)}
.sec.dark .cross,.sec.deep .cross{color:#FF8A5C}

/* --- 6.7 Star --- */
.stars{display:inline-flex;gap:2px;color:var(--neutral-200)}
.stars .star.on{color:var(--gold-700)}      /* Gold 700 on light surfaces */
.stars .ico{fill:currentColor;stroke:none}
.sec.dark .stars,.sec.deep .stars{color:var(--teal-500)}
.sec.dark .stars .star.on,.sec.deep .stars .star.on{color:var(--gold-400)}

/* --- 6.8 Divider --- */
.rule{height:1px;background:var(--border-subtle);border:0;margin:20px 0}
.sec.dark .rule,.sec.deep .rule{background:var(--border-inverse)}

/* --- 6.9 Form --- */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--teal-700);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:12px 14px;
  font-family:var(--font-body);font-size:16px;color:var(--text-strong);
  background:var(--white);
  border:1px solid var(--border-interactive);
  border-radius:var(--radius-sm);
}
@media (min-width:768px){ .field input,.field select{min-height:48px} }
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--neutral-500)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(15,76,85,.25);
}
.field input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(163,17,51,.15)}
.field .err{display:block;font-size:13px;font-weight:600;color:var(--error-dark);margin-top:6px}
.field .help{font-size:13px;color:var(--text-muted);margin-top:6px}

.notice{border-radius:var(--radius-md);padding:14px 16px;margin-bottom:18px;font-size:15px;border-left:4px solid}
.notice.ok  {background:var(--success-bg);border-color:var(--success);color:var(--teal-900)}
.notice.warn{background:var(--warning-bg);border-color:var(--warning);color:var(--warning-text)}
.notice.bad {background:var(--error-bg);border-color:var(--error);color:var(--error-dark)}
.hp{position:absolute;left:-9999px}


/* ===============================================================
   7. UTILITY
   =============================================================== */
.center{text-align:center}
.mauto{margin-left:auto;margin-right:auto}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.rowbtw{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:34px}
.rowbtw .sechead{margin-bottom:0;flex:1 1 260px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===============================================================
   8. LAYOUT OVERRIDE  (v2.3, inc/layout.php)
   ---------------------------------------------------------------
   Values in a section's "Size & layout" box add a data-ly flag and
   --ly-* variables to <section>. Without a flag these rules do not
   apply, so the default design is unchanged.
   =============================================================== */
.sec[data-ly~="pt"]{padding-top:var(--ly-pt)}
.sec[data-ly~="pb"]{padding-bottom:var(--ly-pb)}
@media (max-width:767px){
  .sec[data-ly~="ptm"]{padding-top:var(--ly-pt-m)}
  .sec[data-ly~="pbm"]{padding-bottom:var(--ly-pb-m)}
}
.sec[data-ly~="minh"]{min-height:var(--ly-minh)}
.sec[data-ly~="minh"].hs{min-height:var(--ly-minh)}
.sec[data-ly~="w"] > .container{max-width:var(--ly-w)}

/* Image height: fixed media box height, image cover/contain */
.sec[data-ly~="imgh"] :is(.media,.hs__media,.tm__media,.cs__media,.pcx__media,.lbg-media){
  height:var(--ly-imgh);max-height:none;min-height:0;aspect-ratio:auto}
@media (max-width:767px){
  .sec[data-ly~="imghm"] :is(.media,.hs__media,.tm__media,.cs__media,.pcx__media,.lbg-media){
    height:var(--ly-imgh-m);max-height:none;min-height:0;aspect-ratio:auto}
}
.sec[data-ly~="imgh"] :is(.media,.hs__media,.tm__media,.cs__media,.pcx__media,.lbg-media) img,
.sec[data-ly~="imghm"] :is(.media,.hs__media,.tm__media,.cs__media,.pcx__media,.lbg-media) img{width:100%;height:100%}
/* In logo rows, height = logo height */
.sec[data-ly~="imgh"] :is(.ls__item,.lw__cell) img{max-height:var(--ly-imgh);height:auto;width:auto}
@media (max-width:767px){ .sec[data-ly~="imghm"] :is(.ls__item,.lw__cell) img{max-height:var(--ly-imgh-m)} }
.sec[data-ly~="fit"] img{object-fit:var(--ly-fit)}
.sec[data-ly~="fit"] :is(.ls__item,.lw__cell) img{object-fit:contain}
.sec[data-ly~="imgw"] :is(.media,.hs__media,.tm__media,.lbg-media){max-width:var(--ly-imgw);width:100%;justify-self:center;margin-inline:auto}
.sec[data-ly~="imgw"] :is(.ls__item,.lw__cell) img{max-width:var(--ly-imgw)}
.sec[data-ly~="imgr"] :is(.media,.hs__media,.tm__media,.cs__media,.pcx__media,.lbg-media){border-radius:var(--ly-imgr)}
.sec[data-ly~="imgr"] .card.pad0{border-radius:var(--ly-imgr)}

/* Background image (layout "Background image" field) */
.ly-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:var(--ly-bgop,.3);pointer-events:none;z-index:0}
.sec[data-ly~="bgimg"] > .container{position:relative;z-index:1}

/* Text below the grid/list (lbg_after) */
.after{max-width:720px;margin-top:28px;color:var(--text-body);font-size:16px;line-height:1.7}
.after--center{margin-left:auto;margin-right:auto;text-align:center}
.after p + p{margin-top:10px}
.sec.dark .after,.sec.deep .after{color:var(--text-on-dark-body)}
.after + .btnrow{margin-top:18px}

/* Image column width, vertical align, focus point (Image size & position) */
@media (min-width:1024px){
  .sec[data-ly~="imgcol"] .split{grid-template-columns:minmax(0,1fr) var(--ly-imgcol)}
  .sec[data-ly~="imgcol"] .split--flip{grid-template-columns:var(--ly-imgcol) minmax(0,1fr)}
}
@media (min-width:768px) and (min-aspect-ratio:1/1){
  .sec[data-ly~="imgcol"] .hs__grid{grid-template-columns:minmax(0,1fr) var(--ly-imgcol)}
  .sec[data-ly~="imgcol"].hs--flip .hs__grid{grid-template-columns:var(--ly-imgcol) minmax(0,1fr)}
}
.sec[data-ly~="va-top"] :is(.split,.hs__grid){align-items:start}
.sec[data-ly~="va-top"] :is(.split__media,.hs__media,.tm__media){align-self:start}
.sec[data-ly~="va-bottom"] :is(.split,.hs__grid){align-items:end}
.sec[data-ly~="va-bottom"] :is(.split__media,.hs__media,.tm__media){align-self:end}
@media (min-width:1024px){
  .sec[data-ly~="va-stretch"] .split{align-items:stretch}
  .sec[data-ly~="va-stretch"] :is(.split__media,.tm__media){align-self:stretch;height:auto;min-height:260px;max-height:none;aspect-ratio:auto}
  .sec[data-ly~="va-stretch"] :is(.split__media,.tm__media) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}
@media (min-width:768px) and (min-aspect-ratio:1/1){
  .sec[data-ly~="va-stretch"] .hs__grid{align-items:stretch}
  .sec[data-ly~="va-stretch"] .hs__media{align-self:stretch;height:auto;max-height:none;aspect-ratio:auto}
}
.sec[data-ly~="imgpos"] img{object-position:var(--ly-imgpos)}

/* Show on */
@media (max-width:767px){ .sec[data-ly~="only-desktop"]{display:none} }
@media (min-width:768px){ .sec[data-ly~="only-mobile"]{display:none} }

/* Anchor targets do not hide under the sticky header */
.sec[id]{scroll-margin-top:calc(var(--headH) + 8px)}

/* ===============================================================
   9. SECTION COLOURS  (inc/layout.php, "Colours" box)
   ---------------------------------------------------------------
   Only active when the section has the matching data-sc flag.
   The doubled attribute selector keeps these above tone rules.
   =============================================================== */
.sec[data-sc][data-sc~="bg"]{background:var(--sc-bg)}
.sec[data-sc][data-sc~="bg2"]{background:linear-gradient(135deg,var(--sc-bg) 0%,var(--sc-bg2) 100%)}
.sec[data-sc][data-sc~="heading"] :is(h1,h2,h3,h4,h5,.h-hero,.h-sec,.h-card,.h-sm,.hs__title,.cb__title,.ls__title,.stat-num){color:var(--sc-heading)}
.sec[data-sc][data-sc~="text"]{color:var(--sc-text)}
.sec[data-sc][data-sc~="text"] :is(p,li,dd,dt,blockquote,figcaption,summary,label,td,th,.lead,.txt,.txt-sm,.cap,.hs__lead,.hs__crumb,.cb__lead,.ts__quote,.ts__role,.after){color:var(--sc-text)}
.sec[data-sc][data-sc~="accent"] :is(.eyebrow,.emph,.link,.tick,.stars .star.on,.hs__proof,.cb__offer,.fq__ico,.st__text a,.txt a,.after a,.lc__text a){color:var(--sc-accent)}
.sec[data-sc][data-sc~="accent"] :is(.st__n,.icotile){color:var(--sc-accent)}
.sec[data-sc][data-sc~="btn"] .btn:not(.ghost):not(.secondary):not(.text){background:var(--sc-btn);border-color:var(--sc-btn)}
.sec[data-sc][data-sc~="btntext"] .btn:not(.ghost):not(.secondary):not(.text){color:var(--sc-btn-text)}
@media (hover:hover){ .sec[data-sc][data-sc~="btn"] .btn:not(.ghost):not(.secondary):not(.text):hover{background:var(--sc-btn);filter:brightness(1.08)} }
.sec[data-sc][data-sc~="card"] :is(.card,.lc__chip,.tm__panel,.fq__row,.sb__item--card){background:var(--sc-card)}
.sec[data-sc][data-sc~="cardtext"] :is(.card,.lc__chip,.tm__panel,.fq__row) :is(h2,h3,h4,p,li,span,dt,dd,blockquote,summary,.h-sm,.h-card,.txt-sm){color:var(--sc-card-text)}
.sec[data-sc][data-sc~="cardtext"] .lc__chip{color:var(--sc-card-text)}
.sec[data-sc][data-sc~="border"] :is(.card,.fq__row,.lc__chip,.media,.ts__by,input,select,textarea){border-color:var(--sc-border)}

/* Prefers reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ===============================================================
   10. SUBSCRIBE FORM MESSAGE (footer + blog sidebar)
   =============================================================== */
.lbg-submsg{margin:4px 0 0;font-size:14px;line-height:1.45;font-weight:600}
.lbg-submsg--ok{color:var(--text-accent)}
.lbg-submsg--err{color:var(--orange-800,currentColor)}
.site-foot .lbg-submsg--ok{color:var(--gold-400)}
.site-foot .lbg-submsg--err{color:var(--white)}