/* Work With Me.

   The OpenDesign mock page, carried onto the live shell. It is a LIGHT page and
   it is DENSE: the site shell was written for the opposite (a dark opening band,
   one generous band rhythm, components sized for air). This stylesheet:

     1. Retunes the palette and the band rhythm. --band collapses to 15px at 1440
        so each band reads as tight as the design, instead of twice its height.
     2. Redraws the shell pieces the design changes (white header, rounded buttons)
        and adds the four bands it needs.

   Headings take the site's density display tokens (--fs-display-*) rather than the
   mock's oversized clamps, so the hero tops out at 84px, not 104px. Body and label
   sizes track the shared scale in tokens.css. The dark process band is the single
   dark accent band the light theme keeps; every other band is white or pale.

   Loaded last, after interior.css: the closing .clinic-band is an interior.css band
   and renders as a bare list if that file is dropped. Keep all four stylesheets and
   this order. */

:root {
  --wm-blue: #0061fd;
  --wm-blue-deep: #0049d6;
  --wm-ink: #0b1220;
  --wm-navy: #00132c;
  --wm-gray: #4c5567;
  --wm-gray-soft: #6d7480;
  --wm-line: oklch(0.9 0.008 245);

  /* Shell tokens, retuned for this page so the header button, the clinic band,
     the closing band and the footer sit in the same palette and rhythm as the
     bands above them. */
  --blue: var(--wm-blue);
  --blue-ink: #0056e2;
  --navy-deep: var(--wm-navy);
  --band: clamp(10px, 1.1vw, 15px);
  --band-tight: clamp(8px, 0.9vw, 12px);
  --gutter: clamp(18px, 3.4vw, 50px);
}

/* ---------- Shell: header ---------- */

.site-header {
  position: relative;
  border-bottom: 1px solid var(--wm-line);
  background: var(--white);
  color: var(--wm-ink);
}

.wordmark {
  min-width: 262px;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
}

.wordmark-mark svg { display: block; width: 52px; height: 30px; }

.wordmark-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.wordmark-name {
  color: var(--wm-ink);
  font-size: 27px;
  letter-spacing: 0.005em;
}

.wordmark-credentials {
  color: var(--wm-gray-soft);
  font-size: 9.5px;
  letter-spacing: 0.14em;
}

.site-header .primary-nav a {
  padding-top: 4px;
  color: #333a49;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.site-header .primary-nav a:hover,
.site-header .primary-nav a.active { color: var(--wm-blue); }

.site-header .primary-nav a::after { bottom: 12px; background: var(--wm-blue); }

.site-header .menu-toggle { color: var(--wm-ink); }

.site-header .nav-action {
  min-height: 62px;
  padding-inline: 34px;
  background: var(--wm-blue);
  color: var(--white);
  font-size: 15px;
}

.button,
.nav-action,
.wm-btn,
.wm-card__btn { border-radius: 6px; }

/* The design's header is 85px and its buttons sit on one line with the nav, so
   the bar itself is left at the shell's 84px and only its colour changes. */
.nav-bar { min-height: 88px; }

/* ---------- Hero ---------- */

.wm-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}

/* The photograph and its wash sit behind the copy, so they take the band's
   centered content column (.shell) instead of the full viewport width: the
   media never runs wider than the copy it sits behind, at any breakpoint. The
   approved source is a wide 1672x941 gym portrait, so it fills the column
   without the old 800px cap: the subject on the right stays sharp and the left
   field carries the copy instead of a flat white gutter. */
.wm-hero__media,
.wm-hero__lift {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100% - (var(--gutter) * 2), var(--max-width));
  transform: translateX(-50%);
}

.wm-hero__media { overflow: hidden; border-radius: 16px; }
.wm-hero__lift { border-radius: 16px; }

/* The headline sits on the left field over the darker wall, so the left-biased
   wash does real work: it lifts the wall light enough for ink type while the
   photograph still reads through to the right. The bottom wash clears the facts
   row over the equipment in the lower left. */
.wm-hero__lift {
  z-index: 1;
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.88) 0%, oklch(1 0 0 / 0.68) 28%, oklch(1 0 0 / 0.3) 52%, oklch(1 0 0 / 0.05) 70%, oklch(1 0 0 / 0) 82%),
    linear-gradient(0deg, oklch(1 0 0 / 0.5) 0%, oklch(1 0 0 / 0.16) 26%, oklch(1 0 0 / 0) 54%);
}

/* Cropped to the 3:1 band, not to the frame: the subject's head sits near the top
   of the source, so the band takes the upper slice and keeps his head and
   shoulders in view. */
.wm-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 5%;
}

/* The copy is top-aligned, one short step under the header. The design puts the
   headline immediately below the bar and then fills the band with the facts row. */
.wm-hero__shell {
  display: flex;
  align-items: flex-start;
  z-index: 2;
  padding-block: clamp(12px, 1.3vw, 18px) clamp(20px, 2.2vw, 30px);
}

.wm-hero__copy { max-width: 700px; }

.wm-hero h1 {
  margin: 0;
  color: var(--wm-ink);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-sans);
}

.wm-hero h1 span { color: var(--wm-blue); }

.wm-hero__dek {
  max-width: 32ch;
  margin: var(--sp-4) 0 0;
  color: #1b2233;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.4;
}

.wm-btn {
  display: inline-flex;
  min-height: clamp(44px, 3.6vw, 52px);
  align-items: center;
  gap: 12px;
  margin-top: var(--sp-5);
  padding: 0 clamp(22px, 2.4vw, 34px);
  background: var(--wm-blue);
  color: var(--white);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 180ms ease, transform 180ms ease;
}

.wm-btn:hover {
  background: var(--wm-blue-deep);
  color: var(--white);
  transform: translateY(-2px);
}

.wm-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) clamp(18px, 3.2vw, 50px);
  margin: clamp(24px, 2.8vw, 42px) 0 0;
  padding: 0;
  list-style: none;
}

.wm-facts li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.wm-facts__icon { display: block; flex: none; }

.wm-facts__icon svg { width: clamp(22px, 1.9vw, 27px); height: auto; }

.wm-facts span:last-child {
  color: var(--wm-ink);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.03em;
  line-height: 1.16;
  text-transform: uppercase;
}

/* The handwritten aside. It sits inboard of the right edge over the bright window
   in the gym frame, which is why the offset is in vw rather than --gutter. Page
   ink with a light halo so Caveat's thin strokes read on the light field. */
.wm-note {
  font-weight: 700;
  top: clamp(16px, 1.7vw, 24px);
  /* Pinned to the content column's right edge, not the viewport's, so the note
     stays over the photograph now that the photograph rides that column. */
  right: max(var(--gutter), calc((100% - var(--max-width)) / 2));
  color: var(--wm-ink);
  font-size: clamp(23px, 2.75vw, 40px);
  text-shadow: 0 1px 12px oklch(1 0 0 / 0.92), 0 1px 2px oklch(1 0 0 / 0.95);
  transform: rotate(-6deg);
  transform-origin: top right;
}

.wm-note svg { width: clamp(48px, 4.6vw, 68px); }

/* ---------- Band 1: the three ways in ---------- */

.wm-ways {
  padding: var(--band) 0;
  background: var(--white);
}

.wm-ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.75vw, 25px);
  border-radius: 16px;
  background: var(--wm-card-bg);
}

.wm-card--blue { --wm-card-bg: #edf6fe; --wm-card-mark: #cfe2fb; --wm-card-accent: #0061fd; }
.wm-card--green { --wm-card-bg: #eef6f0; --wm-card-mark: #c3decd; --wm-card-accent: #06403e; }
.wm-card--violet { --wm-card-bg: #f3f1fe; --wm-card-mark: #d6c9fd; --wm-card-accent: #491fc5; }

.wm-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.wm-card__mark {
  display: grid;
  width: clamp(44px, 6.2vw, 88px);
  height: clamp(44px, 6.2vw, 88px);
  place-items: center;
  border-radius: 50%;
  background: var(--wm-card-mark);
}

.wm-card__mark svg { width: clamp(26px, 3vw, 44px); height: auto; }

.wm-card__go {
  display: grid;
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  flex: none;
  place-items: center;
  border: 1.5px solid var(--wm-card-accent);
  border-radius: 50%;
  color: var(--wm-card-accent);
  transition: background-color 160ms ease, color 160ms ease;
}

.wm-card__go svg { width: clamp(13px, 1.15vw, 16px); height: auto; }

.wm-card__go:hover {
  background: var(--wm-card-accent);
  color: var(--white);
}

/* The design runs the title straight under the mark with almost no gap, then the
   body, then the button pinned to the bottom. */
.wm-card__title {
  margin: clamp(6px, 0.6vw, 9px) 0 var(--sp-2);
  color: var(--wm-ink);
  font-size: var(--fs-display-sm);
  line-height: 1.02;
}

.wm-card__body {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  color: var(--wm-gray);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.45;
}

.wm-card__btn {
  display: flex;
  min-height: clamp(40px, 3vw, 44px);
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  background: var(--wm-card-accent);
  color: var(--white);
  font-size: clamp(12px, 0.95vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 160ms ease, transform 160ms ease;
}

.wm-card__btn:hover {
  filter: brightness(1.14);
  color: var(--white);
  transform: translateY(-1px);
}

/* ---------- Band 2: the process (the one dark accent band) ---------- */

.wm-process {
  padding: var(--band) 0;
  background: var(--wm-navy);
  color: var(--white);
}

.wm-eyebrow {
  margin: 0;
  color: var(--wm-blue);
  font-size: clamp(10.5px, 0.9vw, 13px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* On the one dark surface the shared accent fails AA at eyebrow size: --wm-blue
   is 3.66:1 on navy. Same hue (217), lightened one step, clears 4.5:1. Scoped to
   the process band so the light bands keep the shared accent. */
.wm-process .wm-eyebrow { color: #2b7bfd; }

/* Same fix for the step numerals, which are 14-17px and therefore small text
   under WCAG: --wm-blue is 3.66:1 on navy, so the ring number takes the one-
   step-lighter 4.74:1 blue. The ring border and the heading span keep the
   shared display accent. */
.wm-process .wm-step__num { color: #2b7bfd; }

/* Heading rail on the left, the three steps beside it -- the design sets them
   side by side, not stacked. */
.wm-process__grid {
  display: grid;
  grid-template-columns: minmax(170px, 0.3fr) minmax(0, 1fr);
  gap: clamp(22px, 2.8vw, 44px);
  align-items: center;
}

.wm-process__title {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-display-md);
  line-height: 0.98;
}

.wm-process__title span { color: var(--wm-blue); }

.wm-steps {
  --wm-step-gap: clamp(24px, 3.4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wm-step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-step { position: relative; }

.wm-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.wm-step__num {
  display: grid;
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  flex: none;
  place-items: center;
  border: 2px solid var(--wm-blue);
  border-radius: 50%;
  color: var(--wm-blue);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1;
}

.wm-step__icon { display: block; color: var(--white); }

.wm-step__icon svg { width: clamp(23px, 2.05vw, 29px); height: auto; }

.wm-step__label {
  margin: clamp(10px, 1vw, 14px) 0 var(--sp-2);
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.04;
}

.wm-step__body {
  margin: 0;
  color: #c3cbd8;
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.42;
}

.wm-step:not(:last-child)::after {
  position: absolute;
  top: clamp(9px, 0.9vw, 13px);
  right: calc(var(--wm-step-gap) / -2 - 15px);
  width: 30px;
  height: 12px;
  content: "→";
  color: #fff;
  font-size: 25px;
  line-height: 12px;
  text-align: center;
  opacity: 0.85;
}

/* ---------- Band 3: what is included ---------- */

.wm-included {
  padding: var(--band) 0;
  background: var(--white);
}

.wm-included__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.06fr) minmax(225px, 0.9fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}

.wm-included h2 {
  margin: var(--sp-3) 0 var(--sp-4);
  color: var(--wm-ink);
  font-size: var(--fs-display-md);
}

.wm-included__copy > p:not(.wm-eyebrow) {
  max-width: 46ch;
  margin: 0 0 var(--sp-5);
  color: var(--wm-gray);
  font-size: clamp(14px, 1.15vw, 16.5px);
  line-height: 1.5;
}

.wm-included__media {
  align-self: stretch;
  min-height: clamp(200px, 19vw, 275px);
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-muted);
}

.wm-included__media img {
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 19vw, 275px);
  object-fit: cover;
  object-position: 50% 52%;
  /* The frame is already a tight, faceless hands-on-low-back detail, so this only
     nudges it: a light scale holds the hands as the focal point while the bright
     room behind them still reads through at the band's real size. */
  transform: scale(1.12);
  transform-origin: 50% 52%;
}

/* ---------- Band 4: closing (shell.css band, re-lit for this page) ---------- */

/* shell.css paints .final-scrim for a navy-top page: a 94/85/55% film that leaves
   this page's sunset ~90% white and the outline button a hairline on pale paper.
   Pull the film back so the mountain reads while the ink copy keeps contrast,
   restore the photograph's colour, and take the outline button to page ink.
   work-with-me.css is loaded by home/about/sports/articles as well as this page,
   so every rule here is scoped to .page-work-with-me and cannot reach them. */
.page-work-with-me .final-cta .final-scrim {
  background:
    linear-gradient(90deg, oklch(1 0 0 / 0.78) 0%, oklch(1 0 0 / 0.6) 45%, oklch(1 0 0 / 0.42) 76%, oklch(1 0 0 / 0.32) 100%),
    linear-gradient(0deg, oklch(1 0 0 / 0.44) 0%, oklch(1 0 0 / 0.1) 34%, oklch(1 0 0 / 0) 66%);
}

.page-work-with-me .final-cta .final-media img {
  filter: saturate(1.04) brightness(1.01) contrast(1.02);
}

.page-work-with-me .final-cta .button-outline {
  border-color: var(--wm-ink);
  color: var(--wm-ink);
}

.wm-list {
  display: grid;
  gap: clamp(10px, 1.1vw, 15px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wm-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: #2c3444;
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.3;
}

.wm-list svg {
  flex: none;
  margin-top: 1px;
  width: clamp(18px, 1.5vw, 21px);
  height: auto;
  color: var(--wm-blue);
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .wm-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-included__grid { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.8fr); }
  .wm-list { grid-column: 1 / -1; padding-top: var(--sp-4); }
}

/* 781-919px. The shared shell swaps to its mobile menu only at 780px, so through
   this band the full desktop nav row is in use -- and this page's header carries a
   wider wordmark and a roomier button than the shell default (262px wordmark, 34px
   button padding). At 900 that row measured 944px against a 900px viewport and
   opened a horizontal scroll. Tighten only this page's own header controls so the
   row fits again; above 919px the shell's full desktop sizes return. */
@media (max-width: 919px) {
  .page-work-with-me .wordmark { min-width: 0; }
  /* Shrink to the lockup's real width, but never break "DR. SEAN REID" onto two
     lines -- the nav labels are allowed to wrap here (that is the shell's own
     behaviour at these widths); the wordmark is not. */
  .page-work-with-me .wordmark-name { white-space: nowrap; }
  .page-work-with-me .nav-bar { gap: 13px; }
  .page-work-with-me .site-header .primary-nav a { font-size: 13px; letter-spacing: 0.04em; }
  .page-work-with-me .site-header .nav-action { min-height: 54px; padding-inline: 18px; font-size: 13.5px; }
}

@media (max-width: 900px) {
  /* The photograph becomes a block above the copy instead of a layer behind it:
     on a phone the design's left-to-right composition has nowhere to work. */
  .wm-hero { display: flex; flex-direction: column; }
  .wm-hero__media {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: min(100% - (var(--gutter) * 2), var(--max-width));
    margin-inline: auto;
    transform: none;
    height: clamp(250px, 46vh, 420px);
  }
  .wm-hero__media img { object-position: 62% 30%; }
  .wm-hero__lift { display: none; }
  .wm-hero__shell { padding-top: var(--band-tight); }
  /* Stacked hero: the photograph is a block above the copy, and the subject sits
     right-of-centre in every crop, so a right-hand note always lands on him (it
     crossed his head at 600). Put the note in the upper-left over the dark wall
     with white ink and the dark halo, which clears the subject at every stacked
     width and keeps Caveat's thin strokes legible. */
  .wm-note {
    top: calc(66px + var(--sp-3));
    right: auto;
    left: var(--gutter);
    color: var(--white);
    font-size: clamp(22px, 6vw, 34px);
    text-shadow: 0 1px 14px oklch(0.13 0.05 255 / 0.85), 0 1px 3px oklch(0.13 0.05 255 / 0.6);
    transform-origin: top left;
  }

  .wm-process__grid { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
  .wm-steps { grid-template-columns: 1fr; gap: var(--sp-7); }
  .wm-step:not(:last-child)::after { display: none; }
  .wm-step__body { max-width: 54ch; }
}

@media (max-width: 780px) {
  .wm-ways__grid { grid-template-columns: 1fr; }
  .wm-included__grid { grid-template-columns: 1fr; }
  .wm-list { grid-column: auto; padding-top: 0; }
  .wm-included__media,
  .wm-included__media img { min-height: 240px; }

  .wordmark { min-width: 0; }
  .wordmark-name { font-size: 20px; }
  .wordmark-mark svg { width: 36px; height: 20px; }
  .wordmark-credentials { font-size: 9px; letter-spacing: 0.1em; }

  .site-header .primary-nav {
    background: var(--white);
    border-color: var(--wm-line);
  }

  .site-header .primary-nav a {
    color: var(--wm-ink);
    border-bottom-color: var(--wm-line);
  }

  .site-header .primary-nav a:hover,
  .site-header .primary-nav a.active { color: var(--wm-blue); }
}

@media (max-width: 480px) {
  .wordmark-credentials { display: none; }
  .wm-hero__media { height: clamp(220px, 40vh, 300px); }
  /* Phone: the stacked placement above already clears the subject; only the type
     steps down so four handwritten lines stay inside the shorter photo band. */
  .wm-note { font-size: 22px; }
  .wm-note svg { width: 62px; }
  .wm-btn { width: 100%; justify-content: center; }
  .wm-facts { gap: var(--sp-3) var(--sp-4); }
}