:root {
  --navy: #172328;
  --accent: #A8894F;
}

html, body { margin: 0; padding: 0; background: #FFFFFF; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { font-family: 'Geist', system-ui, sans-serif; color: #172328; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: #172328; }
[hidden] { display: none !important; }

/* ---------- Hover and focus states ---------- */
.nav-links a:hover { color: #172328; }
.btn-outline { transition: background .3s; }
.btn-outline:hover { background: #172328 !important; color: #FFFFFF !important; border-color: #172328 !important; }
.btn-navy:hover { background: #24363D !important; }
.btn-gold:hover { background: #FFFFFF !important; }
.btn-white:hover { background: rgba(255,255,255,0.88) !important; }
.btn-outline-dark:hover { border-color: #FFFFFF !important; color: #FFFFFF !important; }
.contact-card a:hover { background: rgba(255,255,255,0.06); }
.link-presentation:hover { color: #FFFFFF !important; }
.modal-close:hover { color: #172328 !important; }
.field input:focus { border-color: var(--accent) !important; }

/* ---------- Nav ---------- */
.site-nav { padding: 28px 0; }
.site-nav > * { flex-shrink: 0; white-space: nowrap; }
.nav-toggle, .mobile-menu { display: none; }
/* Set by site.js whenever the links and button no longer fit on one line. */
.nav-compact .nav-links, .nav-compact .nav-cta { display: none !important; }
.nav-compact .nav-toggle { display: flex; }
.nav-compact .mobile-menu.is-open { display: flex; }

/* ---------- Hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-areas: "h m" "r m";
  column-gap: clamp(40px,6vw,88px);
  row-gap: 0;
  align-items: center;
  padding: clamp(40px,8vw,104px) 0 clamp(56px,8vw,112px);
}
.hero-h { grid-area: h; align-self: end; }
.hero-h h1 { font-size: clamp(40px,4.4vw,70px); }
.hero-rest { grid-area: r; align-self: start; margin-top: 0; }
.hero-mark-wrap { grid-area: m; align-self: center; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-mark { width: min(460px,80vw); margin-left: 0; flex-shrink: 0; will-change: transform; backface-visibility: hidden; }

/* Four quarter-circles drift in and lock together. */
.mark-pieces g { transform-origin: 50px 50px; }
.hero-mark g { transition: transform 7s cubic-bezier(.22,1,.36,1), opacity 3s ease; }
.hero-mark.is-instant g { transition: none; }
.js .hero-mark:not(.is-in) g { opacity: 0; }
.js .hero-mark:not(.is-in) .p-tl { transform: translate(-38px,-38px) rotate(-22deg); }
.js .hero-mark:not(.is-in) .p-tr { transform: translate(38px,-38px) rotate(22deg); }
.js .hero-mark:not(.is-in) .p-br { transform: translate(38px,38px) rotate(-22deg); }
.js .hero-mark:not(.is-in) .p-bl { transform: translate(-38px,38px) rotate(22deg); }

/* ---------- Compare ---------- */
.cmp-tab {
  position: relative; overflow: hidden; flex: 1; min-height: 56px; padding: 0 18px; border: none; border-radius: 999px; cursor: pointer;
  font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 600;
  background: transparent; color: rgba(23,35,40,0.7);
  transition: background .35s ease, color .35s ease;
}
.cmp-tab[aria-selected="true"] { background: #172328; color: #FFFFFF; }
.cmp-prog { position: absolute; left: 22px; right: 22px; bottom: 9px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.18); opacity: 0; }
.cmp-tab.is-auto .cmp-prog { opacity: 1; }
.cmp-prog span { display: block; height: 100%; border-radius: 2px; background: var(--accent); width: 0%; }
.cmp-person { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; transition: all .5s ease; }
.cmp-person span { width: 32%; height: 32%; border-radius: 50%; transition: opacity .5s ease; }
.cmp-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(23,35,40,0.1); }
.cmp-glyph { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; }
.cmp-glyph span { width: 4.5px; height: 4.5px; border-radius: 50%; }

/* ---------- Solutions ---------- */
.sol-card {
  background: #FFFFFF; color: #172328; border: 1px solid rgba(23,35,40,0.14); border-radius: 10px; padding: clamp(28px,3vw,40px);
  min-height: 360px; display: flex; flex-direction: column; cursor: default; transition: transform .5s ease;
}
.sol-card:hover { transform: translateY(-6px); }
.sol-rule { height: 2px; background: var(--accent); width: 24px; transition: width .6s ease; }
.sol-card:hover .sol-rule { width: 100%; }

.addon {
  width: calc((100% - 64px) / 5); box-sizing: border-box; height: clamp(84px,7.4vw,96px); text-wrap: balance; line-height: 1.2;
  font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: clamp(20px,2.4vw,30px) 16px; border-radius: 14px; font-size: clamp(16px,1.5vw,20px); font-weight: 600; letter-spacing: -0.01em; text-align: center;
  background: rgba(255,255,255,0.05); color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.28); box-shadow: none;
  transition: all .35s cubic-bezier(.16,1,.3,1);
}
.addon:hover { border-color: #FFFFFF; }
.addon[aria-pressed="true"] { background: #FFFFFF; color: #172328; border-color: #FFFFFF; box-shadow: 0 18px 40px -18px rgba(0,0,0,0.6); }
.addon-icon { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.addon-icon::before { content: "+"; font-size: 16px; line-height: 1; }
.addon[aria-pressed="false"] .addon-icon { border: 1.5px solid rgba(255,255,255,0.5); }
.addon[aria-pressed="true"] .addon-icon { background: var(--accent); color: #172328; }
.addon[aria-pressed="true"] .addon-icon::before { content: "✓"; font-size: 13px; font-weight: 700; }

/* ---------- Workforce ---------- */
.wf-person {
  height: 100px; box-sizing: border-box; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: space-between;
  column-gap: 16px; row-gap: 6px; padding: 8px 18px; border: 1px solid rgba(23,35,40,0.14); border-radius: 8px; background: #FFFFFF;
  transition: opacity .8s ease var(--d), transform .8s ease var(--d);
}
.wf-glyph { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #172328; display: flex; align-items: center; justify-content: center; }
.wf-glyph.is-dot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #172328; }
.wf-glyph.is-fill { background: #172328; }
.wf-lines path { transform-origin: 0 0; transition: transform 2.4s cubic-bezier(.4,0,.2,1) var(--d), opacity .6s ease var(--d); }
.wf-mark g { transition: transform 3.4s cubic-bezier(.22,1,.36,1) .9s, opacity 1.6s ease .9s; }
.wf-label { transition: opacity 1.2s ease 3.6s; }

.js .wf:not(.is-seen) .wf-person { opacity: 0.001; transform: translateX(-16px); }
.js .wf:not(.is-seen) .wf-lines path { transform: scaleX(0); opacity: 0; }
.js .wf:not(.is-seen) .wf-mark g { opacity: 0.15; }
.js .wf:not(.is-seen) .wf-mark .p-tl { transform: translate(-30px,-30px) rotate(-18deg); }
.js .wf:not(.is-seen) .wf-mark .p-tr { transform: translate(30px,-30px) rotate(18deg); }
.js .wf:not(.is-seen) .wf-mark .p-br { transform: translate(30px,30px) rotate(-18deg); }
.js .wf:not(.is-seen) .wf-mark .p-bl { transform: translate(-30px,30px) rotate(18deg); }
.js .wf:not(.is-seen) .wf-label { opacity: 0; }

/* ---------- Approach ---------- */
.step { padding: 32px 24px 40px 0; border-top: 2px solid rgba(255,255,255,0.16); cursor: default; transition: border-color .4s; }
.step.is-active { border-top-color: var(--accent); }
.step svg g { transition: transform .9s cubic-bezier(.22,1,.36,1); }
.step svg circle { transition: fill .5s ease; }

/* ---------- Simplicity ---------- */
.ones { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }

/* ---------- Save dialog ---------- */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(23,35,40,0.55); display: flex; align-items: flex-start; justify-content: center; padding: 16px; box-sizing: border-box; overflow-y: auto; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: #172328; }
.field input { font-family: inherit; font-size: 16px; font-weight: 400; padding: 14px 16px; border: 1.5px solid rgba(23,35,40,0.16); border-radius: 6px; outline: none; color: #172328; background: #FFFFFF; }
.pill { font-family: inherit; font-size: 14px; font-weight: 500; padding: 12px 4px; min-height: 44px; border-radius: 999px; border: 1.5px solid rgba(23,35,40,0.16); background: #FFFFFF; color: #172328; cursor: pointer; transition: all .2s; }
.pill[aria-pressed="true"] { border-color: #172328; background: #172328; color: #FFFFFF; }

/* ---------- Phone layout ---------- */
@media (max-width: 759.98px) {
  .site-nav { padding: 48px 0 24px; }
  .nav-links, .nav-cta { display: none !important; }
  .nav-toggle { display: flex; }
  .mobile-menu.is-open { display: flex; }

  .hero-grid { grid-template-columns: minmax(0,1fr) 120px; grid-template-areas: "h m" "r r"; column-gap: 16px; padding-top: 56px; }
  .hero-h { align-self: center; }
  .hero-h h1 { font-size: calc((100vw - 180px) / 8); }
  .hero-rest { margin-top: -12px; }
  .hero-mark-wrap { margin: -30px 0; }
  .hero-mark { width: 150px; margin-left: -48px; }

  .addon { width: calc((100% - 16px) / 2); }
  .ones { grid-template-columns: 1fr; }
}