/* Morgan Finger bio page. Loaded by index.html; keep the two together. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/Inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Special Gothic Expanded One'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/SpecialGothicExpandedOne-400.woff2') format('woff2'); }
:root {
--max-width: 1920px;
--radius: 12px;
--blue: #1d49f7;
--nav-bg: #f9faff;
--footer-bg: #e3f1ff;
--lime: #cefb5b;
--lime-soft: #dfff83;
--ink: #000;
--gray: #6b7280;
--display: 'Special Gothic Expanded One', 'Arial Narrow', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; }
/* Fluid page edge: 20px on phones, 80px on a 1920px display. The old
1280px cap left 320px of unused space on each side of a 16:9 monitor. */
.wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(20px, 4.1667vw, 80px); }
/* Header */
header { background: #fff; border-bottom: 1px solid #eef0f4; position: sticky; top: 0; z-index: 50; }
/* marinesource.com's header spans the viewport less 80px gutters rather than
sitting in the 1280px content column, so the nav starts further left. */
header .wrap { max-width: calc(100% - 160px); padding-left: 0; padding-right: 0; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
a.logo { display: inline-flex; align-items: center; text-decoration: none; transition: opacity .15s ease; }
a.logo:hover { opacity: 0.62; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
/* Header type lifted from marinesource.com: Inter 16px/500, letter-spacing -0.32px */
/* Their items sit 8px apart with ~14px padding inside each, not a wide gap. */
.nav-links { gap: 8px; font-size: 16px; font-weight: 500; letter-spacing: -0.32px; line-height: 1.1; }
.nav-links > a, .nav-links .nav-top { padding: 8px 14px; border-radius: 100px; }
/* Element sizes measured off marinesource.com's header */
header a.logo svg { width: 98px; height: 36px; }
header { border-bottom: none; }
.nav-links a, .nav-links .nav-top { cursor: pointer; text-decoration: none; color: inherit; white-space: nowrap; }
/* The live site's hover (boats-web `.textButton.textBlack:hover`): a grey pill behind the
item, no colour shift and no transition. The chevron flips while its item is open. */
.nav-links > a:hover, .nav-links .nav-top:hover { background: #f6f6f6; }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }
.chev { width: 18px; height: 18px; flex: none; }
.nav-item { position: relative; display: inline-flex; }
.nav-item .nav-top { display: inline-flex; align-items: center; gap: 5px; }
.menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 210px;
background: #fff; border: 1px solid #eef0f4; border-radius: 12px; padding: 8px; display: grid; gap: 1px;
box-shadow: 0 18px 44px rgba(16, 24, 64, 0.14); opacity: 0; visibility: hidden;
transition: opacity .16s ease, visibility .16s ease; z-index: 60; }
.nav-item:hover .menu, .nav-item:focus-within .menu { opacity: 1; visibility: visible; }
.menu a { padding: 9px 12px; border-radius: 8px; font-size: 15px; font-weight: 400; letter-spacing: normal; }
.menu a:hover { background: #edf7ff; }
/* Footer, matching the live site: social row, collapsible sections, legal bar */
.fsocials { display: flex; gap: 14px; padding-bottom: 30px; }
.fsoc { color: var(--ink); display: inline-flex; transition: opacity .15s ease; }
.fsoc:hover { opacity: 0.6; }
.fsoc svg { width: 26px; height: 26px; }
.fcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 1px solid rgba(0,0,0,0.08); }
.fcol { border-bottom: 1px solid rgba(0,0,0,0.08); }
.fcol > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 20px 22px 20px 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.fcol > summary::-webkit-details-marker { display: none; }
.fcol[open] > summary .chev { transform: rotate(180deg); }
.fcol > summary .chev { transition: transform .18s ease; color: #4b5563; }
.fcol-links { display: grid; gap: 9px; padding: 0 0 22px; font-size: 13.5px; }
.fcol-links a { color: #4b5563; text-decoration: none; }
.fcol-links a:hover { color: var(--blue); }
.foot { padding-top: 30px; }
/* Below 1160px the six nav items no longer fit inside the 80px gutters (they need 1143px of
viewport), so fall back to 24px gutters, which hold them down to the 1100px compass switch. */
@media (max-width: 1160px) {
header .wrap { max-width: var(--max-width); padding-left: 24px; padding-right: 24px; }
}
/* ── MarineSource mobile menu. Below 1100px — the live site switches at 1024px,
but our six items need the extra width — the inline nav gives way to a
compass button that opens a full-screen menu, copied
from marinesource.com's mobile navigation: compass trigger (needle spins 405°
when open), rise-in animation, explore rows in the display face, then the
type/manufacturer columns. Values are boats-web's own, from
`mobile-navigation-menu.module.css` and `compass-menu.module.css`. ── */
.menu-btn { display: none; align-items: center; justify-content: center; background: none; border: 0; padding: 8px; cursor: pointer; color: #000; }
.menu-btn svg { width: 24px; height: 24px; display: block; }
.menu-btn .needle { transform-box: view-box; transform-origin: center; transform: rotate(0deg); transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.menu-btn[aria-expanded="true"] .needle, body:has(.mobile-menu:popover-open) .menu-btn .needle { transform: rotate(405deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: #fff; display: flex; flex-direction: column; animation: menu-in 0.3s ease; }
/* The menu is a native popover, so the compass opens it and the X and Escape close it with no
script at all: marinesource.com's CSP blocks page.js behind the proxy. These undo the
browser's default popover box so it stays the full-screen sheet. */
.mobile-menu { width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: inherit; overflow: visible; }
.mobile-menu:not(:popover-open) { display: none; }
body:has(.mobile-menu:popover-open) { overflow: hidden; }
@keyframes menu-in {
from { opacity: 0.4; transform: translateY(6%); }
to { opacity: 1; transform: translateY(0); }
}
/* width: 100% because the menu is a flex column and `.wrap`'s auto margins would otherwise
shrink the row to fit-content instead of stretching it. */
.mm-top { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 64px; flex: none; }
.mm-close { display: inline-flex; background: none; border: 0; padding: 8px; cursor: pointer; color: #000; }
.mm-close svg { width: 24px; height: 24px; display: block; }
.mm-scroll { overflow-y: auto; padding: 40px 0 24px; }
.mm-nav { display: flex; flex-direction: column; }
.mm-label { display: block; padding: 4px 24px 10px; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: normal; color: #757575; }
.mm-item { display: flex; align-items: center; gap: 14px; max-width: 420px; padding: 12px 24px; font-family: var(--display); font-size: 18px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: #000; text-decoration: none; }
.mm-item svg { width: 22px; height: 22px; flex: none; }
.mm-item:hover { background: #eef2f7; }
.mm-sub a { display: block; max-width: 420px; padding: 9px 24px 9px 60px; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: normal; color: #000; text-decoration: none; }
.mm-sub a:hover { background: #eef2f7; }
.mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; margin-top: 28px; max-width: 420px; }
.mm-col { display: flex; flex-direction: column; }
.mm-col a { display: block; padding: 9px 12px 9px 24px; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; color: #000; text-decoration: none; }
.mm-col a:hover { background: #eef2f7; }
.mm-col + .mm-col .mm-label, .mm-col + .mm-col a { padding-left: 12px; }
@media (max-width: 1100px) {
.nav-links { display: none; }
.menu-btn { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
.mobile-menu { animation: none; }
.menu-btn .needle { transition: none; }
}
@media (max-width: 900px) {
.fcols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
.fcols { grid-template-columns: 1fr; }
}
/* Hero */
.hero { background: var(--nav-bg); border-bottom: 1px solid #eef0f4; }
/* Top-aligned, not centred. The photo is taller than the copy, so centring pushed the eyebrow
half the difference further down — 144px below the header against the photo's 72px — and read
as a gap under the nav rather than as a choice. Aligning to the top starts both columns on the
same line. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(360px, 560px); gap: clamp(48px, 5vw, 96px); justify-content: center; align-items: start; padding-block: clamp(48px, 5vw, 80px); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--lime); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 24px; }
.eyebrow svg { width: 14px; height: 14px; }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; }
.hero-sub { font-size: 19px; line-height: 1.6; color: #374151; margin-top: 22px; max-width: 540px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.btn-dark { background: #000; color: #fff; border-radius: 999px; padding: 14px 28px; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
.btn-line { border: 1.5px solid #000; border-radius: 999px; padding: 13px 26px; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; }
/* 500 rather than 560. The columns are top-aligned, so the photo's height is what decides how
far the hero runs past the copy: at 560 wide it stood 644 tall against 500 of text and came
within 20px of the fold on an 800px window. At 500 it is 575, which keeps the same crop --
the aspect ratio is untouched -- and lands the two columns within 75px of each other. */
.hero-photo { position: relative; width: min(100%, 500px); justify-self: end; }
.hero-photo img { border-radius: var(--radius); aspect-ratio: 4/4.6; object-fit: cover; width: 100%; box-shadow: 0 24px 60px rgba(16, 24, 64, 0.14); }
.hero-photo .tag { position: absolute; left: 18px; bottom: 18px; background: rgba(0,0,0,0.82); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; line-height: 1.45; backdrop-filter: blur(4px); }
.hero-photo .tag strong { display: block; font-size: 14px; }
/* Social bar */
.social-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #e2e6ee; background: #fff; border-radius: 999px; padding: 9px 17px; font-size: 13.5px; font-weight: 500; }
.chip svg { width: 16px; height: 16px; flex: none; }
.chip small { color: var(--gray); font-weight: 400; }
a.chip, a.contact-row, a.btn-line, a.btn-dark { text-decoration: none; color: inherit; }
a.btn-dark { color: #fff; }
a.chip:hover { border-color: #c3cadb; }
.row-break { flex: 0 0 100%; height: 0; margin: 0; }
.strip-ms { justify-content: flex-start; }
.strip-label { flex: 0 0 100%; margin-bottom: -3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
/* Sections */
section { padding: 76px 0; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; line-height: 1.05; }
/* About */
.about-layout { display: grid; grid-template-columns: minmax(540px, 720px) minmax(420px, 880px); gap: clamp(48px, 4vw, 80px); justify-content: space-between; align-items: start; margin-top: 30px; }
.about-copy { max-width: 70ch; }
.about-copy p { font-size: 16.5px; line-height: 1.75; color: #374151; }
.about-copy p + p { margin-top: 20px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.fact { min-height: 156px; background: var(--nav-bg); border: 1px solid #eef0f4; border-radius: var(--radius); padding: 24px 22px; }
.fact b { font-family: var(--display); font-weight: 400; font-size: 26px; display: block; }
.fact span { font-size: 13.5px; color: var(--gray); display: block; margin-top: 6px; line-height: 1.45; }
.fact.lime { background: var(--lime-soft); border-color: transparent; }
/* Videos */
.videos { background: var(--nav-bg); border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; }
.videos-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.videos-head p { color: #4b5563; font-size: 16px; margin-top: 14px; max-width: 620px; line-height: 1.65; }
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.vid { background: #fff; border: 1px solid #eef0f4; border-radius: var(--radius); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.vid:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 24, 64, 0.10); }
/* Reveal: opacity only. Nothing shifts position as you scroll, so there is
nothing for the eye to track and nothing to disagree with the inner ear. */
html { scroll-behavior: smooth; }
.reveal-ready [data-reveal] { opacity: 0; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-ready [data-reveal].shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal-ready [data-reveal] { opacity: 1; transition: none; }
}
a.vid { display: block; text-decoration: none; color: inherit; }
.vid.feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; }
.vid.feature .vid-meta { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }
.vid.feature .kicker { margin-bottom: 10px; }
.vid.feature h3 { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.15; text-transform: uppercase; }
.vid.feature .vid-meta p { font-size: 14px; margin-top: 12px; }
.thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .dur { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,0.85); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 5px; }
.thumb .badge { position: absolute; left: 10px; top: 10px; background: var(--lime); color: #000; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; }
.thumb .badge, .thumb .dur { z-index: 2; }
.thumb .preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.thumb .preview.on { opacity: 1; }
.vol { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: none; align-items: center; gap: 1px; background: rgba(0,0,0,0.82); border-radius: 9px; padding: 4px 5px; }
.vid:hover .vol { display: inline-flex; }
.vol .key { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; color: #fff; font-weight: 700; font-size: 14px; line-height: 1; user-select: none; }
.vol .key:hover { background: rgba(255,255,255,0.2); }
.vol svg { width: 15px; height: 15px; fill: #fff; }
.vol .wave { display: none; }
.vol.audible .wave { display: block; }
.vol .bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; margin: 0 5px; }
.vol .bars i { width: 3px; border-radius: 1px; background: rgba(255,255,255,0.28); }
.vol.audible .bars i.on { background: var(--lime); }
.thumb .sound { position: absolute; left: 10px; bottom: 10px; z-index: 3; width: 30px; height: 30px;
border-radius: 9px; display: none; place-items: center; background: rgba(0,0,0,0.6); color: #fff; }
.vid.playing .sound { display: grid; }
.thumb .cue { position: absolute; left: 10px; bottom: 46px; z-index: 3; display: none; padding: 5px 9px; border-radius: 8px;
background: rgba(0,0,0,0.72); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.vid.quiet.playing .cue { display: inline-block; }
.thumb .sound svg { width: 16px; height: 16px; fill: currentColor; }
.thumb .sound .wave { display: none; }
.thumb .sound.on .wave { display: block; }
/* Full view: a card's own preview grows to fill the screen, a proper player
takes over behind it, and a swipe up or down throws it away. Everything
here is fixed at the root so the preview can float free of its card. */
.viewer { position: fixed; inset: 0; z-index: 10000; display: none; touch-action: none; }
.viewer.open { display: block; }
.viewer-back { position: absolute; inset: 0; background: rgba(4, 7, 18, 0.96); opacity: 0; transition: opacity .3s ease; }
.viewer.open .viewer-back { opacity: 1; }
.viewer-player { position: fixed; border: 0; z-index: 10002; opacity: 0; background: #000;
transition: opacity .35s ease; }
.viewer-player.on { opacity: 1; }
.viewer-chrome { position: fixed; inset: 0; z-index: 10003; pointer-events: none; color: #fff; }
.viewer-handle { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%; width: 44px; height: 5px;
margin-left: -22px; border-radius: 3px; background: rgba(255,255,255,0.5); }
.viewer-close { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 42px; height: 42px;
border-radius: 50%; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 26px;
line-height: 1; cursor: pointer; pointer-events: auto; display: grid; place-items: center; }
.viewer-close:hover { background: rgba(255,255,255,0.26); }
.viewer-meta { position: absolute; left: 20px; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom));
text-align: center; font-size: 14px; line-height: 1.5; pointer-events: auto; }
.viewer-meta b { display: block; font-weight: 600; font-size: 15px; }
.viewer-meta a { color: var(--lime); text-decoration: none; }
.viewer-meta a:hover { text-decoration: underline; }
.vid.viewing { transform: none !important; } /* a transform would trap the fixed preview inside the card */
html.viewing, html.viewing body { overflow: hidden; }
.vid-meta { padding: 16px 18px 20px; }
.vid-meta h3 { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.vid-meta p { font-size: 13px; color: var(--gray); margin-top: 8px; }
/* Portrait reels: hover to play on a computer, autoplay in view on a phone */
.reels { background: var(--nav-bg); border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; }
/* A rail you swipe sideways, one video at a time, with a dot to say where you are. */
.reel-rail { position: relative; display: flex; gap: 24px; margin-top: 40px; overflow-x: auto;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 2px; }
.reel-rail::-webkit-scrollbar { display: none; }
.reel-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 22px; }
.reel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
background: #c4cad9; transition: background .2s ease, transform .2s ease; }
.reel-dots button:hover { background: #97a0b5; }
.reel-dots button.on { background: var(--ink); transform: scale(1.3); }
/* The rail's soft ends, and the hover-to-slide zones with their arrows. On a
computer, resting the pointer on either end glides the rail that way; the
arrows are there so nobody thinks they have to click. A side with nothing
more beyond it shows neither fade nor arrow. */
.reels { overflow-x: clip; } /* the zones reach into the page gutters */
/* The rail breaks out of the centered column to run the full width of the
window, so the videos use the space the old side margins wasted. The heading
and dots stay in the column; only the scrolling row goes edge to edge. Above
the phone breakpoint only, since a phone has no margin to reclaim. */
.rail-wrap { position: relative; }
@media (min-width: 621px) {
.rail-wrap { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.reel-rail { padding-left: 44px; padding-right: 44px; scroll-padding: 0 44px; }
}
.rail-fade { position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none;
transition: opacity .35s ease; }
.rail-fade.left { left: 0; background: linear-gradient(to right, var(--nav-bg), rgba(249, 250, 255, 0)); }
.rail-fade.right { right: 0; background: linear-gradient(to left, var(--nav-bg), rgba(249, 250, 255, 0)); }
.rail-wrap.at-start .rail-fade.left, .rail-wrap.at-end .rail-fade.right { opacity: 0; }
.rail-nav { position: absolute; top: 0; bottom: 0; z-index: 3; display: none; align-items: center;
width: calc((100vw - 100%) / 2 + 96px); transition: opacity .3s ease; }
.rail-nav.left { left: calc((100% - 100vw) / 2); justify-content: flex-end; padding-right: 26px; }
.rail-nav.right { right: calc((100% - 100vw) / 2); justify-content: flex-start; padding-left: 26px; }
.rail-wrap.at-start .rail-nav.left, .rail-wrap.at-end .rail-nav.right { opacity: 0; pointer-events: none; }
.rail-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff;
background: rgba(0, 0, 0, 0.28); opacity: 0.6; transition: opacity .25s ease, background .25s ease, transform .25s ease; }
.rail-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rail-nav:hover .rail-arrow { opacity: 1; background: rgba(0, 0, 0, 0.5); transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) { .rail-nav { display: flex; } }
/* A computer pins the section: the page's own scroll walks the rail sideways
and each reel grows as it reaches the middle, then settles back as it goes
past. Phones, narrow windows and anyone who has asked for less motion keep
the swipe rail and the hover arrows instead. .pinning is set from the
script, so nothing below applies until the mapping is actually running. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
/* The section becomes a tall track; its height is the rail's own travel,
set from the script. The padding would sit inside that height and push
the sums around, so it comes off and the stage does the centring. */
/* Sized off what is actually left of the window: the 420px is everything
else on the stage, head to dots, plus the header the stage sits under.
So the reels take all the room there is and never push the dots off. */
.reels.pinning { padding: 0; --media-h: clamp(250px, calc(100svh - 460px), 560px);
--card-w: calc(var(--media-h) * 9 / 16); }
.reels.pinning .pin-stage { position: sticky; top: 0; height: 100vh; height: 100svh;
padding-top: 68px; /* the site header pins over this, so keep clear of it */
padding-bottom: 12px;
display: grid; align-content: center; }
.reels.pinning .reel { flex: 0 0 var(--card-w); transform-origin: 50% 50%;
will-change: transform; transition: box-shadow .28s ease; }
.reels.pinning .reel-media { height: var(--media-h); }
.reels.pinning .reel:hover, .reels.pinning .reel.is-focus { box-shadow: 0 26px 60px rgba(16, 24, 64, 0.20); }
.reels.pinning .reel.is-focus { z-index: 2; }
/* Page scroll owns the rail while it is pinned, so the rail must not also
scroll on its own, and snapping would fight the mapping every frame.
Half a screen of side padding is what lets the first and last reels
reach the middle too; the block padding is headroom for the pop. */
.reels.pinning .reel-rail { overflow-x: hidden; scroll-snap-type: none; margin-top: 8px;
padding-block: 40px 8px;
padding-inline: calc(50% - var(--card-w) / 2);
scroll-padding: 0; }
.reels.pinning .reel-dots { margin-top: 4px; }
.reels.pinning .rail-nav { display: none; } /* the pin already does their job */
/* The head is competing with the reels for one screen, so it gets compact:
the button sits beside the heading rather than wrapping under it, and the
heading comes down a step so it still fits on one line beside it. Every
pixel saved here goes straight into the reels. */
.reels.pinning .videos-head p { max-width: 560px; margin-top: 10px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) {
.reels.pinning .videos-head { flex-wrap: nowrap; align-items: end; }
.reels.pinning .videos-head h2 { font-size: clamp(24px, 2.4vw, 34px); }
.reels.pinning .videos-head .btn-line { white-space: nowrap; flex: 0 0 auto; }
/* 332 rather than 420: the head on one line is 85px cheaper, and all of it
goes to the reels. */
.reels.pinning { --media-h: clamp(250px, calc(100svh - 332px), 560px); }
}
.reel { flex: 0 0 260px; scroll-snap-align: start; background: #fff; border: 1px solid #eef0f4;
border-radius: var(--radius); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.reel:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 24, 64, 0.10); }
.reel-media { position: relative; display: block; aspect-ratio: 9/16; background: #0d1220; text-decoration: none; }
.reel-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The poster attribute never returns once a video has played, so the
thumbnail is a real layer that lifts while playing. */
.reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 1; transition: opacity .25s ease; pointer-events: none; }
.reel.playing .reel-poster { opacity: 0; }
.reel-tag { position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,0.55); color: #fff; }
.reel-tag svg { width: 16px; height: 16px; }
.reel .sound { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; }
.reel .sound svg { width: 16px; height: 16px; fill: currentColor; }
.reel .sound .wave { display: none; }
.reel .sound.on .wave { display: block; }
/* Shown only while a reel plays muted because the browser refused sound before
the visitor's first click or tap. One click anywhere clears it. */
.reel .cue { position: absolute; right: 48px; bottom: 14px; display: none; padding: 5px 9px; border-radius: 8px;
background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.reel.quiet.playing .cue { display: inline-block; }
.reel-meta { padding: 13px 16px 16px; display: flex; align-items: baseline; gap: 8px; }
.reel-meta b { font-size: 14.5px; font-weight: 600; }
.reel-meta span { font-size: 12.5px; color: var(--gray); }
@media (max-width: 620px) {
/* One card centred, its neighbours peeking on both sides, the way a phone
carousel is expected to look; the side padding lets the first and last
cards centre too. */
.reel-rail { gap: 14px; margin-top: 28px; padding-left: 13%; padding-right: 13%; scroll-padding: 0 13%; }
.reel { flex: 0 0 100%; scroll-snap-align: center; } /* 100% of the padded box = 74% of the rail */
.reel-dots { margin-top: 18px; }
.rail-fade { width: 28px; } /* gentle: the peeking next card must still show */
}
/* Contact */
.contact-card { background: #000; color: #fff; border-radius: 18px; padding: 60px 56px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; }
.contact-card h2 { color: #fff; }
.contact-card p { color: #c7ccd6; font-size: 16px; line-height: 1.7; margin-top: 16px; max-width: 480px; }
.contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-list > .lime, .contact-list > .row--tt { grid-column: 1 / -1; }
.contact-row { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 15px 18px; font-size: 14.5px; }
.contact-row svg { width: 18px; height: 18px; flex: none; }
.contact-row b { font-weight: 600; }
.contact-row span { color: #aab0bd; margin-left: auto; font-size: 13.5px; }
.contact-row.lime { background: var(--lime); border-color: transparent; color: #000; }
.contact-row.lime span { color: #3f4a12; }
.contact-row[class*="row--"] { border-color: transparent; color: #fff; }
.contact-row[class*="row--"] span { color: rgba(255, 255, 255, 0.82); }
.contact-row.row--ig { background: linear-gradient(135deg, #833AB4 0%, #C13584 55%, #DC2F69 100%); }
.contact-row.row--fb { background: #1772E8; }
.contact-row.row--yt { background: #ED0000; }
.contact-row.row--li { background: #0A66C2; }
.contact-row.row--tt { background: #010101; border-color: rgba(255, 255, 255, 0.3); }
a.contact-row[class*="row--"]:hover { filter: brightness(1.09); }
.follow { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 10px; }
.follow .follow-label { grid-column: 1 / -1; }
.follow .chip { justify-content: center; min-width: 0; padding: 9px 14px; }
.follow .chip small { display: none; }
.follow .chip .h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-label { flex: 0 0 100%; margin-bottom: -3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime); }
.chip.on-dark { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: #fff; }
.chip.on-dark small { color: #aab0bd; }
a.chip.on-dark:hover { border-color: rgba(255,255,255,0.35); }
/* Platform colours. Facebook, YouTube and the Instagram gradient's lighter stops
fail 4.5:1 against white at their official values, so those are nudged darker;
LinkedIn and TikTok are untouched. Measured ratios in the comments. */
.chip.chip--ig, .chip.chip--fb, .chip.chip--yt, .chip.chip--li, .chip.chip--tt { color: #fff; border-color: transparent; }
/* Solid white, not dimmed: the backgrounds below are tuned so white clears 4.5:1, and at this
12px size a dimmed label loses that (0.82 measured 4.35:1 on the LinkedIn blue). */
.chip.chip--ig small, .chip.chip--fb small, .chip.chip--yt small,
.chip.chip--li small, .chip.chip--tt small { color: #fff; }
.chip.chip--ig { background: linear-gradient(135deg, #833AB4 0%, #C13584 55%, #DC2F69 100%); } /* 5.1 / 5.1 / 4.5 */
.chip.chip--fb { background: #1772E8; } /* official #1877F2 was 4.23 */
.chip.chip--yt { background: #ED0000; } /* official #FF0000 was 4.00 */
.chip.chip--li { background: #0A66C2; } /* official, 5.69 */
.chip.chip--tt { background: #010101; border-color: rgba(255, 255, 255, 0.3); } /* 20.9 */
a.chip[class*="chip--"]:hover { filter: brightness(1.09); border-color: transparent; }
a.chip.chip--tt:hover { border-color: rgba(255, 255, 255, 0.5); }
/* Footer */
footer { background: var(--footer-bg); padding: 48px 0 36px; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13.5px; color: #4b5563; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--blue); }
/* Narrow desktop: five columns get tight, so show the platform name instead of
the handle rather than letting handles ellipse. Still one row. */
@media (max-width: 1100px) {
.follow .chip .h { display: none; }
.follow .chip small { display: inline; color: #fff; }
.about-layout { grid-template-columns: 1fr; gap: 30px; }
.about-copy { max-width: 76ch; }
.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.fact { min-height: 0; }
}
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; padding: 48px 24px; gap: 36px; }
.hero-photo { width: 100%; justify-self: stretch; }
.facts { grid-template-columns: 1fr 1fr; }
.vid-grid { grid-template-columns: 1fr 1fr; }
.contact-card { grid-template-columns: 1fr; padding: 40px 28px; }
.contact-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
section { padding: 52px 0; }
/* Hero: portrait first, full-width CTAs, tidy contact pills */
.hero-grid { padding: 32px 24px 40px; gap: 30px; }
.hero-photo { order: -1; }
.hero-photo img { aspect-ratio: 4/4.2; }
.hero-photo .tag { left: 12px; bottom: 12px; right: 12px; padding: 11px 14px; }
h1 { font-size: 40px; }
.eyebrow { margin-bottom: 18px; }
.hero-sub { font-size: 17px; margin-top: 18px; }
.hero-ctas { display: grid; gap: 10px; margin-top: 26px; }
.btn-dark, .btn-line { justify-content: center; padding: 15px 22px; }
.social-strip { margin-top: 28px; gap: 8px; }
.chip { font-size: 13px; padding: 10px 15px; }
/* Two of Morgan's own handles now, short enough to show in full */
.strip-ms { display: grid; grid-template-columns: 1fr; }
.strip-ms .strip-label { grid-column: 1 / -1; }
.strip-ms .row-break { display: none; }
.strip-ms .chip { justify-content: flex-start; }
.strip-ms .chip small { margin-left: auto; font-size: 12px; }
.chip.on-dark[class*="chip--"] small { color: #fff; }
/* Facts: 2 x 2 instead of four tall slabs */
.facts { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.fact { padding: 16px 14px; }
.fact b { font-size: 20px; }
.fact span { font-size: 12px; margin-top: 5px; }
/* Videos */
.vid-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; }
.vid.feature { grid-template-columns: 1fr; }
.vid.feature .vid-meta { padding: 16px 18px 20px; }
.vid.feature h3 { font-size: 19px; }
.vid.feature .vid-meta p { font-size: 13px; margin-top: 8px; }
.videos-head p { font-size: 15.5px; }
/* Contact card: rows were overflowing the viewport */
.contact-card { padding: 32px 20px; border-radius: 16px; gap: 34px; }
.contact-card p { font-size: 15.5px; }
.contact-row { flex-wrap: wrap; row-gap: 3px; padding: 13px 15px; font-size: 14px; }
.contact-row b { min-width: 0; overflow-wrap: anywhere; }
.contact-row span { margin-left: 0; flex-basis: 100%; padding-left: 32px; }
.follow { display: grid; grid-template-columns: 1fr 1fr; padding-top: 24px; gap: 8px; }
.follow .chip:last-child:nth-child(even) { grid-column: 1 / -1; }
.follow-label { grid-column: 1 / -1; }
.chip.on-dark .h { display: none; }
.chip.on-dark small { font-size: 13px; font-weight: 500; color: #fff; }
}