/* main.css */
/* ===============================================================
   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:'Simplon Norm','Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --font-body:'Simplon Norm','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/)
   =============================================================== */
/* v2.8 type: Simplon Norm / Simplon Mono (used when the licensed files are installed), else Inter / IBM Plex Mono (self-hosted) */
@font-face{font-family:'Simplon Norm';src:local('Simplon Norm'),local('SimplonNorm-Regular');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:'Simplon Norm';src:local('Simplon Norm Bold'),local('SimplonNorm-Bold');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'Simplon Mono';src:local('Simplon Mono'),local('SimplonMono-Regular');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Simplon Mono';src:local('Simplon Mono Bold'),local('SimplonMono-Bold');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/fonts/inter-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/fonts/plexmono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/fonts/inter-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('https://restorationseoservice.com/wp-content/themes/canberra-rba/assets/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)}

/* style.css */
/*
Theme Name: Canberra Roadside Battery Assist
Theme URI: https://canberrarba.com.au
Author: Canberra Roadside Battery Assist
Description: Canberra Roadside Battery Assist: mobile jump starts, battery testing and battery replacement across Canberra and Queanbeyan. Upload and activate, then follow the Theme Setup screen to install the plugins and import the full website (pages, 6 service pages, Battery Guide posts, menus, settings). Built on the Local Business Guide engine.
Version: 2.9.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: canberra-rba
Tags: business, seo, local-business, block-styles, full-width-template
*/

/* Do not add CSS here. Styles live in assets/css/main.css. */

/* footer.css */
/* ===============================================================
   FOOTER v2  ·  parts/footer.css
   ---------------------------------------------------------------
   DO NOT CHANGE COLOURS OR SPACING IN THIS FILE.
   They all live in main.css, "HEADER + FOOTER CONTROL PANEL":
     --foot-bg  --foot-head  --foot-text  --foot-link
     --foot-link-hover  --foot-line  --foot-pad  --foot-gap

   This file only sets the STRUCTURE (what goes where).

   Layout:
     Phone      1 column, link 2 column
     Tablet     brand | link (2 col)
     Desktop    brand | link (4 col) | newsletter
   =============================================================== */

.site-foot{
  background:var(--foot-bg);
  color:var(--foot-text);
  padding:var(--foot-pad) 0 28px;
}

/* --- Top grid --- */
.foot__top{
  display:grid;
  gap:36px var(--foot-gap);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  /* No newsletter: brand | 4 link columns */
  .foot__top{grid-template-columns:minmax(240px,1fr) minmax(0,2.1fr)}
}
@media (min-width:1200px){
  /* With newsletter: brand | links | newsletter */
  .site-foot--news .foot__top{grid-template-columns:minmax(230px,1fr) minmax(0,2fr) minmax(240px,1.1fr)}
}

/* --- 1. Brand block --- */
.site-foot .brand{color:var(--foot-head)}
.site-foot .brand__mark{background:var(--head-mark-bg)}
.foot__desc{
  font-size:15px;line-height:1.6;color:var(--foot-text);
  margin-top:16px;max-width:40ch;
}
.foot__nap{
  display:grid;gap:10px;margin-top:20px;
  font-style:normal;font-size:14px;line-height:1.5;color:var(--foot-link);
}
.foot__nap > span,.foot__nap > a{display:flex;align-items:flex-start;gap:9px;color:var(--foot-link)}
.foot__nap .ico{margin-top:2px;flex:none}
@media (hover:hover){ .foot__nap a:hover{color:var(--foot-link-hover)} }
.foot__nap a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

.foot__social{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.foot__so{
  width:38px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.12);color:var(--foot-head);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .foot__so:hover{background:var(--foot-link-hover);color:var(--teal-900)} }
.foot__so:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* --- 2. Link column --- */
.foot__cols{
  display:grid;
  gap:28px 24px;
  grid-template-columns:1fr 1fr;
}
@media (min-width:1024px){ .foot__cols{grid-template-columns:repeat(var(--fc,4),minmax(0,1fr))} }
.foot__col{min-width:0}
/* One or three columns on a phone: let the last one use the full row */
@media (max-width:1023px){ .foot__col:last-child:nth-child(odd){grid-column:1/-1} }

.foot__h{
  font-family:var(--font-heading);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--foot-head);margin-bottom:14px;
}
.foot__links{display:grid;gap:2px}
.foot__links a{
  display:inline-block;padding:6px 0;
  font-family:var(--font-body);font-weight:400;font-size:14.5px;line-height:1.45;
  color:var(--foot-link);
  transition:color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .foot__links a:hover{color:var(--foot-link-hover)} }
.foot__links a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

/* --- 3. Newsletter --- */
.foot__form{display:grid;gap:10px;margin-top:16px}
.foot__form input{
  width:100%;min-height:48px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--white);color:var(--text-strong);
  font-family:var(--font-body);font-size:16px;
}
.foot__form input::placeholder{color:var(--neutral-500)}
.foot__form input:focus{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}
.foot__form .btn{text-transform:uppercase;letter-spacing:.06em}

/* --- 4. Bottom bar --- */
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:12px 24px;
  align-items:center;justify-content:space-between;
  margin-top:44px;padding-top:22px;
  border-top:1px solid var(--foot-line);
  font-size:13.5px;color:var(--foot-link);
}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__legal a{color:var(--foot-link)}
@media (hover:hover){ .foot__legal a:hover{color:var(--foot-link-hover)} }
.foot__legal a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

@media (max-width:600px){
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:14px}
}

/* Setup help shown to admins only. Visitors never see it. */
.foot__setup{
  border:1px dashed var(--foot-line);border-radius:var(--radius-md);
  padding:16px 18px;align-self:start;
}
.foot__setup a{color:var(--foot-link-hover);text-decoration:underline;text-underline-offset:3px}
.foot__setup .foot__desc{margin-top:0;max-width:none}

/* v2.3 footer background image */
.site-foot{position:relative;overflow:hidden}
.site-foot > .container{position:relative;z-index:1}

/* header.css */
/* ===============================================================
   HEADER v2  ·  parts/header.css
   ---------------------------------------------------------------
   Desktop:  logo LEFT | menu CENTRE | button RIGHT
   Mobile:   logo LEFT | button + burger RIGHT, full screen menu

   Height comes from the --headH token. Do not write px heights here.
   Where the hamburger turns off: see 5. BREAKPOINT below.

   Contents
     1. Announcement bar
     2. Header shell and its three tracks
     3. Brand
     4. Nav links and chevron
     5. Breakpoint
     6. Simple dropdown (non-mega submenu)
     7. MEGA MENU
     8. Phone, CTA, burger
     9. Full screen mobile menu
   =============================================================== */


/* ===============================================================
   1. ANNOUNCEMENT BAR
   =============================================================== */
.annbar{background:var(--teal-800);color:var(--neutral-100);font-size:14px;position:relative;z-index:61}
.annbar__in{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;padding-top:9px;padding-bottom:9px;text-align:center}
.annbar a{color:var(--gold-400);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (hover:hover){ .annbar a:hover{color:var(--white)} }
.annbar a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}


/* ===============================================================
   2. HEADER SHELL
   =============================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  height:var(--headH);
  background:var(--head-bg);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck{
  background:var(--head-bg-stuck);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 16px rgba(10,53,59,.28);
  border-bottom-color:var(--head-border);
}
/* Header is solid while mega is open, otherwise it blends with the panel below */
.site-head.mega-open{background:var(--head-bg);box-shadow:none}

/* CORE ALIGNMENT LINE  <- do not remove.
   .site-head has a fixed height (--headH). The inner .container must
   be 100% tall too, otherwise .nav height:100% resolves to nothing and
   items stick to the top. With this, align-items:center really works. */
.site-head > .container{height:100%;display:flex;align-items:center}

/* Three tracks: logo left, menu centre, actions right.
   From 1280px the side tracks are equal (1fr), so the menu sits at
   the TRUE optical centre even if the CTA is wider than the logo.
   Below 1280px space is tight, so auto 1fr auto: the menu sits in
   the remaining space and nothing overlaps. */
.nav{
  width:100%;
  height:100%;
  min-height:var(--headH);
  display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:20px;
}
@media (min-width:1280px){ .nav{grid-template-columns:1fr auto 1fr} }
.nav__left{justify-self:start;display:flex;align-items:center;height:100%;min-width:0}
.nav__mid{justify-self:center;display:flex;align-items:center;height:100%;min-width:0}
.nav__right{justify-self:end;display:flex;align-items:center;height:100%;gap:10px;min-width:0}

/* For a CENTRED logo, uncomment these three lines:
.nav{grid-template-columns:1fr auto 1fr}
.nav__left{justify-self:center;grid-column:2}
.nav__mid{justify-self:start;grid-column:1}
*/


/* ===============================================================
   3. BRAND
   =============================================================== */
.brand{display:flex;align-items:center;gap:10px;color:var(--white);line-height:1;max-width:100%}
.brand__mark{
  width:32px;height:32px;border-radius:10px;flex:none;
  background:var(--head-mark-bg);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:900;font-size:16px;
  line-height:1;
}
.brand__name{
  font-family:var(--font-heading);font-weight:900;font-size:17px;letter-spacing:-.01em;
  line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* However tall the logo is, it never breaks the header height.
   Width comes from Theme Settings > Logo width. */
.brand__img{max-width:100%;max-height:calc(var(--headH) - 20px);height:auto;object-fit:contain}
.brand:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:4px;border-radius:6px}


/* ===============================================================
   4. NAV LINK
   =============================================================== */
.navlinks{display:none;align-items:center;gap:4px;height:100%}
.nav__item{position:relative;height:100%;display:flex;align-items:center}
/* The mega panel spans the full width, so this item is static */
.nav__item.has-mega{position:static}

.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 12px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--head-text);
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
  cursor:pointer;
}
@media (hover:hover){ .nav__link:hover{color:var(--head-text-hover);background:rgba(255,255,255,.08)} }
.nav__link:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* Active page: colour + underline. Never rely on colour alone. */
.nav__item.current-menu-item > .nav__link,
.nav__item.current_page_item > .nav__link,
.nav__item.current-menu-ancestor > .nav__link,
.nav__item.current-menu-parent > .nav__link{
  color:var(--head-text-hover);
  box-shadow:inset 0 -2px 0 var(--head-text-hover);
}

.nav__chev{display:inline-flex;transition:transform var(--dur) var(--ease);opacity:.8}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__link[aria-expanded="true"]{color:var(--gold-400);background:rgba(255,255,255,.08)}


/* ===============================================================
   5. BREAKPOINT  <- the hamburger turns off HERE
   =============================================================== */
@media (min-width:768px){
  .brand__mark{width:34px;height:34px}
  .brand__name{font-size:18px}
}
@media (min-width:1024px){
  .navlinks{display:flex}
}
@media (min-width:1024px){
  .nav__link{padding:0 9px;font-size:12.5px}
}
@media (min-width:1280px){
  .navlinks{gap:6px}
  .nav__link{padding:0 13px;font-size:13px}
}
@media (min-width:1440px){
  .brand__name{font-size:19px}
  .brand__mark{width:38px;height:38px;font-size:18px}
  .nav__link{padding:0 16px}
}
@media (max-height:700px){
  .brand__mark{width:28px;height:28px;font-size:14px}
  .brand__name{font-size:16px}
}

/* --- 5.1 ALIGNMENT GUARD (desktop + tablet + mobile) ---------------
   Every header item sits on the same optical line. These three
   lines also handle any new element you add. */
.nav > *{align-self:center}
.nav__right > *{flex:none}
.nav__left .brand{align-items:center}
/* Minimum gap between logo and burger on small phones */
@media (max-width:479px){
  .nav{gap:12px}
  .brand__name{font-size:16px}
}
@media (min-width:480px) and (max-width:1023px){
  .nav{gap:14px}
}


/* ===============================================================
   6. SIMPLE DROPDOWN  (non-mega submenu)
   =============================================================== */
.drop{
  position:absolute;top:100%;left:0;min-width:240px;
  background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-drop);
  padding:8px;margin-top:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:5;
}
.nav__item.has-drop.is-open > .drop{opacity:1;visibility:visible;transform:none}
.drop .nav__item{display:block;height:auto;position:relative}
.drop .nav__link{
  display:block;width:100%;height:auto;padding:10px 12px;
  color:var(--teal-700);text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:600;
}
@media (hover:hover){ .drop .nav__link:hover{background:var(--teal-tint);color:var(--teal-700)} }
.drop .nav__link:focus-visible{outline-color:var(--focus-ring)}


/* ===============================================================
   7. MEGA MENU
   ---------------------------------------------------------------
   A full-width panel under the header. Content comes automatically
   from the Service and Industry post types, inc/nav-mega.php.
   =============================================================== */
.navscrim{
  position:fixed;left:0;right:0;top:0;bottom:0;
  background:rgba(10,53,59,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
  z-index:-1;
}
body.mega-open .navscrim{opacity:1}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--mega-bg);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 48px rgba(10,53,59,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:4;
  max-height:calc(100vh - var(--headH) - 20px);
  overflow-y:auto;
}
/* Without JS the panel stays closed. nav.js removes hidden on init. */
.mega[hidden],.navscrim[hidden]{display:none}
.nav__item.has-mega.is-open > .mega{opacity:1;visibility:visible;transform:none}

.mega__in{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding-top:32px;padding-bottom:32px;
}
@media (min-width:1200px){
  .mega__in{grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:40px;padding-bottom:40px}
}

/* --- Left-hand list --- */
.mega__main{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){  .mega__main{grid-template-columns:1fr 1fr;gap:24px 32px} }
@media (min-width:1400px){ .mega__main{grid-template-columns:1fr 1fr 1fr} }

.mega__gname{
  font-family:var(--font-body);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-accent);
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--border-subtle);
}
.mega__list{display:grid;gap:2px}

.mega__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;
  padding:10px;border-radius:var(--radius-md);
  transition:background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .mega__item:hover{background:var(--white)} }
.mega__item:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px}

.mega__ico{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-tint);color:var(--teal-700);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .mega__item:hover .mega__ico{background:var(--orange-tint);color:var(--orange-700)} }

.mega__txt{min-width:0}
.mega__t{display:block;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--teal-700);line-height:1.3}
.mega__d{display:block;font-size:13px;line-height:1.45;color:var(--text-muted);margin-top:3px}
.mega__arrow{color:var(--orange-700);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);margin-top:9px}
@media (hover:hover){ .mega__item:hover .mega__arrow{opacity:1;transform:none} }

/* --- Right-hand promo column --- */
.mega__side{
  background:var(--mega-side-bg);color:var(--neutral-100);
  border-radius:var(--radius-lg);padding:24px;
  align-self:start;
}
.mega__sidee{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:10px}
.mega__sideh{font-family:var(--font-heading);font-weight:800;font-size:19px;line-height:1.2;color:var(--white);letter-spacing:-.02em}
.mega__sidet{font-size:14px;line-height:1.55;color:var(--neutral-100);margin:10px 0 18px}
.mega__side .btn{min-height:46px}
.mega__all{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-weight:700;font-size:14px;color:var(--gold-400);
}
@media (hover:hover){ .mega__all:hover{color:var(--white)} }
.mega__all:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}


/* ===============================================================
   8. PHONE, CTA, BURGER
   ---------------------------------------------------------------
   Display rules for these three live HERE, not in section 5,
   because they must come after the base rules to win.
   =============================================================== */
.nav__phone{display:none;align-items:center;gap:7px;color:var(--white);font-weight:600;font-size:14px;white-space:nowrap}
@media (hover:hover){ .nav__phone:hover{color:var(--gold-400)} }
.nav__phone:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

.nav__cta{display:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap}
.btn.ghost.nav__cta2{display:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap;color:var(--white);border-color:rgba(255,255,255,.5);background:transparent}
@media (hover:hover){ .btn.ghost.nav__cta2:hover{background:rgba(255,255,255,.1);border-color:var(--white)} }

.burger{
  width:44px;height:44px;flex:none;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);
  cursor:pointer;
}
.burger i{width:18px;height:2px;background:var(--white);border-radius:2px}
.burger:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* Small phones: logo + burger only. The button shows from 480px. */
@media (min-width:480px){ .nav__cta{display:inline-flex} }
@media (min-width:1280px){ .btn.ghost.nav__cta2{display:inline-flex} }
/* Phone number from 1700px, where the container grows to 1560px.
   Below that, menu + logo + phone + button do not fit in 1208px.
   With a short menu (3-4 items) you can lower this to 1280;
   then test at 1280, 1440 and 1600. */
@media (min-width:1700px){ .nav__phone{display:inline-flex} }
@media (min-width:1024px){
  .nav__cta{min-height:42px;padding:0 18px;font-size:14px}
  .burger{display:none}      /* <- the hamburger turns off HERE */
}

/* ===============================================================
   9. FULL SCREEN MOBILE MENU
   =============================================================== */
.mnav{
  position:fixed;inset:0;z-index:80;
  background:var(--teal-800);
  display:flex;flex-direction:column;
  overscroll-behavior:contain;
}
.mnav[hidden]{display:none}
body.menu-open{overflow:hidden}

.mnav__top{flex:none;height:var(--headH);border-bottom:1px solid rgba(255,255,255,.16)}
.mnav__topin{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mnav__close{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);cursor:pointer;
}
@media (hover:hover){ .mnav__close:hover{background:rgba(255,255,255,.1)} }
.mnav__close:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

.mnav__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 0 24px}

.mnav__list{display:block}
.mnav__item{border-bottom:1px solid rgba(255,255,255,.14)}
.mnav__row{display:flex;align-items:center;gap:8px}
.mnav__link{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:16px 0;color:var(--white);
  font-family:var(--font-body);font-weight:600;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;
}
.mnav__link:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:-3px}
.mnav__item.current-menu-item > .mnav__row > .mnav__link{color:var(--gold-400)}

.mnav__tog{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--white);
  border:0;border-radius:var(--radius-sm);cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur-fast) var(--ease);
}
.mnav__tog[aria-expanded="true"]{background:var(--gold-400);color:var(--teal-900);transform:rotate(45deg)}
.mnav__tog:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

.mnav__sub{padding:2px 0 12px}
.mnav__sub[hidden]{display:none}
.mnav__sub .mnav__item{border-bottom:0}
.mnav__link--sub{
  padding:11px 0;font-size:14px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--neutral-100);
}
.mnav__ico{
  width:32px;height:32px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--gold-400);
}
.mnav__link--all{padding:11px 0;font-size:13px;color:var(--gold-400);text-transform:none;letter-spacing:0;font-weight:700}

.mnav__foot{
  flex:none;padding:18px 0 24px;
  border-top:1px solid rgba(255,255,255,.16);
  background:var(--teal-900);
}
.mnav__phone{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--gold-400);font-weight:700;font-size:17px}

@media (min-width:1024px){ .mnav{display:none !important} }

/* Call button (header CTA linking to tel:) — icon only on small phones */
.nav__cta--call{display:inline-flex;gap:8px}
.nav__cta--call .ico{flex:none}
@media (max-width:479px){
  .nav__cta--call{width:44px;min-height:44px;padding:0;justify-content:center}
  .nav__cta--call .nav__cta-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* motion.css */
/* ===============================================================
   MOTION  ·  parts/motion.css
   ---------------------------------------------------------------
   All hover, press and reveal timing lives here.
   Rule: colour 150ms ease-out, transform and shadow 200ms.
   Cards lift 2px, buttons drop 1px on press.
   The grid motif and ring outlines never animate.
   =============================================================== */

/* Reveal: fades up gently on scroll. main.js adds the class. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* Inside a grid, one item at a time */
.reveal-stagger > *{opacity:0;transform:translateY(14px);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.reveal-stagger.is-in > *{opacity:1;transform:none}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:60ms}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:120ms}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:180ms}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:240ms}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:300ms}

/* Answer slides in gently when details opens */
.fq__row[open] .fq__a{animation:lbgOpen 220ms var(--ease)}
@keyframes lbgOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Reduced motion: everything off. Do not remove this block. */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
  .fq__row[open] .fq__a{animation:none}
}

/* rba.css */
/* =====================================================================
   CANBERRA RBA  ·  brand layer (header, footer, RBA sections, guide)
   Loaded on every page after main.css. Classes start with r / rba so
   they never clash with the engine sections.
   ===================================================================== */

/* =====================================================================
   CANBERRA RBA · HOME (v3, premium)
   Brand: Deep Teal #0F4C55 · Dark Teal #0A353B · Power Gold #E3A835
   Fonts (v2.8): Simplon Norm / Inter (all text) + Simplon Mono / IBM Plex Mono (labels, buttons, part numbers)
   Responsive: 320px phones to 2560px+ monitors, incl. short 13" laptops.
   ===================================================================== */
:root{
  --teal:#0F4C55; --teal-d:#0A353B; --teal-x:#072A2F; --teal-t:#E3EFF0; --teal-m:#1A6470;
  --gold:#E3A835; --gold-d:#C98F22; --gold-l:#F2C566; --gold-t:#FBF1DC;
  --red:#E02424; --blue:#1E6FE0;
  --bg:#F5F9F9; --text:#1F2A2E; --muted:#56676C; --line:#E3EFF0; --line2:#D3E3E5;
  --fh:'Simplon Norm','Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --fm:'Simplon Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fb:'Simplon Norm','Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --rl:22px;
  --sh:0 10px 30px rgba(10,53,59,.10),0 2px 6px rgba(10,53,59,.06);
  --shl:0 28px 70px rgba(10,53,59,.20);
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1240px; --gut:20px; --sec:72px; --hh:72px;
  --h2:clamp(28px,1.6vw + 18px,46px);
}
@media (min-width:768px){ :root{--gut:32px;--sec:96px} }
@media (min-width:1024px){ :root{--hh:80px} }
@media (min-width:1280px){ :root{--gut:48px;--sec:112px} }
@media (min-width:1536px){ :root{--gut:64px;--wrap:1320px} }
@media (min-width:1800px){ :root{--wrap:1400px;--sec:124px} }
@media (min-width:2300px){ :root{--wrap:1640px;--gut:80px} html{font-size:17px} }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 12px)}
html:not(.lenis){scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 clamp(16px,.15vw + 15.4px,18px)/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
h1,h2,h3{font-family:var(--fh);color:var(--teal);line-height:1.12;letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.rico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rwrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.rsec{padding:var(--sec) 0;position:relative;overflow:hidden}

/* Centered section heading (every section) */
.rsh{max-width:1080px;margin:0 auto clamp(36px,4vw,56px);text-align:center}
.rsh h2{font-size:var(--h2);font-weight:800}
.rsh h2 em{font-style:normal;color:var(--gold-d)}
.rsh p{font-size:clamp(16.5px,.3vw + 15.6px,19.5px);color:var(--muted);margin:14px auto 0;max-width:880px}
.rsh::after{content:none}
.rdark .rsh h2{color:#fff}
.rdark .rsh h2 em{color:var(--gold)}
.rdark .rsh p{color:#B9D3D6}

/* Buttons */
.rbtn{--b:var(--gold);--f:var(--teal-x);position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 26px;border-radius:12px;border:2px solid transparent;background:var(--b);color:var(--f);font:800 16px/1.1 var(--fh);letter-spacing:.01em;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s,color .25s,border-color .25s}
.rbtn svg{width:20px;height:20px;flex:none;transition:transform .3s var(--ease)}
.rbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-d);opacity:0;transition:opacity .3s}
.rbtn::after{content:none}
@media (hover:hover){ .rbtn:hover{box-shadow:0 6px 16px rgba(10,53,59,.18)} .rbtn:hover::before{opacity:1} .rbtn:hover svg{transform:translateX(2px)} }
.rbtn--o,.rbtn--w,.rbtn--t{}
.rbtn--o::after,.rbtn--w::after,.rbtn--t::after{display:none}
.rbtn--t{--b:var(--teal);--f:#fff}
.rbtn--t::before{background:var(--teal-d)}
@media (hover:hover){ .rbtn--t:hover{box-shadow:0 14px 30px rgba(10,53,59,.3)} }
.rbtn--o{--b:transparent;--f:var(--teal);border-color:var(--teal)}
.rbtn--o::before{background:var(--teal)}
@media (hover:hover){ .rbtn--o:hover{--f:#fff;box-shadow:0 14px 30px rgba(10,53,59,.22)} }
.rbtn--w{--b:rgba(255,255,255,.06);--f:#fff;border-color:rgba(255,255,255,.45)}
.rbtn--w::before{background:#fff}
@media (hover:hover){ .rbtn--w:hover{--f:var(--teal);border-color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.25)} }
.rbtn--s{min-height:44px;padding:10px 18px;font-size:14.5px}
.rbtn--l{min-height:58px;padding:15px 30px;font-size:17px}
.rrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.rrow--c{justify-content:center}
@media (max-width:599px){
  .rrow{flex-wrap:nowrap;gap:10px}
  .rrow>.rbtn{flex:1 1 0;min-width:0;min-height:52px;padding:12px 10px;font-size:14.5px;white-space:normal;text-align:center;line-height:1.2;gap:7px}
  .rrow>.rbtn svg{width:18px;height:18px}
}
.rdot{width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}80%,100%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}

/* Photo frames with brand fallback */
.rph{position:relative;overflow:hidden;background:linear-gradient(150deg,#145A64,#0A353B)}
.rph img{width:100%;height:100%;object-fit:cover}
.rph.noimg img{display:none}

/* Reveal on scroll */
/* v2.8: no entrance animation on every section; content is visible from the start */

/* Magnetic tilt cards */
.rtilt{transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}

/* =====================================================================
   HEADER + FULL-WIDTH MEGA MENU
   ===================================================================== */
.rhd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid rgba(15,76,85,.08);transition:box-shadow .35s,background-color .35s}
.rhd.stuck{box-shadow:0 10px 30px rgba(10,53,59,.12);background:rgba(255,255,255,.97)}
.rhdr__bar{display:flex;align-items:center;gap:16px;height:var(--hh)}
.rlogo{display:flex;align-items:center;flex:none}
.rlogo img{height:40px;width:auto;max-width:none}
.rlogo__one{height:44px!important}
.rlogo__full{display:none}
.rlogo__txt{font:900 19px/1.1 var(--fh);color:var(--teal)}
@media (min-width:1024px){ .rlogo__mark{display:none} .rlogo__full{display:block;height:60px!important} .rlogo__one{height:60px!important} }
.rnav{display:none;height:100%}
@media (min-width:1024px){
  .rhdr__bar{display:grid;grid-template-columns:1fr auto 1fr;gap:16px}
  .rlogo{justify-self:start}
  .rnav{display:flex;align-items:center;justify-self:center}
  .rhdr__cta{justify-self:end;margin-left:0!important}
}
.rnav__list{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(15,76,85,.05);border:1px solid rgba(15,76,85,.06)}
.rnav__link{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 11px;border-radius:999px;border:0;background:none;cursor:pointer;font:700 14px var(--fh);color:var(--teal);white-space:nowrap;transition:background-color .25s,color .25s,box-shadow .25s}
@media (min-width:1280px){ .rnav__link{padding:10px 15px;font-size:15px} }
@media (min-width:1536px){ .rnav__link{padding:10px 18px} }
.rnav__link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.rnav__link:hover,.rmm.open>.rnav__link{background:#fff;box-shadow:0 2px 8px rgba(10,53,59,.08)}
.rmm.open>.rnav__link svg{transform:rotate(180deg)}
.rnav__link.cur{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,76,85,.28)}
.rnav__link.cur::after{content:"";position:absolute;right:9px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--gold)}

.rmega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 30px 60px rgba(10,53,59,.18);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.rmm.open .rmega{opacity:1;visibility:visible;transform:none}
.rmega__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,300px);gap:16px;padding-top:26px;padding-bottom:30px}
@media (min-width:1280px){ .rmega__in{grid-template-columns:repeat(3,minmax(0,1fr)) 360px} }
@media (min-width:1536px){ .rmega__in{grid-template-columns:repeat(3,minmax(0,1fr)) 420px} }
.rmega__col{min-width:0}
.rmega__col{display:grid;gap:10px;align-content:start}
.rmega__h{font:800 12px var(--fh);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 12px 4px}
.rmi{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;transition:background-color .25s,transform .25s}
.rmi:hover{background:var(--bg);transform:translateX(4px)}
.rmi__t{width:64px;height:64px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--teal-t);color:var(--teal);overflow:hidden}
.rmi__t.rph{background:linear-gradient(150deg,#145A64,#0A353B)}
.rmi b{display:block;font:800 15.5px/1.25 var(--fh);color:var(--teal)}
.rmi small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.rmi:hover b{color:var(--gold-d)}
.rmpromo{position:relative;border-radius:18px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;min-height:250px}
.rmpromo .rph{position:absolute;inset:0}
.rmpromo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,53,59,.15),rgba(7,42,47,.94) 72%)}
.rmpromo>*:not(.rph){position:relative;z-index:1}
.rmpromo b{font:800 20px var(--fh);display:block}
.rmpromo p{font-size:14px;color:#D2E5E7;margin:6px 0 14px}
.rmpromo .rbtn{align-self:flex-start}

.rhdr__cta{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:1024px){ .rhdr__cta{margin-left:14px} }
.rhdr__call{display:none}
@media (min-width:560px){ .rhdr__call{display:inline-flex} }
.ricb{width:46px;height:46px;border-radius:12px;display:inline-grid;place-items:center;border:1px solid var(--line2);background:#fff;color:var(--teal);cursor:pointer}
.icb--g{background:var(--gold);border-color:var(--gold)}
@media (min-width:560px){ .rhdr__mcall{display:none} }
@media (min-width:1024px){ .rhdr__burger{display:none} }
.rburger{width:22px;height:16px;position:relative}
.rburger i{position:absolute;left:0;right:0;height:2.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s,top .3s var(--ease)}
.rburger i:nth-child(1){top:0}.rburger i:nth-child(2){top:7px}.rburger i:nth-child(3){top:14px}
.rmenu-open .rburger i:nth-child(1){top:7px;transform:rotate(45deg)}
.rmenu-open .rburger i:nth-child(2){opacity:0}
.rmenu-open .rburger i:nth-child(3){top:7px;transform:rotate(-45deg)}
.rhd__prog{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-l))}

.rdrawer{position:fixed;inset:0;z-index:150;visibility:hidden}
.rdrawer__bg{position:absolute;inset:0;background:rgba(7,42,47,.6);opacity:0;transition:opacity .3s}
.rdrawer__p{position:absolute;top:0;right:0;bottom:0;width:100%;background:#fff;transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column}
.rmenu-open .rdrawer{visibility:visible}
.rmenu-open .rdrawer__bg{opacity:1}
.rmenu-open .rdrawer__p{transform:none}
.rdrawer__top{display:flex;align-items:center;justify-content:space-between;padding:12px var(--gut);border-bottom:1px solid var(--line)}
.rdrawer__top img{height:38px;width:auto}
.rdrawer__b{flex:1;overflow-y:auto;padding:6px var(--gut) 16px;overscroll-behavior:contain}
.rdl,.rdacc>summary{display:flex;align-items:center;justify-content:space-between;padding:17px 2px;font-size:18px!important;border-bottom:1px solid var(--line);font:800 16px var(--fh);color:var(--teal);cursor:pointer;list-style:none}
.rdacc>summary::-webkit-details-marker{display:none}
.rdacc[open]>summary svg{transform:rotate(180deg)}
.rdacc__in{display:grid;padding:6px 0 10px}
.rdacc__in a{padding:10px;border-radius:10px;font-size:15px}
.rdacc__in a:hover{background:var(--bg)}
.rdrawer__f{padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--bg)}
.rdrawer__f .rbtn{white-space:normal;text-align:center;line-height:1.2;padding:12px 10px;font-size:14.5px}
.rdrawer__f .rbtn{width:100%}

/* =====================================================================
   01 HERO (dark teal, animated glow, real photo)
   ===================================================================== */
.rhero{position:relative;overflow:hidden;color:#fff;background:#0A353B;touch-action:pan-y}
.rhs__track{display:flex;transition:transform 1.4s cubic-bezier(.45,.05,.25,1);will-change:transform;backface-visibility:hidden}
.rhs{position:relative;flex:0 0 100%;min-width:0;overflow:hidden;opacity:.55;transition:opacity 1.4s ease;background:radial-gradient(900px 520px at var(--gx,85%) 12%,rgba(227,168,53,var(--ga,.22)),transparent 60%),radial-gradient(800px 600px at 0% 100%,var(--c3,rgba(26,100,112,.75)),transparent 60%),linear-gradient(135deg,var(--c1,#0A353B) 0%,var(--c2,#0F4C55) 55%,var(--c1,#0A353B) 100%)}
.rhs.is-on{opacity:1}
.rhs--2{--c1:#08303F;--c2:#0E4F63;--c3:rgba(30,111,224,.32);--gx:70%;--ga:.18}
.rhs--3{--c1:#09382F;--c2:#0F5548;--c3:rgba(26,120,100,.6);--gx:90%;--ga:.24}
.rhs--4{--c1:#0A2E3A;--c2:#11485A;--c3:rgba(34,197,170,.28);--gx:78%;--ga:.16}
.rhs--5{--c1:#061F25;--c2:#0B3A42;--c3:rgba(227,168,53,.16);--gx:60%;--ga:.3}
.hero__glow,.hero__grid-bg{display:none}

.hero__road{position:absolute;left:0;right:0;bottom:0;z-index:2;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 46px,transparent 46px 86px);opacity:.55;animation:road 1.6s linear infinite}
@keyframes road{to{background-position:86px 0}}
.hero__grid{position:relative;display:grid;gap:26px;padding-top:28px;padding-bottom:92px}
.hero__copy{min-width:0}
.hero__pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:600 14px var(--fb);color:#D7E8EA;margin-bottom:18px;backdrop-filter:blur(6px)}
.hero__h{color:#fff;font-size:clamp(34px,9vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.04}
.hero__h span{display:block;background:linear-gradient(90deg,var(--gold-l),var(--gold) 60%,var(--gold-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{font-size:clamp(16.5px,.3vw + 15.6px,20px);color:#C9DFE1;margin-top:16px;max-width:560px}
.rhero .rrow{margin-top:24px}
.hero__call{display:inline-flex;align-items:center;gap:12px;margin-top:24px;color:#B9D3D6;font-size:14.5px}
.hero__call i{width:46px;height:46px;border-radius:50%;background:rgba(227,168,53,.15);color:var(--gold);display:grid;place-items:center;font-style:normal;position:relative}
.hero__call i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(227,168,53,.4);animation:ripple 2.4s infinite}
@keyframes ripple{from{transform:scale(.85);opacity:1}to{transform:scale(1.35);opacity:0}}
.hero__call b{display:block;font:800 21px var(--fh);color:#fff}
@media (max-width:767px){ .hero__call{display:none} }
@media (max-width:1023px){
  .rhs{display:flex;flex-direction:column;min-height:calc(100vh - var(--hh))}
  @supports (height:100svh){ .rhs{min-height:calc(100svh - var(--hh))} }
  .rhs>.rwrap{flex:1;display:flex;flex-direction:column}
  .hero__grid{flex:1;display:flex;flex-direction:column;gap:clamp(20px,3.2svh,32px);padding-top:clamp(30px,5.5svh,52px);padding-bottom:clamp(80px,11svh,100px)}
  .hero__frame{flex:1 1 auto;display:flex;min-height:150px}
  .hero__media{aspect-ratio:auto;flex:1;height:auto;min-height:150px;max-height:62svh}
  .rhero .rrow{margin-top:clamp(16px,2.6svh,26px)}
  .hero__h{font-size:clamp(28px,min(8.4vw,5.4svh),46px)}
  .hero__lead{font-size:clamp(15px,min(4.1vw,2.3svh),19px);margin-top:clamp(10px,1.8svh,16px)}
  .hero__frame{flex:1 1 0}
  .rhs__ui{bottom:clamp(12px,2.2svh,22px)}
}
@media (max-width:1023px) and (max-height:600px){ .hero__frame,.hero__media{min-height:96px} .hero__grid{padding-top:22px;gap:16px} .hero__lead{font-size:14.5px;line-height:1.5} }
@media (max-width:1023px) and (max-height:700px){ .rhero .rrow>.rbtn{min-height:46px;padding:10px} .hero__grid{padding-bottom:70px} }
.hero__frame{position:relative;min-width:0}
.hero__frame::before{content:"";position:absolute;inset:-14px -14px auto auto;width:46%;height:46%;border-radius:26px;border:2px solid rgba(227,168,53,.5);pointer-events:none}
.hero__frame::after{content:"";position:absolute;left:-14px;bottom:-14px;width:120px;height:120px;border-radius:24px;background:radial-gradient(rgba(227,168,53,.55) 1.5px,transparent 1.6px);background-size:12px 12px;pointer-events:none}
@media (max-width:767px){ .hero__frame::before{inset:-10px -10px auto auto} .hero__frame::after{left:-10px;bottom:-10px;width:80px;height:80px} }
.hero__media{position:relative;width:100%;aspect-ratio:16/11;border-radius:var(--rl);overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.35);outline:1px solid rgba(255,255,255,.12);outline-offset:-1px;transform:scale(.97);opacity:.6;transition:transform 1.4s ease,opacity 1.4s ease}
.rhs.is-on .hero__media{transform:none;opacity:1}
.hero__media .rph{position:absolute;inset:0}
.hero__media img{transform-origin:55% 50%}
.rhs.is-on .hero__media img{}

.hx{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.rhs.is-on .hx{opacity:1;transform:none;transition-delay:calc(.5s + var(--i,0) * .12s)}
.rhs__ui{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px;border-radius:999px;background:rgba(7,42,47,.5);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rhs__arr{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .25s,color .25s}
.rhs__arr:hover{background:var(--gold);color:var(--teal-x)}
.rhs__arr svg{width:18px;height:18px}
.rhs__dots{display:flex;align-items:center;gap:4px}
.rhs__dot{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center;transition:width .45s var(--ease)}
.rhs__dot i{display:block;position:relative;overflow:hidden;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.35);transition:width .45s var(--ease)}
.rhs__dot.is-on{width:46px}
.rhs__dot.is-on i{width:40px}
.rhs__dot.is-on i::after{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:left;animation:dotfill var(--dur,5s) linear forwards}
.rhero.paused .rhs__dot.is-on i::after{animation-play-state:paused}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:1024px){
  .rhs{display:flex;align-items:center;min-height:calc(100vh - var(--hh))}
  @supports (height:100svh){ .rhs{min-height:calc(100svh - var(--hh))} }
  .rhs>.rwrap{width:100%}
  .hero__grid{grid-template-columns:1.05fr 1fr;gap:clamp(36px,4.5vw,84px);align-items:center;padding-top:clamp(24px,4vh,64px);padding-bottom:clamp(84px,11vh,120px)}
  .hero__h{font-size:clamp(40px,min(4.1vw,7.4vh),78px)}
  .hero__lead{font-size:clamp(16.5px,min(1.25vw,2.3vh),21px)}
  .hero__media{aspect-ratio:auto;height:min(540px,54vh)}
  .rhs__ui{bottom:clamp(20px,3.4vh,34px)}
}
@media (min-width:1024px) and (max-height:760px){ .hero__pill{margin-bottom:12px} .rhero .rrow{margin-top:20px} .hero__call{margin-top:14px} }

/* =====================================================================
   02 TRUST STRIP (gold marquee)
   ===================================================================== */
.rstrip{background:linear-gradient(90deg,var(--gold-d),var(--gold) 30%,var(--gold-l) 50%,var(--gold) 70%,var(--gold-d));color:var(--teal-x);overflow:hidden;position:relative}
.strip__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.rstrip:hover .strip__track{animation-play-state:paused}
.strip__i{display:inline-flex;align-items:center;gap:10px;padding:18px 30px;font:800 15px var(--fh);white-space:nowrap;border:0;background:none;color:inherit}
.strip__i svg{width:20px;height:20px}
.strip__i+.strip__i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal-x);opacity:.35;margin-right:20px}
.strip__btn{cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
@keyframes marq{to{transform:translateX(-50%)}}

/* =====================================================================
   03 PAIN → SOLUTION (flip cards)
   ===================================================================== */
.rpain{background:#fff}
.rpain::before{content:"";position:absolute;top:-200px;left:50%;width:900px;height:500px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(15,76,85,.07),transparent);pointer-events:none}
.rflips{display:grid;gap:20px}
@media (min-width:860px){ .rflips{grid-template-columns:repeat(3,1fr);gap:24px} }
.rflip{display:block;width:100%;font:inherit;color:inherit;perspective:1400px;min-height:320px;cursor:pointer;border:0;padding:0;background:none;text-align:center}
.flip__in{display:block;position:relative;width:100%;height:100%;min-height:320px;transform-style:preserve-3d;transition:transform .8s var(--spring)}
.rflip.is-on .flip__in{transform:rotateY(180deg)}
.flip__f,.flip__b{position:absolute;inset:0;border-radius:var(--rl);padding:32px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip__f{background:linear-gradient(160deg,#FFF6F6,#FDECEC);border:1px solid #F7D4D4}
.flip__b{background:linear-gradient(160deg,var(--teal),var(--teal-d));color:#D7E8EA;transform:rotateY(180deg);box-shadow:var(--shl)}
.flip__ic{width:66px;height:66px;border-radius:20px;display:grid;place-items:center}
.flip__f .flip__ic{background:#fff;color:var(--red);box-shadow:0 8px 20px rgba(224,36,36,.15)}
.flip__b .flip__ic{background:var(--gold);color:var(--teal-x)}
.flip__ic svg{width:30px;height:30px}
.rflip small{font:800 11.5px var(--fh);letter-spacing:.14em;text-transform:uppercase}
.flip__f small{color:var(--red)}
.flip__b small{color:var(--gold)}
.rflip h3{font-size:22px}
.flip__b h3{color:#fff}
.rflip p{font-size:15.5px;max-width:300px}
.flip__f p{color:var(--muted)}
.flip__hint{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font:700 13px var(--fh);color:var(--teal)}
.flip__hint svg{width:16px;height:16px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
@media (hover:hover){ .rflip:hover:not(.is-on) .flip__in{transform:rotateY(10deg) translateY(-4px)} }

/* =====================================================================
   04 SERVICES (photo cards with reveal)
   ===================================================================== */
.svc-sec{background:linear-gradient(180deg,var(--teal-t),#F1F7F7)}
.rsvc{display:grid;gap:20px}
@media (min-width:640px){ .rsvc{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .rsvc{grid-template-columns:repeat(4,1fr);gap:22px} }
.rsv{position:relative;border-radius:var(--rl);overflow:hidden;min-height:clamp(340px,40vw,440px);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;isolation:isolate;box-shadow:var(--sh);text-align:center}
.rsv .rph{position:absolute;inset:0;z-index:-2}
.rsv .rph img{transition:transform 1s var(--ease)}
.rsv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,42,47,.05) 25%,rgba(7,42,47,.92) 70%);transition:background .5s}
.sv__b{padding:24px 22px 24px}
.rsv h3{color:#fff;font-size:22px}
.rsv p{font-size:15px;color:#D2E5E7;margin-top:6px}
.sv__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.sv__more>div{overflow:hidden}
.rsv ul{display:grid;gap:6px;margin:14px 0 4px;text-align:left;font-size:14.5px}
.rsv li{display:flex;gap:8px;align-items:center;color:#E6F1F2}
.rsv li svg{width:17px;height:17px;color:var(--gold)}
.sv__btn{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font:700 14px var(--fh);cursor:pointer;backdrop-filter:blur(6px);transition:background-color .25s,color .25s}
.sv__btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.rsv.open .sv__more{grid-template-rows:1fr}
.rsv.open .sv__btn{background:var(--gold);color:var(--teal-x);border-color:var(--gold)}
.rsv.open .sv__btn svg{transform:rotate(45deg)}
.rsv.open::after{background:linear-gradient(180deg,rgba(7,42,47,.35),rgba(7,42,47,.95) 45%)}
@media (hover:hover){ .rsv:hover .rph img{transform:scale(1.08)} }
.rtag{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:1;padding:6px 12px;border-radius:999px;background:var(--gold);color:var(--teal-x);font:800 11.5px var(--fh);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

/* =====================================================================
   05 QUICK CHECK (dark, glass)
   ===================================================================== */
.rdark{background:radial-gradient(800px 500px at 100% 0%,rgba(227,168,53,.14),transparent 60%),linear-gradient(160deg,var(--teal-d),var(--teal-x));color:#D7E8EA}
.rpick{display:grid;gap:22px}
@media (min-width:1024px){ .rpick{grid-template-columns:1fr 1fr;gap:28px;align-items:stretch} }
.rpick>*{min-width:0}
.ropts{display:grid;gap:12px}
@media (min-width:520px){ .ropts{grid-template-columns:1fr 1fr} }
.ropt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);cursor:pointer;font:700 15.5px/1.3 var(--fh);color:#fff;transition:all .3s var(--ease);backdrop-filter:blur(6px)}
.ropt i{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-style:normal;color:var(--gold);transition:all .3s var(--ease)}
.ropt:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(227,168,53,.5)}
.ropt[aria-pressed="true"]{background:linear-gradient(160deg,rgba(227,168,53,.22),rgba(227,168,53,.08));border-color:var(--gold);box-shadow:0 0 0 4px rgba(227,168,53,.12)}
.ropt[aria-pressed="true"] i{background:var(--gold);color:var(--teal-x);transform:scale(1.08)}
.rans{position:relative;border-radius:var(--rl);overflow:hidden;color:#fff;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;padding:clamp(24px,3vw,40px);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.rans .rph{position:absolute;inset:0}
.rans::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,42,47,.2),rgba(7,42,47,.96) 62%)}
.ans__b{position:relative;z-index:1;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rans small{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(227,168,53,.18);font:800 12px var(--fh);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.rans h3{color:#fff;font-size:clamp(23px,1vw + 17px,30px)}
.rans p{color:#D2E5E7;margin:10px auto 0;max-width:560px}
.rans .rrow{justify-content:center;margin-top:22px}

/* =====================================================================
   06 HOW IT WORKS (cards + animated rail)
   ===================================================================== */
.rhow{background:#fff}
.rsteps{position:relative;display:grid;gap:18px}
@media (min-width:900px){ .rsteps{grid-template-columns:repeat(var(--n,4),1fr);gap:20px} }
.rrail{display:none}
@media (min-width:900px){
  .rrail{display:block;position:absolute;left:10%;right:10%;top:52px;height:4px;border-radius:4px;background:var(--line2);overflow:hidden}
  .rrail i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
  .rsteps.in .rrail i{transform:scaleX(1)}
}
.rst{position:relative;text-align:center;padding:26px 20px 26px;border-radius:var(--rl);background:var(--bg);border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s,background-color .4s}
@media (hover:hover){ .rst:hover{transform:translateY(-8px);box-shadow:var(--shl);background:#fff} .rst:hover .rst__n{background:var(--gold);color:var(--teal-x);transform:rotate(-8deg)} }
.rst__n{position:relative;z-index:1;width:56px;height:56px;margin:0 auto 16px;border-radius:16px;background:var(--teal);color:#fff;display:grid;place-items:center;transition:all .4s var(--spring)}
.rst__n svg{width:26px;height:26px}
.rst__k{position:absolute;top:14px;right:18px;font:900 40px/1 var(--fh);color:rgba(15,76,85,.07)}
.rst h3{font-size:18.5px}
.rst p{font-size:15px;color:var(--muted);margin-top:6px}

/* =====================================================================
   07 WHY RBA (gold tint, stats)
   ===================================================================== */
.why-sec{background:linear-gradient(180deg,var(--gold-t),#FFF9EE)}
.rwhy{display:grid;gap:36px;align-items:center}
@media (min-width:1024px){ .rwhy{grid-template-columns:1fr 1fr;gap:56px} }
.rwhy>*{min-width:0}
.rwhy__img{position:relative;border-radius:var(--rl);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shl)}
.rwhy__img .rph{position:absolute;inset:0}
.rstamp{position:absolute;right:18px;top:18px;width:118px;height:118px;border-radius:50%;background:var(--gold);color:var(--teal-x);display:grid;place-items:center;text-align:center;font:900 12.5px/1.2 var(--fh);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 12px 30px rgba(0,0,0,.25);animation:spin 18s linear infinite}
.rstamp span{display:block;animation:spin 18s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.rnums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rnum{padding:24px 16px;border-radius:18px;background:#fff;text-align:center;box-shadow:var(--sh);border:1px solid rgba(227,168,53,.25);transition:transform .35s var(--ease)}
.rnum:hover{transform:translateY(-6px)}
.rnum b{display:block;font:900 clamp(30px,2.2vw + 14px,46px)/1 var(--fh);color:var(--teal)}
.rnum b em{font-style:normal;color:var(--gold-d)}
.rnum>span{display:block;margin-top:8px;font:700 14px var(--fh);color:var(--teal)}
.rnum small{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.rtrust{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.rtrust span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(227,168,53,.35);font:700 14px var(--fh);color:var(--teal)}
.rtrust svg{width:18px;height:18px;color:var(--gold-d)}

/* =====================================================================
   08 BATTERY TYPES (dark tabs)
   ===================================================================== */
.rtypes{background:linear-gradient(160deg,var(--teal),var(--teal-d))}
.rtabs__l{display:flex;gap:6px;overflow-x:auto;padding:6px;margin:0 auto 26px;width:max-content;max-width:100%;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);scrollbar-width:none}
.rtabs__l::-webkit-scrollbar{display:none}
.rtab{flex:none;padding:11px 20px;border-radius:999px;border:0;background:none;font:800 14.5px var(--fh);color:#CFE2E4;cursor:pointer;transition:all .3s var(--ease)}
.rtab:hover{color:#fff}
.rtab[aria-selected="true"]{background:var(--gold);color:var(--teal-x);box-shadow:0 8px 20px rgba(227,168,53,.35)}
.rpanel{display:grid;background:#fff;border-radius:var(--rl);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.25)}
@media (min-width:900px){ .rpanel{grid-template-columns:1fr 1fr} }
.rpanel[hidden]{display:none}
.rpanel.is-on{animation:fade .5s var(--ease)}
.panel__img{aspect-ratio:16/10}
@media (min-width:900px){ .panel__img{aspect-ratio:auto;min-height:360px} }
.panel__b{padding:clamp(24px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.panel__b h3{font-size:clamp(23px,1vw + 17px,30px)}
.panel__b p{color:var(--muted);margin-top:8px;max-width:520px}
.rchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 24px}
.rchips span{padding:8px 13px;border-radius:999px;background:var(--teal-t);color:var(--teal);font:600 13.5px var(--fb)}

/* =====================================================================
   09 AREAS (photo bg + interactive suburbs)
   ===================================================================== */
.rareas{color:#fff;text-align:center}
.rareas>.rph{position:absolute;inset:-60px 0;z-index:0}
.rareas::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(7,42,47,.88),rgba(7,42,47,.78) 50%,rgba(7,42,47,.92))}
.rareas .rwrap{position:relative;z-index:1}
.ralist{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto}
.rachip{padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;font:800 15px var(--fh);cursor:pointer;transition:all .3s var(--ease)}
.rachip:hover{border-color:var(--gold);transform:translateY(-2px)}
.rachip[aria-pressed="true"]{background:var(--gold);color:var(--teal-x);border-color:var(--gold);box-shadow:0 10px 24px rgba(227,168,53,.35)}
.rabox{max-width:780px;margin:22px auto 0;padding:24px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.rabox b{display:block;font:800 20px var(--fh);color:var(--gold)}
.rabox p{margin-top:8px;color:#D7E8EA}
.rabox .rrow{justify-content:center;margin-top:18px}

/* =====================================================================
   10 REVIEWS (carousel)
   ===================================================================== */
.rev{background:#fff}
.rgsum{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;border-radius:999px;background:var(--bg);border:1px solid var(--line);margin-top:18px}
.rgsum b{font:900 24px var(--fh);color:var(--teal)}
.rstars{display:inline-flex;gap:2px;color:var(--gold)}
.rstars svg{width:18px;height:18px;fill:currentColor;stroke:none}
.rcar{position:relative}
.rcar__t{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 4px 22px;scrollbar-width:none}
.rcar__t::-webkit-scrollbar{display:none}
.rrev{scroll-snap-align:center;flex:0 0 min(380px,84vw);padding:28px 24px;border-radius:var(--rl);background:linear-gradient(180deg,#fff,var(--bg));border:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .35s var(--ease),box-shadow .35s}
.rrev:hover{transform:translateY(-6px);box-shadow:var(--shl)}
.rrev q{font-size:16.5px;line-height:1.55;color:var(--text);quotes:none}
.rrev__q{font:900 56px/0.6 Georgia,serif;color:var(--gold);height:22px}
.rrev__a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--fh);color:#fff;background:var(--teal);margin-top:auto}
.rrev b{font:800 15px var(--fh);color:var(--teal)}
.rrev small{font-size:13px;color:var(--muted);margin-top:-8px}
.rcar__nav{display:flex;justify-content:center;gap:10px;margin-top:8px}
.rcar__nav button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line2);background:#fff;color:var(--teal);cursor:pointer;display:grid;place-items:center;transition:all .25s}
.rcar__nav button:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.rcar__nav svg{width:20px;height:20px}
.rnote{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}

/* =====================================================================
   11 FLEET (gold band)
   ===================================================================== */
.fleet-sec{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-l) 100%)}
.fleet-sec .rsh h2{color:var(--teal-x)}
.fleet-sec .rsh h2 em{color:#fff}
.fleet-sec .rsh p{color:#3D3215}

.rfleet{display:grid;gap:22px}
@media (min-width:900px){ .rfleet{grid-template-columns:1.2fr 1fr 1fr} }
.rfleet>*{min-width:0}
.fl-img{border-radius:var(--rl);overflow:hidden;min-height:280px;box-shadow:0 30px 60px rgba(90,60,0,.3)}
.rfl{padding:28px 24px;border-radius:var(--rl);background:var(--teal-x);color:#CFE2E4;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .35s var(--ease)}
.rfl:hover{transform:translateY(-6px)}
.rfl i{width:56px;height:56px;border-radius:16px;background:var(--gold);color:var(--teal-x);display:grid;place-items:center;font-style:normal}
.rfl h3{color:#fff;font-size:19px}
.rfl p{font-size:15px}
.rfl ul{display:grid;gap:8px;margin-top:4px;text-align:left}
.rfl li{display:flex;gap:8px;align-items:center;font-size:14.5px}
.rfl li svg{width:16px;height:16px;color:var(--gold)}
.fleet-sec .rrow{justify-content:center}

/* =====================================================================
   12 GUIDE (hover reveal cards)
   ===================================================================== */
.rguide{background:var(--bg)}
.rblog{display:grid;gap:22px}
@media (min-width:700px){ .rblog{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .rblog{grid-template-columns:repeat(3,1fr)} }
.rpost{display:flex;flex-direction:column;border-radius:var(--rl);overflow:hidden;background:#fff;border:1px solid var(--line);text-align:center;transition:transform .4s var(--ease),box-shadow .4s}
@media (hover:hover){ .rpost:hover{transform:translateY(-8px);box-shadow:var(--shl)} .rpost:hover .rpost__img img{transform:scale(1.08)} }
.rpost__img{aspect-ratio:16/10}
.rpost__img img{transition:transform .9s var(--ease)}
.rpost__b{padding:22px 22px 24px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.rpost__m{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--gold-t);font:700 12px var(--fh);color:#8A5A06}
.rpost h3{font-size:19px;line-height:1.3}
.rpost .lnk{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:800 14.5px var(--fh);color:var(--teal)}
.rpost .lnk svg{width:17px;height:17px;transition:transform .3s}
.rpost:hover .lnk svg{transform:translateX(5px)}

/* =====================================================================
   13 FAQ (tint)
   ===================================================================== */
.faq-sec{background:linear-gradient(180deg,#fff,var(--teal-t))}
.racc{display:grid;gap:12px;max-width:860px;margin:0 auto}
.racc details{background:#fff;border:1px solid var(--line);border-radius:16px;transition:box-shadow .3s,border-color .3s}
.racc details[open]{box-shadow:var(--sh);border-color:rgba(227,168,53,.6)}
.racc summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 22px;cursor:pointer;list-style:none;font:800 16.5px/1.35 var(--fh);color:var(--teal)}
.racc summary::-webkit-details-marker{display:none}
.racc summary i{width:32px;height:32px;border-radius:50%;background:var(--teal-t);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background-color .3s;font-style:normal}
.racc summary i svg{width:16px;height:16px}
.racc details[open] summary i{transform:rotate(45deg);background:var(--gold)}
.racc .ra{padding:0 22px 20px;color:var(--muted);font-size:15.5px}
.racc details[open] .ra{animation:fade .35s var(--ease)}

/* =====================================================================
   14 QUOTE (dark split)
   ===================================================================== */
.rquote{display:grid;gap:30px}
@media (min-width:1024px){ .rquote{grid-template-columns:.85fr 1.15fr;gap:48px;align-items:stretch} }
.rquote>*{min-width:0}
.rcinfo{display:grid;gap:12px;align-content:center}
.rci{display:flex;gap:14px;align-items:center;padding:18px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .3s var(--ease)}
.rci:hover{background:rgba(255,255,255,.12);transform:translateX(6px)}
.rci i{width:50px;height:50px;border-radius:14px;background:var(--gold);color:var(--teal-x);display:grid;place-items:center;flex:none;font-style:normal}
.rci b{display:block;color:#fff;font:800 17px var(--fh)}
.rci span{font-size:14px;color:#A9C8CC}
.rform{background:#fff;color:var(--text);border-radius:var(--rl);padding:clamp(22px,3vw,36px);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.rform h3{color:var(--teal);font-size:22px;margin-bottom:16px;text-align:center}
.rfg{display:grid;gap:12px}
@media (min-width:600px){ .rfg{grid-template-columns:1fr 1fr} .rfg .full{grid-column:1/-1} }
.rf label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;color:var(--teal)}
.rf input,.rf select,.rf textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line2);background:var(--bg);font-size:16px;transition:border-color .2s,box-shadow .2s}
.rf textarea{min-height:84px;resize:vertical}
.rf input:focus,.rf select:focus,.rf textarea:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(15,76,85,.12)}
.rf.is-err input{border-color:var(--red)}
.rlocin{display:flex;gap:8px}
.rlocin input{flex:1;min-width:0}
.rlocin button{flex:none;width:50px;border-radius:12px;border:1.5px solid var(--teal);background:#fff;color:var(--teal);cursor:pointer;display:grid;place-items:center}
.rform .rbtn{width:100%;margin-top:16px}
.is-ok{display:none;text-align:center;padding:30px 8px}
.is-ok svg{width:64px;height:64px;color:#16A34A;margin:0 auto 12px}
.rform.done .rfg,.rform.done>.rbtn,.rform.done>h3{display:none}
.rform.done .is-ok{display:block;animation:fade .5s var(--ease)}

/* =====================================================================
   15 FINAL CTA (photo, parallax)
   ===================================================================== */
.rfinal{color:#fff;text-align:center;padding:clamp(80px,9vw,140px) 0}
.rfinal>.rph{position:absolute;inset:-80px 0;z-index:0}
.rfinal::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(700px 400px at 50% 40%,rgba(227,168,53,.2),transparent 70%),rgba(7,42,47,.88)}
.rfinal .rwrap{position:relative;z-index:1;max-width:1040px}
.rfinal h2{color:#fff;font-size:clamp(30px,2.4vw + 18px,58px);font-weight:900}
.rfinal p{color:#C9DFE1;margin-top:12px;font-size:18px}
.rfinal__ph{display:inline-flex;align-items:center;gap:14px;margin-top:22px;font:900 clamp(32px,2.8vw + 16px,64px) var(--fh);color:var(--gold)}
.rfinal__ph svg{width:1em;height:1em;animation:ring 2.6s infinite}
@keyframes ring{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-14deg)}70%{transform:rotate(14deg)}75%{transform:rotate(-10deg)}80%{transform:rotate(8deg)}85%{transform:rotate(0)}}
.rfinal .rrow{justify-content:center}

/* FOOTER */
.rfoot{position:relative;overflow:hidden;background:var(--teal-x);color:#A9C8CC;padding:clamp(56px,6vw,88px) 0 0;font-size:15px}
.rfoot__g{display:grid;gap:34px}
@media (max-width:1099px){ .rfoot__g{grid-template-columns:1fr 1fr;gap:30px 20px} .rfoot__g>div:first-child,.rfoot__g>div:last-child{grid-column:1/-1} }
@media (min-width:1100px){ .rfoot__g{grid-template-columns:1.4fr;grid-auto-flow:column;grid-auto-columns:1fr;gap:44px} .rfoot__g>div:last-child{min-width:240px} }
.rfoot__logo img{width:200px;height:auto}
.rfoot__ab{margin-top:16px;max-width:340px;line-height:1.65}
.rfoot h4{margin:0 0 14px;color:#fff;font:800 14px var(--fh);letter-spacing:.08em;text-transform:uppercase}
.rfoot__l{display:grid;gap:2px}
.rfoot__l a{padding:5px 0;transition:color .2s,transform .2s;display:inline-block}
.rfoot__l a:hover{color:var(--gold);transform:translateX(4px)}
.rfoot__n{display:grid;gap:12px}
.rfoot__n a,.rfoot__n div{display:flex;gap:10px;align-items:flex-start}
.rfoot__n svg{color:var(--gold);width:19px;height:19px;margin-top:3px}
.rsoc{display:flex;gap:10px;margin-top:20px}
.rsoc a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff;transition:all .25s}
.rsoc a:hover{background:var(--gold);color:var(--teal);transform:translateY(-3px)}
.rsoc svg{width:19px;height:19px}
.rfoot__bar{margin-top:48px;border-top:1px solid rgba(255,255,255,.1);padding:20px 0 calc(20px + 76px);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13.5px}
@media (min-width:768px){ .rfoot__bar{padding-bottom:22px} }
.rfoot__bar nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.rfoot__bar a:hover{color:#fff}

/* Mobile action bar + back to top */
.rmbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1.25fr .9fr 1.25fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(10,53,59,.14);transform:translateY(110%);transition:transform .4s var(--ease)}
.rmbar.show{transform:none}
.rmbar a{min-height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;font:800 14.5px var(--fh);white-space:nowrap}
.rmbar svg{width:19px;height:19px}
.rmbar__c{background:var(--gold);color:var(--teal-x)}
.rmbar__s,.rmbar__w{background:var(--teal);color:#fff}
@media (max-width:374px){ .rmbar a{font-size:13px} }
@media (min-width:768px){ .rmbar{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.hx{opacity:1;transform:none}
}


/* =====================================================================
   INNER PAGES (About · Guide · Contact · Single guide)
   ===================================================================== */
.phero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 520px at 85% 10%,rgba(227,168,53,.22),transparent 60%),radial-gradient(800px 600px at 0% 100%,rgba(26,100,112,.75),transparent 60%),linear-gradient(135deg,#0A353B 0%,#0F4C55 55%,#0A353B 100%)}
.phero__in{position:relative;display:grid;gap:34px;align-items:center;padding-top:clamp(34px,5vw,72px);padding-bottom:clamp(60px,7vw,104px)}
@media (min-width:1024px){ .phero__in{grid-template-columns:1.05fr 1fr;gap:clamp(36px,4.5vw,84px)} }
.phero--c .phero__in{grid-template-columns:1fr;text-align:center;justify-items:center}
.phero__copy{min-width:0}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:600 14px var(--fb);color:#A9C8CC;margin-bottom:18px}
.phero--c .crumb{justify-content:center}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--gold)}
.crumb svg{width:14px;height:14px;opacity:.7}
.crumb b{color:#fff;font-weight:600}
.phero h1{color:#fff;font-size:clamp(34px,3.2vw + 16px,68px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.phero h1 span{display:block;background:linear-gradient(90deg,var(--gold-l),var(--gold) 60%,var(--gold-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.phero__lead{color:#C9DFE1;font-size:clamp(16.5px,.35vw + 15.5px,20px);margin-top:16px;max-width:600px}
.phero--c .phero__lead{margin-left:auto;margin-right:auto;max-width:820px}
.phero--c .rrow{justify-content:center}
.phero .hero__media{transform:none;opacity:1;aspect-ratio:16/11;flex:none;min-height:0;max-height:none;height:auto}
.phero .hero__media img{}
.phero .hero__frame{display:block;min-height:0}
@media (min-width:1024px){ .phero .hero__media{aspect-ratio:auto;height:clamp(320px,30vw,470px)} }
.phero__ph{display:inline-flex;align-items:center;gap:14px;margin-top:22px;font:900 clamp(30px,2.6vw + 16px,58px) var(--fh);color:var(--gold)}
.phero__ph svg{width:1em;height:1em;animation:ring 2.6s infinite}
.phero__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.phero--c .phero__badges{justify-content:center}
.phero__badges span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:700 14px var(--fh);color:#E6F1F2;backdrop-filter:blur(6px)}
.phero__badges svg{width:17px;height:17px;color:var(--gold)}
@media (max-width:599px){ .phero__badges span{font-size:13px;padding:8px 12px} }

/* ---------- ABOUT ---------- */
.story{display:grid;gap:34px;align-items:center}
@media (min-width:1024px){ .story{grid-template-columns:1fr 1fr;gap:60px} }
.story>*{min-width:0}
.story__img{position:relative;border-radius:var(--rl);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shl)}
.story__img .rph{position:absolute;inset:0}
.story__txt{text-align:center}
.story__txt p{color:var(--muted);margin-top:14px;font-size:clamp(16px,.2vw + 15.5px,17.5px)}
.story__txt .big{margin-top:0;font:700 clamp(19px,.6vw + 16px,24px)/1.45 var(--fh);color:var(--teal)}
.sign{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:14px 22px 14px 14px;border-radius:999px;background:var(--teal-t)}
.sign img{width:52px;height:52px;border-radius:50%;background:#fff;padding:6px;object-fit:contain}
.sign b{display:block;font:800 16px var(--fh);color:var(--teal);text-align:left}
.sign small{display:block;font-size:13.5px;color:var(--muted);text-align:left}
.goldband{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-l) 100%)}
.goldband .rsh h2{color:var(--teal-x)}
.goldband .rsh h2 em{color:#fff}
.goldband .rsh p{color:#3D3215}

.nums--4{grid-template-columns:1fr 1fr}
@media (min-width:900px){ .nums--4{grid-template-columns:repeat(4,1fr);gap:20px} }
.goldband .rnum{border-color:rgba(255,255,255,.6)}
.vals{display:grid;gap:18px}
@media (min-width:640px){ .vals{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .vals{grid-template-columns:repeat(4,1fr);gap:20px} }
.val{position:relative;padding:32px 24px;border-radius:var(--rl);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);text-align:center;cursor:pointer;transition:transform .4s var(--ease),border-color .3s,background-color .3s;backdrop-filter:blur(6px)}
.val:hover{transform:translateY(-8px);border-color:rgba(227,168,53,.6);background:rgba(255,255,255,.09)}
.val i{width:62px;height:62px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;background:rgba(227,168,53,.14);color:var(--gold);font-style:normal;transition:all .4s var(--spring)}
.val:hover i{background:var(--gold);color:var(--teal-x);transform:rotate(-8deg) scale(1.06)}
.val i svg{width:28px;height:28px}
.val h3{color:#fff;font-size:20px}
.val p{color:#B9D3D6;font-size:15px;margin-top:8px}
.val__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.val__more>div{overflow:hidden}
.val__more p{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.18);color:#E6F1F2}
.val.open .val__more{grid-template-rows:1fr}
.val__tg{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font:800 13px var(--fh);color:var(--gold)}
.val__tg svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.val.open .val__tg svg{transform:rotate(45deg)}
.proms{display:grid;gap:16px}
@media (min-width:700px){ .proms{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .proms{grid-template-columns:repeat(3,1fr);gap:20px} }
.prom{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 22px;border-radius:var(--rl);background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(10,53,59,.05);transition:transform .4s var(--ease),box-shadow .4s}
.prom:hover{transform:translateY(-6px);box-shadow:var(--shl)}
.prom i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--gold-t);color:var(--gold-d);font-style:normal}
.prom h3{font-size:18.5px}
.prom p{font-size:15px;color:var(--muted)}
.van{display:grid;gap:34px;align-items:center}
@media (min-width:1024px){ .van{grid-template-columns:1fr 1fr;gap:60px} }
.van>*{min-width:0}
.van__img{border-radius:var(--rl);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shl)}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kit button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;border-radius:16px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font:800 14.5px/1.3 var(--fh);color:var(--teal);transition:all .3s var(--ease);text-align:center}
.kit button i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--teal);font-style:normal;transition:all .3s}
.kit button:hover{transform:translateY(-3px);border-color:var(--gold)}
.kit button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.kit button[aria-pressed="true"] i{background:var(--gold);color:var(--teal-x)}
.kit__out{margin-top:14px;padding:20px 22px;border-radius:16px;background:var(--gold-t);border:1px solid rgba(227,168,53,.4);text-align:center;color:#5B4310;font-size:15.5px;min-height:84px;display:grid;place-items:center}
.kit__out b{color:var(--teal)}

/* ---------- GUIDE (blog list) ---------- */
.gsearch{position:relative;width:100%;max-width:580px;margin:28px auto 0}
.gsearch input{width:100%;min-height:58px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:#fff;padding:0 22px 0 54px;font-size:16px;backdrop-filter:blur(8px);transition:border-color .2s,background-color .2s}
.gsearch input::placeholder{color:#A9C8CC}
.gsearch input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.13)}
.gsearch svg{position:absolute;z-index:1;pointer-events:none;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gold)}
.gcats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 30px}
.gcat{padding:10px 18px;border-radius:999px;border:1px solid var(--line2);background:#fff;font:800 14px var(--fh);color:var(--teal);cursor:pointer;transition:all .3s var(--ease)}
.gcat:hover{border-color:var(--gold);transform:translateY(-2px)}
.gcat[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 8px 20px rgba(15,76,85,.25)}
.gcat small{font:700 12px var(--fb);opacity:.7;margin-left:4px}
.feat{display:grid;border-radius:var(--rl);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:26px;transition:transform .4s var(--ease),box-shadow .4s}
@media (min-width:900px){ .feat{grid-template-columns:1.15fr 1fr} }
@media (hover:hover){ .feat:hover{transform:translateY(-6px);box-shadow:var(--shl)} .feat:hover .feat__img img{transform:scale(1.06)} }
.feat__img{aspect-ratio:16/10}
@media (min-width:900px){ .feat__img{aspect-ratio:auto;min-height:380px} }
.feat__img img{transition:transform .9s var(--ease)}
.feat__b{padding:clamp(24px,3.4vw,52px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px}
.feat__b h2{font-size:clamp(24px,1.2vw + 16px,36px)}
.feat__b p{color:var(--muted);max-width:480px}
.feat__tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ftag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:800 12px var(--fh);letter-spacing:.06em;text-transform:uppercase}
.ftag--g{background:var(--gold);color:var(--teal-x)}
.ftag--t{background:var(--teal-t);color:var(--teal)}
.rpost__ex{font-size:15px;color:var(--muted)}
.rpost[hidden],.feat[hidden]{display:none}
.askcard{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:32px 24px;border-radius:var(--rl);color:#D7E8EA;background:radial-gradient(500px 300px at 100% 0%,rgba(227,168,53,.2),transparent 60%),linear-gradient(160deg,var(--teal),var(--teal-d))}
.askcard i{width:62px;height:62px;border-radius:18px;background:var(--gold);color:var(--teal-x);display:grid;place-items:center;font-style:normal}
.askcard h3{color:#fff;font-size:22px}
.askcard p{font-size:15px}
.askcard .rbtn{margin-top:6px}
.gempty{text-align:center;color:var(--muted);padding:40px 10px;font-size:17px}
.nlband{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-l) 100%)}
.nl{display:flex;gap:10px;max-width:560px;margin:0 auto}
.nl input{flex:1;min-width:0;min-height:56px;padding:0 20px;border-radius:14px;border:2px solid transparent;background:#fff;font-size:16px}
.nl input:focus{outline:none;border-color:var(--teal)}
.nl.is-err input{border-color:var(--red)}
.nl .rbtn{flex:none}
.nl__ok{display:none;text-align:center;font:800 17px var(--fh);color:var(--teal-x)}
.nl.done{display:none}
.nl.done + .nl__ok{display:block}
@media (max-width:520px){ .nl{flex-direction:column} .nl .rbtn{width:100%} }

/* ---------- CONTACT ---------- */
.cways{display:grid;gap:16px}
@media (min-width:640px){ .cways{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .cways{grid-template-columns:repeat(5,1fr);gap:18px} }
.cw{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 20px;border-radius:var(--rl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh);cursor:pointer;font:inherit;color:inherit;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.cw i{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--teal);color:#fff;font-style:normal;transition:all .4s var(--spring)}
.cw i svg{width:28px;height:28px}
.cw b{font:800 18px var(--fh);color:var(--teal)}
.cw span{font-size:14.5px;color:var(--muted)}
.cw em{font:800 14px var(--fh);font-style:normal;color:var(--gold-d);margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px}
.cw em svg{width:16px;height:16px;transition:transform .3s}
@media (hover:hover){ .cw:hover{transform:translateY(-8px);box-shadow:var(--shl);border-color:var(--gold)} .cw:hover i{background:var(--gold);color:var(--teal-x);transform:rotate(-8deg)} .cw:hover em svg{transform:translateX(4px)} }
.cw--hot{background:linear-gradient(160deg,var(--teal),var(--teal-d));border-color:var(--teal)}
.cw--hot i{background:var(--gold);color:var(--teal-x)}
.cw--hot b{color:#fff}
.cw--hot span{color:#B9D3D6}
.cw--hot em{color:var(--gold)}
@media (max-width:1179px) and (min-width:640px){ .cways .cw:last-child{grid-column:1/-1} }
.mapw{display:grid;gap:24px}
@media (min-width:1024px){ .mapw{grid-template-columns:1.3fr 1fr;gap:32px;align-items:stretch} }
.mapw>*{min-width:0}
.map{border-radius:var(--rl);overflow:hidden;min-height:380px;box-shadow:var(--shl);background:linear-gradient(150deg,#145A64,#0A353B)}
.map iframe{display:block;width:100%;height:100%;min-height:380px;border:0}
.hours{display:grid;gap:12px;align-content:center}
.hr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
.hr:hover{transform:translateX(6px);border-color:var(--gold)}
.hr b{display:flex;align-items:center;gap:10px;font:800 15.5px var(--fh);color:var(--teal)}
.hr b svg{width:20px;height:20px;color:var(--gold-d)}
.hr span{font:700 14.5px var(--fh);color:var(--muted);text-align:right}
.hr .open{color:#16A34A;display:inline-flex;align-items:center;gap:8px}
.hours .rbtn{margin-top:6px;width:100%}

/* =====================================================================
   SERVICE PAGES + GUIDE v2
   ===================================================================== */
.phero--full{display:flex;align-items:center}
.phero--full>.phero__in{width:100%}
@media (min-width:1024px){
  .phero--full{min-height:calc(100vh - var(--hh))}
  @supports (height:100svh){ .phero--full{min-height:calc(100svh - var(--hh))} }
}
.phero--one h1 span{display:inline}
.phero .hero__call{margin-top:22px}
.sv__link{display:inline-flex;align-items:center;gap:6px;margin:8px 0 2px;font:800 14px var(--fh);color:var(--gold)}
.sv__link svg{width:16px;height:16px;transition:transform .3s}
.sv__link:hover svg{transform:translateX(4px)}

/* feature cards */
.fts{display:grid;gap:18px}
@media (min-width:640px){ .fts{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .fts{grid-template-columns:repeat(3,1fr);gap:22px} }
.ft{position:relative;isolation:isolate;overflow:hidden;padding:34px 26px 30px;border-radius:var(--rl);background:#fff;border:1px solid var(--line);text-align:center;box-shadow:0 4px 14px rgba(10,53,59,.05);transition:transform .45s var(--ease),box-shadow .45s}
.ft::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px 220px at 100% 0%,rgba(227,168,53,.25),transparent 60%),linear-gradient(160deg,var(--teal),var(--teal-d));opacity:0;transition:opacity .45s}
.ft__n{position:absolute;top:14px;right:18px;font:900 46px/1 var(--fh);color:rgba(15,76,85,.07);transition:color .45s}
.ft i{width:64px;height:64px;margin:0 auto 18px;border-radius:18px;display:grid;place-items:center;background:var(--gold-t);color:var(--gold-d);font-style:normal;transition:all .45s var(--spring)}
.ft i svg{width:28px;height:28px}
.ft h3{font-size:19.5px;transition:color .45s}
.ft p{color:var(--muted);font-size:15.5px;margin-top:8px;transition:color .45s}
@media (hover:hover){
  .ft:hover{transform:translateY(-8px);box-shadow:var(--shl)}
  .ft:hover::before{opacity:1}
  .ft:hover h3{color:#fff} .ft:hover p{color:#C9DFE1}
  .ft:hover i{background:var(--gold);color:var(--teal-x);transform:rotate(-8deg) scale(1.05)}
  .ft:hover .ft__n{color:rgba(255,255,255,.12)}
}

/* comparison table */
.rcmpw{max-width:1040px;margin:0 auto;border-radius:var(--rl);overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.28)}
.rcmp{overflow-x:auto}
.rcmp table{width:100%;border-collapse:collapse;min-width:600px;font-size:15.5px;color:var(--text)}
.rcmp th,.rcmp td{padding:17px 18px;text-align:center;border-bottom:1px solid var(--line)}
.rcmp th{font:800 15px var(--fh);color:var(--teal);background:var(--bg)}
.rcmp th:first-child,.rcmp td:first-child{text-align:left;font-weight:600}
.rcmp th.us{background:var(--gold);color:var(--teal-x)}
.rcmp td.us{background:var(--gold-t)}
.rcmp tbody tr:last-child td{border-bottom:0}
.rcmp tbody tr{transition:background-color .2s}
.rcmp tbody tr:hover td{background:#F2F8F8}
.rcmp tbody tr:hover td.us{background:#F8E6BF}
.yes,.no{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%}
.yes{background:#DCFCE7;color:#16A34A}
.no{background:#FDECEC;color:var(--red)}
.yes svg,.no svg{width:17px;height:17px}
.mid{font:700 13.5px var(--fh);color:var(--muted)}
.rcmp__note{text-align:center;color:#B9D3D6;font-size:14px;margin-top:18px}

/* price factor cards */
.prices{display:grid;gap:20px}
@media (min-width:900px){ .prices{grid-template-columns:repeat(3,1fr)} }
.goldband .rrow{justify-content:center}

/* light tabs */
.tabs--light .rtabs__l{background:var(--teal-t);border-color:var(--line2)}
.tabs--light .rtab{color:var(--teal)}
.tabs--light .rtab:hover{color:var(--teal-x)}
.tabs--light .rpanel{box-shadow:var(--shl);border:1px solid var(--line)}

/* other services */
.osv{display:grid;gap:18px}
@media (min-width:640px){ .osv{grid-template-columns:1fr 1fr} .osv>:last-child:nth-child(odd){grid-column:1/-1} }
@media (min-width:1100px){ .osv{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .osv>:last-child:nth-child(odd){grid-column:auto} }
.osv .rpost__b{padding:18px 16px 20px}
.osv .rpost h3{font-size:17px}

/* guide v2: premium categories */
.phero--cats .phero__in{padding-bottom:clamp(110px,11vw,160px)}
.gsec{overflow:visible;padding-top:0}
.gcatwrap{position:relative;z-index:2;margin-top:calc(-1 * clamp(64px,6.5vw,96px));margin-bottom:clamp(36px,4vw,56px)}
.gcats2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){ .gcats2{grid-template-columns:repeat(3,1fr);gap:14px} }
@media (min-width:1180px){ .gcats2{grid-template-columns:repeat(6,1fr);gap:16px} }
.gc{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 12px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(10,53,59,.14);cursor:pointer;text-align:center;font:inherit;color:inherit;transition:transform .45s var(--spring),box-shadow .45s,background-color .3s,border-color .3s}
.gc i{width:56px;height:56px;margin-bottom:6px;border-radius:16px;display:grid;place-items:center;background:var(--teal-t);color:var(--teal);font-style:normal;transition:all .45s var(--spring)}
.gc i svg{width:26px;height:26px}
.gc b{font:800 16px/1.2 var(--fh);color:var(--teal);transition:color .3s}
.gc small{font-size:13px;color:var(--muted);transition:color .3s}
.gc em{position:absolute;top:12px;right:12px;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--gold-t);color:#8A5A06;font:800 12.5px/28px var(--fh);font-style:normal;transition:all .3s}
.gc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--gold-l));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
@media (hover:hover){ .gc:hover{transform:translateY(-8px);box-shadow:0 28px 54px rgba(10,53,59,.22)} .gc:hover::after{transform:scaleX(1)} .gc:hover i{background:var(--gold);color:var(--teal-x);transform:rotate(-8deg)} }
.gc[aria-pressed="true"]{background:radial-gradient(260px 160px at 100% 0%,rgba(227,168,53,.28),transparent 60%),linear-gradient(160deg,var(--teal),var(--teal-d));border-color:var(--teal);transform:translateY(-8px)}
.gc[aria-pressed="true"] b{color:#fff}
.gc[aria-pressed="true"] small{color:#B9D3D6}
.gc[aria-pressed="true"] i{background:var(--gold);color:var(--teal-x)}
.gc[aria-pressed="true"] em{background:var(--gold);color:var(--teal-x)}
.gc[aria-pressed="true"]::after{transform:scaleX(1)}
@media (max-width:420px){ .gc{padding:20px 8px 16px} .gc small{font-size:12px} }
[data-morewrap]{margin-top:34px}


/* =====================================================================
   THEME (WordPress) ADDITIONS
   ===================================================================== */
body.rba{line-height:1.6}
.rba-js .rv{will-change:auto}
.rwhite,.rtabs-light{background:#fff}
.rnav__list a.rnav__link{text-decoration:none}
.rmm>.rnav__link .rico{width:15px;height:15px;transition:transform .3s var(--ease)}
.rmm.open>.rnav__link .rico{transform:rotate(180deg)}
.rmi__t .rico{width:26px;height:26px}
.rdacc__in strong{color:var(--teal);font-weight:800}
.rdrawer .rlogo img{height:38px}
.rareas .rsh h2{color:#fff}.rareas .rsh h2 em{color:var(--gold)}.rareas .rsh p{color:#D2E5E7}
.rareas .rabox .rrow{justify-content:center}
.nlband .rsh{margin-bottom:28px}
.nlband .rsh h2{color:var(--teal-x)}.nlband .rsh h2 em{color:#fff}.nlband .rsh p{color:#3D3215}
.nl{flex-wrap:wrap}
.nl .vh,.rform .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nl .lbg-submsg{flex-basis:100%;margin:6px 0 0;text-align:center;font:800 15px var(--fh);color:var(--teal-x)}
.rquote-sec .rci{border:1px solid rgba(255,255,255,.12);text-align:left;cursor:pointer;color:inherit;font:inherit;width:100%}
.rform__err{margin:-6px 0 14px;padding:10px 14px;border-radius:10px;background:#FDECEC;color:#B91C1C;font-weight:600;font-size:14.5px;text-align:center}
.rf.is-err input,.rf.is-err select,.rf.is-err textarea{border-color:var(--red)}
.rform form{display:block}
.rform.done form{display:none}
.rform.done .is-ok{display:block;animation:fade .5s var(--ease)}
.rform .is-ok h3{margin-top:4px}
.rform .is-ok p{color:var(--muted);margin-top:6px}
.rwhy--r .rwhy__img{order:2}
@media (max-width:1023px){ .rwhy--r .rwhy__img{order:0} }
.sign img{width:52px;height:52px;border-radius:50%;background:#fff;padding:6px;object-fit:contain}
.story__txt p:not(.big){color:var(--muted);margin-top:14px}
.kit__out b,.kit__out strong{color:var(--teal)}
.gc[aria-current="page"]{background:radial-gradient(260px 160px at 100% 0%,rgba(227,168,53,.28),transparent 60%),linear-gradient(160deg,var(--teal),var(--teal-d));border-color:var(--teal);transform:translateY(-8px)}
.gc[aria-current="page"] b{color:#fff}.gc[aria-current="page"] small{color:#B9D3D6}
.gc[aria-current="page"] i{background:var(--gold);color:var(--teal-x)}.gc[aria-current="page"] em{background:var(--gold);color:var(--teal-x)}
.gc[aria-current="page"]::after{transform:scaleX(1)}
@media (min-width:1180px){ .gcats2{grid-template-columns:repeat(var(--gn,6),1fr)} }
.gempty{text-align:center;color:var(--muted)}
[data-more].is-busy{opacity:.6;pointer-events:none}
.rguide .searchform,.rguide form[role=search]{display:flex;gap:8px;justify-content:center}

/* photo panels without a photo keep the brand gradient */
.rph{display:block}
.rph.noimg img{display:none}

/* Layout controls from the page builder ("Spacing & layout" + "Colours" boxes) */
:is(.rsec,.phero,.rhero,.rstrip){position:relative}
.rsec[data-ly~="pt"],.phero[data-ly~="pt"]{padding-top:var(--ly-pt)}
.rsec[data-ly~="pb"],.phero[data-ly~="pb"]{padding-bottom:var(--ly-pb)}
@media (max-width:767px){
  .rsec[data-ly~="ptm"]{padding-top:var(--ly-pt-m)}
  .rsec[data-ly~="pbm"]{padding-bottom:var(--ly-pb-m)}
}
:is(.rsec,.phero,.rhero)[data-ly~="minh"]{min-height:var(--ly-minh)}
:is(.rsec,.phero)[data-ly~="w"]>.rwrap{max-width:calc(var(--ly-w) + var(--gut) * 2)}
:is(.rsec,.phero)[data-ly~="bgimg"]>.rwrap{position:relative;z-index:1}
@media (max-width:767px){ [data-ly~="only-desktop"]{display:none!important} }
@media (min-width:768px){ [data-ly~="only-mobile"]{display:none!important} }
:is(.rsec,.phero,.rstrip)[data-sc~="bg"]{background:var(--sc-bg)}
:is(.rsec,.phero,.rstrip)[data-sc~="bg"][data-sc~="bg2"]{background:linear-gradient(160deg,var(--sc-bg),var(--sc-bg2))}
[data-sc~="heading"] :is(.rsh h2,h3,h1){color:var(--sc-heading)}
[data-sc~="text"] :is(.rsh p,p,li){color:var(--sc-text)}
[data-sc~="accent"] :is(.rsh h2 em,em,.phero h1 span){color:var(--sc-accent);-webkit-text-fill-color:var(--sc-accent)}

[data-sc~="btn"] .rbtn:not(.rbtn--w):not(.rbtn--o){--b:var(--sc-btn)}
[data-sc~="btntext"] .rbtn:not(.rbtn--w):not(.rbtn--o){--f:var(--sc-btn-text)}
[data-sc~="card"] :is(.rnum,.prom,.ft,.rpost,.cw,.hr,.racc details,.rst){background:var(--sc-card)}
[data-sc~="cardtext"] :is(.rnum,.prom,.ft,.rpost,.cw,.hr,.racc details,.rst) :is(h3,p,b,span,small,summary){color:var(--sc-card-text)}
[data-sc~="border"] :is(.rnum,.prom,.ft,.rpost,.cw,.hr,.racc details,.rst){border-color:var(--sc-border)}

/* Engine sections (the 35 general sections) sit nicely inside the RBA look */
.rba .sechead .h-sec,.rba .h-hero{font-family:var(--fh)}

/* WhatsApp floating button: the mobile action bar already has WhatsApp */
@media (max-width:767px){ body.rba .lbg-wa{display:none} }

/* Blog post content: tip boxes and tables written in the editor */
.bp__prose .tip{margin:26px 0;padding:20px 22px;border-radius:16px;background:linear-gradient(135deg,var(--teal-t),#fff);border:1px solid var(--line2);border-left:5px solid var(--gold)}
.bp__prose .tip b{display:block;font:800 15.5px var(--fh);color:var(--teal);margin-bottom:4px}
.bp__prose .tip p{margin:0!important}
.bp__prose .tip--warn{background:linear-gradient(135deg,#FDECEC,#fff);border-color:#F7D4D4;border-left-color:var(--red)}
.bp__prose .tip--warn b{color:#B91C1C}
.bp__prose .tbl{overflow-x:auto;margin:0 0 22px;border-radius:14px;border:1px solid var(--line)}
.bp__prose .tbl table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:460px;margin:0}
.bp__prose .tbl th,.bp__prose .tbl td{padding:12px 16px;text-align:left;border:0;border-bottom:1px solid var(--line)}
.bp__prose .tbl th{background:var(--teal);color:#fff;font:800 14px var(--fh)}
.bp__prose .tbl tr:last-child td{border-bottom:0}
.bp__prose .tbl tbody tr:nth-child(even){background:var(--bg)}

/* Announcement bar (Theme Settings > Announcement bar) */
.annbar{background:var(--teal-x);color:#D7E8EA;font:600 14px var(--fb)}
.annbar__in{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;padding:9px var(--gut);text-align:center}
.annbar a{color:var(--gold);font-weight:800;text-decoration:underline}

.rgsum svg{width:34px;height:34px;flex:none}
.rgsum{color:inherit;text-decoration:none}

/* rba2-revisions.css */
/* =====================================================================
   v2.5 CLIENT REVISIONS (loaded after rba.css)
   - Red "Call Now" / "Request a Callout" buttons
   - Top bar with "Request a Callout" in the top left corner
   - Problem / fix cards shown open (no tapping)
   - Small extras: service footnote, area page link, drawer buttons
   ===================================================================== */
:root{ --cta:#D7262B; --cta-d:#B01B20; --cta-l:#EF4444; }

/* ---------- Red CTA buttons ---------- */
.rbtn.rbtn--red{--b:var(--cta);--f:#fff;border-color:var(--cta)}
.rbtn.rbtn--red::before{background:var(--cta-d)}
@media (hover:hover){ .rbtn.rbtn--red:hover{--f:#fff;border-color:var(--cta-d);box-shadow:0 6px 16px rgba(176,27,32,.25)} }
.rbtn.rbtn--red:focus-visible{outline-color:var(--gold)}
.rbtn--xs{min-height:36px;padding:7px 14px;font-size:13.5px;border-radius:9px;gap:7px}
.rbtn--xs svg{width:16px;height:16px}
.icb--red{background:var(--cta);border-color:var(--cta);color:#fff}
.rmbar .rmbar__c{background:var(--cta);color:#fff}

/* ---------- Top bar (v2.6: info + phone only, tablet and up) ---------- */
.rtop{display:none;background:var(--teal-x);color:#CFE2E4;font:600 13.5px/1.2 var(--fb);position:relative;z-index:101}
.rtop__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px}
.rtop__inf{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.rtop__ph{display:inline-flex;align-items:center;gap:7px;font:800 15px var(--fh);color:#fff;white-space:nowrap}
.rtop__ph svg{width:17px;height:17px;color:var(--gold)}
.rtop__ph:hover{color:var(--gold)}
@media (min-width:768px){ .rtop{display:block} }

/* ---------- Header buttons: Request a Callout next to Call Now ---------- */
.rhdr__cb{display:none}
.rhdr__mcb{display:inline-grid}
@media (min-width:560px) and (max-width:1023px){ .rhdr__cb{display:inline-flex} .rhdr__mcb{display:none} }
@media (min-width:1024px){ .rhdr__bar{grid-template-columns:auto 1fr auto} .rhdr__cta{gap:8px} }
@media (min-width:1440px){ .rhdr__cb{display:inline-flex} .rhdr__mcb{display:none} }
@media (min-width:1024px) and (max-width:1279px){ .rnav__list{gap:2px} .rnav__link{padding:10px 8px;font-size:13.5px} .rlogo__full,.rlogo__one{height:50px!important} }

/* ---------- Problem / fix cards: open ---------- */
.rflips--open{align-items:stretch}
.rpf{display:flex;flex-direction:column;border-radius:var(--rl);overflow:hidden;background:#fff;box-shadow:var(--sh);border:1px solid var(--line);position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media (hover:hover){ .rpf:hover{transform:translateY(-5px);box-shadow:var(--shl)} }
.rpf__p,.rpf__f{display:flex;gap:16px;align-items:flex-start;padding:24px 22px;text-align:left}
.rpf__p{background:linear-gradient(160deg,#FFF6F6,#FDECEC)}
.rpf__f{flex:1;background:linear-gradient(160deg,var(--teal),var(--teal-d));color:#D7E8EA;padding-top:30px}
.rpf .flip__ic{width:52px;height:52px;border-radius:16px;flex:none}
.rpf .flip__ic svg{width:26px;height:26px}
.rpf__p .flip__ic{background:#fff;color:var(--red);box-shadow:0 8px 20px rgba(224,36,36,.15)}
.rpf__f .flip__ic{background:var(--gold);color:var(--teal-x)}
.rpf small{display:block;font:800 11px var(--fh);letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.rpf__p small{color:var(--red)}
.rpf__f small{color:var(--gold)}
.rpf h3{font-size:19px;line-height:1.2}
.rpf__f h3{color:#fff}
.rpf p{font-size:15px;margin-top:6px;line-height:1.5}
.rpf__p p{color:var(--muted)}
.rpf__arr{position:relative;z-index:2;flex:none;width:38px;height:38px;margin:-19px auto;border-radius:50%;background:var(--gold);color:var(--teal-x);display:grid;place-items:center;box-shadow:0 6px 16px rgba(10,53,59,.25);border:3px solid #fff;transform:rotate(90deg)}
.rpf__arr svg{width:17px;height:17px}

/* ---------- Service cards footnote ---------- */
.rfootnote{max-width:880px;margin:22px auto 0;text-align:center;font-size:14px;color:var(--muted);font-style:italic}
.rdark .rfootnote{color:#9FBFC3}

/* ---------- Areas section: area page link ---------- */
.rabox__lnk{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:800 14.5px var(--fh);color:var(--gold)}
.rabox__lnk svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.rabox__lnk:hover svg{transform:translateX(4px)}
.rabox__lnk[hidden]{display:none}

/* ---------- Mobile drawer: three buttons ---------- */
.rdrawer__f{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rdrawer__f>.rbtn--t{grid-column:1/-1}
.rdrawer__f .rbtn{min-width:0;white-space:normal;text-align:center;line-height:1.2;padding:12px 10px;font-size:14.5px}

/* ---------- Mobile drawer scrolls (v2.6 fix) ---------- */
.rdrawer__p{height:100%;height:100dvh}
.rdrawer__b{min-height:0;-webkit-overflow-scrolling:touch;touch-action:pan-y}

/* ---------- Price badge in "What affects the price" (v2.6) ---------- */
.rfrom{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;margin:-8px auto 28px;padding:12px 22px;border-radius:999px;background:var(--teal-x);color:#fff;font:800 clamp(17px,.6vw + 14px,22px) var(--fh);box-shadow:0 12px 26px rgba(10,53,59,.25)}
.rfrom svg{width:22px;height:22px;color:var(--gold)}

/* rba3-type.css */
/* =====================================================================
   v2.8 TYPE SYSTEM (client type scale, 4 Nov 2026)
   Simplon Norm (fallback Inter) for everything, Simplon Mono (fallback
   IBM Plex Mono) for labels, buttons, footer headings and battery part
   numbers. Sizes: desktop / tablet (<1024px) / mobile (<767px).
     Display (hero H1)   82 / 60 / 44   700  lh 1.2 (1.08 at 82)
     Section H2          60 / 46 / 32   700  lh 1.1
     Small H2, global H1 40 / 28 / 24   700  -0.5px
     H3, H4              30 / 22 / 20   700  lh 38 / 30
     Card title          30             700
     Body                20             300  lh 1.5
     H5, label           18 mono        700  lh 1.2
     H6, button          18 mono        700  uppercase
     Footer heading      15 / 14 mono   700  +0.5px
     Footer links        16 / 14        400
   Loaded after rba.css / rba2-revisions.css.
   ===================================================================== */
:root{
  --t-display:82px; --t-h2:60px; --t-h2s:40px; --t-h3:30px; --t-h3-lh:38px;
  --t-card:30px; --t-body:20px; --t-label:18px; --t-btn:18px;
  --t-foot-h:15px; --t-foot-a:16px;
  --h2:var(--t-h2);
}
@media (max-width:1023px){ :root{ --t-display:60px; --t-h2:46px; --t-h2s:28px; --t-h3:22px; --t-h3-lh:30px; --t-foot-h:14px; --t-foot-a:14px } }
@media (max-width:766px){ :root{ --t-display:44px; --t-h2:32px; --t-h2s:24px; --t-h3:20px; --t-h3-lh:30px } }

/* ---------- base ---------- */
html body,body.rba{font-family:var(--fb);font-weight:300;font-size:var(--t-body);line-height:1.5}
b,strong{font-weight:700}
h1,h2,h3,h4{font-family:var(--fh);font-weight:700;letter-spacing:-.5px;text-wrap:balance}
p{text-wrap:pretty}
h5{font:700 var(--t-label)/1.2 var(--fm)}
h6{font:700 var(--t-btn)/1.2 var(--fm);text-transform:uppercase;color:var(--gold-d)}
::selection{background:var(--gold);color:var(--teal-x)}
input,textarea{caret-color:var(--cta)}

/* ---------- display ---------- */
.hero__h,.phero h1,.rcm-hero h1{font-size:clamp(44px,5.6vw,var(--t-display));font-weight:700;line-height:1.1;letter-spacing:-1px}
@media (max-width:1023px){ .hero__h,.phero h1,.rcm-hero h1{font-size:var(--t-display);line-height:1.15} }
@media (max-width:766px){ .hero__h,.phero h1,.rcm-hero h1{line-height:1.2;letter-spacing:-.5px} }
/* short laptop screens: keep the hero inside one screen */
@media (min-width:1024px) and (max-height:820px){ .hero__h{font-size:clamp(44px,min(5.6vw,8.4vh),var(--t-display))} }
.hero__lead,.phero__lead{font-size:var(--t-body);font-weight:300;line-height:1.5}

/* ---------- section headings ---------- */
.rsh h2{font-size:var(--t-h2);font-weight:700;line-height:1.1;letter-spacing:-.5px}
.rsh p{font-size:var(--t-body);font-weight:300;line-height:1.5;max-width:62ch}
.rfinal h2{font-size:var(--t-h2);font-weight:700;line-height:1.1}
.rsh--left h2{font-size:var(--t-h2s)}
.rich-content h1,.entry-content h1,.post-title,.rpost-h1{font-size:var(--t-h2s);line-height:1.3}
.rich-content h2,.entry-content h2{font-size:var(--t-h2s);line-height:1.2}
.rich-content h3,.entry-content h3,.rich-content h4,.entry-content h4{font-size:var(--t-h3);line-height:var(--t-h3-lh)}

/* ---------- card titles ---------- */
.rsv h3,.rpf h3,.ft h3,.rfl h3,.rfs h3,.ans__b h3,.rmodel h3,.rcar-model h3{font-size:var(--t-card);line-height:1.15;font-weight:700}
.rst h3,.rpost h3{font-size:22px;line-height:1.25}
.rsv h3{font-size:26px}
@media (max-width:766px){ .rsv h3,.rpf h3,.ft h3,.rfl h3,.rfs h3,.ans__b h3{font-size:24px} }
.rsv p,.rpf p,.ft p,.rfl p,.rfs p,.rst p,.rpost__ex,.ans__b p{font-size:17px;font-weight:300;line-height:1.5}
.ragc b,.rcar-makes b,.rmi b,.rabox b{font-weight:700}

/* ---------- labels (mono) ---------- */
.rpf small,.flip__f small,.flip__b small,.rbr__f small,.rbr__oh,.rvt__h,.rmega__h,.rsubs__near b,.rbf__lbl,.rvt__f span,.rvt__show>span,.rfs__veh small,.rf label,.rtag,.rtop__inf{font-family:var(--fm);font-weight:700;letter-spacing:.02em}
.rpf small,.rbr__f small,.rbr__oh,.rvt__h,.rmega__h,.rfs__veh small,.rtag{font-size:13px;text-transform:uppercase}
.rbr__o b,.rbr__f--part b{font-family:var(--fm);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- buttons (mono, uppercase) ---------- */
.rbtn,.rbf__go,.rvt__more{font-family:var(--fm);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.rbtn{font-size:var(--t-btn)}
.rbtn--l{font-size:var(--t-btn)}
.rbtn--s,.rbf__go{font-size:15px}
.rbtn--xs,.rvt__more{font-size:13px}
@media (max-width:599px){ .rrow>.rbtn{font-size:14px} }
.rnav__link{font-family:var(--fh);font-weight:600}

/* ---------- footer ---------- */
.rfoot h4{font:700 var(--t-foot-h)/1.3 var(--fm);letter-spacing:.5px;text-transform:uppercase}
.rfoot a{font-size:var(--t-foot-a);font-weight:400}

/* ---------- quieter surfaces: no lift on hover, no decorative numbers ---------- */
.rsv:hover,.rfl:hover,.ft:hover,.rpf:hover,.ragc:hover,.rfs:hover,.rmi:hover,.rcar-makes a:hover,.rsubs__g li:hover,.rachip:hover{transform:none}
.ft__n,.rfs__n{display:none}
.rfs__h{justify-content:flex-start}

/* ---------- v2.8 de-template pass ----------
   Solid colour instead of gradient text, no frosted glass, no lifting /
   tilting / rotating cards on hover (border colour + shadow only). */
.hero__h span,.phero h1 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold)}
.rhd{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.rmbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero__pill,.sv__btn,.ropt,.phero__badges span,.val,.gsearch input,.rhs__ui{backdrop-filter:none;-webkit-backdrop-filter:none}
.ropt:hover,.rst:hover,.rnum:hover,.rrev:hover,.rpost:hover,.rsoc a:hover,.val:hover,.prom:hover,.kit button:hover,.gcat:hover,.feat:hover,.cw:hover,.gc:hover,.ragc:hover,.rcar-makes a:hover,.rbf__go:hover:not(:disabled){transform:none}
.rst:hover .rst__n,.cw:hover i,.gc:hover i{transform:none}
.rpost:hover .rpost__img img,.feat:hover .feat__img img{transform:none}
@media (hover:hover){ .rflip:hover:not(.is-on) .flip__in{transform:none} }
.gc[aria-pressed="true"],.gc[aria-current="page"]{transform:none;background:var(--teal)}
.rbr{animation:none}
/* no decorative offset frame or dot grid around the hero photo */
.hero__frame::before,.hero__frame::after{content:none}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* v2.9 page speed: slide 1 of the home banner paints with the page
   (no fade, no delay); slides 2-5 keep their stagger in carousel mode. */
.rhs:first-child .hx,.rhs:first-child .hero__media{opacity:1;transform:none;transition-delay:0s}

/* ---------- v2.9 header: gold "Request a Callout" at every width ----------
   Red = Call Now, gold = Request a Callout (dark text #1F2225, 7.5:1). */
.rbtn.rbtn--gold{--b:var(--gold);--f:#1F2225;background:var(--gold);border-color:var(--gold);color:#1F2225}
.rbtn.rbtn--gold::before{background:#D29A2B}
@media (hover:hover){ .rbtn.rbtn--gold:hover{--f:#1F2225;color:#1F2225;border-color:#D29A2B;box-shadow:0 6px 16px rgba(160,110,20,.25)} }
.rbtn.rbtn--gold:focus-visible{outline:3px solid var(--teal-x);outline-offset:2px}
.rhdr__cb,.rhdr__cb.rbtn{display:inline-flex}
.rhdr__mcb{display:none!important}
@media (max-width:559px){
  .rhdr__bar{gap:8px}
  .rhdr__cta{gap:6px}
  .rhdr__cb.rbtn{height:44px;padding:0 12px;font-size:13px;letter-spacing:0;white-space:nowrap}
  .rhdr__cb svg{display:none}
  .rhdr__mcall,.rhdr__burger{width:44px;height:44px}
  .rlogo img{max-width:96px}
}
@media (max-width:380px){ .rhdr__cb.rbtn{padding:0 9px;font-size:12px} .rlogo img{max-width:78px} }
@media (min-width:1024px) and (max-width:1279px){
  .rhdr__cb.rbtn,.rhdr__call.rbtn{padding:0 14px;font-size:14px}
  .rhdr__cb svg{display:none}
  .rnav__list{gap:0}
  .rnav__link{padding-left:10px;padding-right:10px}
}

/* ---------- v2.9 phone bar: two big buttons ---------- */
.rmbar{grid-template-columns:1fr 1fr}
.rmbar a,.rmbar button{min-height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px;border:0;font:700 15px var(--fm);text-transform:uppercase;letter-spacing:0;white-space:nowrap;cursor:pointer}
.rmbar svg{flex:none;width:20px;height:20px}
.rmbar__l{background:var(--teal-x);color:#fff}
.rmbar__l.is-busy{opacity:.7}
@media (max-width:374px){ .rmbar a,.rmbar button{font-size:13px} }

/* status message for Share your Location */
.rtoast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:120;width:min(92vw,440px);padding:14px 16px;border-radius:12px;background:var(--teal-x);color:#fff;font:500 15px/1.4 var(--fb);box-shadow:0 12px 30px rgba(0,0,0,.25);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.rtoast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:768px){ .rtoast{bottom:24px} }
[data-share].is-busy{cursor:progress}
@media (min-width:560px) and (max-width:767px){ .rhdr__call.rbtn{display:none} .rhdr__mcall{display:inline-grid} }

/* ---------- v2.9 areas + coverage map ---------- */
.rabox__p[hidden]{display:none}
.rareas--map{background:var(--teal-x);text-align:left}
.rareas--map::after{content:none}
.rareas__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.rareas__map{margin:0;border-radius:18px;overflow:hidden;background:#F1EFEA;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.rareas__map img{display:block;width:100%;height:auto}
.rareas--map .rsh{text-align:left;margin-left:0}
.rareas--map .rsh p{margin-left:0}
.rareas--map .ralist{justify-content:flex-start;margin:0}
.rareas--map .rabox{margin:20px 0 0;max-width:none}
.rareas--map .rabox .rrow{justify-content:flex-start}
@media (max-width:1023px){ .rareas__grid{grid-template-columns:1fr} .rareas__map{max-width:560px;margin:0 auto;width:100%} }

/* page.css */
/* NORMAL PAGE · pages/page.css
   Editor content on pages without sections (e.g. Privacy Policy). */
.lbg-page .prose, .lbg-page .entry{max-width:760px;color:var(--text-strong);font-size:17px;line-height:1.75}
.lbg-page .prose, .lbg-page .entry > * + *{margin-top:22px}
.lbg-page .prose, .lbg-page .entry h2{font-family:var(--font-heading);font-weight:800;font-size:27px;color:var(--teal-700);margin-top:40px}
.lbg-page .prose, .lbg-page .entry h3{font-family:var(--font-heading);font-weight:700;font-size:21px;color:var(--teal-700);margin-top:28px}
.lbg-page .prose, .lbg-page .entry ul,.lbg-page .prose, .lbg-page .entry ol{display:grid;gap:10px;padding-left:22px}
.lbg-page .prose, .lbg-page .entry ul li{list-style:disc}
.lbg-page .prose, .lbg-page .entry ol li{list-style:decimal}
.lbg-page .prose, .lbg-page .entry a{color:var(--orange-700);text-decoration:underline;text-underline-offset:3px}

/* rba-battery-finder.css */
/* RBA · Battery finder (v2.8): one search bar, no tab. Dark teal panel,
   white field with a search icon, red button sitting inside the field on
   desktop, example searches + browse link in one row under it. */
.rbf-sec{background:#fff}
.rbf-sec.rdark{background:var(--teal-x)}
.rbf{max-width:1080px;margin:0 auto}
.rbf__box{background:var(--teal-x);color:#fff;border-radius:20px;padding:clamp(22px,3.2vw,40px) clamp(18px,3.4vw,44px) clamp(18px,2.4vw,28px)}
.rdark .rbf__box{background:var(--teal-d);outline:1px solid rgba(255,255,255,.08)}
.rbf__p{position:relative;z-index:2}
/* label kept for screen readers only (v2.8: client asked to hide it) */
.rbf__lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rbf__row{position:relative;display:flex;align-items:stretch;background:#fff;border-radius:14px;padding:6px;box-shadow:0 0 0 0 transparent;transition:box-shadow .2s}
.rbf__row:focus-within{box-shadow:0 0 0 3px var(--gold)}
.rbf__in{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.rbf__in>svg{position:absolute;z-index:1;left:14px;top:50%;margin-top:-11px;width:22px;height:22px;color:var(--teal);stroke:currentColor;fill:none;pointer-events:none}
.rbf__in input{width:100%;height:60px;border:0;border-radius:10px;background:transparent;color:var(--teal-x);padding:0 14px 0 48px;font:400 20px var(--fb);outline:none}
.rbf__in input::placeholder{color:#7C8E91;font-weight:300}
.rbf__in input::-webkit-search-cancel-button{cursor:pointer}
.rbf__go{flex:none;display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 28px;border:0;border-radius:10px;background:var(--cta);color:#fff;cursor:pointer;transition:background-color .2s}
.rbf__go:hover:not(:disabled){background:var(--cta-d)}
.rbf__go:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rbf__help{margin-top:12px;font-size:15px;font-weight:300;color:#B9CFD2}
.rbf__sug{position:absolute;left:-6px;right:-6px;top:calc(100% + 12px);z-index:20;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.25);padding:6px;max-height:340px;overflow:auto;color:var(--text)}
.rbf__sug[hidden]{display:none}
.rbf__sug li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;cursor:pointer;font:600 16px var(--fb)}
.rbf__sug li svg{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none}
.rbf__sug li[aria-selected="true"],.rbf__sug li:hover{background:var(--teal-t);color:var(--teal)}
.rbf__help{display:none}
.rbf__foot{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:20px}
.rbf__ex{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rbf__ex span{font:700 13px var(--fm);text-transform:uppercase;letter-spacing:.04em;color:#B9CFD2;margin-right:2px}
.rbf__ex button{height:34px;padding:0 13px;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font:400 15px var(--fb);cursor:pointer;transition:border-color .2s,background-color .2s}
.rbf__ex button:hover{border-color:var(--gold);background:rgba(255,255,255,.06)}
.rbf__ex button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a.rbf__browse{display:inline-flex;align-items:center;gap:6px;font:700 15px var(--fb);color:var(--gold);text-decoration:none}
a.rbf__browse svg{width:16px;height:16px}
a.rbf__browse:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:700px){
.rbf__row{flex-direction:column;gap:6px}
.rbf__in input{height:54px;font-size:18px}
.rbf__go{width:100%;height:54px}
.rbf__foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:16px}
.rbf__ex{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rbf__ex span,.rbf__ex button:nth-of-type(n+3){display:none}
.rbf__ex button{width:100%;padding:0 8px;font-size:14px;white-space:nowrap}
a.rbf__browse{justify-content:center}
}
/* Result */
.rbf__res{margin-top:22px;display:grid;gap:16px}
.rbf__res:empty{display:none}

/* ---------- v2.6 ---------- */
.rbf-sec--tight{padding:clamp(40px,4vw,64px) 0}
.rbf-sec--tight .rsh{margin-bottom:clamp(20px,2.4vw,32px)}
.rbf-sec--tight .rsh::after{margin-top:16px}
.rbf__sug li span{display:flex;flex-direction:column;gap:2px}
.rbf__sug li small{font:500 13px var(--fb);color:var(--muted)}
.rbf__sug li.is-part svg{stroke:var(--cta)}
.rbf__res.is-busy{opacity:.5;transition:opacity .2s}
.rbr__ser{margin-top:14px;font-size:14.5px;color:var(--muted)}
.rbr__ser summary{cursor:pointer;font:700 14px var(--fh);color:var(--teal)}
.rbr__ser ul{margin-top:8px;display:grid;gap:4px;padding-left:18px;list-style:disc;max-height:220px;overflow:auto}
.rbr__more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:800 14.5px var(--fh);color:var(--teal)}
.rbr__more svg{width:16px;height:16px}
.rbr__more:hover{color:var(--gold-d)}
.rbr--list{grid-template-columns:1fr}
.rbr__cars{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rbr__cars a,.rcar-chips a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--line2);background:#fff;font:700 14px var(--fh);color:var(--teal);transition:all .25s}
.rbr__cars a:hover,.rcar-chips a:hover{background:var(--teal);border-color:var(--teal);color:#fff}
/* car battery pages */
.rcar-res{background:var(--bg)}
.rcar-links{background:#fff}
.rcar-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1100px;margin:0 auto}
.rcar-chips a.is-all{background:var(--teal);color:#fff;border-color:var(--teal)}
.rcar-chips a.is-all svg{width:15px;height:15px}
.rcar-chips a.is-na{opacity:.6}
.rcar-models{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.rcar-model{padding:20px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.rcar-model h3{font-size:18px;margin-bottom:12px}
.rcar-model .rcar-chips{justify-content:flex-start;margin:0}
.rcar-model .rcar-chips a{padding:7px 12px;font-size:13.5px}
.rcar-makes{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.rcar-makes a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);transition:all .25s}
.rcar-makes b{font:800 15.5px var(--fh);color:var(--teal)}
.rcar-makes small{font-size:13px;color:var(--muted)}
.rcar-makes a:hover{border-color:var(--gold);background:#fff;transform:translateY(-2px)}/* ---------- v2.6.1: every battery option + BMS states ---------- */
/* ---------- v2.7: model > variants table, model page ---------- */

/* model page hero with "Not sure which variant?" box */
.rcm-hero__in{display:grid;gap:28px;align-items:center;position:relative;z-index:1}
@media (min-width:1024px){
.rcm-hero__in{grid-template-columns:minmax(0,1fr) 360px;gap:48px}
}
.rcm-hero h1{color:#fff;font-size:clamp(34px,3vw + 12px,60px);line-height:1.05;margin-top:14px}
.rcm-hero h1 span{display:block;color:var(--gold)}
.rcm-hero .phero__lead strong{color:#fff}
.rcm-hero .crumb{justify-content:flex-start}
.rcm-ask{padding:24px;border-radius:20px;background:#fff;box-shadow:var(--shl);display:grid;gap:10px}
.rcm-ask b{font:800 19px var(--fh);color:var(--teal-x)}
.rcm-ask p{font-size:15px;color:var(--muted);margin-bottom:6px}
.rcm-ask .rbtn{width:100%}
.rbtn.rbtn--ghost{--b:#fff;--f:var(--cta)}
.rbtn.rbtn--ghost::before{background:var(--cta)}
@media (hover:hover){
.rbtn.rbtn--ghost:hover{--f:#fff}
}
.rcm-sec{background:var(--bg)}
.rcm-warn{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:18px;background:#FFF7E6;border:1px solid #F2D9A6;margin-bottom:40px}
.rcm-warn i{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--gold);color:var(--teal-x);font-style:normal}
.rcm-warn i svg{width:24px;height:24px}
.rcm-warn b{display:block;font:800 18px var(--fh);color:var(--teal-x)}
.rcm-warn p{margin-top:6px;font-size:15px;color:#5B4A22}
.rsh--left{text-align:left;margin-left:0;max-width:none}
.rsh--left p{margin-left:0}
.rsh--left::after{margin-left:0}
.rcar-makes--models{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.rcar-makes a.is-na{opacity:.6}
.rcm-hero{padding-top:clamp(28px,3vw,48px)}
.rcm-sec{padding-top:clamp(40px,4vw,64px)}

/* =====================================================================
   v2.8 RESULTS: battery card + variant list
   Quiet white surfaces, one accent per job: red = act, mono = data.
   ===================================================================== */
.rbf__res{margin-top:20px;display:grid;gap:16px}
.rbf__res:empty{display:none}
.rbf__res.is-busy{opacity:.5;transition:opacity .2s}

/* ---------- battery card ---------- */
.rbr{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;padding:clamp(18px,2.6vw,32px);border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(10,53,59,.04),0 12px 32px -12px rgba(10,53,59,.14)}
.rdark .rbr{border-color:transparent}
.rbr__img{position:relative;border-radius:14px;background:var(--bg);aspect-ratio:1/1;display:grid;place-items:center;padding:12%}
.rbr__img img{width:100%;height:100%;object-fit:contain}
.rbr h3{font:700 clamp(22px,1vw + 15px,28px)/1.2 var(--fh);letter-spacing:-.4px;color:var(--teal-x)}
.rbr__sub{margin-top:6px;font:400 14px var(--fb);color:var(--muted)}
.rbr__facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.rbr__opts{grid-column:1/-1;display:grid;gap:8px;margin:0;padding:0;list-style:none}
.rbr__o{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--line)}
.rbr__o:first-child{border-color:var(--teal-x);box-shadow:inset 0 0 0 1px var(--teal-x)}
.rbr__o b{font:700 18px/1.2 var(--fm);color:var(--teal-x);overflow-wrap:anywhere}
.rbr__badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;font:700 12px var(--fm);letter-spacing:.04em;text-transform:uppercase;background:#E6EFF0;color:var(--teal)}
.rbr__o--efb .rbr__badge{background:#E5EEFC;color:#1A5CC0}
.rbr__o--agm .rbr__badge{background:#FBF0D9;color:#8A5F0E}
.rbr__o strong{display:grid;justify-items:end;font:700 20px/1.1 var(--fh);color:var(--teal-x);white-space:nowrap}
.rbr__o strong small{font:400 12px var(--fb);color:var(--muted);margin-top:3px}
.rbr__f{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:14px 16px;border-radius:12px;background:var(--bg)}
.rbr__f>svg{grid-row:1/span 2;width:22px;height:22px;color:var(--teal);stroke:currentColor;fill:none}
.rbr__f small{font:700 12px/1.3 var(--fm);letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.rbr__f b{font:700 17px/1.3 var(--fh);color:var(--teal-x);margin-top:2px}
.rbr__f.is-na b{font-weight:600;font-size:15px;color:var(--muted)}
.rbr__f--bms.is-yes{background:#FDEEEE}
.rbr__f--bms.is-yes>svg,.rbr__f--bms.is-yes b{color:var(--cta)}
.rbr__f--bms.is-maybe{background:#FFF5E2}
.rbr__f--bms.is-maybe>svg,.rbr__f--bms.is-maybe b{color:#8A5F0E}
.rbr__f--bms.is-no b{grid-row:1/span 2;font-size:15px;font-weight:600;margin:0}
.rbr__note{margin-top:12px;font-size:16px;color:var(--muted)}
.rbr__btns{margin-top:20px;gap:10px}
.rbr__btns .rbtn{flex:1 1 200px;justify-content:center}
.rbr--none,.rbr--list,.rbr--model{display:block}
.rbr--none{text-align:center}
.rbr--none p{color:var(--muted);margin:8px auto 0;max-width:560px;font-size:17px}
.rbr--none .rrow{justify-content:center}
@media (max-width:860px){ .rbr{grid-template-columns:1fr} .rbr__img{max-width:180px;margin:0 auto;padding:8%} }
@media (max-width:560px){
  .rbr__facts{grid-template-columns:1fr}
  .rbr__o{grid-template-columns:1fr auto;row-gap:8px;padding:12px 14px}
  .rbr__o b{grid-column:1/-1;font-size:17px}
  .rbr__o strong{font-size:18px}
  .rbr__o .rbr__badge{justify-self:start}
}

/* ---------- model result (finder) / model page wrapper ---------- */
.rbr--model{padding:clamp(18px,2.6vw,32px)}
.rbr__top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:baseline}
.rbr__top .rbr__more{grid-column:2;grid-row:1}
.rbr--model .rbr__lead{margin-top:4px;font-size:16px;color:var(--muted)}
@media (max-width:640px){ .rbr__top{grid-template-columns:1fr} .rbr__top .rbr__more{grid-column:1;grid-row:auto;margin-top:8px} }
.rbr__top .rbr__more{margin-top:0}
.rbr__more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:700 15px var(--fb);color:var(--teal);text-decoration:none}
.rbr__more:hover{color:var(--teal-x);text-decoration:underline;text-underline-offset:3px}
.rbr__more svg{width:16px;height:16px}

/* ---------- variant list ---------- */
.rvt{margin-top:18px}
.rvt [hidden]{display:none!important}
.rvt__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rvt__f{position:relative;flex:1 1 260px;display:flex;align-items:center}
.rvt__f svg{position:absolute;left:14px;width:18px;height:18px;color:var(--muted);stroke:currentColor;fill:none;pointer-events:none}
.rvt__f input{width:100%;height:46px;border:1px solid transparent;border-radius:10px;background:var(--bg);padding:0 14px 0 42px;font:400 16px var(--fb);color:var(--teal-x)}
.rvt__f input:focus{outline:none;background:#fff;border-color:var(--teal)}
.rvt__tg{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font:600 15px var(--fb);color:var(--teal-x);cursor:pointer}
.rvt__tg i{position:relative;width:32px;height:18px;border-radius:9px;background:#C9D4D6;transition:background-color .2s}
.rvt__tg i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.rvt__tg[aria-pressed="true"]{border-color:var(--cta)}
.rvt__tg[aria-pressed="true"] i{background:var(--cta)}
.rvt__tg[aria-pressed="true"] i::after{transform:translateX(14px)}
.rvt__count{margin-left:auto;font:700 13px var(--fm);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rvt__t{display:grid;border-top:1px solid var(--line)}
.rvt__r{border-bottom:1px solid var(--line)}
.rvt__btn{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,236px) 84px 208px 34px;gap:16px;align-items:center;padding:16px 12px;margin:0;border:0;border-radius:12px;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s}
.rvt__btn:hover{background:var(--bg)}
.rvt__btn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.rvt__v{display:grid;gap:4px;min-width:0}
.rvt__v b{font:600 17px/1.3 var(--fh);color:var(--teal-x)}
.rvt__v small{display:flex;flex-wrap:wrap;gap:4px 12px;font:400 13.5px/1.3 var(--fb);color:var(--muted)}
.rvt__y{font:700 13px var(--fm);color:var(--teal)}
.rvt__c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rvt__b{display:flex;flex-wrap:wrap;gap:6px}
.rvt__p{display:inline-flex;align-items:center;height:26px;padding:0 8px;border-radius:6px;background:#E6EFF0;font:700 13px var(--fm);font-style:normal;color:var(--teal-x);white-space:nowrap}
.rvt__p--efb{background:#E5EEFC;color:#1A5CC0}
.rvt__p--agm{background:#FBF0D9;color:#8A5F0E}
.rvt__p--n{background:none;border:1px solid var(--line);color:var(--muted)}
.rvt__p--na{background:none;padding:0;font:500 14px var(--fb);color:var(--muted)}
.rvt__ft{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--fm);color:var(--teal-x);white-space:nowrap}
.rvt__ft svg{width:16px;height:16px;color:var(--muted);stroke:currentColor;fill:none}
.rvt__ft.is-na{font:500 14px var(--fb);color:var(--muted)}
.rvt__rg:empty{visibility:hidden}
.rvt__rg{justify-self:start;display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:6px;font:700 12px var(--fm);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.rvt__rg.is-yes{background:#FDEEEE;color:var(--cta)}
.rvt__rg.is-maybe{background:#FFF5E2;color:#8A5F0E}
.rvt__go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--teal);transition:background-color .2s,border-color .2s,color .2s}
.rvt__go svg{width:16px;height:16px;transition:transform .25s}
.rvt__btn:hover .rvt__go{border-color:var(--cta);color:var(--cta)}
.rvt__btn[aria-expanded="true"] .rvt__go{background:var(--cta);border-color:var(--cta);color:#fff}
.rvt__btn[aria-expanded="true"] .rvt__go svg{transform:rotate(180deg)}
.rvt__r.is-open .rvt__btn{background:var(--bg)}
.rvt__d{padding:4px 0 18px}
.rvt__d .rbr{box-shadow:none;border-color:var(--line)}
.rvt__load{display:flex;justify-content:center;gap:6px;padding:28px}
.rvt__load i{width:8px;height:8px;border-radius:50%;background:var(--teal);opacity:.25;animation:rvtDot 1s infinite}
.rvt__load i:nth-child(2){animation-delay:.15s}.rvt__load i:nth-child(3){animation-delay:.3s}
@keyframes rvtDot{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .rvt__load i{animation:none;opacity:.6} }
.rvt__more{display:block;margin:16px auto 0;height:44px;padding:0 22px;border-radius:10px;border:1px solid var(--teal);background:#fff;color:var(--teal);cursor:pointer}
.rvt__more:hover{background:var(--teal);color:#fff}
.rvt__none{padding:20px;text-align:center;color:var(--muted)}
@media (max-width:1023px){ .rvt__btn{grid-template-columns:minmax(0,1fr) minmax(0,190px) 84px 34px} .rvt__rg{grid-column:1;grid-row:2;margin-top:-6px} .rvt__rg:empty{display:none} }
@media (max-width:1179px){ .rvt__rgl{display:none} }
.rvt__rg{font:600 13px var(--fb);letter-spacing:0;text-transform:none}
.rvt__rgl{margin-right:.28em}
@media (max-width:760px){
  .rvt__bar{gap:8px}
  .rvt__f{flex-basis:100%}
  .rvt__tg{flex:none;white-space:nowrap}
  .rvt__btn{grid-template-columns:auto auto 1fr 34px;gap:10px 12px;padding:14px 6px}
  .rvt__v{grid-column:1/4;grid-row:1}
  .rvt__go{grid-column:4;grid-row:1;align-self:start}
  .rvt__b{grid-column:1/-1;grid-row:2}
  .rvt__ft{grid-column:1;grid-row:3}
  .rvt__rg{grid-column:2;grid-row:3;margin:0}
  .rvt__v b{font-size:16px}
}