.elementor-kit-2858{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-kadence1:#2B6CB0;--e-global-color-kadence2:#215387;--e-global-color-kadence3:#1A202C;--e-global-color-kadence4:#2D3748;--e-global-color-kadence5:#4A5568;--e-global-color-kadence6:#718096;--e-global-color-kadence7:#EDF2F7;--e-global-color-kadence8:#F7FAFC;--e-global-color-kadence9:#ffffff;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-2858.el-is-editing{--global-palette1:#2B6CB0;--global-palette2:#215387;--global-palette3:#1A202C;--global-palette4:#2D3748;--global-palette5:#4A5568;--global-palette6:#718096;--global-palette7:#EDF2F7;--global-palette8:#F7FAFC;--global-palette9:#ffffff;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.elementor-widget:not(:last-child){margin-bottom:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1025px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:768px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;700;800;900&display=swap');

/* ============================================================
   RITags.net — Elementor Custom CSS
   Site Settings -> Custom CSS

   Structure, so this file stays manageable as you add sections:
     1. TOKENS      — colours, type, spacing. Never duplicated.
     2. SHARED      — .ri-shell, .ri-btn, resets. Reused sitewide.
     3. SECTIONS    — one block per section, prefixed .ri-<name>
     4. RESPONSIVE  — layout changes, per section
     5. MOBILE      — centring, at Elementor's 767px breakpoint

   Everything is namespaced .ri-* and scoped so it cannot leak
   into Elementor's own widgets or your theme's styles.

   The red X marks in Elementor's CSS editor are its old linter
   not understanding custom properties and clamp(). Harmless.
   Keep the @import on line 1 or the font won't load.
   ============================================================ */


/* ==========================================================
   1. TOKENS
   ========================================================== */
:root{
  /* brand */
  --ri-navy:#0B2A4A;
  --ri-navy-deep:#06192E;
  --ri-gold:#C0872B;
  --ri-gold-dark:#A67220;
  --ri-gold-lt:#E7BC6A;      /* gold that reads on navy */
  --ri-sea:#2F6F7C;

  /* neutrals */
  --ri-ink:#0F1A24;
  --ri-muted:#5A6B78;
  --ri-paper:#F3F6F5;
  --ri-white:#FFFFFF;
  --ri-line:rgba(11,42,74,.15);
  --ri-line-strong:rgba(11,42,74,.28);
  --ri-on-navy:#B9CBDB;      /* body text on a navy background */
  --ri-line-inv:rgba(255,255,255,.16);

  /* paper as raw channels, for gradients */
  --ri-paper-rgb:243,246,245;

  /* layout */
  --ri-shell:1180px;
  --ri-gutter:24px;
  --ri-step-gap:38px;    /* .ri-step-grid gap; connector maths depends on it */
  --ri-nav-h:76px;        /* your sticky nav + notice bar height */

  /* one radius family */
  --ri-r:10px;
  --ri-r-sm:8px;
  --ri-r-lg:14px;        /* large panels only; everything else uses --ri-r */

  /* one shadow scale, two steps */
  --ri-lift:0 1px 2px rgba(6,25,46,.06), 0 8px 24px -12px rgba(6,25,46,.22);
  --ri-lift-lg:0 2px 4px rgba(6,25,46,.08), 0 24px 48px -20px rgba(6,25,46,.35);

  --ri-font:'Overpass',system-ui,'Segoe UI',Arial,sans-serif;

  /* Paste your hero image URL here (the WordPress media URL).
     Only used by the mobile photo band; on desktop the photo
     comes from the section's own background setting. */
  --ri-hero-img:url('https://YOUR-SITE.com/wp-content/uploads/ritags-hero.jpg');
}


/* ==========================================================
   2. SHARED — reuse these in every section you build next
   ========================================================== */

/* Scoped reset. Only touches elements inside our own blocks,
   so Elementor widgets and theme styles are left alone. */
[class^="ri-"] *,
[class^="ri-"] *::before,
[class^="ri-"] *::after{box-sizing:border-box}

.ri-hero,
.ri-section{
  font-family:var(--ri-font);
  color:var(--ri-ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* The :where() here is load-bearing, not decoration. It keeps this
   reset at one-class specificity so it beats your theme's bare
   h1/p/a/ul rules, but still loses to the .ri-* component classes
   below it. Without it, `.ri-hero a` outranks `.ri-btn-primary`
   and every button loses its text colour. Keep it. */
.ri-hero :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote),
.ri-section :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote){
  margin:0;padding:0;
}
/* Most themes set a font-family directly on h1..h6, which beats
   inheritance from .ri-section. Force headings back to our stack
   or they render in the theme's serif. */
.ri-hero :where(h1,h2,h3,h4,h5,h6),
.ri-section :where(h1,h2,h3,h4,h5,h6){
  font-family:var(--ri-font);
  font-weight:700;
}
.ri-hero :where(ul,ol),
.ri-section :where(ul,ol){list-style:none}

.ri-hero :where(a),
.ri-section :where(a){text-decoration:none;color:inherit}

.ri-hero :where(svg),
.ri-section :where(svg){display:block}

/* themes give blockquote a left border/indent (the quote bar) and
   quotation-mark ::before content — strip both inside our sections */
.ri-hero :where(blockquote),
.ri-section :where(blockquote){border:0;quotes:none}
.ri-hero :where(blockquote)::before,
.ri-hero :where(blockquote)::after,
.ri-section :where(blockquote)::before,
.ri-section :where(blockquote)::after{content:none}

.ri-hero :where(select,label,input,textarea,button),
.ri-section :where(select,label,input,textarea,button){
  font-family:inherit;color:inherit;
}

/* centred content column */
.ri-shell{
  width:100%;
  max-width:var(--ri-shell);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--ri-gutter);
  padding-right:var(--ri-gutter);
}

/* buttons */
.ri-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:var(--ri-r);
  font-family:var(--ri-font);
  font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.ri-btn-primary{background:var(--ri-navy);color:var(--ri-white);box-shadow:var(--ri-lift)}
.ri-btn-primary:hover,
.ri-btn-primary:focus{background:var(--ri-navy-deep);color:var(--ri-white)}

.ri-btn-quiet{background:rgba(255,255,255,.72);color:var(--ri-navy-deep);border-color:var(--ri-line-strong)}
.ri-btn-quiet:hover,
.ri-btn-quiet:focus{background:var(--ri-white);border-color:var(--ri-navy);color:var(--ri-navy-deep)}

.ri-btn-gold{background:var(--ri-gold);color:var(--ri-white);box-shadow:var(--ri-lift)}
.ri-btn-gold:hover,
.ri-btn-gold:focus{background:var(--ri-gold-dark);color:var(--ri-white)}

.ri-hero :focus-visible,
.ri-section :focus-visible{outline:3px solid var(--ri-gold);outline-offset:3px;border-radius:4px}

/* section headings — reuse in every content section */
.ri-sec-title{
  font-size:clamp(28px,3.1vw,38px);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:800;
  color:var(--ri-navy-deep);
  max-width:22ch;
}
.ri-sec-lead{
  margin-top:16px;
  font-size:18px;
  line-height:1.6;
  color:var(--ri-muted);
  max-width:62ch;
}

/* Elementor housekeeping: the HTML widget adds wrappers that
   carry margins. Neutralise them. */
.ri-elementor-full .elementor-widget-container,
.ri-elementor-full .elementor-widget-html{margin:0;padding:0}


/* ==========================================================
   3. SECTION — HERO
   The section's own background image supplies the photo.
   The section overlay carries the type; there is
   deliberately no white card.
   ========================================================== */
/* The overlay lives on the SECTION, not on a div inside the widget,
   so it always covers the full background image no matter what
   width, min-height or padding you set in Elementor.

   Two ways to match the section, so it works either way:
     1. :has() finds the section automatically — nothing to set up.
     2. .ri-hero-sec is the manual fallback for older browsers;
        add it under Advanced -> CSS Classes (no leading dot). */
.ri-hero-sec,
.elementor-section:has(.ri-hero),
.e-con:has(.ri-hero),
.elementor-top-section:has(.ri-hero){position:relative}

.ri-hero-sec::before,
.elementor-section:has(.ri-hero)::before,
.e-con:has(.ri-hero)::before,
.elementor-top-section:has(.ri-hero)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* soften into the next section — lands on --ri-paper, which is
       why the section below must also be #F3F6F5 */
    linear-gradient(to bottom,
      rgba(var(--ri-paper-rgb),0) 58%,
      rgba(var(--ri-paper-rgb),.55) 82%,
      rgba(var(--ri-paper-rgb),1) 100%),
    /* legibility wash across the left — replaces the card */
    linear-gradient(100deg,
      rgba(var(--ri-paper-rgb),.90) 0%,
      rgba(var(--ri-paper-rgb),.88) 20%,
      rgba(var(--ri-paper-rgb),.70) 36%,
      rgba(var(--ri-paper-rgb),.24) 52%,
      rgba(var(--ri-paper-rgb),0) 66%);
}

/* .ri-hero is only a layout wrapper — height, min-height and
   padding stay Elementor's job. Its z-index is what lifts the
   content above the overlay, so don't remove it. */
.ri-hero{
  position:relative;
  z-index:1;
}

.ri-hero-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:48px;
  align-items:start;
}

/* ---- copy ---- */
.ri-hero-copy{max-width:40rem}

.ri-hero-title{
  font-family:var(--ri-font);
  font-size:clamp(32px,3.6vw,44px);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:800;
  color:var(--ri-navy-deep);
  max-width:none;
}
.ri-hero-title span{display:block}               /* setup / payoff, one colour */

.ri-hero-lead{
  margin-top:20px;
  font-size:18px;
  line-height:1.62;
  color:var(--ri-muted);
  max-width:44ch;
}

.ri-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.ri-hero-facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin-top:30px;padding-top:22px;
  border-top:1px solid var(--ri-line);
  font-size:15px;font-weight:600;color:var(--ri-navy);
}
.ri-hero-facts li{display:flex;align-items:center;gap:9px}
.ri-hero-facts svg{width:18px;height:18px;flex:none;color:var(--ri-sea)}

/* ---- plate: the one bold element ---- */
.ri-plate-wrap{
  justify-self:end;
  width:min(100%,276px);
  margin-top:40px;
  margin-left:auto;
}
.ri-plate{
  width:100%;height:auto;
  transform:rotate(-1.4deg);
  filter:drop-shadow(0 14px 22px rgba(6,25,46,.26));
}
.ri-hero-photo{display:flex;justify-content:flex-end}

/* ---- action bar ---- */
.ri-bar-wrap{
  position:relative;z-index:2;
  margin-top:42px;
}
.ri-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,.85fr);
  align-items:center;
  gap:20px;
  background:var(--ri-white);
  border:1px solid var(--ri-line);
  border-radius:var(--ri-r);
  padding:16px 18px;
  box-shadow:var(--ri-lift-lg);
}
.ri-field{min-width:0}
.ri-field label{
  display:block;margin-bottom:6px;
  font-size:13px;font-weight:700;color:var(--ri-muted);
}
.ri-select{position:relative}
.ri-select select{
  width:100%;
  padding:12px 40px 12px 14px;
  border:1.5px solid var(--ri-line-strong);
  border-radius:var(--ri-r-sm);
  background:var(--ri-white);
  font-size:15px;font-weight:600;
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
  transition:border-color .18s ease;
}
.ri-select select:hover{border-color:var(--ri-navy)}
.ri-select > svg{
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;
  color:var(--ri-muted);pointer-events:none;
}
.ri-bar .ri-btn-gold{align-self:end;padding:13px 22px}
.ri-bar-note{
  font-size:14px;line-height:1.45;color:var(--ri-muted);
  padding-left:20px;
  border-left:1px solid var(--ri-line);
}
.ri-bar-note b{color:var(--ri-navy);font-weight:700}


/* ==========================================================
   3b. SECTION — TRUST STRIP  (.ri-trust)
   Background in Elementor must be #F3F6F5 (--ri-paper), the
   same colour the hero's gradient fades to. White leaves a
   visible step at the seam. No bottom border needed — the
   navy band below supplies the edge. Section padding: 0.
   ========================================================== */
.ri-trust{
  padding-top:46px;
  padding-bottom:44px;
}

/* label + rule: the rule says "this heads the row below" */
.ri-trust-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
}
.ri-trust-label{
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--ri-muted);
  white-space:nowrap;
}
.ri-trust-rule{
  flex:1;
  height:1px;
  min-width:24px;
  background:var(--ri-line);
}

/* client row: even rhythm across the full measure */
.ri-trust-list{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:22px 30px;
}
.ri-trust-item{
  display:flex;
  align-items:center;
  gap:11px;
}

/* icon chip — gives each name a mark so the row reads as a
   logo lockup rather than a list of words */
.ri-trust-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:34px;
  height:34px;
  border-radius:9px;
  background:rgba(47,111,124,.12);
  color:var(--ri-sea);
}
.ri-trust-ico svg{width:19px;height:19px}

.ri-trust-name{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
  color:var(--ri-navy);
}


/* ==========================================================
   3c. SECTION — STATS BAND  (.ri-stats)
   Light text on navy. Set the navy background in Elementor
   (#0B2A4A) and leave the section padding at 0.
   ========================================================== */
.ri-stats{
  color:var(--ri-white);
  padding-top:52px;
  padding-bottom:52px;
}

.ri-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Divider is a pseudo-element, not a border, so it can be inset
   from the top and bottom instead of running the full block. */
.ri-stat{
  position:relative;
  padding:4px 40px;
}
.ri-stat:first-child{padding-left:0}
.ri-stat:last-child{padding-right:0}

.ri-stat + .ri-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:1px;
  background:var(--ri-line-inv);
}

/* icon chip — same language as the trust strip, gold on navy */
.ri-stat-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-bottom:18px;
  border-radius:10px;
  background:rgba(231,188,106,.14);
  color:var(--ri-gold-lt);
}
.ri-stat-ico svg{width:21px;height:21px}

/* value stays white and large; the qualifier drops to gold at a
   smaller size, so "+", "/5" and "days" all read the same way */
.ri-stat-num{
  font-size:clamp(36px,4.2vw,52px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:12px;
}
.ri-stat-num em{
  font-style:normal;
  font-size:.62em;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ri-gold-lt);
}

.ri-stat-label{
  font-size:15px;
  line-height:1.55;
  color:var(--ri-on-navy);
  max-width:28ch;
}


/* ==========================================================
   3d. SECTION — SERVICES GRID  (.ri-svc-sec)
   Background is yours to set in Elementor (paper or white).
   Cells are transparent, so the grid works on either.
   ========================================================== */
.ri-svc-sec{
  padding-top:76px;
  padding-bottom:76px;
}

.ri-svc-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  align-items:end;            /* button sits on the lead's baseline */
}

.ri-svc-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:48px;
}

/* Hairlines via box-shadow, not borders or a 1px gap. Adjacent
   shadows land on the same pixel so internal lines stay 1px, and
   it needs no nth-child maths — the grid can be 4, 2 or 1 columns
   wide and the lines are still correct. */
.ri-svc{
  padding:28px 24px 26px;
  box-shadow:0 0 0 1px var(--ri-line);
  transition:background-color .15s ease;
}
.ri-svc:hover{background:rgba(11,42,74,.03)}

/* one chip colour for all eight. The original alternated sea and
   gold on nth-child(4n+2)/(4n+3), which reads as accidental and
   breaks completely once the grid is 2 or 1 columns wide. */
.ri-svc-ico{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-bottom:16px;
  border-radius:11px;
  background:rgba(47,111,124,.12);
  color:var(--ri-sea);
}
.ri-svc-ico svg{width:22px;height:22px}

.ri-svc-name{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--ri-navy-deep);
  margin-bottom:7px;
}
.ri-svc-text{
  font-size:14.5px;
  line-height:1.55;
  color:var(--ri-muted);
}


/* ==========================================================
   3e. SECTION — HOW IT WORKS  (.ri-how)
   Background is yours to set in Elementor.
   ========================================================== */
.ri-how{
  padding-top:76px;
  padding-bottom:76px;
}

.ri-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ri-step-gap);
  margin-top:52px;
}

/* The connector belongs to each step, not to the row. A single
   line spanning the whole row runs through the gaps and trails
   off past the last badge with nothing to connect to. */
.ri-step{
  position:relative;
  display:flex;
  flex-direction:column;      /* lets the art sit on a shared baseline */
}
.ri-step::after{
  content:"";
  position:absolute;
  top:29px;                                      /* centre of the 60px badge */
  left:74px;                                     /* badge width + 14 */
  right:calc(var(--ri-step-gap) * -1);           /* lands on the next badge */
  border-top:2px dashed rgba(192,135,43,.5);
}
.ri-step:last-child::after{display:none}         /* nothing to connect to */

.ri-step-num{
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:50%;
  background:var(--ri-navy);
  color:var(--ri-white);
  font-size:21px;
  font-weight:800;
  letter-spacing:-.02em;
}

.ri-step-name{
  margin-top:26px;
  margin-bottom:9px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--ri-navy-deep);
}
.ri-step-text{
  font-size:16px;
  line-height:1.55;
  color:var(--ri-muted);
  max-width:34ch;
  margin-bottom:22px;         /* minimum gap before the art */
}

/* all three share one viewBox ratio, so widths match heights.
   margin-top:auto pushes every card to the bottom of its column,
   so the three line up even though the copy lengths differ. */
.ri-step-art{
  width:100%;
  height:auto;
  margin-top:auto;
  border-radius:12px;
  border:1px solid var(--ri-line);
  background:var(--ri-white);
}


/* ==========================================================
   3f. SECTION — AUDIENCES  (.ri-aud)
   Two panels: light and navy. Background is yours to set.
   ========================================================== */
.ri-aud{
  padding-top:76px;
  padding-bottom:76px;
}

.ri-aud-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  margin-top:48px;
  align-items:stretch;        /* both panels take the taller height */
}

.ri-panel{
  display:flex;
  flex-direction:column;
  padding:36px 32px;
  border-radius:var(--ri-r-lg);
}
.ri-panel-light{
  background:var(--ri-white);
  border:1px solid var(--ri-line);
}
.ri-panel-dark{
  background:var(--ri-navy);
  color:var(--ri-white);
}

/* the tab names the audience, so it earns its place */
.ri-panel-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  padding:7px 13px 7px 10px;
  border-radius:99px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.01em;
}
.ri-panel-tab svg{width:18px;height:18px;flex:none}
.ri-panel-light .ri-panel-tab{background:rgba(47,111,124,.12);color:var(--ri-sea)}
.ri-panel-dark .ri-panel-tab{background:rgba(231,188,106,.18);color:var(--ri-gold-lt)}

.ri-panel-name{
  margin-top:18px;
  margin-bottom:20px;
  font-size:clamp(22px,2.1vw,26px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
  max-width:22ch;
}
.ri-panel-light .ri-panel-name{color:var(--ri-navy-deep)}
.ri-panel-dark .ri-panel-name{color:var(--ri-white)}

.ri-panel-art{
  margin:0 0 22px;
  border-radius:var(--ri-r);
  overflow:hidden;            /* clips the artwork to the radius */
}
.ri-panel-art svg{width:100%;height:auto;display:block}

.ri-panel-list{
  display:grid;
  gap:11px;
  margin-bottom:26px;
}
.ri-panel-list li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:16px;
  line-height:1.45;
}
.ri-panel-list svg{width:18px;height:18px;flex:none;margin-top:3px}
.ri-panel-light .ri-panel-list svg{color:var(--ri-sea)}
.ri-panel-dark .ri-panel-list li{color:#D6E3EE}
.ri-panel-dark .ri-panel-list svg{color:var(--ri-gold-lt)}

/* margin-top:auto pins both CTAs to the bottom of the taller
   panel, so they align even when the copy lengths differ */
.ri-panel .ri-btn{
  margin-top:auto;
  align-self:flex-start;
}


/* ==========================================================
   3g. SECTION — COVERAGE  (.ri-cov)
   Map beside the copy. Background is yours to set — paper
   (#F3F6F5) suits it, since the town chips are white.
   ========================================================== */
.ri-cov{
  padding-top:76px;
  padding-bottom:76px;
}

/* The map is a fixed-size illustration, so it gets a fixed track
   rather than a fraction. A .95fr / 1.05fr split leaves a 300px
   map floating in half the page with the copy cramped beside it. */
.ri-cov-grid{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:56px;
  align-items:start;
}
.ri-cov-map svg{
  width:100%;
  height:auto;
  display:block;
}

.ri-cov-body .ri-sec-title{max-width:24ch}

/* Chips, not a fixed 3-column grid. Nine towns in a rigid grid
   orphan at most widths; chips reflow to any measure and the
   list can grow without touching the CSS. */
.ri-town-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.ri-town{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px 8px 11px;
  border-radius:99px;
  background:var(--ri-white);
  border:1px solid var(--ri-line);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ri-navy);
}
.ri-town svg{width:17px;height:17px;flex:none;color:var(--ri-sea)}

/* the closing chip carries the actual claim, so it reads as a
   summary rather than another town */
.ri-town-all{
  padding-left:14px;
  background:rgba(192,135,43,.12);
  border-color:rgba(192,135,43,.32);
  color:var(--ri-gold-dark);
}

.ri-cov-note{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-top:30px;
  padding:16px 18px;
  border-radius:var(--ri-r);
  background:rgba(47,111,124,.08);
  font-size:15px;
  line-height:1.55;
  color:var(--ri-muted);
}
.ri-cov-note svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--ri-sea)}


/* ==========================================================
   3h. SECTION — TESTIMONIALS  (.ri-rev-sec)
   ========================================================== */
.ri-rev-sec{padding-top:76px;padding-bottom:76px}
.ri-rev-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:48px;
  align-items:stretch;
}
.ri-rev{
  display:flex;
  flex-direction:column;
  padding:30px 28px;
  background:var(--ri-white);
  border:1px solid var(--ri-line);
  border-radius:var(--ri-r);
}
.ri-rev-stars{display:flex;gap:3px;color:var(--ri-gold);margin-bottom:16px}
.ri-rev-stars svg{width:18px;height:18px}
.ri-rev-quote{
  font-size:16px;
  line-height:1.6;
  color:var(--ri-ink);
}
/* margin-top:auto drops the attribution to the card floor, so the
   dividers align even when quotes are different lengths */
.ri-rev-who{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:auto;
  padding-top:22px;
}
.ri-rev-quote + .ri-rev-who{margin-top:auto}
.ri-rev-avatar{
  display:grid;
  place-items:center;
  width:44px;height:44px;flex:none;
  border-radius:50%;
  font-size:15px;font-weight:800;letter-spacing:-.02em;
}
.ri-rev-id{display:flex;flex-direction:column;line-height:1.3}
.ri-rev-id b{font-size:15px;color:var(--ri-navy-deep)}
.ri-rev-id span{font-size:13.5px;color:var(--ri-muted)}
/* the divider above the attribution */
.ri-rev-who{border-top:1px solid var(--ri-line)}


/* ==========================================================
   3i. SECTION — PRICING  (.ri-price)
   ========================================================== */
.ri-price{padding-top:76px;padding-bottom:76px}
.ri-tier-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:48px;
  border:1px solid var(--ri-line);
  border-radius:var(--ri-r-lg);
  overflow:hidden;              /* clips the feature top-bar to the radius */
  background:var(--ri-white);
}
.ri-tier{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:30px 28px;
  box-shadow:0 0 0 1px var(--ri-line);   /* internal 1px dividers */
}
/* the chosen tier: tinted panel + gold top edge, no size change so
   the row stays level */
.ri-tier-feature{
  background:#FBF7EF;
  box-shadow:0 0 0 1px var(--ri-line), inset 0 4px 0 var(--ri-gold);
}
.ri-tier-ico{
  display:inline-grid;place-items:center;
  width:44px;height:44px;margin-bottom:16px;
  border-radius:11px;
  background:rgba(47,111,124,.12);color:var(--ri-sea);
}
.ri-tier-feature .ri-tier-ico{background:rgba(192,135,43,.16);color:var(--ri-gold-dark)}
.ri-tier-ico svg{width:22px;height:22px}
.ri-tier-name{
  font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3;
  color:var(--ri-navy-deep);
  padding-right:96px;           /* clears the corner ribbon */
  min-height:2.6em;             /* reserve two lines so prices align */
}
.ri-tier-flag{
  position:absolute;
  top:22px;right:24px;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;
  background:var(--ri-gold);color:var(--ri-white);
}
.ri-tier-desc{
  margin-top:9px;
  font-size:14.5px;line-height:1.5;color:var(--ri-muted);
  min-height:2.8em;             /* locks the price row level across tiers */
}
.ri-tier-price{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  min-height:44px;              /* Custom and $NNN share one baseline */
  margin:20px 0 22px;
}
.ri-tier-price b{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--ri-navy-deep);line-height:1}
.ri-tier-price span{font-size:14px;font-weight:600;color:var(--ri-muted)}
.ri-tier-list{display:grid;gap:12px;margin-bottom:26px}
.ri-tier-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--ri-ink)}
.ri-tier-list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ri-sea)}
.ri-btn-block{width:100%;margin-top:auto}   /* CTAs pinned to the bottom */
.ri-fee-note{margin-top:28px}


/* ==========================================================
   3j. SECTION — FAQ  (.ri-faq)
   ========================================================== */
.ri-faq{padding-top:76px;padding-bottom:76px}
.ri-faq-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;
  align-items:start;
}
.ri-faq-sub{font-size:16px;max-width:32ch}
.ri-faq-call{margin-top:22px;gap:8px}
.ri-faq-call svg{width:18px;height:18px}

.ri-faq-list{display:flex;flex-direction:column}
.ri-qa{border-top:1px solid var(--ri-line)}
.ri-qa:last-child{border-bottom:1px solid var(--ri-line)}
.ri-qa-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 2px;
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--ri-navy-deep);
  cursor:pointer;list-style:none;
}
.ri-qa-q::-webkit-details-marker{display:none}
.ri-qa-chev{width:20px;height:20px;flex:none;color:var(--ri-sea);transition:transform .2s ease}
.ri-qa[open] .ri-qa-chev{transform:rotate(180deg)}
.ri-qa-a{
  padding:0 2px 22px;
  font-size:15.5px;line-height:1.6;color:var(--ri-muted);
  max-width:64ch;
}


/* ==========================================================
   3k. SECTION — CLOSING CTA  (.ri-cta-sec)
   ========================================================== */
.ri-cta-sec{padding-top:20px;padding-bottom:76px}
.ri-cta{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) auto;
  gap:36px;
  align-items:center;
  padding:52px 48px;
  border-radius:var(--ri-r-lg);
  background:var(--ri-navy-deep);
  color:var(--ri-white);
}
.ri-cta-title{
  font-size:clamp(26px,3vw,38px);
  line-height:1.08;letter-spacing:-.03em;font-weight:800;
  color:var(--ri-white);          /* theme colours h2 dark; force white on navy */
  max-width:18ch;margin-bottom:12px;
}
.ri-cta-text{color:var(--ri-on-navy);max-width:52ch;font-size:16px;line-height:1.6}
.ri-cta-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.ri-cta-actions .ri-btn-gold{white-space:nowrap}
.ri-cta-phone{
  display:inline-flex;align-items:center;gap:11px;
  font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ri-white);
}
.ri-cta-phone svg{width:22px;height:22px;color:var(--ri-gold-lt)}


/* ==========================================================
   3l. FOOTER  (.ri-foot)
   ========================================================== */
.ri-foot{padding-top:60px;padding-bottom:32px;color:#A9BFD1;font-size:15px}
.ri-foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:40px;
}
.ri-foot-logo{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ri-white)}
.ri-foot-logo span{color:var(--ri-gold-lt)}
.ri-foot-tag{margin-top:12px;line-height:1.55;max-width:34ch;color:#A9BFD1}
.ri-foot-social{display:flex;gap:10px;margin-top:18px}
.ri-foot-social a{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:9px;
  border:1px solid rgba(255,255,255,.2);color:#C9D8E6;
  transition:border-color .18s ease,color .18s ease;
}
.ri-foot-social a:hover{border-color:var(--ri-gold-lt);color:var(--ri-white)}
.ri-foot-social svg{width:18px;height:18px}
.ri-foot-h{color:var(--ri-white);font-size:14px;font-weight:800;letter-spacing:.02em;margin-bottom:14px}
.ri-foot-links li,.ri-foot-contact li{margin-bottom:10px}
.ri-foot-links a{color:#A9BFD1;transition:color .18s ease}
.ri-foot-links a:hover{color:var(--ri-white)}
.ri-foot-contact li{display:flex;align-items:flex-start;gap:10px}
.ri-foot-contact svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ri-gold-lt)}
.ri-foot-contact a{color:#A9BFD1}
.ri-foot-contact a:hover{color:var(--ri-white)}
.ri-foot-disclaimer{
  margin:34px auto 0;          /* auto side margins centre the block */
  max-width:80ch;
  font-size:13.5px;line-height:1.55;color:#8296A9;
  text-align:center;
}
.ri-foot-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;
  margin-top:22px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px;color:#8296A9;
}


/* ==========================================================
   3m. SECTION — QUOTE  (.ri-quote-sec)
   Navy section (set --ri-navy #0B2A4A in Elementor). Left copy
   is light; the right column holds a Fluent Forms shortcode,
   restyled below to match the site.
   ========================================================== */
.ri-quote-sec{padding-top:76px;padding-bottom:76px;color:var(--ri-white)}
.ri-quote-grid{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:52px;
  align-items:start;
}
.ri-quote-title{color:var(--ri-white);max-width:18ch}
.ri-quote-lead{color:var(--ri-on-navy)}

.ri-quote-facts{display:grid;gap:14px;margin-top:30px}
.ri-quote-facts li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.4}
.ri-quote-facts svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--ri-gold-lt)}

.ri-quote-callout{
  display:flex;align-items:center;gap:14px;
  margin-top:30px;padding:18px 20px;
  border-radius:var(--ri-r);
  background:rgba(255,255,255,.06);
  border-left:3px solid var(--ri-gold);
}
.ri-quote-callout > svg{width:26px;height:26px;flex:none;color:var(--ri-gold-lt)}
.ri-quote-callout-body{display:flex;flex-direction:column;line-height:1.3}
.ri-quote-callout-body span{font-size:14px;color:var(--ri-on-navy)}
.ri-quote-callout-body a{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ri-white)}


/* ==========================================================
   3m-b. FLUENT FORMS SKIN  (inside .ri-quote-form)
   Scoped so it only touches the form in this section. If your
   form's field names differ, the element .elementor-kit-2858s below still
   apply — they target Fluent's structure, not your field ids.
   ========================================================== */
.ri-quote-form{
  width:100%;
  background:var(--ri-white);
  border-radius:var(--ri-r-lg);
  padding:30px 28px;
  box-shadow:var(--ri-lift-lg);
  color:var(--ri-ink);
}
/* Fluent wraps the form in .ff-form / .frm-fluent-form, and both
   can carry their own max-width or border. Neutralise so the form
   uses the full card width instead of leaving a gap on the right. */
.ri-quote-form .fluentform,
.ri-quote-form .ff-form,
.ri-quote-form form,
.ri-quote-form .ff-el-group,
.ri-quote-form .ff-step-body,
.ri-quote-form .ff-t-container{
  width:100%;
  max-width:100%;
}
.ri-quote-form form{border:0;padding:0;margin:0;background:transparent;box-shadow:none}

/* headings/labels */
.ri-quote-form .ff-el-group{margin-bottom:16px}
.ri-quote-form .ff-el-input--label label,
.ri-quote-form .ff_ffem_lbl,
.ri-quote-form label{
  font-family:var(--ri-font);
  font-size:14px;font-weight:700;color:var(--ri-navy-deep);
  margin-bottom:7px;
}

/* text inputs, selects, textareas */
.ri-quote-form input[type="text"],
.ri-quote-form input[type="email"],
.ri-quote-form input[type="tel"],
.ri-quote-form input[type="number"],
.ri-quote-form input[type="url"],
.ri-quote-form select,
.ri-quote-form textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--ri-line-strong);
  border-radius:var(--ri-r-sm);
  background:var(--ri-white);
  font-family:var(--ri-font);font-size:15px;font-weight:500;color:var(--ri-ink);
  box-shadow:none;
  transition:border-color .18s ease;
}
.ri-quote-form textarea{min-height:88px;resize:vertical}
.ri-quote-form input:focus,
.ri-quote-form select:focus,
.ri-quote-form textarea:focus{
  outline:none;border-color:var(--ri-navy);box-shadow:none;
}
.ri-quote-form input::placeholder,
.ri-quote-form textarea::placeholder{color:var(--ri-muted);opacity:1}

/* two-up rows Fluent renders as .ff-t-container columns */
.ri-quote-form .ff-t-container{gap:12px}

/* radio / checkbox as pill choices, matching the site */
.ri-quote-form .ff-el-form-check{margin:4px 0}
.ri-quote-form .ff-el-form-check-label{
  font-family:var(--ri-font);font-size:14px;font-weight:600;color:var(--ri-navy-deep);
}
.ri-quote-form input[type="radio"],
.ri-quote-form input[type="checkbox"]{accent-color:var(--ri-navy)}

/* submit button — reuse the site's primary button */
.ri-quote-form .ff-btn-submit,
.ri-quote-form button[type="submit"]{
  width:100%;
  padding:14px 24px;
  border:none;border-radius:var(--ri-r);
  background:var(--ri-navy);color:var(--ri-white);
  font-family:var(--ri-font);font-size:15px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:var(--ri-lift);
  transition:background-color .18s ease;
}
.ri-quote-form .ff-btn-submit:hover,
.ri-quote-form button[type="submit"]:hover{background:var(--ri-navy-deep)}

/* validation + success messages */
.ri-quote-form .ff-el-is-error input,
.ri-quote-form .ff-el-is-error select,
.ri-quote-form .ff-el-is-error textarea{border-color:#B4341F}
.ri-quote-form .error,
.ri-quote-form .text-danger{color:#B4341F;font-size:13px;margin-top:5px}
.ri-quote-form .ff-message-success{
  padding:16px 18px;border-radius:var(--ri-r);
  background:rgba(47,111,124,.10);color:var(--ri-navy-deep);
  font-size:15px;line-height:1.5;
}

/* ==========================================================
   4. RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .ri-plate-wrap{width:min(100%,240px)}
}

/* Photo moves out from behind the type and becomes its own band.
   Set the section's background image to "none" on Mobile in
   Elementor if you prefer — this rule paints it instead. */
@media (max-width:900px){
  /* Mobile keeps the SECTION's own background photo (whatever you
     set in Elementor). We just swap the desktop left-wash for a
     vertical one, so the photo shows at the top and fades to solid
     paper behind the copy. No image URL is needed in the CSS. */
  /* focus the section photo on its lower-right (car + lighthouse)
     for the mobile band; override in Elementor's mobile bg position
     if you prefer a different crop */
  .ri-hero-sec,
  .elementor-section:has(.ri-hero),
  .e-con:has(.ri-hero){background-position:72% 42% !important}
  .ri-hero-sec::before,
  .elementor-section:has(.ri-hero)::before,
  .e-con:has(.ri-hero)::before,
  .elementor-top-section:has(.ri-hero)::before{
    display:block;
    background:linear-gradient(to bottom,
      rgba(var(--ri-paper-rgb),.32) 0%,
      rgba(var(--ri-paper-rgb),.52) 26%,
      rgba(var(--ri-paper-rgb),.88) 48%,
      rgba(var(--ri-paper-rgb),.99) 66%,
      var(--ri-paper) 100%);
  }
  .ri-hero-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  /* a transparent window onto the section photo, holding the plate */
  .ri-hero-photo{
    order:-1;
    position:relative;
    display:block;
    height:clamp(210px,32vh,280px);
    margin:0 0 6px;
    background:none;
  }
  .ri-plate-wrap{
    position:absolute;
    right:0;bottom:2px;               /* sits over the car side of the photo */
    left:auto;
    width:min(52%,186px);
    margin:0;
  }
  .ri-hero-copy{max-width:none}
  .ri-bar-wrap{margin-top:34px}
  .ri-bar{grid-template-columns:1fr;gap:14px}
  .ri-bar .ri-btn-gold{width:100%;align-self:stretch}
  .ri-bar-note{padding:14px 0 0;border-left:0;border-top:1px solid var(--ri-line)}

  /* --- quote: form drops below the copy --- */
  .ri-quote-sec{padding-top:60px;padding-bottom:60px}
  .ri-quote-grid{grid-template-columns:1fr;gap:36px}
  .ri-quote-title{max-width:none}

  /* --- testimonials --- */
  .ri-rev-sec{padding-top:60px;padding-bottom:60px}
  .ri-rev-grid{grid-template-columns:1fr;gap:18px;margin-top:38px}

  /* --- pricing: one tier per row, borders become horizontal --- */
  .ri-price{padding-top:60px;padding-bottom:60px}
  .ri-tier-grid{grid-template-columns:1fr}
  .ri-tier-feature{box-shadow:0 0 0 1px var(--ri-line), inset 4px 0 0 var(--ri-gold)}
  .ri-tier-desc{min-height:0}

  /* --- faq: aside above the list --- */
  .ri-faq{padding-top:60px;padding-bottom:60px}
  .ri-faq-grid{grid-template-columns:1fr;gap:36px}

  /* --- cta: actions drop below the copy --- */
  .ri-cta{grid-template-columns:1fr;gap:26px;padding:40px 32px}

  /* --- footer: 2 columns, brand spans the top --- */
  .ri-foot-grid{grid-template-columns:1fr 1fr;gap:32px 40px}
  .ri-foot-brand{grid-column:1 / -1}

  /* --- coverage: map moves above the copy --- */
  .ri-cov{padding-top:60px;padding-bottom:60px}
  .ri-cov-grid{grid-template-columns:1fr;gap:36px}
  .ri-cov-map{max-width:230px}
  .ri-cov-body .ri-sec-title{max-width:none}

  /* --- audiences: two panels side by side get too narrow for the
     artwork and the five-item lists, so stack them --- */
  .ri-aud{padding-top:60px;padding-bottom:60px}
  .ri-aud-grid{grid-template-columns:1fr;gap:20px;margin-top:38px}
  .ri-panel-name{max-width:none}

  /* --- how it works: one step per row, art beside the copy.
     Three columns squeeze the art illustrations too small, and
     two columns would orphan the third step. --- */
  .ri-how{padding-top:60px;padding-bottom:60px}
  .ri-step-grid{grid-template-columns:1fr;gap:38px;margin-top:40px}
  .ri-step::after{display:none}
  .ri-step{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,290px);
    column-gap:30px;
  }
  .ri-step-num{grid-area:1 / 1}
  .ri-step-name{grid-area:2 / 1;margin-top:20px}
  .ri-step-text{grid-area:3 / 1;max-width:none}
  .ri-step-art{grid-area:1 / 2 / 4 / 3;align-self:center;margin-top:0}
  .ri-step-text{margin-bottom:0}

  /* --- services grid --- */
  .ri-svc-sec{padding-top:60px;padding-bottom:60px}
  .ri-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:38px}
  .ri-sec-title{max-width:none}

  /* --- stats band: stays 3-across, just tighter. Two columns
     would orphan the third stat on its own row. --- */
  .ri-stats{padding-top:44px;padding-bottom:44px}
  .ri-stat{padding:4px 22px}
  .ri-stat-num{font-size:34px}
  .ri-stat-ico{width:34px;height:34px;margin-bottom:14px}
  .ri-stat-ico svg{width:19px;height:19px}
  .ri-stat-label{font-size:14px;max-width:none}

  /* --- trust strip --- */
  .ri-trust{padding-top:38px;padding-bottom:34px}
  .ri-trust-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 20px;
  }
}

@media (max-width:560px){
  .ri-quote-form .ff-t-container{flex-direction:column}

  .ri-hero-actions{flex-direction:column;align-items:stretch}
  .ri-hero-actions .ri-btn{width:100%}
  .ri-hero-facts{flex-direction:column;gap:10px}

  /* --- trust strip --- */
  .ri-trust-head{gap:14px;margin-bottom:20px}
  .ri-trust-label{white-space:normal}
  .ri-trust-rule{display:none}
  .ri-trust-list{grid-template-columns:1fr;gap:14px}
  .ri-trust-ico{width:30px;height:30px;border-radius:8px}
  .ri-trust-ico svg{width:17px;height:17px}
}

@media (prefers-reduced-motion:reduce){
  .ri-hero *,.ri-section *{transition:none !important}
}


/* ==========================================================
   5. MOBILE CENTRING
   Everything centres at Elementor's mobile breakpoint (767px).
   Kept as one block at the end so it's obvious where centring
   comes from, and so it wins over the layout rules above it.
   ========================================================== */
@media (max-width:767px){
  .ri-hero,
  .ri-section{text-align:center}

  /* blocks with their own max-width need re-centring, or
     text-align:center just centres text inside a left-hugging box */
  .ri-hero-copy,
  .ri-hero-lead{margin-left:auto;margin-right:auto}

  .ri-hero-actions{
    justify-content:center;
    /* divider moves here so it still spans the full width once
       the facts list becomes an inline block */
    padding-bottom:26px;
    border-bottom:1px solid var(--ri-line);
  }

  /* inline-flex + flex-start keeps every tick on the same left
     edge while the whole group centres inside the column.
     Centring each <li> individually staggers the icons. */
  .ri-hero-facts{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    border-top:0;
    padding-top:0;
    margin-top:26px;
  }

  /* plate straddles the seam centred instead of left-aligned */
  .ri-plate-wrap{
    left:50%;
    transform:translateX(-50%);
  }

  /* select needs both properties: Chrome/Safari honour text-align,
     Firefox only honours text-align-last */
  .ri-select select{
    text-align:center;
    text-align-last:center;
    padding-left:40px;
  }
  .ri-bar-note{text-align:center}

  /* --- quote: centre the copy on mobile; only the form fields
     stay left-aligned (centred inputs read wrong) --- */
  .ri-quote-form{text-align:left}
  /* facts centre as a block but keep a shared left edge for the ticks */
  .ri-quote-facts{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  /* callout stacks: icon on top, centred text, gold edge moves up top */
  .ri-quote-callout{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    border-left:0;
    border-top:3px solid var(--ri-gold);
  }
  .ri-quote-callout-body{align-items:center}

  /* --- testimonials: keep left-aligned, just full width --- */
  .ri-rev{text-align:left}

  /* --- pricing --- */
  .ri-tier-name{padding-right:0;text-align:center;min-height:0}
  .ri-tier-price{justify-content:center}
  .ri-tier-list{max-width:30ch;margin-left:auto;margin-right:auto;text-align:left}
  .ri-tier-desc{margin-left:auto;margin-right:auto}

  /* --- faq: heading centres, rows stay left --- */
  .ri-faq-aside{text-align:center}
  .ri-faq-sub{margin-left:auto;margin-right:auto}
  .ri-faq-call{align-self:center}
  .ri-qa-q{text-align:left}

  /* --- cta: centre the copy, stretch the actions --- */
  .ri-cta{text-align:center}
  .ri-cta-title{margin-left:auto;margin-right:auto}
  .ri-cta-text{margin-left:auto;margin-right:auto}
  .ri-cta-actions{align-items:stretch}
  .ri-cta-actions .ri-btn-gold{text-align:center}
  .ri-cta-phone{justify-content:center}

  /* --- footer: single column, centred --- */
  .ri-foot{text-align:center}
  .ri-foot-grid{grid-template-columns:1fr;gap:30px}
  .ri-foot-tag{margin-left:auto;margin-right:auto}
  .ri-foot-social{justify-content:center}
  .ri-foot-contact li{justify-content:center}
  .ri-foot-bottom{justify-content:center;text-align:center}

  /* coverage: map centred above centred copy */
  .ri-cov-map{margin-left:auto;margin-right:auto}
  .ri-town-list{justify-content:center}
  .ri-cov-note{text-align:left}      /* wrapped lines stay under the icon */

  /* audiences: centred, with the tick column preserved */
  .ri-panel{padding:30px 22px}
  .ri-panel-tab{align-self:center}
  .ri-panel-name{margin-left:auto;margin-right:auto}
  .ri-panel-list{
    justify-content:center;   /* grid tracks centre as a block */
    margin-left:auto;
    margin-right:auto;
    text-align:left;          /* wrapped lines stay flush under the tick */
  }
  .ri-panel .ri-btn{align-self:center}

  /* how it works: fully stacked, badge centred */
  .ri-step{display:block}
  .ri-step-num{margin-left:auto;margin-right:auto}
  .ri-step-name{margin-top:22px}
  .ri-step-text{margin-left:auto;margin-right:auto;max-width:38ch}
  .ri-step-art{margin-top:0}
  .ri-step-text{margin-bottom:22px}

  /* services: single column, head stacks under the copy */
  .ri-svc-head{grid-template-columns:1fr;gap:24px;justify-items:center}
  .ri-svc-grid{grid-template-columns:1fr;margin-top:32px}
  .ri-sec-lead{margin-left:auto;margin-right:auto}
  .ri-svc-text{max-width:34ch;margin-left:auto;margin-right:auto}

  /* one stacked column; the vertical divider becomes a rule */
  .ri-stats-grid{grid-template-columns:1fr;gap:0}
  .ri-stat{padding:0}
  .ri-stat + .ri-stat::before{display:none}
  .ri-stat + .ri-stat{
    margin-top:30px;
    padding-top:30px;
    border-top:1px solid var(--ri-line-inv);
  }
  .ri-stat-num{font-size:40px}
  .ri-stat-label{margin-left:auto;margin-right:auto;max-width:30ch}

  .ri-trust-head{justify-content:center}
  .ri-trust-rule{display:none}
  .ri-trust-label{white-space:normal}

  /* same treatment: one shared left edge for the chips */
  .ri-trust-list{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }
}/* End custom CSS */