/* Demo: Tom Harris, enterprise account executive.

   A sales page has to open with the number, because that is the only question
   a sales manager is asking. So the first thing under the headline is six
   years of quota attainment, including the year he missed, which is the detail
   that makes the other five believable.

   Visually: condensed headings, tabular figures, a scoreboard feel. Teal
   rather than the corporate blue every sales deck already uses, and nothing
   like the warm serif pages elsewhere in this set. */

:root {
  --paper:   #FBFBFA;
  --raise:   #FFFFFF;
  --sunk:    #11201F;
  --ink:     #12181A;
  --ink-2:   #4A5557;
  --ink-3:   #6C7473;
  --line:    #E4E6E4;
  --line-2:  #C6CBC9;
  --teal:    #0E7C86;
  --miss:    #B5651D;

  --display: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: var(--teal); text-underline-offset: 3px; }

.shell { max-width: 1020px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.label {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ----------------------------------------------------------------- top --- */
.top {
  background: var(--teal);
  color: #EAF6F5;
  padding-block: 56px 50px;
  border-bottom: 5px solid #2FB3A8;
  background-image: radial-gradient(58% 78% at 90% 6%, rgba(47, 179, 168, 0.46), transparent 62%);
}
.top__in { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.kicker { font-family: var(--display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.top .kicker { color: #A9E6E0; }
.top h1 {
  margin-top: 14px;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  font-weight: 700;
  line-height: 0.98;
  text-transform: uppercase;
}
.top .sub { margin-top: 20px; color: rgba(234, 246, 245, 0.8); max-width: 52ch; }

/* -------------------------------------------------------------- board --- */
/* The scoreboard is the page's opening argument, so it gets the dark ground. */
.board { background: var(--sunk); color: #EAF1F0; padding-block: 44px; }
.board .label { color: rgba(234, 241, 240, 0.6); }

.bars { margin-top: 24px; display: grid; gap: 10px; }
.bar {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 4rem 9rem;
  gap: 16px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.bar__yr { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: rgba(234, 241, 240, 0.72); }
.bar__track { height: 22px; background: rgba(234, 241, 240, 0.1); position: relative; }
.bar__fill { position: absolute; inset: 0 auto 0 0; background: #2FB3A8; }
.bar__fill--miss { background: var(--miss); }
.bar__val { font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.bar__q { font-size: 0.82rem; color: rgba(234, 241, 240, 0.55); }

.board__note {
  margin-top: 22px;
  max-width: 68ch;
  font-size: 0.9rem;
  color: rgba(234, 241, 240, 0.72);
  border-left: 3px solid var(--miss);
  padding-left: 16px;
}

/* --------------------------------------------------------------- deals --- */
.deals { padding-block: 52px 0; }

.deal {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 32px;
  padding-block: 32px;
  border-top: 1px solid var(--line);
}
.deals .deal:first-of-type { border-top: 2px solid var(--ink); }

.deal__amount {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.deal__meta { margin-top: 8px; font-size: 0.8rem; color: var(--ink-3); }

.deal h3 { font-size: clamp(1.2rem, 2.8vw, 1.5rem); font-weight: 600; max-width: 26ch; }
.deal p { margin-top: 14px; color: var(--ink-2); max-width: 64ch; }

/* ----------------------------------------------------------------- how --- */
.how { padding-block: 52px 0; }
.steps { list-style: none; counter-reset: s; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; }
.steps li { counter-increment: s; }
.steps h3 { font-size: 1.1rem; font-weight: 600; padding-top: 12px; border-top: 3px solid var(--teal); }
.steps h3::before {
  content: counter(s) ". ";
  color: var(--teal);
  font-weight: 700;
}
.steps p { margin-top: 10px; color: var(--ink-2); font-size: 0.93rem; }

/* --------------------------------------------------------------- facts --- */
.facts { padding-block: 52px 0; }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.facts__grid > div { background: var(--raise); padding: 18px 20px; }
.facts__n {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.facts__l { margin-top: 8px; font-size: 0.84rem; color: var(--ink-2); }

/* ------------------------------------------------------------- history --- */
.history { padding-block: 52px 0; }
.roles { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.roles li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.roles span { font-size: 0.82rem; color: var(--ink-3); }
.roles b { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); display: block; }

/* ------------------------------------------------------------- contact --- */
.contact { margin-top: 56px; padding: 40px 0 76px; border-top: 2px solid var(--ink); }
.contact h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; text-transform: uppercase; }
.contact p { margin-top: 14px; color: var(--ink-2); max-width: 58ch; }
.contact__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.btn {
  display: inline-block;
  padding: 11px 22px;
  background: var(--teal);
  color: #fff;
  border: 1px solid var(--teal);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover { background: #0B646C; border-color: #0B646C; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--quiet:hover { background: #fff; border-color: var(--ink); color: var(--ink); }

.updated { margin-top: 28px; font-size: 0.78rem; color: var(--ink-3); }

/* ------------------------------------------------------------ narrower --- */
@media (max-width: 880px) {
  .top__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .top__portrait { max-width: 290px; }
  .call__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .deal { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bar { grid-template-columns: 3rem minmax(0, 1fr) 3.4rem; }
  .bar__q { grid-column: 2 / -1; font-size: 0.76rem; }
}

@media (max-width: 560px) {
  .shell { padding-left: 18px; padding-right: 18px; }
  .roles li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}


/* ------------------------------------------------------------ media slot ---
   Where the client's own headshot, work photograph or video goes. Marked
   rather than faked: a framed panel in the page palette with a glyph and a
   label, so the slot looks deliberate while it is empty and the layout does
   not move when the real image lands in it. */
.shot { margin: 0; }
.shot__fill {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px),
    linear-gradient(158deg, #17433F 0%, #11201F 54%, #0A3B43 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.shot__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 26% 16%, rgba(47, 179, 168, 0.40), transparent 62%);
}
.shot__glyph {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  color: rgba(255, 255, 255, 0.62);
}
.shot--wide .shot__fill,
.shot--video .shot__fill { aspect-ratio: 16 / 9; }
.shot--square .shot__fill { aspect-ratio: 1 / 1; }
.shot--tall .shot__fill { aspect-ratio: 3 / 4; }
.shot figcaption {
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.shot--on-dark figcaption { color: rgba(255, 255, 255, 0.55); }
.shot__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0E7C86;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}
.shot__play svg { width: 25px; height: 25px; margin-left: 4px; color: #fff; }

/* A row of slots, for the pages where the work is the photographs. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* A recorded call, because the job is talking and a page cannot show that. */
.call { margin-top: 52px; background: var(--sunk); color: #EAF1F0; padding: 40px 32px; }
.call__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 36px; align-items: center; }
.call h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; text-transform: uppercase; max-width: 16ch; }
.call p { margin-top: 14px; color: rgba(234, 241, 240, 0.72); max-width: 44ch; }
.call .label { color: rgba(234, 241, 240, 0.55); }