/************
Mazu Partners – Modern, Minimal, A11-inspired One-Page Site
************/
:root {
 --black: #000;
 --white: #fff;
 --grey: #ccc;
 --accent: #FF8900;
 --accent-hover: #e67b00;
 --accent-light: #ff9a32;
 --accent-dark: #cc6e00;
 --blue: #151926;
 --header-bg: #151926;
 --container-max: 1320px;
 --radius: 16px;
 --transition: 0.25s cubic-bezier(.4,0,.2,1);
 --font-body: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
 --font-heading: 'DM Serif Display', Georgia, serif;
}

html {
 box-sizing: border-box;
 scroll-behavior: smooth;
 font-size: 13px;
}
*, *:before, *:after {
 box-sizing: inherit;
}

.status-bar {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background: #ffffff;
 color: var(--white);
 font-family: var(--font-body);
 font-weight: 900;
 font-size: 1.05rem;
 letter-spacing: 0.04em;
 z-index: 1000;
 border-bottom: none;
 box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-left: 48px;
 padding-right: 48px;
 padding-top: 6px;
 padding-bottom: 5px;
 overflow: visible;
 transform: translateY(0);
 opacity: 1;
 transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.18s cubic-bezier(.4,0,.2,1);
 will-change: transform;
}
.status-bar.is-hidden {
 transform: translateY(calc(-100% - 16px));
 opacity: 0;
 pointer-events: none;
}
@media (max-width: 900px) {
 .status-bar {
 padding-left: 20px;
 padding-right: 20px;
  padding-top: 6px;
  padding-bottom: 4px;
 }
}
@media (max-width: 600px) {
 .status-bar {
 padding-left: 20px;
 padding-right: 20px;
  /* Match desktop bar padding so hexagon spill aligns */
  padding-top: 6px;
  padding-bottom: 5px;
 }
}

.status-brand {
 color: var(--white);
 text-decoration: none;
 font-weight: 400;
 font-size: 1.05rem;
 letter-spacing: 0.04em;
 min-width: 0;
 display: flex;
 align-items: flex-end;
 align-self: flex-end;
 overflow: visible;
 position: relative;
 z-index: 2;
}
.status-brand:visited {
 color: var(--white);
}
.status-brand:hover {
 opacity: 1;
}

.logo-image {
 height: 118px;
 width: auto;
 display: block;
 margin-bottom: -42px;
 vertical-align: bottom;
 filter:
  drop-shadow(0.8px 0 0 rgba(255,255,255,0.55))
  drop-shadow(-0.8px 0 0 rgba(255,255,255,0.55))
  drop-shadow(0 0.8px 0 rgba(255,255,255,0.55))
  drop-shadow(0 -0.8px 0 rgba(255,255,255,0.55))
  drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
@media (max-width: 900px) {
 .logo-image {
 height: 98px;
 margin-bottom: -32px;
 }
}
@media (max-width: 600px) {
 .logo-image {
 /* Match desktop hexagon scale + spill below bar on mobile */
 height: 118px;
 margin-bottom: -42px;
 }
}

.status-nav {
 display: flex;
 gap: 32px;
 align-items: center;
}
.mobile-menu-btn {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 margin-left: 18px;
 z-index: 1100;
}
.menu-icon {
 display: block;
 width: 28px;
 height: 3px;
 background: var(--accent);
 border-radius: 2px;
 position: relative;
}
.menu-icon::before,
.menu-icon::after {
 content: '';
 position: absolute;
 left: 0;
 width: 28px;
 height: 3px;
 background: var(--accent);
 border-radius: 2px;
 transition: 0.2s;
}
.menu-icon::before { top: -9px; }
.menu-icon::after { top: 9px; }
.mobile-menu {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background: #ffffff;
 border-radius: 0;
 box-shadow: none;
 padding: 0;
 min-width: unset;
 z-index: 2000;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.mobile-menu.open {
 display: flex;
}
.mobile-menu a {
 color: #2a324c;
 text-decoration: none;
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 2rem;
 letter-spacing: 0.4px;
 text-transform: uppercase;
 padding: 24px 0;
 display: block;
 width: 100%;
 text-align: center;
 transition: background 0.2s;
}
.mobile-menu a:hover {
 background: rgba(42,50,76,0.1);
}
.mobile-menu-btn {
 z-index: 2100;
}

@media (max-width: 600px) {
 .status-nav {
 display: none;
 }
 .mobile-menu-btn {
 display: block;
 }
 .menu-icon,
 .menu-icon::before,
 .menu-icon::after {
 background: #2a324c;
 }
}

.status-nav a {
 color: #2A324C;
 text-decoration: none;
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 14px;
 letter-spacing: 0.4px;
 text-transform: uppercase;
 transition: color var(--transition);
}
.status-nav a:hover {
 color: var(--accent);
}

body {
 background: #ffffff;
 color: #333;
 font-family: var(--font-body);
 margin: 0;
 padding: 0;
 min-height: 100vh;
 font-size: 14px;
 line-height: 1.7;
 font-weight: 400;
 padding-top: 0;
}

h1, h2, h3 {
 font-family: var(--font-heading);
 font-weight: 400;
}

.container {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 32px;
}

.site-container {
 width: 100%;
 max-width: var(--container-max);
 margin: 0 auto;
 padding-left: 48px;
 padding-right: 48px;
 box-sizing: border-box;
}

/* One horizontal gutter: site-container already pads; nested .container only max-width/center */
.site-container > .container {
 padding-left: 0;
 padding-right: 0;
}

/***** HERO *****/
.hero {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 text-align: center;
 overflow: hidden;
 background: #ffffff;
 margin-top: 0;
 padding-top: 0;
 top: 0;
 /* Deep links (e.g. from business card pages) clear the fixed header */
 scroll-margin-top: 88px;
}

.hero::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 1px;
 background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent);
 box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 z-index: 1;
 margin-top: 0;
}

.hero-bg-img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #ffffff;
 overflow: hidden;
 margin-top: 0;
 padding-top: 0;
}

.circle-video-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
 z-index: 0;
 pointer-events: none;
}

.compass-container {
 position: absolute;
 right: -300px;
 top: 50%;
 transform: translateY(-50%) rotate(10deg);
 z-index: 0;
 pointer-events: none;
}

.compass-image {
 width: 1000px;
 height: 1000px;
 object-fit: contain;
 opacity: 0.5;
}

.ocean-waves-bg {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 80%;
 z-index: 0;
 overflow: hidden;
 background: linear-gradient(to bottom, rgba(1,16,39,0.05) 0%, rgba(1,16,39,0.15) 100%);
}

.wave-ripple {
 position: absolute;
 border-radius: 50%;
 border: 2px solid rgba(1,16,39,0.3);
 pointer-events: none;
}

.wave-ripple-1 {
 width: 200px;
 height: 200px;
 top: 20%;
 left: 10%;
 animation: rippleExpand 8s ease-out infinite;
 animation-delay: 0s;
}

.wave-ripple-2 {
 width: 300px;
 height: 300px;
 top: 30%;
 left: 60%;
 animation: rippleExpand 10s ease-out infinite;
 animation-delay: 2s;
}

.wave-ripple-3 {
 width: 250px;
 height: 250px;
 top: 50%;
 left: 30%;
 animation: rippleExpand 9s ease-out infinite;
 animation-delay: 4s;
}

.wave-ripple-4 {
 width: 180px;
 height: 180px;
 top: 15%;
 left: 80%;
 animation: rippleExpand 7s ease-out infinite;
 animation-delay: 1s;
}

.wave-ripple-5 {
 width: 320px;
 height: 320px;
 top: 60%;
 left: 70%;
 animation: rippleExpand 11s ease-out infinite;
 animation-delay: 3s;
}

.wave-ripple-6 {
 width: 220px;
 height: 220px;
 top: 40%;
 left: 5%;
 animation: rippleExpand 8.5s ease-out infinite;
 animation-delay: 5s;
}

.wave-pattern {
 position: absolute;
 width: 100%;
 height: 100%;
 background: radial-gradient(ellipse at center, transparent 0%, rgba(255,137,0,0.1) 40%, rgba(255,137,0,0.2) 60%, transparent 100%);
 pointer-events: none;
}

.wave-pattern-1 {
 top: 0;
 left: 0;
 animation: waveMove 20s linear infinite;
 background: radial-gradient(ellipse 800px 400px at 20% 30%, transparent 0%, rgba(1,16,39,0.15) 30%, rgba(1,16,39,0.25) 50%, transparent 70%);
}

.wave-pattern-2 {
 top: 0;
 left: 0;
 animation: waveMove 25s linear infinite reverse;
 background: radial-gradient(ellipse 1000px 500px at 70% 50%, transparent 0%, rgba(1,16,39,0.12) 35%, rgba(1,16,39,0.22) 55%, transparent 75%);
 animation-delay: -5s;
}

.wave-pattern-3 {
 top: 0;
 left: 0;
 animation: waveMove 18s linear infinite;
 background: radial-gradient(ellipse 600px 300px at 50% 70%, transparent 0%, rgba(1,16,39,0.1) 25%, rgba(1,16,39,0.2) 45%, transparent 65%);
 animation-delay: -10s;
}

.ocean-surface {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
}

.hero-bg {
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 z-index: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 pointer-events: none;
}
.hero-blob {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 min-width: 400px;
 min-height: 300px;
 max-width: 90vw;
 max-height: 60vh;
 filter: blur(2px);
}
.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,0.1);
 z-index: 1;
 pointer-events: none;
}

.hero-content {
 position: relative;
 z-index: 2;
 max-width: 900px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 text-align: left;
 padding-left: 24px;
 padding-right: 24px;
 align-self: center;
}
.hero h1,
.hero-headline {
 color: var(--blue);
 font-size: clamp(2.8rem, 6.5vw, 4.5rem);
 font-weight: 900;
 letter-spacing: -0.02em;
 margin-top: 0;
 margin-bottom: 4px;
 line-height: 1.08;
}
.hero-tagline {
 color: var(--blue);
 font-size: clamp(2.5rem, 6vw, 4rem);
 font-weight: 900;
 letter-spacing: -0.02em;
 margin-top: 8px;
 margin-bottom: 24px;
 line-height: 1.08;
}
.hero-body {
 color: var(--blue);
 font-size: clamp(1.05rem, 2.2vw, 1.3rem);
 font-weight: 400;
 line-height: 1.6;
 margin-bottom: 48px;
 max-width: 76ch;
 padding-right: 0;
 margin-right: -80px;
}
.hero-accent {
 color: var(--accent);
}
.hero-sub {
 color: var(--blue);
 font-size: 1.2rem;
 font-weight: 700;
 margin-bottom: 48px;
 line-height: 1.5;
}
.hero-cta {
 display: flex;
 gap: 20px;
 flex-wrap: nowrap;
 justify-content: center;
 align-items: center;
}
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: inherit;
 font-weight: 700;
 font-size: 1rem;
 letter-spacing: 0.01em;
 text-transform: none;
 padding: 18px 40px;
 border: none;
 border-radius: 999px;
 cursor: pointer;
 background: var(--accent);
 color: var(--white);
 transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
 box-shadow: 0 2px 12px 0 rgba(255,137,0,0.15);
 line-height: 1;
 vertical-align: middle;
}
.btn-primary { background: var(--accent); color: #fff; border: 2px solid var(--accent); }
.btn-primary:hover { 
 background: var(--accent);
 transform: none;
 box-shadow: 0 2px 12px 0 rgba(255,137,0,0.15);
}
.btn-secondary {
 background: transparent;
 color: var(--accent);
 border: 2px solid var(--accent);
}
.btn-secondary:hover {
 background: transparent;
 color: var(--accent);
 transform: none;
 box-shadow: 0 2px 12px 0 rgba(255,137,0,0.15);
}

/***** ABOUT US SECTION *****/
.about-us-section {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 100px 32px 80px 32px;
}

.about-us-header {
 margin-bottom: 60px;
 position: relative;
}

.about-us-heading {
 color: var(--blue);
 font-size: 3rem;
 font-weight: 900;
 margin-bottom: 16px;
 text-align: left;
 letter-spacing: -0.03em;
 position: relative;
}

.about-us-accent-line {
 width: 120px;
 height: 4px;
 background: var(--accent);
 margin-top: 8px;
 border-radius: 2px;
}

.about-us-content {
 display: flex;
 flex-direction: column;
}

.about-us-box {
 background: linear-gradient(135deg, rgba(255,137,0,0.08) 0%, rgba(255,137,0,0.03) 100%);
 border-left: 4px solid var(--accent);
 padding: 40px 48px;
 border-radius: 8px;
}

.about-us-box p {
 color: #333;
 font-size: 1.15rem;
 line-height: 1.9;
 text-align: left;
 margin: 0 0 24px 0;
}

.about-us-box p:last-child {
 margin-bottom: 0;
}

.about-us-box strong {
 color: var(--accent);
 font-weight: 700;
}

.highlight {
 color: var(--accent);
 font-weight: 700;
 position: relative;
}

.accent-text {
 color: var(--accent);
 font-weight: 600;
}

@media (max-width: 900px) {
 .about-us-section {
 padding: 70px 20px 60px 20px;
 }
 
 .about-us-header {
 margin-bottom: 50px;
 }
 
 .about-us-heading {
 font-size: 2.5rem;
 margin-bottom: 12px;
 }
 
 .about-us-accent-line {
 width: 100px;
 }
 
 .about-us-box {
 padding: 32px 36px;
 }
 
 .about-us-box p {
 font-size: 1.1rem;
 margin-bottom: 20px;
 }
}

@media (max-width: 600px) {
 .about-us-section {
 padding: 50px 16px 40px 16px;
 }
 
 .about-us-header {
 margin-bottom: 40px;
 }
 
 .about-us-heading {
 font-size: 2rem;
 margin-bottom: 10px;
 }
 
 .about-us-accent-line {
 width: 80px;
 height: 3px;
 }
 
 .about-us-box {
 padding: 28px 24px;
 }
 
 .about-us-box p {
 font-size: 1.05rem;
 line-height: 1.8;
 margin-bottom: 20px;
 }
}

/***** FOCUS SECTION *****/
.focus-cards {
 display: flex;
 flex-direction: column;
 gap: 32px;
 width: 100%;
 max-width: var(--container-max);
 margin: 0 auto;
 margin-top: 32px;
}
.focus-card {
 background: #011027;
 border-radius: var(--radius);
 padding: 40px 48px;
 width: 100%;
 flex: 1 1 0;
 min-width: 260px;
 max-width: none;
 box-sizing: border-box;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 margin-bottom: 32px;
 border: none;
 cursor: pointer;
 min-height: 340px;
 transform: translateY(0);
 transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 900px) {
 .focus-cards {
 flex-direction: column;
 gap: 18px;
 }
 .focus-card {
 max-width: 100%;
 min-height: unset;
 height: auto;
 }
}
@media (max-width: 600px) {
 .focus-card {
 min-height: unset;
 height: auto;
 }
}
.focus-card h2 {
 color: var(--accent);
 font-size: 1.4rem;
 font-weight: 700;
 margin: 0 0 12px 0;
 text-align: left;
 transition: color var(--transition);
}
.focus-card .focus-sub {
 color: #ffffff;
 font-size: 1.05rem;
 font-weight: 400;
 text-align: left;
 transition: color var(--transition);
}
.focus-card:hover {
 background: #011027;
 transform: translateY(0);
 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.focus-card:hover h2 {
 color: var(--accent);
}
.focus-card:hover .focus-sub {
 color: #ffffff;
}

/***** ABOUT US SECTION *****/
.about {
 background: #ffffff;
 padding: 100px 0 50px 0;
 position: relative;
}

.about-section {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 32px;
 position: relative;
}

.about-header {
 margin-bottom: 24px;
 position: relative;
}

.about-heading {
 color: var(--blue);
 font-size: 3rem;
 font-weight: 900;
 margin-bottom: 0;
 text-align: left;
 letter-spacing: -0.03em;
 position: relative;
}

.about-accent-line {
 width: 120px;
 height: 4px;
 background: var(--accent);
 margin-top: 8px;
 margin-bottom: 32px;
 border-radius: 2px;
}

.about-intro {
 color: var(--blue);
 font-size: 1.2rem;
 line-height: 1.7;
 margin: 0 0 48px 0;
 max-width: 65ch;
}

.about-content {
 padding-top: 8px;
}

.about-mission-vision {
 padding: 36px 40px 40px;
 background: linear-gradient(135deg, rgba(255,137,0,0.06) 0%, rgba(1,16,39,0.02) 100%);
 border-left: 4px solid var(--accent);
 border-radius: 0 10px 10px 0;
 margin-bottom: 0;
}

.about-mission-vision-inner {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 48px;
}

.about-mission-vision-text {
 flex: 1;
 min-width: 0;
}

.about-hex-in-orange {
 flex-shrink: 0;
 display: flex;
 justify-content: center;
 align-items: center;
}

.about-hex-in-orange .about-hex-svg {
 width: 340px;
 height: 340px;
}

.about-mission-vision .about-block-title:not(:first-child) {
 margin-top: 32px;
}

.about-hex-inner-content-only {
 grid-template-columns: 1fr;
}

.about-block-title {
 color: var(--accent);
 font-size: 1.5rem;
 font-weight: 800;
 letter-spacing: -0.02em;
 margin: 0 0 16px 0;
}

.about-block-text {
 color: var(--blue);
 font-size: 1.12rem;
 line-height: 1.7;
 margin: 0 0 16px 0;
}

.about-block-text:last-child {
 margin-bottom: 0;
}

.about-mission-lead {
 font-size: 1.12rem;
 font-weight: 400;
 margin-bottom: 16px;
}

.about-block {
 padding: 28px 0 32px;
}

.about-block:last-child {
 padding-bottom: 0;
}

.about-label {
 font-size: 0.8rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 18px;
}

.about-main {
 font-family: var(--font-heading);
 font-size: 1.6rem;
 line-height: 1.7;
 color: var(--blue);
 margin: 0 0 10px 0;
}

.about-sub {
 font-size: 1rem;
 font-style: italic;
 color: rgba(21,25,38,0.8);
 margin: 0;
}

.about-main-formula {
 font-size: 1.5rem;
 font-weight: 600;
}

.about-sub-formula {
 color: rgba(21,25,38,0.85);
}

.about-body {
 margin: 18px 0 0;
 max-width: 66ch;
 font-size: 1.03rem;
 line-height: 1.7;
 color: var(--blue);
}

.about-formula-multiply {
 color: var(--accent);
 font-weight: 600;
}

/***** ABOUT HEXAGON ROTATOR *****/
.about-hex-section {
 background: #ffffff;
 padding: 20px 0 80px;
}

.about-hex-inner {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 32px;
 display: grid;
 grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
 gap: 64px;
 align-items: center;
}

.about-hex-inner.about-hex-inner-content-only {
 grid-template-columns: 1fr;
}

.about-hex-inner-content-only .about-hex-content {
 padding-left: 0;
}

.about-hex-visual {
 display: flex;
 justify-content: center;
 align-items: center;
}

@media (min-width: 901px) {
 .about-hex-visual {
  /* Center hex against the two buckets (not the section heading). */
  transform: translateY(24px);
 }
}

.about-hex-svg {
 width: 420px;
 height: 420px;
 overflow: visible;
}

.about-hex-ring polygon {
 fill: none;
 stroke: rgba(255,137,0,0.22);
 stroke-width: 1.8;
}

.about-hex-ring-outer {
 transform-origin: 140px 140px;
 animation: aboutHexRotate 60s linear infinite;
}

.about-hex-ring-middle {
 transform-origin: 140px 140px;
 animation: aboutHexRotate 45s linear infinite reverse;
}

.about-hex-ring-inner {
 transform-origin: 140px 140px;
 animation: aboutHexRotate 30s linear infinite;
}

.about-hex-center {
 fill: var(--accent);
 opacity: 0.9;
}

.about-hex-dot {
 fill: var(--accent);
 stroke: none;
}

.about-hex-label-group text {
 font-family: inherit;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 fill: var(--blue);
}

.about-hex-label-group {
 cursor: pointer;
 opacity: 0.55;
 transition: opacity var(--transition);
}

.about-hex-label-group.is-active {
 opacity: 1;
}

.about-hex-label-group.is-active text {
 fill: var(--accent);
 font-weight: 700;
}

.about-hex-label-group.is-active .about-hex-dot {
 fill: var(--accent);
 stroke: var(--accent-dark);
}

.about-hex-content {
 position: relative;
 padding-left: 8px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 width: 100%;
 box-sizing: border-box;
}

.about-hex-content .about-mission-vision {
 width: 100%;
 box-sizing: border-box;
}

.about-what-we-build.about-mission-vision {
 background: rgba(42,50,76,0.1);
 border-left-color: #151926;
}

.about-what-we-build .about-block-title {
 color: #151926;
}

.about-hex-buckets {
 display: flex;
 flex-direction: row;
 gap: 24px;
 margin-top: 8px;
 align-items: stretch;
}

.about-hex-bucket {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 padding: 28px 24px;
 border: 1px solid rgba(0,0,0,0.08);
 border-radius: 10px;
 background: rgba(255,255,255,0.6);
 transition: background 0.25s ease, border-color 0.25s ease;
}

.about-hex-bucket:hover {
 background: #151926;
 border-color: #151926;
}

.about-hex-bucket:hover .about-hex-title,
.about-hex-bucket:hover .about-hex-text {
 color: #ffffff;
}

.about-hex-title,
.about-hex-text {
 transition: color 0.25s ease;
}

.about-hex-header-row {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr) auto;
 gap: 16px;
 align-items: center;
}

.about-hex-copy {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.about-hex-label {
 color: var(--accent);
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 800;
 letter-spacing: -0.02em;
 margin: 0 0 16px 0;
}

.about-hex-title {
 font-family: var(--font-heading);
 font-size: 1.8rem;
 font-weight: 900;
 letter-spacing: -0.02em;
 margin: 0 0 12px 0;
 color: var(--blue);
}

.about-hex-text {
 font-size: 1.02rem;
 line-height: 1.7;
 color: #333;
 max-width: 60ch;
}

.about-hex-arrow {
 border: none;
 background: transparent;
 color: var(--accent);
 font-size: 1.8rem;
 padding: 4px 6px;
 cursor: pointer;
 transition: color var(--transition), transform var(--transition);
}
.about-hex-arrow:hover {
 color: var(--accent-dark);
 transform: translateY(-1px);
}

@keyframes aboutHexRotate {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
 .about-hex-inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: 0 20px;
 }
 .about-hex-section {
  padding: 32px 0 60px;
 }
 .about-hex-content {
  text-align: left;
 }
 .about-hex-buckets {
  flex-direction: column;
 }
 .about-hex-svg {
  width: 300px;
  height: 300px;
 }
}

@media (max-width: 900px) {
 .about-block {
  padding: 24px 0 28px;
 }
 .about-main {
  font-size: 1.4rem;
 }
}

/***** TEAM SECTION *****/
.team {
 background: #ffffff;
 padding: 100px 0;
 position: relative;
}

.team-section {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 32px;
}

.team-header {
 margin-bottom: 60px;
 position: relative;
}

.team-heading {
 color: var(--blue);
 font-size: 3rem;
 font-weight: 900;
 margin-bottom: 16px;
 text-align: left;
 letter-spacing: -0.03em;
 position: relative;
}

.team-section {
 position: relative;
}

.team-accent-line {
 width: 120px;
 height: 4px;
 background: var(--accent);
 margin-top: 8px;
 margin-bottom: 60px;
 border-radius: 2px;
}

.team-cards {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 32px;
 width: 100%;
}

.team-card {
 background: #ffffff;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
 transition: all 0.3s ease;
 display: flex;
 flex-direction: column;
 cursor: pointer;
 text-decoration: none;
 color: inherit;
}

.team-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.team-card-image {
 width: 100%;
 height: 300px;
 background: #f5f5f5;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
}

.team-card-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.team-image-manuel {
 transform: scale(1.12);
 transform-origin: center;
}

.team-placeholder {
 color: #999;
 font-size: 1.2rem;
 font-weight: 600;
}

.team-card-info {
 padding: 32px;
 flex: 1;
 display: flex;
 flex-direction: column;
}

.team-name {
 color: var(--blue);
 font-size: 1.5rem;
 font-weight: 900;
 margin: 0 0 8px 0;
 letter-spacing: -0.02em;
}

.team-role {
 color: var(--accent);
 font-size: 1.1rem;
 font-weight: 600;
 margin: 0 0 16px 0;
}

.team-bio {
 color: #333;
 font-size: 1rem;
 line-height: 1.7;
 margin: 0;
}

.team-linkedin {
 display: inline-block;
 margin-top: 8px;
 color: var(--blue);
 text-decoration: none;
 transition: opacity var(--transition), color var(--transition);
}
.team-linkedin:hover {
 opacity: 0.85;
 color: var(--blue);
}
.team-linkedin svg {
 display: block;
}

@media (max-width: 1200px) {
 .team-cards {
 grid-template-columns: repeat(2, 1fr);
 gap: 32px;
 }
}

@media (max-width: 900px) {
 .about {
 padding: 80px 0;
 }
 .about-heading {
 font-size: 2.5rem;
 margin-bottom: 12px;
 }
 .about-accent-line {
 width: 100px;
 margin-bottom: 32px;
 }
 .about-intro {
 font-size: 1.15rem;
 margin-bottom: 40px;
 }
 .about-mission,
 .about-vision {
 padding: 28px 24px 32px;
 }
 .about-block-title {
 font-size: 1.35rem;
 }
 .about-mission-vision {
 padding: 28px 24px 32px;
 }
 .about-mission-vision-inner {
 flex-direction: column;
 align-items: stretch;
 gap: 32px;
 }
 .about-hex-in-orange {
 justify-content: center;
 }
 .about-hex-in-orange .about-hex-svg {
 width: 280px;
 height: 280px;
 }
 .about-mission-vision .about-block-title:not(:first-child) {
 margin-top: 28px;
 }

 .portfolio {
 padding: 80px 0;
 }
 .portfolio-heading {
 font-size: 2.5rem;
 margin-bottom: 12px;
 }
 .portfolio-accent-line {
 width: 100px;
 margin-bottom: 32px;
 }
 .portfolio-logo {
 width: 160px;
 height: 88px;
 }
 .portfolio-ticker-set {
 gap: 40px;
 }
 .portfolio-ticker-gap {
 width: 40px;
 }

 .team {
 padding: 80px 0;
 }
 
 .team-header {
 margin-bottom: 50px;
 }
 
 .team-heading {
 font-size: 2.5rem;
 margin-bottom: 12px;
 }
 
 .team-accent-line {
 width: 100px;
 margin-bottom: 50px;
 }
 
 .team-cards {
 grid-template-columns: repeat(2, 1fr);
 gap: 24px;
 }
}

@media (max-width: 600px) {
 .about {
 padding: 60px 0;
 }
 .about-section {
 padding: 0 20px;
 }
 .about-heading {
 font-size: 2rem;
 margin-bottom: 10px;
 }
 .about-accent-line {
 width: 80px;
 height: 3px;
 margin-bottom: 28px;
 }
 .about-intro {
 font-size: 1.05rem;
 margin-bottom: 36px;
 }
 .about-mission-vision {
 padding: 24px 20px 28px;
 border-radius: 0 8px 8px 0;
 }
 .about-mission-vision .about-block-title:not(:first-child) {
 margin-top: 24px;
 }
 .about-block-title {
 font-size: 1.25rem;
 }
 .about-mission-lead {
 margin-bottom: 14px;
 }
 .about-block-text {
 font-size: 1rem;
 }

 .portfolio {
 padding: 60px 0;
 }
 .portfolio-section {
 padding: 0 20px;
 }
 .portfolio-heading {
 font-size: 2rem;
 margin-bottom: 10px;
 }
 .portfolio-accent-line {
 width: 80px;
 height: 3px;
 margin-bottom: 28px;
 }
 .portfolio-ticker-wrap {
 padding: 32px 0 48px;
 }
 .portfolio-logo {
 width: 130px;
 height: 72px;
 }
 .portfolio-logo span {
 font-size: 0.8rem;
 }
 .portfolio-ticker-set {
 gap: 28px;
 }
 .portfolio-ticker-gap {
 width: 28px;
 }
 .portfolio-ticker-track {
 animation-duration: 24s;
 }

 .team {
 padding: 60px 0;
 }
 
 .team-section {
 padding: 0 20px;
 }
 
 .team-header {
 margin-bottom: 40px;
 }
 
 .team-heading {
 font-size: 2rem;
 margin-bottom: 10px;
 }
 
 .team-accent-line {
 width: 80px;
 height: 3px;
 margin-bottom: 40px;
 }
 
 .team-cards {
 grid-template-columns: 1fr;
 gap: 24px;
 width: 100%;
 max-width: 300px;
 margin-left: auto;
 margin-right: auto;
 }
 
 .team-card-image {
 height: 360px;
 }
 .team-card-image img {
 object-position: top center;
 }
 
 .team-card-info {
 padding: 24px;
 }
}

/***** DIFFERENTIATORS SECTION *****/
.differentiator-cards {
 display: flex;
 gap: 32px;
 flex-wrap: wrap;
 justify-content: center;
 margin-top: 32px;
}
.differentiator-card {
 background: #f5f5f5;
 border-radius: var(--radius);
 padding: 36px 28px;
 min-width: 220px;
 max-width: 260px;
 text-align: center;
 color: #333;
 font-weight: 600;
 font-size: 1.08rem;
 box-shadow: 0 2px 16px 0 rgba(255,137,0,0.1);
 display: flex;
 flex-direction: column;
 align-items: center;
 transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
 cursor: pointer;
 border: 2px solid var(--accent);
}
.differentiator-card h3 {
 color: var(--accent);
 font-size: 1.08rem;
 font-weight: 700;
 margin: 0;
 transition: color var(--transition);
}
.differentiator-card .diff-icon {
 color: var(--accent);
 transition: color var(--transition);
}
.differentiator-card:hover {
 background: var(--accent);
 color: var(--black);
 box-shadow: 0 4px 32px 0 rgba(255,137,0,0.25);
 transform: translateY(-8px) scale(1.05);
}
.differentiator-card:hover h3,
.differentiator-card:hover .diff-icon {
 color: var(--black);
}

/***** ABOUT SECTION *****/
.about-inner {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 24px;
 margin-top: 32px;
}
.about-divider {
 width: 100%;
 border: none;
 border-top: 1.5px solid #222;
 margin: 0 0 24px 0;
}
.about-text {
 color: var(--grey);
 font-size: 1.1rem;
 font-weight: 400;
 text-align: center;
 margin-bottom: 0;
}
.about-logos {
 display: flex;
 gap: 18px;
 flex-wrap: wrap;
 justify-content: center;
}
.about-logo {
 background: #181818;
 color: var(--grey);
 border-radius: 8px;
 padding: 8px 18px;
 font-size: 0.98rem;
 font-weight: 500;
 letter-spacing: 0.01em;
 opacity: 0.7;
}

/***** PORTFOLIO SECTION *****/
.portfolio {
 background: #ffffff;
 padding: 100px 0 0;
 position: relative;
 overflow: hidden;
}

.portfolio-section {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 32px;
 position: relative;
}

.portfolio-header {
 margin-bottom: 40px;
 position: relative;
}

.portfolio-heading {
 color: var(--blue);
 font-size: 3rem;
 font-weight: 900;
 margin-bottom: 16px;
 text-align: left;
 letter-spacing: -0.03em;
 position: relative;
}

.portfolio-accent-line {
 width: 120px;
 height: 4px;
 background: var(--accent);
 margin-top: 8px;
 margin-bottom: 40px;
 border-radius: 2px;
}

.portfolio-ticker-wrap {
 width: 100vw;
 margin-left: calc(50% - 50vw);
 overflow: hidden;
 padding: 40px 0 60px;
}

.portfolio-ticker-track {
 display: flex;
 align-items: center;
 width: max-content;
 animation: portfolioTicker 40s linear infinite;
}

.portfolio-ticker-set {
 display: flex;
 align-items: center;
 gap: 56px;
 flex-shrink: 0;
}

.portfolio-ticker-gap {
 flex-shrink: 0;
 width: 56px;
}

.portfolio-logo {
 flex-shrink: 0;
 width: 200px;
 height: 110px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
 box-sizing: border-box;
}

.portfolio-logo img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
}

@keyframes portfolioTicker {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-33.333%);
 }
}

@media (max-width: 600px) {
 .portfolio-ticker-track {
  animation-duration: 24s;
 }
}

/***** CONTACT SECTION *****/
.contact {
 position: relative;
 background: #011027;
 z-index: 0;
 margin-bottom: 0;
 padding-bottom: 0;
 min-height: 700px;
 display: flex;
 align-items: center;
 overflow: hidden;
}
.contact::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: url('assets/Frankfurt Skyline_v01.jpg') center center / cover no-repeat;
 filter: grayscale(100%);
 z-index: 0;
 pointer-events: none;
}
.contact-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.65);
 z-index: 1;
 pointer-events: none;
}

.contact-video-wrap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 pointer-events: none;
 overflow: hidden;
}

.contact-video {
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.2;
}

.contact-inner {
 position: relative;
 z-index: 3;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 justify-content: center;
 width: 100%;
}

.contact-heading-main {
 color: var(--accent);
 font-family: var(--font-heading);
 font-size: 2.4rem;
 font-weight: 700;
 margin-bottom: 14px;
 text-align: left;
 letter-spacing: -0.02em;
}
.contact-sub {
 color: var(--white);
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.85;
 font-weight: 400;
 margin-bottom: 18px;
 max-width: 42rem;
 text-align: left;
}
.contact-email {
 color: var(--white);
 font-family: var(--font-heading);
 font-size: 2rem;
 font-weight: 700;
 letter-spacing: 0.02em;
 margin-top: 8px;
}

.contact-email-link {
 color: inherit;
 text-decoration: none;
 border-bottom: 1px solid transparent;
}

.contact-email-link:hover {
 color: var(--accent);
 border-bottom-color: var(--accent);
}

/***** TEAM MEMBER PAGE *****/
.team-member-page {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

.team-member-page .status-bar {
 flex: 0 0 auto;
}

.team-member-page .team-member-main {
 padding: 120px 0 80px;
 flex: 1 0 auto;
 min-height: 0;
}

.team-member-page .footer-section {
 margin-top: auto;
}

.team-member-inner {
 display: grid;
 grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
 gap: 64px;
 align-items: start;
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 0 32px;
 }

.team-member-inner--card-only {
 grid-template-columns: 1fr;
 justify-items: center;
 max-width: 420px;
 padding: 0 24px;
}

.team-member-inner--card-only .team-member-left {
 position: static;
 align-items: center;
 text-align: center;
 width: 100%;
}

.team-member-left {
 position: sticky;
 top: 120px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 16px;
 }

.team-member-photo {
 width: 100%;
 max-width: 320px;
 aspect-ratio: 3 / 4;
 border-radius: 12px;
 overflow: hidden;
 background: #f0f0f0;
 position: relative;
 }

.team-member-photo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }

.team-member-page .team-image-manuel {
 transform: scale(1.12);
 transform-origin: center;
 }

.team-member-name {
 font-family: var(--font-heading);
 font-size: 1.75rem;
 font-weight: 900;
 color: var(--blue);
 margin: 0;
 letter-spacing: -0.02em;
 }

.team-member-role {
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--accent);
 margin: 0;
 }

.team-member-linkedin {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--blue);
 text-decoration: none;
 font-weight: 600;
 font-size: 0.95rem;
 transition: color var(--transition);
 }

.team-member-linkedin:hover {
 color: var(--accent);
 }

.team-member-linkedin svg {
 flex-shrink: 0;
 }

.team-member-photo-linkedin {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(21,25,38,0.5);
  text-decoration: none;
  z-index: 2;
}

.team-member-right {
 min-width: 0;
 }

.team-member-bio {
 font-size: 1.05rem;
 line-height: 1.75;
 color: var(--blue);
 margin: 0;
 white-space: pre-line;
 max-width: 65ch;
 }

@media (max-width: 900px) {
 .team-member-inner {
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 0 20px;
 }
 .team-member-left {
  position: static;
  align-items: center;
  text-align: center;
 }
 .team-member-photo {
  max-width: 280px;
  margin: 0 auto;
 }
 .team-member-linkedin {
  align-self: center;
 }
 .team-member-linkedin {
  display: none;
 }
 .team-member-photo-linkedin svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
 }
 .team-member-bio {
  max-width: 100%;
 }
}

@media (max-width: 600px) {
 .team-member-page .team-member-main {
  padding: 100px 0 60px;
 }
 .team-member-name {
  font-size: 1.5rem;
 }
}

/***** Virtual business card (QR) – Add Contact on team-style layout *****/
.business-card-add-contact {
 margin-top: 28px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 48px;
 padding: 14px 32px;
 border-radius: 4px;
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.4px;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 background: var(--accent);
 border: 1px solid var(--accent);
 transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.business-card-add-contact:hover {
 background: transparent;
 color: var(--accent);
}

/***** TEAM MODAL *****/
.team-modal {
 position: fixed;
 inset: 0;
 z-index: 2000;
 display: none;
}
.team-modal.active {
 display: block;
}
.team-modal-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0,0,0,0.6);
}
.team-modal-dialog {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 max-width: 520px;
 width: 90%;
 background: #ffffff;
 border-radius: 16px;
 box-shadow: 0 20px 60px rgba(0,0,0,0.4);
 padding: 28px 28px 24px;
 font-family: var(--font-body);
}
.team-modal-close {
 position: absolute;
 top: 12px;
 right: 14px;
 border: none;
 background: transparent;
 color: #666;
 font-size: 1.5rem;
 cursor: pointer;
}
.team-modal-name {
 margin: 4px 0 4px;
 font-family: var(--font-heading);
 font-size: 1.6rem;
 color: var(--blue);
}
.team-modal-role {
 margin: 0 0 14px;
 font-size: 0.98rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--accent);
}
.team-modal-bio {
 margin: 0 0 18px;
 font-size: 0.98rem;
 line-height: 1.7;
 white-space: pre-line;
 color: #333;
}
.team-modal-linkedin {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 0.94rem;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--accent);
 text-decoration: none;
}
.team-modal-linkedin:hover {
 color: var(--accent-dark);
}

.form-row {
 display: flex;
 flex-direction: column;
 gap: 0;
 width: 100%;
}
.form-row input,
.form-row select,
.form-row textarea {
 width: 100%;
 background: rgba(24,24,24,0.45);
 color: var(--white);
 border: 1.5px solid rgba(255,255,255,0.18);
 border-radius: 8px;
 font-size: 1rem;
 font-family: inherit;
 padding: 16px 14px;
 font-weight: 500;
 margin-bottom: 0;
 transition: border var(--transition), background var(--transition);
 box-sizing: border-box;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
 outline: none;
 border-color: var(--accent);
 background: #222;
}
.contact-form button {
 align-self: flex-start;
 margin-top: 8px;
}
.contact-extra {
 color: var(--grey);
 font-size: 1rem;
 margin-top: 10px;
 display: flex;
 gap: 18px;
 align-items: center;
 justify-content: flex-start;
}
.contact-extra a {
 color: var(--accent);
 text-decoration: underline;
}
.contact-social {
 font-size: 1.5rem;
 opacity: 0.7;
}

/***** FADE-IN ANIMATION *****/
.fade-in { 
 opacity: 0; 
 transform: translateY(40px); 
 transition: all 0.8s cubic-bezier(.4,0,.2,1); 
}
.fade-in.visible { 
 opacity: 1; 
 transform: translateY(0); 
}

/* Stagger animation for cards */
.focus-cards .focus-card {
 opacity: 0;
 transform: translateY(30px) scale(0.95);
 transition: all 0.6s cubic-bezier(.4,0,.2,1);
}
.focus-cards.visible .focus-card:nth-child(1) {
 opacity: 1;
 transform: translateY(0) scale(1);
 transition-delay: 0.1s;
}
.focus-cards.visible .focus-card:nth-child(2) {
 opacity: 1;
 transform: translateY(0) scale(1);
 transition-delay: 0.2s;
}
.focus-cards.visible .focus-card:nth-child(3) {
 opacity: 1;
 transform: translateY(0) scale(1);
 transition-delay: 0.3s;
}

/* Hero text reveal animation */
.hero-content h1,
.hero-content .hero-headline {
 opacity: 0;
 transform: translateY(24px);
 animation: fadeInUp 0.55s cubic-bezier(.4,0,.2,1) 0.25s forwards;
}
.hero-content .hero-headline .hero-accent {
 opacity: 0;
 transform: translateY(8px) scale(0.96);
 animation: heroAccentPop 0.5s cubic-bezier(.34,1.2,.64,1) 0.7s forwards;
}

@media (max-width: 900px) {
 .hero-content .hero-headline .hero-accent {
  /* Mobile: animate together with full headline (no separate accent pop) */
  opacity: inherit;
  transform: none;
  animation: none;
 }
}
.hero-content .hero-tagline {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) 0.5s forwards;
}
.hero-content .hero-body {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 0.6s cubic-bezier(.4,0,.2,1) 0.95s forwards;
}
.hero-content .hero-sub {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) 0.6s forwards;
}
.hero-content .hero-cta {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 1s cubic-bezier(.4,0,.2,1) 0.9s forwards;
}

@keyframes fadeInUp {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes heroAccentPop {
 to {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

/* Button pulse animation - removed */

/* Smooth scroll reveal for about section */
.about-flex {
 opacity: 0;
 transform: translateY(40px);
 transition: all 1s cubic-bezier(.4,0,.2,1);
}
.about-flex.visible {
 opacity: 1;
 transform: translateY(0);
}

/* Contact form animation (disabled) */
.contact-inner {
 opacity: 1;
 transform: none;
 transition: none;
}

/* Image hover animation */
.about-img-wrap {
 transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
.about-img-wrap:hover {
 transform: scale(1.05) rotate(2deg);
 box-shadow: 0 8px 32px 0 rgba(255,137,0,0.3);
}

/* Text underline animation */
.hero-underline::after {
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.hero-content.visible .hero-underline::after {
 transform: scaleX(1);
}

.about-underline::after {
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.6s cubic-bezier(.4,0,.2,1) 0.3s;
}
.about-flex.visible .about-underline::after {
 transform: scaleX(1);
}

/* Form input focus animation */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
 transform: translateY(-2px);
 box-shadow: 0 4px 20px 0 rgba(255,137,0,0.2);
}

/* Parallax effect for hero background */
.hero-bg-img {
 will-change: transform;
}

/* Smooth scroll reveal animations */
@keyframes slideInFromLeft {
 from {
 opacity: 0;
 transform: translateX(-50px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

@keyframes slideInFromRight {
 from {
 opacity: 0;
 transform: translateX(50px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

/* Glow effect for blue accents */
.hero-underline::after,
.about-underline::after {
 box-shadow: 0 0 10px rgba(255,137,0,0.3);
}

/* Smooth transitions for all interactive elements */
a, button, input, select, textarea {
 transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

/* Enhanced focus states */
*:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 2px;
 border-radius: 4px;
}

/***** RESPONSIVE *****/
@media (max-width: 900px) {
 .site-container {
 padding-left: 14px;
 padding-right: 14px;
 }
 .container { padding: 0 10px; }
 .focus-cards, .differentiator-cards { flex-direction: column; gap: 18px; }
 .focus-card, .differentiator-card { max-width: 100%; }
 .about-inner { padding: 0 4px; }
 .hero-content {
 padding-left: 18px;
 }
 .hero-cta {
 gap: 16px;
 }
 .btn {
 padding: 17px 32px;
 }
 .hero-underline {
 white-space: normal;
 }
 .hero-underline::after {
 bottom: -0.09em;
 height: 0.22em;
 }
}
@media (max-width: 600px) {
 .hero h1,
 .hero-headline,
 .hero-tagline {
 font-size: clamp(2.1rem, 9.8vw, 3.05rem);
 line-height: 1.05;
 white-space: nowrap;
 }
 .hero .hero-body {
  font-size: 1.18rem;
 }
 .hero-sub {
 font-size: 1.18rem;
 }
 .hero-underline {
 white-space: normal;
 }
 .hero-underline::after {
 bottom: -0.08em;
 height: 0.2em;
 }
 .hero-cta {
 gap: 12px;
 justify-content: flex-start;
 }
 .btn {
 padding: 16px 24px;
 font-size: 0.95rem;
 }
 .focus-card, .differentiator-card { padding: 24px 16px; }
 .about-logo { padding: 6px 10px; font-size: 0.93rem; }
 .contact-form { max-width: 100%; }
 .hero-content {
 padding-left: 26px;
 padding-right: 26px;
 text-align: left;
 }
 .hero-body {
 margin-right: 0;
 }
 .site-container {
 padding-left: 26px;
 padding-right: 26px;
 }
} 

.footer-section {
 width: 100%;
 background-color: #151926 !important;
 color: var(--white);
 font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
 font-size: 1.05rem;
 border-top: 1px solid rgba(255,255,255,0.12);
 display: flex;
 justify-content: center;
 align-items: center;
 padding-top: 24px;
 padding-bottom: 18px;
 margin-top: 0;
 position: relative;
 z-index: 0;
}

/* Keep hero headline on a single line on mobile/tablet widths */
@media (max-width: 900px) {
  .hero h1.hero-headline,
  .hero .hero-headline {
    white-space: nowrap !important;
    font-size: clamp(2.6rem, 10.8vw, 3.7rem) !important;
    line-height: 1.05;
  }

  .hero .hero-body {
    font-size: 1.26rem;
  }

}
.footer-section .footer-inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
}
.footer-nav {
 display: flex;
 gap: 32px;
 align-items: center;
}
.footer-logo {
 display: flex;
 align-items: center;
 flex-shrink: 0;
}
.footer-logo-img {
 height: 28px;
 width: auto;
 max-height: 28px;
 display: block;
 object-fit: contain;
}
.footer-link {
 color: #ffffff;
 text-decoration: none;
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 0.95rem;
 letter-spacing: 0.4px;
 text-transform: uppercase;
 display: flex;
 align-items: center;
 transition: color var(--transition), opacity var(--transition);
 border-bottom: none;
 padding-bottom: 0;
}
.footer-link:hover {
 color: var(--accent);
 opacity: 1;
 border-bottom: none;
}
.linkedin-icon {
 display: inline-block;
 vertical-align: middle;
 margin-left: 2px;
 width: 20px;
 height: 20px;
 fill: currentColor;
} 

@media (max-width: 900px) {
 .status-bar, .footer-section {
 padding-left: 10px;
 padding-right: 10px;
 }
} 

.about-flex {
 display: flex;
 gap: 48px;
 align-items: center;
 justify-content: center;
 width: 100%;
 margin: 40px 0;
}
.about-img-col {
 flex: 0 0 200px;
 display: flex;
 justify-content: center;
 align-items: flex-start;
}
.about-img-wrap {
 width: 220px;
 height: 220px;
 border-radius: 50%;
 overflow: hidden;
 background: #181818;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 2px 16px 0 rgba(0,0,0,0.10);
 border: 4px solid var(--accent);
 position: relative;
}
.about-linkedin-overlay {
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 overflow: hidden;
 position: relative;
 transition: box-shadow var(--transition);
}
.about-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 50%;
 display: block;
 filter: grayscale(100%);
 transition: filter var(--transition);
}
.about-linkedin-overlay:hover .about-img {
 filter: grayscale(0%) blur(2px) brightness(0.7);
}
.about-linkedin-overlay::after {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 border-radius: 50%;
 background: rgba(24,24,24,0.35);
 opacity: 0;
 transition: opacity var(--transition);
 pointer-events: none;
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 z-index: 1;
}
.about-linkedin-overlay:hover::after {
 opacity: 1;
}
.about-linkedin-icon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
 opacity: 0;
 transition: opacity var(--transition);
 pointer-events: none;
}
.about-linkedin-overlay:hover .about-linkedin-icon {
 opacity: 1;
}
@media (max-width: 900px) {
 .about-img-wrap {
 width: 160px;
 height: 160px;
 }
 .about-linkedin-icon svg {
 width: 32px;
 height: 32px;
 }
}
@media (max-width: 600px) {
 .about-img-wrap {
 width: 320px !important;
 height: 320px !important;
 }
 .about-linkedin-icon svg {
 width: 48px;
 height: 48px;
 }
}
.about-text-col {
 flex: 1 1 0;
 display: flex;
 flex-direction: column;
 gap: 18px;
 min-width: 0;
}
.about-headline {
 color: var(--accent);
 font-size: 1.5rem;
 font-weight: 800;
 margin-bottom: 10px;
 margin-top: 0;
 letter-spacing: -0.01em;
 text-align: left;
}
.about-text-col p {
 color: #333;
 font-size: 1.08rem;
 line-height: 1.7;
 margin: 0 0 8px 0;
}
.about-text-col strong {
 color: #333;
 font-weight: 700;
}
.about-quote {
 color: var(--accent) !important;
 font-size: 1.08rem;
 font-style: italic;
 font-weight: 700;
 margin-top: 18px;
 opacity: 1;
}
.about-divider {
 width: 100%;
 border: none;
 border-top: 1.5px solid #222;
 margin: 0 0 24px 0;
}
@media (max-width: 900px) {
 .about-flex {
 flex-direction: column;
 gap: 28px;
 margin: 24px 0;
 }
 .about-img-col {
 justify-content: center;
 align-items: center;
 }
 .about-img-wrap {
 width: 140px;
 height: 140px;
 }
}
@media (max-width: 600px) {
 .about-flex {
 gap: 18px;
 margin: 14px 0;
 }
 .about-img-wrap {
 width: 100px;
 height: 100px;
 }
 .about-headline {
 font-size: 1.18rem;
 }
 .about-text-col p, .about-quote {
 font-size: 1rem;
 }
} 

.hero-underline {
 position: relative;
 display: inline;
 font-weight: inherit;
 color: inherit;
 white-space: nowrap;
 z-index: 1;
}
.hero-underline::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: -0.1em;
 height: 0.25em;
 background: var(--accent);
 z-index: -1;
 border-radius: 2px;
} 

.about-underline {
 position: relative;
 display: inline-block;
 z-index: 1;
}
.about-underline::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: -0.05em;
 height: 0.16em;
 background: var(--accent);
 z-index: 0;
 border-radius: 2px;
}

/* Ocean Waves Animation - Natural Water Waves */
@keyframes rippleExpand {
 0% {
 transform: scale(0);
 opacity: 0.8;
 }
 50% {
 opacity: 0.4;
 }
 100% {
 transform: scale(4);
 opacity: 0;
 }
}

@keyframes waveMove {
 0% {
 transform: translateX(0) translateY(0) scale(1);
 opacity: 0.6;
 }
 25% {
 transform: translateX(5%) translateY(-2%) scale(1.1);
 opacity: 0.7;
 }
 50% {
 transform: translateX(0) translateY(-4%) scale(1.2);
 opacity: 0.8;
 }
 75% {
 transform: translateX(-5%) translateY(-2%) scale(1.1);
 opacity: 0.7;
 }
 100% {
 transform: translateX(0) translateY(0) scale(1);
 opacity: 0.6;
 }
}

@keyframes waveRipple {
 0%, 100% {
 transform: translateY(0) scaleY(1);
 }
 25% {
 transform: translateY(-4px) scaleY(1.02);
 }
 50% {
 transform: translateY(0) scaleY(1);
 }
 75% {
 transform: translateY(3px) scaleY(0.98);
 }
}

/* ----- Legal pages (imprint, privacy) ----- */
body.legal-page .page {
 padding-top: 80px;
}
body.legal-page .footer-section {
 background-color: #151926 !important;
 border-top: none;
}
body.legal-page .footer-link {
 color: #ffffff;
}
body.legal-page .footer-link:hover {
 border-bottom-color: #ffffff;
 color: #ffffff;
 opacity: 0.9;
}
.page {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 padding-top: 0;
}
.wrap {
 max-width: var(--container-max);
 margin: 0 auto;
 padding: 40px 24px;
}
.legal h1 {
 font-size: 2rem;
 font-weight: 900;
 margin: 0 0 10px;
 color: var(--blue);
}
.legal h2 {
 font-size: 1.25rem;
 font-weight: 600;
 margin: 24px 0 8px;
 color: var(--blue);
}
.legal p, .legal li {
 color: #333;
}
.legal .muted {
 color: var(--grey);
}
.card {
 border: 1px solid #e5e7eb;
 border-radius: 8px;
 padding: 24px;
 background: #fff;
}
.top-link {
 display: inline-block;
 margin-top: 10px;
 font-size: 1rem;
 color: var(--accent);
 text-decoration: none;
}
.top-link:hover {
 opacity: 0.8;
}

/* ===== Redesign Alignment Layer (content sections only) ===== */
/* Keep existing header/footer assets/links behavior intact. */

.section-label {
 font-family: var(--font-body);
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 3px;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 20px;
}

.section-divider {
 width: 48px;
 height: 2px;
 background: var(--accent);
 margin-bottom: 40px;
}

.section-heading {
 font-family: var(--font-heading);
 font-size: clamp(32px, 4vw, 48px);
 font-weight: 400;
 line-height: 1.2;
 margin-bottom: 24px;
 color: #2a324c;
}

/* HERO */
.hero {
 background: #2C3036;
 min-height: 100vh;
 position: relative;
 overflow: hidden;
}
/* Videos + overlay fade in over solid hero bg; script adds .hero-media-visible */
.hero-photo-video,
.hero-overlay,
.circle-video-bg {
 opacity: 0;
 transition: opacity 0.7s ease;
}
.hero.hero-media-visible .hero-photo-video {
 opacity: 1;
}
.hero.hero-media-visible .hero-overlay {
 opacity: 1;
}
.hero.hero-media-visible .circle-video-bg {
 opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
 .hero-photo-video,
 .hero-overlay,
 .circle-video-bg {
  transition: none;
 }
 .hero-photo-video { opacity: 1; }
 .hero-overlay { opacity: 1; }
 .circle-video-bg { opacity: 0.3; }
}
.hero-photo {
 position: absolute;
 inset: 0;
 z-index: 0;
 pointer-events: none;
 overflow: hidden;
}
.hero-photo-video {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
 filter: grayscale(100%) brightness(0.55);
}
.hero-bg-img {
 position: absolute;
 inset: 0;
 z-index: 2;
 opacity: 1;
 background: transparent;
}
.hero-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(16, 52, 106, 0.20);
 z-index: 1;
 pointer-events: none;
}
.circle-video-bg {
 filter: hue-rotate(170deg) saturate(140%) brightness(0.5);
}
.hero-content {
 position: relative;
 z-index: 4;
 align-items: center;
 text-align: center;
 max-width: 760px;
}
.hero-headline {
 color: #ffffff;
 font-family: var(--font-heading);
 font-size: clamp(2.8rem, 6vw, 4.8rem);
 font-weight: 400;
 line-height: 1.12;
 margin-bottom: 22px;
}
.hero h1.hero-headline {
 color: #ffffff !important;
}
.hero-accent {
 color: var(--accent);
}
.hero-body {
 color: #ffffff;
 max-width: 620px;
 margin-right: 0;
 font-size: 1.08rem;
 line-height: 1.75;
}

@media (min-width: 900px) {
  .hero .container.hero-content {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }

  .hero-headline,
  .hero h1.hero-headline {
    font-size: clamp(4.6rem, 7.7vw, 7.1rem) !important;
    line-height: 1.05;
  }

  .hero .hero-body {
    font-size: 1.42rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
  }
}
.hero .hero-body {
 color: #ffffff !important;
}

@media (max-width: 600px) {
  /* Final mobile hero alignment: left + same side padding as page */
  .hero .container.hero-content {
    padding-left: 26px !important;
    padding-right: 26px !important;
    text-align: left !important;
    align-items: flex-start;
    transform: translateY(-22px);
  }

  /* Override larger <=900px headline clamp so it does not hug/overflow edges */
  .hero h1.hero-headline,
  .hero .hero-headline {
    font-size: clamp(2.05rem, 8.9vw, 2.85rem) !important;
    line-height: 1.05;
    white-space: nowrap !important;
  }

  .hero .hero-body,
  .hero .hero-cta {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  /* Full-width CTA only when hamburger nav is active (same breakpoint) */
  .hero .hero-cta {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
  }
}

.hero .hero-cta {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 14px 32px;
 border: 1px solid rgba(255,137,0,0.35);
 border-radius: 4px;
 text-decoration: none;
 color: var(--accent);
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.5px;
 text-transform: uppercase;
 transition: all 0.3s ease;
}
.hero .hero-cta svg {
 width: 16px;
 height: 16px;
 transition: transform 0.3s ease;
}
.hero .hero-cta:hover {
 background: var(--accent);
 color: #ffffff;
 border-color: var(--accent);
}
.hero .hero-cta:hover svg {
 transform: translateY(2px);
}
.hero-scroll-indicator {
 position: absolute;
 bottom: 40px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 z-index: 4;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 600px) {
 .hero-scroll-indicator {
  bottom: calc(72px + env(safe-area-inset-bottom));
 }
}
.hero-scroll-indicator span {
 font-size: 11px;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: rgba(255,255,255,0.35);
 font-family: var(--font-body);
}
.scroll-line {
 width: 1px;
 height: 32px;
 background: linear-gradient(to bottom, rgba(255,137,0,0.55), transparent);
 animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
 0%, 100% { opacity: 0.45; transform: scaleY(1); }
 50% { opacity: 1; transform: scaleY(1.2); }
}

/* ABOUT */
.about-image-strip {
 padding: 80px 0 0;
}

.about-image-strip-header {
 max-width: 1200px;
 text-align: left;
}

.about-image-strip-header .section-divider {
 margin-left: 0;
 margin-right: 0;
}

.about-image-strip-heading {
 color: var(--blue);
 margin: 28px 0 0;
}

.about-image-strip-bg-wrap {
 width: 100vw;
 margin-left: calc(50% - 50vw);
 background: #151926;
 margin-top: 28px; /* matches spacing from heading */
 position: relative;
}

/* Full-width, bottom-only blend into the #151926 "Emma at a glance" bar */
.about-image-strip-bg-wrap::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 64px;
 background: linear-gradient(
  to bottom,
  rgba(21, 25, 38, 0) 0%,
  rgba(21, 25, 38, 0.55) 62%,
  rgba(21, 25, 38, 0.92) 100%
 );
 pointer-events: none;
 z-index: 2;
}

.about-image-strip-bg {
 width: 100%;
 height: 520px;
 background: url('assets/Dennis_Manu_6.png') center 20% / cover no-repeat;
 position: relative;
 overflow: hidden;
}

/* Subtle blend into the #151926 stats bar below */
.about-image-strip-bg::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 54px;
 background: linear-gradient(to bottom, rgba(21, 25, 38, 0), rgba(21, 25, 38, 0.86));
 pointer-events: none;
 z-index: 1;
}

.about-image-strip-founders {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 28px;
 display: flex;
 justify-content: center;
 z-index: 4; /* keep above bottom blend overlays */
}

.about-founder-pills {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr;
 justify-content: center;
 align-items: center;
 gap: 12px 16px;
 padding: 0 24px;
 max-width: 100%;
 box-sizing: border-box;
}

.about-founder-pill {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 14px 32px;
 border: 1px solid rgba(255, 255, 255, 0.5);
 border-radius: 4px;
 background: rgba(0, 0, 0, 0.52);
 color: #ffffff;
 font-family: var(--font-body);
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 0.04em;
 line-height: 1.2;
 text-align: center;
 text-decoration: none;
 transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Only stack on very small screens; iPhones should stay 2-up */
@media (max-width: 340px) {
 .about-founder-pills {
  grid-auto-flow: row;
  grid-auto-columns: unset;
 }
}

.about-founder-pill:hover {
 background: rgba(0, 0, 0, 0.68);
 border-color: rgba(255, 255, 255, 0.75);
 color: #ffffff;
}

.about-founder-pill:focus-visible {
 outline: 2px solid var(--accent);
 outline-offset: 3px;
}

.about-image-strip-intro {
 background: #ffffff;
 /* Match gap heading → image (.about-image-strip-bg-wrap margin-top) */
 padding: 28px 0 24px;
}

.about-image-strip-intro .about-fulltext {
 margin-top: 0;
}

.about-image-strip-intro-text {
 text-align: left;
 max-width: none;
}

.about-image-strip-stats {
 width: 100vw;
 margin-left: calc(50% - 50vw);
 box-sizing: border-box;
 background: #151926;
 color: #ffffff;
 padding: 14px 0 18px;
}

.about-image-strip-stats .about-stats-at-glance {
 color: #ffffff;
}

.about-image-strip-stats .about-stat-number,
.about-image-strip-stats .about-stat-prefix,
.about-image-strip-stats .about-stat-mid,
.about-image-strip-stats .about-stat-value,
.about-image-strip-stats .about-stat-suffix {
 color: #ffffff;
}

.about-image-strip-stats .about-stat-label {
 color: #ffffff;
}

.about-image-strip-accent-bar {
 width: 100vw;
 margin-left: calc(50% - 50vw);
 box-sizing: border-box;
 background: #f8f6f1;
 padding: 28px 0 32px;
}

.about-image-strip-accent-inner {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.about-image-strip-accent-rule {
 width: 52px;
 height: 2px;
 background: var(--accent);
 border-radius: 1px;
 margin: 0 0 18px;
 flex-shrink: 0;
}

.about-image-strip-accent-line {
 font-family: var(--font-heading);
 font-size: 19px;
 font-style: italic;
 font-weight: 400;
 color: #2a324c;
 line-height: 1.6;
 margin: 0;
 max-width: 62rem;
 text-align: center;
}

.about-image-strip-copy {
 background: #ffffff;
 padding: 48px 0 100px;
}

.about-image-strip-copy .about-fulltext {
 text-align: left;
 max-width: none;
 margin-top: 0;
}


.about-image-strip-stats-row {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr);
 gap: 28px 40px;
 align-items: center;
}

.about-image-strip-stats-brand {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 text-align: center;
}

.about-stats-emma-logo {
 width: 140px;
 max-width: 100%;
 height: auto;
 display: block;
 opacity: 0.95;
}

.about-stats-at-glance {
 margin: 8px 0 0;
 padding: 0;
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--accent);
 line-height: 1.35;
}

.about-image-strip-stats-numbers {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px 32px;
 align-items: start;
 justify-items: center;
 text-align: center;
 min-width: 0;
}

/* Desktop: center KPI middle block on true page center.
   Brand sits left without shifting the 3-column KPI distribution. */
@media (min-width: 901px) {
 /* Deterministic 5-col grid: [reserve][left][center][right][reserve]
    so the center KPI is mathematically centered. */
 .about-image-strip-stats-row {
  --about-stats-side-reserve: 220px;
  display: grid;
  grid-template-columns: var(--about-stats-side-reserve) 1fr 1fr 1fr var(--about-stats-side-reserve);
  align-items: center;
  gap: 28px 40px;
 }

 .about-image-strip-stats-brand {
  grid-column: 1;
  justify-self: center;
 }

 /* Let the 3 KPI blocks participate directly in the 5-col grid */
 .about-image-strip-stats-numbers {
  display: contents;
 }

 .about-image-strip-stats-numbers .about-stat:nth-child(1) { grid-column: 2; }
 .about-image-strip-stats-numbers .about-stat:nth-child(2) { grid-column: 3; }
 .about-image-strip-stats-numbers .about-stat:nth-child(3) { grid-column: 4; }
}

.about-stat {
 border: none;
 background: transparent;
 padding: 0;
 font-family: var(--font-body);
 text-align: center;
 max-width: 280px;
}

.about-stat-number {
 font-family: var(--font-heading);
 font-size: clamp(32px, 3.8vw, 42px);
 font-weight: 400;
 line-height: 1.15;
 letter-spacing: -0.02em;
 color: var(--blue);
 margin-bottom: 4px;
 font-variant-numeric: tabular-nums;
}

.about-stat-prefix,
.about-stat-mid {
 color: var(--blue);
}

.about-stat-value {
 color: var(--blue);
}

.about-stat-suffix {
 color: var(--blue);
}

.about-stat-label {
 font-family: var(--font-body);
 font-size: 16px;
 font-weight: 400;
 color: var(--blue);
 line-height: 1.85;
}

@media (max-width: 900px) {
 .about-image-strip {
  padding-top: 64px;
 }
 .about-image-strip-bg-wrap {
  margin-top: 22px;
 }
 .about-image-strip-bg {
  height: 360px;
  background-position: center 18%;
 }
 .about-image-strip-founders {
  bottom: 20px;
 }
 .about-image-strip-heading {
  margin-top: 22px;
 }
 .about-image-strip-intro {
  padding: 22px 0 20px;
 }
 .about-image-strip-stats {
  padding: 12px 0 16px;
 }
 .about-image-strip-accent-bar {
  padding: 24px 0 28px;
 }
 .about-image-strip-copy {
  padding: 40px 0 80px;
 }
 .about-image-strip-stats-row {
  gap: 24px 28px;
 }
 .about-image-strip-stats-numbers {
  gap: 20px 20px;
 }
}

@media (max-width: 600px) {
 .about-image-strip {
  padding-top: 56px;
 }
 .about-image-strip-bg-wrap {
  margin-top: 18px;
 }
 .about-image-strip-bg {
  height: 300px;
  background-position: center 16%;
 }
 .about-image-strip-founders {
  bottom: 16px;
 }
 .about-founder-pill {
  /* keep font size, reduce horizontal padding so both fit side-by-side */
  padding: 12px 14px;
  font-size: 13px;
 }
 .about-image-strip-heading {
  margin-top: 18px;
 }
 .about-image-strip-intro {
  padding: 18px 0 16px;
 }
 .about-image-strip-stats {
  padding: 10px 0 14px;
 }
 .about-image-strip-accent-bar {
  padding: 22px 0 26px;
 }
 .about-image-strip-copy {
  padding: 32px 0 64px;
 }
 .about-image-strip-stats-row {
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
 }
 .about-image-strip-stats-brand {
  align-items: center;
 }
 .about-image-strip-stats-numbers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  width: 100%;
 }
 .about-image-strip-stats-numbers .about-stat-number {
  font-size: clamp(22px, 5.8vw, 30px);
  margin-bottom: 6px;
 }
 .about-image-strip-stats-numbers .about-stat-label {
  font-size: 12px;
  line-height: 1.35;
 }
 .about-stat {
  max-width: none;
 }
}

/* Mission: logo | vertical rule | label + text */
.about-mv-combined {
 margin-top: 48px;
 padding-top: 40px;
 border-top: 1px solid rgba(21, 25, 38, 0.1);
 width: 100%;
}

.about-mv-combined-row {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: 28px 40px;
 width: 100%;
}

.about-mv-combined-logo-wrap {
 flex-shrink: 0;
 display: flex;
 align-items: center;
}

.about-mv-combined-logo {
 display: block;
 width: auto;
 height: auto;
 max-height: 52px;
 max-width: min(220px, 38vw);
 object-fit: contain;
 margin: 0;
}

.about-mv-combined-vrule {
 width: 1px;
 flex-shrink: 0;
 align-self: stretch;
 min-height: 4.5rem;
 background: rgba(21, 25, 38, 0.1);
}

.about-mv-combined-body {
 flex: 1;
 min-width: 0;
 text-align: left;
}

.about-mv-combined-eyebrow {
 margin-bottom: 10px;
 text-align: left;
}

.about-mv-combined-body .about-mv-combined-text {
 margin: 0;
 max-width: 56rem;
 text-align: left;
}

@media (max-width: 700px) {
 .about-mv-combined-row {
  flex-direction: column;
  align-items: center;
  gap: 20px;
 }
 .about-mv-combined-vrule {
  display: none;
 }
 .about-mv-combined-body {
  text-align: center;
 }
 .about-mv-combined-eyebrow {
  text-align: center;
 }
 .about-mv-combined-body .about-mv-combined-text {
  text-align: center;
 }
}

@media (max-width: 600px) {
 .about-mv-combined {
  margin-top: 40px;
  padding-top: 32px;
 }
 .about-mv-combined-logo {
  max-height: 44px;
  max-width: min(200px, 55vw);
 }
}

.photo-caption {
 margin-top: 14px;
 font-size: 13px;
 color: rgba(42, 50, 76, 0.55);
 letter-spacing: 0.2px;
 line-height: 1.5;
}

.about-fulltext {
 margin-top: 56px;
}

.about-fulltext p {
 color: #5a5e6a;
 font-size: 16px;
 line-height: 1.85;
 margin: 0 0 18px 0;
}

.about-fulltext p:last-child {
 margin-bottom: 0;
}

.about-fulltext .lead {
 font-size: 18px;
 font-weight: 600;
 color: #2a324c;
 line-height: 1.75;
}

.about-fulltext .accent-line {
 font-family: var(--font-body);
 font-size: 18px;
 font-style: normal;
 font-weight: 600;
 color: #2a324c;
 margin: 24px 0;
 background: #f8f6f1;
 border-radius: 0 8px 8px 0;
 padding: 18px 24px;
 border-left: 3px solid var(--accent);
 line-height: 1.75;
}

/* WHAT WE BUILD */
.about-hex-section {
 background: #151926;
 padding: 110px 0;
}
.what-we-build-inner {
 max-width: 1200px;
 margin: 0 auto;
}
.what-we-build-head {
 margin-bottom: 56px;
}
.about-hex-section .section-label {
 color: var(--accent);
}
.about-hex-section .section-divider {
 margin-bottom: 30px;
}
.about-hex-section .section-heading {
 color: #ffffff;
 margin-bottom: 0;
}
.about-hex-buckets {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 28px;
}
.about-hex-bucket {
 background: rgba(255,255,255,0.04);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 12px;
 padding: 34px 30px;
 position: relative;
 overflow: hidden;
 transition: all 0.4s ease;
}
.about-hex-bucket::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: var(--accent);
 transform: scaleX(0);
 transform-origin: left;
 transition: transform 0.4s ease;
}
.about-hex-bucket-number {
 font-family: var(--font-body);
 font-size: 13px;
 font-weight: 500;
 letter-spacing: 1px;
 color: var(--accent);
 margin-bottom: 18px;
}
.about-hex-title {
 color: #ffffff;
 font-family: var(--font-heading);
 font-weight: 400;
 font-size: 2rem;
}
.about-hex-section .about-hex-bucket .about-hex-text {
 color: #ffffff;
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.85;
 font-weight: 400;
}
.about-hex-bucket:hover {
 background: rgba(255,255,255,0.09);
 border-color: rgba(255,137,0,0.28);
 transform: translateY(-4px);
}
.about-hex-bucket:hover::before {
 transform: scaleX(1);
}
.about-hex-bucket:hover .about-hex-title {
 color: #ffffff;
}
.about-hex-section .about-hex-bucket:hover .about-hex-text {
 color: rgba(255,255,255,0.8);
}

/* TEAM */
.team {
 padding: 120px 0;
}
.team-heading {
 font-family: var(--font-heading);
 font-weight: 400;
 font-size: clamp(2.2rem, 4vw, 3.1rem);
 margin-bottom: 0;
}
.team-card {
 background: #f8f6f1;
 border-radius: 12px;
 box-shadow: none;
}
.team-card-image img {
 filter: none;
 transform: none;
 transition: none;
}
.team-card:hover .team-card-image img {
 filter: none;
 transform: none;
}
.team-name {
 font-family: var(--font-heading);
 font-weight: 400;
 color: #2a324c;
}
.team-role {
 color: var(--accent);
 font-weight: 500;
}
.team-linkedin {
 color: #9a9daa;
}
.team-card:hover .team-linkedin {
 color: var(--accent);
}

/* PORTFOLIO */
.portfolio {
 background: #f8f6f1;
 padding-top: 100px;
}
.portfolio-header {
 text-align: center;
}
.portfolio-header .section-divider {
 margin-left: auto;
 margin-right: auto;
}
.portfolio-heading {
 font-family: var(--font-heading);
 font-weight: 400;
 margin-bottom: 0;
 text-align: center;
}
.portfolio-ticker-wrap {
 overflow: hidden;
 position: relative;
 mask-image: none;
 -webkit-mask-image: none;
}
.portfolio-ticker-wrap::before,
.portfolio-ticker-wrap::after {
 content: '';
 position: absolute;
 top: 0;
 width: 34%;
 height: 100%;
 z-index: 2;
 pointer-events: none;
}
.portfolio-ticker-wrap::before {
 left: 0;
 background: linear-gradient(to right, #f8f6f1 40%, rgba(248,246,241,0) 100%);
}
.portfolio-ticker-wrap::after {
 right: 0;
 background: linear-gradient(to left, #f8f6f1 40%, rgba(248,246,241,0) 100%);
}

@media (max-width: 600px) {
 .portfolio-ticker-set {
  gap: 16px;
 }
 .portfolio-ticker-gap {
  width: 16px;
 }
 .portfolio-logo {
  width: 124px;
  height: 72px;
  padding: 8px;
 }
 .portfolio-ticker-wrap::before,
 .portfolio-ticker-wrap::after {
  width: 16%;
 }
 .portfolio-ticker-wrap::before {
  background: linear-gradient(to right, #f8f6f1 30%, rgba(248,246,241,0) 100%);
 }
 .portfolio-ticker-wrap::after {
  background: linear-gradient(to left, #f8f6f1 30%, rgba(248,246,241,0) 100%);
 }
}
.portfolio-ticker-track {
 animation-duration: 25s;
}
.portfolio-logo img {
 opacity: 1;
 filter: none;
 transition: none;
}

/* CONTACT */
.contact {
 background: #151926;
 padding: 120px 0;
 position: relative;
 overflow: hidden;
 min-height: 0;
}
.contact::before {
 content: none;
}
.contact-overlay,
.contact-video-wrap {
 display: none;
}
.contact-inner {
 display: block;
}
.contact-left {
 min-width: 0;
}
.contact-heading-main {
 color: #ffffff;
 font-family: var(--font-heading);
 font-weight: 400;
 line-height: 1.2;
 margin-bottom: 22px;
}
.contact-heading-main em {
 font-style: italic;
 color: var(--accent);
}
.contact-sub {
 color: #ffffff;
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.85;
 font-weight: 400;
 margin-bottom: 34px;
 max-width: 44ch;
}
.contact-email {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 color: #ffffff;
 font-size: 18px;
 font-weight: 500;
 text-decoration: none;
}
.contact-email svg {
 width: 20px;
 height: 20px;
 color: var(--accent);
}
.contact-email:hover {
 color: var(--accent);
}
.contact-right {
 display: none;
}
.contact-visual {
 width: 300px;
 height: 300px;
 border-radius: 50%;
 border: 1px solid rgba(255,255,255,0.06);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
}
.contact-visual-inner {
 position: absolute;
 inset: 20px;
 border-radius: 50%;
 border: 1px solid rgba(255,137,0,0.12);
}
.contact-visual-core {
 position: absolute;
 width: 160px;
 height: 160px;
 border-radius: 50%;
 border: 1px solid rgba(255,137,0,0.08);
 background: rgba(255,137,0,0.06);
 display: flex;
 align-items: center;
 justify-content: center;
}
.contact-visual-logo {
 display: none;
}
.contact-visual-hex {
 width: 48px;
 height: 55px;
 color: var(--accent);
 opacity: 0.6;
}

@media (max-width: 900px) {
 .about-fulltext {
  margin-top: 40px;
 }
 .about-image-strip-copy .about-fulltext {
  margin-top: 0;
 }
 .about-hex-section {
  padding: 80px 0;
 }
 .about-hex-buckets {
  grid-template-columns: 1fr;
 }
 .contact {
  padding: 80px 0;
 }
 .contact-inner {
  grid-template-columns: 1fr;
  gap: 40px;
 }
 .contact-right {
  display: none;
 }
}

/* ===== Final nav + spacing overrides ===== */
.status-bar {
 position: fixed !important;
 top: 0;
 left: 0;
 right: 0;
 /* Always use the "scrolled" (white/blur) nav styling */
 background: rgba(255,255,255,0.9);
 box-shadow: 0 1px 0 rgba(42,50,76,0.1);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.18s cubic-bezier(.4,0,.2,1);
}
.status-bar::after {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 1px;
 background: rgba(42,50,76,0.12);
 pointer-events: none;
 z-index: 1;
}
.status-bar.is-scrolled {
 background: rgba(255,255,255,0.9);
 box-shadow: 0 1px 0 rgba(42,50,76,0.1);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
}
.status-bar.is-scrolled::after {
 background: rgba(42,50,76,0.12);
}
.status-bar .status-nav a {
 color: #2A324C;
}
.status-bar.is-scrolled .status-nav a {
 color: #2A324C;
}
.status-bar .status-nav a:hover,
.status-bar.is-scrolled .status-nav a:hover {
 color: var(--accent);
}

.about,
.about-hex-section,
.team,
.portfolio,
.contact {
 padding-top: 80px;
 padding-bottom: 80px;
}
.portfolio {
 padding-bottom: 0;
}

@media (max-width: 900px) {
 .about,
 .about-hex-section,
 .team,
 .portfolio,
 .contact {
  padding-top: 64px;
  padding-bottom: 64px;
 }
}

@media (max-width: 600px) {
 .portfolio-ticker-wrap {
  padding-top: 22px;
  padding-bottom: 20px;
 }
 .portfolio {
  padding-bottom: 28px;
 }
 .contact {
  padding-bottom: 36px;
 }
}

/* Mobile nav behavior:
   - top of hero (not scrolled): frosted white bar (video still faintly visible) + hexagon + dark hamburger
   - scrolled: white nav + hexagon + dark hamburger */
@media (max-width: 600px) {
 .status-bar {
  z-index: 2200;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 1px 0 rgba(42,50,76,0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
 }

 /* Hero top: lighter than full transparency, still a hint of video through blur */
 .home-page .status-bar:not(.is-scrolled) {
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 1px 0 rgba(42,50,76,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
 }

 .status-bar::after {
  background: rgba(42,50,76,0.12);
 }
 .home-page .status-bar:not(.is-scrolled)::after {
  background: rgba(42,50,76,0.1);
 }

 .status-brand {
  position: relative;
  z-index: 2201;
  /* Same bottom-aligned spill as desktop (hexagon + offset) */
  align-items: flex-end;
  align-self: flex-end;
 }

 /* Hexagon logo + negative margin: inherit desktop treatment; sizing from global .logo-image + max-width:600px rule above */

 .mobile-menu {
  z-index: 2000;
 }

 .mobile-menu-btn {
  z-index: 2202;
 }

 .menu-icon,
 .menu-icon::before,
 .menu-icon::after {
  background: #2A324C;
 }

 .mobile-menu-btn.is-open .menu-icon,
 .mobile-menu-btn.is-open .menu-icon::before,
 .mobile-menu-btn.is-open .menu-icon::after {
  background: #2A324C;
 }
}

/* ----- Virtual business card pages (card-*.html): background + minimal top bar ----- */
.team-member-page--business-card {
 background-color: #151926;
 background-image: url('assets/Syntropy_Background.png');
 background-position: center center;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: scroll;
}

.team-member-page--business-card .team-member-main {
 background: transparent;
}

.team-member-page--business-card .team-member-inner--card-only {
 max-width: 400px;
}

.team-member-page--business-card .team-member-inner--card-only .team-member-left {
 background: rgba(0, 0, 0, 0.42);
 border-radius: 16px;
 padding: 32px 28px 36px;
 box-sizing: border-box;
 border: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
 max-width: 100%;
}

.team-member-page--business-card .team-member-name {
 color: #ffffff;
 font-weight: 400;
 font-family: var(--font-heading);
 font-size: clamp(1.85rem, 4.2vw, 2.35rem);
 line-height: 1.12;
}

.team-member-page--business-card .team-member-role {
 font-size: clamp(1.2rem, 2.8vw, 1.4rem);
 line-height: 1.35;
}

.team-member-page--business-card .logo-image--business-card {
 height: auto;
 max-height: 46px;
 width: auto;
 max-width: 240px;
 margin: 0;
 filter: none;
 object-fit: contain;
}

.team-member-page--business-card .status-brand--business-card {
 align-items: center;
 align-self: center;
 position: relative;
 z-index: 3;
}

.team-member-page--business-card .status-bar--business-card,
.team-member-page--business-card .status-bar--business-card.is-scrolled {
 z-index: 3000;
 background: transparent !important;
 box-shadow: none !important;
 backdrop-filter: none !important;
 -webkit-backdrop-filter: none !important;
 justify-content: flex-start;
 padding-top: 16px;
 padding-bottom: 16px;
}

.team-member-page--business-card .status-bar--business-card::after {
 background: rgba(255, 255, 255, 0.45);
 height: 1px;
}

.team-member-page--business-card .status-bar--business-card.is-scrolled::after {
 background: rgba(255, 255, 255, 0.45);
}

@media (max-width: 600px) {
 .team-member-page--business-card .status-bar--business-card,
 .team-member-page--business-card .status-bar--business-card.is-scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
 }

 .team-member-page--business-card .logo-image--business-card {
  max-height: 38px;
  max-width: 200px;
 }

 .team-member-page--business-card .team-member-inner--card-only .team-member-left {
  padding: 26px 22px 30px;
  border-radius: 14px;
 }

 .team-member-page--business-card .team-member-name {
  font-size: clamp(1.65rem, 5.2vw, 2rem);
 }

 .team-member-page--business-card .team-member-role {
  font-size: clamp(1.1rem, 3.2vw, 1.28rem);
 }

 .team-member-page--business-card .footer-section--business-card {
  padding-top: 8px;
  padding-bottom: 8px;
 }
}

/* Business card footer: transparent, slim, Imprint + Privacy only */
.team-member-page--business-card .footer-section--business-card {
 background-color: transparent !important;
 border-top: 1px solid rgba(255, 255, 255, 0.45);
 padding-top: 10px;
 padding-bottom: 10px;
 margin-top: 0;
 text-align: left;
}

.team-member-page--business-card .footer-inner--business-card {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 width: 100%;
 text-align: left;
}

.team-member-page--business-card .footer-nav--business-card {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 32px;
 width: 100%;
 margin: 0;
 flex-wrap: wrap;
}

.team-member-page--business-card .footer-link--business-card {
 font-size: 0.95rem;
 letter-spacing: 0.4px;
 color: #ffffff;
}

.team-member-page--business-card .footer-link--business-card:hover {
 color: var(--accent);
}