/* Self-hosted type: Jost (sans) + Cormorant (serif), per font.pdf design spec. */
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Thin.woff2") format("woff2"), url("assets/fonts/Jost-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-ThinItalic.woff2") format("woff2"), url("assets/fonts/Jost-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-ExtraLight.woff2") format("woff2"), url("assets/fonts/Jost-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-ExtraLightItalic.woff2") format("woff2"), url("assets/fonts/Jost-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Light.woff2") format("woff2"), url("assets/fonts/Jost-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-LightItalic.woff2") format("woff2"), url("assets/fonts/Jost-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Regular.woff2") format("woff2"), url("assets/fonts/Jost-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Italic.woff2") format("woff2"), url("assets/fonts/Jost-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Medium.woff2") format("woff2"), url("assets/fonts/Jost-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-MediumItalic.woff2") format("woff2"), url("assets/fonts/Jost-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-SemiBold.woff2") format("woff2"), url("assets/fonts/Jost-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-SemiBoldItalic.woff2") format("woff2"), url("assets/fonts/Jost-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Bold.woff2") format("woff2"), url("assets/fonts/Jost-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-BoldItalic.woff2") format("woff2"), url("assets/fonts/Jost-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-ExtraBold.woff2") format("woff2"), url("assets/fonts/Jost-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-ExtraBoldItalic.woff2") format("woff2"), url("assets/fonts/Jost-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-Black.woff2") format("woff2"), url("assets/fonts/Jost-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/Jost-BlackItalic.woff2") format("woff2"), url("assets/fonts/Jost-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-Light.woff2") format("woff2"), url("assets/fonts/Cormorant-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-LightItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-Regular.woff2") format("woff2"), url("assets/fonts/Cormorant-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-RegularItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-RegularItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-Medium.woff2") format("woff2"), url("assets/fonts/Cormorant-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-MediumItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-Semi.woff2") format("woff2"), url("assets/fonts/Cormorant-Semi.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-SemiItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-SemiItalic.otf") format("opentype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-Bold.woff2") format("woff2"), url("assets/fonts/Cormorant-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/Cormorant-BoldItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }

/* Jost has no arrow glyphs (→ ← ↗ ↓ ↑): without this, each device drew them in its own
   fallback font (an emoji on iPhone). Only arrows come from Cormorant; everything else stays Jost. */
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-Regular.woff2") format("woff2"), url("assets/fonts/Cormorant-Regular.otf") format("opentype"); font-weight: 100 449; font-style: normal; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-RegularItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-RegularItalic.otf") format("opentype"); font-weight: 100 449; font-style: italic; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-Medium.woff2") format("woff2"), url("assets/fonts/Cormorant-Medium.otf") format("opentype"); font-weight: 450 549; font-style: normal; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-MediumItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-MediumItalic.otf") format("opentype"); font-weight: 450 549; font-style: italic; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-Semi.woff2") format("woff2"), url("assets/fonts/Cormorant-Semi.otf") format("opentype"); font-weight: 550 649; font-style: normal; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-SemiItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-SemiItalic.otf") format("opentype"); font-weight: 550 649; font-style: italic; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-Bold.woff2") format("woff2"), url("assets/fonts/Cormorant-Bold.otf") format("opentype"); font-weight: 650 900; font-style: normal; font-display: swap; unicode-range: U+2190-21FF; }
@font-face { font-family: "DernekArrows"; src: url("assets/fonts/Cormorant-BoldItalic.woff2") format("woff2"), url("assets/fonts/Cormorant-BoldItalic.otf") format("opentype"); font-weight: 650 900; font-style: italic; font-display: swap; unicode-range: U+2190-21FF; }

:root {
  --green: #073c2e;
  --green-2: #0b4938;
  --ink: #111f33;
  --cream: #f5f0e8;
  --cream-deep: #eee7da;
  --orange: #ee4a2b;
  --coral-text: #bc412c; /* --coral'ın krem zeminde okunur (WCAG AA 4.7:1) tonu: bölüm etiketleri */
  --coral: #cf4933;
  --powder: #dfe8ed;
  --blush: #f3d7c4;
  --sage: #d9e4d5;
  --line: rgba(7, 60, 46, 0.19);
  --sans: "DernekArrows", "Jost", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant", Georgia, serif;
  --container: min(90vw, 1680px);
  --header-height: 78px;
}

* { box-sizing: border-box; }
/* Anchored sections start below the fixed header (its compact, scrolled height). */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
html.has-inertial-scroll { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--ff-bodyBase, var(--sans));
  font-size: var(--fs-bodyBase, 16px);
  font-weight: var(--fw-bodyBase, 400);
  font-style: var(--fst-bodyBase, normal);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.container { width: var(--container); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 1000; left: 1rem; top: -5rem; padding: .8rem 1rem;
  color: var(--cream); background: var(--orange); transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }
.scroll-progress { position: fixed; z-index: 110; inset: 0 0 auto; height: 3px; pointer-events: none; background: rgba(245,240,232,.14); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform .08s linear; }
.has-motion-cursor,
.has-motion-cursor :is(a, button, summary) { cursor: none; }
.motion-cursor {
  position: fixed; z-index: 1200; top: 0; left: 0; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
.motion-cursor.is-ready { opacity: 1; }
.motion-cursor span {
  width: 13px; height: 13px; display: block; border: 1px solid var(--orange); border-radius: 50%;
  background: var(--orange); transform: translate(-50%, -50%) scale(.8);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1), background .24s ease, border-color .24s ease;
}
.motion-cursor.is-active span { background: transparent; border-color: var(--green); transform: translate(-50%, -50%) scale(1.8); }

.site-header {
  position: fixed; z-index: 100; inset: 0 0 auto;
  height: var(--header-height); padding: 0 3vw;
  display: grid; grid-template-columns: 230px 1fr 58px; align-items: center; gap: 2rem;
  background: rgba(7, 60, 46, .96); color: var(--cream);
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: height .35s ease, box-shadow .35s ease, background .35s ease;
  backdrop-filter: blur(16px);
}
.site-header.scrolled { height: 64px; box-shadow: 0 12px 40px rgba(4,30,23,.18); }
.brand img { width: 190px; height: auto; }
.site-nav { justify-self: end; display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.7rem); }
.site-nav a {
  position: relative; padding: .55rem 0;
  font-family: var(--ff-navLink, var(--sans)); font-size: var(--fs-navLink, .82rem); line-height: 1; font-weight: var(--fw-navLink, 700); font-style: var(--fst-navLink, normal); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(246,241,231,.86); transition: color .2s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--orange); transition: right .25s ease;
}
.site-nav a:hover, .site-nav a.active { color: var(--orange); }
.site-nav a:hover::after, .site-nav a.active::after { right: 0; }
.header-mark { justify-self: end; width: 48px; height: 48px; }
.header-mark img { width: 100%; height: 100%; object-fit: contain; }
.menu-toggle { display: none; }

.hero {
  position: relative; isolation: isolate; height: calc(100svh - var(--header-height)); margin-top: var(--header-height); padding: 64px 5vw 70px;
  display: flex; align-items: center; overflow: hidden; background: var(--cream);
  border-bottom: 1px solid var(--line);
}
/* Hero stack, bottom to top: canvas -> readability veil -> grain -> copy.
   The veil used to sit at z-index 0, underneath the canvas, where it veiled
   nothing but the flat cream background it was already the colour of. */
.hero-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 1; }
.brand-scene { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.brand-scene canvas { display: block; width: 100%; height: 100%; }
.brand-scene-fallback {
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(178, 138, 74, .18), transparent 70%),
    radial-gradient(55% 45% at 18% 78%, rgba(8, 60, 43, .18), transparent 70%);
}
.hero-orbit {
  position: absolute; z-index: 4; right: 8vw; top: 50%; width: min(36vw, calc(100svh - 245px), 540px); aspect-ratio: 1;
  border: 1px solid rgba(17, 53, 41, .18); border-radius: 50%; transform: translateY(-50%); pointer-events: none;
}
.hero-orbit-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--orange); }
.hero-orbit-dot-top { top: 0; left: 50%; transform: translate(-50%, -50%); }
.hero-orbit-dot-right { top: 50%; right: 0; transform: translate(50%, -50%); }
.hero-orbit-dot-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.hero-orbit-dot-left { top: 50%; left: 0; transform: translate(-50%, -50%); }
.hero::after {
  content: ""; position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(90deg, rgba(246,241,231,.94) 0%, rgba(246,241,231,.88) 30%, rgba(246,241,231,.2) 58%, rgba(246,241,231,0) 82%);
  pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; z-index: 3; inset: 0;
  opacity: .05; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
.hero-copy { position: relative; z-index: 4; width: min(640px, 47vw); }
.hero h1 { margin: 0 0 1.4rem; font-weight: 400; line-height: .83; letter-spacing: -.045em; text-align: center; }
.hero h1 strong { display: block; color: var(--orange); font: var(--fst-heroStrong, normal) var(--fw-heroStrong, 600) var(--fs-heroStrong, clamp(5rem, 8.4vw, 9.4rem))/.78 var(--ff-heroStrong, var(--sans)); }
.hero h1 em { display: block; color: var(--green); font: var(--fst-heroEm, italic) var(--fw-heroEm, 400) var(--fs-heroEm, clamp(3.7rem, 5.2vw, 6.4rem))/.92 var(--ff-heroEm, var(--serif)); }
.hero-letter {
  display: inline-block; will-change: transform;
  transform: translate(var(--flee-x, 0), var(--flee-y, 0));
  transition: transform .56s cubic-bezier(.16, 1, .3, 1);
}
.hero-letter.hero-space { width: .25em; }
.eyebrow-line { width: 58px; height: 4px; margin: 1.6rem 0 1.2rem; background: var(--orange); transform-origin: left center; }
.hero-kicker {
  color: var(--green); font: var(--fst-heroKicker, italic) var(--fw-heroKicker, 700) var(--fs-heroKicker, 1rem)/1.4 var(--ff-heroKicker, var(--serif)); text-transform: uppercase; letter-spacing: .12em;
}
.hero-copy > p:not(.hero-kicker) { max-width: 610px; margin: .75rem 0; color: #1b4b40; font: var(--fst-heroBody, normal) var(--fw-heroBody, 400) var(--fs-heroBody, 1.08rem)/1.45 var(--ff-heroBody, var(--serif)); }

/* --- Hero entrance choreography -------------------------------------------
   Pure CSS, so the copy never depends on JS or on an IntersectionObserver that
   only fires after first paint. Each line is uncovered behind its own mask and
   staggered by --i. animation-fill-mode is `backwards`, not `both`: a filled
   animation would keep overriding `transform` afterwards and kill the button's
   hover lift. */
.hero-copy > *,
.hero h1 strong,
.hero h1 em {
  --i: 0;
  animation: hero-line-in 1.05s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i) * 105ms + 220ms);
}
.hero h1 { animation: none; }
.hero h1 strong { --i: 0; }
.hero h1 em { --i: 1; }
.hero .eyebrow-line { --i: 2; animation-name: hero-rule-in; animation-duration: .8s; }
.hero .hero-kicker { --i: 3; }
.hero-copy > p:not(.hero-kicker) { --i: 4; }
.hero-copy > p:not(.hero-kicker) ~ p:not(.hero-kicker) { --i: 5; }
.hero .button { --i: 6; }

@keyframes hero-line-in {
  from { clip-path: inset(0 0 108% 0); opacity: 0; transform: translateY(.4em); }
  to   { clip-path: inset(0 0 -100% 0); opacity: 1; transform: none; }
}
@keyframes hero-rule-in {
  from { opacity: 0; scale: 0 1; }
  to   { opacity: 1; scale: 1 1; }
}
.button {
  width: fit-content; min-height: 58px; margin-top: 1.7rem; padding: 0 1.7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 2.4rem;
  font-family: var(--ff-buttonLabel, var(--sans)); font-weight: var(--fw-buttonLabel, 750); font-size: var(--fs-buttonLabel, .78rem); font-style: var(--fst-buttonLabel, normal); letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid transparent; transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease;
}
.button:hover { transform: translateY(-3px); }
.button span { font-size: 1.2rem; font-weight: 400; }
.button-primary { color: white; background: linear-gradient(115deg, var(--coral), #e5703f); }
.button-primary:hover { background: var(--green); }

/* Extra polish is scoped to the hero CTA; every other button on the site keeps
   the transition it already had. */
.hero .button {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1),
              color .3s ease, background .3s ease, border-color .3s ease;
}
.hero .button span { transition: translate .4s cubic-bezier(.16, 1, .3, 1); }
.hero .button:hover span { translate: 6px 0; }
.hero .button-primary:hover { box-shadow: 0 16px 34px -14px rgba(7, 60, 46, .55); }
.scroll-cue {
  position: absolute; z-index: 5; right: 4vw; bottom: 3rem;
  display: flex; align-items: center; gap: .8rem; color: var(--green);
  font-family: var(--ff-scrollCue, var(--sans)); font-size: var(--fs-scrollCue, .7rem); font-weight: var(--fw-scrollCue, 700); font-style: var(--fst-scrollCue, normal); letter-spacing: .2em; text-transform: uppercase;
  animation: hero-line-in 1s cubic-bezier(.16, 1, .3, 1) 1.15s backwards;
}
.scroll-cue i { font-style: normal; color: var(--orange); animation: drop 1.6s infinite; }
@keyframes drop { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(6px); } }

/* Appears only near the end of the home page (script.js). Kept below the
   fixed header so it never covers the primary navigation. */
.back-to-top {
  position: fixed; z-index: 90; right: clamp(1rem, 2.2vw, 2rem); bottom: clamp(1rem, 2.2vw, 2rem);
  width: 54px; height: 54px; padding: 0; display: grid; place-items: center;
  color: var(--cream); background: var(--green); border: 1px solid var(--cream); border-radius: 50%;
  box-shadow: 0 12px 28px rgba(7, 60, 46, .25); cursor: pointer;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.back-to-top span { font: 400 1.65rem/1 var(--sans); }
.back-to-top:hover { background: var(--orange); box-shadow: 0 16px 32px rgba(7, 60, 46, .32); transform: translateY(-3px); }
.back-to-top:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.back-to-top[hidden] { display: none; }
@media (max-width: 560px) {
  .capability-detail-hero h1 { font-size: var(--fs-capDetailTitle, clamp(2.45rem, 13vw, 4rem)) !important; line-height: .84; overflow-wrap: anywhere; hyphens: auto; }
}

.section { padding: clamp(5rem, 7vw, 8rem) 0; }
.section-label {
  margin: 0 0 2rem; display: flex; align-items: center; gap: 1.5rem;
  color: var(--coral-text); font-family: var(--ff-sectionLabel, var(--sans)); font-size: var(--fs-sectionLabel, 1.248rem); font-weight: var(--fw-sectionLabel, 800); font-style: var(--fst-sectionLabel, normal); letter-spacing: .22em; text-transform: uppercase;
}
.section-label span { width: 66px; height: 3px; background: var(--green); }
.section-label.light { color: var(--cream); }
.display-title {
  margin: 0 0 clamp(3.5rem, 6vw, 7rem); color: #171717;
  font: var(--fw-displayTitle, 400) var(--fs-displayTitle, clamp(4.1rem, 6.7vw, 8rem))/.9 var(--ff-displayTitle, var(--serif)); letter-spacing: -.045em;
}
.display-title em { font-weight: var(--fw-displayTitle, 400); font-style: var(--fst-displayTitle, italic); }
.display-title span { color: var(--coral); }
.display-title.title-reveal.reveal,
.display-title.reveal {
  opacity: 1; transform: none; clip-path: inset(0 0 100% 0);
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1);
}
/* line-height .9 puts descenders (y, p, g) outside the line box, so the reveal mask extends below it at every width. */
.display-title.reveal.is-visible { clip-path: inset(-.1em -.1em -.35em -.1em); }

.approach { background: var(--cream); }
/* Label + title on the left, optional intro on the right (same rhythm as the projects heading). */
.section-heading { margin-bottom: clamp(3.5rem, 6vw, 7rem); }
.section-heading .display-title { margin: 0; }
.section-heading:has(> p) { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 4rem; }
.section-heading > p { max-width: 500px; margin: 0 0 1rem; color: var(--green); font-family: var(--ff-sectionIntro, var(--sans)); font-size: var(--fs-sectionIntro, 1.16rem); font-weight: var(--fw-sectionIntro, 400); font-style: var(--fst-sectionIntro, normal); }
.approach-list { display: grid; gap: 1.5rem; }
.approach-card {
  position: relative; min-height: 390px; display: grid; grid-template-columns: 58% 42%;
  border-radius: 12px; overflow: hidden;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1), box-shadow .55s cubic-bezier(.16, 1, .3, 1);
}
.approach-card.create { background: var(--powder); }
.approach-card.change { background: var(--blush); }
.approach-card.connect { background: var(--sage); }
.approach-copy { padding: clamp(2.4rem, 4vw, 5rem); display: flex; flex-direction: column; justify-content: center; }
.approach-copy { font-family: "Cormorant", Georgia, serif; }
.approach-copy h3 { margin: 0 0 1.3rem; font: var(--fst-approachTitle, normal) var(--fw-approachTitle, 600) var(--fs-approachTitle, clamp(4.6rem, 6.8vw, 8.2rem))/.94 var(--ff-approachTitle, var(--serif)); letter-spacing: -.04em; text-transform: uppercase; }
.approach-card.create h3 { color: var(--ink); }
.approach-card.change h3 { color: var(--coral); }
.approach-card.connect h3 { color: var(--green); }
.approach-copy p { max-width: 720px; margin: 0; font-family: var(--ff-approachBody, var(--serif)); font-size: var(--fs-approachBody, clamp(1.4rem, 1.75vw, 2rem)); font-weight: var(--fw-approachBody, 600); font-style: var(--fst-approachBody, normal); line-height: 1.25; }
.approach-image { min-height: 100%; overflow: hidden; }
.approach-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.approach-card:hover .approach-image img { transform: scale(1.045); }
.approach-card.is-visible .card-orb { animation: orb-drift 4.8s ease-in-out infinite; }
.card-orb {
  position: absolute; top: 50%; left: 58%; width: 88px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.72); box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.create .card-orb { background: var(--ink); }
.change .card-orb { background: var(--coral); }
.connect .card-orb { background: var(--green); }
.approach-card:nth-child(2).reveal { transition-delay: .08s; }
.approach-card:nth-child(3).reveal { transition-delay: .16s; }
@media (hover: hover) {
  .approach-card:hover { transform: translateY(-10px); box-shadow: 0 22px 42px -24px rgba(7,60,46,.45); }
  .approach-card:hover .approach-image img { transform: scale(1.08); }
  .approach-card:hover .card-orb { animation-play-state: paused; transform: translate(-50%,-50%) scale(1.16) rotate(18deg); }
}
@keyframes orb-drift { 0%,100% { translate: 0 -7px; } 50% { translate: 0 7px; } }

.capabilities { padding-top: clamp(4rem, 5.5vw, 6.5rem); background: var(--cream); }
.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.capability-card { min-height: 290px; padding: 2rem 3rem 2.4rem; display: grid; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability-card-link { min-height: 100%; display: grid; grid-template-columns: 1fr auto; align-items: start; align-content: start; gap: .5rem 2rem; color: inherit; }
.capability-number { grid-column: 1 / -1; color: var(--coral); font-family: var(--ff-capabilityNumber, var(--sans)); font-weight: var(--fw-capabilityNumber, 800); font-size: var(--fs-capabilityNumber, .95rem); font-style: var(--fst-capabilityNumber, normal); }
.capability-title { color: var(--green); font: var(--fst-capabilityTitle, normal) var(--fw-capabilityTitle, 400) var(--fs-capabilityTitle, clamp(2.1rem, 3vw, 3.5rem))/1 var(--ff-capabilityTitle, var(--serif)); text-transform: uppercase; }
.capability-toggle { align-self: end; color: var(--coral); font-size: 1.5rem; transition: transform .25s ease; }
.capability-card:hover .capability-toggle, .capability-card:focus-within .capability-toggle { transform: translateX(5px); }
.capability-motion .capability-card-link::after {
  content: ""; grid-column: 1 / -1; display: block; width: 0; height: 2px; margin-top: .7rem;
  background: var(--coral); transition: width .55s cubic-bezier(.16, 1, .3, 1);
}
.capability-motion.reveal.is-visible .capability-card-link::after { width: 58px; }
.capability-motion.reveal.is-visible p { animation: capability-copy-in .55s .1s both; }
.capability-motion.reveal.is-visible .capability-detail-link { animation: capability-copy-in .55s .2s both; }
@keyframes capability-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.capability-card p { max-width: 710px; margin: 1.8rem 0 0; color: #374556; font: var(--fst-capabilityBody, italic) var(--fw-capabilityBody, 400) var(--fs-capabilityBody, 1.02rem)/1.6 var(--ff-capabilityBody, var(--serif)); }
.capability-card-link > :is(p, .capability-detail-link) { grid-column: 1 / -1; }
.capability-detail-link { width: fit-content; margin-top: 1.35rem; display: inline-flex; gap: 1.8rem; color: var(--coral); border-bottom: 1px solid currentColor; font-family: var(--ff-capabilityLink, var(--sans)); font-size: var(--fs-capabilityLink, .74rem); font-weight: var(--fw-capabilityLink, 800); font-style: var(--fst-capabilityLink, normal); letter-spacing: .1em; text-transform: uppercase; }
/* Link sits at the right edge; the card turns navy on hover / keyboard focus. */
.capability-grid .capability-detail-link { display: flex; margin-left: auto; }
.capability-grid .capability-card {
  --cap-navy: #0b1f38;
  --cap-accent: #ff7a5c;
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1), background-color .35s ease;
}
.capability-card .capability-title,
.capability-card p,
.capability-number,
.capability-toggle,
.capability-detail-link { transition: color .35s ease; }
.capability-grid .capability-card:focus-within { background-color: var(--cap-navy); }
.capability-card:focus-within .capability-title { color: var(--cream); }
.capability-card:focus-within p { color: rgba(245, 240, 232, .78); }
.capability-card:focus-within :is(.capability-number, .capability-toggle, .capability-detail-link) { color: var(--cap-accent); }
@media (hover: hover) {
  .capability-grid .capability-card:hover { background-color: var(--cap-navy); }
  .capability-card:hover .capability-title { color: var(--cream); }
  .capability-card:hover p { color: rgba(245, 240, 232, .78); }
  .capability-card:hover :is(.capability-number, .capability-toggle, .capability-detail-link) { color: var(--cap-accent); }
}

.marquee { position: relative; overflow: hidden; color: var(--cream); background: var(--green); }
.marquee-track {
  width: max-content; padding: 1.65rem 0; display: flex; align-items: center; gap: 2.7rem;
  animation: marquee 28s linear infinite;
}
.marquee span { font-family: var(--ff-marqueeItem, var(--sans)); font-size: var(--fs-marqueeItem, 1rem); font-weight: var(--fw-marqueeItem, 400); font-style: var(--fst-marqueeItem, normal); letter-spacing: .03em; text-transform: uppercase; }
.marquee i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
@keyframes marquee { to { transform: translateX(-50%); } }

.projects { padding-bottom: clamp(4.5rem, 5.5vw, 6.5rem); background: var(--cream); }
.projects-heading { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.projects-heading .display-title { margin: 0; }
.projects-heading > p { max-width: 500px; margin: 0 0 1rem; color: var(--green); font-family: var(--ff-sectionIntro, var(--sans)); font-size: var(--fs-sectionIntro, 1.16rem); font-weight: var(--fw-sectionIntro, 400); font-style: var(--fst-sectionIntro, normal); }
.project-row { position: relative; display: grid; grid-template-columns: 32% 68%; min-height: 430px; border-bottom: 1px solid var(--line); cursor: pointer; }
.project-row-hit-area { position: absolute; z-index: 2; inset: 0; }
.project-row-hit-area:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.project-info { padding: 3.8rem 3.4rem 3.5rem 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.project-type { margin: 0 0 1.2rem; color: var(--coral); font-family: var(--ff-projectType, var(--sans)); font-size: var(--fs-projectType, .8rem); font-weight: var(--fw-projectType, 800); font-style: var(--fst-projectType, normal); letter-spacing: .15em; text-transform: uppercase; }
.project-info h3 { margin: 0 0 .8rem; color: var(--green); font: var(--fst-projectTitle, italic) var(--fw-projectTitle, 400) var(--fs-projectTitle, clamp(2rem, 3vw, 3.5rem))/1 var(--ff-projectTitle, var(--serif)); }
.project-info strong { color: var(--green); font-family: var(--ff-projectSubtitle, var(--sans)); font-size: var(--fs-projectSubtitle, .77rem); font-weight: var(--fw-projectSubtitle, 700); font-style: var(--fst-projectSubtitle, normal); letter-spacing: .08em; text-transform: uppercase; }
.project-info > p:not(.project-type) { max-width: 430px; margin: 1rem 0; color: #375548; }
.project-info-link { width: fit-content; margin-top: .5rem; color: var(--coral); border-bottom: 1px solid var(--coral); }
.project-info-link span { margin-left: 2rem; }
.project-visual { min-height: 390px; display: flex; align-items: center; overflow: hidden; }
.project-visual img { width: 100%; height: 100%; object-fit: contain; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.media-reveal.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.16, 1, .3, 1); }
.media-reveal.reveal img { transform: scale(1.1); transition: transform 1.25s cubic-bezier(.16, 1, .3, 1); }
.media-reveal.reveal.is-visible { clip-path: inset(0 0 0 0); }
.media-reveal.reveal.is-visible img { transform: scale(1); }
.project-info h3, .project-info-link span { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .project-row:hover .media-reveal.reveal.is-visible img { transform: scale(1.035); }
  .project-row:hover .project-info h3 { transform: translateX(10px); }
  .project-row:hover .project-info-link span { transform: translateX(7px); }
  .expert-card:hover .media-reveal.reveal.is-visible img { filter: grayscale(0); transform: scale(1.04); }
}
.project-visual.cinematic { padding: 2rem 0; }
.project-list.is-collapsed .project-row-extra { display: none; }
.project-more-row { display: flex; align-items: center; justify-content: center; padding: clamp(1.6rem, 2.6vw, 2.4rem) 0; border-bottom: 1px solid var(--line); }
.project-more { margin-top: 0; gap: 1.6rem; color: var(--green); background: transparent; border-color: var(--green); cursor: pointer; }
.project-more:hover { color: var(--cream); background: var(--green); }
.project-more[hidden] { display: none; }
.project-more .project-more-label { font-size: inherit; font-weight: inherit; }
.project-more:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.project-more-icon { display: inline-block; transition: transform .3s ease; }
.project-more[aria-expanded="true"] .project-more-icon { transform: rotate(45deg); }
.project-visual.cinematic img { max-height: 420px; object-fit: cover; border-radius: 2px; }

/* Selected Projects becomes a pinned card deck on larger screens. The
   wrapper provides the scroll distance; each card is positioned by script
   so the next project rises over the one before it. */
@media (min-width: 721px) {
  .project-stack.is-enhanced { position: relative; height: var(--project-stack-height); }
  .project-stack.is-enhanced .project-list {
    position: sticky; top: calc(var(--header-height) + 20px); height: min(78svh, 720px);
    overflow: hidden; perspective: 1400px; border: 0; background: var(--cream);
  }
  .project-stack.is-enhanced .project-row {
    position: absolute; inset: 0; width: 100%; min-height: 0; background: var(--cream);
    border: 0; transform-origin: 50% 0; will-change: transform, opacity;
    /* Position is driven by scroll in script.js; the generic .reveal transition would make cards trail the scroll. */
    transition: none;
  }
  .project-stack.is-enhanced .project-row-extra { display: grid; }
  .project-stack.is-enhanced .project-visual { min-height: 0; }
  .project-stack.is-enhanced .project-visual.cinematic { padding: 1.5rem 0; }
}
@media (min-width: 901px) {
  .project-stack.is-enhanced .project-list { height: min(68svh, 590px); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .project-stack.is-enhanced .project-visual { min-height: 260px; }
}

.founder { padding: clamp(3.5rem, 4.5vw, 5.5rem) 0 0; background: var(--cream); }
.founder .section-label { margin: 0 0 .6rem 4.5%; }
.founder-layout { position: relative; display: grid; grid-template-columns: 29.5% 70.5%; align-items: end; min-height: 710px; }
.founder-portrait { position: relative; z-index: 1; align-self: end; min-height: 540px; margin-bottom: 4.8rem; display: flex; align-items: flex-end; }
.founder-portrait > img { position: relative; z-index: 2; width: 88%; max-width: none; max-height: 540px; object-fit: contain; object-position: left bottom; border-radius: 46% 46% 22px 22px / 16% 16% 22px 22px; }
.founder-thread { position: absolute; z-index: 1; top: -1.2rem; right: -3rem; width: 48%; height: 82%; overflow: visible; }
.founder-thread path { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; }
.founder-thread circle { fill: var(--coral); }
.founder-portrait.reveal .founder-thread path { stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.5s .15s cubic-bezier(.16, 1, .3, 1); }
.founder-portrait.reveal .founder-thread circle { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale .35s 1.15s cubic-bezier(.16, 1, .3, 1); }
.founder-portrait.reveal.is-visible .founder-thread path { stroke-dashoffset: 0; }
.founder-portrait.reveal.is-visible .founder-thread circle { scale: 1; }
.founder-copy { align-self: stretch; min-width: 0; padding: 0 0 4.8rem 5rem; display: flex; flex-direction: column; justify-content: flex-start; }
.founder-portrait-mobile { display: none; }
/* The heading is a full sentence, so it wraps (balanced) with enough line height that wrapped lines never overlap. */
.founder-copy .founder-heading { margin: 0 0 2.6rem; color: var(--ink); font: var(--fst-founderHeading, normal) var(--fw-founderHeading, 400) var(--fs-founderHeading, clamp(4.7rem, 5.75vw, 6.9rem))/.95 var(--ff-founderHeading, var(--sans)); letter-spacing: -.055em; text-wrap: balance; overflow-wrap: break-word; }
.founder-copy .founder-heading em { display: block; margin-bottom: .1em; color: var(--ink); font: var(--fst-founderHeadingEm, italic) var(--fw-founderHeadingEm, 400) var(--fs-founderHeadingEm, 1.04em)/.95 var(--ff-founderHeadingEm, var(--serif)); }
.founder-copy .founder-heading span { display: block; color: var(--orange); }
.founder-copy .founder-subhead { max-width: 1120px; margin: 0 0 .55rem; color: #292929; font: var(--fst-founderSubhead, italic) var(--fw-founderSubhead, 500) var(--fs-founderSubhead, clamp(1.62rem, 1.9vw, 2.35rem))/1.08 var(--ff-founderSubhead, var(--serif)); }
.founder-copy .founder-subhead-empty { margin: 0 0 .55rem; } /* boş alt başlığın yerini aynı boşlukla tutar */
.founder-copy > p { max-width: 1130px; margin: 0; color: #303030; font: var(--fst-founderBody, italic) var(--fw-founderBody, 400) var(--fs-founderBody, clamp(1.18rem, 1.35vw, 1.58rem))/1.32 var(--ff-founderBody, var(--serif)); }
.founder-copy > p + p { margin-top: .8em; }
.founder-meta { margin-top: auto; padding-top: 2.6rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.founder-meta div { display: grid; line-height: 1.2; }
.founder-meta strong { font-family: var(--ff-founderMetaName, var(--sans)); font-size: var(--fs-founderMetaName, 1.45rem); font-weight: var(--fw-founderMetaName, 500); font-style: var(--fst-founderMetaName, normal); }
.founder-meta div > span { font-family: var(--ff-founderMetaRole, var(--sans)); font-size: var(--fs-founderMetaRole, 1.05rem); font-weight: var(--fw-founderMetaRole, 400); font-style: var(--fst-founderMetaRole, normal); text-transform: uppercase; letter-spacing: .035em; }

/* Archive pages (/projects/, /experts/, /capabilities/): same heading as the home page sections. */
main.archive-page { padding-top: clamp(30px, 4vw, 66px); }
.archive-page .projects-heading { margin-top: clamp(48px, 6vw, 96px); }
.archive-page .expert-grid { margin-top: clamp(3rem, 5vw, 5rem); }

/* Experience timeline and consultancy services: the same CSS as the former founder detail page
   (Cormorant, same sizes and spacing). Only the year colour (orange) and the cream badge
   background (to match this page) differ. */
.career-record { padding: clamp(78px, 8vw, 126px) 0; overflow-x: clip; }
.founder-record-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr); gap: 28px; align-items: end; margin-bottom: clamp(56px, 7vw, 100px); }
.founder-record-head :is(h1, h2) { max-width: 820px; margin: 0; color: #153d33; font: var(--fst-founderRecordTitle, italic) var(--fw-founderRecordTitle, 400) var(--fs-founderRecordTitle, clamp(3.2rem, 5.5vw, 6.4rem))/.88 var(--ff-founderRecordTitle, var(--serif)); letter-spacing: -.05em; }
.founder-record-head p { max-width: 300px; margin: 0 0 .4em; color: #527066; font-family: var(--ff-founderRecordLabel, var(--sans)); font-size: var(--fs-founderRecordLabel, .77rem); font-weight: var(--fw-founderRecordLabel, 700); font-style: var(--fst-founderRecordLabel, normal); letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; }
.career-record-list { position: relative; margin: 0; padding: 0; list-style: none; }
.career-record-list::before { position: absolute; top: 0; bottom: 0; left: calc(50% + var(--line-x, 0px)); width: var(--line-width, 1px); content: ''; background: var(--line-color, rgba(20, 61, 50, .35)); }
.career-record-entry { position: relative; min-height: 180px; display: grid; grid-template-columns: minmax(0, 1fr) 134px minmax(0, 1fr); padding: 0 0 42px; }
.career-record-entry article { --line-color: rgba(20, 61, 50, .28); --line-width: 1px; --line-x: 0px; --line-y: 0px; --line-length: 100%; position: relative; width: min(100%, 600px); padding: 26px 0 28px; border-top: var(--line-width) solid transparent; }
/* The rule above each entry: its own line, movable apart from the entry's text. */
.career-record-entry article::before { position: absolute; top: calc(var(--line-y) - var(--line-width)); left: var(--line-x); width: var(--line-length); height: var(--line-width); content: ''; background: var(--line-color); pointer-events: none; }
.career-record-entry.is-left article { grid-column: 1; padding-right: clamp(24px, 5vw, 86px); }
.career-record-entry.is-right article { grid-column: 3; padding-left: clamp(24px, 5vw, 86px); }
.career-record-year { position: relative; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; color: #ee4a2b; background: var(--cream); --line-color: rgba(20, 61, 50, .35); --line-width: 1px; border: var(--line-width) solid var(--line-color); border-radius: 50%; font-family: var(--ff-careerYearBadge, var(--serif)); font-size: var(--fs-careerYearBadge, 1.45rem); font-weight: var(--fw-careerYearBadge, 600); font-style: var(--fst-careerYearBadge, normal); }
.career-record-tag { display: block; margin-bottom: 15px; color: #ee4a2b; font-family: var(--ff-careerTag, var(--sans)); font-size: var(--fs-careerTag, .72rem); font-weight: var(--fw-careerTag, 700); font-style: var(--fst-careerTag, normal); letter-spacing: .12em; text-transform: uppercase; }
.career-record-entry h3 { margin: 0 0 12px; color: #153d33; font: var(--fst-careerEntryTitle, italic) var(--fw-careerEntryTitle, 500) var(--fs-careerEntryTitle, clamp(2rem, 2.7vw, 3.25rem))/.96 var(--ff-careerEntryTitle, var(--serif)); letter-spacing: -.04em; }
.career-record-entry p { max-width: 560px; margin: 0; color: #38534b; font-family: var(--ff-careerEntryBody, var(--sans)); font-size: var(--fs-careerEntryBody, clamp(.95rem, 1.02vw, 1.12rem)); font-weight: var(--fw-careerEntryBody, 400); font-style: var(--fst-careerEntryBody, normal); line-height: 1.55; }
.founder-services { padding: clamp(28px, 4vw, 56px) 0 0; }
.founder-services .founder-record-head { display: block; margin-bottom: clamp(22px, 3vw, 36px); }
.founder-services .founder-record-head :is(h1, h2) { max-width: none; font: var(--fst-founderServicesTitle, normal) var(--fw-founderServicesTitle, 600) var(--fs-founderServicesTitle, clamp(4rem, 7vw, 8rem))/.84 var(--ff-founderServicesTitle, var(--serif)); letter-spacing: -.05em; }
.founder-services-intro { max-width: none; margin: 0 0 clamp(42px, 5vw, 70px); padding: 0; text-align: left; }
.founder-services-intro p { margin: 0; color: #38534b; font: var(--fst-founderServicesIntro, normal) var(--fw-founderServicesIntro, 400) var(--fs-founderServicesIntro, clamp(1.25rem, 1.55vw, 1.8rem))/1.35 var(--ff-founderServicesIntro, var(--serif)); }
.founder-services-intro p + p { margin-top: .8em; }
.founder-services-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(20, 61, 50, .3); border-left: 1px solid rgba(20, 61, 50, .3); }
.founder-services-list li { min-height: 138px; padding: 26px; display: flex; flex-direction: column; gap: 24px; color: #153d33; border-right: 1px solid rgba(20, 61, 50, .3); border-bottom: 1px solid rgba(20, 61, 50, .3); }
.founder-services-list b { color: #ee4a2b; font-family: var(--ff-founderServicesNum, var(--sans)); font-size: var(--fs-founderServicesNum, .78rem); font-weight: var(--fw-founderServicesNum, 700); font-style: var(--fst-founderServicesNum, normal); letter-spacing: .1em; }
.founder-services-list span { max-width: 330px; font: var(--fst-founderServicesItem, normal) var(--fw-founderServicesItem, 500) var(--fs-founderServicesItem, clamp(1.45rem, 1.65vw, 2rem))/1.05 var(--ff-founderServicesItem, var(--serif)); letter-spacing: -.025em; }
@media (max-width: 1120px) { .founder-services-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .founder-record-head { grid-template-columns: minmax(0, 1fr) minmax(180px, .48fr); }
  .career-record-entry { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .founder-record-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 46px; }
  .founder-record-head :is(h1, h2) { font-size: var(--fs-founderRecordTitle, clamp(3.3rem, 15vw, 4.5rem)); }
  .founder-services .founder-record-head { margin-bottom: 22px; }
  .founder-services .founder-record-head :is(h1, h2) { font-size: var(--fs-founderServicesTitle, clamp(3rem, 15vw, 4rem)); }
  .career-record-list { padding-left: 58px; }
  .career-record-list::before { left: calc(20px + var(--line-x, 0px)); }
  .career-record-entry { display: block; min-height: 0; padding: 0 0 34px; }
  .career-record-entry article, .career-record-entry.is-left article, .career-record-entry.is-right article { width: 100%; padding: 22px 0 0; }
  .career-record-year { position: absolute; top: 0; left: -58px; width: 42px; height: 42px; font-size: var(--fs-careerYearBadge, .82rem); }
  .career-record-tag { margin-bottom: 11px; font-size: var(--fs-careerTag, .66rem); }
  .career-record-entry h3 { font-size: var(--fs-careerEntryTitle, clamp(1.9rem, 10vw, 2.55rem)); }
  .career-record-entry p { font-size: var(--fs-careerEntryBody, .97rem); }
  .founder-services-list { grid-template-columns: 1fr; }
  .founder-services-list li { min-height: 116px; padding: 22px; gap: 22px; }
  .founder-services-list span { font-size: var(--fs-founderServicesItem, 1.55rem); }
}
/* Motion: the line draws down, each entry wipes in from its own side, badges pop. Only when JS marks it ready. */
@media (prefers-reduced-motion: no-preference) {
  .career-record.motion-ready .career-record-list::before { transform: scaleY(0); transform-origin: top; transition: transform 1.7s .12s cubic-bezier(.16, 1, .3, 1); }
  .career-record.motion-ready.is-visible .career-record-list::before { transform: scaleY(1); }
  .career-record.motion-ready .career-record-entry article { opacity: 0; transition: clip-path .8s cubic-bezier(.16, 1, .3, 1), opacity .35s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
  .career-record.motion-ready .career-record-entry.is-left article { clip-path: inset(0 0 0 100%); transform: translateX(-18px); }
  .career-record.motion-ready .career-record-entry.is-right article { clip-path: inset(0 100% 0 0); transform: translateX(18px); }
  .career-record.motion-ready .career-record-year { scale: 0; transition: scale .45s cubic-bezier(.16, 1, .3, 1); }
  /* Open to the sides/top once shown, so an entry's moved rule is not cut off. */
  .career-record.motion-ready .career-record-entry.is-visible article { clip-path: inset(-200px -100vw 0 -100vw); opacity: 1; transform: none; }
  .career-record.motion-ready .career-record-entry.is-visible .career-record-year { scale: 1; }
}
.projects-seal { display: grid; place-items: center; padding: clamp(4rem, 6vw, 7rem) 0; background: var(--cream); }
/* The seal sits exactly midway between Consulting and the next section (Model): both neighbours give up their own spacing so the two gaps are equal at every width. */
.section.founder { padding-bottom: 0; }
.projects-seal + .section { padding-top: 0; }
/* …but a menu jump to that section keeps the same space above its label as Capabilities. */
.projects-seal + .section { scroll-margin-top: clamp(4rem, 5.5vw, 6.5rem); }
.projects-seal img { width: clamp(190px, 11.8vw, 225px); transform-origin: center; animation: founder-seal-spin 42s linear infinite; }
@keyframes founder-seal-spin { to { transform: rotate(360deg); } }

.experts { padding: clamp(5rem, 6vw, 6.5rem) 0; overflow-x: clip; background: var(--cream); }
.expert-grid { min-width: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6rem 3rem; }
.expert-card { min-width: 0; max-width: 100%; grid-column: span 3; }
.expert-image { height: 350px; margin-bottom: 1.6rem; overflow: hidden; }
.expert-image.cutout { background: transparent; }
.expert-image.photo { background: #e8e7e1; }
.expert-image img { width: 100%; height: 100%; filter: grayscale(1); transition: filter .4s ease, transform .6s ease; }
.expert-image.cutout img { object-fit: contain; object-position: center bottom; }
.expert-image.reference-cutout img { object-fit: cover; object-position: 62% bottom; }
.expert-image.photo img { object-fit: cover; object-position: center 26%; }
.expert-card:hover .expert-image img { filter: grayscale(0); transform: scale(1.025); }
.expert-card h3 { margin: 0; color: var(--ink); font: var(--fst-expertName, italic) var(--fw-expertName, 400) var(--fs-expertName, 1.08rem)/1.15 var(--ff-expertName, var(--serif)); }
.expert-card em { display: block; margin: .35rem 0 1rem; color: #597066; font: var(--fst-expertRole, normal) var(--fw-expertRole, 400) var(--fs-expertRole, 1.2rem)/1.2 var(--ff-expertRole, var(--sans)); letter-spacing: .035em; text-transform: uppercase; }
.expert-card p {
  height: calc(1.45em * 4); min-height: 0; margin: 0; overflow: hidden; color: #617a6f; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}
.expert-card > .expert-card-arrow { width: 48px; height: 48px; margin: 2rem 0 0 auto; display: grid; place-items: center; border: 1px solid #9aa6a1; border-radius: 50%; transition: .25s ease; }
.expert-card:hover > .expert-card-arrow { color: var(--cream); background: var(--green); border-color: var(--green); transform: translateX(4px); }
/* The whole card opens the expert page, not just the arrow. */
.expert-card { position: relative; }
.expert-card-hit-area { position: absolute; z-index: 2; inset: 0; }
.expert-card-hit-area:focus-visible { outline: 3px solid var(--coral); outline-offset: 6px; }

.contact-section { min-height: 100svh; overflow: hidden; color: var(--cream); background: #071c35; }
.contact-stage { position: relative; min-height: 57svh; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(8,76,58,.32), transparent 36%), linear-gradient(110deg, #063d31 0%, #00392c 48%, #05362d 100%); }
.contact-stage::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .26; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.012) 32px), linear-gradient(180deg, rgba(0,0,0,.12), transparent 28%); }
.contact-stage-inner { position: relative; z-index: 1; width: min(100%, 1800px); min-height: 57svh; margin: 0 auto; padding: 88px 5vw 0; display: grid; grid-template-columns: 31% 38% 31%; align-items: center; }
.contact-display { position: relative; z-index: 3; margin: 0; display: flex; flex-direction: column; font: var(--fst-contactDisplay, normal) var(--fw-contactDisplay, 500) var(--fs-contactDisplay, clamp(4rem, 8vw, 9.6rem))/.78 var(--ff-contactDisplay, var(--serif)); letter-spacing: -.055em; }
.contact-display em { margin-top: 22px; color: #fff; font-family: var(--ff-contactDisplayEm, var(--serif)); font-size: var(--fs-contactDisplayEm, .85em); font-weight: var(--fw-contactDisplayEm, 500); font-style: var(--fst-contactDisplayEm, normal); white-space: nowrap; }
.contact-bell { position: relative; z-index: 2; width: 18vw; max-width: 300px; display: block; justify-self: center; align-self: end; transform: translateY(4%); }
.contact-bell-ring { position: absolute; z-index: -1; top: -2%; left: 50%; width: 80%; aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; transform: translateX(-50%); }
.contact-bell img { width: 100%; height: auto; filter: drop-shadow(0 18px 16px rgba(0,0,0,.35)); transition: transform .24s ease; }
.contact-bell:hover img { transform: translateY(-5px); }
@media (min-width: 861px) {
  .contact-bell { animation: bell-float 4.6s ease-in-out infinite; }
  .contact-bell-ring { animation: bell-pulse 2.8s ease-out infinite; }
}
@media (min-width: 721px) and (max-width: 860px) {
  .contact-bell { animation: bell-float-centered 4.6s ease-in-out infinite; }
  .contact-bell-ring { animation: bell-pulse 2.8s ease-out infinite; }
}
@keyframes bell-float { 0%,100% { transform: translateY(4%) rotate(-1.5deg); } 50% { transform: translateY(-2%) rotate(1.5deg); } }
@keyframes bell-float-centered { 0%,100% { transform: translateX(-50%) translateY(3%) rotate(-1.5deg); } 50% { transform: translateX(-50%) translateY(-2%) rotate(1.5deg); } }
@keyframes bell-float-mobile { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes bell-pulse { 0% { opacity: .65; scale: .9; } 70%,100% { opacity: 0; scale: 1.35; } }
.contact-invite { position: relative; z-index: 3; justify-self: end; width: min(100%, 350px); padding-left: 22px; }
.contact-invite h3 { margin: 0; font: var(--fst-contactInviteTitle, normal) var(--fw-contactInviteTitle, 500) var(--fs-contactInviteTitle, clamp(2.6rem, 3.6vw, 4.5rem))/.92 var(--ff-contactInviteTitle, var(--serif)); letter-spacing: -.035em; }
.contact-invite > span { display: block; width: 54px; height: 2px; margin: 34px 0 26px; background: #fff; }
.contact-invite p { margin: 0; color: rgba(245,240,232,.87); font-family: var(--ff-contactInviteBody, var(--sans)); font-size: var(--fs-contactInviteBody, clamp(1rem, 1.25vw, 1.35rem)); font-weight: var(--fw-contactInviteBody, 400); font-style: var(--fst-contactInviteBody, normal); line-height: 1.38; }
.contact-panel { position: relative; z-index: 3; min-height: 43svh; padding: clamp(68px, 9svh, 104px) 5vw clamp(36px, 5svh, 60px); display: flex; flex-direction: column; background: radial-gradient(circle at 51% 8%, rgba(21,51,79,.34), transparent 36%), #071c35; }
/* With the optional email CTA absent, return its 80 px of vertical space. */
.contact-panel-no-cta { min-height: calc(43svh - 80px); }
.contact-cta { width: min(100%, 510px); min-height: 80px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; background: #fff; box-shadow: 0 13px 0 rgba(4,20,38,.24); color: #071c35; font-family: var(--ff-contactCta, var(--sans)); font-size: var(--fs-contactCta, .95rem); font-weight: var(--fw-contactCta, 400); font-style: var(--fst-contactCta, normal); letter-spacing: .18em; transition: transform .22s ease, box-shadow .22s ease; }
.contact-cta:hover { transform: translateY(-3px); box-shadow: 0 17px 0 rgba(4,20,38,.22); }
.contact-cta i { font-size: 1.7rem; font-weight: 300; line-height: 1; }
.contact-details { width: min(100%, 1380px); margin: auto auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.contact-detail { min-height: 112px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 20px; color: var(--cream); }
.contact-detail + .contact-detail { border-left: 1px solid rgba(255,255,255,.7); }
.contact-detail svg { width: 45px; height: 45px; overflow: visible; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.contact-detail:hover svg { transform: translateY(-4px); }
.contact-detail span { font-family: var(--ff-contactDetailText, var(--sans)); font-size: var(--fs-contactDetailText, clamp(.82rem, 1vw, 1rem)); font-weight: var(--fw-contactDetailText, 400); font-style: var(--fst-contactDetailText, normal); letter-spacing: .18em; line-height: 1.2; text-align: center; }

@media (max-width: 860px) {
  .contact-stage, .contact-stage-inner { min-height: 800px; }
  .contact-stage-inner { padding: 122px 8vw 0; grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-display { padding-top: 28px; font-size: var(--fs-contactDisplay, clamp(4.1rem, 13vw, 7rem)); }
  .contact-invite { padding: 36px 0 0 20px; }
  .contact-invite h3 { font-size: var(--fs-contactInviteTitle, clamp(2.7rem, 7vw, 3.8rem)); }
  .contact-bell { position: absolute; bottom: -4px; left: 50%; width: min(38vw, 300px); transform: translateX(-50%); }
  .contact-panel { min-height: 590px; padding: 120px 8vw 52px; }
  .contact-panel-no-cta { min-height: 510px; }
  .contact-details { margin-top: 76px; }
}

@media (max-width: 720px) {
  .contact-stage, .contact-stage-inner { min-height: 720px; }
  .contact-stage-inner { padding: 84px 1.5rem 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .contact-display { padding-top: 0; align-items: center; text-align: center; }
  .contact-bell { position: relative; inset: auto; width: min(52vw, 250px); margin: 1.8rem auto; align-self: center; transform: none; }
  .contact-invite { width: min(100%, 340px); margin: 0; padding: 0; justify-self: auto; text-align: center; }
  .contact-invite > span { margin-inline: auto; }
  .contact-panel { min-height: auto; padding: 90px 8vw 36px; }
  .contact-details { margin-top: 52px; grid-template-columns: 1fr; }
  .contact-panel-no-cta .contact-details { margin-top: 0; }
  .contact-detail { min-height: 96px; padding: 20px 8px; flex-direction: row; justify-content: flex-start; gap: 22px; }
  .contact-detail + .contact-detail { border-top: 1px solid rgba(255,255,255,.55); border-left: 0; }
  .contact-detail svg { width: 38px; height: 38px; flex: 0 0 38px; }
  .contact-detail span { overflow-wrap: anywhere; text-align: left; }
  .contact-bell { animation: bell-float-mobile 4.6s ease-in-out infinite; }
  .contact-bell-ring { animation: bell-pulse 2.8s ease-out infinite; }
}

/* Touch devices do not expose hover. Active and focus states keep the same
   feedback language without relying on a pointer that is not available. */
@media (hover: none) {
  .approach-card:active { transform: translateY(-5px); box-shadow: 0 16px 34px -24px rgba(7,60,46,.42); }
  .approach-card:active .approach-image img { transform: scale(1.055); }
  .capability-grid .capability-card:active { background-color: var(--cap-navy); }
  .capability-card:active .capability-title { color: var(--cream); }
  .capability-card:active p { color: rgba(245,240,232,.78); }
  .capability-card:active :is(.capability-number, .capability-toggle, .capability-detail-link) { color: var(--cap-accent); }
  .expert-card:active > .expert-card-arrow { color: var(--cream); background: var(--green); border-color: var(--green); transform: translateX(4px); }
  .contact-cta:active { transform: translateY(-3px); box-shadow: 0 17px 0 rgba(4,20,38,.22); }
  .contact-detail:active svg { transform: translateY(-4px); }
}
.button-light { color: var(--green); background: var(--cream); }
.button-light:hover { color: var(--cream); background: var(--orange); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Scroll-linked hero exit. Runs off the compositor with no scroll listener,
   and is simply absent on engines without scroll-driven animations. */
@keyframes hero-canvas-exit {
  to { opacity: .12; transform: translateY(-5%) scale(1.05); }
}
@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .hero-canvas {
      animation: hero-canvas-exit linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 175px 1fr 44px; }
  .brand img { width: 158px; }
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: var(--fs-navLink, .68rem); }
  .hero-copy { width: min(600px, 52vw); }
  .approach-card { grid-template-columns: 55% 45%; }
  .card-orb { left: 55%; width: 72px; }
  .project-row { grid-template-columns: 38% 62%; }
  .founder-layout { grid-template-columns: 34% 66%; }
  .founder-copy { padding-left: 2.5rem; }
  .founder-copy .founder-heading { font-size: var(--fs-founderHeading, clamp(4rem, 6.4vw, 5.6rem)); }
  .founder-copy > p { font-size: var(--fs-founderBody, 1.14rem); }
  .expert-grid { gap: 4rem 2rem; }
  .expert-card { grid-column: span 6; }
  .expert-image { height: 350px; }
}

@media (max-width: 900px) {
  :root { --header-height: 68px; }
  html { scroll-padding-top: 58px; }
  .site-header { height: var(--header-height); grid-template-columns: 1fr auto auto; padding: 0 1.25rem; backdrop-filter: none; }
  .site-header.scrolled { height: 58px; }
  .brand img { width: 145px; }
  .header-mark { width: 38px; height: 38px; }
  .menu-toggle { position: relative; z-index: 3; width: 42px; height: 42px; padding: 0; display: grid; place-content: center; gap: 7px; color: var(--cream); background: transparent; border: 0; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { display: block; width: 26px; height: 2px; background: currentColor; transition: .3s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }
  .site-nav {
    /* justify-self from the desktop grid would shrink the fixed overlay to its content width. */
    position: fixed; inset: 0; z-index: 2; padding: 7rem 2rem 3rem; justify-self: stretch;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .8rem;
    background: var(--green); visibility: hidden; opacity: 0; transform: translateY(-2%); transition: .3s ease;
  }
  .site-nav.open { visibility: visible; opacity: 1; transform: translateY(0); }
  .site-nav a { font: var(--fst-navLink, italic) var(--fw-navLink, 400) var(--fs-navLink, clamp(2.2rem, 8vw, 4rem))/1 var(--ff-navLink, var(--serif)); letter-spacing: 0; text-transform: none; }
  .site-nav a::after { display: none; }

  .hero {
    min-height: calc(100svh - var(--header-height)); height: auto;
    padding: 56px 6vw; align-items: center; justify-content: center;
  }
  /* Below 900 the glyph sits behind the copy rather than beside it, so the
     veil becomes an even wash instead of a side gradient. */
  .hero::after {
    background: linear-gradient(180deg, rgba(246,241,231,.7) 0%, rgba(246,241,231,.6) 48%, rgba(246,241,231,.38) 100%);
  }
  .hero-orbit { display: none; }
  .hero-copy { width: min(100%, 660px); }
  .hero h1 strong { font-size: var(--fs-heroStrong, clamp(4rem, 17vw, 7rem)); }
  .hero h1 em { font-size: var(--fs-heroEm, clamp(3rem, 10.2vw, 5.4rem)); }
  .scroll-cue {
    right: auto; left: 50%; bottom: 1.5rem; width: 220px; justify-content: center; margin-left: -110px;
  }

  .approach-card { grid-template-columns: 1fr; }
  .approach-copy { min-height: 300px; }
  .approach-image { min-height: 320px; }
  .card-orb { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; }
  .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .capability-card { min-height: 0; }
  .capability-card-link { grid-template-columns: minmax(0, 1fr) auto; }
  .capability-title { overflow-wrap: anywhere; }
  .projects-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-heading:has(> p) { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Keep the Model headline and its introduction comfortably separate on mobile. */
  .approach .section-heading:has(> p) { gap: clamp(2.5rem, 8vw, 3.5rem); }
  .project-row { grid-template-columns: 1fr; }
  .project-info { padding: 3.2rem 1rem 2rem; }
  .project-visual { min-height: 300px; }
  .founder .section-label { margin-left: 0; }
  .founder-layout { grid-template-columns: 1fr; min-height: 0; }
  .founder-portrait { order: 2; width: min(520px, 78%); min-height: 0; margin: 2.5rem 0 0; }
  .founder-portrait-desktop { display: none; }
  .founder-copy > .founder-portrait-mobile { display: block; order: 0; margin: 0 0 1.1rem; }
  .founder-portrait > img { width: 100%; max-height: none; }
  .founder-thread { top: -1rem; right: -1rem; height: 76%; }
  .founder-copy { padding: 0; }
  .founder-copy .founder-heading { white-space: normal; }
  .founder-meta { margin-top: 1.2rem; padding-top: 0; }
  .projects-seal img { width: 130px; }
  .experts { padding-top: 5rem; }
  .contact-section { min-height: 680px; }
}

/* Keep the expert directory visually consistent on phones.  The source
   portraits have mixed aspect ratios, so a fixed pixel height caused cards
   to jump in size and cropped the landscape portrait unpredictably. */
@media (max-width: 767px) {
  .hero { padding: 48px 6vw; }
  .hero-copy { width: 100%; max-width: 34rem; }
  .hero h1 { margin-bottom: 1.15rem; text-align: center; }
  .hero h1 strong { margin-bottom: .34rem; font-size: var(--fs-heroStrong, clamp(4rem, 17vw, 5rem)); line-height: .9; }
  .hero h1 em { font-size: var(--fs-heroEm, clamp(3rem, 11vw, 3.7rem)); line-height: 1.02; }
  .eyebrow-line { width: 46px; margin: 1.15rem 0 .95rem; }
  .hero-kicker { margin: 0 0 .7rem; font-size: var(--fs-heroKicker, .74rem); letter-spacing: .1em; }
  .hero-copy > p:not(.hero-kicker) { margin: .55rem 0; font-size: var(--fs-heroBody, 1rem); line-height: 1.42; }
  .hero .button { width: 100%; min-height: 58px; margin-top: 1.4rem; justify-content: space-between; }

  .expert-grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .expert-card { grid-column: auto; display: flex; flex-direction: column; }
  .expert-image {
    height: auto;
    aspect-ratio: 4 / 5;
    margin-bottom: 1.25rem;
    background: #e8e7e1;
  }
  .expert-image img,
  .expert-image.cutout img,
  .expert-image.reference-cutout img,
  .expert-image.photo img {
    object-fit: cover;
    object-position: center;
  }
  .expert-card p { height: calc(1.45em * 4); min-height: 0; }
}

@media (max-width: 620px) {
  :root { --container: calc(100vw - 2rem); }
  .header-mark { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero { padding: 42px 1rem; }
  .hero .button { min-height: 58px; }
  .button { min-height: 54px; padding: 0 1.1rem; gap: 1.25rem; }
  .back-to-top { width: 48px; height: 48px; right: 1rem; bottom: 1rem; }
  .section { padding: 4.5rem 0; }
  .section-label { font-size: var(--fs-sectionLabel, .988rem); }
  .display-title { font-size: var(--fs-displayTitle, clamp(3.45rem, 16.5vw, 5.4rem)); }
  /* Same title-to-intro rhythm as the Model heading. */
  .projects-heading { gap: clamp(2.5rem, 8vw, 3.5rem); }
  .approach-list { gap: 1rem; }
  .approach-card { border-radius: 7px; }
  .approach-copy { min-height: 260px; padding: 2rem 1.4rem; }
  /* "CONNECT" is ~4.7em wide; keep it inside the card copy box (100vw - container gutters - card padding). */
  .approach-copy h3 { font-size: var(--fs-approachTitle, min(5.4rem, calc((100vw - 4.8rem) / 5))); }
  .approach-copy p { font-size: var(--fs-approachBody, 1.25rem); }
  .approach-image { min-height: 230px; }
  .card-orb { top: 52%; width: 56px; }
  .capability-card { padding: 1.6rem 1.2rem 1.8rem; }
  .capability-title { font-size: var(--fs-capabilityTitle, 2rem); }
  .capability-card p { font-size: var(--fs-capabilityBody, .94rem); }
  .marquee-track { gap: 1.7rem; padding: 1.25rem 0; }
  .project-info { padding-left: 0; padding-right: 0; }
  .project-visual { min-height: 220px; }
  .project-visual.cinematic { padding: 0 0 2rem; }
  .project-visual.cinematic img { min-height: 260px; }
  .founder-copy .founder-heading { font-size: var(--fs-founderHeading, clamp(3.2rem, 15vw, 5rem)); }
  .founder .section-label { margin-bottom: 2rem; }
  .founder-copy .founder-subhead { font-size: var(--fs-founderSubhead, 1.36rem); }
  .founder-copy > p { font-size: var(--fs-founderBody, 1.12rem); }
  .founder-portrait { width: 100%; }
  .founder-thread { right: -.5rem; width: 42%; height: 70%; }
  .projects-seal img { width: 112px; }
  .experts { padding-top: 4.5rem; }
  .contact-display { font-size: var(--fs-contactDisplay, clamp(3.4rem, 16vw, 5.5rem)); }
  .contact-cta { padding-inline: 1.35rem; font-size: var(--fs-contactCta, .78rem); letter-spacing: .13em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-copy > *,
  .hero h1 strong,
  .hero h1 em,
  .scroll-cue {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    scale: none !important;
  }
  .hero-canvas { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Very narrow phones: the longest capability word ("Development") needs a smaller title to fit beside the arrow. */
@media (max-width: 340px) { .capability-title { font-size: var(--fs-capabilityTitle, 1.6rem); } }

/* Language switch: a pill in the home header, a small fixed pill on pages without a header. */
.site-nav .lang-switch { padding: .5rem .7rem; border: 1px solid rgba(246,241,231,.4); border-radius: 999px; font-size: .7rem; letter-spacing: .12em; }
.site-nav .lang-switch::after { display: none; }
.site-nav .lang-switch:hover { border-color: var(--orange); }

/* Only revealed by typo-editor.js, and only for a visitor with an active admin session. */
.site-nav-edit { padding: .5rem .8rem; color: var(--cream) !important; background: var(--orange); border-radius: 999px; font-size: .72rem; }
.site-nav-edit::after { display: none; }
.site-nav-edit:hover { background: var(--green); }
@media (max-width: 900px) {
  .site-nav .lang-switch { margin-top: .6rem; padding: .7rem 1rem; font: 700 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
}

/* Archive pages end with a call to action instead of stopping after the last card. */
.archive-cta { margin: clamp(4rem, 7vw, 7rem) 0 clamp(4rem, 6vw, 6rem); padding: clamp(2.4rem, 4vw, 3.6rem) clamp(1.6rem, 4vw, 3.6rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem 3rem; align-items: center; border: 1px solid var(--line); }
.archive-cta h2 { grid-column: 1; margin: 0; color: var(--green); font: var(--fst-capDetailFooterText, normal) var(--fw-capDetailFooterText, 400) var(--fs-capDetailFooterText, clamp(2.4rem, 4.2vw, 5rem))/.95 var(--ff-capDetailFooterText, var(--serif)); letter-spacing: -.04em; }
.archive-cta p { grid-column: 1; margin: 0; max-width: 560px; color: #374556; }
.archive-cta .button { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; gap: 1.6rem; }
@media (max-width: 720px) {
  .archive-cta { grid-template-columns: 1fr; }
  .archive-cta .button { grid-column: 1; grid-row: auto; width: 100%; justify-content: space-between; margin-top: .8rem; }
}

/* Site footer (all pages except 404). */
.site-footer { position: relative; z-index: 3; padding: clamp(3.2rem, 5vw, 4.6rem) 5vw 2rem; color: rgba(245, 240, 232, .78); background: #071c35; border-top: 1px solid rgba(245, 240, 232, .12); font-family: var(--sans); font-size: .9rem; line-height: 1.6; }
.site-footer-inner { width: min(100%, 1680px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem clamp(2rem, 5vw, 5rem); }
.site-footer a { color: var(--cream); text-decoration: none; transition: color .2s ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: #ff7a5c; }
.site-footer-brand img { width: 160px; height: auto; }
.site-footer-brand p { max-width: 320px; margin: 1.1rem 0 0; font: italic 400 1.25rem/1.3 var(--serif); color: rgba(245, 240, 232, .82); }
.site-footer-nav, .site-footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.site-footer-nav a { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-footer-contact p { margin: 0 0 .2rem; color: #ff7a5c; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.site-footer-legal { width: min(100%, 1680px); margin: clamp(2.6rem, 4vw, 3.6rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(245, 240, 232, .12); font-size: .75rem; letter-spacing: .04em; color: rgba(245, 240, 232, .55); }
@media (max-width: 860px) {
  .site-footer-inner { grid-template-columns: 1fr 1fr; }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer-inner { grid-template-columns: 1fr; }
}

/* Contact form (home, inside the contact panel). */
.contact-form-wrap { width: min(100%, 1380px); margin: 0 auto clamp(4rem, 8svh, 6rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2.4rem, 6vw, 7rem); align-items: start; }
.contact-form-head h3 { margin: 0; color: var(--cream); font: var(--fst-contactInviteTitle, normal) var(--fw-contactInviteTitle, 500) var(--fs-contactInviteTitle, clamp(2.6rem, 3.6vw, 4.5rem))/.95 var(--ff-contactInviteTitle, var(--serif)); letter-spacing: -.035em; }
.contact-form-head p { max-width: 360px; margin: 1.4rem 0 0; color: rgba(245, 240, 232, .78); line-height: 1.55; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.contact-form .cf-wide { grid-column: 1 / -1; }
.contact-form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-field { display: flex; flex-direction: column; gap: .55rem; }
.cf-field > span { color: rgba(245, 240, 232, .72); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cf-field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: .6rem 0; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid rgba(245, 240, 232, .38); border-radius: 0; font: 400 1.05rem/1.45 var(--sans); transition: border-color .2s ease; }
.cf-field textarea { min-height: 132px; resize: vertical; }
.cf-field select { appearance: none; cursor: pointer; padding-right: 1.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--cream) 50%), linear-gradient(-45deg, transparent 50%, var(--cream) 50%); background-size: 6px 6px, 6px 6px; background-position: right 8px center, right 2px center; background-repeat: no-repeat; }
.cf-field select option { color: #071c35; }
.cf-field :is(input, select, textarea):focus { outline: none; border-bottom-color: #ff7a5c; }
.cf-field :is(input, select, textarea):focus-visible { outline: 2px solid #ff7a5c; outline-offset: 4px; }
.cf-consent { display: flex; align-items: flex-start; gap: .8rem; color: rgba(245, 240, 232, .82); font-size: .9rem; line-height: 1.5; cursor: pointer; }
.cf-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: #ee4a2b; }
.cf-consent a { color: var(--cream); border-bottom: 1px solid currentColor; }
.cf-consent a:hover { color: #ff7a5c; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cf-actions .button { margin-top: 0; gap: 1.6rem; cursor: pointer; }
.cf-actions .button:disabled { opacity: .6; cursor: progress; transform: none; }
.cf-status { margin: 0; min-height: 1.5em; color: rgba(245, 240, 232, .82); font-size: .95rem; }
.cf-status.is-ok { color: #9fd9b6; }
.cf-status.is-error { color: #ff9a82; }
@media (max-width: 860px) {
  .contact-form-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-form { grid-template-columns: 1fr; }
  .cf-actions .button { width: 100%; justify-content: space-between; }
}

/* Privacy notice (/privacy/). */
.legal-head { margin-top: clamp(48px, 6vw, 96px); }
.legal-updated { margin: 1.4rem 0 0; color: #5b6a66; font-size: .85rem; letter-spacing: .04em; }
.legal-body { max-width: 860px; margin: clamp(3rem, 5vw, 4.5rem) 0 clamp(5rem, 8vw, 8rem); color: #1f3a33; }
.legal-intro { margin: 0 0 2.4rem; font: italic 400 clamp(1.3rem, 1.7vw, 1.6rem)/1.4 var(--serif); color: var(--green); }
.legal-body section { padding: 2rem 0; border-top: 1px solid var(--line); }
.legal-body h2 { display: flex; gap: 1rem; align-items: baseline; margin: 0 0 1rem; color: var(--green); font: 500 clamp(1.5rem, 2vw, 2rem)/1.15 var(--serif); }
.legal-body h2 span { color: var(--orange); font: 700 .72rem/1 var(--sans); letter-spacing: .12em; }
.legal-body p { margin: 0 0 .8rem; line-height: 1.65; }
.legal-body ul { margin: .4rem 0 .8rem; padding-left: 1.2rem; line-height: 1.6; }
.legal-body li { margin: .3rem 0; }
.legal-body a { color: var(--green); border-bottom: 1px solid currentColor; }
.site-footer-legal a { color: rgba(245, 240, 232, .78); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } /* yalnız renkle ayrılmasın (erişilebilirlik) */

/* Pages other than home: the shared fixed header sits on top, so content starts below it. */
body.inner-page > main { padding-top: calc(var(--header-height) + clamp(22px, 3vw, 44px)); }

/* Breadcrumb trail (every page except home). Colours follow the page, light or dark. */
.breadcrumb { margin: 0 0 clamp(1.4rem, 3vw, 2.4rem); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.breadcrumb li + li::before { content: "/"; color: var(--orange); }
.breadcrumb a { color: inherit; opacity: .68; transition: opacity .2s ease, color .2s ease; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { opacity: 1; color: var(--orange); }
.breadcrumb [aria-current] { overflow-wrap: anywhere; }

/* Hero: primary and secondary call to action side by side. */
.hero .hero-actions { --i: 6; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; margin-top: 1.7rem; }
.hero .hero-actions .button { margin-top: 0; }
.button-secondary { color: var(--green); background: transparent; border-color: rgba(7, 60, 46, .45); }
.button-secondary:hover { color: var(--cream); background: var(--green); border-color: var(--green); }
.hero .button-secondary span { font-size: 1rem; }
.hero .button-secondary:hover span { translate: 0 3px; }
@media (max-width: 767px) {
  .hero .hero-actions { flex-direction: column; align-items: stretch; margin-top: 1.4rem; }
  .hero .hero-actions .button { width: 100%; margin-top: 0; }
}

/* Founder "+" button and the experience / consultancy drawer that slides in from the left. */
.founder-more { flex: 0 0 auto; width: 52px; height: 52px; padding: 0; display: inline-grid; place-items: center; color: var(--cream); background: var(--green); border: 0; border-radius: 50%; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.founder-more > span[aria-hidden] { font: 300 2rem/1 var(--sans); translate: 0 -1px; transition: transform .3s ease; }
.founder-more:hover, .founder-more:focus-visible { background: var(--orange); }
.founder-more:hover > span[aria-hidden] { transform: rotate(90deg); }
.founder-more:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.founder-meta { align-items: center; justify-content: flex-start; gap: 1.4rem; }

/* Consultancy page (/consulting/): services and experience timeline, which used to
   open in a drawer on the home page. */
.consulting-page .founder-services { padding-top: clamp(48px, 6vw, 96px); }
.consulting-page .founder-services .section-label { margin-bottom: clamp(18px, 2vw, 28px); }
.consulting-page .career-record { padding: clamp(80px, 8vw, 130px) 0 0; }
@media (max-width: 900px) {
  .founder-more { width: 46px; height: 46px; }
}

/* Single-column approach cards: the orb sits on the seam between copy and image,
   however long the copy runs (a fixed top % landed on the text on narrow phones). */
@media (max-width: 900px) {
  .approach-copy { grid-row: 1; grid-column: 1; }
  .approach-image { grid-row: 2; grid-column: 1; }
  .card-orb { position: relative; z-index: 2; grid-row: 2; grid-column: 1; align-self: start; justify-self: center; top: auto; left: auto; transform: translateY(-50%); }
}
@media (max-width: 620px) {
  .approach-copy { padding-bottom: 3.4rem; }
}

/* Founder: text link with an arrow next to the name; opens the experience / consultancy drawer. */
.founder-more-link { margin-left: auto; padding: 0 0 .35rem; display: inline-flex; align-items: center; gap: .9rem; color: var(--coral); background: none; border: 0; border-bottom: 1px solid currentColor; font: var(--fst-founderMoreLink, normal) var(--fw-founderMoreLink, 700) var(--fs-founderMoreLink, .78rem)/1.2 var(--ff-founderMoreLink, var(--sans)); letter-spacing: .12em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color .25s ease; }
.founder-more-link i { font-style: normal; font-size: 1.15rem; font-weight: 400; line-height: 1; transition: transform .25s ease; }
.founder-more-link:hover, .founder-more-link:focus-visible { color: var(--green); }
.founder-more-link:hover i { transform: translateX(5px); }
.founder-more-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
@media (max-width: 620px) {
  .founder-meta { flex-wrap: wrap; row-gap: 1rem; }
  /* Right end of its line on phones too (a fixed px shift cannot fit every width). */
  .founder-more-link { margin-left: auto; }
}

/* Home page: the contact section already carries brand, links and details; only the legal line stays. */
.site-footer-compact { padding-top: 0; border-top: 0; }
.site-footer-compact .site-footer-legal { margin-top: 0; }
@media (max-width: 620px) {
  .site-footer-compact .site-footer-legal { padding-right: 64px; }
}

/* Experience timeline (consultancy page), tighter. On two-sided layouts each
   entry starts halfway along the previous one, which sits on the other side, so
   the empty space facing every entry disappears. */
.consulting-page .founder-record-head { margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 621px) {
  .consulting-page .career-record-entry { min-height: 0; padding-bottom: 24px; }
  .consulting-page .career-record-entry + .career-record-entry { margin-top: -110px; }
  .consulting-page .career-record-entry article { padding-top: 20px; padding-bottom: 18px; }
}
@media (max-width: 620px) {
  .consulting-page .career-record-entry { padding-bottom: 22px; }
  .consulting-page .career-record-entry article { padding-top: 16px; }
}

/* Form intro without a title above it (home contact form). */
.contact-form-head p:first-child { margin-top: 0; }
/* Form without title/intro: full width, split in two on desktop — the short
   fields stacked on the left; message, consent and send on the right. */
@media (min-width: 861px) {
  .contact-form-wrap > .contact-form:first-child { grid-column: 1 / -1; column-gap: clamp(2.4rem, 5vw, 5rem); }
  .contact-form > .cf-field:not(.cf-wide) { grid-column: 1; }
  /* Both columns end on one line: the message beside name/email/company, consent
     and send beside the last field, whose underline meets the button's bottom. */
  .contact-form > .cf-field.cf-wide { grid-column: 2; grid-row: 1 / span 3; }
  .contact-form > .cf-field.cf-wide textarea { flex: 1; }
  .contact-form > .cf-field:has(select) { grid-row: 4 / span 2; align-self: end; }
  .contact-form > .cf-consent { grid-column: 2; grid-row: 4; }
  .contact-form > .cf-actions { grid-column: 2; grid-row: 5; }
}

/* Experts page title: each sentence on its own line ("One direction." below). */
.display-title [data-typo="expertsTitleLine1"], .display-title [data-typo="expertsTitleLine2"] { display: block; }

/* Experience title (founder drawer): one block per line. */
.founder-record-head h2 .record-title-line { display: block; }

/* Tablets (721–900px): the four contact details in two rows of two, so the
   larger mobile text of the e-mail address never runs into its neighbour. */
@media (min-width: 721px) and (max-width: 900px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-detail:nth-child(3) { border-left: 0; }
  .contact-detail:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.55); }
}

/* Phones narrower than 360px (older / small models): the page shows the 360px
   layout scaled down, so the mobile type sizes (set for 360px and up) still fit. */
@media (max-width: 339px) { html { zoom: .889; } }
@media (min-width: 340px) and (max-width: 359px) { html { zoom: .945; } }

/* Capabilities on phones: tighter spacing. The heading sits right after the
   approach cards (its space comes from the section above) and the cards read
   number, title, text, link without gaps. */
@media (max-width: 900px) {
  .capabilities { padding-top: 0; }
  .capabilities, .projects-seal + .section { scroll-margin-top: 4.5rem; }
  .capabilities .section-heading { margin-bottom: 2.2rem; }
  .capability-card p { margin-top: .85rem; }
  .capability-grid .capability-detail-link { margin-top: 1.25rem; }
}
@media (max-width: 900px) {
  .capabilities .section-heading { margin-bottom: 1.75rem; gap: .9rem; }
  .capabilities .section-heading .section-label { margin-bottom: 1rem; }
  .capabilities .section-heading > p { margin-bottom: 0; }
}

/* ── Contact v2: one screen. Title, bell and channels on the left; a short form
   on the right. The bell is the brand's gesture: it rings when a message is sent. */
.contact-section.cv2 { position: relative; min-height: 100svh; padding: clamp(104px, 13svh, 140px) 5vw clamp(56px, 8svh, 96px); display: flex; align-items: center; overflow: hidden; background: radial-gradient(circle at 26% 38%, rgba(8,76,58,.45), transparent 42%), linear-gradient(110deg, #063d31 0%, #00392c 48%, #05362d 100%); }
.cv2::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .26; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.012) 32px), linear-gradient(180deg, rgba(0,0,0,.12), transparent 28%); }
.cv2-inner { position: relative; z-index: 1; width: min(100%, 1380px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.cv2-kicker { margin: 0 0 1.8rem; color: rgba(245,240,232,.7); font-family: var(--ff-contactInviteBody, var(--sans)); font-size: .8rem; font-weight: 600; letter-spacing: .26em; }
.cv2-title { display: flex; align-items: flex-end; gap: clamp(1rem, 2.6vw, 2.6rem); }
.cv2 .contact-display { flex: 0 1 auto; }
.cv2 .contact-bell { position: relative; inset: auto; flex: 0 0 auto; width: clamp(118px, 11vw, 180px); max-width: none; margin: 0 0 .4rem; padding: 0; justify-self: auto; align-self: auto; transform: none; background: none; border: 0; cursor: pointer; animation: cv2-float 4.6s ease-in-out infinite; }
.cv2 .contact-bell img { transform-origin: 50% 18%; }
.cv2 .contact-bell:focus-visible { outline: 2px solid #ff7a5c; outline-offset: 6px; }
.cv2 .contact-bell.is-ringing img { animation: cv2-ring 1.1s cubic-bezier(.36,.07,.19,.97); }
.cv2 .contact-bell.is-ringing .contact-bell-ring { animation: bell-pulse .9s ease-out 2; }
@keyframes cv2-float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes cv2-ring { 0% { rotate: 0deg; } 12% { rotate: 16deg; } 26% { rotate: -13deg; } 40% { rotate: 9deg; } 54% { rotate: -6deg; } 68% { rotate: 3deg; } 82% { rotate: -1.5deg; } 100% { rotate: 0deg; } }
.cv2-lead { max-width: 31rem; margin: 2.2rem 0 0; color: rgba(245,240,232,.88); font-family: var(--ff-contactFormIntro, var(--sans)); font-size: var(--fs-contactFormIntro, clamp(1.05rem, 1.3vw, 1.3rem)); font-weight: var(--fw-contactFormIntro, 400); font-style: var(--fst-contactFormIntro, normal); line-height: 1.5; }
.cv2-channels { margin: 2.6rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 1.1rem 2.6rem; }
.cv2-channels a { display: inline-flex; align-items: center; gap: .8rem; color: var(--cream); transition: color .2s ease; }
.cv2-channels a:hover { color: #ff9a82; }
.cv2-channels svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cv2-channels span { font-family: var(--ff-contactDetailText, var(--sans)); font-size: var(--fs-contactDetailText, .95rem); font-weight: var(--fw-contactDetailText, 400); letter-spacing: .04em; }
.cv2-channels li:first-child a { margin: -.55rem 0; padding: .55rem 1.1rem .55rem .9rem; border: 1px solid rgba(245,240,232,.55); border-radius: 999px; }
.cv2-channels li:first-child a:hover { color: var(--cream); border-color: #25d366; background: rgba(37,211,102,.12); }

.cv2-form { position: relative; padding: clamp(1.8rem, 3vw, 3rem); display: grid; gap: 1.7rem; background: rgba(4,20,38,.42); border: 1px solid rgba(245,240,232,.12); box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.cv2-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 2rem; }
.cv2 .cf-field textarea { min-height: 112px; }
.cv2-topics { margin: 0; padding: 0; border: 0; min-width: 0; }
.cv2-topics legend { margin: 0 0 .85rem; padding: 0; color: rgba(245,240,232,.72); font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cv2-topics > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.cv2-chip { position: relative; display: block; cursor: pointer; }
.cv2-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cv2-chip > span { height: 100%; padding: .85rem .95rem; display: flex; flex-direction: column; gap: .3rem; border: 1px solid rgba(245,240,232,.3); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.cv2-chip b { color: var(--cream); font: 700 .8rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.cv2-chip small { color: rgba(245,240,232,.66); font: 400 .8rem/1.35 var(--sans); }
.cv2-chip:hover > span { border-color: rgba(245,240,232,.7); }
.cv2-chip input:checked + span { background: var(--cream); border-color: var(--cream); }
.cv2-chip input:checked + span b { color: #063d31; }
.cv2-chip input:checked + span small { color: rgba(6,61,49,.78); }
.cv2-chip input:focus-visible + span { outline: 2px solid #ff7a5c; outline-offset: 3px; }
/* Home Experts title: the two sentences on two lines, as on the /experts/ page. */
#experts .display-title em { display: block; }

/* 10-04: each topic in its model colour — Create navy, Change orange, Connect green;
   the chosen one gets a cream frame and the other two step back. */
.cv2-chip-create > span { background: #13284a; border-color: #13284a; }
.cv2-chip-change > span { background: linear-gradient(115deg, var(--coral), #e5703f); border-color: #d85a37; }
.cv2-chip-connect > span { background: #2f7a55; border-color: #2f7a55; }
.cv2-chip-create small, .cv2-chip-change small, .cv2-chip-connect small { color: rgba(255,255,255,.82); }
.cv2-chip-create:hover > span, .cv2-chip-change:hover > span, .cv2-chip-connect:hover > span { border-color: rgba(245,240,232,.85); }
.cv2-chip.cv2-chip-create input:checked + span, .cv2-chip.cv2-chip-change input:checked + span, .cv2-chip.cv2-chip-connect input:checked + span { border-color: var(--cream); box-shadow: 0 0 0 2px var(--cream); }
.cv2-chip.cv2-chip-create input:checked + span { background: #13284a; }
.cv2-chip.cv2-chip-change input:checked + span { background: linear-gradient(115deg, var(--coral), #e5703f); }
.cv2-chip.cv2-chip-connect input:checked + span { background: #2f7a55; }
.cv2-chip.cv2-chip-create input:checked + span b, .cv2-chip.cv2-chip-change input:checked + span b, .cv2-chip.cv2-chip-connect input:checked + span b { color: #fff; }
.cv2-chip.cv2-chip-create input:checked + span small, .cv2-chip.cv2-chip-change input:checked + span small, .cv2-chip.cv2-chip-connect input:checked + span small { color: rgba(255,255,255,.9); }
.cv2-topics:has(input:checked) .cv2-chip:not(:has(input:checked)) > span { opacity: .5; }
.cv2-topics:has(input:checked) .cv2-chip:not(:has(input:checked)):hover > span { opacity: .85; }
.cv2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.cv2-send { margin-top: 0; gap: 1.6rem; cursor: pointer; }
/* Orange now marks Change, so Send is white. */
.cv2-send.button-primary { color: #063d31; background: #fff; }
.cv2-send.button-primary:hover { color: #063d31; background: var(--cream); }
.cv2-send:disabled { opacity: .6; cursor: progress; transform: none; }
.cv2-note { flex: 1 1 220px; margin: 0; color: rgba(245,240,232,.66); font-size: .82rem; line-height: 1.45; }
.cv2-note a { color: var(--cream); border-bottom: 1px solid currentColor; }
.cv2-note a:hover { color: #ff7a5c; }
.cv2 .cf-status { margin: -.4rem 0 0; min-height: 0; font-size: 1rem; }
.cv2 .cf-status:empty { display: none; }
.cv2 .cf-status.is-ok { color: #b8f0cf; font-family: var(--serif); font-size: 1.35rem; font-style: italic; }

@media (max-width: 1100px) {
  .cv2-channels { grid-template-columns: max-content; }
}
@media (max-width: 860px) {
  .contact-section.cv2 { min-height: 0; padding: 104px 6vw 64px; }
  .cv2-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cv2-intro { text-align: center; }
  .cv2-title { justify-content: center; }
  .cv2-lead { margin-inline: auto; }
  .cv2-channels { grid-template-columns: repeat(2, max-content); justify-content: center; }
}
@media (max-width: 560px) {
  .contact-section.cv2 { padding: 92px 1.25rem 56px; }
  .cv2 .contact-bell { width: 92px; margin-bottom: .2rem; }
  .cv2-lead { margin-top: 1.6rem; font-size: var(--fs-contactFormIntro, 1.02rem); }
  /* The chips below already say Create · Change · Connect. */
  .cv2-kicker { display: none; }
  .cv2-channels { margin-top: 1.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: .7rem; }
  .cv2-channels li { min-width: 0; }
  .cv2-channels a { width: 100%; min-height: 48px; padding: .55rem .6rem; justify-content: center; gap: .5rem; border: 1px solid rgba(245,240,232,.22); }
  .cv2-channels li:first-child a { margin: 0; padding: .55rem .8rem; border-radius: 0; border-color: rgba(245,240,232,.55); }
  .cv2-channels span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: min(var(--fs-contactDetailText, .84rem), .84rem); letter-spacing: .01em; }
  /* WhatsApp and Instagram share the first row; the number and address, which need the width, follow. */
  .cv2-channels li:nth-child(4) { grid-row: 1; grid-column: 2; }
  .cv2-channels li:nth-child(4) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cv2-channels li:nth-child(4) a::after { content: "Instagram"; font: 400 .9rem/1.2 var(--sans); letter-spacing: .02em; }
  .cv2-channels li:nth-child(2), .cv2-channels li:nth-child(3) { grid-column: 1 / -1; }
  .cv2-form { padding: 1.5rem 1.15rem; gap: 1.5rem; }
  .cv2-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .cv2-topics > div { grid-template-columns: 1fr; gap: .55rem; }
  .cv2-chip > span { flex-direction: row; align-items: baseline; gap: .8rem; padding: .8rem .95rem; }
  .cv2-send { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .cv2 .contact-bell, .cv2 .contact-bell img, .cv2 .contact-bell-ring { animation: none !important; }
}

/* Consulting page: the closing box shows the contact channels, in the home page's
   contact design (green ground, cream type, the same channels). */
.archive-cta.archive-cta-channels { position: relative; overflow: hidden; color: var(--cream); border: 0; background: radial-gradient(circle at 26% 38%, rgba(8,76,58,.45), transparent 42%), linear-gradient(110deg, #063d31 0%, #00392c 48%, #05362d 100%); }
.archive-cta.archive-cta-channels::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .26; background: repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.012) 32px), linear-gradient(180deg, rgba(0,0,0,.12), transparent 28%); }
.archive-cta.archive-cta-channels > * { position: relative; }
.archive-cta.archive-cta-channels h2 { color: var(--cream); }
.archive-cta.archive-cta-channels p { color: rgba(245,240,232,.88); }
.archive-cta .archive-channels { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: min(100%, 500px); margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
/* Four equal boxes, each centred, so the icons and text line up (WhatsApp keeps the brighter frame). */
.archive-cta .archive-channels li { min-width: 0; }
.archive-cta .archive-channels a, .archive-cta .archive-channels li:first-child a { width: 100%; min-height: 54px; margin: 0; padding: .6rem .9rem; justify-content: center; border: 1px solid rgba(245,240,232,.24); border-radius: 0; }
.archive-cta .archive-channels li:first-child a { border-color: rgba(245,240,232,.6); }
.archive-cta .archive-channels span { white-space: nowrap; }
@media (max-width: 720px) {
  .archive-cta .archive-channels { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; margin-top: .8rem; }
}

/* 10-07: Model kartları — resmin solunda (dikeyde ortada) alt alta 3 eylem, madde imli (panel › Yaklaşım › Eylemler); arka plansız, beyaz, kalın */
.approach-image { position: relative; }
.approach-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(8,16,26,.55), rgba(8,16,26,.12) 70%); }
.approach-actions { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 1rem clamp(1.4rem, 2.6vw, 2.6rem); list-style: none; display: grid; align-content: center; justify-content: start; justify-items: start; gap: .5rem; pointer-events: none; }
.approach-actions li {
  display: flex; align-items: center; gap: .7em; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35);
  font-family: var(--ff-approachAction, var(--sans)); font-size: var(--fs-approachAction, 1.15rem); font-weight: var(--fw-approachAction, 700); font-style: var(--fst-approachAction, normal);
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.15;
}
.approach-actions li::before { content: ""; width: .42em; height: .42em; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
@media (max-width: 900px) {
  .approach-actions { gap: .4rem; }
  .approach-actions li { font-size: var(--fs-approachAction, .95rem); letter-spacing: .1em; }
}

/* 10-07: Consulting hizmetleri — başlık + açıklama (founder.services[] = { title, text }) */
.founder-service-copy { display: flex; flex-direction: column; gap: .7rem; }
.founder-service-copy p { max-width: 340px; margin: 0; color: #38534b; font-family: var(--ff-founderServicesText, var(--sans)); font-size: var(--fs-founderServicesText, 1rem); font-weight: var(--fw-founderServicesText, 300); font-style: var(--fst-founderServicesText, normal); line-height: 1.4; letter-spacing: 0; }
@media (max-width: 620px) { .founder-service-copy p { font-size: var(--fs-founderServicesText, 1.02rem); } }

/* 10-07: Instagram videoları (ana sayfa, Consulting altı) — sıfırdan. Sürekli kayan, dönen 9:16 kartlar.
   Kartta Instagram oynatıcısı + üstünde kapak ve oynat işareti (tık geçer, tek tıkla oynar); oynayınca kapak kalkar. */
.reels { --reel-h: clamp(440px, 38vw, 600px); --reel-gap: 20px; --reel-gutter: max(16px, calc((100vw - var(--container)) / 2)); padding: clamp(4.5rem, 7vw, 7.5rem) 0 0; background: var(--cream); overflow: hidden; }
.reels-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.2rem, 3.5vw, 3.5rem); }
.reels-head .section-label { margin-bottom: 1.6rem; }
.reels-head .display-title { margin: 0; }
.reels-controls { display: flex; gap: .7rem; padding-bottom: .6rem; }
.reels-button { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; color: var(--green); background: transparent; border: 1px solid rgba(7, 60, 46, .28); border-radius: 50%; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.reels-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reels-button .reels-icon-play { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.reels-button .reels-icon-play, .reels-button[aria-pressed="true"] .reels-icon-pause { display: none; }
.reels-button[aria-pressed="true"] .reels-icon-play { display: block; }
.reels-button:hover, .reels-button:focus-visible { color: var(--orange); border-color: var(--orange); }
.reels-button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.reels-track { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.reels-track::-webkit-scrollbar { display: none; }
.reels-list { width: max-content; margin: 0; padding: 0 var(--reel-gutter) 6px; list-style: none; display: flex; gap: var(--reel-gap); }
.reel { position: relative; flex: none; width: calc(var(--reel-h) * 9 / 16); height: var(--reel-h); overflow: hidden; border-radius: 14px; background: var(--ink); isolation: isolate; }
.reel iframe { position: absolute; top: 0; left: 0; z-index: 1; max-width: none; border: 0; transform-origin: 0 0; background: var(--ink); }
.reel-cover { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .3s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reel-play { position: absolute; top: 50%; left: 50%; z-index: 3; width: 74px; height: 74px; padding-left: 5px; display: grid; place-items: center; color: #fff; background: rgba(11, 31, 56, .35); border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; transition: background .2s ease, border-color .2s ease, transform .25s ease, opacity .3s ease; }
.reel-play svg { width: 28px; height: 28px; fill: currentColor; }
.reel:hover .reel-play { background: var(--orange); border-color: var(--orange); transform: translate(-50%, -50%) scale(1.06); }
.reel:hover .reel-cover { transform: scale(1.03); }
.reel.is-playing .reel-cover, .reel.is-playing .reel-play { opacity: 0; visibility: hidden; }
@media (max-width: 900px) {
  .reels { --reel-h: min(124vw, 540px); --reel-gap: 14px; }
  .reels-controls { padding-bottom: 0; }
  .reels-button { width: 46px; height: 46px; }
  .reel { border-radius: 12px; }
  .reel-play { width: 62px; height: 62px; }
  .reel-play svg { width: 24px; height: 24px; }
}

/* 10-07: Ana sayfa uzman kartları — mobilde fotoğraf daha küçük (yalnız #experts; /experts/ sayfası ve masaüstü aynı) */
@media (max-width: 767px) {
  #experts .expert-image { width: 64%; max-width: 260px; margin: 0 auto 1rem; align-self: center; }
  #experts .expert-grid { gap: 2.75rem; }
  #experts .expert-card h3, #experts .expert-card em { text-align: center; }
}

/* 10-07: Instagram bölümü başlıksız (etiket + başlık panelde boş): oklar sağa yaslı, üst boşluk daha az */
.reels-bare { padding-top: clamp(1.5rem, 3vw, 3rem); }
.reels-bare .reels-head { justify-content: flex-end; margin-bottom: 1.4rem; }

/* 10-07: Site yalnız açık renk — telefonların koyu modu (Samsung Internet, Chrome "siteleri koyulaştır", uygulama içi tarayıcılar) renkleri değiştirmesin. Her sayfada <meta name="color-scheme" content="only light"> da var (site/lib.mjs lightOnly). */
:root { color-scheme: only light; }