/* ==========================================================================
   Fruscio — Shared components
   The design-system vocabulary that more than one template needs: page hero,
   breadcrumb, filter bar, feature grid, split panels, timeline, CTA band, plus
   the editorial patterns of the inner-page canvases (steps, governance,
   partnership models, case studies, FAQ, pills, gallery, contact hub, form
   card and the event calendar).

   Loaded on every request, after main.css. Sections 1-10 and the logo-wall
   modifiers moved here verbatim from shop.css, which now holds only the rules
   that are genuinely WooCommerce-specific.

   Source of truth: the design canvases in the Fruscio design project.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE HERO — the only page header in the theme

   Every entry point opens with this component: the homepage, the eight page
   templates, the article, the shop, a product taxonomy, a single product, the
   archives, the search results and the 404. There used to be three of them —
   `.fr-hero` on the home, `.fr-phero` on the templates and `.fr-page-head` on
   everything else — each with its own column, its own padding and its own
   headline scale. That is why no two pages lined up.

   ONE GRID. The copy sits in `.fr-wrap`, inside a column of
   `--fr-phero-measure`, anchored to the bottom, with a fixed rhythm between
   the trail, the badge, the headline, the lead and the buttons. Every slot is
   optional and carries its own top margin, so a hero without a badge keeps
   the same spacing as one with it.

   ONE SCALE. A single `clamp()` for the headline, multiplied by
   `--fr-phero-step`. The homepage is the same type one step up, not a second
   scale; its padding is the same padding one step up through
   `--fr-phero-pad`. Two sizes that cannot drift apart, because there is only
   one number to change.

   ONE TREATMENT. The same photograph opacity, the same gradient and the same
   bottom radius wherever a hero carries an image.

   `--fr-phero-offset` is the room the fixed header needs above the copy. It
   is declared in main.css next to the header it describes.
   -------------------------------------------------------------------------- */
.fr-phero {
  --fr-phero-step: 1;         /* headline multiplier */
  --fr-phero-pad: 1;          /* vertical padding multiplier */
  --fr-phero-min: 0px;        /* floor height */
  --fr-phero-measure: 900px;  /* the one copy column */

  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--fr-phero-min);
  overflow: hidden;
  background: var(--fr-navy);
  color: var(--fr-on-dark);
  border-radius: 0 0 var(--fr-r) var(--fr-r);
}

.fr-phero > .fr-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

.fr-phero__inner {
  max-width: var(--fr-phero-measure);
  padding-block:
    calc(var(--fr-phero-offset) + 44px * var(--fr-phero-pad))
    calc(52px * var(--fr-phero-pad));
}

/* The rhythm, stated once and nowhere else. */
.fr-phero .fr-crumbs { padding-top: 0; }
.fr-phero__badge { margin-top: 18px; }
.fr-phero h1 { margin-top: 18px; }
.fr-phero__lead { margin-top: 20px; }
.fr-phero__ctas { margin-top: 30px; }
.fr-phero__inner > :first-child { margin-top: 0; }

/* Two label-sized lines in a row: the trail ended 3px above the badge, while
   everything else in the stack is spaced 18px or more. */
.fr-crumbs + .fr-phero__badge { margin-top: 12px; }

.fr-phero h1 {
  font-size: calc(clamp(40px, 6.5vw, 84px) * var(--fr-phero-step));
  line-height: .94;
  color: var(--fr-white);
}

.fr-phero h1 .fr-hl { color: var(--fr-lime); }

.fr-phero__lead {
  max-width: calc(var(--fr-phero-measure) * .7);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.5;
  color: var(--fr-on-dark-soft);
}

.fr-phero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The two sizes. `--display` is the homepage; everything else is the default.
   The floor is read with max() rather than set twice, so a display hero that
   also carries an image keeps the taller of the two whatever order the
   modifiers are written in. */
.fr-phero--display {
  --fr-phero-step: 1.38;
  --fr-phero-pad: 1.6;
  --fr-phero-min: 660px;
}

.fr-phero--image { min-height: max(var(--fr-phero-min), 480px); }

/* The photograph, treated the same way at both sizes. */
.fr-phero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
}

.fr-phero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 20, 40, .5) 0%,
    rgba(0, 20, 40, .5) 55%,
    rgba(0, 20, 40, .86) 100%);
}

.fr-phero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fr-on-dark);
}

.fr-phero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fr-lime);
}

/* --------------------------------------------------------------------------
   2. BREADCRUMB
   -------------------------------------------------------------------------- */
.fr-crumbs {
  padding-top: 18px;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.fr-crumbs a { color: var(--fr-gray-500); }
.fr-crumbs a:hover { color: var(--fr-navy); }
.fr-crumbs .fr-crumbs__sep { margin: 0 8px; opacity: .6; }

.fr-phero .fr-crumbs,
.fr-phero .fr-crumbs a { color: var(--fr-on-dark-soft); }
.fr-phero .fr-crumbs a:hover { color: var(--fr-white); }
.fr-phero .fr-crumbs strong { color: var(--fr-lime); font-weight: 500; }

/* The last crumb is the full product title, which on a phone turned the trail
   into a three-line block above the heading that repeats it. It gets one line
   and an ellipsis instead. */
@media (max-width: 599px) {
  .fr-crumbs strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

/* --------------------------------------------------------------------------
   3. STICKY FILTER BAR
   -------------------------------------------------------------------------- */
.fr-filters {
  position: sticky;
  top: 78px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: rgba(249, 250, 247, .92);
  backdrop-filter: blur(10px);
}

.fr-filters__label {
  margin-right: 4px;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.fr-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fr-chip {
  display: inline-block;
  padding: 8px 15px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--fr-gray-700);
  cursor: pointer;
  transition: var(--fr-t);
}

.fr-chip:hover { border-color: var(--fr-navy); color: var(--fr-navy); }

.fr-chip.is-on {
  background: var(--fr-navy);
  border-color: var(--fr-navy);
  color: var(--fr-white);
}

.fr-filters__count {
  margin-left: auto;
  font-family: var(--fr-label);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

/* --------------------------------------------------------------------------
   4. FEATURE GRID
   -------------------------------------------------------------------------- */
.fr-feats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 640px) { .fr-feats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fr-feats--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .fr-feats--3 { grid-template-columns: repeat(3, 1fr); } }

.fr-feat {
  padding: 28px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-card);
}

.fr-feat__num {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--fr-green-deep);
}

.fr-feat h2,
.fr-feat h3 { margin-top: 12px; font-size: 19px; color: var(--fr-navy); }

.fr-feat p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fr-gray-700);
}

/* --------------------------------------------------------------------------
   5. INFO GRID (summary strip)
   -------------------------------------------------------------------------- */
/* The strip is data-driven: a product contributes between one and nine facts.
   A fixed four-column track left the unused cells showing the 1px separator
   colour as flat grey boxes, so the columns follow the number of facts and the
   separators are drawn by the cells themselves. */
.fr-infogrid {
  display: grid;
  /* One fact per row on a phone: at two columns a long place name wrapped to
     four lines against a two-word neighbour. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  overflow: hidden;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
}

@media (min-width: 700px) { .fr-infogrid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.fr-infogrid__i {
  padding: 24px;
  background: var(--fr-card);
  border-top: 1px solid var(--fr-line);
  border-left: 1px solid var(--fr-line);
  margin: -1px 0 0 -1px;
}

.fr-infogrid__l {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.fr-infogrid__i b {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fr-navy);
}

/* --------------------------------------------------------------------------
   6. SPLIT, PANELS AND CHECKLIST
   -------------------------------------------------------------------------- */
.fr-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
  align-items: stretch;
}

@media (min-width: 900px) {
  .fr-split { grid-template-columns: 1fr 1fr; }
  .fr-split--wide { grid-template-columns: 1.2fr .8fr; }
}

.fr-panel {
  padding: 40px;
  border-radius: var(--fr-r);
  background: var(--fr-cream);
}

@media (min-width: 768px) { .fr-panel { padding: 52px; } }
@media (max-width: 599px) { .fr-panel { padding: 28px 24px; } }

/* Cream is the base ground; the modifier is declared so all four tones are
   selectable by name and none of them is a class with no rule behind it. */
.fr-panel--cream { background: var(--fr-cream); }
.fr-panel--navy { background: var(--fr-navy); color: var(--fr-white); }
.fr-panel--ink { background: var(--fr-ink); color: var(--fr-white); }

.fr-panel h2 {
  margin-top: 12px;
  font-size: clamp(28px, 3.6vw, 46px);
  color: var(--fr-navy);
}

.fr-panel--navy h2,
.fr-panel--ink h2 { color: var(--fr-white); }

.fr-panel__lead {
  margin-top: 18px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fr-gray-700);
}

.fr-panel--navy .fr-panel__lead,
.fr-panel--ink .fr-panel__lead { color: var(--fr-on-dark-soft); }

.fr-panel__lead > * + * { margin-top: 14px; }
.fr-panel__lead ul { padding-left: 20px; }

.fr-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) { .fr-checks { grid-template-columns: 1fr 1fr; } }

.fr-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-card);
}

.fr-check__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fr-green-deep);
  color: var(--fr-white);
  font-size: 13px;
}

.fr-check span:last-child { font-size: 15px; color: var(--fr-ink); }

/* --------------------------------------------------------------------------
   8. CTA BAND
   -------------------------------------------------------------------------- */
.fr-ctaband {
  padding: 56px 40px;
  border-radius: var(--fr-r);
  background: var(--fr-ink);
  color: var(--fr-white);
  text-align: center;
}

@media (min-width: 768px) { .fr-ctaband { padding: 72px 56px; } }
@media (max-width: 599px) { .fr-ctaband { padding: 40px 24px; } }

.fr-ctaband h2 {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(30px, 4vw, 52px);
  color: var(--fr-white);
}

.fr-ctaband h2 .fr-hl { color: var(--fr-lime); }

.fr-ctaband p {
  max-width: 560px;
  margin: 16px auto 0;
  font-size: 17px;
  color: var(--fr-on-dark-soft);
}

.fr-ctaband__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.fr-timeline {
  position: relative;
  margin-top: 10px;
  padding-left: 34px;
}

.fr-timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--fr-line);
}

.fr-timeline__item {
  position: relative;
  padding-bottom: 30px;
}

.fr-timeline__item:last-child { padding-bottom: 0; }

.fr-timeline__item::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fr-paper);
  border: 3px solid var(--fr-green);
}

.fr-timeline__when {
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--fr-green-deep);
}

.fr-timeline__item h3 {
  margin-top: 6px;
  font-size: 20px;
  color: var(--fr-navy);
}

.fr-timeline__item p {
  margin-top: 6px;
  max-width: 70ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fr-gray-700);
}

/* --------------------------------------------------------------------------
   10. LOGO WALL ON A DARK PANEL
   -------------------------------------------------------------------------- */
.fr-panel--navy .fr-eyebrow { color: var(--fr-lime); }
.fr-panel--navy .fr-logowall { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
.fr-panel--navy .fr-logowall__cell { background: rgba(250, 248, 241, .08); }
.fr-panel--navy .fr-logowall__cell:hover { background: rgba(250, 248, 241, .16); }
.fr-panel--navy .fr-logowall__cell img { filter: grayscale(1) brightness(2); opacity: .75; }
.fr-panel--navy .fr-logowall__cell:hover img { filter: none; opacity: 1; }
.fr-panel--navy .fr-logowall__cell span { color: var(--fr-on-dark-mute); }
.fr-panel--navy .fr-logowall__cell:hover span { color: var(--fr-white); }

/* --------------------------------------------------------------------------
   11. STATEMENT (centred quote on a dark ground)
   -------------------------------------------------------------------------- */
.fr-statement {
  padding: 64px 40px;
  border-radius: var(--fr-r);
  background: var(--fr-ink);
  color: var(--fr-white);
  text-align: center;
}

@media (max-width: 599px) { .fr-statement { padding: 40px 24px; } }

.fr-statement .fr-eyebrow { color: var(--fr-lime); }

.fr-statement__quote {
  max-width: 960px;
  margin: 20px auto 0;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.fr-statement__quote .fr-hl { color: var(--fr-lime); }

/* The same quote type, inside a panel. */
.fr-panel__quote {
  margin-top: 22px;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--fr-navy);
}

.fr-panel--navy .fr-panel__quote,
.fr-panel--ink .fr-panel__quote { color: var(--fr-white); }
.fr-panel--green .fr-panel__quote { color: var(--fr-white); }
.fr-panel__quote .fr-hl { color: var(--fr-lime); }
/* Lime is 3:1 short on the deep green and navy sinks into it; sand holds 4.5:1. */
.fr-panel--green .fr-hl { color: var(--fr-sand); }
.fr-panel--ink .fr-eyebrow { color: var(--fr-lime); }

/* Green panel and centred panel, used by the editorial pages. */
.fr-panel--green { background: var(--fr-green-deep); color: var(--fr-white); }
.fr-panel--green h2 { color: var(--fr-white); }
.fr-panel--green .fr-panel__lead { color: #EEF4E2; }
.fr-panel--green .fr-eyebrow { color: #EEF4E2; }

.fr-panel--center { max-width: 900px; margin-inline: auto; text-align: center; }
.fr-panel--center .fr-panel__lead { margin-inline: auto; }

.fr-panel__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.fr-panel--center .fr-panel__ctas { justify-content: center; }

/* A contact line under a panel's copy: label over a bold value. */
.fr-panel__contact {
  margin-top: 24px;
  font-size: 14px;
  color: var(--fr-gray-700);
}

.fr-panel__contact + .fr-panel__contact { margin-top: 14px; }
.fr-panel__contact b { color: var(--fr-navy); }

.fr-panel--navy .fr-panel__contact,
.fr-panel--ink .fr-panel__contact,
.fr-panel--green .fr-panel__contact { color: var(--fr-on-dark-soft); }

.fr-panel--navy .fr-panel__contact b,
.fr-panel--ink .fr-panel__contact b,
.fr-panel--green .fr-panel__contact b { color: var(--fr-white); }

/* Image side of a split. */
.fr-split__ph {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--fr-r);
  background: var(--fr-cream);
}

.fr-split__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A features column inside a split aligns to the top, not stretched. */
.fr-split .fr-feats,
.fr-split .fr-checks { align-content: start; }

/* --------------------------------------------------------------------------
   12. FEATURE TINTS
   The four card colours of the design, cycled by the feature grid.
   -------------------------------------------------------------------------- */
.fr-feat--lime { background: var(--fr-lime); border-color: transparent; }
.fr-feat--lime .fr-feat__num { color: var(--fr-navy); }
.fr-feat--lime h2,
.fr-feat--lime h3 { color: var(--fr-navy); }
.fr-feat--lime p { color: #3A4A1A; }

.fr-feat--navy {
  background: linear-gradient(158deg, #003A73, #00284D);
  border-color: transparent;
}

.fr-feat--navy .fr-feat__num { color: var(--fr-lime); }
.fr-feat--navy h2,
.fr-feat--navy h3 { color: var(--fr-white); }
.fr-feat--navy p { color: var(--fr-on-dark-soft); }

.fr-feat--sage { background: var(--fr-sage); border-color: transparent; }
.fr-feat--cream { background: var(--fr-cream); border-color: transparent; }

/* --------------------------------------------------------------------------
   13. STEPS
   -------------------------------------------------------------------------- */
.fr-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 640px) { .fr-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fr-steps--4 { grid-template-columns: repeat(4, 1fr); } }

.fr-step {
  position: relative;
  padding: 28px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-card);
}

.fr-step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-size: 16px;
  font-weight: 800;
}

.fr-step h3 { margin-top: 16px; font-size: 18px; color: var(--fr-navy); }

.fr-step p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fr-gray-700);
}

/* --------------------------------------------------------------------------
   14. GOVERNANCE
   Four roles, each on its own ground: the reading order is the hierarchy.
   -------------------------------------------------------------------------- */
.fr-gov {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 760px) { .fr-gov { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fr-gov { grid-template-columns: repeat(4, 1fr); } }

.fr-gov__g {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  padding: 28px;
  border-radius: var(--fr-r-sm);
}

.fr-gov__role {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Stated, not inherited: theme.json prints `h1 … h6 { color: navy }` into the
   page as global styles, and a direct rule on the element wins over any
   inherited colour. See the same note on `.fr-pcard h3`. */
.fr-gov__g h3 { margin-top: 6px; font-size: 22px; color: var(--fr-white); }

.fr-gov__g p { margin-top: 12px; font-size: 14px; line-height: 1.5; }

.fr-gov__g--a { background: var(--fr-navy); color: var(--fr-white); }
.fr-gov__g--a .fr-gov__role { color: var(--fr-lime); }
.fr-gov__g--a p { color: var(--fr-on-dark-soft); }

.fr-gov__g--b { background: var(--fr-green-deep); color: var(--fr-white); }
.fr-gov__g--b .fr-gov__role,
.fr-gov__g--b p { color: #EEF4E2; }

.fr-gov__g--c { background: var(--fr-cream); }
.fr-gov__g--c .fr-gov__role { color: var(--fr-green-deep); }
.fr-gov__g--c h3 { color: var(--fr-navy); }
.fr-gov__g--c p { color: var(--fr-gray-700); }

.fr-gov__g--d { background: var(--fr-card); border: 1px solid var(--fr-line); }
.fr-gov__g--d .fr-gov__role { color: var(--fr-green-deep); }
.fr-gov__g--d h3 { color: var(--fr-navy); }
.fr-gov__g--d p { color: var(--fr-gray-700); }

/* --------------------------------------------------------------------------
   15. PARTNERSHIP MODELS
   -------------------------------------------------------------------------- */
.fr-models {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 760px) { .fr-models { grid-template-columns: 1fr 1fr; } }

.fr-model {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
  transition: transform var(--fr-t);
}

.fr-model:hover { transform: translateY(-4px); }

.fr-model__k {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--fr-green-deep);
}

.fr-model h3 { margin-top: 12px; font-size: 26px; color: var(--fr-navy); }

.fr-model p {
  flex: 1;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fr-gray-700);
}

.fr-model__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-navy);
}

.fr-model:hover .fr-model__go { color: var(--fr-green-deep); }

.fr-model--hl {
  background: linear-gradient(158deg, #003A73, #00284D);
  border-color: transparent;
}

.fr-model--hl .fr-model__k { color: var(--fr-lime); }
.fr-model--hl h3 { color: var(--fr-white); }
.fr-model--hl p { color: var(--fr-on-dark-soft); }
.fr-model--hl .fr-model__go,
.fr-model--hl:hover .fr-model__go { color: var(--fr-lime); }

/* --------------------------------------------------------------------------
   16. CASE STUDIES
   -------------------------------------------------------------------------- */
.fr-cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 760px) { .fr-cases { grid-template-columns: repeat(3, 1fr); } }

.fr-case {
  overflow: hidden;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
  transition: transform var(--fr-t);
}

.fr-case:hover { transform: translateY(-4px); }

.fr-case__ph {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fr-cream);
}

.fr-case__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fr-case__body { padding: 26px; }

.fr-case__brand {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-green-deep);
}

.fr-case h3 {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--fr-navy);
}

.fr-case p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fr-gray-700);
}

.fr-case__res {
  margin-top: 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--fr-navy);
}

.fr-case__res small {
  font-size: 13px;
  font-weight: 400;
  color: var(--fr-gray-500);
}

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.fr-faq { border-top: 1px solid var(--fr-line); }

.fr-faq details {
  padding: 22px 4px;
  border-bottom: 1px solid var(--fr-line);
}

.fr-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 19px;
  font-weight: 700;
  color: var(--fr-navy);
  cursor: pointer;
  list-style: none;
}

.fr-faq summary::-webkit-details-marker { display: none; }

.fr-faq summary::after {
  content: "+";
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--fr-green-deep);
}

.fr-faq details[open] summary::after { content: "\2013"; }

.fr-faq__a a { text-decoration: underline; text-underline-offset: 3px; }

.fr-faq__a {
  max-width: 68ch;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fr-gray-700);
}

.fr-faq__a > * + * { margin-top: 12px; }

/* --------------------------------------------------------------------------
   18. PILL ROW
   -------------------------------------------------------------------------- */
.fr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fr-pill {
  display: inline-block;
  padding: 11px 18px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: var(--fr-card);
  font-size: 14px;
  font-weight: 600;
  color: var(--fr-navy);
}

.fr-pill--lime { background: var(--fr-lime); border-color: transparent; }
.fr-pill--navy { background: var(--fr-navy); border-color: transparent; color: var(--fr-white); }
.fr-pill--green { background: var(--fr-green-deep); border-color: transparent; color: var(--fr-white); }

/* --------------------------------------------------------------------------
   19. GALLERY
   -------------------------------------------------------------------------- */
.fr-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fr-gap);
}

@media (min-width: 760px) { .fr-gallery--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .fr-gallery--3 { grid-template-columns: repeat(3, 1fr); } }

.fr-gallery__g {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--fr-r-sm);
  background: var(--fr-cream);
}

.fr-gallery__g img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fr-t);
}

a.fr-gallery__g:hover img { transform: scale(1.04); }

.fr-gallery__note {
  padding: 12px;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fr-gray-500);
}

/* --------------------------------------------------------------------------
   20. CONTACT HUB
   -------------------------------------------------------------------------- */
.fr-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
}

@media (min-width: 640px) { .fr-hub { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fr-hub--4 { grid-template-columns: repeat(4, 1fr); } }

.fr-hubcard {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 30px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
  transition: var(--fr-t);
}

.fr-hubcard:hover { transform: translateY(-4px); border-color: var(--fr-green); }

.fr-hubcard__k {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--fr-green-deep);
}

.fr-hubcard h3 { margin-top: 10px; font-size: 22px; color: var(--fr-navy); }

.fr-hubcard p {
  flex: 1;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fr-gray-700);
}

.fr-hubcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-navy);
}

.fr-hubcard:hover .fr-hubcard__go { color: var(--fr-green-deep); }

/* --------------------------------------------------------------------------
   21. FORM CARD
   The rules target Contact Form 7's own markup, so the plugin keeps handling
   validation, spam and the Flamingo record while the design stays ours.
   -------------------------------------------------------------------------- */
.fr-formcard {
  padding: 40px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
}

@media (min-width: 768px) { .fr-formcard { padding: 52px; } }
@media (max-width: 599px) { .fr-formcard { padding: 28px 24px; } }

.fr-formcard .fr-field { margin-bottom: 18px; }

.fr-formcard label,
.fr-formcard .fr-field > label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fr-gray-700);
}

.fr-formcard input[type="text"],
.fr-formcard input[type="email"],
.fr-formcard input[type="tel"],
.fr-formcard input[type="url"],
.fr-formcard select,
.fr-formcard textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  background: var(--fr-white);
  font-family: var(--fr-font);
  font-size: 15px;
  color: var(--fr-ink);
  transition: border-color var(--fr-t);
}

.fr-formcard input:focus,
.fr-formcard select:focus,
.fr-formcard textarea:focus { outline: 2px solid var(--fr-navy); outline-offset: 1px; border-color: var(--fr-navy); }

.fr-formcard textarea { min-height: 130px; resize: vertical; }

.fr-formcard .fr-frow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 640px) { .fr-formcard .fr-frow { grid-template-columns: 1fr 1fr; } }

.fr-formcard .fr-consent,
.fr-formcard .wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0 18px;
  font-size: 13px;
  color: var(--fr-gray-700);
}

.fr-formcard .wpcf7-acceptance .wpcf7-list-item { margin-left: 0; }

.fr-formcard input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--fr-green);
}

.fr-formcard .wpcf7-acceptance label,
.fr-formcard .wpcf7-list-item-label {
  margin: 0;
  font-family: var(--fr-font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fr-gray-700);
}

.fr-formcard .wpcf7-acceptance label a,
.fr-formcard .wpcf7-list-item-label a { text-decoration: underline; text-underline-offset: 3px; }

/* Submit button: the design's accent pill. */
.fr-formcard input[type="submit"],
.fr-formcard button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--fr-r-pill);
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--fr-t);
}

.fr-formcard input[type="submit"]:hover,
.fr-formcard button[type="submit"]:hover {
  background: var(--fr-navy);
  color: var(--fr-white);
  transform: translateY(-2px);
}

/* Contact Form 7 feedback messages. */
.fr-formcard .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #C0392B;
}

.fr-formcard .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-sm);
  font-size: 14px;
}

.fr-formcard form.sent .wpcf7-response-output { border-color: var(--fr-green); }
.fr-formcard form.invalid .wpcf7-response-output,
.fr-formcard form.failed .wpcf7-response-output { border-color: #C0392B; }

.fr-formcard .wpcf7-spinner { margin-left: 10px; }

/* No form plugin configured yet: say so in the editor, not in a broken form. */
.fr-formcard__missing {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fr-gray-700);
}

/* --------------------------------------------------------------------------
   22. EVENT CALENDAR (list of event products)
   -------------------------------------------------------------------------- */
.fr-evgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-gap);
  margin-top: 20px;
}

@media (min-width: 600px) { .fr-evgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fr-evgrid { grid-template-columns: repeat(3, 1fr); } }

.fr-evgrid__empty {
  grid-column: 1 / -1;
  padding: 40px;
  border: 1px dashed var(--fr-line);
  border-radius: var(--fr-r);
  text-align: center;
  color: var(--fr-gray-700);
}

.fr-evcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r);
  background: var(--fr-card);
  transition: transform var(--fr-t);
}

.fr-evcard:hover { transform: translateY(-4px); }

.fr-evcard__ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--fr-cream);
}

.fr-evcard__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fr-evcard__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fr-evcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.fr-evcard__date {
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fr-green-deep);
}

.fr-evcard h3 {
  margin-top: 8px;
  font-size: 23px;
  line-height: 1.1;
  color: var(--fr-navy);
}

.fr-evcard__loc { margin-top: 6px; font-size: 14px; color: var(--fr-gray-700); }

.fr-evcard__disc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.fr-evcard__disc span {
  padding: 3px 10px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  font-size: 11px;
  color: var(--fr-gray-700);
}

.fr-evcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--fr-line);
}

.fr-evcard__foot { margin-top: 18px; }

.fr-evcard__price {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.fr-evcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fr-navy);
}

.fr-evcard:hover .fr-evcard__go { color: var(--fr-green-deep); }

/* Featured event: fills the first row. */
.fr-evfeat {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: var(--fr-r);
  background: linear-gradient(158deg, #003A73, #00284D);
  color: var(--fr-white);
}

@media (min-width: 820px) { .fr-evfeat { grid-template-columns: 1.15fr .85fr; } }

.fr-evfeat__ph { position: relative; aspect-ratio: 16 / 10; }

@media (min-width: 820px) {
  .fr-evfeat__ph { aspect-ratio: auto; min-height: 340px; }
}

.fr-evfeat__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fr-evfeat__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-lime);
  color: var(--fr-navy);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fr-evfeat__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

@media (min-width: 820px) { .fr-evfeat__body { padding: 48px; } }
@media (max-width: 599px) { .fr-evfeat__body { padding: 28px 24px; } }

.fr-evfeat__k {
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fr-lime);
}

.fr-evfeat__date {
  margin-top: 16px;
  font-family: var(--fr-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fr-lime);
}

.fr-evfeat h2 {
  margin-top: 10px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
  color: var(--fr-white);
}

.fr-evfeat__loc { margin-top: 10px; font-size: 15px; color: var(--fr-on-dark-soft); }

.fr-evfeat p {
  max-width: 420px;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fr-on-dark-soft);
}

.fr-evfeat__disc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.fr-evfeat__disc span {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--fr-r-pill);
  font-size: 12px;
  color: var(--fr-on-dark-soft);
}

.fr-evfeat__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   23. SMALL PARTS
   -------------------------------------------------------------------------- */
/* Registered-trademark mark in a hero headline, set as a superscript. */
.fr-phero__reg {
  font-size: .35em;
  vertical-align: super;
  color: var(--fr-lime);
}

/* A closing line under a feature grid, set in quote type. */
.fr-feats__note {
  margin-top: 30px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--fr-navy);
}

.fr-feats__note .fr-hl { color: var(--fr-green); }

/* Media-first split: the image column leads on desktop, copy still first in
   the source order so the page reads correctly without CSS. */
@media (min-width: 900px) {
  .fr-split--reverse > :first-child { order: 2; }
  .fr-split--reverse > :last-child { order: 1; }
  .fr-split--wide.fr-split--reverse { grid-template-columns: .8fr 1.2fr; }
}

/* A tile standing in for content that is not ready yet (a map, a photo set). */
.fr-ph-note {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 24px;
  border-radius: var(--fr-r);
  background: var(--fr-cream);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fr-gray-500);
}

/* The steps, the timeline and the checklist are ordered/unordered lists in the
   markup — they are sequences, and a screen reader should say how many. Their
   list styling is off because the design numbers them itself. */
.fr-steps,
.fr-timeline,
.fr-checks {
  list-style: none;
  margin-block: 0;
  padding-left: 0;
}

.fr-timeline { padding-left: 34px; }

/* --------------------------------------------------------------------------
   24. TAG CHIPS (fr-ctag)

   Editorial tags on a card: the area, then the content type. Distinct from
   `.fr-chip`, which is the calendar's discipline filter and is a control.
   A tag is not clickable on the card, so it is a span, not a button.

   The tone is a palette slot the editor picked from a closed list, so the
   markup never carries a style attribute.
   -------------------------------------------------------------------------- */
.fr-ctags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fr-ctag {
  display: inline-block;
  padding: 5px 11px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-cream);
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fr-ink);
}

.fr-ctag--green { background: var(--fr-green-deep); color: var(--fr-white); }
.fr-ctag--navy  { background: var(--fr-navy); color: var(--fr-white); }
.fr-ctag--lime  { background: var(--fr-lime); color: var(--fr-ink); }
.fr-ctag--sage  { background: var(--fr-sage); color: var(--fr-navy); }
.fr-ctag--sand  { background: var(--fr-sand); color: var(--fr-ink); }
.fr-ctag--ink   { background: var(--fr-ink); color: var(--fr-on-dark); }

/* --------------------------------------------------------------------------
   25. SCROLL RAIL (fr-rail)

   The wireframes ask for six carousels. CSS does the scrolling: a snap
   container handles touch, trackpad, shift-wheel and arrow keys on its own,
   and tabbing to a card scrolls it into view natively. rails.js only adds the
   buttons, the progress bar and the counter on top of a scroller that already
   works, which is why the controls are hidden until `.fr-js` is set.
   -------------------------------------------------------------------------- */
.fr-rail {
  display: flex;
  gap: var(--fr-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  /* Room for the focus ring of a focused card, which would otherwise clip. */
  padding-block: 4px;
  scrollbar-width: thin;
}

.fr-rail > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* The native bar is the only affordance without JS, so it stays — toned down
   rather than hidden. */
.fr-rail::-webkit-scrollbar { height: 6px; }
.fr-rail::-webkit-scrollbar-thumb {
  border-radius: var(--fr-r-pill);
  background: var(--fr-line);
}

.fr-rail:focus-visible {
  outline: 2px solid var(--fr-navy);
  outline-offset: 4px;
}

.fr-rail--dark .fr-rail:focus-visible,
.fr-rail--dark.fr-rail:focus-visible { outline-color: var(--fr-lime); }

/* Controls: absent until JS says it can drive them. */
.fr-rail__nav { display: none; }

.fr-js .fr-rail__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* Set by rails.js when the row has nothing to scroll. */
.fr-js .fr-rail__nav--idle { display: none; }

/* With the buttons in place the native bar is redundant noise. */
.fr-js .fr-rail { scrollbar-width: none; }
.fr-js .fr-rail::-webkit-scrollbar { height: 0; }

/* The class is named twice on purpose, for the reason spelled out above
   `.fr-btn` in main.css: the Elementor kit paints `.elementor-kit-750 button`
   at (0,1,1) from a stylesheet enqueued after this one, so a bare
   `.fr-rail__btn` at (0,1,0) loses and the arrows come back as filled orange
   rectangles. */
.fr-rail__btn.fr-rail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  background: transparent;
  color: inherit;
  font-family: var(--fr-font);
  cursor: pointer;
  transition: var(--fr-t);
}

.fr-rail__btn.fr-rail__btn:hover:not(:disabled) {
  border-color: currentColor;
  transform: translateY(-1px);
}

.fr-rail__btn.fr-rail__btn:disabled {
  opacity: .35;
  cursor: default;
}

.fr-rail__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.fr-rail__btn--prev svg { transform: rotate(180deg); }

/* The bar is driven by a number, not a width: JS sets --fr-rail-p and the
   transform below is the only place that decides how it looks. */
.fr-rail__bar {
  position: relative;
  flex: 1 1 auto;
  max-width: 240px;
  height: 2px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-line);
  overflow: hidden;
}

.fr-rail__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  transform: scaleX(var(--fr-rail-p, 0));
  transform-origin: left center;
  transition: transform var(--fr-t);
}

.fr-rail__count {
  margin: 0;
  font-family: var(--fr-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: inherit;
}

.fr-rail__count-sep { opacity: .45; padding-inline: 2px; }

/* On a dark ground the hairlines need the on-dark line colour. */
.fr-rail--dark .fr-rail__btn.fr-rail__btn { border-color: rgba(230, 237, 245, .22); }
.fr-rail--dark .fr-rail__bar { background: rgba(230, 237, 245, .22); }
.fr-rail--dark .fr-rail::-webkit-scrollbar-thumb { background: rgba(230, 237, 245, .22); }

@media (prefers-reduced-motion: reduce) {
  .fr-rail { scroll-behavior: auto; }
  .fr-rail__bar::after { transition: none; }
  .fr-rail__btn.fr-rail__btn:hover:not(:disabled) { transform: none; }
}

/* --------------------------------------------------------------------------
   26. CARD ICONS

   The wireframes swap the /01 numbering for an icon on two sections: the
   vision columns and the quick-links row. Same slot, same metrics, so the
   layouts stay interchangeable.
   -------------------------------------------------------------------------- */
.fr-feat__icon,
.fr-hubcard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 18px;
  border-radius: var(--fr-r-pill);
  background: var(--fr-sage);
  color: var(--fr-navy);
}

.fr-feat__icon svg,
.fr-hubcard__icon svg { display: block; }

.fr-feat--navy .fr-feat__icon,
.fr-feat--ink .fr-feat__icon {
  background: rgba(230, 237, 245, .14);
  color: var(--fr-lime);
}

/* The wireframes make the first quick-link dark, so the row reads as a set
   with a lead card rather than four equal tiles. */
.fr-hubcard--dark {
  background: var(--fr-ink);
  color: var(--fr-on-dark);
  border-color: transparent;
}

.fr-hubcard--dark h3 { color: var(--fr-white); }
.fr-hubcard--dark p { color: var(--fr-on-dark-soft); }
.fr-hubcard--dark .fr-hubcard__k { color: var(--fr-lime); }

.fr-hubcard--dark .fr-hubcard__icon {
  background: rgba(230, 237, 245, .14);
  color: var(--fr-lime);
}

.fr-hubcard--dark .fr-hubcard__go { color: var(--fr-lime); }
.fr-hubcard--dark:hover .fr-hubcard__go { color: var(--fr-white); }

/* --------------------------------------------------------------------------
   27. ARTICLE FORMAT (fr-amet, fr-pull, fr-share)

   The article and the case history share one anatomy: the `fr-phero` hero
   above, then the tags and the byline, then the body, then the share rail.
   These rules live here and not in home.css because single.php only loads
   home.css when the post happens to hold a Fruscio block.
   -------------------------------------------------------------------------- */
.fr-amet {
  padding: 22px 0 0;
}

/* The tags and the byline belong to the article, so they take the editorial
   measure `.fr-entry` sets and not the full wrap: at 1440px a full-width row
   leaves them 268px to the left of the first line of body copy. */
.fr-amet__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  max-width: 720px;
  margin-inline: auto;
}

.fr-amet__tags { flex: 0 1 auto; }

.fr-amet__by {
  margin: 0;
  font-family: var(--fr-label);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--fr-gray-500);
}

/* A paragraph the writer made entirely of one emphasised phrase. It reads as
   a pull quote, so it is set like one — but it is still a paragraph, and the
   emphasis inside it keeps its own weight. */
.fr-pull {
  margin: 38px 0;
  padding-left: 20px;
  border-left: 3px solid var(--fr-green);
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.fr-entry .fr-pull,
.fr-entry .fr-pull strong,
.fr-entry .fr-pull em {
  color: var(--fr-navy);
  font-size: inherit;
  line-height: inherit;
}

.fr-entry .fr-pull em { font-style: italic; }

@media (min-width: 820px) {
  .fr-pull { padding-left: 28px; margin: 48px 0; }
}

.fr-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  max-width: 720px;
  margin-top: 44px;
  margin-inline: auto;
  padding-top: 24px;
  border-top: 1px solid var(--fr-line);
}

.fr-share__label {
  margin: 0;
  font-family: var(--fr-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fr-gray-500);
}

.fr-share__list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fr-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-pill);
  color: var(--fr-navy);
  text-decoration: none;
  transition: background var(--fr-t), border-color var(--fr-t), color var(--fr-t);
}

.fr-share__btn:hover,
.fr-share__btn:focus-visible {
  background: var(--fr-navy);
  border-color: var(--fr-navy);
  color: var(--fr-white);
}

/* --------------------------------------------------------------------------
   Page hero — moving backgrounds (article carousel and video)
   Slides stack on the photograph's own rule and crossfade; main.js moves
   `.is-active`. Without JS only the first one shows.
   -------------------------------------------------------------------------- */
.fr-phero__media { position: absolute; inset: 0; }

.fr-phero__slide {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.fr-phero__slide.is-active { opacity: .62; }

/* Doubled for specificity: the Elementor kit paints every `button`. */
.fr-phero__pause.fr-phero__pause {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(10, 18, 32, .5);
  color: var(--fr-white);
  cursor: pointer;
}

.fr-js .fr-phero__pause.fr-phero__pause { display: grid; }
.fr-phero__pause.fr-phero__pause:hover { background: rgba(10, 18, 32, .75); }
.fr-phero__pause:focus-visible { outline: 2px solid var(--fr-lime); outline-offset: 3px; }

.fr-phero__pause-on,
.fr-phero__pause[data-paused] .fr-phero__pause-off { display: none; }
.fr-phero__pause[data-paused] .fr-phero__pause-on { display: inline-flex; }
.fr-phero__pause-off { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .fr-phero__slide { transition: none; }
}