/* Viewport-aware opening and a shared, restrained motion language. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --accent: #bca6ee; }
main { overflow: clip; }
.header-inner { min-height: 80px; }
.header { transition: box-shadow 350ms ease, background 350ms ease; }
.header.is-scrolled { box-shadow: 0 6px 28px #171d1e08; background: #fcfbfdf7; }
.reading-progress { position: absolute; inset: auto 0 0; height: 2px; background: #9874cf; transform: scaleX(0); transform-origin: left; pointer-events: none; }
[dir=rtl] .reading-progress { transform-origin: right; }
/* A single staggered introduction; scrolling never hides the navigation. */
.motion-ready .header .brand,
.motion-ready .desktop-nav > a,
.motion-ready .header-actions > a,
.motion-ready .header-actions > button {
  animation: nav-arrive 800ms var(--ease-out) var(--nav-delay, 0ms) backwards;
}
.desktop-nav > a:nth-child(1) { --nav-delay: 100ms; }
.desktop-nav > a:nth-child(2) { --nav-delay: 180ms; }
.desktop-nav > a:nth-child(3) { --nav-delay: 260ms; }
.header-actions .language { --nav-delay: 330ms; }
.header-actions .nav-cta { --nav-delay: 410ms; }
.header-actions .menu-toggle { --nav-delay: 240ms; }
.motion-ready .header:after {
  content: ''; position: absolute; inset: auto 0 -1px; height: 1px;
  background: var(--accent); pointer-events: none; transform-origin: left;
  animation: nav-rule 1300ms var(--ease-out) 80ms both;
}
[dir=rtl] .motion-ready .header:after,
.motion-ready[dir=rtl] .header:after { transform-origin: right; }
@keyframes nav-arrive {
  from { opacity: 0; translate: 0 -12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes nav-rule {
  0% { transform: scaleX(0); opacity: 0; }
  35% { opacity: .8; }
  75% { transform: scaleX(1); opacity: .55; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media(max-width:900px) {
  .header-actions .language { --nav-delay: 140ms; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-ready .header:after { display: none; }
}
.hero { grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 5vw, 76px); padding-block: 30px 36px; min-height: 0; }
.hero-copy, [dir=rtl] .hero-copy { padding-block: 12px 0; justify-content: center; min-width: 0; }
.hero h1, [dir=rtl] .hero h1 { margin-top: 22px; font-size: clamp(48px, min(5.8vw, 9.1svh), 83px); line-height: 1.1; letter-spacing: -.063em; animation: none; }
.hero-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-line > span { display: block; }
.hero-intro, [dir=rtl] .hero-intro { margin-top: 22px; max-width: 385px; font-size: 15px; line-height: 1.8; }
.hero-buttons, [dir=rtl] .hero-buttons { margin-top: 24px; gap: 22px; }
.hero-index, [dir=rtl] .hero-index { margin-top: 30px; padding-top: 16px; font-size: 9px; }
.hero-visual { min-height: 0; height: clamp(480px, calc(100svh - 215px), 640px); background: transparent; overflow: visible; margin-inline-start: 20px; }
.hero-visual:after { content: none; }
.hero-photo { position: absolute; inset: 0 0 20px; overflow: hidden; background: #393740; }
.hero-photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #16151d30, transparent 45%, #16151d4d); pointer-events: none; }
.hero-visual .hero-photo img { height: 100%; object-position: 47% 50%; filter: saturate(.45) brightness(.85); animation: none; transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12); transition: scale 1100ms var(--ease-out); }
.hero-visual .photo-coordinate { z-index: 1; top: 23px; left: 23px; color: #fff; }
.hero-visual figcaption { inset-inline: -28px 25px; bottom: 0; min-height: 112px; padding: 24px 27px; background: var(--accent); color: var(--ink); justify-content: space-between; align-items: center; gap: 22px; box-shadow: 0 15px 40px #16151d0d; }
.photo-label { display: block; font-size: 9px; line-height: 1.4; letter-spacing: .12em; font-weight: 700; margin-bottom: 10px; }
.photo-statement { display: block; max-width: 255px; font-size: 22px; line-height: 1.3; letter-spacing: -.035em; }
.caption-symbol { flex: 0 0 37px; display: flex; }
.caption-symbol .brand-symbol { width: 37px; height: 44px; filter: brightness(.22); }
.belief-strip { padding-block: 23px; }
[dir=rtl] .hero h1 { font-size: clamp(45px, min(5.1vw, 7.8svh), 70px); line-height: 1.4; letter-spacing: -.035em; }
[dir=rtl] .photo-label { letter-spacing: 0; font-size: 11px; }
[dir=rtl] .photo-statement { line-height: 1.6; font-size: 21px; }

/* Reversible section entrances. The DOM remains readable without JS. */
.hero-enter { animation: none; }
.will-reveal { --reveal-x: 0px; --reveal-y: 34px; opacity: 0; transform: translate3d(var(--reveal-x), var(--reveal-y), 0); transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.will-reveal[data-reveal=start] { --reveal-x: -55px; --reveal-y: 0px; }
.will-reveal[data-reveal=end] { --reveal-x: 55px; --reveal-y: 0px; }
[dir=rtl] .will-reveal[data-reveal=start] { --reveal-x: 55px; }
[dir=rtl] .will-reveal[data-reveal=end] { --reveal-x: -55px; }
.will-reveal.visible { opacity: 1; transform: translate3d(0, 0, 0); }
.motion-ready .hero-line > span { transform: translateY(112%); opacity: .2; transition: transform 1000ms var(--ease-out), opacity 850ms ease; transition-delay: var(--line-delay); }
.motion-ready .hero-visible .hero-line > span { transform: translateY(0); opacity: 1; }
.motion-ready .hero .hero-enter { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.motion-ready .hero.hero-visible .hero-enter { opacity: 1; transform: none; }
.hero .hero-intro { transition-delay: 230ms; }
.hero .hero-buttons { transition-delay: 320ms; }
.motion-ready .hero-photo { clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--ease-out); }
.motion-ready .hero-visible .hero-photo { clip-path: inset(0 0 0 0); }
.motion-ready .hero-visual figcaption { opacity: 0; transform: translateX(24px); transition: opacity 900ms var(--ease-out) 350ms, transform 1100ms var(--ease-out) 350ms; }
.motion-ready .hero-visible .hero-visual figcaption { opacity: 1; transform: none; }

/* Buttons, text links and rows share the same directional fill. */
.button, .nav-cta { position: relative; isolation: isolate; overflow: hidden; transition: color 350ms ease, border-color 350ms ease, transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.button:before, .nav-cta:before { content: ''; position: absolute; inset: 0; background: var(--accent); z-index: -1; transform: translateY(102%); transition: transform 450ms var(--ease-out); }
.button:hover, .button:focus-visible { color: var(--ink); background: var(--ink); transform: translateY(-3px); box-shadow: 0 8px 18px #171d1e12; }
.button:hover:before, .button:focus-visible:before, .nav-cta:hover:before, .nav-cta:focus-visible:before { transform: translateY(0); }
.button:active { transform: translateY(0); }
.contact .button:before { background: #fcfbfd; }
.nav-cta:hover { background: transparent; }
.text-link { position: relative; border: 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 100% 1px no-repeat; transition: color 250ms ease, background-size 350ms var(--ease-out); }
.text-link:hover { opacity: 1; color: #7555a2; background-size: 30% 1px; }
.purpose .text-link:hover { color: var(--accent); }
.desktop-nav a[aria-current=location]:after { width: 100%; background: #9874cf; }
.brand-logo { transition: opacity 250ms ease, transform 450ms var(--ease-out); }
.brand:hover .brand-logo { opacity: .72; transform: translateY(-2px); }
.service summary { position: relative; isolation: isolate; transition: padding 450ms var(--ease-out); }
.service summary:before { content: ''; position: absolute; inset: 0 -18px; z-index: -1; background: #e4dcef; transform: scaleX(0); transform-origin: left; transition: transform 550ms var(--ease-out); }
[dir=rtl] .service summary:before { transform-origin: right; }
.service summary:hover:before, .service summary:focus-visible:before { transform: scaleX(1); }
.service h3, .service-number { transition: transform 500ms var(--ease-out), color 300ms ease; }
.service summary:hover h3, .service summary:focus-visible h3 { transform: translateX(8px); }
[dir=rtl] .service summary:hover h3, [dir=rtl] .service summary:focus-visible h3 { transform: translateX(-8px); }
.service-number { color: #71657f; }
.service-plus { transition: transform 450ms var(--ease-out); }
.service summary:hover .service-plus { transform: rotate(90deg); }
.service.is-expanded summary:hover .service-plus { transform: rotate(180deg); }
.service .service-plus:after { transition: transform 450ms var(--ease-out); }
.service.is-expanded .service-plus:after { transform: rotate(0); }
.service:has(summary[aria-expanded=false]) .service-plus:after { transform: rotate(90deg); }
.service-panel { display: flow-root; }
.service-detail { padding-top: 12px; }
.service-panel[inert] { pointer-events: none; }
.purpose-statements article > span { transition: transform 450ms var(--ease-out); }
.purpose-statements article:hover > span { transform: translateY(-4px); }
.phone { transition: letter-spacing 450ms var(--ease-out); }
.phone:hover { letter-spacing: -.01em; text-decoration: none; }
.mobile-nav:not([hidden]) { animation: menu-in 350ms var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media(hover:hover) and (pointer:fine) { .hero-visual:hover .hero-photo img { scale: 1.025; } }

@media(min-width:901px) and (max-height:760px) {
  .hero { padding-block: 23px 28px; }
  .hero-visual { height: max(435px, calc(100svh - 192px)); }
  .hero-copy { padding-top: 0; }
  .hero h1 { margin-top: 17px; font-size: clamp(46px, 8.5svh, 65px); }
  .hero-intro, [dir=rtl] .hero-intro { margin-top: 18px; font-size: 14px; line-height: 1.7; }
  .hero-buttons, [dir=rtl] .hero-buttons { margin-top: 20px; }
  .hero-index, [dir=rtl] .hero-index { margin-top: 23px; padding-top: 13px; }
  [dir=rtl] .hero h1 { font-size: clamp(43px, 7.5svh, 57px); }
}
@media(max-width:1150px) { .hero { gap: 35px; }.hero-buttons { flex-wrap: wrap; gap: 16px; }.hero-visual figcaption { inset-inline: -16px 16px; padding: 22px; }.photo-statement { font-size: 20px; } }
@media(min-width:651px) and (max-width:900px) {
  .hero { gap: 24px; padding-block: 30px; grid-template-columns: 1.15fr 1fr; }
  .hero-visual { height: 500px; margin-inline-start: 10px; }
  .hero h1 { font-size: clamp(41px, 6vw, 53px); }
  .hero .eyebrow { font-size: 9px; }
  .hero-intro { font-size: 14px; }
  .hero-index { margin-top: 25px; }
  .hero-visual figcaption { inset-inline: -12px 12px; padding: 20px; gap: 12px; }
  .photo-statement { font-size: 19px; }
  .photo-label { font-size: 8px; }
  .caption-symbol { flex-basis: 27px; }
  .caption-symbol .brand-symbol { width: 27px; }
  [dir=rtl] .hero h1 { font-size: 46px; }
  [dir=rtl] .hero-intro { font-size: 14px; }
  [dir=rtl] .photo-statement { font-size: 18px; }
}
@media(max-width:650px) {
  .header-inner { min-height: 72px; }
  .hero { gap: 32px; padding-block: 28px 28px; }
  .hero-copy, [dir=rtl] .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(39px, 10.8vw, 63px); margin-top: 20px; }
  .hero-intro, [dir=rtl] .hero-intro { font-size: 15px; margin-top: 18px; max-width: 380px; }
  .hero-buttons, [dir=rtl] .hero-buttons { margin-top: 22px; gap: 18px; }
  .hero-visual { height: 330px; min-height: 0; width: calc(100% - 10px); margin-inline-start: 10px; }
  .hero-photo { inset: 0 0 18px; }
  .hero-visual figcaption { inset-inline: -10px 15px; min-height: 92px; padding: 19px 21px; }
  .photo-statement { font-size: 20px; max-width: 220px; }
  .photo-label { font-size: 8px; margin-bottom: 7px; }
  .caption-symbol { flex-basis: 29px; }
  .caption-symbol .brand-symbol { width: 29px; height: 36px; }
  .belief-strip { padding-block: 20px; }
  .will-reveal[data-reveal=start] { --reveal-x: -26px; }
  .will-reveal[data-reveal=end] { --reveal-x: 26px; }
  [dir=rtl] .will-reveal[data-reveal=start] { --reveal-x: 26px; }
  [dir=rtl] .will-reveal[data-reveal=end] { --reveal-x: -26px; }
  .service summary:before { inset-inline: -9px; }
  [dir=rtl] .hero h1 { font-size: clamp(42px, 11vw, 60px); line-height: 1.38; }
  [dir=rtl] .photo-statement { font-size: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .will-reveal, .motion-ready .hero .hero-enter, .motion-ready .hero-line > span, .motion-ready .hero-visual figcaption { opacity: 1; transform: none; }
  .motion-ready .hero-photo { clip-path: none; }
  .hero-visual .hero-photo img { transform: none; scale: 1; }
  .button:hover, .brand:hover .brand-logo, .service summary:hover h3 { transform: none; }
}

/* Hero choreography: explicit keyframes also run on the very first paint. */
.hero { --hero-from: -30px; --hero-skew: 2deg; }
[dir=rtl] .hero { --hero-from: 30px; --hero-skew: -2deg; }
.hero-copy { transform: translate3d(0, var(--copy-drift, 0px), 0); }
.motion-ready .hero-line > span { transition: none; }
.motion-ready .hero-visible .hero-line > span {
  animation: hero-title-arrive 1150ms var(--ease-out) var(--line-delay) both;
}
.motion-ready .hero.hero-visible .hero-copy > .eyebrow {
  animation: hero-copy-arrive 850ms var(--ease-out) 40ms both;
}
.motion-ready .hero.hero-visible .hero-intro {
  animation: hero-copy-arrive 1000ms var(--ease-out) 520ms both;
}
.motion-ready .hero .hero-buttons { transition: none; transform: none; }
.motion-ready .hero.hero-visible .hero-buttons { opacity: 1; }
.motion-ready .hero-visible .hero-buttons > a:first-child {
  animation: hero-action-arrive 900ms var(--ease-out) 680ms both;
}
.motion-ready .hero-visible .hero-buttons > a:last-child {
  animation: hero-action-arrive 900ms var(--ease-out) 790ms both;
}
.hero-line em { position: relative; display: inline-block; }
.hero-line:last-child { padding-bottom: .18em; margin-bottom: -.18em; }
.hero-line em:after {
  content: ''; position: absolute; inset-inline: 0 3%; bottom: .005em; height: 2px;
  background: #bca6ee; transform-origin: left; transform: scaleX(0);
}
[dir=rtl] .hero-line em:after { transform-origin: right; }
.motion-ready .hero-visible .hero-line em:after {
  animation: hero-rule-draw 1100ms var(--ease-out) 900ms both;
}
.hero-index { position: relative; border-top-color: transparent; }
.hero-index:before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: var(--line); transform-origin: left;
}
[dir=rtl] .hero-index:before { transform-origin: right; }
.motion-ready .hero-visible .hero-index:before { animation: hero-rule-draw 1300ms var(--ease-out) 650ms both; }
.motion-ready .hero-visible .hero-index > span { animation: hero-copy-arrive 900ms var(--ease-out) 850ms both; }
@keyframes hero-title-arrive {
  from { opacity: 0; transform: translate3d(var(--hero-from), 112%, 0) skewY(var(--hero-skew)); }
  to { opacity: 1; transform: translate3d(0, 0, 0) skewY(0); }
}
@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translate3d(var(--hero-from), 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-action-arrive {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hero-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media(max-width:650px) {
  .hero { --hero-from: -16px; --hero-skew: 1deg; }
  [dir=rtl] .hero { --hero-from: 16px; --hero-skew: -1deg; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-copy { transform: none; }
  .hero-line em:after { transform: scaleX(1); }
}

/* Original white-edged cutout with layered frames. */
.written-quote { position: relative; }
.quote-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quote-word { display: inline-block; }
.typewriter-ready .quote-word { clip-path: inset(0 var(--unwritten, 100%) 0 0); }
[dir=rtl] .typewriter-ready .quote-word { clip-path: inset(0 0 0 var(--unwritten, 100%)); }
.quote-caret { display: none; position: absolute; inset: 0 auto auto 0; width: 2px; height: .82em; background: var(--accent); pointer-events: none; }
.has-cursor .quote-caret { display: block; }
.has-cursor:not(.is-typing) .quote-caret { animation: quote-cursor-blink 850ms steps(1, end) 2; }
@keyframes quote-cursor-blink { 0%, 49% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@media(prefers-reduced-motion:reduce) {
  .typewriter-ready .quote-word { clip-path: none !important; }
  .quote-caret { display: none !important; }
}
.founder {
  --portrait-open: 1;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  align-items: center; gap: clamp(50px, 7vw, 110px);
  padding-top: 70px; margin-top: 76px;
}
.leader-portrait { min-width: 0; }
.portrait-stage { position: relative; perspective: 1100px; aspect-ratio: 4 / 5; isolation: isolate; }
.portrait-frames { position: absolute; inset: 0; perspective: 1100px; transform-style: preserve-3d; }
.portrait-frame {
  position: absolute; inset: 20% 12% 1%; border: 2px solid var(--accent);
  backface-visibility: hidden; transform-origin: 50% 100%;
}
.frame-back {
  inset: 20% 12% 1% 16%; opacity: .65;
  transform: translateX(calc(-30px * var(--portrait-open)))
    rotateY(calc(-78deg + 53deg * var(--portrait-open)))
    rotateZ(calc(-8deg * var(--portrait-open)));
}
.frame-middle {
  inset: 28% 15% 0 8%; border-color: #fcfbfda6;
  transform: translateX(calc(30px * var(--portrait-open)))
    rotateY(calc(78deg - 53deg * var(--portrait-open)))
    rotateZ(calc(6deg * var(--portrait-open)));
}
.frame-front {
  inset: 32% 6% 0; border-width: 1px; opacity: .8;
  transform: rotateX(calc(72deg * (1 - var(--portrait-open))));
}
.portrait-person {
  position: absolute; inset: 0 4%; display: flex; align-items: flex-end;
}
.portrait-person img {
  width: 100%; height: auto; max-height: 100%; object-fit: contain;
  filter: drop-shadow(2px 0 0 #fcfbfd) drop-shadow(-2px 0 0 #fcfbfd)
    drop-shadow(0 2px 0 #fcfbfd) drop-shadow(0 -2px 0 #fcfbfd);
}
.portrait-note { display: block; margin-top: 30px; color: #bab8c2; font-size: 9px; letter-spacing: .12em; }
.founder .founder-quote { margin: 0; }
.founder-quote > .eyebrow { color: var(--accent); margin-bottom: 27px; }
.founder blockquote { font-size: clamp(26px, 2.7vw, 39px); line-height: 1.5; text-wrap: pretty; }
.founder figcaption { margin-top: 30px; }
.founder figcaption strong { font-size: 19px; }
.founder figcaption div > span { font-size: 13px; }
[dir=rtl] .portrait-note { letter-spacing: 0; font-size: 11px; }
[dir=rtl] .founder blockquote { line-height: 1.65; letter-spacing: 0; }
@media(max-width:900px) {
  .founder { grid-template-columns: minmax(190px, .85fr) 1.15fr; gap: 40px; }
  .founder blockquote { font-size: 26px; }
}
@media(max-width:650px) {
  .founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 44px; padding-top: 44px; }
  .leader-portrait { width: min(86%, 310px); margin-inline: auto; }
  .portrait-note { margin-top: 25px; font-size: 8px; }
  .founder-quote > .eyebrow { margin-bottom: 20px; }
  .founder blockquote { font-size: 25px; }
  .founder figcaption { margin-top: 24px; }
  .frame-back { transform: translateX(calc(-22px * var(--portrait-open))) rotateY(calc(-78deg + 53deg * var(--portrait-open))) rotateZ(calc(-8deg * var(--portrait-open))); }
  .frame-middle { transform: translateX(calc(22px * var(--portrait-open))) rotateY(calc(78deg - 53deg * var(--portrait-open))) rotateZ(calc(6deg * var(--portrait-open))); }
}
@media(prefers-reduced-motion:reduce) {
  .founder, .portrait-frames { --portrait-open: 1 !important; }
  .founder .portrait-person { transform: none; }
}

.footer-socials { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 4px 24px; }
.footer-socials > .eyebrow { color: var(--muted); font-size: 10px; }
.footer-socials nav { display: flex; gap: 30px; }
.footer-socials a { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; font-size: 13px; transition: color 200ms ease; }
.footer-socials a svg { transition: transform 300ms var(--ease-out); }
.footer-socials a:hover { color: #7651a7; }
.footer-socials a:hover svg { transform: translate(2px, -2px); }
@media(max-width:650px) {
  .footer-socials { display: block; padding-bottom: 20px; }
  .footer-socials nav { justify-content: space-between; gap: 12px; margin-top: 8px; }
  .footer-socials a { font-size: 12px; gap: 6px; }
}