/* Younus Mahmood, capability page.
   Navy ink, one cobalt accent, Geist throughout. One orchestrated motion: the hero ticket board. */

:root {
  --paper: #f6f7f9;
  --surface: #ffffff;
  --ink: #0c1a33;
  --ink-2: #4a5670;
  --ink-3: #7b869c;
  --line: #dde2ea;
  --accent: #2747d6;
  --accent-soft: #e6ebfd;
  --done: #11845a;
  --done-soft: #def3ea;
  --font: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --frame: 1120px;
  --rail: 220px;
  --radius-lg: 14px;
  --radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a1222;
    --surface: #101b31;
    --ink: #eaf0fa;
    --ink-2: #a3b0c7;
    --ink-3: #7684a0;
    --line: #22304a;
    --accent: #8ba2ff;
    --accent-soft: #1a2850;
    --done: #4cc995;
    --done-soft: #12342a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.frame { width: 100%; max-width: var(--frame); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* Masthead */
.masthead-inner {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px; padding-bottom: 26px;
}
.masthead-name { font-weight: 600; letter-spacing: -0.01em; }
.masthead-mail {
  color: var(--ink-2); text-decoration: none; font-size: 15px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .25s ease, color .2s ease;
}
.masthead-mail:hover { color: var(--ink); background-size: 100% 1px; }

/* Hero */
.hero { padding-top: 44px; padding-bottom: 96px; }
.hero-role { color: var(--ink-2); font-size: 15px; margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(42px, 6.4vw, 84px); line-height: 1; font-weight: 600;
  letter-spacing: -0.042em; text-wrap: balance; max-width: 14.5em;
}
.hero-copy { margin-top: 36px; }
.hero-lede { color: var(--ink-2); font-size: 19px; line-height: 1.6; max-width: 34em; }

.closer-mail {
  color: var(--accent); text-decoration: none; font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 4px;
  transition: background-size .3s ease;
}
.closer-mail:hover { background-size: 0 2px; background-position: 100% 100%; }

/* The one button on the page: how you reach me */
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 32px; }
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  padding: 15px 24px 15px 20px; border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 12px 28px -14px rgba(12, 26, 51, .55);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cta:hover { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(39, 71, 214, .55); }
.cta:active { transform: translateY(0); }
.cta-icon { flex: none; }
.cta-note { color: var(--ink-3); font-size: 15px; }
.cta-note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.cta-note a:hover { color: var(--accent); }

/* The board: one ticket travels Scoped, Building, Shipped. The only motion on the page. */
.board {
  --gap: 16px; --pad: 16px; --lp: 12px; --slot: 124px; --head: 38px;
  position: relative; margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  padding: var(--pad); border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface);
}
.lane { background: var(--paper); border-radius: 12px; padding: 0 var(--lp) var(--lp); display: grid; gap: 10px; align-content: start; }
.lane-name { height: var(--head); display: flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: -10px; }
.slot { height: var(--slot); border: 1.5px dashed var(--line); border-radius: 10px; }
.ghost { height: 58px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.ghost::before, .ghost::after { content: ""; position: absolute; left: 14px; height: 7px; border-radius: 4px; background: var(--line); }
.ghost::before { top: 17px; width: 62%; }
.ghost::after { top: 33px; width: 38%; }
.ghost-short { height: 46px; }
.ghost-short::after { display: none; }

.tk {
  position: absolute; top: calc(var(--pad) + var(--head)); left: calc(var(--pad) + var(--lp));
  width: calc((100% - 2 * var(--pad) - 2 * var(--gap)) / 3 - 2 * var(--lp)); height: var(--slot);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 var(--line), 0 18px 36px -18px rgba(12, 26, 51, .35);
}
.tk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tk-team { color: var(--ink-3); font-size: 13px; }
.tk-status { display: inline-grid; font-size: 12px; font-weight: 600; }
.st {
  grid-area: 1 / 1; padding: 3px 9px; border-radius: 999px; text-align: center;
  background: var(--accent-soft); color: var(--accent); opacity: 0;
}
.st-3 { background: var(--done-soft); color: var(--done); }
.tk-title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; margin-top: 10px; }
.tk-who { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; margin-top: auto; }
.avatar {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
}

/* A conveyor of three tickets. Each ticket's cycle is 7.5s, offset by a third, so
   one sits in each lane and they all step forward together. Step = ticket width
   + its lane padding + the gap between lanes. */
.tk { --step: calc(100% + 2 * var(--lp) + var(--gap)); --t: 7.5s; }
.tk-1 { --d: .4s; }
.tk-2 { --d: calc(.4s - 2.5s); }
.tk-3 { --d: calc(.4s - 5s); }

@media (prefers-reduced-motion: no-preference) {
  .tk { opacity: 0; animation: conveyor var(--t) linear var(--d) infinite both; }
  .tk .st-1 { animation: chip1 var(--t) linear var(--d) infinite both; }
  .tk .st-2 { animation: chip2 var(--t) linear var(--d) infinite both; }
  .tk .st-3 { animation: chip3 var(--t) linear var(--d) infinite both; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-2, .tk-3 { display: none; }
  .tk-1 { transform: translateX(calc(2 * var(--step))); }
  .tk-1 .st-3 { opacity: 1; }
}

@keyframes conveyor {
  0%, 5%  { transform: translate(0, 8px); opacity: 0; }
  13%     { transform: translate(0, 0); opacity: 1; }
  33.3%   { transform: translate(0, 0); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  42%     { transform: translate(var(--step), 0); }
  66.6%   { transform: translate(var(--step), 0); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  75.3%   { transform: translate(calc(2 * var(--step)), 0); opacity: 1; }
  90%     { transform: translate(calc(2 * var(--step)), 0); opacity: 1; }
  97%, 100% { transform: translate(calc(2 * var(--step)), -8px); opacity: 0; }
}
@keyframes chip1 { 0%, 37% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes chip2 { 0%, 37% { opacity: 0; } 39%, 70.5% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
@keyframes chip3 { 0%, 70.5% { opacity: 0; } 72.5%, 100% { opacity: 1; } }

/* Bands: label rail on the left, content on the right */
.band {
  display: grid; grid-template-columns: var(--rail) 1fr; gap: 40px;
  padding-top: 40px; padding-bottom: 72px;
}
.band::before {
  content: ""; grid-column: 1 / -1; height: 1px; background: var(--line); margin-bottom: 0;
}
.band-label { font-size: 15px; font-weight: 500; color: var(--ink-2); padding-top: 3px; }
.band-body { min-width: 0; }

/* Experience */
.jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 30px; }
.job { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.job h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.job-meta { color: var(--ink-2); font-size: 15px; margin-top: 2px; }
.job-dates { color: var(--ink-3); font-size: 14px; }
.job > p { color: var(--ink-2); }

/* Services */
.services { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 56px; }
.services h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px; }
.services p { color: var(--ink-2); font-size: 16px; }

/* Case studies */
.case { padding-bottom: 64px; }
.case + .case { padding-top: 56px; border-top: 1px solid var(--line); }
.case-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 24px; }
.case-head h3 { font-size: clamp(28px, 3vw, 36px); font-weight: 600; letter-spacing: -0.035em; }
.case-kind { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.case-client { color: var(--accent); }
.case-link {
  margin-left: auto; font-size: 15px; color: var(--ink-2); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.case-link:hover { color: var(--accent); }

.case-shots { margin-bottom: 30px; }
.case-shots img {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface);
}
.case-shots-2 { display: grid; grid-template-columns: 1fr 1.45fr; gap: 16px; align-items: start; }

.case-parts { margin: 0; display: grid; grid-template-columns: 1.25fr 1.25fr .9fr; gap: 32px; }
.case-parts dt { font-size: 14px; font-weight: 500; color: var(--ink-3); margin-bottom: 8px; }
.case-parts dd { margin: 0; font-size: 16px; color: var(--ink-2); }
.case-parts .part-ai { grid-column: 1 / -1; padding: 18px 20px; border-radius: 12px; background: var(--accent-soft); }
.case-parts .part-ai dt { color: var(--accent); }
.case-parts .part-ai dd { color: var(--ink); max-width: 62em; }

.more { padding-top: 48px; border-top: 1px solid var(--line); }
.more-title { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-bottom: 18px; }
.more-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.more-list li { color: var(--ink-2); font-size: 16px; }
.more-list strong { color: var(--ink); font-weight: 600; }

/* How we'd start */
.deal { margin-bottom: 36px; }
.deal-price { font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.deal-hours { color: var(--ink-2); margin-top: 8px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.steps li { padding: 20px 24px 0 0; }
.step-n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 14px;
}
.steps p { font-size: 16px; color: var(--ink-2); }

/* Closer */
.closer { padding-top: 0; padding-bottom: 104px; }
.closer::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 96px; }
.closer-line { color: var(--ink-2); font-size: 19px; margin-bottom: 14px; }
.closer-mail { font-size: clamp(30px, 5.4vw, 64px); letter-spacing: -0.04em; line-height: 1.1; padding-bottom: 6px; background-size: 100% 3px; }
.closer-mail:hover { background-size: 0 3px; }

.footer { padding-top: 0; padding-bottom: 40px; color: var(--ink-3); font-size: 14px; }

/* Tablet and phone */
@media (max-width: 960px) {
  .hero { padding-top: 40px; padding-bottom: 72px; }
  .band { grid-template-columns: 1fr; gap: 20px; }
  .services { grid-template-columns: 1fr; gap: 24px; }
  .case-parts { grid-template-columns: 1fr; gap: 18px; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .frame { padding-left: 16px; padding-right: 16px; }
  body { font-size: 16px; }
  .masthead-mail { font-size: 14px; }
  .masthead-name { font-size: 15px; }
  .masthead-inner { padding-top: 18px; padding-bottom: 18px; }
  .band { padding-top: 32px; padding-bottom: 48px; }
  .hero-lede { font-size: 17px; }
  .job { grid-template-columns: 1fr; gap: 6px; }
  .case-shots-2, .more-list, .steps { grid-template-columns: 1fr; }
  .case-link { margin-left: 0; }
  .board { --gap: 8px; --pad: 8px; --lp: 6px; --slot: 104px; --head: 32px; margin-top: 44px; border-radius: 14px; }
  .lane { border-radius: 9px; }
  .lane-name { font-size: 12px; }
  .ghost { display: none; }
  .tk { padding: 9px; }
  .tk-team, .tk-who { display: none; }
  .tk-top { justify-content: flex-start; }
  .tk-status { font-size: 10px; }
  .st { padding: 2px 6px; }
  .tk-title { font-size: 12.5px; margin-top: 8px; }
  .closer { padding-bottom: 72px; }
  .closer::before { margin-bottom: 64px; }
  .closer-mail { font-size: 26px; overflow-wrap: anywhere; }
}

/* PDF: two pages, document layout */
@page { size: Letter; margin: 0.5in 0.55in; }
@media print {
  :root { --paper: #ffffff; }
  body { font-size: 10px; line-height: 1.5; }
  .frame { max-width: none; padding: 0; }
  a { text-decoration: none; }
  .cta-row, .footer, .board { display: none; }

  .masthead-inner { padding: 0 0 9px; border-bottom: 1.5px solid var(--ink); }
  .masthead-name { font-size: 12.5px; }
  .masthead-mail { font-size: 10.5px; color: var(--accent); font-weight: 600; }

  .hero { display: block; padding: 18px 0 2px; }
  .hero-copy { display: block; }
  .hero-role { font-size: 9.5px; margin-bottom: 6px; }
  .hero h1 { font-size: 27px; letter-spacing: -0.035em; max-width: 6.4in; }
  .hero-lede { font-size: 11px; margin: 9px 0 0; max-width: none; }

  .band { grid-template-columns: 1.15in 1fr; gap: 0 18px; padding: 12px 0 8px; break-inside: avoid; }
  .band::before { margin-bottom: 10px; }
  .band-label { font-size: 10px; font-weight: 600; color: var(--ink); padding-top: 1px; }

  .jobs { gap: 8px; }
  .job { grid-template-columns: 1.85in 1fr; gap: 14px; }
  .job h3 { font-size: 11.5px; }
  .job-meta { font-size: 9px; margin-top: 0; }
  .job-dates { font-size: 9px; }
  .job > p { font-size: 10px; }

  .services { gap: 16px; }
  .services h3 { font-size: 11px; margin-bottom: 3px; }
  .services p { font-size: 9.5px; line-height: 1.45; }

  #start { order: 0; }
  .deal { margin-bottom: 8px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .deal-price { font-size: 14px; letter-spacing: -0.02em; }
  .deal-hours { margin: 0; font-size: 10px; }
  .steps { border-top: 0; gap: 12px; }
  .steps li { padding: 0; display: flex; gap: 7px; align-items: flex-start; }
  .step-n { width: 16px; height: 16px; font-size: 9px; margin: 0; flex: none; }
  .steps p { font-size: 9.5px; line-height: 1.4; }

  /* Print order: pitch on page one, work on page two */
  main { display: flex; flex-direction: column; }
  main > section { width: 100%; }
  .hero { order: 1; } #experience { order: 2; } #take-on { order: 3; } #start { order: 4; } #work { order: 5; }

  #work { display: block; padding-top: 0; }
  #work::before { display: none; }
  #work > .band-label { font-size: 10px; margin-bottom: 4px; padding-bottom: 7px; border-bottom: 1.5px solid var(--ink); }

  .case { display: grid; grid-template-columns: 2.5in 1fr; column-gap: 0.25in; padding: 12px 0; break-inside: avoid; }
  .case + .case { padding-top: 12px; border-top: 1px solid var(--line); }
  .case-head { grid-column: 1 / -1; margin-bottom: 8px; gap: 4px 10px; }
  .case-head h3 { font-size: 15px; letter-spacing: -0.025em; }
  .case-kind { font-size: 9.5px; }
  .case-link { font-size: 9.5px; }
  .case-shots { grid-column: 1; margin: 0; align-self: start; }
  .case-shots img { border-radius: 6px; }
  .case-shots-2 { grid-template-columns: 1fr; gap: 6px; }
  .case-shots-2 img:first-child { height: 1.35in; object-fit: cover; object-position: top; }
  .case-parts { grid-column: 2; grid-template-columns: 1fr; gap: 6px; align-self: start; }
  .case-parts dt { font-size: 9px; margin-bottom: 1px; }
  .case-parts dd { font-size: 10px; }

  .more { padding-top: 10px; }
  .more-title { font-size: 10px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
  .more-list { gap: 6px 22px; }
  .more-list li { font-size: 9.5px; line-height: 1.45; }

  /* Pin print columns so tablet rules never apply on paper */
  .services { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .case-parts .part-ai { padding: 6px 9px; border-radius: 6px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .more-list { grid-template-columns: 1fr 1fr; }
  #work { padding-top: 14px; break-inside: auto; }
  .case-shots-2 { grid-template-columns: 1fr 1.45fr; }
  .case-shots-2 img:first-child { height: auto; }
  body { zoom: 1; }
  .case { grid-template-columns: 2.55in 1fr; padding: 14px 0; }
  .case + .case { padding-top: 14px; }
  .more { padding-top: 14px; }
  #work { break-before: page; }
  .hero { padding: 30px 0 8px; }
  .hero h1 { font-size: 31px; }
  .band:not(#work) { padding: 18px 0 10px; }
  .band::before { margin-bottom: 14px; }
  .jobs { gap: 12px; }
  .hero { padding: 26px 0 8px; }
  .hero h1 { font-size: 34px; }
  .hero-lede { font-size: 12px; margin-top: 12px; }
  .closer { order: 4; padding: 0 0 0; margin-top: 10px; }
  .closer::before { margin-bottom: 16px; }
  .closer-line { font-size: 12px; margin-bottom: 6px; }
  .closer-mail { font-size: 30px; background-size: 100% 2px; padding-bottom: 3px; }
}
.footer a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--accent); }

@media print {
  .case { grid-template-columns: 2.2in 1fr; padding: 10px 0; }
  .case + .case { padding-top: 10px; }
  .case-parts { gap: 4px; }
  .case-parts dd { font-size: 9.6px; line-height: 1.45; }
  .case-parts .part-ai { margin-top: 2px; }
  .more { padding-top: 10px; }
}