/* AE Designs: measured logo colours, used as restrained interface accents. */
:root {
  --brand-mint: #33cb98;
  --brand-graphite: #474e54;
  --brand-deep: #147d65;
  --brand-wash: #f2faf7;
  --brand-on-mint: #1d2429;
  --ink: #30373b;
  --accent: var(--brand-deep);
  --light: var(--brand-mint);
}

/* Preserve the existing supplied white logo on dark surfaces. */
.brand > span { color: #fff; }
.brand > span > small { color: var(--brand-mint); }
.site-header .nav a:not(.nav-cta)::after { background: var(--brand-mint); }
.site-header .nav a:not(.nav-cta):is(:hover, :focus-visible, [aria-current="page"]) { color: var(--brand-mint); }
.site-header .nav a:not(.nav-cta):focus-visible::after { transform: scaleX(1); }
.site-header .nav .nav-cta { border-color: var(--brand-mint); }
.site-header .nav .nav-cta:is(:hover, :focus-visible) {
  color: var(--brand-on-mint);
  background: var(--brand-mint);
  border-color: var(--brand-mint);
}
.menu-btn { transition: color .8s ease, border-color .8s ease, background .8s ease; }
.menu-btn:is(:hover, :focus-visible, [aria-expanded="true"]) { border-color: var(--brand-mint); color: var(--brand-mint); }

.button { background: var(--brand-graphite); border-color: var(--brand-graphite); color: #fff; }
.button.secondary { background: transparent; color: var(--brand-graphite); }
.button:is(:hover, :focus-visible), .button.secondary:is(:hover, :focus-visible) {
  background: var(--brand-mint);
  border-color: var(--brand-deep);
  color: var(--brand-on-mint);
}
.round-button:is(:hover, :focus-visible):not(:disabled) {
  background: var(--brand-mint);
  border-color: var(--brand-deep);
  color: var(--brand-on-mint);
}
.signature-hero .round-button:is(:hover, :focus-visible):not(:disabled) {
  background: var(--brand-mint);
  border-color: var(--brand-mint);
  color: var(--brand-on-mint);
}
.underlink:is(:hover, :focus-visible), .back-link:is(:hover, :focus-visible) { color: var(--brand-deep); }
.signature-hero .underlink:is(:hover, :focus-visible),
.studio-copy .underlink:is(:hover, :focus-visible),
.footer a:is(:hover, :focus-visible) { color: var(--brand-mint); }

/* Colour arrives with the existing soft image and arrow movement. */
.project-image::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-architecture);
  pointer-events: none;
}
.project-card:is(:hover, :focus-visible) .project-image::after { transform: scaleX(1); }
.project-caption .arrow { transition: transform 1s var(--ease-architecture), color .8s ease; }
.project-card:is(:hover, :focus-visible) .project-caption .arrow { color: var(--brand-deep); }
.project-card:focus-visible .project-caption .arrow { transform: translate(5px, -3px); }
.service-row:is(:hover, :focus-visible) { background: var(--brand-wash); }
.service-row:is(:hover, :focus-visible) h3, .service-row:is(:hover, :focus-visible) .arrow { color: var(--brand-deep); }
.service-row h3, .service-row .arrow { transition: color .8s ease; }
.press-credit a:is(:hover, :focus-visible) .press-link { color: var(--brand-deep); }
.press-link { transition: color .8s ease; }

.workflow-tablist button:is(:hover, :focus-visible) { background: var(--brand-wash); color: var(--brand-deep); }
.workflow-tablist button[aria-selected="true"] {
  background: var(--brand-wash);
  color: var(--brand-graphite);
  border-bottom-color: var(--brand-deep);
}
.filter-bar button[aria-pressed="true"], .comparison-presets button[aria-pressed="true"] {
  background: var(--brand-wash);
  border-color: var(--brand-deep);
  color: var(--brand-deep);
}
.filter-bar button:hover { background: var(--brand-wash); color: var(--brand-deep); }
.comparison-controls input { accent-color: var(--brand-deep); }

.contact-band { background: var(--brand-wash); border-top: 1px solid #dceee6; }
.contact-band .eyebrow { color: var(--brand-deep); }
.field :is(input, textarea, select):focus { border-color: var(--brand-deep); background: var(--brand-wash); }
:is(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--brand-deep); }
.site-header :focus-visible, .footer :focus-visible, .studio-split :focus-visible { outline-color: var(--brand-mint); }
.signature-hero :focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

@media(max-width:550px) {
  .signature-hero .underlink:is(:hover, :focus-visible) { color: var(--brand-deep); }
  .signature-hero :focus-visible { outline-color: var(--brand-deep); }
}