:root {
  --paper: #f8f8f5;
  --ink: #232d26;
  --accent: #355541;
  --on-accent: #fff;
  --body-font: "Manrope", sans-serif;
  --rule: #cdd3c9;
  --muted: #535d50;
}
body { font-size: 16px; }
.page-width { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }
.masthead {
  position: fixed; z-index: 20; inset: 0 0 auto;
  height: 82px; padding-inline: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--paper); color: var(--ink); transition: background .25s, color .25s, box-shadow .25s;
}
.js .masthead { background: transparent; color: #fff; }
.masthead.is-solid, .masthead[data-menu-open] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--rule); }
.wordmark { font: 500 36px/1 "Bodoni Moda", Georgia, serif; letter-spacing: -.035em; text-decoration: none; }
.masthead nav { display: flex; align-items: center; gap: 34px; font-size: 13px; }
.masthead nav a { text-decoration: none; padding-block: 8px; }
.masthead nav a:hover { text-decoration: underline; }
.masthead .nav-contact { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid currentColor; }
.masthead .nav-contact svg { width: 16px; height: 16px; }
.masthead a:focus-visible, .opening a:focus-visible, .opening button:focus-visible { outline-color: currentColor; }
.opening { position: relative; height: clamp(560px, 46vw, 760px); color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; background: #252a27; }
.hero-poster, .hero-film, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-poster, .hero-film { object-fit: cover; object-position: center; }
.hero-shade { background: linear-gradient(180deg, rgb(8 15 12 / .62), rgb(8 15 12 / .04) 27%, rgb(8 15 12 / .26) 49%, rgb(8 15 12 / .72)); }
.opening-copy { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-block: 120px 80px; text-align: center; }
.opening h1 { font: 400 clamp(56px, 6.1vw, 88px)/1.06 "Libre Caslon Display", Georgia, serif; letter-spacing: -.025em; }
.opening-copy p { font-size: 17px; line-height: 1.6; max-width: 64ch; margin-top: 24px; text-wrap: balance; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 26px; padding: 14px 23px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; text-decoration: none; transition: background .2s, transform .2s; }
.button:hover { background: var(--accent); }
.button:active { transform: translateY(1px); }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: #dce3d8; }
.opening .button { margin-top: 26px; }
.film-control { position: absolute; right: 48px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / .65); border-radius: 50%; background: rgb(10 19 14 / .28); color: #fff; }
.film-control:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.film-control:focus-visible { z-index: 2; background: var(--ink); color: #fff; outline-color: currentColor; }
.film-control .pause-icon, .film-control[data-playing] .play-icon { display: none; }
.film-control[data-playing] .pause-icon { display: block; }
.film-status { position: absolute; right: 48px; bottom: 7px; font-size: 10px; }
h2 { font: 400 clamp(38px, 3.8vw, 54px)/1.12 "Libre Caslon Display", Georgia, serif; letter-spacing: -.02em; }
.section-intro { display: grid; grid-template-columns: 5fr 6fr; gap: 90px; align-items: start; }
.platform { padding-top: 58px; }
.intro-copy { max-width: 66ch; color: var(--muted); }
.lead { color: var(--ink); font-size: 23px; line-height: 1.4; margin-bottom: 20px; }
.dashboard { margin-top: 48px; }
.dashboard-stage { padding: 48px; background: linear-gradient(rgb(19 34 27 / .33), rgb(19 34 27 / .49)), url("assets/media/mull-poster.jpg") center 57% / cover; }
.dashboard-view { display: block; overflow: hidden; background: #fff; border-radius: 6px; box-shadow: 0 22px 65px rgb(8 19 13 / .4); cursor: zoom-in; }
.dashboard-view img { display: block; width: 100%; height: auto; }
.dashboard figcaption { display: flex; justify-content: space-between; gap: 28px; color: var(--muted); margin-top: 14px; font-size: 11px; }
.dashboard figcaption span:last-child { white-space: nowrap; }
.review-work { display: grid; grid-template-columns: 280px 1fr; gap: 110px; margin-top: 66px; padding-top: 36px; border-top: 1px solid var(--rule); }
.review-switcher { align-self: start; }
.review-switcher button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--muted); text-align: left; font-size: 16px; }
.review-switcher button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.review-switcher button:hover { color: var(--ink); }
.review-switcher button svg { opacity: 0; }
.review-switcher button[aria-pressed="true"] svg { opacity: 1; }
.review-copy { min-height: 300px; max-width: 800px; }
.review-copy h2 { font-size: clamp(34px, 3.1vw, 44px); margin-bottom: 27px; max-width: 29ch; }
.review-copy p { color: var(--muted); max-width: 67ch; }
.teams { padding-top: 44px; }
.team-strip { display: flex; gap: 8px; padding-inline: 8px; overflow: hidden; }
.team-card { position: relative; flex: 1 1 0; min-width: 0; height: 554px; overflow: hidden; color: #fff; background: #283229; transition: flex .65s cubic-bezier(.16,1,.3,1); }
.team-card[open] { flex: 2.15 1 0; }
.team-card summary { position: absolute; inset: 0; height: 100%; color: #fff; }
.team-card summary::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(rgb(10 18 13 / .55), rgb(10 18 13 / .02) 40%, rgb(10 18 13 / .65)); transition: background .4s; }
.team-card summary::after { content: ""; position: absolute; z-index: 1; inset: 0; background: #132319; opacity: 0; transition: opacity .5s; }
.team-card summary img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .6s; }
.team-card:nth-child(1) img { object-position: 50% 35%; }
.team-card:nth-child(3) img { object-position: 37% center; }
.team-card:nth-child(4) img { object-position: 43% center; }
.team-card:nth-child(5) img { object-position: 38% center; }
.team-card h3 { position: absolute; inset: 0 0 auto; z-index: 2; padding: 29px 25px; font: 400 clamp(23px, 2.1vw, 31px)/1.2 "Bodoni Moda", Georgia, serif; letter-spacing: -.015em; }
.team-action { position: absolute; z-index: 3; right: 25px; bottom: 26px; display: flex; align-items: center; justify-content: flex-end; }
.team-action svg { width: 22px; height: 22px; transition: transform .35s; }
.team-card[open] .team-action svg { transform: rotate(45deg); }
.team-card[open] summary::after { opacity: .9; }
.team-card[open] summary img { transform: scale(1.045); filter: saturate(.6); }
.team-card summary:focus-visible { outline: 2px solid #fff; outline-offset: -7px; }
.team-detail { position: relative; z-index: 2; padding: 103px 25px 72px; pointer-events: none; font-size: 14px; line-height: 1.65; }
.team-card[open] .team-detail { animation: reveal-detail .5s .08s both; }
.team-lead { font: 400 32px/1.14 "Bodoni Moda", Georgia, serif; letter-spacing: -.015em; margin-bottom: 25px; }
.team-detail p + p { margin-top: 17px; }
.team-detail .team-example { margin-top: 23px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .3); color: #e3e9df; font-size: 13px; }
@keyframes reveal-detail { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.cost-section { padding-block: 112px 96px; }
.cost-heading h2 { font-size: clamp(38px, 4.2vw, 60px); }
.cost-heading h2 > span { font: 400 clamp(76px, 8vw, 112px)/1 "Manrope", sans-serif; letter-spacing: -.035em; margin-right: 18px; }
.cost-heading > p { max-width: 70ch; margin-top: 25px; color: var(--muted); }
.cost-heading > p strong { font-weight: 500; color: var(--ink); }
.cost-comparison { margin-top: 42px; }
.cost-bar-row { display: grid; grid-template-columns: 130px 1fr 58px; gap: 24px; align-items: center; }
.cost-bar-row + .cost-bar-row { margin-top: 23px; }
.cost-bar-row > span { font-size: 16px; }
.cost-bar-row > strong { font-size: 14px; font-weight: 500; text-align: right; }
.cost-track { height: 34px; }
.cost-bar { height: 100%; }
.cost-bar-baseline { width: 100%; background: #a6b09e; }
.cost-bar-scout { width: 0.367%; background: var(--accent); }
.cost-comparison figcaption { margin-top: 25px; color: var(--muted); font-size: 11px; }
.performance-comparison { display: grid; grid-template-columns: 4fr 6fr; gap: 88px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--rule); }
.performance-copy h3 { font: 400 34px/1.2 "Bodoni Moda", Georgia, serif; letter-spacing: -.025em; max-width: 23ch; }
.performance-copy p { font-size: 14px; color: var(--muted); margin-top: 20px; max-width: 46ch; }
.performance-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 0; }
.performance-scores > div:first-child { color: var(--accent); }
.performance-scores > div:last-child { color: var(--muted); }
.performance-scores dt { font-size: 14px; }
.performance-scores dd { margin: 10px 0 0; font-size: clamp(48px, 5.5vw, 76px); line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.performance-scores dd span { font-size: .55em; }
.performance-results figcaption { max-width: 74ch; margin-top: 24px; color: var(--muted); font-size: 11px; }
.vision { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 72px; padding-block: 40px 80px; }
.vision-place img { width: 100%; height: auto; }
.vision-place figcaption { font-size: 11px; color: var(--muted); }
.vision-letter { min-width: 0; }
.vision-copy { max-width: 760px; }
.vision-copy h2 { font-size: 38px; margin-bottom: 25px; }
.vision-statement { font-size: 24px; line-height: 1.45; color: var(--ink); margin-bottom: 23px; max-width: 48ch; }
.vision-copy > p:not(.vision-statement) { color: var(--muted); max-width: 66ch; }
.founders { display: grid; align-content: start; gap: 24px; padding-top: 30px; margin-top: 32px; border-top: 1px solid var(--rule); }
.founder { display: flex; gap: 17px; align-items: center; }
.founder img { width: 83px; height: 83px; object-fit: cover; flex: none; }
.founder strong, .founder span, .founder a { display: block; font-size: 12px; font-weight: 400; }
.founder span { color: var(--muted); }
.founder a { margin-top: 5px; }
footer { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-block: 32px; border-top: 1px solid var(--rule); }
footer p { font-size: 12px; margin-top: 13px; color: var(--muted); }
.footer-right { display: flex; gap: 30px; font-size: 12px; color: var(--muted); }

@media (max-width: 1100px) {
  .page-width { width: calc(100% - 72px); }
  .masthead { padding-inline: 36px; }
  .section-intro { gap: 48px; }
  .dashboard-stage { padding: 32px; }
  .review-work { grid-template-columns: 240px 1fr; gap: 54px; }
  .team-strip { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 0 20px 14px; gap: 12px; }
  .team-card, .team-card[open] { flex: 0 0 340px; scroll-snap-align: start; }
  .team-card h3 { font-size: 30px; }
  .team-lead { font-size: 30px; }
  .performance-comparison { gap: 48px; }
  .vision { gap: 40px; }
}
@media (max-width: 760px) {
  .page-width { width: calc(100% - 40px); }
  .masthead { min-height: 72px; height: auto; padding: 18px 20px; flex-wrap: wrap; gap: 20px; }
  .wordmark { font-size: 32px; }
  .menu-button { border: 1px solid currentColor; background: transparent; color: inherit; padding: 8px 14px; font-size: 13px; }
  .masthead nav { width: 100%; flex-wrap: wrap; gap: 14px 24px; font-size: 14px; padding-block: 4px 8px; }
  .js .masthead nav { display: none; }
  .js .masthead[data-menu-open] nav { display: flex; }
  .opening { height: min(78svh, 640px); min-height: 540px; }
  .hero-poster, .hero-film { object-position: 49% center; }
  .opening-copy { padding-block: 120px 72px; }
  .opening h1 { font-size: clamp(38px, 10.5vw, 64px); line-height: 1.12; }
  .opening-copy p { font-size: 15px; margin-top: 23px; max-width: 42ch; }
  .desktop-break { display: none; }
  .opening .button { margin-top: 26px; }
  .film-control { right: 20px; bottom: 17px; width: 40px; height: 40px; }
  .film-status { right: 20px; font-size: 9px; bottom: 3px; }
  h2 { font-size: 38px; }
  .platform { padding-top: 38px; }
  .section-intro { grid-template-columns: 1fr; gap: 28px; }
  .section-intro h2 br { display: none; }
  .intro-copy { font-size: 15px; }
  .lead { font-size: 21px; margin-bottom: 20px; }
  .dashboard { margin-top: 34px; }
  .dashboard-stage { padding: 17px; }
  .dashboard-view { border-radius: 4px; }
  .dashboard figcaption { display: block; font-size: 10px; }
  .dashboard figcaption span:last-child { display: block; margin-top: 5px; }
  .review-work { grid-template-columns: 1fr; gap: 28px; margin-top: 37px; padding-top: 20px; }
  .review-switcher { display: flex; gap: 24px; overflow-x: auto; }
  .review-switcher button { width: auto; flex: none; padding: 15px 0; font-size: 13px; }
  .review-switcher button svg { display: none; }
  .review-copy { min-height: 330px; }
  .review-copy h2 { font-size: 33px; margin-bottom: 23px; }
  .review-copy p { font-size: 15px; }
  .teams { padding-top: 32px; }
  .team-card, .team-card[open] { flex-basis: min(82vw, 360px); height: 584px; }
  .team-card h3 { padding: 26px 22px; font-size: 29px; }
  .team-action { right: 22px; }
  .team-detail { padding: 100px 22px 68px; font-size: 14px; }
  .team-lead { font-size: 29px; }
  .team-detail .team-example { font-size: 13px; }
  .cost-section { padding-block: 63px; }
  .cost-heading h2 { font-size: 36px; max-width: 12ch; }
  .cost-heading h2 > span { display: block; font-size: clamp(64px, 22vw, 90px); margin: 0 0 12px; }
  .cost-heading > p { font-size: 15px; }
  .cost-comparison { margin-top: 32px; }
  .cost-bar-row { grid-template-columns: 1fr 44px; gap: 12px 15px; }
  .cost-bar-row > span { grid-column: 1 / -1; }
  .cost-bar-row > span, .cost-bar-row > strong { font-size: 13px; }
  .cost-track { height: 26px; }
  .cost-comparison figcaption { font-size: 10px; }
  .performance-comparison { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-top: 32px; }
  .performance-copy h3 { font-size: 30px; }
  .performance-copy p { margin-top: 17px; }
  .performance-scores { gap: 24px; }
  .performance-scores dt { font-size: 12px; }
  .performance-scores dd { font-size: clamp(44px, 12vw, 66px); }
  .vision { grid-template-columns: 1fr; gap: 30px; padding-block: 12px 48px; }
  .vision-copy h2 { font-size: 35px; margin-bottom: 22px; }
  .vision-statement { font-size: 24px; line-height: 1.4; }
  .vision-copy > p:not(.vision-statement) { font-size: 15px; }
  .founders { padding-top: 27px; }
  .founder { flex-direction: row; align-items: center; gap: 16px; }
  .founder img { width: 70px; height: 70px; }
  .founder strong, .founder span, .founder a { font-size: 12px; }
  footer { align-items: start; flex-direction: column; padding-block: 28px; gap: 23px; }
  .footer-right { gap: 22px; font-size: 11px; }
}
@media (max-width: 359px) {
  .opening h1 { font-size: 36px; }
  .team-card, .team-card[open] { height: 680px; }
  .team-lead { font-size: 27px; }
  .review-copy { min-height: 410px; }
}