@charset "UTF-8";
/*
Theme Name: Flight
Description: Bootstrap 5 sub-theme of Bootstrap Barrio, built with Sass.
*/
/* THE WEBFONTS — FURFINDS, VARIABLE FRAUNCES
--------------------------------------------------

   🔴🔴 WHY THIS FILE EXISTS AT ALL. On 2026-08-23 it turned out that **0 of 16
   fonts in fontyourface were activated**, so the site had been rendering in its
   fallbacks the whole time — Georgia where Fraunces should be. Liz's read was
   "our Fraunces looks different"; it was not Fraunces, it was Georgia.

   ⭐⭐ AND WHY FRAUNCES IS DECLARED HERE RATHER THAN IN fontyourface. Fraunces
   is a VARIABLE font with four axes:

       opsz   9 – 144   optical size
       wght 100 – 900   weight
       SOFT   0 – 100   softness
       WONK   0 – 1     the "wonky" alternates, its actual character

   fontyourface's Custom Font form takes ONE weight and ONE style per entry, so
   a variable file loaded through it gets pinned to a single fixed weight and
   its whole range is thrown away. That is why the static cuts were used, and
   the static release only ships the **72pt** optical cut — drawn for display,
   with high contrast and fine hairlines. At body sizes it reads noticeably
   sharper and thinner than what Google's specimen page and her Lovable comp
   show, because those load the variable file.

   ⭐ THE FILES ARE SERVED LOCALLY AND THAT IS DELIBERATE — ⛔ never from
   Google's CDN. See build-sequence.md 7f. klaro is installed on this site, so
   a third-party font request is a consent problem, not just a performance one.
   The four woff2 files were downloaded from Google Fonts (Fraunces v38) on
   2026-08-23 and live in the theme's own `fonts/` directory.

   ⚠️ `url: false` is set for css-loader in webpack.config.mjs, so these paths
   are passed through EXACTLY as written and are relative to `css/style.css`.
   ⛔ Do not "fix" them to be relative to this SCSS file.

   ⭐⭐ NO `font-variation-settings` IS SET, AND THAT IS THE POINT. SOFT and WONK
   both default to 0, which is what Google's CSS delivers and therefore what her
   comp is showing. `font-optical-sizing: auto` lets the browser pick opsz from
   the font size, which is the entire reason the variable file looks right at
   body sizes and the 72pt static does not.
   ⛔ Do not add WONK to "make it more like Fraunces" — that would take it FURTHER
   from her design, not closer.

   ⭐ `font-weight: 100 900` on the @font-face is what tells the browser this one
   file covers the whole range. Every weight the theme asks for now exists,
   including 500 — the old "Fraunces static ships no Medium" warning in
   _typography.scss no longer applies to the display face.
*/
/* Upright. latin-ext first, then latin — order does not matter to the browser,
   it picks by unicode-range, but keeping them paired reads better. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Italic is a SEPARATE variable file, ⛔ not a slant axis on the upright one. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-variable-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* INTER, the base face — also VARIABLE, and self-hosted for the same reasons.

   ⭐ It was in exactly the same state as Fraunces: static cuts sitting in
   fontyourface, all deactivated, so the site fell back to system-ui. Doing only
   Fraunces would have fixed the headings and left the body copy wrong.

   ⭐ Inter is variable on `opsz` 14–32 and `wght` 100–900. Its optical axis is
   subtler than Fraunces' but it is the reason Inter looks right both as 14px
   card meta and as a large lead paragraph.
   ⛔ Do NOT reintroduce the fontyourface Inter entries alongside these — two
   @font-face declarations for one family is how a site ends up with the wrong
   one winning depending on load order. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ⭐ THE LINE THAT MAKES THE VARIABLE FILE WORTH HAVING. Without it the browser
   uses the font's default optical size at every size, which is most of what
   made the static 72pt cut look wrong as body copy. */
html {
  font-optical-sizing: auto; }

/* VARIABLES
--------------------------------------------------

   ⭐⭐ COLOUR LIVES IN _palettes.scss, NOT HERE. This file says how the six
   palette roles are USED. That split is the whole architecture: a new client
   look is a palette, not a theme.

   ➡️ TO CHANGE THE LOOK: change $palette-name on the next line. That is it.
*/
/* ⛔ FURFINDS CLIENT SITE. First Light stays on 'tidal'. */
/* PALETTES
--------------------------------------------------

   ⭐⭐ THE POINT OF THIS FILE: one theme, several palettes. A client picks a
   palette rather than commissioning a theme, which is what makes a fixed price
   hold. ⛔ Do not fork the theme to change colours. Add a palette here.

   ➡️ TO SWITCH THE ACTIVE PALETTE: change $palette-name in _variables.scss to
   any key below and rebuild. Nothing else in the theme needs touching.

   ➡️ TO ADD A PALETTE: copy a block, give it all six roles, done.

   SIX ROLES, and every palette must fill all six. The roles are what the theme
   is written against, so a palette that fills them correctly cannot break the
   design:

     ink      the darkest tone. Headings and body text.
     primary  the main brand colour. Links, the card's top edge, the tier chip.
     accent   the second colour. Used sparingly, for contrast not decoration.
     surface  the page background.
     muted    a mid neutral. Secondary text, labels, hairlines.
     raised   what sits ON the surface — cards, panels. Usually white, but not
              always: it has to lift off `surface`, which is the only rule.

   ⚠️ Hover and pressed states are DERIVED with Bootstrap's tint-color() and
   shade-color(), so a palette is genuinely six values and not a hidden
   twenty-four.
*/
/* ⛔⛔ FURFINDS CLIENT THEME. ONE PALETTE, AND IT IS HERS.

   First Light's 'tidal' and 'moss' palettes have been REMOVED from this copy
   on purpose. Her instruction, 19 Aug: "remove the firstlight colors
   completely and make furfinds the default colors, don't try to override and
   keep the old ones."

   ⭐ She is right. Layering a client override on top of a template palette is
   how the footer silently lost earlier tonight. One palette means nothing to
   beat and nothing to fight.

   ⛔ THE TEMPLATE STILL HAS ALL ITS PALETTES. This deletion is FurFinds only.

   ⭐⭐ SOURCE OF TRUTH, changed 20 Aug: the CLIENT'S OWN DOCUMENT,
   "FurFinds Business Outline.pdf", which states her brand colours as
   Dark Blue #395EA1, Light Blue #88C7E8, Very Light Blue #D3EEFF and White.
   Her instruction: "we looked to use the paper that she gave us... Don't just
   go by lovable then if she actually gave us a document."
   ⛔⛔ NO COLOUR COMES FROM LOVABLE. Her instruction, 20 Aug: "no coloring from
   Lovable. the rest of the styling can come from there." So Lovable still
   governs radius, the type pairing, heading tracking and the shadow GEOMETRY,
   ⛔ but every colour value is hers or derived from hers by tint/shade.

   ⭐ `primary` is now her Dark Blue #395EA1, added 20 Aug on her instruction
   ("add that dark blue please we'll remove if we get pushback"). It measures
   6.38:1 on white, so it passes WCAG AA as body text AND carries white text on
   top at the same 6.38:1. That closes the accessibility problem the Lovable
   palette had, using her own colour rather than a chosen one.
   ⛔ #69aed5 is GONE. The accent is now her Light Blue #88C7E8, which is also
   fills-only: it measures 1.85:1 and can never carry type or a border.

   ⭐ `ink` WAS TRIALLED AS HER DARK BLUE ON 20 AUG AND SHE REJECTED IT:
   "that does not read well at all." With ink and primary both #395EA1, body
   copy, headings, nav and links all landed on one blue and the hierarchy
   flattened. ➡️ ink is now #1F3358, her own Dark Blue darkened, 12.55:1 AAA on
   white. Nothing invented: it is her colour, not a new one.

   ⭐⭐ WHY ink IS THIS DARK, AND IT IS DELIBERATE. She does not want underlined
   links, and neither did the client's design. WCAG technique G183 allows that
   as long as link text has 3:1 against the body text around it, with a
   non-colour cue on hover and focus. The theme already does the hover half:
   $link-decoration is none and the underline appears on hover.

   So the whole job fell on ink. Solving for 3:1 against #395EA1 while keeping
   her exact hue (218.7deg) and saturation (48%) puts ink at 6% lightness:
   #080D17, which measures 19.44:1 on white and 3.05:1 against the link.
   ⛔ DO NOT LIGHTEN IT. #0B121E, one step up, drops to 2.94:1 and the links
   stop being identifiable without an underline.

   ⚠️ An earlier note here claimed no darkening of her blue could ever reach
   3:1. That was WRONG. It came from testing four rungs of one ladder that
   stopped at 12.55:1, and she was right to push back on it. */
/* Fetch one role from the active palette. Fails loudly rather than silently
   rendering a broken colour, because a missing role should stop the build. */
/* Derived steps. ⚠️ Everything below is computed from the six, so a palette
   stays six values. ⛔ Do not hardcode a colour past this point. */
/* Status colours. ⛔ CHANGED 20 Aug, and DELIBERATELY NOT BRAND COLOURS.
   Her call: "Error needs to be non-brand, or at least a very standout color...
   it shouldn't blend in that's for sure." The old pair was tuned to sit in the
   same register as the brand, which is exactly the wrong instinct for an error.
   ⚠️ The old $yellow #c98a2e also FAILED AA outright at 2.93:1.
   ⭐ FOR KASHMERE TO APPROVE, like the tiers. */
/* ⚠️ COMPATIBILITY ALIASES. The older partials were written against these
   names. ⛔ Do not use them in new code, use the roles above. */
/* ⭐ CHANGED 20 Aug. Links were $primary-shade-1 (#2E4B81), a DARKENED version
   of her brand blue. Two problems: it is not actually her colour, and at 8.61:1
   it sits so close to body text that no ink, not even pure black, reaches the
   3:1 separation that unlinked-underline identification needs (black only makes
   2.44:1). Links now wear her Dark Blue exactly, which is 6.38:1 on white, AA,
   and 3.05:1 against ink. ⛔ Do not "darken it for contrast" again: darkening it
   is what broke it. */
/* Borders and corners. A directory is a grid of repeated shapes, so corners
   stay small: heavy rounding turns a scannable set into a row of pills. */
/* ⭐ FURFINDS: her design sets --radius: 1rem with a scale around it. This is
   a large part of why her comp looks soft and this theme did not. */
/* TYPOGRAPHY
--------------------------------------------------

   ⛔ NO WEBFONTS ARE LOADED HERE, ON PURPOSE.

   Font loading is fontyourface's job on this site, and which faces a build
   uses is a per-client decision. What lives here is the SCALE, which is the
   part that should stay the same across every variant.

   ➡️ TO GIVE A BUILD ITS OWN FACES: pick them in fontyourface, then set
   $font-family-display and $font-family-base below. Two lines. Everything
   else is derived and needs no attention.

   The stacks below are the fallbacks, and they are chosen to be survivable on
   their own rather than to be placeholders: a build that never gets custom
   fonts should still look deliberate.
*/
/* THE TEMPLATE DEFAULT PAIR, chosen 2026-08-17: Fraunces + DM Sans.
   Both SIL OFL, so they are downloaded and served locally. ⛔ Not the Google
   CDN — see build-sequence.md 7f for why.

   ⚠️ FLIPPED 2026-08-17, her call: SANS ON TOP, SERIF UNDERNEATH. DM Sans
   carries the headings and Fraunces carries body copy. ⛔ Do not "correct" it
   back to the conventional serif-heading pairing.

   ⚠️ STATIC cuts ship here, not the variable files. fontyourface's Custom Font
   form takes one weight and one style per entry, so a variable font would be
   declared as a single fixed weight and its range lost.

   ⚠️ THE KNOWN COMPROMISE: Fraunces static only ships the 72pt cut, which is
   drawn for large sizes. As body copy at 16px its contrast runs high and its
   hairlines run fine. It is legible, it is not optimal. ➡️ If it reads thin
   once there is real content on the page, swap the base face for a serif drawn
   for text — Source Serif 4 or Lora — and change one line here.
   ⭐ DM Sans uses its 36pt cut for headings, which is the display optical size.

   The fallbacks behind each face are chosen to RESEMBLE it in width and
   x-height, so the page does not visibly jump when the webfont swaps in.
   Georgia stands in for Fraunces; ⛔ Optima did not, it is humanist and low
   contrast and looked nothing like it. */
/* ⛔⛔ SUPERSEDED 2026-08-23 — READ THIS BEFORE TRUSTING THE NOTES ABOVE.
   Everything above about STATIC cuts, the 72pt compromise and "Fraunces ships
   no Medium" was true until 8/23 and is NOT true any more on FurFinds.

   🔴 It turned out **no webfont was loading on this site at all** — all 16
   fontyourface entries were deactivated, so the page had been rendering in
   Georgia and system-ui.

   ✅ Fraunces AND Inter are now the **VARIABLE** files, self-hosted in the
   theme's own `fonts/` directory and declared in **_fonts.scss**, ⛔ not through
   fontyourface. `font-weight: 100 900` means every weight exists, **500
   included**, and `font-optical-sizing: auto` is what makes them read correctly
   at body sizes.
   ➡️ 📄 See `scss/_fonts.scss` for the whole story.
   ⛔ Do not re-enable the fontyourface entries for these two families — two
   @font-face sets for one family is how the wrong one wins by load order. */
/* ⛔ FURFINDS: her design is Fraunces headings over Inter body — the REVERSE of
   the First Light default. ⛔ Do not change this in the template. */
/* THE SCALE.

   Deliberately shallow. A directory's job is scanning a grid of listings, and
   a dramatic scale fights that: every card would shout its own name. The
   headings step up enough to structure a page and no further. The one place
   this template spends contrast is weight and colour, not size.
*/
/* ⚠️⚠️ CHANGED 2026-08-23 — FURFINDS ONLY. ⛔ DO NOT CARRY THIS INTO FIRST LIGHT.
   Her call: the h2s read too small on the live site.
   ⭐⭐ THE PREVIOUS VALUES, so this is one edit to undo:
       $h1-font-size: $font-size-base * 2.5;    // 40
       $h2-font-size: $font-size-base * 1.9375; // 31
   ⚠️ h1 MOVED TOO, and that is the point. At 31 the h2 already sat close to a
   40px h1; raising h2 alone would have put four pixels between them and the
   ladder would have stopped reading as a ladder. Both move, the step stays.
   ⛔ Do not raise h2 again without moving h1 with it.
   📄 Full record: coolfire/firstlight/furfinds-design-decisions.md */
/* ⚠️ 600, not 500. Fraunces ships NO Medium in its static cuts — the weights
   are Thin, Light, Regular, SemiBold, Bold, Black. Asking for 500 would get a
   browser-synthesised fake bold on a high-contrast serif, which smears.
   ➡️ If SemiBold reads too solid, drop to $font-weight-normal and upload
   Fraunces_72pt-Regular instead. ⛔ Do not put 500 back. */
/* DRUPAL MESSAGE VARIABLES vs BOOTSTRAP'S SKELETON CLASS
--------------------------------------------------

   Her report, 2026-08-24: "why is the text covered in color?"

   🔴🔴 A GENUINE COLLISION, ⛔ not a theme choice. Drupal wraps every variable
   inside a message in `<em class="placeholder">` — file paths, node titles,
   usernames, all of it. Bootstrap 5 ALSO has a `.placeholder` class, but it is
   the loading-skeleton component:

     .placeholder { display:inline-block; min-block-size:1em; cursor:wait;
                    background-color:currentcolor; opacity:.5 }
     .placeholder { animation: placeholder-glow 2s ease-in-out infinite }

   ➡️ So `background-color: currentcolor` paints a SOLID BAR the same colour as
   the text, straight over the words. Every Drupal message carrying a variable
   is affected, ⛔ not just errors.
   ⚠️ THIS MATTERS FOR THE CLIENT: "The business Bright Paws Grooming has been
   updated" would show her the business name as a coloured block.

   ⭐ Scoped to `em.placeholder` deliberately. Drupal only ever emits the class
   on an `<em>`; Bootstrap's real skeletons go on `span`/`div`. So the skeleton
   component still works and only Drupal's usage is rescued.
   ⛔ Do not "fix" this by removing the Bootstrap import in _import.scss — that
   would drop a component the theme may use elsewhere. */
em.placeholder {
  display: inline;
  min-block-size: 0;
  vertical-align: baseline;
  cursor: auto;
  background-color: transparent;
  opacity: 1;
  animation: none; }

.node--type-testimonial.node--view-mode-teaser {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  background: rgba(0, 0, 0, 0.03);
  border-left: 4px solid #6695ae;
  border-radius: 0.25rem; }
  .node--type-testimonial.node--view-mode-teaser blockquote {
    flex: 1 1 auto;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    font-size: 1.0625rem;
    line-height: 1.6; }
    .node--type-testimonial.node--view-mode-teaser blockquote::before {
      content: '\201C';
      display: block;
      margin-bottom: 0.25rem;
      color: #6695ae;
      font-size: 2.5rem;
      line-height: 1; }
  .node--type-testimonial.node--view-mode-teaser cite {
    display: block;
    margin-top: auto;
    color: #395EA1;
    font-style: normal;
    font-weight: 600; }

/* BUSINESS LISTINGS
--------------------------------------------------

   Styling for node--business--teaser.html.twig and the grid wrapper in
   views-view-unformatted--business-listings.html.twig.

   The grid itself is Bootstrap utility classes in the twig, not here, so the
   breakpoints stay readable next to the markup. What lives here is the part
   Bootstrap has no class for.

   ⭐ THE ONE IDEA: a listing card is a thing you scan past, not a thing you
   read. So the card is quiet, and the only emphasis on it is the business
   name. Everything else — the tier, the city, the category — is orientation
   and is set back deliberately.

   ⭐⭐ THE SIGNATURE: the top edge. A card is quiet at rest and grows a 2px
   rule in the palette's primary along its top edge on hover and on
   focus-within. It costs nothing, it makes keyboard focus a designed state
   rather than an afterthought, and it tells the reader which card they are
   pointing at without moving anything on the page.
*/
.business-teaser {
  border: 1px solid #bbc8df;
  /* ⭐ 2rem, not $border-radius. Her design uses Tailwind's rounded-3xl on these
     cards, which is 32px, while the base radius is 16px. Measured against the
     comp on 20 Aug: card 289x455 at radius 32px. ⛔ Do not "tidy" this back to
     $border-radius, the softer corner is the look. */
  border-radius: 2rem;
  overflow: hidden;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  /* The top edge. Kept as a pseudo-element so nothing reflows when it appears. */
  position: relative;
  /* The featured image is a media entity render, so its markup is not ours to
     control. Crop it with a ratio box and object-fit rather than trying to
     constrain whatever comes out. */
  /* THE EMPTY STATE.

     field_featured_image became OPTIONAL on 2026-08-17, which is the right
     call — a client should not be forced to source a photo for 40 listings.
     But the media box still has to be filled, or the cards in a row stop
     lining up and the grid looks broken rather than sparse.

     ⛔ Deliberately NOT the words "image goes here". On a directory where a
     third of the listings have no photo, repeated text reads as an unfinished
     site. A quiet mark reads as "no photo", which is the truth and is not
     embarrassing in front of a client's own customers.

     ⭐ Drawn, not shipped as a file. The svg uses currentColor, so it takes the
     palette's muted tone whatever palette is active. A baked PNG would clash
     the first time somebody picks their own colours. */
  /* THE TIER CHIP.

     ⚠️ MOVED ONTO THE IMAGE 2026-08-19. It used to sit in the card body above
     the name. On the image it is orientation attached to the thing it
     describes, and it frees the name to sit directly above the category.

     ⭐ THE REASON IT IS NOW FILLED, and it reverses the earlier note here: an
     outline chip was right in the card body, where the background is known. On
     top of a CLIENT'S PHOTOGRAPH the background is unknown, and a hairline
     outline in a mid tone can land on anything. A solid surface-coloured pill
     is legible over every photo, which is the only requirement that matters
     once the chip moves.

     ⛔ It is still not a loud badge — it is the page background colour, not the
     brand colour, so it reads as a label rather than a sticker. */
  /* THE CATEGORY, as a subtitle under the name. It answers "what IS this"
     before the description answers "what is it like". ⛔ Not a link here even
     though the field renders one — see the link colour reset below; a blue
     subtitle would compete with the name. */
  /* THE PLACE LINE. Category moved up under the name on 2026-08-19, so the
     meta row now carries the city alone, with a pin so it reads as a location
     at a glance rather than as another link. */
  /* THE CTA.

     ⭐ WHY IT EXISTS: the title is a link, but a link inside a card is a small
     target and gives no signal that the whole card leads somewhere. An explicit
     button is what people aim at.

     ⛔ tabindex="-1" and aria-hidden in the twig, deliberately. It goes to the
     same place as the title, so without that a keyboard user tabs the same
     destination twice and a screen reader reads the business name twice. */
  /* City is orientation, not the point of the card. A hairline separates it
     from the description so the eye knows to stop reading. */ }
  .business-teaser::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 2px;
    background: #395EA1;
    opacity: 0;
    transition: opacity .15s ease-in-out; }
  .business-teaser:hover, .business-teaser:focus-within {
    border-color: #4D6EAA;
    box-shadow: 0 1px 3px rgba(8, 13, 23, 0.08); }
    .business-teaser:hover::before, .business-teaser:focus-within::before {
      opacity: 1; }
  .business-teaser__media {
    position: relative;
    /* anchor for the overlaid tier chip, 2026-08-19 */
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #dfe5f0; }
    .business-teaser__media img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      display: block; }
  .business-teaser__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dfe5f0;
    color: #91a5ca; }
  .business-teaser__placeholder {
    inline-size: 28%;
    max-inline-size: 4rem;
    block-size: auto;
    display: block; }
  .business-teaser__tier {
    position: absolute;
    inset-block-start: .625rem;
    inset-inline-start: .625rem;
    z-index: 1;
    max-inline-size: calc(100% - 1.25rem); }
    .business-teaser__tier .field__item {
      display: inline-block;
      padding: .25em .625em;
      border-radius: 999px;
      background: rgba(247, 252, 255, 0.94);
      box-shadow: 0 1px 2px rgba(8, 13, 23, 0.18);
      color: #2e4b81;
      font-size: 0.75rem;
      /* ⚠️ 600, not 500. The chip inherits $font-family-base, which is Fraunces
         since the 8/17 flip — and static Fraunces ships no Medium. 500 here
         would be a browser-faked bold. */
      font-weight: 600;
      line-height: 1.4;
      text-transform: uppercase;
      letter-spacing: .06em; }
  .business-teaser__category {
    margin-block-end: .5rem;
    font-size: 0.875rem;
    color: #4D6EAA;
    /* ⚠️ The teaser display renders this field with its label visible, so the
       word "Category" printed above the value. The label is redundant under a
       business name — the value alone reads as the category. */ }
    .business-teaser__category .field,
    .business-teaser__category .field__items,
    .business-teaser__category .field__item {
      display: inline; }
    .business-teaser__category .field__label {
      display: none; }
    .business-teaser__category .field__item + .field__item::before {
      content: " · "; }
    .business-teaser__category a {
      color: inherit;
      text-decoration: none; }
      .business-teaser__category a:hover, .business-teaser__category a:focus-visible {
        color: #2e4b81;
        text-decoration: underline;
        text-underline-offset: .15em; }
  .business-teaser__title {
    margin-block-end: .375rem;
    font-weight: 500; }
    .business-teaser__title a {
      color: #080D17;
      text-decoration: none; }
      .business-teaser__title a:hover, .business-teaser__title a:focus-visible {
        color: #2e4b81;
        text-decoration: underline;
        text-underline-offset: .15em; }
  .business-teaser__description {
    color: #364d77;
    font-size: 0.875rem;
    line-height: 1.6;
    /* 🔴 WHY THIS CLAMP EXISTS, 20 Aug. The cards stretch to equal height, so
       ONE long description sets the height of every card in the row. Measured:
       the tallest card was pushing 52px of `mt-auto` dead space into all the
       others, making a 467px card render at 536px against the comp's 455px.
       ⭐ Two lines keeps the row honest whatever a client types. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  .business-teaser__place {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #364d77; }
    .business-teaser__place .field,
    .business-teaser__place .field__items,
    .business-teaser__place .field__item {
      display: inline; }
    .business-teaser__place .field__label {
      display: none;
      /* the pin says "city" better than the word does */ }
  .business-teaser__pin {
    inline-size: .95em;
    block-size: .95em;
    flex: none;
    color: #4D6EAA; }
  .business-teaser__cta {
    display: block;
    margin-block-start: .875rem;
    padding: .5rem .75rem;
    border: 1px solid #bbc8df;
    border-radius: 1rem;
    color: #080D17;
    font-size: 0.875rem;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out; }
    .business-teaser__cta:hover {
      background: #dfe5f0;
      border-color: #4D6EAA;
      color: #2e4b81;
      text-decoration: none; }
  .business-teaser__meta {
    padding-block-start: .75rem;
    margin-block-start: .75rem;
    border-block-start: 1px solid #bbc8df;
    font-size: 0.875rem; }
    .business-teaser__meta .field {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem .5rem;
      margin-block-end: .25rem; }
      .business-teaser__meta .field:last-child {
        margin-block-end: 0; }
    .business-teaser__meta .field__label {
      color: #4D6EAA;
      font-weight: 400; }
      .business-teaser__meta .field__label::after {
        content: ""; }
    .business-teaser__meta .field__items {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem .5rem; }
    .business-teaser__meta a {
      color: #364d77;
      text-decoration: none; }
      .business-teaser__meta a:hover, .business-teaser__meta a:focus-visible {
        color: #2e4b81;
        text-decoration: underline;
        text-underline-offset: .15em; }

/* Someone arriving on a category or city page with no results should be told
   what to do, not shown an empty region. */
.business-listings {
  /* The card is the flex child, so it has to fill the column for h-100 to
     mean anything. */ }
  .business-listings__item {
    display: flex; }
  .business-listings__item > .business-teaser {
    inline-size: 100%; }

@media (prefers-reduced-motion: reduce) {
  .business-teaser,
  .business-teaser::before {
    transition: none; } }
/* BUSINESS DETAIL — the listing page
--------------------------------------------------

   ⭐⭐ THE PAGE EVERY CARD LEADS TO. Built 2026-08-19, because until then it
   was a full-bleed image over a flat stack of bare field values.

   ⭐ THE ONE IDEA: prose on the left, FACTS on the right. On a directory the
   questions are "where is it" and "can I call it", and neither should ever sit
   underneath a paragraph.
*/
.business-detail {
  /* Same 4:3 box and same overlaid chip as the card, so a visitor recognises
     what they clicked. ⛔ Not full-bleed — an uncropped image at whatever size
     the client uploaded is what made this page look broken. */
  /* ⭐ THE RIGHT COLUMN. One grid cell holding the contact card and the Report
     an issue panel, stacked with the same 1rem gap the left column uses.
     🔴 They were separate grid children before. Row one is as tall as the LEFT
     column, so the report panel fell to row two and stranded itself at the
     bottom of the page. Wrapping them fixes it for good.
     ⛔ Do not put `grid-column` back on `&__report`. */
  /* The description is the lead paragraph, so it is set larger than body copy
     and is the first thing read after the name. */
  /* ⭐ The prose column is a stack of panels now, so the gap between them is the
     column's own row-gap rather than a margin on each card. Same 1rem the facts
     card and the report panel use, so both columns rhyme. */
  /* ⭐⭐ ABOUT and PET POLICIES, 26 Aug. Two white cards from her client's comp.
     ⛔ The old divider rule is gone; the gap does that job now. */
  /* 🔴 THE HEADING COLOUR. She asked for "the light blue". ⛔ $ff-sky-soft
     (#b2dffa) is NOT usable as text — it lands around 1.4:1 on white, which is
     unreadable and fails AA badly. This is $primary (#395EA1), her brand blue at
     6.38:1, which is what the comp actually shows and is already the tier colour
     for Pet-Friendly. ⛔ Do not swap it for the pale one without a background
     change to carry it.
     ⚠️ $primary, ⛔ NOT $ff-sky-deep. They are the same colour, but ff-sky-deep
     is DEFINED in _furfinds-chrome.scss, which imports AFTER this file, so using
     it here fails the build with "Undefined variable". Same trap the tiers
     partial already documents. */
  /* THE FACTS PANEL. A card, so it reads as a distinct object rather than as a
     narrow second column of the same prose. */ }
  .business-detail__media {
    position: relative;
    inline-size: 100%;
    /* ⚠️ 16:9 here, not the card's 4:3, and ⛔ NO max-block-size. A height cap
       PLUS an aspect-ratio makes the BOX shrink to fit the cap, so the image
       stopped halfway across the page instead of filling the width. Constrain
       one dimension only. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    background: #dfe5f0;
    margin-block-end: 2rem; }
    .business-detail__media img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      display: block; }
  .business-detail__tier {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem; }
    .business-detail__tier .field__item {
      display: inline-block;
      padding: .3em .75em;
      border-radius: 999px;
      background: rgba(247, 252, 255, 0.94);
      box-shadow: 0 1px 2px rgba(8, 13, 23, 0.18);
      color: #2e4b81;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em; }
  .business-detail__body {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    /* ⚠️ Split, 26 Aug. This was a single `gap: 3rem`, which was invisible while
       the grid had only one row. The Report an issue panel added a second row,
       and 3rem of ROW gap left it floating a long way under the facts card.
       ⭐ Columns still want the wide 3rem; rows want a card-to-card gap. */
    column-gap: 3rem;
    row-gap: 1rem;
    align-items: start; }
    @media (max-width: 767.98px) {
      .business-detail__body {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 2rem; } }
  .business-detail__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0; }
  .business-detail__logo {
    margin-block-end: 1.25rem; }
    .business-detail__logo img {
      max-inline-size: 10rem;
      block-size: auto; }
  .business-detail__lead {
    font-size: 1.125rem;
    line-height: 1.55;
    color: #080D17;
    margin-block-end: 1.5rem; }
  .business-detail__main {
    display: flex;
    flex-direction: column;
    gap: 1rem; }
  .business-detail__panel {
    padding: 1.5rem;
    border-radius: var(--bs-border-radius, 0.5rem);
    background: #ffffff; }
    .business-detail__panel > *:last-child {
      margin-block-end: 0; }
  .business-detail__panel-title {
    font-size: 1.25rem;
    margin-block-end: .75rem;
    color: #395EA1; }
  .business-detail__facts {
    padding: 1.5rem;
    border: 1px solid #bbc8df;
    border-radius: 1rem;
    background: #ffffff;
    font-size: 0.875rem;
    /* The address arrives as a formatted block, so let it keep its own line
       breaks rather than forcing it into the flex row above. */ }
    .business-detail__facts > .field {
      margin-block-end: 1.125rem;
      padding-block-end: 1.125rem;
      border-block-end: 1px solid #bbc8df; }
      .business-detail__facts > .field:last-child {
        margin-block-end: 0;
        padding-block-end: 0;
        border-block-end: 0; }
    .business-detail__facts .field__label {
      display: block;
      margin-block-end: .25rem;
      color: #4D6EAA;
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: .06em;
      text-transform: uppercase; }
      .business-detail__facts .field__label::after {
        content: ""; }
    .business-detail__facts .field__items {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem .625rem; }
    .business-detail__facts a {
      color: #080D17;
      text-decoration: none; }
      .business-detail__facts a:hover, .business-detail__facts a:focus-visible {
        color: #2e4b81;
        text-decoration: underline;
        text-underline-offset: .15em; }
    .business-detail__facts .address {
      font-style: normal;
      line-height: 1.5; }

/* THE CONTACT CARD — rebuilt 26 Aug from her client's comp
--------------------------------------------------
   ⭐ Rows of icon + value, tight together. ⛔ NO dividers between them: her note
   was "We have divider lines, there's not supposed to be any. So everything's
   closer together." */
.business-detail__facts-title {
  /* ⭐ Caps in CSS, ⛔ not typed into the string, so assistive tech still reads
     "Contact" rather than spelling it out. */
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8125rem;
  font-weight: 600;
  color: #4D6EAA;
  margin-block-end: .75rem; }

.business-detail__contact {
  list-style: none;
  margin: 0;
  padding: 0; }

.business-detail__contact-row {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding-block: .375rem;
  /* ⛔ No border-block-end here. See the note at the top of this block. */ }

.business-detail__contact-icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
  margin-block-start: .15rem;
  color: #395EA1; }

.business-detail__contact-value {
  min-inline-size: 0;
  /* ⛔ Drupal's own field labels ("Phone", "City") are hidden here rather than
     in the view display, because the display is CONFIG and config no longer
     flows from local. See the memory rule on config flowing from UAT. */ }
  .business-detail__contact-value .field__label {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    inline-size: 1px;
    block-size: 1px; }
  .business-detail__contact-value .field,
  .business-detail__contact-value .field__item,
  .business-detail__contact-value p {
    margin: 0; }

/* ⭐⭐ THE ADDRESS ON ONE LINE, her ask, matching the comp's
   "212 Oak St, Austin, TX 78704".
   ⚠️ field_address is an address-module field. It renders address-line1,
   locality, administrative-area and postal-code separated by <br>, which is why
   it stacked. ➡️ Drop the breaks and put the comma back after the street line.
   ⛔ The country is hidden: every listing is US today and the comp does not show
   it. Revisit if FurFinds ever lists outside the States. */
.business-detail__contact-value .address br {
  display: none; }
.business-detail__contact-value .address .address-line1::after,
.business-detail__contact-value .address .address-line2::after {
  content: ", "; }
.business-detail__contact-value .address .locality::after {
  content: ", "; }
.business-detail__contact-value .address .country {
  display: none; }

/* City, category and amenities until they move up to the title area. Quiet, and
   separated from the contact rows by space rather than a rule. */
.business-detail__facts-extra {
  margin-block-start: 1rem;
  font-size: 0.875rem; }
  .business-detail__facts-extra .field {
    margin-block-end: .25rem; }
  .business-detail__facts-extra .field__label {
    font-weight: 600;
    color: #4D6EAA; }

/* ⭐⭐ THE SUBTITLE UNDER THE BUSINESS NAME, 26 Aug, from her client's comp:
   "Restaurants & Cafes · Austin, TX".
   ⚠️ It sits at the top of the ARTICLE, not inside the heading, because the h1
   is a separate page-title block above. The negative top margin pulls it up
   against the heading so the two read as one lockup. */
.business-detail__subtitle {
  margin-block: -.75rem 1.25rem;
  font-size: 0.875rem;
  color: #4D6EAA; }

/* 🔴 THE BUSINESS NAME IS BLUE, her ask. The h1 is NOT in the node template, it
   is the page title block, so this has to be scoped from the BODY class.
   ⭐ `node--type-business` is on the body, so only listing pages are affected
   and every other h1 on the site is left alone. */
body.node--type-business .block-page-title-block h1.title {
  color: #395EA1; }

/* ⭐⭐ THE ACTION ROW, 26 Aug, from her client's comp
--------------------------------------------------
   Three buttons between the image and the blue band. Her spec, in order:
   Visit Website is SOLID dark blue with white text, Get Directions is WHITE
   with a dark blue border, Call Now is a SOFT blue fill.
   ⚠️ Pill shaped to match the tier chips and the search button, not Bootstrap's
   default radius. */
.business-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-end: 2rem; }

.business-detail__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.4rem;
  border-radius: 62.4375rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out; }
  .business-detail__action:hover, .business-detail__action:focus-visible {
    text-decoration: none; }

/* Solid. The one action most visitors want. */
.business-detail__action--primary {
  background: #395EA1;
  border-color: #395EA1;
  color: #fff; }
  .business-detail__action--primary:hover, .business-detail__action--primary:focus-visible {
    background: #2e4b81;
    border-color: #2e4b81;
    color: #fff; }

/* White with a dark blue edge. */
.business-detail__action--outline {
  background: #fff;
  border-color: #395EA1;
  color: #395EA1; }
  .business-detail__action--outline:hover, .business-detail__action--outline:focus-visible {
    background: #eff2f7;
    color: #395EA1; }

/* Soft fill with a MATCHING light border, her spec 26 Aug: "call now is light
   blue with the light blue border". ⛔ Not a transparent border — all three
   buttons carry a visible edge, so they sit on the same optical baseline and
   none of them looks smaller than the others.
   🔴 The LABEL is $primary, not white. A pale fill with white text fails
   contrast badly, and this palette has already been through that once with the
   tier chips. */
.business-detail__action--soft {
  background: #dfe5f0;
  border-color: #dfe5f0;
  color: #395EA1; }
  .business-detail__action--soft:hover, .business-detail__action--soft:focus-visible {
    background: #ccd5e7;
    border-color: #ccd5e7;
    color: #395EA1; }

/* ⭐ THE COMING SOON PANEL, 26 Aug. Same card as About and Pet policy so it sits
   in the stack as a peer, but quieter and shorter: no heading, muted text,
   centred. It is a placeholder, ⛔ not content competing for attention. */
.business-detail__panel--muted {
  padding-block: 1rem;
  text-align: center; }

.business-detail__coming-soon {
  margin: 0;
  font-size: 0.875rem;
  color: #4D6EAA; }

/* ⭐ THE TIER CHIP ABOVE THE BUSINESS NAME, 26 Aug. Rendered by
   page-title.html.twig, because the h1 is a block outside the node template.

   🔴 IT MUST BE FORCED BACK TO STATIC. The chip reuses `.business-teaser__tier`
   so it inherits the paw and the per-tier colours, but that class is
   `position: absolute` — it is designed to sit ON a card image. Reused here it
   lifted out of the flow and printed straight over the business name. Her words,
   26 Aug: "the unclaimed is over top of it right now."
   ⛔ Do not solve this by giving the chip a new class. The paw comes from
   `.business-teaser__tier .field__item::before` in _furfinds-paw.scss and the
   colours from the map in _furfinds-tiers.scss, both keyed to that class name.
   ➡️ Keep the class, neutralise the positioning. */
.page-title__tier {
  margin-block: .25rem .5rem; }
  .page-title__tier .business-teaser__tier {
    position: static;
    inset: auto;
    max-inline-size: none;
    display: inline-block; }

/* ⭐⭐ AMENITIES IN TWO COLUMNS, 26 Aug. Her ask: "There should be two columns,
   so if there's only two items, they should be across from each other."

   ⭐ GRID, ⛔ NOT CSS `columns`. Multi-column fills the FIRST column top to
   bottom before starting the second, so two items would stack rather than sit
   across from each other. Grid fills left to right, which is what she described.

   ⛔ Also hides Drupal's own "Amenities" label. The field renders
   `field--label-above`, so without this the word appears twice, once as the
   panel heading and again underneath it. Hidden in CSS rather than in the view
   display, because the display is config and config flows from UAT. */
.business-detail__amenities {
  /* A single amenity has nothing to sit beside, so it spans rather than
     leaving a conspicuous empty half. */ }
  .business-detail__amenities .field__label {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    inline-size: 1px;
    block-size: 1px; }
  .business-detail__amenities .field__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: .35rem; }
  .business-detail__amenities .field__items:has(.field__item:only-child) {
    grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 575.98px) {
    .business-detail__amenities .field__items {
      grid-template-columns: minmax(0, 1fr); } }

/* FOOTER
--------------------------------------------------

   ⭐⭐ WHAT WAS WRONG, 19 Aug: Barrio renders footer_first, footer_second and
   footer_third each as its own `.row`. Three rows stack, so the footer came
   out as a tall dark column with big empty bands and items stranded at odd
   heights. ⛔ It was the main reason the site read as unfinished.

   ➡️ THE FIX IS LAYOUT, NOT MARKUP. The regions keep their `.row` class (that
   is Barrio's, and overriding the template would mean carrying a page
   template forever). We simply lay the three of them out side by side and let
   them wrap on small screens.

   ⚠️ Headings in here were $ink on $ink, so "Legal" and "Explore" were
   invisible. That is why the links looked like they were floating.
*/
.site-footer {
  padding-block: 3rem 2rem;
  /* Section labels. They were the same colour as the background. */
  /* Footer menus stack. They are lists of links, not a navbar. */
  /* ⚠️ THE CHROME SECTION IN style.scss PAINTS `.menu--main li a` $ink so the
     HEADER nav stays quiet. That selector is more specific than
     `.site-footer a`, so the same links went dark-on-dark down here and the
     Explore column looked empty when it was not. ➡️ Win it back explicitly. */
  /* THE ACCOUNT LINKS, moved here 2026-08-19.
     They used to sit in a thin bar ABOVE the header. ⭐ Her call to remove it:
     "My account / Log out" is chrome for the one or two people who ever log
     in, and it was taking the most prominent strip on the page.
     ⚠️ They render as a horizontal `.nav`, so the column rule above has to be
     undone for this one menu. */
  /* The branding lockup: mark and site name on one line, not wrapped. */
  /* A quiet rule, then whatever sits below it. */ }
  .site-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 3rem;
    align-items: flex-start;
    /* Neutralise Barrio's per-region `.row` so each region behaves as a
       column of this flex container instead of a full-width band. */ }
    .site-footer__top > .region {
      display: block;
      flex: 1 1 14rem;
      margin: 0;
      width: auto; }
  .site-footer h2 {
    color: #F7FCFF;
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .7;
    margin-block-end: .75rem; }
  .site-footer .nav {
    flex-direction: column;
    gap: .35rem; }
  .site-footer .nav-link {
    padding: 0; }
  .site-footer .menu--main li a,
  .site-footer .menu--account li a {
    color: #F7FCFF; }
    .site-footer .menu--main li a:hover, .site-footer .menu--main li a:focus-visible,
    .site-footer .menu--account li a:hover,
    .site-footer .menu--account li a:focus-visible {
      color: #fff; }
  .site-footer .menu--account {
    margin-block-start: .75rem;
    font-size: .9rem;
    opacity: .8; }
    .site-footer .menu--account .nav {
      flex-direction: row;
      gap: 1rem; }
  .site-footer .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: #F7FCFF;
    font-size: 1.15rem; }
    .site-footer .navbar-brand img {
      width: 2.25rem;
      height: auto; }
  .site-footer__bottom {
    margin-block-start: 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgba(255, 255, 255, 0.15);
    font-size: .9rem;
    opacity: .75; }
    .site-footer__bottom .region {
      margin: 0; }

/* THE TAGLINE — the site slogan, shown in the FOOTER branding only.
   ⛔ Deliberately not in the header: the header already carries the site name,
   and a slogan up there competes with the navigation. */
.site-footer .site-slogan {
  margin-block-start: .5rem;
  font-size: .95rem;
  opacity: .75; }

/* SOCIAL LINKS.
   ⭐ A MENU, not theme markup, so a client adds or removes a network without a
   developer.

   🔴🔴 FIXED 20 Aug, AND THE BUG IS WORTH KEEPING. This block used to set
   `font-size: .9rem` on .nav-link. That selector is
   `.site-footer .menu--social .nav-link`, three classes, specificity 0-3-0. The
   icon system in _social-icons.scss hides the label with `font-size: 0` on
   `.menu--social a[href*="instagram"]`, which is one class plus an attribute
   plus an element, 0-2-1. So the FOOTER WON and every social link rendered as
   raw text with a zero-width icon beside it: "InstagramFacebookLinkedIn".

   ⭐ Nothing was wrong with the icon system. A more specific rule three files
   away quietly beat it. ⛔ Do not set font-size on social links here. The icon
   system owns it, and it deliberately leaves any UNMATCHED network as text so a
   network nobody has an icon for still shows something.

   ⚠️ The old comment here claimed these are "text links, not brand glyphs".
   That has been untrue since the icon system landed. */
.site-footer .menu--social {
  margin-block-start: 1.25rem; }
  .site-footer .menu--social .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem; }
  .site-footer .menu--social .nav-link {
    padding: 0;
    opacity: .85; }

/* THE COPYRIGHT LINE, in footer_fifth under the rule. */
.site-footer__bottom p {
  margin: 0; }

/* DRUPAL CANVAS COMPONENTS
--------------------------------------------------

   🔴🔴 THE FINDING, 19 Aug: DRUPAL CANVAS SHIPS ITS COMPONENT MARKUP WITH
   TAILWIND UTILITY CLASSES, AND THIS THEME IS BOOTSTRAP 5.

   The hero's call-to-action button carries `flex items-center gap-3 px-6 py-3
   rounded-lg flex-row-reverse` and none of it resolves, because no Tailwind is
   served. ⭐ The only class that DID land was `bg-primary`, and only because
   Bootstrap happens to define that name too. That coincidence is why the
   button was green but square, with the arrow stacked above the label.

   ⚠️ SO THIS IS NOT A ONE-BUTTON PROBLEM. Every Canvas component built on
   Tailwind utilities will render unstyled here. ➡️ This file is where those
   get picked up, one at a time, as they are actually used.

   ⛔ DO NOT "fix" it by adding Tailwind. Two utility frameworks on one page is
   a much bigger cost than a handful of rules, and [[user_css_framework]] is
   Bootstrap 5 by her own choice.
*/
/* THE CTA BUTTONS.

   ⚠️ UPDATED 19 Aug: the component renders a <button> with no link and an <a>
   once `href` is set, and the SECONDARY variant uses `bg-accent` rather than
   `bg-primary`. ⛔ The original selector caught only the primary <button>, so
   adding a linked second button broke the row.
   ➡️ Match on `rounded-lg` plus EITHER background, on either element.

   ⭐ The wrapper is `.flex.flex-col.sm:flex-row` — all Tailwind, none of which
   resolves here, which is why the two buttons stacked on top of each other. */
/* The actions row itself. */
.flex.w-full.flex-col.gap-6 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  inline-size: 100%; }

button[class*="rounded-lg"][class*="bg-primary"],
a[class*="rounded-lg"][class*="bg-primary"],
button[class*="rounded-lg"][class*="bg-accent"],
a[class*="rounded-lg"][class*="bg-accent"] {
  display: inline-flex;
  flex-direction: row-reverse;
  /* icon sits AFTER the label */
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.6rem;
  /* ⭐⭐ A 1px BORDER IN ITS OWN BACKGROUND COLOUR, ⛔ never `border: 0`.
     ⚠️ This rule used to be borderless while the accent variant below carried
     `1px solid`, which made the two buttons differ by 2px in both dimensions
     and stopped them lining up. ➡️ Every button keeps a border; when it should
     not be seen it simply matches the fill. ⛔ Do not set border to 0 here. */
  border: 1px solid #395EA1;
  border-radius: .5rem;
  background: #395EA1;
  color: #fff;
  /* ⭐ .875rem = 14px, matching the `.btn` default set further down. This rule
     used to sit at 1.0625rem, so a Lovable-classed button and a Bootstrap
     `.btn` were different sizes on the same row. ⛔ Do not raise it again. */
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
  /* The arrow leans forward on hover. The wrapper span already carries
     Canvas's translate class, which does nothing here, so do it properly. */ }
  button[class*="rounded-lg"][class*="bg-primary"] svg,
  a[class*="rounded-lg"][class*="bg-primary"] svg,
  button[class*="rounded-lg"][class*="bg-accent"] svg,
  a[class*="rounded-lg"][class*="bg-accent"] svg {
    display: block;
    width: 1.15em;
    height: 1.15em; }
  button[class*="rounded-lg"][class*="bg-primary"] > span,
  a[class*="rounded-lg"][class*="bg-primary"] > span,
  button[class*="rounded-lg"][class*="bg-accent"] > span,
  a[class*="rounded-lg"][class*="bg-accent"] > span {
    display: inline-flex;
    transition: transform .2s ease; }
  button[class*="rounded-lg"][class*="bg-primary"]:hover, button[class*="rounded-lg"][class*="bg-primary"]:focus-visible,
  a[class*="rounded-lg"][class*="bg-primary"]:hover,
  a[class*="rounded-lg"][class*="bg-primary"]:focus-visible,
  button[class*="rounded-lg"][class*="bg-accent"]:hover,
  button[class*="rounded-lg"][class*="bg-accent"]:focus-visible,
  a[class*="rounded-lg"][class*="bg-accent"]:hover,
  a[class*="rounded-lg"][class*="bg-accent"]:focus-visible {
    background: #32538e;
    color: #fff; }
    button[class*="rounded-lg"][class*="bg-primary"]:hover > span, button[class*="rounded-lg"][class*="bg-primary"]:focus-visible > span,
    a[class*="rounded-lg"][class*="bg-primary"]:hover > span,
    a[class*="rounded-lg"][class*="bg-primary"]:focus-visible > span,
    button[class*="rounded-lg"][class*="bg-accent"]:hover > span,
    button[class*="rounded-lg"][class*="bg-accent"]:focus-visible > span,
    a[class*="rounded-lg"][class*="bg-accent"]:hover > span,
    a[class*="rounded-lg"][class*="bg-accent"]:focus-visible > span {
      transform: translateX(0.2rem); }
  button[class*="rounded-lg"][class*="bg-primary"]:focus-visible,
  a[class*="rounded-lg"][class*="bg-primary"]:focus-visible,
  button[class*="rounded-lg"][class*="bg-accent"]:focus-visible,
  a[class*="rounded-lg"][class*="bg-accent"]:focus-visible {
    outline: 2px solid #88C7E8;
    outline-offset: 3px; }

/* THE SECONDARY VARIANT. `bg-accent` is her Light Blue, which ⛔ cannot carry
   WHITE text (2.44:1). ⭐ Revised 22 Aug: keep her fill and darken the TYPE
   instead. Ink on Light Blue measures 10.54:1, so the button now looks like the
   one in her comp rather than being downgraded to an outline.
   📄 furfinds-design-decisions.md */
button[class*="bg-accent"][class*="rounded-lg"],
a[class*="bg-accent"][class*="rounded-lg"] {
  background: #88C7E8;
  border: 1px solid rgba(57, 94, 161, 0.25);
  color: #080D17; }
  button[class*="bg-accent"][class*="rounded-lg"]:hover, button[class*="bg-accent"][class*="rounded-lg"]:focus-visible,
  a[class*="bg-accent"][class*="rounded-lg"]:hover,
  a[class*="bg-accent"][class*="rounded-lg"]:focus-visible {
    background: #6695ae;
    border-color: #6695ae;
    color: #080D17; }

/* THE DUPLICATE PAGE TITLE ON CANVAS PAGES.
--------------------------------------------------

   ⚠️ Home, About Us and Contact Us are `canvas_page` entities, and each one
   rendered TWO `<h1>`s: the page-title block ("About Us") and the hero's own
   heading. ✅ Verified 8/19 — `curl / | grep -c "<h1"` returned 2.

   ⛔ `page_title_visibility` CANNOT fix this. Read its code, not its README:
   `hook_entity_base_field_info()` adds the field only when
   `$entity_type->id() === 'node'`, and its preprocess bails unless the route
   parameter is a NodeInterface. Its own comment says so outright:
   "This will not affect non node routes."

   ➡️ HER CALL, 8/19: do it in SCSS rather than with block visibility
   conditions. ⭐ And it is the better choice FOR A TEMPLATE — block visibility
   is per-site config keyed to paths, so it silently stops working the moment a
   client changes a path. This travels with the theme and cannot drift.

   ⭐ `display: none`, not `.visually-hidden`, ON PURPOSE: the hero's heading IS
   the page's real h1. Visually-hiding would leave a screen reader announcing
   "About Us" and then the hero heading straight after.
*/
.canvas-page .block-page-title-block {
  display: none; }

/* HER LOVABLE UTILITY CLASSES THAT BOOTSTRAP DOES NOT SHIP.
   ⭐ Her design uses Tailwind-style names. Bootstrap 5 stops at `rounded-3`,
   so `rounded-xl` arrives as a class with nothing behind it and the corner
   renders square. ⛔ Do not delete: her components carry this class. */
.rounded-xl {
  border-radius: .75rem !important; }

.rounded-custom {
  border-radius: 2.5rem !important; }

/* AN ACCENT COLOUR FOR HEADLINE WORDS.

   ⭐⭐ CHANGED 2026-08-23 TO HER ACTUAL BRAND BLUE, `$primary` #395EA1.

   ⚠️ HISTORY, because the class NAME now lies slightly and that is worth
   knowing: it used to be **#075ABE**, added 22 Aug on her explicit instruction
   with the provenance raised at the time — it is in the family of Lovable's
   `sky-deep` #075a8e and was NOT one of her four brand colours (#395EA1,
   #88C7E8, #D3EEFF, white). She spotted it again on 23 Aug — "the word trust in
   there isn't her blue" — and chose her real blue instead.
   ⭐ So the highlighted word now matches the primary buttons exactly.
   ✅ #395EA1 is 6.38:1 on white, up from 6.32:1. Still AA, slightly better.
   ⛔ Do not "restore" #075ABE. It was a Lovable leftover and she has now ruled
   against it twice over. */
.text-sky-deep {
  color: #395EA1; }

/* HER SHADOW, ON BOOTSTRAP'S CLASS NAME.
   ⚠️ Bootstrap already ships `.shadow`, so it was never missing — it is just
   much heavier than hers (0 .5rem 1rem rgba(0,0,0,.15)). Her Lovable value is
   the subtle two-layer pair below. ⭐ Redefining the existing class rather than
   adding a second system means anything she types `shadow` on in Canvas looks
   the way her design does. ⛔ Do not also paste Tailwind's `--tw-shadow`
   variables in; they would be a parallel system with no owner. */
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important; }

/* THREE BUTTON SHADOWS, one per button weight.
--------------------------------------------------

   ⭐ Same two-layer GEOMETRY as `.shadow` above, which is her Lovable value.
   ⭐⭐ The COLOUR is her Dark Blue, ⛔ never black — that follows the existing
   `$shadow-soft` / `$shadow-card` / `$shadow-glow` tokens in _furfinds-chrome,
   and it is why the shadows read as part of the palette rather than as grey
   smudge under the button.

   ⚠️ The light blue button does NOT cast a light blue shadow. Her Light Blue is
   too pale to register against the page, so it takes the same Dark Blue at a
   lower opacity. ⛔ Do not "fix" this by tinting it with $accent.

   .shadow-primary  → the Dark Blue button
   .shadow-accent   → the Light Blue button
   .shadow-ghost    → transparent and outline buttons
*/
.shadow-primary {
  box-shadow: 0 6px 16px -4px rgba(57, 94, 161, 0.45), 0 2px 6px -2px rgba(57, 94, 161, 0.35) !important; }

.shadow-accent {
  box-shadow: 0 6px 16px -4px rgba(57, 94, 161, 0.32), 0 2px 6px -2px rgba(57, 94, 161, 0.24) !important; }

/* HER VERY LIGHT BLUE AS A BUTTON VARIANT.
   🔴🔴 WHY THERE IS NO `accent` VARIANT: the theme sets `$secondary: $accent`,
   so Bootstrap's `secondary` ALREADY resolves to her Light Blue #88C7E8. An
   `accent` option was added on 22 Aug and removed the same day because it was
   an exact duplicate — picking it changed nothing on screen and looked broken.
   ⛔ Do not add it back. ➡️ For her Light Blue, choose "Secondary".

   ⭐ `pale` is the colour that genuinely had no name: her Very Light Blue
   #D3EEFF, the almost-white one. ⛔ NOT `surface` #F7FCFF, which is the page
   background and would make the button disappear.
   🔴 INK type, never white. */
.btn-pale {
  --bs-btn-color: #080D17;
  --bs-btn-bg: #D3EEFF;
  --bs-btn-border-color: rgba(57, 94, 161, 0.25);
  --bs-btn-hover-color: #080D17;
  --bs-btn-hover-bg: #88C7E8;
  --bs-btn-hover-border-color: rgba(57, 94, 161, 0.35);
  --bs-btn-active-color: #080D17;
  --bs-btn-active-bg: #88C7E8;
  --bs-btn-active-border-color: rgba(57, 94, 161, 0.35);
  --bs-btn-disabled-color: #080D17;
  --bs-btn-disabled-bg: #D3EEFF;
  --bs-btn-disabled-border-color: rgba(57, 94, 161, 0.25); }

.btn-outline-pale {
  --bs-btn-color: #080D17;
  --bs-btn-border-color: rgba(57, 94, 161, 0.25);
  --bs-btn-hover-color: #080D17;
  --bs-btn-hover-bg: #D3EEFF;
  --bs-btn-hover-border-color: rgba(57, 94, 161, 0.35);
  --bs-btn-active-color: #080D17;
  --bs-btn-active-bg: #D3EEFF;
  --bs-btn-active-border-color: rgba(57, 94, 161, 0.35); }

/* 14px, which Bootstrap has no class for — it stops at `.fs-6` = 1rem = 16px.
   ⭐ rem, not px, so it still scales with the user's browser text size. */
.fs-7 {
  font-size: .875rem !important; }

/* EVERY BUTTON IS 14px BY DEFAULT.
   ⭐ Her instruction, 22 Aug. Bootstrap ships buttons at 1rem, so `.fs-7` had to
   be typed onto each one to get there. ➡️ Setting the Bootstrap variable makes
   14px the starting point and `.fs-7` unnecessary on buttons.
   ⛔ Do not raise this back to 1rem to "match Bootstrap defaults". */
.btn {
  --bs-btn-font-size: .875rem; }

.shadow-ghost {
  box-shadow: 0 4px 12px -3px rgba(8, 13, 23, 0.18), 0 1px 4px -1px rgba(8, 13, 23, 0.12) !important; }

/* CANVAS TWO-COLUMN ROWS MUST STACK — her report, 2026-08-24
--------------------------------------------------

   "the image gets really small in the hero on the homepage instead of dropping
   below the hero."

   🔴 THE CAUSE: Canvas emits the hero as `.row > .col + .col`. A bare
   Bootstrap `.col` means "equal width at EVERY breakpoint" — it has no
   stacking behaviour at all, so the two halves just shrink together and the
   photo becomes a sliver. ⛔ It only ever wraps when the text physically
   cannot fit, which is far too late.

   ⭐ THE FIX IS THE CLASS THAT SHOULD HAVE BEEN THERE: `col-12 col-lg-6`. We
   cannot add it, because the markup comes from the Canvas component, so this
   reproduces it in CSS.

   ⚠️ SCOPED TO `#block-flight-content` on purpose. `.canvas-page .row` alone
   would also catch Barrio's own `.row-offcanvas` page wrapper, which holds
   `main.col` and must not be touched.

   ⭐ This fixes EVERY two-column Canvas row, ⛔ not just the hero — they all
   share the bug. */
@media (max-width: 991.98px) {
  .canvas-page #block-flight-content .row > .col {
    flex: 0 0 100%;
    max-inline-size: 100%; } }
/* BREATHING ROOM UNDER THE HERO BUTTON PAIR — her ask, 2026-08-24
--------------------------------------------------

   "put a little bit of margin on the bottom of both of those buttons on the
   hero please maybe 15px"

   ⭐ The pair sits in `div.w-100.d-flex.flex-row.gap-3` and both buttons had
   `margin-bottom: 0`. ✅ Checked: exactly ONE such container exists inside
   `#block-flight-content`, so the selector cannot stray.

   ⭐ The margin goes on the BUTTONS, ⛔ not the wrapper. Same result in one
   row, but it also spaces them from each other if they ever wrap to two lines.

   ⚠️ .9375rem IS 15px at the 16px root. Written in rem to match the rest of
   this theme.

   ⭐ AND THE PAIR NOW WRAPS, her go-ahead 2026-08-24. The wrapper is
   `flex-row` with Bootstrap's default `flex-wrap: nowrap`, so on a narrow
   screen the two buttons SQUEEZED instead of stacking — the same shape of bug
   as the hero columns.

   ⚠️⚠️ `flex-wrap: wrap` ALONE DOES NOT FIX IT. The button text would still
   wrap INSIDE each button, so the pair keeps "fitting" and never triggers a
   line break — that is exactly what the squeezing was. ➡️ `white-space: nowrap`
   on the buttons is the other half: the text refuses to wrap, so the FLEX LINE
   has to break instead. ⛔ Do not remove one without the other.

   ⭐ Wrap rather than a breakpoint, so it self-corrects at any width and there
   is no magic number to maintain. */
.canvas-page #block-flight-content .d-flex.gap-3 {
  flex-wrap: wrap; }

.canvas-page #block-flight-content .d-flex.gap-3 > .btn {
  margin-block-end: .9375rem;
  white-space: nowrap; }

/* STATS BANNER
--------------------------------------------------

   A row of four headline numbers with a label under each. Ships as a
   `block_content` type so ⭐ THE CLIENT EDITS THE NUMBERS IN THE UI — this is
   not theme markup.

   ⚠️ THE MARKUP IS EIGHT FLAT DIVS, not four pairs. Drupal renders each field
   as its own `.field__item`, in order: value 1, label 1, value 2, label 2…
   ➡️ So the pairing is done with `grid-auto-flow: column` over TWO rows, which
   fills each column top-to-bottom and lands each label under its own number.
   ⛔ A plain 4-column grid would put two numbers and two labels on row one.

   ⭐ Fonts come from $font-family-display / $font-family-base, so this follows
   whatever pairing the template is set to. ⛔ Do not hardcode a family here.
*/
#block-flight-stats-banner,
.block-content-stats_banner {
  background: #eaf5fb;
  border-radius: .75rem;
  padding: 2.5rem 1.5rem;
  margin-block: 1rem;
  /* ⭐ 1rem on her instruction, 22 Aug. Was 2rem. */
  /* The numbers. */
  /* The labels. */
  /* Two up on tablet, stacked on phones. ⚠️ `grid-auto-flow: column` has to
     be re-declared with the new row count or the pairing breaks. */ }
  #block-flight-stats-banner > .content,
  .block-content-stats_banner > .content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: .35rem 1.5rem;
    text-align: center;
    align-items: baseline; }
  #block-flight-stats-banner .field--name-field-stat-1-value,
  #block-flight-stats-banner .field--name-field-stat-2-value,
  #block-flight-stats-banner .field--name-field-stat-3-value,
  #block-flight-stats-banner .field--name-field-stat-4-value,
  .block-content-stats_banner .field--name-field-stat-1-value,
  .block-content-stats_banner .field--name-field-stat-2-value,
  .block-content-stats_banner .field--name-field-stat-3-value,
  .block-content-stats_banner .field--name-field-stat-4-value {
    font-family: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
    /* ⭐ MEASURED AGAINST HER COMP, 20 Aug: the number is 30px at weight
       400, not 48px at 600. The theme was rendering it half again as big
       and much heavier, which is what made the band feel shouty and made
       the ink read as flat black rather than as type.
       ⛔ Do not put the clamp back. A stats number that scales with the
       viewport fights the label under it, which does not. */
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.05;
    color: #080D17; }
  #block-flight-stats-banner .field--name-field-stat-1-label,
  #block-flight-stats-banner .field--name-field-stat-2-label,
  #block-flight-stats-banner .field--name-field-stat-3-label,
  #block-flight-stats-banner .field--name-field-stat-4-label,
  .block-content-stats_banner .field--name-field-stat-1-label,
  .block-content-stats_banner .field--name-field-stat-2-label,
  .block-content-stats_banner .field--name-field-stat-3-label,
  .block-content-stats_banner .field--name-field-stat-4-label {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 12px and 0.6px tracking, both measured off the comp. */
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #4D6EAA; }
  @media (max-width: 991.98px) {
    #block-flight-stats-banner > .content,
    .block-content-stats_banner > .content {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto auto auto auto;
      gap: .35rem 1rem; } }
  @media (max-width: 575.98px) {
    #block-flight-stats-banner > .content,
    .block-content-stats_banner > .content {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(8, auto); }
    #block-flight-stats-banner .field__item + .field__item,
    .block-content-stats_banner .field__item + .field__item {
      margin-block-start: 0; } }

/* HOME-PAGE SECTIONS
--------------------------------------------------

   The blocks placed in the featured_bottom regions — stats, recently added,
   browse by category, browse by city — plus the section-heading pattern they
   share.

   ⭐ THE PATTERN, taken from the client design comp: a small letterspaced
   EYEBROW over a large heading. It is most of what makes a page read as
   designed rather than assembled, and it costs almost nothing.

   ⚠️ HOW THE EYEBROW IS DONE, AND ITS ONE LIMITATION: Drupal renders a block
   title as a plain <h2> with no room for a second line, and adding one would
   mean overriding block.html.twig and carrying that template forever. So the
   eyebrow is a `::before` keyed to the shipped block IDs below.
   ➡️ A NEW SECTION NEEDS ONE LINE ADDING HERE. ⛔ That is deliberate: four
   lines of CSS beats a template override in a template that has to be
   maintained by whoever inherits it.
*/
.featured-bottom {
  padding-block: 1rem; }
  .featured-bottom > .container > .region {
    margin-block-end: 3.5rem; }
    .featured-bottom > .container > .region:last-child {
      margin-block-end: 0; }

/* THE SECTION HEADING. */
.region-featured-bottom-first > .block > h2,
.region-featured-bottom-first > .block > .block-title,
.region-featured-bottom-second > .block > h2,
.region-featured-bottom-second > .block > .block-title,
.region-featured-bottom-third > .block > h2,
.region-featured-bottom-third > .block > .block-title {
  position: relative;
  margin-block-end: 1.5rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15; }
  .region-featured-bottom-first > .block > h2::before,
  .region-featured-bottom-first > .block > .block-title::before,
  .region-featured-bottom-second > .block > h2::before,
  .region-featured-bottom-second > .block > .block-title::before,
  .region-featured-bottom-third > .block > h2::before,
  .region-featured-bottom-third > .block > .block-title::before {
    display: block;
    margin-block-end: .5rem;
    color: #88C7E8;
    font-family: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase; }

/* ➡️ ONE LINE PER SECTION. Add to this list when a section is added. */
#block-flight-recent-listings > h2::before {
  content: "Featured"; }

#block-flight-tiles-categories > h2::before {
  content: "Browse"; }

#block-flight-tiles-cities > h2::before {
  content: "Browse"; }

/* THE "VIEW ALL" LINK.

   Views prints its more-link as a bare anchor under the results. On a section
   that is a row of cards, a bare link reads as an orphan. ⭐ Pulled up beside
   the heading on wide screens, where the comp puts it. */
.view-business-listings .more-link {
  margin-block-start: 1.25rem;
  text-align: start; }
  .view-business-listings .more-link a {
    display: inline-block;
    padding: .5rem 1.25rem;
    border: 1px solid #bbc8df;
    border-radius: 999px;
    color: #080D17;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out; }
    .view-business-listings .more-link a:hover, .view-business-listings .more-link a:focus-visible {
      background: #dfe5f0;
      border-color: #4D6EAA;
      color: #2e4b81; }

/* TERM TILES.

   ⭐ ONE component, two displays — `term_tiles` block_categories and
   block_cities. ⛔ Do not fork it per vocabulary; add a display.

   The view outputs an unstyled list of term links, so everything that makes it
   a tile grid is here. */
.view-term-tiles .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .75rem; }
.view-term-tiles .views-row {
  margin: 0; }
.view-term-tiles .term-tiles__label,
.view-term-tiles .views-field-name {
  display: block; }
.view-term-tiles a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.125rem;
  border: 1px solid #bbc8df;
  border-radius: 1rem;
  background: #ffffff;
  color: #080D17;
  text-decoration: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  /* A quiet marker rather than an icon set. ⛔ Deliberately not a real
     icon: the template cannot know what a client's categories ARE, and a
     wrong icon is worse than none. */ }
  .view-term-tiles a::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: #deeff9; }
  .view-term-tiles a:hover, .view-term-tiles a:focus-visible {
    border-color: #88C7E8;
    box-shadow: 0 1px 3px rgba(8, 13, 23, 0.08);
    color: #2e4b81; }

/* THE EXPOSED SEARCH.

   ⭐⭐ IT IS AN EXPOSED FILTER ON THE VIEW, SURFACED AS ITS OWN BLOCK
   (`exposed_block: TRUE` on page_1). Her idea, and it is the right shape:
   REMOVING THE BLOCK REMOVES THE SEARCH without touching the view, so if the
   client's scope says no search, it is a one-click change and nothing breaks.

   ⚠️ Views renders the exposed form as a bare form with a stacked label,
   description and button. Everything that makes it a search bar is here. */
.views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-block-end: 1.5rem; }
  .views-exposed-form .form-item {
    flex: 1 1 18rem;
    margin: 0; }
  .views-exposed-form label {
    display: block;
    margin-block-end: .35rem;
    font-size: 0.875rem;
    color: #364d77; }
  .views-exposed-form .description {
    display: none;
    /* the placeholder already says it */ }
  .views-exposed-form input[type="text"] {
    inline-size: 100%;
    padding: .625rem .875rem;
    border: 1px solid #bbc8df;
    border-radius: 999px;
    background: #ffffff; }
    .views-exposed-form input[type="text"]:focus {
      border-color: #88C7E8;
      outline: 2px solid #cfe9f6;
      outline-offset: 1px; }
  .views-exposed-form .form-actions {
    display: flex;
    gap: .5rem;
    margin: 0; }
  .views-exposed-form input[type="submit"],
  .views-exposed-form .button {
    padding: .625rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #395EA1;
    color: #fff;
    font-size: 0.875rem; }
    .views-exposed-form input[type="submit"]:hover, .views-exposed-form input[type="submit"]:focus-visible,
    .views-exposed-form .button:hover,
    .views-exposed-form .button:focus-visible {
      background: #32538e; }
    .views-exposed-form input[type="submit"][data-drupal-selector$="reset"], .views-exposed-form input[type="submit"].js-form-submit + .views-exposed-form input[type="submit"],
    .views-exposed-form .button[data-drupal-selector$="reset"],
    .views-exposed-form .button.js-form-submit + .views-exposed-form input[type="submit"], .views-exposed-form input[type="submit"].js-form-submit +
    .views-exposed-form .button,
    .views-exposed-form .button.js-form-submit +
    .views-exposed-form .button {
      background: transparent;
      border-color: #bbc8df;
      color: #080D17; }
      .views-exposed-form input[type="submit"][data-drupal-selector$="reset"]:hover, .views-exposed-form input[type="submit"].js-form-submit + .views-exposed-form input[type="submit"]:hover,
      .views-exposed-form .button[data-drupal-selector$="reset"]:hover,
      .views-exposed-form .button.js-form-submit + .views-exposed-form input[type="submit"]:hover, .views-exposed-form input[type="submit"].js-form-submit +
      .views-exposed-form .button:hover,
      .views-exposed-form .button.js-form-submit +
      .views-exposed-form .button:hover {
        background: #dfe5f0; }

/* THE HEADER CALL TO ACTION.

   ⭐ A directory needs a "list your business" action above the fold. Shipped as
   a BASIC BLOCK rather than theme markup so the client can change the words and
   the destination without a developer. */
.header-cta__link,
.region-header-form a {
  display: inline-block;
  padding: .5rem 1.25rem;
  border-radius: 999px;
  background: #395EA1;
  color: #fff;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color .15s ease-in-out; }
  .header-cta__link:hover, .header-cta__link:focus-visible,
  .region-header-form a:hover,
  .region-header-form a:focus-visible {
    background: #32538e;
    color: #fff;
    text-decoration: none; }

.region-header-form p {
  margin: 0; }

/* THE TIER COMPARISON TABLE.

   ⚠️ Like the stats banner, the markup is a FLAT LIST of field divs — three
   tier names, then six rows of (label, t1, t2, t3). ➡️ So the grid is laid out
   by COLUMN COUNT, not by any structure in the markup.

   Row 1 is the header: an empty cell plus the three tier names. Then each
   content row is label + three cells. ⛔ If a row's fields are left empty the
   cells still occupy the grid, which is correct — an empty comparison cell is
   meaningful. */
.block-content-tier_comparison {
  /* The four header cells. */
  /* ⚠️ Tier 1 is the FIRST field in the markup, but the header row needs an
     empty cell before it. Push it into column 2 and the row lines up. */ }
  .block-content-tier_comparison > .content {
    display: grid;
    grid-template-columns: minmax(9rem, 2fr) repeat(3, 1fr);
    border: 1px solid #bbc8df;
    border-radius: 1rem;
    overflow: hidden;
    font-size: 0.875rem; }
  .block-content-tier_comparison .field {
    padding: .875rem 1rem;
    border-block-start: 1px solid #bbc8df; }
  .block-content-tier_comparison .field--name-field-tier-1-name,
  .block-content-tier_comparison .field--name-field-tier-2-name,
  .block-content-tier_comparison .field--name-field-tier-3-name {
    border-block-start: 0;
    background: #eef7fc;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center; }
  .block-content-tier_comparison .field--name-field-tier-1-name {
    grid-column: 2; }
  .block-content-tier_comparison [class*="--name-field-row-"][class*="-t1"],
  .block-content-tier_comparison [class*="--name-field-row-"][class*="-t2"],
  .block-content-tier_comparison [class*="--name-field-row-"][class*="-t3"] {
    text-align: center;
    color: #2e4b81; }

/* TIER CARDS — the "what the tiers mean" explainer.

   ⭐ Fed by three fields on the TIER vocabulary: `field_tier_summary`,
   `field_tier_points` (multi-value) and `field_tier_rank` (sort, lower is
   higher standing). ⛔ The template ships the vocabulary EMPTY, so this block
   renders nothing until a client fills the terms. That is correct — a template
   cannot invent what someone's tiers mean.
*/
.view-tier-cards {
  /* The term name is the card title. */
  /* The checklist. ⭐ A tick drawn in CSS rather than an icon file, so it
     takes the palette and nothing has to ship. */
  /* ⚠️ BOTH FIELDS, 2026-08-24. The CARD now renders `field_tier_highlights`
     (her comp's marketing lines) while `field_tier_points` stays as the
     verifiable ladder the comparison chart is built from. ⛔ Do not drop
     either selector — points is still rendered anywhere the old display is
     used, and highlights is what the card shows now.
     📄 Why they were split: _furfinds-tiers.scss, same date. */ }
  .view-tier-cards .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    /* ⭐ 2rem, up from 1.25rem, her ask 2026-08-24: "OUR CARDS look so wide
       maybe a little more space between them". Widening the gutter is also
       what narrows the cards, since the three share one container width. */
    gap: 2rem; }
  .view-tier-cards .views-row {
    padding: 1.75rem 1.5rem;
    border: 1px solid #bbc8df;
    /* ⭐ $border-radius-lg, up from $border-radius, her ask 2026-08-24:
       "i think we need to round the corners a tad more". ⛔ An existing
       token, not a new number.
       ⚠️ The BORDER above is overridden to 0 in _furfinds-chrome.scss — she
       asked for it gone on 24 Aug. ⛔ Do not delete the declaration here
       expecting it to do nothing; the radius sits on the same rule. */
    border-radius: 1.25rem;
    background: #ffffff; }
  .view-tier-cards h2, .view-tier-cards .field--name-name {
    margin-block-end: .625rem;
    font-size: 1.375rem; }
  .view-tier-cards .field--name-field-tier-summary {
    color: #364d77;
    font-size: 0.875rem;
    line-height: 1.55;
    margin-block-end: 1rem; }
  .view-tier-cards .field--name-field-tier-points .field__item,
  .view-tier-cards .field--name-field-tier-highlights .field__item {
    position: relative;
    padding-inline-start: 1.5rem;
    margin-block-end: .4rem;
    font-size: 0.875rem; }
    .view-tier-cards .field--name-field-tier-points .field__item::before,
    .view-tier-cards .field--name-field-tier-highlights .field__item::before {
      content: "";
      position: absolute;
      inset-inline-start: .15rem;
      inset-block-start: .35em;
      inline-size: .5rem;
      block-size: .28rem;
      border-inline-start: 2px solid #395EA1;
      border-block-end: 2px solid #395EA1;
      transform: rotate(-45deg); }

/* THE NEWSLETTER BAND
--------------------------------------------------

   ⭐ From her Lovable comp: a wide rounded card sitting just above the footer,
   with a gradient running from her sky tint on the left to her cream on the
   right, a soft shadow, centred type and a pill-shaped signup.

   ⚠️ CANVAS CANNOT DO GRADIENTS, so the box is a theme class and the editor
   just puts `ff-newsletter` in a Wrapper's custom classes. ⛔ Do not try to
   rebuild this with inline styles in the editor.

   ⭐ Both gradient stops are EXISTING theme tokens, ⛔ not new colours.
*/
/* ⭐ Put `ff-newsletter` on a Canvas Wrapper holding the heading, the paragraph
   and the newsletter webform block.
   ⚠️ This was briefly applied to `.region-featured-bottom-third` instead, back
   when the band was two region blocks with no shared wrapper. That reserved the
   whole region on the front page. ⛔ Do not go back to that — it is in Canvas
   now and the region is free again. */
.ff-newsletter {
  position: relative;
  border-radius: 2rem;
  padding: 3.5rem 1.5rem;
  margin-block: 3rem 1rem;
  text-align: center;
  background-image: linear-gradient(100deg, rgba(136, 199, 232, 0.28) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(253, 248, 237, 0.85) 100%);
  box-shadow: 0 6px 16px -4px rgba(57, 94, 161, 0.18); }

.ff-newsletter h2,
.ff-newsletter .heading {
  margin-block-end: .75rem; }

/* ⛔⛔ NO `color` HERE. REMOVED 2026-08-23 at her request: "it's overriding my
   color and it's wrong."

   It used to set `color: $muted`, which beat whatever text colour she picked on
   the Canvas paragraph and left her unable to change it from the editor. The
   band still owns its LAYOUT; the COLOUR belongs to whoever is writing the
   content. ⛔ Do not put a colour back on this selector. */
.ff-newsletter p {
  max-inline-size: 40rem;
  margin-inline: auto; }

/* The signup sits inside the band. The field and the button share one pill,
   the same shape as the directory search. */
.ff-newsletter .webform-submission-form {
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block-start: 1.75rem;
  /* ⚠️ THE FORM ITSELF IS THE PILL. Webform emits the field and the actions as
     two sibling divs, plus three hidden inputs and a contextual-links div, so
     styling `> div` made each one its own pill and the button dropped onto a
     second line. ➡️ Lay the form out as the row and hide the strays. */
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.25rem .35rem .35rem 1.25rem;
  border-radius: 62.4375rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(8, 13, 23, 0.08); }
  .ff-newsletter .webform-submission-form > input[type="hidden"],
  .ff-newsletter .webform-submission-form > .contextual {
    display: none; }

.ff-newsletter .webform-submission-form .form-item {
  margin-block-end: 0; }

.ff-newsletter .webform-submission-form > div {
  margin-block-end: 0; }

.ff-newsletter .webform-submission-form > .js-form-item {
  flex: 1 1 auto;
  min-inline-size: 0; }

.ff-newsletter .webform-submission-form input[type="email"] {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  padding: .5rem 0;
  font-size: 1rem;
  color: #080D17; }

.ff-newsletter .webform-submission-form input[type="email"]:focus {
  outline: 0;
  box-shadow: none; }

.ff-newsletter .webform-submission-form label {
  /* The placeholder carries the meaning visually; the label stays for
     screen readers. ⛔ Do not delete it. */
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
  block-size: 1px;
  word-wrap: normal; }

.ff-newsletter .webform-submission-form .form-actions {
  flex: 0 0 auto;
  margin: 0; }

.ff-newsletter .webform-submission-form .form-actions .button {
  border-radius: 62.4375rem;
  padding-inline: 1.5rem;
  background: #88C7E8;
  border: 1px solid rgba(57, 94, 161, 0.25);
  color: #080D17; }

/* A SECTION HEADING WITH ITS "VIEW ALL" LINK ACROSS FROM IT.
   ⚠️ The link is the VIEW's own more-link, rendered inside the block after the
   results, ⛔ NOT a sibling component. So flex on the wrapper cannot reach it,
   because it sits a level deeper than the heading. ➡️ The wrapper becomes the
   positioning context and the link is lifted to its top-right corner.
   ⭐ Add `ff-section-more` to the Wrapper that holds the heading and the block. */
.ff-section-more {
  position: relative;
  /* 🔴 WITHOUT THIS THE LINK LANDS IN THE WRONG PLACE, and worse, it lands in a
     DIFFERENT place for admins than for everyone else. Drupal gives
     `.contextual-region` `position: relative` only for users who can see
     contextual links, so the absolutely positioned more-link measured itself
     against the VIEW for Liz and against this wrapper for Kashmere.
     ⛔ Do not remove. Contextual links elsewhere are unaffected. */ }
  .ff-section-more .views-element-container,
  .ff-section-more .view {
    position: static; }

.ff-section-more .more-link {
  position: absolute;
  /* ⭐ Nudged down 10px on her eye, 22 Aug. At 0 it sits level with the
     eyebrow; this drops it a little towards the heading without lining up
     with it. ⛔ Not a magic number to "correct" — it is a judgement call. */
  inset-block-start: 10px;
  inset-inline-end: 0;
  margin: 0;
  text-align: end; }

.ff-section-more .more-link a {
  display: inline-block;
  padding: .5rem 1.25rem;
  border-radius: 62.4375rem;
  border: 1px solid rgba(57, 94, 161, 0.25);
  background: #fff;
  color: #395EA1;
  font-size: .875rem;
  text-decoration: none; }

.ff-section-more .more-link a:hover,
.ff-section-more .more-link a:focus-visible {
  background: #88C7E8;
  color: #080D17; }

@media (max-width: 575.98px) {
  /* Too tight to sit beside the heading on a phone. */
  .ff-section-more .more-link {
    position: static;
    margin-block-start: 1rem;
    text-align: start; } }
/* THE /explore BANNER
--------------------------------------------------

   ⭐ Her comp: eyebrow, big heading, one line of subtext, then a full-width
   search pill, all sitting on the page wash before the listings begin.

   ⚠️ /explore is a VIEW page, ⛔ NOT a Canvas page, so this is built from blocks
   in the `highlighted` region rather than components. The banner block is
   weighted −10 and the search block 0 so the search sits underneath.

   ⚠️ The page-title block is hidden on /explore ONLY (negated path condition),
   because the banner carries the heading and the two would repeat.
*/
/* 🔴 THE CLASSES IN THE BLOCK BODY DO NOT SURVIVE. `content_format` strips
   classes from `p` and does not allow `h1` at all, so the banner is styled by
   POSITION inside its own block instead. ⛔ Do not put classes in that body and
   expect them to arrive. */
#block-flight-explore-banner .field > p:first-child,
#block-flight-community-banner .field > p:first-child {
  margin-block-end: .5rem;
  color: #395EA1;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase; }

#block-flight-explore-banner .field > h2,
#block-flight-community-banner .field > h2 {
  margin-block-end: .5rem; }

#block-flight-explore-banner .field > p:last-child,
#block-flight-community-banner .field > p:last-child {
  max-inline-size: 40rem;
  margin-block-end: 1.5rem;
  /* ⭐ Grey, 2026-08-24, so /explore matches the sub-pages and the header
     menu. ⛔ Was #4D6EAA. Her rule: "same color as the menu". */
  color: rgba(8, 13, 23, 0.75); }

/* ⚠️ The page title still renders on /explore, but hidden from sight, so the
   page keeps a real `h1` for screen readers and search engines. The banner's
   heading is only an `h2`, because `content_format` forbids `h1`.
   ⛔ Do not switch this to `display: none`. */
.path-explore #block-flight-page-title,
body:has(#block-flight-community-banner) #block-flight-page-title {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
  block-size: 1px; }

/* THE EXPLORE SUB-PAGE BANNER — /explore/tier/%, /category/%, /city/%
--------------------------------------------------

   Her report 2026-08-24: "we dont' have the heading banner on those pages
   (/explore/tier/Pets-Allowed)".

   🔴 TWO THINGS WERE WRONG, ⛔ not one.
   1. `#block-flight-explore-banner` is set to `pages: /explore`, an EXACT
      match, so the sub-pages got no banner at all.
   2. The page title WAS rendering but was visually hidden, because the rule
      below keys off `.path-explore` — and Drupal puts that body class on
      /explore AND on every /explore/* path. So the sub-pages lost their
      heading to a rule written for the parent.

   ⭐⭐ THE FIX IS A SECOND page_title_block, `flight_explore_sub_banner`, placed
   in `highlighted` at weight −9 and limited to `/explore/*`. ⚠️ In Drupal
   `/explore/*` does NOT match `/explore` itself, which is exactly the split we
   want: the parent keeps its authored banner, the children get their title.
   ⭐ Weight −9 puts it after the breadcrumb and BEFORE the search pill at 0.
   ⭐⭐ And the title needs no new content, because the view's contextual filter
   already sets it to `{{ arguments.name }} businesses` — so
   /explore/tier/Pet-Inclusive reads "Pet-Inclusive businesses" on its own.
   ⛔ Do not hardcode tier names anywhere for this.

   ⚠️ The ORIGINAL page-title block stays hidden on these paths, so there is
   still exactly one visible h1. ⛔ Do not unhide it. */
#block-flight-explore-sub-banner {
  margin-block-end: .5rem;
  /* ⭐ Matches the authored banner's heading exactly.
     ⚠️ calc() is REQUIRED inside clamp(): Sass evaluates the arithmetic
     itself and dies on "Incompatible units: 'rem' and 'vw'", and ⛔ webpack
     still says "compiled successfully" while writing the error into the CSS
     as a comment. ⛔ Always grep the built file. */
  /* The eyebrow, so it reads as the same furniture as /explore. ⭐ A fixed
     word, ⛔ never a tier name — generated content cannot be per-term without
     hardcoding, and hardcoding tier names is forbidden on this build. */ }
  #block-flight-explore-sub-banner h1 {
    margin-block-end: 0;
    font-size: clamp(2rem, calc(5vw + 1rem), 3rem);
    line-height: 1.1; }
  #block-flight-explore-sub-banner::before {
    content: "Directory";
    display: block;
    margin-block-end: .5rem;
    color: #395EA1;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase; }

/* THE EXPLORE HERO IS A BAND, NOT LOOSE TEXT — her comp, 2026-08-24
--------------------------------------------------

   "you also have to make more space up top and make that Explore Verified
   Businesses a banner. it's supposed to look like the header like the other
   headers looked."

   ⭐ WHAT THE COMP ACTUALLY SHOWS, which the earlier build missed: the eyebrow,
   heading, subtitle AND the search pill all sit inside ONE full-width band with
   a hard edge under it, and the results start below that edge on their own
   ground. ⛔ Ours was the same four things floating on the page with nothing
   separating them from the listings.

   ⭐⭐ SAME FULL-BLEED TECHNIQUE AS THE STATS BAND: a `box-shadow` spread paints
   the colour out past the element while the element itself stays at container
   width, and `clip-path` trims that paint to the horizontal axis.
   ⛔ Do NOT reach for `inline-size: 100vw` — it includes the scrollbar and adds
   horizontal scroll. 📄 The long version is in stats-banner.css.

   ⚠️ The colour is `$surface` at 55%, so the page's own radial wash still reads
   THROUGH the band and only the edge separates it. ⛔ Not a new colour.

   ⚠️ Keyed to the banner blocks' PRESENCE, ⛔ not to a path, so /explore and its
   children stay in step and nothing drifts. Same pattern as the rules below. */
body:has(#block-flight-explore-banner) .highlighted,
body:has(#block-flight-explore-sub-banner) .highlighted,
body:has(#block-flight-community-banner) .highlighted {
  /* ⭐ "more space up top" — was effectively nothing above the eyebrow. */
  padding-block: 3rem 2.5rem;
  background: rgba(247, 252, 255, 0.55);
  box-shadow: 0 0 0 100vmax rgba(247, 252, 255, 0.55);
  clip-path: inset(0 -100vmax);
  border-block-end: 1px solid rgba(8, 13, 23, 0.07); }

/* The subtitle line under the sub-page heading, her note 2026-08-24: "there's
   a line underneath of that... it's supposed to be in a hero section."
   ⭐ Its own small block (`flight_explore_sub_subtitle`, weight −8) because a
   `page_title_block` can only ever output the title. ⛔ The heading cannot come
   from a block_content instead — it has to be dynamic per tier/category/city.
   ➡️ So the hero is deliberately TWO blocks: dynamic title, static subtitle.
   ⭐ Values copied from `#block-flight-explore-banner .field > p:last-child`,
   so the sub-pages and /explore read as the same furniture. */
#block-flight-explore-sub-subtitle {
  max-inline-size: 40rem;
  margin-block-end: 1.5rem;
  /* ⭐ Her call 2026-08-24: "The text underneath should be gray. same color as
     the menu i believe." That is `rgba($ink, .75)`, the same value the header
     menu and the body copy use. ⛔ NOT #4D6EAA, which is what the /explore
     banner's own subtitle still uses — see the note below. */
  color: rgba(8, 13, 23, 0.75); }
  #block-flight-explore-sub-subtitle p:last-child {
    margin-block-end: 0; }

/* 🔴 AND THE ORIGINAL TITLE MUST GO ENTIRELY ON THESE PAGES, ⛔ not just be
   visually hidden. `.path-explore` (below) hides it from SIGHT, but Drupal puts
   that body class on the sub-pages too, so with the new banner in place a
   screen reader met the SAME h1 twice: "Pet-Inclusive businesses" from the
   hidden block, then again from the banner.

   ⭐⭐ `display: none` IS CORRECT HERE, and it is the exact opposite of the
   /explore and /apply cases. There the banner heading is only an `h2` (because
   `content_format` forbids `h1`), so the hidden block is the page's ONLY real
   h1 and must survive. Here the banner IS a page_title_block, so it already IS
   the h1 — keeping the other one just duplicates it.
   ⛔ Do not "make this consistent" with the rules below. They differ on purpose.

   ⚠️ Keyed to the banner's PRESENCE rather than to a path, so the two can never
   drift apart. Same pattern as `body:has(#block-flight-apply-banner)`. */
body:has(#block-flight-explore-sub-banner) #block-flight-page-title {
  display: none; }

.ff-banner__eyebrow {
  margin-block-end: .5rem;
  color: #395EA1;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase; }

.ff-banner__title {
  margin-block-end: .5rem; }

.ff-banner__sub {
  max-inline-size: 40rem;
  margin-block-end: 1.5rem;
  color: #4D6EAA; }

/* The search on /explore runs the full width, unlike the compact one in the
   home-page hero. ⛔ Do not reuse the hero's max-width here. */
.highlighted .views-exposed-form {
  inline-size: 100%; }

/* ⭐⭐ THE PILL IS GONE, 26 Aug. Her call, and it follows from the filters.
   The band was designed around ONE search field, so the border, the white fill
   and the shadow lived on this wrapper and the input inside it was deliberately
   borderless. Adding Category and City put three controls inside one pill, which
   left two of them looking unstyled and the buttons trapped inside the outline.
   ➡️ So the wrapper is now just a flex row. Each control carries its own border
   and the buttons sit OUTSIDE any outline. ⛔ Do not put the background or the
   border back here without also re-bordering the controls, or the search input
   goes invisible again. */
.highlighted .views-exposed-form > .d-flex {
  /* The form was 100% but its inner flex row still sized to its content, so
     the row stopped short. */
  inline-size: 100%;
  align-items: center;
  gap: .5rem;
  flex-wrap: nowrap; }

/* ⭐ WHY THEY WERE DIFFERENT SIZES, fixed 26 Aug. This was `flex: 1 1 auto`,
   and `auto` means each control's starting width is its own CONTENT width. A
   select sized itself to its longest option, the text input sized itself to its
   placeholder, and only the leftover space was shared. ➡️ `flex: 1 1 0` gives
   every control a zero starting width so they divide the row equally.
   ⛔ Do not put `auto` back to "fix" a cramped select. Give that one a
   `flex-grow` above 1 instead, so the row still adds up. */
/* 🔴 THE SELECTOR MATTERS HERE AND IT CAUGHT US OUT. Drupal wraps each control
   in `js-form-item js-form-type-textfield form-type-textfield form-item-search`.
   There is NO bare `form-item` class, so a `.form-item` rule matches NOTHING and
   fails silently. ⛔ `form-item-search` is a different class, not a match.
   ➡️ `.js-form-item` is the one every wrapper actually carries.

   ⚠️ AND THAT IS WHY THE MIDDLE BOX WAS WIDER. The City autocomplete renders
   with `size="60"` while the name field renders `size="30"`, and a browser sizes
   a text input from `size` whenever flex-basis is auto. Once the flex rule
   actually applies, `1 1 0` overrides the attribute and all three divide the row
   equally. ⛔ Do not chase this with a width on the input. */
.highlighted .views-exposed-form .js-form-item {
  flex: 1 1 0;
  min-inline-size: 0;
  margin-block-end: 0; }

/* ⭐⭐ LABELS ARE VISIBLE AGAIN, 26 Aug, her call. They were clipped to a
   screen-reader-only box because ONE search field with a placeholder needs no
   label. With three controls a placeholder cannot carry it: a select has no
   placeholder at all, so Category and City had nothing naming them.
   ⛔ Do not re-hide these while there is more than one control in the row. */
.highlighted .views-exposed-form label {
  display: block;
  margin-block-end: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #080D17; }

/* The per-filter description stays hidden. It is guidance for an editor in the
   Views UI, not something a visitor needs under every box. */
.highlighted .views-exposed-form .description {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
  block-size: 1px; }

/* ⚠️ The row is centred, so once the labels are visible the controls sit half a
   label-height lower than the buttons. Align to the bottom instead and the
   inputs and the buttons line up on their baselines. */
.highlighted .views-exposed-form > .d-flex {
  align-items: flex-end; }

/* ⭐ The text input now carries its own border, because the pill that used to
   provide one is gone. Matched to the select the Category filter renders, so the
   three controls read as one set rather than three different widgets. */
.highlighted .views-exposed-form input[type="text"],
.highlighted .views-exposed-form select,
.highlighted .views-exposed-form input[type="search"] {
  inline-size: 100%;
  border: 1px solid rgba(57, 94, 161, 0.18);
  border-radius: var(--bs-border-radius, 0.375rem);
  background: #fff;
  padding: .5rem .75rem;
  font-size: 1rem;
  color: #080D17;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }

.highlighted .views-exposed-form input[type="text"]:focus,
.highlighted .views-exposed-form select:focus,
.highlighted .views-exposed-form input[type="search"]:focus {
  outline: 0;
  border-color: rgba(57, 94, 161, 0.55);
  box-shadow: 0 0 0 0.2rem rgba(57, 94, 161, 0.15); }

.highlighted .views-exposed-form .form-actions {
  flex: 0 0 auto;
  /* Pushed to the far right like her comp, rather than sitting against the
     input. The field's own flex-grow does not reach it because the label and
     description are pulled out of flow. */
  margin: 0 0 0 auto; }

.highlighted .views-exposed-form .form-actions .button {
  border-radius: 62.4375rem;
  padding-inline: 1.75rem;
  background: #88C7E8;
  border: 1px solid rgba(57, 94, 161, 0.25);
  color: #080D17; }

/* THE COMMUNITY PAGE'S IN-BODY SECTION HEADING — her copy, 2026-08-24
--------------------------------------------------

   "then in the body of the blog, above the cards, it has Blog / Notes from the
   pack."

   ⭐ It lives in the blog view's HEADER AREA, so it sits inside the view and
   above the cards without needing another block.

   🔴 STYLED BY POSITION, ⛔ NOT BY CLASS, and this is the third time this trap
   has bitten on this build: the header area uses `content_format`, which
   STRIPS `class` off a `<p>`. `ff-banner__eyebrow` was typed into the content
   and never arrived. 📄 Exactly the same note sits above
   `#block-flight-explore-banner .field > p:first-child`.
   ⛔ Do not put classes in a `content_format` body and expect them to survive.

   ⭐ Values match the banner eyebrow so the page reads as one system. */
.view-blog .view-header {
  margin-block-end: 1.5rem; }
  .view-blog .view-header p:first-child {
    margin-block-end: .5rem;
    color: #395EA1;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase; }
  .view-blog .view-header h2 {
    margin-block-end: 0; }

/* ⭐ THE 404 PAGE, 26 Aug. Her sad-dog image is a PNG with a baked-in white
   background, so on the site's pale field it floated as a white rectangle.
   ➡️ The content area goes white so the image blends into the page.
   ⚠️ `page-404` is set in flight_preprocess_html(). ⛔ There is no core body
   class for a 404 — the real one is built from whatever URL was typed. */
body.page-404 {
  background: #fff; }
  body.page-404 #main-wrapper,
  body.page-404 #main,
  body.page-404 .main-content,
  body.page-404 .section {
    background: #fff; }

/* CLIENT TASK LINKS — the Start Here page and the "Your tasks" block on /user.
--------------------------------------------------

   ⭐ Why this exists as CSS rather than markup: the `content_format` text
   format strips classes from links, so these action links ⛔ cannot carry
   `.btn`. These rules turn any paragraph whose ONLY child is a link into a
   button instead.

   ⚠️ Scoped deliberately to the two places that need it, and to `main`, so the
   header and footer are untouched. A multi-link paragraph stays inline links.

   📄 Was `css/start-here.css`, a hand-written file that sat outside the build
   and would have been destroyed by `npm run clean`. Moved into Sass 22 Aug. */
body.page-node-9 main p > a:only-child,
#block-flight-your-tasks p > a:only-child {
  display: inline-block;
  padding: .75rem 1.5rem;
  margin: .25rem 0 .5rem;
  border-radius: 2rem;
  background-color: #395EA1;
  color: #fff;
  text-decoration: none;
  line-height: 1.2; }
  body.page-node-9 main p > a:only-child strong,
  #block-flight-your-tasks p > a:only-child strong {
    font-weight: 600; }
  body.page-node-9 main p > a:only-child:hover, body.page-node-9 main p > a:only-child:focus-visible,
  #block-flight-your-tasks p > a:only-child:hover,
  #block-flight-your-tasks p > a:only-child:focus-visible {
    background-color: #2e4b81;
    color: #fff;
    text-decoration: none; }

body.page-node-9 main h2 {
  margin-top: 2rem; }

body.page-node-9 main li,
#block-flight-your-tasks li {
  margin-bottom: .5rem; }

/* SUB-ACTIONS under a button — "Add a business" beneath "Businesses".
   ⭐ The pairing is deliberate: the button goes to the LIST, the link under it
   CREATES. Learning it once on businesses teaches how blog posts work too.
   ⚠️ These live in a `<ul>` on purpose. `content_format` strips classes, and a
   `<p>` holding a single link would be caught by the button rule above. */
#block-flight-your-tasks ul {
  margin: -.25rem 0 1rem;
  padding-left: 1.5rem;
  list-style: none; }
  #block-flight-your-tasks ul li {
    margin-bottom: 0; }
  #block-flight-your-tasks ul a {
    color: #395EA1;
    font-size: .9375rem; }
    #block-flight-your-tasks ul a::before {
      content: '+';
      margin-right: .4rem;
      font-weight: 600; }
    #block-flight-your-tasks ul a:hover, #block-flight-your-tasks ul a:focus-visible {
      color: #2e4b81; }

/* THE /user TASK GRID — ⭐ her layout, 24 Aug:
   "businesses and blog posts on the top line with their matching link then
   applications and newsletter signups on the same line under all of that."

   ⚠️⚠️ THIS IS PLACED BY `nth-child`, SO THE ORDER OF THE BLOCK BODY MATTERS.
   `content_format` strips classes, so there is ⛔ no way to add wrapper divs or
   hooks in the markup. If you add or remove a paragraph in block_content 4,
   ➡️ COME BACK AND RENUMBER THESE. The expected order is:
     1 intro · 2 Businesses · 3 +Add a business · 4 Blog posts · 5 +Add a post
     6 Applications · 7 Newsletter signups · 8 explainer · 9 Start Here line */
#block-flight-your-tasks .field--name-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  align-items: start;
  max-width: 46rem;
  /* One column on small screens. ⛔ Every placement above must be undone or
     the rows collapse on top of each other. */ }
  #block-flight-your-tasks .field--name-body > :nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1; }
  #block-flight-your-tasks .field--name-body > :nth-child(2) {
    grid-column: 1;
    grid-row: 2; }
  #block-flight-your-tasks .field--name-body > :nth-child(3) {
    grid-column: 1;
    grid-row: 3; }
  #block-flight-your-tasks .field--name-body > :nth-child(4) {
    grid-column: 2;
    grid-row: 2; }
  #block-flight-your-tasks .field--name-body > :nth-child(5) {
    grid-column: 2;
    grid-row: 3; }
  #block-flight-your-tasks .field--name-body > :nth-child(6) {
    grid-column: 1;
    grid-row: 4; }
  #block-flight-your-tasks .field--name-body > :nth-child(7) {
    grid-column: 2;
    grid-row: 4; }
  #block-flight-your-tasks .field--name-body > :nth-child(8) {
    grid-column: 1 / -1;
    grid-row: 5; }
  #block-flight-your-tasks .field--name-body > :nth-child(9) {
    grid-column: 1 / -1;
    grid-row: 6; }
  @media (max-width: 575.98px) {
    #block-flight-your-tasks .field--name-body {
      grid-template-columns: 1fr; }
      #block-flight-your-tasks .field--name-body > * {
        grid-column: 1 !important;
        grid-row: auto !important; } }

/* CHROME
--------------------------------------------------

   ⭐⭐ THE RULE THIS SECTION EXISTS TO ENFORCE: spend the brand colour ONCE.

   The starter painted the palette onto three big bands — a coloured top bar, a
   coloured navbar and a coloured footer — which made the page feel heavy no
   matter how light the palette was. ⛔ Her words, 8/16, and she was right:
   "the contrasts in the top and bottom are bad."

   ➡️ So the chrome is quiet and the LISTINGS are the darkest thing on the
   page, which is what a directory wants. The brand colour is spent where it
   carries meaning — links, the tier chip, the card's top edge — and nowhere
   as decoration.

   ⚠️ The navbar backgrounds themselves are THEME SETTINGS, not CSS:
   bootstrap_barrio_navbar_background and _navbar_top_background, both now
   light. ⛔ Changing them back in the theme UI undoes this.
*/
/* ⛔ NO body background rule here, deliberately. $body-bg is the palette's
   `surface`, and hardcoding white here is what stopped Sandy Shore from ever
   appearing. Let the palette do its job. */
/* The header reads as a shelf, not a slab: light, with a hairline holding it
   down. */
.header {
  border-block-end: 1px solid #bbc8df; }

.bg-inverse {
  background: #080D17 !important; }

/* ⛔ FURFINDS: THE FOOTER IS A LIGHT BLUE BAND, NOT A DARK ONE.

   First Light's version set `background: $ink !important` here. That is a
   DESIGN DECISION, not a palette value, so it survived the palette swap.
   ➡️ REPLACED rather than overridden, per her instruction 19 Aug: "don't try to
   override and keep the old ones."
   ⭐ Colours are hers: --secondary for the band, --muted-foreground for text. */
.site-footer {
  background: #e5f5fd;
  color: #364d77; }
  .site-footer a {
    color: #364d77;
    text-decoration: none; }
    .site-footer a:hover, .site-footer a:focus-visible {
      color: #395EA1;
      text-decoration: underline;
      text-underline-offset: .15em; }

/* The content region needs to breathe before the footer starts. Without this
   the footer began immediately under the page title on any short page, which
   read as a broken layout rather than an empty one. */
.main-content,
main {
  padding-block-end: 4rem; }

/* Navigation is wayfinding. It stays quiet until you point at it. */
.menu--main li a,
.menu--account li a {
  color: #080D17; }
  .menu--main li a:hover, .menu--main li a:focus-visible,
  .menu--account li a:hover,
  .menu--account li a:focus-visible {
    color: #2e4b81; }

.site-name-slogan a {
  text-decoration: none; }

.card-group img {
  margin: 0;
  width: 100%;
  height: auto; }

.card-group .field--type-image {
  margin: 0; }

.slick {
  width: 100%; }

.slick > div {
  margin: 0 15px; }

/* FURFINDS: the negative heading tracking from her design. Bootstrap has no
   $headings-letter-spacing variable, so it is applied here. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  letter-spacing: -.02em; }

/* ⛔⛔ FURFINDS CLIENT OVERRIDES — LAST ON PURPOSE.
   These are imported at the END so they beat the template's own rules by
   source order. ⚠️ The footer is the reason: First Light sets a dark footer
   with !important in the CHROME section above, and an equally-important rule
   imported earlier would lose. ⛔ Do not move these back to the top. */
/* SOCIAL ICONS
--------------------------------------------------

   ⭐⭐ THE POINT: a client pastes their Instagram URL into the `social` menu and
   GETS THE ICON. No developer, no new module, no per-client drawing.

   ⚠️ MATCHED ON THE HREF, NOT THE LINK TITLE. Barrio builds its `nav-link--*`
   class from the PATH, so an external link comes out as
   `nav-link-https--instagramcom-` — useless to match on, and it would break the
   moment a client used a regional domain.
   ➡️ `a[href*="instagram"]` is what a client actually controls, and it survives
   any title they choose. ⭐ It also means "Our Instagram" works as a label.

   ⭐ THE ICONS: Phosphor, already shipping inside the `mercury` contrib theme
   (1512 of them). A curated set was COPIED into this theme's own icons/social/
   so nothing depends on mercury staying installed.

   ⭐ Drawn with `mask-image`, so every icon takes `currentColor` and follows the
   palette. One colour system, no recolouring per network.

   ➡️ TO ADD A NETWORK: drop its SVG in icons/social/ and add one line here.
*/
.menu--social a[href*="instagram"]::before {
  mask-image: url("../icons/social/instagram-logo.svg");
  -webkit-mask-image: url("../icons/social/instagram-logo.svg"); }

.menu--social a[href*="facebook"]::before {
  mask-image: url("../icons/social/facebook-logo.svg");
  -webkit-mask-image: url("../icons/social/facebook-logo.svg"); }

.menu--social a[href*="linkedin"]::before {
  mask-image: url("../icons/social/linkedin-logo.svg");
  -webkit-mask-image: url("../icons/social/linkedin-logo.svg"); }

.menu--social a[href*="youtube"]::before {
  mask-image: url("../icons/social/youtube-logo.svg");
  -webkit-mask-image: url("../icons/social/youtube-logo.svg"); }

.menu--social a[href*="tiktok"]::before {
  mask-image: url("../icons/social/tiktok-logo.svg");
  -webkit-mask-image: url("../icons/social/tiktok-logo.svg"); }

.menu--social a[href*="pinterest"]::before {
  mask-image: url("../icons/social/pinterest-logo.svg");
  -webkit-mask-image: url("../icons/social/pinterest-logo.svg"); }

.menu--social a[href*="threads"]::before {
  mask-image: url("../icons/social/threads-logo.svg");
  -webkit-mask-image: url("../icons/social/threads-logo.svg"); }

.menu--social a[href*="bsky"]::before {
  mask-image: url("../icons/social/butterfly.svg");
  -webkit-mask-image: url("../icons/social/butterfly.svg"); }

.menu--social a[href*="bluesky"]::before {
  mask-image: url("../icons/social/butterfly.svg");
  -webkit-mask-image: url("../icons/social/butterfly.svg"); }

.menu--social a[href*="mastodon"]::before {
  mask-image: url("../icons/social/mastodon-logo.svg");
  -webkit-mask-image: url("../icons/social/mastodon-logo.svg"); }

.menu--social a[href*="whatsapp"]::before {
  mask-image: url("../icons/social/whatsapp-logo.svg");
  -webkit-mask-image: url("../icons/social/whatsapp-logo.svg"); }

.menu--social a[href*="github"]::before {
  mask-image: url("../icons/social/github-logo.svg");
  -webkit-mask-image: url("../icons/social/github-logo.svg"); }

.menu--social a[href*="behance"]::before {
  mask-image: url("../icons/social/behance-logo.svg");
  -webkit-mask-image: url("../icons/social/behance-logo.svg"); }

.menu--social a[href*="dribbble"]::before {
  mask-image: url("../icons/social/dribbble-logo.svg");
  -webkit-mask-image: url("../icons/social/dribbble-logo.svg"); }

.menu--social a[href*="snapchat"]::before {
  mask-image: url("../icons/social/snapchat-logo.svg");
  -webkit-mask-image: url("../icons/social/snapchat-logo.svg"); }

.menu--social a[href*="twitch"]::before {
  mask-image: url("../icons/social/twitch-logo.svg");
  -webkit-mask-image: url("../icons/social/twitch-logo.svg"); }

.menu--social a[href*="discord"]::before {
  mask-image: url("../icons/social/discord-logo.svg");
  -webkit-mask-image: url("../icons/social/discord-logo.svg"); }

.menu--social a[href*="medium"]::before {
  mask-image: url("../icons/social/medium-logo.svg");
  -webkit-mask-image: url("../icons/social/medium-logo.svg"); }

.menu--social a[href*="spotify"]::before {
  mask-image: url("../icons/social/spotify-logo.svg");
  -webkit-mask-image: url("../icons/social/spotify-logo.svg"); }

.menu--social a[href*="soundcloud"]::before {
  mask-image: url("../icons/social/soundcloud-logo.svg");
  -webkit-mask-image: url("../icons/social/soundcloud-logo.svg"); }

.menu--social a[href*="x.com"]::before {
  mask-image: url("../icons/social/x-logo.svg");
  -webkit-mask-image: url("../icons/social/x-logo.svg"); }

.menu--social a[href*="twitter"]::before {
  mask-image: url("../icons/social/twitter-logo.svg");
  -webkit-mask-image: url("../icons/social/twitter-logo.svg"); }

.menu--social a[href*="mailto"]::before {
  mask-image: url("../icons/social/envelope-simple.svg");
  -webkit-mask-image: url("../icons/social/envelope-simple.svg"); }

.menu--social a[href*="/rss"]::before {
  mask-image: url("../icons/social/rss-simple.svg");
  -webkit-mask-image: url("../icons/social/rss-simple.svg"); }

.menu--social {
  /* ⚠️ Only links that MATCHED a network get the icon treatment. A link with
     no match keeps its text, so nothing disappears silently. */ }
  .menu--social .nav {
    gap: .25rem; }
  .menu--social .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border-radius: 999px;
    transition: background-color .15s ease-in-out, color .15s ease-in-out; }
  .menu--social a[href]::before {
    content: none; }
  .menu--social a[style],
  .menu--social a[href*="instagram"], .menu--social a[href*="facebook"], .menu--social a[href*="linkedin"],
  .menu--social a[href*="youtube"], .menu--social a[href*="tiktok"], .menu--social a[href*="pinterest"],
  .menu--social a[href*="threads"], .menu--social a[href*="bsky"], .menu--social a[href*="bluesky"],
  .menu--social a[href*="mastodon"], .menu--social a[href*="whatsapp"], .menu--social a[href*="github"],
  .menu--social a[href*="behance"], .menu--social a[href*="dribbble"], .menu--social a[href*="snapchat"],
  .menu--social a[href*="twitch"], .menu--social a[href*="discord"], .menu--social a[href*="medium"],
  .menu--social a[href*="spotify"], .menu--social a[href*="soundcloud"], .menu--social a[href*="vimeo"],
  .menu--social a[href*="x.com"], .menu--social a[href*="twitter"], .menu--social a[href^="mailto"] {
    font-size: 0;
    /* Palette-driven, changed 20 Aug. This used to hardcode #075a8e, so the
       icons kept the old blue when the palette moved to her Dark Blue. */ }
    .menu--social a[style]::before,
    .menu--social a[href*="instagram"]::before, .menu--social a[href*="facebook"]::before, .menu--social a[href*="linkedin"]::before,
    .menu--social a[href*="youtube"]::before, .menu--social a[href*="tiktok"]::before, .menu--social a[href*="pinterest"]::before,
    .menu--social a[href*="threads"]::before, .menu--social a[href*="bsky"]::before, .menu--social a[href*="bluesky"]::before,
    .menu--social a[href*="mastodon"]::before, .menu--social a[href*="whatsapp"]::before, .menu--social a[href*="github"]::before,
    .menu--social a[href*="behance"]::before, .menu--social a[href*="dribbble"]::before, .menu--social a[href*="snapchat"]::before,
    .menu--social a[href*="twitch"]::before, .menu--social a[href*="discord"]::before, .menu--social a[href*="medium"]::before,
    .menu--social a[href*="spotify"]::before, .menu--social a[href*="soundcloud"]::before, .menu--social a[href*="vimeo"]::before,
    .menu--social a[href*="x.com"]::before, .menu--social a[href*="twitter"]::before, .menu--social a[href^="mailto"]::before {
      content: "";
      inline-size: 1.25rem;
      block-size: 1.25rem;
      background-color: currentColor;
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain; }
    .menu--social a[style]:hover, .menu--social a[style]:focus-visible,
    .menu--social a[href*="instagram"]:hover,
    .menu--social a[href*="instagram"]:focus-visible, .menu--social a[href*="facebook"]:hover, .menu--social a[href*="facebook"]:focus-visible, .menu--social a[href*="linkedin"]:hover, .menu--social a[href*="linkedin"]:focus-visible,
    .menu--social a[href*="youtube"]:hover,
    .menu--social a[href*="youtube"]:focus-visible, .menu--social a[href*="tiktok"]:hover, .menu--social a[href*="tiktok"]:focus-visible, .menu--social a[href*="pinterest"]:hover, .menu--social a[href*="pinterest"]:focus-visible,
    .menu--social a[href*="threads"]:hover,
    .menu--social a[href*="threads"]:focus-visible, .menu--social a[href*="bsky"]:hover, .menu--social a[href*="bsky"]:focus-visible, .menu--social a[href*="bluesky"]:hover, .menu--social a[href*="bluesky"]:focus-visible,
    .menu--social a[href*="mastodon"]:hover,
    .menu--social a[href*="mastodon"]:focus-visible, .menu--social a[href*="whatsapp"]:hover, .menu--social a[href*="whatsapp"]:focus-visible, .menu--social a[href*="github"]:hover, .menu--social a[href*="github"]:focus-visible,
    .menu--social a[href*="behance"]:hover,
    .menu--social a[href*="behance"]:focus-visible, .menu--social a[href*="dribbble"]:hover, .menu--social a[href*="dribbble"]:focus-visible, .menu--social a[href*="snapchat"]:hover, .menu--social a[href*="snapchat"]:focus-visible,
    .menu--social a[href*="twitch"]:hover,
    .menu--social a[href*="twitch"]:focus-visible, .menu--social a[href*="discord"]:hover, .menu--social a[href*="discord"]:focus-visible, .menu--social a[href*="medium"]:hover, .menu--social a[href*="medium"]:focus-visible,
    .menu--social a[href*="spotify"]:hover,
    .menu--social a[href*="spotify"]:focus-visible, .menu--social a[href*="soundcloud"]:hover, .menu--social a[href*="soundcloud"]:focus-visible, .menu--social a[href*="vimeo"]:hover, .menu--social a[href*="vimeo"]:focus-visible,
    .menu--social a[href*="x.com"]:hover,
    .menu--social a[href*="x.com"]:focus-visible, .menu--social a[href*="twitter"]:hover, .menu--social a[href*="twitter"]:focus-visible, .menu--social a[href^="mailto"]:hover, .menu--social a[href^="mailto"]:focus-visible {
      background: rgba(57, 94, 161, 0.1);
      color: #395EA1; }

/* FURFINDS TIER COLOURS — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ THIS FILE IS FURFINDS ONLY. Do NOT copy it back into First Light.
   The template ships its vocabularies EMPTY, so it cannot know what a client's
   tiers are called. The tier NAMES below are FurFinds' own.

   ⭐ The class comes from the twig, which builds a modifier from the term name:
       business-teaser__tier--pet-inclusive
   So a client with different tier names gets different classes, and this file
   is simply replaced per client.

   🔴 WHY THE LABEL IS INK AND NOT THE TIER COLOUR. All three of her tier
   colours fail WCAG AA as text on white:
       Pet-Inclusive  #009ba3  3.38:1  (fails body, passes large/UI)
       Pet-Friendly   #69aed5  2.44:1  (fails both)
       Pets-Allowed   #a5bad1  1.99:1  (fails both)
   ➡️ So the colour carries MEANING as a fill and a left edge, and the LABEL is
   ink, which passes everywhere. The three tiers stay instantly distinguishable
   and nothing is unreadable.
   📄 Reasoning and the numbers: furfinds-design-decisions.md
*/
/* ⭐⭐ NEW TIER COLOURS, 20 Aug. Her judgement on the old set: "They're
   indistinguishable to me", and she was right. The old three were #009ba3,
   #69aed5 and #a5bad1: all cool, all similar lightness, and TWO of them failed
   the 3:1 a coloured edge needs to count as a visible boundary (2.44 and 1.99).

   The new three separate by HUE, not just lightness, and they read as a ladder:
   green for the highest standing, her own brand blue in the middle, a warm grey
   at the bottom. All three now pass 3:1 as an edge AND 4.5:1 as text on a white
   card, so the tick marks and the tier link can wear the tier's own colour.

   ⚠️ THESE ARE FOR KASHMERE TO APPROVE. Her call: change them, then let the
   client decide. ⛔ Not presented as final. */
.business-teaser__tier--pet-inclusive .field__item,
.business-detail__tier--pet-inclusive .field__item {
  /* A pale wash of the tier colour, with the tier colour itself as a solid
     left edge. Legible over any photograph, and the edge is what the eye
     reads at a glance. */
  background: #d4e7e4;
  /* ⭐ A full border, added 20 Aug at her request: "i really think they
     should have a border maybe around them". The heavy inline-start edge
     stays, so the chip still reads as a ladder rung at a glance. */
  border: 1px solid #0E7C6B;
  border-inline-start: 3px solid #0E7C6B;
  color: #080D17; }

.business-teaser__tier--pet-friendly .field__item,
.business-detail__tier--pet-friendly .field__item {
  /* A pale wash of the tier colour, with the tier colour itself as a solid
     left edge. Legible over any photograph, and the edge is what the eye
     reads at a glance. */
  background: #dbe2ee;
  /* ⭐ A full border, added 20 Aug at her request: "i really think they
     should have a border maybe around them". The heavy inline-start edge
     stays, so the chip still reads as a ladder rung at a glance. */
  border: 1px solid #395EA1;
  border-inline-start: 3px solid #395EA1;
  color: #080D17; }

.business-teaser__tier--pets-allowed .field__item,
.business-detail__tier--pets-allowed .field__item {
  /* A pale wash of the tier colour, with the tier colour itself as a solid
     left edge. Legible over any photograph, and the edge is what the eye
     reads at a glance. */
  background: #e7e5e4;
  /* ⭐ A full border, added 20 Aug at her request: "i really think they
     should have a border maybe around them". The heavy inline-start edge
     stays, so the chip still reads as a ladder rung at a glance. */
  border: 1px solid #77706A;
  border-inline-start: 3px solid #77706A;
  color: #080D17; }

/* ⭐⭐ THE TIER CARDS, 20 Aug. Her idea: "their check marks ... should have the
   same color as the tier."

   Before this the tick marks were $primary on every card, so all three tiers
   looked identical no matter which tier they described. ⛔ That was not a
   hardcoded COLOUR, it was a hardcoded CHOICE: one palette variable applied to
   every tier regardless.

   The hook is `.tier-card--<name>`, set in templates/taxonomy-term--tier.html.twig
   from the term label with |clean_class, exactly like the business teaser. So
   the label is the single source and nothing is listed twice.

   ⚠️ The tick colour is safe here because every tier colour now clears 4.5:1 on
   white and the card background IS white ($raised). ⛔ It would NOT be safe on
   the pale tier wash, where the lower two fall to 3.9. */
.tier-card--pet-inclusive .field--name-field-tier-points .field__item::before,
.tier-card--pet-inclusive .field--name-field-tier-highlights .field__item::before {
  border-inline-start-color: #0E7C6B;
  border-block-end-color: #0E7C6B; }

/* The card's own border takes the tier colour too, so the tier is readable
   from the shape of the card and not only from the ticks inside it. */
.view-tier-cards .views-row:has(.tier-card--pet-inclusive) {
  border-color: #0E7C6B; }

.tier-card--pet-friendly .field--name-field-tier-points .field__item::before,
.tier-card--pet-friendly .field--name-field-tier-highlights .field__item::before {
  border-inline-start-color: #395EA1;
  border-block-end-color: #395EA1; }

/* The card's own border takes the tier colour too, so the tier is readable
   from the shape of the card and not only from the ticks inside it. */
.view-tier-cards .views-row:has(.tier-card--pet-friendly) {
  border-color: #395EA1; }

.tier-card--pets-allowed .field--name-field-tier-points .field__item::before,
.tier-card--pets-allowed .field--name-field-tier-highlights .field__item::before {
  border-inline-start-color: #77706A;
  border-block-end-color: #77706A; }

/* The card's own border takes the tier colour too, so the tier is readable
   from the shape of the card and not only from the ticks inside it. */
.view-tier-cards .views-row:has(.tier-card--pets-allowed) {
  border-color: #77706A; }

/* The tier's own listing link, sitting at the foot of each card. It wears the
   tier colour, which is safe because the card background is $raised (white)
   where every tier colour clears 4.5:1. */
.tier-card__explore {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-block-start: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none; }
  .tier-card__explore:hover, .tier-card__explore:focus-visible {
    text-decoration: underline; }

.tier-card--pet-inclusive .tier-card__explore {
  color: #0E7C6B; }

.tier-card--pet-friendly .tier-card__explore {
  color: #395EA1; }

.tier-card--pets-allowed .tier-card__explore {
  color: #77706A; }

/* THE TIER CARD FURNITURE — circle, chip, and an even bottom row
--------------------------------------------------

   From her comp, 2026-08-24: "we are missing the bubble and the circle too
   above the titles" and "the explore pet-friendly..etc at the very bottom needs
   to be even across on all three at the bottom".

   ⭐ HER COMP STACKS EACH CARD: circle → chip → title → summary → ticks →
   Explore. ⛔ Ours went straight to the title.
*/
/* 1. THE CARD BECOMES A COLUMN, so the Explore link can be pushed to the floor.
   ⭐ The grid already stretches the rows to equal height (`auto-fit` with the
   default `align-items: stretch`), so the only missing piece was making the
   card fill that height and the link take the leftover space.
   ⚠️ `position: relative` is set in _furfinds-tier-badge.scss for the badge.
   ⛔ Do not duplicate it here. */
.tier-card {
  display: flex;
  flex-direction: column;
  block-size: 100%; }

.tier-card__explore {
  margin-block-start: auto; }

/* ⭐ Breathing room above the Explore link, her ask 2026-08-24: "please put
   more space before the bottom explorer links".

   ⚠️ WHY IT GOES ON `.content` AND NOT ON THE LINK. The link's own
   `margin-block-start` is already spoken for — it is `auto`, which is what
   pins it to the floor of the card — so a number there would undo the
   alignment. ⛔ And padding on the link would inflate its hover target rather
   than add a gap. A bottom margin on the block above does neither.
   ⭐ Margins do not collapse between flex items, so this is a guaranteed
   minimum gap even on the tallest card, where `auto` resolves to zero. */
.tier-card > .content {
  margin-block-end: 1.75rem; }

/* 2. THE CIRCLE. ⭐ Zero markup — it is the card's own ::before, which makes it
   the first thing in the column.

   ⭐⭐ HER RULING 2026-08-24: "the blue on all three for the circle." So the
   disc does NOT take the tier colour, ⛔ unlike the chip below it. It is the
   same pale blue on every card and only the chip carries the tier.

   ⭐⭐ A background-image, ⛔ NOT a mask — the same trap documented on
   `.view-term-tiles a::before` in _furfinds-chrome.scss. A mask would cut the
   DISC ITSELF into a paw shape and lose the circle. Here the disc is the
   background COLOUR and the paw is a background IMAGE layered on it.
   ⚠️ Consequence: the paw colour is BAKED INTO the data URI (#395EA1, her Dark
   Blue) and cannot follow currentColor. ⛔ To recolour it, edit the URI.
   ⭐ Same geometry as _furfinds-paw.scss, from her Lovable PawIcon. */
.tier-card::before {
  content: "";
  flex: none;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: 1rem;
  border-radius: 50%;
  background-color: #deeff9;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23395EA1'><ellipse cx='20' cy='22' rx='6' ry='8'/><ellipse cx='44' cy='22' rx='6' ry='8'/><ellipse cx='10' cy='36' rx='5' ry='7'/><ellipse cx='54' cy='36' rx='5' ry='7'/><path d='M32 30c-9 0-16 7-16 14a8 8 0 0 0 8 8c3 0 5-2 8-2s5 2 8 2a8 8 0 0 0 8-8c0-7-7-14-16-14z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%; }

/* 3. THE CHIP. ⭐ Built to match the listing chips exactly — pale wash of the
   tier colour, ink label, paw in the tier's own colour. ⛔ Not a new recipe.
   ⚠️ `align-self: flex-start` matters now the card is a flex column: without it
   the pill would stretch the full card width. */
.tier-card__chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .4em;
  margin-block-end: .625rem;
  padding: .25em .7em;
  border-radius: 999px;
  background: #ebecec;
  color: #080D17;
  font-size: 0.75rem;
  /* ⚠️ 600, not 500. Static Fraunces ships no Medium, so 500 fakes a bold. */
  font-weight: 600;
  line-height: 1.4;
  /* The paw. ⭐ HERE a mask IS right, because it paints a shape in
     currentColor rather than filling a disc. ⛔ The opposite of the circle
     above. Same reasoning as _furfinds-paw.scss, which does this for the
     listing chips. */ }
  .tier-card__chip::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 1.15em;
    block-size: 1.15em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='black'><ellipse cx='20' cy='22' rx='6' ry='8'/><ellipse cx='44' cy='22' rx='6' ry='8'/><ellipse cx='10' cy='36' rx='5' ry='7'/><ellipse cx='54' cy='36' rx='5' ry='7'/><path d='M32 30c-9 0-16 7-16 14a8 8 0 0 0 8 8c3 0 5-2 8-2s5 2 8 2a8 8 0 0 0 8-8c0-7-7-14-16-14z'/></svg>");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain; }

/* The tier's own colour on the chip. ⭐ Wash behind, tier colour on the PAW,
   ink on the label — the established split: colour carries the meaning, text
   carries the words. ⚠️ 18% is the settled chip wash and is safe here because
   the label is $ink, ⛔ not the tier colour. (The HIGHEST TIER badge has to use
   8% instead, because there the tier colour IS the type. See
   _furfinds-tier-badge.scss.) */
.tier-card--pet-inclusive .tier-card__chip {
  background: #d4e7e4; }
  .tier-card--pet-inclusive .tier-card__chip::before {
    background-color: #0E7C6B; }

.tier-card--pet-friendly .tier-card__chip {
  background: #dbe2ee; }
  .tier-card--pet-friendly .tier-card__chip::before {
    background-color: #395EA1; }

.tier-card--pets-allowed .tier-card__chip {
  background: #e7e5e4; }
  .tier-card--pets-allowed .tier-card__chip::before {
    background-color: #77706A; }

/* ⭐⭐ THE UNCLAIMED CHIP, 26 Aug. Her client on the testing checklist: "Since
   those businesses aren't verified they shouldn't have a tier present on the
   page. I'd like for them to be listed in the top left corner of their listing
   as 'unclaimed' instead of the tier label currently present."

   ⭐ Deliberately OUTSIDE $furfinds-tiers. Unclaimed is not a rung on the
   ladder, it is the absence of one, so it must not pick up a tier colour or sit
   in the map that generates them. Renaming or recolouring a tier leaves this
   alone, which is the point.

   ⭐ The neutral is $ink at low opacity rather than a new brand colour, so it
   reads as "no standing yet" instead of as a fourth tier. The paw still shows,
   because it is FurFinds' listing either way.

   🔴 The label is ink for the same reason the tier labels are: it is the only
   thing here guaranteed to pass 4.5:1 over a pale wash on top of a photograph.

   ➡️ The twig test is field_owner, not the tier field. See
   templates/node--business--teaser.html.twig. */
.business-teaser__tier--unclaimed .field__item,
.business-detail__tier--unclaimed .field__item {
  background: #ebecec;
  border: 1px solid rgba(8, 13, 23, 0.35);
  border-inline-start: 3px solid rgba(8, 13, 23, 0.55);
  color: #080D17;
  font-style: italic; }
  .business-teaser__tier--unclaimed .field__item::before,
  .business-detail__tier--unclaimed .field__item::before {
    background-color: rgba(8, 13, 23, 0.55); }

/* The paw in the tier chip. ⭐ AFTER furfinds-tiers on purpose: it reads
   $furfinds-tiers, and it overrides the .field__item display that partial
   leaves in place. */
/* FURFINDS: THE PAW IN THE TIER CHIP — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ FURFINDS ONLY. Do NOT copy this back into First Light. The template
   ships its vocabularies empty and has no paws in it.

   ⭐ WHERE THE PAW CAME FROM. Liz pulled it out of her own Lovable comp on
   2026-08-23, from /src/components/PawIcon.tsx. It is pure geometry — four
   ellipses and one path on a 0 0 64 64 viewBox — so there is no image file to
   ship, nothing to go missing, and it scales to any chip size.

   ⛔⛔ THE LOVABLE COLOURS WERE NOT TAKEN WITH IT. Her TierBadge.tsx uses
   --tier-inclusive/-friendly/-allowed, which convert to #009ba3, #69aed5 and
   #a5bad1 — the exact three she rejected on 20 Aug as "indistinguishable to
   me", and which fail contrast at 3.38:1, 2.44:1 and 1.99:1. Her ruling on
   2026-08-23 was "don't change our work! keep our colors please".
   ➡️ So the SHAPE is hers from Lovable and the COLOUR is ours from
   $furfinds-tiers in _furfinds-tiers.scss. ⛔ Do not reopen the palette.

   🔴 WHY A MASK AND NOT AN <img> OR AN INLINE SVG IN THE TWIG. The chip's
   markup is the rendered field_tier — Drupal builds it, not us. Reaching in to
   inject an icon would mean overriding the field template on both the teaser
   and the detail page, in two places, for decoration. A mask paints the paw
   from CSS with no markup change at all, so node--business--teaser.html.twig
   and taxonomy-term--tier.html.twig stay exactly as they were.

   ⭐ THE PAW WEARS THE TIER'S OWN COLOUR, the label stays ink. Same reasoning
   as the tick marks in _furfinds-tiers.scss: colour carries the meaning, text
   carries the words. Every tier colour clears 4.5:1 on white and all three
   clear the 3:1 a non-text graphic needs, so the paw is safe on the pale tier
   wash the chip sits on.

   ⚠️ A tier with no colour in $furfinds-tiers still gets a paw, in
   currentColor, so a newly added tier degrades to an ink paw rather than to no
   paw at all.
*/
/* ⭐ Set on the wrapper, not per tier, so the paw appears on EVERY tier chip
   including any added later. inline-flex keeps the chip's outer layout
   identical to the inline-block it replaces, while giving the paw and the
   label a proper baseline-free centre alignment and a real gap. */
.business-teaser__tier .field__item,
.business-detail__tier .field__item {
  display: inline-flex;
  align-items: center;
  gap: .4em; }
  .business-teaser__tier .field__item::before,
  .business-detail__tier .field__item::before {
    content: "";
    flex: 0 0 auto;
    /* Sized in em so the paw tracks the chip's font-size. The teaser chip and
       the detail chip use different padding but the same $font-size-xs, and
       em means neither has to be special-cased. 1.15em rather than 1em
       because the paw's own artwork does not fill its viewBox vertically. */
    inline-size: 1.15em;
    block-size: 1.15em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='black'><ellipse cx='20' cy='22' rx='6' ry='8'/><ellipse cx='44' cy='22' rx='6' ry='8'/><ellipse cx='10' cy='36' rx='5' ry='7'/><ellipse cx='54' cy='36' rx='5' ry='7'/><path d='M32 30c-9 0-16 7-16 14a8 8 0 0 0 8 8c3 0 5-2 8-2s5 2 8 2a8 8 0 0 0 8-8c0-7-7-14-16-14z'/></svg>");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='black'><ellipse cx='20' cy='22' rx='6' ry='8'/><ellipse cx='44' cy='22' rx='6' ry='8'/><ellipse cx='10' cy='36' rx='5' ry='7'/><ellipse cx='54' cy='36' rx='5' ry='7'/><path d='M32 30c-9 0-16 7-16 14a8 8 0 0 0 8 8c3 0 5-2 8-2s5 2 8 2a8 8 0 0 0 8-8c0-7-7-14-16-14z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain; }

/* The per-tier colour. Same map and the same modifier classes the wash and the
   border already use, so a renamed or re-coloured tier carries the paw with it
   and nothing is listed twice. */
.business-teaser__tier--pet-inclusive .field__item::before,
.business-detail__tier--pet-inclusive .field__item::before {
  background-color: #0E7C6B; }

.business-teaser__tier--pet-friendly .field__item::before,
.business-detail__tier--pet-friendly .field__item::before {
  background-color: #395EA1; }

.business-teaser__tier--pets-allowed .field__item::before,
.business-detail__tier--pets-allowed .field__item::before {
  background-color: #77706A; }

/* FURFINDS: THE "HIGHEST TIER" BADGE — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ FURFINDS ONLY. Do NOT copy back into First Light.

   ⭐ WHAT DECIDES WHO WEARS IT. `field_tier_rank` on the tier vocabulary, set
   to 1 / 2 / 3. The twig (templates/taxonomy-term--tier.html.twig) prints the
   badge for rank 1 only. ⛔ No tier name appears anywhere in this file or in
   the twig test, so re-ranking or renaming the tiers carries the badge with
   them.

   ⚠️⚠️ REBUILT 2026-08-24. IT WAS A LOUD SOLID FILL SITTING ABOVE THE TITLE.
   Her ask: "we have a dark green highest tier that should be in the top right
   corner so all of the titles are even across and it needs to be that really
   pale green with green all caps letters."
   ➡️ TWO separate problems in one note:
     1. IN FLOW, so it pushed Pet-Inclusive's title down and the three card
        titles did not line up. ⭐ Absolute now, so it costs no vertical space.
     2. TOO LOUD. Pale wash + the tier colour as TYPE, ⛔ not as a fill.
   ⛔ The old "it appears once so it is allowed to be loud" reasoning is dead.

   ⚠️ THE CONTRAST, RECHECKED FOR TYPE RATHER THAN FILL. #0E7C6B on an 8% wash
   of itself measures 4.62:1 — AA at this size, and it is small uppercase type
   so 4.5 is the bar it has to clear.
   🔴 8% IS NOT AN ARBITRARY NUMBER, ⛔ do not round it up. The tier chip's
   established wash is 18%, but at 18% this drops to about 3.9 and fails; even
   10% comes out 4.49 and misses. ⭐ 8% is the palest-looking value that still
   passes. ⛔ If a new tier colour is ever given rank 1, re-measure it.

   ⭐ Colour comes from $furfinds-tiers in _furfinds-tiers.scss, the same map
   the wash, the border, the ticks and the paw already use. ⛔ Nothing new is
   introduced and the palette is not touched. Her ruling, 2026-08-23:
   "don't change our work! keep our colors please."
*/
/* ⭐ The positioning anchor. `.views-row` carries the card padding, and
   `.tier-card` fills that padding box, so `top: 0; right: 0` lands the badge
   neatly inside the card rather than on its border. */
.tier-card {
  position: relative; }

/* ⭐ Only the card that actually has a badge reserves room for it, so the other
   two titles keep the full width. ⚠️ 7.5rem clears "HIGHEST TIER" at this size
   with its letter-spacing. ⛔ Without this a long tier name would run under it. */
.tier-card:has(.tier-card__badge) .tier-card__name {
  padding-inline-end: 7.5rem; }

.tier-card__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  padding: .25em .625em;
  border-radius: 999px;
  /* The neutral fallback. A tier that has a rank but no colour in the map
     still gets a readable badge rather than white-on-white. */
  background: #ebecec;
  color: #080D17;
  font-size: 0.75rem;
  /* ⚠️ 600, not 500. Same reason as the tier chip: the base family is Fraunces
     and static Fraunces ships no Medium, so 500 would be a faked bold. */
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .06em; }

/* The tier's own colour, keyed off the same modifier class the card already
   carries. Only rank 1 renders a badge, so in practice one of these wins. */
.tier-card--pet-inclusive .tier-card__badge {
  background: #ecf5f3;
  color: #0E7C6B; }

.tier-card--pet-friendly .tier-card__badge {
  background: #eff2f7;
  color: #395EA1; }

.tier-card--pets-allowed .tier-card__badge {
  background: #f4f4f3;
  color: #77706A; }

/* THE TIER COMPARISON MATRIX HEADINGS
--------------------------------------------------

   Her note, 2026-08-23: "on the verified chart, the one with the check marks
   and exes, the titles need to be the proper color. pet inclusive greenish
   color, pet friendly blue and pets allowed grayish color."

   ⭐ The modifier class comes from the twig
   (`components/tier-matrix/tier-matrix.twig`), built from the term label with
   |clean_class — the same pattern the tier cards and the business teasers use,
   so all four places read the SAME $furfinds-tiers map. ⚠️ Rename a tier and
   the colour follows it everywhere.

   ⚠️ THE COLOUR IS SAFE AS TEXT HERE, and it is worth knowing why. All three
   tier colours clear 4.5:1 on white — #0E7C6B 5.10, #395EA1 6.38, #77706A 4.87
   — which is exactly why the tick marks and the Explore links already wear
   them. ⛔ It would NOT be safe on the pale tier wash, where the lower two drop
   to about 3.9.

   ⚠️ !important IS NEEDED. The component ships its own `tier-matrix.css` with
   `.tier-matrix__table thead th { color: #4D6EAA }`, and SDC component CSS is
   attached with the component rather than through style.scss, so source order
   is not guaranteed. ⛔ Do not remove it hoping specificity will hold. */
.tier-matrix__tier--pet-inclusive {
  color: #0E7C6B !important; }

.tier-matrix__tier--pet-friendly {
  color: #395EA1 !important; }

.tier-matrix__tier--pets-allowed {
  color: #77706A !important; }

/* FURFINDS CHROME — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ FURFINDS ONLY. Do NOT copy back into First Light.

   The parts of her design that are not colour, radius or type. Taken from the
   Lovable styles.css, 2026-08-19.

   ⭐⭐ THE ONE IDEA WORTH KEEPING: HER SHADOWS ARE COLOURED, NOT GREY. All
   three are built from --sky-deep with color-mix, which is most of why the
   comp feels soft rather than sharp. A grey shadow on a blue page reads as
   dirt; a blue one reads as depth.
*/
/* Her three shadow tokens. GEOMETRY is from her Lovable stylesheet; the COLOUR
   is her Dark Blue, changed 20 Aug on her instruction that no colour comes from
   Lovable. Was #075a8e (Lovable's sky-deep). */
/* ⭐ Deepened 22 Aug on her note that the verification cards needed a better
   shadow, and that the hover should grow — particularly underneath. Both are
   weighted downward (a larger positive Y than blur spread) so the card reads as
   lifting off the page rather than glowing evenly around its edge.
   ⛔ Do not flatten the Y offset back towards 0. */
/* THE CARDS. Her design leans on the soft shadow rather than a hard border. */
.business-teaser,
.view-tier-cards .views-row,
.business-detail__facts,
.business-detail__report,
.view-term-tiles a {
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18);
  border-color: transparent;
  transition: box-shadow .2s ease, transform .2s ease, border-color .15s ease-in-out; }

/* NO BORDER ON THE TIER CARDS — her ask, 2026-08-24:
   "remove the border and make sure the shadow is visible on each card".

   ⚠️ WHY IT WAS STILL SHOWING even though the rule above already sets
   `border-color: transparent`: _sections.scss gives these cards
   `border: 1px solid $muted-tint-2`, so a 1px TRANSPARENT ring was still being
   reserved and the shadow began 1px further out, which read as a faint outline.
   ⛔ Setting the colour is not enough — the WIDTH has to go.

   ⚠️ THIS RULE MUST LIVE IN THIS FILE, ⛔ not in _furfinds-tiers.scss, because
   `$shadow-soft` is DEFINED here (line ~24) and tiers is imported BEFORE chrome
   in style.scss. Putting it there fails the build with an undefined variable. */
.view-tier-cards .views-row {
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18); }

/* ⭐ HER NOTE, 19 Aug: the cards "move a bit when hovered". A small lift, not a
   scale — scaling resamples the image and the text goes soft. */
.business-teaser:hover,
.business-teaser:focus-within,
.view-tier-cards .views-row:hover,
.view-term-tiles a:hover,
.view-term-tiles a:focus-visible {
  box-shadow: 0 22px 48px -16px rgba(57, 94, 161, 0.38), 0 6px 14px -6px rgba(57, 94, 161, 0.22);
  border-color: transparent;
  transform: translateY(-3px); }

/* ⛔ Respect a reduced-motion preference. The shadow still changes, so the
   hover is never invisible to someone who has motion turned off. */
@media (prefers-reduced-motion: reduce) {
  .business-teaser,
  .view-tier-cards .views-row,
  .view-term-tiles a {
    transition: box-shadow .2s ease, border-color .15s ease-in-out; }
    .business-teaser:hover, .business-teaser:focus-within, .business-teaser:focus-visible,
    .view-tier-cards .views-row:hover,
    .view-tier-cards .views-row:focus-within,
    .view-tier-cards .views-row:focus-visible,
    .view-term-tiles a:hover,
    .view-term-tiles a:focus-within,
    .view-term-tiles a:focus-visible {
      transform: none; } }
/* Focus rings use her glow token, so keyboard focus is a designed state and
   still the palette's colour rather than the browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.business-teaser__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px rgba(57, 94, 161, 0.12); }

/* THE PAGE WASH — ⭐⭐ HER READ, 19 Aug, AND IT IS THE RIGHT ONE.

   ⛔ The comp has NO header image and NO hero image. The colour is the PAGE:
   it comes from the upper-left corner and fades out to the right and down, and
   the header simply sits on it with no background of its own. That is why the
   header appears to float.

   ⭐ THIS IS SIMPLER AND CLOSER THAN WHAT WAS BUILT FIRST, and it removes a
   scope problem with it: no hero image means no floating card, and that card
   carried a STAR RATING and a REVIEW COUNT, both express SOW exclusions.

   Built from her own .paw-bg tokens, re-anchored to the corner. */
body {
  background-color: #F7FCFF;
  background-image: radial-gradient(120rem 70rem at 0% 0%, rgba(178, 223, 250, 0.55) 0%, rgba(178, 223, 250, 0) 60%), radial-gradient(90rem 60rem at 85% 25%, rgba(253, 248, 237, 0.7) 0%, rgba(253, 248, 237, 0) 55%);
  background-repeat: no-repeat;
  background-attachment: fixed; }

/* THE HEADER SITS ON THE WASH, ⭐ but it is now SEPARATED from the page.
--------------------------------------------------

   ⚠️ Revised 22 Aug. The original rule was "no background, no rule under it",
   which came from the 8/16 decision that the chrome should be quiet. ⛔ But her
   Lovable design does separate the header: a strip in the page colour with a
   visible edge under it, then the content below.

   ⭐ Her Lovable CSS is
   `background-color: color-mix(in oklab, var(--background) 80%, transparent)`,
   i.e. the header is the PAGE COLOUR at 80%, ⛔ NOT white. So the header stays
   transparent on the wash and simply matches the page, which is what she wanted
   — and only the hairline is added.

   ⭐ The line is ink at 8%, not `$muted`, so it reads as an edge rather than as
   a drawn border. ⛔ Do not darken it; the point is separation, not decoration.
*/
.header,
.navbar,
.region-header,
.region-primary-menu {
  background: transparent !important;
  border-block-end: 0; }

/* ⭐⭐ THE HEADER IS A FLAT NEAR-WHITE BLUE, ⛔ NOT TRANSPARENT. Changed
   2026-08-23, and this REVERSES the 22 Aug decision above.

   Her words: "she has it as that lightest possible blue, the one that looks
   like white."

   ⚠️ WHY THE OLD READING WAS WRONG, and it is a subtle one. The 22 Aug note
   took her Lovable CSS literally — the header is the page colour, so it was
   made transparent. But THIS page is not a flat colour: `.canvas-page` lays two
   radial gradients over `$surface`, so a transparent header lets that wash run
   up THROUGH it and the strip is never one clean tone.
   ➡️ Filling it with `$surface` gives exactly what she describes: a flat,
   almost-white blue strip, with the washed hero starting beneath it.

   ⭐ `$surface` #F7FCFF IS her Very Light Blue at 18% on white — it is her
   colour, ⛔ not a new one, and ⛔ not white.
   ⚠️ The children stay transparent so they show this fill rather than fighting
   it. ⛔ Do not paint `.navbar` as well. */
/* ⭐⭐ AND NOW IT IS STICKY AND TRANSLUCENT — her ask, 2026-08-24:
   "the navbar at the top needs to be partially transparent and fixed to the top".

   ⚠️⚠️ THIS REVERSES THE 23 AUG "flat, NOT transparent" DECISION ABOVE, ⛔ but
   it does NOT reintroduce the problem that caused it. The 23 Aug complaint was
   that a transparent header let the two radial gradients run up THROUGH it, so
   the strip was never one clean tone. ⭐ `backdrop-filter: blur()` fixes exactly
   that: the wash behind is blurred flat, so the strip reads as one tone while
   still being see-through. ➡️ Solid was the right answer only WITHOUT blur.

   ⭐ 80% is her own Lovable value, `color-mix(in oklab, var(--background) 80%,
   transparent)`. ⛔ Not a new number.

   ⭐⭐ `position: sticky`, ⛔ NOT `fixed`. Sticky needs no body padding, causes
   no layout shift and cannot leave a gap at the top. ✅ Checked: no ancestor of
   `.header` has `overflow` set, which is the one thing that silently kills it.

   ⚠️ `top` uses **`--drupal-displace-offset-top`**, which is Drupal's own
   measure of how much fixed chrome is above. It is **52px** with Gin's toolbar
   and **0** for a logged-out visitor, so the header tucks under the toolbar for
   Liz and Kashmere and sits flush at the very top for everyone else.
   ⛔ Do not hardcode 0 or 52. */
.header {
  position: sticky;
  top: var(--drupal-displace-offset-top, 0px);
  z-index: 1020;
  background: rgba(247, 252, 255, 0.8) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-block-end: 1px solid rgba(8, 13, 23, 0.08); }

/* ⚠️ Bootstrap Barrio puts bg-white / bg-light on the navbar through THEME
   SETTINGS, not CSS, so those have to be beaten here rather than unset. */
.navbar.bg-white,
.navbar.bg-light,
header.bg-light {
  background: transparent !important; }

/* The stats band keeps a tint of its own so it still reads as a band against
   the wash rather than dissolving into it. */
#block-flight-stats-banner {
  background-color: rgba(178, 223, 250, 0.22);
  background-image: none;
  box-shadow: none; }

/* Her type rendering settings. */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

/* THE REAL LOGO — Kashmere's mark, installed 19 Aug.
   ⭐ A magnifying glass with a paw in the lens, so it is WIDER THAN IT IS TALL
   (roughly 4:3). The First Light placeholder was square, and the header rule
   sizes by width, which would crop or squash this one. */
.navbar-brand img,
.site-footer .navbar-brand img {
  inline-size: auto;
  block-size: 2.5rem;
  max-inline-size: none; }

.site-footer .navbar-brand img {
  block-size: 2.25rem; }

/* THE HERO AND THE SEARCH — ⭐ HER OPTION 2, chosen 19 Aug.

   ⛔ NOT a negative margin. The search sits DIRECTLY BENEATH the hero with no
   visual boundary between them, so it reads as being inside it.

   ⭐⭐ WHY THIS RATHER THAN OVERLAPPING IT: a negative margin has to overlap a
   component whose height is CONTENT-DEPENDENT. Kashmere edits the headline, it
   wraps to three lines, and the search box lands in the middle of her text.
   This version has no geometry to break.

   ⚠️ The Canvas hero is a Tailwind component. Its `py-[90px] lg:py-[115px]`
   padding does not resolve here, so the spacing below is ours to set. */
.canvas-page main > section:first-of-type,
.canvas-page .region-content > section:first-of-type {
  background: transparent;
  padding-block: 3.5rem 0; }

/* The hero's own text block: tighten it up so the search reads as part of it. */
.canvas-page main .flex.flex-col.justify-center {
  gap: 1.25rem; }

/* THE SEARCH, sitting under the hero on the front page. Centred and narrow, so
   it reads as a hero element rather than a page-width form. */
#block-flight-hero-search {
  margin-block: -.5rem 3.5rem;
  /* ⛔ The label is redundant here — the placeholder says it, and a label
     above a hero search reads as a form rather than as an invitation. */ }
  #block-flight-hero-search .views-exposed-form {
    justify-content: center;
    max-inline-size: 34rem;
    margin-inline: auto;
    margin-block-end: 0; }
  #block-flight-hero-search label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap; }

/* ⚠️ SUPERSEDED 22 Aug. The /explore search used to be a narrow left-aligned
   form with a visible label. Her comp puts a FULL-WIDTH pill under the banner
   heading instead, so the 34rem cap is gone and the styling now lives in
   _sections.scss under `.highlighted .views-exposed-form`.
   ⛔ Do not reinstate this cap; it is what kept the pill stuck at 544px. */
/* THE FOOTER — ⚠️ HER DESIGN IS A LIGHT BLUE BAND, NOT A DARK ONE.

   First Light ships a dark $ink footer. Her comp uses a pale solid blue with
   greyish text. ⭐ That is a deliberate difference and it is FurFinds-only —
   ⛔ the template's dark footer stays as it is.

   Colours are all hers: --secondary #e5f5fd for the band, --muted-foreground
   #576574 for the text, ink for the headings.

   ✅ Contrast on #e5f5fd, measured:
        muted-foreground #576574  5.35:1  passes AA body
        ink              #122334 14.30:1  passes
        primary          #075a8e  6.57:1  passes
   ⛔ Not used: the soft sky #69aed5 is 2.18:1 here and fails, as it does
   everywhere else it is asked to carry text. */
.site-footer {
  /* ⭐ No !important needed — the template's dark rule was REPLACED, not overridden. */
  background: #e5f5fd;
  color: #364d77;
  /* Section labels sit up in ink so the columns still have a hierarchy. */
  /* The tagline and the account links were set light for a dark band. */
  /* The rule above the copyright was a white hairline for a dark band. */
  /* The footer branding mark: the logo is a light-background mark, so it
     needs no inversion here. Sized like the header's. */ }
  .site-footer h2 {
    color: #080D17;
    opacity: 1; }
  .site-footer a {
    color: #364d77; }
    .site-footer a:hover, .site-footer a:focus-visible {
      color: #395EA1; }
  .site-footer .site-slogan {
    color: #4D6EAA;
    opacity: 1; }
  .site-footer .menu--account li a,
  .site-footer .menu--main li a,
  .site-footer .menu--social .nav-link {
    color: #364d77; }
    .site-footer .menu--account li a:hover, .site-footer .menu--account li a:focus-visible,
    .site-footer .menu--main li a:hover,
    .site-footer .menu--main li a:focus-visible,
    .site-footer .menu--social .nav-link:hover,
    .site-footer .menu--social .nav-link:focus-visible {
      color: #395EA1; }
  .site-footer__bottom {
    border-block-start: 1px solid rgba(8, 13, 23, 0.12);
    color: #4D6EAA; }
  .site-footer .navbar-brand {
    color: #080D17; }

/* THE EYEBROW LABELS — corrected 2026-08-23
--------------------------------------------------

   Her note: the eyebrow "got a little bit bigger and shouldn't be", and "the
   eyebrow is Fraunces and should be Inter".

   ⭐⭐ WHY IT LOOKED DIFFERENT TODAY AND NOT BEFORE. Until this morning **no
   webfont was loading on this site at all** — every face fell back to Georgia
   or system-ui. Now that Fraunces genuinely loads, the section eyebrows are
   Fraunces for the first time, and Fraunces runs visually larger than the
   fallback did at the same pixel size. ⛔ Nothing about their CSS changed with
   the heading scale. 📄 See _fonts.scss.

   ⚠️ THE SECTION EYEBROW WAS THE ODD ONE OUT. It is a `::before` on the
   featured-bottom section headings (_sections.scss, "Featured" / "Browse"), and
   it was the ONLY eyebrow that set a font-family — the display face — at
   .8125rem. The banner eyebrows set no family, so they inherit Inter from body,
   and sit at .75rem.
   ➡️ So this brings the odd one into line rather than inventing a new style:
   Inter, .75rem, like every other eyebrow on the site.

   ⛔ Do not set the family back to $font-family-display. Fraunces is the
   heading face here; an eyebrow is a LABEL, not a heading. */
.region-featured-bottom-first > .block > h2::before,
.region-featured-bottom-first > .block > .block-title::before,
.region-featured-bottom-second > .block > h2::before,
.region-featured-bottom-second > .block > .block-title::before,
.region-featured-bottom-third > .block > h2::before,
.region-featured-bottom-third > .block > .block-title::before {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .75rem; }

/* THE DISPLAY HEADING — added 2026-08-23
--------------------------------------------------

   ⭐ A utility class for a heading that is playing a HERO role, applied from
   Canvas's "Custom Classes" field on the Heading component. Same pattern as
   `ff-newsletter`, which is typed into a Wrapper's custom classes.

   ⚠️ Her /about comp sets that heading at 3.75rem, which is Tailwind's
   `text-6xl`. That is far larger than the theme's h1 (2.75rem) and much larger
   than an h2, and it should stay a per-heading CHOICE rather than a change to
   the scale — raising $h1/$h2 again would drag tier card names and sidebar
   headings up with them.

   ⭐ Fluid, so a phone never gets a 60px headline, and it simply stops at her
   value. ⛔ The floor is 2.25rem so it never falls below an ordinary h2.

   ➡️ THE THREE DELIBERATE TIERS ON THIS SITE:
       60px  `.ff-display`, applied by hand where a heading is a hero
       48px  the /apply and /explore banner headings (keyed to the region,
             because content_format strips classes from block bodies)
       36px  ordinary h2 section headings

   ⚠️ `!important` on the size: Canvas headings also carry Bootstrap's
   `.heading--h1`, and this has to win wherever it is applied. */
.ff-display {
  font-size: clamp(2.25rem, calc(4vw + 1rem), 3.75rem) !important;
  line-height: 1.05;
  text-wrap: balance; }

/* THE CANVAS EYEBROW — corrected 2026-08-23
--------------------------------------------------

   🔴 WHERE THE /about EYEBROW ACTUALLY COMES FROM, because it confused her and
   it is not obvious: it is NOT the Heading component's `eyebrow` prop. It is a
   SEPARATE h6 Heading component set to centre, primary colour and uppercase.
   That is why there was no eyebrow setting to find on the big heading.

   ⚠️ AND THAT IS WHY IT IS FRAUNCES. It is a real heading, so it takes
   `$headings-font-family`, the display face. It only became visible today
   because until this morning no webfont loaded at all. 📄 See _fonts.scss.

   ⭐ So an h6 + uppercase in Canvas IS the eyebrow convention on this site, and
   it is treated as one: Inter, 12px, like every other eyebrow.
   ⛔ Do not let it keep the display face. An eyebrow is a LABEL, not a heading. */
.heading--h6.text-uppercase {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em; }

/* THE /explore SEARCH PILL — vertical centring, fixed 2026-08-23
--------------------------------------------------

   Her report: "the search button and the search by name words sit up a little
   too high. they need to be down a little further centered on the box."

   ⭐⭐ SHE WAS RIGHT, AND THE CAUSE IS A BOOTSTRAP UTILITY, not the pill.
   Drupal renders BOTH children of the exposed form with **`mb-3`**:

       <div class="... form-item-search mb-3">
       <div class="form-actions ... mb-3">

   `mb-3` is `margin-bottom: 1rem !important`. The pill already sets
   `align-items: center`, so flex dutifully centred a flex line whose height
   included that 1rem of margin — pushing the visible content up by half of it.

   ⚠️ `_sections.scss` already says `.form-item { margin-block-end: 0 }` and it
   loses, because ⛔ no amount of specificity beats `!important`. Same fight as
   the footer's `.nav.flex-row`.

   ⛔ Do not "fix" this by adding padding-top to the pill. That makes the pill
   taller and leaves the content off-centre. Remove the margin instead. */
.highlighted .views-exposed-form > .d-flex > .form-item,
.highlighted .views-exposed-form > .d-flex > .form-actions,
.highlighted .views-exposed-form > .d-flex > .js-form-item {
  margin-block-end: 0 !important; }

/* THE BRAND LOCKUP — mark + LIVE wordmark, rebuilt 2026-08-23
--------------------------------------------------

   ⭐⭐ HER POINT: "the wordmark on the logo is supposed to be fraunces."
   It was not, and ⛔ no CSS could have fixed it. The header was showing
   `logo-furfinds.png`, an 890x240 image with the words baked into the artwork,
   and the site name was switched OFF. `logo.svg` is no better — its wordmark is
   outlined paths, ⛔ not live text.

   ➡️ SO THE LOCKUP IS NOW TWO THINGS:
     1. `logo-mark.png` — the magnifier-and-paw ONLY, cropped from the file she
        supplied (FurFinds Logos/logo.png, 5479x4188) and scaled to 128px tall
        for retina. ⚠️ The source had a WHITE MATTE, not transparency, around
        the artwork, so `getbbox()` returned the whole canvas and the crop had
        to be found by sampling for non-white, non-transparent pixels.
     2. The site name, printed as REAL TEXT by the branding block, which means
        it takes Fraunces from `$font-family-display` like every other heading.

   ⭐ The win beyond the typeface: the wordmark is now selectable, translatable,
   readable by a screen reader, and it scales without going soft.

   ⚠️ PREVIOUS VALUES, if this ever needs reverting:
       flight.settings logo.path = themes/custom/flight/logo-furfinds.png
       branding block use_site_name = false
   ⛔ Do not delete `logo-furfinds.png`. It is still the correct lockup for
   anywhere the two cannot be composed, such as an emailed signature.

   ⚠️ Her comp shows "FurFinds®". The ® is NOT here, because the site name is
   the Drupal site name and adding it there would put it in the browser tab and
   every email. ❓ Raise it with her rather than sneaking it in. */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  /* The wordmark. ⭐ Fraunces, matching the headings, since that is the whole
     reason this was rebuilt. */
  font-family: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  /* ⚠️ 1.375rem, set 2026-08-24. THE HISTORY MATTERS, because this size has
     moved three times: 1.5rem → raised to 1.75rem on 23 Aug → she reverted it
     the same day ("it's too big now") → and on 24 Aug she asked for the
     lockup "just a tiny tad smaller" again. ⛔ Do not raise it. If it moves
     again it goes DOWN, and only if she says so. */
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  color: #080D17;
  white-space: nowrap;
  /* ⛔ The existing `.navbar-brand img` rule already caps the height at
     2.75rem. Only the alignment is set here — `align-top` is in the markup
     from Barrio and would push the mark off centre next to the text. */
  /* ⚠️ THIS OVERRIDES the 2.75rem cap set further up this file, under "THE
     REAL LOGO". ⛔ Do not chase that rule instead — it also sizes the FOOTER
     mark, which should stay small. */ }
  .navbar-brand:hover, .navbar-brand:focus-visible {
    color: #080D17;
    text-decoration: none; }
  .navbar-brand img {
    align-self: center;
    block-size: 2.5rem !important;
    inline-size: auto; }

/* A phone has no room for the full lockup, so both step down together. */
@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: 1.25rem;
    gap: .45rem; }
    .navbar-brand img {
      block-size: 2.25rem !important; } }
/* THE FOOTER LOCKUP — matched to the header, 2026-08-23
--------------------------------------------------

   Her report: "the logo in the footer doesn't have the wordmark next to it."
   ⭐ Because `use_site_name` was turned on for the HEADER branding block only.
   The footer is a SECOND block with its own settings. ✅ Now on for both.

   ⚠️ The footer lockup is deliberately SMALLER than the header's. It is a
   sign-off, ⛔ not the primary identity, and the tagline sits under it. */
.site-footer .navbar-brand {
  font-size: 1.25rem; }
  .site-footer .navbar-brand img {
    block-size: 2.25rem !important; }

/* THE NEWSLETTER CONSENT BOX — made visible 2026-08-23
--------------------------------------------------

   🔴🔴 HER REPORT, TWICE: "there's a toggle in the subscribe area and it
   doesn't have any reason for it to be there." She was looking at a REQUIRED
   consent checkbox with no words next to it.

   ⚠️ TWO SEPARATE CAUSES, and fixing one was not enough:
     1. Barrio rendered the label element EMPTY. ✅ Fixed in flight.theme with
        `flight_preprocess_form_element()`.
     2. ⭐ AND THEN THIS FILE'S OWN RULE HID IT ANYWAY.
        `_sections.scss` says `.ff-newsletter .webform-submission-form label`
        is visually-hidden — written for the EMAIL field, whose placeholder
        carries the meaning. It caught the consent label too.

   ⛔ It reads as a TOGGLE, not a checkbox, because Barrio's
   `bootstrap_barrio_checkbox` setting is `switch`.

   ⚠️ A required consent control with no visible statement is not a styling
   problem. Nobody can agree to an unlabelled switch.

   ⭐ The consent now wraps onto its own full-width row UNDER the email and the
   button, which is the ordinary pattern, and the container loses its full-pill
   radius because a two-row shape cannot be a pill. */
.ff-newsletter .webform-submission-form {
  flex-wrap: wrap;
  /* ⛔ Not 62.4375rem any more — see above. This matches the band's own 2rem
     language rather than inventing a third radius. */
  border-radius: 1.5rem;
  /* ⭐ Keep hiding the EMAIL label. ⛔ Never hide the consent one. */
  /* Row 1 is email + button. The consent drops to row 2. */
  /* ⚠️ Row 1 is email + button and it MUST stay one row. Without a basis the
     email item takes the full width and pushes the button onto its own line,
     which is what she saw: a tall box with Subscribe stranded underneath. */
  /* THE EMAIL FIELD NEEDS ROOM. Her report: typing put the first character
     hard against the edge of the box. The pill's own left padding sits on the
     FORM, and the input then starts at the very edge of its flex item. */ }
  .ff-newsletter .webform-submission-form label.form-check-label {
    position: static !important;
    overflow: visible;
    clip: auto;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    color: #4D6EAA;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: start; }
  .ff-newsletter .webform-submission-form > .form-actions {
    order: 2; }
  .ff-newsletter .webform-submission-form > .js-form-item-email,
  .ff-newsletter .webform-submission-form > .form-type-email,
  .ff-newsletter .webform-submission-form > .webform-type-email {
    flex: 1 1 12rem; }
  .ff-newsletter .webform-submission-form > .form-item-consent {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-block-start: .5rem;
    padding-block-end: .35rem;
    /* 🔴🔴 THIS RESET IS WHY THE SWITCH WAS HANGING OFF THE BOX.
       Bootstrap's `.form-check` puts `padding-left: 1.5em` on the wrapper
       and `margin-left: -1.5em` on the input, so the control sits in that
       reserved gutter. Making the wrapper a flex row removed the gutter but
       NOT the negative margin, so the switch pulled itself outside the
       white pill. ⛔ Do not delete these two lines. */
    padding-inline-start: 0;
    /* ⭐ The label and its description stack, so "You can unsubscribe at
       any time." sits on its own line under the consent sentence rather
       than running on. Her ask, 2026-08-23. */
    /* 🔴 THE VALIDATION MESSAGE HAS TO BE VISIBLE.
       The consent box IS enforced — a submit without it is rejected server
       side with "Please tick the box so we know you want to hear from us."
       ⚠️ But if that message is not shown, clicking Subscribe looks like it
       either worked or did nothing, which is exactly what she reported. */ }
    .ff-newsletter .webform-submission-form > .form-item-consent .form-check-input {
      flex: 0 0 auto;
      margin-inline-start: 0;
      margin-block-start: .15rem; }
    .ff-newsletter .webform-submission-form > .form-item-consent .form-check-label {
      display: block;
      /* ⭐ Her note: "times" was landing alone on a second line. `balance`
         evens the lines out instead of filling the first and orphaning
         whatever is left, so a phrase breaks where it reads. */
      text-wrap: balance; }
    .ff-newsletter .webform-submission-form > .form-item-consent .description {
      display: block;
      margin-block-start: .15rem;
      color: #4D6EAA;
      font-size: 0.75rem;
      line-height: 1.4;
      text-wrap: balance; }
    .ff-newsletter .webform-submission-form > .form-item-consent .invalid-feedback,
    .ff-newsletter .webform-submission-form > .form-item-consent .form-item--error-message {
      display: block;
      flex: 0 0 100%;
      margin-block-start: .35rem;
      color: #b3261e;
      font-size: 0.75rem; }
  .ff-newsletter .webform-submission-form input[type="email"] {
    padding-inline: .75rem 1rem; }

/* THE BUSINESS DETAIL HERO — the BOX was the wrong shape, 2026-08-23
--------------------------------------------------

   Her report: the photo filled the top of the frame and left grey underneath.

   ⛔⛔ TWO WRONG TURNS FIRST, recorded so nobody repeats them:
     1. `img { position: absolute; inset: 0 }` — made the image vanish entirely.
     2. Giving the wrappers `block-size: 100%` — the real markup is
        `.field > div > .field--name-field-media-image > .field__item > picture`
        and that anonymous middle `<div>` cannot be named reliably.

   ⭐⭐ THE ACTUAL PROBLEM WAS MUCH SIMPLER: the box and the image are different
   SHAPES. `_business.scss` sets the box to 16:9 (1.78:1), but the image style
   Drupal serves here is **5_2_1300x520**, which is 2.5:1. A 2.5:1 picture
   inside a 1.78:1 box fills the width, runs out of height, and leaves the box's
   own grey background showing beneath it.

   ✅ So match the box to the image style. No wrapper heights, no positioning
   tricks, and `object-fit: cover` still handles anything non-standard.
   ⚠️ If the image style is ever changed, change this ratio with it. */
.business-detail__media {
  aspect-ratio: 5 / 2; }

/* THE CATEGORY TILES — one height for all of them, 2026-08-23
--------------------------------------------------

   Her report: "Apartments & Housing" wraps to two lines, which makes its whole
   ROW taller than the rows beneath it, and the grid stops reading as a set.

   ⭐⭐ TWO WAYS TO SOLVE IT, and the font is the wrong one. Shrinking the type
   for the one long label fixes today and breaks the next time a long category
   is added — and the category list is HERS to change. It also gives one tile
   different type from its neighbours, which is more noticeable than the height.

   ✅ So every tile gets the same minimum height: enough for two lines, whether
   it needs them or not. ⛔ Not a fixed height — a THIRD line must still be able
   to push a tile taller rather than spill out of it.

   ⚠️ `align-items: center` stays, so a one-line label sits centred in the taller
   box instead of hugging the top. */
.view-term-tiles a {
  /* ⭐ 14px, matching her comp. Her note: "hers are 14 pixels ours are 16...
     it looks a little neater too." ⭐ $font-size-sm, ⛔ not a new value.
     ⚠️ This is a DIFFERENT decision from the height above: that one refused
     to shrink type to fix wrapping, this one matches her design. */
  font-size: 0.875rem;
  /* ⚠️ Lowered from 4.75rem now the type is smaller. Two 14px lines plus the
     padding come to roughly this. ⭐ If nothing wraps at 14px, this can go
     entirely and the tiles will size themselves — check before deciding. */
  min-block-size: 4.25rem; }

/* THE NAME ABOVE THE ADDRESS — added 2026-08-23
--------------------------------------------------

   Her ask: by the time a visitor reaches the facts panel, the page heading has
   scrolled away, so the address sits there with nothing saying whose it is.

   ⭐ Name, then a rule, then the address. The rule is the `border-block-end`
   here rather than an `<hr>`, so there is no extra element to style and it
   cannot pick up Bootstrap's own hr margins.

   ⚠️ It is a `<p>`, ⛔ not a heading — see the note in the twig. */
.business-detail__facts-name {
  margin-block: 0 .75rem;
  padding-block-end: .75rem;
  border-block-end: 1px solid rgba(57, 94, 161, 0.18);
  font-family: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #080D17;
  text-wrap: balance; }

/* THE PAW IN THE CATEGORY TILES — added 2026-08-23
--------------------------------------------------

   Her ask: the browse tiles had a plain pale disc where the paw should be.

   ⚠️ THE PLAIN DISC IS A TEMPLATE DECISION, AND IT IS THE RIGHT ONE THERE.
   `_sections.scss` says so outright: "the template cannot know what a client's
   categories ARE, and a wrong icon is worse than none." ⛔ Do not take the paw
   back into First Light — it is right for FurFinds and wrong for a law firm.

   ⭐⭐ WHY A background-image AND NOT A MASK, unlike the tier chip. A mask would
   cut the disc itself into a paw shape and lose the pale circle. Here the disc
   stays and the paw sits ON it, so the paw is a background IMAGE layered over
   the background COLOUR.
   ⚠️ The consequence: the colour is BAKED INTO the SVG (#395EA1, her Dark Blue)
   and cannot follow `currentColor` the way the masked paw does. ⛔ To recolour
   it you must edit the data URI, not a variable.

   ⭐ Same paw geometry as `_furfinds-paw.scss`, from her Lovable PawIcon. */
.view-term-tiles a::before {
  background-color: #deeff9;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23395EA1'><ellipse cx='20' cy='22' rx='6' ry='8'/><ellipse cx='44' cy='22' rx='6' ry='8'/><ellipse cx='10' cy='36' rx='5' ry='7'/><ellipse cx='54' cy='36' rx='5' ry='7'/><path d='M32 30c-9 0-16 7-16 14a8 8 0 0 0 8 8c3 0 5-2 8-2s5 2 8 2a8 8 0 0 0 8-8c0-7-7-14-16-14z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56%; }

/* THE BLOG CARD IMAGES — made to fit the card, 2026-08-23
--------------------------------------------------

   Her report: the images are too big and do not fit the card under them.

   ⭐ THE CAUSE. The view renders `field_featured_image` as a full MEDIA ENTITY,
   so what lands in the card is Drupal's own markup with hard width and height
   attributes on the img — `width="504" height="336"`. Nothing was constraining
   it, so in any card narrower than 504px the picture simply ran over the edge.

   ⭐⭐ THE BOX MATCHES THE IMAGE STYLE, 3:2, because the style Drupal serves here
   is `3_2_504x336`. That is the same lesson as the business detail hero earlier
   today: ⛔ do NOT reach for `block-size: 100%` on the img. It resolves against
   the media entity's own wrappers, which are auto height, so it does nothing.
   ⭐ Match the ratio and `inline-size: 100%` with `block-size: auto` fills the
   box exactly, with nothing cropped.
   ⚠️ If the image style ever changes, change this ratio with it.

   ⚠️ `.card-img-top` is a `<span>` here, so it needs `display: block` before any
   of this applies.

   ⭐ This is really a TEMPLATE concern — every First Light build has a blog with
   the same card view. ➡️ Worth lifting into the template on the rebuild. */
.view-blog .card-img-top {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem; }
  .view-blog .card-img-top img {
    inline-size: 100%;
    block-size: auto;
    display: block; }

/* THE BLOG CARD "READ MORE" — added 2026-08-23
--------------------------------------------------

   Her question: a small "read more" at the bottom, or just the title link?

   ⭐⭐ BOTH, AND WITHOUT A SECOND LINK. The affordance is drawn in CSS and the
   TITLE link is stretched over the whole card. So a visitor sees something to
   click and can click anywhere, while the page still has exactly ONE link per
   card, carrying the post's real title.

   ⚠️ WHY NOT A REAL "Read more" LINK. A listing of them reads out as "read more,
   read more, read more" to a screen reader with nothing to tell them apart. The
   business teaser solves the same problem by marking its CTA `aria-hidden` and
   `tabindex="-1"` — ⛔ but those attributes cannot be set from a Views field, so
   here the affordance is decorative and there is no duplicate to hide.

   ⭐ STRETCHED LINK IS SAFE HERE, and it is NOT on the business teaser. That
   card has city and category links inside it, and a stretched link would cover
   them. ⛔ A blog card has no other links. ⚠️ If one is ever added, this has to
   change. */
.view-blog {
  /* The affordance. ⛔ Decorative: it is a pseudo-element, so it is not a link
     and adds nothing for a screen reader to trip over. */ }
  .view-blog .card {
    position: relative; }
  .view-blog .card-title a {
    text-decoration: none;
    color: #080D17;
    /* The whole card becomes the target. */ }
    .view-blog .card-title a::after {
      content: "";
      position: absolute;
      inset: 0; }
    .view-blog .card-title a:hover, .view-blog .card-title a:focus-visible {
      color: #395EA1; }
  .view-blog .card-body::after {
    content: "Read more";
    display: block;
    margin-block-start: 1rem;
    color: #395EA1;
    font-size: 0.875rem;
    font-weight: 600; }
  .view-blog .card:hover .card-body::after,
  .view-blog .card:focus-within .card-body::after {
    text-decoration: underline; }
  .view-blog .card-text {
    color: #4D6EAA;
    font-size: 0.875rem;
    line-height: 1.55; }

/* ⭐⭐ REPORT AN ISSUE, 26 Aug. Her client's comp puts a small panel directly
   under the contact card, flag icon, linking to the site's contact form.
   ⭐ It picks up $shadow-soft from the card rule above by being listed there, so
   it sits beside the facts card as a matching object rather than a stray link.
   ⛔ Deliberately quieter than the facts card: no heading, muted text, and it
   only takes on the accent colour on hover. It is a safety valve, ⛔ not a call
   to action competing with the listing itself. */
/* ⛔ No margin here. The grid row-gap in _business.scss does the spacing, and a
   margin on top of it double-counted. */
.business-detail__report {
  border-radius: var(--bs-border-radius, 0.5rem);
  background: #ffffff; }

.business-detail__report-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1rem;
  font-size: .9375rem;
  /* ⚠️ Muted, not $ink. This row should read as available rather than urgent. */
  color: #4D6EAA;
  text-decoration: none;
  border-radius: inherit;
  transition: color .15s ease-in-out, background-color .15s ease-in-out; }
  .business-detail__report-link:hover, .business-detail__report-link:focus-visible {
    color: #395EA1;
    background: rgba(57, 94, 161, 0.06);
    text-decoration: none; }

.business-detail__report-icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto; }

/* ⭐⭐ THE BLUE BAND BEHIND THE PANELS, 26 Aug. Her client's comp puts About,
   Pet policy, Contact and Report an issue on a pale blue field, so the white
   cards read as cards. ⛔ The area behind the IMAGE stays as it was — her note
   was that the band differs from the colouring behind the image.

   ⚠️ THIS RULE LIVES HERE, ⛔ not in _business.scss, because $ff-footer-bg is
   DEFINED in this file and business imports BEFORE chrome. Same trap the tier
   partial already documents; putting it there fails the build.

   ⭐ Full-bleed via padding rather than a wrapper element, so no extra markup is
   needed and the grid inside keeps its own width. */
.business-detail__body {
  background: #e5f5fd;
  padding: 2rem;
  border-radius: 1rem; }

@media (max-width: 767.98px) {
  .business-detail__body {
    padding: 1.25rem; } }
/* 🔴 CALL NOW IS HER LIGHT BLUE, NOT A TINT OF THE NAVY. Fixed 26 Aug: it was
   `mix($primary, #fff, 16%)`, and 16% of #395EA1 lands around #E1E6EF, which
   reads GREY rather than blue. Her words: "looks like a greyish background not
   the light blue."
   ⭐ $ff-sky-soft (#b2dffa) is the actual light blue in her palette.
   ⚠️ THIS LIVES HERE, ⛔ not in _business.scss, because $ff-sky-soft is DEFINED
   in this file and business imports BEFORE chrome. Same trap as the tier and
   band rules.
   🔴 The LABEL stays $primary. Navy on #b2dffa clears AA; white on it does not. */
.business-detail__action--soft {
  background: #b2dffa;
  border-color: #b2dffa;
  color: #395EA1; }
  .business-detail__action--soft:hover, .business-detail__action--soft:focus-visible {
    background: #8ccff8;
    border-color: #8ccff8;
    color: #395EA1; }

/* ⭐ LAST. It has to beat the old single-CTA rule in _sections.scss. */
/* FURFINDS: THE MAIN NAVIGATION — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ FURFINDS ONLY. Do NOT copy back into First Light.
   ⭐ Imported LAST, after furfinds-chrome, because it has to beat the older
   single-CTA rule in _sections.scss (`.header-cta__link, .region-header-form a`)
   which paints every header link solid $primary. ⛔ Do not move it up.

   ⚠️⚠️ WHY THE BUTTONS ARE MATCHED BY href AND NOT BY CLASS. The two header
   buttons live in the `flight_header_cta` BASIC BLOCK, so the client can edit
   the words and the destinations without a developer. Its text format,
   `content_format`, allows `<a href>` and ⛔ strips `class`, so a class typed
   into that block never survives rendering. ➡️ The href is the only stable hook.
   ⭐ The shared rule below still gives ANY link in that region the button shape,
   so if she repoints one of them it stays a button and simply loses its fill.
*/
/* THE DROPDOWN — her ask, 2026-08-23: "the hover and active link need to be the
   lighter blue."

   ⚠️ Barrio puts `.dropdown-item` on the <li>, ⛔ NOT on the <a>, so Bootstrap's
   own hover never reaches the link. The padding is moved off the li and onto
   the anchor so the whole row is the target and the wash fills it edge to edge.

   🔴 THE LIGHT BLUE IS THE BACKGROUND, ⛔ NEVER THE TEXT. Her Light Blue is
   1.85:1 and _palettes.scss already rules it "fills only, carries INK type,
   never white." As a wash behind ink it is fine; as link text it would be
   unreadable. */
.navbar-nav .dropdown-menu .dropdown-item {
  padding: 0;
  background: none; }
.navbar-nav .dropdown-menu a {
  display: block;
  padding: .45rem 1.1rem;
  color: #080D17;
  text-decoration: none;
  /* `is-active` is Drupal's own class on the link for the current path, so
     the active state needs no extra markup. */ }
  .navbar-nav .dropdown-menu a:hover, .navbar-nav .dropdown-menu a:focus-visible, .navbar-nav .dropdown-menu a.is-active {
    background: #88C7E8;
    color: #080D17;
    text-decoration: none; }

/* THE TWO HEADER BUBBLES — Get Verified and Explore.

   ⭐⭐ HER INSTRUCTION, 2026-08-23: "how did we do it on these two color
   bubbles before? that's what we should do again. like explore businesses and
   get verified on the home page."
   ➡️ So these deliberately repeat the FRONT PAGE pair, which is:
       Explore businesses  →  .btn .btn-secondary .shadow-accent
       Get verified        →  .btn .btn-pale .shadow-ghost
   📄 Both recipes are defined in _canvas.scss. ⚠️ The values are repeated here
   rather than @extend-ed because _canvas.scss is imported BEFORE _sections.scss
   and an @extend would be hoisted up to canvas's position, where the old
   _sections rule would beat it. ⛔ If those buttons are ever restyled, change
   them in BOTH places.

   ⭐ Region-wide shape first, then the two fills. */
.region-header-form a {
  display: inline-block;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  font-size: .875rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
  .region-header-form a:hover, .region-header-form a:focus-visible {
    text-decoration: none; }

/* Sit them side by side with a real gap. ⭐ The block's body is a single <p>
   holding both links, so the gap cannot come from a margin on a wrapper. */
.region-header-form p {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0; }

/* GET VERIFIED — the pale one. ⭐ Very Light Blue #D3EEFF with INK type, and a
   Dark-Blue-at-25% edge. ⛔ Literal hex, exactly as _canvas.scss has it: this
   colour is not one of the six palette roles. */
/* ⚠️⚠️ REVERSED 2026-08-24. GET VERIFIED IS NO LONGER A BUBBLE.
   Her words: "we have a bubble around get verified, she does not."
   ⛔ This undoes the 23 Aug instruction directly above, which asked for BOTH to
   repeat the home page pair. ⭐ Two filled bubbles side by side competed and
   neither read as primary; with only Explore filled, the hierarchy is obvious
   and it matches Kashmere's comp.
   ⭐ "keep it darker that's good" — so it stays $ink, ⛔ not the menu grey.
   ⭐ The padding and radius from the shared `.region-header-form a` rule stay,
   which is what keeps it optically aligned with the Explore pill beside it. */
.region-header-form a[href="/apply"] {
  background: transparent;
  border-color: transparent;
  color: #080D17;
  box-shadow: none; }
  .region-header-form a[href="/apply"]:hover, .region-header-form a[href="/apply"]:focus-visible {
    background: transparent;
    border-color: transparent;
    color: #080D17;
    text-decoration: underline; }

/* EXPLORE — the light blue one. ⭐ $secondary IS her Light Blue #88C7E8, which
   is why the front page uses .btn-secondary and why there is no `accent`
   variant. ⚠️ The shadow is Dark Blue, ⛔ not a tint of the button: her Light
   Blue is too pale to cast a visible shadow of its own. */
.region-header-form a[href="/explore"] {
  background: #88C7E8;
  border-color: #88C7E8;
  color: #080D17;
  /* .shadow-accent */
  box-shadow: 0 6px 16px -4px rgba(57, 94, 161, 0.32), 0 2px 6px -2px rgba(57, 94, 161, 0.24); }
  .region-header-form a[href="/explore"]:hover, .region-header-form a[href="/explore"]:focus-visible {
    background: #7db7d5;
    border-color: #7db7d5;
    color: #080D17; }

/* CENTRE THE MENU BETWEEN THE LOGO AND THE TWO BUTTONS — her ask, 2026-08-24
--------------------------------------------------

   "get Verified and Explore are all the way on the right as they should be but
   the rest of the menu should be centered between the logo and the Get
   Verified and Explore."

   ⭐ WHY THE LINKS WERE BUNCHED RIGHT: `.navbar-collapse` carries Barrio's
   `.justify-content-end` and holds BOTH children — the menu AND the two-button
   form — so everything piled up against the right edge.

   ⭐⭐ An auto margin on a flex ITEM beats the container's `justify-content`,
   so this absorbs the free space either side of the menu and centres it in the
   gap. ⛔ Do NOT remove `justify-content-end` from the collapse: it is what
   keeps Get Verified and Explore hard right, which she wants.

   ⚠️ SCOPED TO 1200px because this theme is `navbar-toggleable-xl`, i.e.
   `navbar-expand-xl`. Below that the collapse is a vertical stack and an auto
   inline margin would centre the whole menu column. ⛔ Do not change this to
   992px without changing the theme setting too. */
@media (min-width: 1200px) {
  .navbar-collapse > nav.block-menu {
    margin-inline: auto; } }
/* HEADER MENU COLOUR — her ask, 2026-08-24
--------------------------------------------------

   "They should be gray and ink when they're hovered or active."

   ⭐ SHE SPOTTED IT FROM THE ODD ONE OUT. "Businesses" looked grey next to the
   rest, and grey turned out to be the state she wanted for ALL of them. The
   header menu was showing THREE different colours:
     Home                    rgb(0,0,0)        pure black, because it is active
     Explore/About/Contact   rgb(8,13,23)      $ink
     Businesses              rgba(0,0,0,.65)   Bootstrap's navbar default

   ⚠️ WHY BUSINESSES WAS DIFFERENT: it is a `route:<nolink>` parent for the
   dropdown, so Drupal renders it as a <span>, ⛔ not an <a>. Whatever was
   darkening the anchors never reached it, so it kept Bootstrap's
   `--bs-navbar-color`. ⭐ :hover works on a span, so it needs no special case.

   ⚠️⚠️ $muted WAS TRIED FIRST AND IS WRONG. `_palettes.scss` describes it as
   "a mid neutral", ⛔ but the value #4D6EAA is Dark Blue at 90% and it reads as
   BLUE, not grey. Her verdict: "uh they are blue now."
   ⭐⭐ THE GREY IS `rgba($ink, .75)`, AND IT IS NOT AN ARBITRARY PICK. Her rule,
   2026-08-24: "should be same color as font in heading text (under the
   heading)". That is the hero subhead, measured live at `rgba(8, 13, 23, .75)`.
   ➡️ **The header menu now matches body copy exactly.** ⛔ Do not nudge this
   value on its own — if body copy changes, this follows it.
   ⚠️ rgba($ink, .65) was tried in between and was too light.

   ⚠️ SCOPED to the header menu on purpose. `_furfinds-footer.scss` carries an
   explicit warning that a blanket `.nav-link` rule causes a specificity fight
   with the footer social icons. ⛔ Do not widen this selector.

   ⭐ The dropdown's own children are matched as `.nav-link--apply` etc, with no
   base `.nav-link` class, so they keep the dropdown rules at the top of this
   file and are untouched. */
.navbar-collapse > nav.block-menu {
  /* ⭐ A little air between the items, her note 2026-08-24: "she has a tiny
     bit more spacing between her menu items than we do."
     ⚠️ `gap` on the UL, ⛔ not extra padding on `.nav-link`. Padding would
     enlarge each link's hover and focus target and push the items' underlines
     apart; a gap moves them without changing what is clickable. */
  /* ⭐ 14px, her ask 2026-08-24: "the menu needs all of the font dropped to
     14px". Set on the nav so the dropdown children inherit it too, which is
     what "all of" means. ⭐ It also matches `.region-header-form a`, already
     .875rem, so the header reads as one size. */
  font-size: .875rem; }
  .navbar-collapse > nav.block-menu .navbar-nav {
    gap: .5rem; }
  .navbar-collapse > nav.block-menu .nav-link {
    font-size: inherit;
    color: rgba(8, 13, 23, 0.75); }
    .navbar-collapse > nav.block-menu .nav-link:hover, .navbar-collapse > nav.block-menu .nav-link:focus-visible, .navbar-collapse > nav.block-menu .nav-link.is-active, .navbar-collapse > nav.block-menu .nav-link.active, .navbar-collapse > nav.block-menu .nav-link.show {
      color: #080D17; }

/* FURFINDS: THE /apply PAGE — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ FURFINDS ONLY. Do NOT copy back into First Light.

   ⭐ HER COMP: an eyebrow, a big heading and one line of subtext sitting on a
   soft left-to-right wash that runs the FULL width of the page, with a hairline
   under it, then the application form below.

   ⚠️ /apply is the WEBFORM CANONICAL PAGE (`/webform/list_your_business`), ⛔ not
   a node and ⛔ not a Canvas page. So the banner is built exactly the way the
   /explore banner is: a basic block in the `highlighted` region with a path
   condition. 📄 See "THE /explore BANNER" in _sections.scss — same pattern,
   deliberately.

   🔴 THE CLASSES IN THE BLOCK BODY DO NOT SURVIVE. `content_format` strips
   classes and forbids `h1`, so the banner is styled BY POSITION inside its own
   block, same as the explore one. ⛔ Do not put classes in that body.

   ⭐⭐ WHY `:has()` AND NOT A BODY CLASS. Barrio builds its body class from the
   INTERNAL path, so /apply comes through as `path-webform` — which would also
   catch /contact and every other webform page. ➡️ Keying off the banner block
   itself is exact: the block only renders on /apply, so the band and the hidden
   title can never leak onto another page.

   ⛔⛔ THE "180,000+ PET OWNERS" LINE FROM HER COMP IS DELIBERATELY NOT HERE.
   Her instruction, 2026-08-23: "I would leave the reviewed within 5 days but
   remove the pet owners for now." It is a number Cool Fire cannot stand behind
   on the client's behalf. ⛔ Do not put it back without Kashmere confirming it.
*/
/* THE BAND. ⭐ `.highlighted` is the FULL-WIDTH wrapper and the `.container`
   inside it keeps the text aligned with the rest of the page, so the wash can
   run edge to edge without any 100vw trickery and without a scrollbar. */
.highlighted:has(#block-flight-apply-banner),
.highlighted:has(#block-flight-join-intro) {
  /* ⭐ Both stops are existing tokens from _furfinds-chrome, the same pair the
     page wash and the newsletter band already use. ⛔ No new colours. */
  background-image: linear-gradient(100deg, rgba(178, 223, 250, 0.45) 0%, rgba(255, 255, 255, 0.55) 48%, rgba(253, 248, 237, 0.75) 100%);
  border-block-end: 1px solid rgba(57, 94, 161, 0.12); }
  .highlighted:has(#block-flight-apply-banner) .container,
  .highlighted:has(#block-flight-join-intro) .container {
    padding-block: 3.5rem;
    text-align: center; }

/* THE EYEBROW. Same treatment as the /explore banner's. */
#block-flight-apply-banner .field > p:first-child {
  margin-block-end: .5rem;
  color: #395EA1;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase; }

#block-flight-apply-banner .field > h2 {
  margin-block-end: .75rem; }

/* ⭐⭐ THE HERO HEADING — A PLACE, NOT A CLASS.

   Her note, 2026-08-23: "her font for the heading is 48px ours is 31, too
   small", then "are all the heroes gonna be that size? Maybe we can make a hero
   class or something."

   🔴 A LITERAL CLASS CANNOT WORK HERE. `content_format` strips `class` off
   everything in a block body — the same reason the header CTA buttons are
   matched by href. A class typed into the banner body never arrives.

   ⭐ SO THE REGION IS THE HOOK. `highlighted` is already this theme's banner
   slot, so any basic block placed there gets the hero heading automatically and
   nothing has to be remembered or typed.

   ⚠️ `.field--name-body >` IS LOAD-BEARING. It limits this to a block's BODY
   CONTENT. A block's own visible title renders as `h2.block-title` OUTSIDE the
   body field, so a titled block in this region keeps a normal heading. ⛔ Do not
   loosen this to `.region-highlighted h2`.

   ⚠️ 31px was `$h2-font-size` doing its job. A block-built banner heading has to
   be an `h2` because `content_format` forbids `h1`, so a DISPLAY heading
   inherited a body heading size. ⛔ DO NOT FIX THAT BY RAISING $h2-font-size —
   it would enlarge every h2 on the site.

   ⭐ 3rem IS her 48px. Fluid, so a phone never gets a 48px headline, and it
   simply STOPS at her value; the 2rem floor keeps it from collapsing.
   ⭐ The page keeps a real `h1`, visually hidden, so the document is still
   correct for screen readers and search. */
/* 🔴🔴 IT IS `.highlighted`, ⛔ NOT `.region-highlighted`. FOUND THE HARD WAY 8/23.
   Barrio's `bootstrap_barrio_theme_suggestions_region_alter()` lists `highlighted`
   in its `$nowrap` array, so the region renders through
   `region--nowrap.html.twig`, which prints `{{ content }}` and ⛔ NO WRAPPER AT
   ALL. There is no `.region-highlighted` element on the page, so the first
   version of this rule matched nothing and the heading stayed at 31px.
   ⭐ `.highlighted` is the div in Barrio's own page.html.twig, and it IS there.
   ⚠️ Same trap for `breadcrumb`, `content`, `primary_menu`, `header`,
   `sidebar_first` and `sidebar_second` — all in that same $nowrap list.
   ➡️ ⛔ NEVER assume `.region-<name>` exists in this theme. Check the markup. */
.highlighted .field--name-body > h2 {
  /* ⚠️ calc() is REQUIRED. Sass evaluates the arithmetic inside clamp() itself
     and fails with "Incompatible units: 'rem' and 'vw'" — and ⛔ webpack still
     prints "compiled successfully" while writing that error into the CSS as a
     comment. ⛔ Do not remove the calc, and always grep the built file. */
  font-size: clamp(2rem, calc(5vw + 1rem), 3rem);
  line-height: 1.1; }

/* The subtext. ⭐ Centred and capped, so it breaks into two tidy lines rather
   than running the width of a desktop. */
#block-flight-apply-banner .field > p:last-child {
  max-inline-size: 34rem;
  margin-block: 0 auto;
  margin-inline: auto;
  color: #4D6EAA; }

/* ⚠️ The page title still RENDERS, but hidden from sight, so the page keeps a
   real `h1` for screen readers and search engines — the banner's heading is
   only an `h2`, because `content_format` forbids `h1`.
   ⛔ Do not switch this to `display: none`. Same reasoning as /explore. */
body:has(#block-flight-apply-banner) #block-flight-page-title,
body:has(#block-flight-join-intro) #block-flight-page-title {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  inline-size: 1px;
  block-size: 1px; }

/* THE TWO SIDEBAR CARDS — "What you'll get" and "Standards"
--------------------------------------------------

   ⭐ Her comp puts them in a right-hand column beside the application form.
   ➡️ Built as two basic blocks in `sidebar_second` with the same `/apply` path
   condition as the banner, so Barrio's own grid makes the two-column layout and
   ⛔ no page template override is needed.

   ⭐ COPY IS KASHMERE'S OWN, lifted from her Lovable comp.
   ⚠️⚠️ TWO OF THE FOUR PROMISES ARE NOT BUILT: "Verified review system" (the
   ratings decision is PARKED in Notion, due 8/18) and "Owner dashboard &
   analytics". "map" is not built either. ➡️ They are her claims, not ours, so
   they are reproduced as written — ⛔ but flag them to her before launch rather
   than letting the client publish a promise the MVP does not keep.
   ⭐ CHANGED ON PURPOSE: her comp says "Read full standards in our help center."
   There IS no help centre, so the link points at `/verification`, which is the
   page that actually carries the criteria.

   🔴 Styled by POSITION again — `content_format` strips classes. */
/* 🔴🔴 IT IS `#sidebar_second`, ⛔ NOT `.region-sidebar-second`. Corrected
   2026-08-23 — the first version of this rule NEVER MATCHED ANYTHING.

   Same trap as `.highlighted`: Barrio lists `sidebar_second` in its `$nowrap`
   array, so the region renders through `region--nowrap.html.twig` and emits no
   wrapper of its own. The column comes from `page.html.twig`, which prints
   `sidebar_second_attributes` — `class="sidebar_second sidebar col-…"` and
   `id="sidebar_second"`.
   ⛔ NEVER assume `.region-<name>` exists in this theme. It usually does not. */
#sidebar_second:has(#block-flight-apply-benefits) {
  /* 🔴🔴 THE GAP HAS TO GO ON THE `<aside>`, ⛔ NOT ON THIS COLUMN.
     Corrected 2026-08-23 after the cards were STILL touching bottom to top.

     `page.html.twig` puts the blocks inside a wrapper:
         <div id="sidebar_second"><aside class="section">…blocks…</aside></div>
     So `#sidebar_second` has exactly ONE child, the aside. Making IT a flex
     column with a gap does nothing at all — there is nothing to space.
     ⭐ The two blocks are children of the ASIDE. */
  /* ⭐ A margin as well as the gap, deliberately. If the wrapper markup ever
     changes again the cards still will not touch. ⛔ Belt and braces on purpose,
     this is the third selector this sidebar has needed. */ }
  #sidebar_second:has(#block-flight-apply-benefits) > aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; }
  #sidebar_second:has(#block-flight-apply-benefits) .block + .block {
    margin-block-start: 1.5rem; }
  #sidebar_second:has(#block-flight-apply-benefits) > aside > .block + .block {
    margin-block-start: 0; }
  #sidebar_second:has(#block-flight-apply-benefits) .block {
    padding: 1.75rem;
    border-radius: 1.25rem;
    /* Her soft shadow token, ⛔ not a grey one. */
    box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18); }
  #sidebar_second:has(#block-flight-apply-benefits) h2 {
    margin-block-end: 1rem;
    font-size: 1.25rem; }

/* CARD ONE is white and lifts off the page wash. */
#block-flight-apply-benefits {
  background: #ffffff; }
  #block-flight-apply-benefits ul {
    margin: 0;
    padding: 0;
    list-style: none; }
  #block-flight-apply-benefits li {
    position: relative;
    padding-inline-start: 1.75rem;
    margin-block-end: .75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    /* ⭐ The SAME CSS tick the tier cards use, so there is one tick in this
       theme and not two. 📄 _sections.scss, .field--name-field-tier-points.
       🔴 The tick is $primary, ⛔ NOT $accent: her Light Blue is 1.85:1 and a
       non-text graphic still needs 3:1 to be seen. */ }
    #block-flight-apply-benefits li:last-child {
      margin-block-end: 0; }
    #block-flight-apply-benefits li::before {
      content: "";
      position: absolute;
      inset-inline-start: .25rem;
      inset-block-start: .4em;
      inline-size: .5rem;
      block-size: .28rem;
      border-inline-start: 2px solid #395EA1;
      border-block-end: 2px solid #395EA1;
      transform: rotate(-45deg); }

/* CARD TWO is the pale blue one in her comp. ⭐ Very Light Blue #D3EEFF, the
   same literal `.btn-pale` uses — it is not one of the six palette roles. */
#block-flight-apply-standards {
  background: #D3EEFF; }
  #block-flight-apply-standards p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55; }

/* THE APPLICATION CARD
--------------------------------------------------

   ⭐ Her comp puts the form in a white rounded card with a soft shadow, sitting
   on the page wash, with the two sidebar cards beside it.

   ⚠️ Scoped with `:has(#block-flight-apply-banner)` for the same reason the band
   is: Barrio's body class comes from the INTERNAL path, so /apply arrives as
   `path-webform` and would drag /contact and every other webform in with it.
   ➡️ Keying off the banner block is exact — it only renders on /apply.

   ⛔ The card is put on the FORM, not on the content block, so the hidden page
   title stays outside it. Otherwise the card would carry an invisible 1px-tall
   element at the top and open with a gap nobody could explain. */
body:has(#block-flight-apply-banner) {
  /* A phone has no room for 2.5rem of padding on both sides. */
  /* BREATHING ROOM UNDER THE BAND — her ask, 2026-08-23: "about 40-50 px above
     both the form and the blocks to the right".

     🔴🔴 THIS USED TO SAY `.region-content` AND DID NOTHING. `content` is in
     Barrio's `$nowrap` array too, exactly like `highlighted` and
     `sidebar_second`, so **`.region-content` does not exist**. The real element
     is `#content`, from `content_attributes` in page.html.twig.
     ⛔ That is the fourth time this markup assumption has bitten in one evening.

     ⭐ 3.5rem is 56px. She first asked for 40–50, saw 44px and said her comp
     still had more air, so this moves toward her design rather than stopping at
     the number. ⛔ Was 2.75rem; that is the value to go back to.
     ⭐ Both columns get it, so the form and the cards start on the same line.
     ⛔ Putting it on only one leaves them visibly out of step.

     ⭐⭐ MARGIN, NOT PADDING — changed 2026-08-23, and she was right to question
     it. This is space BETWEEN the band and the columns, which is what margin is
     for. It was padding first, which works only because these columns have no
     background of their own. ⚠️ The moment one gets a background or a border,
     padding would put the gap INSIDE it and look wrong. Margin cannot.
     ⛔ Margins do not collapse here: these are flex items in a row. */ }
  body:has(#block-flight-apply-banner) .webform-submission-list-your-business-form {
    padding: 2.5rem;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18);
    /* ⭐ The intro paragraph is the card's opening line, so it gets the same
       muted treatment as the sidebar copy rather than looking like body text
       that wandered in. */ }
    body:has(#block-flight-apply-banner) .webform-submission-list-your-business-form .webform-element--type-webform-markup p {
      margin-block-end: 1.75rem;
      color: #4D6EAA;
      font-size: 0.875rem;
      line-height: 1.55; }
  @media (max-width: 575.98px) {
    body:has(#block-flight-apply-banner) .webform-submission-list-your-business-form {
      padding: 1.5rem; } }
  body:has(#block-flight-apply-banner) #content,
  body:has(#block-flight-apply-banner) #sidebar_second {
    margin-block-start: 3.5rem; }

/* THE CONFIRMATION PAGE
--------------------------------------------------

   ⚠️ It is its OWN ROUTE — `/webform/list_your_business/confirmation`, ⛔ NOT
   `/apply`. That is why the hero band and the hidden-title rule above do not
   reach it, and why her first look at it was Drupal's bare default: the webform
   title, "New submission added to List your business", and a "Back to form"
   link on the empty page wash.

   ⛔ THE /apply HERO IS DELIBERATELY NOT REUSED HERE. It says "Become FurFinds
   verified", which is the wrong thing to tell somebody who has just applied.
   ⭐ The page title carries it instead — the webform's `confirmation_title` is
   now "Application received", so the h1 does the work and the card carries what
   happens next.

   ⭐ Same card as the application form, so finishing the form does not dump the
   applicant onto a page that looks like a different site. */
.webform-confirmation {
  max-inline-size: 42rem;
  margin-block: 2rem 3rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18);
  /* The first line is the answer to "did it work?", so it is bigger and it is
     ink rather than muted. Everything under it is detail. */
  /* "Submit another business" reads as an action, so it gets the pale bubble
     rather than sitting there as a bare blue link.
     📄 Same recipe as .btn-pale + .shadow-ghost in _canvas.scss. */ }
  .webform-confirmation p {
    margin-block-end: 1rem;
    color: #4D6EAA;
    font-size: 0.875rem;
    line-height: 1.6; }
  .webform-confirmation .webform-confirmation__lead {
    color: #080D17;
    font-size: 1.125rem;
    line-height: 1.4; }
  .webform-confirmation p:last-of-type {
    margin-block-end: 0; }
  .webform-confirmation__back {
    margin-block-start: 1.75rem; }
  .webform-confirmation__back a {
    display: inline-block;
    padding: .375rem .75rem;
    border: 1px solid rgba(57, 94, 161, 0.25);
    border-radius: 1rem;
    background: #D3EEFF;
    box-shadow: 0 4px 12px -3px rgba(8, 13, 23, 0.18), 0 1px 4px -1px rgba(8, 13, 23, 0.12);
    color: #080D17;
    font-size: .875rem;
    text-decoration: none; }
    .webform-confirmation__back a:hover, .webform-confirmation__back a:focus-visible {
      background: #88C7E8;
      border-color: rgba(57, 94, 161, 0.35);
      color: #080D17;
      text-decoration: none; }
  @media (max-width: 575.98px) {
    .webform-confirmation {
      padding: 1.5rem; } }

/* THE /join PAGE — pet owner signup, added 2026-08-23
--------------------------------------------------

   ⭐ `/join` is a PATH ALIAS onto `/user/register`, Drupal's own form. There is
   no custom form and there should not be — core already validates, mails and
   protects it, and honeypot is switched on for `user_register_form`.

   ⭐ The band and the hidden page title are shared with /apply above, keyed on
   this block instead. ⭐ The hero heading needs nothing: the
   `.highlighted .field--name-body > h2` rule is generic and already covers it.

   ⚠️ REGISTRATION IS OPEN TO VISITORS as of 2026-08-23, with email verification.
   ⛔ Not admin approval — that would make Kashmere hand-approve every pet owner.

   🔴 THE COPY DELIBERATELY PROMISES NOTHING. An account currently does nothing
   except exist: writing stories is not built. ⛔ Do not add "write reviews" or
   "save favourites" to this page until those features ship. Same rule as the
   /apply "What you'll get" card, which was trimmed for exactly this reason. */
body:has(#block-flight-join-intro) #user-register-form {
  max-inline-size: 34rem;
  margin-block: 2.5rem 3rem;
  padding: 2.5rem;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18); }
  body:has(#block-flight-join-intro) #user-register-form .description {
    color: #4D6EAA;
    font-size: 0.875rem; }
  @media (max-width: 575.98px) {
    body:has(#block-flight-join-intro) #user-register-form {
      padding: 1.5rem; } }

/* WHEN THE SIDEBAR DROPS UNDER THE FORM — set to 1000px, 2026-08-23
--------------------------------------------------

   Her ask: the two cards should go to the bottom "at around 998px to 1000px".

   ⚠️ THEY WERE DROPPING AT 768px, AND THAT IS THE PROBLEM. Barrio builds the
   sidebar width from a theme setting as **`col-md-3`**, so the cards sat beside
   the form all the way down to Bootstrap's `md` breakpoint. A three-column
   sidebar at 800px is far too narrow to read, which is exactly what she saw.

   ⭐ Rather than change the theme setting — which would move EVERY sidebar on
   the site — this forces both columns to full width below her number. The
   stacking ORDER already works: Barrio puts `order-first` on the content and
   `order-last` on the sidebar at every breakpoint, so the form stays on top.

   ⭐ 999.98px, not 1000px, so it cannot overlap a `min-width: 1000px` rule and
   leave a one-pixel window where both or neither apply.

   ⚠️ Scoped with `:has()` to the /apply cards, so ⛔ no other sidebar on the
   site changes behaviour. */
@media (max-width: 999.98px) {
  body:has(#block-flight-apply-benefits) #content,
  body:has(#block-flight-apply-benefits) #sidebar_second {
    flex: 0 0 100%;
    max-inline-size: 100%; } }
/* FURFINDS: THE FOOTER COLUMNS — CLIENT-SPECIFIC
--------------------------------------------------

   ⛔⛔ FURFINDS ONLY. Do NOT copy back into First Light.
   ⭐ Imported LAST so it beats both `_footer.scss` and the chrome section.

   ⭐⭐ HER LAYOUT, 2026-08-23:
       branding + tagline + social + Log in   |   DISCOVER   |   COMPANY
   DISCOVER  = Home · Explore · Businesses
   COMPANY   = About Us · Contact Us · Privacy policy · Terms & Conditions
   ⭐ Log in stays under the social icons in the LEFT column. Her call:
   "you had account and login underneath the social icons that's better anyway."

   ⚠️ THE STRUCTURE CHANGED, ⛔ NOT JUST THE CSS. The footer used to render the
   MAIN menu, which is why Home, Explore, Businesses, About Us, Contact Us and
   Login all piled into one column. ➡️ A new `footer_discover` menu now feeds
   Discover, the `footer` menu feeds Company, and `flight_footer_main_nav` is
   DISABLED, ⛔ not deleted.

   🔴🔴 THE ONE CSS BUG, AND IT IS A BOOTSTRAP UTILITY FIGHT.
   `_footer.scss` already says `.site-footer .nav { flex-direction: column }`,
   which is right. But the Company menu renders through Barrio's
   `menu_columns` component, whose markup carries `class="nav flex-row"`, and
   Bootstrap's `.flex-row` utility is `flex-direction: row !important`.
   ➡️ `!important` beats any specificity, which is why Privacy policy and Terms
   & Conditions sat SIDE BY SIDE on one line instead of stacking.
   ⛔ Do not try to win this with a longer selector. It needs !important back.
*/
.site-footer .nav.flex-row {
  flex-direction: column !important;
  gap: .35rem; }

/* THE COLUMN TYPE SIZE — her ask, 2026-08-23: "can we also make the footer font
   smaller? 14 pixels. For those columns. and the headers right."

   ⭐ 14px is `$font-size-sm`, an existing token. ⛔ Not a new value.

   ⚠️ THE HEADINGS GO TO 14px TOO, but they keep their uppercase, their letter
   spacing and their weight. That is what preserves the hierarchy once the size
   difference is gone — a 14px caps label still reads as a label next to 14px
   sentence-case links. ⛔ Do not also strip the caps or the columns turn into
   one undifferentiated list.

   ⚠️ `!important` on the links is NOT decoration. `_footer.scss` carries a
   documented specificity fight over `.site-footer .menu--social .nav-link`
   (0-3-0), and the chrome section adds more. This is imported last and states
   the size once, for every footer column, rather than adding a fourth
   competing selector. */
/* 🔴🔴 SCOPED 2026-08-23 AFTER IT BROKE THE SOCIAL ICONS.

   The first version of this said `.site-footer .nav-link` with !important, and
   it silently destroyed the social row: those links hide their LABEL with
   `font-size: 0` (see _social-icons.scss) and draw the logo as a `::before`
   mask. Forcing 14px back onto them un-hid every label, so the footer showed
   "InstagramTwitterFacebookYouTube" run together with no icons.

   ⛔ So this must NEVER be a blanket `.nav-link` rule. It names the two menu
   columns and the account link, which is all she actually asked to resize.
   ⚠️ Add a new footer menu and it needs adding here too. That is the cost of
   naming them, and it is worth paying to keep the social row safe. */
.site-footer .menu--footer .nav-link,
.site-footer .menu--footer-discover .nav-link,
.site-footer .menu--account a {
  font-size: 0.875rem !important; }
.site-footer h2 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase; }

/* THE THREE /about CARD ICONS — shield, heart, compass. Added 2026-08-23
--------------------------------------------------

   ⭐ From her Lovable comp, pasted by her: lucide shield-check, heart and
   compass. All three sit above the card heading at 24px in the primary colour,
   which is `size-6 text-primary` in her markup.

   ⚠️⚠️ THESE ARE STROKE ICONS, ⛔ NOT SOLID LIKE THE PAW. A mask still works,
   because a mask reads the ALPHA channel and a stroke has alpha. But the SVG
   inside the data URI must carry a real `stroke="black"` — `currentColor` has
   no meaning inside a mask and would render nothing at all.
   ⭐ The visible colour then comes from `background-color`, so the icon still
   follows the palette.

   ⚠️ HOW THE THREE ARE TOLD APART. The Canvas cards are identical in markup,
   so each one needs a class typed into its **Custom Classes** field:
       ff-icon-shield   → the Trust card
       ff-icon-heart    → the Warmth card
       ff-icon-compass  → the Discovery card
   ⛔ Deliberately NOT `:nth-child()`. Reordering the row in Canvas would
   silently give the wrong card the wrong icon, and nothing would look broken.

   ⭐ The class goes on the CARD; the icon is drawn on `.card-body::before` so it
   sits inside the padding, above the heading. */
.ff-icon-shield .card-body::before,
.ff-icon-heart .card-body::before,
.ff-icon-compass .card-body::before {
  content: "";
  display: block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-end: .75rem;
  background-color: #395EA1;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain; }

.ff-icon-shield .card-body::before {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>"); }

.ff-icon-heart .card-body::before {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/></svg>"); }

.ff-icon-compass .card-body::before {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z'/></svg>"); }

/* ⭐⭐ SECTION BANDS, 26 Aug. Her client's About comp alternates full-width
   bands: a pale blue field behind Our mission and Our vision, then WHITE behind
   the founder story, so the two sections read as separate parts of the page.

   ⚠️ HOW SHE APPLIES THESE. Type the class into the WRAPPER component's
   "Custom classes" field in Canvas. Same pattern as ff-icon-shield and friends.
       ff-band-blue   → the mission and vision section
       ff-band-white  → the founder story section
   ⛔ Deliberately NOT :nth-child or an id. Reordering sections in Canvas would
   silently move the colours and nothing would look broken.

   🔴 FULL-BLEED WAS TRIED AND REVERTED, 26 Aug. `margin-inline: calc(50% - 50vw)`
   assumes the band's parent is centred on the VIEWPORT. Here it is not: the
   chain is `#main.container > .row.row-offcanvas > main.col > section.section`,
   and Bootstrap's column gutters mean 50% is half the CONTENT box, not half the
   window. The band and everything in it shifted left. Her words: "it shifted
   everything over to the left including the blue band box."
   ⛔ Do not reach for `100vw`, `left: 50%` or `transform: translateX(-50%)`
   either — they all resolve against the same off-centre containing block.
   ➡️ So the band stays INSIDE the container, exactly like
   `.business-detail__body`, which is the same treatment and already works. */
.ff-band-blue,
.ff-band-white {
  padding: 3rem;
  border-radius: 1rem; }
  @media (max-width: 767.98px) {
    .ff-band-blue,
    .ff-band-white {
      padding: 1.5rem; } }

.ff-band-blue {
  background: #e5f5fd; }

.ff-band-white {
  background: #fff; }

/* ⭐ NO BORDER ON THE ABOUT CARDS, her ask 26 Aug: the comp shows a soft shadow
   and no outline on Our mission and Our vision.
   ⚠️ Setting `border-color` alone is NOT enough — Bootstrap's `.card` reserves a
   1px border, so a transparent ring still pushes the shadow out and reads as a
   faint outline. ⛔ The WIDTH has to go. Exactly the same fight the tier cards
   had on 24 Aug, documented further up this file's sibling in chrome. */
.ff-band-blue .card,
.ff-band-white .card {
  border-width: 0;
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18); }

/* ⭐⭐ THE FOUNDER PHOTO, 26 Aug. Type `ff-founder-photo` into the image
   component's Custom classes in Canvas.

   🔴 A MAX-HEIGHT WAS TRIED FIRST AND DID NOTHING. Her source photo is
   LANDSCAPE, so the column width was already the limiting dimension and the cap
   never came into play. Her words: "its way too short, it made it wider than
   high." ⛔ No height cap can make a wide image tall.
   ➡️ So the box is given a PORTRAIT aspect ratio and the photo is cropped to
   fill it, which is what her client's comp actually shows.

   ⚠️ `object-position: top` is doing real work. `cover` crops from the centre by
   default, and on a portrait box that trims the top and bottom — which takes the
   top of someone's head off. Anchoring to the top keeps the face.
   ⛔ Do NOT add a `max-block-size` alongside the aspect-ratio. That is the exact
   combination `.business-detail__media` documents as collapsing the box.
   ➡️ 4/5 is the shape. Change that one value to make it taller or squarer. */
.ff-founder-photo img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  border-radius: 1rem; }

.ff-founder-photo {
  inline-size: 100%; }

/* FURFINDS ICON CARDS — the shared `ff-icon-*` set
--------------------------------------------------

   ⭐⭐ THE PATTERN. Claude defines a class here, SHE types it into a Canvas
   component's "Custom classes" field. The icon is drawn on `.card-body::before`
   so it sits inside the card padding, above the heading.

   ⚠️ ⛔ Deliberately NOT `:nth-child()`. Reordering a row in Canvas would
   silently give the wrong card the wrong icon and nothing would look broken.

   ⚠️⚠️ THESE ARE STROKE ICONS. A mask reads the ALPHA channel, and a stroke has
   alpha, so masking works — but the SVG inside the data URI must carry a real
   `stroke='black'`. ⛔ `currentColor` has no meaning inside a mask and renders
   nothing at all. The visible colour then comes from `background-color`.

   📄 The original three (shield, heart, compass) are in _furfinds-about.scss
   from 23 Aug. ⏳ Worth moving them here so the whole set lives in one place.
*/
/* ⭐ Added 26 Aug for the /verification "How verification works" cards, from her
   client's Lovable comp: lucide file-check, users and circle-check.
       ff-icon-file-check    → 1. Apply
       ff-icon-users         → 2. Review
       ff-icon-check-circle  → 3. Get listed

   ⚠️ These are LIGHTER than the About trio on purpose. Her comp draws the step
   icons in a soft blue rather than the heading navy, so they read as supporting
   marks. ⛔ Do not "fix" them to $primary for consistency — the About icons are
   the ones that carry weight, these are not. */
.ff-icon-file-check .card-body::before,
.ff-icon-users .card-body::before,
.ff-icon-check-circle .card-body::before {
  content: "";
  display: block;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-block-end: 1rem;
  background-color: #92a6cb;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain; }

.ff-icon-file-check .card-body::before {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='m9 15 2 2 4-4'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='m9 15 2 2 4-4'/></svg>"); }

.ff-icon-users .card-body::before {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }

.ff-icon-check-circle .card-body::before {
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>"); }

/* ⚠️ AFTER 'furfinds-chrome', which is where $shadow-soft and $shadow-card are
   defined. Reading them from an earlier partial fails the build. */
/* THE SIMPLE TIER CARD — the Canvas component, 27 Aug
--------------------------------------------------

   ⭐ Pairs with components/tier-card-simple/. The card SHAPE only. The paw
   circle, the chip pill and the tier colours all come from _furfinds-tiers.scss
   through the shared `tier-card` and `tier-card__chip` classes, so ⛔ none of
   that is repeated here.

   ⚠️ WHY THE SHAPE HAS TO BE REDECLARED. On the home page the white card, its
   padding, radius and shadow are NOT on `.tier-card` at all — they are on
   `.view-tier-cards .views-row`, the row wrapper the view puts around each term
   (_sections.scss for padding and radius, _furfinds-chrome.scss for the
   shadow). A hand placed component has no views-row, so it would render as bare
   text on the page background. ➡️ The same values are set here on the card
   itself, using the SAME tokens, ⛔ not copied numbers.

   ⚠️ THIS FILE MUST BE IMPORTED AFTER 'furfinds-chrome'. `$shadow-soft` is
   DEFINED there, and Sass fails the whole build with "Undefined variable" if a
   partial that reads it is imported first. Same trap _furfinds-tiers.scss
   already documents for $ff-sky-deep and $ff-footer-bg. */
.tier-card--simple {
  /* ⛔⛔ NO PAW CIRCLE. Her correction, 27 Aug: "there's not supposed to be a
     pole in the top in the circle. that's not supposed to be there."
     `.tier-card::before` in _furfinds-tiers.scss draws a 3.5rem disc with a paw
     in it, and this card inherits it purely by reusing the `tier-card` class.
     ⚠️ Her comp has NO circle on the tier cards — only the chip, the heading and
     the paragraph. The circles in that screenshot belong to the STEP cards
     lower down the page, which are a different set.
     ⭐ `content: none` rather than `display: none`, so the pseudo element is
     never generated at all. ⛔ Do NOT remove it from _furfinds-tiers.scss — the
     HOME page cards keep their circle. */
  padding: 1.75rem 1.5rem;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18);
  /* ⛔ border-WIDTH, not border-colour. Bootstrap's card reserves the 1px
     either way and the reserved ring pushes the shadow out and reads as a faint
     outline. Her fight on 24 Aug, twice: "remove the border and make sure the
     shadow is visible on each card". */
  border: 0;
  /* ⭐ Matches the view's hover exactly: a LIFT, not a scale. Scaling resamples
     the text and it goes soft. */
  transition: box-shadow .2s ease, transform .2s ease;
  /* ⭐ HER SIZES, 27 Aug: "Text should be 14 pixels. Headings should be 20."
     ⚠️ SCOPED TO `--simple` ON PURPOSE. `.tier-card__name` is shared with the
     GENERATED home page cards, and she asked for those to stay exactly as they
     are. ⛔ Do NOT lift these onto `.tier-card__name` itself.
     ⭐ Written in px because postcss-pxtorem converts font-size to rem at build
     time (rootValue 16), which is this theme's convention. ⛔ Do not hand
     convert. 20px becomes 1.25rem, 14px becomes .875rem. */
  /* ⭐ HER ASK 27 Aug: "i need to color it gray The text muted color."
     `$muted` is #4D6EAA, the palette's "Secondary text and hairlines" token —
     Dark Blue at 90% on white, which reads as a warm grey rather than a blue.
     ✅ 5.09:1 on the white card, so it clears WCAG AA for body text.
     ⛔ Only the paragraph. The heading stays $ink, so the card keeps a hierarchy
     instead of going flat. */
  /* The paragraph is the last thing in this card, unlike the generated one
     which ends in the Explore link. ⛔ Its default bottom margin would sit
     inside the padding and read as a lopsided card. */ }
  .tier-card--simple::before {
    content: none; }
  .tier-card--simple:hover {
    box-shadow: 0 22px 48px -16px rgba(57, 94, 161, 0.38), 0 6px 14px -6px rgba(57, 94, 161, 0.22);
    transform: translateY(-3px); }
  .tier-card--simple .tier-card__name {
    font-size: 20px;
    line-height: 1.3; }
  .tier-card--simple .tier-card__text {
    font-size: 14px;
    line-height: 1.5;
    color: #4D6EAA; }
  .tier-card--simple .tier-card__text:last-child {
    margin-block-end: 0; }

/* ⛔ Respect a reduced-motion preference, same as the generated cards. The
   shadow still changes, so the hover is never invisible. */
@media (prefers-reduced-motion: reduce) {
  .tier-card--simple {
    transition: box-shadow .2s ease; }

  .tier-card--simple:hover {
    transform: none; } }
/* THE STEP CARD — the Canvas component, 27 Aug
--------------------------------------------------

   ⭐ Pairs with components/step-card/. The card SHAPE only. The ICONS come from
   _furfinds-icon-cards.scss through the shared `ff-icon-*` classes, so ⛔ none of
   the mask data URIs are repeated here.

   ⚠️ Same reason as the simple tier card: a hand-placed component has no
   `.views-row` wrapper, so the white card, padding, radius and shadow have to be
   set on the component itself.

   ⚠️ THIS FILE MUST BE IMPORTED AFTER 'furfinds-chrome', where $shadow-soft and
   $shadow-card are defined. Sass fails the build otherwise. */
.step-card {
  padding: 1.75rem 1.5rem;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 10px 24px -10px rgba(57, 94, 161, 0.3), 0 2px 6px -3px rgba(57, 94, 161, 0.18);
  /* ⛔ border-WIDTH, not border-colour — the reserved 1px ring pushes the shadow
     out and reads as a faint outline. Her fight on 24 Aug. */
  border: 0;
  transition: box-shadow .2s ease, transform .2s ease;
  /* ⚠️ `.card-body` exists ONLY as the hook `_furfinds-icon-cards.scss` draws the
     icon on. ⛔ It must not add padding of its own, or the card would be padded
     twice. */
  /* ⭐ Matching the simple tier card, her spec 27 Aug: headings 20px, text 14px.
     ⭐ px on purpose — postcss-pxtorem converts at build time. */
  /* ⭐ Matched to the simple tier card, her ask 27 Aug. `$muted` is #4D6EAA, the
     palette's "Secondary text and hairlines" token. ✅ 5.09:1 on the white card,
     clears WCAG AA for body text. ⛔ Paragraph only — the heading stays $ink. */ }
  .step-card .card-body {
    padding: 0; }
  .step-card .step-card__title {
    font-size: 20px;
    line-height: 1.3; }
  .step-card .step-card__text {
    font-size: 14px;
    line-height: 1.5;
    color: #4D6EAA; }
  .step-card .step-card__text:last-child {
    margin-block-end: 0; }
  .step-card:hover {
    box-shadow: 0 22px 48px -16px rgba(57, 94, 161, 0.38), 0 6px 14px -6px rgba(57, 94, 161, 0.22);
    transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .step-card {
    transition: box-shadow .2s ease; }

  .step-card:hover {
    transform: none; } }
/* THE CTA PANEL — the Canvas component, 27 Aug
--------------------------------------------------

   ⭐ Pairs with components/cta-panel/. The pale blue closing panel from her
   /verification comp: centred heading, a line of text, one button.

   ⭐ The background is `$ff-footer-bg`, the SAME value `ff-band-blue` paints in
   _furfinds-about.scss, so a page built with bands and a page built with this
   component cannot drift apart. ⛔ Do not introduce a second blue.

   ⚠️ MUST BE IMPORTED AFTER 'furfinds-chrome', where $ff-footer-bg is defined. */
.cta-panel {
  padding: 3rem;
  border-radius: 1rem;
  background: #e5f5fd;
  text-align: center;
  /* ⭐ Same mobile padding as the bands, so the two never look different at
     phone width. */
  /* ⭐ Sizes deliberately larger than the cards. This is the closing ask, not a
     supporting card, so it is allowed to be the loudest thing in the section.
     ⭐ px on purpose — postcss-pxtorem converts at build time. */
  /* ⭐ The pill, from her comp. `.btn-primary` already carries the Dark Blue,
     which clears 6.38:1 against white text, so only the shape is set here. */
  /* ⛔ The button is the last thing in the panel, so its own bottom spacing has
     to come off or the panel looks bottom-heavy. */ }
  @media (max-width: 767.98px) {
    .cta-panel {
      padding: 1.5rem; } }
  .cta-panel .cta-panel__heading {
    margin-block-end: .75rem;
    font-size: 28px;
    line-height: 1.25; }
  .cta-panel .cta-panel__text {
    margin-block-end: 1.5rem;
    font-size: 16px;
    line-height: 1.5;
    /* ⚠️ NOT $muted here. The cards sit on white where $muted clears 4.5:1, but
       this text sits on the pale blue band, where the same colour drops below
       it. ⛔ Do not "match the cards" — $ink is the safe answer on a tint.
       Same reasoning as the tier chip labels in _furfinds-tiers.scss. */
    color: #080D17; }
  .cta-panel .cta-panel__button {
    border-radius: 999px;
    padding-inline: 2rem;
    padding-block: .75rem; }
  .cta-panel > :last-child {
    margin-block-end: 0; }

/*# sourceMappingURL=style.css.map */