/* MV Data Strategy page. Builds on /style.css */

/* Hero: logo on the right where the portrait sits on the main page */
.hero .wrap { grid-template-columns: 326px minmax(0, 1fr); column-gap: clamp(56px, 8.5vw, 128px); align-items: start; }
.hero .herologo { order: -1; }
/* Text block sits on the logo's baseline, like the portrait on the main page: small caps name, big tagline, button */
/* The text block is exactly as tall as the logo: the caps line sits on the legend's baseline, the button sits on the frame's bottom edge */
.hero-text { display: flex; flex-direction: column; box-sizing: border-box; min-height: 326px; padding: 27px 0 3px; }
.hero h1 { margin: 0 0 22px; font: 500 13px/16px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--royal); }
.hero .lede { max-width: 12em; margin: 0; font-family: "Newsreader", serif; font-weight: 400; font-size: clamp(36px, 4.6vw, 59px); line-height: 1.06; letter-spacing: -.03em; color: var(--royal); }
.hero .lede em { display: inline-block; margin-left: -.14em; padding: 0 .14em .04em; border-radius: .12em; font-style: italic; background: linear-gradient(rgba(255, 77, 94, .15), rgba(255, 77, 94, .15)) 0 0 / 100% 100% no-repeat; }
html:not([data-hl="under"]):not([data-hl="all"]) .js .hero .lede em, html.js:not([data-hl="under"]):not([data-hl="all"]) .hero .lede em { background-size: 0% 100%; }
html.js.loaded:not([data-hl="under"]):not([data-hl="all"]) .hero .lede em { background-size: 100% 100%; transition: background-size .9s var(--ease) 2.3s; }
/* Highlight options (set data-hl on <html>): last line (default), whole sentence, underline only */
html[data-hl="all"] .hero .lede em { background: none !important; padding: 0; margin: 0; }
html[data-hl="all"] .hero .lede .hlw { padding: .02em .16em .06em; margin-left: -.16em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(rgba(255, 77, 94, .15), rgba(255, 77, 94, .15)) 0 0 / 100% 100% no-repeat; }
html.js[data-hl="all"] .hero .lede .hlw { background-size: 0% 100%; }
html.js.loaded[data-hl="all"] .hero .lede .hlw { background-size: 100% 100%; transition: background-size .9s var(--ease) 2.3s; }
html[data-hl="under"] .hero .lede em { padding: 0; margin: 0; border-radius: 0; background: none; }
html[data-hl="under"]:not(.js) .hero .lede em { background: linear-gradient(#ff4d5e, #ff4d5e) 0 100% / 100% 4px no-repeat; }
html[data-hl="none"] .hero .lede em { background: none !important; }
/* Tagline ripple: words resolve from soft, blurred pink to blue, one after another, like the paragraphs below */
@property --k { syntax: "<number>"; inherits: false; initial-value: 1; }
.js .hero .lede .rw { --k: 0; filter: blur(calc((1 - var(--k)) * 5px)); opacity: calc(.15 + .85 * var(--k)); color: color-mix(in oklch, var(--state) calc((1 - var(--k)) * 100%), currentColor); transition: --k .95s var(--ease) calc(var(--i) * 95ms + 900ms); }
.js.loaded .hero .lede .rw { --k: 1; }
.hero .cta { margin: auto 0 0; }
.hero .lede { margin-bottom: 28px; }
.hero .wrap { position: relative; }
.ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.hero .cta .more { display: inline-block; margin-top: 0; text-decoration: none; }
.herologo { width: 326px; }
/* The logo is drawn on the page's 32px graph paper; ds.js nudges it so its lines land on the real gridlines */
.snap { position: relative; width: 326px; }
.mark { display: block; width: 326px; height: auto; overflow: visible; }
.mark text { font-family: Inter, system-ui, sans-serif; }
.mark-d { display: none; }
/* Logo: frame, axis, and label are there from the start; only the M and V line draws itself */
.js .mark .dr { stroke-dasharray: 1; stroke-dashoffset: 1; }

html[data-logo="d"] .mark-a { display: none; }
html[data-logo="d"] .mark-d { display: block; }

/* Header: the link back to the main site sits apart from the in-page links */
nav a.ext { margin-left: 10px; }
nav a.ext::after { content: " \2197"; font-size: .85em; opacity: .6; }

/* Opening statement */
.ask { margin-bottom: 28px; }

/* Services: each row is a box-plot range. Click a row to open its description and offerings. */
.svc { list-style: none; margin: 0; padding: 0; }
.svc > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.svc > li:first-child { border-top: 0; padding-top: 0; }
.svc > li:last-child { border-bottom: 1px solid var(--line); }
.svc .n { font: 600 12px var(--sans); letter-spacing: .1em; color: var(--state); padding-top: 14px; }
.svc .hd { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.svc .top { display: flex; align-items: center; min-width: 0; }
.svc h3 { margin: 0; flex: 0 0 5.1em; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.01em; color: var(--royal); }
.svc .rg { display: block; flex: 1; min-width: 0; }
.svc .when { margin: 6px 0 0; font-style: italic; font-size: 18px; line-height: 1.4; color: var(--muted); }
.svc .tg { position: relative; width: 32px; height: 32px; border: 2px solid var(--royal); border-radius: 50%; transition: background .2s; }
.svc .tg::before, .svc .tg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: var(--royal); transition: transform .3s var(--ease), background .2s; }
.svc .tg::after { transform: rotate(90deg); }
.svc .hd:hover .tg { background: rgba(27, 60, 204, .08); }
.svc .hd:focus-visible { outline: 2px solid var(--royal); outline-offset: 6px; }
.svc .hd[aria-expanded="true"] .tg::after { transform: rotate(0); }
.svc .hd[aria-expanded="true"] .rng b { background: rgba(27, 60, 204, .09); }

.svc .pn { display: grid; grid-template-rows: 1fr; }
.svc .pi { overflow: hidden; min-height: 0; }
.svc .d { margin: 16px 0 20px; max-width: 34em; font: 400 18px/1.55 var(--serif); color: var(--muted); }
.svc .offer { list-style: none; margin: 0; padding: 0; max-width: 34em; border-top: 1px solid var(--line); }
.svc .offer li { position: relative; padding: 12px 0 12px 26px; border-bottom: 1px solid var(--line); font: 500 15px/1.4 var(--sans); color: var(--head); }
.svc .offer li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--state); }
.svc.acc .pn { grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.svc.acc .pn.open { grid-template-rows: 1fr; }
.svc.acc .pi { visibility: hidden; transition: visibility 0s .4s; }
.svc.acc .pn.open .pi { visibility: visible; transition-delay: 0s; }
.note { margin: 28px 0 0; font: 400 15px var(--sans); }

.rng { position: relative; display: block; width: var(--w); height: 2px; background: var(--royal); }
.rng::before, .rng::after { content: ""; position: absolute; top: -8px; width: 2px; height: 18px; background: var(--royal); }
.rng::before { left: 0; }
.rng::after { right: 0; }
.rng b { position: absolute; left: 25%; right: 25%; top: -11px; height: 24px; box-sizing: border-box; border: 2px solid var(--royal); background: var(--bg); transition: background .3s; }
.rng i { position: absolute; z-index: 2; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--state); }
/* The range draws left to right, then the dot lands */
.js .rng { clip-path: inset(-16px 100% -16px -2px); }
.js .svc.in .rng { clip-path: inset(-16px -2px -16px -2px); transition: clip-path 1.1s var(--ease); }
.js .svc.in li:nth-child(2) .rng { transition-delay: .15s; }
.js .svc.in li:nth-child(3) .rng { transition-delay: .3s; }
.js .rng i { transform: scale(0); }
.js .svc.in .rng i { transform: none; transition: transform .5s var(--ease) 1s; }
.js .svc.in li:nth-child(2) .rng i { transition-delay: 1.15s; }
.js .svc.in li:nth-child(3) .rng i { transition-delay: 1.3s; }

/* How we're different */
.modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.modes li { padding-top: 20px; border-top: 2px solid var(--royal); }
.modes h3 { margin: 0 0 10px; font-weight: 400; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -.01em; color: var(--head); }
.modes p { margin: 0; font: 400 18px/1.5 var(--serif); color: var(--muted); }

/* About */
.more-link { margin: 8px 0 0; font: 400 15px var(--sans); }
.quotes { margin-top: 56px; display: grid; gap: 36px; }
.quotes blockquote { margin: 0; padding-left: 24px; border-left: 2px solid var(--state); }
.quotes blockquote p { margin: 0 0 12px; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.45; }
.quotes cite { font: normal 400 14px var(--sans); color: var(--muted); }

/* Contact */
.closing { margin-bottom: 28px; }

@media (max-width: 380px) { .herologo, .snap, .mark { width: 100%; } }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-text { min-height: 0; padding-bottom: 0; }
    .modes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svc > li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .svc .top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .svc h3 { flex: none; }
  .svc .rg { width: 100%; }
  .svc .when { margin-top: 14px; }
  nav a.ext { margin-left: 0; }
}

/* intro band, whom we help */
.sec-grid.one{grid-template-columns:minmax(0,1fr)}
.sec-grid.one .ask{margin:0 0 40px;max-width:24em}
.card{padding:clamp(40px,8vh,88px) 0 clamp(24px,5vh,56px)}
.card .ask{margin:0;max-width:16em;font-size:clamp(34px,4.6vw,60px);line-height:1.12;letter-spacing:-.02em}
.hero{padding-bottom:clamp(40px,8vh,88px)}
#why.sec{padding-top:clamp(36px,5vh,56px)}
.sec-grid.one{grid-template-columns:minmax(0,1fr);gap:0}
.sec-grid.one .ask{margin:0 0 20px;max-width:none;font-size:clamp(20px,3vw,40px);line-height:1.15;color:var(--royal);white-space:nowrap}
.sec-grid.one .copy p{margin:0;max-width:44em;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--muted)}
.sec-grid.one .ask .sw{color:color-mix(in oklch,var(--state) calc((1 - var(--u,1)) * 100%),var(--royal))}
.sec-grid.one .copy .sw{color:color-mix(in oklch,var(--state) calc((1 - var(--u,1)) * 100%),var(--muted))}
@media(max-width:860px){.sec-grid.one .ask{white-space:normal;font-size:28px}}
#why.band{padding:0;background:linear-gradient(color-mix(in srgb,var(--royal) 5%,transparent),color-mix(in srgb,var(--royal) 5%,transparent))}
#why.band .sec-grid{padding:clamp(40px,7vh,64px) 0}
.sec-grid.one.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:72px;align-items:start}
.sec-grid.one.two .ask{margin:0;font-size:clamp(24px,2.55vw,34px);line-height:1.2;white-space:nowrap}
.sec-grid.one.two .copy p{max-width:32em;padding-top:.4em}
@media(max-width:860px){.sec-grid.one.two{grid-template-columns:1fr;row-gap:20px}.sec-grid.one.two .ask{white-space:normal;font-size:28px}}
#why.band{padding-top:0;margin-top:clamp(32px,6vh,64px)}
.whomA .cols{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.lbl{margin:0 0 6px;font:500 13px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--royal)}
.dots{list-style:none;margin:0;padding:0}
.dots li{position:relative;padding:16px 0 16px 26px;border-top:1px solid var(--line);font-family:"Newsreader",serif;font-size:clamp(19px,1.7vw,22px);line-height:1.35;color:var(--head)}
.dots li:last-child{border-bottom:1px solid var(--line)}
.dots li::before{content:"";position:absolute;left:2px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--state)}
.whomB .ic{display:block;margin-bottom:18px}
.fit{list-style:none;margin:24px 0 0;padding:0}
.fit li{display:flex;gap:18px;align-items:center;padding:18px 0;border-top:1px solid var(--line);font-family:"Newsreader",serif;font-size:clamp(19px,1.8vw,23px);line-height:1.35;color:var(--head)}
.fit li:last-child{border-bottom:1px solid var(--line)}
.fit .ck{flex:none}
.whomC .statement.sm{font-size:clamp(24px,2.6vw,32px);color:var(--royal)}
.whomC .note{margin:20px 0 0}
@media(max-width:860px){.whomA .cols{grid-template-columns:1fr;gap:32px}}

/* an empty, hidden quotes block was still adding 56px under About */
.quotes[hidden]{display:none}
#whom{padding-bottom:20px}

/* header bar: near-solid so charts do not ghost through while scrolling */
header.top{background:rgba(246,248,255,.995)}

/* phones: keep all five nav items on one row */
@media(max-width:480px){nav a{padding:5px 2px 5px 9px;font-size:12px}nav a[aria-current]::before{left:2px}nav a.ext{margin-left:0}}
@media(max-width:380px){nav a{padding:5px 1px 5px 7px;font-size:11.5px}nav a[aria-current]::before{left:1px}}

/* the finished underline belongs to the text, so it moves with it */
html.ul-static .hero .lede em{position:relative}
html.ul-static .hero .lede em::after{content:"";position:absolute;left:0;right:0;top:100%;margin-top:1px;height:4px;background:#ff4d5e}

/* phones: tighter gaps between sections */
@media(max-width:600px){html .sec{padding-top:60px}html footer{margin-top:60px}}

/* service rows reuse the class "top"; keep them from inheriting the header bar's sticky, layered styling */
.svc .top{position:static;z-index:auto;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;transition:none}