/* ==========================================================
   WorkAid site styles, v3
   Structure, surfaces and motion modelled on remote.com
   (see docs/taste/remote.md). Colours are WorkAid's own.
   ========================================================== */

:root {
  /* Brand */
  --navy: #17324D;
  --navy-deep: #10263B;
  --blue: #2F6B8A;
  --teal: #2E7D78;
  --teal-hover: #276E69;
  --teal-soft: #DDEFEC;
  --teal-glow: #7FC9C1;
  --charcoal: #26313A;
  --muted: #63717C;
  --border: #D9E1E6;
  --white: #FFFFFF;

  /* Grounds (Remote uses a light grey page with white cards) */
  --page: #F2F5F7;
  --page-deep: #E8EEF2;
  --card: #FFFFFF;

  /* Semantic */
  --amber: #B7791F;
  --amber-soft: #FBF3E4;
  --red: #B23B3B;
  --red-soft: #F9E8E8;

  --on-dark: #DCE6EE;
  --on-dark-muted: #9FB3C4;
  --on-dark-line: rgba(255,255,255,.14);

  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 40px;
  --container: 1232px;
  --gutter: 16px;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 16px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: 46px; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: 38px; }
h3 { font-size: 22px; margin-bottom: 8px; }
h4 { font-size: 18px; margin-bottom: 6px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.section-head--center .lede { margin: 0 auto; }
.muted { color: var(--muted); }
.small { font-size: 15px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--teal); color: var(--white); box-shadow: 0 6px 18px rgba(46,125,120,.22); }
.btn--primary:hover { background: var(--teal-hover); color: var(--white); box-shadow: 0 10px 24px rgba(46,125,120,.28); }
.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--border); }
.btn--secondary:hover { border-color: var(--navy); }
.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--navy-deep); color: var(--white); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,245,247,.85);
  backdrop-filter: blur(12px);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.logo img { height: 32px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: var(--charcoal); font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--navy); text-decoration: none; }
.header__cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer; color: var(--navy);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero panel ---------- */
.hero { padding: 8px 0 0; }
.hero__panel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #E9F1F4 55%, #D9E9EC 100%);
  min-height: 480px;
  display: grid;
  grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  align-items: center;
  padding: 56px 56px;
  gap: 32px;
  isolation: isolate;
}
.hero__panel::before, .hero__panel::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .7;
}
.hero__panel::before { width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(127,201,193,.55), rgba(127,201,193,0) 70%); animation: drift 14s ease-in-out infinite alternate; }
.hero__panel::after { width: 420px; height: 420px; left: 30%; bottom: -220px; background: radial-gradient(circle, rgba(47,107,138,.28), rgba(47,107,138,0) 70%); animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(0,0) } to { transform: translate(-40px, 30px) } }

.hero__copy { position: relative; z-index: 1; }
.hero h1 { margin-bottom: 18px; }
.hero__sub { font-size: 18px; line-height: 1.55; color: var(--charcoal); max-width: 480px; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero__note { font-size: 14px; color: var(--muted); }
.hero__note strong { color: var(--charcoal); font-weight: 600; }

/* Globe: Asia-Pacific orthographic map, generated by tools/build_globe.py */
.globe { position: relative; width: 100%; aspect-ratio: 56 / 47; }
.globe__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe__grid { fill: none; stroke: var(--navy); stroke-opacity: .10; stroke-width: 1; }
.globe__edge { fill: none; stroke: var(--navy); stroke-opacity: .16; stroke-width: 1.2; }
.globe__context { fill: var(--navy); fill-opacity: .14; }

.globe__ph { fill: var(--teal); }
.globe__au { fill: var(--navy); }

.globe__route { fill: none; stroke: var(--teal); stroke-width: 2; stroke-opacity: .45; stroke-linecap: round; }
.globe__route--flow { stroke-width: 3.2; stroke-opacity: 1; stroke-dasharray: 1 14; animation: flow 3.4s linear infinite; }
/* white casing keeps the dashes readable where the route crosses navy Australia */
.globe__route--halo { stroke: var(--white); stroke-width: 6.5; stroke-opacity: .5; stroke-dasharray: 1 14; animation: flow 3.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -45; } }

.globe__dot { fill: var(--white); stroke-width: 3; }
.globe__pin--ph .globe__dot { stroke: var(--teal); }
.globe__pin--au .globe__dot { stroke: var(--navy); }
.globe__pulse { fill: none; stroke-width: 1.5; animation: ping 3s ease-out infinite; }
.globe__pin--ph .globe__pulse { stroke: var(--teal); }
.globe__pin--au .globe__pulse { stroke: var(--white); animation-delay: 1.5s; }
@keyframes ping { 0% { r: 5; opacity: .7 } 70%, 100% { r: 21; opacity: 0 } }

.globe__label { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; }
.globe__label--ph { fill: var(--teal); paint-order: stroke; stroke: #F1F6F8; stroke-width: 3.5; stroke-linejoin: round; }
.globe__label--au { fill: var(--white); fill-opacity: .9; }

.globe__core {
  position: absolute; left: 51.9%; top: 48.9%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(23,50,77,.20), 0 0 0 9px rgba(46,125,120,.10);
}
.globe__core img { width: 33px; height: auto; }

.chip {
  position: absolute;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23,50,77,.10), 0 1px 2px rgba(23,50,77,.06);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--charcoal);
  animation: float 7s ease-in-out infinite;
  will-change: transform;
}
.chip strong { display: block; font-weight: 600; color: var(--navy); font-size: 13px; line-height: 1.2; }
.chip span { display: block; color: var(--muted); font-size: 12px; }
.chip img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chip--1 { left: 0; top: 7%; animation-delay: 0s; }
.chip--2 { right: 0; top: 3%; animation-delay: -2.2s; }
/* Sits beside the Philippines, whose right edge is always 51% of the globe width.
   The cap keeps this chip out of that 51%: it wraps rather than reaching across. */
.chip--3 { right: 0; top: 26%; max-width: 46%; animation-delay: -4s; }
.chip--3 > div { min-width: 0; }   /* flex items default to min-width:auto and refuse to wrap */
.chip--4 { left: 3%; top: 43%; animation-delay: -1.2s; }
.chip--5 { left: 0; top: 77%; animation-delay: -5.4s; }
.chip--6 { right: 0; top: 46%; animation-delay: -3.1s; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
/* Leading element of an icon chip. Sized to match .chip img so an icon chip and
   an avatar chip line up in the hero. Every selector here carries .chip on
   purpose: the icon is a <span>, so the .chip span rule above outranks a bare
   .chip__icon and would paint it muted grey and, worse, override the flex
   centring with display:block, dropping the glyph into the top left corner. */
.chip .chip__icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chip .chip__icon svg { width: 18px; height: 18px; }
.chip .chip__icon--amber { background: var(--amber-soft); color: var(--amber); }
.chip .chip__icon--blue { background: #E6EEF3; color: var(--blue); }

/* ---------- Marquee band ---------- */
.marquee-band { padding: 40px 0 8px; text-align: center; }
.marquee-band__label {
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.marquee { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: #8A98A3; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px;
}
.marquee__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C3CDD4; }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ---------- Cards (generic) ---------- */
.card {
  background: var(--card);
  border-radius: var(--r-md);
  padding: 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23,50,77,.10); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.icon-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.icon-circle svg { width: 20px; height: 20px; }
.card p { color: var(--muted); font-size: 16px; }

/* ---------- Accordion + product card ("How we do it") ---------- */
.howto { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 48px; align-items: start; }
.acc { display: grid; gap: 4px; }
.acc__item { border-bottom: 1px solid var(--border); border-radius: var(--r-md); transition: background-color .3s var(--ease), color .3s var(--ease), padding .3s var(--ease); }
.acc__head {
  width: 100%; display: flex; align-items: center; gap: 14px;
  background: none; border: 0; padding: 18px 8px; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 17px; font-weight: 500; color: var(--navy);
}
.acc__head svg.acc__ico { width: 22px; height: 22px; color: var(--teal); flex-shrink: 0; }
.acc__head svg.acc__chev { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .3s var(--ease); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__body > div { overflow: hidden; }
.acc__body p { padding: 0 8px 4px 44px; font-size: 15px; line-height: 1.55; color: var(--on-dark); margin: 0; }
.acc__body p + p { padding-top: 8px; color: var(--on-dark-muted); }
.acc__more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; margin: 14px 0 20px 44px;
  background: rgba(255,255,255,.14); color: var(--white);
}
.acc__more svg { width: 14px; height: 14px; }
.acc__item.is-open { background: var(--navy); border-color: transparent; padding: 4px 8px; }
.acc__item.is-open .acc__head { color: var(--white); }
.acc__item.is-open .acc__head svg.acc__ico { color: var(--teal-glow); }
.acc__item.is-open .acc__head svg.acc__chev { transform: rotate(180deg); color: var(--on-dark-muted); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }

.stage {
  position: relative; border-radius: var(--r-lg);
  background-color: var(--page-deep);
  background-image: linear-gradient(rgba(23,50,77,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(23,50,77,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 460px; padding: 40px;
  display: flex; align-items: center; justify-content: center;
}
.person-card {
  width: 100%; max-width: 420px;
  background: var(--white); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(23,50,77,.12);
  overflow: hidden;
  display: none;
}
.person-card.is-active { display: block; animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.person-card__top { display: flex; gap: 16px; padding: 20px; border-bottom: 1px solid var(--border); }
.person-card__top img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.person-card__tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); background: var(--teal-soft); padding: 3px 8px; border-radius: 4px; margin-bottom: 6px; }
.person-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--navy); line-height: 1.1; }
.person-card__role { font-size: 13px; color: var(--muted); margin-top: 4px; }
.person-card__meta { font-size: 12px; color: var(--muted); margin-top: 8px; }
.person-card__body { padding: 16px 20px 20px; }
.person-card__title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 8px; }
.person-card__title span { font-size: 12px; color: var(--muted); font-weight: 500; }
.todo { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border); margin-bottom: 6px; background: var(--white); }
.todo .pill { margin-left: auto; }
.todo__ico { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.person-card__foot { padding: 12px 20px; background: var(--page); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; }
.person-card__foot strong { color: var(--charcoal); font-weight: 600; }

/* ---------- Split section (collage + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--rev > :first-child { order: 2; }
.split__text .lede { margin-bottom: 20px; }
.split__text p strong { color: var(--navy); font-weight: 600; }
.collage { position: relative; min-height: 460px; }
.collage__card {
  position: absolute; background: var(--white); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(23,50,77,.10);
  overflow: hidden;
}
.collage__card--main { left: 0; top: 30px; width: 66%; }
.collage__card--side { right: 0; top: 0; width: 32%; padding: 12px; }
.collage__card--bottom { right: 4%; bottom: 0; width: 58%; }
.collage__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--navy); }
.collage__head span { font-size: 11px; color: var(--muted); font-weight: 500; }
.avatars { display: grid; gap: 10px; }
.avatars img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.layer { display: flex; align-items: center; gap: 12px; padding: 14px; }
.layer + .layer { border-top: 1px solid var(--page-deep); }
.layer__ico { width: 36px; height: 36px; border-radius: 10px; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.layer__ico svg { width: 18px; height: 18px; }
.layer strong { display: block; font-size: 14px; color: var(--navy); }
.layer span { font-size: 12px; color: var(--muted); }
.layer .pill { margin-left: auto; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--page-deep); font-size: 13px; }
.team-row:last-child { border-bottom: 0; }
.team-row img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.team-row strong { display: block; font-weight: 600; color: var(--navy); font-size: 13px; line-height: 1.2; }
.team-row span { color: var(--muted); font-size: 12px; }
.team-row .pill { margin-left: auto; }
.photo-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(23,50,77,.14); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* ---------- Gradient CTA panel ---------- */
.panel-cta {
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #FFFFFF 0%, #E6F1F0 50%, #D5E6EA 100%);
  padding: 64px 40px;
  text-align: center;
  position: relative; overflow: hidden;
}
.panel-cta h2 { max-width: 760px; margin: 0 auto 12px; }
.panel-cta p { max-width: 620px; margin: 0 auto 28px; color: var(--muted); }
.panel-cta--dark { background: radial-gradient(120% 140% at 80% 0%, #2A5A7A 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.panel-cta--dark h2 { color: var(--white); }
.panel-cta--dark p { color: var(--on-dark-muted); }

/* ---------- Client portal section ---------- */
.dash-wrap {
  border-radius: var(--r-lg);
  background-color: var(--page-deep);
  background-image: linear-gradient(rgba(23,50,77,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(23,50,77,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: 40px;
}
.dash {
  background: var(--white); border-radius: 14px; overflow: hidden;
  font-size: 13px; color: var(--charcoal);
  box-shadow: 0 20px 60px rgba(23,50,77,.12);
}
.dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--page); }
.dash__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: var(--navy); }
.dash__brand img { height: 18px; width: auto; }
.dash__brand span { color: var(--muted); font-weight: 500; }
.dash__tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.dash__tab { padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; font-family: var(--font-body); transition: background-color .2s, color .2s; }
.dash__tab:hover { color: var(--navy); }
.dash__tab.is-active { background: var(--teal); color: var(--white); }
.dash__meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dash__body { padding: 16px; }
.dash__pane { display: none; animation: fadeIn .35s var(--ease); }
.dash__pane.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.stat { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--white); }
.stat__label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 8px; }
.stat__value { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.stat--ok .stat__sub { color: var(--teal); }
.stat--warn .stat__sub { color: var(--amber); }
.dash__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.dash__grid + .dash__grid { margin-top: 10px; }
.dash__grid--stack { grid-template-columns: 1fr; }
.dash__grid--even { grid-template-columns: 1fr 1fr; }
.trend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; padding: 12px 14px; }
.trend .bar-row small:first-child { min-width: 28px; text-align: left; }
.panel { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); }
.panel__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--navy); }
.panel__head span { font-weight: 500; color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--page); white-space: nowrap; }
.table td { padding: 9px 12px; border-bottom: 1px solid var(--page-deep); vertical-align: middle; }
.table td:first-child { white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .who { display: flex; align-items: center; gap: 8px; }
.table .who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--teal-soft); color: var(--teal); }
.pill--warn { background: var(--amber-soft); color: var(--amber); }
.pill--due { background: var(--red-soft); color: var(--red); }
.pill--neutral { background: var(--page-deep); color: var(--muted); }
.pill--info { background: #E6EEF3; color: var(--blue); }
.bar { height: 6px; background: var(--page-deep); border-radius: 3px; overflow: hidden; min-width: 56px; }
.bar > i { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .8s var(--ease); }
.bar--ok > i { background: var(--teal); }
.bar--warn > i { background: var(--amber); }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .bar { flex: 1; }
.bar-row small { color: var(--muted); font-size: 12px; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--page-deep); font-size: 13px; }
.list li:last-child { border-bottom: 0; }
.list li .sub { color: var(--muted); font-size: 12px; display: block; }
.timeline { padding: 6px 14px; }
.timeline li { position: relative; padding: 8px 0 10px 22px; font-size: 13px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.timeline li::after { content: ""; position: absolute; left: 7.5px; top: 24px; bottom: -6px; width: 1px; background: var(--border); }
.timeline li:last-child::after { display: none; }
.timeline li.is-pending::before { background: var(--amber); }
.timeline small { display: block; color: var(--muted); font-size: 12px; }
.checkrow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--page-deep); font-size: 13px; }
.checkrow:last-child { border-bottom: 0; }
.check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--white); }
.check--done { background: var(--teal); border-color: var(--teal); color: var(--white); }
.check svg { width: 10px; height: 10px; }
.checkrow .who { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--page-deep); font-size: 13px; }
.alert:last-child { border-bottom: 0; }
.alert__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.alert__dot--warn { background: var(--amber); }
.alert__dot--due { background: var(--red); }
.alert__dot--info { background: var(--blue); }
.alert small { display: block; color: var(--muted); font-size: 12px; }

/* Feature cards with navy image panels (Remote's 3-card row) */
.feature { background: var(--white); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.feature:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23,50,77,.10); }
.feature__visual {
  background: radial-gradient(120% 120% at 100% 0%, #2B5C7D 0%, var(--navy) 55%, var(--navy-deep) 100%);
  padding: 24px; height: 268px; display: flex; align-items: center; justify-content: center;
}
.feature__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.feature__body .eyebrow { font-size: 12px; margin-bottom: 8px; color: var(--blue); }
.feature__body h3 { font-size: 20px; min-height: 2.24em; }
.feature__body p { font-size: 15px; color: var(--muted); }
.mini { background: var(--white); border-radius: 10px; padding: 12px 14px; width: 100%; max-width: 300px; min-height: 196px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 12px; color: var(--charcoal); }
.mini__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--navy); margin-bottom: 6px; font-size: 12px; }
.mini__head span { color: var(--muted); font-weight: 500; font-size: 11px; }
.mini__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--page-deep); flex: 1; }
.mini__row img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.mini__row .pill { margin-left: auto; font-size: 11px; padding: 2px 7px; }
.mini__row .check { width: 14px; height: 14px; }
.mini__row .check svg { width: 8px; height: 8px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.step { background: var(--white); border-radius: var(--r-md); padding: 24px; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.step__num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--white);
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.step h4 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 15px; color: var(--muted); }

/* ---------- Quality checklist ---------- */
.checklist { background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(23,50,77,.08); }
.checklist__head { padding: 16px 22px; border-bottom: 1px solid var(--border); background: var(--page); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.checklist__head strong { color: var(--navy); font-size: 15px; }
.checklist__head span { color: var(--muted); font-size: 12px; }
.checklist .checkrow { padding: 12px 22px; font-size: 14px; }
.checklist__foot { padding: 14px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--border); background: var(--page); }
/* Reviewer card: an identity card, deliberately not the task-list person card */
/* Quality section: the review record card overlaps the reviewer card beneath it.
   The reviewer carries extra bottom padding so nothing is covered by the overlap. */
.quality-col { display: block; position: relative; }
.quality-col > .reviewer { position: relative; z-index: 1; margin-right: 34px; padding-bottom: 58px; }
.quality-col > .checklist { position: relative; z-index: 2; margin-left: 34px; margin-top: -42px; box-shadow: 0 24px 56px rgba(23,50,77,.14); }
.reviewer { background: var(--white); border-radius: 14px; padding: 24px; box-shadow: 0 16px 40px rgba(23,50,77,.08); display: grid; gap: 16px; }
.reviewer__head { display: flex; align-items: center; gap: 18px; }
.reviewer__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--teal-soft); }
.reviewer__tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.reviewer__name { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: var(--navy); line-height: 1.1; letter-spacing: -0.01em; }
.reviewer__role { font-size: 14px; color: var(--muted); margin-top: 4px; }
.reviewer__line { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.reviewer__owns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--page-deep); }
.reviewer__owns span { font-size: 13px; color: var(--charcoal); background: var(--page); border-radius: var(--r-pill); padding: 6px 13px; }

.qc-points { display: grid; gap: 22px; margin-top: 28px; }
.qc-point { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.qc-point__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.qc-point__icon svg { width: 18px; height: 18px; }
.qc-point h4 { font-size: 17px; margin-bottom: 4px; }
.qc-point p { color: var(--muted); font-size: 15px; }

/* ---------- Cost comparison ---------- */
.donut-card { background: var(--white); border-radius: var(--r-lg); padding: 32px; box-shadow: 0 16px 40px rgba(23,50,77,.08); }
.donut-wrap { position: relative; width: 220px; height: 220px; margin: 4px auto 26px; }
.donut { width: 220px; height: 220px; display: block; }
.donut__track { fill: none; stroke: var(--page-deep); stroke-width: 20; }
.donut__arc {
  fill: none; stroke-width: 20; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: 502.65;
  stroke-dashoffset: 502.65;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.reveal.in .donut__arc, .no-js .donut__arc { stroke-dashoffset: 145.77; }
.donut__centre {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.donut__label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.donut__value { font-family: var(--font-display); font-size: 52px; font-weight: 500; line-height: 1.05; color: var(--navy); letter-spacing: -0.02em; }
.donut__sub { font-size: 13px; color: var(--muted); }

.costs { border-top: 1px solid var(--border); }
.costs li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--page-deep); font-size: 15px; color: var(--charcoal); }
.costs li strong { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cost comparison: cut-out team standing above the section, lower body faded into the page. */
/* Sits inside the cost comparison text column, directly above the eyebrow, so it
   travels with the text instead of being stranded by the split's vertical centring.
   Motion is the parent column's reveal and nothing else. */
.team-band { display: flex; justify-content: flex-start; margin-bottom: -14px; pointer-events: none; }
.team-band img {
  width: min(500px, 92%); height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.16) 89%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.55) 74%, rgba(0,0,0,.16) 89%, transparent 100%);
}

.costs__totals { margin-top: 14px; display: grid; gap: 8px; }
.costs__total { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 16px; border-radius: var(--r-md); background: var(--page); font-size: 15px; }
.costs__total strong { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.costs__total--ours { background: var(--teal-soft); }
.costs__total--ours span, .costs__total--ours strong { color: var(--teal); }

/* ---------- Pricing ---------- */
.pricing__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.price-card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.price-card--main { box-shadow: 0 20px 50px rgba(23,50,77,.10); }
.price-card__head { padding: 32px; border-bottom: 1px solid var(--border); }
.price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 4px; }
.price__amount { font-family: var(--font-display); font-size: 52px; font-weight: 500; color: var(--navy); letter-spacing: -0.02em; line-height: 1; }
.price__unit { color: var(--muted); font-size: 15px; }
.price-line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--page-deep); font-size: 15px; }
.price-line:last-child { border-bottom: 0; }
.price-line strong { color: var(--navy); font-weight: 600; white-space: nowrap; }
.price-card__body { padding: 20px 32px; }
/* Only the inclusions list sits in this row, so flow it across the full width. */
.price-card__cols { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 24px 32px; border-top: 1px solid var(--border); }
.price-card__cols .inc ul { columns: 2; column-gap: 28px; }
.price-card__cols .inc li { break-inside: avoid; }
.price-card__cols h4 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.price-card__cols li { font-size: 15px; line-height: 1.45; padding: 5px 0 5px 26px; position: relative; }
.price-card__cols li svg { position: absolute; left: 0; top: 9px; width: 15px; height: 15px; }
.inc li svg { color: var(--teal); }

/* ---------- Commitments band ---------- */
.commitments {
  margin-top: 16px;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 140% at 100% 0%, #2B5C7D 0%, var(--navy) 50%, var(--navy-deep) 100%);
  padding: 36px 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 48px;
}
.commitment { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.commitment svg { width: 22px; height: 22px; color: var(--teal-glow); margin-top: 1px; }
.commitment strong { color: var(--white); font-weight: 600; font-size: 16px; line-height: 1.4; }

/* ---------- Security ---------- */
.security__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sec-item { background: var(--white); border-radius: var(--r-md); padding: 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sec-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(23,50,77,.10); }
.sec-item h4 { font-size: 17px; margin-bottom: 6px; }
.sec-item p { font-size: 15px; color: var(--muted); }
/* ---------- Final CTA ---------- */
.final { padding: 0 0 24px; }
.final .panel-cta { padding: 80px 40px; }

/* ---------- Footer ---------- */
.footer { background: var(--page-deep); color: var(--charcoal); padding: 64px 0 32px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 28px; width: auto; margin-bottom: 16px; }
.footer__brand p { max-width: 340px; color: var(--muted); }
.footer h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
.footer li { padding: 4px 0; }
.footer a { color: var(--charcoal); }
.footer a:hover { color: var(--navy); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
  .nav { gap: 18px; }
  .nav a { font-size: 14px; }
  .hero__panel { grid-template-columns: 1fr; padding: 48px 32px 32px; }
  .howto { grid-template-columns: 1fr; }
  .split, .split--rev { grid-template-columns: 1fr; }
  .team-band img { width: min(460px, 62%); }
  .split--rev > :first-child { order: 0; }
  .grid-3, .security__grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .commitments { padding: 30px 32px; gap: 20px 32px; }
  .pricing__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .dash-wrap { padding: 20px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .lede { font-size: 17px; }
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 28px; }
  .header__inner { height: 60px; }
  .nav { display: none; }
  .nav.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: absolute; top: 60px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); padding: 8px 16px 16px; }
  .nav.is-open a { padding: 12px 0; width: 100%; border-bottom: 1px solid var(--page-deep); font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .header__cta .btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .hero__panel { padding: 36px 20px 20px; min-height: 0; gap: 16px; }
  .hero__actions .btn { width: 100%; }
  .globe { margin: 4px -8px 0; width: calc(100% + 16px); }
  .globe__core { width: 44px; height: 44px; }
  .globe__core img { width: 27px; }
  .globe__label { font-size: 9px; letter-spacing: .1em; }
  .chip { padding: 8px 10px; font-size: 12px; }
  .chip { display: none; }
  .marquee__item { font-size: 17px; }
  .stage { padding: 20px; min-height: 0; }
  .collage { min-height: 0; display: grid; gap: 12px; }
  .collage__card { position: static; width: auto; }
  .avatars { grid-template-columns: repeat(3, 1fr); }
  .grid-3, .grid-2, .security__grid, .steps { grid-template-columns: 1fr; }
  .commitments { grid-template-columns: 1fr; padding: 26px 24px; gap: 18px; }
  .dash__stats { grid-template-columns: repeat(2, 1fr); }
  .dash__grid, .dash__grid--even, .trend { grid-template-columns: 1fr; }
  .dash__meta, .dash__brand span { display: none; }
  .dash__bar { flex-wrap: wrap; }
  .dash__body { padding: 12px; }
  .dash-wrap { padding: 12px; }
  .team-band { margin-bottom: -6px; }
  .team-band img { width: 82%; }
  .quality-col > .reviewer { margin-right: 16px; padding-bottom: 46px; }
  .quality-col > .checklist { margin-left: 16px; margin-top: -28px; }
  .price-card__cols { grid-template-columns: 1fr; }
  .price-card__cols .inc ul { columns: 1; }
  .price-card__head, .price-card__body, .price-card__cols { padding-left: 22px; padding-right: 22px; }
  .price__amount { font-size: 42px; }
  .panel-cta, .final .panel-cta { padding: 48px 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .donut__arc { transition: none; }
  .chip, .hero__panel::before, .hero__panel::after, .marquee__track,
  .globe__route--flow, .globe__route--halo, .globe__pulse { animation: none; }
  .globe__pulse { opacity: 0; }
  .dash__pane, .person-card.is-active { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .bar > i, .btn, .card, .feature, .sec-item { transition: none; }
}