/* ==========================================================================
   marshal.co.ls — single page for the Marshal products.
   Builds on marshal.css (tokens, nav, footer) + headway.css (hero collage).
   ========================================================================== */

.page-mk .hw-hero__lede em { color: var(--text); font-style: normal; text-decoration: underline; text-decoration-color: rgba(241,239,232,.35); text-underline-offset: 6px; }
.foot__base a:not(.brand):not(.mono) { text-decoration: underline; text-underline-offset: 3px; }
.foot__brand .brand__by { display: inline; }
.mk-lineup { padding-top: clamp(90px, 10vw, 150px); }

/* Product sections ------------------------------------------------------ */
.mk-product { position: relative; background: var(--ink); padding-bottom: clamp(90px, 10vw, 150px); }
.mk-band { background: var(--p); color: var(--pi); padding: clamp(80px, 10vw, 140px) 0 clamp(160px, 18vw, 260px); border-radius: 32px 32px 0 0; }
.mk-band__kicker { opacity: .7; }
.mk-band__name { font-family: var(--display); font-weight: 750; font-variation-settings: "wdth" 80; font-size: clamp(3rem, 10vw, 10rem); line-height: .88; letter-spacing: -.05em; margin: 18px 0 34px; }
.mk-band__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: end; }
.mk-band__lede { font-size: clamp(17px, 1.4vw, 19px); max-width: 60ch; opacity: .85; }
.mk-proof { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; margin: 34px 0 0; opacity: .9; }
.mk-btn { background: var(--pi); color: var(--p); }
.mk-btn::before { background: #fff; }
.mk-btn:hover { color: #0c0d0c; }
.mk-band .btn--line:hover > span { color: var(--p); }
@media (max-width: 860px) { .mk-band__row { grid-template-columns: 1fr; } }

.mk-shot { margin-top: calc(-1 * clamp(110px, 13vw, 200px)); position: relative; z-index: 1; }
.mk-shot img { max-height: 82vh; object-fit: cover; object-position: top left; }

.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: clamp(50px, 6vw, 90px); }
.mk-stats .stat__label { color: var(--text-dim); }
.mk-stats .stat__value { color: var(--p); }
.mk-stats .stat + .stat { border-left-color: var(--line); }
@media (max-width: 720px) {
    .mk-stats { grid-template-columns: 1fr; }
    .mk-stats .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; margin-top: 24px; }
}

.mk-rail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin: clamp(70px, 8vw, 120px) 0 30px; }
.mk-rail-title { font-family: var(--display); font-weight: 650; font-variation-settings: "wdth" 86; font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.035em; max-width: 20ch; }
.mk-rail-nav { display: flex; gap: 10px; flex: none; }
.mk-rail-nav button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; transition: background .3s, color .3s, border-color .3s; }
.mk-rail-nav button:hover { background: var(--p); color: var(--pi); border-color: var(--p); }

.mk-rail {
    display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px var(--gutter) 28px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin; scrollbar-color: var(--p) transparent;
    cursor: grab;
}
.mk-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.mk-rail.is-drag img { pointer-events: none; }
.mk-rail:focus-visible { outline-offset: -4px; }
.mk-slide { flex: none; width: min(78vw, 720px); scroll-snap-align: start; display: grid; gap: 22px; align-content: start; }
.mk-slide .frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.mk-slide__text { display: grid; gap: 10px; max-width: 54ch; }
.mk-slide__text .mono { color: var(--text-dim); }
.mk-slide__text .mono span { color: var(--p); margin-right: 8px; }
.mk-slide__text h4 { margin: 0; font-family: var(--display); font-weight: 650; font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.025em; line-height: 1.1; }
.mk-slide__text p:not(.mono) { color: var(--text-dim); font-size: 15.5px; }
.mk-slide--phone { width: min(62vw, 260px); }
.mk-slide--phone .phone__device { margin: 8px; }

.mk-feats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: clamp(60px, 7vw, 100px); }
.mk-feats article { padding: 28px 26px 32px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.mk-feats article:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px solid var(--line); }
.mk-feats .mono { color: var(--p); }
.mk-feats h4 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.mk-feats p { color: var(--text-dim); font-size: 15px; }
@media (max-width: 960px) {
    .mk-feats { grid-template-columns: 1fr 1fr; }
    .mk-feats article:nth-child(n) { padding-left: 0; border-left: 0; }
    .mk-feats article:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .mk-feats { grid-template-columns: 1fr; }
    .mk-feats article:nth-child(2n) { padding-left: 0; border-left: 0; }
}

.mk-more { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; color: var(--text-dim); }
.mk-more__link { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 1.8vw, 1.6rem); color: var(--p); letter-spacing: -.02em; border-bottom: 1px solid currentColor; padding-bottom: 4px; transition: opacity .3s; }
.mk-more__link:hover { opacity: .75; }

/* Get started ----------------------------------------------------------- */
.mk-start { background: var(--paper); color: var(--text-ink); padding: clamp(90px, 11vw, 170px) 0; }
.mk-start .eyebrow { color: var(--text-ink-dim); }
.mk-start__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mk-start__card { background: var(--p); color: var(--pi); border-radius: 24px; padding: clamp(28px, 3.4vw, 44px); display: grid; gap: 16px; align-content: start; min-height: 320px; transition: transform .6s var(--ease); }
.mk-start__card:hover { transform: translateY(-6px) rotate(-.4deg); }
.mk-start__card .mono { opacity: .7; }
.mk-start__card h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 84; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: .98; letter-spacing: -.035em; }
.mk-start__card > p:not(.mono) { opacity: .85; max-width: 48ch; }
.mk-start__ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.mk-signin { font-weight: 550; border-bottom: 1px solid currentColor; }
@media (max-width: 820px) { .mk-start__grid { grid-template-columns: 1fr; } }

/* Contact --------------------------------------------------------------- */
.mk-contact .closing__title { margin: 24px 0 clamp(40px, 6vw, 70px); }
.mk-contact__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.mk-contact__item {
    display: grid; gap: 10px; padding: 28px 24px 30px 0;
    font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.5rem); letter-spacing: -.015em; overflow-wrap: anywhere;
    transition: color .3s;
}
.mk-contact__item + .mk-contact__item { padding-left: 24px; border-left: 1px solid var(--line); }
.mk-contact__item .mono { color: var(--text-dim); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.mk-contact__item:hover { color: var(--text-dim); }
@media (max-width: 900px) {
    .mk-contact__grid { grid-template-columns: 1fr 1fr; }
    .mk-contact__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
    .mk-contact__grid { grid-template-columns: 1fr; }
    .mk-contact__item + .mk-contact__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Hero — edge-to-edge wordmark, product stage, edge labels, tabs
   ========================================================================== */
.mk-hero { --g: #4f7cff; position: relative; min-height: 100svh; display: flex; overflow: hidden; padding: 92px 0 26px; isolation: isolate; }
.mk-hero__glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(42% 46% at 50% 62%, color-mix(in srgb, var(--g) 34%, transparent), transparent 70%),
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 64px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
    transition: background .9s ease;
}
.mk-hero__inner { width: 100%; padding: 0 var(--gutter); display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
.mk-hero__word {
    font-family: var(--display); font-weight: 800;
    font-variation-settings: "wght" 800, "wdth" 100, "opsz" 96;
    font-size: 17vw; line-height: .76; letter-spacing: -.05em;
    text-align: center; white-space: nowrap; margin: 0;
}
.mk-hero__word .char { display: inline-block; }

.mk-hero__mid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.mk-hero__meta { display: grid; gap: 12px; align-content: center; }
.mk-hero__meta--r { justify-items: end; text-align: right; }
.mk-hero__idx { color: var(--text-dim); }
.mk-hero__idx span { color: var(--g); transition: color .6s; }
.mk-swap { overflow: hidden; padding-bottom: .08em; }
.mk-hero__name { font-family: var(--display); font-weight: 700; font-variation-settings: "wdth" 82; font-size: clamp(2.2rem, 4.2vw, 4.4rem); line-height: .95; letter-spacing: -.045em; }
.mk-hero__kicker { color: var(--text-dim); max-width: 26ch; line-height: 1.5; }
.mk-hero__sum { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-dim); max-width: 30ch; }
.mk-hero__go { display: inline-flex; gap: 8px; align-items: center; font-weight: 550; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.mk-hero__go i { font-style: normal; transition: transform .4s var(--ease); }
.mk-hero__go:hover i { transform: translateY(3px); }

.mk-stage {
    display: block; position: relative; z-index: 2;
    width: min(42vw, calc((100svh - var(--wordh, 23vw) - 262px) * 1.6)); min-width: 300px;
    border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
    transform-origin: 50% 50%; will-change: transform;
}
.mk-stage__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f3f3f1; border-bottom: 1px solid #e3e3df; }
.mk-stage__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d6d5d0; }
.mk-stage__screens { position: relative; aspect-ratio: 16 / 10; background: #f7f7f5; }
.mk-stage__screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; clip-path: inset(0 0 0 100%); }
.mk-stage__screens img:first-child { clip-path: inset(0 0 0 0); }

.mk-hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; border-top: 1px solid var(--line); padding-top: 18px; }
.mk-hero__tag { color: var(--text-dim); max-width: 46ch; font-size: 15px; }
.mk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); gap: 14px; }
.mk-tab { text-align: left; display: grid; gap: 10px; font-size: 15px; color: var(--text-dim); transition: color .4s; }
.mk-tab .mono { font-size: 10.5px; margin-right: 4px; }
.mk-tab:hover, .mk-tab.is-on { color: var(--text); }
.mk-tab__bar { height: 2px; background: var(--line); overflow: hidden; }
.mk-tab__bar span { display: block; height: 100%; background: var(--t); transform-origin: left; transform: scaleX(0); }
.mk-tab.is-on .mk-tab__bar span { transform: scaleX(var(--p, 0)); }
.reduced .mk-tab.is-on .mk-tab__bar span, .no-js .mk-tab.is-on .mk-tab__bar span { transform: scaleX(1); }

@media (max-width: 900px) {
    .mk-hero { min-height: 0; padding-top: 96px; }
    .mk-hero__mid { grid-template-columns: 1fr; }
    .mk-stage { order: -1; width: 100%; min-width: 0; }
    .mk-hero__meta--r { justify-items: start; text-align: left; }
    .mk-hero__foot { grid-template-columns: 1fr; }
    .mk-tabs { grid-template-columns: repeat(2, 1fr); }
}

.js:not(.reduced) [data-mk-word] { visibility: hidden; }