/* Shared Character Text Flip Architecture (Motion.dev) */

.text-flip-inner {
  display: flex;
  flex-direction: column;
  height: 2.36em;
  transform: translateY(0%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.text-flip-face {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 1.18em;
  line-height: 1.18em;
  white-space: nowrap;
  color: inherit;
}

.text-flip-front {
  color: inherit;
}

.text-flip-back {
  color: inherit;
}

/* Fallback only when JS text-flip has not initialized */
.f3-work-card:hover .f3-title-flip:not([data-flip-initialized="true"]) .text-flip-inner,
.f3-work-card:hover .f3-title-flip:not([data-flip-initialized="true"]) .f3-title-face {
  transform: translateY(-50%);
}

/* Card Subtitle: Single line greyed out text at AT Aero Type C (no hover animation) */

/* Expand / Collapse Button Container */

/* Hidden projects container for smooth expand */

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .f3-featured-tag-row {
    margin-bottom: 32px;
  }
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

  .f3-work-card,
  .f3-work-card-media img,
  .f3-work-tag,
  .f3-featured-more-link {
    transition: none;
    transform: none;
    filter: none;
  }
}

/* Card 02: Landscape Monitor Showcase */

/* Card 03 Overlap Container with Giant Watermark Number */

/* Card Bottom Bar */

/* Right Column Contact Info Block */

/* Portfolio Header Bar inside Right Column */

/* Disciplines Ticker Bar */

/* ==========================================================================
   3. "Our Core SERVICES" EDITORIAL SECTION
   ========================================================================== */

/* Services Rows */

/* ==========================================================================
   4. GIANT BRAND BILLBOARD SECTION ("FUTURE THREE" / "N / P   D E S I G N")
   ========================================================================== */

/* ==========================================================================
   5. STUDIO OUTRO & CONTACT SECTION
   ========================================================================== */

/* Left: Featured Work Card (Matcha Latte / More Nutrition) */

/* Right: Inquiries & Contact Lockup */

/* ==========================================================================
   3-COLUMN EDITORIAL SERVICES DIRECTORY SECTION
   ========================================================================== */

/* Services Editorial Statement */

/* 3-Column Grid */

/* Full Line Selection Highlight Box Animation */

/* ==========================================================================
   SINGLE CONTINUOUS HAIRLINE DIVIDER WITH ARCHITECTURAL CORNER SQUARES
   ========================================================================== */
.f3-single-divider-row {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.f3-single-divider-line {
  width: 100%;
  height: 0;
  border-top: var(--intro-divider-thickness, 1px) solid var(--intro-divider-color, #282828);
  position: relative;
}

.f3-single-divider-line::before,
.f3-single-divider-line::after {
  content: '';
  position: absolute;
  width: var(--f3-divider-square-size, 2px);
  height: var(--f3-divider-square-size, 2px);
  background-color: var(--f3-divider-square-color, #e5e5e6);
  top: -1px;
  pointer-events: none;
  z-index: 2;
}

.f3-single-divider-line::before {
  left: 0;
}

.f3-single-divider-line::after {
  right: 0;
}

/* ==========================================================================
   EDITORIAL "GET IN TOUCH" CTA SECTION (2-Column Split Action Rows)
   ========================================================================== */
.f3-section-contact {
  width: 100%;
  height: auto;
  padding-top: 0;
  padding-bottom: 25px;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #030303;
}

.f3-contact-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

/* 2-Column Split CTA Layout */
.f3-contact-hero-stage {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding-top: var(--contact-divider-gap, 50px);
  padding-bottom: var(--contact-clocks-gap, 220px);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.f3-contact-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--f3-works-grid-gap, 25px);
  width: 100%;
  align-items: start;
  box-sizing: border-box;
}

.f3-contact-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 540px;
}

.f3-contact-hook-title {
  font-family: var(--type-aero-a-font, var(--font-retina, 'AT Aero Retina', sans-serif));
  font-size: var(--type-aero-a-size, 32px);
  font-weight: var(--type-aero-a-weight, 350);
  line-height: var(--type-aero-a-line, 37px);
  letter-spacing: var(--type-aero-a-spacing, -1.5px);
  color: var(--f3-text, #faf9fc);
  margin: 0;
  text-align: left;
  user-select: none;
}

.f3-contact-right-col {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-top: var(--contact-actions-offset-top, 25px);
}

.f3-contact-links-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.f3-contact-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 28px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #faf9fc;
  text-decoration: none;
  font-family: var(--type-aero-c-font, var(--font-primary, 'AT Aero', sans-serif));
  font-size: var(--type-aero-c-size, 20px);
  font-weight: var(--type-aero-c-weight, 400);
  line-height: var(--type-aero-c-line, 27.5px);
  letter-spacing: var(--type-aero-c-spacing, -1.2px);
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: color, opacity, border-color;
  transition: border-color 0.08s ease-out,
    color 0.08s ease-out,
    opacity 0.08s ease-out;
  transition-delay: 0s;
}

.f3-contact-action-row:first-child {
  padding-top: 0;
}

.f3-action-text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  pointer-events: none;
  user-select: none;
}

.f3-action-arrow {
  font-size: var(--type-aero-c-size, 20px);
  line-height: 1;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  transition: color 0.08s ease-out,
    opacity 0.08s ease-out;
  transition-delay: 0s;
}

/* Grey out unhovered rows super quickly (#626262 / 0.35 opacity) */
@supports selector(:has(*)) {
  .f3-contact-links-list:has(.f3-contact-action-row:hover) .f3-contact-action-row:not(:hover),
  .f3-contact-links-list:has(.f3-contact-action-row:focus-visible) .f3-contact-action-row:not(:focus-visible) {
    color: #626262;
    opacity: 0.35;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    transition: border-color 0.08s ease-out,
      color 0.08s ease-out,
      opacity 0.08s ease-out;
    transition-delay: 0s;
  }
}

@media (hover: hover) and (pointer: fine) {
  .f3-contact-action-row:hover,
  .f3-contact-action-row:focus-visible {
    color: #ffffff;
    opacity: 1;
    border-bottom-color: #ffffff; /* brightens the outline underneath the hovered text */
    transition: border-color 0.08s ease-out,
      color 0.08s ease-out,
      opacity 0.08s ease-out;
    transition-delay: 0s;
  }

  .f3-contact-action-row:hover .f3-action-arrow,
  .f3-contact-action-row:focus-visible .f3-action-arrow {
    transform: none; /* keep arrow static */
    color: #ffffff;
    opacity: 1;
    transition: color 0.08s ease-out,
      opacity 0.08s ease-out;
    transition-delay: 0s;
  }
}

.f3-contact-action-row:active {
  opacity: 0.85;
}

.f3-contact-action-row:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .f3-section-contact {
    min-height: auto;
  }

  .f3-contact-split-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 0;
  }

  .f3-contact-hook-title {
    font-size: clamp(28px, 6.5vw, 38px);
    line-height: 1.15;
    letter-spacing: -1.4px;
  }

  .f3-contact-action-row {
    padding: 22px 0;
  }

  .f3-contact-right-col {
    margin-top: 0;
  }
}

/* Bottom Corner Clocks Bar (25px from bottom black edge) */
.f3-contact-corners-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
  font-family: var(--type-mono-a-font, var(--font-mono, monospace));
  font-size: var(--type-mono-a-size, 11px);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  text-transform: uppercase;
  user-select: none;
}

.f3-contact-corner {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.f3-corner-label {
  color: rgba(255, 255, 255, 0.45);
}

.f3-clock-val {
  color: #faf9fc;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.f3-clock-tz {
  color: rgba(255, 255, 255, 0.45);
}