@charset "UTF-8";
/*!
	Radius Projects.

	PLEASE DO NOT EDIT PROJECTS.CSS - YOUR EDITS WILL BE OVERWRITTEN
	Always edit projects.scss and compile (see sass-lang.com for more info)

	Loaded only on Radius Projects pages, by the brand check in
	functions/setup.php, so a Radius Care page downloads none of it.

	The brand tokens (--color-*, --font-*, --rc-space-*) and the heading presets
	(.rc-heading-h1 …) already ship in style.css via _tokens.generated.scss.
	Nothing here re-declares a colour or a font stack; everything reads a token.
*/
/*
    Variables
*/
/*
    Clearing the WordPress toolbar.

    Logged in, the toolbar is fixed across the top of the viewport and core
    clears it by bumping `html` down — 32px, or 46px under 783px wide. That only
    moves what is in flow. Chrome positioned against the initial containing
    block is not moved by a margin on `html`, so it stays at y=0 and ends up
    underneath the toolbar: on Radius Projects that hid the topbar completely
    and, at phone width, put the toolbar over the burger, where it swallowed the
    clicks meant for it.

    Each such element is offset by hand instead. Everything in flow has already
    moved down by the same amount, so this restores the logged-out relationship
    exactly rather than adding space of its own.

    `--wp-admin--admin-bar--height` is the property core sets on `body.admin-bar`
    (it is what `html`'s scroll-padding in _general.scss already reads). The
    fallbacks are core's own two heights, so a release that dropped the property
    would leave this correct rather than broken.

    This file declares a mixin and nothing else, so importing it emits no CSS.
*/
/*
    Radius Projects — foundations.

    Everything is scoped under .brand-projects. The class is added by the
    body_class filter in functions/brand.php and never appears on a Radius Care
    page, so these rules cannot reach one even if the stylesheet somehow loaded.
*/
/*
    A block's own background is only a default.

    Every Projects block that paints itself — the tinted bands, the news strip,
    the timeline — states that background here. Stated plainly it outranks
    .rc-bg from the shared Section settings control, so choosing a background in
    the editor changed the text colour and nothing else. Behind :not() it only
    applies until an editor picks one, and then it steps out of the way.

    .rc-bg covers a palette colour, .rc-bg-gradient the brand gradient, and
    .rc-bg-media an image or video.
*/
.brand-projects {
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  /*
      The design lays out on a 1440px frame with 48px margins, and on 390px
      with 24px. Bootstrap's .container caps out at 1140px and the theme caps
      it at 1160px, both of which are too narrow, so the Projects container is
      declared outright rather than patched breakpoint by breakpoint.
  */
}
.brand-projects .container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 24px;
}
@media (min-width: 992px) {
  .brand-projects .container {
    padding-inline: 32px;
  }
}
@media (min-width: 1200px) {
  .brand-projects .container {
    padding-inline: 48px;
  }
}
.brand-projects {
  /*
      The header floats over the first section on every frame in the design,
      and every hero variant carries the top padding that clears it. This is
      the guard for the case an editor puts something else first, so the
      opening section can never sit underneath the bar.
  */
}
.brand-projects main > :first-child:not([class*=p-hero]):not(.rc-gradient-run),
.brand-projects main > .rc-gradient-run:first-child > :first-child:not([class*=p-hero]) {
  padding-top: 96px;
}
@media (min-width: 992px) {
  .brand-projects main > :first-child:not([class*=p-hero]):not(.rc-gradient-run),
  .brand-projects main > .rc-gradient-run:first-child > :first-child:not([class*=p-hero]) {
    padding-top: 150px;
  }
}
.brand-projects {
  /*
      _header.scss and _footer.scss in style.css target the bare `header` and
      `footer` elements, so the Radius Care chrome styling lands on the
      Projects chrome too — navy background, rounded top corners, a negative
      top margin, white links. Undone here rather than by renaming the
      elements, which would cost the semantics for no gain.
  */
}
.brand-projects header.p-header {
  padding: 0;
}
.brand-projects footer.p-footer {
  background: none;
  border-radius: 0;
  margin-top: 0;
  padding-inline: 0;
  color: var(--color-text);
}
.brand-projects footer.p-footer a {
  color: inherit;
}
.brand-projects footer.p-footer {
  /*
      _forms.scss hides the Gravity Forms footer inside any `footer`
      element, because the Radius Care subscription form puts its submit
      in the field list instead. The Projects form uses the real footer,
      so this has to come back — and the rule it is undoing is
      !important, so this one has to be too.
  */
}
.brand-projects footer.p-footer .gform_footer {
  display: block !important;
}
.brand-projects p {
  margin: 0 0 1em;
}
.brand-projects > :last-child {
  margin-bottom: 0;
}
.brand-projects a {
  color: inherit;
}
.brand-projects hr {
  border: 0;
  border-top: 1px solid currentColor;
  margin: 0;
  opacity: 0.35;
}

/*
    Type.

    The size scale itself lives in the generated .rc-heading-* presets. These
    are the pieces the presets do not cover: the italic run inside a heading,
    the small caption, and the body sizes.
*/
.brand-projects .rc-heading-h1,
.brand-projects .rc-heading-h2,
.brand-projects .rc-heading-h3,
.brand-projects .rc-heading-h4,
.brand-projects .rc-heading-h5,
.brand-projects .rc-heading-h6 {
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.brand-projects {
  /*
      Headings mix both families inside one heading — "Building the homes our
      communities need". The italic run is always the opening words, so the
      markup is one <em class="hl"> and the rest as text.
  */
}
.brand-projects .hl {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-weight, 400);
}
.brand-projects {
  /*
      A Gotham preset with a Farnham run inside it needs the run a touch
      larger to sit on the same optical line — the footer strapline is drawn
      at 30px Gotham beside 33px Farnham, a ratio of 1.1.
  */
}
.brand-projects .rc-heading-h2 .hl,
.brand-projects .rc-heading-h4 .hl,
.brand-projects .rc-heading-h5 .hl,
.brand-projects .rc-heading-h6 .hl {
  font-size: 1.1em;
  line-height: 1;
}
.brand-projects {
  /* And the reverse: a Gotham run inside a Farnham preset. */
}
.brand-projects .rc-heading-h1,
.brand-projects .rc-heading-h3 {
  font-family: var(--font-heading);
  font-style: normal;
}
.brand-projects {
  /*
      The H1 is drawn as two sizes, not one: a Gotham line at the H2 size with
      a Farnham run at the H1 size inside it — 66px beside 73px on desktop,
      48 beside 52 on mobile. Measured on "Building the homes our communities
      need" (node 1:119) and "Explore communities" (1:1111), both of which
      come out at exactly 140px over two lines.
  */
}
.brand-projects .rc-heading-h1 {
  font-size: 48px;
}
@media (min-width: 992px) {
  .brand-projects .rc-heading-h1 {
    font-size: 66px;
  }
}
.brand-projects .rc-heading-h1 .hl {
  font-size: 1.083em;
}
@media (min-width: 992px) {
  .brand-projects .rc-heading-h1 .hl {
    font-size: 1.106em;
  }
}
.brand-projects .caption,
.brand-projects .eyebrow,
.brand-projects .rc-eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.brand-projects .text {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.brand-projects .text-s {
  font-size: 13px;
  letter-spacing: 0;
}
.brand-projects .text-l {
  font-size: 18px;
}
.brand-projects .text {
  /*
      Body XL. The token records lineHeight 100, which is 100% in Figma's
      units and reads as 1.0 — but the drawn blocks do not agree: the home
      statement is 190px over five 32px lines (node 1:131) and the pull
      quote is set to "normal". Both come out at 1.19, so that is what is
      used rather than the token's literal value.
  */
}
.brand-projects .text-xl {
  font-size: 24px;
  line-height: 1.19;
}
@media (min-width: 992px) {
  .brand-projects .text-xl {
    font-size: 32px;
  }
}
.brand-projects .text a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brand-projects .text a:not(.btn):hover {
  text-decoration: none;
}
.brand-projects .text > :first-child {
  margin-top: 0;
}
.brand-projects .text > :last-child {
  margin-bottom: 0;
}

/*
    Buttons.

    Pills throughout. The theme's global .btn already sets radius 100px and a
    transition, so these only restate what differs.
*/
.brand-projects .btn-p-primary,
.brand-projects .btn-p-white,
.brand-projects .btn-p-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid transparent;
  padding: 12px 34px;
  min-height: 44px;
  cursor: pointer;
  transition: 0.2s all;
}
.brand-projects .btn-p-primary {
  background-color: var(--color-text);
  color: var(--color-text-inverse);
}
.brand-projects .btn-p-primary:hover, .brand-projects .btn-p-primary:focus-visible {
  background-color: transparent;
  border-color: var(--color-text);
  color: var(--color-text);
}
.brand-projects .btn-p-white {
  background-color: var(--color-surface);
  color: var(--color-text);
}
.brand-projects .btn-p-white:hover, .brand-projects .btn-p-white:focus-visible {
  background-color: var(--color-text);
  color: var(--color-text-inverse);
}
.brand-projects .btn-p-ghost {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
}
.brand-projects .btn-p-ghost:hover, .brand-projects .btn-p-ghost:focus-visible {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-text-inverse);
}
.brand-projects .btn-p-small {
  font-size: 14px;
  padding: 10px 24px;
}
.brand-projects {
  /* "Learn More →" — a link, not a button, everywhere it appears. */
}
.brand-projects .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
  min-height: 24px;
}
.brand-projects .arrow-link .ico {
  width: 18px;
  height: 18px;
  transition: 0.2s transform;
}
.brand-projects .arrow-link:hover .ico, .brand-projects .arrow-link:focus-visible .ico {
  transform: translateX(4px);
}

/*
    Icons.

    Inlined from images/projects/icons/ by rc_p_icon() so they inherit
    currentColor: the same arrow sits on a navy band and a pale one.
*/
.brand-projects .ico {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
}
.brand-projects .ico-external {
  width: 12px;
  height: 10px;
}
.brand-projects .ico-burger {
  width: 27px;
  height: 10px;
}
.brand-projects .ico-close {
  width: 20px;
  height: 20px;
}

/*
    Focus. Nothing in the design specifies a focus state, so this is derived:
    a two-tone ring that stays visible on every background in the palette.
*/
.brand-projects :focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.brand-projects .rc-on-dark :focus-visible,
.brand-projects .p-on-dark :focus-visible {
  outline-color: var(--color-text-inverse);
}

.visually-hidden, .brand-projects .p-form .gfield_required,
.brand-projects .p-form .gfield--type-consent > .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
    Section rhythm. Blocks set their own internal spacing; this is the gap
    between them, and it is the value the rc_pad_* controls override.
*/
.brand-projects {
  /*
      :where() keeps this at zero specificity, so a block that states its own
      padding always wins. Without it the two attribute selectors outweigh a
      single .p-name class and this default silently overrode every per-block
      value — the statement, the news band and the pull quote were all being
      laid out on 72px instead of the 104, 80 and 40 the design gives them.
  */
}
.brand-projects :where(.p-section, [class^=p-][data-section]) {
  padding-block: 48px;
}
@media (min-width: 992px) {
  .brand-projects :where(.p-section, [class^=p-][data-section]) {
    padding-block: 72px;
  }
}

/*
    Radius Projects — header and mobile menu.

    The header is positioned over the first section rather than sitting in flow,
    because that is what every frame in the design shows: a translucent bar on
    the hero image or the hero band, never a strip of its own.
*/
.brand-projects .p-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  /*
      Full-bleed on mobile: the bar runs edge to edge, 65px tall. Positioned,
      so the topbar and the bar paint over the fade behind them.
  */
}
.brand-projects .p-header .container {
  position: relative;
  padding-inline: 0;
}
@media (min-width: 992px) {
  .brand-projects .p-header .container {
    padding-inline: 32px;
  }
}
@media (min-width: 1200px) {
  .brand-projects .p-header .container {
    padding-inline: 48px;
  }
}
.brand-projects .p-header {
  /*
      The blue fade the topbar's white links sit on (node 1233:2080), 122px
      from the top of the page to where it reaches transparent. It is the same
      gradient Radius Care puts behind its own topbar — .header-shim in
      _header.scss — so it comes from the shared variable rather than a
      Projects token: the strip is Radius network chrome, drawn once.

      Desktop only, because it exists for the topbar and mobile has none, and
      gated on .has-topbar for the same reason: no links, no fade.

      The box starts 27px above the page, as the design's does, which is what
      puts the fade under the bar rather than behind it: solid to y=43, gone
      by y=122. Shifting the stops instead would have meant a second copy of
      the gradient that could drift from the Radius Care one.
  */
}
@media (min-width: 992px) {
  .brand-projects .p-header.has-topbar::before {
    content: "";
    position: absolute;
    top: -27px;
    left: 0;
    right: 0;
    height: 149px;
    background: linear-gradient(180deg, #00aeef 46.88%, rgba(217, 217, 217, 0) 100%);
    pointer-events: none;
  }
}
.brand-projects .p-header {
  /*
      The topbar — the links across to the rest of the Radius network, on the
      gradient above the bar (node 1233:2085). It occupies the 48px band the
      bar was already leaving clear, so the bar does not move: 14px above a
      17px line box, then 17px of the bar's own margin, is the same 48.

      The height is on this element rather than coming from the menu, so an
      editor who empties the menu cannot pull the bar up with it.
  */
}
.brand-projects .p-header .topbar {
  padding-top: 14px;
  min-height: 31px;
}
.brand-projects .p-header .menu-p-topbar {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  /*
      Inter, not a brand font: this strip is Radius network chrome and is
      drawn the same on both sites, so it matches .menu-topbar in
      _menus.scss rather than the Projects header nav beneath it.
  */
}
.brand-projects .p-header .menu-p-topbar a {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  /* As .menu-topbar does it — the focus ring is handled globally. */
}
.brand-projects .p-header .menu-p-topbar a:hover {
  text-decoration: none;
}
.brand-projects .p-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 65px;
  padding: 12px 24px;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  /* 16px around a 42px logo — the bar is 74px tall, not 66 (node 1:89). */
}
@media (min-width: 992px) {
  .brand-projects .p-header .bar {
    min-height: 74px;
    margin-top: 48px;
    padding: 16px 32px;
    border-radius: 8px;
  }
}
.brand-projects .p-header {
  /*
      With a topbar above it the bar keeps its place — the 48px band is shared,
      31px of topbar and 17px of margin — so the header is the same height with
      or without one.
  */
}
@media (min-width: 992px) {
  .brand-projects .p-header.has-topbar .bar {
    margin-top: 17px;
  }
}
.brand-projects .p-header .logo {
  display: block;
  flex-shrink: 0;
  color: var(--color-text);
}
.brand-projects .p-header .logo img {
  display: block;
  width: 78px;
  height: auto;
}
@media (min-width: 992px) {
  .brand-projects .p-header .logo img {
    width: 90px;
  }
}
.brand-projects .p-header .menu-p-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-header .menu-p-header a {
  display: block;
  padding: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-projects .p-header .menu-p-header {
  /*
      The design shows no hover or current state. An underline on both is
      the least invented thing that still tells you where you are.
  */
}
.brand-projects .p-header .menu-p-header a:hover,
.brand-projects .p-header .menu-p-header .current-menu-item > a,
.brand-projects .p-header .menu-p-header .current-menu-ancestor > a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-projects .p-header {
  /*
      44px tall for the touch target, but the bar is 65px as drawn — so the
      extra height grows into the bar's padding rather than pushing it out.
  */
}
.brand-projects .p-header .burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-block: -6px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}

/*
    Both classes sit on <body>, hence the compound selector rather than a nested
    `.admin-bar &`. The header is the piece that suffers most: at phone width the
    toolbar covered the burger outright. See _admin-bar.scss.
*/
.brand-projects.admin-bar .p-header {
  top: var(--wp-admin--admin-bar--height, 46px);
}
@media (min-width: 783px) {
  .brand-projects.admin-bar .p-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

/*
    Mobile menu.

    A full-screen panel on the light grey, with its own nav order and an
    embedded register form. Deliberately not the Radius Care .side-menu, which
    translates in from the top and carries two menus.
*/
.brand-projects .p-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background-color: var(--color-accent-alt);
  overflow-y: auto;
  overscroll-behavior: contain;
  /*
      Visibility is delayed on the way out, so the panel only becomes
      interactive-free once the fade has finished. It is deliberately absent
      from the open-state transition below: a visibility that is mid-transition
      is not usable synchronously — descendants keep inheriting the old value —
      and the script has to move focus into the panel the moment it opens.
  */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
@media (min-width: 992px) {
  .brand-projects .p-mobile-menu {
    display: none;
  }
}
.brand-projects .p-mobile-menu .inner {
  padding: 0 24px 48px;
}
.brand-projects .p-mobile-menu .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
  margin-inline: -24px;
  padding: 12px 24px;
}
.brand-projects .p-mobile-menu .logo img {
  display: block;
  width: 78px;
  height: auto;
}
.brand-projects .p-mobile-menu .close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}
.brand-projects .p-mobile-menu .menu-p-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-mobile-menu .menu-p-mobile li + li {
  margin-top: 16px;
}
.brand-projects .p-mobile-menu .menu-p-mobile a {
  display: block;
  padding: 4px 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand-projects .p-mobile-menu .cross {
  margin-top: 36px;
}
.brand-projects .p-mobile-menu .register {
  margin-top: 48px;
}
.brand-projects .p-mobile-menu .register .title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

/* The panel is fixed to the viewport, so its close button needs clearing too. */
.brand-projects.admin-bar .p-mobile-menu {
  top: var(--wp-admin--admin-bar--height, 46px);
}
@media (min-width: 783px) {
  .brand-projects.admin-bar .p-mobile-menu {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

.brand-projects.p-menu-open {
  overflow: hidden;
}
.brand-projects.p-menu-open .p-mobile-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/*
    The cross-links to the other Radius sites, shared by the mobile menu and the
    footer. The ↗ is appended by a nav_menu_item_title filter.
*/
.brand-projects .menu-p-cross {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .menu-p-cross li + li {
  margin-top: 14px;
}
.brand-projects .menu-p-cross {
  /* Same trick as the footer nav: hit area into the gap, not below it. */
}
.brand-projects .menu-p-cross a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 5px;
  margin-block: -5px;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand-projects .menu-p-cross a:hover, .brand-projects .menu-p-cross a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-projects .p-mobile-menu {
    transition: none;
  }
}
/*
    Radius Projects — footer.

    Mobile is not the desktop three-column layout stacked. The two nav columns
    stay side by side and the register form drops beneath them, which is why
    the columns are a grid rather than the Bootstrap row the Radius Care footer
    uses.

    The mobile measurements come from node 990:1705 (Blog Index Page 390px).
    That frame is a 40px-padded column on a 56px gap: logo row, rule, nav row
    (itself padded 40px top and bottom), then the register block and the legal
    line 40px under it. Where a gap below reads oddly large it is one of those
    paddings folded into the margin above.
*/
.brand-projects .p-footer {
  padding-block: 40px;
  background-color: var(--color-surface);
  color: var(--color-text);
}
@media (min-width: 992px) {
  .brand-projects .p-footer {
    padding-block: 72px;
  }
}
.brand-projects .p-footer {
  /*
      Mobile is a fixed 96px between the logo and the strapline, not the
      space-between the desktop row uses (node 990:1707) — the pair sits
      left, with the slack falling off the right-hand end.
  */
}
.brand-projects .p-footer .top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 96px;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .top {
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
  }
}
.brand-projects .p-footer .logo {
  display: block;
  color: var(--color-text);
}
.brand-projects .p-footer .logo img {
  display: block;
  width: 81px;
  height: auto;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .logo img {
    width: 161px;
  }
}
.brand-projects .p-footer {
  /*
      Left aligned on mobile, not right: the design breaks the line after
      "Caring is" and ranges both lines off the same left edge (node
      990:1726), 18px over 22px rather than the desktop 30 over 33.
  */
}
.brand-projects .p-footer .strapline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 0.985;
  letter-spacing: -0.05em;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .strapline {
    font-size: 30px;
  }
}
.brand-projects .p-footer .strapline .hl {
  display: block;
  font-size: 1.222em;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .strapline .hl {
    display: inline;
    font-size: 1.1em;
  }
}
.brand-projects .p-footer {
  /* 30px under the logo row; 30 plus the nav row's own 40 above it. */
}
.brand-projects .p-footer .rule {
  margin-block: 30px 70px;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .rule {
    margin-block: 39px 55px;
  }
}
.brand-projects .p-footer {
  /*
      55px between the two link columns, and 96px down to the register block
      — the nav row's 40px bottom padding plus the frame's 56px gap.
  */
}
.brand-projects .p-footer .cols {
  display: grid;
  grid-template-columns: minmax(125px, max-content) minmax(0, 1fr);
  gap: 96px 55px;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .cols {
    grid-template-columns: 178px max-content minmax(0, 1fr);
    gap: 43px;
  }
}
.brand-projects .p-footer .col-register {
  grid-column: 1/-1;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .col-register {
    grid-column: auto;
    justify-self: end;
    width: 100%;
    max-width: 390px;
  }
}
.brand-projects .p-footer .col-register .title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .col-register .title {
    font-size: 24px;
    margin-bottom: 24px;
  }
}
.brand-projects .p-footer .menu-p-footer {
  /* The theme's global .menu is display:flex, so stacking is explicit. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-footer .menu-p-footer li + li {
  margin-top: 16px;
}
.brand-projects .p-footer .menu-p-footer {
  /*
      The design puts these on a 30px rhythm — a 14px line with a 16px
      gap. Padding the link out to a 24px touch target would make it 40,
      so the padding is cancelled with an equal negative margin: the hit
      area grows into the gap instead of pushing the next row down.
  */
}
.brand-projects .p-footer .menu-p-footer a {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand-projects .p-footer .menu-p-footer a:hover, .brand-projects .p-footer .menu-p-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-projects .p-footer {
  /* The cross-links sit on the same 16px rhythm as the nav in the footer. */
}
.brand-projects .p-footer .menu-p-cross li + li {
  margin-top: 16px;
}
.brand-projects .p-footer .bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .bottom {
    /* 8px below the columns, as drawn (nodes 1:140 and 1:197). */
    gap: 8px 24px;
    margin-top: 8px;
  }
}
.brand-projects .p-footer .copy {
  /*
      _footer.scss gives `footer .copy` a 28-34px top margin, a 40px
      bottom padding and right alignment, for the Radius Care footer's
      single right-aligned line. All three have to go.
  */
  margin: 0;
  padding: 0;
  text-align: left;
  flex-shrink: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .copy {
    font-size: 12px;
  }
}
.brand-projects .p-footer .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .legal {
    gap: 8px 24px;
  }
}
.brand-projects .p-footer .legal a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 992px) {
  .brand-projects .p-footer .legal a {
    font-size: 12px;
  }
}
.brand-projects .p-footer .legal a:hover, .brand-projects .p-footer .legal a:focus-visible {
  text-decoration: none;
}

/*
    Radius Projects — forms.

    Gravity Forms with its own CSS disabled theme-wide (gform_disable_css), so
    every rule here is doing real work rather than overriding a plugin default.
    _forms.scss in style.css styles the Radius Care forms and loads first, so
    these are scoped tightly enough to win without !important.

    Controls are sized for an audience that skews older: 44px minimum touch
    target on everything, and radio and checkbox marks at 24px rather than the
    15 to 17px the design draws them at.
*/
.brand-projects .p-form .gform_wrapper {
  margin: 0;
}
.brand-projects .p-form {
  /* Gravity Forms' legacy markup is a <ul>, so the bullets have to go. */
}
.brand-projects .p-form .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-form .gfield {
  grid-column: 1/-1;
  width: auto;
  padding: 0;
  margin: 0;
}
.brand-projects .p-form {
  /* First and Last name sit side by side from the narrowest width. */
}
.brand-projects .p-form .gfield--width-half {
  grid-column: span 1;
  max-width: none;
  flex: none;
}
.brand-projects .p-form {
  /*
      Labels are hidden per field in Gravity Forms itself (labelPlacement
      hidden_label), which is what the design shows. This catches the ones
      that stay — the legend on a choice fieldset — and the "(Required)"
      marker the design does not draw. Both stay in the accessibility tree:
      the fields carry aria-required, and the legend is only visually gone.
  */
}
.brand-projects .p-form {
  /* The honeypot is a real, empty field; GF's own CSS normally hides it. */
}
.brand-projects .p-form .gform_validation_container,
.brand-projects .p-form .gfield--type-honeypot {
  display: none !important;
}
.brand-projects .p-form {
  /*
      The community select and the enquiry-type radios keep their labels: they
      are the two fields whose purpose is not obvious from a placeholder, and
      the design draws both captions.
  */
}
.brand-projects .p-form .gfield--type-select .gfield_label,
.brand-projects .p-form .gfield--type-radio .gfield_label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand-projects .p-form input[type=text],
.brand-projects .p-form input[type=email],
.brand-projects .p-form input[type=tel],
.brand-projects .p-form input[type=number],
.brand-projects .p-form textarea,
.brand-projects .p-form select {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  background-color: transparent;
  border: 1px solid var(--color-text);
  border-radius: 100px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  appearance: none;
  transition: 0.2s all;
}
.brand-projects .p-form input[type=text]::placeholder,
.brand-projects .p-form input[type=email]::placeholder,
.brand-projects .p-form input[type=tel]::placeholder,
.brand-projects .p-form input[type=number]::placeholder,
.brand-projects .p-form textarea::placeholder,
.brand-projects .p-form select::placeholder {
  color: var(--color-text);
  opacity: 1;
}
.brand-projects .p-form textarea {
  min-height: 120px;
  border-radius: 20px;
  resize: vertical;
}
.brand-projects .p-form select {
  background-color: var(--color-accent-alt);
  border-color: transparent;
  padding-right: 48px;
  /*
      The chevron is a background image rather than an inlined icon,
      because a <select> cannot carry a child element. Same artwork as
      images/projects/icons/chevron-down.svg.
  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23001D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px 24px;
  /*
      No floating ring on the select. Chrome and Safari match
      :focus-visible on a <select> the moment it is clicked, so the
      derived focus outline in _projects-base.scss fired on ordinary
      mouse use and drew a box around the pill. The focus state is moved
      onto the border instead — it hugs the pill, so it reads as part of
      the control rather than an outline around it, and keyboard users
      keep a visible indicator.
  */
}
.brand-projects .p-form select:focus, .brand-projects .p-form select:focus-visible {
  outline: none;
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-text);
}
.brand-projects .p-form {
  /* Radio and checkbox, sized up from the 15 to 17px the design draws. */
}
.brand-projects .p-form .gfield_radio,
.brand-projects .p-form .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-form .gchoice {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.brand-projects .p-form input[type=radio],
.brand-projects .p-form input[type=checkbox] {
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
  flex-shrink: 0;
  appearance: none;
  border: 1.5px solid var(--color-text);
  background-color: transparent;
  cursor: pointer;
}
.brand-projects .p-form input[type=radio] {
  border-radius: 50%;
}
.brand-projects .p-form input[type=radio]:checked {
  border-width: 7px;
}
.brand-projects .p-form input[type=checkbox] {
  border-radius: 4px;
}
.brand-projects .p-form input[type=checkbox]:checked {
  background-color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5L10 17.5L19 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}
.brand-projects .p-form .gchoice label,
.brand-projects .p-form .gfield_consent_label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  cursor: pointer;
}
.brand-projects .p-form {
  /*
      The consent line. The design moves it above the fields on the desktop
      development page and below them on mobile and in the article sidebar;
      it is standardised directly above Submit everywhere, which is where it
      belongs legally as well as visually.
  */
}
.brand-projects .p-form .gfield--type-consent {
  margin-top: 8px;
}
.brand-projects .p-form .gfield--type-consent .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.brand-projects .p-form .gfield--type-consent .gfield_consent_label {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0;
  cursor: pointer;
}
.brand-projects .p-form .gform_footer {
  margin: 16px 0 0;
  padding: 0;
}
.brand-projects .p-form input[type=submit],
.brand-projects .p-form button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 34px;
  background-color: var(--color-text);
  border: 1px solid var(--color-text);
  border-radius: 100px;
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: 0.2s all;
}
.brand-projects .p-form input[type=submit]:hover, .brand-projects .p-form input[type=submit]:focus-visible,
.brand-projects .p-form button[type=submit]:hover,
.brand-projects .p-form button[type=submit]:focus-visible {
  background-color: transparent;
  color: var(--color-text);
}
.brand-projects .p-form .gform_validation_errors,
.brand-projects .p-form .gfield_validation_message {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #b3261e;
}
.brand-projects .p-form .gfield_error input,
.brand-projects .p-form .gfield_error textarea,
.brand-projects .p-form .gfield_error select {
  border-color: #b3261e;
}
.brand-projects .p-form .gform_confirmation_message {
  font-size: 16px;
  line-height: 1.3;
}

/*
    The short variant puts the email and Submit on one row, which the DOM does
    not allow on its own: the email sits inside .gform_body and Submit inside
    .gform_footer, two siblings. So the body and the field list are flattened
    with display: contents and every field becomes a grid item alongside the
    footer.

    The rows are placed explicitly because they have to be — this form's fields
    are fixed and defined by us: community, email, consent.
*/
.brand-projects .p-form--short .gform_wrapper form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 4px;
  align-items: end;
}
.brand-projects .p-form--short .gform_body,
.brand-projects .p-form--short .gform_fields {
  display: contents;
}
.brand-projects .p-form--short .gfield {
  grid-column: 1/-1;
}
.brand-projects .p-form--short .gfield--type-select {
  grid-row: 1;
}
.brand-projects .p-form--short .gfield--type-email {
  grid-column: 1;
  grid-row: 2;
}
.brand-projects .p-form--short .gform_footer {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.brand-projects .p-form--short {
  /* Consent sits under Submit here, so it keeps a little breathing room. */
}
.brand-projects .p-form--short .gfield--type-consent {
  grid-row: 3;
  margin-top: 8px;
}
.brand-projects .p-form--short {
  /*
      Below the narrowest breakpoint Submit gets its own row and the order
      changes with it: the mobile design runs select, email, consent, Submit
      (node 990:1760), with Submit ranged right and a flat 8px between all
      four. So consent comes back above the button and drops the extra
      margin it carries when it sits underneath one.
  */
}
@media (max-width: 575px) {
  .brand-projects .p-form--short .gform_wrapper form {
    grid-template-columns: minmax(0, 1fr);
  }
  .brand-projects .p-form--short .gfield--type-email,
  .brand-projects .p-form--short .gform_footer {
    grid-column: 1/-1;
  }
  .brand-projects .p-form--short .gfield--type-consent {
    grid-row: 3;
    margin-top: 0;
  }
  .brand-projects .p-form--short .gform_footer {
    grid-row: 4;
    justify-self: end;
  }
}

.brand-projects .p-form-missing {
  padding: 12px 16px;
  border: 1px dashed currentColor;
  border-radius: 8px;
  font-size: 13px;
}

/*
    Radius Projects — section blocks.

    One .p-{name} block per layout in template-parts/projects/, in the order
    they appear in the ACF field group.

    Mobile first throughout, with $screen-md (992px) carrying almost every
    change, matching the rest of the theme. The design's two frames are 1440px
    and 390px; everything between is a fluid interpolation of those.
*/
/* -------------------------------------------------------------------------
    Hero

    The Projects header floats over whichever section comes first, so every
    hero style clears it: 65px of bar on mobile, 48 + 66 = 114px on desktop.
   ---------------------------------------------------------------------- */
/*
    The height an image hero draws its photo at, shared by style-image and by a
    band that is carrying an image instead of copy.

    Both numbers come off the development page in the design — 445px in the
    390px frame (node 958:4506), 639px in the 1440px frame (968:5543), which is
    the same 639 the About and Design Philosophy heroes use. Two frames, two
    values, no invented middle step; the image covers whatever it is given.
*/
.brand-projects .p-hero {
  position: relative;
  padding-block: 0;
}
.brand-projects .p-hero .container {
  position: relative;
  z-index: 2;
}
.brand-projects .p-hero .copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.brand-projects .p-hero .rc-heading-h1 {
  margin: 0;
  max-width: 1001px;
}
.brand-projects .p-hero .text {
  margin: 0;
  max-width: 640px;
}
.brand-projects .p-hero .media {
  position: relative;
  display: flex;
}
.brand-projects .p-hero .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-projects .p-hero {
  /* Colour band: the Projects home. */
}
.brand-projects .p-hero.style-band:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-surface-alt);
}
.brand-projects .p-hero.style-band {
  padding-top: 121px;
  padding-bottom: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-band {
    padding-top: 218px;
    padding-bottom: 65px;
  }
}
.brand-projects .p-hero {
  /* Full-width image, usually with no copy over it at all. */
}
.brand-projects .p-hero.style-image .media {
  height: 445px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-image .media {
    height: 639px;
  }
}
.brand-projects .p-hero.style-image .container {
  margin-top: -140px;
  padding-bottom: 48px;
  color: var(--color-text-inverse);
}
.brand-projects .p-hero {
  /*
      Image with a text panel over it. The panel is bottom-left on mobile and
      sits in the right-hand third on desktop, over the image, in white.
  */
}
.brand-projects .p-hero.style-overlay {
  color: var(--color-text-inverse);
  /*
      No scrim over the photo. The darkening gradient that used to sit
      here was derived rather than designed, and it was removed on
      request — the copy now reads straight off the image, so a hero
      image with a light area behind the panel will lose contrast.
  */
}
.brand-projects .p-hero.style-overlay .media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.brand-projects .p-hero.style-overlay {
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding-top: 121px;
  padding-bottom: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-overlay {
    min-height: 639px;
    align-items: center;
    padding-top: 114px;
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-overlay .copy {
    margin-left: auto;
    max-width: 420px;
  }
}
.brand-projects .p-hero.style-overlay .text > :first-child {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-overlay .text > :first-child {
    font-size: 24px;
  }
}
.brand-projects .p-hero {
  /* One or two images, heading over the bottom-left. */
}
.brand-projects .p-hero.style-split {
  color: var(--color-text-inverse);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  padding-top: 121px;
  padding-bottom: 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-split {
    min-height: 639px;
    padding-top: 114px;
    padding-bottom: 48px;
  }
}
.brand-projects .p-hero.style-split {
  /* Two lines in the design, so the measure is set rather than left long. */
}
.brand-projects .p-hero.style-split .rc-heading-h1 {
  max-width: 400px;
}
.brand-projects .p-hero.style-split .media {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /*
      The row has to be told to fill. Left as `auto` it takes its size
      from the image's intrinsic height, which at container width is
      far taller than the hero, and the photos spill down the page
      over whatever follows.
  */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  /*
      No scrim over the photo, as on style-overlay. The darkening
      gradient that used to sit here was derived rather than designed,
      and it was removed on request — the white heading now reads
      straight off the image, so a hero photo that is light at the
      bottom left will lose contrast.
  */
}
.brand-projects .p-hero.style-split {
  /* One image at 390px: the second is decorative and drops out. */
}
.brand-projects .p-hero.style-split .img-2 {
  display: none;
}
@media (min-width: 576px) {
  .brand-projects .p-hero.style-split .img-2 {
    display: block;
  }
}
.brand-projects .p-hero.style-split {
  /* One image fills the hero; a second splits it in two, but only once
     .img-2 is actually on screen. */
}
@media (min-width: 576px) {
  .brand-projects .p-hero.style-split .media:has(.img-2) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brand-projects .p-hero {
  /*
      The two index heroes — Communities (node 1:1109) and the news index
      (1:1628) — draw the H1 in a 611px box rather than the 1001px the taller
      heroes use. That is what breaks "Explore communities" over two lines,
      with "communities" under "Explore", while "Explore news" still fits on
      one, exactly as both frames are drawn.
  */
}
.brand-projects .p-hero.height-short .rc-heading-h1 {
  max-width: 611px;
}
.brand-projects .p-hero {
  /*
      Short bands close well clear of the heading rather than hugging it:
      56px of band below the last line on mobile, 93px on desktop, measured
      off the Communities frame (the band, node 1:1110, is 451px tall and the
      heading ends at 358).
  */
}
.brand-projects .p-hero.height-short.style-band {
  padding-bottom: 56px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.height-short.style-band {
    padding-bottom: 93px;
  }
}
.brand-projects .p-hero.height-tall.style-band {
  padding-bottom: 80px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.height-tall.style-band {
    padding-bottom: 140px;
  }
}
.brand-projects .p-hero {
  /*
      Band is the default style, so an editor who uploads a hero image and
      leaves the style alone gets a band with a photo in it. Without a height
      of its own the photo letterboxes between the band's paddings — colour
      above and below it — so where there is no copy the band steps aside and
      the image fills the section, exactly as style-image does.

      :has(.media) is load-bearing. The hand-written heros in
      archive-project_news.php and archive-development.php put their heading
      straight into .container with no .copy wrapper, so without it this
      matched them too and stripped the padding that holds the H1 clear of
      the floating header.
  */
}
.brand-projects .p-hero.style-band:has(.media):not(:has(.copy)) {
  padding-top: 0;
  padding-bottom: 0;
}
.brand-projects .p-hero.style-band:has(.media):not(:has(.copy)) .media {
  height: 445px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-band:has(.media):not(:has(.copy)) .media {
    height: 639px;
  }
}

/* -------------------------------------------------------------------------
    Development cards
   ---------------------------------------------------------------------- */
/*
    On the home page the hero band runs on behind the card row and closes 49px
    below it — one continuous band, not two sections that happen to share a
    colour. The adjacency rule is how the rest of the theme handles this kind of
    pairing (see .s-hero + .s-home-intro in _sections.scss).
*/
.brand-projects .p-hero.style-band:not(.height-short) + .p-developments {
  padding-top: 0;
  padding-bottom: 66px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-band:not(.height-short) + .p-developments {
    padding-bottom: 49px;
  }
}

/*
    Communities is the other case: there the band stops above the cards, so the
    row is a section in its own right and starts clear of the fold — 40px below
    it on mobile, 32px on desktop, closing 40/64px above the news band (node
    1:1112 against 1:1242).
*/
.brand-projects .p-hero.style-band.height-short + .p-developments {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-hero.style-band.height-short + .p-developments {
    padding-top: 32px;
    padding-bottom: 64px;
  }
}

.brand-projects .p-developments .intro {
  max-width: 640px;
  margin-bottom: 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-developments .intro {
    margin-bottom: 40px;
  }
}
.brand-projects .p-developments .intro .rc-heading-h5 {
  margin-bottom: 16px;
}
.brand-projects .p-developments .items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* 24px between stacked cards on mobile, as drawn (node 1:3242). */
  gap: 24px;
}
@media (min-width: 768px) {
  .brand-projects .p-developments .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
}
@media (min-width: 992px) {
  .brand-projects .p-developments.cols-3 .items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.brand-projects .p-developments {
  /*
      The two-up card is not the three-up card scaled: the image is landscape
      (656x537 rather than 429x487) and the copy stops short of the card edge.
  */
}
.brand-projects .p-developments.cols-2 .items {
  gap: 48px 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-developments.cols-2 .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .brand-projects .p-developments.cols-2 .items .dev-card .media {
    aspect-ratio: 656/537;
  }
}
@media (min-width: 992px) {
  .brand-projects .p-developments.cols-2 .items .dev-card .body {
    max-width: 544px;
  }
}
.brand-projects .p-developments .cta-holder {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

/*
    The card itself, from rc_p_development_card(). Shared by this block and the
    fallback grid on the communities archive.
*/
.brand-projects .dev-card {
  display: flex;
  flex-direction: column;
}
.brand-projects .dev-card .media {
  display: block;
  overflow: hidden;
  aspect-ratio: 429/487;
}
.brand-projects .dev-card .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s transform;
}
.brand-projects .dev-card:hover .media img {
  transform: scale(1.03);
}
.brand-projects .dev-card {
  /*
      A centred strip below the image, not overlaid on it — the one place the
      design differs from how a status badge is usually drawn.

      38px tall on mobile and 48 on desktop, as drawn (nodes 1:3247 and 1:43).
      The design sets this line at 9px on mobile, which is below any
      defensible floor; at 11px the full sentence still holds one line in a
      342px card, which is what keeps the strip a strip.
  */
}
.brand-projects .dev-card .status {
  margin: 0;
  padding: 11px 4px;
  background-color: var(--color-text);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .brand-projects .dev-card .status {
    padding: 16px 8px;
    font-size: 12px;
  }
}
.brand-projects .dev-card .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding-top: 19px;
}
@media (min-width: 992px) {
  .brand-projects .dev-card .body {
    gap: 16px;
    padding-top: 24px;
  }
}
.brand-projects .dev-card {
  /* Subhead 2: 16px on mobile, 21 on desktop. */
}
.brand-projects .dev-card .region {
  margin: 0 0 -6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-weight, 400);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .dev-card .region {
    margin-bottom: -8px;
    font-size: 21px;
  }
}
.brand-projects .dev-card {
  /* H6: 18px on mobile, 24 on desktop. */
}
.brand-projects .dev-card .title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .dev-card .title {
    font-size: 24px;
  }
}
.brand-projects .dev-card .title a {
  text-decoration: none;
}
.brand-projects .dev-card .title a:hover, .brand-projects .dev-card .title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-projects .dev-card .spec {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
}
.brand-projects .dev-card .excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

/* -------------------------------------------------------------------------
    Statement
   ---------------------------------------------------------------------- */
.brand-projects .p-statement {
  padding-block: 56px;
}
@media (min-width: 992px) {
  .brand-projects .p-statement {
    padding-block: 104px;
  }
}
.brand-projects .p-statement .btn-p-primary,
.brand-projects .p-statement .btn-p-white,
.brand-projects .p-statement .btn-p-ghost {
  margin-top: 21px;
}
.brand-projects .p-statement {
  /* 1233px inside the 1344px container, as drawn (node 1:130). */
}
.brand-projects .p-statement .text {
  max-width: 1233px;
}

/* -------------------------------------------------------------------------
    Text and image
   ---------------------------------------------------------------------- */
.brand-projects .p-text-image .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .brand-projects .p-text-image .inner {
    gap: 148px;
  }
}
.brand-projects .p-text-image .il img {
  display: block;
  width: 100%;
  height: auto;
}
.brand-projects .p-text-image .ir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.brand-projects .p-text-image {
  /* Image right is the default; image left just swaps the order. */
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.imagep-right .il {
    order: 2;
  }
}
.brand-projects .p-text-image {
  /*
      The pull quote block is one rich-text field holding two sizes: the quote
      at Body XL and the supporting paragraph at Body M (node 1:138).
  */
}
.brand-projects .p-text-image.style-quote .text .support {
  font-size: 16px;
  line-height: 1.3;
}
.brand-projects .p-text-image .attribution {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-weight, 400);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image .attribution {
    font-size: 21px;
  }
}
.brand-projects .p-text-image .btn-p-primary,
.brand-projects .p-text-image .btn-p-white,
.brand-projects .p-text-image .btn-p-ghost {
  margin-top: 8px;
}
.brand-projects .p-text-image {
  /*
      The pull quote is drawn on a 1227px row inside the 1344px container —
      a 659px image, a 148px gap and a 420px column (node 1:133) — so it is
      capped rather than stretched to fill.
  */
}
.brand-projects .p-text-image.style-quote {
  padding-block: 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-quote {
    padding-block: 40px;
  }
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-quote .inner {
    grid-template-columns: minmax(0, 659fr) minmax(0, 420fr);
    gap: 148px;
    max-width: 1227px;
  }
}
.brand-projects .p-text-image {
  /*
      Band style. The copy sits on a tinted panel and the image bleeds past
      the panel edge to the viewport, so the section is full-bleed and the
      container only constrains the text.
  */
}
.brand-projects .p-text-image.style-band {
  /*
      A top-to-bottom brand gradient, not a flat grey — sampled from the
      home page band (node 1:121), which is also what settles the angle
      the token file had marked provisional.
  */
}
.brand-projects .p-text-image.style-band:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-image: var(--gradient-brand);
}
.brand-projects .p-text-image.style-band {
  padding-block: 0;
}
.brand-projects .p-text-image.style-band .container {
  max-width: none;
  padding-inline: 0;
}
.brand-projects .p-text-image.style-band .inner {
  gap: 0;
  align-items: stretch;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-band .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brand-projects .p-text-image.style-band .ir {
  justify-content: center;
  padding: 48px 24px;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-band .ir {
    /*
        The copy fills its half of the band rather than the 426px
        drawn at node 1:124, which left most of the panel empty on
        wide screens. It stays hard against the page edge, 48px in,
        with the wider inset on the side facing the image.
    */
    padding: 120px 48px 120px 64px;
  }
  .brand-projects .p-text-image.style-band .ir > * {
    max-width: 100%;
  }
}
.brand-projects .p-text-image.style-band .il img {
  height: 100%;
  object-fit: cover;
  min-height: 240px;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-band .il img {
    min-height: 566px;
  }
}
.brand-projects .p-text-image.style-band {
  /* On mobile the image becomes a strip below the copy, not beside it. */
}
.brand-projects .p-text-image.style-band .il {
  order: 2;
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-band .il {
    order: 0;
  }
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-band.imagep-right .il {
    order: 2;
  }
}
.brand-projects .p-text-image.style-band {
  /* Panel on the left, so the two insets swap sides with it. */
}
@media (min-width: 992px) {
  .brand-projects .p-text-image.style-band.imagep-right .ir {
    padding-left: 48px;
    padding-right: 64px;
  }
}

/* -------------------------------------------------------------------------
    CTA band
   ---------------------------------------------------------------------- */
.brand-projects .p-cta-band:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-surface-alt);
}
.brand-projects .p-cta-band .rc-heading-h3 {
  margin-bottom: 24px;
}
.brand-projects .p-cta-band .text {
  max-width: 900px;
  margin-bottom: 24px;
}

/* -------------------------------------------------------------------------
    News
   ---------------------------------------------------------------------- */
.brand-projects .p-news:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-surface-alt);
}
.brand-projects .p-news {
  padding-block: 48px;
}
@media (min-width: 992px) {
  .brand-projects .p-news {
    padding-block: 80px;
  }
}
.brand-projects .p-news .rc-heading-h3 {
  margin-bottom: 32px;
}
.brand-projects .p-news .items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 768px) {
  .brand-projects .p-news .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .brand-projects .p-news .items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.brand-projects .p-news .cta-holder {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.brand-projects .news-card {
  display: flex;
  flex-direction: column;
}
.brand-projects .news-card .media {
  display: block;
  overflow: hidden;
  aspect-ratio: 427/287;
}
.brand-projects .news-card .media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s transform;
}
.brand-projects .news-card:hover .media img {
  transform: scale(1.03);
}
.brand-projects .news-card .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 20px;
}
.brand-projects .news-card .title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .news-card .title {
    font-size: 20px;
  }
}
.brand-projects .news-card .title a {
  text-decoration: none;
}
.brand-projects .news-card .title a:hover, .brand-projects .news-card .title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-projects .news-card .excerpt {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}
.brand-projects .news-card--featured .media {
  aspect-ratio: 970/420;
}
.brand-projects .news-card--featured .title {
  font-size: 26px;
}
@media (min-width: 992px) {
  .brand-projects .news-card--featured .title {
    font-size: 32px;
  }
}

/* -------------------------------------------------------------------------
    Content
   ---------------------------------------------------------------------- */
.brand-projects .p-content .text {
  max-width: 820px;
}

/* -------------------------------------------------------------------------
    Intro and overview

    Two columns on desktop. On mobile the overview is not a narrower column
    beside the intro — it moves out and becomes its own block underneath.
   ---------------------------------------------------------------------- */
.brand-projects .p-intro-overview .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-intro-overview .inner {
    grid-template-columns: 772fr 427fr;
    gap: 148px;
    align-items: start;
  }
}
.brand-projects .p-intro-overview .rc-heading-h5 {
  margin-bottom: 24px;
}
.brand-projects .p-intro-overview .overview-heading {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-intro-overview .overview-heading {
    font-size: 24px;
  }
}
.brand-projects .p-intro-overview .overview {
  margin: 0;
}
.brand-projects .p-intro-overview .overview .row {
  padding-block: 4px;
}
.brand-projects .p-intro-overview .overview .row + .row {
  margin-top: 8px;
}
.brand-projects .p-intro-overview .overview dt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-weight, 400);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
@media (min-width: 992px) {
  .brand-projects .p-intro-overview .overview dt {
    font-size: 21px;
  }
}
.brand-projects .p-intro-overview .overview dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.brand-projects .p-intro-overview .overview dd > :first-child {
  margin-top: 0;
}
.brand-projects .p-intro-overview .overview dd > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
    Timeline

    The tab strip is the primary control at every width. On mobile it becomes a
    scroll-snap row rather than the desktop artwork overflowing the column,
    because the design has no mobile layout for this (D11).
   ---------------------------------------------------------------------- */
.brand-projects .p-timeline:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-accent-alt);
}
.brand-projects .p-timeline > .container {
  max-width: none;
}
.brand-projects .p-timeline .heading {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-timeline .heading {
    font-size: 24px;
  }
}
.brand-projects .p-timeline .panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 32px 24px;
  overflow: hidden;
  color: var(--color-text-inverse);
}
@media (min-width: 992px) {
  .brand-projects .p-timeline .panel {
    min-height: 453px;
    padding: 45px 40px;
  }
}
.brand-projects .p-timeline .panel[hidden] {
  display: none;
}
.brand-projects .p-timeline .media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.brand-projects .p-timeline .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-projects .p-timeline .media {
  /*
      Derived, not designed: white copy over a photograph needs it. On
      mobile the copy spans the full width of a narrow panel, so the
      gradient has to as well — angling it from the left only, as the
      desktop layout wants, leaves the bullets sitting on bare photo.
  */
}
.brand-projects .p-timeline .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 29, 77, 0.55) 0%, rgba(0, 29, 77, 0.35) 45%, rgba(0, 29, 77, 0.7) 100%);
}
@media (min-width: 992px) {
  .brand-projects .p-timeline .media::after {
    background: linear-gradient(100deg, rgba(0, 29, 77, 0.7) 0%, rgba(0, 29, 77, 0.25) 45%, rgba(0, 29, 77, 0) 70%);
  }
}
.brand-projects .p-timeline .body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.brand-projects .p-timeline .phase-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-weight, 400);
  font-size: 44px;
  line-height: 0.985;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-timeline .phase-title {
    font-size: 64px;
  }
}
.brand-projects .p-timeline .head .caption {
  margin: 12px 0 0;
}
.brand-projects .p-timeline .summary {
  max-width: 320px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.brand-projects .p-timeline .summary ul {
  margin: 0;
  padding-left: 18px;
}
.brand-projects .p-timeline .summary li + li {
  margin-top: 8px;
}
.brand-projects .p-timeline .controls {
  margin-top: 24px;
}
.brand-projects .p-timeline .tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.brand-projects .p-timeline .tabs::-webkit-scrollbar {
  display: none;
}
.brand-projects .p-timeline .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 180px;
  min-height: 54px;
  padding: 12px 24px;
  background-color: var(--color-surface);
  border: 0;
  border-radius: 100px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.2s all;
}
@media (min-width: 992px) {
  .brand-projects .p-timeline .tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 66px;
  }
}
.brand-projects .p-timeline .tab .ico-holder {
  display: none;
}
.brand-projects .p-timeline .tab.is-active {
  background-color: var(--color-text);
  color: var(--color-text-inverse);
}
.brand-projects .p-timeline .tab.is-active .ico-holder {
  display: flex;
}
.brand-projects .p-timeline .tab .ico-tab {
  width: 20px;
  height: 20px;
}
.brand-projects .p-timeline .progress {
  position: relative;
  margin-top: 8px;
}
.brand-projects .p-timeline .track {
  height: 20px;
  border-radius: 100px;
  background-color: var(--color-text);
  border: 3px solid var(--color-text);
  overflow: hidden;
}
.brand-projects .p-timeline .fill {
  height: 100%;
  border-radius: 100px;
  background-color: var(--color-surface);
  transition: 0.4s width ease-out;
}
.brand-projects .p-timeline .badge {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-text);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.03em;
}
.brand-projects .p-timeline .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.brand-projects .p-timeline .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}
.brand-projects .p-timeline .arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.brand-projects .p-timeline .arrow {
  /* One chevron asset, rotated, rather than two near-identical files. */
}
.brand-projects .p-timeline .arrow.prev .ico {
  transform: rotate(90deg);
}
.brand-projects .p-timeline .arrow.next .ico {
  transform: rotate(-90deg);
}
.brand-projects .p-timeline {
  /*
      The dots duplicate the tabs (D10). Kept for orientation at the narrowest
      widths, hidden as soon as the tabs are all readable.
  */
}
.brand-projects .p-timeline .dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 992px) {
  .brand-projects .p-timeline .dots {
    display: none;
  }
}
.brand-projects .p-timeline .dot {
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.brand-projects .p-timeline .dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border: 1px solid var(--color-text);
  border-radius: 50%;
}
.brand-projects .p-timeline .dot.is-active::after {
  background-color: var(--color-text);
}

/* -------------------------------------------------------------------------
    Explore Homes
   ---------------------------------------------------------------------- */
.brand-projects .p-explore-homes .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-explore-homes .inner {
    grid-template-columns: 770fr 428fr;
    gap: 148px;
    align-items: start;
  }
}
.brand-projects .p-explore-homes .il img {
  display: block;
  width: 100%;
  height: auto;
}
.brand-projects .p-explore-homes .ir {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.brand-projects .p-explore-homes .heading,
.brand-projects .p-explore-homes .form-heading {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-explore-homes .heading,
  .brand-projects .p-explore-homes .form-heading {
    font-size: 24px;
  }
}
.brand-projects .p-explore-homes .homes .items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-explore-homes .homes .item + .item {
  margin-top: 24px;
}
.brand-projects .p-explore-homes .homes .item .title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-weight, 400);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-explore-homes .homes .item .title {
    font-size: 21px;
  }
}

/* -------------------------------------------------------------------------
    Gallery
   ---------------------------------------------------------------------- */
.brand-projects .p-gallery .heading {
  margin: 0 0 24px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-gallery .heading {
    font-size: 24px;
  }
}
.brand-projects .p-gallery .gallery {
  position: relative;
}
.brand-projects .p-gallery {
  /*
      A centre-snapping scroll strip rather than a slider library: items at
      two thirds of the viewport give the peeking neighbours the design
      shows, the arrows only nudge the scroll position, and with scripting
      off it is still swipeable. Nothing about it needs JavaScript to read.
  */
}
.brand-projects .p-gallery .items {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: 6%;
}
.brand-projects .p-gallery .items::-webkit-scrollbar {
  display: none;
}
@media (min-width: 992px) {
  .brand-projects .p-gallery .items {
    gap: 24px;
    padding-inline: 17%;
  }
}
.brand-projects .p-gallery .item {
  flex: 0 0 88%;
  scroll-snap-align: center;
}
@media (min-width: 992px) {
  .brand-projects .p-gallery .item {
    flex-basis: 66%;
  }
}
.brand-projects .p-gallery .item img {
  display: block;
  width: 100%;
  aspect-ratio: 960/600;
  object-fit: cover;
}
.brand-projects .p-gallery .dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.brand-projects .p-gallery .dot {
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.brand-projects .p-gallery .dot::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border: 1px solid var(--color-text);
  border-radius: 50%;
}
.brand-projects .p-gallery .dot.is-active::after {
  background-color: var(--color-text);
}
.brand-projects .p-gallery .controls .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-surface);
  border: 0;
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
}
.brand-projects .p-gallery .controls .arrow.prev {
  left: 8px;
}
.brand-projects .p-gallery .controls .arrow.prev .ico {
  transform: rotate(90deg);
}
.brand-projects .p-gallery .controls .arrow.next {
  right: 8px;
}
.brand-projects .p-gallery .controls .arrow.next .ico {
  transform: rotate(-90deg);
}
@media (min-width: 992px) {
  .brand-projects .p-gallery .controls .arrow.prev {
    left: 24px;
  }
  .brand-projects .p-gallery .controls .arrow.next {
    right: 24px;
  }
}

/* -------------------------------------------------------------------------
    FAQs and design principles — the shared accordion
   ---------------------------------------------------------------------- */
.brand-projects .p-faqs .inner,
.brand-projects .p-principles .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-faqs .inner,
  .brand-projects .p-principles .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .brand-projects .p-faqs .inner,
  .brand-projects .p-principles .inner {
    gap: 148px;
  }
}
.brand-projects .p-faqs .item,
.brand-projects .p-principles .item {
  border-top: 1px solid currentColor;
}
.brand-projects .p-faqs .item:last-child,
.brand-projects .p-principles .item:last-child {
  border-bottom: 1px solid currentColor;
}
.brand-projects .p-faqs .opener,
.brand-projects .p-principles .opener {
  margin: 0;
}
.brand-projects .p-faqs .opener button,
.brand-projects .p-principles .opener button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 66px;
  padding: 20px 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.brand-projects .p-faqs .opener .label,
.brand-projects .p-principles .opener .label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-faqs .opener .label,
  .brand-projects .p-principles .opener .label {
    font-size: 20px;
  }
}
.brand-projects .p-faqs .opener .ico-holder,
.brand-projects .p-principles .opener .ico-holder {
  flex-shrink: 0;
  display: flex;
}
.brand-projects .p-faqs .opener .ico-plus,
.brand-projects .p-faqs .opener .ico-minus,
.brand-projects .p-principles .opener .ico-plus,
.brand-projects .p-principles .opener .ico-minus {
  width: 19px;
  height: 19px;
}
.brand-projects .p-faqs .opener .ico-minus,
.brand-projects .p-principles .opener .ico-minus {
  display: none;
}
.brand-projects .p-faqs .item.is-open .opener .ico-plus,
.brand-projects .p-principles .item.is-open .opener .ico-plus {
  display: none;
}
.brand-projects .p-faqs .item.is-open .opener .ico-minus,
.brand-projects .p-principles .item.is-open .opener .ico-minus {
  display: block;
}
.brand-projects .p-faqs .panel,
.brand-projects .p-principles .panel {
  padding-bottom: 24px;
}
.brand-projects .p-faqs .panel .text,
.brand-projects .p-principles .panel .text {
  max-width: 560px;
}

.brand-projects .p-faqs .il .rc-heading-h3,
.brand-projects .p-partners .il .rc-heading-h3 {
  margin: 0;
}

/* -------------------------------------------------------------------------
    Project partners
   ---------------------------------------------------------------------- */
.brand-projects .p-partners .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-partners .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
}
.brand-projects .p-partners .ir {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 576px) {
  .brand-projects .p-partners .ir {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brand-projects .p-partners {
  /*
      The design lets the logos bleed outside their frames and gives no box
      rule (D23). A fixed-height contain box takes any aspect ratio.
  */
}
.brand-projects .p-partners .logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 90px;
}
.brand-projects .p-partners .logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-projects .p-partners .name {
  margin: 16px 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

/* -------------------------------------------------------------------------
    Resources
   ---------------------------------------------------------------------- */
.brand-projects .p-resources {
  /*
      The band is the brand gradient over the grey, not a flat grey — the
      light blue at the top fades out down the band (node 1:917).
  */
}
.brand-projects .p-resources:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-image: var(--gradient-brand);
}
.brand-projects .p-resources {
  padding-block: 0;
}
.brand-projects .p-resources > .container {
  max-width: none;
  padding-inline: 0;
}
.brand-projects .p-resources .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 992px) {
  .brand-projects .p-resources .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brand-projects .p-resources .il {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 48px 24px;
}
@media (min-width: 992px) {
  .brand-projects .p-resources .il {
    /*
        The copy sits hard against the left of the band, 48px in, and
        is 426px wide as drawn (node 1:920) — it is a form column, so
        it is capped rather than stretched across the half.
    */
    gap: 48px;
    padding: 96px 48px;
  }
  .brand-projects .p-resources .il > * {
    max-width: 426px;
  }
}
.brand-projects .p-resources {
  /* 56px below the heading, 48px between the form and the files (1:920). */
}
.brand-projects .p-resources .rc-heading-h5 {
  margin-bottom: 8px;
}
.brand-projects .p-resources .register {
  max-width: 426px;
  /*
      The form is drawn 426px wide, but the select and the email field
      are cramped at that width, so from the two-column breakpoint up it
      is given half as much again — capped by the column, which is what
      it actually gets on anything narrower than about 1500px.
  */
}
@media (min-width: 992px) {
  .brand-projects .p-resources .register {
    max-width: 639px;
  }
}
.brand-projects .p-resources .files-heading {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.brand-projects .p-resources .files .items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-resources .files .item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand-projects .p-resources .meta {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}
.brand-projects .p-resources .ir {
  order: -1;
}
@media (min-width: 992px) {
  .brand-projects .p-resources .ir {
    order: 0;
  }
}
.brand-projects .p-resources .ir img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}
@media (min-width: 992px) {
  .brand-projects .p-resources .ir img {
    min-height: 559px;
  }
}

/* -------------------------------------------------------------------------
    Contact
   ---------------------------------------------------------------------- */
.brand-projects .p-contact:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-surface-alt);
}
.brand-projects .p-contact {
  padding-top: 121px;
}
@media (min-width: 992px) {
  .brand-projects .p-contact {
    padding-top: 190px;
  }
}
.brand-projects .p-contact .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-contact .inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .brand-projects .p-contact .inner {
    gap: 148px;
  }
}
.brand-projects .p-contact .rc-heading-h1 {
  margin-bottom: 32px;
}
.brand-projects .p-contact .il .text {
  max-width: 380px;
}
.brand-projects .p-contact .details {
  margin-top: 32px;
}
.brand-projects .p-contact .detail + .detail {
  margin-top: 24px;
}
.brand-projects .p-contact .detail .label {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-contact .detail .label {
    font-size: 24px;
  }
}
.brand-projects .p-contact .detail .value {
  font-size: 16px;
  line-height: 1.3;
}
.brand-projects .p-contact .detail .value p {
  margin: 0;
}
.brand-projects .p-contact .form-heading {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-contact .form-heading {
    font-size: 24px;
  }
}

/* -------------------------------------------------------------------------
    Design principles

    Shares the accordion with p_faqs; only the left column differs.
   ---------------------------------------------------------------------- */
.brand-projects .p-principles:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-surface-alt);
}
.brand-projects .p-principles .il {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.brand-projects .p-principles .il .text {
  max-width: 400px;
}
.brand-projects .p-principles .ico-download {
  transform: rotate(90deg);
}
.brand-projects .p-principles .outcome {
  margin: 1em 0 0;
  font-size: 16px;
  line-height: 1.3;
}

/* -------------------------------------------------------------------------
    News index
   ---------------------------------------------------------------------- */
/*
    The whole index runs on one gradient, not a gradient hero above a white
    list.

    It is painted on <main> rather than on the hero and the index separately
    because two elements each drawing --gradient-brand each run the full ramp
    over their own height — blue to grey, then blue to grey again — which is a
    hard seam where they meet, not a continuous fade. One background box over
    the whole column is the only way it stays smooth from the top of the page
    to the bottom.
*/
.brand-projects.post-type-archive-project_news main {
  background-image: var(--gradient-brand);
}
.brand-projects.post-type-archive-project_news {
  /*
      The hero clears its background entirely — the flat --color-surface-alt
      the band style paints as well as any image. Either one is opaque over
      the whole hero, which is the top 400-odd pixels of the page, so the
      gradient underneath only appeared to begin below the H1.

      The :not() chain matches the specificity of rc-default-background on
      .p-hero.style-band. An editor-chosen background still wins, as it does
      there.
  */
}
.brand-projects.post-type-archive-project_news .p-hero.style-band:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background: none;
}

.brand-projects .p-news-index {
  /*
      Stated rather than inherited: the section is written by hand in
      archive-project_news.php, so it carries neither .p-section nor
      data-section and picked up none of the default block padding in
      _projects-base.scss — the filters started hard against the foot of the
      hero band. Same rhythm as that default.
  */
  padding-block: 48px;
}
@media (min-width: 992px) {
  .brand-projects .p-news-index {
    padding-block: 72px;
  }
}
.brand-projects .p-news-index .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 992px) {
  .brand-projects .p-news-index .inner {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}
@media (min-width: 1200px) {
  .brand-projects .p-news-index .inner {
    gap: 96px;
  }
}
.brand-projects .p-news-index .filters {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.brand-projects .p-news-index .panel-group {
  border-bottom: 1px solid currentColor;
}
.brand-projects .p-news-index .opener {
  margin: 0;
}
.brand-projects .p-news-index .opener button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0 16px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.brand-projects .p-news-index .opener .label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.brand-projects .p-news-index .opener .ico-plus,
.brand-projects .p-news-index .opener .ico-minus {
  width: 19px;
  height: 19px;
}
.brand-projects .p-news-index .opener .ico-plus {
  display: none;
}
.brand-projects .p-news-index {
  /*
      Both panels start open, which is the state the design draws, so the
      plus and minus swap the other way round from the FAQ accordion.
  */
}
.brand-projects .p-news-index .opener button[aria-expanded=false] .ico-plus {
  display: block;
}
.brand-projects .p-news-index .opener button[aria-expanded=false] .ico-minus {
  display: none;
}
.brand-projects .p-news-index .panel {
  padding-bottom: 24px;
}
.brand-projects .p-news-index .choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  /*
      Stated, not currentColor: an input does not inherit colour from
      its parent, so currentColor here resolved to the UA default black
      and drew the radios black against the navy labels. Same token the
      Gravity Forms radios use in _projects-forms.scss.
  */
}
.brand-projects .p-news-index .choice input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin: 0;
  appearance: none;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  cursor: pointer;
}
.brand-projects .p-news-index .choice input:checked {
  border-width: 7px;
}
.brand-projects .p-news-index .choice span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand-projects .p-news-index fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.brand-projects .p-news-index input[type=search] {
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 16px;
  background: none;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: inherit;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.03em;
  appearance: none;
  /*
      _forms.scss paints every placeholder on the site white for the
      Radius Care forms, unscoped, so it reached this field too and the
      word vanished into the band. The design (node I968:6303;214:1667)
      draws it in Deep Blue at 70%.
  */
}
.brand-projects .p-news-index input[type=search]::placeholder {
  color: var(--color-text);
  opacity: 0.7;
}
.brand-projects .p-news-index .arrow-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.brand-projects .p-news-index .results[aria-busy=true] {
  opacity: 0.5;
  transition: 0.2s opacity;
}
.brand-projects .p-news-index .featured {
  margin-bottom: 40px;
}
.brand-projects .p-news-index .items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 32px;
}
@media (min-width: 576px) {
  .brand-projects .p-news-index .items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brand-projects .p-news-index .empty {
  margin: 0;
  font-size: 18px;
}
.brand-projects .p-news-index .pagination {
  margin-top: 48px;
}
.brand-projects .p-news-index .pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-projects .p-news-index .pagination a,
.brand-projects .p-news-index .pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.brand-projects .p-news-index .pagination .current {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.brand-projects .p-news-index .pagination .ico-prev {
  transform: rotate(90deg);
}
.brand-projects .p-news-index .pagination .ico-next {
  transform: rotate(-90deg);
}

/* -------------------------------------------------------------------------
    News article
   ---------------------------------------------------------------------- */
.brand-projects .p-article .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.brand-projects .p-article .hero:not(.rc-bg):not(.rc-bg-gradient):not(.rc-bg-media) {
  background-color: var(--color-surface-alt);
}
@media (min-width: 992px) {
  .brand-projects .p-article .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brand-projects .p-article .hero .copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 121px 24px 40px;
}
@media (min-width: 992px) {
  .brand-projects .p-article .hero .copy {
    padding: 190px 48px 64px;
    max-width: 672px;
    margin-left: auto;
    width: 100%;
  }
}
.brand-projects .p-article .hero .rc-heading-h4 {
  margin: 0 0 24px;
}
.brand-projects .p-article .hero .caption {
  margin: 0;
}
.brand-projects .p-article .hero .media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
@media (min-width: 992px) {
  .brand-projects .p-article .hero .media img {
    min-height: 335px;
  }
}
.brand-projects .p-article .inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-block: 48px;
}
@media (min-width: 992px) {
  .brand-projects .p-article .inner {
    grid-template-columns: minmax(0, 1fr) 335px;
    gap: 96px;
    padding-block: 64px;
    align-items: start;
  }
}
.brand-projects .p-article .lead {
  margin-bottom: 24px;
}
.brand-projects .p-article .lead p {
  margin: 0 0 0.4em;
}
.brand-projects .p-article .body img {
  max-width: 100%;
  height: auto;
  margin-block: 24px;
}
.brand-projects .p-article .ir {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.brand-projects .p-article .ir .title {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
@media (min-width: 992px) {
  .brand-projects .p-article .ir .title {
    font-size: 24px;
  }
}
.brand-projects .p-article .latest .items {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.brand-projects .p-article .latest .items li + li {
  margin-top: 16px;
}
.brand-projects .p-article .latest .items a {
  font-size: 14px;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brand-projects .p-article .latest .items a:hover, .brand-projects .p-article .latest .items a:focus-visible {
  text-decoration: none;
}
.brand-projects .p-article .back {
  display: flex;
  justify-content: center;
  padding-bottom: 48px;
}
@media (min-width: 992px) {
  .brand-projects .p-article .back {
    padding-bottom: 72px;
  }
}
.brand-projects .p-article {
  /* One arrow asset, turned around, rather than a second nearly-identical file. */
}
.brand-projects .p-article .ico-back {
  transform: rotate(180deg);
}

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