:root {
  --ink: #161514;
  --ink-soft: #84807a;
  --ground: #fbfaf7;
  --panel: #ffffff;
  --line: #e7e4dd;
  --blue: #3758a8;
  --lime: #dbe45c;
  --yellow: #dce35f;
  --stats-bg: #f3f0e8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Safety net: nothing on this page is meant to scroll sideways. If a
     mobile-width edge case ever pushes something a few pixels past the
     viewport, clip it here rather than let the whole page pick up a
     horizontal scrollbar (which drags every section, including ones that
     fit fine, along for the ride and makes them look wider than they are). */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Self-hosted Switzer (Semibold + Semibold Italic) - the LWBMedia. wordmark font. */
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/Switzer-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/Switzer-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('/assets/fonts/Switzer-Extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.wordmark {
  font-family: 'Switzer', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}
.wordmark em { font-style: italic; font-weight: 600; }
/* "LWB" reads semibold; the italic "Media." matches it at semibold too —
   both sides only actually have a 600 italic cut loaded by default (see
   the .site-header override below for where a true bold + bold italic
   pairing is loaded and used instead). */
.wordmark > span { font-weight: 600; }

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(22,21,20,0.03);
  /* Sticky (pinned while scrolling) on phones, where the header is short
     and losing it costs real navigation. On desktop/larger screens it
     scrolls away with the rest of the page instead — see the min-width
     override below. */
  position: sticky;
  top: 0;
  z-index: 2;
}
@media (min-width: 901px) {
  .site-header { position: static; box-shadow: none; }
}
.site-header .wordmark { font-size: 19px; flex-shrink: 0; }
.nav-contact { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; row-gap: 8px; }
.nav-contact a.contact-pill { color: var(--ink-soft); transition: color .18s ease, border-color .18s ease, background .18s ease; }
.nav-contact a.contact-pill:hover { color: var(--ink); border-color: var(--ink-soft); background: var(--stats-bg); }
.portal-btn {
  background: var(--blue);
  color: var(--yellow);
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 100px;
  display: inline-block;
  transition: background .18s ease, transform .18s ease;
}
.portal-btn:hover { background: #2c4585; transform: translateY(-1px); }
.ck-golf-btn {
  /* Fairway-stripes-inspired: two shades of green in a diagonal repeat,
     matching the motif on creatorkit.golf's own site rather than a plain
     solid button, so this reads as a link to a distinct sub-brand. */
  background-image: repeating-linear-gradient(115deg, #1c6b47 0px, #1c6b47 14px, #0d4630 14px, #0d4630 28px);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 100px;
  display: inline-block;
  white-space: nowrap;
  transition: transform .18s ease;
}
.ck-golf-btn:hover { transform: translateY(-1px); }
@media (max-width: 600px) {
  .ck-golf-btn, .portal-btn { padding: 9px 16px; font-size: 12.5px; }
}
@media (max-width: 360px) {
  .ck-golf-btn, .portal-btn { padding: 8px 13px; font-size: 11.5px; }
}

/* ---- Hero ----
   The hero always fills exactly one screen: the visible viewport height minus the
   header (svh = the "small" viewport, so it stays put as phone browser bars slide in
   and out). Its content is authored in a 1440-wide frame (--hero-frame-h tall; taller
   on phones) and /hero-fit.js scales that frame as one unit to the largest size that
   fits both the hero's width and height, setting --hero-scale. The canvas itself is
   made as big as the hero divided by that scale, so the four corner graphics always sit
   at the real corners of the screen while the heading, tag and stats stay centred. */
.hero {
  --hero-frame-h: 827;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - var(--header-h, 86px));
  height: calc(100svh - var(--header-h, 86px));
  min-height: 360px;
}
.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--hero-scale, 1));
  height: calc(100% / var(--hero-scale, 1));
  transform: scale(var(--hero-scale, 1));
  transform-origin: top left;
  display: flex;
  align-items: center;
  justify-content: center;
}
.corner-icon {
  position: absolute;
  width: 210px;
  height: auto;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}
.corner-icon.tl { top: 32px; left: 40px; transform: scaleX(-1); animation-delay: 0s; }
.corner-icon.tr { top: 32px; right: 40px; animation-delay: .08s; }
.corner-icon.bl { bottom: 32px; left: 40px; animation-delay: .16s; }
.corner-icon.br { bottom: 32px; right: 40px; transform: scaleX(-1); animation-delay: .24s; }

.hero-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; text-align: center; }
.hero-word {
  display: block;
  font-size: 150px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 28px;
  opacity: 0;
  animation: fadeUp .9s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay: .05s;
}
.tag {
  display: inline-block;
  background: var(--blue);
  color: var(--yellow);
  font-family: 'Switzer', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  /* Text bumped up slightly; padding trimmed to compensate so the blue
     container itself stays roughly the same size. */
  font-size: 27px;
  letter-spacing: .04em;
  padding: 12px 28px;
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp .9s cubic-bezier(.16,.84,.44,1) forwards;
  animation-delay: .2s;
  transition: transform .2s ease;
  /* The tag's width is set inline (in JS, see index.html) to whatever the
     widest of its rotating phrases measures at - box-sizing:border-box so
     that JS-measured width already includes this padding, text-align:center
     with nowrap/hidden so a shorter phrase (mid-type or mid-delete) stays
     centered in the middle of the pill rather than the pill resizing
     around it - the whole point being the blue box never changes size or
     position as the text inside it types and deletes. */
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.tag:hover { transform: translateY(-2px) scale(1.02); }
/* Hidden clones of the tag, one per rotating phrase, used purely so JS can
   read their real rendered width (same font/padding/canvas-unit sizing as
   the visible tag, breakpoint and font-load safe) and lock that onto the
   visible tag - see hero-tag-cycle in index.html. */
.tag-measure { position: fixed; left: -9999px; top: -9999px; visibility: hidden; pointer-events: none; margin: 0 !important; animation: none !important; opacity: 1 !important; }
.tag-cursor {
  display: inline-block;
  width: 0.5em;
  margin-left: 2px;
  animation: tagCursorBlink 1s step-end infinite;
}
@keyframes tagCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tag-cursor { animation: none; opacity: 0; }
}

.hero-stats-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; opacity: 0; animation: fadeUp .9s cubic-bezier(.16,.84,.44,1) forwards; animation-delay: .35s; }
.contact-pill {
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.contact-pill strong { font-weight: 700; }
/* 75% of the pills' previous size (was 17px / 15px 28px padding). */
.hero-stat-pill { font-size: 13px; padding: 11px 21px; transition: transform .2s ease, border-color .2s ease; }
.hero-stat-pill:hover { transform: translateY(-2px); border-color: var(--ink-soft); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---- 404 page — reuses the homepage hero's corner-icon canvas ---- */
.not-found-code { font-size: 190px; color: var(--blue); }
.not-found-text {
  font-size: 16px; color: var(--ink-soft); max-width: 460px;
  margin: 0 auto 32px; opacity: 0; animation: fadeUp .9s cubic-bezier(.16,.84,.44,1) forwards; animation-delay: .2s;
}
@media (max-width: 600px) {
  .not-found-code { font-size: 110px; }
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  opacity: 0;
  animation: fadeIn .9s ease forwards;
  animation-delay: .55s;
  transition: border-color .2s ease;
}
.scroll-cue:hover { border-color: var(--ink-soft); }
.scroll-cue span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--ink-soft);
  animation: scroll-cue-move 1.6s ease-in-out infinite;
}
@keyframes scroll-cue-move {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- Portfolio ---- */
.portfolio { position: relative; z-index: 1; padding: 0 56px; max-width: 1440px; margin: 0 auto; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 8px; }
.section-head h2 { font-size: 28px; font-weight: 800; margin: 0; }
.view-all { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.view-all:hover { color: var(--blue); }

.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }

.view-all-repeat { display: flex; justify-content: center; margin-top: 40px; }
.view-all-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 100px;
  padding: 13px 28px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.view-all-btn:hover { border-color: var(--blue); background: var(--stats-bg); transform: translateY(-1px); }
.video-card { display: block; }
.thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(160deg, #20242c, #0f1115 75%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.video-card:hover .thumb { transform: translateY(-3px) scale(1.015); box-shadow: 0 12px 28px rgba(22,21,20,0.14); }
.play-circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.video-card:hover .play-circle { background: var(--blue); transform: translate(-50%,-50%) scale(1.08); }
/* Corner flag on any thumbnail whose channel is flagged "Creator Kit Golf"
   in admin - same fairway-stripe gradient as the header's Creator Kit Golf
   button, so it reads as the same sub-brand rather than a generic tag.
   Named thumb-ck-badge (not ck-badge) because .ck-badge is already used
   further down for the Creator Kit Golf section's own yellow eyebrow pill -
   sharing that name meant this one was silently picking up the wrong
   colors from that later, more specific-in-the-cascade rule. */
.thumb-ck-badge {
  position: absolute; top: 10px; right: 10px;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 8px 5px 10px; border-radius: 100px;
  background-image: repeating-linear-gradient(115deg, #1c6b47 0px, #1c6b47 10px, #0d4630 10px, #0d4630 20px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  font-size: 10.5px; font-weight: 700; color: #fff; letter-spacing: 0.01em; white-space: nowrap;
  line-height: 1;
}
.thumb-ck-badge svg { flex-shrink: 0; }
.video-meta { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.video-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #8d93a0, #585d68);
  overflow: hidden;
}
.video-avatar img { width: 100%; height: 100%; object-fit: cover; }
.video-meta-text { min-width: 0; }
.video-title { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-channel { margin: 0; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Clients ---- */
.clients { position: relative; z-index: 1; padding: 40px 0 96px; margin-top: 24px; max-width: 1440px; margin-left: auto; margin-right: auto; }
.clients > h2 { font-size: 28px; font-weight: 800; margin: 0 0 26px; padding: 0 56px; }
.clients-card-wrap { padding: 0 56px; }
.clients-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px 22px;
}
.clients-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}
.clients-card-head h3 { font-size: 20px; font-weight: 800; margin: 0; }
.clients-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clients-search-wrap { position: relative; width: 200px; max-width: 100%; }
.clients-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.clients-search {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 100px;
  padding: 9px 16px 9px 34px; transition: border-color .18s ease;
}
.clients-search:hover, .clients-search:focus { border-color: var(--ink-soft); outline: none; }
.clients-search::-webkit-search-cancel-button { display: none; }

.clients-row {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 20px 0 6px;
}
.clients-row::-webkit-scrollbar { height: 6px; }
.clients-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
.client-item { flex: 0 0 auto; display: flex; align-items: stretch; scroll-snap-align: start; }
.client-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 26px; }
.client-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #8d93a0, #585d68);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
  overflow: hidden;
  transition: transform .2s ease;
}
.client-item:hover .client-avatar { transform: scale(1.06); }
/* A company/brand with no social channel behind it (isManual, see
   index.html/portfolio.html) reads better as a slightly-rounded square
   than a circle — circles are reserved for an actual YouTube/Instagram/
   TikTok profile picture. */
.client-avatar-square { border-radius: 14px; }
.client-avatar img { width: 100%; height: 100%; object-fit: cover; }
.client-avatar-hover { position: relative; cursor: pointer; display: inline-block; }
.client-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 12px;
  width: 220px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(22,21,20,0.18);
}
.client-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.client-avatar-hover:hover .client-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.client-name-row { display: flex; align-items: center; gap: 5px; }
.client-name { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.client-verified {
  width: 15px; height: 15px; border-radius: 50%; background: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.client-subs { font-size: 12px; color: var(--ink-soft); }
.client-website { color: var(--blue); }
.client-divider { width: 1px; background: var(--line); margin: 4px 0; }

.clients-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.clients-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s; }
.clients-dot.active { background: var(--ink); }

/* ---- Footer ---- */
.site-footer { padding: 28px 56px; text-align: center; border-top: 1px solid var(--line); }
.site-footer span { font-size: 12px; color: var(--ink-soft); }
/* Hidden on desktop/tablet — the nav's own contact-pills cover it there.
   Shown at phone widths once the nav hides those to make room for the
   Creator Kit Golf / Client portal buttons (see the 600px block below), so
   the email/phone links still exist on the page, just moved down here. */
.footer-contact-mobile { display: none; }
.footer-links { display: flex; justify-content: center; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.footer-links a { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); transition: color .18s ease; }
.footer-links a:hover { color: var(--blue); }

/* ---- Simple content pages (Contact, Reviews, 404) ---- */
.simple-page { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; text-align: center; }
.simple-page h1 { font-size: 44px; margin: 0 0 14px; }
.simple-page .simple-sub { font-size: 15.5px; color: var(--ink-soft); max-width: 480px; margin: 0 auto 40px; }
.simple-cta-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.simple-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: var(--yellow);
  font-size: 14px; font-weight: 600; padding: 13px 26px; border-radius: 100px;
  transition: background .18s ease, transform .18s ease;
}
.simple-cta:hover { background: #2c4585; transform: translateY(-1px); }
.simple-cta.secondary { background: var(--panel); color: var(--ink); border: 1.5px solid var(--line); }
.simple-cta.secondary:hover { border-color: var(--blue); background: var(--stats-bg); }

.simple-form { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 32px; }
.simple-form .form-field { margin-bottom: 20px; }
.simple-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.simple-form .field-hint { font-size: 12px; color: var(--ink-soft); margin: 4px 0 0; }
.simple-form input[type="text"],
.simple-form input[type="email"],
.simple-form input[type="password"],
.simple-form textarea,
.simple-form select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--ground);
  transition: border-color .18s ease;
}
.simple-form input:focus, .simple-form textarea:focus, .simple-form select:focus { outline: none; border-color: var(--blue); }
.simple-form textarea { resize: vertical; min-height: 110px; }
.simple-form .radio-row, .simple-form .check-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; margin-bottom: 8px; }
.simple-form .radio-group { display: flex; gap: 18px; flex-wrap: wrap; }
.simple-form .submit-btn {
  width: 100%; background: var(--blue); color: var(--yellow); border: none; border-radius: 100px;
  padding: 14px; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background .18s ease;
}
.simple-form .submit-btn:hover { background: #2c4585; }
.simple-form .submit-btn:disabled { opacity: .6; cursor: default; }
.form-status { text-align: center; font-size: 13.5px; margin-top: 16px; display: none; }
.form-status.success { color: #1c6b47; }
.form-status.error { color: #b1362f; }

.star-picker { display: flex; gap: 6px; }
.star-picker button {
  background: none; border: none; cursor: pointer; padding: 2px; font-size: 30px; line-height: 1;
  color: var(--line); transition: color .12s ease, transform .12s ease;
}
.star-picker button.filled { color: var(--yellow); }
.star-picker button:hover { transform: scale(1.1); }

.review-card { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin-bottom: 16px; }
.review-card .review-stars { color: var(--yellow); font-size: 15px; margin-bottom: 8px; letter-spacing: 2px; }
.review-card .review-text { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }
.review-card .review-author { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nav-contact a.contact-pill { display: none; }
}
@media (max-width: 600px) {
  .site-header, .portfolio { padding-left: 20px; padding-right: 20px; }
  .clients > h2, .clients-card-wrap { padding-left: 20px; padding-right: 20px; }
  .clients-controls { width: 100%; }
  .clients-search-wrap { width: 100%; }
  /* minmax(0, 1fr), not a bare 1fr: a bare track defaults to a minmax(auto,
     1fr), and "auto" bottoms out at the item's min-content size. Video
     titles are single-line (white-space: nowrap + ellipsis), so their full
     unwrapped text width counts as min-content — without the 0 floor here,
     a long title forces this column (and the thumbnail inside it) wider
     than the screen, which is exactly what was overflowing the page. */
  .video-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  /* Email/phone move down to the footer at this width — between the logo
     and the two nav buttons (Creator Kit Golf, Client portal) there isn't
     room for them up top too. */
  .nav-contact a.contact-pill { display: none; }
  .nav-contact { gap: 8px; }
  .footer-contact-mobile { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 18px; }
  /* Creator Kit Golf nav link is desktop-only — on mobile it's reached by
     scrolling to the homepage section instead of a nav button. */
  .ck-golf-btn { display: none; }

  /* The hero is a fixed 1440x827 "frame" (see the Hero comment above) that
     scales down as one block to fit the viewport width. Two things both
     need fixing at phone widths, not just one:
     1. Squashed short: the outer .hero's own aspect-ratio + the canvas's
        fixed height are both increased here so the section itself isn't a
        sliver barely taller than a single video thumbnail.
     2. Everything inside looks tiny: increasing the *section* height alone
        doesn't grow the logo/tag/stat-pills — they're sized in the same
        1440-wide canvas coordinate space as desktop, so at a ~390px phone
        width (scale ~0.27) a desktop-sized 25px tag or 13px stat-pill
        shrinks to a near-illegible 6-7px. The font-sizes below are
        deliberately much larger than their desktop values to compensate —
        they're canvas units that get scaled down by the same factor as
        everything else, not final on-screen pixel sizes. */
  .hero { --hero-frame-h: 1200; }
  /* the scroll cue is drawn in canvas units, which shrink with the canvas - enlarge it so it stays tappable/visible */
  .scroll-cue { transform: translateX(-50%) scale(1.8); transform-origin: bottom center; bottom: 40px; }
  /* .hero-inner has a 1080px max-width on desktop to keep the block from
     spanning the full 1440px canvas — but at phone font sizes (200px+
     canvas units below) the unbroken "LWBMedia." wordmark's real rendered
     width can exceed that cap, and a capped box centers on the wordmark's
     LEFT edge only (text overflows right past the box, box stays centered
     in the canvas) rather than symmetrically — this is what read as "not
     centered". Dropping the cap here lets the box grow to fit the text
     itself, which centers correctly since the box and the canvas share a
     center line again. */
  .hero-inner { max-width: none; }
  .hero-word { font-size: 200px; margin-bottom: 46px; }
  .tag { font-size: 61px; padding: 14px 36px; margin-bottom: 64px; }
  /* Grid instead of flex-wrap: a flex row re-wraps between "3 across" and
     "2 + 1" as the count-up animation changes each pill's text width
     (e.g. "0" -> "100M+"), which visibly glitches between layouts mid
     count. A fixed 2-column grid can't re-wrap — the count is locked at
     2-top/1-bottom regardless of how wide the animating numbers get. */
  .hero-stats-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 28px;
    justify-content: center;
  }
  .hero-stats-row > *:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
  .hero-stat-pill { font-size: 40px; padding: 24px 52px; }
  .corner-icon { width: 190px; }
}
/* Phones: a shorter hero (no more than ~115% of the screen width tall), with bigger corner graphics and scroll cue. */
@media (max-width: 600px) {
  .hero {
    height: min(calc(100vh - var(--header-h, 70px)), 115vw);
    height: min(calc(100svh - var(--header-h, 70px)), 115vw);
  }
  .corner-icon { width: 310px; }
  .corner-icon.tl { top: 44px; left: 48px; }
  .corner-icon.tr { top: 44px; right: 48px; }
  .corner-icon.bl { bottom: 44px; left: 48px; }
  .corner-icon.br { bottom: 44px; right: 48px; }
  .scroll-cue { transform: translateX(-50%) scale(2.7); bottom: 44px; border-color: var(--ink-soft); }
}
@media (max-width: 400px) {
  .hero { --hero-frame-h: 1300; }
  .hero-word { font-size: 220px; }
  .tag { font-size: 67px; }
  .hero-stat-pill { font-size: 44px; }
}

/* ---- Portfolio (view all) + Video detail pages ---- */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 20px; }
.back-link:hover { color: var(--ink); }

.portfolio-hero { padding: 56px 56px 0; max-width: 1440px; margin: 0 auto; }
.portfolio-hero-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.portfolio-hero-head h1 { font-size: 44px; font-weight: 800; margin: 0; }
.portfolio-count-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.portfolio-count { font-size: 14px; color: var(--ink-soft); }
.portfolio-count-recent { font-size: 12px; color: var(--ink-soft); opacity: .75; }
.portfolio-sub { font-size: 16px; color: var(--ink-soft); margin: 0 0 32px; max-width: 640px; }

.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-pill { border: 1.5px solid var(--line); border-radius: 100px; padding: 9px 20px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; background: none; cursor: pointer; }
.filter-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.portfolio-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.segmented { display: inline-flex; align-items: center; background: var(--stats-bg); border-radius: 100px; padding: 4px; gap: 2px; }
.segmented-btn {
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--ink-soft);
  border-radius: 100px; cursor: pointer; font-family: inherit;
  padding: 9px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  white-space: nowrap; transition: color .18s ease, background .18s ease;
}
.segmented-btn:hover:not(.active) { color: var(--ink); }
.segmented-btn.active { background: var(--ink); color: #fff; }

.order-select-wrap { position: relative; display: inline-flex; align-items: center; }
.order-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 1.5px solid var(--line); border-radius: 100px;
  padding: 9px 34px 9px 18px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--panel); font-family: inherit; cursor: pointer;
  transition: border-color .18s ease;
}
.order-select:hover { border-color: var(--ink-soft); }
.order-select-wrap svg { position: absolute; right: 14px; pointer-events: none; color: var(--ink-soft); }

.portfolio-layout { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.portfolio-layout .video-grid { flex: 1 1 480px; min-width: 0; }
/* Each freshly-rendered batch (initial load or a load-on-scroll page)
   fades/slides in with a small per-card stagger set inline via
   animation-delay in portfolio.html. */
.portfolio-layout .video-card { opacity: 0; animation: cardFadeUp .5s ease forwards; }
@keyframes cardFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.grid-sentinel { height: 1px; }
.channels-col { flex: 0 0 300px; }
.channels-col h2 { font-size: 16px; font-weight: 800; margin: 0 0 16px; }
.channels-card { border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
.channel-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px;
  width: 100%; text-align: left; border: none; background: none; cursor: pointer; font-family: inherit;
  transition: background .18s ease, transform .18s ease;
}
.channel-item:hover, .channel-item.active { background: var(--stats-bg); }
.channel-item:hover { transform: translateX(2px); }
.channel-item-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #8d93a0, #585d68);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700;
}
.channel-item.all .channel-item-avatar { background: var(--ink); }
.channel-item-avatar-square { border-radius: 12px; }
.channel-item-name { margin: 0; font-weight: 600; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-item.all .channel-item-name { font-weight: 700; }
.channel-item-subs { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

/* Mobile-only channel picker (see channels-mobile-select in portfolio.html)
   — hidden on desktop, where the real sidebar is reachable. Shown instead
   of it below .channels-tablet-breakpoint, where .portfolio-layout wraps
   and the sidebar would otherwise land far below an infinitely-scrolling
   grid. */
.channels-mobile-wrap { display: none; }
.channels-mobile-select-wrap { position: relative; display: block; margin-bottom: 20px; }
.channels-mobile-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; border: 1.5px solid var(--line); border-radius: 100px;
  padding: 13px 34px 13px 18px; font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--panel); font-family: inherit; cursor: pointer;
}
.channels-mobile-select-wrap svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-soft); }
@media (max-width: 900px) {
  /* .portfolio-layout wraps below this width (480px grid + 300px sidebar +
     40px gap no longer fits) — that's exactly when the sidebar becomes
     unreachable under an infinitely-scrolling grid, so swap it for the
     dropdown pinned above the grid instead of showing both. */
  .channels-mobile-wrap { display: block; }
  .channels-col { display: none; }
}

.video-detail-wrap { display: flex; gap: 40px; align-items: flex-start; padding: 40px 56px 0; max-width: 1440px; margin: 0 auto; flex-wrap: wrap; }
.player-col { flex: 1 1 480px; min-width: 0; max-width: 900px; }
.player {
  aspect-ratio: 16/9; background: linear-gradient(160deg, #20242c, #0f1115 75%);
  border-radius: 14px; position: relative; overflow: hidden;
}
.player-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%; background: var(--blue);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .2s ease;
}
.player:hover .player-play { transform: translate(-50%,-50%) scale(1.08); }
.player-scrub { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,0.18); }
.player-scrub-fill { width: 38%; height: 100%; background: var(--blue); }

.detail-title { font-size: 26px; font-weight: 800; margin: 22px 0 8px; }
.detail-meta { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 20px; }
.detail-channel-row {
  display: flex; align-items: center; gap: 12px; padding: 18px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.detail-channel-link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; }
.detail-channel-link:hover .detail-channel-name { text-decoration: underline; }
.detail-channel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #8d93a0, #585d68); overflow: hidden; }
.detail-channel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.detail-channel-info { flex: 1 1 auto; min-width: 0; }
.detail-channel-name-row { display: flex; align-items: center; gap: 5px; }
.detail-channel-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.detail-subs { font-size: 12.5px; color: var(--ink-soft); }
.detail-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 760px; }

/* ---- Loading skeletons ----
   Shown in place of real text while portfolio-data.php is still loading
   (see video.html) so nobody sees literal "[Video title]" style placeholder
   copy - a shimmering grey bar instead, sized to roughly match what's about
   to land there, swapped out for the real text the instant it's ready. */
.skel {
  display: inline-block; position: relative; overflow: hidden;
  background: var(--stats-bg); border-radius: 6px; color: transparent !important;
  vertical-align: middle;
}
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: translateX(-100%);
  animation: skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes skel-shimmer { 100% { transform: translateX(100%); } }
.skel-title { width: min(420px, 70%); height: 28px; }
.skel-line { width: 90px; height: 13px; }
.skel-avatar { background: var(--stats-bg) !important; }
.skel-desc-line { display: block; width: 100%; height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skel-desc-line:last-child { width: 65%; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
}

.sidebar-col { flex: 1 1 320px; max-width: 380px; min-width: 0; }
.sidebar-col h2 { font-size: 16px; font-weight: 800; margin: 0 0 16px; }
.related-list { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.related-card { display: flex; gap: 12px; min-width: 0; }
.related-thumb {
  width: 150px; flex-shrink: 0; aspect-ratio: 16/9;
  background: linear-gradient(160deg, #20242c, #0f1115 75%); border-radius: 8px;
  position: relative; overflow: hidden;
}
.related-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--blue);
  display: flex; align-items: center; justify-content: center;
}
/* Both this row AND its text child need min-width:0 — a flex child's
   default min-width is auto (= its content's width), so without this a
   long title's own natural width forces the whole card wider than the
   sidebar, which is exactly what was pushing titles off-screen on mobile
   instead of letting them ellipsis. */
.related-meta { display: flex; gap: 8px; min-width: 0; padding-top: 2px; }
.related-meta > div { min-width: 0; }
.related-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: linear-gradient(135deg, #8d93a0, #585d68); overflow: hidden; }
.related-avatar img { width: 100%; height: 100%; object-fit: cover; }
.related-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related-channel { margin: 0; font-size: 11.5px; color: var(--ink-soft); }
.related-stats { margin: 2px 0 0; font-size: 10.5px; color: var(--ink-soft); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.related-card:hover .related-title { color: var(--blue); }

.visit-btn { background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 100px; white-space: nowrap; }
.visit-btn:hover { background: #2c4585; }

@media (max-width: 900px) {
  .portfolio-hero, .video-detail-wrap { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   Our services
   ============================================================ */
.services { position: relative; z-index: 1; padding: 0 56px 88px; max-width: 1440px; margin: 0 auto; }
.services-heading { font-size: 28px; font-weight: 800; margin: 0 0 26px; }

.service-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px 44px;
  margin-bottom: 20px;
}
.service-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.service-feature-title { font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.service-feature-desc { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 420px; }

.coverage-map { position: relative; }
.coverage-map svg { display: block; width: 100%; height: auto; }
.county { fill: var(--stats-bg); stroke: var(--line); stroke-width: 1.5; }
.cty-suffolk { fill: rgba(55,88,168,0.12); stroke: var(--blue); }
.county-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; fill: var(--ink-soft); text-anchor: middle; }
.county-label-home { fill: var(--blue); font-weight: 700; }
.hq-dot { fill: var(--blue); }
.hq-ping {
  fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: .5;
  transform-origin: 170px 72px; animation: mapPing 2.4s ease-out infinite;
}
@keyframes mapPing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
.coverage-caption { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; }
.service-title { font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.service-desc { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

@media (max-width: 900px) {
  .service-feature { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
  .coverage-map { max-width: 360px; margin: 0 auto; }
  .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .services { padding: 0 20px 64px; }
  .service-feature { padding: 26px 20px; border-radius: 16px; }
}

/* ============================================================
   Instagram
   ============================================================ */
.instagram-section { position: relative; z-index: 1; padding: 0 56px 56px; max-width: 1440px; margin: 0 auto; }
.instagram-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.instagram-embed-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; justify-items: center; }
.instagram-embed-row iframe { max-width: 100%; }
.instagram-head h2 { font-size: 28px; font-weight: 800; margin: 0 0 4px; }
.instagram-sub { font-size: 14px; color: var(--ink-soft); margin: 0; }
.instagram-handle { font-weight: 600; color: var(--ink); }
.instagram-follow-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
  color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 11px 24px; border-radius: 100px; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px -8px rgba(221,42,123,0.55);
}
.instagram-follow-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(221,42,123,0.5); }

@media (max-width: 600px) {
  .instagram-section { padding: 0 20px 40px; }
  .instagram-embed-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Creator Kit Golf homepage section
   ============================================================ */
:root {
  /* Creator Kit Golf brand palette, lifted from creatorkit.golf itself so
     this section reads as an authentic extension of that brand rather than
     an LWB-tinted approximation. Two distinct golds are intentional: the
     deeper --leader-gold trims the section (heading, border), the brighter
     #FFD100 is the scorecard's own leaderboard-stripe yellow. */
  --fairway-deep: #0B3D2E;
  --leader-gold: #C9A227;
  --chalk: #F5F2E8;
  --chalk-dim: rgba(245,242,232,0.68);
  --flag-red: #C1272D;
  --flag-red-dark: #921E23;
  --ck-green: #059669;
}
/* Starts with a hard color cut (no fade-in from the section above), on
   purpose — a clean break into the Creator Kit Golf brand rather than a
   blended transition. */
.ck-section {
  position: relative;
  z-index: 1;
  padding: 64px 56px;
  background-image:
    radial-gradient(ellipse at 18% -20%, rgba(201,162,39,0.16) 0%, transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 46px, rgba(0,0,0,0.06) 46px, rgba(0,0,0,0.06) 92px);
  background-color: var(--fairway-deep);
  color: var(--chalk);
  overflow: hidden;
}
.ck-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 100%;
}
.ck-hero-grid > * { min-width: 0; }
.ck-badge {
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,209,0,0.1); color: #FFD100;
  border: 1px solid rgba(255,209,0,0.35);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
}
.ck-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 46px; font-weight: 400; line-height: 1.02;
  letter-spacing: .01em; text-transform: uppercase;
  margin: 0 0 20px;
}
.ck-heading em { font-style: normal; color: var(--leader-gold); }
.ck-sub { font-size: 15px; line-height: 1.65; color: var(--chalk-dim); max-width: 480px; margin: 0 0 22px; }
.ck-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: .02em; color: var(--leader-gold);
  margin: 0 0 26px;
}
.ck-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ck-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--flag-red); color: #fff; font-weight: 700; font-size: 14px;
  padding: 15px 30px; border-radius: 9px;
  box-shadow: 0 8px 20px -6px rgba(193,39,45,0.55);
  transition: background .18s ease, transform .15s ease, box-shadow .15s ease;
}
.ck-cta:hover { background: var(--flag-red-dark); transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(193,39,45,0.5); }
.ck-contacts { display: flex; flex-direction: column; gap: 6px; }
.ck-contact-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--chalk-dim);
  transition: color .15s ease;
}
.ck-contact-link:hover { color: var(--leader-gold); }

/* Mini scorecard HUD — same "leaderboard" card creatorkit.golf's own hero
   uses; the two rows cycle through real golf-creator client channels (name +
   avatar, restricted to golf clients via ckGolfClientPool in index.html),
   and the course/hole/par/scores randomize every few seconds. */
.ck-hud-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ck-hud {
  width: 100%; max-width: 420px; background: #003B2B; border: 2px solid var(--leader-gold);
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.ck-hud-header {
  background: #FFD100; color: #003B2B; padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid #002D21;
}
.ck-hud-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; transition: opacity .3s ease; }
.ck-hud-sub { font-size: 12px; font-weight: 800; text-transform: uppercase; opacity: .85; margin: 3px 0 0; transition: opacity .3s ease; }
.ck-hud-hole {
  font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700;
  background: #003B2B; color: #FFD100; padding: 8px 14px; border-radius: 6px; transition: opacity .3s ease;
}
.ck-hud-body { background: #002D21; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ck-hud-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #003B2B; border: 1px solid rgba(255,209,0,0.3); border-radius: 8px; padding: 12px 14px;
}
.ck-hud-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ck-hud-avatar { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #FFD100; flex-shrink: 0; background-size: cover; background-position: center; transition: opacity .3s ease; }
.ck-hud-name { font-size: 15px; font-weight: 700; color: #FFD100; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s ease; }
.ck-hud-score {
  font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800;
  background: #FFD100; color: #003B2B; padding: 5px 12px; border-radius: 5px; white-space: nowrap; transition: opacity .3s ease;
}
.ck-hud-footer { background: #00281D; padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; }
.ck-hud-par { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #A7F3D0; transition: opacity .3s ease; }
.ck-hud-dots { display: flex; gap: 6px; }
.ck-hud-dot {
  width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,209,0,0.25); color: #A7F3D0;
}
.ck-hud-dot.active { background: #FFD100; color: #003B2B; }

.ck-creators-wrap { margin-top: 56px; position: relative; z-index: 1; }
.client-ckg-badge {
  background: var(--ck-green); color: #fff; font-size: 10px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}

/* ---- Creator Kit Golf "favourite creators" marquee ----
   No heading, no scrollbar, no drag - an off-white bar that just pans the
   channel avatars across on its own, full width regardless of where the
   rest of the page's content is constrained. The item list is rendered
   twice back to back (see index.html) so translateX(-50%) always lands on
   a matching copy and the loop is seamless. */
.ck-marquee-viewport {
  /* The same fairway green as the Creator Kit Golf section this bar sits
     inside (.ck-section's own background, --fairway-deep), so the bar
     reads as a continuation of that section rather than a different shade
     of green next to it. */
  background: var(--fairway-deep);
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 22px 0;
}
.ck-marquee-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation-name: ck-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Deliberately no pause-on-hover/focus here - this bar should keep
   panning no matter what the mouse is doing over it. */
.ck-marquee-track .client-name {
  /* The site's usual beige, now the accent colour against the green bar
     instead of the other way around. */
  color: var(--stats-bg);
}
.ck-marquee-track .client-divider {
  background: rgba(245,242,232,0.35);
}
@keyframes ck-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-marquee-track { animation: none; }
  .ck-marquee-viewport { overflow-x: auto; }
}

@media (max-width: 900px) {
  .ck-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ck-hero-grid > div:first-child { text-align: center; }
  .ck-badge, .ck-actions, .ck-contacts { justify-content: center; }
  .ck-sub, .ck-tagline { margin-left: auto; margin-right: auto; }
}

/* ---- Center everything on mobile/tablet, rather than the desktop pattern
   of a left-aligned heading against a right-aligned action/link ---- */
@media (max-width: 900px) {
  .section-head { flex-direction: column; align-items: center; text-align: center; }
  .clients > h2 { text-align: center; }
  .clients-card-head { flex-direction: column; align-items: center; text-align: center; }
  .clients-controls { justify-content: center; }
  .instagram-head { flex-direction: column; align-items: center; text-align: center; }
  .portfolio-hero-head { flex-direction: column; align-items: center; text-align: center; }
  .portfolio-sub { margin-left: auto; margin-right: auto; text-align: center; }
  .portfolio-controls { flex-direction: column; align-items: center; }
  .portfolio-controls-left { justify-content: center; }
  .segmented { justify-content: center; }
  .channels-col h2 { text-align: center; }
}
@media (max-width: 600px) {
  .ck-section { padding: 48px 20px; }
  .ck-heading { font-size: 34px; }
  .ck-hud { max-width: 340px; }
  .ck-creators-wrap { margin-top: 40px; }
}

/* ============================================================
   Portfolio page — client-side search
   ============================================================ */
.portfolio-controls-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.portfolio-search-wrap { position: relative; width: 280px; max-width: 100%; }
.portfolio-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.portfolio-search {
  width: 100%; font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 100px;
  padding: 13px 44px 13px 42px; transition: border-color .18s ease;
}
.portfolio-search:hover, .portfolio-search:focus { border-color: var(--ink-soft); outline: none; }
.portfolio-search::-webkit-search-cancel-button { display: none; }
.portfolio-search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--stats-bg);
  color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; display: none;
}
.portfolio-search-clear.show { display: flex; align-items: center; justify-content: center; }
.portfolio-no-results {
  border: 1.5px dashed var(--line); border-radius: 14px; padding: 40px 20px;
  text-align: center; font-size: 14px; color: var(--ink-soft);
}
.order-select:disabled { opacity: .5; cursor: not-allowed; }
.channel-item-tags {
  margin: 2px 0 0; font-size: 11px; color: var(--ink-soft); opacity: .75;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Section headers: Switzer Semibold (600) ----
   Placed last so it wins over the earlier per-header 800 weights. */
h1.wordmark, h2.wordmark, h3.wordmark,
.detail-title,
.services-heading, .service-feature-title, .service-title {
  font-family: 'Switzer', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}


/* ---- Lazy thumbnails and skeleton cards ---- */
.thumb img, .related-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s ease;
}
.thumb img.loaded, .related-thumb img.loaded { opacity: 1; }
.thumb.thumb-wait, .related-thumb.thumb-wait { background: var(--stats-bg); }
.thumb-wait::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: translateX(-100%); animation: skel-shimmer 1.3s ease-in-out infinite;
}
.thumb-wait .play-circle, .thumb-wait .related-play { opacity: 0; }
.video-card-skel { display: block; }
.vs-line { display: block; height: 13px; margin-bottom: 8px; }
.video-avatar.skel { border-radius: 50%; }
.client-item-skel .client-avatar { background: var(--stats-bg); }
.client-item-skel .vs-line { margin: 8px auto 0; }
@media (prefers-reduced-motion: reduce) { .thumb-wait::after { animation: none; } .thumb img, .related-thumb img { transition: none; } }
.video-card-skel .video-meta-text { flex: 1; min-width: 0; }
.client-item-skel .client-avatar { border-radius: 50%; }

/* tiny thumbnail shown blurred until the full-size one has loaded */
.thumb img.lo, .related-thumb img.lo { filter: blur(7px); transform: scale(1.06); }
.thumb img, .related-thumb img { transition: opacity .4s ease, filter .5s ease, transform .5s ease; }

/* ---- Uploaded (non-YouTube) videos on the video page ---- */
.player-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; border: 0; }
.player-duration {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  background: rgba(0,0,0,0.72); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; pointer-events: none;
}