/* ============================================================
   SEFTON — STYLES
   Brand tokens are at the top. Change those to re-skin.
   The whole page is brand red. The only cream surfaces are the
   data cards, and their text is deep red. No black anywhere.
   ============================================================ */

:root{
  --red:#B74149;        /* the page                        */
  --cream:#EDE6E3;      /* all text on red, and the cards  */
  --ink:#5E1C22;        /* primary text on a cream card    */
  --ink-2:#872C34;      /* secondary text on a cream card  */
  --ink-3:#9A343C;      /* muted text on a cream card      */
  --card-soft:#E0CDCE;  /* bar track inside a cream card   */
  --hair:#DCC8C9;       /* rules inside a cream card       */
  --mark:#B74149;       /* primary data mark               */
  --mark-2:#CF8B8E;     /* secondary data mark             */
  --cta-ink:#75252C;    /* text on the cream button        */
  --r:14px;
  --pad:clamp(20px,5vw,64px);
  --maxw:1120px;
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:var(--red);color:var(--cream);
  font-family:inherit;line-height:1.5;-webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth;background:var(--red);}
h1,h2,h3,p,figure{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}

.inner{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--cream);color:var(--ink);
  padding:12px 18px;border-radius:0 0 8px 0;z-index:99;font-size:14px;
}
.skip:focus{left:0;}
:where(a,button,summary):focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:4px;
}

/* ---------- masthead ---------- */
.mast .inner{
  display:flex;flex-direction:column;align-items:center;
  padding-block:clamp(34px,6vw,60px) clamp(20px,3vw,30px);gap:clamp(20px,3vw,30px);
}
.mark{display:block;line-height:0;color:var(--cream);text-decoration:none;}
.mark-svg{
  height:clamp(58px,9vw,104px);width:auto;display:block;fill:currentColor;
  transition:opacity .15s ease;
}
.mark:hover .mark-svg{opacity:.85;}
.nav-links{display:flex;gap:clamp(18px,3.4vw,34px);align-items:center;flex-wrap:wrap;justify-content:center;}
.nav-links a{font-size:14px;text-decoration:none;opacity:.9;letter-spacing:.01em;padding:4px 0;}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;}

/* ---------- hero ---------- */
.hero .inner{padding-block:clamp(34px,6vw,76px) clamp(56px,10vw,128px);text-align:center;}
.hero h1{
  font-size:clamp(31px,4.7vw,60px);font-weight:600;line-height:1.07;
  letter-spacing:-.032em;max-width:34ch;margin-inline:auto;text-wrap:balance;
}
.hero p{
  margin:clamp(18px,2.6vw,28px) auto 0;font-size:clamp(16px,1.9vw,21px);
  line-height:1.55;max-width:54ch;opacity:.92;text-wrap:pretty;
}
.cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(26px,3.6vw,38px);
  background:var(--cream);color:var(--cta-ink);text-decoration:none;
  font-size:15px;font-weight:600;padding:14px 24px;border-radius:99px;
  transition:transform .15s ease;
}
.cta:hover{transform:translateY(-2px);}

/* ---------- section headings (on red) ---------- */
.sec-h{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);opacity:.92;
}
.sec-t{
  margin-top:12px;font-size:clamp(26px,4vw,42px);font-weight:600;
  line-height:1.12;letter-spacing:-.025em;max-width:20ch;color:var(--cream);
}

/* ---------- services ---------- */
.services .inner{padding-block:clamp(52px,9vw,104px);}
.svc-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2vw,22px);margin-top:clamp(32px,4.5vw,52px);
}
.svc{border-top:2px solid rgba(237,230,227,.55);padding-top:18px;}
.svc h3{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--cream);}
.svc p{margin-top:8px;font-size:14.5px;color:var(--cream);opacity:.86;line-height:1.6;}

/* ---------- videos ---------- */
.videos .inner{padding-block:clamp(8px,2vw,24px) clamp(40px,7vw,80px);}
.videos .sec-t{margin-bottom:clamp(24px,4vw,40px);}
.vid-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);}
@media(max-width:820px){.vid-grid{grid-template-columns:1fr;}}
.vid{
  position:relative;aspect-ratio:16/9;max-width:100%;
  border-radius:var(--r);overflow:hidden;background:rgba(43,20,22,.22);
}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* ============================================================
   RESULTS SECTION (the dashboard)
   ============================================================ */
.results .inner{padding-block:clamp(52px,9vw,104px);}

.hero-fig{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(12px,2.4vw,30px);
  padding-block:clamp(30px,5vw,48px) clamp(26px,4vw,40px);
  margin-bottom:clamp(24px,4vw,40px);
  border-bottom:1px solid rgba(237,230,227,.24);
}
.fig-val{font-size:clamp(64px,13vw,168px);font-weight:600;line-height:.86;letter-spacing:-.035em;}
.fig-side{padding-bottom:.35em;}
.fig-lab{display:block;font-size:clamp(16px,2.1vw,26px);line-height:1.25;opacity:.88;max-width:26ch;}
.pill{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:13px;font-weight:600;background:rgba(237,230,227,.14);
  border-radius:99px;padding:7px 14px;
}
.pill .per{font-weight:400;opacity:.85;}
@media(max-width:640px){
  .hero-fig{display:block;}
  .fig-val{display:block;margin-bottom:12px;}
  .fig-side{padding-bottom:0;}
}

.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(10px,1.4vw,14px);margin-bottom:clamp(10px,1.4vw,14px);
}
.tile{
  background:var(--cream);color:var(--ink);border-radius:var(--r);
  padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:9px;min-width:0;
}
.t-lab{font-size:12.5px;font-weight:500;color:var(--ink-2);line-height:1.3;}
.t-val{font-size:clamp(28px,3.3vw,38px);font-weight:600;line-height:1;letter-spacing:-.025em;}
.t-foot{margin-top:auto;}
.delta{font-size:12.5px;font-weight:600;display:flex;flex-direction:column;gap:2px;}
.delta .num{display:inline-flex;align-items:baseline;gap:5px;}
.delta.up{color:var(--ink);}
.delta.down{color:var(--ink-3);}
.delta .per{font-weight:400;color:var(--ink-3);font-size:12px;}

.panels{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(10px,1.4vw,14px);}
@media(max-width:860px){.panels{grid-template-columns:1fr;}}
.card{
  background:var(--cream);color:var(--ink);border-radius:var(--r);
  padding:clamp(18px,2.2vw,26px);min-width:0;display:flex;flex-direction:column;
}
.card-h{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px;}
.card-s{font-size:12.5px;color:var(--ink-3);margin-bottom:22px;line-height:1.4;}

.bars{display:flex;flex-direction:column;gap:16px;flex:1;justify-content:space-between;}
@media(max-width:860px){.bars{flex:0 0 auto;justify-content:flex-start;}}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline;}
.bar-lab{font-size:13px;font-weight:500;}
.bar-val{font-size:13px;font-weight:600;}
.bar-val.down{color:var(--ink-3);}
.bar-track{grid-column:1/-1;height:12px;background:var(--card-soft);border-radius:0 4px 4px 0;}
.bar-fill{
  height:100%;background:var(--mark);border-radius:0 4px 4px 0;
  width:0;min-width:3px;transition:width .9s cubic-bezier(.22,.7,.3,1);
}
.bar-fill.down{background:var(--mark-2);}

.split-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;}
.split{display:flex;width:100%;height:34px;border-radius:6px;overflow:hidden;gap:2px;margin-bottom:22px;}
.seg{height:100%;min-width:4px;width:0;transition:width .9s cubic-bezier(.22,.7,.3,1);}
.legend{display:flex;flex-direction:column;gap:14px;}
.leg{display:flex;align-items:baseline;gap:10px;}
.sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto;transform:translateY(1px);}
.leg-name{font-size:13px;font-weight:500;flex:1;}
.leg-num{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.leg-pct{font-size:12.5px;color:var(--ink-3);min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums;}
.tot{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);
  font-size:12.5px;color:var(--ink-3);display:flex;justify-content:space-between;gap:12px;
}
.tot b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}

/* table view */
details{margin-top:clamp(16px,2.4vw,22px);}
summary{
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--cream);opacity:.85;
  letter-spacing:.04em;list-style:none;display:inline-flex;align-items:center;gap:7px;padding:8px 0;
}
summary::-webkit-details-marker{display:none;}
summary::before{content:'+';font-weight:400;font-size:15px;}
details[open] summary::before{content:'\2212';}
summary:hover{opacity:1;}
.table-wrap{overflow-x:auto;background:var(--cream);border-radius:var(--r);padding:8px 4px;margin-top:10px;}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:440px;color:var(--ink);}
th,td{
  text-align:right;padding:9px 16px;border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums;
}
th:first-child,td:first-child{text-align:left;font-variant-numeric:normal;}
th{font-weight:600;color:var(--ink-2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;}
tr:last-child td{border-bottom:none;}
td.up{color:var(--ink);} td.down{color:var(--ink-3);}

/* its own band between the results and contact sections */
.more-band .inner{padding-block:0 clamp(10px,2vw,28px);}
.more{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:0;
  font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.02em;
  color:var(--cream);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:4px;
  transition:opacity .15s ease;
}
.more:hover{opacity:.8;}

.foot-note{margin-top:clamp(18px,2.6vw,26px);font-size:12px;opacity:.9;line-height:1.6;max-width:74ch;}

/* ---------- contact ---------- */
.contact .inner{padding-block:clamp(52px,9vw,104px);}
.contact h2{
  font-size:clamp(26px,4.4vw,46px);font-weight:600;line-height:1.1;
  letter-spacing:-.03em;max-width:18ch;color:var(--cream);
}
.contact p{margin-top:14px;font-size:clamp(15px,1.8vw,18px);color:var(--cream);opacity:.88;max-width:46ch;}
.mail{
  display:inline-block;margin-top:clamp(22px,3vw,32px);
  font-size:clamp(20px,3.4vw,34px);font-weight:600;letter-spacing:-.02em;
  color:var(--cream);text-decoration:none;border-bottom:2px solid currentColor;
  padding-bottom:3px;word-break:break-word;transition:opacity .15s ease;
}
.mail:hover{opacity:.8;}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(237,230,227,.24);}
.foot .inner{
  padding-block:28px;display:flex;flex-wrap:wrap;gap:10px 24px;
  justify-content:space-between;font-size:13px;
}
.foot a{text-decoration:none;opacity:.9;}
.foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px;}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
}