/* cyrillic-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


    @keyframes sc-hl { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
    html, body { margin: 0; padding: 0; background: #fff; -webkit-font-smoothing: antialiased; }
    body, body * { font-family: "HK Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
    body { font-family: "HK Grotesk", "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #4A4A52; font-size: 17px; line-height: 1.6; }
    html { scroll-behavior: smooth; scroll-padding-top: 110px; }
    @keyframes sc-page-in { from { opacity: 0; } to { opacity: 1; } }
    .site { animation: sc-page-in .3s ease both; }
    [data-rail]::-webkit-scrollbar { width: 0; height: 0; }
    input, textarea, select, button { font: inherit; }
    * { box-sizing: border-box; }
    img { display: block; max-width: 100%; }
    a { color: #5C4C9E; text-decoration: none; }
    a:hover { color: #4A3C8C; }
    :focus-visible { outline: 3px solid #6C4FA3 !important; outline-offset: 3px; box-shadow: 0 0 0 3px #fff !important; }
    sup { font-size: .72em; font-weight: 700; line-height: 0; }
    sup a, a.fn-mark { padding: 8px 6px; margin: -8px -4px; }
    a.fn-mark { font-weight: 800; }
    @keyframes sc-reveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
    @keyframes sc-drift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(0,-1.5%,0); } }
    @keyframes sc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes sc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    /* ---------- Header: mobile menu ---------- */
    .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #2E2559; cursor: pointer; }
    .nav-toggle path { transition: transform .25s ease, opacity .2s ease; transform-origin: 12px 12px; }
    header.is-open .nav-toggle .nt-a { transform: translateY(5px) rotate(45deg); }
    header.is-open .nav-toggle .nt-b { opacity: 0; }
    header.is-open .nav-toggle .nt-c { transform: translateY(-5px) rotate(-45deg); }
    @media (max-width: 1000px) {
      header[data-sticky-nav] > div { padding: 10px clamp(16px,4vw,20px) !important; gap: 8px !important; flex-wrap: wrap !important; }
      header[data-sticky-nav]:not(.is-open) > div { flex-wrap: nowrap !important; }
      header[data-sticky-nav] > div > a { gap: 9px !important; margin-right: auto; min-width: 0; }
      header[data-sticky-nav] > div > a > span { min-width: 0; }
      header[data-sticky-nav] > div > a > span > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      header[data-sticky-nav] > div > a img { width: 32px !important; height: 32px !important; }
      header[data-sticky-nav] > div > a > span > span:first-child { font-size: 15px !important; letter-spacing: 0 !important; }
      header[data-sticky-nav] > div > a > span > span:nth-child(2) { display: none !important; }
      .nav-toggle { display: inline-flex; order: 3; }
      header[data-sticky-nav] nav { order: 2; flex: 0 0 auto; flex-wrap: nowrap !important; gap: 0 !important; }
      header[data-sticky-nav] nav > a:not(:last-child) { display: none; }
      header[data-sticky-nav] nav > a:last-child { font-size: 13.5px !important; padding: 10px 14px !important; white-space: nowrap; }
      header.is-open { background: #fff !important; backdrop-filter: none !important; box-shadow: 0 12px 30px rgba(46,37,89,.16) !important; }
      header.is-open nav { order: 4; flex: 1 0 100%; flex-direction: column; align-items: stretch !important; padding: 6px 0 10px !important; }
      header.is-open nav > a:not(:last-child) { display: block; padding: 13px 4px; font-size: 17px !important; color: #2E2559 !important; border-bottom: 1px solid #ECECEF; box-shadow: none !important; }
      header.is-open nav > a[aria-current="page"] { color: #6C4FA3 !important; }
      header.is-open nav > a:last-child { margin-top: 14px; text-align: center; }
      header.is-open .nav-toggle { color: #2E2559 !important; }
      header.is-open [data-lock-name] { color: #6C4FA3 !important; }
    }
    /* ---------- Hero credibility strip ---------- */
    @media (max-width: 720px) {
      .cred-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }
    @media (max-width: 340px) {
      .cred-strip { grid-template-columns: minmax(0, 1fr) !important; }
    }
    @media (max-width: 460px) {
      section#top > div > span:first-child { font-size: 10.5px !important; letter-spacing: 0.055em !important; padding: 7px 14px !important; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }

/* Hover states (formerly style-hover attributes) */
.hv1:hover { background:#4A3C8C !important; color:#fff !important; }
.hv2:hover { background:rgba(255,255,255,.24) !important; color:#fff !important; }
.hv3:hover { transform:translateY(-2px) !important; box-shadow:0 16px 38px rgba(0,0,0,.30) !important; color:#2E2559 !important; }
.hv4:hover { transform:scale(1.03) !important; }
.hv5:hover { transform:translateY(-7px) !important; box-shadow:0 20px 48px rgba(46,37,89,.20) !important; border-color:#C7BCE7 !important; }
.hv6:hover { background:#4A3C8C !important; color:#fff !important; transform:translateY(-2px) !important; }
.hv7:hover { transform:scale(1.04) !important; }
.hv8:hover { transform:translateY(-7px) !important; background:rgba(255,255,255,.16) !important; }
.hv9:hover { background:#4A3C8C !important; transform:translateY(-2px) !important; }
.hv10:hover { color:#4A3C8C !important; }
.hv11:hover { background:rgba(255,255,255,.14) !important; border-color:#fff !important; }
.hv12:hover { transform:translateY(-2px) !important; box-shadow:0 16px 38px rgba(0,0,0,.30) !important; color:#3E3E44 !important; }
.hv13:hover { border-color:#F5C63E !important; background:rgba(245,198,62,.14) !important; color:#fff !important; }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: #2E2559; color: #fff; font-weight: 800; font-size: 15px; padding: 12px 18px; border-radius: 12px; transition: top .2s ease; }
.skip-link:focus, .skip-link:hover { top: 12px; color: #fff; }

/* ---------- Six jobs (tabs) ---------- */
.need-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 10px; }
.need-tab { display: flex; align-items: center; gap: 9px; font-family: inherit; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; text-align: left; line-height: 1.25; padding: 11px 18px; border-radius: 999px; cursor: pointer; background: transparent; color: #DED8F1; border: 2px solid rgba(255,255,255,.28); transition: background .25s ease, color .25s ease, border-color .25s ease; }
.need-tab svg { flex: 0 0 auto; color: #C7BCE7; }
.need-tab .need-n { font-variant-numeric: tabular-nums; margin-right: 4px; }
.need-tab:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.need-tab[aria-selected="true"] { background: #fff; color: #2E2559; border-color: #fff; }
.need-tab[aria-selected="true"] svg { color: #6C4FA3; }
.need-panel[hidden] { display: none !important; }
@media (max-width: 860px) {
  .need-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need-tab { border-radius: 18px; padding: 12px 14px; }
}
@media (max-width: 380px) {
  .need-tabs { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Forms ---------- */
.field-select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C4FA3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; cursor: pointer; }
.field-select:invalid { color: #6B6B75 !important; }
[data-contact-form] button[disabled] { opacity: .7; cursor: progress; }

/* ---------- References ---------- */
details.refs > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
details.refs > summary::-webkit-details-marker { display: none; }
details.refs > summary::after { content: "+"; font-size: 16px; line-height: 1; letter-spacing: 0; }
details.refs[open] > summary::after { content: "–"; }

/* ---------- Scroll reveal (added by JS only; content is visible without it) ---------- */
.rv-pending { opacity: 0; transform: translateY(22px); }
.rv-in { animation: sc-reveal .7s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Citation popover ---------- */
.ref-pop { position: absolute; z-index: 60; width: min(420px, calc(100vw - 32px)); background: #fff; color: #4A4A52; border-radius: 18px 18px 18px 6px; box-shadow: 0 18px 46px rgba(46,37,89,.28); padding: 18px 48px 18px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; text-align: left; letter-spacing: 0; font-weight: 400; }
.ref-pop .ref-pop-title { font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6C4FA3; }
.ref-pop p { margin: 0; }
.ref-pop a { color: #5C4C9E; font-weight: 700; }
.ref-pop .ref-pop-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 999px; border: 0; background: #F1EEF9; color: #4A3C8C; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .rv-pending { opacity: 1; transform: none; }
}

/* Footer sits on #2E2559: keep hovered links light */
footer a:hover { color: #fff !important; }

/* ---------- FAQ ---------- */
.faq-item { background: #fff; border: 1px solid #DED8F1; border-radius: 20px; box-shadow: 0 1px 2px rgba(46,37,89,.06); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 24px; font-weight: 800; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -0.018em; color: #2E2559; border-radius: 20px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: #F1EEF9; color: #4A3C8C; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; line-height: 1; }
.faq-item[open] > summary::after { content: "–"; }
.faq-item > summary:hover { color: #4A3C8C; }
.faq-a { padding: 0 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.faq-a p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #4A4A52; max-width: 68ch; }

/* Elements with the hidden attribute stay hidden even when they carry an inline display */
[hidden] { display: none !important; }

/* ---------- Solution: lines anchored (two photos) ---------- */
.lc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); max-width: 760px; }
.lc-pair figure { margin: 0; }
.lc-pair img { width: 100%; height: auto; border-radius: 16px; display: block; background: #F1EEF9; }
.lc-pair figcaption { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: #4A4A52; }
.lc-pair figcaption strong { color: #2E2559; font-weight: 800; }
@media (max-width: 380px) {
  .lc-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Solution: 05 Sustain eight hours ---------- */
.sustain { margin-top: clamp(8px, 1.5vw, 20px); background: linear-gradient(160deg, #3A2E70 0%, #2E2559 55%, #241C4A 100%); color: #fff; border-radius: 32px 32px 32px 10px; padding: clamp(28px, 4vw, 56px) clamp(26px, 4.5vw, 64px); }
.sustain-kicker { margin: 0; font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; color: #C7BCE7; }
.sustain-statement { margin: clamp(12px, 1.6vw, 18px) 0 0; font-weight: 800; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; letter-spacing: -0.022em; color: #fff; max-width: 52ch; text-wrap: balance; }
.sustain-accent { color: #F5C63E; }
.sustain-cta { display: inline-block; margin-top: clamp(18px, 2.4vw, 28px); font-weight: 700; font-size: 16px; color: #DED8F1; border-bottom: 1px solid rgba(222,216,241,.5); padding-bottom: 2px; }
.sustain-cta:hover { color: #fff !important; border-bottom-color: #fff; }