/* Fisar 2027 framework: open hero, inset rails and narrow content gutters. */
/* Layout tokens only. Shared colours are owned by palette-2027.css. */
:root {
  --f27-content-max: 1600px;
  --container-large: var(--f27-content-max);
  --f27-page-gutter: 24px;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
.f27-homepage, .f27-homepage h1, .f27-homepage h2, .f27-bar {
  font-family: "DM Sans", sans-serif;
}
.f27-home {
  --f27-ink: #292c2b;
  --f27-muted: #818580;
  --f27-inner: 1.05rem;
  --f27-nav-height: 4.5rem;
  background: var(--f27-paper);
}
.f27-bar { display: none; }
.f27-home .nav_wrap > .padding-global { display: none; }
.f27-home .nav_wrap { border: 0; }
.f27-home .f27-bar {
  display: block;
  background: var(--f27-paper);
  border-bottom: 1px solid var(--f27-line);
  color: var(--f27-ink);
}
.f27-home .back-top__wrap { display: none; }
.f27-homepage {
  padding-top: var(--f27-nav-height);
  background: var(--f27-paper);
  color: var(--f27-ink);
}
.f27-homepage > .padding-global, .f27-content-frame > .padding-global, .f27-bar > .padding-global { padding-inline: 24px; }
/* One pixel-based section frame for both refreshed and legacy routes. */
html .container-large { width: 100%; max-width: var(--f27-content-max, 1600px); margin-inline: auto; }
@media (max-width: 479px) { :root { --f27-page-gutter: 20px; } }
.f27-content-frame { container-type: inline-size; border-top: 1px solid var(--f27-line); }
/* Post-hero sections own their width, independently of legacy .container-large. */
.f27-content-frame > .padding-global > .f27-section-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}
.f27-rails { position: relative; border-inline: 1px solid var(--f27-line); }
/* Only direct sections own viewport-wide dividers; nested rows keep their rules.
   Container units use the page's available width, excluding any scrollbar. */
.f27-homepage .f27-rails > section { position: relative; border-block: 0; }
.f27-homepage .f27-rails > section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100cqw;
  height: 1px;
  transform: translateX(-50%);
  background: var(--f27-line);
  pointer-events: none;
  z-index: 1;
}
.f27-hero .f27-inner, .f27-bar .f27-inner { padding-inline: 0; }
.f27-inner { padding-inline: var(--f27-inner); }
.f27-bar-inner {
  min-height: calc(var(--f27-nav-height) - 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.f27-brand { display: flex; align-items: center; gap: .65rem; color: #084834; flex: 0 0 auto; }
.f27-brand-icon { display: block; width: 1.2rem; height: 1.85rem; object-fit: contain; }
.f27-wordmark { display: block; width: 4.75rem; height: auto; }
.f27-actions { display: flex; align-items: center; gap: .5rem; }
.f27-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.25rem;
  padding: .45rem .85rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  background: transparent;
  color: inherit;
  font: 400 .875rem/1.2 "DM Sans", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .4s ease, border-color .4s ease;
}
.f27-book { background: #084834; color: #fff; border-color: #084834; }
.f27-menu { border-color: var(--f27-line); }
.f27-control:hover { background: var(--f27-surface-deep); color: var(--f27-ink); }
.f27-book:hover { background: #146149; color: #fff; border-color: #146149; }
/* Login keeps its former hover surface at rest; the keyline marks interaction. */
.f27-login { background: var(--f27-surface-deep); color: #084834; }
.f27-login:is(:hover, :focus-visible) { background: var(--f27-surface); color: #084834; border-color: #084834; }
/* The visible legacy header uses the same surfaces and keeps its text roll. */
.nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"] .btn-icon-content {
  background-color: var(--f27-surface-deep);
  color: #084834;
  border-color: var(--f27-line);
  transition: background-color .4s ease, border-color .4s ease;
}
.nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"] .btn-icon-content__bg { background-color: var(--f27-surface); }
.nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"]:is(:hover, :focus-visible) .btn-icon-content {
  background-color: var(--f27-surface);
  border-color: #084834;
}
.nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"]:focus-visible {
  outline: 2px solid #084834;
  outline-offset: 4px;
}
.nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"]:focus-visible .btn-icon-content__bg { transform: translate(0, 0) rotate(0); }
.nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"]:focus-visible .btn-icon-content__text { transform: translateY(calc(-1 * var(--text-duplicate-distance))); }
.f27-brand:focus-visible,
.f27-control:focus-visible,
.f27-homepage a:focus-visible {
  outline: 2px solid #667465;
  outline-offset: 4px;
}
.f27-skip {
  position: absolute;
  top: .5rem;
  left: 50%;
  transform: translate(-50%, -200%);
  padding: .6rem 1rem;
  background: #292c2b;
  color: white;
  z-index: 2;
}
.f27-skip:focus { transform: translate(-50%, 0); }
.f27-section { padding-block: clamp(3.5rem, 7vw, 7rem); border-bottom: 1px solid var(--f27-line); }
.f27-hero { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(2rem, 4vw, 4rem); border-bottom: 0; }
.f27-label { margin: 0 0 1.75rem; font-size: .75rem; line-height: 1.5; color: var(--f27-muted); letter-spacing: .055em; }
.f27-homepage h1 { max-width: 15ch; margin: 0; font-size: clamp(2.5rem, 4.5vw, 4.75rem); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; }
.f27-homepage h2 { max-width: 23ch; margin: 0; font-size: clamp(1.75rem, 2.4vw, 2.75rem); line-height: 1.2; font-weight: 400; letter-spacing: -.035em; }
.f27-description { margin: 1.25rem 0 0; max-width: 42ch; font-size: 1rem; line-height: 1.6; color: var(--f27-muted); }
.f27-placeholder { margin-top: 3rem; display: grid; place-items: center; min-height: clamp(10rem, 20vw, 20rem); border: 1px solid var(--f27-line); background: var(--f27-surface); color: #858880; font-size: .75rem; }
.f27-section-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
.f27-section-grid > * { min-width: 0; }
.f27-footer { padding-block: 1.75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .75rem; color: var(--f27-muted); }
.f27-footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.f27-footer a { color: inherit; text-decoration: none; }
.f27-footer a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .f27-home { --f27-inner: .9rem; --f27-nav-height: 4.25rem; }
  .f27-section-grid { grid-template-columns: 1fr; gap: .5rem; }
}
@media (max-width: 479px) {
  .f27-home { --f27-inner: .6rem; --f27-nav-height: 4rem; }
  .f27-homepage > .padding-global, .f27-content-frame > .padding-global, .f27-bar > .padding-global { padding-inline: 20px; }
  .f27-bar-inner { gap: .4rem; }
  .f27-brand { gap: .4rem; }
  .f27-brand-icon { width: .95rem; height: 1.45rem; }
  .f27-wordmark { width: 3.5rem; }
  .f27-actions { gap: .15rem; }
  .f27-control { padding-inline: .45rem; min-height: 2.5rem; font-size: .75rem; gap: .3rem; }
  .f27-placeholder { margin-top: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .f27-control,
  .nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"] .btn-icon-content { transition: none; }
}

/* Secondary text-button contract: add .f27-text-button and the existing
   .f27-cta__mask > .f27-cta__text > .f27-cta__duplicate (aria-hidden) layers.
   Do not add .f27-cta: its rising lime fill belongs to primary buttons.
   Repeated class keeps the interaction above later section-specific styles. */
:is(a, button).f27-text-button.f27-text-button {
  position: relative;
  border: 1px solid var(--f27-line, #DEDED7);
  transition: background-color .4s ease, border-color .4s ease;
}
:is(a, button).f27-text-button .f27-cta__mask {
  position: relative;
  display: block;
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5;
}
:is(a, button).f27-text-button .f27-cta__text {
  position: relative;
  display: block;
  transition: transform .525s cubic-bezier(.625,.05,0,1);
}
:is(a, button).f27-text-button .f27-cta__duplicate {
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 100%;
  color: inherit;
}
:is(a, button).f27-text-button.f27-text-button:focus-visible {
  border-color: currentColor;
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
:is(a, button).f27-text-button:focus-visible .f27-cta__text { transform: translateY(-1.5em); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button).f27-text-button.f27-text-button:hover { border-color: currentColor; }
  :is(a, button).f27-text-button:hover .f27-cta__text { transform: translateY(-1.5em); }
}
@media (prefers-reduced-motion: reduce) {
  :is(a, button).f27-text-button.f27-text-button,
  :is(a, button).f27-text-button .f27-cta__text { transition: none; }
  :is(a, button).f27-text-button:is(:hover, :focus-visible) .f27-cta__text { transform: none; }
}

/* One Secure and Compliant box-height of breathing room before Who we help.
   Keep the surrounding rails and all existing card geometry unchanged. */
[data-barba-namespace="home-2027"] .f27-integrations { margin-bottom:3.5rem; }
[data-barba-namespace="home-2027"] .f27-integrations::after { display:none; }
[data-barba-namespace="home-2027"] .f27-audiences::before { border-top:1px solid var(--f27-line,#DEDED7); }