[data-slot] { position: relative; --slot-surface: var(--slot-light); --slot-pos: 50% 50%; }
[data-slot]:not([data-slot-kind])::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-color: var(--slot-surface);
  background-image: var(--slot-image, none);
  background-position: var(--slot-pos);
  background-size: cover; background-repeat: no-repeat;
}
@media (max-width: 479px) { [data-slot] { --slot-pos: 50% 20%; } }

.hero[data-slot] { --slot-surface: var(--slot-dark); }
.about-image[data-slot] { --slot-surface: var(--slot-mid); }
.hero[data-slot], .about-image[data-slot] { --slot-pos: 0 0; }
.vision-pill[data-slot] { --slot-surface: var(--slot-mid); }

.case-feature[data-slot] { --slot-surface: var(--olive); }
.profile-photo[data-slot] { --slot-surface: var(--slot-light); }


[data-slot-kind="logo"] { display: block; background-repeat: no-repeat; background-position: left center; background-size: contain; background-image: var(--slot-image, none); }
[data-slot-kind="logo"]:not(.has-media):not(.brand-wordmark)::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: var(--logo-glyph, 32px); height: var(--logo-glyph, 32px); border-radius: 50%; background: var(--logo-ink, #fff); opacity: .9; }
[data-slot-kind="logo"]:not(.has-media):not(.brand-wordmark)::after { content: ""; position: absolute; left: calc(var(--logo-glyph, 32px) + 12px); top: 50%; translate: 0 -50%; width: calc(100% - var(--logo-glyph, 32px) - 12px); height: 36%; border-radius: 100px; background: var(--logo-ink, #fff); opacity: .7; }


.brand-wordmark {
  display: flex; align-items: center; color: var(--white); white-space: nowrap;
  font-family: var(--font-secondary); font-weight: var(--fw-bold); letter-spacing: -.01em; line-height: 1;
}
.brand-wordmark.has-media { color: transparent; }



.tt-up { text-transform: uppercase; }
.skip-link {
  position: absolute; z-index: 20; left: var(--sp-l); top: -100px; padding: var(--sp-s) var(--sp-l);
  border-radius: var(--radius-pill); background: var(--white); color: var(--olive); font-weight: var(--fw-semibold);
}
.skip-link:focus-visible { top: var(--sp-l); outline-color: var(--olive); }


.label { display: flex; align-items: center; gap: var(--sp-s); }
.dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--teal); }   
.label-light .dot { background: var(--white); }


.btn {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--sp-l); padding: var(--sp-s) var(--sp-s) var(--sp-s) var(--sp-xl);
  border-radius: var(--radius-pill); flex-shrink: 0;
}
.btn-light { background-color: var(--white); }
.btn-olive { background-color: var(--olive); }
.btn-block { width: 100%; justify-content: space-between; }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.btn-label { position: relative; display: block; overflow: hidden; }
.btn-label > span { display: block; position: relative; z-index: 1; transition: transform var(--dur-hover) var(--ease-out-sine); }
.btn-label > span + span { position: absolute; bottom: -20px; left: 0; }
.btn-arrow {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: var(--sp-s); border-radius: var(--radius-pill);
  background-color: var(--olive); color: var(--white);
}
.btn-arrow-white { background-color: var(--white); }
.btn-arrow svg, .text-link svg { transition: transform var(--dur-hover) var(--ease-out-sine); }
.btn:not(:disabled):hover .btn-label > span, .btn:focus-visible .btn-label > span { transform: translateY(-20px); }
.btn:not(:disabled):hover .btn-arrow svg, .btn:focus-visible .btn-arrow svg { transform: rotate(45deg); }
@media (max-width: 479px) { .btn-arrow { padding: var(--sp-xs); } }


.text-link { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-s); min-width: 128px; }
.text-link-decor { min-width: 0; }
.text-link-decor:hover svg, .text-link-decor:focus-visible svg { transform: rotate(45deg); }


.glass-icon { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); }
.glass-icon { padding: var(--sp-s); background-color: var(--white-12); box-shadow: var(--glass-highlight); }


.site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; width: 100%; margin-top: var(--sp-3xl); }
.nav-pill {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: var(--sp-l); border-radius: var(--radius-pill);
  background-color: var(--header-glass-top);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--glass-highlight); will-change: background;
}

.brand { display: flex; align-items: center; flex: none; gap: 10px; border-radius: var(--radius-pill); }
.brand picture { display: block; flex: none; }
.brand-symbol { display: block; flex: none; width: 40px; height: 40px; }
.brand-mark { position: relative; height: 40px; font-size: 26px; }
.nav-body { display: flex; flex: 1; }
.nav-links { margin-left: auto; display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-xxl); }
.nav-link { display: inline-block; padding: var(--sp-s) var(--sp-xl); color: var(--white); border: 1px #000; border-radius: 20px; white-space: nowrap; }
.nav-link:hover, .nav-link:focus-visible { border: 1px solid var(--white); background-color: var(--white); color: var(--olive); text-decoration: none; }
.nav-link.is-current { border: 1px solid var(--white); background-color: var(--white); color: var(--olive); font-weight: var(--fw-semibold); text-align: center; border-radius: var(--radius-pill); }
.nav-actions { display: flex; align-items: center; justify-content: flex-start; gap: var(--fs-h5); margin-left: auto; position: relative; }
.nav-cta {
  display: flex; align-items: center; justify-content: center; padding: var(--sp-s) var(--sp-xl);
  border: 1px solid var(--white); border-radius: var(--radius-pill); white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-out-sine);
}
.nav-cta .t-p1 { transition: color var(--dur-hover) var(--ease-out-sine); }
.nav-cta:hover, .nav-cta:focus-visible { background-color: var(--white); }
.nav-cta:hover .t-p1, .nav-cta:focus-visible .t-p1 { color: var(--olive); }


@media (min-width: 992px) and (max-width: 1365px) {
  .nav-list { gap: var(--sp-xxs); }
  .nav-link { padding: var(--sp-s) var(--sp-m); }
  .nav-cta { padding: var(--sp-s) var(--sp-l); }
}
@media (min-width: 992px) and (max-width: 1099px) {
  .brand { gap: var(--sp-s); }
  .brand-mark { font-size: 24px; }
  .nav-list { gap: 2px; }
  .nav-link { padding: var(--sp-s) var(--sp-s); }
  .nav-cta { padding: var(--sp-s) var(--sp-m); }
}

.burger { display: none; width: 48px; height: 48px; padding: var(--sp-l) var(--sp-m); border-radius: var(--radius-pill); background-color: var(--white); align-items: center; justify-content: center; }
.burger-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.burger-line { display: block; width: 24px; height: 2px; background-color: var(--olive); border-radius: 2px; transition: transform var(--dur-hover) var(--ease-out-sine), opacity var(--dur-hover) var(--ease-out-sine); }
.burger-line-mid { margin: var(--sp-xs) 0; }
.site-header[data-open] .burger-line-top { transform: translateY(8px) rotate(45deg); }
.site-header[data-open] .burger-line-bot { transform: translateY(-8px) rotate(-45deg); }
.site-header[data-open] .burger-line-mid { opacity: 0; }

@media (max-width: 991px) {
  .nav-pill { padding: var(--sp-m) var(--sp-l); position: static; }
  .nav-cta { display: none; }
  .nav-actions { margin-right: var(--sp-xl); gap: var(--sp-l); }
  .burger { display: flex; }
  .nav-body > .nav-links { display: none; }
  .nav-overlay { position: absolute; top: 100%; left: 0; width: 100%; }
  .nav-overlay .nav-links {
    display: none; margin: var(--sp-xxl) 0 0;
    padding: var(--sp-3xl); background-color: var(--olive); border-radius: var(--radius-card);   
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
  }
  .site-header[data-open] .nav-overlay .nav-links { display: flex; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: var(--sp-xl); }
  .nav-link { font-size: var(--fs-h4); }
  
  .nav-overlay .nav-links .nav-list-cta { display: list-item; }
}
.nav-list-cta { display: none; }
@media (max-width: 479px) {
  .nav-pill { padding: var(--sp-s); }
  
  .brand { gap: var(--sp-s); }
  .brand-mark { height: 32px; font-size: 21px; }
  .burger-icon { gap: 2px; }
  .burger-line-mid { margin: var(--sp-xxs) 0; }
  .nav-actions { margin-right: var(--sp-s); }
}