/*
 * The Complete Company design layer. Loaded after the page styles and ccc-brand.css, so it
 * restyles the captured pages freely. ccc-design.js places the drawings from ccc-art.js.
 */
/* Colours, buttons, links and the line drawings come from ccc-brand.css, which loads first. */

/* ------------------------------------------------------------- Header */

.header {
  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

.header.ccc-header--stuck {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(107, 29, 34, 0.88) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  animation: ccc-header-in 0.5s var(--ccc-ease) both;
}

.header.ccc-header--stuck .header-announcement-bar-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.header--menu-open .header.ccc-header--stuck {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header-nav-item > a,
.header-nav-folder-title {
  position: relative;
  background-image: none !important;
}

.header-nav-folder-title-text {
  background-image: none !important;
}

.header-nav-item > a::after,
.header-nav-folder-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--ccc-brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ccc-ease);
}

.header-nav-item > a:hover::after,
.header-nav-folder-title:hover::after,
.header-nav-item--active > a::after,
.header-nav-item--active .header-nav-folder-title::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-nav-item--active > a,
.header-nav-item--active .header-nav-folder-title {
  text-decoration: none !important;
}

.header-nav-folder-content {
  border-radius: 12px;
  box-shadow: var(--ccc-shadow);
  overflow: hidden;
}

/* Try EstateOS sits beside Contact Us, as it does in the EstateOS header. It is the
   quieter of the two: an outline on the maroon bar (.ccc-btn--outline-light in ccc-brand.css). */
/* The captured header never shrinks the logo and navigation, so with two buttons the bar ran off
   the right edge. The navigation now gives way instead. */
.header-display-desktop .header-title-nav-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

/* Both header buttons share the EstateOS header's size. */
.header .header-actions-action--cta .btn {
  padding: 0.85em 1.45em !important;
  white-space: nowrap;
}

.header-display-desktop .header-nav-item {
  white-space: nowrap;
}

.header .ccc-estateos-cta .btn {
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  background-color: transparent !important;
  color: #fff !important;
}

.header .ccc-estateos-cta .btn:hover {
  border-color: #fff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* Between 1024px and 1199px the bar is tight, so the EstateOS link and LinkedIn icon step aside for
   the Try EstateOS button (both stay in the footer). Narrower than that the button is in the menu. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-display-desktop .header-nav-item--external,
  .header-display-desktop .header-actions-action--social {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .header-actions-action--cta.ccc-estateos-cta {
    display: none !important;
  }
}

/* On tablets the narrow header has room beside the centred logo, so Try EstateOS shows on the left.
   On phones it is in the menu with Contact Us. */
@media (min-width: 560px) and (max-width: 767px) {
  .header-display-mobile .header-actions {
    display: flex !important;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translateY(-50%);
  }

  .header-display-mobile .header-actions-action {
    display: none !important;
  }

  .header-display-mobile .header-actions-action--cta.ccc-estateos-cta {
    display: block !important;
    margin: 0;
  }

  .header-display-mobile .ccc-estateos-cta .btn {
    padding: 0.6em 1.1em !important;
    font-size: 14px !important;
  }
}

.header-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header-menu-cta .ccc-estateos-cta {
  border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
  background-color: transparent !important;
  color: #fff !important;
}

/* ------------------------------------------------------------ Buttons */

.sqs-block-button-element,
.sqs-button-element--primary:not(.header-skip-link),
.form-button-wrapper button,
.newsletter-form-button {
  /* Round on one line, a soft rectangle when a narrow column wraps the label. */
  border-radius: var(--ccc-radius-pill) !important;
  transition:
    transform 0.35s var(--ccc-ease),
    box-shadow 0.35s var(--ccc-ease),
    background-color 0.3s ease,
    color 0.3s ease !important;
}

.sqs-block-button-element:hover,
.sqs-button-element--primary:not(.header-skip-link):hover,
.form-button-wrapper button:hover,
.newsletter-form-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--ccc-shadow-lift);
  opacity: 1 !important;
}

.sqs-block-button-element:active,
.form-button-wrapper button:active {
  transform: translateY(0);
}

/* Label and arrow sit side by side, so a wrapped label keeps its arrow beside it. */
.sqs-block-button-element,
.form-button-wrapper button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sqs-block-button-element::after,
.form-button-wrapper button::after {
  flex: 0 0 auto;
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.55em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.35s var(--ccc-ease);
}

.sqs-block-button-element:hover::after,
.form-button-wrapper button:hover::after {
  transform: translateX(4px);
}

/* The narrow newsletter box floats its button, so the privacy note ran up underneath it. */
.newsletter-form-footnote {
  clear: both;
  margin-top: 22px !important;
}

/* In the narrow layout the button runs past the bottom of its box. */
.newsletter-form-has-small-container .newsletter-form-footnote {
  padding-top: 42px;
}

/* -------------------------------------------------------------- Forms */

.sqs-site-style-form .form-item .field-element,
.sqs-site-style-form .form-item select,
.newsletter-form-field-element {
  border-radius: var(--ccc-radius-field) !important;
  border-color: var(--ccc-line) !important;
  background-color: var(--ccc-paper) !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease !important;
}

.sqs-site-style-form .form-item .field-element:hover,
.sqs-site-style-form .form-item select:hover {
  border-color: var(--ccc-line-strong) !important;
}

.sqs-site-style-form .form-item .field-element:focus,
.sqs-site-style-form .form-item select:focus,
.newsletter-form-field-element:focus {
  outline: none !important;
  border-color: var(--ccc-maroon) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px var(--ccc-maroon-soft) !important;
}

.sqs-site-style-form .form-item.error .field-element {
  border-color: var(--ccc-error) !important;
}

/* ------------------------------------------------------------- Images */

main .sqs-block-image .fluid-image-container,
main .sqs-block-image .sqs-image-shape-container-element {
  border-radius: var(--ccc-radius);
  overflow: hidden;
}

main .sqs-block-image .fluid-image-container img {
  transition: transform 1.2s var(--ccc-ease) !important;
}

main .sqs-block-image:hover .fluid-image-container img {
  transform: scale(1.045);
}

/* -------------------------------------------------------------- Cards */

.summary-item,
.summary-block-wrapper,
.sqs-block-summary-v2 .summary-item-list-container {
  border-radius: var(--ccc-radius);
}

.summary-thumbnail-outer-container {
  border-radius: 10px;
  overflow: hidden;
}

.summary-thumbnail-image {
  transition: transform 1s var(--ccc-ease) !important;
}

.summary-item:hover .summary-thumbnail-image {
  transform: scale(1.06);
}

.ccc-value-item .list-item-content {
  position: relative;
  padding: 22px 18px 20px;
  border-radius: var(--ccc-radius);
  transition:
    transform 0.5s var(--ccc-ease),
    box-shadow 0.5s var(--ccc-ease),
    background-color 0.5s ease;
}

.ccc-value-item .list-item-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24%;
  right: 24%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ccc-maroon);
  transform: scaleX(0);
  transition: transform 0.5s var(--ccc-ease);
}

@media (max-width: 767px) {
  .ccc-value-item .list-item-content {
    padding: 4px 12px;
  }
}

.ccc-value-item:hover .list-item-content {
  transform: translateY(-6px);
  background-color: #fff;
  box-shadow: var(--ccc-shadow);
}

.ccc-value-item:hover .list-item-content::before {
  transform: scaleX(1);
}

.blog-basic-grid--container,
.blog-item {
  transition: transform 0.5s var(--ccc-ease);
}

.blog-basic-grid--container:hover {
  transform: translateY(-6px);
}

.blog-basic-grid .image-wrapper,
.blog-basic-grid .blog-basic-grid--image {
  border-radius: var(--ccc-radius);
  overflow: hidden;
}

.blog-basic-grid .image-wrapper img {
  transition: transform 1s var(--ccc-ease) !important;
}

.blog-basic-grid--container:hover .image-wrapper img {
  transform: scale(1.06);
}

/* ------------------------------------------------------------ Spacing */

/* Modern line spacing: the captured theme set body text at 2.16 and headings at 1.68. */
:root {
  --body-font-line-height: 1.65em;
  --heading-font-line-height: 1.22em;
}

.list-section-title p {
  line-height: 1.25 !important;
}

.sqs-html-content h1,
.sqs-html-content h2,
.sqs-html-content h3,
.sqs-html-content h4 {
  margin-top: 0.9em;
  margin-bottom: 0.45em;
}

.sqs-html-content > :first-child {
  margin-top: 0;
}

.sqs-html-content > :last-child {
  margin-bottom: 0;
}

.sqs-html-content p + p,
.sqs-html-content p + ul,
.sqs-html-content ul + p {
  margin-top: 0.85em;
}

.sqs-html-content li p {
  margin: 0;
}

.sqs-html-content li + li {
  margin-top: 0.5em;
}

/* Rows follow their content (ccc-design.js); blocks with no height of their own keep their shape.
   The footer keeps its own grid. */
html.ccc-fluid main .fluid-engine {
  grid-template-rows: none !important;
  grid-auto-rows: minmax(0, auto) !important;
}

html.ccc-fluid main .fe-block.ccc-sized {
  aspect-ratio: var(--ccc-ratio-m, auto);
}

/* A button filled its rows; with rows sized by content it takes its own height instead. */
html.ccc-fluid main .fe-block .sqs-block-button-element {
  height: auto !important;
  min-height: 3em;
}

html.ccc-fluid main .fe-block .sqs-block-button-container {
  height: auto !important;
}

@media (min-width: 768px) {
  html.ccc-fluid main .fe-block.ccc-sized {
    aspect-ratio: var(--ccc-ratio-d, auto);
  }
}

/* Sections: even padding and no forced height, except the hero at the top of a page. */
.page-section.section-height--small:not(.ccc-hero),
.page-section.section-height--medium:not(.ccc-hero),
.page-section.section-height--large:not(.ccc-hero) {
  min-height: 0 !important;
}

main .page-section.section-height--small > .content-wrapper {
  padding-top: clamp(28px, 3.6vw, 56px) !important;
  padding-bottom: clamp(28px, 3.6vw, 56px) !important;
}

main .page-section.section-height--medium > .content-wrapper,
main .page-section.section-height--large > .content-wrapper {
  padding-top: clamp(40px, 5.2vw, 84px) !important;
  padding-bottom: clamp(40px, 5.2vw, 84px) !important;
}

main .page-section.ccc-hero > .content-wrapper {
  padding-bottom: clamp(40px, 5.2vw, 84px) !important;
}

main .page-section.section-height--custom > .content-wrapper {
  padding-top: clamp(24px, 3vw, 48px) !important;
  padding-bottom: clamp(24px, 3vw, 48px) !important;
}

.user-items-list {
  padding-top: clamp(28px, 3.6vw, 56px) !important;
  padding-bottom: clamp(28px, 3.6vw, 56px) !important;
}

.list-section-title {
  padding-bottom: clamp(20px, 2.4vw, 36px) !important;
}

footer .page-section > .content-wrapper {
  padding-top: clamp(8px, 1.5vw, 24px) !important;
  padding-bottom: clamp(24px, 2.6vw, 40px) !important;
}

/* Blog lists and post navigation */
.blog-basic-grid .blog-article-spacer {
  height: 14px !important;
}

.blog-basic-grid .blog-title {
  margin-bottom: 10px !important;
}

.item-pagination {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(24px, 3vw, 40px) clamp(16px, 4vw, 48px) !important;
}

.item-pagination-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 20px;
  border: 1px solid var(--ccc-line);
  border-radius: var(--ccc-radius);
  background: #fff;
  transition:
    transform 0.4s var(--ccc-ease),
    box-shadow 0.4s var(--ccc-ease),
    border-color 0.3s ease;
}

.item-pagination-link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

.item-pagination-link:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--ccc-shadow);
}

.item-pagination-prev-next {
  display: block !important;
  margin-bottom: 4px;
  color: var(--ccc-maroon);
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.item-pagination-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.35 !important;
}

.item-pagination-icon {
  flex: 0 0 auto;
  color: var(--ccc-maroon);
}

@media (max-width: 767px) {
  .item-pagination {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .item-pagination-link--next {
    grid-column: 1;
  }
}

/* ----------------------------------------------------- Latest work card */

.fe-block:has(> .sqs-block-summary-v2) {
  align-self: start;
}

.fe-block > .sqs-block-summary-v2 {
  height: auto !important;
  border-radius: var(--ccc-radius);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
}

.sqs-block-summary-v2 .summary-item-list {
  overflow-x: visible;
  overflow-y: clip;
  transition: height 0.5s var(--ccc-ease);
}

.sqs-block-summary-v2 .summary-item {
  vertical-align: top !important;
}

.sqs-block-summary-v2 .summary-content {
  display: flex;
  flex-direction: column;
}

.sqs-block-summary-v2 .summary-excerpt {
  display: block !important;
  order: -1;
  margin: 0 0 6px !important;
  color: var(--ccc-maroon);
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sqs-block-summary-v2 .summary-excerpt p {
  margin: 0 !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
}

.sqs-block-summary-v2 .summary-read-more-link {
  display: inline-block !important;
  align-self: flex-start;
  margin-top: 12px !important;
  color: var(--ccc-maroon) !important;
  font-size: 0.85rem !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.35s var(--ccc-ease);
}

.sqs-block-summary-v2 .summary-item:hover .summary-read-more-link {
  transform: translateX(4px);
}

/* --------------------------------------------------------- Logo banner */

.ccc-logo-wall > .list-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 14px 16px !important;
  border: 1px solid var(--ccc-line);
  border-radius: var(--ccc-radius);
  background: #fff;
  transition:
    transform 0.5s var(--ccc-ease),
    box-shadow 0.5s var(--ccc-ease),
    border-color 0.4s ease;
}

.ccc-logo-wall > .list-item:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--ccc-shadow);
}

.ccc-logo-wall .list-item-media {
  display: flex !important;
  width: 100% !important;
  height: 84px;
  margin: 0 0 12px !important;
  align-items: center;
  justify-content: center;
}

.ccc-logo-wall .list-item-media-inner {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  align-items: center;
  justify-content: center;
}

.ccc-logo-wall .list-item-media-inner img {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.ccc-logo-wall .list-item-content {
  width: 100%;
}

.ccc-logo-wall .list-item-content__title {
  max-width: none !important;
  margin: 0 !important;
  font-size: 0.92rem !important;
  line-height: 1.3 !important;
  color: var(--ccc-ink-soft);
}

@media (min-width: 900px) {
  .ccc-logo-wall {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  .ccc-logo-wall > .ccc-logo-copy {
    display: none !important;
  }
}

@media (max-width: 899px) {
  .ccc-logo-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .ccc-logo-wall {
    display: flex !important;
    width: max-content !important;
    gap: 0 !important;
    padding: 6px 0 14px !important;
    animation: ccc-marquee calc(var(--ccc-logos, 10) * 3.4s) linear infinite;
  }

  .ccc-logo-wall:hover,
  .ccc-logo-wall:active {
    animation-play-state: paused;
  }

  .ccc-logo-wall > .list-item {
    flex: 0 0 auto;
    width: 172px;
    margin: 0 12px 0 0 !important;
  }

  .ccc-logo-wall .list-item-media {
    height: 64px;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .ccc-logo-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ccc-logo-wall {
    animation: none;
  }

  .ccc-logo-wall > .list-item {
    scroll-snap-align: start;
  }

  .ccc-logo-wall > .ccc-logo-copy {
    display: none !important;
  }
}

@keyframes ccc-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------- Icons */

.ccc-icon {
  display: flex;
  width: 64px;
  height: 64px;
  margin: 0 0 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ccc-maroon);
  background: radial-gradient(circle at 30% 25%, #fff 0%, var(--ccc-blush) 70%);
  box-shadow: inset 0 0 0 1px rgba(107, 29, 34, 0.12);
  position: relative;
}

.ccc-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(107, 29, 34, 0.28);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ccc-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2;
}

.ccc-icon--center {
  margin-left: auto;
  margin-right: auto;
}

.ccc-icon--end {
  margin-left: auto;
}

[data-section-theme="black"] .ccc-icon,
[data-section-theme="dark"] .ccc-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ccc-value-item:hover .ccc-icon::after,
.sqs-html-content:hover > .ccc-icon::after,
.list-item-content__text-wrapper:hover > .ccc-icon::after {
  opacity: 1;
  animation: ccc-spin 14s linear infinite;
}

/* ------------------------------------------------ Section title accents */

.ccc-title::after {
  content: "";
  display: block;
  width: 76px;
  height: 11px;
  margin-top: 0.45em;
  color: var(--ccc-maroon);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) left center / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 2px 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ccc-ease) 0.15s;
}

.ccc-title--center::after {
  margin-left: auto;
  margin-right: auto;
  transform-origin: center;
}

.ccc-title--end::after {
  margin-left: auto;
  transform-origin: right;
}

.ccc-title.is-drawn::after {
  transform: scaleX(1);
}

[data-section-theme="black"] .ccc-title::after,
[data-section-theme="dark"] .ccc-title::after {
  color: var(--ccc-brass);
}

/* ---------------------------------------------------------- Quotations */

.ccc-quote {
  position: relative;
}

.ccc-quote-mark {
  position: absolute;
  top: -1.05em;
  left: -0.35em;
  width: 84px;
  color: var(--ccc-maroon);
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
}

.ccc-quote-mark--end {
  left: auto;
  right: -0.2em;
}

.ccc-quote-mark svg {
  fill: currentColor;
  stroke: none;
}

.ccc-quote-mark .f {
  transform: scale(0.6) rotate(-8deg);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity 0.8s ease,
    transform 1.1s var(--ccc-ease);
}

.ccc-quote-mark.is-drawn .f {
  transform: none;
}

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

.ccc-timeline {
  position: relative;
  padding-left: 30px;
}

.ccc-timeline::before {
  content: "";
  position: absolute;
  top: 0.7em;
  bottom: 0.7em;
  left: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--ccc-maroon), var(--ccc-brass));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 2.2s var(--ccc-ease-draw);
}

.ccc-timeline.is-drawn::before {
  transform: scaleY(1);
}

.ccc-timeline__item {
  position: relative;
}

.ccc-timeline__item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--ccc-maroon),
    0 0 0 6px var(--ccc-maroon-soft);
  transform: scale(0);
  transition: transform 0.6s var(--ccc-ease) calc(var(--d, 0s) + 0.3s);
}

.ccc-timeline__item.is-drawn::before {
  transform: scale(1);
}

/* ---------------------------------------------------------------- Hero */

.ccc-hero .section-border {
  overflow: hidden;
}

.ccc-hero .section-background {
  transform: translate3d(0, var(--parallax, 0), 0);
  will-change: transform;
}

.ccc-hero .section-background img {
  animation: ccc-settle 16s var(--ccc-ease) both;
}

.ccc-hero .section-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 8, 9, 0.55) 0%, rgba(20, 8, 9, 0.12) 62%, rgba(20, 8, 9, 0) 100%),
    radial-gradient(120% 70% at 0% 100%, rgba(107, 29, 34, 0.55) 0%, rgba(107, 29, 34, 0) 60%);
  pointer-events: none;
}

/* The grid itself is .ccc-blueprint--light from ccc-brand.css; here it fades towards the top. */
.ccc-hero .ccc-blueprint {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.6) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.6) 100%);
  opacity: 0.35;
  transition: opacity 0.6s ease;
}

.ccc-hero--pointer .ccc-blueprint {
  opacity: 1;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
  mask-image: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
}

.ccc-hero .content-wrapper {
  position: relative;
  z-index: 2;
}

.ccc-hero-art {
  position: absolute;
  right: max(3vw, 24px);
  bottom: 14px;
  width: min(30vw, 420px);
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.ccc-hero-art svg {
  stroke-width: 1.5;
}

@media (max-width: 1023px) {
  .ccc-hero-art {
    width: min(42vw, 340px);
    opacity: 0.45;
  }
}

@media (max-width: 767px) {
  .ccc-hero-art {
    display: none;
  }
}

.ccc-words .ccc-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.55em, 0);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--ccc-ease) var(--w, 0s),
    transform 0.9s var(--ccc-ease) var(--w, 0s),
    filter 0.9s var(--ccc-ease) var(--w, 0s);
}

.ccc-words.is-revealed .ccc-word {
  opacity: 1;
  transform: none;
  filter: none;
}

.ccc-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 24px;
  height: 38px;
  margin-left: -12px;
  border: 1.6px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  z-index: 2;
  pointer-events: none;
}

.ccc-scroll-cue span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--ccc-brass);
  animation: ccc-scroll-cue 2s var(--ccc-ease) infinite;
}

@media (max-width: 1023px) {
  .ccc-scroll-cue {
    display: none;
  }
}

/* --------------------------------------------------------------- Scene */

.ccc-scene {
  position: absolute;
  z-index: 1;
  color: var(--ccc-maroon);
  pointer-events: none;
}

.ccc-scene svg {
  stroke-width: 1.4;
}

.ccc-scene .ccc-art__ghost {
  stroke: var(--ccc-brass);
  stroke-dasharray: 5 6;
}

/* ------------------------------------------------------ Footer skyline */

/* The footer is the brand kit's near-black, the same as the EstateOS footer. */
footer .page-section .section-border,
footer .page-section .section-background {
  background-color: var(--ccc-night) !important;
}

footer .ccc-has-skyline {
  padding-top: clamp(84px, 10vw, 152px);
}

.ccc-skyline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(84px, 10vw, 152px);
  color: rgba(255, 255, 255, 0.34);
  overflow: hidden;
  pointer-events: none;
}

.ccc-skyline svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.2;
}

footer .page-section a:not(.sqs-block-button-element):not(.newsletter-form-button) {
  text-decoration-color: rgba(255, 255, 255, 0.45) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px;
  transition:
    color 0.3s ease,
    text-decoration-color 0.3s ease,
    text-underline-offset 0.3s ease;
}

footer .page-section a:not(.sqs-block-button-element):not(.newsletter-form-button):hover {
  color: var(--ccc-brass) !important;
  text-decoration-color: var(--ccc-brass) !important;
  text-underline-offset: 6px;
}

/* ------------------------------------------- Progress and back to top */

.ccc-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  pointer-events: none;
}

.ccc-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ccc-brass), var(--ccc-brass-light));
  transform: scaleX(var(--read, 0));
  transform-origin: left;
}

.ccc-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ccc-maroon);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(27, 16, 17, 0.6);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ccc-ease),
    background-color 0.3s ease;
}

.ccc-to-top.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ccc-to-top:hover {
  background: var(--ccc-maroon-deep);
}

.ccc-to-top svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ccc-to-top path {
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.35s var(--ccc-ease);
}

.ccc-to-top:hover path {
  transform: translateY(-2px);
}

.ccc-to-top__track {
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 2;
}

.ccc-to-top__ring {
  stroke: var(--ccc-brass);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ccc-scroll, 0));
  transform: rotate(-90deg);
  transform-origin: center;
}

body.header--menu-open .ccc-to-top {
  display: none;
}

/* --------------------------------------------------- Entrance motion */

/* The observed element stays unclipped so the page script can see it scroll into view. */
@media (prefers-reduced-motion: no-preference) {
  html.ccc-has-animations [data-animation-role="image"]:not(.ccc-in-view) {
    opacity: 1;
    transform: none;
  }

  html.ccc-has-animations [data-animation-role="image"] > * {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.3s var(--ccc-ease-draw);
  }

  html.ccc-has-animations [data-animation-role="image"]:not(.ccc-in-view) > * {
    clip-path: inset(0 0 100% 0);
  }

  html.ccc-has-animations [data-animation-role="image"] img {
    transition: transform 1.6s var(--ccc-ease) !important;
  }

  html.ccc-has-animations [data-animation-role="image"]:not(.ccc-in-view) img {
    transform: scale(1.12);
  }
}

/* --------------------------------------------------------- Keyframes */

/* Animates top rather than transform: a transform would trap the fixed mobile menu inside the header. */
@keyframes ccc-header-in {
  from {
    top: -120px;
  }
  to {
    top: 0;
  }
}

@keyframes ccc-settle {
  from {
    transform: scale(1.14);
  }
  to {
    transform: scale(1.02);
  }
}

@keyframes ccc-scroll-cue {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ----------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ccc-title::after,
  .ccc-timeline::before,
  .ccc-timeline__item::before,
  .ccc-words .ccc-word {
    transition: none !important;
  }

  .ccc-hero .section-background img,
  .ccc-scroll-cue span,
  .header.ccc-header--stuck,
  .ccc-icon::after {
    animation: none !important;
  }

  .ccc-hero .section-background {
    transform: none;
  }

  .ccc-scroll-cue {
    display: none;
  }
}

@media print {
  .ccc-to-top,
  .ccc-progress,
  .ccc-scroll-cue {
    display: none !important;
  }
}