/* ============================================================================
   PET SEARCH CANADA — replica design tokens
   EXTRACTION-DERIVED. Every value below was measured from a live browser render
   of https://www.rega.ch/en/ (primary) and https://www.engelberg.ch/en/ (the
   section-header rule + mosaic band only). Nothing here is a design choice.
   Source of truth: capture/rega/{tokens,structure,responsive,states,motion}.json
   Namespace: rga-*  (a self-contained replica layer; never reuses psc-*)
   ========================================================================== */
:root {
  /* ---- Colour (rega tokens.json + recovered CSS vars) --------------------- */
  --rga-red:          #ED0000;   /* rgb(237,0,0)   — CTA, arrows, accents      */
  --rga-red-hover:    #C40000;   /* derived shade (source hover unmeasurable)  */
  --rga-taupe:        #7F715B;   /* rgb(127,113,91) — secondary button / --btn */
  --rga-taupe-hover:  #5E5343;   /* --btn-hover                                */
  --rga-bg:           #F7F6F5;   /* --bg      — section + footer canvas        */
  --rga-bg-hover:     #ECE9E1;   /* --bg-hover — chips, hover states           */
  --rga-border:       #D8D3CB;   /* --border                                   */
  --rga-ink:          #3F3F3F;   /* rgb(63,63,63) — body text (883 uses)       */
  --rga-black:        #000000;   /* headings                                   */
  --rga-white:        #FFFFFF;
  --rga-scrim:        rgba(63,63,63,.6);   /* rgba(63,63,63,0.6) — image scrim */
  --rga-tile-dark:    #3F3F3F;             /* mosaic icon tile (rega-palette)  */

  /* ---- Type ---------------------------------------------------------------
     Source family: Univers (Linotype, proprietary — pending an owner license
     decision, see project handoff). Interim substitute: Public Sans — a free
     (SIL OFL), Helvetica/Univers-style neutral grotesque with a true 100/300/
     400/700 range, closer to Univers' DNA than Inter (2026-08-23 swap).      */
  --rga-font: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --rga-w-thin: 100;   /* section headings, legal row  (24 uses)  */
  --rga-w-light: 300;  /* body — the dominant weight   (923 uses) */
  --rga-w-reg: 400;
  --rga-w-bold: 700;   /* buttons, kickers, footer heads (139)    */

  /* Measured sizes @1280 (fluid pairs derived from fonts-breakpoints.json
     fluidSamples: 390 / 768 / 1280 / 1680).
     Expressed in px, NOT rem: Advanced Themer sets html{font-size:62.5%}
     site-wide (base-font 10), so rem here would render everything at 62.5%. */
  --rga-fs-hero:    clamp(52px, 22.4px + 7.4vw, 120px);  /* →120px  */
  --rga-lh-hero:    1.25;                                     /* 150/120 */
  --rga-fs-section: clamp(32px, 20px + 2.5vw, 44.96px);   /* →44.96px */
  --rga-lh-section: 1.25;                                     /* 56.2/44.96 */
  --rga-fs-search:  clamp(20px, 15.2px + 1vw, 27.2px);   /* →27.2px  */
  --rga-fs-tile:    clamp(24px, 8.8px + 2.44vw, 40px); /* →40.0px @1280 (engelberg h3) */
  --rga-fs-caption: 24px;      /* 24px  teaser caption, weight 300  */
  --rga-fs-lead:    20.8px;      /* 20.8px hero subline / bar labels  */
  --rga-fs-title:   20px;     /* 20px   card title, weight 700     */
  --rga-fs-body:    16px;        /* 16px   weight 300 (909 uses)      */
  --rga-fs-meta:    14.08px;     /* 14.08px date + legal row          */
  --rga-lh-body:    1.5;         /* 24/16 */
  --rga-ls-caps:    1px;         /* buttons + footer headings         */

  /* ---- Layout (structure.json / responsive.json) ------------------------- */
  --rga-container:  1260px;  /* .container measured 1260 @1280vw   */
  --rga-gutter:     15px;    /* bootstrap col padding on source     */
  --rga-sec-pt:     150px;   /* .section padding-top — widened from the
                                 measured 110px (2026-08-23, client-directed:
                                 more breathing room between sections).       */
  --rga-sec-pb:     65px;    /* .section padding-bottom — widened again from
                                 35px alongside --rga-sec-pt, same ~2.3:1
                                 ratio, same client direction.                */
  --rga-hero-h:     900px;   /* #kopfSpalte measured height         */
  --rga-bar-h:      81px;    /* #sideMeta action bar                */
  --rga-header-h:   122px;   /* #kopf                               */
  --rga-tile-h:     306px;   /* engelberg mosaic tile               */
  --rga-tile-gap:   1px;     /* engelberg: 1px solid #fff per tile  */

  /* ---- Motion (motion.json — reproduce these exactly) -------------------- */
  --rga-t-img:  .4s ease-in-out;  /* teaser/news image hover         */
  --rga-t-bar:  .4s;              /* #sidebar `transition: top .4s`  */
  --rga-t-nav:  opacity .4s;      /* #navigation overlay             */
  --rga-t-btn:  background .3s;   /* button hover                    */
  --rga-t-link: color .25s;       /* text-link hover — extends rega's hover language sitewide */
  --rga-t-tile: .5s;              /* engelberg tile hover            */
}

@media (prefers-reduced-motion: reduce) {
  :root { --rga-t-img: 0s; --rga-t-bar: 0s; --rga-t-nav: 0s; --rga-t-btn: 0s; --rga-t-tile: 0s; --rga-t-link: 0s; }
}
/* ============================================================================
   rga-* — replica component layer for Pet Search Canada
   Every declared value traces to a measured source value (see comments).
   Sources: rega.ch/en (primary) · engelberg.ch/en (mosaic + section-header rule)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--rga-font);
  font-size: var(--rga-fs-body);
  font-weight: var(--rga-w-light);      /* rega body = 300 */
  line-height: var(--rga-lh-body);
  color: var(--rga-ink);                /* #3F3F3F */
  background: var(--rga-white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.rga-skip {
  position: absolute; left: 0; top: -100px; z-index: 999;
  background: var(--rga-red); color: #fff; padding: 12px 24px; font-weight: var(--rga-w-bold);
  transition: top .2s;
}
.rga-skip:focus { top: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--rga-red); outline-offset: 3px;
}

.rga-container { max-width: var(--rga-container); margin-inline: auto; padding-inline: var(--rga-gutter); }
.rga-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* section: rega `.section { padding: 110px 0 20px; text-align:center }` */
.rga-section { padding: var(--rga-sec-pt) 0 var(--rga-sec-pb); }
.rga-section--tint { background: var(--rga-bg); }          /* #F7F6F5 */

/* ---------------------------------------------------------------- HEADER --
   rega #kopf: position fixed; display flex; padding 10px 30px; height 122px  */
.rga-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: flex-start; gap: 32px;   /* was space-between; now logo+nav cluster left, tools pushed right via margin-left:auto — added 2026-08-23 for the new header quick-nav */
  padding: 10px 30px; min-height: var(--rga-header-h);
  color: var(--rga-white);
  transition: background .3s, color .3s;
}
.rga-header.is-solid { background: var(--rga-white); color: var(--rga-ink); box-shadow: 0 1px 0 var(--rga-border); }
.rga-logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: var(--rga-w-bold); letter-spacing: -.01em; }
.rga-logo b { display: block; width: 15px; height: 15px; background: var(--rga-red); flex: none; }
.rga-header-tools { display: flex; align-items: center; gap: 22px; margin-left: auto; }   /* pushes tools to the far right now that .rga-header is flex-start */
/* New 2026-08-23: a visible quick-nav between the logo and the header tools —
   the header previously had a large empty gap and everything hidden behind the
   hamburger; owner asked for the header to be more helpful, not just the
   hamburger. Labels mirror the well-received hero action bar (Checklist /
   Scams / Guides) plus Directory. Hidden below 992px — not enough room
   alongside the wider logo and header tools; the hamburger (kept exactly as-is,
   per the owner) remains the full nav at every width. */
.rga-header-nav { display: flex; align-items: center; gap: 28px; }
.rga-header-nav a {
  font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold); letter-spacing: var(--rga-ls-caps);
  text-transform: uppercase; color: inherit; transition: var(--rga-t-link);
}
.rga-header-nav a:hover { color: var(--rga-red); }
@media (max-width: 991.98px) { .rga-header-nav { display: none; } }
.rga-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; }
.rga-burger { display: grid; place-items: center; width: 44px; height: 44px; }


/* full-screen overlay nav — rega #navigation:
   position fixed; background #F7F6F5; padding 220px 15px 80px; transition opacity .4s */
.rga-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--rga-bg); padding: 220px 15px 80px;
  opacity: 0; visibility: hidden; transition: var(--rga-t-nav), visibility 0s .4s;
  overflow-y: auto;
}
.rga-nav.is-open { opacity: 1; visibility: visible; transition: var(--rga-t-nav), visibility 0s 0s; }
.rga-nav ul { max-width: var(--rga-container); margin-inline: auto; padding: 0; list-style: none; }
.rga-nav li + li { border-top: 1px solid var(--rga-border); }
.rga-nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px var(--rga-gutter); color: var(--rga-ink);
  font-size: clamp(22.4px, 14.4px + 1.6vw, 35.04px);  /* →35.04px, rega h2 */
  font-weight: var(--rga-w-thin);
  transition: var(--rga-t-btn);
}
.rga-nav a::after { content: "›"; color: var(--rga-red); font-size: 1.6em; line-height: 1; }
.rga-nav a:hover { background: var(--rga-bg-hover); }   /* --bg-hover */

/* ------------------------------------------------------------------ HERO --
   rega #kopfSpalte: 1280x900; h1 120px/150px weight 700 white at x=40        */
.rga-hero { position: relative; height: var(--rga-hero-h); max-height: 100vh; min-height: 560px; overflow: hidden; }
.rga-hero-media { position: absolute; inset: 0; }
.rga-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.rga-hero-media::after {           /* rgba(63,63,63,.6) scrim, measured */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,.80) 0%, rgba(28,28,28,.70) 45%, rgba(28,28,28,.86) 100%);   /* deepened from .72/.62/.78 — client-directed, more dramatic hero contrast */
}
.rga-hero-inner {
  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: var(--rga-header-h) 40px var(--rga-bar-h);   /* h1 measured at x=40 */
  max-width: 1280px; margin-inline: auto;
}
.rga-hero h1 {
  margin: 0 0 40px;                              /* widened from measured 30px — client-directed, more room before the subline */
  max-width: 9ch;
  font-size: var(--rga-fs-hero);
  line-height: var(--rga-lh-hero);
  font-weight: var(--rga-w-bold);
  color: var(--rga-white);
}
.rga-hero p {
  margin: 0; max-width: 46ch; color: var(--rga-white);
  font-size: var(--rga-fs-lead); font-weight: var(--rga-w-light);
}

@media (min-width: 992px) {
  .rga-hero-media::after {            /* rega CTA-band direction, measured 90deg */
    background:
      linear-gradient(90deg, rgba(28,28,28,.92) 0%, rgba(28,28,28,.88) 52%, rgba(28,28,28,.66) 74%, rgba(28,28,28,.22) 100%),
      linear-gradient(180deg, rgba(28,28,28,.30) 0%, rgba(28,28,28,.06) 42%, rgba(28,28,28,.42) 100%);
  }
}

/* action bar — rega #sideMeta: 81px; items white 20.8px/700; red 24px/700 */
.rga-actionbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: flex-end;
  transition: transform var(--rga-t-bar);
}
.rga-actionbar ul { display: flex; margin: 0; padding: 0; list-style: none; max-width: 1280px; width: 100%; justify-content: flex-end; }
.rga-actionbar li { flex: 0 1 250px; }              /* measured 250px */
.rga-actionbar li:last-child { flex: 0 1 312px; }   /* measured 312px */
.rga-actionbar li + li:not(:last-child) { border-left: 1px solid var(--rga-border); }   /* new: separates the white items, which otherwise merge into one bar */
.rga-actionbar a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--rga-bar-h); padding: 0 24px; text-align: center;   /* widened from measured 12px — client-directed */
  background: var(--rga-white); color: var(--rga-ink);
  font-size: var(--rga-fs-lead); font-weight: var(--rga-w-bold);   /* 20.8/700 */
  transition: var(--rga-t-btn);
}
.rga-actionbar a:hover { background: var(--rga-bg-hover); }
.rga-actionbar .rga-bar-cta {
  background: var(--rga-red); color: var(--rga-white);
  font-size: 24px;                                                 /* 24px */
}
.rga-actionbar .rga-bar-cta:hover { background: var(--rga-red-hover); }

/* ---------------------------------------------------------------- SEARCH --
   rega #c5655: input 670x50, font 27.2px/300, red arrow, underline rule      */
.rga-search { text-align: center; }
.rga-search form {
  display: flex; align-items: center; gap: 20px;
  max-width: 670px; margin: 0 auto 90px;        /* measured margin-bottom 90px */
  border-bottom: 1px solid var(--rga-ink);
  padding-bottom: 6px;
}
.rga-search input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0;
  font-family: inherit; font-size: var(--rga-fs-search); font-weight: var(--rga-w-light);
  color: var(--rga-black);
}
.rga-search input::placeholder { color: var(--rga-ink); opacity: 1; }
.rga-search button[type=submit] { display: grid; place-items: center; width: 40px; height: 40px; color: var(--rga-red); }

/* --------------------------------------------------------- SECTION HEAD --
   rega .section h1: 44.96px / weight 100 / lh 56.2 / #000 / centered         */
.rga-h2 {
  margin: 0 0 30px;
  font-size: var(--rga-fs-section); line-height: var(--rga-lh-section);
  font-weight: var(--rga-w-thin); color: var(--rga-black); text-align: center;
}
.rga-sub { margin: 0 auto 40px; max-width: 60ch; text-align: center; font-size: var(--rga-fs-body); }

/* engelberg .defaultHeader — heading left (7/12) + 100x6px rule & body (5/12) */
.rga-splithead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 var(--rga-gutter); align-items: start; }
.rga-splithead h2 {
  margin: 0; max-width: 12ch;
  font-size: clamp(32px, 16px + 3.4vw, 56px);  /* engelberg 80px → rega scale */
  line-height: 1; font-weight: var(--rga-w-thin); color: var(--rga-black); text-align: left;
}
.rga-splithead h2 em { font-style: normal; color: var(--rga-red); }
.rga-splithead-body { position: relative; padding-top: 44px; }  /* rule top:44px */
.rga-splithead-body::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100px; height: 6px; background: var(--rga-black);      /* measured exactly */
}
.rga-splithead-body p { margin: 0 0 16px; font-size: 20px; line-height: 1.6; font-weight: var(--rga-w-light); }

/* --------------------------------------------------------------- BUTTONS --
   rega a.button: bg #7F715B; padding 7px 30px; 16px/700; letter-spacing 1px  */
.rga-btn {
  display: inline-block; padding: 10px 38px;   /* widened from measured 7px 30px — client-directed */
  background: var(--rga-taupe); color: var(--rga-white);
  font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold); letter-spacing: var(--rga-ls-caps);
  transition: var(--rga-t-btn);
}
.rga-btn:hover { background: var(--rga-taupe-hover); }
.rga-btn--red { background: var(--rga-red); }
.rga-btn--red:hover { background: var(--rga-red-hover); }
.rga-btn--ghost { background: none; color: var(--rga-ink); border: 1px solid var(--rga-border); }
.rga-btn--ghost:hover { background: var(--rga-bg-hover); }

/* arrow link — rega news card red chevron */
.rga-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--rga-red); font-weight: var(--rga-w-bold); }

/* ----------------------------------------------------------------- CHIPS --
   rega button.secondary_button: padding 7px 30px; 16/700; ls 1px; bg beige   */
.rga-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; margin: 0 0 40px; padding: 0; list-style: none; }
/* The hero reuses .rga-chips as a CTA-pair wrapper (I lost my cat / I lost
   my dog). The general chip treatment (centered, 10px/12px gap, 0-top-margin)
   is wrong there: the hero is left-aligned throughout and .rga-hero p has
   zero bottom margin, so the buttons sat flush against the paragraph with
   no gap and centered against a left-aligned block — owner-reported
   2026-08-23 as cramped + misaligned. Scoped fix, general .rga-chips
   elsewhere (filter bars etc.) is untouched. */
.rga-hero .rga-chips { justify-content: flex-start; gap: 16px 20px; margin: 28px 0 0; }
.rga-chips a {
  display: inline-block; padding: 7px 30px;
  background: var(--rga-bg-hover); color: var(--rga-ink);
  font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold); letter-spacing: var(--rga-ls-caps);
  transition: var(--rga-t-btn);
}
.rga-chips a:hover { background: var(--rga-border); }

/* ---------------------------------------------------------------- MOSAIC --
   engelberg: 12-col row, tiles 8/4 then 4/8; height 306px; 1px white border;
   label h3 40px/600 uppercase white, inset 28px from tile edge; img .5s      */
.rga-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); }
.rga-tile {
  position: relative; grid-column: span 6; min-height: var(--rga-tile-h);
  border: var(--rga-tile-gap) solid var(--rga-white);
  overflow: hidden; display: block; background: var(--rga-tile-dark);
}
.rga-tile--wide { grid-column: span 8; }
.rga-tile--narrow { grid-column: span 4; }
.rga-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform var(--rga-t-tile); }
.rga-tile:hover img { transform: scale(1.05); }
.rga-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,30,30,.10) 0%, rgba(30,30,30,.35) 42%, rgba(30,30,30,.88) 100%); }
.rga-tile-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 28px; }
.rga-tile h3 {
  margin: 0; color: var(--rga-white); text-transform: uppercase;
  font-size: var(--rga-fs-tile); line-height: 1; font-weight: var(--rga-w-bold);
}
.rga-tile p { margin: 10px 0 0; color: var(--rga-white); font-size: var(--rga-fs-body); max-width: 46ch; }
/* dark icon tile — engelberg's charcoal + line-icon variant (no photo needed) */
.rga-tile--icon { background: var(--rga-tile-dark); }
.rga-tile--icon::after { display: none; }
.rga-tile--icon .rga-tile-icon { position: absolute; top: 28px; left: 28px; width: 120px; height: 120px; opacity: .95; }

/* ----------------------------------------------------------------- STATS --
   rega-style trio: thin numeral, light body, meta citation                    */
.rga-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px var(--rga-gutter); }
.rga-stat b {
  display: block; margin-bottom: 14px;
  font-size: clamp(30.4px, 19.2px + 2.2vw, 44.96px);  /* matches section head */
  line-height: 1.2; font-weight: var(--rga-w-thin); color: var(--rga-black);
}
.rga-stat p { margin: 0 0 12px; }
.rga-stat cite { font-style: normal; font-size: var(--rga-fs-meta); font-weight: var(--rga-w-light); color: var(--rga-ink); }
.rga-stat::before { content: ""; display: block; width: 100px; height: 6px; background: var(--rga-red); margin-bottom: 22px; }

/* -------------------------------------------------------------- CHECKLIST --
   dark band + accordion. rega has no accordion; states from states.json      */
.rga-band-dark { background: var(--rga-ink); color: var(--rga-white); }
.rga-band-dark .rga-h2, .rga-band-dark h2 { color: var(--rga-white); }
.rga-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 60px; align-items: start; }
.rga-split h2 { margin: 0 0 24px; text-align: left; font-size: var(--rga-fs-section); line-height: var(--rga-lh-section); font-weight: var(--rga-w-thin); }
.rga-acc { border-top: 1px solid rgba(255,255,255,.35); }
.rga-acc-item { border-bottom: 1px solid rgba(255,255,255,.35); }
.rga-acc-btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; text-align: left; color: inherit;
  font-size: var(--rga-fs-title); font-weight: var(--rga-w-bold);
}
.rga-acc-btn::after { content: "+"; font-size: 1.7em; line-height: 1; font-weight: var(--rga-w-thin); transition: transform .3s; }
.rga-acc-btn[aria-expanded="true"]::after { transform: rotate(45deg); }
.rga-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.rga-acc-btn[aria-expanded="true"] + .rga-acc-panel { grid-template-rows: 1fr; }
.rga-acc-panel > div { overflow: hidden; }
.rga-acc-panel p { margin: 0 0 24px; max-width: 68ch; }

/* ----------------------------------------------------------------- CARDS --
   rega news card: 285 wide, image 285x176, white bg, date right 14.08/300,
   kicker 16/700, title 20/700 lh 25, red chevron                             */
.rga-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.rga-card { display: flex; flex-direction: column; background: var(--rga-white); text-align: left; }
.rga-card-media { position: relative; aspect-ratio: 285 / 176; overflow: hidden; background: var(--rga-bg-hover); }
.rga-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rga-t-img); }
.rga-card:hover .rga-card-media img { transform: scale(1.04); }
.rga-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 0 0; }
.rga-card .rga-kicker { margin: 0 0 10px; font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold); color: var(--rga-ink); }
/* h2 as well as h3: on an archive listing each card title is a sibling of the
   page h1, so h2 is the correct level — the card style is the same either way. */
.rga-card h2, .rga-card h3 { margin: 0 0 16px; font-size: var(--rga-fs-title); line-height: 1.25; font-weight: var(--rga-w-bold); color: var(--rga-ink); }
.rga-card ul { margin: 0 0 20px; padding: 0; list-style: none; }
.rga-card li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.rga-card li::before { content: "—"; position: absolute; left: 0; color: var(--rga-red); }
.rga-card .rga-arrow { margin-top: auto; }
.rga-card--soft { background: var(--rga-bg); padding: 30px; }
/* The measured source teaser grid is 3 columns. `auto-fit` happens to give 3 on
   the homepage (3 cards) but 4 on a 4-item archive, which squeezes the titles to
   three lines. Pin the archive grid to the measured 3. */
.rga-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rga-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .rga-cards--3 { grid-template-columns: minmax(0, 1fr); } }
/* Read-time / meta line inside a card. <cite> defaults to italic; the measured
   meta style is upright 14.08px. */
.rga-card cite { display: block; margin: -6px 0 16px; font-style: normal;
  font-size: var(--rga-fs-meta); line-height: var(--rga-lh-body); color: var(--rga-ink); }

/* -------------------------------------------------------------- CTA BAND --
   rega: full-bleed image, left white text, red button                        */
.rga-cta { position: relative; min-height: 540px; display: flex; align-items: center; overflow: hidden; }
.rga-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rga-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35,35,35,.78) 0%, rgba(35,35,35,.72) 50%, rgba(35,35,35,.80) 100%); }
@media (min-width: 992px) {
  .rga-cta::after {                   /* rega CTA band, measured 90deg */
    background: linear-gradient(90deg, rgba(35,35,35,.90) 0%, rgba(35,35,35,.80) 48%, rgba(35,35,35,.30) 82%, rgba(35,35,35,.18) 100%);
  }
}
.rga-cta-inner { position: relative; z-index: 2; width: 100%; }
.rga-cta h2 {
  margin: 0 0 30px; max-width: 14ch; color: var(--rga-white); text-align: left;
  font-size: var(--rga-fs-section); line-height: var(--rga-lh-section); font-weight: var(--rga-w-thin);
}
.rga-cta p { max-width: 46ch; margin: 0 0 30px; color: var(--rga-white); font-size: var(--rga-fs-lead); }

/* ---------------------------------------------------------------- FOOTER --
   rega #fussInhalt: bg #F7F6F5, padding 50px 0 30px
   h2.footerTitle: 16/700 ls 1px, border-bottom, pb 10, mb 15
   #fussUnterzeile: white, padding 5px 0, 14.08px weight 100                  */
.rga-footer { background: var(--rga-bg); padding: 50px 0 30px; letter-spacing: var(--rga-ls-caps); }
.rga-footer-grid { display: grid; grid-template-columns: 420fr 315fr 315fr; gap: 40px var(--rga-gutter); }
.rga-footer h2 {
  margin: 0 0 15px; padding: 0 0 10px;
  border-bottom: 1px solid var(--rga-black);
  font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold); letter-spacing: var(--rga-ls-caps);
  color: var(--rga-black); text-align: left;
}
.rga-footer h2 + h2 { margin-top: 40px; }
.rga-footer ul { margin: 0; padding: 0; list-style: none; }
.rga-footer li { margin-bottom: 6px; }
.rga-footer a { transition: var(--rga-t-link); }
.rga-footer a:hover { color: var(--rga-red); }
.rga-footer-contact li { display: flex; align-items: center; gap: 10px; }
.rga-footer .rga-btn { margin-top: 4px; }
.rga-social { display: flex; gap: 12px; margin-top: 4px; }
.rga-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rga-black); color: var(--rga-white); }
.rga-legal { background: var(--rga-white); padding: 5px 0; font-size: var(--rga-fs-meta); font-weight: var(--rga-w-thin); letter-spacing: var(--rga-ls-caps); }
.rga-legal .rga-container { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; }
.rga-legal ul { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.rga-legal li + li::before { content: "|"; margin-right: 10px; color: var(--rga-border); }
.rga-legal a { transition: var(--rga-t-link); }
.rga-legal a:hover { color: var(--rga-red); }

/* back-to-top — rega #scrollTop 40x40 */
.rga-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--rga-taupe); color: var(--rga-white);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background .3s;
}
.rga-top.is-on { opacity: 1; visibility: visible; }
.rga-top:hover { background: var(--rga-taupe-hover); }

/* ============================ RESPONSIVE ==================================
   Source breakpoints (fonts-breakpoints.json): 576 / 768 / 992 / 1200        */
@media (max-width: 1199.98px) {
  .rga-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
  :root { --rga-sec-pt: 110px; --rga-sec-pb: 50px; --rga-hero-h: 720px; }
  .rga-splithead { grid-template-columns: 1fr; gap: 30px; }
  .rga-splithead-body { padding-top: 30px; }
  .rga-split { grid-template-columns: 1fr; }
  .rga-stats { grid-template-columns: 1fr; gap: 44px; }
  .rga-tile--wide, .rga-tile--narrow, .rga-tile { grid-column: span 6; }
  .rga-actionbar ul { justify-content: stretch; }
  .rga-actionbar li, .rga-actionbar li:last-child { flex: 1 1 0; }
  .rga-actionbar a { font-size: var(--rga-fs-body); gap: 8px; }
  .rga-actionbar .rga-bar-cta { font-size: 1.125rem; }
}
@media (max-width: 767.98px) {
  :root { --rga-sec-pt: 80px; --rga-sec-pb: 40px; --rga-header-h: 72px; --rga-bar-h: 64px; --rga-hero-h: 620px; }
  .rga-header { padding: 10px 16px; }
  .rga-nav { padding: 120px 0 60px; }
  .rga-hero-inner { padding: var(--rga-header-h) 20px calc(var(--rga-bar-h) * 2 + 10px); }
  .rga-tile, .rga-tile--wide, .rga-tile--narrow { grid-column: span 12; }
  .rga-footer-grid { grid-template-columns: 1fr; }
  .rga-actionbar ul { flex-wrap: wrap; }
  .rga-actionbar li { flex: 1 1 33.333%; }          /* 3 quick links, one row */
  .rga-actionbar li:last-child { flex: 1 1 100%; }  /* red CTA, full width    */
  .rga-actionbar a { flex-direction: column; gap: 4px; font-size: 13px; padding: 0 6px; }
  .rga-actionbar .rga-ico { width: 20px; height: 20px; }
  .rga-actionbar .rga-bar-cta { flex-direction: row; font-size: 18px; }
  .rga-actionbar a { height: var(--rga-bar-h); }
  .rga-search form { gap: 12px; margin-bottom: 50px; }
  .rga-tile-body { padding: 20px; }
  .rga-legal .rga-container { justify-content: flex-start; }
}


/* ============================ ICONS (data-URI) ==============================
   Inline SVG moved into the stylesheet so the Bricks element tree stays plain
   semantic markup + classes. Same vectors, same measured sizes.             */
.rga-ico { display: inline-block; flex: none; background-repeat: no-repeat;
  background-position: center; background-size: contain; }
.rga-ico--search    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M16.5%2016.5%2021%2021%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--search-w  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M16.5%2016.5%2021%2021%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--chev      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ED0000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M9%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--arrow     { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ED0000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M4%2012h15M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--up        { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2019V6M6%2012l6-6%206%206%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--checklist { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233F3F3F%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%202v4M16%202v4M8%2012l2.5%202.5L16%209%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--shield    { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233F3F3F%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M12%203l8%204v5c0%205-3.4%208.3-8%209-4.6-.7-8-4-8-9V7z%22%2F%3E%3Cpath%20d%3D%22M12%208.5v4.5M12%2016.2v.4%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--book      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233F3F3F%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M4%205.5A2.5%202.5%200%20016.5%203H12v18H6.5A2.5%202.5%200%20014%2018.5z%22%2F%3E%3Cpath%20d%3D%22M20%205.5A2.5%202.5%200%200017.5%203H12v18h5.5a2.5%202.5%200%20002.5-2.5z%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--fb        { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M13.5%2021v-8h2.7l.4-3h-3.1V8.1c0-.9.2-1.5%201.5-1.5H16.7V4c-.3%200-1.2-.1-2.3-.1-2.3%200-3.9%201.4-3.9%204v2.2H8v3h2.5v8z%22%2F%3E%3C%2Fsvg%3E"); }
.rga-ico--ig        { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M12%207.4a4.6%204.6%200%20100%209.2%204.6%204.6%200%20000-9.2zm0%207.6a3%203%200%20110-6%203%203%200%20010%206z%22%2F%3E%3Ccircle%20cx%3D%2216.9%22%20cy%3D%227.1%22%20r%3D%221.1%22%2F%3E%3Cpath%20d%3D%22M17%203H7a4%204%200%2000-4%204v10a4%204%200%20004%204h10a4%204%200%20004-4V7a4%204%200%2000-4-4zm2.4%2014a2.4%202.4%200%2001-2.4%202.4H7A2.4%202.4%200%20014.6%2017V7A2.4%202.4%200%20017%204.6h10A2.4%202.4%200%200119.4%207z%22%2F%3E%3C%2Fsvg%3E"); }

/* header search icon inherits the header's light/solid state */
.rga-icon-btn .rga-ico { width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M16.5%2016.5%2021%2021%22%2F%3E%3C%2Fsvg%3E"); }
.rga-header.is-solid .rga-icon-btn .rga-ico,
.rga-header:not(.on-hero) .rga-icon-btn .rga-ico { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233F3F3F%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M16.5%2016.5%2021%2021%22%2F%3E%3C%2Fsvg%3E"); }
.rga-burger-lines { display: block; width: 28px; }
.rga-burger-lines i { display: block; height: 1.5px; background: currentColor; }
.rga-burger-lines i + i { margin-top: 7px; }

.rga-search .rga-ico--search { width: 30px; height: 30px; }
.rga-search .rga-ico--chev   { width: 26px; height: 26px; }
.rga-actionbar .rga-ico      { width: 26px; height: 26px; }
.rga-arrow .rga-ico          { width: 18px; height: 18px; transition: transform .3s; }
.rga-arrow:hover .rga-ico    { transform: translateX(5px); }
.rga-top .rga-ico            { width: 18px; height: 18px; }
.rga-social .rga-ico         { width: 17px; height: 17px; }

/* mosaic icon tiles — engelberg's charcoal + line-icon variant */
.rga-tile--icon .rga-tile-icon { background-repeat: no-repeat; background-position: center; background-size: contain; }
.rga-tile--dog   .rga-tile-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23B9A98D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2027c-3-6-3-13-1-16%203%201%207%205%209%209%22%2F%3E%3Cpath%20d%3D%22M44%2027c3-6%203-13%201-16-3%201-7%205-9%209%22%2F%3E%3Cpath%20d%3D%22M32%2018c-8%200-14%207-14%2015%200%205%202%208%202%2012%200%204-2%206-2%208h28c0-2-2-4-2-8%200-4%202-7%202-12%200-8-6-15-14-15z%22%2F%3E%3Cpath%20d%3D%22M26.5%2034h.1M37.5%2034h.1%22%2F%3E%3Cpath%20d%3D%22M32%2040c-2.2%200-3.5%201.1-3.5%202.2S30%2044.5%2032%2044.5s3.5-1.2%203.5-2.3S34.2%2040%2032%2040z%22%2F%3E%3C%2Fsvg%3E"); }
.rga-tile--found .rga-tile-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22%23B9A98D%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M32%2051S13%2040%2013%2027.5C13%2021%2018%2016%2024.2%2016c3.9%200%207.1%202%207.8%204.6.7-2.6%203.9-4.6%207.8-4.6C46%2016%2051%2021%2051%2027.5%2051%2040%2032%2051%2032%2051z%22%2F%3E%3Cpath%20d%3D%22M32%2026v11M26.5%2031.5h11%22%2F%3E%3C%2Fsvg%3E"); }


/* ==================== HOST-SITE INTEGRATION (petsearchcanada) ==============
   Fixes that only surface once the layer runs inside Bricks + Advanced Themer. */

/* AT sets html{font-size:62.5%}. The replica layer states px explicitly, but
   pin the layer's own base so inherited/unset values still resolve at 16px. */
body { font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); }

/* Bricks' own skip links ship at low contrast — bring them up to AA. */
.skip-link, .bricks-skip-link {
  background: var(--rga-red) !important; color: #fff !important;
  font-size: 16px !important; padding: 12px 24px !important;
}

/* The header is transparent over the hero. On pages WITHOUT a hero it must
   start solid, or white-on-white swallows the logo. JS adds .has-hero. */
.rga-header:not(.on-hero) { background: var(--rga-white); color: var(--rga-ink); box-shadow: 0 1px 0 var(--rga-border); }

/* Small red link text on the #F7F6F5 tint measured 4.23:1 — just under AA.
   Darken only the small-text case; large red CTAs keep the measured #ED0000. */
.rga-arrow { color: #C20000; }

/* Bricks wraps the native search element; map it onto the measured rega form. */
.rga-searchbox form,
.rga-search form {
  display: flex; align-items: center; gap: 20px;
  max-width: 670px; margin: 0 auto 90px;
  border-bottom: 1px solid var(--rga-ink); padding-bottom: 6px;
}
.rga-searchbox input[type="search"], .rga-searchbox input[type="text"] {
  flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0;
  font-family: inherit; font-size: var(--rga-fs-search); font-weight: var(--rga-w-light);
  color: var(--rga-black);
}
.rga-searchbox button { display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; color: var(--rga-red); }
.rga-searchbox button svg { width: 26px; height: 26px; fill: currentColor; }

/* Bricks lazy-hide can leave replica children invisible if JS is slow. */
.rga-hero .bricks-lazy-hidden, .rga-mosaic .bricks-lazy-hidden { opacity: 1 !important; }


/* ---- Bricks image normalisation -------------------------------------------
   The Bricks image element renders <figure class="brxe-image"><img><figcaption>,
   lazy-loads via a data-URI placeholder, and prints the media-library title as a
   visible caption. The replica layer positions the FIGURE (not the bare img) and
   suppresses the injected caption. */
.rga-tile > figure.brxe-image,
.rga-cta > figure.brxe-image,
.rga-hero-media > figure.brxe-image {
  position: absolute; inset: 0; margin: 0; width: 100%; height: 100%;
}
.rga-tile > figure.brxe-image img,
.rga-cta > figure.brxe-image img,
.rga-hero-media > figure.brxe-image img {
  width: 100%; height: 100%; object-fit: cover;
}
/* focal-point crop is a TILE concern only; on the hero it moves bright sky
   behind the H1 and drops it below AA. */
.rga-tile > figure.brxe-image img { object-position: center 35%; }
.rga-tile > figure.brxe-image img { transition: transform var(--rga-t-tile); }
.rga-tile:hover > figure.brxe-image img { transform: scale(1.05); }
/* the media-library title is alt text, not a caption — never render it */
.rga-tile figcaption, .rga-cta figcaption, .rga-hero-media figcaption { display: none !important; }

/* the tile scrim must sit above the figure but below the label */
.rga-tile > figure.brxe-image { z-index: 0; }
.rga-tile::after { z-index: 1; }
.rga-tile-body { z-index: 2; }
.rga-tile--icon .rga-tile-icon { z-index: 2; }
.rga-cta > figure.brxe-image { z-index: 0; }
.rga-cta::after { z-index: 1; }
.rga-cta-inner { z-index: 2; }

/* enforce the measured band heights against Bricks' intrinsic image sizing */
.rga-tile { height: var(--rga-tile-h); }
.rga-cta  { height: 540px; }
@media (max-width: 767.98px) {
  .rga-tile { height: 260px; }
  .rga-cta  { height: auto; min-height: 540px; }
}

/* full-bleed bands must escape any inherited section max-width */
.rga-mosaic { width: 100%; max-width: none; margin-inline: 0; }
.rga-hero, .rga-cta { max-width: none; }

/* lazy-load placeholders must not leave replica content invisible */
.rga-tile img.bricks-lazy-hidden, .rga-cta img.bricks-lazy-hidden,
.rga-hero-media img.bricks-lazy-hidden { opacity: 1 !important; }


/* ---- Bricks flex defaults -------------------------------------------------
   .brxe-section / .brxe-container default to `flex-direction: column`. The
   replica layer declared `display:flex` without a direction, so every intended
   row silently stacked. State the direction explicitly on each row. */
.rga-header,
.rga-header-tools,
.rga-logo,
.rga-actionbar,
.rga-actionbar ul,
.rga-search form, .rga-searchbox form,
.rga-chips,
.rga-social,
.rga-legal .rga-container,
.rga-arrow,
.rga-acc-btn,
.rga-footer-contact li,
.rga-cta { flex-direction: row; }

.rga-card { flex-direction: column; }
.rga-hero-inner { flex-direction: column; }
.rga-nav ul, .rga-footer ul, .rga-chips { align-items: initial; }

/* Bricks sections also centre their children; replica bands manage their own. */
.rga-section, .rga-hero, .rga-cta, .rga-footer, .rga-legal, .rga-nav,
.rga-header { align-items: initial; }
.rga-header { align-items: center; }
.rga-cta { align-items: center; }

/* ---- legacy fixed-header offset ------------------------------------------
   The previous design ships an inline <style id="psc-motion"> containing
   `body { padding-top: var(--psc-header-h) }` (88px) for its own fixed header.
   Interior pages still need an offset — but it must match THIS header, and a
   page whose hero sits under the transparent header needs none. Other pages
   still use the psc-* layer, so that style block is left in place. */
body { padding-top: var(--rga-header-h) !important; }
body:has(.rga-hero) { padding-top: 0 !important; }


/* ---- final polish (live QA) ----------------------------------------------- */

/* Footer: a heading following a list/paragraph/social row needs the same
   breathing room as heading-after-heading, or its rule collides with the list. */
.rga-footer ul + h2,
.rga-footer p + h2,
.rga-footer .rga-social + h2,
.rga-footer .rga-btn + h2 { margin-top: 36px; }

/* Bricks' native search element ships without rega's magnifier + red chevron;
   reinstate them on the form, and undo the centred inheritance. */
.rga-search { text-align: center; }
.rga-searchbox form { position: relative; text-align: left; padding-left: 46px; padding-right: 44px; }
.rga-searchbox form::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.6%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M16.5%2016.5%2021%2021%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.rga-searchbox form::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ED0000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M9%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  pointer-events: none;
}
.rga-searchbox input { text-align: left; }
.rga-searchbox button[type="submit"] { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; opacity: 0; cursor: pointer; }

/* Photo tiles are 8:3; these portrait source images put their subject low in
   frame, so bias the crop downward or the subject is cropped out entirely.
   NOTE: proper 16:6 landscape crops are the real fix — see handoff. */
.rga-tile > figure.brxe-image img,
.rga-tile img { object-position: center 62%; }


/* ---- flex min-width trap --------------------------------------------------
   Bricks sections are flex containers, and a flex item defaults to
   `min-width: auto` — so it refuses to shrink below its content's intrinsic
   width. A search <input> carries an intrinsic size, which (plus the icon
   padding) pushed .rga-container to 408px inside a 390px viewport. Let the
   replica containers shrink. */
.rga-container { width: 100%; min-width: 0; }
.rga-searchbox { min-width: 0; max-width: 100%; }
/* NOTE: this rule used to also set `max-width: 100%` on the form, which — being
   later in the file at equal specificity — silently beat the measured
   `max-width: 670px` above, so the search field rendered 1230px wide on the
   live homepage instead of the source's 670px. Cap with min() so the field
   keeps its measured width while still shrinking below 670px viewports. */
.rga-searchbox form, .rga-search form { min-width: 0; max-width: min(670px, 100%); }
.rga-searchbox input, .rga-search input { min-width: 0; width: 100%; }
.rga-chips, .rga-cards, .rga-stats, .rga-split, .rga-splithead,
.rga-footer-grid, .rga-actionbar ul { min-width: 0; }
/* Same trap one level down: a GRID ITEM also defaults to `min-width: auto`, so
   it refuses to shrink below its content's intrinsic width. `.rga-prose`
   carries max-width:810px, which made the 7fr column of a .rga-split demand
   810px and pushed the whole guide page to a 1995px scrollWidth. Let the
   columns shrink, and drop the single-column reading measure when the prose is
   already inside a narrower split column. */
.rga-split > *, .rga-pair > *, .rga-cards > *, .rga-numbered > *,
.rga-splithead > *, .rga-stats > * { min-width: 0; }
/* Bricks renders .rga-container as `display:flex; flex-direction:column` with
   `align-items:center`, so a block child is sized by its CONTENT, not stretched
   to the container. A grid child then resolves its `fr` columns against that
   content width: .rga-split computed `grid-template-columns: 1100px 0px` and
   blew the page out to a 2285px scrollWidth. State the width explicitly on the
   layout components rather than resetting align-items on .rga-container, which
   would re-flow the already-locked homepage bands. */
.rga-split, .rga-pair, .rga-numbered, .rga-cards, .rga-splithead, .rga-stats,
.rga-prose, .rga-results, .rga-resultcount, .rga-chips, .rga-linklist, .rga-empty { width: 100%; }
.rga-split .rga-prose, .rga-pair .rga-prose, .rga-card .rga-prose { max-width: 100%; margin-inline: 0; }
.rga-chips li, .rga-chips a { min-width: 0; max-width: 100%; }

@media (max-width: 575.98px) {
  /* tighter icon gutters so the field keeps a usable text column */
  .rga-searchbox form { padding-left: 34px; padding-right: 32px; }
  .rga-searchbox form::before { width: 22px; height: 22px; }
  .rga-searchbox form::after  { width: 20px; height: 20px; }
  .rga-chips a { padding: 7px 18px; }
}


/* ============================================================================
   UTILITY + CONTENT PAGES  —  search results · 404 · archives · prose bodies
   EXTRACTION-DERIVED, second capture pass (2026-08-01). Sources:
     rega.ch/en/search?...sword=helicopter   → result rows, badge, pager, count
     rega.ch/en/<missing-url> (404)          → page-not-found body + link list
     rega.ch/en/our-missions/this-is-how-we-help-you
     rega.ch/en/about-us/contact             → content-page h1/h2/h3/p/ul + rhythm
   Raw measurements: utility/rega/{rega-utility,rows,rows2,interior,diag2}.json
   ========================================================================== */
:root {
  /* Content pages use a SMALLER section heading than the homepage.
     Measured h2 on both content pages: 35.04px / 100 / 43.8 (homepage .section
     h1 is 44.96/100/56.2 — kept as --rga-fs-section). */
  --rga-fs-sec-sm:  clamp(26px, 17.6px + 1.75vw, 35.04px);
  --rga-lh-sec-sm:  1.25;                 /* 43.8 / 35.04 */

  /* Content-page body copy measured 20px/300/30 #3F3F3F (distinct from the
     16px/300/24 used in cards, footer and result teasers). */
  --rga-fs-prose:   clamp(17px, 14.2px + .58vw, 20px);
  --rga-lh-prose:   1.5;                  /* 30 / 20 */

  --rga-prose-w:    810px;   /* measured content column on both content pages */
  --rga-results-w:  853px;   /* measured .col-lg-8 on the search results page  */
  --rga-result-pad: 30px;    /* measured .row.odd/.even padding: 30px 0        */
  --rga-thumb-w:    112px;   /* measured .teaser_icon content width            */
}

/* ------------------------------------------------------------- PAGE HEAD --
   Interior pages have no 900px photo hero. Measured content-page h1:
   44.96px / 700 / 56.2 / #fff, left-aligned, sitting on a short banner.
   The plain variant (no photograph available) inverts to ink on the measured
   #F7F6F5 canvas rather than inventing a new colour. */
.rga-pagehead { position: relative; display: flex; align-items: flex-end;
  min-height: 420px; padding: calc(var(--rga-header-h) + 40px) 0 60px;
  background: var(--rga-bg); overflow: hidden; }
.rga-pagehead .rga-container { position: relative; z-index: 2; width: 100%; }
.rga-pagehead-media { position: absolute; inset: 0; z-index: 1; }
.rga-pagehead-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.rga-pagehead-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,28,28,.86) 0%, rgba(28,28,28,.72) 55%, rgba(28,28,28,.34) 100%); }
.rga-pagehead h1 { margin: 0; font-size: var(--rga-fs-section);
  line-height: var(--rga-lh-section); font-weight: var(--rga-w-bold); color: var(--rga-black); }
.rga-pagehead--photo h1, .rga-pagehead--photo .rga-eyebrow, .rga-pagehead--photo .rga-pagehead-sub { color: var(--rga-white); }
/* Eyebrow: measured .search-badge 16/700/20, letter-spacing from the measured
   button/kicker convention (--rga-ls-caps 1px). */
.rga-eyebrow { display: inline-block; margin: 0 0 12px; font-size: var(--rga-fs-body);
  font-weight: var(--rga-w-bold); line-height: 20px; letter-spacing: var(--rga-ls-caps);
  text-transform: uppercase; color: #5E5343; }
.rga-pagehead-sub { max-width: var(--rga-prose-w); margin: 18px 0 0;
  font-size: var(--rga-fs-prose); line-height: var(--rga-lh-prose);
  font-weight: var(--rga-w-light); color: var(--rga-ink); }
/* Measured meta row: 14.08px, the source's date/legal size. */
.rga-pagemeta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0;
  padding: 0; list-style: none; font-size: var(--rga-fs-meta); color: var(--rga-ink); }
.rga-pagehead--photo .rga-pagemeta { color: rgba(255,255,255,.86); }

/* ----------------------------------------------------------------- PROSE --
   Measured content-page body: column 810px; p 20/300/30 mb15; h2 35.04/100/43.8
   mb20; h3 20/700/25 mb15 (mt30, pb10 when it follows copy); ul padding-left
   20px mb15 with li 16/300/24; the source's "no-list-style" variant drops the
   marker and gives each li margin-bottom 5px. Source centres its content text;
   long-form guidance reads better ranged-left, so the column is centred but the
   text is not — the only layout deviation here, made once and noted. */
.rga-prose { max-width: var(--rga-prose-w); margin-inline: auto; text-align: left; }
/* The source's 404 puts the same 810px column flush to the container's left
   edge (measured h1 x=29 against a container starting at x=15) rather than
   centring it the way the long-form content pages do. */
.rga-prose--flush { margin-inline: 0; }
.rga-prose > :first-child { margin-top: 0; }
/* .rga-h2 is centred for standalone section headings; inside a prose column it
   ranges left with the copy it introduces (measured 404 h1 alignment). */
.rga-prose .rga-h2 { text-align: left; }
.rga-prose p { margin: 0 0 15px; font-size: var(--rga-fs-prose);
  line-height: var(--rga-lh-prose); font-weight: var(--rga-w-light); color: var(--rga-ink); }
.rga-prose h2 { margin: 40px 0 20px; font-size: var(--rga-fs-sec-sm);
  line-height: var(--rga-lh-sec-sm); font-weight: var(--rga-w-thin); color: var(--rga-black); }
.rga-prose h3 { margin: 30px 0 15px; padding-bottom: 10px; font-size: 20px;
  line-height: 25px; font-weight: var(--rga-w-bold); color: var(--rga-black); }
.rga-prose ul, .rga-prose ol { margin: 0 0 15px; padding-left: 20px; }
.rga-prose li { margin: 0 0 5px; font-size: var(--rga-fs-body);
  line-height: var(--rga-lh-body); font-weight: var(--rga-w-light); color: var(--rga-ink); }
.rga-prose ul.rga-plain { list-style: none; padding-left: 0; }
.rga-prose strong, .rga-prose b { font-weight: var(--rga-w-bold); color: var(--rga-black); }
/* Measured inline prose link: #ED0000. On the #F7F6F5 tint that lands at
   4.23:1, so tinted sections take the same #C20000 correction already applied
   to .rga-arrow above. */
.rga-prose a { color: var(--rga-red); text-decoration: underline; text-underline-offset: 3px; transition: var(--rga-t-link); }
.rga-prose a:hover { color: var(--rga-red-hover); }
.rga-section--tint .rga-prose a, .rga-result .rga-prose a { color: #C20000; }

/* --------------------------------------------------------- SEARCH RESULTS --
   Measured: full-bleed alternating bands (.row.odd bg #F7F6F5, .row.even
   transparent), padding 30px 0; inner column 853px centred with 15px gutters;
   flex row = 112px thumb + 30px gutter + body; badge 16/700/20 taupe mb4;
   title h3 20/700/25 #000 mb15; teaser + meta 16/300/24 #3F3F3F. */
.rga-results { margin: 0; padding: 0; list-style: none; }
.rga-result { padding: var(--rga-result-pad) 0; background: transparent; }
.rga-result:nth-child(odd) { background: var(--rga-bg); }
.rga-result-inner { display: flex; align-items: flex-start; gap: 30px;
  max-width: var(--rga-results-w); margin-inline: auto; padding-inline: var(--rga-gutter); min-width: 0; }
.rga-result-thumb { flex: 0 0 var(--rga-thumb-w); }
.rga-result-thumb img { width: 100%; height: auto; }
.rga-result-body { flex: 1 1 auto; min-width: 0; }
/* Measured badge colour is #7F715B, which reads 4.41:1 on the #F7F6F5 band —
   just under AA. Darkened to the measured hover taupe #5E5343 (6.96:1 on tint,
   7.52:1 on white) so the value stays inside the source palette. */
.rga-result-badge { display: inline-block; margin: 0 0 4px; font-size: var(--rga-fs-body);
  font-weight: var(--rga-w-bold); line-height: 20px; color: #5E5343; }
.rga-result-title { margin: 0 0 15px; font-size: 20px; line-height: 25px;
  font-weight: var(--rga-w-bold); color: var(--rga-black); }
.rga-result-title a { color: inherit; transition: var(--rga-t-link); }
.rga-result-title a:hover { color: var(--rga-red-hover); }
.rga-result-teaser { margin: 0 0 15px; font-size: var(--rga-fs-body);
  line-height: var(--rga-lh-body); font-weight: var(--rga-w-light); color: var(--rga-ink); }
/* The source emboldens the matched term inside the teaser. */
.rga-result-teaser mark { background: none; color: var(--rga-black); font-weight: var(--rga-w-bold); }
.rga-result-meta { margin: 0; font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); color: var(--rga-ink); }
.rga-result-meta b { font-weight: var(--rga-w-bold); color: var(--rga-black); }

/* Result count — measured 16/300/24 #3F3F3F, centred above the first band. */
.rga-resultcount { max-width: var(--rga-results-w); margin: 0 auto 20px;
  padding-inline: var(--rga-gutter); text-align: center;
  font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); color: var(--rga-ink); }

/* Pagination — measured .page-link: padding 7px 15px, 16/300/24, 6px apart;
   current = #fff on #7F715B (4.76:1); rest = #3F3F3F on #F7F6F5 (9.76:1). */
.rga-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin: 0; padding: 30px 0; list-style: none; }
.rga-pager a, .rga-pager span { display: inline-block; padding: 7px 15px;
  font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); font-weight: var(--rga-w-light);
  background: var(--rga-bg); color: var(--rga-ink); transition: var(--rga-t-btn); }
.rga-pager a { transition: var(--rga-t-btn); }
.rga-pager a:hover { background: var(--rga-bg-hover); }
.rga-pager .is-current { background: var(--rga-taupe); color: var(--rga-white); }
.rga-pager .rga-pager-gap { background: none; padding-inline: 4px; }

/* ------------------------------------------------------------- 404 / NAV --
   Measured 404: h1 44.96/100/56.2 (the .rga-h2 spec), body 20/300/30, then a
   run of inline red links each carrying padding-right 15px. */
.rga-linklist { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
  font-size: var(--rga-fs-prose); line-height: var(--rga-lh-prose); font-weight: var(--rga-w-light); }
.rga-linklist a { display: inline-block; padding-right: 15px; color: var(--rga-red); transition: var(--rga-t-link); }
.rga-linklist a:hover { color: var(--rga-red-hover); text-decoration: underline; text-underline-offset: 3px; }
/* On the tint canvas the measured red drops to 4.23:1 — same correction. */
.rga-section--tint .rga-linklist a { color: #C20000; }

/* Empty state shares the 404's measured body spec. */
.rga-empty { max-width: var(--rga-prose-w); margin-inline: auto; text-align: center; }
.rga-empty p { font-size: var(--rga-fs-prose); line-height: var(--rga-lh-prose); color: var(--rga-ink); margin: 0 0 15px; }

/* ------------------------------------------------------- NUMBERED / PAIRS --
   Interior-page patterns rebuilt on the measured grid: 3-up numbered points and
   the two-column do/don't. Column counts and the 1000px structural breakpoint
   follow responsive.json, matching .rga-cards. */
.rga-numbered { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 40px var(--rga-gutter); margin: 0; padding: 0; list-style: none; }
.rga-num-n { display: block; margin: 0 0 8px; font-size: var(--rga-fs-meta);
  font-weight: var(--rga-w-bold); letter-spacing: var(--rga-ls-caps); color: var(--rga-red); }
.rga-num h3 { margin: 0 0 10px; font-size: 20px; line-height: 25px;
  font-weight: var(--rga-w-bold); color: var(--rga-black); }
.rga-num p { margin: 0; font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); color: var(--rga-ink); }
.rga-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px var(--rga-gutter); }
.rga-pair > * { min-width: 0; }
.rga-pair h3 { margin: 0 0 15px; font-size: 20px; line-height: 25px;
  font-weight: var(--rga-w-bold); color: var(--rga-black); }
.rga-pair ul { margin: 0; padding-left: 20px; }
.rga-pair li { margin: 0 0 5px; font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); color: var(--rga-ink); }

/* ------------------------------------------------- UTILITY RESPONSIVE ------
   Source switches its result row to a stacked layout below the lg breakpoint
   (col-12 above col-lg-8); the replica keeps the same 1000px structural
   breakpoint the rest of the layer uses (responsive.json). */
@media (max-width: 1000px) {
  .rga-numbered { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  .rga-result-inner { gap: 20px; }
  .rga-result-thumb { flex-basis: 76px; }
  .rga-numbered, .rga-pair { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .rga-pagehead { min-height: 0; padding: calc(var(--rga-header-h) + 24px) 0 40px; }
  .rga-pager { padding: 20px 0; }
  .rga-pager a, .rga-pager span { padding: 7px 12px; }
}
@media (max-width: 575.98px) {
  /* Thumb + body below ~430px leaves the body under 200px; stack instead. */
  .rga-result-inner { flex-direction: column; gap: 14px; }
  .rga-result-thumb { flex-basis: auto; max-width: 112px; }
}

/* Long unbroken tokens in prose (citation URLs, DOIs, registry domains) set a
   min-content width that a grid track has to honour, which is the other half of
   the overflow above. Let them break rather than widening the page. */
.rga-prose, .rga-result-teaser, .rga-result-meta, .rga-pair li, .rga-card { overflow-wrap: anywhere; }

/* Bricks gives every `container` element its own global container width (1100px
   on this install). Structural wrappers inside the replica layer that carry no
   rga-* class of their own were therefore rendering 1100px wide inside a 360px
   grid track — the remaining half of the guide-page overflow. Inside replica
   bands, an unclassed Bricks container fills its parent; anything carrying an
   rga-* class keeps the measured width its own rule sets. */
.rga-section .brxe-container:not([class*="rga-"]),
.rga-pagehead .brxe-container:not([class*="rga-"]),
.rga-band-dark .brxe-container:not([class*="rga-"]),
.rga-cta .brxe-container:not([class*="rga-"]) { width: 100%; max-width: none; }

/* ---- button specificity guard ---------------------------------------------
   `.rga-btn` and its modifiers are single-class (0,1,0), so any context rule
   that targets a bare anchor out-specifies them:
     .rga-chips a  (0,1,1)  → chip-wrapped buttons rendered beige-on-ink
     .rga-prose a  (0,2,0)  → put RED text on the RED button background, i.e.
                              an invisible "Read the full scam guide" CTA
   Both shipped live on the checklist page. Restate the buttons at a specificity
   that wins in those contexts; values are unchanged from the measured originals
   (taupe #7F715B / red #ED0000 / ghost, white label, 7px 30px, 16px/700, ls 1px).
   Contrast: white-on-red 4.56:1, white-on-taupe 4.76:1, ink ghost 10.5:1. */
a.rga-btn, .rga-chips a.rga-btn, .rga-prose a.rga-btn, .rga-split a.rga-btn {
  display: inline-block; padding: 10px 38px;   /* widened from measured 7px 30px — client-directed */
  background: var(--rga-taupe); color: var(--rga-white);
  font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold);
  letter-spacing: var(--rga-ls-caps); text-decoration: none;
  transition: var(--rga-t-btn);
}
a.rga-btn:hover, .rga-chips a.rga-btn:hover, .rga-prose a.rga-btn:hover,
.rga-split a.rga-btn:hover { background: var(--rga-taupe-hover); color: var(--rga-white); }

a.rga-btn--red, .rga-chips a.rga-btn--red, .rga-prose a.rga-btn--red,
.rga-split a.rga-btn--red { background: var(--rga-red); color: var(--rga-white); }
a.rga-btn--red:hover, .rga-chips a.rga-btn--red:hover, .rga-prose a.rga-btn--red:hover,
.rga-split a.rga-btn--red:hover { background: var(--rga-red-hover); color: var(--rga-white); }

a.rga-btn--ghost, .rga-chips a.rga-btn--ghost, .rga-prose a.rga-btn--ghost,
.rga-split a.rga-btn--ghost { background: none; color: var(--rga-ink); border: 1px solid var(--rga-border); }
a.rga-btn--ghost:hover, .rga-chips a.rga-btn--ghost:hover, .rga-prose a.rga-btn--ghost:hover,
.rga-split a.rga-btn--ghost:hover { background: var(--rga-bg-hover); color: var(--rga-ink); }

/* On the dark band the ghost outline needs the light treatment to stay legible. */
.rga-band-dark a.rga-btn--ghost { color: var(--rga-white); border-color: rgba(255,255,255,.55); }
.rga-band-dark a.rga-btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--rga-white); }

/* ============================ GRAVITY FORMS SKIN ==========================
   The corrections form ships with Gravity Forms' "orbital" theme: 3px radii,
   14px/500 labels and a #204CE5 blue submit button — none of which belong to
   this design system. Orbital resets aggressively (`all: unset` on controls),
   which is why the values below are LITERAL rather than var() references: a
   custom property does not survive that reset. Every value still comes from
   the measured palette — #D8D3CB border, #3F3F3F ink, #ED0000 red, Public Sans, the
   square 7px/30px 16px-700 button geometry of .rga-btn.
   Contrast: label ink 9.76:1 on tint, white-on-red button 4.56:1, required
   marker darkened to #C20000 (small red on #F7F6F5 measures only 4.23:1).   */
.gform_wrapper.gform-theme--framework,
.gform_wrapper.gform-theme--orbital { font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif; }

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-size: 16px !important; font-weight: 700 !important; line-height: 24px !important;
  color: #3F3F3F !important; margin-bottom: 8px !important;
}
.gform_wrapper .gfield_required { color: #C20000 !important; font-weight: 700 !important; }
.gform_wrapper .gfield_description,
.gform_wrapper .instruction {
  font-size: 14.08px !important; font-weight: 300 !important; color: #3F3F3F !important;
}

.gform_wrapper input[type="text"], .gform_wrapper input[type="email"],
.gform_wrapper input[type="url"], .gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"], .gform_wrapper select,
.gform_wrapper textarea {
  border: 1px solid #D8D3CB !important; border-radius: 0 !important;
  background: #FFFFFF !important; color: #3F3F3F !important;
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important; font-weight: 300 !important; line-height: 24px !important;
  padding: 12px 14px !important; box-shadow: none !important;
}
.gform_wrapper textarea { padding: 12px 14px !important; }
.gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus {
  border-color: #3F3F3F !important;
  outline: 3px solid #ED0000 !important; outline-offset: 2px !important;
}
.gform_wrapper ::placeholder { color: #6B6B6B !important; opacity: 1; }

/* Submit button = the measured .rga-btn--red geometry. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper input.gform_button {
  display: inline-block !important;
  background: #ED0000 !important; color: #FFFFFF !important;
  border: 0 !important; border-radius: 0 !important;
  padding: 7px 30px !important; min-height: 44px !important;
  font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 1px !important;
  transition: background .3s !important; cursor: pointer;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper input.gform_button:hover { background: #C40000 !important; }
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper input.gform_button:focus-visible {
  outline: 3px solid #3F3F3F !important; outline-offset: 3px !important;
}

/* Validation + confirmation messages in the layer's own voice. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message {
  border-radius: 0 !important; font-size: 16px !important; color: #A60000 !important;
}
.gform_confirmation_message {
  font-size: 20px !important; font-weight: 300 !important; line-height: 30px !important;
  color: #3F3F3F !important;
}

/* A prose block inside a page head is introducing the H1 directly above it, so
   it ranges with that heading rather than centring on its own 810px measure —
   otherwise the taxonomy landing pages read as a left-flush title with an
   indented paragraph under it. */
.rga-pagehead .rga-prose { margin-inline: 0; }


/* ==========================================================================
   DIRECTORY                                                    added 2026-08-01
   The provider directory at /directory/, its type landing pages and the
   single-entry pages.

   Nothing here is a new look. Every value is either already in this file or
   comes from the second measurement pass over the source:
     utility/rega/*.json         search rows, pagination, content pages
     dir/measure-list.json       rega /en/news list grid, rega /en/contact
   The one genuinely new primitive is the definition list, and it reproduces
   what the source's contact page does: a bold label at body size with the
   value stacked beneath it, on the source's 15px frame rhythm.
   ========================================================================== */

/* ------------------------------------------------------------ FILTER BAR --
   Composed entirely from measured parts: .rga-chips geometry for the type
   links, the form-control spec already established for Gravity Forms
   (1px #D8D3CB, square, 16/300/24, 12px/14px padding) for the select and the
   search field, and .rga-btn--red for submit. Sits in the same 853px column
   as the result rows so the bar and the rows share one left edge.            */
.rga-filters { max-width: var(--rga-results-w); margin: 0 auto 10px;
  padding-inline: var(--rga-gutter); }
.rga-filter-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rga-filter-label { margin: 0; font-size: var(--rga-fs-body); font-weight: var(--rga-w-bold);
  line-height: var(--rga-lh-body); color: var(--rga-ink); }
.rga-filter-group--types { margin: 0 0 24px; text-align: center; }
.rga-filter-group--types .rga-filter-label { text-align: center; }
.rga-filters .rga-filter-chips { margin: 0; }

/* Selected filter = the measured current-page pagination treatment:
   white on --rga-taupe (4.76:1). Restated for the anchor so it beats
   .rga-btn--ghost, which is equally specific and comes first. */
.rga-chips a.rga-btn.is-on,
.rga-filter-chips a.rga-btn.is-on { background: var(--rga-taupe); color: var(--rga-white);
  border-color: var(--rga-taupe); }
.rga-chips a.rga-btn.is-on:hover,
.rga-filter-chips a.rga-btn.is-on:hover { background: var(--rga-taupe-hover); border-color: var(--rga-taupe-hover); }

.rga-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 15px;
  margin: 0 0 20px; }
.rga-filter-row .rga-filter-group { flex: 1 1 200px; }
.rga-filter-row .rga-filter-group--go { flex: 0 0 auto; }

.rga-select, .rga-input {
  width: 100%; min-width: 0;
  border: 1px solid var(--rga-border); border-radius: 0;
  background: var(--rga-white); color: var(--rga-ink);
  font-family: var(--rga-font);
  font-size: var(--rga-fs-body); font-weight: var(--rga-w-light); line-height: var(--rga-lh-body);
  padding: 12px 14px; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
/* Native select arrow removed above, so restate one in the measured red. */
.rga-select { padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ED0000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.rga-input::placeholder { color: #6B6B6B; opacity: 1; }
.rga-select:focus, .rga-input:focus { border-color: var(--rga-ink);
  outline: 3px solid var(--rga-red); outline-offset: 2px; }
.rga-filter-row .rga-btn { min-height: 50px; cursor: pointer; border: 0; }

.rga-dir-resetwrap { max-width: var(--rga-results-w); margin: 0 auto 20px;
  padding-inline: var(--rga-gutter); text-align: center; }
.rga-dir-reset { font-size: var(--rga-fs-body); line-height: var(--rga-lh-body);
  color: #C20000; text-decoration: underline; text-underline-offset: 3px; transition: var(--rga-t-link); }
.rga-dir-reset:hover { color: var(--rga-red-hover); }

@media (max-width: 767.98px) {
  .rga-filter-row { flex-direction: column; align-items: stretch; }
  .rga-filter-row .rga-filter-group--go .rga-btn { width: 100%; }
}

/* ------------------------------------------------------- DIRECTORY ROWS --
   The rows are .rga-result — the measured search-result band, reused whole.
   Only the extra data a listing carries needs new rules.                     */
.rga-dir-item .rga-result-meta { margin: 0 0 10px; }
/* Coverage and cost are separated the way the source separates inline meta —
   the measured .rga-pagemeta gap (8px 24px) — not by a punctuation glyph. A
   middot in the border colour measured 1.38:1 against the zebra band. */
.rga-dir-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.rga-dir-cov { font-weight: var(--rga-w-bold); color: var(--rga-black); }
.rga-dir-cost { color: var(--rga-ink); }

/* Action run: the measured 404 inline-link pattern (red, 15px right padding).
   Fixed at #C20000 rather than #ED0000 because half these rows sit on the
   #F7F6F5 zebra band, where #ED0000 measures 4.23:1. #C20000 gives 5.90:1 on
   the band and 6.38:1 on white, so one value is correct on both. */
.rga-dir-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0;
  margin: 0; font-size: var(--rga-fs-body); line-height: var(--rga-lh-body); }
.rga-dir-actions a { display: inline-block; padding-right: 15px; color: #C20000; transition: var(--rga-t-link); }
.rga-dir-actions a:hover { color: var(--rga-red-hover); text-decoration: underline;
  text-underline-offset: 3px; }
.rga-dir-actions .rga-dir-tel { font-weight: var(--rga-w-bold); padding-right: 8px; }
.rga-dir-telnote { padding-right: 15px; color: var(--rga-ink);
  font-size: var(--rga-fs-meta); font-weight: var(--rga-w-light); }

/* Zebra banding is nth-child in the no-JS case. Once the filter can hide rows
   nth-child counts hidden siblings and the stripes break, so JS takes the
   list over and stamps .is-alt on the visible odd rows instead. */
.rga-dir-list.js-zebra .rga-result { background: transparent; }
.rga-dir-list.js-zebra .rga-result.is-alt { background: var(--rga-bg); }
.rga-dir-list .rga-result[hidden] { display: none; }

.rga-dir-empty { padding: 40px 0 20px; }

/* ------------------------------------------------------- DEFINITION LIST --
   Source contact page: a bold label at body weight sits above its value, and
   frames are separated on a 15px rhythm. Reproduced literally — label
   16/700/24, value 16/300/24 #3F3F3F, 15px block padding, hairline in the
   measured --rga-border.                                                     */
.rga-deflist { max-width: var(--rga-prose-w); margin: 0; padding: 0; }
.rga-deflist-row { padding: 15px 0; border-bottom: 1px solid var(--rga-border); }
.rga-deflist-row:first-child { padding-top: 0; }
.rga-deflist dt { margin: 0 0 4px; font-size: var(--rga-fs-body);
  font-weight: var(--rga-w-bold); line-height: var(--rga-lh-body); color: var(--rga-ink); }
.rga-deflist dd { margin: 0; font-size: var(--rga-fs-body); font-weight: var(--rga-w-light);
  line-height: var(--rga-lh-body); color: var(--rga-ink); overflow-wrap: anywhere; }
.rga-deflist dd a { color: #C20000; text-decoration: underline; text-underline-offset: 3px; transition: var(--rga-t-link); }
.rga-deflist dd a:hover { color: var(--rga-red-hover); }
.rga-deflist .rga-dir-telnote { display: inline; padding: 0 0 0 8px; }

/* Provenance line: the measured 14.08px meta size, ranged with the prose. */
.rga-dir-source { max-width: var(--rga-prose-w); margin: 30px 0 0; display: block; }

/* Type/intro copy in a page head keeps the head's left edge. */
.rga-pagehead-prose { max-width: var(--rga-prose-w); margin: 18px 0 0; }
.rga-pagehead-prose p { font-size: var(--rga-fs-prose); line-height: var(--rga-lh-prose);
  font-weight: var(--rga-w-light); color: var(--rga-ink); margin: 0; }

/* Bricks containers centre their children and size block children to content
   (see the container note above); the directory pieces are full-width blocks. */
.rga-filters, .rga-dir-list, .rga-dir-empty, .rga-deflist,
.rga-dir-resetwrap, .rga-dir-source, .rga-pagehead-prose { width: 100%; }

/* Standalone section sub-head. Measured content-page h3: 20/700/25, mb15 —
   the same spec .rga-prose h3 already uses, promoted to a class so a Bricks
   heading element outside a prose block can carry it. */
.rga-h3 { margin: 0 0 15px; font-size: var(--rga-fs-title); line-height: 25px;
  font-weight: var(--rga-w-bold); color: var(--rga-black); }

/* An eyebrow that is also a link back to its type landing page. */
a.rga-eyebrow--link { color: #5E5343; text-decoration: none; transition: var(--rga-t-link); }
a.rga-eyebrow--link:hover { color: var(--rga-red-hover); text-decoration: underline;
  text-underline-offset: 3px; }

/* ------------------------------------------------------- SUPPORT PAGE ------
   /support/ (page 145). No new metrics here: both variants reuse geometry the
   layer already measures and change only colour, and the disclosure reuses the
   measured 16px body size. The deflist modifier is written at two-class
   specificity so it beats the base `.rga-deflist dd` rule regardless of order. */

/* Accordion on a light canvas. The dark band's rule is rgba(255,255,255,.35);
   this is the same 35% weight inverted onto the measured ink #3F3F3F.        */
.rga-acc--light { border-top-color: rgba(63,63,63,.35); }
.rga-acc--light .rga-acc-item { border-bottom-color: rgba(63,63,63,.35); }
.rga-acc--light .rga-acc-btn { color: var(--rga-black); }
.rga-acc--light .rga-acc-panel p { color: var(--rga-ink); }

/* The directory's deflist is a tight contact block; this variant carries a run
   of claim/explanation pairs, which need air between them.                    */
.rga-deflist--spaced dl { margin: 0; }
.rga-deflist.rga-deflist--spaced dt { margin: 0 0 6px; }
.rga-deflist.rga-deflist--spaced dd { margin: 0 0 26px; }
.rga-deflist.rga-deflist--spaced dd:last-child { margin-bottom: 0; }

/* Funding disclosure under the CTA. Deliberately set at the 16px body size
   rather than the 14.08px meta size: a not-a-charity statement should not read
   as buried fine print. 82% white on the dark band computes 7.7:1.            */
.rga-disclosure { max-width: var(--rga-prose-w); margin: 28px 0 0;
  font-size: var(--rga-fs-body); line-height: 1.6; font-weight: var(--rga-w-light);
  color: var(--rga-ink); }
.rga-band-dark .rga-disclosure { color: rgba(255,255,255,.82); }
/* The numbered-list counter is the same small-red-on-tint case already
   corrected for .rga-prose links and .rga-linklist above: #ED0000 measures
   4.23:1 on #F7F6F5 (fails AA for text under 18.66px/700), #C20000 gives
   5.90:1. On the white canvas #ED0000 measures 4.56:1 and is left alone, so
   the correction is scoped to the tint band exactly as the others are.       */
.rga-section--tint .rga-num-n { color: #C20000; }
/* ------------------------------------------------- HEADER CTA — /support/ --
   Added 2026-08-09. Not present in the rega capture; composed entirely from
   already-measured tokens rather than new values: the geometry of rega
   `a.button` (7px vertical, 16px/700, letter-spacing 1px) with the horizontal
   padding tightened 30px -> 18px so the 122px bar still holds logo + CTA +
   search + burger down to 768px, and the measured `--rga-scrim` for the rule.

   Deliberately NOT red. The hero action bar's red "My pet is missing" is the
   emergency path; a funding ask sitting directly above it in the same red
   would compete with it at exactly the wrong moment. Outline instead.

   SPECIFICITY: written as `a.rga-header-cta` (0,1,1), never `.rga-header-cta`
   (0,1,0). The button-hardening block above restates the buttons at
   `a.rga-btn`, which otherwise wins outright — it repaints this one taupe at
   30px padding and, worse, forces the white label back on, which is invisible
   against the white header every interior page renders.

   Default state is ink-on-white, because that is what interior pages actually
   render (`.rga-header:not(.on-hero)`) and because it is the safe fallback if
   the JS state classes never land. The white variant is scoped to the single
   state that is genuinely over the hero photo. */
a.rga-header-cta {
  padding: 7px 18px;
  background: none;
  color: var(--rga-ink);
  border: 1px solid var(--rga-scrim);   /* rgba(63,63,63,.6) = 3.37:1 on white */
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;  /* as .rga-header */
}
a.rga-header-cta:hover { background: var(--rga-bg-hover); color: var(--rga-ink); }

.rga-header.on-hero:not(.is-solid) a.rga-header-cta {
  color: var(--rga-white); border-color: var(--rga-white);
}
.rga-header.on-hero:not(.is-solid) a.rga-header-cta:hover {
  background: var(--rga-white); color: var(--rga-ink);
}

/* Below 768px the bar has no room for a fourth control (logo ~237 + CTA ~196 +
   search 44 + burger 44 + gaps ~= 625px). The overlay nav item and the footer
   link carry /support/ there. */
@media (max-width: 767.98px) { a.rga-header-cta { display: none; } }

/* ---------- Steps: visible time-boxed first-hours actions (homepage, 2026-08-22) ---------- */
/* Chip geometry from the measured filter chips (rega .secondary_button): 7px 30px, 16/700, ls 1px, bg #ECE9E1. */
.rga-steps { display: block; }
.rga-step { padding: 30px 0 34px; border-top: 1px solid #D8D3CB; }
.rga-step:first-child { border-top: 0; padding-top: 0; }
.rga-step-when { display: inline-block; margin: 0; padding: 7px 30px; background: #ECE9E1; color: #3F3F3F; font: 700 16px/20px "Public Sans", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
/* Heading from the measured content-page h3: 20/700/25. */
.rga-step h3 { margin: 15px 0 0; font: 700 20px/25px "Public Sans", sans-serif; color: #000; }
/* List from the measured prose ul: pl 20, li 16/300/24. */
.rga-step ul { margin: 15px 0 0; padding: 0 0 0 20px; list-style: disc; }
.rga-step li { margin: 0 0 8px; font: 300 16px/24px "Public Sans", sans-serif; color: #3F3F3F; }
/* Action link from the measured 404 inline-link run (red, 15px right padding); #C20000 holds AA on white (6.38:1). */
.rga-step-more { display: inline-block; margin-top: 15px; padding-right: 15px; font: 700 16px/24px "Public Sans", sans-serif; color: #C20000; text-decoration: none; transition: var(--rga-t-link); }
.rga-step-more::after { content: '\2192'; }
.rga-step-more:hover, .rga-step-more:focus-visible { text-decoration: underline; }

/* ---------- Logo lockups (2026-08-22): wide lockup in header, footer, favicon ---------- */
/* Flat single-colour PNGs by the owner; red #B53725, off-white #F9F9F9. */
/* Header: the old <b> square becomes the lockup holder; span stays as the accessible name. */
/* Red default (solid header, interior pages); off-white over the hero photo, same
   mechanism as the header search icon swap. 30px tall = 224px wide at the 7.48 ratio. */
.rga-logo .rga-logo-lg { width: 280px; height: 38px; background: transparent url('https://petsearchcanada.com/wp-content/uploads/2026/08/psc_logo_vert.png') left center / contain no-repeat; }   /* widened from 224x30 — client-directed, more visual weight */
.rga-header.on-hero:not(.is-solid) .rga-logo .rga-logo-lg { background-image: url('https://petsearchcanada.com/wp-content/uploads/2026/08/psc_logo_wide_offwhite.png'); }
@media (max-width: 767px) { .rga-logo .rga-logo-lg { width: 210px; height: 28px; } }   /* widened from 178x24, same ratio as desktop bump */
/* Footer: red lockup, 200x27, above the social row. */
.rga-logo-foot { width: 200px; height: 27px; margin: 0 0 26px; background: transparent url('https://petsearchcanada.com/wp-content/uploads/2026/08/psc_logo_vert.png') left center / contain no-repeat; }

/* ---------- First-hours steps on the dark band (2026-08-29) --------------------
   The 08-22 .rga-steps rules were measured against a light background — their own
   comments cite AA *on white*. The homepage band alternation later moved this
   section onto --rga-ink, which left .rga-step li at exactly 1:1 (ink on ink),
   the h3 at 1.6:1 and the action links at 1.75:1. Restated here for the dark
   band, and the list markers moved onto the signature red-dash pattern from the
   guide prose (.psc-prose) — as a light tint, because the measured brand red is
   ~2.4:1 on ink (same call as .psc-r-sec-deep em on the checklist page).
   The h2 em accent ("Your first hours, <em>in order</em>") follows the dark-band
   precedent (.rga-cta "Help fund the <em>next search</em>"): plain italic, no
   colour rule needed. */
.rga-band-dark .rga-step { border-top-color: rgba(255,255,255,.28); }
.rga-band-dark .rga-step h3 { color: var(--rga-white); }
.rga-band-dark .rga-step ul { list-style: none; padding-left: 24px; }
.rga-band-dark .rga-step li { position: relative; color: rgba(255,255,255,.88); }
.rga-band-dark .rga-step li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 9px; height: 2px; background: #F2B3BE;
}
/* Action links: accent tint on ink, plus the rga-arrow hover slide (the ::after
   arrow is text, so the slide needs its own timing — .rga-step-more's existing
   transition var covers colour only). Raw timing is a deliberate one-off here;
   the reduce guard below keeps the sitewide prefers-reduced-motion promise. */
.rga-band-dark .rga-step-more { color: #F2B3BE; }
.rga-step-more::after { display: inline-block; transition: transform .3s ease; }
.rga-step-more:hover::after, .rga-step-more:focus-visible::after { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .rga-step-more::after { transition: none; } }
/* Left-column lead rises to the measured lead scale (class patched onto prga101)
   so the band keeps its hierarchy: h2 fs-section/100, lead fs-lead/300,
   step h3 fs-title/700, body fs-body/300. */
.rga-band-dark .rga-split .rga-lead { font-size: var(--rga-fs-lead); line-height: 1.6; }