/* ==========================================================================
   Costi Cohen Homepage — R3 Figma Design
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   ========================================================================== */

/* --- Homepage-specific wrapper --- */
.cc-homepage {
  color: var(--cc-ink-2);
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  width: 100%;
  max-width: 100%;
}

.cc-home .cc-topbar {
  position: sticky;
  left: auto;
}


/* --- Shared --- */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 472px;
  max-width: 100%;
  height: 54px;
  border: 0.5px solid var(--cc-archive);
  background: var(--cc-bg);
  color: var(--cc-archive);
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.cc-btn:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
  border-color: var(--cc-dark-parchment);
}

.cc-btn--center {
  margin: 60px auto 0;
  display: flex;
}

/* --- Hero --- */
.cc-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 984px;
  overflow: hidden;
}

.cc-hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cc-hero__video iframe {
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100%;
  min-width: 177.78vh; /* 16:9 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.cc-hero__overlay {
  position: absolute;
  inset: 0;
  /* v0 scrim — darker at the base, lightest through the middle */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.20)
  );
  z-index: 1;
}

.cc-hero__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cc-hero__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cc-hero__scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-bg);
  z-index: 2;
}

/* Hero CTA — centred along the bottom, clearing the SCROLL DOWN label */
.cc-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 92px;
  pointer-events: none;
}

.cc-hero__content a {
  pointer-events: auto;
}

.cc-hero__inner {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 var(--cc-gutter);
  display: flex;
  justify-content: center;
}

/* Present to assistive tech and crawlers, invisible on screen. */
.cc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .cc-hero__actions {
    flex-direction: row;
  }
}

.cc-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  font-family: var(--cc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

/* Hero call to action.
   Set as a serif line with a single rule beneath it, matching the treatment
   used in the EDMs, rather than a bordered button. */
.cc-homepage .cc-hero__link {
  display: inline-block;
  padding: 0 4px 9px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  background: none;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: border-color 0.3s, opacity 0.3s;
}

.cc-homepage .cc-hero__link:hover,
.cc-homepage .cc-hero__link:focus {
  border-bottom-color: #fff;
  color: #fff;
  opacity: 0.82;
  outline: none;
}

@media (max-width: 768px) {
  .cc-homepage .cc-hero__link {
    font-size: 19px;
    padding-bottom: 7px;
  }
}

/* --- Top Bar (sticky) --- */
/* Topbar base styles now in topbar.css (loaded globally) */

/* --- Intro --- */
.cc-intro {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 120px var(--cc-gutter) 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cc-intro__text {
  max-width: 866px;
  text-align: center;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 60px;
}

/* --- Services --- */
.cc-services {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 100px var(--cc-gutter) 60px;
}

.cc-services__divider {
  display: none;
}

.cc-services__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  max-width: 533px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 73px;
}

.cc-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cc-services__card-image {
  width: 100%;
  aspect-ratio: 472 / 474;
  overflow: hidden;
  background: var(--cc-newsprint);
  margin-bottom: 21px;
}

.cc-services__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  transition: transform 0.6s ease;
}

.cc-services__card:hover .cc-services__card-image img {
  transform: scale(1.05);
}

.cc-services__card-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 15px;
}

.cc-services__card-desc {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 380px;
}

.cc-services__card-desc--muted {
  color: var(--cc-archive);
}

/* --- Featured in (press mastheads) ---
   A fixed row, not a carousel: the client settled on a small set that is always
   visible, so nothing that matters is hidden behind a scroll or a timer. */
/* Spacing follows the same rhythm as every other section on this page:
   26px from the top rule down to the content, 180px of air before the next
   section's rule. */
.cc-featured {
  width: 100%;
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-featured__divider {
  height: 1px;
  background: var(--cc-newsprint);
  margin-bottom: 26px;
}

.cc-featured__row {
  display: flex;
  align-items: center;
  gap: 56px;
}

.cc-featured__label {
  flex: 0 0 auto;
  font-family: var(--cc-font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  white-space: nowrap;
}

.cc-featured__viewport {
  flex: 1 1 auto;
  min-width: 0;
}

.cc-featured__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px 32px;
  margin: 0;
  padding: 0;
}

/* --- Marquee variant ---
   The track holds two identical sets. Shifting it by one set's width lands the
   duplicate exactly where the original began, so the loop has no visible seam.
   That distance is half the track plus half a gap, not a flat 50% — the track
   carries one more gap than a single set does. */
.cc-featured--marquee .cc-featured__viewport {
  overflow: hidden;
  /* Long fades so a logo leaving the track dissolves rather than being sliced
     mid-letterform at the edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 96px, #000 calc(100% - 96px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}

.cc-featured--marquee .cc-featured__list {
  --cc-featured-gap: 64px;
  width: max-content;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--cc-featured-gap);
  animation: cc-featured-scroll 38s linear infinite;
}

.cc-featured--marquee .cc-featured__viewport:hover .cc-featured__list,
.cc-featured--marquee .cc-featured__viewport:focus-within .cc-featured__list {
  animation-play-state: paused;
}

@keyframes cc-featured-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--cc-featured-gap) / 2))); }
}

/* On narrow screens an inline label leaves the track about 200px to scroll
   through, which reads as a slot machine. Stack it so the logos get the width. */
@media (max-width: 768px) {
  .cc-featured {
    padding-bottom: 90px;
  }

  .cc-featured__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .cc-featured__viewport {
    width: 100%;
  }

  .cc-featured--marquee .cc-featured__list {
    --cc-featured-gap: 44px;
    animation-duration: 26s;
  }
}

/* Anyone who has asked the OS to reduce motion gets the fixed row instead. */
@media (prefers-reduced-motion: reduce) {
  .cc-featured--marquee .cc-featured__list {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px 32px;
  }
  .cc-featured--marquee .cc-featured__item[aria-hidden="true"] {
    display: none;
  }
  .cc-featured--marquee .cc-featured__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Must not shrink: these are flex items sized by their own content, and the
   default flex-shrink squashed every logo to a third of its width. */
.cc-featured__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Logos are supplied in colour and stay in colour — the client was explicit
   that they preferred it over a washed-out monochrome treatment. */
.cc-featured__logo {
  display: block;
  width: auto;
  object-fit: contain;
}

/* Per-logo heights, normalised so each mark carries a similar visual weight
   despite aspect ratios running from 4:1 to 12:1. A single shared height makes
   the long wordmarks tower over the compact ones. */
.cc-featured__logo--afr            { height: 19px; }
.cc-featured__logo--the-australian { height: 16px; }
.cc-featured__logo--realcommercial { height: 23px; }
.cc-featured__logo--commo          { height: 21px; }
.cc-featured__logo--elite-agent    { height: 25px; }
.cc-featured__logo--green-street   { height: 23px; }

/* --- Insights --- */
.cc-insights {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-insights__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 35px;
}

.cc-insights__grid {
  display: grid;
  grid-template-columns: 472fr 961fr;
  gap: 0;
}

.cc-insights__list {
  padding-right: 20px;
  /* Shared first-column width so every article's date sits on one rail.
     Sized to fit the longest category label (INSIGHTS). */
  --cc-ins-meta-col: 82px;
}


.cc-insights__item {
  padding: 0 0 25px 0;
}

.cc-insights__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
}

.cc-insights__item-meta {
  display: grid;
  /* See insights.css — date takes the flexible column so READ MORE keeps
     its own width and never wraps into the date. No column-gap: it would
     shift the date off the rail it shares with the tabs above. */
  grid-template-columns: var(--cc-ins-meta-col) minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 21px;
  margin-top: 25px;
}

.cc-insights__item-cat {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

.cc-insights__item-date {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
}

.cc-homepage .cc-insights__item-link {
  justify-self: end;
  white-space: nowrap;
  padding-left: 16px;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.cc-insights__item-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink);
}

.cc-insights__item-title--featured {
  color: var(--cc-ink);
}

.cc-homepage .cc-insights__item-title a {
  color: inherit;
  text-decoration: none;
}

.cc-homepage .cc-insights__item-title a:hover {
  color: var(--cc-dark-parchment);
}

.cc-homepage .cc-insights__load-more {
  display: inline-block;
  margin-top: 25px;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Top aligns with the first article's rule — that rule now starts the list,
   where the removed NEWS/INSIGHTS label used to push it down 35px. */
.cc-insights__image {
  overflow: hidden;
  margin-left: 20px;
  position: relative;
}

.cc-insights__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hovered article's image sits on top of the default and fades in, so the
   swap never shows a gap while the new file decodes. */
.cc-insights__image-hover {
  opacity: 0;
  transition: opacity 0.45s ease;
}

.cc-insights__image--hovered .cc-insights__image-hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cc-insights__image-hover {
    transition: none;
  }
}

/* --- Portfolio --- */
.cc-portfolio {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-portfolio__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 26px;
}

.cc-portfolio__label {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-ink-2);
  margin-bottom: 73px;
}

.cc-portfolio__item {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.cc-portfolio__item-divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
}

.cc-portfolio__item-name {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--cc-archive);
  padding: 16px 0 10px;
  transition: color 0.2s;
}

.cc-portfolio__item:hover .cc-portfolio__item-name {
  color: var(--cc-ink);
}

.cc-portfolio__item-arrow {
  margin-left: auto;
  margin-right: 41px;
  color: var(--cc-archive);
  transition: color 0.2s, transform 0.2s;
}

.cc-portfolio__item:hover .cc-portfolio__item-arrow {
  color: var(--cc-ink);
  transform: translateX(4px);
}

/* --- Team --- */
.cc-team {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-team__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 25px;
}

.cc-team__content {
  display: grid;
  grid-template-columns: 493fr 963fr;
  gap: 0;
  margin-bottom: 120px;
}

.cc-team__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  max-width: 295px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-team__desc {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 39px;
  max-width: 596px;
}

.cc-team__image {
  width: calc(100% - var(--cc-gutter));
  margin-left: auto;
  max-width: 961px;
  aspect-ratio: 961 / 700;
  overflow: hidden;
}

.cc-team__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Why Us --- */
.cc-why {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-why__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 25px;
}

.cc-why__header {
  display: grid;
  grid-template-columns: 432fr 1052fr;
  gap: 0 60px;
  margin-bottom: 140px;
}

.cc-why__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  max-width: 432px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-why__intro {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-archive);
  max-width: 532px;
  /* Aligns this paragraph's cap-height with the heading's first line.
     Heading cap sits 11.84px below its line-box top, this text 5.18px. */
  padding-top: 7px;
}

.cc-why__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.cc-why__col {
  max-width: 333px;
  padding: 0 14px;
}

.cc-why__col:first-child {
  padding-left: 0;
}

.cc-why__col:last-child {
  padding-right: 0;
}

.cc-why__col-divider {
  width: 0;
  min-height: 326px;
  border-left: 0.5px solid var(--cc-archive);
}

.cc-why__col-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 21px;
}

.cc-why__col-desc {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-archive);
  max-width: 310px;
}

/* --- FAQs (reusable .cc-faq component, homepage spacing) --- */
.cc-hp-faq.cc-faq {
  padding: 0 var(--cc-gutter) 120px;
}

.cc-hp-faq .cc-faq__divider {
  margin-bottom: 26px;
}

/* Matches EXPLORE OUR PORTFOLIO above it; the shared component stays at 10px
   for the FAQs page and anywhere else it is embedded. */
.cc-hp-faq .cc-faq__label {
  font-size: 12px;
  margin-bottom: 60px;
}

.cc-hp-faq .cc-faq__question {
  padding: 25px 0 11px 0;
}

.cc-hp-faq .cc-faq__answer {
  padding: 40px 0 15px 4px;
}

.cc-hp-faq .cc-faq__answer p {
  max-width: 960px;
  margin-bottom: 16px;
}

.cc-hp-faq .cc-faq__answer p:last-child {
  margin-bottom: 0;
}

.cc-homepage .cc-hp-faq__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 39px;
  padding: 0 0 4px 0;
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: none;
}

.cc-homepage .cc-hp-faq__link:hover,
.cc-homepage .cc-hp-faq__link:focus,
.cc-homepage .cc-hp-faq__link:active {
  outline: none;
  background: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid currentColor;
  color: var(--cc-dark-parchment);
}

.cc-hp-faq__link-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.cc-homepage .cc-hp-faq__link:hover .cc-hp-faq__link-arrow {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .cc-hp-faq.cc-faq {
    padding: 0 var(--cc-gutter) 70px;
  }

  .cc-hp-faq .cc-faq__label {
    margin-bottom: 40px;
  }

  .cc-hp-faq .cc-faq__question {
    padding: 18px 0 8px 0;
  }

  .cc-hp-faq .cc-faq__answer {
    padding: 25px 0 12px 4px;
  }
}

/* --- Contact --- */
.cc-hp-contact {
  width: 100%;
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 180px;
}

.cc-hp-contact__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 25px;
}

.cc-hp-contact__grid {
  display: grid;
  grid-template-columns: 493fr 963fr;
  gap: 0;
  margin-bottom: 0;
}

.cc-homepage .cc-hp-contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 39px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  cursor: pointer;
}

.cc-homepage .cc-hp-contact__cta:hover,
.cc-homepage .cc-hp-contact__cta:focus,
.cc-homepage .cc-hp-contact__cta:active {
  outline: none;
  background: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid currentColor;
  color: var(--cc-dark-parchment);
}

.cc-hp-contact__cta-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.cc-homepage .cc-hp-contact__cta:hover .cc-hp-contact__cta-arrow {
  transform: translateX(4px);
}

.cc-hp-contact__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-hp-contact__desc {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-bottom: 16px;
  max-width: 596px;
}

.cc-homepage .cc-hp-contact__desc a {
  color: inherit;
  text-decoration: underline;
}

/* --- Homepage Footer Overrides --- */
.cc-homepage .cc-footer__nav a {
  transition: color 0.2s;
}

.cc-homepage .cc-footer__nav a:hover {
  color: var(--cc-ink);
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .cc-services__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cc-services__card-image {
    aspect-ratio: 4 / 3;
  }

  .cc-insights__grid {
    grid-template-columns: 1fr;
  }

  .cc-insights__list {
    border-right: none;
    padding-right: 0;
    margin-bottom: 40px;
  }

  .cc-insights__image {
    aspect-ratio: 16 / 9;
    margin-top: 0;
  }

  .cc-insights__image img {
    position: static;
  }

  .cc-why__header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cc-why__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .cc-why__col {
    max-width: 100%;
    padding: 0;
  }

  .cc-why__col-desc {
    max-width: 100%;
  }

  .cc-why__col-divider {
    width: 100%;
    height: 0;
    border-left: none;
    border-top: 0.5px solid var(--cc-archive);
  }

  .cc-team__content {
    grid-template-columns: 1fr;
  }

  .cc-hp-contact__grid {
    grid-template-columns: 1fr;
  }

  .cc-footer__content {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .cc-portfolio__item-name {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  :root {
    --cc-gutter: 20px;
  }

  .cc-hero {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    min-height: 0;
  }

  .cc-intro {
    padding: 60px var(--cc-gutter) 60px;
  }

  .cc-topbar__nav {
    display: none;
  }

  .cc-portfolio__item-name {
    font-size: 28px;
  }

  .cc-footer__content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cc-footer__bottom-links {
    flex-direction: column;
    gap: 16px;
  }

  .cc-footer__about {
    margin-left: 0;
  }

  .cc-btn {
    width: 100%;
  }

  .cc-team__image {
    width: 100%;
  }
}

/* ── STATS ── */
.cc-dev-stats {
  padding: 0 var(--cc-gutter);
  margin: 0 auto 100px;
  width: 100%;
  max-width: 1512px;
}

.cc-dev-stats__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 40px;
}

.cc-dev-stats__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 0;
}

/* Numbers share row 1, labels share row 2, so every number sits on the same
   baseline even when a label wraps to two lines. */
.cc-dev-stats__item {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}

.cc-dev-stats__number {
  align-self: end;
}

.cc-dev-stats__divider {
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  grid-row: 1 / -1;
  align-self: stretch;
  margin: 0 19px;
}

.cc-dev-stats__number {
  font-family: 'Austin News Deck', var(--cc-font-heading);
  font-weight: 400;
  font-size: clamp(48px, 5.5vw, 96px);
  line-height: 1.1;
  color: var(--cc-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-dev-stats__label {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  margin-top: 12px;
}

@media (max-width: 767px) {
  .cc-dev-stats__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 30px 0;
  }
  .cc-dev-stats__item {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }
  .cc-dev-stats__divider {
    display: none;
  }
}

/* ── Transparent topbar over hero, solid on scroll ── */
.cc-homepage .cc-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease;
  z-index: 100;
}

.cc-homepage .cc-topbar__logo a,
.cc-homepage .cc-topbar__center a,
.cc-homepage .cc-topbar__nav a,
.cc-homepage .cc-topbar__contact {
  color: var(--cc-bg, #fafcf9);
  transition: color 0.35s ease;
}

.cc-homepage .cc-topbar__logo img {
  filter: brightness(0) invert(1);
  transition: filter 0.35s ease;
}

.cc-homepage .cc-topbar__menu span {
  background: var(--cc-bg, #fafcf9);
  transition: background 0.35s ease;
}

/* Scrolled state — solid white, dark text (matches default topbar) */
.cc-homepage .cc-topbar--scrolled {
  background: var(--cc-bg, #fafcf9);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.cc-homepage .cc-topbar--scrolled .cc-topbar__logo a,
.cc-homepage .cc-topbar--scrolled .cc-topbar__center a,
.cc-homepage .cc-topbar--scrolled .cc-topbar__nav a,
.cc-homepage .cc-topbar--scrolled .cc-topbar__contact {
  color: var(--cc-ink, #1e1e1e);
}

.cc-homepage .cc-topbar--scrolled .cc-topbar__logo img {
  filter: none;
}

.cc-homepage .cc-topbar--scrolled .cc-topbar__menu span {
  background: var(--cc-ink, #1e1e1e);
}