/* Meridian Holding Partners LLC - meridianholdingpartners.com
   Palette and type are the ADOPTED identity standards (2026-09-08). Do not re-key a hex
   here: the same values live in the SVG masters and the Identity Standards sheet, and a
   drift between them is how a brand stops matching its own paperwork.
   Copper is an ACCENT: rules, underlines, focus rings, tile tops. It is never text on
   light ground (4.2:1 on paper, under the 4.5:1 floor). On charcoal the light copper
   #E4B48F may be link text (8.0:1). Field gray stays off borders and text on light
   ground; inputs use --input-border. The footer logo is the knockout lockup.
   v2 2026-10-03 (branch v2-cinematic): 3D hero film on the home page that plays by itself (round 4;
   rounds 1-3 pinned it to the scroll), quiet reveals on every page, wider spacing and a slightly
   larger display size. Tokens unchanged. Motion runs only under html.motion (set by /js/site.js),
   never with prefers-reduced-motion. */

:root {
  --charcoal: #23272C;
  --copper: #B4642E;
  --field-gray: #9AA0A5;
  --paper: #FCFBF9;
  --rule: #E3E1DD;
  --ink: #23272C;
  --ink-soft: #55595E;
  --input-border: #80868B;  /* 3.7:1 on white; field gray was 2.5:1 */
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { max-width: 100%; height: auto; display: block; }
a { color: var(--charcoal); text-decoration-color: var(--copper); text-underline-offset: 0.16em; }
a:hover { color: var(--charcoal); text-decoration-thickness: 2px; }
.skip { position: absolute; left: -9999px; top: 22px; z-index: 9; background: #fff; color: var(--charcoal); padding: 10px 14px; border: 2px solid var(--charcoal); text-decoration: none; }
.skip:focus { left: 22px; outline: 2px solid var(--copper); outline-offset: 2px; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-left: 22px; padding-right: 22px; }

/* ---------- masthead: white, mark only, photographs never sit behind it ---------- */
.masthead { background: #fff; border-bottom: 1px solid var(--rule); }
.masthead .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding-top: 22px; padding-bottom: 22px;
}
/* Clear space: one quarter of the mark's height on every side, per the standards sheet. */
.masthead a.brand { display: block; line-height: 0; padding: 8px 0; }
.masthead img.lockup { width: 260px; }
nav.main { display: flex; flex-wrap: wrap; gap: 6px 24px; }
nav.main a {
  color: var(--ink-soft); text-decoration: none; font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 4px 0 3px; border-bottom: 2px solid transparent; white-space: nowrap;
}
nav.main a:hover { color: var(--charcoal); }
nav.main a[aria-current="page"] { color: var(--charcoal); border-bottom-color: var(--copper); }

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 9vw, 100px) 0 clamp(54px, 7vw, 78px); border-bottom: 1px solid var(--rule); }
.hero h1 {
  margin: 0 0 20px; font-family: var(--serif); font-size: clamp(2.3rem, 6.5vw, 3.8rem);
  line-height: 1.08; font-weight: 400; letter-spacing: -0.005em; max-width: 18em;
}
.hero p.lede { margin: 0; max-width: 36em; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--ink-soft); }
.rule-copper { width: 62px; height: 3px; background: var(--copper); margin: 0 0 30px; }

/* photograph bands */
.photo-band { line-height: 0; background: var(--charcoal); }
.photo-band img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.photo-band.tall img { max-height: 520px; }

/* ---------- sections ---------- */
section { padding: clamp(56px, 8vw, 92px) 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }
h2 { margin: 0 0 8px; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
h2 + p.section-lede {
  margin: 0 0 36px; max-width: 40em; font-family: var(--serif);
  font-size: clamp(1.35rem, 3.3vw, 1.85rem); line-height: 1.34; color: var(--charcoal);
}
h3 { margin: 0 0 7px; font-family: var(--serif); font-size: 1.22rem; font-weight: 400; letter-spacing: 0.005em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
.measure { max-width: 42em; color: var(--ink-soft); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 40px 48px; }
.grid .item { border-top: 2px solid var(--charcoal); padding-top: 15px; }
.grid .item p { color: var(--ink-soft); font-size: 0.955rem; margin: 0; }

/* equipment class cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 48px; }
.card { border-top: 2px solid var(--charcoal); padding-top: 15px; }
.card h3 { margin-top: 0; }
.card p { color: var(--ink-soft); font-size: 0.955rem; }

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 36px 48px; }
ol.steps li { counter-increment: step; border-top: 2px solid var(--charcoal); padding-top: 14px; }
ol.steps li::before { content: counter(step, upper-roman); display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--charcoal); letter-spacing: 0.08em; margin-bottom: 6px; }
ol.steps li p { color: var(--ink-soft); font-size: 0.955rem; margin: 0; }

/* facts table */
table.facts { border-collapse: collapse; width: 100%; max-width: 680px; font-size: 0.98rem; }
table.facts th, table.facts td { text-align: left; vertical-align: top; padding: 11px 0; border-top: 1px solid var(--rule); }
table.facts th { width: 38%; font-weight: 600; color: var(--ink-soft); padding-right: 18px; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
table.facts tr:last-child td, table.facts tr:last-child th { border-bottom: 1px solid var(--rule); }

address { font-style: normal; line-height: 1.7; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--charcoal); color: #fff; text-decoration: none;
  padding: 14px 26px; font-size: 0.93rem; letter-spacing: 0.06em; border: 2px solid var(--charcoal);
}
.btn:hover { border-color: var(--copper); color: #fff; }
.btn.ghost { background: transparent; color: var(--charcoal); }
.btn.ghost:hover { border-color: var(--copper); color: var(--charcoal); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- forms ---------- */
form.line { max-width: 640px; margin-top: 28px; }
form.line label, .field label {
  display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
form.line input[type="text"], form.line input[type="tel"], form.line input[type="email"], form.line textarea, form.line select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--input-border); border-radius: 0; padding: 12px 13px; margin-bottom: 22px;
}
form.line textarea { min-height: 160px; resize: vertical; }
form.line input:focus, form.line textarea:focus, form.line select:focus { outline: 2px solid var(--copper); outline-offset: -2px; border-color: var(--copper); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.req { color: var(--charcoal); margin-left: 2px; }
.form-note { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 18px; }
form.line fieldset { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
form.line legend { padding: 0; margin: 0 0 14px; font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
form.line fieldset + fieldset { margin-top: 18px; }
form.line .sending { opacity: 0.6; pointer-events: none; }
#form-notice:focus { outline: 2px solid var(--copper); outline-offset: 2px; }
.notice { border-left: 3px solid var(--copper); background: #fff; padding: 14px 18px; margin-bottom: 26px; font-size: 0.95rem; color: var(--ink-soft); }
.notice.bad { border-left-color: #8E2C1E; }
.notice.good { border-left-color: #2F6B3A; }
/* classes that replaced inline style attributes (the CSP blocks style="") */
form.line.wide { max-width: 760px; }
form.line textarea.short { min-height: 110px; }
.after-form { margin-top: 26px; }
.certify { margin: 8px 0 18px; }
form.line .certify label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--ink-soft); }
form.line .certify input[type="checkbox"] { margin-top: 5px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--charcoal); }

/* ---------- footer ---------- */
footer.site { background: var(--charcoal); color: #C9CCD0; padding: 44px 0 40px; font-size: 0.9rem; }
footer.site img.lockup { width: 220px; margin-bottom: 22px; }
footer.site a { color: #E4B48F; }
footer.site p a { display: inline-block; padding: 4px 0; }
footer.site a:hover { color: #fff; }
footer.site .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 40px; }
footer.site .legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid #3A3F45; color: var(--field-gray); font-size: 0.82rem; }


/* ---------- home: the hero film ----------
   One band, one screen tall under the masthead (the masthead scrolls away like every other page;
   nothing is pinned). Without html.motion (no JavaScript, reduced motion) or until the first 3D
   frame is drawn, it is the still image rendered from the scene with the headline knocked out in
   white at the bottom left. Once the scene draws (html.has-3d) the canvas fades in over the still,
   site.js sets .is-film, and the captions and the Pause/Play/Replay controls appear bottom right.
   The headline, lede and buttons stay visible and clickable the whole time. */
.scene { background: var(--charcoal); color: #fff; padding: 0; border-bottom: 0; }
.scene-pin { position: relative; height: calc(100svh - var(--mast-h, 119px)); min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; }
.scene-still { position: absolute; inset: 0; }
.scene-still img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; }
.scene3d { position: absolute; inset: 0; }
.scene3d canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.has-3d .scene3d canvas { opacity: 1; }
.has-3d .scene-still { visibility: hidden; }
.scene.rewind .scene3d canvas { opacity: 0; transition: opacity .25s ease; }
.scene-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(35,39,44,.92) 0%, rgba(35,39,44,.55) 30%, rgba(35,39,44,0) 58%); }
.scene .wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; gap: 28px 48px; padding-top: 40px; padding-bottom: clamp(44px, 6vw, 76px); }
.scene-copy { max-width: 34em; }
.scene .rule-copper { margin-bottom: 26px; }
.scene h1 { margin: 0 0 20px; font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.005em; color: #fff; }
.scene p.lede { margin: 0; max-width: 32em; font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: #C9CCD0; }
.scene .btn { background: #fff; color: var(--charcoal); border-color: #fff; }
.scene .btn:hover { border-color: var(--copper); }
.scene .btn.ghost { background: transparent; color: #fff; border-color: #fff; }
.scene .btn.ghost:hover { border-color: var(--copper); }
.scene a:focus-visible, .scene .btn:focus-visible, .scene button:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
/* captions and controls: the panel takes its room as soon as the bundle is on its way
   (.will-film, so the copy does not jump when the film starts) and shows once it runs (.is-film) */
.story-panel { display: none; flex-direction: column; justify-content: flex-end; gap: 18px; }
.will-film .story-panel { display: flex; visibility: hidden; }
.is-film .story-panel { visibility: visible; }
.story { list-style: none; margin: 0; padding: 0; display: grid; align-items: end; pointer-events: none; }
.story-step { grid-area: 1 / 1; max-width: 30em; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.story-step.on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s ease .1s, transform .55s ease .1s, visibility 0s; }
.story-step h3 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.15; font-weight: 400; color: #fff; }
.story-step h3::before { content: ""; display: block; width: 62px; height: 3px; background: var(--copper); margin-bottom: 16px; }
.story-step p { margin: 0; max-width: 30em; font-size: 0.98rem; line-height: 1.5; color: #C9CCD0; }
.story-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px 14px; flex-wrap: wrap; }
.story-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; padding: 0 14px; margin: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.55); background: rgba(35,39,44,.55); color: #fff;
  font-family: var(--sans); font-size: 0.86rem; letter-spacing: 0.06em; line-height: 1; transition: border-color .2s ease; }
.story-toggle:hover { border-color: var(--copper); }
.story-toggle svg { width: 12px; height: 12px; fill: currentColor; stroke: currentColor; display: none; }
.story-toggle[data-state="pause"] .i-pause, .story-toggle[data-state="play"] .i-play, .story-toggle[data-state="replay"] .i-replay { display: block; }
.story-toggle-text { min-width: 3.4em; text-align: left; }
.story-dots { display: flex; align-items: center; }
.story-dots button { position: relative; width: 28px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; }
.story-dots button::before { content: ""; position: absolute; left: 10px; top: 18px; width: 8px; height: 8px; background: rgba(255,255,255,.45); transition: background-color .3s ease, transform .3s ease; }
.story-dots button:hover::before { background: #fff; }
.story-dots button[aria-current]::before { background: var(--copper); transform: scale(1.25); }
/* the tel: chip, top right of the band, always there */
.scene-call { position: absolute; z-index: 2; right: 22px; top: 18px; display: inline-block; color: #fff; text-decoration: none;
  font-size: 0.86rem; letter-spacing: 0.06em; padding: 9px 14px; border: 1px solid rgba(255,255,255,.55); background: rgba(35,39,44,.55); transition: border-color .2s ease; }
.scene-call:hover { border-color: var(--copper); }
.still-render .scene .wrap, .still-render .scene-shade, .still-render .scene-call { opacity: 0 !important; }
/* wide screens: copy bottom left, captions and controls in a column bottom right, clear of the mark */
@media (min-width: 901px) {
  .scene .wrap { grid-template-columns: minmax(0, 34em) minmax(16rem, 22rem); justify-content: space-between; }
}

/* ---------- reveals (site.js adds .rv to items below the fold, .in when they arrive) ---------- */
.motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.motion .rv.in { opacity: 1; transform: none; }
.motion .rv:focus-within { opacity: 1; transform: none; transition: none; }
.motion .draw > .rv { position: relative; border-top-color: transparent; }
.motion .draw > .rv::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--charcoal);
  transform: scaleX(0); transform-origin: left center; transition: transform 1s cubic-bezier(.4,0,.2,1); transition-delay: inherit;
}
.motion .draw > .rv.in::after { transform: scaleX(1); }

/* ---------- portal ---------- */
.portal-head { padding: 44px 0 30px; border-bottom: 1px solid var(--rule); }
.portal-head h1 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.portal-head p { color: var(--ink-soft); margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 8px; }
.tile { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--copper); padding: 18px 20px; }
.tile .k { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.tile .v { font-family: var(--serif); font-size: 1.7rem; margin-top: 4px; }
.tile .s { color: var(--ink-soft); font-size: 0.9rem; }
.tablewrap { overflow-x: auto; }
table.sched { border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 640px; background: #fff; }
table.sched th, table.sched td { padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
table.sched th { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--charcoal); }
table.sched th:first-child, table.sched td:first-child, table.sched th.l, table.sched td.l { text-align: left; }
table.sched tr.paid td { color: var(--ink-soft); }
table.sched tr.next td { background: #FBF3EC; }
table.sched td .tag { display: inline-block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--field-gray); color: var(--ink-soft); }
table.sched tr.paid td .tag { border-color: #2F6B3A; color: #2F6B3A; }
ul.docs { list-style: none; padding: 0; margin: 0; }
ul.docs li { border-top: 1px solid var(--rule); padding: 12px 0; }
ul.docs li:last-child { border-bottom: 1px solid var(--rule); }
.precedence { font-size: 0.9rem; color: var(--ink-soft); border-top: 1px solid var(--rule); padding-top: 18px; max-width: 46em; }
.status-line { background: #fff; border: 1px solid var(--rule); padding: 14px 18px; margin-bottom: 22px; }
.status-line strong { font-weight: 600; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
section .two { row-gap: 36px; }

@media (max-width: 600px) {
  .hero { padding: 48px 0 42px; }
  section { padding: 44px 0; }
  .masthead .wrap { padding-top: 16px; padding-bottom: 16px; gap: 8px 28px; }
  .masthead img.lockup { width: 210px; }
  nav.main { gap: 0 24px; }
  nav.main a { padding: 10px 0 8px; }
  .btn { padding: 13px 20px; }
  .photo-band img { max-height: 220px; }
  /* The masthead scrolls away on phones (it is static everywhere); the film band is one full
     screen. The mark still never sits on the picture. */
  .home .masthead { position: static; }
  .scene-pin { height: 100svh; min-height: 0; }
  .scene-still img { object-position: 74% 50%; }
  .scene .wrap { padding-bottom: 36px; gap: 22px; }
  .story-step h3 { font-size: 1.35rem; margin-bottom: 0; }
  .story-step p { display: none; } /* phones: the caption line only, so the picture shows through */
  .scene h1 { font-size: 2rem; margin-bottom: 16px; }
  .scene p.lede { font-size: 0.95rem; line-height: 1.5; }
  .scene .rule-copper { margin-bottom: 20px; }
  .scene-copy .btn-row { margin-top: 22px; }
  .btn { max-width: 100%; overflow-wrap: anywhere; }
}
@media (max-width: 600px) and (min-height: 660px) {
  /* At scroll 0 the band starts under the masthead, so the headline and buttons sit one
     masthead-height up from the bottom and stay on a 667px screen; the captions and controls
     live in that band (44 = the 22px gap above the panel plus 22px under the controls). */
  .will-film .story-panel { min-height: calc(var(--mast-h, 0px) - 44px); }
  .scene-shade { background: linear-gradient(to top, rgba(35,39,44,.94) 0%, rgba(35,39,44,.75) 46%, rgba(35,39,44,0) 66%); }
}
@media (max-width: 600px) {
  .scene-call { top: 14px; right: 14px; }
}
@media print {
  .motion .rv { opacity: 1 !important; transform: none !important; }
  .scene-pin { position: static; height: auto; min-height: 0; }
  .scene3d, .story-panel, .scene-call, .skip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .story-panel { display: none !important; }
}