/* ============================================================
   THE HOME PAGE, 30 SEPTEMBER 2026

   Clean and editorial, laid out after lukesartor.com at the owner's
   request: slim header with dropdown submenus, full bleed hero with
   the name running across it, then full width sections alternating
   dark and light, each mostly an image beside some text, square
   uppercase buttons, a portfolio grid near the end.

   His colours were deliberately NOT copied. The owner asked for black
   and blue: sections alternate near black and a deep navy, all with
   white text, and blue is the one accent. There are two blues on
   purpose. --hi is the fill behind button text and passes contrast
   with white; --hi-2 is lighter, for small accent text on the dark,
   where the fill blue would be too dim to read. (It was warm paper and
   hi-vis yellow for an afternoon before that.)

   Everything is scoped to body.lx, so none of it can reach another
   page. It loads after styles.css and overrides it where they meet.
   The tokens --text, --text-2, --text-3 and --edge are re-pointed
   inside .light and .dark sections, which is what lets the shared
   pieces (the FAQ, the steps, the dives) sit on either without their
   own rules changing.
   ============================================================ */

.lx {
  --ink: #0e0e0f;
  --ink-2: #19191b;
  --paper: #0b1428;
  --paper-2: #111c36;
  --hi: #2563eb;
  --hi-2: #6aa5ff;
  --hi-ink: #ffffff;
  --head-h: 64px;
  --pad-x: clamp(1.25rem, 5vw, 4.5rem);
  --pad-y: clamp(4.5rem, 10vw, 8.5rem);
  background: var(--ink);
  color: #f3f1ec;
}
.lx main { overflow-x: clip; }

/* dark and light sections carry their own ink */
.lx .dark, .lx .band, .lx .site-foot {
  --text: #f3f1ec; --text-2: rgba(243, 241, 236, 0.74); --text-3: rgba(243, 241, 236, 0.52);
  --edge: rgba(255, 255, 255, 0.14); --edge-bright: rgba(255, 255, 255, 0.3);
  background: var(--ink); color: var(--text);
}
/* ".light" is the navy alternate now. The class name stayed so the
   markup did not have to change; only what it means did. */
.lx .light {
  --text: #f1f4fb; --text-2: rgba(241, 244, 251, 0.74); --text-3: rgba(241, 244, 251, 0.54);
  --edge: rgba(255, 255, 255, 0.14); --edge-bright: rgba(255, 255, 255, 0.3);
  background: var(--paper); color: var(--text);
}

/* ---------- type ---------- */
.lx .h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; margin: 0; }
.lx .h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; margin: 0; }
.lx .h3 { font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; margin: 0; }
.lx .big { font-size: clamp(1.125rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--text-2); margin: 1.25rem 0 0; max-width: 38ch; }
.lx .eyebrow {
  margin: 0 0 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3);
}
.lx .light .eyebrow { color: var(--hi-2); }
.lx .dark .eyebrow { color: var(--hi-2); }
.lx .display { font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; }
.lx .lede { color: var(--text-2); }
.lx .ilink { color: inherit; text-decoration-color: var(--hi-2); text-decoration-thickness: 2px; }

/* ---------- buttons: one solid button, everything else a link ----------
   Option C, chosen by the owner on 30 September 2026 after the first
   version paired a solid block with a white outline box. That pair
   read as two different styles, and the solid one rendered 89px tall
   against 58px, because its text was squeezed until it nearly wrapped.

   So there is ONE button look, blue and square, at a fixed height with
   nowrap so it can never be squeezed again. Every secondary action is
   an underlined uppercase link with an arrow: .btn-line and .text-link
   now look the same, and neither is a box. */
.lx .btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 54px; padding: 0 1.75rem; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--hi); color: var(--hi-ink);
  transition: background-color 0.25s ease;
}
.lx .btn:hover { background: #1d4ed8; }
.lx .btn:focus-visible { outline: 2px solid var(--hi-2); outline-offset: 3px; }
.lx .btn-big { height: 62px; padding: 0 2.4rem; font-size: 0.9375rem; }

.lx .btn-line, .lx .text-link {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none; white-space: nowrap;
  padding: 0.35rem 0; background: none; border: 0; border-bottom: 2px solid var(--hi-2); border-radius: 0;
  font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease;
}
.lx .btn-line::after, .lx .text-link::after { content: "→"; transition: transform 0.25s ease; }
.lx .btn-line:hover, .lx .text-link:hover { color: var(--hi-2); }
.lx .btn-line:hover::after, .lx .text-link:hover::after { transform: translateX(3px); }
.lx .text-link { margin-top: 1.5rem; }

/* the button and its link sit on one centred line, the link given room */
.lx .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }
.lx .skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 300; padding: 0.8rem 1.2rem;
  background: var(--hi); color: var(--hi-ink); font-weight: 700;
}
.lx .skip:focus { top: 1rem; }

/* ---------- header ---------- */
.lx .site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 180; height: var(--head-h);
  display: flex; align-items: center; gap: 2rem; padding: 0 var(--pad-x);
  color: #fff; transition: background-color 0.35s ease, transform 0.4s ease, box-shadow 0.35s ease;
}
.lx .site-head.solid { background: rgba(14, 14, 15, 0.94); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
.lx .site-head.hidden { transform: translateY(-100%); }
.lx .brand { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.2em; color: inherit; margin: 0; }
.lx .menu { margin-left: auto; }
.lx .menu-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.lx .menu-list > li { position: relative; }
.lx .menu-list > li > a, .lx .menu-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.85rem;
  font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86); background: none; border: 0; cursor: pointer;
}
.lx .menu-btn::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.lx .menu-list > li > a:hover, .lx .menu-btn:hover { color: #fff; }
/* Specific enough to beat the plain menu link rule above, which clears
   backgrounds for every link in the list. */
.lx .menu-list > li > a.menu-cta { margin-left: 0.6rem; background: var(--hi); color: var(--hi-ink); padding: 0.7rem 1.1rem; }
.lx .menu-list > li > a.menu-cta:hover { background: #fff; color: var(--ink); }
.lx .sub {
  position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: 0.6rem 0; list-style: none;
  background: var(--ink); border-top: 2px solid var(--hi); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.lx .menu-folder:hover .sub, .lx .menu-folder:focus-within .sub, .lx .menu-btn[aria-expanded="true"] + .sub {
  opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.lx .sub a {
  display: block; padding: 0.65rem 1.2rem; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.82); white-space: nowrap;
}
.lx .sub a:hover, .lx .sub a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* phone menu: a full screen sheet that drills down a panel at a time */
.lx .nav-toggle { display: none; }
@media (max-width: 900px) {
  .lx .menu { display: none; }
  .lx .nav-toggle {
    display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px;
    border-radius: 0; background: none; border: 0; color: #fff; cursor: pointer;
  }
  .lx .nav-bars { display: grid; gap: 7px; width: 24px; }
  .lx .nav-bars i { display: block; height: 2px; background: currentColor; transition: transform 0.3s ease; }
  .lx .nav-toggle[aria-expanded="true"] .nav-bars i:first-child { transform: translateY(4.5px) rotate(45deg); }
  .lx .nav-toggle[aria-expanded="true"] .nav-bars i:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .lx .nav-sheet {
    position: fixed; inset: 0; z-index: 170; display: block;
    padding: calc(var(--head-h) + 2rem) var(--pad-x) 2rem;
    background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .lx .nav-sheet[hidden] { display: none; }
  .lx .sheet-panel { display: grid; gap: 0.2rem; }
  .lx .sheet-panel[hidden] { display: none; }
  .lx .sheet-panel a, .lx .sheet-panel button {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    padding: 0.9rem 0; font: inherit; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em;
    color: #fff; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left; cursor: pointer;
  }
  .lx .sheet-panel .sheet-back {
    font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hi-2);
    justify-content: flex-start; border-bottom: 0; padding-bottom: 1.25rem;
  }
}

/* ---------- hero ---------- */
.lx .hero {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  place-items: initial; padding: 0 0 clamp(1.5rem, 4vh, 3rem); text-align: left; overflow: hidden;
}
.lx .hero-media { border-radius: 0; will-change: transform; }
.lx .hero-scrim {
  background:
    linear-gradient(to bottom, rgba(14, 14, 15, 0.55), rgba(14, 14, 15, 0) 22%),
    linear-gradient(to top, rgba(14, 14, 15, calc(var(--scrim) + 0.4)), rgba(14, 14, 15, var(--scrim)) 45%, rgba(14, 14, 15, calc(var(--scrim) * 0.6)));
}
.lx .hero-kicker {
  position: relative; z-index: 1; margin: 0 var(--pad-x) 0.5rem;
  font-size: clamp(0.8125rem, 1.4vw, 1.0625rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hi-2);
}
/* The name, set big and still. It used to run as a marquee; the owner
   asked for it static. Sized so all six letters fit a phone. */
.lx .hero-name {
  position: relative; z-index: 1; margin: 0 var(--pad-x); line-height: 0.86;
  font-size: clamp(4.25rem, 17vw, 16rem); font-weight: 700; letter-spacing: -0.05em; color: #fff;
}

/* ---------- sections ---------- */
.lx .block { position: relative; padding: var(--pad-y) var(--pad-x); }
.lx .block-head { max-width: 1320px; margin: 0 auto clamp(3rem, 6vw, 5rem); }
.lx .block .wrap { max-width: 1320px; padding-inline: 0; }

/* image beside text, full width */
.lx .split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center;
  max-width: none;
}
.lx .split.flip .split-img { order: 2; }
.lx .split-img { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.lx .split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx .split-text { max-width: 36rem; }
.lx .split-text > p:not(.big):not(.eyebrow) { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; max-width: 38ch; }
.lx .split-text > .btn-line { margin-top: 2rem; }

.lx .ticks { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.7rem; }
.lx .ticks li { display: flex; align-items: center; gap: 0.8rem; font-size: 1.0625rem; color: var(--text); }
.lx .ticks li::before { content: ""; width: 18px; height: 2px; background: var(--hi); flex: none; }

/* the service rows */
.lx .row {
  max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.lx .row + .row { margin-top: clamp(4rem, 9vw, 7.5rem); }
.lx .row.flip { grid-template-columns: 1fr 1.15fr; }
.lx .row.flip .row-img { order: 2; }
.lx .row-img { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.lx .row-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.lx .row:hover .row-img img { transform: scale(1.04); }
.lx .row-text p:not(.eyebrow) { font-size: 1.125rem; line-height: 1.65; color: var(--text-2); margin: 1rem 0 0; max-width: 40ch; }
.lx .row-text .tags { margin-top: 1.5rem; }
.lx .tags li { border-radius: 0; background: transparent; border: 1px solid var(--edge-bright); color: var(--text-2); font-size: 0.8125rem; }

/* the statement band */
.lx .band { padding: clamp(4rem, 10vw, 8rem) var(--pad-x); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lx .band-text {
  margin: 0 auto; max-width: 1320px; font-size: clamp(2.4rem, 7.2vw, 7rem); font-weight: 700;
  letter-spacing: -0.045em; line-height: 0.98; text-transform: uppercase; color: var(--text);
}

/* a closer look: the intro block, then the dives keep their own stage */
.lx .closer { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.lx .closer .wrap { max-width: 1320px; margin: 0 auto; }
.lx .dive-kick { color: var(--hi); }
.lx .dive-on .dive-note { border-radius: 0; background: rgba(14, 14, 15, 0.72); }
.lx .dive-n { border-radius: 0; background: var(--hi); color: var(--hi-ink); border: 0; }
.lx .dive-dots { border-radius: 0; }
.lx .dive-dots i { border-radius: 0; }
.lx .dive-dots i.on { background: var(--hi); box-shadow: none; }
.lx .dive-shot { border-radius: 0; }

/* my work: the portfolio tiles */
.lx .tiles { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.lx .tile { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.lx .tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; }
.lx .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 15, 0.7), rgba(14, 14, 15, 0) 55%); }
.lx .tile:hover img { transform: scale(1.05); opacity: 1; }
.lx .tile-label {
  position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 1; color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lx .tile-label::after { content: " →"; color: var(--hi-2); }

/* videography, how it works and the FAQ keep their markup */
.lx .reel-sec { padding-inline: 0; }
.lx .reel-sec .wrap { padding-inline: var(--pad-x); max-width: calc(1320px + 2 * var(--pad-x)); }
.lx .reel-frame, .lx .reel video { border-radius: 0; }
.lx .reel-sound { border-radius: 0; }
.lx .steps { border-radius: 0; }
.lx .step-n { border-radius: 0; background: var(--hi); color: var(--hi-ink); border: 0; }
.lx .steps::before { background: var(--hi); box-shadow: none; }
.lx .what-card { background: var(--ink-2); padding: clamp(1.4rem, 2.4vw, 2rem); }
.lx .what-card h4 { font-size: 1.25rem; }
.lx .what-card p { font-size: 1rem; line-height: 1.6; }
.lx .faq { border-radius: 0; background: var(--edge); }
.lx .light .faq-item { background: var(--paper); }
.lx .light .faq-item summary:hover { background: var(--paper-2); }
.lx .faq-item summary { font-size: 1.0625rem; font-weight: 600; padding-block: 1.3rem; }
.lx .faq-item p { font-size: 1rem; }
.lx .faq-ask { color: inherit; text-decoration: underline; text-decoration-color: var(--hi-2); text-decoration-thickness: 2px; }

/* contact */
.lx .cta { text-align: center; }
.lx .cta .big { margin-inline: auto; }
.lx .cta .btn { margin-top: 2.5rem; }

/* footer */
.lx .site-foot { padding: clamp(3.5rem, 7vw, 5.5rem) var(--pad-x) 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lx .foot-cols { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.lx .foot-cols nav { display: grid; gap: 0.6rem; align-content: start; }
.lx .foot-cols a { color: var(--text-2); font-size: 0.9375rem; }
.lx .foot-cols a:hover { color: var(--text); }
.lx .foot-h { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hi-2); }
.lx .foot-note { color: var(--text-3); font-size: 0.9375rem; margin: 0.8rem 0 0; }
.lx .site-foot .foot-row {
  max-width: 1320px; margin: 3.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.6rem 1.8rem; font-size: 0.8125rem; color: var(--text-3);
}
.lx .site-foot .foot-row a { color: var(--text-3); }
.lx .site-foot .foot-row a:hover { color: var(--text); }

/* the sound player, squared off to match */
.lx .player { border-radius: 0; background: rgba(14, 14, 15, 0.82); }
.lx .player-btn { border-radius: 0; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  /* the sound player sits full width along the bottom on a phone */
  .lx .hero { padding-bottom: 5.75rem; }
  .lx .split, .lx .row, .lx .row.flip { grid-template-columns: 1fr; }
  .lx .split.flip .split-img, .lx .row.flip .row-img { order: 0; }
  .lx .split-img { aspect-ratio: 4 / 3; }
  .lx .tiles { grid-template-columns: 1fr; }
  .lx .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .lx .foot-cols { grid-template-columns: 1fr; }
}